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.

References