Conceptos FSWD

Práctica final del Ramp-up del Bootcamp de FSWD
Repositorio en GitHub: JavGuerra / ramp-up-fswd
Por: Javier Guerra

Enunciado

• 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.

14 características destacables de esta página web

• 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:
  • Hace uso de un Honeypod, mediante el campo "hp", para evitar el SPAM.
  • Hace uso de un campo oculto "dato" para evitar ataques por XSS y CRSF.
• 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.

Posibles opciones de mejora

• 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

Acceder a la página web de la práctica.

Licencias

Sobre el código fuente: GNU GENERAL PUBLIC LICENSE Version 3
Sobre el contenido de la web: (CC) BY-SA 3.0

Saber más

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.