SHIFT's eLearning Blog

Our blog provides the best practices, tips, and inspiration for corporate training, instructional design, eLearning and mLearning.

To visit the Spanish blog, click here
    All Posts

    Top Developer Questions about HTML5 answered (Part II)

    Building apps in HTML5 is probably easier than using other development tools, but there's still many things you should learn. Continuing the interview, "Rambling on HTML5" with software developer and interactive media producer, Adrian Murillo, he discusses some important things you should know if you want to create solid HTML5 applications.

    html5 elearning

    1. What about apps? What if I want to publish my content to the Apple App Store, for example?

    You can create content with HTML5 and then delpoy it as an app. There are several frameworks that let you wrap your code, and generate a native application. Apache Cordova, also known as PhoneGap, and Appcelerator Titanium are two of the most relevant projects on that subject.

    Both let you integrate native device behavior into your HTML5 based applications, like interfacing with the camera, the address book, GPS, etc. You pack them up, and they are, for all practical purposes, just the same as a native app.


    2. Using these frameworks, is it also possible to build them as a Windows or OS X program?

    Yes, Appcelerator Titanium lets you do that. Apache Cordova does not, but you can still use it if you only want to target phones or tablets.

    That is not to say that you always need to use them to deploy your content. You can just as easily distribute your plain HTML5 files, and they will run on all platforms.

     

    3.  So, I then just create once, and my content will be visible just the same way on all these platforms, right?

    More or less so. One of HTML5’s main characteristics, is that it is an interpreted language. What that means is that it does not build your content; it depends on another piece of software to read the instructions it defines, and show it to the user. That piece of software is usually a web browser, like Firefox, Safari, Chrome, Opera or Internet Explorer. It takes all the elements described on the HTML files, and presents them to the user.

    The biggest consequence of this, is that your content may show up somewhat differently on each platform, and there’s not really anything you can do to avoid it. However, instead of fighting against it, you should go with it, embrace the differences, and develop with that in mind.

    It’ a fact of life; when working with HTML, the pixel-perfect design as you know it does not really exists. The inherent portability of HTML5 has that key side effect.

    Accordingly, when developing with HTML5 you should test in as many platforms as you can, to make sure you catch any exceptions that may arise. There are lots of tools to make this easy, and it will always be an inevitable step on your workflow.

    Also, as HTML5 is still a working draft, some web browsers may even lack some features, or may implement them in particular ways. This will become less important in the future, as the base becomes more stable, but is one very important thing you should keep in mind right now.

     

    4. Ok then, I just have to learn HTML5 to begin creating mobile ready, platform independent, content?

    Not quite. HTML5 is just one piece of the puzzle. You also need to learn CSS and Javascript.

     

    5.  What are those for? I thought HTML5 was all I needed.

    html5 and cssHTML5, or any HTML version for that matter, is used for defining structure. You specify semantics for your data elements, and group them in logical sets. You can define hierarchies, dependencies, etc. However, it does not really let you perform advanced graphical layout by itself, or implement run-time interactive elements. That’s what CSS and Javascript are for.

    CSS, and its latest iteration, CSS3, let you associate visual styles to your structural elements, and even change them over your application’s life cycle. You can animate, apply transitions and lots of other things, independently from your data.

    Javascript is the programming muscle. It lets you add interactivity, respond to your user actions, interface with other systems, and all sorts of things you expect from a full featured application.

    Without both these elements, HTML5 would just be a way to tag your content, pretty much like it was back in 1991. Using the three of them combined, you can overcome their limitations, complement them, and create rich content.

     

    6. Are there any real-world applications that can show me what HTML, CSS3 and Javascript can do?

    There are lots of real applications out there, ranging from proof-of-concept kind of things, to complete production level software. You may already be using some of them. For example, Google and GMail have versions based on HTML5. Also, there are some very nice games created with it, like Pirates Love DaisiesGoogle Pac-Man, and Cut the Rope, to name a few. You can just google it, and get score after score of application listings.

    You’ll see that this technology is already widely used, not only for games or productivity applications, but also for elearning content, online magazines and ebooks, and pretty much whatever you can imagine.

    Click me

    Karla Gutierrez
    Karla Gutierrez
    Karla is an Inbound Marketer @Aura Interactiva, the developers of SHIFT. ES:Karla is an Inbound Marketer @Aura Interactiva, the developers of SHIFT.

    Related Posts

    Best Practices for Measuring the Impact of Online Training at The Workplace

    Are you truly maximizing the potential of your online training programs? As training leaders, you know it's tough to show how effective your learning initiatives are. Often, it's hard to see the real impact these programs have.

    Golden Rules for Using AI to Supercharge E-Learning Content Development

    Artificial Intelligence (AI) is reshaping the landscape of e-learning course development.

    The Ultimate Guide to Creating Effective Microlearning

    Microlearning is not just a fleeting trend—it's rapidly evolving into a cornerstone of online training strategies.