On-line produktion TDDC61
Förra gången MuddyCards Animation Portfolio Lab 3.
Muddycards - resultat Positiva kommentarer Tempo föreläsningar Labbhandledning, pedagogik Mer labbhandledning Instruktioner LISAM Labbtid efter föreläsning Tempo Frågor? Synpunkter?
Portfolio Bildoptimering Javascript jquery Agenda
Förberedelser Design Implementation Utvärdering Portfolio
Portfolio - Förberedelser Förebildsanalys Målgruppsanalys Persona.
Portfolio - Design Moodboards Wireframes Skisser/mock-ups (hög detaljnivå - ska (nästan) se ut som färdig färdig webbsida).
Portfolio - implementation Bygg!
Portfolio - Utvärdering Arbetsrapport Argumentation & kritik Reflektion & självvärdering 500-1000 ord (med kontrollerad stavning och grammatik).
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).
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.
Demo Bildoptimering
Sprite sheets En bild för flera små bilder Minskar laddningstider och HTTP Requests http://css-tricks.com/css-sprites/ #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;}
Bildoptimering Använd inte bilder för att visa text Tar mycket plats och bandbredd/trafik Oflexibelt, krångligt att uppdatera.
Bildoptimering text med styling istället för bilder, menyer, knappar, headers även enklare att ändra och uppdatera bättre tillgänglighet
Bildoptimering Använd glyphs/dingbats/wingdings/emojis istället för ikoner och små återkommande bilder
Rita med SVG Bildoptimering
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
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 >
Retina, mfl För Lab 4 krävs ej retina-anpassning För portfolio/projekt är det meriterande för högre betyg.
Javascript Körs hos klienten Kan vara avstängt eller inte fungera Kan ge en rikare upplevelse Javascript är inte Java
Javascript Java
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
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).
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.
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.
Demo - jquery
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.
Favicon Används (inte alltid) för: Adressfältet Tabbar Bokmärken Sökmotorslistningar.
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!
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.
www-allmänbildning infosthetics.com evhead.com/2005/11/ten-rules-for-web-startups.asp www.alistapart.com/articles/indefenseofeyecandy/ gettingreal.37signals.com/toc.php mnmlist.com/w/ www.theonion.com/articles/let-me-explain-why-miley-cyrus-vma-performance-was,33632/ alistapart.com/article/understandingwebdesign dribbble.com
Tack & lycka till! foto Surfskolan.nu