Category Archives: Web Development

Movi.Kanti.Revo

Great heights are expected when Google Chrome Experiments and Cirque du Soleil collaborate for an interactive project. At Movi.Kanti.Revo, the creative troupe explored a new stage for the latest web technologies, showcasing their performers but also reinventing markup, with divs being played around like actors.

Named after the Esperanto words for Moving, Singing and Dreaming the interactive journey invites the user to use gestures to navigate the beautifully surreal world, following a mysterious character in her adventure.

The 5 month project was created in HTML5, using CSS animations, 3D transforms and an impressive facial detection script, accessing the camera so users could navigate the experience with their gestures.

If you’re technically inclined, find out about the whole developer magic at Behind The Divs and have a peek at the 3D World markup tutorial.

Source:Google Developers Blog

London Calling from Australia

From the Queen’s Jubilee to the 2012 Olympics, London is getting a big share of attention, with lots of people visiting the city.

BBC Knowledge Australia and R&B Creative developed this great mashup using Google Styled Maps, invinting people to explore London. There’s also a challenge where you get to answer questions and get special codes for a chance to enter the draw and win a $4000 travel voucher and a brand new iPad.

If you aren’t lucky on unlocking your codes, you can always check their Facebook page for more tips.

The Honda Experiment

Remember the HTML5 experience by Google and Arcade Fire with the Wilderness Downtown? Now it’s time for a new one, with Honda releasing The Experiment, a new HTML5 browser based game inviting players to a chain reaction by placing a set of pop-up windows in sequence.

Lots of windows and interactions across the six levels, and you can always challenge your friends to beat your score. Video below.


Credits:
Agency- Wieden + Kennedy, London
Creatives: Lisa Jelliffe, Kirsten Rutherford
Producer: Dominic Tunon
Creative Directors: Chris Groom, Sam Heath
Interactive Creative Directors: Gavin Gordon-Rogers, Andy Cameron
Designer: Chris Welsby
Creative Technologist: Mike Tucker
Executive Creative Directors: Tony Davidson, Kim Papworth
Production: B-Reel

FERRY from The Dam Armada

With agencies finding harder to recruit talent and trying to diversify risk, it is now common to find business incubators as agency spinoffs.

Within  W+K Amsterdam there’s the business unit The Dam Armada, made up of a team of creative developers and designers, turning ideas into products, the first one being FERRY.

Created for designers and developers, the tool consists on FERRYScript (the exporter)  and FERRYDocker (the interpreter), converting PSD layers into a production ready set of png and XML files, interpreted by FERRYDocker ready for iOS interfaces.

The tool is on sale now at http://ferry.thedamarmada.com for 14.99 euros, saving a developer a few hours a month of chopping and slicing.

Shameless PromoTion: Sapo Pond

It’s been a while since my last Shamess PromoTion, where i highlight projects created by friends, mostly from Portugal. The project i’ll be describing today was developed by SAPO, where some good friends managed to deliver one of the most solid web applications i’ve seen lately, specially considering that Lisbon isn’t exactly Silicon Valley.

pond

So, what’s Pond ?  It’s an aggregator and publishing tool for social media services, that allows anyone to manage their social graph on a single place. You can import your friend list from social web services, merge friend contacts and update your social web status on the web, mobile or desktop.

mobile_lineup

The wide range of platform support is certainly the highlighted feature:  Besides the web, Android, and Symbian mobile apps are available (iPhone soon) and desktop software (Mac, Windows and Linux) will also be released.

Currently Pond supports Twitter, Flickr, SAPO Fotos, YouTube, SAPO Vídeos, Facebook and SAPO Blogs, as well any RSS or Atom feed. It will surely be a great way to introduce the power of social web to a wider portuguese audience, since the application is sponsored by TMN — the largest mobile carrier in Portugal (disclaimer: TMN is a Fulllsix client) — PT Comunicações and Meo (it will be interesting to see a social app on a IPTV service: social TV).

With smartphones becoming more affordable, growth on the social web will be fueled by mobile web with centralizing services like Pond or Vodafone 360 taking full advantage our digital identities. I only wish i could add more metadata to my friends info, like birthdays, tags or events. Give me that, and i’ll be a happy ? Ponder ?

Great work, SAPO team!

P.S.: the service is on beta — invitation only for the moment — with early registration for TMN clients.

Create Your Canvas

If there’s one place where creativity excels is on a blank canvas. You “just” have to figure out what to make of it.

mycanvas

Fashion brand Land’s End is here to help with a new website developed by EVB, taking full advantage of Facebook, Twitter and Flickr to help you unleash creativity. Altough they should have used a password anti-pattern with Twitter like OAuth (there’s no way i’m sticking my Twitter password on a brand website) the Facebook Connect showed me just how my friends are the new paintbrush.

mycanvas-fb

Oh, and they sell clothes too.

And just in case you didn’t notice the writing on my painting, Portugal’s main Online Advertising Award is up for voting at http://premios.sapo.pt/.

Sequence redesigns a new web experience

Even if this blog has focused mostly on Flash based interactive experiences, that doesn’t mean i have anything against web standards. Quite the contrary, with XHTML+CSS being preferable in most of the cases, unless your idea uses media that is best fit for a more interactive technology.

And since what really matters are fresh ideas, here’s the redesign from Sequence, a San Francisco based design and strategy agency that excels on using modern web standards to create a dynamic website, with a unusual approach to navigation, that many would thought impossible a few years ago without using Flash.

sequence-home

Under the hood the website is using HTML5, CSS (with an iPhone optimized version), Javascript (Mootols) and Cúfon, a font replacement technique based on SVG (VML on IE) and JSON.

sequence-team

We’ve come a long way in web standards, and even if XHTML 2 is no longer, there’s plenty of innovation out there, from Mozilla Labs to the multi-platform reach of Webkit. So you’d better think of a pretty damn good excuse to develop a site only in Flash.

Social, Portable and your mom

oauthmom


The enormous growth of social media services, with Facebook now over 175 million users and Twitter having a yearly growth rate of 1382%, validates the need for companies to start using these social platforms to engage with customers. And with more people joining these platforms, the amount of content created and shared also increases, with users becoming more sensitive on the way they build their personal network.

At first, users are driven to sign up by curiosity or bombarded by constant friend requests, joining their close circle of contacts. The trouble is that it doesn’t stops here. You then become a fan of your favorite author, start following you favorite basketball player on Twitter or discover that old colleague from trainee years.

The social network, once reserved to our closest friends, is now growing beyond any reasonable Dunbar number and providing much more value that keeping us connected and building group stability.

Friending is a social verb

We can’t deny it: we love groups. We need to belong to a social circle. Bigger online social circles usually imply an increasing complexity of filters and preferences necessary to make it manageable, with revised criteria for friending people. As personal networks grow in size and influence, we also get to the see how artificial barriers to entry are built, with cultural groups creating psychological boundaries (from celebrities to intellectual prejudice).

From Coleman’s concept of network closure as social capital to today’s social media rise, we’ve kept the need to include in our social graphs both weak ties and strong ties. What changed was the way both geographical and social circles were affected by the Internet. Twitter, for instance, favors an asymmetric behavior regarding groups, by not requiring two-way acceptance to get updates. Facebook, on the other hand is focused on a reciprocal relationship that implies social approval.

The nature of these social network relationships also changes according to the stage of a person’s life, with younger demographics having fewer and closer friend evolving to adult life with connections more essential to structural sustainability and innovation. Linkedin, a professional social network, is based on more private conversations and encourages these weak ties, quite valued on today’s economic uncertainty.

In most of these online social networks, users put a great deal of effort to perfect their profile, showing that it goes beyond fine tuning preferences, it’s also a public expression of the self. At social music service Last.fm, your playlist is a pretty good psychographic profile of who you are. Or at least, how you want to be seen by others.

But all these profiles, filters and preferences, where users spend hours so they can have a better experience, are mostly useless. Useless in the sense you can’t easily get this data out of centric platforms.

Portable me

These platforms have been evolving slowly, from pre-api times were each user had to login on services and invite all his relevant social circle to today’s APIs with password anti-patterns and OAuth Support.

If Facebook started providing closed filtering and grouping mechanisms, Google has pushed even further by releasing Portable Contacts. The open standard makes it easier to access your social circle information in a safe way, using existing standards and libraries (OpenSocial, OAuth, vCard).

Users can port in their existing network of friends and see who they know is already using a site. It goes beyond the Facebook feature of optional grouping when adding a friend, by enabling 4 system groups for each user, accessible by service providers. Any user can manually add contacts to the Coworkers, Family, and Friends groups; the My Contacts group contains contacts added to contact groups by the user.

Your mom

What’s your mom have to do with this? Well, let’s put it bluntly: most of us don’t want to share some of our social network updates with our mom, the same way most of us as teenagers didn’t want her to know who we started dating. Or as Clay Shirky mentioned last year at Web2.0 Expo: “What filter just broke ?”  As experience architects, we should be thinking on providing context to social circles and encourage the integration of third-party applications that respect this behavior.

Your mom probably doesn’t have a clue what Microformats or Data Portability is, but she still would love to have a future where she could setup a TV with her media preferences, thanks to a simple Facebook Connect on a Boxee device. That way, you don’t need to worry that she messes your remote when staying for the weekend.

With each consumer defining proper contexts, with new tools and better ways to manage their portable profiles, brands and services that encourage this open portability will get to build better behavioral approaches to this ubiquitous vision. The structural holes that will be detected once the data starts flowing will provide immense growth opportunities and gains in productivity, as each person starts connecting their networks with the appropriate context.

Cross posted at DraftfcBlog
Revised by Andr3

Illustration remixed from Mags and Bryan Veloso

You can also Discuss on the Facebook Page. (See what i mean: the irony of writing this post ad inviting people to closed conversations)

Progressive Enhancement with Flash

pef

As promised, here’s the presentation from yesterday at RIApt AUG, on a 30 minutes talk about why you should care about Progressive Enhancement and how it can be applied to websites developed with the Flash platform.

The sample code (with SWFObject, SWFAddress and XSLT samples) is also available for download.

Update: As Marcos rightfully points out, the Slideshare link isn’t that “accessible”. So here’s a PDF or ODP for download.