Esta página es un ejercicio para el MOOC Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS... (7ª ed.). Se ha compuesto como una especie de índice o puerta de acceso al resto de ejercicios del curso: así, cada uno de los artículos listados a continuación explica uno de dichos ejercicios —incluído éste— y tiene un vínculo al mismo.
Página personal
Módulo 2. Entrega P2P obligatoria
La siguiente tabla explica cómo se han cumplido los requisitos del ejercicio... o así se ha pretendido.
| Enunciado | Realización |
|---|---|
| 1.- Uso de colores para texto y fondo, incluyendo al menos colores degradados en alguna de sus cajas | Cada artículo de esta página explica y está vinculado con un ejercicio, cuyo aspecto visual emula. El color degradado está en el elemento <body>, en el fondo de esta página |
| 2.- Inclusión de tipografías externas de Google Fonts, Adobe Edge Web Fonts o un servicio similar on line | Así se ha hecho. En términos de diseño, un texto con sobreabundancia de variaciones tipográficas suele ser confuso y feo, pero he sobrepasado con creces los límites del buen gusto en atención a lo requerido en el enunciado. Como en el punto anterior, se ha respetado en cada artículo la tipografía del ejercicio al que se refieren |
| 3.- Distintos encabezados | En esta página se ha diferenciado la jerarquía de los diferentes encabezados <h1> asignándoles distintos atributos —principalmene en cuanto al tamaño y fuente— según su ancestro directo sea el elemento <body>, un elemento <section> o los distintos 'id' de los elementos <article>. En el ejercicio 'Etiquetas semánticas' se utilizaron además los encabezados <h1>, <h2> y <h3> debidamene jerarquizados. Además, esta tabla cuenta con su propio encabezado diferenciado |
| 4.- Uso de caracteres especiales | De manera decorativa se ha utilizado el signo de sección en el artículo 'Texto & Imagen'. Además, cuando se describen secciones de código, se ha utilizado este recurso |
| 5.- Incluir, imágenes de tipo bitmap y vectorial | Así se ha hecho. La imagen del artículo 'Esquema de árbol' es vectorial |
| 6.- Incluir algún vídeo | En el artículo 'Tipografía' |
| 7.- Incluir bordes redondeados en alguna de sus cajas | En ésta, mismamente, o en alguno de los botones que hacen de vínculo al resto de ejercicios |
| 8.- La página debe comenzar con el siguiente encabezamiento: “Página personal de (nombre y apellido del alumno)” | Así se ha hecho. Se ha incluido también una versión reducida de ese texto en el elemento 'título' dentro de <head> |
| 9.- Subir dicha aplicación a la cuenta de Neocities.org o de su elección | Así se ha hecho: si no, no estaría usted leyendo estas letras |
Imágenes responsivas
Módulo 2 , Tema 3. Ejercicio P2P opcional
El objeto de este ejercicio era la realización de una página en la que se combinaran imágenes —de mapa de bits y vectoriales— utilizando la etiqueta <picture>— y algún video. Para diseñarla me basé en la estética propia del Constructivismo.
Interpreté por imágenes responsivas aquellas que cambian sus dimensiones para adaptarse al contenedor que las alberga, no aquellas que son diferentes según el tamaño de éste o del medio. A este segundo tipo pertenece la imagen de la derecha.
Tipografía
Módulo 2 , Tema 2. Ejercicio P2P opcional
Se trataba de comprender la forma de referenciar correctamente una fuente en un documento para no depender de las que el usuario tenga instaladas en su equipo. De entre los dos métodos mostrados se escogió la inclusión de un link a la página de Google Fonts.
Texto & Imagen
Módulo 1, Tema 1. Ejercicio P2P opcional
El enunciado pedía añadir estilos css para modificar el aspecto —color de fondo, características de la tipografía...— de una página muy sencilla, compuesta por un breve texto genérico y una imagen, Retrato de Louis-François Bertin, obra del pintor francés del siglo XIX Dominique Ingres. El carácter de ésta marca las pautas de diseño del ejercicio: así, los colores elegidos responden a su gama cromática; igualmente, la fuente es Georgia: su aspecto clásico y rotundo se corresponde bien con la pintura.
Se uilizó la propiedad flex para organizar de manera responsiva sendos bloques de información, dependiendo del ancho de la pantalla o del dispositivo. Todos estos recursos fueron mencionadas con mayor o menor detalle en los videos del módulo.
