Darwin web standards
Download as KEY, PDF0 likes2,286 views
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.
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)
- 7. Sponsors
- 8. Jobs
- 9. MICRODATA
- 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.”
- 17. WHY SEMANTICS?
- 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>
- 20. HTML5 SEMANTIC TAGS
- 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
- 31. Questions?
- 32. Your turn!