Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Html5 Seminario Tid

2.026 Aufrufe

Veröffentlicht am

Training course at TID on HTML5

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Html5 Seminario Tid

  1. 1. HTML5 Part I: Language and basic DOM APIs José M. Cantera Fonseca Senior Technologist CC 3001 TELEFÓNICA I+D Date: 17/12/2009 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  2. 2. What is HTML5? HTML5 reflects an effort, started in 2004, to study contemporary HTML implementations and deployed content in order to improve interoperability on the Web platform HTML5 — encompasses the set of technologies (language and APIs) to be implemented by web browsers in the short, medium-term (and perhaps long-term) — will be the core technology (delivery format) on which future Web Applications will be based on The HTML5 draft: — Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax. — Defines detailed processing models to foster interoperable implementations. — Improves markup for documents based on prevailing authoring practices — Introduces markup and APIs for emerging idioms, such as Web applications. TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  3. 3. HTML History 1990-1995: early days at CERN and IETF (ex. HTML 2.0, RFC 1866) — http://www.w3.org/People/Raggett/the-early-days-of-the-Web.html October 1st 1994: W3C is created (hosted by CSAIL @ MIT) 1995 HTML 3.0 1997 HTML 3.2 http://www.w3.org/TR/REC-html32 April 1998 HTML 4 http://www.w3.org/TR/1998/REC-html40-19980424/ 1998 DOM Level 1 http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/ June 1999 RFC 2616 (HTTP 1.1) published 24th December 1999 HTML 4.01 http://www.w3.org/TR/1999/REC-html401-19991224 — http://www.w3.org/TR/html4/appendix/changes.html#19991224 — At this time, the W3C membership decided to stop evolving HTML January 2000 XHTML 1.0 (HTML 4.01 serialized as XML) Nov.2000 DOM Level2 Core http://www.w3.org/TR/2000/REC-DOM-Level-2-Core- 20001113 2001 Work on XHTML Modularization and XHTML2 starts August / December 2002 XHTML2 working drafts published 2003 DOM Level2 HTML http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML- 20030109 TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  4. 4. HTML History 2003 XForms becomes a W3C Recommendation http://www.w3.org/TR/2003/REC-xforms-20031014/ — Browser vendors (Apple, Opera) are seriously concerned – http://lists.w3.org/Archives/Public/www-forms-editor/2003Sep/0006.html May 2004 Backwards Compatibity blog entry (Ian Hickson) — Authors still want to write Web applications, and the currently deployed standards are inadequate. Since completely new standards won't cut it [...] this leaves us with the solution we (Opera and Mozilla) have been advocating: updating HTML and the DOM. June 2004 W3C Workshop on Web Applications and CDFs — Hosted by Adobe in San José, California http://www.w3.org/2004/04/webapps-cdf-ws/ — Mozilla and Opera position “Design Principles for Web Application Technologies” http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html — Web Forms 2.0 an evolutionary approach for enhancing forms — W3C staff and membership voted to continue developing XML-based replacements instead. June 2004 (just after the workshop) Apple, Mozilla, and Opera found the WHATWG (Web Hypertext Applications Working Group) http://whatwg.org — The group aims to develop specifications based on HTML and related technologies to ease the deployment of interoperable Web Applications [...] for implementation in mass-market Web browsers, in particular Safari, Mozilla, and Opera; [the group] intends to ensure that all its specifications address backwards compatibility concerns [...] and specify error handling behavior to ensure interoperability even in the face of documents that do not comply to the letter of the specifications. February 2005 AJAX: A new approach to Web Applications (Jesse James Garrett) TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  5. 5. HTML History September 2005 WHATWG Web Applications 1.0 Early Working Draft — http://www.whatwg.org/specs/web-apps/2005-09-01/ October 2005 Ian Hickson (then at Opera Software) goes to Google October 2006 Reinventing HTML blog entry (Tim Berners-Lee) — Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work... The plan is to charter a completely new HTML group. Unlike the previous one, this one will be chartered to do incremental improvements to HTML, as also in parallel xHTML. March 2007 — 5th W3C HTML Working Group chartered http://www.w3.org/2007/03/HTML-WG- charter.html – Chairs: Chris Wilson (Microsoft), Sam Ruby (IBM). Team Contact: Dan Connolly — W3C XHTML2 Working Group chartered May 2007 W3C’s HTML WG resolves on using WHATWG’s HTML5 spec as an starting point — Apple, Mozilla, and Opera allowed the W3C to publish the specification under the W3C copyright, while keeping a version with the less restrictive license on the WHATWG site. — Since then, both groups have been working together. TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  6. 6. HTML History January 2008 W3C publishes the FPWD on HTML5 — http://www.w3.org/TR/2008/WD-html5-20080122/ July 2009 the end of the work on XHTML2 and XHTML Modularization is announced — http://www.w3.org/2009/06/xhtml-faq.html August 2009 latest HTML5 WD published at W3C http://www.w3.org/TR/2009/WD-html5-20090825/ October 2009 WHATWG announces Last Call for Comments for HTML5 http://blog.whatwg.org/html5-at-last-call More info at — http://esw.w3.org/topic/HTML/history — http://www.atendesigngroup.com/blog/brief-history-of-html TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  7. 7. HTML5 Design Principles Differentiating between — Conforming Language : Pages syntactically correct — Supported Lang. : Pages not syntactically correct but which actually work Compatibility — Support existing content – to process existing HTML documents as HTML 5 and get results that are compatible with the existing expectations of users and authors, based on the behavior of existing browsers. – Ex. <b>a<i>b</b>c</i> — Degrade gracefully – Web content should degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models. – Ex. the <video> element allows to define fallback content if video is not supported — Do not reinvent the wheel – Ex. contenteditable=“” — Pave the cowpaths – Ex. <br/> — Evolution not revolution – Switching to XML syntax requires a global change, so continue supporting classic HTML syntax as well. TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  8. 8. HTML5 Design Principles Utility — Solve real problems – Prioritizing widespread problems to be solved — Priority of Constituencies – In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. — Secure By Design – Ensure that features work with the security model of the web. Preferrably address security considerations directly in the specification. – Ex. Cross-document messaging (postMessage API) — Separation of Concerns – markup that expresses structure is usually preferred to purely presentational markup – Ex. <article> element — DOM Consistency – Regardless of XHTML or HTML serializations – The HTML (text/html) parser puts elements in the http://www.w3.org/1999/xhtml namespace in the DOM for compatibility with the XML syntax of HTML5. TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  9. 9. HTML5 Design Principles Interoperability — Well-Defined behavior – Prefer to clearly define behavior that content authors could rely on, in preference to vague or implementation-defined behavior. – This way, it is easier to author content that works in a variety of user agents. However, implementations should still be free to make improvements in areas such as user interface and quality of rendering. — Avoid needless complexity — Handle errors – Error handling should be defined so that interoperable implementations can be achieved. – Prefer graceful error recovery to hard failure, so that users are not exposed to authoring errors. TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  10. 10. HTML5 Design Principles Universal access — Media independence – Features should, when possible, work across different platforms, devices, and media – Ex. A hyperlink can not be actuated in a printed document, but that is no reason to omit the <a> element. — Support world languages – Ex. Supporting Unicode allows text in most of the world's languages, including mixing of text in different languages. — Accessibility – Design features to be accessible to users with disabilities. – Ex. the <progress> element is intrinsically accessible as it has unambiguous progress bar semantics which permits mapping to accessibility APIs that can represent progress indicators TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  11. 11. © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal TELEFÓNICA I+D >lmth/< >ydob/< >p/<.tnemucod LMTH elpmaxe na si sihT>p< >1h/<elpmaxE>1h< >"elpmaxe"=ssalc ydob< >daeh/< >/ ssc.teehsym =ferh teehselyts =ler knil< “ “ “ “ >eltit/<tnemucoD LMTH nA>eltit< >daeh< >"lmthx/9991/gro.3w.www//:ptth"=snlmx lmth< >?"8-FTU"=gnidocne "0.1"=noisrev lmx?< (application/xhtml+xml) or (application/xml) XML Serialization >lmth/< >ydob/< .tnemucod LMTH elpmaxe na si sihT>p< >1h/<elpmaxE>1h< >elpmaxe=ssalc ydob< >daeh/< >ssc.teehsym=ferh teehselyts=ler knil< >eltit/<tnemucoD LMTH nA>eltit< > "8-FTU"=tesrahc atem< >daeh< >lmth< >lmth EPYTCOD!< (text/html) HTML Serialization Getting Started
  12. 12. HTML5 .- XHTML vs HTML XHTML taught us — lowercase tags! — close void elements! (img, meta, input, ...) — no empty attributes! (disabled=”disabled”) — always put attribute values in double quotes! HTML5 says: you choose TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  13. 13. HTML5 .- XHTML vs HTML HTML5 defines a syntax compatible with HTML 4 and XHTML 1 HTML5 is no longer formally based upon SGML — The HTML serialization defines its own parsing rules — the DOCTYPE declaration is only needed to enable “standards mode” for documents written using the HTML syntax HTML 5 defines three parsing modes (which influence the final rendering obtained) — quirks mode – violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s — limited quirks mode (a.k.a. almost standards mode) – implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification — no quirks mode (a.k.a. standard mode) – browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser More info at http://hsivonen.iki.fi/doctype/ TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  14. 14. HTML5 .- XHTML vs HTML HTML syntax remarks — HTML syntax is case-insensitive — Void elements (forbidden from containing any content at all) – <link type="text/css" rel="stylesheet" href="style.css"> — Empty elements (any element that does not contain any content within it) – <span></span> — boolean attributes, <true> value specified using an empty attribute (with no value), the empty string or a value which it is equal to the name of the attribute. ‘false’ or ‘true’ are invalid values! – <input disabled> — Unquoted attribute values <div class=example> (provided there are no spaces or quotes) Any document, including a document authored with the intention of being XHTML, served as text/html is technically an HTML document. — See current problems with XHTML served as text/html at http://www.hixie.ch/advocacy/xhtml Documents with an XML media type are always handled in standards (no quirks) mode A polyglot HTML document is a document that conforms to both the HTML and XHTML syntactic requirements, and which can be processed as either by browsers, depending on the MIME type used. More info at http://wiki.whatwg.org/wiki/HTML_vs._XHTML TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  15. 15. HTML5 Syntax Remarks Tag soup? No! — small degree of freedom, but very detailed rules for parsing — validation will matter – http://html5.validator.nu/ — keep a clean coding style, you’ll thank yourself for it later HTML5 is designed so that old HTML 4 browsers can safely ignore new HTML5 constructs “Documents must not use deprecated features. User agents should support deprecated features.” — Extensive error handling by UAs TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  16. 16. Character Encoding For the HTML syntax, three means of setting the character encoding: — At the transport level. By using the HTTP Content-Type header — Using a Unicode Byte Order Mark (BOM) character at the start of the file. This character provides a signature for the encoding used. — Using a meta element with a @charset attribute that specifies the encoding within the first 512 bytes of the document. E.g. – <meta charset="UTF-8"> could be used to specify the UTF-8 encoding. – <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> – is still allowed. For the XML syntax, authors have to use the rules as set forth in the XML specifications to set the character encoding. Authors are encouraged to use UTF-8. — Conformance checkers may advise authors against using legacy encodings. — Authoring tools should default to using UTF-8 for newly-created documents. More info at — The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) — On the Goodness of Unicode, On Character Strings, and Characters vs. Bytes TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  17. 17. Metadata <meta> element with @name and @content attributes. Example — <meta name=author content=“José Cantera”> Standard properties — application-name — author — description — generator Pragma directives, using the @http-equiv attribute — <meta http-equiv=refresh content=600> @lang is a global attribute which specifies the primary language for the element's contents and for any of the element's attributes that contain text. — Its value must be a valid BCP 47 language code (Ex. @lang=es) Other metadata (document semantics), see later — RDFa — Microdata TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  18. 18. Global Attributes @accesskey Accessibility / Mobile @class @contenteditable Rich in place editing of content @contextmenu For assigning a contextual menu to an element @dir for the reading direction of languages @draggable for drag&drop interaction @hidden In HTML5 any element can be hidden @id @itemid, @itemprop, @itemref, @itemscope, @itemtype — Microdata (Semantics) @lang @spellcheck Activates spellchecking on a textual input @style @tabindex @title @role, @aria-xxx To instruct Assistive Technology, see later @data-xx for extensibility, see later TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  19. 19. <script> <noscript> elements <script> — @type, normally ‘text/javascript’ — @src, if specified the script element should be empty — @charset, must not be specified if the @src it is not specified — @language no longer allowed — @async, @defer (new) are boolean attributes that indicate how the script should be executed. Three modes – @async=true indicates that the script should be executed asynchronously as soon as the script is available – @defer=true, the script will executed once the page has finished parsing – If @async and @defer are not present the script is executed immediately i.e. before the user agent continues parsing the rest of the page <noscript> — Allows to include fallback content in case scripting is not enabled TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  20. 20. © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal TELEFÓNICA I+D >lmth/< >ydob/< >elcitra/< >p/<oluc tra le azneimoC>lamron=ssalc p< í >elyts/< } ;fi r e s , s e m i T , " n a m o R w e N s e mi T ": yli m af -t n of ;xp41:ezis-tnof { l a mr o n. p } ;der dilos xp5:redrob { elpmaxe. >"ssc/txet"=epyt depocs elyts< >elcitraym=di elpmaxe=ssalc elcitra< .tnemucod 5LMTH elpmaxe na si sihT>p< >1h/<elpmaxE>1h< >elpmaxe=ssalc ydob< >daeh/< >ssc.teehsym=ferh teehselyts=ler knil< >eltit/<tnemucoD LMTH nA>eltit< > "8-FTU"=tesrahc atem< >daeh< >lmth< >lmth EPYTCOD!< Ex. defined by its parent element It indicates that the specified style has to be applied only to the elements of the subtree A new attribute @scoped has been added to the <style> element Scoped Styles
  21. 21. <link> element Regular links (<a href>) simply point to another page. Link relations are used to explain why another HTTP resource is being pointed — They are conveyed using the @rel attribute — Note: The @rev attribute has disappeared in HTML5 HTML 5 breaks link relations into two categories: — links to external resources that are to be used to augment the current document – The behavior depends on the exact relationship, as defined for the relevant link type. Example: – <link rel=stylesheet type=“text/css” href=“mycss.css”> — hyperlink links are links to other documents. Example: – <link rel=alternate type=“application/atom+xml” href=“http://myfeeds.com/feed1”> TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  22. 22. <link> relations rel=alternate — in conjunction with the type attribute indicates the same content in another format. Example: the same page in another language: – <link rel=alternate type=“text/html” href=“en/page.html” hreflang=en> rel=archives — indicates that the referenced document describes a collection of records, documents, or other materials of historical interest. – Ex. A blog’s index page could link to an index of the blog’s past posts rel=author — link to information about the author of the page (ex. a mailto: URI or a URI pointing to a FOAF document) rel=first, last, prev, next, and up — to define relations between pages that are part of a series TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  23. 23. <link> Relations rel=icon — <link rel=icon href=windows.ico sizes="32x32 48x48"> rel=prefetch — indicates that preemptively fetching and caching the specified resource is likely to be beneficial, as it is highly likely that the user will require this resource. rel=search — indicates that the referenced document provides an interface specifically for searching the document and its related resources. — it should point to an OpenSearch document that describes how a browser could construct a URL to search the current site for a given keyword. And others — see http://www.htmlfive.net/the-road-to-html-5-link-relations/ TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  24. 24. New Structural Elements They can be employed in many situations where <div> is used today and should help you make more readable, maintainable, HTML source. <section> — a generic document or application section — Ex. a book chapter <nav> — A section devoted to major navigation blocks <article> — A self-contained composition that is intended to be independently distributable or reusable (e.g. in syndication) — Ex. forum post, newspaper article, a Web log entry, a gadget … <aside> — A section that consists of content that is tangentially related to the main content — Ex. sidebars, ads, TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  25. 25. Sectioning Example If you just go through your document and blindly replace all the <div>s with <section>s you are doing it wrong. Each time you nest a <section>, you increase the outline depth by 1 • http://gsnedders.html5.org/outliner/ >lmth EPYTCOD!< >lmth< >daeh< > "8-FTU"=tesrahc atem< Document Outline >eltit/<tnemucoD LMTH nA>eltit< >daeh/< This is the main header >elpmaxe=ssalc ydob< +--This is a subheader >1h/<redaeh niam eht si sihT>1h< >noitces< +--This is a subsubheader >1h/<redaehbus a si sihT>1h< >noitces< +--This is a second subheader >1h/<redaehbusbus a si sihT>1h< >noitces/< >noitces/< >noitces< >1h/<redaehbus dnoces a si sihT>1h< >noitces/< >ydob/< >lmth/< TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  26. 26. New Structural Elements <hgroup> — represents the heading of a section <header> — a group of introductory or navigational aids <footer> — A footer for its nearest ancestor sectioning content — Ex. copyright data, links to related documents, … <time> — Represents either a time on a 24 hour clock or a precise date in the proleptic Gregorian calendar <mark> — A run of text marked or highlighred for reference purposes TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  27. 27. © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal TELEFÓNICA I+D >redaeh/< >van/< >llllu/< >redaeh/< >van/< > u/< >redaeh/< >van/< > u/< >redaeh/< >van/< > u/< > /<>a/< > /<>a/< ó > > >iiiillll/<>a/<n inipO>4=yekssecca n inipO =eltit lmth.noinipo"=ferh a<>iiiillll< > /<>a/< > ó “ “ “ a<> < a<> < a<> < > /<>a/< > /<>a/< > > >iiiillll/<>a/<aporuE>3=yekssecca aporuE =eltit lmth.aporue"=ferh a<>iiiillll< > /<>a/< > “ “ “ a<> < a<> < a<> < > /<>a/< > /<>a/< > /<>a/< > > >iiiillll/<>a/<odnuM>2=yekssecca odnuM led otseR =eltit lmth.odnum"=ferh a<>iiiillll< > “ “ “ a<> < a<> < a<> < > /<>a/< > /<>a/< ñ > > >iiiillll/<>a/<a apsE>1=yekssecca a apsE =eltit lmth.a apse"=ferh a<>iiiillll< > /<>a/< > ñ “ “ “ ñ a<> < a<> < a<> < > u< >llllu< > u< > u< >van< >van< >van< >van< >puorgh/< >puorgh/< >puorgh/< >puorgh/< >3h/<>em t/<>rbba/< >3h/<>em t/<>rbba/< >3h/<>em t/<>rbba/< ” “ rbba< >3h/<>emiiiit/<>rbba/<.h> saroh =eltit rbba< 73:61 odazilautcA rbba< rbba< > > .9002/21/01 seveuJ>etadbup "00:10+00:73:61T01-21-9002"=emitetad emiiiit<>3h< > em t<>3h em t<>3h em t<>3h ñ >2h/< >2h/< >2h/<lo apsE ne laidnuM red L>2h< >2h/< í >2h< >2h< >2h< >1h/< >1h/< >1h/<se.odnuM lE>1h< >1h/< >1h< >1h< >1h< >puorgh< >puorgh< >puorgh< >puorgh< >redaeh< >redaeh< >redaeh< >redaeh< > > >ocidoirep=ssalc niam=di noiiiitces< > no tces< no tces< no tces< >redaeh/< >redaeh/< >redaeh/< >redaeh/< >v d/< >v d/< >viiiid/< >v d/< >van/< >van/< >van/< >van/< > u/< >llllu/< > u/< > u/< > /<>a/< > /<>a/< > /<>a/< > > >iiiillll/<>a/<acetoremeH>"lmth.acetoremeh"=ferh a<>iiiillll< > a<> < a<> < a<> < > /<>a/< > /<>a/< > > >iiiillll/<>a/<selaicepsE>"lmth.selaicepse"=ferh a<>iiiillll< > /<>a/< > a<> < a<> < a<> < > /<>a/< > /<>a/< > /<>a/< > > > a<> < >iiiillll/<>a/<sgolB>"lmth.sgolb"=ferh a<>iiiillll< a<> < a<> < > /<>a/< > /<>a/< > /<>a/< > > >iiiillll/<>a/<aidemitluM>"lmth.aidemitlum"=ferh a<>iiiillll< > a<> < a<> < a<> < > u< >llllu< > u< > u< >van< >van< >van< >van< > > >"odnuM lE ed opitogoL =tla gnp.odnuMlEogol"=crs gmiiii< > “ “ gm < gm < gm < > >rab=ssalc viiiid< > > v d< v d< v d< >redaeh< >redaeh< >redaeh< >redaeh< > > >reniatnoCpot=ssalc pot=di viiiid< > v d< v d< v d< >ydob< >ydob< >ydob< >ydob< >daeh/< >daeh/< >daeh/< >daeh/< > > >"ssc.odnumle =ferh teehselyts=ler kniiiillll< > “ kn < kn < kn < > > > >"8-FTU"=tesrahc atem< atem< atem< atem< >e t t/< >e t t/< >e t t/< >e t t< >e t t< >elllltiiiit/<se.odnumle>elllltiiiit< >e t t< >daeh< >daeh< >daeh< >daeh< > mth< mth< >se=gnal llllmth< > > mth< >lmth EPYTCOD!< Example “Diario El Mundo” as HTML5
  28. 28. © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal TELEFÓNICA I+D > mth/< >ydob/< > mth/< >ydob/< >llllmth/< >ydob/< >-- lapicnirp euqolb led nif --!< >viiiid/< > mth/< >ydob/< >v d/< >v d/< >v d/< >ed sa/< >ediiiisa/< >ed sa/< >ed sa/< >no tces/<> >no tces/<> no tces< >noiiiitces/<>opmeit=ssalc noiiiitces< >no tces/<> no tces< no tces< >no tces/<> >no tces/<> >no tces/<> no tces< no tces< >noiiiitces/<>soicivres=ssalc noiiiitces< no tces< >ed sa< >ed sa< >ediiiisa< >ed sa< >no tces/< >no tces/< >-- ocidoirep led nif --!< >noiiiitces/< >no tces/< >retoof/< >retoof/< >retoof/< >retoof/< >van/<> u/< >van/<>llllu/< >van/<> u/< >van/<> u/< > /<>a/< > /<>a/< í > > >iiiillll/<>a/<dadicavirP ed acit loP>lmth.virp=ferh a<>iiiillll< > /<>a/< > a<> < a<> < a<> < > /<>a/< > /<>a/< > /<>a/< > > > a<> < >iiiillll/<>a/<lageL osivA>lmth.osiva=ferh a<>iiiillll< a<> < a<> < > u<>van< >llllu<>van< > u<>van< > u<>van< <!– del periódico --> >retoof< >retoof< >retoof< >retoof< >no tces/< >no tces/< >-- adatrop al ed nif --!< >noiiiitces/< >no tces/< >e c tra/< >e c tra/< >ellllciiiitra/< >e c tra/< >v d/<>p/< >v d/<>p/< >viiiid/<>p/< .n isirp ne osac led sodatupmi ocnic sol ed >v d/<>p/< ó ocin le res ,o acraC leugiM ,ollitsaC led atraM anallives nevoj al ed osefnoc onisesa le ,n icalecracxe atse noC >p< ú á ñ ó >p< >p< >p< >> gm <>v d< >taolf=ssalc gnp.negami=crs "leumaS ed otoF"=tla gmiiii<>viiiid< > gm <>v d< gm <>v d< >puorgh/< >puorgh/< >puorgh/< >puorgh/< >1h/<>a/< >1h/<>a/< > > >1h/<>a/<edrat atse rdlas euq ,leumaS a datrebil ne renop anedro aicneiduA aL >"lmth.1n"=ferh a<>1h< >1h/<>a/< á > a<>1h< a<>1h< a<>1h< >2h/< >2h/< >naps/< >naps/< >> >2h/<n icneted us edsed avleuH ed lecr c al ne odatse aH >naps/< ATRAM OSAC>yrogetac=ssalc naps<>2h< >2h/< ó á >naps/< > naps<>2h< naps<>2h< naps<>2h< >puorgh< >puorgh< >puorgh< >puorgh< >e c tra< >e c tra< >ellllciiiitra< >e c tra< >e c tra/< >e c tra/< >ellllciiiitra/< >e c tra/< >retoof/< >retoof/< >retoof/< >retoof/< >van/<>a/< >van/<>a/< >van/<>a/< ó > > > a<>van< >van/<>a/<yeR led n icaidem al nedip satsitrA soL>"lmth.x"=ferh a<>van< a<>van< a<>van< >retoof< >retoof< >retoof< >retoof< >p/< >p/< >p/< .'radiaH osac' le ne >p/< "sairasecen senoitseg sal" razilaer a otseupsid artseum es solraC nauJ nod euq al ne atrac anu od el ah araL oyaC >p< í >p< >p< >p< >redaeh/< >redaeh/< >redaeh/< >redaeh/< >puorgh/< >puorgh/< >puorgh/< >puorgh/< >1h/<>a/< >1h/<>a/< >1h/<>a/< > > a<> a<> >1h/<>a/< jed el on onreiboG le orep 'radiaH' osac le ne raidem osiuq yeR lE >"lmth.1n"=ferh a<>sweNtsrif=ssalc 1h< ó > a<> 1h< 1h< 1h< >2h/< >2h/< >2h< >2h/<iuarahas atsivitca al ed agleuh al aunitnoC>2h< >2h/< >2h< >2h< >puorgh< >puorgh< >puorgh< >puorgh< >redaeh< >redaeh< >redaeh< >redaeh< >e c tra< >e c tra< >ellllciiiitra< >e c tra< >1h/< >1h/< >1h/<odnuM lE ed adatroP>1h< >1h/< >1h< >1h< >1h< > > > no tces< no tces< >anigap=ssalc adatrop=di noiiiitces< no tces< Example “Diario El Mundo” as HTML5
  29. 29. © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal TELEFÓNICA I+D >erug f/< >erug f/< >erugiiiif/< >erug f/< >dd/< >dd/< >dd/< >dd/< >erp/< >erp/< >erp/< >erp/< >edoc/< >edoc/< >edoc/< >edoc/< } ; ) (t c u rt s e D fl e Sti ni di o v ;)atad >etyb;tl&ecneuqes ni(ataDdnes diov ;)(eniLataDyfirev naeloob { eroCyramirP ecafretni >edoc< >edoc< >edoc< >edoc< >erp< >erp< >erp< >erp< >dd< >dd< >dd< >dd< >td/< >td/<.noitaralced IPA ecafretni eroc yramirp ehT .4 gnitsiL>td< >td/< >td/< >td< >td< >td< > > > erug f< erug f< >"4l"=di erugiiiif< erug f< >erug f/< >erug f/< >erugiiiif/< >erug f/< >td/< >td/< >td/< >td< >td/<krow ta selbbuB>td< >td< >td< >dd/< >dd/< >dd/< >dd/< > > > gm < >"riahc eciffo sih ni gnittis ,selbbuB"=tla "gepj.krow-selbbub"=crs gmiiii< gm < gm < >dd< >dd< >dd< >dd< >erug f< >erug f< >erugiiiif< >erug f< The <dd> element child of the element represents the element's contents. — is no caption. the figure element's contents. If there is no child <dt> element, then there The <dt> element child of the element, if any, represents the caption of — to dedicated pages, or to an appendix be moved away from that primary content, e.g. to the side of the page, document, but that could, without affecting the flow of the document, listings, etc, that are referred to from the main content of the It can be used to annotate illustrations, diagrams, photos, code <figure> Element