Círculo de Maquetadores » Navegadores

Una mirada sobre la mejora progresiva y la degradación elegante

Jorge López — Tue, 16 Aug 2011 15:00:35 +0000

Si asumimos que una misma página web se puede mostrar de diferentes maneras, se hace evidente un problema: ¿de qué modo podemos mostrar la información de una manera atractiva al margen de los condicionamientos técnicos y los ajustes de preferencias de usuario?

Existen dos estrategias para afrontar este reto: la degradación elegante (graceful degradation) y la mejora progresiva (progressive enhancement).

Estas dos filosofías de desarrollo coinciden en varios puntos:

Un sitio web debe funcionar correctamente ante la multiplicidad de navegadores y dispositivos.
Hay que separar en varias capas el contenido, la presentación y la funcionalidad de los proyectos.
Lo más importante es el marcado semántico y la extensión de los estándares web.

En el fondo tienen un enfoque radicalmente distinto. La clave está en el afecto que tienen estos puntos en el flujo de trabajo.

Degradación elegante

La degradación elegante es un concepto importado de la ingeniería desarrollado por el psicólogo David Courtenay Marr. La traslación al diseño web viene a significar que un sitio debe funcionar y visualizarse de forma básicamente parecida independientemente del navegador o dispositivo utilizado. Paliando en la medida de lo posible el empobrecimiento de un diseño que se producirá por las limitaciones técnicas de los navegadores más anticuados.

En la práctica esta técnica se reduce a utilizar sólo aquellas características que sean soportadas correctamente por navegadores obsoletos o muy limitados técnicamente como Internet Explorer 6 o 7. Esto relega a otras tecnologías más avanzadas, como CSS3 a un indefinido futuro en el que serán ampliamente soportadas por la mayoría de los navegadores y dando lugar a anacronismos como que sigan utilizándose navegadores de más de diez años de antigüedad. Al fin y al cabo ¿para que los usuarios se van a actualizar de navegador, si las páginas no van a ofrecer una mejora visual de un navegador a otro?

Asegurar que nuestras webs se vean igual en navegadores de dos, tres y hasta cuatro generaciones de antigüedad, no resuelve el problema de cómo implementar nuevos estándares y tecnologías sin que la experiencia de usuario se vea mermada.

La técnica de la degradación elegante conlleva un tiempo extra de optimización para cada navegador (Cross-browser). Como es de suponer, es necesario albergar un sólido conocimiento de cada navegador y tener todo un catálogo de soluciones para contrarrestar las posibles limitaciones que nos vallamos encontrando. Las enormes dificultades para poder comprobar nuestras páginas en los cada vez más numerosos y variados dispositivos y navegadores están provocando que algunos maquetadores adopten la solución más radical posible, proponer al usuario que simplemente se descargue la última versión del navegador.

Como desarrolladores web no tenemos derecho a decidir por los usuarios que navegador deben utilizar, sobretodo porque muchos de ellos quizá no tengan ni el control, ni las capacidades, ni el software necesario para soportar estas últimas versiones. Lo que sí que podemos hacer es adoptar otras filosofías de desarrollo.

Mejora progresiva

El concepto de mejora progresiva fue acuñado por Steven Champeon, en su conferencia Inclusive Web Design for the Future en 2003.

Esta filosofía implica que los sitios web dispondrán de las características más avanzadas a medida que el navegador que las ejecuta sea más avanzado. Esto permite aprovechar todas las posibilidades CSS sin perjudicar a los navegadores obsoletos o limitados. De este modo se premia al usuario por la utilización de un navegador más moderno, y los usuarios desactualizados no tendrán quebranto alguno al acceder al contenido de una web.

Si suponemos que los navegadores más anticuados tienden a desaparecer a medida que los usuarios los van actualizando, es lógico ir introduciendo tecnologías más modernas para que nuestros desarrollos estén mejor preparados para soportar los estándares del futuro. ¿Tanto daño hace que unos usuarios vean los bordes redondeados y otros los vean cuadrados?

Para encarar la mejora progresiva de un proyecto propongo que la maquetación web se realice siguiendo los siguientes puntos:

La maquetación debe permitir el correcto acceso a la información de una página, independientemente del tipo de navegador o dispositivo utilizado por el usuario.
Utiliza aquellas características que aunque sólo los navegadores modernos puedan visualizar, los navegadores antiguos puedan ofrecer una alternativa viable (esta es una manera conservadora de afrontar este paradigma).

Algunos ejemplos de mejora progresiva pueden ser:

La utilización de una API de tipografías (como Google) para aquellos navegadores que pueden soportarlas.
Propiedades CSS3 como text-shadow, border-radius o Gradient para los navegadores habilitados.
Animaciones y fotografías en formato SVG.
Fotografías en formato PNG con transparencia.

De este modo, los desarrolladores nos dotaremos de una base para la experimentación y la innovación respetando los estándares y el diseño universal sin excluir a ningún usuario. Eso es lo que a mi modo de ver, hace a la mejora progresiva un paradigma más acertado y ajustado al cambiante mundo del desarrollo web. Es por eso que en Yahoo lo adoptaron rápidamente y lo han utilizado para crear su estrategia de soporte de navegador gradual.

Mas información:

Preparando Google Chrome 11

Eduardo Sainz — Sun, 27 Mar 2011 17:34:55 +0000

Seguimos con novedades en el campo de los navegadores web, Google Chrome 11 en versión beta se ha puesto disponible para descarga, parece que a los chicos de Google no les ha gustado que se hable tanto del nuevo Internet Explorer 9 y del nuevo Firefox 4 y también querían su pedacito de pastel en cuanto a atención mediática se refiere.

No han pasado ni 24 horas desde la salida del nuevo Firefox 4 cuando el Chorme 11 aunque sea en versión beta ya está disponible. Hay que reconocerle un gran mérito a Google con el buen hacer de su navegador ya que fueron los últimos en llegar pero rápidamente por la calidad del producto y con el boca a boca ha llegado a las primeras posiciones.

No nos debemos de preocupar por el idioma ya que reconoce español entre otros muchos, siempre y cuando hagamos una pronunciación más o menos correcta. Respecto a otras novedades se ha cambiado el diseño del icono y se han incluido por ejemplo soporte para CSS en 3D y por su puesto un mejor rendimiento general.

fuente: ideal.es

Firefox 4 ya está aquí.

Eduardo Sainz — Tue, 22 Mar 2011 21:56:01 +0000

No hace una semana del lanzamiento de explorer 9, cuando Mozilla hace el anuncio del esperado Firefox 4.

Para hacernos una idea del éxito del estreno, decir que en menos de 4 horas se han descargado más de un millón de copias, ¿superará el record de 8,3M en un día que tenía la versión 3?

Como curiosidad, podemos ver las estadísticas actualizadas de estas descargas en esta dirección glow.mozilla.org.

De esta versión, podemos decir que los chicos de Mozilla se lo han currado, siguiendo la línea de los nuevos navegadores, han conseguido un navegador mucho más ligero, rápido y visualmente más minimalista.

Algunas de sus nuevas características son:

Se elimina la necesidad de reiniciar el navegador para poder poner en marcha una nueva extensión
Mayor compatibilidad con HTML5 y CSS3
Panorama, nuevo sistema de gestión de pestañas
Firefox Sync
Actualizaciones silenciosas

Ahora sólo queda esperar la adaptación de las extensiones a esta nueva versión.

Lanzado Internet Explorer 9

Eduardo Sainz — Tue, 15 Mar 2011 21:49:41 +0000

Microsoft acaba de lanzar su navegador Internet Explorer versión 9. Para promocionarlo han creado una web llamada “La Belleza de Internet”, web en la que se supone, esta nueva versión muestra su potencial.

Se puede destacar la aceleración por hardware completa de textos, gráficos y vídeos, el comparador de páginas Aerosnap, un gestor de descargas que informa sobre la “reputación” o fiabilidad de los sites, un filtro para autorizar el logueo en páginas de terceros y la mayor interoperabilidad, con mayor integración de los estándares HTML5, SCG, CSS3 y COM.

Sobre el aspecto visual, se ha creado un diseño más minimalista (integrando la barra de direcciones y la de búsquedas), muy al estilo de navegadores como chrome, opera …

Sobre la compatibilidad con HTML5, pese a que se ha mejorado muchísimo respecto a su predecesor, no consigue superar a sus competidores como podemos ver en la página de html5test

Expression Web SuperPreview el renderizador web de Microsoft

Jorge López — Sat, 22 May 2010 16:02:19 +0000

Una de las mayores preocupaciones de los desarrolladores, es saber como se visualizará su página en los diferentes navegadores y plataformas. El simple echo de que Windows no permita desplegar y ejecutar las diferentes versiones de IE en paralelo, ha provocado que las pruebas de sitios web en IE6, IE7 e IE8 sean un constante quebradero de cabeza. Aunque existen soluciones alternativas, no todas son fiables.

Para intentar paliar el problema que ellos mismos has creado, Microsoft ha publicado Expression Web SuperPreview, que estará incluido en futuras versiones de Expression Web, aunque de momento queda como un producto externo. Mediante este programa podremos comparar el render de nuestras páginas para las diferentes versiones de Explorer. Todo ello directamente sobre una maqueta y en la misma máquina. Por ahora se limita a los motores de Internet Explorer, aunque se prevé que soporte más navegadores en el futuro.

Lo bueno

Tras un primer análisis, parece una herramienta fiable con una interfaz muy limpia y intuitiva. Tiene varias vistas para visualizar las páginas de maneras diferentes, zoom , reglas y guías. También lee etiquetas DOM, pero no permite modificarlas y la información que ofrece que éstas es más bien escasa.

Sin duda alguna lo mejor de la herramienta es el modo de superposición de vistas, para comparar exactamente las diferencias de visualización entre navegadores.

Lo no tan bueno

Pero también tiene puntos negativos que deberán mejorar para la versión final:

Ocupa mucho espacio (250 MB).
Hay que instalarlo.
Requiere .NET Frameworws 3.5 SP1.
No se puede interactuar en tiempo real con el navegador.
Ofrece información y nula interacción de los objetos DOM.
Por ahora no visualiza JavaScript
Al menos en mi máquina, el render es extremadamente lento.

Enlaces

Página de Expression Web SuperPreview
Descargarse el Trial de Expression Web SuperPreview (gratuita)
Descargarse el Trial de Expression Web SuperPreview con firefox (prueba de 60 días)

Domando a los robots de búsqueda: robots.txt

Jorge López — Thu, 15 Apr 2010 19:17:58 +0000

Los robots de búsqueda, (también llamados crawlers, spiders o indexadores), sirven para leer una página web, recuperar su contenido y seguir los enlaces que el sitio tenga a otras páginas web. Existen tantos robots como buscadores. Con el tiempo se ha desarrollado un protocolo mediante el cual se pueden dar instrucciones a los robots creando así los ficheros “robots.txt”. Este fichero es el que se utiliza para indicar a los robots de rastreo lo que pueden y lo que no pueden hacer en tu sitio web. En este artículo veremos algunos útiles trucos para manejar a estos robots.

Beneficios de un archivo robots.txt

Impedir acceso a robots determinados: algunos robots solo nos nos darán problemas. De hecho ciertos robots no son ni de buscadores ni amigos.
Reducir la sobrecarga del servidor: podrás controlar el flujo de rastreo de algunos robots. Muchos de ellos son un descontrol de peticiones que pueden llegar a saturar tu servidor.
Prohibir el rastreo de algunas zonas de tu web
Eliminar contenido duplicado o temporal: si eliminamos la duplicidad de contenido, los buscadores nos puntuaran muy alto, aumentando el flujo de visitas.
Fijar mapas del sitio: También es posible acoplar un sitemap para indicar el buen camino a los robots.

Algunas puntualizaciones

El robot.txt es un documento de texto normal y corriente
Solo puede haber un archivo robots.txt en cada sitio web y se tendrá que colocar en la raiz.
Las urls son sensibles a mayúsculas y minúsculas
El archivo estará compuesto de diversas directivas agrupadas en relación con el robot al que se aplican.
Dentro de cada uno de estos grupos de directivas NO puede haber lineas en blanco.
El archivo robots.txt solo es necesario si su sitio incluye contenido que no desea que los motores de búsqueda indexen. Si va a permitir la indexación de su sitio por completo, el robots.txt no es necesario (ni siquiera uno vacío).

Establecer el buscador de referencia: User-Agent

La propiedad User Agent se establece el buscador al que quieres hacer referencia, Si quieres establecer que todos los buscadores sigan esas instrucciones, basta con poner el signo * en User-Agent (aunque dado que cada buscador premia unas u otras cosas aveces puede interesar permitir que unos indexen lo que otros no quieres que vean).

Existen tantos robots como buscadores, esta es una lista de algunos de ellos, pero te dejo los spiders mas conocidos:

Google: Googlebot
Yahoo: yahoo_slurp
MSN: msnbot

Bloquear o eliminar páginas: Disallow

La línea Disallow indica las páginas que desea bloquear. Puede insertar una URL específica o un patrón. La entrada debe comenzar con una barra inclinada (/).

Recuerda que si el valor de User-agent es *, las directivas que le sigan se aplicarán a cualquier robot que no tenga directivas específicas.

Siempre tiene que haber un campo Disallow>, pero si lo dejamos vacío indicamos que no contiene restricción ninguna. Añadiendo el carácter # al principio de una linea podemos escribir comentarios que no interpretará el robot.

Para bloquear todo el sitio, utilice una barra inclinada.

User-agent: *    # aplicable a todos los robots
Disallow: /      # impide la indexacion de todas las paginas

Para bloquear un directorio y todo lo que contiene, inserta una barra inclinada después del nombre del mismo.
```
Disallow: /directorio-sintitulo/
```
Para bloquear una página, insértala después de la línea Disallow.
```
Disallow: /archivo_privado.html
```
Para eliminar una imagen de Google Imágenes, añade lo siguiente:
```
User-agent: Googlebot-Image
Disallow: /imagenes/perros.jpg
```
Para eliminar todas las imágenes de su sitio de Google Imágenes, añada lo siguiente:
```
User-agent: Googlebot-Image
Disallow: /
```
Para bloquear archivos de un tipo determinado (por ejemplo, .gif), añada lo siguiente:
```
User-agent: Googlebot
Disallow: /*.gif$
```
Para impedir el rastreo de todo nuestro sitio, permitiendo que se muestren anuncios de AdSense, inhabilite el acceso de todos los robots que no sean de Mediapartners-Google. Este robot no comparte páginas con el resto de user-agents de Google. Por ejemplo:
```
User-agent: *
Disallow: /
User-agent: Mediapartners-Google
Allow: /
```
La directiva Disallow: / *? bloqueará cualquier URL que incluya el símbolo ?.
La directiva Allow: /*?$ permitirá cualquier URL que finalice con el símbolo ?.

Concordancia mediante patrones

Googlebot respeta algunas concordancias mediante patrones, aunque no todos los motores de búsqueda lo hacen.

Puede utilizar un asterisco (*) para que la concordancia se establezca con una secuencia de caracteres. Por ejemplo, para bloquear el acceso a todos los subdirectorios que comiencen por “privado”:
```
User-agent: Googlebot
Disallow: /privado*/
```
Para bloquear el acceso a todas las URL que incluyan un signo de interrogación (concretamente, cualquier URL que comience por el nombre de su dominio, seguido de cualquier cadena, signo de interrogación y cualquier cadena):
```
User-agent: Googlebot
Disallow: /*?
```
Para especificar la concordancia con el final de la URL, utilice $. Por ejemplo, para bloquear una URL que termine en .xls:
```
User-agent: Googlebot
Disallow: /*.xls$
```

Por último, si quieres profundizar, en RobotsTXT.org encontrarás la documentación oficial, ejemplos, e incluso un validador de robots.txt.

Razones por las que Internet Explorer 6 tardará en morir

Jorge López — Sat, 27 Feb 2010 15:44:54 +0000

Internet Explorer 6 sigue siendo uno de los navegadores con más cuota de mercado, pero es también el más odiado por los desarrolladores. De hecho, es considerado por algunas publicaciones como el peor programa de la historia, es el navegador más inseguro y demasiado viejo e ineficaz para aguantar casi una década de innovaciones en los estándares web. Incluso a Microsoft le encantaría deshacerse de él. Sin embargo, a pesar de las campañas en su contra, lo más probable que no vaya a desaparecer tan rápido como quisiéramos. ¿Como puede ocurrir esto?, en este artículo intentaremos dar algunas respuestas.

Internet Explorer 6 sigue siendo uno de los navegadores más populares de la red con alrededor de un 20% de cuota de mercado y sólo por detrás de Internet Explorer 8 y Firefox. Realmente muchos usuarios no ven que esta versión de Explorer sea un verdadero problema y no quieren actualizarse a versiones más modernas porque no lo ven una necesidad, por vagancia o simplemente por ignorancia. Pero la cuota de mercado nunca ha sido un impedimento para que Microsoft actualizase su software con regularidad, ¿en que se diferencia este caso de el resto?. Ahora veremos varias razones:

Las empresas y su dependecia y Internet Explorer

Un poderoso argumento para seguir dando apoyo a IE6 es que una importante proporción de usuarios de Internet Explorer 6 son grandes empresas. En dichas empresas el software está bloqueado y desactualizado, ante el temor de perder funcionalidad frente a aplicaciones específicas o páginas internas. Si una gran empresa ejecuta miles de ordenadores, cualquier cambio tiene que ser probado con cientos de aplicaciones para asegurarse de que todo va a seguir funcionando correctamente, por esa razón son tan poco partidarios de actualizar sus navegadores. Además, la actualización de software a gran escala es cara y percibida como un gasto inútil, ¿para que cambiarlo si ya nos funciona bien?.

Además una gran parte de las grandes empresas siguen utilizando Windows XP, muchos de ellos utilizan el navegador que viene con él. Desde su punto de vista, es la opción más simple y barata.Otro freno para el progreso es una mala programación. Algunas empresas desarrollaron intranets y sitios web para IE6, en lugar de los estándares web. Si sus aplicaciones internas están optimizadas para IE6, evidentemente no se podrán actualizar a IE8 o Firefox sin cambiar sustancialmente sus aplicaciones. Se trata pues de otro gasto evitable.

Los gobiernos están en el misma situación que las grandes corporaciones, por ejemplo,el gobierno británico es un gran usuario de IE6. Algunos Ministerios se están actualizando a Internet Explorer 7, pero el Ministerio de Defensa, que tiene 300.000 ordenadores de todo el mundo se mantiene con IE6, a pesar de la gran contradicción que supone utilizar el navegador más inseguro de todos en las instalaciones que necesitan más seguridad.

El apoyo de Microsoft

El 14 de abril de 2009, Microsoft se retiró de soporte técnico principal para Windows XP, y por lo tanto para Internet Explorer 6. Sin embargo, en el Ieblog Microsoft informaba que no tiene la intención de retirar el soporte extendido para este sistema operativo hasta el 8 de abril 2014 ,(cuando Internet Explorer 6 tenga 13 años de existencia). Esta decisión fue tomada en gran medida por la gran cantidad de entornos laborales que necesitan de Internet Explorer 6, como hemos mencionado anteriormente.

En ese mismo artículo, el director de proyecto de Internet Explorer 8, Dean Hachamovitch escribió:

El punto de vista técnico de IE6 comienza con su sistema operativo. Dejar de brindar soporte a IE6 no es una opción porque estamos comprometidos a apoyar la versión de IE que viene incorporada a cada sistema operativo durante el ciclo de vida de ese producto.

Nosotros cumplimos nuestras promesas. Mucha gente espera que las aplicaciones incluidas originalmente con su sistema sigan trabajando sin importar la obsolescencia que cada producto pueda tener. Como ingenieros, queremos que la gente actualice a las últimas versiones y tratamos de facilitárselo al máximo, sin embargo, la opción de actualizar pertenece finalmente a la persona responsable de cada PC”.

A pesar de estas declaraciones, Microsoft también está invirtiendo tiempo y recursos de trabajo con las grandes empresas para romper su dependencia de IE6. Estamos dispuestos a hacer entender a nuestros clientes que respecto a la seguridad IE8 es el mejor navegador. Le protegerá contra el phishing y ataques de ingeniería social de malware, y además es gratuito.

La respuesta de Google y los desarrolladores

En google no ven este asunto de la misma manera que Microsoft y sobretodo tras los ciber-ataques a varias cuentas de Gmail, producidas por un agujero de seguridad en Explorer 6. Por ello desde google se confirmó que dejará de soportar IE6, por lo que aplicaciones como Google Docs y Sites podrían dejar de funcionar en el futuro.

Además se reconoció que a finales de 2010 eliminará el acceso a Gmail y Calendar a los internautas que utilicen esta versión de Explorer y que a partir del 13 de marzo las nuevas funciones de Youtube no se diseñarán pensando en al compatibilidad con IE6. Los vídeos podrán seguir viéndose, pero no se garantiza que con el tiempo los usuarios puedan usar correctamente la página. Esto puede ser la puntilla al veterano navegador.

Por parte de los desarrolladores que llevan años boicoteando y pidiendo la muerte de Explorer 6 esta es la mejor noticia en años. De hecho en una iniciativa con un apoyo sin precedentes, se ha montado un funeral por el navegador que se celebrará el próximo cuatro de marzo.

Navegadores desconocidos o poco utilizados – (parte 2)

Jorge López — Sun, 14 Feb 2010 21:36:05 +0000

Proseguimos nuestro pequeño estudio de navegadores poco conocidos. En esta ocasión vamos a ver dos navegadores exclusivos para Windows y otros tantos desarrollados en exclusiva para MAC.

¿Te suenan todos estos logotipos?

Lunascape

Lunascape es el primer y único navegador con triple motor de renderizado. Se trata de un navegador híbrido que funciona tanto con Gecko, como Trident, y WebKit. También es compatible con todos los plugins y complementos de Firefox e Internet Explorer. Por ahora no hay soporte para las extensiones de Chrome, pero todo apunta a que en próximas versiones esta opción estará también disponible.

Para desarrolladores que deben comprobar si sus webs se muestran correctamente en todos los navegadores puede ser una solución perfecta. De hecho, se han incluido la muy útil opción “split tab display”, con la que puedes ver la misma página renderizada con cada uno de los motores simultáneamente.

Versión actual: 6.0.1
Motor de renderizado: Gecko, Trident, y WebKit
Sistema operativo compatible: Windows
Página web: http://www.lunascape.tv/

K-Meleon

K-Meleon es un navegador para Windows muy rápido y ligero. Utiliza el motor de renderizado Gecko de Mozilla. Visualmente se asemeja a Internet Explorer, con la diferencia de que tiene menos características y funciones, para optimizar el uso de memoria y cargar las páginas más rápidamente.

Como utiliza la interfaz nativa de Windows en lugar de XUL del Firefox, en K-Meleon no se pueden instalar complementos de Firefox. Como hemos dicho antes, la principal ventaja de este navegador, es su uso muy reducido de memoria, lo que le convierte una buena opción para Netbooks y portátiles.

Versión actual: 1.5.3
Motor de renderizado: Gecko
Sistema operativo compatible: Windows
Página web: http://kmeleon.sourceforge.net/?switchlang=es

Shiira

Shiira es un navegador Web basado en Web Kit y escrito en Cocoa. Los desarrolladores han intentado aparejarlo en estabilidad y velocidad a Safari, por lo que puede ser uno de los navegadores más rápidos y funcionales para los usuarios de Mac. Una de sus ventajas principales es su diseño elegante y su espectacular interfaz de usuario.

Shiira introduce en el uso de pestañas la función Exposé, lo que nos permitirá visualizar una imagen de todas las pestañas y seleccionar la que nos interese. También podemos implementar una visualización basada en un efecto de pase de página utilizando Core Image, pero para ello necesitaremos un Mac bastante potente.

Versión actual: 2.2
Motor de renderizado: Web Kit
Sistema operativo compatible: Mac
Página web: http://shiira.jp/en.php

Camino

A pesar de que Mozilla tiene una versión para Mac de Firefox, viene desarrollando otro navegador para conseguir la mayor integración posible con este sistema operativo. El resultado ha sido Camino. Para conseguir esta mayor integración con Mac, se ha abandonado la interfaz de usuario basada en XUL utilizada por la mayoría de las aplicaciones de Mozilla, a favor de Cocoa. Utiliza el motor de renderizado Gecko, lo que no es muy común en las aplicaciones de Mac.

Camino cuenta con funciones muy parecidas a Firefox: navegación con pestañas, protección antiphising y antimalware, bloqueo de ventanas y gestor de contraseñas. Una función muy interesante es la vista de pestañas, que permite ver todas las pestañas abiertas en una sola página para seleccionar fácilmente la que deseamos.

Versión actual: 2.0
Motor de renderizado: Gecko
Sistema operativo compatible Mac
Página web : http://caminobrowser.org/

Los motores de renderizado de los navegadores web

Jorge López — Fri, 29 Jan 2010 18:59:06 +0000

¿Nunca te has preguntado porque los diferentes navegadores visualizan las mismas páginas de diferente manera?, esto es debido a los motores de renderizado.

¿Entoces que es un motor de renderizado?, pues es la parte de un navegador que toma el contenido marcado, (como XML o HTML), lo interpreta de manera visual y lo presenta visualmente a los usuarios. Todos los navegadores web incluyen algún motor de renderizado.

El termino motor de renderizado, (layout engine o rendering engine en ingles), se hizo popular cuanto Mozilla, desarrolló el suyo de manera libre y diferenciado del propio navegador, siendo posible de esta manera reutilizarlo para otros navegadores. Ahora veremos algunos de los motores más importantes.

Gecko

Gecko es un motor multiplataforma y libre originalmente desarrollado por Netscape. Actualmente su desarrollo es gestionado por la Fundación Mozilla.

Solía ser criticado por su enorme complejidad y uso de memoria. La mayor parte de estas debilidades se subsanaron en Firefox 3 con el nuevo motor Gecko 1.9 Con este motor se logró disminuir drásticamente el uso de memoria, incluso superando a Safari y Opera. Estos cambios permitieron a Gecko pasar el test Acid2 y soportar algunos elementos de CSS 3 (ya implementados en WebKit). Con la llegada de Firefox 3.1, se implementó Gecko 1.9.1 que incluía TraceMonkey, el nuevo intérprete JavaScript. Las futuras mejoras, harán que Gecko sigua siendo una opción muy sólida frente a WebKit.

Aquí podemos ver los pasos que realiza el motor de renderizado Gecko hasta mostrar la página web

KHTML/WebCore:

KHTML es el motor de renderizado HTML de código libre desarrollado para el navegador web de KDE: Konqueror. En el 2003 fue adoptado por Apple para su navegador Safari. KHTML se encuentra liberado bajo la licencia LGPL.

WebKit

WebKit es un motor de render HTML de código abierto, desarrollado por Apple sobre la base del código KHTML, para Konqueror. Se trata de un motor sumamente liviano, reconocido por tener un código compacto, simple, claro y riguroso por su respeto a los estándares HTML, además usar poca memoria para su funcionamiento.

Desde Google Chrome también lo adaptó, WebKit está ganando popularidad a pasos agigantados. Y es justamente esta creciente popularidad que, para algunos, comienza a poner en duda la relevancia de Mozilla Gecko como motor HTML.

Trident (también conocido como MSHTML)

El Motor de renderizado Trident de Microsoft es considerado por la mayoría de desarrolladores como el cáncer de Internet. Es el motor menos compatible con los estándares, lo que durante mucho tiempo ha supuesto que un gran número de páginas web no estén diseñadas para ser compatibles con los estándares, sino para ser compatibles con Explorer.

La versión 4.0 de Trident, que acompaña Internet Explorer 8, fue la primera versión en pasar el test Acid2 ,(casi 5 años después que safari), cuando todos los demás motores pasan sin problemas el test Acid3 .

Entonces la pregunta del millón es , si es tan malo, ¿porque se empecina Microsoft en seguir desarrollándolo? . Lo más lógico es que no hayan querido romper con todas las webs diseñadas para su navegador, por aquello de no dejar en la estacada a sus clientes más fieles.

Presto

Es el motor de código cerrado desarrollado por Opera Software para el navegador Opera. Fue introducido en la versión 7.0 de este navegador reemplazando al motor Elektra que se usó para las versiones 4, 5 y 6 de este navegador.

La versión 2.2 de Presto fue el primer motor en lograr pasar las pruebas Acid3Test al 100%. Esto hace que Opera 10 sea probablemente en el navegador con mejor soporte para los estándares web.

Comparativa

Por último enlazo una comparativa de velocidad entre navegadores realizada por SixRevisions.

Las futuras versiones de Firefox se retrasan

Jorge López — Sun, 17 Jan 2010 14:38:44 +0000

Hace tiempo que contamos las mejoras que traerían las futuras versiones de Firefox.Sin embargo la wiki de Mozilla ha informado que se han retrasado las fechas de lanzamiento de las versiones 3.6 y 4.0. y se ha cancelado la versión 3.7.

Con estos retrasos, el lanzamiento de la versión 3.6 queda fijado para el primer trimestre del 2010 y la versión 4.0 quedaría relegada para finales del 2010 o incluso el 2011

A pesar de todo, desde Mozilla se ha decidido añadir muchas de las nuevas funcionalidades previstas para estas versiones junto a las actualizaciones de seguridad. De esta manera, podremos disfrutar mucho antes de lo previsto de algunas nuevas características y mejoras que incluirán las futuras versiones. Parece ser que Mozilla quiere darse prisa para no quedarse atrás respecto a los navegadores de la competencia, que disfrutan de un rápido desarrollo.

Una de las funcionalidades más interesantes, que podría llegar este mismo trimestre, son los llamados plugins en procesos independientes, que permitirán que los complementos se ejecuten cada uno en su proceso independiente y de esta manera no sobrecargar demasiado el proceso general del navegador. Así se podrá evitar perder todos los complementos en caso de un fallo general de la aplicación.