Webbutveckling: Fortsättningskurs (DA122A)

Malmö Högskola

Planering

Här är kursens planering gällande inlämningsuppgifter m.m.

Övergripande planering

Vecka Innehåll Deadlines
4 Introduktion
5 Don't make me think
6 Trunk test Inlämningsuppgift 1
7 CSS: Positionering/repetition
8 CSS: Layout Inlämningsuppgift 2
9 HTML/CSS: Layout
10 HTML/CSS: Layout Inlämningsuppgift 3
11 JavaScript: Grunder
12 JavaScript: Grunder forts. Inlämningsuppgift 4
13 JavaScript: funktioner
14 JavaScript: arrays m.m. Inlämningsuppgift 5
15 JavaScript: webbprogrammering
16 JavaScript: händelsehanterare
17 JavaScript: inbyggda funktioner Inlämningsuppgift 6
18 JavaScript: DOM
19 JavaScript: CSS genom JS
20 JavaScript: cookies/local storage Inlämningsuppgift 7
21 Tid för komplettering
22 Tid för komplettering
23 Tid för komplettering
24 Tid för komplettering

Detaljerad planering

Vecka 4: Introduktion

Den första veckan är det viktigt att ni kontrollerar att ni kommer in på It's Learning och kan se nyheterna som publiceras där. Uppdatera gärna er It's Learning-profil med en profilbild, så ser det trevligare ut när vi skriver till varandra i forumet.

En sak till som ni ska kontrollera så att det fungerar är att ni kommer åt "dvwebb". Dvwebb är ett webbpubliceringssystem (webbhotel) som Mamlö Högskola erbjuder sina studenter så att ni kan publicera era webbplatser på nätet. Det är här som alla inlämningsuppgifter ska publiceras (undantag inlämningsuppgift 1). För att dvwebb ska fungera krävs det att ni aktiverar tjänsten. Guide för hur man gör detta finns här.

Här finns en videoguide om hur man använder sig utav dvwebb.

När ni aktiverat tjänsten kontrollera att den fungerar genom att ladda upp en enkel webbsida (en HTML-fil) till er dvwebb. Surfa sedan in till sidan genom adressen http://dvwebb.mah.se/användarnamn (användarnamnet är samma som till It's Learning).

Ni kan ladda upp filer på dvwebb antingen genom ett webbgränssnitt som ni hittar här eller genom FTP (t.ex. genom klienten Filezilla). Guide för hur webbgränssnittet fungerar hittar ni här (ni behöver inte bry er om databaser) och för FTP här.

Viktigt, om ni inte kommer in på dvwebb eller inte kan publicera HTML-filer där skriv här på forumet, alternativ maila mig på Anton.tibblin@mah.se. Glöm inte att beställa kurslitteratur.


Vecka 5: Don't make me think

Denna vecka ska ni läsa boken "Don't make me think" av Steve Krug. Boken är lättläst och trots att den har några år på nacken är de principer, riktlinjer och tumregler som tas upp fortfarande högst aktuella. Dessa kan vara bra att ha i bakhuvudet under resterande del av kursen när ni sjävla så småningom kommer att utveckla era egna webbplatser. Tänk på att hur tekniskt bra en hemsida än är måste den vara användarvänlig för att den ska uppskattas av en besökare. En webbplats som man inte hittar på är ingen man återvänder till.

Lägg fokus på de 7 första avsnitten i boken (även om alla är relevanta).


Vecka 6: Trunk test

Nu är det er tur att göra "Trunk test" på tre webbplatset. Instruktioner för hur ett "Trunk test" går till och vad man ska tänka på hittar ni i avsnitt 6 (2nd edition). Instruktioner till inlämningsuppgiften hittar ni här.


Vecka 7 & 8: CSS: Positionering/repetition/layout

Det är dags att fräscha upp era CSS-egenskaper inför den kommande inlämningsuppgiften där ni ska bygga tre olika layouter utifrån en förutbestämd HTML-kod. Då gäller det ha koll på hur man positioneras element/bilder/text m.m. I kurslitteraturen "CSS: The missing manual" finns det bra underlag för en sådan repetition:

  • Kapitel 1-5, innehåller grunderna om hur man använder CSS. T.ex. hur länkar man ett stylesheet, hur väljer man vad man vill styla, hur arv fungerar osv. Detta kan vara bra att repetera om man känner att det behövs.
  • Kapitel 6-8, innehåller information hur man stylar text, bilder och hur marign/padding samt ramar fungerar. Dessa egenskaperna behövs kunna hanteras för inlämningsuppgiften.
  • Kapitel 12, innehåller information om egenskapen "float" vllken man med fördel använder sig utav för att få bilderna i artiklarna i inlämningsuppgiften på korrekt plats.

Utöver kurslitteraturen finns här (Smashing Magazine) en mycket bra genomgång av float. Hur fungerar det? Vad finns det för klurigheter med float, och hur löser man dem?

Här (Smashing Magazing) finns en annan artikel om hur grundläggande CSS-kod bör/kan skrivas för att nå önskat resultat.

Och här (Smashing Magazine) finns ett index för bra CSS-relaterade artiklar för den intresserade.

Här finns en äldre resurs som visar en demonstation hur olika egenskaper för float fungerar i praktiken.

För frågor kring uppgiften och/eller resurserna så använd gärna forumet på It's Learning!


Vecka 9 & 10: HTML/CSS: layout

Det är nu dags att bygga en webbplats, och till skillnad från förra uppgiften ska ni nu skriva både HTML & CSS kod.

Bra material för att klara uppgiften finns i kursboken "CSS - the missing manual":
- Kaptiel 11-13: Här går man igenom hur man skapar layouter genom CSS, och det är precis vad vi ska göra i denna inlämningsuppgift.

Även länkar och material för vecka 7 & 8 är högst aktuella att titta på.


Vecka 11 & 12: JavaScript

Nu kommer vi att lämna HTML/CSS för en liten stund och istället inrikta oss mot programmering med språket JavaScript. För den intresserade kan man läsa mer och få en introduktion till JavaScript på Wikipedia. Annars finns det föreläsningar här på kurswebbplatsen för att komma igång med JavaScript. Var börjar man då?

En bra start är att läsa de föreläsningar som finns på denna kurswebbplats:

Andra bra starter är dessa källorna:

  • Codeacademy - En interaktiv guide för att komma igång med JavaScript, Rekomenderas starkt!
  • Kursboken: JavaScript development with DOM Scripting and Ajax: Kaptiel 1 & 2

Vecka 13 & 14: JavaScript: fortsättning

Nu när vi börjat komma igång med JavaScript ska vi titta vidare på hur man kan utveckla sin JavaScript-programmering genom t.ex. funktioner och arrayer. Detta för att effektivisera sin kod och lagra saker på smidigare sätt än bara variabler.

Innan ni börjar att titta på nya föreläsningar kan det vara en god idé att repetera de två föregående föreläsningarna så att man kommer in i JavaScript-"tänket" igen:

När man gjort det så kan man gå vidare och titta på föreläsningarna:

Videoföreläsning om nästlade arrayer för de intresserade finns här.

Andra bra starter är dessa källorna:

  • Codeacademy - En interaktiv guide för att komma igång med JavaScript, Rekomenderas starkt!
  • Kursboken: JavaScript development with DOM Scripting and Ajax: Kaptiel 1 & 2

Vecka 15, 16, 17: JavaScript: Mot webbprogrammering

I denna modul ska vi ni kombinera våra kunskaper inom webbutveckling (HTML/CSS) med våra programmeringskunskaper i JavaScript mot vad som kan omämnas som webbprogrammering.

Fokus i denna del kommer framförallt att ligga på händelsehantering, t.ex. att vi vill att en JavaScript-funktion ska köras när vi klickar på en knapp i HTML-dokumentet. Alltså vi vill knyta vårt gränssnitt i HTML/CSS till våra funktioner i JavaScript. En introduktion kring hur detta fungerar hittar ni här:

Inlämningsuppgiften kommer att fokusera på händelsehanterare (eng. event handlers), detta genom tre interaktioner med användaren:

  1. Validering av ett registreringsformulär, så att användaren bara kan skriva in korrekt information (detta ska göras med JavaScript och inte med HTML 5 i denna uppgift)
  2. Vi ska ha externa länkar på sidan som för användaren från vår webbplats - när användare klickar på en sådan länk ska användaren bli varnad om detta och få en fråga om man verkligen vill lämna vår webbplats.
  3. Vi ska även ha bilder på vår webbsida. Dessa bilderna ska, när man klickar på dem, öppnas i förstorad version i en ny flik/fönster. Även detta ska ske genom JavaScript.

Vecka 18, 19, 20: JavaScript: Mer webbprogrammering

Nu när vi lärt oss att koppla användarhändelser på en webbplats (t.ex. klick från en användare som kör en JavaScript-funktion) ska vi titta närmare på hur man kan modifiera HTML och CSS genom JavaScript. Detta så att vi utan att ladda om sidan kan ändra det som visas för användare.

Vi kommer även titta på hur vi kan navigera runt i HTML-koden genom JavaScript (DOM) och hitta relationer mellan HTML-element, så som barn/föräldrar/syskon etc. En bra introduktion till detta finns här:

Inlämningsuppgiften kommer att fokuser på följande

  1. Spara användardata genom cookies/local storage. Detta för att kunna ge varje användare en skräddarsydd vy av webbplatsen (genom olika layout-teman)
  2. En interaktiv meny där användaren kan visa/dölja olika menypartier

Användning av allt material är fritt, om motsatsen inte anges. Länka gärna! Formellt utrycks detta med licensen Creative Commons Erkännande 2.5 Sverige.

Webbplatsen drivs av Anton Tibblin, som också ansvarar för kursen Webbuteckling: Fortsättningskurs, fristående distanskurs, Malmö högskola.