Back then?

The 3 browsers
IE6, IE7 and IE8

Mobile devices and hence mobile web did not exist

WWW = Web Sites && (! Web Applications)

Flash and Java were the last resorts

but, the FUTURE is exciting

EvolutionOfTheWeb

www.flickr.com/photos/25797459@N06/5438799763/

What is HTML5?








HTML5 = HTML + CSS3 + Javascript

What does that mean?

  • Some new tags, semantic markup and deprecated tags
  • Some new properties
  • Some new APIs to add to the awesomeness!

Semantics

New semantic markup



  • <article>
  • <main>
  • <section>
  • <aside>
  • <meter>
  • <footer>
  • <nav>
  • <figure>

  • and more...

Some deprecated tags

  • <acronym>

  • <basefont>

  • <applet>

  • <center>

  • <font>

  • <frameset>

  • and more...

CSS3

New properties




  • border-radius

  • box-shadow

  • text-shadow

  • transition

  • filters

  • and more...

Media Queries

Offline Storage

Before HTML5




  • Cookies

  • Flash Storage

  • Internet Explorer UserData

  • Google Gears

  • Dojo Storage

Local Storage

Status
No key-value pair written yet
Enter Key
Enter Value

window.localStorage




  • Key / value pairs - hash table
  • Default 5MB storage prompted for more
  • Persistent on page reloads and browser shutdown
  • Avoids HTTP overhead of cookies
  • Great for storing user preferences

How does this work!

          localStorage.setItem('someKey', someValue);
          localStorage.getItem('someKey'); // value

          // Can also access as a property.
          localStorage.someKey = someValue;

Session Storage

Status
No key-value pair written yet
Enter Key
Enter Value

window.sessionStorage




Same as localStorage but...
  • Lasts as long as browser is open
  • Opening page in new window or tab starts new session
  • Great for sensitive data (e.g. banking sessions)

Other Alternatives




  • Application Cache

  • File API

  • IndexedDB

Application Cache




  • Caches entire web app locally!
  • Why?
    • HTML, CSS, and JS stay fairly consistent
    • Native browser caching is unreliable
    • Caching resources creates speedier apps!
Used by iPhone & Android GMail app

window.indexedDB




  • Best of localStorage/sessionStorage and Web SQL DB:
  • Object based data store
  • Asynchronous & Synchronous API for browser and web workers

Device Access

Connectivity

Connectivity

Multimedia

Multimedia



  • Audio

  • Video

Audio tag

                <audio width="320" height="240" controls="controls">

                    <source src="audio/movie.mp4" type="audio/mp4"/>

                    <source src="audio/movie.ogg" type="audio/ogg" />

                    Your browser does not support the audio tag.

                </audio>

Video tag

              <video width="320" height="240" controls="controls">

                  <source src="video/movie.mp4" type="video/mp4"/>

                  <source src="video/movie.ogg" type="video/ogg" />

                  Your browser does not support the video tag.

              </video>

Graphics

Graphics

Canvas

Performance

Performance

The Web Can Do Amazing Things...

  • Make Web apps Sexy!
  • Work offline
  • Dynamic CSS
  • Access Native Hardware
  • Stream Multimedia

Go Deeper into #WWW

<Thank You!>

Feel free to contact me!