Brython: Python en páginas web

En esta lección se trata la biblioteca Brython.

La biblioteca Brython

Los navegadores sólo pueden ejecutar programas escritos en JavaScript. Si en una página web se incluye un programa Python, el navegador no puede ejecutarlo directamente.

Pero existe una biblioteca JavaScript llamada Brython que traduce código Python a JavaScript, lo que permite incluir programas de Python en una página web.

Brython es un proyecto de software libre disponible en http://brython.info.

Las principales limitaciones de Brython son:

Para utilizar Brython en una página, la página debe incluir como mínimo tres elementos, que se comentan en el siguiente ejemplo.

Enlace externo

Ejemplo de programa Brython 1

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

<body onload="brython()">
  <p>Esta página es HTML 5 válido.</p>
</body>
</html>
Esta página es HTML 5 válido

Puede ver la explicación de los elementos resaltados con un borde utilizando los iconos de avance y retroceso situados abajo a la derecha.

Los tres elementos son imprescindibles para poder ejecutar programas de Python mediante la biblioteca Brython en una página web.

Siguiente

Ejemplo de programa Brython 1 - Paso 1

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

<body onload="brython()">
  <p>Esta página es HTML 5 válido.</p>
</body>
</html>
Esta página es HTML 5 válido

El primer elemento <script> enlaza con la biblioteca Brython. En este caso se utiliza la biblioteca Brython disponible en Internet, pero podría ser una copia local.

Anterior Siguiente

Ejemplo de programa Brython 1 - Paso 2

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

<body onload="brython()">
  <p>Esta página es HTML 5 válido.</p>
</body>
</html>
Esta página es HTML 5 válido

El segundo elemento <script> contendría el programa de Python que se ejecutaría cada vez que se cargara la página. En este caso no hay ningún programa.

Anterior Siguiente

Ejemplo de programa Brython 1 - Paso 3

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

<body onload="brython()">
  <p>Esta página es HTML 5 válido.</p>
</body>
</html>
Esta página es HTML 5 válido

En el elemento <body> se debe añadir el atributo onload con el valor brython(). El atributo onload contiene una instrucción JavaScript que se ejecuta al cargar la página. En este caso la instrucción brython() es una instrucción de la biblioteca Brython que hace que se ejecute el programa Python.

Anterior

Añadir texto en un elemento HTML

Brython permite añadir texto en un elemento HTML de una página web, como muestra el siguiente ejemplo.

Enlace externo

Añadir texto en un elemento HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir texto en un elemento HTML. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document

document["destino"] <= "¡Hola, mundo!"
  </script>
</head>

<body onload="brython()">
  <p id="destino"></p>
</body>
</html>
¡Hola, mundo!

Puede ver la explicación de los elementos resaltados con un borde y la ejecución del programa Python utilizando los iconos de avance y retroceso situados abajo a la derecha.

Siguiente

Añadir texto en un elemento HTML - Paso 1

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir texto en un elemento HTML. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document

document["destino"] <= "¡Hola, mundo!"
  </script>
</head>

<body onload="brython()">
  <p id="destino"></p>
</body>
</html>

Al cargar la página, el atributo onload ordena al navegador que ejecute la instrucción brython() de la biblioteca Brython, que a su vez ejecuta el programa Python incluido en la página.

Anterior Siguiente

Añadir texto en un elemento HTML - Paso 2

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir texto en un elemento HTML. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document

document["destino"] <= "¡Hola, mundo!"
  </script>
</head>

<body onload="brython()">
  <p id="destino"></p>
</body>
</html>

La primera instrucción del programa Python importa el objeto document del módulo browser de Brython. Este objeto contiene una representación del documento y permite acceder a sus elementos.

Anterior Siguiente

Añadir texto en un elemento HTML - Paso 3

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir texto en un elemento HTML. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document

document["destino"] <= "¡Hola, mundo!"
  </script>
</head>

<body onload="brython()">
  <p id="destino"></p>
</body>
</html>

La segunda instrucción del programa Python añade el texto "¡Hola, mundo!" a un elemento HTML.

  • La expresión document[destino] hace referencia al elemento de la página cuyo atributo id es igual a destino (en vez de destino podría cualquier otro nombre válido). En este caso, el elemento es un párrafo <p>
  • El operador <= es propio de Brython y lo que hace es añadir un nodo en el árbol del documento (añade al elemento de la izquierda lo que se escriba a la derecha). En este caso, se añade texto, concretamente la cadena "¡Hola, mundo!"

Anterior Siguiente

Añadir texto en un elemento HTML - Paso 4

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir texto en un elemento HTML. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document

document["destino"] <= "¡Hola, mundo!"
  </script>
</head>

<body onload="brython()">
  <p id="destino"></p>
</body>
</html>
¡Hola, mundo!

Finalmente, el texto "¡Hola, mundo!" añadido al párrafo se visualiza en el navegador.

Anterior

Añadir elementos en una imagen SVG

Brython permite añadir elementos en una imagen SVG, como muestra el siguiente ejemplo.

Enlace externo

Añadir elementos en una imagen SVG

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir elementos en una imagen SVG. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

document["imagen"] <= svg.line(x1=10, y1=10, x2=190, y2=190, stroke="green", stroke_width=3)
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="200" height="200" viewBox="0 0 200 200"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Puede ver la explicación de los elementos resaltados con un borde y la ejecución del programa Python utilizando los iconos de avance y retroceso situados abajo a la derecha.

Siguiente

Añadir elementos en una imagen SVG - Paso 1

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir elementos en una imagen SVG. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

document["imagen"] <= svg.line(x1=10, y1=10, x2=190, y2=190, stroke="green", stroke_width=3)
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="200" height="200" viewBox="0 0 200 200"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Al cargar la página, el atributo onload ordena al navegador que ejecute la instrucción brython() de la biblioteca Brython, que a su vez ejecuta el programa Python incluido en la página.

Anterior Siguiente

Añadir elementos en una imagen SVG - Paso 2

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir elementos en una imagen SVG. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

document["imagen"] <= svg.line(x1=10, y1=10, x2=190, y2=190, stroke="green", stroke_width=3)
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="200" height="200" viewBox="0 0 200 200"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La primera instrucción del programa Python importa el objeto document del módulo browser de Brython. Este objeto contiene una representación del documento y permite acceder a sus elementos.

Anterior Siguiente

Añadir elementos en una imagen SVG - Paso 3

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir elementos en una imagen SVG. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

document["imagen"] <= svg.line(x1=10, y1=10, x2=190, y2=190, stroke="green", stroke_width=3)
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="200" height="200" viewBox="0 0 200 200"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La segunda instrucción del programa Python importa el objeto svg del módulo browser.svg de Brython. Este objeto permite crear elementos svg.

Anterior Siguiente

Añadir elementos en una imagen SVG - Paso 4

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir elementos en una imagen SVG. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

document["imagen"] <= svg.line(x1=10, y1=10, x2=190, y2=190, stroke="green", stroke_width=3)
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="200" height="200" viewBox="0 0 200 200"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La segunda instrucción del programa Python añade una línea verde en la imagen SVG.

  • La expresión document[imagen] hace referencia al elemento de la página cuyo atributo id es igual a imagen (en vez de imagen podría cualquier otro nombre válido). En este caso, el elemento es una imagen <svg>
  • El operador <= es propio de Brython y lo que hace es añadir un nodo en el árbol del documento (añade al elemento de la izquierda lo que se escriba a la derecha). En este caso, se añade un elemento <line> al elemento <svg>

Anterior Siguiente

Añadir elementos en una imagen SVG - Paso 5

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir elementos en una imagen SVG. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

document["imagen"] <= svg.line(x1=10, y1=10, x2=190, y2=190, stroke="green", stroke_width=3)
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="200" height="200" viewBox="0 0 200 200"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Finalmente, el elemento <line x1="10" y1="10" x2="190" y2="190" stroke="green" stroke-width="3" /> añadido a la imagen <svg> se visualiza en el navegador.

Anterior

El programa del ejemplo anterior sólo añade un elemento SVG, pero se podrían añadir tantos elementos como se quisiera, añadiendo las instrucciones correspondientes en el programa.

Las instrucciones que generan los diferentes elementos SVG incluyen los argumentos correspondientes a cada elemento SVG:

Depurar programas

Encontrar y corregir los errores en programas de Brython es un poco más difícil que en un programa de Python ya que a los errores habituales (errores de sintaxis en Python y algoritmos incorrectos) se añaden otros (errores de sintaxis al utilizar la biblioteca Brython y errores al manipular los elementos de la página web). La dificultad reside en que el navegador no produce ningún mensaje de error: simplemente el programa no se ejecuta y el navegador muestra lo que puede.

Aunque los programas que se proponen en los ejercicios son relativamente sencillos, se recomienda si es posible probar los programas cada vez que se cambia algo, de manera que sea más fácil encontrar el origen del problema si este se produce.

Los errores más habituales son:

Para encontrar el origen del problema conviene utilizar la consola web de Firefox o Chrome, que al menos nos indica la línea en la que se ha cometido un error de sintaxis.

El programa de ejemplo siguiente contiene un error de sintaxis que impide su ejecución, por lo que el navegador mostrá simplemente la imagen SVG vacía:.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Añadir elementos en una imagen SVG. Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

document["imagen"] <= svg.circle(cx=100, cy=100, r=100 stroke="red", stroke_width=2, fill="pink")
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="200" height="200" viewBox="0 0 200 200"
    style="background-color: lightgray" id="imagen">
  </svg>
</body>
</html>
Enlace externo

Las herramientas de desarrollo incluidas en los navegadores actuales ayudan a localizar el origen de los errores, especialmente cuando se trata de errores de sintaxis.

En ambos casos, el navegador nos indica la línea problemática, aunque somos nostros los que debemos darnos cuenta del origen del problema, en este caso que falta una coma entre los argumentos r y stroke.

Aunque lo más cómo es utilizar las herramientas para desarrolladores de los navegadores, también se puede copiar el programa Brython (sólo el programa de Python, no el resto de la página) en una ventana de IDLE y ejecutarlo. Aunque el programa no se podrá ejecutar ya que la biblioteca brython no está disponible, IDLE sí que señala los errores de sintaxis con algo más de claridad que los herramientas para desarrolladores de los navegadores.