La cuarta preview the IE10

Se ha publicado una nueva preview de IE10 para la Windows Developer Preview y se puede descargar aquí. Esta nueva preview de IE10 incluye un mayor soporte de las tecnologías de HTML5, permitiendo la creación de aplicaciones más ricas aún. La aceleración hardware en SVG, transformaciones CSS3 y animaciones ofrece un renderizado más rápido que en otros navegadores, podéis verlo en este video:

Con esta cuarta preview se puede empezar a trabajar con las últimas novedades de HTML5. Vamos a ver algunas de ellas. Continúa leyendo La cuarta preview the IE10

Por dónde empezar con SVG III

Continuamos la serie sobre cómo trabajar con SVG. Si aún no lo habéis hecho aquí podéis leer la primera parte y aquí la segunda.

En el post de hoy veremos cómo hacer que las imágenes no se deformen, cómo trabajar con el DOM de la página y veremos algunas herramientas que nos pueden resultar útiles a la hora de trabajar con gráficos SVG. Continúa leyendo Por dónde empezar con SVG III

Por dónde empezar con SVG II

Continuamos la serie sobre cómo trabajar con SVG. Si aún no lo habéis hecho aquí podéis leer la primera parte.

En el post de hoy veremos algunos errores que suelen ocurrir debido a las similitudes entre SVG y HTML, de manera que no perdamos mucho tiempo intentando averiguar qué es lo que está pasando. Continúa leyendo Por dónde empezar con SVG II

Por dónde empezar con SVG

Este es el primer post de una serie sobre el formato SVG. En este post veremos cuales son las bondades de este formato. En próximos post veremos cómo usarlo en nuestras aplicaciones.

El formato SVG (Scalable Vector Graphics) para gráficos web ofrece la mejor calidad en un gran abanico de dispositivos, más aún que gráficos basados en bitmaps. Además, SVG ya soporta temas de accesibilidad lo que le convierte en la mejor opción para gráficos interactivos.

El uso de SVG continúa creciendo en la web. En la SVG Open 2011 se vieron muchos desarollos que estaban usando SVG en una gran variedad de aplicaciones reales. Estas aplicaciones iban desde gráficas con datos, dibujos técnicos, juegos, visualización de datos geográficos y un largo etcétera.

Aunque la especificación de SVG tiene ya casi una decada, no era posible usarlo directamente como un elemento en HTML hasta que ha aparecido HTML 5. Ha medida que los navegadores dan soporte a SVG como parte de HTML 5, la próxima generación de aplicacioens web podrán usarlo sin necesidad de ningún timpo de plugin. De hecho, la facilidad de integración de SVG  con HTML, CSS, el DOM y JavaScript lo convierte en la elección natural para crear experiencias interactivas adaptables. SVG ES la tecnología de gráficos vectoriales elegida para crear aplicaciones de estilo Metro para Windows 8 usando HTML.

A lo largo de una serie de post veremos algunas buenas prácticas a la hora de usar SVG en nuestros sitios con HTML 5 para asegurarnos del buen uso de esta tecnología. Continúa leyendo Por dónde empezar con SVG

Creación de páginas centradas en Texto en IE10

Internet Explorer 10 incluye dos nuevas características de CSS3 diseñadas para hacer más fácil a los programadores crear aplicaciones y páginas ricas centradas en texto. Las Regiones CSS3 ofrecen un mecanismo para trabajar con contenidos en varias áreas no contiguas. Además la Hyphenation CSS3 ofrece a los desarrolladores una forma fácil de separar el texto en sílabas en un amplio rango de lenguajes.

Vamos a ver qué nos ofrecen estas características de CSS3 en más detalle.

Continúa leyendo Creación de páginas centradas en Texto en IE10

HTML5 y subtítulos en vídeos

La promesa de HTML 5 es una Web que funcione para todos. La accesibilidad multimedia por medio de subtítulos es una parte muy importante de esa promesa y es un area que se tiene muy en cuenta en los estándars. Usando el elemento trac de HTML5, podemos añadir subtítulos a videos HTML5 a través de un archivo que contiene la información necesaria en formato de texto. Una vez que el estándar de subtítulos se estableza no será necesario instalar addins para publicar un video accesible:

Imagen de un video con subtítulos
Imagen de un video con subtítulos

El siguiente trozo HTML muestra cómo funciona el elemento track:

<video>

<sourcetype=”video/mp4″src=”video_file”></source>

<tracksrc=”captions_file”label=”English captions”kind=”captions”srclang=”en-us”default></track>

<tracksrc=”descriptions_file”label=”English description”kind=”descriptions”srclang=”en-us”></track>

</video>

La especificación de la W3C para HTML5 permite muchos formatos de subtítulos. La Beta de Internet Explorer 10 de la Windows Developer Preview soporta este elemento, pero aún no muestra los subtítulos. Y es que aún no hay nada decidido, sigue en estudio y hay un grupo para tratar el tema de los subtítulos

El equipo de Internet Explorer ha querido testear este escenario en el que se pueden usar varios formatos para obtener un mayor feedback, as’i que han creado un sitio en el que se puede usar el formato TTML-1.0 y el WebVTT. WebVTT surgió el año pasado y TTML es un estándar ya establecido para subtítulos soportado en Adobe Flash y Silverlight. Es usado en Netflix, Hulu y otros servidores para mostrar contenido en broadcast.

 Pantallazo del entorno de test para mostrar subtítulos

Podéis interactuar con el prototipo en el sitio de laboratorio de HTML 5. Mirad con vuestras herramientas el javascript qu ehace todo esto posible.

Juan María Laó Ramos.

Artículo original.

Sombras CSS3 en IE 10

IE 10 soportará por aceleración hardware las sombras de CSS3, algo muy pedido por los desarrolladores web.

Ya podemos usarlo con la Windows Developer Preview. En el post de hoy vamos a verlo un poco por encima.

Fijáos en la diferencia que puede haber entre aplicar sombras y no aplicarlas:

Este sería un texto sin tener sombra:

Texto sin sombra
Texto sin sombra

Si ahora escribimos su CSS de la siguiente forma:

.shadow1 { color: black; text-shadow: 2px 2px; }

Aparecerá algo parecido a esto:

Texto con sombra CSS3
Texto con sombra CSS3

 

En el blog de Internet Explorer nos cuentan de forma sencilla cómo podemos usarlo con muchos más ejemplos:

http://blogs.msdn.com/b/ie/archive/2011/09/29/css3-text-shadow-in-ie10.aspx

Espero que os guste.

Juan María Laó Ramos.