Riccardo La Rosa

Agenda Building mash-ups GoogleMaps, Flickr, iTunes and JumpCut Ajax + Flash + Frameworks Island hopping navigation Internationalize it all Mobile integration OpenID: why use it? Keep it social Digital and non digital campaigns

Building mash-ups

GoogleMaps, Flickr, iTunes and JumpCut

Ajax + Flash + Frameworks

Island hopping navigation

Internationalize it all

Mobile integration

OpenID: why use it?

Keep it social

Digital and non digital campaigns

Goruneasy.com

Mash-up, Mash-up, Mash-up

Is this a Web2.0 site? ratings ugc: comment tagging Discussion forum ugc: run ugc: note ugc: photo

Technology used ASP.NET prototype + script.aculo.us Yahoo! Browser History Manager Lightbox Firebug + Firefox = rock on! Flash for iTunes playlists and JumpCut video editing

ASP.NET

prototype + script.aculo.us

Yahoo! Browser History Manager

Lightbox

Firebug + Firefox = rock on!

Flash for iTunes playlists and JumpCut video editing

Mash-ups

Mash-ups

Google Maps Mash-up

Google Maps map = new GMap2 (document.getElementById("map")); Other Important APIs: GClientGeocoder : not always accurate. We also used Yahoo! Geocoder when Google failed GEvent .addListener (map,"moveend",drawVisibleRoutes); var xml = GXml .parse(transport.responseText); Note: APIs will change and you won’t know

map = new GMap2 (document.getElementById("map"));

Other Important APIs:

GClientGeocoder : not always accurate. We also used Yahoo! Geocoder when Google failed

GEvent .addListener (map,"moveend",drawVisibleRoutes);

var xml = GXml .parse(transport.responseText);

Note: APIs will change and you won’t know

Google Maps

Flickr Mash-up

Flickr Mash-up searchOptions .Extras |= PhotoSearchExtras.Geo; Photos photos = flickr. PhotosSearch (searchOptions); Take the time to understand Flickr User Authentication and Authorization Authorize users to see their pictures in our apps Store the token in the cookie Commercial vs non Commercial license considerations Used Flickr.NET wrapper (or any other wrapper): it’s open source!

searchOptions .Extras |= PhotoSearchExtras.Geo;

Photos photos = flickr. PhotosSearch (searchOptions);

Take the time to understand Flickr User Authentication and Authorization

Authorize users to see their pictures in our apps

Store the token in the cookie

Commercial vs non Commercial license considerations

Used Flickr.NET wrapper (or any other wrapper): it’s open source!

Flickr Mash-up

Flickr Mash-up

iTunes Mash-up

iTunes Mash-up The least open of all systems Hack into the xml that is passed to the Flash movie to get some information iTunes doesn’t it make it easy, Public playlists are not loved by users

The least open of all systems

Hack into the xml that is passed to the Flash movie to get some information

iTunes doesn’t it make it easy,

Public playlists are not loved by users

iTunes Mash-up

JumpCut Mash-up

JumpCut Mash-up Doesn’t provide public API Product was still in Beta when we launched Did not want to replace YouTube for users Allow users to mix video: create their own Run Easy campaign

Doesn’t provide public API

Product was still in Beta when we launched

Did not want to replace YouTube for users

Allow users to mix video: create their own Run Easy campaign

Mash-up resource

Navigation

Navigation

Island Hopping Navigation

Island Hopping Navigation tile-inner 4500 x 2100

Island Hopping Navigation < div id=&quot;homeframe&quot; class=&quot;iframes offisland&quot; style=&quot; left: 1450px; top: 59px ; position: relative;&quot;>…</div> < iframe id=&quot;mapframe&quot; class=&quot;iframes&quot; style=&quot; left: 141px; top: 1080px ;&quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe> < iframe id=&quot;sayframe&quot; class=&quot;iframes&quot; style=&quot; left: 3036px; top: 1080px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe> < iframe id=&quot;gearframe&quot; class=&quot;iframes&quot; style=&quot; left: 1471px; top: 1080px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe> < iframe id=&quot;watchframe&quot; class=&quot;iframes&quot; style=&quot; left: 141px; top: 59px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe> < iframe id=&quot;hearframe&quot; class=&quot;iframes&quot; style=&quot; left: 3036px; top: 59px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe>

< div id=&quot;homeframe&quot; class=&quot;iframes offisland&quot; style=&quot; left: 1450px; top: 59px ; position: relative;&quot;>…</div>

< iframe id=&quot;mapframe&quot; class=&quot;iframes&quot; style=&quot; left: 141px; top: 1080px ;&quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe>

< iframe id=&quot;sayframe&quot; class=&quot;iframes&quot; style=&quot; left: 3036px; top: 1080px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe>

< iframe id=&quot;gearframe&quot; class=&quot;iframes&quot; style=&quot; left: 1471px; top: 1080px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe>

< iframe id=&quot;watchframe&quot; class=&quot;iframes&quot; style=&quot; left: 141px; top: 59px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe>

< iframe id=&quot;hearframe&quot; class=&quot;iframes&quot; style=&quot; left: 3036px; top: 59px; &quot; allowtransparency=&quot;true&quot; src=&quot;blank.html&quot;></iframe>

Island Hopping Navigation islands.each( function(el){ // look through the island if (el.files.indexOf(parsed.fileName.toLowerCase()) != -1){ // if we find a filename that matches our hash moveTo(el.id, el.dropper, url); // move the view to that // island } }); new Effect. Scroll (container, x:(element_x-container_x), y:(element_y-container_y)}); this.element.scrollLeft = this.options.x * position + this.originalLeft;

islands.each( function(el){ // look through the island

if (el.files.indexOf(parsed.fileName.toLowerCase()) != -1){ // if we find a filename that matches our hash

moveTo(el.id, el.dropper, url); // move the view to that // island

}

});

Internationalization

Internationalization

Internationalize it all! 15 Languages Typical i18n problems: Images Text ASP.NET to the rescue

15 Languages

Typical i18n problems:

Images

Text

ASP.NET to the rescue

Global Resources Anything that is global to the application that you want to access as a constant from your code: Resources.Resource.distanceUnit it’s either kilometers or miles

Anything that is global to the application that you want to access as a constant from your code:

Resources.Resource.distanceUnit it’s either kilometers or miles

Local Resources Anything that is specific to a page (e.g.: text) <asp:Label ID=&quot;lbWhereRunEasy&quot; runat=&quot;server&quot; Text=&quot;Where do you want to Run Easy?&quot; meta:resourcekey=&quot;lbWhereRunEasyResource1 &quot; /> Page.aspx (you) <data name=&quot;lbWhereRunEasyResource1.Text&quot; xml:space=&quot;preserve&quot;> <value>Where do you want to Run Easy?</value> </data> Page.aspx.resx (automatic) <data name=&quot;lbWhereRunEasyResource1.Text&quot; xml:space=&quot;preserve&quot;> <value>Dove vuoi correre Run Easy?</value> </data> Page.aspx.resx.it-IT (your translation company)

Anything that is specific to a page (e.g.: text)

Page.aspx (you)

Page.aspx.resx (automatic)

Page.aspx.resx.it-IT (your translation company)

Mobile

Mobile

Mobile integration

Mobile integration Technology is easy SMS = XML Wireless providers are hard Different agreements and costs for each Can’t insert links in SMS Note: Not every mobile user has a data plan

Technology is easy

SMS = XML

Wireless providers are hard

Different agreements and costs for each

Can’t insert links in SMS

Note: Not every mobile user has a data plan

OpenID

OpenID

OpenID

OpenID Why create another username/password? OpenID is not perfect But it’s a good starting point Before Google OpenSocial came out this was one of the few option Code is open source: contribute! http://code.google.com/p/dotnetopenid/

Why create another username/password?

OpenID is not perfect

But it’s a good starting point

Before Google OpenSocial came out this was one of the few option

Code is open source: contribute!

http://code.google.com/p/dotnetopenid/

Discussion Forum

Discussion Forum

Keeping it social

Keeping it social

Campaigns

Campaigns

Digital campaigns: other social networks

Integrate with other social networks

Non digital campaigns

Thank you! [email_address] http://www.molecular.com/webbuilder20

[email_address]

http://www.molecular.com/webbuilder20