Nagłówek Projektowanie-Stron.RaVns, tworzenie stron www, projektowanie stron www nowy sącz, projektowanie stron internetowych

Technicznie rzecz biorąc: Uważam, że najlepszym rozwiązaniem tworzenia stron jest technologia XHTML (dla mnie następca HTML) ze stylami CSS, co pozwala rozdzielić warstwę prezentacyjną, czyli formatowanie tekstu, czcionek, koloru i wiele innych parametrów od struktury dokumentu/całej strony, czyli szkieletu samego kodu/znaczników XHTML. Pozwala to później na łatwiejszą edycję.
Zatem odchodzi się od standardu kodowania w HTML, które jest już przestarzałe i przysparza w edycji i obsłudze tylko kłopot (aczkolwiek nie zaprzeczając plusów tej technologii).

Na schemacie pierwszy plik z czystym tekstem, drugi plik formatujący stylami CSS tekst pierwszego i trzeci wynikowy tych dwóch.

Schemat pokazujący (potencjalna strona w standardzie XHTML) warstwę tekstową, strukturę dokumentu w połączeniu z wartwą prezentacyjną dający w efekcie plik HTML sterowany regułami CSS, które mogą być powielane dla wielu innych plików HTML.
Pierwszy plik to zwykły HTML z czystym tekstem, drugi plik formatujący stylami CSS tekst pierwszego i trzeci plik to efekt nałożenia styli formatowania na tekst.

Reguły używane w języku XHTML (bazuje on na języku XML) są zwykle łatwiejsze do zapamiętania niż stosowane w HTML. Spójność reguł XML powoduje, że jest on mniej podatny na powstawanie błędów. Składnia XHTML jest bliska składni XHTML-MP (Mobile Profile) oraz HTML Basic używanych przez wiele urządzeń przenośnych oraz wspomagających.

Sposób tworzenia witryn internetowych uległ zmianie, ale można odnieść wrażenie, że ktoś zapomniał o tym powiedzieć ich twórcom, którzy poprzez nierozważne lub nieumiejętne, czy też sprzeczne stosowanie znaczników kodu HTML pozwalało sobie na brak dyscypliny w tworzeniu ówczesnych stron. Te nowe, lepsze praktyki są stosowane w programowaniu i projektowaniu określanym jako "zgodne ze standardami sieciowymi", co jest bardziej przychylne XHTMLowi.


Co to znaczy W3C - World Wide Web Consortium i sformułowanie: strony "zgodne ze standardami sieciowymi"?

Logo W3C - World Wide Web Consortium

Pojęcie standardy sieciowe jest używane w stosunku do stron internetowych, które zostały zbudowane w oparciu o otwarte zalecenia konsorcjum World Wide Web Consortium (W3C) i innych organizacji opracowujących standardy. Tego rodzaju strony są, więc całkowitym przeciwieństwem "zamkniętych" stron używających funkcji opracowanych przez korporacje i chronionych prawami autorskimi.

Współczesne przeglądarki są całkowitym przeciwieństwem przestarzałych przeglądarek internetowych wyposażonych wprawdzie w dość bogate funkcje, które jednak często bywały niespójne i niezgodne z innymi. Kiedy standardy sieciowe wykryją używanie przez użytkownika przestarzałej przeglądarki, to po prostu nie zostaną zastosowane, choć sama treść witryny nadal będzie dostępna.

Celem standardów jest także zapewnienie znacznie większych korzyści związanych z kwestiami dostępności treści oraz obsługą innego rodzaju mediów.

Podsumowując, strony te będą dopasowane do ogólnie panującego standardu W3C - tzn. kod będzie poprawny, semantyczny, weryfikowany przez walidator poprawności Konsorcjum W3C. Co za tym idzie strona będzie szybciej się wczytywała, miała logiczny układ - zastosowanie stylów CSS ułatwi modyfikację także w przyszłości, w efekcie będzie miała zarówno wysoką pozycję w wyszukiwarkach. Takimi oto właśnie staram się kierować metodami.

Nagłówek strony Walidatora Znaczników Nagłówek strony Walidatora Kaskadowych Arkuszy Stylów CSS

Co to znaczy semantyczny kod (semantic markup)?

Pojęcie "semantyczny" oznacza, że dokument został oznaczony w sposób, który dostarcza czytelnych informacji na temat zawartej w nim treści, zamiast koncentrować się na jej wyglądzie (wygląd treści definiujemy w arkuszach stylów CSS). Używanie czystego, inteligentnego i semantycznego kodu (X)HTML zostało ochrzczone mianem POSH, czyli Plain Old Semantic HTML i stanowi fundament tworzenia bloków nowoczesnego kodu znaczników. Celem jest osiągnięcie czystego i przejrzystego kodu znaczników pozbawionego elementów i atrybutów prezentacyjnych. Wykorzystane w kodzie elementy powinny dostarczać jasnych informacji na temat struktury treści dokumentu.

Semantyczny kod HTML/XHTML jest to po prostu poprawne stosowanie znaczników danego języka zgodnie z ich przeznaczeniem - uściślone zasady przez W3C. Stosowane ich powinno odbywać się według zalecenia, a nie tego co chcemy zobaczyć na ekranie! Jeśli na przykład chcemy pokazać jakieś dane tabelaryczne powinniśmy użyć tabeli, lecz najczęściej jest ona przez twórców stron stosowana do wyrównania tekstu czy układu całej strony z grafiką - nie jest to poprawne. Innym przykładem używanym do zapisania tematu/nagłówka strony przez projektantów stron jest zastosowanie większego rozmiaru czcionki, a przecież bardziej przyjazne dla odwiedzających i przeglądarek jest posługiwanie się nagłówkiem - h. Kolejnym błędem jest - nie zamykanie znaczników, zagnieżdżanie ich itp. Kod HTML też może być poprawny, ale jeśli stosuje się znaczniki zgodnie z ich pełnioną funkcją - w tym przypadku bardziej elastycznym i funkcjonalnym jest XHTML - wyżej wyjaśnione.

To wyjaśnienie zapewne mniej wzbudzi zainteresowanie osoby z perspektywy klienta, lecz może rozwiać pewne wątpliwości na temat technologii tworzenia stron osobom, które chciałby skupić swoją uwagę na tym temacie.

Swoją wiedzę opieram na doświadczeniu i lekturach (m.in. np. Charles Wyke-Smith - CSS, Shari Thurow - Pozycjonowanie stron w wyszukiwarkach internetowych, Laura Lemay - HTML/XHTML, Karol Wierzchołowski - Podstawy PHP, Christopher Schmitt, Kimberly Blessing i Inni - CSS i Ajax Strony zgodne ze standardami sieciowymi, itp.), a także swoich przemyśleniach.

Funkcjonalność stron jest sprawdzana w popularnych i zgodnych ze standardami sieciowymi przeglądarkach: Mozilla Firefox, SeaMonkey, Netscape, Internet Explorer (wersja od 6 do 8), Safari, Google Chrome, Konqueror, Opera.

Logo Internet Explorer 6 Logo Internet Explorer 7 Logo Internet Explorer 8
Logo Mozilla Firefox Logo SeaMonkey Logo Netscape Navigator Logo Safari Logo Google Chrome Logo Konqueror Logo Opera

Wykorzystywane technologie:

  • HTML - HyperText Markup Language - Hipertekstowy Język Znaczników,
  • XHTML - Extensible HyperText Markup Language - Rozszerzalny Hipertekstowy Język Znaczników,
  • CSS - Cascading Style Sheets - Kaskadowe Arkusze Stylów,
  • JavaScript - JS - obiektowy skryptowy język programowania,
  • PHP - Hypertext Preprocessor - obiektowy, skryptowy język programowania zaprojektowany do generowania stron internetowych w czasie rzeczywistym - (obecnie proste skrypty),
  • MySQL - System Zarządzania Relacyjnymi Bazami Danych (ang. RDBMS - Relational Database Management System) - (obecnie proste bazy danych).