Your SlideShare is downloading. ×
XHTML 2.0
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

XHTML 2.0

3,983
views

Published on

My XHTML 2.0 presentation from Summer

My XHTML 2.0 presentation from Summer

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,983
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. XHTML 2.0 Good-bye backward compatibility, hello structure! Marius-Gabriel Butuc Facultatea de Informatică, UAIC
  • 2. “If I have seen further, it is by standing on the shoulders of giants.” Sir Isaac Newton 2 Marius-Gabriel Butuc
  • 3. Cuprins Îmbunătăţiri după XHTML 1.1 Secţiuni, titluri, legături, liste, imagini XForms XML Events XFrames 3 Marius-Gabriel Butuc
  • 4. XHTML 2.0 Controversat: rupe compatibilitatea cu versiunile anterioare; Un nou limbaj de marcare, nu doar o nouă versiune; Compatibil: XHTML 2.0 poate fi parsat la fel cum un agent parsează XHTML 1.1: via parser XML şi CSS compatibil XHTML 2.0 Working Draft-ului actual. 4 Marius-Gabriel Butuc
  • 5. Prezentare vs. Semantică Dispar elementele pur prezentaţionale <i>, <b>, <tt>, <br /> etc. Se păstrează doar elementele ce au semantică <em>, <strong>, <line> etc. 5 Marius-Gabriel Butuc
  • 6. Prezentare (exemplu) <p> int main() { <br /> write(quot;Hello world!nquot;); <br /> return 0; <br /> } </p> 6 Marius-Gabriel Butuc
  • 7. Semantică (exemplu) <p> <line>int main() { </line> <line>write(quot;Hello world!nquot;);</line> <line>return 0; </line> <line>} </line> </p> 7 Marius-Gabriel Butuc
  • 8. Secţiuni Până la XHTML 2.0: <h1> … <h6> XHTML 2.0: titluri generice şi secţiuni; Avantaje: Motoarele de căutare pot înţelege mai uşor importanţa relativă la conţinut; Secţiunile se auto-conţin, putem astfel să avem chiar material introductiv deasupra titlului. 8 Marius-Gabriel Butuc
  • 9. Titluri uzuale (exemplu) <html> <head><title>Intro</title></head> <body> <h1>Introduction</h1> <h2>Quo Vadis Web 2.0?</h2> <h3>The XML Web</h3> <p>XML Web: behind the scenes<p> <h3>The Semantic Web</h3> <h2>What is AJAX?</h2> <h2>What are microformats?</h2> <h2>What is FOAF?</h2> </body> </html> 9 Marius-Gabriel Butuc
  • 10. Secţiuni & titluri (exemplu) <html> <head><title>Intro</title></head> <body> <section> <h>Introduction</h> <section> <h>Quo Vadis Web 2.0?</h> <section> <h>The XML Web</h> <p>XML Web: behind the scenes<p> </section> </section> ... </section> </body> 10 </html> Marius-Gabriel Butuc
  • 11. Hyperlink-uri Orice element poate fi transformat în hyperlink adăugându-i atributul href; <li href=quot;art.xmlquot;>Articole</li> Similar XLink, dar incompatibile datorită diferenţelor de design. Funcţionalităţi XLink pot fi simulate prin această funcţionalitate, liste navigaţionale, elementul link şi RDF. 11 Marius-Gabriel Butuc
  • 12. Liste navigaţionale & meniuri Similare cu listele ordonate şi neordonate; Avantaj: elementele apar doar când lista este activă (ca la meniurile ierarhice de tip pop-up); Oferă multe informaţii de navigare deşi folosesc puţin spaţiu efectiv. 12 Marius-Gabriel Butuc
  • 13. Listă navigaţională (exemplu) <nl> <name>Geometrie</name> <li href=quot;acasa.htmlquot;>Acasă</li> <nl> <name>Plan</name> <li href=quot;prel.htmlquot;>Preliminarii</li> <li href=quot;triu.htmlquot;>Triunghi</li> <li href=quot;4lat.htmlquot;>Patrulater</li> <li href=quot;cerc.htmlquot;>Cerc</li> </nl> <li href=quot;unelte.htmlquot;>Unelte</li> </nl> 13 Marius-Gabriel Butuc
  • 14. Imagini: ca obiecte Înlocuirea elementului img cu elementul object; object permite construcţii în cascadă: dacă browser-ul nu poate afişa un anumit obiect, va afişa conţinutul său; Astfel dispare şi necesitatea atributului alt al elementului img. 14 Marius-Gabriel Butuc
  • 15. Obiecte (exemplu) <object data=“free.mpgquot; type=quot;application/mpegquot;> <object data=quot;Ana.jpgquot; type=quot;image/jpgquot;> Free...<em>like a bird</em> </object> </object> 15 Marius-Gabriel Butuc
  • 16. XForms Scop: colectarea datelor; Independente de platformă / dispozitiv; Separă datele şi logica de prezentare; Folosesc XML pentru definirea datelor; Au facilităţi precum calcule şi validări; Reduc sau chiar elimină necesitatea de scripting. 16 Marius-Gabriel Butuc
  • 17. Procesarea XForms Se parsează în memorie date de la intrare; La modificarea datelor unui element se modifica instance data; La submit, instance data se serializează (XML) şi se trimite serverului. 17 Marius-Gabriel Butuc
  • 18. XForms: Controale Text <input>, <textarea> şi <secret> (echivalent <input type=quot;passwordquot;>) Comportament similar HTML; Permit tipuri de date mai bogate; Suporta input modes: text internaţional, case conversion, predictive input; 18 Marius-Gabriel Butuc
  • 19. XForms: Controale de tip listă <select> - alegerea a zero, una sau mai multe opţiuni; <select1> - alege o singură opţiune; Nivel de abstractizare ridicat: Fiecare dispozitiv poate afişa după cerinţele sale; Control sporit asupra aspectului prin CSS; Atributul appearance. 19 Marius-Gabriel Butuc
  • 20. XForms: Controale noi <output> - afişează inline instance data. “Comanda celor 4 produse costa 17 RON.” <range> - permite selectarea continuă a unei valori între 2 extreme. <upload> - pe lângă fişiere sistem obişnuite, putem conecta acest control si la scannere, camere foto digitale, microfoane, video etc. 20 Marius-Gabriel Butuc
  • 21. XForms în XHTML Singura tehnologie pentru formulare din XHTML 2.0; +20% funcţionalitate = -80% scripting; Datorită XPath suportă calcule, validări specifice, vizibilitatea controalelor etc.; Datorită XML Schema înglobează pattern-uri, restricţii de lungime etc. …Exemple practice ☺ 21 Marius-Gabriel Butuc
  • 22. XML Events Specifică o acţiune ce trebuie să aibă loc la declanşarea unui eveniment; Înlocuieşte DOM Event şi foloseşte XML Document Object Model; Utilizatorul poate declara evenimente proprii şi cum trebuie reacţionat la declanşarea lor. 22 Marius-Gabriel Butuc
  • 23. XML Events: componente Un eveniment este asociat unei ţinte: <html> <head><title>Ronin</title></head> <body> <ul id=quot;blog_menuquot;> <li href=quot;about.htmlquot;>About me</li> <li href=quot;archi.htmlquot;>Archive</li> <li href=quot;inspi.htmlquot;>Inspiration</li> </ul> </body> </html> 23 Marius-Gabriel Butuc
  • 24. XML Events: componente Evenimentul parcurge calea de la rădăcină până la ţintă şi înapoi: (root)→html→body→ul→li→ul→body→html→(root) Drumul până la ţintă: capture phase; Drumul înapoi: bubbling phase. 24 Marius-Gabriel Butuc
  • 25. XML Events: componente În orice etapă din drum, evenimentul poate întâlni un obiect înregistrat ca observer. Observer-ul aşteaptă un eveniment, iar la întâlnirea sa, execută o acţiune. Observer-ul este creat de către un listener. 25 Marius-Gabriel Butuc
  • 26. XML Events: componente <ev:listener observer=quot;blog_menuquot; event=quot;mousedownquot; handler=quot;#scriptul_meuquot;/> Listener-ul face întreaga lista observer; La click pe orice element al listei, observer-ul (blog_menu) execută scriptul_meu. 26 Marius-Gabriel Butuc
  • 27. XFrames Înlocuieşte elementul <frameset> Un nou tip de document ce poate fi folosit cu XHTML, SVG etc. Documentul XFrames defineşte doar cum se compun mai multe documente într-unul singur. 27 Marius-Gabriel Butuc
  • 28. XFrames (exemplu) Un document: un rând, două coloane <frames xmlns=quot;http://www.w3.org/2002/06/xframesquot;> <style> ... </style> <row> <frame id=quot;navigationquot;/> <frame id=quot;mainquot;/> </row> </frames> 28 Marius-Gabriel Butuc
  • 29. XFrames Fiecare frame poate avea un URI implicit; Putem decide ce afişăm într-un frame folosind un URI cu sintaxă specială: http://exemplu.ro/#frames(navigation=nav.svg,main=m.html) Avantaje: Bookmarking & butonul “Back”; Framejack; 29 Marius-Gabriel Butuc
  • 30. Alte noutăţi Orice element poate face referinţă la medii alternative prin atributul src: <p src=“palat.jpgquot; type=quot;image/jpegquot;> Palatul Culturii</p> Adăugarea atributelor property şi about, facilitând conversia din XHTML în RDF / XML. 30 Marius-Gabriel Butuc
  • 31. Rezumat Îmbunătăţiri după XHTML 1.1 Secţiuni, titluri, legături, liste, imagini XForms XML Events XFrames 31 Marius-Gabriel Butuc