1 / 22

HTML5, part I – markup

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

don
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ý 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) • HTML5 is multiplatform • HTML5 is markup or set of more technologies • HTML5 is not final • Last Call starts on 24th of May 2011

  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 • IETF • 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. Philosophy of HTML5 • Back to roots of HTML • HTML should describe content of document • It must be closer to industry needs • Not breaking the Web • Specification describes how-to create DOM from non-valid HTML5 document

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

  10. You know this <!doctype html> <html lang=cs> <head> <meta charset=utf-8> <title>HTML5</title> </head> <body> <p>Thisis valid HTML5</p> </body> </html>

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

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

  13. Small statistic Source: http://devfiles.myopera.com/articles/572/idlist-url.htm

  14. Semantics element of HTML5 Source: Introducing HTML5

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

  16. 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. Zdroj: http://dev.w3.org/html5/spec/sections.html#the-article-element

  17. Multimedia • Element audio • AAC, MP3 • Element video • H.264 (industry standard) • WebM (forced by Google) • OggVorbis (forced by Opera) • Preloadattribute • none • metadata • auto <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>

  18. Implementation issues

  19. Graphicsusing <canvas> • Element canvas • 2D Graphics • 3D Graphics • Is Not part of W3C recommendation • WebGL by Independent group Khronos • Securityproblems • http://www.contextis.co.uk/resources/blog/webgl/ • Draw using Javascript • Result is bitmap

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