WebPutty – un editor CSS online fantástico


WebPutty es una aplicación web que nos permite editar hojas de estilo (.CSS) de manera fácil e instantánea.

WebPutty-CSS

Además permite que incluyamos esas mismas hojas de estilo en nuestro sitio web, de tal manera que al actualizar las hojas de estilo en WebPutty, éstas se vean reflejadas en nuestro sitio web inmediatamente después de haberlas guardado.

  • Ofrece un editor con resaltador de sintaxis, así como una vista previa que responde a las modificaciones sin tener que refrescar la página web.
  • Permite utilizar el poder de SCSS y Compass

SCSS ofrece funcionalidad extra y características fáciles de utilizar tales como selectores anidados, variables, y mixins, mientras que Compass hace que las características CSS3 tales como box-shadow, border-radius, gradients, transforms, y transitions sean sencillas de implementar al encargarse de corregir todas las variantes para los distintos navegadores, tales como –webkit- -o- -moz- -ms- etc.

WebPutty es gratuito por ahora, por ser primeros usuarios del servicio, para lo cual es necesario contar con una cuenta Google, ya que utiliza la autenticación que ofrece Google.

El servicio es sencillo de utilizar, y a pesar de estar aún en idioma Inglés, es fácil de entender su funcionamiento.

Al iniciar, nos mostrará un Tour de cómo utilizarlo:

webputty-01

 

webputty-2

 

Cómo utilizar

Al hacer clic en New Site nos pedirá ponerle un nombre identificador y la dirección URL correspondiente.

WebPutty-new

Una vez hecho eso, podemos ver la imagen de pre-visualización de nuestro sitio

webputty-codigobit

Al ingresar por primera vez a este nuevo proyecto, detectará que aún no existe en nuestro sitio la hoja de estilo que estamos creando.

codigobit-webputty-css

Por lo cual nos mostrará el código html para incluir WebPutty en nuestro sitio web, el cual hemos de agregarlo antes del tag </head>

Una vez agregado la hoja de estilo en nuestro sitio web, ya podemos editarla utilizando el editor online WebPutty.

editando-con-webputty

Editando el campo resaltado

Además permite resaltar los elementos que estamos editando, esto nos permitirá saber exactamente lo que modificamos. Sólo basta colocar el cursor en el nombre del elemento, ID (#), Class (.) que deseamos ver resaltado.

Una vez culminado nuestra edición, publicamos (Publish) y ya podemos ver el resultado en nuestro sitio web. Así de fácil y rápido. Cada vez que modifiquemos no será necesario estar subiendo nuestra hoja de estilo ya sea mediante FTP, subir plantillas XML, etc.

Sin duda un servicio muy útil e innovador, por otro lado aún no sabemos cuán rápida será su respuesta al momento de utilizarlo en nuestro sitio web, es decir, por ahora es veloz, pero con la cantidad de usuarios que de seguro subirá, quizás baje su velocidad, esperemos que no sea así.

Visitar http://www.WebPutty.net