Darwin web standards

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

MICRODATA

Overview• HTML5• Semantic Web• What is Microdata?• Real World Examples• When can we use it

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 positivething that is makingthe Web a betterplace.”

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 ﬁnd 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>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>

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

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!

http://www.darwinwebstandards.org	210
http://darwinwebstandards.org	7
http://webcache.googleusercontent.com	1

Darwin web standards

by Justin Avery on Apr 13, 2011

Accessibility

Tags

Upload Details

Usage Rights

3 Embeds 218

Statistics

Darwin web standards — Presentation Transcript