Ile HTML 5 w HTML 5 – co właściwie pokazało Apple?

(This post is also available in English)

Apple udostępniło ostatnio kilka przykładów, które nazywa “demonstracjami możliwości HTML 5”. W tej notce chciałbym sprawdzić, czy faktycznie demonstrowane są tutaj możliwości HTML 5, czy może czegoś innego. Nie zamierzam tu zagłębiać się w ideologię (choć, szczerze mówiąc, całkowicie zgadzam się tutaj z Chrisem Blizzardem) – chcę się skupić wyłącznie na kwestiach technicznych.

Jeden drobiazg, zanim zaczniemy. Każde podsumowujące zdanie “krótko mówiąc” dotyczy tego, co moim zdaniem jest demonstrowane na danej stronie, a nie formalnej obecności znaczników HTML 5 w kodzie. Przykładowo, jeśli strona stosuje znaczniki sekcji HTML 5 (a większość z nich to robi), ale demo dotyczy tak naprawdę przejść (tranzycji) stylów, nie uważam jej za demo HTML 5. Mając to na uwadze – zacznijmy.

Video – faktycznie używa znacznika <video> HTML 5 do osadzenia pliku wideo w formacie h.264. Natomiast perspektywa i efekty maskowania nie są częścią HTML 5 – umożliwiają je eksperymentalne rozszerzenia CSS Apple’a. Tak więc jest to demo HTML 5, ale nie wszystkie fajne rzeczy w nim zawarte są częścią HTML 5.
Krótko mówiąc, HTML 5: tak, CSS 3: nie bardzo, rozszerzenia CSS Apple’a: tak.

Typography – HTML 5 nie ma nic wspólnego z osadzaniem czcionek. Osadzanie czcionek zostało opisane w specyfikacji CSS 2 (choć dopiero od niedawna jest to szerzej obsługiwane przez przeglądarki). Suwak poziomy został tutaj zbudowany ze starych elementów HTML 4 (głównie divów), nie wykorzystano tu standardowego elementu <input type=range> HTML 5, który jest obsługiwany przez Safari.
Przezroczystość działa dzięki szeroko dziś obsługiwanej własności opacity z CSS 3 Color Module. Rotacje umożliwia eksperymentalna własność CSS Apple’a -webkit-transform, która tak naprawdę ma swoje odpowiedniki w innych przeglądarkach – z innymi prefiksami producenta (-moz-transform w Firefoksie 3.6 i -o-transform w nowych Operach). Cień pod tekstem dołożony został przez własność text-shadow z CSS 3 Text Module. Jest to także obsługiwane przez Mozillę i Operę. Z wyjątkiem elementów <nav> i <section>, stosowanych we wszystkich stronach z tej grupy, nie ma tu nic z HTML 5 (mamy za to sporo <div>-ów z HTML 4). Można więc zrobić stronę wyglądającą i zachowującą się identycznie w starym dobrym HTML 4. Wszystkie bajery tutaj to tak naprawdę CSS 3 lub eksperymentalne rozszerzenia CSS Apple’a.
Krótko mówiąc, HTML 5: nie bardzo, CSS 3: trochę, CSS 2: tak, rozszerzenia CSS Apple’a: tak.

Gallery – poza <nav> i <section> z HTML 5 mamy tu tylko elementy <figure>, zawierające obrazki i przyciski prev/next. Ponownie, wszystkie bajery zapewniane są przez eksperymentalne rozszerzenia CSS Apple’a – transformacje (transforms) i efekty przejścia (transitions). Inne przeglądarki również to obsługują, ale z innymi prefiksami w nazwie, tj. Opera ma np. -o-transition w miejsce -webkit-transition. Fajnie to wygląda, ale nie jest to jeszcze ustandaryzowane i nigdy nie będzie częścią żadnej wersji HTML – jako że to rozszerzenia CSS.
Krótko mówiąc, HTML 5: trochę, CSS 3: nie, rozszerzenia CSS Apple’a: tak.

Transitions – to demko również dotyczy przejść i transformacji. HTML 5 używany jest tylko do nawigacji (linki odpalające przejścia są zawarte w elemencie <section>, a nagłówek – w HTML 5 <header>). Istotna część demonstracji – obrazki przekształcane przez CSS – siedzą w starych, dobrych <div>-ach. Wszystkie bajery pochodzą z rozszerzeń CSS Apple’a.
Krótko mówiąc, HTML 5: trochę, CSS 3: nie, rozszerzenia CSS Apple’a: tak.

Audio – w końcu prawdziwe demo HTML 5, używające elementów <audio> i <canvas> z HTML 5. Piosenka jest we własnościowym formacie MP4.
Krótko mówiąc, HTML 5: tak. Hurra!

360° – skrypt w języku JavaScript przełącza pomiędzy kolejnymi zdjęciami iPodów touch podczas przeciągania myszą. Fajnie zrobione, ale jedyna nowa rzecz tutaj, której nie można było zrobić dawniej, to zgodność z ekranami dotykowymi dzięki zdarzeniom takm jak ontouchstart, które są niestandardowym rozszerzeniem DOM Apple’a. Pomijając zdarzenia dla ekranów dotykowych, można przy niewielkim wysiłku zrobić identyczne demo działające nawet w badziewnych przeglądarkach jak IE 6. Jako że jedyną nowością są tu właśnie te zdarzenia dotykowe dla iPoda/iPada/iPhone’a, wydaje się, że właśnie ich pokazanie było celem tej demonstracji, a nie HTML 5.
Krótko mówiąc, HTML 5: nie, CSS 3: nie, własne zdarzenia Apple’a: tak.

VR – wiele różnych transformacji i przejść z eksperymentalnych rozszerzeń CSS Apple’a plus trochę JavaScriptu, ale niespecjalnie dużo HTML 5.
Krótko mówiąc, HTML 5: nie bardzo, CSS 3: nie, rozszerzenia CSS Apple’a: tak.

Apple mówi:

Te demonstracje […] pokazują, w jaki sposób najnowsza wersja przeglądarki Safari Apple’a, nowe Macintoshe i nowe urządzenia przenośne Apple’a obsługują funkcjonalności HTML5, CSS3 i JavaScriptu.

Jak widać, z kilkoma wyjątkami (video/audio i canvas) i mniej istotnymi częściami poza sercem każdego demo (nawigacja i sekcje), głównym ich celem wydaje się tutaj pokazanie własnych, niestandardowych funkcjonalności Apple’a, głównie rozszerzeń CSS. Owszem, część z nich Apple przekazało do W3C i są one obecnie standaryzowane, co jest istotnym plusem. Niemniej jednak, nie są one standardem na chwilę obecną, a kiedy już zostaną ustandaryzowane, mogą wyglądać nieco lub bardzo inaczej.

W samych demkach nie ma nic złego (i, jak zawsze u Apple’a, wyglądają super), ale nazywanie ich “demonstracjami HTML 5” – kiedy nie pokazują wiele z HTML 5 – i “demonstracjami standardów”, podczas gdy prezentują głównie niestandardowe rozszerzenia Apple’a – wydaje mi się trochę nieuczciwe. Co tutaj widać, to wielki potencjał silnika WebKit. Określenie tych stron “Demonstracją możliwości Apple WebKit” byłoby więc bardziej zgodne z rzeczywistością.

PS. Oczywiście, niektórzy (jak PPK) chcą uczynić z “HTML 5” tzw. buzzword, który nie ma znaczyć już “HTML – język znakowania oraz powiązane API”, tylko “wszystkie fajne nowe rzeczy bez Flasha”. Jeśli do nich należysz, masz prawo zgodzić się tutaj z Apple, a nie ze mną.

PS #2. Czy jestem wrogiem Apple? Napisałem tę notkę na MacBooku… ;-)

12 responses to “Ile HTML 5 w HTML 5 – co właściwie pokazało Apple?

  1. Pingback: Is HTML 5 by Apple really HTML 5? « marcoos.techblog

  2. Fajny wpis, chciało Ci się rozbierać demonstrację na części.
    HTML5 jest kreowany przez media na coś w rodzaju “technicznego Web 2.0”. Jeśli Web 2.0 zmieniał nasze myślenie o tym co możemy robić w sieci, to “HTML5” pokazuje jak to zrobić. I podobnie jak z trendem Web 2.0, niedługo nikt nie będzie wiedział, co ktoś inny miał na myśli mówiąc HTML5.

    Sama demonstracja Appla jest ładna i zgodzę się, że z prawdziwym HTML5 ma niewiele wspólnego. Na minus można policzyć blokowanie Chrome i umyślne pomijanie pozostałych przeglądarek i to, że aby oglądnąć Video, Audio i VR wymagany jest QuickTime, inaczej tych dem nie zobaczymy.

    Wygląda na to, że nie mamy do czynienia z promocją otwartych standardów HTML5, tylko z marketingiem Appla, pokazem możliwości najnowszej wersji Safari.

  3. Poza kilkoma dziwnymi sprawami, ale można to na tym etapie HTML5 wyjaśnić, że nie każda przeglądarka równie to obsługuje więc Apple oparł o swoje rozwiązania.
    To poza tym sprawami HTML 5 łączy się nieodzownie z CSS 3 i JavaScript.
    Jak już gdzieś pisałem, chwała Apple że promuje hasło HTML 5.
    Zobaczcie jakie tempo ma propagowanie HTML 5, w porównaniu do XHTML.

  4. mati, ale chodzi o to, że pod hasłem “HTML5” Apple promuje zupełnie coś innego niż HTML5.

    • Tak, ale na mój gust taki skrót myślowy, przynajmniej jeśli chodzi o dołączenie do tego CSS3 i JS, jest uzasadniony.

      Co innego blokowanie dostępu użytkownikom innych przeglądarek sugerując, że ich są opóźnione…

  5. Co innego to gdyby tam krył się iPhone ;) Bez przesady…

  6. Pingback: playr / Ile HTML5 w HTML5? Ile standardów w WebKicie?

    • Druga sprawa – “HTML5″ to w całym tym konflikcie tylko słówko marketingowe, oznaczające tak naprawdę mniej więcej: “HTML5, -webkit-CSS3 i JS, ale i tak 99% ludzi nie wie co to znaczy, więc zrobimy z HTML5 buzzword – od dziś HTML5 jest cool”. Cokolwiek by nie myśleć o ich podejściu i kwestiach nazewnictwa, to naprawdę to co pokazuje WebKit jest cool.

      Dokładnie. ;)

  7. Pozwoliłem sobie wysłać Pingbacka. Ale ostatnio mi coś nie działały. Czy mógłbym prosić o info, czy pingback dotarł, a po prostu jeszcze nie został wyświetlony, czy nie dotarł i muszę coś z tym zrobić…?

    nie każda przeglądarka równie to obsługuje więc Apple oparł o swoje rozwiązania.

    Nom. IE nie obsługuje, na przykład…

    Zobaczcie jakie tempo ma propagowanie HTML 5, w porównaniu do XHTML.

    Tak, to jest niebagatelny plus. Może wreszcie domorośli webmasterzy przestaną tworzyć strony-potworki w HTML4 a zaczną tworzyć strony-potworki w HTML5. ;)

    • Pingbacki i komentarze są pre-moderowane (chyba że wcześniejsze komentarze danej osoby zostały zaakceptowane),.

      Oba mogą wpaść też w filtr antyspamowy.

      • No się domyślam. Tylko mam pytanie – nie doszedł pingback? Bo trackback widzę jest, a pingbacki od dłuższego czasu mam zepsute i nie mogę ich naprawić… Sytuację jeszcze utrudnia fakt, że mam ograniczone możliwości testowania. :P

  8. Pingback: Marsjana.net

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

MDN

Better JavaScript docs for a better Web on MDN

Archiwum

%d bloggers like this: