Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

WWW

Wstęp

Po stronie przeglądarki internetowej, we współczesnej aplikacji webowej możemy wyróżnić trzy warstwy:

  • struktury (HTML),
  • prezentacji (CSS),
  • zachowania (JavaScript).

Niniejszy artykuł jest wstępem do cyklu artykułów i postów w temacie technologii webowych:

Projektowanie witryn

Głęboko zakorzenionym, ale źle sprawdzającym się w praktyce przekonaniem jest, że serwis WWW powinien być tak projektowany aby wyglądał i zachowywał się identycznie we wszystkich przeglądarkach dostępnych na rynku. W praktyce oznacza to równanie do najbardziej prymitywnej przeglądarki takiej jak MSIE 6 co wymusza komplikowanie i rozrost kodu (konieczność implementowania tych samych cech na różne sposoby w zależności od przeglądarki), co z kolei utrudnia pielęgnację i wydłuża czas ładowania strony.

Zauważmy, że projektujemy dla użytkowników, a nie przeglądarek. Mało prawdopodobne jest, że użytkownik będzie otwierał naszą witrynę na kilku różnych przeglądarkach i doszukiwał się różnic. Ponadto, chęć udostępnienia witryny użytkownikom urządzeń mobilnych o jakże różnych parametrach czyni postulat zapewnienia identycznego wyglądu po prostu niemożliwym do realizacji.

W praktyce lepiej jest trzymać się zasady, że witryna powinna zapewniać podstawową funkcjonalność wszystkim użytkownikom, a użytkownicy nowszych przeglądarek i urządzeń mogą spodziewać się lepszego wyglądu. Takie podejście znacznie redukuje koszty utrzymania i oszczędza łącza.

Przykładowo, efekt okrągłych narożników lub cieniowania jest kwestią jednej linijki w przypadku nowych przeglądarek obsługujących fragmenty CSS 3, ale jednocześnie wymaga pisania programów w JavaScripcie i przygotowywania odpowiednich obrazków w starszych przeglądarkach. Lepiej zatem w starszych przeglądarkach w ogóle zrezygnować z takich dekoracji pamiętając jednak aby funkcjonalność witryny pozostała bez zmian.

Dobre praktyki kodowania HTML

Używaj elementów HTML stosownie do ich znaczenia, a nie ze względu na ich wygląd na stronie. Do definiowania wyglądu dokumentu używaj kaskadowych arkuszy stylów (CSS).

Uważa się, że dzięki umieszczeniu treści jak najbliżej początku strony zwiększa się jej widoczność w wyszukiwarkach.

Znaki mniejszości oraz znaki „ampersand” zapisuj jako < i & – zauważ że nie wymaga się tego od znaku większości (aczkolwiek jest dobrą praktyką kodować je jako >).

Szablon dokumentu HTML

Trzymanie się standardów daje nadzieję na zgodność w przód tworzonych przez nas witryn z wszelkimi przeglądarkami, platformami i urządzeniami internetowymi jakie powstaną w przyszłości.

Z powodów historycznych przeglądarki mogą wyświetlać stronę HTML zasadniczo w jednym z dwóch trybów:

  • trybie dziwactw (ang. quirk mode) wymaganym przez strony WWW powstałe zanim przeglądarki typu MSIE 5/Netscape 4 zaczęły trzymać się standardów (w szczególności chodzi tu o używanie niestandardowego, specyficznego dla przeglądarki modelu DOM),
  • trybie standardów (ang. standard mode).

O tym czy strona WWW będzie renderowana w trybie standardów decyduje umieszczona na początku kodu HTML deklaracja DOCTYPE. Jej brak, nieprawidłowa forma lub poprzedzenie czymkolwiek (nawet prologiem XML lub komentarzem XML w niektórych wersjach MSIE) powoduje użycie trybu dziwactw.

Szablon dokumentu HTML zgodnego ze standardami:

  <!DOCTYPE...>
  <html>
    <head>
      <title>...</title>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
      ...
    </head>
    <body>
      ...
    </body>
  </html>

Prawidłowe formy DOCTYPE:

  • HTML5 (włącza tryb standardowy dla wszystkich nowszych przeglądarek, w tym MSIE 8.0 – nie działa dla MSIE <= 7.0):
    <!DOCTYPE html>
  • HTML 4.01:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">
  • XHTML 1.0:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    W tym przypadku znacznik <html> powinien wyglądać następująco:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Tryb standardów ma dwa często używane podtypy: strict oraz transitional – co znajduje swoje odzwierciedlenie deklaracji DOCTYPE.
Warto wiedzieć jakie są różnice:

  • Strict nie toleruje deprecjonowanych obiektów, zwłaszcza dotyczących prezentacji (np. atrybut bgcolor, znacznik <font>),
  • Transitional jest lepszy jeśli na stronie użytkownicy mogą osadzać swój własny (być może błędny) kod HTML,
  • Strict nie pozwala na stosowanie atrybutu target elementu a (nie można otworzyć linku w osobnym oknie inaczej niż za pomocą JavaScriptu).

XHTML

Profesjonalni webmasterzy w swoich książkach gorąco reklamują XHTML jako bardziej poprawny od HTMLa i są na ogół zawiedzeni że najnowszy standard HTML5 oznacza raczej powrót do niechlujnej składni HTMLa 4.0 niż kontynuację dobrze zapowiadającego się XHTML 1.1. Ponieważ składniowo poprawny kod XHTML jest prawidłowym kodem HTML (ale nie na odwrót) więc nic nie stoi na przeszkodzie, aby samemu narzucić sobie pewne standardy formatowania kodu źródłowego przejęte z XHTML:

  • Nazwy znaczników i atrybutów pisz małymi literami.
  • Wartości wszystkich atrybutów umieszczaj w cudzysłowach.
  • Przypisuj wartości wszystkim atrybutom. HTML dopuszcza konstrukcje typu <input disabled> gdzie istotny jest sam fakt istnienia atrybutu a jego wartość nie ma znaczenia – w XHTMLu atrybut musi mieć wartość, a w takich przypadkach wartość musi być identyczna z nazwą atrybutu: <input disabled="disabled">
  • Zamykaj wszystkie znaczniki.
  • Zamykaj „puste” znaczniki spacją i ukośnikiem, np. <br />. Odstęp przed końcowym ukośnikiem pozwala uniknąć błędnego interpretowania kodu w przeglądarkach wyprodukowanych przed pojawieniem się standardu XHTML.
  • Nie umieszczaj podwójnych myślników w komentarzach HTML. Taki komentarz jest błędny: <!-- ------- -->.

Walidacja dokumentu HTML

Do walidacji stron warto użyć zewnętrznych serwisów takich jak W3C Markup Validation Service, Validator.nu (sprawdzają też zgodność z HTML5) czy WDG HTML Validator, ewentualnie rozszerzeń przeglądarek takich jak Web Developer dla Firefoxa czy Developer Toolbar dla Internet Explorera.

Bardzo przydatnym narzędziem jest również program Tidy dostępny online oraz jako polecenie wiersza poleceń. Pozwala on naprawiać błędy w HTMLu, konwertować HTMLa do XMLa oraz formatować (z wcięciami) kod XMLa.

Witryna Browser Shots bezpłatnie generuje zrzuty ekranu wskazanej witryny dla bardzo wielu różnych typów i wersji przeglądarek w różnych systemach operacyjnych.

Typowe błędy walidacji HTML

  • Strona HTML musi mieć element <title> umieszczony wewnątrz <head>,
  • Elementy formularza nie mogą znajdować się bezpośrednio w elemencie form – zagnieżdżaj je np. w elemencie fieldset,
  • W znacznikach img atrybut alt jest obowiązkowy; zawiera on informacje wyświetlane zamiast obrazka w przeglądarkach tekstowych i czytane przez czytniki ekranu w przypadku osób niepełnosprawnych. Jeśli obrazek jest ewidentnie detalem dekoracyjnym (tło, okrągłe narożniki, cień itp.), powinien znaleźć się w arkuszu stylów, a nie w HTMLu.
  • W elementach śródliniowych (ang. inline) nie wolno umieszczać elementów blokowych. Zapis <a href="..."><h1>Tytuł</h1></a> jest niepoprawny (należy umieszczać śródliniowy znacznik a wewnątrz blokowego h1).

Narzędzia deweloperskie

IETester to darmowa przeglądarka internetowa, która pozwala obejrzeć witrynę WWW pod IE 5.5, IE6, IE7 oraz IE8 na systemach Windows XP i Vista; obsługuje zarówno silniki renderujące jak i JavaScript.

WWW, 5.0 out of 5 based on 1 rating
Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>