KIV/PIA 2012 Ing. Jan Tichava

Rozměr: px

Začít zobrazení ze stránky:

Download "KIV/PIA 2012 Ing. Jan Tichava"

Andrea Veselá
před 8 lety
Počet zobrazení:

1 KIV/PIA 2012 Ing. Jan Tichava

2 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 (

2011 September 2011 January 2012 May 2012 September

3 Obsah prezentace Přehled mobilních prohlížečů Omezení mobilní platformy Specifika a doporučení pro vývoj

5 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

Symbian Opera Mobile Nokia Mini Map Browser Platforma Apple Mobile Safari Opera Mini

6 Prohlížeče ve světě % 40 % 35 % Opera iphone + ipod Touch (bez ipad?) Android (včetně tabletů?) BlackBerry Nokia Ostatní 30 % 25 % 20 % 15 % 10 % 5 % 0 % Zdroj: [ ]

) BlackBerry Nokia Ostatní 30 % 25 % 20 % 15 % 10 % 5 % 0 % 2008-12 2009-03 2009-06

7 Opera Turbo

9 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í

ovládání prstem Využití moderních technologií

10 listopad Pokrytí 3G 2011

11 Omezení mobilní platformy Malý display a nízké rozlišení Display a jeho jemnost Omezené ovládání Pomalé připojení

12 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

13 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í

h{border-top:thin black solid;border-bottom:thin black solid;}.i,.j{background-color:black;}.k,.

15 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" " Vkládání obrázků <img src="dog.jpg" alt="my dog" width="320" height="240" />

DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.

16 Media Queries Stylování mobilních webových stránek Media Queries body { background-color: red; all and (min-width: 500px) { body { background-color: blue; } }

17 Media Queries Stylování mobilních webových stránek Media Queries body { background-color: red; all and (min-width: 500px) { body { background-color: blue; } }

18 JavaScript JavaScript AJAX Framework Náročnost na výpočetní výkon Zobrazování elementů v prohlížeči Opera Mini

19 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

0; user-scalable=0;" /> Detekce mobilního prohlížeče Detect Mobile

20 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

21 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

22 Odkazy na telefonní čísla Odkazy na telefonní čísla a posílání SMS <a href="tel: ">volat infolinku</a> <a href="sms: ?body=hello%20world">sms</a> Odkaz na uložení kontaktu <a href="wtai://wp/ap; ;novak">uložit</a>

23 První mobilní web Pokus omyl Základní stránka Zoomování Velikosti prvků na stránce Použitelné, ovladatelné Opera, Safari

24 Testování aplikace Fyzická zařízení Emulátory Windows Phone Windows Mobile Java ME Google Android Symbian iphone

25 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

26 Mobilní Portál ZČU HTC Touch Cruise, Opera Mobile 9.5

27 Použité zdroje Text diplomové práce Portál ZČU Univerzitní knihovna Ukázková aplikace Kontakt

28 Dotazy?

Podobné dokumenty

Responzivní web. Co je mobilní verze webové stránky?

Responzivní web. Co je mobilní verze webové stránky? Responzivní web Jan Sequens, Global Vision, a.s. Co je mobilní verze webové stránky? Dříve byly možnosti mobilních telefonů značně omezené (monochromatický display, paměť, procesor) a mobilní telefony