21nov
21

Alojamiento Wordpress con Soporte

Si tienes un blog académico o científico es posible que alguna vez te hayas preguntado como incluir ecuaciones matemáticas en tu blog sin tener que recurrir a las socorridas capturas de pantalla desde otras aplicaciones. Pues estás de suerte porque hay varias posibilidades para hacerlo, y las veremos todas.

Ecuaciones como Imágenes

Como podrás imaginar, puedes usar otros programas de edición de ecuaciones para producirlas, y luego guardarlas como imágenes. El resultado puede ser bueno pero si tienes muchas ecuaciones que incluir será bastante tedioso y cargará enormemente tu página.

Podrías usar texto para crear matemáticas, y esto suele ser lo que hace mas gente cuando no son necesarias fracciones u otras funciones avanzadas. También puedes usar HTML para escribir ecuaciones pero los resultados suelen ser malos y poco legibles.

MathML

Aún estamos esperando a que la mayoría de los navegadores soporten MathML, lo que permitiría que las ecuaciones matemáticas se mostrasen correctamente usando una serie de tags en el código, parecido a como haces con HTML. Sin embargo parece que no hay mucha prisa para implantar este estándar así que encontrarás muchos navegadores que no son capaces de mostar MathML correctamente o no lo mostrarán de ningún modo. Hasta que esto no se solucione es difícil que la comunidad científica adopte MathML como una solución adecuada, una pena.

Plugin LaTeX

LaTeX es una elección bastante habitual en la comunidad científica. Utiliza código para mostrar ecuaciones, y el documento final es un postscript o pdf, que genera documentos bastante buenos, de buen aspecto y presentación. En la web, las ecuaciones LaTeX pueden convertirse a imágenes .GIF.

Para WordPress tenemos un plugin que utiliza LaTeX para mostar el código como imágenes GIF dentro de tus posts. Sería una solución genial, el fin del problema, pero hay un gran escollo, y es que para usar el plugin debes poder instalar LaTeX en tu servidor, lo que suele quedar relegado a soluciones de servidores dedicados o virtuales, no accesibles para la mayoría de los usuarios.

CSS para Escribir Ecuaciones

Si no te satisfacen las anteriores soluciones, o no puedes instalar LaTeX en tu blog, puedes conseguirlo usando Hojas de Estilo en Cascada (CSS) para mostrar ecuaciones. Los resultados son bastante buenos, considerando que las hojas de estilo no se diseñaron con este propósito. El caso es que funciona, y lo que tienes que hacer es alterar el tamaño individual, posición, márgenes y bordes de los distintos elementos de texto a utilizar.

La mayoría de los navegadores soportan el uso de entidades HTML para símbolos matemáticos, y en eso se basa esta técnica. Un caracter difícil de encontrar es ħ, que se usa extensamente en física cuántica, y su código en “entidad HTML” es ħ Si quieres conocer mas entidades HTML para matemáticas u otros símbolos puedes encontrarlas en este enlace. El código que usaremos en el CSS sería este:

#eqn {
border: none;
margin: 0;
font-size: 1em;
}

.eqnnum {
float: right;
font-weight: bold;
}

.overline {
text-decoration: overline;
}

.unit-vector {
font-weight: bold;
}

.hat {
font-weight: bold;
font-size: 0px;
line-height: 0px;
display: none;
visibility: hidden;
}

sub {
vertical-align: middle
}

.big {
font-size: 2.2em;
font-family: ‘Times New Roman’, Serif; vertical-align: -0.25em;
margin-right: 6px;
padding-top 5px;
}

.bigbracket {
font-size: 2.0em;
vertical-align: -0.1em;
padding: 0;
font-family: ‘Times New Roman’, Serif; margin: 0;padding-right: 8px;
}

.normal {
vertical-align: middle;
}

.upperbound {
margin:0;
padding:0;
margin-left: -0.4em;
vertical-align: 1.1em;
font-size: 0.7em;
}

.upperbound2 {
margin:0;
padding:0;
margin-left: -1.6em;
vertical-align: 1.1em;
font-size: 0.7em;
}

.lowerbound {
margin:0;
padding:0;
margin-left: -0.9em;
vertical-align: -0.8em;
font-size: 0.7em;
}

.uppersum {
margin: 0;
padding:0;
margin-left: -1.8em;
vertical-align: 1.3em;
font-size: 0.7em;
}

.lowersum {
margin: 0;
padding:0;
margin-left: -1.6em;
vertical-align: -1.4em;
font-size: 0.7em;
}

.fraction {
text-align: right;
}

.numerator {
vertical-align: 0.7em;
border-bottom: solid 1px #333;
}

.denominator {
vertical-align: -0.7em;
margin-left: -1.4em;
}

.underlim {
margin: 0;
padding: 0;
margin-left: -3.5em;
vertical-align: -1.0em;
font-size: 0.7em;
}

.newtonsD {
margin:0;
padding: 0;
margin-left: -1em;
vertical-align: 0.8em;
margin-right: 0.4em;
}

.over {
margin: 0;
vertical-align: 0.9em;
margin-left: -0.8em;
font-size: 0.7em;
}

Para crear ecuaciones utilizaremos la tag span con la clase deseada. Por ejemplo, para crear la ecuación …

usamos este código:

<span class=“big”>Σ</span>
<sup class=“uppersum”>∞</sup>
<sub class=“lowersum”>k=0</sub>
<i>f</i>(<i>x</i><sub class=“normal”>k</sub>)Δ<i>x</i> =
<span class=“big”>∫</span>
<sup class=“upperbound”><i>b</i></sup><sub class=“lowerbound”><i>a</i></sub>
<i>f</i>(<i>x</i>) <i>dx</i>

Y para usar, por ejemplo, diferenciales como este …

usaríamos este otro código:

<span class=“numerator”><i>d </i></span>
<span class=“denominator”><i>dx</i></span>
(<i>U</i>/<i>V</i>) = [<i>U</i>
<span class="numerator"><i>dV</i></span>
<span class="denominator"><i>dx</i></span> - <i>V</i>
<span class="numerator"><i>dU</i></span>
<span class="denominator"><i>dx</i></span> ]/ <i>V</i><sup>2</sup>

Por supuesto, puede que quieras (o debas) alterar algunos de los valores, sobre todo dependiendo del tamaño de la tipografía. Este método, no obstante, es complicado cuando tienes que mostrar largas fracciones o matrices, pero para la mayoría de las situaciones funciona estupendamente y es un modo accesible de conseguir incluir ecuaciones en tu blog.


Valora este artículo para mejorar la calidad del blog ...

MaloPobreNo está malMe gustaExcelente (sin valoración aún)
Loading...Loading...
509da0fb3c4722d7e740d3f254d693d8
Share

Anúnciese aquí »


  • Pingback: Bitacoras.com

  • ejner69

    Suena interesante…

    Habrá que probarlos…

    :D

  • http://www.anuncla.com anuncios clasificado

    estas cosas que se pueden hacer con wordpress no dejan de impresionarme, la verdad es que resulta atractivo para los matematicos

  • Frank Pereiro

    Yo uso un plugin llamado Math Publisher que es muy sencillo de usar y solo hay que escribir las fórmulas como si la escribes en una hoja de cálculo.

    No obstante, este tutorial está excelente.

    Sin duda que voy a usar el método que propones aquí con CSS, aunque hay que tener una chuleta para las etiquetas que hay que usar.

    Este tutorial es uno de los mejores que he leído en mucho tiempo. Gracias por compartirlo con todos.

  • http://carrero.es David Carrero

    Increible no conocía esta posibilidad, tendre que probarlo :))

  • http://ayudaelectronica.com/blog Ayuda Electronica

    Grandioso post!!! me estoy volviendo "boludo" haciendo las ecuaciones en Word y dsp subiendo las imagenes a los post.

    Gracias

    Saludos! ralcesar

  • ignacio

    no creo que llegue a necesitarlas, pero nunca esta de mas para tenerlo como referencia =)

  • Frank Pereiro

    Lástima que las comillas hay que arreglarlas. De todos modos, sigo haciendo pruebas.

  • Pingback: Post recomendados de la semana

  • http://isb1009.es/ Isb1009

    También podéis probar el PhpMathPublisher, que utiliza las librerías GD del PHP para generar las fórmulas en formato PNG y tiene dos plugins para WP:

    wpmathpub

    WpMathPublisher

    Saludos ;)

  • antonio 2 b de se

    lo q en realidad esperaba era realizar ejercicios de operaciones algebraicas

  • antonio 2 b de se

    no encuentro la pagina

    y voy a reprobar

  • http://www.comparativadebancos.com Antonio Romero

    Buenas

    yo utilizo esta página…
    http://thornahawk.unitedti.org/equationeditor/equ

    Obtengo la fórmula como imagen y luego la inserto en el post…

  • Daniel

    Hola

    Muy interesante, solo que para alumnos de secundaria posiblemente sea difícil diseñar la expresión.

    Es por eso que busco ayuda, por si alguien sabe de algún plugin que me permita escribir en una pizarra la expresión matemática y que el dibujo se inserte directamente en el comentario. Vamos, la idea es que los muchachos de secundaria o bachillerato discutan fórmulas, soluciones, despejes, etc. como si estuvieran escribiendo en el pizarrón.

    Muchas gracias de antemano.

  • Pingback: Escribir ecuaciones matematicas en posts de wordpress

  • Diego

    Buenas opciones, las voy a probar. ¡Saludos!

  • http://mathematicasclub.blogspot.com/ matematico

    Les cuento que la informacion de este post me cayo de perlas, puestoy iniciando un blog de matematica basica, y ando averiguando como escribir ecuaciones en mis post.

  • Kanoyo

    A mi no me funciona usando css nisiquiera pegando el codigo que aparece aqui, donde se encuentra el plugin para hacer lo en latex no hay nada que farsa

  • Yarayarayara

    en que pagina puedo encontrar un solucionador de ecuaciones

  • Diego Martín

    Muy util

  • francisco alerto

    mmm esta aburrido las matematicas estan re mamonas