Chcete vědět víc? Mnoho dalších prezentací, videí z konferencí, fotografií i jiných dokumentů je k dispozici v institucionálním repozitáři NTK: http://repozitar.techlib.cz
Would you like to know more? Find presentations, reports, conference videos, photos and much more in our institutional repository at: http://repozitar.techlib.cz/?ln=en
2. 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
3. Back to roots Current semantics elements <h1>, <h2>, <strong>, … But what is <div>? Source: Introducing HTML5
6. Selection of HTML5 semantics elements section nav article aside hgroup header footer figure figcaption mark
7. 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
8. 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
9. 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>
Open en.wikipedia.orgShowstructureofmainpageOpen facebook.comShowstructureofmainpageOpen twitter.comShowstructureofmainpage – itisHTML5oreilly.comShowstructureofmainpageThere are repeatedidslikecontent, page, footer,…
Itcanbe very usefullforscreenreaders
Every element has descriptionhow-to use it.
Open http://dev.w3.org/html5/spec/sections.htmlShow specificationforeach elementDemoOpenWebmatrixCreatenewsitefromtemplate – StarterSiteOpen it in Visual Studio 2010 SP1 with ASP.NET Web Pages supportAddsemanticselementsAddpicturewithfigure and figcaptionDisputeaboutit, specialheader and nav on the top