Embed Size (px)
DESCRIPTION
Learn how developers can use the latest HTML5 & microdata specs to code semantic web pages, helping define the meaning of web page content. How can you help the realize Tim Berners-Lee's vision of the semantic web? Developers now separate web page content (HTML) from presentation (CSS). This talk will discuss the evolving HTML5 and microdata specs, and show sample code using new elements and attributes in blog and commerce web pages.
Citation preview
SEMANTIC HTML 5David Kelleher NEPHP 2013 www.davidk.net
David Kelleherhttp://www.davidk.nethttp://joind.in/8913
Semantics
Semantics
What does it mean?
<body>41-76-61-74-61-72-20-52-6f-67-65-72-20-45-62-65-72-74-20-44-65-63-65-6d-62-65-72-20-31-31-2c-20-32-30-30-39-20-57-61-74-63-68-69-6e-67-20-5c-22-41-76-61-74-61-72-2c-5c-22-20-49-20-66-65-6c-74-20-73-6f-72-74-20-6f-66-20-74-68-65-20-73-61-6d-65-20-61-73-20-77-68-65-6e-20-49-20-73-61-77-20-5c-22-53-74-61-72-20-57-61-72-73-5c-22-20-69-6e-20-31-39-37-37-2e</body>
What does it mean?
What does it mean?
<body>АватараРоджер Эберт11 декабря 2009Смотря «Аватар», я чувствовал видом того же самого, когда я увидел "Звездные войны" в 1977 году.</body>
What does it mean?
What does it mean?
<div><div>Аватара</div><div>Роджер Эберт</div><div>11 декабря 2009</div></div><div>Смотря<span>«Аватар»</span>, я чувствовал видом того же самого, когда я увидел " <span>Звездные <div>войны</div></span> "в 1977 году. </div>
What does it mean?
Mark this up to convey meaning:
Semantic Tags, IDs, Class Names
<div id=“filmreview”> <div id=“author”> <h1>Аватара</h1> <div id=“byline”>Роджер Эберт</div> <div id=“date”>11 декабря 2009</div> </div> <p class=“review”>Смотря «Аватар», я чувствовал видом того же самого, когда я увидел "Звездные войны" в 1977 году.</p></div>
Semantic HTML5
Sectioning Elements
<body> <header> <h1>..</h1> <nav>...</nav> </header> <section> <article>...</article> <aside>..</aside> </section> <footer> <address>...</address> </footer></body>
Semantic HTML5
Content Grouping Elements
<p>Paragraph</p><ul> <li>List Item #1</li> <li>List Item #2</li></ul>
Also ordered list, description list, blockquote, figure
Use to group content within a section They create line breaks by default in display
Semantic HTML5
Text-Level Elements
<strong>important</strong><b>keyword</b> or <b>article lead</b><em>emphasized</em><cite>book title</cite><i lang="fr">c'est la vie</i><small>fine print</small><s>inaccurate, outdated $3.99</s>
Group words, phrases, or other content parts They do not create line breaks
Semantic HTML5
<article class=“filmreview”> <header> <h1>Avatar</h1> <span class=“author”>Roger Ebert</span> <time datetime=“2009-12-11”>December 11, 2009</time> </header> <p class=“review”><b class=“lead”>Watching "Avatar," I felt sort of the same as when I saw "Star Wars" in 1977. </b></p></article>
Semantic Microdata
Semantic Microdata
schema.org Supports microdata spec Supports RDFa spec
microformats
Semantic Microdata
<article itemscope itemtype="http://schema.org/Movie">
<header>
<h1 itemprop="name">Avatar</h1>
<section itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="author">Roger Ebert</span>
<meta itemprop="datePublished" content="2009-12-11">December 11, 2009
</section> </header>
<p><b class="lead">Watching "Avatar," I felt sort of the same as when I saw "Star Wars" in 1977. </b></p>
</article>
Semantic Microdata
Semantic Web
Semantic Web: Web of “Data” not “Pages”
Knowledge Graph (Bing Snapshots, Google)
Linked Data (Wikidata) RDF: Data model for storing knowledge
graph RDF/XML: XML document containing RDF
data Ontology: Represent Knowledge as set of
Concepts OWL: Web Ontology Language Case Study: BBC 2010 World Cup
Website
Semantic Web
Discovery / Analysis example:Show me Roger Ebert’s favorite films with an Asian director of photography.
Agent / Automation example:Purchase tickets and load directions into my device for a movie playing in a theater today, near my current location, that fits my taste in film.
SEMANTIC HTML 5David Kelleher NEPHP 2013 www.davidk.net
David Kelleherhttp://www.davidk.nethttp://joind.in/8913
