Presented By: Mahmoud Ghoz

Internet Explorer 9 and HTML5 for Developers

About Me

• My name is Mahmoud Ghoz• My Current Position is Project Leader at ITWorx• MCPD (Distributed Systems) and MCT• Community activity– Co-founder for Agile Egypt A.K.A. ASGE– Co-founder for MS3arab–My Blog Ghoz.NET –My DL is ECSharp@yahoogroups.com

• Project under construction–Bel3arabi

Agenda

• What do we mean by HTML 5?• HTML 5 History• HTML 5 new tags

What do we mean by HTML 5?

Add all new web technology into a box labeled HTML 5

Web Forms 2.0 XMLHttp-Request (XHR)

SVG (Scalable Vector Graphics) 6 years old.

HTML 5

History

• It will help you understand why some aspects of HTML5 are as they are.

• And hopefully pre-empt some of those “EIH? Why did they design it like that?” moments

History

• In 1998, the W3C decided that they would not continue to evolve HTML.

• HTML was frozen at version 4.01.• WHATWG (Web Hypertext Application

Technology Working Group) see otherwise.• WHATWG is working since 2004.• In 2006 the W3C decided that they had perhaps

been over-optimistic in expecting the world to move to XML.

History

• The W3C voted to use the WHATWG’s Web Applications spec as the basis for the new version of HTML.

Main Aims

• Specifying current browser behaviors that are interoperable.

• Defining error handling for the first time.

Main Aims

• Evolving the language for easier authoring of web applications.–DOM APIs for drag and drop– Server-sent events–Drawing–Video

Demo 1

Simple HTML 5 Page

Demo 2

HTML 5 can help you with wrong syntax

Demo 3

Let’s See what HTML 5 Can do

Demo 3

Demo 4

The new in the <a> tag

Demo 5

<ol start=5>

New Keywords

• embed• KeyGen• Progress

Forms

• <input type=email>• <input type=url>• <input type=date>• <input type=time>• <input type=month> • <input type=tel>

Forms

• <input type=email required> • <input type=email multiple> • <input pattern=“[0-9][A-Z]{3}”>

Forms

NO JAVA SCRIPT REQUIRED

Multimedia

No need for plugin to play video and audioHTML 5 will do it for you

Demo 6

Play my ogv file

Canvas

• 2D drawing• 3D drawing• Playing with pictures• Animate objects

Demo 7

http://www.openrise.com/lab/FlowerPower/

Demo 8

http://htmlchess.sourceforge.net/demo/example.html

Things not covered

• Data storage–Web storage–Web SQL database

• Offline• Drag and Drop• Geolocation• Messages, worker and sockets

Questions

?

Thank You