hcard-input-interface: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(add subscribe note for UI)
mNo edit summary
Line 32: Line 32:


=== web address candidates ===
=== web address candidates ===
* http://tantek.com - full URL
* http://tantek.com - full personal URL which has an hcard
* facebook.com/hillary - facebook, omit <nowiki>"http://"</nowiki>
* facebook.com/hillary - facebook, omit <nowiki>"http://"</nowiki>
* @perivision - twitter
* @perivision - twitter
Line 53: Line 53:
== related topics ==
== related topics ==
* [http://www.flickr.com/photos/factoryjoe/tags/nascar Nascar problem]
* [http://www.flickr.com/photos/factoryjoe/tags/nascar Nascar problem]
* [http://flic.kr/p/6HUhce|early wireframe] (at flickr)


== see also ==
== see also ==
* [[hcard]]
* [[hcard]]
* [[hcard-user-interface]]
* [[hcard-user-interface]]

Revision as of 01:36, 26 July 2009

<entry-title>hCard Input Interface and hCard sign-up UI</entry-title>

One of several projects at microformatsDevCamp.

summary

The goal here is to create a radically minimal signup process, utilizing hCards. Interface will use hCard information retrieved form a user’s “web-address” to populate fields needed for signup.

hCard Input Interface

  • Build a nice clean UI for filling in an hCard's info

hCard sign-up UI

  • How can we make it even easier to sign-up on a website using hCards?
  • How can subscribing to hCards help users' profiles stay more up to date (e.g. their profile photo/icon/avatar) ?

participants

  • Chad Weider
  • Tantek Çelik
  • Faruk Ateş
  • Cindy Li
  • Hillary Hartley
  • Duncan

white board notes

cool.example.com

web address: |____________________|

(Sign up)

where people can enter anything web address like into the one field

web address candidates

  • http://tantek.com - full personal URL which has an hcard
  • facebook.com/hillary - facebook, omit "http://"
  • @perivision - twitter
  • google.com/profile/hillary - google profile, omit http:
  • dwerner@example.com - email address profile via gravatar
  • ...

implementation steps

Back-end:

  • Get target URL
  • Fetch content
  • Parse; generate hCard
  • Return hCard

Front-end:

  • Input target URL
  • Goes to back-end
  • Populates Form

related topics

see also