Sugar Labs

Summer of Code/Seetarama Raju

< Summer of Code

GSOC 2017 Proposal

Organization: Sugar Labs

Project: Giving Sugar Labs Website a New Look

About You

What is your name? Pericherla Seetarama Raju

What is your email address? psramaraju@gmail.com

What is your Sugar Labs wiki username? GeeKrypter

What is your IRC nickname on irc.freenode.net? GeeKrypter

What is your first language?​(We have mentors who speak multiple languages and can match you with one of them if you'd prefer.) My first language is Hindi​. I am also fluent in English​ and Telugu​. However, I prefer communicating in English​. 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: I will be located in Hyderabad, India​ from 30st May to 31st July and in Bangalore, India​ from 1st August to 21st August.

Timings: My preferred timing​ - 12:30 UTC - 20:30 UTC everyday from 30st May to 21st August

So, I would be spending a total of 50+ hours​ every week till the end of the project. The reason why I am able to spend this amount of time on the project is because I have no other commitments this summer and will concentrate only on developing the project. Even if the timing is altered here and there a bit, I will make sure that the activities/tasks on the timeline will be completed on time. This is just my preferred timing but I give utmost importance to the timings which is most suitable for everyone involved and would be open for any kind of modifications to the mentioned timing.

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?

Major contribution:

  • Submitted 70+ telugu ​language translations and 70+ hindi​ language translations on

https://translate.sugarlabs.org (More to come) Username - ​GeeKrypter Profile Link​ - https://translate.sugarlabs.org/accounts/GeeKrypter/

Apart from the above contribution, I have not yet done any other major open source contributions. Even though I was aware about open source contribution long ago, I was not involved in it much till now.

Why now? Since I am a college student, over the past few years, I have concentrated on developing my skills by learning through academic projects and personal projects so that I could get more domain knowledge. I thought that the strengthening of domain knowledge would allow me to utilize my skills to contribute on a large scale. But now, I am confident that I have the required expertise and can showcase my skills. Hence, I am slowly participating in open source contribution because it is one of the platforms where I could help organizations and learn from a large sector of developers. Sugar Labs has been a good starting point for open source contribution and I would continue contributing to the organization irrespective of my GSOC result.

Why have I chosen Sugar Labs? Answer: The answer is simple. Sugar Labs is one of the open source organizations that has a huge impact in the world. It has become a platform that can utilized by different sectors of people like children, developers, contributors, etc. It is a renowned organization and has a large community of developers. It has also been creating an impact for many years now and one can observe the potential impact it has been creating in the world of learning. As a student, helping out in the field of learning is an opportunity one would never miss. So, why wouldn't anyone choose to contribute to an organization which allows their contribution to impact many people.

About your project

What is the name of your project? Giving Sugar Labs Website a New Look

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? What are you making?

Basic Requirement: A new look for www.sugarlabs.org

Primary Goals:

Make the existing website:

  • More attractive
  • Easier to explore

(Source: https://github.com/sugarlabs/www-sugarlabs/blob/master/STRUCTURE.md)

Secondary Goals:

  • The page load should be made minimum which in turn increases the speed of the website. (This is

where the concept of optimization will be used.)

  • Analyze the data received from the website like user base and further improve the website so that it can

reach more people. To increase the outreach, the SEO ranking should be improved.

  • The website should be made compatible across any platform like mobile browsers, all web browsers,

etc. It should also be optimized based on the platform.

  • Make sure the website is responsive across all platforms.
  • Integrate functionalities like like “try now” of Sugarizer, etc., so that users can get a taste of them in the

website itself.

Additional Goals:

  • Adding a page measuring Sugar against the LF CII best practices.(Source:

https://github.com/sugarlabs/www-sugarlabs/issues/47)

  • Adding a page showing the multi-seat setup with Sugar.(Source:

https://github.com/sugarlabs/www-sugarlabs/issues/46)

  • Setting up an email mini-course.(Source:

https://github.com/sugarlabs/www-sugarlabs/pull/33/files#r61170562)

Required structure of the website:

PRIMARY NAVIGATION (toolbar at top of the page) Includes:

Home | About | Try now | Download | Use | Buy | Join/Participate/Support

SECONDARY NAVIGATION (inside the landing page of each primary element/ appear in a drop down menu on the toolbar)

Includes:

Home Includes:

  • Showing how Sugar addresses the needs of middle school children.
  • Storytelling: one great case study
  • Display:
    • Testimonials/Reviews.
    • Quote from Linuxinsider.
    • Size of active user base.
  • Calls To Action for
    • try
    • download mini course
    • email mini course
    • buy
    • join

About Includes:

  • Full text liberation from "Learning To Change The World".
  • Case studies like
    • a table listing each user community and a person in each community who Sugar Labs can talk with
    • show off where our users are on a map
    • Statistics
    • conference presentations
    • san francisco summit posters
  • Providing detailed information about the Sugar Labs organization such as
    • Explanation of Conservancy
    • SLOB Minutes
    • Current SLOB members
    • SLOB historical membership data
    • Finance data
    • Current Members data
    • Historical membership data

Try now Includes:

Download Includes:

  • Providing downloads for
    • SOAS
    • Chromebooks
    • Instructions and videos( showing how to install on major distro packaging systems)
    • Sugar Handbook
    • Activities Library (Curated list of activities to try)
    • eBook Library

Use Includes:

Buy Includes:

  • Offer (range of offers from individuals to nationwide deployments):
    • sugar sticks (recycled/new usbs)
    • sugarizer servers (raspberry pi)
    • laptops pre-installed
    • pi3 desktops pre-installed

Join/Participate/Support Includes:

  • Showing how to:
    • join the community conversation
    • develop sugar software (javascript and python)
    • start a local lab
    • contribute to translation, usability, software (Activity, Sugar Desktop/izer)
    • report issues
    • contribute to the central organization
    • contribute to websites
    • fill unfilled office positions
    • become a member
    • join the SLOB
  • Displaying related projects

FOOTER (bottom of every page)

Includes:

Links related to sitemaps | Newsletter email subscription | Link for receiving an email for mini course sign up | Social media sharing links for increasing usage | Donation link for donating funds | 'edit this page' link | Small survey in form of a questionnaire that asks site users information like what they think about the website | 10th year anniversary banner display. (Source: https://github.com/sugarlabs/www-sugarlabs/blob/master/STRUCTURE.md)

Who are you making it for and why do they need it? (Source: https://github.com/sugarlabs/www-sugarlabs/blob/master/STRUCTURE.md)

What technologies willyou be using?

  • HTML
  • CSS
  • Javascript
  • JQuery
  • Bootstrap
  • Jekyll

What is the timeline for development of your project? The Summer of Code work period is from mid-May to mid-August; 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 mid term evaluation (end of June); the last steps always take longer than you think, and we will consider cancelling projects which are not mostly working by then.

Note: In the below timeline, code routine​ includes:

  • Make sure code is integrated into existing working environment.
  • Pushing code from local repository to Github for review.
  • Unit testing and fixing bugs/issues.

Time Period(Days) Activities/Tasks

Till May 3rd

  • Understand website.
  • Understand website code base.
  • Prepare design mock-ups.
  • Discuss with mentors the design mock-ups.
  • Improve design mock-ups based on feedback.
  • Build local development environment that replicates the

existing development environment of the website.

  • Implement prototype of design based on mock-ups.

May 4th – 29th

  • Community and mentor bonding period.
  • Further understanding of website code base.
  • Discuss design mock-ups with mentors and community.
  • Finalizing on design and structure.
  • Discuss additional features to be implemented.
  • Define scope of website and the various platforms it is

going to used.

  • Optimal work schedule agreement.
  • Project management framework agreement.

May 30th – June 6th

  • Observe peer websites and extract more relevant

features and design elements.

  • Make changes to initially developed prototype under the

guidelines of the final design and structure.

  • Code routine.
  • Write blog post regarding what has been done during

this particular time period.

June 7th - 8th

  • Get feedback from mentors and community.
  • Make necessary changes based on feedback.

June 9th - 14th

  • Improve the design and structure of the website further

and adhere to current design trends.

  • Improve website by making sure all the goals of the

website are achieved.

  • Make the website more mobile responsive.
  • Code routine.
  • Write blog post regarding what has been done during

this particular time period.

June 15th - 16th

  • Get feedback from mentors and community.
  • Make necessary changes based on feedback.

June 17th - 21st

  • Make website compatible for all browsers and

environments.

  • Integrate required functionalities like “try now” of

Sugarizer, etc.

  • Code routine.

June 22nd - 25th

  • Get feedback from mentors and community.
  • Make necessary changes based on feedback.
  • Code routine.
  • Documentation of development so far with proper

description of any feature/layout.

  • Write blog post regarding what has been achieved so far.

June 26th - 30th

  • Phase 1 evaluation

July 1st - July 3rd

  • Backlog work completion

July 4th - 8th

  • Integrate additional tools like using CDN, etc., for

website optimization.

  • Further optimization of website based on data from tools

across all browsers.

  • Code routine.
  • Write blog post regarding what has been done during

this particular time period.

July 9th - 10th

  • Get feedback from mentors and community.
  • Make necessary changes based on feedback.

July 11th - 14th

  • Using tools for improving speed and responsiveness of

website.

  • Further improvements to website based on data from

tools.

  • Code routine.
  • Write blog post regarding what has been done during

this particular time period.

July 15th - 16th

  • Get feedback from mentors and community.
  • Make necessary changes based on feedback.

July 17th - 19th

  • Integrate analytic tools for data analytics.
  • Further improve website based on analytics captured.
  • Code routine.

July 20th - 23rd

  • Get feedback from mentors and community.
  • Make necessary changes based on feedback.
  • Code routine.
  • Documentation of development so far with proper

description of any feature/layout.

  • Write blog post regarding what has been achieved so far.

July 24th - 28th

  • Phase 2 evaluation

July 29th - July 31st

  • Backlog work completion

August 1st - 2nd

  • Mini vacation

August 3rd - 8th

  • Learning how to increase SEO ranking and doing

necessary changes to website.

  • Additional features implementation.
  • Code routine.
  • Write blog post regarding what has been done during

this particular time period.

August 9th - 10th

  • Get feedback from mentors and community.
  • Make necessary changes based on feedback.

August 11th - 13th

  • Combine everything to produce final working prototype.
  • Fix final merging issues.

August 14th - 20th

  • Get feedback from mentors and community.
  • Make last-minute changes based on feedback.
  • Final unit testing and fix last-minute bugs/issues.
  • Structure the code better for further development.
  • Polish the UI and small tweaks/cleanups.
  • Add necessary comments for further development.
  • Final necessary documentation and update wiki pages

wherever necessary along with proper description of any feature/layout.

  • Review documentation with mentors and make

necessary changes and publish documentation.

  • Submit code for final evaluation.
  • Write blog post regarding what has been achieved so far

and describing my experience.

August 21th

  • Final evaluation

Structure of timeline: The above proposed timeline follows the principles of Scrum(Agile)​ software process model.

The development has the following deliverables:

  1. Ensure required design and structure of website is implemented.
  2. Ensure all primary goals of website are achieved and improve design and structure of website further.
  3. Make website more mobile responsive.
  4. Make website compatible across all browsers and environments.
  5. Integrate required functionalities like “try now” of Sugarizer, etc.
  6. Optimization.
  7. Speed and responsiveness improvement.
  8. Data analytics.
  9. SEO ranking improvement and other changes that would improve outreach.
  10. Additional features implementation.

The structure of the timeline proposed can be visualized through the below image: The timeline has been divided into 3 phases​.

Advantages of the development model/timeline proposed:

  • By phase 1 evaluation, most of the goals of the project will be achieved. After the phase 1 evaluation,

the main focus would be on improvisation, optimization and outreach.

  • The existing development environment of the website is not disturbed because the project will be

developed by following the same development environment.

  • Making changes based on feedback helps in ensuring that everyone involved are satisfied with the final

output.

  • After every sprint of every phase, there is a potentially shippable product.
  • Changes can be accommodated easily during any part of the development cycle which is highly required

in large scale development.

  • The time periods are not fixed to a certain number of days which enables modular development.
  • The tasks in each time period are ordered from highest priority to lowest priority which enables faster

development.

  • The timeline takes inspiration from Scrum which is an industry followed model so the timeline can be

trusted.

  • Better transparency between community/mentors and me though the usage of Github and also feedback

sharing.

  • Sharing information regarding the project through blog posts helps in publicity for the organization and

also help others understand the development..

  • The timeline is well structured which helps in making sure all the tasks are completed on time.
  • Up-to-date documentation helps in improving the project further.
  • Solving issues whenever possible helps in preventing hindrance to the project progress.

Hurdles that may arise during development:

  • SEO ranking improvement
  • Data analytics

These hurdles may arise because I am new to those concepts. Since I am a developer and a quick learner, learning and implementing them within a short span of time will be possible.

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.

About me:

I am a third year undergraduate student from International Institute of Information Technology(IIIT), Bangalore, India. I have been in the field of development from the past 3 years. Doing mini projects to learn new concepts/technologies is how I learn. UI/UX design has been my major interest because it resembles the field of art in development. Played around with UI frameworks like Bootstrap, W3.CSS and Material Design Lite.

Contact Information:

Mobile number:

Email – psramaraju@gmail.com

Hangouts - psramaraju@gmail.com

Skype - psramaraju1996

Blog:

Github Profiles:

Linkedin Profile:

Technical achievements:

Relevant​ Technical skills:

  • Html, Css, Javascript, Ruby, Ruby On Rails, Bootstrap, W3.CSS and Material Design Lite UI Frameworks, Json,

JQuery, Jekyll, Git, Wordpress, Python, Mysql, Sqlite.

Expertise in the area of web development:

Projects completed:

  • IP Assets Management System - Completed this project, using Ruby on Rails framework along with

HTML, CSS, Bootstrap, and MySql, which involved developing a database system which holds the IP Assets of any particular college. Developed as part of “Database Systems” course.

helps as a virtual guide for tourists by recommending nearby restaurants, emergency places, etc., based on their current location. Built with web technologies like html, css, W3.CSS, php.

money, created using Web development technologies such as html, W3.CSS, css, mysql, php.

Will I be able to complete the project? Absolutely YES​! There are many reasons why I will be able to complete the project in the proposed timeline. The reasons are as follows:

  1. My expertise in the area of web development as described above, depicts that I am no stranger to the

world of development and it also proves the point that I am able learn things quickly even if I am stuck at a point. I also have experience working with the goals mentioned through my development journey.

  1. The proposed timeline is structured in a way that it follows the principles of Scrum(Agile) software

process model and also the advantages of the proposed timeline have also been listed above.

  1. I have played around with the code base of “www.sugarlabs.org” website for almost a month now and

since I was able to understand the underlying code base of the website, I am able to make my own design within a short span of time and also propose an appropriate timeline.

My contribution towards the project so far is described below:

  • My contribution can be tracked via the Github issue thread -

https://github.com/sugarlabs/www-sugarlabs/issues/63

  • In the issue thread, I had several discussions with helpful contributors and my mentors. These

discussions helped me to modify the design better, improve it and also get a better understanding of the final goals of the project.

  • Made my version of the design:
    • Used technologies like HTML, CSS, Javascript, JQuery, Bootstrap, Jekyll.
    • Simple basic set of colors have been used.
    • The design has been hosted using Github pages and it can be viewed at

https://geekrypter.github.io/sugarLabsWebsiteRedesign/

    • The repository related to it is

https://github.com/geekrypter/sugarLabsWebsiteRedesign

    • Video showcasing the working of the redesigned website can be viewed on the link

https://drive.google.com/open?id=0B4WvXpWS9zoRYTc2X2VFSVdVaXM

  • The existing development environment of the website has been replicated on my local machine

and this design has been merged with it so there are no integration issues and no need of another environmental set-up.

  • UI mock ups of my design: (On a computer browser)
  • UI mock ups of my design: (On a mobile browser)
  • Improvements made so far to my design:
    • Changes to originalversion:
      • Replaced images with their optimized JPEG versions.
      • Small typos correction.
      • Replaced few javascript versions with their minified versions.
      • Optimised ordering of style sheets and javascript files.
      • 404 errors have been resolved.
      • Added license information of the dependencies used, into a text file named

"AdditionalLicenseInfo.txt". This file has been added to the repository "https://github.com/geekrypter/sugarLabsWebsiteRedesign".

      • Information regarding to "let us know how this design meets the requirement;

"making it more attractive and easier to explore"" has been added to the "README.md" file of the repository "https://github.com/geekrypter/sugarLabsWebsiteRedesign".

    • Advantages due to changes made:
      • Increased page load
      • Increased website speed.
      • Better page rendering during over slow links.
      • Decreased CPU load.
  • However, there are few issues which have been identified which I will be solving as I further

develop it.

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.

Answer (1): - (My answer) An organization as well established as Sugar Labs needs to have a website where all sorts of information can be gained and should also act as a single point of contact for any entity related to the organization. Here, www.sugarlabs.org serves the purpose for Sugar Labs. Making changes to the existing website would benefit the community and has the following impact:

  1. Provide better outreach and publicity.
  2. Provide more information on Sugar Labs services and products and help understand the

organization better.

  1. Attract more visitors/users/developers and increase user base.
  2. Allowing visitors/users/developers to further connect with the organization.
  3. Improve the communication between the users/visitors/developers and Sugar Labs.
  4. Understand the visitors/users/developers better.
  5. Understand the requirements of visitors/users/developers and provide ways to achieve them.

For example, a large number of laptops with Sugar pre installed in them have been produced. In the launching of the Browse activity, there is a default page which links to activities.sugarlabs.org which in turn provides a link to www.sugarlabs.org. So, this example showcases the impact that the changes to the website would be making. (Source: one of the comments in https://github.com/sugarlabs/www-sugarlabs/issues/63)

Answer (2): - (Mr. Samson Goddy, GSOC 2017 mentor, samsongoddy@gmail.com) “Our main goal as a community is to make things around Sugar Labs flexible. So I believe redesigning the website will make things easier for our users. Making information more accessible.”

Answer (3): - (Mr. Dave Crossland, Sugar Labs community member, dcrossland@google.com) “The new website will help attract new users and developers to the community, and is an important project for the future of Sugar Labs.”

What will you do if you get stuck on your project and your mentor isn't around? We live in a world where distance and availability is never a burden so, I would never let the unavailability of my mentors hinder my contribution and progress towards the project. There are many options that can be utilized. They are:

  1. Taking help from the internet and reading relevant articles, resources and figuring out on my own.
  2. Taking help from the community members through:

a. IRC channel. b. Mailing List. c. Any other form of communication.

  1. Taking help from those who have worked on the project previously.
  2. Taking help from open source contributors by creating issues on Github and discussing possible

solutions.

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? Sugar Labs is a large-scale organization with worldwide recognition. It also supports many ways of communication where ideas/information can be shared/discussed and these platforms have large outreach. Thus, I would be taking advantage of these platforms to inform the community of my progress and also discuss any problems or questions I might have over the course of the project. The different ways of communication are:

  1. Interacting with mentors through any form of communication.
  2. Interacting with community members through:

1. Mailing list 2. IRC 3. Any other form of communication 3. Creating issues on Github when problems arise.

Miscellaneous 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".

Describe a great learning experience you had as a child. I had many great learning experiences as a child. But one learning experience had a significant impact in my career. This experience is the reason why I dived into the ocean of technology.

Experience: During my high school, I once visited a renowned organization for a workshop. It was a 3-day workshop. During that time, I was completely new to the domain of the workshop. We were introduced to the concepts of programming, robotics, etc. We also had specific mentors to guide us throughout the workshop. Because of this, I got a hands-on experience in experimenting with the new technologies along with wonderful guidance. There were many competitions held in the workshop and I had participated in most of them. Even though I had not won any of them, it gave me the confidence to learn more and also drove my interest towards technology. Today, I still laugh at the thought of what my field of interest would have been if it weren't for that workshop. 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?

There is nothing else that needs to be asked. I hope that my answers for the provided questions is sufficient enough to prove that I am the right candidate for the project.

Retrieved from "https://wiki.sugarlabs.org/index.php?title=Summer_of_Code/Seetarama_Raju&oldid=100298"