Presentation for an HTML5 website..ShYaM..

HTML5

Web Development to the next level 

*Including other next generation technologies of the Web Development stack

  http://slides.html5rocks.com/#slide1

Source : http://slides.html5rocks.com
ShYaM D Man U Love...

Random header image on page refresh (applicable to Drupal theme)..ShYaM

Some time back, we needed to get a random header image on every page refresh for a client. So I devised a simple way to select a header image from any 5 given images and show it on a page. How did I do it with PHP and CSS is explained below:

The Template File
First you need to find out the div where the random header image is going to be displayed, as its the header image then its obivious that we need to add a class to the header div. Problem is how is the single class going to have 5 different images as its background and that also changed in every page refresh.
For this just add a class called header-x, x is replaced with a random number between 1 and 5 by using PHP's rand() function. This will require your template to be a PHP file, if you are using a CMS like Drupal then in Drupal edit the header div's code in page.tpl.php file as below:

The CSS Code

After the template is fixed, now you have to apply a different background image to the classes 1-5. So header-1 will have header1.jpg,.... till header-5 will have header5.jpg as its background image. The code can be seen below 

Enjoy....ShYaM d man u love.....

CSS3 Rounded Image With jQuery..ShYaM

The CSS Trick

The trick is very simple: wrap a span tag around the image element. Specify the original image as background-image. To hide the original image, specify opacity:0 or display:none. I find using the opacity method is a better approach because the image will remain available for copy or download.

Final Solution With jQuery

To make things easier, we can use jQuery to automatically wrap a span tag around the image.
The jQuery code below will find any element with ".rounded-img" or "rounded-img2" (in my case, it is the image element) and wrap it with a span tag. The script finds the src, width, height, and CSS class attribute of the original image and apply them as inline styling in the span tag. Then it specifies the opacity of the image to 0 to hide it.
It works with any image dimension (with or without the width and height attribute). It can also be combined with other CSS classes. No additional markup is required.

<script type="text/javascript" src="jquery-1.4.2.min.js">script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') +

 '" style="background:url(' + $(this).attr('src') + ')

 no-repeat center center; width: ' + $(this).width() +

 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
script>

Source:http://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/ 

47 Amazing CSS3 Animation Demos...ShYaM

47 jaw-dropping CSS3 animation demos. 
They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!

Source:http://www.webdesignerwall.com/

CSS3 Multiple Background..ShYaM

Here is a very simple example showing the use of multiple background images in one div. Is this the end of nested elements with tons of CSS to create a layered effect? Hope so.
#multipleBG {

border: 5px solid #cccccc;
background:url(img1) top left no-repeat, url(img2) bottom left no-repeat, url(img3) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;

}

Browser Support:
FireFox 3.6 and later, Google Chrome 1.0, Opera 9.6, Safari 3.2.1

Source:http://www.css3.com

YouTube Video Player Uses HTML5..ShYaM

Youtube introduced a video player which uses the HTML5 video tags. If your browser can support this video tag and the YouTube video you want to use doesn’t include captions, annotations and doesn’t show ads, you’ll be able to watch this video in YouTube’s HTML5 player. Here are some highlights of the player.
HTML5 is a new web standard and is gaining rapid popularity. It enables features which enhances your web experience and supports video and audio playback.

 This means that users with an HTML5 compatible browser and the appropriate codecs don’t need to download separate browser plugins.
It should be noted that for now, the browsers which are compatible with this video player include the following:
· Firefox 4 (WebM,)
· Google Chrome
· Opera 10.6+ (WebM)
· Apple Safari (h.264, version 4+)
· Microsoft Internet Explorer 9 (h.264)
· Microsoft Internet Explorer 6, 7, or 8 with Google Chrome Frame installed
Keep in mind that this player is still in the experimental phase and there are limited videos produced for this format. However as the bugs get worked out and HTML5 gets more mainstream, you are sure to se this player pick up in popularity.
It’s an open platform so there are a lot of people working on it and enhancing it. There are a few other things to note as listed in the YouTube support page for HTML5.
· Fullscreen support is partially implemented. Pressing the fullscreen button will expand the player to fill your browser. If your browser supports a fullscreen option, you can then use that to truly fill the screen
· The HTML5 player has a badge in the control bar. If you don’t see the “HTML5″ icon in the control bar, you’ve been directed to the Flash player (due to restrictions listed below)
· The HTML5 player also has a badge to indicate the video is using the WebM format. If you don’t see the “WebM” icon, the video is encoded using h.264
· If you want to find videos with WebM formats available, you can use the Advanced Search options to look for them (or just add &webm=1 to any search URL)
And for those of you who really aren’t sure what the big deal is about this player and HTML5 in the first place, it is designed to replace the Flash player/plugin. This player hogs a lot of computing resources so migration to a video player which operates under HTML5 will enable a much more efficient and faster process. So those high def movies won’t slow down the rest of your system..

Source : http://html5tutorial.net/

Taggify Photo Tips For HTML5

Taggify is a web widget which allows bloggers and publishers enhance their sites by adding visual tags to any site’s images. Visual tag is a clickable image region tagged with some title, description and link. When vistor moves mouse over such region Taggify shows popup tooltip with interesting content provided by the publisher.

Source : http://net.tutsplus.com/freebies/tooltips/taggify-photo-tips/
Source : http://www.taggify.net/

Build a Custom HTML5 Video Player: Free Premium Tutorial

Complete HTML5 video tutorial,Click n See friends,
 Source : http://click9.net/2010/09/04/html5-open-video-tutorial/

How To Make a CSS Based 3D Layout....ShYaM

How To Make a CSS Based 3D Layout

First of all we set up our files. We create a new folder with index.html and style.css.
We prepare the HTML document.
CSS Ribbon
Take a look at the following image to understand how we will realize the “structure” in our file.

3D CSS

Well, as you have just seen in the picture we need a main container (centered), a bubble for the contents, and three elements for the ribbon: a rectangle and two triangles.

3D CSS Ribbon



I Have Used Only CSS, friends!
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.

It doesn't work with IE!

The CSS code to style the basic elements (container, bubble and rectangle) is the following.

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}

:focus {
 outline: 0;
}
/* // Reset */

body {
 background: url(bck.jpg); /* image for body made with Photoshop using noise filter (gaussian monochromatic) on #ccc */
 font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
 font-size: 12px;
 color: #999;
}

h2 {
 font-style: italic;
 font-weight: normal;
 line-height: 1.2em;
}

div#container {
 margin: 50px auto 0px auto; /* centered */
 width: 400px;
}

.bubble {
 clear: both;
 margin: 0px auto;
 width: 350px;
 background: #fff;
 -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
 -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 position: relative;
 z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
 background: #7f9db9;
 height: 50px;
 width: 380px;
 position: relative;
 left:-15px;
 top: 30px;
 float: left;
 -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
 font-size: 30px;
 color: #fff;
 padding-top: 6px;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 text-align: center;
}

Below the result of these statements.

We add the two classes to make and place the triangles in style.css… and we also add the style for the content (class info).

3D CSS Ribbon







I Have Used Only CSS, friends!
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.

It doesn't work with IE!



Go to the tutorial!

We add the two classes to make and place the triangles in style.css… and the style for the content (class info).

.triangle-l {
 border-color: transparent #7d90a3 transparent transparent;
 border-style:solid;
 border-width:15px;
 height:0px;
 width:0px;
 position: relative;
 left: -30px;
 top: 65px;
 z-index: -1; /* displayed under bubble */
}

.triangle-r {
 border-color: transparent transparent transparent #7d90a3;
 border-style:solid;
 border-width:15px;
 height:0px;
 width:0px;
 position: relative;
 left: 350px;
 top: 35px;
 z-index: -1; /* displayed under bubble */
}

.info {
 padding: 60px 25px 35px 25px;
}

.info h2 {
 font-size: 20px;
}

.info p {
 padding-top: 10px;
 font-size: 14px;
 line-height: 22px;
}

.info p a {
 color: #c4591e;
 text-decoration: none;
}

.info p a:hover {
 text-decoration: underline;
}

Here the result.

We create a nice menu on the top. Below the markup.

CSS3
is really
powerful

by PV.M Garage



3D CSS Ribbon







I Have Used Only CSS, friends!
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.

It doesn't work with IE!



Go to the tutorial!

The style for our top-menu.

.menu {
 position: relative;
 top:3px;
 left: 50px;
 z-index: 80; /* the stack order: displayed under bubble (90) */
}

.menu ul li {
 -webkit-transform: rotate(-45deg); /* rotate the list item */
 -moz-transform: rotate(-45deg); /* rotate the list item */
 width: 50px;
 overflow: hidden;
 margin: 10px 0px;
 padding: 5px 5px 5px 18px;
 float: left;
 background: #7f9db9;
 text-align: right;
}

.menu ul li a {
 color: #fff;
 text-decoration: none;
 display:block;
}

.menu ul li.l1 {
 background: rgba(131,178,51,0.65);
}

.menu ul li.l1:hover {
 background: rgb(131,178,51);
}

.menu ul li.l2 {
 background: rgba(196,89,30,0.65);
}

.menu ul li.l2:hover {
 background: rgb(196,89,30);
}

.menu ul li.l3 {
 background: rgba(65,117,160,0.65);
}

.menu ul li.l3:hover {
 background: rgb(65,117,160);
}

.menu span {
 margin: 15px 80px 0px 0px;
 float:right;
}

Here you can se the simple menu.

Our 3D layout is ready. It’s so sexy, I hope you find the final result attractive and inspiring.

Conclusions

I think this kind of solution is useful to improve the performance of the website holding a great 3D effect. There is great question: Internet Explorer and Opera have some problems with CSS3. But this is not an impediment because we are looking to the future. So, if you are browsing the web with IE, please consider to install Mozilla Firefox or Google Chrome or Safari. Some screenshots from different browsers (Windows 7 OS).

Source  :  http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

We are going to build a blog page using next-generation techniques from the newer  HTML 5 and CSS 3.The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. 
Main Tutorial Page : http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

WordPress Cheat Sheet

The “WordPress Cheat Sheet” pdf available for free. If you’re still wrapping your head around the miscellaneous functions, be sure to download it from their site!

The WordPress Help Sheet includes the following:

• Basic Template Files
• PHP Snippets for the Header
• PHP Snippets for the Templates
• And Extra Stuff for WordPress

 Source : http://net.tutsplus.com/freebies/cheat-sheets/wordpress-cheat-sheet/
 Download : http://downloads.gosquared.com/help_sheets/07/WordPress-Help-Sheet.pdf

HTML5 Web Storage

Storing Data on the Client

 HTML5 offers two new methods for storing data on the client:

• localStorage - stores data with no time limit
• sessionStorage - stores data for one session

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.
In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance.
The data is stored in different areas for different websites, and a website can only access data stored by itself.
HTML5 uses JavaScript to store and access the data.

 



Source:http://www.w3schools.com/

HTML5 New Form Attributes

New form attributes:

• autocomplete
• novalidate
  
  

New input attributes:

• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height and width
• list
• min, max and step
• multiple
• pattern (regexp)
• placeholder
• required
 

Form Override Attributes
• The form override attributes allow you to override some of the attributes set for the form element.
  The form override attributes are:
• formaction - Overrides the form action attribute
• formenctype - Overrides the form enctype attribute
• formmethod - Overrides the form method attribute
• formnovalidate - Overrides the form novalidate attribute
• formtarget - Overrides the form target attribute
Source:http://www.w3schools.com/

HTML 5 and SEO....Shyam

At this point in 2010, web browsers are capable of supporting most HTML 5 code functions. 

The

tag

is how you can compartmentalize different segments of your HTML 5 page.  Each section should identify micro data vocabulary that you are using within the segment.


The new

tags

are where you will put the majority of the textual content on your page.  Again, a single page can contain multiple articles  and a single article can contain multiple

areas.  This nesting structure helps to further organize the content within a page.  If you are a blogger, you will want to use the

tabs to segment multiple articles on your pages.

The new tags when you convert your code from HTML 4 to HTML 5.At the end of a section, you can add a

tag. 

This tag contains any footer style text about the section such as the Author of the article and any links the article referenced.
The tag is where you place all of your internal navigation links.  Again, search engines will much more accurately be able to understand the structure of your site if you use this section.  In addition, you should place your "previous" and "next" internal links in this section if your site or blog contains them.
If you are familiar with HTML 4, you'll notice that the new HTML 5 tags I've discussed so far were previously handled by various tags in HTML 4.  The tags are add-on elements within HTML 4 that fail on many levels to properly describe the different sections of a web page. Finally, the new tag is very similar to the tag and will likely be used frequently on your site to make certain keywords stand out.

Source : http://technorati.com/

New Structural Elements in HTML 5.....ShYaM..

In HTML 5 the new structural elements has a header denoted by

 div id="header"  a footer

 div id="footer"  some articles wrapped by an area called “content”.

 div id="content" and some navigation wrapped up in an area called “sidebar” .

 div id="sidebar". 

It’s a simple matter to change the HTML divs into the new elements. The only difficulty I had was deciding which element to use to mark up my sidebar, as it also includes a search field and site information as well as site-wide navigation.
Source : http://html5doctor.com/

API's In HTML 5.......ShYaM

HTML5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:

• API for playing of video and audio which can be used with the new video and audio elements.
• An API that enables offline Web applications.
• An API that allows a Web application to register itself for certain protocols or media types.
• Editing API in combination with a new global contenteditable attribute.
• Drag & drop API in combination with a draggable attribute.
• API that exposes the history and allows pages to add to it to prevent breaking the back button. 

  Extensions to HTMLDocument

  HTML5 has extended the HTMLDocument interface from DOM Level 2 HTML in a number of ways. The interface is now implemented on all objects implementing the Document interface so it stays meaningful in a compound document context. It also has several noteworthy new members:
• getElementsByClassName() to select elements by their class name. The way this method is defined will allow it to work for any content with class attributes and a Document object such as SVG and MathML.
• innerHTML as an easy way to parse and serialize an HTML or XML document. This attribute was previously only available on HTMLElement in Web browsers and not part of any standard.
• activeElement and hasFocus to determine which element is currently focused and whether the Document has focus respectively.
• getSelection() which returns an object that represents the current selection(s).
  

  Extensions to HTMLElement

  The HTMLElement interface has also gained several extensions in HTML5:
• getElementsByClassName() which is basically a scoped version of the one found on HTMLDocument.
• innerHTML as found in Web browsers today. It is also defined to work in XML context (when it is used in an XML document).
• classList is a convenient accessor for className. The object it returns, exposes methods (contains(), add(), remove(), and toggle()) for manipulating the element's classes. The a, area and link elements have a similar attribute called relList that provides the same functionality for the rel attribute.
   Source : http://www.w3.org/
  

New Elements in HTML 5 -ShYaM..

The following HTML 5 elements have been introduced for better structure:

• section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
• article represents an independent piece of content of a document, such as a blog entry or newspaper article.
• aside represents a piece of content that is only slightly related to the rest of the page.
• hgroup represents the header of a section.
• header represents a group of introductory or navigational aids.
• footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
• nav represents a section of the document intended for navigation.
  
  
• figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
  

  
   
   
  Example

  figcaption can be used as caption (it is optional).

Then there are several other new elements:

• video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
• embed is used for plugin content.
• mark represents represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
• progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
• meter represents a measurement, such as disk usage.
• time represents a date and/or time.
• ruby, rt and rp allow for marking up ruby annotations.
• wbr represents a line break opportunity.
• canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
• command represents a command the user can invoke.
• details represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption.
• datalist together with the a new list attribute for input can be used to make comboboxes:
  

• keygen represents control for key pair generation.
• output represents some type of output, such as from a calculation done through scripting.

The input element's type attribute now has the following new values:

• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user's address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.
Source : http://www.w3.org/

HTML5 Input Types

HTML5 has several new input types for forms. These new features allow for better input control and validation.
This chapter covers the new input types:

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

HTML 5 Basics

The declaration must be the very first thing in your HTML5 document, before the tag. This tag tells the browser which HTML specification the document uses.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The DOCTYPE declaration is and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the DOCTYPE is only needed to enable standards mode for documents written using the HTML syntax. 

HTML5is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:

• New features should be based on HTML, CSS, DOM, and JavaScript
• Reduce the need for external plugins (like Flash)
• Better error handling
• More markup to replace scripting
• HTML5 should be device independent
• The development process should be visible to the public

New Features

Some of the most interesting new features in HTML5:

• The canvas element for drawing
• The video and audio elements for media playback
• Better support for local offline storage
• New content specific elements, like article, footer, header, nav, section
• New form controls, like calendar, date, time, email, url, search

Browser Support

The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.

Best Free Image Hosts (HotLinking allowed, No Bandwidth Limits)

Whether you’re looking for a free way to cut down on bandwidth costs or need an easy-to-use and powerful image hosting service to manage your pictures on (myspace, ebay, etc) than this is for you. Ranked by popularity, I’ve listed below some of the coolest free image hosts on the web along with their main features.

1. ImageShack

Features:

* Upload options: from file, from URL, by email or directly from mobile
* Supported formats: .JPG, .JPEG, .PNG, .GIF, BMP, TIF, TIFF and SWF
* Max. file size: 1.5 MB
* no bandwidth or storage restrictions [update: ImageShack has 100 MB/hour bandwidth limit]
* Resize upon uploading
* Extras: Browser toolbar(IE, Firefox), Mac widget, Mac Uploader(for multiple uploads), Image tracking and more

2. AllYouCanUpload

Features:

* Upload options: from file
* Supported formats: .GIF and .JPEG
* multiple image uploads(up to 3 images simultaneously)
* different resizing option for each uploaded image
* registration is not required
* no restrictions on file size, bandwidth or storage period and amount

3. Photobucket

Features:

* Upload options: from file, from URL, by email or mobile
* Max. file size: free accounts users limited to 1MB file size and max. resoltion of 1024 x 768
* unrestricted multiple image upload
* mass image resizing upon upload
* individual image editing from account menu
* 10 GB monthly bandwidth limit and 1GB storage limit
* group images into albums, share albums and create slideshows
* also lets you host videos

4. ImageVenue

Features:

* Upload options: from file
* Max. file size: 1.5 MB
* Supported image formats: .JPEG and .JPG
* mass image upload(up to 10)
* unlimited storage, hosting period and bandwidth
* registration is not required

5. TinyPic


Features:

* Upload options: from file
* registration is not required
* unlimited storage, hosting period and bandwidth
* no restrictions on file size or image formats
* also lets you host videos

6. FreeImageHosting


Features:

* Upload Options: from file
* Supported image formats: .JPG, .JPEG, .PNG and .GIF
* Max. file size: 3,000 KB
* no storage, bandwidth or hosting period limit
* registration is not required

7. imgPlace

Features:

* Upload Options: from file
* Max. file size: 1.5MB
* Supported image formats: .JPG, .JPEG, .PNG, .GIF, BMP, TIF and TIFF
* mass image uploads(up to 10)
* image resizing for single uploads
* no bandwidth, storage or storage duration limits
* registration is not required

CSS Tips

Styling Links

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */


List

In HTML, there are two types of lists:

    * unordered lists - the list items are marked with bullets
    * ordered lists - the list items are marked with numbers or letters

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Table Borders

table, th, td
{
border: 1px solid black;
}

JQUERY, Warning Users that IE6 For Browser Rejection

Copy this and save it to jquery.ie6.js

(function($){
$(function(){
var message = "This site does not support Internet Explorer 6. Please consider downloading a newer browser.",
div = $('

').html(message).css({
'height': '50px',
'line-height': '50px',
'background-color':'#f9db17',
'text-align':'center',
'font-family':'Arial, Helvetica, sans-serif',
'font-size':'12pt',
'font-weight':'bold',
'color':'black'
}).hide().find('a').css({color:'#333'}).end();
div.prependTo(document.body).slideDown(500);
});
})(jQuery);

And then put this in the head (after the inclusion of jQuery of course) of your page:

Validation in HTML

What is validation ?
According to the W3c, Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc.



Specify a DOCTYPE and namespace
Include a DOCTYPE at the top of your page and specify the namespace

For XHTML1.0 Strict


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"


For XHTML1.0 Transitional


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"


For XHTML1.0 Frameset


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
html xmlns="http://www.w3.org/1999/xhtml"

Wordpress plugin -Shyam

WP To Top is a Wordpress plugin that adds a "Back to top" link in your blog without modifying your template files. This is useful especially if you have long posts or long pages. You will have a nice "Back to top" or whatever-text-you-want link floating at the bottom right/left of your page.
Features

* Smooth scrolling animation and fade in, fade out effect, powered by the YUI library
* Customizable options via the admin panel, from the text to the position of the link
* Works on almost all browsers including IE6 (yes!)

Installation

* Extract wptotop.zip in the "/wp-content/plugins/" directory
* Activate the plugin through the "Plugins" menu in WordPress
* Go to "Settings" and then "WP To Top" to configure the plugin. The options are self explanatory and easy to understand.

Enjoy...
Shyam-D Man U Love-

10 code snippets for PHP developers

10 code snippets for PHP developers

I've compiled a small list of some useful code snippets which might help you when writing your PHP scripts...

Email address check
Checks for a valid email address using the php-email-address-validation class.
Source and docs: http://code.google.com/p/php-email-address-validation/


include('EmailAddressValidator.php');

$validator = new EmailAddressValidator;
if ($validator->check_email_address('test@example.org')) {
// Email address is technically valid
}
else {
// Email not valid
}


Random password generator
PHP password generator is a complete, working random password generation function for PHP. It allows the developer to customize the password: set its length and strength. Just include this function anywhere in your code and then use it.
Source : http://www.webtoolkit.info/php-random-password-generator.html




function generatePassword($length=9, $strength=0) {
$vowels = 'aeuy';
$consonants = 'bdghjmnpqrstvz';
if ($strength & 1) {
$consonants .= 'BDGHJLMNPQRSTVWXZ';
}
if ($strength & 2) {
$vowels .= "AEUY";
}
if ($strength & 4) {
$consonants .= '23456789';
}
if ($strength & 8) {
$consonants .= '@#$%';
}

$password = '';
$alt = time() % 2;
for ($i = 0; $i < $length; $i++) { if ($alt == 1) { $password .= $consonants[(rand() % strlen($consonants))]; $alt = 0; } else { $password .= $vowels[(rand() % strlen($vowels))]; $alt = 1; } } return $password; } Get IP address
Returns the real IP address of a visitor, even when connecting via a proxy.
Source : http://roshanbh.com.np/2007/12/getting-real-ip-address-in-php.html


function getRealIpAddr(){
if (!empty($_SERVER['HTTP_CLIENT_IP'])){
//check ip from share internet
$ip = $_SERVER['HTTP_CLIENT_IP'];
}
elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
//to check ip is pass from proxy
$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
}
else{
$ip = $_SERVER['REMOTE_ADDR'];
}
return $ip;
}


XSL transformation
PHP5 version
Source : http://www.tonymarston.net/php-mysql/xsl.html


$xp = new XsltProcessor();

// create a DOM document and load the XSL stylesheet
$xsl = new DomDocument;
$xsl->load('something.xsl');

// import the XSL styelsheet into the XSLT process
$xp->importStylesheet($xsl);

// create a DOM document and load the XML datat
$xml_doc = new DomDocument;
$xml_doc->load('something.xml');

// transform the XML into HTML using the XSL file
if ($html = $xp->transformToXML($xml_doc)) {
echo $html;
}
else {
trigger_error('XSL transformation failed.', E_USER_ERROR);
} // if


PHP4 version


function xml2html($xmldata, $xsl){
/* $xmldata -> your XML */
/* $xsl -> XSLT file */

$arguments = array('/_xml' => $xmldata);
$xsltproc = xslt_create();
xslt_set_encoding($xsltproc, 'ISO-8859-1');
$html = xslt_process($xsltproc, $xmldata, $xsl, NULL, $arguments);

if (empty($html)) {
die('XSLT processing error: '. xslt_error($xsltproc));
}
xslt_free($xsltproc);
return $html;
}

echo xml2html('myxmml.xml', 'myxsl.xsl');


Force downloading of a file
Forces a user to download a file, for e.g you have an image but you want the user to download it instead of displaying it in his browser.


header("Content-type: application/octet-stream");

// displays progress bar when downloading (credits to Felix ;-))
header("Content-Length: " . filesize('myImage.jpg'));

// file name of download file
header('Content-Disposition: attachment; filename="myImage.jpg"');

// reads the file on the server
readfile('myImage.jpg');


String encoding to prevent harmful code
Web applications face any number of threats; one of them is cross-site scripting and related injection attacks. The Reform library attempts to provide a solid set of functions for encoding output for the most common context targets in web applications (e.g. HTML, XML, JavaScript, etc)
Source : http://phed.org/reform-encoding-library/


include('Reform.php');
Reform::HtmlEncode('a potentially harmful string');


Sending mail
Using PHPMailer
PHPMailer a powerful email transport class with a big features and small footprint that is simple to use and integrate into your own software.
Source : http://phpmailer.codeworxtech.com/


include("class.phpmailer.php");
$mail = new PHPMailer();
$mail->From = 'noreply@htmlblog.net';
$mail->FromName = 'HTML Blog';
$mail->Host = 'smtp.site.com';
$mail->Mailer = 'smtp';
$mail->Subject = 'My Subject';
$mail->IsHTML(true);
$body = 'Hello
How are you ?';
$textBody = 'Hello, how are you ?';
$mail->Body = $body;
$mail->AltBody = $textBody;
$mail->AddAddress('asvin [@] gmail.com');
if(!$mail->Send())
echo 'There has been a mail error !';

Uploading of files
Using class.upload.php from Colin Verot
Source : http://www.verot.net/php_class_upload.htm


$uploadedImage = new Upload($_FILES['uploadImage']);

if ($uploadedImage->uploaded) {
$uploadedImage->Process('myuploads');
if ($uploadedImage->processed) {
echo 'file has been uploaded';
}
}


List files in directory
List all files in a directory and return an array.
Source : http://www.laughing-buddha.net/jon/php/dirlist/


function dirList ($directory) {
// create an array to hold directory list
$results = array();

// create a handler for the directory
$handler = opendir($directory);

// keep going until all files in directory have been read
while ($file = readdir($handler)) {

// if $file isn't this directory or its parent,
// add it to the results array
if ($file != '.' && $file != '..')
$results[] = $file;
}

// tidy up: close the handler
closedir($handler);

// done!
return $results;
}


Querying RDBMS with MDB2 (for e.g MySQL)
PEAR MDB2 provides a common API for all supported RDBMS.

Source : http://pear.php.net/package/MDB2


// include MDB2 class
include('MDB2.php');

// connection info
$db =& MDB2::factory('mysql://username:password@host/database');
// set fetch mode
$db->setFetchMode(MDB2_FETCHMODE_ASSOC);

// querying data
$query = 'SELECT id,label FROM myTable';
$result = $db->queryAll($query);

// inserting data
// prepare statement
$statement = $db->prepare('INSERT INTO mytable(id,label) VALUES(?,?)');
// our data
$sqlData = array($id, $label);
// execute
$statement->execute($sqlData);
$statement->free();

// disconnect from db
$db->disconnect();



Enjoy...

Shyam-D Man U Love-

Move the mouse with your keyboard in KDE

File this under "I should have known about this but didn't." Let's say you don't have a mouse, or your mouse is having problems, yet you still need to somehow move your pointer from A to B. It's easy in KDE: press Alt-F12. You can now move the pointer with your arrow keys. When you're finished, press Alt-F12 again, & you're back to the mouse.

Enjoy Guyz..
Shyam -D Man U Love-

How to include a Flashfile into a HTML Website?

Flashbanners (*.swf) can't be included with the IMG tag. For displaying Flashfiles a special HTML-code is needed.
For unskilled users it might look a bit strange but it's very easy. Just copy and paste the HTML-code in the box below to your HTML file.

The only thing you have to do is:

* Change the banner address (red letters) into the address where your banner is stored on the internet.
* If you want to display the banner in another size make your changes to the values in green letters.


Shyam-D Man U Love-

WordPress (Version 3.0.1)

The latest stable release of Word Press (Version 3.0.1) is available in two formats from the link ?Download it..ShYaM?

Enjoy the Power of Theme WordPress (Version 3.0.1)

Open Source Graphic Programs-45 Best

http://www.snap2objects.com/
Following the great success of the 45 Best Freeware Design Programs and attending requests of more open source apps, here is a new extensive list of Open Source Graphic Programs that you may take into consideration for production use. There is a lot of technicalities when we talk about The Open Source movement, and we are not covering them here on detail, so please forgive with me if I am not being formal enough with all the terminology.


ShYaM....

PHP Functions..ShYaM..

The $_POST Function
The built-in $_POST function is used to collect values from a form sent with method="post".
Information sent from a form with the POST method is invisible to others and has no limits on the amount of information to send.

"form action="welcome.php" method="post"
Name: input type="text" name="fname"
Age: input type="text" name="age"
input type="submit"
form"

The $_GET Function
The built-in $_GET function is used to collect values from a form sent with method="get".

"form action="welcome.php" method="get"
Name: input type="text" name="fname"
Age: input type="text" name="age"
input type="submit"
form "

PHP Form Handling
The most important thing to notice when dealing with HTML forms and PHP is that any form element in an HTML page will automatically be available to your PHP scripts.

"html
body

form action="welcome.php" method="post"
Name: input type="text" name="fname"
Age: input type="text" name="age"
input type="submit"
form

body
html"

By ShYaM...

How To Change Your IP Address..Shyam

If your connection is direct to your computer and your computer gets the public IP and not a router, you can try this:
For Windows 2000, XP, and 2003
1. Click Start
2. Click Run
3. Type in cmd and hit ok (this opens a Command Prompt)
4. Type ipconfig /release and hit enter
5. Click Start, Control Panel, and open Network Connections
6. Find and Right click on the active Local Area Connection and choose Properties
7. Double-click on the Internet Protocol (TCP/IP)
8. Click on Use the following IP address
9. Enter a false IP like 123.123.123.123
10. Press Tab and the Subnet Mask section will populate with default numbers
11. Hit OK twice
12. Right click the active Local Area Connection again and choose Properties
13. Double-click on the Internet Protocol (TCP/IP)
14. Choose Obtain an IP address automatically
15. Hit OK twice
16. Go to What Is My IP to see if you have a new IP address



For Vista (Windows 7 is very similar)
1. Click Start
2. Click All Programs expand the Accessories menu
3. In the Accessories menu, Right Click Command Prompt and choose Run as administrator
4. Type ipconfig /release and hit enter
5. Click Start, Control Panel, and open Network and Sharing Center. Depending on your view, you may have to click Network and Internet before you see the Network and Sharing Center icon
6. From the Tasks menu on the left, choose Manage Network Connections
7. Find and Right click on the active Local Area Connection and choose Properties (If you’re hit with a UAC prompt, choose Continue)
8. Double-click on Internet Protocol Version 4 (TCP/IPv4)
9. Click on Use the following IP address
10. Enter a false IP like 123.123.123.123
11. Press Tab and the Subnet Mask section will populate with default numbers
12. Hit OK twice
13. Right click the active Local Area Connection again and choose Properties
14. Double-click on Internet Protocol Version 4 (TCP/IPv4)
15. Choose Obtain an IP address automatically
16. Hit OK twice
17. Go to What Is My IP to see if you have a new IP address

Read more: http://www.whatismyip.com

கவிதை......

அடிக்கடி பார்க்கின்ற எல்லோரையும் நேசிக்க முடியாது..

நேசிக்கின்ற எல்லோரையும் அடிக்கடி பார்க்க முடியாது...

பிரின்ஷிப்...shyam

I may not always text you,
But our distance makes me miss you.
I may not always stay in touch,
But I care for you very much.
I may not always stop to say hi,
But I hope never to say good bye.
I may not prove to be the perfect friend,
But I hope the friendship we share,
never reaches an end….

Real Friend....ShYaM.......

பிறருடன் சமமாக வாழ கற்றுக் கொள்...!

வாழ்க்கையில்,
அன்பை கூட்டிக்கொள்!
அறிவை பெருக்கிக்கொள்!
இனிமையை
தனிமையால் வகுத்துக்கொள்!
பாவத்தைக் கழித்துக் கொள்!
பிறருடன் சமமாக
வாழ கற்றுக் கொள்...!

MY LoGo

http://shyammb.blogspot.com/

Tamil Kavithai For My Dear....

நம் காதல்

உன் உள்ளங்கையின் உஷ்ணத்தில்
இன்னும் ஊறிக்கொண்டிருக்கிறது
என் உடல்...!

உன் கரு வட்ட விழிகளுக்கு நடுவே
சிக்கிக்கொண்டுள்ளது
என் மனது...!

உன் உதட்டு சிவப்பில் ஒட்டி,
ஒளிந்துகொண்டுள்ளது
என் வயது...!

உன் கூந்தல் முடிகளுக்கு பின்னால்
அலைந்துகொண்டிருக்கிறது
என் வாழ்க்கை...!

உன் கன்னக் குழிகளில்
புதைந்து இறந்து போகிறது
என் கோபம்...!

உன் வார்த்தைகளின் இடைவெளிகளில்
மறைந்து கொள்கிறது
என் மௌனம்...!

உன் கன்னம் கிள்ளிவிட்ட என் விரல்களில்
ஒட்டிக்கொண்டுள்ளது
நம் காதல்...!

ஏன்..? இதயம் உடைத்தாய் நொறுங்கவே!! என் மறு இதயம் தருவேன் நீ உடைக்கவே!!!

ஏன்..? இதயம் உடைத்தாய் நொறுங்கவே!! என் மறு இதயம் தருவேன் நீ உடைக்கவே!!!