Successfully reported this slideshow.

Bedre nettsider på i pad og iphone

1,146 views

Published on

Presentasjon holdt på meetup Framsia.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Bedre nettsider på i pad og iphone

  1. 1. MeetupsFramsia<br />av Andreas Rübner Johnsen den2. februar 2011<br />Bedre nettsider på iPad og iPhone- og andre dingser<br />
  2. 2. Bedre nettsider på Samsung Galaxy og SE Xperia- og andre dingser<br />
  3. 3.
  4. 4. 800<br />800<br />980 piksler<br />800 piksler<br />
  5. 5. Endre viewport<br /><meta name = "viewport" content = "width = 800"><br />
  6. 6. Standard bredde på viewport<br />980 px*<br />850 px<br />800 px<br />* Gjelder både iPhone 3 og iPhone 4<br />
  7. 7. Trykkvennlig design<br />
  8. 8. Detektere «touch»<br />Sniffe User-Agentpå serveren<br />Finne skjermstørrelsen med CSS<br />Bruke Javascript:<br />if(window.Touch) /* kun iPhone*/<br />document.ontouchstart<br />
  9. 9. Input-elementer<br /><input type="text"><br /><input type="number"><br /><input type="tel"><br /><input type="email"><br /><input type="file"><br />
  10. 10. Ikke bruk!Safari på mobil er ikke helt det samme som på desktop<br />Flash<br />Mouse-over<br />Filopplasting og -nedlasting<br />Nedlastbare fonter<br />
  11. 11. Simulatorer<br />iPhone 3/4 og iPad simulator<br />installer iOS SDK 4 (kun for Mac)<br />Android emulator<br />installer Android SDK (for Windows, Mac, Linux)<br />må først definere en Android VirtualDevice<br />Opera Mobile emulator<br />Windows, Mac, Linux<br />Opera Mini Simulator<br />http://www.opera.com/mobile/demo/<br />Windows Phone 7 emulator<br />installer Windows Phone Developer Tools<br />
  12. 12.
  13. 13.
  14. 14.
  15. 15. Web apps på en, to, tre, fire, fem!<br />
  16. 16. 1. Home screen<br />
  17. 17. 2. Legge til ikon<br /><html><br /> <head><br /> <title>itDagene</title><br /><link rel="apple-touch-icon" href=”itdagene.png"><br /> …<br /> …<br />iOS, Android, BB6, <br />
  18. 18. 3. Optimal bredde<br /><html><br /> <head><br /> <title>itDagene</title><br /> <link rel="apple-touch-icon" href=”itdagene.png"><br /><meta name="viewport" content="width=device-width"><br /> …<br /> …<br />iOS, Android, webOS, Opera, WP7 <br />
  19. 19. 4. Slå av zoom<br /><html><br /> <head><br /> <title>itDagene</title><br /> <link rel="apple-touch-icon" href=”itdagene.png"><br /><meta name="viewport" content="width=device-width, user-scalable = no"><br /> …<br />…<br />iOS, Android, webOS, WP7, Opera <br />
  20. 20. 5. Skjule Safari<br /><html><br /> <head><br /> <title>itDagene</title><br /> <link rel="apple-touch-icon" href=”itdagene.png"><br /> <meta name="viewport" content="width=device-width, user-scalable = no"><br /><meta name="apple-mobile-web-app-capable" content="yes"><br /> …<br />…<br />
  21. 21. 6. Offline web app<br /><html manifest="itdageneapp.manifest"><br />CACHE MANIFEST<br />/itdagene.html<br />/itdagene.css<br />/itdagene.js<br />/itdagene-logo.png<br />
  22. 22. Offline Web Apps<br />Offline Web Apps kan brukes på mobilen uten å være tilkoblet internett.<br />Standardisert i HTML5.<br />Støttes av Safari, Chrome og Opera, iPhone og Android.<br />HTML5<br /><ul><li>ApplicationCaching
  23. 23. Client-side SQL
  24. 24. LocalStorage
  25. 25. Online API</li></li></ul><li>GmailEksempel på offline web application<br />
  26. 26. Web Widgets<br />Web apps som kan <br />kjøres uten nettleser.<br /><ul><li>Dashcode for Mac
  27. 27. W3C Widgets</li></li></ul><li>Nye W3C spesifikasjoner<br />Posisjon, orientation, kompassogadresse<br />GeolocationAPI Specification<br />SMS, MMS, epost<br />The Messaging API<br />Kontaktliste<br />Contacts API<br />Kameraoglydopptak<br />HTML Media Capture<br />Temperatur, batteri, båndbredde +++<br />The System Information API<br />
  28. 28. PhoneGap<br />
  29. 29. HTML5/CSS3 demoer<br />Demo av Deviceorientation API<br />http://kurrik-slides.appspot.com/html5-techtalk/#slide30<br />NB! Kun for Chrome påMacbook<br />NB! Tar oftenoensekunderfør den starter<br />HTML5 candance<br />http://code.bocoup.com/audio-data-api/flash-vs-html5/<br />NB! Kun Firefox 4 – WebGLmåslåspå (beskrevetpåsiden)<br />Kombinasjon av:<br />Webfonts<br />SVG Filters<br /><video><br />WebGL (3d canvas)<br />Mozilla’sAudio Data API<br />

×