Aplikacje internetowe HTML 5 Wprowadzenie Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi uważnego w nim uczestnictwa. Opracowanie to jest chronione prawem autorskim. Wykorzystywanie jakiegokolwiek fragmentu w celach innych niż nauka własna jest nielegalne. Dystrybuowanie tego opracowania lub jakiejkolwiek jego części oraz wykorzystywanie zarobkowe bez zgody autora jest zabronione.
HTML 5 co nowego (o tym słyszeli wszyscy) Różnice w stosunku do poprzedników: Uproszczenie w zakresie tego co wcześniej zbędne lub nadmiernie zagmatwane. Rozszerzenie o elementy praktycznie potrzebne, nieistniejące wcale bądź obsługiwane poza językiem HTML. Zestawienie powszechnie wskazywanych nowości: Nowe znaczniki semantyczne, pozwalające na czytelne (dla ludzi i przeglądarek) wyodrębnienie logicznych i funkcjonalnych części dokumentu. Znacznik canvas pozwalający na programowe rysowanie w obrębie dokumentu, bez stosowania wtyczek. Znaczniki video i audio pozwalające na bez wtyczkowe umieszczanie w dokumencie dźwięku i sekwencji wideo wraz z możliwością programowego sterowania tą zawartością. 2
HTML 5 co nowego (o tym słyszeli wszyscy) Zestawienie powszechnie wskazywanych nowości: Nowe znaczniki semantyczne, pozwalające na czytelne (dla ludzi i przeglądarek) wyodrębnienie logicznych i funkcjonalnych części dokumentu (article, footer, header, nav, section). Znacznik canvas pozwalający na programowe rysowanie w obrębie dokumentu, bez stosowania wtyczek. Znaczniki video i audio pozwalające na bez wtyczkowe umieszczanie w dokumencie dźwięku i sekwencji wideo wraz z możliwością programowego sterowania tą zawartością. Nowe atrybuty znacznika input: tel, search, url, email, datetime,... 3
HTML 5 co nowego (mniej znane elementy) Mniej znane nowości: Możliwość umieszczania grafiki SVG bezpośrednio w kodzie HTML, znacznik <svg></svg>. Możliwość umieszczania wzorów MathML bezpośrednio w kodzie HTML, znacznik <math></math>. Oznacza to, że kody wzorów matematycznych oraz rysunków SVG mogą być zapisane bezpośrednio w kodzie HTML. Dekorowanie grafiki SVG z wykorzystaniem stylów, programowe manipulowanie za pośrednictwem JavaScript. Dostępne API do obsługi Drag-and-Drop. przechowywanie historii przeglądania, z możliwością zmiany url przeglądarki bez przeładowania strony. możliwość pracy aplikacji w trybie offline 4
Nowe znaczniki semantyczne header, section, nav <!doctype html> <html> <head> </head> <body> <header> </header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer> </body> </html> Znacznik <header> opisuje nagłówek elementu, w którym został zdefiniowany. W tym przypadku oznacza nagłówek całej strony, ale może być używany w poszczególnych sekcjach dokumentu. Nie używamy tego znacznika wewnątrz znaczników <footer>, <address>, innego znacznika <header>. Sekcja <nav> zwiera zwykle hiperłącza do poszczególnych sekcji strony. Zakłada się, że <nav> zawiera główne linki nawigacyjne na stronie. Znacznik <section> definiuje blok dokumentu, który może zawierać wszelkie adekwatne znaczniki, w tym również wielokrotnie zagnieżdżone bloki <section>. Copyright Roman Simiński 5
Nowe znaczniki semantyczne aside, footer <!doctype html> <html> <head> </head> <body> <header> </header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer> </body> </html> Znacznik <aside> definiuje dodatkową, poboczną treść w stosunku do głównej treści prezentowanej w dokumencie. Zazwyczaj w obrębie znacznik <aside> umieszczany jest jako panel boczny np. z linkami powiązanymi z prezentowaną treścią. Znacznik <footer> definiuje stopkę strony, zawierającą zazwyczaj informacje o autorze stron, prawach autorskich, licencjach, informacje kontaktowe. zwyczajowo nagłówek jest elementem domykającym układ strony od dołu. 6
Nowe znaczniki semantyczne article <section> <article> <header> <h2>tytuł nagłówka artykułu</h2> <p>jaka ś dodatkowa tre ś ć i np. link: <a href="#">wi ę cej...</a></p> </header> <p>znacznik <mark>article</mark> reprezentuje pewn ą zamkni ę t ą cało ś ć, która mo ż e być traktowana niezale ż nie od całej strony, np. wpis blogowy, artykuł, komentarz.</p> </article> </section> Przy okazji znacznik <mark> wyróżnienia fragmentu tekstu. 7
Nowe znaczniki semantyczne details i summary <section> <details > <summary>czytaj wi ę cej... </summary> <p>znaczniki <em>details</em> i <em>summary</em>.</p> <p>aktualnie zaimplementowane jedynie w Chrome.</p> </details> </section> Na razie tylko Chrome Znacznik <details> określa dodatkową informację, którą użytkownik może zobaczyć lub ukryć na życzenie. Sterowanie pokazywaniem/ukrywaniem zawartości <details>steruje atrybut boolowski open. Znacznik <summary> określa widoczny nagłówek sekcji <details>. 8
Nowe znaczniki semantyczne meter i progress <meter value="3" min="1" max="10">3 w skali od 1 do 10</meter><br /> <meter value="0.4">40%</meter> Gdy brak implementacji Opera, Chrom Znacznik <meter> definiuje wskaźnik, np. zużycie przestrzeni dyskowej, page rank, wynik ankiety. Uwaga nie używa się jako paska postępu, do tego jest <progress>. <progress value="11" max="100">ładowanie: 11%</progress> Gdy brak implementacji Opera, Chrom, Firefox 9
Sterowanie elementem progress prosty przykład var timeoutobject; var sek = 0; function display() document.getelementbyid( "pb" ).value = sek++; if( sek > 100 ) zeruj(); function start() display(); window.timeoutobject = setinterval( "display()", 100 ) function stop() window.clearinterval( timeoutobject ); function zeruj() document.getelementbyid( "pb" ).value = sek = 0; <body> <h1>progress bar</h1> <progress id="pb" value="0" max="100"></progress> <input type="button" value="start" onclick="start()" /> <input type="button" value="stop" onclick="stop()" /> <input type="button" value="zeruj" onclick="zeruj()" /> </body> </html> 10
Nowe znaczniki semantyczne figure i figurecaption <figure> <img src="globus.jpg" alt="globus" width="50" height="50" /> <figcaption>to jest globus</figcaption> </figure> <figure> <figcaption>to jest globus</figcaption> <img src="globus.jpg" alt="globus" width="50" height="50" /> </figure> Znacznik <figure> opisuje zawartość taką jak ilustracja, zdjęcie, rysunek, diagram, fragment kodu programu. Znacznik<figcaption> określa legendę elementu w <figure>, może stanowić nagłówek lub podpis. 11
Nowe znaczniki semantyczne audio <audio src="traktor.mp3" controls autoplay loop preload="none"> Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> controls wyświetlanie panelu sterowania odtwarzaniem, autoplay automatyczne odtwarzanie od razy, gdy to możliwe, MSIE Opera Chrome loop powtarzanie odtwarzania. preload wskazówka dla przeglądarki: jak postępować z dźwiękiem w trakcie ładowania strony: auto ładowanie pliku w trakcie ładowania strony; metadata ładowanie metadanych w trakcie ładowania strony; none plik nie powinien być ładowany w trakcie ładowania strony. Dla autoplay = true atrybut preload jest ignorowany. 12
Nowe znaczniki semantyczne audio + source <audio controls> <source src="traktor.mp3" type="audio/mpeg" /> <source src="traktor.ogg" type="audio/ogg" /> Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> Nieobowiązkowe Zaleca się stosowanie znacznika <source> dla <audio> and <video> pozwala to na określanie alternatywnych plików źródłowych dla multimediów, przeglądarka może wybrać określony typ np. w zależności od wykorzystywanych kodeków. type określa typ MIME dla pliku (dla audio zwykle: audio/ogg, audio/mpeg). Znaczenie atrybutu src jest oczywiste, kolejny atrybut media nie jest aktualnie obsługiwany w żadnej ze znanych przeglądarek. 13
audio + source versus audio scr <audio controls> <source src="cos.mp3" type="audio/mpeg" /> Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> <audio src="cos.mp3" controls > Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> Dynamiczna modyfikacja elementu source i jego atrybutów po wstawieniu go do elementu audio (video również) nie przynosi oczekiwanych rezultatów. Zaleca się stosowanie atrybutu src lub wykorzystania funkcji load(). 14
Nowe znaczniki semantyczne sterowanie elementem audio function playsound() var audioitem = document.getelementbyid( "player" ); if( audioitem ) audioitem.play(); function pausesound() var audioitem = document.getelementbyid( "player" ); if( audioitem ) audioitem.pause(); <body> <audio id="player"> <source id= "playersrc" src="traktor.mp3" type="audio/mpeg" /> Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> <input type="button" value="odtwórz" onclick="playsound()" /> <input type="button" value="zatrzymaj" onclick="pausesound()" /> </body> 15
Na marginesie rożne odwołania do elementów function playsound() var audioitem = document.getelementbyid( "player" ); if( audioitem ) audioitem.play(); function playsound() document.getelementbyid( "player" ).play(); 16
Pokazywanie/ukrywanie panelu sterującego controls function playsound() var audioelement = document.getelementbyid( "player" ); if( audioelement ) audioelement.controls = true; audioelement.play(); function togglecontrols() var audioelement = document.getelementbyid( "player" ); if( audioelement ) audioelement.controls =!audioelement.controls; <body> <audio id="player" src="rock.ogg"> Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> <p> <input type="button" value="odtwórz" onclick="playsound()" /> <input type="button" value="zatrzymaj" onclick="pausesound()" /> <input type="button" value="wł ą cz/wył ą cz panel" onclick= "togglecontrols()" /> </p> </body> 17
Więcej na temat audio, przykład <body> <audio id="player" src="traktor.mp3" > Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> <p id="filename"></p> <p id="duration"></p> <p id="volume"></p> <input type="button" value="odtwórz" onclick="playsound()" /> <input type="button" value="zatrzymaj" onclick="pausesound()" /> <input type="button" value="gło ś niej" onclick= "changevolume(0.1)" /> <input type="button" value="ciszej" onclick="changevolume(-0.1)" /> <input type="button" value="w kóło" onclick="setrepeat()" /> </body> 18
Więcej na temat audio, przykład, cd... function playsound() var audioelement = document.getelementbyid( "player" ); var fileinfo = document.getelementbyid( "filename" ); var durationinfo = document.getelementbyid( "duration" ); var volumeinfo = document.getelementbyid( "volume" ); fileinfo.innerhtml = audioelement.src; durationinfo.innerhtml = audioelement.duration.tofixed( 2 ); volumeinfo.innerhtml = audioelement.volume.tofixed( 2 ); audioelement.play(); function pausesound() document.getelementbyid( "player" ).pause(); 19
Więcej na temat audio, przykład, cd... function changevolume( steep ) var audioelement = document.getelementbyid( "player" ); var volumeinfo = document.getelementbyid( "volume" ); audioelement.volume += steep; volumeinfo.innerhtml = audioelement.volume.tofixed( 2 ); function setrepeat() document.getelementbyid( "player" ).loop = true; 20
Pobieranie informacji o aktualnym czasie odtwarzanego dźwięku <body> <audio id="player" src="traktor.mp3" ontimeupdate="showcurrtime()" > Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> <p id="filename"></p> <p id="duration"></p> <p id="current"></p> <p id="volume"></p> <input type="button" value="odtwórz" onclick="playsound()" /> <input type="button" value="zatrzymaj" onclick="pausesound()" /> <input type="button" value="gło ś niej" onclick="changevolume(0.1)" /> <input type="button" value="ciszej" onclick="changevolume(-0.1)" /> <input type="button" value="w kóło" onclick="setrepeat()" /> </body> 21
Pobieranie informacji o aktualnym czasie odtwarzanego dźwięku function showcurrtime() document.getelementbyid( "current" ).innerhtml = document.getelementbyid( "player" ).currenttime.tofixed( 2 ); <body> <audio id="player" src="traktor.mp3" ontimeupdate="showcurrtime()" > Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> 22
Wykorzystanie audio i dynamicznie dodanego elementu progress var progressbar = null; function initprogressbar( duration ) progressbar = document.createelement( 'progress' ); document.body.appendchild( progressbar ); progressbar.value = 0; progressbar.max = duration; function playsound() volumeinfo.innerhtml = audioelement.volume.tofixed( 2 ); if( progressbar == null ) initprogressbar( audioelement.duration ); audioelement.play(); function showcurrtime() progressbar.value = document.getelementbyid( "player" ).currenttime; 23
Dynamicznie dodawany element audio i progress <body> <p>wybierz:</p> <ul> <li><a href="#" onclick="playsong( 'rock_s.ogg' )">Rock</a></li> <li><a href="#" onclick="playsong( 'jazz_s.ogg' )">Jazz</a></li> <li><a href="#" onclick="playsong( 'folk_s.ogg' )">Folk</a></li> </ul> <input type="button" value="zatrzymaj" onclick="pausesound()" /> </body> 24
Dynamicznie dodawany element audio i progress var progressbar = null; function var audioelement = null; showprogres() * progressbar.max = audioelement.duration; progressbar.value function playsong( songname ) = audioelement.currenttime; if( audioelement == null ) audioelement = new Audio(); document.body.appendchild( audioelement ); audioelement.addeventlistener( "timeupdate", showprogres, true ); audioelement.src = songname; if( progressbar == null ) progressbar = document.createelement( "progress" ); document.body.appendchild( progressbar ); if( progressbar.hidden ) progressbar.hidden = false; audioelement.play(); * function pausesound() audioelement.pause(); progressbar.hidden = true; 25
Różne sposoby tworzenia elementu audio Wykorzystanie konstruktorów: audioelement = new Audio(); audioelement.src = 'rock_s.ogg'; document.body.appendchild( audioelement ); audioelement = new Audio( 'rock_s.ogg' ); document.body.appendchild( audioelement ); Wykorzystanie funkcji createelement(): audioelement = document.createelement( 'audio' ); audioelement.src = 'rock_s.ogg'; document.body.appendchild( audioelement ); 26
Istnieje znacznie więcej możliwości programowej obsługi Do wykrywania czy odtwarzanie trwa czy też zostało wstrzymane służy właściwość paused. function audio_play_pause() var audioelement = document.getelementbyid("player"); if( audioelement.paused ) audioelement.play(); else audioelement.pause(); Jest jeszcze dużo więcej, choć oficjalnie jakby nie ma...: http://www.w3.org/wiki/html/elements/audio https://developer.mozilla.org/en/using_audio_and_video_in_firefox http://dev.opera.com/articles/view/everything-you-need-to-know-abouthtml5-video-and-audio/ Copyright Roman Simiński 27
Odtwarzanie sekwencji wideo element video <video src="wildlife.ogg" controls autoplay loop> Ta przegl ą darka nie odtwarza wideo. </video> Większość atrybutów znanych ze znacznika audio występuje również dla znacznika video. Chrome FireFox Opera Wykorzystanie znacznika source: <video controls poster="vid_poster.jpg"> <source src="wildlife.mp4" type="video/mp4" /> <source src="wildlife.ogg" type="video/ogg" /> Ta przegl ą darka nie odtwarza wideo. </video> 28
Atrybut poster <video src="wildlife.ogg" controls poster="vid_poster.jpg" > Ta przegl ą darka nie odtwarza wideo. </video> Gdy autoplay == false, atrybut poster pozwala określić obraz który będzie pokazywany do czasu wybrania gdy użytkownik nie naciśnie przycisku odtwarzania. Obraz ten jest również wyświetlany podczas ściągania sekwencji wideo. Gdy obraz nie zostanie określony, wykorzystywana jest pierwsza klatka filmu. 29
Atrybuty width i height <video width="200" height="150" autoplay controls poster="vid_poster.jpg"> <source src="wildlife.mp4" type="video/mp4" /> <source src="wildlife.ogg" type="video/ogg" /> Ta przegl ą darka nie odtwarza wideo. </video> <video width="320" height="240" autoplay controls poster="vid_poster.jpg"> <source src="wildlife.mp4" type="video/mp4" /> <source src="wildlife.ogg" type="video/ogg" /> Ta przegl ą darka nie odtwarza wideo. </video> 30
Atrybuty width i height uwagi Atrybuty height i width określają odpowiednio, liczoną w pikselach, wysokość i szerokość elementu video. Zaleca się określanie wartości opu parametrów, co pozwala przeglądarce na zarezerwowanie odpowiedniego obszaru podczas ładowania strony. Brak tych wartości powoduje często zmiany układu strony przeglądarka określi rozmiar ostateczny rozmiar obczaru dopiero po załadowaniu sekwencji wideo. Atrybuty height i width nie służą do zmiany (a w szczególności zmniejszenia wymiarów) sekwencji wideo. I tak zostanie pobrany plik w jego oryginalnej wersji, nawet jeżeli ma być wyświetlony w polu o małych wymiarach. Przeskalowanie obrazu powinno wyć wykonywane przy użyciu odpowiedniego oprogramowania przed zamieszczeniem sekwencji wideo na serwerze. Przy okazji istnieje atrybut muted, pozwalający na wyciszenie ścieżki audio w sekwencji wideo, ale nie jest aktualnie obsługiwany przez żadną z przeglądarek. 31
Atrybuty width i height uwagi, cd.... Jeżeli ustawione wartości atrybutów width i height nie pasują do proporcji obrazu wideo, obraz ten nie jest dopasowywany do ustalonych wymiarow. Obraz wideo zachowuje swoje proporcje i jest maksymalizowany w obszarze elementu video. Wymiary podaje się w pikselach bez podawania jednostki, inne jednostki mogą być używane z wykorzystaniem mechanizmu stylów CSS. 200 300 <video src="wildlife.ogg" height="300" width="100" controls> Ta przegl ą darka nie odtwarza wideo. </video> 32
Ładowanie sekwencji wideo i atrybut preload Przeglądarki bardzo podchodzą do sprawy ładowania sekwencji wideo. Opera, Chrome i Safari automatycznie pobierają sekwencję wideo nawet gdy nie jest automatycznie odtwarzana. FireFox pobiera tyle, by określić pierwszą ramkę i czas trwania, być może aktualnie Opera czyni podobnie. Zastosowanie autoplay powoduje, że wideo jest ładowane tak szybko, jak to możliwe. Atrybut preload niekoniecznie jest dobrze interpretowany przez przeglądarki. Aby uzyskać efekt preload="none" można: <video id="player" controls> Ta przegl ą darka nie odtwarza wideo. </video> <input type="button" value="załaduj" onclick="document.getelementbyid('player').src = 'wildlife.ogg'" /> 33
Pobieranie informacji na temat rozmiarów obrazu wideo Atrybuty videowidth i videoheight pozwalają na pobranie wewnętrznych rozmiarów sekwencji wideo. <script> function showinfo() var player = document.getelementbyid("player"); var info = document.getelementbyid("info"); info.innerhtml = player.videowidth + "x" + player.videoheight; </script> <video id="player" src = 'wildlife.ogg' width="150" height="100" controls> Ta przegl ą darka nie odtwarza wideo. </video> <input type="button" value="poka ż info" onclick="showinfo()" /> <p id="info"></p> 34
Wykrywanie informacji o obsłudze formatów Nawet gdy element video jest obsługiwany, może się zdażyć że nie są obslugiwane konkretne kodeki. Dla elementu video istnieje metoda canplaytype() pozwalająca na wykrywanie obsługiwanych formatów. W przypadku gdy dany format nie jest obsługiwany, generowane jest zdarzenie informujące o błędzie można zdefiniować obsługę tego zdarzenia. MSIE FireFox 35
Metod canplaytype() function showsupport() var player = document.getelementbyid("player"); var info = document.getelementbyid("info"); var str; str = "video/ogg: " + player.canplaytype('video/ogg') + "<br \/>"; str += "video/mp4: " + player.canplaytype('video/mp4') + "<br \/>"; info.innerhtml = str; <video id="player" src = 'wildlife.ogg' width="150" height="100" controls> Ta przegl ą darka nie odtwarza wideo. </video> <input type="button" value="poka ż info" onclick="showsupport()" /> <p id="info"></p> MSIE Chrome FireFox 36
Metod canplaytype() function showsupport() var player = document.getelementbyid("player"); var info = document.getelementbyid("info"); var str; str = "video/ogg: " + player.canplaytype('video/ogg') + "<br \/>"; str += "video/ogg codecs=theora, vorbis: " + player.canplaytype('video/ogg; codecs="theora, vorbis"') + "<br \/>"; info.innerhtml = str; <video id="player" src = 'wildlife.ogg' width="150" height="100" controls> Ta przegl ą darka nie odtwarza wideo. </video> <input type="button" value="poka ż info" onclick="showsupport()" /> <p id="info"></p> 37
Pobieranie informacji o odtwarzanej sekwencji function setduration() var duration = document.getelementbyid("player").duration; document.getelementbyid("durinfo").innerhtml = "Cało ś ć: " + duration.tofixed(2); document.getelementbyid("bar").max = duration; function showinfo() var player = document.getelementbyid("player"); var info = document.getelementbyid("currinfo"); var bar = document.getelementbyid("bar"); info.innerhtml = "Aktualnie: " + player.currenttime.tofixed(2); bar.value = player.currenttime; <video id="player" src = "wildlife.ogg" controls ontimeupdate="showinfo()" ondurationchange="setduration()"> Ta przegl ą darka nie odtwarza wideo. </video> <p id="durinfo"></p> <p id="currinfo"></p> <input id="bar" type="range" step="any"> 38
Sterowanie odtwarzaną sekwencją ustawianie currenttime function rewindvideo() var player = document.getelementbyid("player"); var bar = document.getelementbyid("bar"); player.currenttime = bar.value; <video id="player" src = "wildlife.ogg" controls ontimeupdate="showinfo()" ondurationchange="setduration()"> Ta przegl ą darka nie odtwarza wideo. </video> <p id="durinfo"></p> <p id="currinfo"></p> <input id="bar" type="range" step="any" onchange="rewindvideo()"> 39
Sterowanie odtwarzaną sekwencją start, pause function rewindvideo() var player = document.getelementbyid("player"); var bar = document.getelementbyid("bar"); player.currenttime = bar.value; <video id="player" src = "wildlife.ogg" controls ontimeupdate="showinfo()" ondurationchange="setduration()"> Ta przegl ą darka nie odtwarza wideo. </video> <p id="durinfo"></p> <p id="currinfo"></p> <input id="bar" type="range" step="any" onchange="rewindvideo()"> 40
Ciąg dalszy nastąpi... 41