The Yahoo UI library is the reason for most of the cool functions you see on some of Yahoo’s sites, like Flickr and Delicious. It’s still in active development by Yahoo and the community of YUI developers. It offers a lot of functions, Ajax support and animation effects. It’s cross-browser, and it’s packed with rich UI elements, like dialogs, calendars, WYSIWIG editors, sliders and DataTables. Both demos and documentation can be found at

The YUI Animation library

In our example, we’ve put together a few examples on how to use the Yahoo animation library. The first thing we did, was to include the YUI core and the minified version of the YUI animation library. We include these two files directly from Yahoo’s own servers, both to save bandwith, and to let the visitors use the cached version of the files if they’ve already visited a site that’s using these. The code for including the scripts:

 
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>

Now we have the javascripts we need. Next thing to do is to use them. This block shows you the code for the first example:

<div class="block">
    <h3>Animating a property</h3>                            
    <p>Click the block below to animate the width of the block.</p>
    <div id="demo1"></div>
    <script type="text/javascript">
    YAHOO.util.Event.on('demo1', 'click', function() {
    var anim = new YAHOO.util.Anim(this, { width: { to: 200} });
    anim.animate();
    });
    </script>
</div>

Check all the examples on our demo site: YUI examples
If you want to download the whole example, you can do so here:

  YUI Animation Tutorial (1.9 KiB, 560 hits)

First of all, do not dump support for Internet Explorer 6, that is not the intention of this article. The point is to, where possible, ensure that your site works in IE6. But where it’s not possible, or you would have to spend too much time and energy on writing “hacks” to make it work, you can apply a warning/information to consider upgrading IE or to use another browser.

What not to do

The point is to encourage the user to upgrade, not to force an upgrade (telling how dumb the user is by using IE6). If a site is already works as it should in IE6, or if you could invest very little time in getting it working, it’s better if you don’t include a warning at all. At least you could try to integrate the IE7 JavaScript library, available from , or by overriding some of the CSS via an IE6-specific style sheet. The image below shows Joe Levi’s one-line upgrade method, “scaring” people to upgrade by pretending an OS alert, but encouragement is better than underhand methods.

When to warn

Generally, you should only show warnings when they’re directly beneficial to the user, such as a major part of the site is based on functionality that does not work or render properly in IE6. If you misuse your trust as a website owner, and force the user to upgrade for no practical reasons, it will just be an unnecessary hassle for the user. And when they return to the site with a new or updated browser, only to see that site has no changes, they’ll lose all trust in it.
If you get too “hung-up” in hating IE6, and decide to block access to all IE6 users, you can be pretty sure that they will never return, regardless of what browser they later end up with. The choice must always always rest with the user, they have to be in control of making the decision. And if they don’t want to upgrade, that’s down to them and it’s their loss. However, with the right approach, you can encourage them by explaining the benefits of switching or upgrading their browser, you’re more likely to get a positive result this way. The image below is from Travellerspoint, and it looks nice.

Be kind

The truth is, while you and me know that it is better to either upgrade or switching your browser, many users aren’t even aware that alternatives to Internet Explorer exists. Also, many people still have to use IE6 at work. With this in mind, we should create the warnings-text in a kind way. Tell the user that they’re using an old browser and that, because of this, the site they’re currently on won’t look its best, and some functionality might be unavailable. Then suggest that, for a better browsing expreience, they should consider upgrading.

Applying the warning

It only takes a few lines of html code to apply the IE6 warning. You need to make use of conditional comments to apply it to your website. The code below is one way of doing it. It wraps a conditional comment around the relevant code block:

Modern, compliant browsers will just ignore this block of code. But versions of IE below version 7 will read it and treat it as html. So, if this was read by an IE6 browser, it would generate the html placed in the block, but if it was by IE7 or IE8, it would ignore it.

So, the conclusion would be: Keep it simple, keep it polite, and reassure and assist IE6 users, rather than showing them the finger.

A favourite icon, called favicon, is the small icon that is displayed in the browser address bar, and it will also show in your bookmarks. It is a lot easier for the user to find the bookmark of your site, if you have created a favicon, and attached it to your website. If you look in your browser bar right now, you can see a pink little graphic square, this is the favicon of this site, making it easy to remember that you may have visited this site earlier. In short: using a favicon will improve the overall look of your website. So, how do we create a favicon? The favicon of this site is made in Adobe Photoshop.

Favicon information

Favicons have the extension .ico, and they must be named favicon.ico. The dimension of the icons must be 16×16.

Photoshop

To make .ico files in Photoshop, you need to download a plugin. This can be found here, it’s a Windows Icon Photoshop plugin. When you have done this, then you can start by creating a new file, but remember that it needs to be downsized to 16×16, so you can create a new file with the dimensions 128×128, 64×64 and so on (you get the idea?). Then, design your new amazing looking favicon, and last but not least, go to Image Size and click on Resample Image. This option is better than just selecting Image Resize, because it will make sure that the image does not blur when you scale it down.

Upload the icon

The only thing you need to remember here, is to upload it to your sites root directory.

Edit your header

You also need to edit the header section of the files in your website. It should look like this:

<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>

That’s it! Now you can test in your favourite browser, it looks better now, right?

AJAX (Asynchronous JavaScript and XML), or Ajax, is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactivity of web pages achieved by exchanging small amounts of data with the server “behind the scenes” so that entire web pages do not have to be reloaded each time there is a need to fetch data from the server. This is intended to increase the web page’s interactivity, speed, functionality, and usability.

AJAX is asynchronous; in that extra data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page. JavaScript is the scripting language in which AJAX function calls are usually made.^[1] Data is retrieved using the XMLHttpRequest object that is available to scripting languages run in modern browsers, or alternatively Remote Scripting in browsers that do not support XMLHttpRequest. There is, however, no requirement that the asynchronous content be formatted in XML.

AJAX is a cross-platform technique usable on many different operating systems, computer architectures, and web browsers as it is based on open standards such as JavaScript and the DOM. There are free and open source implementations of suitable frameworks and libraries.

Constituent technologies

AJAX uses a combination of:

• XHTML (or HTML) and CSS, for marking up and styling information.
• The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented.
• The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added <script> tags may be used.
• XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text and JSON. These files may be created dynamically by some form of server-side scripting.

Like DHTML, LAMP, and SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies.

The “core” and defining element of Ajax is the XMLHttpRequest object, which gives browsers the ability to make dynamic and asynchronous data requests without having to reload a page, eliminating the need for page refreshes.

Besides XMLHttpRequest, the use of DOM, CSS, and JavaScript provides a richer “single-page” experience.

[Source: wikipedia]

If you’re a webdesigner, why not sell your templates at CssTemplatesWeb? It’s easy!
You don’t even know how to code (x)html. Just send your layout that you’ve made in Photoshop as a .PSD file, and I will make the necessary steps to code it to a valid css template, or send the finished template. Either way, you’ll make money!

What’s in it for me?

Money, fun and learning.

• If you send a finished coded web template, including all images, css, htm and psd files, you’ll get 70% of the selling price at CssTemplatesWeb
• If you send the layout as a psd file only, you’ll get 50% of the selling price of the finished coded web template sold at CssTemplatesWeb

What type of templates?

There’s no limitation on what type of templates that is put out for sale on CssTemplatesWeb. Here’s a list of the most common types of templates:

• xhtml/css based templates, with psd file included
• WordPress themes
• Zen Cart themes
• Flash templates
• Photoshop files (buttons, logos etc.)
• And so on..

Pricing

The price for xhtml/css templates will be $9. The other types of templates is up to you to decide the selling price. But the price can not be more than $50. This is because we want to have a price guarantee for all our customers.

Payment

All payment is done with Paypal. This is a secure payment provider, offering options to pay with Visa, Mastercard, AMEX and Discover. Customers do not have to create Paypal account to pay. If you want to sell your templates, you have to create a Paypal account, because your payment will be done with Paypal.

Submit

Are you ready to submit? Then go ahead! Submit Form

• XHTML stands for EXtensible HyperText Markup Language
• XHTML is aimed to replace HTML
• XHTML is almost identical to HTML 4.01
• XHTML is a stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application
• XHTML is a W3C Recommendation

XHTML 1.0 became a W3C Recommendation January 26, 2000. W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML.

XHTML is compatible with HTML 4.01, and all new browsers have support for XHTML.

Why XHTML?

We have reached a point where many pages on the WWW contain “bad” HTML, the following HTML code will work fine if you view it in a browser, even if it does not follow the HTML rules:

Bad HTML

XML is a markup language where everything has to be marked up correctly, which results in “well-formed” documents.

XML was designed to describe data and HTML was designed to display data.

Today’s market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a “bad” markup language.

Therefore – by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future – XHTML.

XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write “well-formed” documents now, that work in all browsers and that are backward browser compatible

CSS means Cascading Style Sheets. CSS is a system of rules that directly effect the display properties of your web pages such as colors, fonts and layouts. CSS style blocks are also commonly referred to as rules. These rules can be embedded into an individual HTML page or placed in an external file that will control many individual pages on your website. Thus changing a property in one place in the linked style sheet will immediately make that change on every web page that is linked to it.

“CSS Web Template” is a website design created using Cascading Style Sheets (CSS) technology. Cascading style sheets provide web developers an easy way to format and to style web pages. CSS will be used even more because it is seen the same way by all browsers, making it the best option during the browser wars.