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

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! Spis treści Wstęp Rozdział 1. Elastyczny tekst 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 Typowe rozwiązanie Dlaczego to rozwiązanie nie jest kuloodporne Dostępne możliwości Jednostki długości Słowa kluczowe — względne Procenty Słowa kluczowe — bezwzględne Rozwiązanie kuloodporne Słowa kluczowe — wyjaśnienie Rezygnacja z dokładności „co do piksela” Dlaczego rozwiązanie to jest kuloodporne Elastyczna baza — i co dalej? Ustaw i zapomnij Procentowa zmiana wartości bazowej Stosowanie słów kluczowych i wartości procentowych Ustawienie pośredniej wartości bazowej Zagnieżdżając deklaracje w procentach, musimy zachować ostrożność Spójność dzięki wartościom procentowym Elastyczny rozmiar tekstu dzięki jednostkom em Jednostka rem Podsumowanie Rozdział 2. Skalowalna nawigacja 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 Typowe rozwiązanie Eleganckie zakładki Typowy efekt rollover, czyli podmiana obrazków Dlaczego rozwiązanie to nie jest kuloodporne Ogrom kodu Problemy z dostępnością Problemy ze skalowalnością Brak elastyczności Rozwiązanie kuloodporne Bez stylów Dwa małe obrazki Stosowanie stylów (O)pływanie na ratunek Formowanie zakładek Wyrównanie obrazków tła Dodanie dolnego obramowania Efekt podmiany Wyróżniona zakładka Dlaczego rozwiązanie to jest kuloodporne Wariant bez obrazków, wykorzystujący gradienty CSS3 Podobny przykład wykorzystujący jednostki em Dodatkowe przykłady MOZILLA.ORG Skosy Wyszukiwanie w witrynie ESPN.com Podsumowanie Rozdział 3. Elastyczne wiersze Nie należy definiować wysokości poziomych elementów strony i trzeba zaplanować możliwość powiększenia ich w pionie Typowe rozwiązanie Dlaczego rozwiązanie to nie jest kuloodporne Mało istotne elementy graficzne Stałe wysokości Przerośnięty kod Rozwiązanie kuloodporne Struktura kodu Identyfikacja elementów Bez stylów Dodanie tła Pozycjonowanie zawartości Brakujące tło Dodanie szczegółów Cztery zaokrąglone narożniki Szczegóły związane z tekstem i odnośnikami Ostatni etap Poprawka dla IE7 Dlaczego rozwiązanie to jest kuloodporne Oddzielenie struktury od wyglądu Koniec z ustalonymi wysokościami Wariant z atrybutem border-radius Inny przykład rozciągania Struktura kodu Tworzenie dwóch obrazków Zastosowanie stylów CSS Autorozciąganie Podsumowanie Rozdział 4. Pomysłowe rozmieszczanie elementów Zamiast stosować tabele, lepiej używać elementów pływających Typowe rozwiązanie Dlaczego rozwiązanie to nie jest kuloodporne Rozwiązanie kuloodporne Nieograniczony wybór struktur Stosowanie list definicji Struktura kodu Bez stylów Definiowanie stylów dla kontenera Identyfikacja obrazków Style podstawowe Pozycjonowanie obrazka Przeciwległe obiekty pływające Miejsce dla opisów każdej długości Samoczynne anulowanie opływania elementów Ostatnie szlify Zmiana kierunku wyrównania Efekt siatki Inne tło Zastosowanie cienia Zabawa z blokowaniem opływania elementów pływających Blokowanie opływania elementów za pomocą właściwości overflow Łatwe blokowanie opływania elementów za pomocą zawartości generowanej Dlaczego rozwiązanie to jest kuloodporne Podsumowanie Rozdział 5. Niezniszczalne ramki Przed przystąpieniem do tworzenia stylów dla ramek należy wszystko dokładnie zaplanować Typowe rozwiązanie Dlaczego rozwiązanie to nie jest kuloodporne Rozwiązanie kuloodporne Struktura kodu Strategia z obrazkami Stosowanie stylów Dlaczego rozwiązanie to jest kuloodporne Wariant z użyciem CSS3 Inne techniki tworzenia zaokrąglonych narożników Rogi, rogi na okrągło Pozorne ramki Jeden zaokrąglony narożnik Iluzja narożnika Kuloodporna strzałka Ograniczenia inspirują Podsumowanie Rozdział 6. Brak obrazków? Brak CSS? Żaden problem! Należy zadbać o to, by treść strony była czytelna, nawet jeśli strona zostanie pozbawiona rysunków i stylów CSS Typowe rozwiązanie Dlaczego rozwiązanie to nie jest kuloodporne Rozwiązanie kuloodporne Dlaczego rozwiązanie to jest kuloodporne Ze stylami lub bez 10-sekundowy test użyteczności Typowe rozwiązanie Rozwiązanie kuloodporne Test Dig Dug Narzędzia do sprawdzania kuloodporności stron Favelety Pasek Web Developer Pasek Web Accessibility Toolbar Firebug Walidacja jako narzędzie Podsumowanie Rozdział 7. Konwersja tabel Z tabel należy usunąć kod odpowiadający za warstwę prezentacji, a ich wygląd zdefiniować za pomocą CSS Typowe rozwiązanie Dlaczego rozwiązanie to nie jest kuloodporne Rozwiązanie kuloodporne Struktura kodu Stosowanie stylów Dlaczego rozwiązanie to jest kuloodporne Podsumowanie Rozdział 8. Płynny oraz elastyczny układ strony Eksperymentuj z projektowaniem układów stron, które rozszerzają się i zwężają Typowe rozwiązanie Dlaczego rozwiązanie to nie jest kuloodporne Nadmiar kodu źródłowego Koszmar aktualizacji Niewłaściwa kolejność treści strony Rozwiązanie kuloodporne Struktura kodu Tworzenie kolumn: pływanie kontra pozycjonowanie Stosowanie stylów Odstępy Dopełnienie kolumn Ustawianie szerokości minimalnej oraz maksymalnej Sposób na optyczne wyrównanie długości kolumn Trójkolumnowe układy stron Dlaczego rozwiązanie to jest kuloodporne Układ strony oparty na jednostkach em Przykład elastycznej strony internetowej Struktura kodu CSS Ideałem jest spójność strony Uwaga na paski przewijania Podsumowanie Rozdział 9. Łączenie w całość Bez nazwy Zastosuj kuloodporne rozwiązania do projektu całej strony internetowej Cel Dlaczego rozwiązanie to jest kuloodporne Płynny, adaptujący się projekt Elastyczny tekst Brak rysunków? Brak CSS? Żaden problem! Wersje językowe Konstrukcja Struktura kodu Style podstawowe Struktura układu strony Elastyczna siatka Definiowanie atrybutu max-width Nagłówek Elastyczne obrazki Struktura bocznego paska Wielokolumnowy układ strony w CSS3 Magia zapytań o media Podsumowanie Skorowidz