Crea una web dinámica sin programar

Hasta ahora, si querías una página web y no sabías programar, podías utilizar gestores de contenido como Wix que ofrecen una plantilla, multitud de funcionalidades extra y un gestor muy amigable para introducir y personalizar el contenido. Sin embargo, si el proyecto es un poco más ambicioso, este tipo de herramientas se quedaba a medio camino. ¿Te gustaría publicar tu colección completa de videojuegos o de un grupo de música? ¿gestionar listados de usuarios o clientes? ¿ofrecer a los usuarios que se registren en tu boletín de noticias? Para este tipo de funcionalidades web es imprescindible utilizar bases de datos, pero el conocimiento técnico va un poco más allá del HTML y CSS. Necesitarás conocer herramientas de gestión de base de datos para construir un modelo relacional de tablas en MySQL o PostgreSQL (por mencionar algunas). Cómo acceder a la información almacenada mediante queries e incluso interactuar con ésta mediante scripts DML para modificar, crear o borrar datos. Como veis, ya no sólo tendríamos que enfrentarnos a pintar el contenido en una web, si no a cómo administrar la información. Por suerte para muchos, Wix ha lanzado recientemente una mejora sustancial de su entorno de desarrollo que simplifica y facilita enormemente esta tarea: WIX Code. Sin tener conocimientos de programación avanzados y de base de datos, ahora sabrás cómo hacer una página web dinámica fácilmente.

Crea una web dinámica sin programar

Para explicar cómo funciona esta herramienta, vamos a centrarnos en un ejemplo práctico que precisamente fue la primera página que tuve que diseñar hace años para un vecino: quería publicar en una web toda su colección de cassettes, discos y vinilos LP / 7” del cantante Raphael (estamos hablando de más de 400 discos en varios idiomas). Mi vecino quería que cada disco tuviera su portada, datos del mismo (año de publicación, idioma, etc) así como todas las canciones que lo componían. Por aquel entonces, sin conocimientos de acceso a base de datos, tuve que picar a mano una a una todas las páginas. Tarea monstruosa, especialmente cuando había que hacer algún cambio que afectaba a todas las páginas.

¿Cuál hubiera sido la forma ideal de hacerlo? Guardar toda la información de los discos y las canciones en una base de datos. Diseñando una única página de contenido dinámico, se pintarían los datos de cada disco en función de los parámetros recibidos. Pero sin conocimientos avanzados de programación, esto es imposible. Si por aquel entonces hubiera existido Wix Code, lo podría haber hecho en menos de la mitad de tiempo y con un mantenimiento posterior ínfimo.

Lo que ofrece esta nueva herramienta es un entorno de trabajo en el que gestionaremos la información de forma amigable a través de una interfaz similar a una hoja de cálculo tipo Excel, aunque por detrás y de forma transparente al usuario, se almacena en una tabla de base de datos. Dentro del entorno de Wix Code, podremos crear Colecciones (lo que serían tablas en una BBDD convencional). Una colección es una hoja de cálculo en la que las columnas especifican el tipo de información y las filas serían cada elemento. En nuestro caso práctico, crearíamos una colección donde las columnas podrían ser Nombre, Año de publicación, Tipo, Idioma y Canciones. En las filas introduciríamos los datos de cada disco. Respecto a las Colecciones, comentar que podemos configurarlas para que además del propio administrador, cualquier usuario pueda interactuar con los datos (modificando, borrando o creando nuestros registros).

Una vez tenemos los datos almacenados en nuestra colección, los utilizaremos para poblar una página de contenido dinámico. A través del asistente, crearemos este tipo de página  y la asignaremos la colección de discos.  En este punto, debemos especificar un valor único que identifique de forma unívoca cada disco para generar su propia dirección URL. Para ello podríamos utilizar el título, o para ser más eficientes, en el proceso de creación de la colección crearíamos un campo numérico incremental que usaremos como “identificador” (1, 2, 3…). Dentro de la página de contenido dinámico, diseñaremos una plantilla para pintar el contenido de cada disco (imagen, título, canciones, etc).

Crea una web dinámica sin programar

Pero Wix Code no sólo ofrece esto. Imaginaros otro caso práctico con el que me topé hace muchos años cuando administraba un foro. Queríamos organizar un boletín de noticias semanal con información relevante para los usuarios, pero por ley de protección de datos sólo podíamos enviar la comunicación a los que hubieran concedido explícitamente su permiso. Para ello diseñamos un formulario en el que los usuarios introducían su e-mail y nos llegaba un correo con la solicitud. Manualmente lo introducíamos en un fichero Excel y cuando había que enviar la comunicación, copiábamos los correos electrónicos de la lista. ¿Principal problema? Que sólo había un Excel, ubicado en mi ordenador. Si otro administrador quería utilizar la lista, tenía que enviársela actualizada. Al igual que en el caso anterior, si hubiera tenido conocimientos más avanzados de programación, en lugar de mandar por correo electrónico la solicitud, hubiera guardado los e-mails de los usuarios en una base de datos que explotaría en el momento de enviar las comunicaciones. Con Wix Code podemos hacer esto sin tocar nada de código. Crearemos una colección para almacenar la información (por ejemplo, nombre y e-mail del usuario) que vincularemos con un form diseñado en el entorno de desarrollo de Wix. De esta forma, podremos mantener nuestro boletín de una forma mucho más eficiente. Un paso más allá, sería aprovechar la propia tecnología de Wix Code para generar una sección de backend desde donde podremos gestionar los datos de la colección. A través de una pantalla podríamos añadir, borrar o modificar datos.

Otra de las posibilidades que ofrece la herramienta son las interacciones con el usuario mediante acciones javascript (cuando se pulse un botón que se pinte un tooltip, por ejemplo). En realidad, utiliza el framework jQuery, que facilita enormemente el uso de javascript, como el acceso DOM a los elementos web. Es cierto que para estas opciones es necesario tener ligeros conocimientos de programación, pero el entorno de desarrollo de Wix Code está preparado para ofrecer dinámicamente una serie de opciones utilizando una práctica habitual en IDEs de desarrollo: pulsando CTRL+espacio aparecerá una ventanita con los métodos o acciones disponibles para el objeto con el que estemos trabajando.

Como veis, por suerte ahora tenemos a nuestra disposición herramientas que facilitan el acceso al diseño de páginas web complejas y elaboradas sin necesidad de tener conocimientos específicos de programación.

 

 

Sin Comentarios