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

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.
  • Html5

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