As a Flash developer, getting yourself into the realm of HTML5 development is an extremely logical step for many reasons. Building applications with HTML5 allows you to easily reach users on desktop or mobile with rich integrated and interactive content without the need for plugins. One of the most beneficial aspects of HTML5 development is the accessibility to the development environment. Since HTML5 requires no special compiler or software for writing code, developers are free to choose their favorite setup for writing and testing their projects. Applications can be easily run and tested within any compliant web browser and tested locally without the need of a web server. This makes HTML5 one of the most accessible and easy to use technologies on the Web.
Unlike Flash applications, any device with a modern web browser can interact with HTML5 web content. So, with the help of CSS for dynamic resizing of viewable content, your HTML5 applications can be used without the need of application installation or dependencies on desktop or mobile platforms. Developers can also use technologies such as Phone Gap (http://phonegap.com/) or Appcelerator (http://www.appcelerator.com/) to easily convert their existing HTML5 web content to packaged mobile applications for market in all modern mobile operating systems. Packaged applications can be integrated and sold using common mobile application services such as Apple's App Store (http://store.apple.com) and Google Play (https://play.google.com). On top of that, Microsoft Windows 8 desktop application development now supports a whole suite of different programming languages, one of them being HTML5 (http://msdn.microsoft.com/en-us/library/windows/apps/br211386.aspx). With the ability to package HTML5 content into installable applications, developers can now begin to easily monetize their work by sale on the various application distribution outlets.
As just mentioned, HTML5 hosts a suite of new and exciting features, many of which will be covered in the following chapters of this book. However, to allow you to better understand why HTML5 is so exciting and important for Flash developers and the web development community, here is a more detailed list of some of those features.
Flash developers can really flex their programming abilities within the new canvas element and 2D drawing API. Just like the drawing API within ActionScript 3, the canvas HTML5 element allows developers to create dynamic graphics during runtime, all from within JavaScript. Flash game developers moving to HTML5 usually find their home within the utilization of the canvas element as it is the closest representation of traditional Flash development when using HTML5.
Web developers no longer require to develop their media playback elements with platforms such as Flash or Quicktime. Audio and video can now be easily integrated into the HTML document using audio and video tags. Not only does this allow for easier and cheaper integration of playback elements into web pages but also mobile devices have no issues reading and displaying these elements from within their integrated browsers.
Traditionally, when web developers needed to save data locally on the user's machine, they used cookies. HTML5 adds a new offline storage method called Web Storage (http://dev.w3.org/html5/webstorage) that can drastically increase your applications' abilities when you have the requirement to save data for re-use. Large amounts of data like your clients user-specific application configuration can now be stored in a more secure and quicker manner.
You can now also setup your HTML5 content to be available to your users even when they go offline by utilizing the HTML5 cache manifest. The cache manifest is just a simple text file, which is placed on your web server. If a web browser supports the use of HTML5 cache manifests (all modern browsers currently do), the references to files and assets, which you have placed within the manifest, are all cached on the client side. Depending on whether your manifest is set to cache all the content required to run your application, the user can then go offline and continue using the application. Combined with the use of HTML Web Storage for archiving data to be resent to a web server upon Internet reconnection, you can develop applications that will allow your users to seamlessly use them despite their connection being broken. A perfect example of this feature of HTML5 in action is Gmail by Google (https://mail.google.com). By archiving message data on a user's device when accessed initially, important information such as e-mails can still be reviewed when a user goes to open a message while, say, he is underground in a subway.
Many HTML5 elements now allow a parameter, contenteditable="true", which allows users to edit all the content within the element. This feature brings a sort of WYSIWYG environment directly to HTML content. Inline document editing can be extremely handy as a developer when manipulating content within your HTML5 projects.
HTML5 elements now have the ability to be draggable. Simple but important user experience additions such as this bring more application-like interactivity which traditionally would be built with JavaScript. Just like inline document editing, setting elements to be draggable during development can aid in finding the proper position properties.
The Geolocation API enables users to allow their current position to be sent to an HTML5 document for use within JavaScript. Apart from the obvious usage of a user's location in mapping applications, Geolocation values can add many new features into web documents that allow for a more interactive user experience.
The File API within HTML5 allows a more interactive experience when dealing with files on a user's local machine. Local files can now be dragged into the browser and previewed within the HTML document without uploading the data to the web server.
Tip
For a more in-depth look at the complete feature set within HTML5, visit the online W3C API documentation (http://www.w3.org/TR/html5/).
As more devices become integrated with Internet accessibility, the need for streamlined, multiplatform applications that allow for low overhead and integrated device access is at an all-time high. Almost all modern mobile browsers already support many features of HTML5, which web developers can harness to build mobile applications that rival many natively built applications for specific mobile platforms. Features such as Geolocation, local file access and offline storage allow applications to easily integrate themselves into the device hardware that is running them.
Tip
Any of the examples in this book can be run on any modern mobile device running an HTML5-compliant web browser. If you have an iPhone, Android, or Windows phone handy, test out the examples on your device to view how well mobile platforms run HTML5 content.
One of the biggest driving forces behind the advent of HTML5 was mobile. Mobile application development requires a slightly different approach than typical application development as the platform running the application not only has fewer resources as compared to a typical desktop configuration but also things like battery life, screen resolutions, and touch interfaces need to be taken into account. Dealing with all of these requirements while developing applications with Flash can get a little bit tricky. Flash applications traditionally tend to be a bit heavy on resource usage, though optimizations can be made to compensate for some of these issues while running applications on mobile platforms.
Since the advent of iPhone, Flash developers had to deal with the fact that their web-based Flash content would never be viewable from the integrated iOS web browser. Apple made their stance on the usage of the Adobe Flash Player clear in a publicly address letter from Steve Jobs in April 2010, which stated that the Flash Player did not deliver the device or application performance that Apple required on their device.
In June 2012, Adobe released a public statement regarding the future of the Adobe Flash Player for mobile. As of August 15, 2012, Flash Player for Android will only be available to devices certified to run the Flash Player as Adobe has suspended the development of the mobile version of Flash Player. Users running Android Version 4.1+ will be unable to run Flash content within their browser and all web content will rely on the use of the technologies within HTML5.
With the Flash Player removed from the mobile market, a Flash developer's only resource, at this point in time, for creating mobile applications is developing them with Adobe AIR and packaging their work as standalone applications rather than on the Web.
Flash developers transitioning to HTML5 development have a leg up when it comes to learning tricks to create amazing applications with purely HTML, CSS, and JavaScript. Not only will all the lessons learned about handling and optimizing media elements transition over, but also their ActionScript 3 skills will allow them to understand and use JavaScript to its full potential.
The time developers invest to learn a programming language such as ActionScript 3 is far from a short endeavor. Fortunately, both JavaScript and ActionScript 3 are built on the ECMAScript scripting language standard (http://www.ecmascript.org). In a nutshell, this means that many of the method, variable, and property syntax setups are extremely similar in look, feel, and usage. As we dig deeper and see more examples of HTML5 in action, if you have experience with ActionScript 3, you will instantly notice many similarities when utilizing JavaScript.