The Adventures of Cindy Li

web designer rediscover semantic (X)HTML

less <b><br> more <h3><p>

Search engine relevance easier to style

2003
CSS zen garden hey.. look what you can do
Whenever there is a new thing that is like a new game

Blog too adopt more semantic (X)HTML
<a name---><div id>
and <a rel="bookmark">
‘rel; attribute rediscovered

So as a result ...

blo link people/URLs
XFN Friendly extends ‘rel’ a dozen or so attributes to take the blo
< a rel=’met friend’
h ref="_""> Jeffrey</a>
built into blo.gs, wordpress, etc

2004 O’Reilly etech conference

• microformats introduced
• rel"license"
• XOXO(XHTML)
• more semantic class names

FOO Camp brainstorms

• a. bowsorth: HTML for claendars
• vCard as HTML classes?
  would this work?
• Ray Ozzie told me to go for it

Analogy: link to a stylesheet with re="stylesheet"
for this document similarly...

• Thus: link to a license with the “license”
• rel-license support

Creative commons (cc)license chooser
They tried w/rdf
Yahoo!(cc) search
Google “Usage Rights” search

Example: blog quote
<cite> & <blockquote> elements
you should put a cite attribute giving a link to the quote.
take it a step further
Since eric actually said this on this blog.
you can hCard and know that he is a person and pub that
and added XFN
<cite>, <blockquote>, hCard & XFN

More than just “good class names”

Pick class names that mean something in your design
Principes keep things “micro”
processemphasizes getting real
community minimizes duplicates

Anyone that wants to create something on and do a search and find someone else that worked on it
and you can find it. Thi sis a fundamental moment in history and scientists can know if someone is
working on it

solve a specific prblem
the trick… is to make sure that each limited mechanical part of the wb, each application, is
within itself composed

(slide changed)

solve a specific problem
simple as possible

Oh market tells you that you need this feature
evolutionary improvemnts

humans first, machines second

What are people’s beahviors on the web
They are very distinct behaviors here

presentable and parsable

built in feature if data is out there and we have more of a choice to address that

reuse from widely adopted stanards
if you want things done you use existing stuff as much as possible

“....if I had insisted everyone use HTTP, this would aslo
have been against the principe of minimal consultant...”

modularly/embedd API
they dont publish information in silos...no they say
oh I went to this great concert and went with so and so..
you mixed up all three things.

exp encourage “spirit of the Web”

pick a specific, simple problem and define it
research & document current web publishing behavior

document existing formats in the problem area
there is so much work overvarious data formats and fields all specialized fields
rare is it that there is a format
once you’ve done your reasearch

example:hcalendar

<ol class]vclaendar">
<li class="vevent">
<a href=” http....”
class="url">
<span class="summary">Micorformats: Evolving...</span>
<abbr class="dstart" title="20060626AT1500+100:>16 June 2006
</abbrf>
</a>
</li>
<ol>

Microformat: outlines

XOXO-eXtensible Open XHTML Outlines
<ol>
<li>topic1
<ol><li>point A</li>
<li>point A</li>

slide changed

Microformat 2004-->2006

XFN-distr social network blo.gs, wordpress, rubhub, more…
rel-license-license links
--cc creator, yahoo cc search, google search
XOXO
Votelinks
hCalendar
hCard
rel-tag
adr &geo
hAtom
hListing
hResume
hReview
rel-directory
rel-payment
xFolk
and many more in dev

Recently released

Technorati Microformat Search preview

Type style and do a search and a bunch of reviews
drill down into each of those for instance the reviews
that happen to contain style this isn’t targeted maybe a more targeted review and even now there is
already sufficient

Why put up more markup if you can’t do anything with it?

People wanting to markup their code
Event results....
for style don’t look that interesting
The more use is the site called evoTV
they have marked up each show on each channel on each timeslot
with hCalendar

If you search for a Conferences, events that are conferences
Plenty of contacts that are style
With the events you can add it to your calendar you can subscribe to an event
Imagine a conf you want to go to what are all the sessions?
The sessions can change but if it was in your calendar

Technorati microformats search preview

-search for contacts
events
review and more coming soon

Ping....

IRC

irc.freenode.net #microformats
-great place to link and learn

Email

join microformats-discuss mailing list
public archives

Blog

tag posts with “microformats” tag

Wiki

read through it
if you find errors, create an account
givennameFamilyname
fix typos

Micorformats Exercise for the reader:

Create your own hCard
-use the hCard creator
or use hCard authoring tips to makrup your conact info

perhaps your name your photo your url?

What happens when you put this and get spammed?

Don’t put your email
Publish it on your site in your about or contact page
Add a link to it in hCard New Examples
anyone that publishes their hCard you can put it in your wiki
what happens?

Add a link to it in the hCard New Examples

colophon

microformats.org
Evolving the web