Difference between revisions of "events/2012-07-14-open-web-camp-4"
(drafted) |
m (Replace <entry-title> with {{DISPLAYTITLE:}}) |
||
(12 intermediate revisions by one other user not shown) | |||
Line 1: | Line 1: | ||
− | + | {{DISPLAYTITLE:Open Web Camp IV}} | |
__TOC__ | __TOC__ | ||
One of several microformats [[events]]. | One of several microformats [[events]]. | ||
Line 8: | Line 8: | ||
:<span class="dt-start dtstart"><span class="value">2012-07-14</span> from <span class="value">9:00</span></span> to <span class="dt-end dtend"><span class="value">18:00</span></span> | :<span class="dt-start dtstart"><span class="value">2012-07-14</span> from <span class="value">9:00</span></span> to <span class="dt-end dtend"><span class="value">18:00</span></span> | ||
;Where | ;Where | ||
− | :<span class="p-location location h-adr adr"><span class="p-locality locality">San | + | :<span class="p-location location h-card vcard"><span class="p-name fn p-org org">PayPal</span> Town Hall, <span class="h-adr adr"><span class="p-street-address street-address">2161 N 1st St.</span>, <span class="p-locality locality">San Jose</span>, <abbr class="p-region region" title="California">CA</abbr></span></span> |
;What | ;What | ||
:<span class="p-summary summary">Open Web Camp IV</span> | :<span class="p-summary summary">Open Web Camp IV</span> | ||
;Web | ;Web | ||
+ | :<span class="u-url url">http://lanyrd.com/2012/openwebcamp-iv/</span> | ||
:<span class="u-url url">http://plancast.com/p/b9be/open-web-camp-iv</span> | :<span class="u-url url">http://plancast.com/p/b9be/open-web-camp-iv</span> | ||
− | |||
<!-- :<span class="u-url url">https://www.facebook.com/events/310026722412259/</span> | <!-- :<span class="u-url url">https://www.facebook.com/events/310026722412259/</span> | ||
; Upcoming --> | ; Upcoming --> | ||
− | '''[http://h2vx.com/ics/microformats.org/wiki/events/2012-07-14-open-web-camp-4 Add this event to your calendar]''' http://www.boogdesign.com/images/buttons/microformat_hcalendar.png | + | '''[http://dev.h2vx.com/ics/microformats.org/wiki/events/2012-07-14-open-web-camp-4 Add this event to your calendar]''' http://www.boogdesign.com/images/buttons/microformat_hcalendar.png |
− | + | ||
− | == | + | == Open Web Camp IV == |
<div class="p-description description"> | <div class="p-description description"> | ||
Open Web Camp IV (#owc4) - featuring a session on [[microformats-2]]: | Open Web Camp IV (#owc4) - featuring a session on [[microformats-2]]: | ||
− | * [[HTML5]] and microformats 2 | + | <div class="h-event vevent"> |
+ | * <time class="dt-start dtstart" datetime="2012-07-14T09:30:00">9:30</time> - <time class="dt-end dtend" datetime="2012-07-14T10:30:00">10:30am</time> <span class="p-name summary">[[HTML5]] and microformats 2 - the next evolutionary step for web data</span> | ||
+ | ** location: <span class="p-location location">Room Fireside B, PayPal Town Hall</span> | ||
+ | ** <span class="u-url url">http://openwebcamp.org/events/56</span> | ||
+ | ** <span class="u-url url">http://lanyrd.com/2012/openwebcamp-iv/swrty</span> | ||
+ | ** <span class="u-url url">http://plancast.com/p/bu8p/html5-microformats-20-tantek</span> | ||
+ | </div> | ||
+ | <div class="p-description description"> | ||
microformats are published on millions of sites, providing a standard simple API for the data on those pages with no additional URLs, file formats, callbacks etc. Similar approaches have been tried as well (e.g. RDFa, microdata). | microformats are published on millions of sites, providing a standard simple API for the data on those pages with no additional URLs, file formats, callbacks etc. Similar approaches have been tried as well (e.g. RDFa, microdata). | ||
Lessons learned over 8 years have been incorporated into new HTML5 elements and microformats 2.0 for better accessibility, more efficient markup, improved semantics and a direct mapping to JSON for API and other data consumers. | Lessons learned over 8 years have been incorporated into new HTML5 elements and microformats 2.0 for better accessibility, more efficient markup, improved semantics and a direct mapping to JSON for API and other data consumers. | ||
</div> | </div> | ||
− | + | </div> | |
+ | |||
== Tags == | == Tags == | ||
Use the following tags on related content (blog posts, photos, [http://twitter.com tweets]): | Use the following tags on related content (blog posts, photos, [http://twitter.com tweets]): | ||
tags: | tags: | ||
<kbd class="tags" style="display:block"> | <kbd class="tags" style="display:block"> | ||
− | <span class="p-category category">'''html5- | + | <span class="p-category category">'''html5-microformats2'''</span> |
− | <span class="p-category category"> | + | <span class="p-category category">html5</span> |
+ | <span class="p-category category">microformats2</span> | ||
<span class="p-category category">microformats</span> | <span class="p-category category">microformats</span> | ||
+ | <span class="p-category category">openwebcamp</span> | ||
+ | <span class="p-category category">owc4</span> | ||
<span class="p-category category">san-jose</span> | <span class="p-category category">san-jose</span> | ||
<span class="p-category category">microformats-session</span> | <span class="p-category category">microformats-session</span> | ||
Line 49: | Line 60: | ||
* … add yourself here! | * … add yourself here! | ||
+ | == Photographs == | ||
+ | <!-- Event Author: Update the following URL to use this event's tag --> | ||
+ | * Search for photographs from this event on Flickr: [http://flickr.com/photos/tags/microformats-meetup-2012-07-14 Photographs tagged microformats-meetup-2012-07-14] or for [http://flickr.com/photos/tags/microformats-meetup all photographs from microformats meetups]. | ||
+ | |||
+ | [https://twitter.com/frontendstuff/status/224192742719365122 https://p.twimg.com/Axx-HJdCIAEt-_l.jpg] | ||
+ | |||
+ | ''Add a photograph from this event here''. | ||
+ | |||
== Notes == | == Notes == | ||
+ | Presentation slides: | ||
+ | * http://tantek.com/presentations/2012/07/html5-microformats2/ | ||
+ | |||
Topics: | Topics: | ||
* [[HTML5]] | * [[HTML5]] | ||
* [[microformats-2]] | * [[microformats-2]] | ||
* ... | * ... | ||
+ | |||
+ | Notes taken during the session on the etherpad: https://etherpad.mozilla.org/owc4 | ||
+ | * hashtag: #owc4 | ||
+ | * http://openwebcamp.org | ||
+ | |||
+ | More notes here: | ||
+ | * http://manymedia.com/2012/07/microformats/ | ||
+ | |||
+ | 09:30am | ||
+ | HTML5 and microformats 2 - the next evolutionary step for web data | ||
+ | * http://openwebcamp.org/events/56 | ||
+ | * µformats 7 years old | ||
+ | * slide breakdown of structured microdata in 2012 (need URL) | ||
+ | ** µformats dominate breakdown | ||
+ | ** maybe ~25% RDFa | ||
+ | ** maybe ~5% microdata | ||
+ | ** xx% of web using structured data | ||
+ | |||
+ | * Role of simplicity and openness | ||
+ | ** one person, TBL | ||
+ | ** released HTML and HTTP unencumbered | ||
+ | ** All µformats work is contributed to public domain under a Creative Commons Type 0 (CC0) license http://creativecommons.org/publicdomain/zero/1.0/ | ||
+ | *** Means that work is not lost if microformats.org goes away | ||
+ | *** Multiple Translations of specifications and documentation completed and underway | ||
+ | |||
+ | * Why Microformats? | ||
+ | ** Futureproofing | ||
+ | ** Serendipity (making it easier for others coming after you) | ||
+ | ** less-work (well known, reusable class names) | ||
+ | ** site features/UI (vcard and ical formats) | ||
+ | ** cheap Don't Repeat Yourself (DRY) API instead of repeating content via e.g. XML/JSON endpoint or response type | ||
+ | ** search results | ||
+ | |||
+ | * Paring Microformats Examples | ||
+ | ** [[hAtom]] | ||
+ | *** Readablity (consuming hAtom) | ||
+ | *** WordPress (hAtom already in default template) | ||
+ | ** [[hCard]] | ||
+ | *** consumed by search engines | ||
+ | ** [[hproduct]] | ||
+ | *** consumed by search engines | ||
+ | ** [[hRecipe]] | ||
+ | *** Food sites and Google search | ||
+ | ** [[hResume]] | ||
+ | *** Guardian Jobs | ||
+ | *** Madgex (UK) wrote a client to consume | ||
+ | ** [[hReview]] | ||
+ | ** [[rel-me]] | ||
+ | *** Rel Value Wiki - [[existing-rel-values]] | ||
+ | *** Smallest microformat 'rel="me"' | ||
+ | ** [[rel-author]] | ||
+ | *** Google consumes this and tries to match to Google profiles | ||
+ | ** [[rel-license]] | ||
+ | |||
+ | * 7 Years of Alternative Approaches | ||
+ | ** Structured Blogging | ||
+ | ** Google Base (was this Metabase before? no - nothing to do with it) | ||
+ | ** ... | ||
+ | |||
+ | * 3 Lessons Learned | ||
+ | ** Accessibility: Humans First | ||
+ | *** Originally using title attribute, which interfered with screen readers | ||
+ | *** Any use of title attribute must be human readable | ||
+ | *** Value Class Pattern instead | ||
+ | ** Class Collisions and Losses | ||
+ | *** common class names such as 'summary' and 'description' | ||
+ | *** updates remove and rewrite markup | ||
+ | *** introducing prefixed class names in [[microformats2]] | ||
+ | **** Makes it more obvious | ||
+ | **** 'h-', 'p-', 'u-', 'dt-', 'e-' | ||
+ | ** Still too much markup needed | ||
+ | *** Too many extra spans and divs | ||
+ | **** leads to non-trivial error rates | ||
+ | *** Solutions | ||
+ | **** flat sets of properties, required properties don't work in practice (90210 problem) | ||
+ | **** imply common properties (name, url, photo) | ||
+ | ***** <pre><span class="h-card">Jane User</span></pre> | ||
− | + | * [[HTML5]] and Data | |
− | + | ** Data Tables | |
− | * | + | *** See OWC Schedule Page |
+ | *** Schedule table, each row implies the same time-slot, leverage that | ||
+ | ** time and date elements | ||
+ | *** one time element instead of three spans | ||
+ | *** "If a five-year-old can do ISO Dates, anyone can!" | ||
+ | |||
+ | * microformats2 http://microformats.org/wiki/microformats-2 | ||
+ | ** prefixed class names | ||
+ | ** flat sets of optional properties | ||
+ | ** single-class markup for common uses | ||
− | + | (Historical Note: Tantek and Kevin Marks gave a very early microformats [[presentation]] here at EBay almost 8 years ago!) - "Can your website be your API?" | |
+ | * http://www.svforum.org/index.cfm?fuseaction=Calendar.eventDetail&eventID=11142 | ||
+ | * http://tantek.com/presentations/20040928sdforumws/semantic-xhtml.html | ||
+ | |||
+ | |||
+ | Questions: | ||
+ | * How many write HTML? (~ 75% of people in the room) | ||
+ | * How many have written/published microformats? (~ 50% of people in the room) | ||
+ | * what are the most common mistakes made when implementing microformats? | ||
+ | ** misspelling root class name, e.g. hcard instead of vcard (note: fixed in microformats2 - all root class names are same as microformat, e.g. h-card, h-event etc.) | ||
+ | ** miscapitalizaing root class name, e.g. hReview instead of hreview | ||
+ | ** omitting "n" property in hCard when specifying "given-name", "family-name" (note: fixed in microformats2 - flat set of properties, no more "n" property in h-card) | ||
+ | * what are the most innovative ways microformats are being used? | ||
+ | * Guerrilla microformats, what are your experiences with just-adding-them | ||
+ | * Data Attribute instead of class names? +1 | ||
+ | ** data-* attributes are for site-specific data and script libraries only - not semantic markup, see FAQ: http://microformats.org/wiki/html5#data_attributes | ||
+ | * What was the name of the hCalendar to iCal converter? | ||
+ | ** http://H2VX.com - see [[H2VX]] | ||
+ | * What about date and time elements with ISO datetime attrs, and use JS to fill element with locale time? | ||
+ | * How many have used Schema.org? (only 2 people in room) | ||
+ | ** Which vocabularies? (Product, Article - could use [[hProduct]] and [[hAtom]] instead) | ||
+ | * Is there a hHiringPost? ;-) (maybe an hJob or hCareer format?) | ||
+ | ** There's an [[hListing]] draft and a related [[job-listing]] effort as well - take a look and provide feedback! | ||
+ | ** http://microformats.org/wiki/hlisting | ||
+ | ** http://microformats.org/wiki/job-listing | ||
+ | |||
== Articles and Blog Posts == | == Articles and Blog Posts == | ||
Articles and blog posts following up on the meetup. Add a link to your post in the list below: | Articles and blog posts following up on the meetup. Add a link to your post in the list below: |
Latest revision as of 16:22, 18 July 2020
Contents
One of several microformats Microformats events.
Details
- When
- 2012-07-14 from 9:00 to 18:00
- Where
- PayPal Town Hall, 2161 N 1st St., San Jose, CA
- What
- Open Web Camp IV
- Web
- http://lanyrd.com/2012/openwebcamp-iv/
- http://plancast.com/p/b9be/open-web-camp-iv
Add this event to your calendar
Open Web Camp IV
Open Web Camp IV (#owc4) - featuring a session on microformats2:
- - Microformats in HTML5 and microformats 2 - the next evolutionary step for web data
- location: Room Fireside B, PayPal Town Hall
- http://openwebcamp.org/events/56
- http://lanyrd.com/2012/openwebcamp-iv/swrty
- http://plancast.com/p/bu8p/html5-microformats-20-tantek
microformats are published on millions of sites, providing a standard simple API for the data on those pages with no additional URLs, file formats, callbacks etc. Similar approaches have been tried as well (e.g. RDFa, microdata).
Lessons learned over 8 years have been incorporated into new HTML5 elements and microformats 2.0 for better accessibility, more efficient markup, improved semantics and a direct mapping to JSON for API and other data consumers.
Tags
Use the following tags on related content (blog posts, photos, tweets): tags: html5-microformats2 html5 microformats2 microformats openwebcamp owc4 san-jose microformats-session microformats-session-2012-07-14
If you use Twitter, mention @microformats in tweets about the event, and track them on Twitter Search.
Attendees
- Tantek Çelik
- … add yourself here!
Photographs
- Search for photographs from this event on Flickr: Photographs tagged microformats-meetup-2012-07-14 or for all photographs from microformats meetups.
Add a photograph from this event here.
Notes
Presentation slides:
Topics:
Notes taken during the session on the etherpad: https://etherpad.mozilla.org/owc4
- hashtag: #owc4
- http://openwebcamp.org
More notes here:
09:30am HTML5 and microformats 2 - the next evolutionary step for web data
- http://openwebcamp.org/events/56
- µformats 7 years old
- slide breakdown of structured microdata in 2012 (need URL)
- µformats dominate breakdown
- maybe ~25% RDFa
- maybe ~5% microdata
- xx% of web using structured data
- Role of simplicity and openness
- one person, TBL
- released HTML and HTTP unencumbered
- All µformats work is contributed to public domain under a Creative Commons Type 0 (CC0) license http://creativecommons.org/publicdomain/zero/1.0/
- Means that work is not lost if microformats.org goes away
- Multiple Translations of specifications and documentation completed and underway
- Why Microformats?
- Futureproofing
- Serendipity (making it easier for others coming after you)
- less-work (well known, reusable class names)
- site features/UI (vcard and ical formats)
- cheap Don't Repeat Yourself (DRY) API instead of repeating content via e.g. XML/JSON endpoint or response type
- search results
- Paring Microformats Examples
- hAtom 0.1
- Readablity (consuming hAtom)
- WordPress (hAtom already in default template)
- hCard 1.0
- consumed by search engines
- hProduct
- consumed by search engines
- hRecipe 0.22
- Food sites and Google search
- hResume
- Guardian Jobs
- Madgex (UK) wrote a client to consume
- hReview 0.4 (in progress)
- rel="me"
- Rel Value Wiki - existing rel values
- Smallest microformat 'rel="me"'
- rel author
- Google consumes this and tries to match to Google profiles
- rel="license"
- hAtom 0.1
- 7 Years of Alternative Approaches
- Structured Blogging
- Google Base (was this Metabase before? no - nothing to do with it)
- ...
- 3 Lessons Learned
- Accessibility: Humans First
- Originally using title attribute, which interfered with screen readers
- Any use of title attribute must be human readable
- Value Class Pattern instead
- Class Collisions and Losses
- common class names such as 'summary' and 'description'
- updates remove and rewrite markup
- introducing prefixed class names in microformats2
- Makes it more obvious
- 'h-', 'p-', 'u-', 'dt-', 'e-'
- Still too much markup needed
- Too many extra spans and divs
- leads to non-trivial error rates
- Solutions
- flat sets of properties, required properties don't work in practice (90210 problem)
- imply common properties (name, url, photo)
<span class="h-card">Jane User</span>
- Too many extra spans and divs
- Accessibility: Humans First
- Microformats in HTML5 and Data
- Data Tables
- See OWC Schedule Page
- Schedule table, each row implies the same time-slot, leverage that
- time and date elements
- one time element instead of three spans
- "If a five-year-old can do ISO Dates, anyone can!"
- Data Tables
- microformats2 http://microformats.org/wiki/microformats-2
- prefixed class names
- flat sets of optional properties
- single-class markup for common uses
(Historical Note: Tantek and Kevin Marks gave a very early microformats presentations here at EBay almost 8 years ago!) - "Can your website be your API?"
- http://www.svforum.org/index.cfm?fuseaction=Calendar.eventDetail&eventID=11142
- http://tantek.com/presentations/20040928sdforumws/semantic-xhtml.html
Questions:
- How many write HTML? (~ 75% of people in the room)
- How many have written/published microformats? (~ 50% of people in the room)
- what are the most common mistakes made when implementing microformats?
- misspelling root class name, e.g. hcard instead of vcard (note: fixed in microformats2 - all root class names are same as microformat, e.g. h-card, h-event etc.)
- miscapitalizaing root class name, e.g. hReview instead of hreview
- omitting "n" property in hCard when specifying "given-name", "family-name" (note: fixed in microformats2 - flat set of properties, no more "n" property in h-card)
- what are the most innovative ways microformats are being used?
- Guerrilla microformats, what are your experiences with just-adding-them
- Data Attribute instead of class names? +1
- data-* attributes are for site-specific data and script libraries only - not semantic markup, see FAQ: http://microformats.org/wiki/html5#data_attributes
- What was the name of the hCalendar to iCal converter?
- http://H2VX.com - see H2VX
- What about date and time elements with ISO datetime attrs, and use JS to fill element with locale time?
- How many have used Schema.org? (only 2 people in room)
- Is there a hHiringPost? ;-) (maybe an hJob or hCareer format?)
- There's an hListing draft draft and a related job-listing effort as well - take a look and provide feedback!
- http://microformats.org/wiki/hlisting
- http://microformats.org/wiki/job-listing
Articles and Blog Posts
Articles and blog posts following up on the meetup. Add a link to your post in the list below:
- …
Also, find posts on this meetup on Google Blog Search or Technorati.