Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00453 006814 13871922 na godz. na dobę w sumie
Tworzenie serwisów WWW. Standardy sieciowe - książka
Tworzenie serwisów WWW. Standardy sieciowe - książka
Autor: Liczba stron: 480
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2657-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Krajobraz nowoczesnych technologii WWW



John Allsopp, należący do panteonu moich bohaterów i będący jedną z najbardziej poważanych osób zajmujących się standardami WWW, napisał książkę, która stanowi doskonałe towarzystwo dla pozycji Projektowanie serwisów WWW. Standardy sieciowe. Znajdziesz tu podstawowe informacje, które będą Ci potrzebne, aby wdrożyć moją teorię w Twojej praktyce.
Jeffrey Zeldman, autor świetnie sprzedających się książek, projektant i ojciec chrzestny standardów WWW

John Allsopp sprawił, że w dziedzinie kodowania przeszedłem drogę od żółtodzioba do eksperta. Prezentowana przez niego wiedza umożliwia łatwe poszerzenie swoich umiejętności w zakresie koncepcji kodowania front-endu i przejęcie pełnej kontroli nad serwisami WWW, które tworzysz.
Jason Santa Maria, założyciel i dyrektor firmy Mighty LLC

Z pewnością znasz książkę Projektowanie serwisów WWW. Standardy sieciowe Jeffreya Zeldmana. Jeśli jesteś zagorzałym fanem tego kultowego podręcznika, niewątpliwie zainteresuje Cię również ten tom towarzyszący. Jego autor - instruktor oraz twórca licznych propozycji standardów sieciowych - oferuje wiedzę na temat architektury stojącej za profesjonalnymi witrynami WWW, wskazując przy tym sposoby stosowania standardów z czysto taktycznego i praktycznego punktu widzenia.


Książka ta jest przeznaczona dla żółtodziobów chcących nauczyć się budować strony WWW, a także dla doświadczonych twórców, szukających głębszej wiedzy, pomagającej wyjść poza metody i modele, które już dobrze znają. Zawiera mnóstwo sztuczek i chwytów, choć jej podstawowym celem jest pomoc w budowaniu systematycznej wiedzy na temat praktyki tworzenia serwisów WWW.


Poznaj:


Witryna WWW związana z oryginalnym wydaniem książki Tworzenie serwisów WWW. Standardy sieciowe (Developing with Web Standards) jest dostępna pod adresem devwws.com. Znajdziesz tam więcej informacji i dodatków, będziesz też mógł osobiście skontaktować się z autorem książki.


John Allsopp jest współzałożycielem witryny westciv.com oraz twórcą programu Style Master, cieszącego się wielką sławą narzędzia do tworzenia arkuszy stylów na różnych platformach. Jest również autorem wielu kursów, materiałów szkoleniowych, narzędzi, instrukcji oraz artykułów przeznaczonych dla projektantów czy twórców serwisów WWW, w tym bardzo ważnego artykułu The Dao of Web Design, opublikowanego na witrynie A List Apart. Pełni też funkcję współzarządcy nowej, działającej w ramach organizacji W3C, Incubator Group, której prace koncentrują się na kształceniu kolejnych pokoleń profesjonalnych twórców WWW (www.w3.org/2005/Incubator/owea).

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tworzenie serwisów WWW. Standardy sieciowe Autor: John Allsopp T³umaczenie: Dagmara Suma ISBN: 978-83-246-2657-1 Tytu³ orygina³u: Developing with Web Standards Format: 158×235, stron: 480 Krajobraz nowoczesnych technologii WWW (cid:129) Opanuj podstawy wiedzy o tworzeniu serwisów WWW (cid:129) Poznaj zaawansowane rozwi¹zania dla profesjonalnych projektantów (cid:129) Rozpracuj wspó³czesne metody i technologie, u¿ywane do tworzenia serwisów WWW Z pewnoœci¹ znasz ksi¹¿kê Projektowanie serwisów WWW. Standardy sieciowe Jeffreya Zeldmana. Jeœli jesteœ zagorza³ym fanem tego kultowego podrêcznika, niew¹tpliwie zainteresuje Ciê równie¿ ten tom towarzysz¹cy. Jego autor – instruktor oraz twórca licznych propozycji standardów sieciowych – oferuje wiedzê na temat architektury stoj¹cej za profesjonalnymi witrynami WWW, wskazuj¹c przy tym sposoby stosowania standardów z czysto taktycznego i praktycznego punktu widzenia. Ksi¹¿ka ta jest przeznaczona dla ¿ó³todziobów chc¹cych nauczyæ siê budowaæ strony WWW, a tak¿e dla doœwiadczonych twórców, szukaj¹cych g³êbszej wiedzy, pomagaj¹cej wyjœæ poza metody i modele, które ju¿ dobrze znaj¹. Zawiera mnóstwo sztuczek i chwytów, choæ jej podstawowym celem jest pomoc w budowaniu systematycznej wiedzy na temat praktyki tworzenia serwisów WWW. Poznaj: (cid:129) podstawowe technologie tworzenia front-endu – HTML i XHTML, CSS i DOM; (cid:129) zalecane metody tworzenia ³atwych w u¿yciu serwisów WWW; (cid:129) praktykê tworzenia serwisów WWW: semantyczny uk³ad znaczników, techniki radzenia sobie z niezgodnoœciami i b³êdami przegl¹darek, uk³ady stron oparte na CSS oraz tematykê platform CSS; (cid:129) technologie wchodz¹ce na rynek: prze³omowe narzêdzia, z których mo¿esz ju¿ zacz¹æ korzystaæ, w tym HTML5, CSS3, czcionki WWW, SVG i Canvas. Witryna WWW zwi¹zana z oryginalnym wydaniem ksi¹¿ki Tworzenie serwisów WWW. Standardy sieciowe (Developing with Web Standards) jest dostêpna pod adresem devwws.com. Znajdziesz tam wiêcej informacji i dodatków, bêdziesz te¿ móg³ osobiœcie skontaktowaæ siê z autorem ksi¹¿ki. John Allsopp jest wspó³za³o¿ycielem witryny westciv.com oraz twórc¹ programu Style Master, ciesz¹cego siê wielk¹ s³aw¹ narzêdzia do tworzenia arkuszy stylów na ró¿nych platformach. Jest równie¿ autorem wielu kursów, materia³ów szkoleniowych, narzêdzi, instrukcji oraz artyku³ów przeznaczonych dla projektantów czy twórców serwisów WWW, w tym bardzo wa¿nego artyku³u The Dao of Web Design, opublikowanego na witrynie A List Apart. Pe³ni te¿ funkcjê wspó³zarz¹dcy nowej, dzia³aj¹cej w ramach organizacji W3C, Incubator Group, której prace koncentruj¹ siê na kszta³ceniu kolejnych pokoleñ profesjonalnych twórców WWW (www.w3.org/2005/Incubator/owea). Spis treĂci CzēħĄ I Podstawy 1. Zanim zaczniesz ..............................................................21 Dla kogo jest ta ksiÈĝka .............................................................................. 23 WiÚc dla kogo nie jest ta ksiÈĝka ........................................................... 24 Co da mi ta ksiÈĝka ..................................................................................... 24 Czego ta ksiÈĝka mi nie da .......................................................................... 25 Jak uĝywaÊ tej ksiÈĝki ................................................................................. 26 PrzyïÈczanie siÚ do spoïecznoĂci ............................................................ 26 Co dalej ....................................................................................................... 26 2. Filozofie i techniki ...........................................................27 Wojny przeglÈdarek .............................................................................. 28 Jutrzenka standardów .......................................................................... 28 Standardy WWW dzisiaj ....................................................................... 29 Dlaczego powinno mnie to obchodziÊ? ......................................................... 29 Jak tworzyÊ na potrzeby World Wide Web .................................................. 30 To wcale nie musi wyglÈdaÊ tak samo w kaĝdej przeglÈdarce ................ 31 Stopniowe usprawnianie ........................................................................ 32 Rozdzielanie treĂci, prezentacji i zachowania ........................................ 33 Jeszcze raz, z sensem ............................................................................ 33 Moja kolejna sztuczka ........................................................................... 34 3. Kodowanie .....................................................................35 Dlaczego „to dziaïa w przeglÈdarkach” nie wystarcza ................................. 36 HTML i XHTML ....................................................................................... 36 Skïadnia i semantyka .................................................................................. 37 Bardzo krótka historia jÚzyka HTML ......................................................... 38 HTML 4.01 .......................................................................................... 38 XHTML 1.0, 1.1, 2.0 ............................................................................ 39 HTML 5 ............................................................................................... 40 6 Tworzenie serwisów WWW. Standardy sieciowe Kluczowe koncepcje jÚzyka HTML .............................................................. 41 Czym jest strona WWW? ....................................................................... 41 Terminologia: elementy, atrybuty, znaczniki i inne ............................... 42 Puste elementy HTML .......................................................................... 43 Typy dokumentów ....................................................................................... 44 Wprowadzenie do DOCTYPE ............................................................... 45 Strukturalne podstawy jÚzyka HTML ......................................................... 47 Podstawowy element html ..................................................................... 47 Element head ........................................................................................ 48 Element body ........................................................................................ 50 Elementy Ăródliniowe ............................................................................ 56 Rozszerzanie semantyki HTML .................................................................. 58 class ....................................................................................................... 58 id ........................................................................................................... 59 span ....................................................................................................... 60 ’Ècza: „hiper” w „hipertekĂcie” .................................................................. 60 Kotwice ................................................................................................. 61 WzglÚdne i bezwzglÚdne adresy URL .................................................... 62 Tworzenie ïÈczy do zasobów znajdujÈcych siÚ w internecie .................... 66 TreĂÊ osadzona ............................................................................................ 66 Obrazy ................................................................................................... 66 Osadzanie obrazów ................................................................................ 68 TreĂÊ multimedialna .............................................................................. 69 Formularze .................................................................................................. 71 Element form ........................................................................................ 72 Element input ....................................................................................... 72 Element button ..................................................................................... 75 Listy rozwijane ...................................................................................... 76 WyïÈczanie kontrolek ............................................................................ 78 Przypisywanie kontrolkom etykiet ......................................................... 79 Grupowanie kontrolek ........................................................................... 80 Tabele .......................................................................................................... 81 Struktura tabeli ..................................................................................... 81 ’Èczenie komórek .................................................................................. 82 Ramki i elementy iframe .............................................................................. 83 Znaki i encje ................................................................................................ 84 Zapewnianie jakoĂci ..................................................................................... 86 Walidacja kodu ...................................................................................... 87 Sprawdzanie ïÈczy ................................................................................. 88 HTML Tidy .......................................................................................... 88 HTML kontra XHTML .............................................................................. 89 Róĝnice w skïadni .................................................................................. 89 UdostÚpnianie dokumentu ..................................................................... 89 Obsïuga bïÚdów ..................................................................................... 89 Którego powinieneĂ uĝywaÊ? .................................................................. 91 Spis treħci 7 4. Prezentacja ................................................................... 93 Krótka historia stylów stosowanych w serwisach WWW .............................. 93 Po co oddzielaÊ treĂÊ od wyglÈdu? ......................................................... 96 Czym jest CSS? ........................................................................................... 96 Jak CSS jest wykorzystywany? ................................................................... 96 Styl Ăródliniowy ..................................................................................... 97 Osadzony kod CSS ................................................................................ 97 DoïÈczanie zewnÚtrznych arkuszy stylów ............................................... 97 Podstawowa skïadnia jÚzyka CSS ............................................................... 98 Selektory, bloki deklaracji, deklaracje i wïasnoĂci ................................. 98 Podstawowe informacje na temat selektorów ............................................. 100 Selektory typów ................................................................................... 100 Grupowanie selektorów ....................................................................... 100 Podstawowe wïasnoĂci: style czcionek ........................................................ 100 color .................................................................................................... 101 font-family .......................................................................................... 102 font-size .............................................................................................. 104 font-weight .......................................................................................... 106 font-style ............................................................................................. 106 text-decoration .................................................................................... 107 Dziedziczenie ............................................................................................. 107 ZwiÚkszenie szczegóïowoĂci: selektory class i id ......................................... 108 Selektory class ..................................................................................... 109 Selektory id ......................................................................................... 109 Precyzja selektora ............................................................................... 109 CzÚsto uĝywane wïasnoĂci ukïadu tekstu ................................................... 110 text-align ............................................................................................. 111 line-height ........................................................................................... 111 OdstÚpy pomiÚdzy literami i sïowami ................................................... 113 text-indent ........................................................................................... 113 Kombinacje: selektory potomków i dzieci ................................................... 114 Selektory potomków ............................................................................ 114 Selektory dzieci ................................................................................... 115 ’Èczenie w ïañcuchy ............................................................................ 116 Precyzja selektorów potomków i dzieci ................................................ 118 CzÚsto uĝywane wïasnoĂci tïa .................................................................... 121 background-color ................................................................................. 122 background-image ............................................................................... 123 WartoĂci URL ..................................................................................... 123 background-repeat .............................................................................. 124 background-position ............................................................................ 125 background-attach .............................................................................. 128 WïasnoĂci tïa w CSS 3 ........................................................................ 128 WïasnoĂci zbiorcze ............................................................................... 129 Selektory dynamiczne ................................................................................ 129 8 Tworzenie serwisów WWW. Standardy sieciowe Podstawowe wïasnoĂci ukïadu strony ........................................................ 131 Elementy blokowe kontra elementy Ăródliniowe ................................... 132 Model polowy ....................................................................................... 133 width ................................................................................................... 134 height .................................................................................................. 134 PrzelewajÈca siÚ treĂÊ .......................................................................... 135 margin ................................................................................................. 135 border .................................................................................................. 137 padding ............................................................................................... 139 Jak szeroki i wysoki jest element? ....................................................... 140 Zaawansowane wïasnoĂci ukïadu strony .................................................... 140 float ..................................................................................................... 140 clear .................................................................................................... 142 Pozycjonowanie ......................................................................................... 142 WïasnoĂÊ position i schematy pozycjonowania ..................................... 142 Zaawansowane selektory ........................................................................... 144 Selektory sÈsiadów .............................................................................. 145 Selektory atrybutów ............................................................................ 145 Typy wyĂwietlania ..................................................................................... 147 visibility ............................................................................................... 147 Pozycje listy ........................................................................................ 148 WiÚcej wïasnoĂci ........................................................................................ 149 WïasnoĂci drukowania ......................................................................... 149 WïasnoĂci interfejsu uĝytkownika ........................................................ 149 Selektory ............................................................................................. 149 TreĂÊ generowana ................................................................................ 150 Typy mediów ............................................................................................. 150 CSS zaleĝne od medium ....................................................................... 151 ’Èczenie z typami mediów ................................................................... 151 Osadzanie na podstawie typów mediów ................................................ 151 @media ............................................................................................... 151 Importowanie arkuszy stylów .................................................................... 152 @import .............................................................................................. 153 Zapewnianie jakoĂci ................................................................................... 154 Walidacja kodu CSS ............................................................................ 154 Sprawdzanie zgodnoĂci z przeglÈdarkami ............................................ 154 Szczególne wyzwania i techniki .................................................................. 155 Formatowanie formularzy ................................................................... 156 ZastÚpowanie obrazem ........................................................................ 156 Ukïad strony ....................................................................................... 158 Problemy z przeglÈdarkami ................................................................. 158 Formatowanie CSS ............................................................................. 159 WydajnoĂÊ mechanizmu CSS i serwisów WWW .................................. 159 5. DOM ........................................................................... 161 DOM poziomu zerowego ...................................................................... 162 PrzejĂciowy DOM ................................................................................ 162 DOM poziomu pierwszego ................................................................... 163 Spis treħci 9 Poziom drugi ....................................................................................... 163 Poziom trzeci ....................................................................................... 163 Drzewo DOM ............................................................................................ 164 Podstawowe obiekty i metody DOM .......................................................... 166 Obiekt window ..................................................................................... 166 Obiekt document ................................................................................. 167 Obiekt element .................................................................................... 168 Zdarzenia .................................................................................................. 170 Odbiorniki zdarzeñ .............................................................................. 171 Propagacja zdarzeñ ............................................................................. 172 Najlepsze praktyki w tworzeniu nowoczesnych, zgodnych ze standardami skryptów DOM ................................................. 173 Tworzenie dyskretnych skryptów ........................................................ 174 NiezgodnoĂci przeglÈdarek .................................................................. 176 WïaĂciwoĂÊ innerHTML kontra metody DOM .................................... 179 Bezpieczeñstwo ................................................................................... 180 Rozkwit bibliotek ....................................................................................... 181 Wybór biblioteki .................................................................................. 183 JQuery ................................................................................................ 183 Prototype ............................................................................................ 184 Script.aculo.us .................................................................................... 184 Yahoo User Interface Library (YUI) ................................................... 184 Sprawdzanie skryptów DOM ..................................................................... 184 IE Developer Toolbar dla programów IE 6 i 7 .................................... 185 Internet Explorer 8 Developer Toolbar ............................................... 185 Firebug oraz Web Developer Toolbar dla Firefoksa ............................ 185 DragonFly dla programu Opera .......................................................... 185 Web Inspector dla Safari ..................................................................... 186 Ajax? ......................................................................................................... 187 Podsumowanie .......................................................................................... 187 6. DostēpnoħĄ ...................................................................189 Biznesowe argumenty za zapewnianiem dostÚpnoĂci ........................... 190 Prawodawstwo na Ăwiecie .................................................................... 191 DostÚpnoĂÊ i W3C ..................................................................................... 191 WCAG 1 .............................................................................................. 192 WCAG 2 .............................................................................................. 195 ARIA ................................................................................................... 196 Typowe problemy zwiÈzane z dostÚpnoĂciÈ (i ich rozwiÈzania) .................. 203 ’Ècza i tytuïy ...................................................................................... 203 Nagïówki ............................................................................................. 204 Tekst alternatywny ............................................................................. 204 Kontrast kolorów ................................................................................. 205 Tabele ................................................................................................. 205 Formularze ......................................................................................... 209 Podsumowanie .......................................................................................... 211 10 Tworzenie serwisów WWW. Standardy sieciowe CzēħĄ II Sztuka tworzenia w ħwiecie rzeczywistym 7. Blaski i cienie wspóãpracy z przeglĎdarkami ........................... 215 Trzy rodzaje wad przeglÈdarek .................................................................. 216 Tryby pracy przeglÈdarki .......................................................................... 217 Tryb dziwactw i przeïÈczanie DOCTYPE ............................................ 218 Wybieranie trybu standardów .............................................................. 219 Nowy model przeïÈczania DOCTYPE wprowadzony w IE 8 ................ 220 Typowe bïÚdy przeglÈdarek ....................................................................... 222 BïÈd modelu polowego ......................................................................... 222 BïÈd podwójnego marginesu elementu dryfujÈcego ............................. 224 BïÈd niescalanych marginesów ............................................................ 225 IE i wïaĂciwoĂÊ hasLayout ........................................................................ 227 W gïÚbiach Twojej przeglÈdarki .......................................................... 227 Jak element otrzymuje ukïad? ............................................................. 228 Naprawianie (i wyzwalanie) bïÚdów zwiÈzanych z wïaĂciwoĂciÈ hasLayout ................................................. 229 Naprawianie bïÚdów: hakowaÊ czy nie hakowaÊ? ....................................... 231 Poznaj swojego wroga .......................................................................... 232 Dopasowywanie siÚ do przeglÈdarek .......................................................... 234 Ukrywanie arkuszy stylów przed starszymi przeglÈdarkami ................ 235 Gdy brakuje obsïugi moĝliwoĂci ................................................................. 238 IE 7 (i IE 8) Deana Edwardsa ............................................................ 239 Podsumowanie ........................................................................................... 241 8. Najlepsze metody nowoczesnego kodowania .......................... 243 CzytelnoĂÊ kodu ......................................................................................... 244 Stosowanie nazw ................................................................................. 244 Formatowanie, komentowanie i konsekwencja ..................................... 245 Prosty, stary, semantyczny kod HTML ..................................................... 246 Uĝywanie elementów HTML oraz atrybutów class i id do uzyskiwania lepszych konstrukcji semantycznych ........................... 247 JÚzyk znaczników handlu elektronicznego (ECML) ............................ 251 Kodowanie i SEO ...................................................................................... 252 Mikroformaty ............................................................................................ 253 Zalety mikroformatów ......................................................................... 253 Mikroformaty w akcji .......................................................................... 255 NarzÚdzia zwiÈzane z mikroformatami ................................................ 257 Wiele, wiele wiÚcej ............................................................................... 258 Podsumowanie ........................................................................................... 258 9. Ukãady stron wykorzystujĎce CSS ........................................ 259 WyĂrodkowanie poziome ............................................................................ 260 WyĂrodkowanie pionowe ............................................................................ 263 Pozycjonowanie CSS ................................................................................. 264 Schematy pozycjonowania ................................................................... 265 WïasnoĂci pozycjonowania ................................................................... 265 Pozycjonowanie bezwzglÚdne w akcji ................................................... 266 Spis treħci 11 Ukïady wykorzystujÈce dryfowanie ........................................................... 274 Poziome, dryfujÈce listy nawigacji ....................................................... 274 Wypeïnianie pola ................................................................................. 276 Obramowanie dookoïa listy nawigacji .................................................. 277 Wielokolumnowe ukïady wykorzystujÈce dryfowanie ........................... 278 Stopka ................................................................................................. 284 Zagadka kolorów ................................................................................. 284 Ukïady siatkowe ........................................................................................ 292 WïasnoĂci ukïadu tabelarycznego CSS 2.1 .......................................... 292 Podsumowanie .......................................................................................... 294 10. Resety i platformy CSS .....................................................295 Resety CSS ............................................................................................... 296 Zalety resetów CSS ............................................................................. 296 Argumenty przeciwko resetom ............................................................ 297 Jak wyglÈdajÈ resety CSS? ................................................................. 299 Popularne resety CSS ......................................................................... 299 Platformy CSS .......................................................................................... 301 Platformy CSS — za i przeciw ............................................................ 301 Popularne platformy i ich zastosowania .............................................. 303 Podsumowanie .......................................................................................... 305 CzēħĄ III Tworzenie serwisów WWW w praktyce 11. HTML 5 ........................................................................309 Czym jest HTML 5? .................................................................................. 309 Najwaĝniejsze moĝliwoĂci HTML 5 ........................................................... 311 Obsïuga bïÚdów ................................................................................... 311 Element canvas ................................................................................... 312 Lokalne przechowywanie danych ......................................................... 312 „WielowÈtkowy” JavaScript z Web Workers ....................................... 312 Obsïuga multimediów .......................................................................... 312 Lokalizowane aplikacje WWW z geolokacjÈ ........................................ 313 Strony umoĝliwiajÈce uĝytkownikom edycjÚ ........................................ 313 Róĝnice pomiÚdzy HTML 4 a HTML 5 ..................................................... 313 Deklarowanie DOCTYPE ................................................................... 314 Nagïówki, stopki, sekcje i inne nowe elementy strukturalne w jÚzyku HTML 5 ............................................................................... 315 Przykïad dokumentu HTML 5 .................................................................. 323 Materiaïy wideo, audio i inne osadzone treĂci w jÚzyku HTML 5 .............. 329 Wideo .................................................................................................. 330 Audio ................................................................................................... 334 Obsïuga elementów video i audio przez przeglÈdarki ........................... 334 DostÚpnoĂÊ materiaïów wideo i audio .................................................. 335 12 Tworzenie serwisów WWW. Standardy sieciowe Obsïuga standardu HTML 5 przez przeglÈdarki ....................................... 336 IE 7 i wczeĂniejsze wersje programu Internet Explorer ....................... 336 Sprawdzanie poprawnoĂci i udostÚpnianie kodu HTML 5 ......................... 337 Czy powinienem juĝ korzystaÊ z jÚzyka HTML 5? ..................................... 338 12. CSS 3 i przyszãoħĄ CSS ...................................................... 341 CSS przeïadowany ..................................................................................... 341 WejĂcie CSS 3 ........................................................................................... 342 Problem kompatybilnoĂci wstecz i naprzód „rozwiÈzany”? .................. 345 Rozszerzenia specyficzne dla dostawców .............................................. 346 Nowe selektory .......................................................................................... 349 Strukturalne selektory pseudoelementów ............................................ 349 Struktura dokumentu .......................................................................... 350 Selektor first-child ............................................................................... 350 Selektor first-of-type ........................................................................... 352 Selektor last-child ................................................................................ 354 Selektor nth-child ................................................................................ 355 Selektor target .................................................................................... 360 Podsumowanie ........................................................................................... 361 13. Nowe wãasnoħci w CSS 3 ................................................... 363 Efekty cieni ............................................................................................... 364 WïasnoĂÊ text-shadow .......................................................................... 364 WïasnoĂÊ box-shadow .......................................................................... 368 WïasnoĂÊ border-radius ............................................................................. 370 KompatybilnoĂÊ ................................................................................... 373 WïasnoĂÊ transparency .............................................................................. 373 Konstrukcja background-color: transparent ........................................ 373 Póïprzezroczyste obrazy tïa ................................................................. 374 WïasnoĂÊ opacity ................................................................................. 374 Kolory RGBa ............................................................................................. 375 KompatybilnoĂÊ ................................................................................... 376 Tekst wielokolumnowy ............................................................................... 376 PrzejĂcia .................................................................................................... 378 Definiowanie przejĂcia ......................................................................... 380 Inne wïasnoĂci ........................................................................................... 382 Obrazy obramowañ .............................................................................. 382 Wielokrotne obrazy tïa ........................................................................ 382 Przeksztaïcenia CSS ........................................................................... 383 Gradienty ............................................................................................ 383 WiÚcej, wiÚcej, wiÚcej! ................................................................................ 384 14. Dostosowywanie serwisów WWW do potrzeb róijnych mediów za pomocĎ CSS .............................................................. 387 WÚszenie agenta uĝytkownika ............................................................. 388 Haki .................................................................................................... 389 Spis treħci 13 Zapytania mediów ..................................................................................... 389 Korzystanie z zapytañ mediów ............................................................ 392 Do czego mogÈ siÚ przydaÊ zapytania mediów? ................................... 395 KompatybilnoĂÊ ................................................................................... 399 Ale czy jest to w jakiĂ sposób lepsze od wÚszenia agenta uĝytkownika? ...... 399 Podsumowanie .......................................................................................... 400 15. Czcionki w serwisach WWW ...............................................401 Krótka historia ïÈczenia i osadzania czcionek ............................................ 402 BieĝÈca sytuacja prawna ........................................................................... 404 BieĝÈca sytuacja techniczna ...................................................................... 405 @font-face i osadzanie czcionek ................................................................ 405 Osadzanie czcionek w przypadku programu Internet Explorer ............ 406 ’Èczenie czcionek w przypadku innych przeglÈdarek .......................... 407 Wyzwania ............................................................................................ 409 ’agodzenie problemów ........................................................................ 410 Czcionki jako usïugi ............................................................................ 411 Podsumowanie .......................................................................................... 411 16. SVG i canvas: grafika w przeglĎdarce ....................................413 SVG .......................................................................................................... 415 Podstawowe koncepcje i skïadnia SVG ................................................ 416 Ukïad wspóïrzÚdnych SVG .................................................................. 418 Zalety SVG .......................................................................................... 419 Przypadki zastosowania SVG .............................................................. 421 Umieszczanie obrazów SVG w serwisach WWW .................................. 422 Obsïuga SVG zapewniana przez przeglÈdarki ..................................... 425 UdostÚpnianie SVG ............................................................................. 427 Poza SVG ............................................................................................ 427 Element canvas standardu HTML 5 ......................................................... 428 Uĝywanie elementu canvas .................................................................. 428 Dodawanie elementu canvas ................................................................ 428 Pobieranie kontekstu rysowania .......................................................... 430 Rysowanie za pomocÈ kontekstu ......................................................... 432 I wiÚcej… ............................................................................................ 437 Przypadki zastosowania elementu canvas ............................................ 438 Kanwy kontra SVG ................................................................................... 439 Podsumowanie .......................................................................................... 441 İródãa .........................................................................443 Skorowidz ....................................................................453 ROZDZIAâ SZÓSTY DostÚpnoĂÊ G dy Tim Berners-Lee tworzyï zrÚby World Wide Web we wcze- snych latach 90. ubiegïego wieku, szczególnie mocno akcento- waï znaczenie jej powszechnoĂci i uniwersalnoĂci. DostÚpnoĂÊ dla wszystkich ludzi, niezaleĝnie od ich ewentualnej niepeïnosprawnoĂci, byïa fundamentalnÈ czÚĂciÈ tej wizji. Przez ponad dziesiÚÊ lat organizacja W3C opracowywaïa protokoïy, których celem byïo sprawienie, aby sieÊ WWW byïa jak najbardziej dostÚpna, i wïÈczaïa czynniki odpowiedzialne za zapewnianie dostÚp- noĂci do specyfikacji regulujÈcych standardy takie jak HTML czy CSS. Równolegle z tym ciaïa ustawodawcze na caïym Ăwiecie wprowa- dzaïy przepisy prawne zwiÈzane z dostÚpnoĂciÈ oraz regulacje, które miaïy taki sam wpïyw na sieÊ WWW jak na Ărodowisko fizyczne i które czÚsto bezpoĂrednio odwoïywaïy siÚ do tych specyfikacji W3C. Mimo to twórcy serwisów WWW wydajÈ siÚ nieraz bagatelizowaÊ kwe- stie zwiÈzane z dostÚpnoĂciÈ. W najlepszym przypadku sÈ one roz- waĝane na samym koñcu, stanowiÈ listÚ formalnoĂci, które muszÈ zostaÊ dopeïnione jak najmniejszym wysiïkiem i kosztem finansowym juĝ po caïkowitym zakoñczeniu „prawdziwej” pracy nad projektem. Jednak zaangaĝowanie w zapewnianie dostÚpnoĂci powinno byÊ jednÈ z podstaw etyki naszej rodzÈcej siÚ profesji: czymĂ, co z peïnÈ Ăwiado- moĂciÈ powinniĂmy staraÊ siÚ osiÈgnÈÊ, nie zaĂ rzeczÈ, którÈ robimy niechÚtnie i tylko wtedy, gdy wymaga tego od nas prawo. JeĂli na co dzieñ utrzymujesz kontakty z osobÈ niepeïnosprawnÈ, z pewnoĂciÈ wiesz, jak trudne moĝe byÊ uzyskanie dostÚpu do istotnych informacji, sieci spoïecznych i usïug. JeĂli nie masz tej okazji, spróbuj wyobraziÊ sobie ograniczenie swoich wïasnych moĝliwoĂci dostÚpu i zastanowiÊ siÚ, w jakich sytuacjach znajdujÈ siÚ czÚsto ludzie niepeïnosprawni. 190 Rozdziaã 6. DostēpnoħĄ Przez tydzieñ rób zakupy przez sieÊ i tylko w ten sposób utrzymuj swoje kontakty biznesowe. Korzystaj z czytnika ekranowego w celu sprawdzania swojej poczty elektronicznej i najĂwieĝszych informacji ze Ăwiata. Nawiguj, uĝywajÈc wyïÈcznie klawiatury lub jedynie myszy. Szybko nabierzesz sza- cunku dla ogromnych wyzwañ, które wiÚkszoĂÊ serwisów WWW i usïug internetowych stawia przed luděmi niepeïnosprawnymi, wyzwañ, które masz okazjÚ zmniejszyÊ z racji wykonywanego zawodu. Kluczowa rola odgrywana przez sieÊ WWW w poprawianiu standardu ĝycia tak wielu osób niepeïnosprawnych jest jednym z powodów, dla których zosta- ïem twórcÈ serwisów. Nie musi tak byÊ w przypadku kaĝdego, niezaleĝnie jednak od tego, czy TwojÈ motywacjÈ jest altruizm, czy teĝ wymogi prawne i groěba wytoczenia procesów sÈdowych, o których gïoĂno bywa ostatnimi czasy w Stanach Zjednoczonych i Australii, przekonasz siÚ, ĝe zapewnienie naleĝytej dostÚpnoĂci jest jednym z podstawowych zadañ zwiÈzanych z pro- fesjonalnym tworzeniem serwisów WWW. Na szczÚĂcie, jest to teĝ znacznie mniej kïopotliwe i wcale nie tak trudne do osiÈgniÚcia, jak nauczono CiÚ wierzyÊ. W rozdziale tym nie bÚdziemy w stanie bardzo szczegóïowo opisaÊ wszystkich zagadnieñ zwiÈzanych z zapewnianiem dostÚpnoĂci, ale postaramy siÚ zajÈÊ najwaĝniejszymi kwestiami, zaleceniami oraz wyzwaniami technicznymi dotyczÈcymi tej materii, a takĝe przyjrzeÊ kilku prostym krokom, które pomogÈ nam tworzyÊ odpowiednio dostÚpne serwisy WWW przy niewielkim tylko dodatkowym wysiïku z naszej strony. Biznesowe argumenty za zapewnianiem dostēpnoħci Za koniecznoĂciÈ zapewniania dostÚpnoĂci serwisów WWW przemawiajÈ takĝe solidne argumenty natury biznesowej. Tworzenie takich serwisów moĝe wpïynÈÊ na poprawienie komfortu ĝycia odwiedzajÈcych je osób, przekïada siÚ teĝ jednak na bezpoĂrednie oszczÚdnoĂci (zwiÈzane na przykïad ze zmniej- szeniem liczby uĝytkowników dzwoniÈcych na numery telefonicznej obsïugi klienta) i umoĝliwia biznesowi dotarcie do znacznie wiÚkszej grupy ludzi, co wpïywa z kolei na wzrost sprzedaĝy i zysków. Liczba osób niepeïnospraw- nych w naszych spoïecznoĂciach jest o wiele wiÚksza, niĝ gros ludzi sobie wyobraĝa. Wydziaï Zdrowia i Pomocy Humanitarnej Stanów Zjednoczonych ogïosiï na przykïad niedawno, ĝe jeden na piÚciu obywateli USA cierpi z powodu jakiegoĂ rodzaju niepeïnosprawnoĂci, a w przypadku jednej osoby na osiem niepeïnosprawnoĂÊ ta ma charakter powaĝny. DostēpnoħĄ i W3C 191 Gdy mówimy o osobach niepeïnosprawnych, mamy na myĂli dziesiÈtki milio- nów ludzi, a takĝe segment rynku, który znacznie czÚĂciej korzysta z han- dlu elektronicznego niĝ jakakolwiek inna grupa spoïeczna. Zaspokajanie potrzeb tej wspólnoty moĝe bezpoĂrednio wpïynÈÊ na rentownoĂÊ niejednej firmy. Oprócz tych zysków o charakterze czysto komercyjnym zastosowanie tech- nik tworzenia dostÚpnych serwisów WWW moĝe mieÊ równieĝ szereg innych pozytywnych skutków. Google i inne mechanizmy wyszukiwania sÈ w pew- nym sensie Ălepe. Jedynym tekstem, jaki widzÈ, gdy indeksujÈ serwis, jest prawdziwy tekst, nie zaĂ wszelkie obrazy czy pliki Flash, które mogÈ zostaÊ wïaĂciwie zinterpretowane tylko przez ludzi dysponujÈcych odpowiednio dobrym wzrokiem. Serwisy WWW, w przypadku których zastosowano dobrÈ i przejrzystÈ strukturÚ semantycznÈ, unikniÚto uĝywania kodu opartego na tabelach oraz zadbano o wykorzystanie innych technik zapewniania dostÚp- noĂci, mogÈ dziÚki temu cieszyÊ siÚ lepszÈ „wykrywalnoĂciÈ” i pozycjono- waniem przez mechanizmy wyszukiwania. Prawodawstwo na ħwiecie Ostatnimi czasy na caïym Ăwiecie uchwala siÚ akty prawne majÈce zwal- czaÊ dyskryminacjÚ osób niepeïnosprawnych. Przepisy tego rodzaju doty- czÈ zwykle wielu róĝnych aspektów ĝycia, coraz wiÚkszy jednak nacisk kïadzie siÚ tu równieĝ na kwestie zwiÈzane z dostÚpnoĂciÈ sieci i serwisów WWW. Problem ten jest bardzo zïoĝony, dlatego wszelkie próby prostego zaprezentowania go tutaj skazane sÈ na niepowodzenie i mogÈ wprowadziÊ tylko jeszcze wiÚksze zamieszanie. ½ródïa, z których moĝesz czerpaÊ bar- dziej obszernÈ wiedzÚ na temat sytuacji na Ăwiecie w tej materii, zostaïy wymienione na koñcu niniejszej ksiÈĝki. DostēpnoħĄ i W3C Od pierwszych dni swojego istnienia organizacja W3C podejmuje próby tworzenia zaleceñ, wytycznych i wskazówek dotyczÈcych kwestii zapewnia- nia dostÚpnoĂci, a takĝe wbudowania ich bezpoĂrednio w standardy takie jak CSS i HTML. W roku 1999 W3C opublikowaïa pierwszÈ wersjÚ zbioru dokumentów znanych jako „Wytyczne dotyczÈce dostÚpnoĂci treĂci interne- towych” (ang. Web Content Accessibility Guidelines, w skrócie — WCAG 1), zaĂ w roku 2008 udostÚpniïa jego zaktualizowanÈ wersjÚ (znanÈ jako WCAG 2). Dodatkowo, aby zaspokoiÊ rosnÈcÈ potrzebÚ wytycznych zwiÈ- zanych z dostÚpnoĂciÈ aplikacji WWW, dziaïajÈca w obrÚbie W3C inicjatywa 192 Rozdziaã 6. DostēpnoħĄ dostÚpnoĂci do sieci (ang. Web Accessibility Initiative, w skrócie — WAI) opracowaïa regulujÈcy te kwestie standard Accessible Rich Internet Appli- cations Suite (WAI-ARIA), którym zajmiemy siÚ juĝ niebawem. WCAG 1 Opublikowany w 1999 roku, w czasach panowania przeglÈdarek wersji czwar- tej, WCAG 1 byï pierwszÈ waĝnÈ próbÈ skodyfikowania zbioru procedur majÈcych zapewniÊ wiÚkszÈ dostÚpnoĂÊ serwisów WWW. Jego zadaniem byïo pokazanie sposobu „w jaki moĝna tworzyÊ treĂci internetowe dostÚpne dla osób niepeïnosprawnych” (jak moĝna przeczytaÊ juĝ w pierwszym zdaniu opisu WCAG 1 znajdujÈcego siÚ pod adresem: www.w3.org/TR/ WCAG10). WCAG 1 zostaï podzielony na czternaĂcie wytycznych, z których kaĝda dzieli siÚ na punkty kontrolne, a te z kolei majÈ priorytety od A do AAA (okreĂlane czÚsto jako „potrójne A”). ZgodnoĂÊ z wytycznymi WCAG 1 moĝe byÊ mierzona stopniem zgodnoĂci z tymi punktami kontrolnymi. Dokument ma zgodnoĂÊ poziomu A, jeĂli zapewnia zgodnoĂÊ ze wszystkim punktami kontrolnymi poziomu A. Analogicznie, dokument uwaĝany jest za zgodny z poziomem AA („podwójne A”), jeĂli speïnia wymogi wszystkich punktów kontrolnych AA, zaĂ z poziomem AAA, gdy zapewnia zgodnoĂÊ z wszystkimi punktami kontrolnymi AAA. Zanim bardziej zagïÚbimy siÚ w tematykÚ tych wytycznych i punktów kon- trolnych, naleĝy tu odnotowaÊ, ĝe zgodnoĂÊ AAA uwaĝa siÚ ogólnie za trudnÈ do osiÈgniÚcia i nie zawsze jest warta wïoĝonego w niÈ wysiïku, poniewaĝ wiele punktów kontrolnych AAA ma bardzo subiektywny charakter, a peïna zgodnoĂÊ z poziomem AAA ma doĂÊ niewielkie znaczenie praktyczne. W zwiÈzku z tym przez wiÚkszoĂÊ ekspertów (a takĝe niektóre oficjalne wytyczne rzÈdowe) zgodnoĂÊ poziomu AA jest zalecana jako wystarczajÈca. Wytyczne i punkty kontrolne Jak juĝ wspomnieliĂmy powyĝej, kaĝda z czternastu wytycznych WCAG 1 zawiera kilkanaĂcie punktów kontrolnych. W rozdziale tym przyjrzymy siÚ tylko tym punktom kontrolnym, które najczÚĂciej sprawiajÈ trudnoĂci. Wytyczne WCAG 1 (oraz towarzyszÈcy im dokument „Techniki”) sÈ doĂÊ proste, nie bój siÚ wiÚc przeczytaÊ ich samodzielnie. DostēpnoħĄ i W3C 193 Wytyczna 1: Zapewnij równowaijne odpowiedniki treħci dıwiēkowych i wizualnych Wytyczna ta ma na celu zaspokojenie potrzeb osób majÈcych problemy ze sïuchem lub wzrokiem. Jednym z najbardziej powszechnych bïÚdów popeï- nianych przez twórców serwisów WWW jest pomijanie treĂci alt zwiÈza- nych z obrazami. W kodzie HTML 4 wszystkie elementy img muszÈ mieÊ atrybut alt, choÊ wartoĂÊ tego atrybutu moĝe byÊ pusta (a wiÚc dopusz- czalne jest tu wyraĝenie alt= ) w przypadku grafik peïniÈcych funkcje wyïÈcznie dekoracyjne. W takich przypadkach zdecydowanie powinniĂmy uĝywaÊ moĝliwoĂci oferowanych przez CSS, zamiast dodawaÊ tego typu obrazy za pomocÈ kodu HTML. Zapewnianie dostÚpnoĂci treĂci audio i wideo wymaga znacznie wiÚcej niĝ tylko prostych odpowiedników tekstowych, a opis niezbÚdnych technik, które siÚ tu wykorzystuje, znacznie wykracza poza zakres materiaïu prezento- wanego w tej ksiÈĝce. ’Ècza do ěródeï informacji na ten temat oraz wiado- moĂci dotyczÈcych sposobów zapewniania dostÚpnoĂci treĂci audio i wideo znajdziesz na koñcu niniejszej publikacji. Wytyczna 2: Nie polegaj wyãĎcznie na kolorze Zalecenie to ma zastosowanie raczej do kodu CSS niĝ HTML, poniewaĝ formatowanie zawsze powinno byÊ definiowane za poĂrednictwem mecha- nizmu CSS, nie zaĂ prezentacyjnego kodu HTML. Ocenia siÚ, ĝe nawet osiem procent mÚskiej populacji ma pewnego rodzaju problemy z rozróĝ- nianiem barw, zaĂ osoby korzystajÈce z urzÈdzeñ monochromatycznych (takich jak czytnik Kindle firmy Amazon) nie sÈ w stanie rozróĝniaÊ jakich- kolwiek kolorów poza odcieniami szaroĂci. Zamiast wiÚc na przykïad uĝy- waÊ barwy zielonej w celu wskazania bezpiecznego wyboru i czerwieni do oznaczania zagroĝenia, powinieneĂ stosowaÊ ksztaïty, etykiety tekstowe i inne rodzaje wskazówek przekazujÈcych tÚ informacjÚ. Wytyczna 3: Korzystaj ze znaczników oraz arkuszy stylów i rób to we wãaħciwy sposób Wytyczna ta sugeruje, ĝe powinniĂmy uĝywaÊ technologii WWW nie tylko zgodnie z literÈ prawa (ukïady stron wykorzystujÈce tabele mimo wszystko przejdÈ walidacjÚ), lecz równieĝ zgodnie z jego duchem. NaleĝÈce do niej punkty kontrolne majÈ miÚdzy innymi zapewniÊ, ĝe dokumenty sÈ prawi- dïowe, w kodzie CSS stosowane sÈ jednostki wzglÚdne, takie jak em i , zamiast px, zaĂ w kodzie HTML uĝywane sÈ odpowiednie elementy seman- tyczne i strukturalne (na przykïad nagïówki, listy, cytaty itd.). 194 Rozdziaã 6. DostēpnoħĄ Wytyczna 5: Twórz pãynnie przeksztaãcajĎce siē tabele Dane tabelaryczne mogÈ powodowaÊ powaĝne problemy w przypadku osób korzystajÈcych z urzÈdzeñ asystujÈcych, takich jak czytniki ekranowe. Wytyczna 5 zawiera kilka punktów kontrolnych, które majÈ Ci pomóc w poprawieniu dostÚpnoĂci danych tego rodzaju. Wspomniane punkty kontrolne dotyczÈ uĝywania nagïówków row i column w tabelach danych, zaĂ w przypadkach skomplikowanych tabel korzystania z takich elementów jak thead, tfoot oraz tbody w celu grupowania wierszy, col i colgroup w celu grupowania kolumn, a takĝe atrybutów axis, scope i headers w celu wskazania relacji wystÚpujÈcych pomiÚdzy komórkami i nagïówkami. Sposobami poprawiania dostÚpnoĂci tabel danych zajmiemy siÚ jeszcze w dalszej czÚĂci niniejszego rozdziaïu. Wytyczna 9: Projektuj zgodnie z zasadĎ niezaleijnoħci od sprzētu Wytyczna 9 koncentruje siÚ na znaczeniu moĝliwoĂci uĝywania serwisu lub strony WWW niezaleĝnie od rodzaju wykorzystywanego urzÈdzenia wejĂcio- wego, a wiÚc tego, czy zamiast samej myszy stosowana jest klawiatura, wejĂciowe urzÈdzenie gïosowe czy teĝ sprzÚt jeszcze innego typu. To tylko niektóre z wytycznych, lecz wiele waĝnych i popularnych serwi- sów WWW nie speïnia wymogów stawianych nawet przez nie. Zapewnienie zgodnoĂci poziomu AA standardu WCAG 1 jest w duĝej mierze sprawÈ prostÈ, a stopieñ tej zgodnoĂci da siÚ zwykle oceniÊ w sposób automatyczny za pomocÈ odpowiednich narzÚdzi, którymi zajmiemy siÚ juĝ za chwilÚ. Oznacza to w praktyce, ĝe doĂÊ ïatwo moĝna wyznaczyÊ poziom zgodnoĂci serwisów WWW z tymi wytycznymi, a ich twórcy nie dysponujÈ wieloma wymówkami, ĝeby tego nie robiÊ. Narzēdzia do zapewniania jakoħci dla WCAG 1 Nie da siÚ sprawdziÊ mechanicznie zgodnoĂci ze wszystkimi wytycznymi WCAG 1, poniewaĝ do oceny stopnia przestrzegania niektórych z nich wyma- gany jest udziaï czïowieka, jednak w przypadku tych, dla których jest to moĝ- liwe, istnieje sporo narzÚdzi uïatwiajÈcych proces testowania. NaleĝÈ do nich: x CynthiaSays firmy HiSoftware — www.cynthiasays.com, x HERA — www.sidar.org/hera/index.php.en, x WAVE firmy Webaim — wave.webaim.org, x Total Validator — www.totalvalidator.com, x ATRC Web Accessibility Checker — www.achecker.ca/checker/ index.php. DostēpnoħĄ i W3C 195 WCAG 2 Standard WCAG 1 powstaï z myĂlÈ o technologiach WWW istniejÈcych w czasach, gdy zostaï on opublikowany. W kolejnych latach niektóre z nich bardziej dojrzaïy, zaĂ inne — takie jak skrypty DOM — zyskaïy na zna- czeniu. Drugie wydanie WCAG, czyli WCAG 2, ma juĝ zatem nieco innÈ strukturÚ. Zasady, wytyczne, kryteria sukcesu i techniki WCAG 2 powstaï w celu utworzenia wytycznych, które sÈ w mniejszym stopniu zwiÈzane z konkretnymi technologiami, bardziej obiektowe, a — co za tym idzie — znacznie ïatwiej poddajÈ siÚ testom (przeprowadzanym za pomocÈ oprogramowania lub przez ludzi), jak równieĝ dajÈ siÚ dosto- sowaÊ do zmian zachodzÈcych w dziedzinie technologii WWW. Zgodnie z oĂwiadczeniem Web Accessibility Initiative WCAG 2 ma znaleěÊ zasto- sowanie w przypadku „róĝnych typów technologii sieciowych i technologii bardziej zaawansowanych”, jak równieĝ technologii, które „powstanÈ w przy- szïoĂci”. Standard zostaï takĝe zaprojektowany w taki sposób, aby zgod- noĂÊ z definiowanymi przezeñ kryteriami sukcesu daïa siÚ „bardziej precy- zyjnie testowaÊ za pomocÈ testów automatycznych oraz analiz prowadzonych przez ludzi” (www.w3.org/WAI/WCAG20/wcag2faq.html). Podczas gdy WCAG 1 byï zbiorem wytycznych, z którymi zwiÈzane byïy punkty kontrolne, WCAG 2 podzielone zostaïo na cztery gïówne zasady. Kaĝda z nich zawiera szereg wytycznych, zaĂ kaĝda z wytycznych ma pewnÈ liczbÚ punktów kontrolnych noszÈcych nazwÚ kryteriów sukcesu. Kaĝde z tych kryteriów jest zwiÈzane z wystarczajÈcymi technikami (czyli rekomendowanymi sposobami speïniania tego kryterium sukcesu) oraz tech- nikami doradczymi (metodami, które same w sobie nie sÈ wystarczajÈce do speïnienia kryterium, lecz sÈ mimo to zalecane). ¿adna z tych technik nie jest wymagana w celu speïnienia kryterium. W dokumencie „Techniki WCAG 2” opisano równieĝ typowe defekty, które sÈ definiowane przez grupÚ roboczÈ jako „praktyki twórcze, których zastosowanie sprawia, ĝe treĂÊ WWW nie jest zgodna z WCAG 2.0”. WCAG 2 ma swoich krytyków na forum osób zajmujÈcych siÚ kwestiami dostÚpnoĂci, a przyjmowanie go jako podstawowego wyznacznika dostÚp- noĂci treĂci WWW odbywa siÚ znacznie wolniej, niĝ organizacja W3C mogïa siÚ spodziewaÊ. Wydaje siÚ jednak, ĝe zastÈpi on w koñcu WCAG 1 jako naj- waĝniejsze ěródïo wytycznych w tej dziedzinie. PrzeglÈd niektórych argumen- tów przeciwko WCAG 2 wysuwanych przez uczestników w tej dyskusji moĝesz znaleěÊ w definicji dostÚpnoĂci treĂci WWW zamieszczonej w anglojÚzycznej 196 Rozdziaã 6. DostēpnoħĄ wersji Wikipedii, która w momencie pisania niniejszej ksiÈĝki byïa zaska- kujÈco dobra (en.wikipedia.org/wiki/Web_accessibility#Criticism_of_WAI_ guidelines). WCAG 2 to dokument znacznie wiÚkszy niĝ WCAG 1. Zostaï on poddany krytyce gïównie za swojÈ ogólnikowoĂÊ i zastosowanie niezrozumiaïego ĝar- gonu — przykïad tej krytyki moĝesz znaleěÊ w artykuïach zamieszczonych pod adresami: http://www.alistapart.com/articles/tohellwithwcag2 oraz http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/wcag- guidelines-20.shtml. Standardowi towarzyszy jednak bardzo dokïadna dokumentacja, której zadaniem jest pomaganie twórcom w zrozumieniu i speïnieniu kaĝdego kryterium sukcesu. Opracowano go równieĝ w taki sposób, aby strony speïniajÈce w tej chwili wymogi stawiane przez kryteria WCAG 1 A i AA w wiÚkszoĂci przypadków speïniaïy teĝ kryteria WCAG 2 bez koniecznoĂci wprowadzania ĝadnych poprawek lub dziÚki bardzo nie- wielkiemu nakïadowi pracy. Szczegóïowy opis otchïani i zawiïoĂci standardu WCAG 2 daleko wykracza poza zakres materiaïu prezentowany w niniejszej ksiÈĝce, jednak wiele inte- resujÈcych ïÈczy i adresów innych dokumentów zwiÈzanych z tymi wytycz- nymi znajdziesz w dodatku „½ródïa” zamieszczonym na koñcu tej publikacji. Narzēdzia do zapewniania jakoħci dla WCAG 2 Z uwagi na to, ĝe WCAG 2 nadal znajduje siÚ na stosunkowo wczesnym eta- pie rozwoju, dostÚpnych jest teĝ w jego przypadku znacznie mniej zauto- matyzowanych narzÚdzi do zapewniania jakoĂci niĝ w przypadku WCAG 1. Z zaprezentowanej wczeĂniej listy rozwiÈzañ dla WCAG 1 jedynie narzÚ- dzie ATRC Web Accessibility Checker zapewnia dodatkowÈ moĝliwoĂÊ testo- wania stron pod kÈtem zgodnoĂci z wymogami WCAG 2. ARIA Wraz z tym, jak treĂci i serwisy WWW stawaïy siÚ bardziej zïoĝone i zaczÚïy w coraz wiÚkszym stopniu przypominaÊ aplikacje, wzrastaïa teĝ trudnoĂÊ zapewniania, a nawet definiowania ich dostÚpnoĂci. W celu rozwiÈzania tych problemów WAI opracowaïa pakiet Accessible Rich Internet Applications, zwany teĝ WAI-ARIA lub — czÚĂciej — po prostu ARIA. ARIA jest zbio- rem rozszerzeñ jÚzyka HTML, których moĝna uĝywaÊ do opisywania elemen- tów, dziÚki czemu moĝliwe jest identyfikowanie roli, stanów i wïaĂciwoĂci kaĝdego z nich w sposób, który znacznie zwiÚksza dostÚpnoĂÊ wynikowej strony. DostēpnoħĄ i W3C 197 W punkcie tym przyjrzymy siÚ najpierw pobieĝnie temu, co umoĝliwia Ci ARIA. ChoÊ jest ona w dalszym ciÈgu w poczÈtkowej fazie rozwoju, cieszy siÚ naprawdÚ niezïÈ obsïugÈ w przypadku wszystkich wspóïczesnych prze- glÈdarek internetowych, w tym takĝe programu Internet Explorer 8, jak równieĝ duĝej liczby czytników ekranowych, poza tym wydaje siÚ caïkiem jasne, ĝe twórcy przeglÈdarek rzetelnie popierajÈ tÚ technologiÚ. ARIA pozo- stanie z nami na staïe. Dostēp za pomocĎ klawiatury Strona czy aplikacja WWW, aby byïa dostÚpna, musi byÊ w peïni uĝyteczna za pomocÈ urzÈdzeñ innych niĝ mysz. ARIA zapewnia, ĝe aplikacje i strony mogÈ byÊ uĝywane za pomocÈ klawiatury, nie wymagajÈc zastosowania myszy. W standardzie HTML 4 ognisko wprowadzania (ang. focus) okreĂla, który element strony jako pierwszy otrzymuje dane wejĂciowe wprowadzone przez uĝytkownika za pomocÈ klawiatury lub innego urzÈdzenia wejĂciowego. Ognisko wprowadzania moĝe przejÈÊ ograniczona liczba elementów, takich jak a, area, button, input oraz select, a uĝytkownik moĝe korzystaÊ z kla- wisza tabulacji w celu cyklicznego przechodzenia pomiÚdzy nimi. PorzÈdek przechodzenia klawiszem tabulacji (ang. tab order) tych elementów (czyli kolejnoĂÊ, w której bÚdÈ one przejmowaïy ognisko wprowadzania wraz z tym, jak uĝytkownik bÚdzie naciskaï klawisz tabulacji) jest okreĂlany przez kolejnoĂÊ ich wystÚpowania w ěródïowym kodzie HTML lub teĝ przez war- toĂÊ atrybutu tabindex, który za pomocÈ liczb caïkowitych definiuje odpo- wiedni porzÈdek w nastÚpujÈcy sposób: im niĝsza jest wartoĂÊ przypisana atrybutowi, tym wczeĂniejsze miejsce element zajmuje w porzÈdku prze- chodzenia. Twórcy serwisów WWW mogÈ za pomocÈ jÚzyka HTML 4 tworzyÊ wïasne kontrolki aplikacji lub widgety, jak sÈ one nazywane w technologii ARIA. Uĝywa siÚ w tym celu elementów, które nie przejmujÈ ogniska wprowadza- nia i które z racji tego nie mogÈ byÊ wykorzystywane jedynie za pomocÈ klawiatury. StosujÈc technologiÚ ARIA, moĝna sprawiÊ, aby wszystkie widoczne elementy miaïy przypisany tabindex, dziÚki czemu mogÈ one przejmowaÊ ognisko wprowadzania i dziÚki czemu moĝna ich uĝywaÊ za pomocÈ klawiatury. Ta moĝliwoĂÊ technologii ARIA jest w tej chwili obsïugiwana przez przeglÈ- darki IE 8, Opera 9.5, Safari 4 oraz Firefox 3.5. 198 Rozdziaã 6. DostēpnoħĄ Role W kodzie HTML do dostarczania semantycznej informacji o dokumen- tach wykorzystuje siÚ nazwy elementów; mimo ĝe sprytni twórcy serwisów WWW uĝywajÈ równieĝ atrybutów class i id do doïÈczania dodatkowych informacji na temat elementów, rozwiÈzanie to ma raczej charakter zwycza- jowy i nie jest oficjalnÈ czÚĂciÈ standardu. Wynika stÈd, ĝe jÚzyk HTML jest nieco zuboĝaïy, jeĂli chodzi o jego moĝliwoĂci semantyczne. ARIA roz- szerza moĝliwoĂci standardu XHTML 1.1 zwiÈzane z atrybutem role, pozwalajÈc twórcom opisywaÊ dodatkowÈ funkcjÚ wypeïnianÈ przez element, niezwiÈzanÈ bezpoĂrednio z tym, jakiego rodzaju jest to element. Na przy- kïad listy sÈ elementami li, mogÈ teĝ jednak odgrywaÊ rolÚ nawigacyjnÈ, choÊ i to nie musi byÊ ich jedyna funkcja. Technologia ARIA dostarcza zbiór moĝliwych wartoĂci atrybutu role, czyli zestaw nazw typów ról peïnionych przez element. Fachowo mówi siÚ o tym, ĝe zapewnia atrybutowi role ontologiÚ. KorzystajÈc z atrybutu role do opisywania roli odgrywanej przez okreĂlony element, twórcy serwisów WWW mogÈ sprawiÊ, aby przeglÈdarki „rozu- miejÈce” role technologii ARIA lepiej przedstawiaïy uĝytkownikom strukturÚ dokumentu. Atrybut role moĝe równieĝ zapewniaÊ standardowy, przewi- dywany przez uĝytkownika sposób dziaïania i wyglÈd okreĂlonych rodza- jów kontrolek, na przykïad pól wyboru, które sÈ implementowane przez twórcÚ za pomocÈ innych niĝ typowe elementów HTML (typowym elementem byïby w tym przypadku input type= checkbox ). Role oferowane przez technologiÚ ARIA naleĝÈ do wielu róĝnych kategorii, wĂród których wymieniÊ moĝna nastÚpujÈce: x Role znaków orientacyjnych, które opisujÈ regiony strony przeznaczone do celów nawigacyjnych. NaleĝÈ do nich: application, banner, main, navigation oraz search. x Role struktury dokumentu, które opisujÈ funkcjÚ odgrywanÈ przez element w strukturze dokumentu. NaleĝÈ do nich: navigation, section, note oraz heading (jak przekonamy siÚ w rozdziale 11., sÈ one zwykle ĂciĂle zwiÈzane z nowymi elementami strukturalnymi standardu HTML 5). x Role struktury aplikacji, które opisujÈ funkcjÚ odgrywanÈ przez element w strukturze aplikacji. NaleĝÈ do nich: alert, alertdialog, progressbar oraz status. x Elementy interfejsu uĝytkownika, takie jak treegrid, toolbar oraz menuitem. DostēpnoħĄ i W3C 199 x Role elementów wejĂciowych uĝytkownika, takie jak checkbox, slider oraz option. Korzystanie z atrybutu role jest ïatwe — polega po prostu na tym, ĝe doda- jemy jednÈ ze zdefiniowanych wartoĂci roli jako wartoĂÊ atrybutu role elementu, dokïadnie tak, jak odbywaïo siÚ to w przypadku wartoĂci atry- butu class. Zaïóĝmy na przykïad, ĝe chcemy uĝyÊ elementu input z type im
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Tworzenie serwisów WWW. Standardy sieciowe
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: