Summer of Code/2016/Redesign and recreate Sugar Labs webappearance

About Me

Name:	Kanika Murarka
Program:	Bachelor of Technology
Major:	Computer Science and Engineering (Pre-Final Year)
College/University:	GGSIPU, New Delhi, India
Email:	Contact[at]KanikaMurarka[dot]xyz
Phone:	+91-9868-179-156, +91-8800-184-063
First language:	Hindi, Also proficient in English
IRC:	Kanikaa in freenode #sugar
SugarLabs Wiki Username:	Beastie
Timezone:	I can work from 16:00 to 21:00 IST (UTC +5:30) but it's adjustable
Current Location:	Delhi, India,
Open Source Projects:	I have contributed in Mozilla Delhi Community
Twitter:	Kanika on Twitter
Github:	Kanika on GitHub
Blog:	Kanika’s Blog

About My project

Name of Project

Redesign and Recreate Sugar Labs Web Appearance

Abstract

This project is to revamp the existing templates in diversified sites of Sugar Labs and unify a theme across each one of them. The obsolete pages would be re-designed and a minimal number of technologies would be applied to develop the web appearance.

Overview

The existing sites are very diversified in nature. The goal is to make a unified theme and apply it across all the sites (main page, planet, wiki etc.). This would ensure consistency and ease of use across all Sugar Labs sites. The obsolete pages would be dropped/re-designed according to the needs and minimal design would be applied.
Using less no. of technologies would make code maintenance easier and would also facilitate in dropping off unnecessary tools. This would mean unification in technology across all sites.

Goals

1. Designing modern and innovative template for all Sugar Labs Site:
2. Unify the technologies used across all sites:

Approach

An incremental enhancement approach would be followed.

1. Discuss with mentor(s) about specifications
2. Implementing stuff
3. Getting feedback and re-iterating
   

This would help in revealing any bugs/mis-conception early in development phase itself and also give more time on enhancing the application as desired.

Specifications

Color Scheme

I preferably will go with Flat Design because it is in "trend" nowadays. Here are some reasons why:

1. Design is all about process. Flat is very simple in terms of form, and that helps us to focus on the usability of your site/app.
2. If we follow few rules, design will look tidy and clean.
3. It is also light that is you do not need to insert (many) images into you code.
4. Responsive Web Design - flat makes it a lot easier to make sites responsive, as we do not need to scale images, effects and so on. You just have vector shapes and colors.
5. It helps user focus more on the content.

Navigation Bar

Since the website is short and simple, with very less links and only single page, navigation bar can be dropped.

Images

Scalable Vector Graphics (SVGs) will be preferred.

Responsiveness

This means how effective a site looks on other devices. It will achieve following goals.

1. remove the need for horizontal scrolling
2. offer text large enough to be legible without resizing or zooming
3. provide tap-friendly (i.e. fingertip-sized) buttons and links
4. ensure speedy page loads for users on slow cell networks
5. simplify navigation and content to focus on what mobile users want

SEO Ranking

Following are the standards I will follow such that the SEO of the site will improve:-

1. Using CSS to structure content, rather the tables
2. Limiting the usage of H tags (H1, H2, H3, etc) and tags to non-repetitive content.
3. Using machine-readable fonts
4. For images that are stylistic elements, using CSS background images, but for content elements, found within a body of text that is unique to a page, using a regular image tag. For logos, using an image tag rather than using text replacement.
5. Site-Speed- consolidating CSS and javascript files, loading javascript at the end of the page.
6. Avoiding dynamically generated content

Technologies

Technologies	Decription
HTML	HyperText Markup Language (HTML) represents the visual elements a browser ultimately displays on screen.
CSS	Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a web page.
JavaScript	The programming language for the web.
Bootstrap OR Flexbox	CSS framework to make page responsive

Milestones

Week	Task
22 April - 23 May	Community bonding period Get to know mentors, further discussion on project and start with initial set-up Reading more source code for better understanding of the system Get regular feedback from mentor(s).
23 May - 3 June (Tentative)	Preparation for exams and giving exams. Mention more details how would you compensate this time.
4 June - 11 June	Get feedback from mentor(s) and re-iterating
12 June - 19 June	Get feedback from mentor(s) and re-iterating
20 June - 27 June	Documenting the changes Writing tests; preparation to submit mid-term evaluations Submitting mid-term evaluations. Deliverables: Some deliverable Some other deliverable and so on
28 June - 5 July	Get feedback from mentor(s) and re-iterating
6 July - 13 July	Get feedback from mentor(s) and re-iterating
20 July - 26 July	Get feedback from mentor(s) and re-iterating
27 July - 3 August	Get feedback from mentor(s) and re-iterating
4 August - 10 August	Get feedback from mentor(s) and re-iterating
10 August - 15 August	Get feedback from mentor(s) and re-iterating
15 August - 23 August	Preparing documentation for final changes Submission for final evaluation Deliverables: A modern and innovative template on all sites of sugar labs Consistency of tools and technologies used across all the sites

Why should I be chosen for the project?

• I have a strong experience in HTML, CSS and JavaScript and a lot of interest in designing.
• I am an active IEEE member and Webteam head at IEEE-NIEC(sub-chapter of IEEE of my college).We(team) are recently working on the chapters website GitHub:IEEENIEC.
• I have interned at some organizations and well aware with working with deadlines and delivering the allotted tasks without compromising with the quality. My resume can be found on here.
• I am an open source enthusiast and contributed to the Mozilla Delhi Community GitHub:Mozpacers.
• I have recently worked for an NGO- SevaSetu, and worked for their website design LinkThe site is still under development.GitHub:SevaSetu
• Graphic Designer and Marketing head at NGO Tathastu

The community and me

If the task completes successfully..

I will be happy to have contributed in one more open source community and I will look forward to contribute more in the organization, even in projects out of my comfort zone.

If I get stuck and mentor is not around..

Since mentors are there only to guide us and help us with best of their knowledge, its me who have to complete the project. I will look up on internet to find the solution of the problem I am stuck with, if I dont get the solution, I will keep the task aside and carry on with another module, so that time do not get wasted. And when mentor is available, I can discuss my doubts is a better way.

Ways to keep the community informed of my progress

I will be posting it on IRC and also on mailing list.Also, I also planning to maintain a weakly task record on GitHub.

Miscellaneous

Category:2016 GSoC applications