Målbeskrivning

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

· Vad webbteknik är

· Hur utvecklingen av en webbplats kan gå till

· Vad som kännetecknar en bra webbplats

· Grundläggande HTML och CSS

Läsanvisningar

Till Studieguide 1 läser du kapitel 1-5 i läroboken.

Kapitel 1: Vad är webbteknik?

Författaren tar upp många begrepp. Var inte orolig om du inte hänger med på allt. Har du gjort några webbsidor innan känner du troligen igen en del. I kapitlet försöker man vissa på bra och dåliga saker inom webbutveckling. Tänk på att valideringen är något du måste göra hela tiden när du utvecklar koden till en webbsida. Läs översiktligt igenom vad det står om DNS, https, http-huvuden och Ajax. Det är inget som kursen kommer att handla om. Men det är bra att ha stött på begreppen när du själv söker information på webben.

Kapitel 2: Utvecklingsprocessen

En mycket viktig sak skriver författaren mitt på sidan 37. Små steg är det som gäller. Tyvärr är min erfarenhet att vissa tror att man kan kopiera in kod från en sida och peta lite i den. Fungerar då inte sidan så tycker man att man inte kan. Man måste börja från början och validera koden hela tiden.

På sidorna 39-46 beskrivs processen att utveckla en webbplats. Läs noga om sitemap och wireframe för du ska skapa sådana i ett av uppdragen. Se till att du har tillgång till ett ordbehandlingsprogram med ritmöjligheter. MS Word eller OpenOffice går bra.

På sidorna 47-51 tar man upp verktyg. Jag personligen brukar använda Notepad++ för PC som författaren nämner och TextWrangler om man har mac.

Du måste installera Internet Explorer (om du har PC), Safari (om du har mac), Firefox och Chrome för att testa att dina webbsidor ser bra ut. På http://gs.statcounter.com/ kan du se hur populära olika webbläsare är

Om du inte har en smartphone sök efter emulatorer till mobiler. Här är en länk: http://speckyboy.com/2010/04/12/mobile-web-and-app-development-testing-and-emulation-tools/

Du behöver inte installera en server i denna kurs.

Kapitel 3: Vad är en bra webbplats?

Precis som det är lättare att läsa och underhålla en uppsats i ett ordbehandlingsprogram om den är strukturerad och använder hårda och mjuka entertecken, så är det lättare om man strukturerar koden i HTML och CSS. Håll dig till författarens rekommendationer så blir det lättare att hitta fel som du troligen kommer att göra.

Kapitel 4: Grundläggande HTML och CSS

Väldigt viktigt att du läser och prövar HTML och CSS koderna på sidan 64 och 84. Testa även att validera koderna. Experimentera! Byt ut en färg eller något annat och försök att förstår varför det blir som det blir. Sidan 92-93 försöker visa nyttan med validering.

Om något inte blir som du tänkt dig så kan man kommentera bort de delar man inte tror påverkar felet. Kvarstår felet så vet du att det finns i den icke bortkommenterade koden. Försvinner felet eller det händer något annat så vet du att felet troligen är i den bortkommenterade koden.

Det kan kännas överväldigande med HTML och CSS. Ibland kan det vara bättre att se någon berätta om det istället. Google har gjort en utmärkt presentation av HTML, CSS och JavaScript: http://code.google.com/edu/submissions/html-css-javascript/ i form av ett antal YouTube filmer. Även författaren har lagt ut filmer på bokens webbplats: http://webbteknik.nu/

Kapitel 5: En första sida

Skriv in koden för hand så du får en känsla för hur lätt det kan vara att skriva fel. Göm inte att validera både HTML och CSS. Webbplatsen ”Läxhjälpen” hittar du på kursens webbplats http://webbteknik.nu/

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

Lycka till!

Uppdrag 1

Fråga 1

Personuppgiftslagen är inte alltid lätt att tolka. På denna adress, http://www.datainspektionen.se/ hittar du mycket information. Gå antingen till sökfunktionen eller leta bland länkarna i rutan Frågor & svar.

Svara på följande frågor:

1. Måste en förening fråga sina medlemmar om lov för att registrera dem?

2. Finns det gånger då man får registrera personnummer utan samtycke?

3. Hur går du till väga om du vill veta vilka uppgifter som är registrerade om dig, t.ex. hos din arbetsgivare? Vad kostar det att få en sådan uppgift?

4. Du har ett privat adressregister på framför allt tidigare skolkamrater i din dator. Har du brutit mot PUL?

Så lägger du ut det på din privata hemsida för att alla lätt ska kunna hitta varandras e-postadresser och mobiltelefonnummer. Har du då brutit mot PUL? Motivera

Fråga 2

Ta hjälp av exemplet i kapitel 5 eller se detta exempel på hur det kan se ut.

Gör en sida i HTML5 där du skriver kortfattat om en bra film du sett

Du ska ha med en bild i jpg (tex postern till filmen)

Använd pixlr.com för att redigera bilden så den har en maxhöjd av en halv skärmbild. Gå in i menyn Bild -> bildstorlek

Du ska använda <h1> tag till rubriker.

Du ska använda <p> tagen till löptext.

Använd en extern CSS fil som du länkar från HTMLfilen.

CSS ska påverka

h1: teckensnittet Verdana storlek 1,7em, färg grön

p: teckensnittet Verdana, storlek 1.2 em, färg mörkblå

bakgrundsfärg: valfri dock EJ VIT

Du ska validera både HTML5 och CSS koden med w3c validatorer.

Du ska skicka in en HTML och en CSS-fil i en zip-fil som en bilaga

Fråga 3

Du ska göra en webbplats för ett hotell. Denna webbplats kommer du att jobba med i alla uppdrag.

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).

Här finns exempel på hur en sitemapp och wireframe kan se ut

Tips på program Skapa wireframe online (reg. krävs)

I första uppdraget ska du göra en sitemapp och wireframes (se sidan 42-43 i läroboken) till fyra sidor: Start, Boka, Hitta, Kontakta. Exempel på hur det kan se ut http://bit.ly/html5webb eller så här Självklart kan du ändra, lägga till och ta bort efterhand. Använd ett ordbehandlingsprogram med ritmöjligheter (tex MS Word eller OpenOffice) eller rita för hand och fota eller skanna in dem. Titta på befintliga hotellwebbplatser. Tänk på varför de har just de layouterna och innehållet som de har.

Skicka in sitemapp och fyra wireframes i doc, docx, OpenOffice eller pdf som bilaga. Jag vill ha sitemappen och wireframen i EN fil.