CSS - OOCSS,sprites,media queries

Audio blog on CSS sprites

Object oriented CSS:
    We are already familiar with object oriented programming. It means grouping behaviour and methods. In CSS we split the skin and the structure. The ultimate aim of this is to increase code reusability and make the code more readable.
Skins are visible attributes like color,gradient,visible borders etc..
Structures are dimensions essentially.
A particular skin can be applied to two or more elements having different structures. So when you separate skin from structure you can reuse the same skin for different elements. This is the basic concept behind OOCSS.

Media queries:
    The CSS statements that involve selection of some sort of media(screen, print, mobile etc..) are called media queries.
For example,
@media all and (min-width:500px) { … }
The statements inside this block will be executed for media type where the screen width is of minimum 500px.
Media queries are very helpful in creating layouts which changes according to the device used.

Sprites:
My favorite topic of the day!!
Sprites are nothing but collection of images stitched as single image. The stitching can be horizontal, vertical or in some random manner suiting your needs.

Why to use sprites?
Remember this for images,
sum of sizes of individual images > size of sprite containing all images
also,
for fetching an element of a web page a http request has to be sent to the server. So,
more images to load in a page ==> more http requests
more http requests ==> more time to load the page !!
Thus by using sprites loading time of a page can be greatly reduced.

How sprites work?
When you need to display an image, you just create a div and display that portion of the larger image which contains the specific image you want.
Consider sprite as a big canvas with lot of small paintings or images. The div you create acts as a small window through which you can see only small portion of the canvas. When you move the canvas behind the window you can see different images based on what part of canvas is now visible through the window.
Hope u get what i mean.. feel free to drop comments if you don’t get my point !

Other notable points about sprites:

• Sprites can be used when you have lot of small images to load.
• They can be very helpful when behaviour of an image changes depending upon user interactions(hover,click etc...)
• They can be used to create an animation
• Many Google doodles use sprites to create video like effect

My experience with sprite:

http://www.google.co.in/logos/2011/gumby11-gumby.jpg

This is an example of sprites image. It came as a part of a google doodle. I thought of animating it. I will share the code for doing the animation.
pic1- shows the html code. Javascript is used to change the background position of the div created. (in my words background position determines the position of the canvas behind our window , the div ). Javascript also does the job of calling the function repeatedly in a set time interval to change the background position of the div .
pic2- shows the CSS code that is used to alter properties of the div created. Note that background of the div is our image !

Pic 1 the html file

Pic 2 the CSS file

See you in next post.


Trained at Sourcebits

CSS - the box model

Its worth dedicating a blog entry for explaining the box model.

Audio blog on CSS box model
CSS box model:
Every page element is a box !! I guess this is the single most important thing you need to understand before learning anything about Box model of CSS.
The box has,

• content
• padding
• border
• margin

I will explain the box model with a simple example.
Suppose you are having an unordered list. The whole list is a box and in turn each list element is a box.
The box has a border. You can make this border visible by giving it solid pattern and some color and thickness.
For example,
li {
border: solid 2px red;
width: 50px;
}
Now you can see the border surrounding the list element.
From here explaining padding and margin is pretty simple.
Let’s assume you have given a width of 50px for the list element.

Padding:
It specifies the space between the content and the border. Individual padding values for top, right, bottom or left side of the box can be given. Now in the above example if you give,
padding: 10px;
It makes sure that there is 10px space on all four sides of the box, between the content and the border.
Note: It adjusts the total size so that the width of the content doesn’t get affected. Imagine the box getting bigger !!

Margin:
Padding affects our box. Whereas margin affects things around our box. Imagine margin as some imaginary force pushing objects around our box so that there is always some free space between our box and other boxes.
The margin values you give determine to what extent other objects get pushed.
margin:20px;
It makes sure that no other object is within 20px range (calculated from border) of our box.

Here am showing three images to make it better to understand what i said above,
pic 1: Shows our box with only border.
pic 2: Padding is added (look how only the box gets bigger and the content doesn't shrink)
pic 3: margin is added ( look how objects near our box gets pushed... actually our box moves to the right to accommodate the margin change)

Pic 1 (only borders)

Pic 2(with padding)

Pic 3(with padding and margin)

The difference in text size is due to my improper screenshot techniques !!
 See you in next post.


Trained @ Sourcebits

HTML more concepts

Audio blog on Html more concepts


How the browser works?
    A browser has various functions like sending request, getting response, rendering a page and displaying it for users etc... So how does it do these things?
A browser has many sub parts that handles different functionalities. User interface , javascript interpreter, networking module etc...
But the most important component is the one which renders web pages... the browser engine !
Different browsers have their own way of rendering web pages and hence their own engines as well.
Chrome and safari use webkit. Webkit was developed from KHTML by apple and then made open source.
Internet Explorer uses trident which is a microsoft invention.
Firefox uses Gecko which is developed by mozilla. It's also used for thunderbird and other mozilla applications.
Opera uses presto.

What browser engine does?
In short it parses the marked up content(html) and builds DOM tree which is inturn combined with the styles and finally painted in the browser for users to see!!
Parsing involves lexical and syntactic analysis.
Lexical analysis --> tokenizing. Keywords are separated.
Syntactic analysis --> tokens from lex are fed into syntactic analyzer. It will use some sort of context free grammar for understanding the page’s contents and syntax.
After parsing painting job is done !

Page layout:
Page layout determines what elements of the web page are going to be present where.
There are different types of layouts. You can fix the position of an element or make it relative. It all depends on your needs. People view the web page you develop in different devices. The layout should make the page appear good in every browser and in every device. You can read about the layouts in this link here...
http://sixrevisions.com/web_design/a-guide-on-layout-types-in-web-design/

Browser specific contents:
There will be always certain contents that will work correctly on one browser and crash pathetically on some other browser (mostly IE :P ). So browser specific codes are mostly written to give specific instructions to specific browsers.
Conditional comments are used to give browser specific code.
For example,
<!-- if IE> .....
This conditional comment will make IE to use the code following it. Other browsers will ignore the code.
In css @ symbol is used to mention the browser name for which a particular style is written.
@-moz-document
The above modifier like thing will make the style following it apply only to firefox.

Div vs Table:
When contents are arranged in a table it gives a near and structured view. Web developers have been using table to arrange page elements for a long time. But it's not the right way to do it. In other words semantic html doesn’t allow this ! After introduction of CSS and div tags... page layout is done mostly using them.
div is always the better option for page design. There are many reasons for it like it's difficult to parse tables, it's difficult to modify a page designed using tables etc..

Web page designed using tables

The web page

My experience: I tried designing the web page i designed yesterday ( look yesterday’s blog images please :) ) using tables. It was definitely not easy. Learning curve of css may be long but once you are comfortable with css you will definitely hate table design. What i feel is that separating styles from html is a great practice . It gives a sense of clarity to your web page !!
See you in next blog !


Trained @ Sourcebits

HTML

Audio blog about HTML
If you are expecting html syntax, tags and stuffs. This is not going to be the place. I will discuss some basic concepts relating to html,browsers and stuff.

HTML:
It stands for hypertext markup language. 
Hypertext --> responding text ( links !! )
markup --> annotating a text (tags !! )
So HTML is a language in which you have annotated and responding texts . The annotation is for browsers to understand and render the web page. Simple right?

Markup :
There are three main types of markup. They are,

• Presentational markup : The one you see in text editors. It's based on what you see is what you get (wysiwyg). The markup is hidden from the humans so that they can see only the output.
• Procedural markup : Those who worked on LaTex would know how a descriptive markup would look like. The text processor reads your LaTex file from top to bottom and manipulates your markups to produce the desired output.
• Descriptive markup : Rather than giving instructions on how to process, this kind of markup just gives label to stuff.

The differences are very minimal and they are getting even lesser day by day with growing concepts and technologies!
HTML is a standard markup language. There are also large number of unstandardized markup languages like the one wikipedia uses for allowing users to edit wikis.

The meta tag !
    It's one common tag in html. But many users don’t get it fully.Meta tag is used to give information about data in web page. Content of meta tag are not actually visible to humans viewing the web page. Let me try explaining. This tag has 4 attributes. They are,

• content
• http-equiv
• name
• scheme

In html 5 charset has also been added to meta tag.
http-equiv is for specifying the HTTP headers that should be sent before sending the content.scheme attribute is just optional.

name and content are the two most commonly used attributes.
<meta name=”xxx” content=”yyy”>
Search engines used to see the contents of meta tag for ranking pages once. Now the situation has changed because website owners can give wrong information about a page in meta tag and get undeserved traffic to their page. Description of web page or keywords in web page can be specified in meta tag. This may be used by machines inturn ( crawlers, RSS feed generators etc.. )
<meta name=”keywords” content=”c c++ java programming”>
That’s pretty much everything about meta tags.


Browser modes:
There are two main modes in which a browser operates. They are quirks

• quirks mode and 
• standard mode

In earlier days during the introduction of java script and more functionality each browser had its own methods and ways of implementation. Web pages were written that time using those functions. Now after standardization we have a universal standard. But old pages should also work fine now. So web browsers use a mode called quirks mode which enable them to render old pages correctly.

In standard mode only web elements that comply to the present standard alone will be rendered correctly.

There is also a mode called almost standard mode in some browsers which neglect accepts nonstandard methods as well.

DOCTYPE is used to tell the browser what version of html we are using. 
for html 5 , the latest standard <!DOCTYPE html> is given and it tells the browser to run in standard mode.

Semantic HTML:
    It's nothing but HTML page written according to the correct semantics. That is, usage of proper tags in proper place. For example, a line break can be given using <br> as well as <p></p>. The correct procedure is to use <br>. This is called as following the semantics. Usage of semantics has many advantages as well.
For example,
An important text can be made bold by the use of <b> as well as <strong> tag. The semantic is to use <strong>. Normal users won’t find any difference in the implementation. However when the page  is processed using an aural browser(for deaf people). The text to speech system reads <b>(bold) text as normal text only. But <strong> text is read in a different way stressing the importance of the text. That’s the importance of using semantics !
Not only aural browsers, crawlers of search engines also give importance to the <strong> tag !
Always keep in mind that humans are not only the readers of your web page. Machines read them too !!
It's a part of semantic html to separate the text/data from styles. Now let me explain what happens if you don’t follow the semantics.
You have page A and B having the word ‘java’ 5 times.
Page A has separated the styles and the html content is just 10 KB.
Whereas page B has both styles and data in same html page and its size is 30 KB.
Now can you guess which page will have higher priority or rank when searched for the keyword ‘java’.
Obviously it's page A. Because it has higher percentage of occurrence of the word ‘java’ in its page !! 
Understood how semantic HTML can be so important.

DOM:
It stands for document object model. It's just a convention for representing elements. It's language independent.In html document is an element , a form within a document is a child object. Hope you get the point.

Page layout and CSS:

As part of practicing i wrote a sample page that will make clear basics of html and css. Take a look  

HTML file

CSS file

Output in browser

See you in next blog!


Trained @ Sourcebits