Specifika ovládání webových aplikací pro mobilní zařízení

Transkript

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
0G
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
•
Platforma Apple
• Internet Explorer Mobile
• Mobile Safari
• Opera Mobile
• Opera Mini
• Opera Mini
•
•
•
Platforma Android
Platforma Windows Phone
• Android Browser
• Internet Explorere Mobile
• Opera Mobile
Platforma Symbian
• Firefox For Mobile
• Opera Mobile
• Nokia Mini Map Browser
•
Platforma Java ME
• Opera Mini
Prohlížeče ve světě 2008 – 2012
45 %
Opera
iPhone + iPod Touch (bez iPad?)
40 %
Android (včetně tabletů?)
BlackBerry
35 %
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
•
•
•
•
Malý display a nízké rozlišení
Display a jeho jemnost
Omezené ovládání
Pomalé připojení
•
•
•
•
Pomalé připojení
•
•
•
•
Pomalé připojení
<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 xsmall 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>
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
Opera Mobile
•
•
•
•
•
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
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
• [email protected]
Dotazy?

Specifika ovládání webových aplikací pro mobilní zařízení

Transkript

Podobné dokumenty

Stáhnout

Innovator DLX

Povrch Asie - ZŠ Vsetín Rokytnice

lorem ipsum lorem

Deal Management manuál

CENÍK – KATALOG –naramekbionic.cz

Tvorba webových stránek

Multimédia a Web

Vektorový obrázek v SVG

Prezentace aplikace PowerPoint - Střední průmyslová škola na

Monitoring a diagnostika aplikací s Application Insights

Tvorba www stránek v HTML a CSS

Od autora ke ctenári pres web

INDIKACE VLASTNOSTI

Kaskádové styly

CSS – Cascading style sheet přehled vlastností selektory

lekce-02.

VY_52_INOVACE_120 _Smyslová soustava

Fórum OKDXF na Yahoo Groups

ZÁPOČTOVÁ PRÁCE z UIR

(130318OIS_5-hodina [režim kompatibility])

Úvod do XSLT 2.0

pozdní doba kamenná - Základní a mateřská škola A. Kučery 20