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

    Want Your eLearning Courses to Deliver Results? Avoid These Mistakes

    Feeling overwhelmed with AI shaking up the eLearning scene? As L&D leaders, you've been nailing it, smoothly running your training programs and adapting as tech evolves. But now, with AI's rapid rise, it's as if the game board has been flipped over. It's a common, yet dangerous assumption to think that just by integrating AI, all of our training challenges are solved. Beware—this overreliance is a trap! Here's the hard truth: AI, while transformative, is not a silver bullet. In the rush to embrace these new tools, many well-intentioned L&D leaders are making critical mistakes that could cripple the effectiveness of their eLearning initiatives. I totally get the frustration—it’s like suddenly, everyone expects you to have all the answers just because you've got the latest tech at your fingertips. But remember, it’s not all about AI. In the rush to integrate this new tech, I’ve seen too many skilled teams slip up in areas that have always been crucial—like course design, content relevance, and learner engagement. Let’s get real about these common pitfalls, ensuring you’re not just relying on AI but are also paying attention to the foundational elements of effective eLearning. This is your heads-up to keep your game tight, making sure your training programs are as powerful as ever, with or without the extra tech boost.

    The New Rules of Instructional Design in an AI-Driven World

    It’s no longer a question of whether artificial intelligence (AI) will change the way we work—it already has, and instructional design is no exception. What was once a futuristic concept is now a daily reality, reshaping how we approach learning and development at every level.

    The Future of Instructional Design in the AI Era

    Instructional design is at a crossroads. The rapid rise of AI is reshaping the field faster than many of us ever imagined, and it’s not just an incremental shift—it’s an industry-wide transformation. Entire workflows are being redefined, roles are evolving, and the expectations placed on L&D teams are skyrocketing.