The why and how of moving ELEARNING from Flash to HTML5 TABLE OF CONTENTS 1.0 eLearning Then and Now 04 What's the deal with HTML5? 05 Difference between Flash and HTML5 06 2.0 Why move eLearning from Flash to HTML5? 09 3.0 Moving To HTML5 – Key steps 13 4.0 Converting Legacy Flash-based eLearning to HTML5 18 5.0 References 34 1 .0 eLearning Then and Now 03 eLearning Then and Now Since the term 'eLearning' was coined, up until HTML came to be recognised as a better alternative for eLearning development, Flash enjoyed the position of being the favourite development tool for desktop-based eLearning. And rightly so. It redefined the user experience on web with its rich multi-media and interactive capabilities. But with the evolution of technology and network connectivity, newer and better devices emerged. PCs were accompanied by laptops, tablets, phablets and even smartphones. Some of these mobile devices, due to their diverse screen sizes and operating systems (and some other reasons like processor capability, device features, etc.), did not support Flash – neither within the web-browser nor outside of it. Explaining why Apple would not allow Flash on the iPhone, iPod touch and iPad, Apple openly criticised Flash for its rapid energy consumption, poor performance on mobile devices, abysmal security, lack of touch support, and desire to avoid "a third party layer of software coming between the platform and the developer". As this battle of technologies intensified, the popularity of Flash waned, and that of HTML5 increased. 04 eLearning then and now What's the deal with HTML5? HTML5, in technical sense, is a new open standard based on XML, a combination of HTML, CSS and Javascript. It has the potential to change the traditional (read Flash-based) approach to eLearning development. It is particularly useful for organisations with 'no plug-in' policy because it renders natively in HTML5 capable browsers. Also, HTML5 helps in creating platform independent applications. Here are some of the new elements included in HTML5: Web developers can now create 2D drawings controlled by JavaScript. This would help in creating Canvas interactive graphs, games, and presentations easily. Key benefit is that web developers can do this using JavaScript directly in HTML 5 without relying on technologies like Flash or Silverlight. Video and Ability to play video or audio in HTML5 WITHOUT any plug-in required (like Flash or Silverlight), Audio simply by using the new audio and video markup tags. Details, datagrid, command & menu -These are interactive elements included for development Interactive of web applications with more such elements to be included in the future. This would help the Elements web developers display data in structured formats and make it easier to implement. 05 eLearning then and now Difference between Flash and HTML5 Apart from the apparent difference in technologies, there are many other factors that set them apart. Here are a few: Flash html5 Software Flash player/plug-in required No additional requirement support Vendor Adobe System's proprietary software Largely controlled by W3C and WHATWG neutrality made up of three companies – Opera Software, the Mozilla Foundation, and Apple. Using Adobe tools (Flash Professional, Coding in CSS, HTML, and JavaScript; with Flash Builder etc.) any Text Editor, Tools like- GoMo, Storyline 1,2, Authoring Captivate-8,9, Adobe Edge, Adapt, Elucidat. Frameworks like FRED, Adapt etc. Measurements in sub-pixel increments, Measurements on a sub-pixel scale, web Features crisper, pleasant and rich design output, browsers will round either up or down, audio good audio-video output, perfectly fit for and video support, very good accessibility simulations. support. 06 eLearning then and now Difference between Flash and HTML5 Apart from the apparent difference in technologies, there are many other factors that set them apart. Here are a few: Flash html5 Mobile Up to Android 4.0[8] (unofficially for Android Windows Phone 8+,Android 2.3+,Apple iOS Operating 4.1 and above), BlackBerry PlayBook, 6+,Symbian Belle+, BlackBerry OS 7+ Systems BlackBerry 10 v10.0 - 10.3.0 (10.3.1 unofficially supported), Windows RT. Through AIR apps for Latest Android and iOS. Device Full access to web camera, microphone, Limited access to web camera, microphone, access accelerometer, GPS accelerometer, GPS Responsive/ No Yes multi-device access 07 2 .0 Why move eLearning from Flash to HTML5? 08 Why move eLearning from Flash to HTML5? With Flash losing support from major mobile players and Adobee iitselftself abandoningabandoning support for mobile browsers altogether, HTML5 presents itself as a promisingpromising alternative for eLearning development. It can play audio, video, 2D/3D2D/3D graphics,graphics, and animation - all without a plugin, and also have improved access to hardwarehardware elements and offline storage. 09 Why move eLearning from Flash to HTML5? Some more reasons that drive the need to move eLearning from Flash to HTML5 are: The Multi-device Shift The recent years have witnessed an unprecedented growth in the number and variants of devices. eLearning that was once restricted to desktops has now moved on to handhelds and even wearables. And only a few of these devices support Flash making HTML5 the best option. BYOD Devices have now become a part of the daily routine, with almost everyone using and switching between multiple devices to finish a task during the course of the day. With the growing trend of BYOD (Bring Your Own Device) worldwide, employees are using their personal devices to access business applications. Gartner predicts that by 2017 half of employers will require employees to supply their own device for work purposes. Such a scenario calls for eLearning delivery on a wide range of devices and a technology that can be built once and delivered everywhere. That's HTML5. 10 Why move eLearning from Flash to HTML5? Investment Locked in Legacy eLearning Most eLearning have a huge pool of legacy Flash-based eLearning courses at hand. It’s bad enough that they don’t work on tablets and smartphones, locking investment to desktop delivery only, and with the increasing demand for learning on mobile devices, it might end up as a sunk cost! Converting Flash-based courses to HTML5 can unlock some of this investment as it would be more cost effective than redevelopment of those courses from scratch. Future-proofing To avoid being in the same situation again, with investment in courses locked in an old technology, it is wise to convert existing or create new eLearning in HTML5. HTML5, being an open standard adopted by W3C and being incorporated in all latest browsers, presents a long-term option. 11 3 .0 Moving To HTML5 - Key Steps 12 Moving To HTML5 Key Steps MovingMoving towards HTML5 is no longerlonger a question of 'if' but 'when'. The first and foremost stepstep for adoptingadopting an HTML5HTML5 strategystrategy isis Evaluation,Evaluation, followedfollowed byby Analysis.Analysis. 13 Moving To HTML5 Key Steps 1 Evaluation It is important to evaluate whether the move from Flash to HTML5 is required. If the target devices consist of desktops alone, then using Flash as the platform to develop learning might be a viable option subject to the long term objective in the context of multiple devices. However, if multiple devices of various sizes and makes are to be considered, then based on the target devices the approach may vary. There are 3 ways for conversion of legacy Flash-based eLearning to HTML5. 14 Moving To HTML5 Key Steps 1 Evaluation 1. mEnablement mEnablement is the process of converting existing eLearning to a tablet–compatible format. With almost 70% of the official work being done on tablets, conversion of legacy eLearning content to tablet compatible version is essential. Converting existing eLearning to Tablet Learning can be relatively easy, and with many tablets having resolutions similar to desktop PCs, content repurposing is often minimal. More on mEnablement, its options, key considerations and challenges here. 2. Responsive Design Responsive design is a design approach that delivers content that responds to the user’s behaviour and environment based on screen size, platform and orientation. Using responsive design ensures that the converted legacy courses work well on any device. More on Responsive Design, its key considerations and challenges here. 3. App-based/Mobile only 'App' is a software program that can be launched from the mobile and is designed to perform a specific function directly for the user or, in some cases, for other programs. If performance support or just-in-time learning is a part of the training objective then app-based or mobile only learning is the right solution. More on App-based/mobile only, its key considerations and challenges here. 15 Moving To HTML5 Key Steps 2 Analysis Once the approach is determined, then the next step is to analyse the existing Flash-based course. The elements of analysis may remain the same but the conclusions may vary based on the approach. The process of analysis includes the following steps: 1. Review the objectives Understanding the nature of the existing Flash-based eLearning (Eg. content and presentation type, compliances etc.) and what it would be converted to (Eg. delivery device(s), etc.) helps in setting the right objectives. This should be done while keeping the overall learning and organisational goals in mind. 2. Identify tools used for development Identify tools used for creating legacy content. Tools like Articulate, Captivate etc. can be used to republish the same content for tablets and even provide multi-device output. 3. Identify reusable assets Even if the entire legacy course may not be of use, there may be some assets that can be reused. Keeping those handy can be really helpful in the conversion process, both time and cost wise.