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:
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 que se pueden usar son los mismos que usariamos normalmente. 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:
Nombre del efecto Descripcion 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")
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")
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")
Fade In(Aparecer) Modifica el atributo transparencia desde 0.
$(objeto).fadeIn("velocidad")
Fade Out(Desaparecer) Modifica el atributo transparencia desde el valor actual, hasta llegar a 0.
$(objeto).fadeOut("velocidad")
Center (Centrar) Centra un elemento con respecto a su "parent".
$(objeto).center("velocidad");
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");
"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:
Mostrando entradas con la etiqueta tutoriales. Mostrar todas las entradas
Mostrando entradas con la etiqueta tutoriales. Mostrar todas las entradas
0
jQuery
0
Diseño Web
1. Planteamiento de objetivos para tu página web
Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para plantearnos el proyecto y qué queremos conseguir al realizar nuestra web. La planificación de tu web debe incluir:
- Breve descripción de los contenidos de la página, su título principal, etc.
- Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)
- Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público objetivo, etc.
- Hardware, software, documentación que necesito para realizarla y de qué dispongo realmente.
- Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas físicos, etc. para adaptar la página a sus características.
- Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos, etc.
2. Estructurar el contenido de la página
Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la página web. Antes de empezar a desarrollar tu página web en el ordenador, debes tener muy claro cuáles serán sus contenidos, su estructura, el nombre de la página, etc. cosas que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo inútil y pérdidas de tiempo. Hay varias maneras de estructurar el contenido de una web:
En árbol: Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta manera se agrupan las páginas web en niveles, de tal modo que para llegar del primero al último se debe pasar por todos los intermedios. Esta estructura es poco navegable si tenemos una web con muchas páginas, porque para ver las páginas de otra rama tenemos que retroceder hasta la página principal, haciendo la navegación muy pesada.
En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores. Es una estructuración muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de páginas web para conseguir su objetivo.
Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista. Esta estructura es mucho más navegable y práctica, puesto que permite poder desplazarse de rama en rama sin necesidad de volver a la página principal para hacerlo.
En red: Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que es una estructura más compleja y menos ordenada. Su ventaja es que desde cada página podemos ir a cualquier otra del sitio. No obstante, requiere mucha planificación para evitar ofrecer al visitante un caos de enlaces innecesarios.
Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a recopilar información para confeccionar cada sección de tu página web. Conforme vayas investigando sobre el tema de la web, casi con seguridad irás realizando modificaciones tanto en su estructura como en sus contenidos para adaptarla mejor a lo que has aprendido, por lo que es conveniente que trabajes sobre borradores, no con versiones definitivas, te ahorrarás mucho trabajo. Por ejemplo, puedes haber decidido hacer una web sobre Ferrari, y en cuanto a su diseño querer colocar un menú a la izquierda con las secciones principales, un cuerpo central con el contenido de la sección y una última columna a la derecha donde insertar tu publicidad. No obstante, puede ocurrir fácilmente que al buscar información sobre su escudería encuentres tanta y tan diversa que llegues a la conclusión de que es más cómodo para los visitantes colocar un menú de navegación específico de la sección en la izquierda y el principal en la derecha para que puedan navegar por la sección con rapidez. Por lo que si ya hiciste la página definitiva de la sección llamada escudería, tendrás que retocarla para adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario.
3. Diseñar la página web
Una vez tengas hecha la estructura, recopilada bastante información y completado el contenido de varias secciones, tienes suficiente material como para saber con más precisión lo que quieres, por lo que puedes empezar a diseñar gráficamente cada una de las páginas de tu web, indicando los elementos interactivos y gráficos que van a intervenir en cada una. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje HTML. El HTML es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. A la hora de empezar con el diseño, ten en cuenta que:
- La estructura de la página debe ser lo más lógica posible facilitando la navegación a tus visitantes (es importante en este punto la usabilidad). Ninguna página puede quedar huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas. Si esto ocurre, es probable que el usuario cierre nuestra página y entre en otra en la que le sea más fácil navegar por los contenidos.
- Aunque no es un requisito necesario, sí que es muy aconsejable que aprendas HTML, ya que así podrás hacer todo lo que quieras sin depender de editores gráficos como Dreamweaver, tendrás más flexibilidad y opciones a la hora de realizar tus diseños, podrás corregir tu código y saber qué es lo que falla cuando te de errores, entenderás cómo funcionan las páginas de otros webmasters, etc.
- Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy útil para crear una página atractiva y bien diseñada. Con las hojas de estilo puedes crear un archivo que te sirva para dar una mejor apariencia a todas tus páginas a la vez, y siempre que quieras cambiar el aspecto de tu web, sólo tendrás que modificar ese archivo en lugar de ir una por una revisando cada página de la misma.
0
Códigos de colores HTML
Los colores en HTML son construidos usando una combinación de tres colores básicos: rojo, verde y azul. Cada uno de estos colores toma un valor entre 0 y 255 y son representados en notación hexadecimal (00 a FF). De esta forma, un color está compuesto por seis caracteres donde los dos primeros representan el valor para el rojo, los dos segundos representan el valor para el verde y los dos terceros representan el valor para el azul (por ejemplo, el rojo tiene FF para el valor rojo y 00 para el resto: "FF0000").
Al mezclar estos colores se mezclan los colores, de modo que puedes hacer un amarillo mezclando el rojo y el verde (por ejemplo, "FFFF00"), violeta mezclando el rojo y el azul (por ejemplo, "FF00FF") o cyan mezclando verde y azul (por ejemplo, "00FFFF"). Esto funciona exactamente como la paleta de un pintor.
El tono del color también puede ser variado incrementando (por ejemplo, violeta claro "FF66FF") o decrementando (por ejemplo, violeta oscuro "AA00AA") los tres valores proporcionalmente.
Nota: por la naturaleza de esta página, los no videntes pueden encontrar el siguiente mapa de colores escasamente útil.
Mapa de colores
Suscribirse a:
Entradas (Atom)
