HTML y CSS

Objetivo: Al finalizar el captulo, el alumno

Aplica hojas de estilo.

Disea tablas de datos.

Disea formularios.

Genera plantillas Web.

Temas
1.

Generacin de bibliotecas de estilos

2.

Generacin de grillas de datos

3.

Generacin de formularios

4.

Plantillas Web

Programa Java Web Application Developer

HTML y CSS

1.

17

Generacin de bibliotecas de estilos

Las pginas de estilos (CSS) permiten 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 estilo, 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 similar 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 impares 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 estilo 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

2.

23

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
estilos 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 estilos para una tabla con la
siguiente presentacin:

HTML y CSS

3.

28

Generacin de formularios

Es frecuente presentar formularios en nuestras aplicaciones web, por eso se debe tener
algunas plantillas que permitan 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
estilos 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

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

31

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

4.

33

Plantillas Web

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

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

Contenidos
Definidos los objetivos 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 utilizando mdulos para dividir cada
seccin y ordenarlas en base a su importancia. Podemos partir desde cero o utilizar una
plantilla 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 corporativa 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 plantilla web (layout) que permita 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

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.

36

HTML y CSS

El archivo CSS sera el siguiente:

37

HTML y CSS

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

38

HTML y CSS

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

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

39

HTML y CSS

40

Laboratorio N 2.3

Diseo y Generacin de una plantilla Web.

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

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