Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bedre nettsider på i pad og iphone

1,165 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 />

×