Laboratorium

Co już dziś warto wiedzieć o HTML5?

Prace nad tym nowym standardem konsorcjum World Wide Web (W3C) rozpoczeło w 2007 roku, a pierwszy publiczny projekt specyfikacji ujrzał światło dzienne 22 stycznia 2008 roku. Od tej chwili prace nie posuwały się już tak szybko ponieważ specyfikacja ta nadal pozostaje w fazie prac koncepcyjnych. Co więcej, Ian Hickson, redaktor specyfikacji tego promowanego przez grupę WHATWG standardu, poinformował, że kompletna edycja tego języka zostanie wydana dopiero w 2022 roku. Informacja ta wywołał prawdziwą burzę wśród programistów aplikacji sieciowy, niektórzy wręcz otwarcie nawołują do zaprzestania przejmowania się standardami i walidacją kodu pod względem konkretnej specyfikacji.

Co więc naprawdę warto wiedzieć o HTML5 już teraz?

  • Nowy typ Doctype

    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Też masz problem z zapamiętaniem składni nagłówka doctype dokumentu HTML? W HTML5 nie będzie to już problemem:

    <!DOCTYPE html>

    A co z przeglądarkami nie interpretującymi poprawnie nowego typu doctype? Wyrenderują stronę w trybie standardowym.

  • Atrybut type załączanych arkuszy styli oraz skryptów w języku JavaScript

    • <link rel="stylesheet" href="katalog/style.css" type="text/css" />
    <script type="text/javascript" src="katalog/script.js"></script>

    Nie ma już konieczności umieszczania tego atrybutu, teraz składnia może wyglądać następująco:

    <link rel="stylesheet" href="katalog/stylesheet.css" />
    <script src="katalog/script.js"></script>

  • Semantic web

    • HTML5 przynosi nam składnię symatyczną i możliwość posługiwania się takimi tagami jak: <header> <footer> <section> <article> i zaleca posługiwanie się tagiem <div> jak najrzadziej. Co jednak w przypadku starszych przeglądarek, które ich nie rozpoznają? Możemy posłużyć się małą sztuczką w CSS:

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

    oraz JavaScripcie:

    1. document.createElement("article");
    2. document.createElement("footer");
    3. document.createElement("header");
    4. document.createElement("hgroup");
    5. document.createElement("nav");
    6. document.createElement("menu");

    albo skorzystać z gotowego skryptu autorstwa Remiego Sharpa, który zajmie się tym automatycznie:

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    Przy okazji proponuję zapoznać się z bardzo ciekawą "tablicą okresową" elementów HTML znajdująca się pod tym adresem: http://joshduck.com/periodic-table.html

  • Formularze w HTML 5 czyli Web Forms 2.0

    • Web Forms 2.0 to jedna ze specyfikacji opracowanych przez WHATWG i włączona do specyfikacji HTML5. Umożliwia wstępną np. walidację formularzy po stronie klienta bez potrzeby uciekania się do wykorzystania w tym celu javascriptu.

    Wg specyfikacji HTML/XHTML element <input> z nierozpoznanym przez przeglądarkę typem ma zachowywać się jak type="text". Nieznane atrybuty mają być ignorowane.

    Dostępne atrybuty:

    1. Pole wymagane: required="required". Oznaczone w ten sposób pola formularza muszą zostać wypełnione przed jego wysłaniem.
    2. Liczba: <input type="number" />. Pole może być wypełnione tylko liczbami. Domyślnie posiada wartość 1 i jest ograniczone do liczb całkowitych, ale możliwe jest zastosowanie atrybutu step, dzięki któremu możemy zdefiniować ilość cyfr wprowadzonych po przecinku.
    3. Adres email lub url: <input type="email" /> <input type="url" />. Pole umożliwia wprowadzenie adresu email / adresu absolutnego strony internetowej.
    4. Data: <input type="date" /> pole przyjmuje datę w formacie RRRR-MM-DD.
    5. Czas: <input type="time" /> pole przyjmuje czas w formacie GG:MM:SS. Istnieje również możliwość wprowadzenia numeru tygodnia: <input type="week" /> lub miesiąca <input type="month" /> lub kombinacji daty i czasu <input type="datetime" /> (pole to przyjmuje wartości w formacie RRRR-MM-DDTGG:MM:SS.00Z. Litery T i Z są częścią zapisu).
    6. Ciekawą możliwością specyfikacji Web Forms 2.0 jest możliwość definiowania własnych wyrażeń regularnych:

      <form action="" method="post">
      <label for="username">Nazwa użytkownika: </label>
      <input type="text"
      name="username"
      id="username"
      placeholder="4 <> 10"
      pattern="[A-Za-z]{4,10}"
      autofocus
      required>
      <button type="submit">Wyślij </button>
      </form>

Email: kontakt@concat.pl