The new vision

of the web

January, 2012

Sergio Morcuende

@smorcuend

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!

@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

Evolution of Web (HTML5 animation)

@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  

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

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

<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

HTML5. The new vision of the Web

By Sergio Morcuende

Made with Slides.com

HTML5. The new vision of the Web

Analysis of the evolution that "the Web" is suffering with HTML5 as a standard in the future. January 2012

  • 536

More from Sergio Morcuende