Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00542 005786 15035465 na godz. na dobę w sumie
Mobile Web. Rusz głową! - książka
Mobile Web. Rusz głową! - książka
Autor: , Liczba stron: 424
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4864-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Zdobądź nowych użytkowników smartfonów!

Liczba użytkowników internetu przeglądających strony internetowe za pomocą smartfonów rośnie lawinowo. Powszechnie sądzi się, że wkrótce będzie ich więcej niż tych, którzy korzystają z tradycyjnych komputerów. Dlatego już dziś należy przygotować się na rewolucję i zmienić podejście do tworzenia stron internetowych. Skorzystaj z nowości HTML5 oraz CSS3 i przekonaj się, że to wcale nie musi być trudne.

Jeżeli dołożysz do tego kolejną książkę z serii 'Rusz głową!', całe zagadnienie może okazać się wręcz banalne. Dzięki nowatorskim technikom nauczania będziesz chłonął wiedzę niczym gąbka. W trakcie lektury nauczysz się korzystać z Responsive Web Design oraz sprawdzisz, jak rozpoznać, że użytkownik korzysta ze smartfona. Ponadto poznasz biblioteki, które pomogą Ci w trakcie realizacji postawionych (na przykład jQuery Mobile - jej możliwości są oszałamiające!). Twoją ciekawość powinien wzbudzić też projekt PhoneGap. Dzięki niemu będziesz mógł skonwertować swoją aplikację napisaną przy użyciu HTML5 do natywnego formatu, a to da Ci parę nowych możliwości. Książka ta jest obowiązkową pozycją dla wszystkich projektantów stron internetowych, którzy chcą być na czasie! Zaliczasz się do nich?

Poznaj:

Wykorzystaj potencjał HTML5 i CSS3!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Head First Mobile Web Tłumaczenie: Aleksander Lamża ISBN: 978-83-246-4864-1 © 2013 Helion S.A. Authorized Polish translation of the English edition of Head First Mobile Web, 1st Edition 9781449302665 © 2012 Cloud Floor, Inc. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/mobweb Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści Spis treści (skrócony) Wprowadzenie 1. Wprowadzenie do mobilnych technologii webowych. Wrażliwe projekty, czyli Responsive Web Design 2. RWD na poważnie. Koncepcja Mobile First w podejściu Responsive Web Design 3. Oddzielna witryna mobilna. Stawiamy czoła niezupełnie sprzyjającym okolicznościom 4. Komu wsparcie, komu? Które urządzenia powinny być obsługiwane? 5. Bazy i klasy urządzeń. Zapoznaj się z grupą 6. Framework dla mobilnych aplikacji internetowych. Tartanator 7. Mobilne aplikacje w prawdziwym świecie. Wyjątkowe mobilne aplikacje internetowe 8. Tworzenie hybrydowych aplikacji mobilnych z PhoneGap. Ustrzel tartan! — w stronę natywności 9. Podejście „future friendly”. Odnajdywanie (jakiegoś) sensu w chaosie A Dodatek Ścinki. Sześć najważniejszych spraw (o których nie mówiliśmy) B Dodatek Postaw swój serwer. Gdzieś trzeba zacząć C Dodatek Instalowanie WURFL. Jak wywęszyć urządzenia? D Dodatek Instalowanie SDK i narzędzi dla Androida. Zadbaj o środowisko Skorowidz xxi 1 43 91 137 151 217 267 313 357 373 387 397 403 417 Spis treści (z prawdziwego zdarzenia) W Wprowadzenie Twój mózg kontra technologie mobilne. Starasz się czegoś nauczyć, a mózg robi Ci „przysługę”, za wszelką cenę odciągając Twoją uwagę od nauki. Myśli: „Lepiej wyjdź i zajmij się czymś ciekawszym — wypatruj krwiożerczych bestii albo sprawdź, czy kiedy podpalisz swoje BlackBerry Bold, włączy się alarm pożarowy”. Jak w takim razie oszukać mózg, by uznał, że Twoje życie zależy od znajomości technologii mobilnych? Dla kogo jest ta książka? Wiemy, co sobie myślisz Wiemy też, co sobie myśli Twój mózg Metapoznanie — myślenie o myśleniu Zespół korektorów merytorycznych Podziękowania xxii xxiii xxiii xxv xxx xxxi ix 1 Wprowadzenie do mobilnych technologii webowych Wrażliwe projekty, czyli Responsive Web Design Witajcie! Jesteście gotowi na mobilne technologie webowe? Tworzenie witryn na urządzenia mobilne jest naprawdę ekscytujące. Wiele w tym uroku, emocji i momentów, w których chciałoby się wykrzyknąć: Eureka!. Ale z drugiej strony pełno tu tajemnic i trudności. Technologie mobilne rozwijają się w tak niewiarygodnym tempie, że cały czas jesteśmy trochę w tyle. Trzymaj się więc mocno! Naszą przygodę rozpoczynamy od ciekawego podejścia do tworzenia witryn internetowych, znanego jako Responsive Web Design (RWD). Dzięki niemu będziesz mógł sprawić, by strony wyglądały równie dobrze na wielu różnych urządzeniach mobilnych i, co ważne, przydadzą Ci się umiejętności, które już masz. Wszyscy jedziemy na tym samym wózku. Wskakujesz? Coś niedobrego stało się w drodze do pubu Skoro przeglądarki w telefonach komórkowych są takie świetne... ...to czy nie powinno to po prostu działać? Wrażliwe projekty — Responsive Web Design Różne arkusze stylów w różnych sytuacjach Zapytania o media w CSS Dotychczasowa struktura witryny pubu Pod Paradnym Morsem Analiza dotychczasowego arkusza CSS Co trzeba zmienić? Szukamy stylów wymagających zmiany Droga do stylów dostosowanych do urządzeń mobilnych Co jest nie tak z układami o stałej szerokości? Dlaczego płynne jest lepsze? Wzór płynności Ciąg dalszy przekształceń Przełączanie kontekstu Co się stało z tymi obrazami? Płynne obrazy Pamiętaj, by być wrażliwym Oto strona w stylu RWD! Podejście Responsive Web Design to również stan umysłu 2 4 5 6 10 12 13 15 16 17 18 19 26 27 28 29 31 32 33 36 40 41 Spis treści index.html index.html styles.css styles.css x Spis treści 2 RWD na poważnie Koncepcja Mobile First w podejściu Responsive Web Design Oto śliczna mobilna witryna. Ale nie oceniaj jej tylko po pozorach. Pod tą piękną powłoką znajdziesz bowiem coś zupełnie innego. Być może wygląda jak mobilna witryna, ale to wciąż zwykła, desktopowa witryna, z tym że przebrana w mobilne ciuszki. Jeśli chcesz, żeby na urządzeniach mobilnych chodziła jak dobrze naoliwiona maszynka, musisz zastosować zasadę Mobile First. Jednak najpierw musimy przeprowadzić sekcję obecnej witryny, by odnaleźć ukrywający się w jej wnętrzu desktopowy szkielet. Następnie gruntownie posprzątamy i zaczniemy pracować na świeżo, zgodnie ze strategią stopniowego ulepszania, zaczynając od budowania podstawowych elementów, a kończąc na bogatej wersji desktopowej. Gdy skończymy, nasza strona będzie zoptymalizowana pod każdą możliwą rozdzielczość ekranu. Bardzo małe ekrany (telefony) Małe ekrany (smartfony) Średnie ekrany (tablet) Większe ekrany (komputery i telewizory) Gdy właśnie zamierzałeś zacząć świętować swój sukces... Czy to naprawdę jest problem? Skąd to wiadomo? Co zrobić, gdy nie śmiga? Nie ma co się oszukiwać, to jest WIELKA strona Dobrodziejstwa pliku HAR Wytęż wzrok i znajdź zawalidrogę Skąd pochodzi skrypt map Google’a Wygląda przyjaźnie, ale takie nie jest Koncepcja Mobile First w podejściu Responsive Web Design Na czym polega stopniowe ulepszanie? Poprawiamy pływanie elementów Zapytania o media w technice Mobile First Niespodzianka! W Internet Explorerze strona się rozsypała Problemy z jednym atrybutem src Powiększanie w znaczniku meta viewport Czy powinno się umożliwiać skalowanie? Z pomocą JavaScriptu przywracamy mapę Budujemy pseudozapytanie o media w JavaScripcie Wstawiamy skrypt na stronę Ten widżet nie jest zgodny z RWD Przenosimy atrybuty do CSS Usuwamy atrybuty z JavaScriptu Mapa znów zasłania treść strony Niech prowadzi Cię zawartość strony Wartości graniczne przybywają na ratunek 44 45 47 48 49 51 53 55 56 57 60 61 62 68 72 73 74 76 77 79 80 81 83 84 87 xi a t n e i l k h c a i c ś o w i l ż o m z a r o u n a r k e e z r a i m z o r a n e c ą j u z a b e n a z s p e u e w o n p o t S i l i Spis treści 3 Oddzielna witryna mobilna Stawiamy czoła niezupełnie sprzyjającym okolicznościom Wizja jednego, wrażliwego projektu witryny jest cudowna... Mamy tylko jeden układ strony opracowany w zgodzie z koncepcją Mobile First, który dopasowuje się do specyfiki różnych przeglądarek i urządzeń. Brzmi pięknie. Co się jednak stanie, gdy tę wizję przyprawimy choćby szczyptą realizmu? Niezaktualizowane systemy, stare urządzenia lub ograniczenia budżetu klienta to tylko kilka przykładów. A co, jeśli zamiast łączyć wersję desktopową z mobilną, chciałbyś je rozdzielić? W tym rozdziale przyjrzymy się szczegółowo wykrywaniu użytkowników korzystających z urządzeń mobilnych, wspieraniu starszych telefonów i tworzeniu odrębnych witryn dla urządzeń mobilnych. Agenci organizacji Zwierzętom na Pomoc patrolują pola Jak agenci mogą otrzymywać i przekazywać informacje? Wysyłamy mobilnych użytkowników na zoptymalizowaną witrynę Jak wywęszyć mobilnych użytkowników? Rozpoznajemy agenta użytkownika Łańcuch user-agent — dzieło szatana? Mówiąc wprost — większość dużych witryn ma swoją wersję mobilną Kiedy jedynym rozwiązaniem jest przekierowanie... Rzuć okiem na skrypt Jak działa skrypt? Przygotowujemy makietę wersji mobilnej Specjalna dostawa... spraw komplikujących życie Nie wszystkie telefony to smartfony... Prostota przede wszystkim — poznaj XHTML-MP Dlaczego chcemy użyć tak starego rozwiązania? XHTML-MP pomaga unikać problemów Przy okazji — przewijanie jest do bani Ostatni problem Klawisze dostępu w akcji Co poszło nie tak? Naprawiamy błędy CSS dostosowany do przeglądarek mobilnych Hm... czegoś tu brakuje Bardzo nam brakuje tych przycisków! Wielki sukces! 92 93 96 97 98 101 104 105 106 107 108 110 113 114 115 116 119 119 123 124 125 127 132 133 134 xii 4 Komu wsparcie, komu? Które urządzenia powinny być obsługiwane? Przetestowanie witryny na wszystkich urządzeniach trwałoby wieczność. Musisz ustalić granicę wyodrębniającą urządzenia, które zamierzasz wspierać. Ale jak podjąć tę decyzję? Co z użytkownikami korzystającymi z telefonów, które już dawno powinny trafić na złomowisko? W jaki sposób stworzyć witrynę, by działała na urządzeniach, o których w ogóle nie słyszałeś? W tym rozdziale przygotujemy magiczną miksturę złożoną z wymagań projektowych i informacji o odbiorcach. Pomoże nam ona zdecydować, które urządzenia mamy wspierać i co zrobić z tymi, których nie wspieramy. Skąd wiedzieć, gdzie ustalić granicę? Odejdź na chwilę od komputera Urządzenia, których nie wspierasz, kontra te, których nie możesz wspierać Zadawaj dużo pytań o swój projekt Składniki magicznej mobilnej mikstury Zajrzyj do szafki z narzędziami i danymi Skąd mam wiedzieć, czy moi klienci używają odpowiednich urządzeń? 138 139 140 142 144 145 150 Miejsce, w którym ustalamy granicę xiii Spis treści Spis treści 5 Bazy i klasy urządzeń Zapoznaj się z grupą Podczas wybierania wspieranych urządzeń nie wzięliśmy pod uwagę kilku dokuczliwych problemów. Jak mamy się dowiedzieć wystarczająco dużo o mobilnych przeglądarkach użytkowników, by przed dostarczeniem treści spełnić ich oczekiwania? Jak uniknąć tworzenia tylko podstawowej zawartości odpowiadającej najmniejszemu wspólnemu mianownikowi urządzeń? No i jak, pozostając przy zdrowych zmysłach, zapanować nad tym wszystkim? W tym rozdziale wkroczymy w świat możliwości urządzeń i nauczymy się korzystać z baz danych urządzeń, by wreszcie odkryć, jak te wszystkie urządzenia grupować w klasy. Przycisk awaryjny dla spanikowanych studentów Źródła danych o urządzeniach mobilnych spieszą na ratunek Poznaj WURFL WURFL i jego możliwości WURFL — sprytny interfejs API My też możemy zbudować eksplorator Eksplorator — przygotowanie środowiska Szast-prast i eksplorator ulepszony Czas zaprząc możliwości do pracy Korzystamy z WURFL do zróżnicowania zawartości stron Inicjalizacja obiektu urządzenia i przygotowanie danych Czy to jest urządzenie mobilne? Dzięki WURFL strona staje się sprytniejsza Przycisk awaryjny — tylko w telefonach Klasy urządzeń Kolejny lukratywny kontrakt z firmą DaRadę! Jak strona główna wygląda przez mobilne okulary? Zdefiniowanie odmian witryny w zależności od wymagań Przybliżamy klasy urządzeń Zapoznajemy się z funkcją dopasowującą O co chodzi w tej instrukcji switch? Używamy funkcji dopasowującej do testowania możliwości Wypełniamy luki w testach klas urządzeń Musimy bardziej zadbać o bezpieczeństwo Lepiej zapobiegać, niż leczyć 152 154 155 156 159 160 161 168 170 170 172 172 176 177 181 182 183 184 185 191 192 193 200 211 212 xiv Hm... całkiem ładne, ale czy moglibyście nad tym aplikacja? jeszcze popracować, by zachowywało się jak prawdziwa natywna Spis treści 6 Framework dla mobilnych aplikacji internetowych Tartanator „My chcemy aplikację!”. Jeszcze rok czy dwa lata temu tego typu hasło wiązało się nieodłącznie z jednym — tworzeniem natywnych aplikacji dla każdego urządzenia, które zamierzaliśmy wesprzeć. Na szczęście teraz nie jest to jedyne możliwe rozwiązanie. Aplikacje internetowe dla mobilnych przeglądarek są coraz doskonalsze, zwłaszcza ostatnio, kiedy wkroczył HTML5 wraz z nieodłącznymi kompanami — CSS3 i JavaScriptem. W świat mobilnych aplikacji internetowych wejdziemy wraz z mobilnym frameworkiem, czyli zbiorem gotowych rozwiązań programistycznych upraszczających i przyspieszających tworzenie aplikacji. HTML5, aplikacja internetowa... Co te słowa znaczą? Jak się zachowują klasyczne witryny internetowe? Jak się zachowują witryny przypominające aplikacje? Plan pierwszej fazy projektu Tartanator Po co używać frameworków? Dla projektu Tartanator wybraliśmy framework jQuery Mobile Tworzenie prostej strony z jQuery Mobile Kod pozostałych elementów strony Atrybuty data-* Odsyłacze do wielu stron w jQuery Mobile Sedno Tartanatora — tartany jako takie Wrzucamy pozostałe tartany Filtrowanie i porządkowanie listy Dodajemy pasek narzędzi w stopce Upiększamy pasek narzędzi Finalizowanie pracy nad strukturą Czas na przygotowanie formularza do tworzenia tartanów Tłumaczymy wzory tartanów na formularz Tworzymy formularz w HTML5 Dodajemy podstawowe pola Dodawanie kolorów umożliwiają użytkownikom listy w listach Pary kolor – rozmiar: pole wyboru koloru Pary kolor – rozmiar: pole rozmiaru Odsyłacz do formularza 219 220 221 224 225 226 228 229 231 234 240 243 244 249 250 251 253 255 256 257 258 259 260 262 xv 7 Mobilne aplikacje w prawdziwym świecie Wyjątkowe mobilne aplikacje internetowe Mobilne aplikacje są jak dzieci w klasie. Wiesz, chodzi o tę mieszankę fascynacji, przekonania o tym, że można zrobić niesamowite rzeczy, ale też tajemniczości i niepohamowanego rozrabiactwa. Staramy się trzymać pod kontrolą tych nadpobudliwych geniuszy, ustalając granice, a także dbając, by ich nie przekraczali. Przychodzi jednak czas zbierania korzyści z naturalnych talentów mobilnych aplikacji internetowych. Możemy zastosować metodę stopniowego ulepszania, by dopieścić interfejs na potrzeby lepiej rozwiniętych przeglądarek, a problemy z ciągłością dostępu do internetu rozwiązać za pomocą trybu offline. Możemy też wydobyć esencję mobilności, korzystając z geolokalizacji. Nie ma czasu do stracenia, zabierzmy się za tworzenie wyjątkowych mobilnych aplikacji internetowych! Wygląda nieźle... Aplikacje mobilne w prawdziwym świecie Na miejsca, gotowi, ulepszać! Ulepszamy formularz Widżet zarządzający listą kolorów i rozmiarów Zaglądamy pod przykrywkę No tak, to było ulepszanie frontendu ...a teraz pora na backend Dwie twarze skryptu generate.php Jeszcze tylko jedno... Tryb offline to ważna sprawa Prosty przepis na plik manifestu Na ratunek przybywają narzędzia Udostępniaj pliki manifestu z prawidłowym nagłówkiem content-type Zwyciężyliśmy (w końcu) Jak działa geolokalizacja? Jak poprosić przeglądarkę o dane geolokalizacyjne? Początek pracy nad stroną Znajdź wydarzenie — podstawy Dołączamy geolokalizację Nic nie znalazł 268 270 274 275 276 277 278 280 281 282 284 285 286 287 297 298 299 301 303 309 xvi Spis treści Spis treści 8 Tworzenie hybrydowych aplikacji mobilnych z PhoneGap Ustrzel tartan! — w stronę natywności Czasem musisz się zdecydować na aplikację natywną. Być może potrzebujesz dostępu do czegoś, co nie jest (jeszcze) osiągalne z poziomu przeglądarki. A może klient chce, by aplikacja koniecznie znalazła się w sklepie. Nie możemy się już doczekać chwili, gdy przeglądarka będzie udostępniała wszystko, co jest potrzebne, by tworzyć pełnoprawne aplikacje mobilne. Jednak zanim do tego dojdzie, możemy skorzystać z możliwości hybrydowego podejścia — nadal będziemy tworzyć aplikacje z wykorzystaniem technologii internetowych, ale użyjemy biblioteki, która pełni rolę mostu między naszym kodem a natywnymi możliwościami urządzeń. Międzyplatformowe natywne aplikacje zbudowane w oparciu o technologie internetowe? Brzmi całkiem nieźle! M o s t i k a c j a p l h y b r y d o w y c h i Nowe możliwości Jak działają aplikacje hybrydowe? Budowanie mostu za pomocą PhoneGap Dołącz do PhoneGap Build Jak ma działać aplikacja? Śledzenie ustrzelonych tartanów Anatomia projektu Ustrzel tartan! Pobieranie utworzonej aplikacji Wybierz drogę Kto co widział? Zapisujemy znalezione tartany W czym nam może pomóc localStorage? Sprawdzamy, co obsługuje przeglądarka Używamy funkcji wyświetlającej znalezione tartany Metody toggle i toggleClass Znalazłeś tartan? Udowodnij to! Zaprzęgamy PhoneGap do robienia zdjęć Integracja z PhoneGap jest już prawie gotowa Teraz jesteśmy gotowi na zgłębienie API mediaCapture W jaki sposób obsłużymy akcję zakończoną powodzeniem? W praktyce zawsze wygląda to trochę inaczej Odrobina anonimowości Już ostatnia sprawa! Daliśmy radę! 314 317 318 321 322 323 324 328 329 334 335 339 340 341 344 345 347 348 349 350 351 353 354 xvii Spis treści 9 Podejście „future friendly” Odnajdywanie (jakiegoś) sensu w chaosie Responsive Web Design. Wykrywanie urządzeń. Mobilne aplikacje internetowe. PhoneGap. Chwila... czego właściwie powinienem użyć? Obecnie istnieje wiele metod tworzenia aplikacji za pomocą technologii mobilnych. Bardzo często w projektach łączy się wiele technik. Nie ma jednego, najlepszego rozwiązania, ale nie przejmuj się, ponieważ kluczem do sukcesu jest nadążanie za rozwojem technologii. Nie bój się wyzwań. Wystarczy przyswoić podejście „future friendly” i dać się ponieść fali, będąc przeświadczonym o swojej elastyczności i gotowości na wszystko, co przyniesie przyszłość. I co teraz? Czas rozwiać zbiorowe złudzenie co do sprawowania kontroli Manifest „future friendly” Jeśli nie możesz się uodpornić na przyszłość, zaprzyjaźnij się z nią Dziś aplikacja, jutro witryna Czeka nas długa droga. Przyda się kilka wskazówek Mieszamy mobilne składniki Spójrz w przyszłość 358 361 362 364 365 366 369 371  PRECYZYJNE OGNISKOWANIE  Nie wszystko może się udać na każdym urządzeniu. Aby poradzić sobie w świecie wciąż rosnącego skomplikowania urządzeń, musimy się skupiać na najistotniejszych — z punktu widzenia klientów — sprawach. I nie chodzi tu o rozwiązania oparte na najmniejszym wspólnym mianowniku, ale o tworzenie treści i usług mających znaczenie. Użytkownicy są w coraz większym stopniu zmęczeni rosnącym szumem informacyjnym i koniecznością szukania sposobów na upraszczanie rzeczywistości. Musisz precyzyjnie zogniskować swoje usługi, zanim klienci i rosnąca różnorodność zrobią to za Ciebie.  UNIWERSALNA ZAWARTOŚĆ  Nadrzędnym nakazem jest tworzenie dobrze ustrukturyzowanej zawartości. Zastanów się, jak opracowana zawartość będzie się zachowywała w różnych kontenerach, uwzględniając ich ograniczenia i możliwości. Bądź odważny i korzystaj z nowych możliwości, ale pamiętaj, że przyszłość może podążyć w różnych kierunkach. Na naszą przyszłość składają się zarówno zaawansowane urządzenia o ogromnych możliwościach, jak i proste urządzenia z minimalną funkcjonalnością. Tworząc strukturę zawartości, bierz to pod uwagę.  ORBITOWANIE WOKÓŁ DANYCH  Ekosystem urządzeń wymaga możliwie prostych międzyplatformowych i wydajnych Ekosystem urządzeń wymaga możliwie prostych międzyplatformowych i wydajnych mechanizmów wymiany danych. Dostosowuj się do istniejących, ale i dopiero co mechanizmów wymiany danych. Dostosowuj się do istniejących, ale i dopiero co powstających możliwości, definiując dane w taki sposób, by: powstających możliwości, definiując dane w taki sposób, by: • Był możliwy wielokrotny (i elastyczny) dostęp do danych. • Były stosowane międzyplatformowe standardy. • Dane były nakierowane na długoterminową integralność. • Dane zawierały znaczące i stałe odwołania do całej zawartości. • Były wspierane operacje odczytu i zapisu.  IDENTYFIKACJA OKRĘTÓW WIDMO  Uwzględnienie w projekcie wszystkich możliwych konfiguracji urządzeń jest nie Uwzględnienie w projekcie wszystkich możliwych konfiguracji urządzeń jest nie lada wyzwaniem. Proces adaptacji można uprościć, stosując wysokopoziomowe lada wyzwaniem. Proces adaptacji można uprościć, stosując wysokopoziomowe i dobrze dobrane zbiory standardów dla różnych typów urządzeń. Standardy te i dobrze dobrane zbiory standardów dla różnych typów urządzeń. Standardy te można uzupełnić szczegółowymi informacjami o profilu urządzenia. można uzupełnić szczegółowymi informacjami o profilu urządzenia. Tego typu taksonomia może pomóc uszeregować obecnie dostępne urządzenia różnych producentów, pozwalając na dołączenie nowych typów urządzeń, które pojawią się w przyszłości.  DOWODZENIE FLOTĄ  Korzystanie z wielu różnych urządzeń w codziennym życiu pozwala nam rozdzielać zadania i informacje pomiędzy nimi. Gdy jakieś zadanie jest zarządzane przez kolekcję urządzeń, każde z nich może zastosować interakcje, z którymi radzi sobie najlepiej. Dzięki temu nie musimy dostarczać wszystkich aspektów danego zadania do każdego urządzenia, ponieważ nastawiamy się raczej na pracę w ekosystemie możliwości urządzeń. xviii A Ścinki Sześć najważniejszych spraw (o których nie mówiliśmy) Czujesz się, jakby coś Ci umknęło? Wiemy, co masz na myśli... Zawsze jest tak samo — myślisz, że to już koniec, a okazuje się, że jest tego więcej. Nie mogliśmy się pohamować, by nie przekazać Ci kilku dodatkowych szczegółów, o których nie wspomnieliśmy w treści książki. Gdybyśmy chcieli napisać o wszystkich ciekawych sprawach, książkę musiałbyś transportować w pancernej walizie na kołach. Rzuć okiem, co dla Ciebie wybraliśmy. 1. Testowanie na urządzeniach mobilnych 2. Zdalne debugowanie 3. Sprawdź, co obsługują przeglądarki 4. Interfejsy API urządzeń 5. Sklepy z aplikacjami oraz dystrybucja 6. RESS: REsponsive design + komponenty Server-Side 374 376 382 384 385 386 B Postaw swój serwer Gdzieś trzeba zacząć „Mobilny internet” nie istnieje bez słowa „internet”. Bez dwóch zdań. Jeśli chcesz się zająć tworzeniem witryn i aplikacji mobilnych, będziesz potrzebował serwera WWW. Prędzej czy później dojdzie do sytuacji, w której będziesz potrzebował części serwerowej swojej aplikacji. Możesz wtedy skorzystać z bezpłatnego lub komercyjnego hostingu albo uruchomić serwer na swoim komputerze. W tym dodatku opiszemy proces stawiania lokalnego serwera WWW z obsługą PHP z wykorzystaniem bezpłatnego oprogramowania. Czego będziesz potrzebował? Dostępny tylko lokalnie Windows i Linux — zainstaluj i skonfiguruj XAMPP-a Ciąg dalszy XAMPP-a Na koniec Mac — MAMP Sprawdź, czy zadokowałeś we właściwym porcie Dostań się do swojego serwera Informacje od phpinfo 388 389 390 391 392 393 394 396 xix Spis treści Instalowanie WURFL Jak wywęszyć urządzenia? Pierwszy krok do rozwiązania tajemnicy wykrywania urządzeń wymaga trochę zachodu. Każdy przyzwoity gliniarz wie, że trzeba zbierać poszlaki i przesłuchiwać świadków. Musimy zacząć od mózgu całej operacji, którym jest WURLF API dla PHP. Później przyjdzie kolej na mięśniaka — jeden plik XML zawierający informacje o możliwościach tysięcy urządzeń. Nie będzie jednak łatwo zmusić ich do współpracy, więc będziemy musieli poświęcić im trochę czasu i pogrzebać w konfiguracji. Skąd wziąć mózg? A co z mięśniakiem? Jak zmusić tę dwójkę do współpracy? Czas na porządki w systemie plików Zwróć na to uwagę! 398 399 400 401 402 Instalowanie SDK i narzędzi dla Androida Zadbaj o środowisko Aby gruntownie testować natywne aplikacje pod Androida, musisz przygotować sobie odpowiednie środowisko. Musisz dołączyć swój komputer do małego ekosystemu, do którego zagonisz wszystkie aplikacje Androida uruchamiane zarówno na wirtualnych (emulowanych), jak i rzeczywistych urządzeniach. Abyś mógł stać się pasterzem tego stada, pokażemy Ci, jak pobrać SDK (ang. Software Development Kit) Androida, jak zainstalować niektóre narzędzia dla tej platformy, jak utworzyć wirtualne urządzenia i jak instalować oraz odinstalowywać aplikacje. Pobieramy SDK Androida Wybierz odpowiednie narzędzia Tworzenie nowego urządzenia wirtualnego Znajdź właściwą ścieżkę Skorowidz 404 405 408 413 417 C D S xx Spis treści 7. Mobilne aplikacje w prawdziwym świecie Wyjątkowe mobilne aplikacje internetowe Jeszcze raz mnie pociągniesz za warkoczyki, to popamiętasz! Nie masz się gdzie schować. Znajdę cię wszędzie... Mobilne aplikacje są jak dzieci w klasie. Wiesz, chodzi o tę mieszankę fascynacji, przekonania o tym, że można zrobić niesamowite rzeczy, ale też tajemniczości i niepohamowanego rozrabiactwa. Staramy się trzymać pod kontrolą tych nadpobudliwych geniuszy, ustalając granice, a także dbając, by ich nie przekraczali. Przychodzi jednak czas zbierania korzyści z naturalnych talentów mobilnych aplikacji internetowych. Możemy zastosować metodę stopniowego ulepszania, by dopieścić interfejs na potrzeby lepiej rozwiniętych przeglądarek, a problemy z ciągłością dostępu do internetu rozwiązać za pomocą trybu offline. Możemy też wydobyć esencję mobilności, korzystając z geolokalizacji. Nie ma czasu do stracenia, zabierzmy się za tworzenie wyjątkowych mobilnych aplikacji internetowych! to jest nowy rozdział  267 Tartanator do poprawek Wygląda nieźle... Po zakończeniu pierwszej fazy projektu Tartanator wygląda już jak prawdziwa mobilna aplikacja internetowa. Pusta gadanina... Są przyciski. I pasek nawigacji. Nie zabrakło też fajnych efektów. Ładujemy fragmenty zawartości za pomocą AJAX-a. Redukujemy obciążenie łącza i liczbę żądań oraz ograniczamy przetwarzanie struktury DOM do minimum. Framework jQuery Mobile pomaga nam dostosować elementy formularza przygotowanego w HTML5 do możliwości urządzeń mobilnych. 268 Rozdział 7. Mobilne aplikacje w prawdziwym świecie Stylowa, to prawda. Mobilna — jak najbardziej. Szkopuł w tym, że nic nie robi! Czy aplikacje nie powinny czegoś robić? Spokojnie. Może się wydawać, że pierwsza faza prac nad projektem była pełna spektakularnych akcji, a tu nic. Jednak trzeba uczciwie przyznać, że położyliśmy całkiem solidne fundamenty pod aplikację. W tej chwili mamy prostą strukturę opartą na HTML5. Czas przejść na kolejny poziom! ...a tu potrzeba działania! W drugiej fazie prac będziemy bazować na tym, co udało nam się stworzyć w pierwszej, i zamienimy solidną (chociaż nie do końca funkcjonalną) aplikację internetową w to, co można by nazwać wyjątkową mobilną aplikacją! jesteś tutaj  269 Wyjątkowe mobilne aplikacje internetowe Aplikacje mobilne w prawdziwym świecie Mobilne aplikacje internetowe, które korzystają z dobrych wzorców mobilnego świata, mają kilka cech wspólnych. To, co można nazwać wyjątkowymi mobilnymi aplikacjami internetowymi, to aplikacje mobilne dostosowane do wymogów prawdziwego świata. Dopasowują się do możliwości konkretnych urządzeń użytkowników, korzystając z techniki stopniowego ulepszania. Jeśli chwilowo użytkownik nie ma dostępu do internetu, działają dalej w trybie offline. W wielu sytuacjach używają geolokalizacji oferowanej przez przeglądarki mobilne, by dostarczać treści powiązane z lokalizacją użytkownika. Wyjątkowe mobilne aplikacje internetowe wiedzą wszystko o trzech wymienionych cechach. W tym rozdziale przyjrzymy się im bliżej, dzięki czemu będziemy mogli tworzyć jeszcze lepsze aplikacje, biorąc to, co najlepsze, ze świata mobilności. Stopniowe ulepszanie Geolokalizacja Tryb offline 270 Rozdział 7. Zaostrz ołówek Zaostrz ołówek Zaostrz ołówek Mobilne aplikacje w prawdziwym świecie Co zrobimy, żeby zakończyć drugą fazę prac i sprawić, by Tartanator stał się wyjątkową mobilną aplikacją internetową? Przede wszystkim musimy się wziąć za to, co zostało do zaimplementowania zgodnie ze specyfikacją, którą podał Ewan w rozdziale 6. Zaznacz te wymagania, którymi się jeszcze nie zajęliśmy. Za chwilę sformułujemy na ich podstawie kluczowe zadania dla drugiej fazy projektu. i n k l aplikacja? i n t e r n e t o w a ! i n t e r n e t o w a ! N o w a w i t r y n a N o w a w i t r y n a Ko m u n i k a t p o w i t a l n y Ko m u n i k a t p o w i t a l n y J a k n a j p r o s t s z y t e k s t p l u s d o s t r o n y O n a s. Wy d a r z e n i a z w i ą z a n e z t a r t a n a m i l k a p o m y s ł ó w, M a m t u k i a l e n i e w i e m, c z y s ą r e a l n e. Ta r t a n y ! . . To główny element całego pomysłu. Czy nadaje się na aplikację? Ta r t a n a t o r ! Ta r t a n a t o r ! M o ż e c a ł ą a p l n a z w a ć i k a c j ę (w i t r y n ę ) „Ta r t a n a t o r ” ? B r z m i n i e ź l e ! Strona O nas Historia organizacji Tartany bez Granic. Odsyłacze do informacji o historii tartanów. Tego jeszcze nie mamy. Koniecznie trzeba uzupełnić! Strona Wydarzenia Strona Wydarzenia - Byłoby świetnie, gdyby aplikacja mogła się łączyć z naszą bazą międzynarodowych wydarzeń. - Czy telefony użytkowników mogą pomóc w znalezieniu najbliższego wydarzenia? - Czy z pełną implementacją wydarzeń możemy poczekać do drugiej albo trzeciej fazy prac nad witryną? - Użytkownicy powinni móc - Użytkownicy powinni móc przeglądać wzory tartanów przeglądać wzory tartanów na swoich telefonach. na swoich telefonach. Mnóstwo obrazków z tartanami! - Czy nie byłoby świetnie, gdyby użytkownicy mogli tworzyć własne wzory tartanów? Da się to zrobić? - Kolekcja tartanów zawierająca zarówno popularne tradycyjne wzory, jak i nowoczesne oraz stworzone przez użytkowników. jesteś tutaj  271 Cele drugiej fazy projektu Tartanator Zaostrz ołówek. Zaostrz ołówek. Zaostrz ołówek. Rozwiązanie Kluczowe zadania drugiej fazy projektu tak naprawdę służą osiągnięciu dwóch głównych celów: 1 2 Dokończenie prac nad edytorem własnych tartanów. Mamy już prototyp formularza. Teraz musimy przejść do konkretów i sprawić, by formularz zaczął działać. Musimy też ulepszyć formularz, by był bardziej użyteczny w lepszych smartfonach (przy okazji dodamy kilka wodotrysków). Stworzenie dynamicznej strony Wydarzenia, w której da się wyszukiwać i która „zna” lokalizację użytkownika. Musimy umożliwić wyszukiwanie wydarzeń powiązanych z tartanami, które odbywają się najbliżej aktualnej lokalizacji użytkownika. W tym celu skorzystamy ze źródła danych z informacjami o wydarzeniach oraz geolokalizacji. i n k l aplikacja? i n t e r n e t o w a ! i n t e r n e t o w a ! N o w a w i t r y n a N o w a w i t r y n a Ko m u n i k a t p o w i t a l n y Ko m u n i k a t p o w i t a l n y J a k n a j p r o s t s z y t e k s t p l u s d o s t r o n y O n a s. Wy d a r z e n i a z w i ą z a n e z t a r t a n a m i l k a p o m y s ł ó w, M a m t u k i a l e n i e w i e m, c z y s ą r e a l n e. Ta r t a n y ! . . To główny element całego pomysłu. Czy nadaje się na aplikację? Ta r t a n a t o r ! Ta r t a n a t o r ! M o ż e c a ł ą a p l n a z w a ć i k a c j ę (w i t r y n ę ) „Ta r t a n a t o r ” ? B r z m i n i e ź l e ! - Użytkownicy powinni móc - Użytkownicy powinni móc przeglądać wzory tartanów przeglądać wzory tartanów na swoich telefonach. na swoich telefonach. Mnóstwo obrazków z tartanami! - Czy nie byłoby świetnie, gdyby użytkownicy mogli tworzyć własne wzory tartanów? Da się to zrobić? - Kolekcja tartanów zawierająca zarówno popularne tradycyjne wzory, jak i nowoczesne oraz stworzone przez użytkowników. Strona O nas Historia organizacji Tartany bez Granic. Odsyłacze do informacji o historii tartanów. Tego jeszcze nie mamy. Koniecznie trzeba uzupełnić! Strona Wydarzenia Strona Wydarzenia - Byłoby świetnie, gdyby aplikacja mogła się łączyć z naszą bazą międzynarodowych wydarzeń. - Czy telefony użytkowników mogą pomóc w znalezieniu najbliższego wydarzenia? - Czy z pełną implementacją wydarzeń możemy poczekać do drugiej albo trzeciej fazy prac nad witryną? 272 Rozdział 7. Łukasz: To pierwsze duże wymaganie wygląda groźnie, nie sądzicie? Może rozbijemy je na mniejsze zadania? Kuba: Ale chwila, zanim się tym zajmiemy, co z obiecanymi tekstami na stronę O nas i opisem historii tartanów? Łukasz: A, właśnie! Sytuacja wygląda tak, że żona człowieka, który miał napisać te teksty dla Tartanów bez Granic, właśnie urodziła. Świeżo upieczony tatuś obudził się, nomen omen, z ręką w nocniku — nic wcześniej nie napisał, a teraz odkrył, że dziecko jest bardziej zajmujące, niż sądził, więc w najbliższym czasie nie będzie mógł brać udziału w projekcie. Niespodzianka, co? Jednym słowem, tę sprawę zostawiamy na później. Kuba: No cóż, przynajmniej jedno zadanie mniej. Pomówmy o pracach nad edytorem tartanów. Nie chcę się chwalić, ale już to trochę przemyślałem. Pomajstrowałem nawet przy formularzu i dodałem trochę JavaScriptu. Przemek: Świetnie. Formularz będzie śliczny i w ogóle, ale musimy się przecież jeszcze zająć częścią serwerową, która wykona całą ciężką pracę... Kuba: Oj tam, część serwerowa... Uwierzcie, ulepszenie interfejsu formularza to wielka rzecz. Przemek: Jasne, jasne. No dobra — zgłaszam się na ochotnika do pisania skryptów PHP. Kto się zajmie sprawą wydarzeń? Kuba: A czy moglibyśmy się skupić tylko na tworzeniu nowych tartanów? Kiedy tylko z tym skończymy, wrócimy do tematu wyszukiwania wydarzeń. Mój mózg pozwala mi na skupienie się tylko na jednym zadaniu naraz. Przemek: Może tak być, ale pod warunkiem że uporamy się z tym szybko. Mamy dosyć napięty harmonogram. Do zrobienia — implementacja edytora tartanów To nasz plan działania związany z edytorem tartanów. Zaczniemy od tego!  Ulepszyć istniejący formularz, by mógł wykorzystać możliwości oferowane przez nowsze przeglądarki mobilne.  Napisać kod strony serwerowej, który jest odpowiedzialny za przetwarzanie danych z formularza oraz generowanie zasobów (obrazów, kodu HTML itp.) na potrzeby tartanów utworzonych przez użytkownika.  Zapewnić możliwość pracy w trybie offline w tej części aplikacji. 273 Mobilne aplikacje w prawdziwym świeciejesteś tutaj  Fajne ulepszenia Na miejsca, gotowi, ulepszać! Zapnijcie pasy! Zamierzamy w rekordowo krótkim czasie wprowadzić sporo ulepszeń do formularza Tartanatora. Zrobiliśmy, co było trzeba Zaprojektowaliśmy formularz, który spełnia minimalne wymagania. Żaden użytkownik nie pozostanie na lodzie (no dobra, może jakiś by się znalazł). Zobacz, jak wygląda formularz w przeglądarce z wyłączoną obsługą JavaScriptu. Teraz możemy ulepszać Co prawda formularz działa na każdym sprzęcie, ale ma kilka drobnych wad. Na przykład sześć pól z rozwijaną listą do wyboru koloru sprawdzi się w przypadku lepszych urządzeń, ale już niekoniecznie na tych nie tak dobrych. Skoro podstawowa wersja formularza działa, możemy się zająć dodawaniem ulepszeń, dzięki którym korzystanie z niego na smartfonach będzie prawdziwą przyjemnością. Pierwszy krok do wyjątkowych mobilnych aplikacji internetowych: dopracuj interfejs użytkownika na potrzeby przeglądarek, które go dobrze wspierają. Formularz działa prawidłowo nawet bez żadnego wsparcia ze strony JavaScriptu! W przeglądarkach na nowszych smartfonach wygląda jednak zdecydowanie lepiej. Spokojnie Nie wpadaj w panikę na myśl o własnym widżecie. JavaScript już się nie może doczekać, by Ci w tym pomóc. Kilku genialnych programistów frontendowych opracowało już te ulepszenia. To ciekawe, że kiedy trzeba pracować nad mobilnymi aplikacjami internetowymi, wszyscy są tacy podekscytowani i produktywni. Pokażemy Ci najistotniejsze elementy (oczywiście będziesz mógł poświęcić trochę czasu na dogłębniejszą analizę kodu), ale sam nie będziesz musiał napisać ani linijki! 274 Rozdział 7. Możemy się pozbyć tych powtarzających się zestawów pól (które niepotrzebnie zajmują dużo przestrzeni) i w zamian utworzyć pojedynczy widżet. Mobilne aplikacje w prawdziwym świecie Tylko jeden zestaw kontrolek koloru i rozmiaru, a nie sześć. klik Po kliknięciu pola „Wybierz kolor” rozwija się taki widżet. Ulepszamy formularz Zamiast sześciu pól — zajmujących dużo miejsca i średnio funkcjonalnych — zastosujemy jeden widżet. Dzięki niemu użytkownicy będą mogli dodać tyle kolorów, ile chcą. Zastosujemy w tym celu skrypt JavaScript, który usunie wszystkie pola koloru i rozmiaru z wyjątkiem pierwszego zestawu. Własny widżet dla pola wyboru koloru Domyślny interfejs pola wyboru możemy zastąpić widżetem pochodzącym z frameworku jQuery Mobile. Dzięki temu w każdej pozycji listy rozwijanej będziemy mogli wyświetlić próbkę koloru. Widżet, który zamierzamy zastosować, jest wyświetlany podobnie jak okno dialogowe, tyle że zawiera dostępne opcje koloru. Dla zainteresowanych jQuery i JavaScriptem. Dla maniaków Jeśli nie jest Ci obca biblioteka jQuery, z pewnością wielokrotnie się spotkałeś z konstrukcją $(document).ready (lub nawet z niej korzystałeś). Metoda ready() przypomina (w pewnym stopniu) zdarzenie przeglądarki body.onload — jest wywoływana po załadowaniu i utworzeniu struktury DOM. Programiści korzystający z jQuery zazwyczaj otaczają swój kod właśnie tą konstrukcją, by został wykonany dopiero wtedy, gdy struktura DOM jest gotowa. Podczas korzystania z jQuery Mobile (jQM) zwykle nie będziesz używał konstrukcji $(document). ready. jQM wprowadza bowiem kilka nowych zdarzeń związanych z ładowaniem strony, anajistotniejsze z nich to pageinit oraz pagecreate. Zdarzenie pagecreate jest zgłaszane pozakończeniu inicjalizacji struktury DOM danej strony przez jQuery i jQM, ale zanim zostaną wyświetlone widżety. Z kolei zdarzenie pageinit jest zgłaszane po wyrenderowaniu całej strony, łącznie z widżetami. Pamiętaj, że później wyświetlane strony są często wstawiane do istniejącej struktury DOM, co znaczy, że zdarzenia pagecreate i pageinit mogą być wielokrotnie zgłaszane podczas pojedynczego ładowania strony. Framework jQuery Mobile wprowadza także wiele „mobilnych” zdarzeń związanych na przykład z dotykiem, zmianą orientacji urządzenia czy z przejściami. Nie wszystko wydaje Ci się jasne? Nie przejmuj się, nam też zajęło chwilę ogarnięcie tego. Więcej na ten temat znajdziesz w dokumentacji jQM (http://jquerymobile.com/demos). jesteś tutaj  275 Kolor i rozmiar zamknięte w widżecie Widżet zarządzający listą kolorów i rozmiarów Usunęliśmy wszystkie zestawy pól kolor – rozmiar z wyjątkiem jednego. Musimy sprawić, by za pomocą pozostawionej pary pól można było zdefiniować dowolną liczbę kolorów. Aby to zrobić, musimy dodać nowy przycisk — Dodaj wybrany kolor. Po jego kliknięciu wybrany kolor i liczba szwów muszą zostać wstawione do listy ( ul ) jako element li . W tym elemencie umieścimy też ukryte pole formularza, w którym zapiszemy kolor i rozmiar. Tym zajmie się JavaScript. Kliknięcie elementu li znajdującego się na liście ma spowodować jego usunięcie. Z kolei przycisk Utwórz! ma służyć do wygenerowania wzoru tartanu na podstawie zdefiniowanych kolorów. Tło pola select odpowiada aktualnie wybranemu kolorowi. Podczas zmiany położenia suwaka funkcja sprawdza, czy liczba szwów jest parzysta. To jest obejście problemu ze wsparciem dla atrybutu step w polach typu range. Kliknięcie elementu listy powoduje jego usunięcie. Przycisk zatwierdzający formularz. Ten przycisk staje się widoczny po dodaniu do listy co najmniej jednej pary kolor – rozmiar. Ulepszona wersja formularza z pliku build.php (fragment) Pamiętaj, że formularz znajduje się w pliku build.php. Nie zajęliśmy się jeszcze stroną serwerową. Kliknięcie przycisku „Utwórz!” na razie nie działa. Pozostawiona para pól kolor – rozmiar. Po kliknięciu przycisku „Dodaj wybrany kolor” do listy jest dodawany ustawiony kolor. Lista par kolor – rozmiar. ul#colorlist Weź to w obroty Mamy dobrą wiadomość. Nie musisz nic sam robić, by udoskonalić formularz. Zrobiliśmy to za Ciebie. Punktem wyjścia jest katalog rozdzial7, w którym umieściliśmy skrypt JavaScript z zaimplementowanymi usprawnieniami. Sam sprawdź! Zobacz też, jak to działa w mobilnej przeglądarce. 276 Rozdział 7. Mobilne aplikacje w prawdziwym świecie Zaglądamy pod przykrywkę Obiecaliśmy, że nie będziesz musiał napisać ani kawałka kodu JavaScript, ale może uda nam się skłonić Cię do zainteresowania się, co właściwie ten kod robi. W skrócie: jest kilka istotnych działań, które mają miejsce po załadowaniu strony z formularzem i utworzeniu struktury DOM (zdarzenie pagecreate) oraz po zakończeniu operacji przeprowadzanych przez framework jQuery Mobile (zdarzenie pageinit). W tych funkcjach inicjalizujących przypisaliśmy funkcje do różnych zdarzeń (zmiany pola formularza, kliknięć, zatwierdzenia formularza itp.). Dzięki temu udało się wzbogacić interakcję i poprawić funkcjonalność widżetu. Zrób to sam! Zaprzyjaźnij się z kodem. Przeznacz trochę czasu na zapoznanie się z aktualizacjami w plikach aplikacji Tartanator, a zwłaszcza ze skryptem tartanator.js.   ?Kto za co odpowiada?  Dopasuj każdą z funkcji JavaScript umieszczonych w pliku tartanator.js do realizowanych zadań oraz zdarzeń, które je wywołują. W główkowaniu mogą Ci pomóc komentarze umieszczone w skrypcie. Zadanie dodatkowe! Nazwa funkcji Realizowane zadanie Zdarzenie, które ją wywołuje onStitchSizeChange() styleColorListItem() buildAddButton() onColorListChange() addColor() Odświeża elementy ul i li bieżącej listy kolorów. pageinit oraz change (pola wyboru koloru) Tworzy przycisk dodający parę kolor – rozmiar i wstawia go do struktury DOM. click (przycisk Dodaj wybrany kolor) Ustawia kolor tła pola wyboru koloru na aktualnie wybrany. pageinit Tworzy ukryte pole formularza, umieszcza je w nowym elemencie li , a następnie dołącza ten element do istniejącej listy kolorów. click (element bieżącej listy kolorów) oraz po dodaniu nowego koloru do listy Za pomocą CSS umieszcza kolorową ramkę (próbkę) z lewej strony każdego elementu opcji rozwijanej listy kolorów. change (po zaktualizowaniu wartości pola rozmiaru) setColorSelectStyle() Sprawdza, czy ustawiony rozmiar jest liczbą parzystą. pagecreate jesteś tutaj  277 Rozwiązanie ćwiczenia No tak, to było ulepszanie frontendu  Ulepszyć istniejący formularz, by mógł wykorzystać możliwości Zrobione! oferowane przez nowsze przeglądarki mobilne.  Napisać kod strony serwerowej, który jest odpowiedzialny za przetwarzanie danych z formularza oraz generowanie zasobów (obrazów, kodu HTML itp.) na potrzeby tartanów utworzonych przez użytkownika.  Zapewnić możliwość pracy w trybie offline w tej części aplikacji. Następne na warsztat!  ?Kto za co odpowiada?  Rozwiązanie  Dopasuj każdą z funkcji JavaScript umieszczonych w pliku tartanator.js do realizowanych zadań oraz zdarzeń, które je wywołują. W główkowaniu mogą Ci pomóc komentarze umieszczone w skrypcie. Nazwa funkcji Realizowane zadanie Zdarzenie, które ją wywołuje onStitchSizeChange() styleColorListItem() buildAddButton() onColorListChange() addColor() Odświeża elementy ul i li bieżącej listy kolorów. Tworzy przycisk dodający parę kolor – rozmiar i wstawia go do struktury DOM. Ustawia kolor tła pola wyboru koloru na aktualnie wybrany. Tworzy ukryte pole formularza, umieszcza je w nowym elemencie li , a następnie dołącza ten element do istniejącej listy kolorów. Za pomocą CSS umieszcza kolorową ramkę (próbkę) z lewej strony każdego elementu opcji rozwijanej listy kolorów. pageinit oraz change (pola wyboru koloru) click (przycisk Dodaj wybrany kolor) pageinit click (element bieżącej listy kolorów) oraz po dodaniu nowego koloru do listy change (po zaktualizowaniu wartości pola rozmiaru) setColorSelectStyle() Sprawdza, czy ustawiony rozmiar jest liczbą parzystą. pagecreate 278 Rozdział 7. Mobilne aplikacje w prawdziwym świecie Wszystko o ulepszeniach interfejsu Wywiad tygodnia: Ulepszenia: czy to jedynie kosmetyczne poprawki? Redaktor: Cześć, muszę o to zapytać. Zrobiliśmy właśnie szybką rundkę po ulepszeniach interfejsu za pomocą JavaScriptu w projekcie, który wykorzystuje framework jQuery Mobile. Czy naprawdę było warto? Ulepszenia interfejsu: To, na co pozwala jQuery Mobile i jak ułatwia tworzenie interfejsów wprost stworzonych dla mobilnych przeglądarek, jest naprawdę niesamowite, ale rozumiem, o co ci chodzi. Chciałbym zarysować szerszy sens tego typu działań. Redaktor: Zmieniłeś sposób renderowania natywnych elementów formularza. Pole wyboru koloru używa teraz widżetu jQuery Mobile. Czy nie przesadzasz? Ulepszenia: Zgodzę się, że mieszanie w natywnych kontrolkach formularza jest trochę kontrowersyjne. Nie kłócę się z tym jako ogólną zasadą. Jednak w przypadku pola wyboru koloru nie byłoby możliwe osiągnięcie takiego efektu, czyli kolorowych próbek przy nazwach kolorów, za pomocą tradycyjnych pól wyboru. Zwróć jednak uwagę, że kod HTML odpowiadający za to pole ( select ) nadal jest semantycznie poprawny. Ja je tylko trochę poprawiłem, by stało się bardziej użyteczne. Podsumowując, masz rację, że do zmiany natywnych kontrolek formularza należy podchodzić z dużą ostrożnością. Redaktor: Słuchamy... Ulepszenia: Bez względu na to, czy stosujesz jakiś framework, czy piszesz od podstaw, najlepszym rozwiązaniem jest projektowanie z myślą o minimalnych wymaganiach, a następnie wprowadzanie ulepszeń. Redaktor: Za pomocą JavaScriptu? Ulepszenia: Otwórz swój umysł... to wykracza daleko poza JavaScript. Mówię tu o sytuacji, w której zaczynasz od zdefiniowania podstawowej funkcjonalności i zawartości, a następnie stopniowo je ulepszasz. W ten sposób wychodzisz naprzeciw możliwościom oferowanym przez różne urządzenia mobilne. Redaktor: Tak, znam to. Dodaje się zwykle jakieś wodotryski... Ulepszenia: Chciałbym wierzyć, że mój wkład w sprawę to coś więcej niż tylko zaokrąglone wierzchołki i gradienty. Przed chwilą zaczęliśmy pracę od dosyć ograniczonego i nieszczególnego przypadku, a skończyliśmy na nie dość, że ładnym, to jeszcze funkcjonalnym formularzu. Formularz do tworzenia tartanów w przeglądarce Androida jesteś tutaj  279 Nowa generacja tartanów ...a teraz pora na backend Punktem wyjścia w rozdziale 7. jest struktura plików przedstawiona poniżej. Dołączenie elementów działających po stronie serwera wymaga przeprowadzenia kilku prostych operacji. Skopiuj całą zawartość katalogu extras/scripts do katalogu rozdzial7. Po zakończeniu kopiowania w katalogu rozdzial7 powinny się pojawić trzy nowe pliki: config.php, generate.php i image.php oraz katalog inc (zawierający dwa pliki). rozdzial7 generate.php image.php config.php inc build.php css dialogs extras findevent.php index.php js tartans tartans.php 280 Szybki przegląd generowania tartanów Dane przesłane z formularza (POST) Na podstawie danych przesłanych przez formularz skrypt generate.php tworzy kilka zasobów. generate.php Plik XML Plik HTML Plik XML zawierający reprezentację wzoru tartanu jest zapisywany w katalogu tartans/data/. Plik HTML dla tartanu jest zapisywany w katalogu tartans/. Ten plik HTML jest tworzony w oparciu o plik szablonu tartan-template.php zapisany w katalogu tartans/. Plik PNG Obraz reprezentujący tartan jest zapisywany w formacie PNG. Rozdział 7. Mobilne aplikacje w prawdziwym świecie Dwie twarze skryptu generate.php Sposób, w jaki skrypt generate.php zachowuje się po utworzeniu zasobów związanych z tartanem, zależy od sposobu jego wywołania. Żądanie za pomocą AJAX-a W przeglądarkach, które prawidłowo obsługują AJAX-a, skrypt JavaScript znajdujący się w pliku build.php przesyła dane z formularza do skryptu generate.php za pomocą obiektu XMLHttpRequest (w skrócie XHR). Jeśli operacja się powiedzie, skrypt generate.php w odpowiedzi przesyła adres URL nowo utworzonego pliku HTML dla zaprojektowanego tartanu. Zawartość tej strony jest następnie umieszczana w strukturze DOM bieżącej strony. Asynchroniczne żądanie zrealizowane za pomocą XHR Postaraliśmy się zapewnić wsparcie zarówno dla przeglądarek obsługujących AJAX-a, jak i tych, które go nie obsługują. Asynchroniczne żądanie (XHR) dane POST build.php URL pliku HTML dla tartanu generate.php W tej metodzie nigdy nie dochodzi do pełnego przeładowania strony. Zawartość strony nowego tartanu jest wstawiana do struktury DOM strony edytora tartanów. nowy-tartan .html Formularz przesłany bezpośrednio W przypadku przeglądarek, które nie obsługują JavaScriptu ani obiektu XMLHttpRequest, formularz jest przesyłany do skryptu generate.php tradycyjną metodą. Po utworzeniu w skrypcie zasobów związanych z tartanem przeglądarka jest przekierowywana do nowo utworzonej strony tartanu. Bez względu na metodę podstawowe zadanie skryptu generate.php jest jedno: utworzyć zasoby dla nowego tartanu. Tradycyjna metoda — przekierowanie do nowo utworzonej strony tartanu dane POST przekierowanie build.php generate.php nowy-tartan .html W tej metodzie klient jest przekierowywany do nowo utworzonej strony tartanu (dochodzi do pełnego przeładowania strony). jesteś tutaj  281 Lista tartanów Jeszcze tylko jedno... Teraz, kiedy użytkownicy mogą już tworzyć własne wzory, lista tartanów powinna się zmieniać. Umieść poniższy kod w pliku tartans.php — dołącza on skrypt generujący elementy li dla każdego istniejącego tartanu. Zrób to sam! ul data-role=”listview” data-filter=”true” ?php include(‘inc/list.php’); ? /ul tartans.php Czas utworzyć trochę tartanów! Za pomocą formularza ze strony build.php zaprojektuj kilka lub kilkanaście wzorów tartanów. Twoje projekty powinny się pojawić na liście tartanów na głównej stronie (tartans.php). Ćwiczenie Nie istnieją głupie pytania P: Pomocy! Coś tu nie działa prawidłowo! O: Jeśli masz problem z uruchomieniem formularza lub nie udaje Ci się utworzyć nowego tartanu, powinieneś sprawdzić kilka spraw. Przede wszystkim sprawdź, czy istnieje katalog tartans i czy masz możliwość zapisywania w jego podkatalogach. Sprawdź też, czy w katalogu tartans znajduje się plik tartan-template.php. Na koniec powinieneś trzy razy sprawdzić znacznik form w pliku build.php pod kątem atrybutów action i method. P: Jak działa strona z listą tartanów? O: Plik list.php dołączony do strony szuka w katalogu tartans/ plików HTML i tworzy z nich listę. Dla każdego z nich pobiera powiązany z nim plik XML (z katalogu tartans/data/) i odczytuje z niego dodatkowe informacje, jak choćby nazwę. Następnie tworzy kod elementu li dla każdego tartanu, zawierający odsyłacz do strony HTML tartanu. P: O co dokładnie chodzi z tym plikiem XML? O: Dane opisujące wzory tartanów postanowiliśmy umieścić w pliku XML z kilku powodów. Po pierwsze, to fajny, prosty i przenośny format danych. Po drugie, dzięki temu unikamy konieczności używania bazy danych (co oznacza mniej pracy dla Ciebie!). P: A tak przy okazji — czym są te wspaniałe mobilne aplikacje internetowe, o których mówiliście wcześniej? Czy to jakiś standard, inicjatywa, czy coś jeszcze innego? O: Nic z tych rzeczy. Po prostu tak nazwaliśmy mobilne aplikacje internetowe, które wykorzystują dobrodziejstwa oferowane przez urządzenia mobilne i ich przeglądarki. 282 Rozdział 7. Dobra robota — dwa zadania z trzech załatwione Coraz bardziej zbliżamy się do wyjątkowej mobilnej aplikacji internetowej. Udoskonaliliśmy już interfejs, z czego skorzystają użytkownicy lepszych przeglądarek. Zadbaliśmy też w końcu o to, by aplikacja coś robiła!  Ulepszyć istniejący formularz, by mógł wykorzystać możliwości oferowane przez nowsze przeglądarki mobilne.  Napisać kod strony serwerowej, który jest odpowiedzialny za przetwarzanie danych z formularza oraz generowanie zasobów (obrazów, kodu HTML itp.) na potrzeby tartanów utworzonych przez użytkownika.  Zapewnić możliwość pracy w trybie offline w tej części aplikacji. Musimy sobie poradzić jeszcze z tym. Ale to jeszcze nie wszystko Teraz musimy się zająć trzecim elementem układanki — Tartanator musi działać offline. To frustrujące. Chciałem się pochwalić koledze tartanem, który zaprojektowałem, ale był tak słaby zasięg, że nie udało mi się połączyć z siecią. Koniec końców, nie udało mi się nic pokazać. W przypadku urządzeń mobilnych nie możemy zagwarantować dobrego ani nawet jakiegokolwiek zasięgu sieci. Musimy zrobić coś, co zagwarantuje działanie aplikacji Tartanator nawet bez aktywnego połączenia z internetem. 283 Mobilne aplikacje w prawdziwym świeciejesteś tutaj  Tryb offline Tryb offline to ważna sprawa Chcąc zapewnić wysoki poziom funkcjonalności i użyteczności aplikacji, musimy się zająć zachowaniem witryny lub aplikacji, w przypadku gdy nie jest dostępne połączenie z internetem. Musimy się teraz poważnie zastanowić nad tym, co zrobić, by Tartanator działał lepiej w przypadku braku połączenia. Z całą pewnością kilka elementów musi być dostępnych offline. Jak możemy decydować, co jest dostępne offline? Czy to jest w ogóle możliwe? Możemy użyć tzw. pliku manifestu, w którym definiuje się składniki aplikacji dostępne offline. Zamanifestuj to! Podręczna pamięć aplikacji (ang. Application Cache) jest częścią specyfikacji HTML5. Pozwala na ustalanie, które zasoby są przechowywane na potrzeby trybu offline. Służy do tego plik manifestu (ang. cache manifest). Plik manifestu jest umieszczany na serwerze, a jego zadaniem jest przekazywanie szczegółowych informacji na temat przechowywania określonych zasobów w pamięci podręcznej przeglądarki użytkownika. W ten sposób będziemy mogli określić, które pliki aplikacji Tartanator mają być dostępne w trybie offline. Przeglądarki, które obsługują pamięć podręczną aplikacji (często określa się ją w skrócie jako appCache), udostępniają obiekt window.applicationCache i powiązane z nim zdarzenia, z których możemy korzystać z poziomu JavaScriptu. Większość nowoczesnych przeglądarek obsługuje ten mechanizm. Niechlubnymi wyjątkami są Internet Explorer 9 i Opera Mini. Zastosowanie pliku manifestu w żaden sposób nie wpłynie jednak na ich pracę — po prostu go zignorują. wYSiL SzaRe KomóRKi Czy umiałbyś wyjaśnić, dlaczego przeglądarka Opera Mini może mieć problem ze wsparciem dla tego mechanizmu? 284 Rozdział 7. Mobilne aplikacje w prawdziwym świecie Prosty przepis na plik manifestu Aby utworzyć plik manifestu i zastosować go w witrynie lub aplikacji, trzeba wykonać trzy kroki: 1 2 3 Napisać plik manifestu. Do znacznika html wszystkich pożądanych stron dodać atrybut manifest i przypisać mu adres URL pliku manifestu (może być względny). Sprawić, by plik manifestu był udostępniany z prawidłowym nagłówkiem typu. Plik musi mieć nagłówek content-type równy text/cache- manifest. W przeciwnym razie nie będzie działać. Podejrzanie prosta składnia pliku manifestu Zawartość pliku manifestu wygląda na mało skomplikowaną. W sekcji CACHE: (nie jest to wymagane, ale powinno się jednoznacznie określać tę sekcję) wypisuje się zasoby, które mają być dostępne offline. Ten wiersz jest wymagany (dokładnie w takiej postaci). CACHE MANIFEST # tak się umieszcza komentarze 1 Adresy URL mogą być względne (jak w tym przypadku) lub bezwzględne (np. http://...). CACHE: index.html foo/bar.html baz.html css/styles.css icons/plus.png Plik nie musi się nazywać „manifest”, ale powinien mieć rozszerzenie „.appcache”. manifest.appcache Następnie trzeba zaktualizować stronę (lub strony), dodając atrybut manifest odwołujący się do pliku manifestu. Trzeba też zadbać o to, by plik był udostępniany z prawidłowym nagłówkiem content-type (lub inaczej MIME-type). W przypadku serwera Apache wystarczy dodać odpowiedni wpis do pliku konfiguracyjnego lub, co jest lepszym rozwiązaniem, do pliku .htaccess umieszczonego w głównym katalogu witryny. 2 3 !DOCTYPE html html manifest=”manifest.appcache” head AddType text/cache-manifest .appcache Ten wpis informuje serwer WWW, by udostępniał pliki o rozszerzeniu .appcache z nagłówkiem content-type równym text/ cache-manifest. Plik musi być tego typu, bo w przeciwnym przypadku przeglądarka go nie rozpozna. .htaccess jesteś tutaj  285 Przechowaj mnie Jak zwykle diabeł tkwi w szczegółach W teorii zarządzanie zasobami w trybie offline za pomocą pliku manifestu jest proste. Wystarczy wypisać pliki, które mają być dostępne offline, dodać atrybut manifest do znacznika html na stronach i już! Sprawy nie wyglądają jednak tak różowo. Zmuszenie całego mechanizmu, by działał tak, jak chcemy, może być trudne, a czasem wręcz frustrujące. Po drodze czai się wiele niebezpieczeństw, które mogą Cię sprowadzić na manowce. Koniecznie musisz się zaopatrzyć w dobre narzędzie, które pomoże Ci zapanować nad tym, co się dzieje. Na ratunek przybywają narzędzia Silnik WebKit dostarcza narzędzie Web Inspector, które jest dostępne zarówno w przeglądarce Chrome, jak i Safari (która też jest oparta na tym silniku). Szczegóły dotyczące mechanizmu Application Cache znajdziesz w zakładce Resources. Szczegółowe informacje o podręcznej pamięci aplikacji znajdują się na zakładce Resources w przeglądarce Chrome. W przeglądarce Safari wygląda to niemal identycznie. Usuwanie źle zdefiniowanych ustawień z plików manifestu w przeglądarce mobilnej może być bardzo przykrym doświadczeniem. 286 Rozdział 7. Podczas pracy z plikami manifestu łatwo jest się zaciąć. Zachowanie mechanizmu podręcznej pamięci aplikacji może być momentami niezrozumiałe i trudne w debugowaniu. Niepoprawne Obejr zyj to! pliki manifestu mogą sporo namieszać, a znalezienie przyczyny nieprawidłowego zachowania bez odpowiednich narzędzi może być trudne. Proponujemy, byś podczas tworzenia i testowania plików manifestu dla aplikacji (również dla Tartanatora) korzystał z przeglądarek Chrome lub Safari. Musisz też wiedzieć, że mechanizm podręcznej pamięci aplikacji nie jest obsługiwany w Internet Explorerze do wersji 10. (która w chwili pisania książki jest nadal w fazie testów). Dobrym pomysłem jest też tworzenie i testowanie aplikacji w przeglądarce desktopowej, a nie mobilnej. Udostępniaj pliki manifestu z prawidłowym nagłówkiem content-type Mobilne aplikacje w prawdziwym świecie Nigdy się nie bawiłam plikami .htaccess i nie wiem nawet, czy mój hosting na to pozwala. Jest bardzo prawdopodobne, że możesz używać plików .htaccess na swoim serwerze — zarówno hostowanym, jak i lokalnym. My jednak obejdziemy się bez nich. Wiemy, że możesz używać PHP. Skoro tak, wygenerujemy plik manifestu za pomocą PHP i przy okazji ustawimy nagłówek content-type na text/cache-manifest. Zaimplementuj podstawowy plik manifestu dla Tartanatora. Ćwiczenie 1 2 3 4 Utwórz nowy plik i zapisz go w katalogu rozdzial7 pod nazwą manifest.appcache.php. Na samym początku pliku umieść poniższy wiersz kodu: Rozszerzenie .php jest potrzebne, by mógł być wykonany kod PHP umieszczony w tym pliku. ?php header(’Content-type: text/cache-manifest’); ? W ten sposób ustawiamy nagłówek content-type na text/cache-manifest. Dodaj sekcję CACHE: i wypisz główne strony witryny, a także pliki JavaScript i CSS. Do znacznika html w plikach index.php, build.php, tartans.php i findevent.php dodaj atrybut manifest. Zastosuj składnię przedstawioną na stronie 285. jesteś tutaj  287 Problemy z zasobami Rozwiązanie ćwiczenia Gotowy plik manifest.appcache.php powinien wyglądać tak jak poniżej. Zwróć uwagę, że dołączyliśmy też pliki CSS i JavaScript z serwisu CDN (ang. Content Delivery Network) hostowanego przez jQuery. Poza względnymi adresami URL zasobów witryny... ?php header(‘Content-type: text/cache-manifest’); ? CACHE MANIFEST CACHE: index.php build.php tartans.php findevent.php css/styles.css js/tartanator.js http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css http://code.jquery.com/jquery-1.7.1.min.js http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js ...możesz też używać bezwzględnych adresów zasobów znajdujących się w innych domenach. Znaczniki html na stronach składających się na aplikację Tartanator powinny wyglądać w ten sposób. html manifest=”manifest.appcache.php” manifest.appcache.php W związku z tym, że do generowania pliku manifestu użyliśmy PHP, nie możemy zastosować rozszerzenia .appcache. Chyba coś robię nie tak. Na stronach przestały być wyświetlane obrazki i ikony, nawet kiedy jestem w trybie online! 288 Rozdział 7. Wszystko o pliku manifestu Wywiad tygodnia: Jak zmusić appCache, by zrobił, co mu każemy Sfrustrowany programista: Wrr... Przejrzałem poszczególne strony Tartanatora i widzę, że brakuje mnóstwa obrazów i ikon, nawet kiedy pracuję online. appCache: No cóż, nie do końca tak jest. Wiesz już co nieco o sekcji CACHE, ale nie słyszałeś jeszcze o sekcji NETWORK. appCache: No cóż, to dlatego, że do listy w sekcji CACHE nie dołączyłeś tych zasobów. Powinieneś je koniecznie dodać do pliku manifestu. SP: Czyli muszę dołączyć wszystkie zasoby witryny, bo w przeciwnym razie się nie pojawią? appCache: Nie, musisz dodać te zasoby, które są potrzebne plikom HTML zapisanym w pamięci podręcznej. SP: Nic z tego nie rozumiem. Co masz na myśli, mówiąc o plikach HTML zapisanych w pamięci podręcznej? appCache: Znasz już jeden sposób na uwzględnianie plików HTML w pamięci podr
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Mobile Web. Rusz głową!
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: