Projektowanie aplikacji internetowych

2011-03-24
Plan wykładu
Projektowanie
aplikacji
internetowych
•
•
•
•
•
•
Standardy sieciowe
Przeglądarki
Elementy standardów sieciowych
Przykłady praktycznych zastosowao
Cechy XHTML, różnice w stosunku do HTML
Reguły XHTML
dr inż. Agnieszka Bołtud
Wykład 1
W3C
• Założone w 1994 roku konsorcjum World Wide Web (W3C)
tworzy specyfikacje oraz wytyczne, których celem jest
promowanie ewolucji sieci WWW i zapewnienie
prawidłowego współ­działania różnych technologii sieciowych.
• Do konsorcjum należy około 500 organizacji. Jego dyrektor,
Tim Berners-Lee, wynalazł sied WWW w 1989 roku.
• W3C stworzyło między innymi następujące specyfikacje:
HTML, CSS, XML, XHTML i standardowy model obiektowy
dokumentu (ang. DOM— Document Object Model).
W3C
• Przez
lata
konsorcjum
określało
te
specyfikacje
„rekomendacjami", co mogło nieumyślnie zachęcad firmy
członkowskie, takie jak Microso­ft czy Netscape, do
implementowania specyfikacji W3C nie do kooca
rygorystycznie. Kiedy w 1998 rolni wystartował projekt
standardów sieciowych, termin „rekomendacje W3C" zo­stał
zastąpiony „standardami sieciowymi".
• Do organizacji zajmujących się standaryzacją zalicza się
również
Europejskie
Stowarzyszenie
Producentów
Komputerów (ang. ECMA - European Computer Manufacturers
Association), które odpowiada za język o nazwie ECMAScript.
1
2011-03-24
Co oznaczają standardy
sieciowe
• to znaczy języki strukturalne (takie jak XHTML i XML), języki
warstwy prezentacji (takie jak CSS), modele obiektowe (takie
jak W3C DOM) oraz języki skryptowe (takie jak ECMAScript),
• technologie te zostały zaprojektowane tak, aby dostarczyd jak
największych korzyści jak największej liczbie użytkowników
sieci; tworzą razem swoistą „mapę drogową" dla racjonalnego,
ułatwiającego dostęp, zaawansowanego i efektywnego pod
względem kosztów budowania projektów w sieci WWW,
• Przeglądarki zgodne ze standardami to takie, które w
znaczącym stopniu rozumieją i poprawnie obsługują XHTML,
CSS, ECMAScript i model DOM,
Przeglądarki
• Wg J. Zeldmana w roku 2006 wciąż 99.9% przeglądarek jest
przestarzałych,
• Tworzenie wielu wersji niestandardowego kodu (każdej
dostosowanej do niestandardowych dziwactw przeglądarki)
jest jednym z powodów tzw. starzenia się stron,
• Tworzenie skryptów mających na celu detekcję wersji
przeglądarki i dodawanie elementów charakterystycznych
jedynie dla niej,
• Niestety im większy kod tym większe koszty utrzymania
serwisu, mówi się że jeśli witryna zredukuje swój kod o 35% o
tyle samo spadną koszty jej utrzymania,
Przeglądarki
• Nowoczesne przeglądarki nie są jedynie nowszymi wersjami
tej samej starszej wersji, w wielu przypadkach zostały
przebudowane od podstaw,
• Wszystkie zostały zbudowane na bazie nowego kodu w celu
realizacji nowego zadania, a mianowicie zachowania jak
największej zgodności ze standardami sieciowymi,
• Przeglądarki lat dziewięddziesiątych skupiały się na firmowych
technologiach i nie zwracały uwagi na standardy, a nawet je
ignorowały,
• Nie traktowano jednak tego poważnie, gdy np. przeglądarka
nie obsługiwała standardu PNG to projektanci nie używali
obrazków w tym formacie.
Oszczędność
• Strona zbudowana według starych zasad zajmuje 60 kB,
• Zastąpienie znaczników <font> oraz innych przestarzałych
znacz­ników czystym kodem z kilkoma regułami CSS zmniejsza
rozmiar strony do 30 kB (w praktyce możliwe jest
zredukowanie 60-kilobajtowej strony do 22 kB lub nawet
mniej),
• Redukcja: kosztów dzierżawy łącza, nakładów na sprzęt
komputerowy, im prostszy jest kod strony, tym szybciej jest
ona dostarczana do użytkownika, tym mniej obciąża serwer,
tak więc trzeba kupid, serwisowad i modyfikowad miej
serwerów (ważne w przypadku serwerów, które muszą
generowad dynamiczną, sterowaną bazami danych zawartośd).
2
2011-03-24
Kod skompresowany a
skondensowany
• kondensowanie kodu - pisanie go w sposób przejrzysty i
zwięzły,
• skompresowanie kodu - w niektórych systemach serwerowych
istnieje możliwośd kompresji kodu (np. Apache oferuje moduł
mod_zip kompresujący pliki HTML po stronie serwera,
rozpakowywany po stronie klienta),
• Rzadko stosowane w komercyjnych produktach ze względu na
dodatkowy koszt kompresji,
• Po drugie im mniejszy plik tym lepiej zostanie skompresowany,
Lekarstwo
Stworzone przez członków konsorcjum W3C i inne organizacje
zajmujące się ustanawianiem standardów oraz obsługiwane
przez wszystkie przeglądarki powstałe po roku 2000, technologie
takie jak CSS, XHTML, ECMAScript i W3C DOM pozwalają
projektantom:
• bardziej precyzyjnie kontrolowad układ, położenie i typografię
w przeglądarkach graficznych z możliwością zmiany prezentacji
strony według potrzeb użytkownika,
• projektowad zaawansowane funkcje interaktywne witryn
działające w różnych przeglądarkach i na różnych platformach,
• przestrzegad praw i wytycznych dotyczących funkcji ułatwiania
nawigacji bez pogarszania wyglądu, wydajności lub stopnia
skomplikowania,
Zgodność wstecz
• Według twórców: zapewnienie obsługi wszystkim
użytkownikom,
• W praktyce: używanie niestandardowych, niepraktycznych
znaczników oraz kodu po to aby każdy użytkownik mógł
zobaczyd to samo niezależnie od przeglądarki,
• Niestety im bardziej zaczynają obowiązywad standardy
sieciowe tym bardziej też obowiązuje zasada wkładasz śmieci
otrzymujesz śmieci,
Lekarstwo
• zmienid projekt witryny w ciągu godzin, a nie tygodni, i tym samym
zredukowad koszty pracy,
• obsługiwad wiele przeglądarek bez konieczności tworzenia wielu
wersji witryny i z bardzo małą ilością lub brakiem rozwidlonego
kodu,
• obsługiwad niestandardowe i nowo powstające urządzenia,
poczynając od bezprzewodowych gadżetów i telefonów
komórkowych z dostępem do sieci, aż po czytniki kodu Braille'a oraz
czytniki zawartości ekranu stosowane przez osoby niepełnosprawne
• ponownie bez konieczności ponoszenia dodatkowych kosztów i
tworzenia wielu wersji witryny,
• oferowad wersje stron „do wydruku", często bez konieczności
tworzenia oddzielnych stron przeznaczonych specjalnie do wydruku
lub bazowania na drogich systemach do tworzenia dokumentacji
drukowanej,
3
2011-03-24
Lekarstwo
• Oddzielad styl od struktury i zachowania,
• Przejśd z HTML-a do XML-a,
• Zagwarantowad, iż dobrze zaprojektowane strony będą się
poprawnie wyświetlad w przeglądarkach zgodnych ze
standardami, jak i tych starszych,
• Zapewnid, iż dobrze zaprojektowane witryny będą się
prawidłowo wyświetlad w nowych przeglądarkach oraz
urządzeniach których jeszcze nie wymyślono, jest to tzw.
zgodnośd w przód,
Elementy standardów
sieciowych
Strona jest rozbita na trzy niezależne komponenty
Struktura
Prezentacja
HTML
XHTML
XML
CSS
Zachowanie
ECMAScript
DOM
Struktura
• Język znaczników (XHTML) - zawiera dane tekstowe
sformatowane zgodnie z ich strukturalnym (semantycznym)
znaczeniem: nagłówek, drugorzędny nagłówek, akapit, lista
numerowana, etc.,
• XML udostępnia znacznie więcej opcji niż XHTML, ale w chwili
obecnej jest bieżącą rekomendacją W3C, która działa
dokładnie tak jak HTML w nie­mal każdej przeglądarce i
urządzeniu internetowym,
• tworzony poprawnie (bez błędów, niedozwolonych znaczników
i atrybutów) jest całkowicie przenośny (w przeglądarkach
internetowych, programach odczytujących zawartośd ekranu,
przeglądarkach tekstowych, urządzeniach bezprzewodowych
itp.),
Poprawny lub semantyczny
układ znaczników
• Układ znaczników jest „poprawny”, gdy nie zawiera błędów
typu niezamknięty znacznik, niedozwolony atrybut, etc.,
poprawnośd można testowad za pomocą darmowych narzędzi
dostępnych w Internecie,
http://validator.w3.org/
• Układ znaczników jest „semantyczny”, gdy wszystkie znaczniki
są stosowane zgodnie z ich przeznaczeniem,
• Układy mogą byd poprawne, ale nie semantyczne i odwrotnie,
jednak dążąc do zachowania standardów, dążymy do tego aby
były i poprawne i semantyczne,
4
2011-03-24
Prezentacja
• Jeżyki prezentacyjne CSS formatują stronę WWW, kontrolując
jej typografię, ułożenie, kolor itp.,
• W większości przypadków CSS jest w stanie zastąpid
stosowane wcześniej układy bazujące na tabelach HTML,
• Ponieważ prezentacja jest odseparowana od struktury, można
modyfikowad dowolny z tych elementów bez negatywnego
wpływu na drugi (globalizacja styli, style do wydruku),
• Dzięki wprowadzeniu styli CSS, wszystkie polecenia dotyczące
formatowania można umieścid w jednym miejscu (tzw.
arkuszu) i powiązad je z konkretnymi elementami,
wstawionymi za pomocą czystego XHTML. Taka koncepcja
sprawia, że modyfikacja wyglądu stron może przebiegad dużo
sprawniej.
Stosowanie standardów w
praktyce
• Strona www.webstandards.org
Zachowanie
• Standardowy model obiektów W3C DOM współpracuje z CSS, XHTML i
ECMAScript umożliwiając tworzenie zaawansowanych funkcji witryny
oraz efektów działających w różnych przeglądarkach i na różnych
platformach,
• Standard W3C DOM definiuje zespół klas i interfejsów, pozwalających na
dostęp do struktury dokumentów oraz jej modyfikację poprzez
tworzenie, usuwanie i modyfikację tzw. węzłów,
• Pierwotnie nie istniał standardowy model DOM. Twórcy
najpopularniejszych przeglądarek internetowych tworzyli własne
niezgodne ze sobą modele o interfejsie programistycznym opartym na
kolekcjach,
• Organizacja W3C przygotowała ujednolicony standard obiektowego
modelu dokumentu, wewnętrznie podobny do wersji Microsoftu, chod o
innym interfejsie programistycznym (dostęp do elementów dokumentu
możliwy jest tu poprzez wywołanie odpowiedniej metody),
Stosowanie standardów w
praktyce
• Rok 2002 - przeglądarka Camino (Mozilla) dla systemu Mac OS
X
źródło: J. Zeldman, „Projektowanie serwisów…”
5
2011-03-24
Stosowanie standardów w
praktyce
• Rok 2002, przeglądarka Netscape 4
Stosowanie standardów w
praktyce
• Urządzenie Palm Pilot oraz PocketPC Microsoftu i w Newtonie
- dawno zarzuconym produkcie Apple
źródło: J. Zeldman, „Projektowanie serwisów…”
źródło: J. Zeldman, „Projektowanie serwisów…”
Inny przykład
• Witryna magazyny A List Apart, rok 2001, układ zgodny ze
standardami
źródło: J. Zeldman, „Projektowanie serwisów…”
Inny przykład
• Przeglądarka Netscape 4, brak obsługi CSS, treśd
sformatowana zgodnie ze strukturą dokumentu
źródło: J. Zeldman, „Projektowanie serwisów…”
6
2011-03-24
Inny przykład
• Do wydruku, bez innej wersji strony, tylko CSS
Zalety wynikające ze
stosowania standardów
• Brak konieczności tworzenia stron dla konkretnych
producentów przeglądarek,
• Brak konieczności tworzenia uproszczonych stron dla starszych
przeglądarek,
• W wielu przypadkach brak konieczności tworzenia wersji dla
urządzeo mobilnych,
• Brak konieczności tworzenia wersji do wydruku,
• Ułatwienia dostępu dla osób niepełnosprawnych, gdyż strona
będzie działad w urządzeniach odczytywania zawartości
ekranu,
źródło: J. Zeldman, „Projektowanie serwisów…”
Przejściowa zgodność w przód
Przejściowa zgodność w przód
Składniki:
• Poprawny kod XHTML (zastosowany może byd również HTML
4.01).
• Poprawne arkusze CSS do kontrolowania typografii, koloru,
marginesów itp.,
• Sporadyczne użycie tabel XHTML do układu, unikanie
głębokich zagnieżdżeo przez przerzucenie części pracy na CSS,
• Opcjonalnie: zastosowanie etykiet strukturalnych do
znaczących komórek tabel,
• Zaadresowanie i przetestowanie funkcji ułatwieo dostępu.
Kiedy stosowad:
• zalecane w przypadku witryn odwiedzanych przez duży
odsetek przeglądarek, które zwyczaj­nie nie są w stanie
poprawnie obsługiwad CSS i modelu DOM,
Korzyści:
• Racjonalna zgodnośd wstecz: witryny mogą byd budowane w
taki sposób, aby wyglądały przyzwoicie nawet w najstarszych
przeglądarkach,
• Zgodnośd w przód: witryny będą funkcjonowały w
przeglądarkach i urządzeniach, które dopiero się pojawią,
• Działania w kierunku ostatecznej modyfikacji witryny są
rozpoczęte,
7
2011-03-24
Przejściowa zgodność w przód
• Mniej problemów z utrzymaniem wersji dla bieżących
przeglądarek i z usuwaniem niepotrzebnego i przestarzałego
kodu znaczników,
• Większa dostępnośd, redukcja rozmiarów i kosztów,
• Częściowe oddzielenie zawartości od struktury,
Wady:
• Struktura i prezentacja nadal częściowo powiązane co utrudnia
uaktualnianie i utrzymywanie strony, zwiększa koszt oraz
utrudnione przejście do formy zarządzania zawartością
bazującą na XML,
Całkowita zgodność w przód
Zalety:
• Zgodnośd w przód: zwiększona przenośnośd w istniejących i
przyszłych przeglądarkach oraz urządzeniach,
• Silniejsza transformacja w kierunku hardziej zaawansowanych
form języka znaczników bazujących na XML-u,
• Dotarcie do większej liczby użytkowników przy zmniejszonych
nakładach pracy,
• Brak konieczności tworzenia wielu wersji witryny,
• Brak lub mniejszy problem z dostępnością,
• Elegancka, prosta i logiczna składnia znaczników,
• Szybsza, łatwiejsza i mniej kosztowna produkcja oraz
utrzymanie,
Całkowita zgodność w przód
Składniki:
• Pełne odseparowanie struktury od prezentacji i zachowania,
• Poprawny CSS,
• Kod znaczników zbudowany w oparciu o poprawny XHTML,
• Nacisk na strukturę i odpowiednie strukturalne nazewnictwo
projektowanych elementów,
• Zachowanie implementowane przy użyciu modelu DOM,
• Zaadresowanie i przetestowanie funkcji ułatwieo dostępu.
Kiedy stosowad:
• Polecany gdy mały procent użytkowników to posiadacze
niezgodnych przeglądarek,
Całkowita zgodność w przód
Wady:
• Tendencja do przeciętnego wyglądu w starszych
przeglądarkach,
• Obsługa CSS przez przeglądarki nie jest doskonała (specjalne
style pod IE, IE6),
• Niektóre przeglądarki uznawane za zgodne ze standardami
mogą nie obsługiwad wybranych zachowao opartych na
modelu DOM.
8
2011-03-24
Złe przeglądarki
Główne wady przeglądarek niezgodnych ze standardami:
• Przeglądarki niezgodne ze standardami powodowały np.
przykrywanie założeo podanych za pomocą CSS na swoje
własne,
• Brak dziedziczenia, koniecznośd definiowania styli dla różnych
elementów strony, co powoduje redundancję i obciążenie
łączy,
Zalety XML
• jest samodzielnym, uniwersalnym standardem plików
doskonale współpracującym z innymi,
• jest formatem inteligentnym — świadomym swojej
zawartości, bo może przechowywad także metadane,
• jest językiem rozszerzalnym — może byd dostosowany do
dowolnych potrzeb biznesowych bądź akademickich oraz
może posłużyd do stworzenia innych bazujących na nim
języków,
• bazuje na regułach, które wymuszają spójnośd podczas
przenoszenia danych do innej bazy danych, przekształcania
danych na inny format lub manipulowania nimi przy użyciu
innych aplikacji XML,
• Może byd automatycznie transformowany do innych
formatów,
XML a HTML
• Pomimo że bazuje na tej samej technologii, która dala
początek HTML-owi XML jest całkowicie różny od niego,
• HTML jest prostym językiem służącym do tworzenia stron
internetowych, posiadającym ustaloną liczbę znaczników i
zestaw niekonsekwentnych reguł,
• HTML jest jedynie językiem formatowania, nie zawiera żadnej
informacji na temat formatowania treści,
• XML to zbiór znaczników o określonych spójnych regułach i
może wykraczad daleko poza sied na każde środowisko, które
jest w stanie go zrozumied,
Czerpanie styli
kilka witryn opublikowało układy CSS do darmowego
wykorzystania przez wszystkich:
•
•
•
•
http://www.freecsstemplates.org/
http://meyerweb.com/eric/css/edge/index.html
http://www.free-css-templates.com/
http://www.templatemo.com/page/1
9
2011-03-24
Wersje XHTML
• XHTML 1.0
• Strict – odmiana ścisła, zalecana przez W3C, przeznaczona do
tworzenia dokumentów z oddzieloną warstwą semantyki od
prezentacji; nie zawiera prawie żadnych elementów
prezentacyjnych
• Transitional – odmiana przejściowa, obok elementów odmiany
ścisłej zawiera wiele elementów prezentacyjnych
• Frameset – zawiera wszystkie elementy wersji przejściowej, a
dodatkowo także elementy przeznaczone do wyświetlania ramek
• XHTML 1.1 – jak dotąd rzadko stosowany
• XHTML 2.0 - zarzucony
Dlaczego warto wybrać
XHTML
• XHTML działa równie dobrze w urządzeniach
bezprzewodowych i programach do odczytywania zawartości
ekranu i innych wyspecjalizowanych klientach użytkownika jak
w tradycyjnych przeglądarkach komputerowych,
• XHTML jest częścią rodziny standardów sieciowych,
• Tworzenie w języku XHTML pozwala na wyzbycie się
przyzwyczajenia do pisania prezentacyjnego kodu znaczników,
a to z kolei może pomóc w uniknięciu problemów z
dostępnością i niezgodnością przy wyświetlaniu stron w
przeglądarkach różnych producentów,
• Tworząc w języku XHTML, możesz wyrobid w sobie nawyk
sprawdzanie własnej pracy przy użyciu usług walidacji kodu
Dlaczego warto wybrać
XHTML
• jest aktualnym standardem znaczników zastępującym HTML 4,
• jest zaprojektowany do współpracy z innymi językami
skryptowymi, aplikacjami i protokołami bazującymi na XML,
• jest bardziej spójny niż HTML,
• XHTML 1.0 jest pomostem do przyszłych wersji XHTML. Kiedy
XHTML 2 osiągnie status koocowej rekomendacji, łatwiej
będzie przejśd na tę specyfikację z XHTML 1.0 niż z HTML-a.
• Stare przeglądarki radzą sobie z XHTML-em równie dobrze jak
z HTML-em,
• Nowe przeglądarki „kochają" XHTML, a wiele z nich traktuje tę
specyfikację znacznie lepiej w porównaniu z HTML 4,
Walidacja kodu i inne
narzędzia wspomagające
• http://validator.w3.org/
• Web Developer - jest rozszerzeniem, dodatkiem do programu
Firefox, dodaje ono menu oraz pasek narzędzi z wieloma
narzędziami przydatnymi podczas tworzenia strony, walidacją
XHTML, HTML, CSS, etc.,
• Firebug – dodatek do Firefox, daje szereg narzędzi
programistycznych dostępnych błyskawicznie podczas używania
przeglądarki, można edytowad, analizowad kod oraz monitorowad
CSS, HTML i JavaScript bezpośrednio na dowolnej stronie
internetowej,
• Yslow - wtyczka dla Firebug, która analizuje stronę pod względem
kilku czynników wpływających na czas ładowania strony i
przedstawia wyniki tej analizy. Dodatkowo wyświetla informacje na
temat załadowanych plików i czasu ich ładowania. Bardzo przydatna
przy testowaniu serwisów internetowych pod względem czasu
ładowania strony.
10
2011-03-24
Reguły XHTML
• DOCTYPE – zawsze na początku i dużymi literami
informuje odbiorcę strony (przeglądarkę lub program
weryfikujący), jakiej wersji HTML-a lub XHTML-a używasz, kod
znaczników oraz style CSS nie zostaną poprawnie zweryfikowane
jeśli strona XHTML nie będzie rozpoczynad się od poprawnej
deklaracji DOCTYPE,
• Który DOCTYPE wybrad: Transitional, Strict czy Frameset?
Transitional – najbliższy HTML, najbardziej wybaczający, pozwala
na stosowanie przestarzałych fragmentów kodu: np. otwieranie
elementów w nowym oknie, toleruje również kolory tła
stosowane bezpośrednio do komórek tabel ,
Strict – gdy znajdzie we wnętrzu strony np. bgcolor to usługa
weryfikacji kodu interpretuje to jako błąd, a przeglądarka nie
wyświetli,
Reguły XHTML
Reguły XHTML
• Jak i gdzie definiowad DOCTYPE
deklaracja na samym początku dokumentu
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
• Przestrzeo nazw
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang= "en"
lang="en">
jest kolekcją typów elementów i nazw atrybu­tów skojarzonych z
określoną definicją typu dokumentu
Reguły XHTML
• Prolog XML
przeznaczeniem prologu jest wskazanie wersji XML-a oraz typu
kodowania znaków w danym dokumencie,
występuje przed DOCTYPE
<?xml version="1.0" encoding="ISO-8859-1"?>
Kodowanie znaków:
• Unicode – domyślny dla XHTML zestaw znaków,
• ISO-8859 – seria standaryzowanych wielojęzycznych zestawów
znaków graficznych kodowanych w jednym bajcie,
• znaczniki pisz małymi literami, gdyż XHTM rozróżnia wielkośd
znaków, istnieją programy przekształcające kod HTML na
XHTML,
<title> a nie <TITLE>
• ISO-8859-1 – odwzorowanie znaków krajów zachodniej Europy na
Unicode,
• ISO-8859-2 – plus języki Europy wschodniej, turecki, grecki,
hebrajski, etc.,
• Wartości atrybutów muszą byd umieszczone w cudzysłowach,
<hr width= ”75%” size= ”7” />
• Nazwy elementów i atrybutów muszą byd pisane małymi
literami, wartości atrybutów i treści strony nie,
<img src= ”/pic1.jpg” alt= ”Jakikolwiek Opis” />
11
2011-03-24
Reguły XHTML
• Przypisuj wartości wszystkim atrybutom, nawet jeśli są one
takie same jak nazwa,
<hr noshade= ”noshade”> a nie <hr noshade>
• Zawsze zamykaj wszystkie znaczniki,
<p> Tak w XHTML-u tak nie może byd
<p> Tak już ok </p>
Jak sensownie kodować
dokument
• Myśl o kodzie w sposób strukturalny, mniej wizualny,
• Myśl w kategoriach tradycyjnych form:
<h1>Temat</h1>
<p>Tekst wprowadzenia</p>
<h2>Podtytuł</h2>
<p>Istotny tekst</p>
• Unikaj przestarzałych form:
<font size="7">Temat</font><br />
Tekst wprowadzenia<br /><br />
<font size="6">Podtytuł</font><br />
Istotny tekst<br />
Reguły XHTML
• Zamykaj także puste znaczniki (takie jak <br>, <img>) przez
umieszczenie na ich koocu /, np. <br />,
• Nie umieszczaj podwójnych myślników w komentarzach, mogą
one byd tylko na koocu i początku, wewnątrz zastępuj lub
rozdzielaj,
• Koduj znaki < oraz &,
Znak < koduj jako &lt;
Znak & koduj jako &amp;
Znak > koduj jako &gt;
Jak sensownie kodować
dokument
• Należy używad elementów zgodnie z ich znaczeniem, bez
sugerowania się wyglądem:
• Nie używaj <h1> gdy chcesz zwiększyd wysokośd tekstu, itd.,
• Nie używaj <li> gdy chcesz wstawid znak wypunktowania przed
akapitem,
• Jeśli chcesz określid wygląd elementu użyj CSS,
• Z użycie CSS wszystkie nagłówki mogą byd takie same:
h1, h2, h3, h4, h5, h6 {
font-family: georgia, palation, times, serif;
font-weight: normal;
font-size: 2m;
margin-top: 1em;
margin-bottom: 0; }
12
2011-03-24
Jak sensownie kodować
dokument
Wykład przygotowano na
podstawie
• Wybieraj elementy strukturalne a nie nic nie znaczące
• Lista kodowana nie powinna byd tworzona w następujący sposób:
element pierwszy <br />
element drugi <br />
a raczej
<ul>
<li>element pierwszy </li>
<li>element drugi </li>
</ul>
• Używaj <strong> zamiast <b>, <em> zamiast <i>, bo <b> oraz <i>
są jedynie elementami prezentacyjnymi, które mogą nic nie
znaczyd np. innych w urządzeniach lub przeglądarkach
tekstowych,
• Jeffrey Zeldman, Projektowanie serwisów WWW. Standardy
sieciowe. Wydanie II, Helion, 2007.
• Materiałów dostępnych w Internecie (m.in.
www.webstandards.org)
13