Post on 31-Aug-2014
description
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar1
Riccardo La Rosa
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar2
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar3
Goruneasy.com
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar4
Mash-up, Mash-up, Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar5
Is this a Web2.0 site?
ratings
ugc: comment
tagging Discussion forum
ugc: run
ugc: note
ugc: photo
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar6
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar7
Mash-ups
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar8
Google Maps Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar9
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar10
Google Maps
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar11
Flickr Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar12
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!
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar13
Flickr Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar14
Flickr Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar15
iTunes Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar16
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar17
iTunes Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar18
JumpCut Mash-up
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar19
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar20
Mash-up resource
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar21
Navigation
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar22
Island Hopping Navigation
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar23
Island Hopping Navigationtile-inner 4500 x 2100
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar24
Island Hopping Navigation
<div id="homeframe" class="iframes offisland" style="left: 1450px; top: 59px; position: relative;">…</div>
<iframe id="mapframe" class="iframes" style="left: 141px; top: 1080px;" allowtransparency="true" src="blank.html"></iframe>
<iframe id="sayframe" class="iframes" style="left: 3036px; top: 1080px;" allowtransparency="true" src="blank.html"></iframe>
<iframe id="gearframe" class="iframes" style="left: 1471px; top: 1080px;" allowtransparency="true" src="blank.html"></iframe>
<iframe id="watchframe" class="iframes" style="left: 141px; top: 59px;" allowtransparency="true" src="blank.html"></iframe>
<iframe id="hearframe" class="iframes" style="left: 3036px; top: 59px;" allowtransparency="true" src="blank.html"></iframe>
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar25
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;
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar26
Internationalization
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar27
Internationalize it all!
• 15 Languages
• Typical i18n problems:– Images– Text
• ASP.NET to the rescue
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar28
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar29
Local Resources
Anything that is specific to a page (e.g.: text)
<asp:Label ID="lbWhereRunEasy" runat="server"
Text="Where do you want to Run Easy?" meta:resourcekey="lbWhereRunEasyResource1" />
• Page.aspx (you)
<data name="lbWhereRunEasyResource1.Text" xml:space="preserve">
<value>Where do you want to Run Easy?</value>
</data>
• Page.aspx.resx (automatic)
<data name="lbWhereRunEasyResource1.Text" xml:space="preserve">
<value>Dove vuoi correre Run Easy?</value>
</data>
• Page.aspx.resx.it-IT (your translation company)
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar30
Mobile
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar31
Mobile integration
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar32
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
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar33
OpenID
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar34
OpenID
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar35
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/
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar36
Discussion Forum
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar37
Keeping it social
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar38
Keeping it social
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar39
Campaigns
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar40
Digital campaigns: other social networks
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar41
Integrate with other social networks
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar42
Non digital campaigns
Copyright © 2007 Molecular, Inc. | www.molecular.com | Linked by Isobar43
Thank you!
Riccardo.LaRosa@molecular.com
http://www.molecular.com/webbuilder20