(desarrollo web,

una gota a la vez)

Tecnólogo en Análisis y
Desarrollo de sistemas de
Información

Exposiciones Lenguajes de programación

Integrantes

 YEIFER ANDRES MONTES

 DIEGO BLANCO FUENMAYOR
 HEINER DANIEL CASADIEGO GARCIA
 JOSE LUIS BARROS QUIÑONEZ
 Jinja, también conocido como «Jinja2«para especificar la versión de lanzamiento más reciente, es un motor
de plantilla Python que se utiliza para crear HTML, XML u otros formatos de marcado que se devuelven al
usuario a través de una respuesta HTTP.

Werkzeug
• Werkzeug (biblioteca WSGI) es como un comunicador entre su código Python y HTTP del servidor
nginx/apache Este es el caso completo uso de Werkzeug WSGI: WSGI tiene dos lados: el lado "servidor" o
"puerta de enlace" (a menudo una web server como Apache o Nginx), y el lado "aplicación" o "framework"
(el script Python en sí mismo).
Porqué usar Flask

 Con un Framework con el simple hecho de crear un nuevo proyecto ya tendremos listo
para utilizar un manejador de ruta, un manejador de migraciones, un ORM, vistas,
middleware, gestor de autenticación y muchas cosas mas,
 Con flask, esto no es así. Literalmente salimos trabajando con un lienzo en blanco, donde
nos apoyaremos de sus módulos y si deseamos con bibliotecas de terceros. Integrando solo
lo que necesitemos logrando así un mayor control sobre nuestro código Siendo muy
flexible.
 Conviene mas utilizar flask cuando tengamos arquitectura de microservicios y/o cuando
tengas un servidor muy sencillo
Micro framework

 "Micro" no significa que toda la aplicación web tenga que encajar en un solo archivo
python (aunque ciertamente puede), ni significa que Flask carece de funcionalidad. El
"micro" en microframework significa que Flask tiene como objetivo mantener el núcleo
simple pero extensible. Flask no hará muchas decisiones por usted, como qué base de datos
usar. Esas decisiones que toma, como qué motor de plantilla usar, son fáciles de cambiar.
Todo lo demás depende de ti, para que Flask pueda ser todo lo que necesitas y nada que no
necesites.
Seguridad

 Si escribes una aplicación web, probablemente esté permitiendo que los usuarios se
registren y dejen sus datos en su servidor. Los usuarios le confían datos. E incluso
si usted es el único usuario que puede dejar datos en la aplicación, todavía desea
que esos datos se almacenen de forma segura.
 Desafortunadamente, hay muchas maneras en que la seguridad de una aplicación
web puede verse comprometida. Flask le protege contra uno de los problemas de
seguridad más comunes de las aplicaciones web modernas: scripting entre sitios
(XSS). A menos que marque deliberadamente HTML inseguro como seguro, Flask
y el motor de plantillas Jinja2 subyacente lo tienen cubierto. Pero hay muchas más
maneras de causar problemas de seguridad.
Qué es XSS

 El cross-site scripting (XSS) es un tipo de vulnerabilidad informática muy común

en las aplicaciones web que permite a los atacantes colocar secuencias de
comandos maliciosas en páginas web y, a su vez, instalan malware en los
navegadores web de los usuarios.

 Estos ataques no se limitan solamente a las páginas web disponibles en Internet,

sino que también puede haber aplicaciones que tengas instaladas en tu ordenador
que sean vulnerables a estos ataques de cross-site scripting (XSS).
Instalación

 Se recomienda utilizar la versión más reciente de Python. Flask es compatible con

Python 3.6 y más nuevo.
 Use un entorno virtual para administrar las dependencias del proyecto, tanto en
desarrollo como en producción.
 Dentro del entorno activado, utilice el siguiente comando para instalar Flask:
 $ pip install Flask
 Una aplicación mínima

 Primero importamos la clase Flask. Una instancia de esta clase será nuestra aplicación WSGI.
 A continuación, creamos una instancia de esta clase. El primer argumento es el nombre del módulo o
paquete de la aplicación. es un acceso directo conveniente para esto que es apropiado para la mayoría
de los casos. Esto es necesario para que Flask sepa dónde buscar recursos como plantillas y archivos
estáticos.__name__
 A continuación, utilizamos el decorador route() para decirle a Flask qué URL debe desencadenar
nuestra función.
 La función devuelve el mensaje que queremos mostrar en el navegador del usuario. El tipo de
contenido predeterminado es HTML, por lo que el explorador representará HTML en la cadena
 Guardar
Una aplicación mínima
 Para ejecutar la aplicación, utilice el comando matraz o python -m flask. Antes de poder hacerlo, debe
indicar a su terminal la aplicación con la que trabajar exportando la variable de entorno: FLASK_APP
 > set FLASK_APP=hello
 > flask run
 * Running on http://127.0.0.1:5000/

 Ahora dirígete a http://127.0.0.1:5000/, y deberías ver tu saludo de Hello, World!

Cambios Automáticos

 Para que el servidor esté siempre a la escucha de los cambios es mejor trabajar con debug
= True
Rutas
 Se pueden crear las rutas a las que se van a acceder mediante el decorador @
Templates(plantillas)

Se pueden renderizar templates importando render_template desde flask para visualizar las
archivos HTML ya elaborados y guardados en una carpeta que se llame templates
Archivos estáticos.
 Necesitaremos trabajar con archivos de JavaScript, hojas de estilo(CSS), con imágenes,
etc. A ese tipo de archivo se les conoce como archivos estáticos.
 Necesitamos una nueva carpeta llamada statics
 En el <head> del HTML colocamos el <link> para hacer referencia al archivo CSS así:
 <href=“{{ url_for(‘static’, filename=nombrecarpeta/archivo.css’ ) }}”>
 O para JavaScript:
 <script type= “text/javascript” src=“{{ url_for(‘static’,
filename=nombrecarpeta/archivo.js’ ) }}”>
 Para imágenes:
 <img src=“{{ url_for(‘static’, filename=nombrecarpeta/archivo.jpg’ ) }}”>
 Etc.
Archivos estáticos
Formularios

 Se puede trabajar normalmente como lo hemos hecho con etiquetas HTML

 O trabajar con formularios flask, nos permiten validar, nos permiten procesar mucho mas
fácil los datos y con objetos de Python.
 En el principal hay que importar form e instanciarlas dentro de la pagina html
 Se crea los formularios importando form desde wtform creando una clase y los atributos
serán los campos del formulario.
 Se muestran dentro de una etiqueta <form> en la página HTML
Formularios
 Validaciones
 Para realizar validaciones necesitamos desde wtforms importar valitadors

 En los atributos o campos de formularios se coloca un segundo parámetro como lista de

validaciones. Ej:
Ataque CSRF Cross Site Request Forgery

 Un ataque CSRF fuerza al navegador web validado de una víctima a enviar una petición a
una aplicación web vulnerable, la cual entonces realiza la acción elegida a través de la
víctima. Al contrario que en los ataques XSS, los cuales explotan la confianza que un usuario
tiene en un sitio en particular, el cross site request forgery explota la confianza que un sitio
tiene en un usuario en particular.
 Para protegernos de estos ataques hacemos en la instancia de Flask la inclusión de una
secret_key para lo cual importamos de flask_wtf la clase CsrfProtect
 Mensajes – flash messege

Las buenas aplicaciones y las interfaces de usuario tienen que ver con los comentarios. Si el
usuario no recibe suficientes comentarios, probablemente terminará odiando la aplicación. Flask
proporciona una manera muy sencilla de dar retroalimentación a un usuario con el sistema
intermitente. El sistema intermitente básicamente permite grabar un mensaje al final de una
solicitud y acceder a él en la siguiente (y sólo la siguiente) solicitud. Esto normalmente se
combina con una plantilla de diseño para exponer el mensaje.
Para parpadear un mensaje utilice el método flash(), para obtener los mensajes que puede utilizar
get_flashed_messages() que también está disponible en las plantillas.
AJAX

 Nuestro cliente hace una petición al servidor y luego el servidor le devuelve al cliente una respuesta, así
es como ejecuta nuestro sitio web. Esto no es malo del todo, pero si que requiere un poco más de tiempo
a la hora de realizar las peticiones ya que todas se hacen de la misma manera, este tipo de peticiones, su
rapidez depende de varios factores y entre ellos los que más destacan son el estado del servidor y la
velocidad de conexión a internet que tenga el cliente para recibir las respuestas del servidor.

 Esto antes era un problema, ya que si el servidor presentaba fallas por ende la web se vería afectada en
términos de velocidad. Pero eso fue hace un par de años, en 2005 nació la tecnología AJAX que es una
manera de realizar peticiones asíncronas (en segundo plano).

 Una de las funciones más utilizadas de AJAX es recargar secciones de una página sin tener que hacerle
la petición al servidor, ya sabemos que la petición de recargar una página web el navegador le dice al
servidor que nos envíe nuevamente la web completa.