Tag Archives: web

Full Screen mode web-apps, a beautiful butterfly waiting to fly out

Posted on by
 

One of the best things in iPad and tablets are the magazine kind of apps. The pictures and other updates rendered so really well in the full screen and there’s no eating out of spaces by scrollbars, titlebars and menubars. It’s a kind of visual presentation for the user apart from the conventional stream based updates.

image

Image Courtesy – http://flipboard.com/

Apple has learned this and introduced the full screen mode in Mac OS X Lion for most of their native applications. The developers can also leverage full screen mode to make their applications beautiful. But I am not so sure how this can impact the experience except few applications like iPhoto etc. 

Image Courtesy – http://apple.com

What I am talking is slightly different. It’s a browser’s perspective. Most of the browsers are already has full screen mode. But the web programmers are unable to make use of this change to present things in pretty good way. I’d really love to see my facebook updates in a full scape landscape without the help of any third  party applications. The photos, updates etc can be presented so well without the annoying left and right sidebars plus, the vacant area left on both sides meet the standard resolution requirements.

Even it’s not in full screen mode,  the best example would be NYTimes Google Chrome App. It’s simply brilliant and make use of the space available in any resolution. And they’ve a great amount of content to spread across the screens. When I am working with 1920×1280 resolution monitor, I really can’t appreciate the too much vacant space on maximize or turn in to full screen mode.

image

Another example could be the Skype updates on Facebook. Though they’re limited their updates to a 3 column, but still it’s nice treat for the eyes and can get things so easily. This is practically impossible with the current rendering view of facebook.

image

The browsers must provide and option for the web developers to leverage the full screen mode for their applications. Even this would be quite helpful for future touch based screen and the websites with Rich content to present it well to the user.

 

Why do websites create their own shortened URLs?

Posted on by
 

When the URL shorteners started rolling out http://tinyurl.com and urltea.com played the game well initially. Now the most popular shortening service is http://bit.ly, which provides APIs, tracking clicks, custom URL addresses if available, etc. Nevertheless some websites still create their own URL addresses for redirection. What do they benefit from doing this?

  • Using external services is always risky.
  • The url shortening services may go offline soon due to find right finance to continue the service. Companies may end up losing all their data
  • Regulation issues (read this: http://thenextweb.com/socialmedia/2010/10/08/libyas-clarifies-the-vb-ly-takedown-bit-ly-can-breathe-easy/).
  • Have more flexibility and can have their own page ranking and manipulation algorithms
  • Branding is important especially for big corporates. (e.g ford can represent their tiny Urls like http://fo.rd/123)

You can see more updates on this on my discussions in Quora – http://qr.ae/uAfc

 

How to use Google font API in your blog?

Posted on by
 

I like readable fonts, slightly big in size. But I’m quite bored with the standard fonts we’re seeing for ages like Arial, Verdana, Georgia etc. Recently I tried of another simple experiment with my blog by enabling open webfonts created by Google. I like the font collection provided from Google. In Windows, I like Segoe UI and Calibri which is the most readable fonts bundled with Windows. In the apple world, I personally like Helvetica but the problem is, these wont run across platforms. I agree most of the visitors in my website are Windows users but I still like to have a unique look for my website across browsers and platforms. Also in the old version of Windows, Calibri and Segoe UI is not available by default. Also the purpose of this post is to letting someone know, there some simple beautiful things are happening around to try with.

font_api-128

 

Google webfonts are available through Google Fonts API which helps you to add web fonts to any webpage. Google fonts are high in quality, extremely easy to use and it works with most of the browsers in any platforms. There are two methods to use Google open fonts in your website, the first one is very basic usage of CSS and second version called WebFont Loader which is giving advanced usage of fonts and give far more flexibilty using JavaScript.

Here I’m covering only the basic usage of enabling Google fonts in the website.

1. Add the sytlesheet link request to the required font.

With a wordpress blog, I prefer you’re adding this in header.php file.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

2. Select the CSS elements which need to apply the fonts with 

CSS selector {
  font-family: 'Font Name', serif;
}

Or inline stle with div tag

<div style="font-family: 'Font Name', serif;">Your text</div>

 

A Simple Example

Here’s the way I updated my blog font

Added link code in Modified Header.php 

<link  href="//fonts.googleapis.com/css?family=Nobile:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >

Modified the stylesheet.css and select the body with the Nobile font I selected

body {
  font-family: 'Nobile', serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: 0em;
    line-height: 1.4em;
}

How to easily generate the Google Font API stylesheet code?

You can simply generate Google Font API CSS style sheet using Google font preview page. The modified parts will simply highlight in Yellow color and you’ve perfect control over vertical and horizontal spacing decoration etc. I prefer you to use this page to generate flawless CSS code.

image