Presentation: The Modern Web, Part 3: Social Networking

Today I gave a public Neudesic webcast, The Modern Web, Part 3: Social Networking. Below is the presentation from the webcast. The webcast recording should also be available soon at neudesic.com .

The Modern Web Part 3: Social Networking

View more presentations from David Pallmann.

Outside-the-Box Pizza, Part 4: Social Integration with Twitter

In this series, we’re looking at Outside-the-Box Pizza, a web-mobile-social-cloud demo, from a variety of perspectives that include design, technologies, and techniques. The online demo is at http://outsidetheboxpizza.com. Here in Part 4, we’ll be looking at the social experience which in this app revolves around the use of Twitter.  We’ll look at three things:

• Social Media Strategy
• Gamification in the Online Experience
• Twitter Integration with @Anywhere

Social Media Strategy: “Pizza as Individual as You Are”

Outside-the-Box Pizza knows the power of the mobile and social phenomenon, and has crafted their company around appealing to the young, hip crowd who live the digital lifestyle. From Day 1, their strategy has been emphasizing the uniqueness and creativity of individuals. That’s why they have the name they do, and it’s why they provide some very unusual pizza toppings (like elk and mashed potato), shapes (square, heart), and sauces (BBQ, chocolate). This fits very well with today’s ever-growing mobile-and-social communities. Their tag line is, “Pizza as individual as you are”.

Outside-the-Box Pizza is savvy about modern online marketing and is very much aware of the important role social media plays in keeping an ongoing relationship with new and existing customers (see Flip the Funnel by Joseph Jaffe for more on that).

There are many ways to integrate with social networks: you can view/search content, post content, and allow sign-in with social identities. There are also many social networks to choose from. Outside-the-Box Pizza has chosen to focus their efforts around Twitter, where clients will tweet about unusual pizzas. Outside-the-Box Pizza will tweet as well.

Gamification in the Online Experience

Outside-the-Box Pizza is also very aware of the gamification phenomenon, in which adding a fun, compelling, and competitive element to an experience builds customer loyalty and increases return visits.

When a customer orders a unique pizza, Outside-the-Box Pizza wants them to tweet about it. On the Tweetza Pizza page, clients can see the twitter feed for #outsideboxpizza and, if they wish, sign in with a Twitter id and add their own tweets. Of course, they can also do this directly via Twitter itself, but there’s value in integrating it with the application. 

It isn’t necessary for users to identify themselves to view the Twitter feed, but in order to send tweets they do need to sign in. Clicking on the Connect with Twitter button brings up a Twitter sign-in dialog.

To promote the most interesting pizzas, Outside-the-Box Pizza has a section of the site called Cool Pizzas which is manually curated by an editor.

Twitter Integration with Twitter @Anywhere

Social network integration is possible from the front-end or the back-end of a web application. In this case, Outside-the-Box Pizza uses front-end integration. That is, all of the integration work is being done in the HTML/JavaScript layer that runs in the web browser. Twitter provides an easy-to-use API for this named @Anywhere.

The first step in using @Anywhere is to register an application. In doing this you’ll identify the ultimate deployment URL of your application and receive both a consumer key and a consumer secret which will be used to positively identify your application as legitimate.

In the web application, we load the Twitter @Anywhere JavaScript library with a script line like this in the section of the web site.

<script src="http://platform.twitter.com/anywhere.js?id=yxWqT5gTZ4pfhw&v=1" type="text/javascript">script>

The result of this is that we’ll have a JavaScript object named twttr that we can reference for various behaviors.

Connect Button

To add a Connect to Twitter button to the site, we turn a placeholder div into a live sign-in interface using this invocation on the twttr object:

<script>

    twttr.anywhere(function (T) {

        T("#login").connectButton({ size: "medium" });

    });

script>

Tweet Box

To put up a tweet box, we invoke it this way. This pre-loads the tweet box with the hashtag “#outsideboxpizza”.

twttr.anywhere(function (T) {

    var width = document.getElementById('logo').offsetWidth - 20;

    T("#tbox").tweetBox(

    {

        height: 60,

        width: width,

        defaultContent: "#outsideboxpizza "

    });

});

Twitter Feed

Although we can also use the twttr object to get the Twitter feed for our hashtag, we chose here to use jTweetsAnywhere jQuery library which encapsulates the logic and nicely formats the display for us. After loading its JavaScript and CSS scripts, this code gives us our feed:

    $('#tweetFeed').jTweetsAnywhere({

        searchParams: 'q=outsideboxpizza',

        count: 5,

        showTweetFeed: {

            showProfileImages: true,

            showUserScreenNames: true,

            showUserFullNames: true,

            showActionReply: true,

            showActionRetweet: true,

            showActionFavorite: true,

            autorefresh: {

                mode: 'auto-insert',

                interval: 30

            }

        },

        showTweetBox: false

    });

Summary

Social integration is a key concern for modern web software. Outside-the-Box Pizza focuses on Twitter integration in the front end, using the Twitter @Anywhere API. The result is an ongoing social touchpoint with customers. Through the use of gamification, what might be viewed as a commodity, pizza, has been made into a fun, creative experience that consumers want to brag about over Twitter.

Next: Part 5: Hosting The Front End in the Cloud

When Worlds Collide #4: HTML5 + Cloud = Personal Cloud

In Part 1 I wrote about the dual revolutions going on in web applications: HTML5 and Mobility on the front end, and Cloud Computing and Social Networking on the back end—how they influence each other and are together changing the design of modern web applications. In Part 2 we looked at the shared perspective of elasticity and in Part 3, location. In this fourth post we’ll discuss another aspect both worlds share, which is making the web personal.

The web has been about many things over its history, including publishing, search, applications, e-commerce, and media. Today, there are many things going on but I’m going to argue that they all revolve around people and enabling their digital lifestyles. The modern web is about people.
There are two areas in particular that are clearly making the web personal: mobility and social networking. It might seem less clear how HTML5 and cloud computing tie into making the web personal, but as we’ll see shortly they do in fact play critical roles, albeit less prominently.

There’s a new term out there, personal cloud (maybe so new we don’t have a good definition for it yet). I see this as a great term for the social / mobile / global phenomenon (and definitely easier to pronounce than SoMoGlo!). With the web’s focus shifting to people and their connections, thinking about the user and their “personal cloud” as a central design consideration makes a lot of sense.

Mobility Makes the Web Personal: It’s Always With Us
With mobile devices becoming so pervasive, we can bring the web and our favorite apps and services with us—wherever we go. We’re no longer limited to using the web when we happen to be at home or at work. The web couldn’t really become an entrenched part of our lifestyles if we could only use it when we happened to be near a desktop computer: we want a 24 x 7 web we can use when we’re at restaurants, at concerts, at ballgames, when we’re taking a walk, when we’re traveling. Mobility makes that possible.

Mobility also lets us tie location into our apps, which is another dimension of making things more personal. We can use location to cue maps, find out what’s nearby, give area-specific advice, coordinate events, and many other useful things.

Social Networking Makes the Web Personal: We’re Connected

Social networking allows us to keep in touch with friends, family, organizations, and birds of a feather (people with similar interests)—without regard to physical location. It has become the #1 activity on the web.

Social media is not only important to individuals, it’s also very important to businesses—especially for marketing, brand management, and client retention. In modern marketing, social media is the tool for customer retention (see Flip the Funnel by Joseph Jaffe). Getting a customer to the sale is not the end result of sales and marketing efforts, it’s the beginning of an ongoing relationship. We can learn a lot about customers from their social interactions; the older practice of using neighborhood data for demographics is primitive in comparison.

Word of mouth is nothing compared to word-of-social-network, which can lead to massive surges of interest very quickly. Of course, that cuts both ways: a social network can also destroy a business if it gets a bad reputation. This seems to be a self-governing system where social participation is a must for businesses today but customer service is a vital ingredient in achieving success.

HTML5 Makes the Web Personal: Web Apps that Work on Any Convenient Device

If making the web personal includes being able to use it anytime and anywhere, it follows that users won’t always be using a single device. A phone might be most appropriate when outdoors, a tablet when relaxing on the couch, and a desktop computer or laptop when in your home office or at work. This means it isn’t realistic to assume just one platform or browser for a user. The best bet is to support a wide variety of modern browsers and devices. But that can be expensive, unless you use HTML5.

With mobile applications you can choose to leverage native applications or you can write a single HTML5 web application that runs across modern browsers, tablets, and phones. Techniques like responsive web design and progressive enhancement allow you to provide a first-rate experience across the board with adaptive layout and equally strong support for mouse, keyboard, and touch. I’m not going to claim one approach or the other is right for everyone: there certainly are times when you need a native app for a certain level of experience, or to integrate with device hardware and the operating system, or to be in the app store. But make no mistake, HTML5 apps are giving native apps a run for their money. There’s an obvious economic advantage to writing something once that runs everywhere, as opposed to separate development projects in separate languages for each mobile platform. It is in fact possible to combine these two approaches, where you create native apps for your priority mobile platform(s) and use HTML5 to cover the rest of the world. Again, the important thing here is to make your apps available and acccessible to users as many ways as possible.

Cloud Computing Makes the Web Personal: The Dynamic Platform Social + Mobile Require

The nature of social and mobile use of the web is potential large scale, and sudden surges of activity without warning. This out-of-the-blue increase in load and equally sudden drops in load simply doesn’t fit the traditional way of doing IT. It no longer works to get out our crystal balls and forecast some steady level of load for the next few years, then hope to buy the right amount of hardware to cover it. Our modern constituencies ebb and flow like ocean waves. Clouds are absolutely essential for handling the scale changes, and doing it rapidly. Being social and mobile isn’t good enough: we must be social, mobile, and global (SoMoGlo).

Cloud computing is needed to power the social networks, but they’re also needed to power your sites and applications. If you’re going to leverage social networks, you’ll either be driving traffic to your sites or integrating with social networks directly in your web and mobile applications. Either way, that means software of your own that has to be able to match dynamically changing load and surges.

With the ability to elastically scale up or down, and to do so rapidly, the characteristics of cloud computing exactly matches the nature of social and mobile networks. Mobile, social, and cloud computing were made for each other.

Moreover, cloud computing allows us to have a global presence—even at small levels of scale. Since our modern web applications need to serve people wherever they go, and since social networks connect people even in different parts of the world, being able to provide global presence is very necessary today. Cloud computing helps with this through worldwide data centers and supporting services. On the Windows Azure platform, we have worldwide infrastructure: 6 Windows Azure data centers (two in the US, two in Europe, and two in Asia) and a 24-node edge cache distribution network. We have services that help with content delivery, traffic management and data synchronization. It’s now easy to be available worldwide, and it doesn’t have to be expensive.

Personal Cloud

Now let’s put it all together. Mobility and social networks, strongly supported by HTML5 and cloud computing, are bringing us toward a planet-wide nervous system—not just the web, but people out and about interacting with the web through their mobile devices and sharing collective thoughts over social networks. News, ideas, reputations, and trends ripple around the world in real-time, sometimes bursting to mammoth levels or ebbing as quickly. But this is not The Borg from Star Trek: We join the communities of our choosing and connect with the parties we wish to. The portion of this mobile, social, global phenomenon we carve out for ourselves is our personal cloud.

Your personal cloud, then, is your digital world--your apps, your data, your social networks, your memberships, your licensed content, and your published digital content--not bound to any one machine and available to you wherever you are on whatever device is convenient. For me, my personal cloud includes social memberships (Twitter, Facebook, LinkedIn), movie content I've licensed on vudu and Netflix, music content licensed on iTunes and Zune, my Kindle digital books, games I've bought on XBox Live, my blog, my public code contributions, my email, my documents, and my pictures and videos. Some of my personal cloud is public and can be viewed by anyone; and some it is accessible only to me or my family. My personal cloud is at its best when I can get at it from anywhere on any device. My iTunes, vudu, and Kindle memberships are like that: while they don't allow an unlimited number of machines, they let me enlist a reasonable number of personal devices so I can get at my content and apps in multiple ways.

"Personal cloud" isn't really any kind of new idea or technical breakthrough; rather, it's simply recognizing that people want their digital world to be extremely portable and constantly available. This is not exactly a new dream (recall the Network Computer?), but the combined effects of mobility, social networking, and cloud computing have finally put it in reach. We're used to having online content already, but we don't have a very good combined experience for the individual yet in managing their digital world. It will be interesting to see what develops on that front.

Personal cloud implies a style and vision that should inform how we design things. What does a ‘personal cloud’ view mean for the modern web applications we create? I can think of some very good consequences of making this a central design consideration:

• Design user experiences that reflect the modern digital lifestyle. Stay relevant to your users before someone else does.

• Use social/web identity, so users don’t have to create and remember yet another username and password. You can use the Windows Azure Access Control Service for this.

• Learn about users by inspecting their social activity. Use that data to serve the user in a better and more targeted way.

• Integrate with social content – search, view, post, aggregate, monitor, manage.

• Support a broad set of browsers and devices well. Do this with HTML5 and embrace techniques like responsive web design, mobile-first, and progressive enhancement.

• Ensure a user can easily move between different devices and maintain application and data continuity. Think through how you want state and data and caching to work, there are more choices than ever.

• Consider how you can keep your apps running even when disconnected and whether you need to provide synchronization.

• Take advantage of location. Use device location to personalize the services you deliver. Use location to route to the nearest cloud deployment.

• Track levels of activity on your applications and services and have a scaling process in place.

• Extend to regional or a worldwide presence to match where your users are.

• Proactively manage your brand and your relationship with your users through social media.

• Be able to react in near real-time. React to shifts in the market, ideas that are gaining ground, and changes in the level or nature of activity.

What are your thoughts on the concept of personal cloud? I’d love to hear from you.

CloudFest Denver Recap

I had a great time at CloudFest Denver last Thursday (Feb 9)--the show had a lot of energy and a really high level of tweeting on the #cloudfest hashtag. Neudesic was among the exhibitors and sponsors and provided two speakers--Mike Erickson (Windows Azure Diagnostics) and myself (Windows Azure Design Patterns, When Worlds Collide: HTML5 Meets the Cloud).

At this conference we also debuted AttendeeBee, a mobile/social/cloud app attendees use to tweet, share their location, and rate sessions. Attendees get more points the more they use AttendeeBee, increasing their chances of winning our giveaway, an XBox/Kinect bundle in this case. At the Neudesic booth, attendees can see the entire conference at a glance on a large monitor, including a leaderboard. This provides an element of gamification. AttendeeBee worked pretty well on its maiden voyage and we have some good ideas on where to take it next.

You can view my presentations below.

CloudFest Denver Windows Azure Design Patterns

CloudFest Denver When Worlds Collide: HTML5 Meets the Cloud

Gamification: Making Software Fun

Gamification is the use of game techniques to solve problems and engage audiences. In other words, it makes non-game applications (like stuffy business software) fun and compelling so people will want to use them. Gamification can turn what might otherwise be seen as a chore into something users actually look forward to. Whether for customers or employees, gamification can lead to increased productivity and loyalty, and makes for happier users.

Gamification is an idea our User Experience practice at Neudesic is very interested in as well as our Web & Cloud practice. Of the four pillars we are emphasizing for modern web work (HTML5, mobility, cloud, social), gamification fits into the social category.

Some examples of gamification are achievement badges, achievement levels, points, leaderboards, rewards, and user-to-user competitions. You can see some of these ideas in many popular web apps such as FourSquare and Klout. An example of applying gamification in a business application might be to award points for sales achievements and have a leaderboard showing how salespeople are doing relative to each other. Since sales organizations often launch campaigns with special incentives for reaching various targets in a quarter, the competition angle fits very naturally and can spur people on to beat out their colleagues.

One interesting application for gamification is to use it to solve problems. Recently, a major scientific problem was solved by people playing a computer game. The players deciphered the three-dimensional structure of a protein that allows a relative of the AIDS virus to infect cells. They were able to do this without a background in chemistry: the game only required that they “freeze” or “wiggle” shapes on their screens. Researchers created a game called FoldIt in which players cooperate to rearrange proteins into different shapes. Other software then evaluated which proposed solutions were most likely to be correct. AIDS researchers had struggled for more than a decade to work out the structure; the gamers cracked it in less than 10 days!

FoldIt solved a major scientific problem through gaming

At Neudesic we recently put gamification to the test in our 2012 cloud conference tour, in which we’ll ultimately be doing shows in 12 regions. At CloudFest Denver this week, we debuted AttendeeBee, a gamification application for conference attendees. With it, attendees can tweet, check in their location, plan their agenda, and rate sessions on their smartphones for points, where the more points the better your chance of winning an Xbox-Kinect in our drawing. At the Neudesic booth, attendees could see the overall state of the conference in real time on a large monitor including a player leaderboard. AttendeeBee exhibits all of the characteristics we want to see in a modern web application: HTML5, mobility, social integration, & cloud. It got plenty of attention and sparked many good discussions at our booth with prospects. We have plenty of ideas now on how to take the app further for our remaining conferences.

AttendeeBee applies gamification to conference attendance

Gamification isn’t totally a new idea: it has predecessors, such as “no accidents for X days” in factories; and “best branch” awards in franchises. I’m surprised it took this long for gamification to be recognized as a fundamental consideration in designing software and the user experience, but I’m glad it’s finally here. In hindsight, its value is obvious. It's now official: Fun Is In!

Upcoming February Sessions on Web and Cloud at Portland Cloud Intelligence and CloudFest Denver

Here are some talks I and my Neudesic colleageus are giving on web, cloud, and programming at Portland Cloud Intelligence (Feb 2) and CloudFest Denver (Feb 9)

Development in the Cloud
Stuart Celarier
Portland Cloud Intelligence Thu Feb 2 1:00p
View Walk-through

What’s it like to develop for the cloud? In this session, you’ll see what the development experience is like for Windows Azure. We’ll start with “Hello, Cloud” in Visual Studio, running it first in the local simulation environment and then deploying to a data center in the cloud. We’ll progressively add more features to the application to illustrate the use of different cloud services. Both the local simulation environment and deployment to a cloud data center will be shown. We’ll also discuss the software development lifecycle and share best practices for cloud development. You’ll leave with an understanding of the differences and similarities between cloud development and enterprise development.

Keeping an Eye on the Cloud: Azure Diagnostics
Mike Erickson (@mgerickson)
CloudFest Denver Thu Feb 9 4:10p

When an application is running in Windows Azure it can be difficult to know what is happening. In this session we will cover the techniques that you can implement to gather diagnostic information from the instances running in Azure. We will discuss how you can instrument your code to help you understand what is happening while it is running. We will also look at how you can connect to instances that are running in Azure.

Windows Azure Design Patterns
David Pallmann (@davidpallmann)
Portland Cloud Intelligence Thu Feb 2 2:15p
CloudFest Denver Thu Feb 9 9:40a
View Presentation

In order to design great cloud solutions architects need to understand the design patterns intrinsic to their cloud platform. In this session we will review the design patterns inherent in the Windows Azure platform services, followed by a discussion of application patterns for combining those services. Design patterns will be reviewed for compute, storage, relational data, communication, security, and networking. Key patterns will be illustrated with application examples.

When Worlds Collide: HTML5 Meets the Cloud
David Pallmann (@davidpallmann)
Portland Cloud Intelligence Thu Feb 3:30p
CloudFest Denver Thu Feb 9 1:20p
View Presentation

What does HTML5 mean for cloud computing, and vice-versa? When two revolutions are happening simultaneously you can expect interesting synergies and interactions. Even as cloud computing and social networks are profoundly transforming the back end, HTML5 and mobile devices are profoundly transforming the front end. When these worlds collide we can achieve something truly remarkable: rich, take-anywhere immersive experiences backed by on-demand, elastic services running at global scale. Both worlds are driving changes in the way we design software, and good solution architecture demands they be considered jointly. In this session you'll see how HTML5 and the cloud combine functionally and architecturally, illustrated by example.