Technology : The Vision of Future: October 2010

Tuesday, October 26, 2010

Building font-size based UI

While building pixel perfect website, sometimes we landup in major issue if we want to change the font of the website. In our pixel perfect a simple

change in font size or family disturbs whole layout. So to build font based web-page 'em' unit should be used to give dimensions to the containers.
'em' unit gets calculated , based on the basic font you defined for the page.
the basic formula goes like:
1em = basic font size of the page.

Lets say you defined font-size:12px;

now, suppose we want to build a div container with width 120px and height 240px.
.container{
    width:120px;
    height:240px;
    background:#aaa;
}

so to convert 120px into em:
120px (width of the container) / 12px (font-size) = 10em
and
240px (height of the container) / 12px (font-size) =20em

New CSS:
.container{
    width:10em;
    height:20em;
    background:#aaa;
}

Putting 'em' as unit, now if we happen to change the font size in future our container will change proportionately without disturbing the layout.

It is better idea to provide min-width /height to the container so that even if the font is reduced our design should not shrink, after some point our design remains static.

Tuesday, October 19, 2010

Make main container 100% of browser height

Often we realise that putting 100% height to main Container does not cover the whole browser height.
HTML is the stack of container where any child element inherit the properties of its parent element unless properties specified explicitly.
now when we give "100%" height to our div it takes 100% height of its parent element.
So,

<html>
<body>
<div class="mainWrapper">This is My Wrapper Div </div>
</body>
</html>

CSS:
.mainWrapper{
height:100%;
width:100%;
background:#aaa;
}

Now here, <body> is the parent element of <div> so <div> will take 100% of <body> height. But since we have not defined any height for <body> , we cannot see any change in the height of div.

Adding couple of more entries in our CSS files may add success to our problem:

html,body{
height:100%;
}

.mainWrapper{
height:100%;
width:100%;
background:#aaa;
}

Putting this CSS can give you 100% browser height to your <div>. Since <html> and <body> are parent elements. We provided them 100% height which says <html> and <body>
elements to take 100% of browser height.

Thursday, October 7, 2010

Share your Blog / Website articles in facebook, twitter, linkedIn, buzz

Some quick ways to create buttons for your website/blog and share your articles on buzzing social networking.

Copy and paste the following codes in single.php in your wordpress theme.
1. Official Tweet Button:
goto twitter.com -> Goodies -> tweet button
make necessary settings and copy the generated code in you single.php

Something Similar link gets generated:
<a class="twitter-share-button" data-count="none" data-via="shrutijakhete" href="http://twitter.com/share">Tweet New</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>

2. Facebook like button:
Facebook like button can be integrated in two ways.
1. Iframe
2. Javascript Version

Iframe is the easiest way to put like button whereas javascript version allows you customize your settings. Thanks to hyperarts.com they have explained javascript version is explained here quite well.

Using Iframe:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:30px;"></iframe>

3.LinkedIn:
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink();?>&title=<?php the_title();?>&source=<?php wp_title();?>" target="_blank"><img src="http://static03.linkedin.com/img/pic/pic_logo_119x32.png" border=0 alt="Share on LinkedIn" title="LinkedIn" height="20px"></a>

4. Buzz:
<a class="google-buzz-button" data-button-style="small-count" data-locale="en_IN" href="http://www.google.com/buzz/post" title="Post to Google Buzz"></a><script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>

Reference:
1. http://www.developer.facebook.com
2. http://www.twitter.facebook.com
3. http://www.developer.linkedIn.com