Diseñorama » Articulos

Stylizer- mi editor de CSS favorito

Escrito por Kemie Guaida en 7.04.09

NOTA: Aunque esta reseña parezca un anuncio no lo es. Simplemente soy fan de Stylizer y quiero compartir esta herramienta :).

Hace algunos meses, por casualidad me topé con Stylizer, un editor de CSS. Antes yo utilizaba Topstyle (que como nota aparte, después de años finalmente tendrá una versión 4 ), y estaba bastante contenta con él, pero el ver la deliciosidad que tienen los Maqueros en CSSEdit me hacía buscar algo mejor, más intuitivo. Y Stylizer sobrepasó mis expectativas. Por el momento Stylizer es para PC solamente pero la versión Mac saldrá en unos meses.

Lo que me gusta de stylizer

Una nota: Stylizer tiene 2 versiones: Basic (gratuita) y Ultimate (de pago). Muchas de las características que estoy ennumerando son sólo de la versión Ultimate.

Previsualización en tiempo real

Puedes ver los cambios que haces a tu css reflejados inmediatamente en el html. Puedes cambiar entre previsualización entre Internet Explorer (la versión que tengas instalada) y Firefox (v. 3). Y cuando digo inmediatamente, es inmediatamente. No hay necesidad de guardar archivos o recargar páginas. Puedes, por ejemplo, modificar el ancho de un elemento y ver como va creciendo en la previsualización en tiempo real. Eso hace la edición rápida e intuitiva. Nada de “y si hago el div 30px mas ancho? Cambio, recarga. Ups, no cupo, 28? Cambio, recarga. no? 26, tal vez?

Edición directamente en el servidor

Puedes cargar una página desde un URL, y editar el css de esa página directamente, para luego guardarla directo al servidor via FTP, o guardar una copia local si prefieres.

Edición manual / asistida

La edición básica es manual, con autocompletado (por ejemplo, basta con escribir b-r:n; y se autocompletará a background-repeat:no-repeat). Pero también hay maneras de hacerlo aun más rápido. Sobre cada regla aparece una barra, llamada “Remote control”, donde aparecen atajos a las funciones más usadas (márgenes, padding, ancho, alto, estilos de texto, colores).

Autocorrección

Stylizer checa cada regla que pones y te avisa si hay algún error de sintaxis. También checa todo el CSS de cada página que cargas, diciendote los errores y permitiendote corregirlos. CSS válido!

Identificación de elementos y creación de reglas

No necesitas ver tu html para acordarte cómo se llamaba esa clase o elemento. Con una función llamada bullseye puedes hacer clic en cualquier elemento en la página y Stylizer automáticamente te dará la ruta/estructura DOM correspondiente.

Lo que es más, te permite seleccionar los selectores (vaya redundancia) pertinentes, y crear una regla en tu css automáticamente basada en ellos.
También te permite seleccionar cualquier regla en tu CSS y aplicar un borde rojo a todos los elementos afectados por esa regla.

Selección de colores

Puedes seleccionar colores para tus reglas de 3 maneras distintas:

• Paleta de color – puedes seleccionar y ajustar tono, saturación y brillo y encontrar el color que quieras

• Colores usados en tu documento – Tienes una práctica lista con todos los colores ya usados en el CSS.

• Selección de color – Puedes con un gotero seleccionar colores de tu pantalla, incluso cambiando a otros programas primero

Stylizer 4.0

Página Oficial: Skybound Stylizer
Plataforma: Windows (proximamente Mac)
Precio: Grátis (Basic) / $79 USD (Ultimate) -(Comparación)
Resumen: la herramienta más completa e intuitiva que he encontrado para editar CSS en Windows.

---

Comentarios

1. 7 abril 2009, 11:59Pablo

   Tiene muy buena pinta, Kemie, me lo anoto para probarlo.

   Además gracias a ti conocí Topstyle, así que…

   ¡Bienvenida de vuelta! ;-)

2. 12 abril 2009, 00:03Alfil

   Debería informarse que el programa necesita del Microsoft .NET Framework para instalarse. Es lo que me ha echado para atrás a la hora de probarlo; no me interesa sobrecargar más mi sistema para pruebas.

3. 16 abril 2009, 14:49nacho

   Hola, gracias por compartir esta herramienta. Voy a probar para ver que tal funciona.
   Saludos, desde Argentina

4. 24 abril 2009, 18:05Dolores

   Me encanto, este fin de semana la voy a probar, si espero no tener problemas con .net, que hay veses los hay… me gusta más asp.
   Barbaro como siempre

5. 27 abril 2009, 17:31Colectivo Bicicleta

   Felicitaciones a todos los colegas diseñadores en su día!!!!

6. 7 mayo 2009, 12:17MBA distancia

   No lo conocia , lo voy a probar , gracias por el post.

7. 12 mayo 2009, 09:31Jose Maria

   Para ver el resultado de un cambio inmediatamente, yo utilizo la extensión Firebug para Firefox. Eso sí, despues hay que modificarlo en el editor css. Pero no sebrecarga el sistema. Me gustaría conocer vuestra opinión.

8. 19 mayo 2009, 14:04Emiliano

   Jose María…Es cierto lo que dices. Firebug es una excelente herramienta para realizar previsualizaciónes en cuanto a la modificación tanto de CSS como de código en tiempo real.-

9. 5 junio 2009, 14:58oliverastro

   había probado hace tiempo Stylizer, si bien se veía bueno, prefería escribir CSS de forma clásica, en todo caso con Firebug y Web Developer/Edit CSS, se puden hacer cambios en tiempo real, y webdeveloper toolbar en las versiones de IE, o Firebug Lite

10. 15 junio 2009, 14:40connaxis

    ¿Quieres mostrar tus proyectos al mundo (diseño web, diseño flash, motion graphic, 3d modeling, 3d animation, graphic design, etc)?
    ¿Quieres competir y ganar más plata?

    Estamos buscando los mejores creativos para participar en nuestro nuevo proyecto de guerra creativa.

    ¿Estas interesado? Entonces haga clic acá: www.guerra-creativa.com

11. 1 julio 2009, 23:39agencia de comunicación visual

    Parece una herramienta de diseño web css muy interesante la voy a probar, gracias por el post!

12. 7 julio 2009, 16:39Jaime

    Muchas gracias por la recomendación. No conocía este programa pero me ha parecido una ayuda increíble para todos aquellos que nos tenemos que pelear diariamente con el CSS. Lo recomiendo encarecidamente.

    Gracias!

13. 13 julio 2009, 06:22coolhounting

    Gracias por la recomendación, realmente no lo conocia, y era lo que buscaba hace tiempo.. THX :)

14. 21 julio 2009, 18:17Santiago Hortua

    Vamos, que esto no es novedad en mac tenemos algo similar que ya tiene años CSSEDIT, fuera de todas las opciones que enumeras, también valida el código

15. 12 septiembre 2009, 22:16nucklear

    Buscando un editor css para mac, me tope con esta web, pero al abrir la web http://www.skybound.ca/ con Opera, se ve totalmente desfazada, punto en contra, asi que perdieron un futuro cliente.

16. 14 septiembre 2009, 23:23Ray Acosta

    Soy un diseñador y el código es mi coco. Es difícil, ahora que he visto ésta herramienta la probaré. Espero que sea tan intuitiva como parece.

    Felicidades Kemie, excelente blog, diseño estupendo. Gracias por compartir.

17. 25 septiembre 2009, 20:02diseño imagen corporativa

    Muy interesante este post, y el blog en general. gracias

18. 20 octubre 2009, 06:22RevolucionPC

    Gracias por la reseña, lo voy a probar…

19. 3 noviembre 2009, 23:33Fran

    Estupenda información, gracias.

    Para Nuklear: la página que mencionas se ve perfectamente bien en opera 10.

    Saludos

20. 6 noviembre 2009, 15:27Carlos Hermoso

    Interesante utilidad para editar hojas de estilo.

    Un saludo

21. 9 noviembre 2009, 03:47imac2009

    muchas gracias por tan excelente aporte. yo todo lo hago en dreamweaver pero con este editor css. va muy bien, saludos

22. 6 diciembre 2009, 13:03dragondeluz

    Genial, asi necesitaba yo una herramienta, el topstyle, ya me tenia frito…. muchas gracias

23. 8 diciembre 2009, 01:51dragondeluz

    LA RE-HOSTIA

    NO TENGO PALABRAS COMO EXPRESAR MI GRATITUD A LOS CREADORES DE ESTA OBRA DE ARTE…. DIOS DESPUÉS DEL FREEHAND ESTA EL STYLIZER

---

¡Comenta!

Nombre:

Email:

URL:

Mensaje: