Szybki kurs HTML5. Część 1.

html5

Poziom podstawowy

Zapraszamy do Kursu HTML5 w pigułce. Staraliśmy się przygotować szybki kurs języka HTML5 (i używania JavaScript w jego kontekście), zawierający kluczowe informacje w jednym miejscu. Sprawę nieco komplikuje fakt, iż temat jest dość obszerny, ale w końcu po to jest niniejszy blog, aby zgłębiać temat w przyszłych wpisach.

Szybki kurs HTML5

HTML5 jest rozwinięciem języka HTML 4 i jego odmiany XHTML 1. Jest to konkurencyjna specyfikacja w stosunku do specyfikacji XHTML 2, której rozwój został porzucony na rzecz wsparcia HTML5.

Język ten wprowadza wiele nowości względem swoich starszych odpowiedników, m.in.:

nowe tagi, takie jak article, header, footer, nav, video, audio, mark, progress, section;

nowe typy pól formularzy: color, email, datetime-local, datetime, date, month, week, time, number, range, tel, search, url;

nowe atrybuty elementów formularzy: autofocus, required, autocomplete, min, max, multiple, pattern, step.

Programista dostaje zatem wiele udogodnień dla programowania UI.

Są także nowości jeśli chodzi o API:

– rysowanie 2D z nowym elementem Canvas,

– API przeciągnij i upuść, z atrybutem draggable,

– API do odtwarzania audio i video,

– API edycji z atrybutem contenteditable,

– API dla aplikacji offline,

– storage API (pamięć) pozwalające na przechowywanie danych lokalnie, pomiędzy przeładowaniami strony

– geolokalizacja, microdata i inne.

Pojawiły się także nowe metody DOM:

– activeElement()

– hasFocus()

– getElementsByClassName()

– getSelection()

– classList()

– relList() – dla elementu a

– innerHTML() – dla window i document

Ponadto specyfikacja HTML5 kładzie nacisk na obsługę błędów.

Przeglądarki obsługujące HTML5 będą dostosowane do obsługi błędów w składni. HTML5 został zaprojektowany tak, by starsze przeglądarki bez problemu mogły ignorować nowe konstrukcje.

Uważamy, że HTML5 to wspaniała technologia o wielkich możliwościach i potencjale, która to też znakomicie odnajduje się na urządzeniach mobilnych.

A skoro mowa o urządzeniach, to wspomnijmy o meta viewport.

Meta viewport i HTML5 na urządzeniach mobilnych

Znacznik viewport określa sposób wyświetlania strony na urządzeniach mobilnych. Pozwala ustawiać opcje skalowania czy też domyślne przybliżenie. Tak jak inne znaczniki meta, także i ten umieszczamy w sekcji HEAD.

Przykład:

<meta name="viewport" content="width=device-width, initial-scale=1">

To wystarczy, z tym że meta viewport powinniśmy użyć tylko w przypadku tworzenia layoutu dedykowanej strony mobilnej lub strony typu responsive.

Możliwe jest użycie dodatkowych parametrów, o ile jest to uzasadnione (korzystne dla user experience). Nie jest tajemnicą, że projektując taką stronę, należy wykonywać testy. Na szybko można skorzystać z rozwiązań typu Opera Mobile Emulator, ale nie obejdzie się bez testów na prawdziwych urządzeniach mobilnych.

A wracając do parametrów, mamy:

Device-width – ustalenie szerokości naszej strony jest chyba najważniejszą częścią tagu meta viewport. Zapisanie tagu jak w przykładzie poniżej mówi przeglądarce, że strona zaadaptuje się do szerokości urządzenia:

<meta name="viewport" content="width=device-width">

Możemy zamiast tego użyć także wartości liczbowych (w px), a ponadto ustawić wartość dla height:

<meta name="viewport" content="width=320, height=480">

Podobnie do device-width, dostępna jest także wartość device-height.

Initial-scale – skala początkowa; ten parametr ustala początkowy poziom przybliżenia (zoom). Zwykle oznacza to, że 1px z CSS odpowiada 1px z ekranu urządzenia, co normalnie nie zawsze musi się pokrywać.

Domyślna wartość zależy od przeglądarki, ale możemy wymusić własną wartość, na przykład żeby strona wyświetlała się domyślnie w 5-krotnym przybliżeniu:

<meta name="viewport" content="initial-scale=5">

Można dodać także:

Maximum-scale – czyli określenia maksymalnego poziomu przybliżenia.

Trzeba pamiętać że użycie tych parametrów jest opcjonalne, ale na przykład nigdy nie powinno się stosować maximum-scale=1.0. Zatem jeśli już używamy danego parametru, upewnijmy się że nie popsuje to widoku naszej strony.


Drag and Drop

HTML5 przynosi nam także rozwiązania dla typowych operacji programistycznych. Jedną z nich jest „przeciągnij i upuść”. Wsparcie drag and drop jest częścią standardu.

Każdy element można uczynić ‚draggable’ (możliwe będzie jego przeciąganie). Sposób jest prosty:

<img src="code.png" draggable="true" />

Należy zdefiniować funkcje obsługi, przede wszystkim dragStart(event) oraz dragDrop(event) i przypisać je do odpowiednich elementów.

Poniżej kompletny przykład prostej implementacji drag and drop w HTML5:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
  #theBox, #theTarget {
    margin: 15px;
    padding: 15px;
    float: left;
  }
  
  #theBox { 
    width: 64px; 
    height: 64px; 
    background-color: #ee0000; 
  }

  #theTarget { 
    width: 200px; 
    height: 200px; 
    background-color: #00ee00; 
  }
</style>

<script type="text/javascript">
function dragStart(ev) {
    ev.dataTransfer.effectAllowed = 'move';
    ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
    ev.dataTransfer.setDragImage(ev.target, 0, 0);
	
    return true;
}

function dragEnter(ev) {
    event.preventDefault();
	
    return true;
}

function dragOver(ev) {
    // alert('Done');
    return false;
}

function dragDrop(ev) {
    var src = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(src));
    ev.stopPropagation();
	
    return false;
}
</script>
</head>

<body>
  <h2>HTML5 - simple drag and drop</h2>
  <p>Try to move small box.</div>
  
  <div id="theBox" draggable="true" 
    ondragstart="return dragStart(event)">
    <p>Drag Me</p>
  </div>
  
  <div id="theTarget" 
    ondragenter="return dragEnter(event)" 
    ondrop="return dragDrop(event)" 
    ondragover="return dragOver(event)">Target</div>
	
</body>
</html>

Przykład można potraktować jako szkielet do tworzenia bardziej zaawansowanych implementacji drag and drop.

Na koniec coś dla dociekliwych – HTML5 reference on W3Schools.

Podsumowanie

Na tym zakończymy część 1. szybkiego kursu HTML5, zapraszamy do części drugiej, w której przyjrzymy się bliżej kolejnym elementom HTML5.

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 Facebook2Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.