Co to jest HTML5?

Transkrypt

Co to jest HTML5?

Co to jest HTML5?
HTML5 będzie nowym standardem dla HTML.
Poprzednia wersja HTML, HTML 4.01, pochodzi z 1999. Sieć od tego czasu zmieniła się
znacznie.
HTML5 jest ciągle w stadium tworzenia i konkretyzacji. Jednakże główne przeglądarki
zapewniają rozpoznanie wielu z nowych elementów znajdujących się w specyfikacji HTML5
i APIs.
Jak rozpocząć pracę z HTML5 ?
HTML5 jest efektem kooperacji pomiędzy World Wide Web Consortium (W3C) i Web
Hypertext Application Technology Working Group (WHATWG).
WHATWG pracował nad formularzami I aplikacjami, podczas gdy W3C pracował nad
XHTML 2.0. W roku 2006, obie te organizacje zdecydowały sie współpracować, czego
efektem jest nowa wersja f HTML.
Na początku ustalono pewne reguły, według których opracowano nową wersje, czyli HTML5:
•
•
•
•
•
•
Nowe właściwości powinny bazować na HTML, CSS, DOM, i JavaScript
Zredukowanie potrzeby stosowania zewnętrznych wtyczek (jak np.Flash)
Lepsza obsługa błędów
Więcej znaczników w celu zastąpienia potrzeby pisania skryptów
HTML5 powinien być niezależny od sprzętu
Proces opracowywania tego języka powinien być ”transparentny” dla społeczności
informatycznej.
Deklaracja typu HTML5 <!DOCTYPE>
W HTML5 istnieje tylko jedna deklaracja typu <!doctype> I jest ona bardzo prosta:
<!DOCTYPE html>
Minimalny HTML5 Dokument
Poniżej pokazano prosty dokument HTML5, z minimalną ilością wymaganych znaczników:
<!DOCTYPE html>
<html>
<head>
<title>Tytuł dokumentu</title>
1
</head>
<body>
Zawartość dokumentu......
</body>
</html>
HTML5 – Nowe możliwości
A oto niektóre z bardziej interesujących nowych właściwości w HTML5:
•
•
•
•
•
Element <canvas> dla rysowania na 2D
Elementy <video> and <audio> dla odtwarzania plików audio i video
Obsługa pamięci lokalnych
Nowe element charakteryzujące zawartość dokumentów jak: <article>, <footer>,
<header>, <nav>, <section>
Nowe kontrolki formularzy takie jak: calendar, date, time, email, url, search
Obsługa HTML5 przez przeglądarki internetowe
HTML5 nie jest jeszcze oficjalnym standardem i żadna z przeglądarek nie obsługuje w pełni
HTML5.
Ale wszystkie główne przeglądarki internetowe (Safari, Chrome, Firefox, Opera, Internet
Explorer) dodają nowe właściwości HTML5 do swoich najnowszych wersji.
Nowe elementy w HTML5
Internet bardzo sie zmienił od kiedy HTML 4.01 stało sie standardem w 1999.
Dzisiaj pewne elementy w HTML 4.01 są stare, nigdy nie były używane lub używane w
sposób różny niż ten do czego zostały stworzone. Te elementy zostały usunięte bądź
przepisane w HTML5.
Dla lepszego wykorzystania Internetu w dzisiejszej dobie, HTML5 zawiera nowe element
poprawiające strukturę dokumentu, lepiej obsługujące formularze, grafikę i lepiej obsługujące
pliki audio i video.
2
Nowe elementy semantyki/Elementy strukturalne
HTML5 oferuje nowe elementy dla lepszego odwzorowania struktury dokumentów:
Znacznik
<article>
<aside>
<bdi>
<command>
<details>
<summary>
<figure>
<figcaption>
<footer>
<header>
<hgroup>
<mark>
<meter>
<nav>
<progress>
<ruby>
<rt>
<rp>
<section>
<time>
<wbr>
Opis
Definiuje artykuł
Definiuje (oddziela) zawartość aside od zawartości strony
Izoluje część tekstu, która może być sformatowana w innym kierunku niż
tekst poza nim
Definiuje przycisk komendy (polecenia), który użytkownik może wywołać
Definiuje dodatkowe szczegóły, które użytkownik może chcieć pokazać lub
ukryć
Definiuje widoczny nagłówek (tytuł) dla elementu <details>
Specyfikuje pewne wydzielone obiekty takie jak ilustracje, diagram,
fotografie, kod program itp.
Definiuje podpis pod elementem <figure>
Definiuje stopkę dokumentu lub sekcji dokumentu
Definiuje nagłówek dokumentu lub jego sekcji
Grupuje zbiór elementów od <h1> do <h6> kiedy nagłówki są
wielopoziomowe
Definiuje zaznaczony i/lub wyróżniony tekst
Definiuje skalarną miarę wewnątrz znanego zakresu
Definiuje linki nawigacyjne
Przedstawia postęp zadania
Definiuje ruby annotation (dla East Asian typography)
Definiuje objaśnienie/wymowę znaków (dla East Asian typography)
Definiuje co pokazać w przeglądarce, która nie obsługuje ruby annotations
Definiuje sekcję w dokumencie
Definiuje a date/time
Definiuje możliwą linię podziału
Nowy element <canvas>
Znacznik
<canvas>
Opis
Używany do kreślenia grafik poprzez pisanie skryptów (przeważnie
JavaScript)
Nowe elementy formularzy
Dla polepszenia funkcjonalności, HTML5 oferuje następujące nowe elementy:
3
Znacznik
<datalist>
<keygen>
<output>
Opis
Określa (specyfikuje) listę predefiniowanych opcji dla wejściowych
kontrolek
Definiuje pole generujące klucz (dla formularzy)
Definiuje wynik obliczeń
Elementy usunięte
Następujące elementy (znaczniki) HTML 4.01 zostały usunięte z HTML5:
•
•
•
•
•
•
•
•
•
•
•
•
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
Video w Sieci
Jak dotąd nie ma powszechnie akceptowanego standardu dla przedstawienia (pokazania)
filmu lub video na stronach webowych.
Dzisiaj, większość filmów i filmików video pokazywanych jest na stronach internetowych
poprzez instalacje odpowiednich wtyczek (np. flash). Jednakże, różne przeglądarki mogą
wymagać różnych wtyczek.
HTML5 określa nowy element, który specyfikuje standardowy sposób umieszczania na
stronach webowych plików filmowych: jest to element <video>.
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome i Safari obsługują elementy <video>.
4
Uwaga: Internet Explorer 8 I wersje wcześniejsze nie obsługują elementów <video>.
HTML5 Video – Jak to działa?
Aby pokazać plik video w HTML5, wszystko co potrzebujesz jest pokazane na poniższym
przykładzie:
Przykład
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Twoja przeglądarka nie obsługuje znaczników video.
</video>
Try it yourself »
Atrybuty control dodają takie możliwości jak, play, pause, i volume.
Jest dobrym zwyczajem zawsze włączać atrybuty width i height. Jeżeli wysokość I szerokość
kontrolki/ek są ustalone, przestrzeń wymagana dla pliku video jest rezerwowana z chwilą
ładowania strony. Natomiast gdy te atrybuty nie występują, przeglądarka nie ma informacji o
rozmiarach pliku video na stronie i nie może zarezerwować odpowiedniej przestrzeni. Efekt
bedzie taki, że układ strony może się zmieniać podczas ładowania strony (wtedy gdy
ładowany jest plik video).
Miedzy znaczniki <video> i </video> można wprowadzić odpowiedni tekst, informujący że
przeglądarka nie obsługuje elementu <video>.
Znacznik <video> pozwala rozpoznać wiele elementów źródłowych <source>. Znaczniki
<source> mogą być powiązane (zlinkowane) do różnych plików video. Przeglądarka użyje
pierwszy rozpoznany format.
Formaty Video i obsługujące je przeglądarki
Aktualnie mamy trzy formaty plików video obsługiwane przez popularne przeglądarki,
korzystając ze znacznika <video> : MP4, WebM, i Ogg:
Przeglądarka
Internet Explorer 9
Firefox 4.0
Google Chrome 6
Apple Safari 5
Opera 10.6
•
•
MP4
TAK
NIE
TAK
TAK
NIE
WebM
NIE
TAK
TAK
NIE
TAK
Ogg
NIE
TAK
TAK S
NIE
TAK
MP4 = MPEG 4 pliki z H264 codekiem video i AAC codekiem audio
WebM = WebM pliki z VP8 codekiem video i Vorbis codekiem audio
5
•
Ogg = Ogg pliki z Theora codekiem video i Vorbis codekiem audio
Znaczniki Video HTML5
Znacznik
<video>
<source>
<track>
Opis
Definiuje video lub film
Definiuje źródła plików medialnych dla elementów <video> i
<audio>
Definiuje ścieżki tekstowe w odtwarzaczach medialnych
HTML5 <video> - sterowanie z użyciem DOM (Document
Object Model)
Element HTML5 <video> element posiada również metody, własności i zdarzenia.
Istnieją metody dla uruchamiania (play), zatrzymywania i ładowania plików video. Istnieją
także własności określające takie aspekty plików video (np. czas trwania, wolumin, szukanie),
które można czytać lub. Istnieją również zdarzenia typu DOM, które mogą przypominać lub
ustalać kiedy element <video> rozpoczyna się, jest zatrzymywany lub jest kończony.
Poniższy przykład pokazuje w prosty sposób jak adresować element <video> , czytać i ustalać
właściwości, i wywoływać metody.
Przykład 1
Utwórz proste kontrolki (sterowania) dla play/pause + zmiana rozmiaru (resize) dla video:
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br />
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4" />
<source src="mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>
<script>
6
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck
Bunny</a>.</p>
</body>
</html>
7
Powyższy przykład wywołuje dwie metody: play() and pause(). Używa on również dwóch
właściwości: paused and width.
HTML5 <video> - Metody, właściwości, zdarzenia
Poniższa tabela wymienia metody, właściwości i zdarzenia dla plików video, które są
ogsługiwane przez większość przeglądarek:
Metoda
play()
pause()
load()
canPlayType
Właściwośćs
currentSrc
currentTime
videoWidth
videoHeight
duration
ended
error
paused
muted
seeking
volume
height
width
Zdarzenies
play
pause
progress
error
timeupdate
ended
abort
empty
emptied
waiting
loadedmetadata
Uwaga: Spośród wymienionych właściwości, tylko videoWidth i videoHeight są dostępne
bezpośrednio. Inne będą dostępne po załadowaniu meta danych dla plików typu video.
Audio w Sieci
Jak dotąd nie ma powszechnie akceptowalnego standard dla odgrywania plików audio na
stronach internetowych.
Obecnie większość plików audio jest odgrywana poprzez wtyczki (np. flash). Różne
przeglądarki mogą wymagać różnych wtyczek, co stwarza poważny problem.
HTML5 definiuje nowy element (znacznik), który określa standardowy sposób na
umieszczenie plików audio na stronach internetowych: element <audio>.
Przeglądarki obsługujące znaczniki <audio>
Internet Explorer 9, Firefox, Opera, Chrome, i Safari obsługują element <audio>.
8
Uwaga: Internet Explorer 8 i wersje wcześniejsze nie obsługują elementu <audio> .
HTML5 Audio – Jak to działa?
Aby odgrywać pliki audio w HTML5, potrzeba jedynie:
Przykład 2
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg" />
<source src="horse.mp3" type="audio/mpeg" />
Twoja przeglądarka nie obsługuje znaczników <audio>.
</audio>
Try it yourself »
Atrybuty takie jak play, pause i volume są dodawane poprzez atrybuty.
Można również umieścić stosowny tekst między znaczniki <audio> i </audio> aby
poinformować, że dana przeglądarka nie obsługuje elementu <audio> .
Znacznik <audio> pozwala rozpoznać wiele elementów źródłowych <source>. Znaczniki
<source> mogą być powiązane (zlinkowane) do różnych plików audio. Przeglądarka użyje
pierwszy rozpoznany format.
.
Formaty Audio obsługiwane przez przeglądarki
Aktualnie istnieją trzy formaty plików audio, które są obsługiwane przez przeglądarki
korzystając ze znacznika <audio>: MP3, Wav, i Ogg:
Przeglądarka
Internet Explorer 9
Firefox 4.0
Google Chrome 6
Apple Safari 5
Opera 10.6
MP3
TAK
NIE
TAK
TAK
NIE
Wav
NIE
TAK
TAK
TAK
TAK
9
Ogg
NIE
TAK
TAK
NIE
TAK
HTML5 Znaczniki Audio
Znacznik
<audio>
<source>
Opis
Definiuje zawartość pliku typu audio
Definiuje źródła pochodzenia plików audio i video dla elementów <video> i
<audio>
HTML5 Canvas (tło - kanwa)
HTML5 <canvas> Znacznik
Znacznik
<canvas>
Opis
Element <canvas> jest używany w celu kreślenia grafik (na bieżąco –
on the fly) na stronach internetowych poprzez pisanie skryptów
(przeważnie JavaScript)
Element <canvas> jest używany w celu kreślenia grafik (na bieżąco – on the fly) na stronach
internetowych.
Zadania: narysuj czerwony prostokąt, cieniowany prostokąt, wielokolorowy prostokąt I
inne wielokolorowe teksty na kanwach (canvas):
Co to jest Canvas?
Element <canvas> w HTML5 jest używany do wykreślania (na bieżąco) grafik poprzez
wykorzystanie skryptów (przeważnie JavaScript).
10
Element <canvas> jest tylko pojemnikiem dla grafik. Aby wykreślić grafikę należy napisać
stosowny skrypt.
Kanwy maja szereg metod dla wykreślania linii, wielokątów, okręgów, znaków i dla
dodawania obrazków.
Przeglądarki obsługujące elementy <canvas>
Internet Explorer 9, Firefox, Opera, Chrome, i Safari obsługują elementy <canvas> .
Uwaga: Internet Explorer 8 I wersje wcześniejsze nie obsługują elementów <canvas> .
Tworzenie kanw (canvas)
Kanwa w HTML5 jest prostokątnym polem na stronie internetowej i jest ona definiowana
przez element <canvas>.
Uwaga: Domyślnie element <canvas> nie ma granic ani zawartości.
Znacznik ten może wyglądać jak niżej:
<canvas id="myCanvas" width="200" height="100"></canvas>
Uwaga: Zawsze należy określić atrybut id kanwy (identyfikujący i dostępowany w skrypcie),
jak również atrybuty width i height definiujące rozmiary kanw.
Uwaga: Na stronie HTML może być wiele elementów <canvas>.
Aby dodać obramowania (border) należy użyć atrybutu stylu:
Przykład 3
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;"></canvas>
Try it yourself »
Kreślenie w kanwie z użyciem JavaScript
Cała działalność ”kreślarska” na/w kanwach musi być wykonana przy użyciu skryptów
(JavaScript):
Przykład 4
11
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Try it yourself »
Objaśnienia do przykładu:
Najpierw należy znaleźć element <canvas>:
Następnie należy wywołać metodę getContext() (jako argument tej metody należy wpisać
łańcuch "2d"):
W ten sposób w HTML5 tworzony jest obiekt (przy pomocy metody getContext("2d")),
obiekt z wieloma właściwościami metodami umożliwiającymi wykreślanie linii, wieloboków,
okręgów, tekstu, obrazów i wielu innych.
Następne dwie linie kodu kreślą czerwono wypełniony prostokąt :
ctx.fillStyle="#FF0000";
Własność fillStyle może być kolorem z CSS, kolorem gradientowym, lub jakimś wzorem.
Domyślnym wypełnieniem fillStyle jest #000000 (czarny).
Metoda fillRect(x,y,width,height) wykreśla prostokąt z uprzednio określonym wypełnieniem.
Współrzędne kanw (Canvas)
Kanwa (canvas) jest dwuwymiarową siatką.
Górny lewy róg kanwy ma współrzędne (0,0)
Dlatego też metoda fillRect() ma parametry (0,0,150,75). To znaczy, że rozpoczyna ona
kreślenie od lewego górnego rogu (0,0) i kreśli prostokąt o wymiarach 150x75 pikseli.
Canvas - Linie
Do wykreślenia na kanwie linii prostej używa się dwóch metod:
12
•
•
moveTo(x,y) definiuje punk startowy linii
lineTo(x,y) definiuje punkt końcowy linii
Aby wykreślić cokolwiek (tutaj linię prostą) musimy użyć metod “ink” – tusz , atrament jak
np. stroke().
Przykład 5
Określ punkty początkowy (0,0) i końcowy (200,100), a następnie użyj metody stroke() w
celu wykreślenia linii prostej:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
JavaScript:
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Try it yourself »
Aby wykreślić okrąg na kanwie, należy użyć poniższej metody:
•
arc(x,y,r,start,stop)
oraz użyć jednej z metod “ink” jak stroke() lub fill().
13
Przykład 6
Utwórz okrąg używając metody():
<!DOCTYPE html>
<html>
<body>
<script>
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
JavaScript:
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Try it yourself »
Canvas - Tekst
Najważniejszymi własnościami i metodami używanymi do wykreślania teksu na kanwach są:
•
•
•
font – definiuje własności czcionki dla tekstu
fillText(text,x,y) - kreśli „pełny” tekst na kanwie
strokeText(text,x,y) – kreśli tekst na kanwie/ach.
14
Użycie metody fillText():
Przykład 7
Napisz tekst o wysokości 30px high, (pełny), używając czcionki "Arial":
<!DOCTYPE html>
<html>
<body>
<script>
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>
JavaScript:
ctx.fillText("Hello World",10,50);
Try it yourself »
Używając metody strokeText():
Przykład 8
Napisz tekst o wysokości 30px (nie wypełniony) na kanwie, używając czcionki "Arial":
15
<!DOCTYPE html>
<html>
<body>
<script>
</script>
</body>
</html>
JavaScript:
Try it yourself »
Canvas – Płynne przejście koloru
Płynnego przejścia kolorów można użyć aby wypełnić prostokąty, okręgi, linie i teksty.
Istnieją dwa typy płynnych przejść (gradients):
•
•
createLinearGradient(x,y,x1,y1) – tworzy liniowe przejście
createRadialGradient(x,y,r,x1,y1,r1) – tworzy promieniste przejścia.
Mając obiekt, dla którego tworzymy przejście koloru, musimy dodać dwa lub więcej punktów
przejścia (color stops).
Metoda addColorStop() określa przejścia kolorów I ich pozycje wzdłuż przejścia. Pozycje
przejścia mogą być w dowolnym punkcie między 0 do 1.
16
Aby użyć płynnego przejścia, należy wstawić właściwość fillStyle lub strokeStyle do
gradientu i następnie wykreślić odpowiedni kształt, linię, prostokąt, czy też okrąg.
Użycie metody createLinearGradient():
Example
Utwórz liniowe przejście dla prostokąta:
<!DOCTYPE html>
<html>
<body>
<script>
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
</script>
</body>
</html>
JavaScript:
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
17
ctx.fillStyle=grd;
Try it yourself »
Użycie createRadialGradient():
Przykład 9
Utwórz promieniste przejście. Wypełnij prostokąt tym gradientem:
<!DOCTYPE html>
<html>
<body>
<script>
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
ctx.fillStyle=grd;
</script>
</body>
</html>
JavaScript:
18
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
ctx.fillStyle=grd;
Try it yourself »
Using createRadialGradient():
Canvas - Obrazy
Aby wprowadzić obraz na kanwie należy użyć następującej metody:
•
drawImage(image,x,y)
Obraz do wstawienia:
Przykład 10
Wstaw obraz na kanwę:
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
19
<img id="scream" src="the_scream.jpg" alt="The Scream" width="220" height="277" />
<p>Canvas:</p>
<script>
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
</body>
</html>
JavaScript:
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
Try it yourself »
20

Co to jest HTML5?

Transkrypt

Podobne dokumenty

HTML5 – rewolucja czy ewolucja? cz. 2 - lukasz

Osprey 530 - PMC System Integrator SA

Philips BDL5571VL

Screening Full Video 1. Należy przygotować billboard zgodnie z

Kliknij aby pobrać dokument w formacie PDF

Połączenie Video - Neo-Trix

UCHWAŁA 467/2002. Zarządu Powiatu Lubańskiego z dnia 15.11

Osprey 210 - PMC System Integrator SA

Katalog AV-LiNK AV-2500-eco