Projektowanie serwisów WWW. Standardy sieciowe – wydanie III zostało ponownie przeredagowane, tym razem już nie przez Zeldmana, a Ethana Marcotta. Współautor książki jest redaktorem znanej projektantom strony A List Apart. Współpracował również z New York Magazine i W3C. Również przy pracy nad omawianą książką wykazał się prawdziwym profesjonalizmem, jeśli chodzi o kwestie standardów sieciowych.

Kilkanaście rozdziałów dotyczących zasad tworzenia strukturalnego i semantycznego kodu, a także realizacji nowoczesnych układów, stworzonych w oparciu o arkusze stylów kaskadowych. Dodatkowo prezentacja języków hipertekstowych oraz metody pisania nieinwazyjnego kodu JavaScript. Kolejne rozdziały prezentują sposoby tworzenia i manipulacji elementami DOM, sekrety użyteczności interfejsów użytkownika oraz dostępności stron internetowych.

Dzięki tej książce nauczysz się prawidłowego stosowania standardów sieciowych. Tworzenie nowoczesnych i funkcjonalnych witryn staje się jeszcze łatwiejsze po przeczytaniu porad doświadczonych specjalistów. Optymalizacja kodu, zwiększenie zasięgu i niskie koszty utrzymania stron to kluczowe cele jakie pragnie osiągnąć klient. Nowe, aktualniejsze wydanie tej książki pozwoli na usprawnienie procesu projektowania i wdrożenia witryny internetowej w zależności o stawianych wymagań.

Autorzy przedstawili kilka projektów, w których pokazali przydatne sztuczki i gotowe rozwiązania. Podczas pracy projektanta istotne są konsekwentne poszukiwania inspiracji i umiejętność elastycznego realizowania projektów. Dodatkowo dowiesz się sporo na temat przyszłości standardów sieciowych, w tym HTML5 oraz CSS3. Osoby o małym doświadczeniu poznają zasady tworzenia właściwej struktury, prezentacji i zachowania stron internetowych. Dzięki tej książce poradzisz sobie z najczęstszymi problemami, jakie spotykają projektantów stron internetowych.

OSTATECZNA OCENA: 5/5

• Autorzy: Zeffrey Zeldman, Ethan Marcotte
• Tytuł oryginału: Designing with Web Standards (3rd Edition)
• Tłumaczenie: Piotr Rajca
• ISBN: 978-83-246-2658-8
• Format: 158×235, 448 stron
• Data wydania: 12/2010 (Helion)

“HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW” to kompletny podręcznik dotyczący tworzenia stron internetowych oraz specyfikacja najpopularniejszych technologii internetowych. Autorzy skupili się na wyjaśnieniu różnic w strukturze dokumentów HTML i XHTML, a także szczegółowo omówili ich specyfikacje. Książka dokładnie pokazuje sposób definiowania metadanych i wstawiania poszczególnych elementów na stronie. Przykłady zawarte w kolejnych rozdziałach prezentują budowanie i używanie tabel, formularzy, obrazów oraz pozostałych najpopularniejszych znaczników.

Autorzy szczególny nacisk położyli na zrozumienie standardów sieciowych, których zrozumienie jest podstawą do prawidłowego tworzenia strona internetowych. Idea rozdzielenia części prezentacyjnej i treści pokazuje zalety nowoczesnego podejścia, a dodatkowe rozdziały dopełniają całości książki. Poza przykładami dotyczącymi HTML/XHTML, autorzy omawiają JavaScript oraz CSS. Osoby początkujące łatwo zrozumieją wspomniane technologie na przykładowym kodzie. Pozostali mają do dyspozycji aktualne specyfikacje omawianych technologii.

Książka jest bardzo dobrym wprowadzeniem dla osób, które nie zajmowały się nigdy tworzeniem stron internetowych lub robiły to dawno temu. Porzucenie przestarzałych technik jest konieczne. Standardy sieciowe wyznaczają właściwy kurs rozwoju internetu, dlatego wszyscy powinni nim podążać.

OSTATECZNA OCENA: 4.5/5

• Autorzy: David Schultz, Craig Cook
• Tytuł oryginału: Beginning HTML with CSS and XHTML: Modern Guide and Reference
• Tłumaczenie: Rafał Jońca
• ISBN: 978-83-246-1498-1
• Format: 158×235, 384 strony
• Data wydania: 05/2008 (Helion)

Przykłady stylizacji tabel zostały w 2006 roku zebrane przez niezawodny Smashing Magazine. Czas w sieci upływa bardzo szybko, wiele z tych przykładów, jeśli nie wszystkie to przykłady przestarzałe. Jednak ten sam Smashing Magazine w nowszym artykule prezentuje naprawdę atrakcyjne przykłady. Niestety wygląd to nie wszystko.

Problem

Wielokrotnie zdarza się, że za ciekawym wyglądem tabeli kryje się nadmierna liczba klas, które dotyczą poszczególnych elementów. Podstawowa struktura tabeli składa się z trzech znaczników <table>, <tr> oraz <td>, które tworzą odpowiedni element tabeli, wiersze i poszczególne komórki.

Taka struktura nie pozwala na zbyt wiele, ponieważ odniesienie się do elementów poprzez selektory kontekstu jest wręcz niemożliwa. Jedyne dostępne rozwiązanie to wykorzystanie atrybutów <class> i selektorów klas.

Kolorowanie wierszy i kolumn wymaga użycia atrybutu <class> dla każdej komórki. Kolorowanie samych wierszy uzyskamy poprzez atrybuty<class> dla poszczególnych znaczników <tr>. Poniższe style określają kolor tła dla nieparzystego i parzystego wiersza oraz nieparzystej i parzystej kolumny.

.odd-row {
	background: #eee;
}
.even-row {
	background: #ccc;
}
.odd-column {
	background: #fcc;
}
.even-column {
	background: #f44;
}

Zamierzony efekt zostanie osiągnięty, ale kod naszej tabeli stanie się mniej czytelny, zarówno dla wyszukiwarek, jak i dla ludzie. Istnieje dobra alternatywa dla powyższego rozwiązania.

Rozwiązanie pośrednie

Konieczne zmiany dotyczą kodu tabeli. Struktura tabeli udostępnia elementy grupujące wiersze oraz kolumny. Znaczniki <thead>, <tbody> oraz <tfoot> grupują odpowiednio wiersze nagłówka, danych i stopki.

Analogiczne przeznaczenie ma znacznik <colgroup>, który obejmuje poszczególne kolumny tabeli, zdefiniowane przez znaczniki <col>.

Ważne jest zrozumienie kolejności wyświetlania warstw, które tworzą strukturę tabeli. Szczegółowy artykuł na ten temat napisał Roger Johansson.

Zmodyfikowana struktura pozwala na użycie analogicznych stylów w arkuszu, jednak zamiast selektorów klasy korzystamy z selektorów kontekstu.

Nowoczesne podejście

Selektory potomka oferowane przez CSS3 umożliwiają jeszcze dokładniejsze odwołanie się do elementów w strukturze dokumentu. Niestety Internet Explorer nie obsługuje selektora potomka, co jest sporym mankamentem tego rozwiązania.

col:nth-child(odd) {
	background: #faa;
}
col:nth-child(even) {
	background: #f44;
}
tbody tr:nth-child(odd) {
	background: transparent url(img/grey-10-transparent.png) 0 0 repeat;
}
tbody tr:nth-child(even) {
	background: transparent url(img/grey-50-transparent.png) 0 0 repeat;
}

Właściwe dobranie kolorów tła oraz obrazów pozwala na uzyskanie właściwego kolorowania wierszy i kolumn. Wygląd tabeli jest dokładnie taki, jak oczekiwaliśmy. Dodatkowa zaleta tego podejścia to struktura tabeli wolna od zbędnych atrybutów <class>.

Podsumowanie

Przedstawione przykłady różnią się sposobem w jaki uzyskano efekt końcowy. Czytelniejsza struktura i lżejszy kod to wielka zaleta. Podobnych rozwiązań istnieje wiele, jednak nie stosuje się ich powszechnie z powodu braku wsparcia po stronie Internet Explorera.

Uzyskanie takich efektów umożliwia CSS3, który jest poprawnie obsługiwany przez nowoczesne przeglądarki. Trudno mówić o komercyjnym zastosowaniu takiego rozwiązania, kiedy Internet Explorer 8 odmawia poprawnej interpretacji wielu selektorów CSS3, w tym bardzo użytecznych selektorów potomka. Jednak praktycznie zapoznanie się z nowymi możliwościami CSS3, pozwoli na ich stosowanie chociażby w niekomercyjnych projektach lub własnych zastosowaniach.

Wprowadzenie

Pierwszym krokiem jest stworzenie struktury tabeli. Danymi źródłowymi były wartości indeksów na GPW, zaczerpnięte z serwisu finansowego Wirtualnej Polski. Jakie było moje zdziwienie, gdy kod dwukolorowej tabeli z kilkowa wierszami zawierał ponad 3000 znaków. Jednak takie są skutki formatowania danych w kodzie HTML, a także błędne wykorzystanie dostępnych technologii.

Minimalna struktura tabeli to znaczniki <table>, <tr> oraz <td>. Elementy te odpowiadają za tworzenie całej tabeli, kolejnych wierszy i poszczególnych komórek. W dalszej kolejności możemy dołączyć <thead>, <tbody>, a także <tfoot>, które dzielą całość tabeli na poszczególne sekcje: nagłówek, zawartość oraz stopkę. Wielu programistów zapomina o opisie tabeli, który zamieszczamy w tagu <caption>. Szczegółowe informacje na temat struktury tabeli w XHTML przedstawia specyfikacja na stronie W3C.

Poniżej został przedstwiony skrócony kod tabeli, jaka była użyta w tym artykule.

<table>
    <caption>Indeksy (WIG20 bez opóźnień)</caption>
    <thead>
        <tr>
            <th rowspan="2">czas</th>
            <th rowspan="2">nazwa</th>
            <th colspan="2">wartość [pkt]</th>
            <th colspan="2">zmiana</th>
            <th colspan="3">wartość [pkt]</th>
        </tr>
        <tr>
            <th>bieżąca</th>
            <th>odniesienia</th>
            <th>[pkt]</th>
            <th>[%]</th>
            <th>otwarcia</th>
            <th>min</th>
            <th>max</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>16:40</td>
            <td>WIG20</td>
            <td>1 810,38</td>
            <td>1 810,97</td>
            <td>-0,59</td>
            <td>-0,03</td>
            <td>1 824,07</td>
            <td>1 803,29</td>
            <td>1 837,98</td>
        </tr>
        ...
    </tbody>
</table>

Najważniejsza zaleta tabeli to czytelność danych, które są grupowane wierszami, kolumnami lub wierszami i kolumnami. Niestety zbyt małe odstępy między komórkami niekorzystnie wpływają na szukanie danych oraz ich porównywanie, co przedstawia pierwszy przykład.

Wersja podstawowa

Selektory potomka dostępne w CSS3 odnoszą się do odpowiednich elementów potomnych danego rodzica. Tabela to powtarzający się zbiór określonych znaczników, a zatem idealnie nadaje się do zademonstrowania wspomnianych selektorów strukturalnych.

Najpierw zajmiemy się ustawieniem podstawowych właściwości dla naszej tabeli, jak tło, odstępy rozmiar czcionki dla wszystkich komórek.

table {
    background: #aaa;
    font-family: sans-serif;
    font-size: 12px;
    border-spacing: 1px;
}

Dotychczasowym sposobem na uzyskanie kolorowania wierszy w tabelach było stosowanie atrybutu class dla elementu <tr>. jeszcze trudniejsze było kolorowanie kolumn, które wymagało takiego zabiegu przy każdej komórce <td>. Jednak CSS3 pozwala na szybkie odnalezienie dowolnego elementu w strukurze DOM, pod warunkiem, że znamy jego rodzica.

Odnalezienie nieparzystych wierszy tabeli i ustawienie koloru tła umożliwia następujący selektor tr:nth-child(2n+1). Możliwy jest, także bardziej ludzki zapis, czyli tr:nth-child(odd).

table tr:nth-child(odd) td {
    background: #eee;
}

Analogicznie postępujemy w przypadku parzystych wierszy, do których zastosujemy selektor tr:nth-child(2n) lub tr:nth-child(even).

table tr:nth-child(even) td {
    background: #ccc;
}

Kolejne reguły ustawiają kolor tła nagłówka, odstępy kolor czcionki. Informacje przedstawione w całej tabeli zostały wyrównane do prawej, pownieważ większość z kolumn zawiera dane liczbowe. Dwie pierwsze kolumny zostały wyrównane do lewej, dzięki selektorom potomka ustawionym dla komórek td:nth-child(1) i td:nth-child(2).

table th {
    background: #000;
    padding: 5px 10px;
    color: #fff;
}
table td {
    padding: 3px 5px;
    text-align: right;
}
td:nth-child(1),
td:nth-child(2) {
    text-align: left;
}

Kilkanaście linijek kodu CSS zmienia znacząco wygląd naszej tabeli, co pokazuje kolejny przykład. To nie koniec możliwości jakie oferuje CSS w przypadku stylowania tabel.

Możliwe jest ustawienie określonych właściwości dla poszczególnych kolumn, tak jak to miało miejsce w przypadku wyrównania zawartości pierwszej i drugiej kolumny. Bardzo przydatny jest opis tabeli umieszczony w znaczniku <caption>, który bez przeszkód modyfikujemy w stylach kaskadowych.

Jeśli szerokość naszej tabeli jest zbyt mała i chcemy zwiększyć jej rozmiar to z pomocą przychodzą następujące reguły:

table {
    width: 100%;
    max-width: 1024px;
}

Dzięki tym właściowościom nasza tabela dostosuje się do szerokości strony lub elementu, w którym jest umieszczona, nie przekraczając przy tym 1024 pikseli. W przypadku osadzenia tabeli w elemencie o zadanej szerokości, druga właściowość jest zbędna.

Podsumowanie

Dalsze możliwości stylizacji przykładowej tabeli są równie łatwe, dzięki zastosowaniu nowych selektorów. Wszystko zależy od naszych potrzeb i wyobraźni. Przeglądarki, które obsługują selektory CSS3 to Firefox 3.1+, Opera 9+, Safari 3+ oraz Chrome. Istnieje częściowe wsparcie dla wymienionych selektorów w przeglądarkach Internet Explorer, jednak nawet IE8 nie obsługuje sporej ich części.