Välkommen till "Komponentdriven  webbdesign" vid Högskolan Dalarna!

Kursen går på Campus Borlänge och dina lektioner, labbar och frågestunder kommer att ske online på Zoom via den länk om inte annat angivits.  Det erbjudas även inspelat material via lärplattformen som ska studeras inför resp veckas lektioner och labbar.

Under den här kursen kommer du till exempel lära dig om:

• Bootstrap JavaScript/CSS ramverk
• JavaScript (JS)
• Webbkomponenter

Denna kurs är en fortsättning på Webbdesign. Vi förutsätter att ni har grunder i hur man använder HTML och CSS samt grundläggande förståelse och kunskaper i programmering från kursen Programutvecklingsteknik där det är viktigt att du kan; variabler, operatorer, if satser, loopar, funktioner, datastrukturer, klasser och händelsehantering så att ni ser och förstår likheter samt skillnader mellan Python och Javascript när vi går igenom JavaScript. Om du inte kommer ihåg detta från den kursen så repetera.

Du kommer att få arbeta med att...

• ...använda JS för att bl a manipulera Document Object Model (DOM) för att dynamiskt ändra websidors data, struktur, innehåll och stil
• ...använda Bootstrap och dess olika komponenter för att bygga visuellt tilltalande och responsiva webbsidor.
• ...skapa egengjorda och återanvändbara webbkomponenter genom att använda egengjorda JS klasser, HTML och CSS
• ...i grupp göra olika inlämningsuppgifter och projekt för att visa att du kan använda HTML, CSS, JavaScript's och Bootstrap för att skapa webbkomponenter.

Vi hoppas att du kommer att bli inspirerad och vill lära dig mer. Kursens omfattning är begränsad, vilket gör det omöjligt att gå djupt in i alla kursens delar, men vi hoppas att denna utbildning kommer att bidra till att öka ditt intresse för dessa områden.  

Som all undervisning vid Högskolan Dalarna, ska undervisningen i kursen vila på teoretisk och vetenskaplig grund samt beprövad erfarenhet. Focus i denna kurs är beprövad erfarenhet hur man använder JS, DOM och Bootstrap för att skapa återanvändbara webbkomponenter.

Grovplanering

Om inget annat anges så är all typ av undervisning(lektioner, laborationer, frågestunder, föreläsningar etc) på zoom via denna zoomlänk: https://du-se.zoom.us/my/par.eriksson

I Studiehandledningen finns specifikt vad du ska läsa, tittat på och göra under respektive vecka.

• Vecka 36
  • Snabb genomgång grunder i JS (JavaScript)  dvs if satser, loopar, funktioner arrayer, samt det lite mer "nya" fetch api:et för att hämta json data från ett rest api på nätet för att sen presentera det i ett urval av Bootstrap komponenter som tabell och cards
  • Grunder att komma igång i Bootstrap 5.x och ett urval av dess olika komponenter 
• Vecka 37-38
  • Fortsättning JS och med ytterliggare urval av Bootstrap komponenter för att presentar data från rest api. Tex menyer, accordions, karuseller, modaler, popovers och toasts.
  • Börja kolla inlämningsuppgiften Blge Estates
• Vecka 39- 40
  • JS skapa och använda egengjord klasser för att hantera CRUD operationer. Användning localStorage för att spara data och hämta.
  • Jobba mer focuserat på inlämningsuppgiften Blge Estates 
  • Vecka 40-Lämna in inlämningsuppgift om en hemsida för fastighetsmäklaren Blge Estates  fredag kl17:00
• Vecka 40
  • Inlämning av uppgift om en hemsida för fastighetsmäklaren Blge Estates fredag vecka 40 kl17:00
• Vecka 41-43
  • Skapa egen webbkomponenter genom att  kombinera JS klasser, HTML och CSS.
  • Börja jobba med projektarbetet ShopTilUDie 
• Vecka 44
  • Jobba mer focuserat på  projektarbete
  • Inlämning av projektarbete ShopTillUdie fredag vecka 44 kl17:00
• Vecka 45
  • Online redovisning av projektarbete.
  • Gör kursutvärdering

Grupper

Vi ser grupper som viktiga för inlärningen. Skapa därför egna studiegrupper med lämpliga "kursare" där ni kan diskutera, stötta och hjälpa varandra för att förstå de olika koncepten som gås igenom i kursen. Där kan ni dela med er av idéer, erfarenheter och kunskaper samt få nya insikter och kreativa lösningar på problem. 

Parprogrammeringsgrupper för inlämnings- och projektuppgifter

Vi vill att ni jobbar två och två för att lösa dess uppgifter Då parprogrammering förbättrar kodkvaliteten genom att minska antalet buggar och främja bättre design. Det ökar produktiviteten och möjliggör snabbare slutförande av uppgifter. Ni lär er av varandra, vilket sprider kunskap och förbättrar er kompetens.

• Gå med i en ny grupp för varje inlämning(Blge Estates) samt projektarbete(ShoptilUDie). Detta görs under fliken "Personer".
• Även om ni arbetar i samma grupp för alla inlämningar och projektuppgifter, måste ni gå med i en ny grupp för varje specifik inlämningsuppgift och projektuppgift.

• Canvas kommer inte ihåg dina tidigare inlämningar och betyg om du går ur en grupp som redan har gjort en inlämning. Därför ska du aldrig lämna en grupp som har redan gjort en inlämning.

  Tex om du vill byta grupp inför nästa inlämnings och projeket uppgift av någon anledning:

  • Gå med i en den nya grupp.
  • Lämna inte den gamla gruppen om en inlämning redan har gjorts för den.

Jobba själv?

Om du vill jobba själv, ta gruppnummer från 31 och uppåt. Om det visar sig vara fullt med 1 personer i dessa nummer så skapar jag fler gruppnummer för er som vill jobba själva.

Vid frågor, funderingar, etc, skicka e-post till oss lärare i kursen.

Väl mött

Pär Eriksson, kursansvarig lärare pei@du.se

	Kursplan			Kontaktinformation
	Litteraturlista			Pär Eriksson Kursansvarig pei@du.se
	Schema