Análisis de un editor de CSS poco convencional pero de gran utilidad y productividad. Es un producto que permite editar CSS y ver los resultados en tiempo real con el motor de varios navegadores.

Existen editores para todo y CSS no es una excepción. Sin embargo, el programa que nos ocupa no es un editor convencional, sino más bien podríamos decir que es un navegador con posibilidades de edición de las hojas de estilo CSS de las páginas que visitamos. No obstante, tampoco podemos decir que sea un navegador nuevo, sino que es una envoltura para distintos navegadores, que aporta utilidades adicionales para diseñar esquemas de página con CSS.

Stylizer es un producto comercial, pero que tiene una versión reducida que es gratuita. Al descargar la versión comercial disfrutamos del programa completo por 14 días, después de los cuales se queda limitado a la versión "Basic", que es gratuita. Podemos descargarlo desde la página de inicio de la compañía desarrolladora. http://www.skybound.ca/

Lo cierto es que ya había probado varios editores CSS y Stylizer no tiene nada que ver con otros productos revisados anteriormente. Mientras que otros editores se basan en una especie de editor de texto, con algunos paneles y formularios para agregar reglas y propiedades de estilos, CSS Stylizer va un paso por delante. Los editores que conocía permitían crear estilos CSS y en el mejor de los casos verlos en marcha sobre textos o elementos de prueba colocados por el propio editor automáticamente. En el presente programa la edición de las CSS se realiza sobre la propia página web que estamos visitando.

Sería, por decirlo de algún modo, un programa que permite editar estilos en vivo, es decir, sobre la propia página que se está visualizando, pudiendo editar los CSS de cualquier página web de Internet. Los resultados los vemos a medida que los vamos haciendo, directamente con el navegador real, tanto Internet Explorer como Firefox. Nosotros además podemos intercambiar el motor de navegación en cualquier momento, para saber cómo se vería el sitio en cualquiera de los browsers más utilizados, sin salir de Stylizer.

Así que, como dicen en la propia página del producto, si estás buscando un programa de edición de textos con ayudas y referencias para editar CSS, Stylizer quizás no te satisfaga, o al menos te resulte muy extraño. Pero es que este novedoso modo de editar las CSS en vivo tiene diversas ventajas, que mejoran sobre todo la productividad, pudiendo diseñar y aplicar estilos de una manera más rápida.

Funcionamiento del editor CSS Stylizer

Como decimos este editor CSS es lo más alejado que podamos imaginar a un editor de texto. Más bien parece un navegador. Para quien conozca Firebug, en algún momento Stylizer recuerda un poco a la extensión de Firefox u otros productos similares, que permiten inspeccionar la página en busca de errores y cambiar dinámicamente el HTML o el CSS que se está interpretando en el navegador. Con la salvedad que Stylizer está únicamente focalizado en las CSS y tiene todo tipo de herramientas de ayuda, visualización de reglas CSS y su edición por medio de diversos controles.

El funcionamiento es el siguiente. Se escribe la URL de un sitio web y Stylizer accede a él y lo muestra como lo haría cualquier otro navegador. Pero además muestra un panel lateral con todo el CSS que tiene este sitio, organizado de una manera que resulta más fácil de visualizar. A través del panel lateral se puede editar cualquier propiedad y ver inmediatamente cómo afecta a la visualización de la página. Luego se puede guardar el CSS directamente desde Stylizer, conectando por FTP con el servidor o archivándolo en nuestro ordenador local.

Stylizer tiene otro punto interesante y es que permite seleccionar el motor con el que visualizar la web, entre Internet Explorer y Firefox, con lo que se puede desde el mismo programa saber cómo afectarían las CSS que estamos editando a nuestra página en los dos clientes web más populares.

Disponibilidad

Stylizer se encuentra disponible en una versión gratuita y una de pago. Obviamente, la versión de pago tiene diversas funcionalidades que son de mucha utilidad si nos dedicamos profesionalmente al diseño de páginas web, para justificar su compra. Lo bueno es que, al descargar el programa, tenemos acceso a la versión de pago de manera gratuita durante 14 días, con las funcionalidades completas. Si después de este tiempo no compramos una licencia, sigue funcionando, pero con funcionalidades más básicas. En la propia página de producto se encuentra una comparativa de versiones "Basic" (gratuita) y "Ultimate" (de pago).

Conclusión sobre Stylizer

Hasta ahora no había encontrado un editor CSS que realmente mereciera la pena utilizar por aportar algo más que unas simples ayudas al escribir código. De hecho, hasta hoy programo CSS a mano y nunca había usado un editor CSS, que vienen bien cuando necesito recordar el nombre de una propiedad poco utilizada o alguna regla del lenguaje sobre la que pueda tener dudas, pero poco más.

Stylizer es un producto de estos que apetece utilizar, aunque sólo sea por "trastear" un poco, puesto que su filosofía de trabajo resulta muy atrayente. De cualquier manera no creo que todas las personas piensen lo mismo, porque si tenemos mucha soltura escribiendo código, quizás hasta sea más rápido hacer las CSS con cualquier editor de textos y ver los resultados en el propio navegador. Todo dependerá de nuestra soltura codificando y los conocimientos de CSS que tengamos, pero lo que sí es cierto es que Stylizer resulta bastante cómodo, por el hecho de ver en vivo lo que estamos haciendo sobre el sitio web real.

Un programa para editar hojas de estilo en cascada que ofrece muchas ayudas al diseñador.

Vamos a describir y comentar el programa Style Master, un editor de hojas de estilo en cascada avanzado, enfocado a facilitar la codificación de CSS, tanto a mano como a través de sus distintos menús. Podemos encontrar este programa en http://www.westciv.com/style_master

Para trabajar con CSS no es necesario disponer de ningún programa especial. Sería suficiente contar con el Bloc de notas, Ultra Edit o cualquier otro editor de texto plano. Sin embargo, igual que existen editores de HTML que nos sirven para aumentar nuestra productividad al crear páginas web, también podemos hacer uso de programas como Style Master para crear las hojas de estilo en cascada.

Style Master es un editor bastante completo, que incluye todas las ayudas que un diseñador puede necesitar para programar hojas de estilo, no sólo aumentando la productividad, sino también facilitando la tarea de recordar la sintaxis CSS y sus distintas propiedades. Pone a disposición del diseñador varias ventanas para trabajo. En la parte central se encuentra el código CSS que estamos editando y alrededor una serie de ventanas adicionales para facilitar la codificación y la visualización rápida de los estilos programados.

Es un sistema que ya hemos visto en otros editores CSS y que, en principio, resulta bastante sencillo de manejar. No cabe duda que si un usuario está familiarizado con este tipo de programas, no tendrá problemas para entenderlo. Del mismo modo, aunque el programa presenta ayudas y documentación para conocer el uso de CSS, será muy aconsejable conocer el lenguaje y haber trabajado con él.

Entre las funcionalidades más destacables de este programa se encuentran:

• Coloreado del código. También marca en rojo el código con sintaxis incorrecta.
• Utilidad para seleccionar elementos a los que aplicar estilos por distintos métodos. Situándonos dentro de su código, a través de una lista elementos o pinchando directamente sobre el elemento que se desea editar en el preview HTML.
• Contiene plantillas XHTML maquetadas con CSS que nos pueden servir de punto de partida para hacer diferentes tipos de maquetaciones, con varias columnas, con o sin imágenes. Simplemente habría que cambiar los contenidos y ajustar la hoja de estilos a nuestras necesidades.
• Alerta sobre la compatibilidad con los diferentes navegadores del mercado y sobre las especificaciones de CSS1 y CSS2.
• Documentación y ayudas sobre las diferentes propiedades y sus usos.
• Previsualización del resultado obtenido en todo momento. Este preview se puede hacer sobre cualquier documento HTML que necesitemos, incluso sobre un documento HTML publicado en una página web. De este modo, al editar la hoja de estilo podremos ver el resultado directamente sobre el documento final. Adicionalmente, tiene unos botones para lanzar la previsualización en los navegadores que tengamos instalados en nuestro sistema. (Para ello, durante la instalación deberemos indicarle el lugar en el disco donde están instalados los distintos navegadores)

Conclusión

El programa en su concepción no tiene nada que reprocharle. Tiene ideas muy buenas y ayudas realmente útiles que todavía no habíamos visto en otros editores de este estilo. En general es un programa muy interesante y recomendable para trabajar con CSS.

Sin embargo, durante las pruebas que hemos hecho, al definir algunas propiedades a través de los menús, en ocasiones, nos ha resultado algo confuso, porque no colocaba los valores de las propiedades en los elementos que deseábamos. A la hora de codificar a mano, se nos ha hecho también un poco difícil, por ejemplo con el menú contextual, que no aparece muchas veces cuando se desea. Todo ello muy probablemente sea debido a nuestra falta de práctica con el uso del programa.

Lo mejor, a nuestro entender, es la previsualización en cualquier página web que deseemos. La incorporación de diferentes plantillas seguro que será también muy útil para las personas que deseen obtener rápidamente un diseño limpio y bien acabado.

Style Master no es un programa gratuito. Su precio es de 60 dólares, pero se puede obtener una versión completa del programa para probarlo durante 30 días.

Editor CSS avanzado, que ofrece todo tipo de ayudas a la hora de definir las hojas de estilo en cascada de nuestros documentos.

CSS es un lenguaje relativamente fácil de editar, ya que resulta amigable a los seres humanos, por no ser difícil de leerlo. Al editar un CSS tendremos que escribir simplemente los nombres de los atributos de estilos y los valores que queremos asignar. Por ello, una vez memorizados los atributos CSS existentes, o por lo menos los que utilicemos más habitualmente, no deberíamos tener muchos problemas para trabajar con las CSS.

Pero claro, siempre estamos los vagos, que preferimos hacer las cosas a golpe de ratón, antes que andar escribiendo código. O los despistados, que por muchas veces que escribamos una regla de estilos varias veces, no conseguimos memorizarla pasada una semana. O los puntillistas, que siempre queremos estar a la última y llevar nuestros diseños a un punto por encima de la media. Para todos ellos, el trabajo con un editor de CSS puede venir como anillo al dedo.

Rapid CSS es un programa que cumple su cometido y que nos ofrece todas esas ayudas deseables a la hora de editar CSS, como autocompletado código, ayudas contextuales, resaltado de sintaxis, completa referencia de los lenguajes utilizados, listado de atributos y la modificación de los mismos a través de menús, diversos validadores, etc. Todo con la posibilidad de ajustar su funcionamiento a nuestras preferencias de diseño y los estándares web que estemos utilizando.

El programa viene con un completo editor de texto, que sirve del mismo modo para editar CSS y para editar archivos en otros lenguajes, como podrían ser HTML o incluso otros más avanzados como Javascript, PHP, ASP o Ruby. Sobra decir que las mayores ventajas al editar código las obtendremos cuando estemos trabajando sobre archivos CSS, para lo que está pensando, pero también nos ayudará sobre todo para trabajar con HTML. Por ejemplo cuando abrimos una etiqueta HTML Rapid CSS crea automáticamente la etiqueta de cierre, o cuando situamos el foco de la aplicación encima de una etiqueta, nos ofrece un listado de atributos posibles de ella, que podremos editar fácilmente.

En cuanto a las opciones para editar CSS destaca el explorador de código, que permite ver un listado de todas las etiquetas, identificadores y clases definidos, a los que podemos acceder rápidamente con un clic para editar su código. Por otra parte encontraremos especialmente útil el inspector de código, donde podemos definir casi cualquier estilo a golpe de ratón y donde veremos todos los atributos CSS disponibles, para que no se nos escape ningún detalle y no tengamos que memorizar todas las características del lenguaje.

También es interesante la posibilidad de escoger la especificación del lenguaje que queremos utilizar. Permite los niveles CSS 1 y CSS 2, ampliamente soportados por los navegadores actuales, y el nivel de CSS 3, que todavía está en fase de especificación en el momento de escribir este artículo.

Pero por si esto nos parecía poco, Rapid CSS ofrece diversas ayudas a tareas menos comunes, como importar hojas de estilo en ficheros externos, abrir y editar directamente archivos remotos a los que se accede por FTP, formatear el código CSS (esta opción parece bastante interesante y novedosa por la ingente cantidad de parámetros que podemos configurar a la hora de formatear el código) o comprimirlo para que ocupe menos.

Por acabar este listado de delicias queremos destacar, para los preocupados por los estándares, que Rapid CSS tiene pasarelas con diferentes servicios web que permiten validar el código CSS o HTML que estamos produciendo. Y finalmente, una de las opciones visuales más interesantes que disponen los editores de CSS, la posibilidad de activar un preview en tiempo real, que nos permite ver el resultado de las hojas de estilo que estamos editando, en el mismo momento que estamos escribiendo el código.

Conclusión sobre Rapid CSS

El trabajo de nuestro día a día puede salir beneficiado con Rapid CSS, por todas las ventajas que nos ofrece, que hemos relatado y la constante referencia que disponemos al utilizar herramientas como su inspector de código. Para ciertos profesionales estamos seguros que resultará muy de agradecer, no obstante, para muchos otros, acostumbrados a trabajar a mano con CSS, no resultará tan ventajoso y sólo útil en proyectos o tareas puntuales. De entre todas las posibilidades del programa nos ha parecido interesante el hecho de que sea un editor de texto capaz de trabajar con varios lenguajes al mismo tiempo. Como acostumbramos tener en un mismo contexto de trabajo códigos en lenguajes como HTML o PHP, viene realmente bien la posibilidad de editarlos todos dentro del mismo Rapid CSS. Ahora bien, quizás se podría pulir la integración del HTML con el CSS, ya que desde un archivo HTML no se encuentra la manera de ver qué estilos CSS tenemos definidos en un archivo externo. Es decir, la edición de cada tipo de archivo es independiente, aunque desde el HTML se incluya un CSS, no podemos editar el CSS si no es abriéndolo de manera independiente en el editor.

El software se puede descargar desde la página del producto: https://www.rapidcsseditor.com/

Lo podremos utilizar de manera libre durante 30 días, tiempo en el que debemos evaluarlo y posteriormente, en caso de interesarnos, realizar el pago de poco menos de 30 dólares. Parece un precio bastante ajustado, si tenemos en cuenta las buenas características de este producto en comparación con otros editores CSS. Podremos encontrar otros programas gratuitos, con características similares, pero que no llegan a ofrecer todo lo que nos ofrece Rapid CSS. Así que recomendamos probarlo y juzgar por uno mismo si merece o no la pena ahorrarse ese desembolso.

Presentamos el editor CSS de CoofeeCup llamado StyleSheet Maker, ahora Site Designer, que nos ayuda a editar hojas de estilo en cascada.

La empresa CofeeCup tiene diversos programas enfocados para desarrolladores y uno de ellos es StyleSheet Maker, un editor de texto con funcionalidades pensadas para las personas que trabajan con archivos CSS editados a mano.

Es un editor avanzado, que soporta no solamente CSS, sino también HTML, algo que resulta de agradecer, dado que ambos lenguajes son utilizados uno de la mano del otro. Tiene características que son agradables en la interfaz, como un explorador de archivos o una biblioteca de códigos, pero más allá de esas funcionalidades típicas de editores de texto, no encontraremos mucho más. De hecho, de este programa nos ha dejado que desear bastante y sus funcionalidades, aunque algunas estén bien pensadas, han resultado siempre en algún que otro inconveniente.

Actualizado: La descripción que sigue está enfocada al software Style Master, aunque ahora el producto se llama Site Designer. Como podemos ver en su página web https://www.coffeecup.com/designer/ continua siendo un editor de CSS, pero que tiene como peculiaridad una fuerte integración con los frameworks CSS más populares, como Bootstrap, Materialize y Fundation, a los que han agregado por supuesto las capacidades de editar nuestro propio CSS y usar las nuevas características de CSS como CSS Grid y Flexbox.

Entre sus características podemos encontrar con que nos permite editar código CSS con ayudas como el destacado de sintaxis. Pero sobre este punto algo raro pasa, porque sólo colorea la sintaxis CSS cuando estás escribiendo el código dentro de un documento HTML. Por raro que parezca, al abrir un archivo .css, por lo menos en mi instalación de la versión 5.1, no me colorea ningún elemento de la sitaxis y aparece todo en gris, como si se tratase de un archivo .txt.

Como ayudas para la edición destacan varios asistentes para definir estilos determinados en elementos, como un asistente para definir estilos de fuentes, otro para márgenes, otro para padding, etc. Pero sobre este punto, para programadores que ya tenemos un poco de mano con las CSS, no me parece práctico, porque habría que pasar por varios asistentes para obtener el estilo de un único elemento y eso resulta algo tedioso. Para personas que no tengan ni idea de CSS, puede que sea interesante la existencia de todos esos asistentes, pero seguramente después de pasar por ellos decenas de veces para un único diseño, me parece que acabarían bastante cansados.

Otro de los elementos que en el propio sitio de CofeeCup StyleSheet Maker destacan es que tienen varios componentes DHTML listos para usar. Pues bien, algunos a mi no me funcionan en mi navegador, por lo que entiendo que esta utilidad puede darnos más de un quebradero de cabeza, en lugar de ayudar.

Como estos puntos, tenemos tantos otros en los que constantemente encontramos los correspondientes "peros" y que me hace abandonar rápidamente el software, y concluir este artículo.

Conclusión sobre Site Designer

Esta valoración final es para el software StyleSheet Maker (Ahora llamado Site Designer) es un programa bastante sólido, con una interfaz agradable y con un panel interesante para navegación por el sistema de archivos, para el acceso a librerías de hojas de estilo y otros componentes enfocados para hacer páginas web. Sin embargo, cuando lo examinas más de cerca te das cuenta que está un poco vacío. Uno se podría preguntar ¿Dónde están todas las funcionalidades que debería tener un buen editor CSS? ¿mis ayudas y referencias dónde se encuentran? ¿o es que simplemente no hay? Al final parece ser que estamos ante un buen software, pero hecho al paso para disponer de otro producto para la compañía CofeeCup. Tiene una buena y bonita envoltura, pero no consigue ser realmente útil. Después de probarlo parece como si no hubiera sido actualizado desde hace mucho tiempo y lo tuvieran abandonado. (De hecho fue abandonado y refundieron este programa y otros de la compañía en Site Designer.

No hemos probado Site Designer, pero tiene un aspecto bastante moderno y tiene la característica de aunar varias herramientas de CSS, como frameworks de CSS y frameworks de diseño. Puede estar bien.