Alejandro Crosa nos trae una charla llamada Todo el software está roto, donde nos comparte sus experiencias en el proceso de desarrollo de software en grandes empresas con miles de clientes, donde ocurren todo tipo de cosas (creo que todos los hemos vivido en nuestro trabajo pero a menos escala). Por ejemplo, en organizaciones como LinkedIn con mas de 200 millones de usuarios, cosas de que solo pueden pasar una vez en un millón, pues le ocurren a 200 usuarios y pues es una cifra significante, o cuando centésimas de segundo de carga por millones de visitas realmente importa.

En fin, te recomiendo ver esta charla que está en español para que disfrutes esas experiencias de Alejandro y notemos como esas empresas comenten errores, como cualquier otra organización.

¿Tienes una experiencia similar? Coméntanos.

Hace unas semanas debido a una fuerte gripe, me tocó trabajar en casa para un trabajo que debía hacer una oficina donde tenía mi computadora con todo el entorno de desarrollo configurado. Sin embargo en la organización tenían configurado el servicio Cloud9 para poder trabajar remotamente.

Cloud9 es un completo entorno de desarrollo y ejecución en la nube, permitiéndote desde tu navegador web crear y ejecutar software web. El mismo posee un editor muy parecido a Sublime Text (de hecho muchos atajos del teclado son iguales), acceso a la terminal de un servidor y la posibilidad de configurar dependencias necesarias para ejecutar el programa: servidor web, framework, base de datos, etc.

Entorno de desarrollo de Cloud9

Entorno de desarrollo de Cloud9, todo se está ejecutando desde el navegador

El espacio de trabajo

El uso de Cloud9 es muy sencillo, primero debes configurar un espacio de trabajo (Workspace), actualmente (al menos en la versión gratuita) te ofrece entornos como LAMP, Django, NodeJS, puro HTML, Rails, entre otros. Luego de seleccionar el entorno especificas asignas un repositorio de control de versiones (creo que es impensable hoy en día hacer un proyecto sin eso), para obtenerlas fuentes, haces las configuraciones requeridas por tu aplicación y listo. Luego se encarga de correr los servicios necesarios y puedes acceder a tu aplicación web desde una URL.

Plantilla de espacios de trabajo disponibles en Cloud9

Plantilla de espacios de trabajo disponibles en Cloud9

¿Por qué usarlo?

La principal ventaja de usar Cloud9 es poder escribir el código de un programa, guardar, cambiarte de equipo o de localidad y seguir escribiendo código el mismo código sin problemas. Aunque puedes sacrificar privacidad (en la licencia no se ve nada extraño) es muy útil en casos donde trabajas en distintos lugares y no puedes cargar tu portátil (en mi caso me muevo entre casa, universidad y oficinas de clientes pero por la inseguridad no puedo cargar mi portátil en todos lados). Otro caso, como en el que descubrí la herramienta, en organizaciones pueden usarlo como respaldo en caso que un empleado necesite trabajar desde su casa u otro lugar de forma urgente.

Algo interesante, es que en pocos segundos puedes tener un entorno de ejecución funcional. Con unos clics puedes tener un servidor web hecho Django y empezar a trabajar en él (o estudiarlo), luego con otros clics tienes un entorno en Ruby. Lo cual es mas fácil que estar instalando dependencias y configurar servicios en tu sistema operativo.

El editor está realizado en Javascript y tecnología detrás de ella es un servidor NodeJS que crea contenedores en Docker, me parece interesante esta arquitectura. Algo que me parece «fácil» de replicar en otros servidores y poder contar con una solución similar.

Si deseas contar con IDE y entorno de ejecución que puedas usar en cualquier computadora sin estar descargando cosas, te recomiendo utilizar Cloud9. Lo único es que como toda nube, dependes de un tercero y a veces puedes desconfiar de la seguridad del mismo o de la calidad de protección de los datos. Aunque, me parece un buen entorno para aprender tecnologías o hacer experimentos rápidamente.

Sitio oficial de Cloud9

Netbeans es mi IDE favorito desde hace años y últimamente me ha tocado realizar varios proyectos usando el framework Yii. Para todo desarrollador / programador es una realidad que no conocemos en totalidad un lenguaje o framework y por ello siempre estamos acudiendo a la documentación  para repasar sintaxis y nombre de métodos, sobre todo de las variables u objetos manipulados en cierto momento. Por eso, es bueno configurar el IDE para que autocomplete el código y muestre la documentación de funciones para leer conocer el funcionamiento sin tener que cambiar de ventana.

Hace unos días descubrí en la documentación oficial como configurar Netbeans para trabajar con Yii. Y les explico aquí como realizarlo:

  • Entra al menu File (Archivo), luego a Project properties (Propiedades del proyecto) y finalmente a PHP Include Path (Ruta de cabeceras de PHP) e incluimos la ruta donde se guarda el framework de yii, de hecho la carpeta se llama «framework».
  • Luego entramos a Tools (Herramientas), luego a Options (Opciones), hacemos clic en la pestaña superior de Miscellaneous (Misceláneas) y hacemos clic en Files (Archivos), luego del paréntesis agregamos «yiilite\.php» para que quede algo como «^(yiilite\.php|CVS|SCCS|….»
  • Reiniciamos Netbeans y veremos como ahora se autocompleta el código, al momento de instaciar clases accederemos a sus métodos y documentación.

Para el caso de algunas vistas parciales donde recibimos objetos que no están declarados en el archivo, podemos decirle al IDE que tipo es cada variable usando la siguiente sintaxis:

/* @var $this MyController */
/* @var $model MyObject */
$this->metodo() // se puede escribir usando auto completación
$model->id; // se puede escribir usando auto completación

Con estos sencillos pasos se hará mas fácil la escritura de código php usando Yii en Netbeans.

Completado de código PHP con Yii en Netbeans

Completado de código PHP con Yii en Netbeans

Hace unos días logré luego de unos meses terminar este libro tan largo pero muy valioso. Empecé a leer este libro por un artículo que vi por ahí donde recomendaban 10 libros indispensables para el desarrollo de software, este fué el segundo que escogí para leer y realmente me gustó porque cubre todo los aspectos del desarrollo de software: recolección de datos del cliente, diseño, arquitectura, desarrollo, pruebas, mejoramiento de procesos, trabajo en equipo, y mas.

A diferencia de «El programador pragmático«, Code Complete esta enfocado no solo a desarrolladores sino a cualquier persona que trabaje en esta rama, tiene capítulos dedicado al puro diseño del software, otros a diseño de interfaces gráficas, otro a como trabajar en equipo y tratar con los clientes. Sin embargo, si eres programador o desarrollador este libro es obligatorio que lo leas, te enseña a como programar mejor con ejemplos de código, como realizar pruebas automatizadas para mejorar tu productividad, como hacer código mantenible y entendible, selección de herramientas y tecnologías, etc.

Portada de Code Complete

Portada de Code Complete

Realmente vale la pena leer el libro, son casi 1000 páginas pero cada una de ellas lo vale. Incluso si dominamos los temas expuestos allí sirve de repaso volver a leerlos, o como me pasó a mi en muchos capítulos de temas que «conocía»: aprendí nuevas cosas y aprendí a mejorar hábitos existentes. Si eres una persona graduada o con experiencía en desarrollo de software, debes leer este libro de lo contrario es mejor esperar porque el libro exige tener cierta experiencia, para alguien nuevo puede ser muy útil pero mas difícil de comprender el contenido.

Aquí les dejo la página oficial del libro donde pueden encotrar información para comprarlo: http://cc2e.com/

El viernes pasado recibi mi invitación para participar en la beta de AppInventor, un programa para crear aplicaciones para Android sin necesidad de escribir código, si nunca lo han escuchado o desean ver una introducción, pueden chequear el siguiente vídeo:

Para comenzar a usarlo, se debe iniciar sesión con la cuenta de google y descargar un instalador, revisándolo por encima, trae un emulador de un móvil con Android, un depurador de código y parte del SDK de Android. El instalador pesa casi 60MB y está disponible para Windows, GNU/Linux y MacOS.

Pantalla principal de AppInventor

Pantalla principal de AppInventor

Una vez instalado no pude encontrar el ejecutable para iniciar la aplicación, pero al buscar información en la página, me di cuenta que es una aplicación web hecha en HTML5/Javascript (estos de Google se estan tomando en serio la computación en la nube), la misma, contiene a la izquierda un menu con una serie de componentes para usar en la interfaz de la aplicación, en el medio la ventana de la pantalla telefóno y a la derecha las propiedades del componente y un navegador de componentes usados. Esta interfaz es sencilla, igual a los IDEs existentes por lo que para los desarrolladores no será problema el uso de AppInventor, los componentes simplemente se arrastran a la pantalla del teléfono y con doble click vamos editando las propiedades.

Esta parte es sólo la vista de la aplicación (como el modelo MVC) por lo que para agregar eventos y definir las acciones a ejecutar cuando el usuario interactúa con estos componentes, utilizamos la vista de bloques, accesible por un botón en la parte superior derecha. Al hacer click allí, se abre una aplicación Java Web Start (se vé el gran uso de Java en Android por parte de Google) donde pasarmos a la vista de asignación de eventos y acciones (como el controlador segun MVC), lo interesante, es que podemos asignar eventos y acciones a través de bloques parecidos a las piezas de un rompecabeza, uniendo los bloques podremos realizar el programa deseado sin escribir una línea de código. El famoso Hola Mundo, lo hice en menos de 5 minutos sin leer manuales, usando 3 bloques como se ve en la siguiente imagen:

Bloques de acciones en AppInventor

Bloques de acciones en AppInventor

Luego podemos ver los resultados en nuestro teléfono Android o usando el emulador, generar el paquete y distribuirlo. No he leído, pero creo que por ahora no hay mucha interacción con el Market y no se como es la licencia para el uso de esta aplicación.

Me gustó como se trabaja con esta herramienta y permite desarrollar cosas sencillas en pocos pasos (obviamente cosas complejas requiere escribir código), además permite a personas ajenas a la programación, realizar aplicaciones sencillas para si mismas. Google está haciendo un buen trabajo con esto y me llamó la atención que todo fuese bajo web, muchos no nos imaginaríamos hace unos años la posibilidad de crear aplicaciones desde el navegador.

Soy usuario de Firefox desde sus inicios y cuando empecé a trabajar como desarrollador web en Caniatech, descubrí una gran cantidad de extensiones (la mayoría gracias a su lista de complementos favoritos) que permiten transformar este navegador en una maravillosa herramienta indispensable para cuando se está creando páginas/sistemas web (si fanáticos de Chrome, se que se puede hacer lo mismo con ese navegador). Así que aquí les dejo una lista de las extensiones que recomiendo instalar si trabajan en el desarrollo  (y tal vez un poco de diseño) web.

  • Firebug: para mi es el complemento mas importante e indispensable de esta lista. Esta herramienta permite: excelente análisis y modificación en tiempo real del: código HTML, clases de estilos, permite ver y correr paso a paso (debug) del código Javascript, mostrar la cantidad de errores JS, entre otros.
  • FireQuery: agrega compatibilidad entre jQuery y Firebug, se pueden observar funciones asignadas a ciertos elementos del markup, entre otros.
  • FirePHP: agrega compatibilidad con php  y permite a los desarrolladores imprimir datos en la consola de Firebug, muy útil cuando se esta creando aplicaciones con Ajax.
  • PixelPerfect: otro complemento compatible con Firebug, el mismo, permite sobreponer imágenes en cualquier página, con la idea de comparar el sitio que se está desarrollando respecto al diseño original,útil cuando se estan escribiendo las clases de estilos y se desea lograr una apariencia exacta al diseño dado.

Firebug dentro de Firefox con el plugin de jQuery

  • Html Validator: permite chequear si las páginas web cumplen el estándar XHTML/HTML, necesario para comprobar que tenemos un buen markup Html, evitando futuros problemas de renderizado y permitiendo obtener un mejor SEO.
  • Messure it!: agrega una regla virtual al navegador para medir la distancia exacta (en pixels) de una distancia o área, muy usada en la etapa de diseño y escritura del CSS (sobre todo si se combina con PixelPerfect.
  • Dummy Lipsum: permite generar extractos del texto Lorem ipsum e insertarlo en cualquier campo de un formulario, pues como todo profesional de desarrollo web, sabemos lo feo el uso de texto al azar para probar campos de texto.
  • Lazarus Form: evita la pérdida de los datos dentro de un formulario, útil cuando estamos probando un formulario, rellenamos cada uno de los campos pero algo sale mal y se pierde esa info, pues con este complemento no volverá a suceder lo mismo.
  • Wappalyzer: excelente complemento que informa sobre las tecnologías usadas en un sitio, cuando entras a una página, muestra unos íconos en la barra de estado de los programas o librerías usadas (ejem, jQuery, WordPress, Google Analytics, etc)

Greasemonkey, Html Validator (icono verde) y observer como muestra para este blog las tecnologías que uso: WordPress, Google Analytics y Jquery

  • Web Developer: un gran conjunto de herramientas y opciones a utilizar cuando se desarrolla un sitio web, permite ver errores de javascript, activar o desactivar: estilos, plugins, javascript. Posee una barra acceder a las herramientas rápidamente, permite ocultar/mostrar tablas, imagenes, fondos, etc. Indispensable para cualquier desarrollador web.
  • ColorZilla: permite obtener el color de cualquier pixel de la página, útil para tener el color en hexadecimal de una imagen y escribirlo en el CSS.

Bueno, estos son los complementos mas utilizados por mi cuando creo páginas, si creen que faltan alguno y desean recomendarlo, no duden en comentar. Ademas, si les interesa que complementos uso a diario, pueden ver mi lista.

NetTus+ publicó un artículo muy interesante sobre 30 consejos que se deben seguir para el desarrollo web, todos son excelentes y altamente recomendados para cualquier persona interesada en esta área o que ya lleve muchos años trabajando en ella. Estos consejos estan dirigido principalmente a principiantes para que desde los inicios lleven a cabo buenas prácticas, sin embargo, recomiendo a cualquiera leerlos porque aquellos que tenemos tiempo en el desarrollo web, aún conservamos malas prácticas (después de este artículo pienso eliminar casi todas) y es recomendable conocer cuales son.

El artículo está en inglés en el siguiente enlace: 30 HTML Best Practices for Beginners