Etiqueta: web

El head de una página HTML

Publicado el

En el artículo de introducción al HTML se mostró la estructura interna de un documento HTML. En esa estructura existe una sección conocida como el head de la página web.

El <head> es el lugar donde se declara la codificación de caracteres, se define el título que aparecerá en la pestaña del navegador, se aportan metadatos descriptivos, se enlazan hojas de estilo y recursos como iconos, y se configuran aspectos de seguridad o comportamiento del documento.

El contenido del <head> no se muestra como parte del cuerpo de la página pero determina cómo se interpreta y se presenta el contenido que aparece en el <body> de la página web.

Ejemplo completo de head

A continuación podemos ver un ejemplo del código que se incluye en una página web habitual y aunque muchos de esos metadatos no sean utilizados si deben aparecer por motivos de accesibilidad.

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Guía del elemento head en HTML</title>

<meta name="description" content="Explicación de las etiquetas y elementos más habituales dentro del head de una página web, con ejemplos en HTML.">

<meta name="robots" content="index,follow">

<link rel="canonical" href="https://ejemplo.com/articulos/elemento-head">

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="stylesheet" href="/css/styles.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Metadatos para compartir en redes (Open Graph) -->
<meta property="og:title" content="Guía del elemento head en HTML">
<meta property="og:description" content="Qué incluir en head: metadatos, enlaces, estilos, iconos, rendimiento y seguridad.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://ejemplo.com/articulos/elemento-head">
<meta property="og:image" content="https://ejemplo.com/img/preview.png">

<script src="/js/app.js" defer></script>
</head>

En un primer vistazo puede resultar confuso e incomprensible pero se puede aclarar el código utilizando comentarios.

Comentarios en HTML

Los desarrolladores utilizamos los comentarios para multitud de funciones: describir que hace o va a hacer un trozo de código, incluir un Copyright o copyleft en el código, añadir marcas o secciones en el fichero de código para marcar zonas y movernos más rápido por un fichero de código grande, etc.

En HTML, aunque no sea un lenguaje de programación, también podemos incluir comentarios para poder explicar nuestro código.

Para escribir un comentario en HTML utilizamos una etiqueta que será ignorada por el navegador web. Esta etiqueta tiene una marca de apertura particular y una marca de cierre también particular.

Para abrir el comentario se utiliza la marca <!– y para cerrar el comentario se utiliza la marca –> y entre medio va el texto que se utilizará como comentario. Un ejemplo puede ser:

<!-- Esto es un comentario en HTML -->

Ahora veamos de nuevo nuestro head con comentarios.

<head>
<!-- Codificación de caracteres -->
<meta charset="utf-8">

<!-- Ajuste de la vista en móviles -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Título de la página (pestaña del navegador, historial, marcadores) -->
<title>Guía del elemento head en HTML</title>

<!-- Descripción para buscadores y previsualizaciones -->
<meta name="description" content="Explicación de las etiquetas y elementos más habituales dentro del head de una página web, con ejemplos en HTML.">

<!-- Control básico de indexación (no es una norma absoluta, pero orienta a robots) -->
<meta name="robots" content="index,follow">

<!-- URL canónica para evitar duplicidades -->
<link rel="canonical" href="https://ejemplo.com/articulos/elemento-head">

<!-- Icono de la pestaña y accesos directos -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Hoja de estilos -->
<link rel="stylesheet" href="/css/styles.css">

<!-- Sugerencias de rendimiento para recursos de terceros -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Metadatos para compartir en redes (Open Graph) -->
<meta property="og:title" content="Guía del elemento head en HTML">
<meta property="og:description" content="Qué incluir en head: metadatos, enlaces, estilos, iconos, rendimiento y seguridad.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://ejemplo.com/articulos/elemento-head">
<meta property="og:image" content="https://ejemplo.com/img/preview.png">

<!-- Carga de JavaScript no bloqueante -->
<script src="/js/app.js" defer></script>
</head>

Codificación y representación de caracteres

Es necesario asegurarse que el navegador interpretará correctamente tildes, eñes y símbolos. Para ello se utiliza <meta charset=»utf-8″>, que declara la codificación del documento. Aunque hoy en día UTF-8 es la elección estándar en la Web, la etiqueta sigue siendo importante porque evita interpretaciones erróneas en ciertos entornos y garantiza consistencia.

Ajuste en móviles con viewport

Si la página se va a visualizar en smartphones y tablets, es esencial indicar al navegador cómo debe dimensionar el área visible. La etiqueta <meta name=»viewport»> permite controlar el ancho lógico y la escala inicial. La configuración más habitual es width=device-width, initial-scale=1, que adapta el layout al ancho del dispositivo sin ampliar o reducir de forma inesperada.

Título del documento con <title>

A continuación, <title> define el título del documento. Este texto suele aparecer en la pestaña del navegador, en el historial, en los marcadores y en muchas previsualizaciones. Desde el punto de vista de usabilidad, un título preciso ayuda a reconocer rápidamente la página. Desde el punto de vista de buscadores, suele ser una de las piezas más visibles del resultado.
Metadatos descriptivos: description, robots y otros

Después del título, se suelen incluir metadatos con <meta name=»…»>. El caso más conocido es description, que ofrece un resumen del contenido. No garantiza que un buscador muestre exactamente ese texto, pero suele utilizarse como base para la previsualización cuando es relevante. También es frecuente robots, que indica directrices de indexación y seguimiento de enlaces; su interpretación puede variar por motor de búsqueda, por lo que se recomienda entenderlo como una señal orientativa.
En escenarios más específicos pueden aparecer metadatos adicionales, como author para autoría, referrer para controlar qué información se envía al navegar a otros sitios, o theme-color para sugerir un color de interfaz en algunos navegadores móviles. El uso de estos valores debe estar alineado con el objetivo del sitio y con una política de privacidad clara.

Canonical: evitar duplicidades de URL

En el ámbito de SEO y consistencia, es habitual declarar una URL canónica mediante <link rel=»canonical» href=»…»>. Su objetivo es señalar cuál es la versión preferida cuando existen múltiples URLs que muestran el mismo contenido o contenido muy similar, por ejemplo por parámetros de seguimiento o rutas alternativas.
Enlaces a recursos: CSS, iconos y manifiestos
Otro bloque fundamental del <head> es el enlace a recursos externos mediante <link>. En primer lugar suele estar la hoja de estilos principal con rel=»stylesheet», que define cómo se presentará el HTML en pantalla, en impresión y en otros medios. Si existen varias hojas de estilo, el orden importa, porque las reglas posteriores pueden sobrescribir a las anteriores.
Los iconos de sitio también se declaran con <link>. El clásico favicon.ico sigue siendo útil por compatibilidad, pero hoy se suelen añadir variantes como SVG y el icono para pantallas de inicio en iOS mediante apple-touch-icon. En aplicaciones web progresivas puede añadirse además un manifiesto con rel=»manifest».

Metadatos para compartir: Open Graph y Twitter Cards

Cuando una URL se comparte en redes sociales o aplicaciones de mensajería, la previsualización suele basarse en metadatos específicos. En muchos entornos se utiliza Open Graph a través de <meta property=»og:…»>, indicando título, descripción, tipo, imagen y URL. En el ecosistema de X (antes Twitter) siguen siendo comunes las Twitter Cards con <meta name=»twitter:…»>. La idea es proporcionar a cada plataforma la información necesaria para mostrar una tarjeta coherente, con un texto breve y una imagen adecuada.

Scripts en el <head>

Aunque JavaScript puede incluirse en el <body>, se recomienda incluir la carga de los scripts de Javascript en el Head por motivos de accesibilidad.

Rendimiento: preload, preconnect y otras pistas

Además de enlazar recursos, <link> puede aportar pistas al navegador para optimizar la carga. Con rel=»preconnect» se solicita que se establezca cuanto antes la conexión con un dominio externo, algo útil cuando se dependen de CDNs o proveedores de fuentes. Con rel=»preload» se indica que un recurso será necesario muy pronto, por ejemplo una fuente o una hoja de estilos crítica, aunque su uso debe hacerse con cuidado para no saturar la red con descargas anticipadas innecesarias. En general, la mejor práctica consiste en aplicar estas técnicas tras medir y verificar que mejoran la experiencia.

Consideraciones de orden dentro del <head>

Aunque HTML es flexible, el orden de ciertas etiquetas ayuda. La declaración de <meta charset=»utf-8″> suele colocarse al inicio para evitar interpretaciones inconsistentes. A continuación es habitual incluir viewport y el title. Después suelen aparecer metadatos como description y enlaces como canonical, y a partir de ahí recursos como CSS, iconos y scripts diferidos. Este orden no es una regla rígida, pero mejora la legibilidad, reduce errores y favorece un comportamiento predecible.

Accesibilidad en el head

Según WCAG para considerar que el head de un documento HTML cumple con la accesibilidad es necesario que se incluya un título para el documento y que se defina el lenguaje principal de la página.

Hay otras recomendaciones como las de incluir los metadatos de description y encoding para ayudar a la interpretación correcta del contenido por parte de navegadores y de personas con herramientas que utilicen los metadatos del documento.

Introducción a HTML

Publicado el

Al abrir una página web con nuestro navegador lo que está haciendo la aplicación del navegador web es, principalmente, interpretar un fichero con extensión HTM o HTML.

HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es importante resaltar lo de lenguaje de marcado: HTML no es un lenguaje de programación. No “ejecuta” lógica como lo haría Swift, Python o JavaScript, sino que marca el contenido para indicar diversa información semántica como qué título tiene la página, en qué idioma está el contenido principal, qué elementos hay en la página (párrafos, imágenes, controles de formulario, etc) indicando qué es cada trozo de contenido en la página.

HTML se usa principalmente para estructurar contenido en la Web, aportar semántica en los contenidos y ser el nexo de unión para otras tecnologías de la web como CSS y Javascript.

Ejemplo básico en HTML

Un ejemplo básico del código HTML de un fichero .htm podría ser el siguiente:

<!doctype html>

<html>

  <head>

    <title>Mi primera página</title>

  </head>

  <body>

    <h1>Mi primera página</h1>
    <p>Este es un párrafo con información.</p>
    <a href=»https://programaraciegas.net»>Visitar el blog</a>

  </body>

</html>

 

Si copiamos el contenido anterior en un fichero con la extensión .htm, por ejemplo «prueba.htm» y lo abrimos con nuestro navegador web veremos lo que hemos creado.

Partes de un fichero HTML

Un archivo HTML suele tener extensión .html (por ejemplo, index.html). Aunque puede contener muchas secciones, la estructura base se repite casi siempre.

Declaración del tipo de documento

La primera línea típica es:

<!doctype html>

Esta declaración indica al navegador que el documento debe interpretarse como HTML moderno.

Elemento raíz: <html>

Todo el contenido se engloba dentro de <html>…</html>:

<!doctype html>
<html>
...
</html>

Cabecera del documento: <head>

La sección <head> contiene metadatos: información para el navegador y para otros sistemas, pero que normalmente no se muestra como contenido principal en pantalla.

Ejemplo:

<head>
<meta charset="utf-8">
<title>Introducción a HTML</title>
</head>

La línea <meta charset=»utf-8″> indica la codificación de caracteres (muy importante para tildes y caracteres especiales).

La línea <title> define el título que suele verse en la pestaña del navegador.
Cuerpo del documento: <body>

En <body> va el contenido visible o “principal”: textos, enlaces, imágenes, formularios, etc.

<body>
<h1>Introducción a HTML</h1>
<p>HTML estructura el contenido de una página web.</p>
</body>

Las etiquetas HTML

Una etiqueta (tag) es una marca que indica al navegador qué tipo de elemento es un fragmento de contenido.

La mayoría de elementos HTML se representan con una sintaxis básica consistente en un nombre de etiqueta encerrado entre los signos menor que y mayor que (< y >).

<hr>

Algunas etiquetas requieren otra etiqueta de cierre. Esta etiqueta de cierre suele ser la misma etiqueta pero su nombre comienza con el símbolo de barra (/). Entre la etiqueta de apertura y la de cierre va el contenido.

<p>Esto es un contenido.</p>

Además, hay etiquetas que incluyen atributos para poder realizar ciertas acciones.

<a href=»https://programaraciegas.net»>
Visita Programar a ciegas
</a>

El atributo href permite indicar qué dirección URL se abrirá el enlace identificado por la etiqueta a.

Qué es Axe DevTools

Publicado el

La herramienta axe DevTools es un kit profesional destinado a la evaluación de accesibilidad digital, diseñado para desarrolladores, testers y equipos de producto que requieren una cobertura automatizada de los requisitos de accesibilidad definidos por el estándar WCAG (Web Content Accessibility Guidelines). Está desarrollada por la empresa Deque Systems y se apoya en el motor de reglas de código abierto axe‑core, lo que garantiza que los análisis estén fundamentados en un conjunto robusto de comprobaciones de accesibilidad.

La extensión axe DevTools funciona como un complemento para navegadores web que permite identificar de forma automática numerosos errores de accesibilidad, comparables a lo que ofrecen otras herramientas como WAVE Evaluation Tool, aunque con un enfoque más detallado, profesional y orientado al ciclo de desarrollo. A diferencia de WAVE, que se orienta más a una evaluación de entrada para diseñadores y equipos de contenido, axe DevTools ofrece informes técnicos profundos, integración con flujos de testing y configuración orientada a desarrolladores. De hecho, en sus documentos se describe explícitamente que el propósito es empoderar a los equipos de desarrollo web y móvil a encontrar, prevenir y corregir problemas de accesibilidad mientras codifican.

Informes técnicos

El valor diferencial de axe DevTools se encuentra en los informes técnicos que genera para desarrolladores. Una vez lanzado el escaneo de una página o aplicación, la herramienta presenta una lista de problemas detectados, cada uno con su nivel de severidad (crítico, serio, moderado, menor), el estándar o criterio WCAG que infringe, un fragmento de código fuente o apuntador al DOM, y la capacidad de resaltar la ubicación del problema en la página. Para cada problema, la herramienta incluye orientación de corrección (remediation guidance), lo que facilita que los desarrolladores comprendan y apliquen la solución. Además, dado que está impulsada por el motor axe-core, minimiza los falsos positivos, lo que contribuye a que los equipos de desarrollo no pierdan tiempo.

Además, la herramienta ofrece capacidades de exportación y compartición de resultados, lo que permite que los desarrolladores integren esos informes en sistemas de seguimiento de incidencias o los compartan con otros miembros del equipo (por ejemplo testers de accesibilidad, QA o equipo de producto). También existe la posibilidad de análisis de componentes individuales, lo que permite una granularidad mayor cuando se trabaja por módulos o micro frontends.

Integración con flujos de testing

Otras de las características interesantes de esta herramienta es la integración con los flujos de testing.

Las APIs de axe DevTools permiten su uso dentro de entornos automatizados, sistemas de integración continua (CI), pruebas end-to-end y frameworks como Cypress, Playwright, Puppeteer, WebDriver, así como lenguajes de scripting como JavaScript/Node.js, C#, Java, Python o Ruby.
De esta forma, un equipo puede configurar, gracias a la documentación de la herramienta, que cada build automatizada ejecute un análisis de accesibilidad y genere un reporte; si aparecen violaciones de accesibilidad, puede bloquearse la entrega o abrirse automáticamente una incidencia. Esto permite que la accesibilidad sea parte del proceso de calidad desde el inicio y no sólo al final.
Complementariamente, en la extensión de navegador se habilita una modalidad Intelligent Guided Tests (IGT) que guía al tester o desarrollador sobre pruebas que no son detectables automáticamente, reduciendo el volumen de pruebas manuales que aún son necesarias.
De esta manera, axe DevTools puede funcionar tanto de forma interactiva (desde el navegador) como en modo automatizado dentro del pipeline de desarrollo, incrementando la cobertura de accesibilidad sin necesidad de que cada desarrollador sea un experto en accesibilidad.

Cómo escribir matrices con MathML

Publicado el

Una matriz es una tabla de números organizada en filas y columnas. Las matrices se utilizan ampliamente en muchas ramas de las matemáticas y ciencias aplicadas. Se utilizan para resolver sistemas de ecuaciones lineales, representar transformaciones geométricas, modelar datos en inteligencia artificial o describir redes eléctricas o circuitos.

Para las personas ciegas, escribir y leer matrices puede plantear diversas barreras de accesibilidad como la incapacidad de memorizar toda la información contenida en la matriz, incompatibilidad del producto de apoyo con el formato utilizado para mostrar la matriz, limitaciones de los sistemas de formateado de texto y marcado semántico, etc. En el caso de otros perfiles de discapacidad el producto de apoyo puede encontrar problemas para navegar por los datos de la matriz o no existir una semántica suficiente para identificar filas, columnas o celdas concretas por lo que una persona que utilice un sistema de control por voz o un barredor no podrá interactuar de forma apropiada con la matriz.

Utilizando MathML podemos solucionar muchos de estos problemas ya que aporta semántica y compatibilidad con los diversos productos de apoyo. Con MathML, no solo podemos mostrar una matriz, sino también describirla de forma que cualquier persona, con o sin discapacidad, pueda acceder a su contenido.

Cómo escribir una matriz con MathML

En MathML tenemos el elemento mtable para representar matrices. Además podemos encerrarla entre corchetes utilizando el elemento mfenced como se requiere en algunos ejercicios matemáticos o de física.

El siguiente ejemplo muestra una matriz de 2×2 celdas con los valores 1, 2, 3 y 4:

<math>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mn>1</mn></mtd>
<mtd><mn>2</mn></mtd>
</mtr>
<mtr>
<mtd><mn>3</mn></mtd>
<mtd><mn>4</mn></mtd>
</mtr>
</mtable>
</mfenced>
</math>

Con el elemento mtr marcamos una fila de la matriz y con mtd marcamos una celda concreta.

En el navegador la matriz se mostraría de la siguiente forma:

1 2 3 4

También podemos escribir la matriz con variables para la resolución de problemas de álgebra:

<math>
<mtable>
<mtr>
<mtd><mi>a</mi></mtd>
<mtd><mi>b</mi></mtd>
</mtr>
<mtr>
<mtd><mi>c</mi></mtd>
<mtd><mi>d</mi></mtd>
</mtr>
</mtable>
</math>

En el navegador se mostraría de la siguiente forma:

a b c d

Celebración del GAAD 2025

Publicado el

El próximo jueves 15 de mayo de 2025 se celebrará el GAAD o Día Mundial de Concienciación sobre la Accesibilidad.

Durante este día muchos profesionales de la accesibilidad participamos divulgando y compartiendo conocimientos y experiencias para promover la accesibilidad y la equidad social para garantizar el acceso a todas las personas.

Qué es la Internet Society

Publicado el

Durante mi estancia en Puerto rico participando en el II congreso de accesibilidad de la UPR tuve la oportunidad de conocer y relacionarme con miembros del capítulo de Puerto Rico de la Internet Society. Eso me permitió conocer mejor esta asociación con unos fines muy interesantes.

¿Qué es la Internet society?

La Internet Society (ISOC) es una organización global sin ánimo de lucro que desempeña un papel fundamental en la promoción de una Internet abierta, segura y accesible para todos. Fundada en 1992 por pioneros de la red como Vinton Cerf y Robert Kahn, su misión es garantizar que Internet siga siendo una herramienta de empoderamiento y desarrollo a nivel mundial. En un mundo donde Internet forma parte de casi todos los aspectos de nuestra vida, desde la educación hasta el trabajo, desde la comunicación hasta el entretenimiento, garantizar su libre acceso y buen funcionamiento es más importante que nunca.

Hoy en día, ISOC cuenta con una red global de miembros individuales, organizaciones afiliadas y capítulos locales repartidos por todo el mundo.

¿Qué hacen?

ISOC trabaja en múltiples frentes para fortalecer la infraestructura y las políticas de Internet. Sus principales áreas de acción incluyen temas relacionados con la conectividad global, seguridad y confianza en Internet, desarrollo de políticas de protección de Internet, educación y capacitación y también temas de accesibilidad en Internet.

¿Por qué lo hacen?

La visión de ISOC es una Internet para todos: abierta, globalmente conectada, segura y confiable. Creen que una Internet accesible y segura es esencial para el desarrollo social, económico y cultural de las comunidades en todo el mundo.

¿Cómo se organizan?

La Internet Society se estructura de forma global, pero su fuerza está en la participación local. Está compuesta por:

Capítulos (Chapters)

Los capítulos son grupos de miembros organizados por región o país que promueven los principios de ISOC a nivel local. Existen más de 110 capítulos activos en todo el mundo. Cada capítulo es autónomo, pero está vinculado a la misión de ISOC. Pueden organizar eventos, debates, talleres, y colaborar con autoridades locales para influir en decisiones tecnológicas y regulatorias.

Unirte a un capítulo local te permite involucrarte más directamente, conocer a otras personas con intereses comunes y participar en iniciativas que afectan a tu comunidad.

Miembros individuales

Cualquier persona del mundo puede convertirse en miembro de ISOC de forma gratuita. Solo necesitas registrarte en su web. Como miembro, puedes votar en elecciones internas, participar en discusiones y colaborar en proyectos.

Miembros organizacionales

ISOC también ofrece membresías para empresas, universidades, ONGs y otras entidades interesadas en apoyar el desarrollo sostenible de Internet.

Junta Directiva

La gobernanza de ISOC está en manos de una Junta de Directores elegida por los miembros y organizaciones afiliadas. Esta junta supervisa las actividades de la organización, aprueba presupuestos y define estrategias.

¿Cómo puedo ser miembro?

Cualquier persona interesada puede unirse a ISOC de forma gratuita como miembro individual. El proceso de inscripción es sencillo y se realiza a través de su sitio web oficial. Además, existen membresías para organizaciones, destinadas a empresas, instituciones académicas y entidades gubernamentales que deseen apoyar la misión de ISOC. En el caso de empresas y organizaciones tiene un coste anual variable según el tipo y tamaño de la organización, con diferentes niveles de beneficios.

¿Qué obligaciones tienen sus miembros?

Los miembros individuales deben adherirse a un código de conducta que promueve la honestidad, integridad y respeto en todas las interacciones relacionadas con ISOC. Esto incluye participar de manera constructiva en las actividades y discusiones de la comunidad, así como respetar las normas y políticas establecidas por la organización.

La participación en los eventos y actividades es opcional aunque si se pertenece a un capítulo es necesario que el nuevo miembro mantenga una participación activa en las actividades organizadas por el capítulo.

¿Qué beneficios obtienen sus miembros?

Además de trabajar por una Internet abierta y segura para todas las personas los miembros de ISOC pueden acceder a recursos educativos y formativos sobre tecnología, derechos digitales y políticas de Internet, pueden participar en en proyectos globales y locales con impacto real, formar parte de una red internacional de activistas, tecnólogos, desarrolladores, académicos y defensores de los derechos digitales, participar en las decisiones de la asociación y, además, asistir a eventos, conferencias y programas de becas.