Author Archive

Sights & Sounds

Tuesday, March 15th, 2011

Scrobbyl @ work

Sharon Showalter & Wagner Paula are creative technologists at SaatchiNY. While they’re in Austin for SXSWi, they’ve been sending the H/H team updates on cool stuff they’ve seen. Below are some of their favorites so far.

PANELIZER
VCU Brandcenter Creative Technology students created panelizr. It’s a great way to cover all conversation around all the panels at SXSW.

“As soon as we saw Panelizr, we knew it needed to be built.” – Mark Avnet (@mavnet), head of Creative Technology track at the VCU Brandcenter.

It was co-invented by Rachel Mercer, Jeff MacDonald, and Matthew Runde, all of whom are 1st year Creative Technology students and they rallied their peers and got to work. The students locked themselves in a classroom for 10 around-the-clock days. They did everything from IA, to back end database development, API integration, visual and user interface design. Here is the blog about how they created it.

LOVE, MUSIC & APIs
This was a great music session called love, music and apis. Matthew Ogle and Dave Haynes started off the session with a bold statement, developers at the new gatekeepers of music. They then discussed some of the most popular music apis like @LastFM @Spotify @Songkick @Gigulate @Soundcloud @MusicBrainz @musixmatch @echonest and @7Digital.

They introduced us to some really cool things that people have made at Music Hack Day events. Some of my favorites included:

Invisible Instruments

Hipster Bragging Rights

This awesome application helps hipsters prove who discovered an artist first by consulting their last.fm accounts.

Scrobbyl

Scrobbyl automatically updates your last.fm account when you listen to vinyl.
You can view an achive of some of the tweets that were sent during the panel HERE.

Category: Digital & Interactive, Events, Our People

HTML5

Monday, February 7th, 2011

Wagner Paula and Sharon Showalter joined Saatchi & Saatchi in 2010 as Creative Technologists

There’s been a lot of talk about HTML5; it even has a logo now (see: front page image). Sometimes it is hard to understand what HTML5 really means to us all. We wanted to give you brief overview and show you some of the cool stuff it can do.

Basically, HTML5 is an update to HTML. The biggest difference HTML5 brings to the masses is more accessibility to content like audio, video and animations. With HTML5 we rely less on Flash to display content, which is important, especially since Apple won’t render Flash on their mobile devices.

When you use Flash, it becomes an intermediary between the code and the browser (Safari, Firefox, Chrome or Internet Explorer). With HTML5, your browser interprets the code directly. This can result in faster load times, smoother animations and wider accessibility across devices.


Two organizations, WHATWG and W3C, work to define how browsers should interpret code and then the browsers work to implement their standards. It is a lengthy process that takes time, as this infographic on html5readiness.com explains. This is why the implementation of HTML5 is a long process that will extend over many years.

HTML5 has a lot of capabilities, like audio and video playback and semantic mark-up (coding tags that help describe the content). One of the elements that we are most interested in is the canvas element.

CANVAS
The canvas element basically works like an artboard. You can use it to assign x and y coordinates to objects and then use javascript and css to manipulate and animate these objects, replacing some of the functionality we traditionally rely on Flash for.

Here are some cool examples of the canvas element in use:

NIKEBETTERWORLD.COM

The dotted line that extends down the Nike Better World page is not an image. It was drawn on the page using the canvas element.

MTA.ME

A beautiful musical visualization of the New York subway map. It uses the canvas element to display the paths of the trains.

WEAVESILK.COM

On WeaveSilk, the canvas element is used to allow you to draw a line and then the line is echoed and manipulated in a beautiful display.

We hope you all are as excited about HTML5 and the canvas element we are. If you have more questions or could use some advice on incorporating it into your work, please talk to us. We sit at the long tables on 18.


Category: Creative, Digital & Interactive, sisomo

The Creative Digital Process

Tuesday, January 4th, 2011

So often technology and code is expected to make what has been designed on paper a reality. The Saatchi & Saatchi NY Holiday eCard we created last week is an example of a process working in another direction. Before anything was designed on paper, we were influenced by visual effects we knew we could accomplish with code. We knew we could take a photograph, and pull out and store the color values, thus creating a highly pixilated mosaic of a photo right before your eyes. This provided an excellent opportunity to include the photos of everyone here at SaatchiNY in the card.

A BREAKDOWN OF THE VISUALS

The e-card is one small example of how powerful data can be when you leverage it properly. Each mosaic was made up of 1200 photos; we pulled from a collection of over 200 photos. Gathering information for every photo could have been a huge headache, but it became manageable though crowd sourcing; everyone was responsible for entering their information into an online database.

A special thanks to everyone who helped make the holiday e-card happen.

Designers: Heidi Ng and Camilla Flesche Kristiansen
Creative Technologists: Wagner Paula and Sharon Showalter
Copywriter: Becca Schepps
Producer: Kwame Taylor-Hayford
Music Producer: Eric Korte
Photo Retouching: Yan Apostolides
True Blue Leader: Erin Lyons

About us: Wagner Paula and Sharon Showalter joined Saatchi & Saatchi in 2010 as Creative Technologists.

Category: Creative, Digital & Interactive, Our People