Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Darwin web standards

•Download as KEY, PDF•
•
Justin Avery
Justin Avery

The document summarizes a meetup event for a web standards group in Darwin, Australia on April 13, 2011. It includes an agenda for the meetup with items like welcome, housekeeping, sponsors, a quick talk on microdata, and networking. It also provides information on the next meetup, how to suggest topics, locations, and ways to follow the group online.

1 of 32
Meetup #1 13th April 2011
Tonight • Welcome • House Keeping • Meetups • Sponsors • Jobs • Quick Talk - Microdata • Drinks, Chats, Networking etc
Why Web Standards?
Meeting Format
Meeting • Next Meetup Wednesday 11th May http://www.meetup.com/darwin-web-standards • Suggest a topic http://www.darwinwebstandards.org/suggest • Locations • Helpers?
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)
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 Markup • IE6 Incompatible • AJAX • Transitions • Web 3.0 • Typography
WHAT IS HTML5? • • • • • • Semantic Markup • • • • •
WHAT IS HTML5? • • • • • • Semantic Markup • • plus a little more... • • •
WHAT IS HTML5? If anyone asks..... “HTML5 is a positive thing that is making the Web a better place.”
WHY SEMANTICS?
HTML5 SEMANTIC TAGS • <audio> • <video> • <header> • <section> • <article> • <nav> • <footer> • more (http://www.w3schools.com/html5/html5_reference.asp)
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>
HTML5 SEMANTIC TAGS
Why the semantic web? • Web of data • Billions of pages • Machine Readable • How things are related • Allows us to easily find and combine data
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="contact met co- resident spouse crush date sweetheart">Laura Anderson</a> • <a href="http://www.darwinwebstandards.org" rel="nofollow">Darwin Web Standards</a>
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>John's 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>John's 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>
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.
Microdata • Person • Events • Locations • Product • Organization • Review (Review-aggregate) • Breadcrumb • Offer (Offer-aggregate) http://www.data-vocabulary.org
Real World Examples
So, why use it? “Semantic markup and structured data is the future. Incorporating Microdata as part of your web site and content management strategy now will give you a head start and increase the relevance of your data in the increasingly social and structured Internet of tomorrow.”
Links • http://diveintohtml5.org/extensibility.html • http://slides.html5rocks.com/ • http://html5doctor.com/microdata/ • http://www.data-vocabulary.org • @justinavery http://surfthedream.com.au
Questions?
Your turn!

More Related Content

Darwin web standards

  • 1. Meetup #1 13th April 2011
  • 2. Tonight • Welcome • House Keeping • Meetups • Sponsors • Jobs • Quick Talk - Microdata • Drinks, Chats, Networking etc
  • 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. 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)
  • 10. Overview • HTML5 • Semantic Web • What is Microdata? • Real World Examples • When can we use it
  • 11. HTML5
  • 12. WHERE DID HTML5 COME FROM? • WHAT-WG - Web Applications 1.0 • W3C - HTML 5
  • 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. WHAT IS HTML5? • • • • • • Semantic Markup • • • • •
  • 15. WHAT IS HTML5? • • • • • • Semantic Markup • • plus a little more... • • •
  • 16. WHAT IS HTML5? If anyone asks..... “HTML5 is a positive thing that is making the Web a better place.”
  • 18. HTML5 SEMANTIC TAGS • <audio> • <video> • <header> • <section> • <article> • <nav> • <footer> • more (http://www.w3schools.com/html5/html5_reference.asp)
  • 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>
  • 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. What is Micro..... • Microformats • RDFa • Microdata
  • 23. Microformats • hCard • hCalendar • hReview • XFN (http://gmpg.org/xfn/creator)
  • 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. 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>John's 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>John's 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. 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. Microdata • Person • Events • Locations • Product • Organization • Review (Review-aggregate) • Breadcrumb • Offer (Offer-aggregate) http://www.data-vocabulary.org
  • 29. So, why use it? “Semantic markup and structured data is the future. Incorporating Microdata as part of your web site and content management strategy now will give you a head start and increase the relevance of your data in the increasingly social and structured Internet of tomorrow.”
  • 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