Summer of Code/2015/Web Confusion Rajdeep
About You
What is your name?
Rajdeep Singh
What is your email address?
rajdeep1995singh@gmail.com
What is your Sugar Labs wiki username?
Rajdeep Singh
What is your IRC nickname on irc.freenode.net?
raj007
What is your first language? (We have mentors who speak multiple languages and can match you with one of them if you'd prefer.)
I am comfortable in English, Hindi and Punjabi.
Where are you located, and what hours (UTC) do you tend to work? (We also try to match mentors by general time zone if possible.)
Location: Patiala, Punjab, India.
Time Zone: UTC + 5:30 (Indian Standard Time)
Working hours: During summer vacations I will be free all the day so any time will work. But during my college I would prefer to work 5:00am to 8:00am and 5:00 pm to 11:00 pm
Have you participated in an open-source project before? If so, please send us URLs to your profile pages for those projects, or some other demonstration of the work that you have done in open-source. If not, why do you want to work on an open-source project this summer?
I am new to the open source community and have not participated in any such project before. But this time I am looking forward to be a part of it.
Working on an open source project will also help me in gaining experience of how professional projects are made. In addition it would also enhance my coding skills, and help me learning new things. And for me it would be the best way to utilize my time during the summer vacations.
About your project
What is the name of your project?
Web Confusion
Describe your project in 10-20 sentences. What are you making? Who are you making it for, and why do they need it? What technologies (programming languages, etc.) will you be using?
The main objective of this project is to build a set of creative web pages to help learners develop and sharpen their skills in HTML and CSS. The web pages will be providing different levels of varying difficulty, the idea is similar to the Turtle Confusion used in Turtle Blocks. Each level will be having a new set of problems along with the images and the video to help learner better understand what the problem is and how the end result will look like. In order to make learning more interesting the learner will be provided a badge on successful completion of each level. The badge system will also motivate children to learn more. If the XO laptops of the children are connected to school servers, it would also be possible to maintain the ranking of the children. This will also increase the interest of the children to improve their ranking by completing more levels. In the last levels basics will be built and the main focus will be on HTML5 and CSS3.
The project will mainly target the children who live in remote areas and do not have access to internet. It will be very helpful for them to improve their skills in HTML and CSS and compete with others. As this project will be targeting young children, the major focus will be on building more interactive web pages to create interest of the children. For this the HTML and CSS will be taught using creative ideas of stories and poems. Every level will be having a set of problems based on the stories or treasure hunts. In order to make this more interesting, animated videos and images will be embedded in the web pages for giving the hint to the learner what step to perform next. The material to be added in the web pages will be referred from http://www.goer.org/HTML/ . We would also refer to the web sites like w3school. This material will be presented to the learner in an interactive way.
Further the learner will be able to learn about HTML and CSS at the same place. After completing all the levels the learner will be having a good understanding of basics of HTML, CSS and will be able to step in the world of web development.
Technologies: I will be using HTML and CSS along with bootstrap to create the web pages. And in addition to make the webpages more interactive and responsive I will be using JavaScript and jQuery.
Prototype:
Challenge 1: “The Adventures of Batman”
Hey curious about the adventures of batman. Ok let’s start our challenge and build our first web page. A template for HTML and CSS is already provided and you have to only make few changes at specified locations based on the tasks.
Task 1: Write the heading “The Adventures of Batman” using h1 tag.
Task 2: Include the image of Batman. The name of image is “Batman.png” and it is located in the same file as our html file.
Task 3: Include the text, (Hello everyone, Let’s begin the journey of “The Adventures of Batman”) using h2 tag.
Task 4: In the next step include the following text in a paragraph, “Created By: [Your Name]”
Task 5: In the css stylesheet set the background color to #8DA9FF. The linking to css stylesheet is already done.
Complete all these tasks and if you are struck anywhere just go through the hints.
Template for the challenge
Template
Hints:
Hints
After completion of these tasks.
Modified Template
Output
What is the timeline for development of your project? The Summer of Code work period is from May 19 - August 22; tell us what you will be working on each week. (As the summer goes on, you and your mentor will adjust your schedule, but it's good to have a plan at the beginning so you have an idea of where you're headed.) Note that you should probably plan to have something "working and 90% done" by the midterm evaluation (27 June); the last steps always take longer than you think, and we will consider cancelling projects which are not mostly working by then.
| Time Period | Tasks |
|---|---|
| April 28 - May 17 | Discovering creative ideas and the set of logical problems to be implemented in the project and finalizing them by discussing with the mentor. |
| May 18 - May 24 | Get the final report of summarized ideas and problems reviewed by the mentor for any changes and modify it. |
| May 25 - May 31 | Start building the creative web pages based on pre-finalized ideas and the problems. And embedding set of images and videos in the web pages to help learner better understand about the problems. |
| June 1 - June 7 | Developing a platform to display the output of the HTML and CSS code written in the editor on the website. |
| June 8 - June 14 | Implementing the testing module to check whether the learner’s solution for a particular problem is correct or not. |
| June 15 - June 21 | Putting all the things together and checking for bugs. |
| June 22 - June 28 | Fixing the bugs and getting feedback from mentor about the website and making the required changes. |
| June 29 - July 3 | Documenting a summarized report of the project completed so far and Submitting for midterm evaluation. |
| July 4 - July 19 | Enhancing the functionality of the project by adding the badge system, every user will get a badge on the successful completion of a level. Maintaining a dashboard to keep track of the achievements of the children. |
| July 20 - August 2 | Testing the complete project for bugs and fix them. And taking the feedback of the mentor and fixing the shortcomings. |
| August 3 - August 17 | Deployment of the project on the XO and continuous testing and fixing. Also making other required changes. |
| August 18 - August 28 | Making minor changes to make the web pages look more attractive. Preparing the user manuals and documented report for the final submission. And Final Submission |
Convince us, in 5-15 sentences, that you will be able to successfully complete your project in the timeline you have described. This is usually where people describe their past experiences, credentials, prior projects, schoolwork, and that sort of thing, but be creative. Link to prior work or other resources as relevant.
This project is the biggest opportunity for me in this summer, and I am going to give my best to complete this project. As I will be free during my summer vacations, I will be able to devote most of my time in developing this project; around 40hrs/week.
1. I have completed HTML and CSS from codecademy, their way of teaching is very much similar to the requirements of our project except that we are targeting the children. So I am familiar with the type of layout and structure of this project. I also took online course on these topics from Udacity website, where the main focus was on the concepts of Bootstrap, so I will be able to build creative web pages.
2. I completed the MongoDB for Python Developers course from MongoDB University which was 7 weeks long and only 15% students were able to complete it among 4498 students. The verification of this course can be done at the link http://education.mongodb.com/downloads/certificates/688f28aa26394dd8b169b7994e681fea/Certificate.pdf
I made a blog as my final project of this course “MongoDB for Python Developers”. In this project I mainly focused on the database, keeping the record of login details of users. Storing the Blogs, their Authors, tags, comment related to the blog and details about the users who add comment. Sorting the blogs based on the tags, applying indexing for fast retrieval of the blogs being searched. The documents were being stored in the database in JSON format. I also used Bottle Framework in this project for generating the website for the blog project. And to establish connection to database Pymongo driver was used.
3. I have also made a pong game in python which was a part of an online course “Introduction to interactive programming in python” organized by Rice University on Coursera. Pong is a two player game played on a rectangular area divided into two parts. Each player is provided a paddle with which he has to hit the ball. The paddle can be moved up and down. If the player misses the ball, his opponent gets one score. The person who first scores five wins the game. I have also provided some additional functionality, that whenever the ball hits the paddle its velocity increases and it makes game more interesting. This game uses the graphical interface that is interpreted by CodeSkulptor.
4. I have also built a Date Sheet Management project for my university and it is currently under testing phase, this application was developed for automating the manual task of generating Date Sheet for large number of students and subjects. It uses the Graph Coloring based approach for generating the date sheet and schedules maximum number of subjects in a limited and short period of time.
You and the community
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.
Me: If this project is successfully completed, it would be a great achievement for sugar lab community as we will be able to help children living remotely by providing them knowledge of HTML and CSS that they are not able to gain because of non-availability of Internet. It would also help them to enhance their creative skills in HTML and CSS and compete with others. This project will enable children to understand how web-pages are actually built at the back-end when in future they will browse Internet.
Tony Anderson (Mentor):
Walter Bender:
What will you do if you get stuck on your project and your mentor isn't around?
If I got stuck, I will be posting my queries on IRC channel, My Blog, Discussion Forums or try to figure it out myself by reading on Internet. I will also try to get help from teachers in my college. If nothing helps I would wait for my mentor to reply.
How do you propose you will be keeping the community informed of your progress and any problems or questions you might have over the course of the project?
I will be maintaining a blog and will keep posting regularly about the status of the project. In addition I will also be in touch with my mentor and keep discussing about the project regularly.
Miscellaneous
We want to make sure that you can set up a development environment before the summer starts. Please do one of the following:
Send us a link to a screenshot of your Sugar development environment with the following modification: when you hover over the XO-person icon in the middle of Home view, the drop-down text should have your email in place of "logout".
Modified drop down text
Describe a great learning experience you had as a child.
During our childhood more creative things catch our eye, I remember the first creative thing that I learned before any programming language or HTML/CSS was Logo. It was taught to us in the school and I was very curious about it, it involved building different shapes by moving the pointer called turtle. The other reason that it was interesting was that it does not involved any particular language and it just used basic commands which were easily understandable. It was a great learning experience, as it was very enjoyable and helpful in building strong logics by creating more complex shapes.
Is there anything else we should have asked you or anything else that we should know that might make us like you or your project more? Please include the category tag at the bottom of your page the Catagory tag for 2015 GSoC applications.