ONU HABITAT Hack Day de El Salvador [EVENTO]

Para los interesados, hay un Hack Day organizado por "ONU HABITAT" acá en El Salvador, con premio ($2,000) y beca de formación para la aplicación seleccionada como ganadora del concurso. 
Este Hack Day se realizara en "La Casa Tomada" (Centro cultural español), se pueden inscribir acá:

http://docs.google.com/forms/d/1Bd70yyEgbdBXFM-J4sEDYe3NuVYpntB4OHD2Y_-YeZI/viewform

Y la única restricción es la edad, debes tener entre 18 - 30 años, ser capaces de trabajar 36 horas continuas en el proyecto y que este (el proyecto) este dentro de la temática que es: una aplicación para pagos móviles y nuevas propuestas de transferencias desde celulares, con sentido social y urbano.

ONU Habitat Hack Day El Salvador

Les dejo con la convocatoria oficial en pdf dando clic acá:

https://letscrate.com/f/ramayac/srbyte/ONU-HHD ELS Nota de Prensa.pdf

Vía:

Participen en el Hack Day de @ccesv CC: @emprendesv twitter.com/NelsonChicas/s…

— Nelson Chicas (@NelsonChicas) May 13, 2013

Maqetta, Nuevo IDE en la Nube

IBM presentó recientemente un nuevo IDE de desarrollo web con el cual pretende facilitarnos la vida al momento de diseñar el layout de nuestras aplicaciones y al mismo tiempo acercarnos a las nuevas bondades que el W3C nos ha traído con HTML5. Su nombre es Maqetta.

Lo mejor de todo es que, además de permitirte agregar y editar controles HTML de forma WYSIWYG, también incorpora controles visuales de librerías javascript populares como jQueryUI, Dijit (de Dojo) y YahooUI. Cuenta además con el reciente framework conocido como Dojox Mobile orientado, como su nombre lo indica, a los browsers de los dispositivos móviles.

"IDE Maqetta mostrando controles Dijit tanto en su forma WYSIWYG así como también en su versión código HTML" en paneles divididos horizontalmente"

Otras características importantes? El IDE está alojado en la nube lo cual nos evita tener que descargar muchos megabytes para contar con él lo cual también significa que nos consumirá una gran parte de la memoria RAM del equipo desde el navegador. Está construido haciendo uso del framework Dojo por lo cual la apariencia del IDE se les hará familiar para los que ya hayan ocupado este framework javascript. El proyecto está liberado bajo una licencia open source, la misma que posee el framework Dojo y pueden descargar su fuente de este link de github por si desean montar una copia local del IDE en sus equipos o en un server local.

Por el momento el proyecto aún se encuentra en una etapa bastante inicial por lo que no se asusten si se topan con uno que otro bug mientras lo prueban por lo que aun no es material para uso en los desarrollos de la vida diaria pero con un par de meses esperamos ver un producto un poco más usable.

Hay que tomar en cuenta que estamos hablando de un logro bastante ambicioso el que quieren alcanzar con este proyecto ya que como lo veo es básicamente lo que debió haber hecho Dreamweaver desde hace muchos años ya: incorporar para su diseño visual los controles javascript de las librerías más populares en la actualidad y la incursión de las novedades que vienen con HTML5 y CSS3.

"Demostración de las diferentes siluetas que se pueden utilizar para previsualizar las páginas web y la adaptación automática en la vista WYSIWYG"

Mas información en la página oficial del proyecto: maqetta.org

Puedes probar directamente el uso del IDE en este link.

jQuery Mobile Al Fin!

"jQuery Mobile desde mi iPod Touch"

Llegó el momento de la verdad con el tan esperado release de jQuery para Móviles.

http://jquerymobile.com/

Por el momento aún se encuentra en versión Alpha1 por lo que no es nada más para que los interesados puedan empezar a jugar con el y mediante el feedback brindado, logren reparar los bugs, agregar features deseados y luego lanzar el release estable.

En la web existen actualmente varias librerías para desarrollar aplicaciones basadas en móviles, la mayoría emulando la bien elaborada interfaz del iOS pero sin lograrlo completamente. El que mas convencía era jQtouch, un plugin para jQuery que transforma elementos HTML en componentes de UI para móviles, pero este plugin aún se queda corto en cuanto a features y documentación por lo que este proyecto de jQuery Mobile ha sido esperado con ansias por muchos de nosotros.

En este link podemos encontrar un demo navegable desde un dispositivo móvil y en este otro link podemos contribuir en forma de donaciones, feedback o aportes al código fuente. Recuerden que esa es la ventaja de los proyectos open source, que es elaborado de forma libre por comunidades, para comunidades.

jQuery Mobile Al Fin!

"jQuery Mobile desde mi iPod Touch"

Llegó el momento de la verdad con el tan esperado release de jQuery para Móviles.

http://jquerymobile.com/

Por el momento aún se encuentra en versión Alpha1 por lo que no es nada más para que los interesados puedan empezar a jugar con el y mediante el feedback brindado, logren reparar los bugs, agregar features deseados y luego lanzar el release estable.

En la web existen actualmente varias librerías para desarrollar aplicaciones basadas en móviles, la mayoría emulando la bien elaborada interfaz del iOS pero sin lograrlo completamente. El que mas convencía era jQtouch, un plugin para jQuery que transforma elementos HTML en componentes de UI para móviles, pero este plugin aún se queda corto en cuanto a features y documentación por lo que este proyecto de jQuery Mobile ha sido esperado con ansias por muchos de nosotros.

En este link podemos encontrar un demo navegable desde un dispositivo móvil y en este otro link podemos contribuir en forma de donaciones, feedback o aportes al código fuente. Recuerden que esa es la ventaja de los proyectos open source, que es elaborado de forma libre por comunidades, para comunidades.

Quien nos dara el soporte...

Hace unos días, procure recordarle a algunos compañeros de trabajo, que absolutamente TODO el proyecto en el que estamos trabajando, correría perfectamente utilizando software libre...

La reacción de algunos fue: "ya va este con sus ideas", otros: "ya va a repetir el sermón de siempre", y uno en especial lanzo el típico grito al cielo: "Pero si usamos eso, ¿quien nos dará soporte?".

Ahora bien, de las primeras reacciones ni me preocupo (ya estoy acostumbrado a que me tilden de fanático del software libre), más la ultima opinión si me dejo pensando. Muchos empleados son parte de las "propagandas corporativas" (externas).

El ejemplo perfecto, es con Rational 7.0 (RAD). Ese IDE es el que uso... no temas, si usaste Eclipse, has usado RAD. La diferencia, es que RAD posee herramientas "enterprise", de las que no empleamos ABSOLUTAMENTE NINGUNA, ah, y también tiene un costo de aproximadamente $2500 por la Licencia de uso para ... ni quiero saber para cuantas personas (espero que no sea por usuario). ¿No me creen? vean acá. Se de muchos programadores preferirían utilizar otros IDEs gratuitos, o una versión de Eclipse que se adapte a lo que ya existe... como MyEclipse, que me atrevo a decir que funcionaria de lujo en vez de RAD, y el costo es de solo $25 por persona, si, solo $25 por persona.

Ese es el escenario económico de las herramientas de desarrollo en el trabajo.

Otro ejemplo: hace un par de meses, en un proyecto, nos vimos en la necesidad de investigar como se implementa un "WebService" con RAD 7 y WebSphere 5.0 Esta noble tarea es ridículamente complicada con RAD, y parece que los astros y tu suerte inciden en que tengas éxito o no en crear el WebService, al menos en la instalación que tengo, valga la aclaración. Dejando la ironía a un lado, personalmente fue dificultoso. Y de paso, puedo mencionar como contraparte que hacer un WebService con NetBeans es un tranquilo paseo... un paseo por la playa del cuco...

El punto, es que llegue al punto (valga la redundancia) de preguntar por el soporte por parte de GBM (IBM en El Salvador), después de todo "ellos" son los que "venden licencias" de productos como: RAD, WebSphere, etc... Naturalmente ellos sabrían como ayudar con el impase.

¿Saben que me dijeron cuando pregunte por famoso soporte en el trabajo?, la respuesta textual fue: "No contemos con eso, busca otra forma de hacerlo". Ooooops!!! ¿Y ahora, quien daría el soporte? ... nadie. Para no alargar: el requerimiento cambio y se termino implementando de otra forma.

¿Saben cual es la gran ironía del asunto? La ironía es que en muchos proyectos de software internos (para las empresas) emplean diversas librerías de software libre. Por ejemplo, en tu trabajo, puede que estés usando jQuery como librería javascript "casi estándar" para el cliente web, y iReports como librería de creación de reportes PDFs, así como Apache POI para leer los archivos de Excel, o Struts y Hibernate, etc...

Ahora, todo eso es software libre... NOSOTROS (los desarrolladores) lo aprendimos a utilizar y lo implementamos. ¿Y de todo lo mencionado, quien  da el soporte? Lo da el programador autodidacta, el que quiere aprender siempre, el que no deja de estudiar, "el que sabe" que aquello ahorra tiempo, y por lo tanto $$$.

¿Cual es el miedo de usar MySQL o PosgreSQL en vez de DB2?, ¿o de usar JPA o Hibernate, en vez de hacer las consultas SQL a mano?, ¿o un buen framework web, servidor de aplicaciones, visor de documentos, sistema operativo, etc? Yo sinceramente, lo desconozco.

Quien nos dara el soporte...

Hace unos días, procure recordarle a algunos compañeros de trabajo, que absolutamente TODO el proyecto en el que estamos trabajando, correría perfectamente utilizando software libre...

La reacción de algunos fue: "ya va este con sus ideas", otros: "ya va a repetir el sermón de siempre", y uno en especial lanzo el típico grito al cielo: "Pero si usamos eso, ¿quien nos dará soporte?".

Ahora bien, de las primeras reacciones ni me preocupo (ya estoy acostumbrado a que me tilden de fanático del software libre), más la ultima opinión si me dejo pensando. Muchos empleados son parte de las "propagandas corporativas" (externas).

El ejemplo perfecto, es con Rational 7.0 (RAD). Ese IDE es el que uso... no temas, si usaste Eclipse, has usado RAD. La diferencia, es que RAD posee herramientas "enterprise", de las que no empleamos ABSOLUTAMENTE NINGUNA, ah, y también tiene un costo de aproximadamente $2500 por la Licencia de uso para ... ni quiero saber para cuantas personas (espero que no sea por usuario). ¿No me creen? vean acá. Se de muchos programadores preferirían utilizar otros IDEs gratuitos, o una versión de Eclipse que se adapte a lo que ya existe... como MyEclipse, que me atrevo a decir que funcionaria de lujo en vez de RAD, y el costo es de solo $25 por persona, si, solo $25 por persona.

Ese es el escenario económico de las herramientas de desarrollo en el trabajo.

Otro ejemplo: hace un par de meses, en un proyecto, nos vimos en la necesidad de investigar como se implementa un "WebService" con RAD 7 y WebSphere 5.0 Esta noble tarea es ridículamente complicada con RAD, y parece que los astros y tu suerte inciden en que tengas éxito o no en crear el WebService, al menos en la instalación que tengo, valga la aclaración. Dejando la ironía a un lado, personalmente fue dificultoso. Y de paso, puedo mencionar como contraparte que hacer un WebService con NetBeans es un tranquilo paseo... un paseo por la playa del cuco...

El punto, es que llegue al punto (valga la redundancia) de preguntar por el soporte por parte de GBM (IBM en El Salvador), después de todo "ellos" son los que "venden licencias" de productos como: RAD, WebSphere, etc... Naturalmente ellos sabrían como ayudar con el impase.

¿Saben que me dijeron cuando pregunte por famoso soporte en el trabajo?, la respuesta textual fue: "No contemos con eso, busca otra forma de hacerlo". Ooooops!!! ¿Y ahora, quien daría el soporte? ... nadie. Para no alargar: el requerimiento cambio y se termino implementando de otra forma.

¿Saben cual es la gran ironía del asunto? La ironía es que en muchos proyectos de software internos (para las empresas) emplean diversas librerías de software libre. Por ejemplo, en tu trabajo, puede que estés usando jQuery como librería javascript "casi estándar" para el cliente web, y iReports como librería de creación de reportes PDFs, así como Apache POI para leer los archivos de Excel, o Struts y Hibernate, etc...

Ahora, todo eso es software libre... NOSOTROS (los desarrolladores) lo aprendimos a utilizar y lo implementamos. ¿Y de todo lo mencionado, quien  da el soporte? Lo da el programador autodidacta, el que quiere aprender siempre, el que no deja de estudiar, "el que sabe" que aquello ahorra tiempo, y por lo tanto $$$.

¿Cual es el miedo de usar MySQL o PosgreSQL en vez de DB2?, ¿o de usar JPA o Hibernate, en vez de hacer las consultas SQL a mano?, ¿o un buen framework web, servidor de aplicaciones, visor de documentos, sistema operativo, etc? Yo sinceramente, lo desconozco.

Herramientas Colaborativas Para Desarrolladores

"La edición colaborativa de documentos es útil cuando el equipo de trabajo no se puede reunir físicamente"

Gracias al uso del internet, hoy en día los desarrolladores pueden participar en proyectos de software que no necesariamente se llevan a cabo en la misma zona geográfica de su domicilio haciendo uso de herramientas de versionamiento de código fuente que permite tener un repositorio en la nube el cual puede ser actualizado desde cualquier parte del mundo donde se posea una conexión a internet.

Así también ha sido de mucha ayuda contar con otros tipos de herramientas no solamente orientadas al control del código fuente sino también para la edición de documentos alojándolos en la nube por medio de Google Docs o la nueva versión web de Microsoft Office.

Aun así, lo que les hace falta a estas herramientas es la capacidad de edición colaborativa en tiempo real. Recientemente he descubierto varias aplicaciones web que me han sido de mucha ayuda al momento de revisar, editar y discutir código fuente de manera colaborativa así como también realizar y compartir diagramas. Estas herramientas son CollabEdit y Cacoo.


CollabEdit (link)

Collabedit es una herramienta que te permite escribir un documento de texto cualquiera al mismo tiempo que otros usuarios pueden ver dichos cambios en tiempo real y editar dichos cambios. Además la herramienta permite aplicarle formato al texto para resaltar palabras clave dependiendo del lenguaje de programación en el que esté escrito.

Lo que destaca a esta herramienta del resto es su simplicidad y facilidad de uso. No requiere registrarse ni pagar por el uso del servicio además que no define permisos de vista o edición, todos se vuelven editores del documento. Al entrar al sitio aparece a primera vista un botón para crear un nuevo documento el cual puede ser compartido con otras personas copiando la URL única que se genera para cada documento.

La desventaja de su simplicidad es que, al no tener la necesidad de registrarse en el sitio para poseer una cuenta, tampoco se posee la funcionalidad de guardar el documento aunque sí permite descargar el contenido como archivo. El propósito mas apropiado para esta herramienta es entonces, el usarlo como medio para discutir código fuente que ya tenias creado mediante algún IDE de desarrollo pero necesitas discutirlo o corregirlo de manera colaborativa con otros colegas a través de internet.

"Edición colaborativa de una clase Java en Collabedit(Clic para agrandar)"

Cacoo (link)

Cacoo te permite crear diagramas y ser editados de forma colaborativa con varios usuarios a la vez. A diferencia de collabedit, este si requiere que te registres(sin costo alguno) en su sitio pero a cambio gozas de las ventajas de poder asignar permisos a la hora de compartir tus diagramas además de que estos quedan guardados en tu cuenta.

Posee figuras para la creacion de una gran variedad de diagramas, como por ejemplo UML, Diagramas de Flujo, Diagramas de Red, Sitemaps, etc. Posee herramientas que lo asemejan a una aplicación de escritorio como el copy/paste de figuras, el undo y exportación a PNG. Además de todo lo anterior, el workspace cuenta con una sección para chat en la que los editores del diagrama pueden discutir como si estuvieran en msn o google talk, sin la necesidad de moverse a otra ventana.

Aca un vídeo de ejemplo del funcionamiento de Cacoo:

"Video demostrativo del funcionamiento de Cacoo"

internet desarrollo diseño google microsoft colaborativo real time

Herramientas Colaborativas Para Desarrolladores

"La edición colaborativa de documentos es útil cuando el equipo de trabajo no se puede reunir físicamente"

Gracias al uso del internet, hoy en día los desarrolladores pueden participar en proyectos de software que no necesariamente se llevan a cabo en la misma zona geográfica de su domicilio haciendo uso de herramientas de versionamiento de código fuente que permite tener un repositorio en la nube el cual puede ser actualizado desde cualquier parte del mundo donde se posea una conexión a internet.

Así también ha sido de mucha ayuda contar con otros tipos de herramientas no solamente orientadas al control del código fuente sino también para la edición de documentos alojándolos en la nube por medio de Google Docs o la nueva versión web de Microsoft Office.

Aun así, lo que les hace falta a estas herramientas es la capacidad de edición colaborativa en tiempo real. Recientemente he descubierto varias aplicaciones web que me han sido de mucha ayuda al momento de revisar, editar y discutir código fuente de manera colaborativa así como también realizar y compartir diagramas. Estas herramientas son CollabEdit y Cacoo.


CollabEdit (link)

Collabedit es una herramienta que te permite escribir un documento de texto cualquiera al mismo tiempo que otros usuarios pueden ver dichos cambios en tiempo real y editar dichos cambios. Además la herramienta permite aplicarle formato al texto para resaltar palabras clave dependiendo del lenguaje de programación en el que esté escrito.

Lo que destaca a esta herramienta del resto es su simplicidad y facilidad de uso. No requiere registrarse ni pagar por el uso del servicio además que no define permisos de vista o edición, todos se vuelven editores del documento. Al entrar al sitio aparece a primera vista un botón para crear un nuevo documento el cual puede ser compartido con otras personas copiando la URL única que se genera para cada documento.

La desventaja de su simplicidad es que, al no tener la necesidad de registrarse en el sitio para poseer una cuenta, tampoco se posee la funcionalidad de guardar el documento aunque sí permite descargar el contenido como archivo. El propósito mas apropiado para esta herramienta es entonces, el usarlo como medio para discutir código fuente que ya tenias creado mediante algún IDE de desarrollo pero necesitas discutirlo o corregirlo de manera colaborativa con otros colegas a través de internet.

"Edición colaborativa de una clase Java en Collabedit(Clic para agrandar)"

Cacoo (link)

Cacoo te permite crear diagramas y ser editados de forma colaborativa con varios usuarios a la vez. A diferencia de collabedit, este si requiere que te registres(sin costo alguno) en su sitio pero a cambio gozas de las ventajas de poder asignar permisos a la hora de compartir tus diagramas además de que estos quedan guardados en tu cuenta.

Posee figuras para la creacion de una gran variedad de diagramas, como por ejemplo UML, Diagramas de Flujo, Diagramas de Red, Sitemaps, etc. Posee herramientas que lo asemejan a una aplicación de escritorio como el copy/paste de figuras, el undo y exportación a PNG. Además de todo lo anterior, el workspace cuenta con una sección para chat en la que los editores del diagrama pueden discutir como si estuvieran en msn o google talk, sin la necesidad de moverse a otra ventana.

Aca un vídeo de ejemplo del funcionamiento de Cacoo:

"Video demostrativo del funcionamiento de Cacoo"

internet desarrollo diseño google microsoft colaborativo real time

Explotando la Web Developer Toolbar

"Una de las características que destacan a Firefox de los demás navegadores es su gran cantidad de útiles add-ons que se pueden instalar en el"

Firefox Addons

Como ya se nos esta haciendo costumbre acá en el Sr Byte, les traemos un conjunto de add-ons para Firefox que durante nuestras experiencias hemos descubierto como bastante útiles para trabajar con HTML, CSS y Javascript, especialmente porque los IDEs de desarrollo a veces no cuentan con las herramientas suficientes para editar visualmente las páginas web de modo que puedas saber con gran exactitud cómo se verá tu sitio en un navegador desde el momento en que lo estás diseñando.

Rodrigo anteriormente había publicado una colección de add-ons directamente en el sitio de addons de Firefox, a los cuales yo agregaré unos cuantos mas en este post y en otros posteriores los cuales considero un MUST para desarrolladores y diseñadores web.

Web developer toolbar (link)

Este es uno de los addons que no pueden faltar en el browser de todo desarrollador web. Contiene tantas opciones que en sí sustituye a muchos otros addons actualmente disponibles para desarrolladores web en el sitio de Mozilla. A continuación listaremos algunas de las opciones mas útiles de esta barra de herramientas para todo desarrollador web:

Miscellaneous -> Display line guides: Esta opción sirve para comprobar la alineación diferentes elementos HTML de un sitio web. Sustituye al add-on gridfox.

"En este ejemplo podemos ver como usamos las líneas guía del Web Developer Toolbar para detectar una porción desalineada en las secciones de la Wikipedia, la cual se ha remarcado con una flecha."

Miscellaneous -> Display ruler: Con esta opción puedes dibujar un rectángulo remarcando elementos HTML o cualquier sección dentro de una página web y este te dirá la posición X/Y, longitud y anchura de estos elementos en pixeles. Una vez dibujado el rectángulo este puede moverse y redimensionarse para remarcar exactamente el elemento del cual se desea saber su posición y tamaño dentro de la página. Sustituye al addon measureit.

"La caja de texto de búsqueda de Google mide exactamente 568 pixeles de ancho y 25 de largo"

Information -> Display Element Information: Esta opción convertirá tu puntero en una cruz con la cual podrás remarcar y seleciconar un elemento HTML dentro de un sitio web y al darle clic, WebDeveloper te mostrará un recuadro con los atributos, clases, posición, ancestros, etc. de dicho elemento. Además, debajo de la WebDeveloper toolbar te mostrará la ubicación en formato XPath de dicho elemento.

"Información del elemento HTML caja de búsqueda del sitio twitter.com"

Outline -> Outline Custom Elements: La cual te permite remarcar elementos HTML de una página mediante su id, clase o tag, permitiéndonos además remarcar 5 elementos a la vez y elegir el color con el que queremos que cada uno de ellos sea remarcado. Una forma de búsqueda de elementos similar a como lo realiza el addon FireFinder.

"WebDeveloper nos remarca los elementos HTML dentro de la página de Javaword que poseen la clase CSS llamada byline"

Cookies -> View Cookie Information: Esta opción nos abrirá una nueva pestaña de Firefox en la cual nos listará todas las cookies que los sitios visitados han guardado en nuestro sistema, además de poder editarlas y eliminarlas. Desde la opción Cookies también podemos agregar nuevas cookies a nuestro sistema operativo por si algún sitio la requiere. Funciona de manera similar al addon firecookie

"WebDeveloper me muestra las cookies que el sitio osum.sun.com ha guardado en mi computadora"

Information -> View Color Information: Opción con la cual podremos obtener la paleta de colores que se está usando en un sitio web, con sus respectivos valores en RGB hexadecimal. Esta nos la visualiza en una nueva pestaña de Firefox.

"WebDeveloper mostrando la paleta de colores que compone el sitio deviantart.com"

Tools -> Validate HTML: La cual nos lleva a la página de validación del w3c.org en el cual revisan la validez del código HTML con el cual está construido el sitio que estábamos visitando. En dicho sitio se nos lista detalladamente cada uno de los errores HTML que posee el sitio anteriormente visitado. Existe una opción extra, Tools -> Display page validation la cual te muestra una barra de herramientas debajo de la WebDeveloper la cual nos aplica una validación básica del HTML y CSS de nuestro sitio.

"Al validar el sitio stackoverflow.com desde la opción del WebDeveloper podemos ver que según el w3c validator este posee unos cuantos errores. Sin embargo la validación básica que aparece en la barra de herramientas bajo la WebDeveloper nos dice que el HTML es válido."

Próximamente hablaremos de otro add-on de Firefox que merece un post completo debido a su gran complejidad y al hecho que es un add-on que soporta más add-ons. Estén pendientes.

Explotando la Web Developer Toolbar

"Una de las características que destacan a Firefox de los demás navegadores es su gran cantidad de útiles add-ons que se pueden instalar en el"

Firefox Addons

Como ya se nos esta haciendo costumbre acá en el Sr Byte, les traemos un conjunto de add-ons para Firefox que durante nuestras experiencias hemos descubierto como bastante útiles para trabajar con HTML, CSS y Javascript, especialmente porque los IDEs de desarrollo a veces no cuentan con las herramientas suficientes para editar visualmente las páginas web de modo que puedas saber con gran exactitud cómo se verá tu sitio en un navegador desde el momento en que lo estás diseñando.

Rodrigo anteriormente había publicado una colección de add-ons directamente en el sitio de addons de Firefox, a los cuales yo agregaré unos cuantos mas en este post y en otros posteriores los cuales considero un MUST para desarrolladores y diseñadores web.

Web developer toolbar (link)

Este es uno de los addons que no pueden faltar en el browser de todo desarrollador web. Contiene tantas opciones que en sí sustituye a muchos otros addons actualmente disponibles para desarrolladores web en el sitio de Mozilla. A continuación listaremos algunas de las opciones mas útiles de esta barra de herramientas para todo desarrollador web:

Miscellaneous -> Display line guides: Esta opción sirve para comprobar la alineación diferentes elementos HTML de un sitio web. Sustituye al add-on gridfox.

"En este ejemplo podemos ver como usamos las líneas guía del Web Developer Toolbar para detectar una porción desalineada en las secciones de la Wikipedia, la cual se ha remarcado con una flecha."

Miscellaneous -> Display ruler: Con esta opción puedes dibujar un rectángulo remarcando elementos HTML o cualquier sección dentro de una página web y este te dirá la posición X/Y, longitud y anchura de estos elementos en pixeles. Una vez dibujado el rectángulo este puede moverse y redimensionarse para remarcar exactamente el elemento del cual se desea saber su posición y tamaño dentro de la página. Sustituye al addon measureit.

"La caja de texto de búsqueda de Google mide exactamente 568 pixeles de ancho y 25 de largo"

Information -> Display Element Information: Esta opción convertirá tu puntero en una cruz con la cual podrás remarcar y seleciconar un elemento HTML dentro de un sitio web y al darle clic, WebDeveloper te mostrará un recuadro con los atributos, clases, posición, ancestros, etc. de dicho elemento. Además, debajo de la WebDeveloper toolbar te mostrará la ubicación en formato XPath de dicho elemento.

"Información del elemento HTML caja de búsqueda del sitio twitter.com"

Outline -> Outline Custom Elements: La cual te permite remarcar elementos HTML de una página mediante su id, clase o tag, permitiéndonos además remarcar 5 elementos a la vez y elegir el color con el que queremos que cada uno de ellos sea remarcado. Una forma de búsqueda de elementos similar a como lo realiza el addon FireFinder.

"WebDeveloper nos remarca los elementos HTML dentro de la página de Javaword que poseen la clase CSS llamada byline"

Cookies -> View Cookie Information: Esta opción nos abrirá una nueva pestaña de Firefox en la cual nos listará todas las cookies que los sitios visitados han guardado en nuestro sistema, además de poder editarlas y eliminarlas. Desde la opción Cookies también podemos agregar nuevas cookies a nuestro sistema operativo por si algún sitio la requiere. Funciona de manera similar al addon firecookie

"WebDeveloper me muestra las cookies que el sitio osum.sun.com ha guardado en mi computadora"

Information -> View Color Information: Opción con la cual podremos obtener la paleta de colores que se está usando en un sitio web, con sus respectivos valores en RGB hexadecimal. Esta nos la visualiza en una nueva pestaña de Firefox.

"WebDeveloper mostrando la paleta de colores que compone el sitio deviantart.com"

Tools -> Validate HTML: La cual nos lleva a la página de validación del w3c.org en el cual revisan la validez del código HTML con el cual está construido el sitio que estábamos visitando. En dicho sitio se nos lista detalladamente cada uno de los errores HTML que posee el sitio anteriormente visitado. Existe una opción extra, Tools -> Display page validation la cual te muestra una barra de herramientas debajo de la WebDeveloper la cual nos aplica una validación básica del HTML y CSS de nuestro sitio.

"Al validar el sitio stackoverflow.com desde la opción del WebDeveloper podemos ver que según el w3c validator este posee unos cuantos errores. Sin embargo la validación básica que aparece en la barra de herramientas bajo la WebDeveloper nos dice que el HTML es válido."

Próximamente hablaremos de otro add-on de Firefox que merece un post completo debido a su gran complejidad y al hecho que es un add-on que soporta más add-ons. Estén pendientes.

Es Momento de Aplicar Reingenieria

"Las aplicaciones requieren constante mantenimiento y actualización. A veces la mejor actualización es su reescritura completa"

Como todos bien sabemos, todas las cosas especialmente los sistemas informáticos tienden a perder utilidad con el tiempo, ya sea debido a que no se adapta a los nuevos avances en hardware, no es compatible con las nuevas plataformas de ejecución o no logra satisfacer las nuevas necesidades del usuario.

De la misma manera como los activos fijos tienen su depreciación y fecha de expiración, cada programa de computadora tiene(o debería tener) definido su período de vida, de manera que los usuarios sepan cuándo sea el momento de reemplazarlos por otros más modernos. Lamentablemente no existe una unidad de medida infalible para saber cuándo un sistema informático ha expirado.

Cuando esto ocurre, es hora de aplicar reingeniería y empezar a rediseñar los sistemas existentes, manteniendo su funcionalidad actual pero utilizando herramientas de desarrollo mas ágiles, técnicas y disciplinas mas ordenadas y frameworks que permiten la extensibilidad del mismo, además de aprovechar para agregar nuevas características que pueda necesitar el usuario.

Si algo ya no sirve, vuélvelo a hacer desde cero.

Si es un programa hecho en Visual Fox Pro 6 que comparte archivos de tablas en una carpeta de red, aunque aún le sea útil al usuario, tú como programador sabes que será un completo dolor de cabeza tratar de consumir web services o transportar datos por Message Queue por lo que en lugar de seguir manteniendo un sistema pasado de moda desarrollado con código obsoleto, es mejor reescribirlo desde cero usando tecnologías que te ahorrarán mucho trabajo en el desarrollo y con capacidad de extenderlo según aparezcan nuevos estándares.

Desarrolla pensando en el futuro.

Como desarrollador puedo estar seguro que los usuarios no siempre saben lo que quieren que haga un sistema y cambian de opinión a medida que el sistema va siendo desarrollado. Por tal motivo, debes tener esto en cuenta a la hora de desarrollar tu sistema y diseñarlo de tal forma que pueda ser adaptable a posibles cambios, que tu sistema no "suponga" ni "imagine" que X o Y proceso se hace de tal manera, que todas las decisiones de negocio sean configurables! Ademas, permite que el programador que retomará tu sistema sea capaz de entenderlo y agregar nuevas funcionalidades que sean requeridas por los usuarios. Como una vez alguien escribió en Stack Overflow Programming Quotes:

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. (Siempre programa como si el que mantendrá tu código será un violento psicópata quien sabe donde vives)

-- Rick Osborne

Demuestrale al usuario que algo ha cambiado, y porqué este cambio es para mejora

Como escribí antes, el usuario está conforme y acostumbrado al viejo sistema del año 2000 que le resuelve a medias sus necesidades actuales y posiblemente el cambio que apliques no sea visible en la interfaz sino que solamente en las tecnologías de desarrollo. Aun así, hay que reflejar ese cambio también en la interfaz de usuario aplicando alguna nueva plantilla CSS(en el caso de una aplicación web), agregando nuevos servicios que quizá no eran necesarios pero que reflejen el cambio o agregando una sección de "Nueva versión, nuevas características" a manera de hacerle notar al usuario que algo ha cambiado y poder explicarle cuál es la nueva manera como ahora se realizan los procesos X y Y.

"Los developers de Gmail siempre han tenido la bondad de notificarnos cuando hay nuevas características disponibles"

Recuerden que en última instancia, nuestro trabajo como desarrolladores es satisfacer los deseos más oscuros y enajenados las necesidades de información de los usuarios de negocio en la empresa, por lo que tampoco es bueno pensar en reescribir todos los sistemas de la empresa solo por estar "in" en tecnologías de desarrollo de software.

agil calidad codigo computadoras desarrollo empresa fox gmail programacion productividad

Es Momento de Aplicar Reingenieria

"Las aplicaciones requieren constante mantenimiento y actualización. A veces la mejor actualización es su reescritura completa"

Como todos bien sabemos, todas las cosas especialmente los sistemas informáticos tienden a perder utilidad con el tiempo, ya sea debido a que no se adapta a los nuevos avances en hardware, no es compatible con las nuevas plataformas de ejecución o no logra satisfacer las nuevas necesidades del usuario.

De la misma manera como los activos fijos tienen su depreciación y fecha de expiración, cada programa de computadora tiene(o debería tener) definido su período de vida, de manera que los usuarios sepan cuándo sea el momento de reemplazarlos por otros más modernos. Lamentablemente no existe una unidad de medida infalible para saber cuándo un sistema informático ha expirado.

Cuando esto ocurre, es hora de aplicar reingeniería y empezar a rediseñar los sistemas existentes, manteniendo su funcionalidad actual pero utilizando herramientas de desarrollo mas ágiles, técnicas y disciplinas mas ordenadas y frameworks que permiten la extensibilidad del mismo, además de aprovechar para agregar nuevas características que pueda necesitar el usuario.

Si algo ya no sirve, vuélvelo a hacer desde cero.

Si es un programa hecho en Visual Fox Pro 6 que comparte archivos de tablas en una carpeta de red, aunque aún le sea útil al usuario, tú como programador sabes que será un completo dolor de cabeza tratar de consumir web services o transportar datos por Message Queue por lo que en lugar de seguir manteniendo un sistema pasado de moda desarrollado con código obsoleto, es mejor reescribirlo desde cero usando tecnologías que te ahorrarán mucho trabajo en el desarrollo y con capacidad de extenderlo según aparezcan nuevos estándares.

Desarrolla pensando en el futuro.

Como desarrollador puedo estar seguro que los usuarios no siempre saben lo que quieren que haga un sistema y cambian de opinión a medida que el sistema va siendo desarrollado. Por tal motivo, debes tener esto en cuenta a la hora de desarrollar tu sistema y diseñarlo de tal forma que pueda ser adaptable a posibles cambios, que tu sistema no "suponga" ni "imagine" que X o Y proceso se hace de tal manera, que todas las decisiones de negocio sean configurables! Ademas, permite que el programador que retomará tu sistema sea capaz de entenderlo y agregar nuevas funcionalidades que sean requeridas por los usuarios. Como una vez alguien escribió en Stack Overflow Programming Quotes:

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. (Siempre programa como si el que mantendrá tu código será un violento psicópata quien sabe donde vives)

-- Rick Osborne

Demuestrale al usuario que algo ha cambiado, y porqué este cambio es para mejora

Como escribí antes, el usuario está conforme y acostumbrado al viejo sistema del año 2000 que le resuelve a medias sus necesidades actuales y posiblemente el cambio que apliques no sea visible en la interfaz sino que solamente en las tecnologías de desarrollo. Aun así, hay que reflejar ese cambio también en la interfaz de usuario aplicando alguna nueva plantilla CSS(en el caso de una aplicación web), agregando nuevos servicios que quizá no eran necesarios pero que reflejen el cambio o agregando una sección de "Nueva versión, nuevas características" a manera de hacerle notar al usuario que algo ha cambiado y poder explicarle cuál es la nueva manera como ahora se realizan los procesos X y Y.

"Los developers de Gmail siempre han tenido la bondad de notificarnos cuando hay nuevas características disponibles"

Recuerden que en última instancia, nuestro trabajo como desarrolladores es satisfacer los deseos más oscuros y enajenados las necesidades de información de los usuarios de negocio en la empresa, por lo que tampoco es bueno pensar en reescribir todos los sistemas de la empresa solo por estar "in" en tecnologías de desarrollo de software.

agil calidad codigo computadoras desarrollo empresa fox gmail programacion productividad

Mejorando la usabilidad en Ubuntu 9.10

Apenas hace un par de dias (17 Junio 09), Canonical, en un intento de mejorar la usabilidad de Ubuntu (específicamente de "Karmic Koala", lista para salir el 29 de Octubre de 2009), inicio un proyecto llamado One Hundred Paper Cuts, la idea del mismo es arreglar cien errores de usabilidad que se encuentran en esta popular distribución.


No se de alguna otra iniciativa similar en proyectos de software libre de gran escala (como lo es Ubuntu), pero lo más probable, es que esta costumbre se convierta en una practica seguida para mejorar exponencialmente cualquier tipo de proyecto.

Ahora bien, quiero que quede clara la idea de un "Paper Cut". Los Paper Cuts son simplemente pequeños bugs o defectos de usabilidad, y con pequeño me refiero a: mensajes mal traducidos, mensajes mal redactados, usar X version de programa en vez de la Y, etc...
Lo interesante de un Paper Cut, es que probablemente SEA UN BUG para un nuevo usuario de Ubuntu, pero para el usuario veterano-linuxero curtido de software libre, sera simplemente uno de esas cosas "espero que alguien arregle, pero por el momento me vale que este asi".

"Koala de Origami"

De lo que si me siento emocionado, es que ya esten los primeros diez Paper Cuts realmente definidos para resolver en el Ubuntu development list.
¿Por qué me emociona? Porque ademas de que la gente de Canonical, se ve que realmente esta trabajando, el concepto del proyecto no solo es genial y noble, sino que también aporta mejoras significativas y funcionales que inciden en practicas "sanas" de calidad para cualquier tipo de software, y también refuerza los vínculos entre Empresa-Developers-Comunidad.
Después de todo, el software libre, siempre ha estado orientado a comunidades...


Algunas de las mejoras inmediatas para el "Karmic Koala", y que en lo personal, estaba esperando en Ubuntu es el uso del nuevo Kernel 2.6.31, GRUB2, y obviamente EXT4 como sistema de archivos(ficheros) por defecto.

Y hablando de Ubuntu, les recomiendo que lean la divertida anécdota de DKCross: "Ubunteando en Microsoft El Salvador". Mi única observación, es que la próxima vez espero que me inviten ;)

Si esta practica realmente es retomada por otros proyectos de software libre (distros, programas, etc) pronto veremos muchas mejoras significativas en la calidad del software que usamos y producimos.
Y tú, ¿usarías esta idea en tus proyectos de software?

ubuntu karmic koala usabilidad linux paper cuts

Mejorando la usabilidad en Ubuntu 9.10

Apenas hace un par de dias (17 Junio 09), Canonical, en un intento de mejorar la usabilidad de Ubuntu (específicamente de "Karmic Koala", lista para salir el 29 de Octubre de 2009), inicio un proyecto llamado One Hundred Paper Cuts, la idea del mismo es arreglar cien errores de usabilidad que se encuentran en esta popular distribución.


No se de alguna otra iniciativa similar en proyectos de software libre de gran escala (como lo es Ubuntu), pero lo más probable, es que esta costumbre se convierta en una practica seguida para mejorar exponencialmente cualquier tipo de proyecto.

Ahora bien, quiero que quede clara la idea de un "Paper Cut". Los Paper Cuts son simplemente pequeños bugs o defectos de usabilidad, y con pequeño me refiero a: mensajes mal traducidos, mensajes mal redactados, usar X version de programa en vez de la Y, etc...
Lo interesante de un Paper Cut, es que probablemente SEA UN BUG para un nuevo usuario de Ubuntu, pero para el usuario veterano-linuxero curtido de software libre, sera simplemente uno de esas cosas "espero que alguien arregle, pero por el momento me vale que este asi".

"Koala de Origami"

De lo que si me siento emocionado, es que ya esten los primeros diez Paper Cuts realmente definidos para resolver en el Ubuntu development list.
¿Por qué me emociona? Porque ademas de que la gente de Canonical, se ve que realmente esta trabajando, el concepto del proyecto no solo es genial y noble, sino que también aporta mejoras significativas y funcionales que inciden en practicas "sanas" de calidad para cualquier tipo de software, y también refuerza los vínculos entre Empresa-Developers-Comunidad.
Después de todo, el software libre, siempre ha estado orientado a comunidades...


Algunas de las mejoras inmediatas para el "Karmic Koala", y que en lo personal, estaba esperando en Ubuntu es el uso del nuevo Kernel 2.6.31, GRUB2, y obviamente EXT4 como sistema de archivos(ficheros) por defecto.

Y hablando de Ubuntu, les recomiendo que lean la divertida anécdota de DKCross: "Ubunteando en Microsoft El Salvador". Mi única observación, es que la próxima vez espero que me inviten ;)

Si esta practica realmente es retomada por otros proyectos de software libre (distros, programas, etc) pronto veremos muchas mejoras significativas en la calidad del software que usamos y producimos.
Y tú, ¿usarías esta idea en tus proyectos de software?

ubuntu karmic koala usabilidad linux paper cuts

Si no estas usando un framework...

Si no estas usando un framework para desarrollar software, probablemente estés re-inventando la rueda. La única validez que tiene el proceso de "re-inventar la rueda" es para conocer como funciona. Pero si te están pidiendo elaborar un sistema realmente amplio para una empresa, con una cobertura del 70% de las operaciones, y esa empresa NO se dedica a realizar software... entonces es una seria estupidez desarrollar software sin un framework.

"Cuidad, si re-inventas la rueda, podrías terminar así..."

Un framework, es una estructura de soporte definida mediante la cual, se desarrolla y organiza lógicamente una pieza de software. Entonces, el programa, modulo o sistema en cuestión, se apoya en un framework (en el marco de trabajo) para ser desarrollado. Un framework incluirá soporte para generar programas, una serie de librerías organizadas en módulos lógicos, y un lenguaje (que se ejecuta en una maquina virtual usualmente) para ayudar a desarrollar y unificar los módulos que conformen el proyecto.
El uso de un framework, es tan obligatorio en un proyecto de grandes magnitudes, como lo son las típicas practicas de desarrollo de software:

• Unit Testing
• Code Coverage
• MVC
• Version Control
• Automated Deployment

Para los estudiantes, o novatos en el tema, permitanme dar un sencillo ejemplo:
Imaginemos por un breve momento, que se quiere construir (de acuerdo a un plano) una casa de dos plantas, para tres personas, con cochera y jardín.
Este es el problema:

construir la casa de acuerdo a las especificaciones (del plano), construirla en un tiempo planificado y con la mayor eficiencia posible.

Bien, hay un par de caminos que podemos tomar, el primero consiste en:
1. Comprar ladrillos, cemento, arena, pintura, tejas, piso cerámico, defensas, hierro, contratar mano de obra calificada, comenzar la construcción....

"Niiiiceee...."

Al menos, eso es lo lógico, ¿no? Son los pasos "normales", lo "sano".
La misma lógica es aplicable al mundo del software.... sin embargo, existen personas que rechazan esta "linea de pensamiento" y cometen errores que en el contexto del ejemplo anterior, seria:

2. Construir la casa, desde CERO (literalmente), de manera que vamos a inventar nuestro propio cemento, pintura, techo, defensas, pisos. Vamos a usar herramientas que no estamos seguros si las vamos a aprovechar y vamos a gastar en cosas completamente innecesarias... como... flamingos rosados de mármol tallados a mano importados de la India para el jardín (wtf?).

"NOT so nice. NOT AT ALL."

Y para colmo, creen que se puede realizar la casa, en el mismo tiempo que lo haría de la manera "normal". Se que para muchos lectores, esto suena ridículo, ¡¿verdad?! suena muy ridículo. Es más, seria increíble pensar, que alguien proponga soluciones así.... pero les tengo una noticia...

Este es el caso que sucede SUCEDE en las empresas, y también SUCEDE en los equipos de desarrollo.

Casi a diario, se esta perpetrando este crimen. No solo es una perdida de tiempo, sino que también es un insulto al desarrollador de software que si tiene buenas practicas (o que intenta tenerlas). ¿Saben que es lo peor? muchos cometen el error de creer que con solo usar Java o .NET (y solamente eso), ya están usando un framework suficiente para hacer un RIA (Rich Internet Application) en 3 meses. Pues déjenme decirle, que si ese fuera el caso, no existiría Spring, Struts, IceFaces, MyFaces, ASP.NET MVC, Adobe Flex, RoR, Etc...
Lo terrible es que este suceso se sigue perpetrando, y es por simple ignorancia...

"¡Que pena ser ignorante!"

Empresas, por que rayos ¿no capacitan a sus gerentes de informática?, ¿a sus arquitectos de software?, ¿a sus team leaders?, ¿Por que no escuchan las voces de los programadores, que de cara a semejantes atrocidades, alzan la voz inmediatamente y proponen el cambio?
Ya lo dije antes, pero no me molesta volverlo a repetir...

"si un equipo de desarrollo, sumergido hasta el cuello de dificultades técnicas, pretende producir software: simplemente vamos a obtener software que es REFLEJO de las dificultades, problemas, ignorancia, malos requerimientos y mala administración en los que se vio envuelto el mismo".

Instruyace, no deje de leer, no se estanque, procure estar a la par (o solo un centímetro atrás) de la tecnología, y procure, sobre todas las cosas, escuchar a sus colegas, pero a los que saben.

Pero sobre todas las cosas, por favor, si no estas usando un framework.... ya es hora de que comience a usar uno.

¿Y tu, qué frameworks usas?
frameworks desarrollo software practicas programacion ignorancia