Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-38902

Drawing animated illustrations as Scalable Vector Graphics in Moodle Book for EPUB 3 export

    XMLWordPrintable

    Details

    • Affected Branches:
      MOODLE_24_STABLE

      Description

      Summary: I hope this will encourage Moodle developers to work on adding SVG-edit with Sozi support to enable students and teachers to draw and make a more colourful, animated learning experience, one that can be shared with grandma in her ebook reader - thank you!

      Argument:

      Drawing is fun, beautiful illustrations can be used to clarify and enhance understanding, and comics and animated shorts are motivational to create, watch, and share, and it is educational to discuss art - both what is denoted and connotations or associations we get from interacting with it.

      Hattie's effect studies of what works in education lists these factors that have an effect size of .7 or greater since these are significant gains:

      • Student self-assessment/self-grading
      • Response to intervention
      • Teacher credibility *
      • Providing formative assessments *
      • Classroom discussion *
      • Teacher clarity *
      • Feedback *
      • Reciprocal teaching *
      • Teacher-student relationships fostered *
      • Spaced vs. mass practice

      I have added an extra star at the end of all the factors where a drawing could be the resource or activity in Moodle. Teachers and students use and create drawings in just about any subject.

      Drawing animated illustrations as Scalable Vector Graphics (SVG) on-line has become very easy, thanks to the efforts of Ahmad Syazwan, who added Sozi-animation frames to SVG-edit by Narendra Sisodiya and others. Sozi is an Inkscape extension created by Guillaume Savaton, which can be used off-line to created animated SVG-files. All major browsers - even mobile - support displaying SVG-illustrations.

      SVG-illustrations are crisp and clear at all zoom-levels, and Ahmad Syazwan's work will let you draw frames above objects in a drawing and then set animation length and method between the frames - like fast, slow etc.

      EPUB 3 is the open standard format for ebooks the publishing industry uses, think of it as HTML 5 domesticated or a web site in a box, adding structured navigation and universal accessibility. SVG is part of the EPUB 3 standard, because ebooks require responsive design or fixed design as childrens first device is a smartphone or tablet and then perhaps a PC. Lucimoo is a tool you can add to the Moodle Book module to import and export EPUB 3 ebooks. Giving the children or students the ability to draw animated illustrations within Moodle and then export these into EPUB 3 ebooks makes sense.

      To get students started, it is possible for teachers to add a library of SVG drawings to Moodle from http://openclipart.org/ .

      Resources:

      http://grantwiggins.wordpress.com/2012/01/07/what-works-in-education-hatties-list-of-the-greatest-effects-and-why-it-matters/

      EPUB 3 in and out of Moodle
      https://tracker.moodle.org/browse/MDL-37199

      Sheena Vaidyanathan - primary school art teacher in California
      http://www.digitalartforall.com/
      http://www.computersforcreativity.com/

      Inkscape comics tutorials - easy to add Sozi animation frames
      https://www.youtube.com/watch?v=8beB21L5Ke8
      https://www.youtube.com/watch?v=3M3LMAZSNog
      https://www.youtube.com/watch?v=NsAhjd94feU

      Sozi - how to use layers - shows how to add foreground and background layers to illustrate the words MORNING - NOON - EVENING - NIGHT (he starts by downloading a sample source file - this step is not necessary)
      https://www.youtube.com/watch?v=fgAmuvZE_mw

      Sozi - transition paths tutorial - shows how to use an arbitrarily drawn path as a transition between two frames.
      https://www.youtube.com/watch?v=qnDqsPVtjNQ

      Sozi presentations
      http://sozi.wikidot.com/presentations

      Sozi presentation about the Einstein telescope
      http://www.gwoptics.org/research/et/layout/ET_layout_02.svg

      Sozi presentation about a blueray project - nice zooming and pacing - click to move forward
      http://opendreambox.org/~fraxinas/bluray-authoring.svg

      Sozi tutorials on YouTube - see if you find one you like
      https://www.youtube.com/results?search_query=sozi+tutorial

      Sozi scientific example - the punch is at the very end - the "Thank you".
      https://www.youtube.com/watch?v=aABIgk_Lkkg

      Sozi experiment with embedded video - Environmental Psychology meets Gaming Lecture
      https://www.youtube.com/watch?v=grGFT3tVQQc

      Sozi source with some examples at Github - these must be high-lighted, copied and saved as SVG-files to be viewed.
      https://github.com/senshu/Sozi/tree/master/samples

      SVG-edit
      http://code.google.com/p/svg-edit/

      SVG-edit demo
      http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html

      Adding Sozi to SVG-edit
      https://github.com/asyazwan/ext-sozi
      http://asyazwan.github.com/ext-sozi/ext-sozi-guide.png

      SVG-edit with Sozi demo - draw a few objects, then click Sozi-button to add frames - expand layer view on right hand side of the screen, save to disk, open and view animated illustration in browser, e.g. Firefox.
      http://asyazwan.github.com/ext-sozi/editor/

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              moodle.com moodle.com
              Reporter:
              haakonme Haakon Meland Eriksen
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
              Votes:
              3 Vote for this issue
              Watchers:
              5 Start watching this issue

                Dates

                Created:
                Updated: