Download presentation
Presentation is loading. Please wait.
Published byJaida Tarte Modified over 10 years ago
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/
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.