Me parece excelente pedagogía. Se basa mucho más en la práctica y tenemos la documentación como soporte en caso de querer ir más allá.
Fundamentos de Flask
Qué aprenderás sobre Flask
¿Cómo funcionan las aplicaciones en internet?
¿Qué es Flask?
Instalación de Python, pip y virtualenv
Hello World Flask
Debugging en Flask
Request y Response
Ciclos de Request y Response
Uso de templates y archivos estáticos
Templates con Jinja 2
Estructuras de control
Herencia de templates
Include y links
Uso de archivos estáticos: imágenes
Configurar páginas de error
Extensiones de Flask
Flask Bootstrap
Configuración de Flask
Implementación de Flask-Bootstrap y Flask-WTF
Uso de método POST en Flask-WTF
Desplegar Flashes (mensajes emergentes)
Pruebas básicas con Flask-testing
Proyecto
Planteamiento del proyecto: To Do List
App Factory
Uso de Blueprints
Blueprints II
Base de datos y App Engine con Flask
Configuración de Google Cloud SDK
Configuración de proyecto en Google Cloud Platform
Implementación de Firestore
Autenticación de usuarios: Login
Autenticación de usuarios: Logout
Signup
Agregar tareas
Eliminar tareas
Editar tareas
Deploy a producción con App Engine
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Include y links
12/36Recursos
¿Cómo crear una barra de navegación con HTML?
Crear una barra de navegación puede parecer complicado, pero cuando dominas los conceptos básicos de HTML y el uso de funciones o teclas de inclusión, se vuelve sencillo. En este apartado, exploraremos cómo se puede utilizar la funcionalidad de inclusión dentro de HTML para integrar una barra de navegación que además es reutilizable en múltiples páginas. Descubriremos cómo crear un archivo HTML que, al integrarse en nuestro archivo base, nos permitirá dirigirnos de manera fácil a distintas secciones.
¿Qué es una barra de navegación?
Una barra de navegación es un elemento esencial en la mayoría de sitios web. Es la guía del usuario para desplazarse a través de diferentes secciones o páginas con facilidad y sin complicaciones. Usualmente, consiste en una serie de enlaces que redirigen a otras partes del sitio o a sitios externos, mejorando así la estructura y la usabilidad del sitio.
¿Cómo se construye la barra de navegación en HTML?
Para construir nuestra barra, creamos un nuevo archivo llamado navbar.html. Este archivo será el contenedor de nuestra lista de enlaces de navegación. Aquí tienes un ejemplo del código que iría dentro del archivo:
<nav>
<ul>
<li><a href="{{ url_for('index') }}">Ir a inicio</a></li>
<li><a href="https://platzi.com" target="_blank">Ir a Platzi</a></li>
</ul>
</nav>
- El elemento
<nav>denota el contenedor de la barra de navegación. - Dentro del
<ul>, que es una lista no ordenada, creamos<li>(elementos de lista) que contienen<a>(enlaces ancla). - Utilizamos
hrefpara especificar la URL de destino. - Para enlaces externos, como el de Platzi, el atributo
target="_blank"nos asegura que se abrirá en una nueva pestaña.
¿Cómo incluir la barra de navegación en el archivo base HTML?
Una vez que hemos creado nuestra barra de navegación, necesitamos integrarla en nuestro archivo base HTML. Este archivo actúa como la plantilla principal que otras páginas del sitio heredan. Para ello, utilizamos la función de inclusión, la cual nos permite incorporar fragmentos de código HTML desde archivos externos, como navbar.html.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página</title>
</head>
<body>
<header>
{% include 'navbar.html' %}
</header>
<main>
<!-- Contenido principal aquí -->
</main>
</body>
</html>
- Dentro del
<header>, usamos{% include 'navbar.html' %}para integrar el contenido de nuestra barra de navegación. - Resulta en una estructura HTML modular, lo que facilita el mantenimiento y actualización del sitio.
Consejos prácticos al crear una barra de navegación
- Simplicidad ante todo: Utiliza términos claros y concisos para los enlaces, facilitando la navegación del usuario.
- Consistencia: Asegúrate de que la barra de navegación sea uniforme en todas las páginas del sitio.
- Enlaces funcionales: Prueba cada enlace para garantizar que se dirijan correctamente a las páginas esperadas.
- Accesibilidad: Considera la accesibilidad, utilizando descripciones adecuadas y asegurando que la barra funcione en dispositivos móviles.
Crear una barra de navegación reutilizable no solo optimiza el tiempo de desarrollo, sino que ofrece al usuario una experiencia de navegación fluida. ¡Te animamos a seguir explorando y mejorando tus habilidades!
Aportes 36
Preguntas 11
Ordenar por:
¡Hola Comunidad!
Uno compañero de Platzi hizo la siguiente pregunta: ¿Cuál es la diferencia entre extends e include? Me parece que la respuesta que le di puede ser de utilidad para otros que tengan la misma duda. Así que la copio aquí como aporte 👇:
.
Cuando usas el keywords extends para llamar a una plantilla, esta plantilla que has llamado toma el control de tu vista. Tomemos el ejemplo con el que venimos trabajando.
.
Contenido del archivo hello.html (reducido para el ejemplo):
01. {% extends 'base.html' %}
02.
03. {% block title %}
04. {{ super() }}
05. Bienvenida
06. {% endblock %}
07.
08. {% block content %}
09. {% if user_ip %}
10. <h1>Hello World Platzi, tu IP es {{ user_ip }}</h1>
11. {% else %}
12. <a href="{{ url_for('index') }}">Ir a inicio</a>
13. {% endif %}
14. {% endblock %}
Nota que llamar a base.html hace que ahora todo el contenido de hello.html gira en torno al primero. Puedes notar esto, específicamente en la línea #4, dónde necesita utilizar el método super() para traer contenido de la plantilla PADRE.
.
Adicionalmente puedes ver en la línea #8 que se crea un bloque content que contiene (dependiendo del condicional) un Título o un Enlace. Este contenido SOLO se mostrará si nombra a este bloque content en base.html. Por lo que si revisas el código de base.html podrás ver la llamada del PADRE al HIJO:
.
El código que copio de base.html ha sido adaptado para el ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title> {% block title %} Flask Platzi | {% endblock %} </title>
</head>
<body>
<!-- Aquí puedes ver la llamada del padre al hijo -->
{% block content %}
{% endblock %}
</body>
</html>
Sin embargo, cuando usas el keyword import lo único que haces es enlazar una plantilla con otra y será hello.html quien tendrá el control de hacer la llamada al contenido de la otra plantilla cuando lo requiera. Puedes ver lo aquí:
.
El código que copio de hello.html ha sido adaptado para el ejemplo:
01. {% import 'macros.html' as macros %}
02.
03. {% block content %}
04. <ul>
05. {% for todo in todos %}
06. {{ macros.render_todo(todo) }}
07. {% endfor %}
08. </ul>
09. {% endblock %}
Como puedes ver en la línea #6 es hello.html quien decide llamar y usar el macro, inclusive podrías importar macros.html y no usarlo. Cosa que no podría pasar con extends.
.
Espero que te haya servido algo de lo explicado aquí.
.
¡Saludos!
Me gusta mucho el curso
pasas de mucha teoría que si la explicaras facilitaría mucho entender y aprender mas rápido
pregunta ¿este html se renderea en el servidor o en el cliente?
Include y links
Creamos un archivo navbar.html:
<nav>
<ul>
<li><a href="{{ url_for('index') }}">Ir a inicio</a></li>
<li><a href="https://midiaenunosminutos.com" target="_blank">Ir a mi blog</a></li>
</ul>
</nav>
Y lo incluimos en base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %} Curso Flask | {% endblock %}</title>
</head>
<body>
<header>
{% include 'navbar.html' %}
</header>
{% block content %}
{% endblock %}
</body>
</html>
Me gusta mucho que el curso es bastante práctico, cursos llenos de teoría hay en todos lados, pero donde te pongan a practicar verdaderamente pocos, por eso me ha gustado mucho este curso.
Como estaba de caro el Platzi en aquel entonces
para los que quieran profundizar:
Soy docente en otra área, esto parece mas un taller que una clase. No deberían saltarse toda la teoría porque pueden confundir a muchos estudiantes… Siempre se puede ir a la documentación, pero esa no es la idea de venir a Platzi.
En serio deberían planear mejor los contenidos.
Entonces cual seria la diferencia entre el include y el block??? 😮
main.py
from flask import Flask, request, make_response, redirect, render_template
app = Flask(__name__)
todos = ['Crompar Cafe', 'Entregar Informe', 'Salir a caminar']
@app.route('/')
def index():
user_ip = request.remote_addr
make = redirect('/hello')
response = make_response(make)
response.set_cookie('user_ip', user_ip)
return response
@app.route('/hello')
def hello():
user_ip = request.cookies.get('user_ip')
render = render_template(
'hello.html',
user_ip=user_ip,
todos=todos
)
return render
if __name__ == "__main__":
app.run(debug=True)
- Created variables in cosole ```bash export FLASK_APP= main.py #app principal para ejecución export FLASK_DEBUG=1 #active debug flask ``` - Commands **`echo $varible`** —Ver variable `**flask run**` —Correr flask
Si les falla la carga de archivos este fix en la ruta les servira
<a href="{{url_for('index')}}">
Excelente!
Después de Django (y todo el trabajo que me costó) Flask me parece mucho más tranquilo y amigable 😆
El inlcude es lo mismo que hacer un import pero en esa misma linea llamamos a lo que incluímos(importamos)
excelente clase. Gracias.
![Francisco Garcia [C6]](https://static.platzi.com/media/avatars/avatars/garciafran_c845c2fe-2ea4-42db-a305-a7f4ef13b0fd.jpeg)
que buena explicacion, sencilla
esto esta hermoso
Si coincido con muchos acá, yo ya había probado web dev antes, pero nunca con Python siempre Js me atoraba, ahora como ya tengo nociones y todo me encanta el ritmo como se avanza acá, me encantó hacer el hello world tan pronto etc etc, pero creo que antes me hubiera frustrado muchísimo
Soy de seguridad, pero siempre me ha llamado la atención el desarrollo web. Tome el curso de Bootstrap el cual amé, Javascript, etc. Ahora, Python es muy importante para nosotros los Pentesters. Quiero ver como opera Python en el entorno web, y hasta ahora muy interesante. Espero se le de más estática a la aplicación en las siguientes clases.
excelente clase interactiva 😄
Excelente, clase
navbar.html
<nav>
<ul>
<li> <a href=" {{ url_for('index') }} ">Ir a inicio</a> </li>
<li> <a href="https://platzi.com/" target=" blank">Platzi</a> </li>
</ul>
</nav>
macros.html
{% macro render_todo(todo) %}
<li>Descripcion: {{todo}} </li>
{% endmacro %}
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% block title %}
Flask Platzi |
{% endblock %}
</title>
</head>
<body>
<header>
{% include 'navbar.html' %}
</header>
{% block content %}
{% endblock %}
</body>
</html>
hello.html
{% extends 'base.html' %}
{% import 'macros.html' as macros %}
{% block title %}
{{ super() }}
Bienvenido
{% endblock %}
{% block content %}
{% if user_ip %}
<h1>Hola Mundo, soy la ip: {{user_ip}} </h1>
{% else %}
<a href=" {{ url_for('index') }} "> Ir al inicio de la pagina </a>
{% endif %}
<ul>
{% for todo in todos %}
{{macros.render_todo(todo)}}
{% endfor %}
</ul>
{% endblock %}
debo decir que jinja2 y blade en laravel, son muy similares!! y creo que eso es genial porque es facil entender como funciona cada motor!
Gracias.
Resumen:
- Crear un archivo navbar.html (Tendra una barra de navegacion)
<nav>
<ul>
<li><a href="{{ url_for('index')}}"> Ir a inicio</a></li>
<li><a href="https://google.com" target="_blank">Ir a google</a></li>
</ul>
</nav>
- Incluirlo en el archivo base.html en una etiqueta <header>
<header>
{% include 'navbar.html' %}
</header>
Cual es la diferencia de esto a un macro?
Si les sirve , les dejo la documentación de Flask , aqui pueden encontrar muchos ejemplos para seguir aprendiendo . Saludos https://flask.palletsprojects.com/en/1.1.x/
Excelente clase!!
- Para incluir archivos html dentro de un html usamos
{% include 'archivo.html' %}
Es muy parecido a usar algun preprocesador de css. 🤜
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?