Webbutveckling

Från början till layout (alla filerna från filmen)

Titta på filmen där jag går igenom "Från början till layout"bit.ly/belfragewebb

Från layout till färdig webbplats (ett exempel på hur en klar hotellwebbplats kan se ut)


Föreläsningarna finns här (zip)

HTML5 spec      CSS spec

Pixlr: https://sites.google.com/site/pim5bn/     http://www.hjalpmig.nu/category/pixlr/

På caniuse.com kan du se vilka webbläsare som olika HTML och CSS funktioner fungerar i

Om inte inlämningsuppgifter görs i tid kan betyget bli lägre

Kopiera inte koder rakt av. Du måste ändra i dem så att jag ser att det är du som har gjort det. Dessutom måste du skicka in uppdraget i tid så jag kan följa hur du utvecklar din kod.

På det skriftliga provet får du hjälp med några instderingsuppgifter. Kan du dessa BÖR du klara provet. Vill du ha högre betyg måste du läsa hela boken och hänga med på lektionerna.

Starta på codecademy.com med HTML och CSS. Skapa ett konto med ditt skolkonto. Jag kommer att utgå och kontrollera att ni gjort alla "web fundamentals" på codeacadamy. 

Det ni gör här kommer ni ha ENORM nytta av när ni ska göra er egen webbplats.

Under kursens gång kommer vi att gå igenom din kod muntligen för att säkerställa att du förstår vad du gjort

Du kan lägga ut din webbplats på Google drive
Mer info här




Webbplatsen http://webbteknik.nu/ är bokens egen webbplats med massor med hjälp och videomanualer. 

Direktlänk till videomanualerna: http://webbteknik.nu/resources/videos/

För att hjälpa er med uppdrag 2 3 och 4 titta på detta exempel och studera CSS och HTML

Elevarbete "E"

Elevarbete "U"

Elevarbete "O"

Elevarbete "J"

Elevarbete "A" - zip. Denna elev använde float i CSS


Läxhjälpen startsida, css


I kursen Webbutveckling 1 kommer du att lära dig att skapa webbplatser. Kursen koncentrerar sig på tekniken och kodningen av statiska webbplatser. Det vi kommer gå in på är HTML5 och CSS och deras historik. Vi tittar även på validering, teckenkodning, fonter, färgsystem, layout med CSS, formulär, javascript, anpassa webbplatsen till mobiler, koda för ljud och bild, säkerhet och tillgänglighet.

Kursen förutsätter bara normal tillgång till dator och Internet. Du kan behöva installera fler program, fler webbläsare eller tillägg till dina befintliga webbläsare.

I kursen jobbar vi med HTML5 som är den senaste versionen av HTML. Har du jobbat med andra versioner så känner du igen en hel del. En annat mycket viking sak är att du måste regelbundet validera dina webbsidor. Detta gör man för att webbläsare nu och i framtiden utgår från att de sidor som klarar valideringen bör visas korrekt. Det finns kod som fungerar i webbläsare men som inte godkänns i valideringen (exempel finns på sidan 214).

Webbdesign och webbutveckling ändras konstant och blir aldrig färdigt. Därför kan saker som står i boken eller du hittar på nätet kanske inte gälla längre. Då är det viktigt att gå till w3c eller liknade webbplatser och se vad som gäller just ni.

Länkar till validatorer:

HTML: http://validator.w3.org/

CSS: http://jigsaw.w3.org/css-validator/

Kursmål och betygskriterier

Först rekommenderar jag dig att läsa sidan 2-4. Där presenterar sig författaren och du ser hur boken är uppbyggd. Titta sedan igenom innehållsförteckningen på sidan 5-9. Du får en översikt över vad boken tar upp.

Läs igenom kursens kursplan och kunskapskrav. Du hittar kursplan på sidorna 11-12 i läroboken och kunskapskrav på sidorna 13-15. Glöm inte läsa författarens kommentarer.

Jag har lagt kunskapskraven som en matris här http://bit.ly/WEBWEU01 så det ska vara överskådligt.

Kursens upplägg

Kursen i Datorkommunikation består av:

Lärobok: Webbutveckling 1 från förlaget Thelin, Studieguiden (som du läser nu), Uppdrag och Länkar

Läroboken

Läs noga igenom en studieguide i taget. Därefter läser du läroboken i de kapitel som tillhör studieguiden. Efter det gör du testa dig själv som förbereder dig för uppdragen. Bläddra gärna igenom alla sidor så du får en uppfattning om innehållet.

Det finns inget som jag kan säga att du ska hoppa över. Allt är användbart. Dock måste du inte kunna allt utantill eller använda alla saker på dina webbplatser. Det viktiga är att var strukturerad och se till att man följer standard. Validera ofta.

Guider

Läroboken består av 18 kapitel. Dessa kapitel motsvaras i här av fyra studieguider:

Studieguide 1, Kapitel 1-5

Studieguide 2, Kapitel 6-9

Studieguide 3, Kapitel 10-13

Studieguide 4, Kapitel 14-18

Studieguiderna ger dig förklaringar och kommentarer. Betrakta dessa som din ”lärare” tillsammans med din lärare, som rättar och kommenterar uppdragen. För att tillgodogöra dig kursinnehållet är det oerhört viktigt att du läser igenom studieguiderna och gör de övningar som är angivna i texten! Hoppa inte över något!

Uppdragen

Uppdragen testar dina kunskaper lite djupare och tränar dig i självständigt arbete. Dessa måste du göra och skicka in för granskning av din webblärare.

Du får betyg (F, E, D, C, B, A) på varje uppdrag, vilket visar hur väl du klarat av uppdraget. Betygen på dina uppdrag ligger till grund för betyget på hela kursen. Därför är det av största vikt att du gör uppdragen så noggrant som möjligt. Kontrollera också att du i uppdragen verkligen svarar på de frågor som ställs. Vad som krävs av dina svar för de olika betygsgraderna framgår av kursmål och betygskriterier, vilka du bör studera noga.

När du jobbar i är det bäst att skriva uppdragen i ett ordbehandlingsprogram först så att det du gjort inte riskerar att försvinna. Därefter kan du bifoga filen det du gjort i ordbehandlingsprogrammet i Google Apps. Det går bra med doc, docx, OpenOffice eller pdf filer.

I denna kurs kommer du ofta behöva skicka en hel webbplats till din lärare och eftersom en webbplats innehåller många filer ska du komprimera mappen där din webbplats ligger. Då är det bäst att skicka dem som zip. Jag skriver nedan kort hur man tar reda på hur ett komprimeringsprogram fungerar. Du får gärna använda andra komprimeringsprogram än 7zip. Om det skulle vara problem att bifoga filer kan du använda tjänster som sprend.se för att skicka en komprimerad fil. 

Använder du mac? 

Markera de filer du vill komprimera -> Högerklicka på de filer du vill komprimera till samma zipfil -> välj "Komprimera X objekt". Där X är antalet filer som du makerat.

Ladda ner programmet 7zip från

http://www.7-zip.org/download.html

Med 7zip kan du komprimera en eller flera filer. Läs igenom denna manual om 7zip

http://pcforalla.idg.se/2.1054/1.222771/sa-packar-du---och-packar-upp---med-7-zip

och titta på denna film om 7zip

http://people.sabanciuniv.edu/ertekg/sebil/7_zip_tutorial/7_zip_tutorial.htm

Studietips

Tänk på att studera aktivt! Hoppa inte över några instruktioner! Lägg upp en tidplan för dina studier och skriv in delmål och när dessa ska vara avklarade – så får du en jämn arbetsfördelning.

v  Må Ti   On To  Fr  Denna vecka
 34  upprop        
 35            Codeacadamy 1-3
 36            Codeacadamy 4-6
 37            Codeacadamy 7-9
 38            Codeacadamy 10-12
 39          
 40      studiedag  
 U1 F1 - Datainspektionen
 41            U1 F2 - en filmsida
 42         18/10 ingen lektion i webbutveckling
 U1 F3 - sitemap - wireframe
 43            
 44  studiedag studiedag  lov   lov   lov  
 45           Titta på bit.ly/belfragewebb

U2 F1 - Webbens historia


U2F2 - 3 bra, 3 dåliga saker med webben
 
 46        utveck. samtal   gör klart gamla uppg!
 47            U2F3 - projektplan på din hotellwebbplats
 
Titta på bit.ly/belfragewebb
 48           Titta på bit.ly/belfragewebb
 
Jobba med U2 F4
 49           Titta på bit.ly/belfragewebb

Jobba med U2 F4
 50           U2 F4 KLAR! OBS Detta fråga KAN ta mycket tid
 51        avslut  LOV  Jobba med U3 F1
 2  LOV         Jobba med U3 F1 
 3  studiedag          Jobba med U3 F1
 4            Jobba med U3 F1
 5            Jobba med U3 F1
 6            U3 F1 KLAR OBS Detta fråga tar troligen MEST tid
 7            arb med hotellwebbplats
 8  LOV LOV   LOV LOV   LOV  
 9             arb med hotellwebbplats
 10      studiedag      U4F2 klar säkerket mm
 11             arb med hotellwebbplats
 12             arb med hotellwebbplats
 13             arb med hotellwebbplats
 14             arb med hotellwebbplats
 15             arb med hotellwebbplats
 16  LOV  LOV  LOV  LOV  LOV  
 17  LOV          Prov
 18    skolans dag  skolans dag      U4F3 - dokumentation
 19           U4F1 OBS Detta fråga tar troligen mycket tid
 20            Klar med allt!
 21            buffert
 22        LOV LOV   buffert
 23          LOV  



Nostalgi: Så här såg världens första webbsida ut: http://info.cern.ch/hypertext/WWW/TheProject.html

Skapa wireframe online (reg. krävs)




En bra guide om att skapa layout med float  svenska hittar du här

En bra guide om layout med float på eng hittar du här


http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML5

http://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS






Om vi hinner:

Gå in på Codeacadamyregistrera dig och välj JavaScript. Gör övningarna där



SEO
Hur man tjänar pengar och får fler besökare
Hur man skriver för webben - Erik Geijer (pdf 1,4 MB)
Google webmaster tools - vilka sökord använder dina besökare
Google analytics - analysera dina besökare
Google trends - vad söker människor på Google
Google adsense - tjäna pengar på dina webbplatser/bloggar
Google adwords: Hitta sökord

Hjälper det med SEO?

ċ
Från början till layout.zip
(5k)
Paul B,
28 jan. 2013 03:54
ċ
Hotellwebbplats i 6 steg.zip
(1925k)
Paul B,
14 sep. 2012 00:33
ċ
MinWebbplats.zip
(3k)
Paul B,
3 okt. 2012 06:16
ċ
RENT HOTELL .zip
(1206k)
Paul B,
7 nov. 2012 05:27
ċ
Uppdrag4.zip
(349k)
Paul Belfrage,
5 nov. 2013 23:30
ċ
Webb Powerpoint presentationer till boken.zip
(8562k)
Paul B,
23 aug. 2013 04:14
ċ
från layout till färdig webbplats.zip
(983k)
Paul B,
30 jan. 2013 04:37
ċ
hotellwebbplats 2 rena versioner.zip
(2412k)
Paul B,
11 okt. 2012 01:58
ċ
laxhjalpen-demowebb.zip
(375k)
Paul B,
2 sep. 2012 03:55
ċ
läxhjälpen.zip
(17k)
Paul B,
30 aug. 2012 23:06
Comments