The new vision
of the web
Contents
- History of HTML5
- HTML5 vs HTML4/XHTML
- Strengths of HTML5
- Web Techs in HTML5
- HTML5 vs Native Apps for Mobiles Devices
- Future of HTML5
@smorcuend
History of HTML5
-
[1990s]
The HTML Technology and Internet evolve hand in hand. HTML 1->2->3->4.- Tim Berners-Lee found The W3C in late 1994.
- Time of War, Netscape vs IE!!. W3C promotes HTML4 recomendation -> HTML4.01 (1999).
- Meanwhile, emerge derivate technologies as Javascript, XML, CSS, XHR, PHP, ... that improved the "user experience".
@smorcuend
History of HTML5
- [2000] W3C abandons HTML4.01 in favor of XHTML 1.0 Recomendation, but it fail to riper.
- [2003] It was born Firefox from Mozilla Foundation. Flash, AJAX, ASP,... begins to take important (RIA).
-
[2004] Opera and Mozilla propouse an extension of HTML4.01 ...W3C says NO!.
- Apple, Mozilla and Opera starts up the WHATWG.
HTML5 is being born!
- Apple, Mozilla and Opera starts up the WHATWG.
@smorcuend
Meanwhile...., Where is IE?
@smorcuend
History of HTML5
History of HTML5
-
[2007]
W3C acknowledges the work of WHATWG. W3C creates HTMLWG and drops XHTML2. -
[2008]
Google create Chrome as an alternative to IE and it begin setbacks.- The first draft of HTML5 is published.
-
[2010]
In 2010 MS announce IE9 and begin support HTML5. -
[2012]
HTML5 -> Candidate Recommendation in 2012??
@smorcuend
@smorcuend
Strengths of HTML5
- Although HTML5 is not standard, the main browsers already support many features.
- Designed to enrich the semantic content of documents. For seekers and spiders is more simple and fast index contents and parse code.
- Posibility of backwards compatibility and dynamic adaption to the browser (Modernizr.js).
- Open standards based: Video, audio, SVG, MathML, JS libraries, ...
- More support for modern Application Web. "Web as Platform" Paradigm.
@smorcuend
@smorcuend
Strengths of HTML5
- The web platform is changed quickly
@smorcuend
- Combined with new JS libraries and CSS3 is very powerfull.
Strengths of HTML5
@smorcuend
HTML5 vs HTML4/XHTML
| HTML4 | HTML5 |
|---|---|
|
Not semantic content in diferents deprecated tags and elements. |
More util tags and overcoat attributes |
| Not handle error parsing | More support for parsing rules |
| CSS2 |
CSS3. HTML5 requiers less JS code for release the same effects |
| Not Multimedia support |
New tags for multimedia elements |
| Not Vector Graphics native support | Canvas, SVG, MathML, ..., is integral part of HTML5 |
| Not support |
New JS APIs support |
HTML5 vs HTML4/XHTML
@smorcuend
HTML5 vs HTML4/XHTML
@smorcuend
Web Techs in HTML5
@smorcuend
Connectivity
CSS3
Device Access
Multimedia
Graphics
Performance & Integration
Offline / Storage
Semantics & Markup
Web Techs in HTML5
@smorcuend
Semantics & Markup
<body>
<header>
<hgroup>
<h1>Page title</h1>
<h2>Page subtitle</h2>
</hgroup>
</header>
<nav>
<ul>
Navigation...
</ul>
</nav>
<section>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
</section>
<aside>
Top links...
</aside>
<figure>
<img src="..."/>
<figcaption>Chart 1.1</figcaption>
</figure>
<footer>
Copyright ©
<time datetime="2010-11-08">2010</time>.
</footer>
</body>Web Techs in HTML5
@smorcuend
- HTML5 element index (html5doctor)
- Example of progress bar and meter (CSSTricks)
- Example of HTML5 Form with native validation
- Example of Microdata
<div itemscope itemtype="http://example.org/band">
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>Semantics & Markup
Web Techs in HTML5
@smorcuend
CSS3
Web Techs in HTML5
@smorcuend
CSS3 (More examples)
Web Techs in HTML5
@smorcuend
Multimedia
Audio
Video
-
But...don't exist audio/video standard format!!
- OGA / OGV (OGG-Vorbis/Theora) : Open Source.
- MP3,AAC / H.264 (MPEGLA) : Apple (MP4).
- OGG-Vorbis / WebM(VP8) : Google.
@smorcuend
@smorcuend