E-book details

Mobile Web. Rusz głową!

Mobile Web. Rusz głową!

Lyza Danger Gardner, Jason Grigsby

Ebook

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:

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

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

  • Title: Mobile Web. Rusz głową!
  • Author: Lyza Danger Gardner, Jason Grigsby
  • Original title: Head First Mobile Web
  • Translation: Aleksander Lamża
  • ISBN: 978-83-246-5719-3, 9788324657193
  • Date of issue: 2013-03-25
  • Format: Ebook
  • Item ID: mobweb
  • Publisher: Helion