¿CodePen o Sublime Text? Si hablamos de programación web se nos viene enseguida el nombre de HTML, CSS y JavaScript. Existen varias formas de llegar a ello. Incluso, si abrimos un bloc de notas podemos ponernos a trabajar escribiendo «html». Cierto es, que para ver el resultado de lo que vas programando desde un bloc, necesitarás de un laborioso procedimiento para notar avances.
Estos sitios son las principales zonas de juego para los desarrolladores de aplicaciones para usuarios del día. Para conocer más profundamente las ventajas y desventajas de estos programas vamos a analizarlos profundamente en este artículo (al menos, todo lo que sabemos). Como siempre digo, seguro que algunos de aquí conocéis más el tema. Si es así, comentad todo lo que se nos escape aquí. ¡Estaremos encantados de debatir!
Hoy vamos a analizar CodePen, JSBin, Plunkr, sublime, CSSDeck, Dabblet y LiveWeave. Que son los más conocidos y las herramientas que más se usan en este entorno. Hay más, por supuesto.
Pero para todos los que no sepáis de que trata el FrontEnd o BackEnd, vamos a explicar un poco. El Front-End o interfaz es la parte visual que el usuario navegante podrá ver en la web. El BackEnd, será la parte que controla el administrador del sitio. En programación, si tu introduces código a través de una herramienta que visualiza el resultado de forma simultánea, esto se le llamará front-end.
CodePen
Para muchos la herramienta más completa de todas las que hablamos. Usada como una herramienta web que es lo más parecido a una comunidad para mostrar tus trabajos. Una especie de Youtube del programador. En este, podrás ver el trabajo de los programadores afiliados a la web y contactar con ellos por si tienes algún interés, ver su perfil, seguirlo en redes e incluso suscribirte a su canal para visualizar todos sus futuros proyectos.
Presentación del contenido, soporte y atajos de teclado
La presentación de CodePen es lo más interesante, ya que con pocos clics, puedes trabajar en el proceso de inmediato. Con líneas muy bien separadas de html, css y javascript. Además de la parte visual, que podrás ir intercalando arriba y abajo para ver claramente tus progresos. Ayudando así a diferenciar bien cada lenguaje. Algo que viene muy bien para programadores más nóveles.
Su soporte web, lo hace más llevadero cuando quieres empezar a usar algo que realmente no conocemos muy bien. Eso no quiere decir que sea mejor para uno, depende de las necesidades que tengamos. Pero sí, para conocer un poco mejor el entorno antes de comprometernos a instalar nada en el ordenador de origen «desconocido».
Si eres de los que está acostumbrado a usar casi totalmente el teclado cuando trabajas, CodePen te resultará maravilloso. Otras herramientas necesitan de plugins para poder usar atajos de teclado para rellenar en el entorno. Esto hace un poco más incómodo el trabajo (aunque igual de efectivo una vez instalado). CP. integra de serie un sistema que te hará rellenar las mismas líneas de código que se repiten, como podría ser en una lista. Escribes como quieres que aparezca la lista y clicas Tabulador.
La versión Pro además, permite muchas más opciones por un precio de 9,00€ el paquete básico hasta 29,25 el paquete «Super». Pudiendo actualizar en varios dispositivos simultáneamente lo que hacemos en uno. También un modo cooperativo, un «modo profesor», etc. Benefíciaate si quieres aquí.
JSBin
JSBin es una herramienta que podríamos calificar como directa. Ya que una vez te diriges a su dominio web, ésta, estará lista para empezar a trazar tu próximo proyecto, sin dilación. Y aunque su primera puesta en escena no resulte muy atractiva, si es cómoda.
JSBin resulta sencilla, con la estructura básica creada en html para no perder tiempo, irás intercalando entre los distintos lenguajes para completar el trabajo. Primero está HTML, luego CSS, Javascript y finalmente tu trabajo de forma visual. Y aunque parezca más difícil tendrás los mismos tipos de atajos sin instalación de nada. Directamente desde el navegador.
Sin embargo, me ha parecido más incómodo el hecho de visionar el código correctamente, una vez que se oculta debido a las columnas posteriores. Ya que, con el portátil, debes de dar hacía arriba o hacía abajo con el trackpad y no va muy fluido.
Solo tiene dos cuotas, gratis o de pago. Esta es un poco más caro que CodePen, aunque si lo pagas anualmente, te sale más rentable, si puedes pagar 120€.
CSSDeck
El entorno de trabajo de CSSDeck es distinto al visto anteriormente. Dividido en dos columnas unicamente, código-visual, CSSDeck trabaja con 3 filas hacia abajo con las que divide los distintos tipos de lenguaje. Con una presentación en forma de red social y un entorno de trabajo más limpio en color claro. Sí que parece una herramienta simple. Aunque a veces, eso no significa que sea negativo.
Con más de sesenta mil usuarios registrados y más de doscientos cincuenta mil proyectos creados, buscar y encontrar lo que quieres no te resultará difícil. El idioma como siempre, si puede ser un inconveniente para aquellos que no sepan inglés, pero en esta red social prima mucho la imagen, por lo que no creo que sea un gran desafio.
Plunkr
Plunkr es la herramienta menos atractiva que me he encontrado hasta el momento. La presentación está aglutinada en mensajes y falta de imágenes. La carga del contenido es algo lenta y no resulta muy útil a simple vista. Además, la ordenación por fecha, hace que cualquier programación, por muy simple que sea, pueda estar en primera posición. Para ver algo más interesante deberás dirigirte a la pestaña que pone: «Most Viewed«. Eso, si no lo has traducido con Google antes.
Decir también, que según la web, están en la versión 1.0.0. Por lo que esto explica un poco el diseño, la presentación y los posibles errores que te encuentres al ir navegando por la web.
Como ventaja, si te quedas sin ideas, no tendrás que salir ni abrir otra pestaña en Plunkr, ya que directamente desde la barra lateral derecha puedes andar con otros proyectos y visionarlos al instante. Eso resultará más cómodo para recoger ideas rápidas y aplicarlas a tu proyecto en el mismo instante.
Dabblet
Dabblet es una herramienta simple, entras y creas. Aunque puedes registrarte y tener tu usuario a través de GitHub, no es algo que destaca mucho en la web. Con un fondo en un degradado amarillo a rojo, en la parte visual y un fondo blanco en la parte de código (como es normal), se presenta el proyecto de Dabblet, aunque podrás cambiarlo desde la pestaña de CSS. Para mi, mejor tenerlo en blanco, ya que ese degradado lo único que da es un poco de vida a
Cuando estás editando, puedes configurar las pestañas que visualizas facilmente. Incluso también si quieres cambiar a columnas o filas para una visualización cómoda dependiendo de la persona que esté editando. Cambiar el tamaño de fuente, guardar como anónimo sin registrarte o validar el código HTML son más posibilidades que ofrece a primera vista Dabblet. Aunque no es la primera opción que yo escogería, si puede ser a tener en cuenta en futuras versiones si van actualizándose.
Una de las cosas que menos me ha gustado, pero que puede que guste a grandes programadores, es que no tiene la opción de tabular una etiqueta y que se escriba sola. Es decir, poner HTML y clicar al tabulador y que se escriba «html» y «/html» automáticamente. Algo que en las demás aplicaciones si se hace.
LiveWeave
LiveWeave es muy similar a los demás, no tiene nada que no puedan ofrecer los otros en cuanto a utilidad nos referimos. Lo que destacamos de este proyecto es su diseño, un color oscuro similar a CodePen pero con una distribución en cuadro. Pudiendo cambiar el tamaño al gusto. También está el modo claro y el modo «fuera de línea« donde el código que edites no se verá reflejado en lo visual, hasta que lo actives. No es una característica que vea muy útil, como diseñador, es importante siempre ver en tiempo real lo que editas, pero alguien le encontrará alguna utilidad seguro. Y aunque, como siempre, puedas registrarte, no mantiene un protagonismo el usuario. Ya que, incluso si no te registras, puedes guardar tu proyecto.
Sublime Text
Esta herramienta es totalmente distinta a lo que hayas visto hasta ahora en el análisis. Sublime Text no está como un recurso web, sino como aplicación. Por una parte seguro que es más útil tenerla en el escritorio. Sobre todo por las posibles caidas de internet o las congelaciones por exceso y la posible pérdida de trabajo. Por otra parte, no es una herramienta tan visual como las anteriores. Además de tampoco tener la posibilidad de una comunidad para compartir proyectos.
Aquí todo es desde cero. Deberás crear pestañas para colocar las líneas de código y renombrarlas para saber cual es cada una. Si la primera es HTML, la segunda CSS.. o al revés. Tampoco tiene atajos por lo que será completamente manual, excepto por las comillas.
Conclusión
Todos los programas son similares con ciertos toques personales de cada empresa que llevan a tener pros y contras en ellos. Cada uno elegirá el que más crea que le conviene, mi recomendación es usar CodePen o CSSDeck por el entorno y la red social que maneja. Pero, si te ha gustado más otro, deja un comentario y explica tus motivos, seguro que resultarán útiles.