Mobile Web. Rusz głową! [PDF]

Table of contents :
Spis treści
Wprowadzenie
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
1.Wrażliwe projekty, czyli Responsive Web Design
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. Koncepcja Mobile First w podejściu Responsive Web Design
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 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
3. Stawiamy czoła niezupełnie sprzyjającym okolicznościom
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!
4. Które urządzenia powinny być obsługiwane?
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ń?
5. Zapoznaj się z grupą
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ć
6. Tartanator
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
7. Wyjątkowe mobilne aplikacje internetowe
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
Jak zwykle diabeł tkwi w szczegółach
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ł
8. Ustrzel tartan! — w stronę natywności
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ę!
9. Odnajdywanie (jakiegoś) sensu w chaosie
I co teraz?
To nie takie proste
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 moblilne składniki
Spójrz w przyszłość
A. Sześć najważniejszych spraw
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
B. Gdzieś trzeba zacząć
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
C. Jak wywęszyć urządzenia?
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ę!
D. Zadbaj o środowisko
Pobieramy SDK Androida
Wybierz odpowiednie narzędzia
Tworzenie nowego urządzenia wirtualnego
Znajdź właściwą ścieżkę
Skorowidz