22
edits
Changes
Jump to navigation
Jump to search
Line 24:
Line 24: − + Line 46:
Line 46: − <p>The UI of the app has to be consistent with the XO, below is a mockup of the design of the application I intend to develop this summer.</p>+ − + − <br> On the right half of the screen, lie three interesting things+ − <br>+ − <br>+ − <b>DOM :</b> I assume the student already knows HTML (thanks to the sister project WEB confusion), showing a beautiful tree will add to the learning experience. As javascript is known for DOM manipulations. When a student will actually see her javascript code appending an element to the DOM tree, she will actually be learning by visuals and visual learning has a very high memory retention. The DOM illustrator will also help when a student has to find a particular element. She can go through the tree and better decide her strategy for tackling the problem.+ + + − <p><b>HTML:</b> The student must be able to type in the desired HTML code, for which he plans to add Javasript. In the design above, student is actually solving a problem statement which requires her to append some elements to an already existing ul element. The student would be guided through a help section right at the top in the nav bar. Whenever he she is stuck can see the objectives of the current problem and also get a hint. The simulated problem part is a feature of this application. A student can also work on a blank project.</p>+ − <p><b>Preview:</b> Preview of the HTML code is a basic necessity for learning javascript. The student upon clicking the Preview button will see the live preview of code uptil that moment. In case she makes changes, she will have to click the run button at the top again.+ − <p><b>Console:</b> The console part is very important, as the interactivty we wish to achieve wouldnt be possible without it. The console shown in the mockup, will provide basic outputs like console.log, errors, etc. The user can anytime query any variable just like the console which comes with modern day browsers. </p>+ − <p><b>Help:</b> As I mentioned earlier to aid the learning of javascript, the user can opt to go through basic tasks. As shown in the design, the user is shown what she has to do in this task and upon completion can move to the next advanced task. The help button will also fascilitate as guide to interface, just like its done in the web version of turtle . https://turtle.sugarlabs.org.</p>+
Summer of Code/2015/Kushan Javascript (view source)
Revision as of 06:08, 26 March 2015
, 06:08, 26 March 2015no edit summary
<nowiki>]</nowiki>].Firefox as of yet hasn't implemented pointer events for default touch action regions, this bug required me to create touch action regions, and forward them to composter. The regions were further divided into no_Action_Region, horizontal_Pan_Region and vertical_Pan_region , which had to be processed separately. This bug was quite interesting as it had me working on the components of CSS implementation of the browser.
<nowiki>]</nowiki>].Firefox as of yet hasn't implemented pointer events for default touch action regions, this bug required me to create touch action regions, and forward them to composter. The regions were further divided into no_Action_Region, horizontal_Pan_Region and vertical_Pan_region , which had to be processed separately. This bug was quite interesting as it had me working on the components of CSS implementation of the browser.
</li>
</li>
<li><b>Use of new xpcshell test cases [https://bugzilla.mozilla.org/show_bug.cgi?id=1022342 [3<nowiki>]</nowiki>]:</b> The use of new globally available xpcshell tests, required change in the code of calendar and lighting app of mozilla suite. In this bug I am upgrading the unit testing code of the suite to follow the change in Assert.jsm. </li>
<li><b>Use of new xpcshell test cases [https://bugzilla.mozilla.org/show_bug.cgi?id=1022342 [3<nowiki>]</nowiki>]:</b> The use of new globally available xpcshell tests, required change in the code of calendar and lighting app of mozilla suite. In this bug I am upgrading the unit testing code of the suite to follow the changes in Assert.jsm. </li>
<li><b>Using getters/setters[https://bugzilla.mozilla.org/show_bug.cgi?id=1116008 [4<nowiki>]</nowiki>] : </b> This was fairly simply bug which required upgradation of existing firefox code to use getters/setters method.
<li><b>Using getters/setters[https://bugzilla.mozilla.org/show_bug.cgi?id=1116008 [4<nowiki>]</nowiki>] : </b> This was fairly simply bug which required upgradation of existing firefox code to use getters/setters method.
</ul>
</ul>
<td style="max-width:900px">
<td style="max-width:900px">
<p style="font-weight:600">Application</p>
<p style="font-weight:600">Application</p>
<p>The UI of the app has to be consistent with the XO, below is a mockup of the design of the application I intend to develop this summer.</p>
http://s28.postimg.org/ttbwdosp9/dom.jpg
http://s28.postimg.org/ttbwdosp9/dom.jpg
<p> As you can see, I intend to divide the screen into halves.
<p> As you can see, I intend to divide the screen into halves.
<br>On the left side the user can enter the code she desires. She can copy paste any code here, and can also use the builtin stepover button to go through her code line wise. This will be of great help as the student can actually see the whole program working sequentially right infront of her. The pink line in the design mockup will show the line at which program is at.
<br>OOn the left side the user can enter the code she desires. She can copy paste any code here, and can also use the builtin stepover button to go through her code line wise. This will be of great help as the student can actually see the whole program working sequentially right infront of her. The pink line in the design mockup will show the line at which program is at.
<br> On the right half of the screen, lie three interesting things
<br>
</p>
</p>
<b>DOM :</b> I assume the student already knows HTML (thanks to the sister project WEB confusion), showing a beautiful tree will add to the learning experience. As javascript is known for DOM manipulations. When a student will actually see her javascript code appending an element to the DOM tree, she will actually be learning by visuals and visual learning has a very high memory retention. The DOM illustrator will also help when a student has to find a particular element. She can go through the tree and better decide her strategy for tackling the problem.
http://s23.postimg.org/akbk8kybv/html.jpg
http://s23.postimg.org/akbk8kybv/html.jpg
<p><b>HTML:</b> The student must be able to type in the desired HTML code, for which he plans to add Javasript. In the design above, student is actually solving a problem statement which requires her to append some elements to an already existing ul element. The student would be guided through a help section right at the top in the nav bar. Whenever he she is stuck can see the objectives of the current problem and also get a hint. The simulated problem part is a feature of this application. A student can also work on a blank project.</p>
http://s3.postimg.org/cp6curokj/preview.jpg
http://s3.postimg.org/cp6curokj/preview.jpg
<p><b>Preview:</b> Preview of the HTML code is a basic necessity for learning javascript. The student upon clicking the Preview button will see the live preview of code uptil that moment. In case she makes changes, she will have to click the run button at the top again.
</p>
</p>
<p><b>Console:</b> The console part is very important, as the interactivty we wish to achieve wouldnt be possible without it. The console shown in the mockup, will provide basic outputs like console.log, errors, etc. The user can anytime query any variable just like the console which comes with modern day browsers. </p>
http://s8.postimg.org/vvslkrbg5/help.jpg
http://s8.postimg.org/vvslkrbg5/help.jpg
<p><b>Help:</b> As I mentioned earlier to aid the learning of javascript, the user can opt to go through basic tasks. As shown in the design, the user is shown what she has to do in this task and upon completion can move to the next advanced task. The help button will also fascilitate as guide to interface, just like its done in the web version of turtle . https://turtle.sugarlabs.org.</p>
</td>
</td>
</tr>
</tr>