Mobile Web. Rusz głową! - ebook

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:

• przyszłość sieci internet i stron WWW
• podejście Responsive Web Design
• możliwości biblioteki jQuery i projektu PhoneGap
• rozwiązania typowych problemów

Wprowadzenie

• Dla kogo jest ta książka? (xxii)
  
• Wiemy, co sobie myślisz (xxiii)
  
• Wiemy też, co sobie myśli Twój mózg (xxiii)
  
• Metapoznanie - myślenie o myśleniu (xxv)
  
• Zespół korektorów merytorycznych (xxx)
  
• Podziękowania (xxxi)

1. Wprowadzenie do mobilnych technologii webowych

• Wszyscy jedziemy na tym samym wózku. Wskakujesz? (2)
  
• Coś niedobrego stało się w drodze do pubu (4)
  
• Skoro przeglądarki w telefonach komórkowych są takie świetne... (5)
  
• ...to czy nie powinno to po prostu działać? (5)
  
• Wrażliwe projekty - Responsive Web Design (10)
  
• Różne arkusze stylów w różnych sytuacjach (12)
  
• Zapytania o media w CSS (13)
  
• Dotychczasowa struktura witryny pubu Pod Paradnym Morsem (15)
  
• Analiza dotychczasowego arkusza CSS (16)
  
• Co trzeba zmienić? (17)
  
• Szukamy stylów wymagających zmiany (18)
  
• Droga do stylów dostosowanych do urządzeń mobilnych (19)
  
• Co jest nie tak z układami o stałej szerokości? (26)
  
• Dlaczego płynne jest lepsze? (27)
  
• Wzór płynności (28)
  
• Ciąg dalszy przekształceń (29)
  
• Przełączanie kontekstu (31)
  
• Co się stało z tymi obrazami? (32)
  
• Płynne obrazy (33)
  
• Pamiętaj, by być wrażliwym (36)
  
• Oto strona w stylu RWD! (40)
  
• Podejście Responsive Web Design to również stan umysłu (41)

2. RWD na poważnie

• Gdy właśnie zamierzałeś zacząć świętować swój sukces... (44)
  
• Czy to naprawdę jest problem? Skąd to wiadomo? (45)
  
• Co zrobić, gdy nie śmiga? (47)
  
• Nie ma co się oszukiwać, to jest WIELKA strona (48)
  
• Dobrodziejstwa pliku HAR (49)
  
• Wytęż wzrok i znajdź zawalidrogę (51)
  
• Skąd pochodzi skrypt map Google'a? (53)
  
• Wygląda przyjaźnie, ale takie nie jest (55)
  
• Koncepcja Mobile First w podejściu Responsive Web Design (56)
  
• Na czym polega stopniowe ulepszanie? (57)
  
• Poprawiamy pływanie elementów (60)
  
• Zapytania o media w technice Mobile First (61)
  
• Niespodzianka! W Internet Explorerze strona się rozsypała (62)
  
• Problemy z jednym atrybutem src (68)
  
• Powiększanie w znaczniku &#60meta&#62 viewport (72)
  
• Czy powinno się umożliwiać skalowanie? (73)
  
• Z pomocą JavaScriptu przywracamy mapę (74)
  
• Budujemy pseudozapytanie o media w JavaScripcie (76)
  
• Wstawiamy skrypt na stronę (77)
  
• Ten widżet nie jest zgodny z RWD (79)
  
• Przenosimy atrybuty do CSS (80)
  
• Usuwamy atrybuty z JavaScriptu (81)
  
• Mapa znów zasłania treść strony (83)
  
• Niech prowadzi Cię zawartość strony (84)
  
• Wartości graniczne przybywają na ratunek (87)

3. Oddzielna witryna mobilna

• Agenci organizacji Zwierzętom na Pomoc patrolują pola (92)
  
• Jak agenci mogą otrzymywać i przekazywać informacje? (93)
  
• Wysyłamy mobilnych użytkowników na zoptymalizowaną witrynę (96)
  
• Jak wywęszyć mobilnych użytkowników? (97)
  
• Rozpoznajemy agenta użytkownika (98)
  
• Łańcuch user-agent - dzieło szatana? (101)
  
• Mówiąc wprost - większość dużych witryn ma swoją wersję mobilną (104)
  
• Kiedy jedynym rozwiązaniem jest przekierowanie... (105)
  
• Rzuć okiem na skrypt (106)
  
• Jak działa skrypt? (107)
  
• Przygotowujemy makietę wersji mobilnej (108)
  
• Specjalna dostawa... spraw komplikujących życie (110)
  
• Nie wszystkie telefony to smartfony... (113)
  
• Prostota przede wszystkim - poznaj XHTML-MP (114)
  
• Dlaczego chcemy użyć tak starego rozwiązania? (115)
  
• XHTML-MP pomaga unikać problemów (116)
  
• Przy okazji - przewijanie jest do bani (119)
  
• Ostatni problem (119)
  
• Klawisze dostępu w akcji (123)
  
• Co poszło nie tak? (124)
  
• Naprawiamy błędy (125)
  
• CSS dostosowany do przeglądarek mobilnych (127)
  
• Hm... czegoś tu brakuje (132)
  
• Bardzo nam brakuje tych przycisków! (133)
  
• Wielki sukces! (134)

4. Komu wsparcie, komu?

• Skąd wiedzieć, gdzie ustalić granicę? (138)
  
• Odejdź na chwilę od komputera (139)
  
• Urządzenia, których nie wspierasz, kontra te, których nie możesz wspierać (140)
  
• Zadawaj dużo pytań o swój projekt (142)
  
• Składniki magicznej mobilnej mikstury (144)
  
• Zajrzyj do szafki z narzędziami i danymi (145)
  
• Skąd mam wiedzieć, czy moi klienci używają odpowiednich urządzeń? (150)

5. Bazy i klasy urządzeń

• Przycisk awaryjny dla spanikowanych studentów (152)
  
• Źródła danych o urządzeniach mobilnych spieszą na ratunek (154)
  
• Poznaj WURFL (155)
  
• WURFL i jego możliwości (156)
  
• WURFL - sprytny interfejs API (159)
  
• My też możemy zbudować eksplorator (160)
  
• Eksplorator - przygotowanie środowiska (161)
  
• Szast-prast i eksplorator ulepszony (168)
  
• Czas zaprząc możliwości do pracy (170)
  
• Korzystamy z WURFL do zróżnicowania zawartości stron (170)
  
• Inicjalizacja obiektu urządzenia i przygotowanie danych (172)
  
• Czy to jest urządzenie mobilne? (172)
  
• Dzięki WURFL strona staje się sprytniejsza (176)
  
• Przycisk awaryjny - tylko w telefonach (177)
  
• Klasy urządzeń (181)
  
• Kolejny lukratywny kontrakt z firmą DaRadę! (182)
  
• Jak strona główna wygląda przez mobilne okulary? (183)
  
• Zdefiniowanie odmian witryny w zależności od wymagań (184)
  
• Przybliżamy klasy urządzeń (185)
  
• Zapoznajemy się z funkcją dopasowującą (191)
  
• O co chodzi w tej instrukcji switch? (192)
  
• Używamy funkcji dopasowującej do testowania możliwości (193)
  
• Wypełniamy luki w testach klas urządzeń (200)
  
• Musimy bardziej zadbać o bezpieczeństwo (211)
  
• Lepiej zapobiegać, niż leczyć (212)

6. Framework dla mobilnych aplikacji internetowych

• HTML5, aplikacja internetowa... Co te słowa znaczą? (219)
  
• Jak się zachowują klasyczne witryny internetowe? (220)
  
• Jak się zachowują witryny przypominające aplikacje? (221)
  
• Plan pierwszej fazy projektu Tartanator (224)
  
• Po co używać frameworków? (225)
  
• Dla projektu Tartanator wybraliśmy framework jQuery Mobile (226)
  
• Tworzenie prostej strony z jQuery Mobile (228)
  
• Kod pozostałych elementów strony (229)
  
• Atrybuty data-* (231)
  
• Odsyłacze do wielu stron w jQuery Mobile (234)
  
• Sedno Tartanatora - tartany jako takie (240)
  
• Wrzucamy pozostałe tartany (243)
  
• Filtrowanie i porządkowanie listy (244)
  
• Dodajemy pasek narzędzi w stopce (249)
  
• Upiększamy pasek narzędzi (250)
  
• Finalizowanie pracy nad strukturą (251)
  
• Czas na przygotowanie formularza do tworzenia tartanów (253)
  
• Tłumaczymy wzory tartanów na formularz (255)
  
• Tworzymy formularz w HTML5 (256)
  
• Dodajemy podstawowe pola (257)
  
• Dodawanie kolorów umożliwiają użytkownikom listy w listach (258)
  
• Pary kolor - rozmiar: pole wyboru koloru (259)
  
• Pary kolor - rozmiar: pole rozmiaru (260)
  
• Odsyłacz do formularza (262)

7. Mobilne aplikacje w prawdziwym świecie

• Wygląda nieźle... (268)
  
• Aplikacje mobilne w prawdziwym świecie (270)
  
• Na miejsca, gotowi, ulepszać! (274)
  
• Ulepszamy formularz (275)
  
• Widżet zarządzający listą kolorów i rozmiarów (276)
  
• Zaglądamy pod przykrywkę (277)
  
• No tak, to było ulepszanie frontendu (278)
  
• ...a teraz pora na backend (280)
  
• Dwie twarze skryptu generate.php (281)
  
• Jeszcze tylko jedno... (282)
  
• Tryb offline to ważna sprawa (284)
  
• Prosty przepis na plik manifestu (285)
  
• Jak zwykle diabeł tkwi w szczegółach (286)
  
• Udostępniaj pliki manifestu z prawidłowym nagłówkiem content-type (287)
  
• Zwyciężyliśmy (w końcu) (297)
  
• Jak działa geolokalizacja? (298)
  
• Jak poprosić przeglądarkę o dane geolokalizacyjne? (299)
  
• Początek pracy nad stroną Znajdź wydarzenie - podstawy (301)
  
• Dołączamy geolokalizację (303)
  
• Nic nie znalazł (309)

8. Tworzenie hybrydowych aplikacji mobilnych z PhoneGap

• Nowe możliwości (314)
  
• Jak działają aplikacje hybrydowe? (317)
  
• Budowanie mostu za pomocą PhoneGap (318)
  
• Dołącz do PhoneGap Build (321)
  
• Jak ma działać aplikacja? (322)
  
• Śledzenie ustrzelonych tartanów (323)
  
• Anatomia projektu Ustrzel tartan! (324)
  
• Pobieranie utworzonej aplikacji (328)
  
• Wybierz drogę (329)
  
• Kto co widział? Zapisujemy znalezione tartany (334)
  
• W czym nam może pomóc localStorage? (335)
  
• Sprawdzamy, co obsługuje przeglądarka (339)
  
• Używamy funkcji wyświetlającej znalezione tartany (340)
  
• Metody toggle i toggleClass (341)
  
• Znalazłeś tartan? Udowodnij to! (344)
  
• Zaprzęgamy PhoneGap do robienia zdjęć (345)
  
• Integracja z PhoneGap jest już prawie gotowa (347)
  
• Teraz jesteśmy gotowi na zgłębienie API mediaCapture (348)
  
• W jaki sposób obsłużymy akcję zakończoną powodzeniem? (349)
  
• W praktyce zawsze wygląda to trochę inaczej (350)
  
• Odrobina anonimowości (351)
  
• Już ostatnia sprawa! (353)
  
• Daliśmy radę! (354)

9. Podejście "future friendly"

• I co teraz? (358)
  
• To nie takie proste (361)
  
• Manifest "future friendly" (362)
  
• Jeśli nie możesz się uodpornić na przyszłość, zaprzyjaźnij się z nią (364)
  
• Dziś aplikacja, jutro witryna (365)
  
• Czeka nas długa droga. Przyda się kilka wskazówek (366)
  
• Mieszamy mobilne składniki (369)
  
• Spójrz w przyszłość (371)

A Ścinki

• 1. Testowanie na urządzeniach mobilnych (374)
  
• 2. Zdalne debugowanie (376)
  
• 3. Sprawdź, co obsługują przeglądarki (382)
  
• 4. Interfejsy API urządzeń (384)
  
• 5. Sklepy z aplikacjami oraz dystrybucja (385)
  
• 6. RESS: REsponsive design + komponenty Server-Side (386)

B Postaw swój serwer

• Czego będziesz potrzebował? (388)
  
• Dostępny tylko lokalnie (389)
  
• Windows i Linux - zainstaluj i skonfiguruj XAMPP-a (390)
  
• Ciąg dalszy XAMPP-a (391)
  
• Na koniec Mac - MAMP (392)
  
• Sprawdź, czy zadokowałeś we właściwym porcie (393)
  
• Dostań się do swojego serwera (394)
  
• Informacje od phpinfo (396)

C Instalowanie WURFL

• Skąd wziąć mózg? (398)
  
• A co z mięśniakiem? (399)
  
• Jak zmusić tę dwójkę do współpracy? (400)
  
• Czas na porządki w systemie plików (401)
  
• Zwróć na to uwagę! (402)

D Instalowanie SDK i narzędzi dla Androida

• Pobieramy SDK Androida (404)
  
• Wybierz odpowiednie narzędzia (405)
  
• Tworzenie nowego urządzenia wirtualnego (408)
  
• Znajdź właściwą ścieżkę (413)

Skorowidz (417)