Práctica 1: Creación del esqueleto del
sitio web con
HTML y CSS
En esta práctica se desarrollará el esqueleto de
un sitio
web empleando HTML y CSS. El sitio a desarrollar será un
blog,
en el que los visitantes podrán realizar las operaciones
típicas de esta clase de sitios: ver las últimas
entradas
(
posts),
añadir
comentarios, buscar entradas, etc. El creador del blog podrá
añadir/editar entradas, moderar comentarios, etc.
IMPORTANTE: por el
momento, lo único que
se pretende es montar el "esqueleto" del sitio web. Los datos de los posts se
tomarán a partir de
la práctica 3 de una base de
datos, pero por ahora serán fijos. Ello quiere decir que por
ejemplo los últimos posts siempre serán los
mismos, al
pinchar en cualquiera de ellos siempre nos llevará al mismo
y aunque exista un formulario para añadir
comentarios
estos no se guardarán en ningún sitio.
La siguiente figura muestra el mapa de
navegación del sitio. Las páginas en color claro
son las
que verán los visitantes del blog,
mientras que las de color oscuro solo son accesibles para su
dueño. El
control de acceso se implementará en la práctica 3.
Además de los
vínculos mostrados en la figura, desde cualquier
página
se podrá
acceder a la principal (index.html).
Los siguientes elementos
deberían colocarse
formando una especie de
"barra de navegación" en todas
las páginas que podéis poner en la
posición
que queráis (izquierda,
derecha, arriba,...)
- Un enlace que diga "Principal" y lleve a "index.html"
- En las páginas de acceso no restringido, un
enlace que
diga "Hacer login". Por el momento el enlace debe
apuntar a "login.html"
aunque en la práctica 2 cambiaremos el
comportamiento.
- En las páginas de acceso restringido al
dueño del blog,
un enlace que diga "Salir".
Por el momento dicho enlace debe apuntar a "index.html",
aunque en la
práctica 3 cambiaremos el comportamiento.
- Un formulario para poder buscar entradas por palabras
clave.
Dicho formulario llamará al programa en el lado del servidor
"busqueda.jsp"
y tendrá
los siguientes campos
- Una línea de texto para escribir las palabras
buscadas
- Un par de botones de radio para poder elegir si se desean
todas
las palabras o solo algunas
- Un botón "buscar", que enviará los
datos del
formulario.
- El programa "busqueda.jsp" espera un parámetro
"texto"
con las palabras clave y otro "modo" con valor "and" si se buscan todas
las palabras y "or" si se busca solo alguna. Asignar name
y value
adecuados a
los campos del formulario para que se envíen correctamente
los
parámetros, y elegir adecuadamente el método de
envío (GET o POST).
- Un título que diga "Archivos" y en que aparezcan
una serie
de
enlaces que nos mostrarán las entradas por meses (ejemplo:
septiembre
2006, agosto 2006,...). Cada enlace llevará por el momento
al
propio
index.html, aunque ya lo cambiaremos en la práctica 3 para
mostrar solo
las entradas del mes.
El sitio constará de las
siguientes
páginas:
Ver últimas entradas (index.html)
Esta será la página principal del sitio. En ella
deben
aparecer los siguientes elementos:
- Título del blog
- Por cada entrada:
- Título de la misma
- Fecha en formato dd/mm/aaaa
y hora en formato hh:mm
- Número de comentarios (por ejemplo: 0
comentarios, 1
comentario,...): será un enlace que lleve a la
página entrada.html
y dentro de ella a
una parte llamada "comentarios" (usar la etiqueta <a>
con el atributo name
para darle nombre a esta
"sección").
- Parte del texto de la entrada (solo el primer
párrafo)
- Un enlace que diga "Leer más..." y que
llevará a
la página entrada.html
IMPORTANTE:
Como a partir de la
práctica 3 las entradas y
comentarios se van a tomar de la base de datos, no tiene sentido por el
momento ni introducir demasiadas entradas ni demasiados comentarios, ya
que estos son "de pega". Poned 2-3 simplemente para ver el aspecto
aproximado que
tendrá el blog una vez terminado.
Ver 1 entrada completa (entrada.html)
Tendrá los mismos elementos que
index.html,
cambiando
únicamente:
- Solo se verá una entrada, pero con todo el
texto. Por
tanto, no habrá enlace "Leer más..."
- Añadir un enlace que diga "Añadir
comentario" y que
llevará a la página coment.html
- Al final de la entrada debe aparecer un título
"Comentarios" y por cada comentario:
- Fecha en formato dd/mm/aaaa
y hora en formato hh:mm
- Nombre del autor del comentario
- Texto del comentario
- Se recomienda poner los comentarios en un tipo y/o color
de
letra distinto al de la propia entrada para que se distingan bien.
Añadir comentario (coment.html)
Contendrá:
- Un título en letra grande que diga
"Añadir
comentario"
- Un texto que diga (aproximadamente): "se va a
añadir un
comentario a XXX. Recuerda que los comentarios pueden ser eliminados
por el autor del blog". Por ahora poned como XXX el título
de la
entrada que habéis metido como prueba en entrada.html. A
partir de la
práctica 3 cambiará para reflejar de verdad el
nombre de
la entrada que se está comentando. El título de
la
entrada debe ser un enlace que lleve a verla (por ahora simplemente un
enlace a entrada.html).
- Un formulario con los siguientes campos:
- Una línea de texto para introducir el nombre
del autor
(no hace falta registrarse para enviar comentarios)
- Una línea de texto para introducir el
título del
comentario
- Un área de texto para el comentario en
sí.
- Este formulario llamará al programa en el lado
del
servidor "comentar.jsp"
pasándole un parametro "autor"
con el nombre del autor, otro "titulo"
con el titulo del comentario y otro "texto" con el
texto del mismo.
Asignar name y value
adecuados a
los campos del formulario para que se envíen correctamente
los
parámetros, y elegir adecuadamente el método de
envío (GET o POST).
Login (login.html)
Simplificad esta página en la
medida de lo
posible, ya que la
cambiaremos en la práctica JavaScript.
Debe contener un formulario para hacer login como creador del blog. El
formulario tendrá dos campos de texto de una
línea para
introducir login y password. Por ahora llamará a la
página
listar.htm
con los parámetros "
login"
y "
password"
(en el futuro
la cambiaremos para que llame a un programa en el lado del servidor que
chequee login y password. Asignar
name y
value
adecuados a
los campos del formulario para que se envíen correctamente
los
parámetros, y elegir adecuadamente el método de
envío (GET o POST).
Ver lista de entradas para editar/borrar (listar.html)
Contendrá un enlace llamado "Crear entrada" para introducir
una
nueva, que llamará a
editar.html.
Contendrá también una lista multicolumna de
entradas
existentes en el
blog. Para cada entrada debe aparecer
- Fecha en formato dd/mm/aaaa
y hora en formato hh:mm
- Título
- Dos iconos que serán enlaces y
servirán para
editar y borrar la entrada. Los iconos pueden ser los que
queráis pero deberían dar una pista visual de
qué
operación realizan. El icono de editar debe ser un enlace a editar.html y
el de borrar a borrar.jsp
Además la página debe tener un formulario para
filtrar
las entradas a mostrar. Con dos cuadros de lista desplegable se debe
poder elegir el mes y año de las entradas. En un cuadro de
texto
se introducirán
palabras clave para buscar por título. Los
parámetros
HTTP asociados serán respectivamente
mes,
anyo y
titulo y el
programa en el lado
del servidor que hace el filtro es
filtro.jsp.
Asignar
name
y
value
adecuados a
los campos del formulario para que se envíen correctamente
los
parámetros, y elegir adecuadamente el método de
envío (GET o POST).
Crear/editar entrada (editar.html)
contendrá un formulario para poder editar la
entrada con los
siguientes componentes:
- Una línea de texto para poner el
título
- Un área de texto para poner el contenido
- 3 botones o enlaces que sirvan para poner negrita, cursiva,
e
insertar una URL en el mensaje
- Este formulario llamará al programa en el lado
del
servidor "editar.jsp" pasándole como parámetros
"titulo"
y "texto". Asignar name y value
adecuados a
los campos del formulario para que se envíen correctamente
los
parámetros, y elegir adecuadamente el método de
envío (GET o POST).
- Un campo para subir un archivo de imagen al servidor
Además se visualizarán los comentarios
actuales a la
entrada. En cada comentario aparecerá un icono que
servirá para borrarlo. Este será un enlace a borrarcoment.jsp
Parte optativa
Como parte optativa será necesario realizar las ampliaciones
siguientes:
- Desarrollar una versión adicional del sitio con
marcos. En
una página inicial se le dejará elegir al usuario
si
desea elegir la versión con o sin marcos. Las opciones
comunes a
todas las páginas deberían estar en un marco
separado,
para no tener que repetirlas.
- Implementar varias hojas de estilo distintas, en las que
cambien
los colores, los tipos de letra y la posición de alguno de
los
elementos que aparecen en pantalla. Consultad esta
página para ver cómo poner distintos
CSS alternativos para el mismo HTML
Normas de evaluación
- Se deben respetar al máximo las indicaciones del
enunciado, aunque la disposición de elementos en pantalla
será libre.
- Se debe entregar documentación
indicando el/los autores, grupo de prácticas al que
pertenecen y en su caso, indicar la/s parte/s optativa/s realizada/s y
los resultados de las pruebas de compatibilidad con distintos
navegadores.
- El baremo de evaluación será el
siguiente:
- máx. 6 puntos: HTML y CSS correcto
- máx. 1 punto: pruebas de
compatibilidad realizadas
con distintos navegadores (mínimo Firefox y
Explorer)
- máx. 1 punto: diseño de la web (CSS
elaborado)
- máx. 2 puntos: parte optativa.
- La entrega se realizará a través de
la zona
restringida del servidor del DCCIA. Aquellos que no os
hayáis dado de alta anteriormente en dicho servidor
necesitaréis conseguir
un login y password para poder entregar la
práctica. No
se admitirán prácticas entregadas por e-mail u
otros
medios
- El plazo de entrega finaliza el día 29 de
octubre a las
24:00
