Pierwsza strona w HTML i CSS, część 7: walidacja HTML i CSS, audyt i publikacja

walidacja HTML i CSS - obrazek tytułowy

W ostatniej części serii „Pierwsza strona w HTML i CSS” przyszedł czas aby zająć się końcowymi etapami tworzenia strony WWW. Są to kolejno walidacja HTML i CSS, audyt WCAG oraz publikacja gotowego projektu. Przed publikacją zajrzymy również do kilku przeglądarek aby przekonać się czy strona wygląda prawidłowo. Zaczynajmy!

Spis treści

Walidacja kodu

Walidacja HTML i CSS to proces, w którym narzędzie (walidator) sprawdza poprawność kodu pod kątem błędów składniowych. Testuje również zgodność ze specyfikacją użytego języka. Jest to szczególnie ważny etap, ponieważ może zdarzyć się, że np. niedomknięty znacznik spowoduje niepoprawne wyświetlanie zawartości strony.

Walidacja HTML

W sieci dostępnych jest wiele darmowych oraz płatnych narzędzi przeznaczonych do walidacji kodu, my jednak skorzystamy z tych zaproponowanych przez organizację W3C. Zacznijmy od kodu HTML. Aby skorzystać z walidatora należy przejść na stronę https://validator.w3.org/. Nasza strona nie została jeszcze opublikowana, więc wybioram opcję „Validate by Direct Input” i wklejam kod HTML.

zrzut ekranu z walidatora HTML dostarczonego przez W3C z wklejonym kodem HTML

Po naciśnięciu klawisza Check otrzymamy wynik walidacji:

zrzut ekranu z walidatora HTML dostarczonego przez W3C z widocznym wynikiem walidacji

Jaki widać na załączonym zrzucie ekranu, walidacja przebiegła pomyślnie.

Zapewne bardziej spostrzegawcze osoby zwrócą jednak uwagę, że wsparcie dla tego konkretnego walidatora skończyło się w 2013 roku oraz obejmuje HTML do wersji 4 (my korzystamy z wersji 5). Jest to prawda. Ja jednak nie oczekuję, że walidator zasugeruje mi użycie znacznika <article> zamiast <div>. Używam go po to, żeby wykluczyć błędy składniowe oraz źle zamknięte znaczniki. Choć to ostatnie całkiem nieźle potrafi ogarnąć odpowiednio skonfigurowany Visual Studio Code.

Jednak aby mieć pewność co do poprawności kodu mogę użyć jeszcze innego walidatora, np. https://jsonformatter.org/html-validator. W tym przypadku narzędzie zgłosi błąd, ale wynika on najprawdopodobniej z braku znajomości encji HTML przez walidator i nie należy się nim przejmować.

zrzut ekranu z walidatora HTML dostarczonego przez JSONFormatter z widocznym wynikiem walidacji

Walidacja CSS

Po sprawdzeniu kodu HTML możemy przejść do CSS. Tym razem również skorzystamy z walidatora wspieranego przez W3C. Tutaj podobnie wsparcie techniczne wygasło wiele lat temu, jednak dostępna jest walidacja wersji CSS 3 i to z niej skorzystamy.

Aby przejść na stronę walidatora należy skorzystać z linka https://jigsaw.w3.org/css-validator/. Tym razem narzędzie uruchomiło się w języku polskim. Wybieram opcję „poprzez wprowadzenie kodu” i ręcznie wklejam kod CSS.

zrzut ekranu z walidatora CSS dostarczonego przez W3C z wklejonym kodem CSS

Tak jak poprzednim razem, na naciśnięciu klawisza Sprawdź otrzymuję wynik walidacji.

zrzut ekranu z walidatora CSS dostarczonego przez W3C z widocznym wynikiem walidacji

Tym razem również walidacja przebiegła pomyślnie. Ostrzeżenia, o których informuje nas walidator oznaczają tylko tyle, że importowane przez nas czcionki nie są walidowane przez narzędzie.

zrzut ekranu z walidatora CSS dostarczonego przez W3C z widocznymi ostrzeżeniami

Audyt WCAG

Przed publikacją warto zwrócić uwagę na to czy nasza strona spełnia wytyczne WCAG. Zagadnieniu dostępności poświęciłam osobny wpis dostępny tutaj, więc nie będę go tutaj omawiać.

Aby w prosty sposób przeprowadzić audyt WCAG skorzystamy z wtyczki do przeglądarki Chrome o nazwie Wave (wersje na Chrome oraz inne przeglądarki znajdują się pod tym linkiem). Aby zainstalować rozszerzenie należy wybrać opcję Dodaj do Chrome.

zrzut ekranu ze strony instalacji wtyczki Wave w wyszukiwarce Chrome

Po zainstalowaniu wtyczki wystarczy otworzyć w przeglądarce naszą stronę internetową z pliku HTML i na pasku kliknąć ikonę wtyczki Wave prawym klawiszem myszy. Jeśli ikonka nie jest dostępna na pasku, należy jej poszukać klikając w ikonę puzzla (na zrzucie obok ikony Wave). Z menu musimy wybrać opcję „Manage extenstion„.

zrzut ekranu przeglądarki Chrome z widoczną strona internetową oraz wtyczką Wave

Aby strona otwierana z lokalnego pliku HTML (z pliku na naszym komputerze, nie z internetu) była możliwa do sprawdzenia przez wtyczkę Wave musimy w ustawieniach zaznaczyć opcję „Allow access to file URLs„.

widok ustawień wtyczki Wave

Kiedy upewnimy się, że ta opcja jest zaznaczona możemy wrócić do strony internetowej i włączyć analizę strony poprzez kliknięcie ikony wtyczki Wave. Wyniki analizy pokażą się od razu.

zrzut ekranu przeglądarki Chrome z widoczną strona internetową oraz wynikami analizy wykonanej wtyczką Wave

Możemy zauważyć, że Wave zgłasza błąd związany z niedostatecznym kontrastem linków (elementy <a>) oraz podpisów zdjęć (elementy <figcaption>) na stronie. To bardzo prosty błąd do naprawienia w kodzie CSS. Aby to zrobić musimy znaleźć linie odpowiedzialne za nadawanie koloru darkorange elementowi <a> oraz borderowi pod nim i zmienić kolor na kolor bardziej kontrastujący z tłem, np. purple. Oczywiście wpłynie to na pewne zróżnicowanie widoku strony względem dostarczonej makiety.

Nowy kod CSS będzie wyglądał następująco:

a {
    color: purple;
    border-bottom: 1px solid purple;
    text-decoration: none;
    padding-bottom: 1px;
}

Podobnie rzecz się ma z elementem <figcaption>. W tym przypadku zmienimy kolor czcionki na darkblue.

figcaption {
    text-align: right;
    color: darkblue;
}

Po zapisaniu i odświeżeniu strony efekt powinien być już następujący:

zrzut ekranu przeglądarki Chrome z widoczną strona internetową oraz wynikami analizy wykonanej wtyczką Wave po naniesieniu poprawek

Jak widać, Wave nie wyświetla powiadomień o żadnych błędach lub ostrzeżeniach. Dobra robota!

Kontrola wyświetlania w przeglądarkach

Nie samym Chrome internet żyje, zatem sprawdźmy teraz w jaki sposób inne przeglądarki wyświetlają naszą stronę internetową. Aby to zrobić należy otworzyć okno wybranej przeglądarki i wkleić w pasek adresu ten adres, który wyświetla się na pasku adresu naszej strony otwartej w Chrome.

Mozilla Firefox

Strona wygląda poprawnie, również w rozdzielczościach mniejszych niż desktop wszystko wygląda tak jak powinno.

zrzut ekranu przeglądarki Firefox z widocznymi narzędziami deweloperskimi

Microsoft Edge

Podobnie przeglądarka Edge wyświetla stronę bez zarzutu we wszystkich rozdzielczościach.

zrzut ekranu przeglądarki Edge z widocznymi narzędziami deweloperskimi

Aktualizowanie zdalnego repozytorium

Skoro nasza strona prawidłowo wyświetla się na wybranych przez nas przeglądarkach, możemy commitować i pushować zmiany kolorów do zdalnego repozytorium. Aby zaktualizować kod należy ponownie wykonać sekwencję kroków, które opisałam i opatrzyłam zrzutami ekranu w tym miejscu. Poniżej małe przypomnienie:

  • git add -A – dodanie wszystkich plików do stage’a
  • git commit -m “message” – tworzenie commita, czyli jednostki zatwierdzania zmian dodanych do stage’a
  • git push -u origin master – wypchnięcie zmian z repozytorium lokalnego do repozytorium zdalnego na branch master

Publikacja strony www

Do wykonania pozostał już tylko ostatni krok: publikacja skończonej strony www. Warunkiem właściwego wykonania tej akcji jest posiadanie poprawnej wersji kodu w zdalnym repozytorium, czyli wykonanie poprzedniego kroku i upewnienie się, że plik styles.css został zaktualizowany w serwisie GitHub jak u mnie poniżej.

zrzut ekranu z serwisu GitHub z widocznym zaktualizowanym plikiem styles.css

Jeśli kod jest w porządku możemy zająć się publikacją. Aby to zrobić musimy przejść do ustawień repozytorium.

zrzut ekranu z serwisu GitHub z widokiem panelu zarządzania repozytorium

Następnie wybieramy zakładkę Pages.

zrzut ekranu z serwisu GitHub z widokiem ustawień głównych

Po przejściu do GitHub Pages wybieramy branch, na którym pracowaliśmy (jeśli nie utworzyliśmy nowego, będzie to branch master) i klikamy przycisk Save.

zrzut ekranu z serwisu GitHub z widokiem ustawień GitHubPages

GitHub zapyta nas czy chcemy ustawić ręcznie nazwę domeny dla naszej strony. My jednak zostawimy to pole puste i poczekamy chwilę na deploy strony.

zrzut ekranu z serwisu GitHub z widokiem ustawień GitHubPages po wywołaniu żądania publikacji strony

Po kilku chwilach możemy odświeżyć stronę i powinniśmy widzieć już link do naszej pierwszej opublikowanej strony internetowej.

zrzut ekranu z serwisu GitHub z widokiem ustawień GitHubPages po opublikowaniu strony

Kliknijmy przycisk Visit site i podziwiajmy efekty naszej pracy:

zrzut ekranu z widokiem opublikowanej strony

Moja strona jest dostępna pod adresem https://devolajf.github.io/first-html-css-site/.

Podsumowanie

Jeśli dotarłeś ze mną aż tutaj i udało Ci się opublikować swoją pierwszą stronę internetową: gratuluję! Masz prawo do dumy ze swojej pracy 🙂 Mam nadzieję, że tworzenie strony sprawiło Ci dużo frajdy. Jeśli natomiast zdarzyło Ci się utknąć gdzieś w trakcie: nie martw się, zawsze możesz wrócić do swojej strony i cofnąć się o krok żeby sprawdzić co można poprawić.

Na tym kończymy serię „Pierwsza strona w HTML i CSS”, to jednak z pewnością nie koniec pojawiania się treści na blogu, więc do zobaczenia przy innych wpisach!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.