Llegados a este punto, has aprendido a utilizar los diferentes lenguajes de programación que se emplean en la creación de las páginas web y sus características básicas:
Has visto cómo estructurar un diseño web, e incluso se te ha proporcionado una plantilla básica para posicionar un menú lateral. ¡Es el momento de utilizarlo para la creación de La Web del Portfolio de las asignaturas!
Lo primero que vamos a realizar es el diseño de nuestra página web. Haréis un diseño en grupo para discutir entre todos la apariencia de la página. Tenéis toda la libertad para darle la apariencia que os guste, ¡aplicad vuestra creatividad! Aunque tenéis que cumplir con unos componentes básicos que son los siguientes (a la izquierda podéis observar el esquema básico):
Una vez construida la estructura de nuestra página es la hora de añadir estilos. ¡Usarás el CSS aprendido! Por supuesto puedes añadir todas las reglas que consideres que contribuirán a mostrar la web lo más atractiva posible, pero también hay una serie de puntos básicos por los que debes comenzar:
Cumplidos estos puntos, añade más reglas y ¡realiza un diseño atractivo! El resultado de este ejercicio será un fichero aparte del anterior con extensión .css (No olvides llamarlo desde tu fichero index.html del ejercicio 1)
Vamos a reflexionar sobre la naturaleza de los procedimientos y recursos eficientes que tiene CSS. Uno de los recursos de CSS es que para posicionar un bloque dentro de una página web se recomienda usar porcentajes en vez de píxeles. ¿Por qué? Pues porque tu web se consultará desde montones de dispositivos de muy diferentes características: PCs, móviles de diferentes tamaños de pantalles, tablets de diferentes marcas y dimensiones... Si utilizas píxeles para posicionar un elemento, puede que se vea bien en tu pantalla, pero en otra más pequeña quizás quede el elemento cortado o desplazado encima de otro contenido, haciendo inaccesible la información. Al utilizar los porcentajes, lo que estás haciendo es posicionar los elementos en relación al tamaño de la pantalla que consulta la web, ¡por lo que siempre se visualizará correctamente! Esto es lo que en programación web se llama estilo responsive o adaptativo (visualización correcta en cualquier dispositivo).
Estos procedimientos te permiten resolver con éxito y de manera eficiente el reto que se te ha encomendado.
¡Vamos allá!
La página web que estamos haciendo es estática, no se hace uso de bases de datos para almacenar nada. Se van a mostrar los trabajos, actividades, material, etc. que vas realizando o recopilando a lo largo del curso en las distintas asignaturas. Puedes poner todas las asignaturas que consideres oportunas, pero al menos debes incluir las indicadas en el apartado anterior. El funcionamiento de la página web que debes implementar será el siguiente:
Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0