NOTE: This post is written for developers having some knowledge of PHP/MySQL. So, if you find it difficult to understand some part, plz leave your comments. - Nilesh
So many developers thinks that its hard to provide multilingual support to website. Are you one of them? No problem. Here are some helpful tips to provide basic multilingual support for you website.
There are 3 different cases
CASE#1 Provide multilingual to static contents of site.
For e.g. if you have header navigation, left navigation in website OR if you have predefined messages e.g. greeting messages, validation error messages etc then you need to do following things.
Create one configuration file per language.
E.g. if your site has English and Hindi support, then create 2 language configuration files.
(1) en.lang.inc.php
(2) hi.lang.inc.php
Both file will content same data in following format.
(1) en.lang.inc.php
define(‘WELCOME’, ‘Welcome’);
define(‘SIGN_IN’, ‘Sign In’);
NOTE: you need to find all places in your application to check how many strings you need with multilingual support and store in this file.
(2) hi.lang.inc.php
define(‘WELCOME’, ‘<place here hindi version of - Welcome>’);
define(‘SIGN_IN’, ‘<place here hindi version of - Sign In>’);
On user side, you need to provide selection to choose language.
English will be default language so lang=en
Your application request to change language will be xyz.com/file.php?lang=en for English, xyz.com/file.php?lang=hi for hindi.
Once user will make selection store that selection in COOKIE and use that value later so, you don’t have to pass “lang” parameter in each request.
Write code in your application’s common include file (this must be included in every request), to include proper configuration file based on selection.
So if user select English, only en.lang.inc.php will be included and if user selects Hindi, then only hi.lang.inc.php will be included.
Now you need to replace all your static contents with php constants in HTML/template files.
e.g. if your signin page contains.
<h1>Welcome</h1>
Then replace it with <h1><?php echo WELCOME ?></h1>
So, page will load language specific contents.
CASE#2 Provide multilingual to images.
E.g. in header you have used one image for text “about us” then for hindi version you need same image with hindi text.
You can use two directories in your images directory. Image name must be same in two directories.
Images/en/about_us.jpg
Images/hi/about_us.jpg
Then you need to change your code to load proper image based on language selection.
So, your image code
<img src=”images/about_us.jpg”>
will look like
<img src=”images/<?php echo $lang ?>/about_us.jpg”>
CASE#3 Provide multilingual to page contents.
e.g. if you have provision in admin panel to add content for “about us” page. You need to provide selection, for which language you are entering data. So, in database you will have two entries/versions for about us pages for two languages.
e.g. DB entries will be like below.
en | about_us | English contents
hi | about_us | Hindi contents
While displaying it to user, your query must use “language selected by user” to get proper contents from DB.
WYSWYG / TinyMCE editor has multilingual support for entering data. That you can use for entering data, else copy the data from any translator (e.g .google) and paste it into editor.
Database table for storing Unicode contents; must need to have UTF-8 setting >> charset: UTF-8 Unicode (utf8)
Also, you need to add following META into your HTML head.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
That’s all!
How to set priority of a bug in a web application?
Software bugs are un-avoidable. No one can deliver bug free system at first stage. It means some how we need to deal with bugs. Here I have written some guideline to set bug priority in web application. One can use it for other applications too.
Consider a small web application where user can register and upload photos & videos after log in. I have used this example to visualize various conditions as below.
Here P1, P2, P3, P4 & P5 are priorities.
P1: Blocking, High level importance & Can occur during Testing/QA phase.
e.g.
(1) Development is done, but QA is not able to start testing as he is getting blank screen due to improper DB connection.
(2) User is not able to register or sign in.
P2: Blocking, Low level importance & Can occur during Testing/QA phase.
e.g. User is able to login but there is some problem in photo upload feature and user is not able to upload photo.
P3: Not Blocking, High level importance & Can occur during Development phase as well as Testing/QA phase.
e.g.
(1) Normally when ever you start developing some module, by default you can set priority to P3 for all your tasks.
(2) Forgot password feature is not working.
P4: Not Blocking, Low level importance & Can occur during Development phase as well as Testing/QA phase.
e.g.
(1) Design related issues. Thumbnails are not looking good for photos in photo album.
(2) Browser issues. Sign Up page is looking great in Firefox but not aligned well in IE & Safari.
P5: Not Blocking & Can occur during Development phase as well as Testing/QA phase.
e.g. Text changes. Error message is not proper / some spelling mistakes
You can deliver your project successfully if it passes following criteria.
Total P1 Open should be 0
Total P2 Open should be 0
Total P3 Open should be 0
Total P4 Open should be 5 (You can change this no.)
Total P5 Open should be 5 (You can change this no.)
Consider a small web application where user can register and upload photos & videos after log in. I have used this example to visualize various conditions as below.
Here P1, P2, P3, P4 & P5 are priorities.
P1: Blocking, High level importance & Can occur during Testing/QA phase.
e.g.
(1) Development is done, but QA is not able to start testing as he is getting blank screen due to improper DB connection.
(2) User is not able to register or sign in.
P2: Blocking, Low level importance & Can occur during Testing/QA phase.
e.g. User is able to login but there is some problem in photo upload feature and user is not able to upload photo.
P3: Not Blocking, High level importance & Can occur during Development phase as well as Testing/QA phase.
e.g.
(1) Normally when ever you start developing some module, by default you can set priority to P3 for all your tasks.
(2) Forgot password feature is not working.
P4: Not Blocking, Low level importance & Can occur during Development phase as well as Testing/QA phase.
e.g.
(1) Design related issues. Thumbnails are not looking good for photos in photo album.
(2) Browser issues. Sign Up page is looking great in Firefox but not aligned well in IE & Safari.
P5: Not Blocking & Can occur during Development phase as well as Testing/QA phase.
e.g. Text changes. Error message is not proper / some spelling mistakes
You can deliver your project successfully if it passes following criteria.
Total P1 Open should be 0
Total P2 Open should be 0
Total P3 Open should be 0
Total P4 Open should be 5 (You can change this no.)
Total P5 Open should be 5 (You can change this no.)
Improve web performance using CSS Sprites
A CSS Sprite is actually one big image. You can combine an unlimited number of images into one image to create a sprite.
Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.
Every single image, whether it’s an <img> tag or a background-image from your CSS is a separate HTTP-Request.
Following table shows popular web sites spending between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and style sheets). The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser.
Steps to create a CSS Sprite:
The idea behind CSS sprites is to consolidate multiple images into one sprite and then selectively display portions of this sprite with positioning. The steps are as follows:
• Group multiple images together (usually icons or decorative images) into one sprite
• Evenly space these images, aligned into one or more lines
• Set this sprite to the background image of an element (usually a list)
• Position the sprite to display the appropriate image by shifting the X or Y position by a multiple of the spacing.
Example:
I have used CSS to get a background-image instead of anchor tag directly.
Instead of having eighteen separate images for the buttons, we can combine all of them into one big long image. Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place your images into this new image, left aligned, one on top of the other with one pixel of white space in between.
With using a sprite.
Apply a single background-image to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.
With use of a sprite I was able to reduce the number of HTTP-Requests by 17 and the total file size of the image(s) by 10.3 KB.
With millions of users, Yahoo! and AOL do everything they can to improve the user experience. Both AOL.com and Yahoo.com use CSS sprites to save numerous HTTP requests for their intricate interfaces. Yahoo Sprite Example, AOL Sprite Example
Creating a CSS Sprite; seems a lot of work to me. I have used CSS SPRITE GENERATOR to create a sprite. Sprite Generator
ZIP all the images you wish to make available as sprites, fill in some basic information about prefixes and offset amounts, and click a button to generate the combined sprite image and CSS code for referencing those sprites. That’s all.
Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.
Every single image, whether it’s an <img> tag or a background-image from your CSS is a separate HTTP-Request.
Following table shows popular web sites spending between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and style sheets). The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser.
Steps to create a CSS Sprite:The idea behind CSS sprites is to consolidate multiple images into one sprite and then selectively display portions of this sprite with positioning. The steps are as follows:
• Group multiple images together (usually icons or decorative images) into one sprite
• Evenly space these images, aligned into one or more lines
• Set this sprite to the background image of an element (usually a list)
• Position the sprite to display the appropriate image by shifting the X or Y position by a multiple of the spacing.
Example:
Without using a sprite.
<ul id="sprite”>
<li><a class="icon1" href="#”>Icon 1</a></li>
<li><a class="icon2" href="#”>Icon 2</a></li>
<li><a class="icon3" href="#”>Icon 3</a></li>
<li><a class="icon4" href="#”>Icon 4</a></li>
...
</ul>
I have used CSS to get a background-image instead of anchor tag directly.
#sprite li a {background:none no-repeat left center}
#sprite li a.icon1 {background-image:url('icon1.gif')}
#sprite li a:hover.icon1 {background-image:url('icon1_over.gif')}
#sprite li a.icon2 {background-image:url('icon2.gif')}
#sprite li a:hover.icon2 {background-image:url('icon2_over.gif')}
...
Instead of having eighteen separate images for the buttons, we can combine all of them into one big long image. Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place your images into this new image, left aligned, one on top of the other with one pixel of white space in between.
With using a sprite.
Apply a single background-image to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.
#sprite li a {background-image:url('sprite.gif')}
#sprite li a.icon1 {background-position:0px 0px}
#sprite li a:hover.icon1 {background-position:0px -24px}
#sprite li a.icon2 {background-position:0px -48px;}
#sprite li a:hover.icon2 {background-position:0px -72px;}
...
With use of a sprite I was able to reduce the number of HTTP-Requests by 17 and the total file size of the image(s) by 10.3 KB.
With millions of users, Yahoo! and AOL do everything they can to improve the user experience. Both AOL.com and Yahoo.com use CSS sprites to save numerous HTTP requests for their intricate interfaces. Yahoo Sprite Example, AOL Sprite Example
Creating a CSS Sprite; seems a lot of work to me. I have used CSS SPRITE GENERATOR to create a sprite. Sprite GeneratorZIP all the images you wish to make available as sprites, fill in some basic information about prefixes and offset amounts, and click a button to generate the combined sprite image and CSS code for referencing those sprites. That’s all.
GMail - the buttons and menus at the top of your inbox looks different today onwards
Starting today, the buttons and menus at the top of your inbox will look a bit different:
One of the features that makes Gmail different is its use of labels instead of folders. Sure, labels can serve pretty much the same purpose -- they can help organize mail or flag messages for follow up. And unlike with folders, messages can have several labels, so if I get an email from a friend about a trip we're taking together, I can add both a "Friends" and a "Travel" label to it.
But it's not always obvious how to use labels, especially for people who are new to Gmail and used to using folders, and it hasn't helped that some common tasks have been more complicated than they should be. For instance, to move an email out of your inbox and into a label you first had to apply the label using the "More actions" menu and then click "Archive."
Instead of having to first apply the label and then archive, you can just use the "Move to" button to label and archive in a single step -- just like you would with a folder. If you just want to add or remove a label, use the new "Labels" button. Auto-complete works, so for those of you with a lot of labels, you can select the one you want just by typing the first couple characters.
They have also added keyboard shortcuts: v for "Move to" and l (lowercase L) for "Labels." Make sure you have keyboard shortcuts turned on to use these.
One of the features that makes Gmail different is its use of labels instead of folders. Sure, labels can serve pretty much the same purpose -- they can help organize mail or flag messages for follow up. And unlike with folders, messages can have several labels, so if I get an email from a friend about a trip we're taking together, I can add both a "Friends" and a "Travel" label to it.But it's not always obvious how to use labels, especially for people who are new to Gmail and used to using folders, and it hasn't helped that some common tasks have been more complicated than they should be. For instance, to move an email out of your inbox and into a label you first had to apply the label using the "More actions" menu and then click "Archive."
Instead of having to first apply the label and then archive, you can just use the "Move to" button to label and archive in a single step -- just like you would with a folder. If you just want to add or remove a label, use the new "Labels" button. Auto-complete works, so for those of you with a lot of labels, you can select the one you want just by typing the first couple characters.
They have also added keyboard shortcuts: v for "Move to" and l (lowercase L) for "Labels." Make sure you have keyboard shortcuts turned on to use these.
Is there a way to change YouTube player skin?
Many of you have tried embedding YouTube video in webpage using EMBED tag. It’s very easy. Just copy the code and paste it in webpage, it will start streaming video. You may think, what’s new here? Yes, you are right there is nothing tricky here. Wait for a while.
Check the second scenario. Let say you want to steam any random video (.flv) other than YouTube video. What options do you have? Either you can use built in flash video player with little customization to match look and feel with your website theme or you can use free open source flash video player (e.g. flowplayer) to stream your video. So, what’s exciting here? Nothing.
Now check the third scenario. Let say you want to steam video provided by YouTube, but want to change video skin to match look and feel with your website? What you will do? Is there any option available to change skin of YouTube player other than default skin?
Yes; it’s possible. You can choose “YouTube Custom Player” if you just want to change background color, name of the player and content of default YouTube player. Or you can user “YouTube Chromeless Player”. You can use either JavaScript APIs or Flash APIs to make your custom player.
See the demo here; cromeless player using JavaScript APIs.
I found some limitation in integrating this APIs
(1) YouTube has provided numerous functions to integrate. But it’s hard to control various events like play, pause, mute, un-mute etc. in design.
(2) The given example support embedding of only one video player at a time. What to do if you have more than one video on a webpage?
I have made a JavaScript class using JavaScript APIs which allows user to overcome both the listed issues.
You can download the class and example code here!
Also, check the demo here of what I have implemented.
If you find any difficulties using this class, please contact me.
Hope you will find this post helpful.
Check the second scenario. Let say you want to steam any random video (.flv) other than YouTube video. What options do you have? Either you can use built in flash video player with little customization to match look and feel with your website theme or you can use free open source flash video player (e.g. flowplayer) to stream your video. So, what’s exciting here? Nothing.
Now check the third scenario. Let say you want to steam video provided by YouTube, but want to change video skin to match look and feel with your website? What you will do? Is there any option available to change skin of YouTube player other than default skin?
Yes; it’s possible. You can choose “YouTube Custom Player” if you just want to change background color, name of the player and content of default YouTube player. Or you can user “YouTube Chromeless Player”. You can use either JavaScript APIs or Flash APIs to make your custom player.
See the demo here; cromeless player using JavaScript APIs.
I found some limitation in integrating this APIs
(1) YouTube has provided numerous functions to integrate. But it’s hard to control various events like play, pause, mute, un-mute etc. in design.
(2) The given example support embedding of only one video player at a time. What to do if you have more than one video on a webpage?
I have made a JavaScript class using JavaScript APIs which allows user to overcome both the listed issues.
You can download the class and example code here!
Also, check the demo here of what I have implemented.
If you find any difficulties using this class, please contact me.
Hope you will find this post helpful.
Subscribe to:
Posts (Atom)
Posts
