May 27, 2013

Short description: The aim of this project is to change the user interface of ATutor,
making it more user friendly in the process. This would be done in two
phases- AJAXification of many features, and then making a new design for
ATutor, keeping in mind the accessibility of the project at every
point. At the end, ATutor would be a better application to use.

Project Description:

ATutor
has a very structured code. There are a lot of functions that prepare
the data like- sanitizing user input, or displaying large amounts of
data from the database. However, it uses constant post back based web
pages for doing all tasks. That puts an extra burden on the server as
well as makes the process slower for the user. Today, major browsers
support AJAX and, most users expect this from a good web application on
account of it’s usability and the speed enhancement it provides on slow
connections.

During
this project, for adding AJAX functionality to the user interface, the
behaviour of the various PHP functions which perform the actions of
adding, modifying or displaying data will be modified. Thus, they will
present only the necessary output during an AJAX request, but will still
present the complete output when a normal page request is made. jQuery
scripts will be created for the different pages which will attach
actions to different events and DOM elements, confirm some of the
actions from the user, perform the AJAX requests, and replace the data
being displayed on the page when output is provided by the web server.

AJAX can be used in many places in ATutor. I have mentioned two scenarios here:

Replying in Forums and auto update of the feed.

Comment addition and deletion in file uploads.

The
current design of ATutor needs to be tweaked using the latest
technologies, since it is not up to the mark as compared to most modern
websites. However, the timeline of GSoC would not be enough to change
the face of ATutor altogether. Hence, I would concentrate on making a
few aspects better. I have listed two such areas below:

The main navigation tabs

The system preferences

Thirdly, I plan to improve the accessibility of ATutor. Here are a few things I have decided to go through with:

Add keyboard shortcuts

Use proper Tab Indexes.

Provide Alt text for images.

Project Plan:

As mentioned above, I have decided to complete the project in three phases.

AJAXify the Interface: Even
though ATutor’s code is very structured, there are situations when
performing an action by transferring to a new page could be avoided.
This phase makes parts of ATutor use AJAX to perform certain functions,
which makes the interface smoother, and puts less pressure on the
server. I have mentioned on how I plan to do it in the ‘Deliverables’
section below. Note that this closely resembles the AJAXification of PhpMyAdmin due to my relations to that project during their AJAXificaion.

Change design elements of ATutor:
This would include major changes in the CSS to incorporate the changes I
have already mentioned, with the use of SASS in the process (http://sass-lang.com/). The reasons why I choose SASS over LESS inculde(details here- http://css-tricks.com/sass-vs-less/):

In case of extending classes, LESS copies the properties, whereas SASS rewrites selectors. Hence, SASS is more efficient.

Here are the three important parts in which I am planning to introduce changes: Color Scheme and Elements and Structure.

Color scheme: I
felt personally that ATutor’s color scheme needs to be changed, keeping
in mind the accessibility of the visually challenged. However, I would
be able to do that only after the approval of the whole ATutor
community. A list of colour schemes can be shortlisted from Kuler (https://kuler.adobe.com/).

Changing specific pages/elements:
Changing position of elements to make the interface more user friendly,
which in turn would improve the usability of the application. For
instance, the student tools page, which has too many options, needs to
be categorized properly.

Changing structure of pages:
There are certain pages which have too much information for the user’s
capabilities (like the admin home). There is a need to restructure those
pages to show only those parts to the user which are absolutely
necessary and, move the other functions elsewhere. Widgets like
Accordion (http://jqueryui.com/accordion/) or Tabs(http://jqueryui.com/tabs/) would be used for grouping them.

Improve Accessibility:

The
very idea of accessibility is to give users of all abilities and
disabilities equal access to information and functionality. Since ATutor
has a very large user base and it has always given accessibility a high priority, improving the same would be of great
help. I have listed what I plan to do in the next section.

Deliverables:

A. AJAXification:

PHP
functions that check for the presence of an AJAX request and
accordingly, set some variables in the execution environment of the
current script(using $_SERVER['HTTP_X_REQUESTED_WITH']).

Functions
that will wrap the output in a JSON format, so that jQuery can
correctly parse the response and insert the right content at the right
location in the page(using json_encode).

jQuery helper functions/plugins to manipulate major divisions on a page, as well as some properties like page title or content.

Prepare
sample PHP and jQuery code using the code developed till now, which can
be used to modify an existing action from it’s current form to that
necessary for an AJAX request. It could be used as a model to modify
other pages/actions by community members.

Actual conversion of some pages/actions to AJAX, some of which are listed below.

Replying in Forums and auto update of the feed.

Comment addition and deletion in file uploads.

Enrolling in courses. The user can enroll in multiple courses right from his homepage.

B. Design changes:

Change the basic color scheme of ATutor to something agreed upon by the ATutor developers community beforehand.

Modifying
elements of a page by proper positioning of elements, to improve
usability. Some of the changes that I plan to do are as follows:

The main navigation tabs need to be repositioned.

The system preferences screen needs to be split.

The
design doesn’t look good on a netbook with a width of 1024 pixels(for
example, in the course home page or the student tools page, the widgets
appear one below the other).

Integrate the search page into other pages(with a drop down option for advanced search).

C. Improve Accessibility:

Add
keyboard shortcuts at places like, the exam (using arrows keys for
navigation through questions). Using Access Keys wherever relevant
(although it is already present in most pages, if not all).

Use proper Tab Indexes.

Provide Alt text for images.

Add a skip navigation to the header.

Timeline & Deliverables:

Till 27th May: Use SASS to get comfortable with it before development begins.28th May to 16th June(Community Bonding Period): Use this time to get to know the developers in the ATutor community by actively participating in the irc.

17th June to 23rd June: Write functions mentioned in deliverables A1 and A2. Start discussions on creating a list of tasks for deliverable A3.24th June to 7th July(2 weeks): Write
deliverable A3. This part would require some time, as it involves
modification of major parts of a page and, also what is visible to the
user.8th July to 14th July: Write
deliverable A4. Convert the forums page to perform actions through
AJAX. Start sharing probable design structures for student tools, admin
page and inbox for approval.15th July to 21th July: Auto
update of page on clicking a refresh button: This could be done on a
course home page, or maybe the forums page/comments page.22nd July to 28th July: Enrollment
of courses to be made easier- by adding AJAX functionality. Add AJAX
functionality to inbox. Mail previews could be shown in the same page.

---MID TERM EVALUATION---

29th July to 11th August(2 weeks): Finish deliverable B1. This would include the use of SASS.12th August to 18th August: Remove the search page, and integrate it from within other pages. Include advanced search as an option.19th August to 25th August: Change the Student Tools page. This would include removing elements which are empty, and adding AJAX for preview on click/hover.26th August to 1st September: Change
admin page, which contains too much information at the same place. Put
page elements in a way which is accessible to the user (design to be
approved by community).2nd September to 8th September: Complete deliverables C1-C4.9th September to 16th September: Final
documentation. Buffer time for any unexpected delays. Check the entire
code for errors, comments and improvements before pens down.

----- FINAL EVALUATION -----

Project Outcome:

The
outcome of the project is simple- ATutor will become more user
friendly. The basic target of the project would be to make the user more
comfortable with the interface. The AJAXificaiton would make things
faster for the user, as well as put less pressure on the server. It
would benefit both the user as well as the server.

The
design changes would make ATutor look better and, less cluttered in the
areas which have already been mentioned above. The changes in the
restructuring of certain pages/modules would also help ATutor look
better. The user would be able to access important parts of ATutor at a
faster rate.

The
accessibility part of the project would be completed keeping in mind
that all users get equal functionality with their minimum effort, and
are able to use ATutor smoothly.

Questions:

1. How will you document your weekly progress on your project?

Apart
from informing my mentors, I would maintain a blog to document my
progress in the project. I have a blog already which I regularly update (http://shaumikthinks.blogspot.in/), but I would maintain a new blog.

2. After GSoC, describe what you will do to ensure your project code continues to be maintained?

As
I am quite attached to the code that I write, I would continue with its
development, even after the project is complete, and at the same time,
encourage others to use the product, and contribute wherever they can.

3. Where can we find your GitHub site? Create an account if you do not already have one.

IntroductionMy
name is Shaumik Daityari and I am currently pursuing my Integrated
M.Tech. in Geological Technology at Indian Institute of Technology
Roorkee. I am a part of Information Management Group(IMG), a student
body which manages all the internet and intranet activities of IIT
Roorkee. Apart from my regular work and projects at IMG, I have been
actively taking programming courses in Coursera and, participating in
various programming contests online.

Being
a part of IMG, I have the experience of handling large projects.
Recently, I was a part of the core team that developed the Placement
Portal of my college(intranet only). I was also involved in the design
integration of Think Tank, the official forum of IIT Roorkee (http://people.iitr.ernet.in/thinktank/).

Online Exam Portal(January 2011 - July 2011):Information Management Group, IIT RoorkeeDeveloped
a platform for the students of IIT Roorkee to help students preparing
for GRE/CAT/GMAT. It offers the option of appearing for mock tests
before taking these exams.. The application was in core PHP and was
integrated with the intranet portal.

Student Management Software (May 2011 - June 2011):ImpaCt Education Centre, GuwahatiDeveloped
a software in PHP for ImpaCt Education Centre to manage the students,
which was previously done manually. It involves generation of batches,
iCards, reports and analysis of performance in tests.

Placement and Internship Portal(January 2012 - present):Information Management Group, IIT RoorkeeDeveloped
the new placement portal of the institute in Python/Django. Students
can apply to companies, get results and prepare for test. The admin part
is managed by the ‘Training and Placement Office’, IIT Roorkee.