Developoment web si optimizarea site-urilor pentu iPhone

cuprins
introducere
aplicatii web
optimizarea site-urilorpentru iPhone
piatamobila
getting started

iPhone in 2 ani
platforma de dezvoltareunica
40 mil dispozitivevandute
1.5 mldaplicatiidownloadate din AppStore
1 mil download-uri de SDK, 100.00 developeri
Liderpepiatanavigarii web

Mobile Safari
Bazatpe layout engine-ulWebKit
Celmai rapid siperformant browser de dispozitivmobil

detectareabrowserului
HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3
Metode:

Shell script
JavaScript
PHP
CSS

Detectie cu Shell script
#!/bin/shif [ ! -z "$(echo $HTTP_USER_AGENT | grep iPhone)" ] ; then echo "Location: i/index.html"else echo "Location: index.html"fiexit 0

Detectie cu JavaScript si cu PHP
JS:
varagent=navigator.userAgent.toLowerCase();varis_iphone = ((agent.indexOf('iphone')!=-1);if (is_iphone) { // e iPhone }
PHP:
if (stristr($_SERVER['HTTP_USER_AGENT'], ‘iPhone’)) { // e iPhone }

Ecran mare, dar… mic

Solutii de afisare
ascundereabarei de adresa
fullscreen
content on demand
flip page
rotirea viewport-ului

ascundereabarei de adresa
window.onload = function() {
setTimeout(function(){ window.scrollTo(0, 1);}, 100);
}

fullscreen
<meta name="apple-mobile-web-app-capable" content="yes" />

content on demand

Flip page

Rotireaviewportului

Integrare cu functiile iPhone-ului
Calls
E-mail
SMS
Maps
Appstore
Youtube
iTunes

calls
<a href="tel:0700123456">suna</a>

email
<a href=“mailto:tudor@zupadupa.ro">mail</a>

sms
<a href=“sms:0700123456">mesaj</a>

Optimizarea site-ului tau pentru iPhone
latimeaviewport-ului
css specific
home screen icon
marimeafisierelorincluse
detectareaconexiunii
testeaza!

Latimea viewport-ului
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

CSS specific

Home screen icon
<link rel="apple-touch-icon" href="/home-icon.jpg“ />

Marimeafisierelorincluse
Nu folosi framework-uri de JavaScript!
Comprimaimaginile, nu le redomensiona din cod
Comprimafisierele multimedia, folosestedimensiunipotrivite
Creazaimagini cu dimenisunidiferitepentru web simobil

Detecteazaconexiuneautilizatorului
Afladaca user-ul e pe edge, hspdasauwifisiafiseaza content multimedia in functie de asta
Lasa user-ulsaisialeagaviteza de navigare

Testeaza!
FolosesteWeb Inspector siSimulatorsauaplicatii web
Creazascenarii de test

Promovare
Listare in webapps
Promovareinteractiva
Continutdiferit fata de versiunea de web
Continut partial

Monetizare

Bannere

Reclame in video
Continut premium

Piatamobila
Market share international
Market share in Romania
Viitorul

iPhone - Market share international

Mobile web - Market share in Romania
670.000 de vizitatori unici si 6,24 mil de afisari (site-uri de mobil)
iPhone e pe locul 2, dupa Nokia, cu 40% (site-uri de mobil)
iPhone e pe locul 1, in clasamentul general al traficului mobil pentru toate categoriile de site-uri

Viitorul
“Apple will topple Nokia as the smartphone market leader by 2013 (…)
Nokia currently leads the market with a 40% share. The study says that'll come down to 20% in four years, as Apple's market share rises to a third. (…)
2011 will be the year Apple matches Nokia's sales and ships about 77 million iPhones.”
www.businessinsider.com

getting started
http://developer.apple.com/safari
www.iwebkit.net
www.ajaxian.com
www.evotech.net