Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik

CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .

kurs tworzenie witryn www
szkolenie technik informatyk programista inf.03 ee.09 inf.04 egzamin przygotowanie

 

Walidatory kodu HTML CSS jak sprawdzić jakość wykonania strony internetowej poprawny kod

flag language

Walidatory kodu HTML CSS jak sprawdzić jakość wykonania strony internetowej poprawny kod

Jakość strony internetowej składa się z co najmniej trzech elementów:

  • wygląd czy jak wolisz design strony www
  • użyteczność - User experience, UX (ang. doświadczenie użytkownika)
  • jakość kodu html, css oraz zwykle JavaScript czy też różnego rodzaju frameworków i bibliotek JavaScript

Walidatory HTML CSS jak sprawdzić jakość strony internetowej poprawny kod

W tym artykule omówię głównie trzeci punkt, skupiając się na jakości kodu html i css. Pokażę jak dokonać tak zwanej walidacji, czyli sprawdzenia jakości kodu wykorzystując bezpłatne walidatory dostępne w internecie. Po omówieniu walidacji poprawności kodu, czyli jakości strony internetowej, dodam kilka słów na dwa pierwsze wymienione punkty, tak celem wprowadzenia do następnych poradników, w których omówię UX oraz design.

Walidatory HTML CSS jak sprawdzić jakość strony internetowej

W internecie zupełnie bezpłatnie dostępne są walidatory HTML CSS, pozwalające dokonać sprawdzenia poprawności kodu HTML i CSS a także jakości strony internetowej. Z doświadczenia wiem, że większość ludzi nie zdaje sobie sprawy z tego, że tak naprawdę sprawdzenie jakości kodu witryny internetowej wiąże się z odwiedzeniem dwóch stron organizacji W3C- rozwinięcie skrótu: World Wide Web Consortium, jest to organizacja, która zajmuje się ustanawianiem standardów pisania kodów i przesyłu stron WWW. Wystarczy wpisać we właściwym okienku adres sprawdzanej strony i po chwili wyskakują informacje, które powinny być cenne przede wszystkim dla twórców stron www, a także dla właścicieli stron internetowych. W ten sposób zamawiający stronę może ocenić jakość wykonania strony przez firmę tworzącą stronę www. Walidatory (ang. Validator) znajdziesz pod adresami:

JAK SPRAWDZIĆ JAKOŚĆ AGENCJI TWORZĄCEJ TWOJĄ STRONĘ?

Powód błędów może być jeszcze jeden, to tzw. „masówka”, czyli robienie jak największej ilości stron dla klientów za jak najmniejsze pieniądze, nawet kosztem jakości kodu, bo przecież jak powiedział jeden z polityków: „naród jest głupi i wszystko kupi”. Ale to już jest wina także klienta, gdy za 400 zł oczekuje super strony internetowej. To tak jakby chciał kupić dobry nowy samochód jednej z najlepszych marek, z klimą, skórzanymi siedzeniami, itd. za .. 10000 zł. To przecież niewykonalne. Nawet samochody z dalekiego wschodu są znacznie droższe :).

Nie wierz jeżeli twórca Twojej strony www powie, że walidatory W3C są błędne lub, że tak duża jakość kodu jest nie do osiągnięcia. To jest bzdura! Dla przykładu możesz zobaczyć validację mojej strony www.gddm.com.pl . Jak widzisz nie ma żadnych błędów.

Jakość strony internetowej a popularne CMS-y i frameworki: Drupal, Wordpress, Joomla, Bootstrap

Czasami trzeba pójść na kompromis i zaakceptować kilka błędów. Np. gdy używamy jakiegoś CMS-a, Drupala, Wordpressa czy np. Joomli. Niestety dość często zdarzają się błędy, których poprawa wiąże się z „grzebaniem” w kodzie źródłowym CMS’a lub poczekaniem na kolejną wersję, w której społeczność tworząca CMS’a poprawi występujące błędy. Ale w tym przypadku mówimy o 2, 3 no może 4-ech błędach, a wierzcie mi znam mnóstwo tzw. agencji interaktywnych, które w kodach własnych stron internetowych mają po kilkadziesiąt (a czasami kilkaset!) błędów w kodach html i css. Niestety na stronach wykonanych dla klientów, także jest bardzo dużo błędów.

Walidatory kodu HTML CSS jak sprawdzić jakość wykonania strony internetowej poprawny kod

Responsywna strona z podmienianymi tłami przewijaniem tła CSS scroll

DLACZEGO WAŻNA JEST JAKOŚĆ KODU STRONY INTERNETOWEJ I JEJ POPRAWNA WALIDACJA?

Problemy z poprawnym wyświetlaniem a szybkość działania strony internetowej

zarówno na urządzeniach mobilnych jak i ekranach tradycyjnych monitorów

Strony internetowe z dobrym, walidującym się kodem HTML i CSS są po prostu poprawne i bardziej odporne na różne przeglądarki, systemy oraz upływ czasu. A co chyba najważniejsze: ładują się znacznie szybciej niż strony z błędami. Dla właściciela strony internetowej jest to zapewne bardzo ważne, aby jego klienci nie musieli długo czekać na załadowanie strony.

Błędy w kodach html i css zwykle powodują problemy z poprawnym wyświetlaniem. Czasami w jednej z wiodących przeglądarek, a innym razem w kilku. Błędem jest myślenie, że skoro moja przeglądarka wyświetla stronę poprawnie, to pozostałe również to zrobią. Przeglądarki posiadają własne silniki renderowania, tak więc np. Google Chrome oraz Safari używają Webkit, Firefox używa Gecko, Opera Presto a Edge .. – ktoś jej używa?? Przeglądarki starają się być inteligentne oferując różne systemy poprawiające błędy w kodzie, ale nie są w stanie wychwycić wszystkie, szczególnie gdy jest ich dużo.

A powinieneś/nnaś wiedzieć, że gdy użytkownikowi Twojej strony niewłaściwie otworzą się niektóre elementy strony, prawdopodobnie opuści on Twoją stronę i jest to tzw. stracony klient :).

Problemy w pozycjonowaniu

Problemy w pozycjonowaniu - wyszukiwarki internetowe do indeksowania zawartości witryny korzystają z kodu źródłowego. Co oznacza, że nie patrzą na to jak wyświetla się strona, tylko to, co znajduje się w dokumencie HTML. Podkreślam! Wyszukiwarki czytają kod i jego poprawność. Nie widzą strony tak jak Ty. Więc nawet gdy Ty nie widzisz błędów w kodach strony, wyszukiwarki te błędy wychwytują i negatywnie oceniają stronę. Im więcej błędów w kodzie strony tym niższa ocena.

HTML deklaracje HTML5 HEAD

Jest to strona html, więc musisz stworzyć całą strukturę html. Zacznij od deklaracji związanych z HTML5.

JAKOŚĆ WYKONANIA TWOJEJ STRONY INTERNETOWEJ A UMOWA

Teraz już wiesz jak sprawdzić jakość Twojej strony internetowej ze względu na poprawność kodów HTML i CSS. Jeżeli uważnie zapoznałeś/aś się z moimi poradami, zrobisz to sam/a i to bez większego problemu. Ale pamiętaj także o umowie. Umowie, którą podpisujesz z firmą wykonującą Twoją stronę internetową. Jeżeli nie ma stosownych zapisów w umowie dotyczących jakości kodu Twojej strony internetowej, pozostaje tylko prośba lub droga sądowa. Dlatego zanim coś podpiszesz, przeczytaj dokładnie umowę.

WYGLĄD - DESIGN STRONY INTERNETOWEJ

Wygląd - design strony www, to odczucie użytkowników oraz właścicieli strony dotyczące tzw. piękna lub skrajnie brzydoty. Z wyglądem strony związane są bardzo subiektywne dla każdego z nas odczucia. Dokładnie tak jak w życiu, jedni wolą niskie brunetki, inni wysokie blondynki, a jeszcze inni dobrze zbudowanych szatynów . Podobnie jest ze stroną www. Niejednokrotnie zdarza się, że pomiędzy początkowym wyglądem zaproponowanym przez projektanta, a tym co ostatecznie zaakceptuje Klient jest przepaść. Czasami po prostu nie warto walczyć z klientem co do wyglądu strony. Jeżeli ma on swoją wizję i jest właścicielem małej lub średniej firmy, rządzącym przedsiębiorstwem silną ręką (a to zwykle od razu widać), to lepiej od razu podporządkować się jego wizji niż „walczyć z wiatrakami”.

UŻYTECZNOŚĆ - USER EXPERIENCE

Użyteczność - User experience, UX (ang. doświadczenie użytkownika) – całość wrażeń, jakich doświadcza użytkownik podczas korzystania z Twojej strony internetowej. Niektórzy uważają, że wspomniany powyżej design strony jest częścią UX. Dla mnie to kwestia „rozważań akademickich”. A osobiście wolę oddzielić wygląd strony od jej użyteczności. UX to bardzo obszerne zagadnienie i jak wspomniałem opiszę je w kolejnym artykule. Tutaj jedynie podkreślę, że w ramach UX jeden z najważniejszych elementów, to kwestia dostosowania strony i jej funkcjonalności do urządzeń o różnych ekranach, czyli responsywność, „mobile friendly”, itp.

Zobacz w menu podobne porady do: Walidatory kodu HTML CSS jak sprawdzić jakość wykonania strony internetowej poprawny kod

 

Polski

Budowa responsywnych i mobilnych stron internetowych

bezpłatny kurs internetowy szkolenia, filmy: kliknij w temat, którego chcesz się nauczyć

szkolenia bezpłatne kolejne lekcje
kursy, porady, artykuły znajdziesz w Menu Tematycznym