What is HTML5?

HTML5 will be the new standard for HTML.

The previous version of HTML, HTML 4.01, came in 1999.

HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

How Did HTML5 Get Started?

HTML5 is a cooperation between the W3C and the WHATWG.

W3C - World Wide Web Consortium

WHATWG - Web Hypertext Application Technology Working Group

How Did HTML5 Get Started?

• May 1994  HTML+ Released , first version to be used by WWW

• July 1994  HTML2 Released , first standard doctype defined

• November 1994  Netscape comes to Life, WWW consortium formed

• March 1995  HTML 3 Released

• November 1997  HTML Version 3.2 released

• November 1998  HTML4, the longest Running version Released

• April 2010  HTML5 enters mainstream , to be in active development till 2014

Some rules for HTML5

• New features should be based on HTML, CSS, DOM, and JavaScript
• Reduce the need for external plugins (like Flash)
• Better error handling
• More markup to replace scripting
• HTML5 should be device independent
• The development process should be visible to the public

Minimum HTML5 Document

HTML5 New Features

• The <canvas> element for 2D drawing
• The <video> and <audio> elements for media playback
• Support for local storage
• New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
• New form controls, like calendar, date, time, email, url, search

HTML5 - Multimedia & Graphics!

Let's be honest, everyone likes lasers, 3D effects, and explosions.

Let's Explore!

Do wonders with HTML5

• With HTML5, the browser has become a full-fledged platform for games, animation, movies—anything graphical.
• Lighting and shadows, reflections, and rich textures result in realistic compositions.
• 3D CSS, vector graphics (canvas and SVG), and WebGL turbocharge web apps with amazing 3D graphics and special effects.
• Rich audio APIs and low-latency networking of WebSockets—together with the graphical APIs and technologies.

HTML5 - Offline And Storage!

Offline web?! Not an oxymoron anymore.

Let's Explore!

Disconnected? No issues at all !

• HTML5 APIs that let you create apps that work even when they’re not connected.
• Application cache, localStorage, sessionStorage, IndexedDB, File System and online and offline events enable apps to “amphibiously” work with or without online connection.
• Users can even download large files (greater than 1 GB) in full or in part for later offline viewing..
• Rich audio APIs and low-latency networking of WebSockets—together with the graphical APIs and technologies.

HTML5 Features - Offline

HTML5 and related specs introduce a number of features to make offline web apps a reality:

• application cache
• localStorage
• web SQL & indexed database
• online/offline events

Let's Explore!

HTML5 Features - Storage

When web developers think of storing anything about the user, they immediately think of uploading to the server.

• Make your app work when the user is offline
• It's a performance booster
• It's an easier programming model, with no server infrastructure required

Let's Explore!

Offline Technologies:

• Web Storage: simply provides a key-value mapping, e.g. localStorage["name"] = username;.
• Web SQL Database: gives you all the power - and effort - of a structured SQL relational database.
• Indexed Database: is somewhere in between Web Storage and Web SQL Database.
• File Access: s an API for reading file content in JavaScript.

Web storage example

Click the button to see the counter increase.

PERFORMANCE

Performance: Interesting!

• HTML5 enables web apps to be more responsive
• Offline APIs are not just for storing files locally, they can also improve performance.
• You can cache pages that users are likely to click.
• Web Workers - lets you run multiple processes in the background.
• Open-sourced JavaScript interpreter for Google Chrome—runs faster than Python.

Performance - Themes

EASIER DEVELOPMENT

...Because we’d rather play games than rewrite that app for yet another device.

Easier Development

• Code Portability
  • Enter HTML5. It simplifies your development cycle by letting you use the same technology stack across multiple platforms and devices.
• Single Sourcing-ish
  • With HTML5, you can have a single technology stack that you fine-tune for different browsers. You don’t have to rewrite things from scratch, port anything, or maintain entirely separate code bases for each device you support.
• Approachability
  • HTML5 technologies—JavaScript, CSS, and HTML—are easier to learn for some developers.

REACH

BROAD REACH

No other platform can match the user base of HTML5.

• Connect with users wherever they are by creating HTML5 apps that can be deployed across multiple platforms and a wide range of devices.
• Whether you are running an enterprise, creating games, or developing personal apps
• HTML5 is broadly supported on all modern desktop browsers and major mobile devices

SECURITY

Yes, you are safe! No more pirates :)

Security

• Better Security Design for HTML5 APIs.
• More Secure Browsers
  • Sandboxing
  • Multi-Process Architecture
  • Developments in HTTP
  • Security Policies
• Safer Web Apps

LOWER COSTS

LOWER COSTS AND EASIER MAINTENANCE

• Lower Overhead
  • While desktop apps must be installed separately on each computer, web apps are just one click away.
• Better User Experience.
  • Users are assured that their apps are always up to date.
• Device Agnosticism.
  • Users can just open the browser on another device and instantly access core apps and critical data.
• Enterprise Solution.
  • Having one code base for multiple devices, the ease of simultaneous deployment and upgrade, simplified data migration and backup make HTML5 an excellent platform for businesses.

LOCAL FILE ACCESS

The internet and the local file system, together at last!

Local File Access

• SANDBOXING - Web apps can create, read, navigate, and write to a sandboxed section of the user's local file system.
• HTML5 provides very powerful APIs to interact with binary data and a user's local file system.
• HTML5 is broadly supported on all modern desktop browsers and major mobile devices

PRESENTATION

Presentation

• You can create visual enhancements like rounded corners, gradients, and shadows.
• Presentation can all be done with only CSS3 and not a single lick of JavaScript
• CSS3 Transformations allow you to apply rotations, scales, skews and translations to any DOM element with simple styles.
• Applying 3D transforms is simple too.

Thank you!

• Keep in Touch: www.facebook.com/iwillstudy


• Join our Study-Group: http://www.iwillstudy.com/group/html5