martes, 29 de noviembre de 2011

3 Herramientas para para editar código en linea


Ultimamente en la web han surgido varios proyectos que nos permiten editar código en linea, si bien estas herramientas no son lo mejor para usar en producción, si que son muy buenos para mostrar código a una audiencia, probar algunas propiedades nuevas de HTML5 o CSS3, y también compartir código con los demás.


En su gran mayoría estas herramientas nos permiten jugar con código HTML, CSS y Javascript en una sola interfaz gráfica, permitiendo codificar y ver resultados en tiempo real.


Hoy daremos un breve repaso a 3 herramientas gratuitas para estos menesteres.


Captura de pantalla 2011 10 13 a las 11.50.14 3 Herramientas para para editar código en linea


Comencemos con la más sencilla de las 3, Cssizer es una herramienta bastante sencilla que solo nos permite editar código CSS y HTML, si hablamos de sus opciones podríamos decir que son algo limitadas, ya que en el apartado HTML solo nos permite elegir el tipo de Doctype para nuestro documento HTML los cuales son:

HTML 5HTML 4.01 StrictHTML 4.01XHTML 1.01 StrictXHTML 1.01XHTML 1.1

Cssizer nos permite compartir el código para que los demás puedan ver lo que se realizo, una de las cosas que más me gusta es que al momento que uno esta metiendo código instantáneamente se va mostrando el resultado, así que para cosas sencillas de HTML y CSS esta perfecto, a demás soporta HTML5 y CSS3.


Sitio Web de Cssizer


Toca el turno de una herramienta más completa que la anterior, basta ver su interfaz para darnos cuenta de que ya nos encontramos con una aplicación web mucho más completa, a diferencia de Cssizer donde solo podemos editar código HTML y CSS, en esta podemos usar también Javascript lo cual amplia su uso.


Captura de pantalla 2011 10 13 a las 11.57.55 3 Herramientas para para editar código en linea


Por otro lado permite hacer uso de otras tecnologías para escribir código más rápido, HAML, Sass CSS , Less y CoffeeScript, al igual que cssizer todo lo que realizamos en código se va mostrando al instante. Finalmente, también nos permite compartir el código con los demás. Sin duda una herramienta mas completa y funcional, ideal para mostrar cosas un tanto más elaboradas con CSS, HTML y Javascript.


Sitio web de Tinkerbin


Llegamos a la ultima y para mi gusto la herramienta más completa de las 3, si bien en esencia es igual a Tinkerbin, ya en funcionamiento es mucho más completa ya que viene cargada de un sin fin de herramientas y ejemplos para empezar codear.


Como ya comente Jsfiddle tiene varios complementos interesantes si nos fijamos en el apartado Javascript nos encontraremos que podemos utilizar los Frameworks más populares: Jquery, Dojo, Prototype, YUI, por mencionar algunos.


Captura de pantalla 2011 10 13 a las 12.01.01 3 Herramientas para para editar código en linea


En el apartado Doctype podemos encontrar los diferentes Doctypes existentes, así como agregar algunos datos extras a nuestro documento HTML, como pueden ser el titulo y una breve descripción .


Y las opciones no se detienen, Jsfiddle también nos permite manejar eventos en Ajax, si esto no te es suficiente, la aplicación también cuenta con un apartado de ejemplos, en el podemos encontrar varios usos de los diferentes Frameworks javascript, como por ejemplo un proyecto totalmente funcional que hace uso del API de twitter y nos muestra una pila de Twitts.


Finalmente mencionar que al igual que las anteriores aquí también podemos compartir código. Pero a diferencia de los anteriores en los que solo dan un link al proyecto que queremos compartir, en Jsfiddle tambien se nos permite embeber nuestro código en nuestro sitio web lo cual puede ser un excelente recurso para los que se dedican a escribir tutoriales.


Sitio web de Jsfiddle


Como pueden ver todas son herramientas interesantes y lo mejor de todo gratuitas, todas aceptan las tecnologías más recientes como HTML5 y CSS3, ya despenderá de cada quien el uso y cual resulta ser su favorita, en lo particular me quedo con Jsfiddle, por el hecho de poder embeber código en mi sitio web y al tener diferentes Framworks, ¿y tu cual otra conoces?.

Tags: , , ,


via applendamos

0 comentarios:

Publicar un comentario

 
Copyright 2011 @ Enwarez!
Design by Wordpress Manual | Bloggerized by Free Blogger Template and Blog Teacher | Powered by Blogger