Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag...

21
Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10 Microformats

Transcript of Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag...

Page 1: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Faculty of Electrical EngineeringUniversity of Belgrade

Predrag Radenković10/3237

Microformats

Page 2: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Microformats are small patterns of HTML to represent commonly published things like people, events, blog posts, reviews and tags in web pages.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

What are Microformats?

2/21

Page 3: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

A way of thinking about data Design principles for formats Adapted to current behaviors and usage patterns

(“Pave the cow paths.”) Highly correlated with semantic XHTML, AKA the real

world semantics, AKA lowercase semantic web, AKA lossless XHTML

A set of simple open data format standards that many are actively developing and implementing for more/better structured blogging and web microcontent publishing in general.

“An evolutionary revolution” All the above.

Microformats are…

3/21

Page 4: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

A new language Infinitely extensible and open-ended An attempt to get everyone to change their

behavior and rewrite their tools A whole new approach that throws away what

already works today A panacea for all taxonomies, ontologies, and

other such abstractions Defining the whole world, or even just boiling

the ocean Any of the above

Microformats are not…

4/21

Page 5: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

solve a specific problem simple as possible

◦ evolutionary improvements humans first, machines second

◦ presentable and parsable◦ adapt to current behaviors

reuse from widely adopted standards ◦ semantic (X)HTML, schemas from interoperable RFCs

modularity / embeddability decentralized development, content, services

◦ explicitly encourage "spirit of the Web"

The microformats principles

5/21

Page 6: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

hCalendar - hCalendar creator hCard - hCard creator rel-license rel-nofollow rel-tag VoteLinks XFN - XFN creator XMDP XOXO

List of open standard specifications

6/21

Page 7: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Why should I be using microformats

right now?

7/21

Page 8: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Eliminate guesswork and irregular approaches already taken by web developers when marking up content.

Code more efficiently. Provide meaningful structure to data

Standards

8/21

Page 9: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Chances are you already have contact info, calendar events, reviews, a personal resume and more on an existing site.

Take your existing data, structure it using most appropriate microformat, and you’ll instantly transform it into something more meaningfull and useful.

Easy.

9/21

Page 10: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard (RFC2426) properties and values in semantic HTML or XHTML. hCard is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom, RSS, and arbitrary XML.

http://microformats.org/wiki/hcard

hCard

10/21

Page 11: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Predrag RadenkovicSoftware DeveloperVlatacom

Gospodara Vucica 51/8Belgrade, Serbia

Cell - +38162402959

hCard: Contact info

11/21

Page 12: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

<div id="contact" class="vcard"><a href="mailto:[email protected]" class="fn">

<span class="given-name">Predrag</span> <span class="family-name">Radenkovic</span></a><p class="title">Software Developer</p><p class="org"><a href="http://vlatacom.com">Vlatacom</a></p><div class="adr">

<p class="street-address">Gospodara Vucica 51/8</p><span class="locality">Belgrade</span>,<span class="region">Serbia</span><span class="postal-code">11000</span>

</div><div class="tel">

<strong class="type">Cell</strong> -<span class="value">+38162402959</span>

</div></div>

hCard: The Markup

12/21

Page 13: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

YouTube uses hCard to identify video contributor

Twitter uses hCard for user information (along with hAtom, XFN and rel="me“.

Avon publishes all 40,000+ Avon representatives’ contact info with hCard.

MapQuest Local uses hCards for locations, hCalendar for events and supports the draft Geo format when lat/lng data is provided.

hCard in the Wild

13/21

Page 14: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

hCalendar is a simple, open, distributed calendaring and events format, using a 1:1 representation of standard iCalendar (RFC2445) VEVENT properties and values in semantic HTML or XHTML. hCalendar is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom, RSS, and arbitrary XML.

hCalendar

14/21

Page 15: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Shakespeare's Pub 314 East 6th StreetAustin, TX 78701

<div class="location vcard"> <span class="fn org">Shakespeare's Pub </span> <div class="adr">

<div class="street-address">314 East 6th Street

</div> <div class="locality">Austin, TX 78701</div>

</div> </div>

hCalendar: Event info and Markup

15/21

Page 16: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Facebook added hCalendar and hCard Microformats to millions of events.

PHP.net uses hCalendar in their Conference Announcements and Event Calendar.

Last.fm - uses hCalendar on all concert announcement.

Upcoming has support for hCalendar and hCard on event pages.

hCalendar in the Wild

16/21

Page 17: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

“Microformats make it easy for you or anyone to share and reuse data in your webpages and content elsewhere — for example, to populate an address book, browse social relationships, share reviews, tag content or publish and discover events.”

What can we do with microformats?

17/21

Page 18: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Analysis/Extraction Firefox plugins Chrome plugins Microsoft Oomph

Authoring Dreamweaver Microformats Extension Online Creators

Developer's Toolkit

18/21

Page 19: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Operator - Operator, a Firefox extension, leverages microformats and other semantic data that are already available on many web pages to provide new ways to interact with web services.

Tails - A Firefox extension for Showing and Exporting Microformats. Currently it supports the following formats: hCard [export to .vcf file], hCalendar [export to .ics file], hReview, xFolk, Rel-licene

Firefox plugins

19/21

Page 20: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

hNews reader - highlights pages conforming to hNews. It displays hNews fields, required and optional, in a small popup.

hRecepie - provides a nice interface to enter a recipe and have it automatically formatted with compliant hRecipe.

Chrome plugins

20/21

Page 21: Faculty of Electrical Engineering University of Belgrade Predrag Radenković 10/3237 Predrag Radenković 3237/10.

Predrag Radenković 3237/10

Current browsers can detect microformat usage via plugins. Future browsers will support microformats right out of the box.

Thank you.

Build for tomorrow, today.

21/21