bedre nettsider på i pad og iphone
DESCRIPTION
Presentasjon holdt på meetup Framsia.TRANSCRIPT
Meetups Framsiaav Andreas Rübner Johnsen den 2. februar 2011
Bedre nettsider på iPad og iPhone- og andre dingser
Bedre nettsider på Samsung Galaxy og SE Xperia- og andre dingser
980 piksler
800
800 piksler
800
Endre viewport
<meta name = "viewport" content = "width = 800">
Standard bredde på viewport
980 px*
850 px
800 px
* Gjelder både iPhone 3 og iPhone 4
Trykkvennlig design
Detektere «touch»
• Sniffe User-Agent på serveren• Finne skjermstørrelsen med CSS• Bruke Javascript:– if(window.Touch) /* kun iPhone*/– document.ontouchstart
Input-elementer
<input type="text">
<input type="number">
<input type="tel">
<input type="email">
<input type="file">
Ikke bruk!Safari på mobil er ikke helt det samme som på desktop
• Flash• Mouse-over• Filopplasting og -nedlasting• Nedlastbare fonter
Simulatorer
• iPhone 3/4 og iPad simulator– installer iOS SDK 4 (kun for Mac)
• Android emulator– installer Android SDK (for Windows, Mac, Linux)– må først definere en Android Virtual Device
• Opera Mobile emulator– Windows, Mac, Linux
• Opera Mini Simulator– http://www.opera.com/mobile/demo/
• Windows Phone 7 emulator– installer Windows Phone Developer Tools
iOS Android Symbian^3/Megoo Windows Phone 7
Objective-C Java C++/QML C#/XAML
iOS SDK Andriod SDK Qt SDK .NET
Xcode Eclipse Visual Studio
App Store Android Market Ovi Store WP Marketplace
Web apps på en, to, tre, fire, fem!
1. Home screen
2. Legge til ikon
<html> <head> <title>itDagene</title>
<link rel="apple-touch-icon" href=”itdagene.png"> … …
iOS, Android, BB6,
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
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
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">
… …
6. Offline web app
<html manifest="itdageneapp.manifest">
CACHE MANIFEST
/itdagene.html/itdagene.css /itdagene.js /itdagene-logo.png
Offline Web Apps
• Offline Web Apps kan brukes på mobilen uten å være tilkoblet internett.
• Standardisert i HTML5.• Støttes av Safari, Chrome og Opera,
iPhone og Android.
HTML5- Application
Caching- Client-side SQL
- LocalStorage
- Online API
GmailEksempel på offline web application
Web Widgets
Web apps som kan kjøres uten nettleser.- Dashcode for Mac- W3C Widgets
Nye W3C spesifikasjoner
• Posisjon, orientation, kompass og adresse– Geolocation API Specification
• SMS, MMS, epost– The Messaging API
• Kontaktliste– Contacts API
• Kamera og lydopptak– HTML Media Capture
• Temperatur, batteri, båndbredde +++– The System Information API
PhoneGap
HTML5/CSS3 demoer
• Demo av Device orientation API– http://kurrik-slides.appspot.com/html5-techtalk/#slide30– NB! Kun for Chrome på Macbook– NB! Tar ofte noen sekunder før den starter
• HTML5 can dance– http://code.bocoup.com/audio-data-api/flash-vs-html5/– NB! Kun Firefox 4 – WebGL må slås på (beskrevet på
siden)– Kombinasjon av:
• Webfonts• SVG Filters• <video>• WebGL (3d canvas)• Mozilla’s Audio Data API