Contenidos teóricos
y conceptos clave de
programación
Nivel básico (explorador) Módulo 3
Módulo 3: integración de python con
desarrollo web
Desarrollo Web con Flask
Introducción a Flask
Flask es un microframework de Python para el desarrollo
web. Es ligero, flexible y escalable, ideal para proyectos
de cualquier tamaño. Para comenzar, instala Flask con pip
install Flask y crea un archivo principal como [Link].
Ejemplo básico de Flask:
from flask import Flask
app = Flask(__name__)
@[Link](‘/’)
def home():
return '¡Hola, Mundo!'
if __name__ == ‘__main__’:
[Link](debug=True)
Estructura: Crea un archivo [Link] y directorios templates/
y static/ para HTML y recursos estáticos.
Ejecuta la App: Usa python [Link] y visita [Link]
en el navegador.
1
2. Creación de una Aplicación Web Simple con Flask
Rutas y Vistas
Las rutas definen las URL accesibles y las vistas manejan
solicitudes a esas URLs. Usa decoradores @[Link]() para
definir rutas y funciones para manejar la lógica.
Manejo de Rutas y Métodos HTTP:
from flask import Flask, request
app = Flask(__name__)
@[Link](‘/’)
def home():
return ‘Página de inicio’
@[Link](‘/login’, methods=[‘GET’, ‘POST’])
def login():
if [Link] == ‘POST’:
usuario = [Link][‘username’]
return f’Bienvenido, {usuario}’
return ‘’’
<form method=”post”>
Usuario: <input type=”text” name=”username”><-
br>
<input type=”submit” value=”Enviar”>
</form>
‘’’
if __name__ == ‘__main__’:
[Link](debug=True)
GET y POST: GET recupera datos, POST envía datos al
servidor.
2
Formulario HTML: Usar formularios para capturar y
procesar datos del usuario.
Aplicación Simple:
Crea una aplicación que toma el nombre del usuario y
devuelve un mensaje de bienvenida.
from flask import Flask, request
app = Flask(__name__)
@[Link](‘/’, methods=[‘GET’, ‘POST’])
def welcome():
if [Link] == ‘POST’:
nombre = [Link][‘nombre’]
return f’¡Bienvenido, {nombre}!’
return ‘’’
<form method=”post”>
Nombre: <input type=”text” name=”nombre”><-
br>
<input type=”submit” value=”Enviar”>
</form>
‘’’
if __name__ == ‘__main__’:
[Link](debug=True)
3. Renderización de Plantillas HTML con Flask
Flask utiliza una herramienta llamada Jinja2 para renderizar
plantillas dinámicas, permitiendo incorporar lógica y datos
en HTML.
3
Uso de Plantillas:
Estructura típica del proyecto con plantillas:
my_flask_app/
├── [Link]
└── templates/
├── [Link]
└── [Link]
Ejemplo de Renderización:
from flask import Flask, render_template
app = Flask(__name__)
@[Link](‘/’)
def home():
usuario = “Ana”
return render_template(‘[Link]’, usuario=usuario)
if __name__ == ‘__main__’:
[Link](debug=True)
Plantilla ([Link]):
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8”>
<title>Página de Inicio</title>
</head>
<body>
<h1>¡Bienvenido, {{ usuario }}!</h1>
<p>Este es un ejemplo de una página renderizada con
Flask.</p>
</body>
</html>
4
Contexto y Variables: Pasa datos a las plantillas y utiliza {{
variable }} para insertar valores.
Condicionales y Bucles: Usa {% if ... %} y {% for ... %} para
lógica en plantillas.
Contexto de Datos:
Pasa listas, diccionarios y más a las plantillas:
@[Link](‘/’)
def home():
frutas = [‘Manzana’, ‘Banana’, ‘Naranja’]
return render_template(‘[Link]’, frutas=frutas)
Plantilla ([Link]):
<ul>
{% for fruta in frutas %}
<li>{{ fruta }}</li>
{% endfor %}
</ul>
4. Envío de Datos de Python a HTML
Flask facilita el envío de datos complejos como listas y
diccionarios a las plantillas, permitiendo crear interfaces
dinámicas.
5
Pasar Datos Complejos:
@[Link](‘/’)
def home():
perfil_usuario = {
‘nombre’: ‘Carlos’,
‘email’: ‘carlos@[Link]’,
‘edad’: 30
}
return render_template(‘[Link]’, perfil=perfil_
usuario)
Plantilla ([Link]):
<h1>Perfil de {{ [Link] }}</h1>
<p>Email: {{ [Link] }}</p>
<p>Edad: {{ [Link] }}</p>
5. Visualización de Datos en la Web
Integrar gráficos en aplicaciones Flask permite visualizar
datos de manera clara y efectiva. Usa bibliotecas como
Matplotlib y Seaborn para gráficos en Python, y [Link] o
[Link] para gráficos interactivos en JavaScript.
Incorporación de Gráficos con Python
Uso de Matplotlib:
Matplotlib es una biblioteca potente para crear gráficos
en Python. Puedes integrar estos gráficos en aplicaciones
Flask utilizando buffers y codificación base64.
6
import [Link] as plt
import io
import base64
from flask import Flask, render_template
app = Flask(__name__)
@[Link](‘/’)
def home():
# Datos para el gráfico
x = [1, 2, 3, 4, 5]
y = [10, 14, 16, 20, 25]
# Creación del gráfico
[Link](figsize=(6, 4))
[Link](x, y, marker=’o’, linestyle=’-’, color=’b’)
[Link](‘Crecimiento de Ventas’)
[Link](‘Mes’)
[Link](‘Ventas’)
# Guardar gráfico en un buffer
buf = [Link]()
[Link](buf, format=’png’)
[Link](0)
# Codificar imagen en base64
imagen_base64 = base64.b64encode([Link]()).
decode(‘utf8’)
return render_template(‘[Link]’, imagen=ima-
gen_base64)
if __name__ == ‘__main__’:
[Link](debug=True)
7
Plantilla ([Link]):
<h1>Gráfico de Crecimiento de Ventas</h1>
<img src=”data:image/png;base64,{{ imagen }}”
alt=”Gráfico de Ventas”>
BIBLIOGRAFÍA
● Grinberg, M. (2018). Flask Web Development: Developing
Web Applications with Python (2nd ed.). O’Reilly Media.
● Dwyer, G. (2021). Flask by Example: Unleash the full
potential of Flask to create Web Applications. Packt
Publishing.
● Murray, S. (2017). Interactive Data Visualization for the
Web: An Introduction to Designing with D3 (2nd ed.). O’Reilly
Media.
● Nelli, F. (2018). Python Data Analytics: With Pandas,
NumPy, and Matplotlib (2nd ed.). Apress.
● Meeks, E. (2017). [Link] in Action: Data Visualization with
JavaScript (2nd ed.). Manning Publications.
● Zhu, N. Q. (2018). Data Visualization with D3 4.x Cookbook
(2nd ed.). Packt Publishing.
● Swaroop, C. H. (2013). A Byte of Python. Self-published.
[Link]
8
9