Veckoplanering 21TE

Basinfo

Vecka Dag	Lektionspass	Läxa
00	Ordinarie veckolektion	yyy
00	Tisdagslektion	yyy
00	LOV, Studiedag, etc.	yyy
00	PROV	yyy

Planering

Läxan ska vara klar INNAN nästa lektionspass om inget annat anges.

85h to/fre + tis, 45 helklass + 40 resp halva

Webbutveckling 2
Vecka Dag	Lektionspass	Läxa
34	Uppstart Kursplanering, innehåll, upplägg . . Effektiv struktur i stilmallen Arv, direkt barn, pseudo, prioritet, !important Mer finesser i stilmallen Rundade hörn, skugga, rgba-färger Bootstrap teori + länkar Övning: Du bygger en egen ny sajt med ett paket av sidor där du testar olika "bootstrap" saker. Målet senare är att du till slut ska skapa din nya startsida med kompleterande sidor på labbservern. Kanske lämpliga sidor: Välkomstsida, webbutveckling1, webbutveckling2 med i sin tur t ex "övningar", "projekt", webbserverprogrammering1, ev andra kurser, om mig, [kontakt]formulär), ...	Läxa: bygg vidare hemma någon timme eller två
35	Bootstrap Fortsatt övande	Läxa: bygg vidare hemma någon timme eller två
36 Tisdag	Tisdag: 10.15-16.15 sal45 10.15-12.15 Bootstrap Övning: Bygg en ny startsida till ditt labbserverkonto med länkar till åtminstone webb1, webb2 och webbserverprog1. Använd Bootstrap. Webb1-sidorna kan du behålla som dom är från åk1. Ett bra tips är att flytta allt från åk 1 tillen egen mapp t ex "webb1" så blir roten ren och vi får ny kod till en ny bassajt. Skapa även några sidor i webb2 för presentation av övningar, projekt och gärna fler sidor (bra att ha grejer, roliga grejer). Fri design men målet är att utnyttja så mycket som möjligt av Bootstrap's paket. Lägg också någon startsida i webbserverprog-delen. 13.15-15.15 Start av javascript, repetition av javascript från webb1, genomgång av grunder Javascript Grunder JSHint, Developer tool(F12), console.log(); test (med felaktigheter) Övning Start Gör klart alla övningar (a-l) (Du ska använda JSHint för att checka javascriptkod) Du ska kunna: Placering av Javascripten, var och varför samt hur kopplar vi ihop oss med en extern javascriptfil. Enkla funktioner och enkel händelsehanterare, koppla knapp till något som ska hända. Skriva och läsa till/från html-element(t ex div) och textruta (input type="text"). Deklarering av variabler. Initering av variabler. Namngivning av variabler. Aritmeriska operatorer, +-*/ . Tilldelningsoperatorn = . Lokala och globala variabler . Du ska kunna använda JSHint och "Developer Tool"(Chrome, Firefox) för att checka din javascriptkod. 15.15-16.15 Bootstrap eller javascript	1) Gör klart bootstrap uppgiften 2) Göra klart javascript övningarna 2) Se till att du har en kursstartsida med länk till en övningsstartsida med länkar till alla övningar i kursen 3) Repetera teorin från dagens pass 4) Läs igenom teorin till nästa pass
36	Javascript Grunder Repetition JSHint, Developer tool(F12), console.log(); En liten film om ovanstående (15 min) Övning Grunder Gör klart uppgifterna till och med f (Använd JSHint, Developer tool(F12), console.log(); för att rätta till felaktigheter.) För den snabbe: Uppgift g och h. Se till att din startsida på ditt konto och din startsida på den här kursen är snygga och fungerande. En tydlig länk till en övningssida där du länkar upp alla dina övningar på valfritt sätt. Ladda upp allt på webbservern och se till att det fungerar. Du ska kunna använda JSHint för att checka javascriptkod och "Developer Tool"(Chrome, Firefox) för att checka, debugga din kod. Du ska kunna fler operatorer: %, ++, --, +=, -=, *=, /=	1) Göra klart övningarna 2) Repetera teorin från dagens pass 3) Repetera JSHint och Developer Tool 4) Läs igenom teorin till nästa pass
37	Villkor (if-satser) Javascript Villkor Övning Villkor Gör klart uppgifterna till och med d från övningarna (gärna e,f också) Du ska kunna: grundläggande javascript, villkor.	1) Göra klart övningarna 2) Repetera teorin från dagens pass 3) Repetera JSHint och Developer Tool 4) Läs igenom teorin till nästa pass
38	Onsdag helklass Prog1 med Niklas Torsdag helklass Webb2 med Per Loopar (While) Javascript While-loopar Använd följande för att "debugga" din kod: JSHint, Developer tool(F12), console.log(); En liten film om ovanstående (15 min) Övning While-loopar Gör klart uppgifterna a-g genom att endast använda "while". Gärna h och i också. Du ska kunna: grundläggande javascript, villkor och while-loopar.	1) Göra klart övningarna 2 Repetera JSHint och Developer Tool 4) Läs igenom teorin till nästa pass
39 Tisdag	Tisdag: 10.15-12.00 sal B45 Loopar (for) Javascript For-loopar (Nedre delen av webbsida om "loopar") Använd följande för att "debugga" din kod: JSHint, Developer tool(F12), console.log(); En liten film om ovanstående (15 min) Övning For-loopar Gör klart uppgifterna a-h. Gärna i också. Du ska kunna: grundläggande javascript, villkor och loopar (while+for). Du ska kunna använda JSHint för att checka javascriptkod och "Developer Tool"(Chrome, Firefox) för att checka, debugga din kod.	1) Göra klart övningarna 2) Repetera teorin från dagens pass 3) Repetera JSHint och Developer Tool 4) Läs igenom teorin till nästa pass
39	Timers Javascript Timers Övning Timers Gör klart uppgifterna till och med h från övningarna Du ska kunna: grundläggande javascript, villkor, loopar och timers.	1) Göra klart övningarna 2) Repetera teorin från dagens pass 3) Repetera JSHint och Developer Tool 4) Läs igenom teorin till nästa pass
40	Javascript Array Teori+Exempel Övning Javascript Array Du ska kunna: skapa och använda en array av element (heltal, textsträngar eller andra objekt) samt känna till att det finns färdiga metoder att använda samt kunna utnyttja vissa av dom för att lösa uppgifter. Filmer (YouTube)	1) Göra klart övningarna 1abcd och 2abc (för C och högre även 3abcde) 2) Repetera teorin 3) Repetera JSHint och Developer Tool
41	Onsdag helklass Prog1 med Niklas Torsdag helklass Webb2 med Per Fortsatt arbete med arrayer Javascript Array Teori+Exempel Övning Javascript Array Övningarna 3abcde (för C och högre även resterande uppgifter) Lösningsförslag(filmer) array övning 1 del 1(övning 3a) array övning 1 del 2 (sortering)(övning 3g) Du ska kunna: skapa och använda en array av element (heltal, textsträngar eller andra objekt) samt känna till att det finns färdiga metoder att använda samt kunna utnyttja vissa av dom för att lösa uppgifter.	1) Göra klart övningarna 3abcde (för C och högre även resterande uppgifter)
42	Funktioner teori Övning Javascript Funktioner	1) Göra klart övningarna Funktioner 1-7
43	Egen repetition inför provet Du ska ha gjort klart obligatoriska uppgifter från tidigare lektionspass, se vad som är minimum under läxa på veckoplaneringen. Sen kör du på så mycket som möjligt på repetitionsuppgifterna. Uppgift 1-10, ska alla göra. Uppgift 11-14 är knepigare men bra för de som siktar på högre betyg. Repetition 1 Övning Javascript Repetition_loop Minimum 1-12 Intresserad av Programmeringsolympiad?	1) repetition1 1-10 samt looprepetition 1-12 2) Repetera teorin 3) Repetera JSHint och Developer Tool
44	HÖSTLOV
45	OBS! Onsdag helklass Webb2 med Per Torsdag helklass Prog1 med Niklas PROV Javascript grunder Praktisk del Tillåtna hjälpmedel är kurssidorna på BestOnline.se och w3schools.
46	OBS! Onsdag helklass Webb2 med Per men på PRAKTIK Torsdag helklass Prog1 med Niklas PRAKTIK
47	Javascript String Teori+Exempel Övning Javascript String Lösningsförslag(filmer) stränghantering övning 3(det mesta i 3:an men 5:an) stränghantering övning 4 (Programmeringsolympiaduppgifter till de som är klara med allt.) Programmeringsolympiaduppgifter kval13 (uppg 1-3) (alla tidigare uppgifter) Du ska kunna: skapa textsträngar, använda egenskapen length och använda de vanligaste metoderna som finns färdiga att utnyttja.	1) Göra klart övningarna 1-4 högre betyg 5 o 6
48	OBS! Onsdag helklass Webb2 med Per Torsdag helklass Prog1 med Niklas Javascript String Teori+Exempel Övning Javascript String Lösningsförslag(filmer) stränghantering övning 3(det mesta i 3:an men 5:an) stränghantering övning 4 Du ska kunna: skapa textsträngar, använda egenskapen length och använda de vanligaste metoderna som finns färdiga att utnyttja.	1) Göra klart övningarna 1-4 högre betyg 5 o 6
49 Tisdag	10.15-12.15 B45 Projekt: podd (instruktioner Eng-Webb2 med tidplan) Instruktioner ljudfil+webbsida Ljud, Audacity Tidåtgång del 1: 1 timme Övning Ljud: Skapa en ljudfil med en jingel, lite prat, lite musik och slutligen lite prat igen. Skapa en webbsida som visar/kör din ljudfil. Teori Ljud Teori (Ljud är nedre delen) Teori ljudediteringsprogram Audacity 2.1 Spela in ljud i Audacity 1.2 (manual) Läs framför allt sidorna 6-13(stämmer till 95% så den fungerar utmärkt) Användbara länkar: Audacity's egen Quick Help Audacity's egen Manual Ljudeffekter freemusicarchive.org freesound.org Tidåtgång del 2: 1 timme . . . Planering av webbsida, rita upp utseendet. Skapa en detaljerad skiss på hur din/er sajt ska se ut. Innehåll, utseende, färger, teckensnitt, teckenstorlek! Logga, rubriker. Bilder, funktioner, effekter. Du kan INTE sätta igång och koda innan din planering ÄR GODKÄND AV PER.
49	OBS! Onsdag Ingen lektion RESURSDAG Torsdag helklass Webb2 med Per Fortsättning Funktioner Övning Javascript Funktioner När du är klar med uppgift 9 ser du till att alla dina övningar ligger snyggt upplänkade på labbservern. Gör gärna uppgift 10 också. Har du gjort uppgifterna på Array 3a-g och 4 samt String 4-6?	1) Göra klart 2) för de som behöver, uppgift 1-14, reflektera/repetera: repetition webbutv2 del 1
50	Tisdag: 10.15-16.15 B43 10.15-12.15 Projekt: podd (instruktioner Eng-Webb2 med tidplan) Instruktioner ljudfil+webbsida Du skapar webbsida med en tillfällig ljudfil samt en "dummy"-text istället för din egen poddtext. Vecka 49 jobbar vi med ljudfilen och slutjusterar allt. Se till att allt blir klart och att allt laddas upp på labbservern. Se till att det går att nå din webbsida via länken angiven i instruktionerna. Testa ditt namn på samlingssidan. 13.15-16.15 Projekt: podd - seriehjältar Instruktioner ljudfil+webbsida Du skapar din ljudfil och slutför projektet. Laddar upp på labbservern och testar att allt fungerar.
50	Javascript Events (Händelser) Teori+Exempel Övning Javascript Events (min 1-4)	1) Övningarna 1-4 på Events 2) Checka att du gjort de uppgifter som varit obligatoriska, samt fler om du siktar högre 3) Alla dina övningar i kursen ligger snyggt upplänkade på labbservern.
51	OBS! Onsdag helklass, Programmering 1, Niclas Torsdag JULLOV
52	JULLOV
1	JULLOV
2	Fortsättning Javascript Events (Händelser) Teori+Exempel Övning Javascript Events Övning 1-8 Du ska kunna: använda händelser som känner av när webbsidan är färdigladdad, skickar iväg formulärdata (submit), musklick på en knapp, fokus på ett textfält i ett formulär, reagerar när musen förs över eller bort från något, tangenttryckning	1) Övningarna 1-8 på Events
3	Onsdag helklass Prog1 med Niklas Torsdag helklass Webb2 med Per Canvas Teori+Exempel Bibliotek Teori+Exempel Övning Javascript Canvas (min 1-4 + 5-7) Du ska kunna: skapa en canvas och kunna rita med de vanligaste 2D-ritverktygen, du ska kunna skriva javascriptkod i en separat js-fil	1) Övningarna Canvas 1-7 2) Checka att du gjort de uppgifter som varit obligatoriska, samt fler om du siktar högre 3) Alla dina övningar i kursen ligger snyggt upplänkade på labbservern.
4	Interaktivitet Teori+Exempel Övning Javascript Interaktivitet (min 1-5) Du ska kunna: använda "timers", setTimeOut/setInterval samt för avstängning clearTimeOut/clearInterval, tangenttryckningar med keydown Du ska känna till: timers,hantering av tangent- och muslyssnare	1) Övningarna Interaktivitet 1-5 2) Checka att du gjort de uppgifter som varit obligatoriska, samt fler om du siktar högre 3) Alla dina övningar i kursen ligger snyggt upplänkade på labbservern.
5	Fortsatt arbete med "Övning Javascript Interaktivitet" Övning Javascript Interaktivitet (min 6-8)	1) Göra klart övningarna 6-8
6	Onsdag helklass Webb2 med Per Torsdag helklass Prog1 med Niklas Objekt video 1: intro till objekt i javascript video 2: kodexempel med js objekt övning objekt övning objekt xtra (Lös på ditt eget sätt)	1) Minimum göra klart övningarna Objekt 1-3
7	Onsdag helklass Prog1 med Niklas Torsdag helklass Webb2 med Per Objekt fortsättning ==================== Projektuppgift "Ormen" Detta projekt syftar till att öva alla moment i kursen. En bedömning av projektet kommer att ske men blir inte avgörande i betyget utan kunskapen kommer senare testas med ett prov för att se vad man behärskar. Men självklart är projektet en del i kursen som grundar slutbetyget (tillsammans med proven). I utvecklingen av "Ormen" kommer/kan man ta hjälp av kompisar/lärare (vilket också är syftet för att lära sig och utvecklas). Arbeta så självständigt som möjligt och använd kursens teorisidor/exempel samt w3schools för att lösa problem/lära dig mer. . . . . . .	1) Göra klart "Objekt" Gärna "Objekt xtra"
8 Tisdag	13.15-17.00 Sal: B43 PROV Javascript Praktisk del Provet baseras på all javascript fram till och med "Objekt". Tillåtna hjälpmedel är kurssidorna på BestOnline.se och w3schools.
8	Onsdag helklass Webb2 med Per Torsdag helklass Prog1 med Niklas Projekt Ormen Sista inlämningsdag av projektet: Söndag vecka 16 Redovisningsinstruktioner, se vecka 16. Minst 2 statuscheckar ska göras under projektet, dvs du visar kod och en körning. Beskriver vissa delar som jag vill veta mer om. Du informerar om nästa steg i utvecklingen. OBS! Ditt ansvar att det blir avprickat. Annars vet inte jag vem som skrivit koden. ***************************************************** OBS! Från och med idag ska ditt projekt laddas upp på labbservern efter varje gång du jobbat med det samt att du ska skriva i redovisnings-filen vad du gjort. Typ datum och några rader. Själva ormen-html-filen : labb.vgy.se/~dittKonto/projekt/ormen/index.html Redovisningsfilen: labb.vgy.se/~dittKonto/projekt/ormen/redovisning.html (Har du en annan struktur, se till att ovanstående filer finns med länkar till ditt eget ställe.) . *****************************************************
9	SPORTLOV
10	Onsdag helklass Prog1 med Niklas Torsdag helklass Webb2 med Per PROV OBS! Vi skriver i skrivsalen.
11	Projekt För eventuell highscorelista: se teori WebStorage Frivilligt: övning webstorage
12	Projekt
13	Onsdag helklass Prog1 med Niklas Torsdag helklass Webb2 med Per Projekt
14 Tisdag	13.15-16.45 B47 Projekt
14	Onsdag helklass Webb2 med Per Torsdag helklass Prog1 med Niklas Projekt
15	PÅSKLOV
16	Projekt Sista inlämningsdag av projektet: Söndag vecka 16 Redovisningsinstruktioner Se till att koden är välkommenterad Se till att ormen och redovisningsfilen finns på rätt länkar, index.html samt redovisning.html i följande mapp labb.vgy.se/~dittKonto/projekt/ormen/ (har du grejerna på annan plats , skapar du dessa sidor och lägger in länkar till dina sidor) Svara i redovisningsfilen på följande frågor: Vilka deluppgifter från projektinstruktionerna har du gjort? Beskriv i stora drag hur ditt program fungerar? Hur är koden strukturerad? Har du några extra finesser? Skriv något om hur du upplevt projektet, lätt/svårt, kul/tråkigt, något annat? Beskriv gärna lite med egna ord. Har du tips på hur projektet kan göras bättre? Övriga synpunkter!
17	Onsdag helklass Prog1 med Niklas Torsdag helklass Webb2 med Per PROV Webb2 Ormenproblem bl a. Praktisk del Tillåtna hjälpmedel är kurssidorna på BestOnline.se och w3schools. Baskod till provet: html js
18	Redovisningar av projekt
19	Onsdag helklass Prog1 med Niklas Torsdag helklass Webb2 med Per endast de som ska komplettera nästa tisdag, resten valfritt arbete valfri plats
20 Tisdag	13.15-17.00 Sal: B43 Kompletteringar Javascript Praktisk del Tillåtna hjälpmedel är kurssidorna på BestOnline.se och w3schools.
20	Onsdag helklass Prog1 med Niklas Torsdag LOV Ingen webb2 denna vecka
21	Onsdag: Resursdag Torsdag: Studiedag
22	- Kompletteringar (endast kallade)
23	Kompletteringar (endast kallade)
	SLUT ========================= Projekt 22/23: podd, Ormen

Veckoplanering 21TE

Basinfo

Planering

Program

Länkar

Tjänster

Checka din kod

Lösningsförslag