HTML5, part I – markup Štěpán Developer Evangelist Microsoft, Czech Republic

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

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 

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

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

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

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

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

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

Basics of HTML5 HTML5 It is valid HTML5!

You know this HTML5 Toto je validní HTML5

HTML5 is not XML

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

Small statistics Source:

Semantics element of HTML5 Source: Introducing HTML5

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

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:

Microdata  Add more semantics to elements  Supported by search engines  Bing, Google, Yahoo  Dictionaries on  Attributes  itemscope  itemtype  itemprop  itemref  itemid

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

Forms  Input types with validation  , 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

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)

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   Animation Performance  requestAnimationFrame  Doesn’t run, when page is not visible  You will need to count “game” time

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

Resources  Books  Introducing HTML5 by Bruce Lawson & Remy Sharp  W3C  W3C HTML5 Specification –  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 –  IE Test Drive –  HTML5 Labs – html5labs.interoperabilitybridges.com/html5labs.interoperabilitybridges.com/