La forma más simple de construir una aplicación web responsiva
Tan simple que no tendremos que utilizar alguna biblioteca de CSS o JavaScript como Bootstrap, ya que en esta guía completa tendremos la oportunidad de constuir nuestro propio conjunto de propiedades CSS para que las etiquetas de HTML5 se ajusten de forma automática, no importando el tamaño de la pantalla.
En tan solo unas horas de práctica estaremos capacitados para constuir páginas web adaptativas, sin la necesidad de crear propiedades con los CSS Media Queries para múltiples pantallas, escribiremos menos código CSS con propiedades que especificaremos una sola vez e incluiremos los prefijos para que la interfaz de usuario de nuestra aplicación sea compatible con todos los navegadores, aún siendo la versión de estos navegadores antigua.
Este tutorial gratuito puede ser de interés para cualquier persona, aún sin conocer mucho sobre el tema y para todo maquetador experto que desee construir estructuras de Frontend de forma más simple, pero a mayor velocidad, ofreciendo una experiencia con los mismos o mejores resultados para cada usuario.
Solo necesitaremos un programa para seguir esta guía:
Notepad++: En este manual instalaremos un editor de texto como Nodepad++ para escribir el código HTML y CSS de forma más clara y organizada, sin embargo puedes usar cualquier editor de texto que prefieras, incluso usted logrará implementar sus ideas con el programa Notepad que trae instalado el sistema operativo Windows o un Nodepad para Mac.
¿Puedo implementar estas técnicas con algún framework o librería de JavaScript?
Escribiremos nuestras propiedades CSS en un archivo individual al archivo del documento con el código HTML y Javascript, con el objetivo de reutilizar estas propiedades en cualquier otro archivo que quisiéramos, por esta razón, podrás aplicar estos aprendizajes a cualquier aplicación web, independientemente del framework o librería frontend.
Pasos para diseñar estructuras de Frontend rápidamente:
1- Carpeta para el proyecto: Creamos una carpeta en cualquier ubicación que elijamos y le ponemos un nombre, ejemplo; C:/Users/Jhon/Projects/app_responsive
El nombre de la carpeta la hemos nombrado "app_responsive" y la he ubicado en la carpeta "Projects", sin embargo eres libre de elegir la ruta que prefieras, solo es cuestión de escribir la ruta en el navegador con la misma dirección de tu carpeta.
2- Archivo Index.html y main.css: Dentro de la carpeta que creamos anteriormente, es momento de crear un archivo llamado "index.html", puedes cambiar "index" por lo que quieras, pero no olvides agregar la extensión ".html" al archivo.
En este archivo escribiremos en código HTML la estructura del documento web para establecer los bloques que necesitemos, sin embargo, nuestro documento aún no será adaptable para todas las pantallas sin las propiedades de CCS, por esta razón, creamos un archivo dentro de nuestra carpeta "app_responsive" llamado "main.css". Al igual que el archivo HTML puedes cambiar el nombre "main" por la expresión que prefieras, pero recuerda agregar la extensión ".css" luego del nombre.
3- Estructura del documento Web: Abrimos el archivo "index.html" y escribiremos un poco de código HTML5. Cada etiqueta contiene del lado derecho un comentario que describe su rol en el documento Web. Por el momento, el único contenido que posee es el siguiente mensaje; "Contenido del documento...":
4- Agregando contenido al cuerpo del documento: Para aplicar las propiedades de CSS con el objetivo de adaptar el tamaño de nuestra aplicación para cualquier pantalla, podemos utilizar cualquier etiqueta para bloques de cualquier versión de HTML, sin embargo, en este artículo utilizaremos la etiqueta de HTML5 "<section>", sin olvidarnos de agregar la etiqueta de cierre "</section>". También agregamos bordes y espacio de relleno para visualizar mejor cada contenedor, por medio de propiedades CSS incluidas dentro de la etiqueta "<style>" en el bloque de cabecera del documento:
Como podemos visualizar, hay un contenedor de sección "padre" y 5 contenedores de sección hijos, donde el "padre" controlará todos los movimientos y la ubicación de los contenedores ''hijos'' que se encuentren dentro de el. Esta forma de trabajar con el documento Web es similar a un pelotón militar, donde el sargento, quien dirige a los demás militares, organiza el pelotón de distintas maneras, según la necesidad de lugar.
5- Propiedades para el archivo "main.css": Finalmente, escribiremos propiedades de CSS llamadas Flexbox, estas propiedades se encargarán de hacer la magia por nosotros. Actualmente las secciones que se sitúan dentro de la sección principal se muestran de forma vertical, sin embargo, con Flexbox podemos cambiar a horizontal fácilmente. Siempre debemos incluir la propiedad principal combinada como "display: flex;" para que funcionen las demás propiedades.
En vista que necesitaremos utilizar esta propiedad y las demás propiedades de Flexbox con mucha frecuencia, creamos una clase para cada una y la aplicamos al contenedor de sección "padre":
Hemos agregado 3 clases al contenedor principal:
- Clase "flex" llama a la propiedad "display: flex;". Permite incluir las propiedades de Flexbox.
- Clase "direction_row" llama a la propiedad "flex-direction: row;". Orienta todos los contenedores "hijos" de forma horizontal. Si deseas ordenar a modo de columnas, cambia el valor "row" por "column".
- Clase "wrap" llama a la propiedad "flex-wrap: wrap;". Este es el comportamiento principal con la adaptación de contenedores para cualquier tamaño de pantalla. El contenedor "padre" se encarga de indicarles a todos sus contenedores que deben caer si el espacio horizontal llegó al límite.
Pruebe usted mismo(a) reduciendo o aumentando el resultado del código HTML5 y CSS.
6- Asegurando la compatibilidad con todos los navegadores: Es nuestra responsabilidad técnica permitir que nuestra aplicación web se ajuste de forma correcta en cualquier tamaño de pantalla, por esta razón, incluimos los prefijos que leerán los navegadores. Existen muchas herramientas en la web que nos facilita la obtención de estos prefijos, en lo personal utilizo Autoprefixer.
Te invito a que sigas aprendiendo de las propiedades de Flexbox para que implementes de forma rápida y más simplificada las interfaces de usuario de su sitio web, sin preocuparse por la correcta visibilidad de todo el contenido.
También puedes aplicar interesantes propiedades de Flexbox para los contenedores "hijos", con el fin de resolver múltiples casos de diseños presentados de su aplicación.
Este tutorial gratuito puede ser de interés para cualquier persona, aún sin conocer mucho sobre el tema y para todo maquetador experto que desee construir estructuras de Frontend de forma más simple, pero a mayor velocidad, ofreciendo una experiencia con los mismos o mejores resultados para cada usuario.
Solo necesitaremos un programa para seguir esta guía:
Notepad++: En este manual instalaremos un editor de texto como Nodepad++ para escribir el código HTML y CSS de forma más clara y organizada, sin embargo puedes usar cualquier editor de texto que prefieras, incluso usted logrará implementar sus ideas con el programa Notepad que trae instalado el sistema operativo Windows o un Nodepad para Mac.
¿Puedo implementar estas técnicas con algún framework o librería de JavaScript?
Escribiremos nuestras propiedades CSS en un archivo individual al archivo del documento con el código HTML y Javascript, con el objetivo de reutilizar estas propiedades en cualquier otro archivo que quisiéramos, por esta razón, podrás aplicar estos aprendizajes a cualquier aplicación web, independientemente del framework o librería frontend.
Pasos para diseñar estructuras de Frontend rápidamente:
1- Carpeta para el proyecto: Creamos una carpeta en cualquier ubicación que elijamos y le ponemos un nombre, ejemplo; C:/Users/Jhon/Projects/app_responsive
El nombre de la carpeta la hemos nombrado "app_responsive" y la he ubicado en la carpeta "Projects", sin embargo eres libre de elegir la ruta que prefieras, solo es cuestión de escribir la ruta en el navegador con la misma dirección de tu carpeta.
2- Archivo Index.html y main.css: Dentro de la carpeta que creamos anteriormente, es momento de crear un archivo llamado "index.html", puedes cambiar "index" por lo que quieras, pero no olvides agregar la extensión ".html" al archivo.
En este archivo escribiremos en código HTML la estructura del documento web para establecer los bloques que necesitemos, sin embargo, nuestro documento aún no será adaptable para todas las pantallas sin las propiedades de CCS, por esta razón, creamos un archivo dentro de nuestra carpeta "app_responsive" llamado "main.css". Al igual que el archivo HTML puedes cambiar el nombre "main" por la expresión que prefieras, pero recuerda agregar la extensión ".css" luego del nombre.
3- Estructura del documento Web: Abrimos el archivo "index.html" y escribiremos un poco de código HTML5. Cada etiqueta contiene del lado derecho un comentario que describe su rol en el documento Web. Por el momento, el único contenido que posee es el siguiente mensaje; "Contenido del documento...":
4- Agregando contenido al cuerpo del documento: Para aplicar las propiedades de CSS con el objetivo de adaptar el tamaño de nuestra aplicación para cualquier pantalla, podemos utilizar cualquier etiqueta para bloques de cualquier versión de HTML, sin embargo, en este artículo utilizaremos la etiqueta de HTML5 "<section>", sin olvidarnos de agregar la etiqueta de cierre "</section>". También agregamos bordes y espacio de relleno para visualizar mejor cada contenedor, por medio de propiedades CSS incluidas dentro de la etiqueta "<style>" en el bloque de cabecera del documento:
Como podemos visualizar, hay un contenedor de sección "padre" y 5 contenedores de sección hijos, donde el "padre" controlará todos los movimientos y la ubicación de los contenedores ''hijos'' que se encuentren dentro de el. Esta forma de trabajar con el documento Web es similar a un pelotón militar, donde el sargento, quien dirige a los demás militares, organiza el pelotón de distintas maneras, según la necesidad de lugar.
5- Propiedades para el archivo "main.css": Finalmente, escribiremos propiedades de CSS llamadas Flexbox, estas propiedades se encargarán de hacer la magia por nosotros. Actualmente las secciones que se sitúan dentro de la sección principal se muestran de forma vertical, sin embargo, con Flexbox podemos cambiar a horizontal fácilmente. Siempre debemos incluir la propiedad principal combinada como "display: flex;" para que funcionen las demás propiedades.
En vista que necesitaremos utilizar esta propiedad y las demás propiedades de Flexbox con mucha frecuencia, creamos una clase para cada una y la aplicamos al contenedor de sección "padre":
Hemos agregado 3 clases al contenedor principal:
- Clase "flex" llama a la propiedad "display: flex;". Permite incluir las propiedades de Flexbox.
- Clase "direction_row" llama a la propiedad "flex-direction: row;". Orienta todos los contenedores "hijos" de forma horizontal. Si deseas ordenar a modo de columnas, cambia el valor "row" por "column".
- Clase "wrap" llama a la propiedad "flex-wrap: wrap;". Este es el comportamiento principal con la adaptación de contenedores para cualquier tamaño de pantalla. El contenedor "padre" se encarga de indicarles a todos sus contenedores que deben caer si el espacio horizontal llegó al límite.
Pruebe usted mismo(a) reduciendo o aumentando el resultado del código HTML5 y CSS.
6- Asegurando la compatibilidad con todos los navegadores: Es nuestra responsabilidad técnica permitir que nuestra aplicación web se ajuste de forma correcta en cualquier tamaño de pantalla, por esta razón, incluimos los prefijos que leerán los navegadores. Existen muchas herramientas en la web que nos facilita la obtención de estos prefijos, en lo personal utilizo Autoprefixer.
Te invito a que sigas aprendiendo de las propiedades de Flexbox para que implementes de forma rápida y más simplificada las interfaces de usuario de su sitio web, sin preocuparse por la correcta visibilidad de todo el contenido.
También puedes aplicar interesantes propiedades de Flexbox para los contenedores "hijos", con el fin de resolver múltiples casos de diseños presentados de su aplicación.
Comentarios
Publicar un comentario