GSoC updates on week before the mid evaluations

Well, this week is kind of a very tiresome week for me because I needed to spend lot of time trying to grasp the correct process which I need to follow in integrating the styles I have coded, to the testing instance of AskFedora. So, here goes my update on the project.

Basically I have set up the testing repository for AskFedora in Openshift. The source for testing can be cloned from the git repository here. 

Basically the first step you need to follow is having Openshift client (rhc) installed in your PC. We can install rhc by typing in the following command in the terminal:

$ sudo gem install rhc

Then the following command run the setup that will create a config file and and ssh keypair:

$ rhc setup

And then you need to add the ssh key and start the ssh agent by:

$ ssh-all ~/.ssh/id_ras

$ ssh-agent

When setting up the testing instance in Openshift you need to go to www.openshift.com and create a new DJango based application using the source given in the above mentioned git repository. And then you need to ssh into your repository on Openshift typing the command:

rhc ssh your_application_name

on your terminal if you are using Linux or on command line if you are using Windows. Then you will be directed to Openshift and from there it's like working on another remote machine from your own computer. I have explored the file structure and directories on Openshift and yeah it is just like you own another computer on which you can work. (of course on a terminal though with no graphical user interfaces :P)

And then you need to go to app-root/repo/asgi/askbot_devel directory from the terminal and there you need to type in the following commands:

python manage.py syncdb

python manage.py migrate

python manage.py collectstatic

Well it's quite trouble when we need to type in the above commands each time we deploy a new instance. And there is a way in not having to do so each time. This is how I was able to do that:

Inside the .openshift -> action_hooks directory I created a deploy script with the following entries:

#!/bin/bash

echo "Executing 'python ${OPENSHIFT_REPO_DIR}wsgi/askbot_devel/manage.py syncdb --noinput'"
python "$OPENSHIFT_REPO_DIR"wsgi/askbot_devel/manage.py syncdb --noinput

echo "Executing 'python ${OPENSHIFT_REPO_DIR}wsgi/askbot_devel/manage.py migrate --noinput'"
python "$OPENSHIFT_REPO_DIR"wsgi/askbot_devel/manage.py migrate --noinput

echo "Executing 'python ${OPENSHIFT_REPO_DIR}wsgi/askbot_devel/manage.py collectstatic --noinput'"
python "$OPENSHIFT_REPO_DIR"wsgi/askbot_devel/manage.py collectstatic --noinput

so that on every deploy, it executes this deploy script and get the work done without me having to ssh and type the commands.

Now the application will run on Openshift just fine.

My first naive approach towards integration :P

Okay the first way I followed in integrating my styles with the test instance is quite naive I should say. What I did was I ssh into Openshift repository and explored the directory structure and found out that when installing dependencies askbot latest version is fetched and installed in the directory app-root/runtime/dependencies/python/virtenv/lib/python2.7/site-packages. Then studied the structure of askbot as well and located where the template html files and the styles are in. The html templates of askbot are inside the directory called "templates" and all the css, less, javascript and image files are inside the "media" directory of askbot.

All the templates for pages in askbot extends the "base.html" file and then the "two_column_body.html" file. Basically these pages include many other html files such as header.html, secondary_header.html etc. Because of this structure it is very easy to identify the places where we need to access in order to do a change. Hence maintaining such an instance is quite easy because of the modularity of code. And also I found out that the most of the styles of askbot is included in the "style.css" file which is inside media/style directory. It also has an associated "style.less" file. 

At first I tried to integrate my styles directly to the askbot repository located at app-root/runtime/dependencies/python/virtenv/lib/python2.7/site-packages which became a quite hectic process as I needed to work on Openshift using the nano editor through the terminal. And bit later I got to know that I was following the wrong method in integrating my styles with askbot and whatever the changes that I should be doing must be done in my local repo and it should be committed and pushed to Openshift to get the expected outcome. Well that was good lesson I learnt. Basically that is why frameworks are there right? Frameworks help up to do things the easier way. So, what I need to do is finding how templates and styles of askbot can be overridden in my testing instance so that I can simply work on my local repository and commit those changes to Openshift. :)

Read More

Cross Browser CSS coding

Okay now have coded the majority of the Main and Q/A pages of AskFedora which you can view here on Openshift: http://askfedoratest-anuradhaw.rhcloud.com. And one of the problems that I faced is that the things that show well in Google Chrome does show well in Firefox as well as in Internet Explorer web browsers. According to the articles that I have referred it is quite a difficult task to achieve the same beautiful and intuitive design across all the browsers. So, cross browser compatibility would require some more trouble :)

Here is what I got to know from my small research about cross browser compatibility. There are some small tips on CSS that you should follow if you are get a cross browser compatible web site. 

Understand the CSS box model

The CSS box model works same across all the browsers (but except for some  versions of Internet Explorer) which is a good thing. Basically box model talks about the layout. It has 4 parts which are:

• Margin
• Border
• Padding
• Content

 

The above is an image which describes the CSS box model. When we consider a particular block-level element it has the 4 properties of margin, border, padding and content. The width that we specify by the width property of CSS is the width of the content area and unless we specify a fixed a height, the height of the element automatically gets adjusted according to the content. And also we can specify padding, the width of the border and the width of the margin around the element. The padding and the margin areas are transparent. 

An example of setting all the above properties in a div element is stated below:

div{

    width: 200px;

    padding: 5px;

    border: 3px red;

    margin: 2px;

} 

In most of the browsers the total width of the element is calculated as:

total width = width + left padding + right padding + left border + right border + left margin + right margin

and the total height is calculated as:

total height = height + top padding + bottom padding + top border + bottom border + top margin + right margin

The issue with cross browser compatibility when it comes to the CSS box model is that in Internet Explorer 8 and its earlier versions, it includes padding and width of the border also in the width property. 

How to overcome this problem?

Well this has a simple fix which is including <!DOCTYPE html> to the top of the page. :)

Some important tips to remember when dealing with the CSS box model

• If the width of the block element is set to 100%, it should not contain any borders, padding or margin because if so it will overflow its parent.
• Layout problems can occur due to collapsing of vertically-adjacent margins of two separate elements.
• You need to have an understanding about the difference between fixed, relative and absolute positioning of elements. 

• Fixed positioning
• Fixed positioning position the element relative to the browser window and the position of the element does not change when even when scrolling.

                              #element-id{

                                    position: fixed;

                                    top: 10px;

                                    left: 5px;

                              }

                              

                              Here the top and left positions are calculated relative to the browser window.

• Relative postioning
•  An element with relative positioning is positioned relative to its normal position. 

                           #element-id{

                                    position: relative;

                                    left: -10px;

                            }

    

                            In the above code the element is moved to the left by 10px from its normal position.

• Absolute positioning
• Absolute positioning position an element with respect to its first parent element which has a position other than static. If there is no such parent element then the containing block will be <html>

                              #element-id{

                                    position: absolute;

                                    left: 10px;

                                    top: 5px;

                              } 

Understand the difference between Block and Inline

Every HTML elements has default display property which is either block or inline. Block-level elements are the elements that start on a new line and expand to take up the full width of its parent element. Hence we do not need to set its width to 100%.

Examples of Block-level elements are: <div>, <p>, <form> etc.

The inline elements do not start on a new line and only take up the necessary width and they will just ignore the width and height settings. It's the Inline elements that can be aligned with the vertical-align property and not the block elements. The Inline elements usually has a small space below them to accommodate letters like letter 'g'. And if the Inline element is floated it will become a block element. 

Examples of Inline elements are: <span>, <a>, <img>

Understand the difference between Floating and Clearing

We can specify float by using either float: left or float: right. By doing so the element will float left or right until it hits the margin of the parent container or else another floated element. In order to get the other elements to float around the floated element, they should be either inline or floated in the same direction. 

          #element-id-1{

                float: left;

          }

An element which is cleared will not flow around a floated element and it will usually start from a new line below the floated element. 

            

         #element-id-2{

                clear: both;

         }

And when making a web site cross browser compatible it is always good to start from Internet Explorer because most of the things that works in Internet Explorer will work in other new browsers also. As I proceed I will further include more details about cross browser compatibility across different browsers.  

Read More

Progress with the coding of Question and Answer Page of AskFedora

In the past week I started working on the Question and Answer page of AskFedora according to my mockups. I followed a mobile first approach in coding the web page and you can view it here at my Openshift instance - http://askfedoratest-anuradhaw.rhcloud.com/

I further have got to do the following tasks regarding the Answer page:

1. Coding the desktop hamburger menu.
2. I have discovered a bug in the current interface I have created for the Answer page. That is in the mobile view after I click on view comments and then again on hide comments and expand the screen of the browser then the comments that should appear in the desktop view do not appear. I have used the following code of javascript to view/hide comments:

$('#comment-text-1').click(function() {
                   jQuery(this).text('view comments');
                if($('#collapsible-comment-1').is(':visible')){
                      jQuery(this).text('view comments');
                }else{
                      jQuery(this).text('hide comments');
                }
                $('#collapsible-comment-1').slideToggle("fast");
                return false;

});

3. Code the elements that appear when I click the "add comment" option.
4. Put two up and down arrow icons to click for up voting and down voting of questions.

And also I faced some cross browser compatibility issues such as the Sass mixin I used for vertical alignment of content seems not to work correctly in Firefox and Internet Explorer browsers. The Sass mixin I used is:

@include vertical-align()

which is:

-webkit-tansform: translate Y(-50%);

-ms-transform: translate Y(-50%);

transform: translate Y(-50%);

And also there are issues in responsiveness when it comes to web browsers such as Internet Explorer. I am going to look into these matters and discuss with the mentors on how to deal with such issues.

And for the ASK button I used a lesser green color which is: #42a500, and for its border I used a darker green color which is: #128c1e, because the color I used in my mockups did not went well with Fedora blue. 

And further your views on this are welcome as this is a UX based project and all the design work I do depends on user feedback.

I have also developed a sliding menu in the mobile view of the web page which is built using Sidr which is a jQuery plugin to create side menus and making it responsive. 

Read More

Minutes of the Skype call #2 - Reviews on my first page layout

Today also we had a Skype screen sharing session with my mentor Sarup that gave me a lot of insight into building up good layouts for web pages. I have created a web layout by using differently colored boxes so that I get a general idea of how the layout of the web page should be. I have set up an Openshift instance for the code that is in progress which is http://askfedoratest-anuradhaw.rhcloud.com, where I have committed my changes on the web layout.

Earlier I thought that having 5 breakpoints according to the way that Bootstrap uses might give us more flexibility in designing. Yet I was mistaken and I was told that the breakpoints should be decided based on the content and some of the pages that we are going to design might even be created by using less than 3 breakpoints. 

Sarup via screen sharing showed me how the layout of a webpage can be designed based on the content so that it can even fit for an iwatch which is about half the screen size of 320px. He told me that without getting our web layout to strictly follow a fixed set of breakpoints we can always have the flexibility to decide where it should break depending on the content.

The following are screenshots of the web layout I created and I would like to include them here as well and point out the mistakes that I was shown and instructed to correct during the skype call.

Below 480px (Mobile view of the Answer page)

 

Here I have created the pop up menu that pops up when the hamburger icon is clicked, to fade in and out using the following javascript code:

function toggleMenu() {
   $("#pop-up-menu").fadeToggle();
}

Yet I was advised to code that so that it slides from left to right. I was given a resourceful link to refer to which is: https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3. This is an article which talks about animation principles like sliding and how to make it accelerate during sliding rather than making it slide at constant velocity which is quite boring specially when it comes to mobile devices. I was asked to refer that and in case I get a difficulty to code it from scratch I was advised to use SIDR, which is a jquery plugin to create side menus.

Below 768px (Tablet view of the Answer page)

This is a screenshot I have taken just at the transition at 480px. I was pointed out that my layout is broken here because as you can see the yellow colored section becomes too thin and it might not be able to hold the content fully. This is a disadvantage when we try to use fixed breakpoints and I was advised to decide a breakpoint so that such kind of a thing would not happen and the yellow colored area with the text left on it has sufficient width to hold the content.

  
Above 768px (Desktop view of the Answer page)

Here the mistake was I had too much space between the Hamburger icon and the Search text box. I was told to try experiment with a lesser space between these two. 

And at the same time the width of the ASK button also was quite large and I was advised to reduce the size of the ASK button when it comes to the desktop view.

Apart from these I was given further articles to look at which comes handy in working with breakpoints. Those articles were:

• http://www.vanseodesign.com/web-design/3-breakpoint-types/
• http://marcdrummond.com/responsive-web-design/2011/12/29/default-breakpoints-are-dead

If anyone is interested to learn more about responsive web design and designing layouts based on breakpoints those articles would be very useful and you can refer them to get better in handling breakpoints. And during the next week I will be working more on getting the layout correct and move into detailed coding of the Question and Answer page of AskFedora.

Read More

Minutes of the Skype call

Me and my mentors Sarup and Suchakra had a Skype conversation on 31st of June 2015 where they reviewed the mockups that I have already created using Inkscape. We had a screen sharing session and they pointed me out some of the modifications that I need to do and some of the points that I need to keep in mind when coding the mockups.

They went through my mockups one by one and gave me feedback on what I have done. I will also include them here in point form under each mockup we went through during the call.

The Answer Page Desktop View

• We agreed to change the layout of the Answer Page a bit by letting the hamburger menu out to the left and let the search bar occupy all the space like in the design provided by my mentor Sarup - http://paste.opensuse.org/44501225.
• And they noticed a problem with aligning of text in the second div of the aside to the right. I was told to align text in that also to the left because aligning it to the center causes inconsistency in the webpage.
• And also in the question and answer area the boxes with username and information regarding karma etc. were identified to be inline with the tags.

The Answer Page Mobile View

• When it comes to the mobile view, because of the comments that occupy a lot of space in the screen it gets a bit cluttered. And hence we agreed not to show the comments when it comes to the mobile view. If the user wants to see the comments he or she may need to click on the "Comments" text to get them visible on screen.

The Ask Question Page

• Here another inconsistency was identified that the text box in front of "Title" text should come to the bottom preserving consistency. It was also discusses that it is good always to keep the text boxes under its corresponding label because it reduces the eye movement of the user entering details to the textboxes.

 The User Profile Page

• The number of up votes and down votes section was agreed to move to the side of the number of karma which is in the section containing user profile information. That way the space taken up by the number of votes is reduced.
• Also from the aside we decided to remove the statistics on votes and have accordions that slide down to show the top tags and top badges when the user clicks on the "Tags" and "Badges" text. Also I was advised to include up and down arrows in front of the text so that the user will fell that those can be expanded.
• Also from the section containing profile information we decided to remove "6 hours ago" and "8 minutes ago" text and agreed to make then appear as tool tips when hovering over "member since" and "last seen text".

The Color Palette

• I was told to use somewhat lesser green for the ASK button when I am coding because the green that I have taken from the Fedora color palette does not go well with the Fedora blue that I have decided to use in text of links.

In general they advised me to have a good layout first when coding the mockups because a bad layout is hard to fix. So, I was instructed to code the layout in the form of boxes where each box will have a different color. And then only go for the detailed coding inside each box. That way we can create a good layout before we get into details. 

Read More