COMO SER COMPATIBLE CON TABLETS Y CELULARES
el siguiente script tiene compatibilidad con todas las tablets android y windows 8
<script type="text/javascript" src="http://yourjavascript.com/11571198041/jqueryandroid.js"></script>
[Turorial] introducción a jquery para blogger
jQuery es una framework de JavaScript, que nos permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web.
dedico este tema de introducción a la animación a @Xxmartin95xX, y me pareció interesante compartirla como tema de aprendizaje.
1. vamos a trabajar jQuery directamente con el link que nos dispone, google. Aplicándola directamente a nuestra plantilla y posicionando-la justo después de la etiqueta<head>y antes de
<b:include data='blog' name='all-head-content'/>
de la siguiente manera:
<?codigo-blogger
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'/>
<b:include data='blog' name='all-head-content'/>
codigo-blogger?>
de esta manera la carga de la plantilla sera mucho mas rápida.
para empezar a "probar" nuestros primeras animación y/o eventos en jquery, es recomendable trabajar con un editor javascript, para este caso yo recomiendo trabajar con notepad2. cuya descarga la puedes realizar de aqui :http://notepad2.softonic.com/
con todo lo anterior conforme procederemos a realizar nuestra primer animación con jQuery
para evitarme trabajo de redactar, acabo de hacer un simple vídeo.
link: http://www.youtube.com/watch?v=beh9J2lVR0I
los recursos se pueden bajar de aquí para su libre análisis.
http://jqueryb.googlecode.com/files/jQuery_animate.rar
procederé a explicar los eventos, de una manera sencilla.
<script type='text/javascript'>
$(function(){
$(".mi-animacion").hover(function(){
//aquí digo que al colocar el cursor por encima de la clase "mi-animacion"
//cumpla el evento que se encuentra mas abajo
$(this).children('img.fondo').stop().animate({"top":"350px"}, 700);
//obtengo la imagen y le digo con animate que me desplace 350px
// la imagen tomando de referencia la posición top
// a una velocidad de 700 mili-segundos
}, function() {
$(this).children('img.fondo').stop().animate({"top":"0px"}, 300);
// aquí al quitar o en este caso desenfocar la imagen
// retornara a su posición origina a una velocidad de 300 mili-segundos
});
});
</script>
para el ejemplo use la animación animate de jQuery http://api.jquery.com/animate/
todo esta en la documentación, es verdaderamente simple.
muy bien ahora procederemos a adaptar jQuery en blogger
<?codigo-blogger
<script type='text/javascript'> //<!CDATA[ $(function(){
$(".mi-animacion").hover(function(){
$(this).children('img.fondo').stop().animate({"top":"350px"}, 700);
}, function() {
$(this).children('img.fondo').stop().animate({"top":"0px"}, 300);
});
}); //]]></script>
codigo-blogger?>
//<!CDATA[
nos ayudara a que nuestros caracteres especiales, se mantengan intactos dentro de la plantilla, de esta manera se evitara que se remplacen por sus entidades html
//]]>
así finalizo, este mini tutorial espero que les halla sido de ayuda, y si ya le agarraron el ritmo a jquery. y quieren alojar sus script en un lugar pueden hacerla en http://code.google.com/p/jqueryb/ que es el proyecto que abrió un amigo mio hace un par de años, solo contacte por MP, para subir sus eventos, animación y/o scripts.
