Projektowanie serwisówWWW. Standardy sieciowe.Wydanie IIIAutorzy: Jeffrey Zeldman, Ethan MarcotteT³umaczenie: Piotr RajcaISBN: 978-83-246-2658-8Tytu³ orygina³u: Designing with Web Standards (3rd Edition)Format: 158×235, stron: 448

Jak to siê robi z pomoc¹ mistrza

• Poznaj przysz³oœæ standardów sieciowych• Stosuj skuteczne zasady pracy z nowoczesnymi przegl¹darkami• Naucz siê eliminowaæ problemy i ci¹æ koszty

Przewodnik po standardach autorstwa Jeffreya Zeldmana ponownie kontratakuje! Trzecie wydanie udowadnia, ¿e to wci¹¿ najwa¿niejsza ksi¹¿ka dla wszystkich projektantów, którzy chc¹ tworzyæ nowoczesne i funkcjonalne witryny – b³yskawicznie siê wczytuj¹ce, trafiaj¹ce do masowego odbiorcy i tanie w utrzymaniu. Do nowej, zaktualizowanej wersji dodano niezwykle przydatne informacje o usprawnieniach,a tak¿e wyzwaniach, jakie stoj¹ przed projektantami pracuj¹cymi w nieustannie zmieniaj¹cym siê œrodowisku standardów sieciowych.

W tym wydaniu ksi¹¿ki znajdziesz informacje na temat tego, jak za pomoc¹ standardów rozwi¹zywaæ problemy powstaj¹ce w wyniku stosowania starych sposobów projektowania witryn WWW. Dowiesz siê tak¿e, jak stare i nowe standardy przekszta³caj¹ internetw dynamiczn¹ platformê do tworzenia solidnych, dostêpnych aplikacji oraz piêknychi ³atwych do odnalezienia treœci. Przeczytasz te¿ o tym, jak zapowiada siê przysz³oœæ standardów sieciowych.

• Prezentacja jêzyków XHTML, HTML 5, CSS.• Zasady tworzenia strukturalnego, semantycznego kodu.• Realizacja solidnych uk³adów, tworzonych w oparciu o CSS.• Tworzenie nieinwazyjnego kodu JavaScript.• Dodatkowe informacje dotycz¹ce typografii i dostêpnoœci.• Prezentacje kilku projektów, w których pokazujemy sztuczki i rozwi¹zania

w zakresie stosowania standardów.

W tym przemyœle Jeffrey Zeldman zajmuje miejsce gdzieœ pomiêdzy „Bogiem” a „guru” – i potrafi wykorzystaæ sw¹ m¹droœæ oraz dowcip, by opowiadaæo tym, CZYM s¹ standardy sieciowe, JAK nale¿y je stosowaæ oraz DLACZEGO powinniœmy zwróciæ na nie uwagê.

Kelly Goto, autorka ksi¹¿ki Web ReDesign 2.0: Workflow that Works

Czasami, bardzo rzadko, udaje siê znaleŸæ autora, o którym myœlimy sobie: „Ten goœæ jest inteligentny! I sprawia, ¿e ja te¿ czujê siê m¹drzejszy, bow koñcu zrozumia³em to zagadnienie”.

Steve Krug, autor ksi¹¿ek„Nie ka¿ mi myœleæ! O ¿yciowym podejœciu do funkcjonalnoœci stron internetowych”

oraz „Przetestuj j¹ sam! Steve Krug o funkcjonalnoœci stron internetowych”

Spis tre�ci

Wst�p do trzeciego wydania ................................................17

Cz��� I

Zanim zaczniesz ..............................................................25

Przerwanie cyklu starzenia si� .................................................................... 26

adnego dogmatu ........................................................................................ 27

Kontinuum, a nie zbiór sztywnych regu� ............................................... 27

Kilka wa�nych definicji ............................................................................... 28

Jeden rozmiar nie b�dzie dobry dla wszystkich ............................................ 30

Witamy w�ród zwyci�zców ........................................................................... 31

1. 99,9% witryn wci�� jest przestarza�ych ...................................35

Nowoczesne przegl�darki i standardy sieciowe ............................................ 36

Nowy kod do nowej pracy ............................................................................ 37

Problem „wersji” ......................................................................................... 38

My�lenie wsteczne ....................................................................................... 40

Z�y kod: pierwsza siatka za darmo ........................................................ 41

W d�u�szej perspektywie czasu rozga��zianie kodu

mo�e by niebezpieczne dla witryny ............................................................. 43

Ukryte koszty rozbudowanego kodu stron ................................................... 46

Zgodno� wstecz jest k�amstwem ................................................................ 47

Blokowanie u�ytkowników nie wp�ywa dobrze na interesy ..................... 49

Lek .............................................................................................................. 52

2. Projektowanie i budowanie z u�yciem standardów .....................55

Pokonywanie trudno�ci ............................................................................... 57

Koszt projektowania przed wprowadzeniem standardów ............................. 58

Nowoczesna strona starymi metodami ........................................................ 59

Trzy elementy standardów sieciowych ......................................................... 66

Struktura .............................................................................................. 66

Prezentacja ........................................................................................... 69

Zachowanie ........................................................................................... 69

6 Projektowanie serwisów WWW. Standardy s ieciowe

Standardy w praktyce .................................................................................. 69

Projekt standardów sieciowych: przeno�no� w zastosowaniu ...................... 72

Jeden dokument dla wszystkich ............................................................. 73

A List Apart: jedna strona, wiele widoków .................................................. 75

Projektowanie nie tylko z przeznaczeniem na ekran .............................. 77

Oszcz�dno� czasu i kosztów, wzrost zysków ......................................... 78

Co dalej? ...................................................................................................... 79

3. Delikatna perswazja ..........................................................83

4. Przysz�o�� standardów sieciowych .........................................91

Wyszukiwanie, syndykacja, blogi, podcasty i d�ugi ogon

(oraz inne powody zwyci�stwa standardów sieciowych) ................................ 92

Uniwersalny j�zyk (XML) ..................................................................... 93

Jeden rodzic, wiele dzieci ....................................................................... 94

Z�ota �y�a innowacji ............................................................................... 98

Przysz�o� standardów ........................................................................ 108

Grupa robocza WHAT ............................................................................... 110

Internet Explorer 7 i standardy sieciowe ............................................. 113

Narz�dzia do edycji i publikacji ........................................................... 114

Cz��� II

5. Nowoczesny uk�ad znaczników ........................................... 119

Ukryty schemat kiepskiego kodu ............................................................... 125

Przeformu�owanie czego? ..................................................................... 129

Podsumowanie ..................................................................................... 130

XHTML 2 — nie dla ka�dego ............................................................. 131

5 najwa�niejszych powodów, dla których warto wybra HTML ................. 133

5 najwa�niejszych powodów, dla których warto wybra XHTML 1 ........... 134

Podstawowy powód, dla którego nie warto wybiera XHTML-a ................ 134

6. XHTML i kod semantyczny ................................................. 135

Konwersja do XHTML-a: proste zasady, �atwe wytyczne .......................... 136

Dokument rozpoczynaj od deklaracji DOCTYPE i przestrzeni nazw .....137

Który DOCTYPE to Twój typ? ........................................................... 138

Wersja Strict czy Transitional: wielka bitwa naszych czasów .............. 139

Po DOCTYPE deklaracja przestrzeni nazw ........................................ 140

Zadeklaruj typ kodowania znaków ....................................................... 142

Wszystkie znaczniki pisz ma�ymi literami ............................................ 144

Warto�ci wszystkich atrybutów umieszczaj w cudzys�owach ................ 146

Przypisuj warto�ci wszystkim atrybutom ............................................ 148

Zamykaj wszystkie znaczniki ............................................................... 148

Nie umieszczaj podwójnych my�lników w komentarzach ..................... 150

Koduj wszystkie znaki < i & ................................................................ 150

Podsumowanie zasad XHTML-a ......................................................... 150

Kodowanie znaków: nudne, bardzo nudne i potwornie nudne .............. 151

Spis tre�ci 7

Leczenie strukturalne — dla nas bomba ................................................... 153

Sensowne kodowanie dokumentu ......................................................... 153

Elementy wizualne i struktura ............................................................ 159

7. HTML 5: nowa nadzieja ....................................................161

HTML 5 i aplikacje sieciowe: gra idzie o du�� stawk� ............................... 162

HTML 5 a XHTML .................................................................................. 164

Niech diabli porw� obie nomenklatury ................................................. 164

Parada elementów HTML 5 ...................................................................... 166

Semantyka struktury strony ............................................................... 167

HTML 5 to na razie tylko specyfikacja ............................................... 172

Dowiedz si� wi�cej ............................................................................... 175

8. Struktura i semantyka: gwarancja zwartych i trwa�ych stron ........177

div, id i inni pomocnicy .............................................................................. 178

Czym jest element div? ........................................................................ 179

id kontra class ..................................................................................... 180

Twórz tre� u�atwiaj�c� wyszukiwanie i stosowanie .................................. 183

Semantyczny kod i wielokrotne u�ycie ................................................. 184

Powszechne b��dy w nowoczesnym kodzie ............................................ 187

Znaczniki div s� w porz�dku ............................................................... 190

Pokocha atrybut id ............................................................................ 191

Wyeliminowa (lub zminimalizowa) style i skrypty

w kodzie (X)HTML ............................................................................. 191

Przerwa i powtórka ............................................................................. 192

9. Podstawy CSS ................................................................193

Wst�p do CSS ........................................................................................... 193

Korzy�ci z CSS .......................................................................................... 194

Anatomia stylów ........................................................................................ 195

Selektory, deklaracje, w�a�ciwo�ci i warto�ci ....................................... 195

Warto�ci ogólne i alternatywne ............................................................ 198

Dziedziczenie i jego przeciwnicy .......................................................... 200

Selektory potomne ............................................................................... 201

Selektory klas ...................................................................................... 203

Style zewn�trzne, osadzone i bezpo�rednie .......................................... 206

Metoda „najlepszego mo�liwego scenariusza” ............................................ 210

10. Uk�ady CSS: kod, ramki, elementy p�ywaj�ce — o rany! ..............213

Dao przep�ywu strony ................................................................................ 214

Poznaj model ramkowy .............................................................................. 215

Jak dzia�a model ramkowy? ................................................................. 216

Uk�ad stosowany ....................................................................................... 219

Skromne pocz�tki ................................................................................ 220

Magiczny dotyk klasy .......................................................................... 224

Modyfikacja uk�adu ................................................................................... 228

Analiza zawarto�ci — po raz wtóry ..................................................... 229

Tworzenie stylów ................................................................................. 233

8 Projektowanie serwisów WWW. Standardy s ieciowe

Modyfikacje elementów p�ywaj�cych .................................................... 236

Nie zwracamy uwagi na szczegó�y ....................................................... 239

Podsumowanie ........................................................................................... 242

11. Praca z przegl�dark�. Cz��� I:prze��czanie z typu dokumentu na tryb standardowy ................ 243

Saga o prze��czaniu przez deklaracj� typu dokumentu .............................. 244

Prze��cznik do w��czania i wy��czania standardów .............................. 244

Podstawy prze��czania przy u�yciu deklaracji typu dokumentu ................. 246

Jak dok�adne jest prze��czanie? ........................................................... 247

Standardy sieciowe i przegl�darka IE8 ............................................... 247

Standardy sieciowe i silnik Gecko ........................................................ 249

Kompletne i niekompletne deklaracje typu dokumentu ....................... 250

Pe�na lista kompletnych deklaracji typu dokumentu XHTML ............ 253

Zachowaj prostot� ............................................................................... 254

12. Praca z przegl�dark�. Cz��� II:b��dy, sposoby i blask CSS 3 .............................................. 257

B��dy CSS w powtórce na zwolnionych obrotach ....................................... 258

B��d podwojonego marginesu w elementach p�ywaj�cych .................... 263

Na ratunek obrazkom PNG ................................................................. 265

Co dalej? .............................................................................................. 266

Wiedza to jedynie po�owa sukcesu ....................................................... 268

CSS 3: nowy obiekt zainteresowania .......................................................... 277

Ty i kana� alfa ..................................................................................... 277

Rezygnujemy z prostok�tów ................................................................ 280

Programi�ci, miejcie si� na baczno�ci! ................................................. 281

Przemy�lmy, czym jest „wsparcie”? ..................................................... 285

Flash i QuickTime: obiekty po��dania? ..................................................... 288

Obiekty osadzane: opowie� o pró�no�ci i zem�cie ................................ 288

Podwójna zemsta W3C ........................................................................ 289

Dwie pieczenie na jednym ogniu: osadzanie obiektów multimedialnych

przy przestrzeganiu standardów .......................................................... 290

�y�ka dziegciu w beczce miodu: object nie dzia�a ................................ 291

Szczypta JavaScriptu .......................................................................... 291

�wiat, w którym omijanie b��dów jest codzienno�ci� .................................. 292

13. Praca z przegl�dark�. Cz��� III: typografia ............................. 295

Kilka s�ów o typografii ............................................................................... 296

ABC czcionek na stronach WWW .............................................................. 299

Horrory starej szko�y ........................................................................... 302

Nareszcie standardowy rozmiar ........................................................... 305

Karabiny i piksele ................................................................................ 307

Upojenie w�szycieli .............................................................................. 308

Przygody z wielko�ci� czcionek .................................................................. 310

Powi�kszenie: demokracja bezpieczna dla pikseli ................................. 313

Jednostki em: rado� i p�acz ................................................................ 316

Metoda symbolicznych warto�ci rozmiarów czcionek ........................... 317

Spis tre�ci 9

Ja chc� czcionki Franklin Gothic! ............................................................. 319

Regu�a @font-face: prawdziwe czcionki na stronach WWW ................ 319

sIFR — dost�pne podmienienie czcionek ............................................ 322

Cufón — „czcionki dla ludzi” .............................................................. 323

Typekit i bracia ................................................................................... 324

14. Dost�pno��: to, co w standardach najwa�niejsze .....................329

Pi� porad dotycz�cych tworzenia dost�pnych witryn ................................ 330

1. Zabierz si� do pracy ......................................................................... 330

2. Skorzystaj z logicznej struktury stron ............................................. 331

3. Zapewnij mo�liwo� dost�pu przy u�yciu klawiatury ....................... 331

4. Udost�pniaj rozwi�zania alternatywne ............................................ 332

5. Wybierz standard i korzystaj z niego konsekwentnie ....................... 332

Dost�pno� wed�ug podr�czników .............................................................. 333

Powszechna dezorientacja ......................................................................... 336

„�lepy miliarder” ................................................................................ 336

Dost�pno� nie ogranicza si� jedynie do niedowidz�cych ..................... 337

Wyja�niamy znaczenie paragrafu 508 ................................................. 339

Obalamy mity dost�pno�ci ......................................................................... 340

U�atwienia dost�pu element po elemencie .................................................. 345

Obrazki ............................................................................................... 345

Sprawdzone narz�dzia ......................................................................... 354

Zachowaj kolejno�: nasz dobry znajomy atrybut tabindex .................. 355

Planowanie dost�pu: jak na tym skorzystasz ....................................... 356

15. Wykorzystanie skryptów opartych na modelu DOM ....................359

DOM wed�ug podr�czników ....................................................................... 360

Co to jest DOM? ........................................................................................ 360

Standardowy sposób na to, by strony WWW

zachowywa�y si� jak aplikacje .............................................................. 362

Zatem gdzie to dzia�a? ......................................................................... 364

Prosz�, DOM, nie zrób im krzywdy ........................................................... 365

Jak to dzia�a? ...................................................................................... 365

Sprawdzanie obs�ugi ............................................................................ 371

Warianty kodu .................................................................................... 372

Prze��czniki stylów: u�atwiaj� dost�p, oferuj� wybór ........................... 373

Naucz si� kocha swoj� bibliotek� (JavaScript) ......................................... 375

Jak korzysta z DOM? .............................................................................. 378

16. Przeprojektowywanie witryny ............................................379

Wychodzimy z przesz�o�ci .......................................................................... 382

Projektowanie wychodz�ce od tre�ci .......................................................... 383

Troch� oddechu ................................................................................... 387

Czcionki, wprowadzenia i wpuszczone inicja�y ..................................... 388

Ci�gle ta sama �piewka ....................................................................... 394

Mania stopek ....................................................................................... 394

G�owa do góry ..................................................................................... 400

Szczegó�y, szczegó�y ............................................................................ 402

10 Projektowanie serwisów WWW. Standardy s ieciowe

17. NYMag.com: proste standardy, seksowny interfejs ................... 405

Zestawienie zawarto�ci .............................................................................. 407

Od spisu zawarto�ci do strategii .......................................................... 412

Przyjaciele, jeszcze raz wrómy do kodu .................................................... 414

Od nawiasów k�towych do klamrowych ..................................................... 417

Metody — czyste szale�stwo ............................................................... 422

Porozmawiaj z DOM ................................................................................. 425

Poznaj element colgroup ...................................................................... 425

Skorzystajmy z jQuery ........................................................................ 426

Standardy na ka�d� por� roku ................................................................... 432

Skorowidz .................................................................... 433

Ukryty schemat kiepskiego kodu 119

ROZDZIA� PITY

Nowoczesnyuk�ad znaczników

z�� pierwsza nakre�li�a w skrócie problemy biznesowe i produk-

cyjne b�d�ce wynikiem stosowania starych metod projektowa-

nia sieci, naszkicowa�a korzy�ci p�yn�ce ze stosowania standardów oraz

odmalowa�a radosny obraz nap�dzanego standardami rozwoju sieci.

W pozosta�ej cz��ci ksi��ki przejdziemy „od ogó�u do szczegó�u”.

Najlepszym sposobem, by zacz�, b�dzie po�wi�cenie kilku sekund

na przeanalizowanie podstawowych zagadnie� zwi�zanych z tworze-

niem kodu stron, takich jak wybór wersji j�zyka, jak� nale�y stosowa,

oraz sposoby kodowania niektórych, doskonale znanych, elementów

stron: nag�ówków, akapitów i list (podpowied�: chodzi o to, jak to robi

prawid�owo semantycznie).

Wielu projektantom i programistom my�l o ponownym analizowaniu

kodu nie przypadnie do gustu. Z pewno�ci� ka�dy, kto sp�dzi� na pro-

jektowaniu witryn wi�cej ni� kilka tygodni, wie doskonale, o co chodzi

w starym, dobrym HTML-u. Czy nie powinni�my po�wi�ca naszego

ograniczonego wolnego czasu, ucz�c si� nowszych, u�yteczniejszych

j�zyków? Czy na przyk�ad nie op�aca si� bardziej studiowa techno-

logii dzia�aj�cych po stronie serwera, takich jak PHP i jej podobne.

Odpowied� brzmi: „Tak i nie”. Technologie dzia�aj�ce po stronie

serwera maj� istotne znaczenie przy tworzeniu dynamicznych wi-

tryn odpowiadaj�cych na zapytania u�ytkownika. Nawet tradycyjne

witryny informacyjne mog� odnie� korzy�ci przez umieszczenie ich

C

120 Rozdzia� 5. > Nowoczesny uk�ad znaczników

tre�ci w bazie danych i odwo�ywanie si� do nich w miar� potrzeby przy

u�yciu PHP lub podobnych technologii. Niemal ka�da nowoczesna witryna

korzysta z takich technologii, nawet skromny i niepozorny blog. Podobnie

do standardów przedstawianych w tej ksi��ce, j�zyki skryptowe wykonywane

po stronie serwera oraz szkielety do tworzenia aplikacji, takie jak Ruby on

Raili, CakePHP, Dijango czy Symfony, umo�liwiaj� oddzielanie danych od

interfejsu. Tak jak CSS, które niweluj� konieczno� umieszczania wszyst-

kich fragmentów tre�ci w pozbawionych semantycznego znaczenia komór-

kach tabel HTML, tak j�zyki, na przyk�ad PHP, i systemy zarz�dzania

relacyjnymi bazami danych (jak choby MySQL) pozwalaj� twórcom witryn

unikn� w�asnor�cznego pisania ka�dej ze stron.

Co to takiego to PHP?

PHP (www.php.net) jest darmowym j�zy-

kiem skryptowym ogólnego przeznaczenia,

który idealnie nadaje si� do tworzenia

stron internetowych i mo�e by osadzany

wewn�trz kodu HTML i XHTML. (Kod

PHP mo�na tak�e umieszcza wewn�trz

kodu HTML). Jego sk�adnia przypomina

j�zyki, takie jak C, Java oraz Perl, i jest

wzgl�dnie �atwa do przyswojenia. PHP

(skrót od Hypertext Preprocessor1) jest

bardzo funkcjonalny, ale swoj� popular-

no� zyska� g�ównie dzi�ki mo�liwo�ci

wspó�pracy z baz� danych MySQL (www.

mysql.com). Cecha ta pozwala progra-

mistom i projektantom w �atwy sposób

tworzy dynamiczne strony i budowa

aplikacje sieciowe.

PHP stanowi projekt fundacji Apache

(www.apache.org) i mo�e by u�ywany

zupe�nie za darmo, co stanowi jedno ze

�róde� jego ogromnej popularno�ci. Innym

jest ogromny zestaw narz�dzi do testo-

wania i profilowania2 kodu. Niezale�ni

projektanci i programi�ci uwielbiaj� ten

j�zyk (b�d� uwielbiali, zanim nie poznali

jego m�odszego kuzyna — Ruby) i wyko-

rzystuj� go nieustannie do tworzenia coraz

to nowych stron i produktów (patrz rysu-

nki 5.1 i 5.2). Z powodu jego skalowal-

no�ci (nie wspominaj�c o braku op�at)

du�e firmy, rzadko znane ze stosowania

otwartych standardów, pokocha�y PHP.

Przyk�adowo PHP nap�dza Yahoo.com

ju� od 2002 roku (ostatnio jest przy tym

u�ywany otwarty szkielet PHP o nazwie

Symfony [http://www.symfony-project.

org]). Równie� IBM wspar� PHP sw�

pot�g�, g�ównie za po�rednictwem formy

Zend i szkieletu CakePHP (http://www.

internetnews. com/ent-news/article.php/

3485806).

1

Mianem preprocesora okre�la si� program wst�pnie analizuj�cy kod. Dla przyk�adu

w j�zyku C preprocesor uruchamiany jest przed w�a�ciw� kompilacj�, aby dokona

odpowiednich podstawie� w kodzie — przyp. t�um.2

Przez profilowanie nale�y rozumie badanie wydajno�ci kodu (jako ca�o�ci lub

poszczególnych jego fragmentów) — przyp. t�um.

Ukryty schemat kiepskiego kodu 121

Rysunek 5.1.Projektanti programista ShaunInman u�y� PHP,MySQL, JavaScripti CSS do stworzeniaMint (havemint.com),rozszerzalnegonarz�dziado raportowaniapotrafi�cegoodpowiedzie�,kto odwiedza i tworzyodno�niki do Twojejwitryny, z jakiejprzegl�darki korzystai du�o wi�cej

Rysunek 5.2.Typowa instalacja Mint(widoczna tutajpochodzi z witrynykonferencjiEvent Apart)

122 Rozdzia� 5. > Nowoczesny uk�ad znaczników

Co to takiego to PHP? — ci�g dalszy

PHP mo�e wspó�pracowa z oprogramo-

waniem serwerowym Microsoftu, ale naj-

cz��ciej u�ywany jest w po��czeniu z serwe-

rem Apache. Apache pracuje zarówno na

platformach Windows, jak i Unix (ze wska-

zaniem na te drugie). System operacyjny

OS X firmy Apple ma wbudowany j�zyk

PHP i serwer Apache, podobnie z reszt�

jak niemal wszystkie dystrybucje Linuksa.

PHP nie wymaga budowania interfejsu

przy u�yciu uk�adu CSS i poprawnego

semantycznego kodu znaczników, ale tam,

gdzie trafiamy na oparte na standardach

strony sieciowe, bardzo cz�sto okazuje si�,

�e stoi za nimi PHP.

Jednak nawet dynamicznie wygenerowane strony stan� si� bezu�yteczne,

je�eli b�d� niedost�pne, niezgodne z wieloma przegl�darkami i urz�dzeniami

lub za�miecone niepotrzebnym kodem znaczników. Je�eli dynamiczna strona

nie wy�wietli si� poprawnie w jakiej� przegl�darce lub jej za�adowanie

zajmie 60 sekund przez ��cze modemowe, w sytuacji gdy wystarczy�oby

w zupe�no�ci 10 sekund, technologie serwerowe na niewiele si� zdadz� Twoim

u�ytkownikom. Je�li dodatkowo u�ytkownicy i wyszukiwarki nie b�d�

w stanie znale� na witrynie interesuj�cych ich informacji, gdy� zosta�y

zagrzebane wewn�trz semantycznie bezsensownego kodu, wszystkie wysi�ki

w�o�one w utworzenie pi�knego projektu, napisanie witryny i zapewnienie

jej odpowiedniej obs�ugi ze strony mechanizmów dzia�aj�cych po stronie

serwera b�dzie mo�na porówna do genialnych muzyków wyst�puj�cych przed

pust� widowni�.

Czym jest Rails?

Ruby on Rails (www.rubyonrails.org) jest

szkieletem do budowania aplikacji siecio-

wych dost�pnym na licencji otwartego kodu,

zoptymalizowanym pod k�tem szybkiego,

produktywnego, stabilnego programowania

(patrz rysunek 5.3). Czym jest Ruby?

Dobre pytanie. Ruby jest zorientowanym

obiektowo j�zykiem programowania stwo-

rzonym przez Yukihiro Matsumoto w 1995

roku i rozpowszechnianym jako wolne

oprogramowanie na licencji open source.

��czy w sobie sk�adni� inspirowan� j�zy-

kami Perl i Ada z funkcjami obiektowymi

oraz posiada wspólne cechy z j�zykami Lisp

i Python

Zatem czym jest Rails? Rails jest szkiele-

tem aplikacji dzia�aj�cym w oparciu o mo-

del projektowy MVC (ang. model-view-

controller — model-widok-kontroler), napi-

sanym w j�zyku Ruby przez Davida Heine-

meira Hanssona w lipcu 2004 roku. Rails

zosta� wyodr�bnionym z aplikacji Base-

camp firmy 37signals (patrz rysunek 5.4).

Ukryty schemat kiepskiego kodu 123

Rysunek 5.3.Ruby on Rails(www.rubyonrails.org)dost�pny w postaciotwartych �róde�szkieletprogramistyczny.Jego podstawowezasady to:„Nie powtarzaj si�”oraz „Konwencjaponad konfiguracj�”

Rysunek 5.4.Basecamp firmy37signals(basecamphq.com)to nieustaj�ce �ród�oprezentów. Nie tylkojest to wspania�aaplikacja do zarz�dzaniaprojektami, ale równie�aplikacja, z którejwyodr�bniono Rubyon Rails

(Wersja 1.0 zosta�a opublikowana w po-

staci otwartego kodu �ród�owego w grud-

niu 2005 roku). Programi�ci rzucili si� na

niego, poniewa� jego przewodnie zasady

pozwalaj� szybciej pisa lepszy kod.

124 Rozdzia� 5. > Nowoczesny uk�ad znaczników

Czym jest Rails? — ci�g dalszy

W wi�kszo�ci �rodowisk programistycznych

trzeba napisa tuzin wierszy kodu, aby

przenie� zmienn� na ekran (lub z ekranu).

I to samo powtarza si� za ka�dym razem

podczas tworzenia nowego programu, dla

ka�dej najmniejszej rzeczy, jak� robi ten

program. To tak, jakby trzeba by�o pisa

edytor tekstu zawsze wtedy, kiedy chcemy

wys�a oficjalny list. Ruby on Rails odrzuca

ten model. Wewn�trz Rails programi�ci

nie musz� ju� kodowa obs�ugi ka�dego

najmniejszego szczegó�u — musz� jedy-

nie skonfigurowa to, co jest niekonwen-

cjonalne. Podobnie jak PHP, Ruby nie

wymaga budowania interfejsu zgodnie ze

standardami, ale te dwa elementy id�

w parze du�o cz��ciej ni� osobno. Po��cze-

nie XHTML-a, CSS, JavaScriptu i Ruby

on Rails zapewnia dzia�anie wielu popu-

larnych aplikacji internetowych, takich jak

Twitter (patrz rysunek 5.5). Ruby on Rails

jest tak�e z powodzeniem wykorzystywany

w tradycyjnych aplikacjach internetowych,

na przyk�ad yellowpages.com (patrz rysu-

nek 5.6). Inne j�zyki programowania —

w�ród nich PHP i Python — tak�e udo-

st�pniaj� szkielety aplikacji MVC, podobne

do Ruby on Rails.

Rysunek 5.5.Twitter(www.twitter.com),niezwykle popularnaaplikacjado dystrybucjimikrowiadomo�ci,powsta�a przy u�yciuCSS, XHTML 1.0Strict oraz Rubyon Rails

Ukryty schemat kiepskiego kodu 125

Rysunek 5.6.Po�wicz troch� palce,przeszukuj�cksi��k� telefoniczn�Yellow Pages (www.yellowpages.com),napisan� w XHTML1.0 Transitionali korzystaj�c�z Ruby on Rails

Krótko mówi�c, nie mo�na rozdziela obu technologii. Technologie dzia�aj�ce

po stronie serwera w po��czeniu z bazami danych umo�liwiaj� tworzenie

sprytniejszych, bardziej funkcjonalnych stron, ale to, co dostarczaj� te strony,

jest zawarto�ci�, która dzia�a najlepiej, kiedy posiada czyst� i prost� struktur�.

I w�a�nie w tym miejscu wi�kszo� z nas zawodzi (ale zawodzi tak�e wiele sys-

temów do zarz�dzania zawarto�ci�, na których polegamy).

Ukryty schemat kiepskiego koduW trakcie pierwszej dekady istnienia przemys�u sieciowego projektowanie

przypomina�o prób� nakarmienia mnóstwa wybrednych dzieci. Aby zbu-

dowa dzia�aj�c� stron�, pos�usznie uczyli�my si� „diety” ka�dej przegl�-

darki. Obecnie wszystkie przegl�darki akceptuj� to samo po�ywne jedzonko,

a robi� to od 2001 roku, ale wielu programistów jeszcze tego nie zrozu-

mia�o i wci�� dosypuje cukier do jajecznicy.

Z�e jedzenie zatyka arterie, niszczy z�by i zmniejsza �ywotno� tych, którzy

je spo�ywaj�. Z�y kod znaczników jest szkodliwy dla krótkoterminowych

potrzeb u�ytkowników oraz d�ugoterminowego zdrowia zawarto�ci stron.

Do niedawna jednak fakt ten by� przed nami ukrywany wskutek tolerowa-

nia przez popularne przegl�darki za�mieconego i b��dnego kodu, o czym

mówi�em w rozdziale 1.

Tu oraz w kolejnych rozdzia�ach b�dziemy odkrywa na nowo zapomnian�

natur� czystego, semantycznego uk�adu znaczników oraz nauczymy si�

126 Rozdzia� 5. > Nowoczesny uk�ad znaczników

Inne platformy, inne obszary

Dwie inne platformy skryptowe u�ywane do tworzenia dynamicznych

stron i seksownych aplikacji sieciowych to Microsoft Active Server

Pages .NET 2.0 (www.asp.net) oraz Adobe ColdFusion 8 (www.adobe.

com/software/coldfusion/). Ka�da z nich ma swoje mocne strony oraz

zagorza�e �rodowisko u�ytkowników. Java Serve Pages (JSP), jeszcze

jedna technologia dynamiczna, jest powszechnie stosowana w ogrom-

nych systemach dla przedsi�biorstw i zdecydowanie wykracza poza

zakres tej ksi��ki.

Systemy do publikacji utworzone w niektórych z wymienionych j�zyków

mog� przy braku uwagi popsu szablony stron przygotowane zgodnie

ze standardami. W jednej z aplikacji, w tworzenie której zaanga�owana

by�a moja agencja, ASP (przed .NET 2.0) generowa� wszystko niepo-

prawnie, dopóki nie w��czyli�my do procesu HTML Tidy (tidy.sourceforge.

net). Przypomina�o to obrzucanie b�otem czystych ubra�, a nast�pnie

mycie ich w��em, ale pozwala�o uzyska poprawne strony z systemu,

który by� nieprzyjazny dla dobrego, czystego kodu. Pomijaj�c ju�

HTML Tidy, bardzo pomocne przy wprowadzaniu danych do systemów

CMS mo�e si� okaza wykorzystanie takich narz�dzi jak TinyMCE

(tinymce.moxicode.com) lub WYMEditor (www.wymeditor.org). Istniej�

tak�e j�zyki „quasi-znacznikowe”, takie jak Textile Deana Allena

(www.redcloth.org/hobix.com) lub Markdown Johna Brubera (www.

daringfireball.net/projects/markdown), które tak�e mog� pomóc osobom

nieobeznanym z HTML-em w tworzeniu prawid�owego, zgodnego ze

standardami kodu.

my�le strukturalnie, zamiast postrzega kod znaczników jako drugorz�dne

narz�dzie projektowania. Jednocze�nie przyjrzymy si� XHTML-owi 1.0 —

standardowemu j�zykowi do projektowania witryn. Poznamy jego cele oraz

korzy�ci wynikaj�ce z jego stosowania. Opracujemy strategi� przej�cia

z HTML-a na XHTML. Przyjrzymy si� tak�e nowemu graczowi na rynku —

j�zykowi HTML 5 (www.w3.org/TR/html5).

SYNDROM B �DNYCH ADRESÓW URL

Jzyki skryptowe czsto generuj d�ugie adresy URL zawierajce

niezakodowane znaki &, zastrze�one w HTML/XHTML. W HTML-u

i XHTML-u znak & u�ywany jest do wskazania encji znakowej, takiej jak

&#8217;, która oznacza poprawny typograficznie znak apostrofu w kodzie

Unicode. Mo�na to naprawi�, stosujc funkcj ColdFusion o nazwie

Ukryty schemat kiepskiego kodu 127

URLEncodeFormat(). ASP posiada podobn funkcj o nazwie HTMLEncode.

Z kolei jzyk PHP udostpnia funkcje urlencode() (http://php.net/

manual/pl/function.urlencode.php), rawurlencode() (http://php.net/

manual/pl/function.rawurlencode.php) oraz htmlentities() (http://php.net/

manual/pl/function.htmlentities.php). We wszystkich tych przypadkach

programi�ci mog (i powinni) unika� problemu, przepuszczajc

wszystkie adresy URL przez wymienione funkcje przed umieszczeniem

ich w kodzie strony.

Dziwnym zbiegiem okoliczno�ci jest to, �e poprawne kodowanie z u�yciem

XHTML-a zach�ca do pisania kodu w sposób strukturalny i zniech�ca do

tworzenia prezentacyjnych „sztuczek”. W XHTML 1.0 Transitional takie

sztuczki s� uwa�ane za przestarza�e, co oznacza, �e mo�esz je stosowa,

je�li musisz, ale jeste� zachcany do osi�gania tego samego rezultatu w inny

sposób — na przyk�ad przy u�yciu CSS. W XHTML 1.0 i 1.1 Strict

sztuczki prezentacyjnie s� oficjalnie zabronione. Ich zastosowanie sprawi, �e

strona przepuszczona przez us�ug� weryfikuj�c� poprawno� kodu W3C

(nazywan� walidatorem) nie przejdzie testu (patrz rysunek 5.7). (Je�eli nie

pozna�e� jeszcze tego narz�dzia, zrobisz to z pewno�ci�, kiedy nauczysz

si� projektowa i budowa strony z u�yciem standardów. Patrz ramka

„Sprawd� to!”).

Rysunek 5.7.Projektancii programi�ci korzystaj�z darmowej us�ugisprawdzaj�cejpoprawno�� koduoferowanej przez W3C(validator.w3c.org),aby si� upewni�,czy ich stronys� zgodneze standardami

Niezale�nie od tego, czy wybierzesz XHTML, czy Strict lub Transitional,

do�wiadczysz ucz�cego pokory odkrycia, �e „ca�a Twoja wiedza jest z�a”:

�amanie wierszy (br) stosowane do symulowania listy, nag�ówki wymuszaj�ce

128 Rozdzia� 5. > Nowoczesny uk�ad znaczników

Sprawd to!

Us�uga weryfikowania poprawno�ci stron (validator.w3.org) testuje

strony zbudowane przy u�yciu XHTML-a 4.01, XHTML-a 1.0 oraz

XHTML-a 1.1 i ocenia ich zgodno� ze specyfikacj� j�zyka. Us�uga

weryfikuj�ca CSS (jigsaw.w3.org/css-validator) robi to samo w odnie-

sieniu do arkuszy stylów. Grupa zajmuj�ca si� projektowaniem sieci

w htmlhelp.com utrzymuje równie niezawodn� us�ug� do sprawdzania

uk�adu znaczników (www.htmlhelp.com/tools/validator). Wszystkie trzy

us�ugi oferowane s� ca�kowicie za darmo.

Rada: HTML-owi maniacy — je�li zajmujecie si� ju� HTML-em 5,

pami�tajcie, �e nie wszystkie walidatory b�d� prawid�owo sprawdza

wasze strony. Jedn� z us�ug, która to potrafi, jest walidator HTML 5

dost�pny na stronie validator.nu (patrz rysunek 5.8). Tak�e Validation

Service W3C jest ju� w stanie sprawdza poprawno� kodu HTML 5.

Cieszcie si� i radujcie!

Rysunek 5.8.By� mo�e ta strona niejest szczególnie pi�kna,jednak validator.nujest u�ytecznymnarz�dziem, któresprawdza poprawno��kodu XML, HTML 5, itd.(www.validator.nu)

okre�lony sposób wy�wietlania, przezroczyste obrazki GIF do tworzenia

bia�ej przestrzeni... B�dziesz zaszokowany faktem, �e kiedy� stosowa�e� tego

typu sztuczki.

Zamiast korzysta z prezentacyjnych sztuczek, zaczniesz my�le struktu-

ralnie. Pozwolisz kodowi znaczników, by pe�ni� swoj� rol�. Nawet w uk�a-

dach hybrydowych, stosuj�cych tabele oraz inne elementy do prezentacji,

Ukryty schemat kiepskiego kodu 129

nauczysz si� robi wi�cej przy u�yciu CSS — na przyk�ad usuwa z�o�one

i nadmiarowe znaczniki koloru oraz atrybuty komórek tabel i zast�powa

je jedn� lub dwoma regu�ami w globalnym arkuszu stylów. W miar� pozna-

wania nowego j�zyka kodowania b�dziesz zapomina stopniowo o z�ych przy-

zwyczajeniach. Przejd�my zatem do rzeczy.

Przeformu�owanie czego?Powo�amy si� na W3C i zacytujemy: „XHTML (www.w3.org/TR/xhtml1)

jest przeformu�owaniem HTML-a w XML”. Mówi�c pro�ciej i mniej pre-

cyzyjne, XHTML jest j�zykiem znaczników bazuj�cym na XML-u i dzia-

�aj�cym oraz wygl�daj�cym jak HTML z kilkoma ma�ymi, lecz znacz�-

cymi ró�nicami. W przegl�darkach oraz innych klientach u�ytkownika

XHTML 1.0 dzia�a dok�adnie tak samo jak HTML, chocia� niektóre nowo-

czesne przegl�darki mog� traktowa ten j�zyk nieco odmiennie — o czym

piszemy w nast�pnym rozdziale. Z punktu widzenia projektantów i pro-

gramistów, pisanie w XHTML-u 1.0 przypomina do z�udzenia pisanie

w j�zyku HTML — tyle �e z troch� bardziej �cis�ymi regu�ami i jednym

lub dwoma nowymi elementami, o których za chwil�.

W rozdziale 4. opisali�my XML (ang. eXtensible Markup Language) jako

„superj�zyk”, z którego programi�ci mog� wywodzi inne, dostosowane do

w�asnych potrzeb j�zyki znaczników. XHTML (ang. eXtensible Hypertext

Markup Language) jest jednym z takich j�zyków. XHTML 1.0 jest pierwsz�

i najbardziej zgodn� wstecz wersj� XHTML-a, st�d te� najlepiej nadaje

si� do nauki i sprawia najmniej k�opotu starszym przegl�darkom.

Inne aplikacje i protoko�y bazuj�ce na XML-u liczone s� w setkach, a ich

popularno� bazuje mi�dzy innymi na zdolno�ci do wymiany i transformo-

wania danych przy minimalnym koszcie oraz zaledwie kilku (o ile w ogóle)

k�opotach ze zgodno�ci� — cnotach, jakie dziel� z XHTML-em. Po�ród

tych protoko�ów wymieni mo�na Rich Site Summary (blogs.law.harverd.

edu/tech/rss), Scalable Vector Graphics (www.w3.org/TR/SVG), Synchro-

nized Multimedia Integration Language (www.w3.org/TR/REC-smil)

i Resource Description Framework (www.w3.org/RDF). (Wi�cej informacji

o tych j�zykach mo�na znale� w rozdziale 4.).

Ka�dy z tych protoko�ów pe�ni rol� w rozwijaj�cej si� sieci, ale �aden z nich

nie jest tak istotny dla projektantów i programistów jak XHTML — i �aden

z nich nie jest te� równie prosty.

Po co w ogóle „przeformu�owywa” HTML na XML lub cokolwiek innego?

Z jednego powodu — XML jest j�zykiem spójnym, czego nie mo�na

130 Rozdzia� 5. > Nowoczesny uk�ad znaczników

powiedzie o HTML-u. Je�eli w XML-u otworzysz znacznik, musisz go

zamkn�. W HTML-u niektóre znaczniki nigdy nie s� zamykane, inne zaw-

sze, jeszcze inne zale�nie od woli programisty. Ta niekonsekwencja mo�e

spowodowa praktyczne problemy. Przyk�adowo niektóre przegl�darki mog�

odmówi wy�wietlania strony HTML, która pozostawia niedomkni�te komórki

tabeli, mimo �e specyfikacja HTML pozwala na tak� praktyk�. XHTML

zmusza do zamykania wszystkich elementów, zatem unika si� problemów

z przegl�darkami i oszcz�dza czas niezb�dny na testowanie oraz usuwanie

usterek. Nie trzeba równie� pami�ta, które znaczniki nale�y zamyka,

a które nie.

Co wa�niejsze, je�eli napiszesz stron� w j�zyku bazuj�cym na XML-u, b�dzie

ona lepiej wspó�dzia�a�a z innymi j�zykami, aplikacjami i protoko�ami opar-

tymi na XML-u.

Skoro XML jest tak wa�ny, czemu nie napisa j�zyka opartego na XML-u,

który b�dzie dzia�a� dok�adnie tak jak HTML? XML jest pot��ny i wszech-

obecny, nie mo�na jednak zaserwowa przegl�darce danych w surowej

postaci XML-a i oczekiwa, �e zrobi z nimi co� inteligentnego, na przyk�ad

wy�wietli �adnie sformatowan� stron� internetow�. Niestety, starsze prze-

gl�darki nie poradz� sobie z wy�wietleniem strony napisanej w XML-u.

W istocie zatem XHTML jest technologi� po�redni�, ��cz�c� pot�g� XML-a

(w pewnej cz��ci) z prostot� j�zyka HTML (w wi�kszo�ci).

PodsumowanieMówi�c ogólnie, XHTML to XML dzia�aj�cy jak HTML w starych i nowych

przegl�darkach oraz w wi�kszo�ci urz�dze� internetowych, poczynaj�c od

antycznych, takich jak Newton (produkowany w latach 90. ubieg�ego wieku),

poprzez urz�dzenia Palm, a� po iPhony. Praktyczna, przeno�na i wydajna

technologia.

XHTML jest równie prosty jak HTML — troch� prostszy dla pocz�tku-

j�cych, którzy nie posiadaj� z�ych przyzwyczaje� i by mo�e ciut trudniej-

szy dla weteranów zajmuj�cych si� projektowaniem od samego pocz�tku

lat 90. ubieg�ego stulecia.

XHTML jest aktualnym standardem (zast�puj�cym HTML 4), który ma

na celu przywrócenie rygorystycznej, logicznej struktury i zawarto�ci doku-

mentu zapewniaj�cej lepsze wspó�dzia�anie z innymi standardami siecio-

wymi, takimi jak CSS i DOM, oraz dobr� wspó�prac� z innymi istniej�cymi

i przysz�ymi j�zykami, aplikacjami oraz protoko�ami bazuj�cymi na XML-u.

Ukryty schemat kiepskiego kodu 131

Lista wszystkich korzy�ci p�yn�cych ze stosowania XHTML-a zosta�a

zamieszczona na ko�cu rozdzia�u.

WERSJA STRICT CZY TRANSITIONAL?

W pierwszych dwóch wydaniach tej ksi�ki zalecali�my stosowanie wersji

XHTML 1.0 Transitional jako najbardziej wyrozumia�ej spo�ród wszystkich

wersji tego jzyka, najbardziej zbli�onej do tradycyjnych metod tworzenia

stron oraz naj�atwiejszej do poznania i zastosowania. Je�li starasz si oduczy�

starych nawyków lub chcesz uaktualni� istniejce witryny w �agodny i spokojny

sposób, XHTML 1.0 Trasitional bdzie najlepszym z mo�liwych wyborów.

Jednak z drugiej strony, aktualnie wikszo�� zwolenników przestrzegania

standardów preferuje tworzenie stron w bardziej rygorystycznej wersji

XHTML 1.0 Strict bd� te�, je�li s w stanie generowa� odpowiednie typy

MIME dla wszystkich przegldarek, z wyjtkiem Internet Explorera, w wersji

XHTML 1.1 Strict. Wybór wersji Strict jako domy�lnej jest cz�ciowo kwesti

mody — to sposób pokazania ca�emu �wiatu (albo przynajmniej tej jego cz�ci,

która zaprzta sobie g�ow ogldaniem kodu �ród�owego odwiedzanych stron),

�e nie uznajemy kompromisów, je�li chodzi o stosowanie standardów.

Zasadniczo to nic z�ego.

XHTML 2 — nie dla ka�degoW momencie wydania pierwszej edycji tej ksi��ki wersja robocza specyfi-

kacji XHTML 2.0 zosta�a przekazana do konsultacji spo�eczno�ci projek-

tantów i programistów. Kiedy zaczynali�my prac� nad trzecim wydaniem

sze� lat pó�niej XHTML 2.0 jest nadal wersj� robocz� (www.w3.org/

TR/xhtml2) i nie zosta� zaktualizowany od trzech lat. Mog�oby to �wiad-

czy o tym, �e �wiat nie dopomina si� XHTML-a 2. I faktycznie, cho w jego

specyfikacji mo�na znale� kilka fascynuj�cych rozwi�za�, jednak nigdy

nie znalaz� wielkiego poklasku w spo�eczno�ci programistów. 2 lipca 2009

roku W3C skróci�o m�ki XHTML-a 2 (http://www.w3.org/News/2009#

item119), zamykaj�c prace nad nim, a spo�eczno� osób zainteresowanych

standardami oszala�a z w�ciek�o�ci (http://www.zeldman.com/2009/07/07/

in-defense-of-web-developers/).

G�ównym celem XHTML 2.0 by�o zbli�enie si� do semantycznego idea�u,

nawet za cen� wyrzucenia na �mietnik dotychczasowych metod progra-

mowania. Pocz�tkowa wersja by�a faktycznie bardzo purystyczna. Z za�o�e-

nia XHTML 2.0 nie by� zgodny wstecz z HTML lub XHTML 1.0. Porzu-

ca� znajome konwencje, takie jak element img (zast�powany przez element

132 Rozdzia� 5. > Nowoczesny uk�ad znaczników

object), znacznik br (zast�powany przez nowy element line, zamieniony

pó�niej na l) oraz wiekowy znacznik zakotwiczenia; zamiast niego otrzymu-

jemy do dyspozycji technologi� zwan� hlink.

Programi�ci tak bardzo narzekali na t� ostatni� zmian�, �e w pó�niejszej

wersji element a zosta� przywrócony. Ale w skorygowanym XHTML2 ka�dy

element b�d� grupa elementów strony mog�y posiada atrybut href. Nale�y

zwróci uwag�, �e wielu programistom niezwykle spodoba�a si� mo�liwo�

dodania atrybutu href do ka�dego elementu strony; rozwi�zanie to zosta�o

pó�niej wykorzystane w HTML-u 5, nast�pcy XHTML-a 1.0, którym obec-

nie pasjonuje si� sporo dzieciaków. Problem polega jednak na tym, �e aktu-

alnie wi�kszo� przegl�darek obs�uguje atrybuty href umieszczane jedynie

w elementach a.

Je�li chodzi o img, to w ko�cu uda�o mu si� wróci do XHTML 2 (http://www.

w3.org/TR/xhtml2/mod-image.html#sec_20.1), zosta� jednak uznany za

przestarza�y. Wci�� zamiast niego powinni�my u�ywa object, chocia� od

dawna wiadomo, �e object nie dzia�a w Internet Explorerze z wyj�tkiem

wersji IE8. (Mo�na to tak�e wyrazi w bardziej uprzejmy sposób, mianowi-

cie tak: to fajnie, �e IE8 w ko�cu obs�uguje element object).

Niektórzy projektanci przywitali proponowan� specyfikacj� XHTML 2

okrzykami rado�ci. Inni narzekali, �e wydaje si� zbytnio buja w ob�okach,

a za ma�o skupia si� na faktycznych problemach tworzenia stron. (No dobrze,

to chyba nam si� wyrwa�o). Wi�kszo� projektantów nie przywi�zywa�a do

niej wcale uwagi. Sze� lat pó�niej wszyscy, poza garstk� nowatorów, nadal

j� ignoruj�. Zamiast obs�ugiwa i rozwija dwa standardy „j�zyków znacz-

nikowych przysz�o�ci”, spo�ród których tylko jeden interesowa� spo�ecz-

no� twórców stron WWW, W3C podj��o ca�kiem sensown� decyzj�, by

zako�czy prace nad XHTML 2.0.

By mo�e XHTML 2.0 jest ju� martwym pomys�em, jednak nie musimy

si� tym martwi. adna z przegl�darek nie przestanie bowiem obs�ugiwa

XHTML-a 1. Podobnie, �adna z przegl�darek nie przestanie obs�ugiwa

HTML-a 4. Witryny napisane poprawnie i zgodnie ze specyfikacj� HTML

4.01 b�d� prawid�owo wy�wietlane jeszcze przez d�ugie lata. To samo dotyczy

witryn napisanych prawid�owo i zgodnie ze specyfikacj� XHTML 1.

Jednak po co u�ywa XHTML-a, skoro w przysz�o�ci j�zykiem do tworzenia

stron WWW ma by HTML 5? To ca�kiem zasadne pytanie, które twórcy

stron u�ywaj�cy HTML-a od ponad dekady niejednokrotnie sobie zada-

wali. Gdyby XHTML 5 mia� si� pojawi niebawem, a wszystkie przysz�e

wersje przegl�darek mia�y obs�ugiwa wszystkie jego nowo�ci (zaczynaj�c

5 najwa�niejszych powodów, dla których warto wybra� HTML 133

do elementów strukturalnych, takich jak footer, a ko�cz�c na atrybutach

href dodawanych do dowolnych elementów strony), to faktycznie zawracanie

g�owy nauk� XHTML-a by�oby ma�o sensowne. Jedynym argumentem prze-

mawiaj�cym na korzy� XHTML-a mog�aby by nieco wi�ksza zgodno�

witryny z aplikacjami XML. Jednak prace nad standardem HTML 5 s� jesz-

cze dalekie od zako�czenia, a Internet Explorer (i w mniejszym stopniu tak�e

inne przegl�darki) nie obs�uguje wi�kszo�ci nowych elementów tego j�zyka.

A zatem obecnie wybór pomi�dzy j�zykami HTML i XHTML mo�na spro-

wadzi do listy pi�ciu podstawowych zagadnie�, przedstawionych poni�ej.

5 najwa�niejszych powodów,dla których warto wybra� HTML

1. HTML dzia�a prawid�owo we wszystkich przegl�darkach, a wszystkie

przegl�darki (w tym IE) prawid�owo obs�uguj� MIME HTML.

2. Cho najprawdopodobniej prace nad HTML 5 nie zostan� jeszcze

zako�czone przez kilka najbli�szych lat, jednak najnowsze

przegl�darki obs�uguj� ju� niektóre jego elementy. Stwarza

to doskona�� okazj�, by ju� teraz rozpocz� nauk� tej nowej,

u�ytecznej wersji j�zyka.

3. HTML traktuje b��dy bardziej wyrozumiale ni� XHTML.

4. HTML nie wymaga tak �cis�ego zamykania elementów jak XHTML,

a to z kolei mo�e nieznacznie zmniejszy zu�ywan� przepustowo�.

(A zu�ycie przepustowo�ci przez DOCTYPEE HTML 5 jest najmniejsze

z mo�liwych),

5. HTML 5 jest pierwsz� wersj� tego j�zyka, zaprojektowan� pod

k�tem bogatych aplikacji internetowych, dlatego te� wielkie firmy

internetowe, takie jak Google, bez w�tpienia b�d� nim bardzo

zainteresowane. Je�li zatem zajmujesz si� aplikacjami internetowymi

i odpowiada Ci kierunek rozwoju HTML-a 5, to teraz jest doskona�y

moment, by zacz� go poznawa i stosowa.

Dodatkowym plusem jest fakt, �e w �adnej z nowoczesnych przegl�darek

obecno� DOCTYPE HTML nie powoduje ju� automatycznego przechodzenia

do trybu „dziwactw”. Cho nie jest to �adn� zalet� w porównaniu ze stoso-

waniem XHTML-a, jednak u�ycie HTML-a nie pogarsza ju� sytuacji pro-

gramistów i nie zwi�ksza ryzyka przej�cia przegl�darki do niebezpiecznego

trybu „dziwactw”. W dalszej cz��ci ksi��ki, w rozdziale 7., opiszemy pod-

stawowe cele j�zyka HTML 5, jego ró�nice w stosunku do XHTML-a oraz

dok�adniej przedstawimy jego elementy, regu�y i sk�adni�.

134 Rozdzia� 5. > Nowoczesny uk�ad znaczników

5 najwa�niejszych powodów,dla których warto wybra� XHTML 1

1. XHTML jest aktualnym standardem znaczników, zast�puj�cym

HTML 4.

2. XHTML jest zaprojektowany do wspó�pracy z innymi j�zykami

skryptowymi, aplikacjami i protoko�ami bazuj�cymi na XML.

HTML nie posiada takiej mo�liwo�ci.

3. XHTML jest bardziej spójny ni� HTML, zatem mniej sk�onny

do stwarzania problemów zwi�zanych z funkcjonowaniem

i wy�wietlaniem tre�ci.

4. Tworzenie w j�zyku XHTML pozwala na wyzbycie si�

przyzwyczajenia do pisania prezentacyjnego kodu znaczników,

a to z kolei mo�e pomóc w unikni�ciu problemów z dost�pno�ci�

i niezgodno�ci� przy wy�wietlaniu stron w przegl�darkach ró�nych

producentów. (Je�eli piszesz strukturalny kod XHTML i umieszczasz

wszystkie lub prawie wszystkie elementy prezentacji w CSS, czyli

tam, gdzie powinny by, nie b�dziesz musia� d�u�ej martwi si�

o ró�nice pomi�dzy przegl�darkami Firefox i Internet Explorer,

takie jak puste komórki tabel, do których zastosowano atrybut

szeroko�ci).

5. Podobnie jak wiczenia z metronomem sprawi�, �e b�dziesz lepszym

muzykiem, tak znaczenie, jakie w XHTML-u jest przyk�adane

do prawid�owego formatowania kodu i przestrzegania regu�, stanowi

doskona�� platform edukacji spo�ecznej dla wszystkich projektantów

i programistów, którzy przez d�ugie lata nawykli do tworzenia kodu

HTML pozbawionego semantycznego sensu. Je�li nawet za dwa

lub trzy lata wrócisz do HTML-a 5, to dzi�ki poznaniu XHTML

b�dziesz tworzy bardziej przejrzysty i lepszy kod — nauczysz si�

bowiem przestrzega semantyki wymuszanej przez �cis�e

i rygorystycznie przestrzegane zasady.

Podstawowy powód,dla którego nie warto wybiera� XHTML-a

1. Nie znasz zasad XHTML-a.

Na szcz��cie, temu punktowi mo�emy zaradzi — patrz rozdzia� 6.