[Sugar-devel] GSoC 2015: Interactive JavaScript Shell

[Tony Anderson]

Hi, Sam

At this point, I am not sure how jquery would help. At the moment I lean 
to making jsfiddler a link from the Browse Activity home page. That home 
page resides at /home/olpc/.library_pages as I recall. So adding this 
capability should not require any modification to Browse or to the Sugar 
build.

Could you walk Richa through the GitHub process? I have no experience 
with the GSOC and so don't know if they have a prescribed way to do this 
or not.

My goal is to encourage learning of web technology with level 1 being 
HTML and CSS and level 2, Javascript. The TurtleBlocks strategy does not 
seem to help achieve either of these objectives. I am concerned that 
SugarLabs and the community really has no model on how to move students 
from block programming to text programming. For example, Python has a 
'turtle' module which could be imported to a Python program. Maybe this 
is a transition technique. At any rate, the immediate focus is HTML.

My intent is to support the XO with the Browse Activity (Webkit). I 
realize the community is busy developing an HTML5 alternative to Python, 
but that seems a long way from realistic deployment. It also seems 
unnecessary for this project since all of these tools work in any 
browser.  Trying to adapt to a touch screen environment without a 
keyboard seems unconnected to the need to support the XO. It certainly 
could be a second generation project.

The sad reality is that the verision of Webkit installed in Browse 
doesn't really support responsive web techniques which we should want 
learners to know and use. It may be necessary to install FIrefox on the 
Gnome side to provide modern css tools.

I think your ideas on challenge based learning are on target. This is 
what I had in mind for the Web Confusion project. One that appears 
relevant is the
Wikiversity Web Design Challenges 
(https://en.wikiversity.org/wiki/Web_Design/Web_design_challenges). 
However, these projects appear beyond the immediate reach of our 
deployments. One reality is that few of our users have access to the 
internet and therefore have not been exposed to the range of web design 
techniques that we experience every day.

I am working on a course based on Pocket HTML 
(http://www.goer.org/HTML/) which is available via CC. At the javascript 
level, I think Eloquent Javascript would be a good base and is also CC.

Tony

On 03/10/2015 05:01 PM, Sam P. wrote:
> Hi Richa,
>
> As for hosting code, the convention is to start a GitHub project for 
> each activity - even those in the work in progress stage/.
>
> /
> I am confused by your choice to not use any libraries since the code 
> must be run offline.  It is 100% possible to download the jQuery 
> javascript and put it in a libs folder.  You can then use this instead 
> of using a CDN link.  Sugar web activities can have thousands of files 
> without making it harder for users to download and install.
> /
> /
> I think your current progress illustrates that there will not be 
> massive technical challenges in a jsfiddle like activity.  However, 
> there are going to be design challenges. Here are my ideas for what 
> you could peruse
>
> * Constructionist (exploration/play based) learning: TurtleBlocks 
> provides a good example of how we can put the 
> functions/things-to-be-memorized into a block palette and then it is 
> more accessible by users.  We could possibly create a palette of 
> HTML/CSS/JS templates/blocks for the users to drag into their code and 
> explore.  Please check out my mockup: https://wireframe.cc/1fA4dF
>
> * Challenge based learning:  Codeacadmey is a very good site, though 
> having seen how many people use it, it is very memorization based and 
> has no problems that require students to think and understand the 
> content they have learned (hence leading to better learning).  It 
> might be useful to look at how sites like GrokLearning 
> <https://groklearning.com/> use problems to enhance learning.  Maybe 
> we could seriously look at, how do we make a good course for people to 
> learn web tech?
>
> * Collaboration:  It would be awesome to integrate the activity with 
> sugar collab.  I would love to do real time coding with somebody else 
> :)  (This is obviously dependent on the collab being ported to JS, 
> another project in itself)
>
> * Getting it to work on a small screen.  Design challenge: could this 
> work on an XO or any other 7inch with keyboard device?  (Coding with 
> an OSK would be so hard... that's turtle territory :P)
>
> Thanks,
> Sam
>
> On Tue, Mar 10, 2015 at 5:43 PM Richa Sehgal 
> <richasehgal2908 at gmail.com <mailto:richasehgal2908 at gmail.com>> wrote:
>
>     Dear Tony,
>
>     I have created a light-weight version of jsfiddle which lets user
>     enters HTML, CSS and JavaScript code, and when the user clicks Run
>     method, the code is executed. Its a very basic prototype, with no
>     fancy design stuff, but I will create a great design for the
>     actual Activity that would be integrated in Sugar.
>     To enable the code to run in offline mode, I have used basic HTML
>     and JS primitives without jquery library and so on. So it should
>     be very easy to just download the file and open in any browser.
>     The code takes the HTML, CSS and JS input and inserts it in the
>     relevant HTML tags in the iframe DOM (like style, etc).
>     There are two files - jsfiddle-prototype.html and style.css. I am
>     not sure what the policies of this mailing lists are for sharing
>     files, so I would send these separately to you. Please let me know
>     otherwise.
>
>     I hope you like the prototype. Please send me your opinion and the
>     next steps in the project. I am really looking forward to have a
>     JS Shell Activity integrated in Sugar :)
>
>     Thanks a lot,
>     Richa
>
>     On Sun, Mar 8, 2015 at 11:44 PM, Tony Anderson
>     <tony_anderson at usa.net <mailto:tony_anderson at usa.net>> wrote:
>
>         Great, carry on!
>
>         Tony
>
>
>
>         On 03/09/2015 02:10 PM, Richa Sehgal wrote:
>
>             Dear Tony,
>
>             Thanks for replying back. I am glad to you have as my
>             mentor! Using the underlying JS course for testing is a
>             great idea. We can integrate that as a help tutorial -
>             depending upon the time available.
>
>             Currently I have started looking into the implementation
>             of jsfiddle and would report back about my learnings. I am
>             sure that there are other platforms too - I would look
>             into these too. I would make a prototype and share with
>             you the code. This way we can put our thinking hats
>             together and iterate over a concrete plan. I also have
>             some ideas that would make this tool more fun and engaging
>             to use, keeping in mind that the target audience is students.
>
>             Thanks a lot,
>             Richa
>
>
>     _______________________________________________
>     Sugar-devel mailing list
>     Sugar-devel at lists.sugarlabs.org
>     <mailto:Sugar-devel at lists.sugarlabs.org>
>     http://lists.sugarlabs.org/listinfo/sugar-devel
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sugarlabs.org/archive/sugar-devel/attachments/20150310/0429ec65/attachment.html>