Responsywne strony WWW dla każdego

Table of contents

1. Responsywne strony WWW dla każdego: Twórz strony WWW dla wszystkich urządzeń!
2. Wstęp
   1. Co zawiera ta książka
   2. Dla kogo jest ta książka
   3. Przykłady kodu
   4. Podziękowania
3. I. Podstawy tworzenia responsywnych stron WWW
   1. 1. Czym jest responsywna strona WWW?
      1. Podstawy
      2. Historia stron WWW w skrócie
         1. Strony o stałej szerokości
         2. Przeglądarki w telefonach
         3. Strony mobilne
         4. Inne urządzenia
         5. Zapytania o media
         6. Elastyczne wymiary
         7. Responsywne strony
      3. Dlaczego właśnie responsywne strony?
         1. Czytelny układ na każdym urządzeniu
         2. Mniej pracy
         3. Optymalizacja pod kątem wyszukiwania
      4. Podsumowanie
   2. 2. Responsywna treść
      1. Strategia treści
         1. Strategia mobilnej treści?
      2. Dobór treści
         1. Umieszczaj tylko to, co jest potrzebne
         2. Jak ograniczać treść
         3. Audyt/spis treści
      3. Przygotowanie treści
         1. Jak użytkownicy czytają strony WWW
            1. Przeszukiwanie zawartości
            2. Odwrócona piramida
            3. Nagłówki
            4. Krótko i na temat
         2. Prosty język
      4. Jednolita treść
      5. Zarządzanie treścią
         1. Tworzenie uniwersalnej treści
      6. Elastyczna treść
      7. Podsumowanie
4. II. Tworzenie responsywnych stron WWW
   1. 3. Kod HTML responsywnych stron
      1. Kodowanie w języku HTML
         1. Wersje języka HTML
         2. Standardy WWW
         3. Język HTML5
      2. Podstawowa struktura strony
         1. Deklaracja typu dokumentu (doctype)
         2. Struktura dokumentu
         3. Tytuł strony (title)
         4. Zestaw znaków (charset)
      3. Obszar widoku (viewport)
         1. Szerokość strony (width)
         2. Skala początkowa (initial-scale)
         3. Skala użytkownika (user-scalable)
         4. Maksymalna skala (maximum-scale)
      4. Elementy strukturalne
         1. Czytniki zawartości ekranu
         2. Nagłówek <header>
         3. Nawigacja <nav>
         4. Stopka <footer>
         5. Artykuł <article>
         6. Element <aside>
         7. Przeglądarka Internet Explorer
      5. Tworzenie strony
         1. Elementy strukturalne
         2. Umieszczenie treści
         3. Strona bez stylów
      6. Prosty i logiczny kod HTML
         1. Oddzielenie warstwy prezentacji od treści
         2. Komentarze
      7. Podsumowanie
   2. 4. Style CSS w responsywnych stronach
      1. Jak działają style CSS
      2. Wersje języka CSS
         1. Prefiksy przeglądarek
      3. Gdzie są zdefiniowane style CSS
         1. Style wbudowane
         2. Arkusze stylów
         3. Style wstawiane
      4. Kaskada stylów
         1. Jak to działa
         2. Oznaczenie ważności
         3. Style wstawiane
         4. Identyfikatory
         5. Klasy, atrybuty i pseudoklasy
         6. Elementy i pseudoelementy
         7. Reguły odziedziczone
         8. Wartości domyślne
         9. Jak rozstrzygane są konflikty?
      5. Stosowanie kaskady stylów
         1. Wartości domyślne i reset stylu
            1. Reset wartości
         2. Reguły odziedziczone
         3. Elementy
         4. Cała reszta
         5. Prostota
      6. Komentarze
         1. Porządek w arkuszu stylów
      7. Model pudełkowy
         1. Wymiary
         2. Jednostka em
         3. Wysokość i szerokość elementów
         4. Marginesy i odstępy
         5. Ramki
         6. Wielkość pudełka
      8. Właściwość display
      9. Pozycjonowanie elementów
         1. Położenie statyczne
         2. Położenie względne
         3. Położenie bezwzględne
         4. Położenie stałe
         5. Kierunki w położeniu elementów
      10. Właściwości float i clear
      11. Style podstawowe
      12. Podsumowanie
   3. 5. Zapytania o media
      1. Czym jest zapytanie o medium?
      2. Struktura zapytania o medium
      3. Zapytania o media w odnośnikach do arkuszy stylów
      4. Inne metody stosowania zapytań o media
      5. Co sprawdzają zapytania
         1. Szerokość i wysokość obszaru widoku
         2. Szerokość i wysokość ekranu
         3. Orientacja
         4. Proporcje
         5. Rozdzielczość
         6. Inne cechy mediów
      6. Obsługa zapytań przez przeglądarki
         1. Komentarze warunkowe w przeglądarce Internet Explorer
         2. Sprawdzanie odpowiedzi na zapytanie o medium
         3. Punkty podziału
      7. Zakresy szerokości projektu
      8. Responsywne projektowanie stron
         1. Stopniowe wzbogacanie stron
         2. Projektowanie na siatce
         3. Użycie kolumn
         4. Najpierw projekt dla małych ekranów
      9. Zastosowanie zapytań o media
      10. Układ dwukolumnowy
          1. Wyrównanie elementów
          2. Zastosowanie siatki
          3. Umieszczenie zapytania o medium
      11. Określenie maksymalnej szerokości obszaru widoku
      12. Jak dobierać punkty podziału
      13. Podsumowanie
   4. 6. Obrazy
      1. Sposoby wyświetlania obrazów
         1. Równoważne style CSS
         2. Obrazy z treścią
         3. Obrazy tła
         4. „Duszki”
         5. Czcionki z ikonami
      2. Tekst alternatywny
         1. Dobór odpowiedniego tekstu alternatywnego
      3. Formaty obrazów
         1. Format JPEG
         2. Format GIF
         3. Format PNG
         4. Format SVG
      4. Optymalizacja obrazów
         1. Piksele i rozdzielczość
         2. Ekrany o wysokiej rozdzielczości
         3. Kompresja obrazów
         4. Rzeczywiste wymiary obrazów
      5. Obrazy z treścią
         1. Element <img>
         2. Umieszczenie obrazu na stronie
         3. Skalowalne wymiary obrazu
         4. Zapytania o media
         5. Maksymalna szerokość obrazu
         6. Przekazywanie informacji za pomocą zdjęć
      6. Obrazy w tle
         1. Umieszczanie obrazów w tle
         2. Wyrównanie obrazu
      7. Skalowalne obrazy
         1. Proponowane rozwiązania klienckie
            1. Atrybut srcset
            2. Element <picture>
         2. Inne rozwiązania
            1. Kod Picturefill
            2. Kod Adaptive Images
            3. Wtyczka HiSRC
            4. Usługi zewnętrzne
         3. Punkty podziału
      8. Podsumowanie
5. III. Responsywność w praktyce
   1. 7. Proces tworzenia responsywnej strony
      1. Strategia i planowanie
         1. Badania wśród użytkowników
         2. Treść strony
            1. Architektura informacji
            2. Zarys treści
      2. Najpierw treść, potem układ
         1. Komponenty strony
         2. Projektowanie tekstowe
         3. Układ liniowy strony
         4. Hierarchia treści
      3. Analiza układu strony
         1. Szkicowanie
         2. Zacznij od małych ekranów
         3. Przede wszystkim urządzenia przenośne
      4. Prototypy stron
         1. Szkielety kontra prototypy
         2. Szkielety
         3. Responsywne prototypy
         4. Co zawiera prototyp?
         5. Zacznij od podstaw
         6. Ile prototypów należy utworzyć?
         7. Szablony
         8. Narzędzia do tworzenia prototypów
      5. Wizualny projekt strony
         1. Wzorce stylów
         2. Testy i poprawki
         3. Opis stylów
      6. Narzędzia do projektowania stron
         1. Adobe Photoshop
         2. Adobe InDesign
         3. Adobe Edge Reflow
         4. Adobe Dreamweaver
         5. Przeglądarka
      7. Propagowanie responsywnych projektów
         1. Czy trzeba się bać responsywnej strony?
         2. Edukowanie klientów
         3. Podkreślaj responsywność
         4. Responsywna strona nie zawsze jest najlepsza
         5. Cena
      8. Praca z klientami
         1. Składniki
         2. Prezentacja
      9. Podsumowanie
   2. 8. Urządzenia przenośne i nie tylko
      1. Wrażenia użytkownika
         1. Użytkownik przede wszystkim
         2. Mit mobilnego użytkownika
         3. Projektowanie ukierunkowane na treść
         4. Użytkownicy wyłącznie urządzeń przenośnych
         5. Użytkownicy wielu urządzeń
      2. Strony niezależne od urządzenia
      3. Przede wszystkim urządzenia mobilne
      4. Rób, co możesz
      5. Rodzaje urządzeń
         1. Telefony komórkowe
         2. Tablety
         3. Inne urządzenia
         4. Komputery stacjonarne i laptopy
      6. Dotyk
         1. Ekrany pojemnościowe
         2. Ekran wielopunktowy
         3. Gesty
         4. Zdarzenia JavaScript
            1. Zdarzenie hover
            2. Opóźniony dotyk
         5. Wielkość obszaru dotyku
            1. Powiększanie obszaru dotyku
         6. Położenie sekcji nawigacji
      7. Wielkość ekranu
         1. Obrót ekranu
      8. Dostępność strony (projektowanie uniwersalne)
         1. Widok
            1. Czytniki ekranu
            2. Wielkość tekstu
            3. Kontrastowe kolory
            4. Daltonizm
         2. Dźwięk
         3. Metody wprowadzania informacji
            1. Tylko klawiatura
            2. Oprogramowanie rozpoznające mowę
         4. Niepełnosprawność poznawcza
      9. Wybór obsługiwanych urządzeń
      10. Po co testować stronę na prawdziwych urządzeniach
          1. Laboratoria z urządzeniami
          2. Zakup urządzeń
      11. Testy
          1. Weryfikatory kodu
          2. Zmiana wielkości okna przeglądarki
             1. Narzędzia w przeglądarkach
          3. Przeglądarki i systemy operacyjne
          4. Emulatory i symulatory
          5. Rozwiązania wspomagające
      12. Podsumowanie
6. IV. Projektowanie responsywnych stron WWW
   1. 9. Typografia
      1. Zacznij od kodu HTML
      2. Kroje pisma
         1. Najpierw wybierz krój pisma
      3. Fonty
         1. Dobrze zaprojektowane kroje pisma
         2. Przechowywanie fontów
         3. Serwisy typograficzne
         4. Odnośniki do plików czcionek
         5. Tworzenie stosu fontów
      4. Wielkość tekstu
         1. Zapomnij o pikselach
         2. Odległość od ekranu
         3. Jednostki względne i bezwzględne
         4. Określenie domyślnej wielkości tekstu
         5. Dlaczego 100%?
         6. Jednostki miary
            1. Jednostka em
            2. Zagnieżdżone emy
            3. Remy
            4. Użycie wartości zapasowych
            5. Wartości domyślne przeglądarki
            6. Wybór pomiędzy emami i remami
         7. Zależności pomiędzy wielkościami czcionek
         8. Wysokość wiersza
      5. Długość wiersza
         1. Sprawdzenie wysokości wiersza
         2. Dopasowanie marginesów i wielkości czcionki
         3. Dzielenie wyrazów
         4. Zawijanie wyrazów
      6. Białe znaki
      7. Marginesy i odstępy
      8. Krój pisma a wielkość ekranu
      9. Podsumowanie
   2. 10. Nawigacja i nagłówek strony
      1. Responsywna sekcja nawigacji
         1. Zacznij od małego ekranu
         2. Nadanie stylu liście
         3. Pozioma sekcja nawigacji
      2. Informacje o marce
      3. Odnośniki nawigacyjne
         1. Elastyczna nawigacja
         2. Co użytkownik chce robić?
         3. Nawigacja ukierunkowana na cel
         4. Bądź konsekwentny
         5. Prosta nawigacja
      4. Szablony nawigacji
         1. Nawigacja u góry strony
         2. Nawigacja w stopce strony
         3. Nawigacja przełączana
         4. Nawigacja nakładana
         5. Nawigacja priorytetowa
         6. Menu z elementem SELECT
         7. Nawigacja wysuwana
         8. Nawigacja u dołu strony
         9. Unikaj podsekcji nawigacyjnych
         10. Bez nawigacji
         11. Przypięte menu na szerszych ekranach
      5. Nagłówek strony
         1. Nagłówek minimalistyczny
         2. Nagłówek złożony
         3. Ikona nawigacyjna
         4. Inne ikony
      6. Podsumowanie
   3. 11. Wydajność stron WWW
      1. Dlaczego wydajność jest ważna
      2. Wydajność jako proces
         1. Połączenia
         2. Równowaga
         3. Rozbudowane strony WWW
      3. Jak są ładowane i wyświetlane strony
         1. Opóźnienie
         2. Zapytanie DNS
         3. Przekierowania
         4. Zapytanie HTTP
         5. Wysłanie pliku HTML
         6. Dekompresja
         7. Model DOM
         8. Wyświetlenie elementu <HEAD>
            1. Zewnętrzne zasoby
            2. Ładowanie równoległe
            3. Jednowątkowe wykonywanie skryptów
         9. Wyświetlenie elementu <body>
            1. Załadowanie obrazów HTML
            2. Ładowanie obrazów tła
            3. Więcej skryptów JavaScript
         10. Zdarzenie ONLOAD
      4. Pomiar wydajności strony
      5. Oczyszczanie kodu
         1. Twórz prosty kod
         2. Minimalizacja kodu
      6. Minimalizacja liczby zapytań HTTP
         1. Łączenie plików
         2. Zewnętrzny kod
         3. „Duszki”
      7. Serwer WWW
         1. Unikaj przekierowań
         2. Kompresja plików
         3. Pamięć podręczna przeglądarki
      8. Skrypty JavaScript
         1. Co robią skrypty?
         2. Jak działają skrypty?
         3. Skrypty blokujące
            1. Najpierw ładuj kod „powyżej zagięcia”
            2. Skrypty wbudowane
            3. Opóźnione ładowanie skryptów
            4. Odroczone wykonywanie skryptów
            5. Ładowanie asynchroniczne
            6. Ładowanie tylko niezbędnego kodu
            7. Zastosowanie HTML/CSS zamiast JavaScript
         4. Biblioteki JavaScript
      9. Arkusze CSS
         1. Platformy CSS
      10. Hosting stron
          1. Sieci CDN
          2. System CMS
      11. Warunkowe ładowanie treści
      12. Przeorganizowanie i przerysowanie strony
      13. RESS
          1. Przykład użycia RESS
      14. Podsumowanie
7. Indeks
8. Copyright