Projektowanie serwisów
WWW. Standardy sieciowe.
Wydanie III

Autorzy:

Jeffrey Zeldman

, Ethan Marcotte

T³umaczenie: Piotr Rajca
ISBN: 978-83-246-2658-8
Tytu³ 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¹ internet
w dynamiczn¹ platformê do tworzenia solidnych, dostêpnych aplikacji oraz piêknych
i ³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, bo
w 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 treci

Wstp 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 wanych definicji ............................................................................... 28

Jeden rozmiar nie bdzie dobry dla wszystkich ............................................ 30

Witamy wród zwycizców ........................................................................... 31

1. 99,9% witryn wci jest przestarzaych ...................................35

Nowoczesne przegldarki i standardy sieciowe ............................................ 36

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

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

Mylenie wsteczne ....................................................................................... 40

Zy kod: pierwsza siatka za darmo ........................................................ 41

W duszej perspektywie czasu rozgazianie kodu

moe by niebezpieczne dla witryny ............................................................. 43

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

Zgodno wstecz jest kamstwem ................................................................ 47

Blokowanie uytkowników nie wpywa dobrze na interesy ..................... 49

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

2. Projektowanie i budowanie z uyciem standardów .....................55

Pokonywanie trudnoci ............................................................................... 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

P r o j e k t o w a n i e s e r w i s ó w W W W . S t a n d a r d y s i e c i o w e

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

Projekt standardów sieciowych: przenono 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

Oszczdno czasu i kosztów, wzrost zysków ......................................... 78

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

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

4. Przyszo standardów sieciowych .........................................91

Wyszukiwanie, syndykacja, blogi, podcasty i dugi ogon

(oraz inne powody zwycistwa standardów sieciowych) ................................ 92

Uniwersalny jzyk (XML) ..................................................................... 93

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

Zota ya innowacji ............................................................................... 98

Przyszo standardów ........................................................................ 108

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

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

Narzdzia do edycji i publikacji ........................................................... 114

Cz II

5. Nowoczesny ukad znaczników ........................................... 119

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

Przeformuowanie czego? ..................................................................... 129

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

XHTML 2 — nie dla kadego ............................................................. 131

5 najwaniejszych powodów, dla których warto wybra HTML ................. 133

5 najwaniejszych 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 maymi literami ............................................ 144

Wartoci wszystkich atrybutów umieszczaj w cudzysowach ................ 146

Przypisuj wartoci wszystkim atrybutom ............................................ 148

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

Nie umieszczaj podwójnych mylników w komentarzach ..................... 150

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

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

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

S p i s t r e  c i

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 wicej ............................................................................... 175

8. Struktura i semantyka: gwarancja zwartych i trwaych stron ........177

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

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

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

Twórz tre uatwiajc wyszukiwanie i stosowanie .................................. 183

Semantyczny kod i wielokrotne uycie ................................................. 184

Powszechne bdy w nowoczesnym kodzie ............................................ 187

Znaczniki div s w porzdku ............................................................... 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

Wstp do CSS ........................................................................................... 193

Korzyci z CSS .......................................................................................... 194

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

Selektory, deklaracje, waciwoci i wartoci ....................................... 195

Wartoci ogólne i alternatywne ............................................................ 198

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

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

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

Style zewntrzne, osadzone i bezporednie .......................................... 206

Metoda „najlepszego moliwego scenariusza” ............................................ 210

10. Ukady CSS: kod, ramki, elementy pywajce — o rany! ..............213

Dao przepywu strony ................................................................................ 214

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

Jak dziaa model ramkowy? ................................................................. 216

Ukad stosowany ....................................................................................... 219

Skromne pocztki ................................................................................ 220

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

Modyfikacja ukadu ................................................................................... 228

Analiza zawartoci — po raz wtóry ..................................................... 229

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

8

P r o j e k t o w a n i e s e r w i s ó w W W W . S t a n d a r d y s i e c i o w e

Modyfikacje elementów pywajcych .................................................... 236

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

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

11. Praca z przegldark. Cz I:

przeczanie z typu dokumentu na tryb standardowy ................ 243

Saga o przeczaniu przez deklaracj typu dokumentu .............................. 244

Przecznik do wczania i wyczania standardów .............................. 244

Podstawy przeczania przy uyciu deklaracji typu dokumentu ................. 246

Jak dokadne jest przeczanie? ........................................................... 247

Standardy sieciowe i przegldarka IE8 ............................................... 247

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

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

Pena lista kompletnych deklaracji typu dokumentu XHTML ............ 253

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

12. Praca z przegldark. Cz II:

bdy, sposoby i blask CSS 3 .............................................. 257

Bdy CSS w powtórce na zwolnionych obrotach ....................................... 258

Bd podwojonego marginesu w elementach pywajcych .................... 263

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

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

Wiedza to jedynie poowa sukcesu ....................................................... 268

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

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

Rezygnujemy z prostoktów ................................................................ 280

Programici, miejcie si na bacznoci! ................................................. 281

Przemylmy, czym jest „wsparcie”? ..................................................... 285

Flash i QuickTime: obiekty podania? ..................................................... 288

Obiekty osadzane: opowie o prónoci i zemcie ................................ 288

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

Dwie pieczenie na jednym ogniu: osadzanie obiektów multimedialnych

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

yka dziegciu w beczce miodu: object nie dziaa ................................ 291

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

wiat, w którym omijanie bdów jest codziennoci .................................. 292

13. Praca z przegldark. Cz III: typografia ............................. 295

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

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

Horrory starej szkoy ........................................................................... 302

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

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

Upojenie wszycieli .............................................................................. 308

Przygody z wielkoci czcionek .................................................................. 310

Powikszenie: demokracja bezpieczna dla pikseli ................................. 313

Jednostki em: rado i pacz ................................................................ 316

Metoda symbolicznych wartoci rozmiarów czcionek ........................... 317

S p i s t r e  c i

9

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

Regua @font-face: prawdziwe czcionki na stronach WWW ................ 319

sIFR — dostpne podmienienie czcionek ............................................ 322

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

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

14. Dostpno: to, co w standardach najwaniejsze .....................329

Pi porad dotyczcych tworzenia dostpnych witryn ................................ 330

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

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

3. Zapewnij moliwo dostpu przy uyciu klawiatury ....................... 331

4. Udostpniaj rozwizania alternatywne ............................................ 332

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

Dostpno wedug podrczników .............................................................. 333

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

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

Dostpno nie ogranicza si jedynie do niedowidzcych ..................... 337

Wyjaniamy znaczenie paragrafu 508 ................................................. 339

Obalamy mity dostpnoci ......................................................................... 340

Uatwienia dostpu element po elemencie .................................................. 345

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

Sprawdzone narzdzia ......................................................................... 354

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

Planowanie dostpu: jak na tym skorzystasz ....................................... 356

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

DOM wedug podrczników ....................................................................... 360

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

Standardowy sposób na to, by strony WWW

zachowyway si jak aplikacje .............................................................. 362

Zatem gdzie to dziaa? ......................................................................... 364

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

Jak to dziaa? ...................................................................................... 365

Sprawdzanie obsugi ............................................................................ 371

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

Przeczniki stylów: uatwiaj dostp, oferuj wybór ........................... 373

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

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

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

Wychodzimy z przeszoci .......................................................................... 382

Projektowanie wychodzce od treci .......................................................... 383

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

Czcionki, wprowadzenia i wpuszczone inicjay ..................................... 388

Cigle ta sama piewka ....................................................................... 394

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

Gowa do góry ..................................................................................... 400

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

10

P r o j e k t o w a n i e s e r w i s ó w W W W . S t a n d a r d y s i e c i o w e

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

Zestawienie zawartoci .............................................................................. 407

Od spisu zawartoci do strategii .......................................................... 412

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

Od nawiasów ktowych do klamrowych ..................................................... 417

Metody — czyste szalestwo ............................................................... 422

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

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

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

Standardy na kad por roku ................................................................... 432

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

U k r y t y s c h e m a t k i e p s k i e g o k o d u

119

ROZDZIA PI TY

Nowoczesny

ukad znaczników

z pierwsza nakrelia w skrócie problemy biznesowe i produk-

cyjne bdce wynikiem stosowania starych metod projektowa-

nia sieci, naszkicowaa korzyci pynce ze stosowania standardów oraz

odmalowaa radosny obraz napdzanego standardami rozwoju sieci.

W pozostaej czci ksiki przejdziemy „od ogóu do szczegóu”.

Najlepszym sposobem, by zacz , bdzie powicenie kilku sekund

na przeanalizowanie podstawowych zagadnie zwizanych z tworze-

niem kodu stron, takich jak wybór wersji jzyka, jak naley 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

prawidowo semantycznie).

Wielu projektantom i programistom myl o ponownym analizowaniu

kodu nie przypadnie do gustu. Z pewnoci kady, kto spdzi na pro-

jektowaniu witryn wicej ni kilka tygodni, wie doskonale, o co chodzi

w starym, dobrym HTML-u. Czy nie powinnimy powica naszego

ograniczonego wolnego czasu, uczc si nowszych, uyteczniejszych

jzyków? Czy na przykad nie opaca si bardziej studiowa techno-

logii dziaajcych po stronie serwera, takich jak PHP i jej podobne.

Odpowied brzmi: „Tak i nie”. Technologie dziaajce po stronie

serwera maj istotne znaczenie przy tworzeniu dynamicznych wi-

tryn odpowiadajcych na zapytania uytkownika. Nawet tradycyjne

witryny informacyjne mog odnie korzyci przez umieszczenie ich

C

120

R o z d z i a  5 . > N o w o c z e s n y u k  a d z n a c z n i k ó w

treci w bazie danych i odwoywanie si do nich w miar potrzeby przy

uyciu PHP lub podobnych technologii. Niemal kada nowoczesna witryna

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

do standardów przedstawianych w tej ksice, jzyki skryptowe wykonywane

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

Raili, CakePHP, Dijango czy Symfony, umoliwiaj oddzielanie danych od

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

kich fragmentów treci w pozbawionych semantycznego znaczenia komór-

kach tabel HTML, tak jzyki, na przykad PHP, i systemy zarzdzania

relacyjnymi bazami danych (jak cho by MySQL) pozwalaj twórcom witryn

unikn wasnorcznego pisania kadej ze stron.

Co to takiego to PHP?

PHP (www.php.net) jest darmowym jzy-

kiem skryptowym ogólnego przeznaczenia,

który idealnie nadaje si do tworzenia

stron internetowych i moe by osadzany

wewntrz kodu HTML i XHTML. (Kod

PHP mona take umieszcza wewntrz

kodu HTML). Jego skadnia przypomina

jzyki, takie jak C, Java oraz Perl, i jest

wzgldnie atwa do przyswojenia. PHP

(skrót od Hypertext Preprocessor

1

) jest

bardzo funkcjonalny, ale swoj popular-

no zyska gównie dziki moliwoci

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 moe by uywany

zupenie za darmo, co stanowi jedno ze

róde jego ogromnej popularnoci. Innym

jest ogromny zestaw narzdzi do testo-

wania i profilowania

2

kodu. Niezaleni

projektanci i programici uwielbiaj ten

jzyk (bd uwielbiali, zanim nie poznali

jego modszego 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-

noci (nie wspominajc o braku opat)

due firmy, rzadko znane ze stosowania

otwartych standardów, pokochay PHP.

Przykadowo PHP napdza Yahoo.com

ju od 2002 roku (ostatnio jest przy tym

uywany otwarty szkielet PHP o nazwie

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

org]). Równie IBM wspar PHP sw

potg, gównie za porednictwem formy

Zend i szkieletu CakePHP (http://www.

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

3485806).

1

Mianem preprocesora okrela si program wstpnie analizujcy kod. Dla przykadu

w jzyku C preprocesor uruchamiany jest przed waciw kompilacj, aby dokona

odpowiednich podstawie w kodzie — przyp. tum.

2

Przez profilowanie naley rozumie badanie wydajnoci kodu (jako caoci lub

poszczególnych jego fragmentów) — przyp. tum.

U k r y t y s c h e m a t k i e p s k i e g o k o d u

121

Rysunek 5.1.
Projektant
i programista Shaun
Inman uy PHP,
MySQL, JavaScript
i CSS do stworzenia
Mint (havemint.com),
rozszerzalnego
narzdzia
do raportowania
potraficego
odpowiedzie,
kto odwiedza i tworzy
odnoniki do Twojej
witryny, z jakiej
przegldarki korzysta
i duo wicej

Rysunek 5.2.
Typowa instalacja Mint
(widoczna tutaj
pochodzi z witryny
konferencji
Event Apart)

122

R o z d z i a  5 . > N o w o c z e s n y u k  a d z n a c z n i k ó w

Co to takiego to PHP? — cig dalszy

PHP moe wspópracowa z oprogramo-

waniem serwerowym Microsoftu, ale naj-

czciej uywany jest w poczeniu 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 jzyk

PHP i serwer Apache, podobnie z reszt

jak niemal wszystkie dystrybucje Linuksa.

PHP nie wymaga budowania interfejsu

przy uyciu ukadu CSS i poprawnego

semantycznego kodu znaczników, ale tam,

gdzie trafiamy na oparte na standardach

strony sieciowe, bardzo czsto okazuje si,

e stoi za nimi PHP.

Jednak nawet dynamicznie wygenerowane strony stan si bezuyteczne,

jeeli bd niedostpne, niezgodne z wieloma przegldarkami i urzdzeniami

lub zamiecone niepotrzebnym kodem znaczników. Jeeli dynamiczna strona

nie wywietli si poprawnie w jakiej przegldarce lub jej zaadowanie

zajmie 60 sekund przez cze modemowe, w sytuacji gdy wystarczyoby

w zupenoci 10 sekund, technologie serwerowe na niewiele si zdadz Twoim

uytkownikom. Jeli dodatkowo uytkownicy i wyszukiwarki nie bd

w stanie znale na witrynie interesujcych ich informacji, gdy zostay

zagrzebane wewntrz semantycznie bezsensownego kodu, wszystkie wysiki

woone w utworzenie piknego projektu, napisanie witryny i zapewnienie

jej odpowiedniej obsugi ze strony mechanizmów dziaajcych po stronie

serwera bdzie mona porówna do genialnych muzyków wystpujcych przed

pust widowni.

Czym jest Rails?

Ruby on Rails (www.rubyonrails.org) jest

szkieletem do budowania aplikacji siecio-

wych dostpnym na licencji otwartego kodu,

zoptymalizowanym pod ktem szybkiego,

produktywnego, stabilnego programowania

(patrz rysunek 5.3). Czym jest Ruby?

Dobre pytanie. Ruby jest zorientowanym

obiektowo jzykiem programowania stwo-

rzonym przez Yukihiro Matsumoto w 1995

roku i rozpowszechnianym jako wolne

oprogramowanie na licencji open source.

czy w sobie skadni inspirowan jzy-

kami Perl i Ada z funkcjami obiektowymi

oraz posiada wspólne cechy z jzykami Lisp

i Python

Zatem czym jest Rails? Rails jest szkiele-

tem aplikacji dziaajcym w oparciu o mo-

del projektowy MVC (ang. model-view-

controller — model-widok-kontroler), napi-

sanym w jzyku Ruby przez Davida Heine-

meira Hanssona w lipcu 2004 roku. Rails

zosta wyodrbnionym z aplikacji Base-

camp firmy 37signals (patrz rysunek 5.4).

U k r y t y s c h e m a t k i e p s k i e g o k o d u

123

Rysunek 5.3.
Ruby on Rails
(www.rubyonrails.org)
dostpny w postaci
otwartych róde
szkielet
programistyczny.
Jego podstawowe
zasady to:
„Nie powtarzaj si”
oraz „Konwencja
ponad konfiguracj”

Rysunek 5.4.
Basecamp firmy
37signals
(basecamphq.com)
to nieustajce ródo
prezentów. Nie tylko
jest to wspaniaa
aplikacja do zarzdzania
projektami, ale równie
aplikacja, z której
wyodrbniono Ruby
on Rails

(Wersja 1.0 zostaa opublikowana w po-

staci otwartego kodu ródowego w grud-

niu 2005 roku). Programici rzucili si na

niego, poniewa jego przewodnie zasady

pozwalaj szybciej pisa lepszy kod.

124

R o z d z i a  5 . > N o w o c z e s n y u k  a d z n a c z n i k ó w

Czym jest Rails? — cig dalszy

W wikszoci rodowisk programistycznych

trzeba napisa tuzin wierszy kodu, aby

przenie zmienn na ekran (lub z ekranu).

I to samo powtarza si za kadym razem

podczas tworzenia nowego programu, dla

kadej najmniejszej rzeczy, jak robi ten

program. To tak, jakby trzeba byo pisa

edytor tekstu zawsze wtedy, kiedy chcemy

wysa oficjalny list. Ruby on Rails odrzuca

ten model. Wewntrz Rails programici

nie musz ju kodowa obsugi kadego

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 duo czciej ni osobno. Pocze-

nie XHTML-a, CSS, JavaScriptu i Ruby

on Rails zapewnia dziaanie wielu popu-

larnych aplikacji internetowych, takich jak

Twitter (patrz rysunek 5.5). Ruby on Rails

jest take z powodzeniem wykorzystywany

w tradycyjnych aplikacjach internetowych,

na przykad yellowpages.com (patrz rysu-

nek 5.6). Inne jzyki programowania —

wród nich PHP i Python — take udo-

stpniaj szkielety aplikacji MVC, podobne

do Ruby on Rails.

Rysunek 5.5.
Twitter
(www.twitter.com),
niezwykle popularna
aplikacja
do dystrybucji
mikrowiadomoci,
powstaa przy uyciu
CSS, XHTML 1.0
Strict oraz Ruby
on Rails

U k r y t y s c h e m a t k i e p s k i e g o k o d u

125

Rysunek 5.6.
Powicz troch palce,
przeszukujc
ksik telefoniczn
Yellow Pages (www.
yellowpages.com),
napisan w XHTML
1.0 Transitional
i korzystajc
z Ruby on Rails

Krótko mówic, nie mona rozdziela obu technologii. Technologie dziaajce

po stronie serwera w poczeniu z bazami danych umoliwiaj tworzenie

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

jest zawartoci, która dziaa najlepiej, kiedy posiada czyst i prost struktur.

I wanie w tym miejscu wikszo z nas zawodzi (ale zawodzi take wiele sys-

temów do zarzdzania zawartoci, na których polegamy).

Ukryty schemat kiepskiego kodu

W trakcie pierwszej dekady istnienia przemysu sieciowego projektowanie

przypominao prób nakarmienia mnóstwa wybrednych dzieci. Aby zbu-

dowa dziaajc stron, posusznie uczylimy si „diety” kadej przegl-

darki. Obecnie wszystkie przegldarki akceptuj to samo poywne jedzonko,

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

miao i wci dosypuje cukier do jajecznicy.

Ze jedzenie zatyka arterie, niszczy zby i zmniejsza ywotno tych, którzy

je spoywaj. Zy kod znaczników jest szkodliwy dla krótkoterminowych

potrzeb uytkowników oraz dugoterminowego zdrowia zawartoci stron.

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

nia przez popularne przegldarki zamieconego i bdnego kodu, o czym

mówiem w rozdziale 1.

Tu oraz w kolejnych rozdziaach bdziemy odkrywa na nowo zapomnian

natur czystego, semantycznego ukadu znaczników oraz nauczymy si

126

R o z d z i a  5 . > N o w o c z e s n y u k  a d z n a c z n i k ó w

Inne platformy, inne obszary

Dwie inne platformy skryptowe uywane 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/). Kada z nich ma swoje mocne strony oraz

zagorzae rodowisko uytkowników. Java Serve Pages (JSP), jeszcze

jedna technologia dynamiczna, jest powszechnie stosowana w ogrom-

nych systemach dla przedsibiorstw i zdecydowanie wykracza poza

zakres tej ksiki.

Systemy do publikacji utworzone w niektórych z wymienionych jzyków

mog przy braku uwagi popsu szablony stron przygotowane zgodnie

ze standardami. W jednej z aplikacji, w tworzenie której zaangaowana

bya moja agencja, ASP (przed .NET 2.0) generowa wszystko niepo-

prawnie, dopóki nie wczylimy do procesu HTML Tidy (tidy.sourceforge.

net). Przypominao to obrzucanie botem czystych ubra, a nastpnie

mycie ich wem, ale pozwalao uzyska poprawne strony z systemu,

który by nieprzyjazny dla dobrego, czystego kodu. Pomijajc ju

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

CMS moe si okaza wykorzystanie takich narzdzi jak TinyMCE

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

take jzyki „quasi-znacznikowe”, takie jak Textile Deana Allena

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

daringfireball.net/projects/markdown), które take mog pomóc osobom

nieobeznanym z HTML-em w tworzeniu prawidowego, zgodnego ze

standardami kodu.

myle strukturalnie, zamiast postrzega kod znaczników jako drugorzdne

narzdzie projektowania. Jednoczenie przyjrzymy si XHTML-owi 1.0 —

standardowemu jzykowi do projektowania witryn. Poznamy jego cele oraz

korzyci wynikajce z jego stosowania. Opracujemy strategi przejcia

z HTML-a na XHTML. Przyjrzymy si take nowemu graczowi na rynku —

jzykowi HTML 5 (www.w3.org/TR/html5).

SYNDROM B DNYCH ADRESÓW URL

J zyki skryptowe cz sto generuj dugie adresy URL zawieraj ce

niezakodowane znaki &, zastrzeone w HTML/XHTML. W HTML-u

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

&#8217;

, która oznacza poprawny typograficznie znak apostrofu w kodzie

Unicode. Mona to naprawi, stosuj c funkcj ColdFusion o nazwie

U k r y t y s c h e m a t k i e p s k i e g o k o d u

127

URLEncodeFormat()

. ASP posiada podobn funkcj o nazwie HTMLEncode.

Z kolei j zyk PHP udost pnia 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

programici mog (i powinni) unika problemu, przepuszczaj c

wszystkie adresy URL przez wymienione funkcje przed umieszczeniem

ich w kodzie strony.

Dziwnym zbiegiem okolicznoci jest to, e poprawne kodowanie z uyciem

XHTML-a zachca do pisania kodu w sposób strukturalny i zniechca do

tworzenia prezentacyjnych „sztuczek”. W XHTML 1.0 Transitional takie

sztuczki s uwaane za przestarzae, co oznacza, e moesz je stosowa ,

jeli musisz, ale jeste zach cany do osigania tego samego rezultatu w inny

sposób — na przykad przy uyciu CSS. W XHTML 1.0 i 1.1 Strict

sztuczki prezentacyjnie s oficjalnie zabronione. Ich zastosowanie sprawi, e

strona przepuszczona przez usug weryfikujc poprawno kodu W3C

(nazywan walidatorem) nie przejdzie testu (patrz rysunek 5.7). (Jeeli nie

poznae jeszcze tego narzdzia, zrobisz to z pewnoci, kiedy nauczysz

si projektowa i budowa strony z uyciem standardów. Patrz ramka

„Sprawd to!”).

Rysunek 5.7.
Projektanci
i programici korzystaj
z darmowej usugi
sprawdzajcej
poprawno kodu
oferowanej przez W3C
(validator.w3c.org),
aby si upewni,
czy ich strony
s zgodne
ze standardami

Niezalenie od tego, czy wybierzesz XHTML, czy Strict lub Transitional,

dowiadczysz uczcego pokory odkrycia, e „caa Twoja wiedza jest za”:

amanie wierszy (

br

) stosowane do symulowania listy, nagówki wymuszajce

128

R o z d z i a  5 . > N o w o c z e s n y u k  a d z n a c z n i k ó w

Sprawd to!

Usuga weryfikowania poprawnoci stron (validator.w3.org) testuje

strony zbudowane przy uyciu XHTML-a 4.01, XHTML-a 1.0 oraz

XHTML-a 1.1 i ocenia ich zgodno ze specyfikacj jzyka. Usuga

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

sieniu do arkuszy stylów. Grupa zajmujca si projektowaniem sieci

w htmlhelp.com utrzymuje równie niezawodn usug do sprawdzania

ukadu znaczników (www.htmlhelp.com/tools/validator). Wszystkie trzy

usugi oferowane s cakowicie za darmo.

Rada: HTML-owi maniacy — jeli zajmujecie si ju HTML-em 5,

pamitajcie, e nie wszystkie walidatory bd prawidowo sprawdza

wasze strony. Jedn z usug, która to potrafi, jest walidator HTML 5

dostpny na stronie validator.nu (patrz rysunek 5.8). Take Validation

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

Cieszcie si i radujcie!

Rysunek 5.8.
By moe ta strona nie
jest szczególnie pikna,
jednak validator.nu
jest uytecznym
narzdziem, które
sprawdza poprawno
kodu XML, HTML 5, itd.
(www.validator.nu)

okrelony sposób wywietlania, przezroczyste obrazki GIF do tworzenia

biaej przestrzeni... Bdziesz zaszokowany faktem, e kiedy stosowae tego

typu sztuczki.

Zamiast korzysta z prezentacyjnych sztuczek, zaczniesz myle struktu-

ralnie. Pozwolisz kodowi znaczników, by peni swoj rol. Nawet w uka-

dach hybrydowych, stosujcych tabele oraz inne elementy do prezentacji,

U k r y t y s c h e m a t k i e p s k i e g o k o d u

129

nauczysz si robi wicej przy uyciu CSS — na przykad usuwa zoone

i nadmiarowe znaczniki koloru oraz atrybuty komórek tabel i zastpowa

je jedn lub dwoma reguami w globalnym arkuszu stylów. W miar pozna-

wania nowego jzyka kodowania bdziesz zapomina stopniowo o zych przy-

zwyczajeniach. Przejdmy zatem do rzeczy.

Przeformuowanie czego?

Powoamy si na W3C i zacytujemy: „XHTML (www.w3.org/TR/xhtml1)

jest przeformuowaniem HTML-a w XML”. Mówic prociej i mniej pre-

cyzyjne, XHTML jest jzykiem znaczników bazujcym na XML-u i dzia-

ajcym oraz wygldajcym jak HTML z kilkoma maymi, lecz znacz-

cymi rónicami. W przegldarkach oraz innych klientach uytkownika

XHTML 1.0 dziaa dokadnie tak samo jak HTML, chocia niektóre nowo-

czesne przegldarki mog traktowa ten jzyk nieco odmiennie — o czym

piszemy w nastpnym rozdziale. Z punktu widzenia projektantów i pro-

gramistów, pisanie w XHTML-u 1.0 przypomina do zudzenia pisanie

w jzyku HTML — tyle e z troch bardziej cisymi reguami i jednym

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

W rozdziale 4. opisalimy XML (ang. eXtensible Markup Language) jako

„superjzyk”, z którego programici mog wywodzi inne, dostosowane do

wasnych potrzeb jzyki znaczników. XHTML (ang. eXtensible Hypertext

Markup Language) jest jednym z takich jzyków. XHTML 1.0 jest pierwsz

i najbardziej zgodn wstecz wersj XHTML-a, std te najlepiej nadaje

si do nauki i sprawia najmniej kopotu starszym przegldarkom.

Inne aplikacje i protokoy bazujce na XML-u liczone s w setkach, a ich

popularno bazuje midzy innymi na zdolnoci do wymiany i transformo-

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

kopotach ze zgodnoci — cnotach, jakie dziel z XHTML-em. Poród

tych protokoów wymieni mona 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). (Wicej informacji

o tych jzykach mona znale w rozdziale 4.).

Kady z tych protokoów peni rol w rozwijajcej 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 „przeformuowywa ” HTML na XML lub cokolwiek innego?

Z jednego powodu — XML jest jzykiem spójnym, czego nie mona

130

R o z d z i a  5 . > N o w o c z e s n y u k  a d z n a c z n i k ó w

powiedzie o HTML-u. Jeeli w XML-u otworzysz znacznik, musisz go

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

sze, jeszcze inne zalenie od woli programisty. Ta niekonsekwencja moe

spowodowa praktyczne problemy. Przykadowo niektóre przegldarki mog

odmówi wywietlania strony HTML, która pozostawia niedomknite komórki

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

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

z przegldarkami i oszczdza czas niezbdny na testowanie oraz usuwanie

usterek. Nie trzeba równie pamita , które znaczniki naley zamyka ,

a które nie.

Co waniejsze, jeeli napiszesz stron w jzyku bazujcym na XML-u, bdzie

ona lepiej wspódziaaa z innymi jzykami, aplikacjami i protokoami opar-

tymi na XML-u.

Skoro XML jest tak wany, czemu nie napisa jzyka opartego na XML-u,

który bdzie dziaa dokadnie tak jak HTML? XML jest potny i wszech-

obecny, nie mona jednak zaserwowa przegldarce danych w surowej

postaci XML-a i oczekiwa , e zrobi z nimi co inteligentnego, na przykad

wywietli adnie sformatowan stron internetow. Niestety, starsze prze-

gldarki nie poradz sobie z wywietleniem strony napisanej w XML-u.

W istocie zatem XHTML jest technologi poredni, czc potg XML-a

(w pewnej czci) z prostot jzyka HTML (w wikszoci).

Podsumowanie

Mówic ogólnie, XHTML to XML dziaajcy jak HTML w starych i nowych

przegldarkach oraz w wikszoci urzdze internetowych, poczynajc od

antycznych, takich jak Newton (produkowany w latach 90. ubiegego wieku),

poprzez urzdzenia Palm, a po iPhony. Praktyczna, przenona i wydajna

technologia.

XHTML jest równie prosty jak HTML — troch prostszy dla pocztku-

jcych, którzy nie posiadaj zych przyzwyczaje i by moe ciut trudniej-

szy dla weteranów zajmujcych si projektowaniem od samego pocztku

lat 90. ubiegego stulecia.

XHTML jest aktualnym standardem (zastpujcym HTML 4), który ma

na celu przywrócenie rygorystycznej, logicznej struktury i zawartoci doku-

mentu zapewniajcej lepsze wspódziaanie z innymi standardami siecio-

wymi, takimi jak CSS i DOM, oraz dobr wspóprac z innymi istniejcymi

i przyszymi jzykami, aplikacjami oraz protokoami bazujcymi na XML-u.

U k r y t y s c h e m a t k i e p s k i e g o k o d u

131

Lista wszystkich korzyci pyncych ze stosowania XHTML-a zostaa

zamieszczona na kocu rozdziau.

WERSJA STRICT CZY TRANSITIONAL?

W pierwszych dwóch wydaniach tej ksi ki zalecalimy stosowanie wersji

XHTML 1.0 Transitional jako najbardziej wyrozumiaej sporód wszystkich

wersji tego j zyka, najbardziej zblionej do tradycyjnych metod tworzenia

stron oraz najatwiejszej do poznania i zastosowania. Jeli starasz si oduczy

starych nawyków lub chcesz uaktualni istniej ce witryny w agodny i spokojny

sposób, XHTML 1.0 Trasitional b dzie najlepszym z moliwych wyborów.

Jednak z drugiej strony, aktualnie wi kszo zwolenników przestrzegania

standardów preferuje tworzenie stron w bardziej rygorystycznej wersji

XHTML 1.0 Strict b d te, jeli s w stanie generowa odpowiednie typy

MIME dla wszystkich przegl darek, z wyj tkiem Internet Explorera, w wersji

XHTML 1.1 Strict. Wybór wersji Strict jako domylnej jest cz ciowo kwesti

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

która zaprz ta sobie gow ogl daniem kodu ródowego odwiedzanych stron),

e nie uznajemy kompromisów, jeli chodzi o stosowanie standardów.

Zasadniczo to nic zego.

XHTML 2 — nie dla kadego

W momencie wydania pierwszej edycji tej ksiki wersja robocza specyfi-

kacji XHTML 2.0 zostaa przekazana do konsultacji spoecznoci projek-

tantów i programistów. Kiedy zaczynalimy 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. Mogoby to wiad-

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

specyfikacji mona znale kilka fascynujcych rozwiza, jednak nigdy

nie znalaz wielkiego poklasku w spoecznoci programistów. 2 lipca 2009

roku W3C skrócio mki XHTML-a 2 (http://www.w3.org/News/2009#

item119), zamykajc prace nad nim, a spoeczno osób zainteresowanych

standardami oszalaa z wciekoci (http://www.zeldman.com/2009/07/07/

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

Gównym celem XHTML 2.0 byo zblienie si do semantycznego ideau,

nawet za cen wyrzucenia na mietnik dotychczasowych metod progra-

mowania. Pocztkowa wersja bya faktycznie bardzo purystyczna. Z zaoe-

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

ca znajome konwencje, takie jak element

img

(zastpowany przez element

132

R o z d z i a  5 . > N o w o c z e s n y u k  a d z n a c z n i k ó w

object

), znacznik

br

(zastpowany przez nowy element

line

, zamieniony

póniej na

l

) oraz wiekowy znacznik zakotwiczenia; zamiast niego otrzymu-

jemy do dyspozycji technologi zwan

hlink

.

Programici tak bardzo narzekali na t ostatni zmian, e w póniejszej

wersji element

a

zosta przywrócony. Ale w skorygowanym XHTML2 kady

element bd grupa elementów strony mogy posiada atrybut

href

. Naley

zwróci uwag, e wielu programistom niezwykle spodobaa si moliwo

dodania atrybutu

href

do kadego elementu strony; rozwizanie to zostao

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

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

alnie wikszo przegldarek obsuguje atrybuty

href

umieszczane jedynie

w elementach

a

.

Jeli chodzi o

img

, to w kocu udao mu si wróci do XHTML 2 (http://www.

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

przestarzay. Wci zamiast niego powinnimy uywa

object

, chocia od

dawna wiadomo, e

object

nie dziaa w Internet Explorerze z wyjtkiem

wersji IE8. (Mona to take wyrazi w bardziej uprzejmy sposób, mianowi-

cie tak: to fajnie, e IE8 w kocu obsuguje element

object

).

Niektórzy projektanci przywitali proponowan specyfikacj XHTML 2

okrzykami radoci. Inni narzekali, e wydaje si zbytnio buja w obokach,

a za mao skupia si na faktycznych problemach tworzenia stron. (No dobrze,

to chyba nam si wyrwao). Wikszo projektantów nie przywizywaa do

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

j ignoruj. Zamiast obsugiwa i rozwija dwa standardy „jzyków znacz-

nikowych przyszoci”, sporód których tylko jeden interesowa spoecz-

no twórców stron WWW, W3C podjo cakiem sensown decyzj, by

zakoczy prace nad XHTML 2.0.

By moe XHTML 2.0 jest ju martwym pomysem, jednak nie musimy

si tym martwi . adna z przegldarek nie przestanie bowiem obsugiwa

XHTML-a 1. Podobnie, adna z przegldarek nie przestanie obsugiwa

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

4.01 bd prawidowo wywietlane jeszcze przez dugie lata. To samo dotyczy

witryn napisanych prawidowo i zgodnie ze specyfikacj XHTML 1.

Jednak po co uywa XHTML-a, skoro w przyszoci jzykiem do tworzenia

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

stron uywajcy HTML-a od ponad dekady niejednokrotnie sobie zada-

wali. Gdyby XHTML 5 mia si pojawi niebawem, a wszystkie przysze

wersje przegldarek miay obsugiwa wszystkie jego nowoci (zaczynajc

5 n a j w a  n i e js z y c h p o w o d ó w , d l a k t ó r y c h w a r t o w y b r a  H T M L

133

do elementów strukturalnych, takich jak

footer

, a koczc na atrybutach

href

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

gowy nauk XHTML-a byoby mao sensowne. Jedynym argumentem prze-

mawiajcym na korzy XHTML-a mogaby by nieco wiksza zgodno

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

cze dalekie od zakoczenia, a Internet Explorer (i w mniejszym stopniu take

inne przegldarki) nie obsuguje wikszoci nowych elementów tego jzyka.

A zatem obecnie wybór pomidzy jzykami HTML i XHTML mona spro-

wadzi do listy piciu podstawowych zagadnie, przedstawionych poniej.

5 najwaniejszych powodów,
dla których warto wybra HTML

1.

HTML dziaa prawidowo we wszystkich przegldarkach, a wszystkie

przegldarki (w tym IE) prawidowo obsuguj MIME HTML.

2.

Cho najprawdopodobniej prace nad HTML 5 nie zostan jeszcze

zakoczone przez kilka najbliszych lat, jednak najnowsze

przegldarki obsuguj ju niektóre jego elementy. Stwarza

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

uytecznej wersji jzyka.

3.

HTML traktuje bdy bardziej wyrozumiale ni XHTML.

4.

HTML nie wymaga tak cisego zamykania elementów jak XHTML,

a to z kolei moe nieznacznie zmniejszy zuywan przepustowo .

(A zuycie przepustowoci przez

DOCTYPEE

HTML 5 jest najmniejsze

z moliwych),

5.

HTML 5 jest pierwsz wersj tego jzyka, zaprojektowan pod

ktem bogatych aplikacji internetowych, dlatego te wielkie firmy

internetowe, takie jak Google, bez wtpienia bd nim bardzo

zainteresowane. Jeli zatem zajmujesz si aplikacjami internetowymi

i odpowiada Ci kierunek rozwoju HTML-a 5, to teraz jest doskonay

moment, by zacz go poznawa i stosowa .

Dodatkowym plusem jest fakt, e w adnej z nowoczesnych przegldarek

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 uycie HTML-a nie pogarsza ju sytuacji pro-

gramistów i nie zwiksza ryzyka przejcia przegldarki do niebezpiecznego

trybu „dziwactw”. W dalszej czci ksiki, w rozdziale 7., opiszemy pod-

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

dokadniej przedstawimy jego elementy, reguy i skadni.

134

R o z d z i a  5 . > N o w o c z e s n y u k  a d z n a c z n i k ó w

5 najwaniejszych powodów,
dla których warto wybra XHTML 1

1.

XHTML jest aktualnym standardem znaczników, zastpujcym

HTML 4.

2.

XHTML jest zaprojektowany do wspópracy z innymi jzykami

skryptowymi, aplikacjami i protokoami bazujcymi na XML.

HTML nie posiada takiej moliwoci.

3.

XHTML jest bardziej spójny ni HTML, zatem mniej skonny

do stwarzania problemów zwizanych z funkcjonowaniem

i wywietlaniem treci.

4.

Tworzenie w jzyku XHTML pozwala na wyzbycie si

przyzwyczajenia do pisania prezentacyjnego kodu znaczników,

a to z kolei moe pomóc w unikniciu problemów z dostpnoci

i niezgodnoci przy wywietlaniu stron w przegldarkach rónych

producentów. (Jeeli piszesz strukturalny kod XHTML i umieszczasz

wszystkie lub prawie wszystkie elementy prezentacji w CSS, czyli

tam, gdzie powinny by , nie bdziesz musia duej martwi si

o rónice pomidzy przegldarkami Firefox i Internet Explorer,

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

szerokoci).

5.

Podobnie jak wiczenia z metronomem sprawi, e bdziesz lepszym

muzykiem, tak znaczenie, jakie w XHTML-u jest przykadane

do prawidowego formatowania kodu i przestrzegania regu, stanowi

doskona platform edukacji spoecznej dla wszystkich projektantów

i programistów, którzy przez dugie lata nawykli do tworzenia kodu

HTML pozbawionego semantycznego sensu. Jeli nawet za dwa

lub trzy lata wrócisz do HTML-a 5, to dziki poznaniu XHTML

bdziesz tworzy bardziej przejrzysty i lepszy kod — nauczysz si

bowiem przestrzega semantyki wymuszanej przez cise

i rygorystycznie przestrzegane zasady.

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

1.

Nie znasz zasad XHTML-a.

Na szczcie, temu punktowi moemy zaradzi — patrz rozdzia 6.