{"id":1201,"date":"2024-08-23T00:00:00","date_gmt":"2024-08-22T22:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1201"},"modified":"2024-08-05T08:55:59","modified_gmt":"2024-08-05T06:55:59","slug":"escribir-matematicas-en-la-web-de-forma-accesible-con-mathml","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1201","title":{"rendered":"Escribir matem\u00e1ticas en la Web de forma accesible con MathML"},"content":{"rendered":"<p>En muchos contenidos de la Web nos encontramos formulas matem\u00e1ticas que bien est\u00e1n dibujadas en una imagen o bien se escriben maquetando y estructurando los distintos elementos de una f\u00f3rmula matem\u00e1tica atendiendo a su posici\u00f3n en el papel y no a su significado matem\u00e1tico. Todo esto provoca multitud de problemas de accesibilidad que dificultan la lectura de contenidos matem\u00e1ticos en la Web. Para solucionar este problema el <a href=\"https:\/\/www.w3.org\/\">W3C<\/a> defini\u00f3 MathML.<br \/><strong>MathML<\/strong>, abreviatura de Mathematical Markup Language, es un lenguaje de marcado basado en XML dise\u00f1ado espec\u00edficamente para representar expresiones matem\u00e1ticas y notaciones en documentos web. MathML fue desarrollado por el W3C (World Wide Web Consortium) y es una parte integral del conjunto de est\u00e1ndares web para facilitar la inclusi\u00f3n de contenido matem\u00e1tico en las p\u00e1ginas web de manera sem\u00e1ntica y accesible.<\/p>\n<p>Se pueden encontrar multitud de beneficios al usar MathML en la Web:<\/p>\n<ul>\n<li>Consistencia: Proporciona una forma estandarizada de presentar matem\u00e1ticas en la web, asegurando que las f\u00f3rmulas se vean de la misma manera en diferentes navegadores y dispositivos.<\/li>\n<li>Escalabilidad visual: Las expresiones matem\u00e1ticas en MathML se escalan correctamente cuando se ajusta el tama\u00f1o de texto en el navegador, manteniendo su legibilidad.<\/li>\n<li>Accesibilidad: proporciona compatibilidad con los productos de apoyo como lectores de pantalla provocando que las f\u00f3rmulas matem\u00e1ticas apliquen reglas de lectura espec\u00edficas facilitando a las personas ciegas una lectura m\u00e1s comprensible de f\u00f3rmulas y textos matem\u00e1ticos.<\/li>\n<li>Interacci\u00f3n Mejorada: Permite la creaci\u00f3n de contenido interactivo donde las f\u00f3rmulas pueden ser manipuladas o calculadas din\u00e1micamente, lo que es particularmente \u00fatil en plataformas educativas.<\/li>\n<li>Compatibilidad con Herramientas de Edici\u00f3n: Muchas herramientas de edici\u00f3n y procesamiento de documentos cient\u00edficos soportan MathML, lo que facilita la importaci\u00f3n y exportaci\u00f3n de contenido matem\u00e1tico entre diferentes plataformas.<\/li>\n<\/ul>\n<h2>Implementaci\u00f3n y Compatibilidad<br \/>La implementaci\u00f3n de MathML puede variar entre diferentes navegadores web. Mientras que navegadores como Firefox y Safari ofrecen soporte nativo para MathML, otros como algunas versiones de Chrome, Brave u Opera pueden requerir complementos o bibliotecas adicionales como <a href=\"https:\/\/www.mathjax.org\/\">MathJax<\/a> para un soporte completo. MathJax es una popular biblioteca JavaScript que ayuda a renderizar MathML (y otras notaciones matem\u00e1ticas como LaTeX) de manera consistente en todos los navegadores.<br \/>Lo habitual es que si el navegador soporta HTML5 en todas sus versiones el contenido en formato MathML se pueda visualizar correctamente aunque haya algunos problemas de estilo CSS.<\/h2>\n<p>Ejemplo b\u00e1sico<\/p>\n<p>A continuaci\u00f3n veremos un ejemplo b\u00e1sico sobre c\u00f3mo se ve el c\u00f3digo de MathML y c\u00f3mo lo lee el navegador web. Vamos a realizar una operaci\u00f3n matem\u00e1tica b\u00e1sica: calcularemos la suma de 3 y 6 que debe dar un resultado de 9.<\/p>\n<p>El resultado en MathML es:<\/p>\n<p>3+6=9<\/p>\n<p>Y su c\u00f3digo en MathML es el siguiente:<\/p>\n<p><code><code><\/code><\/code><\/p>\n<pre>&lt;math display=\"block\"&gt;\n\u00a0 &lt;mrow&gt;\n\u00a0 \u00a0 &lt;mn&gt;3&lt;\/mn&gt;\n\u00a0 \u00a0 &lt;mo&gt;+&lt;\/mo&gt;\n\u00a0 \u00a0 &lt;mn&gt;6&lt;\/mn&gt;\n\u00a0 \u00a0 &lt;mo&gt;=&lt;\/mo&gt;\n\u00a0 \u00a0 &lt;mn&gt;9&lt;\/mn&gt;\n\u00a0 &lt;\/mrow&gt;\n&lt;\/math&gt;\n<\/pre>\n<p>La gram\u00e1tica de MathML es muy parecida a la que se utiliza en HTML5 por lo que no supone un aprendizaje pesado y los beneficios merecen mucho la pena. En futuros art\u00edculos aprenderemos a utilizar MathML con m\u00e1s profundidad.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En muchos contenidos de la Web nos encontramos formulas matem\u00e1ticas que bien est\u00e1n dibujadas en una imagen o bien se escriben maquetando y estructurando los distintos elementos de una f\u00f3rmula matem\u00e1tica atendiendo a su posici\u00f3n en el papel y no a su significado matem\u00e1tico. Todo esto provoca multitud de problemas de accesibilidad que dificultan la &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/programaraciegas.net\/?p=1201\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> \u00abEscribir matem\u00e1ticas en la Web de forma accesible con MathML\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,114,6],"tags":[11,489,490,94],"class_list":["post-1201","post","type-post","status-publish","format-standard","hentry","category-accesibilidad","category-navegadores-web","category-programacion","tag-accesibilidad-2","tag-mathml","tag-w3c","tag-web"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1201"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1201\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}