Si bien tenemos muchas opciones disponibles cuando hablamos de diseño web sin programar, es necesario aclarar que todos estos métodos tienen sus limitaciones en cuanto al tipo de sitio que puedes armar. Es importante poder reconocer la presencia de estas tecnologías, y así, poder decidir cuál queremos para nuestro proyecto de diseño web.
Para un mejor entendimiento, explicaremos primero de qué se tratan y cómo se complementan estas tecnologías. A través de ciertos conceptos sencillos que debes conocer primero, serás capaz no solo de utilizar tus habilidades de diseño para crear un sitio de estética envidiable sino también de funcionalidad eficiente.
#1: Lenguaje de marcado: HTML:
En español significa Lenguaje de Marcado de Hipertexto. No es precisamente un lenguaje de programación sino de maquetado. Con él se crea la estructura de todo lo que se ve y existe en una página web. Este hipertexto es transmitido desde el servidor donde se aloja el sitio web hacia el dispositivo donde se quiere visualizar. Lo que se transmite del sitio es precisamente este texto que el navegador (Google Chrome o Microsoft Edge por ejemplo) reinterpreta como una página web.
Actualmente se utiliza solo para crear la estructura o esqueleto del sitio web, ya que todo el aspecto visual como: colores, sombras, tipografías y demás han sido relevados a las hojas de estilo CSS. Ambos conforman la parte visual de una página web.
#2: Lenguaje de programación: PHP o Javascript
Tener la forma y la estructura no implica que ya tenemos un sitio web completamente funcional, porque falta la otra parte: la parte funcional. La misma se encarga de generar el comportamiento y la interacción con el usuario deseada, todos aquellos aspectos que exceden lo meramente visual, como hacer ciertos cálculos, enviar mensajes y cualquier acción que se requiera dentro del sitio.
Estas acciones exceden las posibilidades del lenguaje HTML y CSS por lo que deben incorporarse al sitio web para poder lograr obtenerlas. Pero sabemos que la programación no es para todos y los perfiles profesionales como el del diseñador gráfico o web no se avocan a estas prácticas por lo que puede que necesitemos a un profesional extra que se encargue de esto.
Sin embargo, es posible saber cómo crear una página web sin necesidad de contratar a un profesional de la programación gracias a estos sistemas y plataformas tan útiles. Si bien existen muchas opciones, distinguiremos una en particular por ser parte de una filosofía de código abierto y colaboración con la comunidad. Para esto, entraremos al mundo de WordPress.
WordPress es un sistema de gestión de contenidos dinámicos, es decir que puedes crear un sitio web completamente funcional con módulos y temas disponibles para elegir. El sistema es completamente gratuito y es de código abierto, que significa que lo puedes editar para adaptarlo a las propias necesidades del proyecto. Este software está desarrollado en PHP, por lo que cubre un sinfín de posibilidades algorítmicas y funcionales de las que el usuario final no debe ocuparse ni preocuparse.
Aprovechando el sistema modular de WordPress, utilizaremos el plugin Page Builder by SiteOrigin, aunque cabe destacar que existen muchas otras opciones de plugins disponibles que pueden brindarte una experiencia similar.
Antes de poder diseñar nuestro sitio web, seguiremos los siguientes pasos para obtener lo que necesitamos, pero antes debes tener una instancia de WordPress instalada y funcionando. Si no sabes cómo instalarlo, puedes seguir los pasos de este tutorial.
#A: Instala el plugin: Page Builder
Para ello, nos dirigiremos a la sección de plugins de nuestro sitio WordPress, hacemos clic en “Añadir Nuevo” y luego en el cuadro de búsqueda escribimos “Page Builder”.
#B: Instala el tema: Unwind:
Esto no es precisamente necesario ya que el plugin recientemente instalado no tiene límites ni restricciones con respecto al tema que puedes usar. Sin embargo, el plugin es cuestión fue desarrollado por los creadores de Page Builder, el cual es totalmente compatible y nos servirá a los propósitos pedagógicos.
Para instalarlo y activarlo, dirígete a la sección Apariencia -> Temas. Luego hacer clic en “Añadir nuevo”, escribir: “Unwind” en el cuadro de búsqueda, “Instalar” y a continuación en “Activar”.
Una vez hecho esto, procederemos a crear nuestros propios diseños web dentro del sitio WordPress que nos brindará la potencia y versatilidad de los miles de plugins disponibles para agregar la funcionalidad que necesites para tener éxito con tu proyecto web.
¿Cómo funciona Page Builder?
Utilizar este plugin es muy sencillo ya que solo requiere que especifiques una grilla o estructura de página con filas y columnas en las que luego puedes rellenar con el contenido que quieras como widgets, imágenes y demás.
Su simplicidad se debe principalmente a que utiliza el conocido método: arrastrar y soltar con una interfaz de usuario muy amigable e intuitiva.
Para comenzar, debes crear una página nueva la cual diseñaremos con esta poderosa herramienta.
Una vez dentro del sistema de Page Builder, podremos incrustar filas con las columnas que queramos para luego arrastrar el contenido deseado. Haz clic en agregar fila y decide la cantidad y distribución de las mismas.
Luego selecciona uno de los recuadros creados y haz clic en “Agregar widget” en el cual se desplegará un cuadro donde podrás elegir el elemento en cuestión.
Sobre estos widgets debemos decir que hay una gran variedad para que puedas colocar prácticamente lo que quieras como los siguientes:
- Cuadro de texto
- Carrusel de imágenes
- Vídeo
- Mapa
- Imagen
- Botón
- Tabla
- Editor de texto
Y muchos más, por lo que te animamos a que los explores todos para conocer las posibilidades casi ilimitadas que tienes en mano con esta fantástica herramienta.
Este proceso es aplicable con cualquier tema que quieras o tengas instalado en tu sitio, dando flexibilidad al mismo y haciendo posible poner en práctica tus habilidades de diseño sin las limitaciones de conocimiento de programación y otras tecnologías detrás de las páginas web. No olvides crear contenido de calidad para que la experiencia del usuario sea destacable y por consiguiente te posiciones en la cima de los resultados de búsqueda.
