Programa J ava Web Application Developer

HTML y CSS






Objetivo: Al finalizar el captulo, el alumno

Aplica hojas de estilo.
Disea tablas de datos.
Disea formularios.
Genera planti llas Web.


Temas

1. Generacin de bibliotecas de estilos
2. Generacin de grillas de datos
3. Generacin de formularios
4. Plantillas Web









HTML y CSS 17


1. Generacin de bibliotecas de estilos








Las pginas de esti los (CSS) permi ten dar un mejor acabado a nuestros documentos web, por
lo tanto, ser conveniente tener bibliotecas de estilos para incorporar en nuestros proyectos
segn los requerimientos de nuestros clientes.

Es usual que las bibliotecas de estilos se guarden en archivos de extensin css donde se
agrupan atributos en clases, por ejemplo podramos tener el archivo font.css y en l definir las
siguientes clases:

HTML y CSS 18




Como puede apreciar las clases inician con un punto (.) seguido de una etiqueta que identifica
a la clase.

El archivo font.css se puede llamar desde cualquier documento web con el siguiente tag link:



Para luego hacer uso de l, como en el siguiente fragmento de cdigo con su salida a la
derecha:






HTML y CSS 19

Tambin, podemos agrupar en una clase varios atributos de esti lo, como por ejemplo:




Tal vez, puede ser usado como texto principal dentro de nuestros documentos o agregarlo al
tag body.


Es muy comn especificar a que tag afectar una clase mediante el formato tag.clase, como
ilustramos con la clase formal que solo se podr usar con el tag a.





HTML y CSS 20

Selectores ID

Los selectores ID trabajan en forma si milar a las clases con un par de excepciones: en lugar
del carcter punto (.) se usa # y segundo en un documento web solo se podr usar una sola
vez, es decir son nicos. Por ejemplo, observe la siguiente clase:




Su uso podra ser el siguiente:




Y la salida sera la siguiente:





HTML y CSS 21

Generacin de mens

Es usual que en documento Web se tenga que hacer un men
de vnculos, donde las filas i mpares sean de diferente color que
las filas pares y adems, cuando el puntero del mouse pase por
cada elemento del men, este cambie de color tanto en fondo
como en texto.

Este documento, muestra el esti lo para desarrollar dichos
mens, mediante la clase menu que se muestra en cdigo
fuente ms adelante.

Asimismo, los enlaces para mens no sern los nicos en un desarrollo
Web, pues se requieren de otros estilos para los enlaces normales, como
muestra la figura a la derecha, que se ha desarrollado mediante una
clase de nombre normal mostrado en cdigo fuente ms adelante.


Este sera el cdigo fuente de un documento HTML que hace usos de los estilos mencionados
anteriormente:




HTML y CSS 22


Como notar en la lnea 7 los estilos estn en el documento links.css de la carpeta css y su
cdigo es el siguiente:


HTML y CSS 23


2. Generacin de grillas de datos







Muchas veces se presentan consultas en tablas dentro de los documentos Web y se desea que
las filas impares se muestren de un color diferente al de las filas pares (tabla cebra). Como
muestra, observe la siguiente figura:



Adems, se desea que cuando el mouse pase sobre alguna de estas filas de la tabla, esta
cambie de color.



HTML y CSS 24

Todo esto es posible gracias a las pginas de estilo con cdigo JavaScript. En este documento,
se muestra el estilo y las funciones para ello.


El siguiente fragmento de cdigo muestra la seccin HEAD del documento que hace uso de los
esti los y funciones para obtener el efecto en estudio:




En la lnea 7 del documento se carga a tablas.css de la carpeta css y en la lnea 8 a tablas.js
de la carpeta js. A continuacin se muestra la seccin BODY con los datos de la tabla:



HTML y CSS 25


Como notar en la lnea 12 la tabla usa la clase tablaQry.

Asimismo, las filas de su TBODY usan las clases f1 para las impares y f2 para las pares,
llamando adems a funciones ilumina() para onmouseover y restaura() para onmouseout.

La funcin ilumina() cambia el color de la fila cuando el mouse pasa sobre ella y la funcin
restaura() restablece el color que tena la fila.

A continuacin, se muestra el cdigo de tablas.css donde puede cambiar los colores para
personalizarlos a su estilo deseado:





HTML y CSS 26

En el siguiente cdigo tablas.js se puede cambiar los colores para personalizarlos a su estilo
deseado:


HTML y CSS 27

Laboratorio 2.1


Generacin de una biblioteca de estilos para tablas







Utilizando la teora de este tema, genere una biblioteca de esti los para una tabla con la
siguiente presentacin:






HTML y CSS 28


3. Generacin de formularios







Es frecuente presentar formularios en nuestras aplicaciones web, por eso se debe tener
algunas plantillas que permi tan rpidamente dar solucin a los requerimientos de presentacin
de nuestros clientes, por ejemplo con el siguiente formulario:






HTML y CSS 29

Adems, se desea que cuando el mouse pase sobre las cajas de texto, estas cambien su color
de fondo.




El siguiente fragmento de cdigo muestra la seccin HEAD del documento que hace uso de los
esti los y funciones para obtener el efecto en estudio:




En la lnea 10 del documento se carga a form.css de la carpeta css.

El cdigo de la seccin HEAD sera la siguiente:

HTML y CSS 30





HTML y CSS 31


La biblioteca de estilos contenida en el archivo form.css sera el siguiente:






HTML y CSS 32


Laboratorio N 2.2


Generacin de una biblioteca de estilos para formularios







Utilizando la teora de este tema, genere una biblioteca de estilos para formularios con la
siguiente presentacin:





HTML y CSS 33

4. Plantillas Web







Para el diseo de un proyecto web, se deben considerar los siguientes aspectos:

Objetivos
Conociendo cuales son los objeti vos que persigue el cliente al realizar un si tio web, se
podr identificar los requerimientos del proyecto y sus posibles lectores.

Contenidos
Definidos los objeti vos y los posibles lectores, se debe considerar el contenido que se
incorporar al sitio. Luego se proceder a filtrarlo y agruparlo de manera consistente
para presentarlo al usuario.

Estructura de la web
La estructura de la web es la diagramacin del men y el formato que tendrn las
pginas web. Se define as el esqueleto de la web uti lizando mdulos para di vidir cada
seccin y ordenarlas en base a su i mportancia. Podemos partir desde cero o utilizar una
planti lla web.

Navegacin
El sistema de navegacin o men es el que permite al usuario acceder a las diferentes
pginas del sitio web. Es necesario lograr un diseo web claro y una navegacin sencilla
que gue al usuario por el sitio y que sea una gua de lo que va a encontrar.


HTML y CSS 34

Diseo visual
El diseo web visual comprende la parte esttica de la pgina web. Se realiza tomando
en cuenta la identidad corporati va de la empresa, sus colores, logotipos, etc. En esta
etapa, se presenta uno o varios bocetos del diseo web que mostrarn al cliente una
versin cercana a la final.


En este sentido, se define una planti lla web (layout) que permi ta en forma gil y sencilla
resolver los aspectos considerados.

Para ello, se debe basar en un esqueleto que se podr ir llenando conforme se avance con el
proyecto. Este esqueleto de presentacin de informacin ordenada y coherente est basado en
los layouts que bsicamente podran tener las siguientes presentaciones entre otras:











HTML y CSS 35
















HTML y CSS 36

Por ejemplo, al querer mostrar la siguiente documentacin web bsica:




Se tendra que considerar lo siguiente:

Un espacio para el banner (parte superior)
Un espacio vertical izquierdo para el men
Un espacio a la derecha para los contenidos
Un espacio de pie de pgina para cerrar


Entonces, se debe crear una plantilla (layout) para tal presentacin.





HTML y CSS 37

El archivo CSS sera el siguiente:






HTML y CSS 38

El contenido del JSP que use este archivo CSS sera el siguiente:




HTML y CSS 39


Y cuando ejecute el JSP, la presentacin sera la siguiente:



A esto, le puede agregar una imagen de su gusto para el banner.



HTML y CSS 40

Laboratorio N 2.3


Diseo y Generacin de una plantilla Web.





Utilizando la teora de este tema, genere una planti lla web con la siguiente presentacin:




Cortesa de http://www.ti-viable.com/ (propietario de esta pgina web)