Mobil webbutveckling med HTML5, CSS3 och JavaScript

1. Mobil webbutveckling med HTML5, CSS3 och JavaScript

2. Presentation • Per Daleskog • Ex-Göteborgare och Chalmerist (numera Karlstad) • Mobilutvecklare sedan 2003 (Nokia, SEMC, m.fl.) • Jobbat med mobilwebb sedan 2009, innan dess Java ME, Symbian mm. • Startade Mobilicon AB 2010 • Jobbar för närvarande som konsult för Svenska Spel • Jobbar tillsammans med Adecco IT Konsult kring deras mobilitetsatsning

3. Agenda • Bakgrund – appar & web • Förutsättningar • Viewport & Orientation • Hantering av olika enheter • Touchstöd & klick • ”Appifiering” • Kort om prestanda • Debuggverktyg • Sammanfattning

4. Bakgrundappar& web

5. Webben är död! 2010 - 2011

6. 2011 - 2012 • Nedladdade appar 2011 (iOS + Android): 25 miljarder ”Appen är onödig” IDG Maj 2012 • Bruttoförsäljning Q4 2011: 1 miljard $ • Utbetalat till utvecklare Q4 2011: 700 miljoner $ • Genomsnittligt antal nedladdade appar per enhet: 75 Källa: Asycmo

8. App, app, app - app är bättre Web • Endast privat filsystem via localstorage/appcache • Ingen åtkomst till kamera, kontakter, notifiering, vibration (ännu) • Nästan optimal prestanda tack vare webbläsarkriget • Svårare ta betalt Native • Åtkomst till filsystem, kamera, kontakter, notifiering, vibration • Exponering på leverantörernas marknadsplatser • Optimal prestanda • Betalt för appar

9. Web vs. Native-fördelar/nackdelar Native • Beroende av marknadsplatsernas villkor, provisionsmodeller och ledtider • Kräver djup kompetens per vald plattform • Kostnad för varje vald plattform • Begränsad målgrupp (valda plattformar) Web • Full kontroll över ledtider och existerande programversioner • Enhetlig kompetens oavsett målplattform • En kodbas att underhålla • Enklare integration med kringliggande system autentiseringslösningar mm. • Man når ”alla”

10. Native vs. Web-dött lopp • Ljud och video • 2D-grafik • Inmatning och gester • "Appkänsla“ • Accelerometer, gyroskop och geolocation

11. Hybrid • För/nackdelar med både native och webb • Tredje alternativ, hybrid! • Webbteknologi + wrapper per plattform.  • Uppdateringar tvingande och när man vill • Åtkomst till enhetens funktioner inkl. notifieringar • Exponering på marknadsplatserna • Exempel: http://m.linkedin.com

12. Förutsättningar

13. Mobilbrowsers • För många • Vissa är begränsade • Vissa är lite väl innovativa • Vissa är proxybaserade • De flesta har lite dokumentation • De flesta har lite debuggstöd

14. Som om inte det vore nog • Olika plattformar • Olika versioner av plattformarna • Olika enheter • Nätaccessen är oförutsägbar

15. Webbläsarstöd för HTML5 http://caniuse.com

16. Testa vilket HTML5-stöd din enhet har http://html5test.com/

17. Viewport & Orientaion

18. Viewport • Tillgängliga ytan att rendera på • Standardvärden för viewport: • 980px på iPhone • 850px på Opera • 800px på Android • Användaren kan zooma och panorera i viewporten • Lägg till följande i head sektionen: • <meta name="viewport" content="width=device-width, • initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

19. Viewport

20. Orientation • Landscape (viewportbredden > viewporthöjden ) • Portrait  (viewporthöjden >= viewportbredden) • Ipad har 4 lägen, övriga 3; 0, -90, 180, 90

21. Orientation <div id="debug"></div> <script type="text/javascript"> functionshowOrientation(){ document.getElementById('debug').innerHTML= orientation; } document.body.onorientationchange= showOrientation; showOrientation(); </script>

22. Hantering av olika enheter

23. Hur hantera olika klienter? • Client-side: • Media queries • Modernizr • Ren Java-script • Server-side: • WURFL • (Modernizr-Server(.Net + PHP)) • (Regular Expressions)

24. Media queries Grund för att skapa responsiva webbplatser! Ett sätt att mer specifikt kunna precisera för vilka enheter stylesheets skall appliceras. • Låter oss: • Skapa en sida med optimerad användarupplevelse, för alla enheter och med bibehållet innehåll! • Undvika att ladda ner resurser som vi ändå inte vill visa på aktuell enhet • Exempel: • http://lanyrd.com/ • http://news.google.com/

25. Media queries Tre sätt att använda media queries: Värden för logik • only • not • Länka in externt stylesheet <linkhref="file" rel="stylesheet" media="logic media and (expression)" /> • Importera externt stylesheet @import url('file') logic media and (expression); • Definiera i befintligt stylesheet @media logic media and (expression) { rules}

26. Media queries& Viewport Width : bredden på browserns viewport inklusive scrollbar (korta sidan på iPhone) Height : höjden på browserns viewport inklusive scrollbar (långa sidan på iPhonen) @media screen and {width: value} { rules } @media screenand {min-width: value} { rules } @media screenand {max-width: value} { rules} width

27. Undvik att gömma element (eller gör det iaf på rätt sätt) Resurser som laddas ner även om de göms slösar både bandbredd och cache-utrymme. <div id="imgtest"> <imgsrc="test.png" /> </div> <div id=“imgtest2"><div></div></div> <style type="text/css"> #imgtest2 div { background-image:url('test.png'); width:200px; height:75px; } @media screen and (max-width: 400px) { #imgtest2{display:none;} } </style> <style type="text/css"> @media screen and (max-width: 400px){ #imgtest{ display:none; } } </style> Tack till Tim Kadlec för testresultat

28. Modernizr ..<head> .. <script src="modernizr-2.5.3.min.js"></script> .. ..</head> <html class="no-js"> <html class="js canvas canvastext no-geolocationrgbamultiplebgs borderimage borderradiusboxshadowopacitycssanimationscsscolumns cssgradientscssreflectionscsstransformscsstransforms3d csstransitions video audio localstoragesessionstoragewebworkersapplicationcachefontface">

29. Modernizrexempel För enheter som har stöd för rundade kanter, visa det. För enheter som har stöd för skuggning visa det istället .borderradius#element { border: 2px solid #555555; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .boxshadow#element { border: none; -webkit-box-shadow: rgba(0,0,0, .5) 3px 3px5px; -moz-box-shadow: rgba(0,0,0, .5) 3px 3px5px; box-shadow: rgba(0,0,0, .5) 3px 3px5px; }

30. Wurfl Wireless Universal ResourceFiLe UA-strängsbaserat XML-fil med listning på en massa device Bl.a. Java, .Net C#, PHP API:er Numera licensbelagt ($$$)

31. Touchstöd & klick

32. Exempeltouch https://m.svenskaspel.se/Triss

33. Touch stöd • Single/mutlitouch stöd • Kan hålla reda på upp till 11 (!?) fingrar samtidigt • ontouchstart, ontouchmove, ontouchend • event.touches innehåller info om fingrarna • Multi-touch stöds endast i iOS ej Android (ännu) • Problem för iPad som t.ex. växlar app med 4 fingrar eller tillbaks till hemskärmen med 5-fingers-pinch

34. Kontrollera touchstöd try { // Testa om enheten stödjer touch i så fall // bind till de touch event vi är intresserade av document.createEvent('TouchEvent'); … } catch (e) { // Enheten stödjer inte touch … }

35. Problemmedklick • Click event triggas endast efter 0.3s fördröjning (double tap) • touchstart • Fastclick, fasttouch, …, uppsjö av js-plugins finns • Löst i flera av mobilramverken (t.ex. useFastTouch i jQTouch)

36. ”Appifiering”

37. Webappifiera, iPhone Kör din webbapp i fullskärmsläge genom att lägga till denna raden: <meta name="apple-mobile-web-app-capable" content="yes"> Lägg till startup-bild och home-screen ikon med dessa rader: <link rel="apple-touch-icon-precomposed" href="my-icon.png"> <link rel="apple-touch-startup-image" href="my-startup-image.png"> Devicespecifika storlekar krävs på bilderna. Home-screen ikonen funkar även för Android. http://cubiq.org/add-to-home-screen

38. Bli av med adressfältet, alternativ lösning <bodyonload=”window.scrollTo(0, 1);”>

39. Headers, footers och position fixed Används för att skapa headers och footers Placerar ett element fixed i förhållande till scroll Stöds i iOS 5 och Android >2.2 Problem vid scroll iScroll #footer { position: fixed; bottom: 0px; width: 100%; height: 40px; }

40. Offline hantering - data Två olika sätt att lagra data lokalt localStorage & sessionStorage • localStorage: lagring som överlever när browsern startas om • sessionStorage: lagring som försvinner när browser sessionen startar om localStorage.setItem(’timeLeft', ’tolittle’); var timeLeft= localStorage.getItem('timeLeft'); localStorage.removeItem('timeLeft'); localStorage.clear();

41. Offline hantering - data • “Same origin policy” (kan delas mellan subdomäner) • Cirka 2-5MB utrymme per värd (testa) • Bara strängar kan lagras (UTF-16) • Konvertera till JSON innan lagring • Webbläsare har stöd för att utforska innehållet i localstorage • Jämför med cookies • Skickas fram och tillbaks med varje request • Kan inte delas mellan subdomäner • Begränsad datamängd (20 cookies x 4KB)

42. Offline hantering – resurserApplicationcache Offlinebrowsing Snabbhet Minskad serverlast CACHE MANIFESTCACHE:/css/screen.css/css/offline.css/js/screen.js/img/logo.pnghttp://external.com/styles.cssFALLBACK:/ /offline.htmlNETWORK:* <htmlmanifest=”mywebapp.appcache"> ... </html>

43. Cache storlek • Safari + Firefoxdesktop har ingen gräns • Mobile Safari har gräns på 5MB (frågar användaren om mer) • Android har ingen gräns • Dock så finns tjatare gränser på hur stora enskilda objekt som cachasså undvik allt för stora filer!

44. Kort om prestanda

45. Prestanda • Saker att undvika • Skuggor • Gradienter (i vissa fall är det bättre att använda bilder) • Transparens • Många DOM element • Okomprimerade bilder (använd Smush.it el. dyl.)

46. Minifiera, komprimera och kombinera js + css Tillsammans med cachning är detta en av de viktigaste åtgärderna för att minska laddtider Ex. på ramverk (.NET) Combres: Möjlighet att slå av på minifiering för debugg

47. Testa din webbplats prestanda! • Gtmetrixhttp://gtmetrix.com/ • Yslow - http://developer.yahoo.com/yslow/ • PageSpeed - https://developers.google.com/speed/pagespeed/

48. Debuggverktyg

49. Weinre • WEbINspectorRemote • Som Firebug ellerWeb Inspector fast på target! • http://debug.phonegap.com/ <script src="http://debug.phonegap.com/target/target-script-min.js#devmobile2012"></script>