Instalando el IDE de Cloud9 en GNU/Linux Ubuntu

Introducción

Cloud9 es un ambiente integrado para el desarrollo de software diseñado específicamente para ser ejecutado en la nube.  Este trae consigo múltiples características muy interesantes, incluyendo el soporte para diferentes lenguajes de programación como C/C++, C#, CSS, Java, Javascript, Lua, PHP, Python, Ruby, SQL y HTML entre otros mas.

Este software ha sido desarrollado en Node.js el cual es también su plataforma objetivo para el desarrollo de proyectos.  Cloud9 pueden ser accedido desde dos diferentes perspectivas: como un servicio en el cual el usuario se inscribe en la página (gratuitamente o con un pago) y accede remotamente al servicio.  La otra perspectiva corresponde con instalar este software en un servidor propio y acceder a él de manera privada.

Cloud9 IDE running on Firefox
Cloud9 IDE running on Firefox

A continuación se describirán los pasos seguidos para la instalación de Cloud9 IDE en un GNU/Linux Ubuntu 12.04.

Instalación

Se decidió instalar el software asociado bajo la carpeta ~/local del usuario que utilizará al ambiente de desarrollo.

Requerimientos

$ sudo apt-get install -y build-essential g++ curl libssl-dev apache2-utils git libxml2-dev

Ajustes iniciales

Crear la ruta donde se instalarán los diferentes paquetes de software necesarios.

$ mkdir ~/local

Agregar la ruta de los paquetes binarios al PATH.

$ echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc

$ . ~/.bashrc

Instalación de Node.js

Verificar cual es la versión mas reciente del software, en este caso era la 0.6.14.

$ cd ~/local

$ git clone git://github.com/joyent/node.git

$ cd node

$ git checkout v0.6.14

$ ./configure --prefix=~/local

$ make

$ make install

$ cd ..

Instalación de npm (Node Package Manager)

$ curl http://npmjs.org/install.sh | sh

Instalación de Cloud9 IDE

$ git clone git://github.com/ajaxorg/cloud9.git

$ cd cloud9

$ git checkout devel

$ git submodule update --init --recursive

$ cd ..

Instalación del framework de componentes O3

$ git clone http://github.com/ajaxorg/o3

$ cd o3

$ ./tools/node_modules_build

$ cp ./build/Release/o3.node ../cloud9/support/jsdav/support/node-o3-xml-v4/lib/o3-xml/

$ cd ..

Ejecutar el IDE

Para lanzar el ambiente de desarrollo es necesario ejecutar el siguiente comando.  Debe tenerse en cuenta que si no se especifica un puerto su valor por defecto será de 3000 y si no se especifica un lugar de trabajo se utilizará el directorio actual donde fue ejecutado el comando.

$ ~/local/cloud9/bin/cloud9.sh --port 3000 --workspace ~/proyectos/xxx

Otro aspecto a tenerse en cuenta es que se deberá crear una instancia del IDE por cada proyecto ya que estos se trabajan de manera independiente.

Enlaces

Detectando movimiento con Processing utilizando Flob

Introducción

Movement detection with Flob
Movement detection with Flob

En la búsqueda de como detectar movimiento en las imágenes recibidas de una cámara web utilizando un sketch de Processing para ser utilizado como medio para la interacción entre el usuario y el computador, he iniciado el día de hoy algunas pruebas con la librería Flob que facilita este proceso.

Hasta el momento se ha utilizado la característica para calcular la imagen de movimiento y la facilidad para determinar las áreas de movimiento (blobs) agrupándolas según su cercanía.

El sketch de demostración se desarrolló utilizando Processing 2 (alpha 4) por lo que se descargó la versión de desarrollo de la librería.

Enlaces

Instalación de GMate para GEdit en GNU/Linux Ubuntu

Introducción

Con el crecimiento en el uso de lenguajes de script como PHP, Python y Ruby en diferentes ámbitos y la aceptación globalizada de HTML5/CSS/Javascript como plataforma de hecho en múltiples ambientes, la idea de un ambiente de desarrollo (IDE) único y especializado se diluye.  Para muchos desarrolladores es mas cómodo y funcional utilizar un editor de texto con funcionalidades de desarrollo de software que pesados, complejos y elaborados ambientes como Eclipse y Netbeans.  Este es el caso de editores como vi, Notepad++ y Sublime Text que son apetecidos por desarrolladores de las diferentes plataformas.

En este caso potenciaremos GEdit, el editor de texto que incluye el proyecto GNOME en las distribuciones que lo soportan.  Esto se hará a través del proyecto GMate el cual incluye plugins y temas para acercar su funcionamiento al de TextMate según sus desarrolladores.

Acerca de GMate

Actualmente GMate incluye 31 plugins nuevos.

  • Advanced Bookmarks. Highlight, remenber and toggle bookmarks in your files.
  • Align columns. Align text blocks into columns separated by pipe ( | )
  • Classbrowser. A Classbrowser (depends of ctags, I use exuberant-ctags).
  • Encoding. Reopen the document in a different encoding
  • Embedded Terminal. Terminal with multiple windows
  • File Search. This is a search plugin for Gedit to search for a text inside a directory.
  • Find in Project. Search in the project with ack/grep.
  • Fuzzy Open. Quick way to open file in project.
  • Gedit Open File. Regex based file open (like textmate Go to file…).
  • Gedit Todo. Find Todo Marks in source files (integrated with filebrowser).
  • Gemini. Pair complete for quotes and braces.
  • Highlight Edited Lines. Highlights lines changed during your edit session.
  • Indent Converter. Converts tabs to spaces and spaces to tabs.
  • Multi Edit. Check it out at author’s page
  • Pair Character Completion. Pair complete for quotes and braces, that also wrap selected text.
  • Pastie. Paste a selection of code or a source file to pastie.org directly from editor
  • Quickhighligthmode. Fast change current highlight mode.
  • Rails Extract Partial. Extract selected region of rhtml as a partial.
  • Rails Hotcommands. Execute Rails Commands (such rake tasks).
  • Rails Hotkeys. Navigation in Rails Project Files.
  • Regex Search Replace. Search and replace with regular expressions.
  • Reopen Tabs. Saves opened tabs on exit to restore them on next run.
  • Simple Folding. Collapse selected text.
  • Smart Indent. Smart Indentation regex based.
  • Tabulation. Auto set tabs and spaces based on file type.
  • TextMate Style Autocompletion. Better autocompletion. Tap Esc to cycle through the available completions.
  • Text Map. Navigatable thumbnail of the entire file
  • Text Tools. Some text manipulation improvements (adapted from line tools).
  • Trailsave. Remove trailing spaces before save a document.
  • Word Completion. Word completion plugin.
  • Zen Coding. Tools for faster HTML/CSS coding
  • Zoom. Adds the ability to change the text size.

Soporte mejorado para los siguientes sintáxis.

  • Basic YAML
  • CoffeeScript
  • ColdFusion
  • Cucumber
  • Groovy and gsp
  • HAML
  • Markdown
  • reStructuredText
  • rhtml/erb
  • Ruby on Rails
  • SASS

Además de 100 nuevos temas para personalizar su interfaz.

Instalación

Instalar el repositorio de Ubuntu on Rails PPA.

$ sudo apt-add-repository ppa:ubuntu-on-rails/ppa
$ sudo apt-get update

Instalar el paquete de GMate.

$ sudo apt-get install gedit-gmate

Enlaces

Ocultando la barra de direcciones del navegador de Android

Introducción

Con los beneficios que las nuevas características de HTML5 y CSS3 traen a los desarrolladores de aplicaciones móviles cada día es mas frecuente que se desarrollen sitios y aplicaciones web diseñadas específicamente para estos dispositivos.

Las aplicaciones web móviles son en esencia una página web que emula en cierta medida el look-and-feel de las aplicaciones nativas para permitirle al usuario acceder a la funcionalidad de la aplicación con los beneficios (y desventajas) de una aplicación web pero con una experiencia similar a las aplicaciones convencionales.  Para hacer esto existen varios frameworks sin embargo hay ocasiones en las que es preferible no basarse en ellos sino implementar una página web estándar.

Ocultando la barra de direcciones en el navegador web de Android
Ocultando la barra de direcciones en el navegador web de Android

En esos casos probablemente la primera de las adaptaciones que se desea realizar es el ocultar la barra de direcciones del navegador ya que así se dará la impresión de aplicación nativa y no de página web convencional inmersa en un navegador.

En Android esto es posible lograr de cierta manera.  La barra de direcciones no puede ser eliminada por completo pero puede ser ocultada, es decir, no se verá durante la ejecución de la aplicación web móvil hasta que el usuario decida hacer el scroll necesario para acceder a ella.

Procedimiento

El procedimiento para lograr esto se basa en dos pasos que se deben realizar mediante Javascript.  El primero de ellos consiste en garantizar el la página web de la aplicación móvil cuenta con suficiente altura para poderse realizar.  Para esto se manipula el alto del body.  El segundo paso consiste en simular desde código un scroll lo que activará la característica del navegador de ocultar la barra de direcciones.

/**
 * Hide the URL address bar on standard Android's browser by setting enough
 * document height and auto scrolling to active the bar hiding feature
 */

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight + 10)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

      setTimeout(function()
      {
      	window.scrollTo(0, 1);
      }, 50);
  }
}

Finalmente se invoca esta función una vez se ha cargado completamente (load) la página web, garantizando también que esto se haga durante los cambios de orientación del dispositivo.

/**
 * Start up procedure to hide the Android's URL bar
 */

window.addEventListener("load", function()
{

	if(!window.pageYOffset)
	{
		hideAddressBar();
	}

	window.addEventListener("orientationchange", hideAddressBar);

});

Enlaces

Experimentando un poco con el Canvas de HTML5

Introducción

Entre las muchas maravillas que nos trae HTML5 está el componente Canvas cuya funcionalidad es sorprendente en comparación con lo que nos tenía acostumbrados la versión anterior.  Durante este fin de semana decidí jugar un poco con el Canvas para experimentar con su funcionalidad básica de dibujar.

Para esto desarrollé una aplicación web muy simple que permite dibujar puntos y líneas en un lienzo blanco.  El color de las lineas puede ser modificado entre amarillo, azul y rojo.

La aplicación web resultante puede ser consultada desde un navegador web de escritorio o uno de un dispositivo móvil ya que no sólo se manejaron los eventos de ratón convencionales sino que también se incluyeron los eventos de touch que permiten detectar la interacción con las pantallas táctiles.

Demostración

Demostración uso básico de Canvas
Demostración uso básico de Canvas

Enlaces

Instalación de Corona SDK en Ubuntu 12.04 utilizando Wine

Introducción

Corona SDK es una plataforma para el desarrollo de aplicaciones móviles para iOS y Android muy publicitada ultimamente y por lo que he visto hasta el momento muy interesante para el desarrollo de aplicaciones, especialmente juegos en estos dispositivos.  Desafortunadamente no existe aún una versión para GNU/Linux sin embargo por suerte es posible instalarlo utilizando Wine.

Instalación de Wine

El primer paso debe ser entonces instalar Wine que se encarga de hacer la traducción o emulación de las invocaciones a las funciones nativas de Windows.

$ sudo aptitude install wine

En este caso estoy utilizando un release candidate de la versión 1.4.

$ wine –version

wine-1.4-rc5

Descargar Corona SDK

Para descargar la distribución del software se debe elegir la versión del sistema operativo Microsoft Windows y descargar el paquete correspondiente desde la siguiente ubicación.

https://developer.anscamobile.com/downloads/coronasdk

También es necesario que se cree una cuenta de usuario en el sitio web para poder ejecutar posteriormente el software.

http://developer.anscamobile.com/user/register

Instalar Corona SDK

La versión que se utilizó para este procedimiento fue la 2011.704.  La invocación mostrada a continuación realiza la instalación del software (desarrollado para Windows) en GNU/Linux.

$ wine start CoronaSDK-2011.704.msi

Crear una demostración: Hola Mundo

Hola Mundo con Corona SDK
Hola Mundo con Corona SDK

Utilizando cualquier editor de texto crear el archivo main.lua con el siguiente contenido.

local text = display.newText("Hello World", 50, 50, nil, 26)

text:setTextColor(255, 255, 255)

Ejecutar el Corona Simulator para interpretar la aplicación de demostración recién creada.

Herramientas instaladas por Corona SDK
Herramientas instaladas por Corona SDK

También es posible ejecutarlo desde la línea de comando de la siguiente manera.

$ ~/.wine/drive_c/Program Files/Ansca/Corona SDK/Corona Simulator.exe

Finalmente para interpretar la aplicación creada anteriormente elija la opción Open Project del menú File y seleccione el archivo main.lua.

Enlaces

Explotando burbujas con Processing utilizando GSVideo y Minim

Introducción

Demostración de GSVideo_Bubbles
Demostración de GSVideo_Bubbles

Este sketch combina la técnica de detección de movimiento descrita anteriormente para crear un ambiente interactivo simple que consiste en explotar las burbujas que aparecen al azar sobre la imagen del usuario.  Adicionalmente utiliza la librería Minim para reproducir un efecto sonoro al explotar las burbujas.

Changelog

  • 20120509: actualización de GSVideo al paquete de Video estándar.  Requiere Processing 2.0 (2a5).
  • 20120223: versión inicial, procedimental basada en GSVideo.  Incluye reproducción de un sonido utilizando Minim.

Enlaces