Göm menyn

TDP001 Handhavande av datormiljö

Tutorial


Under andra perioden kommer ni jobba tillsammans för att skapa en webtutorial över något av de ämnen som introducerats på föreläsning. På föreläsningen som introducerar detta projekt rangordnar ni de ämnen som behandlats och därefter skapar vi grupper om 4 studenter enligt era prioriteringar. Målet med denna övning är att ni dels får öva på grundläggande HTML och CSS samt att ni ska få tillgång till en ingående beskrivning av de ämnen som introducerats under kursens gång.

Projektintro

Ämnen

Dessa ämnen har presenteras:

Innehåll

Följande delar bör er färdiga webplats innehålla (med en meny på varje sida):
  • Bakgrund - vad är det?
  • Problem + lösning - Presentera ett eller flera vanliga problem som man kan använda systemet/tekniken till att lösa, samt beskrivning hur man går tillväga för att lösa varje exemplifierat problem med tekniken
  • Referenssidor - en förkortad man-sida som andra kan använda sig av
  • Länksamling och referenser - var kan jag hitta mer information?
  • Sidfot/sidhuvud med lämplig information

Genomförande

I denna del av kursen kommer vi fokusera på HTML5 för innehåll och CSS3 för presentation. Det är viktigt att er webplats separerar dessa på ett bra sätt! Se föreläsningsbilder angående HTML/CSS för mer information.

Följande element kan vara bra att ha:

  • DOCTYPE
  • html
  • head
  • meta
  • title
  • body
  • div
  • span
  • p
  • br
  • a
  • h-taggar, h1-h5
  • img
  • dl,dt,dd
  • li + ol/ul
Följande HTML5-specifika element kan vara bra:
  • header/footer
  • nav
  • section

Följande css-egenskaper kan vara bra:

  • width/height
  • border
  • color
  • background
  • margin/padding
  • float
  • left/right
  • border, border-radius

Det är ett krav att er sida validerar enligt w3c.

Redovisning

Koden ska vid redovisningen vara publicerad på IDAs www-und domän. Ett enkelt sätt att lösa detta är att lägga den i www-pub mappen i någon av gruppmedlemmarnas hem-mapp på astmatix.

Efter godkänd redovisning i sal ska koden även skickas till kursledare som publicerar sidorna på kurshemsidorna.

SSI - Server Side Includes

Om ni har gemensamma delar på er webplats, såsom meny och sidhuvud kan det vara bra att kunna inkludera andra dokument. Det finns inget direkt sätt i ren HTML att göra detta men många webservrar har stöd för SSI, Server Side Includes. För att servern ska tolka er sida och söka efter SSI-anrop kan det krävas att ni väljer filändelsen .shtml.
Följande kod inkluderar filen meny.shtml så att allt i den filen stoppas in på precis den plats i koden där raden står:
  <!--#include virtual="meny.shtml"-->
meny.shtml ska därför inte innehålla de grundläggande HTML-taggarna såsom html,head och body.

Observera att det inte är ett krav att använda sig av SSI, det går bra att kopiera kod i projektet men det kan hjälpa om man råkat göra fel. Det går självklart bra att använda sig av andra metoder såsom PHP för att lösa detta om vi vill.

Länkar

Gruppindelning

LaTeX Make SSH/SCP/rsync Versionshantering
filma650 erist266 aleka973 antli117
hanbo174 maran864 antol102 emaki169
oscno266 rascr534 gusby403 perjo927
ricwa059 ricag225 johka885 tinda344
tobja258
emacs HTML/CSS BASH
lovla279 andlj939 erijo599
marli994 antwa730 fabab714
shpkr691 danan582 nicse981
thohe973 danmo222 phiti630
jonda911 linja919

Sidansvarig: Eric Elfving
Senast uppdaterad: 2013-08-26