Bedre nettsider på i pad og iphone
- 1. MeetupsFramsiaav Andreas Rübner Johnsen den2. februar 2011Bedre nettsider på iPad og iPhone- og andre dingser
- 2. Bedre nettsider på Samsung Galaxy og SE Xperia- og andre dingser
- 5. Endre viewport<meta name = "viewport" content = "width = 800">
- 6. Standard bredde på viewport980 px*850 px800 px* Gjelder både iPhone 3 og iPhone 4
- 8. Detektere «touch»Sniffe User-Agentpå serverenFinne skjermstørrelsen med CSSBruke Javascript:if(window.Touch) /* kun iPhone*/document.ontouchstart
- 9. Input-elementer<input type="text"><input type="number"><input type="tel"><input type="email"><input type="file">
- 10. Ikke bruk!Safari på mobil er ikke helt det samme som på desktopFlashMouse-overFilopplasting og -nedlastingNedlastbare fonter
- 11. SimulatoreriPhone 3/4 og iPad simulatorinstaller iOS SDK 4 (kun for Mac)Android emulatorinstaller Android SDK (for Windows, Mac, Linux)må først definere en Android VirtualDeviceOpera Mobile emulatorWindows, Mac, LinuxOpera Mini Simulatorhttp://www.opera.com/mobile/demo/Windows Phone 7 emulatorinstaller Windows Phone Developer Tools
- 15. Web apps på en, to, tre, fire, fem!
- 16. 1. Home screen
- 17. 2. Legge til ikon<html> <head> <title>itDagene</title><link rel="apple-touch-icon" href=”itdagene.png"> … …iOS, Android, BB6,
- 18. 3. Optimal bredde<html> <head> <title>itDagene</title> <link rel="apple-touch-icon" href=”itdagene.png"><meta name="viewport" content="width=device-width"> … …iOS, Android, webOS, Opera, WP7
- 19. 4. Slå av zoom<html> <head> <title>itDagene</title> <link rel="apple-touch-icon" href=”itdagene.png"><meta name="viewport" content="width=device-width, user-scalable = no"> ……iOS, Android, webOS, WP7, Opera
- 20. 5. Skjule Safari<html> <head> <title>itDagene</title> <link rel="apple-touch-icon" href=”itdagene.png"> <meta name="viewport" content="width=device-width, user-scalable = no"><meta name="apple-mobile-web-app-capable" content="yes"> ……
- 21. 6. Offline web app<html manifest="itdageneapp.manifest">CACHE MANIFEST/itdagene.html/itdagene.css/itdagene.js/itdagene-logo.png
- 22. Offline Web AppsOffline Web Apps kan brukes på mobilen uten å være tilkoblet internett.Standardisert i HTML5.Støttes av Safari, Chrome og Opera, iPhone og Android.HTML5ApplicationCaching
- 23. Client-side SQL
- 24. LocalStorage
- 25. Online APIGmailEksempel på offline web application
- 26. Web WidgetsWeb apps som kan kjøres uten nettleser.Dashcode for Mac
- 27. W3C WidgetsNye W3C spesifikasjonerPosisjon, orientation, kompassogadresseGeolocationAPI SpecificationSMS, MMS, epostThe Messaging APIKontaktlisteContacts APIKameraoglydopptakHTML Media CaptureTemperatur, batteri, båndbredde +++The System Information API
- 28. PhoneGap
- 29. HTML5/CSS3 demoerDemo av Deviceorientation APIhttp://kurrik-slides.appspot.com/html5-techtalk/#slide30NB! Kun for Chrome påMacbookNB! Tar oftenoensekunderfør den starterHTML5 candancehttp://code.bocoup.com/audio-data-api/flash-vs-html5/NB! Kun Firefox 4 – WebGLmåslåspå (beskrevetpåsiden)Kombinasjon av:WebfontsSVG Filters<video>WebGL (3d canvas)Mozilla’sAudio Data API
Editor's Notes
- #3: Presentasjonen kunne like gjerne hatt denne tittelen (nesten).
- #5: Bruk viewport for å utnytte skjermbredden best mulig.
- #7: Kilde: A pixel is not a pixel is not a pixel - http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
- #8: Har lest at ting som skal trykkes på i grensesnittet bør være minimum 80x80px og ha en avstand på minst 20px. Dette vil variere fra skjerm til skjerm og bør egentlig oppgis i millimeter.
- #9: http://articles.sitepoint.com/article/adapting-an-interface-for-touch-devices
- #10: Bruk type-attributtet på input-elementer for å gi brukeren det beste grensesnittet.
- #17: WP7: ”Pin to Start”
- #18: For Android to pick up the icon you need a precomposed icon<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>In 2.1-update1, on the Droid, and I presume other 2.* OS phones, when adding a bookmark to the homescreen, the homescreen only displays a custom icon if the link rel="apple-touch-icon" or apple-touch-icon-precomposed have a FULL url path. Full meaning domain and everything.
- #19: WP7:The keyword “device-width” is intended to set the width of the Viewport to the width of the device that is viewing the page. On Windows Phone 7, the device width is 480 pixels. However, you will notice that if you set the Viewport width to “device-width”, IE actually sets the width to 320 (and also pins it to 320 if you specify a width of less than 320).
- #22: http://diveintohtml5.org/offline.html
- #26: http://www.w3.org/standards/techs/mobileapp#w3c_all
- #27: PhoneGap er et (av flere) rammeverk som gjøre det mulig å lage native apps basert på HTML, CSS og JS. Gir tilgang til hardware devicer i de ulike enhentene. PhoneGap e opensource. Se http://www.phonegap.com/features for hvilkemulighetersomgjørestilgjengeligpå de ulikeplattformene.