Maquetado web

Cuando se diseña un sitio web por primera vez desde cero hay que pasar por una etapa que se llama Maquetación Web, en el sentido más estricto consiste en la realización de diagramas de como estará distribuida los espacios, contenidos textuales, imágenes, y en algunos casos multimedia (video y audio), pero textualmente se puede definir a la maquetación web como:

Una disciplina frontend mediante la cual se define y posiciona el contenido de páginas web, atendiendo a una estructura adecuada para la lectura y una presentación de la información atractiva.

Escuela,it

Otra definición de Maquetación web es:

Consiste en tomar el diseño y la arquitectura de un sitio web y convertirlo en código para el programador. Esta es una profesión muy demandada que requiere de conocimientos de varias disciplinas, como estilos CSS, HTML.

ecured.cu

La analogía perfecta para este concepto es, que la maquetación web es como cuando un arquitecto, decide crear diversos prototipos de fachada de una casa para un cliente, es decir, si al éste le gustaría una fachada (entendiendo como fachada a la parte de enfrente de una casa) mas minimalista, o con ventanales grandes que incluya protectores, o el estacionamiento al frente, o con plantas de ornato a la entrada de la puerta principal, limite aquí es la imaginación para la creación de la fachada, esta etapa es cuando estas decidiendo como estará distribuida tu página, si llevará pie de página, encabezado, o si el contenido del sitio ocupara todo el cuerpo de la página o solo una parte, donde tendrás el menú de opciones del sitio, entre otros detalles.

Hay que agregarle a la analogía los materiales que vayan a utilizar que al mezclarlos permiten que la fachada quede perfecta. Los materiales son como el lenguaje de marcado HTML (HiperText Markup Language, por sus siglas en ingles) y las hojas de estilo en cascada CSS (Cascading Style Sheets, por sus siglas en ingles), son como los colores de los materiales que se estén utilizando.

Es importante recalcar que en este proceso empieza a verse involucrado los colores, que permite que al combinarlos sea un sitio atractivo para el usuario final, puede llegar a “programarse” los colores con las hojas de estilo (CSS), en combinación con elementos flotantes del lenguaje de marcado (HTML).

Un dato a tener presente, es que el sitio debe de consumir el menor tiempo de carga para el navegador del usuario final, ya que un sitio que tenga mucha animación que lo haga muy vistoso lo único que generará es que el usuario final abandone el sitio. Para poder lograr esto, el profesional de maquetado web debe de dominar muy el lenguaje de marcado, las hojas de estilo en cascada y javascript.

Las imágenes deben de ser preferentemente en formato png o gif, con un peso preferentemente en kb, es recomendable usar la etiqueta div para la segmentos de la página a usar el elemento table, diferencia, el navegador carga más rápido los div, las tablas va dibujando los marcos en cada carga y eso es tardado.

Actualmente ya existen framework que permiten agilizar todo este proceso de maquetado, uno de los mejores y mas usado es Bootstrap, que viene con una serie de plantillas estándar donde se maneja el html5, css3 y jscript. Las acciones básicas que contiene es que si creas un formulario puedes hacer uso de la validaciones clásicas, es decir, que el usuario teclee números donde tiene que escribirlo, letras donde deba de colocarlos y datos alfanuméricos donde deba de llevarlos. Esto agiliza un gran tiempo en el desarrollo de aplicaciones del lado del frontend

Referencias:

Escuela.it, “Maquetación Web”. Extraido de: https://escuela.it/materias/maquetacion-web#:~:text=La%20maquetaci%C3%B3n%20web%20es%20una,presentaci%C3%B3n%20de%20la%20informaci%C3%B3n%20atractiva. Recuperado: 27 de junio 2020.

Ecured.cu, “Maquetación Web”, Extraído de: https://www.ecured.cu/Maquetaci%C3%B3n_web. Recuperado: 27 de junio 2020.