Este archivo README.md documenta el desarrollo de esta primera práctica en HTML.
Al tener la necesidad de probar la página en la web para validarla con herramientas online y probarla desde distintos navegadores, decidí abrir cuenta en w3c.org y utilizar su servicios de spaces donde poder alojarla. La dirección web donde poder visitarla es la siguiente (https://andreuet.w3spaces.com).
Crea una entrada de blog utilizando HTML, el blog debe contener:
- Header
- Author Info
- Images
- Hyperlinks
- Quote (comillas)
- Texto personalizado.
- Añade al blog un formulario de suscripción con campos de entrada de nombre, email y botón de suscripción.
- Escribe el código teniendo siempre en cuenta la accesibilidad.
-
HTML válido:
- Etiquetas semánticas HTML5 tales como
<header>,<footer>,<article>,<section>, etc... se usan para darle sentido al código. - Que no haya selectores de secciones o div sin una clase CSS o id.
- Todo el código en minúsculas.
- El código no tiene espacios en blanco al final.
- La indentación (sangrado) es consistente (o todo tabs, o todo 2 spaces, o todo 4 espacios, etc..).
- El código utiliza una nueva linea para cada bloque, lista o elemento table e indentar cada uno de estos elementos hijos (se acepta poner todos los elementos en una sola línea).
- Cuando se utilicen valores de atributos de entrecomillados, que el código emplee entrecomillado consistente (
' ' vs " ") (simples vs dobles).
- Etiquetas semánticas HTML5 tales como
-
Reglas de Estilo:
- HTML documents HTML5
<!doctype html> - El código omite los atributos de tipo para las hojas de estilo y los scripts.
- HTML documents HTML5
Blog Post
├── index.html Página HTML principal
├── hojaestilos.css Hoja de estilos
└── images Directorio de las imágenes
└── Cardiacsphoto1.jpg Imagen del grupo Cardiacs
No tanto por el tamaño de la página pero si para empezar a seguir una guía de buenas prácticas y por recomendación de la profesora he decidido insertar mi hoja de estilos de manera externa External CSS y no Internal CSS como he estado usando hasta ahora, definidos dentro del elemento <style>, dentro de la sección '' de la página HTML.
El archivo hojaestilos.css no contendrá ningún tag HTML, y en la página HTML index.html se hará referencia a esta hoja de estilos de la siguiente manera:
<head>
<link rel="stylesheet" href="hojaestilos.css">
</head>
Mediante el uso de <meta charset="UTF-8"> represento la codificación de carácteres UTF-8 (estándar en HTML5) aunque es posible que en algún proceso:
- Otra persona interviene en la creación de la página y emplea codificación 88509-1.
- El servidor web guarda las páginas HTML estáticas.
- El cliente web del usuario no representa igual las páginas....
Para la representación del texto uso una herramienta online para convertir el texto simple a codificación html (www.textfixeres.com/html/texto-a-html.php)
Durante la confección de la página se ha tenido todo el tiempo en cuenta el diseño pensando en la accesibilidad. Una vez finalizada, se ha testeado manualmente y validado con distintas herramientas tanto online como extensiones del navegador obteniendo un Nivel de Conformidad AA indicándose así que se han cumplido todos los puntos de control de Prioridad 1 y Prioridad 2 definidos en las Directrices de la WAI (Web Accessibility Initiative). Incluyendo al final de la página el icono correspondiente a su Nivel de Conformidad.
Del mismo modo finalizada la codificación de la página y para comprobar que todo mi código, tanto el HTML como la hoja de estilos CSS eran correctos también han sido evaluados con los validadores de la W3C (The World Wide Web Consortium) y con un resultado que el archivo hojaestilos.css es CSS versión 3 + SVG válido! y el archivo index.html es Valid XHTML 1.0 Strict. Es por ello que, al final de la página he incluído los iconos correspondientes.
Revisando el tutorial que ofrece w3c.org Tutorial HTML me fije que tienen un apartado de HTML Responsive con la idea de adaptar la apariencia de las páginas web al dispositivo que se esté utilizando, ya sean móviles, laptops, tablets o desktops. Y aprovechando que era mi primera página web aproveché para incluir simplemente unos media-query o breakpointscomo los llaman para dependiendo de donde se estuviese viendo la página se adaptase en tamaño. Destaqué cuatro tipos, todos los valores los extraje de información del framework Bootstrap considerándose como los más comunes.
- W3C - Documentación y validadores HTML, CSS, Internacionalización y Accesibilidad
- w3schools - Tutorial HTML, CSS y Responsive Design
- breakpoints - Bootstrap breakpoints
- Responsive Web Design Tester - Extensión Chrome
- WAVE Evaluation Tool - Extensión Chrome
- siteimprove - Extensión Chrome
- Google Lighthouse - Integrado en Google Chrome
- Tota11y from Khan Academy - Extensión Chrome
- axe DevTools - Extensión de las herramientas de desarrollador