Guide / Uppdrag 2

Målbeskrivning

Efter att ha studerat denna studieguide ska du ha fått kunskap om:

· Teckenkodning

· HTML och CSS historik och teori

· Färger och bilder.

Läsanvisningar

Till Studieguide 2 läser vi kapitel 6-9 i läroboken.

Kapitel 6: Teckenkodning och fonter

Precis som författaren skriver är teckenkodning något som ofta upplevs som konstigt och onödigt. Men det är väldigt viktigt att webbläsaren får rätt info och vilken teckenuppsättning den ska använda. Som tur är så är det lätt i HTML 5. Man skriver bara <meta charset=”utf-8” /> i de flesta fall. Men genom att läsa kapitlet är du förberedd för obehagliga överraskningar och kan lättare tolka felmeddelanden i valideringen.

Kapitel 7: HTML historik och teori

Sidan 129-140 handlar om HTML och CSS historik. Det är viktigt att förstå bakgrunden för att förstå varför koderna ser ut som de gör. Dessutom lär man sig om vilka delar som man bör undvika att använda idag.

Kapitel 8: CSS historik och teori

Detta kapitel innehåller en kort historik om CSS, resten är en mycket viktig genomgång av CSS och hur man använder det.

Kapitel 9: Färger och bilder

Det är vanligt med många missförstånd om bildformat på Internet. Här få du en ordentlig genomgång om bl a pixelbaserade bildformat (gif, png och jpg). SVG, MathML och Canvas är osannolikt att du kommer att använda i denna kurs.

Nu har du kommit till slutet av den andra studieguiden och det är dags att göra Uppdrag 2.

Lycka till!

Uppdrag 2 (OBS 4 frågor)

Fråga 1

I en wordfil skriv i punktform de viktigaste delarna i webbens historia. Ta med minst sex punkter, gärna fler.

Titta i boken och Internet

TIPS: http://www.evolutionoftheweb.com/

Så här kan det se ut:

Fråga 2

Ge tre exempel på vad som är bra med webben och tre vad som är dåligt med webben för samhället

Skriv i en Wordfil utförligt och nyanserat om hur webben påverkat samhället

Fråga 3

Om Bright Hotell. Exempel: http://bit.ly/html5webb

Strax utanför staden där du bor har ett nytt hotell precis byggts: Bright Hotell. Byggnaden har en våning, en fin tomt och ligger precis vid vägen så att det är lätt att ta sig dit. Hotellet har en matsal där man serverar frukost, lunch och middag. Hotellet satsar på bra service till lågt pris. De som besöker hotellet är affärsmän på resa, helgbesökare och sommarturister. Hotellet har också konferenslokaler. Nu vill hotellet göra en webbplats och det är du som fått uppdraget!

Här är de generella krav för webbplatsen som du bör ha i åtanke:

• Webbplatsen ska innehålla minst fyra sidor (Start, Boka, Hitta, Kontakta) som är länkade till varandra i en horisontell meny.

• Den ska innehålla en presentation av hotellet och det ska vara möjligt boka rum (med ett formulär, som dock ej behöver fungera fullt ut). Webbplatsen ska även innehålla något annat – vad får du välja själv (t.ex. aktiviteter som hotellet erbjuder, sevärdheter i staden eller något liknande).

Du ska göra en genomarbetad projektplan till din hotellwebbplats. Du ska svara på punkterna nedan. Tänk på att du inte nödvändigtvis uppnår ett visst betyg bara för du skrivit något på det. Skriv projektplanen med samma punkter som jag har gjort så är den lätt att följa.

· Vilka sidor ska finnas på hotellwebbplatsen (se din site map)

· Vilka bilder måste du hitta och i vilket filformat? png och/eller jpg

· Vilka teckensnitt ska du använda? Använd max två.

· Vilka färger ska du använda?

· Vilka två webbläsare ska du testa webbplatsen i?

· Vilken teckenkodning ska du använda?

OBS du kan allid ändra sig. Men jag vill veta vad du planerar nu.

Använd W3C:s verktyg för att se hur mobilvänlig din webbplats är

http://validator.w3.org/mobile/. OBS Du behöver inte nå 100%. Min http://bit.ly/html5webb nådde bara 52%. Blir din bättre? OBS. Eftersom din webbplats inte ligger på Ingetnet så lär din webbplats bli bättre än mina 52% eftersom validatorn inte kollar alla brister.

För betyg A måste du lägga ut din sida på Google Drive och kontrollera din webbplats når minst 52%. Info hur du lägger ut din webbplats finns här

Fråga 4

Till uppdrag 2 ska du ha gjort ett första utkast med en sida som innehåller en horisontell meny med länkar. Alla sidorna ska gå igenom valideringen i HTML och CSS för högre betyg. I nästa uppdrag kommer du att få utökade kunskaper i CSS som gör att du kan göra mer avancerade layouter.

Om ni får problem med bilder som puttar ner text i en annan spalt. Använd rubriker och width: xx %.

Se detta exempel. Det finns i två versioner: utan design och med design

Krav

    • Webbplatsen ska ha en enhetlig design
    • Webbplatsen ska innehålla både text och bilder.
    • Webbplatsen ska innehålla länkar till externa webbplatser.

För betyg A-C

    • Använda CSS för stilmall
    • Alla HTML filerna ska gå igenom w3c validering för HTML5.
    • Alla CSS filer ska gå igenom w3c validering för minst CSS2.
    • Sidan ska fungera på minst två olika webbläsare av de senaste versionerna (Internet Explorer(PC), Firefox, Chrome eller Safari(mac))
    • Tänk på design, layout, läsbarhet, rättstavning för högre betyg

Du ska skicka in en HTML och en CSS-fil i en zip-fil som en bilaga. Tänk på att det är ok att det blir fel så länge du rättar till det själv i de sista uppdragen för att få högre betyg.