Nowe elementy w HTML 5


Struktura i semantyka

Pierwszy raz w tym stuleciu przedstawiono nowe elementy Hypertext Markup Language (HTML) 5.

  • strukturalne – aside, figure, section
  • liniowe (inline) – time, meter, progress
  • osadzalne (embedding) – video, audio
  • interaktywne – details, datagrid, command

Rozwój HTMLa zatrzymał się w 1999 roku, wraz z HTML 4. World Wide Web Consortium (W3C) skupiło wtedy swoją uwagę na zasadniczych zmianach składni HTMLa z zestandaryzowanego nadrzędnego języka znaczników (SGML) na rozszerzalny język znaczników (XML) oraz na nowych językach znaczników, takich jak Scalable Vector Graphics (SVG), XForms i MathML.

Tymczasem wydawcy przeglądarek skupili się głównie na rozbudowie ich o nowe funkcje, jak na przykład zakładki czy wbudowane czytniki RSS. Web designerzy zaczęli uczyć się stosowania kaskadowych arkuszy styli CSS i języka skryptowego JavaScript? i budować własne aplikacje przy użyciu istniejących frameworków opartych na przykład o technologię Ajax. Sam HTML natomiast nie rozwijał się prawie wcale przez ostatnie osiem lat.

Niedawno bestia ponownie zbudziła się do życia. Trzech głównych producentów przeglądarek – Apple, Opera i Mozilla Foundation utworzyło grupę WhatWG aby rozwijać, aktualizować i rozbudowywać klasyczny HTML. Organizacja W3C odpowiedziała na to własną próbą utworzenia HTMLa nowej generacji, przy czym uczestniczyli również członkowie WhatWG. W efekcie końcowym jak najbardziej prawdopodobne jest, że oba projekty zostaną połączone. I chociaż wiele szczegółów będzie nadal dyskutowanych, główne wytyczne w strukturze następnej wersji HTMLa wydają się być coraz bardziej jasne.

Owa nowa wersja HTMLa, zwykle zwana HTML 5, chociaż znana również pod nazwą Web Applications 1.0 – ma swoje wyraźne korzenie w języku zamrożonym w 1999 roku, który obecnie odtajał. Nie ma przestrzeni nazw czy definiowania struktury dokumentów. Elementy nie muszą być zamknięte. Przeglądarki wybaczają błędy. P to nadal p, a table to table.

Jednocześnie ten przysłowiowy jaskiniowiec Web designer może napotkać nowe i nieco dezorientujące elementy. Oczywiście stare, znane div pozostaje ale teraz HTML zawiera elementy section, header, footer i nav. em, code i strong ciągle występują ale jednocześnie także meter, time i m. img i embed ciągle są w użyciu ale mamy też video i audio. Jednakże bliższe przyjrzenie się pozwoli odkryć, że te nowe elementy nie są aż tak różne od starych. Wiele z nich to rzeczy, których designerzy potrzebowali w 1999 lecz ich nie mieli. Wszystkich tych nowych rzeczy można się łatwo nauczyć poprzez prostą analogię do elementów, które designer już zna i rozumie. W rzeczywistości są one o wiele łatwiejsze do nauczenia się niż Ajax czy CSS.

W końcu, gdy ten jaskiniowiec odpali swojego laptopa z procesorem 300Mhz i systemem Windows 98, które również zostały zamrożone w 1999, będzie zaskoczony, że nowe strony wyświetlają się prawidłowo w przeglądarkach Netscape 4 i Windows? Internet Explorer? 5. Pewnie, że przeglądarka nie rozpozna ani nie zrobi nic z nowymi elementami ale strona się wyświetli, a cała treść będzie widoczna.

Nie jest to jakiś szczęśliwy zbieg okoliczności. Celowo HTML 5 został ściśle zaprojektowany aby stopniować swoją funkcjonalność w przeglądarkach, które nie obsługują tego standardu. Przyczyna jest prosta – wszyscy jesteśmy jaskiniowcami. Obecne przeglądarki posiadają zakładki, obsługują CSS i XmlHttpRequest ale ich interpretatory HTMLa ciągle tkwią w 1999 roku. Internet nie może ruszyć naprzód nie biorąc tego pod uwagę. HTML 5 to rozumie i oferuje rozwiązania dla autorów stron, jednocześnie obiecując jeszcze lepszą funkcjonalność w przyszłości, biorąc pod uwagę rozwój przeglądarek. Mając to na uwadze, zobaczmy co oferuje nam HTML 5.

Struktura

Nawet poprawnie tworzone strony HTML nie mają struktury tak łatwej do przeanalizowania, jak mogłyby mieć, z powodu braku konkretnej struktury. Sam musisz zorientować się, gdzie kończą się poszczególne sekcje. Boczne panele, stopki, nagłówki, menu nawigacji, sekcje z główną treści i inne indywidualne historie – wszystkie są oznaczone przez stosowany wszędzie div. HTML 5 dodaje nowe elementy, pozwalające na wyszczególnienie poszczególnych, powszechnie używanych konstrukcji:

  • section: część lub rozdział w książce, pojedyncza sekcja w rozdziale lub też jakakolwiek część tekstu
  • header: nagłówek widoczny na stronie; nie mylić z elementem head
  • footer: stopka strony; podpis w wiadomości e-mail
  • nav: zbiór odnośników do innych stron (podstron)
  • article: niezależny wpis w blogu, magazynie; artykuł itp.

Przykładowo, rozważmy stronę główną typowego bloga z nagłówkiem u góry, stopką u dołu, kilkoma wpisami, z menu do nawigacji po stronie i panelem bocznym, jak to pokazano w listingu nr 1.

Listing 1. Typowa struktura współczesnego bloga.


<html>
<head>
<title>Mokka mit Schlag </title>

</head>
<body>
<div id="page">
<div id="header">
<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>

</div>
<div id="container">
<div id="center" class="column">
<div class="post" id="post-1000572">
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>

<div class="entry">
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15. </p>
</div>
</div>

<div class="post" id="post-1000571">

<h2><a href=
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>

<div class="entry">
<p>Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>

</div>
</div>

</div>

<div class="navigation">
<div class="alignleft">
<a href="/blog/page/2/">&laquo; Previous Entries</a>

</div>
<div class="alignright"></div>
</div>
</div>

<div id="right" class="column">

<ul id="sidebar">
<li><h2>Info</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>

<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>

<ul>
<li><a href='/blog/2007/04/'>April 2007</a></li>
<li><a href='/blog/2007/03/'>March 2007</a></li>

<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>

</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2007 Elliotte Rusty Harold</p>

</div>
</div>

</body>
</html>

Nawet z prawidłowymi wcięciami trudno połapać się w zagnieżdżonych divach. W HTML 5 można je zastąpić bezpośrednimi semantycznymi elementami, jak to ma miejsce na listingu nr 2.

Listing 2. Typowa strona blogowa w HTML 5.

<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<header>

<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
</header>
<section>
<article>
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">

Spring Comes (and Goes) in Sussex County</a></h2>

<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 A.M., progressed to Spring around 10:00
A.M., and reached early summer by 10:15. </p>
</article>

<article>

<h2><a href=
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>

<p>Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>

</article>
<nav>
<a href="/blog/page/2/">&laquo; Previous Entries</a>
</nav>
</section>

<nav>
<ul>
<li><h2>Info</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>

<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>

<ul>
<li><a href='/blog/2007/04/'>April 2007</a></li>
<li><a href='/blog/2007/03/'>March 2007</a></li>

<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>

</li>
</ul>
</nav>
<footer>
<p>Copyright 2007 Elliotte Rusty Harold</p>

</footer>

</body>
</html>

Żadne divy nie są już potrzebne. Zamiast tworzenia nazw klas na podstawie poszczególnych części składowych strony, możemy decydować o ich właściwościach na podstawie standardowych nazw. Jest to szczególnie w odtwarzaczach audio, telefonach i innych nietypowych przeglądarek stron.

Elementy blokowe

Oprócz elementów strukturalnych, HTML 5 wprowadza także typowe elementy blokowe:

  • aside
  • figure
  • dialog

Używam pierwszych dwóch cały czas w takich artykułach jak ten oraz w moich książkach. Trzeciego z nich nie używam tak często ale jest on bardzo popularny w tekstach pisanych.

aside

Element aside przedstawia przypis, wskazówkę, panel boczny, cytat wyróżniony, uwagę na marginesie albo coś co występuje poza głównym wątkiem lub narracją. Przykładowo w artykułach IBM developerWorks często można znaleźć boczne panele z treścią, zakodowane jako tabelki, kod pokazany jest na listingu nr 3.

Listing 3. Panel boczny IBM developerWorks w HTML 4.


<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10">

<img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td bgcolor="#eeeeee">
<p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>

<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tbody><tr><td class="code-outline">
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em }</pre>
</td></tr></tbody></table><br>

<p>

However, Firefox doesn't yet support this syntax.
</p>
</td></tr></table>

Można to zapisać znacznie mądrzej w HTML 5, jak to pokazano na listingu 4.

Listing 4. Panel boczny IBM developerWorks w HTML 4.


<aside>

<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:

</p>

<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em }</pre>

<p>
However, Firefox doesn't yet support this syntax.
</p>
</aside>

Przeglądarka może zorientować się gdzie umieścić panel, z niewielką pomocą styli CSS.

figure

Element figure przedstawia element blokowy – obraz, poprzedzony tytułem. Przykładowo w wielu artykułach IBM developerWorks znajdziesz elementy takie jak poniższa Figura 1, zakodowane jak w listingu nr 5.

Figura stosowana w IBM developerWorks, zakodowana w HTML 4.


<a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />

<img alt="A Web site is requesting permission to install the following item:
Mozilla XForms 0.7 Unsigned"
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
<br />

Figura 1. Okno dialogowe instalacji Mozilla XForms.
Figura 1. Okno dialogowe instalacji Mozilla XForms.

Bardziej poprawny semantycznie kod możemy uzyskać stosując HTML 5, jak to pokazano na listingu nr 6.

Figura stosowana w IBM developerWorks, zakodowana w HTML 5.


<figure id="fig2">
<legend>Figure 2. Install Mozilla XForms dialog</legend>
<img alt="A Web site is requesting permission to install the following item:
Mozilla XForms 0.7 Unsigned"
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>

Najważniejsze, że przeglądarki, głównie czytniki ekranowe, w sposób przejrzysty i jednoznaczny mogą połączyć tytuł z obrazkiem.

Element figure nie ogranicza się bynajmniej tylko do obrazów. Możesz go używać również do opisywania elementów audio, video, iframe, object i embed.

dialog

Element dialog przedstawia konwersację między kilkoma osobami. W HTML 5 element dt wskazuje osobę mówiącą, natomiast element dd treść wypowiedzi. Umożliwia to sensowne wyświetlanie przekazu również w przeglądarkach nie obsługujących HTML 5. Listing 7 przestawia fragment rozmowy z „Dialogu” Galileusza.

Listing 7. „Dialog” w HTML 5.


<dialog>
<dt>Simplicius </dt>
<dd>According to the straight line AF,
and not according to the curve, such being already excluded
for such a use.</dd>

<dt>Sagredo </dt>
<dd>But I should take neither of them,
seeing that the straight line AF runs obliquely. I should
draw a line perpendicular to CD, for this would seem to me
to be the shortest, as well as being unique among the
infinite number of longer and unequal ones which may be
drawn from the point A to every other point of the opposite
line CD. </dd>

<dt>Salviati </dt>
<dd><p> Your choice and the reason you
adduce for it seem to me most excellent. So now we have it
that the first dimension is determined by a straight line;
the second (namely, breadth) by another straight line, and
not only straight, but at right angles to that which
determines the length. Thus we have defined the two
dimensions of a surface; that is, length and breadth. </p>

<p> But suppose you had to determine a height—for
example, how high this platform is from the pavement down
below there. Seeing that from any point in the platform we
may draw infinite lines, curved or straight, and all of
different lengths, to the infinite points of the pavement
below, which of all these lines would you make use of? </p>

</dd>
</dialog>

Trwają dyskusje nad dokładną składnią tego elementu. Niektórzy chcieliby miec możliwość załączenia dodatkowych treści, nie będących częścią składową dialogu, jak na przykład wskazówki reżysera – wewnątrz elementu, inni nie są zadowoleni z nadmiernego używania dt i dd. Jednakże wszyscy zgadzają się z głównymi wytycznymi dotyczącymi sposobu takiego semantycznego przedstawienia dialogu, pomimo że nadal dyskutowane są szczegóły dotyczące dokładnej składni.

Elementy liniowe

HTML 4 zawiera pięć różnych elementów liniowych, dzięki którym możemy rozróżnić subtelne różnice w sposobie przedstawienia komputerowego kodu. Są to: var, code, kbd, tt i samp. Nie ma jednak żadnego sposobu, żeby oznaczyć takie zasadnicze treści jak czas, cyfry czy sarkazm. HTML 5 koryguje ów brak równowagi pomiędzy „technicznymi”, a zwykłymi autorami treści stosując kilka nowych elementów liniowych.

mark

Element m wskazuje na tekst, który jest w jakiś sposób „oznaczony”, ale niekoniecznie uwydatniony czy pogrubiony. Możesz sobie to wyobrazić jak zaznaczone markerem linie w książce. Sposobu takiego używa Google dla stron w swoim cache’u. Przykładowo jeśli szukałeś słowa „Egret” i wybrałeś w wynikach wyszukiwania cache danej strony, to znaleziony na niej wyraz będzie zaznaczony, sposób działania:


The Great <m>Egret</m> (also known as the
American <m>Egret</m>) is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>.

Nazwa tego elementu jest obecnie przedmiotem debaty. Może ona zostać zmieniona z m na mark zanim specyfikacja zostanie opublikowana.

time

Element time odnosi się do specyficznego momentu w historii, tak jak 5:35 P.M., EST, April 23, 2007. Na przykład:


<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</p>

Element time pomaga przeglądarkom internetowym i innym czytnikom rozpoznać reprezentację czasu na stronach HTML. Nie jest wymagany żaden specjalny format dla zawartości tego elementu, jednakże wskazane jest stosowanie atrybutu datetime przedstawiającego wartości w formacie łatwiejszym do rozpoznania przez maszyny:


<p>I am writing this example at
<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
</p>

Taki sposób zapisu jest potencjalnie użyteczny dla silników wyszukiwarek, kalendarzy itp.

meter

Element meter reprezentuje wartość numeryczną o określonym zakresie. Możesz użyć go na przykład do przedstawienia wysokości zarobków, procentowej wielkości elektoratu Le Pena we Francji czy wyników testów. Tutaj przedstawię dane, które otrzymałem od pewnego programisty firmy Google na Software Development 2007:


<p>An entry level programmer in Silicon Valley
can expect to start around <meter>$90,000</meter> per year.
</p>

Element meter pozwala przeglądarkom i innym klientom rozpoznać wielkości na stronach HTML. Żaden specyficzny format nie jest wymagany dla zawartości tego elementu. Dla każdego elementu meter można jednak uży sześciu różnych atrybutów, które zapewniają przedstawienie wartości w formacie bardziej przyjaznym maszynom:

  • value
  • min
  • low
  • high
  • max
  • optimum

Każdy z nich powinien zawierać liczbę w systemie dziesiętnym wskazującą odpowiedni zakres. Na przykład wyniki egzaminu końcowego mogłyby wyglądać tak:


<p>Your score was
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>

Zapis ten wskazuje na to, że wynik studenta równy był 88,7 na 100 możliwych. Najniższy wynik jaki można było osiągnąć to 0 ale najniższy osiągnięty na egzaminie wyniósł 65. Najwyższy wynik jaki udało się uzyskać to 96, chociaż oczywiście idealnie byłoby gdyby był równy 100. Czytniki mogłyby wyświetlać te informacje za pomocą jakiejś specjalnej kontrolki lub dodatkowych danych w okienku z podpowiedzią, prawdopodobnie jednak będą traktowane jak każdy inny element liniowy.

progress

Element progress odpowiedzialny jest za prezentację obecnego stanu trwającego procesu, jak na przykład pasek postępu w aplikacji z interfejsem graficznym. Może to być użyte na przykład do przedstawienia ile procent pliku zostało już pobrane. Ten przykład pokazuje, że 33% operacji ściągania pliku zostało wykonane:


<p>Downloaded:
<progress value="1534602" max="4603807">33%</progress>
</p>

Atrybut value wskazuje na aktualny stan operacji. Atrybut max natomiast pokazuje wartość maksymalną, do jakiej dąży operacja. Tutaj element wskazuje, że 1,534,602 bajtów z całkowitej ilości 4,603,807 bajtów zostało pobranych.

Możesz wyświetlić pasek postępu z niezdefiniowaną wartością wielkości maksymalnej pomijając atrybut max. Powinno się wtedy użyć języka JavaScript aby dynamicznie aktualizować postęp operacji podczas gdy proces ten nadal trwa. Statystycznie element ten nie jest zbyt interesujący.

Osadzanie plików multimedialnych

Wideo w internecie przeżywa rozkwit, jednak każdy wyrobi
YouTube używa technologii Flash, Microsoft Windows Media? a Apple wykorzystuje QuickTime. Zauważ, że format który działa w jednej przeglądarce, niekoniecznie musi działać w innej. W konsekwencji grupa WhatWG zaproponowała nowy element video niezależny od żadnego z formatów. Mógłbym na przykład załączyć film Sora z Prospekt Park, który to film jest w formacie QuickTime:


<video src="http://www.cafeaulait.org/birds/sora.mov" />

Przedmiotem dyskusji jest nadal to, czy jakikolwiek format czy kodek będzie preferowany. Prawdopodobnie co najmniej wsparcie dla Ogg Theora będzie mocno wskazane, o ile nie wymagane. Wsparcie dla formatów zastrzeżonych, takich jak QuickTime czy MPEG-4 będzie opcjonalne. Najprawdopodobniej formaty będą wybrane poprzez zapotrzebowanie rynku, można przypuszczać, że GIF, JPEG i PNG będą preferowanymi formatami dla elementu img i zwyciężą z takimi formatami jak BMP, X-Bitmap i JPEG 2000.

Zaproponowano również uzupełniający element audio, dzięki któremu można na przykład zamieścić muzykę w tle dla swojej strony www:

<audio src="spacemusic.mp3"
autoplay="autoplay" loop="20000" />

Dzięki atrybutowi autoplay utwór może zacząć być odtwarzany automatycznie po załadowaniu strony, bez potwierdzenia ze strony użytkownika. W takim przypadku utwór zostanie odtworzony 20.000 razy lub do zamknięcia okna przeglądarki czy załadowania innej strony. Oczywiście przeglądarki powinny dawać możliwość wyciszenia lub zatrzymania odtwarzanego utworu, niezależnie czy autor strony udostępnił taką możliwość, czy też nie.

Przeglądarki muszą wspierać format WAV. Mogą ponadto wspierać takie formaty jak MP3, zgodnie z życzeniem producenta danego programu.

Ponieważ elementy te nie są wspierane przez obecne przeglądarki i mogą być niedostępne dla niewidomych czy niesłyszących użytkowników, elementy audio i video mogą zawierać dodatkowe informacje opisujące zawartość plików audio i video. Jest to również pomocne dla wyszukiwarek. Idealnie byłoby gdyby informacje te zawierały pełną treść załączonych plików audio i video. Listing nr 8 przedstawia przemówienie inauguracyjne Johna F. Kennedy’ego:

Listing 8. Przemówienie inauguracyjne Johna F. Kennedy’ego w HTML 5.


<audio src="kennedyinauguraladdrees.mp3">
<p>
Vice President Johnson, Mr. Speaker, Mr. Chief Justice,
President Eisenhower, Vice President Nixon, President Truman,
Reverend Clergy, fellow citizens:
</p>

<p>
We observe today not a victory of party, but a celebration of
freedom -- symbolizing an end, as well as a beginning --
signifying renewal, as well as change. For I have sworn before
you and Almighty God the same solemn oath our forebears
prescribed nearly a century and three-quarters ago.
</p>

<p>
The world is very different now. For man holds in his mortal
hands the power to abolish all forms of human poverty and all
forms of human life. And yet the same revolutionary beliefs for
which our forebears fought are still at issue around the globe --
the belief that the rights of man come not from the
generosity of the state, but from the hand of God.
</p>

<p>
...
</p>

</audio>

Interaktywność

W kwestii Web Applications 1.0, dodanych zostało kilka nowych elementów i skupiono się na większej interaktywności stron www:

  • details
  • datagrid
  • menu
  • command

Wartość tych elementów może ulegać zmianie, zależnie od akcji wykonywanych przez użytkownika, bez przeładowywania strony i pobierania jej na nowo z serwera.

details

Element details odpowiedzialny jest za dodatkowe informacje, które nie są domyślnie pokazywane. Opcjonalny element legend może streszczać detale. Przykładem zastosowania mogą być przypisy:

The bill of a Craveri's Murrelet is about 10% thinner
than the bill of a Xantus's Murrelet.
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds,
(New York: Chanticleer Press, 2000) p. 247
</p>
</details>

Element details może mieć atrybut open. Z tym atrybutem szczegółowe informację zostaną pokazane przez przeglądarkę automatycznie, po załadowaniu strony. Bez niej natomiast pokazanie szczegółów będzie wymagało ingerencji użytkownika – kliknięcia w ikonę lub inny wskaźnik pokazania / ukrycia szczegółów.

datagrid

Element datagrid przeznaczony jest do kontrolowania drzewek, list i tabel, które mogą być aktualizowane zarówno przez użytkownika jak i skrypty. W przeciwieństwie do tego tradycyjne tabele przeznaczone są raczej dla statycznych danych.

Element datagrid pobiera dane pochodzące z elementów table, select i innych. Listing nr 9 pokazuje datagrid, zawierający arkusz ocen. W tym przykładzie zawartość datagrid pochodzi z tabeli. Prostszy przykład jednowymiarowego datagrid to dane pobierane z elementu select. Jeśli zostaną użyte inne elementy HTMLa, każdy podrzędny element będzie zajmował oddzielny rząd w siatce danych.

Listing 9. Datagrid z arkuszem ocen.


<datagrid>
<table>
<tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>

<tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>

<tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>

<tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>

</table>
</datagrid>

To, co odróżnia datagrid od zwykłej tabeli, to możliwość wyboru rzędów, kolum i komórek oraz możliwość ich zwijania, modyfikacji, usuwania, sortowania czyli interakcji z danymi bezpośrednio na poziome przeglądarki. Kod JavaScript kontroluje zmiany w danych. W tym celu do Obiektowego Modelu Dokumentu (DOM) dodany został specjalny interfejs HTMLDataGridElement (Listing 10):

Listing 10. HTMLDataGridElement.


interface HTMLDataGridElement : HTMLElement {
attribute DataGridDataProvider data;
readonly attribute DataGridSelection selection;
attribute boolean multiple;
attribute boolean disabled;
void updateEverything();
void updateRowsChanged(in RowSpecification row, in unsigned long count);
void updateRowsInserted(in RowSpecification row, in unsigned long count);
void updateRowsRemoved(in RowSpecification row, in unsigned long count);
void updateRowChanged(in RowSpecification row);
void updateColumnChanged(in unsigned long column);
void updateCellChanged(in RowSpecification row, in unsigned long column);
};

DOM może również zostać użyty do ładowania dynamicznych danych. W ten sposób datagrid nie potrzebuje do działania wstępnych danych. Zamiast tego może zostać sprzężony z obiektem DataGridDataProvider, jak to pokazano na listingu nr 11. Pozwala to na ładowanie danych z baz danych, przy użyciu XmlHttpRequest lub w jakikolwiek inny sposób, na jaki pozwala JavaScript.

Listing 11. DataGridDataProvider


interface DataGridDataProvider {
void initialize(in HTMLDataGridElement datagrid);
unsigned long getRowCount(in RowSpecification row);
unsigned long getChildAtPosition(in RowSpecification parentRow,
in unsigned long position);
unsigned long getColumnCount();
DOMString getCaptionText(in unsigned long column);
void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
DOMString getRowImage(in RowSpecification row);
HTMLMenuElement getRowMenu(in RowSpecification row);
void getRowClasses(in RowSpecification row, in DOMTokenList classes);
DOMString getCellData(in RowSpecification row, in unsigned long column);
void getCellClasses(in RowSpecification row, in unsigned long column,
in DOMTokenList classes);
void toggleColumnSortState(in unsigned long column);
void setCellCheckedState(in RowSpecification row, in unsigned long column,
in long state);
void cycleCell(in RowSpecification row, in unsigned long column);
void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};

menu and command

Element menu został już kiedyś zaprezentowany w HTML, co najmniej od wersji 2. Co prawda zrezygnowano z niego w HTML 4, jednak ma szansę na błyskoliwy powró w HTML 5, gdzie element menu składać się będzie z elementów command. Każdy z nich odpowiada za konkretną akcję. Listing 12 przedstawia menu, wyświetlające odpowiednie komunikaty.

Listing 12. Menu w HTML 5.


<menu>
<command onclick="alert('first command')" label="Do 1st Command"/>
<command onclick="alert('second command')" label="Do 2nd Command"/>
<command onclick="alert('third command')" label="Do 3rd Command"/>
</menu>

Ponadto polecenia mogą zostać zastąpione polami wyboru (checkbox) z zaznaczonym atrybutem checked, pole opcji (radio), dzięki atrybutowi radiogroup.

Dodatkowo dla prostych list poleceń, możesz użyć elementu menu do utworzenia paska narzędziowego lub menu typu pop-up, poprzez nadanie atrybutowi typ odpowiednio wartości toolbar lub popup. Na listingu 13 przedstawiony jest przykład paska narzędziowego podobnego do tego, jaki można spotkać podczas edytowania bloga typu WordPress. Wykorzystuje on atrybut icon do linkowania graficznych przycisków.

Listing 13. Pasek narzędziowy w HTML 5.


<menu type="toolbar">
<command onclick="insertTag(buttons, 0);" label="strong" icon="bold.gif"/>
<command onclick="insertTag(buttons, 1);" label="em" icon="italic.gif"/>
<command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
<command onclick="insertTag(buttons, 3);" label="b-quote" icon="blockquote.gif"/>
<command onclick="insertTag(buttons, 4);" label="del" icon="del.gif"/>

<command onclick="insertTag(buttons, 5);" label="ins" icon="insert.gif"/>
<command onclick="insertImage(buttons);" label="img" icon="image.gif"/>
<command onclick="insertTag(buttons, 7);" label="ul" icon="bullet.gif"/>
<command onclick="insertTag(buttons, 8);" label="ol" icon="number.gif"/>
<command onclick="insertTag(buttons, 9);" label="li" icon="item.gif"/>
<command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>

<command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
<command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>
<command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/>
</menu>

Atrybut label pozwala nadać tytuł dla menu. Listing 14 może zostać użyty dla menu edycji.

Listing 14. Menu edycji w HTML 5.


<menu type="popup" label="Edit">
<command onclick="undo()" label="Undo"/>
<command onclick="redo()" label="Redo"/>
<command onclick="cut()" label="Cut"/>
<command onclick="copy()" label="Copy"/>
<command onclick="paste()" label="Paste"/>

<command onclick="delete()" label="Clear"/>
</menu>

Poszczególne menu mogą być zagnieżdżane w innych, tworząc określoną hierarchię.

Konkluzja

HTML 5 wnosi swoją cegiełkę do budowy przyszłości internetu. Jego nowe elementy są bardziej zrozumiałe i oczywiste. Div i span nadal będą miały zastosowanie, jednak w mniejszym zakresie niż dotychczas. Wiele stron nie będzie musiało w ogóle z nich korzystać.

Chociaż początkowo nie wszystkie przeglądarki będą wspierały te nowe elementy, z czasem to nastąpi, jak to miało miejsce w przypadku img, table, object i wielu innych, które zostały przedstawione na długo po tym, jak HTML został wymyślony. W międzyczasie HMTL będzie ignorować nowe, nierozpoznane elementy, aby użytkownicy niewspierających ich przeglądarek byli w stanie wyświetlić zawartość stron w HTML 5, tak jak ma to miejsce obecnie. Użytkownicy nowocześniejszych przeglądarek będą mieli większe możliwości, jednak nikt nie zostanie pozbawiony możliwości korzystania ze stron pisanych w HTML 5.

Osiem lat to długi okres, przez jaki musieliśmy czekać na nowe możliwości, zwłaszcza przy szybko postępującym rozwoju internetu. HTML 5 przywraca trochę ekscytacji z dawnych czasów, gdy Netscape, Microsoft i inni przedstawiali nowe elementy tego języka co kilka tygodni. Jednocześnie nowe elementy zostały opracowane z większą uwagą, tak aby każdy mógł ich swobodnie używać. Przyszłość HTMLa rysuje się jasno.

Autor: Elliotte Rusty Harold
Tłumaczenie: Tobiasz Szlęk
Oryginalny artykuł: New elements in HTML 5

Cytowanie całości lub części tłumaczenia dozwolone, pod warunkiem podania autora tłumaczenia oraz odnośnika do tej strony.

Wszelkie uwagi dotyczące zarówno samego tłumaczenia jak i treści przekazu mile widziane.

Be Sociable, Share!

, , ,

  1. #1 przez $ivy dnia 11.08.2007 - 18:07

    hmm… już myślałem że HTML umarł. Na szczęście znalazł się ktoś, kto chce go dalej rozwijać. ciekawe tylko kiedy będzie można tego używać, tak aby przeglądarki radziły sobie z nowymi elementami.

  2. #2 przez Filozof dnia 12.08.2007 - 15:00

    No właśnie, znając IE to potrwa to do jakieś wersji 9 :D Fakt faktem dobra robota, niezłe tłumaczenie! :)

  3. #3 przez Animike dnia 13.08.2007 - 15:35

    Ale czy bedzie na pewno lesze niz div-y?? Czas pokaze. Panowie z IE beda mieli pole do popisu aby nie dac takie plamy jak wczesniej:D

  4. #4 przez ja dnia 21.08.2007 - 10:51

    HTML5 jest żałosny – jest to krok o parę ładnych lat wstecz, HTML zastąpił z sukcesem o niebo lepszy xHTML, niestety niektórzy skrajnie leniwi i niedouczeni pseudo-webmajsterzy, nie umieją się po tylu latach przestawić. „Nie ma przestrzeni nazw czy definiowania struktury dokumentów. Elementy nie muszą być zamknięte. Przeglądarki wybaczają błędy.” – że co? Przeglądarki może wybaczą, ale co z parserami xml? Jak będzie funkcjonować DOM? Traktowanie xHTMLa jako xmla jest bardzo wygodne i nie widzę powodów, żeby niedbalstwo webmasterów miało zniszczyć tą możliwość.

    ps. Brakuje mi tylko

  5. #5 przez medyk dnia 24.08.2007 - 22:59

    Ja też nie mam przekonania do HTML5, XHTML2 dużo bardziej do mnie przemawia jest bardziej zwięzły i logiczny.. w HTML5 dostajemy po prostu bogatszą zupę tagów i dzięki temu będziemy mieli jeszcze bardziej chaotycznie napisane strony. Przykładowo po co kiedy mamy – co strukturę obchodzi czy będzie zmieniana dynamicznie czy nie – z poziomu struktury takie rzeczy moim zdaniem w ogóle nie powinny być rozpatrywane.

    Jednak problem z XHTML jest taki,że jest zbyt krytyczny jeśli chodzi o błędy.. nadal wszędzie strony generuje się poprzez dodawanie łańcuchów znaków – głupia literówka w takim łańcuchu może wykrzaczyć całą stronę – gdyby wreszcie programiści przeszli na narzędzia do budowy drzewa DOM i z ich pomocą budowali dokumenty, wtedy ten problem byłby poza tematem i XHTML zaczęto by traktować bardziej poważnie.

  6. #6 przez {o} dnia 6.09.2007 - 16:47

    do „ja”:

    Niezupełnie jest tak jak myślisz.
    Po pierwsze: Specyfikacja HTML 5 przewiduje serializację dokumentu zarówno w formie „zupy tagów” („HTML5″) jak i w formie XML („XHTML5″). Nikt ci nie broni użyć tej drugiej.

    Po drugie: w przypadku HTML5, sposób obsługi błędów w kodzie jest _ściśle zdefiniowany_.

    Po trzecie: nie skrajnie leniwi i niedouczeni, tylko najpopularniejsza przeglądarka po prostu nie obsługuje XHTML. Obejście tego problemu jest nie takie znowu trywialne, bo trzeba odpowiednio rozopznać, czy przeglądarka życzy sobie XHTML, czy HTML i wysłać odpowiedni nagłówek z typem MIME: text/html dla IE tych przeglądarek, ktore preferują HTML nad XHTML, natomiast application/xhtml+xml dla reszty. Jednak takia sztuczka sprawia, że wszelkie dobrodziejstwa XML znikają, bo dokument przedstawiony jako text/html będzie potraktowany jak zupa tagów.

    Po czwarte: Dobrodziejstwa XML są wątpliwe, bo każda niedoróbka w twoim kodzie (np. spowodowana błędnym działaniem skryptu parsującego XHTML czy jakieś tam bbCode w komentarzach które zamieszczają użtkownicy pod twoimi newsami) powoduje, że twój serwis przestaje działać. Dopisanie slasha w komentarzu może i jest trywialne, ale poprawienie skryptu, który w pewnych sytuacjach generuje błędny kod jest zadaniem nie dla każdego. Tak czy siak – nie możesz wymagać od użytkowników serwisu, aby umieli XML czy nie popelniali błędów, pod groźbą wysypania całej strony. A poprawianie błędów użytkowników przez skrypt webmastera? Czym takie podejście różni się od poprawiania błędów webmastera przez przeglądarkę? Tym, że webmaster ma więcej roboty…

    Po piąte: XHTML1 w kwestii semantyki nie oferuje niczego, czego nie miałby HTML4. XHTML2 to obecnie fantastyka naukowa. Może za 10 lat będzie powszechnie obsługiwany przez przegladarki… Może…

  7. #7 przez felek dnia 9.12.2007 - 18:59

    z tego co zauważyłem, to na dzień dzisiejszy przeglądarki obsługują większość rzeczy, które oferuje html 5…. oprócz , to jak narazie jedyne co nie działa (ale jeszcze nie sprawdziłem wszystkiego).

  8. #8 przez maly_programista dnia 22.01.2008 - 11:45

    @{o}:

    XHTML na pewno pomaga a nie przeszkadza w budowie i weryfikacji strony.
    Umożliwia automatyczne skanowanie dokumentu.
    Nie wiem jakiego IE używasz, ale ja mam strony w XHTML i działają w Firefox, IE6, IE7 bez problemu. Nawet więcej – to Firefox ma czasami problemy z bardziej zagnieżdżonym CSS.

    XHTML nie musi się wiązać z używaniem gołego XML (+ co gorsza XSLT). XHTML-a używam jako implementacji XML-a i tyle.

    Zupa tagów to koszmar, który powinien się w końcu skończyć…

  9. #9 przez Reeno dnia 21.03.2008 - 13:59

    BUG:
    w konkluzji jest „W międzyczasie HMTL będzie ignorować”, >> HMTL <<

    KOMENTARZ:
    Fajnie ze wchodza nowe logiczne tagi, ktore na pewno umozliwia pisanie bardziej semantycznego kodu. Szkoda tylko ze stare standardy pozostają. Czuje, ze w efekcie nic nowego nie dostaniemy. Standardy XHTML szly w kierunku odseparowania czesci tresci wraz z jej ukladem od formatowania. Jezeli HTML 5 nadal bedzie akceptowal formatowanie wewnetrzne np. itp. to moim zdaniem szkoda czasu na zajmowanie sie tym tematem.

    Którko mowiac powinien wyjsc tylko i wylacznie HTML 5 Strict.

    Jezeli wyjdzie HTML 5 Transitional, pozwalajacy na formatowanie wewnetrzne, to wszystkie starania na marne.

  10. #10 przez Tworzenie Strona dnia 29.04.2008 - 13:43

    Dzięki za wykonaną pracę – naprawdę pomocne!

  11. #11 przez nauka dnia 16.10.2008 - 17:08

    ciekawe informacje

  12. #12 przez witul dnia 10.08.2009 - 1:11

    a co na to wszystko google?

  13. #13 przez Piotr dnia 5.02.2011 - 4:16

    Polecam inny rozbudowany artykuł na temat nowości w HTML5

    http://techscott.wordpress.com/www/html5-2/

(nie będzie widoczne)