Thursday, June 11, 2009

Two Steps To Validating Your Site or Blog With "CSS, XHTML, HTML, SMIL, MathML, ....etc"

1 comments

● Are you have a identical blog or website with other programming languages ?!! Yes, surly but how can i know that, All of us ask this question because both of us know the impact of programming languages and their role in the development of web page, Sites Validating with this languages have many benefits.


For example:
1- Improve the performance of your site in terms of browsing speed and organization of site parts.  
2- More compatibility with all of browsers example (IE , Firefox, Safari , Google Chrome, Folck, …etc).  
3- Validating with Programing languages makes your site more popular with search engines.
● This applies to all of sites types and also this makes the process of development and modernization more easily.

● Now you will learn how can check your site, There are many of ways to check any site and knowing is it conformed to programing languages or not ?? .






 ● Go to this site:
Validator.W3 - This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML,... etc.


Validate By URL :
• In this option you can check your site or any site by copy/paste direct URL ex: www.Yoursite or any site.com,org,net,info, ... etc.


Validate By FileUpload :
• In this option you should upload your source code file ex:(index.html,index.xhtml) to the site "This option is useful for web designers and developers to know under construction sites errors".

 Validate By Direct Inbut :
• To do your checking in this option you should copy/paste all of source codes in the place of writing code area .
• These type of sites provide unique service in that it found errors and corrected. • If you got a good result you should see this result :



- now we finish checking about Xhtml, Html.


● Go to this site :

W3C.Validator:This validator checks the markup validity of Web documents in Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets. 
 If you see the second site is too similar than with the first site never mind just your checking.

After checking and if your resualt have a few errors just fix them and should see this image:


Well done, Have fun (-;
Read full story
Bookmark and Share
Tags: , , , , ,

Tuesday, June 9, 2009

Use This Smart "Expando" CSS&JS Tricks!!

0 comments

● Learn this trick to add more interesting to your content by expanding your images in your posts, This simple script for folks who want to have an image expand onMouseover (Set its to actual size).







● Expando Image is AJAX friendly, meaning imported content with images with the "expando" class will be immediately recognized by the script.


● Installation is simple- install the script in the HEAD section of the page, then give your "thumbnail" images a CSS class of "Expando"



To do it just follow this simple two steps, In the first as usual copy/paste this code in head area or between <head>...here...</head> tags:
<style type="text/css">
img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}
</style>
And this:
<script type="text/javascript">
//<![CDATA[
/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>
In the second when you posting and before adding images just copy your image look like this ex.code:
<p>
<img class="expando" border="0" src="Your Image Url" width="100" height="75">
</p>
If you see we add the expando class to order the script, Now you can change values for width and height.

Have fun, Well done (-;
Read full story
Bookmark and Share
Tags: , ,
Subscribe to: Posts (Atom)
 
http://www.wikio.com Blog Search Web Design Directory of Web Development Blogs Top Marketing SEO blogs Hit It! blog search directory podcast directory Free Trial of Our Professional Search Engine Submission Service Blog Directory

Hello

 

 

 

BProfile

My photo
Be Hungry For Success.

Followers

^^^Back to Top Page^^^