Escribiendo Derivadas e Integrales con MathML

MathML (Mathematical Markup Language) es un lenguaje basado en XML diseñado para describir contenido matemático de forma estructurada y accesible en la web y, en muchos casos, es una de las pocas formas de poder escribir matemáticas para personas con discapacidad visual y que puedan compartirlas con personas sin discapacidad y todos puedan leer lo mismo. Cuando tenemos que escribir matemáticas simples como operaciones aritméticas es suficiente con un documento de texto plano pero cuando tenemos que utilizar operaciones de cálculo diferencial o integral entonces necesitamos utilizar un lenguaje que nos permita estructurar el contenido que estamos escribiendo siguiendo las normas de escritura definidas por las operaciones de cálculo. Las derivadas e integrales pueden representarse fácilmente con las etiquetas adecuadas, permitiendo mostrar contenido matemático accesible en la web.

¿Qué son las derivadas?

Las derivadas son un concepto fundamental del cálculo diferencial. Representan la tasa de cambio de una función respecto a una variable.

En MathML podemos representar una derivada con el siguiente código:

<math>
<mfrac>
<mi>d</mi>
<mrow>
<mi>d</mi><mi>x</mi>
</mrow>
</mfrac>
<mi>f</mi>
<mo>(</mo>
<mi>x</mi>
<mo>)</mo>
</math>

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

 
d dx f ( x )

¿Qué son las integrales?

Las integrales son el concepto central del cálculo integral. Se utilizan para calcular áreas bajo curvas, volúmenes y resolver ecuaciones diferenciales.

En MathML podemos escribir una integral siguiendo este código:

<math>
<mo>&#x222B;</mo>
<mi>f</mi>
<mo>(</mo>
<mi>x</mi>
<mo>)</mo>
<mo>d</mo><mi>x</mi>
</math>

En el navegador veríamos lo siguiente:

f ( x ) dx

Escribir fracciones con MathML

Una fracción es una forma de representar una parte de un entero o una división entre dos números enteros. La escritura de fracciones resulta una de las mayores barreras de accesibilidad debido a que las fracciones ocupan una disposición en vertical en la que el numerador, el denominador y la barra de fracción se distribuyen en 3 líneas de lectura. Con MathML se nos ofrece una forma de codificar una fracción y que resulte accesible a la hora de leer matemáticas con fracciones utilizando productos de apoyo.

Para representar fracciones en MathML, se utiliza la etiqueta <mfrac>, que crea una fracción con un numerador y un denominador.

La estructura de una fracción en MathML es la siguiente:

<math>
<mfrac>
<mi>a</mi> <!-- Numerador -->
<mi>b</mi> <!-- Denominador -->
</mfrac>
</math>

Por ejemplo para escribir una fracción cuyo numerador sea el número 12 y el denominador el número 3 se utilizaría el siguiente código MathML:

<math>
<mfrac>
<mi>12</mi>
<mi>3</mi>
</mfrac>
</math>

Y se leería de la siguiente forma:

12 3

Dependiendo de la configuración del producto de apoyo el usuario podrá leer la fracción de la forma más óptima a sus necesidades de accesibilidad.

Escribir potencias con MathML

En artículos anteriores hemos visto qué se puede hacer con MathML.

En este artículo aprenderemos a escribir potencias con MathML para poderlas mostrar en un contenido web.

En una expresión de operación de potencia debemos indicar la base y el exponente. La base es el número que se va a multiplicar por si mismo y el exponente indica el número de veces que se va a realizar la multiplicación.

En MathML para expresar la operación de 4 elevado a 2 se escribe así:

<math >
<msup>
<mn>4</mn>
<mn>2</mn>
</msup>
</math>

Y en el navegador aparece de la siguiente forma:

4 2

Para escribir la potencia utilizamos la etiqueta <msup> de MathML. Dentro de esta etiqueta la base se indica con <mi> y el exponente con <mn>.

Teorema de Pitágoras

Con lo que sabemos actualmente de MathML podemos escribir el teorema de Pitágoras en MathML de la siguiente forma:

<math>
<msup>
<mi>c1</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>c2</mi>
<mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mi>h</mi>
<mn>2</mn>
</msup>
</math>

Y en el navegador se leería de la siguiente forma:

c1 2 + c2 2 = h 2

Escribir raices cuadradas con MathML

En MathML se pueden escribir casi todo tipo de operaciones matemáticas. Desde operaciones más básicas hasta operaciones con matrices, ecuaciones y matemática analítica.

En este artículo veremos la escritura de raíces con MathML.

Raíces cuadradas

Para escribir una raíz cuadrada, se utiliza el elemento <msqrt>. Este elemento envuelve el contenido cuya raíz cuadrada deseas expresar. Por ejemplo, el siguiente código en MathML representa la operación raíz cuadrada de 9:

<math>
<msqrt>
<mn>9</mn>
</msqrt>
</math>

Y en el navegador se mostraría de la siguiente forma:

9

Raíces con otro índice

pero si queremos escribir una raíz con un índice distinto debemos utilizar la etiqueta <mroot>. Esta etiqueta tiene dos elementos: el radicando y el índice. Por ejemplo la raíz cúbica de 27 se escribiría en MathML de la siguiente forma:

<math>
<mroot>
<mn>27</mn>
<mn>3</mn>
</mroot>
</math>

Y en el navegador web se leería de la siguiente forma:

27 3

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.