KIV/PIA 2012 Ing. Jan Tichava
Opera Mini Zobrazených stránek za měsíc 90 G 80 G 70 G 60 G 50 G 40 G 30 G 20 G 10 G 0 G January 2011 May 2011 September 2011 January 2012 May 2012 September 2012 State of the Mobile Web, 2012 (http://www.opera.com/smw/)
Obsah prezentace Přehled mobilních prohlížečů Omezení mobilní platformy Specifika a doporučení pro vývoj
Mobilní webové prohlížeče Platforma Windows Mobile Internet Explorer Mobile Opera Mobile Opera Mini Platforma Windows Phone Internet Explorere Mobile Platforma Symbian Opera Mobile Nokia Mini Map Browser Platforma Apple Mobile Safari Opera Mini Platforma Android Android Browser Opera Mobile Firefox For Mobile Platforma Java ME Opera Mini
Prohlížeče ve světě 2008 2012 45 % 40 % 35 % Opera iphone + ipod Touch (bez ipad?) Android (včetně tabletů?) BlackBerry Nokia Ostatní 30 % 25 % 20 % 15 % 10 % 5 % 0 % 2008-12 2009-03 2009-06 2009-09 2009-12 2010-03 2010-06 2010-09 2010-12 2011-03 2011-06 2011-09 2011-10 2012-01 2012-04 2012-07 2012-10 Zdroj: http://gs.statcounter.com [23.11.2012]
Opera Turbo
Požadavky mobilního webu Vhodné pro malý display Podpora co nejvíce prohlížečů a zařízení Pohodlné ovládání prstem Využití moderních technologií Nenáročné na přenesená data Tarifikace po kb Pomalé GPRS připojení
listopad 2011 http://client0.cellmaps.com/viewer.html?cov=1 Pokrytí 3G 2011
Omezení mobilní platformy Malý display a nízké rozlišení Display a jeho jemnost Omezené ovládání Pomalé připojení
Omezení mobilní platformy Malý display a nízké rozlišení Display a jeho jemnost Omezené ovládání Pomalé připojení
Omezení mobilní platformy Malý display a nízké rozlišení Display a jeho jemnost <html><head><style type="text/css">*{font-family:arial;}#a{width:900px;}#b{font:italic normal bold xx-large bold Courier New;}#c{width:200px;float:left;}#d{padding:0 1em 0 1em;width:600px;float:right;}.e{clear:both;}#f{font-weight:bold;}.g{fontstyle:italic;}.h{border-top:thin black solid;border-bottom:thin black solid;}.i,.j{background-color:black;}.k,.l{padding:2em;}#m{font:normal small-caps normal x- small normal Courier New;}</style></head><body><div id="a"><div id="b">header</div><div id="c"><ul id="f"><li>home</li><li>articles</li></ul><ul class="g"><li>user blogs</li><li>user galleries</li></ul><ul class="g"><li>admin blogs</li><li>admin galleries</li></ul></div><div id="d"><div class="h"><h1>article 0</h1><p>Lorem ipsum dolor...</p></div><div class="i"><img class="k" src="banner1.gif" alt="banner 1" /></div><div class="h"><h1>article 1</h1><p>Lorem ipsum dolor...</p></div><div class="j"><img class="l" src="banner2.gif" alt="banner 2" /></div><div class="h"><h1>article 2</h1><p>Lorem ipsum dolor...</p></div><div class="h"><h1>article 3</h1><p>Lorem ipsum dolor...</p></div></div><div class="e" /><div id="m">footer</div></div></body></html> Omezené ovládání Pomalé připojení
Technologie, DOCTYPE, obrázky Webové prohlížeče mnohdy podporují lépe nové technologie HTML 5 a CSS 3 Mobilní HTML dokument <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/dtd/xhtml-mobile12.dtd"> Vkládání obrázků <img src="dog.jpg" alt="my dog" width="320" height="240" />
Media Queries Stylování mobilních webových stránek Media Queries body { background-color: red; } @media all and (min-width: 500px) { body { background-color: blue; } }
Media Queries Stylování mobilních webových stránek Media Queries body { background-color: red; } @media all and (min-width: 500px) { body { background-color: blue; } }
JavaScript JavaScript AJAX Framework Náročnost na výpočetní výkon Zobrazování elementů v prohlížeči Opera Mini
Viewport, detekce mobilního prohlížeče Viewport <meta name="viewport" content="width=device-width; initial-scale=1.0; maximumscale=1.0; user-scalable=0;" /> Detekce mobilního prohlížeče Detect Mobile Browsers Wireless Universal Resource File Device Description Repository Simple API Device Atlas
Doporučení pro layout Důležité meta tagy Cache-Control Popisky prvků na stránce Výběr místo psaní Captcha a podobné systémy Nepoužívat Tabulkový layout a použití tabulek Široké tabulky, dlouhé combo boxy
Validátory, requesty, barvy, Validátory mobilních webových stránek Validátor XHTML Validátor CSS Validátor mobilního obsahu Requesty na server, přesměrování, obnovování Barvy a písmo
Odkazy na telefonní čísla Odkazy na telefonní čísla a posílání SMS <a href="tel:+420723123456">volat infolinku</a> <a href="sms:+420723123456?body=hello%20world">sms</a> Odkaz na uložení kontaktu <a href="wtai://wp/ap;+420723123456;novak">uložit</a>
První mobilní web Pokus omyl Základní stránka Zoomování Velikosti prvků na stránce Použitelné, ovladatelné Opera, Safari
Testování aplikace Fyzická zařízení Emulátory Windows Phone Windows Mobile Java ME Google Android Symbian iphone
Ukázková aplikace Jednoduchý WebMail Validní kód Využití doporučení Ukázka funkčnosti v prohlížečích Optimalizace pro různá zařízení Mobile Safari Opera Mobile
Mobilní Portál ZČU HTC Touch Cruise, Opera Mobile 9.5
Použité zdroje Text diplomové práce Portál ZČU Univerzitní knihovna http://dp.tichava.cz/dp.pdf Ukázková aplikace http://dp.tichava.cz/ Kontakt zcu@tichava.cz
Dotazy?