Responsywne strony WWW dla każdego - ebook

Twórz skalowalne strony WWW (RWD) dla wszystkich urządzeń!

Responsywne strony WWW umiejętnie dostosowują się do rozmiaru każdego ekranu, na jakim zechcesz je wyświetlić. Ta ich właściwość pomaga również generować zyski! Po pierwsze, wystarczy utrzymywać tylko jedną wersję responsywnej strony. Po drugie, Twoi potencjalni klienci i użytkownicy mogą zapoznać się z Twoją ofertą lub skorzystać z niej praktycznie w dowolnym miejscu świata. I to niezależnie od tego, czy korzystają ze smartfona, z tabletu czy z komputera stacjonarnego!

Jeżeli chcesz nauczyć się tworzyć takie strony, ta książka będzie dla Ciebie najlepszym źródłem! Już za chwilę dowiesz się, w jaki sposób zbudować skalowalne strony WWW z wykorzystaniem najnowszych możliwości kaskadowych arkuszy stylów CSS3 oraz języka HTML5. Przekonasz się, jak łatwo możesz modyfikować style pod konkretne media oraz jak najlepiej zorganizować proces projektowania responsywnej strony WWW. Zaznajomisz się też z najlepszymi technikami poprawy wydajności Twoich stron WWW. To jest obowiązkowa lektura dla wszystkich programistów i projektantów stron WWW!

• Przygotuj strategię treści strony zanim zajmiesz się jej wizualnym wyglądem
• Dowiedz się, dlaczego domyślnym wzorcem powinna być strona przystosowana do małych ekranów
• Poznaj elementy języka HTML i właściwości stylów CSS niezbędne do tworzenia skalowalnych stron
• Zastosuj zapytania o media, aby wyświetlać różne style CSS na ekranach różnej wielkości
• Modyfikuj obrazy, czcionki i sekcje nawigacji
• Stosuj techniki optymalizacyjne, aby tworzyć mniejsze i szybsze strony

Odkryj możliwości responsywnych stron WWW!

Wstęp (7)

I PODSTAWY TWORZENIA RESPONSYWNYCH STRON WWW (11)

1. Czym jest responsywna strona WWW? (13)

• Podstawy (13)
• Historia stron WWW w skrócie (15)
• Dlaczego właśnie responsywne strony? (23)
• Podsumowanie (25)

2. Responsywna treść (27)

• Strategia treści (27)
• Dobór treści (29)
• Przygotowanie treści (31)
• Jednolita treść (34)
• Zarządzanie treścią (34)
• Elastyczna treść (35)
• Podsumowanie (37)

II TWORZENIE RESPONSYWNYCH STRON WWW (39)

3. Kod HTML responsywnych stron (41)

• Kodowanie w języku HTML (42)
• Podstawowa struktura strony (44)
• Obszar widoku (viewport) (46)
• Elementy strukturalne (51)
• Tworzenie strony (55)
• Prosty i logiczny kod HTML (58)
• Podsumowanie (59)

4. Style CSS w responsywnych stronach (61)

• Jak działają style CSS (62)
• Wersje języka CSS (63)
• Gdzie są zdefiniowane style CSS (67)
• Kaskada stylów (68)
• Stosowanie kaskady stylów (71)
• Komentarze (76)
• Model pudełkowy (77)
• Właściwość display (83)
• Pozycjonowanie elementów (84)
• Właściwości float i clear (88)
• Style podstawowe (90)
• Podsumowanie (93)

5. Zapytania o media (95)

• Czym jest zapytanie o medium? (95)
• Struktura zapytania o medium (97)
• Zapytania o media w odnośnikach do arkuszy stylów (99)
• Inne metody stosowania zapytań o media (100)
• Co sprawdzają zapytania (100)
• Obsługa zapytań przez przeglądarki (103)
• Zakresy szerokości projektu (107)
• Responsywne projektowanie stron (108)
• Zastosowanie zapytań o media (112)
• Układ dwukolumnowy (113)
• Określenie maksymalnej szerokości obszaru widoku (118)
• Jak dobierać punkty podziału (120)
• Podsumowanie (120)

6. Obrazy (123)

• Sposoby wyświetlania obrazów (124)
• Tekst alternatywny (127)
• Formaty obrazów (130)
• Optymalizacja obrazów (133)
• Obrazy z treścią (136)
• Obrazy w tle (147)
• Skalowalne obrazy (149)
• Podsumowanie (158)

III RESPONSYWNOŚĆ W PRAKTYCE (159)

7. Proces tworzenia responsywnej strony (161)

• Strategia i planowanie (161)
• Najpierw treść, potem układ (164)
• Analiza układu strony (167)
• Prototypy stron (170)
• Wizualny projekt strony (176)
• Narzędzia do projektowania stron (180)
• Propagowanie responsywnych projektów (184)
• Praca z klientami (187)
• Podsumowanie (190)

8. Urządzenia przenośne i nie tylko (191)

• Wrażenia użytkownika (191)
• Strony niezależne od urządzenia (196)
• Przede wszystkim urządzenia mobilne (196)
• Rób, co możesz (197)
• Rodzaje urządzeń (199)
• Dotyk (202)
• Wielkość ekranu (208)
• Dostępność strony (projektowanie uniwersalne) (210)
• Wybór obsługiwanych urządzeń (216)
• Po co testować stronę na prawdziwych urządzeniach (217)
• Testy (218)
• Podsumowanie (221)

IV PROJEKTOWANIE RESPONSYWNYCH STRON WWW (223)

9. Typografia (225)

• Zacznij od kodu HTML (225)
• Kroje pisma (226)
• Fonty (227)
• Wielkość tekstu (231)
• Długość wiersza (241)
• Białe znaki (246)
• Marginesy i odstępy (246)
• Krój pisma a wielkość ekranu (248)
• Podsumowanie (249)

10. Nawigacja i nagłówek strony (251)

• Responsywna sekcja nawigacji (251)
• Informacje o marce (257)
• Odnośniki nawigacyjne (259)
• Szablony nawigacji (265)
• Nagłówek strony (285)
• Podsumowanie (293)

11. Wydajność stron WWW (295)

• Dlaczego wydajność jest ważna (295)
• Wydajność jako proces (296)
• Jak są ładowane i wyświetlane strony (298)
• Pomiar wydajności strony (303)
• Oczyszczanie kodu (305)
• Minimalizacja liczby zapytań HTTP (307)
• Serwer WWW (309)
• Skrypty JavaScript (312)
• Arkusze CSS (317)
• Hosting stron (319)
• Warunkowe ładowanie treści (320)
• Przeorganizowanie i przerysowanie strony (321)
• RESS (322)
• Podsumowanie (324)

Skorowidz (327)