Oomph: A Microformat Toolkit

Karsten JanuszewskiDeveloperMicrosoft Corporation

PC55

The Mix Online Team

Not a product team and not just demos Building prototypes Putting them on Codeplex Featuring them on http://visitmix.com

Goal: Encourage adoption of Microsoft technologies

Microformats

Semantic information encoded via HTML Human readable and machine readable

About data – hCard, hCalendar, hReview, more… All the action is at http://Microformats.org Lots of traction: Yahoo, Facebook, LinkedIn, Twitter,

YouTube and many more small sites A billion hCards in the wild A hundred million hCalendars

Bill Gates during MIX06 keynote: “We need Microformats and to get people to agree on them. It is going to bootstrap exchanging data on the web…”

Consume:Internet Explorer

Add-in & HTML Overlay

Create:Windows LiveWriter Plug-in

Style:Set of CSS Styles

Oomph: A Microformat Toolkit

Oomph

Create:Windows LiveWriter Plug-in

Consume:Internet Explorer

Add-in & HTML Overlay

Style:Set of CSS Styles

Micro-formats

Oomph: A Microformat Toolkit

Consume:Internet Explorer

Add-in & HTML Overlay

Create:Windows LiveWriter Plug-in

Style:Set of CSS Styles

Consuming MicroformatsDesign goals

Provide an experience for Internet Explorer Provide an experience for other browsers No server dependencies Extensible

UsersInstall InternetExplorerAdd-in

All pages with Microformats“light up” inInternetExplorer

Consuming Microformats

Developers

Add two lines of Javascript to

pages with Microformats

Those pages “light up” inany browser

Consuming MicroformatsInternet Explorer add-in

Injects <script> tags into DOM Not on SSL pages Pull script from SSL to avoid DNS poisoning

No UI; all UI generated by Javascript Minimize C++ code!

Gotchas WebBrowserEvents --> OnDocumentLoaded vs.

HTMLDocumentEvents2 --> OnReadyStateChange

All code available on Codeplex as part of the project

IE Add-in C++ Code

Consuming Microformats HTML overlay built using JQuery

Unobtrusive Javascript Handles browser differences Now embraced by Microsoft

Part of ASP.NET Huge fan! Check out this JQuery session:

PC31 “ASP.NET and JQuery”Speaker(s): Stephen Walther

Consuming Microformats JQuery features used in Oomph

DOM queries LINQ for Javascript

HTML generation Like building WPF/Silverlight Tree

Animation engine Braindead easy to code

Script loading Cleverly handled in JQuery

Consuming Microformats Internet Explorer 8 Developer Tools

Built into browser Essential for understanding the

DOM after render pass Javascript debugging

Breakpoints, callstack, variable inspection, console

Profiler

Oomph, IE 8 Developer Tools & JQuery

Consuming MicroformatsAdditional details

Moving data around Pushing to cloud services

Bringing to the desktop vCard, iCal Exporter through

ASP.NET handler pages Geocoding using Virtual Earth

BB10 “Live Services: Deep Dive on Microsoft Virtual Earth” by Mark Brown

Oomph: A Microformat Toolkit

Consume:Internet Explorer

Add-in & HTML Overlay

Create:Windows LiveWriter Plug-in

Style:Set of CSS Styles

Users

Install Windows Live WriterPlug-in

Easily add Microformated content to your webpages

Creating & Styling Microformats

DesignersDownload and link to our CSS styles

Make your pages with Microformats look great

Creating Microformats Windows Live Writer Plug-in

Blogs are the new Content Management Solutiosn (CMS)

Windows Live Writer targets all blogging platforms (WordPress, MoveableType, etc.)

Plug-in Model super simple! Add WindowsLive.Writer.Api.dll Add [WriterPlugin] and

[InsertableContentSource] Override CreateContent Attach to Windows Live Writer

process to debug

Styling Microformats

CSS is a programming language! Incredibly powerful, simple

Oomph & Windows Live Writer

Oomph Extensibility

Oomph only tackled two Microformats hCard & hCalendar

Other Microformats out there New ones being developed all the time

Oomph is extensible Add your own Microformats

Oomph Extensibility: hAudio

Call To Action

Download from Codeplex http://codeplex.com/oomph

Contribute to Codeplex Watch for future projects on

http://visitmix.com Check us out at MIX09!

Evals & Recordings

Please fill

out your

evaluation for

this session at:

This session will be available as a recording at:

www.microsoftpdc.com

Please use the microphones provided

Q&A

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market

conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.