"La evolución de la red"

"La evolución de la red" (The Evolution of the Web) es una webapp que muestra una linea de tiempo para ocho navegadores, con versiones, introducción de características y tecnologías web (como Flash, AJAX, etc). Por cierto, las bandas de color de fondo representan la interacción entre las tecnologías web y navegadores.

"The Evolution of the Web"

No me atrevo a escribir más, ya la funcionalidad de la aplicación habla por si sola, así que los invito a utilizarla:

http://evolutionofweb.appspot.com/

Como recurso educativo e histórico, esta aplicación la tienen que tener a la mano, ojalá que le den seguimiento.
¡Saludos!

NinjaUI - Componentes UI Prefabricados con jQuery

"Página principal de Ninja UI. Un muy prometedor proyecto basado en jQuery"

Recientemente me doy cuenta del lanzamiento de este pequeño set de componentes javascript basados en jQuery que prometen ahorrarnos trabajo al momento de construir interfaces de usuario html/css/javascript. Para aquellos que ya han trabajado con anterioridad con el framework jQuery, este les parecerá muy similar a como lo hacemos hoy en día con jquery-ui.

En la página de ejemplos podrán notar todo lo que podemos construir haciendo uso de estos componentes. En lo personal los he estado probando un rato y me han parecido bastante buenos dado que a penas se encuentran en su primer fase beta. Hasta el momento no he observado en el sitio ningún tutorial pero podemos apreciar su uso examinando el código fuente de la página de ejemplos utilizando, por ejemplo, firebug desde firefox y según mis observaciones nada más consiste en crear un par de divs/spans y asignarle las respectivas clases css según el componente que querramos construir, lo cual me parece bastante bueno ya que están utilizando el javascript de manera no intrusiva.

"Examinando el código fuente de NinjaUI desde Firefox con Firebug"

Pueden descargar la versión Beta 1.0 (la ás reciente al momento de escribir este post) directamente desde la página principal o haciendo click aquí.

Mis expectativas para su próxima versión consisten en la posibilidad de venir con diferentes temas prefabricados y añadir aún más componentes como calendarios, popups modales y quizá explotar un poco mas los features de jQuery como draggable y animate.

Démosle una oportunidad y algo de tiempo y veamos hasta donde logra llegar este proyecto.

Visto en Kabytes.

Mozilla Glow (Lanzamiento Mozilla Firefox 4)

Hoy es el lanzamiento oficial de Firefox 4, y para añadirle aun más relevancia al lanzamiento, la gente de Mozilla nos presenta glow.mozilla.org, que es un sitio web que le lleva la pista a todas las descargas de la nueva versión del popular navegador.

http://glow.mozilla.com/

Cada punto en el mapa representa a alguien que esta descargando Firefox (con algunos segundos de retraso), y el contador en la parte superior muestra el numero total de descargas desde 22 de Marzo de 2011 (lanzamiento oficial de Firefox 4).

Descarga Firefox 4 dando clic acá http://www.mozilla.com/es-ES/firefox/
Y tú, ¿ya descargaste Firefox 4?

Readability (complemento de Firefox)

Readability es un complemento de Firefox que hace que la lectura de las páginas web se vuelva más simple y más agradable. Este complemento retira la información superflua y muestra el contenido principal en una sola columna de texto.

Readability en acción.

Readability te permite tener el control de la apariencia visual del texto que vas a leer, para que tu experiencia sea mas cómoda, accesible y placentera.





Y también una herramienta bastante útil para imprimir información de paginas web en menos papel :)
Si eres de los que pasan horas leyendo artículos en Internet, este complemento va a hacer tu lectura más placentera y amena para tus vista:

https://addons.mozilla.org/en-US/firefox/addon/readability/

Espero que les sirva, ¡saludos!

Aprendiendo a usar Canvas en HTML5

HTML5, la nueva versión del lenguaje de marcado para crear páginas web está ya soportado por los últimos navegadores. Esta nueva versión trae muchas novedades a la web y características especiales que antes solo era posible llevarlas a cabo usando Flash. Entre los tags más mencionados son el tag Vídeo, para incrustar y reproducir vídeos nativamente sin necesidad de Flash y el tag Canvas que permite crear y animar gráficos 2D y hasta 3D de forma nativa.

En este artículo demostraremos el uso del tag Canvas, realizando dibujos y un mini paint utilizando CSS y Javascript.

Antes de empezar, cabe mencionar que por el momento no todos los navegadores soportan todas las características de HTML5. Por ejemplo, Internet Explorer es de los que aún no soportan el tag Canvas y por lo tanto no podrán apreciar el demo de canvas que hemos publicado en este post. A continuación una tabla comparativa mostrando las características de HTML5 que soporta cada navegador a la fecha:

"Tabla comparativa mostrando las características de HTML5 soportadas por cada navegador"

Primeramente, debemos crear nuestra página HTML con su respectivo body dentro del cual debemos ubicar nuestro tag Canvas. Este tag no requiere atributos especiales mas que su height y width. Entre la apertura y cierre del tag Canvas puedes incluir cualquier otro contenido HTML el cual le será mostrado al usuario si este utiliza un navegador que no soporte el tag. Esto puede servir como un espacio para mostrar un mensaje indicando la falta de soporte por falta del navegador. También es útil asignarle un ID a dicho tag, para luego poder identificarlo al momento de manipularlo desde Javascript:

"Código HTML mostrando el tag Canvas y algunos de sus atributos"

Una vez que tienes el tag, es hora de manipularlo desde Javascript! empecemos por obtener el Context, el cual es el objeto que posee los métodos para dibujar dentro del canvas. Entre estos métodos se encuentran fillFect(), arc(), moveTo(), stroke(), etc. Este objeto Context además tiene una propiedad llamada fillStyle con la cual puedes definirle el color en formato rgb o rgba con el cual se realizarán los trazos.

"Código Javascript obteniendo el objeto Context asociado al objeto DOM Canvas para luego establecer un color vía RGB y pintar un rectángulo"

A continuación mostramos dos ejemplos un poco más elaborados. En el primero, mostramos cómo dibujar una cara feliz y en el segundo cómo asociar los eventos del ratón para pintar sobre el canvas por medio del click. Para ello utilizamos la aplicación web jsFiddle que te permite incrustar HTML, CSS y Javascript al mismo tiempo que se puede apreciar el resultado de dicho código. Además se hace uso de jQuery para simplificar el acceso al objeto DOM Canvas:

"Código HTML, CSS y Javascript para dibujar una cara feliz en el Canvas. Clic en el tab Result para ver el resultado"

"Código HTML, CSS y Javascript para crear una superficie de dibujo en la cual se pinta un cuadro negro por cada clic del ratón. Clic en el tab Result para ver e interactuar con el resultado"

En este link pueden probar Sketchpad, un ejemplo mucho más elaborado de una aplicación web simulando las características de paint.

También en el Mozilla Developer Center pueden encontrar más información y tutoriales sobre el tag canvas y el resto de características HTML5 actualmente soportadas por Mozilla Firefox.

En mi opinión personal, HTML5 permitirá sustituir Flash en un futuro no muy lejano por lo menos en las características que antes solían verse en páginas web como animaciones, reproducción de medios y videojuegos en línea. Es importante aprender desde ya lo que se puede hacer con él y así estar preparados para un futuro en el que este estándar sea utilizado por la mayoría de sitios y la crezca demanda de programadores con dichos conocimientos.

Aprendiendo a usar Canvas en HTML5

HTML5, la nueva versión del lenguaje de marcado para crear páginas web está ya soportado por los últimos navegadores. Esta nueva versión trae muchas novedades a la web y características especiales que antes solo era posible llevarlas a cabo usando Flash. Entre los tags más mencionados son el tag Vídeo, para incrustar y reproducir vídeos nativamente sin necesidad de Flash y el tag Canvas que permite crear y animar gráficos 2D y hasta 3D de forma nativa.

En este artículo demostraremos el uso del tag Canvas, realizando dibujos y un mini paint utilizando CSS y Javascript.

Antes de empezar, cabe mencionar que por el momento no todos los navegadores soportan todas las características de HTML5. Por ejemplo, Internet Explorer es de los que aún no soportan el tag Canvas y por lo tanto no podrán apreciar el demo de canvas que hemos publicado en este post. A continuación una tabla comparativa mostrando las características de HTML5 que soporta cada navegador a la fecha:

"Tabla comparativa mostrando las características de HTML5 soportadas por cada navegador"

Primeramente, debemos crear nuestra página HTML con su respectivo body dentro del cual debemos ubicar nuestro tag Canvas. Este tag no requiere atributos especiales mas que su height y width. Entre la apertura y cierre del tag Canvas puedes incluir cualquier otro contenido HTML el cual le será mostrado al usuario si este utiliza un navegador que no soporte el tag. Esto puede servir como un espacio para mostrar un mensaje indicando la falta de soporte por falta del navegador. También es útil asignarle un ID a dicho tag, para luego poder identificarlo al momento de manipularlo desde Javascript:

"Código HTML mostrando el tag Canvas y algunos de sus atributos"

Una vez que tienes el tag, es hora de manipularlo desde Javascript! empecemos por obtener el Context, el cual es el objeto que posee los métodos para dibujar dentro del canvas. Entre estos métodos se encuentran fillFect(), arc(), moveTo(), stroke(), etc. Este objeto Context además tiene una propiedad llamada fillStyle con la cual puedes definirle el color en formato rgb o rgba con el cual se realizarán los trazos.

"Código Javascript obteniendo el objeto Context asociado al objeto DOM Canvas para luego establecer un color vía RGB y pintar un rectángulo"

A continuación mostramos dos ejemplos un poco más elaborados. En el primero, mostramos cómo dibujar una cara feliz y en el segundo cómo asociar los eventos del ratón para pintar sobre el canvas por medio del click. Para ello utilizamos la aplicación web jsFiddle que te permite incrustar HTML, CSS y Javascript al mismo tiempo que se puede apreciar el resultado de dicho código. Además se hace uso de jQuery para simplificar el acceso al objeto DOM Canvas:

"Código HTML, CSS y Javascript para dibujar una cara feliz en el Canvas. Clic en el tab Result para ver el resultado"

"Código HTML, CSS y Javascript para crear una superficie de dibujo en la cual se pinta un cuadro negro por cada clic del ratón. Clic en el tab Result para ver e interactuar con el resultado"

En este link pueden probar Sketchpad, un ejemplo mucho más elaborado de una aplicación web simulando las características de paint.

También en el Mozilla Developer Center pueden encontrar más información y tutoriales sobre el tag canvas y el resto de características HTML5 actualmente soportadas por Mozilla Firefox.

En mi opinión personal, HTML5 permitirá sustituir Flash en un futuro no muy lejano por lo menos en las características que antes solían verse en páginas web como animaciones, reproducción de medios y videojuegos en línea. Es importante aprender desde ya lo que se puede hacer con él y así estar preparados para un futuro en el que este estándar sea utilizado por la mayoría de sitios y la crezca demanda de programadores con dichos conocimientos.

Explotando Firebug

Esta es la continuación del post de herramientas de desarrollo que puedes utilizar usando add-ons de Firefox.

Firebug (link) es uno de los add-ons para Firefox mas complejos y mas populares en los círculos de desarrolladores. Te permite modificar a tu antojo la estructura del DOM de cualquier pagina en la que estés navegando, modificar sus clases CSS y depurar sus scripts, monitorear http requests, ejecutar scripts sobre las paginas web, perfilar los tiempos de carga/ejecución de scripts, etc. aplicando todos los cambios realizados en caliente, visualizándolos al muy estilo WYSIWYG aunque obviamente todos estos cambios que se realizan no se aplican en el servidor. Entre sus usos mas comunes es depurar código javascript o aplicar cambios en el HTML/CSS asegurándose que se verán correctamente ya que estas realizando estos cambios directamente en el navegador.

"Editando en caliente las propiedades CSS de la pagina de google.com desde Firebug"

La característica especial que distingue a este add-on es la posibilidad de ser extendido mediante mas add-ons (sub add-ons) los cuales le permiten hacer muchas mas tareas de las que actualmente permite.

CodeBurner for Firebug (link) Este add-on te muestra una nueva pestaña después de la pestaña DOM, con la palabra "Code Example" en la cual, cuando estas inspeccionando el HTML de un sitio y tienes dudas sobre algún tag, este te muestra una pequeña referencia con la descripción de dicho tag y un sencillo ejemplo.

"Visualizando una referencia sobre el tag desde Code burner, el tag se encuentra en la pagina principal de flickr.com, como se puede ver en la imagen"

FireFinder for Firebug (link) Este add-on te permite hacer búsquedas de cualquier elemento HTML dentro del sitio que estas visitando. Esta búsqueda puede ser del texto contenido dentro de alguna etiqueta o mediante el uso de selectores similares a los usados en prototype o jquery. Una vez encontrado el elemento, te lo remarca dentro de la pagina web con lineas punteadas rojas y te muestra un vinculo llamado "inspect" el cual te permite ubicar este elemento dentro de la pestaña "HTML" de Firebug. Como bonus también te permite generar un vinculo para FriendlyFire usando jsbin, con el cual compartes el código HTML mediante una URL para poder ser visaulizado y editado por otros, muy al estilo de pastebin.

"FireFinder, remarcando el logotipo de twitter en la pagina de twitter.com, el cual fue buscado usando el selector #header2>a.logo"

Firecookie (link) Este add-on de brinda la capacidad de monitorear y modificar las cookies que están siendo ocupadas en los sitios que visitas.

"FireCookie, mostrando las cookies que se almacenan localmente al entrar al sitio delicious.com"

Firiepicker (link) Es un sencillo add-on que te muestra un selector de color (color picker) cuando dentro de una pagina web estas inspeccionando las propiedades css relacionadas con el color de un elemento. De esta forma puedes seleccionar el color de manera visual y este te escribe su respectivo codigo RGB.

"Seleccionando un nuevo color usando FirePicker para la propiedad CSS background-color, en uno de los elementos del sitio deviantart.com"

Fireunit (link) Con Fireunit puedes escribir Unit Tests para Javascript y ejecutar/visualizar sus resultados desde una pestaña en Firebug. Esto lo haces desde la nueva pestaña llamada "Tests" que te aparece en Firebug al instalar este add-on. El modelo de código para estos unit tests aparece en el mismísimo código fuente del sitio de fireunit, cuando lo inspeccionas con Firebug. Dicho código se muestra a continuación:

 // Some examples of using FireUnit
if ( typeof fireunit === "object" ) {
// Simple true-like/false-like testing
fireunit.ok( true, "I'm going to pass!" );
fireunit.ok( false, "I'm going to fail!" );
// Compare two strings - shows a diff of the
// results if they're different
fireunit.compare(
"The lazy fox jumped over the log.",
"The lazy brown fox jumped the log.",
"Are these two strings the same?"
);
// Compare a string using a regular expression
fireunit.reCompare(
"The .* fox jumped the log.",
"The lazy brown fox jumped the log.",
"Compare a string using a RegExp."
);
// Display the total results
fireunit.testDone();
}

"Visualizando con FireUnit el resultado de los unit tests de ejemplo que vienen en el sitio fireunit.org"

debug firebug firefox javascript programacion unit test

Explotando Firebug

Esta es la continuación del post de herramientas de desarrollo que puedes utilizar usando add-ons de Firefox.

Firebug (link) es uno de los add-ons para Firefox mas complejos y mas populares en los círculos de desarrolladores. Te permite modificar a tu antojo la estructura del DOM de cualquier pagina en la que estés navegando, modificar sus clases CSS y depurar sus scripts, monitorear http requests, ejecutar scripts sobre las paginas web, perfilar los tiempos de carga/ejecución de scripts, etc. aplicando todos los cambios realizados en caliente, visualizándolos al muy estilo WYSIWYG aunque obviamente todos estos cambios que se realizan no se aplican en el servidor. Entre sus usos mas comunes es depurar código javascript o aplicar cambios en el HTML/CSS asegurándose que se verán correctamente ya que estas realizando estos cambios directamente en el navegador.

"Editando en caliente las propiedades CSS de la pagina de google.com desde Firebug"

La característica especial que distingue a este add-on es la posibilidad de ser extendido mediante mas add-ons (sub add-ons) los cuales le permiten hacer muchas mas tareas de las que actualmente permite.

CodeBurner for Firebug (link) Este add-on te muestra una nueva pestaña después de la pestaña DOM, con la palabra "Code Example" en la cual, cuando estas inspeccionando el HTML de un sitio y tienes dudas sobre algún tag, este te muestra una pequeña referencia con la descripción de dicho tag y un sencillo ejemplo.

"Visualizando una referencia sobre el tag desde Code burner, el tag se encuentra en la pagina principal de flickr.com, como se puede ver en la imagen"

FireFinder for Firebug (link) Este add-on te permite hacer búsquedas de cualquier elemento HTML dentro del sitio que estas visitando. Esta búsqueda puede ser del texto contenido dentro de alguna etiqueta o mediante el uso de selectores similares a los usados en prototype o jquery. Una vez encontrado el elemento, te lo remarca dentro de la pagina web con lineas punteadas rojas y te muestra un vinculo llamado "inspect" el cual te permite ubicar este elemento dentro de la pestaña "HTML" de Firebug. Como bonus también te permite generar un vinculo para FriendlyFire usando jsbin, con el cual compartes el código HTML mediante una URL para poder ser visaulizado y editado por otros, muy al estilo de pastebin.

"FireFinder, remarcando el logotipo de twitter en la pagina de twitter.com, el cual fue buscado usando el selector #header2>a.logo"

Firecookie (link) Este add-on de brinda la capacidad de monitorear y modificar las cookies que están siendo ocupadas en los sitios que visitas.

"FireCookie, mostrando las cookies que se almacenan localmente al entrar al sitio delicious.com"

Firiepicker (link) Es un sencillo add-on que te muestra un selector de color (color picker) cuando dentro de una pagina web estas inspeccionando las propiedades css relacionadas con el color de un elemento. De esta forma puedes seleccionar el color de manera visual y este te escribe su respectivo codigo RGB.

"Seleccionando un nuevo color usando FirePicker para la propiedad CSS background-color, en uno de los elementos del sitio deviantart.com"

Fireunit (link) Con Fireunit puedes escribir Unit Tests para Javascript y ejecutar/visualizar sus resultados desde una pestaña en Firebug. Esto lo haces desde la nueva pestaña llamada "Tests" que te aparece en Firebug al instalar este add-on. El modelo de código para estos unit tests aparece en el mismísimo código fuente del sitio de fireunit, cuando lo inspeccionas con Firebug. Dicho código se muestra a continuación:

 // Some examples of using FireUnit
if ( typeof fireunit === "object" ) {
// Simple true-like/false-like testing
fireunit.ok( true, "I'm going to pass!" );
fireunit.ok( false, "I'm going to fail!" );
// Compare two strings - shows a diff of the
// results if they're different
fireunit.compare(
"The lazy fox jumped over the log.",
"The lazy brown fox jumped the log.",
"Are these two strings the same?"
);
// Compare a string using a regular expression
fireunit.reCompare(
"The .* fox jumped the log.",
"The lazy brown fox jumped the log.",
"Compare a string using a RegExp."
);
// Display the total results
fireunit.testDone();
}

"Visualizando con FireUnit el resultado de los unit tests de ejemplo que vienen en el sitio fireunit.org"

debug firebug firefox javascript programacion unit test

Monitorea los Ajax HttpRequests con Fiddler

Como programador de sitios web basados en Ajax, tiendo a necesitar una herramienta que me permita verificar exactamente que le envió al server en un XmlHttpRequest vía Ajax. Los parámetros que van en el request, la URL a la que lo envió, la respuesta recibida etc. Así puedo determinar si un error se genero porque se enviaron datos erróneos al server desde el Ajax Request o si fue el server quien interpreto o proceso mal los datos.

Mi herramienta para realizar estos monitoreos fue Firebug, un add-on para Firefox que te permite depurar Javascript, inspeccionar/manipular el DOM y también inspeccionar/manipular los estilos de un sitio. Este además visualiza en su consola los diferentes HttpRequests que se hacen al server.

Como muchos sabrán, no siempre basta con realizar pruebas y depuraciones de tu sitio usando el browser Firefox ya que comúnmente los errores ser producen al navegar en tu sitio desde Internet Explorer o algún otro y como hasta donde he podido investigar, ningún otro navegador cuenta con un add-on como el de Firefox para visualizar estas peticiones de Ajax, no hay otra manera de hacerlo mas que con una herramienta externa al browser.

Buscando en la web encontré la herramienta llamada Fiddler. Este es un proxy web hecho con el framework Microsoft.Net para captura y depuración del trafico http que se genera en tu computadora. Este trafico es comúnmente generado por los browsers al navegar dentro de sitios web, dar click sobre algun hipervinculo de alguna pagina o cuando un evento javascript dispara un request XmlHttp.

"Captura de pantalla de Fiddler, monitoreando el trafico http local. Visualizando en la parte derecha el detalle de un Ajax Request de la pagina de twitter.com"

Como pueden ver en la captura de pantalla, Fiddler estomáticamente captura todos los requests http y los lista en la columna de la izquierda, mostrando los detalles de cada request en la columna de la izquierda, como por ejemplo los headers de la petición, parámetros y la respuesta obtenida.

Hay un pequeño problema con Fiddler cuando intentas monitorear el trafico de un server alojado en tu localhost. Esto es porque, como ellos mismos mencionan en su sitio: "Internet Explorer and the .NET Framework are hardcoded not to send requests for Localhost through any proxies" por lo cual, nos vemos en la necesidad de no utilizar la palabra "localhost" ni su IP equivalente 127.0.0.1 para acceder desde nuestro browser a los sitios alojados en nuestro server. Como alternativa podemos usar en su lugar, el nombre de nuestro equipo. Por ejemplo:

en lugar de:

http://localhost:8080/miSitioWeb/index.jsp

tenemos que escribir:

http://laptux:8080/miSitioWeb/index.jsp

Asumiendo que el nombre de mi equipo es "laptux".

firefox firebug javascript ajax fiddler internet explorer

Monitorea los Ajax HttpRequests con Fiddler

Como programador de sitios web basados en Ajax, tiendo a necesitar una herramienta que me permita verificar exactamente que le envió al server en un XmlHttpRequest vía Ajax. Los parámetros que van en el request, la URL a la que lo envió, la respuesta recibida etc. Así puedo determinar si un error se genero porque se enviaron datos erróneos al server desde el Ajax Request o si fue el server quien interpreto o proceso mal los datos.

Mi herramienta para realizar estos monitoreos fue Firebug, un add-on para Firefox que te permite depurar Javascript, inspeccionar/manipular el DOM y también inspeccionar/manipular los estilos de un sitio. Este además visualiza en su consola los diferentes HttpRequests que se hacen al server.

Como muchos sabrán, no siempre basta con realizar pruebas y depuraciones de tu sitio usando el browser Firefox ya que comúnmente los errores ser producen al navegar en tu sitio desde Internet Explorer o algún otro y como hasta donde he podido investigar, ningún otro navegador cuenta con un add-on como el de Firefox para visualizar estas peticiones de Ajax, no hay otra manera de hacerlo mas que con una herramienta externa al browser.

Buscando en la web encontré la herramienta llamada Fiddler. Este es un proxy web hecho con el framework Microsoft.Net para captura y depuración del trafico http que se genera en tu computadora. Este trafico es comúnmente generado por los browsers al navegar dentro de sitios web, dar click sobre algun hipervinculo de alguna pagina o cuando un evento javascript dispara un request XmlHttp.

"Captura de pantalla de Fiddler, monitoreando el trafico http local. Visualizando en la parte derecha el detalle de un Ajax Request de la pagina de twitter.com"

Como pueden ver en la captura de pantalla, Fiddler estomáticamente captura todos los requests http y los lista en la columna de la izquierda, mostrando los detalles de cada request en la columna de la izquierda, como por ejemplo los headers de la petición, parámetros y la respuesta obtenida.

Hay un pequeño problema con Fiddler cuando intentas monitorear el trafico de un server alojado en tu localhost. Esto es porque, como ellos mismos mencionan en su sitio: "Internet Explorer and the .NET Framework are hardcoded not to send requests for Localhost through any proxies" por lo cual, nos vemos en la necesidad de no utilizar la palabra "localhost" ni su IP equivalente 127.0.0.1 para acceder desde nuestro browser a los sitios alojados en nuestro server. Como alternativa podemos usar en su lugar, el nombre de nuestro equipo. Por ejemplo:

en lugar de:

http://localhost:8080/miSitioWeb/index.jsp

tenemos que escribir:

http://laptux:8080/miSitioWeb/index.jsp

Asumiendo que el nombre de mi equipo es "laptux".

firefox firebug javascript ajax fiddler internet explorer

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.

Complementos Recomendados Sr. Byte

Hace ya buen rato, nos pidieron el favor de poner una lista de complementos que recomendamos para Firefox. Así que, sin mucha fanfarria, aquí esta la colección oficial de complementos de Firefox que siempre me salva la vida:

https://addons.mozilla.org/es-ES/firefox/collection/srbyte

UPDATE: Actualice la lista, de acuerdo a las sugerencias en los comentarios :)

Si alguno de ustedes quiere sugerir otro complemento, NO DUDEN en dejarlo en los comentarios, y con gusto lo agregamos. Y como seguramente alguien se lo esta preguntado, pues la característica de las "colecciones de complementos" en el sitio de complementos de Mozilla, es relativamente nueva, y nos asiste en la magna tarea de seguirle la pista a nuestros complementos favoritos...


Lo mas interesante de esto, es que esta utilidad te mantiene unido con tus complementos y recopilatorios favoritos de varias maneras:

Accede a tus recopilatorios desde Firefox
Los recopilatorios que marques como favoritos en el directorio de recopilatorios aparecerán en un lugar especial del administrador de complementos. Podrás estar al día y ver el contenido de cada recopilatorio.

Comparte complementos desde el menú de publicación
Cada complemento que instales se puede compartir fácilmente con amigos vía correo electrónico o publicado en uno de tus recopilatorios desde el menú de publicación.

Recibe avisos
El recopilador te avisará cuando uno de tus recopilatorios favoritos tenga nuevos elementos, y marcarlo para revisarlo más tarde. Publica automáticamente tus complementos instalados a un recopilatorio La funcionalidad de auto-publicado mantiene tu recopilatorio continuamente actualizado con tus últimos complementos instalados, manteniendo a tus amigos suscritos al día.

Claro, todas estas características se proveen únicamente a los usuarios registrados al sitio mencionado. Resulta bastante útil si se anda experimentando o si estas muy pendiente de las ultimas versiones de tus complementos.

También les comparto la lista "Editors Picks" de complementos (muy buena):

https://addons.mozilla.org/es-ES/firefox/collections/editors_picks

Nuevamente, si alguno de ustedes quiere sugerir otro complemento, NO DUDEN en dejarlo en los comentarios, y con gusto lo agregamos. Saludos!

firefox complementos addon

Complementos Recomendados Sr. Byte

Hace ya buen rato, nos pidieron el favor de poner una lista de complementos que recomendamos para Firefox. Así que, sin mucha fanfarria, aquí esta la colección oficial de complementos de Firefox que siempre me salva la vida:

https://addons.mozilla.org/es-ES/firefox/collection/srbyte

UPDATE: Actualice la lista, de acuerdo a las sugerencias en los comentarios :)

Si alguno de ustedes quiere sugerir otro complemento, NO DUDEN en dejarlo en los comentarios, y con gusto lo agregamos. Y como seguramente alguien se lo esta preguntado, pues la característica de las "colecciones de complementos" en el sitio de complementos de Mozilla, es relativamente nueva, y nos asiste en la magna tarea de seguirle la pista a nuestros complementos favoritos...


Lo mas interesante de esto, es que esta utilidad te mantiene unido con tus complementos y recopilatorios favoritos de varias maneras:

Accede a tus recopilatorios desde Firefox
Los recopilatorios que marques como favoritos en el directorio de recopilatorios aparecerán en un lugar especial del administrador de complementos. Podrás estar al día y ver el contenido de cada recopilatorio.

Comparte complementos desde el menú de publicación
Cada complemento que instales se puede compartir fácilmente con amigos vía correo electrónico o publicado en uno de tus recopilatorios desde el menú de publicación.

Recibe avisos
El recopilador te avisará cuando uno de tus recopilatorios favoritos tenga nuevos elementos, y marcarlo para revisarlo más tarde. Publica automáticamente tus complementos instalados a un recopilatorio La funcionalidad de auto-publicado mantiene tu recopilatorio continuamente actualizado con tus últimos complementos instalados, manteniendo a tus amigos suscritos al día.

Claro, todas estas características se proveen únicamente a los usuarios registrados al sitio mencionado. Resulta bastante útil si se anda experimentando o si estas muy pendiente de las ultimas versiones de tus complementos.

También les comparto la lista "Editors Picks" de complementos (muy buena):

https://addons.mozilla.org/es-ES/firefox/collections/editors_picks

Nuevamente, si alguno de ustedes quiere sugerir otro complemento, NO DUDEN en dejarlo en los comentarios, y con gusto lo agregamos. Saludos!

firefox complementos addon

Alianza entre Microsoft y Nokia (Marca, Mercado y Experiencia)

El jueves, el amigo @Saulopassos me comenta sobre la siguiente noticia: Microsoft y Nokia forman una alianza global para diseñar, desarrollar y comercializar soluciones móviles de productividad. Aja... wow!. Microsoft y Nokia estan colaborando para llevar Microsoft Office Mobile, además de software y servicios asociados de comunicación y colaboración a los teléfonos inteligentes de Nokia.

"Sin comentarios"

La noticia personalmente me resulta interesante. Por un lado, los telefonos Nokia son buenos, aunque por experiencia propia el software deja mucho que desear; y por otro lado, pienso en Microsoft incursionando aun más en la psique del usuario común, y casi inmediatamente se formula en mi mente la interrogante: ¿Y por que no usaron OpenOffice? si el Software Libre tiene potencial! ... ¿o no?

Antes de adentrarnos en el tema, poblare su mente con parte del anuncio oficial de la alianza:

" Nueva York, NY – El líder mundial de software y el fabricante más grande del mundo de teléfonos inteligentes han concertado una alianza destinada a entregar una revolucionaria solución empresarial de productividad móvil. El día de hoy, el presidente de la División Empresarial de Microsoft, Stephen Elop, y el vicepresidente ejecutivo de Dispositivos de Nokia, Kai Oistamo, anunciaron el acuerdo, esbozando una visión común respecto al futuro de la productividad móvil. Es la primera vez que cualquiera de las dos empresas emprende una alianza de este alcance y naturaleza. Según las estipulaciones del acuerdo, ambas empresas comenzarán a colaborar de inmediato en el diseño, el desarrollo y la comercialización de soluciones de productividad para el profesional móvil, llevando Microsoft Office Mobile, el software de Microsoft para colaboración y comunicaciones empresariales, y la gestión de dispositivos a las terminales Symbian de Nokia. Estas soluciones se ofrecerán en una amplia gama de teléfonos inteligentes de la compañía, comenzando con la gama de Nokia que está optimizada para negocios, la Nokia Eseries. Ambas empresas comercializarán también estas soluciones entre los negocios, las portadoras y los usuarios individuales. Tanto Microsoft Corp. como Nokia poseen una combinación única de experiencia empresarial y entendimiento del consumidor. Además de la colaboración en software y servicios existentes, ambas usarán sus activos para diseñar conjuntamente una gama de nuevas experiencias de usuario para los dispositivos futuros de Nokia. Tales experiencias serán identificadas juntas, y serán creadas por equipos dedicados dentro de ambas empresas para atender mejor las crecientes necesidades del profesional móvil."

Siento estrictamente objetivos, y desde el punto de vista de negocios, si eres Nokia, te conviene tener MS Office en tus productos principalmente porque: Nokia es el fabricante de Smart Phones más grande del mundo. Lamentablemente no podemos utilizar un Mobile OpenOffice.org... porque simplemente NO existe es funcional. Y aunque MS Office aun no se ha portado totalmente a Symbian OS (el SO de los telefonos Nokia), es solo cuestión de tiempo para que Microsoft tenga su producto ejecutándose en Symbian. Seamos realistas, Nokia no va a GASTAR en migrar OpenOffice.org a Symbian, porque no hay nada que "migrar", seria la elaboración de un producto TOTALMENTE nuevo, escrito desde cero.

"MS Office en mi SmartPhone = $$$ para MS y Nokia"

¿Ahora pregunto? Valdrá la pena, desde el punto de vista de negocio, contratar un equipo de programadores, para que realicen tan magna tarea? ... no, realmente no vale la pena. Es más lógica la INVERSIÓN en una alianza entre la gigante empresa de Software, que ya tienen toda la infraestructura, el equipo, los programadores con la experiencia y la marca, y hasta quizas tienen casi listo el producto.

Como dice el párrafo del anuncio:

"Además de la colaboración en software y servicios existentes, ambas usarán sus activos para diseñar conjuntamente una gama de nuevas experiencias de usuario para los dispositivos futuros de Nokia."

¿Tiene sentido? claro que si, y no solo eso, sino que tambien es una alianza natural. Yo tengo el hardware, y tu le pones el software. En las grandes ligas, las empresas se miden y se juntan pensando en atributos (filosofía, estilo de codificación, licencias, ideales, lenguajes) que van mas allá del software y del hardware, y se adentran, a ese terrible y brutal territorio llamado Marketing...


Pero no me atrevo a hablar de Marketing, porque es como hablar en la lengua de Mordor.
Mejor me aviento a resumir este negocio en tres atributos excepcionales: Marca, Mercado y Experiencia (Trayectoria), y como el lector ya sabe, estas empresas tienen mucho de lo mencionado.

Estos son atributos en los que, como desarrolladores de software, no se nos cruzan mucho por la mente (al menos, no a mi) pero que son factores determinantes para que el software que produces, o en el que trabajas, llegue a millones de usuarios y genere también millones de dolares. ¿Y saben que es lo mas increíble? Estos atributos también se aplican y existen en el mundo del software libre. Usemos un ejemplo real y perfecto, el popular navegador web: Mozilla Firefox.

"Todos amamos Firefox :)"

Marca:
Si te muestran una imagen de un "zorro" rojo (es un oso en realidad) sobre un mundo, inmediatamente piensas en Firefox. Eso, es marca. Y como bien saben el trabajo de Mozilla Foundation, llega a millones de personas en todo el mundo, sin generar muchos millones de dolares.

Mercado:

"El alcance de la alianza entre Microsoft y Nokia, así como el valor potencial para las empresas y los usuarios individuales es significativo", manifestó Stephen Drake, vicepresidente de Movilidad y Telecomunicaciones en IDC. "Llevando las soluciones de productividad de Microsoft a la gran clientela de Nokia, ambas empresas podrán servir mejor las necesidades de la creciente población de trabajadores móviles, calculada por IDC en 1.000 millones en todo el mundo para el 2011"

Nokia maneja un mercado de usuario que se apoyan en la tecnología como extensión de productividad, Microsoft naturalmente desea incursionar en el mercado móvil, y Nokia quiere un bono adicional para sus telefonos, lo que se traduce en amplitud de mercado para ambos.

"Algunos de los modelos más populares de telefonos móviles de Nokia"

El mercado de Firefox son los clientes inconformes y enojados que Internet Explorer 5 y 6 produjo en la época de la Web 1.0 y principios de la web 2.0, un mercado que asciende a más 1,596 millones de internautas (fuente: Internet World Stats).

Experiencia:
De Nokia (que ya tiene sus años el mercado produciendo telefonos y dispositivos móviles) y Microsoft (la popular e infame empresa que masifico el ambiente gráfico) no tengo nada que mencionar, ambas empresas son destacadas en su respectivas areas. Firefox viene de una larga historia, llena de intrigas, competencias y dinero... que comienza con Netscape Comunications, que se convirtió luego en Mozilla Foundation y que luego, regalaron al mundo Mozilla Firefox, ellos en este caso tienen experiencia y trayectoria.

¿Y entonces? entonces, ¿tiene el software y el negocio que estas a punto de realizar: Marca, Mercado y Experiencia? si no lo tiene, ¿que esperas para comenzar a cultivarlos?.

firefox microsoft nokia marca branding marketing mercado market experiencia trayectoria software