Your SlideShare is downloading. ×
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,596
views

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,596
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
      Štěpán Bechynský, @stepanb
      Developer Evangelist
      Microsoft, Czech Republic
    • 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
    • 4. Small statistics
      Source: http://devfiles.myopera.com/articles/572/idlist-url.htm
    • 5. Semantics element of HTML5
      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>
    • 10. HTML5.cz
      Shromažďuje české zdroje
      Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“