Tools or Resources to Ease the Development Process?

106 views
Skip to first unread message

Alexandre Enkerli

unread,
Dec 23, 2015, 10:13:05 AM12/23/15
to Developing Interactive Simulations in HTML5
Hello all!

Was told about PhET a few months ago by a physics teacher who gets really enthusiastic about it. Can see why, though my teaching topics aren’t among those covered by PhET sims.

As a technopedagogical advisor for a non-profit in Quebec, I’d like to help other teachers create their own sims. Problem is, I’m not really a coder. I’ve dabbled in code (C, PHP/MySQL, CSS, JavaScript…) and I can kind of follow the source code for PhET sims, but it does get a bit complicated for me. Getting the overall idea and could probably learn some of it by tweaking existing code, but it can be quite involved a process.

Was wondering if any of you had ideas about documentation or tools which can make this easier. For instance, have you tried things like Adobe Edge Animate (soon to be replaced by Adobe Animate CC) or Tumult’s Hype? Or have you encountered useful resources which can help someone build this type of HTML5 animations?
Was able to create some simple map-based animations in Hype or with SVG+CSS (hovering over a section of the map adds a shadow to that path…) and did read some sections of manuals about HTML5. But it’s still cumbersome.

So, any help would be deeply appreciated.

Thanks!

--
Alex Enkerli, Learning Technology Advisor
Vitrine technologie-éducation
http://www.vteducation.org/en

samrreid

unread,
Jan 6, 2016, 2:09:27 PM1/6/16
to Developing Interactive Simulations in HTML5
Greetings Alex,

We put most of our efforts into developing our HTML simulations with Javascript because it hits a sweet spot of reusability, scalability and fine-grained control.  I haven't looked too much into tools like Adobe Edge Animate or Tumult's Hype though.  We used Flash a long time ago and found that the parts that were non-code caused maintenance problems.

The closest thing we have to a manual is our development overview at http://bit.ly/phet-development-overview and an example simulation https://github.com/phetsims/example-sim

I have considered building our own "rapid prototyping" tools (drag and drop to create a UI), but our artists are very efficient with Adobe Illustrator for making artboards and artwork that will eventually be used in the coded simulation and any code that a rapid prototyping tool may need to be hand-tuned anyways, so we haven't put effort into that.

Great to hear from you and happy new year!
Sam
Reply all
Reply to author
Forward
0 new messages