Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WEB SEMANTICS
David Kelleher  Ski PHP ‘16  www.davidk.net
David Kelleher
http://www.davidk.net
https://joind.in/talk/378...
Semantics
What does it mean?
41 76 61 74 61 72 52 6f 67 65 72 20 45 62 65 72 74 44 65 63 65 6d 62 65
72 20 31 31 2c 20 32 30 30 39 5...
What does it mean?
What does it mean?
<div>
<div>41 76 61 74 61 72</div>
<div>52 6f 67 65 72 20 45 62 65 72 74</div>
<div>44 65 63 65 6d 62 6...
What does it mean?
Mark this up to convey meaning:
What does it mean?
Semantic Tags, IDs, Class Names
<div id ="filmreview">
<div id ="header">
<h1>41 76 61 74 61 72</h1>
<div id =“byline">52 ...
Semantic HTML5
Sectioning Elements
<body>
<header>
<h1>..</h1>
<nav>...</nav>
</header>
<section>
<article>...</article>
<...
Semantic HTML5
Content Grouping Elements
<p>Paragraph</p>
<ul>
<li>List Item #1</li>
<li>List Item #2</li>
</ul>
 Also or...
Semantic HTML5
Text-Level Elements
<strong>important</strong>
<b>keyword</b> or <b>article lede</b>
<em>emphasized</em>
<c...
Semantic HTML5
<article id=“filmreview”>
<header>
<h1>Avatar</h1>
<span class=“author”>Roger Ebert</span>
<time datetime=“...
Rich Snippets
Knowledge Graph Panel
Microdata
 schema.org vocabulary
 Supports microdata syntax
 Supports RDFa syntax
 Now we can use JSON-LD syntax
 mic...
schema.org Microdata (old way)
<article id="filmreview" itemscope itemtype="http://schema.org/Movie">
<header>
<h1 itempro...
schema.org JSON-LD (new way)
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Review",
"i...
Semantic Microdata
schema.org Blog Example
<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"LiveBlogPosting",
"...
schema.org Commerce Example
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"im...
Semantic Web
 Discovery / Analysis example:
Show me Roger Ebert’s favorite films with an Asian director of
photography.
...
Other Semantic Concepts
 WAI-ARIA Roles (accessibility)
<form role=“search”>
 Wikidata (public database, name-value pair...
Other Semantic Concepts
 RDF (Subject-Predicate-Object “Triplet”
Expressions)
Ferrari Is Car
 OWL (Web Ontology Language...
Other Semantic Concepts
 SKOS (Simple Knowledge Organization
System)
Concept, definition, example, broader,
narrower
 JS...
WEB SEMANTICS
David Kelleher  Ski PHP ‘16  www.davidk.net
David Kelleher
http://www.davidk.net
https://joind.in/talk/378...
Upcoming SlideShare
Loading in …5
×

Semantic HTML5 and JSON-LD

574 views

Published on

How can you help the realize Tim Berners-Lee's vision of the semantic web? Developers know to separate semantics (HTML) from presentation (CSS), but what specifically are the best current solutions for tagging the meaning of content, and what is the case for using them? This talk will discuss the evolving HTML5 and JSON-LD microdata specifications, and show sample code using these elements and attributes in blog and commerce web pages.

Published in: Technology
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ■■■ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Semantic HTML5 and JSON-LD

  1. 1. WEB SEMANTICS David Kelleher  Ski PHP ‘16  www.davidk.net David Kelleher http://www.davidk.net https://joind.in/talk/3783e
  2. 2. Semantics
  3. 3. What does it mean? 41 76 61 74 61 72 52 6f 67 65 72 20 45 62 65 72 74 44 65 63 65 6d 62 65 72 20 31 31 2c 20 32 30 30 39 57 61 74 63 68 69 6e 67 20 22 41 76 61 74 61 72 2c 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 22 53 74 61 72 20 57 61 72 73 22 20 69 6e 20 31 39 37 37 2e 20
  4. 4. What does it mean?
  5. 5. What does it mean? <div> <div>41 76 61 74 61 72</div> <div>52 6f 67 65 72 20 45 62 65 72 74</div> <div>44 65 63 65 6d 62 65 72 20 31 31 2c 20 32 30 30 39</div> <div>57 61 74 63 68 69 6e 67 20 <span class="style1">22 41 76 61 74 61 72 2c 22</span>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<span class="style1">22 53 74 61 72 20 57 61 72 73 22</span>20 69 6e 20 31 39 37 37 2e </div> </div>
  6. 6. What does it mean?
  7. 7. Mark this up to convey meaning:
  8. 8. What does it mean?
  9. 9. Semantic Tags, IDs, Class Names <div id ="filmreview"> <div id ="header"> <h1>41 76 61 74 61 72</h1> <div id =“byline">52 6f 67 65 72 20 45 62 65 72 74</div> <div id =“date">57 61 74 63 68 69 6e 67 20 </div> <p class="review">57 61 74 63 68 69 6e 67 20 <span class=“filmtitle">22 41 76 61 74 61 72 2c 22</span>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<span class="filmtitle">22 53 74 61 72 20 57 61 72 73 22</span>20 69 6e 20 31 39 37 37 2e </p> </div>
  10. 10. Semantic HTML5 Sectioning Elements <body> <header> <h1>..</h1> <nav>...</nav> </header> <section> <article>...</article> <aside>..</aside> </section> <footer> <address>...</address> </footer> </body>
  11. 11. 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
  12. 12. Semantic HTML5 Text-Level Elements <strong>important</strong> <b>keyword</b> or <b>article lede</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
  13. 13. Semantic HTML5 <article id=“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=“lede”>Watching <cite>Avatar</cite>, I felt sort of the same as when I saw <cite>Star Wars</cite> in 1977. </b></p> </article>
  14. 14. Rich Snippets
  15. 15. Knowledge Graph Panel
  16. 16. Microdata  schema.org vocabulary  Supports microdata syntax  Supports RDFa syntax  Now we can use JSON-LD syntax  microformats
  17. 17. schema.org Microdata (old way) <article id="filmreview" itemscope itemtype="http://schema.org/Movie"> <header> <h1 itemprop="itemReviewed" itemscope itemtype="http://schema.org/Movie"><span itemprop="name">Avatar</span></h1> <div itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Roger Ebert</span></div> <time datetime="2009-12-11" itemprop="datePublished" > December 11, 2009</time> </header> <p class=“review” itemprop="reviewBody"><b class="lede">Watching <cite>Avatar</cite>, I felt sort of the same as when... </b></p> </article>
  18. 18. schema.org JSON-LD (new way) <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Review", "itemReviewed": { "@type": "Movie", "name": "Avatar“, "sameAs": "http://dbpedia.org/page/Roger_Ebert" }, "author": { "@type": "Person", "name": "Roger Ebert", “sameAs": "http://dbpedia.org/page/Roger_Ebert" }, "datePublished": "2006-05-04", "reviewBody": "Watching Avatar...", } </script>
  19. 19. Semantic Microdata
  20. 20. schema.org Blog Example <script type="application/ld+json"> { "@context":"http://schema.org", "@type":"LiveBlogPosting", "@id":"http://techcrunch.com/...", "about":{ "@type":"Event", "startDate":"2015-03-09T13:00:00-07:00", "name":"Apple Spring Forward Event", } }, "coverageStartTime":"2015-03-09T11:30:00-07:00", "coverageEndTime":"2015-03-09T16:00:00-07:00", "headline":"Apple Spring Forward Event Blog", "description":"Welcome to live coverage...", …
  21. 21. schema.org Commerce Example <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Product", "image": "dell-30in-lcd.jpg", "name": "Dell UltraSharp 30" LCD Monitor", "offers": { "@type": "AggregateOffer", "highPrice": "$1495", "lowPrice": "$1250", "offerCount": "8", "offers": [ { "@type": "Offer", "url": "save-a-lot-monitors.com/dell-30.html" …
  22. 22. Semantic Web  Discovery / Analysis example: Show me Roger Ebert’s favorite films with an Asian director of photography.  Agent / Automation example (schema.org Actions): 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.
  23. 23. Other Semantic Concepts  WAI-ARIA Roles (accessibility) <form role=“search”>  Wikidata (public database, name-value pairs) London /wiki/Q84: Area is 1572 Square Kilometers
  24. 24. Other Semantic Concepts  RDF (Subject-Predicate-Object “Triplet” Expressions) Ferrari Is Car  OWL (Web Ontology Language) DataPropertyAssertion ( :hasAge :John "51"^^xsd:integer )  SPARQL (SQL-like Query Language for RDF Graphs)
  25. 25. Other Semantic Concepts  SKOS (Simple Knowledge Organization System) Concept, definition, example, broader, narrower  JSKSOS (JSON-LD structure for encoding SKOS)
  26. 26. WEB SEMANTICS David Kelleher  Ski PHP ‘16  www.davidk.net David Kelleher http://www.davidk.net https://joind.in/talk/3783e

×