Artykuł

sxc.hu sxc.hu
sie 08 2010
0

HTML5 - wprowadzenie do nowej technologii

Kilka miesięcy temu, przy okazji wprowadzenia nowego tabletu Apple'a (słynnego już iPada), dało się zaobserwować wyraźny konflikt na linii Adobe - Apple. Jeśli śledzicie news'y ze świata IT, to zapewne się domyślacie, że cały problem dotyczył technologii Flash (której sam osobiście nie lubię o czym pisałem we wpisie Dlaczego nie warto stosować technologii Flash na stronach WWW). Apple postanowił nie implementować Flasha w swoim najnowszym urządzeniu, czyli wspomnianym iPadzie, a w zamian postanowił wesprzeć rozwój HTML w wersji 5. Efektem tego, jest rezygnacja z technologii Flash przez twórców wielu popularnych w Internecie stron.

Zapędy do nowego, mają również blogerzy, którzy zawsze chętnie wspierają nowe standardy w swoich rozwiązaniach. W ostatnim czasie, postanowiłem również osobiście zainteresować się nowym standardem - efektem czego jest dzisiejszy wpis.

HTML5 - Jak zacząć

Jeśli tworzysz strony zgodne ze standardem XHTML to na HTML5 możesz przestawić się bardzo szybko. Wystarczy ustawić nowy doctype:

<!DOCTYPE html>

Jak widać na załączonym przykładzie, jest on niezwykle uproszczony w stosunku do tego co widzieliśmy dotychczas. I taka jest generalnie cała idea HTML5 - uprościć tworzony kod do maksimum.

Wyraźne zmiany zaszły w sekcji meta oraz w elementach związanych z samą treścią strony. Powstały nowe znaczniki, które wyraźnie określają elementy zgodnie z ich przeznaczeniem. Przykładowo tworząc nagłówek strony, użyjemy znacznika header, tworząc stopkę, będzie to znacznik footer itd.

W kolejnych akapitach postaram się opisać szerzej kolejne sekcje strony, aby każdy z Was, mógł się stać bardziej zgodny z HTML5:)

Zmiany w sekcji HEAD

Jak już wspomniałem wcześniej, zmiany dosięgły również sekcji HEAD. Również tutaj postawiono na prostotę. Dla przykładu, aby w HTML5 zdefiniować stronę kodową wystarczy użyć następującego zapisu:

<meta charset="utf-8" />

Jeśli chcemy skorzystać z arkuszu CSS, to również w tym przypadku kod potrzebny do załączenia takiego pliku, także jest krótszy:

<link rel="stylesheet" href="style.css" />

W obu przypadkach, wyraźnie widać, że w HTML5 rezygnuję się z niepotrzebnych atrybutów/elementów, bez których jak widać wszystko może działać tak jak trzeba.

Nowe znaczniki dla treści strony

Jak już wcześniej napisałem, HTML5 przynosi szereg zmian, jednak ich ogrom można dostrzec w szczególności w sekcji body strony, czyli w miejscu gdzie tworzy się właściwą treść każdego dokumentu.

Ideą HTML5 jak już wspomniałem wcześniej jest upraszczanie kodu, ale HTML5 ma jeszcze jeden ważny cel - wyraźnie zaznaczyć określone, powtarzalne elementy strony, które i tak zawsze były tworzone przez każdego webmastera. Dlatego teraz aby utworzyć nagłówek, panel nawigacyjny, artykuł, pasek boczny, czy stopkę możemy wykorzystać po prostu gotowy znacznik zdefiniowany przez twórców tej specyfikacji. Poniżej prezentuję listę najważniejszych znaczników (wraz z krótkim opisem), z których można skorzystać podczas tworzenia strony w HTML5:

  1. article - element używany do wydzielenia niezależnej sekcji, która może być również potem użyta w innym miejscu. Idealnie nadaje się do artykułów na blogach
  2. aside - element, który może posłużyć do utworzenia popularnych na stronach sidebarów. Taki element może powtarzać się na każdej podstronie, w tej samej postaci. Można go również wykorzystać do innych celów
  3. footer - kolejny praktyczny element, który możemy wykorzystać do utworzenia stopki (obojętnie czy to będzie stopka dokumentu, czy wybranej sekcji)
  4. header - element, który możemy wykorzystać do utworzenia nagłówka dokumentu lub określonej sekcji
  5. nav - sekcja, w której grupujemy wszelkie odnośniki używane do nawigacji zarówno na stronie jak i w całym dokumencie
  6. section - specjalny tag, który używamy do tworzenia (zgodnie z nazewnictwem) sekcji. Przykładowo, mamy sekcję komentarzy, sekcję screenów itp.
  7. video - znacznik, od którego w sumie niejawnie zacząłem ten wpis;) Pozwala na podłączenie filmu video bez zarzynania komputera:) Niestety, póki co, z jego wsparciem (oraz wsparciem poszczególnych kodeków) jest źle. Być może kolejne miesiące przyniosą nowe wersje przeglądarek, które będą radzić sobie z większą liczbą obsługiwanych kodeków

Powyższa lista (jak już wcześniej wspomniałem) nie jest kompletna. Starałem się tu przedstawić kilka znaczników, które mogą zachęcić was do nowej technologii. Na koniec, jeszcze jedna ważna uwaga. Używając nowych znaczników (zwłaszcza tych, które służą do wyświetlania jakiś sekcji) należy zadbać o regułę display w CSS, bez której strona po prostu się rozjedzie:

article, aside, footer, header, nav, section{
    display: block;
}

Ah ten IE...

Jeśli skorzystamy choćby z kilku rzeczy, które opisałem powyżej i otworzymy wykonaną przez nas stronę w dowolnej wersji Internet Explorera (do 8 włącznie) to może nas spotkać bardzo przykry widok. Krótko mówiąc, IE nie radzi sobie kompletnie z HTML5. W takiej sytuacji mamy trzy wyjścia:

  1. Jeśli tworzymy np. blog, to możemy zaryzykować brak wsparcia dla IE, może zachęci to kogoś do przejścia na inną - lepszą przeglądarkę
  2. Jeśli tworzymy stronę dla mas to możemy w skrajnym przypadku zostać przy XHTML, lub wprowadzić HTML5 w śladowych ilościach (choć czy to ma większy sens?)
  3. Możemy również wykorzystać specjalny JavaScript, który pozwala IE na stosunkowo normalna pracę z HTML5:
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    Specjalny warunek IF pozwoli na wykonanie kodu tylko w przeglądarkach Internet Explorer do wersji 8 włącznie

Po co mi to wszystko?

Zapewne po lekturze niniejszego wpisu, zastanawiasz się po co to wszystko. Na pierwszy rzut oka, nie dodaje to ani jakiś nowych super walorów estetycznych, ani też jakiś niezwykłych funkcjonalności. Wszystko to jest prawdą, ale HTML5 niesie ze sobą nowe znaczniki, które pozwalają Webmasterowi na łatwiejsze tworzenie witryny. Ponadto, kod w HTML5 staje się czytelniejszy i bardziej elastyczny. Wszystko to również wpływa na szybkość ładowania się witryny. Mniej zbędnego kodu, to szybszy Internet, czyli coś o co wszystkim nam chyba cały czas chodzi.

P.S. Przykład (bardzo skromny) strony napisanej w HTML5 można znaleźć w dziale kodów źródłowych - lub po prostu przeglądając sieć:)

Data ostatniej modyfikacji: 11.02.2014, 11:26.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus