Aplikacje internetowe Koncepcja Architektura Technologie

Aplikacje internetowe Koncepcja Architektura Technologie Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl HTML5 wprowadzenie

Rozwój środowiska WWW Trochę faktów historycznych Copyright Roman Simiński 2

Prehistoria WWW Tim Berners-Lee, anglik, absolwent Oxfordu. W trakcie pracy w CERN (Europejski Ośrodek Badań Jądrowych) w Genewie napisał na własny użytek pierwszy program "Enquire" służący do przetrzymywania informacji, korzystający z wielu wewnętrznych powiązań. Również w CERN rozpoczął prace nad systemem dwukierunkowego wywoływania procedur, co stanowiło podwaliny protokołu HTTP. W 1989 wystąpił z propozycją projektu opartego na na "Enquire" nazwanego potem World Wide Web. Po otrzymaniu odpowiedzi: Vague, but exciting Tim B-L kontynuuje pracę nad zalążkami WWW. Copyright Roman Simiński http://www.w3.org/history/1989/proposal.html Źródło: http://www.w3.org/people/berners-lee/#bio, http://info.cern.ch/ 3

Prehistoria WWW T B-E napisał pierwszy serwer HTTPD i pierwszą aplikację kliencką, "WorldWideWeb" przeglądarkę i edytor hipertekstu typu WYSIWYG działającą w środowisku NeXTStep. Pierwszą opublikowaną przez Tima Bernersa-Lee stroną WWW była: http://info.cern.ch/ Copyright Roman Simiński Źródło: http://www.w3.org/people/berners-lee/#bio, http://info.cern.ch/ 4

Prehistoria WWW Pierwszy serwer i przeglądarka działa na komputerach NeXTStep, "WorldWideWeb" został udostępniony w sieci CERN w październiku 1990 roku, a w Internecie latem 1991. Do 1993 Tim Berners-Lee zajmował się nadal rozwojem sieci WWW tworząc np. specyfikacje URL/URI, HTTP oraz HTML. W 1994 roku Tim Berners-Lee powołał do życia Organizację W3C w Laboratorium Informatyki w Instytucie Technologii Massachusetts, której jest dyrektorem. Jest autorem książki "Weaving the Web" ("Tkając Sieć") mówiącej o początkach i przyszłości WWW. 5

Prehistoria HTML Właściwie nie było specyfikacji HTML 1.0. Pierwszy HTML to zbiór szkiców języka autorstwa Tima Bernersa-Lee i Dana Connolly. W tym czasie tworzenie dokumentów HTML było znane wąskiemu gronu specjalistów, którzy eksperymentują ze znacznikami. Pierwsza ustandaryzowana specyfikacja to HTML 2.0. Specyfikacja HTML 2.0 (RFC 1866) została opracowana przez HTML Working Group organizacji IETF (Internet Engineering Task Force). Jest to pierwsza oficjalna specyfikacja HTML, obowiązująca do 1997 roku. Rozpoczyna się HTML'owa wolnoamerykanka. Powstają specyficzne znaczniki dla przeglądarki Netscape Navigator (NET Netscape Extension Tags). Producenci innych przeglądarek nie pozostają dłużni dodają własne znaczniki, co prowadzi do narastającej niezgodności dokumentów HTML. Próba opracowania standardu HTML 3.0 kończy się niepowodzeniem. Propozycja wersji 3.0 jest zbyt złożona, producenci przeglądarek nie chcą jej w pełni implementować. 6

Prehistoria HTML Wersja 3.1 nigdy nie ujrzała światła dziennego. Wersja 3.2 została zaproponowana w 1997 przez konsorcjum W3C. Powstaje wersja 4.0 a potem 4.1. Ta ostatnia jest przez długi czas (od 1999 r.) jest ostatnią oficjalną wersją specyfikacji HTML. Wersja 4.1 Wprowadza trzy poziomy zgodności (strict, transitional, frameset) starając się oddzielić treść dokumentu od jego wyglądu poprzez zastosowanie CSS. W 2000 roku W3C rekomenduje język XHTML 1.0 jako wersje rozwojową HML. specyfikacja XHTML 1.0 nie wprowadza nowych elementów w stosunku do HTML 4.1, ukierunkowana jest głównie uporządkowanie języka poprzez dostosowanie go do rygorów języka XML. Następna propozycja W3C XHTML 2.0 radykalnie zrywa z przeszłością, rezygnując ze zgodności wstecznej z HTML. Projekt zaczyna oddalać się od rzeczywistości i rzeczywistych potrzeb twórców aplikacji internetowych. 7

HTML rebelia Proponowany prze W3C kierunek rozwoju XHTML 2.0 spotkał się z dezaprobatą wiodących twórców przeglądarek. Kierunek W3C to oparcie WWW na języku XML. W 2004 roku Ian Hickson (Opera Software) proponuje rozszerzenie HTML sprzyjające tworzeniu aplikacji WWW. Propozycja została odrzucona przez W3C. Rebelianci zakładają Web Hypertext Application Technology Working Group (WHATWG). Prace WHATWG dzielą się na dwa projekty: Web Forms 2.0 i Web Apps 1.0, które mają rozszerzyć język HTML. Po pewnym czasie projekty łączą się tworząc propozycję HTML5. W3C decyduje się na reanimację HTML Working Group, która rozpoczyna pracę nad językiem HTML 5, biorąc jako podstawę opracowaną przez WHATWG specyfikacje HTML5. Pod koniec 2009 projekt XHTML 2.0 upada. W3C pracuje nad HTML 5 a WHATWG opracowuje HTML5. 8

HTML5 dwie wersje? http://www.whatwg.org/ http://www.w3.org/ 9

HTML5 dwie wersje? http://www.whatwg.org/ Najważniejszy Najważniejszy jest jest żywy żywy standard standard HTML HTML Wersje Wersje ii numery numery nie nie są są ważne, ważne, ważne, ważne, że że to to działa działa w w przeglądarkach przeglądarkach http://www.w3.org/ Najważniejsza Najważniejsza jest jest standaryzacja, standaryzacja, opracowanie opracowanie standardu standardu to to proces proces długi długi i mozolny i mozolny Ważne Ważne są są numery, numery, wersje wersje i specyfikacje i specyfikacje 10

HTML 5 Zaczynamy... Copyright Roman Simiński 11

HTML po co programiście? HTML definiuje układ warstwy dialogowej (interfejsu) aplikacji internetowej. Jego elementy pozwalają prezentować treść oraz realizować prostą interakcję z użytkownikiem. Warstwa Warstwa serwera serwera Jeżeli warstwa klienta jest cienka (przeglądarka), to HTML jest niezbędny, nawet jeżeli stanowi otoczkę innych elementów (np. apletów). HTML współpracuje z CSS kaskadowymi arkuszami stylów, które określają wizualne właściwości dokumentu HTML. Warstwa Warstwa klienta klienta Internet Protokół ProtokółHTTP HTTP żądania, żądania,odpowiedzi odpowiedzi++transmisja transmisja zasobów, zwykle plików zasobów, zwykle plikówhtml HTMLiidodatków. dodatków. 12

HTML + CSS = narzędzie opisu warstwy wizualnej aplikacji WWW Strony serwisu WWW Treść i układ logiczny strony Zewnętrzny arkusz stylów Przeglądarka WWW Zawartość strony WWW zinterpretowana przez przeglądarkę internetową w oparciu o zawartość pliku HTML. Wygląd i formatowanie Wykorzystanie stylów pozwala na: elastyczne stosowanie wspólnych lub zindywidualizowanych właściwości wizualnych w wielu dokumentach HTML; zapewnia globalna kontrolę nad wyglądem wielu dokumentów; pozwala na lokalną redefinicję stylów z wykorzystaniem kaskadowości; Pozwala różnicować wygląd dokumentów w zależności od medium prezentacji. 13

HTML5 trochę niepoważny, pierwszy przykład HTML5 jest kontynuatorem tradycji HTML 4, oferuje zgodność wsteczną. XHTML wprowadził więcej porządku. Nic nie stoi na przeszkodzie by w HTML5 wykorzystywać dobre praktyki wymuszane przez XHTML. Jednak w HTML5 nie trzeba stosować porządnej notacji XHTML, można tak: <!doctype <!doctype html> html> <title>html5</title> <title>html5</title> <p>dokument <p>dokument HTML5</p> HTML5</p> Tak to widzi dobra przeglądarka: Tak to pokaże dobra przeglądarka: Taki Taki dokument dokument jest jest uznawany uznawany przez przez walidatory walidatory za za poprawny! poprawny! 14

HTML5 gubimy nie zawsze zrozumiały tłuszczyk HTML 4.01 Strict DTD <!DOCTYPE <!DOCTYPE HTML HTML PUBLIC PUBLIC "-//W3C//DTD "-//W3C//DTD HTML HTML 4.01//EN" 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> "http://www.w3.org/tr/html4/strict.dtd"> XHTML 1.0 Strict DTD <!DOCTYPE <!DOCTYPE html html PUBLIC PUBLIC "-//W3C//DTD "-//W3C//DTD XHTML XHTML 1.0 1.0 Strict//EN" Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> HTML5 <!doctype <!doctype html> html> Specyfikacja Specyfikacja <!doctype <!doctype html> html> jest jest konieczna konieczna ale ale też też wystarczająca wystarczająca dla dla porządnych porządnych przeglądarek. przeglądarek. 15

HTML5 vs. HTML4 <!DOCTYPE <!DOCTYPE HTML HTML PUBLIC PUBLIC "-//W3C//DTD "-//W3C//DTD HTML HTML 4.01//EN" 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> "http://www.w3.org/tr/html4/strict.dtd"> <html> <html> HTML4 HTML4 Nagłówek <title>tytuł <title>tytuł dokumentu</title> dokumentu</title> <body> <body> </body> </body> Treść </html> </html> <!doctype <!doctype html> html> <html> <html> <title>tytuł <title>tytuł dokumentu</title>2 dokumentu</title>2 <body> <body> </body> </body> HTML5 HTML5 Nagłówek Treść </html> </html> 16

HTML5 vs. XHTML1 <!DOCTYPE <!DOCTYPE html html PUBLIC PUBLIC "-//W3C//DTD "-//W3C//DTD XHTML XHTML 1.0 1.0 Transitional//EN" Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <html> XHTML1 XHTML1 Nagłówek <title>tytuł <title>tytuł dokumentu</title> dokumentu</title> <body> <body> </body> </body> Treść </html> </html> <!doctype <!doctype html> html> <html> <html> <title>tytuł <title>tytuł dokumentu</title>2 dokumentu</title>2 <body> <body> </body> </body> HTML5 HTML5 Nagłówek Treść </html> </html> 17

Polskie znaki a HTML5 Polskie znaki są prawidłowo wyświetlanie, jeśli kodowanie pliku z kodem HTML strony zgadza się z kodowaniem ustawionym w przeglądarce internetowej. Dla dokumentów polskojęzycznych standardem było kodowanie iso-8852-2 zwane również Latin-2. Obecnie standardem jest kodowanie utf-8, które zawiera znaki dla wszystkich alfabetów łacińskich (i nie tylko). Porządne przeglądarki uznają utf-8 za domyślne kodowanie. <html> <html> <meta <meta <meta <meta HTML4/XHTML1 HTML4/XHTML1 http-equiv="content-language" http-equiv="content-language" content="pl" content="pl" /> /> http-equiv="content-type" http-equiv="content-type" content="text/html; content="text/html; charset=iso-8859-2" charset=iso-8859-2" /> /> <html <html lang=pl> lang=pl> HTML5 HTML5 <meta <meta charset="utf-8" charset="utf-8" /> /> 18

HTML 5 powszechnie znane nowe elementy Różnice w stosunku do poprzedników (HTML4/XHTML): 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, przeglądarek i wyszukiwarek) 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ą. Nowe atrybuty znacznika input: tel, search, url, email, datetime,... 19

HTML 5 mniej znane nowe 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. 20

HTML 5 a SVG <!doctype <!doctype html> html> <html <html lang=pl> lang=pl> <title>dokument <title>dokument testowy testowy HTML</title> HTML</title> <meta <meta charset=utf-8> charset=utf-8> <body> <body> <svg <svg width="300px" width="300px" height="300px"> height="300px"> <text <text x="50" x="50" y="30" y="30" font-size="24">svg font-size="24">svg ww HTML5</text> HTML5</text> <text <text x="50" x="50" y="180">to y="180">to jest jest obraz obraz wektorowy wektorowy SVG</text> SVG</text> SVG <circle <circle cx="125" cx="125" cy="100" cy="100" r="50" r="50" fill="blue" fill="blue" stroke="yellow" stroke="yellow" stroke-width="3" stroke-width="3" /> /> </svg> </svg> </body> </body> </html> </html> 21

HTML 5 a MathML <!doctype <!doctype html> html> <html <html lang=pl> lang=pl> <title>dokument <title>dokument testowy testowy HTML</title> HTML</title> <meta <meta charset=utf-8> charset=utf-8> <body> <body> <math <math xmlns="http://www.w3.org/1998/math/mathml"> xmlns="http://www.w3.org/1998/math/mathml"> <mrow> <mrow> MathML <msup><mi>a</mi><mn>2</mn></msup> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup> <msup><mi>c</mi><mn>2</mn></msup> </mrow> </mrow> </math> </math> </body> </body> </html> </html> 22

HTML5 a JavaScript Rozwój języka HTML5 i CSS zmienił wzajemne relacje pomiędzy HTML a językiem JavaScript. Z jednej strony: zminimalizowana została rola języka JavaScript jako narzędzia upiększania i dynamizowania wizualnego zamieszczanych treści. Z drugiej strony: kreatywne użycie nowych elementów HTML5 (np. canvas, video, audio) nie jest możliwe bez wykorzystania JavaScript i DOM. function function setduration() setduration() {{ var duration var duration == document.getelementbyid("player").duration; document.getelementbyid("player").duration; document.getelementbyid("durinfo").innerhtml document.getelementbyid("durinfo").innerhtml == "Cało "Całośść: ć: "" ++ duration.tofixed(2); duration.tofixed(2); document.getelementbyid("bar").max document.getelementbyid("bar").max == duration; duration; }} function function showinfo() showinfo() {{ var player var player == document.getelementbyid("player"); document.getelementbyid("player"); var == document.getelementbyid("currinfo"); var info info document.getelementbyid("currinfo"); var bar = document.getelementbyid("bar"); var bar = document.getelementbyid("bar"); info.innerhtml info.innerhtml == "Aktualnie: "Aktualnie: "" ++ player.currenttime.tofixed(2); player.currenttime.tofixed(2); bar.value = player.currenttime; bar.value = player.currenttime; }}...... <video <video id="player" id="player" src src == "wildlife.ogg" "wildlife.ogg" controls controls ontimeupdate="showinfo()" ontimeupdate="showinfo()" ondurationchange="setduration()"> ondurationchange="setduration()"> Ta przegl Ta przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. </video> </video> 23

Nowe znaczniki semantyczne header, section, nav <!doctype <!doctype html> html> <html> <html> <body> <body> <header> <header> </header> </header> <nav> <nav> </nav> </nav> <section> <section> </section> </section> <aside> <aside> </aside> </aside> <footer> <footer> </footer> </footer> </body> </body> Znacznik Znacznik <header> <header> opisuje opisuje nagłówek nagłówek elementu, elementu, w w którym którym został został zdefiniowany. zdefiniowany. W W tym tym przypadku przypadku oznacza oznacza nagłówek nagłówek całej całej strony, strony, ale ale może może być być używany używany w w poszczególnych poszczególnych sekcjach sekcjach dokumentu. dokumentu. Nie Nie używamy używamy tego tego znacznika znacznika wewnątrz wewnątrz znaczników znaczników <footer>, <footer>, <address>, <address>, innego innego znacznika znacznika <header>. <header>. Sekcja Sekcja <nav> <nav> zwiera zwiera zwykle zwykle hiperłącza hiperłącza do do poszczególnych poszczególnych sekcji sekcji strony. strony. Zakłada Zakłada się, się, że że <nav> <nav> zawiera zawiera główne główne linki linki nawigacyjne nawigacyjne na na stronie. stronie. Znacznik Znacznik <section> <section> definiuje definiuje blok blok dokumentu, dokumentu, który który może może zawierać zawierać wszelkie wszelkie adekwatne adekwatne znaczniki, znaczniki, w w tym tym również również wielokrotnie wielokrotnie zagnieżdżone zagnieżdżone bloki bloki <section>. <section>. </html> </html> 24

Nowe znaczniki semantyczne aside, footer <!doctype <!doctype html> html> <html> <html> <body> <body> <header> <header> </header> </header> <nav> <nav> </nav> </nav> <section> <section> </section> </section> <aside> <aside> </aside> </aside> <footer> <footer> </footer> </footer> </body> </body> </html> </html> Znacznik Znacznik <aside> <aside> definiuje definiuje dodatkową, dodatkową, poboczną poboczną treść treść w w stosunku stosunku do do głównej głównej treści treści prezentowanej prezentowanej w w dokumencie. dokumencie. Zazwyczaj Zazwyczaj w w obrębie obrębie znacznik znacznik <aside> <aside> umieszczany umieszczany jest jest jako jako panel panel boczny boczny np. np. zz linkami linkami powiązanymi powiązanymi zz prezentowaną prezentowaną treścią. treścią. Znacznik Znacznik <footer> <footer> definiuje definiuje stopkę stopkę strony, strony, zawierającą zawierającą zazwyczaj zazwyczaj informacje informacje oo autorze autorze stron, stron, prawach prawach autorskich, autorskich, licencjach, licencjach, informacje informacje kontaktowe. kontaktowe. zwyczajowo zwyczajowo nagłówek nagłówek jest jest elementem elementem domykającym domykającym układ układ strony strony od od dołu. dołu. 25

Nowe znaczniki semantyczne article...... <section> <section> <article> <article> <header> <header> <h2>tytuł <h2>tytuł nagłówka nagłówka <p>jaka <p>jakaśś dodatkowa dodatkowa artykułu</h2> artykułu</h2> tre treśśćć ii np. np. link: link: <a <a href="#">wi href="#">więęcej...</a></p> cej...</a></p> </header> </header> <p>znacznik <p>znacznik <mark>article</mark> <mark>article</mark> reprezentuje reprezentuje pewn pewnąą zamkni zamknięęttąą cało całośść, ć, która która mo możżee być być traktowana traktowana niezale niezależżnie nie od od całej całej strony, strony, np. np. wpis wpis blogowy, blogowy, artykuł, artykuł, komentarz.</p> komentarz.</p> </article> </article> </section> </section>...... Przy Przy okazji okazji znacznik znacznik <mark> <mark> wyróżnienia wyróżnienia fragmentu fragmentu tekstu. tekstu. 26

Nowe znaczniki semantyczne details i summary...... <section> <section> <details <details >> <summary>czytaj <summary>czytaj wi więęcej... cej...</summary> </summary> <p>znaczniki <p>znaczniki <em>details</em> <em>details</em> ii <em>summary</em>.</p> <em>summary</em>.</p> <p>aktualnie <p>aktualnie zaimplementowane zaimplementowane jedynie jedynie ww Chrome.</p> Chrome.</p> </details> </details> </section> </section>...... Na Na razie razie tylko tylko Chrome Chrome Znacznik Znacznik <details> <details> określa określa dodatkową dodatkową informację, informację, którą którą użytkownik użytkownik może może zobaczyć zobaczyć lub lub ukryć ukryć na na życzenie. życzenie. Sterowanie Sterowanie pokazywaniem/ukrywaniem pokazywaniem/ukrywaniem zawartości zawartości <details>steruje <details>steruje atrybut atrybut boolowski boolowski open. open. Znacznik Znacznik <summary> <summary> określa określa widoczny widoczny nagłówek nagłówek sekcji sekcji <details>. <details>. 27

Nowe znaczniki semantyczne meter i progress <meter <meter <meter <meter value="3" value="3" min="1" min="1" max="10">3 max="10">3 ww skali skali od od 11 do do 10</meter><br 10</meter><br /> /> value="0.4">40%</meter> value="0.4">40%</meter> Gdy Gdy brak brak implementacji implementacji Opera, Opera, Chrom Chrom Znacznik Znacznik <meter> <meter> definiuje definiuje wskaźnik, wskaźnik, np. np. zużycie zużycie przestrzeni przestrzeni dyskowej, dyskowej, page page rank, rank, wynik wynik ankiety. ankiety. Uwaga Uwaga nie nie używa używa się się jako jako paska paska postępu, postępu, do do tego tego jest jest <progress>. <progress>. <progress <progress value="11" value="11" max="100">ładowanie: max="100">ładowanie: 11%</progress> 11%</progress> Gdy Gdy brak brak implementacji implementacji Opera, Opera, Chrom, Chrom, Firefox Firefox 28

Nowe znaczniki semantyczne figure i figurecaption <figure> <figure> <img <img src="globus.jpg" src="globus.jpg" alt="globus" alt="globus" width="50" width="50" height="50" height="50" /> /> <figcaption>to <figcaption>to jest jest globus</figcaption> globus</figcaption> </figure> </figure>...... <figure> <figure> <figcaption>to <figcaption>to jest jest globus</figcaption> globus</figcaption> <img <img src="globus.jpg" src="globus.jpg" alt="globus" alt="globus" width="50" width="50" height="50" height="50" /> /> </figure> </figure> Znacznik Znacznik <figure> <figure> opisuje opisuje zawartość zawartość taką taką jak jak ilustracja, ilustracja, zdjęcie, zdjęcie, rysunek, rysunek, diagram, diagram, fragment fragment kodu kodu programu. programu. Znacznik<figcaption> Znacznik<figcaption> określa określa legendę legendę elementu elementu w w <figure>, <figure>, może może stanowić stanowić nagłówek nagłówek lub lub podpis. podpis. 29

Nowe znaczniki semantyczne audio <audio <audio src="traktor.mp3" src="traktor.mp3" controls controls autoplay autoplay loop loop preload="none"> preload="none"> Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku. </audio> </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. 30

Nowe znaczniki semantyczne audio + source <audio <audio controls> controls> <source <source src="traktor.mp3" src="traktor.mp3" type="audio/mpeg" type="audio/mpeg" /> /> <source <source src="traktor.ogg" src="traktor.ogg" type="audio/ogg" type="audio/ogg" /> /> Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku. </audio> </audio> Nieobowiązkowe 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. <source <source src="movie.ogg" src="movie.ogg" type="video/ogg" type="video/ogg" media="screen media="screen and and (min-width:320px)"> (min-width:320px)"> 31

audio + source versus audio scr <audio <audio controls> controls> <source <source src="cos.mp3" src="cos.mp3" type="audio/mpeg" type="audio/mpeg" /> /> Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku. </audio> </audio> <audio <audio src="cos.mp3" src="cos.mp3" controls controls >> Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza ddźźwi więęku. ku. </audio> </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(). 32

Odtwarzanie sekwencji wideo element video <video <video src="wildlife.ogg" src="wildlife.ogg" controls controls autoplay autoplay loop> loop> Ta przegl ą darka nie odtwarza wideo. Ta przeglądarka nie odtwarza wideo. </video> </video> Większość atrybutów znanych ze znacznika audio występuje również dla znacznika video. Chrome FireFox Opera Wykorzystanie znacznika source: <video <video controls> controls> <source <source src="wildlife.mp4" src="wildlife.mp4" type="video/mp4" type="video/mp4" /> /> <source <source src="wildlife.ogg" src="wildlife.ogg" type="video/ogg" type="video/ogg" /> /> Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. </video> </video> 33

Atrybut poster <video <video src="wildlife.ogg" src="wildlife.ogg" controls controls poster="vid_poster.jpg" poster="vid_poster.jpg" >> Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. </video> </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. 34

Atrybuty width i height <video <video width="200" width="200" height="150" height="150" autoplay autoplay controls controls poster="vid_poster.jpg"> poster="vid_poster.jpg"> <source <source src="wildlife.mp4" src="wildlife.mp4" type="video/mp4" type="video/mp4" /> /> <source <source src="wildlife.ogg" src="wildlife.ogg" type="video/ogg" type="video/ogg" /> /> Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. </video> </video> <video <video width="320" width="320" height="240" height="240" autoplay autoplay controls controls poster="vid_poster.jpg"> poster="vid_poster.jpg"> <source <source src="wildlife.mp4" src="wildlife.mp4" type="video/mp4" type="video/mp4" /> /> <source <source src="wildlife.ogg" src="wildlife.ogg" type="video/ogg" type="video/ogg" /> /> Ta przegl ą darka nie odtwarza wideo. Ta przeglądarka nie odtwarza wideo. </video> </video> 35

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. 36

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. 300 200 <video <video src="wildlife.ogg" src="wildlife.ogg" height="300" height="300" width="100" width="100" controls> controls> Ta Ta przegl przegląądarka darka nie nie odtwarza odtwarza wideo. wideo. </video> </video> 37

Ładowanie sekwencji wideo i atrybut preload Przeglądarki bardzo swobodnie 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. 38