Sieć rozwija się w każdej chwili. Co dziennie przybywa dziesiątki nowych stron. Większość z nich jest raczej przeciętnych, jednak zdarzają się te naprawdę innowacyjne i godne uwagi. Pojawia się pytanie jak długo jeszcze będą musiały być robione z użyciem starych technologii takich jaką z pewnością jest już HTML4. Standard posiadający już prawie dekadę na karku powoli przestaje wystarczać.Wychodząc na przeciw oczekiwaniom, standard HTML5 dodaje masę nowości takich jak lepsza obsługa formularzy, kontrolery audio/video aż po zmiany stryktury i semantyki.
Aktualnie standard HTML5 jest w fazie projektowania i dyskusji, więc wszystko co poniżej opisane może się zmienić.
Struktura
HTML5 wprowadza wiele nowości jeżeli chodzi o nowe znaczniki i samo porządkowanie dokumentu. Dotychczasowy układ strony kodowanej w HTML4 wyglądaj mniej więcej tak jak poniżej.<body> <div id="header"></div> <div id="nav"></div> <div id="article"> <div id="section"></div> </div> <div id="sidebar"></div> <div id="footer"></div>Co po nadaniu elementom article i sidebar atrybutu float: left; da standardowy układ dwóch kolumn. Nagminne używanie elementów div spowodowane jest brakiem dokładnego opisu tych elementów przez język. W przypadku HTML5 sytuacja zmienia się diametralnie, wszystkie te elementy otrzymały własne znaczniki, dzięki czemu powyższy kod wyglądałby mniej więcej tak:
</body>
Dzięki takiemu podejściu, nowe znaczniki w połączeniu ze starymi znacznikami h1-h6 pozwalają na stworzenie logicznej struktury wykraczającej poza dostępne do tej pory 6 poziomów. Oczywiście z punktu widzenia samego i czystego "skodowania" strony nie ma to większego znaczenia, jednak znacznie zwiększa problem dostępności, który w świecie iPhone'ów, Opery Mobile i innych mediów dostępu do sieci staje się niezwykle istotne.<body>
<header></header>
<nav></nav>
<article>
<section></section>
</article>
<aside></aside>
<footer></footer>
</body>
Przykładowe zagnieżdżenie sekcji i nadanie im elementów nagłówkowych mogło by wyglądać następująco.
<section>Jest to czytelne odzwierciedlenie wagi nagłówków dla poszczególnych sekcji. W nowym standardzie można powiedzieć ze h1 jest obowiązujące w obrębie lokalnym zawierającego go elementu. Jednakże dla wstecznej kompatybilności z przeglądarkami możliwe jest stosowanie elementów h1-h6 w poszczególnych zagłębieniach.
<h1>Nagłówek 1</h1>
<section>
<h1>Nagłówek sekcji zagnieżdżonej</h1>
</section> </section
Taka specyfikacja pozwala czytnikom, przeglądarkom i różnej maści urządzeniom na dostęp bezpośrednio do elementu, który je interesuje. Przykładowo przeglądarka w komórce może ominąć sekcję header w której zwyczajowo umieszczane są loga itp. a odnieść się bezpośrednio do treści w sekcji article czy section.
Element header zawiera więcej niż tylko nagłówek sekcji. Jest to miejsce gdzie z powodzeniem można umieścić slogan, numer wersji czy też autora.
Element footer jest typową stopką zawierającą informacje o autorze, dacie publikacji czy prawach autorskich odnosnie danej sekcji.<header>
<h1>Przykładowy temat</h1>
<h2>Slogan strony</h2>
</header>
Element nav jest miejscem na menu nawigacyjne.<footer>© 2007 nostrzak.blogspot.com</footer>
Element aside jest miejscem na podręczne menu dla wyświetlanej treści, przykładowo linki pomocnicze do artykułu.<nav>
<ul>
<li><a href="">Strona główna</a></li>
<li><a href="#arch">Archiwum</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
Element section to miejsce na główną treść strony taką jak rozdział czy właściwą treść strony.<aside>
<h1>Archiwum</h1>
<ul>
<li><a href="/2007/09/">Styczeń 2007</a></li>
</ul>
</aside>
<section> <h1>Temat artykułu</h1> <p>Lorem ipsum ...</p> </section>Ostatni z nowych elementów article, jest miejscem przeznaczonym na niezależne treści na stronie, przykładowym zastosowaniem może być umieszczenie w nim newsów lub komentarzy do artykułu.
<article> <header>
<h1>Komentarz opublikowany przez: nostrzak</h1>
<p>Dnia 01-01-2007</p>
</header>
<p>Treść komentarza</p>
</article>
Audio i Video
Popularność serwisów typu YouTube spowodowała bardzo mocne zainteresowanie problemem umieszczania plików audio oraz video na stronach internetowych. Do tej pory najpopularniejszym sposobem opublikowania filmu na stronie jest umieszczenie go w odtwarzaczu flash'owym. W specyfikacji HTML5 trwają prace nad dodaniem obsługi multimediów już na poziomie przeglądarki. Dzieki nowym takom audio i video staje się to niezwykle proste, a sterowanie tymi elementami odbywa się na poziomie DOM'a. Opera już wypuściła testowe wersje przeglądarek obsługujące ten standard.Aby zamontować standardowy odtwarzacz na swojej stronie wystarczy następujący kod.
Atrybut controls odpowiada za umieszczenie standardowych kontrolek takich jak start/stop czyli w skrócie całego UI. W atrybucie poster określamy obrazek jaki ma się wyświetlić zanim film zostanie odtworzony. Pliki audio umieszcza się w bardzo podobny sposób, jednak z wiadomych powodów nie ma atrybutów width, height i poster.<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>
Standard HTML5 wprowadza dodatkowo możliwość podawania alternatywnych źródeł dźwięku/video w zależności od dostępnych kodeków etc.<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>
Dla ludzi chcących większej kontroli nad odtwarzanym obrazem, wprowadzono dla elementu video/audio w modelu dom metody play(), stop() czy wartość currentTime.<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.ogv" type="video/ogg" codecs="theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
Reprezentacja dokumentu
W przeciwieństwie do poprzednich wersji HTML'a czy XHTML'a najnowsza specyfikacja stworzona jest nie na podstawie luźnego spisu jak do tej pory ale oparta została na Document Object Model (DOM) - odwzorowaniu struktury dokumentu w postaci drzewa. Dzięki temu dokument nie jest budowany w oparciu o sztywne ramy składniowe a pozwala na dowolne budowanie struktur drzewiastych.Dostępne są dwa sposoby interpretacji dokumentów: serializacja HTML (znane jako HTML5) oraz XML (znane jako XHTML5).
- HTML5 bazowany jest na poprzednich wersjach języka jednak wprowadza parę elementów, które odzwierciedlają to jak przeglądarki czytają html'a w praktyce.
- XHTML5 to czytanie dokumentu jako XML, łącznie z przestrzeniami nazw.
Zalety używania HTML
- kompatybilność wsteczna z istniejącymi przeglądarkami
- autorzy już są zaznajomieni ze składnią
- drobne błędy składniowe nie powodują "wysypania się" strony
- liberalna i skrócona składnia pozwala na omijanie części tagów i atrybutów
Zalety używania XHTML
- Wymogi XML'a powodują pisanie dobrze sformatowanego i często łatwiejszego w zarządzaniu kodu
- Łatwa integracja z innymi słownikami XML
- Pozwala na przetwarzanie i parsowanie XML, które może być używane jako dodatkowe przetwarzanie
http://www.alistapart.com/articles/previewofhtml5
0 komentarzy:
Prześlij komentarz