Prácticas con CSS y Bootstrap
Desarrollo de Aplicaciones Telemáticas, 2023-2024
Grado en Ingeniería en Tecnologías de la Telecomunicación
Grado en Ingeniería en Sistemas de Telecomunicación
Escuela de Ingeniería de Fuenlabrada
Universidad Rey Juan Carlos
15 de febrero. Actualizada la práctica 2.0 detallando los nombres de los directorios con las imágenes.
Prepara un fichero de nombre ~/dat/practica02.md y contesta en él este apartado y todos los posteriores (excepto cuando la memoria de prácticas te pida que escribas un fichero distinto)
Las imágenes de este documento, si las hay, irán en la carpeta ~/dat/images que creaste en el ejercicio anterior.
Crea una carpeta ~/dat/practica02/images para las páginas HTML contenidas dentro del directorio ~/dat/practica02.
Observa los siguientes ejemplos de código html con css y explica por qué cada línea tiene el formato que tiente.
En esta práctica escribirás un fichero HTML con reglas CSS, similar a los ejemplos de la práctica anterior.
Prepara un fichero HTML llamado ~/dat/practica02/ej22.html
y define en él al menos 5 reglas CSS para probar los distintos tipos de selector que vimos en clase (los que aparecen en las transparencias).
Escribe en el fichero HTML diversos elementos donde se apliquen las reglas. Para cada regla, debe haber
Un elemento donde se aplique la regla.
Un elemento donde no se aplique la regla porque no se cumplan todos los requisitos del selector, pero sí alguno. En otras palabras: un elemento donde un programador despistado pueda pensar que la regla se aplica, pero que en realidad no se aplica.
Explica brevemente en el fichero ~/dat/practica02.md cada uno de los casos.
Recuerda que, como siempre, tienes que comprobar con el W3C validator que tu código no provoca avisos ni errores. Sin necesidad de que el enunciado lo pida explícitamente.
Prepara un fichero HTML llamado
~/dat/practica02/ej23.html
que contenga al menos 6 párrafos de prueba, donde el texto tenga distintos atributos relacionados con alineación, subrayado, tamaño y estilo. Hazlo usando clases.
Prepara un fichero HTML llamado
~/dat/practica02/ej24.html
que contenga al menos 4 cajas de prueba, con distintos atributos relacionados con color, borde y márgenes. Hazlo usando clases. El color del texto también deberá ser adecuado, aunque solo sea blanco o negro. Añade imagen de fondo al menos a un elemento. Selecciona los colores usando algún generador de paletas como https://coolors.co.
En este ejercicio empezarás a usar la rejilla de Bootstrap.
El nombre del fichero será ~/dat/practica02/horario.html
En su interior codifica:
En un contenedor de tipo fluid, tu horario del primer cuatrimestre de este curso.
En un contenedor ordinario (no fluid), tu horario del segundo cuatrimestre de este curso.
Emplea la rejilla de Bootstrap, con el tipo de cuadricula que creas más oportuno.
Usando CSS, añade color a toda la página. Por ejemplo, que las celdas de la misma asignatura tengan el mismo color de fondo, o alguna otra organización de tipo lógico que te parezca adecuada. Selecciona la paleta usando algún generador de paletas como https://coolors.co
Recuerda que es necesario que revises este documento con el W3C validator, como todos los de la asignatura.
Escribe un fichero ~/dat/practica02/grid.html que, basado en Bootstrap, tenga la siguiente estructura:
xxxxxxxxxxxx
xxx xxx xxx xxx
xxx xxx xxx xxx
xxx xxx xxx xxx
xxxx xxxx xxxxEsto es,
Primera fila: una columna de 12 casillas (con texto H1)
A continuación, 3 filas con 4 columna iguales
Finalmente, una fila de 3 columnas iguales
El contenido será texto de prueba. En las filas de el medio deberá haber al menos 4 imágenes (en total). Usa el tipo de contenedor y el tipo de cuadrícula que creas más oportuno.
Prepara una versión de tu currículum en HTML usando Bootstrap 5 y su rejilla. Ponle color mediante CSS. El fichero se llamará ~/dat/practica02/cv.html Incluye todas tus asignaturas aprobadas con su calificación. Si por motivos de privacidad prefieres no incluir datos personales reales en este ejercicio, puedes hacer una versión imaginaria (irónica, sarcástica o simplemente falsa), con tal de que quede claro que no es real.
Prepara un carrusel de Bootstrap en un fichero con nombre ~/dat/practica02/carousel.html
Contendrá entre 4 y 6 fotos hechas por tí o donde salgas tú. Pon cualquier cosa que te guste y que no tengas inconveniente en enseñar: comida, viajes, mascotas, personas, aficiones, libros, discos... Pon títulos realistas.
Recuerda que debes revisar siempre el código con el W3C validador.
Copia en ~/dat/practica02/ los ficheros de práctica de formularios de la práctica 1 (alta.html, operacion.html y los ficheros optativos operacion02.html y operacion03.html si los tienes)
Modifícalos para que utilicen Bootstrap.
Recuerda que el código no debe generar ningún error en el W3C validator.
Prepara una landing page con Bootstrap. Su nombre será ~/dat/practica02/landing.html y todos los ficheros que necesite estarán dentro de ~/dat/practica02/. Organiza los ficheros en subdirectorios como te parezca conveniente.
Puede ser sobre un organismo o negocio real o inventado, una página en la que te ofrezcas como freelance o como empleado... cualquier cosa similar, tienes libertad.
La página tiene que ser razonablemente realista, puedes poner algún lorem ipsum en los párrafos pero la organización y los títulos tienen que tener sentido. Puedes reutilizar apartados anteriores de esta práctica.
Puedes inspirarte en alguna plantilla gratuita para Bootstrap. Encontrarás muchas en https://startbootstrap.com, aunque desde cualquier buscador podrás encontrar páginas similares usando las palabras clave free bootstrap templates o free bootstrap themes.
Estas plantillas normalmente usan características de Bootstrap un poco más avanzadas que las que hemos visto en clase, aquí esperamos que tu ejercicio sea más sencillo.
No piratees fotos. Aunque técnicamente nada impide copiar cualquier foto de cualquier página web, desde el punto de vista legal se entiende que, salvo indicación en contrario, el autor mantiene todos sus derechos y no permite la reproducción.
Para este ejercicio es necesario que todas las imágenes que incluyas o bien sean tuyas o bien tengan una licencia que permita su reutilización, de tipo Creative Commons o similar.
Te será útil algún stock de imágenes gratuitas. Por ejemplo https://www.pexels.com. Podrás encontrar muchas otras páginas similares en cualquier buscador usando las palabras clave free photo stock.
PRACTICA OPTATIVA: Si lo deseas puedes usar como base alguna plantilla de las indicadas anteriormente. Ten en cuenta que tendrás que documentarte sobre aspectos de Bootstrap fuera del ámbito de la asignatura. Por otro lado, el código de estas plantillas es de calidad muy variable, algunas son fáciles de personalizar, otras no tanto.