General developer forum

 
 
Matt Bury
HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

Hi Moodlers!

I found this JS library: https://github.com/bartaz/impress.js

Here's a demo: http://bartaz.github.com/impress.js

And here's a list of 3rd party presentations that use it: https://github.com/bartaz/impress.js/wiki/Examples-and-demos

To save/export them, just hit Ctrl + s

There's an editor project for impress.js here: https://github.com/tantaman/Strut

Demo here: http://tantaman.github.io/Strut/dist/index.html# (I think it's intuitive, practical and easy to use).

Again, to save/export, hit Present then Ctrl + s

It'd be nice to have a resource module plugin that could do all this inline with Moodle.

Anyone want to give it a try? (I haven't go the time)

 
Average of ratings:Useful (1)
Picture of Stuart Lamour
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

there is also http://lab.hakim.se/reveal-js/#/

which is used for http://slid.es/

 

 
Average of ratings: -
Matt Bury
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

Hi Stuart,

reveal-js looks great but the editor slid.es is proprietary - Not much use for Moodle integration sad

 
Average of ratings: -
Matt Bury
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

Hi Stuart,

I've had a closer look at reveal.js and I like it. I've discovered it has some nice little details, like if you leave a slide that's playing media in video or audio tags with the data-autoplay setting on, it automatically pauses the playhead until you return to that slide. I've tried out the online editors a bit more and they're buggy and give a poor UX. I don't think Javascript editors like these are the way to go for the time being.

How about providing a bunch of ready made style sheets, a UI for choosing them and setting some parameters in reveal.js and then providing some way to import the HTML for the slides and media?

Another issue that such a module could address is how HTML5 multimedia presentations can be deployed in Moodle without resorting to SCORM or embedding them from 3rd party repositories/services. If it leverages a custom proxy script that accesses files in Moodle's File system repository, that'd solve a whole lotta issues (I've done that with the SWF Activity Module). The main drawback is that this solution requires FTP access to /moodledata/repository/ to upload the presentations. Still, overall, it'd take less time and be less problematic to author slide shows with an IDE (e.g. SeaMonkey, Netbeans + HTML5 plugin, or Dreamweaver) and upload the HTML snippets and media files via FTP.

Alternatively, users could compose the slides using Moodle's tinyMCE for each slide and go entirely through Moodle's file manager.

Whaddayathink?

 
Average of ratings: -
Picture of Stuart Lamour
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

We used to have a very lovely tutor who used his moodle site as his cloud storage smile

He would turn up to a lecture, and unlike the other with their ppt on usb or some uni drive, would just open him moodle course and start the ppt from there.

I think it had a real advantage as the students knew where stuff was, and he would reference other stuff on the course site like readings, videos and discussions during the ppt. 

I'm sure i'll get a wrist slap for calling it 'blended learning' but it really did make the 'online' moodle course site a real part of the 'offline'.

So yeh, we knew about making prezi/ppt type things with html/css/js and it might be fun to have one in moodle.

Doesn't moodle just prefer to use repositories and integrate things like google docs/office 360 these days though?

 
Average of ratings: -
Matt Bury
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

Hi Stuart,

I think 3rd party services like Prezi, Slideshare, etc. are good for prototyping and/or quick 'n' dirty, ad hoc shows. But for resources that we intend to use over longer periods of time, where we want to ensure consistency and stability, I think using 3rd party services leaves too much out of our control. What if they change the ways they do business? What if they introduce intrusive or inappropriate advertising? Or what if we want to share or distribute resources for use in other Moodles or CMS' or LMS', as in OER, for example?

I think it's nice to be able to zip up a bunch of directories with collated resources that you can upload to your Moodle and display on a course in a couple of minutes.

Plus, some people have problems with setting up authentication to access 3rd party services. And what if a teacher leaves or changes the resources in her/his 3rd party service accounts?

Reveal.js actually does less than the Book resource module but it's quick and slick for slideshows and if it's used with pre-collated presentation packages, it could offer some advantages in terms of ease of use and cross platform portability.

It would allow resource designers and developers to use the authoring tools and IDEs that they're familiar with: create packages on their local machines then send them to Moodle.

It's easy to swap out CSS files to instantly change the styling of the slideshow, which is less prone to the kinds of bad layout designs we see with typical PPT slides: "car boot sale poster" style mixed fonts and text colours, dark text on dark backgrounds, jarring differences from one slide to the next for no apparent reason, etc.

I've tried it with various "exotic" media: HTML video and audio, SVG (inline and external files), animated SMIL SVG, iframes, etc. and it all seems to work well.

 
Average of ratings: -
Matt Bury
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

OK, I've gone and done it.

The Presentation resource module, beta version, is available at: https://github.com/matbury/mod_revealjs

Here's a demo: http://m2.matbury.com/course/view.php?id=7

There's no online presentation editor. TinyMCE and Moodle's file manager aren't really appropriate for this kind of thing. Content creators can author presentations locally on their machines (since it all works with native client side browser technologies) and then upload the files to moodledata/repository/revealjscontent/...

Please tell me what you think ;)

 
Average of ratings:Useful (6)
Picture of Stuart Lamour
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

crickey - your fast matt! and on a sunday too!

 
Average of ratings: -
Gareth J Barnard
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group DevelopersGroup Particularly helpful Moodlers

Hi Matt,

Very cool smile.  I had a look at the demo and the code and was intrigued as to how you created the tests.  Where did you get the information from or is it a matter of learn from existing implementations?

Also, I notice the manual use of 'moodledata' so thought that the plugin could use the same strategy as the 'folder' module in terms of having a 'folder' for each instance containing the presentation files.  I then looked at the 'folder' backup code and could not figure for the life of me how it worked in terms of storing the files contained within it - black art?

Cheers,

Gareth

 
Average of ratings: -
Matt Bury
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

Hi Gareth,

Thanks! The very cool part is by this guy who came up with reveal.js: https://github.com/hakimel - Credit where it's due smile

Tests? Not sure what you mean. Presentations, perhaps?

The moodledata workaround is to get away from Moodle file manager's rather difficult to manage path naming. Here's the rationale:

  • In order to create a presentation, you write an HTML fragment.
  • Each page/slide is contained within section tags, and nesting sections is possible for sub-pages.
  • Each of those sections may contain one or more media files and each media file requires a valid URL.
  • Content creators can use any text editor or IDE they like to create presentations and they can run and test them in a local mirror of moodledata/repository/revealjscontent/ which should include a copy of reveal.js with the same local directory structure.
  • This means that they can use Notepad++, Netbeans, Dreamweaver, or whatever their personal preference is for content authoring, check that it works in their browsers and then simply upload the directories and files with their favourite FTP client. Likewise for editing/updating.
  • Considering that one presentation alone may contain dozens or even a hundred or so media files, using Moodle's file manager and copying and pasting the links across to the HTML fragment would be a time-consuming and laborious task, to say the least.
  • Having the moodle/mod/revealjs/mod_form.php + locallib.php, moodle/mod/revealjs/view.php and moodle/mod/revealjs/content.php files use straightforward, consistent, and predictable URLs, based on the directory structure of Moodle and moodledata, means that the URLs in the HTML fragments can be kept consistent, and the presentations themselves are "context independent" and "context sensitive."
  • Therefore, presentations can simply be uploaded to any Moodle and "just work." i.e. the module provides consistent base URLs instead of the learning content files providing context specific ones that would break on another Moodle.
  • I envisage that moodledata/repository/revealjsconent/... will contain accumulated libraries of presentations that all editing users of that installation will be able to deploy from a dropdown list.
  • I've incorporated "namespace" directories in moodledata so that users can identify who and/or where the presentations came from.
  • Having FTP as the only way to upload content encourages Moodle admins to delegate the curation of presentations and content to a capable person or persons and so keep it logical and manageable for everyone. Hopefully, it'll also discourage the accumulation of ad-hoc presentations that only ever get used once or not at all - Those can be deployed by other means via Moodle's file manager and Book module, for example.
  • Having local versions of presentations in mirrored directories means editing and updating specific files in a presentation is possible and that those changes will be reflected across all instances on that Moodle (Particularly useful for swapping out media files, providing alternative media files for cross-platform compatibility, changing logos, and correcting typos).
  • Backup and restore is relatively easy: zip up and download moodledata/repository/revealjsconent/ or subdirectories of it as necessary, and use Moodle's backup and restore for the Presentation module instances.

If Hakim (reveal.js developer) or anyone else creates plugins for Wordpress and/or other CMS', presentations could be shared across those platforms too. Just using some of the principles of MVC and portability (IMS and SCORM) smile

 
Average of ratings: -
Gareth J Barnard
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group DevelopersGroup Particularly helpful Moodlers

Hi Matt,

Thank you for your lengthy response - a lot to digest smile.

By 'tests' I mean the code in the 'tests' folder (https://github.com/matbury/mod_revealjs/tree/master/revealjs/tests) smile.

I can sort of understand the reasons behind using 'moodledata' and on the flip side could envisage the expression on the faces of the users when saying the word 'ftp' - it would be total 'fear'!  So, therefore the question is really on the technical level of ability required to create the presentations in the first place.  If that is the same as using FTP then no problem.  However if there are authoring tools out there then another solution would need to be found.

When you said 'zip' I did think 'how about zipping up the folder' and extracting at the client end: http://stuk.github.io/jszip/ - but then that might be iffy for the embedded media URL's.  I know the file manger can be difficult, but I have managed (using Petr Skodak's code) to add font file serving with suitable fetch URL's to Moodle to get it from locations in themes and seen how the image file serving code can be employed with images stored in the file manager with the Grid format.  So might be a solution by examining that sort of thing.

Need to do a bit more thinking or improve in core the capability of the file manager.

Cheers,

Gareth

 
Average of ratings: -
Matt Bury
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

Hi Gareth,

Yes, I don't really envisage anyone but the more tech savvy actually creating and uploading content for this. Probably more a case of teachers, instructors, lecturers, content developers handing over documents, PPTs, etc. to a support person with (very) basic web design skills who can turn them into HTML presentations and upload them.

My SWF Activity Module works along similar lines and so I'm thinking of putting together some introductory courses to get people started on them.

Re: /tests/, I just copied the Page module and modified it. I couldn't find any documentation on that part and it didn't seem to interfere with anything so I left it in to look at it later. Can you point me towards any documentation for it? It'd be nice to have an overview of what it actually does from a user's point of view too.

 
Average of ratings: -
Gareth J Barnard
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group DevelopersGroup Particularly helpful Moodlers

Hi Matt,

Thanks smile

RE: tests - I was asking you!  I have no idea where the documentation is either, will have to do a search.

Cheers,

Gareth

 
Average of ratings: -
MD shot of me from his iphone4
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Moodle HQGroup Particularly helpful MoodlersGroup Testers

Hi guys,

the doc here mentions the location and its use pertaining to 'phpunit'. There are other usages with the tests directory explained here.

 
Average of ratings: -
Matt Bury
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

Thanks Aparup!

 
Average of ratings: -
Picture of Nadav Kavalerchik
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group DevelopersGroup Particularly helpful MoodlersGroup TestersGroup Translators

Matt,

How about creating a new TinyMCE button (plugin) that opens up Strut in a new window. Enabling the teacher create a presentation and when it's done... have the html content of the presentation be copied back into the TinyMCE editor. And saved.

Than, you can play it directly from the resource's html content.

Does it make sense?

 
Average of ratings: -
Matt Bury
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

Hi Nadav,

Yes, I thought about this option. It would be easier to store the presentations in database tables (I'm currently using file_get_contents() ) but that would also make authoring and testing presentations, as well as viewing them, dependent on Moodle. Users wouldn't be able to transport their presentations on a USB drive, plug it into a computer and open the presentation in a browser, as they currently do with PPT and Flash. In order to be a viable alternative to PPT and Flash, it must be capable of displaying under the same common usage conditions and situations. One big advantage that reveal.js has over PPT is that it doesn't require MS Office to be installed on the host computer... it'd be a shame to lose that.

Plus, TinyMCE is pretty "quirky" when it comes to HTML output. It's OK for Moodle pages more often than not but the inconsistencies (e.g. wrongly nested elements, conflicting styles, and broken CSS) would show up as glaring errors in something like a reveal.js HTML5/CSS/JS presentation.

BTW, Strut is for editing impress.js presentations, which are more like Prezi than PPT. There is an editor for reveal.js here: http://slid.es/ but it isn't open source. Could be a useful tool for learning to create presentations though.

 
Average of ratings: -
Picture of Nadav Kavalerchik
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group DevelopersGroup Particularly helpful MoodlersGroup TestersGroup Translators

How about using the "cloud" ... http://www.editey.com/ to create the presentation ?

And then use repository/google-drive to get the presentation.

 
Average of ratings: -
Matt Bury
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group Particularly helpful Moodlers

Hi Nadav,

Yes, content authors can use any 3rd party editor or service to create slideshows on editey, slid.es, etc. - whatever they prefer, although desktop editors and IDEs tend to be less buggy, more powerful, have more options available (e.g. search and replace), and there's fewer issues with converting presentations into something portable, i.e. on USB as I described earlier. Also, there's nothing to stop authors from hot-linking to media files anywhere on the web. The str_replace() function to build the paths to the File System directories ignores any absolute URLs.

A case in point for the portability issue, I've just come back from a Ph.D proposal presentation in a meeting room at the University of Toronto where there was no internet access available to the presenter (They didn't have the WiFi password for that building and the user account on the PC didn't allow internet access). Another case, at a SIG in the University of Guelph a week ago, the same thing happened at the meeting room there - no internet access.

I think it's really important for presentations to be able to run on minimal equipment with minimal resources, e.g. on a laptop screen with no internet for a small group of people sitting around a table, without having to resort to PowerPoint (which is what currently happens in most cases). A standalone version of reveal.js looks perfect for this and making the presentations portable between that and Moodle seems like a good solution to me.

Admittedly, the editing part looks pretty daunting to someone who's never written HTML before and it's easy to make mistakes. This is why I want to make it as open to 3rd party editors, including WYSIWYG, to make it less daunting.

 
Average of ratings:Useful (2)
Picture of Nadav Kavalerchik
Re: HTML5 + JavaScript + CSS presentations made easy - Anyone want to integrate it with Moodle?
Group DevelopersGroup Particularly helpful MoodlersGroup TestersGroup Translators

Thank you for your detailed suggestions smile

I do remember the time when internet connection was fluctuating... but now, it seems solid as electricity, at least in Israel, and so, I only use Google presentations off the "cloud". Google drive keeps getting better. I wonder when they add Impress.js to their presentation app.

 
Average of ratings: -