Guía CushyCMS. Permite que otros administren el contenido de tu web

CushyCMS es un gestor de contenidos online para sitios web que te permitirá seleccionar los elementos que deseas que sean gestionados por otras personas mientras que tú continúas teniendo el control del sitio.

Si te dedicas a crear sitios web pero necesitas ofrecer a otros usuarios un cierto control sobre la edición de algunos elementos, CushyCMS puede ser la solución gracias a su facilidad de uso y a que te permitirá mantener un perfecto control sobre lo que deseas, exactamente, que sea gestionado por ejemplo por los dueños de la información de un sitio web de tu creación.

Su funcionamiento es, como señalábamos, bastante sencillo, tanto para el diseñador que deberá “preparar” las páginas y elementos editables, como para los editores autorizados que deberán acceder a estos elementos para modificarlos. Para empezar a utilizar CushyCMS, en primer lugar tendrás que poseer un sitio web funcionando bajo tu propio dominio, y que éste disponga además de acceso mediante ftp.

Una vez tengas listo tu sitio web, sólo tendrás que acceder al panel de control online de CushyCMS y después añadir tu sitio web a la aplicación. Después, tras acceder a los archivos que componen una página web y seleccionar aquellos que deseas modificar para que sean editables desde CushyCMS, deberás implementarles un código dentro de sus estructuras, tal como te mostraremos en este práctico paso a paso.

Como comprobarás a continuación, cuando esté todo preparado tanto tú mismo como los editores a los que generes una cuenta de acceso podréis modificar los contenidos de un sitio web de una forma sencilla, a través de un práctico editor “wysiwyg” muy intuitivo que os permitirá editar los elementos concretos que tu hayas seleccionado de cada página. Por último cabe señalar que los editores por ti designados accederán a un panel de control limitado con relación a las funciones a las que tú tendrás acceso, por lo que podrás mantener el control sobre el sitio web en todo momento. A continuación te mostramos cómo configurar este completo gestor online para que otros puedan editar los contenidos de tus páginas web.

1 Acceso y registro en CushyCMS
Para empezar a utilizar CushyCMS sólo tienes que abrir tu explorador de Internet favorito y a continuación dirigirte a la página web http://www.cushycms.com/. Después, una vez se cargue la página de inicio de este sitio web, haz clic sobre el botón Sign up for free para iniciar el proceso de registro necesario para acceder a todas las funciones de la aplicación de manera totalmente gratuita. A continuación, en el formulario de registro al que has sido conducido, introduce un nombre de usuario en el campo Your Name, una dirección de correo electrónico válida en el campo Email, y una contraseña de acceso en el campo Password. Después marca la casilla de verificación Agree To The Terms Of Service y luego pulsa el botón Get Started para finalizar el proceso de registro.

2 Añadir un sitio web
Una vez registrado en la aplicación, ésta te conduce automáticamente al Panel de Control (Control Panel) donde, en primer lugar, deberás añadir a CushyCMS el sitio web que deseas editar y permitir a otros que editen. Para ello haz clic sobre el botón Add Site en el apartado Sites & Pages del Panel de Control. Después, en el nuevo formulario que aparece, introduce en primer lugar la dirección web completa o URL del sitio que deseas añadir para su edición a CushyCMS en el campo Site Url situado en la parte superior. A continuación, en el apartado FTP Details de este formulario, introduce la dirección del servidor en el que está alojado el sitio que deseas gestionar con CushyCMS en el campo Server.

Observa que este dato, así como los siguientes, debería habértelos proporcionado tu proveedor de alojamiento en Internet (Hosting), y que, normalmente, serán los mismos que utilizaste para subir los archivos de la página web que te dispones a editar con el cliente FTP o editor web que sueles utilizar para este fin. Una vez clarificado este punto, continúa introduciendo los datos requeridos en el formulario Add Site de CushyCMS. En el siguiente campo, User, deberás escribir el nombre de usuario con el que accedes al servidor FTP en el que está alojada la página que deseas editar. Mientras que en el campo Password tienes que introducir la clave de acceso al servidor en caso de que fuera necesaria.

Por último haz clic sobre el enlace Choose situado a la derecha del campo Path, y a continuación localiza en el explorador que aparece justo debajo la carpeta remota raíz en la que está alojada la página web que te dispones a editar. Una vez hecho esto, simplemente pulsa el botón Add Site situado en la parte inferior del formulario para que la página seleccionada sea añadida a CushyCMS.

3 Asignar una página del sitio
Una vez añadido correctamente el sitio que deseas gestionar a CushyCMS, la aplicación te conduce al siguiente paso. Aquí, si todo a funcionado correctamente, debería aparecer la dirección del sitio web que acabas de añadir a la aplicación en la parte superior del apartado Sites & Pages del Panel de control, así como el enlace Assign page to site….  Haz clic sobre este enlace para asignar una página del sitio para su edición desde CushyCMS. De manera automática la aplicación te conduce al panel Assign Page, el cual muestra en su parte inferior un explorador conectado con el sitio remoto en el que tienes alojadas las diferentes páginas de que consta el sitio web con el que estás trabajando. Selecciona en este explorador de archivos la página que deseas convertir en editable desde CushyCMS.

Como puedes ver, ahora aparece la URL de la página seleccionada en el campo situado en la parte superior de este panel, y justo debajo el campo denominado Page Name. Introduce en este último campo un nombre para la página que deseas editar con la aplicación, y después comprueba que en el campo File Path aparece la página seleccionada. Por último, dirígete a la parte inferior de este panel y haz clic sobre el botón Assign Page para que la página seleccionada esté disponible para su edición desde CushyCMS.

4 Edición de la página
Una vez asignada una página del sitio a la aplicación para su edición, su nombre aparecerá en el apartado Sites & Pages del Panel de control de la aplicación. Haz clic sobre este enlace para acceder al siguiente paso.

4.1 Asignar un elemento para su edición
Antes de nada, deberás indicar a la aplicación qué elementos de la página web puedan ser editados por ti o por otros usuarios autorizados. Para ello, deberás añadir unas pocas líneas de código con el editor HTML que sueles utilizar a cada uno de los elementos que deseas convertir en editable. En la práctica el método para llevar a cabo estas modificaciones es abrir la página en la que deseas incluir una etiqueta de clase css con el atributo cushycms on (css class of cushycms on) en el editor HTML que sueles utilizar, por ejemplo Dreamweaver, y a continuación localizar el elemento que deseas convertir en editable, por ejemplo, en modo Dividir, así podrás seleccionar el elemento y al mismo tiempo visualizar la línea de código que le corresponde.

Una vez localizado un elemento, por ejemplo una imagen de la página seleccionada, introduce la etiqueta class=”cushycms” en la línea de código correspondiente, tal como muestra la imagen de ejemplo. Después, simplemente guarda la página con las modificaciones realizadas y vuelve a subirla a tu servidor ftp directamente con Dreamweaver, o utilizando un cliente ftp, para que la página existente sea reemplazada por la nueva con las etiquetas que permitirán a la aplicación editar los elementos seleccionados.
Una vez transferida correctamente la página con las modificaciones a la carpeta remota correspondiente, vuelve a la interfaz de la aplicación donde la habíamos dejado y a continuación pulsa el botón Try Again. Si todo ha funcionado correctamente ahora deberías estar viendo una página denominada Edit Content. Aquí sólo tienes que pulsar sobre el botón Examinar situado junto al campo Upload New Image para seleccionar una imagen que reemplace a la que convertiste en editable en el paso anterior. Localiza la imagen en el diálogo que aparece y luego pulsa Abrir. Por último, haz clic sobre el botón Publish Page para que la nueva imagen reemplace a la anterior en la página web seleccionada.

4.2 Otras opciones de edición de contenidos
Aunque en el paso anterior hemos visto a través de un ejemplo práctico cómo asignar un elemento imagen de una página web a CushyCMS para convertirlo en fácilmente editable desde la aplicación, es muy posible que desees conocer todas las opciones de edición de contenidos que brinda esta completa aplicación online, así podréis tú y las personas que tú autorices editar desde la interfaz de CushyCMS todo tipo de elementos constitutivos de una página web.

En primer lugar observa que Cushy te permitirá a ti y a otros usuarios autorizados editar fácilmente, tal como te mostramos en el paso anterior, cualquier tipo de elemento de una página web en el que incluyas una etiqueta de clase css con el atributo cushycms.

Observa, además, que si cualquier elemento de la página web que deseas editar con la aplicación ya incluye una etiqueta de clase css también es posible aplicarle la etiqueta cushycms.

Por otra parte, a los editores les puede resultar de gran ayuda diferenciar las secciones o elementos de una página web que son editables y los que no lo son, algo que puedes conseguir añadiendo etiquetas con el atributo “title” a las partes editables.

En cuanto a la edición de imágenes, aunque ya hemos visto un ejemplo de edición en el paso anterior, Cushy permite a los editores autorizados, además de cambiar las imágenes que incluye una página web, incluir etiquetas para que el alto y el ancho de un imagen sea redimensionado de manera “inteligente” para cubrir exactamente el área disponible en una sección.

Observa que, tal como muestra el ejemplo, la imagen subida con CushyCMS sería redimensionada, en este caso, para que tuviera una anchura (width) de 250 px y una altura (height) de 100 px. Y si fuera necesario la aplicación se encargaría incluso de recortar la imagen.
La imagen subida a la aplicación y que reemplazaría a la incluida por la página web que estamos editando sería redimensionada para que tuviera un ancho (width) de 250 px. Mientras que la altura de la imagen mantendría su ratio original.

Por último, si deseas que una imagen sea subida a la aplicación sin ser redimensionada, deberías utilizar el código correspondiente.
Cushy utiliza diferentes métodos de edición dependiendo del tipo de contenido. Y aunque de manera automática la aplicación selecciona el método más apropiado dependiendo del tipo de elemento, es posible que en algunas ocasiones desees “forzar” un cierto tipo de contenido. En estos casos puedes utilizar de manera alternativa las etiquetas.

El ejemplo que puedes ver en la imagen se utiliza para editar contenidos como texto plano (plain text), y puede serte de utilidad, por ejemplo, para editar código del lado del servidor o si prefieres escribir tu código HTML manualmente.

El siguiente ejemplo muestra una etiqueta que permite convertir cualquier carácter especial introducido en una entidad HTML. Por ejemplo, © se transformaría en ©

Por ultimo, si incluyes en un elemento la etiqueta que puedes ver en la imagen de más arriba éste será presentado en el editor con botones que te permitirán realizar tareas básicas como crear listas, enlaces, etc.

Cushy puede trabajar también con lenguajes dinámicos, pero en algunas ocasiones le puede resultar difícil descifrar ciertos documentos cuando contienen una mezcla de HTML y scripts del lado del servidor tales como PHP. Por esta razón es altamente recomendable colocar el contenido editable en un archivo “stand-alone” estático.

En un escenario de estas características lo más aconsejable sería optar por dirigir Cushy al archivo contact_static.html para su edición.
Para finalizar cabe destacar que todavía existen muchas más opciones de edición con Cushy.

5 Añadir editores
Ahora que ya sabes cómo preparar los distintos elementos que componen una página web añadiendo etiquetas de clase css de CushyCMS en su código para que resulten accesibles y fácilmente editables desde la aplicación, sólo te resta generar las cuentas de usuario para los editores que tú designes, así también ellos podrán modificar estos elementos, por ejemplo, para mantener actualizada la información de una página web. Para ello, en primer lugar, vuelve al panel de control en la interfaz de CushyCMS, y a continuación ha clic sobre el botón Add Editor en el apartado Editors de esta página.

Ahora, una vez se muestre la página Add Editor, introduce en el apartado Editor Details el nombre del editor que deseas autorizar en el campo Name y su dirección de correo electrónico en el campo Email. Después en el apartado Pages Allowed To Edit marca la casilla o casillas de verificación de los sitios y las páginas web a las que tendrá acceso el editor que te dispones a designar. Por último, haz clic sobre el botón Add Editor nuevamente en la parte inferior de esta sección para que el editor que acabas de designar reciba automáticamente un correo electrónico con instrucciones y una clave de acceso para acceder a la aplicación y a los sitios y páginas a los que ha sido autorizado.

Una vez finalizado el proceso serás conducido nuevamente al panel de control de la aplicación donde, como puedes ver, ahora aparece el nombre del nuevo editor añadido en el apartado Editors. Observa también que en cualquier momento puedes deshabilitar un editor, por ejemplo, si ya no deseas que siga teniendo acceso a una página web, con tan sólo pulsar el enlace Delete situado a la derecha de su nombre en el apartado Editors. Mientras que si deseas modificar por cualquier causa los permisos, esto es, las páginas o sitios web a los que un editor tiene acceso, también puedes hacerlo fácilmente. Para ello, sólo tienes que pulsar el enlace Permissions situado a la derecha del nombre de cada editor autorizado.

Después, una vez seas conducido al panel Editor Permissions del usuario seleccionado, simplemente modifica, activando o desactivando las casillas de verificación correspondientes, las autorizaciones de acceso a los sitios y páginas web que incluye el apartado Pages Allowed To Edit. Luego pulsa el botón Save Changes para que los cambios sean procesados. Observa que, de esta manera, siempre tendrás un control efectivo sobre los sitios y páginas a los que puede acceder y editar cada usuario autorizado en cada momento.

5.1 Acceso a la aplicación de los editores autorizados
Una vez hayas autorizado uno o varios editores, éstos recibirán, tal como señalábamos más arriba, un correo con instrucciones y una clave de acceso a la aplicación que les permitirá editar los elementos de los sitios y páginas web para los que están autorizados. Para ello, sólo tendrán que apuntar los User ID y Password que incluye este correo y a continuación hacer clic sobre el enlace para ser conducidos directamente a la interfaz de la aplicación.

Una vez se abra la página Login en la interfaz de CushyCMS, el editor invitado sólo tendrás que introducir su correo y clave de acceso en los campos Email y Password, y después pulsar el botón Login para acceder directamente a los sitios y páginas web a los que está autorizado. A continuación, para empezar a editar los elementos modificables de cada página sólo tendrán que acceder a la página en cuestión pulsando sobre ella en el apartado Sites & Pages del panel de control y, por último, realizar las modificaciones pertinentes en los elementos editables de cada una de ellas, y luego publicar los cambios para que sean visibles en la Web.

Como has podido comprobar CushyCMS es un potente aliado para aquellos diseñadores o creadores de páginas web que necesitan delegar la edición de ciertos elementos, por ejemplo, sobre los dueños de la información que aparece en una página web, ya que una vez preparados los elementos editables resultan bastante fáciles de modificar incluso para personas que no tienen conocimientos avanzados de informática.

CushyCMS Pro, la versión de pago
Aunque CushyCMS ya resulta un gestor de contenidos web bastante potente y versátil en su versión gratuita, existe una versión Pro de la aplicación a la que puedes acceder por 28 $ al mes. Si te dedicas al diseño de páginas web como hobby o por motivos académicos seguramente la versión gratuita de Cushy sea suficiente para ti, pero si eres un diseñador de páginas web profesional con una amplia cartera de clientes a los que deseas ofrecer este servicio, quizá te pueda resultar de interés optar por la versión Pro de Cushy.

Por este desembolso adicional los desarrolladores de esta interesante aplicación online ofrecen, por ejemplo, la posibilidad de utilizar tu propio logo en la página de acceso de los editores autorizados, así el servicio ofrecido tendrá un carácter más profesional, ya que en todo momento el cliente trabajará en el entorno de tu compañía.

Por otra parte, también obtendrás un dominio personalizado, tanto par ti como para tus editores autorizados, lo que también puede reforzar tu imagen, así como un esquema de colores personalizado para las pantallas y paneles de la aplicación, los cuales podrás hacer coincidir, por ejemplo, con los colores de tu agencia, para que todo resulte más homogéneo para tus clientes.

Por último la versión Pro de CushyCMS también ofrece la posibilidad de utilizar etiquetas de clase css del tipo “clienteeditor” en vez de “cushycms” en el código HTML, así como un número ilimitado de sitios, páginas y editores.

Ir arriba