Summer of Code/2016/Redesign and recreate Sugar Labs webappearance: Difference between revisions

Beastie (talk | contribs)
Tag: visualeditor
Beastie (talk | contribs)
Tag: visualeditor
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</td></tr>
<tr><td>'''Email:'''</td> <td>Contact[at]KanikaMurarka[dot]xyz, MurarkaKanika[at]Gmail[dot]Com</td></tr>
<tr><td>'''Phone:'''</td> <td>+91-9868-179-156, +91-8800-184-063</td></tr>
<tr><td>'''Phone:'''</td> <td>+91-9868-179-156, +91-8800-184-063</td></tr>
<tr><td>'''First language:'''</td> <td>Hindi, Also proficient in English</td></tr>
<tr><td>'''First language:'''</td> <td>Hindi, Also proficient in English</td></tr>
Line 30: Line 30:


===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===
===Approach===
Line 44: Line 44:
* '''Phase 1''': Gathering of requirements
* '''Phase 1''': Gathering of requirements
** Collecting all resources  
** Collecting all resources  
** Collecting the URLs of the webpages linked directly to the website  
** Collecting the URLs of the web-pages linked directly to the website  
* '''Phase 2''': Prototype development based on requirements
* '''Phase 2''': Prototype development based on requirements
** Making the final mock-up, keeping requirement in mind
** Making the final mock-up, keeping requirement in mind
Line 61: Line 61:
I preferably will go with Flat Design because it is in "trend" nowadays. Here are some reasons why:
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.
# 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.
# If we follow few rules, design will look tidy and clean.
# It is also light that is you do not need to insert (many) images into you code.
# 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.
# 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.
Line 67: Line 66:


====Navigation Bar====
====Navigation Bar====
Since the website is short and simple, with very less links and only single page, navigation bar can be dropped.
If it will be there, it will be simple and easily accessible.


====Images====
====Images====
Line 73: Line 72:


====Responsiveness====
====Responsiveness====
This means how effective a site looks on other devices. It will achieve following goals.
This means how the site appears on various devices. It will achieve following goals.
# remove the need for horizontal scrolling
# remove the need for horizontal scrolling
# offer text large enough to be legible without resizing or zooming
# offer text large enough to be legible without resizing or zooming
Line 84: Line 83:
# Using CSS to structure content, rather the tables
# Using CSS to structure content, rather the tables
# Limiting the usage of H tags (H1, H2, H3, etc) and tags to non-repetitive content.
# Limiting the usage of H tags (H1, H2, H3, etc) and tags to non-repetitive content.
# Using machine-readable fonts
# 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.
# 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.
# 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


====Technologies====
====Technologies====
Line 92: Line 91:
<tr>
<tr>
<th>Technologies</th>
<th>Technologies</th>
<th>Decription</th>
<th>Description</th>
</tr>
</tr>
<tr>
<tr>
<td>HTML</td>
<td>HTML</td>
<td>HyperText Markup Language (HTML) represents the visual elements a browser ultimately displays on screen.</td>
<td>Hyper Text Mark-up Language (HTML) represents the visual elements a browser ultimately displays on screen.</td>
</tr>
</tr>
<tr>
<tr>
Line 129: Line 128:
* Reading more source code for better understanding of the system
* Reading more source code for better understanding of the system
* Get regular feedback from mentor(s).
* Get regular feedback from mentor(s).
* Phase 1 would be initiated and completed
</td>
</td>
</tr>
</tr>
Line 136: Line 136:
</td>
</td>
<td>
<td>
* Preparation for exams and giving exams. Mention more details how would you compensate this time.
* Preparation for exams and giving exams. I will work extra hours before or after exams to meet deadline.
</td>
</td>
</tr>
</tr>
Line 144: Line 144:
</td>
</td>
<td>
<td>
* Phase 2 will be initiated
* Prepare my first mock-up
* Get feedback from mentor(s) and re-iterating
* Get feedback from mentor(s) and re-iterating
</td>
</td>
Line 152: Line 154:
</td>
</td>
<td>
<td>
* Phase 2 will be continued
* Get feedback from mentor(s) and re-iterating
* Get feedback from mentor(s) and re-iterating
</td>
</td>
Line 160: Line 163:
</td>
</td>
<td>
<td>
* Phase 2 will be continued
* Documenting the changes
* Documenting the changes
* Writing tests; preparation to submit mid-term evaluations
* Writing tests; preparation to submit mid-term evaluations
* Submitting mid-term evaluations.
* Submitting mid-term evaluations.
* Deliverables:
* Deliverables:
** Some deliverable
** A small prototype
** Some other deliverable and so on
</td>
</td>
</tr>
</tr>
Line 173: Line 176:
</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 182: Line 185:
<td>
<td>
*Get feedback from mentor(s) and re-iterating
*Get feedback from mentor(s) and re-iterating
* Phase 2 will be completed
</td>
</td>
</tr>
</tr>
Line 190: Line 194:
<td>
<td>
*Get feedback from mentor(s) and re-iterating
*Get feedback from mentor(s) and re-iterating
* Phase 3 will be initiated
</td>
</td>
</tr>
</tr>
Line 198: Line 203:
<td>
<td>
* Get feedback from mentor(s) and re-iterating
* Get feedback from mentor(s) and re-iterating
* Phase 3 will be completed
</td>
</td>
</tr>
</tr>
Line 206: Line 212:
<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>
Line 250: Line 257:
=='''Miscellaneous'''==
=='''Miscellaneous'''==


 
=== Sugar Development Environment ===
It was a fun to do task.
[[:Category:2016 GSoC applications]]
[[:Category:2016 GSoC applications]]