Práctica final del Ramp-up del Bootcamp de FSWD
Repositorio en GitHub: JavGuerra / ramp-up-fswd
Por: Javier Guerra
- El ejercicio constará de una página web de tipo SPA con varias secciones o de varias páginas enlazadas por el menú de navegación a criterio del desarrollador.
- Las secciones o páginas serán:
- Home o página de bienvenida, con su bloque de navegación.
- Biografía. Deberemos definir una tabla con datos biográficos (por ej.: sexo, nombre, apellidos, etc.).
- Galería. Texto acompañado de algunos elementos multimedia (imágenes, videos, audios).
- Contacto. Contendrá un formulario con al menos seis tipos de input.
- Se deberán emplear etiquetas semánticas de HTML (header, main, footer...).
- La tabla deberá tener estructura interna (thead, tbody, tfoot).
- Debemos maquetar todo el ejercicio con Flexbox, y podemos usar otras propiedades como float, position...
- Hacer un uso adecuado de los selectores CSS element, id, class, selectores compuestos, etc. No usar selectores de elementos HTML.
- Emplear el modelo de cajas de CSS: margin, padding, border...
- Utilizar pseudoclases (hover, focus, etc.) para dar un poco de dinamismo a la página.
- Se deberá respetar la estructura de directorios (css, img...).
- Se deberá crear un repositorio con el ejercicio.
- CSS transpilado con Sass.
- Usa JavaScript puro (Vanilla JS).
- La web implementa los criterios del estándar XHTML (revisado con Nu Html Checker).
- El diseño es adaptable (responsive) según el dispositivo.
- Usa la librería y los iconos de Bootstrap Icons y las fuentes de letra de Google Fonts.
- Aplica un efecto Paralax a la portada (hero).
- Implementa el protocolo Open Graph (head) para la correcta inserción de la web en redes sociales.
- Es compatible con Progessive Web Aplication (PWA) a través de fichero manifest.json, por lo que la página puede ser instalada en dispositivos móviles como una web app.
- Implementa técnicas de seguridad en el formulario:
- Es accesible (revisado con el complemento WAVE):
- Emplea párrafos y etiquetas contextuales sólo visibles para lectores de pantalla.
- Hace uso de etiquetas WAI-ARIA para describir eventos interactivos.
- El fichero README.md tiene sintáxis de marcado ligero Markdown.
- Dispone de un código QR para acceso rápido a la web a través de dispositivos móviles.
- Ha sido probado en los navegadores web Firefox y Chrome.
- Web alojada en Github pages.
- Implementar la operatividad del botón de menú sin JavaScript, sólo con HTML y CSS. Al ser esta una función crítica de la página, si el navegador no tiene activado o no soporta Javascript, el menú no se desplegaría.
- Crear las páginas de política de privacidad, términos de uso, cookies y poner el aviso de cookies en la web.
- En el back-end se procesarían el campo "hp", el campo "dato" y el resto de datos de los campos del formulario.
- Implementar el fichero robots.txt para indicar a los rastreadores web qué carpetas evitar, si es necesario.
- Si el contenido lo requiere, implementar una fuente web RSS o ATOM.
- Crear una página de error 404 personalizada (a través de un fichero .htaccess).
Acceder a la página web de la práctica.
Sobre el código fuente: GNU GENERAL PUBLIC LICENSE Version 3
Sobre el contenido de la web: (CC) BY-SA 3.0
Artículos informativos relacionados con esta página:
- Una página de ejemplo: Descripción del proyecto.
- Un simple efecto Parallax: Efecto incluido en esta página.
- Accesibilidad web: Buenas prácticas explicadas a través de esta página ejemplo.