Webbteknik 1 - Veckoplan

Kursens består av tre block om tre-fyra veckor vardera. Varje vecka består av ett antal föreläsningar, laborationer, läsanvisningar och en del av blockets uppgift. Du bör gå igenom det i den ordning som det anges i nedanstående lista. Varje vecka börjar du med en föreläsning och därefter motsvarande laboration. Samtidigt läser du anvisade delar i kursböckerna. Då du gått igenom hela veckans föreläsningar och laborationer, gör du en del utav uppgiften.

I läsanvisningarna är LWB = Learning Web Design och EUE = Elements of User Experience. Siffrorna är kapitel och om inget annat anges inom parentes, är det hela kapitlet som ska läsas. Samma kapitel kan också komma igen flera gånger.

Visa/dölj kort beskrivning

Grunderna

Vecka 35 - Introduktion
- F1a - L1a - LWB 1, LWB 20 (s.581-588)
  - F1a: Introduktion - Webbteknik (webbdesign), språk för webben.
  - L1a: Verktyg och organisation - Installation av program, skaffa konton.
- F1b - L1b - LWB 2
  - F1b: Datorer, Internet, World Wide Web - Historik och bakgrund till datorer och nätverk.
  - L1b: Komma igång med verktygen - Introducerande övningar för att se vad man gör med de olika verktygen.
- F1c - L1c - LWB 2
  - F1c-1: Datakommunikation - Klient-server, domän, protokoll.
  - F1c-2: Webbadresser - Filtyper, url, relativa adresser.
  - L1c: Mappar, filer och adresser - Organisation, relativa adresser.
- F1d - - - LWB 3, EUE 1
  - F1d: Några begrepp (koncept) - Användarcentrerad design, informationsarkitektur, användarupplevelse, tillgänglighet, terminologi.
  - Det finns ingen L1d.
- U1 - påbörja uppgiften
  - Organisation av mappar och filer för uppgiftens webbsidor. Skapa en privat repository på GitHub och koppla den till mappen för uppgiften på din dator samt publicering på Netlify. Besvara första frågan, som ska finnas med på webbsidorna.
Vecka 36 - Strukturering
- F2a - L2a - LWB 4
  - F2a: Introduktion till HTML - Element, tagg, attribut, metadata, struktur.
  - L2a: Strukturering med HTML - Introducerande övningar till HTML, arbeta med Visual Studio Code.
- F2b - L2b - LWB 4
  - F2b: Bakgrund och standard - HyperText, WWW, W3C, WHATWG, validering, kodens stil.
  - L2b: Att följa en standard - Kontrollera koden i en validator, hitta och rätta fel.
- F2c - L2c - LWB 5
  - F2c-1: Kodnig av data - Binära tal, bit, byt, kodning av data, UTF-8.
  - F2c-2: Formatering av text - Element för text, fraselement, listor, block/inline, entiteter, element för gruppering och struktur.
  - L2c: Formatering av text och strukturelement - Stil för text och listor, semantiska element för att strukturera sidans kod.
- F2d - L2d - LWB 6, LWB 7 (s.131-138)
  - F2d: Länkar, bilder och adresser - Absolut och relativ adress, element för länkar och bilder.
  - L2d: Länkar bilder och adresser - Struktur och stil för navigeringslänkar, adress till bilder, olika typer av länkar.
- U1 - fortsätt med uppgiften
  - Skriva HTML-kod för sidorna. Besvara andra frågan.
Vecka 37 - Stil
- F3a - L3a - LWB 11
  - F3a: Introduktion till CSS - Stilmall, regler, egenskaper, selektorer, kaskad, boxmodellen, nivåer av CSS, validering
  - L3a: Stil med CSS - Grunderna i CSS, koppla ihop HTML och CSS, flexibilitet, webbläsarens verktyg för utvecklare, validering.
- F3b - L3b - LWB 11-12
  - F3b: Stil för text samt selektering med id och class - Egenskaper för text och listor, id, class, enheter, specificering i selektorer
  - L3b: Stil för text - Sätta stil på text och listor, selektering med id och class.
- F3c - L3c - LWB 13
  - F3c: Färger och bakgrundsbild - RGB, färgsättning, bakgrundsbild, genomskinlig färg, gradient färg.
  - L3c: Färger och bakgrund - Bakgrundsfärg, färg för text, bakgrundsbild.
- F3d - L3d - LWB 13
  - F3d-1: Selektering och specificering - Selektering (val) av element, specificering och företräde.
  - F3d-2: Pseudo-class och pseudo-element - Tillstånd, del av innehåll, status för länkar.
  - L3d: Selektorer och stil för länkar - Stilsättning av navigeringslänkar och andra länkar, prioritering av stil, pseudo-class, pseudo-element.
- U1 - avsluta uppgiften
  - Skriva CSS-kod för sidorna. Besvara tredje frågan. Testa publicerade webbsidor och skicka in redovisning.
- Deadline 1, sön. 17/9 kl. 23:59

Layout och responsiv webbdesign

Vecka 38 - Placering av element
- F4a - L4a - LWB 14
  - F4a: Boxmodellen - Egenskaper, storlek, marginaler, overflow, inline/block/inline-block, rundade hörn, skugga.
  - L4a: Boxmodellen - Bredd, höjd, marginaler, kantlinjer, rundade hörn, skugga.
- F4b - L4b - LWB 16 (s.447-484)
  - F4b-1: Layout - Allmänt om layout och olika tekniker.
  - F4b-2: Layout med grid - Specifikation av egenskaper i grid.
  - L4b: Layout med grid - Uppbyggnad av layout med grid.
- F4c - L4c - LWB 17
  - F4c-1: Responsiv webbdesign - Responsiv/adaptiv webbdesign, desktop first, mobile first, media query.
  - F4c-2: Responsiv webbdesign - Exempel med grid.
  - L4c: Responsiv webbdesign - Två olika sätt, desktop-first och mobile-first.
- U2 - påbörja uppgiften
  - Strukturera upp sidorna för webbplatsen. Skapa en privat repository på GitHub och koppla den till mappen för uppgiften på din dator samt publicering på Netlify. Besvara första frågan som ska finnas med.
Vecka 39 - Layout
- F5a - L5a - LWB 16 (s.419-446)
  - F5a: Flexbox - Egenskaper för flexibel placering och storlek med flex.
  - L5a: Flexbox - Kolumner eller rader, krympa och växa, ordning.
- F5b - L5b - LWB 15 (s.387-398, kursivt 399-404)
  - F5b: Flytande element - Olika värden för float och clear
  - L5b: Flytande element - Float, clear
- F5c - L5c - LWB 15 (s.405-418)
  - F5c: Positionering - Egenskaperna position och z-index.
  - L5c: Positionering - Olika varianter för egenskapen position.
- F5d - L5d - EUE 6 (s.118-131), LWB 17 (s.504-505)
  - F5d: Navigering - Olika typer av navigering, HTML-struktur för länkar i navigering.
  - L5d: Navigering med flex - Användning av flex för utformning av global och lokal navigering på olika sätt.
- U2 - fortsätt med uppgiften
  - Responsiv design med CSS-kod för sidornas layout. Besvara andra frågan i uppgiften.
Vecka 40 - Designmodell och kravspecifikation
- F6a - L6a - LWB 18 (s.517-533, resten översiktligt)
  - F6a: Visuella effekter - Egenskaperna transiton och transform.
  - L6a: Visuella effekter - Experiment med transition och transform.
- F6b - - - EUE 2-3
  - F6b: Designmodell, målgruppsanalys - Garretts designmodell, strategy plane, målgruppsanalys.
  - Det finns ingen L6b.
- F6c - L6c - EUE 4
  - F6c: Designmodell, kravspecifikation - scope plane, kriterier för krav.
  - L6c: Kravspecifikation - Övning i att skriva krav i en kravspecifikation.
- U2 - avsluta uppgiften
  - Slutför webbsidorna med några visuella effekter. Besvara tredje frågan. Testa publicerade webbsidor och skicka in redovisning.
- Deadline 2, sön. 8/10 kl. 23:59

Lite av varje och avslutning

Vecka 41 - Tabeller, designmodell, struktur, navigering, interaktion och formulär
- F7a - L7a - LWB 8, LWB 19 (s.551-553)
  - F7a: Tabeller - HTML-element för tabeller, tillgänglighet.
  - L7a: Tabeller - HTML- och CSS-kod för tabeller.
- F7b - - - EUE 5-6
  - F7b: Designmodell, struktur och navigering - Structure plane, skeleton plane, organisation, struktur, navigering, lyout, prototyper.
  - Det finns ingen L7b.
- F7c - L7c - LWB 9, LWB 19 (s.547-550), EUE 6
  - F7c: Formulär - HTML-element för olika interaktionsobjekt i formulär.
  - L7c: Formulär - HTML- och CSS-kod för formulär.
- F7d - - - EUE 5-6
  - F7d: Designmodell, Interaktion och gränssnitt - Structure plane, skeleton plane, interaktion, hantering av användarfel, analys av gränssnitt.
  - Det finns ingen L7d.
- U3 - påbörja uppgiften
  - Ta fram en plan för ditt arbete med U3 och arbeta sedan enligt den.
Vecka 42 - Grafik, bildredigering, designmodell, grafisk profil
- F8a - L8a - LWB 23-24
  - F8a: Bilder på webben - Färger, olika egenskaper för bilder, komprimering, filformat.
  - L8a: Bildredigering - Anpassning av bilder till webben i programmet Pixlr E.
- F8b - L8b - LWB 7 (s.146-158), LWB 19 (s.556-559), LWB 23 (s.665-667)
  - F8b: Användning av olika bilder - Bilder i responsiv design, pixeltäthet, srcset, picture, CSS sprites.
  - L8b: Bilder i responsiv design - Attributen srcset och sizes i img-taggen, elementen picture och source, CSS sprites.
- F8c - - - EUE 7-8
  - F8c: Designmodell, Webbplatsens ytskikt, Sammansättning - Surface plane, Designprinciper, färgpalett, grafisk profil, kontroll mot kravspecifikation.
  - Det finns ingen L8c.
- U3 - fortsätt med uppgiften
  - Följ din egen plan för arbetet med uppgiften.
Vecka 43 - Inbäddad media, interaktivitet, utvärdering och testning
- F9a - L9a - LWB 10
  - F9a: Inbäddad media - Ta in bilder, ljud och video från extrena filer samt bädda in data från externa tjänster via ett iframe-element.
  - L9a: Inbäddad media - Ljud, video, kartor och widget.
- F9b - L9b - LWB 13 (s.317-318)
  - F9b: Interaktivitet - Olika former av interaktivitet som kan skapas endast med HTML och CSS, utan programmering i något annat språk.
  - L9b: Interaktivitet med CSS - Pseudoklasser för att känna av användarens aktivitet, t.ex. peka och klicka samt förändring av någon stil, t.ex. visa eller dölja ett element.
- F9c - - - inga läsanvisningar
  - F9c: Utvärdering och testning - Olika former av utvärdering och testning, användartest, "tänka högt"-metoden.
  - Det finns ingen L9c.
- F9d - - - inga läsanvisningar
  - F9d: Avslutning - Samband mellan områdena i kursen.
  - Det finns ingen L9d.
- U3 - fortsätt med uppgiften
  - Följ din egen plan för arbetet med uppgiften.
Vecka 44 - Slutför uppgift U3
- - - - - Inga fler föreläsningar eller laborationer
- U3 - avsluta uppgiften
  - Slutför webbplatsen. Testa publicerade webbsidor och skicka in redovisning.
- Deadline 3, sön. 5/11 kl. 23:59

Kursperioden är slut

Vecka 45
Vecka 46
Vecka 47
Vecka 48
- Deadline 4 (restuppgifter), sön. 3/12 kl. 23:59