From 43625bb1ef1cd8fc76b0fefdae4e002989942dd9 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Wed, 12 May 2021 13:22:31 -0400 Subject: fix external image in files/es/web/mathml/authoring/index.html (#843) --- files/es/web/mathml/authoring/index.html | 190 ++++++++++++++++----------- files/es/web/mathml/authoring/openoffice.png | Bin 0 -> 12489 bytes 2 files changed, 114 insertions(+), 76 deletions(-) create mode 100644 files/es/web/mathml/authoring/openoffice.png (limited to 'files/es/web/mathml') diff --git a/files/es/web/mathml/authoring/index.html b/files/es/web/mathml/authoring/index.html index 774c910cea..f9c30ff92c 100644 --- a/files/es/web/mathml/authoring/index.html +++ b/files/es/web/mathml/authoring/index.html @@ -5,9 +5,9 @@ translation_of: Web/MathML/Authoring ---

Este artículo explica como redactar funciones matemáticas utilizando el lenguaje MathML. Al igual que HTML, MathML puede describirse con etiquetas y atributos. HTML puede volverse interminable cuando tu documento contiene estructuras avanzadas como listas o tablas pero afortunadamente existen varios generadores, desde simple notaciones, editores WYSIWYG y otros Sistemas de Administración de Contenido (CMS) utilizados para la creación de páginas web.

-

Las notaciones Matemáticas son aún más complejas con estructuras que contienen fracciones, raíces cuadradas o matrices que seguramente requerirán sus propias etiquetas. Como consecuencia, las buenas herramientas de redacción de MathML son importantes y más adelante describimos algunas opciones. En particular, el équipo MathML de Mozilla ha creado TeXZilla, un convertor de LaTeX a MathML compatible con Unicode, para ser utilizado en muchos scenari descrito ahí. Desde luego, la lista no es de ninguna manera definitiva y estás invitado a revisar la Lista de Software MathML de W3C donde puedes encontrar diferentes herramientas.

+

Las notaciones Matemáticas son aún más complejas con estructuras que contienen fracciones, raíces cuadradas o matrices que seguramente requerirán sus propias etiquetas. Como consecuencia, las buenas herramientas de redacción de MathML son importantes y más adelante describimos algunas opciones. En particular, el équipo MathML de Mozilla ha creado TeXZilla, un convertor de LaTeX a MathML compatible con Unicode, para ser utilizado en muchos scenari descrito ahí. Desde luego, la lista no es de ninguna manera definitiva y estás invitado a revisar la Lista de Software MathML de W3C donde puedes encontrar diferentes herramientas.

-

Hay que señalar que por diseño, MathML está bien integrado en HTML5 y particularmente puedes utilizar las características Web comunes como CSS, DOM, Javascript o SVG. Esto está fuera del ámbito de este artículo pero cualquiera con conocimientos básicos de lenguajes Web será capaz de combinar fácilmente estas características con MathML. Revisa nuestros demos y referencias de MathML para más detalles.

+

Hay que señalar que por diseño, MathML está bien integrado en HTML5 y particularmente puedes utilizar las características Web comunes como CSS, DOM, Javascript o SVG. Esto está fuera del ámbito de este artículo pero cualquiera con conocimientos básicos de lenguajes Web será capaz de combinar fácilmente estas características con MathML. Revisa nuestros demos y referencias de MathML para más detalles.

Fundamentos

@@ -36,7 +36,7 @@ translation_of: Web/MathML/Authoring </body> </html> -

Content MathML no esta soportado por el navegador. Es recomendable convertir tu content MathML markup en Presentation MathML  antes de publicarlo, por ejemplo con la ayuda de la hoja de calculo  ctop.xsl  . Las herramientas mencionadas en esta pagina generan Presentation MathML.

+

Content MathML no esta soportado por el navegador. Es recomendable convertir tu content MathML markup en Presentation MathML  antes de publicarlo, por ejemplo con la ayuda de la hoja de calculo  ctop.xsl  . Las herramientas mencionadas en esta pagina generan Presentation MathML.

 

@@ -44,28 +44,28 @@ translation_of: Web/MathML/Authoring

Desafortunadamente, algunos navegadores no son capaces  de  renderizar ecuaciones MathML o tienen un soporte limitado. Por lo tanto necesitará  usar  MathML polyfill para proveer el renderizado. Si necesita solo construcciones matematicas básicas tales como las utilizadas  en esta wiki de MDN entonces una pequeña hoja de cálculo mathml.css  podria  ser suficiente. Para usarlo, solo inserta una linea en el header de tu documento:

-
<script src="http://fred-wang.github.io/mathml.css/mspace.js"></script>
+
<script src="http://fred-wang.github.io/mathml.css/mspace.js"></script>
-

If you need more complex constructions, you might instead consider using the heavier MathJax library as a MathML polyfill:

+

If you need more complex constructions, you might instead consider using the heavier MathJax library as a MathML polyfill:

-
<script src="http://fred-wang.github.io/mathjax.js/mpadded.js"></script>
+
<script src="http://fred-wang.github.io/mathjax.js/mpadded.js"></script>
-

Note that these two scripts perform feature detection of the mspace or mpadded elements (see the browser compatibility table on these pages). If you don't want to use this link to GitHub but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of MathML support. For example the following function verifies the MathML support by testing the mspace element (you may replace mspace with mpadded):

+

Note that these two scripts perform feature detection of the mspace or mpadded elements (see the browser compatibility table on these pages). If you don't want to use this link to GitHub but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of MathML support. For example the following function verifies the MathML support by testing the mspace element (you may replace mspace with mpadded):

-
 function hasMathMLSupport() {
-  var div = document.createElement("div"), box;
-  div.innerHTML = "<math><mspace height='23px' width='77px'/></math>";
-  document.body.appendChild(div);
-  box = div.firstChild.firstChild.getBoundingClientRect();
-  document.body.removeChild(div);
-  return Math.abs(box.height - 23) <= 1  && Math.abs(box.width - 77) <= 1;
-}
+
 function hasMathMLSupport() {
+  var div = document.createElement("div"), box;
+  div.innerHTML = "<math><mspace height='23px' width='77px'/></math>";
+  document.body.appendChild(div);
+  box = div.firstChild.firstChild.getBoundingClientRect();
+  document.body.removeChild(div);
+  return Math.abs(box.height - 23) <= 1  && Math.abs(box.width - 77) <= 1;
+}

Alternatively, the following UA string sniffing will allow to detect the rendering engines with native MathML support (Gecko and WebKit). Note that UA string sniffing is not the most reliable method and might break from version to version:

-
var ua = navigator.userAgent;
-var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1;
-var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') === -1;
+
var ua = navigator.userAgent;
+var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1;
+var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') === -1;

 

@@ -73,14 +73,14 @@ translation_of: Web/MathML/Authoring

Note: browsers can only use a limited set of mathematical fonts to draw stretchy MathML operators. However, implementation of the OpenType MATH table is in progress in Gecko & WebKit. This will provide a generic support for mathematical fonts and simplify the settings described in this section.

-

To get a good mathematical rendering in browsers, some MathML fonts are required. It's a good idea to provide to your visitors a link to the MDN page that explains how to install MathML fonts. Alternatively, you can just make them available as Web fonts. You can get these fonts from the MathML-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command:

+

To get a good mathematical rendering in browsers, some MathML fonts are required. It's a good idea to provide to your visitors a link to the MDN page that explains how to install MathML fonts. Alternatively, you can just make them available as Web fonts. You can get these fonts from the MathML-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command:

-
wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -O mathml-fonts.zip; \
-unzip mathml-fonts.zip -d mathml-fonts
+
wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -O mathml-fonts.zip; \
+unzip mathml-fonts.zip -d mathml-fonts

Then copy the mathml-fonts/resource/ directory somewhere on your Web site and ensure that the woff files are served with the correct MIME type. Finally, include the mathml-fonts/resource/mathml.css style sheet in your Web pages, for example by adding the following rule to the default style sheet of your Web site:

-
@import url('/path/to/resource/mathml.css');
+
@import url('/path/to/resource/mathml.css');

You then need to modify the font-family on the <math> elements and, for Gecko, the on ::-moz-math-stretchy pseudo element too. For example to use STIX fonts:

@@ -93,7 +93,7 @@ unzip mathml-fonts.zip -d mathml-fonts } -

Try the MathML torture test to compare the rendering of various fonts and the CSS rules to select them.

+

Try the MathML torture test to compare the rendering of various fonts and the CSS rules to select them.

Utilizar MathML en documentos XML (XHTML, EPUB, etc.)

@@ -179,32 +179,32 @@ unzip mathml-fonts.zip -d mathml-fonts

and get it automatically converted into MathML. This is still a work-in-progress, but could be improved in the future thanks to Web Components and shadow DOM. Alternatively, you can use the more traditional Javascript parsing of expressions at load time as all the other tools in this section do.

-

One simple client-side conversion tools is ASCIIMathML. Just download the ASCIIMathML.js script and copy it to your Web site. Then on your Web pages, add a <script> tag to load ASCIIMathML and the mathematical expressions delimited by ` (grave accent) will be automatically parsed and converted to MathML:

+

One simple client-side conversion tools is ASCIIMathML. Just download the ASCIIMathML.js script and copy it to your Web site. Then on your Web pages, add a <script> tag to load ASCIIMathML and the mathematical expressions delimited by ` (grave accent) will be automatically parsed and converted to MathML:

-
<html>
-<head>
+
<html>
+<head>
 ...
-<script type="text/javascript" src="ASCIIMathML.js"></script>
+<script type="text/javascript" src="ASCIIMathML.js"></script>
 ...
-</head>
-<body>
+</head>
+<body>
 ...
-<p>blah blah `x^2 + y^2 = r^2` blah ...
-...

+<p>blah blah `x^2 + y^2 = r^2` blah ...
+...
-

LaTeXMathML is a similar script that allows to parse more LaTeX commands. The installation is similar: copy LaTeXMathML.js and LaTeXMathML.standardarticle.css, add links in the header of your document and the LaTeX content of your Web page marked by the "LaTeX" class will be automatically parsed and converted to HTML+MathML:

+

LaTeXMathML is a similar script that allows to parse more LaTeX commands. The installation is similar: copy LaTeXMathML.js and LaTeXMathML.standardarticle.css, add links in the header of your document and the LaTeX content of your Web page marked by the "LaTeX" class will be automatically parsed and converted to HTML+MathML:

-
<head>
+
<head>
 ...
-<script type="text/javascript" src="LaTeXMathML.js"></script>
-<link rel="stylesheet" type="text/css" href="LaTeXMathML.standardarticle.css" />
+<script type="text/javascript" src="LaTeXMathML.js"></script>
+<link rel="stylesheet" type="text/css" href="LaTeXMathML.standardarticle.css" />
 ...
-</head>
+</head>
 
-<body>
+<body>
 ...
 
-<div class="LaTeX">
+<div class="LaTeX">
 \documentclass[12pt]{article}
 
 \begin{document}
@@ -218,29 +218,29 @@ This is a sample LaTeXML document.
 
 \section{First Section}
 
-  $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$
+  $ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $
 
 \end{document}
-</div>
-...

-
-
jqMath is another script to parse a simple LaTeX-like syntax but which also accepts non-ASCII characters like  √{∑↙{n=1}↖{+∞} 6/n^2} = π  to write      ∑  n = 1   + ∞    6  n 2     = π  . The installation is similar: download and copy the relevant Javascript and CSS files on your Web site and reference them in your page header (see the COPY-ME.html file from the zip archive for an example). One of the advantage of jqMath over the previous scripts is that it will automatically add some simple CSS rules to do the mathematical layout and make the formulas readable on browsers with limited MathML support.

-
-
Another way to work around the lack of MathML support in some browsers is to use MathJax. However, note that you may find conflicts and synchronization issues between MathJax and the Javascript libraries previously mentioned. So if you really want to use MathJax as a MathML polyfill, you'd better use its own LaTeX/ASCIIMath parsers too. Note that on the one hand MathJax has better parsing and rendering support but on the other hand it is much bigger, more complex and slower than the previous Javascript libraries. Fortunately, you can use MathJax's CDN so that you don't need to install it on your Web server. Also, the slowest part of MathJax is currently its HTML-CSS / SVG output modes so we recommend to use the Native MathML output for Gecko-based browsers. Hence a typical configuration to use the AMS-LaTeX input is:

-
-
...
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Config({
-        MMLorHTML: { prefer: { Firefox: "MML" } }
-      });
-    </script>
-    <script type="text/javascript"
-            src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
-   </script>
-  </head>
-  <body>
+</div>
+...

+
+
jqMath is another script to parse a simple LaTeX-like syntax but which also accepts non-ASCII characters like  √{∑↙{n=1}↖{+∞} 6/n^2} = π  to write      ∑  n = 1   + ∞    6  n 2     = π  . The installation is similar: download and copy the relevant Javascript and CSS files on your Web site and reference them in your page header (see the COPY-ME.html file from the zip archive for an example). One of the advantage of jqMath over the previous scripts is that it will automatically add some simple CSS rules to do the mathematical layout and make the formulas readable on browsers with limited MathML support.

+
+
Another way to work around the lack of MathML support in some browsers is to use MathJax. However, note that you may find conflicts and synchronization issues between MathJax and the Javascript libraries previously mentioned. So if you really want to use MathJax as a MathML polyfill, you'd better use its own LaTeX/ASCIIMath parsers too. Note that on the one hand MathJax has better parsing and rendering support but on the other hand it is much bigger, more complex and slower than the previous Javascript libraries. Fortunately, you can use MathJax's CDN so that you don't need to install it on your Web server. Also, the slowest part of MathJax is currently its HTML-CSS / SVG output modes so we recommend to use the Native MathML output for Gecko-based browsers. Hence a typical configuration to use the AMS-LaTeX input is:

+
+
...
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({
+        MMLorHTML: { prefer: { Firefox: "MML" } }
+      });
+    </script>
+    <script type="text/javascript"
+            src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+   </script>
+  </head>
+  <body>
    \[ \tau = \frac{x}{y} + \sqrt{3} \]
-...

+...

Note that the dollar delimiters are not used by default. To use the ASCIIMathML input instead, just replace TeX-AMS-MML_HTMLorMML by AM-MML_HTMLorMML.  MathJax has many other features, see the MathJax documentation for further details.

@@ -267,17 +267,52 @@ This is a sample LaTeXML document.

TeXZilla can be used from the command line and will essentially have the same support as itex2MML described below. However, the stream filter behavior is not implemented yet.

-

If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like itex2MML or Blahtex. The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it:

+

If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like itex2MML or Blahtex. The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it:

-
wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
+
wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
 tar -xzf itexToMML.tar.gz; \
 cd itex2MML/itex-src;
 make
-sudo make install

+sudo make install

Now suppose that you have a HTML page with TeX fragments delimited by dollars:

-
input.html
+
input.html
+
+...
+</head>
+<body>
+  <p>$\sqrt{a^2-3c}input.html
+
+...
+</head>
+<body>
+  <p>$\sqrt{a^2-3c}input.html
+
+...
+</head>
+<body>
+  <p>$\sqrt{a^2-3c}input.html
+
+...
+</head>
+<body>
+  <p>$\sqrt{a^2-3c}$</p>
+  <p>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$</p>
+</body>
+</html>lt;/p>
+  <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p>
+</body>
+</html>lt;/p>
+  <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p>
+</body>
+</html>lt;/p>
+  <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} input.html
+
+...
+</head>
+<body>
+  <p>$\sqrt{a^2-3c}input.html
 
 ...
 </head>
@@ -285,7 +320,12 @@ sudo make install

   <p>$\sqrt{a^2-3c}$</p>
   <p>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$</p>
 </body>
-</html>
+</html>lt;/p> + <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p> +</body> +</html>lt;/p> +</body> +</html>

Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do

@@ -297,13 +337,13 @@ sudo make install mzlatex foo.tex # Windows platform -

LaTeXML is another tool that is still actively developed but the release version is rather old, so you'd better install the development version. In particular, this version can generate HTML5 and EPUB documents. Here is the command to execute in order to create a foo.html Web page from the foo.tex LaTeX source:

+

LaTeXML is another tool that is still actively developed but the release version is rather old, so you'd better install the development version. In particular, this version can generate HTML5 and EPUB documents. Here is the command to execute in order to create a foo.html Web page from the foo.tex LaTeX source:

  latexml --dest foo.xml foo.tex
   latexmlpost --dest foo.html --format=html5 foo.xml
-

If you want to have a MathJax fallback for non-Gecko browsers, copy the Javascript lines given above into a mathjax.js file and use the --javascript parameter to tell LaTeXML to include that file:

+

If you want to have a MathJax fallback for non-Gecko browsers, copy the Javascript lines given above into a mathjax.js file and use the --javascript parameter to tell LaTeXML to include that file:

  latexmlpost --dest foo.html --format=html5 --javascript=mathjax.js foo.xml
@@ -333,7 +373,7 @@ sudo make install -

TeXZilla can be used as a Web server in order to perform server-side LaTeX-to-MathML conversion. LaTeXML can also be used as a deamon to run server-side. Mathoid is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion.

+

TeXZilla can be used as a Web server in order to perform server-side LaTeX-to-MathML conversion. LaTeXML can also be used as a deamon to run server-side. Mathoid is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion.

Instiki is a Wiki that integrates itex2MML to do server-side conversion. In future versions, MediaWiki will support server-side conversion too.

@@ -341,25 +381,23 @@ sudo make install

Input Box

-

TeXZilla has several interfaces, including a CKEditor plugin used on MDN, an online demo, a Firefox add-on or a FirefoxOS Webapp. Abiword contains a small equation editor, based on itex2MML. Bluegriffon is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.

+

TeXZilla has several interfaces, including a CKEditor plugin used on MDN, an online demo, a Firefox add-on or a FirefoxOS Webapp. Abiword contains a small equation editor, based on itex2MML. Bluegriffon is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.

-

BlueGriffon

+

BlueGriffon

WYSIYWG Editors

-

Firemath is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.

+

Firemath is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.

-

OpenOffice and LibreOffice have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called content.xml.

+

OpenOffice and LibreOffice have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called content.xml.

-

Open Office Math

+

Open Office Math

-

Amaya is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as a+2 is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.

+

Amaya is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as a+2 is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.

Optical Character & Handwriting Recognition

-

Inftyreader is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the Windows Math Input Panel

- -

Windows Math Input Panel

+

Inftyreader is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the Windows Math Input Panel

or the online converter Web Equation.

@@ -370,7 +408,7 @@ sudo make install
  • Author(s): Frédéric Wang
  • Other Contributors: Florian Scholz
  • Last Updated Date: April 2, 2011
    • -
  • Copyright Information: Portions of this content are © 2010 by individual mozilla.org contributors; content available under a Creative Commons license | Details.
    • +
  • Copyright Information: Portions of this content are © 2010 by individual mozilla.org contributors; content available under a Creative Commons license | Details.
    • diff --git a/files/es/web/mathml/authoring/openoffice.png b/files/es/web/mathml/authoring/openoffice.png new file mode 100644 index 0000000000..4876bc83df Binary files /dev/null and b/files/es/web/mathml/authoring/openoffice.png differ -- cgit v1.2.3-54-g00ecf