Utvecklingsprocessen Webbutveckling. Utvecklingsprocessen Bli inte rädd för alla begrepp och alla verktyg man verkar behöva kunna. Du måste inte använda.

En presentation över ämnet: "Utvecklingsprocessen Webbutveckling. Utvecklingsprocessen Bli inte rädd för alla begrepp och alla verktyg man verkar behöva kunna. Du måste inte använda."— Presentationens avskrift:

1 Utvecklingsprocessen Webbutveckling

2 Utvecklingsprocessen Bli inte rädd för alla begrepp och alla verktyg man verkar behöva kunna. Du måste inte använda alla redan nu. Lägg informationen i ”bakhuvudet” och använd den när det behövs.

3 Utvecklingsprocessen Jobba i små steg; Skriv lite HTML, validera och testa i webbläsaren. Skriv en aning till, testa. Skriv lite CSS, validera, testa. Lite mer kod, validera, testa.

4 Utvecklingsprocessen Gör samma sak med alla verktyg och metoder du möter. Läs lite grann, testa, läs lite mer, testa, osv. Men även viktigt att ha ett slutmål vid horisonten. Sikta åt rätt håll!

5 Utvecklingsprocessen Processen är inte en renodlad sekvens av att göra saker från A, sedan B, sedan C osv, utan den är iterativ – upprepande! Man gör samma saker flera gånger och man gör ofta olika saker parallellt.

6 Utvecklingsprocessen Somliga skissar direkt med HTML och CSS. Andra jobbar med papper och penna, sedan ritas designen i datorn och först därpå skapas HTML och CSS-kod.

7 Utvecklingsprocessen Ibland jobbar designern i ett WYSIWYG-verktyg. What-You-See-Is-What-You-Get

8 Utvecklingsprocessen Ibland jobbar designern i ett WYSIWYG-verktyg. What-You-See-Is-What-You-Get

9 Utvecklingsprocessen Även om man jobbar med enklare statiska webbplatser, så är det sällsynt att man inte måste handkoda HTML och CSS i någon mån. WYSIWYG-programmen är inte en ersättning för kunskap!

10 Utvecklingsprocessen

11 Utvecklingsprocessen En webbplats börjar med en idé! Eleverna ska kunna hitta all information de behöver för att kunna följa undervisningen, man ska kunna köpa smycken från en designer, rockbandet ska nå publik eller medlemmarna i en ridklubb ska kunna boka tider i stallet

12 Utvecklingsprocessen Idéerna bör formuleras skriftligt och gradvis formuleras om till mer konkreta mål.

13 Utvecklingsprocessen I målen bör man se till så att de inom organisationen som jobbar med informationen inte får extraarbete, utan att totalsumman blir arbetsbesparande.

14 Utvecklingsprocessen På den här nivån behöver man alltså analysera informationsflödet och göra en analys av effekterna kring dagens situation och den man tänker sig att uppnå.

15 Utvecklingsprocessen Första typen av skiss: Struktur, dvs vilka delar och sidor ska ingå. Här tänker man noga igenom navigationen.

16 Utvecklingsprocessen En sitemap kan se ut så här (hierarkisk webbplats): Startsida Vilka vi är (om oss) Vad vi gör (arbeten) Blogg (alla inlägg) Blogginlägg (med kommentarer) Kontakt (formulär)

17 Utvecklingsprocessen Wireframes Dessa beskriver hur de enskilda sidorna är uppbyggda. Gör en wireframe för varje typ av sida som ingår.

18 Utvecklingsprocessen För sidor som har hög grad av interaktion, som formulär eller sidor som har visa/dölj effekter, bildspel och liknande, kan man göra en sk storyboard för att designa ett effektivt och fungerande arbetsflöde.

19 Utvecklingsprocessen Winframes kan liknas vid ett skelett. Nu är det dags för hud och hår = Färgerna Bilderna Typsnitten

20 Utvecklingsprocessen I stilguiden beskrivs med ord vad färger heter (eller har för kod) och vad namnet är på valda typsnitt och bilder.

21 Utvecklingsprocessen