CSS I Ajax. Strony WWW Zgodne Ze Standardami Sieciowymi W3C

CSS i Ajax.
Strony WWW
zgodne ze standardami
sieciowymi W3C
Autor: Christopher Schmitt, Kimberly Blessing,
Rob Cherny, Meryl K. Evans, Kevin Lawver,
Mark Tramme
Tumaczenie: Robert Grczyski
ISBN: 978-83-246-1755-5
Tytu oryginau: Adapting to Web Standards:
CSS and Ajax for Big Sites (Voices That Matter)
Format: 168x237, stron: 312
Twrz serwisy internetowe zgodne z standardami!

Jak projektowa serwisy WWW zgodne z standardami?
Jak zaprojektowa interfejs uytkownika?
Jak zwikszy wydajno strony WWW?
Wspczesne strony internetowe rni si, a przynajmniej powinny, od tych sprzed

kilku lat. Jeeli rnic nie wida od strony graficznej, to z pewnoci mona je znale
w kodzie strony. Nowoczesne witryny WWW charakteryzuj si zgodnoci
ze standardami, wykorzystaniem kaskadowych arkuszy stylw oraz udogodnieniami
dla osb niepenosprawnych. A dziki zastosowaniu technologii AJAX wspczesne
witryny kusz interaktywnoci i dynamizmem.
Autorzy niniejszej ksiki wprowadzaj Czytelnika w tajniki projektowania serwisw
zgodnych z zasadami ustalonymi przez organizacj W3C. Dziki tej ksice poznasz
rodzaje i zastosowanie standardw sieciowych. Dowiesz si, w jaki sposb wybra
jzyk znacznikw, oraz poznasz zalety i wady jzykw HTML i XHTML. Nauczysz si
korzysta z kaskadowych arkuszy stylw, a nastpnie odkryjesz sposb wykorzystania
technologii AJAX w celu tworzenia interaktywnych stron WWW. Co najwaniejsze,
dostosujesz swoj stron do wspczesnych standardw, dziki czemu zyska
na dostpnoci i interaktywnoci, przycigajc rzesze uytkownikw!
Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl
Zalety standardw sieciowych

Przygotowanie interfejsu uytkownika
Wady i zalety jzykw HTML oraz XHTML
Wpyw deklaracji DOCTYPE na zachowanie przegldarki
Korzyci pynce z zastosowania kaskadowych arkuszy stylw
Sposoby doczania arkuszy stylw do strony
Zasady wykorzystania technologii AJAX
Wsppraca jzyka JavaScript z CSS
Systemy zarzdzania treci
Programowanie aplikacji sieciowych
Sposoby na zwikszenie wydajnoci witryn internetowych
Dostosuj si do standardw zwiksz dostpno

i popularno swojej strony internetowej!
Spis treci
Podzikowania ....................................................................................................................................... 7
O autorach ................................................................................................................................................ 9
Cz I Tworzenie witryn internetowych bazujcych

na standardach sieciowych
13
WPROWADZENIE
15
Czym s standardy sieciowe? .............................................................................................16

Podstawowe zalety standardw sieciowych ........................................................17
Internetowe interfejsy uytkownika ................................................................................17
Planowanie interfejsu uytkownika .................................................................................18
Wspczesne planowanie witryny internetowej .................................................20
Nowe podejcie: plany architektury UI ...................................................................22
ROZDZIA 1. TWORZENIE INTERFEJSU
25
Od czego rozpocz? .............................................................................................................27

Struktura dokumentu: wybr jzyka znacznikw ......................................................27
HTML kontra XHTML ......................................................................................................28
Przeczanie deklaracji DOCTYPE
i jej wpyw na tryb pracy przegldarki internetowej .....................................34
Weryfikowa czy nie weryfikowa poprawnoci kodu? ...................................44
Tre i struktura: od projektu do wykonania ........................................................47
ROZDZIA 2. WPROWADZENIE DO KASKADOWYCH ARKUSZY STYLW
59
Ile plikw CSS naley utworzy? ........................................................................................60

Plik CSS i strategie jego doczania ..........................................................................62
Mikroformaty w subie konwencji i czytelnych nazw ..............................................68
Mikroformaty i POSH .....................................................................................................69
Zbyt wiele klas ..........................................................................................................................72
Classitis klas .......................................................................................................................72
Uzdrowienie classitis ......................................................................................................74
Struktura treci pliku CSS .....................................................................................................78
Media alternatywne w CSS ..................................................................................................81
Prezentacja zapewniajca swobod dziaania .............................................................85
ROZDZIA 3. INTEGRACJA Z WARSTW OBSUGI ZDARZE
87
Nowoczesne metody technologii Ajax ...........................................................................88

Nowoczesne, progresywne i dyskretne skrypty ..................................................90
Wymagania JavaScript: plik oraz spis funkcji ...............................................................92
Bdny skrypt, oj, bdny! .............................................................................................93
Dyskretne usprawnienia ...............................................................................................98
Wyskakujce okna ....................................................................................................... 100
Elementy dynamiczne i innerHTML ...................................................................... 104
CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C
Wsppraca kodu JavaScript

z arkuszami stylw CSS i warstw prezentacyjn ................................................ 107
Ogromne witryny internetowe i obsuga wielu zdarze onload ............... 109
Wasne skrypty kontra gotowe struktury .................................................................... 111
Przykad kodu struktury jQuery .............................................................................. 113
Struktury znacznie uatwiaj uywanie technologii Ajax ............................. 117
Kilka sw odnonie struktur .................................................................................... 119
ROZDZIA 4. PROGRAMOWANIE APLIKACJI SIECIOWYCH
121
Aplikacje sieciowe obcione jarzmem przeszoci ................................................ 122

Jako oprogramowania i analiza jego elementw ....................................... 122
Wskazwki, reguy oraz standardy sieciowe .............................................................. 125
Reguy programowania ............................................................................................. 125
Lepsze formularze tworzone
za pomoc nowoczesnego kodu znacznikw .............................................. 126
Struktury dziaajce po stronie serwera oraz narzdzia szablonw ......... 130
Platforma Microsoft ASP.NET ........................................................................................... 134
Dane wyjciowe ASP.NET .......................................................................................... 137
Kontrolki HTML ASP.NET, kontrolki Web Control i inne ................................ 144
Zarzdzanie treci .............................................................................................................. 149
Podstawy systemu zarzdzania treci ................................................................ 150
System zarzdzania treci i czysta tre ............................................................ 150
Dane wyjciowe systemu zarzdzania treci i moduy ................................ 151
Szablony systemu zarzdzania treci ................................................................. 152
Tryb WYSIWYG dla autorw treci ......................................................................... 156
Firmy trzecie ................................................................................................................... 158
W jaki sposb podej do aplikacji sieciowych? ...................................................... 159
ROZDZIA 5. KRG STANDARDW
161
Organizacyjna opieszao ............................................................................................... 162

Wprowadzenie krgu ......................................................................................................... 164
Meneder standardw ............................................................................................... 164
Tworzenie i dokumentowanie standardw ....................................................... 165
Szkolenia i komunikacja ............................................................................................ 168
Proces przegldu jakoci ........................................................................................... 170
Wprawienie caoci w ruch ............................................................................................... 172
Utrzymywanie impetu ................................................................................................ 172
Podsumowanie ..................................................................................................................... 173
Cz II Studium przypadku
175
PRAKTYKA NIE OZNACZA DOSKONAOCI
177
Komunikacja ........................................................................................................................... 178

Zdolno do adaptacji ........................................................................................................ 178
Wytrwao ............................................................................................................................. 179
Prby i cierpienia .................................................................................................................. 179
Spis treci
ROZDZIA 6. EVERYTHINGTORI.COM
181
Kulisy ......................................................................................................................................... 182

Zagbienie si w wiat Tori Amos ........................................................................ 184
Rozpoczcie waciwego procesu tworzenia projektu .................................. 184
Zbudowanie szkieletu ................................................................................................ 185
Budowanie witryny ..................................................................................................... 192
Kulisy arkuszy stylw CSS .......................................................................................... 196
Uruchomienie witryny ........................................................................................................ 205
Spotkanie z projektantem Philipem Fierlingerem ................................................... 206
Utwr kocowy ..................................................................................................................... 210
ROZDZIA 7. AOL.COM
213
Utworzenie zespou skazanego na sukces i unikanie poraek ........................... 215

Co poszo le? ................................................................................................................ 215
Projektowanie z uwzgldnieniem wydajnoci ......................................................... 237
Oszacowanie wydajnoci
przed utworzeniem choby jednego wiersza kodu ................................... 238
Obawy zwizane z wydajnoci ............................................................................. 242
Wywiad: David Artz ..................................................................................................... 247
Powtarzalne kroki ........................................................................................................ 249
Projekt i architektura systemu ......................................................................................... 250
System wzajemnej pomocy ..................................................................................... 250
Wykonywanie procedur poredniczcych ......................................................... 251
Rozwaania dotyczce organizacji pracy ............................................................ 252
Magia interfejsu .................................................................................................................... 254
Harmonizacja kodu znacznikw z deklaracj DOCTYPE ............................... 254
Najlepsze rozwizania w zakresie CSS ................................................................. 258
Arkusze stylw CSS uatwiajce dostpno treci ......................................... 261
Wydajno w rzeczywistym produkcie ................................................................ 267
Podsumowanie ..................................................................................................................... 269
Posowie ............................................................................................................................................... 271
Dodatek A Docelowe przegldarki internetowe .................................................................. 273
Dodatek B Dostpno treci ....................................................................................................... 279
Dodatek C Wskazwki dotyczce wydajnoci witryny internetowej ........................... 281
Dodatek D Przewodnik po selektorach CSS ........................................................................... 291
Skorowidz ............................................................................................................................................ 295
4
Programowanie
aplikacjisieciowych
Profesjonalnezespoyprogramistwbudujcewitrynyinternetowenieograniczaj
si dotworzeniatrecistatycznych,aleoferujtakeaplikacjedynamiczneiwitryny
wykorzystujcesystemyzarzdzaniatreci(CMS).Wtakimprzypadkuuywany
jestkodwarstwyinterfejsuuytkownika(UI),podzielonydalejnakodj zyka
znacznikw,arkuszestylwCSSorazskryptyJavaScript.ZnaczenieUIpowoduje,
egotowawitrynainternetowajestwi ksza,aponadtowyduajsi okresyczasu
mi dzyznaczcymimodernizacjamiwitryny.Powstajewi cpytanie,dlaczegonie
pokusisi oograniczeniezalenociodprogramistwtworzcychkodwewn trzny
bdekspertwzzakresusystemwCMS,skoroprogramiciUImoglibysamo
dzielniezarzdzazmianamiprzeprowadzanymiwUI?
Jeelidodadotegowyzwaniawynikajcezkoniecznociintegracjizelementami
opracowanymiprzezfirmytrzecieorazstarszymiinowszymielementamisieciowymi
organizacji,towyraniewidaniesko
czonepokadykorzycipyncychzestosowania
standardwsieciowych.Wrzeczywistociwszystko,cojesttworzonewramach
koduinterfejsuuytkownikako
cowego,powinnozostazaimplementowane
zuyciemtechnikzgodnychzestandardamisieciowymi.
122
Aplikacje sieciowe
obcione jarzmem przeszoci
Wielu programistw aplikacji sieciowych nauczyo si jzyka HTML w latach dziewidziesitych ubiegego stulecia i od tamtego okresu nie uaktualnili stosowanych technik
programowania w celu wdroenia nowych technologii. Przedstawienie nowych
poziomw separacji i cisego uywania standardw lub specyfikacji aplikacji programicie, ktry ksztaci si w okresie powszechnego stosowania zupy znacznikw,
moe by naprawd ciekawym dowiadczeniem. Nowoczesne podejcie bazujce na
standardach sieciowych jest znacznie czystsze, efektywniejsze i logiczniejsze. Zwykle
zmierza rwnie do postawienia programisty sieciowego przed sytuacj albo to dziaa,
albo nie dziaa czsto wskrzeszajc w nim zainteresowanie programowaniem
interfejsu.
Z definicji witryny internetowe opierajce si na standardach sieciowych d
do cisego przestrzegania standardw, zawsze gdy tylko jest to moliwe. Kiedy
oprogramowanie sieciowe umieszcza lub nawet tworzy kod warstwy UI, naley
oczekiwa takiego samego poziomu dyscypliny. W duszej perspektywie czasu
takie podejcie przyniesie korzyci witrynie oraz aplikacji poprzez ograniczenie ryzyka,
ktre nieuchronnie pojawia si wraz z kolejnymi modyfikacjami. Podejcie wykorzystujce standardy sieciowe zwiksza poziom zgodnoci i dostpnoci treci witryny
oraz redukuje poziom uywanych zasobw i wysiku, ktry trzeba woy w zmian
interfejsu uytkownika aplikacji lub statycznych fragmentw witryny.
Problem polega jednak na tym, e wci istnieje ogromna ilo archaicznego, niespjnego lub po prostu przestarzaego kodu, ktry zosta zaimplementowany w oprogramowaniu sieciowym. Programici musz bardzo dokadnie przyjrze si zarwno
wasnym, jak i komercyjnym implementacjom oprogramowania w celu okrelenia jak
i kiedy oprogramowanie witryny moe zyska na zastosowaniu standardw sieciowych.
Jako oprogramowania i analiza jego elementw

W celu waciwego okrelenia natury sytuacji, absolutnie kady element oprogramowania
sieciowego w projekcie powinien zosta poddany ewidencji, odpowiednio skatalogowany i okrelony pod wzgldem zgodnoci (bd jej braku) ze standardami sieciowymi.
Problemy zwizane z tworzeniem aplikacji sieciowej

Z perspektywy standardw sieciowych, problemy zwykle pojawiaj si tam, gdzie
programici aplikacji musz utworzy warstw UI w obszarach zwizanych z obsug,
przeprojektowywaniem, delikatnymi zmianami w projekcie oraz oczywicie w kwestiach
dotyczcych dostpnoci treci i moliwoci przegldarek internetowych.
ROZDZIA 4
Zazwyczaj programista sieciowy albo wrzuca kod do szablonw przygotowanych przez

zesp projektantw, albo prbuje dopasowa wygld i dziaanie do przedstawionego
w statycznej reprezentacji aplikacji. Istniej rwnie pakiety oprogramowania, ktre
generuj kod UI, pozwalajc na rne poziomy dostosowania go do wasnych potrzeb.
Ponadto, poniewa programici sieciowi tworz rwnie wasny kod interfejsu, skutkuje
to otrzymaniem rnego stopnia zgodnoci ze standardami czasami cakiem
wietnego i wystarczajcego, a w innych przypadkach wrcz przeciwnie.
Oczywicie jest to do zoony problem o wielu aspektach, ale kluczowy jest fakt,
e struktury aplikacji, materiay edukacyjne, wygenerowany kod oraz narzdzia powanie cierpi w wyniku braku demonstracji najlepszych praktyk i rozwiza. Wielu
programistw posuguje si rnymi formami zintegrowanego rodowiska programowania (ang. Integrated Development Environment IDE), bibliotekami kodu lub
kopiuje kod, ktry moe, ale nie musi opiera si na najlepszych rozwizaniach.
W wyniku takiej sytuacji kod wewntrzny jest tworzony z uyciem niewaciwych
znacznikw wymieszanych wraz z warstw prezentacyjn, w projektach stosuje si
ukady bazujce na tabelach, a ponadto dodatkowe i zupenie zbdne znaczniki.
Interfejsy czsto zawieraj skrypty bdnie napisane lub utworzone pod ktem
okrelonej przegldarki internetowej, lub skrypty innych interfejsw w ogle nie s
brane pod uwag. W takim przypadku zmiana projektu staje si prawdziwym
problemem a wcale nie musi nim by.
Warstwa UI jest albo utworzona w wyniku pracy czowieka, albo moe by wygenerowana poprzez oprogramowanie (przy minimalnym poziomie wysiku) i lepo zaakceptowana przez uytkownika.
Powstaje pytanie: jak duo wysiku trzeba woy w jej opracowanie? Poniewa
wspczeni inynierowie aplikacji, platformy serwerowe i narzdzia zwykle domylnie
nie tworz kodu interfejsu zgodnego ze standardami sieciowymi, to zadanie zapewnienia odpowiedniej jakoci spado na zesp. Osignicie zgodnoci ze standardami
sieciowymi interfejsu aplikacji i systemu zarzdzania treci wymaga woenia duego
wysiku. Ustanowienie zbioru najlepszych praktyk dotyczcych kodu UI w oprogramowaniu dziaajcym po stronie serwera moe by punktem zwrotnym, od ktrego
rozpocznie si usprawnianie oprogramowania.
Trzeba zdawa sobie spraw z istnienia prawdziwego kompromisu midzy rozwizaniem, ktre pozwoli na uniknicie problemw w przyszoci, a po prostu naciskiem na jak najszybsze wydanie produktu. Z perspektywy duszego okresu czasu
denie do uzyskania UI zgodnego ze standardami sieciowymi powoduje ograniczenie
ryzyka zwizanego z brakiem spjnoci warstw logiki aplikacji, prezentacji i UI. Jednake
implementacja standardw moe czasami zabra duo czasu.
123
124
Kryteria wartociowania
W przypadku oceny kadego dokumentu aplikacji naley wzi pod uwag kilka
czynnikw:
Skd pochodzi dana warstwa UI?
Jaka jest struktura kodu interfejsu?
Czy kod to poprawny HTML lub XHTML?
Czy w dokumencie znajduje si deklaracja DOCTYPE, a dokument jest generowany w trybie standardw czy dziwactw?
W jaki sposb zostay zdefiniowane aspekty prezentacyjne?
Czy programici aplikacji zrozumieli kod UI?
Czy programici UI zrozumieli kod wewntrzny?
Ilu czonkw zespou zrozumiao sposb integracji UI oraz kodu wewntrznego?
W jaki sposb jest generowany kod znacznikw?
Czy oprogramowanie odwouje si do jakiegokolwiek biecego kodu prezentacyjnego, takiego jak pliki arkuszy stylw CSS? Jeeli tak, to do jakich plikw?
Czy te pliki zmieniaj si w projekcie?
Jak blisko kod interfejsu jest powizany z wewntrzn logik biznesow
(o ile w ogle jest powizany)?
Czy istnieje jakikolwiek sposb abstrakcji kodu UI od kodu aplikacji?
Jeli aplikacja generuje kod interfejsu, czy istnieje jakikolwiek sposb kontroli
tego procesu?
Jeeli uytkownik ma moliwo generowania treci lub kodu, to czy istnieje
jakikolwiek sposb zablokowania tego, co uytkownik moe zrobi?
Jak duy wysiek trzeba bdzie woy w modyfikacje warstwy UI?
Jak due jest ryzyko zwizane z modyfikacj warstwy UI aplikacji?
Jakie s potencjalne korzyci i wady wynikajce z zaniechania przeprojektowania
aplikacji?
Jakie s ograniczenia zwizane z tym, e oprogramowanie firm trzecich moe
wymaga dostosowania do wasnych potrzeb?
Szczerze mwic, to jest ogromna ilo informacji, ktre trzeba zebra, przeanalizowa,
a nastpnie rozway.
Czy aplikacja moe zosta uaktualniona?

Na koniec trzeba wspomnie, e w przypadku czci oprogramowania by moe
niewiele bdzie mona zdziaa. Taka sytuacja moe wynika z faktu, e po prostu nie
bdzie moliwoci uaktualnienia kodu interfejsu do postaci zgodnej ze standardami
sieciowymi. Powodem mog by albo kwestie zwizane z architektur aplikacji,
ROZDZIA 4
albo nieakceptowanym poziomem ryzyka zwizanego z uaktualnieniem. W takich

przypadkach wysiki staj si wiczeniem w zakresie kompromisw. Albo potrzeby
stan si powodem utworzenia dugoterminowego planem nastawionego na
rozwizanie problemw, albo zarwno uytkownicy, jak i biznes bd cierpieli z
powodu bolesnego procesu uaktualnienia.
Midzy krtkoterminowym wysikiem i ryzykiem oraz dugoterminowym wysikiem
i ryzykiem wystpuj wyrane kompromisy. Niektre rozwizania czciowe zakadaj
albo implementacj czci stylw (nawet wyodrbnionych z okrelonych plikw CSS),
albo powierzchowne ponowne opracowanie wygldu i dziaania danej aplikacji.
Jednak z perspektywy dugiego okresu czasu organizacja bdzie z tego powodu
cierpiaa, poniewa coraz trudniejsze stanie si wprowadzanie zmian w aplikacji.
Te zmiany stan si przypadkami szczeglnymi i za kadym razem bd wymagay
szczeglnego podejcia. Punkt krytyczny bdzie inny dla kadej organizacji.
Wskazwki,
reguy oraz standardy sieciowe
Aplikacje sieciowe opracowane przez organizacj mog osiga korzyci wynikajce
ze stosowania standardw sieciowych, wytycznych programowania, punktw wzajemnego oddziaywania oraz wskazwek dotyczcych sposobu pisania oraz stylu kodu UI.
Reguy programowania
Istniej standardy dotyczce jakoci i spjnoci programowania, podobne do czsto
stosowanych przez programistw w kodzie wewntrznym aplikacji. Jednak w chwili
obecnej zostay rozszerzone na kod interfejsw, co moe by zupen nowoci.
Kady kod UI powinien spenia podstawowe, najlepsze praktyki dotyczce
standardw sieciowych, czyli midzy innymi stosowa styl POSH, arkusze stylw
CSS oraz dyskretny kod JavaScript (jak to opisano w rozdziaach odpowiednio
1., 2. i 3.).
Kluczowe znaczenie ma tworzenie kodu niezalenego od rodzaju przegldarek
internetowych, zapewniajcego dostpno oraz umoliwiajcego (w razie
potrzeby) eleganck degradacj funkcji.
Programy warstwy UI powinny odwoywa si do klas CSS i atrybutw ID poprzez
wycignicie ich z gbi logiki aplikacji do innych, atwo dostpnych miejsc kodu.
W ten sposb przeprowadzanie modyfikacji informacji prezentacyjnych niesie
ze sob minimalne ryzyko dla aplikacji. Wymienione klasy CSS i atrybuty ID mog
by powierzchownymi waciwociami klas obiektu, przechowywane w plikach
konfiguracyjnych lub zmiennych o zasigu aplikacji, co umoliwia ich atw
zmian w przyszoci.
125
126
Naley za wszelk cen unika stosowania osadzonych w kodzie stylw bd

innych elementw prezentacyjnych.
W kwestii aplikacji JavaScript warto wsppracowa z programistami interfejsu,
tak aby maksymalnie wspdzieli skrypty i unika zwizanych z nimi konfliktw.
Opracowa najprostszy z moliwych i semantyczny kod znacznikw aplikacji.
Utworzy proste, standardowe reguy CSS formularzy, tak aby po dodaniu nowych
formularzy zostay w nich zastosowane style CSS bez potrzeby woenia wikszego
wysiku.
Dziki stosowaniu powyszych wskazwek oraz tworzeniu czystego, rozdzielonego
kodu zgodnego ze standardami sieciowymi, programista zagwarantuje, e aplikacja
i oprogramowanie o znaczeniu krytycznym dla biznesu nie bdzie wymagao duych
bd ryzykownych modyfikacji podczas kolejnego przeprojektowania.
Niestety, wymienione powyej wskazwki czsto odbiegaj od tego, co znajduje si
w pakietach oprogramowania, narzdziach oraz kodzie generowanym przez IDE
lub edytory typu WYSIWYG. Te narzdzia zwykle pozwalaj programistom jedynie
na usunicie z kodu ustawie prezentacyjnych, umieszczenie warstwy prezentacyjnej
w klasach CSS, itp. Analiza alternatywnych ustawie lub eksperymenty z funkcjami
narzdzia pozwalajce na osignicie podanych wynikw mog wymaga wikszej
iloci czasu i wysiku. Jednak bardzo czsto wystarczy powzi proste kroki pozwalajce
na oddzielenie logiki aplikacji od kodu wewntrznego.
Lepsze formularze tworzone

za pomoc nowoczesnego kodu znacznikw
Wikszo aplikacji sieciowych zawiera w sobie pewne rodzaje formularzy. Aby zapewni
tym formularzom elegancki ukad, programici najczciej uywaj tabel HTML.
Chocia stosowanie tej techniki waciwie nie jest bdne, to trzeba przypomnie,
e tabele zostay opracowane z myl o umieszczaniu w nich danych tabelarycznych.
Poniewa formularz nie zawiera tego rodzaju danych, to nie ma najmniejszego powodu
do stosowania tabeli. Ponadto tabele czsto zawieraj atrybuty prezentacyjne, takie
jak bgcolor, align i width, oraz nie oferuj takich korzyci w kwestii dostpnoci
treci, jakie mona uzyska stosujc podejcie zgodne ze standardami sieciowymi.
Formularze bardzo czsto uywaj take kodu po stronie serwera, ktrego zadaniem
jest umieszczenie pewnych wartoci w formularzu (wicej na ten temat zostanie
przedstawione w dalszej czci rozdziau).
Przykadowo: poniej przedstawiono kod wywietlajcy prosty formularz, ktry
zosta umieszczony w tabeli (zobacz rysunek 4.1):
<p>Prosz wypeni poniszy formularz:</p>
<p><b>Informacje o uytkowniku</b></p>
<form action="submit.php" method="post">
ROZDZIA 4
RYSUNEK 4.1.
Formularze s najczciej
umieszczane w tabelach
HTML i uywaj znacznikw
prezentacyjnych
<table width="300" border="0">

<tr>
<td bgcolor="#cccccc" width="30%" align="right">Imi:</td>
<td><input type="text" name="txtFName" size="30" /></td>
</tr>
<tr>
<td bgcolor="#cccccc" align="right">Nazwisko:</td>
<td><input type="text" name="txtLName" size="30" /></td>
</tr>
<tr>
<td bgcolor="#cccccc" align="right">Tytu:</td>
<td><input type="text" name="txtTitle" size="30" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Wylij" /></td>
</tr>
</table>
</form>
Dla porwnania, poniej znajduje si nowa wersja kodu powodujcego wywietlenie
tego samego formularza (zobacz rysunek 4.2):
<p>Prosz wypeni poniszy formularz:</p>
<form action="submit.php" method="post">
<div id="formBlock">
<fieldset>
<legend>Informacje o uytkowniku</legend>
<p>
<label for="txtFName">Imi:</label>
<input type="text" id="txtFName" tabindex="1" />
</p>
<p>
127
128
RYSUNEK 4.2.
Stosowanie nowoczesnego
kodu znacznikw
powoduje, e tworzenie
prostych formularzy
jest zdumiewajco atwe
<label for="txtLName">Nazwisko:</label>
<input type="text" id="txtLName" tabindex="2" />
</p>
<p>
<label for="txtFName">Tytu:</label>
<input type="text" id="txtTitle" tabindex="3" />
</p>
<p><input type="submit" value="Wylij" tabindex="4" /></p>
</fieldset>
</div>
</form>
Przedstawiony powyej kod formularza moe zosta poczony z poniszym arkuszem
stylw CSS, ktry powinien by stosowany wzgldem kadego formularza na witrynie,
co zapewni im spjny wygld. Wprawdzie takie rozwizanie wymaga uycia dodatkowego
kodu, ale zastosowanie spjnego sposobu tworzenia formularzy i nadawania im stylu
bdzie ogromn zalet dla aplikacji.
h1 {
margin: 0;
font-weight: normal;
font-size: 15px;
}
#formBlock {
width: 300px;
}
#formBlock p {
margin: 0 0 3px;
}
p {
width: 100%;
}
ROZDZIA 4
label {
background-color: #ccc;
display: block;
float: left;
width: 28%;
text-align: right;
margin-right: 2px;
padding: 2px 0;
}
input {
float: left;
width: 65%;
margin-bottom: 4px;
margin-top: 1px;
padding: 1px;
}
input[type=submit] {
width: 10%;
}
fieldset {
border: none;
padding: 0;
margin: 0;
}
legend {
font-weight: bold;
margin-bottom: 12px;
}
Analiza nowego kodu XHTML napisanego z uwzgldnieniem standardw sieciowych
pokazuje zasadnicze usprawnienia w stosunku do formularzy utworzonych bez
zastosowania podejcia semantycznego:
W kodzie nie ma ju niepotrzebnej tabeli HTML sucej do nadania wygldu
formularzowi.
Formularz zawiera elementy <label>, ktre przypisuj etykiety faktycznym kontrolkom formularza doskonae rozwizanie z punktu widzenia dostpnoci,
funkcja opracowana z myl o uytkowniku i obsugiwana przez wikszo
przegldarek internetowych.
Zastosowany zosta atrybut tabindex uatwiajcy ustalenie kolejnoci przechodzenia midzy polami oraz zwikszajcy dostpno strony za pomoc klawiatury.
Formularz zosta zgrupowany w znaczniku <fieldset> oraz oznaczony etykiet
za pomoc znacznika <legend>, ktry grupuje i opisuje formularz w celu zwikszenia jego dostpnoci.
129
130
Poniewa kod formularza jest czystszy i czytelniejszy, to po doczeniu do aplikacji

programici zajmujcy si jej obsuguj bd mogli atwiej odczytywa i modyfikowa ten formularz.
Struktury dziaajce po stronie serwera

oraz narzdzia szablonw
Jeeli chodzi o technologie skryptowe w Internecie, to dostpnych jest ich kilka, midzy
innymi PHP (PHP: Hypertext Preprocessor), klasyczne ASP (ang. Active Server Pages),
ColdFusion (opracowana przez firm Macromedia, ktra kilka lat temu zostaa przejta
przez Adobe). Wymienione platformy jzykowe suce do wykonywania zada
po stronie serwera posiadaj modele, ktre umieszczaj w tych samych plikach kod
interfejsu oraz kod wewntrzny aplikacji. W jednym wierszu kodu programici natykaj
si na kod wewntrzny umieszczony wewntrz zdefiniowanych ogranicznikw
(na przykad takich jak <%...%>), a nastpnie znajduj si standardowe znaczniki HTML.
Ponadto kod dziaajcy po stronie serwera bdzie uywa polece print w celu wygenerowania kodu HTML, czsto wymieszanego wraz z danymi prezentacyjnymi.
Dostpnych jest kilka platform oraz technik programowania na przykad ColdFusion
Fusebox (http://fusebox.org) oraz system szablonw PHP Smarty (http://smarty.php.net)
ktre zapewniaj modularyzacj warstw oraz prbuj rozdzieli logik biznesow
od kodu interfejsu. W tym celu tworz pliki szablonw zawierajce kod interfejsu,
podczas gdy kod wewntrzny zostaje umieszczony w oddzielnych plikach. W rzeczywistoci osignite wyniki s z reguy bardzo zrnicowane, poniewa kod dziaajcy
po stronie serwera nadal musi wyprodukowa interfejs uytkownika.
Pytanie, ktre mona zada pod koniec omawiania tego tematu, brzmi: jaka jest jako
kodu znacznikw tworzcego UI nawet po jego oddzieleniu od logiki biznesowej?
Wszelkie dostpne na wiecie warstwy oprogramowania aplikacji nie zdadz si na nic,
jeeli podstawowy kod HTML bdzie ama opracowane najlepsze rozwizania lub
zostanie umieszczony w plikach, ktrych programici tworzcy UI nie bd mogli
kontrolowa lub przez ktre nie bd mogli przebrn.
Proste kroki prowadzce

do tworzenia lepszych skryptw dziaajcych po stronie serwera
W przypadku wszystkich platform lub systemw wykorzystujcych szablony mona
powzi proste kroki, ktre mog ograniczy potencjalne szkody, nawet w przypadku
podstawowego PHP lub podobnych rodowiskach. W najbardziej podstawowym
sensie wszelkie dane wyjciowe aplikacji lub generowany kod UI bd przedmiotem
stosowania tych samych regu, ktre odnosz si do kodu UI nieuywajcego bazy
danych. Jedyna rnica polega na tym, e tego rodzaju kod jest po prostu generowany,
a nie tworzony rcznie przez programistw.
ROZDZIA 4
Warto zwrci uwag, e wyzwania zwizane z uzyskaniem czystego rozdziau logiki

biznesowej po stronie serwera od warstwy prezentacyjnej nie s jedynie domen jzyka
PHP. Wikszo jzykw programowania dziaajcych po stronie serwera wykorzystuje
dobre praktyki programowania i dyscyplin. Cech charakterystyczn, szczeglnie
w przypadku PHP, klasycznego ASP i ColdFusion, jest bardzo czsto osadzanie logiki
aplikacji w tych samych plikach, ktre zawieraj kod interfejsu, na przykad:
<?php
// Wywietlenie wynikw.
echo "<table border=\"1\" width=\"400\">";
while ($row = mysql_fetch_assoc($result)) {
echo "<tr valign=\"top\">";
echo "<td bgcolor=\"#ffffcc\"><b>$row['username']</b></td>";
echo "<td>$row['firstname']</td>";
echo "<td>$row['lastname']</td>";
echo "<td><font color=\"grey\">$row['notes']</font></td>";
echo "</tr>";
}
echo "</table>";
?>
Przedstawiony powyej kod wykonuje w PHP proste zadanie kolejno przechodzi
przez wiersze zbioru wynikowego zwrconego przez baz danych. Wikszo jzykw
skryptowych, w celu wywietlenia danych wyjciowych pobranych z bazy danych stosuje
podobne techniki do przedstawionej powyej, opierajc si na strukturze ptli. Oczywicie,
przedstawiony przykad jest may i bardzo prosty, ale moe on by umieszczony
gboko wewntrz innej struktury ptli bd skomplikowanej struktury ptli.
Zaprezentowany powyej kod (oraz inne, podobne kody dziaajce po stronie serwera)
ma kilka wad:
Elementy prezentacyjne zostay osadzone w kodzie ptli.
Zmiana projektu wizualnego bdzie wymagaa zmian w aplikacji. W tym celu
trzeba bdzie skorzysta z usug programisty, zamiast po prostu wprowadzi
zmiany w zewntrznym (z punktu widzenia aplikacji) pliku arkuszy stylw CSS.
Za kadym razem, gdy zajdzie potrzeba zmiany wygldu tabeli, programista bdzie
musia odszuka kod prezentacyjny i przeprowadzi modyfikacje bezporednio
w kodzie logiki aplikacji.
W atrybutach prezentacyjnych zastosowano znaki sterujce, poniewa atrybuty
w jzyku HTML uywaj znakw cudzysoww. Ten krok powoduje, e kod staje
si mniej czytelny i trudniejszy w zarzdzaniu.
W kadej tabeli znajdujcej si na witrynie trzeba bdzie rcznie wprowadzi
dane prezentacyjne.
131
132
Mimo e powyszy kod jest prosty, to demonstruje pomieszanie kodu wewntrznego

z warstw prezentacyjn. atwo sobie wyobrazi, jak mgby wyglda kod wraz
z zagniedonymi tabelami sucymi do utworzenia krawdzi i menu oraz stosujcy
inne atrybuty prezentacyjne dla kadej z kolumn Kod staby si zupenie nieczytelny.
Eleganck alternatyw jest nastpujcy kod:
<style type="text/css">
#results {
border: 1px solid #000;
width: 400px;
}
#results td {
border: 1px inset #000;
vertical-align: top;
}
td.username {
background-color: #ffc;
}
td.notes {
color: gray;
}
</style>
<?php
echo "<table id=\"results\">";
while ($row = mysql_fetch_assoc($result)) {
echo "<tr>";
echo "<td class=\"username\">$row['username']</td>";
echo "<td>$row['firstname']</td>";
echo "<td>$row['lastname']</td>";
echo "<td class=\"notes\">$row['notes']</td>";
echo "</tr>";
}
echo "</table>";
?>
W celu zachowania zwizoci, na powyszym fragmencie kodu przedstawiono tylko
blok <style> zawierajcy definicj arkuszy stylw CSS. Mona jednak dostrzec, e w celu
zmiany wygldu tabeli, czcionek lub sposobu wyrwnania treci w komrce tabeli nie
zachodzi potrzeba modyfikacji adnego wiersza kodu PHP. Przykad jest do szcztkowy,
ale naley pamita o jednym im bardziej skomplikowana logika biznesowa, tym
wiksze korzyci pyn z wyrzucenia informacji prezentacyjnych z logiki biznesowej.
ROZDZIA 4
UWAGA
W przedstawionej powyej tabeli idealnym rozwizaniem byoby rwnie uycie wiersza
<th> w celu utworzenia nagwkw opisujcych kolumny. W ten sposb mona zwikszy zarwno poziom dostpnoci treci strony, jak i semantyczno kodu. Jeeli projekt
graficzny nie zakada wywietlania nagwkw tabeli to zawsze mona je ukry za pomoc
arkusza stylw CSS. Pozostan one jednak dostpne dla urzdze wspomagajcych.
Problem
Zalet stosowania technologii, takich jak PHP lub nawet klasyczne ASP, jest fakt,
e programista sieciowy zachowuje pen kontrol nad sposobem generowania kodu UI
zaleta, ktrej nie naley lekceway. Koszty zwizane z utrzymaniem i obsug
interfejsu uytkownika aplikacji mog sta si problemem w zespole, gdy zachodzi
prawdopodobiestwo, e kod UI nie zosta napisany przez programistw tego zespou.
W takich przypadkach bardzo wana jest przede wszystkim komunikacja oraz ponowna
ocena. Oczywicie, s to przecie procedury biznesowe, a nie techniki programowania,
ale bardzo czsto te podstawowe procesy po prostu nie zachodz.
Problem polega na tym, e we wspczesnym wiecie coraz wicej nowych produktw i technologii zyskuje szerok akceptacj, a wic proces oceny oraz programowania
UI sta si znacznie trudniejszy ni wczeniej. W przypadku zoonych aplikacji biznesowych jzyki skryptowe na przykad te omwione dotd w ksice wypady
z obiegu, poniewa sama platforma nie narzuca architektury warstwom aplikacji.
Ciarem spoczywajcym na programistach jest stosowanie strukturalnych wzorcw
projektowych, ktre wymagaj uywania dobrych praktyk w zakresie programowania.
Starsze narzdzia, takie jak PHP i ColdFusion, byy czsto znacznie bardziej dostpne
dla programistw lub projektantw UI ni niektre nowsze technologie.
Zasadniczy problem pozosta, a w przypadku wikszoci nowych rodowisk programowania dziaajcych po stronie serwera sta si nawet jeszcze powaniejszy. Problem
dotyczy zwaszcza sytuacji, gdy osadzony skrypt dziaajcy po stronie serwera,
na przykad PHP lub klasyczne ASP (obecnie ASP.NET) stosujcy podejcie warstwowe,
prbuje oddzieli logik biznesow od kodu wewntrznego. Problem moe rwnie
wystpi, gdy jzyk XSLT jest uywany do generowania kodu XHTML lub HTML z XML.
Jaki jest wic ten zasadniczy problem? Kiedy inynierowie oprogramowania budowali
coraz dojrzalsze i dziaajce na warstwach rodowiska interfejsw, takie jak Java,
ASP.NET lub XML/XSLT, to programici interfejsw nie poznali elementw odpowiedzialnych za interfejs w tyche rodowiskach programistycznych i najczciej
nigdy nie poznaj.
133
134
Zwykle elementy odpowiedzialne za interfejs w tych platformach oprogramowania

generuj dane wyjciowe, w postaci takiego samego, przestarzaego i niespeniajcego
standardw kod interfejsu, ktry ju wczeniej by stosowany. Prawdziwym wyzwaniem
jest wic implementacja standardw sieciowych w interfejsie tego rodzaju aplikacji.
Ostrzeenie przed kodem generowanym po stronie serwera

Cz nowoczesnych rodowisk aplikacji posiada funkcje zaprojektowane w celu
pomocy podczas usuwania zbdnego generowania kodu HTML lub innego kodu
UI z aplikacji. Koncepcja polega na tym, aby kod HTML (lub XHTML) mg zosta w atwy
sposb wyizolowany, a nastpnie dynamicznie wygenerowany za pomoc polece
przekazanych do jzyka programowania pakietu narzdziowego. Zazwyczaj stosowane
s waciwoci przypisywane zbiorom danych zwracanych przez zapytania do bazy
danych lub inne podobne struktury kontrolujce dynamiczne tworzenie danych
wyjciowych.
Problem zwizany z tego rodzaju podejciem to fakt, e zarwno projekt, jak i ostatecznie generowany kod opieraj si w duym stopniu na decyzjach programistw
tworzcych oprogramowanie uywane do abstrahowania i generowania kodu. Dlatego
te sukces jest uzaleniony rwnie od wysikw programisty majcych na celu
poznanie funkcji UI dostpnych w uywanym oprogramowaniu. Rne platformy
oferuj zrnicowane poziomy jakoci. Programici musz wic pozna kod rdowy
i faktycznie obserwowa struktur kodu znacznikw po jego wygenerowaniu, zamiast
po prostu przyglda mu si, gdy kod znacznikw jest generowany dynamicznie.
W wikszoci przypadkw nic nie jest w stanie zastpi czynnika ludzkiego. Przejrzenie
rzeczywistych dziaaniach realizowanych przez kod i zorientowanie si w nich wymaga
wykonania kilku dodatkowych krokw. Czasami trzeba bdzie wprowadzi kilka
poprawek, a innym razem nie bdzie to konieczne. Skoro Czytelnik dotar a do tego
miejsca ksiki, to powinno by dla niego oczywiste, e utworzenie interfejsu zgodnego ze standardami sieciowymi moe przynie wymierne korzyci.
Platforma Microsoft ASP.NET

Jedn z platform, ktra zostaa szeroko zastosowana zwaszcza w duych organizacjach,
jest do krytycznie przyjta technologia firmy Microsoft o nazwie ASP.NET (nastpca
klasycznego ASP). Klasy podstawowe .NET, obiekty oraz API maj ogromne moliwoci.
Technologia ASP.NET wymusza poprzez stosowany model uywanie warstw kodu,
ktre oddzielaj do pewnego stopnia logik programu oraz baz danych od plikw
interfejsu uytkownika posiadajcych rozszerzenie .aspx. Wymienione pliki zawieraj
kod HTML oraz wasne znaczniki ASP.NET, do ktrych powrcimy w dalszej czci
rozdziau. Teoretycznie programici UI ucz si wymienionych znacznikw w celu
uzyskania kontroli nad interfejsem i utworzenia punktw zaczepienia dla programistw
kodu wewntrznego. To jest faktycznie moliwe, ale w rzeczywistoci rzadko osigane.
ROZDZIA 4
Zesp programistw mgby podj niemia decyzj dotyczc edukacji zespou

programistw UI, a nastpnie wsppracowa z nimi podczas nauki, natomiast zesp
UI mgby wykaza motywacj do nauki. Takie rzeczy si zdarzaj.
Zazwyczaj, aplikacje sieciowe ASP.NET s tworzone w rodowisku IDE o nazwie
Microsoft Visual Studio.NET. Wymienione rodowisko IDE oferuje okno dziaajce
w trybie WYSIWYG uzupeniajce widok kodu rdowego oraz pozwalajce programistom na szybkie przeciganie obiektw na stron, ustawianie waciwoci, take tych
dotyczcych atrybutw prezentacyjnych bez koniecznoci napisania ani jednego
wiersza kodu. Te ustawienia generuj kod HTML.
T O NIE TAK , E CZEPIAMY SI PLATFORMY ASP.NET

W rzeczywistoci jest wrcz na odwrt. Omwione w dalszej czci rozdziau przykady
zaprezentuj potne moliwoci i wszechstronno ASP.NET oraz podobnych
platform w rkach osoby, ktra doskonale wie, w jaki sposb posugiwa si oprogramowaniem w celu uzyskania kodu zgodnego ze standardami sieciowymi. Dostpnych jest wiele podobnych platform, a wikszo z nich pozwala na modyfikacj
sposobu generowania danych wyjciowych. Wymaga to jednak woenia wysiku
w celu odszukania i poznania funkcji, ktre pomagaj w wygenerowaniu wysokiej
jakoci kodu interfejsu.
Midzy poszczeglnymi platformami koncepcje s niemal takie same. Konieczne
jest woenie pewnego wysiku i powicenie czasu na zrozumienie, jakie dane zostan
wygenerowane, zamiast zwykego stwierdzenia to z grubsza wyglda dobrze. W ten
sposb zyskuj wszyscy uytkownicy witryny, firma i caa reszta. Podczas pracy
nad aplikacj programici bywaj cakiem mocno spici i czsto nie przejmuj si
ostatnimi krokami. Oczywicie, istniej wyjtki, ale ta sekcja nie jest przeznaczona
dla takich indywidualnoci.
Z punktu widzenia standardw sieciowych istnieje kilka kwestii, na ktre trzeba zwrci
uwag, uywajc Visual Studio.NET, zwaszcza w wersji wczeniejszej ni 2005, oraz
kodu ASP.NET generowanego przez serwer:
Wikszo przykadw i materiaw edukacyjnych ASP.NET zawiera nieprawidowy kod.
Visual Studio.NET 2003 oraz wczeniejsze wersje maja z saw z powodu przepisywania i zmiany formatowania kodu HTML strony (kiedy programista przejdzie
do trybu graficznego), nawet jeli zostaa utworzona i starannie dopracowana
w innej aplikacji bd zwykym edytorze tekstowym przez programist UI.
Formularze i kontrolki danych mog by znacznikami ASP.NET, ktre bardzo czsto maj osadzone w nich atrybuty prezentacyjne. Wygenerowany kod rdowy
najczciej nie jest zgodny z XHTML lub HTML, cho w wersji 2005 zanotowano
135
136
na tym polu ogromn popraw. Jeeli programista nie woy dodatkowego wysiku
w nadzr generowanych danych wyjciowych, to wymienione atrybuty znacznikw
bd miay osadzon olbrzymi ilo danych prezentacyjnych.
W wersjach 2003 i wczeniejszych, kiedy programista uywa wbudowanych
narzdzi do tworzenia strony, tak utworzona strona HTML bya wywietlana
w trybie dziwactw, poniewa deklaracja DOCTYPE doczona do dokumentu
nie zawieraa URI.
ASP.NET zawiera funkcj inteligentnego generowania, ktra oznacza, e serwer
podejmuje decyzje dotyczce rodzaju wysyanej do przegldarki internetowej
warstwy kodu UI na podstawie ustawie dokonanych po stronie serwera. Serwer
zgaduje poziom obsugi danej technologii przez przegldark internetow.
Kod ASP.NET dziaajcy po stronie serwera uywa duych iloci atrybutw ID
w kontrolkach osadzonych na stronie. Najczciej, w zalenoci od kontekstu,
wymienione atrybuty ID maj dynamicznie zmieniane nazwy na podstawie ich
pooenia w dokumencie. Dlatego te programici CSS i JavaScript maj znacznie
utrudnione zadanie w kwestii odwoywania si do obiektw strony poprzez ich
wartoci ID. I nie ma tutaj znaczenia, e taki sposb odwoywania jest otwarty,
rozpoznawany wszdzie i zgodny ze standardami sieciowymi. W niektrych
przypadkach zastosowanie klasy CSS moe by odpowiednim rozwizaniem.
Mona rwnie sprbowa zastosowa wymagany atrybut ID elementowi nadrzdnemu, a odwoa si do danego obiektu poprzez kontekst. Idealnym wyjciem
jest, gdy projektanci interfejsu i programici kodu wewntrznego wsppracuj
ze sob podczas ustawiania atrybutw ID dla interfejsu uytkownika. Wwczas
bdzie to najlepszy sposb wykorzystania moliwoci kodu zarwno interfejsu
jak i wewntrznego ale takie rozwizanie nie jest dostpne w kadym przypadku.
Warto zwrci uwag na jeden interesujcy fakt. Mianowicie, wymienione problemy
mona pokona wkadajc dodatkowy wysiek oraz powicajc wicej czasu i uwagi aspektom kodu interfejsu uytkownika.
WSKAZWKA
Jednym ze sposobw poradzenia sobie z funkcj inteligentnego generowania jest
ustawienie opcji konfiguracyjnej ClientTarget wartoci Uplevel. W ten sposb ASP.NET
przestanie zakada, e jedyna przegldarka oferujca zaawansowane funkcje to Microsoft
Internet Explorer, i zacznie wysya zaawansowany kod do wszystkich. Jednak takie rozwizanie powoduje powstanie problemw z niektrymi funkcjami, zwaszcza dotyczcymi ASP.NET
1.1 i JavaScript. Bd one obsugiwane jedynie przez przegldark IE, poniewa Microsoft
w pewnych miejscach zastosowa kod obsugiwany tylko i wycznie przez t przegldark.
Naley zachowa szczegln ostrono i dokadnie przetestowa aplikacj ASP.NET jeszcze
przed jej wdroeniem. Co wicej, wymienione funkcje zostay w pewnym stopniu zmienione
w ASP.NET 2.0 kolejny powd do wykonywania wczesnych i czstych testw.
ROZDZIA 4
D UE USPRAWNIENIA W ASP.NET 2.0

Zarwno w ASP.NET 2.0 jak i Visual Studio.NET 2005 firma Microsoft podja due wysiki,
aby generowany kod by w jeszcze wikszym stopniu zgodny ze standardami sieciowymi i zapewnia wiksz dostpno. Inne wprowadzone usprawnienie polega
na tym, e nowa wersja rodowiska IDE po przejciu do trybu graficznego przepisuje
(modyfikuje) znacznie mniejsz ilo kodu.
Kod kontrolek i formularzy generowany automatycznie przez platformy Visual Studio.NET
i ASP.NET jest praktycznie zgodny z jzykiem XHTML w wersji Transitional, co jest
pochodn cisej natury specyfikacji. Jednak programista nadal musi woy dodatkowy
wysiek, aby unikn generowania osadzonych atrybutw prezentacyjnych i zwikszy
poziom dostpnoci kodu. W pewnych sytuacjach lepiej uy innych kontrolek, ktre
pozwalaj na wiksz elastyczno w zakresie generowanego kodu. Wymienione
opcje zostay znacznie usprawnione w ASP.NET 2.0.
Dane wyjciowe ASP.NET

Podobnie jak w przypadku innych jzykw, take ASP.NET umoliwia wywietlanie
danych wyjciowych pochodzcych z bazy danych. Jednak jedynym sposobem
zaimplementowanym przez Microsoft jest wykorzystanie znacznikw dziaajcych
po stronie serwera. Wszystkie wymienione znaczniki maj atrybuty prezentacyjne,
ktre w domyle miay pomoc programicie w nadzorowaniu prezentacyjnych
aspektw kodu XHTML danych wyjciowych. Poniej przedstawiono typowy przykad
kontrolek ASP.NET uywajcych funkcji o nazwie DataGrid do utworzenia danych
wyjciowych w postaci tabeli zawierajcej elementy pochodzce z bazy danych.
Kod zosta osadzony w pliku .aspx otoczonym pozosta czci dokumentu (X)HTML
(zobacz rysunek 4.3).
<asp:DataGrid ID="catalog" runat="server" AutoGenerateColumns="false"
CellPadding="2" Width="600" BorderColor="black">
<ItemStyle Font-Names="Arial" Font-Size="12px"
ForeColor="#800000" VerticalAlign="top" />
<AlternatingItemStyle Font-Names="Arial" Font-Size="12px"
ForeColor="#400000" BackColor="#cccccc" />
<HeaderStyle Font-Bold="true" Font-Names="Arial" Font-Size="15px"
ForeColor="white" BackColor="black" VerticalAlign="top" />
<Columns>
<asp:BoundColumn DataField="Name" HeaderText="Nazwa" />
<asp:BoundColumn DataField="abbr" HeaderText="Nazwa skrcona" />
<asp:BoundColumn DataField="typeof" HeaderText="Rodzaj" />
<asp:BoundColumn DataField="notes" HeaderText="Opis" />
</Columns>
</asp:DataGrid>
137
138
RYSUNEK 4.3.
Kontrolka DataGrid
w ASP.NET wywietlajca
dane
Powyszy kod powoduje zdefiniowanie tabeli danych wyjciowych oraz naprzemiennych

kolorw jej wierszy. Atrybuty opisujce wygld i sposb dziaania tabeli s po prostu
niektrymi z dostpnych opcji. W rzeczywistoci ilo tych opcji jest ogromna. Dane
rdowe tabeli s pobierane poprzez inn warstw kodu. Wynika to z separacji danych
od warstwy prezentacyjnej, ktra jest doskonaym rozwizaniem cho w przypadku
ASP.NET tylko teori. Poniej przedstawiono kod wygenerowany przez powyszy
fragment kodu:
<table cellspacing="0" cellpadding="2" rules="all" border="1"
id="catalog" style="border-color:Black;width:600px;border-collapse:
collapse;">
<tr valign="top" style="color:White;background-color:Black;
font-family:Arial;font-size:15px;font-weight:bold;">
<td>Nazwa</td><td>Nazwa
skrcona</td><td>Rodzaj</td><td>Opis</td>
</tr>
<tr valign="top" style="color:Maroon;font-family:Arial;
font-size:12px;">
<td>HyperText Markup Language</td><td>HTML</td><td>Kod
znacznikw</td>
<td>Uywany do tworzenia dokumentw. Charakteryzuje si lu n
skadni.</td>
</tr>
<tr valign="top" style="color:#400000;backgroundcolor:#
CCCCCC;font-family:Arial;font-size:12px;">
<td>eXtensible HyperText Markup Language</td><td>XHTML</td>
<td>Kod znacznikw</td><td>To HTML wraz ze skadni XML, a take
cisymi reguami stosowanymi w XML.</td>
ROZDZIA 4
</tr>
<tr valign="top" style="color:Maroon;font-family:Arial;
font-size:12px;">
<td>Kaskadowe arkusze stylw</td><td>CSS</td><td>Warstwa
prezentacyjna</td>
<td>Warstwa prezentacyjna witryny. Arkusze stylw s oddzielnymi
dokumentami i zawieraj informacje definiujce wygld
i dziaanie witryny internetowej.</td>
</tr>
<tr valign="top" style="color:#400000;backgroundcolor:#
CCCCCC;font-family:Arial;font-size:12px;">
<td>JavaScript</td><td>JS</td><td>Obsuga zdarze, interakcja,
zdarzenia</td>
<td>Czasami nazywana warstw obsugi zdarze, nadzoruje
interakcj z uytkownikiem, zdarzenia oraz sposb zachowania
stron internetowych.</td>
</tr>
</table>
Przedstawiona tabela jest do prosta, zawiera naprzemienne kolory wierszy, ustawienia rodziny czcionek oraz elegancko stosuje arkusze stylw CSS zamiast znacznikw
<font>. Jednak powyszy fragment kodu pokazuje przykad rodzaju kodu, ktry jest
powszechnie uywany do demonstracji kontrolki DataGrid. Arkusze stylw CSS s
osadzone w kodzie i wielokrotnie powtarzane, co wynika ze stosowania przez ASP.NET
atrybutw takich jak ForeColor, BackColor i innych. Ponadto pierwszy wiersz tabeli,
ktry z zaoenia ma by nagwkiem, to po prostu element <td> wraz z pogrubion
czcionk.
Zaprezentowany kod to powd do wstydu, poniewa w rzeczywistoci ASP.NET posiada
funkcje pozwalajce na przypisywanie klas CSS dla wikszoci wartoci. Ponadto
w ASP.NET 2.0 jest obsugiwany znacznik <th> sucy do generowania nagwka
w tabeli. Atrybut CssClass wystpuje w wikszoci znacznikw, a take istniej inne,
ktre pozwalaj na przypisywanie klas znacznikom w wielu sytuacjach. Warto zwrci
uwag na uycie w poniszym kodzie atrybutu UseAccessibleHeader kontrolki
DataGrid. le si stao, e programici musz stosowa wewntrz kodu wasne sposoby
na zwikszenie poziomu jego dostpnoci, ale taka jest natura bestii i na szczcie
odpowiednie funkcje s dostpne w ASP.NET 2.0.
W zaprezentowanym poniej fragmencie kodu dokonano drobnych modyfikacji kodu
ASP.NET, ktre pozwoliy na zwikszenie jakoci generowanych danych wyjciowych:
<asp:DataGrid ID="catalog" runat="server" AutoGenerateColumns="false"
CssClass="grid-class" UseAccessibleHeader="true">
<ItemStyle CssClass="item" />
<AlternatingItemStyle CssClass="item-alt" />
139
140
<HeaderStyle CssClass="item-header" />

<Columns>
<asp:BoundColumn DataField="Name" HeaderText="Nazwa" />
<asp:BoundColumn DataField="abbr" HeaderText="Nazwa skrcona" />
<asp:BoundColumn DataField="typeof" HeaderText="Rodzaj" />
<asp:BoundColumn DataField="notes" HeaderText="Opis" />
</Columns>
</asp:DataGrid>
Do powyszego fragmentu kodu mona doczy arkusz stylw CSS, na przykad taki:
.grid-class {
border: 1px solid black;
width: 600px;
border-collapse:collapse;
}
.grid-class td {
padding: 2px;
border: 1px solid black;
}
.item {
font: 12px arial, sans-serif;
color: #800;
}
th {
font: bold 15px arial, sans-serif;
background-color: black;
color: white;
text-align: left;
padding: 2px;
}
.item-alt {
font: normal 12px arial, sans-serif;
background-color: #ccc;
}
W takim przypadku wygenerowana tabela HTML bdzie sama jak poprzednia (zobacz
rysunek 4.4). Jednak uyty do jej utworzenia kod jest lepszy i bardziej zgodny ze
standardami sieciowymi. Dane wyjciowe XHTML zostay przedstawione poniej:
<table class="grid-class" cellspacing="0" rules="all" border="1"
id="catalog" style="border-collapse:collapse;">
<tr class="item-header">
<th scope="col">Nazwa</th><th scope="col">Nazwa skrcona</th>
<th scope="col">Rodzaj</th><th scope="col">Opis</th>
ROZDZIA 4
141
RYSUNEK 4.4.
Ta sama kontrolka
DataGrid w ASP.NET,
ale po zastosowaniu
usprawnie zwikszajcych
jej zgodno ze standardami
sieciowymi
</tr>
<tr class="item">
<td>HyperText Markup Language</td><td>HTML</td><td>
Kod znacznikw</td>
skadni.</td>
</tr>
<tr class="item-alt">
<td>eXtensible HyperText Markup Language</td><td>XHTML</td>
<td>Kod znacznikw</td><td>To HTML wraz ze skadni XML, a take
cisymi reguami stosowanymi w XML.</td>
</tr>
<tr class="item">
<td>Kaskadowe arkusze stylw</td><td>CSS</td><td>Warstwa
prezentacyjna</td>
</tr>
<td>JavaScript</td><td>JS</td><td>Obsuga zdarze, interakcja,
zdarzenia</td>
<td>Czasami nazywana warstw obsugi zdarze, nadzoruje
interakcj z uytkownikiem, zdarzenia oraz sposb zachowania
stron internetowych.</td>
</tr>
</table>
142
Warto zwrci uwag, e nowy kod zawiera znacznik <th> (kompletny wraz z atrybutem
scope) klasy CSS dla wikszoci elementw, cznie z obsug naprzemiennego koloru
wierszy, oraz nie ma (w wikszoci) osadzonych atrybutw prezentacyjnych. Mimo
e powyszy kod na pewno nie jest doskonay, to jednak stanowi due usprawnienie,
a poprawienie danych wyjciowych wymagao drobnych korekt technicznych. Ten
rodzaj modyfikacji wymaga pracy ze strony programistw interfejsu, ktrzy bd
znali techniki pracy z kodem wewntrznym. Albo programistw kodu wewntrznego,
ktrzy wiedz, jak programowa interfejs.
Znaczniki ASP.NET generujce dane wyjciowe na podstawie danych pochodzcych
z bazy danych posiadaj znacznie wicej opcji. W niektrych sytuacjach zastosowanie
innego znacznika moe by znacznie lepszym rozwizaniem, poniewa zapewni on
wikszy poziom kontroli nad generowanym kodem UI. Przykadowo: kontrolka Repeater
stanowi doskonay wybr podczas tworzenia prostych danych wyjciowych, gdy
definiuje ona ptl danych wyjciowych i uywa maych szablonw kodu, w ktrych
programista moe okreli to, co powinno by wywietlone:
<asp:Repeater id="catalog" runat="server">
<HeaderTemplate>
<table class="grid-class">
<tr>
<th>Nazwa</th>
<th>Nazwa skrcona</th>
<th>Rodzaj</th>
<th>Opis</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="item">
<td><%#Container.DataItem("name")%> </td>
<td><%#Container.DataItem("abbr")%> </td>
<td><%#Container.DataItem("typeof")%> </td>
<td><%#Container.DataItem("notes")%> </td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<td><%#Container.DataItem("name")%> </td>
<td><%#Container.DataItem("abbr")%> </td>
<td><%#Container.DataItem("typeof")%> </td>
<td><%#Container.DataItem("notes")%> </td>
</tr>
ROZDZIA 4
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Przedstawiony powyej kod generuje tabel HTML, ktra jest poczona z przedstawionym wczeniej arkuszem stylw CSS. Powstay kod jest czysty i pozbawiony wszelkich
niepotrzebnych atrybutw prezentacyjnych. Chocia kontrolka Repeater wymaga
uycia nieco wikszej iloci kodu, to jednak daje programicie wiksz kontrol
nad sposobem generowania danych wyjciowych (zobacz rysunek 4.5):
<table class="grid-class">
<tr>
<th>Nazwa</th>
<th>Nazwa skrcona</th>
<th>Rodzaj</th>
<th>Opis</th>
</tr>
<tr class="item">
<td>HyperText Markup Language</td>
<td>HTML</td>
<td>Kod znacznikw</td>
skadni.</td>
</tr>
<td>eXtensible HyperText Markup Language </td>
<td>XHTML</td>
<td>Kod znacznikw</td>
<td>To HTML wraz ze skadni XML, a take cisymi reguami
stosowanymi w XML.</td>
</tr>
<tr class="item">
<td>Kaskadowe arkusze stylw</td>
<td>CSS</td>
<td>Warstwa prezentacyjna</td>
</tr>
<td>JavaScript</td>
<td>JS</td>
<td>Obsuga zdarze, interakcja, zdarzenia</td>
143
144
RYSUNEK 4.5.
Uycie kontrolki
Repeater ASP.NET w celu
wygenerowania tej samej
tabeli, ale z czystszym
kodem, przy zachowaniu
takiego samego wygldu
<td>Czasami nazywana warstw obsugi zdarze, nadzoruje interakcj

z uytkownikiem, zdarzenia oraz sposb zachowania stron
internetowych.</td>
</tr>
</table>
To jest przykad czystego kodu HTML wygenerowanego przez logik ASP.NET dziaajc
po stronie serwera. Czytelnik przekona si wic, e rozsdne uywanie funkcji aplikacji
moe zapewni spory poziom kontroli nad sposobem generowania danych wyjciowych.
Przygldajc si kodowi bazujcemu na znacznikach staje si oczywiste, e firma
Microsoft przeniosa logik aplikacji do innych plikw, a uywanie plikw interfejsu
.aspx z kodem znacznikw nie jest z koncepcj. Niektre zespoy tworzce interfejsy
bd mogy operowa i modyfikowa kod znajdujcy si w plikach .aspx bez
koniecznoci poznawania tajnikw jzykw C# lub Visual Basic.NET.
Kontrolki HTML ASP.NET, kontrolki Web Control i inne

Istniej take inne obszary, na ktrych platforma ASP.NET powszechnie generuje kod
dla programistw. Zamiast uywa prostych znacznikw HTML, platforma ASP.NET
zawiera funkcje pozwalajce na wygenerowanie znacznikw HTML. Ponadto zapewnia
rwnie dostp do dokumentu po stronie serwera na sposb podobny do stosowanego
w modelu DOM, cho z uyciem wasnej skadni. Warto przeanalizowa przedstawiony
poniej kod oraz rysunek 4.6:
<script runat="server">
void Clicker(Object sender, EventArgs e)
{
Response.Redirect("http://www.cherny.com");
ROZDZIA 4
145
RYSUNEK 4.6.
Rne kontrolki serwerowe
platformy ASP.NET maj
moliwo dynamicznego
generowania danych
wyjciowych
}
void Page_Load()
{
if (!IsPostBack)
{
// Kontrolki Web Control.
myLink.Text = "Pro Web Book Dot Com";
myLink.NavigateUrl = "http://www.prowebbook.com";
myLink.CssClass = "webControl";
// Kontrolki tworzce cze HTML.
myOtherLink.InnerText = "NavigationArts";
myOtherLink.HRef = "http://www.navigationarts.com";
myOtherLink.Attributes.Add("class","htmlControl");
// Kontrolka tworzca etykiet.
myLabel.Text = "Hej, spjrz! Ten element jest bez znaczenia!";
// Kontrolka tworzca dosowny tekst.
myLiteral.Text = " (Nieprawidowe cze!)";
// Kontrolka tworzca pierwszy akapit HTML.
myPara.InnerHtml = "cze Pro Web Book " +
" <strong>rzdzi!</strong>";
// Kontrolka tworzca drugi akapit HTML.
myPara2.Visible = false;
}
146
}
</script>
<form id="form1" runat="server">
<ul>
<li><asp:HyperLink runat="server" id="myLink" /></li>
<li><a runat="server" id="myOtherLink" /></li>
<li><asp:LinkButton Text="Kliknij cze"
OnClick="Clicker" runat="server" /></li>
</ul>
<p><asp:Label id="myLabel" runat="server" /></p>
<p id="myPara" runat="server" />
<p id="myPara2" runat="server">Ten element bdzie ukryty.</p>
</form>
Powyszy kod zawiera wiele elementw, na ktre warto zwrci uwag, prezentujcych rne punkty widzenia:
Cao kodu ASP.NET musi by umieszczona w ramach elementu <form> wraz
z atrybutem runat="server", co umoliwi uycie kontrolki <asp:LinkButton />.
O ile bdzie taka moliwo, to naley unika stosowania wymienionej kontrolki.
Wyjanienie zostanie przedstawione wkrtce podczas omawiania wynikowego
kodu XHTML.
Warto zwrci uwag, e w nieuporzdkowanej licie formularza pierwszym
znacznikiem serwerowym ASP.NET jest kontrolka <asp:HyperLink />. To kontrolka
serwerowa Web Control, ktra generuje cze HTML oraz zapewnia programowy
dostp do wszystkich atrybutw i tekstu znacznika, jak to zaprezentowano w bloku
<script> znajdujcym si nad odwoaniem do myLink.
Warto take zauway, e drugie cze nie posiada atrybutu href i rwnie jest
programowo kontrolowane z poziomu znajdujcego si wczeniej bloku <script>.
Ta kontrolka HTML dziaa po stronie serwera (wskazuje to atrybut runat="server"),
ktry zapewnia programowy dostp do atrybutw elementu. W ten sposb
programista ma wiksz kontrol nad danymi wyjciowymi, ale mniejsz nad
funkcjami serwerowymi.
Dodanie atrybutu ID do kodu runat="server" powoduje, podobnie jak w przypadku
dowolnego znacznika HTML, uzyskanie dostpu do jego znacznikw. Takie rozwizanie
daje olbrzymie moliwoci, poniewa programista moe kontrolowa wywietlanie,
tre oraz atrybuty za pomoc jedynie kilku wierszy kodu umieszczonego w warstwie
programowej aplikacji.
Obie kontrolki tworzenia czy wirtualnie wykonuj te same zadania, natomiast kontrolki
Web Control dostarczaj dodatkowych funkcji w stosunku do zwykych kontrolek HTML.
Ponadto kontrolki rodzaju Web Control s w mniejszym stopniu przewidywalne
i zawieraj atrybuty prezentacyjne, ktre programici czsto wykorzystuj w celu
ROZDZIA 4
szybkiego wprowadzenia drobnych zmian. Podczas uywania kontrolek Web Control,

programici powinni ograniczy si do stosowania atrybutw CssClass i unika
uywania atrybutw prezentacyjnych. Aby osign wikszy poziom przewidywalnoci
wygenerowanych danych wyjciowych, warto stosowa kontrolki HTML, natomiast
kontrolki Web Control tylko w okrelonych przypadkach, gdy jest to niezbdne.
Warto szczeglnie dokadnie przyjrze si kocwce dokumentu:
<p><asp:Label id="myLabel" runat="server" /></p>
<p id="myPara" runat="server" />
<p id="myPara2" runat="server">Ten element bdzie ukryty.</p>
Wszystkie kontrolki s wykonywane po stronie serwera.
Blok <script> jest kodem dziaajcym po stronie serwera, ktry nie jest wysyany
do przegldarki internetowej uytkownika i najczciej znajduje si w oddzielnym
pliku. Zadaniem tego kodu jest programowe wygenerowanie przedstawionego poniej
kodu XHTML (oprcz innego kodu .NET, ktry w tej chwili nie ma znaczenia podczas
tych rozwaa):
<script type="text/javascript">
<!-var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<ul>
<li><a id="myLink" class="webControl" href="http://www.prowebbook.
com">Pro Web Book Dot Com</a></li>
<li><a href="http://www.navigationarts.com" id="myOtherLink"
class="htmlControl">NavigationArts</a></li>
<li><a href="javascript:__doPostBack(ctl00,)">Kliknij
cze</a></li>
</ul>
<p><span id="myLabel">Hej spjrz! Ten element jest bez znaczenia!
</span></p>
<p id="myPara">cze Pro Web Book <strong>rzdzi!</strong></p>
147
148
L EKTURA OBOWIZKOWA PODCZAS STOSOWANIA

STANDARDW SIECIOWYCH W ASP.NET
Podczas tworzenia kodu ASP.NET bardzo atwo zbliy si do poziomu profesjonalnych
standardw sieciowych. To jest po prostu wiczenie w podejmowaniu uzasadnionych
i rozsdnych decyzji dotyczcych stylu programowania.
Na witrynie MSDN (ang. Microsoft Developers Network) firma Microsoft zamiecia artyku,
ktrego celem jest pomoc programistom w uywaniu standardw sieciowych oraz
funkcji zwizanych z dostpnoci podczas pracy w platformie ASP.NET. Ten artyku
powinien sta si lektur obowizkow dla wszystkich programistw ASP.NET. Niestety,
jest on gboko zaszyty na witrynie, a omawiane techniki nie zostay przedstawione
w wikszoci przykadw ASP.NET umieszczonych w Internecie. Wymieniony artyku
znajduje si na stronie:
http://msdn2.microsoft.com/en-us/library/aa479043.aspx
Wreszcie, firma Microsoft wypucia na rynek kod typu open source opracowany na
bazie moliwoci rozbudowy ASP.NET, ktry pozwala programistom na zmian danych
wyjciowych XHTML z poziomu wielu znacznikw ASP.NET wbudowanych w platform
ASP.NET. Wymieniony kod nosi nazw ASP.NET 2.0 CSS Friendly Control Adapters
i jest dostpny na stronie:
http://www.asp.net/cssadapters/
Przy odrobinie dodatkowego wysiku, wygenerowany przez ASP.NET kod dziaajcy
po stronie serwera moe bardzo zbliy si do poprawnego (zgodnego ze standardami)
kodu zapewniajce duy poziom dostpnoci.
Dodatkowe spostrzeenia dotyczce wygenerowanych danych wyjciowych s nastpujce:

Warto zwrci uwag, e w ASP.NET istnieje kilka sposobw wygenerowania
prostego cza. Pierwsze dwa zostay przedstawione wczeniej opieraj si
o kontrolki serwerowe i HTML. Kolejny to wykorzystanie jeszcze innej kontrolki
o nazwie <asp:LinkButton />.
Kod generujcy trzecie cze wyranie pokazuje, dlaczego w wikszoci przypadkw
najlepszym rozwizaniem jest uniknicie stosowania kontrolki <asp:LinkButton />.
Ta kontrolka tworzy atrybut href za pomoc cza JavaScript, co amie wszystkie
zasady opisane w niniejszej ksice.
Zastosowana w pierwszym akapicie kontrolka <asp:Label /> zupenie bez powodu
generuje znacznik <span>. Kontrolka Label jest uznawana za poyteczn, poniewa
programista moe przypisa jej pewne aspekty prezentacyjne. Zamiast niej moliwe
jest jednak uycie kontrolki <asp:Literal />, ktra po prostu generuje uroczy komunikat: (Nieprawidowe cze). Bardzo czsto mona spotka si ze stwierdzeniem,
e uywanie tej kontrolki ma jedn du wad, ktr jest brak aspektw prezentacyjnych. To jest jednak powd, dla ktrego jej uywanie jest doskonaym pomysem.
ROZDZIA 4
Za pomoc atrybutu ID (tutaj o wartoci myPara) programista moe rwnie

kontrolowa tekst znacznikw kontrolek HTML akapitu, jak to zademonstrowano
na powyszym fragmencie kodu.
Warto zwrci uwag, e programista moe take wywietla lub ukrywa kontrolki
HTML. Ostatni akapit w kodzie dziaajcym po stronie serwera zosta ustawiony
jako visible = false, a wic nie zosta wysany do przegldarki internetowej
uytkownika.
Kontrolki HTML oferuj kodowi ASP.NET due moliwoci, ale z rnych powodw
samouczki dotyczce ASP.NET pomniejszaj ich wykorzystanie. Jednak z perspektywy
standardw sieciowych s to narzdzia o potnych moliwociach i czsto bardziej
podane ni kontrolki serwerowe Web Control.
Wsppraca po stronie serwera z projektantami UI

Podczas opracowywania aplikacji dziaajcych po stronie serwera, programici oraz
projektanci powinni wsppracowa ze sob tak blisko, na ile jest to moliwe, w celu
zagwarantowania, e kod znacznikw UI bdzie stosowa najlepsze rozwizania
zgodne ze standardami sieciowymi. Bardzo czsto oznacza to konieczno wyboru
waciwego narzdzia po stronie serwera. Utrzymywanie UI z dala od aplikacji oraz
uywanie klas powoduje, e kod ma czystsz posta. W ten sposb kod zwizany
z projektem wizualnym pozostaje w rkach zespou UI oraz ogranicza si ryzyko,
oraz potencjaln potrzeb angaowania programisty w celu wprowadzenia zmian
w interfejsie uytkownika. Kiedy aplikacja staje si bardzo skomplikowana lub bazuje
na podstawie starego kodu, konieczne mog sta si kompromisy. Jednak ostateczne
cele, standardy sieciowe i wskazwki powinny zakada osignicie spjnoci
i utrzymywanie jej w dugim okresie czasu.
Zarzdzanie treci
Kiedy witryna internetowa musi zosta uaktualniona przez uytkownika pozbawionego
wiedzy technicznej, gdy rozrasta i staje si wiksza lub zawiera tre, ktra musi by
ponownie uyta, skatalogowana, wspdzielona i zapewniajca moliwo jej przeszukiwania, to najczciej stosowanym rozwizaniem jest oprogramowanie do zarzdzania treci. Wymienione oprogramowanie zarzdzania treci jest jedn z powszechnie
dostpnych aplikacji sieciowych, na ktr natknie si kady zesp programistw
sieciowych. Wynika to z faktu, e najczstszym daniem ze strony uytkownikw
biznesowych jest coraz wiksza moliwo kontrolowania witryny.
Niestety, aplikacje suce do zarzdzania treci bardzo czsto generuj wasny jzyk
znacznikw lub wymagaj woenia duych nakadw pracy i wysiku, aby wej
do wiata standardw sieciowych. Na szczcie najczciej nie jest to a takie trudne,
jak si pocztkowo wydaje, przynajmniej w przypadku porzdnych aplikacji zarzdzania
149
150
treci. Szczerze mwic, najtrudniejszym etapem jest czsto okrelenie, gdzie naley
szuka odpowiednich fragmentw kodu, ktre faktycznie odpowiadaj za generowanie danych wyjciowych.
Dostpne s niezliczone systemy zarzdzania treci (CMS) o zrnicowanym stopniu
elastycznoci i zgodnoci ze standardami sieciowymi. Z punktu widzenia standardw
sieciowych, elastyczno zaley od niuansw zwizanych z moliwociami oprogramowania, jak rwnie implementacj, za ktr odpowiada ju zesp programistw.
Podstawy systemu zarzdzania treci

Lepsze rozwizania z zakresu systemw CMS pozwalaj zespoowi na wygenerowanie kodu UI w ustalony przez niego sposb czyli wprost przeciwnie do rozwiza,
w ktrych to narzdzie decyduje o postaci kodu. Istnieje kilka sposobw, na ktre
standardy sieciowe mog wsppracowa z rozwizaniami z dziedziny systemw zarzdzania treci:
Abstrahowanie warstwy prezentacyjnej treci od miejsca przechowywania tej treci.
Uycie mniejszej liczby szablonw CMS, ale efektywniejsze wykorzystanie arkuszy
stylw CSS.
Ponowne uywanie treci poniewa kod znacznikw nie bdzie powizany
z warstw prezentacyjn.
Uproszczenie zada autorw tworzcych tre poniewa bd musieli obsugiwa
mniejsz ilo aspektw prezentacyjnych.
Znaczne zwikszenie moliwoci przeprojektowania witryny przy jednoczesnym
zmniejszeniu wysiku ze strony zespou obsugujcego system CMS.
System zarzdzania treci i czysta tre

Prosty proces przechowywania treci w centralnym repozytorium wraz z czystym
kodem znacznikw jest sam w sobie dobrym sposobem na ponowne uywanie treci,
poniewa kod znacznikw bdzie prosty. Ponadto na rnych fragmentach stron,
w zalenoci od kontekstu, bdzie mona stosowa style za pomoc arkuszy stylw
CSS. Oprcz tego, poniej wymieniono niektre z najlepszych praktyk oraz rozwiza
stosowanych w profesjonalnych systemach zarzdzania treci i projektowania
z uyciem arkuszy stylw CSS:
Projektowanie z uyciem arkuszy stylw CSS na podstawie kontekstu. Przykadowo,
opis artykuu moe by wygenerowany jako nagwek <h1> stosujcy na stronie
artykuu du czcionk w kolorze brunatnym, ale jednoczenie ma czcionk
w kolorze czarnym na stronie archiwum. Arkusze stylw CSS pozwalaj na kontrol
tego rodzaju rnic.
ROZDZIA 4
Tre powinna by przechowywana w najprostszej z moliwych postaci. Naley

stosowa minimaln, wystarczajc liczb klas CSS oraz minimaln (lub zerow)
liczb atrybutw prezentacyjnych elementw.
Warto stosowa semantyczny kod znacznikw, oznaczajc tre w peni zrozumiaym, czytelnym i przenonym formatem, ktrego mona ponownie uywa
i nadawa mu styl. Naley sobie przypomnie, e dowiadczeni programici CSS
mog zastosowa rne style na podstawie kontekstu w szablonie witryny
za pomoc atrybutu ID lub klasy.
Autorzy treci powinni stosowa jedynie podstawowe znaczniki HTML struktury
strony. Idealnym rozwizaniem bdzie, gdy autorzy naucz si kilku klas CSS.
Powinni rwnie wiedzie, e nagwek pierwszego stopnia w obszarze treci
to <h1>. Ponadto powinni te wiedzie, e utworzenie zwykej listy wypunktowanej
skutkuje wywietlaniem maych ikon wypunktowania. Musz te wiedzie,
e na przykad nagwek w obszarze treci po prawej stronie bdzie wywietlany
w kolorze granatowym. Warstw prezentacyjn mona naoy za pomoc arkuszy
stylw CSS i nie trzeba bdzie jej przechowywa w repozytorium treci systemu
CMS. Oglnie rzecz biorc, autorzy treci mog skoncentrowa si na treci, a nie jej
wizualnych aspektach.
Kontekst na danej stronie jest uytecznym narzdziem, ale kontekst na witrynie
moe by rwnie wany. W chwili obecnej czsto stosowanym rozwizaniem jest
podzia witryny na kilka sekcji, ktre stosuj odmienne schematy kolorw wyczone
z podstawowej marki. Przechowywana w bazie danych tre sama w sobie nie
jest w stanie tego odrni, ale powinna by przenona midzy sekcjami witryny.
Style CSS mona definiowa w stosunku do znacznika <body> lub zbioru atrybutw
ID sekcji witryny, a wic w ten sposb stosowa rne schematy kolorw na wszystkich
semantycznych znacznikach dla danego fragmentu witryny.
Dane wyjciowe systemu zarzdzania treci i moduy

Narzdzia zarzdzania treci mog stanowi wyzwanie, gdy trzeba bdzie okreli,
w jaki sposb kontrolowa dane wyjciowe oraz otrzyma kod zgodny ze standardami
sieciowymi. Bardzo czsto najtrudniejsz czci jest okrelenie punktu rozpoczcia
pracy oraz sposobu kontrolowania danych wyjciowych. Zazwyczaj system CMS generuje
stron sformatowan za pomoc kodu pochodzcego z kilku rnych obszarw:
Wbudowane moduy generujce dane wyjciowe na podstawie wasnych funkcji
lub funkcji dostpnych w systemie CMS.
Szablony stron uywane do wywietlania rnego rodzaju stron.
Bazujce na przegldarce internetowej edytory podobne do procesorw tekstu
(uywane przez autorw treci).
151
152
W kwestii wygenerowania poprawnego kodu zgodnego ze standardami sieciowymi,

najwikszymi wyzwaniami zwizanymi z aplikacj CMS s najczciej jej wbudowane
funkcje, nad ktrymi zesp programistw ma ma kontrol lub w ogle jej nie ma.
Na te funkcje naley szczeglnie uwaa. Jednak niektrzy mog uwaa je za doskonae
funkcje narzdzia, gdy rzekomo po jego instalacji witryna internetowa bdzie gotowa
od rki.
Ryzykowne elementy obejmuj midzy innymi:
Moduy administracyjne osadzone na stronach dostpnych publicznie.
Kod sucy do ledzenia ruchu oraz wbudowane skrypty.
Moduy reklamowe.
Wszystkie elementy generujce menu.
Kontrolki specjalne, ktre mog generowa listy treci (na przykad nowoci
bd archiwum produktw).
Wyniki wyszukiwania
WSKAZWKA
Wszystko okrelane mianem dostpne od rki z natury jest podejrzane, o ile narzdzie
nie zostao wczeniej przystosowane do speniania nowoczesnych standardw.
Narzdzia o potnych moliwociach pozwalaj zespoowi programistw na dostp

do kodu odpowiedzialnego za generowanie danych wyjciowych lub wstawianie
wasnych moduw, ktre mog zastpi bd rozszerzy wbudowane funkcje.
W idealnej sytuacji narzdzie bdzie zawierao wbudowane szablony lub fragmenty
kodu, ktre mona uaktualni. Szczeglnie naley uwaa na narzdzia pozwalajce
na dostosowanie wygldu i sposobu dziaania za pomoc czego na wzr panelu
sterowania, o ile faktycznie to narzdzie nie udostpni kodu, ktry bdzie mona
przejrze i zmodyfikowa.
Szablony systemu zarzdzania treci

Wikszo narzdzi CMS wie strony z szablonami, z ktrych kady jest ukadem
graficznym moliwym do ponownego uycia. Autorzy po prostu wybieraj waciwy
szablon dla danego rodzaju lub sekcji strony. Im wiksza liczba szablonw, tym wicej
elementw autor musi ledzi a obsuga witryny staje si coraz bardziej trudniejsza.
Rozsdne uycie arkuszy stylw CSS i standardw sieciowych moe w rzeczywistoci
doprowadzi do zmniejszenia liczby szablonw.
Szablony zazwyczaj opieraj si na siatce strony, co zwykle oznacza stosowanie rnego
kodu znacznikw. W wiecie standardw sieciowych oraz arkuszy stylw CSS niekoniecznie musi tak by.
ROZDZIA 4
Przykadowo, warto przeanalizowa przedstawiony poniej ukad strony uywajcej

trzech kolumn (zobacz rysunek 4.7):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pierwszy szablon</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="typeA">
<div id="wrapper">
<ul id="nav">
<li><a href="...">Nawigacja 1</a></li>
</ul>
<div id="content">
<h1>Obszar treci</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nam sit amet nulla. Ut ut urna ac lectus.</p>
<p>Ut ut urna ac lectus tincidunt sollicitudin. Sed rutrum
interdum lorem. Integer aliquam pellentesque
neque.</p>
<p>Curabitur a neque a libero gravida dignissim. Sed
eget tellus.</p>
</div>
<div id="related">
<h2>cza do innych stron</h2>
<p>cza do innych stron i treci</p>
<ul>
<li><a href="">Sekcja 1</a></li>
<li><a href="">Sekcja 1</a></li>
</ul>
</div>
</div>
</body>
</html>
Przedstawiony na powyszym fragmencie kodu dokument ma trzy elementy <div>
o nastpujcych wartociach atrybutw ID: nav, content i related (czyli z punktu
widzenia selektorw CSS bd to #nav, #content i #related). Wymienionym elementom
mona bardzo atwo nada styl za pomoc arkuszy stylw CSS. Tre znajdujca si
153
154
RYSUNEK 4.7.
Szablon systemu CMS
tworzcy ukad, ktry
opiera si na trzech
kolumnach
w elementach <div> o nazwach #content i #related moe by tworzona przez

autorw treci. Na powyszym fragmencie kodu s one przedstawiane przez sekcje
odpowiednio Lorem ipsum oraz cza do innych stron. Co wicej, cza znajdujce
si w trzeciej kolumnie mog by nawet generowane dynamicznie po stronie serwera
na podstawie pokrewiestwa z dan treci. Dlatego te mog zdarzy si sytuacje,
gdy trzecia kolumna nie bdzie potrzebna.
Warto zwrci uwag na klas elementu <body>. Autor treci moe wykorzysta j
w celu zaznaczenia szablonu i umieszczenia w kolejce odpowiedniej liczby kolumn.
Logika programu moe z kolei uywa klasy elementu <body> dokumentu, aby utworzy
struktur strony skadajcej si na przykad z nawigacji i pojedynczej kolumny z treci
(zobacz rysunek 4.8). W takim przypadku w narzdziu CMS nie trzeba bdzie tworzy
wikszej liczby szablonw, a autorzy treci nie bd musieli wybiera rnych szablonw.
RYSUNEK 4.8.
Po wprowadzeniu
drobnych zmian w arkuszu
stylw CSS, ten sam szablon
tworzy stron wywietlajc
tylko dwie kolumny
ROZDZIA 4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Drugi szablon</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="typeB">
<div id="wrapper">
<ul id="nav">
</ul>
<div id="content">
<h1>Obszar treci</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nam sit amet nulla. Ut ut urna ac lectus.</p>
<p>Ut ut urna ac lectus tincidunt sollicitudin. Sed rutrum
interdum lorem. Integer aliquam pellentesque
neque.</p>
<p>Curabitur a neque a libero gravida dignissim. Sed
eget tellus.</p>
</div>
<div id="related">
</div>
</div>
</body>
</html>
Element <div> z atrybutem ID o wartoci #related zosta zwinity, a wic nie generuje
danych wyjciowych. Na poziomie systemu CMS zmiana klasy elementy <body> na typeB
powoduje zmian ukadu strony, ale bez koniecznoci modyfikacji kodu znacznikw.
Oznacza to, e w systemie mona zrezygnowa z jednego dodatkowego szablonu,
ktry w przeciwnym razie byby potrzebny. W ten sposb zachowana zostaje rwnie
separacja midzy kodem znacznikw i warstw prezentacyjn. Arkusz stylw CSS
powyszej strony jest nastpujcy:
body { font: normal .9em Georgia; }
body.typeB #related { display:none; }
body.typeB #content { width: 600px; }
#nav { list-style-type: none; width: 100px; float: left;
margin: 30px 0 0 5px; padding: 0; }
155
156
#content { width: 400px; float: left; margin-left: 10px;

border: 1px solid red; padding: 3px; }
#related { width: 150px; float: left;
border: 1px solid red; margin-left: 10px;
padding: 3px; }
Narzdzia suce do zarzdzania treci s po prostu innego rodzaju mechanizmem
oprogramowania obsugujcym witryn internetow. W rzeczywistoci s powszechnie
stosowane na witrynach duych organizacji, a wikszo z nich to w peni wyposaone
platformy programistyczne, ktre mona zmusi do wygenerowania danych wyjciowych
zgodnych ze standardami sieciowymi. W ten sposb witryna bdzie w wikszym
stopniu dostpna. Niezalenie od tego, czy narzdzie powoduje wygenerowanie
czystych danych wyjciowych, czy s one przeksztacane z formatu XML za pomoc
jzyka XSLT (ang. eXtensible Stylesheet Language Transformations), dane wyjciowe
powinny by czyste i przemylane. Warto podkreli, e efektywne stosowanie standardw
sieciowych moe prowadzi rwnie do redukcji liczby uywanych szablonw CMS
oraz znacznie uatwi prac autorom treci.
Tryb WYSIWYG dla autorw treci

Podczas pracy w rodowiskach zajmujcych si treciami publikowanymi w Internecie,
wikszo autorw treci nieposiadajcych umiejtnoci technicznych korzysta z pewnej
formy interfejsu WYSIWYG podczas tworzenia danej treci. Tego rodzaju narzdzia
mieszcz si w szerokim zakresie oprogramowania, na przykad edytor, taki jak Adobe
Contribute, sucy do prostej obsugi witryny. Nie s one typowymi platformami
programistycznymi, takimi jak Adobe Dreamweaver lub Microsoft Expression Web,
i posiadaj znacznie uboszy zestaw funkcji. Podobnie jak w przypadku kadego
innego rodzaju oprogramowania, wymienione narzdzia maj opcje konfiguracyjne
pozwalajce na osignicie rnego poziomu zgodnoci ze standardami sieciowymi.
Oglna zasada jest taka, e najlepsza konfiguracja edytora dla autora treci jest wtedy, gdy
wikszo opcji formatowania zostaje wyczona. Wynika to z faktu, e funkcje formatowania zwykle polegaj na kodzie, ktrego zesp programistw nie bdzie w stanie kontrolowa. Efektywna obsuga arkuszy stylw CSS przez te narzdzia jest wic kluczowa.
Edycja za pomoc przegldarki internetowej

Edytory bazujce na przegldarce internetowej s dostpne ju od pewnego okresu
czasu. Firma Microsoft wprowadzia komponent edycyjny na bazie technologii Active-X
ju w przegldarce Internet Explorer 4. Od tego czasu dodano obsug jzyka JavaScript, a edytory zwykle bazuj na skryptach, jzyku Java, technologiach Flash lub
Active-X. Coraz czciej do obsugi edycji w przegldarce internetowej s dostpne
komponenty wykorzystujce skrypty i dziaaj one w wikszoci nowoczesnych
przegldarek internetowych, takich jak Safari i Opera. Ze wzgldu na zachowanie
zgodnoci warto wybra jeden z tego rodzaju komponentw.
ROZDZIA 4
Niestety, standardowo edytory bazujce na przegldarce internetowej nie s wystarczajco

solidne. Przegldarka Microsoft Internet Explorer generuje znaczniki <font>, podczas
gdy Mozilla generuje osadzone style. Edytory mog wygenerowa to, co potrafi
wygenerowa przegldarka internetowa, ale funkcje edytorw musz w olbrzymim
stopniu zosta zbudowane na bazie kilki sztuczek dostpnych w modelu DOM
przegldarki. Z tego powodu niezmiernie trudno jest na masow skal opracowa
wasny edytor, ale kadego dnia ich jako ulega poprawie. Czytelnik na pewno
znajdzie nowoczesny edytor, ktry bdzie generowa poprawny kod i obsugiwa
arkusze stylw CSS.
Konfiguracja edytora
Programici sieciowi powinni powzi odpowiednie kroki, aby edytory bazujce na
przegldarce internetowej nie zniweczyy ich cikiej pracy woonej w definiowanie
stylw i programowanie witryn internetowej zgodnie ze standardami sieciowymi.
Kroki konieczne do podjcia mog obejmowa midzy innymi integracj nowego
uytkownika lub nawet nowego oprogramowania.
Pod uwag naley wzi nastpujce kroki:
Przejrzenie kodu danych wyjciowych edytora WYSIWYG w rnych sytuacjach.
Generowanie przez tego rodzaju edytory niepoprawnego kodu jest do powszechne,
ale rynek nadal si rozwija i wiele z nich potrafi wygenerowa prawidowe dane
HTML lub nawet XHTML, po wprowadzeniu niewielu zmian konfiguracyjnych.
Niektre edytory oferuj widok wywietlajcy kod rdowy. W zalenoci od
poziomu umiejtnoci autora treci, tak funkcj trzeba bdzie wczy lub wyczy.
Cz edytorw uywa modelu opartego na prawach dostpu, co umoliwia
wczenie widoku wywietlajcego kod rdowy niektrym uytkownikom
i wyczenie go innym.
Funkcje kontrolujce aspekty prezentacyjne powinny by ograniczone do minimum.
Naley wyczy funkcje modyfikujce rodzin czcionki, kolor czcionki i kolor ta.
Te parametry powinny by definiowane jedynie w arkuszu stylw CSS.
Edytor powinien mie moliwo stosowania klas CSS. Dobry edytor bdzie potrafi obsuy poczenie pliku CSS z edytorem. Niektre bd wymagay, aby
programista skonfigurowa elementy wywietlane w menu klas CSS. Najlepsze
edytory bd obsugiway kontekst oraz pozwalay na uywanie jedynie niektrych
klas aplikacji, w zalenoci od regu CSS na przykad niedozwolone bdzie uycie
reguy p.error w elemencie <span>.
Obsuga klas CSS aplikacji powinna obejmowa moliwoci w zakresie stosowania
CSS okrelonym elementom. W ten sposb bdzie mona bardzo atwo zastosowa
klas na elemencie <ul>, jak rwnie na zagniedonych w nich elementach <li>,
na podstawie pewnej formy wyboru opcji. Czstym sposobem realizacji takiego
zadania jest proste kliknicie i zaznaczenie drzewka modelu DOM na pasku stanu
(body > div > ul > li > a).
157
158
Pliki arkuszy stylw CSS powizane z edytorem mog by wyodrbnione z gwnych

plikw CSS, poniewa zawarte w nich reguy mog okaza si zbyt skomplikowane
do interpretacji. Poza tym peny kontekst regu, na przykad elementy <p> wewntrz
#content zamiast #related, moe by nieobsugiwany lub po prostu niepotrzebny.
W zalenoci od kontekstu edycji, rozwizaniem moe by uycie wielu plikw CSS.
Edytor powinien obsugiwa podstawowe znaczniki semantycznego XHTML, takie
jak wbudowane nagwki (1-6), formatowanie akapitu, co najmniej dwa rodzaje
wypunktowania, cytowanie, preformatowany tekst i adresy.
Dobry edytor bdzie rwnie usuwa mieci oraz niepoprawne znaczniki z treci
wklejanej ze schowka bd bdzie zawiera wiele opcji sucych do oczyszczania
wklejonej treci. Bardzo czsto tre skopiowana z procesora tekstu lub strony
internetowej i wklejona do edytora WYSIWYG zachowuje oryginalne informacje
dotyczce formatowania. Tego rodzaju informacje prowadz do wygenerowania
niepoprawnego kodu i mog zmodyfikowa style, ktre powinny by ustalane
jedynie poza treci poprzez arkusze stylw CSS.
By moe trzeba bdzie poinformowa autorw treci, e jeli stosowana przez
nich aplikacja nie potrafi usun niepoprawnych znacznikw z wklejanej treci,
to powinni je usuwa poprzez wklejenie treci do zwykego edytora tekstowego,
a dopiero nastpnie do edytora WYSIWYG.
Idealnym rozwizaniem jest znalezienie edytora bazujcego na przegldarce
internetowej, ktry bdzie obsugiwa jak najwiksz liczb przegldarek i oferowa
wymienione powyej funkcje. Znalezienie edytora WYSIWYG, ktry okazuje si
opracowany jedynie pod ktem przegldarki IE, nie jest wcale takie rzadkie.
Jednak obecnie dostpne edytory s dostpne zarwno dla platformy Windows,
jak i Mac oraz niemale kadej przegldarki internetowej.
Stosowanie wymienionych powyej regu oraz kryteriw moe oznacza widoczn
rnic w tworzeniu solidnych, zgodnych ze standardami sieciowymi witryn. Uycie
niewaciwego edytora treci moe zniweczy cik prac woon w opracowanie
witryny. Jako i wydajno dowolnego edytora stosowanego w rodowisku produkcyjnym
naley ocenia pod ktem standardw sieciowych i modyfikacji prowadzcych
do uzyskania kodu, ktry bdzie w jak najwikszym stopniu poprawny.
Firmy trzecie
Wiksze witryny internetowe czsto stosuj okrelony wygld i sposb dziaania,
rwnie na witrynach firm trzecich bd aplikacji biznesowych hostingowanych gdzie
indziej, na przykad na witrynie Investor Relations lub witrynach zajmujcych si
porednictwem w znalezieniu pracy. Te witryny bd posiaday wygld zgodny
z wygldem witryny podstawowej, a uytkownik moe si nawet nie zorientowa,
e zosta przeniesiony na inn witryn.
Podejcie zakadajce stosowanie standardw sieciowych jest idealne w tego rodzaju
sytuacjach, poniewa nie tylko grafika i skrypty mog by przechowywane na gwnych
ROZDZIA 4
serwerach organizacji, ale take wszystkie pliki CSS lub przynajmniej te okrelajce
oglny wygld i dziaanie witryny. W takich sytuacjach organizacja moe udostpni
firmom trzecim cza do niektrych lub wszystkich elementw (na przykad plikw CSS),
a nastpnie usprawnia je przez cay czas, bez koniecznoci wprowadzania modyfikacji
take w aplikacjach firm trzecich.
W tego rodzaju przypadkach prawdopodobnie najlepszym rozwizaniem bdzie
przekazanie firmom trzecim dokumentacji wraz z opisem klas stylw, nagwkami
grafik oraz oglnymi wskazwkami w zakresie ukadu witryny. Warto rwnie przekaza
przykadowe fragmenty kodu oraz szablony przedstawiajce przykad budowania
stron i ukadu witryny.
Jednak podobnie jak w kadej innej organizacji lub platformie oprogramowania,
firmy trzecie bd si rniy stopniem stosowania i zgodnoci ze standardami sieciowymi.
Przykadowo: ich platformy mog by niezgodne z arkuszami stylw opracowanymi
w organizacji. W takich przypadkach pewne kompromisy stan si koniecznoci.
Kompromis moe oznacza wyodrbnienie pewnego fragmentu z pliku CSS lub
utworzenie oddzielnych szablonw kodu znacznikw. Jednak w perspektywie
duszego okresu czasu, warto rozway i przeanalizowa zmian firmy trzeciej,
jeeli nie bdzie ona w stanie nady za rozwizaniami przemysowymi.
W jaki sposb podej

do aplikacji sieciowych?
Podejcie zakadajce uywanie standardw sieciowych oznacza cise oddzielenie
warstwy prezentacyjnej od treci, co pociga za sob take separacj logiki biznesowej
od warstwy prezentacyjnej. Zespoy programistw budujce oprogramowanie oraz
aplikacje sieciowe mog czerpa due korzyci, jeli tworzone przez nich interfejsy
bd opieray si na nowoczesnym podejciu, czyli arkuszach stylw CSS zamiast
osadzonych atrybutw prezentacyjnych.
Mniejsza ilo osadzonego kodu prezentacyjnego oznacza zmniejszenie ryzyka dla
logiki biznesowej podczas modyfikacji projektu witryny lub oprogramowania. Ponadto,
w rodowisku potencjalnie skomplikowanego oprogramowania, takie podejcie moe
oznacza, e dowiadczeni projektanci interfejsu bd mogli wprowadza zmiany
w ukadzie bez koniecznoci uaktualniania kodu wewntrznego i angaowania programistw kodu wewntrznego.
Prawdziwym wyzwaniem jest okrelenie miejsca rozpoczcia aktualizacji aplikacji
sieciowej i poznanie funkcji dostpnych technologii. Nowe funkcje technik wykorzystujcych standardy sieciowe mog sta si potnym sojusznikiem zespou zarwno
budowania aplikacji sieciowej od samego pocztku, jak i podczas uywania komercyjnych
narzdzi sucych do zarzdzania treci.
159

CSS I Ajax. Strony WWW Zgodne Ze Standardami Sieciowymi W3C

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS I Ajax. Strony WWW Zgodne Ze Standardami Sieciowymi W3C

Uploaded by

Copyright:

Available Formats

CSS i Ajax.

Twrz serwisy internetowe zgodne z standardami!

Wspczesne strony internetowe rni si, a przynajmniej powinny, od tych sprzed

Zalety standardw sieciowych

Dostosuj si do standardw zwiksz dostpno

Cz I Tworzenie witryn internetowych bazujcych

Czym s standardy sieciowe? .............................................................................................16

ROZDZIA 1. TWORZENIE INTERFEJSU

Od czego rozpocz? .............................................................................................................27

ROZDZIA 2. WPROWADZENIE DO KASKADOWYCH ARKUSZY STYLW

Ile plikw CSS naley utworzy? ........................................................................................60

ROZDZIA 3. INTEGRACJA Z WARSTW OBSUGI ZDARZE

Nowoczesne metody technologii Ajax ...........................................................................88

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

Wsppraca kodu JavaScript

ROZDZIA 4. PROGRAMOWANIE APLIKACJI SIECIOWYCH

Aplikacje sieciowe obcione jarzmem przeszoci ................................................ 122

ROZDZIA 5. KRG STANDARDW

Organizacyjna opieszao ............................................................................................... 162

PRAKTYKA NIE OZNACZA DOSKONAOCI

Komunikacja ........................................................................................................................... 178

Kulisy ......................................................................................................................................... 182

Utworzenie zespou skazanego na sukces i unikanie poraek ........................... 215

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

Jako oprogramowania i analiza jego elementw

Problemy zwizane z tworzeniem aplikacji sieciowej

Programowanie aplikacji sieciowych

Zazwyczaj programista sieciowy albo wrzuca kod do szablonw przygotowanych przez

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

Czy aplikacja moe zosta uaktualniona?

Programowanie aplikacji sieciowych

albo nieakceptowanym poziomem ryzyka zwizanego z uaktualnieniem. W takich

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

Naley za wszelk cen unika stosowania osadzonych w kodzie stylw bd

Lepsze formularze tworzone

Programowanie aplikacji sieciowych

<table width="300" border="0">

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

Programowanie aplikacji sieciowych

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

Poniewa kod formularza jest czystszy i czytelniejszy, to po doczeniu do aplikacji

Struktury dziaajce po stronie serwera

Proste kroki prowadzce

Programowanie aplikacji sieciowych

Warto zwrci uwag, e wyzwania zwizane z uzyskaniem czystego rozdziau logiki

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

Mimo e powyszy kod jest prosty, to demonstruje pomieszanie kodu wewntrznego

Programowanie aplikacji sieciowych

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

Zwykle elementy odpowiedzialne za interfejs w tych platformach oprogramowania

Ostrzeenie przed kodem generowanym po stronie serwera

Platforma Microsoft ASP.NET

Programowanie aplikacji sieciowych

Zesp programistw mgby podj niemia decyzj dotyczc edukacji zespou

T O NIE TAK , E CZEPIAMY SI PLATFORMY ASP.NET

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

Programowanie aplikacji sieciowych

D UE USPRAWNIENIA W ASP.NET 2.0

Dane wyjciowe ASP.NET

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

Powyszy kod powoduje zdefiniowanie tabeli danych wyjciowych oraz naprzemiennych

Programowanie aplikacji sieciowych

CSS I AJAX. STRONY WWW ZGODNE ZE STANDARDAMI SIECIOWYMI W3C

<td>Czasami nazywana warstw obsugi zdarze, nadzoruje interakcj