Krzysztof Wołk, Nowoczesne strony WWW. HTML 5, CSS3, Adobe Muse, WordPress

Dawno już na WebKrytyku nie było recenzji żadnej książki. Tym razem pod lupę wezmę książkę Krzysztofa Wołka Nowoczesne strony WWW. HTML 5, CSS3, Adobe Muse, WordPress.

Uwaga ogólna

Bardzo nie lubię e-booków, w których coś takiego jak formatowanie tekstu praktycznie nie istnieje. Z tego też powodu kod zlewa się z resztą tekstu. A przecież się da to ładnie ostylować, co doskonale pokazuje Smashing Magazine czy choćby nasz rodzimy Helion.

Rozdział 1. Struktura HTML

• We wstępie dowiadujemy się, że oprócz wymienionych w tytule programów, używany będzie też Adobe Dreamweaver. I choć jest zaznaczone wyraźnie, że jego posiadanie nie jest konieczne, nie można nie odnieść wrażenia, że cała treść zawarta w tym rozdziale wychodzi z założenia, że właśnie tym edytorem będziemy się posługiwać. Jest tu bowiem bardzo dokładnie opisany cały proces tworzenia projektu w tym programie.

• Pomiędzy „<” a „>”, oprócz nazwy znacznika, mogą znaleźć się dodatkowe parametry tego znacznika […]

  Dość dziwnie czyta się o parametrach znaczników, wiedząc, że oficjalną nazwą – używaną dosłownie wszędzie – są atrybuty. Taki też termin użyty jest bezpośrednio w specyfikacji.

• Ciekawostka: znaczniki, które nie wymagają domknięcia, w HTML 4 trzeba było domykać same w sobie, czyli np. dodając znak „/” na samym końcu:
  <meta charset=”utf-8” />. HTML 5 jest tolerancyjny – jeśli tego nie dodamy, nie będzie błędu.

  Totalna bzdura! Jest całkowicie odwrotnie: HTML 4 zabraniał używania slasha do zamykania znaczników. Sam slash został wprowadzony jako część składni XHTML-a, z zastrzeżeniem, że mówimy o prawdziwym XHTML-u. A taki de facto nigdy nie istniał. To, co dostaliśmy, to HTML w składni XML-a, czyli dziwny potworek. Nic zatem dziwnego, że z tego też powodu HTML5 zezwala na składnię XML-ową nawet w trybie HTML oraz… odrzuca całe pojęcie XHTML-a.

• alt=”napis który pojawia się w momencie ładowania obrazka lub po przytrzymaniu kursora myszy nad obrazkiem”.

  Atrybut alt określa tekst alternatywny dla obrazka, który pojawia się w chwili, gdy obrazek nie może być wczytany. Dodatkowo tekst ten jest także udostępniany technologii asystującej, dzięki czemu m.in. osoby niewidome mogą się dowiedzieć, co obrazek przedstawia.

  Natomiast informacja o tym, że ten tekst pokazuje się po najechaniu kursora myszy, była prawdziwa… w czasach IE6. Żadna inna przeglądarka nie zachowywała się w ten sposób, a i sam standard takiego zachowania zabrania.

• Fragment opisujący znaczniki semantyczne dla tekstu jest całkowicie błędny.

  Element <b> pogrubia tekst, a element <i> robi z niego kursywę […]

  To było prawdą w HTML 4. W HTML5 te znaczniki mają całkowicie inne definicje. Znacznik b oznacza tekst, który jest wyróżniony bez przekazywania mu dodatkowej ważności, natomiast znacznik i służy m.in. do oznaczania technicznych terminów.

  W HTML 5 substytutami <b> oraz <i> są elementy <strong> oraz <em>.

  Tak nie było nawet w HTML4, w którym strong i em były definiowane jako znaczniki semantyczne, a b i i – prezentacyjne. W tym wypadku te znaczniki miały całkowicie inne zastosowania. W HTML5 też tak nie jest, bo wszystkie cztery znaczniki mają zdefiniowane odrębne znaczenia.

  Oznaczają one [strong i em], że pewien fragment jest „istotny”.

  I znów nie. Owszem, znacznik strong oznacza fragment tekstu o większej ważności, ale już znacznik em oznacza emfazę rozumianą jako zmianę akcentu.

Rozdział 2. Znaczniki semantyczne

• Na początku znajduje się kod wyszukiwarki (podaję wersję tekstową, gdyż w książce kod jest umieszczony jako obrazek):

  <form action="#" method="POST">
  	<input type="text" name="pole" />
  	<input type="image" src="_images/search.png" />
  </form>

  Ten kod ma sporo problemów:

  • Brakuje etykiety dla pola formularza.
  • Brakuje atrybutu [alt] dla przycisku obrazkowego.
  • Istnieje dedykowany typ pola dla formularzy, [type=search].
  • Sam formularz można oznaczyć przy pomocy [role=search].

• Znaczniki semantyczne to takie, które nadają znaczenie zarówno ludziom, jak i maszynom (przeglądarkom internetowym).

  Akurat przeglądarki internetowe bardzo mało korzystają z informacji semantycznych zawartych w kodzie HTML. Głównym miejscem, w którym je wykorzystują, jest drzewo dostępności. O wiele bardziej informacje semantyczne wykorzystują wyszukiwarki internetowe i technologie asystujące.

• Następnie pokazana jest struktura strony w XHTML i HTML5. Problem polega na tym, że struktura w HTML5 jest niepoprawna. Główna treść strony powinna znajdować się w znaczniku main, nie zaś section. Tak samo boczne menu nie powinno być w sekcji.

• Znaczniki HTML5 w książce są podzielone na kilka kategorii:

  • Metadata kontent
  • Flow kontent
  • Sectioning kontent
  • Heading kontent
  • Phrasing kontent
  • Embedded kontent
  • Interactive kontent

  Całkowicie nie rozumiem, czemu używa się tutaj polsko-angielskiej nazwy – i to nazwy całkowicie bezsensownej. Kontent oznacza po polsku kogoś zadowolonego. Zadowolony sekcjonujący nie brzmi jak odpowiednia kategoria dla jakiegokolwiek znacznika HTML5. Natomiast treść sekcjonująca – jak najbardziej.

• Elementy metadata kontent są zlokalizowane w sekcji <head>.

  To nie do końca prawda. Te dane mogą występować wszędzie, dzięki choćby RDFa czy mikrodanych.

• W3C wyjaśnia sectioning kontent jako „defining the scope of headings and footers”, czyli że mogą zawierać nagłówki i stopki (może być ich więcej na stronie).

  Przytoczony cytat oznacza całkowicie co innego: [znaczniki sekcjonujące] definiują zakres nagłówków i stopek. Osobiście nazywam to Zasadą Najpierw Nagłówki.

• Dość dziwnie wygląda powoływanie się na W3C, by kilka zdań dalej podać jako przykład znacznik hgroup, który nie istnieje w HTML 5.x, a jedynie w HTML LS.

• Cały podrozdział o outline powinien zostać wyrzucony. Outline nigdy nie został zaimplementowany, a specyfikacja HTML 5.x przestrzega przed jego użyciem. Zresztą los całego algorytmu zdaje się już przesądzony i zostanie on wkrótce zastąpiony nowym.

  Dodatkowo książka poleca użycie starego generatora outline’u, który nie jest rozwijany od lat. Obecnie generator outline’u jest częścią walidatora HTML. Tak po prawdzie walidator posiada dwa generatory: jeden oparty na przestarzałym algorytmie oraz drugi oparty wyłącznie na nagłówkach. I to właśnie z tego drugiego powinno się obecnie korzystać, dopóki nowy algorytm outline’u faktycznie nie zostanie stworzony i zaimplementowany.

Rozdział 3. Cięcie techniczne – wstęp do CSS

W chwili, gdy powoli odchodzi się od Responsive Web Design na rzecz Intrinsic Web Design, wycinanie ikonek w Photoshopie wydaje się mocno przestarzałą praktyką.

W tym rozdziale trafiłem na jedną, interesującą rzecz:

Pozostaw ten katalog do oceny przez prowadzącego.

Czy ten fragment tekstu nie jest przypadkiem pozostałością po jakimś szkoleniu przeprowadzanym przez autora książki?

Rozdział 4. Elementy blokowe i opływanie

• Na samym początku rozdziału pokazany jest na obrazkach model pudełkowy, który jest błędnie nazwany modelem elementu blokowego. To nieprawda, bo model pudełkowy obowiązuje dla wszystkich elementów:

  The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

  [Model pudełkowy CSS opisuje prostokątne pudełka generowane dla elementów w drzewie dokumentu i które są następnie rozkładane zgodnie z modelem formatowania wizualnego.]

  Tym samym stwierdzenie, że tylko elementy blokowe mają szerokość i wysokość, jest nieprawdziwe.

• W dalszej części rozdziału używane jest stylowanie po [id], co jest znaną od lat złą praktyką.
• Dziwi także tak dokładne opisywanie opływania (float) w chwili, gdy mamy tak potężne narzędzia jak flexbox czy CSS Grid.
• Chociaż widząc wspomnienie o Firebugu, można się zastanawiać nad faktyczną aktualnością tego rozdziału…

Nowe selektory i pozycjonowanie CSS

Zdecydowanie brakuje w tym rozdziale position: sticky.

Responsywny układ elementów HTML

Opisanie tworzenia responsywnego layoutu bez wspomnienia o meta[name=viewport] nie ma najmniejszego sensu.

Strona internetowa portfolio z formularzem kontaktowym

Nie tak dawno temu, w rozdziale 1., tłumaczona była składnia HTML-a. Tutaj nagle pojawia się PHP, JS i jQuery – i to bez żadnego tłumaczenia. Cały rozdział polega na przepisywaniu kodu.

HTML 5 Pokaz Slajdów/Galeria WWW

Bardzo podobnie skonstruowany jak poprzedni rozdział – niemniej z większą ilością komentarza.

Adobe Muse – WWW bez linii kodu

Prawdę mówiąc nie wiem, czy w takiej książce jest potrzebny rozdział będący de facto instrukcją obsługi Adobe Muse. Zwłaszcza, że Adobe Muse zakończył żywot.

Co jednak ciekawe, to najdłuższy rozdział w książce (161 stron!).

WordPress jako darmowy system blogowy – wordpress.com

Ten rozdział z kolei to skrócony kurs obsługi strony WordPress.com. Prawdę mówiąc mam wątpliwości, czy ok. 30 stron na temat tej platformy jest wystarczającym powodem, by umieścić WordPress w tytule.

Bonus

Krzysztof Wołk jest także autorem drugiej książki, Rzeczywistość wirtualna (VR) dla każdego – Aframe i HTML 5. Gdy jednak porówna się spisy treści obydwu książek, można odnieść wrażenie, że są wręcz identyczne – a przynajmniej aż do rozdziału 9. Zastanawia mnie, czemu zastosowano taki model wydawniczy? Prawdę mówiąc, skoro w obydwu pozycjach spora część treści jest taka sama, to czemu nie wyjąć jej do osobnej książki i zrobić z tych pozycji serię?

I to tyle na dziś! Do następnego.