Dar Formato al sitio con Bootstrap
Framework CSS, creado por Twiter en 2011:
Se utiliza para dar formato a un sitio web completo, utilizando librarias CSS.
Bootstrap es un conjunto de librerias predefinidas para ser ultilizadas linkeando,
para dar formato a los elementos del sitio (tablas, rollover, iconos, barras, etc).
Permite crear sitios web Responsive, cualidad que permite a un sitio ser mostrado
apropiadamente de acuedo al dispositivo (tablet, pc, etc.).
Compatible con todos los navegadores.
Ventajas
- Crear un sitio completo con un formato común, y rapido
- Reutilización de elementos (barras, menús, etc)
- Diseño Adaptable (responsive)
- Crear grids de forma sencilla (diseño de columnas)
- Comunidad activa, actualización y soporte.
- Usado masivamente en CMS, implementaciones para WordPress, Drupal, etc
- Permite el uso de LESS (herramienta que agrega funcionalidad a CSS)
demo
/Proyecto/App/estatic/App/
├── 📂️ static
│ └── 📂️ ProyectoWepApp
│ ├── 📂️ css
│ │ └── 📄️ gestion.css
│ ├── 📂️ img
│ │ ├── 📄️ bg_main.jpg
│ │ └── 📄️ principal.jpg
│ └── 📂️ vendor
│ ├── 📁️ bootstrap
│ ├── 📁️ font-awesome
│ └── 📁️ jquery
modificar Project/App/templates/App/home.html
TAG {% load static %}
Cargar contenidos
{% load static %} y agregar
<link href="{% static 'ProyectoWebApp/a-links-internos' %}" rel="stylesheet">
base.html
{% load static %}
<!-- Bootstrap -->
<link href="{% static 'ProyectoWebApp/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
...
<!-- Styles -->
<link href="{% static 'ProyectoWebApp/css/gestion.css' %}" rel="stylesheet">
...
<!-- Bootstrap -->
<script src="{% static 'ProyectoWebApp/vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'ProyectoWebApp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
...
...
Estilo aplicado, vista escritorio
Vista en android
Herencia de Plantillas y estructura del sitio
Modificar Templates, para usar herencia
Creación plantilla base
Project/App/templatesApp/base.html (copia de home.html)
Eliminar lo que será contenido dinámico
<!-- Heading -->
<!-- Message -->
En el resto de plantillas eliminar el contenido estatico.
e indicar herencia de base.html
{% extends 'ProyectoWebApp/base.html' %}
{% load static %}
{% block content %}
<!-- Heading -->
...
...href="{% url 'Inicio' %}"...
...href="{% url 'Servicios' %}"...
...href="{% url 'Tienda' %}"...
...
<!-- Message -->
...
{% endblock %}
Barra de navegacion, destacar sitio en visita
base.html {% if request.path == '/' %}active{% endif %}
...
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item {% if request.path == '/' %}active{% endif %} px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="{% url 'Inicio' %}">Inicio</a>
</li>
<li class="nav-item {% if request.path == '/servicios' %}active{% endif %} px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="{% url 'Servicios' %}">Servicios</a>
</li>
<li class="nav-item {% if request.path == '/tienda' %}active{% endif %} px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="{% url 'Tienda' %}">Tienda</a>
</li>
<li class="nav-item {% if request.path == '/contacto' %}active{% endif %} px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="{% url 'Contacto' %}">Contacto</a>
</li>
<li class="nav-item {% if request.path == '/blog' %}active{% endif %} px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="{% url 'Blog' %}">Blog</a>
</li>
</ul>
</div>
...
Creacion de otra App
startapp servicios
🔸️python3 admin.py startapp servicios
📂️ .
└── 📂️ ProyectoWeb
├── 📁️ ProyectoWeb
├── 📁️ ProyectoWebApp
├── 📁️ servicios
├── 📄️ db.sqlite3
├── 📄️ manage.py
└── 📄️ README.md
Registrar app
setings.py
# Application definition
INSTALLED_APPS = [
....
'ProyectoWebApp',
'servicios',
]
ORM (object relational mapping)
Mapeo Relacional de Objetos
Técnica de programación para convertir tipos de datos utilizados entre un lenguaje de POO y una base de datos relacional como motor de persistencia.
-
Creación de Modelo
Y sus respectivas Clases con los atributos que serán registos en la BD.
servicios/models.py
Django-docs: Model meta options - - verbose_name - - ImageField - - db.models.fieldsclass Servicio(models.Model): titulo = models.CharField( max_length = 50 ) contenido = models.CharField( max_length = 50 ) imagen = models.ImageField() created = models.DateTimeField( auto_now_add = True) updated = models.DateTimeField( auto_now_add = True) class Meta: verbose_name = 'servicio' verbose_name_plural = 'servicios' def __str__(self): return self.titulo
ImageField instances are created in your database as varchar columns with a default max length
of 100 characters.
As with other fields, you can change the maximum length using the max_length argument.
Para usar Imagenes
🔸️pip3 install Pillow
Crear migraciones :
🔸️python3 admin.py makemigrations
Migrar :
🔸️python3 admin.py migrate
Esta configuracion es inicial, detalle : servir media