Categoría: Programación

Artículos, cursos y ejemplos de programación

Escribiendo Derivadas e Integrales con MathML

Publicado el

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

Introducción a Markdown

Publicado el

Markdown es un lenguaje de marcado ligero diseñado para facilitar la escritura de texto formateado de manera sencilla y sin distracciones. Su propósito principal es convertir texto plano en HTML sin necesidad de aprender complejas etiquetas o reglas de maquetado.
Este formato de texto se ha convertido en una herramienta esencial para desarrolladores, escritores y creadores de contenido por su simplicidad, versatilidad y beneficios, especialmente en términos de accesibilidad y fácil mantenimiento.

Markdown fue creado por Aaron Swartz y John Gruber en 2004 con la intención de que los documentos fueran fáciles de escribir y leer en su forma original, y a la vez, que pudieran convertirse fácilmente en HTML para la web. Su estructura se basa en texto plano, lo que significa que cualquier persona puede leer y escribir Markdown con un editor de texto básico.
Markdown es ampliamente utilizado en blogs, documentación técnica, ficheros README de proyectos en GitHub, foros y mensajes en algunas redes sociales.

Dentro de las ventajas de Markdown se destacan su simplicidad y su portabilidad.
Markdown utiliza una sintaxis mínima que es fácil de aprender. No necesitas herramientas sofisticadas ni experiencia previa para comenzar a escribir.
Los archivos Markdown son simplemente texto plano, lo que significa que son extremadamente ligeros y se pueden abrir en cualquier dispositivo o sistema operativo.
Además de todo esto se ha de indicar que Markdown se puede convertir fácilmente a formatos más ricos como HTML, PDF, DOCX o incluso ePub, usando herramientas automáticas.

Cómo Escribir con Markdown

La sintaxis de Markdown es extremadamente sencilla, principalmente se utilizan algunos caracteres especiales al comienzo de línea o para indicar el comienzo y la finalización de un bloque marcado semánticamente.

Texto en Negrita y Cursiva

Para marcar en negrita un texto se usa doble asterisco.
Para marcar en  cursiva, se usa un solo asterisco.

Ejemplos:

**Este texto está en negrita**
*Este texto está en cursiva*

Encabezados

Los encabezados se crean utilizando el símbolo # al comienzo de una línea. El número de # define el nivel del encabezado (de 1 a 6).

Ejemplo:

# Encabezado de nivel 1
## Encabezado de nivel 2
### Encabezado de nivel 3

Enlaces

Los enlaces se crean utilizando corchetes para el texto y paréntesis para la URL.

Ejemplo:

Visita mi blog [Programar a ciegas](https://programaraciegas.net) para leer más artículos como este.

Listas

Se pueden crear listas ordenadas o desordenadas utilizando un marcador al comienzo de línea.

• Listas no ordenadas: Utiliza guiones (-) o asteriscos (*).
• Listas ordenadas: Usa números seguidos de un punto (1., 2., etc.).

Ejemplos:

- Elemento 1 de una lista desordenada
- Elemento 2 de una lista desordenada

1. Primer elemento de una lista ordenada
2. Segundo elemento de una lista ordenada

Imágenes

El formato que se utiliza para mostrar imágenes es similar al formato empleado para los enlaces, pero con un signo de exclamación al principio. Ejemplo:

![Texto alternativo que describe la imagen](ruta/a/la/imagen.jpg)

Bloques de Código

Para marcar bloques de código, se utiliza tres acentos graves («`) antes y después del código.

Ejemplo:

```
func saludo() {
print("¡Hola, Markdown!")
}


```

Markdown admite otras marcas para resaltar citas, maquetar datos tabulares y otros elementos semánticos.

La importancia de los encabezados para la accesibilidad web y móvil

Publicado el

Cuando navegamos por una interfaz web o una aplicación móvil, probablemente no somos conscientes de la importancia que tienen los encabezados. Para la mayoría de los usuarios estas marcas semánticas sólo se aprecian por un cambio de tamaño del texto o por un resaltado de su aspecto visual pero para personas con discapacidad visual o cognitiva resultan imprescindibles para comprender mejor la interfaz que están navegando.

¿Qué son los encabezados?

Los encabezados son elementos que organizan y estructuran el contenido de una página o pantalla. En HTML, estos se definen mediante marcas semánticas o etiquetas como <h1>, <h2>, <h3>, y así sucesivamente hasta <h6>. En interfaces móviles, los encabezados suelen representarse como texto destacado o títulos que dividen secciones de contenido y utilizan atributos de la API de accesibilidad para que esos bloques de texto sean identificados como encabezados semánticos.

Para los usuarios sin discapacidad visual, los encabezados facilitan una comprensión visual rápida del contenido y su jerarquía. en cambio, para los usuarios que dependen de tecnologías de asistencia como lectores de pantalla, los encabezados son mucho más que un simple formato: son un mapa estructural que permite moverse rápidamente por la página o la app.

Por ejemplo, una persona ciega que usa un lector de pantalla puede saltar entre los encabezados para encontrar secciones específicas sin tener que escuchar todo el contenido desde el principio. Esto es especialmente útil en páginas con mucho texto o pantallas móviles con varias secciones de información.
Para las personas con discapacidad cognitiva esta estructura de encabezados les permite asimilar y comprender cómo se ha estructurado la información y los elementos de navegación en la interfaz.

Encabezados en WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) incluyen un criterio específico que aborda la correcta implementación de los encabezados. Este criterio está relacionado con el principio de Perceptible y se resume así:

Criterio 2.4.10 – Encabezados de sección (Section Headings)

Este criterio establece que, si el contenido está dividido en secciones, cada una debe contar con un encabezado descriptivo que refleje su propósito o tema. Esto no solo mejora la navegación, sino también la comprensión del contenido. Puedes leer más detalles sobre el criterio 2.4.10 en la página oficial del W3C.

Para cumplir con este criterio debemos asegurarnos de:
• Usar encabezados de forma jerárquica y lógica (por ejemplo, <h1> para el título principal, <h2> para subtítulos, etc.).
• Los encabezados deben ser descriptivos. Un encabezado como “Servicios” es claro, pero uno como “Más información” es ambiguo.
• Evitar saltos innecesarios en los niveles de encabezado (por ejemplo, pasar de un <h1> directamente a un <h3> sin un <h2> intermedio).

Buenas prácticas

A la hora de estructurar los contenidos de una interfaz web o de una pantalla de una aplicación es aconsejable seguir los siguientes puntos:
1. Respetar una estructura jerárquica

El encabezado principal de la página o pantalla debe ser un <h1>. A partir de ahí, usa <h2> para las subsecciones principales, <h3> para las subsecciones de estas, y así sucesivamente. Esto crea un flujo lógico que las tecnologías de asistencia pueden interpretar fácilmente.

Ejemplo en HTML:

<h1>Recetas saludables</h1>
<h2>Desayunos</h2>
<h3>Zumos y batidos saludables</h3>
<h3>Tostadas con aguacate</h3>
<h2>Cenas</h2>
<h3>Ensaladas ligeras</h3>
<h3>Sopas nutritivas</h3>

2. Prohibido usar encabezados para aplicar un estilo visual a un texto

Es común usar etiquetas de encabezado simplemente porque hacen el texto más grande o más llamativo. Esto es un error, ya que confunde a los usuarios de lectores de pantalla. Si es necesario aplicar un estilo concreto a un texto grande sin que sea un encabezado, es aconsejable usar estilos CSS en lugar de etiquetas como <h1>.

3. Los encabezados deben ser claros y concisos

Un buen encabezado es breve y refleja con precisión el contenido de su sección. Por ejemplo, “Configuración avanzada” es mejor que “Detalles sobre las configuraciones avanzadas”.

Cómo comprobar la accesibilidad de los encabezados

Muchas herramientas automatizadas para la detección de barreras de accesibilidad identifican la mayoría de problemas relacionados con el criterio WCAG 2.4.10. Tanto Wave como Lighthouse o Axe pueden detectar si falta algún encabezado o si se han utilizado de manera incorrecta.
En cualquier caso es muy recomendable realizar una verificación manual utilizando un lector de pantallas como NVDA, VoiceOver, TalkBack o JAWS. Todos estos lectores de pantalla incorporan funciones para navegar por encabezados o mostrar una lista con los encabezados detectados.

Escribir fracciones con MathML

Publicado el

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.

Crear aventuras conversacionales con Inform7

Publicado el

Las aventuras conversacionales, también conocidas como juegos de texto interactivo, son un género de videojuegos que se originó en los primeros días de la informática. En estos juegos, los jugadores interactúan con un mundo virtual utilizando comandos escritos en lenguaje natural, lo que les permite explorar entornos, resolver acertijos y avanzar en la narrativa. Uno de los motores más populares para crear este tipo de experiencias es Inform, y en su versión más reciente, Inform7, se ha consolidado como una herramienta poderosa y accesible para desarrolladores, escritores y entusiastas del diseño de juegos narrativos.

Historia de Inform

El origen de Inform se remonta a principios de los años 90, cuando Graham Nelson creó el primer compilador de Inform como una herramienta para escribir juegos compatibles con el formato Z-machine, el mismo que fue usado para juegos clásicos de la compañía Infocom, como Zork. Este formato fue un estándar para las aventuras conversacionales, permitiendo que los juegos se ejecutaran en una amplia variedad de plataformas.

En 2006, Nelson lanzó Inform7, una nueva versión del motor, diseñada desde cero para hacer la creación de aventuras conversacionales más intuitiva y accesible. Mientras que las versiones anteriores requerían un conocimiento profundo de programación, Inform7 utiliza un lenguaje de diseño de juegos casi natural, lo que permite que los creadores describan mundos y reglas en inglés, similar a la forma en que escribirían una novela.

Características principales de Inform7

Inform7 se distingue por su enfoque basado en el lenguaje natural, lo que facilita la creación de mundos interactivos con reglas definidas sin necesidad de una programación complicada. Algunas de las características más destacadas de la herramienta son:

• Lenguaje natural: Los juegos se escriben en una sintaxis que se asemeja mucho al inglés común. Esto permite que los desarrolladores, incluso aquellos sin experiencia en programación, puedan diseñar escenarios, personajes y eventos de una manera intuitiva. Por ejemplo, una instrucción como «The kitchen is a room. The player is in the kitchen.» es perfectamente válida y crea un espaio jugable en el que el jugador puede interactuar.
• Un potente sistema de reglas: A pesar de su apariencia sencilla, Inform7 esconde un potente sistema de reglas y lógica que permite la creación de interacciones complejas. Se pueden definir comportamientos para objetos y personajes, establecer condiciones y consecuencias, y gestionar interacciones dinámicas entre elementos del juego.

• Soporte multiplataforma: Los juegos creados con Inform7 se exportan en formatos como Glulx o Z-machine, lo que permite que se ejecuten en una variedad de intérpretes y plataformas, desde ordenadores de escritorio hasta dispositivos móviles.

• Facilidad para la narrativa: Con un fuerte enfoque en la narrativa, Inform7 es ideal para escritores que desean explorar la creación de historias interactivas, permitiéndoles centrarse en la trama y los personajes en lugar de en los detalles técnicos de la programación.

Soporte para aventuras en español

Aunque Inform7 está diseñado principalmente para trabajar con el idioma inglés, existen extensiones para incluir soporte para la creación de aventuras conversacionales en español y otros idiomas. Esto ha sido posible gracias a la comunidad de desarrolladores y traductores que han trabajado en extensiones y adaptaciones que permiten que el motor entienda y genere texto en español.

La comunidad que se ha formado alrededor de Inform ha contribuido a expandir el uso de la plataforma en múltiples lenguas, enriqueciendo el panorama de aventuras conversacionales a nivel global.

¿Cómo jugar a una aventura creada con Inform7?

Para poder jugar a una aventura conversacional creada con Inform7 necesitamos un intérprete compatible con Inform como pueden ser Glulx o Frotz.

Estos intérpretes suelen utilizar la consola del sistema o la Terminal para mostrar el texto de las aventuras aunque hay versiones de GGlulx y Frotz para Windows, iPhone, Android o página Web.

Instalación del entorno de desarrollo

Actualmente Inform7 se distribuye como un IDE o entorno de desarrollo. Esta aplicación permite la creación y depuración de una aventura conversacional incluyendo la posibilidad de utilizar extensiones creadas por otros creadores o crear nuestras propias extensiones. Gracias a las extensiones Inform7 puede crecer para mostrar gráficos, reproducir sonidos o incluir otros idiomas como el español.

Puedes obtener la última versión de Inform7 desde la página del proyecto Inform7. La versión actual es la 10.1.2. Se distribuyen versiones de Inform7 para Mac, Inform7 para Windows e Inform7 para distintas versiones de Linux.

El IDE viene por defecto con soporte para idioma inglés. es necesario obtener las extensiones de Inform7 para español. En el momento de escribir este artículo la versión actual es la extensión para español R10.1.

Dentro del fichero comprimido en zip para las extensiones en español se incluye un fichero readme con instrucciones para instalar las extensiones de forma local.

Un simple ejemplo

Veamos un simple ejemplo de aventura en Inform7 utilizando las extensiones en español.

Abre el IDE de Inform7 y crea un proyecto de nueva aventura llamado Un simple ejemplo.

Cuando creas el proyecto en la ruta donde se guarda el proyecto encontrarás una carpeta llamada Un simple ejemplo.materials y el fichero Un simple ejemplo.inform.

Dentro de la carpeta Un simple ejemplo.materials debes copiar las carpetas Extensions e Inter que estaban dentro del zip de las extensiones de Inform para español. Con esto ya tenemos nuestro proyecto preparado para codificar la aventura.

En la zona de código del proyecto encontramos este código inicial:

"Un simple ejemplo" by Jonathan Chacón Barbero

Example Location is a room.

Borra ese código y escribe el siguiente en su lugar:

"Un simple ejemplo" by Jonathan Chacón Barbero (in spanish)

La sala is a room.
The description is "Estás en una sala donde no hay nada pero existe el potencial para que exista todo. Tu imaginación es el poder creador de la realidad que te rodea.".

Analizando el código

Analizando el código de este primer ejemplo encontramos lo siguiente:

• La primera línea es donde se declara el título y autor de la aventura. Además indicamos que utilizaremos la extensión para español de Inform7.

• Creamos el elemento La sala indicando que es una habitación.

• Indicamos que su descripción es un texto que describirá la sala cuando nuestro personaje esté en ella.

Si pulsamos el botón de Go para probar nuestra aventura nuestro personaje jugador aparecerá en la habitación y podremos realizar acciones como saltar, cantar o más cosas que se nos ocurran. Pero nuestra sala está vacía. Añadir un objeto a nuestra sala es tan sencillo como escribir el siguiente texto en el código de nuestra aventura:
El grano de arena is in la sala.
The description is «Un grano de arena que puede ser el comienzo de todo.».

Con esto hemos añadido un grano de arena a nuestra sala. Volvemos a usar la opción Go y podremos probar la aventura. Podemos coger el grano y aparecerá en nuestro inventario y podemos soltarlo para que aparezca de nuevo en la sala.

Compartiendo nuestra creación

Una vez terminada nuestra aventura podemos crear el fichero para que sea compartido con otras personas para que puedan jugar a la aventura de texto que hemos creado. Para ello debemos buscar en el menú Release la opción Release … que creará el fichero Un simple ejemplo.gblorb dentro de la carpeta Un simple ejemplo.materials/Release. Ese fichero gblorb es el que debemos compartir para que otras personas puedan jugar a nuestra aventura. El fichero se crea utilizando el formato Interactive fiction file format que es compatible con intérpretes como Glulxe o Frotz.

Ahora sólo queda ampliar la sala para crear un mundo más extenso donde nuestra imaginación y nuestra paciencia para aprender Inform7 serán el límite de nuestra aventura.

Escribir potencias con MathML

Publicado el

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