Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Borrador
Esta página no está completa.

Python es un lenguaje interpretado de programación, ampliamente utilizado, con propositos generales. Está disponible en una amplia gama de plataformas, incluyendo Windows, Linux y Mac OS X. Python le ayuda a trabajar de forma rápida y se integra de forma eficiente en los sistemas, animando a los programadores a realizar una programación sin código repetitivo (preparado).

En esta serie de tutoriales, usted aprenderá a utilizar los bloques de construcción básicos de Python 3. Después de conseguir un gusto por el idioma, aprenderá cómo construir Shed, una aplicación web sencilla para realizar un seguimiento de un programa de conferencias

Aprender conceptos básicos de Python

Llevar Python a la Web

  • Configurando el escenario
  • Simple aplicación web
  • Conceptos básicos de bases de datos
  • Python lado del cliente
    • Accediendo a DOM
    • Usando librerias de JavaScript
    • Compartiendo codigo entre cliente y servidor

Python lado del cliente

Hay varias formas de ejecutar Python en un navegador.

  1. Python puede ser precompilado a JavaScript. En ese caso solo el codigo JavaScript es cargado con la pagina, a menos que requiera depuracion en la fuente.
  2. Python puede ser ejecutado por un interprete escrito en JavaScript que corra en el navegador. En ese caso el codigo fuente de Python cargaran con la pagina.
  3. Python bytecode puede ser ejecutado por una máquina virtual que reside en el navegador. En ese caso, el bytecode de Python y la máquina virtual se cargan con la página.

Los siguientes ejemplos usan el primer enfoque y una herramienta llamada Transcrypt.

Accediento a DOM

El acceso a DOM se realiza de la misma manera que en programacion JavaScript. Un ejemplo de una aplicacion simple hola.py.

<script src="__javascript__/hola.js"></script>
<h2>Hola demo</h2>
    
<p>
<div id = "saludar">...</div>
<button onclick="hola.sistemaSolar.saludar()">Clickea me varias veces!</button>
    
<p>
<div id = "explicar">...</div>
<button onclick="hola.sistemaSolar.explicar()">Clickea me varias veces!</button>


from itertools import chain
    
class sistemaSolar:
    planetas = [list (chain (planeta, (index + 1,))) for index, planeta in enumerate ((
        ('Mercurio', 'caliente', 2240),
        ('Venus', 'sulphurous', 6052),
        ('Tierra', 'fertil', 6378),
        ('Marte', 'rojizo', 3397),
        ('Jupiter', 'tormeta', 71492),
        ('Saturno', 'ringed', 60268),
        ('Urano', 'frio', 25559),
        ('Neptuno', 'muy frio', 24766)
    ))]
        
    lines = (
        '{} es un {} planeta',
        'El radio de {} es {} km',
        '{} es un planeta nr. {} contando desde el sol'
    )
        
    def __init__ (self):
        self.lineIndex = 0
        
    def saludar(self):
        self.planeta = self.planetas [int (Math.random () * len (self.planetas))]
        document.getElementById('saludar').innerHTML = 'Hola {}'.format(self.planeta [0])
        self.explicar()
            
    def explicar(self):
        document.getElementById('explicar').innerHTML = (
        self.lines[self.lineIndex].format(self.planeta[0], self.planeta[self.lineIndex + 1])
        )
        self.lineIndex = (self.lineIndex + 1) % 3
            
sistemaSolar = sistemaSolar()

Usando librerías de JavaScript

Las librerías de JavaScript pueden ser utilizadas desde el código fuente de Python o encapsularlas en un modulo de Python para luego importarlo en la aplicación.  A continuación se muestra un ejemplo de uso de la biblioteca D3.js en una aplicación d3js_demo.py:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
<script src="__javascript__/d3js_demo.js"; charset="UTF-8"></script>
class Spawn:
    def __init__ (self, width, height):
        self.width, self.height, self.spacing = self.fill = width, height, 100, d3.scale.category20 ()
    
        self.svg = d3.select ('body'
        ) .append ('svg'
        ) .attr ('width', self.width
        ) .attr ('height', self.height
        ) .on ('mousemove', self.mousemove
        ) .on ('mousedown', self.mousedown)
            
        self.svg.append ('rect'
        ) .attr ('width', self.width
        ) .attr ('height', self.height)
    
        self.cursor = self.svg.append ('circle'
        ) .attr ('r', self.spacing
        ) .attr ('transform', 'translate ({}, {})' .format (self.width / 2, self.height / 2)
        ) .attr ('class', 'cursor')
    
        self.force = d3.layout.force (
        ) .size ([self.width, self.height]
        ) .nodes ([{}]
        ) .linkDistance (self.spacing
        ) .charge (-1000
        ) .on ('tick', self.tick)       
    
        self.nodes, self.links, self.node, self.link = self.force.nodes (), self.force.links (), self.svg.selectAll ('.node'), self.svg.selectAll ('.link')
            
        self.restart ()
            
    def mousemove (self):
        self.cursor.attr ('transform', 'translate (' + d3.mouse (self.svg.node ()) + ')')
    
    def mousedown (self):
        def pushLink (target):
            x, y = target.x - node.x, target.y - node.y
            if Math.sqrt (x * x + y * y) < self.spacing:
                spawn.links.push ({'source': node, 'target': target})
                    
        point = d3.mouse (self.svg.node ())
        node = {'x': point [0], 'y': point [1]}
        self.nodes.push (node)
        self.nodes.forEach (pushLink)
        self.restart ()     
                
    def tick (self):
        self.link.attr ('x1', lambda d: d.source.x
        ) .attr ('y1', lambda d: d.source.y
        ) .attr ('x2', lambda d: d.target.x
        ) .attr ('y2', lambda d: d.target.y)
              
        self.node.attr ('cx', lambda d: d.x
        ) .attr ('cy', lambda d: d.y)
    
    def restart (self):
        self.link = self.link.data (self.links)
            
        self.link.enter (
        ) .insert ('line', '.node'
        ) .attr('class', 'link')
    
        self.node = self.node.data (self.nodes)
                
        self.node.enter (
        ) .insert ('circle', '.cursor'
        ) .attr ('class', 'node'
        ) .attr ('r', 7
        ) .call (self.force.drag)
    
        self.force.start ()
    
spawn = Spawn (window.innerWidth, window.innerHeight)

Compartiendo código entre cliente y servidor

Es posible compartir los módulos de Python entre el cliente y el servidor o la aplicación de escritorio. Para que esto funcione, los módulos compartidos deben ser módulos puros de Python, no usar ningún código C directa o indirectamente.

Un ejemplo de código que ambos se ejecutan tanto en un navegador como en una aplicación de escritorio es el siguiente:

from turtle import *
from random import *

speed (0)

colors = ('gray', 'green', 'red', 'white', 'blue', 'yellow')
delta = 8
threshold = 100
color ('black', 'black')

def maybe (bias = None):
    return choice ([False, True, bias, bias] if bias != None else [False, True])    

def between (a, b):
    return a + (0.2 + 0.3 * random ()) * (b - a)

recentColors = ['black', 'black']
def originalColor ():
    global recentColors
    while True:
        result = choice (colors)
        if result == 'white' or not result in recentColors:
            recentColors = [result, recentColors [0]]
            print (result, end = ' ')
            return result
    
def rect (xMin, yMin, xMax, yMax):
    for aColor in ('black', originalColor ()):
        color (aColor, aColor)
        
        up ()
        goto (xMin, yMin)
        down ()
        
        begin_fill ()
        goto (xMax, yMin)
        goto (xMax, yMax)
        goto (xMin, yMax)
        goto (xMin, yMin)
        end_fill ()
        
        xMin += delta
        yMin += delta
        xMax -= delta
        yMax -= delta
    
def draw (xMin = -250, yMin = -300, xMax = 250, yMax = 300):
    if xMax - xMin > threshold and yMax - yMin > threshold:
        if maybe (xMax - xMin > yMax - yMin):
            xMid = between (xMin, xMax)
            if maybe ():
                draw (xMin, yMin, xMid, yMax)
                rect (xMid, yMin, xMax, yMax)
            else:
                rect (xMin, yMin, xMid, yMax)
                draw (xMid, yMin, xMax, yMax)
        else:
            yMid = between (yMin, yMax)
            if maybe ():
                draw (xMin, yMin, xMax, yMid)
                rect (xMin, yMid, xMax, yMax)
            else:
                rect (xMin, yMin, xMax, yMid)
                draw (xMin, yMid, xMax, yMax)
    else:
        rect (xMin, yMin, xMax, yMax)
        ontimer (lambda: (print (), clear (), draw ()), 2000)
draw ()
done ()     

 

Tenga en cuenta que en el escritorio los módulos random y turtle usarán código C, mientras que en el navegador se cargarán versiones puras de Python de estos módulos. Esto sucede de manera transparente.

 

Artícu.los antiguos

Etiquetas y colaboradores del documento

Colaboradores en esta página: jasongonzalez, Sckullbock, Ferrmolina
Última actualización por: jasongonzalez,