0
Meetup #1 13th April 2011
Tonight•   Welcome•   House Keeping•   Meetups•   Sponsors•   Jobs•   Quick Talk - Microdata•   Drinks, Chats, Networking ...
Why Web Standards?
Meeting Format
Meeting• Next Meetup Wednesday 11th May  http://www.meetup.com/darwin-web-standards• Suggest a topic  http://www.darwinweb...
Around the Web•   Website - http://www.darwinwebstandards.org•   Meetup Group    http://www.meetup.com/darwin-web-standard...
Sponsors
Jobs
MICRODATA
Overview• HTML5• Semantic Web• What is Microdata?• Real World Examples• When can we use it
HTML5
WHERE DID HTML5 COME FROM?• WHAT-WG - Web Applications 1.0• W3C - HTML 5
WHAT IS HTML5?• SVG Graphics       • Drop Shadows• iPhone friendly    • Rounded Corners• iPad friendly      • Semantic Mar...
WHAT IS HTML5?•          ••          ••          • Semantic Markup•          ••          ••
WHAT IS HTML5?•          ••          ••          • Semantic Markup•          • plus a little more...•          ••
WHAT IS HTML5?If anyone asks.....“HTML5 is a positivething that is makingthe Web a betterplace.”
WHY SEMANTICS?
HTML5 SEMANTIC         TAGS•   <audio>•   <video>•   <header>•   <section>•   <article>•   <nav>•   <footer>•   more (http...
HTML5 SEMANTIC      <body>              TAGS                        <h1>Title</h1>    <header>                            ...
HTML5 SEMANTIC     TAGS
Why the semantic web?•   Web of data•   Billions of pages•   Machine Readable•   How things are related•   Allows us to ea...
What is Micro.....• Microformats• RDFa• Microdata
Microformats• hCard• hCalendar• hReview• XFN (http://gmpg.org/xfn/creator)
XFN example•   <a href="http://surfthedream.com.au" rel="me">Justin Avery</a>•   <a href="http://www.laulovesyoga.com" rel...
RDFa     <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"    "http://www.w3.or...
Microdata•   itemscope — defines a group of name-value pair(s), called an item•   itemprop="property-name" — adds a propert...
Microdata•   Person•   Events•   Locations•   Product•   Organization•   Review (Review-aggregate)•   Breadcrumb•   Offer ...
Real World Examples
So, why use it?“Semantic markup and structured data isthe future. Incorporating Microdata aspart of your web site and cont...
Links•   http://diveintohtml5.org/extensibility.html•   http://slides.html5rocks.com/•   http://html5doctor.com/microdata/...
Questions?
Your turn!
Upcoming SlideShare
Loading in...5
×

Darwin web standards

3,040

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,040
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Darwin web standards"

  1. 1. Meetup #1 13th April 2011
  2. 2. Tonight• Welcome• House Keeping• Meetups• Sponsors• Jobs• Quick Talk - Microdata• Drinks, Chats, Networking etc
  3. 3. Why Web Standards?
  4. 4. Meeting Format
  5. 5. Meeting• Next Meetup Wednesday 11th May http://www.meetup.com/darwin-web-standards• Suggest a topic http://www.darwinwebstandards.org/suggest• Locations• Helpers?
  6. 6. Around the Web• Website - http://www.darwinwebstandards.org• Meetup Group http://www.meetup.com/darwin-web-standards• Subscribe http://www.darwinwebstandards.org/subscribe• Follow us on Twitter @dwebstandards• Join Facebook Group (Darwin Web Standards)• Linked In Group (Darwin Web Standards)
  7. 7. Sponsors
  8. 8. Jobs
  9. 9. MICRODATA
  10. 10. Overview• HTML5• Semantic Web• What is Microdata?• Real World Examples• When can we use it
  11. 11. HTML5
  12. 12. WHERE DID HTML5 COME FROM?• WHAT-WG - Web Applications 1.0• W3C - HTML 5
  13. 13. WHAT IS HTML5?• SVG Graphics • Drop Shadows• iPhone friendly • Rounded Corners• iPad friendly • Semantic Markup• IE6 Incompatible • AJAX• Transitions • Web 3.0• Typography
  14. 14. WHAT IS HTML5?• •• •• • Semantic Markup• •• ••
  15. 15. WHAT IS HTML5?• •• •• • Semantic Markup• • plus a little more...• ••
  16. 16. WHAT IS HTML5?If anyone asks.....“HTML5 is a positivething that is makingthe Web a betterplace.”
  17. 17. WHY SEMANTICS?
  18. 18. HTML5 SEMANTIC TAGS• <audio>• <video>• <header>• <section>• <article>• <nav>• <footer>• more (http://www.w3schools.com/html5/html5_reference.asp)
  19. 19. HTML5 SEMANTIC <body> TAGS        <h1>Title</h1>  <header>      </header>    <hgroup>      <section>      <h1>Page title</h1>        Content...      <h2>Page subtitle</h2>      </section>    </hgroup>    </article>  </header>   </section>  <nav>   <aside>   <ul>    Top links...     Navigation...   </aside>   </ul>  </nav>   <figure>  <section>     <img src="..."/>   <article>     <figcaption>Chart 1.1</figcaption>     <header>   </figure>       <h1>Title</h1>     </header>   <footer>     <section>    Copyright ©       Content...    <time datetime="2010-11-08">2010</time>.     </section>   </footer>   </article> </body>   <article>     <header>
  20. 20. HTML5 SEMANTIC TAGS
  21. 21. Why the semantic web?• Web of data• Billions of pages• Machine Readable• How things are related• Allows us to easily find and combine data
  22. 22. What is Micro.....• Microformats• RDFa• Microdata
  23. 23. Microformats• hCard• hCalendar• hReview• XFN (http://gmpg.org/xfn/creator)
  24. 24. XFN example• <a href="http://surfthedream.com.au" rel="me">Justin Avery</a>• <a href="http://www.laulovesyoga.com" rel="contact met co- resident spouse crush date sweetheart">Laura Anderson</a>• <a href="http://www.darwinwebstandards.org" rel="nofollow">Darwin Web Standards</a>
  25. 25. RDFa <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:dc="http://purl.org/dc/elements/1.1/" version="XHTML+RDFa 1.0" xml:lang="en"> <head> <title>Johns Home Page</title> <base href="http://example.org/john-d/" /> <meta property="dc:creator" content="Jonathan Doe" /> <link rel="foaf:primaryTopic" href="http://example.org/john-d/#me" /> </head> <body about="http://example.org/john-d/#me"> <h1>Johns Home Page</h1> <p>My name is <span property="foaf:nick">John D</span> and I like <a href="http://www.neubauten.org/" rel="foaf:interest" xml:lang="de">Einstürzende Neubauten</a>. </p> <p> My <span rel="foaf:interest" resource="urn:ISBN:0752820907">favorite book is the inspiring <span about="urn:ISBN:0752820907"><cite property="dc:title">Weaving the Web</cite> by <span property="dc:creator">Tim Berners-Lee</span></span> </span> </p> </body></html>
  26. 26. Microdata• itemscope — defines a group of name-value pair(s), called an item• itemprop="property-name" — adds a property to a microdata item. The name of the property can be a word or URL, and the value is the ‘content’ of the element with this attribute:• For most elements, the value is the element’s text content (not including any HTML tags)• For elements with a URL attribute, the value is the URL (<img src="">, <a href="">, <object data="">, etc.)• For the <time> element, the value is the datetime="" attribute• For <meta itemprop="" content="">, the value is the content="" attribute• itemref="" — allows a microdata item to include non-descendent properties by referring to the ids of element(s) containing them• itemtype="" — defines the item’s type when used on the same element as itemscope. The itemtype value is a URL that acts as an identifying vocabulary name.• itemid="" — allows a microdata item to be associated with a unique identifier, for example an ISBN number on a book. Use itemid on the same element as the item’s itemscope and itemtype attributes.
  27. 27. Microdata• Person• Events• Locations• Product• Organization• Review (Review-aggregate)• Breadcrumb• Offer (Offer-aggregate) http://www.data-vocabulary.org
  28. 28. Real World Examples
  29. 29. So, why use it?“Semantic markup and structured data isthe future. Incorporating Microdata aspart of your web site and contentmanagement strategy now will give youa head start and increase the relevance ofyour data in the increasingly social andstructured Internet of tomorrow.”
  30. 30. Links• http://diveintohtml5.org/extensibility.html• http://slides.html5rocks.com/• http://html5doctor.com/microdata/• http://www.data-vocabulary.org• @justinavery http://surfthedream.com.au
  31. 31. Questions?
  32. 32. Your turn!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×