Difference between revisions of "Summer of Code/2016/Redesign and recreate Sugar Labs webappearance"
< Summer of Code | 2016
Jump to navigation
Jump to search
| (54 intermediate revisions by the same user not shown) | |||
| Line 5: | Line 5: | ||
<tr><td>'''Major:'''</td> <td>Computer Science and Engineering (Pre-Final Year)</td></tr> | <tr><td>'''Major:'''</td> <td>Computer Science and Engineering (Pre-Final Year)</td></tr> | ||
<tr><td>'''College/University:'''</td> <td>GGSIPU, New Delhi, India</td></tr> | <tr><td>'''College/University:'''</td> <td>GGSIPU, New Delhi, India</td></tr> | ||
| − | <tr><td>'''Email:'''</td> <td>Contact[at]KanikaMurarka[dot]xyz | + | <tr><td>'''Email:'''</td> <td>Contact[at]KanikaMurarka[dot]xyz, MurarkaKanika[at]Gmail[dot]Com</td><td></td></tr> |
| − | + | <tr><td>'''First language:'''</td> <td>Hindi, Also proficient in English</td></tr> | |
| − | <tr><td>'''First language:'''</td> <td>Hindi, | ||
<tr><td>'''IRC:'''</td> <td>Kanikaa in freenode #sugar</td></tr> | <tr><td>'''IRC:'''</td> <td>Kanikaa in freenode #sugar</td></tr> | ||
<tr><td>'''SugarLabs Wiki Username:'''</td> <td>Beastie</td></tr> | <tr><td>'''SugarLabs Wiki Username:'''</td> <td>Beastie</td></tr> | ||
| − | <tr><td>'''Timezone:'''</td> <td> | + | <tr><td>'''Timezone:'''</td> <td>UTC +5:30</td></tr> |
<tr><td>'''Current Location:'''</td> <td>Delhi, India,</td></tr> | <tr><td>'''Current Location:'''</td> <td>Delhi, India,</td></tr> | ||
<tr><td>'''Open Source Projects:'''</td> <td>I have contributed in Mozilla Delhi Community</td></tr> | <tr><td>'''Open Source Projects:'''</td> <td>I have contributed in Mozilla Delhi Community</td></tr> | ||
| Line 20: | Line 19: | ||
===Name of Project=== | ===Name of Project=== | ||
Redesign and Recreate Sugar Labs Web Appearance | Redesign and Recreate Sugar Labs Web Appearance | ||
| + | |||
===Abstract=== | ===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. | 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=== | ===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.<br> | + | Sugar Labs aims at creating tools that learners use to explore, discover, create, and reflect with the mission to support the Sugar community of users and developers and establish regional, autonomous "Sugar Labs" around the world to help learners "learn how to learn" by tailoring Sugar to local languages and curricula. |
| − | 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. | + | |
| + | 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.<br>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=== | ===Goals=== | ||
| − | # '''''Designing modern and innovative template for all Sugar Labs Site:''''' | + | # '''''Designing modern and innovative template for all Sugar Labs Site: '''''Improving the appearance of website according to the modern treads. |
| − | # '''''Unify the technologies used across all sites:''''' | + | # '''''Unify the technologies used across all sites:'''''Using minimum no. of technologies, that would be compatible on every browser. |
| − | ===Approach=== | + | ===Development Approach=== |
An incremental enhancement approach would be followed. | An incremental enhancement approach would be followed. | ||
# Discuss with mentor(s) about specifications | # Discuss with mentor(s) about specifications | ||
| Line 37: | Line 38: | ||
# Getting feedback and re-iterating<br> | # Getting feedback and re-iterating<br> | ||
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. | 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. | ||
| + | |||
| + | The approach of Evolutionary Prototyping would be followed which will involve following phases: | ||
| + | * '''Phase 1''': Gathering of requirements | ||
| + | ** Collecting all resources | ||
| + | ** Collecting the URLs of the web-pages linked directly to the website | ||
| + | * '''Phase 2''': Prototype development based on requirements | ||
| + | ** Making the final mock-up, keeping requirement in mind | ||
| + | ** Sending design for review | ||
| + | ** Making changes as required | ||
| + | ** Coding the design | ||
| + | * '''Phase 3''': Feedback from the mentor for the developed prototype | ||
| + | ** Sending prototype for review after a fixed interval | ||
| + | ** Improving as per feedback | ||
| + | |||
| + | * '''Phase 4''': Giving final touch to the work and combining everything. | ||
| + | This approach will help in making the development easily adaptable to changes in the requirements as well as help in identifying and rectifying bugs in the early development phase hence resulting in a better software at the end of the development cycle. | ||
===Specifications=== | ===Specifications=== | ||
| + | ====Color Scheme==== | ||
| + | I preferably will go with Flat Design because it is in "trend" nowadays. Here are some reasons why: | ||
| + | # 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. | ||
| + | # It is also light that is you do not need to insert (many) images into you code. | ||
| + | # 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. | ||
| + | # It helps user focus more on the content. | ||
| + | ====Navigation Bar==== | ||
| + | More discussion with mentor(s) to make it simple and easily accessible and also discussion on implementation plan. | ||
| + | |||
| + | ====Images==== | ||
| + | Scalable Vector Graphics (SVGs) will be preferred. | ||
| + | |||
| + | ====Responsiveness==== | ||
| + | This means how the site appears on various devices. It will achieve following goals. | ||
| + | # remove the need for horizontal scrolling | ||
| + | # offer text large enough to be legible without resizing or zooming | ||
| + | # provide tap-friendly (i.e. fingertip-sized) buttons and links | ||
| + | # ensure speedy page loads for users on slow cell networks | ||
| + | # 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:- | ||
| + | # Using CSS to structure content, rather the tables | ||
| + | # Limiting the usage of H tags (H1, H2, H3, etc) and tags to non-repetitive content. | ||
| + | # 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. | ||
| + | # Site-Speed- consolidating CSS and javascript files, loading javascript at the end of the page. | ||
| + | # Will add structured data which helps improve the search engine visibility and helps in better ranking | ||
| + | |||
| + | ==== Mockup ==== | ||
| + | [[File:Mockup.png|thumb|center|Mock-up for the site]] | ||
| + | |||
| + | ====Technologies==== | ||
| + | <table class="wikitable"> | ||
| + | <tr> | ||
| + | <th>Technologies</th> | ||
| + | <th>Description</th> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>HTML</td> | ||
| + | <td>Hyper Text Mark-up Language (HTML) represents the visual elements a browser ultimately displays on screen.</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>CSS</td> | ||
| + | <td>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a web page.</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>JavaScript</td> | ||
| + | <td>The programming language for the web.</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td>Bootstrap</td> | ||
| + | <td>CSS framework to make page responsive</td> | ||
| + | </tr> | ||
| + | </table> | ||
| + | |||
| + | |||
===Milestones=== | ===Milestones=== | ||
| − | <table | + | <table class="wikitable"> |
| − | <tr | + | <tr> |
| + | <th>Week</th> | ||
| + | <th>Task</th> | ||
| + | </tr> | ||
| + | <tr> | ||
<td> | <td> | ||
====22 April - 23 May==== | ====22 April - 23 May==== | ||
| Line 59: | Line 136: | ||
</td> | </td> | ||
<td> | <td> | ||
| − | * Preparation for exams and giving exams. | + | * Preparation for exams and giving exams. I will work extra hours before or after exams to meet deadline. |
</td> | </td> | ||
</tr> | </tr> | ||
| Line 67: | Line 144: | ||
</td> | </td> | ||
<td> | <td> | ||
| + | * Prepare my first mock-up | ||
* Get feedback from mentor(s) and re-iterating | * Get feedback from mentor(s) and re-iterating | ||
</td> | </td> | ||
| Line 87: | Line 165: | ||
* Submitting mid-term evaluations. | * Submitting mid-term evaluations. | ||
* Deliverables: | * Deliverables: | ||
| − | ** | + | ** A working prototype will be presented |
| − | |||
</td> | </td> | ||
</tr> | </tr> | ||
| Line 96: | Line 173: | ||
</td> | </td> | ||
<td> | <td> | ||
| − | * Get feedback from mentor(s) and re-iterating | + | * Get feedback from mentor(s) and re-iterating |
</td> | </td> | ||
</tr> | </tr> | ||
| Line 129: | Line 206: | ||
<td> | <td> | ||
* Get feedback from mentor(s) and re-iterating | * Get feedback from mentor(s) and re-iterating | ||
| + | * Alpha release of the website | ||
</td> | </td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td> | ||
| − | + | ====10 August - 15 August==== | |
</td> | </td> | ||
<td> | <td> | ||
* Get feedback from mentor(s) and re-iterating | * Get feedback from mentor(s) and re-iterating | ||
| + | * Beta version will be released | ||
</td> | </td> | ||
</tr> | </tr> | ||
| Line 152: | Line 231: | ||
</tr> | </tr> | ||
</table> | </table> | ||
| + | |||
| + | ===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 [http://www.ieeeniec.com chapters website] [https://github.com/kanikaa1234/ieeeniec 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 [https://drive.google.com/file/d/0B3T8-uI6OJqVbDJMVjBKZldqNFU/view?usp=sharing here]. | ||
| + | * I am an open source enthusiast and contributed to the Mozilla Delhi Community [https://github.com/Mozpacers GitHub:Mozpacers]. | ||
| + | * I have recently worked for an NGO- SevaSetu, and worked for their website design [http://sevasetu.ultimatefreehost.in Link]The site is still under development.[https://github.com/kanikaa1234/Sevasetu GitHub:SevaSetu] | ||
| + | * Graphic Designer and Marketing head at NGO Tathastu | ||
| + | * I am also comfortable with short deadlines, interned at Hymnn startup for 4 weeks to complete designing and coding of few web-pages. | ||
| + | |||
=='''The community and me'''== | =='''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. | ||
| + | |||
| + | === Time that I can devote === | ||
| + | I have no other plans for this summer. I can devote my maximum time to this project. | ||
| + | |||
| + | ===Ways to keep the community informed of my progress=== | ||
| + | I will be in contact with the mentor about progress everyday on IRC/mail and write weekly blog about the completion, problems faced, how you got the solution and add other stuff | ||
=='''Miscellaneous'''== | =='''Miscellaneous'''== | ||
| + | |||
| + | === Sugar Development Environment === | ||
| + | It was a nice learning experience setting up the Sugar development environment on the system. During the setup i learned how to use the release tools as well as got to know how to rectify the dependency errors during the installation time. | ||
| + | After installing and running the installation, now I feel pretty comfortable with the development setup. | ||
| + | |||
| + | |||
| + | [[File:1(1).png|300px|thumb|center|First screen of development environment]] | ||
| + | [[File:2(1).png|300px|thumb|center|XO icon with my email-id]] | ||
| + | [[File:3(1).png|300px|thumb|center|My first activity]] | ||
| + | |||
| + | === Learning as a child === | ||
| + | I was very keen of experimenting. For me it was fun to come up with an out of a box idea of presenting something. I was an average painter but was creative and innovative, my mentors (parents, teachers, seniors and my friends) motivated me to choose designing as a domain. But in real I want to learn everything and as many thing I can. | ||
| + | |||
| + | === Things I want to know === | ||
| + | I would like to know which technologies are currently powering the backend of the sugar web presence. This would help me make better decisions regarding the frameworks and template engines to use. | ||
| + | |||
| + | [[:Category:2016 GSoC applications]] | ||
Latest revision as of 11:25, 25 March 2016
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, MurarkaKanika[at]Gmail[dot]Com | |
| First language: | Hindi, Also proficient in English | |
| IRC: | Kanikaa in freenode #sugar | |
| SugarLabs Wiki Username: | Beastie | |
| Timezone: | UTC +5:30 | |
| 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
Sugar Labs aims at creating tools that learners use to explore, discover, create, and reflect with the mission to support the Sugar community of users and developers and establish regional, autonomous "Sugar Labs" around the world to help learners "learn how to learn" by tailoring Sugar to local languages and curricula.
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
- Designing modern and innovative template for all Sugar Labs Site: Improving the appearance of website according to the modern treads.
- Unify the technologies used across all sites:Using minimum no. of technologies, that would be compatible on every browser.
Development Approach
An incremental enhancement approach would be followed.
- Discuss with mentor(s) about specifications
- Implementing stuff
- 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.
The approach of Evolutionary Prototyping would be followed which will involve following phases:
- Phase 1: Gathering of requirements
- Collecting all resources
- Collecting the URLs of the web-pages linked directly to the website
- Phase 2: Prototype development based on requirements
- Making the final mock-up, keeping requirement in mind
- Sending design for review
- Making changes as required
- Coding the design
- Phase 3: Feedback from the mentor for the developed prototype
- Sending prototype for review after a fixed interval
- Improving as per feedback
- Phase 4: Giving final touch to the work and combining everything.
This approach will help in making the development easily adaptable to changes in the requirements as well as help in identifying and rectifying bugs in the early development phase hence resulting in a better software at the end of the development cycle.
Specifications
Color Scheme
I preferably will go with Flat Design because it is in "trend" nowadays. Here are some reasons why:
- 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.
- It is also light that is you do not need to insert (many) images into you code.
- 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.
- It helps user focus more on the content.
More discussion with mentor(s) to make it simple and easily accessible and also discussion on implementation plan.
Images
Scalable Vector Graphics (SVGs) will be preferred.
Responsiveness
This means how the site appears on various devices. It will achieve following goals.
- remove the need for horizontal scrolling
- offer text large enough to be legible without resizing or zooming
- provide tap-friendly (i.e. fingertip-sized) buttons and links
- ensure speedy page loads for users on slow cell networks
- 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:-
- Using CSS to structure content, rather the tables
- Limiting the usage of H tags (H1, H2, H3, etc) and tags to non-repetitive content.
- 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.
- Site-Speed- consolidating CSS and javascript files, loading javascript at the end of the page.
- Will add structured data which helps improve the search engine visibility and helps in better ranking
Mockup
Technologies
| Technologies | Description |
|---|---|
| HTML | Hyper Text Mark-up 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 | CSS framework to make page responsive |
Milestones
| Week | Task |
|---|---|
22 April - 23 May |
|
23 May - 3 June (Tentative) |
|
4 June - 11 June |
|
12 June - 19 June |
|
20 June - 27 June |
|
28 June - 5 July |
|
6 July - 13 July |
|
20 July - 26 July |
|
27 July - 3 August |
|
4 August - 10 August |
|
10 August - 15 August |
|
15 August - 23 August |
|
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
- I am also comfortable with short deadlines, interned at Hymnn startup for 4 weeks to complete designing and coding of few web-pages.
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.
Time that I can devote
I have no other plans for this summer. I can devote my maximum time to this project.
Ways to keep the community informed of my progress
I will be in contact with the mentor about progress everyday on IRC/mail and write weekly blog about the completion, problems faced, how you got the solution and add other stuff
Miscellaneous
Sugar Development Environment
It was a nice learning experience setting up the Sugar development environment on the system. During the setup i learned how to use the release tools as well as got to know how to rectify the dependency errors during the installation time. After installing and running the installation, now I feel pretty comfortable with the development setup.
.png)
.png)
.png)
Learning as a child
I was very keen of experimenting. For me it was fun to come up with an out of a box idea of presenting something. I was an average painter but was creative and innovative, my mentors (parents, teachers, seniors and my friends) motivated me to choose designing as a domain. But in real I want to learn everything and as many thing I can.
Things I want to know
I would like to know which technologies are currently powering the backend of the sugar web presence. This would help me make better decisions regarding the frameworks and template engines to use.