Blog
En esta parte del tutorial, te vamos a explicar como otorgarle el semblante ideal a tu blog mediante la utilización de CSS.
¿En qué consiste CSS?
CSS (Cascading Style Sheets, por su traducción al español ‘hojas de estilo en cascada’) es el lenguaje empleado con el objetivo de poder describir cada aspecto y formato de alguna página web que está escrito en un lenguaje marcado, HTML, por ejemplo. Básicamente, sería el encargado del diseño y de darle un aspecto atractivo al sitio.
Sin embargo, no se pretende comenzar de cero una vez mas ¿cierto? Nuevamente, se empleará algo que otros programadores han hecho y publicado por toda Internet de manera gratis.
¡Se utilizará Bootstrap!
Primero y principal descarga Bootstrap aquí!
Es muy importante que sepamos donde encontrar los recursos para manejar todo lo referente a Bootstrap y CSS, en esta pagina esta todo lo que necesitas saber para hacer tus paginas al estilo pro.
Ahora, depende de ti como quieras manejar el asunto, puedes construir por ti mismo la fachada de tu pagina, pero también podrías utilizar una predeterminada solo para empezar, en el curso utilizaremos una plantilla predeterminada de aquí. Puedes utilizar cualquier fuente que desees, es tan fácil como copiar y pegar el código de lo que desees! (Y obviamente cambiar lo que necesitemos)
Empezaremos por hacer un Navbar o una barra de navegacion, pegamos (o escribimos) el codigo en nuestro archivo base.html que creamos anteriormente.
Ahora haremos una nueva carpeta que contendrá todos los archivos estáticos, la llamaremos “static” y dentro de ella crearemos otras dos carpetas, una llamada “css” y otra “js”.
Al descargar Bootstrap podremos ver que igual trae dos carpetas, una de CSS y otra de JS, dentro de esas carpetas hay una archivo llamado “bootstrap.min”, es muy importante que movamos cada uno a su carpeta correspondiente dentro del proyecto.
Regresando a nuestro código, debemos agregar unos tags para que el bootsrap y los estilos funcionen:
Este seria el código final para que nuestra aplicación se vea algo así:
Claro, esto es solo una fachada, ahora es tu tiempo de hacer que todas las aplicaciones internas creadas se vean mucho mejor! Todo es cuestion de dejar la creatividad fluir!
[…] Curso de Desarrollo Web con Django, Tutorial 11º […]