Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
Dear Tony, Yes, it was very interesting to do that logout to personal email id challenge. It was good to see my email id on the screen! And I didn't know Purdue established the world's first CS Department - I knew it was old, but didn't know it was the oldest :) Regarding the proposal, the Sugar Labs GSoC template has a question: *If your project is successfully completed, what will its impact be on the Sugar Labs community? Give 3 answers, each 1-3 paragraphs in length. The first one should be yours. The other two should be answers from members of the Sugar Labs community, at least one of whom should be a Sugar Labs GSoC mentor. Provide email contact information for non-GSoC mentors.* I have already written mine in the proposal on Google Melange. One I believe you would write. Can you please suggest the third person whom I should reach out? Thanks Richa On Wed, Mar 18, 2015 at 10:00 PM, Tony Anderson tony_ander...@usa.net wrote: Hi, Superb! I was interested in the challenge to replace the logout in the xo menu, they must have access to a new version! I suspect you visit the Computer Science Department there. Back in the day, the building was much smaller. However, the faculty required the university to build the new building around their old one. While, you are at a premier department - rival Purdue established the world's first computer science department. Back in the vacuum tube era, Univac rented classrooms at Purdue for customer training. Purdue asked that their faculty attend on a space-available basis which led to creating a department. Tony On 03/19/2015 11:26 AM, Richa Sehgal wrote: Dear mentors, I have submitted my proposal on official GSoC site - Google Melange. It would be good to have feedback from all the mentors so that I can improve upon it and submit a great proposal for the final evaluation by the Sugar community. Thanks a lot for all your guidance and support, Richa Sehgal ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
Hi, Superb! I was interested in the challenge to replace the logout in the xo menu, they must have access to a new version! I suspect you visit the Computer Science Department there. Back in the day, the building was much smaller. However, the faculty required the university to build the new building around their old one. While, you are at a premier department - rival Purdue established the world's first computer science department. Back in the vacuum tube era, Univac rented classrooms at Purdue for customer training. Purdue asked that their faculty attend on a space-available basis which led to creating a department. Tony On 03/19/2015 11:26 AM, Richa Sehgal wrote: Dear mentors, I have submitted my proposal on official GSoC site - Google Melange. It would be good to have feedback from all the mentors so that I can improve upon it and submit a great proposal for the final evaluation by the Sugar community. Thanks a lot for all your guidance and support, Richa Sehgal ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
Dear mentors,
I have submitted my proposal on official GSoC site - Google Melange. It
would be good to have feedback from all the mentors so that I can improve
upon it and submit a great proposal for the final evaluation by the Sugar
community.
Thanks a lot for all your guidance and support,
Richa Sehgal
On Sat, Mar 14, 2015 at 7:43 PM, Tony Anderson tony_ander...@usa.net
wrote:
Hi, Sebastian
You must remember that I am an old curmudgeon. For me, simplicity was
programming in assembler as opposed to typing in octal code. I entered a
more complex world with Fortran and Cobol, simplified by Basic. Programs
for the IBM 1401 started at position 333 since the only operating system
was a load button and the only debugging tool was a button that dumped
memory contents to a printer. Every program we wrote was complete. Today,
there are few programmers who have ever written anything more complicated
that 'Hello World' as a complete program. Today, virtually all programming
is 'own code' to a pre-existing program. I think that the phrase 'own code'
is now part of a curmudgeon's history - in the day it meant a subroutine
written to be used in an existing program.
My main concern with full IDEs is that the user may not be able to write a
real program to execute in a real environment. On the other hand, the
beginning programmer shouldn't get bogged down in boilerplate. The
programming languages have essentially no boilerplate (shebang?). It is a
web page that requires a fixed skeleton. However, Richa's solution hides
that from the user. It can't be completely hidden since the learner needs
to know how to build a web page independently of the tool. This is covered
by the Pocket HTML lessons.
The Explore section of the School Server content is organized in the form
of a course with units and lessons. Amazingly, it now includes not one, not
two, but three programming languages: Python, Javascript, and Shell
Scripting. Javascript is intended to build on a knowledge of HTML and CSS
although the text, Eloquent Javascript actually introduces Javascript as a
programming language and connects it to the web only in the second part
(the third introduces node.js). Incidentally, the course based on Eloquent
Javascript provides a 'take no mercy' approach to introducing all of these
essential programming concepts. I am sure it would not be available to our
students without Richa's tool. Anyone who fully understands the concepts in
this text is 'good to go' at any level of programming.
The first prerequisite course, introduces the Terminal Activity, the file
system, and the nano text editor. With this basis, the learner has a basis
for saving programs and web pages as files and executing them from the
command line (or displaying in the Browse activity with file:// and a
path. The courses Terminal 1 and Terminal 2 (from William Shotts -
http://linuxcommand.org/tlcl.php) continues into more on the shell and
writing shell scripts.
My curmudgeon past also included putting the programs from David Ahl's
Basic Computer Games (http://atariarchives.org/basicgames/) on a
Commodore 64.
The first Python course from Al Sweigart's Invent Your Own Computer Games
With Python (http://inventwithpython.com/) shows how to program similar
text games in Python. The second Python course from Al Sweigart's Hacking
Secret Ciphers With Python is also introductory and text-based but in the
domain of cryptography. The
third course also based on a book by Al Sweigart, Making Games with Python
and Pygame, depends on the material covered in the first two courses.
WIth regard to the proposed fourth Python course, you are right on target.
However, the introduction to Pygame does not relate it to objects. An
important goal to this course is to develop understanding of these
essential programming concepts: programming to an event-driven environment
and organizing a large program to be understood for ease of maintenance and
debugging. An important corollary is learning to read programs written by
others.
I think that Hello World is a good starting point since the learners will
have already built Hello World as a standalone program. This allows the
discussion to focus on what is required to run it as a Sugar Activity. For
example, despite the complex folder that is the HelloWorld activity,
everything is boilerplate except the 'activity.info' and 'activity.svg'
files. The 'HelloWorld' Python program is in activity.py file. There the
actual label('Hello World') is one line as print 'Hello World!' is in the
original. This presents the opportunity to explain the rest of the file in
the Sugar context. This also gives a good incentive for the learner to
convert the Toolbar code to a module
The BlockParty activity has been a favorite (I like Tetris), but it
demonstrates a technique to build the activiity as a standalone executable
file (__main__) and yet have it called by the framework in the
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
Hi, Sebastian
You must remember that I am an old curmudgeon. For me, simplicity was
programming in assembler as opposed to typing in octal code. I entered a
more complex world with Fortran and Cobol, simplified by Basic. Programs
for the IBM 1401 started at position 333 since the only operating system
was a load button and the only debugging tool was a button that dumped
memory contents to a printer. Every program we wrote was complete.
Today, there are few programmers who have ever written anything more
complicated that 'Hello World' as a complete program. Today, virtually
all programming is 'own code' to a pre-existing program. I think that
the phrase 'own code' is now part of a curmudgeon's history - in the day
it meant a subroutine written to be used in an existing program.
My main concern with full IDEs is that the user may not be able to write
a real program to execute in a real environment. On the other hand, the
beginning programmer shouldn't get bogged down in boilerplate. The
programming languages have essentially no boilerplate (shebang?). It is
a web page that requires a fixed skeleton. However, Richa's solution
hides that from the user. It can't be completely hidden since the
learner needs to know how to build a web page independently of the tool.
This is covered by the Pocket HTML lessons.
The Explore section of the School Server content is organized in the
form of a course with units and lessons. Amazingly, it now includes not
one, not two, but three programming languages: Python, Javascript, and
Shell Scripting. Javascript is intended to build on a knowledge of HTML
and CSS although the text, Eloquent Javascript actually introduces
Javascript as a programming language and connects it to the web only in
the second part (the third introduces node.js). Incidentally, the course
based on Eloquent Javascript provides a 'take no mercy' approach to
introducing all of these essential programming concepts. I am sure it
would not be available to our students without Richa's tool. Anyone who
fully understands the concepts in this text is 'good to go' at any level
of programming.
The first prerequisite course, introduces the Terminal Activity, the
file system, and the nano text editor. With this basis, the learner has
a basis for saving programs and web pages as files and executing them
from the command line (or displaying in the Browse activity with file://
and a path. The courses Terminal 1 and Terminal 2 (from William Shotts -
http://linuxcommand.org/tlcl.php) continues into more on the shell and
writing shell scripts.
My curmudgeon past also included putting the programs from David Ahl's
Basic Computer Games (http://atariarchives.org/basicgames/) on a
Commodore 64.
The first Python course from Al Sweigart's Invent Your Own Computer
Games With Python (http://inventwithpython.com/) shows how to program
similar text games in Python. The second Python course from Al
Sweigart's Hacking Secret Ciphers With Python is also introductory and
text-based but in the domain of cryptography. The
third course also based on a book by Al Sweigart, Making Games with
Python and Pygame, depends on the material covered in the first two
courses.
WIth regard to the proposed fourth Python course, you are right on
target. However, the introduction to Pygame does not relate it to
objects. An important goal to this course is to develop understanding of
these essential programming concepts: programming to an event-driven
environment and organizing a large program to be understood for ease of
maintenance and debugging. An important corollary is learning to read
programs written by others.
I think that Hello World is a good starting point since the learners
will have already built Hello World as a standalone program. This allows
the discussion to focus on what is required to run it as a Sugar
Activity. For example, despite the complex folder that is the HelloWorld
activity, everything is boilerplate except the 'activity.info' and
'activity.svg' files. The 'HelloWorld' Python program is in activity.py
file. There the actual label('Hello World') is one line as print 'Hello
World!' is in the original. This presents the opportunity to explain the
rest of the file in the Sugar context. This also gives a good incentive
for the learner to convert the Toolbar code to a module
The BlockParty activity has been a favorite (I like Tetris), but it
demonstrates a technique to build the activiity as a standalone
executable file (__main__) and yet have it called by the framework in
the Sugar context. This, of course, is a valuable capability of Python.
This can motivate the learner to learn how to make the Python programs
from Swegart's texts into Sugar activities.
One unavoidable boilerplate issue in this course is the difference
between sugar and sugar3. Given the direction of later Sugar builds,
this topic is inevitable. The course will also have to cover
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
I find this discussion very interesting. It is hard for me not to think of a full IDE like creature when thinking of the jsfiddle tool. Perhaps I'm failing to see exactly the point or the inteded Use Case. On my side, as a self-taught-as-a-child programmer, I appreciate abstraction layers very much because they allow me to think of the actual thing I want to implement. What I do not appreciate is boilerplate code. To really understand Hello World activity, you must understand some basic concepts of Object Orientation, the notion of what is GTK, event-driven programming, etc. Even Hello Web carries a lot of boilerplate with it. In my humble opinion it's not so bad when the boilerplate code is not seen (i.e. part of the toolchain, or at least, in a template). Perhaps we've exhausted the discussion and it will come to a matter of the design chosen by the implementors for its first iteration. Perhaps it's a good time to remember our core design ideas: Simplicity, Collaboration, Reflection, and try to apply them to this design. Sounds like a fun project. Regards, Sebastian El 11/03/15 a las 00:34, Richa Sehgal escibió: Hi, Regarding inclusion of libraries such as Jquery, maybe we can let students create templates which we can save in their web folders. The objective is the following: As Tony mentioned, providing them with templates might not make them learn the basics, but essential parts of programming. For example, in my initial days of coding, I used Eclipse which started a new file in a nice template. During my first exam, I realized that I have forgotten the signature of the function main (the arguments type and number of arguments). Since then, for any new language that I pick up, I start from scratch. So what we can do is that students can create templates for shortcuts, but at least they would have some hands-on experience. This can then serve like what Sebastian mentions. As for the performance, after we develop the tool, we can do a performance benchmark and publish the numbers for different libraries, and CSS functionalities. These numbers can also be used by other developers as the basis for their algorithms, and we can see how to improve on them and also study how they change as XO and Sugar evolves. Thanks Richa On Tue, Mar 10, 2015 at 5:05 PM, Tony Anderson tony_ander...@usa.net mailto:tony_ander...@usa.net wrote: Hi, Sebastian I am using Zim Desktop Wiki to reformat the book into digestible lessons (actually done). This makes it all html. My plan is to put this on the school server so that a student can download a chapter to view locally while working on it. I added a button to the Browse toolbar that displays a Journal object chooser and then displays the selected Journal object - a zip file which contains the web site in a compressed folder. I also provide a prerequisite course introducting the Terminal Activity and the nano editor. The model is that students would have a directory in /home/olpc/Documents named web. This directory would be used to hold thier web pages. At some point when they learn about links, they can set up a main page with links to the others. All of this is accessible from the Browse activity by file:///home/olpc/Documents/web/index.html. The student should learn to add jquery by reference in the head of their web page. The actual js files can be downloaded from the school server (or installed with Sugar by usb stick). One problem with ide approaches is that it hides some of what we are trying to have the students learn. For example, I seriously considered using pippy to teach Python, but concluded that it would hide how to save Python programs, how to make them executable, and how to share them. In a course on making Sugar Activities, pippy can actually export the python code in a Sugar Activity wrapper, but what does the student learn about the construction of a Sugar Activity from that? I would rather they begin with the HelloWorld Activity. I have used a localhost for years with no problem. Since switching from Firefox to Webkit, I haven't been using it but primarily because I haven't tried to implement the features that required it. I am not sure it will be relevant at the intial web level. In any case, jquery did not cause any performance problems on an XO1. As regards Webkit, my concern is that in the Browse Activity it does not seem to support flexible boxes, the modern way to do web layout, and in many ways the key to reponsive web design. Tony On 03/10/2015 10:11 PM, Sebastian Silva wrote: El 10/03/15 a las 04:58, Tony Anderson escibió: 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
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
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 richasehgal2...@gmail.com mailto:richasehgal2...@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
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
El 10/03/15 a las 04:58, Tony Anderson escibió: 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. Hi Tony, This is wonderful. I have had my eye on that tutorial ever since I started to think about Web activities a long time ago. My first attempt at a Web Activity was called WebSDK and was an IDE for doing web apps [1]. Those were old-style web apps, the ones that had a Python mini-server running in the background. I still consider this a good approach to access Python infrastructure from Javascript, but I'm not sure how (or if) the new Web API infrastructure has replaced this mechanism. I think, in any case, for a GSOC student working on dev tools for JS on Sugar, should consider the entire IDE scenario, not just the fiddle part. I.e. it should be possible to deploy a mini app (or content!) from this activity. About embedding JQuery and other libraries, I would favor a Wizard approach. I.E. a form that will allow you to have a basic project from a template (w/ or without optional toys such as Jquery). I like the hand-holding approach especially since low performance machines can't do multi-tasking very well (so looking up docs is not easy). Therefore a version of the JS tutorial that Tony referenced would be great to have embedded, IMHO, or included somehow. (Tony do you have an offline copy?) In order to avoid slow pages on older machines, including XO, it should be super lightweight, i.e. utilizing as little CSS3, transformations, transparency, SVG rendering, and animation as possible. At least a couple of templates should be able to run on the XO1 without issues. Hopefully some profiling feedback would be shown inline during development (such as at least load time for the fiddle). Also, there are wrappers for web activities for versions of Sugar that don't include the Web Activities framework. Maybe include those as options in the templates. Finally, a good editor goes a long way for a good development environment (I used Ace editor component and it ran well on XO1, back in the day). The way I think of this is that you should be able to develop something relatively basic without resorting to the Internet either for sensible libraries or their respective documentation. If done really well, perhaps we could even offer an alternative to Pippy and Develop? Finally, I don't think the Webkit or even old Firefox rendering engine are a severe limitation. It's not worse than targetting Internet Explorer 6 and most web developers had to do that only a couple of years ago. I suggest you download Firefox 3.6 (from like 10 years ago) as that is the rendering engine found on Sugar 0.94 and limit yourself by what it can do. I havben't looked for a reference browser for the Webkit1 engines, except Browse itself. It would be good to find out what our current engine equivalent is and document it (along with more contributions) to http://developer.sugarlabs.org/ Regards and good luck. [1] http://somosazucar.org/files/2011/07/WebSDK1.png http://somosazucar.org/files/2011/07/WebSDK2.png ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
Hi, Regarding inclusion of libraries such as Jquery, maybe we can let students create templates which we can save in their web folders. The objective is the following: As Tony mentioned, providing them with templates might not make them learn the basics, but essential parts of programming. For example, in my initial days of coding, I used Eclipse which started a new file in a nice template. During my first exam, I realized that I have forgotten the signature of the function main (the arguments type and number of arguments). Since then, for any new language that I pick up, I start from scratch. So what we can do is that students can create templates for shortcuts, but at least they would have some hands-on experience. This can then serve like what Sebastian mentions. As for the performance, after we develop the tool, we can do a performance benchmark and publish the numbers for different libraries, and CSS functionalities. These numbers can also be used by other developers as the basis for their algorithms, and we can see how to improve on them and also study how they change as XO and Sugar evolves. Thanks Richa On Tue, Mar 10, 2015 at 5:05 PM, Tony Anderson tony_ander...@usa.net wrote: Hi, Sebastian I am using Zim Desktop Wiki to reformat the book into digestible lessons (actually done). This makes it all html. My plan is to put this on the school server so that a student can download a chapter to view locally while working on it. I added a button to the Browse toolbar that displays a Journal object chooser and then displays the selected Journal object - a zip file which contains the web site in a compressed folder. I also provide a prerequisite course introducting the Terminal Activity and the nano editor. The model is that students would have a directory in /home/olpc/Documents named web. This directory would be used to hold thier web pages. At some point when they learn about links, they can set up a main page with links to the others. All of this is accessible from the Browse activity by file:///home/olpc/Documents/web/index.html. The student should learn to add jquery by reference in the head of their web page. The actual js files can be downloaded from the school server (or installed with Sugar by usb stick). One problem with ide approaches is that it hides some of what we are trying to have the students learn. For example, I seriously considered using pippy to teach Python, but concluded that it would hide how to save Python programs, how to make them executable, and how to share them. In a course on making Sugar Activities, pippy can actually export the python code in a Sugar Activity wrapper, but what does the student learn about the construction of a Sugar Activity from that? I would rather they begin with the HelloWorld Activity. I have used a localhost for years with no problem. Since switching from Firefox to Webkit, I haven't been using it but primarily because I haven't tried to implement the features that required it. I am not sure it will be relevant at the intial web level. In any case, jquery did not cause any performance problems on an XO1. As regards Webkit, my concern is that in the Browse Activity it does not seem to support flexible boxes, the modern way to do web layout, and in many ways the key to reponsive web design. Tony On 03/10/2015 10:11 PM, Sebastian Silva wrote: El 10/03/15 a las 04:58, Tony Anderson escibió: 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. Hi Tony, This is wonderful. I have had my eye on that tutorial ever since I started to think about Web activities a long time ago. My first attempt at a Web Activity was called WebSDK and was an IDE for doing web apps [1]. Those were old-style web apps, the ones that had a Python mini-server running in the background. I still consider this a good approach to access Python infrastructure from Javascript, but I'm not sure how (or if) the new Web API infrastructure has replaced this mechanism. I think, in any case, for a GSOC student working on dev tools for JS on Sugar, should consider the entire IDE scenario, not just the fiddle part. I.e. it should be possible to deploy a mini app (or content!) from this activity. About embedding JQuery and other libraries, I would favor a Wizard approach. I.E. a form that will allow you to have a basic project from a template (w/ or without optional toys such as Jquery). I like the hand-holding approach especially since low performance machines can't do multi-tasking very well (so looking up docs is not easy). Therefore a version of the JS tutorial that Tony referenced would be great to have embedded, IMHO, or included somehow. (Tony do you have an offline copy?) In order to avoid slow pages on older machines, including XO, it should be super lightweight, i.e.
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
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_ander...@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@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
Great! I suspect the files are small enough to send by attachment to an email. I am sure as we move into this there will be more 'official' ways to do this. Packaging is something I haven't given much thought to. My guess is that we should package it for the XO as a Sugar Activity, although a reasonable alternative is to put it in a special place such as /home/olpc/Documents/jsplayer and let the user launch it in the browser by file:///home/olpc/Documents/jsplayer/. It could also be packaged as a 'plugin' to the Browse activity. For deployments with a local server, it could be something like http://schoolserver/jsplayer. Tony On 03/10/2015 02:43 PM, Richa Sehgal 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_ander...@usa.net mailto:tony_ander...@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@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
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 richasehgal2...@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_ander...@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@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
Hi, Sebastian I am using Zim Desktop Wiki to reformat the book into digestible lessons (actually done). This makes it all html. My plan is to put this on the school server so that a student can download a chapter to view locally while working on it. I added a button to the Browse toolbar that displays a Journal object chooser and then displays the selected Journal object - a zip file which contains the web site in a compressed folder. I also provide a prerequisite course introducting the Terminal Activity and the nano editor. The model is that students would have a directory in /home/olpc/Documents named web. This directory would be used to hold thier web pages. At some point when they learn about links, they can set up a main page with links to the others. All of this is accessible from the Browse activity by file:///home/olpc/Documents/web/index.html. The student should learn to add jquery by reference in the head of their web page. The actual js files can be downloaded from the school server (or installed with Sugar by usb stick). One problem with ide approaches is that it hides some of what we are trying to have the students learn. For example, I seriously considered using pippy to teach Python, but concluded that it would hide how to save Python programs, how to make them executable, and how to share them. In a course on making Sugar Activities, pippy can actually export the python code in a Sugar Activity wrapper, but what does the student learn about the construction of a Sugar Activity from that? I would rather they begin with the HelloWorld Activity. I have used a localhost for years with no problem. Since switching from Firefox to Webkit, I haven't been using it but primarily because I haven't tried to implement the features that required it. I am not sure it will be relevant at the intial web level. In any case, jquery did not cause any performance problems on an XO1. As regards Webkit, my concern is that in the Browse Activity it does not seem to support flexible boxes, the modern way to do web layout, and in many ways the key to reponsive web design. Tony On 03/10/2015 10:11 PM, Sebastian Silva wrote: El 10/03/15 a las 04:58, Tony Anderson escibió: 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. Hi Tony, This is wonderful. I have had my eye on that tutorial ever since I started to think about Web activities a long time ago. My first attempt at a Web Activity was called WebSDK and was an IDE for doing web apps [1]. Those were old-style web apps, the ones that had a Python mini-server running in the background. I still consider this a good approach to access Python infrastructure from Javascript, but I'm not sure how (or if) the new Web API infrastructure has replaced this mechanism. I think, in any case, for a GSOC student working on dev tools for JS on Sugar, should consider the entire IDE scenario, not just the fiddle part. I.e. it should be possible to deploy a mini app (or content!) from this activity. About embedding JQuery and other libraries, I would favor a Wizard approach. I.E. a form that will allow you to have a basic project from a template (w/ or without optional toys such as Jquery). I like the hand-holding approach especially since low performance machines can't do multi-tasking very well (so looking up docs is not easy). Therefore a version of the JS tutorial that Tony referenced would be great to have embedded, IMHO, or included somehow. (Tony do you have an offline copy?) In order to avoid slow pages on older machines, including XO, it should be super lightweight, i.e. utilizing as little CSS3, transformations, transparency, SVG rendering, and animation as possible. At least a couple of templates should be able to run on the XO1 without issues. Hopefully some profiling feedback would be shown inline during development (such as at least load time for the fiddle). Also, there are wrappers for web activities for versions of Sugar that don't include the Web Activities framework. Maybe include those as options in the templates. Finally, a good editor goes a long way for a good development environment (I used Ace editor component and it ran well on XO1, back in the day). The way I think of this is that you should be able to develop something relatively basic without resorting to the Internet either for sensible libraries or their respective documentation. If done really well, perhaps we could even offer an alternative to Pippy and Develop? Finally, I don't think the Webkit or even old Firefox rendering engine are a severe limitation. It's not worse than targetting Internet Explorer 6 and most web developers had to do that only a couple of years ago. I suggest you download Firefox 3.6 (from like 10 years ago) as that is the rendering engine found on Sugar 0.94 and limit yourself by what it
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
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 On Sun, Mar 8, 2015 at 5:32 PM, Tony Anderson tony_ander...@usa.net wrote: Hi, At the moment I am the mentor in mentors. Your understanding of the project matches mine. One thing we need to be careful about is fair use of the materials such as jsfiddle and and Code Academy. These sites do permit them to be used online, but do not authorize rehosting on a local server or redistributing to others. Fair use, as far as I know, permits implementing a capability like jsfiddle independently and creating a javascript course that covers the same topics as Code Academy. Fortunately there are a number of free Javascript courses on the internet which could be used as a starting point. Recent versions of Sugar have a Browse Activity which is based on Webkit. Whatever we do should work in that environment. Your focus should be on the interactive js tool. The underlying javascript course could be used primarily to test the capabilities of the tool to handle those features. Tony On 03/09/2015 03:30 AM, Richa Sehgal wrote: Dear Mentors, I am currently pursuing Master's in University of Illinois at Urbana Champaign, USA and completed by B.Tech from Indian Institute of Technology - Delhi (IIT- Delhi). I went through the various awesome projects and I really liked “Interactive JavaScript Shell”. To get some background, I installed the developer version of Sugar on my VirtualBox based Ubuntu VM. It is really a powerful tool to spark interest in learning in students. I played with Turtle Blocks, and also installed various activities. The Jump activity really brought back some childhood memories! Coming to the Interactive JavaScript Shell project, I would like to discuss some ideas with the community. There are various tools like jsfiddle that can run JS on the fly. There is also an awesome tutorial on JS: on code academy, that teaches JS from scratch. I looked into it and basically what they do is teach some concepts like loops and functions, and give interesting problems for students to solve and run it. They start with “enter your name”, and display it and then slowly proceed with the steps. We can discuss and see what features we want to implement in our own tool. Having it run offline is very important as Sugar Learning Platform is used by many students who do not have access to internet. This is not a problem. The platform already has a browser integrated, and it doesn’t care about offline mode if the html/JS is available locally. So we can just store copies of libraries like jquery, etc locally. I would like to discuss more specifically about this so that I can scope my proposal in a better way, and develop the timeline accordingly. It would be great if the mentors can guide me in this regard. Thanks Richa Sehgal ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
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@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
[Sugar-devel] GSoC 2015: Interactive JavaScript Shell
Dear Mentors, I am currently pursuing Master's in University of Illinois at Urbana Champaign, USA and completed by B.Tech from Indian Institute of Technology - Delhi (IIT- Delhi). I went through the various awesome projects and I really liked “Interactive JavaScript Shell”. To get some background, I installed the developer version of Sugar on my VirtualBox based Ubuntu VM. It is really a powerful tool to spark interest in learning in students. I played with Turtle Blocks, and also installed various activities. The Jump activity really brought back some childhood memories! Coming to the Interactive JavaScript Shell project, I would like to discuss some ideas with the community. There are various tools like jsfiddle that can run JS on the fly. There is also an awesome tutorial on JS: on code academy, that teaches JS from scratch. I looked into it and basically what they do is teach some concepts like loops and functions, and give interesting problems for students to solve and run it. They start with “enter your name”, and display it and then slowly proceed with the steps. We can discuss and see what features we want to implement in our own tool. Having it run offline is very important as Sugar Learning Platform is used by many students who do not have access to internet. This is not a problem. The platform already has a browser integrated, and it doesn’t care about offline mode if the html/JS is available locally. So we can just store copies of libraries like jquery, etc locally. I would like to discuss more specifically about this so that I can scope my proposal in a better way, and develop the timeline accordingly. It would be great if the mentors can guide me in this regard. Thanks Richa Sehgal ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] GSoC 2015: Interactive JavaScript Shell
Hi, At the moment I am the mentor in mentors. Your understanding of the project matches mine. One thing we need to be careful about is fair use of the materials such as jsfiddle and and Code Academy. These sites do permit them to be used online, but do not authorize rehosting on a local server or redistributing to others. Fair use, as far as I know, permits implementing a capability like jsfiddle independently and creating a javascript course that covers the same topics as Code Academy. Fortunately there are a number of free Javascript courses on the internet which could be used as a starting point. Recent versions of Sugar have a Browse Activity which is based on Webkit. Whatever we do should work in that environment. Your focus should be on the interactive js tool. The underlying javascript course could be used primarily to test the capabilities of the tool to handle those features. Tony On 03/09/2015 03:30 AM, Richa Sehgal wrote: Dear Mentors, I am currently pursuing Master's in University of Illinois at Urbana Champaign, USA and completed by B.Tech from Indian Institute of Technology - Delhi (IIT- Delhi). I went through the various awesome projects and I really liked “Interactive JavaScript Shell”. To get some background, I installed the developer version of Sugar on my VirtualBox based Ubuntu VM. It is really a powerful tool to spark interest in learning in students. I played with Turtle Blocks, and also installed various activities. The Jump activity really brought back some childhood memories! Coming to the Interactive JavaScript Shell project, I would like to discuss some ideas with the community. There are various tools like jsfiddle that can run JS on the fly. There is also an awesome tutorial on JS: on code academy, that teaches JS from scratch. I looked into it and basically what they do is teach some concepts like loops and functions, and give interesting problems for students to solve and run it. They start with “enter your name”, and display it and then slowly proceed with the steps. We can discuss and see what features we want to implement in our own tool. Having it run offline is very important as Sugar Learning Platform is used by many students who do not have access to internet. This is not a problem. The platform already has a browser integrated, and it doesn’t care about offline mode if the html/JS is available locally. So we can just store copies of libraries like jquery, etc locally. I would like to discuss more specifically about this so that I can scope my proposal in a better way, and develop the timeline accordingly. It would be great if the mentors can guide me in this regard. Thanks Richa Sehgal ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
