Mobile Web Rusz głową!

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

Wykorzystaj potencjał HTML5 i CSS3.

Spis treści:

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)
• 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)
• 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)
• Dlaczego chcemy użyć tak starego rozwiązania? (115)
• 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

• 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)
• 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)