documento de referencia xhtml + css + javascript
DESCRIPTION
Este manual tiene como fin resumir los principales elementos xhtml y la metodología para manipular por medio de estilos y javascript las características de los elementos xhtml definidos en un documento html.TRANSCRIPT
Documento de referencia XHTML + CSS + JAVASCRIPT
Introducción Este manual tiene como fin resumir los principales elementos xhtml y la metodología para manipular por medio de estilos y javascript las características de los elementos xhtml definidos en un documento html. Un documento xhtml tiene la siguiente sintaxis: <html> <head> <title></title> </head> <body> Hola mundo </body> </html> Se puede copiar este código html en un archivo de bloc de notas y guardarlo con extensión .html, por ejemplo: prueba.html, el resultado sería:
Un documento html, se construye por medio de tags xhtml, que representan elementos que tienen determinadas funciones visuales y funcionales dentro de una página o documento html. Por ejemplo el concepto de enlazar una referencia interna o externa al documento se percibe por el usuario así:
Conceptualmente, un enlace o hipervínculo, es una puerta que permite enlazar con un único elemento que puede ser una página web, un recurso multimedia (descargas), elementos dentro de la misma página o producir un evento de clic que se interpreta mediante javascript. Los tags tienen los siguientes atributos que son comunes a la mayoría de elementos (consultar: http://www.w3schools.com/ para consultar otros atributos soportados) id : Nombre único que identifica al elemento dentro del documento html, el usuario es el encargado de controlar que no se repita dentro del documento. Se utiliza para encontrar dentro del documento a un elemento en especifico para interactuar con el por medio de estilos CSS o por medio de javascript. name : Nombre que describe nemotécnicamente (responsabilidad del usuario) al elemento, este nombre puede ser repetido. (Se utiliza para crear relaciones entre elementos, para referenciar elementos, entre otras funciones) title : Título del elemento class : Permite asignar un identificador para asignarle estilos gráficos por medio de reglas CSS a un elemento.
El XHTML, permite definir la estructura del documento y los estilos CSS permiten cambiar la estética al documento. Haciendo la analogía con una construcción el XHTML es la obra negra y los estilos la obra blanca, no existe obra blanca sin la obra negra, así mismo los estilos solo cobran importancia si se tiene una estructura para ser decorada siguiendo reglas y normas gráficas. En el siguiente ejemplo se crea un documento que tiene 3 secciones, y luego se utilizan los ids de los elementos para cambiarles la estética por medio de estilos. <html> <head> <title></title> <style type="text/css"> #cabezote{ background-color:#FF9900; height:300px; } #central{ background-color:#FFCC33; height:200px; } #pata{ background-color:#33FF00; } </style> </head> <body> <div id="cabezote"></div> <div id="central"></div> <div id="pata"> <a href="#">Ejemplo de enlace</a> </div> </body> </html> La lectura que realiza el navegador del siguiente código es: Elemento #cabezote, le voy a poner los siguientes estilos gráficos, un color de fondo en hexadecimal que es #FF9900 y le voy a cambiar solamente su alto por defecto a 300 píxeles. Luego al elemento #central, le pongo un color de fondo en hexadecimal que es #FFCC33 y un alto de 200 píxeles, por último al elemento #pata le pongo solamente un color de fondo #33FF00. El resultado de la lectura que realiza el navegador y luego de aplicar las reglas de estilos es:
Eventos, extendiendo la funcionalidad con el usuari o Además de poder cambiar la parte gráfica de los elementos del documento xhtml, también se puede definir comportamientos como respuesta a la interacción con el usuario. El navegador nos da la posibilidad de utilizar un concepto muy poderoso que le permite al usuario interactuar con los elementos del documento. Los eventos se pueden relacionar con una torre de transmisión de una emisora de radio, es decir la señal de una emisora se propaga desde un punto particular por toda una ciudad. Para este caso la emisora es cualquier elemento dentro del documento incluso el mismo el elemento y la ciudad por donde se propaga la señal es el documento. Como nota importante, fuera de la ciudad de la emisora la señal no existe, igualmente por fuera del documento el evento no existe. Para recibir y reproducir la señal de la emisora el usuario necesita de un aparato receptor que le reciba y transforme la señal en un flujo sonoro que el puede percibir. Así mismo dentro del documento se necesita tener una función (aparato receptor) que sea capaz de interpretar el evento que se produce dentro del documento y procesarlo. En la siguiente imagen se puede ver el esquema que estamos usando para entender los eventos, en esta imagen también se deduce, en el documento se generar múltiples eventos, pero no necesariamente todos los eventos son tenidos en cuenta, así mismo dentro de
una ciudad pueden transmitir múltiples emisoras, pero la transmisión puede ser percibida por 0 o más aparatos reproductores.
Cada elemento del documento html, produce un número determinado de eventos, para consultar la lista de todos los eventos por elemento se recomienda el siguiente enlace de referencia http://www.w3schools.com/jsref/jsref_events.asp Para facilitar la experiencia del usuario con el documento html, existe una serie de tags que permiten visualizar componentes de entrada y salida que se utilizan para interactuar con los diferentes elementos de la página.
Campos de selección (Combobox)
Es una lista de datos relacionados, donde cada uno tiene una representación de texto y asociado un dato valor.
Gráficamente
Sintaxis del elemento <select name="select" id="documento_identidad" o> <option value="1">Cedula</option> <option value="2">Tarjeta Identidad</option> <option value="3">Cedula Extranjeria</option> <option value="4">Pasaporte</option> <option value="5">Otro</option> </select> Para interactuar con el elemento le debemos poner un id único, por ejemplo documento_identidad, y luego por medio de javascript interactuamos con los datos así: <script language="javascript"> function presiono() { var respuesta = document.getElementById('documento_identidad'); alert(respuesta.value); } </script> La interpretación que le da el navegador al código javascript es: Documento html, busque el elemento que tenga el id “documento_identidad” y me guarda una referencia a ese elemento en la variable respuesta, luego del elemento consulte el valor y muéstrelo en una ventana alert. El resultado en el navegador gráficamente es:
Al presionar una de las opciones del combobox, se imprime el dato valor relacionado. Para más información: http://www.w3schools.com/htmldom/dom_obj_select.asp
Botones radio (RadioButton) Se utiliza para ofrecer al usuario un grupo de elementos relacionados que son mutuamente excluyentes, se utilizan principalmente para preguntas de selección múltiple con única respuesta por ejemplo para preguntar por el sexo del usuario en un formulario. Gráficamente
Sintaxis <p>¿Cuál es su fruta preferida?</p> Banano<input type="radio" name="pregunta" value="Banano" /><br /> Fresa<input type="radio" name="pregunta" value="Fresa" checked="checked"/><br /> Mango<input type="radio" name="pregunta" value="Mango" /><br /> Sandia<input type="radio" name="pregunta" value="Sandia" /><br /> Piña<input type="radio" name="pregunta" value="Piña" /><br /> <input type="button" value="Consultar respuesta" onclick="consultarRespuesta();" /> El tag input se le asigna el valor de radio y un valor dato asociado. Para que los radios se relacionen se debe asignar el mismo nombre a todos los radios seleccionados, de esta forma se crea una relación de grupo, es decir si el usuario presiona una opción inmediatamente las demás opciones se deshabilitan. Para poder interactuar correctamente con un grupo de opciones utilizamos el siguiente script <script language="javascript"> function consultarRespuesta() { var elementos = document.getElementsByName('pregunta'); var seleccionado = false; for (var i=0; i< elementos.length; i++) { if(elementos[i].checked) seleccionado = elementos[i].value; } alert(seleccionado); } </script> La lectura de este script que realiza el navegador es, Documento busque los elementos que tengan el nombre pregunta y guarda la referencia en la variable elementos (Esta referencia es un array porque pueden ser uno o más elementos), luego inicialice una variable seleccionado en falso y verifique por medio de un ciclo for, el estado de cada elemento, si algún elemento esta seleccionado, cambie el valor de la variable seleccionado al valor dato del radio, por último muestre el resultado en un campo alert. La ejecución del script al presionar el botón consultar respuesta es
Para más información: http://www.w3schools.com/htmldom/dom_obj_radio.asp
Campos de verificación (CheckBox) Los checkbox son parecidos a los botones de radio, con la diferencia que podemos seleccionar una o más opciones simultáneamente, los datos no están relacionados. En el siguiente ejemplo se le pregunta al usuario a que servicios desea suscribirse, como se puede contestar a esta pregunta con múltiples respuestas utilizamos los checkbox. Gráficamente
Sintaxis <p>¿ A qué servicios desea inscribirse?</p> <p><br /> Revista Schock <input type="checkbox" id="c1" value="shock" /> <br /> Revista Semana <input type="checkbox" id="c2" value="semana" /> <br /> Revista Soho <input type="checkbox" id="c3" value="soho" /> <br /> Revista Don Juan <input type="checkbox" id="c4" value="don_juan" /> <br /> <input type="button" value="verificar selección" onClick="verificarSuscripcion();" /> </p> Si necesitamos inicializar el elemento seleccionado agregamos el siguiente atributo al tag del elemento checked="checked" Para interactuar con el elemento preparamos un script, utilizando una sintaxis diferente para buscar el elemento en el documento html <script language="javascript"> function verificarSuscripcion() { var decision_suscripcion = ""; if(c1.checked) decision_suscripcion+= c1.value+"\n"; if(c2.checked) decision_suscripcion+= c2.value+"\n"; if(c3.checked) decision_suscripcion+= c3.value+"\n"; if(c4.checked) decision_suscripcion+= c4.value+"\n"; alert(decision_suscripcion); } </script> Este ejemplo se pone para que el estudiante conozca otra forma de acceder al elemento, sin embargo no se recomienda su uso porque pueden haber por ejemplo problemas si manejamos variables dentro del script con el mismo id del elemento.
La lectura del navegador del script es la siguiente Inicialice una variable que se llame decision_suscripcion con la cadena vacía, si el elemento con id c1 esta checkeado, guarde el valor seguido de un salto de línea, luego si el elemento con id c2 esta checkeado, guarde el valor seguido de un salto de línea,… por último imprima el valor de decisión_suscripcion. El resultado de ejecutar el script en el documento html es
Para mejorar la interacción con el usuario al ejemplo anterior se le va a integrar interacción con jquery, hay que hacer los siguientes cambios en el código Importamos la librería jquery al documento html así: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> Para utilizar la librería debemos estar conectados a internet, porque estamos solicitando un recurso que esta en googleapis.
El script cambia un poco <script language="javascript"> function verificarSuscripcion() { var decision_suscripcion = ""; if(c1.checked) decision_suscripcion+= c1.value+"<br />"; if(c2.checked) decision_suscripcion+= c2.value+"<br />"; if(c3.checked) decision_suscripcion+= c3.value+"<br />"; if(c4.checked) decision_suscripcion+= c4.value+"<br />"; //alert(decision_suscripcion); $("#mensaje").hide("up"); $("#mensaje").html("<p>"+decision_suscripcion+"</p>"); $("#mensaje").show("down"); } </script> Comentamos la salida en un campo alert, agregamos 3 líneas Escondemos el mensaje, para prevenir que se quede abierto cada vez que el usuario válida los datos de suscripción. $("#mensaje").hide("up"); Agregamos código html en caliente al div que contiene el mensaje que se le presentará al usuario $("#mensaje").html("<p>"+decision_suscripcion+"</p>"); Esta función, recibe código html que se le asignara dinámicamente a un elemento html, en este caso al div con id mensaje. $("#mensaje").show("down"); Por último visualizamos el div, con un efecto de persiana de arriba hacia abajo.
Necesitamos agregar un estilo: <style type="text/css"> #mensaje{ display:none; background-color:#FFCC00; } </style> El div mensaje, cambiamos su forma de visualizarse para que se encuentre oculto al entrar en la página y le ponemos un color de fondo. Y en el código html dentro del cuerpo agregamos el siguiente tag, con el id mensaje <div id="mensaje"></div> Si abrimos la página, Gráficamente
La sintaxis completa quedaría <html> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script language="javascript"> function verificarSuscripcion() { var decision_suscripcion = ""; if(c1.checked) decision_suscripcion+= c1.value+"<br />";
if(c2.checked) decision_suscripcion+= c2.value+"<br />"; if(c3.checked) decision_suscripcion+= c3.value+"<br />"; if(c4.checked) decision_suscripcion+= c4.value+"<br />"; //alert(decision_suscripcion); $("#mensaje").hide("up"); $("#mensaje").html("<p>"+decision_suscripcion+"</p>"); $("#mensaje").show("down"); } </script> <style type="text/css"> #mensaje{ display:none; background-color:#FFCC00; } </style> </head> <body> <div id="mensaje"></div> <p>¿ A qué servicios desea inscribirse?</p> <p><br /> Revista Schock <input type="checkbox" id="c1" value="shock" /> <br /> Revista Semana <input type="checkbox" id="c2" value="semana" /> <br /> Revista Soho <input type="checkbox" id="c3" value="soho" /> <br /> Revista Don Juan <input type="checkbox" id="c4" value="don_juan" /> <br /> <input type="button" value="verificar selección" onClick="verificarSuscripcion();" /> </p> </body> </html>
Presionamos el botón verificar selección y obtenemos
Documento realizado por Andrés Bedoya Tobón [email protected]