Standardy w3c

W tym artykule dowiesz się:

  1. Walidacja stron internetowych
  2. Korzyści walidacji W3C?

Standardy W3C – walidacja strony internetowej

W3C czyli Word Wide Web Consortium to organizacja założona 1 października 1994 roku, która zajmuje się ustanawianiem standardów tworzenia stron WWW. Konsorcjum powstało aby powstrzymać proces niepoprawnie tworzonych stron, które źle się wyświetlały na różnych przeglądarkach. Organizacja ta zajmuje się również ocenianiem zawartości stron pod kątem przemocy i pornografii, dbaniem o prawa autorskie oraz bezpieczeństwem w sieci. W3C oferuje bezpłatne walidatory HTML i CSS, dzięki którym możemy sprawdzić czy dana strona jest zgodna ze standardami.

W tym artykule dowiesz się:

  1. Walidacja stron internetowych
  2. Korzyści walidacji W3C?

Więcej o temacie możesz przeczytać na stronach:

Walidacja stron internetowych

W3C głównie zajmuje się opracowywaniem standardów tworzenia protokołów http, standardy tworzenia stron w języku HTML, XHTML, standardy CSS, XML oraz DOM. Postaram się przybliżyć nieco na czym polega taka walidacja na podstawie języka HTML oraz CSS.

Na początek może w skrócie co to jest HTML. Język ten używa tagów znaczników do opisywania stron internetowych, są one otoczone nawiasami ostrymi jak <html> oraz najczęściej występują w parach, jak <b> </b>. Podczas walidacji sprawdzane są otwarcia i zamknięcia tagów, czy są w dobrym miejscu użyte oraz czy nie są np. puste. Na stronie walidatora organizacji W3C mamy trzy opcje walidacji: poprzez podanie adresu URL strony, wgranie pliku, który chcemy sprawdzić oraz wklejenie samego kodu bezpośrednio na stronie walidatora. Ja użyję drugiej opcji i wgram plik utworzony przeze mnie:

Walidacja za pomocą pliku
Walidacja za pomocą pliku

Po kliknięciu przycisku Wybierz plik wybieramy plik, który chcemy przetestować. Zawartość mojego pliku wygląda następująco:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <h1>Przykładowa strona</h1>
  </body>
</html>

W3C walidator natomiast zwrócił mi dwa błędy, z których wynika, że nie umieściłam w dokumencie polecenia deklaracji strony kodowej oraz tag <title> pozostawiono pusty.

Wynik walidacji
Wynik walidacji

Poprawa moich błędów będzie polegać na dodaniu w tagu <head>:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

oraz uzupełnienie brakującego tekstu. Po tych krokach sprawdzam plik raz jeszcze, a oto wynik:

Poprawna walidacja
Lepszy wynik

W3C walidator nie wykrył już żadnych błędów, więc możemy uznać, że nasz plik HTML spełnia standardy języka HTML. CSS czyli kaskadowe arkusze stylów, to język służący do opisu formy wyświetlania strony internetowej. To lista dyrektyw, które mówią jak ma zostać wyświetlona zawartość danego elementu na stronie. Mój przykładowy kod CSS zawierający błędy, wygląda następująco:

body {
  background-color: #ff;
  color: black;
  margin: 0;
  padding: 0;
  border: 0;
}
h1 {
  font-size: 12px;
  font-weight: normal
  line-height: 20pt;
  font-color: #000;
}

W przypadku walidacji pliku CSS przenieśmy się na stronę https://jigsaw.w3.org/css-validator/ i tutaj też mamy trzy opcje do wyboru: podanie url pliku, załadowanie pliku z dysku lub wpisanie ręcznie kodu w polu. Ja wkleję powyższy kod do okna i zobaczymy jakie błędy zwróci walidator.

Walidacja CSS
Walidacja CSS

W3C walidator wykrył popełnione przeze mnie błędy w kodzie co widać na powyższym zdjęciu. Zwrócił, że podana została zła wartość jeśli chodzi o kolor tła, zapomniałam dodać średnik po jednej z dyrektyw oraz podałam właściwość która nie istnieje. Po poprawieniu tych rzeczy walidacja została zakończona pomyślnie i nie występują już błędy w kodzie.

Korzyści walidacji W3C?

Największą zaletą jest chyba to, że nasza strona będzie się dobrze wyświetlać na każdej przeglądarce. Jeśli będziemy się stosować do standardów to nasze strony prawie zawsze będą poprawnie działać na przeglądarkach dla osób niepełnosprawnych. Posiadanie na rynku takiej strony jest na pewno pewnego rodzaju prestiżem. Firma projektująca strony pod kątem tych standardów na pewno nie może narzekać na brak klientów.

Saas vs Magento

SaaS vs Magento – co wybrać?

Każdy, kto planuje rozpocząć działania w branży e-handlu lub składnia się ku zmianie platformy e-Commerce, staje przed trudnym zadaniem wyboru odpowiedniego silnika dla swojego sklepu internetowego. Mogłoby się wydawać, że jest to przeprawa rodem z Indiany Jones’a. W końcu opcji jest tak wiele, że aby sprawdzić je wszystkie trzeba by poświęcić całe lata na research […]

czytaj więcej
Ile kosztuje sklep na PrestaShop?

Ile kosztuje sklep na Prestashop?

Więcej niż ten zbudowany na WooCommerce, ale mniej niż ten oparty o Magento. Oczywiście przy założeniu, że na każdej z tych platform wdrażalibyśmy identyczny e-Commerce. W większości przypadków tak jednak nie będzie, bo każda z tych technologii ma trochę inne możliwości. Jaka jest więc cena sklepu na Prestashop? Ile zapłacisz za wdrożenie e-Commerce na tym […]

czytaj więcej
Czeski rynek e-commerce

Jak wejść z e-commerce na czeski rynek?

Średnia wartość zamówienia w czeskim internecie wynosi około 1700 Kč. Czy warto skorzystać z potencjału sprzedażowego u naszych sąsiadów? Jak rozpocząć biznes e-commerce na czeskim rynku? Poznaj sprawdzone rozwiązania, dzięki którym odniesiesz sukces w Czechach! E-commerce na czeskim rynku Rynek e-commerce w Czechach rozwija się z roku na rok. Wartość czeskiego rynku e-commerce w 2024 […]

czytaj więcej
Headless PWA

Wszystko, co musisz wiedzieć o headless e-Commerce i headless PWA

Headless architecture, bezgłowy e-Commerce, headless PWA – frazy, które pojawiają się w branży coraz częściej. Puste buzzwordy czy prawdziwa rewolucja technologiczna? Sięgnij po więcej wiedzy. Klasyczne podejście do budowy serwisów internetowych – w tym sklepów – zakłada monolityczność architektury. Jeden, potężny system łączy w sobie to, co widzi klient (frontend), wewnętrzny silnik (backend) oraz jednolitą […]

czytaj więcej

Skontaktuj się z nami

Opowiedz nam o swoich ambicjach w e-Commerce i wprowadźmy je razem w życie.

Skontaktuj się z nami