Posts Tagged: HTML5


14
Sep 11

A Splash of the Future

“It’s about ideas. Fuck, technique, I can get a monkey to do
this shit for me.”
James Victore

There’s been much talk of the death of Flash in the last 2 years. Pundits have been making sweeping, sensationalist statements from both sides of the aisle – fuelled by emotion and agendas – that has made the majority of the discussion read like a particularly partisan tabloid.

I’m not going to rehash those tired old arguments here, but spending the last 3 days at the inimitable Flash on the Beach conference in Brighton, it’s impossible not to consider where it’s all going.

One indicator is that this is very probably the last Flash on the Beach. As you’d expect, the theme and subject matter of a lot of the talks this year reflected the new digital landscape and focussed on HTML5, JavaScript and mobile devices. It was even pointed out on Twitter that in session titles, “HTML” beat “Flash” by 3:2. Not exactly scientific, but even the organiser admitted that next year will probably see a rebrand that I suspect won’t feature the word “Flash”.

6 years ago, John Davey launched FotB as a conference with a difference. Rather than just technical sessions by designers and developers from the Flash community, there’s always been a mix of artists and inspirational figures that are often at best tangentially associated with Adobe Flash, or even web technologies at all. This year was no exception, with the likes of Jon Burgerman, James Victore, Bradley Munkowitz and Cyriak Harris providing inspiration through their passion and creativity.

But while the sessions may have had more JavaScript and less Actionscript than ever before, there was still plenty of amazing stuff being done in Flash by the likes of Eugene Zapetyakin, David Lenaerts and one of the most impressive Elevator Pitch sessions I’ve seen yet. Sure it’s cool that you can now do in HTML5 what only Flash could do a few years ago, but for me it’s always been more impressive seeing something that could never have been done before.

For years the Flash community has driven the growth of the web – pushing the boundaries of what can be done online, creating a template for browser developers to catch up with. When it was first created Flash (or Future Splash as it was originally titled) was simply for animation and gradually interaction and increasingly sophisticated code was introduced. By its very nature, it has grown out of a hybrid of design and code, the visual and the interactive, which has always attracted programmers with a creative streak and designers with a hacker mentality.

And that’s why I’m not worried about the future of the Flash community. Obviously, the type of inquisitive and innovative minds that were drawn to Flash when it was the only game in town, will experiment with new tools like Processing, HTML5, mobile development etc. Many may never use Flash again. We may not all use the same software anymore but it’s the same passion that drives us all, and ultimately is what unites a community.

Davey may need to come up with a new name for next year, but for my money, he’s already nailed it with the new conference he launched in New York this year, “Geeky by Nature”. It’s not the tool we use that defines our work; it’s the passion that drives the craftsman to create in the first place. And that’s something that’s just in our nature.

Follow Shane on Twitter: @shane_casey

11
Mar 11

Show & Tell #7: HTML5 Games & More

This is a continuation of Show & Tell #7′s round up. Check part one here.

HTML5 Games

So where are the HTML5 games? I thought the “Flash-killer” had arrived?

Actually, there have been some cool HTML5 based games knocking around recently. These are mostly proof of concept games though, and nowhere near the level of Zombie Tycoon etc. Come back in 10 years for that.

Here are a couple of nice ones though that are worth a look…

Pirates Love Daisies

Actionscript legend Grant Skinner was commissioned to create this one for Microsoft’s IE9 Beauty of the Web campaign. It’s a classic tower-defense game but some nice touches in there. Most interesting is Skinner’s EaselJS Javascript library that makes the HTML5 transition easier for people from a Flash background.

canvas-riderCanvas Rider

An update to the classic Line Rider for the HTML5 era. very nicely done.

008 Ball Agent 008 Ball

Really like this one. The game premise is bollocks but the attention to detail and the implementation of physics in a JS game is impressive.

One that’s been grabbing headlines this week is URL Hunter. This game is unique in that the whole game takes place in the address bar of the browser. Obviously, it has much more appropriate applications but this is a pretty inventive demo of how HTML5 exposes the browser history via an API. Access to this API should help as we see more complex sites and web-apps that require stateful behaviour without a new page request. 

Hadouken!

 

Wallaby

Another headline grabber from Adobe this week was the launch of codename ‘Wallaby‘. In a nutshell, Wallaby takes a Flash file (.fla) and converts it to a HTML5 version. It’s not quite a magic bullet yet as there are some pretty major features that aren’t supported yet but it shows some definite promise. I’ll hopefully do some experiments myself and report back.

 

Motion Graphics Design Lecture

We also had a chat about the Motion Graphics Design lecture that I’ve covered in detail already here, check it out.

Follow Shane on Twitter: @shane_casey

11
Mar 11

Show & Tell #7: Mission to Molehill

i can has hardware accelerashun?Here’s a run-down of what we covered last night. It’s link heavy so you’ll find lots more info if you go exploring a bit more. If it doesn’t make sense shout out in the comments and I’ll catch you up on anything you missed.

 

Molehill

This changes everything. Again.

This week Adobe released their pre-beta (they call it an ‘Incubator’) release of what will eventually be Flash Player 11. Codenamed ‘Molehill’ it caused massive excitement at Adobe Max (see previous Lab post here) and it’s making waves all over again because now we can play with it ourselves. So if you’re feeling adventurous (this is pre-beta software remember, I’m taking no responsibility if your machine melts down), download the Incubator Flash player and join in the fun.

If you’ve already got Flash Player 10.2, you should already be seeing performance boosts on video sites such as YouTube and BrightCove thanks to the new StageVideo API. StageVideo hands off the processing of video to the GPU so there’s less strain on the CPU. Get it? If not, trust me on this, utilising hardware acceleration like this dramatically improves performance. PixelBender was a start, and 10.2 continues this approach.

Molehill is taking the focus on improving performance on to the next logical step, 3D. You can see the performance in this video with some pretty hardcore environment mapping and interactive reflective surfaces.

If you’re playing along at home, you can try out the rippling water and the reflective figure yourself.

One of the areas that I’m expecting to see some really exciting innovation is in web-based gaming. The Max Racer demo that I featured in the previous post looks really incredible and I love this one… Zombie Tycoon.

3D gaming in the browser has come on loads in recent years, the main players being Unity3D and Shockwave (and possibly Virtools) but they’ve all struggled to gain widespread penetration. Others like Quake Live have developed their own bespoke browser plug-ins that have some pretty impressive performance but have stubbornly remained stuck in their niche. Flash has lagged behind with 3D performance but Molehill has changed all that. Combine that with Flash’s 99% penetration and super-fast upgrade adoption and you’ve got a perfect storm for game developers.

If you fancy playing with some more demos, check out Lee Brimelow’s collection of links to lots more cool Molehill demos. Hours of fun!

This is a part one of Show & Tell #7′s round up. Check part two here.

Follow Shane on Twitter: @shane_casey

24
Nov 10

Show & Tell #5: The Final Frontier

So much to cover this week… we started with Marine’s animation presentation and here’s the rest of the news…


Google Vs Facebook… again

As Russell pointed out, we spend a huge amount of time at Show & Tell talking about Facebook. The truth is though, with a user-base of 500 million and some of the most aggressively pursued ambitions in the sector, it’s impossible to ignore the moves they make.

In a lot of ways, Facebook is shaping up to be the new Google. Recent statistics have shown people are spending more time accessing the Internet through Facebook than ever before and, as ever, the marketing spend follows the crowd. For advertisers, targeted marketing is where the smart money is and Google and Facebook are natural competitors in this space. Google CEO, Eric Schmidt, put it well when he said “We know where you are. We know where you’ve been. We can more or less know what you’re thinking about.”. Google has unparalleled information in profiling our behaviour online, but with Facebook becoming more and more people’s portal to the wider web they’re building valuable data to add to their existing knowledge of the Social Graph.

Last week Google announced they were cutting off Facebook’s ability to import Gmail contacts, calling Facebook’s system a one-way street of data – Facebook encourage users to pull contact lists from all the major email providers to find your contacts, yet they don’t allow you to do the reverse and export a list of your Facebook contacts. And Google have a valid point about Facebook’s hypocrisy; we’ve seen the exact same move when Facebook shut down Twitter’s ability to find contacts through your Facebook profile. Not only that, they do allow certain partners to access this data – just not their users.

Facebook messaging

All of this was precursor to Facebook’s big announcement at … that they’re rolling out @facebook.com addresses to their users. However, this isn’t just email – the new Facebook messaging combines email, IM & SMS communication into one conversation. The idea is that we shouldn’t have to try to figure out what communication method to use when there are so many available. Send a message through Facebook and the recipient can set their preferred mode and your message gets automatically routed to mobile phone or inbox for you.

Sound good to you? Me neither. This really feels to me like Facebook are solving a problem that doesn’t exist – except for them. More data = better advertising revenue for Facebook and they know that any communication out of their ecosystem is lost to them.

The blogosphere has been full of the same ‘Gmail killer’ narrative that fits so conveniently with all of the recent clashes between Google & Facebook. Gmail is the most rapidly growing email services, mainly because it’s excellent. Google were the first to set virtually unlimited storage limits and threaded email conversations have spread from Gmail to other email systems the way tabs did to browsers. My problem with the notion that Facebook mail will damage Gmail is that they’re different user-bases – the average Gmail user is the more tech-savvy email user while Facebook’s demographic trends toward students, teens and “soccer moms”. Facebook does infringe on Google’s data monopoly but realistically I expect to see more of an impact on Hotmail and Yahoo!’s numbers than Gmail’s.

It remains to be seen whether Facebook can attract people to their system as their primary email provider but I’d predict the real market is the under-20s. If you haven’t left school or university yet, odds are that most of your communication will fit quite easily to the channels of your existing social graph through Facebook. But the real obstacle is the corporate perception of Facebook as a time-waster, not a productivity tool. Huge numbers of workplaces block Facebook and realistically that will make an @facebook.com email address unworkable for millions of people.

Personally, it’ll be a cold day in hell before I’d have any sensitive information dependent on Facebook. How long will it be until Zuckerberg decides that email privacy is something only old people and squares worry about and exposes everyone’s inboxes to 3rd-party marketing?

iAds

Another regular topic for us is Apple’s iOS platform. This week we had a look at the Apple’s iAds system that allows full-screen, interactive, HTML5 ads right inside an app.

Launched with iOS4, the iAd platform is Apple’s first foray into the advertising market and yet another front in their ongoing war with Google (spotting a trend?). Check out this video to see what they can do…

Essentially you can build an app inside an app. iAds give huge scope to advertisers to do create interesting engaging content, capture data, play video and more, without having to kick the user out of the app to the browser.

So, where’s the catch? Well, first off there’s the 60:40 split with Apple. That’s right, 40% of all advertising revenue through their platform goes to Apple and the remaining 60% to the app developer. And as ever, Apple retain final control over the ads served on their platform and that’s ruffled a few feathers.

Last month Adidas cancelled their $10m campaign, with sources quoted as saying “Apple CEO Steve Jobs was being too much of a control freak.” Earlier in the year, Chanel also pulled a similar sized campaign from the network for similar reasons. Apple claim to have signed up over half of the top 25 of the top advertisers but it remains to be seen whether this the Adidases and Chanels they lose are worth losing to maintain that high-quality ‘Apple experience’.

#IAmSpartacus

“Crap! Robin Hood airport is closed. You’ve got a week and a bit to get your shit together otherwise I’m blowing the airport sky high!!”

That was the tweet that (five days later by the way) was picked up by the authorities and led to the eventual arrest and trial of Paul Chambers in what’s become known as the ‘twitter joke trial’. The judge however, didn’t see the funny side and viewing it as “clearly menacing” has resulted in Chambers losing his job, a criminal conviction and fines and legal costs of over £3,000.

The twitterverse, predictably, has erupted in outrage over the ruling. 1,000s have retweeted and made their own similarly ridiculous threats using the hash-tag #IAmSpartacus in Kubrickian solidarity. Stephen Fry has offered to pay Chambers’ fine and numerous fund-raising efforts.

On a similar note, a Chinese woman who retweeted a satirical call to attack the Japanese Pavilion at the Shanghai Expo was summarily snatched up by the Chinese authorities. She’s been sentenced to a year of ‘Re-education Through Labour’ by the Chinese authorities, which I’m sure is every bit as scary as it sounds. As if being sentenced to a year’s hard-labour without trial wasn’t bad enough, she was arrested on what was supposed to be her wedding day and no-one knew what had happened to her until this week. Let’s see how many tweets this story gets.

Surrendering control

And finally, we watched this TED talk about Mr Splashy Pants the whale.

It’s a great story about the importance of realising you can’t control the Internet. The web is by its very nature distributed, anarchic and organic. Putting your message out online requires a certain amount of faith that your message will survive, no matter what social networks do with it. This is a scary prospect to any brand but it’s a core part of any viral success.

Follow Shane on Twitter: @shane_casey

26
Oct 10

Takin’ it to the MAX

Short of a couple of sneak peeks, the Adobe keynote at this year’s Flash on the Beach really didn’t give much away… they save the good stuff for MAX. Yesterday, they certainly delivered on that.

One recurring theme though, throughout the Flash on the Beach, was that no matter what happens with HTML5, Flash will always be ahead of the curve.

HTML5/CSS3 may be moving in as heir apparent to take over basic video content delivery, prettier fonts, basic animation etc but Flash has always been doing things that couldn’t be done without the use of a plug-in. In many ways, it’s responsible for pushing the boundaries of what people expect from the web and this week they’ve been pushing that even further.

Anyway, back to the cool new stuff…

Real 3D in Flash

Check this out.

Introducing the new Molehill 3D API. Molehill means full-textured 3D models, made of hundreds of thousands of triangles rendered on the fly in Flash with hardware DirectX & OpenGL 3D acceleration. And these capabilities are available to use with existing 3D libraries like Away3D and Alternativa3D.

Not only that, this will be available in the browser too, not just through Air on the desktop. Awesome.

Air 2.5 – Coming to a screen near you

Also revealed at MAX was the new release of the Air run-time. Air 2.5 is really mobile focused, with support for Android 2.2, Windows Phone 7 and BlackBerry Tablet OS, – and obviously, it’s running on Windows, OSX and Linux – but the new version is also compatible with set-top boxes and works with Google TV.

That’s right, Flash on your TV and the results look pretty impressive so far. Adobe’s aiming to have Flash/Air on every screen and they’ve made lots of enhancements to APIs to help account for the lower-processing power of mobile devices and set-top boxes.

The desktop run-time has also moved on with greater support for CSS in HTML-based Air apps. You can use TypeKit now and newer CSS features like drop-shadow and @font-face.

For further reading, you can check out all the details are in the Air 2.5 release notes.

So, where’s it all going?

All of these are really positive steps for Adobe, in my opinion. They may have been late to the party on mobile but everything we’re seeing here is right on the money. A lot of people have been really quick to write off Adobe but all of this is adding up to:

  • a solid offering on mobile/tablet/set-top platforms;
  • packaging of ActionScript based apps for iOS devices;
  • increased support and integration with HTML5/CSS3;
  • hardware acceleration cross-platform;
  • and still more features that you just can’t get anywhere else.

Even InDesign is pulling its weight in digital with the Digital Publishing Suite! (Mashable has a good overview here)

I have to say, I’m impressed with what’s coming out of Adobe at the moment. Innovative solutions, in all the right areas. Long may it last.

Postscript: From the Bleeding Edge

Also, you’ve gotta check this out. Adobe have been working on a visual prototyping tool for HTML5/CSS/JavaScript powered animations. Codenamed “Edge” it looks pretty damn handy and Adobe was always the logical place that this kind of a solution would come from. Watch the video from the Adobe DevNet anyway and let me know what you think.

Follow Shane on Twitter:
@shane_casey


19
Sep 10

IE and HTML5 together at last?

With Internet Explorer 9’s release fast approaching on the horizon, web developers have been anticipating the new technologies / languages (HTML5, CSS3) they can start to implement for everyday use. So the release of IE9 beta last week gave us all a sneak peek into the pros and cons of the new ‘Big blue E’. The big selling point for me was IE9’s increased compliance & compatibility with HTML5 and other more modern web standards.

This HTML5 selling point is illustrated by: Never Mind the Bullets an example of an interactive ‘comic strip’ style narrative (A HTML5 parallax powered story). The HTML features it includes are:

Where we're going... we don't need roads!

• Font face loading
• SVG background
• Header & Section layout
• JavaScript acceleration
• CSS3 Multi-background
• Editable content


Another example of Microsoft pushing the new functionality of IE9 can be seen here: http://www.beautyoftheweb.com/

IE9′s adoption of newer technologies such as HTML5  makes it look like it is trying to catch up and even overtake a lot of the other rival browsers such as Firefox and Safari. However, even though IE9 is finally embracing ‘aspects’ of HTML5 it still needs to include more features in order to keep up with rival browsers, as you can see here: http://html5readiness.com/

However, Microsoft’s approach to integrating HTML5 with IE is worth mentioning. Whereas established, approved, stable HTML5 features such as video, audio and canvas have been fully adopted by IE9, Microsoft are less keen to include newer features such as geolocation and animations.

But, the signs are good! More compliance than ever before, improved performance and a cleaner look makes IE9′s release in 2011 something to look forward to rather than fear.


8
Sep 10

Show & Tell #2: The Return

Seriously, braces are cool now.

Seriously, braces are cool now.

Show & Tell number 2 last night and once again there was lots to talk about. Things move fast out here on the bleeding edge.

Here’s a quick recap of the main talking points…

The Wilderness Downtown

First off was a more detailed look at Arcade Fire’s HTML5 experiment that’s sweeping the web like wildfire: The Wilderness Downtown. Rob’s already discussed it here but we had another look at all of the cool features that are going on under the hood.

Very cool stuff and an impressive demonstration of just some of the things we can expect from HTML5. It’s particularly interesting too in how the associated indie cool of Arcade Fire has managed to punch through to people not even remotely in the technology behind it and engage them.

Typekit

Next up, and following on from the HTML5 discussion, we had a look at Typekit. Typekit, in a nutshell, is an easy, cheap and reliable way of using any of a huge selection of fonts in the browser in a semantically correct, machine-readable, cross-browser compatible way. Whew!

Adobe have recently joined the list of type foundries already serving their fonts through Typekit and the addition of popular Adobe fonts such as Myriad Pro, Minion, Garamond Pro and more is big news for the future of web typography. We’re already using Typekit on the game we’re about to go live with for Microsoft (watch this space…) and on other projects currently in development. So far, it’s been a treat to work with and it’d be fair to say this will be an increasingly frequently used tool for us.

Hack is Wack

Also in the news this week was Symantec’s Hack is Wack Asking users to upload their videos on the topic of cyber-crime may as well be a gilt-edged invitation for some Rick-rolling. Et voilá!

It’s all fixed now but it does pay to be wary when trying to harness the wild beast that is user-generated content.

:)


Mappiness

Nick’s app du jour is a nice little experiment from LSE that helps chart where and when in your day you’re at your happiest. Over time this builds a picture of your moods and also feeds into open-data for others to use in their own mash-ups.

Not an obvious fit for economists you might think, but maybe focusing on quality of life, rather than just material wealth, will help increase our Gross National Happiness.

Google’s balls

Google decided to mix it up a little that day too with some fancy-pants Javascript to turn their logo into an interactive, mouse-avoiding animation. Check it out in action here.

A load of balls?

Opinion seems pretty divided on what the point was… celebrating their birthday, showing you if your browser is out-of-date, a subtle dig at Flash or just those crazy Googlers being wacky.

Next one in a couple of weeks so let us know if you see anything cool and noteworthy.


6
Sep 10

HTML5 – out of the wilderness and into the fire | Cross Post

Aesthetically and technologically spellbinding, The Wilderness Downtown is an interactive visualisation of Arcade Fire’s new single, We Used to Wait.

Personally, I couldn’t be more delighted the wait is over. This bleeding edge mash-up of HTML5, Google Maps and music gives wider audiences a glimpse of just what is possible using the latest web technologies.

Now let’s not split hairs here, yes it does take a little while to load and it only fully works in Google Chrome and Safari. But as this is one of the first attempts at mainstream promotion using advanced technologies specific to HTML5, I think we can forgive them.

For those of us who have been keeping a close eye on the advancements and inclusions of HTML5, The Wilderness Downtown is a welcome demonstration of the possibilities opened up by this emerging web standard. The audio, video and canvas tags are synchronised brilliantly. The HTML5 Canvas 3D engine renders flocks of birds that react to the music, and the new HTML5 audio tag manages the track and keeps record of key points to synchronise both canvas effects and HTML5 video windows. This, combined with the Google Maps API used for generating different street view perspectives, creates a truly immersive and memorable user experience.

Arcade Fire are not exactly new to using the latest web technologies for self-promotion, on August 3rd 2010, the band teamed up with YouTube to put on a live-streamed show at Madison Square Garden, the stream was watch by 3.7 million users and included loads of cutting-edge interactive features including ‘Choose your Cam’ and fan-provided photos. In support of this, Amazon advertised the band’s album The Suburbs at the discounted price of $3.99 during the week of release. A week later, it held the number one spot on Billboard’s album chart.

From a marketing perspective, are these bleeding-edge technologies a good way to draw attention? Clearly, it’s an effective tactic to attract word-of-mouth promotion. And even though HTML5 is not yet universally supported by all browsers, the chatter around The Wilderness Downtown is largely pro-HTML5 rather than “Why isn’t this working in IE???”


30
Jul 10

HTML5 – And why we should all care

I stumbled over this rather interesting (if not slightly busy) HTML5 infographic and it got me thinking about where HTML5 currently stands for us developers.

HTML5 Infographic

Firstly as a developer, yes, there are HTML5 features that you can use today, but it would be wrong to say than you can use all of them. As the HTML5 info-graphic above shows there are features of HTML5 that are compatible among all browsers (e.g. Cross-document messaging & WYSIWYG editable elements) however most features work in some browsers but not others.

It will be no surprise to many of you that older versions of IE (8 and older) only support 26% of HTML5 features and is the main reason why HTML5 development isn’t more prominent now (although IE9 will be far more accommodating). However, I don’t think this should put us off altogether, new HTML5 features are generally designed in such a way that they degrade gracefully in legacy browsers. For example, new HTML5 controls such as video allow you to fall back on object or embed in browsers that don’t support video.

Full browser support for HTML5 will take a while, so I can’t realistically see myself using HTML5 consistently anytime soon. However, this will not stop me using it where I can (compatible & degradable features) in order to future-proof my work.


26
Jul 10

Emergence & The Semantic Web

Following on from the presentation I gave a while back, we’ve recorded the audio and posted it online on Vimeo. This should make a bit more sense than the presentation on its own.

Continue reading →


Blog WebMastered by All in One Webmaster.