Shubelal Kumar

Text-shadow with CSS3, Photoshop like effects using CSS

2012-01-05T23:35:00.000-08:00

With the help of CSS3 finally get simple shadow. The text-shadow property is used as follows:

text-shadow: 2px 2px 3px #000;

CSS3 produces the following text with a shadow 3px right and below of the text, which blurs for 3px:

Users of Crome, Webkit 3+, Opera 9.5, Firefox 3.1 should see a grey drop-shadow behind this paragraph.

How to Embed Font in you HTML Webpage – Simple way to Embed Custom Web Fonts

2012-01-04T19:56:00.000-08:00

Simple Way to Embed Font in HTML Webpage

Easy Step to Embed Font in HTML Webpage. Many different ways you can embed custom fonts on your website without any server side processing and without killing SEO in your pages with the help of Typeface.js, Cufon, sIFR, CSS 3.0 . you know which one is best and easiest ways to embed fonts.

In this tutorial we show you different ways which you can use to embed font in html webpage. We Show the step how can you embed font in your HTML Page

There are 4 newer and better ways you can Embed Font in HTML Webpage

Typeface.js
Cufon
sIFR 3
CSS 3

The above mentioned ways have their own pros and cons which we’ll discuss as we go on, but most of the above listed ways are SEO friendly, with no server side processing and fast. But before we start we should mention most of the above mentioned methods are supported by recent browsers but older browsers will have rendering problem so depending on what you need you might want to check on the website as of the list of browsers supported.

Typeface.js

This works simply by using browsers capability to draw vectors in HTML documents. But before doing so the font must be converted to its internal format using the perl module.

1) Download Latest Typeface.js.

2) Convert the Font and download the js.

3) Link the js files in head.

4) Any HTML element you want to be rendered in typeface.js should have typeface-js in its class name and font-name in the CSS. If you are loading the style from external CSS make sure the CSS is linked on top of the js files. For my test i have used this.

Test of Gentilis Selectable Font

5) Demo Of The Above Method. Also refer to Typeface Usage for more details on its usage.

Cufon

This works similarly to Typeface, but main difference being the texts are NOT selectable which i think is a drawback, as far as embedding is concerned its almost same and as typeface, but the size in case of Cufon is less by some 40% with better loading time.

1) Download Latest Cufon JS

2) Convert the font and download JS

3) Link the js files in head, and just add the elements to replace in Cufon.replace(); css styles will be added from the predetermined stylesheet.

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="yourFont.font.js"></script>
<script type="text/javascript">//
 < ![CDATA[  // < ![CDATA[  // < ![CDATA[  // <
 ![CDATA[   
Cufon.replace('#cufon');  // ]]></script>

4) Write the body as usual no need to stick to certain class.

This text will be shown in Vegur.

5) Demo Of The Above Method. Also refer to Cufon Documentation for more details on its usage.

sIFR 3

sIFR use Javascript, Flash and CSS to implement the display of custom font. Good thing is the text are selectable and this method is perfectly SEO friendly. Bad thing is it requires users to have flash plug-in installed to display the font, and also the size of the final file is pretty large by 20-30% from Typeface method.

The implementation is not as straight forward as other methods mentioned above, many steps are required and you need to have Adobe Flash on your machine on 1st place, follow the Official Guide

Find here the Official Demo

CSS 3.0

As earlier as CSS 2.0 in 1998 it was implemented but discontinued in CSS 2.1, but again in CSS 3.0 it has been re-introduced. Compatible with all major latest browsers, this is really the best method unless again it is discontinued by W3C.

1) Declare each font-family you want to use using @font-face rule and styles all in CSS

@font-face { font-family: yourFont; src: url('yourFont.ttf'); }
  h1 { font-family: yourFont, sans-serif; }

4) Write the body code as usual !!

Website Usability Checklist : Web Page Accessibility Checklist

2012-01-03T21:14:00.000-08:00

About Accessibility

Accessiblity section contains not only traditional accessibility issues, but anything that might keep a visitor from being able to access the information on a website. If no one can load your site, or the type is too small to read, all of the usability in the world won't matter.

1. Site Load-time Is Reasonable

Call me old-school, but I still like to see sites come in under 100KB (60KB is even better). If a site takes forever to load, most people will just leave. Yes, many of us have broadband now, but that makes our patience even thinner.

2. Adequate Text-to-Background Contrast

Dark-gray on light-gray may seem stylish, but I'm not going to ruin my eyesight to read your blog. Eyes and monitors vary wildly, so keep your core copy contrast high. Good, old-fashioned black-on-white is still best most of the time.

3. Font Size/Spacing Is Easy to Read

Opinions vary on the ideal size for text, but err on the side of slightly too big. Poor readability increases frustration, and frustration leads to site abandonment. Also, make sure your line spacing is adequate - white-space is a designer's best friend.

4. Flash & Add-ons Are Used Sparingly

No matter how great your site looks, people won't wait 5 minutes for a plug-in to load. Use new technology sparingly and only when it really enhances your goals. Sticking to standard HTML/CSS is also a plus for search engines.

5. Images Have Appropriate ALT Tags

Not only do sight-impaired visitors use ALT tags, but search engines need them to understand your images. This is especially critical when you use images for key content, such as menu items.

6. Site Has Custom Not-found/404 Page

If a page on your site doesn't exist, a white page with "404 Not Found" is a good way to lose a customer. Create a custom 404 page, preferably one that guides your visitors to content.

About Navigation

Once people generally know who you are and what you do, they need clear paths to the content that interests them. Information architecture is a huge topic, but these points cover some of the basics.

12. Main Navigation Is Easily Identifiable

Almost every site on the web has had a main menu since the first browsers came on the market. Make your main navigation easy to find, read, and use. If you have two or more navigation areas, make it clear why they're different.

13. Navigation Labels Are Clear & Concise

Don't say "Communicate Online With Our Team" when "Contact Us" will do just fine. Your main navigation should be short, to the point, and easy for mere mortals to grasp.

14. Number of Buttons/Links Is Reasonable

Psychologists like to argue about how many pieces of information we can process, but if you start to get past 7-or-so menu items, think hard about whether you need them. If you've got 3 layers of flyaway Javascript menus, do yourself a favor and start over.

15. Company Logo Is Linked to Home-page

This may sound minor, but people expect logos to link to home-pages, and when they don't, confusion follows. I've seen video of users clicking on a logo over and over, with no idea what to do next.

16. Links Are Consistent & Easy to Identify

The underlined, blue link is a staple of the web. A little artistic license is ok, but consider at least making your links either blue or underlined. Links should stand out, and you should use them sparingly enough that they don't disrupt your content.

17. Site Search Is Easy to Access

If you have a site search, make sure it's prominent. Usability guidelines tend to prefer the upper-right corner of the page. Keep the button simple and clear - "Search" still works best for most sites.

About Identity

A key question when someone first comes to your site is "Who are you?" It's important to answer it quickly, and make the paths to obvious follow-up questions ("What do you do?", "Why should I trust you?", etc.) clear.

7. Company Logo Is Prominently Placed

Put your logo or brand where it's easy to find, and that usually means the upper-left of the screen. People expect it, and they like it when you make their lives easy.

8. Tagline Makes Company's Purpose Clear

Answer "What do you do?" concisely with a descriptive tagline. Avoid marketing jargon and boil your unique value proposition down to a few words. This is also a plus for SEO.

9. Home-page Is Digestible In 5 Seconds

In usability, we often talk about the 5-second rule. There's some disagreement over just how many seconds you get, but website visitors are a fickle bunch, and they need to get the basic gist of your home-page in just a few moments.

10. Clear Path to Company Information

The good old "About Us" page may seem boring, but confidence is important on the web, and people need an easy way to learn more about you.

11. Clear Path to Contact Information

Similarly, visitors want to know that they can get in touch with you if they need to. It's also hard to do business if no one can contact you. Preferably, list your contact information as text (not in an image) - it'll get picked up by search engines, including local searches.

About Content

You've heard it before - Content is king. If you don't want the kingdom to crumble, though, content needs to be consistent, organized, and easy to skim through.

18. Major Headings Are Clear & Descriptive

Most people don't read online, they skim. Use headings (major and minor) to set content apart and keep it organized. Headings should be clear, and for SEO benefit, using heading tags (<H1>, <H2>, etc.).

19. Critical Content Is Above The Fold

The "fold" is that imaginary line where the bottom of your screen cuts off a page. Content can fall below the fold, but anything critical to understanding who you are or what you do (especially on the home-page) should fit on that first screen. Average screen resolution these days is about 1024x768, depending on your audience.

20. Styles & Colors Are Consistent

Make sure people know they're still on your site by being consistent - confuse them and you'll lose them. Layout, headings, and styles should be consistent site-wide, and colors should usually have the same meaning. Don't use red headers on one page, red links on another, and red text somewhere else.

21. Emphasis (bold, etc.) Is Used Sparingly

It's a fact of human cognition: try to draw attention to everything and you'll effectively draw attention to nothing. We've all seen that site, the one with a red, blinking, underlined "NEW!" next to everything. Don't be that guy.

22. Ads & Pop-ups Are Unobtrusive

Ads are a fact of life, but integrate them nicely into your site. Don't try to force ads and pop-ups down peoples' throats. Also, do people a favor and make your ads clear. If you blur the line between ads and content too much, your content may suffer.

23. Main Copy Is Concise & Explanatory

This isn't a lesson in copywriting, but look at your home-page - can you say the same thing in half as many words? Try to be concrete and descriptive and avoid jargon - nobody cares if you can "leverage your synergies".

24. URLs Are Meaningful & User-friendly

This is a point of some debate, but meaningful keyword-based URLs are generally good for both visitors and search engines. You don't have to re-engineer an entire site just to get new URLs, but do what you can to make them descriptive and friendly.

25. HTML Page Titles Are Explanatory

More importantly, your page titles (in the <TITLE> tag) should be descriptive, unique, and not jammed full of keywords. Page titles are the first thing search-engine visitors see, and if those titles don't make sense or look spammy, they'll move on to the next result.

Image Alt Text Vs. Image Title : What’s the Difference?

2012-01-03T19:46:00.000-08:00

Image Alt Text Vs. Image Title : What’s the Difference?

Image Alt :
Alt tag describe about images, It is alternative information about Image.
Alt text is meant to be an alternative information source for those people who have chosen to disable images in their browsers and those user agents that are simply unable to view the images.

Image title:
Image title should provide additional information and follow the rules of the regular title: it should be relevant, short, catchy and concise (a title "offers advisory information about the element for which it is set"). In FireFox and Opera it showing like Tooltip.

Difference between GET and POST methods

2011-12-26T22:00:00.001-08:00

Difference in GET and POST method in posting data

We can send Request to the Server by both the GET and POST methods of a form. Both methods are used for form data handling where bothe have some difference on the way they work.

GET : In GET method data gets transferred to the processing page in name value pairs through URL, so it is exposed and can be easily traced by visiting history pages of the browser. So any login details with password should never be posted by using GET method.

i) Data is not secure.
ii) Data is appended to the URL.
iii) It is a single call system
iv) Maximum data that can be sent is 256.
v) GET request is comparatively faster
vi) This is the default method for many browsers

POST:
i) Data is more secure.
ii) Data is appended to the URL.
iii) It is a two call system.
iv) There is no Limit on the amount of data.That is characters any amount of data can be sent.
v) POST request is comparatively slower.
vi) No default and should be Explicitly specified.

View details

Display:None vs. Visibility:Hidden

2011-12-26T21:39:00.001-08:00

What's the difference between display: none and visibility: hidden

If visibility property set to "hidden", the browser will still take space on the page for the content even though it's invisible.
But when we set an object to "display:none", the browser does not allocate space on the page for its content.

Example:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

View details

How To Embed SWF In HTML Code

2011-12-22T22:23:00.000-08:00

Valid XHTML flash embed code | Simple flash embed code

Embedding Flash

</object>

View Details

How to Embed YouTube Playlists in a Website / WebPage

2011-12-22T22:21:00.000-08:00

How to Embed YouTube Playlists in a Website / WebPage

<object width="480" height="385">   
<param name="movie" value="http://www.youtube.com/p/ID"></param> 
  <param name="allowFullScreen" value="true"></param> 
  <param name="allowscriptaccess" value="always"></param> 
  <embed src="http://www.youtube.com/p/ID" width="480" height="385" 
   type="application/x-shockwave-flash" allowscriptaccess="always" 
  allowfullscreen="true">
  </embed>
</object>

View Details

How to Embed Flash and Non Flash in a Website

2011-12-22T22:17:00.001-08:00

Alt content for Flash browsers | Code for Flash and Non Flash

<div id="flashBannerContent1">

<a href="http://www.shubelal.com/" target="_self">

<img src = "storebilling-hero-756x252.jpg" border = "0" alt="Store Billing" title="Store Billing">

</a>

</div>

<script type="text/javascript" src="http://www.shubelal.com/script/swfobject.js"></script>

<script type="text/javascript">

var fo = new SWFObject("hero-756x252.swf", "frontpage", "756", "252", "8", "#FFFFFF", true);

fo.addParam("allowscriptaccess", "sameDomain");

fo.addParam("wmode", "transparent");

fo.addParam("menu", "false");

fo.write("flashBannerContent1");

</script>

visibility: hidden versus display: none.

2011-12-06T20:42:00.000-08:00

visibility: hidden versus display: none.

What are the differences and when would you use one over the other?

visibility: hidden means that the element is still there and taking up
space on the screen but just can't be seen. (the space taken up by the
content is just a white box).

display: none means that the content is taken out of the flow of the page
altogether. (it may as well not be there in the first place). So this space release.

Conditional CSS Comment for IE

2011-12-06T02:33:00.000-08:00

<p class="content">
<!--[if IE]>
Codes comes here
<![endif]-->

<!--[if IE 8]>
Codes comes here
<![endif]-->
<!--[if IE 9]>

<!--[if lte IE 7]>
Codes comes here
<![endif]-->
<!--[if gt IE 6]>
Codes comes here
<![endif]-->
<!--[if !IE]> -->

Codes comes here
<!-- <![endif]-->
</p>

Conditional CSS