Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie III - Helion
Tytuł oryginału: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3 (3rd Edition)
Tłumaczenie: 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-5120-7
stron: 312, Format: 170x230, okładka: miękka
Data wydania: 2013-01-18
Księgarnia: Helion
Cena książki: 49,00 zł
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!
Osoby które kupowały "Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie III", wybierały także:
- AMP: Building Accelerated Mobile Pages 135,91 zł, (29,90 zł -78%)
- The HTML and CSS Workshop 106,79 zł, (29,90 zł -72%)
- LESS. Kurs video. Poziom pierwszy. Jak usprawnić pracę z CSS 89,00 zł, (35,60 zł -60%)
- JavaScript Masterclass 88,41 zł, (38,90 zł -56%)
- Building Dynamic Web Experiences with PHP 88,41 zł, (38,90 zł -56%)
Spis treści
Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie III -- spis treści
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)