Darwin web standards

Tonight
• Welcome
• House Keeping
• Meetups
• Sponsors
• Jobs
• Quick Talk - Microdata
• Drinks, Chats, Networking etc

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)

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 positive
thing that is making
the Web a better
place.”

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>

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

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

Darwin web standards

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Darwin web standards

Similaire à Darwin web standards (20)

Darwin web standards