PROYECTO WEB HTML5 y CSS3
Bienvenidx a mi primer proyecto web realizado en su totalidad con HTML5 Y CSS3.
Esta página web tiene como objetivo poner en práctica de manera visual y sencilla algunos de los términos aprendidos en esta destreza. Ya que posteriormente analizaremos a fondo su estructura primero vamos a contextualizarla, la página está inspirada en la trilogía de películas "Tres Colores" de Krzysztof Kieślowski, la habilidad del director para tejer narrativas profundas y utilizar el simbolismo visual hace que estas películas destaquen por su profundidad. Además, su influencia perdurable en el cine europeo y su legado como director visionario hacen que esta trilogía sea una elección significativa. Resumiendo, la importancia de "Tres Colores" radica en su capacidad para resonar en la experiencia humana y su impacto duradero en la historia del cine.
La página de inicio actúa como punto de partida: en ella encontramos cada uno de los colores representativos de la trilogía; el azul, el blanco y el rojo. Estos son los colores que dan nombre a cada una de las películas ya que no solo hacen referencia a la bandera francesa sino que cada uno representa un ideal revolucionario francés: Azul es un complejo estudio psicológico sobre la libertad, Blanco es una comedia dramática centrada en la igualdad y Rojo gira en torno a la idea de la fraternidad.
HTML página de inicio
Pasamos a lo que realmente nos interesa, la estructura del HTML (que forma parte de la UX de la página web); comienza, como siempre, por la declaración seguida por la etiqueta del <head>, la cual contiene los enlaces a la hoja de estilos. A continuación encontramos los enlaces a las tipografías conectadas de Google Fonts. Lo siguiente que vemos es el comienzo de la etiqueta <body>, y a su vez dentro de ella el <header> con un <h1> que actúa como título principal de la página pero que, como veremos próximamente, al entrar a cualquiera de las demás páginas que contiene la web actuará como redireccionamiento a la página de inicio con el fin de mejorar la navegación. El h1 comprende además una etiqueta de <span> que actúa como etiqueta contenedora y no afecta el flujo normal del texto, la utilizamos para aplicar estilos específicos de texto. Un poco más abajo encontramos la etiqueta <nav>; esta envuelve una lista desordenada (<ul>) que a su vez contiene los elementos de la lista (<li>) que son las diferentes partes que componen la web, cada uno de los cuales tiene un enlace (<a>) que dirige a las diferentes secciones.
HTML interior secciones
Dentro de cada sección encontramos una estructura de html similar ya que el contenido de todas ellas está organizado de la misma manera. Como podemos ver están conectadas, como el html de la página de inicio, con la misma hoja de estilos y con las tipografías. Dejando esto atrás nos centramos en el <body> donde encontramos la clase "seccion azul" (que varía en cada sección por el color correspondiente) que no solo nos servirá para etiquetar cada una de las secciones por separado sino que también nos ayudará para poder editarlas individualmente en el CSS. Dentro encontramos el <header> que en este caso actúa como enlace directo con la página de inicio. Finalmente encontramos una <section> con la clase "contenido" que a su vez contiene el <h2> que actúa como título de la página interior y <p> que contiene el texto.
CSS PRINCIPAL
El CSS contiene todo el estilo que compone la parte visual (que forma parte de la UI) de la página web.
A continuación voy a comentar las líneas relevantes o que tengan alguna característica "especial". Comenzando con el body podemos observar que contiene la tipografía seleccionada y sus características; se define una fuente principal ('Oswald') y, en caso de que no esté disponible, se utilizaría una fuente genérica, en este caso, sans-serif. .biografia::after, .seccion li:last-child a::after{content:" +"} añade un contenido adicional después de elementos con la clase "biografia" y después del último enlace en elementos de lista dentro de una sección.
nav li:first-child a establece un fondo de imagen y un color de texto específico para el primer enlace dentro de la etiqueta <nav>. En este caso, el fondo se establece con la imagen "azul.jpg" y el color del texto se establece en azul (#0050a4). nav li:last-child a similar al anterior, pero para el último enlace, utilizando una imagen "rojo.jpg" como fondo y un color de texto rojo (#ef4135).
.seccion establece el estilo para elementos con la clase "seccion" y background-image: linear-gradient(to top, #999, #eee) aplica un fondo con un degradado lineal de gris oscuro a gris claro. .seccion header{ position: static; display: flex; justify-content: space-between; align-items: center; } Establece el estilo para los elementos <header> dentro de elementos con la clase "seccion". Cambia la posición a estática (anulando la posición fija definida anteriormente) y organiza los elementos en el encabezado en un diseño flexible con espacio entre ellos. .seccion h1 a define estilos para los enlaces (<a>) dentro de elementos <h1> que estén dentro de elementos con la clase "seccion". Text-decoration: none; elimina el subrayado del enlace.
.seccion nav li a define estilos para los enlaces (<a>) dentro de elementos de lista (<li>) que están dentro de la etiqueta <nav> dentro de elementos con la clase "seccion". .azul nav li a, .rojo nav li a define estilos específicos para los enlaces dentro de elementos de lista dentro de <nav> para las clases "azul" y "rojo"
Uno de los aspectos más complicados a los que me he enfrentado haciendo esta web ha sido conseguir hacerla responsive ya que al haber sido diseñada en desktop first había muchos aspectos que ajustar para que pudiera ser visualizada correctamente tanto en tablet como en móvil. Estas adaptaciones las conseguí a través de diferentes media queries que elegí en función a las diferentes medidas estándar de pantalla, por esto los que escogí fueron los siguientes: ancho de pantalla igual o menor a 1200 píxeles, ancho de pantalla igual o menor a 950 píxeles, ancho de pantalla igual o menor a 750 píxeles y finalmente ancho de la pantalla igual o menor a 500 píxeles. Dentro de cada uno de ellos hice los cambios necesarios para que la web no se desbordara en ningún dispositivo y que su diseño se mantuviera lo más parecido posible pero que a su vez consiguiera adaptarse y siendo completamente funcional.
