Szybki kurs HTML5. Część 2 – podsumowanie.

html5

Poziom średnio-zaawansowany

W drugiej, podsumowującej części podstawowego kursu HTML5 przyjrzymy się bliżej kolejnym zagadnieniom.

Szybki kurs HTML5: biblioteka Modernizr

Już na początku dodamy sobie ułatwienie pracy w postaci biblioteki Modernizr.

Jest to biblioteka JavaScript, która wykrywa dostępność funkcji HTML5 i CSS3 w przeglądarce użytkownika.

Możemy pobrać Modernizr z oficjalnej strony, gdzie jest także narzędzie, dzięki któremu możemy wybrać testy tylko tych funkcjonalności, które nas interesują. Przy okazji widzimy listę funkcjonalności, które potrafi wykryć Modernizr.

Możemy też skorzystać z CDN, takiego jak cdnjs.com.

Dodajemy bibliotekę do naszego projektu:

<script src="modernizr.js" type="text/javascript"></script>  

Dodajmy także klasę no-js to głównego znacznika (html):

<html class="no-js">
...

Modernizr uruchamia się automatycznie, więc od razu możemy go użyć, na przykład celem sprawdzenia, czy przeglądarka obsługuje element Canvas:

if (Modernizr.canvas) {
  // let's draw!
} else {
  // no native canvas support available
}

Jak widać, testy które wykonuje Modernizr pozwalają nie tylko na błyskawiczne wykrycie dostępności danej funkcjonalności, ale także implementację alternatywy dla przeglądarek nie wspierających jej.

Czynności, które wykonuje powyższy kod, można także napisać samodzielnie w JavaScript:

function supports_canvas() {
  return !!document.createElement('canvas').getContext;
}

Ale ze pewne nie tylko mnie bardziej odpowiada sposób z użyciem Modernizr.

Należy pamiętać że Modernizr nie jest biblioteką dodającą do przeglądarki brakujące funkcjonalności. Istnieje poniekąd takie rozwiązanie – biblioteka html5shiv, które może dodać wsparcie niektórych elementów HTML5 w IE9+.

W nowszych wersjach Modernizr znajdziemy m.in. takie przydatne udogodnienia, jak:

– warunkowe wczytywanie zasobów z użyciem metody load(),

– Media Queries ( np.: Modernizr.mq(‚only all and (max-width: 500px)’) ),

– wykrywanie prefiksów silników renderujących używanych przez przeglądarki ( np.: Modernizr.prefixed(‚transform’) ).

Spójrzmy na kilka innych przykładów.

Sprawdzenie, czy dostępne jest WebGL:

if (Modernizr.webgl) {  
    // uruchom_gre();
} else {
    alert("Niestety, potrzebujesz lepszej przeglądarki aby zagrać");
}

HTML5 świetnie wspiera odtwarzanie plików audio i video. Szczegóły omówimy w jednym z przyszłych artykułów. Nie każda przeglądarka natomiast może wspierać te funkcjonalności, więc dodajemy sprawdzanie dostępności:

// sposób #1
if (Modernizr.video) {
  // odtwórzmy film
}

// sposób #2 - w samym JavaScript:
function supports_video() {
  return !!document.createElement('video').canPlayType;
}

A w taki sposób możemy wykryć dostępność funkcjonalności Local Storage:

if (Modernizr.localstorage) {
  // przechowajmy jakieś dane
}

// lub klasycznie:
function supports_local_storage() {
  try {
    return 'localStorage' in window 
      && window['localStorage'] !== null;
  } catch(e) {
    return false;
  }
}

Biblioteka Modernizr jest po prostu przyjemna w użyciu.

Jako że w założeniu jest to szybki kurs HTML5, przejdźmy teraz do szybkiego omówienia Input types – pól formularzy, które daje nam do dyspozycji ten język.


Pola typu input w HTML5

Możliwości oddaje poniższa lista:


<input type="search"> <!-- for search boxes -->

<input type="number"> <!-- for spinboxes -->

<input type="range"> <!-- for sliders -->

<input type="color"> <!-- for color pickers -->

<input type="tel"> <!-- for telephone numbers -->

<input type="url"> <!-- for web addresses -->

<input type="email"> <!-- for email addresses -->

<input type="date"> <!-- for calendar date pickers -->

<input type="month"> <!-- for months -->

<input type="week"> <!-- for weeks -->

<input type="time"> <!-- for timestamps -->

<input type="datetime"> <!-- absolute date/time stamps -->

<input type="datetime-local"> <!-- for local dates and times -->

Jak widać programista otrzymuje spore udogodnienie, gdyż nie musi implementować samodzielnie rozwiązań do przyjmowania od użytkownika danych określonego typu / formatu. Odpowiednie pole są już wbudowane w HTML5.

Oczywiście warto wykonać test dostępności funkcjonalności. Modernizr pozwala łatwo zbadać dostępność nawet typów pól.

Przykład:

if (!Modernizr.inputtypes.date) {
  // no native support for <input type="date">
  // try to use some JavaScript Framework perhaps ...
}

Jako ciekawostka: dodatek do publikacji diveintohtml5, przedstawiający jak określać dostępność funkcjonalności w samym JavaScript.

Następny podpunkt zawiera zwięzłe przykłady użycia elementów formularzy w HTML5.

Szybki kurs HTML5: przykłady formularzy

Na początek Placeholder:

<form>
  <input name="q" placeholder="Go to a Website">

  <input type="submit" value="Search">
</form>

Atrybut Autofocus:

<form>
  <input name="q" autofocus>
  <input type="submit" value="Search">
</form>

Pole typu email:

<form>
  <input type="email">
  <input type="submit" value="Go">
</form>

Pole typu number, pozwalające ustalać także dodatkowe parametry, takie jak zakres wartości:

<input type="number"
  min="0"
  max="12"
  step="2"
  value="5">

Oczywiście w JavaScript znajdziemy dedykowane metody obsługi takich pól, na przykład:

– input.stepUp(n); // zwiększa wartość pola o n

– input.stepDown(n) // zmniejsza o n

– input.valueAsNumber // zwraca bieżącą wartość jako liczbę zmiennoprzecinkową (właściwość input.value zawsze zwróci string)

I odpowiednio sprawdzanie dostępności z użyciem Modernizr:

if (!Modernizr.inputtypes.number) {
  // ...
}

Slider i pole typu range:

<input type="range"
  min="0"
  max="10"
  step="2"
  value="6">

Color picker dzięki polu typu color:

<input type="color">

Tak to generalnie wygląda dla pól.

Spójrzmy jeszcze na mały przykład walidacji formularza. Atrybut novalidate określa pola, które nie będą podlegać walidacji, pole wymagane zostanie oznaczone jako required:

<form novalidate>
  <input type="email" id="e-addr">
  <input type="submit" value="Subscribe">
</form>

<form>
  <input id="q" required>
  <input type="submit" value="Search">
</form>

Inny przykład:

<label>Email:</label> 
<input name="email" type="email" required>

Mikro-dane / Microdata

Specyfikacja mikrodanych HTML5 udostępnia sposób oznaczania treści etykietami. Ich celem jest opisanie konkretnych typów informacji – na przykład opinii czy wydarzeń. Użycie microdata pozwala na przykład zadeklarować, że dana fotografia jest dostępna na określonej licencji.

Prosty przykład:

<div item>
  <p>My name is <span itemprop="name">Hans</span>.</p>
  <p>I am <span itemprop="nationality">German</span>.</p>
</div>

Sprawdzanie dostępności w JavaScript:

function supports_microdata_api() {
  return !!document.getItems;
}

Inne przykłady – zaczerpnięte z http://diveintohtml5.info/:


<p>
  <img src="http://www.example.com/photo.jpg" alt="[me smiling]">
</p>

<section itemscope itemtype="http://data-vocabulary.org/Person">

<img itemprop="photo" width="204" height="250"
    src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
    alt="[Mark Pilgrim, circa 2000]">

<dd itemprop="address" itemscope
        itemtype="http://data-vocabulary.org/Address">

    <span itemprop="street-address">100 Main Street</span><br>
    <span itemprop="locality">Anytown</span>,
    <span itemprop="region">PA</span>
    <span itemprop="postal-code">19999</span>
    <span itemprop="country-name">USA</span>
</dd>

Można powiedzieć że jest to poniekąd metoda rozszerzania HTML5.

Dociekliwym zainteresowanym tematem polecam artykuły:

microdata

microformats

Nowe elementy semantyczne

HTML5 to także nowe elementy semantyczne. Spośród nich możemy wymienić:

<section>
Element reprezentujący generyczną sekcję dokumentu / aplikacji, zwykle służy do tematycznego grupowania zawartości oraz zawiera nagłówek.

<nav>
Najprościej mówiąc jest to element reprezentujący sekcję, w której umieszczamy linki do innych stron, czyli nawigację.

<article>
Ten element natomiast używany jest dla takich elementów jak posty na forum, wpisy na blogu, komentarze, czy po prostu artykuł.

<aside>
W takich elementach umieszczamy zwykle poboczne komponenty strony, takie jak sidebars, miejsca na reklamę, czy cokolwiek co chcielibyśmy na swój sposób oddzielić od głównej zawartości strony.

<hgroup>
W tym elemencie zgrupujemy nagłówki (h1-h6) sekcji, szczególnie gdy mają wiele poziomów.

<header>
W tym elemencie zwykle umieścimy nagłówek strony; możemy grupować nagłówki wprowadzające lub grupę (hgroup), logo czy też formularz wyszukiwania.

<footer>
Czyli element reprezentujący stopkę strony.

Są też inne elementy, jak <time> reprezentujący datę / czas, czy element <mark>.

Przykład:

<article>
  <header>
    <h1>A syndicated post</h1>
  </header>
  <p>Lorem ipsum blah blah…</p>
</article>

<time datetime="2009-05-23" pubdate="pubdate">May 23, 2009</time>

Przykład #2 – nav:


<div id="nav">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</div>

Przykład #3 – footer:

<footer>
  <p>(c) 2012 <a href="#">Author</a></p>
  
</footer>

Użycie elementów nie jest sztywno określone. Można na przykład łączyć i zagnieżdżać elementy cele uzyskania rozbudowanej stopki – tzw. fat footer.

Przykład:

<footer>
  <nav>
    <h1>Navigation</h1>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/folio.html">Portfolio</a></li>
      <li><a href="/offer.html">Offer</a></li>
    </ul>
  </nav>
  <nav>
    <h1>Contact</h1>
    <ul>
      <li><a href="/contact.html">Contact</a></li>
      <li><a href="/help.html">Help</a></li>
      <li><a href="/sitemap.html">Site Map</a></li>
    </ul>
  </nav>
  <section>
    <h1>Social</h1>
    <ul>
      <li><a href="http://twitter.com/xyz">Twitter</a></li>
      <li><a href="http://facebook.com/xyz">Facebook</a></li>
    </ul>
  </section>
  <p class="copyright">Copyright © 2012 Xyz</p>
</footer>

Warto także rzucić okiem na krótki opis z przykładami na W3Schools.

Polecam także dokumentację biblioteki Modernizr.

Podsumowanie

I tym samym kończymy drugą, podsumowującą część podstawowego kursu HTML5. Ale w żadnym razie nie kończymy zgłębiania wielkich możliwości tego języka.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.