0

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:



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:

0

Examen

Se trata de elaborar una página web sobre un artistas





Para ello, se debe utilizar:

Programa Dreamweaver, Photoshop, corel, etc

Hojas de estilo CSS
o Viñetas o Listas
o Cambio de tipo de fuente (ej. google fonts)

o imagen de fondo o color de fondo

o Estilos en los textos

o Elemento hover

La estructura de la página será como sigue (Ojo, no tiene diseño, es solo ilustrativo):
 

0

Formularios pForm

Con pForm podrán tener un formulario en HTML (relativamente bueno) con un bonito estilo. Para ello sólo tendrás que seleccionar un esquema de color, escoger los campos y escribir las etiquetas que los acompañarán.
pForm
El resultado podrán descargarlo para integrarlo en su sitio comodamente y gratis.

0

Formularios

Formulario <form>
Un formulario es un elemento que permite recoger datos introducidos por el usuario.
Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form> tiene los siguientes atributos:
El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.
El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.
Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código:
<form action="mailto:formularios@email.com" method="post" enctype="text/plain" >
  ...
</form>
A continuación veamos los distintos elementos que se pueden incluir en un formulario.
Áreas de texto <textarea>
Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Por ello, suelen utilizarse para que incluyan comentarios.
Para insertar un área de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form>del formulario.
Para que el área de texto tenga algún valor inicial, habrá que insertarlo entre las etiquetas <textarea> y </textarea>.
El atributo name indica el nombre del área de texto. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario, para poder identificarlos a la hora de procesarlos.
El atributo rows indica el número de líneas que podrán ser visualizadas en el área de texto por lo que determina al alto del área de texto.
El atributo cols indica el número de caracteres por línea que podrán ser visualizados en el área de texto por lo que determina al ancho del área de texto.
Gracias a las barras de desplazamiento, es posible insertar más líneas de las especificadas en el atributo rows, y más caracteres por línea de los especificados en el atributo cols.
Por ejemplo, para insertar el área de texto:
Habría que escribir:
<textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que quieras</textarea>
Elementos de entrada <input>
Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario.
El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual será evaluado, y el atributo typeindica el tipo de elemento de entrada.
Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse para cada uno de ellos.
 Campo de texto:
Para insertar un campo de texto, el atributo type debe tener el valor text.
El atributo size indica el número de caracteres que podrán ser visualizados en el campo de texto, determina el ancho de la caja.
El atributo maxlenght indica el número de caracteres que podrán ser insertados en el campo de texto.
El atributo value indica el valor inicial del campo de texto.
Por ejemplo, para insertar el campo de texto:
Habría que escribir:
<input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">

 Campo de contraseña:
Para insertar un campo de contraseña, el atributo type debe tener el valor password.
El resto de atributos son los mismos que para un campo de texto normal. La única diferencia es que todas las letras escritas en el campo de contraseña serán visualizadas como asteriscos.
Por ejemplo, para insertar el campo de contraseña:
Habría que escribir:
<input name="contra" type="password" value="contraseña" size="20" maxlength="15">
 Botón:
Para insertar un botón, el atributo type debe tener el valor submit, restore o button.
Si el valor es submit, al pulsar sobre el botón se enviará el formulario.
Si el valor es restore, al pulsar sobre el botón se restablecerá el formulario, borrándose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial.
Si el valor es button, al pulsar sobre el botón no se realizará ninguna acción.
El atributo value indica el texto que mostrará el botón.
Por ejemplo, para insertar el botón:
Habría que escribir:
<input name="boton" type="submit" value="Enviar">

 Casilla de verificación:
Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.
El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma valores.
Por ejemplo, para insertar la casilla:
Habría que escribir:
<input name="casilla" type="checkbox" value="acepto" checked>

 Botón de opción:
Para insertar un botón de opción, el atributo type debe tener el valor radio.
El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Este atributo no toma valores.
Los botones de opción se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opción con el mismo nombre (que indica la variable) y con distintos valores. Sólamente uno de estos botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable.
Por ejemplo, para insertar los botones de opción:
 estudiar
trabajar
Habría que escribir:
<input name="prefiere" type="radio" value="estudiar" checked>
<input name="prefiere" type="radio" value="trabajar">
Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que ponemos como valor no aparece escrito en la página es un datos interno.

<input name="prefiere" type="radio" value="estudiar" checked>
<input name="prefiere" type="radio" value="trabajar">
Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que ponemos como valor no aparece escrito en la página es un datos interno.
Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que no ve el usuario, en este caso habría que incluir el atributo value para que el formulario pase ese valor al programa que recoge los datos del formulario.
Para que el usuario envie un fichero suyo a través del formulario tenemos el tipo file, este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envie cualquier tipo de fichero nos podríamos encontrar con sorpresas no siempre agradables.

Campos de selección <select> ...
Los campos de selección se utilizan para insertar menús y listas desplegables.
Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y </select> en un formulario.
El atributo name indica el nombre del menú o lista será el nombre de la variable que contendrá el valor seleccionado.
El atributo size indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo, determina el alto de la lista.
La aparición del atributo multiple indica que el usuario podrá seleccionar varios elementos de la lista al mismo tiempo, ayudándose de la tecla Ctrl. Este atributo no toma valores.
La aparición del atributo disabled indica que la lista estará desactivada, por lo que el usuario no podrá seleccionar sus elementos. Este atributo tampoco toma valores.
Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>.
El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo, se enviará el texto de la opción, que se encuentra entre las etiquetas <option> y </option>.
La aparición del atributo selected indica que el elemento aparecerá seleccionado. Este atributo no toma valores.
Por ejemplo, para insertar el menú:
Habría que escribir:
<select name="mascota">
  <option selected>--- Elige animal ---</option>
  <option>Perro</option>
  <option>Gato</option>
</select>

Y para insertar la lista:
Habría que escribir:
<select name="animal" size="3" multiple>
  <option selected>---Elige animales---</option>
  <option value="ave">Loro</option>
  <option>Perro</option>
  <option>Gato</option> 
  <option>Pez</option>
</select>

0

Quickmenu, Generador de menús desplegables

Los menús desplegables siempre han sido un elemento muy versátil, elegante y dinámico en la navegación de un sitio, pero la dificultad para crearlos te hace pensarlo dos veces antes de implementarlo en tu web o blog. Quick menú es una aplicación en linea que te permite crear este tipo de menús de forma relativamente rápida, personalizada y con grandes resultados. El proceso general es el siguiente:




Selecciona el diseño.

QuickMenu ofrece varias opciones de diseño, selecciona el tuyo en base a la necesidades de espacio y la cantidad de opciones que necesitas, hay varios diseños horizontales y algunos verticales, incluso puedes encontrar el menú usado en Adobe.







Una vez seleccionado da click en el botón “Customize Menu”.



Personaliza tu menú.

La interfaz para personalización esta bastante completa, te recomiendo la explores y veas como funciona. A groso modo, las opciones de estilo (colores, viñetas, espacios, etc) las encuentras del lado derecho, opciones de configuración (html, script, etc) en los menús superiores y para cambiar los links y el texto en los menús solo tienes que dar doble clic en cada elemento.







Pude llevar un rato conocer la aplicación, pero para necesidades básicas te darás cuenta que resulta muy intuitivo.



Exportación del código.

Una vez que hallas completado tu menú, solo vas al menú “file” y posteriormente a “save” para obtener todo el código necesario.



Aplicación.

Para colocarlo en tu blog y web solo hay que colocar cada parte de código en su lugar. Los estilos y scripts entre la etiquetas < head > y < /head > y el html del menú justo donde quieras mostrarlo. La estructura misma del código exportado ya trae este orden y puedes usarlo como guía.



Esta aplicación en linea es la versión gratuita de un software de escritorio con más opciones y plantillas, aun así es un recurso muy útil para la creación de un menú de este tipo.

2

Práctica 12 Acerca de

En sitios web profesionales, incluso personales, se agrega una sección especial dedicada a ACERCA DE, en esta sección se habla acerca del desarrollador, puede ser su aficiones, gustos, intereses, profesión, es decir un extracto de su curriculum, suele incluir una foto.




Para un diseñador web, su imagen es fundamental en la red, es por ello que generan cada vez imágenes más vistosas, explotando al máximo, las nuevas tecnologías, y de esta forma hacen evolucionar la internet.



Desde sus inicio, la web solo ofrecía información y bastaba solo con usar un buscador tal como google para desplegarla. Actualmente esto ha evolucionado y nace lo que es la web 2.0, donde el usuario no solo se limita a buscar información sino, que además interactúa con la misma, creando así la web 2.0, la cual se aplica principalmente a redes sociales, tales como facebook, twitter, entro otras más.



Para esta práctica se deberá diseñar su acerca de, la cual deberá contener una idea de quienes son ustedes, así como imágenes y estilos que los caractericen de los demás.



Actividades.



1. Diseñar en papel, a estilo de bosquejo, como sería la distribución de su página acerca de

2. Identificar los diferentes elementos utilizar

3. Codificar la página web

0

Practica 11 Diseño Buscador Google

Google, se caracteriza por su simplicidad y liempieza en su diseño, omitiendo todos aquellos elemento que impliquen contaminación visual.


En esta práctica vamos a recrear la pagina principal de google.




1. diseñar la maqueta web, identificando las posibles etiquetas DIV que deba de tener
2. creasr un logo de la misma dimencion que el de google para nuestro sitio
3. aplicar el efecto fade de la practica 10 para los div que los requieran
4. utilizar el formulario de busqueda de google para realizar una busqueda real

Suscribirse a: Entradas (Atom)
 

2009 ·Diseño de Páginas Web by TNB

PostsComments