<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
Hi, Sam <br>
<br>
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.<br>
<br>
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.<br>
<br>
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.<br>
<br>
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. <br>
<br>
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.<br>
<br>
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 <br>
Wikiversity Web Design Challenges
(<a class="moz-txt-link-freetext" href="https://en.wikiversity.org/wiki/Web_Design/Web_design_challenges">https://en.wikiversity.org/wiki/Web_Design/Web_design_challenges</a>).
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.<br>
<br>
I am working on a course based on Pocket HTML
(<a class="moz-txt-link-freetext" href="http://www.goer.org/HTML/">http://www.goer.org/HTML/</a>) which is available via CC. At the
javascript level, I think Eloquent Javascript would be a good base
and is also CC.<br>
<br>
Tony<br>
<br>
<div class="moz-cite-prefix">On 03/10/2015 05:01 PM, Sam P. wrote:<br>
</div>
<blockquote
cite="mid:CACVKbrV=c5bm3o-D69rL5Y0_+=Sp3wPm6ozyQpSyMJO29hL9sA@mail.gmail.com"
type="cite">
<div dir="ltr">
<div>
<div>Hi Richa,<br>
<br>
</div>
As for hosting code, the convention is to start a GitHub
project for each activity - even those in the work in progress
stage<i>.<br>
<br>
</i></div>
<div>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.<br>
</div>
<div><i><br>
</i></div>
<div>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<br>
<br>
* 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: <a
moz-do-not-send="true" href="https://wireframe.cc/1fA4dF">https://wireframe.cc/1fA4dF</a><br>
</div>
<div><br>
</div>
<div>* 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 <<a moz-do-not-send="true"
href="https://groklearning.com/">https://groklearning.com/</a>>
use problems to enhance learning. Maybe we could seriously
look at, how do we make a good course for people to learn web
tech?<br>
<br>
</div>
<div>* 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)<br>
<br>
</div>
<div>* 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)<br>
</div>
<div><br>
</div>
<div>Thanks,<br>
</div>
<div>Sam<br>
</div>
<br>
<div class="gmail_quote">On Tue, Mar 10, 2015 at 5:43 PM Richa
Sehgal <<a moz-do-not-send="true"
href="mailto:richasehgal2908@gmail.com" target="_blank">richasehgal2908@gmail.com</a>>
wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0
.8ex;border-left:1px #ccc solid;padding-left:1ex">
<div dir="ltr">Dear Tony,<br>
<br>
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.<br>
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).<br>
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.<br>
<br>
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 :)<br>
<br>
Thanks a lot,<br>
Richa</div>
<div class="gmail_extra"><br>
<div class="gmail_quote">On Sun, Mar 8, 2015 at 11:44 PM,
Tony Anderson <span dir="ltr"><<a
moz-do-not-send="true"
href="mailto:tony_anderson@usa.net" target="_blank">tony_anderson@usa.net</a>></span>
wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0
.8ex;border-left:1px #ccc solid;padding-left:1ex">Great,
carry on!<span><font color="#888888"><br>
<br>
Tony</font></span></blockquote>
</div>
</div>
<div class="gmail_extra">
<div class="gmail_quote">
<blockquote class="gmail_quote" style="margin:0 0 0
.8ex;border-left:1px #ccc solid;padding-left:1ex">
<div>
<div><br>
<br>
On 03/09/2015 02:10 PM, Richa Sehgal wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0
0 .8ex;border-left:1px #ccc
solid;padding-left:1ex">
Dear Tony,<br>
<br>
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.<br>
<br>
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.<br>
<br>
Thanks a lot,<br>
Richa<br>
</blockquote>
<br>
</div>
</div>
</blockquote>
</div>
</div>
_______________________________________________<br>
Sugar-devel mailing list<br>
<a moz-do-not-send="true"
href="mailto:Sugar-devel@lists.sugarlabs.org"
target="_blank">Sugar-devel@lists.sugarlabs.org</a><br>
<a moz-do-not-send="true"
href="http://lists.sugarlabs.org/listinfo/sugar-devel"
target="_blank">http://lists.sugarlabs.org/listinfo/sugar-devel</a><br>
</blockquote>
</div>
</div>
</blockquote>
<br>
</body>
</html>