Operaciones aritméticas básicas en MathML

En artículos anteriores hemos visto qué es MathML y cómo se escribe una operación matemática con MathML para la Web. Con esa información podemos crear contenidos de aritmética básica de forma accesible y legible para todas las personas.

Aritmética básica con MathML

La aritmética puede definirse como la ciencia de los números y las operaciones básicas que podemos realizar con ellos. Estas operaciones permiten realizar cálculos para resolver problemas relacionados con la cantidad, el tamaño, la distancia, entre otros. En términos simples, la aritmética es el lenguaje universal que usamos para entender y manejar números en nuestra vida diaria.

La aritmética se fundamenta en cuatro operaciones básicas: suma, resta, multiplicación y división. Cada una de estas operaciones tiene su propia función y se aplica en diferentes contextos, pero todas están interrelacionadas entre sí.

A la hora de utilizar la etiqueta <mo> de MathML es sencillo incluir algunas de estas operaciones básicas de la aritmética como la suma y la resta ya que sus símbolos matemáticos están dentro del conjunto de caracteres comunes de escritura de textos. Pero otras operaciones aritméticas como la multiplicación y la división utilizan símbolos que no son de uso común a la hora de escribir textos. Por esta razón es necesario utilizar caracteres HTML especiales para reflejar estas operaciones.

Por ejemplo, para representar la operación de multiplicación se utiliza el símbolo × que en HTML se representa como &times; y el símbolo para la división es ÷ y en HTML se representa como &divide;.

Veamos a continuación los distintos símbolos para las operaciones aritméticas básicas escritos dentro de un bloque MathML:

<math>

<mrow><mn>1</mn> <mo>+</mo> <mn>1</mn> <mo>=</mo> <mn>2</mn></mrow>

<mrow><mn>1</mn> <mo>-</mo> <mn>1</mn> <mo>=</mo> <mn>0</mn></mrow>

<mrow><mn>2</mn> <mo>&times;</mo> <mn>3</mn> <mo>=</mo> <mn>6</mn></mrow>

<mrow><mn>6</mn> <mo>&divide;</mo> <mn>3</mn> <mo>=</mo> <mn>2</mn></mrow>

</math> 

En el navegador este código MathML se visualizaría de esta manera:

 
1 + 1 = 2 1 1 = 0 2 × 3 = 6 6 ÷ 3 = 2

Con esto ya podemos representar la aritmética básica en un contenido Web de forma accesible. En futuros artículos veremos operaciones más complejas gracias a MathML.

Escritura básica de MathML en un contenido web

En un artículo anterior se describió El lenguaje de marcado MathML (Mathematical Markup Language)

 y sus posibles usos para representar expresiones matemáticas complejas de manera que sean comprensibles para los navegadores y accesibles para usuarios con discapacidades visuales mediante lectores de pantalla.

Con la integración de MathML en HTML5, es más sencillo incluir fórmulas matemáticas en páginas web sin necesidad de imágenes o scripts externos.

En este artículo, exploraremos las etiquetas principales de MathML: <math>, <mrow>, <mn>, <mo>, y <mi>, y veremos ejemplos de cómo se utilizan para estructurar contenido matemático.

Etiqueta math

La etiqueta <math> es el contenedor raíz para cualquier expresión MathML. Todo el contenido matemático debe estar encapsulado dentro de esta etiqueta para que los navegadores lo reconozcan como tal.

Ejemplo:

<math>
<!-- Contenido MathML aquí -->
</math>

Etiqueta mn

La etiqueta <mn> se usa para representar números. Cada número en una expresión debe estar envuelto en una etiqueta <mn>.

Ejemplo:

<math>
<mn>3</mn>
<mo>+</mo>
<mn>4</mn>
<mo>=</mo>
<mn>7</mn>
</math>

Este código se mostraría de la siguiente forma:

3 + 4 = 7

Etiqueta mo

La etiqueta <mo> se utiliza para operadores. Esto incluye símbolos como el signo más, menos, multiplicación, división, paréntesis, y otros operadores matemáticos.

Ejemplo:

<math>
<mn>50</mn>
<mo>-</mo>
<mn>8</mn>
<mo>=</mo>
<mn>42</mn>
</math>

Este ejemplo se visualiza de la siguiente forma:

508=42

Etiqueta mrow

La etiqueta <mrow> se utiliza para agrupar elementos de manera secuencial. Es similar a un “contenedor” que asegura que el contenido se trate como una sola unidad lógica. Esto es especialmente útil cuando se necesita aplicar operadores a un grupo de elementos. Por ejemplo si se desean escribir varias líneas con operaciones matemáticas:

<math>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>

<mrow><mi>p</mi>
<mo>+</mo>
<mi>q</mi>
</mrow>
</math>

Este código se mostraría de la siguiente forma:

x+y p+q

En futuros artículos veremos construcciones más complejas utilizando MathML.

Escribir matemáticas en la Web de forma accesible con MathML

En muchos contenidos de la Web nos encontramos formulas matemáticas que bien están dibujadas en una imagen o bien se escriben maquetando y estructurando los distintos elementos de una fórmula matemática atendiendo a su posición en el papel y no a su significado matemático. Todo esto provoca multitud de problemas de accesibilidad que dificultan la lectura de contenidos matemáticos en la Web. Para solucionar este problema el W3C definió MathML.
MathML, abreviatura de Mathematical Markup Language, es un lenguaje de marcado basado en XML diseñado específicamente para representar expresiones matemáticas y notaciones en documentos web. MathML fue desarrollado por el W3C (World Wide Web Consortium) y es una parte integral del conjunto de estándares web para facilitar la inclusión de contenido matemático en las páginas web de manera semántica y accesible.

Se pueden encontrar multitud de beneficios al usar MathML en la Web:

  • Consistencia: Proporciona una forma estandarizada de presentar matemáticas en la web, asegurando que las fórmulas se vean de la misma manera en diferentes navegadores y dispositivos.
  • Escalabilidad visual: Las expresiones matemáticas en MathML se escalan correctamente cuando se ajusta el tamaño de texto en el navegador, manteniendo su legibilidad.
  • Accesibilidad: proporciona compatibilidad con los productos de apoyo como lectores de pantalla provocando que las fórmulas matemáticas apliquen reglas de lectura específicas facilitando a las personas ciegas una lectura más comprensible de fórmulas y textos matemáticos.
  • Interacción Mejorada: Permite la creación de contenido interactivo donde las fórmulas pueden ser manipuladas o calculadas dinámicamente, lo que es particularmente útil en plataformas educativas.
  • Compatibilidad con Herramientas de Edición: Muchas herramientas de edición y procesamiento de documentos científicos soportan MathML, lo que facilita la importación y exportación de contenido matemático entre diferentes plataformas.

Implementación y Compatibilidad
La implementación 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 MathJax para un soporte completo. MathJax es una popular biblioteca JavaScript que ayuda a renderizar MathML (y otras notaciones matemáticas como LaTeX) de manera consistente en todos los navegadores.
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.

Ejemplo básico

A continuación veremos un ejemplo básico sobre cómo se ve el código de MathML y cómo lo lee el navegador web. Vamos a realizar una operación matemática básica: calcularemos la suma de 3 y 6 que debe dar un resultado de 9.

El resultado en MathML es:

3+6=9

Y su código en MathML es el siguiente:

<math display="block">
  <mrow>
    <mn>3</mn>
    <mo>+</mo>
    <mn>6</mn>
    <mo>=</mo>
    <mn>9</mn>
  </mrow>
</math>

La gramática 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ículos aprenderemos a utilizar MathML con más profundidad.

Cómo reportar errores de Safari o WebKit

Safari, el navegador web de Apple, utiliza WebKit como motor de visualización de contenidos web.

WebKit es utilizado en muchas plataformas y dispositivos y es por esta razón que hay muchos equipos de desarrollo de software y empresas involucrados en su mantenimiento.

La comunidad de mantenimiento de WebKit posee un sistema propio para informar de errores o mejoras y podemos consultar la lista de errores notificados en WebKit por los usuarios y profesionales que lo utilizan.

Cualquier persona puede notificar un problema en WebKit o Safari respetando las normas de su comunidad.

Cómo convertir una extensión de Chrome a Safari

Las extensiones de un navegador web es un pequeño programa que permite ampliar la funcionalidad de nuestro navegador para mejorar nuestra experiencia cuando utilizamos la World Wide Web.

Aunque actualmente todas las extensiones de navegador se crean utilizando HTML, CSS y Javascript si es cierto que no hay una compatibilidad completa entre los navegadores y sus extensiones ya que cada navegador ofrece librerías internas distintas para sus extensiones.

Por suerte para nosotros Apple ha proporcionado herramientas para convertir extensiones de Google Chrome para hacerlas compatibles con Safari, el navegador de Apple.

Primeros pasos

En primer lugar esta conversión de extensiones de navegador sólo se puede realizar en equipos que estén ejecutando MacOS 10.15 Catalina o superior. Además debemos tener instalado en nuestro equipo Mac el entorno de desarrollo XCode en su versión 12 o superior. Podemos encontrar XCode en la MacAppStore.

Obteniendo el código de la extensión de Chrome

Una vez tengamos nuestro equipo con MacOS preparado debemos obtener el código fuente de la extensión que queramos convertir. Para obtener el código de una extensión debemos descargarla en formato zip. Podemos seguir las instrucciones de este artículo sobre cómo descargar extensiones de Chrome.

Preparando el proyecto para XCode

Una vez tengamos el fichero ZIP con el código de la extensión debemos descomprimirlo en una carpeta con ruta conocida ya que necesitaremos esa ruta para preparar el proyecto para XCode.

Una vez conocida la ruta debemos abrir la Terminal de Mac y ejecutar el siguiente comando de Terminal indicando la ruta a la carpeta descomprimida previamente:

xcrun safari-web-extension-converter ruta_a_la_carpeta_descomprimida_de_la_extensión

Tras introducir el comando y esperar unos segundos debemos pulsar la tecla ENTER para continuar el proceso.

Tras terminar el proceso se abrirá Xcode con el proyecto para compilar la extensión para Safari. Pulsando el botón de Run se procederá a su compilación.

Una vez compilado y ejecutado el sistema nos pedirá permisos para poder configurar Safari con la extensión.

Si no poseemos un perfil de desarrollador de Apple deberemos activar la opción de Permitir extensiones no firmadas del menú de Desarrollo de Safari para poder ejecutar la extensión sin problemas.

Cómo usar GoogleDrive con VoiceOver para Mac

El servicio de almacenamiento de datos de Google, conocido como Google drive, permite a los usuarios de Mac acceder a sus ficheros y carpetas instalando un cliente de Google drive y accediendo a él con el Finder de Mac como un volumen más conectado a nuestro ordenador.

Pero a veces nos interesa poder acceder a nuestra cuenta de Google drive a través de la interfaz web de este servicio.

Su accesibilidad

Aunque Google sigue trabajando por mejorar la accesibilidad de todos sus servicios, su política sigue siendo la de que el usuario debe usar unas teclas o atajos de teclado determinados obligando a los usuarios a conocer y aprender estos atajos.

Estos atajos de teclado no son complicados y siguen una cierta lógica. Google ofrece una página con todos los atajos de teclado para Google drive.

Atajos de teclado más importantes

Los atajos de teclado principalmente consisten en la pulsación de una tecla de activación y a continuación una tecla de selección de tipo.

Por ejemplo, para ir a la barra de navegación debemos pulsar la tecla G y a continuación, tras soltar la tecla G, pulsar la tecla N. El foco de nuestro lector de pantallas se colocará en la barra de navegación y utilizando las flechas de cursor y la tecla enter podremos explorar los distintos elementos de la barra de navegación de Google drive.

Para ir a la lista de ficheros debemos pulsar la tecla G y a continuación la tecla L.

Estando en la lista de ficheros podemos cambiar entre la vista de lista y la vista de cuadricula pulsando la tecla V. Para los usuarios de VoiceOver es recomendable pasar a la vista de lista.

Para ir a la vista de detalle del fichero seleccionado debemos pulsar la tecla G y luego la tecla D.

Recomendaciones para usuarios de VoiceOver

Aunque el navegador web Safari ofrece la accesibilidad que Google ha diseñado para este servicio si es cierto que el comportamiento de VoiceOver es mejor si se utiliza Google Chrome como navegador.

A veces lo que lee VoiceOver no coincide con lo que el foco de accesibilidad de Google drive está seleccionando. Esto se debe a que el foco de VoiceOver no se sincroniza bien con el foco virtual de accesibilidad creado por Google. Para solucionar esto podemos desactivar el control del cursor de VoiceOver provocando que los cursores de VoiceOver, el cursor de teclado y el cursor del ratón no se sincronicen. Esto se consigue pulsando la combinación Mayúsculas+Control+Opción+F3. Con esto el cursor de Google drive tendrá mejor acceso a VoiceOver.