Download - Bedre nettsider på i pad og iphone
![Page 1: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/1.jpg)
Meetups Framsiaav Andreas Rübner Johnsen den 2. februar 2011
Bedre nettsider på iPad og iPhone- og andre dingser
![Page 2: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/2.jpg)
Bedre nettsider på Samsung Galaxy og SE Xperia- og andre dingser
![Page 3: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/3.jpg)
![Page 4: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/4.jpg)
980 piksler
800
800 piksler
800
![Page 5: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/5.jpg)
Endre viewport
<meta name = "viewport" content = "width = 800">
![Page 6: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/6.jpg)
Standard bredde på viewport
980 px*
850 px
800 px
* Gjelder både iPhone 3 og iPhone 4
![Page 7: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/7.jpg)
Trykkvennlig design
![Page 8: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/8.jpg)
Detektere «touch»
• Sniffe User-Agent på serveren• Finne skjermstørrelsen med CSS• Bruke Javascript:– if(window.Touch) /* kun iPhone*/– document.ontouchstart
![Page 9: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/9.jpg)
Input-elementer
<input type="text">
<input type="number">
<input type="tel">
<input type="email">
<input type="file">
![Page 10: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/10.jpg)
Ikke bruk!Safari på mobil er ikke helt det samme som på desktop
• Flash• Mouse-over• Filopplasting og -nedlasting• Nedlastbare fonter
![Page 11: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/11.jpg)
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
![Page 12: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/12.jpg)
![Page 13: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/13.jpg)
![Page 14: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/14.jpg)
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
![Page 15: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/15.jpg)
Web apps på en, to, tre, fire, fem!
![Page 16: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/16.jpg)
1. Home screen
![Page 17: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/17.jpg)
2. Legge til ikon
<html> <head> <title>itDagene</title>
<link rel="apple-touch-icon" href=”itdagene.png"> … …
iOS, Android, BB6,
![Page 18: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/18.jpg)
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
![Page 19: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/19.jpg)
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
![Page 20: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/20.jpg)
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">
… …
![Page 21: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/21.jpg)
6. Offline web app
<html manifest="itdageneapp.manifest">
CACHE MANIFEST
/itdagene.html/itdagene.css /itdagene.js /itdagene-logo.png
![Page 22: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/22.jpg)
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
![Page 23: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/23.jpg)
GmailEksempel på offline web application
![Page 24: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/24.jpg)
Web Widgets
Web apps som kan kjøres uten nettleser.- Dashcode for Mac- W3C Widgets
![Page 25: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/25.jpg)
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
![Page 26: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/26.jpg)
PhoneGap
![Page 27: Bedre nettsider på i pad og iphone](https://reader033.vdocuments.pub/reader033/viewer/2022061305/549aa5a3b479593d098b457b/html5/thumbnails/27.jpg)
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