Scribble Blog

Beautiful HTML5

December 7, 2011

Beautiful HTML5

HTML5 is the new emerging web standard, the technology that brings internet content to the screen.  This is the code that acts as a toolset for developers to design and create web content and applications.  The new standard will address the way the internet has evolved in recent years, giving developers greater control of media and graphics content and a suite of tools to facilitate building services and applications.  HTML5 also makes it easier for developers to work cross-platform, creating content that will work on mobile platforms such as tablets and smartphones as well as on PCs.

It will be some years before HTML5 is completed and fully deployed, but many developers are already starting to use the technology in exciting ways.  We at Scribble are excited about the possibilities offered by HTML5 and potential applications in the future.  So we’ll be keeping an eye on developments and making regular posts to talk about things that get us excited about the future of HTML5.

One of the main views of HTML5 is as a replacement for Flash.  While Flash is a popular choice for interactive and media content on the web, it’s closed nature and search engine unfriendliness has had developers yearning for an alternative for some years.  Apple’s refusal to incorporate Flash compatibility into iOS devices has also added significant pressure for developers to move away from Flash. HTML5 offers media playback, animation, 3d graphics and many more tools for rich-media content.

In fact, HTML5 offers many more tools outside of rich media content and is much much more than an alternative to Flash, but we thought this would be a good place to start.  We’ve picked out a number of beautiful examples of what developers can do using HTML5, and they paint a pretty picture of what we can expect from HTML5 in our web browsers and on our mobile devices in the future.

Click the images to view these beautiful examples of HTML5 in action.  A recently updated version of Chrome is recommended to view these.  Many of these are found on ChromeExperiments.com a site set up by google to showcase the exciting possibilities of HTML5.

WebGL Terrain

HTML 5 Terrain

Beautiful landscape procedurally drawn in real time.

Endless Forest

HTML5 forest

An endless generated 3D spooky forest.

3 Dreams of Black

HTML5 3 Dreams of Black

This is what you get when you put HTML5 tools in the hands of amazing artists and animators.  A jaw-dropping journey through a 3D world exploding with life!

8-Bit Colour Cycling

HTML5 8bit Canvas Colour Cycling

This demo replicates an old-school effect used in the days of 8-bit colour palettes.  This involves ‘colour-cycling’ – automatically shifting specific sets of colours in the palette - to create animation effects.  At the time, this was used as an efficient way to bring movement to images without actually animating multiple frames.  Enjoy this stunningly beautiful set of images steeped in gaming nostalgia!

Arcade Fire – The Wilderness Downtown, Interactive film by Chris Milk

HTML5 arcadefire

A superb example of innovative and out-of-the-box thinking. Difficult to sum up in words…  as you go through the experience, the browser opens and closes windows, showing you pictures of your home town fed in from Google Maps and depicting flocks of birds that interact with the narrative.  In addition to the beautiful and impressive motion graphics, the experience is thoughtfully designed to instill nostalgia and make you engage with the music.

Read more...

Flash on the beach, or swimming with the fishes?

September 21, 2011

Last week, Brighton hosted ‘Flash on the Beach’, a conference for developers and practitioners with speakers presenting on the many applications of Adobe Flash, from art installations, to face tracking and augmented reality.  Should these people be worried that their chosen platform may be dying out?  Some Flash developers may be concerned, and many are jumping ship to HTML5 already, but the platform is far from finished.

The Internet is awash with speculation about Flash vs HTML5, and which format will dominate in the future.  The debate revolves around the issue of how rich and interactive content will be provided for web and mobile platforms.  The real battle here is not fought by the developers, who would simply choose the best available technology, but by the heavyweight brands who have the most to gain from dominance: Apple, Adobe, Google and Microsoft.

Flash vs HTML5 Pong

Flash video currently accounts for around 75% of all video on the web.  The main perceived threats to Flash come from the emergence of HTML5, and from Apple’s opposition to Flash.  HTML5 will allow rich media content such as video and motion graphics to be displayed in web-browsers without the need for additional plugins, such as Flash.  Apple’s decision to block Flash in the iPhone and iPad range, then, was a massive blow to Adobe.  The decision to prevent iOS users from accessing Flash content was initially claimed to because of the performance and security weaknesses of the Flash platform.  Increasingly, however, the opinion has grown that this move was simply to prevent iOS users from accessing the plethora of free video and interactive content available on the net in Flash form, forcing them instead to get the majority of rich content through Apple’s own online store, iTunes.  Whatever the motivation, Apple has influenced the push towards using HTML5 as a standard for rich content on the web and mobile devices.

Flash is much more than a media player however; it is a powerful development tool.  Flash remains a popular choice because of the ease of combining animation and graphics with interactivity, using Flash’s own programming language, ActionScript.  This allows designers to take a very visual approach to the development of games and interactive applications, further aided by the integration with other Adobe file formats such as Illustrator and Photoshop, making it a popular choice for developers of e-Learning applications and artwork-heavy games, such as ‘point-and-click’ adventures like Machinarium.

Adobe continue to try and keep Flash in the market by making it compatible with as many platforms as possible; the latest version, Flash CS5.5 can output projects as Mac ‘.app’ files, Windows Projector ‘.exe’ and even iOS compatible devices, though it remains to be seen to what extent Apple will tolerate this and allow Flash-created apps into the app store.  That said, Adobe’s resilience seems to be paying off, and Flash-developed apps are emerging in both the Mac app store and iTunes store for iPhone and iPad, such as Pixel City Skater and the iPad chart-topping Machinarium.

With Adobe so keen to keep Flash relevant, it seems unlikely that Flash as a development tool will go without a fight.  HTML5 may already be offering some of the rich and interactive media functionality that Flash provides, but it will be some time before development tools can match the workflow of Flash, which has been around as a development platform for over a decade now.  As a more open standard, HTML5 is already beginning to replace Flash as a video standard on the web, and will likely become the standard of choice for ‘lite’ interactive and animated elements on webpages.  HTML5 is unlikely to tempt developers of more serious web-based projects such as games using 3D, since it is not suited to handing large amounts of assets and complex game ‘engines’; here, Flash will retain ground alongside other development platforms such as Unity.  Apple’s approach to content on iOS devices is unlikely to change, however; they will undoubtedly seek to gain tight control over content regardless of the dominant standards in the market.

Flash sleeps with the fishes

As the standards war rages on above, enthusiastic practitioners such as those seen at Flash On The Beach are testament to the fact that Flash will not be swimming with the fishes any time soon.

Read more...