Your SlideShare is downloading. ×
0
HTML5 (Štěpán Bechynský)
HTML5 (Štěpán Bechynský)
HTML5 (Štěpán Bechynský)
HTML5 (Štěpán Bechynský)
HTML5 (Štěpán Bechynský)
HTML5 (Štěpán Bechynský)
HTML5 (Štěpán Bechynský)
HTML5 (Štěpán Bechynský)
HTML5 (Štěpán Bechynský)
HTML5 (Štěpán Bechynský)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 (Štěpán Bechynský)

1,637

Published on

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 …

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,637
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • http://lists.w3.org/Archives/Public/public-html/2011May/0162.html
  • 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
  • Show Dictionaries on http://www.schema.org/
  • http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
  • Transcript

    • 1. HTML5– Semantics<br />Štěpán Bechynský, @stepanb<br />Developer Evangelist<br />Microsoft, Czech Republic<br />
    • 2. What is HTML5?<br />HTML5 is future of the web development<br />HTML5 is future platform for some consumer applications<br />HTML5 is future platform for connected devices (smartphones, tablets)<br />Web Performance Working Group<br />HTML5 is multiplatform<br />HTML5 is markup or set of more technologies<br />HTML5 is not final <br />HTML5 Markup Last Call started on 24th of May 2011<br />http://lists.w3.org/Archives/Public/public-html/2011May/0162.html<br />
    • 3. Back to roots<br />Current semantics elements<br /><h1>, <h2>, <strong>, …<br />But what is <div>? <br />Source: Introducing HTML5<br />
    • 4. Small statistics<br />Source: http://devfiles.myopera.com/articles/572/idlist-url.htm<br />
    • 5. Semantics element of HTML5<br />Source: Introducing HTML5<br />
    • 6. Selection of HTML5 semantics elements<br />section<br />nav<br />article<br />aside<br />hgroup<br />header<br />footer<br />figure<br />figcaption<br />mark<br />
    • 7. Thearticle element<br />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.<br />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.<br />Zdroj: http://dev.w3.org/html5/spec/sections.html#the-article-element<br />
    • 8. Microdata<br />Add more semantics to elements<br />Supported by search engines<br />Bing, Google, Yahoo<br />Dictionaries on http://www.schema.org/<br />Attributes<br />itemscope<br />itemtype<br />itemprop<br />itemref<br />itemid<br />
    • 9. Custom data attributes<br />Custom data typically used by application<br />Syntax: data-my-key<br />Example of usages – jQuery Mobile<br /><div data-role="page"><br /> <div data-role="content"><br /> …<br /> </div><br /></div><br />
    • 10. HTML5.cz<br />Shromažďuje české zdroje<br />Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“<br />

    ×