Nowoczesne strony www. Część IV: szybkie strony

Szybkie strony www

Szybkie strony www

W niniejszej części instruktażu dotyczącego dobrych praktyk projektowania i tworzenia witryn internetowych mam zamiar przedstawić podstawowy zakres wiedzy związanej z poprawieniem szybkości wyświetlania się stron w przeglądarce internetowej. Temat jest bardzo rozległy, więc skupię się na kilku praktycznych poradach, jednak z odrobiną koniecznej teorii na wstępie.

Odrobina teorii

Za każdym razem gdy strona www jest wyświetlana w przeglądarce internetowej muszą zostać pobrane z serwera wszystkie jej elementy, takie jak sam kod HTML, różne skrypty JavaScript, ewentualne obrazki, style CSS i tym podobne. Niektóre strony mogą składać się tylko z kilku plików i mieć małe rozmiary – może kilka kilobajtów, a wówczas strona powinna się ładować dość szybko. Jednak inne strony mogą składać się z dziesiątek, a nawet z setek plików, a ich całkowita waga może wynosić nawet kilka megabajtów. Może to być powodem spowolnionego wyświetlania się takich stron. Problem jest zauważalny szczególnie wtedy, gdy łącze internetowe nie należy do zbyt szybkich. Dodatkowo, należy pamiętać o tym, że dla każdego pliku, który stanowi część strony, a mogą to być przykładowo obrazki lub arkusze CSS, przetwarzane są osobne, dodatkowe żądania HTTP, które umożliwiają pobranie zawartości pliku z serwera. Im więcej osobnych plików będących częścią strony, tym więcej osobnych żądań HTTP i tym większy ruch zapytań i odpowiedzi pomiędzy klientem a serwerem, co może stać się jedną z przyczyn powolnego wyświetlania się strony.

Protokół HTTP
Protokół HTTP

Powolne strony nie tylko zniechęcają odwiedzających do dalszych działań w witrynie, ale psują ogólną reputację witryny w sieci. Jest bowiem wiele serwisów internetowych, takich jak Alexa.com, które nieustannie gromadzą dane o jakości witryn obecnych w sieci i można w nich podejrzeć, między innymi, informacje o szybkości danej witryny, ilości odwiedzających ją użytkowników i tym podobne. Pomimo iż algorytm pozycjonowania stron w wynikach wyszukiwania Google nie jest do końca znany i nieustannie się zmienia, to wedle pogłosek krążących wśród zawodowych projektantów witryn internetowych, a także ekspertów SEO, szybkość wyświetlania się stron może mieć niemały efekt na ich docelową pozycję w wyszukiwarce, a przecież właśnie na dobrej pozycji w wyszukiwarkach najbardziej wszystkim wlaścicielom witryn zależy. Warto zatem zadbać o to, by strony wyświetlały się tak szybko, jak tylko jest to możliwe.

W związku z powyższym należy wiedzieć, że powolne strony nie wróżą niczego dobrego i warto jak najszybciej sprawić, aby strony ładowały się szybko. Jak to zrobić? Otóż postaram się w tym zakresie udzielić kilku podstawowych porad.

Pamięć podręczna przeglądarki

Pamięć podręczna przeglądarki może służyć sporą pomocą w przyśpieszeniu wyświetlania się stron www, przechowując niektóre z plików lokalnie, w swojej pamięci podręcznej, przez określony czas, zaraz po pierwszym pobraniu wszystkich elementów strony. Oczywiście strona może się wciąż wolniej wyświetlać przy pierwszym jej odwiedzeniu, jednak przy kolejnych wizytach na stronie nie ma konieczności ponownego pobierania przechowywanych lokalnie elementów, aż do czasu ich terminu przedawnienia. Korzystanie w odpowiedni sposób z pamięci podręcznej przeglądarki internetowej znacznie przyśpiesza wyświetlanie się strony w przeglądarce.

Zatem warto jest określić dłuższy termin przydatności dla tych elementów strony, które z małym prawdopodobieństwem będą się często i regularnie zmieniać. Takie elementy mogą być pobierane raz na określony czas. Przykładem może być logo firmowe obecne w witrynie. Twoje logo w witrynie internetowej, na przykład, prawdopodobnie nie zmieni się z dnia na dzień, więc można dla niego ustawić dłuższy termin przydatności, tak aby jego pobieranie nie powtarzało się za każdym razem gdy użytkownik odświeża stronę.

Jak ustalić terminy ważności różnego rodzaju treści? Jeśli chodzi o popularny serwer Apache, przedstawię prostą metodę polegającą na dodaniu odpowiednich dyrektyw do pliku .htaccess.

Oto przykładowe dyrektywy określające terminy ważności niektórych rodzajów treści:

<IfModule mod_deflate.c>
ExpiresActive on
ExpiresDefault „access plus 1 month”
# CSS
ExpiresByType text/css „access plus 1 year”
# Data interchange
ExpiresByType application/atom+xml „access plus 1 hour”
ExpiresByType application/rdf+xml „access plus 1 hour”
ExpiresByType application/rss+xml „access plus 1 hour”
ExpiresByType application/json „access plus 0 seconds”
ExpiresByType application/ld+json „access plus 0 seconds”
ExpiresByType application/schema+json „access plus 0 seconds”
ExpiresByType application/vnd.geo+json „access plus 0 seconds”
ExpiresByType application/xml „access plus 0 seconds”
ExpiresByType text/xml „access plus 0 seconds”
# HTML
ExpiresByType text/html „access plus 0 seconds”
# JavaScript
ExpiresByType application/javascript „access plus 1 year”
ExpiresByType application/x-javascript „access plus 1 year”
ExpiresByType text/javascript „access plus 1 year”
# Media files
ExpiresByType audio/ogg „access plus 1 month”
ExpiresByType image/bmp „access plus 1 month”
ExpiresByType image/gif „access plus 1 month”
ExpiresByType image/jpeg „access plus 1 month”
ExpiresByType image/png „access plus 1 month”
</IfModule>

Kompresja gzip

Kompresja gzip jest w stanie znacznie przyśpieszyć strony internetowe, redukując wielkość pobieranych z serwera plików nawet o 70%. Jak działa ten mechanizm? Otóż gzip lokalizuje i tymczasowo podmienia powtarzające się ciągi znaków w plikach tekstowych, co sprawia że to rozwiązanie idealnie nadaje się do treści HTML i CSS, w których różne ciągi znaków bardzo często lubią się powtarzać. Jest to bardzo proste, a zarazem bardzo skuteczne rozwiązanie, które należy koniecznie wdrażać do większości projektów witryn internetowych.

Jak uruchomić kompresję gzip? Sposobów może być kilka, także w zależności od stosowanego serwera. Przedstawię tutaj prostą metodę, opartą na dyrektywach dla serwera Apache, umieszczonych w pliku .htaccess:

<IfModule mod_deflate.c.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Optymalizacja plików tekstowych

Im więcej plików do pobrania, tym więcej żądań HTTP, a im większe pliki tym dłużej trwa ich pobieranie z serwera. Co zatem warto zrobić w celu przyśpieszenia pobierania plików z serwera? Otóż przede wszystkim warto zoptymalizować pliki ilościowo. Oznacza co, że jeśli przykładowo korzystamy z wielu osobnych plików CSS, wówczas warto zgrupować pliki do jednego większego pliku. W związku z naturą protokołu HTTP, pobieranie jednego większego pliku tekstowego trwa krócej niż pobieranie tej samej ilości danych, zawartej w kilku mniejszych plikach.

Dodatkowe przyśpieszenie można uzyskać optymalizując pliki jakościowo, czyli eliminując z nich niepotrzebne dane, takie jak przykładowo średniki na końcu wierszy oraz spacje w plikach CSS, lub niepotrzebne spacje w plikach HTML.

Przykładowy niezoptymalizowany krótki fragment CSS (135 bajtów):

html, body {
font-family: ‚PT Sans’, sans-serif; line-height:16pt;
}
h1,h2,h3,h4,h5,h6 {
color: #0c1b28;
}

Ten sam fragment CSS, lecz zoptymalizowany (94 bajty):

html,body{font-family:’PT Sans’,sans-serif;line-height:16pt}
h1,h2,h3,h4,h5,h6{color:#0c1b28}

Optymalizacja grafiki

Typowym błędem, popularnym wśród początkujących projektantów witryn internetowych, jest przesyłanie na serwer nie zoptymalizowanej grafiki, co jest popularną przyczyną powolnego wyświetlania się stron.

Wszelkie obrazki związane ze stronami www powinny zostać zoptymalizowane pod kątem internetu przed ich przesłaniem na serwer. Wiele programów do obróbki grafiki pozwala na osiągnięcie tego efektu w prosty i szybki sposób. Sposób postępowania zależy od stosowanego programu graficznego.

Google zaleca w tym celu korzystać z darmowego programu convert. Jest on popularny i bardzo prosty w użyciu, bezpośrednio z wiersza poleceń. Przykładowe użycie programu convert:

magick convert logo.png -strip logo_min.png

Należy koniecznie pamiętać, że obrazki nie powinny być w żadnym wypadku przesyłane na serwer w rozdzielczości większej, niż ta wymagana do ich prawidłowego wyświetlania w docelowym dla potrzeb stron formacie.

Korzystanie z CDN

CDN (Content Delivery Network) składa się ze zbioru serwerów rozmieszczonych na całym świecie, które regularnie pobierają zawartość danej witryny internetowej i między innymi zachowują w pamięci podręcznej te pliki, które nie muszą być regularnie aktualizowane, takie jak obrazki, czy style CSS.

Ten prosty sposób działania pozwala na bardzo skuteczną optymalizację stron www. W ramach usług oferowanych przez niektóre systemy CDN znajdują się ciekawe rozwiązania, takie jak wysoka optymalizacja przechowywanych w pamięci podręcznej plików. Przechowywane w lokalnej pamięci podręcznej serwerów pliki są kompresowane przed ich przesłaniem do przeglądarki internetowej, co sprawia, że wyświetlanie się stron jest jeszcze szybsze.

CDN
CDN

CDN to bardzo fajne rozwiązanie, poprawiające nie tylko szybkość wyświetlania się stron, lecz także ogólnoświatową dostępność serwisu, co sprzyja również lepszej pozycji stron w wynikach wyszukiwania.

Niestety CDN ma jedną wadę, a mianowicie to dość kosztowna usługa, więc korzystają z niej przeważnie duże przedsiębiorstwa, którym zależy na ogólnoświatowej dostępności ich witryn internetowych.

Nowoczesne strony www. Część III: kompatybilność z urządzeniami mobilnymi

Strony www responsywne

Kompatybilność witryny web z urządzeniami mobilnymi

Dobre strony internetowe powinny się prawidłowo wyświetlać na każdym urządzeniu obsługującym przeglądarkę www. Pomimo iż osiągnięcie tego celu jest stosunkowo łatwe, to do niedawna zagadnienie to stanowiło temat tabu, nawet wśród osób zawodowo zajmujących się tworzeniem witryn internetowych.

W skutek pojawienia się w sieci wytycznych Google związanych z mobilnością oraz wynikającej z nowej sytuacji zmiany algorytmu pozycjonującego strony w wynikach wyszukiwania na korzyść projektów kompatybilnych z urządzeniami mobilnymi, twórcy witryn internetowych poczuli się mocno zdezorientowani. W związku z gwałtowną zmianą tendencji web oraz kompletną niekompatybilnością większości istniejących już witryn z urządzeniami mobilnymi, popularne stało się wówczas rozwiązanie polegające na tworzeniu osobnej wersji witryny, przeznaczonej na urządzenia mobilne. Google jednak w swoich wytycznych dla webmasterów ostrzega, iż takie rozwiązanie nie jest ani dobre, ani zalecane. Wedle wytycznych Google, związanych z dobrymi praktykami tworzenia stron internetowych, takie rozwiązanie jest wręcz poważnym błędem webmasterskim.

Google udostępnia online bardzo przydatne narzędzie, za pomocą którego można sprawdzić czy dana witryna internetowa jest dostosowana dla urządzeń mobilnych.

Jak w sposób najbardziej efektywny i zgodny z dobrymi praktykami webmasterskimi zaprojektować i stworzyć dobrą witrynę web w pełni dostosowaną dla urządzeń mobilnych?

Otóż postaram się udzielić w tym zakresie kilku podstawowych porad.

Meta znacznik Viewport

Z pomocą w sprawach kompatybilności z urządzeniami mobilnymi przychodzi meta znacznik Viewport.

Strony docelowo responsywne, czyli mające się wyświetlać prawidłowo niezależnie od rozmiarów ekranu urządzenia, powinny zawierać meta znacznik Viewport, który pozwala określić prawidłowe proporcje ekranu. Oto przykładowe i bardzo popularne zastosowanie meta znacznika Viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Jakie jest działanie powyższego kodu? Otóż width=device-width dopasowuje szerokość strony do szerokości wyświetlacza, która zależy oczywiście od stosowanego urządzenia, natomiast initial-scale=1.0 ustawia początkowe proporcje strony jeden do jednego w chwili jej załadowania.

Viewport jest dziś bardzo ważnym meta znacznikiem i warto się z nim dobrze zapoznać.

Poniżej przedstawiam konkretny wizualny przykład przydatności meta znacznika viewport:

Strona www bez viewport
Strona www bez viewport
Strona www z viewport
Strona www z viewport

Płynność i proporcjonalność

Kluczowe koncepcje stojące za nowoczesnym i funkcjonalnym projektem to płynność i proporcjonalność, w przeciwieństwie do układów o stałej szerokości. Stosowanie jednostek względnych do pomiarów może ułatwić projektowanie dobrym witryn internetowych oraz zapobiegać przypadkowemu tworzeniu elementów, które są zbyt duże lub zbyt małe dla danego wyświetlacza.

Nie zalecane jest zatem określanie stałych wymiarów elementów HTML. Należy określać tylko i wyłącznie proporcje elementów, co pozwoli na proporcjonalne dopasowanie elementów do możliwości wyświetlacza.

Przykładowe zastosowanie koncepcji płynności i proporcjonalności może wyglądać następująco:

div.pelny { width: 100%; }

Niezalecane jest ustawianie stałych, bezwzględnych rozmiarów dla elementów HTML:

div.pelny { width: 1024px; }

Style dopasowane do urządzenia

Kolejna ważna sprawa o której należy pamiętać to dopasowanie czcionki do wielkości wyświetlacza.

Jeśli czcionka będzie zbyt mała, wówczas treść będzie trudna do odczytania na urządzeniach mobilnych. Z drugiej strony, jeśli ustawimy zbyt dużą czcionkę, to strony będą paskudnie wyglądać na laptopach i komputerach stacjonarnych. Jak więc rozwiązać tego typu problem? Otóż jest na to bardzo proste rozwiązanie.

Stylizacja elementów HTML zależna od rozmiarów wyświetlacza urządzenia to dobra praktyka, której należy się trzymać w celu osiągnięcia pełnej kompatybilności witryny w różnego rodzaju urządzeniami.

W tej kwestii okazuje się bardzo pomocna reguła CSS @media, która służy do definiowania różnych reguł stylu dla różnych typów nośników / urządzeń. A oto przykładowe i podstawowe zastosowanie reguły @media, umożliwiające określenie stylowych różnic dla odmiennych rozdzielczości wyświetlaczy:

@media only screen and ( max-width: 640px ) {
/* tutaj style dla urządzeń o rozdzielczości do 640px */
}
@media only screen and (min-width: 640px ) {
/* tutaj style dla urządzeń o rozdzielczości od 640px */
}

Reguła @media jest dziś szczególnie ważna i przydatna, więc naprawdę warto się z nią dogłębnie zapoznać.

Nowoczesne strony www. Część II: CSS

CSS3

Stylizacja elementów HTML za pomocą CSS

W tej części instruktażu dedykowanego dobrym praktykom projektowania i tworzenia nowoczesnych witryn internetowych omówię kilka ważnych aspektów związanych ze stylizacją kodu HTML.

Style CSS

Style CSS umożliwiają łatwe dopasowywanie wyglądu dokumentu HTML do różnych potrzeb, bez konieczności ingerencji w sam kod, co oznacza bardzo duże ułatwienie w przypadku modyfikowania wyglądu całych witryn. Szczególnie dziś, w czasach panowania różnorodnych urządzeń mobilnych, dobre opanowanie pracy ze stylami CSS jest podstawowym kluczem do kompatybilności witryny z każdym rodzajem wyświetlacza.

Stylizacja witryny internetowej powinna być oparta na sprawdzonych i zgodnych z dobrymi praktykami technikach CSS.

Techniki stylizacji CSS

Style CSS mogą być zawarte w zewnętrznych arkuszach styli (style zewnętrzne), bądź osadzone w kodzie HTML (style wewnętrzne), a także dodawane bezpośrednio do samych znaczników HTML (stylizacja bezpośrednia). Ta ostatnia metoda powinna być stosowana bardzo rozważnie, tylko w przypadku prawdziwej konieczności.

W przypadku zewnętrznych arkuszy CSS, w sekcji HEAD kodu HTML dokumentu należy umieścić odnośniki do odpowiednich arkuszy, czyli przykładowo:

<head>
<link rel="stylesheet" media="screen" href="./css/style.css">
</head>

W przypadku styli CSS osadzonych w kodzie HTML dokumentu, style również osadzamy w sekcji HEAD, co może wyglądać przykładowo następująco:

<head>
<style type=”text/css”>
body {background-color: #f0f0f0;}
h1 {color: white;}
p {color: blue;}
</style>
</head>

Bezpośrednia stylizacja znaczników HTML, której stosowanie generalnie odradzam zgodnie z dobrymi praktykami, mogłaby przykładowo wyglądać następująco:

<h1 style="margin-bottom:2em;">Strony www</h1>

Należy oczywiście pamiętać, iż w przypadku zewnętrznych arkuszy CSS, warto umieścić wszelkie wariacje stylowe w jednym arkuszu CSS, unikając korzystania z większej ilości arkuszy. Dlaczego? Otóż jest to jedna z tak zwanych dobrych praktyk optymalizujących ładowanie stron, zalecana przez Google. Ładowanie jednego większego arkusza CSS zajmuje o wiele mniej czasu niż ładowanie kilku osobnych mniejszych arkuszy, co znacznie skraca czas ładowania stron.

A teraz postaram się udzielić kilku konkretnych porad, jeśli chodzi o dobre praktyki pracy z CSS.

Wyeliminuj rozbieżności domyślnych wartości elementów CSS w różnych przeglądarkach

Przeglądarki internetowe różnych producentów potrafią się zachowywać na odmienne sposoby jeśli chodzi o domyślne wartości dla rozmaitych elementów CSS. Aby uniknąć niespodzianek z wyświetlaniem stron, warto jest zresetować elementy CSS do wartości domyślnych. Jak to zrobić? Otóż można się w tym celu posłużyć popularnymi bibliotekami resetującymi, takimi jak normalize.css lub tym podobnymi. Dla tych, którym wystarczy bardzo podstawowy reset wartości domyślnych tylko niektórych elementów CSS, polecam zastosowanie kodu CSS ustawiającego domyślne wartości, który należy umieścić na samym początku arkusza. Kod ten może wyglądać przykładowo tak:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Stosuj elementy CSS3 dla układów stron

Stosując CSS warto korzystać ze wszystkich, niekiedy niestety mało znanych, dobrodziejstw CSS3. Dla przykładu opiszę tutaj korzyści płynące z mało znanej właściwości o nazwie flex.
Właściwość flex określa długość danego elementu w stosunku do reszty elastycznych elementów wewnątrz tego samego pojemnika.
Otóż w powszechnej sytuacji, gdy mamy zamiar zachować równą wysokość wszelkich sekcji układu danej strony, niezależnie od ilości tekstu obecnego w każdej z sekcji, z ogromną pomocą przychodzi nam właściwość CSS flex. Poniższy przykład kodu demonstruje w dużym uproszczeniu tego typu scenariusz:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page {
display:flex;
max-width:1200px;
margin:0 auto;
}
#main {
flex-grow:1;
border:1px solid #f0f0f0;
padding:0.2em;
}
aside {
flex-shrink:0;
width:280px;
background-color:#f0f0f0;
padding:0.2em;
}
@media all and (max-width: 800px) {
#page {
flex-flow:column;
}
aside {
width:auto;
}
}
</style>
</head>
<body>
<section id="page">
<div id="main">
<p>Ta strona składa się z sekcji o takiej samej wysokości</p>
</div>
<aside>
<p>To jest sekcja boczna</p>
</aside>
</section>
</body>
</html>

Oto jak prezentuje się w przeglądarce powyższy dokument HTML, po dodaniu większej ilości tekstu do sekcji main:

Stosowanie CSS3
Stosowanie CSS3

Przetestowanie powyższego kodu pozwoli zauważyć, że nawet niezależnie zmieniając ilość tekstu w każdej z sekcji, obie sekcje zachowują taką samą wysokość, co przyczynia się do estetycznego wyglądu układu. Dodatkowo w powyższym przykładzie zastosowałem elementy CSS związane z responsywnością strony, o której będzie mowa w następnej części instruktarzu, oraz ułatwiające stylizację znaczniki HTML 5, o którym wspominałem w części pierwszej.

Trzymaj się składni CSS i unikaj typowych błędów

Ponieważ jakość witryny www w dużej mierze zależy od jakości zawartego w niej kodu CSS, gorąco zachęcam do trzymania się oficjalnej składni. Pomimo iż opanowanie CSS jest stosunkowo proste, to niestety nawet doświadczeni projektanci witryn popełniają błędy.

Powszechnym błędem, który może mieć poważne konsekwencje, jest stosowanie niewłaściwych dla danego celu selektorów CSS. Selektory # (id) należy stosować wyłącznie dla niepowtarzalnych na stronie elementów, takich jak przykładowo #wrapper, #main, #footer, które są elementami układu strony. Selektory # (id) można również stosować do stylizacji elementów, które muszą być rozpoznawalne przez dodatkowe skrypty. W każdym innym przypadku należy posługiwać się klasami CSS, a nie identyfikatorami.

Popularnym błędem jest także jednoczesne stosowanie różnych jednostek miary. Przykładowo może to wyglądać następująco:

h1 {margin-top:10px;padding:1em;}

Innym typowym błędem jest dodawanie spacji pomiędzy wartością a jednostką miary:

h1 {
margin-top:1 em; /* Nie rób tego */
}

To tyle na dziś. Mam nadzieję, że to co napisałem okaże się przydatne. Następna część będzie o kompatybilności stron www z różnymi urządzeniami mobilnymi.

Nowoczesne strony www. Część I: język HTML

Strony www

Podczas gdy jeszcze 10 lat temu sukces witryny internetowej zależał w dużej mierze od jakości zastosowanego kodu HTML oraz rodzaju obecnej w niej treści, dziś stworzenie dobrej i efektownej witryny internetowej to bardzo złożony proces, którego podstawą powinna być dogłębna wiedza w tej dziedzinie.

W trakcie projektowania i realizacji nowoczesnych stron internetowych należy zwrócić uwagę na cały szereg ważnych czynników, decydujących o jej sukcesie lub porażce. Z myślą o osobach zamierzających rozpocząć przygodę z projektowaniem i tworzeniem witryn internetowych przygotowałem ten krótki poradnik, w którym postaram się wyjaśnić podstawy projektowania i tworzenia dobrej, nowoczesnej witryny web.

W tym artykule omówię tylko niektóre z tak zwanych dobrych praktyk z zakresu projektowania i tworzenia witryn internetowych, w przeciwnym razie, zamiar szczegółowego opisania każdego tematu wiązał by się z wyzwaniem równym napisania całej książki.

Można potraktować ten materiał jako podstawowy instruktaż z zakresu projektowania dobrych i funkcjonalnych witryn internetowych. Ze względu na obszerność prezentowanych tematów, postanowiłem podzielić materiał na sekcje odpowiadające różnym tematom, które zostaną opublikowane w kolejnych dniach. Dziś zatem przedstawię czytelnikom część pierwszą mojego instruktażu, dedykowaną językowi HTML.

Nowoczesne i funkcjonalne strony www. Część I: język HTML

Podstawą działania każdej witryny internetowej jest kod HTML, który kształtuje wizualny, a także funkcjonalny aspekt witryny po stronie przeglądarki internetowej.

Język HTML
Język HTML

HTML to hipertekstowy język znaczników, służący do tworzenia dokumentów hipertekstowych, takich jakimi są przykładowo strony internetowe.

Nowoczesne witryny internetowe stosują głównie HTML w wersji 5, który oferuje dużo większą funkcjonalność niż jego poprzednie wersje. HTML 5 udostępnia cały szereg nowych znaczników, głównie semantycznych, które wcześniej nie istniały, a które mogą naprawdę uprościć wiele kwestii technicznych, takich jak przykładowo praca ze stylami CSS. Stosowanie nowych znaczników semantycznych umożliwia wdrożenie bardziej przejrzystego kodu HTML, w którym większość znaczników DIV można zastąpić samymi znacznikami semantycznymi. Zaawansowane możliwości jakie oferuje HTML 5 w zakresie formularzy, nie tylko ograniczają, lecz niekiedy całkowicie eliminują konieczność stosowania dodatkowych skryptów js w celu usprawnienia ich funkcjonalności. Kolejnymi przykładowymi atutami HTML 5 jest natywna obsługa geo-lokalizacji oraz możliwość wprowadzania szczegółowych ustawień związanych ze sposobem działania pamięci podręcznej przeglądarki.

Oto uproszczony przykład zastosowania nowych możliwości HTML 5 w zakresie formularzy internetowych:

<form>
<label>Imię</label>
<input name="imie" placeholder="Wprowadź imię">
<label>Email</label>
<input name="email" type="email" placeholder="Wprowadź Email">
<label>Wiadomość</label>
<textarea name="message" placeholder="Wprowadź wiadomość"></textarea>
<input id="submit" name="submit" type="submit" value="Wyślij">
</form>

Oprócz zalecenia stosowania HTML w wersji 5, na co jeszcze należy zwrócić uwagę w tym zakresie? Otóż przede wszystkim na to, by kod HTML był zgodny z oficjalną składnią. Wydaje się to być prostym zadaniem, lecz w wielu przypadkach jest ono dość trudne do wykonania, a dzieje się tak głównie dlatego, że nieprawidłowa składnia kodu HTML nie przyczynia się do wyświetlania w przeglądarce jakichkolwiek informacji o błędach. Problem ze składnią jest zauważany często tylko wówczas, gdy pojawiają się nieprawidłowości z wyświetlaniem elementów stron. Tylko w takich sytuacjach przeważnie twórca projektu zastanawia się nad sprawdzeniem składni HTML. Czemu jednak naprawdę warto stosować prawidłową składnie HTML? Otóż istnieją uzasadnione podejrzenia iż algorytm wyszukiwarki Google bierze pod uwagę także jakość kodu HTML w celu wyliczenia odpowiedniej dla danej witryny pozycji w wynikach wyszukiwania, ponieważ dobrej jakości kod HTML w pewnej mierze może świadczyć o dobrej jakości witryny.

W przypadku własnoręcznego tworzenia kodu HTML można w prosty sposób przestrzegać reguły trzymania się prawidłowej składni. Jest to nieco pracochłonne, ale zadanie jest do wykonania. Problem pojawia się w przypadku korzystania z popularnych systemów CMS, takich jak Drupal, Joomla, czy nawet WordPress. Wówczas trzymanie się prawidłowej składni HTML staje się trudnym do wykonania zadaniem, które w większości przypadków raczej mija się z celem.

W sieci można znaleźć bardzo dużo narzędzi sprawdzających składnię HTML. Najbardziej godnym zaufania jest tak zwany walidator W3C

Co jeszcze jest ważne jeśli chodzi o sam kod HTML? Otóż gorąco zniechęcam wszystkich do bezpośredniej stylizacji znaczników, czynności która znacznie ogranicza całą gamę korzyści płynących z prawidłowego stosowania arkuszy styli CSS, ale do tego tematu wrócę w następnej części instruktażu, której opublikowanie zaplanowałem na dzień jutrzejszy.