By now I’m sure you’ve seen the widely successful Super Bowl Ad for Old Spice body wash. Old Spice recently followed this up with a second advertisement using the same unique and unusual creative stylings. However if you thought that a couple of funny and unique videos was all the company had up their sleeve, then what took place on the @OldSpice Twitter stream (combined with other social media activity) during the last few days must have you reconsidering that position.

A relative new-comer to the microblogging site, Isaiah Mustafa and the Old Spice team turned the Internet on its head when the started personally interacting with their fans online. It all started out with the relatively innocuous tweet:

“Today could be just like the other 364 days you log into twitter, or maybe the Old Spice man shows up.”
What we saw was one of the most original and innovate uses of the Internet and social media since Zuckerberg stole a series of yearbook pictures from the Harvard student body. (or a couple of rainbows appeared in the sky)

As fans interacted with Mustafa, he would respond to their messages via short YouTube clips. The responses were done in the same random, post-modern, uber-meta style as the rest of the Old Spice advertisements, which made them entertaining and addictive; it was impossible to just watch one clip.

And oh yeah… It was in real time, as in you could make a comment or ask a question and within minutes hopefully watch a response from Old Spice.

Target the Audience

The brand capitalized on influencers, like Kevin Rose and Alyssa Milano, and used them to spread the campaign beyond Twitter. Sending personalized videos to both “web” celebrities and media outlets promotes the brand and this advertising campaign to even broader communities.

You could easily write this off as a really cool idea, wish that you had thought of it or think that it’s only possible because of the enormous budgets multinational brands like Old Spice have available…

Or you could think about what the lessons are for your brand.

What Are You Doing?

Old Spice has effectively shown the internet what social media promoters have been telling brands for years: successful usage of social media requires you to honestly listen to and interact with your users and then provide them with relevant information and content to consume.

Should you run out and start recording a bunch of personalized video responses to questions and comments posed by your audience? Are you’re willing to take the risk needed for fast turn around times?  Do you have chutzpah to create entertaining videos that capture users attention? Video responses work for Old Spice because it’s the format viewers expected from the brand.  What medium and what type of conversation will your users expect from you?

Run with It

Even if you don’t think the format will work for you, there are tonnes of lessons your marketing department can learn from Old Spice:

• Its not enough to just respond when you feel like it – if you’re really listening, you need to respond when your audience is ready and with the information they’re expecting.
• You already have interesting and relevant information or marketing to share;  if you can share it in an engaging manner then people are going to spread it for you.
• Old Spice broke down our silo assumptions;  that Twitter is for Twitter responses, blogs for blog responses and YouTube for inane comment responses. Instead, they connected various platforms together in an incredibly effective way.
• We’re not done innovating yet, and it’s always possible to take simple ideas and combine them into a new and interesting way of presenting information.

If you want to read more about what’s going on behind the scenes of the the Old Spice shoot, there have been a few great interviews with the creative team of Wieden+Kennedy.

We had some tough questions from the audience around social media policies; where do the lines between personal liberties and freedom of expression cross into professional conduct and employment agreements. We were very grateful for the additional insight provided by Dennis Flaherty from the City of Markham around the importance of having a good, clearly communicated policies AND social media training in place.

Both Titus and Dennis brought up that the challenges with social media and employees excercising poor judgement in a public forum is not a new challenge, and in fact many of the employment contracts already have provisions in them that protect the municipality in the event that employees are excercising poor judgement, provided the aforementioned policies and procedures are in place.

One interesting point that came out during the question and answer period is the lack of information around community pages on Facebook, and a general lack of participation in Wikipedia. A challenge I’ve put out to attendees from the session is to task someone within your team to ensure that your municipality is participating in generating the content for both community pages and on Wikipedia.

During the presentation, we showed some examples of some websites that do a great job of broadcasting out information to their constituents:

• www.waterloo.ca
• www.portcolborne.ca

We also discussed Social Media Policy and suggested a starting point could be our own social media policy generator:

• www.policytool.net

There is a lots of information about social media and to get a handle on the scope, popularity, and sheer importance of it all, we recommend the excellenet Socialnomics video:

We gave some examples of what some municipalities and citizen groups have been able to do with Open Data:

• www.data.gov
• www.data.gov.uk
• data.vancouver.ca
• www.ottawa.ca/online_services/opendata/index_en.html
• www.vantrash.ca
• www.eatsure.ca
• www.nextstopapp.com
• www.taxicity.ca

And suggested that if there was interest in learning more, some great resources are;

• A great resource for open data discussion/dialogue – www.eaves.ca
• Our blog (you’re on it!)
• Another passionate individual on the topic of Open Data talks at TED

Our slide deck was mostly visuals to aide in the discussion, but here are the key talking points per section:

Website

• We are living in an age of participation and websites need to encourage that
• Avoid using “closed” file formats that require additionally programs to open, such as PDFs
• Start using RSS Feeds to push content to citizens

Social Media

• Conversations are happening online and municipalities should be part of that
• Content should be engaging and connect citizens with services
• Explore the POST method to develop a strategy

Open Data

We wrapped up the session by issuing a challenge to all present to work harder to position their Municipalities as leaders in these areas. The changes we’ve seen in the first decade of the 21st century are only the tip of the iceberg and there is no better time to get involved.

IE 6.x is continuing to experience a decline in usage; Google (and Google owned YouTube) have already discontinued support for the browser.

We are jumping on the bandwagon. By default, rtraction quotes will no longer include IE 6.0 support in quotes, RFP responses, etc. We will still include IE 6.0 support as an optional line item.

Here is what this means to our clients:

1. The average cost of our website implementations will drop significantly, especially for basic content management systems. It’s actually scary to analyse how much time has gone into IE 6.x support over the years. Now we’ll have that time to spend on other, more innovative things.
2. Websites built/quoted before this announcement will continue to support IE 6.x. Additionally, for our public sector friends support is still available for those sites that are required to have backwards capability.
3. Our developers will be happier. I am expecting a parade, or some equally elaborate celebration now that this announcement is formally made.

As always, if you have any comments, complaints, etc please comment below or drop me a line directly – email hidden; JavaScript is required.

My biggest fear upon leaving university was that I would get stuck at a place like Initech;  that my best days were behind me and it was now time to start the grown-up process of working to pay for all of the fun from my youth.

My experience at rtraction has been far from that.  I have a say here  and my ideas matter. rtraction is more than a web development shop, it’s also a place where really neat things get created. It’s also a place where one can say “really neat” and not get beat up. Definitely better than school.

Here are just a few of the really neat projects that make this the best job ever.

NeedVision

Last July I had the opportunity to mashup Google Maps and back then, the fancy new  Kiva API to create a slick new way to look for microlending opportunities.

NeedVision shows you available Kiva loans on a map of the world. It’s also open source. If you can make NeedVision better, do it. Then tell us about it

1000 Acts of Kindness

1000 Acts of Kindness, aside from being a great Corporate Social Responsibility project, is a very cool website from a technical perspective.

In November I was tasked with making the front page of the website into something really cool. I had been looking for an opportunity to put the parallax effect into practice, and this was perfect.

Compost

Compost has been my pet open-source project since late last year. It allows designers to gather feedback from their clients, in a graphically appealing and intuitive way.

For more information about Compost and how you can get involved, check out compo.st. An iPhone version is in the works, and a BlackBerry version is currently being planned by a member of the local development community.

PolicyTool

In collaboration with technology lawyer David Canton of e-Legal, we rolled out PolicyTool. PolicyTool lets you fill out a simple questionnaire and then generates a policy based on your answers.

Since its March release, PolicyTool has made a nice splash in the social media scene. It is very nice to be able to say that you’ve been part of something that went viral.

LondonFUSE Code Blitz

One day in March, the dev team worked collaboratively to build our first iPhone app for London Fuse. In eight hours we had a working version of the app that listed upcoming events in London Ontario.

If you have tried the app and would like to make a suggestion for the next version, check out LondonFUSE on uservoice.

eatsure and Open Data

Encouraging the city to open more data, Noah Stewart, David Millar and Shawn Adamsson created eatsure.ca using data from the local health unit’s Food Inspection Disclosure Site.

This is very exciting – as more data becomes available, the more really cool projects we get to create.

Podcamp London Twitter Visualization

The most recent supercool project that I had the privilege of working on was the Podcamp Twitter visualization. In addition to CodeIgniter, jQuery, and the Twitter API, the project makes use of clever CSS3 transformations to create a 3D effect.

Corporate Social Responsibility

Everyone at rtraction has the opportunity to take some time every month for a CSR project. Past projects include 1000 Acts of Kindness and Reforest London. This is an excellent opportunity to get connected to the community and use our powers to do good.

Office Pranks

As with any office, pranks happen every once in a while. I don’t mean to boast, but my latest masterpiece in this area has left others… speechless. What can I say? Pranking one officemate while framing another and simultaneously preventing revenge because the prank was officially a “good deed” – priceless.

Now, look at your job. Now look at my job. Look at your job, then back to my job. Sadly, your job is not my job. But it can be, because we’re hiring!

If you have any questions about the job posting or any of our projects, ask away in the comments section below.

- increasing homegrown R&D opportunities
 -upgrading our digital infrastructure to accommodate digital innovation and Canada as a digital nation
- increasing digital literacy in our youth and current adult workforce
- producing more Canadian content and becoming identifiable globally
 -growing the overall Canadian ICT industry

From the perspective of a former educator, I chose to attend the learning stream, as well as the creating stream. What I was looking forward to most was the opportunity to participate in what was being touted as highly interactive breakout sessions to develop immediate action steps to help create a digital economy. But what actually took place was far from being interactive. Each session was essentially a one-way conversation and ended up being a rather large let down. While the speaker panels were clearly stacked against those who were the most active in the industry, I was relieved to see that in each case, the digital savvy panelists ’represented’ and fought through the noise to be heard – at least by the audience.

What amazes me is Canada 3.0 succeeded in pulling together some of the brightest minds in the business, but neglected to use them as a resource. I know the attendees I spoke to also felt the same way. Why was that? If change is truly going to happen then an open dialogue must take place and those making the changes need to feel they have some ownership over the changes they are going to be making.

Maybe next year…

I’ve read with interest David Eaves‘ thoughts on the two day event and he summarized exactly how I was feeling after I left Stratford. I have some positive thoughts but unfortunately I’m disheartened by a lot of the rhetoric coming from traditional institutions and the lack of encouragement of the grassroots communities and poor attempts to include them in honest discussions.

My time at Canada 3.0 was largely in the Creating Stream, but I did attend a few sessions elsewhere. I won’t pretend to have a complete grasp on all the conversations that took place over the two days, but I’m sure my experience was much like many others. To put it bluntly the conference did not even remotely live up to what the organizers promised on the front page of the Canada 3.0 website;

“Your voice will be heard.

Whether you’re a Content Creator, Tool Maker, or Tool User, this is your chance to influence our national digital media action plan. Become part of the discussion to ensure Canada can not only compete, but also lead the world, in today’s new digital economy.”

Unfortunately nothing could be further from the truth. Only lip-service was given to honest interaction and community involvement. Throughout the event  it was clear that the agenda had been set before the event, and the sole purpose of the conference was to get industry leaders together to pay homage and ratify a predetermined outcome.

The organizers also promised “camp-like discussions”. I have experience running and attending camp-like conferences, and there was nothing remotely like that at Canada 3.0. Nor was there even the opportunity to have any type of community driven session.

When it came time to wrap up on Tuesday, the chairs of each stream were invited to present ‘action items’. These were ideally to come from the participants and were supposedly to help build Canada’s digital strategy. None of the items that were presented from the Creating Stream reflected the comments that the attendees had made publicly.  Worse yet, they all came from the first session and seemed stilted, fake, contrived, and designed to appease the traditional mainstream communication channels.

Which leads to the single most major issue with Canada 3.0. The event had the potential to realign Canada’s digital future and to create and foster new and innovative ideas, models and platforms. Instead it focused on bolstering traditional positions and industries; like the big three telecoms, television networks like CTV and Global, and mainstream media outlets like newspapers and radio. Funding announcements designed to benefit tired business models, old-fashioned copyright reform that encourages conglomeration instead of independent and innovative creative works were championed, and traditional failing ideas were propped up, solely because they were Canadian.

Not all is lost though, there is a grassroots movement, full of content creators, small industry professionals, tool makers and developers, who are all working to create a digital environment in Canada that will take us as leaders into the 21st century; we can position ourselves as innovative and relevant, ready to do business in the digital media space on a global scale. However, we’re going to need to shake off the ball and chain that is the traditional broadcaster and we’ll need to be prepared to move forward without government assistance, but ultimately we will succeed.

If you’re a web developer reading this, you know that something like this doesn’t happen every day, and is therefore very exciting!

The main requirement for the project was to display a 3D isometric floorplan of the Convergence Centre at Western University in London Ontario, with tweeps showing up in the room they are tweeting from.

Each room is a <div class=”users”> that can contain <div class=”avatar”> as many times as needed. Transparent GIF’s are used as background images for the character’s body, head, torso and legs.

<div id="bar" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>
<div id="maple" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>

For development purposes, we put a thick red border around the rooms.
As we add more avatars to a room, we’ll adjust their margins so that characters squeeze closer together and the room will not overflow.
Avatars are floated right so they stack nicely – closer ones will overlap farther avatars.

.users {
	border: 4px dashed red;
	position: absolute;
}
.users .avatar {
	height: 44px;
	width: 33px;
	float: right;
	margin: 17px;
	position: relative;
}
.head, .torso, .legs {
	position: absolute;
	top: 0;
	left: 0;
	height: 44px;
	width: 33px;
}

Adding CSS3 transformations, we can skew the room divs to match the shape of the rooms in the background image.
The side-effect of this is that the avatars inside will also be skewed.
The CSS below will affect Mozilla and Webkit-based browsers only.

.users {
	border: 4px dashed red;
	position: absolute;
	-moz-transform: skewX(45deg) skewY(-12deg);
	-webkit-transform: skewX(45deg) skewY(-12deg);
}

Now we have to put an opposite skew on the avatars to cancel out the room skew.

.users .avatar {
	-moz-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
	-webkit-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
}

All that’s left is to remove the red border around the rooms!

If you have any questions or comments about using CSS3 to achieve a 3D effect, or if you want to show off your own 3D CSS3 project, we’d love to hear from you!

Features

• 3D isometric floor plan
• Current and Next session displayed for each room
• Use the Podcamp hashtag #pclo10 to have an avatar displayed in the lobby.
• Ability to “check in” to one of the session rooms by using the room name in a tweet.
• Unique avatar for each visitor.

Response

Attendees found this display to be very useful – they would see tweets of someone they know enjoying a session in one of the rooms, and they would make the decision to visit that session. Some users managed to find an “easter egg” built in – when a user uses the hash tag “#bye” their avatar would be beamed off the map with an animated laser.

Throughout the day people congregated in front of the display to check out what others were saying and what was coming up next, or to find directions.

Built on Code Igniter, the application made use of jQuery, CSS3 transformations (to achieve a 3-dimensional effect) and the Twitter Search API. Stay tuned for a more technical post on how some of the effects were achieved.

Lessons Learned

You can do amazing things with Javascript and CSS – Flash is no longer the only option for “cool”. Since this application was meant to run on a large display there was no need to worry about browser consistency which allowed for unbridled CSS3 greatness!

Seeing others interact with your work is very rewarding. Seeing large groups of people, mobile devices in hand, staring at the screen waiting for their tweet to show up or their character to blow up makes it all worthwhile.

If you have any questions or comments about Ewoks (the application, not the small furry creature indigenous to the forest moon of Endor), or if you have built your own supercool Twitter display, we’d love to hear from you!

However, there has been a major issue with determining what exactly it means to be “digital”. There is no consensus between the stakeholders across Canada about what we’re measuring. Therefore we’ll never really know if we’ve reached  our goal. Additionally there is a variety of disagreements about who should be leading this charge and how far do we need to go with public consultation by government instead of action. Finally, there seems to be a big push to work within existing models and platforms of broadcasters and “old media” and ignoring new systems and potentials.

Despite these challenges, the conference has been a great opportunity to connect with content creators, brilliant developers, industry leaders, and corporations.  As the second day continues we’re invigorated to keep these conversations alive and encouraged by the community that we’re seeing that already exists across Canada.

When we get back to London we’ll review our notes and our twitter streams and we’ll present much of what we’ve learned on this blog.

Until then, how well do you think we’re preparing for 2017 and what goals should we be looking to measure in the lead up to this date?

One of the biggest announcement came from the White House and they have released some great new modules for Drupal.  All three modules work well to fill noticeable voids and provide a better browsing experience. One module, “Context HTTP Headers”, allows developers or system administrators to customize caching for pages based on type.  This means is that you can have your news pages cached for five minutes on a high traffic website and have your ’standard content pages’ such as About Us cached for sixty minutes.  Another module release is called Akamai and helps target scalability as well by enabling integration into a their Content Delivery Network. Another module called GovDelivery makes it a lot easier to send out tailored emails to the governments email list.

The White House also released one of the most desired modules for any developer who is working hard to build accessibility complaint websites. Dubbed “Node Embed” the module helps deliver rich content (photos and videos) with all of the appropriate meta data that makes them fully accessible by screen reading software.

The Bank of Canada has also made some contributions back to the open source community. They released three WordPress plugins that were developed for their website.  The AJAX Scroll plugin adds a graceful fade in and fade out for next/previous links when a user is navigating content.  Another recently releases plugin is called PBox and it allows a developer to create custom content widgets and standardize the display of the content within them.  This is very useful as it helps ensure all information will have the same look and feel across a site.

The Bank of Canada has also released a WordPress plugin that helps remove the handcuff’s when it comes to widgets and customizing them.  The plugin called XWidgets allows for a page-by-page customization of any widget which means you can have a news feed or any type of widget customized to fit any specific pages layout or design needs.  This means you can easily have your about us page display a Flickr feed and the same widget could display a twitter feed on your contact us page.

All these announcements are great news for all types of internet users, from casual surfers, to content producers and developers. Its great to see political offices getting on board with open source and we hope that this is just the start to many more contributions from all levels of government.

What online government features would you like to see made available to the general public?