Placelessness and the Advance of Micropublishing

F
Placelessness
And
the
Advance
of
Micropublishing




             Alex Faaborg
           Mozilla Corporation
mozilla Labs

The mockups shown in this presentation are not
   necessarily planned features for Firefox 3
However

These are topics we are spending a lot of time

  thinking about / designing / prototyping /
        hacking / testing / rethinking /
                 iterating on
This presentation will answer
         4 questions
1) What are microformats?
2) Why does Mozilla care about
       microformats?
3) What does a microformat-aware
    Web browser look like?
4) Why should Web sites expose their
    content using microformats?
1) What are microformats?




  ... and why are we talking about this in a
session about Design and User Experience?
Technologies like microformats are fundamental
      to Human Computer Interaction
Information




 Human          Machine
Readable        Readable
Plain Text

Alex Faaborg
http://mozilla.com
Mozilla




                    Not Machine
 Human               Machine
                     Readable
Readable
vCard
            BEGIN:VCARD
            VERSION:3.0
            FN:Alex Faaborg
            URL:http://www.mozilla.com
            ORG:Mozilla
            END:VCARD




                        Machine
Not Human
  Human
                        Readable
 Readable
CAPTCHA




            Not Machine
 Human       Machine
             Readable
Readable
Firefox Dialog




              Not Machine
Not Human
  Human        Machine
               Readable
 Readable
HTML
                        Alex Faaborg
                        Mozilla

<div>
<a href=quot;http://blog.mozila.com/faaborg/quot;>Alex Faaborg</a>
<div>Mozilla</div>
</div>




                                         Not Machine
             Human                         Machine
                                       Readable (content)
            Readable                       Readable
Microformat - hCard
                        Alex Faaborg
                        Mozilla

<div class=quot;vcardquot;>
<a class=quot;url fnquot; href=quot;http://blog.mozila.com/faaborg/quot;>Alex Faab
<div class=quot;orgquot;>Mozilla</div>
</div>




                                        Machine
             Human
                                        Readable
            Readable
What are microformats?




... a way to create information that is both
        human and machine readable
What are microformats?




...they give humans and computers a common
       ground for discussing information
Information like:

Contacts - hCard
Calendar Events - hCalendar
Locations - geo, adr
Tags - rel-tag
Spam URLs - rel-nofollow
Relationships - XFN
Reviews - hReview
Resumes - hResume
Feeds - hAtom
Licenses - rel-license
Voting on Links - VoteLinks ↓ A whole lot more
Information like:

Contacts - hCard
Calendar Events - hCalendar
Locations - geo, adr
Tags - rel-tag
Spam URLs - rel-nofollow
Relationships - XFN
Reviews - hReview
Resumes - hResume
Feeds - hAtom
Licenses - rel-license
Voting on Links - VoteLinks ↓ A whole lot more
Ways to learn more about microformats:




microformats.org


                   Ask a question,
                     get a book

                                     Tuesday, 1:30
                                       In 2003

                                               Wednesday, 4:30
                                                  In 2008
2) Why does Mozilla care about
       microformats?
The evolution of the Web browser...
1993                            Web Browser as Book




C   Photo by Derbeth (Flickr)
2005                                   Web Browser as Radio




C   Photo by Darius Capulet (Flickr)
2008                          Web Browser as Switchboard




C Photo by Neil Rickards (Flickr)
1993                   2005                             2008




        Book                       Radio                       Switchboard
        Bookmarks                 Live Bookmarks                Microformat Detection

       Back and Next           RSS Reader Integration           Application Integration




       You find the            You subscribe to the                You move the
       information                information                  information around
Multiple types of
                                     information




                                                        Not hard wired: the user is in
                                                         control of the associations




C Photo by Neil Rickards (Flickr)
At each stage the Web browser has been trying
   to keep up with the evolution of the Web
RSS
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
The same thing is happening now for other
        types of structured data
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
There are a lot of microformats,
which ones should a web browser
        natively support?
hCard   geo, adr   hCalendar
These three types of information
        are fundamental
People exist in space and time
exist in   and
Space and Time also map to common
   representations of information
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
The Web




                                                  +

                                         Further customization
                                       provided by the extension
                                       development community.
The Web




          New Microformats
please don’t hurt the web
   use open standards
3) What does a microformat-aware
    Web browser look like?
Demo:

How can microformats help you get a beer,
                tonight
Created by Mike Kaply, IBM

Try it out: labs.mozilla.com
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
History
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Bookmarks
Placelessness and the Advance of Micropublishing
Should Firefox display detected
microformats in the content area?
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Modal interfaces suck
Placelessness and the Advance of Micropublishing
Placelessness and the Advance of Micropublishing
Don’t change the content area!
Placelessness and the Advance of Micropublishing
Microformat creation?
Placelessness and the Advance of Micropublishing
4) Why should Web sites expose their
    content using microformats?
please don’t hurt the web
   use open standards




                            1
2
3
C   Photo by Orin Optiglot (Flickr)
This presentation was
                                                     based on work by:


                                                     Tanktek Çelik
                                                     Ray Ozzie
                                                     Michael Kaply
                                                     Chris Messina
                                                     Wolfgang Bartelme
                                                     John Allsopp
                                                     Mike Beltzner
                                                     Mike Shaver
                                                     John Lilly
                                                     Basil Hashem
                                    Questions...     Sean Martell
                                                     Sherman Dickman
                                                     Seth Spitzer




                                                     faaborg@mozilla.com

C   Attribution-ShareAlike 3.0
                                                     blogs.mozilla.com/faaborg
    http://creativecommons.org/licenses/by-sa/3.0/
                                                     labs.mozilla.com
1 of 91

Recommended

全てのエンジニアのためのWeb標準技術とのつきあい方 OSC福岡 2011版 by
全てのエンジニアのためのWeb標準技術とのつきあい方 OSC福岡 2011版全てのエンジニアのためのWeb標準技術とのつきあい方 OSC福岡 2011版
全てのエンジニアのためのWeb標準技術とのつきあい方 OSC福岡 2011版Rikkyo University
922 views56 slides
Popular&folkcultures by
Popular&folkculturesPopular&folkcultures
Popular&folkculturesjhelambina
1.8K views40 slides
The Future of Firefox by
The Future of FirefoxThe Future of Firefox
The Future of FirefoxTristan Nitot
2.6K views18 slides
TikiFest Montreal March 2009 by
TikiFest Montreal March 2009TikiFest Montreal March 2009
TikiFest Montreal March 2009Régis Barondeau
1.4K views18 slides
Mozilla And Open Web by
Mozilla And Open WebMozilla And Open Web
Mozilla And Open WebBrian King
797 views31 slides
Skb web2.0 by
Skb web2.0Skb web2.0
Skb web2.0animove
931 views36 slides

More Related Content

Similar to Placelessness and the Advance of Micropublishing

Science and Web2.0 by
Science and Web2.0Science and Web2.0
Science and Web2.0Ian Mulvany
7K views33 slides
Change by HTML5 by
Change by HTML5Change by HTML5
Change by HTML5dynamis
1.2K views125 slides
HTML for beginners by
HTML for beginnersHTML for beginners
HTML for beginnersSalahaddin University-Erbil
316 views71 slides
Mozilla - brief introduction & community collaboration by
Mozilla - brief introduction & community collaborationMozilla - brief introduction & community collaboration
Mozilla - brief introduction & community collaborationIrvin Chen
3.5K views32 slides
myExperiment @ Nettab by
myExperiment @ NettabmyExperiment @ Nettab
myExperiment @ NettabDuncan Hull
2.9K views38 slides
Practical Microformats - Voices That Matter by
Practical Microformats - Voices That MatterPractical Microformats - Voices That Matter
Practical Microformats - Voices That MatterEmily Lewis
18.6K views102 slides

Similar to Placelessness and the Advance of Micropublishing(20)

Change by HTML5 by dynamis
Change by HTML5Change by HTML5
Change by HTML5
dynamis 1.2K views
Mozilla - brief introduction & community collaboration by Irvin Chen
Mozilla - brief introduction & community collaborationMozilla - brief introduction & community collaboration
Mozilla - brief introduction & community collaboration
Irvin Chen3.5K views
myExperiment @ Nettab by Duncan Hull
myExperiment @ NettabmyExperiment @ Nettab
myExperiment @ Nettab
Duncan Hull2.9K views
Practical Microformats - Voices That Matter by Emily Lewis
Practical Microformats - Voices That MatterPractical Microformats - Voices That Matter
Practical Microformats - Voices That Matter
Emily Lewis18.6K views
Mozilla 2009 All Hands by John Lilly
Mozilla 2009 All HandsMozilla 2009 All Hands
Mozilla 2009 All Hands
John Lilly7.3K views
Social Media Adoption - The IBM Story by Dvir Reznik
Social Media Adoption - The IBM StorySocial Media Adoption - The IBM Story
Social Media Adoption - The IBM Story
Dvir Reznik2.4K views
You Can Change the World (Wide Web) by Mark Frydenberg
You Can Change the World (Wide Web)You Can Change the World (Wide Web)
You Can Change the World (Wide Web)
Mark Frydenberg356 views
Is data sharing the privilege of a few? Bringing Linked Data to those without... by Christophe Guéret
Is data sharing the privilege of a few? Bringing Linked Data to those without...Is data sharing the privilege of a few? Bringing Linked Data to those without...
Is data sharing the privilege of a few? Bringing Linked Data to those without...
Christophe Guéret2.4K views
The History and Status of Mozilla Korean Community by Channy Yun
The History and Status of Mozilla Korean CommunityThe History and Status of Mozilla Korean Community
The History and Status of Mozilla Korean Community
Channy Yun7.3K views
The Evolving Architecture by William Grosso
The Evolving ArchitectureThe Evolving Architecture
The Evolving Architecture
William Grosso1.4K views
Web application development - The past, the present, the future by Juho Vepsäläinen
Web application development - The past, the present, the futureWeb application development - The past, the present, the future
Web application development - The past, the present, the future
Juho Vepsäläinen394 views
Jaiku - Microblogging Tiny Social Objects On The Future Of Participatory Media by Mobile Monday Amsterdam
Jaiku - Microblogging Tiny Social Objects On The Future Of Participatory MediaJaiku - Microblogging Tiny Social Objects On The Future Of Participatory Media
Jaiku - Microblogging Tiny Social Objects On The Future Of Participatory Media
Information Virtualization with Microformats - draft by Vashira Ravipanich
Information Virtualization with Microformats - draftInformation Virtualization with Microformats - draft
Information Virtualization with Microformats - draft
Vashira Ravipanich396 views

Recently uploaded

State of the Union - Rohit Yadav - Apache CloudStack by
State of the Union - Rohit Yadav - Apache CloudStackState of the Union - Rohit Yadav - Apache CloudStack
State of the Union - Rohit Yadav - Apache CloudStackShapeBlue
218 views53 slides
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...James Anderson
142 views32 slides
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...ShapeBlue
74 views17 slides
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueShapeBlue
68 views13 slides
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ... by
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...ShapeBlue
48 views17 slides
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueShapeBlue
149 views7 slides

Recently uploaded(20)

State of the Union - Rohit Yadav - Apache CloudStack by ShapeBlue
State of the Union - Rohit Yadav - Apache CloudStackState of the Union - Rohit Yadav - Apache CloudStack
State of the Union - Rohit Yadav - Apache CloudStack
ShapeBlue218 views
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson142 views
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava... by ShapeBlue
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
Centralized Logging Feature in CloudStack using ELK and Grafana - Kiran Chava...
ShapeBlue74 views
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
ShapeBlue68 views
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ... by ShapeBlue
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
Import Export Virtual Machine for KVM Hypervisor - Ayush Pandey - University ...
ShapeBlue48 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue149 views
DRBD Deep Dive - Philipp Reisner - LINBIT by ShapeBlue
DRBD Deep Dive - Philipp Reisner - LINBITDRBD Deep Dive - Philipp Reisner - LINBIT
DRBD Deep Dive - Philipp Reisner - LINBIT
ShapeBlue110 views
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue by ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlueVNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
VNF Integration and Support in CloudStack - Wei Zhou - ShapeBlue
ShapeBlue134 views
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by ShapeBlue
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
ShapeBlue93 views
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool by ShapeBlue
Extending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPoolExtending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPool
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool
ShapeBlue56 views
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc130 views
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ... by ShapeBlue
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
ShapeBlue121 views
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT by ShapeBlue
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
ShapeBlue138 views
Confidence in CloudStack - Aron Wagner, Nathan Gleason - Americ by ShapeBlue
Confidence in CloudStack - Aron Wagner, Nathan Gleason - AmericConfidence in CloudStack - Aron Wagner, Nathan Gleason - Americ
Confidence in CloudStack - Aron Wagner, Nathan Gleason - Americ
ShapeBlue58 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Webinar : Desperately Seeking Transformation - Part 2: Insights from leading... by The Digital Insurer
Webinar : Desperately Seeking Transformation - Part 2:  Insights from leading...Webinar : Desperately Seeking Transformation - Part 2:  Insights from leading...
Webinar : Desperately Seeking Transformation - Part 2: Insights from leading...

Placelessness and the Advance of Micropublishing

  • 2. mozilla Labs The mockups shown in this presentation are not necessarily planned features for Firefox 3
  • 3. However These are topics we are spending a lot of time thinking about / designing / prototyping / hacking / testing / rethinking / iterating on
  • 4. This presentation will answer 4 questions
  • 5. 1) What are microformats?
  • 6. 2) Why does Mozilla care about microformats?
  • 7. 3) What does a microformat-aware Web browser look like?
  • 8. 4) Why should Web sites expose their content using microformats?
  • 9. 1) What are microformats? ... and why are we talking about this in a session about Design and User Experience?
  • 10. Technologies like microformats are fundamental to Human Computer Interaction
  • 11. Information Human Machine Readable Readable
  • 12. Plain Text Alex Faaborg http://mozilla.com Mozilla Not Machine Human Machine Readable Readable
  • 13. vCard BEGIN:VCARD VERSION:3.0 FN:Alex Faaborg URL:http://www.mozilla.com ORG:Mozilla END:VCARD Machine Not Human Human Readable Readable
  • 14. CAPTCHA Not Machine Human Machine Readable Readable
  • 15. Firefox Dialog Not Machine Not Human Human Machine Readable Readable
  • 16. HTML Alex Faaborg Mozilla <div> <a href=quot;http://blog.mozila.com/faaborg/quot;>Alex Faaborg</a> <div>Mozilla</div> </div> Not Machine Human Machine Readable (content) Readable Readable
  • 17. Microformat - hCard Alex Faaborg Mozilla <div class=quot;vcardquot;> <a class=quot;url fnquot; href=quot;http://blog.mozila.com/faaborg/quot;>Alex Faab <div class=quot;orgquot;>Mozilla</div> </div> Machine Human Readable Readable
  • 18. What are microformats? ... a way to create information that is both human and machine readable
  • 19. What are microformats? ...they give humans and computers a common ground for discussing information
  • 20. Information like: Contacts - hCard Calendar Events - hCalendar Locations - geo, adr Tags - rel-tag Spam URLs - rel-nofollow Relationships - XFN Reviews - hReview Resumes - hResume Feeds - hAtom Licenses - rel-license Voting on Links - VoteLinks ↓ A whole lot more
  • 21. Information like: Contacts - hCard Calendar Events - hCalendar Locations - geo, adr Tags - rel-tag Spam URLs - rel-nofollow Relationships - XFN Reviews - hReview Resumes - hResume Feeds - hAtom Licenses - rel-license Voting on Links - VoteLinks ↓ A whole lot more
  • 22. Ways to learn more about microformats: microformats.org Ask a question, get a book Tuesday, 1:30 In 2003 Wednesday, 4:30 In 2008
  • 23. 2) Why does Mozilla care about microformats?
  • 24. The evolution of the Web browser...
  • 25. 1993 Web Browser as Book C Photo by Derbeth (Flickr)
  • 26. 2005 Web Browser as Radio C Photo by Darius Capulet (Flickr)
  • 27. 2008 Web Browser as Switchboard C Photo by Neil Rickards (Flickr)
  • 28. 1993 2005 2008 Book Radio Switchboard Bookmarks Live Bookmarks Microformat Detection Back and Next RSS Reader Integration Application Integration You find the You subscribe to the You move the information information information around
  • 29. Multiple types of information Not hard wired: the user is in control of the associations C Photo by Neil Rickards (Flickr)
  • 30. At each stage the Web browser has been trying to keep up with the evolution of the Web
  • 31. RSS
  • 34. The same thing is happening now for other types of structured data
  • 46. There are a lot of microformats, which ones should a web browser natively support?
  • 47. hCard geo, adr hCalendar
  • 48. These three types of information are fundamental
  • 49. People exist in space and time
  • 50. exist in and
  • 51. Space and Time also map to common representations of information
  • 55. The Web + Further customization provided by the extension development community. The Web New Microformats
  • 56. please don’t hurt the web use open standards
  • 57. 3) What does a microformat-aware Web browser look like?
  • 58. Demo: How can microformats help you get a beer, tonight
  • 59. Created by Mike Kaply, IBM Try it out: labs.mozilla.com
  • 69. Should Firefox display detected microformats in the content area?
  • 83. Don’t change the content area!
  • 87. 4) Why should Web sites expose their content using microformats?
  • 88. please don’t hurt the web use open standards 1
  • 89. 2
  • 90. 3 C Photo by Orin Optiglot (Flickr)
  • 91. This presentation was based on work by: Tanktek Çelik Ray Ozzie Michael Kaply Chris Messina Wolfgang Bartelme John Allsopp Mike Beltzner Mike Shaver John Lilly Basil Hashem Questions... Sean Martell Sherman Dickman Seth Spitzer faaborg@mozilla.com C Attribution-ShareAlike 3.0 blogs.mozilla.com/faaborg http://creativecommons.org/licenses/by-sa/3.0/ labs.mozilla.com