Successfully reported this slideshow.
Your SlideShare is downloading. ×

Semantic HTML5 and JSON-LD

Ad

WEB SEMANTICS
David Kelleher  Ski PHP ‘16  www.davidk.net
David Kelleher
http://www.davidk.net
https://joind.in/talk/378...

Ad

Semantics

Ad

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...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
Semantic HTML5 and Microdata
Semantic HTML5 and Microdata
Loading in …3
×

Check these out next

1 of 26 Ad
1 of 26 Ad

Semantic HTML5 and JSON-LD

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Advertisement

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

×