TopStyle Lite

En este artículo vamos a hablar de un programa llamado Top Sytle, que es un editor de CSS que hará las maravillas durante nuestras fases de desarrollo de páginas web.

CSS en gran medida sigue siendo el sanctasantorum de los estándares. Porque seamos francos, CSS puede llegar a ser un asunto de lo más sencillo, mientras que saltar de las tablas a las capas provocará inevitablemente dolores de cabeza, riñas con el ordenador y golpes al ratón. Y es que al final el ratón es el responsable de todas nuestras desdichas, y no nosotros...

Exacto, CSS es sencillo si cuentas con una buena herramienta para hacerle frente. Ya ni siquiera es necesario un conocimiento exhaustivo de las reglas de estilo, aunque nunca viene mal una visión global y, por lo demás, un poco de intuición. Por decirlo más claramente: si quiero cambiar los datos referentes a los márgenes, ¿no es lógico que busque en la lista de "margin"? TopStyle, de la compañía Bradbury Software -www.bradsoft.com-, nos pone al alcance de la mano la edición facilísima de hojas de estilo en cascada, CSS. Aunque existe una versión Pro de pago, que cuenta con muchísimas opciones avanzadas, de momento podemos detenernos en la edición Lite, suficiente para las expectativas elementales-medias, y además se distribuye libre de cargos.

La pantalla de trabajo de TS Lite se divide en tres paneles principales. Siguiendo las indicaciones de la imagen superior, son los siguientes:

1) Editor. Se trata de la zona principal donde podemos editar a mano los elementos, identificadores y clases. Aunque el trabajo es manual, cuenta con la ventaja de que a medida que escribimos, se abre una lista desplegable que incluye todas las opciones posibles para cada atributo. Por ejemplo, si escribimos margin, se abrirá la lista que incluye: margin-top, margin-left, ..., margin-color, margin-width, etc, así como una lista de valores: colores (contiene una paleta y un selector al vuelo con el que es posible reconocer cualquier color del monitor, incluyendo las ventanas de otros programas distintos a TopStyle), tamaños porcentuales y fijos con sus correspondientes unidades demedida, etc.

2) El inspector de estilos muestra el listado de todos los atributos posibles, e incluye un pequeño panel de previsualización de texto de ejemplo con el estilo seleccionado en cada momento. El inspector cuenta a su vez con dos pestañas inferiores:

2.1) Properties, que aparece por defecto y muestra el mencionado listado de atributos y valores y la previsualización.

2.2) Selectors. Esta pestaña da acceso a un cómodo esquema que contiene: elementos, clases e identificadores. Es especialmente útil para obtener una visión global y sencilla de todos los estilos utilizados. Además, si seleccionamos uno, éste quedará también seleccionado en el panel de edición.

3) Vista Previa: Establece una vista preliminar de todos los estilos empleados en el documento, uno después de otro.

En fin, reconozcamos que ya no hay justificación para olvidarse de CSS. Sencillo, configurable, cómodo, transportable, y TopStyle lo proporciona gratis y masticado en su versión Lite. Próximo paso, si no se ha hecho ya: la descarga. Se acabó definir el mismo estilo decenas de veces para las diferentes páginas del sitio web...