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

From Microformats Wiki
Jump to navigation Jump to search
(drafted)
 
m (Replace <entry-title> with {{DISPLAYTITLE:}})
 
(12 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-adr adr"><span class="p-locality locality">San Francisco</span>, <abbr class="p-region region" title="California">CA</abbr></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://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">http://plancast.com/p/bu8p/html5-microformats-20-tantek</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
 
== Microformats.org 7th Anniversary Celebration ==
== 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.0 - the next evolutionary step for web data
<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-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 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>
   
   
== Photographs ==
* [[HTML5]] and Data
<!-- Event Author: Update the following URL to use this event's tag -->
** Data Tables
* 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].
*** 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
   
   
''Add a photograph from this event here''.
(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

One of several 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 microformats-2:

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
  • Paring Microformats Examples
  • 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>
  • 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 presentation 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)
    • Which vocabularies? (Product, Article - could use hProduct and hAtom instead)

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

Retrieved from "http://microformats.org/wiki/index.php?title=events/2012-07-14-open-web-camp-4&oldid=69695"