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.



41 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
    Replies
    1. IEEE Final Year Project centers make amazing deep learning final year projects ideas for final year students Final Year Projects for CSE to training and develop their deep learning experience and talents.

      IEEE Final Year projects Project Centers in India are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation.

      corporate training in chennai corporate training in chennai

      corporate training companies in india corporate training companies in india

      corporate training companies in chennai corporate training companies in chennai

      I have read your blog its very attractive and impressive. I like it your blog. Digital Marketing Company in Chennai

      Delete
  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. Thanks for sharing this informative information...You may also refer....
    How to migrate from a typical HTML4 page to a typical HTML5 page.
    www.s4techno.com/blog/2016/08/30/html5-migration/

    ReplyDelete
  4. 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
  5. I was able to find good information from your blog posts.

    HTML5 Development

    ReplyDelete
  6. 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
  7. "Exception thrown, see JavaScript console"
    So. F. Typical...

    ReplyDelete
  8. Hai Author Good Information that i found here,do not stop sharing and Please keep updating us..... Thanks

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

    ReplyDelete
  10. Thanks for sharing this valuable information to our vision Full Stack Training in Hyderabad

    ReplyDelete
  11. Hi,

    Thank you for sharing useful article

    I would like to introduce one of Our web designers and developers will give the best and high quality local USA website Development Services with low cost if you need more details about our web designing services so please feel free to contact us.

    Ecommerce Web Development Services in USA

    Magento Ecommerce Website Development
    Travel portal Development
    Web Application Development USA
    Yalavarthi Software solutions USA

    ReplyDelete
  12. 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

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

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

    ReplyDelete
  15. Wonderful post! An opportunity to read a fantastic and imaginary blogs, I really like to read your blog, the points you have mentioned in this article are helpful for me, thank you so much for share this awesome blog post. We are the best award winning web development company in New Zealand. Please Visit Tandem NZ

    ReplyDelete
  16. Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
    SEO company in coimbatore
    Digital Marketing Company in Coimbatore
    SEO Services in coimbatore

    ReplyDelete
  17. thank your valuable content.we are very thankful to you.one of the recommanded blog.which is very useful to new learners and professionals.content is very useful for hadoop learners


    Best Spring Classroom Training Institute
    Best Devops Classroom Training Institute
    Best Corejava Classroom Training Institute
    Best Advanced Classroom Training Institute
    Best Hadoop Training Institute
    Best PHP Training Institute

    ReplyDelete
  18. I truly like how your class timings of your online journal. I delighted in perusing your online journal and it is both instructional and intriguing.

    Mobile App Development Company | Web Development Company India

    ReplyDelete
  19. 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
  20. A bewildering web journal I visit this blog, it's unfathomably heavenly. Oddly, in this present blog's substance made purpose of actuality and reasonable. The substance of data is informative
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  21. A befuddling web diary I visit this blog, it's incredibly grand. Strangely, in this present blog's substance made motivation behind fact and sensible. The substance of information is instructive
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  22. An overwhelming web journal I visit this blog, it's unfathomably amazing. Unusually, in this present blog's substance made inspiration driving truth and reasonable. The substance of data is enlightening
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  23. A befuddling web diary I visit this blog, it's incredibly grand. Strangely, in this present blog's substance made motivation behind fact and sensible. The substance of information is instructive
    Oracle Fusion Financials Online Training
    Oracle Fusion HCM Online Training
    Oracle Fusion SCM Online Training

    ReplyDelete
  24. very nice blogs!!! i have to learning for lot of information for this sites...Sharing for wonderful information. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing

    Digital Marketing In Telugu
    Digital Marketing In Hyderabad
    internet marketing
    Digital marketing
    Digital Marketing Strategy

    ReplyDelete
  25. 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
  26. Really it is very useful for us..... the information that you have shared is really useful for everyone.Nice article i have ever read information's like this.it's really awesome the way you have delivered your ideas.i hope you will add more content in your blog PHP Training in Chennai | Certification | Online Training Course | Machine Learning Training in Chennai | Certification | Online Training Course | iOT Training in Chennai | Certification | Online Training Course | Blockchain Training in Chennai | Certification | Online Training Course | Open Stack Training in Chennai |
    Certification | Online Training Course

    ReplyDelete
  27. Really it is very useful for us..... the information that you have shared is really useful for everyone.Nice article i have ever read information's like this.it's really awesome the way you have delivered your ideas.i hope you will add more content in your blog PHP Training in Chennai | Certification | Online Training Course | Machine Learning Training in Chennai | Certification | Online Training Course | iOT Training in Chennai | Certification | Online Training Course | Blockchain Training in Chennai | Certification | Online Training Course | Open Stack Training in Chennai |
    Certification | Online Training Course

    ReplyDelete
  28. Thank you for sharing the article. The data that you provided in the blog is informative and effective.

    Tableau Training in Hyderabad

    ReplyDelete
  29. 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
  30. I am really happy to say it’s an interesting post to read . I learn new information from your article , you are doing a great job . Keep it up

    Devops Training in USA

    Hadoop Training in Hyderabad

    Python Training in Hyderabad

    ReplyDelete