html5 the new horse that many developers and company bets on such as Apple after their fight with flash and also the big and rich one google
html5 brings to us new tools and techniques transforming the browser to rich and smart environment
one of the greatest things that html5 introduce is canvas element that magical element do more that expectation , for many years javascript developers try to animate and draw things over pure html but it wasnt stable and dont support any thing like rotating or transform or effects like shadow or gradient so if you tell any one before that you are going to develop a game that using only pure html & javascript it will call you a crazy or an amateur
but canvas element support all of those it support 2d drawing , image effects , text effects and many other things without crash the browser or being so heavy and slow

what about 3d:

canvas element till now support only 2d but it will support 3d soon via engine using some of openGL libraries or maybe DirectX when it happens we will see full 3d games runs from native browsers without any kind of plugins

ok lets see some actions

Top 10 HTML5 Games:-

1- z-war:-

the best game till now written in javascript using DHTML or Canvas big game with music supporting good accelerating and semi 3d using good canvas effects and load every element as canvas if you choose canvas style in rendering. created by Darkimmortal

2- canvasscape:-

its a semi 3d game developed by Ben Joffe and there is two version of these game one without texture and one with
use the keyboard arrows to move and shot your enemies

3- fred jones in adventure:-

lovely and highly programmed one created by:PurpleFloyd its support 5 levels with various kind of enemies good one

4- flashy tetris:-

who dont love tetris ? but now its done by html5 canvas it fast well rendered the game uses a haXe scene graph engine called Easel its engine support rich animation and flashy effects.

5-jsCanvas Bike:-

motocross game you earn points for doing flips , good one but its kinda slow

the main reason that makes me writing this articles is one of my friends told me that he is not going to use ajax in his web site because he needs to be highly seo optimized.

many reason that makes my friend and many other think like that is poor developers that uses this technology in the bad way , you can write javascript code to perform ajax in many ways some of it can get the benefits of seo and we are here to clear and study that ways so lets begin

first : google or other search engines cant crawl javascript so the secret is dont EVER let javascript handle the links without html support in another meaning lets see that example

<a href="mylink.html"><img src="anyone.jpg" /></a>
<img src="anyone.jpg" onclick="location.href='mylink.html'" />

the two lines declare two simple ways to link and the two ways actually work but one of them is seo friendly which is the first one because we use simple html tag attribute (href)

the same thing in the ajax make the links in simple anchors with (href) attribute but handle click event of this anchor make the ajax request and prevent the browser default action by returning false

lets see it in action

$(function(){
 
$('a.ajx').click(function(){
 
$('div.response').load('ajaxfile.html');
 
});
 
});
 
<a href="ajaxfile.html" class="ajx">Click me i am seo friendly ajax link</a>
 
<div class="response"></div>

when search engine crawel the page it reads only the html tags so he read this anchor and (href) attribute and follow the page ajaxfile.html to crawel it and add it to the site map

and when human go to this page and click on the link the click event fired and we do tha ajax request and because the return false the page never reloaded

this is the point think as the search engine and you will win

feel free to feedback me

thanks

the idea behind this plugin is to replace normal email with special javascript code which the spammers cant crawel and read it so the email remain secure and at the same time it simple and readable for humans  , enjoy it and if you like it please rate us in wordpress plugins

ok lets start

first to select a DOM you must wait the full page to load, the javascript programmers know that if we want to control an element in the web page we use
window.onload event to run the code in it
but the problem is that this event will fire after all page downloaded including images and other heavy element

jquery has a similar event but the event fired when the DOM is ready


$('document').ready(function(){
// your code here
});


ok now we know when we will run our code and how and where we write

now the good part of our articles : selectors

if you know css you will use selectors perfectly because simply
jquery selectors = CSS
yea its a true, don’t believe me look at the next example


//jquery code
$('document').ready(function(){
$('div.mydiv').hide('slow');
});



/* css code */
div.mydiv{
display:none;
}


do you believe me now try to pick a different between the jquery selector and css selector no different

so if you want to select a element with id simple_id
simply type
$(‘#simple_id’)

global elements

for example
$(‘a’)

class
$(‘.simple_class’)

just know css selectors and use it with jquery

the next post in jquery i will discuss the advanced selectors with jquery & css 3 , so keep watching me

first : what we mean by javascript framework ??
“A software framework, in computer programming, is an abstraction in which common code providing generic functionality can be selectively overridden or specialized by user code providing specific functionality.”
from wikipedia

so we can say that javascript framework is abstracting to tranditional javascript codes so you can do amazing things with javascript just with a few lines of code
you can control DOM ,doing amazing animation , ajax and alot of cool things that helps when you develop a website

now ,we  knows what it means but there is alot of frameworks what is the best

we will go in a short tour with the best 10 javascript frameworks

1- jquery:-

the best framework ever for javascript , specially with the new realese 1.3 the jquery become lighter , faster , more powerful
you can control DOM easly with the DOM engine using CSS3

website :-  jquery.com

license : MIT & GPL

2- prototype:-

the fastest framework it really very fast an also contain a good DOM engine but not powerful as  jquery.
note: i tried very hard to make prototype works side by side but i failed so if you have any ideas please suggest:)

website:- www.prototypejs.org

license : GPL

3- mootools:-

its a really a nice one , honestly i didn’t work with it but many developers prefer it , i saw many demos but i didnt test its DOM engine ( if you test it please feed back me)

website:- mootools.net

license : GPL

4- google web toolkit:-

big big big so big one , it have many features i cant even imagine how google developers code it , google
in short:- it perfectly for large projects , it have many features you cant find in any other framework

website :- code.google.com/webtoolkit

license:- Apache License

5- Ext Js:-
big framework too , but so slow in compare with other frameworks , so big and so complicated too.

website :- extjs.com

license:- commercial version  1.3

6- DOJO :-
new framework i didnt test it , but many developers beign to work with , so easy and powerful , and may be it face jquery & prototype & mootools one day

website :- www.dojotoolkit.org

license :- BSD & AFL

7- script.aculo.us :-
poor framework , based on protoype ,  it have small features and i dont recommended it

website :- script.aculo.us

license : GPL

8- YUI:-
big framework coded by yahoo , but so big so complex as ext js

website:- developer.yahoo.com/yui

license:- BSD License

9- midori:-
small but good framework for small projects

website :- www.midorijs.com

license :- MIT License

10-MochiKit:-
small but good framework for small projects, highly documented as they said

website:- mochikit.com

license :- MIT & AFL

that is all i have for now , if you have any other javascript frameworks do you want to add to this list , just comment

references:- frameworks websites , wikipedia , and   google