E-book details

Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie III

Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie III

Dan Cederholm

Ebook

Tylko krok dzieli Cię od idealnej witryny!

Każdego dnia w sieci pojawiają się tysiące nowych witryn. Niejednokrotnie są one perfekcyjne merytorycznie i interesujące wizualnie. Niestety, wiele z nich nie odniesie sukcesu, bo nie trafi do szerokiego grona odbiorców. Konkurencja jest dziś tak ogromna, że Twoje rozwiązanie musi się wyróżniać nie pod jednym, a pod kilkoma względami. Jedną z najważniejszych zalet dobrej strony jest lekki, poprawny kod, korzystający z nowości języka HTML5 i CSS3 oraz dostępny dla różnych urządzeń (stacjonarnych i mobilnych). W trakcie lektury kolejnej edycji tej wyjątkowej książki dowiesz się, jak zagwarantować czytelność i atrakcyjność Twojej strony, nawet jeśli nie masz dostępu do elementów graficznych i CSS. Ponadto zobaczysz, jak sobie radzić z rozmiarem czcionek czy ograniczoną przestrzenią.

Każdy rozdział rozpoczyna się opisem rozwiązania, które nie jest kuloodporne. Rozwiązanie takie przeważnie opiera się na tradycyjnych technikach i zwykłym kodzie HTML. Dan Cederholm, autor tej bestsellerowej pozycji, rozkłada je na czynniki pierwsze i pokazuje przy okazji różne ograniczenia. Następnie proponuje zastosowanie wariantu alternatywnego, opracowanego przy użyciu HTML-a oraz CSS. Ten wariant umożliwia zastąpienie opasłego źródła odchudzonym, strukturalnym kodem oraz przemyślnie opracowanymi regułami CSS. W rezultacie otrzymany projekt jest lekki i dostępny dla wielu użytkowników. Na koniec Dan prezentuje proces tworzenia kompletnej strony internetowej z komponentów omówionych w poprzednich rozdziałach. Ten sposób naprawdę pozwala się wiele nauczyć!

  • Skalowanie tekstu za pomocą słów kluczowych, wartości procentowych oraz jednostek em, dające użytkownikowi pełną kontrolę nad czytelnością projektu
  • Uwzględnianie elastycznego wydłużania poziomych komponentów strony w pionie
  • Zastosowanie elementów pływających do opracowania struktur tabelarycznych
  • Zapewnienie czytelności strony nawet wtedy, gdy brak obrazków i obsługi CSS
  • Rozdzielanie warstwy prezentacyjnej i kodu w tradycyjnych tabelach oraz odtwarzanie ich wyglądu za pomocą CSS
  • Zastosowanie filozofii stopniowego ulepszania projektów dzięki HTML5 oraz CSS3

Sięgnij po tę książkę i twórz niezawodne strony w sieci!

Wstęp (11)

Rozdział 1. Elastyczny tekst (19)

  • Definiowanie wielkości tekstu za pomocą słów kluczowych, wartości procentowych lub jednostek em jest najbardziej elastyczne i umożliwia użytkownikom jej regulowanie (20)
  • Typowe rozwiązanie (21)
    • Dlaczego to rozwiązanie nie jest kuloodporne (22)
  • Dostępne możliwości (24)
    • Jednostki długości (24)
    • Słowa kluczowe - względne (24)
    • Procenty (25)
    • Słowa kluczowe - bezwzględne (25)
  • Rozwiązanie kuloodporne (26)
    • Słowa kluczowe - wyjaśnienie (26)
    • Rezygnacja z dokładności "co do piksela" (27)
  • Dlaczego rozwiązanie to jest kuloodporne (28)
  • Elastyczna baza - i co dalej? (28)
    • Ustaw i zapomnij (28)
    • Procentowa zmiana wartości bazowej (29)
  • Stosowanie słów kluczowych i wartości procentowych (32)
    • Ustawienie pośredniej wartości bazowej (32)
    • Zagnieżdżając deklaracje w procentach, musimy zachować ostrożność (34)
    • Spójność dzięki wartościom procentowym (35)
  • Elastyczny rozmiar tekstu dzięki jednostkom em (37)
    • Jednostka rem (39)
  • Podsumowanie (41)

Rozdział 2. Skalowalna nawigacja (43)

  • Należy opracować taką nawigację, która skaluje się w zależności od ustawionej wielkości tekstu oraz od objętości treści umieszczonych na stronie (44)
  • Typowe rozwiązanie (45)
    • Eleganckie zakładki (45)
    • Typowy efekt rollover, czyli podmiana obrazków (46)
  • Dlaczego rozwiązanie to nie jest kuloodporne (47)
    • Ogrom kodu (47)
    • Problemy z dostępnością (48)
    • Problemy ze skalowalnością (48)
    • Brak elastyczności (48)
  • Rozwiązanie kuloodporne (49)
    • Bez stylów (50)
    • Dwa małe obrazki (50)
    • Stosowanie stylów (51)
    • (O)pływanie na ratunek (52)
    • Formowanie zakładek (53)
    • Wyrównanie obrazków tła (54)
    • Dodanie dolnego obramowania (56)
    • Efekt podmiany (57)
    • Wyróżniona zakładka (58)
  • Dlaczego rozwiązanie to jest kuloodporne (58)
  • Wariant bez obrazków, wykorzystujący gradienty CSS3 (59)
  • Podobny przykład wykorzystujący jednostki em (63)
  • Dodatkowe przykłady (65)
    • MOZILLA.ORG (65)
    • Skosy (65)
    • Wyszukiwanie w witrynie ESPN.com (66)
  • Podsumowanie (68)

Rozdział 3. Elastyczne wiersze (71)

  • Nie należy definiować wysokości poziomych elementów strony i trzeba zaplanować możliwość powiększenia ich w pionie (72)
  • Typowe rozwiązanie (73)
  • Dlaczego rozwiązanie to nie jest kuloodporne (74)
    • Mało istotne elementy graficzne (74)
    • Stałe wysokości (75)
    • Przerośnięty kod (75)
  • Rozwiązanie kuloodporne (76)
    • Struktura kodu (76)
    • Identyfikacja elementów (77)
    • Bez stylów (78)
    • Dodanie tła (79)
    • Pozycjonowanie zawartości (79)
    • Brakujące tło (81)
    • Dodanie szczegółów (82)
    • Cztery zaokrąglone narożniki (84)
    • Szczegóły związane z tekstem i odnośnikami (85)
    • Ostatni etap (87)
    • Poprawka dla IE7 (89)
  • Dlaczego rozwiązanie to jest kuloodporne (90)
    • Oddzielenie struktury od wyglądu (90)
    • Koniec z ustalonymi wysokościami (91)
  • Wariant z atrybutem border-radius (92)
  • Inny przykład rozciągania (94)
    • Struktura kodu (95)
    • Tworzenie dwóch obrazków (96)
    • Zastosowanie stylów CSS (96)
    • Autorozciąganie (98)
  • Podsumowanie (99)

Rozdział 4. Pomysłowe rozmieszczanie elementów (101)

  • Zamiast stosować tabele, lepiej używać elementów pływających (102)
  • Typowe rozwiązanie (103)
  • Dlaczego rozwiązanie to nie jest kuloodporne (104)
  • Rozwiązanie kuloodporne (105)
    • Nieograniczony wybór struktur (105)
    • Stosowanie list definicji (106)
    • Struktura kodu (107)
    • Bez stylów (109)
    • Definiowanie stylów dla kontenera (109)
    • Identyfikacja obrazków (110)
    • Style podstawowe (111)
    • Pozycjonowanie obrazka (115)
    • Przeciwległe obiekty pływające (116)
    • Miejsce dla opisów każdej długości (118)
    • Samoczynne anulowanie opływania elementów (120)
    • Ostatnie szlify (123)
    • Zmiana kierunku wyrównania (125)
    • Efekt siatki (127)
    • Inne tło (131)
    • Zastosowanie cienia (132)
    • Zabawa z blokowaniem opływania elementów pływających (134)
    • Blokowanie opływania elementów za pomocą właściwości overflow (135)
    • Łatwe blokowanie opływania elementów za pomocą zawartości generowanej (136)
  • Dlaczego rozwiązanie to jest kuloodporne (140)
  • Podsumowanie (141)

Rozdział 5. Niezniszczalne ramki (143)

  • Przed przystąpieniem do tworzenia stylów dla ramek należy wszystko dokładnie zaplanować (144)
  • Typowe rozwiązanie (145)
  • Dlaczego rozwiązanie to nie jest kuloodporne (146)
  • Rozwiązanie kuloodporne (147)
    • Struktura kodu (148)
    • Strategia z obrazkami (149)
    • Stosowanie stylów (151)
  • Dlaczego rozwiązanie to jest kuloodporne (154)
  • Wariant z użyciem CSS3 (155)
  • Inne techniki tworzenia zaokrąglonych narożników (159)
    • Rogi, rogi na okrągło (160)
  • Pozorne ramki (167)
    • Jeden zaokrąglony narożnik (168)
    • Iluzja narożnika (171)
    • Kuloodporna strzałka (171)
    • Ograniczenia inspirują (173)
  • Podsumowanie (173)

Rozdział 6. Brak obrazków? Brak CSS? Żaden problem! (175)

  • Należy zadbać o to, by treść strony była czytelna, nawet jeśli strona zostanie pozbawiona rysunków i stylów CSS (176)
  • Typowe rozwiązanie (177)
  • Dlaczego rozwiązanie to nie jest kuloodporne (179)
  • Rozwiązanie kuloodporne (181)
  • Dlaczego rozwiązanie to jest kuloodporne (181)
  • Ze stylami lub bez (184)
    • 10-sekundowy test użyteczności (185)
  • Typowe rozwiązanie (186)
  • Rozwiązanie kuloodporne (187)
  • Test Dig Dug (189)
  • Narzędzia do sprawdzania kuloodporności stron (190)
    • Favelety (190)
    • Pasek Web Developer (193)
    • Pasek Web Accessibility Toolbar (194)
    • Firebug (195)
    • Walidacja jako narzędzie (195)
  • Podsumowanie (198)

Rozdział 7. Konwersja tabel (201)

  • Z tabel należy usunąć kod odpowiadający za warstwę prezentacji, a ich wygląd zdefiniować za pomocą CSS (202)
  • Typowe rozwiązanie (203)
  • Dlaczego rozwiązanie to nie jest kuloodporne (205)
  • Rozwiązanie kuloodporne (206)
    • Struktura kodu (206)
    • Stosowanie stylów (212)
  • Dlaczego rozwiązanie to jest kuloodporne (224)
  • Podsumowanie (225)

Rozdział 8. Płynny oraz elastyczny układ strony (227)

  • Eksperymentuj z projektowaniem układów stron, które rozszerzają się i zwężają (228)
  • Typowe rozwiązanie (229)
  • Dlaczego rozwiązanie to nie jest kuloodporne (231)
    • Nadmiar kodu źródłowego (231)
    • Koszmar aktualizacji (231)
    • Niewłaściwa kolejność treści strony (232)
  • Rozwiązanie kuloodporne (233)
    • Struktura kodu (233)
    • Tworzenie kolumn: pływanie kontra pozycjonowanie (234)
    • Stosowanie stylów (236)
    • Odstępy (239)
    • Dopełnienie kolumn (243)
    • Ustawianie szerokości minimalnej oraz maksymalnej (249)
    • Sposób na optyczne wyrównanie długości kolumn (253)
    • Trójkolumnowe układy stron (256)
  • Dlaczego rozwiązanie to jest kuloodporne (265)
  • Układ strony oparty na jednostkach em (265)
    • Przykład elastycznej strony internetowej (266)
    • Struktura kodu (266)
    • CSS (269)
    • Ideałem jest spójność strony (272)
    • Uwaga na paski przewijania (272)
  • Podsumowanie (273)

Rozdział 9. Łączenie w całość (275)

  • Zastosuj kuloodporne rozwiązania do projektu całej strony internetowej (276)
  • Cel (277)
  • Dlaczego rozwiązanie to jest kuloodporne (278)
    • Płynny, adaptujący się projekt (278)
    • Elastyczny tekst (280)
    • Brak rysunków? Brak CSS? Żaden problem! (280)
    • Wersje językowe (282)
  • Konstrukcja (283)
    • Struktura kodu (283)
    • Style podstawowe (284)
    • Struktura układu strony (285)
    • Elastyczna siatka (286)
    • Definiowanie atrybutu max-width (287)
    • Nagłówek (289)
    • Elastyczne obrazki (291)
    • Struktura bocznego paska (294)
    • Wielokolumnowy układ strony w CSS3 (297)
    • Magia zapytań o media (298)
  • Podsumowanie (306)

Skorowidz (307)

  • Title: Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie III
  • Author: Dan Cederholm
  • Original title: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3 (3rd Edition)
  • Translation: Piotr Cieślak na podstawie: „Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS” w tłumaczeniu Agaty Bulandry oraz „Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie II” w tłumaczeniu Anny Trojan
  • ISBN: 978-83-246-6954-7, 9788324669547
  • Date of issue: 2013-02-19
  • Format: Ebook
  • Item ID: kuloo3
  • Publisher: Helion