On-line produktion TDDC61

Transkript

1 On-line produktion TDDC61

2 Förra gången MuddyCards Animation Portfolio Lab 3.

3 Muddycards - resultat Positiva kommentarer Tempo föreläsningar Labbhandledning, pedagogik Mer labbhandledning Instruktioner LISAM Labbtid efter föreläsning Tempo Frågor? Synpunkter?

4 Portfolio Bildoptimering Javascript jquery Agenda

5

6

7 Förberedelser Design Implementation Utvärdering Portfolio

8 Portfolio - Förberedelser Förebildsanalys Målgruppsanalys Persona.

9 Portfolio - Design Moodboards Wireframes Skisser/mock-ups (hög detaljnivå - ska (nästan) se ut som färdig färdig webbsida).

10 Portfolio - implementation Bygg!

11 Portfolio - Utvärdering Arbetsrapport Argumentation & kritik Reflektion & självvärdering ord (med kontrollerad stavning och grammatik).

12 Bildoptimering Filstorlek påverkar laddningstider Kort laddningstid = nöjda/fler besökare/kunder (Amazon skulle förlora $1.6 miljarder på 1 sek extra i laddtid) jpg - foto gif - grafik, kan vara genomskinliga, kan vara animerade png - passar både foto och grafik, kan vara genomskinliga svg - vektorgrafik (inte så vanlig).

13 Bildoptimering Ha inte större bilder än vad som kan visas på webbsidan Undvik att skala om med CSS eller via imgtaggen Vid album så använd tumnaglar/miniatyr-bilder Tips: beskär alla minibilder till samma format för enklare och snyggare layout I Photoshop finns val för Save for Web and Devices.

14 Demo Bildoptimering

15 Sprite sheets En bild för flera små bilder Minskar laddningstider och HTTP Requests #nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}

16 Bildoptimering Använd inte bilder för att visa text Tar mycket plats och bandbredd/trafik Oflexibelt, krångligt att uppdatera.

17 Bildoptimering text med styling istället för bilder, menyer, knappar, headers även enklare att ändra och uppdatera bättre tillgänglighet

18 Bildoptimering Använd glyphs/dingbats/wingdings/emojis istället för ikoner och små återkommande bilder

19 Rita med SVG Bildoptimering

20 Bildoptimering för SEO Använd sökord i bildnamn DCMIMAGE10.jpg vs 2012-Ford-Mustang-LX- Red.jpg I img-taggens alt-attribut beskriv vad som visas på bilden. T ex alt= 2012 Ford Mustang LX Red

21 Retina, mfl Högre upplösning än vanligt Funkar att göra bilder dubbelt så stora och sen skala ner med HTML/CSS (men är dåligt för bandbredd och användare med vanlig skärm) Går att göra alternativa CSS-regler för skärmar med hög dpi. Likt RWD-koden fast istället för width så kollas dpi eller pixelratio Script (retina.js) som byter ut bilder om det behövs och finns högupplösta varianter Kommer (kanske) men är inte standard ännu: <img src= low-res.jpg srcset= high-res.jpg >

22 Retina, mfl För Lab 4 krävs ej retina-anpassning För portfolio/projekt är det meriterande för högre betyg.

23 Javascript Körs hos klienten Kan vara avstängt eller inte fungera Kan ge en rikare upplevelse Javascript är inte Java

24 Javascript Java

25 Javascript kan t ex Leta reda på delar av HTML-kod och manipulera innehåll Ändra presentation Reagera på användarens handlingar Animera Kontrollera formulär

26 Javascript - se upp! En del användare har inte tillgång till Javascript Crawlers/spindlar/robots kör inte Javascript - Sökmotorsoptimera utan Javascript Javascript kan krascha/hänga webbläsaren (eller tab).

27 Javascript Syntax likt andra programmeringsspråk Ganska klurigt språk Finns färdiga bibliotek att använda - jquery, script.aloco.us, Prototype, Dojo Biblioteken gör JS mycket lättare att använda Finns även färdiga moduler för responsive web och fotoalbum.

28 jquery the fairy godmother of javascript Gör det enklare att använda javascript Liten fil med kod CSS3 stöd Stöder flera webbläsare Finns mängder av färdiga script att använda.

29 Demo - jquery

30 jquery Färdiga bibliotek med kod för t ex bildvisning, effekter, osv Hitta effekt som passar Ladda ner filer och kolla i instruktioner för var filer ska ligga och hur kod ska modifieras Brukar vara lite pilligt innan det funkar Kolla noga på filnamn och sökvägar.

31 Favicon Används (inte alltid) för: Adressfältet Tabbar Bokmärken Sökmotorslistningar.

32 Laboration 4 Webbplats med fotoalbum Fokus på jquery Hitta på saker som ni tycker tillför er webbplats något Både något externt script och egen kod Nytt ämne - nya filer - ny design Tänk på er portfolio och framtiden - gör fina webbplatser!

33 Ordning och reda Labbar i olika mappar Lägg olika typer av filer i egna mappar i labbmapparna, t ex: lab4/images/ lab4/includes/ lab4/scripts/ lab4/stylesheets/ Efter ni skickat in för redovisning - flytta inte, ändra inte i filer eller mappar.

34 www-allmänbildning infosthetics.com evhead.com/2005/11/ten-rules-for-web-startups.asp gettingreal.37signals.com/toc.php mnmlist.com/w/ alistapart.com/article/understandingwebdesign dribbble.com

35 Tack & lycka till! foto Surfskolan.nu