Sunday, December 27, 2015

Exporting LiveCode to HTML5: This Could Change Everything

One of the most recent and exciting developments in the LiveCode world is the ability to export LiveCode projects to HTML5. It's only available in experimental form currently, known as a "developer's preview" or dp version of LiveCode 8. The current version is dp 12 - dp 1 was released in August, 2015. When it was first released, I spent about 30 minutes playing around with it and immediately experienced some problems. I just tried again and, to my amazement, I was easily able to export one of my early prototype games - Crack the Code! - to HTML5. (Here is my original blog post about it.) Here, try it for yourself:

Alert! It could take a little while to load.


http://lrieber.coe.uga.edu/livecode/html5/Crack_the_Code/Crack_the_Code.html


The original game had sound and the option to change the word list. Unfortunately, neither of these options is working. I'm hopeful that I just don't know some important information about how to package sound for HTML5, so I'll probably post a question about this to the LiveCode forum dedicated to HTML5. (Sound provided very important feedback to this particular game, with a pleasant chime given when you correctly matched the secret word, and an appropriate "crash" when you did not.) I didn't see any mention of sound issues when I browsed the forum, but I did find some useful information about why cut/paste will not work. Apparently, there are strict and narrow restrictions on what elements of a web page can access the clipboard due to security issues. I read one person's suggestion for a workaround, so I might try that in an update. The amount of time it takes to download the HTML page is causing me some concern also. As I understand it, the entire LiveCode engine has been converted to javascript, so it's a big download. On my slow Internet connection at home, I had to wait about a full minute for the page to fully load.

Still, it's absolutely amazing that this works without the need for any sort of plug-in. It's all done using HTML5 and javascript. I made no changes to the program other than cosmetic. HTML5 is simply an export option. You select it, then choose to save as a standalone application. A folder is created with all of the needed resources, including a HTML page that runs the show. Upload that folder to a web server and you are ready to go. The LiveCode program is converted essentially to a javascript module.

Far From Perfect


The good folks at LiveCode have been careful to alert us that this feature is far from perfect and that there is still much work they need to do before we go from a developer preview version to a stable version. I have had some issues getting this project to work. Everything works fine when I run the HTML5 project locally, but it only works on the Internet when I run it from one of my accounts on a University of Georgia server. I have access to other servers, most notably the one housing my NowhereRoad.com site, but when I try running it from there, I get the error "Exception thrown, see JavaScript console." I presume that means my NowhereRoad server is not set up properly to run javascript, even though I thought it was. I obviously need to check into this.

My Q Sort prototype is an excellent candidate for HTML5 export. I tried exporting it, but a key feature does not work - the saving of data into a local text file. It would be fantastic if I could get this working as an online tool. I suspect that many programming techniques I've learned and now use for many of my projects will not work in HTML5 without substantial reprogramming. But, learning new techniques is all in the spirit of this blog. And, perhaps I'll uncover and report some important bugs or needed features that will help in the overall effort by the LiveCode team.

How Does This Change Anything?


The inability to deploy LiveCode projects over the Internet has been LiveCode's main distribution gap. But, it has been a huge gap - a bona fide gaping hole. I began using LiveCode when I had an interest in creating native mobile apps about six years ago. It's easy to develop iOS apps for iPhone and iPad, and even easier to develop for Android devices. It also does a great job if you want to distribute to desktop or laptop computers running MacOS, Windows, or Linux. But the inability to distribute over the Internet has been a serious limitation. Frankly, most of my students have had little interest in learning LiveCode precisely because they could not distribute their projects over the Internet. Similarly, their interest in Articulate Storyline has primarily been due to the fact that exporting projects to HTML5 is Storyline's strong suit.

I have written here before about my fundamental criticism of authoring systems such as Articulate Storyline and Adobe Captivate. A short recap is simply that although these software applications do some things extremely well, their underlying structure seriously narrows or constrains the range of software designs possible. Perhaps I should say that this comment is really not meant to be a criticism, but an observation. What they do, they do very, very well. But, if you have a creative or innovative idea for software design that doesn't fit the tight boundaries of these authoring packages, you are out of luck. Again, one of the things these systems do very well, especially Storyline, is deliver HTML5 compatible tutorials. Consequently, almost all of the projects that my students design are of this ilk. The important point to be made here is that their design ideas are all shepherded down a very predictable, narrow path.

Fortunately, it's easy to embed the HTML code needed to run a HTML5 LiveCode project into an existing web page, including one created by Storyline or Captivate. Here is an example of the minimum code needed for an HTML page to make it all work:

 <html>  
   <body>  
   <canvas style="border: 0px none;" id="canvas" oncontextmenu="event.preventDefault()"></canvas>  
    <script type="text/javascript">  
     var Module = { canvas: document.getElementById('canvas') };  
    </script>  
   <script async type="text/javascript" src="standalone-community.js"></script>  
  </body>  
 </html>  
If you play "Crack the Code!" you will see that it is enclosed in a default web page that was created by LiveCode during the export process. But, I hope you get the idea of how easy it would be to include a LiveCode app within any existing HTML document. So, one can envision a software design process that includes a suite of tools, such as Storyline and LiveCode.

Final Thoughts


I want my students - and all instructional designers - to be able to live up to my motto for why to learn computer programming: "If you can imagine it, you can build it." If LiveCode can perfect the export to HTML5 option, I think it will become a serious competitor to Storyline and Captivate. More importantly, it could lead to much higher quality - and diverse - software for learning in online environments.

The title of this post is obviously meant to convey tentativeness. The direction LiveCode is going could be a game changer in the world of creative online software design, particularly in educational or instructional contexts. However, we are not there yet, so it's still too early to pour the champagne. But I'm optimistically keeping a bottle chilled.



28 comments:

  1. Responsive HTML5 Web design has the solution. The conception behind the amalgam of JavaScript, CSS and CSS3 is to build the flowing website design which is capable to contract, expand, remove or rearrange with user's screen size accordingly and become accessible on all internet devices.

    ReplyDelete
  2. Dr. Rieber, I have run into your article while I am searching for recent updates regarding the Livecode HTML5 features. I cannot agree with you more about your message here. I am waiting for the full HTML5 update of Livecode!!

    ReplyDelete
  3. It's interesting that many of the bloggers your tips helped to clarify a few things for me as well as giving.. very specific nice content. And tell people specific ways to live their lives.Sometimes you just have to yell at people and give them a good shake to get your point across.
    Website for school uk

    ReplyDelete
  4. I was able to find good information from your blog posts.

    HTML5 Development

    ReplyDelete
  5. If you can write a program to run in a modern web browser, you know that it can be run anywhere with no need to install it. Web Design Bangalore

    ReplyDelete
  6. "Exception thrown, see JavaScript console"
    So. F. Typical...

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Hi,

    Thanks for sharing a very interesting article about Exporting LiveCode to HTML5: This Could Change Everything. This is very useful information for online blog review readers.

    From,
    WondersMind,
    Web Development Company Bangalore

    ReplyDelete

  9. Thanks for sharing this useful information. Keep up the good work
    DevOps Online Training
    .

    ReplyDelete
  10. THANKS fOR SHARING YOUR INFORMATION PLEASE KEEP UPDATING US Time Went On Reading Your Article https://nareshit.in/html-javascript-training/

    ReplyDelete
  11. I like your post very much. It is very much useful for my research. I hope you to share more info about this. Keep posting!!
    HTML5 Training Institute

    ReplyDelete
  12. I learned a lots of informative Things about Java from your sites...Content flows are in Good Manner.Looking for Best Java Training with placements then Visit here for more... Java training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery

    ReplyDelete
  13. Great post i must say and thanks for the information. Education is definitely a sticky subject. However, is still among the leading topics of our time. I appreciate your post and look forward to more.
    Java Training in Chennai

    Java Training in Velachery

    Java Training in Tambaram

    Java Training in Porur

    Java Training in OMR

    Java Training in Annanagar



    ReplyDelete
  14. Thank you for sharing this useful article with us. This blog is a very helpful to me in future. Keep sharing informative articles with us.

    https://www.ahmedabadcomputereducation.com/course/php-training-course/

    ReplyDelete
  15. Thank you for sharing this useful article. This blog is a very helpful to me. Keep sharing informative articles with us.

    https://www.france-collectivites.fr/

    ReplyDelete
  16. Great sources for knowledge. Thank you for sharing this helpful article. It is very useful for me.

    https://www.ahmedabadcomputereducation.com/course/laravel-training-course/

    ReplyDelete
  17. As i was going through best mobile app development company named 'Nevina Infotech' that develops Tailor-made apps as per customers requirements. They are covering almost every niche that are must needed nowadays without stepping out such as On-demand apps, education management apps, fleet management, home service and many more. You should check this out.

    ReplyDelete
  18. Thank you for sharing valuable information with us. Exactly, I am looking for this types of blog.

    Lease Rental Discounting
    Lease Rental Discounting Eligibility
    Lease Rental Discount

    ReplyDelete
  19. Great article,keep sharing your knowledge with us.





    ReplyDelete
  20. A great blog, it has a lot of useful information to me
    Village Talkies a top-quality professional corporate video production company in Bangalore and also best explainer video company in Bangalore & animation video makers in Bangalore, Chennai, India & Maryland, Baltimore, USA provides Corporate & Brand films, Promotional, Marketing videos & Training videos, Product demo videos, Employee videos, Product video explainers, eLearning videos, 2d Animation, 3d Animation, Motion Graphics, Whiteboard Explainer videos Client Testimonial Videos, Video Presentation and more for all start-ups, industries, and corporate companies. From scripting to corporate video production services, explainer & 3d, 2d animation video production , our solutions are customized to your budget, timeline, and to meet the company goals and objectives.
    As a best video production company in Bangalore, we produce quality and creative videos to our clients.

    ReplyDelete
  21. You have a gift for making everything look beautiful. Bravo!
    Micropython Training In Hyderabad

    ReplyDelete