Desarrollo de aplicaciones web Creación de páginas web con HTML5, CSS...

Práctica 1: Creación de páginas web con HTML5, CSS y

Javascript.
1- Objetivo general del laboratorio de DAW.
En las prácticas de Desarrollo de Aplicaciones Web se pretende que el alumno utilice los
conocimientos teóricos adquiridos en teoría en el desarrollo de una aplicación práctica y funcional,
la creación de un sitio web completo de una empresa.

El desarrollo de la aplicación web se desarrollará en tres fases correspondientes a las

prácticas 1, 2 y 3 de la asignatura. En la práctica 1 se creará la parte básica y estática del sitio web
utilizando HTML5, CSS y Javascript, mientras que en la práctica 2 se integrará el contenido
dinámico de la web utilizando servlets, JSPs y JavaBeans y en la práctica 3 se terminará de
desarrollar todo el contenido dinámico utilizando PHP.

2- Objetivo.
El objetivo de esta práctica es la creación del sitio web de una empresa con actividad
comercial a través de Internet (venta online). Para ello se utilizaran los conocimientos y técnicas
adquiridas en la parte de teoría sobre HTML5, hojas de estilo CSS y Javascript.

3- Enunciado.
Una empresa ficticia desarrolla la venta online de sus productos, siendo su ámbito comercial
el que se elija de forma libre, pero una vez elegido, todo el sitio debe mantener la coherencia en
cuanto a estética, productos ofertados, actividades, etc., como si fuera un proyecto real.
3.1- Diseño de la página web.
La estructura de la página web es libre, pero debe disponer, como mínimo, de los siguientes
apartados:

• Un menú que permita acceder a las diferentes partes del espacio web. Este menú debe
permanecer siempre visible.

• Una parte central que permita visualizar la información que se va seleccionando con el
menú.

1
Desarrollo de aplicaciones web Creación de páginas web con HTML5, CSS...

Menú

Información

Figura 3.1.1: Estructura básica de la página web.

Puede haber un mayor número de apartados dentro del espacio web si así lo deseáis, y la
situación del menú y de la información dentro de la pantalla es libre (arriba-abajo, izquierda-
derecha, etc.). Los menús pueden tener otros submenús si así se desea.
3.2- Opciones de la página web.
El menú de la página web debe tener, como mínimo, las siguientes opciones:

• Inicio: Muestra la página inicial del espacio web en la que se debe mostrar la descripción
general de la empresa y su actividad.

• Empresa: Muestra una página web que informa de la historia de la empresa, su actividad
detallada, controles de calidad, organización, etc.

• Contacto: Muestra una página web con información para contactar con la empresa, por
ejemplo a través de un formulario que permita el envío de un correo electrónico. También
debe aparecer un mapa con su localización, el horario de atención al cliente, el teléfono, etc.

• Productos: Muestra una página o páginas en las que se describen los productos que fabrica
la empresa y sus características de forma detallada. Cada producto dispondrá de un enlace
para añadirlo al carrito de la compra.

• Carrito: Permitirá realizar la gestión del carrito de la compra con operaciones como
eliminar productos, modificar la cantidad, formalizar el pedido, etc.

• Usuario: Consistirá en un conjunto de páginas que mostrará la información de registro del

usuario (nombre, dirección, teléfono, etc.), la información de los pedidos realizados, etc. Se
deberán diseñar opciones para modificar esos datos, cambiar la clave de usuario,
modificar/cancelar pedidos, etc.

◦ Se han de diseñar los formularios necesarios para permitir el acceso a esta sección, a
través de la introducción de un usuario y contraseña y, en caso de un usuario nuevo,
poder realizar su registro introduciendo todos los datos necesarios (nombre de usuario,
clave, nombre, apellidos, dirección, teléfono, etc.).

2
Desarrollo de aplicaciones web Creación de páginas web con HTML5, CSS...

• Administrador: Es la sección de mantenimiento del espacio web. Consistirá en un conjunto

de páginas web que mostrarán información sobre los usuarios y los pedidos realizados en la
web. Como mínimo debe permitir mostrar y/o modificar la información de los usuarios
registrados y los pedidos realizados. Además debe permitir añadir, modificar y/o borrar
productos.

◦ Se ha de diseñar un formulario donde se pueda introducir un usuario y una contraseña

que permita el acceso a esta sección. Este formulario solo debe permitir el acceso al
administrador y no debe permitir el registro de nuevos administradores.
3.3- Consideraciones para el desarrollo de la práctica.
En la práctica 2 se implementará una base de datos, en la cual se introducirá un conjunto de
productos con la descripción de los mismos, precios, etc. Por lo tanto en esta práctica 1 se definirán
de forma estática algunas páginas ejemplo de productos (2 o 3 productos serán suficientes), cuyo
contenido se sustituirá posteriormente en la práctica 2 por el obtenido de las consultas a la base de
datos.

A la hora de realizar un pedido, será necesario estar identificado en la aplicación a través de

un usuario y una contraseña, por ello, en el apartado de carrito se debe pedir el que el usuario se
identifique para poder completar la compra de los productos mediante un formulario.

Figura 3.3.1: Formulario de acceso al carrito.

La funcionalidad de este formulario se llevará a cabo en la práctica 2 a través de servlets y

JSPs, donde a través de los datos existentes en la base de datos se realizará una validación de los
datos introducidos.

El carrito se compondrá de un conjunto de páginas que permiten realizar la gestión del

carrito de la compra, con operaciones como eliminar productos, modificar la cantidad, formalizar el
pedido, etc. La funcionalidad de estas páginas también se llevará a cabo en la siguiente práctica a
través de servlets y JSPs. Al igual que con las páginas de productos, se debe elaborar alguna página
estática a modo de ejemplo de diseño, ya que las páginas definitivas incluirán información obtenida
de la base de datos.

Además, se deberá diseñar otra página web que contenga un formulario donde el usuario
pueda acceder a modificar sus datos, manejar sus pedidos, etc., o registrarse. En el formulario
pueden aparecer unos botones de radio que permitan seleccionar el registro de un nuevo usuario o el

3
Desarrollo de aplicaciones web Creación de páginas web con HTML5, CSS...

acceso con un usuario ya creado1, o bien crear dos formularios independientes, uno para Acceso y
otro para Registro.

Figura 3.3.2: Formulario de usuario con Acceso y Registro conjunto.

El acceso a la sección de administración del espacio web se realiza a través de un usuario y

una contraseña, para ello se diseñará una página web que contenga un formulario donde se puedan
introducir esos datos. La funcionalidad de este formulario se llevará a cabo en la práctica 3 a través
de PHP. Como se ha comentado, no se permitirá registrar nuevos administradores.

Figura 3.3.3: Formulario de acceso a la administración.

Las páginas de la sección de administración estarán formadas por tablas cuyos datos se
extraerán también de la base de datos. El acceso y visualización de estos datos se llevará a cabo en
la práctica 3 a través de PHP. Como mínimo, habrá dos opciones dentro de la sección de
administración, una que muestre los usuarios registrados en la aplicación con sus datos, y otra que
muestre información de los pedidos realizados. En esta práctica 1 se deben definir páginas estáticas
de ejemplo, las cuales se substituirán en la citada práctica.

Los diferentes formularios que se diseñen, deben utilizar HTML5 para la validación del
contenido introducido en cada uno de los campos, en lugar de Javascript. Para ello se deberán
utilizar los tipos de input adecuados, y emplear patrones y expresiones regulares cuando
corresponda.

4- Rúbrica de corrección de la práctica.

La práctica entregada deberá cumplir, como mínimo con los puntos que se indican a
continuación. Si alguno de los puntos no se cumple la calificación será de cero.

1 En caso de pulsar sobre el radio button de registro deben aparecer nuevos campos en el formulario para poder
introducir el nombre, la dirección, etc.

4
Desarrollo de aplicaciones web Creación de páginas web con HTML5, CSS...

4.1- Páginas web.

Las páginas desarrolladas deben estar formalmente bien construidas, siguiendo los
estándares HTML5. Por ello, todos los ficheros html creados deben pasar los test de validación
del W3C que se ubican en http://validator.w3.org.

Además, las páginas desarrolladas deben contener, como mínimo:

• Imágenes.

• Listas.

• Tablas y formatos distintos para las filas de una tabla.

• Enlaces a redes sociales2.

• Ubicación de la empresa con un mapa de Google Maps.

Y también deben:

• Tener cambiado el icono de la web, por ejemplo con <link rel="icon" type="image/ico"
href="./imagenes/icono.ico" sizes="64x64">.

• Ajustar el tamaño de los diferentes apartados dentro del espacio web si se modifica la
ventana del navegador utilizado, esto es, debe ser redimensionable (resizable en inglés).
4.2- Hojas de Estilo.
Las hojas de estilo deben seguir los estándares CSS. Por ello, todas las hojas de estilo
creadas deben pasar los test de validación del W3C que se ubican en http://jigsaw.w3.org/css-
validator/.

Todo el sitio web ha de tener el mismo aspecto visual, para ello se deben emplear hojas de
estilo, que deberán estar almacenadas obligatoriamente en uno o varios ficheros de estilos “.css”.

La elección de las características de los estilos a emplear en el espacio web es libre, pero al
menos se han de incluir los siguientes estilos:

• Diferentes estilos que aporten un aspecto general al espacio web (color de fondo, imágenes
de fondo, logotipos, bordes de separación entre el menú y la zona de contenido, …).

• Diferentes estilos para los títulos y los textos del espacio web (diferentes fuentes, tamaños
de letra, colores, …).

• Diferentes estilos para los enlaces (cambiar el color de los enlaces visitados, no visitados,
cambiar el color cuando se pase el ratón por encima, …).

2 Obviamente los enlaces a redes sociales no deben apuntar a nuestra empresa, pues no existe realmente, sino que es
suficiente con que apunten a la red social.

5
Desarrollo de aplicaciones web Creación de páginas web con HTML5, CSS...

• Diferentes estilos para los párrafos (alineamientos de texto, márgenes, …).

• Diferentes estilos para las tablas empleadas (color de fondo, bordes, …).

• Diferentes estilos para los formularios (diferentes colores, bordes, alineaciones, …).

5- Recomendaciones.
Se recomienda hacer un diseño previo de toda la estructura del sitio: el funcionamiento
deseado, la estructura de las páginas y los formularios. Es conveniente abordar el desarrollo por
partes, por ejemplo: primero toda la parte HTML5 y Javascript y una vez funcione la estructura
correctamente añadir las hojas de estilo.

En esta práctica se deben utilizar los conocimientos y técnicas expuestos en el tema

correspondiente de las clases de teoría, por lo que se puntuará más la práctica cuanto más y mejor se
utilicen. Por ejemplo, se utilizarán tablas para mostrar datos organizados de forma estructurada.

Para elaborar las páginas web se puede utilizar el editor que se desee, como notepad o
cualquier editor de texto, aunque se recomienda el uso de NetBeans dado que para comprobar el
funcionamiento de las páginas web y las hojas de estilo no será necesario utilizar un servidor web
externo, dado que NetBeans ya incorpora uno.

También se pueden usar aplicaciones como el Expresion Web (gratuito de Microsoft) o

Dreamweaver (de pago de Adobe). En el caso de emplear estos últimos, se deberá tener especial
cuidado con el código que en ocasiones estas aplicaciones incluyen en las páginas web, dado que no
suele ser estándar y podría ocasionar problemas de compatibilidad y validación. Se deberá justificar
y comprender todo el código incluido en las páginas web realizadas.

6- Entrega y evaluación.
En esta práctica se diseñará completamente el sitio y se implementarán las páginas,
utilizando, HTML5 y Javascript. Todo lo referido a las características de visualización se realizará
mediante hojas de estilo (CSS), en ficheros separados. Toda la parte dinámica del sitio se realizará
en las siguientes prácticas, por ejemplo, toda la lógica de compras, las fichas de productos, etc.

Se entregarán todos los ficheros que contengan la información descrita anteriormente, así
como las imágenes y elementos adicionales que se consideren oportunos. Los elementos que forman
el diseño web deben estar organizados de forma coherente, por ejemplo un directorio que contenga
las imágenes, otro que contenga las hojas de estilo, etc. Todo ello deberá ser comprimido en un
fichero ZIP y subido al aula virtual antes del inicio de la práctica 2.

En la evaluación de la práctica se tendrá en cuenta el uso de los elementos indicados y

además, también se evaluarán criterios subjetivos a la opinión del profesor, como apariencia
profesional, estética, originalidad, etc.

6
Desarrollo de aplicaciones web Creación de páginas web con HTML5, CSS...

7- Duración.
La duración de la práctica es de 2 sesiones de laboratorio.

8- Ayuda.
En aulavirtual podéis descargar el fichero “libCapas2021.js”, que contiene un conjunto de
funciones en javascript que permiten cargar páginas web dentro de capas HTML (definidas con
<div>).

La forma de uso de esas funciones es la siguiente:

• Cargar URL local (miEjemplo.html) en una capa (con el nombre miCapa), a través de un
enlace (<a>):

<a href="#" onclick="Cargar('miEjemplo.html','miCapa')">

Menú Enlace
</a>

• Cargar URL local (miEjemplo.html) en una capa (con el nombre miCapa), a través de un
botón (<input type="button">):

<input type="button" value="Menú Enlace"

onclick="Cargar('miEjemplo.html','micapa')">

• Cargar la respuesta obtenida de un formulario en una capa. Esta función será útil para la
práctica 2, donde nos permitirá mostrar la respuesta que nos envié un servlet en la capa que
deseemos. En este ejemplo, el formulario se enviará al servlet miServlet, y lo que nos
devuelva ese servlet se mostrará en la capa con el nombre “miCapa”):

<form method="post" onsubmit="ProcesarForm(this,

'miServlet','miCapa'); return false">
... //Elementos del formulario
</form>

Un ejemplo de código HTML completo que carga y utiliza el fichero libCapas2021.js es el

siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Práctica 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/libCapas2021.js"></script>
<link rel="icon" type="image/ico" href="./img/icono.ico" sizes="64x64">
</head>
<body onload="Cargar('inicio.html','cuerpo')">
<div>
<table>

7
Desarrollo de aplicaciones web Creación de páginas web con HTML5, CSS...

<tr>
<td><a href="#" onclick="Cargar('inicio.html','cuerpo')">Inicio</a></td>
<td><a href="#" onclick="Cargar('empresa.html','cuerpo')">Empresa</a></td>
<td><a href="#" onclick="Cargar('contacto.html','cuerpo')">Contacto</a></td>
<td><a href="#" onclick="Cargar('productos.html','cuerpo')">Productos</a></td>
<td><a href="#" onclick="Cargar('tienda.html','cuerpo')">Carrito</a></td>
<td><a href="#" onclick="Cargar('usuario.html','cuerpo')">Usuario</a></td>
<td>
<a href="#" onclick="Cargar('administracion.html','cuerpo')">Administración</a>
</td>
</tr>
</table>
</div>
<div id="cuerpo"></div>
</body>
</html>