HTML5
What is New in HTML 5
New Elements
The <canvas> element for 2D drawing
The <video> and <audio> elements for media playback
New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
New form controls, like calendar, date, time, email, url, search
Video and Audio
Until now, there has not been a standard for showing a video/movie on a web page.Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.
The HTML5 <video> element also has methods, properties, and events.
There are methods for playing, pausing, and loading, for example. There are properties (e.g. duration, volume, seeking) that you can read or set.
There are also DOM events that can notify you, for example, when the <video> element begins to play, is paused, is ended, etc.
2D/3D Graphics
<canvas>
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics, you must use a script to actually draw the graphics.
A canvas is a drawable region defined in HTML code with height and width attributes.
Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
SVG
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated
SVG is a W3C recommendation
SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable (and the image can be zoomed without degradation)
Canvas and SVG
Canvas
Resolution dependent
No support for event handlers
Poor text rendering capabilities
You can save the resulting image as .png or .jpg
Best suited for graphic-intensive games where many objects are redrawn frequently
SVG
Resolution independent
Support for event handlers
Best suited for applications with large rendering areas (Google Maps)
Slow rendering if complex (anything that uses the DOM a lot will be slow)
Not suited for game applications
Local Storage
With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for.
It is also possible to store large amounts of data, without affecting the website's performance
There are two new objects for storing data on the client:
localStorage - stores data with no expiration date
sessionStorage - stores data for one session The data is stored in key/value pairs, and a web page can only access data stored by itself.
Web Applications
Application Cache
With HTML5 it is easy to make an offline version of a web application, by creating a cache manifest file.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server
Web Worker (Async Support)
When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
Web workers are supported in all major browsers, except Internet Explorer.
Server-Sent Events
A server-sent event is when a web page automatically gets updates from a server. This was also possible before, but the web page would have to ask if any updates were available.
With server-sent events, the updates come automatically. Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.
Drag and Drop
In HTML5, drag and drop is part of the standard, and any element can be draggable.
Geo Location
The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.
Geolocation is much more accurate for devices with GPS, like iPhone.
Full CSS3 Support
Primary focuns of CSS3 is Graphics. Key features are below
New Selectors
New Properties
Animations
2D/3D Transformations
Rounded Corners
Shadow Effects
Downloadable Fonts
Local SQL Database
An API for storing data in databases that can be queried using a variant of SQL.
Local file access
An API for representing file objects in web applications, as well as programmatically selecting them and accessing their data.
XHTMLHttpRequest 2
The XMLHttpRequest specification defines an API that provides scripted client functionality for transferring data between a client and a server.