html 5 – future of the web

By: Yousef Hatem

HTML is the basic building block for any web page

It is a standard maintained by W3CThe last version of the standard is HTML 4.01

W3C = World Wide Web Consortium, its job is to keep the Web stable, up and running

The new standard!

It is the result of collaboration between W3C and WHATWG

WHATWG = Web Hypertext Application Technology Work Group

It will take some time (actually a lot) to mature, stabilize, and spread

Yes!

It is supported by most browser vendors

In fact, most of the specification has been actually implemented!

Compatibilitythrough standardizing the solutions of modern web sites requirements

Openness and InnovationBy replacing 3rd-party plug-ins with free and open standards

SimplicityMore semantic tags, simple headers, separating content from presentation which

make developers’ life easier

Compatibilitythrough standardizing the solutions of modern web sites requirements

Openness and InnovationBy replacing 3rd-party plug-ins with free and open standards

SimplicityMore semantic tags, simple headers, separating content from presentation which

make developers’ life easier

Simpler Scripting, New Elements, New AttributesAnd some elements are deprecated as well

New JavaScript LibrariesStandardizes the common functionality needed in Web 2.0

No need for type attributes

<script src=“foo.js”>

Instead of

<script src=“foo.js” type=“text/javascript”>

Simple Character Enconding

<meta charset=“utf-8”>

Instead of

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

More Semantic Elementsno more <div> nor <span>!

HTML 4.01 Script

HTML 5 Script

More Semantic Elementsno more <div> nor <span>!

HTML 5 Script

More Semantic Elementsno more <div> nor <span>!

Source http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques

One of the most important new elementsCancels out the dependency on 3rd-party plug-ins

Plays natively from the browser

Browser vendors are increasingly supporting itOgg is supported in Firefox, Chrome, and Opera

MP4 is supported in Safari, Chrome, and Opera

During Google IO 2010, Google open-sourced VP8 in WebM project

Very simple to use

<video height=“200” width=“300” poster=“homer.png” controls><source type=“video/mp4” src=“simpsons.mp4”></source><source type=“video/ogg” src=“simpsons.ogv”></source>

</video>

Very simple to use as well

<audio autoplay loop controls><source type=“audio/ogg” src=“simpsons.mp4”></source><source type=“audio/mp3” src=“simpsons.ogv”></source>

</audio>

Some new attributes has been addedTo extend the element’s functionality, for example, adding the draggable attribute

for elements to add the dragging ability

Old forms do not suffice anymore!Old forms offers only with few types, text, radio, checkbox, password,…

Modern development needs more types, such as Email, Date, Regular Expression…There is a lot of nonstandard workarounds (for example, using JavaScript for client-side

checks to make sure the user wrote numbers only)

HTML5 is loaded with a plethora of new typesNot all browsers currently support these types

Overtime, the support will increase, specially when it becomes part of the standard

Types includedEmail URL Search

Date Color Range

Multi-file upload Regular Expressions Numberyet even more! …

These new web forms are backup-compatibleWhen being opened in an old browser, the gracefully fallback to text inputs

Example<form>

<input type=“email” name=“iEmail” required=“true”><input type=“text” pattern=“[A-Z][0-9]” name=“iReg”><input type=“number” name=“iNum” autofocus=“true”><input type=“url” name=“iURL” placeholder=“Type URL!" ><button>Submit!</button>

</form>

These APIs provide a standardization for common tasks performed in modern web development

Standardizes the common functionality needed in Web 2.0

Canvas2D drawing using

JavaScript

Persistent StorageGiant cookies to remember

user data, better user experience

Geo-locationShare you location with other

visitors, geography-based content

Web SocketsAllowing browsers to

communicate with others using Sockets instead of

HTTP

Web WorkersMaking web applications

multithreaded which boostsits performance

Server-Sent EventsStandardized streaming from

server to client

Drag and DropStandardize the drag and drop functionality, better

user experience

Video and AudioProvide native browser

support for playing video and audio

Offline Web Applications

Website is responsive even when it is offline

Provides 2D drawing into the browser using only HTML, CSS, and JavaScript

No need for 3th-party plug-ins“You can do most things with web standards today,… In some ways, you may say you

don't need Flash.” Jon von Tetzchner, Opera CEO

Supported by W3C, implemented in most browsers, and will be extended to 3D canvas using Web GL

IE stills lacking support for canvas, however, there are some hacks to workaround this

Example<canvas id=“myCanvas”></canvas>

<script>var myCanvas = document.getElementById(“myCanvas”);var context = myCanvas.getContext(“2d”);context.fillStyle = ‘rgb(255, 0, 0)’;context.fillRect(0, 0, 50, 50);

</script>

Share your location with the web application giving it your longitude and latitude

The API knows your location by searching you IP, nearby Wi-Fi hotspots, proxy servers, cell-phone tower, and dedicated GPS devices

http://www.mozilla.com/en-US/firefox/geolocation/

http://diveintohtml5.org/geolocation.html

navigator.getCurrentPosition(position_handler);

function position_handler(position){

var latitude = position.coords.latitude; var longitude = position.coords.longitude;//Do your magic with the coordinates!

}

Example

Cookies are problematic sometimes!Small in size, bundled in every request, exposed in traffic

Session storage and local storage are two new data-storage attributes

Not sent to the remote web servers, larger sizes, different life-time methods

in session storage, data remains until the tab is closed

Set a new <key,value> pair: sessionStorage.setItem(‘key’, ‘value’);Get the value: sessionStorage.key

in local storage, data remains even if the system is rebooted!

Set a new <key,value> pair: localStorage.setItem(‘key’, ‘value’);Get the value: localStorage.key

in session storage, data remains until the tab is closed

Set a new <key,value> pair: sessionStorage.setItem(‘key’, ‘value’);Get the value: sessionStorage.key

in local storage, data remains even if the system is rebooted!

Set a new <key,value> pair: localStorage.setItem(‘key’, ‘value’);Get the value: localStorage.key

getElementByClassNamereturns an array of all elements that are sharing the same class name

Editable ElementsJust add the contenteditable=“true” to make an element editable!

Yousef Hatem

Website: http://www.hyousef.comTwitter: @hyousef