Mostrando entradas con la etiqueta chrome. Mostrar todas las entradas
Mostrando entradas con la etiqueta chrome. Mostrar todas las entradas

miércoles, noviembre 02, 2011

Hover Zoom (Extensión para Chrome)

Hover Zoom es una útil extensión de Google Chrome, que agranda los thumbnails (imágenes en miniatura) con solo posicionar el puntero del mouse sobre estas. Funciona en varios sitios como Facebook, Twitter, Google, Flickr, Reddit, Amazon, etc.

Ejemplo animado de "Hover Zoom"
Francamente es una excelente extensión, no me canso de recomendarla, y espero que les sirva a ustedes tanto como me sirve a mi. 
Para más información les dejo la FAQ:
http://code.google.com/p/hoverzoom/wiki/FAQ

Y acá el vinculo en la Chrome Web Store:
https://chrome.google.com/webstore/

martes, octubre 25, 2011

Cambios en Google Chrome 15

En Google Chrome Blog, publica una entrada en la que menciona que en la última versión estable de Chrome (versión 15 ), se ha rediseñado por completo la página de "nueva pestaña". Este diseño esta orientado al acceso sencillo de las "chrome apps". Este es el video de las nuevas características:


Los cambios son interesantes, y hasta "naturales", las aplicaciones y extensiones se presentan en un "muro de imágenes" que se actualiza cada vez que el usuario visita la Chrome Web Store, lo que permite que el usuario encuentre aplicaciones interesantes para probar con solo un vistazo general. Además, las aplicaciones y las extensiones son más fáciles de instalar, bastan con poner el cursor sobre una imagen y luego hacer clic en "Añadir a Google Chrome."

"Nuevo look del Chrome Web Store"
Creo que son cambios sencillos pero acertados, en los que Google mejora la experiencia del usuario, y borra la linea entre la "instalación" y el uso de las web apps.
¿Qué les parecen los cambios? esperamos sus comentarios, saludos.

jueves, septiembre 01, 2011

"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!

miércoles, agosto 31, 2011

Offline Google Mail (Chrome Web App)

Offline Google Mail es una versión especial de GMail, en la que se puede "acceder" al correo sin conexión a Internet (con las respectivas limitantes). Los correos electrónicos que escribas sin conexión se enviarán en el momento en que te conectes a Internet. Las conversaciones y mensajes eliminados, archivados o modificados se sincronizarán la próxima vez que estés online.

El "look"
Las características de Offline Google Mail son:

  • Se puede acceder a GMail sin necesidad de una conexión a Internet.
  • Las acciones realizadas sin conexión se sincronizan de forma automática en el momento en que se dispone de conexión a Internet.
  • La interfaz de usuario está optimizada para consultar el correo electrónico rápidamente.
Offline Google Mail es una solución para los chromebooks, en donde no se puede instalar clientes de correo de terceros. Pero lo más interesante es que la interfaz es muy similar a la versión de GMail para el iPad, y además soporta toda la funcionalidad usual de GMail. Creo que para una netbook (y no solo para la chromebook) esta bastante justa la solución. En lo personal, creo que voy a probarlo mientras estoy en el trabajo, para no distraerme tanto con las notificaciones de correo, de Google+ y del chat.

Pueden "instalar" Offline Google Mail dando click acá:
https://chrome.google.com/webstore/
Por cierto, ni se molesten en probarlo en otros navegadores, para los curiosos en FireFox se ve así:

FF 6.0, navegador no soportado ¬¬

martes, agosto 23, 2011

Google Related, la Nueva Extensión de Google

Google no para. Últimamente parece que cada novedad en la red, viene de la mano de Google. 

Recientemente, se presentó Google Related, una extensión de Chrome que muestra contenidos útiles e interesantes mientras navegas por la web. Cuando se navega con Related, a menudo se ve una barra delgada en la parte inferior de la pantalla que ofrece videos, mapas, comentarios y otros contenidos relevantes para esa página. Cuando veas un artículo que te interesa, puedes correr la voz mediante el uso del botón +1 que está incorporado. 

La idea básica es que mientras navegamos por ciertos contenidos, la barra de Google Related trabaje en segundo plano, y nos muestre contenido relacionado con dicho contenido. Esto nos ayudará a poder percibir un contexto más amplio de nuestros intereses, o poder tener un mayor rango de opciones. Al dar click al botón +1, estamos ayudando al sistema a seguir ofreciendo material relevante. 

Por ejemplo, si buscamos un restaurante determinado de comida china, Google Related nos mostrará los comentarios de Google Places sobre ese lugar, así como otras alternativas cercanas. 

Cada vez que estás navegando a una nueva página, Google Related buscará contenido relacionado interesante y, si está disponible, se muestra en una barra en la parte inferior de la página. Google puede mostrar categorías relacionadas, tales como videos, noticias, mapas, comentarios, imágenes, páginas web y mucho más. Para previsualizar un elemento de la lista o ver los elementos adicionales, sólo tienes que ubicar el mouse sobre las diferentes categorías en la barra. Por ejemplo, cuando se pasa sobre un enlace de vídeo, éste aparece en un cuadro de vista previa y podemos verlo directamente en la página. Los resultados son mostrados en una barra, tal como pueden ver en el video demostrativo a continuación:

   

Este servicio solo funciona para aquellos cuyo motor de búsqueda sea Google.com. En un futuro, se pretende que Google Related tenga especificaciones diferentes para cda país. Además, es posible ocultar la barra en los sitios que le indiquemos, todo administrado en su sección de configuración. 

Esta extensión está disponible en www.google.com/related, donde pueden ver una pequeña muestra del funcionamiento de Google Related. 

Personalmente, utilizo el Google Related y me ha dado muy buenos resultados, mostrándome temas relacionados a mis búsquedas que tal vez no hubiera considerado ver. Hasta el momento, no me ha fallado y se las puedo recomendar. 

¡Saludos!

sábado, febrero 19, 2011

SourceKit (extensión para Chrome)

Quiero compartir una útil extensión de Google Chrome, llamada SourceKit, creada por Kenneth ChauSourceKit te permite acceder a un archivo de texto en tu cuenta de Dropbox (sin salir del navegador y sin software adicional) y editar ese archivo, en una interfaz al estilo de Textmate. SourceKit inclusive puede hacer "syntax highlight" en archivos de código fuente como: CSS, C/C++, Java, PHP, Python, Ruby, XML, HTML y JavaScript.


SourceKit en acción.
En lo personal, SourceKit me resulta especialmente útil para llevar ciertos tipos de archivos sincronizado, por ejemplo: mi archivo "to-do.txt" ("cosas por hacer"), o para ver algún "code snippet" (fragmento de código) que haya tirado en Dropbox. Si usas Dropbox y también Chrome, sinceramente croe que SourceKit debe ser parte de tu arsenal de extensiones realmente útiles que no te deben de faltar.
Puedes descargar SourceKit siguiendo este vinculo hasta el Chrome Web Store:
https://chrome.google.com/webstore/
¿No usas Dropbox?, ¿qué estas esperando para usarlo? es una gran herramienta que te permite sincronizar archivos entre varias computadoras...
Para que comprendas mejor, puedes ver el siguiente video:




Y te invito a que uses el servicio:
https://www.dropbox.com

¡Saludos!

lunes, enero 31, 2011

Planetarium (Web App)

Siguiendo con la temática del artículo anterior, me encontré con esta aplicación web llamada Planetarium:


Planetarium posee alrededor de 1500 estrellas, de magnitud 5 o superior, que son las estrellas más brillantes en el cielo nocturno, y que se pueden ver a simple vista sin usar telescopios o equipos especiales.
Planetarium también permite cambiar la ubicación por defecto, para mostrar las estrellas correctas, de acuerdo a la latitud y longitud correcta, así como cambiar la fecha y hora, y muestra el nombre de las estrellas, planetas y constelaciones.

La extensión de Google Chrome la pueden encontrar aquí y pueden visitar el sitio directamente acá: http://www.neave.com/planetarium/app/

¡Happy star gazing!

Planetarium (Web App)

Siguiendo con la temática del artículo anterior, me encontré con esta aplicación web llamada Planetarium:


Planetarium posee alrededor de 1500 estrellas, de magnitud 5 o superior, que son las estrellas más brillantes en el cielo nocturno, y que se pueden ver a simple vista sin usar telescopios o equipos especiales.
Planetarium también permite cambiar la ubicación por defecto, para mostrar las estrellas correctas, de acuerdo a la latitud y longitud correcta, así como cambiar la fecha y hora, y muestra el nombre de las estrellas, planetas y constelaciones.

La extensión de Google Chrome la pueden encontrar aquí y pueden visitar el sitio directamente acá: http://www.neave.com/planetarium/app/

¡Happy star gazing!

miércoles, diciembre 15, 2010

Chrome for a Cause: Dona a una Causa Abriendo Pestañas


Si utilizas Google Chrome como navegador y no puedes evitar abrir mas de diez pestañas mientras navegas, esta es tu oportunidad de aportar a una causa ambiental o caritativa con el simple hecho de seguir tu manía de abrir muchas pestañas al día en tu Google Chrome, instalando la siguiente extensión:


Al instalar esta extensión en tu Google Chrome, del 15 al 19 de diciembre te aparecerá un contador junto a la barra de direcciones que se incrementará con cada nueva pestaña que abras. Al final del día, con la cantidad de pestañas que hayas acumulado, puedes decidir a qué causa puedes aportar este logro y Google donará el equivalente en materiales según la causa seleccionada. Las causas a las que puedes donar aparecen listadas en este vínculo.

"Lista de causas a las que es posible aportar el equivalente acumulado en pestañas abiertas"

Los animo a participar y aprovechar esta fácil forma de aportar un poco a estas causas de una forma tan simple como abrir una pestaña en tu navegador.

Chrome for a Cause: Dona a una Causa Abriendo Pestañas


Si utilizas Google Chrome como navegador y no puedes evitar abrir mas de diez pestañas mientras navegas, esta es tu oportunidad de aportar a una causa ambiental o caritativa con el simple hecho de seguir tu manía de abrir muchas pestañas al día en tu Google Chrome, instalando la siguiente extensión:


Al instalar esta extensión en tu Google Chrome, del 15 al 19 de diciembre te aparecerá un contador junto a la barra de direcciones que se incrementará con cada nueva pestaña que abras. Al final del día, con la cantidad de pestañas que hayas acumulado, puedes decidir a qué causa puedes aportar este logro y Google donará el equivalente en materiales según la causa seleccionada. Las causas a las que puedes donar aparecen listadas en este vínculo.

"Lista de causas a las que es posible aportar el equivalente acumulado en pestañas abiertas"

Los animo a participar y aprovechar esta fácil forma de aportar un poco a estas causas de una forma tan simple como abrir una pestaña en tu navegador.

domingo, mayo 30, 2010

Chrome es rápido (Video).

Los dejo con un video de pruebas nada convencionales de velocidad para el popular navegador de Google.




En palabra: GENIAL.

Chrome es rápido (Video).

Los dejo con un video de pruebas nada convencionales de velocidad para el popular navegador de Google.




En palabra: GENIAL.

viernes, mayo 14, 2010

Nuevas Características en la Wikipedia


Al visitar la wikipedia el día de ahora, note un ligero cambio en su apariencia, la noticia oficial del cambio esta en el Wikimedia blog.

"Wikipedia y su nuevo tema: Vector"

Y vaya que cambiaron para bien, desde ayer (13 de mayo) estrenan nuevo look, sino que también nuevo logo. ¿Y que hicieron? bien, a grosso modo, los cambios son los siguientes...



  • Navegación: Se ha mejorado la navegacion para leer y editar paginas. Ahora, las viñetas en el tope de cada pagina definen de forma más clara si estas viendo la pagina o la pagina de discusión, o si estas leyendo una pagina o editándola.
  • Mejoras en la barra de herramientas de edición: Se reorganizo la barra de edición para hacerla mas sencilla. Ahora darle formato a las paginas es mas simple y mas intuitivo.
  • Asistente de Vinculos y de Tablas: Una herramienta facil de usar para añadir vínculos a otras paginas wiki, asi como también otros sitios externos. Y un asistente de tablas, y características relacionadas a estas.
  • Mejoras de búsqueda: Hay mejoras en las sugerencias de búsqueda, lo que permite a los "wikinautas" encontrar más fácil y rápido lo que estén buscando.
  • Wikipedia Logo (Puzzle World)Actualizacion en el Logo de Wikipedia.
"Escultura de concepto del nuevo logo"

  • "Pediapress", creador de libros: Con esta característica, se puede crear un libro impreso, seleccionado artículos en Wikipedia y añadiéndolos al "Book Creator". Los artículos elegidos se convierten en un archivo PDF u OpenDocument  para llevar la Wikipedia donde sea.
Estos son solo algunas de las nuevas características que estrena la popular enciclopedia, para más detalles, pueden encontrarla en el blog de Wikimedia:
http://blog.wikimedia.org/2010/05/13/a-new-look-for-wikipedia/
Y por si usan Google Chrome, permitanme recomendarles la extensión "Wikipedia Companion - Mini Wiki Browser". ¿Y ustedes, que piensan de los nuevos cambios? ¿Les gusta el nuevo tema?

Nuevas Características en la Wikipedia


Al visitar la wikipedia el día de ahora, note un ligero cambio en su apariencia, la noticia oficial del cambio esta en el Wikimedia blog.

"Wikipedia y su nuevo tema: Vector"

Y vaya que cambiaron para bien, desde ayer (13 de mayo) estrenan nuevo look, sino que también nuevo logo. ¿Y que hicieron? bien, a grosso modo, los cambios son los siguientes...



  • Navegación: Se ha mejorado la navegacion para leer y editar paginas. Ahora, las viñetas en el tope de cada pagina definen de forma más clara si estas viendo la pagina o la pagina de discusión, o si estas leyendo una pagina o editándola.
  • Mejoras en la barra de herramientas de edición: Se reorganizo la barra de edición para hacerla mas sencilla. Ahora darle formato a las paginas es mas simple y mas intuitivo.
  • Asistente de Vinculos y de Tablas: Una herramienta facil de usar para añadir vínculos a otras paginas wiki, asi como también otros sitios externos. Y un asistente de tablas, y características relacionadas a estas.
  • Mejoras de búsqueda: Hay mejoras en las sugerencias de búsqueda, lo que permite a los "wikinautas" encontrar más fácil y rápido lo que estén buscando.
  • Wikipedia Logo (Puzzle World)Actualizacion en el Logo de Wikipedia.
"Escultura de concepto del nuevo logo"

  • "Pediapress", creador de libros: Con esta característica, se puede crear un libro impreso, seleccionado artículos en Wikipedia y añadiéndolos al "Book Creator". Los artículos elegidos se convierten en un archivo PDF u OpenDocument  para llevar la Wikipedia donde sea.
Estos son solo algunas de las nuevas características que estrena la popular enciclopedia, para más detalles, pueden encontrarla en el blog de Wikimedia:
http://blog.wikimedia.org/2010/05/13/a-new-look-for-wikipedia/
Y por si usan Google Chrome, permitanme recomendarles la extensión "Wikipedia Companion - Mini Wiki Browser". ¿Y ustedes, que piensan de los nuevos cambios? ¿Les gusta el nuevo tema?

domingo, noviembre 29, 2009

Google y su sistema operativo

Google anuncio su sistema operativo "Chrome OS" hace algunos dias, así que me di la tarea de probarlo. Aclaro, que probé "Chromium OS", no "Chrome OS", la diferencia, es la misma que la del navegador "Chrome" y "Chromium": Uno es código cerrado (y aún NO esta disponible) y es más pulido y profesional (Chrome), y su proyecto hermano "Chromium", es el mismo Chrome en versión open source y sin "afinar".

Pues lo mismo sucede con el sistema operativo de Google, no es uno, sino dos versiones del mismo sistema(Chrome y Chromium). Por motivos de conveniencia, me referiré a ambos sistemas como "Chrome OS". Aparte de eso, una excelente impresion que me dejo este sistema es el tiempo de arranque, que es increíblemente veloz, más que Moblin. La primera vez que se ejecuta, se "siente" como un kernel linux con un navegador encima... y esa, creo que es la mejor descripción que puedo darles del mismo. Después de todo, la idea principal detras de este sistema, es que nada esta almacenado en la maquina local, sino que todo esta en servicios web, lo que es "probablemente ideal" para netbooks y personas que no usan su computadora nada más que navegar en Internet.


"Un vistazo al blog, desde Chromium OS (con un tema instalado)"

El sistema es brillante en la misma medida que amenazador, es brillante porque Chrome OS es un sistema operativo que es completamente devoto a la Web, una plataforma de unificación de servicios y aplicaciones web, en las que se ata al usuario a una serie de servicios gratuitos totalmente propietarios, Chrome OS es el primer paso para una nueva estrategia de crecimiento y posicionamiento en la mente de un mercado muy interesante y emergente de usuarios que (como ya mencione) solo pasan conectados a Internet.


"Otro vistazo desde VirtualBox"

A continuación les pongo una serie videos que explican que es y como funciona Chrome OS:




"¿Qué es Chrome OS?"



"Tiempo de carga de Chromium OS"


Conseguir Chormium OS es sencillo, solo descargen el archivo .torrent de IsoHunt, precisamente lo que se descarga sería un disco duro virtual de VMWare.

Para usarlo, no necesitan tener VMWare en sus maquinas, pueden optar por VirtualBox, y TechCrunch tiene una excelente guía paso a paso para usar Chromium OS con VirtualBox.

Para que sigan más de cerca el proyecto, pueden visitar el sitio oficial de los proyectos "Chromium" (navegador y sistema operativo).

Vemos a seguir más detenidamente el desarrollo de este y de otros  proyectos similares, en lo personal no les veo mucha utilidad en nuestro medio, pero sin lugar a dudas el concepto, que no es nada nuevo, no deja de ser atractivo. Lo que más me interesa quizás, es la sana competencia entre servicios basados en la nube y la sana competencia (que beneficia mucho al usuario final) que surgirá cuando emerja Microsoft Azure para comenzar la verdadera competencia de gigantes, con sistemas operativos tan "Lite" como lo es "Chorme OS".

Y tu, ¿piensas que en tu país podrías pasar conectado a Internet, de depender de manera primordial de todos los servicios que Google ofrece?
A mi en latinoamerica, esa idea no me parece muy factible. ¡Saludos!

Google y su sistema operativo

Google anuncio su sistema operativo "Chrome OS" hace algunos dias, así que me di la tarea de probarlo. Aclaro, que probé "Chromium OS", no "Chrome OS", la diferencia, es la misma que la del navegador "Chrome" y "Chromium": Uno es código cerrado (y aún NO esta disponible) y es más pulido y profesional (Chrome), y su proyecto hermano "Chromium", es el mismo Chrome en versión open source y sin "afinar".

Pues lo mismo sucede con el sistema operativo de Google, no es uno, sino dos versiones del mismo sistema(Chrome y Chromium). Por motivos de conveniencia, me referiré a ambos sistemas como "Chrome OS". Aparte de eso, una excelente impresion que me dejo este sistema es el tiempo de arranque, que es increíblemente veloz, más que Moblin. La primera vez que se ejecuta, se "siente" como un kernel linux con un navegador encima... y esa, creo que es la mejor descripción que puedo darles del mismo. Después de todo, la idea principal detras de este sistema, es que nada esta almacenado en la maquina local, sino que todo esta en servicios web, lo que es "probablemente ideal" para netbooks y personas que no usan su computadora nada más que navegar en Internet.


"Un vistazo al blog, desde Chromium OS (con un tema instalado)"

El sistema es brillante en la misma medida que amenazador, es brillante porque Chrome OS es un sistema operativo que es completamente devoto a la Web, una plataforma de unificación de servicios y aplicaciones web, en las que se ata al usuario a una serie de servicios gratuitos totalmente propietarios, Chrome OS es el primer paso para una nueva estrategia de crecimiento y posicionamiento en la mente de un mercado muy interesante y emergente de usuarios que (como ya mencione) solo pasan conectados a Internet.


"Otro vistazo desde VirtualBox"

A continuación les pongo una serie videos que explican que es y como funciona Chrome OS:




"¿Qué es Chrome OS?"



"Tiempo de carga de Chromium OS"


Conseguir Chormium OS es sencillo, solo descargen el archivo .torrent de IsoHunt, precisamente lo que se descarga sería un disco duro virtual de VMWare.

Para usarlo, no necesitan tener VMWare en sus maquinas, pueden optar por VirtualBox, y TechCrunch tiene una excelente guía paso a paso para usar Chromium OS con VirtualBox.

Para que sigan más de cerca el proyecto, pueden visitar el sitio oficial de los proyectos "Chromium" (navegador y sistema operativo).

Vemos a seguir más detenidamente el desarrollo de este y de otros  proyectos similares, en lo personal no les veo mucha utilidad en nuestro medio, pero sin lugar a dudas el concepto, que no es nada nuevo, no deja de ser atractivo. Lo que más me interesa quizás, es la sana competencia entre servicios basados en la nube y la sana competencia (que beneficia mucho al usuario final) que surgirá cuando emerja Microsoft Azure para comenzar la verdadera competencia de gigantes, con sistemas operativos tan "Lite" como lo es "Chorme OS".

Y tu, ¿piensas que en tu país podrías pasar conectado a Internet, de depender de manera primordial de todos los servicios que Google ofrece?
A mi en latinoamerica, esa idea no me parece muy factible. ¡Saludos!

miércoles, junio 10, 2009

Tu Sitio, Compatible en Todos los Browsers!

"Logotipos de los navegadores mas populares del mercado: Firefox, Internet Explorer, Safari, Opera y Chrome"


Todo diseñador-desarrollador web ha tenido que lidiar mas de alguna vez con el HTML, el CSS, el Javascript o el DOM de las páginas web, para retocar detalles de apariencia o el funcionamiento del lado del cliente. Aún bloggers con pocos conocimientos de desarrollo web se han aventurado a modificar el CSS de sus blogs para adaptar las plantillas a sus necesidades personales. Los que han pasado estas experiencias también sabrán lo molesto que es tener que comprobar que tus modificaciones se ven y funcionan igual en todos los browsers desde los cuales tus clientes-usuarios-lectores te visitan.

Porque sucede esto? Sucede porque no todos los navegadores web cumplen a cabalidad con los estándares definidos para el web. Además cada navegador quiere sobresalir implementando sus propios estándares para poder hacer más cosas que las demas. Ejemplo de ello son las propiedades CSS que inician con el prefijo -moz- o -webkit-

"Prueba del Acid3. Asi es como deberias ver esta imagen al visitar este sitio si es que tu browser cumple con los estándares aca impelemtados."

Para estar seguro que tu sitio se ve bien en cualquier navegador, sugiero estas tres alternativas:

  • Usa Frameworks que te Aseguren la Independencia del Navegador

    En la web estan disponibles una serie de frameworks para el manejo del layout del sitio usando CSS, el acceso al DOM via Javascript, controles capaces de mostrar datos de un server via Ajax, etc. los cuales prometen verse y funcionar de la misma manera en cualquier browser. Esta es mi recomendacion por defecto, ya que te ahorras tiempo y dolores de cabeza teniendo que arreglar ese div que se sale de lugar o esos mensajes Ajax que no llegan al server.

    Entre los frameworks para usar layouts prefabricados de CSS se encuentran:


    Entre los frameworks para el manejo de Javascript, controles HTML avanzados y el manejo del DOM se encuentran:

"Página de prueba de la alineación y apariencia de los elementos de un formulario, usando Blueprints"



  • Usa Herramientas para Probar tu Sitio en Multiples Navegadores/Arquitecturas

    En esta opción caes cuando prefieres hacerlo todo al estilo "do it yourself" o si en tu trabajo no te permiten usar nuevas librerías o frameworks sin la autorización de tus superiores. Puedes hacer uso de servicios en línea como Browsershots y Adobe BrowserLabs para obtener vistas previas de tus sitios web en diferentes navegadores y sistemas operativos. En un antiguo post mencioné algunas herramientas para depurar CSS y javascript en Internet Explorer y Firefox de manera que puedan mover elementos HTML, cambiar propiedades CSS, examinar variables Javascript, entre otras cosas, directamente en el navegador, por lo que se puede conocer a ciencia cierta el resultado final sin usar diseñadores visuales como Dreamweaver.


  • Crea una Versión Diferente de tu Sitio por cada Navegador/Arquitectura

    Esta opción es el último recurso que debes tomar, la opción también llamada "Por si todo lo demás falla...". Una de las diferencias más molestas entre los navegadores es que no manejan las mismas medidas para los pixels y no renderizan del mismo tamaño las fuentes o tipografías. Esto da lugar a que un div de 30px de ancho abarque más espacio en IE que en Firefox u Opera. Para ello, una técnica es utilizar un CSS cargado únicamente cuando el navegador del cliente es Internet Explorer, utilizando la etiqueta < link > dentro de una etiqueta especial propia de IE, llamada < ! --[IF IE ]-- >

    Mediante esta etiqueta podrán cargar un archivo .css preparado para Firefox u otro .css preparado para IE, decidiendo dinámicamente cual cargar según el navegador que esté usando el cliente.

    Otra buena razón para crear una página con un layout diferente es el hecho de poder adaptar tu sitio para ser visto desde dispositivos móviles como smartphones, en los cuales el tamaño y resolución de la pantalla difieren en gran medida de una PC, sin mencionar que la navegación se realiza por medio de la pantalla táctil, prescindiendo del uso de un ratón. Buen ejemplo de ello son las páginas web para móviles de Google, Twitter y Facebook.
"Versión mobil de Twitter, visualizada desde un Nokia n95"

Debido a estas diferencias entre los navegadores, existen muchos sitios que solo son capaces de funcionar o lucir bien en uno u otro navegador, de manera que cuando lo visualizas en cualquier otro el sitio es un completo desastre, como los listados en este sitio.

Conoces algun sitio importante que se solamente se vea bien en uno u otro navegador?

Tu Sitio, Compatible en Todos los Browsers!

"Logotipos de los navegadores mas populares del mercado: Firefox, Internet Explorer, Safari, Opera y Chrome"


Todo diseñador-desarrollador web ha tenido que lidiar mas de alguna vez con el HTML, el CSS, el Javascript o el DOM de las páginas web, para retocar detalles de apariencia o el funcionamiento del lado del cliente. Aún bloggers con pocos conocimientos de desarrollo web se han aventurado a modificar el CSS de sus blogs para adaptar las plantillas a sus necesidades personales. Los que han pasado estas experiencias también sabrán lo molesto que es tener que comprobar que tus modificaciones se ven y funcionan igual en todos los browsers desde los cuales tus clientes-usuarios-lectores te visitan.

Porque sucede esto? Sucede porque no todos los navegadores web cumplen a cabalidad con los estándares definidos para el web. Además cada navegador quiere sobresalir implementando sus propios estándares para poder hacer más cosas que las demas. Ejemplo de ello son las propiedades CSS que inician con el prefijo -moz- o -webkit-

"Prueba del Acid3. Asi es como deberias ver esta imagen al visitar este sitio si es que tu browser cumple con los estándares aca impelemtados."

Para estar seguro que tu sitio se ve bien en cualquier navegador, sugiero estas tres alternativas:

  • Usa Frameworks que te Aseguren la Independencia del Navegador

    En la web estan disponibles una serie de frameworks para el manejo del layout del sitio usando CSS, el acceso al DOM via Javascript, controles capaces de mostrar datos de un server via Ajax, etc. los cuales prometen verse y funcionar de la misma manera en cualquier browser. Esta es mi recomendacion por defecto, ya que te ahorras tiempo y dolores de cabeza teniendo que arreglar ese div que se sale de lugar o esos mensajes Ajax que no llegan al server.

    Entre los frameworks para usar layouts prefabricados de CSS se encuentran:


    Entre los frameworks para el manejo de Javascript, controles HTML avanzados y el manejo del DOM se encuentran:

"Página de prueba de la alineación y apariencia de los elementos de un formulario, usando Blueprints"



  • Usa Herramientas para Probar tu Sitio en Multiples Navegadores/Arquitecturas

    En esta opción caes cuando prefieres hacerlo todo al estilo "do it yourself" o si en tu trabajo no te permiten usar nuevas librerías o frameworks sin la autorización de tus superiores. Puedes hacer uso de servicios en línea como Browsershots y Adobe BrowserLabs para obtener vistas previas de tus sitios web en diferentes navegadores y sistemas operativos. En un antiguo post mencioné algunas herramientas para depurar CSS y javascript en Internet Explorer y Firefox de manera que puedan mover elementos HTML, cambiar propiedades CSS, examinar variables Javascript, entre otras cosas, directamente en el navegador, por lo que se puede conocer a ciencia cierta el resultado final sin usar diseñadores visuales como Dreamweaver.


  • Crea una Versión Diferente de tu Sitio por cada Navegador/Arquitectura

    Esta opción es el último recurso que debes tomar, la opción también llamada "Por si todo lo demás falla...". Una de las diferencias más molestas entre los navegadores es que no manejan las mismas medidas para los pixels y no renderizan del mismo tamaño las fuentes o tipografías. Esto da lugar a que un div de 30px de ancho abarque más espacio en IE que en Firefox u Opera. Para ello, una técnica es utilizar un CSS cargado únicamente cuando el navegador del cliente es Internet Explorer, utilizando la etiqueta < link > dentro de una etiqueta especial propia de IE, llamada < ! --[IF IE ]-- >

    Mediante esta etiqueta podrán cargar un archivo .css preparado para Firefox u otro .css preparado para IE, decidiendo dinámicamente cual cargar según el navegador que esté usando el cliente.

    Otra buena razón para crear una página con un layout diferente es el hecho de poder adaptar tu sitio para ser visto desde dispositivos móviles como smartphones, en los cuales el tamaño y resolución de la pantalla difieren en gran medida de una PC, sin mencionar que la navegación se realiza por medio de la pantalla táctil, prescindiendo del uso de un ratón. Buen ejemplo de ello son las páginas web para móviles de Google, Twitter y Facebook.
"Versión mobil de Twitter, visualizada desde un Nokia n95"

Debido a estas diferencias entre los navegadores, existen muchos sitios que solo son capaces de funcionar o lucir bien en uno u otro navegador, de manera que cuando lo visualizas en cualquier otro el sitio es un completo desastre, como los listados en este sitio.

Conoces algun sitio importante que se solamente se vea bien en uno u otro navegador?

lunes, octubre 13, 2008

Depurando CSS y Javascript con Internet Explorer


"El lienzo de un diseñador web es la pantalla de su monitor"

Hay muchas y muy variadas herramientas e IDEs que te permiten diseñar/desarrollar tu sitio web de manera que luzca y funcione exactamente como deseas con un par de simples clics pero al final de cuentas, son los navegadores del web quienes tienen la ultima palabra a la hora de decidir como lucirá y se comportara finalmente tu sitio. Estos navegadores, por cierto, son muy quisquillosos respecto a las funcionalidades que puedes implementar ya que ninguno de ellos soporta los estándares del web al 100% sino que utilizan sus propios estándares por lo que posiblemente tu sitio no se vea ni funcione igual en todos los navegadores.

Los desarrolladores del web que utilizan Mozilla Firefox y sus derivados(Iceweasel, Floc, etc) han de estar familiarizados con el muy popular add-on llamado Firebug y también con el Web Developer Toolbar, los cuales nos permiten editar el código de nuestro sitio directamente desde el navegador, por lo que sabremos en el momento los resultados de los cambios que realizamos en dicho codigo. De esta manera, podríamos re alinear DIVs que aparecen fuera de lugar, cambiar el color de fondo de un elemento, revisar en que linea de código se produjo un error de Javascript o que datos se han enviado por los HTTP Headers vía Ajax, solo por mencionar algunas de sus utilidades.

"Editando el CSS del sitio del sr byte con Firebug"

Lo lamentable es que no todo mundo utiliza Mozilla Firefox sino que la gran mayoría de usuarios Windows suelen navegar desde Internet Explorer así como la gente de Mac utiliza Safari, otros tantos que se sienten cómodos con Opera y los que recientemente han empezado a probar Google Chrome. Esto significa (y lo menciono porque a mi me ocurrió) que si alineamos nuestro sitio perfectamente en Firefox, posiblemente se vea horriblemente mal en los demás navegadores y no tenemos nada que nos permita hacer lo mismo que con Firefox en el resto de navegadores.

Debido a esta situación fue que descubrí que al parecer, Internet Explorer también cuenta con un conjunto de add-ons para personalizarlo un poco, aunque no son tan conocidos ni usados como los de Firefox. Entre estos add-ons, casualmente existe uno Developer Tooblar, el cual es muy similar en funcionamiento al Firebug aunque no es tan completo ya que nada mas nos permite inspeccionar el codigo HTML de nuestra pagina y de los elementos de la misma, ademas de mostrarnos el CSS que ha sido aplicado a dichos elementos.

"Observando (porque es lo unico que se puede hacer) el codigo HTML y el CSS del sitio del sr byte con IE Developer Toolbar"


Ya que el add-on antes mencionado no nos permite editar el Javascript del sitio, podemos hacer uso del Microsoft Script Debugger para tal efecto. Por cierto, este programa es lanzado cada vez que se encuentra un error en el Javascript de una pagina, una vez que hallas elegido la opcion de utilizarlo como debugger en el cuadro de dialogo que te aparece al momento de producirse el error.

"Apariencia del editor MS Script Debugger"


Depurando CSS y Javascript con Internet Explorer


"El lienzo de un diseñador web es la pantalla de su monitor"

Hay muchas y muy variadas herramientas e IDEs que te permiten diseñar/desarrollar tu sitio web de manera que luzca y funcione exactamente como deseas con un par de simples clics pero al final de cuentas, son los navegadores del web quienes tienen la ultima palabra a la hora de decidir como lucirá y se comportara finalmente tu sitio. Estos navegadores, por cierto, son muy quisquillosos respecto a las funcionalidades que puedes implementar ya que ninguno de ellos soporta los estándares del web al 100% sino que utilizan sus propios estándares por lo que posiblemente tu sitio no se vea ni funcione igual en todos los navegadores.

Los desarrolladores del web que utilizan Mozilla Firefox y sus derivados(Iceweasel, Floc, etc) han de estar familiarizados con el muy popular add-on llamado Firebug y también con el Web Developer Toolbar, los cuales nos permiten editar el código de nuestro sitio directamente desde el navegador, por lo que sabremos en el momento los resultados de los cambios que realizamos en dicho codigo. De esta manera, podríamos re alinear DIVs que aparecen fuera de lugar, cambiar el color de fondo de un elemento, revisar en que linea de código se produjo un error de Javascript o que datos se han enviado por los HTTP Headers vía Ajax, solo por mencionar algunas de sus utilidades.

"Editando el CSS del sitio del sr byte con Firebug"

Lo lamentable es que no todo mundo utiliza Mozilla Firefox sino que la gran mayoría de usuarios Windows suelen navegar desde Internet Explorer así como la gente de Mac utiliza Safari, otros tantos que se sienten cómodos con Opera y los que recientemente han empezado a probar Google Chrome. Esto significa (y lo menciono porque a mi me ocurrió) que si alineamos nuestro sitio perfectamente en Firefox, posiblemente se vea horriblemente mal en los demás navegadores y no tenemos nada que nos permita hacer lo mismo que con Firefox en el resto de navegadores.

Debido a esta situación fue que descubrí que al parecer, Internet Explorer también cuenta con un conjunto de add-ons para personalizarlo un poco, aunque no son tan conocidos ni usados como los de Firefox. Entre estos add-ons, casualmente existe uno Developer Tooblar, el cual es muy similar en funcionamiento al Firebug aunque no es tan completo ya que nada mas nos permite inspeccionar el codigo HTML de nuestra pagina y de los elementos de la misma, ademas de mostrarnos el CSS que ha sido aplicado a dichos elementos.

"Observando (porque es lo unico que se puede hacer) el codigo HTML y el CSS del sitio del sr byte con IE Developer Toolbar"


Ya que el add-on antes mencionado no nos permite editar el Javascript del sitio, podemos hacer uso del Microsoft Script Debugger para tal efecto. Por cierto, este programa es lanzado cada vez que se encuentra un error en el Javascript de una pagina, una vez que hallas elegido la opcion de utilizarlo como debugger en el cuadro de dialogo que te aparece al momento de producirse el error.

"Apariencia del editor MS Script Debugger"


Sunsetting Sr. Byte.

El Sr. Byte ha estado más de 5 años inactivo. Digamos que estaba en " code freeze ". Pero ahora es el último release. Quizas no...