1 / 25

HTML5, part I – markup

HTML5, part I – markup. Štěpán Bechynský , @ stepanb. 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

garth
Download Presentation

HTML5, part I – markup

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  3. 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 24th of May 2011 • http://lists.w3.org/Archives/Public/public-html/2011May/0162.html

  4. 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

  5. Who is working on HTML5? • W3C • ECMA • WHATWG • Khronos

  6. W3C HTML Working Group • Head • Sam Ruby (IBM) • Paul Cotton (Microsoft) • MaciejStachowiak (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

  7. StatusofHTML5 First Public Working Draft Working Draft Last Call Candidate Recommendation Recommendation

  8. HTML5 is not finished! • Web Browser vendors use vendor prefixes for unstableparts of specification • CSS • -moz-* • -webkit-* • -ms-* • -o-* • Javascript • ms • moz • webkit

  9. 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 document

  10. Basics of HTML5 <!doctype html> <meta charset=utf-8> <title>HTML5</title> <p>It is valid HTML5!</p>

  11. You know this <!doctype html> <html lang=cs> <head> <meta charset=utf-8> <title>HTML5</title> </head> <body> <p>Toto je validní HTML5</p> </body> </html>

  12. HTML5 is not XML <META CHARSET=UTF-8> <META CHARSET=UTF-8 /> <META CHARSET=”UTF-8”> <META CHARSET=”UTF-8” /> <meta charset=utf-8> <meta charset=utf-8 /> <meta charset=”utf-8”> <meta charset=”utf-8” /> <MeTaCHARset=utF-8>

  13. Back to roots • Current semantics elements • <h1>, <h2>, <strong>, … • But what is <div>? Source: Introducing HTML5

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

  15. Semantics element of HTML5 Source: Introducing HTML5

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

  17. Thearticle 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

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

  19. Custom data attributes • Custom data typically used by application • Syntax: data-my-key • Example of usages – jQuery Mobile <div data-role="page"> <div data-role="content"> … </div> </div>

  20. 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

  21. Multimedia • Box element • Youcan use CSS • Element audio • AAC, MP3 • Ogg Vorbis • Element video • H.264 (industry standard) • WebM (forced by Google) • OggTheora (forced by Opera) <video width="400" height="300" poster="frame.png" autoplay controls loop><sourcesrc="video.ogv" type='video/ogg; codecs="theora,vorbis"'><sourcesrc="video.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'></video>

  22. Graphicsusing <canvas> • 2D Graphics • Element canvas • Draw using Javascript • Result is bitmap • 3D Graphics • Is Not part of W3C recommendation • WebGL by Independent group Khronos • Securityissues • 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

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

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

More Related