Opgaver: Blog opgaver

Opgaver:
Installation og opsætning af udviklingsmiljø (webserver, database og IDE)
Installation og opsætning af blog

Slides:
Introduktion til HTML & CSS

Opgaver:
Introduktion til HTML og CSS

Læs og gennemgå:

• 15 hurtige lektioner om HTML på http://www.html.dk/tutorials/html/ (på dansk)
• 16 hurtige lektioner om CSS på http://www.html.dk/tutorials/css/ (på dansk)

Links:

• HTML tags http://www.w3schools.com/html/ (på engelsk)
• CSS http://www.w3schools.com/css/ (på engelsk)

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

Opgaver:
HTML og CSS opgaver

Hjælpeværktøjer:

• HTML og CSS Hjælpeværktøjer

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

Opgaver:
Design en blog-side

Vigtigt:
Koderettelser til bloggen

CSS Design Mønstre

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

Opgaver:
Implementer dit design i HTML og CSS

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

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

Slides:

• HTML Skabeloner

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
• Start LAMP serveren og verificer at bloggen virker lokalt ved at gå til http://localhost/blog
• Start Aptana. 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 ved at tilgå http://localhost/blog. Gentag gentag gentag.
• Indsæt herefter små stykker HTML kode fra dit design ind i posts.html, Tjek at det virker ved at tilgå http://localhost/blog. 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.
• Upload til skyen - se evt. Upload af blog

Links

• Mere om HTML Sproget vi benytter: http://twig.sensiolabs.org/doc/templates.html