Undervisningsplan til sociale medier 1

De enkelte lektionsers indhold (af 90 minutters varighed):

Lektion 1 Introduktion til begrebet blog

Opgaver: Blog opgaver

Lektion 2 Introduktion til Web Applikationer

Opgaver:
Installation og opsætning af blog

Lektion 3 Introduktion til HTML og CSS

Slides:
Introduktion til HTML & CSS

Opgaver:
Introduktion til HTML og CSS

Læs og gennemgå:

Links:

Lektion 4 Software Arkitektur

Læs: Klient-server og tre-lags-arkitekturen

Lektion 5 Mere om HTML og CSS

Opgaver:
HTML og CSS opgaver

Hjælpeværktøjer:

Lektion 6 Design af Web Applikation

Design eksempel:
Præsentation af et design fra industrien.

Opgaver:
Design en blog-side

Lektion 7 Præsentation af designs

CSS Design Mønstre

Lektion 8 Fra Papirsdesign til HTML og CSS

Eksempel:
Implementering af to søjle layout: test.html, og test.css

Opgaver:
Implementer dit design i HTML og CSS

Lektion 9 Implementering af design

Hjælp det virker ikke... HTML og CSS begynder fejl

Lektion 10 Implementering af design

Lektie: Færdiggør jeres design i HTML og CSS.

Lektion 11, 12, 13 Fremvisning af design.

Slides:

Opgaver:

  • Overvej hvilke dele af jeres design der er fælles for alle sider på bloggen, og hvilke dele der er specifikt for et blog post. Bloggen har 3 skabeloner: base.html, post.html, og posts.html. base.html er den generelle skabelon - den indeholder elementer der går igen på samtlige sider i bloggen. post.html og posts.html benytter den generelle skabelon (se slides for mere information om dette). post.html er en skabelon for individuelle blog indlæg - den indeholder elementer der vises på sider med et enkelt blog indlæg. posts.html er en skabelon for sider med en liste af blog indlæg fx forsiden.
  • Overvej hvilke dele af dit design, der skal placeres i base.html, post.html, og posts.html
  • Verificer at bloggen virker på skyen ved at gå til http://skyen.iftek.dk/~ditbrugernavn/blog
  • Gå til shiftedit.net. Tag en kopi af views/base.html kald den fx views/base.original.html.
  • Indsæt herefter små stykker HTML kode fra dit design ind i base.html. Tjek at det virker. Gentag gentag gentag.
  • Indsæt herefter små stykker HTML kode fra dit design ind i posts.html, Tjek at det virker. Gentag gentag gentag.
  • Indsæt herefter små stykker HTML kode fra dit design ind i post.html. Tjek at det virker ved at tilgå et af dine blog indlæg. Hvis du ikke har nogen indlæg endnu, så opret et. Dette gøres ved at logge ind og herefter klikke på opret nyt indlæg.

Links

Medmindre andet er angivet, er indholdet af denne side licenseret under Creative Commons Attribution-NonCommercial 3.0 License