Archive for September, 2007

Introducción a jQuery

Author: Lunatic

23 Sep

Intro… o parecido

Este tutorial ya tiene algo de tiempo rondando por Internet, especificamente en Cristalab. No lo había publicado en mi blog por que… bueno, la verdad no se por que XD. Pero la idea es basicamente aprender lo basico de jQuery.

¿Que es jQuery?

jQuery es una liviana libreria de JavaScript, pensada para interactuar con los elementos de
una web por medio del DOM. Lo que la hace
tan especial es su sencillez y su reducido tamaño.

¿Por que debería usarlo?

La sencillez de su sintaxis y la poca extension del codigo que necesitas escribir son las
caracteristicas más notables. Si hicieras lo que hace jQuery con getElementById y
window.onload no solo tendrias que escribir mucho, si no que podrian haber diversos
problemas.

¿Como empiezo a usarlo?

Lo primero que debes hacer, es descargarlo de la web oficial: jQuery . Una vez descargada la libreria (son más o menos 16k) puedes
proceder a tu primer script:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Prueba de jQuery</title> <script src="jquery.js" type="text/javascript"></script> </head> <body> </body> </html>

Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?

Ejecución y sintaxis básica

jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo
“$”. Ahora, la forma de una sentencia es la siguiente:

$(elemento).evento(funcion-o-parametro);

La manera de inicializar jQuery es muy util:

$(document).ready(function(){ //Aqui tu codigo });

Ready es un método propio de jQuery, que revisa si el
DOM está listo para usarse. Es más util
que el window.onload, pues este debe esperar a que todos los elementos de la pagina esten cargados
(como scripts e imagenes) paa ejecutar. El “ready”, en cambio, espera solo a la estructura.

Acceso a elementos y eventos

Acceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que en
CSS. Con estos metodos, seleccionaremos diferentes
elementos de la pagina, con los cuales interactuaremos:

Tipo de elemento	Modo de llamado
Etiqueta	Nombre de la etiqueta. Ejemplos: “a”, “strong”, “div”
Elemento con un Id	Id precedido por el signo “#”. Ejemplos: “#principal”,”#texto”
Elemento con una clase (class)	Clase precedida por un punto (.). Ejemplos: “.codigo”, “.titulo”

Nota: Tambien funcionan muchos de los selectores de CSS como “>”, “*”, etc. Un ejemplo de
su uso seria:



$("* > a").click( function(){

	alert("nada");

});

Los eventos responden a una interacción del usuario con la pagina o de la misma pagina de manera interna:
Por ejemplo, cuando el usuario hace click o se termina de ejecutar una funcion.

Los eventos que se pueden usar en jQuery son los mismos que usariamos normalmente en JavaScript. El unico cambio es la
supresión del “on” inicial: mouseover, click, focus, etc

Veamos todo junto

Veamos un ejemplo de lo visto hasta ahora:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Prueba de jQuery</title>
        <script src="jquery.js" type="text/javascript"></script>
		<script type="text/javascript">

			$(document).ready(function (){
				//Aqui asignamos el click al elemento <a>
				$("a").click(function (){
					alert("Presionaste un <a>");
				});
			});

		</script>
	</head>
  <body>
	<a href="#"> Presioname! </a>
  </body>
</html>

Al presionar cualquier etiqueta “a” del documento, se ejecutaria el alert.

Añadir o retirar clases

Cuando queremos que un elemento pueda interactuar con un css ya establecido, usamos las clases.
Con jQuery, estas pueden ser asignadas dinamicamente:

$("a").addClass("boton");

O tambien removidas:

$("a").removeClass("boton");

Ahora, podemos añadirle CSS a esa determinada clase, y ver como se comporta:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Prueba de jQuery
    </title>
<script src="jquery.js" type="text/javascript">
</script>
<script type="text/javascript">

	$(document).ready(function (){
		//Aqui asignamos el click al elemento <a>
		$("a").click(function (){
			alert("Presionaste un <a>");
			//Aqui removemos la clase!
			$("a").removeClass("boton");
		});
		//Aqui añadimos la clase a los elementos <a>
		$("a").addClass("boton");
	});
</script>

<style type="text/css">

	.boton{
	color:#f00;
	display:block;
	width:100px;
	text-align:center;
	border:#f00 solid 1px;
	}

</style>

  </head>
  <body>
    <a href="#" class="algo">Presioname!</a>
  </body>
</html>

Al ejecutarse el script, todos los “a”, tomarán la clase “boton”, que tiene propiedades de CSS.
Sin embargo, al oprimir el elemento, la clase es removida.

Efectos especiales

Esta librería también esta compuesta por algunos efectos, que resultan muy útiles. Son livianos
y faciles de llamar. A continuación, una breve descripcion de cuales son, que hacen y como se
usan:

Organizemos los efectos de esta manera:

Nombre del efecto
Descripcion
Modo de llamado
Descripcion de los parámetros

Show (Mostrar)
Modifica los atributos alto, ancho y transparencia, partiendo de 0.
$(objeto).show(”velocidad”)
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).

Hide (Ocultar)
Modifica los atributos alto, ancho y transparencia, partiendo de los valores actuales
hasta llegar a 0.
$(objeto).hide(”velocidad”)
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).

Slide Down (Aparecer hacia abajo)
Modifica los atributos alto y transparencia, partiendo de 0. Es similar a “show”, salvo
que no modifica el ancho, creando un efecto de “cortinilla”.
$(objeto).slideDown(”velocidad”)
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).

Slide Up (Aparecer hacia arriba)
Modifica los atributos alto y transparencia, partiendo de los actuales, hasta llegar a
0. Es similar a “show”, salvo que no modifica el ancho, creando un efecto de “cortinilla”.
$(objeto).slideUp(”velocidad”)
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).

Fade In(Aparecer)
Modifica el atributo transparencia desde 0.
$(objeto).fadeIn(”velocidad”)
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).

Fade Out(Desaparecer)
Modifica el atributo transparencia desde el valor actual, hasta llegar a 0
$(objeto).fadeOut(”velocidad”)
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).

Fade To(Cambiar transparencia)
Modifica el atributo transparencia a un valor especifico.
$(objeto).fadeTo(”velocidad”, transparencia)
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).

Transparencia: Un numero de 0 a 100 que indica que tan visible es el elemento.

Animate (Animar)
Modifica un atributo especifico.
$(objeto).animate(”propiedades”,”velocidad”);
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).

Propiedades: Una o más propiedades con valor numérico en CSS, por ejemplo width y height.
La llamada seria:
$(objeto).animate({width:20,height:200}, "slow");

Center (Centrar)
Centra un elemento con respecto a su “parent”
$(objeto).center(”velocidad”);
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser “slow”
(lento), “normal”, o “fast” (rápido).

“Callbacks”, llamar funciones y pasar parametros

Despues de un evento se pueden llamar otras funciones JavaScript y jQuery, de la forma
tradicional:
funcion();

Hay eventos que permiten, acabada su ejecución, llamar funciones. Los efectos, por ejemplo,
permiten un parámetro opcional, el de “callback”. De modo que la sintaxis para un efecto con
callback, sería (por ejemplo) la siguiente:

$(objeto).show("velocidad", funcion);

Nota: La funcion debe colocarse sin los parentesis y sin comillas

Como no se pueden usar parentesis en un callback, el modo de pasar los parametros seria el
siguiente:
$(objeto).show("slow", function(){ lafuncion("parametro1","parametro2"); });

Conclusiones

Este tutorial es a modo de introduccion. Depende de ti explorar jQuery para explotar todas sus
funcionalidades. Para conocer más a fondo esta librería, puedes visitar los siguientes vinculos:

0 Comments

Filed under: javascript, jquery, tutoriales

jQuery UI: Creando interfaces con jQuery

Author: Lunatic

21 Sep

Soy un gran fan de jQuery, y como tal, me siento muy orgulloso (snif?) de presentarles la extensión de jQuery para crear interfaces de usuario:
jQuery UI

Que es jQuery UI? (Traducido)

jQuery UI es un set de interacciones y widgets personalizables, escritos en base a la librería jQuery, que puedes usar para construir aplicaciones web altamente interactivas.

Página del proyecto de jQuery ui

El núcleo de la librería se centra alrededor de interacciones del mouse, soltar y agarrar (drag & drop), sortear, seleccionar y redimensionar.

En base a esas interacciones, hay construídos varios “widgets” reusables y útiles: Acordeones, calendarios, diálogos, sliders, organizadores de tablas y pestañas

Finalmente, la librería está terminada por algunos efectos que puedes usar para dar vida a tu sitio, como magnifier (el efecto de tsunami o el del docklet de Mac) y sombras

Elementos y documentacion

Hay una graaan cantidad de elementos, con muchas las opciones para probar… muy buenos:

Draggables : Hace que items sean arrastrables por el mouse
Droppables : Hace que los items sean soltables por el mouse
Sortables : Hace que una lista de items sea sorteable
Selectables : Hace que una lista de items sea seleccionable con el mouse o el teclado
Resizables : Hace a un elemento redimensionable
Accordion : Un panel de contenidos colapsable
Calendar : Un widget dinamico para escoger fechas
Dialog : Ventanas modales y dialogos de confirmacion
Slider : Un slider deslizable con el mouse
Table : Una tabla que se puede sortear
Tabs: Un panel con pestañas.
Shadow : Genera sombras (drop shadows) dinamicamente
Magnifier : Aumenta o disminuye el tamaño de un elemento basandose en la proximidad

Demos

En el momento hay un demo bastante bueno, que muestra las posibilidades de el ui:
Update: jQuery ui demo

Adicionalmente, cada elemento del ui tiene una pagina de demo, donde podremos ver las opciones del elemento, sus combinaciones y etc. Solo buscalas en la pagina de cada elemento.

Notas de uso

Para reducir el tamaño de tu pagina y no tener que cargar todos los modulos asi no los vayas a usar, jQuery ui está dividido en varios “compenentes”. Los nombres de estos son mas o menos ui.nombre.js para cada uno.Cada componente tiene sus dependencias: Por ejemplo el componente draggable depende de ui.mouse.js, que es donde se definen las interacciones con el mouse.

Archivos de jQuery ui

Así que para, por ejemplo, usar los draggables debes hacer lo siguiente:

<script src="jquery.js"></script>

<script src="ui.mouse.js"></script>

<script src="ui.draggable.js"></script>

<!--y si quieres tener las opciones extra:-->

<script src="ui.draggable.ext.js"></script>

Cool, no?

Desarrollo

Actualmente se están desarrollando bastantes módulos. Algunos no están totalmente listos para usar, pero si confías en el poder luminoso de la fuerza, puedes buscar algunos en el folder “ui” de el SVN de jQuery. Ahi encontrarás (o tal vez no XD) plugins indocumentados que te puedan ser útiles.

Algunos sobre los que se está trabajando son: Menu, Control de formularios, Arbol, Splitter (?), Editor de texto enriquecido y Uploader.

So…

Ya saben, todo está en experimentar. Viendo los demos realmente te inspiras: El componente modal puede ser muy bueno para reemplazar alerts, el efecto Magnify está muy bien logrado, etc. Asi que… long live jQuery ( y si era con f, ptj )

4 Comments

Filed under: fun, javascript, jquery

Probando nueva direccion

Author: admin

2 Sep

En teoría, la instalacion de wp salió sin problemas, tal como la importacion.

Como eso es tan poco frecuente cuando yo instalo un blog… estoy probando todas las caracteristicas

Bye

7 Comments

Filed under: mier*, pruebas

Entries (RSS)
Comments (RSS)

Mooniverse