Showing posts with label html5. Show all posts
Showing posts with label html5. Show all posts

Thursday, 5 July 2012

Create #mobile #quizzes free & paid options for #mlearning

A couple of days ago someone asked me ‘how can I create quizzes and conduct them through mobile phones? ‘ . The question was sent to me through my ask box! I never had a question received through that ask-box so I am excited! So I gladly dedicate a blogpost to the answer.  If you have any questions, feel free to use the same ask-me box on the right side of my blog, if possible I pour the answer into a blogpost.

There are a couple of ways to set up or conduct quizzes that are delivered to mobile phones. There are also a lot of different mobile phones out there, so it is no surprise that you need to get a couple of facts cleared out before you can even start to build your quizzes and share them with learners.

Facts you need to know before building mobile quizzes:
  • What type of mobile devices does your target audience use? (basic cellphones with internet capacity, smartphones, 3G enabled tablets…), you need to cater to the most basic mobile phone used by your audience (e.g. no multimedia if your audiences is mostly using basic cellphones)
  • How are these phones connected to the internet? Through a Wi-Fi (this does not cost anything for the user)? Through a mobile internet data plan (that can be costly and would mean you need to keep the mobile content small in size (small download size, less cost).
  • Will the mobile quizzes be embedded in a learning platform? (if so, you need to make sure that if you use mobile authoring tools that are SCORM-compatible  Why? Because you would want an automated link between the mobile quizzes and the grading book of the LMS you are using). An example of a mobile quiz option for Moodle is Mobile Study
For mobile authoring tools, look at the end of this blogpost, for a free and easy mobile quiz tutorial just read the following section. 

Intermediate (internet capable) cellphones => html
I
f your target audience uses simple internet-enabled cellphones, search for mobile html quiz options. One great option is combining a set of Google elements. Even if you are not that techy, you will be able to make a mobile quiz. All you need is a Google account, Google drive (for forms and spreadsheets) and setting up a mobile enabled blog (Posterous, Blogger, Wordpress). After that, try this:

Phase 1: setting up the mobile quiz using a mobile accessible blog and Google drive (Google forms)
  • If you have not got a Google account, register and sign in.
  • Open up a blog that is allows html coding (you need to consider a mobile enabled blog: Blogger, Posterous, WordPress… otherwise your quizzes will not be mobile :-D
  • Open a Google forms document (a Google form can be created when you open Google docs, and Google docs is now part of Google Drive ) and build your quiz
  • Once your quiz is finished, copy the html code form the Google form
  • Past the html code inside of your blogpost
  • Send the link of that blogpost to your learners
Phase 2: getting the grades of the mobile quizzes automatically listed
As learners are taking the Google form based quiz, their quiz results will automatically fill a Google spreadsheet (spreadsheets are created starting from Google docs which is now Google drive ). Now the thing we want to do is automatically grade their results. This is done by adding Flubaroo (http://www.flubaroo.com/ a script written by Dave Abouav ).
  • First go to the spreadsheet that has the results, click on the tab ‘tools’, select ‘script gallery’, search for Flubaroo and click on the install button.
  • Now look at the Flubaroo instructional video that Dave Abouav provides to see how you need to finetune Flubaroo to do the grading for you (select which questions needed to be used for grading, which need to be skipped (e.g. general information questions), and where Flubaroo can find the correct answers for each question).
  • Now take into account that if you added visuals, you will have used multiple forms, as such you will need to install Flubaroo for multiple spreadsheets. If you did not include visuals, you only need to use one form, and as such you will only have one spreadsheet to install Flubaroo on.
  • The grades are put into a different spreadsheet by Flubaroo (these spreadsheets are also mobile accessible).
A video tutorial of the above mentioned steps can be seen in the video here, which gives an overview of how to build a quiz, up to adding the Flubaroo script to your spreadsheet for automated grading. 


Phase 3: you also want visuals in your mobile quizIf you want to add visuals to your forms, make a form for each question. Why? It will allow you to add visuals before or after the actual question you put in your blogpost.
  • You first follow the steps as mentioned above, but you copy/paste the embed code of each form inside the blogpost,
  • After that you go to your blogpost and add any visuals (movies/pictures) you want to add. In doing this do keep in mind the type of phones that your target audience has and which type of connectivity, you do not want heavy size movies to be downloaded on non-multimedia phones or phones that only use paid data traffic (the bigger the file, the more they would have to pay).
A video tutorial of the above can be found here.


Now simply access the blog with your mobile device and - if the blog is mobile enabled - you will have mobile quizzes for free, AND which will be graded automatically. Cool!

Using commercial mobile authoring tools to build your quizzes
If your target audience uses smartphones, search for mobile quizzes with more advanced options (html5 is quickly becoming the standard so look for those companies that offer html5 authoring tools, e.g. mLearning studio from RapidIntake  (US based) or the wonderful GoMoLearning (UK based). Both these companies offer mobile solutions that are both delivering stand-alone mobile apps (native apps which you can open and learn from whether you are connected to 3G/wifi/internet or not, and that offer online options as well). Their mobile courses/apps… are also multiple platform accessible, so you do not need to build one app for Android, another for iPhone and so on.

If you are a bit savvy with html5, you can even build your own mobile quizzes, simply learn html5 via the free tutorial offered by W3C ( ) and add some javascript (also free tutorial:) and I gladly add the Top 10 Mobile Web Development Javascript Frameworks as listed by Jacob Gube (), founder of SixRevisions.com 

Wednesday, 25 April 2012

Writing a #crossplatform #multimedia rich #eBook is hard! Help needed

Stephen Downes' OLDaily got me onto Laura Braunstein who listed a couple of eBook qualities she would like to see. And I totally agree with her list (in short: interoperability, intertextuality, sharing, device neutrality, curating). This is a great list and to be honest, I am looking at ways to publish an eBook syllabus (makes more sense then a fixed written book in this day and age, doesn't it). The only problem is, that it is still a challenge to integrate multimedia in an eBook (or at least, I still find it challenging). So I was looking at a way to get an eBook - preferably an ePub - published, with integrated movies, audio and the more classic stuff (hyperlinks, pictures) and ... I can use any help you might have... here is the road I traveled so far.

What I am looking for is a complete eBook or ePub tool, that allows me to integrate multimedia and produce a cross-platform, interactive publication. So, I started to sift through what is out there.
First stop:
Lulu publishing: they do offer an eBook solution, but currently without multimedia support so... not worth the time investment.
ePubBud.com is another self-publishing option, but then again, I do not find any multimedia integration here either, so I could just as well use google docs.
Smashwords is another independent eBook publishing option. No multimedia here either (if I am overlooking it, feel free to tell me).

The thing is, if multimedia integration is not possible, I can just as easily use a pdf, google doc, or even a Word file as a book and just fill it with anchors and hyperlinks + pictures. Make sure to read the AMAZINGLY wonderful Liz Castro with a post on cheap Word into ePub conversion.

In the meanwhile I just want a book that gets me there, inside the text, guided by the text or media. It cannot be that difficult as the internet is doing it already anyway?

Then there is idpf.org the international digital publishing forum. They have an immediate link to ePub3 and the open codes related to that. Great stuff, yet ... again time is limited for me at the moment. But if this is a priority, you can find a great set of resources here.
Or there is the Wysiwyg Google option called Sigil. But here again I do not seem to see video integration.

And there is of course iBooks 2 which does enable video integration in eBooks but also 3D models etcetera, but what I am looking for is a cross platform solution.

Luckily, I came across ePubInClassroom (which features a nice overview of ePub options) and that was where I found a link to Calibre, which has indeed video integration (hooray!).

Calibre is an amazing (!) eBook option built by Kovid Goyal, as it allows you to gather articles from newspapers and integrate it into an eBook that can be viewed on your device, or you can use it to create multimedia driven eBooks. Calibre uses a straightforward video tutorial to get you up to speed...



BUT, the video is not mentioned. Now, I found a thread in mobile read which covers embedding video in Calibre but ... not getting anywhere with that at the moment.

If anyone knows a cheap and easy way, feel free to share! Or must I really get InDesign CS5? Or should I provide a complete folder that can be downloaded so a local website can be unfolded with links to movies? ... as you see my mind moves all over the place, so feel free to point me in the right direction.

That being said... my list of to do things keeps on growing during my sabbatical: getting gRSShopper up and running for publishing a newsletter, finishing a mLearning syllabus, finishing full proposal, rewriting two book chapters, organizing a free, open course on mLearning ... so maybe I should just keep my mind on a more static syllabus and not add an ePub to my list .... But then again, where is the fun of that?

Tuesday, 13 March 2012

mLearning #research focus: new features of #html5 for future offline #mLearning


Chillian researchers from the Universidad de Chile, Santiago have a wonderful and useful research paper focusing on new features of html5 and how they can be used for situated learning scenarios. The full paper can be found here (English) at page 252 of the mLearn2011 proceedings. The authors of the paper are: Nelson Baloian, Jonathan Frez, Marc Janser, Gustavo Zurita.

It is a long paper that is both theoretical, technical and practical = great combination. And I gladly share some of the paper's content here.

What I found of immediate interest was their list of new, useful html5 features related to offline mLearning and semantic features - really nice:

HTML5 provides a number of new features that almost all yield to the possibility to enrich HTML sites either by new communication mechanisms or by new presentation techniques. In the following the three most important new features with respect to mobile learning scenarios will be presented shortly:

Canvas: With the new CANVAS implementation HTML5 provides the possibility for an easy and flexible provision of 2D graphics. Therefore, the new CANVAS object provides e.g. the possibility to draw simple lines, circles and rectangles. Furthermore, images can be added to a canvas that can be moved, rotated and scaled. Furthermore, simple graphical functionality like transparency can be used. All these functions are available over simple JavaScript commands.

WebSockets:
Historically, a website was only able for uni-directional communication from the website to the server. The only way to receive data from the server was implementing pull methods (ex, AJAX). This changed with the implementation of WebSockets, since this approach allows for bi-directional communication. In order to be able to receive data send over a WebSocket, the website needs to implement the different JavaScript-Callback methods:
 onopen: gets called when the WebSocket is openend.
 onmessage: gets called when a message arrives over the socket.
 onclose: gets called when the WebSocket connection is closed.
The onmessage method works just like a push call from the remote server.

Web Database: HTML5 provides an implementation of SQLite that allows associating a Web application with a local database and load remote data into it.

LocalStorage: consists in a hash table with 10Mb capacity to store values; these data are related to the Web application in online and offline mode.

FileSystem, manifest and offline mode: The key of developing web applications is the combined use of FileSystem and the Manifest file. FileSystem is an API that provides an independent file system from other applications and user files. Manifest is a declaration of which are the files that make up the application by local references to them. The Manifest is used by browsers to download these files and load them to a local filesystem, allowing offline operation.

Geolocation: Given the capacity of current mobile devices, there are many applications that use the georeference api, HTML5 provides this api that allows to know the coordinates of the access device, so its possible integrate the information. The data available are: latitude, longitude, altitude, accuracy, altitude accuracy, heading, speed.

WebWorker: is a simplification to work with threads in a web environment, since the browser controls the threads; it is not possible to manipulate from Javascript. However, a WebWorker permits simultaneous and asynchronous operations, regardless of the strands of the browser.

Semantic elements : Allow roles different visual components of HTML, for example assign a header role to a div, and footer to another. Thus it is the device's browser that allocates positions screen as character of it.

WebGL: In addition to the new 2D capabilities provided by the HTML5 CANVAS, a third technology, closely related to HTML5 showed up recently that provides 3D capabilities based on OpenGL, called WebGL. Making use of this technology, it would be possible to easily enrich mobile learning scenarios by 3D content.

The authors of this paper then continue on how they embed these new features in the learning scenario's, really interesting and a good read.

As I read a lot of research papers and come across a lot of projects, I thought it would be nice to share those that caught me eye in particular. Hoping to do so every two weeks - ambitious :-D

Friday, 9 September 2011

#html5 #authoring tools and how you can code it yourself

Html5 is the new magical solution for cross-device publications. It is all the rave for mobile developers and newbies. The amazing thing about html5 however, is that it is not really breathtakingly new. In fact, like Brian Fling (expert in mobile design, so connect to his media to stay updated) mentioned on his blogpost on html5 anatomy: "if you know HTML, then chances are you’ll understand what’s new in HTML5 in under an hour."

Teach yourself html5
For those of you with html5 expertise, simply take the free, online html5 course offered by W3C.
But to make really beautiful html5 accessible webpages, you need to digg into Cascading Style Sheets (CSS) as well as they will allow you to produce an eye-catching look and feel. This is also at anyone's fingertips thanks to the W3C tutorial on CSS.
Now you have the basic coding, you have a nice look and feel, this combination will already allow you to publish neat html5 pages. But for those wanting to run the extra mile, the only thing that remains is to add more interactivity and for this you can use JavaScript. Take a look at these 6 free JavaScript books and tutorials from the read and write blog.

Why is html suddenly back as the best webpage coding language?
Let's be honest html is an easy coding language, as such it was put into a corner a bit, pressed away by php, asp, and other more complex coding languages. So I wondered, why did it become cool again to use html?
I feel that with the rise of html5 we see a rise in specialization in instructional design. This makes room for instructional designers that are in fact no longer building designs from scratch, but who use templates and designer tools to put any content in a beautiful and accessible jacket.

And ... of course html5 enables designers to come up with cross device designs, even allowing a variety of mobile phones to access material in a pleasing way (well, it is not that standardized yet, but we are getting there).

For those wanting to test there html5 coding
If you do delve into the html5 code and you have come up with some pages, make sure to test drive them through the free W3C markup validation tool. You have two validation tools, one is for html in general: html validation markup.
And one focuses on mobile html (great tool!), which will allow you to feel confident with the coding you are providing (and that it fits specific browser needs): Mobile Validation.

Looking for an easier option? Use html5 authoring tools
Simply take a look at these html5 designer tools:

Rapid Intake Mobile Studio (I really recommend this one, sooo easy!) and it allows publication to both Flash and html5, so really useful and it has scorm compliant quizzes (for the LMS lovers amongst us): http://www.rapidintake.com/products/mobile/mobile-learning-studio/

And an interesting tool from Adobe Labs, Edge (to download it you will need to make an Adobe account if you don't have one yet): there is an Edge 2 preview you can download http://labs.adobe.com/technologies/edge/

For those using Mac, there is a nice app, the Tumult Hype app: http://tumultco.com/hype/

IBM has also launched a html5 authoring tool project, called Maqetta, but to look at this tool you need to upgrade (if needed) your browser to Firefox 4, Chrome 5 or Safari 5. This tool has to be installed on your server. Get more information here: http://maqetta.org

Tuesday, 1 February 2011

#html5 and #augmented reality combined into a great music clip by the Black Eyed Peas



So, yes, I think html5 is quite innovative and augmented reality is as well, but .... here come the Black Eyed Peas with an incredible fabulous iPhone application that puts you - as a music listener - in the middle of their video-clip (great tip from Gary Woodill, thx!).

Will.I.Am from the BEPs surely knows how to take technology to the next artistic level! And I must say that this is again an illustration how art can lead the way for education.

Just imagine that you open up your smartphone or tablet and you want to learn about the battle at Waterloo where Napoleon got his bottom kicked. Not only could you now enter that battle field, BUT you could also see how Napoleon got defeated and what tactics were used ... all the while you could look at the battle in 360 degrees, simply by rotating your smartphone or table. Now how cool is that!

If you want to get a feel of what they did and you have an iPhone, rush to the iTunes store and search for the BEP360 (Black Eyed Peas 3D 360 application) and put it on your iPhone (it does cost 0.79 cents).
If you don’t have an iPhone, you can see the effects of the new 3D app in the embedded video demo as well.

Ohohhhhooohhooooowwwww, sometimes I wish I would know some of the great visionary artists!

Friday, 28 January 2011

html5 is growing, and this looks like a good e/mLearning solution

The new Rapid Intake mLearning studio looks like it's on its way to become a great authoring tool for all of us who are into ubiquitous learning.
Last Friday I had the pleasure of talking to David Blakely from Rapid Intake solutions. Rapid Intake is company that thrives on its dynamic developers and it shows. They have focused their recent energy on coming up with an authoring tool that allows instructional designers to deliver content across multiple devices while keeping the same content logic, though formatting the content towards the device that is connecting to that content. You can follow them on twitter via @rapidintake.

For those of you who want to take a look at the Rapid Intake mLearning studio, or Rapid Mobile, feel free to take a look at a course example and how it tailors itself to the device that is connecting to it. You can ask for a demo, or get on their mLearning mailing list, so you will be the first to know when they launch this html5/flash authoring tool to the big public!

The tool uses html5 whenever a mobile device connects to the content. They are testing it on android2.2 (galaxy tab, smartphones), iPad and iPhone, and a blackberry version will follow at a later stage. The great thing about this authoring tool is that the developer only has to author one time, once the learners uses the course the device will get the output that fits its specifics. The learners on desktops will see the application in flash, the others on html5. The tool also allows a lot of personalization, which is great for designers.
Additionally, it is scorm comformant, so you can bookmark, which makes it ideal for ubiquitous learning as it memorises where you - as a learner - where looking at the content, so if afterwards you connect to it with another device, it immediately recalls what you have seen and which answers you gave. You can also deliver it to any scorm LMS.

Although the tool will only be launched in March 2011, I had the pleasure of playing around with it (desktop, iPhone and Android running 2.3). Swiping moves the learner from page to page and it works smoothly. At this point in time they have only enabled a couple of templates (text, video, picture and a couple of quizes), but it looks great already. Possibility to add a page narration as well, which is nice. The example course ran smoothly and wonderfully on my desktop, iPad and iPhone, but it was not completely running as it should on my Android phone. Nevertheless, they still have 2 months to get everything up to speed and ... it is really worth a look. This tool will save me a lot of developing time, so yes, I will keep an eye out for when it launches in March.