Difference between revisions of "events/2012-07-14-open-web-camp-4"

From Microformats Wiki
events/2012-07-14-open-web-camp-4
Jump to navigation Jump to search
(→‎Photographs: photo by @frontendstuff)
m (Replace <entry-title> with {{DISPLAYTITLE:}})
 
(7 intermediate revisions by one other user not shown)
Line 1: Line 1:
<entry-title>Open Web Camp IV</entry-title>
+
{{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-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">2211 N 1st St.</span>, <span class="p-locality locality">San Jose</span>, <abbr class="p-region region" title="California">CA</abbr></span></span>
+
:<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://lanyrd.com/2012/openwebcamp-iv/</span>
:<span class="u-url url">http://lanyrd.com/2012/openwebcamp-iv/swrty</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>
Line 19: Line 18:
 
   
 
   
 
'''[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
 
'''[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 ==
 
== Open Web Camp IV ==
 
<div class="p-description description">
 
<div class="p-description description">
Line 28: Line 27:
 
** location: <span class="p-location location">Room Fireside B, PayPal Town Hall</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://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>
 
** <span class="u-url url">http://plancast.com/p/bu8p/html5-microformats-20-tantek</span>
 
</div>
 
</div>
Line 42: Line 42:
 
tags:
 
tags:
 
<kbd class="tags" style="display:block">
 
<kbd class="tags" style="display:block">
<span class="p-category category">'''html5-microformats-2'''</span>  
+
<span class="p-category category">'''html5-microformats2'''</span>  
<span class="p-category category">microformats-2</span>  
+
<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 57: 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
 
   
 
   
== Photographs ==
+
* Role of simplicity and openness
<!-- Event Author: Update the following URL to use this event's tag -->
+
** one person, TBL
* 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].
+
** 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
  
[https://twitter.com/frontendstuff/status/224192742719365122 https://p.twimg.com/Axx-HJdCIAEt-_l.jpg:large?fext=.jpg]
 
  
''Add a photograph from this event here''.
+
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 ==

Latest revision as of 16:22, 18 July 2020

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 microformat_hcalendar.png

Open Web Camp IV

Open Web Camp IV (#owc4) - featuring a session on microformats2:

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

Photographs

Axx-HJdCIAEt-_l.jpg

Add a photograph from this event here.

Notes

Presentation slides:

Topics:

Notes taken during the session on the etherpad: https://etherpad.mozilla.org/owc4

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
  • 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>
  • 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!"

(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?"


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
  • What was the name of the hCalendar to iCal converter?
  • 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)

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.

Related Pages