XHTML2 i HTML5 Przyszłość WWW oparta o nowe standardy sieciowe HTML5 i XHTML2

Transkrypt

1 XHTML2 i HTML5 Przyszłość WWW oparta o nowe standardy sieciowe HTML5 i XHTML2 mgr inż. Dominik Tomaszuk Uniwersytet w Białymstoku

2 XHTML2

3 XML XHTML2 to aplikacja XML a, która nie daje innych możliwości parsowania Struktura XHTML2 jest zapisana w RELAX NG i XML Schema XHTML2 silnie wykorzystuje technologie XML

4 xml:id i xml:base xml:id to predefiniowany atrybut o typie identyfikatora (m.in. musi być unikalny) odpowiednik ID z DTD xml:base to predefiniowany atrybut określający ścieżkę bazową może być używany w hiperłączach prostych oraz zawartości wstawianej, odpowiednik starego znacznika <base/>

5 RDFa RDFa czyli RDF w atrybutach Celem RDF jest umożliwienie maszynowego przetwarzania abstrakcyjnych opisów zasobów w sposób automatyczny Opis zasobu za pomocą trzech elementów: podmiotu, predykatu i obiektu RDFa to jedna z notacji RDF

6 RDFa RDF Schema i OWL są językami reprezentacji danych RDF Schema i OWL są oparte o RDF oraz mogą być zapisane w składni RDFa Dostęp do RDF może odbywać się przez język zapytań SPARQL Nowe atrybuty: about, rel/rev, href/src/resource, property, content, datatype, typeof

7 XMLNS XMLNS to przestrzenie nazw w XML XMLNS pozwalają korzystać z kilku aplikacji XML w obrębie jednego dokumentu XMLNS w RDFa wykorzystywane są do definiowania słowników, np. Dublin Core, FOAF i DOAP <div xmlns:dc=" about="#prezentacja"> <span property="dc:creator">dominik Tomaszuk</span> </div>

8 access i role Element access to rozszerzenie koncepcji atrybutu accesskey i lepsze rozwiązania dla dostępności WAI Atrybut role to klasyfikacja roli elementów w XHTML u Taksonomia w rolach jest zdefiniowana w RDF i OWL <access targetrole="navigation" key="m"/> <div role="navigation">menu...</div>

9 access i role Atrybut role wykorzystuje koncepcje specyfikacji ARIA w celu dostępności dynamicznej zawartości dla osób niepełnosprawnych. Access i role korzystają z CURIE CURIE to rozszerzenie wartości atrybutów o XMLNS CURIE wykorzystywane są również w RDFa i SPARQL

10 XForms XForms to nie tylko formularze, XForms to model przetwarzania XML i język opisu interfejsu użytkownika XForms wykorzystuje wzorzec MVC (model widok kontroler) XForms to walidacja formularzy dzięku typom danych XML Schema (w tym przez wyrażenia regularne) Prywatność dzięki P3P, dostęp dzięki XPath

11 XForms <model> <!-- model --> <instance> <data xmlns=""><q/></data> </instance> <submission action="s.php" method="get" id="s"/> </model> <!-- widok --> <input ref="q"><label>szukaj</label></input> <submit submission="s"><label>znajdź</label></submit>

12 XML Events XML Events służy do obsługi zdarzeń i współpracy ze skryptami, np w JavaScript Każda zmiana zdarzenia wiąże się tylko ze zmianą skryptu <ev:listener observer="pomoc" handler="#pokaz" event="domactivate"/> <handler id="pokaz" type="text/javascript"> pokaz(); </handler> <trigger id="pomoc">pomoc</trigger>

13 XML Events Jedno zdarzenie nie musi być związane z jednym językiem skryptowym <input type="submit"> <handler ev:event="domactivate" type="text/javascript"> validate(); </handler> <handler ev:event="domactivate" type="text/python"> validate </handler> <handler ev:event="domfocusin" type="text/ javascript"> help(); </handler> </input>

14 Nowe elementy Sekcje i nagłówki (działy) Separatory Nowe wiersze <section> <h>xhtml2</h>, <l>xhtml2</l> <l>służy do tworzenia stron internetowych.</l> <separator /> </section>

15 Nowe elementy Blok kodu Listy nawigacyjne <nl> <label>menu</label> <li href="xhtml2.html">xhtml2</li> <li href="html5.html">html5</li> </nl>

16 Nowe atrybuty Wyglądy Edycje Hipertekst dla każdego elementu <p layout="relevant" href=" hreflang="pl" hrefmedia="screen"> Uniwersytet w </p> Białymstoku

17 Nowe atrybuty Nowy dwukierunkowy tekst (wraz z notacją rubinową) to ulepszenie internacjonalizacji Osadzanie dla każdego elementu <p src="budynek" type="image/png, image/gif" xml:lang="pl" dir="ltr">budynek Uniwersytetu.</p>

18 HTML5

19 HTML5 dwa języki Specyfikacja określa dwa sposoby parsowania: pseudo SGML HTML5 XML XHTML5 Obsługa xml:base i xml:lang tylko XHTML5 Obsługa XMLNS tylko XHTML5 Obsługa document.write() i document.writeln() tylko HTML5

20 HTML5 dwa języki Typy MIME: text/html HTML5, application/xml lub application/xhtml+xml XHTML5 Brak RCDATA w XHTML5 (elementy title i textarea) DOCTYPE w HTML5 wymagany, w XHTML5 opcjonalny Element noscript tylko w HTML5 W XHTML5 domyślne kodowanie to UTF 8 lub UTF 16

21 Microdata Microdata to uboższy RDFa dla HTML5 Microdata służy do opisywania treści dla odczytu maszynowego Microdata to grupy par nazwa wartość Dwa atrybuty item i itemprop <section item="org.example.uczelnia"> <h1 itemprop="nazwa">uniwersytet w Białymstoku</h1> </section>

22 Microdata Microdata to predefiniowane słowniki: vcard, vevent oraz wartości do określania licencji Microdata pozwala na konwersje do JSON, RDF, vcard, icalendar, Atom <div item="vcard"> <span itemprop="fn">dominik Tomaszuk</span> <p itemprop="org" item> <span itemprop="organization-name">uniwersytet w Białymstoku</span> </p> </div>

23 Nowe API API do elementu canvas, API odtwarzania wideo i audio elementy video i audio), API do trwałego składowania (klucz wartość i bazy danych SQL), API do trybu offline aplikacjach webowych, API do rejestrowania przez aplikacje webowe protokołów i mediów,

24 Nowe API API do edycji (atrybut contenteditable), API do drag & drop (atrybut draggable), API do gniazdek webowych, API do obsługi historii, API do wiadomości cross document, API do wysyłania zdarzeń (element eventsource).

25 Nowe API /* odtwarzanie wideo */ var v = document.getelementsbytagname("video")[0]; v.play(); /* trwałe składowanie klucz-wartość */ sessionstorage.imie = "Dominik"; alert( "imie = " + sessionstorage.imie ); /* tryb offline w aplikacjach webowych */ alert(navigator.online? "Jesteś online" : "Jesteś offline");

26 Rozszerzenia API getelementsbyclassname() aby wybrać elementy poprzez ich nazwę klasy innerhtml aby serializować dokumenty activeelement oraz hasfocus aby określić który element jest w danym momencie aktywny getselection() zwraca obiekt reprezentujący aktualny wybór designmode i execcommand() często stosowane do edycji dokumentów

27 Nowe elementy section article aside header footer nav

28 Nowe elementy dialog figure audio i video embed meter time <video autoplay> <source src="film.ogg" type="video/ogg"> </video>

29 Nowe elementy canvas details datalist eventsource keygen output <input list="jezyki"> <datalist id="jezyki"> <option value="html5"> </datalist>

30 <meta charset="utf-8">

31 @aria * (role i ARIA)

32 Nowe atrybuty <label> ID: <input pattern="[0-9][a-z]{3}" name="id" autocomplete="off"> </label> <div contenteditable="true">witam!</div> <span data-wzrost="cm">180</span> <script src="skrypt.js" async></script>

33 Podobieństwa Usunięcie elementów prezentacji Listy nawigacyjne Bardziej dopasowane formularze (więcej kontrolek, walidacja) Bardziej semantyczny język znaczników Wprowadzenie elementów do notacji rubinowej Wsparcie dla ARIA i role

34 Główna różnica HTML5 to ewolucja, XHTML2 to rewolucja

35 Koniec Dziękuję i proszę o pytania

36 XHTML2 i HTML5 Przyszłość WWW oparta o nowe standardy sieciowe HTML5 i XHTML2 mgr inż. Dominik Tomaszuk Uniwersytet w Białymstoku 1

37 XHTML2 Kliknij, aby dodać konspekt 2

38 XML XHTML2 to aplikacja XML a, która nie daje innych możliwości parsowania Struktura XHTML2 jest zapisana w RELAX NG i XML Schema XHTML2 silnie wykorzystuje technologie XML 3

39 xml:id i xml:base xml:id to predefiniowany atrybut o typie identyfikatora (m.in. musi być unikalny) odpowiednik ID z DTD xml:base to predefiniowany atrybut określający ścieżkę bazową może być używany w hiperłączach prostych oraz zawartości wstawianej, odpowiednik starego znacznika <base/> 4

40 RDFa RDFa czyli RDF w atrybutach Celem RDF jest umożliwienie maszynowego przetwarzania abstrakcyjnych opisów zasobów w sposób automatyczny Opis zasobu za pomocą trzech elementów: podmiotu, predykatu i obiektu RDFa to jedna z notacji RDF 5

41 RDFa RDF Schema i OWL są językami reprezentacji danych RDF Schema i OWL są oparte o RDF oraz mogą być zapisane w składni RDFa Dostęp do RDF może odbywać się przez język zapytań SPARQL Nowe atrybuty: about, rel/rev, href/src/resource, property, content, datatype, typeof 6

42 XMLNS XMLNS to przestrzenie nazw w XML XMLNS pozwalają korzystać z kilku aplikacji XML w obrębie jednego dokumentu XMLNS w RDFa wykorzystywane są do definiowania słowników, np. Dublin Core, FOAF i DOAP <div xmlns:dc=" about="#prezentacja"> <span property="dc:creator">dominik Tomaszuk</span> </div> 7

43 access i role Element access to rozszerzenie koncepcji atrybutu accesskey i lepsze rozwiązania dla dostępności WAI Atrybut role to klasyfikacja roli elementów w XHTML u Taksonomia w rolach jest zdefiniowana w RDF i OWL <access targetrole="navigation" key="m"/> <div role="navigation">menu...</div> 8

44 access i role Atrybut role wykorzystuje koncepcje specyfikacji ARIA w celu dostępności dynamicznej zawartości dla osób niepełnosprawnych. Access i role korzystają z CURIE CURIE to rozszerzenie wartości atrybutów o XMLNS CURIE wykorzystywane są również w RDFa i SPARQL 9

45 XForms XForms to nie tylko formularze, XForms to model przetwarzania XML i język opisu interfejsu użytkownika XForms wykorzystuje wzorzec MVC (model widok kontroler) XForms to walidacja formularzy dzięku typom danych XML Schema (w tym przez wyrażenia regularne) Prywatność dzięki P3P, dostęp dzięki XPath 10

46 XForms <model> <!-- model --> <instance> <data xmlns=""><q/></data> </instance> <submission action="s.php" method="get" id="s"/> </model> <!-- widok --> <input ref="q"><label>szukaj</label></input> <submit submission="s"><label>znajdź</label></submit> 11

47 XML Events XML Events służy do obsługi zdarzeń i współpracy ze skryptami, np w JavaScript Każda zmiana zdarzenia wiąże się tylko ze zmianą skryptu <ev:listener observer="pomoc" handler="#pokaz" event="domactivate"/> <handler id="pokaz" type="text/javascript"> pokaz(); </handler> <trigger id="pomoc">pomoc</trigger> 12

48 XML Events Jedno zdarzenie nie musi być związane z jednym językiem skryptowym <input type="submit"> <handler ev:event="domactivate" type="text/javascript"> validate(); </handler> <handler ev:event="domactivate" type="text/python"> validate </handler> <handler ev:event="domfocusin" type="text/ javascript"> help(); </handler> </input> 13

49 Nowe elementy Sekcje i nagłówki (działy) Separatory Nowe wiersze <section> <h>xhtml2</h>, <l>xhtml2</l> <l>służy do tworzenia stron internetowych.</l> <separator /> </section> 14

50 Nowe elementy Blok kodu Listy nawigacyjne <nl> <label>menu</label> <li href="xhtml2.html">xhtml2</li> <li href="html5.html">html5</li> </nl> 15

51 Nowe atrybuty Wyglądy Edycje Hipertekst dla każdego elementu <p layout="relevant" href=" hreflang="pl" hrefmedia="screen"> Uniwersytet w </p> Białymstoku 16

52 Nowe atrybuty Nowy dwukierunkowy tekst (wraz z notacją rubinową) to ulepszenie internacjonalizacji Osadzanie dla każdego elementu <p src="budynek" type="image/png, image/gif" xml:lang="pl" dir="ltr">budynek Uniwersytetu.</p> 17

53 HTML5 18

54 HTML5 dwa języki Specyfikacja określa dwa sposoby parsowania: pseudo SGML HTML5 XML XHTML5 Obsługa xml:base i xml:lang tylko XHTML5 Obsługa XMLNS tylko XHTML5 Obsługa document.write() i document.writeln() tylko HTML5 19

55 HTML5 dwa języki Typy MIME: text/html HTML5, application/xml lub application/xhtml+xml XHTML5 Brak RCDATA w XHTML5 (elementy title i textarea) DOCTYPE w HTML5 wymagany, w XHTML5 opcjonalny Element noscript tylko w HTML5 W XHTML5 domyślne kodowanie to UTF 8 lub UTF 16 20

56 Microdata Microdata to uboższy RDFa dla HTML5 Microdata służy do opisywania treści dla odczytu maszynowego Microdata to grupy par nazwa wartość Dwa atrybuty item i itemprop <section item="org.example.uczelnia"> <h1 itemprop="nazwa">uniwersytet w Białymstoku</h1> </section> 21

57 Microdata Microdata to predefiniowane słowniki: vcard, vevent oraz wartości do określania licencji Microdata pozwala na konwersje do JSON, RDF, vcard, icalendar, Atom <div item="vcard"> <span itemprop="fn">dominik Tomaszuk</span> <p itemprop="org" item> <span itemprop="organization-name">uniwersytet w Białymstoku</span> </p> </div> 22

58 Nowe API API do elementu canvas, API odtwarzania wideo i audio elementy video i audio), API do trwałego składowania (klucz wartość i bazy danych SQL), API do trybu offline aplikacjach webowych, API do rejestrowania przez aplikacje webowe protokołów i mediów, 23

59 Nowe API API do edycji (atrybut contenteditable), API do drag & drop (atrybut draggable), API do gniazdek webowych, API do obsługi historii, API do wiadomości cross document, API do wysyłania zdarzeń (element eventsource). 24

60 Nowe API /* odtwarzanie wideo */ var v = document.getelementsbytagname("video")[0]; v.play(); /* trwałe składowanie klucz-wartość */ sessionstorage.imie = "Dominik"; alert( "imie = " + sessionstorage.imie ); /* tryb offline w aplikacjach webowych */ alert(navigator.online? "Jesteś online" : "Jesteś offline"); 25

61 Rozszerzenia API getelementsbyclassname() aby wybrać elementy poprzez ich nazwę klasy innerhtml aby serializować dokumenty activeelement oraz hasfocus aby określić który element jest w danym momencie aktywny getselection() zwraca obiekt reprezentujący aktualny wybór designmode i execcommand() często stosowane do edycji dokumentów 26

62 Nowe elementy section article aside header footer nav 27

63 Nowe elementy dialog figure audio i video embed meter time <video autoplay> <source src="film.ogg" type="video/ogg"> </video> 28

64 Nowe elementy canvas details datalist eventsource keygen output <input list="jezyki"> <datalist id="jezyki"> <option value="html5"> </datalist> 29

65 <meta charset="utf-8"> 30

66 @aria * (role i ARIA) 31

67 Nowe atrybuty <label> ID: <input pattern="[0-9][a-z]{3}" name="id" autocomplete="off"> </label> <div contenteditable="true">witam!</div> <span data-wzrost="cm">180</span> <script src="skrypt.js" async></script> 32

68 Podobieństwa Usunięcie elementów prezentacji Listy nawigacyjne Bardziej dopasowane formularze (więcej kontrolek, walidacja) Bardziej semantyczny język znaczników Wprowadzenie elementów do notacji rubinowej Wsparcie dla ARIA i role 33

69 Główna różnica HTML5 to ewolucja, XHTML2 to rewolucja 34

70 Koniec Dziękuję i proszę o pytania 35