Term Project of Web Programming: MyOLX

Here are some screenshots of the term project I am working on.
Front End: HTML, CSS, JS, Bootstrap
Back End: CodeIgniter, MySQL

Read More

Handy CSS Manual

A small manual for commonly used CSS properties

APPLYING PROPERTIES IN DIFFERENT BROWSERS:
-moz-border-radius: 10px; ( Curve Borders in Firefox)
-webkit-border-radius: 10px; (Curve Borders in Chrome/Safari)



MARGIN AND PADDING:
padding
padding-top
padding-bottom
padding-right
padding-left
margin
margin-top
margin-bottom
margin-right
margin-left


TEXT:
Change font: font-family
Change font size: font-size
Make text bold: font-weight
Make text italic: font-style
Small Caps: font-variant
upper/lowercase or make all first letter caps: text-transform
Underline/Overline/Line through text/Blink Text: text-decoration

IMAGES:
Using images as border:         border-image
Wrap text around image:         float
using image as background:         background-image
not to repeat the background image: background-repeat
repeat image horizontally/vertically: background-repeat
fixing background image:         background-attachment
make a scrolling background image: background-attachment

COLORS:
change color:                                           color
change background color:                       background-color
change border color:                               border-color
setting color values:                                [by name], [#hexcode], [rgb(x,y,z)]
                                                                {x,y,z are in range 0-255} {x,y,z can also be percentages}
transparent colors:                                   rgba(x,y,z, transparency level)

BORDERS:
add border:         border (width), (type), (color)
change border width: border-width
change border type/style: border-style
change border color: border-color
changing width of portions: border-top-width
                border-bottom-width
                border-right-width
                border-left-width
changing color of portions: border-top-color
                border-bottom-color
                border-right-color
                border-left-color
curve the corners:         border-radius
create drop shadow: box-shadow (right), (bottom), (blur radius), color
transformations:
1. Rotation        transform:rotate(degrees)
2. Slant                transform: skew(xdegrees, ydegrees)

CSS PSEUDO-CLASSES:
:link : properties of link
:hover : when mouse is over the element
:visited    : when a link has been visited
:active : when an object is active


LISTS:
getting rid of bullets: list-style: none;
to show a list horizontally: display:block;



CLEARING FLOATING ELEMENTS:
clear: both ( no floating elements allowed on both sides of an element )

Read More

Graphic Designing - Slicing a Photoshop Design (PSD) and then removing background, to obtain a logo.

Here is my screencast showing how to slice a photoshop design and then remove background from a slice as well.
This technique is particularly useful in order to separate a logo from a PSD.
It is quite handy for Front-End Developers, so that they can separate images and manipulate them in their HTML/CSS code.

Slicing a PSD & Removing Background from Zohaib on Vimeo.

NOTE: The Layers submenu in the video appears by pressing F7.

Read More

Web Scraping using HTML Agility Pack - Part 1

Many of you might be familiar with the idea of JSON Parsing and using APIs to get data from a specific webpage or a web service. But sometimes, the API is not available or it is not free. Moreover, JSON Parsing takes a lot of development/coding time as well for beginners.

Therefore, an easy, but less powerful substitute of Parsing through a document is Screen Scraping.

Screen Scraping:

In this process, we basically just reach our desired tag in HTML Document and read its contents.
XPath is used in order to reach a certain node.

XPath Syntax:

I'll be just giving a basic idea of Xpath in order to understand how the HTML Agility Pack will work.
A more detailed documentation is available at http://www.w3schools.com/xpath/

Following are the various basic path expressions to reach a certain node in XML             

nodename ( Select all the nodes having the name 'nodename' )

/nodename ( Select all nodename only from the root node )

//nodename ( Select all nodename from anywhere in the document )

@attribute ( Select attribute from a node) 

/nodename//childnode ( Select all nodename only from root node, then select all childnode from anywhere inside the nodename )                                          

Similarly, you can make a combination using different operators to make a path expression according to your needs.

How to get HTML Agility Pack?

After creating your Windows Phone/ Windows Store/ ASP.NET Web Application/ Windows Forms
Project successfully in Visual Studio, click on Manage NuGet Packages in the Project drop down menu in the Menu Bar.

Now a new window opens up. Search for HTML Agility Pack in it and install it.
The Pack will be successfully installed for your application.

Using HTML Agility Pack:

For the ease of testing, I created a Web Application, but the Package can be used on Windows Phone as well.

After adding a Web Form having .aspx as extension in your project, and add a button Extract Data, that will prompt the application to extract data and display it on the application when it is clicked.
To achieve that purpose, we will simply, write the code in the OnClick method of our button in the aspx.cs file of our webform.

Note: Include the header file in Webpage.aspx.cs through writing " using HtmlAgilityPack; " alongwith all the other header files included at the start of the Webpage.aspx.cs file.

Now you are ready to go inside the world of screen scraping.

Selecting a single node:

For our example, I am taking this website. 

URL is http://www.cs.colorado.edu/~main/bgi/doc/getmouseclick.html. Suppose, I want to get the heading from this site.

I will first right click anywhere on the page and Inspect Element. In this side bar, I can detect in which tag is the text getmouseclick located.
In this example, it is located inside the h2 tag.

I have to look only for the h2 tag anywhere in the document, therefore, my Xpath regular expression will be //h2.

Now coming towards the code.

Front End: (.aspx file)

When the ExtractData button is clicked, it will always call the ExtractData_Click function written in the WebPage1.aspx.cs file.

Back End: (.aspx.cs file)

Output:

Point to note:

This technique is preferred to be used in Windows Phone, as it gives the facility of acquiring the data from the required website asynchronously. That is to say that while we are loading the required website, the phone application is able to do other tasks and does not hang while loading.

I'll be discussing the variations of HTML Agility Pack, such as Xpath with attributes and Selecting Multiple Nodes later.

Happy Development! 

Read More

Second App: EPL News

http://www.windowsphone.com/en-gb/store/app/epl-news/b2c049aa-d4a2-477d-bdf7-f409476e8825

Read More

First App Released! MUFC Legends

http://www.windowsphone.com/en-gb/store/app/mufc-legends/3922e47c-faaa-4a4b-a917-a0eff105b075

Here is the link to my first application.
Based it on Manchester United FC as I am a huge die-hard supporter of Manchester United and could not think of anything else.
Please download and rate. Thanks :) It's totally free.

Read More

A funny button issue I encountered today

Today, when I added a button through Expression Blend ( It's basically Blend for Visual Studio 2013, but I have a bad habit of calling it Expression Blend :D ) I was having a huge dilemma: The background of my button turned light blue whenever I pressed upon it.
I was stuck upon this issue for at least half hour, before figuring out the solution. I suppose this might also be frustrating for my fellow amateur windows app developers.

So, here is the solution.
-> Drag the Button control from the top left of the Expression Blend screen as shown, and drop it onto the mobile phone screen in the middle.

                                                                                                                                                                    

-> After you are done with drag and drop, Right click on the button as shown and then select Edit Template Edit a copy as shown in the figure

-> Ok, now after you are done with this step, Rename the Template in the newly opened dialog box, Select the scope of the template whether you want it to be applicable in the whole application, or keep that style confined to only one page and click on OK.

-> Now,

a) Select States tab

b) Click on the small circle besides Pressed. 

c) Select Button Background. The Background of the button will glow red.

d) In the properties tab on the right, change the background attribute to TransparentBrush.

The result is,

No more irritating flashes of the button upon each click.

Happy Development!

Read More