Configurando un sitio estático con flask

Continuando con la serie de artículos sobre el microframework de desarrollo web flask, ahora se mostrará como crear un sitio estático.

Este artículo se basa en un artículo en inglés llamado Introduction to Flask, Part 1 - Setting up a static site.

Se usará el mismo archivo utilizado en los artículos anteriores (app.py), en este caso simplemente se agregará el decorador y la función que se va a usar que será para llamar una página de bienvenida.

Aparte del archivo app.py se necesita crear dos directorios, uno llamado templates el cual contendrá la plantilla html y el otro se llamará static que contendrá archivos estáticos como archivos css y archivos javascript.

ernesto@heimdall:~/proyectos/tutorialflask$ ls -l
total 12
-rw-r--r-- 1 ernesto ernesto  792 jun  7 20:56 app.py
drwxr-xr-x 2 ernesto ernesto 4096 jun  7 21:09 static
drwxr-xr-x 2 ernesto ernesto 4096 jun  7 21:10 templates

El archivo app.py tendrá la siguiente información adicional:

#Se agrega el renderizado de la plantilla

from flask import Flask,request,redirect,render_template









#Se usa el decorador ruta para ver el url bienvenido.

@app.route('/bienvenido')

#Se crea la funcion welcome que renderiza una plantilla html.

def welcome():

    return render_template('bienvenido.html')  # renderiza la plantilla bienvenido.html.

Ahora en el directorio templates se crea el archivo bienvenido.html con el siguiente contenido:

Se ejecuta la aplicación y se consulta el url http://127.0.0.1:5000/bienvenido

Ahora se usará un estilo que se llama bootstrap para descargarlo lo puede hacer desde el enlace. Al bajarlo y descomprimirlo copie los archivos bootstrap.min.css y bootstrap.min.js al directorio static, como se muestra a continuación:
ernesto@heimdall:~/proyectos/tutorialflask$ ls -l static/
total 132
-rw-r--r-- 1 ernesto ernesto 99961 feb 13 12:54 bootstrap.min.css
-rw-r--r-- 1 ernesto ernesto 29110 feb 13 12:54 bootstrap.min.js

A continuación se muestra los nuevos cambios a la plantilla bienvenido.html para que use los archivos mencionados anteriormente.

Ahora se abre el navegador al url http://127.0.0.1:5000/bienvenido y se obtiene lo que muestra la siguiente figura:

Micro framework flask (parte 2)

Continuando con el artículo inicial sobre el microframework flask, ahora se muestra el manejo de distintas rutas de urls, se muestra también como obtener información sobre el navegador que se está utilizando para ver la página y por último como redireccionar una ruta a otro url.

A continuación se muestra el código de app.py:

#de flask se importa Flask, request y redirect.

from flask import Flask,request,redirect



#Se crea la instancia del objeto Flask.

app = Flask(__name__)



#Se define el decorador ruta en este caso será la raíz del url, donde

#se muestra hola mundo desde flask

@app.route('/')

def hola_mundo():

    return "Hola Mundo <strong>desde Flask</strong>"



#En este caso el decorador ruta maneja un directorio ususuario y se coloca el nombre del 

#usuario en el url 

@app.route('/usuario/<nombre>')

#Se define la función usuario donde se le pasa el nombre

#devuelve un texto que dice hola y el nombre del usuario.

def usuario(nombre):

    return "<h1> Hola, %s </h1>" % nombre



#Se define la ruta navegador

@app.route('/navegador')

#Se crea la función navegador

#donde se obtiene el headers de User-Agent el cual maneja el nombre

#del navegador que se está usando, la función navegador retorna un string con

#el nombre del navegador.

def navegador():

    user_agent= request.headers.get('User-Agent')

    return "<h1>Su navegador es: %s </h1> " % user_agent



#Se define la ruta redirect

@app.route('/redirect')

#se crea la función redir el cual retorna el nuevo url que será este blog.

def redir():

    return redirect('http://blog.crespo.org.ve')



#Se define la ejecución del servidor.

if __name__ == '__main__':

    app.run(debug=True)

A continuación se ejecuta app.py:
python app.py 
 * Running on http://127.0.0.1:5000/
 * Restarting with reloader

Se abre el navegador colocando en el url el nombre que se desea mostrar en este caso ernesto:

http://127.0.0.1:5000/usuario/ernesto

La imagen muestra el resultado:

Ahora se colocará el url que permite mostrar la información del navegador:

http://127.0.0.1:5000/navegador

La siguiente figura muestra el resultado:

Para terminar se colocará el url que permite redireccionar un url a otro url, en este caso se grabará un screencast para mostrar la acción.
El url es: http://127.0.0.1:5000/redirect

El vídeo se muestra a continuación: