Como Crear Notaciones Matemáticas en HTML 5

Nube Colectiva

hace 4 años

Demo Github

Sabias que podemos escribir notaciones matemáticas (Formulas, Operaciones, etc.) en HTML 5, esto es útil para las páginas que comparten contenido sobre Matemática, Física y similares, incluso les podemos aplicar estilos CSS, veamos en este Post como escribir notaciones matemáticas y otros detalles, vamos con ello.

Antes de continuar con este Post te invito a escuchar el Podcast: “Dominio del trabajo con Varios Lenguajes de Programación”:

Spotify	SoundCloud

Bien ahora continuemos con el Post: Como Crear Notaciones Matemáticas en HTML 5.

Vamos hablar un poco sobre MathML y luego pasamos con la creación de notaciones matemáticas.

Que es MathML ?

MathML es un lenguaje de marcado basado en XML que permite crear notaciones matemáticas que pueden ser interpretadas por los navegadores modernos como Google Chrome, Firefox, etc.

La primera versión de MathML fue lanzada en el año 1998 y básicamente permite representar visualmente ecuaciones simplificadas, las etiquetas MathML debe usarse dentro de las etiquetas <math></math>


<div class="minotacionmatematica">

    <math>
        <!-- Acá van otras etiquetas para crear la notación matemática --> 
    </math>

</div>

<math>

</math>

</div>

MathML no es una calculadora para realizar operaciones o resolver ecuaciones complejas, es solo una forma de mostrar la ecuación.

Math no es un lenguaje de programación, es un lenguaje de marcado de matemáticas.

Creando Notaciones Matemáticas

Vamos a comenzar creando una notación matemática sencilla y luego pasamos a otras más complejas.


<div class="minotacionmatematica1">

   <math>
      <mrow>
         <mrow>
            <msup>
               <mi>a</mi>
               <mn>3</mn>
            </msup>
            <mo>+</mo>
            <msup>
               <mi>b</mi>
               <mn>4</mn>
            </msup>
         </mrow>
         <mo>=</mo>
         <msup>
            <mi>c</mi>
            <mn>5</mn>
         </msup>
      </mrow>
   </math>

</div>

<math>

<mrow>

<msup>

</msup>

<msup>

</msup>

</mrow>

<msup>

</msup>

</mrow>

</math>

</div>

En el código puedes ver que dentro de las etiquetas <math></math> hay otras etiquetas que pasaré a describirlas a continuación:

mrow

Sirve para agrupar subexpresiones que pueden contener operadores con sus respectivos operandos como <mi> y <mn>,

El elemento mrow se muestra como una fila horizontal que contiene sus respectivos argumentos.

msup

Este elemento permite adjuntar un superíndice a una expresión, suele agrupar los elementos <mi> y <mn>.

Indica que el contenido debe mostrarse como un identificador como nombres de funciones, variables, etc. También puede albergar texto arbitrario para marcar términos.

Este elemento representa un literal numérico que suele ser una secuencia de números con un posible separador como un punto o coma, asimismo puede contener un texto que represente una cantidad numérica como por ejemplo cuatro.

Representa un operador matemático (+, -, =, etc), también se puede incluir operadores como paréntesis, separadores como punto y coma o barras de valor absoluto.

Bien si abro la página en el navegador obtengo lo siguiente:

Bien ahora vamos a crear un ecuación un poco más compleja, creo el siguiente código:


<div class="minotacionmatematica2">
   <math>
      <mfrac bevelled="true">
         <mfrac>
            <msup>
               <mi>3x</mi>
               <mn>2</mn>
            </msup>
            <msup>
               <mi>5y</mi>
               <mn>2</mn>
            </msup>
         </mfrac>
         <mfrac>
            <msup>
               <mi>b</mi>
               <mn>3</mn>
            </msup>
            <msup>
               <mi>c</mi>
               <mn>3</mn>
            </msup>
         </mfrac>
      </mfrac>
   </math>
</div>

<math>

<mfrac>

<msup>

</msup>

<msup>

</msup>

</mfrac>

<mfrac>

<msup>

</msup>

<msup>

</msup>

</mfrac>

</math>

</div>

En este segundo ejemplo he usado etiquetas que explique más arriba, pero ahora estoy utilizando una nueva etiqueta que explicare a continuación.

mfrac

Este elemento se usa para mostrar fracciones.

Entonce si abro mi navegador y actualizo la página, debo ver lo siguiente:

Ahora crearé un ejemplo con radicales, escribo el siguiente código:


<div class="minotacionmatematica3"> 

   <math>
      <math>
         <menclose notation="radical">
            <mrow>
               <mi> a </mi>
               <mo> + </mo>
               <mi> b </mi>
            </mrow>
         </menclose>
         <mi>=</mi>
         <menclose notation="radical">
            <mi>c</mi>
         </menclose>
      </math>
   </math>

</div>

<math>

<mrow>

</mrow>

</menclose>

</menclose>

</math>

</div>

En este tercer ejemplo he usado algunas etiquetas que son familiares, pero he agregado otras etiquetas más, las cuales pasaré a describir a continuación.

memclose

Con este elemento podemos representar el contenido que está dentro de una notación de cierres especificada por el atributo de notación, por ejemplo <menclose atributo=”valor”></menclose>

En el código le he añadido el atributo notation con el valor radical notation=”radical” para indicarle que quiero mostrar un radical.

Bueno si voy al navegador y actualizo la página debo ver lo siguiente:

Podemos crear otras notaciones matemáticas que deseemos, es cuestión de entender como trabajan estas etiquetas.

Compatibilidad con Navegadores

Por el momento esta funcionalidad para poder crear Notaciones Matemáticas solo esta disponible en el navegador Firefox. Pero existen varias herramientas para poder usar notaciones matemáticas en otros navegadores, una de estas herramientas es MathJax, para usar esta herramienta debemos instanciarla antes de cerrar la etiqueta </body>


       <!-- Librería MathJax --> 
       <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> 
  	   <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> 

    </body> 

</html>

</body>

</html>

Luego agrego mi notación matemática, esta herramienta utiliza una forma propia de mostrar expresiones matemáticas, algo parecido a expresiones regulares.


<div class="minotacionmatematica4"> 
    <p>
        \[x = {-x \pm \sqrt{a^3-5yz} \over 3a}\]
    </p>		

</div>

<p>

\[x = {-x \pm \sqrt{a^3-5yz} \over 3a}\]

</p>

</div>

Y obtengo la siguiente notación matemática:

Parece un poco complicado crear notaciones matemáticas, pero no imposible de aprender, solo debes ponerle empeño y manos a la obra. Si deseas conocer otras etiquetas para crear notaciones matemáticas, puedes visitar este enlace.

Conclusión

En este Post hemos aprendido a crear notaciones matemáticas, desde un ejemplo sencillo hasta uno más complejo, asimismo hemos explicado para que sirven las etiquetas que he usado para crear las notaciones matemáticas.

Nota

Los pasos mencionadas y el código utilizado en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a HTML 5 y MathML.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.