Crear un Blog paso a paso #11
Imagen editada en canva.com
Saludos amigos ya está aquí la entrega número 11 de este tutorial "Crear un blog paso a paso".
En las últimas dos entradas dejamos listo el formulario de inicio de sesión y aclaramos algunos conceptos, ahora es tiempo de jugar un poco con nuestro formulario.🤠
Ya vimos antes como incluir nuestros css en nuestras plantillas Twig, si no lo recuerdan se hace en nuestro archivo app.js en el directorio assets , en ese archivo importamos nuestra librería bootstrap y es por eso que nuestro formulario muestra un estilo característico de esta librería.
Analicemos a continuación algunos conceptos para calentar un poco antes de hacer algunas cosas con nuestro formulario.
¿Que es HTML?
El HTML es un lenguaje que entiende nuestro navegador, lo que ves cuando navegas por la internet (Las interfaces de los diferentes webs), normalmente estas interfaces están representadas por una estructura HTML por detrás que nosotros no podemos ver a simple vista.
No percibimos eso porque el navegador descarga el archivo que contiene el HTML, este archivo puede ser enviado por un servidor como producto de una solicitud que hizo nuestro navegador(Que escribas una URL en la barra de direcciones), pero no lo muestra así, él lo interpreta y renderiza una interfaz que representa el HTML que recibió.
Para una web el HTML es como la estructura de una Casa sin ningún tipo de acabado, solo la base sólida indicando los espacios de esa estructura, que repellaremos, pintaremos y adornemos.
¿Qué es el CSS u hojas de estilos CSS?
El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web.
Fuente
Sil el HTML es la estructura de una interfaz web, el CSS se encarga de hacer que se vea como queramos, mediante una sintaxis propia de este lenguaje basado en reglas podemos definir como será la apariencia de nuestros elementos del HTML cuando el navegador los renderiza.
Y eso es lo que hace nuestro bootstrap, el archivo que importamos contiene varias reglas según los criterios de los desarrolladores de bootstrap para hacernos la vida más fácil, y cuando hablamos de apariencia no solo incluye colores sino también de posición de los elementos, tamaños, efectos y animaciones que son mostradas en nuestras páginas por el navegador guiándose por los estilos CSS que le indiquemos.
Ahora solo quedaría saber cuáles estilo son los que aplica bootstrap y como usarlos en nuestro HTML, para eso pueden ir a la documentación de bootstrap que no hay mejor lugar para aprender a usarlo Bootstrap
Los estilos CSS aplican sus reglas en cascadas, esto quiere decir que entre dos reglas para un elemento se aplicará la última por encima de la primera para las propiedades que coincidan en la misma regla.
Si tenemos un body etiqueta en nuestra página e indicamos una regla para el atributo background y le decimos que sea negro y luego declaramos más abajo otra regla que incluya el atributo background indicando que sea azul el resultado será que el fondo de la etiqueta body que representa el cuerpo de un documento HTML ignore la primera y termine siendo azul.
Esta regla pasa en un mismo archivo que carguemos, como hicimos con bootstrap, y también se aplica si cargamos otro archivo CSS después, el último archivo cargado tendrá la prioridad por encima de los anteriores para reglas aplicadas a una etiqueta y que contengan atributos coincidentes. Un ejemplo es nuestros archivos cargados en app.js
Como vemos cargamos bootstrap.min.css y después cargamos a app.css que es un archivo generado automáticamente cuando instalamos el marco donde podemos poner nuestros propios estilos.
Como resultado, las reglas de app.css que coincidan con bootstrap.min.css se impondrán, ya que lo cargamos después. Esto es una forma de sobreescribir los estilos que no nos gusten de boostrap o que queramos modificar por cuestiones de diseño.
Ahora que dimos una overview vamos a poner más bonito u organizar más nuestro formulario pues sale a todo lo largo de la pantalla y esto tal vez en los teléfonos no se note, pero en un ordenador parece una exageración.
Por razones de simplicidad en este tutorial voy a tratar de usar solo los estilos de bootstrap y no crear hojas de estilos para estilizar la web, solo aplicaré las clases que nos brinda bootstrap para hacer que las interfaces adquieran un poco de vida a no ser algo muy puntual o necesario. Ya veremos, pero esa es la idea.
Nuestro formulario se ve de la siguiente manera
Se expande tomando el ancho de todo el documento y realmente no se ve bien, vamos a ser los cambios necesario para que se muestre de la forma que queremos.
Para esto bamos a modificar las dos plantillas que pueden influir en eso, base.html.twig y login.html.twig pero analicemos algo antes.
Lo que se ve en navegador es el cuerpo de nuestra plantilla, para ser más específico lo que está dentro de la etiqueta html body a esa etiqueta vamos a indicarle una clase de boostrap que es una especie de contenedor y va a encerrar todo nuestro contenido del body.
Diremos que queremos un contenedor para nuestra página, algo que incluya todo el contenido y todo lo que vemos, a este podemos ponerles márgenes se vería así.
Esto es un marco imaginario que representa el contenedor donde estará nuestro contenido, el formulario de login en nuestro caso.
¿Cómo lo creamos? Pues bootstrap tiene una clase especial para esto y es por ella que estoy creando este contenedor, ya que con bootstrap puedo darles margen de ambos lados, por ejemplo.
¿Dónde pondré este contenedor? Lo pondré en la etiqueta body porque es la etiqueta padre de nuestro contenido que se visualiza por el navegador, así que si pongo una clase de bootsrap en la etiqueta body crea una especie de contenedor para todo el contenido.
¿En qué plantilla? Podríamos ponerla en login.html.twig en una etiqueta DIV y se reflejaría este contenedor para esta página, pero mejor lo ponemos en base.html.twig en la etiqueta body de esta y así quedaría dispuesto para todas las páginas que hereden de ella y lo cual haría que también estuviera presente en login.html.twig, ya que hereda de ella.
Agreguemos este contenedor en la etiqueta body agreguemos el atributo class="container" para lograr esto, en el caso de que quisiéramos que no tuviera márgenes entre el contenido y este contenedor podríamos poner, en cambio, class="container-fluid" para lograr esto, en nuestro caso usaré el primero "class="container" que hace que el contenido no salga pegado al contenedor, sino que distribuye un margen equivalente a cada lado.
Vamos a base.html.twig y agreguemos este atributo que indica una clase de bootstrap la cuál le da un estilo de contenedor a la etiqueta que se la asignemos, en nuestro caso a la etiqueta body, y quedaría como la siguiente imagen.
Ahora nuestro formulario quedaría dentro de este contenedor, ya que la etiqueta html body contiene al bloque body de twig, ¿qué quiere decir esto? que esta es la plantilla base que contiene la etiqueta body a la cual le estamos agregando una clase de bootstrap para que se vuelva un contenedor.
Ahora en la otra plantilla donde está el formulario heredaremos de esta plantilla base y no pondremos la etiqueta body, sino que heredamos mediante el bloque body que está contenido dentro de la etiqueta que se volvió nuestro contenedor de bootstrap. Vamos a ver la plantilla login.html.twig
El resultado final será un archivo HTML renderizado que tendrá una etiqueta body class="container" y dentro el formulario gracias a estas dos plantillas y la herencia que ayuda a no repetir y tener más organizada la estructura entre otras cosas y ahora se vería como la siguiente imagen.
El contenedor lo delimité con un borde negro por motivos didácticos, pero es invisible en la interfaz. Ahora ya vemos que el formulario está dentro de este contenedor y alineado horizontalmente al centro con márgenes iguales a ambos lados, esto es gracias a que está dentro de este contenedor que tiene los estilos necesarios gracias a bootstrap con tan solo poner la clase "container" en la etiqueta html body de la plantilla base.
Luce bien, pero aún podemos hacerlo mejor, vamos a ponerlo en el centro de la pantalla que creo que así quedará bien. Para ello vamos a ver otra clase bootstrap la clase "row", ¿qué hace esta?, como su nombre lo indica, crea una fila.
Digamos que podemos dividir nuestra página en secciones y en cada una destinada en una fila con esta clase que brinda los estilos necesarios para estructurar mejor nuestro contenido y es parte del sistema de rejillas de bootstrap que nos ayuda a organizar el contenido.
Vamos a agregar una fila para ejemplificar y lo haremos en nuestra plantilla login.html.twig y está claro que quedaría dentro del contenedor al igual que nuestro formulario, para esta clase elegiremos una etiqueta html div y sería como la siguiente imagen.
Ya agregada la etiqueta veremos como se representa visualmente, realmente esta etiqueta es invisible, solo sirve como contenedor de contenido, así que la enmarcaré para que vean como se posiciona en la siguiente imagen
Podríamos poner varias filas con esta clase y en cada una de estas filas nuestro contenido y quedaría ordenado uno debajo del otro, ya que esta vista solo tiene un formulario pondremos nuestro formulario dentro de la etiqueta div con la clase row de bootstrap esto aunque parezca que no haga nada nos da el poder de usar otras clases que necesitan estar dentro de una row para que los estilos funcionen correctamente.
Metemos nuestro formulario dentro de esta div y quedaría así como la siguiente imagen.
Y ahora como se ve en el navegador en la siguiente imagen
Visualmente, el div no surtió ningún cambio, pero es la estructura correcta para usar bootstrap y su sistema de rejillas para organizar nuestro contenido y que sea adaptable a diferentes pantallas y lo necesitamos para hacer nuestro próximo movimiento con tres clases más de bootstrap que dejarán mucho mejor nuestro formulario.
Y son vh-100 esta clase que hace que el elemento tome la altura de la pantalla del dispositivo ya sea un teléfono móvil o un ordenador, justify-content-center y align-items-center que hace que el formulario quede justo en el medio debido a que la clase row contiene una propiedad CSS llamada flex que permite este comportamiento al agregarles las propiedades de estas dos últimas clases mencionadas y nuestra plantilla login.html.twig se verá así como la siguiente imagen.
Le agregué un color azul a la fila para que fuera más visual con la clase bg-primary de boostrap a este elemento div que ahora contiene varias clases aparte de la row y la salida visual en el navegador es esta.
Tal vez en la imagen debido a que la recorté no se note, pero ahora el formulario está justo en el medio de la página y luce mucho mejor. Aquí les dejo otra vista en representación desde un teléfono celular donde se aprecia mejor.
Ahora solo queda el detalle del ancho del formulario en ordenador, ya que como ven en un teléfono celular está bien así, pero cuando estamos en un ordenador sale a todo lo largo de la fila y para arreglar eso aremos lo siguiente.
Como lo tenemos, nuestro formulario está dentro de una fila, y una fila ocupa todo el espacio de la página y el contenedor en la que se encuentra, pero que pasaría si dividiéramos nuestra fila en secciones iguales o columnas.
Bootstrap trae una clase para eso llamada col-"tipo de pantalla"-"tamaño", con la primera parte definimos que es una columna, con col, luego decimos el tipo de pantalla a la que vamos a aplicar el tamaño de la columna y para después terminar completando la clase con el tamaño de la columna, quedaría así la clase que necesitamos.
col col-lg-4 en bootstrap podemos definir el tamaño hasta 12, y la clase anterior le estaría diciendo col entonces creo una columna y como no me especificas el tamaño la pondré al máximo que es 12 así que en dispositivos móviles se verá a todo lo largo del contenedor de esta fila, justo como se muestra hasta ahora.
La segunda parte sería col-lg-4, crea una columna y que en pantallas grandes como las de un ordenador identificadas por "lg" no la mostraré fluida con el tamaño 12, sino que dividiré en 3 partes iguales y tomaré esa división como referencia tomando 1/3 de 12 y da como resultado el tamaño que nos hace falta o que creemos que se verá mejor en ordenador para el contenido que esté en la etiqueta que le pongamos esta clase.
Para ello crearemos un div con esta clase el cual incluiremos dentro de la fila con la clase row y dentro de este div nuestro formulario. El nuevo div se verá así.
<div class="col col-lg-4">
y lo añadiremos a nuestra fila con la clase row y dentro de este ahora moveremos nuestro formulario y todo quedaría de la siguiente forma.
Y el resultado visual de esta estructura de class de bootstrap sobre las etiquetas HTML que tenemos es el de la siguiente imagen
Ahora sí está mucho mejor, puesto en el medio y con un tamaño práctico adaptado al tipo de pantalla con la que el usuario interactúe en nuestra interfaz.
Pero no nos quedaremos ahí, podemos hacerlo un poco mejor, quitémosle el color de fondo azul fuerte a la fila y pongámoslo al formulario, también agreguémosle un espacio llamado pading al contenido del formulario y redondeémosles los bordes para estilizarlo y todo eso con clases de bootstrap que incluyen todo el css necesario que nos hace falta. Quedaría así la plantilla como la siguiente imagen.
Y el resultado se puede ver en la siguiente imagen
Creo que ya tenemos un formulario decente aquí visualmente hablando, ahora como el botón de iniciar sesión es del mismo color del formulario, no se distingue bien, arreglemos eso también con alguna clase de bootstrap y cambiémosle el color a la tipografía también.
Los arreglos se harán mediante clases bootstrap en la etiqueta HTML del formulario y del botón al final del formulario, en ambas etiquetas pondré las clases bootstrap para reflejar los estilos deseados, a continuación la imagen ilustra los cambios.
Y el resultado es el siguiente
Creo que ya como está es suficiente, como vimos no tuvimos que escribir ni un código CSS, solo usando las clases de bootstrap estilizamos un formulario que en mi opinión quedó bastante bien.
Recapitulemos
Añadimos la clase de boostrap "container" a la plantilla base base.html.twig
Creamos una fila con el sistema de cuadrícula de boostrap mediante la clase "row"
Agregamos las clases vh-100 justify-content-center align-items-center a la etiqueta div que contiene la fila para centrar su contenido.
Creamos una columna con las clases col col-lg-4 dentro de la fila para lograr adaptavilidad del contenido en diferentes pantallas e incluimos el formulario dentr de ella
Agregamos clases de boostrap necesarias para estilizar nestro formulario en cuanto a color, bordes y margenes.
Referencias
Esto es todo por hoy espero que les haya gustado y sobre todo que les sirva en algún proyecto personal o los motive a incursionar en alguno. Si surgen dudas no duden en dejar un comentario, los atenderé com mucho placer.
