Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply



Published on

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Document the undocumentedUnambiguously define how browsers and other user agents should deal with invalid markup.
  • <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
  • Open developer tool
  • In 2004, the editor of the HTML5 spec, Ian Hickson, mined 1 billion web pages via the Google index, looking to see what the “real” web is made of. One of the analyses he subsequentlypublished ( was a list of the most popular class names in those HTML documents. More recently, in 2009 the Opera MAMA crawler (see looked againat class attributes in 2,148,723 randomly chosen URLs and alsoids given to elements (which the Google dataset didn’t include) in 1,806,424 URLs.
  • Embed: is used to embed plugin … HTML 5 supposed to replace all the plugin but not over nightKeyGen: where you form need to send a public KeyProgress: is used to represent a progress meter to indicate the completion of a task
  • There is no standard how every browser will render the controlsBrowser now is responsible to validate the input
  • Attribute:Required:We also have required attribute to mark this field as mandatory. Multiple: allows the user to enter multiple email addresses.Pattern: custom validate, A part number is a digit followed by three uppercase letters.
  • Let’s Play Game
  • Let’s Play Game
  • Let’s Play Game
  • Let’s Play Game
  • Geolocation: W3C, not HTML5, API that works with maps, mobile phones can locate you on the mapMessages: allow you to send message from one domain to anotherWeb workers: Threads, is a way of running a discrete block of JavaScript in a background process to the main browser.Web Sockets: is not HTML 5, -Comet- Web Sockets give you a bi-directional connection between your server and the client, the browser. This connection is also real-time and is permanently open until explicitly closed. This means that when the server wants to send your client something, that message is pushed to your browser immediately.
  • HTML5 is a good fit; HTML is human readable, and there are over ten million web developers (compared to much fewer native and plug-in developers).
  • HTML5 is a good fit; with HTML web-based mobile applications, your application consistently displays across mobile web browsers, including future devices.
  • HTML5 is a good fit; with HTML web-based mobile applications, you don’t even need the approval of a app store to reach your audience.
  • Transcript

    • 1. Internet Explorer 9 and HTML5 for DevelopersPresented By: Mahmoud Ghoz
    • 2. About Me• My name is Mahmoud Ghoz• My Current Position is Project Leader at ITWorx• Cofounder for Qhat.NET• MCPD (Distributed Systems) and MCT
    • 3. Agenda• What do we mean by HTML 5?• HTML 5 History• HTML 5 new tags
    • 4. What do we mean by HTML 5?Add all new web technology into a box labeledHTML 5 SVG (Scalable Vector Graphics) 6 years old. Web Forms 2.0 XMLHttp-Request (XHR) HTML 5
    • 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
    • 6. 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.
    • 7. History• The W3C voted to use the WHATWG’s Web Applications spec as the basis for the new version of HTML.
    • 8. Main Aims• Specifying current browser behaviors that are interoperable.• Defining error handling for the first time.
    • 9. Main Aims• Evolving the language for easier authoring of web applications. – DOM APIs for drag and drop – Server-sent events – Drawing – Video
    • 10. Demo 1Simple HTML 5 Page
    • 11. Demo 2HTML 5 can help you with wrong syntax
    • 12. Demo 3Let’s See what HTML 5 Can do
    • 13. Demo 3
    • 14. Demo 4The new in the <a> tag
    • 15. Demo 5<ol start=5>
    • 16. New Keywords• embed• KeyGen• Progress
    • 17. Forms• <input type=email>• <input type=url>• <input type=date>• <input type=time>• <input type=month>• <input type=tel>
    • 18. Forms• <input type=email required>• <input type=email multiple>• <input pattern=“[0-9][A-Z]{3}”>
    • 20. MultimediaNo need for plugin to play video and audio HTML 5 will do it for you
    • 21. Demo 6Play my ogv file
    • 22. Canvas• 2D drawing• 3D drawing• Playing with pictures• Animate objects
    • 23. Demo 7Canvas
    • 24. Demo 8Canvas 3D
    • 25. Demo 9local storage
    • 26. Demo 10Session storage
    • 27. Demo 11Drag and Drop
    • 28. Things not covered• Offline• Geolocation• Messages, worker and sockets
    • 29. Is HTML5 Right for You?Are you planning to develop an application with limited resources?
    • 30. Is HTML5 Right for You?Are you planning to reach your audience on the go with devices such as smartphones and tablets?
    • 31. Is HTML5 Right for You?Are you looking to reach mobile audiences, butwithout having to go through mobile app store ecosystems?
    • 32. Questions
    • 33. Thank You