Projektowanie witryn

internetowych dla
urzdze mobilnych
Autorzy: Gail Frederick, Rajesh Lal
Tumaczenie: Mikoaj Szczepaniak
ISBN: 978-83-246-2729-5
Tytu oryginau: Beginning Smartphone Web Development:
Building Javascript, CSS, HTML and Ajax-Based
Applications for iPhone, Android, Palm Pre, Blackberry,
Windows Mobile and Nokia S60
Format: 158235, stron: 376
Poznaj najlepsze praktyki tworzenia mobilnych witryn internetowych
Jak budowa interaktywne witryny dla smartfonw?
Jak zwikszy uyteczno mobilnej witryny internetowej?
Jak zoptymalizowa serwer WWW pod ktem przegldarek mobilnych?
Internet mobilny to wyjtkowo ekscytujcy, ale i chaotyczny ekosystem, ktry podlega
gwatownym i trudnym do przewidzenia zmianom. Ten podrcznik pozwoli Ci nie tylko
przetrwa w tym fascynujcym i dziewiczym wiecie, ale skutecznie radzi sobie
z pojawiajcymi si w nim problemami ze skadni, semantyk i programowaniem.
Ksika, ktr trzymasz w rkach, to niezastpiony przewodnik po dungli mobilnego
Internetu. Pozwoli Ci oswoi wszelkie problemy, z ktrymi moesz spotka si jako
programista.
Ksika Projektowanie witryn internetowych dla urzdze mobilnych zawiera
szczegowe opisy standardw, najlepszych praktyk i technik projektowania, niezbdnych
do budowy interaktywnych stron WWW dla urzdze mobilnych. Korzystajc z tego
podrcznika, nauczysz si stosowa rozszerzenia dostpne dla zaawansowanych
przegldarek instalowanych w smartfonach, a take optymalizowa, sprawdza,
testowa oraz wdraa witryny mobilne w publicznym Internecie i specyficznym
ekosystemie mobilnym. Opanujesz niezbdne umiejtnoci i nabierzesz pewnoci siebie
potrzebnej do tworzenia przenonych aplikacji internetowych w niezwykym rodowisku
urzdze mobilnych.
Mobilna witryna internetowa
Mobilne arkusze stylw
Konfiguracja rodowiska
Skadnia mobilnych witryn internetowych
Rozpoznawanie urzdze i dostosowywanie treci
Model wytwarzania iteracyjnego
Wdraanie rozwiza w ekosystemie mobilnym
Optymalizacja kodu mobilnego jzyka znacznikw
Testowanie i wdraanie mobilnej witryny internetowej
Z tym podrcznikiem z atwoci oswoisz i uporzdkujesz chaos ekosystemu Internetu mobilnego

Spis treci

O autorach .............................................................................................. 11
O recenzentach ...................................................................................... 13
Podzikowania ....................................................................................... 15
Wprowadzenie ....................................................................................... 17

Cz I

Wytwarzanie mobilnych witryn internetowych

wprowadzenie

19

Rozdzia 1.

Wprowadzenie do wytwarzania mobilnych witryn internetowych ..... 21

Witryna mobilna kontra tradycyjna witryna internetowa .............................. 22
Mobilne jzyki znacznikw ................................................................................. 24
HTML i XHTML ............................................................................................ 25
XHTML Mobile Profile ................................................................................. 26
WML ................................................................................................................ 26
Pozostae mobilne jzyki znacznikw ......................................................... 27
HDML .............................................................................................................. 28
CHTML ............................................................................................................ 28
XHTML Basic ................................................................................................. 29
Mobilne jzyki skryptowe .................................................................................... 29
Mobilne arkusze stylw ....................................................................................... 30
Mobilne grupy branowe i organizacje standaryzacyjne ................................ 30
Ekosystem mobilnych witryn internetowych ................................................... 31
Przykady kodu ..................................................................................................... 32
Podsumowanie ...................................................................................................... 32

Rozdzia 2.

Konfiguracja rodowiska wytwarzania

mobilnych witryn internetowych ......................................................... 33
Zalecane rodowiska IDE .................................................................................... 34
Mobilne typy MIME ............................................................................................. 36
Konfiguracja serwera WWW .............................................................................. 37
Apache ............................................................................................................. 37
Microsoft IIS ................................................................................................... 39
nginx ................................................................................................................. 40

Spis treci

Mobilne przegldarki internetowe na komputerze biurkowym .................... 40

Firefox i dodatki mobilne .............................................................................. 41
Emulatory przegldarek mobilnych ............................................................. 50
Waciwe urzdzenia mobilne ...................................................................... 52
Pozostae narzdzia programistyczne ................................................................ 52
Porwnywanie plikw ................................................................................... 53
Kontrola wersji kodu rdowego ................................................................ 54
Podsumowanie ...................................................................................................... 57

Cz II

Skadnia mobilnych witryn internetowych

59

Rozdzia 3.

Mobilne jzyki znacznikw ................................................................... 61

Wybr mobilnego jzyka znacznikw ............................................................... 61
XHTML .................................................................................................................. 62
Dlaczego nie uy zwykego HTML-a? ....................................................... 63
HTML 5 ........................................................................................................... 64
XHTML-MP .......................................................................................................... 65
Przykad dokumentu w jzyku XHTML-MP ............................................. 65
Definicje DTD dla jzyka XHTML-MP ...................................................... 66
Elementy XHTML-a, ktre nie s obsugiwane w jzyku XHTML-MP ....... 66
Elementy jzyka XHTML-MP poprawione i utworzone specjalnie
z myl o witrynach mobilnych ................................................................. 68
Typowe bdy implementacji ........................................................................ 74
Arkusze stylw CSS dla urzdze mobilnych ................................................... 76
Standard CSS2 ................................................................................................. 76
Standardy Wireless CSS i CSS Mobile Profile ............................................ 77
Okrelanie zakresu obsugi standardu CSS przez urzdzenie mobilne ........ 82
Najlepsze praktyki zwizane ze stosowaniem
mobilnych arkuszy stylw CSS .................................................................. 83
Zewntrzne, wewntrzne i wstawiane arkusze stylw ............................... 84
Selektory mediw i arkusze stylw zalene od mediw ............................ 85
WML ...................................................................................................................... 86
Hierarchia znacznikw .................................................................................. 89
Znaki specjalne ............................................................................................... 90
Nagwek i metadane ..................................................................................... 91
Formatowanie tekstu ..................................................................................... 92
cza ................................................................................................................. 93
Obrazy .............................................................................................................. 98
Tabele ............................................................................................................... 99
Liczniki czasu ................................................................................................ 101
Zmienne ......................................................................................................... 102
Dane wejciowe uytkownika ..................................................................... 105
Pozostae cechy jzyka WML ...................................................................... 109
Podsumowanie .................................................................................................... 111

Spis treci

Rozdzia 4.

Rozpoznawanie urzdze i dostosowywanie treci ......................... 113

Rozpoznawanie urzdze .................................................................................. 114
Identyfikacja urzdze mobilnych
za pomoc nagwkw da protokou HTTP .................................... 114
Uzyskiwanie informacji o moliwociach urzdzenia
w bazie danych o tyche urzdzeniach ................................................... 116
Dostosowywanie treci ....................................................................................... 136
Tworzenie grup urzdze ............................................................................ 138
Wybr punktw dostosowywania .............................................................. 140
Tworzenie regu dostosowywania treci dla grup urzdze ................... 141
Implementacja dostosowywania treci ...................................................... 142
Dostosowywanie treci w wiecie mobilnych witryn internetowych ......... 146
Podsumowanie ..................................................................................................... 150

Rozdzia 5.

Dodawanie elementw interaktywnych

za pomoc skryptw JavaScriptu i elementw technologii AJAX ........151
Model wytwarzania iteracyjnego ...................................................................... 152
JavaScript w przegldarkach mobilnych ......................................................... 152
Standard ECMAScript Mobile Profile ....................................................... 153
Umieszczanie kodu JavaScriptu w dokumencie jzyka znacznikw .......... 154
Rnice w obsudze JavaScriptu w przegldarkach mobilnych .............. 159
Przykady stosowania mobilnego JavaScriptu .......................................... 161
Technologia AJAX w przegldarkach mobilnych .......................................... 166
Przykady stosowania technologii AJAX
w przegldarkach mobilnych ................................................................... 172
Testowanie obsugi technologii AJAX
przez mobilne przegldarki internetowe ................................................ 175
Podsumowanie .................................................................................................... 177

Cz III

Zaawansowane techniki wytwarzania

mobilnych witryn internetowych

Rozdzia 6.

179

Uyteczno mobilnej witryny internetowej .................................... 181

Najlepsze praktyki tworzenia uytecznych witryn mobilnych ..................... 182
Pierwszy przypadek Bank of America .................................................. 182
Drugi przypadek uycia CNN ............................................................... 184
Trzeci przypadek uycia Wikipedia ...................................................... 186
Czwarty przypadek uycia Flickr .......................................................... 188
Zestawienie ukadw mobilnych przegldarek internetowych .................... 190
Projektowanie mobilnych stron internetowych ............................................. 191
Elastyczny ukad referencyjny .................................................................... 192
Ukad standardowy ...................................................................................... 193
Informacyjne witryny internetowe ............................................................ 193
Witryny internetowe wyszukiwarek .......................................................... 194

Spis treci

Witryny internetowe usug ......................................................................... 195

Witryny internetowe portali ....................................................................... 196
Witryny internetowe udostpniania mediw ........................................... 197
Wskazwki projektowe ...................................................................................... 198
Wskazwki dotyczce wytwarzania mobilnych stron internetowych .. 199
Tworzenie stron internetowych trafiajcych
do moliwie wielu uytkownikw ........................................................... 201
Zapewnianie bogatszych dozna uytkownikom witryny mobilnej ..... 201
Podsumowanie .................................................................................................... 203
Rozdzia 7.

Wzbogacanie mobilnych stron internetowych

z myl o przegldarkach instalowanych w smartfonach ............... 205
Popularne techniki tworzenia witryn
dla przegldarek instalowanych w smartfonach .......................................... 206
Znacznik <meta> viewport ......................................................................... 206
Wykrywanie zmian orientacji ekranu w JavaScripcie ............................. 208
Silnik WebKit w mobilnych przegldarkach internetowych ........................ 213
Przegldarka Safari Mobile dla urzdzenia iPhone ....................................... 216
Przegldarka dla urzdze mobilnych z systemem Android ....................... 218
Przegldarka systemu webOS dla urzdzenia Palm Pre ................................ 219
Przegldarka dla urzdze BlackBerry ............................................................ 220
Przegldarka internetowa firmy Nokia instalowana
w smartfonach z systemem Series 60 ............................................................. 221
Internet Explorer Mobile dla systemu Windows Mobile .............................. 223
Przegldarki Opera Mini i Opera Mobile ........................................................ 224
Podsumowanie .................................................................................................... 227

Cz IV

Wdraanie rozwiza w ekosystemie mobilnym

Rozdzia 8.

Optymalizacja kodu mobilnego jzyka znacznikw ........................... 231

Techniki przetwarzania kocowego kodu jzyka znacznikw ..................... 232
Minimalizacja zasobw zewntrznych ...................................................... 232
Usuwanie znakw biaych, komentarzy i zbdnych znacznikw .......... 234
Dostosowywanie i transkodowanie obrazw ........................................... 242
Kodowanie wielu typw MIME w ramach dokumentu odpowiedzi .... 243
Optymalizacja serwera WWW pod ktem przegldarek mobilnych .......... 248
Kompresja odpowiedzi za pomoc algorytmu gzip lub deflate ............. 248
Dyrektywy buforowania w nagwkach odpowiedzi HTTP .................. 251
Podsumowanie .................................................................................................... 258

Rozdzia 9.

Sprawdzanie poprawnoci dokumentw

mobilnych jzykw znacznikw ......................................................... 259
Znaczenie poprawnoci znacznikw
w wiecie mobilnych witryn internetowych ................................................. 260
Czego nie mona przetestowa podczas weryfikacji? ....................................... 265

229

Spis treci

Publiczne usugi weryfikacji znacznikw ........................................................ 265

W3C Markup Validation Service ............................................................... 267
W3C CSS Validation Service ...................................................................... 268
W3C mobileOK Checker ............................................................................ 270
mobiReady ..................................................................................................... 272
Validome ....................................................................................................... 273
Podsumowanie .................................................................................................... 276
Rozdzia 10. Testowanie mobilnej witryny internetowej ...................................... 277
Metodyka testowania mobilnych witryn internetowych .............................. 278
Aspekty testowania przegldarek mobilnych ........................................... 280
Wybr urzdze mobilnych wykorzystywanych podczas testw ......... 281
Testowanie witryn przy uyciu waciwych urzdze ...................................... 282
Gromadzenie urzdze mobilnych ............................................................ 282
Programy dla programistw ....................................................................... 283
Testowanie w emulatorach urzdze mobilnych ........................................... 287
Testowanie w tradycyjnych przegldarkach ................................................... 288
Podsumowanie .................................................................................................... 290
Rozdzia 11. Wdraanie mobilnej witryny internetowej ....................................... 291
Kierowanie ruchu mobilnego do mobilnej witryny internetowej ............... 291
Standardowa domena i standardowe cieki do plikw
w internecie mobilnym ............................................................................. 292
Algorytmy przeczania da przegldarek mobilnych ........................ 294
Gotowe przeczniki mobilne ..................................................................... 297
Pozycjonowanie mobilne i przyciganie ruchu .............................................. 298
Mobilne wyszukiwarki internetowe i ich roboty ..................................... 298
Stosowanie relacji odsyaczy jako sposb poprawy
widocznoci witryny mobilnej ................................................................. 300
Mapy witryn mobilnych .............................................................................. 301
Pozycjonowanie mobilnych witryn internetowych ................................. 302
Praktyki pozycjonowania, o ktrych naley zapomnie ......................... 304
Podsumowanie .................................................................................................... 305
Rozdzia 12. Jak odnale si w ekosystemie mobilnym? ..................................... 307
Operatorzy, transkodery i serwery proxy... mj Boe! .................................. 307
Transkodery w publicznym internecie ...................................................... 310
Standaryzowanie zachowa transkoderw ............................................... 311
Programowanie defensywne w wiecie mobilnych witryn internetowych ....... 314
Deklarowanie dokumentu jzyka znacznikw
jako przyjaznego dla urzdze mobilnych ............................................. 315
Identyfikowanie da transkoderw ....................................................... 316
Podsumowanie .................................................................................................... 320
Rozdzia 13. Przyszo internetu mobilnego ............................................................ 321
Eksperci internetu mobilnego o przyszoci mobilnoci .............................. 322
Podsumowanie .................................................................................................... 334

10

Spis treci

Cz V

Dodatki

335

Dodatek A

Przykadowe wartoci nagwka User-Agent

stosowane przez urzdzenia mobilne ............................................... 337
Nagwki User-Agent stosowane przez urzdzenia mobilne ....................... 337
LG VX-9100 .................................................................................................. 337
Nokia 5310b XpressMusic ........................................................................... 338
SonyEricsson C905 ....................................................................................... 338
Motorola Droid ............................................................................................. 338
Motorola Cliq (MB200) ............................................................................... 338
Android G1 Developer Edition .................................................................. 339
Palm Pre ......................................................................................................... 339
Apple iPhone ................................................................................................. 339
BlackBerry Curve 8310 ................................................................................ 339
Jak przechwyci nagwek User-Agent
wysyany przez urzdzenie mobilne? ............................................................ 340

Dodatek B

Przykadowe nagwki da wysyanych

przez urzdzenia mobilne ................................................................... 341
Nagwki da wysyanych przez urzdzenia mobilne ............................... 341
LG VX-9100 .................................................................................................. 341
Nokia 5310b XpressMusic ........................................................................... 342
SonyEricsson C905 ....................................................................................... 342
Motorola Droid ............................................................................................. 342
Motorola Cliq (MB200) ............................................................................... 343
Android G1 Developer Edition .................................................................. 343
Palm Pre ......................................................................................................... 343
Apple iPhone ................................................................................................. 343
BlackBerry Curve 8310 ................................................................................ 344
Jak przechwytywa nagwki wysyane przez urzdzenie mobilne? ........... 344

Dodatek C

Sowniczek ............................................................................................ 345

Dodatek D

Studium przypadku: Testowanie pamici podrcznej

i wydajnoci przegldarki mobilnej ................................................... 353
Skorowidz ............................................................................................. 357

R OZDZIA

7
Wzbogacanie mobilnych
stron internetowych
z myl o przegldarkach
instalowanych w smartfonach

Wszystkie techniki tworzenia mobilnych witryn internetowych omwione w pozostaych rozdziaach tej ksiki mona z powodzeniem stosowa w rnych urzdzeniach i przegldarkach mobilnych. Na podstawie bazy danych o urzdzeniach
i w drodze odpowiednich testw programista witryny mobilnej moe urozmaici
swoje strony, dodajc zaawansowane funkcje przeznaczone tylko dla najnowszych,
najbardziej zaawansowanych przegldarek. Tak rozbudowane strony mona nastpnie dostosowa do moliwoci prostszych przegldarek (instalowanych w taszych
telefonach). Warto przy tym zadba o wybr waciwej wersji witryny, zalenej od
uywanego urzdzenia mobilnego.
Rozdzia ten powicono w caoci przegldarkom instalowanym w smartfonach.
Moesz wic na moment zapomnie o przenonoci i zapewnianiu zgodnoci z wieloma platformami mobilnymi. Tym razem skoncentrujemy si na moliwociach
najbardziej rozbudowanych przegldarek mobilnych i najpopularniejszych obecnie
smartfonw. Na tej podstawie opracujemy atrakcyjne aplikacje wykorzystujce potencja tych zaawansowanych przegldarek. Tego rozdziau nie naley jednak traktowa jako wyczerpujcej listy funkcji przegldarek oferowanych przez poszczeglne
smartfony. Kada z tych przegldarek zasuguje na osobn ksik! Tu dowiesz si,
jakie s najwaniejsze funkcje i ograniczenia poszczeglnych przegldarek oraz gdzie
szuka podrcznikw dla programistw i dokumentacji producentw.
Wszystkie przegldarki mobilne tutaj opisane obsuguj jzyk XHTML, standard
CSS2 i skrypty jzyka JavaScript. Wikszo dodatkowo obsuguje technologi AJAX.
Oznacza to, e przegldarki instalowane w smartfonach stanowi efektywn platform dla dynamicznych aplikacji internetu mobilnego. Nasz analiz rozpoczniemy od przegldu typowych funkcji wsplnych dla wielu przegldarek smartfonw. Zaraz potem przystpimy do omawiania funkcji waciwych przegldarkom

206 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

instalowanym w telefonach iPhone, w systemie Android, w systemie webOS, w telefonach
BlackBerry, w telefonach Nokia Series 60 i w urzdzeniach z systemem Windows Mobile.
Zakoczymy ten rozdzia omwieniem przegldarki Opera Mobile, czyli przegldarki dla
smartfonw opracowanej przez niezalenego producenta (take w zestawieniu z inn przegldark tego samego pochodzenia, czyli Oper Mini).

Popularne techniki tworzenia witryn

dla przegldarek instalowanych w smartfonach
Przegldarki instalowane w smartfonach stosuj takie same techniki przetwarzania i wywietlania dokumentw jzykw znacznikw. Przykadowo znacznik <meta> viewport kontroluje
logiczne wymiary i skalowanie obszaru wywietlania w przegldarce. Zdarzenia onresize
i onorientationchange jzyka JavaScript przechwytuj zmiany orientacji ekranu urzdzenia
mobilnego (np. wskutek obrcenia z trybu poziomego do trybu pionowego). Wanie JavaScriptu
mona uy do okrelenia nowej orientacji ekranu po zmianie.
Oprcz dokumentacji technicznej udostpnianej przez producentw urzdze i przegldarek,
warto zapozna si take z doskonaymi tabelami obsugi zdarze i obiektw JavaScriptu przez
urzdzenia mobilne na blogu QuirksMode Petera-Paula Kocha pod adresem www.quirksmode.
org/m/table.html.

Znacznik <meta> viewport

Wiele przegldarek instalowanych w smartfonach skaluje strony internetowe, tak aby zajmoway
ca szeroko obszaru wywietlania. Takie rozwizanie umoliwia prezentowanie dokumentw
zoptymalizowanych pod ktem tradycyjnych przegldarek internetowych. Przegldarki umoliwiaj uytkownikom przyblianie i oddalanie skalowanych stron internetowych. Przykadowo
przegldarka Opera Mobile stosuje obszar wywietlania o domylnej szerokoci 850 pikseli, natomiast w urzdzeniach iPhone domylna szeroko obejmuje 980 pikseli. Znacznik <meta>
viewport umoliwia programicie mobilnej strony internetowej okrelenie najlepszego rozmiaru obszaru wywietlania i tym samym wymuszenie skalowania stosowanych limitw dla
danego dokumentu. Opisywany znacznik <meta> decyduje o logicznej szerokoci, logicznej wysokoci i pocztkowym wspczynniku skalowania okna przegldarki (lub obszaru wywietlania)
w przegldarkach instalowanych w telefonach iPhone i BlackBerry oraz w pozostaych przegldarkach mobilnych, w tym w przegldarce Opera Mini. W niektrych smartfonach znacznik <meta> viewport dodatkowo okrela, czy uytkownik moe skalowa dan stron internetow i jeli tak jakie s maksymalne i minimalne wspczynniki skalowania. Sama
obecno znacznika <meta> viewport okrela, e dany dokument jzyka znacznikw zoptymalizowano z myl o urzdzeniach mobilnych.
Wartoci atrybutu content znacznika <meta> viewport powinna by lista oddzielonych
przecinkami par dyrektywa-warto. Poniej przedstawiono znacznik <meta> wymieniajcy
wszystkie te dyrektywy wraz z przykadowymi wartociami:
<meta name="viewport" content="width=240, height=320, user-scalable=yes,
initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

Dyrektywy width i height okrelaj odpowiednio logiczn szeroko i wysoko obszaru

wywietlania. Dyrektywom tym naley przypisa albo warto numeryczn reprezentujc
szeroko obszaru wywietlania (w pikselach), albo specjalny token. Dyrektywie width mona

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

207

przypisa token device-width, ktry okrela, e szeroko obszaru wywietlania powinna

odpowiada szerokoci ekranu danego urzdzenia. Podobnie dyrektywie height mona przypisa token device-height okrelajcy, e wysoko obszaru wywietlania powinna odpowiada
wysokoci ekranu danego urzdzenia
Dyrektywa user-scalable ustala, czy dany uytkownik moe przyblia i oddala obszar wywietlania, skalujc widok strony internetowej. Warto yes umoliwia uytkownikom przyblianie strony, natomiast warto no zapobiega przyblianiu i skalowaniu strony przez uytkownika. Programista mobilnej witryny internetowej moe zapobiec moliwoci skalowania
stron przez uytkownika, przypisujc tej dyrektywie warto no takie rozwizanie jest uzasadnione dla stron zoptymalizowanych pod ktem urzdze mobilnych, ktre nie wymagaj
przybliania i oddalania obrazw.
Dyrektywa initial-scale ustawia pocztkow warto wspczynnika, tzw. mnonika skalowania (przyblienia) dla danej strony internetowej. Domylna warto pocztkowa zaley od
przegldarki stosowanej w smartfonie. W wikszoci przypadkw warto pocztkow ustawia
si w taki sposb, aby caa strona miecia si w obszarze wywietlania. Warto 1.0 powoduje
wywietlenie dokumentu bez skalowania.
Dyrektywy maximum-scale i minimum-scale okrelaj odpowiednio maksymaln i minimaln
warto wspczynnika skalowania (przybliania) ustawianego przez uytkownika. Wartoci
przypisywane tym dyrektywom musz mieci si w przedziale od 0.25 do 10.0. Podobnie
jak w przypadku dyrektywy initial-scale, wartoci tych dyrektyw dotycz wspczynnika
(mnonikw) skalowania stosowanego dla treci w obszarze wywietlania.
Niemal wszystkie przegldarki instalowane w smartfonach obsuguj dyrektywy width i userscalable znacznika <meta> viewport. Warto zwrci uwag na brak obsugi dyrektywy
user-scalable przez przegldark mobiln Opera Mobile twrcy tej przegldarki uznali, e
uytkownicy mobilni zawsze powinni mie moliwo skalowania stron internetowych.
Wiele przegldarek instalowanych w smartfonach i korzystajcych z silnika WebKit (wicej
informacji na ten temat mona znale w podrozdziale Silnik WebKit w mobilnych przegldarkach internetowych) obsuguje wszystkie dyrektywy znacznika <meta> nazwanego
viewport. Poniewa w znaczniku <meta> programista deklaruje rozmiar i sposb skalowania
obszaru wywietlania, przegldarki, ktre nie obsuguj tych dyrektyw, powinny bezpiecznie
i bez angaowania uytkownika (np. poprzez wywietlanie komunikatw o bdach) ignorowa
odpowiednie konstrukcje.
Poniszy przykad znacznika <meta> wymusza na przegldarce mobilnej ustawienie szerokoci
obszaru wywietlania rwnej szerokoci ekranu smartfonu (niezalenie od wartoci tego parametru) oraz wyczenie moliwoci skalowania dokumentu przez uytkownika. Znacznik
<meta> w tej formie jest do czsto stosowany w kodzie stron optymalizowanych pod ktem
przegldarek mobilnych, poniewa umoliwia uytkownikowi przegldanie i przewijanie treci
strony bez moliwoci jej przybliania i oddalania:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=no" />

Na rysunku 7.1 pokazano przykad mobilnej strony internetowej z listingu 9.2 (z rozdziau 9.)
w wersjach z powyszym znacznikiem <meta> viewport oraz bez tego znacznika wywietlonych
na ekranie smartfonu Palm Pre. Warto zwrci uwag na sposb, w jaki znacznik <meta>
viewport wpywa na skalowanie i pocztkow uyteczno tej strony. Wyczenie moliwoci
przewijania i ustawienie odpowiedniej szerokoci obszaru wywietlania w praktyce wyklucza
konieczno przybliania widoku treci strony.

208 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

Rysunek 7.1. Mobilne strony internetowe odpowiednio ze znacznikiem <meta> viewport

i bez tego znacznika wywietlone na ekranie telefonu Palm Pre

Wykrywanie zmian orientacji ekranu w JavaScripcie

Wiele smartfonw aktualizuje orientacj ekranu w odpowiedzi na zmian fizycznej orientacji
urzdzenia przez uytkownika. Jeli np. uytkownik obraca smartfon z orientacji poziomej do
orientacji pionowej, urzdzenie reaguje odpowiedni zmian orientacji ekranu. Przegldarki
smartfonw informuj o tym fakcie, korzystajc ze zdarze onresize lub onorientationchange
obiektu window JavaScriptu (na podstawie tych zdarze programista mobilnej witryny internetowej moe waciwie reagowa na zmiany orientacji).
Przegldarki instalowane w smartfonach obsuguj albo jedno z tych zdarze, albo oba zdarzenia,
zatem niezwykle wane jest przeprowadzenie testw witryny w samych urzdzeniach, aby wybra
waciwe zdarzenie do obsuenia w docelowej przegldarce mobilnej. Przegldarka telefonw iPhone obsuguje oba zdarzenia, jednak wikszo programistw mobilnych witryn
internetowych decyduje si na wykrywanie zmian orientacji tylko na podstawie zdarzenia
onorientationchange. Urzdzenia BlackBerry obsuguj, co prawda, zdarzenie onresize
obiektu document, jednak niewiele spord tych urzdze oferuje moliwo zmiany orientacji
ekranu.
W kodzie funkcji obsugujcej zdarzenie zmiany orientacji programista moe uy jednej z dwch
metod do uzyskania biecych wymiarw ekranu i biecej orientacji urzdzenia. Programici
witryny dla urzdze iPhone maj do dyspozycji wbudowan waciwo cakowitoliczbow
JavaScriptu nazwan window.orientation. Warto tej waciwoci reprezentuje biec orientacj przegldarki. W tabeli 7.1 opisano moliwe wartoci waciwoci window.orientation
wraz z ich znaczeniem.
W poniszym przykadzie kodu jzyka JavaScript wykorzystano wbudowan waciwo
window.orientation do okrelenia, czy dany smartfon jest trzymany w orientacji poziomej,
czy pionowej.

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

209

Tabela 7.1. Wartoci waciwoci window.orientation jzyka JavaScript dla telefonu iPhone
Warto
waciwoci

Opis

-90

Urzdzenie pracuje w trybie poziomym, gdzie ekran obrcono zgodnie

z kierunkiem ruchu wskazwek zegara (przyciski urzdzenia znajduj si
po lewej stronie).

Urzdzenie pracuje w trybie pionowym (0 jest domyln wartoci tej waciwoci).

90

Urzdzenie pracuje w trybie poziomym, gdzie ekran obrcono w kierunku

przeciwnym do ruchu wskazwek zegara (przyciski urzdzenia znajduj si
po prawej stronie).

180

Urzdzenie pracuje w trybie pionowym, jednak ekran obrcono do gry nogami.

(Telefony iPhone na razie nie obsuguj tej opcji, jednak niewykluczone,
e przysze aktualizacje firmwareu wprowadz odpowiedni mechanizm).

switch (window.orientation) {
case -90:

// Orientacja pozioma po obrceniu zgodnie z kierunkiem ruchu wskazwek zegara.

break;
case 0:

// Orientacja pionowa.
break;
case 90:

// Orientacja pozioma po obrceniu w kierunku przeciwnym do ruchu wskazwek zegara.

break;
}

Moesz te wykorzysta wbudowane waciwoci screen.width i screen.height jzyka JavaScript i okreli orientacj ekranu na podstawie prostych oblicze matematycznych. Jeli szeroko ekranu jest wiksza od jego wysokoci, mamy do czynienia z orientacj poziom. W przeciwnym razie urzdzenie dziaa w orientacji pionowej. W poniszym fragmencie kodu
JavaScriptu okrelono orientacj urzdzenia wanie na podstawie wbudowanych waciwoci
JavaScriptu:
var width = parseInt(screen.width);
var height = parseInt(screen.height);
if (width > height) {

// Orientacja pozioma.
}
else {

// Orientacja pionowa.
}

W powyszym przykadzie uylimy funkcji wbudowanej parseInt() do zapewnienia, e wartoci reprezentujce szeroko i wysoko ekranu s liczbami cakowitymi w ten sposb
unikamy bdw w implementacjach JavaScriptu, w ktrych obie te waciwoci maj posta
acuchw.

210 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

W niektrych przypadkach przegldarka mobilna (inna ni przegldarki instalowane w smartfonach) moe nie zaktualizowa wartoci waciwoci screen.width i screen.height w reakcji
na zmian orientacji urzdzenia. Przeciwnie, wymienione waciwoci zachowuj wartoci dla
orientacji pionowej. Podobne zachowanie nie wystpuje, co prawda, w smartfonach, jednak
zdarza si w penowartociowych przegldarkach internetowych instalowanych w popularnych
urzdzeniach mobilnych. W tej sytuacji niezwykle wane jest przeprowadzenie testw samych
urzdze, aby wyeliminowa wpyw tego bdu na dziaanie naszej aplikacji internetu mobilnego.
W listingu 7.1 przedstawiono przykad dokumentu mobilnej witryny internetowej zgodnego
z urzdzeniem iPhone. Strona w tej formie obsuguje zdarzenie onorientationchange
i na jego podstawie wykrywa zmiany orientacji urzdzenia. Funkcja obsugujca to zdarzenie
przekazuje informacje o biecej orientacji za porednictwem waciwoci window.orientation.
Listing 7.1. Obsuga zmian orientacji za pomoc zdarzenia onorientationchange
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Listing 7.1: Zmiany orientacji reprezentowane przez onorientationchange</title>
<style type="text/css">
#content {
padding: 10px;
margin: 10px;
border-width: 1px;
border-style: solid;
border-color: #333333;
}
</style>
<script type="text/javascript">

// Przechwytuje zdarzenie zmiany orientacji:

function handleOrientationChange() {

// Okrela biec orientacj:

var orientation = "unknown";
switch (window.orientation){
case -90:
orientation = "Pozioma (zgodnie z kierunkiem ruchu wskazwek zegara)";
break;
case 0:
orientation = "Pionowa";
break;
case 90:
orientation = "Pozioma (w kierunku przeciwnym do ruchu wskazwek zegara)";
break;
}

// Dodaje biece wymiary ekranu:

var screenSize = screen.width + " x " + screen.height;

// Aktualizuje informacje o orientacji dla uytkownika:

document.getElementById("content").innerHTML = orientation + ", "
+ screenSize;

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

211

}
</script>
</head>

<!-- W tym przypadku generujemy zdarzenie onorientationchange take przy okazji adowania dokumentu,
aby wywietli na ekranie informacje o domylnej orientacji urzdzenia mobilnego. -->
<body onload="handleOrientationChange();"
onorientationchange="handleOrientationChange();">
<h1>Zmiany orientacji</h1>
<p>Zmie orientacj swojego urzdzenia mobilnego. Sprawd w poniszym polu,
jaka jest bieca orientacja tego urzdzenia.</p>
<div id="content"></div>
</body>
</html>

W listingu 7.1 funkcja handleOrientationChange jzyka JavaScript odpowiada za obsug

zdarzenia onorientationchange. Funkcja oblicza orientacj na podstawie waciwoci window.
orientation. Uytkownik jest informowany o biecej orientacji w wyniku aktualizacji
waciwoci innerHTML elementu div z identyfikatorem content. Warto otworzy dokument
z listingu 7.1 w przegldarce zainstalowanej w smartfonie, aby sprawdzi, jak zmiany orientacji
tego urzdzenia wpywaj na tre strony.
Na rysunku 7.2 pokazano dokument z listingu 7.1 wywietlony w emulatorze smartfonu iPhone
zarwno w orientacji pionowej, jak i poziomej. Warto zwrci uwag na tekst w ramach elementu div, ktremu przypisano identyfikator content. Okazuje si, e do okrelania orientacji
ekranu nie musimy uywa jego wymiarw. Poniewa iPhone obsuguje waciwo window.
orientation, zatem orientacj urzdzenia moemy okreli bez odwoywania si do wartoci
waciwoci screen.width i screen.height.

Rysunek 7.2. Dokument z listingu 7.1 wywietlony w emulatorze telefonu iPhone w orientacji
pionowej i poziomej

W listingu 7.2 przedstawiono przykad dokumentu mobilnej witryny internetowej wykrywajcego i obsugujcego zmiany orientacji urzdzenia mobilnego na podstawie zdarzenia onresize.
Funkcja obsugujca to zdarzenie wykorzystuje wartoci waciwoci screen.width i screen.
height do wyznaczania i wywietlania biecej orientacji urzdzenia.

212 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

Listing 7.2. Obsuga zmian orientacji za pomoc zdarzenia onresize
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Listing 7.2: Zmiany orientacji reprezentowane przez onresize</title>
<style type="text/css">
#content {
padding: 10px;
margin: 10px;
border-width: 1px;
border-style: solid;
border-color: #333333;
}
</style>
<script type="text/javascript">

// Przechwytuje zdarzenie zmiany orientacji:

function handleResize() {

// Okrela biec orientacj:

var orientation = "unknown";
var width = parseInt(screen.width);
var height = parseInt(screen.height);
if (width > height) {
orientation = "Landscape";
}
else {
orientation = "Portrait";
}

// Dodaje biece wymiary ekranu:

var screenSize = screen.width + " x " + screen.height;

// Aktualizuje informacje o orientacji dla uytkownika:

document.getElementById("content").innerHTML = orientation + ", "
+ screenSize;
}
</script>
</head>

<!-- W tym przypadku generujemy zdarzenie onresize take przy okazji adowania dokumentu,
aby wywietli na ekranie informacje o domylnej orientacji urzdzenia mobilnego. -->
<body onload="handleResize();" onresize="handleResize();">
<h1>Zmiany orientacji</h1>
<p>Zmie orientacj swojego urzdzenia mobilnego. Sprawd w poniszym polu,
jaka jest bieca orientacja tego urzdzenia.</p>
<div id="content"></div>
</body>
</html>

Funkcja handleResize jzyka JavaScript w kodzie z listingu 7.2 odpowiada za obsug zdarzenia
onresize. Funkcja ta wyznacza orientacj na podstawie wartoci waciwoci screen.width
i screen.height. Podobnie jak w przypadku dokumentu z listingu 7.1, o biecej orientacji

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

213

urzdzenia informujemy uytkownika, aktualizujc element waciwoci innerHTML elementu

div z identyfikatorem content. Warto otworzy dokument z listingu 7.2 w przegldarce zainstalowanej w smartfonie, aby sprawdzi, jak zmiany orientacji tego urzdzenia wpywaj na
tre strony.
Na rysunku 7.3 pokazano dokument z listingu 7.2 wywietlony w emulatorze systemu Android
zarwno w orientacji pionowej, jak i w orientacji poziomej. Warto zwrci uwag na zmieniajc
si zawarto elementu div, ktremu przypisano identyfikator content. Tym razem orientacj
urzdzenia okrelamy na podstawie wartoci waciwoci screen.width i screen.height.

Rysunek 7.3. Dokument z listingu 7.2 wywietlony w emulatorze systemu Android

w orientacji pionowej i poziomej

Silnik WebKit w mobilnych

przegldarkach internetowych
WebKit to silnik zarzdzania ukadem i wywietlania dokumentw wykorzystywany w przegldarkach internetowych. WebKit stosuje si w przegldarkach, w ktrych zgodno z rygorystycznymi standardami jest waniejsza od wydajnoci procesu wizualizacji stron. Silnik WebKit
w oryginalnej formie zaimplementowano w jzyku C++, jednak z czasem przeniesiono go do
wielu rnych frameworkw programistycznych stosowanych zarwno w tradycyjnych rodowiskach biurkowych, jak i w rodowiskach mobilnych.
Firma Apple opracowaa wasny, oryginalny silnik WebKit dla tradycyjnej przegldarki internetowej Safari w wersji dla systemu Mac OS X. W tym wydaniu silnika WebKit wykorzystano
i usprawniono komponenty jzykw HTML i JavaScript zaczerpnite z projektu open-source
KDE. W 2005 roku firma Apple udostpnia ten framework w trybie open-source i dopucia
programistw do zasobu systemu kontroli wersji tego projektu. Od tamtego czasu za rozwj silnika WebKit odpowiada WebKit Open Source Project (http://webkit.org/). We wspomnianym
projekcie moe uczestniczy kady zainteresowany programista (take Ty!). Warto odwiedzi
stron http://trac.webkit.org/timeline, gdzie na bieco s umieszczane wpisy o zmianach w kodzie
rdowym. Programici zaangaowani w prace nad przegldarkami internetowymi takich firm
jak Apple, Google, Nokia czy Palm niemal codziennie wprowadzaj cenne poprawki w kodzie
silnika WebKit.

214 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

Silnik przegldarek WebKit skada si z dwch gwnych bibliotek: WebCore i JavaScript Core.
Obie biblioteki cznie kontroluj procesy wizualizowania strony internetowej i zarzdzania
funkcjonowaniem elementw interaktywnych po stronie klienta. Silnik WebKit obsuguje
wymienione niej standardy internetowe.

Znaczniki: HTML 4.01, XHTML 1.0 oraz pewne elementy standardu HTML 5.
Style: CSS 2.1 i pewne elementy standardu CSS3.
Skrypty: JavaScript 1.8, AJAX oraz DOM Level 1, 2 i 3.

Z silnika wywietlania dokumentw WebKit korzystaj tradycyjne przegldarki internetowe

Apple Safari i Google Chrome. Ten sam silnik cieszy si take spor popularnoci wrd twrcw przegldarek opracowywanych z myl o smartfonach przede wszystkim ze wzgldu na
obsug wymienionych powyej jzykw znacznikw, standardw arkuszy stylw i jzykw
skryptowych. Na bazie technologii WebKit zaimplementowano przegldarki dla takich systemw
jak iPhone, Android, webOS czy Nokia Series 60.
Po lekturze wielu rozdziaw, w ktrych nieustannie wskazywano na pogbiajce si rnice
dzielce poszczeglne urzdzenia i przegldarki mobilne, moesz wreszcie rozkoszowa si
perspektyw powstania jednej, spjnej implementacji silnika WebKit w przegldarkach instalowanych w smartfonach. Okazuje si jednak, e producenci mobilnych przegldarek internetowych mog korzysta z silnika wywietlania dokumentw WebKit i jednoczenie wprowadza w tym silniku zmiany gwarantujce odpowiedni wydajno w urzdzeniu mobilnym
z ograniczonymi zasobami (smartfony wci nie dorwnuj moc obliczeniow tradycyjnym
komputerom). Wanie dlatego implementacje silnika WebKit wystpuj w rnych odmianach.
Peter-Paul Koch, autor popularnego bloga QuirksMode (www.quirksmode.org), przetestowa
19 implementacji silnika WebKit (w tym 10 implementacji dla przegldarek instalowanych
w smartfonach) i odkry nieznaczne rnice dzielce zakres obsugiwanych elementw standardw CSS i JavaScript. Opracowan przez Kocha tabel porwnawcz tych implementacji
mona znale na stronie http://www.quirksmode.org/webkit.html. Wniosek? Wiele przegldarek
instalowanych w smartfonach korzysta z silnika WebKit, zapewniajc programistom witryn
mobilnych niemal w peni spjn platform dla bogatych aplikacji internetowych. Jak zawsze w takich przypadkach, naley testowa tworzone aplikacje w samych urzdzeniach mobilnych, aby w ten sposb weryfikowa zgodno na poziomie skadni i wydajno wywietlania dokumentw (wicej informacji na temat mobilnych aplikacji internetowych mona
znale w rozdziale 10.).
Silnik WebKit wprowadza wiele rozszerze standardu CSS, aby umoliwi stosowanie w oknie
przegldarki stylw z zaawansowanymi efektami wizualnymi. Cz waciwoci arkuszy stylw
CSS w silniku WebKit wyprzedza rozwizania, ktre zostan wprowadzone dopiero w nadchodzcych wydaniach tego standardu. W tabeli 7.2 podsumowano kilka najczciej uywanych
rozszerze standardu CSS w ramach silnika WebKit. Nie wszystkie te rozszerzenia s implementowane we wszystkich przegldarkach mobilnych z silnikiem WebKit, ale wszystkie
rozszerzenia wymienione i opisane w tabeli 7.2 s obsugiwane przez przegldark Safari Mobile instalowan w urzdzeniu iPhone.
W listingu 3.7 podajemy przykad dokumentu mobilnej witryny internetowej wykorzystujcego kilka rozszerze standardu CSS opisanych w tabeli 7.2. Warto otworzy ten dokument
w jednej z mobilnych przegldarek internetowych zbudowanych na bazie silnika WebKit.

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

215

Tabela 7.2. Wybrane rozszerzenia standardu CSS w silniku WebKit

Nazwa waciwoci

Warto waciwoci

Opis

-webkit-background-size

Jedna lub dwie wartoci

cakowitoliczbowe (w pikselach)

Ustawia rozmiar obrazu ta.

-webkit-border-radius

Warto cakowitoliczbowa
(w pikselach)

Okrela promie zaokrglonego

naronika elementu prostokta.

-webkit-box-shadow

Dwie szerokoci cienia

(w pikselach) oraz warto koloru

Okrela rozmiar cienia

rzucanego przez dany obraz.

-webkit-transform

Jedna z wielu funkcji

przeksztace arkusza stylw CSS

Stosuje przeksztacenie
wizualne dla danego elementu
(polegajce na zmianie skali,
obrocie, przesuniciu itp.).

-webkit-text-sizeadjust

Warto procentowa

Zmienia skal tekstu o podan

warto procentow, aby
zwikszy lub zmniejszy
rozmiar tekstu.

Listing 7.3. Dokument mobilnej witryny internetowej korzystajcy z rozszerze standardu CSS
obsugiwanych przez silnik WebKit
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Listing 7.3: Rozszerzenia CSS silnika WebKit</title>
<style type="text/css">
#content {
width: 89px;
height: 89px;
padding: 10px;
margin: 10px;
border: 2px solid #333;
-webkit-border-radius: 5px;
-webkit-transform: rotate(15deg);
}
#tulips {
width: 79px;
height: 79px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Rozszerzenia CSS silnika WebKit</h1>
<div id="content"><img id="tulips" src="tulips.jpg" /></div>
</body>
</html>

216 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

Na rysunku 7.4 pokazano zrzut ekranu ilustrujcy dokument mobilnej witryny internetowej
z listingu 7.3 wywietlony w emulatorach urzdzenia Palm Pre i systemu Android. Warto zwrci
uwag na sposb, w jaki rozszerzenia standardu CSS oferowane przez silnik WebKit wzbogacaj
doznania uytkownikw mobilnych korzystajcych ze smartfonw (w tym przypadku poprzez
zaokrglenie naronikw obramowania elementu div i obrcenie obrazu tulipana).

Rysunek 7.4. Dokument z listingu 7.3 otwarty w emulatorach urzdzenia Palm Pre i systemu Android

Na rysunku 7.5 pokazano dokument mobilnej witryny internetowej z listingu 7.3 wywietlony
w maym oknie przegldarki Opera Mobile, ktra nie obsuguje rozszerze CSS silnika WebKit.
Jak wida, nasza strona internetowa prawidowo dostosowuje si do tych warunkw. Poniewa
rozszerzenia waciwe tylko silnikowi WebKit wyodrbniono w arkuszu stylw, przegldarka
mobilna po prostu ignoruje nieznane style.

Rysunek 7.5. Dokument z listingu 7.3 otwarty w maym oknie przegldarki Opera Mobile

Przegldarka Safari Mobile dla urzdzenia iPhone

Domyln przegldark internetow instalowan w telefonach iPhone jest Safari Mobile. Firma
Apple synie z do niechtnego wdraania standardw internetu mobilnego w oprogramowaniu swojego smartfonu i przekonuje, e jej przegldarka (w przeciwiestwie do produktw
konkurencji) obsuguje wycznie standardy znane z tradycyjnego, biurkowego internetu.
Przegldarka Safari Mobile rzeczywicie nie wywietla dokumentw opracowanych w starszym
jzyku znacznikw WML, ale doskonale radzi sobie z prezentowaniem witryn mobilnych napisanych przy uyciu nowszych jzykw. To o tyle naturalne, e przegldarka Safari Mobile korzysta z tego samego silnika WebKit, ktry wykorzystano w implementacji biurkowej wersji
przegldarki Safari firmy Apple.

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

217

Serwis iPhone Dev Center (http://developer.apple.com/iphone/) zawiera mnstwo informacji na

temat standardw internetowych, najlepszych praktyk i technik wytwarzania mobilnych witryn
internetowych. Peny dostp do dokumentacji programistycznej oferowanej w tym serwisie
wymaga od uytkownika darmowej rejestracji. Waciciele komputerw z systemem Mac OS X
mog dodatkowo pobra i zainstalowa pakiet iPhone SDK wraz z emulatorem, ktry symuluje
dziaanie przegldarki Safari Mobile. Bodaj najcenniejszym obszarem serwisu iPhone Dev Center
jest sekcja dokumentacji programistycznej, ktra w zaoeniu ma uatwia programistom
lepsze rozumienie struktury, elementw uytecznoci i technologii zastosowanych w smartfonie
iPhone.
Z perspektywy programistw mobilnych witryn internetowych dla telefonu iPhone zdecydowanie najwaniejszym dokumentem jest Safari Web Content Guide (http://developer.apple.com/
safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/
Introduction.html); dokument jest dostpny w sekcji iPhone OS Reference Library serwisu iPhone
Dev Center. Wspomniany dokument uczy, jak projektowa i tworzy witryny internetowe pod
ktem telefonw iPhone i rodowiska przegldarki instalowanego w tych urzdzeniach. Z dokumentu Safari Web Content Guide mona si dowiedzie np. tego, e w telefonach iPhone
instaluje si pami w iloci wystarczajcej do obsugi nastpujcych rozmiarw zasobw internetowych.

Obrazy w formatach GIF, PNG i TIFF mog zajmowa maksymalnie po 3 MB.

Obrazy w formacie JPEG mog zajmowa maksymalnie po 32 MB.
Pliki jzykw JavaScript i HTML oraz arkuszy stylw CSS nie mog by wiksze
ni 10 MB!
Skrypt jzyka JavaScript moe by wykonywany przez maksymalnie dziesi sekund
(po tym czasie jest przerywany).
Przegldarka Safari Mobile moe jednoczenie utrzymywa maksymalnie osiem
otwartych dokumentw internetowych.
Mimo e na pierwszy rzut oka rozmiary zasobw internetowych obsugiwanych przez samo
urzdzenie iPhone wydaj si niemal nieograniczone, prawdziwym rdem ogranicze
i utrudnie w przypadku treci tak duych rozmiarw mog by sieci mobilne. Wicej
informacji na temat przyczyn, dla ktrych prby udostpniania megabajtw tekstu i danych
binarnych na witrynach kierowanych do wacicieli smartfonw s nierealistyczne (lub
wrcz niegrzeczne wzgldem samych uytkownikw), mona znale w rozdziaach 8.,
11. i 12. oraz w dodatku D.

Odtwarzacz iPod Touch firmy Apple jest niemal identyczny z telefonem iPhone z t rnic, e
nie oferuje moliwoci uzyskiwania dostpu do mobilnej sieci radiowej. Przegldarka Safari
Mobile dziaa tak samo w telefonie iPhone i w odtwarzaczu iPod Touch. Oznacza to, e wszystkie
witryny internetowe zoptymalizowane z myl o telefonach iPhone s optymalizowane take
dla odtwarzaczy iPod Touch, jeli tylko serwer waciwie rozpoznaje identyfikator aplikacji
klienckiej tego odtwarzacza.
Na rysunku 7.6 pokazano zrzut ekranu przegldarki internetowej Safari Mobile w emulatorze
iPhone Simulator (jednym z komponentw pakietu iPhone SDK).

218 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

Rysunek 7.6. Przegldarka Safari Mobile w emulatorze telefonu iPhone

Przegldarka dla urzdze mobilnych

z systemem Android
Przegldarka internetowa instalowana w urzdzeniach mobilnych z systemem Android korzysta z silnika WebKit w wersji opracowanej przez firm Apple. (Silnik WebKit szczegowo
opisano w podrozdziale Silnik WebKit w mobilnych przegldarkach internetowych, we wczeniejszej czci tego rozdziau). Implementacja silnika WebKit w smartfonach z systemem
Android obejmuje pen obsug standardw internetowych oraz pewnych elementw jzyka
HTML 5, takich jak lokalne bazy danych (niezbdne do przegldania lokalnego). Wszystkie wersje
tej przegldarki obsuguj oprogramowanie Google Gears.
Okazuje si, e oprcz dokumentacji silnika WebKit dostpnej na witrynie http://webkit.org istnieje
jeszcze wiele oficjalnych dokumentw opisujcych funkcje przegldarek instalowanych w poszczeglnych wersjach systemu Android OS. Programici musz sami identyfikowa wersje
silnika WebKit na podstawie wartoci nagwka User-Agent i na tej podstawie okrela parametry przegldarek. Cz dokumentacji przegldarki systemu Android mona znale na oficjalnej witrynie internetowej Android Developers (http://developer.android.com/index.html).
Witryn opracowano, co prawda, z myl o programistach budujcych aplikacje specjalnie dla
urzdze z systemem Android, jednak prno szuka na niej wielu wanych informacji o samych przegldarkach. Programici aplikacji internetowych powinni pobra i zainstalowa
darmowy pakiet narzdzi programistycznych Android SDK, aby emulowa dziaanie urzdze i przegldarki.
Jednym z najbardziej przydatnych narzdzi programistycznych dostpnych w pakiecie Android
SDK jest debugger mobilnych aplikacji internetowych. Za jego pomoc mona skutecznie identyfikowa problemy zwizane ze skryptami JavaScriptu i elementami technologii AJAX, ktrych
odtwarzanie i odnajdywanie w emulatorze byoby trudne.

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

219

Aby diagnozowa kod JavaScriptu wykonywany w przegldarce w emulatorze lub w samym

systemie Android (w urzdzeniu mobilnym), zainstaluj pakiet Android SDK i wcz narzdzie
Android Debug Bridge (http://developer.android.com/guide/developing/tools/adb.html). Narzdzie
Android Debug Bridge czy pakiet Android SDK z dziaajcym emulatorem lub urzdzeniem
mobilnym. Po ustanowieniu tego poczenia uzyskujesz dostp do zapisw diagnostycznych
i komunikatw o bdach generowanych przez znacznik WebCore. Kierowanie komunikatw
o bdach i informacji diagnostycznych JavaScriptu do okna konsoli wymaga aktywacji pakietu Android SDK.
Na rysunku 7.7 pokazano wyniki wygenerowane przez wyszukiwark Google w przegldarce
systemu Android w emulatorze urzdzenia Android G1 (wchodzcym w skad pakietu Android SDK).

Rysunek 7.7. Przegldarka systemu Android w emulatorze urzdzenia Android G1

Przegldarka systemu webOS

dla urzdzenia Palm Pre
Przegldarka systemu webOS w smartfonach Palm Pre (i Pixi) korzysta z silnika WebKit gwarantujcego obsug wielu rnych standardw internetowych (patrz podrozdzia Silnik WebKit
w mobilnych przegldarkach internetowych, we wczeniejszej czci tego rozdziau). Przegldarka systemu webOS obsuguje wybrane elementy jzyka HTML 5, w tym cz funkcji elementu canvas oraz lokalne bazy danych (czyli technologi umoliwiajc przegldanie mobilnych aplikacji internetowych w trybie offline). W praktyce przegldarka systemu webOS bardzo
przypomina przegldark Safari Mobile.
Spoeczno programistw oprogramowania dla systemu webOS (http://developer.palm.com/)
jest otwarta dla kadego zainteresowanego wystarczy darmowa rejestracja. Z witryny tej
spoecznoci mona pobra emulatory systemu webOS i pakiet narzdzi webOS SDK. Na tej
samej witrynie mona te znale dokumentacj i blogi programistw powicone systemowi
webOS, aplikacjom wstpnie instalowanym w urzdzeniach Palm (w tym przegldarce tego sytemu i wskazwkom dotyczcym programowania) oraz technikom i najlepszym praktykom
programowania. Podczas tworzenia aplikacji dla platformy webOS zdecydowana wikszo

220 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

programistw mobilnych stosuje standardy technologii internetowych. Oznacza to, e Twoja
znajomo jzykw XHTML i JavaScript oraz standardu CSS powinna wystarczy jako podstawa
do bliszego poznawania technik budowy bogatych aplikacji dla urzdze z systemem webOS.
Na rysunku 7.8 pokazano wyniki wygenerowane przez wyszukiwark Google w przegldarce
systemu webOS (w ramach emulatora urzdzenia Palm Pre).

Rysunek 7.8. Przegldarka systemu webOS w emulatorze urzdzenia Palm Pre

Przegldarka dla urzdze BlackBerry

Przegldarka BlackBerry Browser jest instalowana we wszystkich smartfonach BlackBerry.
W przeszoci przegldarka ta obsugiwaa tylko standardy internetu mobilnego (XHTML-MP,
WML i Wireless CSS) i syna ze stosunkowo niskiej wydajnoci oraz niewielkiej innowacyjnoci.
Mimo e BlackBerry nale do typowych przykadw smartfonw, ich uytkownicy nie zawsze
mieli do dyspozycji przegldark waciw tak zaawansowanym urzdzeniom. Firma Research
in Motion (RIM) wprost doskonale udokumentowaa funkcje przegldarki BlackBerry Browser
w kolejnych wydaniach systemu operacyjnego swoich urzdze, zatem przynajmniej zrozumienie
ich ogranicze nie stanowi najmniejszego problemu.
Witryna BlackBerry Developer Zone (http://na.blackberry.com/eng/developers/) jest utrzymywana przez spoeczno programistw aplikacji mobilnych dla platformy BlackBerry. Firma
Research in Motion (RIM) udostpnia programistom rozwiza mobilnych rozbudowan dokumentacj, narzdzia, emulatory i fora. Istnieje moliwo pobrania dokumentacji przegldarki
BlackBerry Browser (http://docs.blackberry.com/en/developers/subcategories/?userType=21&
category=BlackBerry+Browser) dla kilku ostatnich wyda tej platformy (od wersji 4.2 do wydanej
ostatnio wersji 5.0).
Przegldarka BlackBerry Browser implementuje standardy internetu mobilnego ju od wczesnych etapw ewolucji tej platformy. Okazuje si jednak, e do wydania platformy BlackBerry
4.6 w 2008 roku tradycyjne standardy internetowe byy albo ignorowane, albo implementowane
tylko w czci, co rodzio frustracj wrd programistw rozwiza mobilnych zmuszanych do
odpowiedniej optymalizacji swoich stron internetowych. Co wicej, pocztkowo zaimplementowano tylko wybrane elementy wczesnych standardw internetu mobilnego, takie jak Wireless

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

221

CSS. W tej sytuacji firma RIM wybraa bodaj najlepsze rozwizanie dokadnie udokumentowaa te czciowe implementacje, aby zainteresowanym programistom uatwi odkrywanie, ktre
funkcje pozostay nieobsugiwane.
Wraz z wydaniem urzdzenia Bold 9000 w 2008 roku oraz urzdzenia Storm 9500 (z ekranem
dotykowym) w 2009 roku wprowadzono wersj 4.6 platformy BlackBerry z przegldark w peni
obsugujc jzyki HTML 4.01 i JavaScript oraz komponenty DOM Level 2 i technologi AJAX.
Okazuje si jednak, e ostatnie wydanie tej przegldarki z obsug technologii AJAX nie zmienio
sposobu traktowania urzdze BlackBerry przez wiele witryn internetowych znaczna cz
tych witryn dziaa tak, jakby przegldarka BlackBerry Browser nadal bya zgodna tylko ze standardami WAP.
Mimo tych problemw, przegldarka BlackBerry Browser jest w wielu aspektach do innowacyjna. Poczwszy od wersji 4.3, opisywana przegldarka oferuje dwa wbudowane, niedostpne
w innych przegldarkach obiekty JavaScriptu zapewniajce dostp do rodzaju sieci i pooenia
wyznaczanego przez system GPS. Waciwo blackberry.network reprezentuje acuch okrelajcy rodzaj sieci mobilnej aktualnie uywanej przez dany smartfon. Warto tej waciwoci
zaley od rodzaju biecej sieci i moe wskazywa na sie CDMA, EDGE, iDEN, GPRS itp.
Waciwo blackberry.location reprezentuje obiekt blackberry.location zawierajcy
wsprzdne geograficzne (wedug systemu GPS) danego urzdzenia (oczywicie, jeli to urzdzenie obsuguje system GPS). Waciwo blackberry.location.GPSSupported reprezentuje
warto logiczn okrelajc, czy dane urzdzenie mobilne obsuguje system GPS. Waciwoci
blackberry.location.latitude i blackberry.location.longitude reprezentuj odpowiednio
szeroko i dugo geograficzn. Obiekt blackberry.location udostpnia te metody odwieajce pooenie wedug systemu GPS i ustawiajce sposoby uzyskiwania pooenia na podstawie
sygnau GPS. Wicej informacji na temat obiektw blackberry.network i blackberry.location
jzyka JavaScript mona znale w dokumencie BlackBerry 4.3 Content Developers Guide
pod adresem http://docs.blackberry.com/en/developers/deliverables/1369/BlackBerry_Browser_
Version_4.3_Content_Developer_Guide.pdf.
Smartfony BlackBerry, ktre projektuje si przede wszystkim z myl o zastosowaniach biznesowych, obsuguj wiele protokow dostarczania treci oferowanych przez instalacje serwerw
korporacyjnych BlackBerry w firmowych lub mobilnych centrach danych. Na rysunku 7.9
pokazano zrzut ekranu z wynikami wygenerowanymi przez mobiln wersj wyszukiwarki
Google w przegldarce BlackBerry Browser (dla urzdzenia BlackBerry Storm 9530 z ekranem
dotykowym i platform mobiln w wersji 4.7.0).

Przegldarka internetowa firmy Nokia

instalowana w smartfonach z systemem Series 60
Smartfony z 3. i 5. wydaniem systemu Nokia Series 60 oferuj przegldark Nokia Web zaimplementowan na bazie silnika WebKit przeniesionego na platform Series 60 Symbian. Jak ju
wspomniano w podrozdziale Silnik WebKit w mobilnych przegldarkach internetowych, we
wczeniejszej czci tego rozdziau, silnik WebKit zapewnia smartfonom firmy Nokia obsug
wielu standardw internetowych, w tym jzykw XHTML i JavaScript oraz technologii AJAX
i Flash Lite firmy Adobe.
Poczwszy od 3. wydania systemu Series 60, przegldarka firmy Nokia obsuguje standardy internetowe i tak zaawansowane funkcje jak ukad strony, skalowanie czy moliwo otwierania
wielu okien. Obsug technologii AJAX po raz pierwszy zaimplementowano wanie w 3. wydaniu,

222 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

Rysunek 7.9. Wyniki wyszukiwarki Google w emulatorze urzdzenia Blackberry Storm 9530
dla platformy BlackBerry 4.7.0

w pakiecie Feature Pack 1. W 5. wydaniu systemu Nokia Series 60 wprowadzono interfejs uytkownika przystosowany do wsppracy z ekranami dotykowymi, a take mechanizmy skalowania i przybliania stron przez uytkownika, moliwo wywietlania stron na penym ekranie
i obsug klawiszy skrtw.
Wok forum firmy Nokia (http://www.forum.nokia.com) powstaa spoeczno programistw
rozwiza mobilnych i aplikacji dla telefonw Nokia. Po rejestracji na tej witrynie (rejestracja
jest darmowa) programici mog przeglda i pobiera artykuy techniczne, specyfikacje, emulatory i przykadowe fragmenty kodu. Emulatory platformy Nokia Series 60 obejmuj wszystkie
wstpnie instalowane aplikacje mobilne, w tym przegldark Nokia Web Browser. Istnieje moliwo pobrania emulatorw dla kadej z wydanych wersji platformy Nokia Series 60 (a take
dla innych wanych systemw operacyjnych firmy Nokia, takich jak Series 40).
Wicej informacji na temat wszystkich technologii zaimplementowanych w przegldarce firmy
Nokia (szczeglnie w przegldarce na bazie silnika WebKit instalowanej w smartfonach
z systemem Series 60) mona znale w sekcji Web Technologies witryny Nokia Forum
(www.forum.nokia.com/Technology_Topics/Web_Technologies/). Przenoszenie silnika WebKit
na platform Series 60 Symbian jest realizowane w ramach projektu open-source; informacje na
temat tego projektu mona znale na stronie http://trac.webkit.org/wiki/S60Webkit. Strona
zawiera odsyacze do stanu projektu, strony pobierania kodu rdowego systemu Symbian
(w jzyku C++) oraz materiay pokazujce, jak budowa biblioteki silnika WebKit.
Na rysunku 7.10 pokazano przegldark Nokia Web Browser w emulatorze smartfonu N97.

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

223

Rysunek 7.10. Przegldarka Nokia Web Browser w emulatorze urzdzenia Nokia N97 z 5. wydania
platformy Series 60

Internet Explorer Mobile

dla systemu Windows Mobile
Internet Explorer Mobile (IE Mobile) jest przegldark internetow instalowan we wszystkich
urzdzeniach z systemem operacyjnym Windows Mobile. Przegldarka Internet Explorer 6
(dostarczana wraz z systemem Windows Mobile 6) obsuguje nastpujce standardy internetowe.

Znaczniki: HTML 4.01, XHTML 1.0 i 1.1, XHTML-MP, XHTML Basic i WML.
Style: CSS 2.1, CSS Mobile Profile 1.0 i Wireless CSS 1.1.
Skrypty: JScript 5.6 (zgodny ze standardem ECMAScript 3); DOM 1 oraz elementy
modeli DOM 2 i DOM 3; AJAX.
Inne: Google Gears (IE Mobile 4.01 i nowsze).

Przegldarka Internet Explorer Mobile implementuje, co prawda, technologi AJAX, jednak

procedura tworzenia obiektu dania wymaga stosowania nieco innej skadni ni w pozostaych
przegldarkach instalowanych w smartfonach. W przegldarce Internet Explorer Mobile na potrzeby da technologii AJAX wykorzystuje si obiekt ActiveX nazwany Microsoft.XMLHTTP,
spjny z pozostaymi przegldarkami internetowymi firmy Microsoft, ale niezgodny z przegldarkami innych producentw. Przegldarka Internet Explorer Mobile tworzy obiekt dania
technologii AJAX, stosujc nastpujce wyraenie JavaScriptu:
var req = new ActiveXObject('Microsoft.XMLHTTP');

224 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

Wikszo innych przegldarek mobilnych tworzy dla technologii AJAX obiekt dania
XMLHttpRequest, stosujc nastpujc konstrukcj skadniow jzyka JavaScript:
var req = new XMLHttpRequest();

Na listingu 5.3 w rozdziale 5. przedstawiono przykad funkcji tworzcej danie technologii

AJAX i przystosowanej do dziaania w wielu przegldarkach (korzystajcej z obiektu dania zdefiniowanego dla biecej przegldarki mobilnej).
W przegldarce Internet Explorer Mobile do okrelania, czy dokument internetowy zawiera
znaczniki zoptymalizowane pod ktem urzdze mobilnych z ekranami okrelonej szerokoci,
suy znacznik MobileOptimized <meta>. Poniszy przykad znacznika <meta> okrela, e
preferowan szerokoci ekranu jest 240 pikseli:
<meta name="mobileoptimized" content="240" />

Kiedy przegldarka Internet Explorer Mobile rozpoznaje znacznik MobileOptimized <meta>

w tej formie, przyjmuje, e dany dokument witryny internetowej zoptymalizowano z myl
o urzdzeniach mobilnych. Przegldarka Internet Explorer Mobile wywietla t stron, ale nie
skaluje jej w sposb, do ktrego przyzwyczaiy nas tradycyjne przegldarki internetowe. Przegldarka Internet Explorer Mobile wywietli t stron w pojedynczej kolumnie o szerokoci rwnej
wartoci atrybutu content (wicej informacji o znaczniku MobileOptimized <meta> umoliwiajcym oznaczanie dokumentw jako zoptymalizowane z myl o urzdzeniach mobilnych
mona znale w rozdziale 12.).
W ramach programu Microsoft Developer Network (MSDN) udostpniono dokumentacj
przegldarki Internet Explorer Mobile i przykadowe fragmenty kodu opracowanego z myl
o tej przegldarce (http://msdn.microsoft.com/pl-pl/library/bb159821.aspx). Artykuy MSDN
dotycz przegldarki Internet Explorer Mobile 6 i nowszych wersji.
Urzdzenia z systemem operacyjnym Windows Mobile coraz czciej oferowane s ze wstpnie
zainstalowanymi przegldarkami innych producentw (np. Opera Mobile), ktre peni funkcje
przegldarek domylnych. Przegldarka Internet Explorer Mobile take jest instalowana w tych
urzdzeniach, jednak jej uruchomienie zwykle jest utrudnione i wymaga uycia menu aplikacji.

Przegldarki Opera Mini i Opera Mobile

Opera to niezalena, norweska firma tworzca oprogramowanie bodaj najbardziej znanym
produktem tej firmy jest przegldarka Opera wystpujca w dwch wersjach mobilnych:
Opera Mini i Opera Mobile. Opera Mini i Opera Mobile to odmienne przegldarki mobilne
kierowane do rnych rodzajw urzdze mobilnych.
Opera Mini jest lekk aplikacj przegldarki napisan w rodowisku Java Platform, Micro
Edition (Java ME lub J2ME) instalowan w zwykych telefonach. Przegldarka Opera Mini jest
czci rozwizania klient-serwer umoliwiajcego uytkownikom popularnych urzdze mobilnych przegldanie dowolnych witryn mobilnych i witryn tradycyjnych, nawet jeli witryny te
korzystaj z zaawansowanych funkcji uniemoliwiajcych ich przegldanie za pomoc przegldarek wbudowanych.
Klient Opera Mini jest instalowany w wielu popularnych urzdzeniach mobilnych. Z perspektywy
uytkownika kocowego Opera Mini przypomina tradycyjn przegldark internetow, tyle
e dziaajc w telefonie mobilnym z ograniczon iloci zasobw. Okazuje si jednak, e zgodno tej przegldarki z wieloma rnymi urzdzeniami jest moliwa dziki transkodowaniu

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

225

dokumentw i rezygnacji z czci funkcji. Klient Opera Mini komunikuje si z serwerem Opera,
ktry wykonuje niezbdne operacje na danym dokumencie i odsya do klienta odpowiednio
zoptymalizowan wersj tego dokumentu. Serwer tumaczy kod jzyka HTML na jzyk OBML
(ang. Opera Binary Markup Language; w praktyce jest to obraz z obszarami dostpnymi do klikania) i odsya kod OBML-a do przegldarki, ktra wywietla tak przeksztacon stron. Przegldarka Opera Mini obsuguje jzyk JavaScript i technologi AJAX, ale nie dopuszcza do wykonywania tego rodzaju skryptw w urzdzeniach mobilnych. Wszystkie zaawansowane funkcje
przegldarki s wykonywane po stronie serwera. Jak nietrudno odgadn, przegldarka Opera
Mini obsuguje model zdarze JavaScriptu ograniczony tylko do zdarze, ktre mog by przechwytywane po stronie klienta i przesyane na serwer w celu waciwego przetworzenia. Przetwarzanie w tle i inicjalizowanie zdarze JavaScriptu przy uyciu licznika czasowego nie jest moliwe.
Firma Opera Software przeniosa przegldark Opera Mini na platform Android.
(Aplikacja Opera Mini jest dostpna za darmo w sklepie Android Market). W kontekcie
smartfonw firma Opera przekonuje, e przegldarka Opera Mini pozwala oszczdza
czas i pienidze, poniewa stosowany transkoder kompresuje strony internetowe o blisko
90%. Jednak z naszego dowiadczenia wynika, e korzystanie z tego mechanizmu
transkodujcego w systemie Android nie ma wikszego sensu. Ta zaawansowana platforma
mobilna zawiera rozbudowan przegldark zaimplementowan przy uyciu silnika
WebKit, zatem wikszo uytkownikw decyduje si na stosowanie wanie tej przegldarki
(chyba e koszty przesyania danych lub przepustowo stanowi powany problem).

Na rysunku 2.19 w rozdziale 2. pokazano zrzut ekranu emulatora przegldarki Opera Mini dostpnego na stronie internetowej www.opera.com/mini/demo/ (korzystanie z tego emulatora na
komputerze biurkowym wymaga zainstalowanej platformy Java). Dokumentacj obsugi jzyka
JavaScript w przegldarce Opera Mini 4 mona znale pod adresem http://dev.opera.com/
articles/view/javascript-support-in-opera-mini-4/.
Przegldarka Opera Mobile jest programem zupenie innym od przegldarki Opera Mini.
Opera Mobile to autonomiczna przegldarka internetowa zgodna ze standardami i opracowana
z myl o urzdzeniach mobilnych z systemami Windows Mobile i Nokia Series 60.
Obsuga takich rozwiza jak przegldanie wielu zakadek, przyblianie dokumentw czy optymalizacja pod ktem ekranw mobilnych przyspiesza i uatwia uytkownikom prac z t przegldark. Opera Mobile obsuguje nastpujce standardy internetowe.

Znaczniki: XHTML 1.0; HTML 4.01 i elementy standardu HTML 5; WML 1.3 i 2.0.
Style: CSS 2 i 3.
Skrypty: JavaScript, DOM Level 2 i AJAX.
Inne: Google Gears (Opera Mobile 9.5 i nowsze).

Firma Opera nie udostpnia emulatora przegldarki Opera Mobile. Jeli jednak masz dostp do
systemu Windows Mobile lub urzdzenia mobilnego firmy Nokia, moesz uzyska wygld
stron tradycyjnych witryn internetowych zbliony do formy, w jakiej prezentowane s w przegldarce Opera Mobile, instalujc biurkow przegldark Opera (www.opera.com/download/).
Wystarczy otworzy jak stron tradycyjnej witryny internetowej, odpowiednio zmniejszy
rozmiar okna i wybra z menu Widok opcj Dopasuj do szerokoci. Przegldarka Opera wywietli
wwczas wybran stron w sposb zbliony do przegldarki Opera Mobile, poniewa obie
przegldarki korzystaj z tego samego silnika wywietlania stron. (W przegldarce mobilnej,
oczywicie, mamy do dyspozycji nieporwnanie mniejsz liczb czcionek).

226 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

Na rysunku 7.11 pokazano wyniki wywietlone przez mobiln wersj wyszukiwarki Google
w emulatorze przegldarki Opera Mini 5.

Rysunek 7.11. Wyniki mobilnej wyszukiwarki Google w emulatorze przegldarki Opera Mini 5

Na rysunku 7.12 pokazano przykad tradycyjnej witryny internetowej (http://www.helion.pl)

otwartej w zmniejszonym oknie przegldarki Opera (w formie zblionej do tej, ktra zostaaby
wywietlona przez przegldark mobiln).

Rysunek 7.12. Widok maego ekranu przegldarki Opera przypominajcy przegldark mobiln
Opera Mobile

Rozdzia 7 Wzbogacanie mobilnych stron internetowych

227

WICZENIE 7.: PRZEGLD PRZEGLDAREK INSTALOWANYCH W SMARTFONACH

Uyj technik opisanych w podrozdziaach Popularne techniki tworzenia witryn dla przegldarek
instalowanych w smartfonach i Silnik WebKit w mobilnych przegldarkach internetowych
do wzbogacenia stron swojej istniejcej ju witryny internetowej o standardy internetowe,
skrypty jzyka JavaScript i rozszerzenia standardu CSS obsugiwane przez silnik WebKit.
Zacznij od strony internetowej zgodnej ze standardami mobilnymi udoskonal kod jzyka
znacznikw, skrypty i style, korzystajc z wikszych moliwoci przegldarek dla smartfonw
(przegldarek opracowanych na bazie silnika WebKit). Dodawaj nowe funkcje a do momentu,
w ktrym funkcje i uyteczno zmienionego dokumentu bd dostatecznie zoptymalizowane.
Sprbuj wykorzysta cho cz rozszerze CSS silnika WebKit. W trakcie realizacji tego
wiczenia sprbuj wykona nastpujce zadania.

Otwrz zmienion stron witryny mobilnej w przegldarkach korzystajcych z silnika

WebKit w urzdzeniu iPhone oraz urzdzeniach z systemami Android, webOS i Nokia
Series 60. Jeli nie dysponujesz tymi urzdzeniami, uyj odpowiednich emulatorw.

Otwrz zmienion stron witryny mobilnej w przegldarkach smartfonw, ktrych nie

zaimplementowano na bazie silnika WebKit, np. w przegldarce urzdzenia BlackBerry
oraz przegldarkach Internet Explorer Mobile i Opera Mobile.

Otwrz zmienion stron witryny mobilnej w takich tradycyjnych przegldarkach

korzystajcych z silnika WebKit jak Google Chrome czy Apple Safari.

Odpowiedz na nastpujce pytania.

1. Na ile spjne s ukad i doznania uytkownika Twojej mobilnej witryny internetowej
otwieranej w wielu rnych przegldarkach korzystajcych z silnika WebKit? Czy wida
rnice pomidzy tymi przegldarkami a przegldarkami, ktre nie uywaj silnika
WebKit? Czy wystpuj jakie rnice dzielce wygld tej witryny otwieranej w przegldarkach
mobilnych i tradycyjnych?
2. W jakim stopniu wykorzystanie dodatkowych standardw internetowych i rozszerze
obsugiwanych przez silnik WebKit wpyno na uyteczno, wydajno i rozmiar
dokumentw Twojej mobilnej witryny internetowej?
3. Jak strony zoptymalizowane pod ktem smartfonw prezentuj si w przegldarkach
mobilnych instalowanych w bardziej popularnych, zwykych telefonach? Jakie zmiany
mona by wprowadzi, aby zabezpieczy doznania uytkownikw tego rodzaju przegldarek?

Podsumowanie
W tym rozdziale wprowadzono zaawansowane funkcje przegldarek instalowanych w smartfonach, ktre czyni z tych urzdze bardzo atrakcyjne platformy dla bogatych mobilnych aplikacji
internetowych. Przegldarki instalowane w smartfonach obsuguj typowe elementy jzykw
znacznikw i zdarzenia JavaScriptu, ktre znacznie rozszerzaj moliwoci tworzenia interaktywnej treci dokumentw mobilnych. Zaawansowany silnik przegldarek WebKit obsuguje
standardy internetowe i jako taki stanowi podstaw dla wielu domylnych przegldarek mobilnych instalowanych w smartfonach. Wspomniany silnik umoliwia programistom opracowanie
jednej zoptymalizowanej wersji dla smartfonw iPhone oraz urzdze mobilnych z systemami
Android, webOS i Nokia Series 60.

228 Cz III Zaawansowane techniki wytwarzania mobilnych witryn internetowych

Przegldarki mobilne instalowane w smartfonach oferuj zrnicowane zbiory funkcji i odmienne zbiory implementowanych standardw. W tym rozdziale omwiono funkcje przegldarek
internetowych oferowane wraz z telefonach iPhone oraz urzdzeniami z systemami Android,
webOS, BlackBerry, Nokia Series 60 i Windows Mobile. Wyjaniono rnice dzielce dwie
popularne przegldarki mobilne firmy Opera Software: Oper Mini (instalowan w popularnych, prostych urzdzeniach mobilnych i korzystajc z mechanizmu transkodowania dokumentw) oraz Oper Mobile (zgodn z licznymi standardami internetowymi przegldark
dla smartfonw).
W nastpnym rozdziale omwimy techniki optymalizacji przetwarzania kocowego (ang. postprocessing) jzyka znacznikw, arkuszy stylw, skryptw i obrazw w ramach dokumentw
mobilnych. Taka optymalizacja ma na celu minimalizowanie iloci przesyanych danych, podnoszenie wydajnoci i uatwianie buforowania danych po stronie przegldarek mobilnych.