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.

Rozdziały:

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)