ÍNDICE
PRÁCTICA 1: HTML, CSS y Bootstrap….
………………………………..2
Apartado 1………………………………………………………………2
Apartado 2………………………………………………………………3
1
PRÁCTICA 1: HTML, CSS y Bootstrap
APARTADO 1
El trabajo en este apartado ha consistido en crear una página web estática (solo
HTML y CSS) sin utilizar Bootstrap, templates o librerías externas. Para ello se han
seguido las guías y diferentes ejemplos de las transparencias de teoría añadiendo
las modificaciones pertinentes.
ESTRUCTURA
Para crear una estructura organizada de la página web hemos creado una división
en secciones: header, left, center, right y footer. Para la creación de esta estructura
se ha seguido el ejemplo de teoría. Este ejemplo era de tamaño fijo y no se veía del
todo correctamente en el proyecto, así que se han hecho varias modificaciones.
He modificado la hoja de estilos CSS para eliminar los tamaños fijos y colocar cada
elemento en su sitio. En lugar de utilizar tamaños fijos se han utilizado las medidas
width y height en porcentajes y márgenes, para colocarlos de manera estructurada
he utilizado la disposición column y para hacerlo lo más responsivo posible sin
Bootstrap he utilizado flex jugando con los tamaños de cada apartado. También he
creado nuevos tamaños de heading, cambiado los existentes y se ha modificado la
paleta de colores.
LISTAS Y ENLACES
He utilizado los ejemplos de listas de teoría para mostrar en el apartado de left un
menú de búsqueda de hoteles por ciudades, he creado una lista de ciudades y cada
ciudad está enlazada para que al hacer click te lleve a los hoteles de la ciudad
seleccionada (estos enlaces no llevan a ningún lugar ya que por el momento no se
han creado más archivos HTML).
TABLAS Y IMÁGENES
Aprovechando los ejemplos de tablas de teoría los he utilizado para mostrar en el
apartado de center lo que se vería al seleccionar una ciudad, en este caso se
muestran diferentes hoteles de esa ciudad (Barcelona en el caso actual) y sus
detalles: nombre, localización, estrellas y una imagen del hotel.
FORMULARIOS
2
En el apartado de right he aprovechado los ejemplos de teoria sobre formularios
para hacer un buscador de hoteles en caso de que busques algo en concreto que
no aparezca en la página, este buscador tiene un apartado de nombre y de
localización y busca en Google mediante un get.
RESULTADO
APARTADO 2
El trabajo de este apartado ha consistido en modificar la página web estática creada
en el apartado 1 con tal de hacerla responsiva y añadir algún estilo utilizando la
librería de Bootstrap. Para ello se han tenido que realizar varias modificaciones en
los archivos HTML y CSS.
CSS
Para evitar conflictos con los estilos de Bootstrap y que la página pueda ser
responsiva el primer paso ha sido modificar la hoja de estilos, estos cambios han
consistido en eliminar márgenes, tamaños fijos, la disposición en column y el flex.
Solo se han mantenido los estilos de colores, alineación de contenido y tamaños de
fuentes.
HTML
3
Al eliminar todos los estilos que mantenían la estructura, la página queda totalmente
desorganizada, partimos de cero a crear la estructura utilizando elementos de
Bootstrap.
Seguimos la misma organización del contenido que en la primera web, es decir, 3
columnas y 3 líneas. Lo primero que he hecho ha sido dividir la página en tres
líneas, dentro de la primera se encontrará el header, en la segunda (más alta) se
encontrarán left, center y right, y en la última se encontrará el footer.
Una vez tenemos la estructura de 3 líneas, header y footer quedarán organizados,
pero la línea intermedia aún está desordenada. Para solucionar esto, como
queremos introducir 3 apartados en esa línea, crearemos 3 divisiones de columnas
de bootstrap medianas (col-md). Iremos jugando con los tamaños dependiendo de
la anchura que le queramos dar a cada uno, en mi caso left y right han sido del
mismo tamaño y más estrechas que center que ocupa casi todo el contenido de la
línea.
Al tener bien organizada la página web con Bootstrap y comprobar que es
responsiva, he cambiado la tabla y el formulario por las clases de tabla y formulario
de Bootstrap, haciendo que se vean algo más estéticos. También he modificado las
imágenes de la tabla para que se vean más grandes o pequeñas dependiendo del
tamaño de la ventana.
RESULTADO
