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.

Revisa la accesibilidad de tu código Android con Android-ally

El desarrollo de aplicaciones Android implica el diseño y la implementación de diversas interfaces de usuario. Es en esta etapa del desarrollo de un proyecto software donde aparecen todas las futuras barreras de accesibilidad que mostrará la aplicación.

Aunque todavía no exista ninguna herramienta automática para la accesibilidad que sea 100% fiable si está demostrado sin duda alguna que la detección temprana de estas barreras mejora la experiencia de la persona que desarrolla estas interfaces de usuario y es en esas etapas donde deberían existir más herramientas automáticas. Curiosamente hay más herramientas de este tipo para las etapas posteriores al desarrollo.

En Android ya existe una herramienta de validación de la accesibilidad pero funciona en aplicaciones que se estén ejecutando en un teléfono Android.

Para ayudar a las personas desarrolladoras de software para Android surge este plugin para Android studio: Android-ally.

Este plugin permite a los desarrolladores realizar ciertas pruebas en sus interfaces durante la etapa de desarrollo.

Además el creador de este plugin lo distribuye como open source para que toda la comunidad de desarrollo de Android pueda utilizarlo y mejorarlo.

Puedes ver un video explicando el plugin en detalle y su instalación en Youtube.

Actualizado el script de VoiceOverTranslator

El script de AppleScript de VoiceOverTranslator ha sido actualizado incluyendo un script extra que nos permite traducir el contenido que tengamos almacenado en el portapapeles.

Ahora podemos selecciona un bloque de texto completo y utilizando las funciones de la API de GoogleTrans obtener una traducción a nuestro idioma preferido.

Puedes obtener estos dos scripts en el repositorio de Tyflos Accessible Software para VoiceOverTranslator.

Tests dentro de la ingeniería del software

Dentro de la mayoría de metodologías de diseño y desarrollo de software existe un apartado enfocado a las comprobaciones de las funciones, aspecto y comportamiento de una aplicación. Es lo que se conoce como testing dentro del proyecto.

Beneficios del testing

Dentro de la multitud beneficios que aporta realizar testing en nuestro proyecto se encuentran los siguientes.

  • Se pueden realizar pruebas específicas y generales del comportamiento de clases y funciones de nuestro proyecto. De esta forma podemos validar que las funciones y clases que desarrollamos dentro de nuestro proyecto cumplen los requisitos definidos por el documento de análisis.
  • Se pueden realizar pruebas completas de una experiencia de usuario. De esta forma podemos verificar que nada se ha roto cuando añadimos algún elemento nuevo a nuestro proyecto.
  • Las pruebas de uso de la aplicación se pueden automatizar para que nuestro ordenador compruebe que la aplicación funciona como se espera.
  • Además permite automatizar otros procesos que pueden resultar laboriosos o tediosos como la toma de capturas de pantalla, validación del aspecto visual de cada pantalla de la aplicación e incluso se pueden crear comprobaciones de accesibilidad en algunas plataformas para la detección temprana de barreras de accesibilidad.

Problemas del testing

Incluir testing en nuestro proyecto implica la aparición de los siguientes problemas, sobre todo si el equipo de desarrollo no está acostumbrado al uso de testing:

  • Incremento en los costes de organización y tiempo. Las pruebas o tests no se planifican ni se escriben solas. Es necesario organizar el plan de trabajo para que el testing sea correctamente incluido en la metodología de trabajo utilizada por el equipo dentro del proyecto.
  • Prevención de falsos errores. Cuando se realizan cambios visuales o funcionales dentro de una ventana o una sección de nuestra aplicación todos los tests relacionados con dicha pantalla fallarán. Es necesario que algún miembro del equipo actualice esos tests para que acepten los nuevos cambios y validar cuales son los nuevos comportamientos y aspectos válidos para el proyecto.
  • No existe la fiabilidad al completo. Aunque podamos pensar que un proyecto software siempre se comportará igual en cualquier situación cuando el proyecto es complejo también aumenta la complejidad para cubrir todos los posibles casos de uso con los tests. Incluso así es posible que nuestro conjunto de tests no detecte algún posible error o problema de funcionamiento de nuestra aplicación. Cuando esto sucede es necesario ampliar el número de tests para verificar que el error detectado no vuelva a ocurrir.

Tipos de testing

Dentro de la creación y mantenimiento de un proyecto de software existen distintas necesidades de comprobación por esta razón existen diversos tipos de testing.

Cada tipo de testing tiene un objetivo claro que ayuda a detectar y solucionar un tipo de problema específico del proyecto.

Tests funcionales

Este tipo de test comprueba si la funcionalidad de un método o función se adapta al comportamiento esperado. De esta forma podemos comprobar si una función de conversión de divisas funciona como se espera o si el cálculo de el total del precio de un pedido no comete errores.

Dentro de este tipo de tests encontramos los tests unitarios, tests de aceptación, tests de integración y tests de regresión.

Tests no funcionales

Este tipo de test representa  las pruebas que se realizan en la aplicación o producto y que no están relacionadas con el código del proyecto.

Algunas de estas pruebas son las pruebas de rendimiento, las pruebas de carga y las pruebas de estrés.