7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Node.js

Introducción a Webhook: CMS personalizado y creador de sitios web

Scroll to top
Read Time: 10 mins

Spanish (Español) translation by Naudys Angulo (you can also view the original English article)

Webhook es una nueva plataforma de construcción de sitios que fue respaldada con éxito en Kickstarter en mayo de 2014 y acaba de ser lanzada al público. El concepto detrás de Webhook es, si me disculpan el entusiasmo, absolutamente brillante.

Una de las peticiones más escuchadas en muchas comunidades de CMS es "¿Cómo puedo personalizar el sistema para (rellenar el espacio en blanco)?". Los chicos detrás de Webhook querían abordar esta necesidad común, pero en lugar de crear un nuevo CMS preelaborado con la idea de hacerlo extensible, llevaron las cosas un paso más allá y preguntaron: "¿Y si creamos un constructor de CMS en su lugar?".

La característica más exclusiva de Webhook, y que posiblemente cambie las reglas del juego, es que para cada sitio se puede controlar exactamente qué tipo de contenido se puede publicar a través de simples constructores de formularios de arrastrar y soltar en el área de administración.

Digamos que necesitas publicar podcasts, pero no quieres lidiar con las típicas entradas y páginas del blog. Crearías un tipo de contenido "Episodios" y arrastrarías y soltarías los campos a través de los cuales puedes introducir los nombres de los episodios, escribir las reseñas de los mismos y subir los archivos de los podcasts.

O, ¿qué pasa si quieres un blog, pero también quieres un lugar para mostrar una galería de vídeos? También puedes hacerlo, solo tienes que "arrastrar y soltar" un área de publicación de blog tradicional más otra sección dedicada a añadir vídeos.

¿Y qué tal si necesitas crear varios tipos de contenido diferentes que tengan relaciones complejas entre sí? Sí, también puedes hacerlo. Sin llegar al comercio electrónico o a la gestión de socios, cualquier cosa que necesite tu sitio puedes crear la interfaz del CMS que se adapte a él.

El principio fundamental de Webhook es que debes tener la capacidad de crear fácilmente un CMS con todo lo que necesitas y nada que no necesitas, para cada proyecto. Vamos a echar un vistazo a cómo funciona Webhook, y cómo se puede empezar con él.

Webhook: Local y en vivo

Webhook vive en dos lugares:

  1. La versión de desarrollo en tu máquina local.
  2. El sitio en vivo en el servidor de Webhook, en (tu sitio).webhook.org o en tu propio dominio.

Instalas Webhook localmente y construyes tu sitio offline (sin conexión) para que puedas tener el área de administración, la presentación y el contenido justo como lo quieres. Luego lo despliegas en el servidor en vivo cuando estés listo. A partir de ese momento también puedes actualizar continuamente tu sitio localmente y volver a desplegarlo tantas veces como quieras.

Instalación de Webhook

Webhook se instala en sólo un par de minutos a través de la línea de comandos a través de NPM.

Después de asegurarte de que Node.js está instalado, abre un terminal (Mac / Linux) o una línea de comandos (Windows) y ejecuta el comando:

Nota: es posible que tengas que añadir el comando "sudo" para obtener privilegios de administrador en Mac o Linux.

Esto descarga todos los archivos necesarios de Webhook y configura tu ordenador para que puedas crear y gestionar sitios Webhook desde la línea de comandos.

Creación de un sitio Webhook

Una vez que Webhook está instalado, puedes seguir adelante y crear un sitio ejecutando el comando:

En tu terminal tendrás que introducir la dirección de correo electrónico que tienes asociada a Webhook, y establecer o introducir tu contraseña:

Cuando la configuración del sitio esté completa, verás una confirmación:

¿Qué ha pasado? Verás que se ha creado una carpeta local con el nombre que especificaste durante la creación y que se han descargado en ella los archivos necesarios:

Ahora estás listo para ejecutar tu servidor local de Webhooks para que puedas trabajar en tu sitio sin conexión antes de desplegarlo en vivo. Para hacer esto, primero ve a la carpeta de tu sitio en tu terminal ingresando:

Luego ejecuta este comando:

Tu sitio local se abrirá automáticamente en tu navegador por defecto, y lo verás:

Cuando hagas clic en el enlace ¿Buscas el CMS? tendrás que iniciar sesión, y luego serás llevado a una pantalla en la que tienes que decidir si quieres utilizar un tema Webhook existente o crear uno desde cero:

Los temas de Webhook juegan un papel bastante diferente a los de otras plataformas, por lo que antes de continuar es necesario que entiendas lo que realmente estás eligiendo cuando seleccionas un tema de Webhook o eliges crear uno nuevo.

Por qué los temas de Webhook son diferentes

En un CMS tradicional los temas controlan el aspecto de un sitio, mientras que los tipos de contenido y sus métodos de entrada se gestionan por separado. Sin embargo, en Webhook el tema determina no solo la presentación sino el tipo de contenido que el sitio acepta, así como la forma en que ese contenido se publica a través del panel de administración.

Por ejemplo, si instalas el tema preelaborado "Podcast y blog" obtendrás un front-end diseñado a propósito con inclusiones como enlaces a iTunes, reproductores de audio, enlaces de descarga, etc:

Pero también obtendrás un área de administración diseñada específicamente para el tipo de contenido que publicarás en tu sitio:

Fíjate en los tipos de contenido relacionados con el podcast: "Miembros del reparto", "Episodios" y "Detalles del podcast". Observa también cómo en la captura de pantalla anterior de la interfaz de publicación de "Episodios" solo tiene campos específicos para publicar un podcast, es decir, número de episodio, inserción de archivos de audio, etc. No tienes que trabajar con campos de entrada de contenido superfluos que no se utilizarán.

Tanto los elementos del front-end como lo que se ve en el back-end están controlados por el tema. Así que en cierto sentido, para cada sitio Webhook el tema es el CMS.

En muchos sentidos esto tiene mucho sentido. En cualquier plataforma un tema tiene que alinearse con el tipo de contenido que se puede publicar en el sitio. En un CMS tradicional, si se añade un nuevo tipo de contenido personalizado, por ejemplo mediante un plugin, a menudo no puede utilizarse si el tema no lo admite. El enfoque de Webhook asegura absolutamente que el tema y los tipos de contenido de un sitio coinciden perfectamente al contenerlos en el mismo sistema.

Partiendo de un tema preelaborado

En futuros tutoriales cubriremos en profundidad cómo construir tus propios temas personalizados de Webhook, así que para los propósitos de introducción a la plataforma fui con la opción preelaborada. Esto me dio ocho temas para elegir.

Seleccioné "Bootstrap blog", que es un tema de blogging sencillo diseñado con Bootstrap que ofrece los tipos de contenido "Artículos" y "Acerca de mí" en el área de administración:

Después de añadir algo de contenido, el front-end de mi sitio local tenía este aspecto:

Despliegue en tu sitio real

Tomar lo que has creado localmente y desplegarlo en tu sitio en vivo también es increíblemente fácil. Abre un terminal en la carpeta que alberga tu sitio local y ejecuta el comando:

Nota: Me resultó más fácil abrir una segunda terminal para hacer esto, porque eso me permitió dejar la primera terminal que abrí ejecutando el proceso de mi sitio local de Webhook.

Cuando el despliegue sea exitoso, recibirás una confirmación en tu terminal junto con un recordatorio de la URL en la que puedes ver tu sitio en vivo:

Puedes visitar el sitio de demostración creado anteriormente en http://tutsplusdemo.webhook.org/

Administración básica / Personalización del tipo de contenido

Como mencioné anteriormente, le daremos tutoriales completos sobre la tematización de Webhooks en un futuro próximo. No obstante, veamos un ejemplo sencillo de personalización de uno de los tipos de contenido de nuestro sitio para que te hagas una idea de lo fácil que puede ser.

Por defecto, la página "Sobre mí" muestra un título y una biografía:

Vamos a añadir la posibilidad de añadir una URL del sitio web al final de la página.

Añadir un nuevo campo de entrada de contenido / Widget

Dirígete al área de administración y haz clic en Añadir / Editar Tipos de Contenido en la barra lateral izquierda:

Se te mostrará una lista de los tipos de contenido existentes:

Haga clic en la entrada Acerca de mí y serás llevado al sistema de construcción de formularios. En la parte izquierda de la pantalla verás todos los diferentes tipos de campos de entrada de contenido que puedes añadir, llamados "Widgets" en la terminología de Webhook. Busca el widget Sitio web en la sección Específicos y arrástralo desde el lado izquierdo y suéltalo en el derecho:

Haz clic en el botón Guardar formulario en la parte inferior derecha de la interfaz:

Una vez que hayas guardado el formulario, irás al formulario de entrada de contenido que acabas de actualizar, donde verás el nuevo campo Sitio web. Al pasar el ratón por encima del campo también se te mostrará la etiqueta que debes utilizar para mostrar tu contenido a través del archivo de plantilla correspondiente:

Actualizar el archivo de plantilla

En la subcarpeta "pages" de este tema se encuentra el archivo de plantilla "about.html" que controla la presentación de la página "About Me". Cubriremos más sobre cómo funciona el sistema de plantillas en nuestro tutorial completo de tematización de Webhooks.

Por ahora, puedes simplemente abrir el archivo "about.html" y localizar la línea que dice:

Debajo de esa línea añade lo siguiente:

Guarda el archivo y tu sitio local detectará el cambio y se actualizará automáticamente, momento en el que verás tu nuevo enlace debajo del texto principal:

Más funciones impresionantes de Webhook

Después de experimentar toda la funcionalidad que he descrito anteriormente, ya estaba enormemente impresionado por Webhook y estaba pensando en las aplicaciones para las que podría utilizarlo, pero todavía encontré más características que continuaron despertando mi interés.

Los temas permiten aprovechar NPM

Con los temas de Webhook no solo puedes controlar los datos, la presentación y el área de administración, sino que también puedes hacer que obtengan paquetes NPM durante la instalación.

Esto significa que puedes hacer cosas como tirar de un paquete de preprocesadores para que los archivos LESS / Sass / Stylus puedan ser compilados sobre la marcha. Cada vez que sirves tu sitio local de Webhooks se ejecuta una tarea "grunt watch" por lo que puedes personalizar el Gruntfile incluido para manejar este tipo de operaciones.

También significa que puedes incorporar cualquier herramienta que esté disponible a través de NPM como frameworks de preprocesadores, plugins de jQuery y cualquier otra cosa útil que puedas encontrar entre los casi 80.000 paquetes disponibles.

Puedes incluso dar estilo al área de administración

Debido a que todo el CMS se controla desde la carpeta de tu tema, también tienes el control sobre la forma en que está diseñado. Todo lo que tienes que hacer es añadir un enlace a tu propio CSS personalizado en el archivo de plantilla pages/cms.html. Por ejemplo, puedes añadir tu propio estilo para que los campos de texto sean más anchos que los predeterminados:

Y, por supuesto, también puedes crear un estilo más completo para modificar completamente la combinación de colores, la tipografía y cualquier otra cosa que elijas.

Aprende más

Observa estos magníficos screencasts que demuestran lo que puede hacer Webhook:

Otros enlaces útiles:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.