One of our projects for Carlsberg featured on Blog Del Diseno – Thanks!
20 HTML5 sites that changed the game
This year HTML5 truly rocked. Oli Studholme, one of the HTML5 Doctors, runs through 20 of the best sites and covers semantics, audio, client-side web apps, canvas as well as SVG and WebGL and looks ahead to the future
2011 has been an amazing year for HTML5 and the web. We’ve seen HTML5 continue maturing, progressing to Last Call status in May and on track to be a W3C specification by 2014. The WHATWG have been busy with both improvements to HTML5, and new post-HTML5 features such as WebVTT. The progress for browsers has also been staggering, with all five main players actively pushing the boundaries of the web, and Firefox joining Chrome, Opera, and to a lesser extent Safari in frequent, automatic updates. One more to go!
On the content side, it’s really felt like 2011 has been the year the HTML5, CSS3 and JavaScript web stack has come of age. HTML5 is now the default for most developers, and impressive explorations of the new features HTML5 makes available have been coming thick and fast. Here’s a tiny sampling of some sites that rocked HTML5 this year. Quite a few of them made my jaw drop with the feeling “I can’t believe this is the native web”.
Semantics
1. HTML5 For Web Developers
HTML5 for Web Developers might seem like a strange site to include here, because it’s just a version of the HTML5 specification. Historically W3C specifications have tended to be confusing, written for people who make web browsers, not websites. However, the HTML5 spec text is surprisingly readable, and peppered with examples. If you’ve had bad experiences reading W3C specs in the past, you might be pleasantly surprised.
HTML5 For Web Developers was made by Ben Schwarz and friends to be “a companion specification for web developers to use on a regular basis”. It’s a restyled version that drops the “implementor notes” for browser makers, perfect for web developers. Under the very readable print-influenced styling are some nice HTML5 additions too. It uses Offline Cache, and saving it shows a progress bar in supporting browsers using <progress> and the AppCache API. The search-as-you-type feature also works offline, and of course the search box uses type="search".
It also represents how we can all make a difference. Ben did this as a volunteer project, andthe source is on GitHub. And as web devs we have the skills to do so! Which takes us nicely into …
2. Move the Web Forward
Move the Web Forward by Mat Marquis, Aaron Forsander, Connor Montgomery, Paul Irish,Divya Manian, Nicolas Gallagher, Addy Osmani and friends shows you how “you can make the web as awesome as you want it to be”. It lists a range of things for all abilities that you can do to make the web better.
The one-page site features clean HTML5 code, using data-* attributes to tie in Twitter hashtag searches. It also has an adorable but invalid doctype:
-
<!DOCTYPE html public “i ♥ the web”>
(The important bit is <!DOCTYPE html, which triggers standards mode.) But above all, more than any of these awes HTML5 websites, Move the Web Forward’s message is crucial. InBeyond the Blue Beanie?, Stephanie (Sullivan) Rewis comments “As the saying goes, many hands make light work. How fantastic would it be if there were so many hands that the burden didn’t fall on just a few? Together, let’s make the web rawk even harder!”. You can read more in Addy Osmani’s The Smashing Guide To Moving The Web Forward.
3. Boston Globe
The Boston Globe website is the poster child of a beautiful commercial “responsive web design” website. Built mobile-first, it behaves well in old browsers, even those without support for media queries or JavaScript. Scott Jehl of the Filament Group says “Every critical feature of the site was designed to work independent of JavaScript, but enhanced with richer JavaScript-driven interactions in capable browsers.”
Scott continues “We used HTML5 for a number of reasons. Mostly, it’s future-friendly and offered features that were useful in our feature set. For example, we made wide use of data-attributes for configuring behavioural options or associating content enhancements, we also appreciated the ability to use newer semantic elements in place of div/p/span where they made sense.”
Audio
4. Anatomy of a mashup
Cameron Adams combined his love of music, DJing, datavis and sweet web tech into Anatomy of a mashup.
The audio of his mashup of Definitive Daft Punk is visualised using the <audio> API and<canvas>, with support from CSS3 transforms and transitions. Cameron says “All of the waveform and spectrum visualisation is performed in realtime, so your browser is rendering a music video on the fly!” Proving that Flash isn’t dead yet, Cameron used a custom Flash app to get the audio spectrum data.
On HTML5, Cameron says “The thing that I love most about working with HTML5 is the immediacy of development; I can edit a JavaScript file, hit refresh and see what I’ve done immediately. No compiling, no special plugins. It’s the most accessible way of getting my work out there.”
5. SoundCloud
SoundCloud is a service for recording and sharing sounds, and is a popular way for artists and DJs to share mixes and expand their fan base. It’s also a great case study in pragmatic use of HTML5. While the desktop web app uses Flash to play audio, there’s an option to use HTML5 Audio in settings. This has also allowed SoundCloud to support the iPad, and they’verecently released an HTML5-based widget.
In addition to <audio> and the Audio API, they also use data-* attributes heavily, plus Canvas, SVG, and LocalStorage. Matas Petrikas says “We are especially proud of our use of Canvas in rendering of the widget waveform, the optimisations helped us to reduce the CPU load compared to Flash significantly”. Unfortunately there’s also some user agent sniffing (albeit for pragmatic reasons), and little use of new HTML5 elements or form attributes (although this is changing).
However, HTML5 Audio is not the default due to what Matas describes as “the poor state of HTML5 Media API implementation in web browsers”. To combat this Tomás Senart and Yves Van Goethem created the audio test suite “Are We Playing Yet?”. Matas says “The response has been overwhelming, we already have most of the browser makers participating, and we look optimisticly towards 2012!”
Additional problems in mobile devices include recording sound, the lack of widespread support for position:fixed for UI, and the lack of frequent (or any) mobile browser updates – Android WebKit is becoming the modern IE6. Because of this SoundCloud heavily promote their native apps to iOS and Android users. Matas says “we want to offer users the best experience possible, and currently the mobile browsers are still behind”. However, the future still holds promise: “we are big advocates of the upcoming device API (getUserMedia) and we hope in future to be able to capture sounds in the browser without Flash”.
These areas highlight some current problems in both specifications and browsers, but it’s certain both will continue to improve rapidly. For example Mobile Safari now supports background audio, GeoLocation and accelerometer. Even with the problems Matas says compared to Flash making the HTML5 version “was a pretty fast process. Debugging and optimising were also easier. This allows us to build and iterate faster, and in the end our users are happier too!”
6. The Wheels Of Steel
The Wheels Of Steel by Scott Schiller is two turntables and a mixer, live in the browser.
The demo uses HTML5 Audio where supported, with Flash as a fallback, via Scott’s JavaScript library SoundManager 2. It also uses some other fun stuff, including <input type="range"> for the crossfader and localStorage, plus a bunch of CSS3 for the impressive visual bling. Rather than go into detail, I recommend you read Scott’s excellent article The Wheels Of Steel: An Ode To Turntables (in HTML). I especially like this quote: “the page gracefully degrades and the core UI + content renders nicely even with JavaScript turned off. Blank or illegible pages shown to users without JS … reflects poorly on the site developers.”
Client-side web apps
7. Dabblet
Dabblet is marauding maker of awesome Lea Verou’s newest tool – a live CSS sandbox that saves as GitHub gists, and runs entirely client-side.
It uses a raft of HTML5 and related goodies, including CORS (cross-origin resource sharing), localStorage, the History API, the Selectors API, data-*,contenteditable, and inline SVG. Lea’s considering using the Drag & Drop API for resource embedding and the Offline API in the future, but says “the offline API is a huge pain in the arse”. She also tried using Web Workers for asynchronous syntax highlighting, but this made it seem slower. She’d also love to use the currently-being-specced UndoManager API once it is implemented, as “a big portion of dabblet’s code is devoted to recreating Undo/Redo”.
It also uses Lea’s controversial -prefix-free library to handle CSS vendor prefixes automatically. Lea’s considering a no-prefix-free option, or potentially adding something like LESS. While Eric Meyer has eloquently stated the case for vendor prefixes, Divya Manian,Henri Sivonen, and Lea have all written on how vendor prefixes – as currently used (copy, paste, forget) have problems. While not HTML5, it’s an interesting issue about a fundamental part of how we work, and the CSS Working Group would welcome input via www-style.
Because the target audience are web developers, Lea hasn’t worried about backward compatibility. “If it was for a less tech savvy audience where IE is a concern, I’d still use HTML5, but with proper polyfills and fallbacks in place.” On HTML5, Lea says “HTML5 means three things for us developers: speed, universality, and openness. Making cool things is now easier than ever.”
8. Font Dragr
font dragr by Ryan Seddon allows you to preview custom fonts in the browser by simply dragging a font file from your computer into font dragr, or choosing from a list. Even better, you can use the font dragr bookmarklet and change the fonts on any site, targeting each font using a CSS selector. This lets you preview and compare fonts for @font-face use quickly, leaving the coding until you’ve decided.
It uses new HTML5 elements, the Drag and Drop API, the History API, the contenteditableattribute, and localStorage. Support for Google Web Fonts is also in the works. Ryan says localStorage is used to “do an ajax request which will get the view html, replace it in the DOM and then cache that view html in localStorage. So it only needs to do a network request the first time around.” On HTML5, Ryan simply says “it is the future”.
SVG
While not part of the HTML5 spec, some amazing sites have also been making great use ofthis powerful vector drawing specification.
9. Slavery Footprint
Slavery Footprint is an interactive survey that answers the question “how many slaves work for you?” to raise consciousness about modern-day slavery.
It heavily uses JavaScript to lazy-load and animate content, along with new HTML5 elements, GeoLocation and SVG. While in a modern browser the results are compelling and highly effective, sadly the site is not built with best practices. The survey form is unusable without JavaScript, and the information about slavery (“What? Slaves work for me?”) is inaccessible text-as-image. Perhaps because it didn’t start “content first”, Slavery Footprint also initially had some teething troubles, both with hosting and providing support for old browsers – the client was the USA State Department, who were still using Internet Explorer 7. Despite the problems it’s been successful in interactively raising awareness of modern slavery.
10. Kern Type
Kern Type is a type kerning game by Mark MacKay that is strangely addictive. You try to move the letters in a word to correctly kern them, and are scored on how well you did. Each word is in a different font too.
In addition to SVG with the help of the JavaScript library Raphaël to draw the letterforms, it uses data-* attributes for font data (the initial positions and the x-height), and Raphaël’s drag-n-drop for interactivity.
Mark says “I didn’t plan supporting tablets, but when I was almost finished I fired up Kern Type on my iPad and I was pleasantly surprised: not only was it almost 100% functional, the animations were smooth and the drag and drop worked great. All I had to to was add a couple of lines of JavaScript to prevent the page from scrolling and that was it.” He ended up using Raphaël drag-and-drop because with HTML5’s “I would have had to build an interface between Raphaël and my custom made javascript. I would have used HTML5’s drag-and-drop if I needed to drop over targets, as that’s notoriously difficult.”
When you complete it, have a go at the sister game Shape Type, and stay tuned for Method of Action’s first course “Design for programmers”, of which they’re both a part of.
11. SVG Girl
SVG Girl is a demo site produced for the Internet Explorer 9 release. It showed off IE9’s SVG powers with a very Japanese flip-book type animation running at 10 SVG frames per second, with sound via the <audio> element and an intro <video>.
It was made by the core members of jsdo.it, a social coding community site for creating, sharing and forking JavaScript, HTML5 and CSS code. This is run by Kayac, who describe themselves as “the most playful company in Japan” (as their great `data-*` and SVG-powered team page demonstrates).
I’ve yet to see any Japanese schoolgirls experiencing such a transformation while using Windows Phone 7.5, but hey it’s Japan — anything is possible 
For another interesting Japanese example, have a look at The Shodo, a <canvas>-based traditional calligraphy web app, that stores stroke info as SVG paths.
Canvas
12. Peoplemovin
Peoplemovin is a personal project from Carlo Zapponi to show migration flows across the world, based around a flow diagram (inspired by Sankey diagrams). More than 215 million people, three per cent of the world population, live outside their countries of birth. Peoplemovin makes it easy to investigate migration by country, with intuitive visual representations explaining the statistics.
Carlo says “The foundation of the website is the canvas, all the interactions and visualisation happens in the space of the canvas that let me draw the connecting lines between the countries. I also used some CSS3 rules for rounded corners, shadows and glows and fonts.” In addition to the latest browsers it also works on smartphones and tablets. Carlo ended up making his own open-source toolkit called DataMovin to achieve this, which he plans to release at some stage (check the source in the meantime).
Describing HTML5, Carlo says “What’s great about HTML5 is that it is the perfect platform for creativity. You have a new crazy idea? Great! In a shorter time than ever before you can build anything into the browser without reinventing the wheel every time.”
13. Rally Interactive
Rally Interactive’s website contains a masterful example of creatively using canvas for interactivity. The triangular shapes react to hover and click in a way that until recently would have required a plugin like Flash.
As Wes Pearce says “We simply couldn’t have gotten the effect we wanted for our site without the HTML5 canvas. Support for the canvas in the latest browsers is shockingly uniform. We also put the new History API to good use, and were surprised at how quick it was to implement.”
14. Up and Down the Ladder of Abstraction
Up and Down the Ladder of Abstraction by Bret Victor is a great example of using interaction in support of text to really communicate ideas.
<canvas> examples are injected into the essay, allowing you to interactively learn about the point being made. I think this kind of thing is going to be a major part of future educational books, making ePUB 3 and HTML far superior to PDF, ePUB 2, and Kindle Format 8.
15. Sumon
Sumon is a simple addition game with great attention to detail. It’s been made by Ludei as a tech demo for their CAAT framework, which outputs to Canvas, WebGL and DOM/CSS.
As with Agent 008 Ball and Pirates Love Daisies from 2010, it’s a great example of the combination of canvas and audio plus talent – a fun game that runs right in your browser. It’s also available in the iTunes, Chrome and Android stores, plus as a Facebook game, all from the same codebase. That’s the kind of reach native apps just don’t have.
Iker Jamardo writes “JavaScript and HTML5 features are great game development platforms. The main disadvantage we found is poor performance in mobile device browsers.” While Ludei believes this will improve eventually, they’ve developed the Cocoon and CocoonJS frameworks to achieve native performance on mobiles. Iker concludes “we deeply believe JavaScript and HTML5 are great for game development and multiplatform deployment”.
WebGL
WebGL is again not part of the HTML5 spec – it’s a separately specified API that allows 3D graphics to be used in <canvas>. However, for crazy eye candy it’s hard to beat. Rather than go into details, let’s just see some examples:
16. HelloRacer
HelloRacer by HelloEnjoy, a sweet drivable F-1 race car.
17. WebGL Shader — Travelling wave fronts tech demo
The travelling wave fronts tech demo is a “fine-tuned 8bit reaction-diffusion system with added traveling wave fronts and subpixel decay”. Mesmerising.
18. ROME “3 Dreams of Black”
ROME “3 Dreams of Black” is an interactive music video by Chris Milk and friends, to music by Danger Mouse, Danielle Luppi and Norah Jones.
Don’t miss their tech demos and video about the technology behind the movie.
You can learn more about WebGL, and see more amazing examples, in Dev.Opera’s “An introduction to WebGL” (and “Porting 3D graphics to the web”) by Luz Caballero. Opera is also preparing a comprehensive list of WebGL tutorials, coming “very soon”.
The future / the present
There’s a lot of amazing stuff coming to the web stack too. Let’s look at just one example – the WebRTC (Real-time communication) specification (getUserMedia). This allows you to “exchange real-time, interactive media, including audio and video”, with a major use being video chat between browsers. Opera also has experimental support for getUserMedia in developer builds for both desktop and mobile.
19. Browser-based video chat
Ericsson Labs has been working on this for a while, and has a WebKit library for download(more info and tutorial).
20. Face detection/moustache demo
Opera also has experimental support for WebRTC, and the DeviceOrientation Eventspecification, in a custom build called Opera Labs Camera and Pages. Rich Tibbett wroteNative webcam support and orientation events on using both specs, and made a demo using WebRTC that performs face detection on live video. If that isn’t awesome enough, it also allows you to add a moustache. To live video. In the browser.
Bravo, interwebs. Bravo.
Conclusion
As you’ve no doubt noticed by now, despite grouping these websites by an HTML5 technology they use, they’re all using way more than just one. While not everything is ready for adoption, there’s a lot of goodness in the HTML5 specification (and other web stack specs like SVG and WebGL) that you can use right now. Keep up to date and find out more atHTML5 Doctor, the W3C’s Planet HTML5 and on Twitter with @HTML5.
The “HTML5” buzzword has been a double-edged sword, but it’s helped the bandwagon gain momentum and made an impression on management too. Hopefully with this pile of inspiration you’ll return to the first two sites in the article, go forth and make awesome!
[via .netmagazine and @designchapel]
Who do you want to be today? Realtime face substitution is awesome!
FaceTracker is a C/C++ API for real time generic non-rigid face alignment and tracking.
Goal:
Non-rigid face alignment and tracking is a common problem in computer vision. It is the front-end to many algorithms that require registration, for example face and expression recognition. However, those working on algorithms for these higher level tasks are often unfamiliar with the tools and peculiarities regarding non-rigid registration (i.e. pure machine learning scientists, psychologists, etc.). Even those directly working on face alignment and tracking often find implementing an algorithm from published work to be a daunting task, not least because baseline code against which performance claims can be assessed does not exist. As such, the goal ofFaceTracker is to provide source code and pre-trained models that can be used out-of-the-box, for the dual purpose of:
1. Promoting the advancement of higher level inference algorithms that require registration.
2. Providing baseline code to promote quantitative improvements in face registration.
Features:
• Real time: ranging from 20-30 fps (depending on processor, compiler and use of OpenMP)
• Generic: designed to work for most people under most conditions
• No training required: a pre-trained model is provided
• Detection based initialisation: no user intervention required
• Automatic failure detection: requires no user re-initialisation
• Camera or video input
Download:
FaceTracker is available for download (for research purposes only). The library includes the C/C++ API, example code for interfacing with the API, a pre-trained model and documentation. To download it, please send an email to Jason Saragih(Jason.saragih@csiro.au).
The Tracker:
The code requires OpenCV 2.0 and the provided model was trained using the MultiPIE database. The tracker is based on a modified version of the constrained local model described in:
J. Saragih, S. Lucey and J. Cohn, “Deformable Model Fitting by Regularized Landmark Mean-Shifts”, International Journal of Computer Vision (IJCV)
People Using FaceTracker:
Some people are using FaceTracker to do some really cool stuff:
• FaceOSC
• A music Video!
• Face Projection
• Being John Malkovich
• pkmFace
Videos:
Follow this link to see some examples of difficult YouTube videos that were processed using FaceTracker with the pre-trained model. There was absolutely no user intervention in any of the videos.
[Via FaceTracker]
The future of Flash
For a number of years Flash was the most in-demand skill within the digital design industry, but with the rapid growth of new platforms, which don’t need Flash to operate, we are seeing less need for it. Over the past year at Source we have only had around 11 or 12 full-time Flash designer roles, out of around 200 jobs in total. However, we are still receiving freelance bookings from clients for Flash banner designers and coders. These are mainly from production agencies, or agencies that are at the production stage of a project. More and more though, our clients are producing projects using HTML 5, which is starting to become the default. HTML allows you to be more dynamic with your designs and coding, whilst looking and working equally well on all platforms. FWA (Favourite Website Awards) is still showcasing some of the world’s best Flash projects which continue to inspire us all, however as we know Apple’s iPhone doesn’t support flash, and Apple are currently leading the way with how the future of design will be.
Interestingly projects which involve design for kiosks, digital escalator panels, interactive bus shelters and other touch screen applications still use Flash, as it works well with ActionScript, Papervision, Away3D and augmented reality solutions.Salaries for people with Flash are no higher or lower then other types of designers or developers. Flash designers and coders can expect the following salaries:
| Junior Designers/Flash Designers | £18k-£25k | £150pd- £200pd |
| Mid/w Designers/Flash Designers | £25k-£38k | £200pd- £250pd |
| Senior Designers/Flash Designers | £40k-£55k | £250pd- £325pd |
| Junior ActionScripters | £18k-£25k | £150pd- £180pd |
| Mid/w ActionScripters | £25k-£40k | £200pd- £250pd |
| Senior ActionScripters | £40k-£60k | £250pd- £400pd |
Does Flash remain a key skill worth training in? Read on for opinions from some of the industry’s thought-leaders:
“Flash is a flexible set of tools that offer easy multimedia capabilities and entry points at all levels of ability. In our prototyping we strive to use the best tool for a certain job, not just the tool that we know best so I’d say that Flash definitely has a future but it is not the only technology around. It has the advantage of being present in one form or another on many mobile devices and as such is a valuable skill to have but it needs to form part of a portfolio of skills – I would want to see it partnered it with javascript & HTML or Qt Quick & C++.”
Alistair Wharton – Design Technology Lead – Nokia
“Given that HTML5 is pretty damn good already – I would rather not be a flash developer when it gets up to HTML8”.
Will Cole – Creative Director – Maverick Media
“Flash is still used, but sparingly it seems. Gone are the days when agencies like ourselves would deliver flash site after flash site. There is so much you can do without flash now, and there’s a big emphasis on accessibility from most clients. However, it’s still a useful tool when delivering specialist products, and I would say its a skill that’s still needed, albeit less frequently – I mean someone out there still needs to know Flash right?”
Will Pyne – Owner – Holler London
“If you’re looking for a digital design career more focussed towards advertising flash is still a useful skill set to have as it’s still the standard application for online advertising production. But, if your focus is larger scale website design flash is definitely in demise because of increased web standards and brands looking to produce SEO friendly, accessible online experiences. Add to this the emergence of mobile and tablet devices, particularly the iPad which doesn’t support flash and you’ve got some pretty big reasons for flash moving out of favour.”
Anthony Oanes – Associate Creative Director – Lbi
“Flash is still one of the ‘tools of the trade’ for any online designer and being installed on 98% of internet connected browsers it is still a valid piece of software. At Disney we are trying to reduce the heavy reliance on Flash, finding alternatives to create a more efficient, optimal and accessible multiplatform user experience. Much of Flash’s simple interactive content can be replaced by an alternative code-base such as HTML5, but it still leads the way in regard to online casual gaming, video streaming and short-form animation where it will still remain the ‘go to’ piece of software for the foreseeable future.”
James Bruce – Head of Creative – Disney EMEA
“There is no doubt that the future of flash on mobile devices has been put into perspective with the recent Apple iPad announcement. But, Flash has always had a minor slice of the digital content pie – after all, flash driven sites only account for a fraction of online sites – and this share is likely to continue to shrink. Recent projects we delivered in a subset of HTML5 have demonstrated real potential for rich web experiences – some of which are arguably more accessible (no plugin required), possibly less processor intensive and platform independent. Ultimately, if Flash were to go extinct, as a creative I would miss the flexible and intuitiveness of its script and timeline based interface.”
Yann Caloghiris – Head of Film & Video – Navyblue
“10 years ago Flash was the creative saviour of digital creatives, they could finally make pretty, interesting and interactive applications. But the digital technology has moved on. However with the arrival of HTML 5 and the number of platforms that support HTML5 instead of flash, I certainly wouldn’t call Flash a generalist digital skill set anymore. I’m not only referring to Apple’s reluctance to support flash. The biggest emerging technologies like WebTV and Mobile won’t be using flash.
Flash has already become a niche product and it will continue to have a niche market for a few years to come e.g. in some types of PC based gaming.
It will soon become a speciality like Adobe Director: perfect if that’s your game but it won’t be an ongoing requirement for advertising and marketing agency creative staff. Last year I would’ve insisted that every digital designer have some flash experience e.g. for building banners. But in a year’s time this will no longer be a required skill set for digital creatives.”
Leroyson Figueira – Digital Creative Director – Haygarth
“Flash is essential to a huge amount of digital activity – and irrelevant to much more. As an animation tool, it’s not that sophisticated. It has issues with accessibility. It tempts designers into thinking they’re movie makers, forgetting the attention span of web users. But because it does what it does so well, it going to be around a while longer. We use flash in our work because it offers such a handy mid point between the back and front ends – between the data and the eyeball. It’s been around long enough to be just about the only guaranteed cross platform and browser language. It just works – and that counts for a lot. But the big question here is ‘What happens when Steve Jobs dies?’ His feud with Adobe and refusal to include flash for the iPhone and iPad has started all this anxiety. As well as drive the demand for Android phones that have no such inhibitions.”
Matthew Maxwell – Digital Creative Director – Draft/FCB
“For the next few years there won’t be a technology with the penetration and features of Flash. As time goes on, simple Flash applications, banners and games will be built using HTML5 and Flash will be used to create mainly complex and rich applications. There is some amazing work in HTML5 largely created by Flash Developers, such as Mr Doob and Seb Lee-Delisle but HTML5 is still much less developed compared to Flash, especially from a programmer’s perspective.
Learning Flash Development is a great introduction to programming plus it’s very easy for a Flash Developer to learn other similar languages such as Javascript for HTML5, Objective C for iOS or Java for Android. Flash Development will be a valuable skill for the next few years and maybe beyond, but any good developer is not tied to one language. At Kitcatt Nohr Digitas in London and Digitas in New York, our Flash teams are starting to work in HTML5 and iOS as the skill sets are so similar.
I would say anyone getting into Flash Development now should also be coding Javascript and looking at the other new technologies that excite them like Open Frameworks or Arduino. No one knows what technologies we will be using in 3 years time but the skills that you learn as a Flash Developer equip you well to hop technologies as things evolve.” Alistair Colling – Technical Manager – Kitcatt Nohr Digitas
[Via wearesource.co.uk]
Is handmade stuff finding it’s way back to advertising?
The films in 3D are very real. With today’s technology, anything is possible. But there is a undeniable quality and a charm to handmade things. Here is a fine selection of handmade advertising I hope to see more of in near future:
Brazilian footwear company Melissa has turned the side of a building in São Paulo into a mega-huge movie screen for an animation that uses Post-its like analog pixels. Twenty-five animators worked for a steady five months, stamping sherbet-colored notes on the U-shaped foyer of the Galeria Melissa to generate an ever-rotating cast of images — from shadow boxes to a charming, psychedelic elephant — captured on time-lapse video above. By project’s end, the animators had blown through a whopping 350,000 Post-Its.
Less than a year after making the world’s smallest animation, Nokia just ticked off that large, lurking item on the to-do list: conjuring the world’s largest stop motion animation.
The new film, Gulp, tells the simple story of a fisherman who gets swallowed by a larger predator. It was shot entirely with the Nokia N8 phone.
Here is some more stop-motion awesomeness to inspire you:
Porsche Puts Names of 1 Million Facebook Fans on a 911
As part of its “Thank You” campaign, Porsche plastered the names of one million of its closest Facebook friends onto a hot rod.
We all love a good timelapse video around here, but this one’s subtler than most. It shows a crew of Porsche folks painstakingly detailing a brand new 911 GT3 R Hybrid… but with what? The video isn’t high-resolution enough to read them, but all those teeny gray squiggles adorning the hood, tail, and sides of the car? They’re names — one million names, to be exact, of Porsche’s Facebook fans.
Want to see if your name is one of the lucky ones to make onto this beauty? Click here to launch Porsche’s slick promo site, where you can type your name into the search box. Or you can peer at this closeup and try it the old fashioned way. (Where’s that CSI-style “enhance!” command when you need it?)
Anyway, Facebook, social marketing, yada yada yada… the car is still the thing to marvel at here. Not only does this sucker sport Porsche’s legendary 911 style, it’s also a hybrid. Which means it hauls ass on the racetrack and gets (relatively) great gas mileage! Put that on your status update.
[Via Co.Design]
Interactive Window Displays
The incredibly innovative Hyper Island WeSC window display may be simple in execution, but it will surely make a huge impact on passersby. Designed by Beatriz Areilza, Gustaf Engström, Lucas Lima and Marcus Wallander, the display features an infrared transmitter that tracks pedestrians to project a captivating display.
[ Via Trend Hunter]
12