Featured Site: Inkubook
Where? http://inkubook.com/
Developer: Inkubook
The Site
Inkubook, an Author Solutions brand, is an easy-to-use online service that enables people to make heirloom-quality photo books in minutes. Anyone with an Internet connection can upload photos, choose a layout and style, and drag the pictures into a virtual photo album. When the customer is ready to produce the hardcopy album, it is printed on 100 lb. archival-quality silk paper and shipped within a few business days. Inkubook creators can invite friends to contribute text and photos, which makes collaborative book-making fast and fun. "Inkubook makes it easy for everyone, even those who don't consider themselves technologically savvy, to manage photo book projects and create gorgeous keepsakes in minutes," said Dave McCauley, president of Inkubook.
The Inkubook website was created using a wide range of Microsoft® technologies, including Microsoft Silverlight 2.0, a member of the Windows Live network of Internet services. Specifically, the photo book-editing interface is a Silverlight application that provides an interactive environment for customers to create their photo albums. "Silverlight allows us to maintain a responsive, rich user interface for building photo books of all kinds," says McCauley.
Why the Windows Live Platform?
When asked about the benefits of deploying Silverlight, Director of IT James Stanley quickly cites speed to market. "We had a very challenging time frame," he explains. "The Silverlight platform afforded us a way to create an interactive customer experience quickly. Silverlight also works as expected; it's fast and very smooth." Other benefits of Silverlight include:
- Cross-browser compatibility eases programming and covers the vast majority of end-users.
- Easy to learn programming interface required no additional developer training.
- Useful SDK's and API provided helpful reference information.
Programming Environment
Inkubook's team used Microsoft development technologies to build and support the website, including Microsoft .NET framework 3.5, Visual Studio Team System 2008, ASP.NET 3.5, Windows Communication Foundation, Windows Server 2008, Team Foundation Server 2008, Expression Studio 2.0, and SQL Server 2005.
Under the Hood
The following XAML code sample shows how a photo book page is set up and rendered in Silverlight.
<UserControl x:Class="Asi.Inkubook.Silverlight.Editor.PageTurnUC"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" >
<UserControl.Resources>
<LinearGradientBrush x:Key="HorizontalBrownGradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF928C7E"/>
<GradientStop Color="#FF5A5851" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="EditorPanScrollStyle" TargetType="ScrollBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
Featured Site: SportsDo
Where? http://www.sportsdo.net/
Developer: Sentient
The Site
Developed by British outdoor enthusiasts Jonathan Greensted, Nick Francis and colleagues, SportsDo is a sports tracking and logging system that enables athletes to record performance data in real time using their mobile "smart phone." When loaded with SportsDo software, the phone can issue visual or vocal performance updates to the athlete, and optionally broadcast the statistics live to friends and family. A complete log of the event can be uploaded for later analysis on the SportsDo web portal. SportsDo displays training routes on detailed 3D maps powered by Microsoft® Virtual Earth, a component of the Microsoft Windows Live network of Internet services. An athlete can analyze and replay a training session, such as the ski runs shown in the example, by watching performance statistics such as speed and elevation as a "doer" icon retraces the route. Route maps and performance data can also be shared with other members through the SportsDo website.
Why the Windows Live Platform?
"Affordable GPS and cellular technologies, combined with the power and convenience of XML-based Web services such as Virtual Earth, enabled us to develop SportsDo," says Greensted. "Virtual Earth provided a very high-quality mapping solution, with excellent 3D rendering, high resolution imaging at all zoom levels, and intuitive user interface." Other benefits of Windows Live Services include ease of use, enabling fast integration of Virtual Earth into the website. Clear, easy to use SDKs and APIs also provided helpful support to the development team.
Programming Environment
SportsDo was developed at Greensted's London-based software company Sentient with the Microsoft .NET framework 2.0, Microsoft ASP.NET AJAX, Visual Studio® 2005,and Microsoft SQL Server® 2005. The site is coded using C# for web services and the back end, and JavaScript and ASPX files for visualization.
Under the Hood
The following code shows how to display icons in 2D and 3D Virtual Earth maps of tracked sporting performances.
function AddPoints(points) {
// create an array to store the VEShape pushpins
var shapes = [];
for (var i=0; i
var pt = points[i];
var pushpin = new VEShape(VEShapeType.Pushpin, new VELatLong(pt.latitude, pt.longitude));
var iconSpec = new VECustomIconSpecification();
// customHTML to be used as icon in 2D mode
iconSpec.CustomHTML = "";
// icon that's used in 3D mode
iconSpec.Image = 'http://www.sportsdo.net/ui/icons/marker' + i + '.gif';
iconSpec.ImageOffset = new VEPixel(0, 0);
// set the icon for the pushpin
pushpin.SetCustomIcon(iconSpec);
// add to the array for later adding to the map
shapes.push(pushpin);
}
// bulk add the shapes to the map
map.AddShape(shapes);
}
Featured Mashup: Thomas Cook Northern Europe
Where? http://www.thomascook.se/start/start.aspx?
Developer: Thomas Cook team
The Site
Thomas Cook Group PLC is a leading international leisure travel group, created by the merger of MyTravel Group PLC and Thomas Cook AG in June 2007. The Group enjoyed €12 billion in revenue in 2007, employing 33,000 people and operating a fleet of 97 aircraft, over 3,000 travel stores, and 46 hotels and resort properties. The Internet is a key element of the company's success. Each year, over half of the 19 million Thomas Cook customers book their trips online. Johan Hägglund, Team Manager for web development at Thomas Cook Northern Europe, is responsible for creating compelling websites for that subsidiary. For example, a new site for Swedish tour operator Ving (one of the Group's major brands) includes several key components of the Microsoft® Windows Live network of Internet services, including the Live ID identity and authentication system, Live Messenger instant messaging controls and API, and the Virtual Earth mapping platform. These web services enable travelers to log in securely to the site, discuss travel plans with other passengers, and visualize vacation destinations on a world map. Future plans include the use of Microsoft Silverlight, a cross-browser, cross-platform development system for delivering rich interactive applications for the Web. Silverlight will deliver high-quality video marketing content for the Group's websites. "Travel marketing has moved way beyond HTML," says Hägglund. "We intend to remain at the top of our industry."
Why the Windows Live Platform?
When asked about the benefits of deploying Windows Live services, Hägglund quickly cites flexibility and speed. "The key benefit of using Live Services is a great reduction in development time," he says. "We can program with a modular approach, saving time and resources." Other advantages of the Windows Live Platform for include:
- Ease of use enables fast integration of services into the website.
- An existing user base of over 400 million Windows Live ID and 300 million Windows Live Messenger will encourage the adoption of login and social networking features.
- Clear, easy to use SDKs and APIs provide helpful support, enabling Hägglund's team to leverage code examples developed by others.
- A strong third-party Microsoft Partner developer network and online support provides helpful support and fast response. "Usually, we can get answers within a day," says Hägglund.
- Re-using code saves development time and cost.
Programming Environment
Hägglund's team of developers use the Microsoft .NET framework 3.5, Visual Studio Team System 2008 Team Foundation Server, and Visual Studio 2008, programming in C# and JavaScript.
Under the Hood
The following code fragment shows how the Virtual Earth map is loaded with travel destinations (the example is Aalborg, Denmark):
map = new VEMap('destinationsMap');
map.LoadMap(new VELatLong(45.3081, 6.1928), 1, 'h', false);
map.SetDashboardSize(VEDashboardSize.Small);
layers[currentLayer] = new VEShapeLayer();
var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS, rssurl, layers[currentLayer]);
map.ImportShapeLayerData(veLayerSpec, onFeedLoad);
xml:
...
Aalborg
57.100000000000001
9.8399999999999999
images/airport.gif
...
Featured Mashup: San Diego Zoo
Where? http://www.sandiegozoo.org/
Developer: Collaboration between teams at San Diego Zoo and InterKnowlogy
The Site
Established in 1916, the 100-acre San Diego Zoo in Balboa Park, California is one of the largest and most progressive zoos in the world. The Zoo's website plays a vital role in educating the public and attracting visitors to the park. Working with a team from Microsoft Gold Certified Partner InterKnowlogy, Chief Technology Officer Robert Erhardt and his colleagues are creating the next generation of interactive web experiences for Zoo visitors. These new applications are built on Microsoft® Windows Live Internet services, including the Silverlight platform for creating rich, graphics-intensive web applications, Windows Live Spaces Photo API for sharing photos, Windows Live Messenger, and the Windows Live ID identity and authentication system. Collectively named "iZoofari," the application (see the figure) builds on existing audio and web media, adding interactive trip planning, customized route maps, and social networking services, all personalized to suit each visitor (note the Live ID login icon at the upper left). By interacting with guests before, during, and after their trip, the Zoo aims to increase customer satisfaction and drive repeat business. The application will also capture valuable business intelligence by securely tracking each visitor's experience.
Why the Windows Live Platform?
Developers needed a comprehensive, feature-rich platform on which to build the new elements of iZoofari. "We wanted the functionalities, but could not afford to build them from scratch," says Erhardt. "We decided to base everything new on the Windows Live platform, using Microsoft development tools." Erhardt cites several compelling reasons to use Windows Live Services:
- Ubiquitous and rapidly growing use of Live Services will help adoption
- Strong third-party Microsoft Partner developer network and online support
- Built-in social networking tools and controls that suit the vision of site planners
- Growing use of Windows Live ID makes it easy for visitors to sign on with existing credentials vs. having to create new logins
- Clear, easy to use SDKs and APIs enable rapid application development with minimal additional investment
- Very high return on investment
Programming Environment
Erhardt and his team are migrating to a completely Microsoft development environment, including Windows Server 2008, SQL Server 2008, Visual Studio 2008, and the .NET framework for creating Web services.
Under the Hood
The following code is executed after visitors log in, showing how the iZoofari user interface and messenger controls are defined.
<iframe id="0016BFFD8000867E" name="iZooFari"
src="http://login.live.com/controls/WebAuth.htm?appid=<%=AppId%>&style=
font-size%3A+10pt%3B+font-family%3A+verdana%3B+background%3A+white%3B"
width="80px"
height="20px" marginwidth="0"
marginheight="0"
align="middle" frameborder="0"
scrolling="no"></iframe>
<iframe src="http://settings.messenger.live.com/Conversation/IMMe.aspx?
invitee=311a86e31ca10415@apps.messenger.live.com&mkt=en-US"
width="300" height="300"
style="border:
solid 1px
black;
width: 300px;
height:
300px;" frameborder="0"></iframe>
Featured Site: SoSo Network
Where? http://www.sosonetwork.com/
Developer: Genexis Consulting
The Site
SoSo Network is an innovative review portal that connects consumers with business owners and friends. The site enables consumers to get ratings on businesses and services they need, but with a unique social networking twist. "Traditional review sites can be rather dry and uninteresting," says Alfred Wong, Technical Director at Genexis Consulting, creators of SoSo Network. "Consumers tend to visit these sites only occasionally, when they really need information. We wanted to create a more exciting, interactive environment for consumers so that they would be encouraged to return. A 'stickier' site is also more attractive to advertisers and participating businesses." The result of Genexis' efforts is an attractive blend of business directory, opinions, maps and directions, and online communication that should keep consumers and businesses alike coming back. Visitors can read or submit reviews, group reviews according to their source (e.g. trusted "friends" or expert "gurus"), or blog about their experience with a business. Participating businesses can also take part by responding to a positive or negative review. "SoSo Network is engineered with a focus on collective intelligence and community in mind, it gets better and more useful over time," says Wong.
SoSo Network is built on a wide range of Microsoft® technologies including the Windows Live network of Internet services. Visitors can join the SoSo community using Windows Live ID identity and authentication system, find locations and directions to a business with Virtual Earth, chat online with Windows Live Messenger, upload and watch videos using Silverlight Streaming, or participate in a blog using Windows Live Spaces.
Why the Windows Live Platform?
The Windows Live platform is a great example of Genexis' belief in cutting-edge software technologies. When asked about the benefits of deploying Windows Live services, Wong quickly cites speed and flexibility. "We see a great reduction in development time with Live Services," he says. "We save huge amounts of effort re-using code developed by ourselves or others." Other advantages of the Windows Live Platform include:
- An existing base of over 380 million Windows Live ID users encourages visitors to login with existing credentials, reducing the barrier to join the SoSo community.
- Services are easy to use, enabling fast integration into the website.
- Developers and consumers inherit new features automatically when Microsoft extends Windows Live services.
- Clear, easy to use SDKs and APIs provide helpful reference information.
- A strong third-party Microsoft Partner developer network and online support are a good source of expert advice and code samples.
Programming Environment
Wong's team of developers use the latest Microsoft development technologies, including Microsoft .NET Framework 2.0 and 3.5, Visual Studio 2008, ASP.NET 2.0, ASP.NET 3.5, ASP.NET AJAX, Windows Presentation Foundation, Windows Server 2008 and SQL Server 2008.
Under the Hood
The following code snippet shows how SoSo Network connects to Microsoft Windows Live ID.
protected void Page_Load(object sender, EventArgs e)
{
string app_id = ConfigurationManager.AppSettings["wll_appid"]; //Get WLL Application ID from Web.Config
string token = Request.QueryString["token"] as string; //WLL ID Context - SoSoNetwork Usage
string return_url = Request.QueryString["ru"] as string; //return URL Context - SoSoNetwork Usage
string app_context ="";
string liveid_login_string = "http://login.live.com/wlogin.srf?appid="+ app_id + "&alg=wsignin1.0";
server_url = Request.Url.GetLeftPart(UriPartial.Authority);
if (!String.IsNullOrEmpty(token)) app_context += Server.UrlEncode("tok=" + token);
//Add SoSoNetwork Return URL
if (!String.IsNullOrEmpty(return_url)) app_context += Server.UrlEncode("ru=" + return_url);
//Add Context to Live ID return URL
if (!String.IsNullOrEmpty(app_context)) liveid_login_string += "&appctx=" + app_context;
// Redirect to Windows Live Login otherwise do nothing
Response.Redirect(liveid_login_string);
}
Featured Site: PartyGuide Switzerland
Where? http://www.partyguide.ch/
Developer: PartyGuide.ch AG
The Site
With over 340,000 members, PartyGuide Switzerland is the most visited social networking site aimed at German-speaking young adults in Switzerland, Germany, and Austria. The site features event calendars for entertainment; chats, blogs, and forums; and connections with other members through email, alerts, or instant messaging. PartyGuide also provides space for photo sharing and features advertising targeted at young adults. The site experiences over 128,000 visits per day.
PartyGuide.ch recently completed extensive site renovation, with Microsoft® Windows Live Services replacing a number of existing functionalities. Windows Live ID is now the primary identity and authentication system for both existing and new members. When logging in with Live ID, the member automatically has use of Live Messenger and a free Windows Live Hotmail account within PartyGuide's domain (see bottom graphic). In addition, members can customize Windows Live Alerts to receive content from other members in real time on their desktop, mobile device, or by email. Windows Live Contacts permits members to share their Windows Live contact information with PartyGuide.ch while keeping control of their data through preferences and settings. Site owners plan to integrate other Windows Live services, including Virtual Earth mapping and Live Search, in the coming months.
Why the Windows Live Platform?
When upgrading the site's web services, the PartyGuide technical team had a number of options, but settled on a comprehensive overhaul built on the Microsoft Windows Live Platform. PartyGuide's Chief technical Officer Oliver Walzer cites several compelling reasons:
- The chief benefit is the enormous reach of Windows Live ID users. Says Walzer, "With over 380 million users already owing Live ID credentials, it is easy for new members to register on our site and communicate with a very large community that already exists."
- Windows Live Services are easy to deploy, Walzer claims. "We could redesign and deploy our new site much faster than with traditional website development tools. This saved resources and got the upgraded site online quickly."
- The strong third-party Microsoft Partner developer network and online support provided specific technical help when needed. "The expert advice and code samples in the languages we use were extremely useful," Walzer explains.
- The Microsoft brand is associated with scalability, reliability, and security. "We are confident that the Windows Live Platform will continue to grow and improve with time," says Walzer, adding, "and both we and our members will benefit."
Programming Environment
Walzer's team uses open source development tools and databases, programming primarily in PHP and JavaScript.
Under the Hood
The following code snippet shows how a new pgmail.ch account is created or reset using the Windows Live Admin Center service.
try{
//Init client and username
$client=WindowsLiveAdminCenter::getInstance();
$username=$member->getPgmailUsername();
//Create user or reset password
if($member->getPgmail()==Member::PGMAIL_NONE) $client->CreateMember($username, $password, true, '', '',
WindowsLiveAdminCenter::getLCID($member->getLanguage()));
else $client->ResetMemberPassword($username, $password, true);
}catch(Exception $e){
//Error handling
}
------------------------------------------------
class WindowsLiveAdminCenter extends SoapClient{
...
public function CreateMember($memberName, $password, $resetPassword, $firstName, $lastName, $lcid=''){
$this->__soapCall('CreateMember', array('memberNameIn' => $memberName, 'password' => $password,
'resetPassword' => $resetPassword, 'firstName' => $firstName, 'lastName' => $lastName, 'lcid' => $lcid),
null, $this->getAuthorizationHeader());
}
public function ResetMemberPassword($memberName, $password, $resetPassword){
$this->__soapCall('ResetMemberPassword', array('memberNameIn' => $memberName, 'password' => $password,
'resetPassword' => $resetPassword), null, $this->getAuthorizationHeader()); }
...
}
Featured Mashup: Eppraisal real estate valuation tools
Where? http://eppraisal.com/
Developer: Saris Technologies
The Site
Launched in 2006 by Saris Technologies, eppraisal.com is focused on helping consumers make relocation or real estate investment decisions through easy-to-use, intuitive online analytical tools. The site’s localized information enables members to personalize their home pages with news, market trends, lifestyle, and professional resources specific to their neighborhood.
Why the Windows Live Platform?
Eppraisal.com uses Microsoft® Virtual Earth™, part of the Windows Live™ Platform of Internet services, to provide site visitors with interactive mapping. The choice of Virtual Earth resulted from several strong advantages, including bird’s eye view (an enhanced 3D imaging option available only with Virtual Earth), favorable licensing terms, clear web service API’s, and comprehensive on-line documentation.
Programming Environment
Saris Technologies developers use a number of Microsoft development tools including the .NET framework with ASP.net and AJAX, and Microsoft SQL Server. The primary code is developed in Microsoft Visual C#.
Under the Hood
The following code shows how to recursively map a set of real estate “comparables” using Virtual Earth geocoding. Pushpin icons for the comparables are added to a separate layer to facilitate easy showing/hiding.
addCompInfo : function(comps)
{ var addPins = function()
{
this.compsLayer = new VEShapeLayer();
this.compsLayer.SetTitle('Comparable Properties');
var i = 0;
var mapCallback = function(a,b,c,d,e)
{
if (i >= comps.length) return;
if ((c != null) && (c[0] != null))
{
var compIcon = "<div class='comp_pin'><div class='pin_text'>" + (i + 1).toString() + "</div></div>";
var loc = c[0].LatLong;
var pin = new VEShape(VEShapeType.Pushpin, loc);
pin.SetDescription(this.compPinTemplate.evaluate(
{
Icon: compIcon,
StreetAddress: comps[i].Comparable.PROPERTY._StreetAddress,
City: comps[i].Comparable.PROPERTY._City,
State: comps[i].Comparable.PROPERTY._State,
PostalCode: comps[i].Comparable.PROPERTY._PostalCode,
Bedrooms: comps[i].Comparable.PROPERTY._PROPERTY_CHARACTERISTICS._IMPROVEMENTS._ROOM_COUNT._TotalBedroomsCount,
Bathrooms: comps[i].Comparable.PROPERTY._PROPERTY_CHARACTERISTICS._IMPROVEMENTS._ROOM_COUNT._TotalBathsCount,
LastSaleDate: Util.formatDate(comps[i].Comparable.PROPERTY._PROPERTY_HISTORY._SALES_HISTORY[0]._LastSalesDate)
}));
pin.SetCustomIcon(compIcon);
this.compsLayer.AddShape(pin);
}
i++;
if (i < comps.length)
{
this.map.Find(
null,
comps[i].Comparable.PROPERTY._StreetAddress + ', ' +
comps[i].Comparable.PROPERTY._City + ', ' +
comps[i].Comparable.PROPERTY._State + ' ' +
comps[i].Comparable.PROPERTY._PostalCode,
null, null, null, null, false, false, false, false,
mapCallback);
}
}.bind(this);
this.map.Find(
null,
comps[i].Comparable.PROPERTY._StreetAddress + ', ' +
comps[i].Comparable.PROPERTY._City + ', ' +
comps[i].Comparable.PROPERTY._State + ' ' +
comps[i].Comparable.PROPERTY._PostalCode,
null, null, null, null, false, false, false, false,
mapCallback);
this.map.AddShapeLayer(this.compsLayer);
$('ShowRecentSalesCheck').checked = true;
Form.Element.enable($('ShowRecentSalesCheck'));
}.bindAsEventListener(this)
if (this.compPinTemplate == null)
{
new Ajax.Request('JS/templates/ComparablePropertyPin.jst', {
method: 'get',
onComplete: function(transport)
{
if (200 == transport.status)
{
this.compPinTemplate = new Template(transport.responseText);
if (this.subjectPropertyLayer == null)
window.setTimeout(this.addCompInfo.bind(this, comps), 100);
else
addPins();
}
}.bindAsEventListener(this)
});
}
else
{
if (this.subjectPropertyLayer == null)
window.setTimeout(this.addCompInfo.bind(this, comps), 100);
else
addPins();
}
}
Featured Mashup: Reuters AlertNet
Where? http://www.alertnet.org/
Developer: Wrenhill, Ltd., IDV Solutions, and Reuters teams
The Site
Reuters AlertNet is a web-based humanitarian news network launched by the Reuters Foundation in 1997. Its goal is to keep relief professionals, journalists, and the wider public up-to-date on humanitarian crises around the globe. AlertNet attracts upwards of 1 million visitors per month, and has a network of 400 contributing humanitarian organizations. A core feature of the website is the use of an interactive map to locate current crises and to retrieve the latest Reuters news feeds and other information from the chosen area.
Why the Windows Live Platform?
Developed by Microsoft Gold Partner IDV Solutions, the interactive map is based on Microsoft® Virtual Earth™, part of the Windows Live™ network of Internet services. Compelling advantages of Virtual Earth included its ease of deployment and a rich database of remote regions and villages across the globe. IDV integrated Virtual Earth with a variety of real-time data feeds that allow a user to visually “mine” for headlines in real time by simply zooming into a country or region.
Programming Environment
The site’s user interface is developed with the Microsoft .NET framework and Microsoft server products. The interactive map is based on an AJAX framework with JavaScript calls and asynchronous XML data retrieval. Content integration (developed by Wrenhill, Ltd) is based on open-source solutions developed in Mason, a Perl-based web application framework.
Under the Hood
The following code snippet shows how a JavaScript request for map data results in an XML response.
JavaScript call:
javascript:updateMapInfo(document.getElementById('RightPanel').elements['Crisis'],
document.getElementById('RightPanel').elements['Weather']);
XML response (not all data is shown):
<layout>
<map id="MainMap">
<layer id="countrypolygonLayer" type="polygon">
<poly id="342" stroke="#004d9f" stroke-opacity="0.7" fill="#004d9f" fill-opacity="0.5">
<attrs name="Angola" fillId="1" iso="AO" north="-5.85632750177319" east="24.0844454321804"
south="-18.0163905130981" west="11.7312454206756" />
<part>23.98621 -10.87046 24.08445 -11.40278 23.96736 -11.66215 24.05069 -12.39243 23.88701
-12.76361 24.01945 -12.99945 17.93146
(more coordinates)
20.33153 -6.91473 20.62975 -6.91388 20.54872 -7.28362 10.95834 23.85861 -11.02715 23.98621
-10.87046</part>
</poly>
(more countries)
</layer>
</map>
</layout>
Featured Site: Multimap
Where? http://www.multimap.com/
Developer: Multimap
The Site

Online since 1996, London-based Multimap.com is one of Europe's most popular mapping sites, serving more than 10 million users each month. The site offers street-level maps of the United Kingdom, Europe the United States and much of Asia Pacific; road maps of the world; door-to-door travel directions; aerial photographs; and local information. Multimap also provides “white label” mapping services for other web sites, including basic mapping, proximity searching, routing, aerial images, and local information. Recently, Multimap has begun to integrate on its website Microsoft® Virtual Earth™ and Windows Live™ Messenger, two components of the Windows Live network of internet services. Together, these services enable users to view geotagged information—such as the sender’s location or a business address—and to interact while using maps. The example shows a Messenger conversation taking place based on users being able to see where each other are on Virtual Earth Bird’s Eye imagery.
Why the Windows Live Platform?
The integration of Multimap with Windows Live Services provides several key benefits, according to Matthew Quinlan, Head of Product Marketing at Multimap.
- The IM capability can drive traffic and increase stickiness by encouraging users to stay on the Multimap site while carrying on a conversation. The participants can also click on geotagged elements—for example, the recipient’s location, a business address or geo-tagged Wikipedia content—and receive further information without leaving the Multimap environment.
- Differentiated content and ad delivery. “We can deliver highly targeted advertising, based on knowing where the participants in a messaging session are located, and even show a user the nearest places to buy advertised goods on the map when they click on an ad,” Quinlan explains.
- Access to over 300 million existing Windows Live ID users worldwide immediately increases the reach of Multimap site to a much larger group of users and advertisers than they had previously.
Programming Environment
The integration of Windows Live Services was done using JavaScript developed on a Macintosh computer and debugged with Firebug.
Under the Hood
The code below illustrates how a Windows Live Messenger user can geotag themselves, and update their personal message by clicking on a map on multimap.com. This allows other users to see where they are on the Multimap website, and to start a Messenger conversation.
function addContextMenu()
{ MMWCore.UI.Mapviewer.map.addEventHandler( 'contextMenu', function ( type, target, menu, pos, step ){ items = [{ label :
'Set your location on Live', onclick : function (){ setLonLatForUser( pos ); getPostCode( pos ); menu.remove(); },
className : 'MMaddmarker' }]; menu.addItemsJSON( items ); }); } function getPostCode( pos ){ $.ajax({ type: "GET", url:
"ppc.htm?lat=" +pos.lat+ "&lon=" + pos.lon, success: function (response){ setPersonalMessage( response + "
("+pos.lat+","+pos.lon+") http://www.multimap.com/maps/"); } }); } function setPersonalMessage( text )
{ MSLiveGlobals.user.get_presence().set_personalMessage( text ); }
Featured Mashup: Fishticuffs
Where? http://www.fishticuffs.co.uk/
Developer: Thin Martian
The Site
Created by London-based digital media agency Thin Martian, Fishticuffs illustrates how easy it is to promote online social interaction through innovative use of Microsoft® Windows Live™ network of Internet services. Fishticuffs is a nonviolent combat game—played within the Windows Live Messenger environment—that uses animated fish as weapons of choice. Clicking PLAY on the site's home page opens the visitor's Windows Live Contacts list, ready to invite a friend to a round of virtual bashing (shown on the graphic). In an innovative extension of the game, the player's comparative scores and ranking among his or her Windows Live contacts can be exclusively viewed on social network sites Bebo and Facebook through a downloadable application. The rankings make the game more competitive among friends, and encourages them to install the application and establish contact. The social network application also increases the game's reach to a world-wide group of other players by listing a global ranking at the end of each game." Fishticuffs is the first 'crossover' application that illustrates how to provide a content platform for Live Messenger," explains Thin Martian's James Clarke. "It creates reach and stickiness for the service by tapping into Windows Live contacts from social networking sites." The results are impressive: after only one month, over a million minutes of Fishticuffs have been played, all games initiated through Windows Live Messenger.
Why the Windows Live Platform?
Clarke and colleague Ian Routledge cite security as a key benefit of Windows Live services for this application. Contact information is only exposed if the player agrees to share it. "We wanted to provide a viral but secure means for people to connect online through this game," says Clarke. "The combination of Windows Live Contacts control, Windows Live ID, and Windows Live Messenger was perfect for that." Another advantage of Windows Live Services was ease of use, enabling rapid and cost-effective application development. A strong Microsoft developer network and online support also provided helpful support.
Programming Environment
Microsoft Visual Studio 2008 was used for the scripts and JavaScript. The scripts (for saving and loading user and game data) were programmed in either classic ASP or ASP.NET. The Facebook and Bebo applications are written in ASP.NET in C#.
Under the Hood
The following code illustrates how Fishticuffs is launched when the PLAY button is clicked on the homepage.
flash.external.ExternalInterface.call("PlayGame");
function PlayGame()
{
// Check the browser version
if (navigator.appName === "Microsoft Internet Explorer" && navigator.appVersion >= 6)
{
// Running IE 6 or later so try and launch the game. (MSNMessenger.P4QuickLaunch only works from IE :))
var obj;
try
{
// Try and create the MSNMessenger.P4QuickLaunch ActiveXObject
obj = new ActiveXObject("MSNMessenger.P4QuickLaunch");
}
catch (e)
{
// Can't so set it to null
obj = null;
}
// Check to see if we can launch the app
if (obj != null)
{
// The activeX object is not null, so launch the app.
obj.LaunchApp('20575602', '');
}
else
{
// The user doesn't have (or isn't running) WLM
alert("You must have Windows Live Messenger to play the game.");
}
}
else
{
// Running another browser so tell the user
alert("Please reload this page in Internet Explorer\n\nOr choose Fishticuffs from the games menu in Windows Live
Messenger.");
}
} // PlayGame
Featured Mashup: iBloks Video Messenger
Where? http://www.ibloks.com/
Developer: iBloks, Inc.
The Site
Founded by entertainment and software industry innovators, iBloks began in 2005 with a vision for social innovation and personalized self-expression. The company’s latest offering, iBloks Video Messenger, enables site visitors to watch and share videos while logged into Microsoft® Windows Live Messenger, a component of the Windows Live™ network of Internet services. iBloks Video Messenger is designed to connect online video enthusiasts and instant messenger customers with an integrated 3D viewing and communication offering. Site visitors can view videos and share comments with each other in real time, eliminating the delay of sharing and viewing when done through email or when posted onto social network sites. Viewers can also post their multimedia experiences as a “widget” on their web pages, blogs or social network pages. The video application and user interface was developed using another Windows Live Services component, the Microsoft Silverlight™ multimedia development platform.
Why the Windows Live Platform?
Silverlight and Windows Live Messenger provide an ideal application platform for iBloks Video Messenger, according to Julia Miller, founder and CEO of iBloks. “Our vision is to combine multimedia consumption with viewer interactivity,” says Miller, an IT and business veteran who held sales/marketing and general management positions at SegaNet and Xbox Live and executive positions at Apple, Microsoft, Pepsi and Citibank. “Silverlight provides an extremely high-quality video experience, and Windows Live Messenger gives us the IM component, along with a huge established user base.”
Miller cites several further advantages of Windows Live Services:
- Live Services provides a proven, scalable platform that increases iBloks’ reach to over 300 million Windows Live Messenger users around the world.
- Modular web services can be deployed with re-usable code, enabling fast development cycles: the iBloks Video Messenger was created in under 60 days by leveraging previous work.
- Clear, easy to use API’s enable quick application development with minimal additional investment.
- Strong third-party Microsoft Partner developer network and online support.
- Ad-free services provide a quality environment for targeted advertising.
Programming Environment
The iBloks Video Messenger application was developed with Microsoft Visual Studio 2008 and Windows Presentation Foundation (WPF), using a combination of C#, JavaScript, and other programming languages.
Under the Hood
The iBloks Video Messenger can be deployed throughout the web as a widget. This enables anyone to take advantage of the iBloks technology without writing any code. Simply paste this HTML code into the page:
<iframe width="632" height="655" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"
src="http://www.ibloks.com/services/videomessenger/" name="iBloks - Live In 3D" title="iBloks - Live In 3D">
<!-- Alternate content for non-supporting browsers -->
Your browser is not able to render this page properly.
<a href="http://www.ibloks.com/services/videomessenger/">Click here to continue.</a>
</iframe>
Featured Site: Films for Learning
Where? http://www.filmsforlearning.org/
Developer: Altius Consulting
The Site
Films for Learning is an innovative approach to education that combines collaborative moviemaking, video learning and social networking. Peter Roe and Mark Richardson, educators from the acclaimed Dorset, UK Thomas Hardye School, believed that educational films could have more impact by being shorter and more engaging to typical students. Roe and Richardson further thought that student-produced films would create a double learning experience, advancing the subject for both the student filmmakers and the viewers. “You can’t make a film about something if you don’t understand it,” explains Richardson. The Films for Learning website currently features about 150 student-made educational films on varied topics—including photosynthesis, Darwinism, and French—that are available for classroom and personal use. The site is powered by Microsoft ® Silverlight™ browser plug-in development tool and Windows Live ID identity authentication system, two components of the Microsoft Windows Live™ network of Internet services. Silverlight provides the rich multimedia viewing experience for the viewer, and Live ID provides secure authentication for Films for Learning members who wish to upload content.
Why the Windows Live Platform?
Roe cites a number of benefits of Windows Live services. “First, there is the quality of Silverlight conversion from the original video source,” says Roe. “There is nothing else out there at the moment that compares, especially at full screen. It makes for a very compelling viewing experience.” Other advantages of the Windows Live Platform include:
- Ease of use enables fast development at minimal cost.
- Strong security provided by Windows Live ID. Every submitted video undergoes rigorous review to make sure it is appropriate for the intended audience. “We have to provide a safe, secure educational resource,” says Roe. “We needed a strong authentication and registration process for uploaded content, and Live ID provides that.”
- A strong third-party Microsoft Partner developer network and online support provides helpful technical support.
Programming Environment
Developers at Altius (http://altiusconsulting.com/) used Microsoft Virtual Studio 2008, .NET 3.5, Team Foundation Server 2008, and Microsoft Expression Suite (specifically Blend) to create the site. The database was Microsoft SQL Server 2005 (Standard Edition). The code-behind is primarily in C#, and Silverlight in JavaScript. Many of the children who create the films use Microsoft Windows MovieMaker, a download that provides tools to create, edit, and share home movies.
Under the Hood
The following JavaScript code illustrates the prompt for Windows Live ID sign in, and the associated page code for the control to redirect to the Windows Live login site.
<live:IDLoginView ID="LoginView" runat="server" ApplicationIDConfigKey="wll_appid" ApplicationSecretConfigKey="wll_secret"
PromptOnAssociation="false">
<AnonymousTemplate>
<div id="logged-in-user">
<a href="mailto:info@filmsforlearning.org">Contact Us</a>
</div>
<div id="home-login-panel">
<div id="home-login-body">
<p id="already-member">Already a member?</p>
</div>
</div>
<div style="display: block;" id="anonymous-user">
<uc1:Login ID="Login" runat="server" />
<span id="sign-in-or-sign-up">or</span>
<uc1:Signup ID="Signup" LinkText="Upload your first film here" runat="server" />
</div>
</AnonymousTemplate>
</live:IDLoginView>
Featured Mashup: Sun Safaris
Where? http://www.sunsafaris.com
Developer: In-house team
The Site
Cape Town, South Africa-based Sun Safaris specializes in non-hunting southern African safaris, vacations and honeymoons. A strong, attractive Internet presence is vital to the company’s business. A key element of the site is a large collection of detailed interactive maps covering all destinations the company offers. Site visitors can view locations, routes, camps, and lodging information by zooming into the destination of interest and clicking on relevant icons. The maps are built on Microsoft® Virtual Earth™, part of the Windows Live™ network of Internet services. The map shown here illustrates a national park in Botswana (outlined in yellow). Hovering over the park icon brings up a window with a brief description of the park and a link to more detailed information.
Why the Windows Live Platform?
According to Sun Safaris’ Lance Harcourt, site developers chose Virtual Earth over competing mapping solutions for a number of reasons:
- Superior end-user experience with intuitive navigation and smooth transitions.
- More accurate coordinates for items like park boundaries, roads, and landmarks.
- The option of delivering maps without advertising. This protects against competing ads on their site, and offers end users a “clean slate” without distractions. “This was a compelling business advantage and also helps keep the site attractive,” says Harcourt.
- Clear, easy to use SDK’s and API’s and the abundance of online support and user forums.
- No extra investment in developer training was needed to deploy Windows Live Services.
Programming Environment
Sunsafaris.com was developed using all Microsoft tools: the Microsoft .NET framework 3.5, Visual Studio 2008, ASP.NET AJAX, and Microsoft SQL Server 2005 running on Windows 2003 Server. Developers used both Visual Basic .NET and C# to program the site.
Under the Hood
The following code draws park outlines. The function is passed an array of Virtual Earth coordinates (lat longs) by some code which calls a web service (not shown for brevity), and the VElatLong is added to an array. The code adds the coordinates contained in mylat, mylon to an array, and then passes them to the draw function.
var points = new Array;
//add a point
var myPoint = new VELatLong(mylat, mylon);
points.push(myPoint); //add to the array
//add the other other points from the webservice using the same technique.
//draw the park outline
DrawPark(points, false);
//actually draw the outline - points is an array of VElatlong and highlight indicates the
//outline is to be done with a fill to draw attention to the shape
function DrawPark(points, highlight)
{
//poly is used to hold the points
poly = new VEPolyline(id,points);
if (highlight == false)
{
//normal version
poly.SetWidth(2);
poly.SetColor(new VEColor(255,249,22,1.0));
}
else
{
//highlighted version
poly.SetOutlineWidth(3);
poly.SetOutlineColor(new VEColor(210,120,110,1.0));
poly.SetFillColor(new VEColor(255,0,0,0.25));
}
//draw the pretty polygon
map.AddPolyline(poly);
}
Featured Site: MindTouch Deki Wiki
Where? http://wiki.mindtouch.com/
Developer: MindTouch
The Site
MindTouch Deki Wiki (a combination of Japanese and Hawaiian
words for “smart” and “quick”) is the
Web’s most popular commercially supported wiki platform for
creating content and mashups using a wiki interface. The free, open
source application is an easy to use program for authoring,
aggregating, organizing, and sharing almost any kind of content.
Enterprises can build online communities and in-house Intranets,
create collaborative applications, or add wiki capabilities to
existing applications. Deki Wiki leverages the Microsoft™
Windows Live™ network of Internet services. In the example, a
visitor to the wiki can read a restaurant review and immediately
get a map and driving directions from any starting point to the
restaurant. The map and directions are obtained dynamically from
Microsoft Virtual Earth™ mapping software, using a few simple
calls (see below).
Why the Windows Live Platform?
Windows Live services provide a number of benefits:
- Clear APIs, SDKs, and the large repository of technical
documentation available on Microsoft’s http://dev.live.com/ website.
- A large, helpful online developer community.
- Very fast startup (several hours from software download to demo
pages).
- No additional training or investment needed to deploy Live
Services.
- Fully compatible with Microsoft development environment.
Programming Environment
MindTouch developed Deki Wiki on the Microsoft .NET framework
with the Visual Studio® development system. The application
logic is implemented in C#, while the presentation layer is handled
independently using PHP. This makes it possible for a designer to
alter the user interface quickly and without compromising the
application’s business logic.
Under the Hood
The following code snippet uses DekiScript, the built-in
scripting language developed by MindTouch to create visually rich
and interactive pages in Deki Wiki. The snippet shows how controls,
map, and directions are placed on a wiki page so that a visitor can
easily find a restaurant. DekiScript embraces the new programming
model of information subscribers and publishers, which enables
editors to easily create mashups with web-services and widgets.
{{ live.map{ address: args.address, title: args.title, description: args.description,
kind: 'road', publish: @directions, subscribe: @from, zoom: 15 } }}
{{ dhtml.form{ inputs: [ { label: args.label ?? 'Driving from:', field: 'from' },
{ field: 'to', value: args.address, hidden: true } ],
button: 'Get directions to ' .. args.title, publish: @from } }}
{{ dhtml.table{ columns: [ { label: 'Directions', field: 'text' }, { label: 'Distance', field: 'info' } ],
subscribe: @directions } }}
Where? Burien Streetcar 1911 Survey Map
Developer: Robert Ketcherside
The Mashup
Created by Seattle native and local history buff Rob Ketcherside, Burien Streetcar features an overlay of a current digital map with a 1911 map detailing plans for a streetcar line that once connected the city of Burien (near present-day Seattle-Tacoma Airport) with Seattle. Ketcherside combined historic maps from county archives with Virtual Earth™, state-of-the-art mapping software powered by the Microsoft Windows Live™ Platform. MapCruncher, an application from Microsoft Research, was used to import and align the maps, enabling the combination of road and aerial imagery from Virtual Earth with the archival 1911 streetcar map.
Why the Windows Live Platform?
Windows Live was the only integrated platform that enabled map overlays without having to invest in 3rd-party add-ins or expensive graphics applications. While Windows Live can serve as foundation for very complex web sites, Burien Streetcar illustrates how easy it is to build straightforward mashups in a few easy steps.
Programming Environment
Developer Ketcherside used a simple text editor (Microsoft Notepad) to create and edit the code for Burien Streetcar.
Under the Hood
Virtual Earth and MapCruncher work together to generate the final displayed mashup. MapCruncher registers the archival streetcar map (which can be submitted in a variety of vector or raster image formats) to the global coordinate system. It then processes the result to fit a Mercator projection, and generate a set of image tiles that are seamlessly combined with Virtual Earth road or aerial imagery. The resulting “crunched layers” are returned for display.
The following code snippet shows how to call Virtual Earth and MapCruncher:
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5" type="text/javascript"></script>
<script src="http://research.microsoft.com/mapcruncher/scripts/v5/CrunchControl.js" type="text/javascript"></script>
The layered map results are stored on the web site:
<div id="Map"></div>
<div style="display:none">
<a id="CrunchedLayers" href="http://www.zombiezodiac.com/rob/hplb/maps/1911/MapLayers.crunched.xml">CrunchedLayers</a>
</div>