1. HTML5, part I – markup Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic

2. 57% of time on a PC is spent in the web browser

4. What is HTML5?  HTML5 is future of the web development  HTML5 is future platform for some consumer applications  HTML5 is future platform for connected devices (smartphones, tablets)  Web Performance Working Group  HTML5 is multiplatform  HTML5 is markup or set of more technologies  HTML5 is not final  HTML5 Markup Last Call started on 24 th of May 2011  http://lists.w3.org/Archives/Public/public-html/2011May/0162.html

5. History  1998 – W3C, future is XML, HTML 4.01 is last version  XHTML 2.0  Problems with backward compatibility  Web Hypertext Application Technology Working Group  Individuals from Opera, Apple, Google  Unhappy with XHTML  Web Forms 2.0  Web Applications 1.0  2006 – W3C, XHTML: We were overoptimistic…  2009 – W3C stopped working on XHTML and move resources to HTML5

6. Who is working on HTML5?  W3C  ECMA  WHATWG  Khronos

7. W3C HTML Working Group  Head  Sam Ruby (IBM)  Paul Cotton (Microsoft)  Maciej Stachowiak (Apple)  40 companies, 411 coworkers, 280 experts  8 publications  HTML5  HTML Canvas 2D Context  HTML: The Markup  HTML5 diffs from HTML4  Polyglot Markup  Recommendations are for free

8. Status of HTML5 First Public Working Draft Working Draft Last Call Candidate Recomme ndation Recomme ndation

9. HTML5 is not finished!  Web Browser vendors use vendor prefixes for unstable parts of specification  CSS  -moz-*  -webkit-*  -ms-*  -o-*  Javascript  ms  moz  webkit

10. Philosophy of HTML5  HTML describes only structure of document  It must be closer to industry needs  Not breaking the Web  Specification describes how-to create DOM from non-valid HTML5 docume nt

11. Basics of HTML5 HTML5 It is valid HTML5!

12. You know this HTML5 Toto je validní HTML5

13. HTML5 is not XML

14. Back to roots  Current semantics elements ,,, …  But what is ? Source: Introducing HTML5

15. Small statistics Source: http://devfiles.myopera.com/articles/572/idlist-url.htm

16. Semantics element of HTML5 Source: Introducing HTML5

17. Selection of HTML5 semantics elements  section  nav  article  aside  hgroup  header  footer  figure  figcaption  mark

18. The article element  The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.  When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry. Source: http://dev.w3.org/html5/spec/sections.html#the-article-element

19. Microdata  Add more semantics to elements  Supported by search engines  Bing, Google, Yahoo  Dictionaries on http://www.schema.org/http://www.schema.org/  Attributes  itemscope  itemtype  itemprop  itemref  itemid

20. Custom data attributes  Custom data typically used by application  Syntax: data-my-key  Example of usages – jQuery Mobile …

21. Forms  Input types with validation  Email, url, number, tel, search  Attributes for better control of input  Required, Placeholder, Pattern, Autofocus, Min, Max, Step, Multiple, List  Psedoclasses for CSS rules  :valid/:invalid, :required/:optional  Event invalid  Event property validity

22. Multimedia  Box element  You can use CSS  Element audio  AAC, MP3  Ogg Vorbis  Element video  H.264 (industry standard)  WebM (forced by Google)  Ogg Theora (forced by Opera)

23. Graphics using  2D Graphics  Element canvas  Draw using Javascript  Result is bitmap  3D Graphics  Is Not part of W3C recommendation  WebGL by Independent group Khronos  Security issues  http://www.contextis.co.uk/resources/blog/webgl/ http://www.contextis.co.uk/resources/blog/webgl/  Animation Performance  requestAnimationFrame  Doesn’t run, when page is not visible  You will need to count “game” time

24. HTML5.cz  Shromažďuje české zdroje  Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“

25. Resources  Books  Introducing HTML5 by Bruce Lawson & Remy Sharp  W3C  W3C HTML5 Specification – www.w3.org/TR/html5www.w3.org/TR/html5  HTML5 Test Suite – test.w3.org/html/tests/reporting/report.htmtest.w3.org/html/tests/reporting/report.htm  Validator – validator.w3.org/validator.w3.org/  Microsoft Internet Explorer 9 and 10  Engineering Blog – blogs.msdn.com/ie/blogs.msdn.com/ie/  Beauty Of The Web – www.beautyoftheweb.com/experience/www.beautyoftheweb.com/experience/  IE Test Drive – www.ietestdrive.comwww.ietestdrive.com  HTML5 Labs – html5labs.interoperabilitybridges.com/html5labs.interoperabilitybridges.com/