27.11.2012r.

HTML5

przyszłość internetu

Plan prezentacji

Historia HTML i przyszłość standardu
Nowe elementy w specyfikacji HTML5
Podsumowanie

Historia HTML

HTML - (ang. HyperText Markup Language) hipertekstowy język znaczników

1991 - Znaczniki HTML - pierwsza publiczna specyfikacja (18 elementów)
1993 - Hypertext Markup Language - specyfikacja oparta na SGML (szkic)
1997 - HTML 4.0, opublikowany jako rekomendacja W3C (World Wide Web Consortium)
2000 - XHTML1.0

HTML5

2008 - szkic opublikowany przez W3C
obecnie - ciągłe prace nad specyfikacją
2014 - opublikowanie wersji stabilnej, rekomendacja W3C

Najważniejsze cechy

Ujednolicenie specyfikacji.
Elastyczne parsowanie dokumentu.
Ustandaryzowany sposób obsługi błędów.
Kompatybilność wsteczna.

Grafika i multimedia

Obsługa treści multimedialnych bez użycia zewnętrznych wtyczek.

Element <canvas>
Element <audio>
Element <video>

Element <canvas>

canvas - płótno

Tworzenie grafiki 2D (oraz 3D) na stronach za pomocą języków skryptowych, głównie JavaScript.
Złożone graficznie aplikacje internetowe, gry itp. - wystarczy włączona obsługa JavaScript w przeglądarce.
Interfejs programistyczny niezbyt przyjazny w użyciu.

<canvas> - przykład

Sin(x) Cos(x)

<canvas> - kod

Kod HTML


							<canvas id='canvasSampl' width='720' height='360'/>

Kod JavaScript


						
							document.getElementById("canvasSampl").onmousemove = function(e){
	drawCanvasExample((e.layerX)*(canvasW/this.getBoundingClientRect().width));
}
							
function drawCanvasExample(mouseX){
	var canvas = document.getElementById("canvasSampl").getContext("2d");
	var grd = canvas.createLinearGradient(0,0,0,canvasH)
	grd.addColorStop(0,"#000000");
	grd.addColorStop(0.5,"#666666");
	grd.addColorStop(1,"#000000");
	canvas.fillStyle = grd;
	canvas.fillRect(0,0,canvasW,canvasH);
	
	canvas.beginPath();
		canvas.lineWidth = 2;
		canvas.strokeStyle = "white";
		
		canvas.moveTo(0, canvasH/2);
		canvas.lineTo(canvasW, canvasH/2);
		
		canvas.moveTo(canvasW/2, 0);
		canvas.lineTo(canvasW/2, canvasH);
	canvas.stroke();
	
	canvas.beginPath();
	canvas.lineWidth = 1;
	
		canvas.moveTo(0, canvasH/6);
		canvas.lineTo(canvasW, canvasH/6);

		canvas.moveTo(0, canvasH/6*5);
		canvas.lineTo(canvasW, canvasH/6*5);
		
		canvas.moveTo(canvasW/4, 0);
		canvas.lineTo(canvasW/4, canvasH);
		
		canvas.moveTo(canvasW/4*3, 0);
		canvas.lineTo(canvasW/4*3, canvasH);

	canvas.stroke();
	
	canvas.beginPath();
	canvas.lineWidth = 0.25;
	
		canvas.moveTo(0, canvasH/6*2);
		canvas.lineTo(canvasW, canvasH/6*2);

		canvas.moveTo(0, canvasH/6*4);
		canvas.lineTo(canvasW, canvasH/6*4);
		
		canvas.moveTo(canvasW/8, 0);
		canvas.lineTo(canvasW/8, canvasH);
		
		canvas.moveTo(canvasW/8*3, 0);
		canvas.lineTo(canvasW/8*3, canvasH);

		canvas.moveTo(canvasW/8*5, 0);
		canvas.lineTo(canvasW/8*5, canvasH);
		
		canvas.moveTo(canvasW/8*7, 0);
		canvas.lineTo(canvasW/8*7, canvasH);
		
	canvas.stroke();
	
	canvas.fillStyle = "white";
	canvas.font="bold 15px Arial";
	canvas.fillText("0", canvasW/2+5, canvasH/2+15);
	canvas.fillText("1", canvasW/2+5, canvasH/6+15);
	canvas.fillText("-1", canvasW/2+5, canvasH/6*5+15);
	canvas.fillText("180°", canvasW/4*3+5, canvasH/2+15);
	canvas.fillText("-180°", canvasW/4+5, canvasH/2+15);
	canvas.fillText("-360°", 5, canvasH/2+15);
	

	canvas.beginPath();
		canvas.lineWidth = 4;
		canvas.strokeStyle = "green";

		canvas.moveTo(-canvasW/2, canvasFunc(-canvasW/2));
		for(var x = -canvasW/2; x < canvasW/2; x++)
			canvas.lineTo(canvasW/2+x, canvasH/2 - canvasFunc(x) * canvasH/3);
	canvas.stroke();
	
	if(mouseX){
		var y = canvasH/2 - canvasFunc(mouseX) * canvasH/3;
		canvas.beginPath();
			canvas.lineWidth = 2;
			canvas.strokeStyle = "red";
			canvas.moveTo(mouseX,0);
			canvas.lineTo(mouseX, canvasH);
			
			canvas.moveTo(mouseX-6, y);
			canvas.lineTo(mouseX+6, y);
			canvas.arc(mouseX, y, 6, 0*Math.PI, 2*Math.PI);
		canvas.stroke()
		
		canvas.fillStyle = "white";
		canvas.font="bold 20px Arial";
		canvas.fillText("x = "+Math.round((mouseX-360)*100)/100 + "° y = " + Math.round(canvasFunc(mouseX)*100)/100,
						mouseX < canvasW/2 ? mouseX + 10 : mouseX - 200, canvasH - 15);
	}
}

Tagi <audio> i <video>

Pozwalają na odtwarzanie plików multimedialnych.
Odtwarzanie przez przeglądarkę szybsze i mniej obciążające procesor.
Większa kompatybilność z różnymi systemami niż np. Adobe Flash
Obecnie problemy z brakiem jednolitego formatu obsługiwanego we wszytkich przeglądarkach.

Element <audio>

Obsługiwane typy plików (zależnie od przeglądarki):

audio/mpeg (MP3)
audio/ogg
audio/wav

Możliwość automatycznego rozpoczęcia odtwarzaniu po załadowaniu strony (autoplay).
Możliwość odtwarzania ciągłego (repeat).

<audio> - przykład

Kod HTML


							<audio controls="controls">

							   <source src="media/audio.ogg" type="audio/ogg">

							   <source src="media/audio.mp3" type="audio/mp3">

							   Twoja przeglądarka nie obsługuje tagu audio.

							</audio>

Efekt

Element <video>

Obsługiwane typy plików (zależnie od przeglądarki):
- video/ogg
- video/mp4
- video/webm
Możliwość wstrzymywania i wznawiania odtwarzania z poziomu JavaScript.
Możliwość dodania napisów (obecnie brak wsparcia ze strony przeglądarek).

<video> - przykład

Kod HTML


							<video controls="controls">

							   <source src="media/video.mp4" type="video/mp4">

							   Twoja przeglądarka nie obsługuje tagu video.

							</video>

Efekt

Treść

Całkowite oddzielenie treści od sposobu jej prezentacji.

Usunięte wszystkie elementy określające sposób prezentacji (m.in. <center>, <strong>, <big>) - zastąpione przez CSS3.
Nowe, "silne" semantycznie elementy - lepsza struktura dokumentów HTML.

Nowe elementy blokowe

<header> - nagłówek
<nav> - nawigacja
<section> - sekcja
<article> - zawartość
<aside> - panel boczny
<footer> - stopka

Na znaczeniu traci element <div>, używany dotąd do tworzenia układu stron.

Element <progress>

Graficzne przedstawienie postępu trwającej operacji.

Kod HTML


							<progress value="22" max="100"></progress>

							<progress></progress>

Efekt

%

Element <meter>

Graficzna prezentacja wartości z pewnego znanego zakresu, np. zajętości przestrzeni dyskowej.

Kod HTML


							<meter min="0" low="2" high="7" max="9" value="5"/>

Efekt

Zagadka

Jak rozpoznać, że to HTML5?

Otwórz w Internet Exploler
jeżeli nie działa - to na pewno HTML5!

Zaawansowane aplikacje internetowe

Aplikacje w przeglądarce z możliwościami programów uruchamianych lokalnie.

Edycja zawartości strony
Przeciągnij i upuść
Przechowywanie lokalne
Geolokalizacja

Edycja zawartości strony

Atrybut contenteditable

Pozwala użytkownikowi edytować zawartość elementu na stronie.

Kod HTML


							<p contenteditable="true">Lorem ipsum(...)</p>

Efekt

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit massa, pretium at elementum sit amet, convallis non nisi.

Przeciągnij i upuść

HTML5 Drag&Drop API

Wygodna interakcja z elementami aplikacji internetowej poprzez ich przeciąganie i upuszczanie.
Nieintuicyjny interfejs programistyczny.

Przykład

Przechowywanie lokalne

HTML5 Web Storage

Pozwala na przechowywanie danych związanych z witryną po stronie klienta.
Dane w postaci par klucz-wartość.
Podobny do ciasteczek (Cookies) ale wydajniejszy i bardziej bezpieczny.
Dane wysyłane tylko kiedy jest to niezbędne.
Możliwość przechowywania dużych ilości danych.
Dwa typy zasobów:
- localStorage - bez ograniczeń czasowych
- sessionStorage - tylko w ramach jednej sesji

Przechowywanie lokalne przykład

Kod JavaScript


							localStorage["obiekt"] = {imie:"Jan", wartość:200};

							sessionStorage["test"] = "Przykładowy tekst";

Przykład

localStorage Klucz: Wartość: sessionStorage Klucz: Wartość:

Geolokalizacja

HTML5 Geolocation

Pobieranie położenia geograficznego użytkownika.
Sposoby określania położenia:
- Odbiornik GPS zainstalowany w urządzeniu
- Widoczne sieci WiFi
- Stacje bazowe GSM
- Adres IP
Z uwagi na ochronę prywatności użytkownik musi każdorazowo zezwolić na udostępnienie informacji o swoim położeniu.

Geolokalizacja - przykład

Dokładność:
Szerokość geograficzna:
Długość geograficzna:

Żródło: maps.google.com

Podsumowanie

HTML5 daje nowe możliwości, niedostępne do tej pory dla twórców stron internetowych.
Postawiono na standaryzację i kompatybilność.
Czy warto już teraz korzystać z HTML5?
- Ok. 80% użytkowników korzysta z przeglądarek obsługujących (częściowo) HTML5

HTML5

przyszłość internetu

Najważniejsze cechy

Jak rozpoznać, że to HTML5?

Dziękuję za uwagę