3 Herramientas para Compartir Código en Tiempo Real

Desde el inicio de los tiempos el trabajo en equipo ha sido la base fundamental para el desarrollo y consecución de cualquier proyecto de pequeña o gran envergadura.

Hasta hace poco las personas estábamos limitadas por barreras físicas y biológicas que nos impedían pensar más allá del límite de nuestro cerebro. La dificultad de organizar un conjunto de personas para colaborar por un objetivo común era directamente proporcional al número de participantes.

Todo aquel que haya formado parte de un equipo de desarrollo se habrá dado cuenta de que, aunque la organización y reparto de tareas esté bien definida, la comunicación entre los integrantes es fundamental tanto para el soporte puntual de ciertas incidencias como para la revisión de funcionalidades completas. Es por ello que voy a hablar de 3 herramientas colaborativas diseñadas con este objetivo.

En concreto se trata de utilidades online que nos permiten compartir código en tiempo real sin necesidad de registro ni instalación alguna. Tan sólo basta con compartir la URL proporcionada por la web.

COLLABEDIT

Collabedit es un editor de código online con opciones tan interesantes como un chat, un histórico de cambios y soporte de varios lenguajes de programación.

Collabedit: Portada del sitio

En la página principal tenemos una pequeña descripción del editor y un enlace para crear un nuevo documento que compartir.

Entorno de trabajo

El área de trabajo está dividida en dos zonas: a la izquierda el editor de texto, que ocupa la mayor parte de la pantalla, y a la derecha podemos ver una columna formada por tres secciones (selector de lenguajes, participantes conectados y un chat).

Collabedit: Entorno de trabajo

Algunos de los lenguajes disponibles son: c, c++, c#, html, java, javascript, php, sql, visual basic, xml, texto plano…

Una de las particularidades del editor que merece una mención especial es el chat, ya que nos permitirá formular preguntas o hacer comentarios o puntualizaciones durante la modificación del documento. A mi juicio, es un elemento muy útil en este tipo de herramientas en las que el objetivo principal es colaborar y facilitar la comunicación.

Existen otras funciones interesantes en el menú superior como la de generar un nuevo documento, descargarlo, invitar a otros participantes o consultar el histórico de los cambios en el código que, por cierto, me ha parecido curiosa, ya que se pueden visualizar los cambios como si de un vídeo se tratase.

Collabedit: Barra del reproductor de vídeo

CODESHARE

CodeShare es otra herramienta colaborativa. La base es la misma que la anterior aunque con alguna diferencia en sus funcionalidades y entorno de trabajo.

Codeshare: Portada del sitio

Como se puede observar su página principal opta por la simplicidad. Después de una breve descripción, tenemos el botón más importante de la web: “Share Code Now“. Como ocurría en la anterior, cada documento generado posee una dirección única a través de la cual pueden acceder todos los participantes.

Codeshare: Ejemplo de URL única

Entorno de trabajo

En este caso, el editor de texto ocupa toda la pantalla dejando arriba a la derecha la cinta de opciones para crear otros documentos, configurar el editor o hacer un video chat.

Codeshare: Cinta de opciones

Configuración del editor

Los ajustes del editor nos permiten seleccionar el lenguaje, el tema y las combinaciones del teclado.

Codeshare: Ajustes del editor

Sintaxis

Entre los lenguajes de programación disponibles tenemos: ASP.NET, C, C#, C++, CSS, HTML, HTTP, JSON, Jade, Java, JavaScript, JSP, LESS, LaTeX, Markdown, MySQL, PHP(HTML), PL/SQL, Plain Text, Smarty, SmartyMixed, VB.NET, VBScript, Velocity, XML, XQuery…

Temas

Podemos configurar el editor con un gran número de temas. Entre ellos cabe destacar el que viene por defecto, “monokai” utilizado por Sublime Text, uno de los editores de texto punteros en la programación.

Codesahre: Tema monokai

Eventos del teclado

Existe la posibilidad de elegir el mapeo del teclado de los principales editores de desarrollo: emacs, vim y sublime.

Codeshare: Eventos del teclado

Video

La opción de poder hacer un video chat es muy interesante, no obstante, después de probarlo, creo que necesita alguna mejora. La pantalla me pareció demasiado pequeña y en algún caso no conseguí conectarme. Espero que esta funcionalidad mejore ya que puede ser muy útil en este tipo de herramientas.

Codeshare: Vídeo

JSFIDDLE

La última herramienta de la que voy a hablar está dirigida totalmente a los desarrolladores web. En ella podemos realizar dos cosas:

  1. Utilizarla como laboratorio de pruebas.
  2. Emplearla para compartir código, tanto en tiempo real como para enviar ejemplos a quien queramos.

El funcionamiento es el mismo que en las anteriores aunque, en este caso, obtenemos una URL con un identificador único al guardar el documento. A partir de este momento se puede compartir con cualquier persona.

Entorno de trabajo

La zona de trabajo consta de una cinta de opciones en la parte superior,  una columna a la izquierda para la configuración del proyecto o área de trabajo y una columna a la derecha dividida en 4 secciones: código HTML, hoja de estilo CSS, código Javascript y resultado.

JSFIDDLE: Entorno de trabajo

Configuración del proyecto o área de trabajo

JSFIDDLE: Configuración del proyecto

Las opciones para configurar el proyecto son:

  1. Frameworks & Extensions: permite elegir librerías o extensiones (JQuery, ExtJS, Knockout, React, etc.)
  2. Fiddle Options: permite nombrar y describir el proyecto, asignar una etiqueta al cuerpo, elegir la definición del tipo de documento, etc.
  3. External Resources: posibilita la adición de librerías externas (javascript y css)
  4. Languajes: se pueden seleccionar otros como SCSS, Coffescript o Javascript 1.7.

Cinta de opciones

En la cinta de opciones tenemos varias funciones muy útiles que voy a intentar explicar

JSFIDDLE: Cinta de opciones

  1. Run: compila y ejecuta el código mostrando el resultado.
  2. Update: actualiza el documento guardado.
  3. Fork: existe la posibilidad de continuar el desarrollo en una rama diferente creando para ello un nuevo documento.
  4. TidyUp: tabula el código de modo que sea más claro.
  5. JSHint: valida que el código Javascript sea correcto:
    JSFIDDLE: Botón JSHint
    JSFIDDLE: Botón JSHint
  6. Share: permite compartir la URL, el resultado o embeberlo en una web. Además podemos compartirlo en Twitter y Facebook.
    JSFIDDLE: Botón Compartir
  7. Collaboration: Esta es la opción más significativa de la web, a través de ella, podemos empezar a compartir el documento en tiempo real.
    En la pantalla inicial podemos seleccionar una imagen de perfil y un nombre.
    JSFIDDLE: Botón Colaboration
    Una vez hayamos elegido una identidad, podemos empezar a editar el código, invitar a un amigo, iniciar el micrófono o el chat.
    JSFIDDLE: Botón Colaboration
    Se puede hacer un seguimiento del puntero de cada participante, ya que al clicar en cualquier zona, muestra un círculo en ese punto del color del usuario que ha clicado. De esta manera, se puede ofrecer o recibir de los participantes indicaciones más precisas.
    JSFIDDLE: Seguimiento ratón

Conclusión

Hoy en día, y cada vez con más frecuencia, es habitual que aparezcan nuevas herramientas para facilitar nuestras tareas. Algunas pueden llegar a convertirse en imprescindibles según las necesidades.

Una parte importante del tiempo que empleamos a lo largo de nuestra vida debería centrarse en buscar las herramientas adecuadas para mejorar nuestro trabajo. Es por esto que he querido hablar de estos tres editores online en tiempo real, ya que pueden aportar un gran valor y agilizar tareas tan cotidianas como, por ejemplo, un curso online.

¿Cuántas veces os habéis sentido frustrados en un curso en el que no habéis podido seguir el código del profesor? De esta manera podemos ver la edición del código en tiempo real y poder copiarlo para ejecutarlo a la vez que el profesor.

Existen muchísimas otras herramientas para realizar este cometido, pero lo importante es encontrar la que necesites en cada momento. Hoy han tocado tres pero espero poder seguir descubriendo otras tantas que me ofrezcan mayores posibilidades con el objetivo de mejorar en mi profesión.

The following two tabs change content below.

Fausto López

Soy una persona alegre, positiva, en formación continua, responsable e implicado en todo lo que hago. En lo personal soy muy familiar, me encanta bailar, ir al cine y viajar.
Compartir: