lunes, octubre 11, 2010

Novedades en IE9: Internet Explorer 9.

 

Hoy quiero hablarles de una herramienta que utilizamos a diario en nuestro trabajo, uno de los exploradores de internet del mercado, en este caso de Internet Explorer 9.

 

Ya tenemos disponible para descargar y probar el beta de Internet Explorer 9, la última versión del navegador de internet de Microsoft con muchas mejoras desarrolladas para esta nueva versión, dichas mejoras redundan en una mejor experiencia para el usuario del explorador de internet y en la adopción de los estándares de la industria.

 

Algunos conceptos básicos importantes para entender porque esta nueva versión del navegador de Microsoft es tan importante dentro de las aplicaciones y de los navegadores para internet las intento explicar a continuación.

 

Una de las herramientas en las cuales nos apoyamos para verificar las funcionalidades del explorador es el WebKit SunSpider.

 

¿Qué es WebKit SunSpider?

(Wikipedia: http://en.wikipedia.org/wiki/WebKit)

Es un conjunto de programas que tiene como objetivo medir el rendimiento de JavaScript en las tareas que son relevantes para el uso actual y futuro de JavaScript en el desarrollo, tales tareas son la codificación y la manipulación de texto en los diferentes exploradores de internet al momento de dibujar una página web, esto es lo que se conoce como “render”.  La versión 0.9 de SunSpider fue lanzado por el equipo de WebKit de Apple en diciembre de 2007. Fue bien recibido, y los desarrolladores de otros navegadores también lo utilizan para comparar el rendimiento de JavaScript de los diferentes navegadores. La versión 0.9.1 fue lanzado en abril de 2010.

 

¿Qué es ACID3?

Acid3 es un sitio hecho por WaSP que pone a prueba los navegadores con los estándares web, especialmente los de DOM y ECMAScript (JavaScript).

Estaba en desarrollo desde abril de 2007 y fue lanzado el 3 de marzo de 2008.El principal desarrollador fue Ian Hickson, quien también escribió la prueba Acid2. Acid2 se concentraba principalmente en CSS, en cambio Acid3 también se enfoca en tecnologías muy usadas en la Web 2.0, tales como ECMAScript y DOM Nivel 2. Algunas sub-pruebas también se encargan del lenguaje SVG, XML y del esquema data:URI. Sólo elementos de la especificaciones del 2004 son incluidos.

El nuevo navegador de Microsoft Internet Explorer 9 tiene un puntaje de 95/100 en esta prueba.

 

¿Qué es CSS3?

Antes de adentrarnos en CSS3 recordemos que es CSS.

¿Qué es CSS?
CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas.

 

En la versiones anteriores a css3 se cumplieron los objetivos de separar la apariencia  de las páginas web con el código, en css3 la novedad que se incorpora para los desarrolladores web, son los nuevos mecanismos para un mayor control sobre los estilos que se utilizan para mostrar los controles de las páginas web, esto sin utilizar trucos que hacían mas complicado el código de la página a desarrollar.

 

Pero, ¿que cosas nuevas trae css3 ?, a continuación una lista de las nuevas características que implementa css3:

Bordes

  • border-color
  • border-image
  • border-radius
  • box-shadow
Fondos
  • background-origin
  • background-clip
  • background-size
  • hacer capas con múltiples imágenes de fondo
Color
  • colores HSL
  • colores HSLA
  • colores RGBA
  • Opacidad o Transparencia
Texto
  • text-shadow
  • text-overflow
  • Rotura de palabras largas
Interfaz
  • box-sizing
  • resize
  • outline
  • nav-top, nav-right, nav-bottom, nav-left
Selectores
  • Selectores por atributos
Modelo de caja básico
  • overflow-x, overflow-y
Otros
  • media queries
  • creación de múltiples columnas de texto
  • Web Fonts
  • Propiedades orientadas a lectura automática de páginas web

 

Estas características y algunas otras las pueden consultar en la pagina oficial de ccs: http://www.css3.info/preview/

 

¿Qué es DOM?

(Tomado de Wikipedia en español http://es.wikipedia.org/wiki/Document_Object_Model)

El DOM viene de las siglas en inglés de las palabras Document Object Model.

El Document Object Model (modelo de objetos del documento, otra traducción al español no literal, pero apropiada, podría ser modelo en objetos para la representación de documentos), abreviado DOM, es esencialmente una interfaz de programación de aplicaciones que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se diseñó principalmente.

El responsable del DOM es el World Wide Web Consortium (W3C).

En efecto, el DOM es una API para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos con lenguajes como ECMAScript (JavaScript).

 

alt

Diagrama de la Jerarquía del DOM

 

En definitiva el DOM es quien arma la página web que va a ser mostrada en el navegador de internet, pero también controla todos los controles que se utilicen en al página así como los diferentes eventos que generan estos controles causados por el mouse o por el teclado del computador en donde se ejecute el navegador de internet y los envía al navegador para que se ejecuten las acciones pertinentes.

 

Todo lo anterior para entender los siguientes test y ejemplos de Internet Explorer 9.

 

Para verificar todas las características anteriormente mencionadas

En cuanto al performance de las aplicaciones web:

Velocidad de Carga de las paginas

Juegos en el Navegador de Internet

 

Utilizando HTML5

Ejemplo de ECMAScript5

Capacidades extendidas del DOM

 

Demos de las capacidades graficas del Navegador IE9, utilizando el GPU

Zoom de imagenes

Juego de pinball usando las ventajas de graficacion del GPU

 

Esperen… HTML5 y ejemplos.

 

Que lo disfruten!!!

 

Happy development!!