Darwin web standards


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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