Las buenas relaciones de Google con Adobe, promoviendo Flash en sus teléfonos Android, no tienen por qué ser un motivo de despreciar HTML5 y apoyar a los desarrolladores web a utilizar más esta tecnología.
A través de la web http://www.html5rocks.com/ Google ofrece presentaciones, tutoriales y ejemplos para dar a conocer entre los programadores las ventajas y capacidades de la unión de HTML + CSS + JS. Tutoriales por ejemplo para aprender como habilitar tu aplicación web para que funcione en modo offline, acceso a la geolocalización o leer archivos locales mediante JavaScript.
He creado un pequeño ejemplo para mostraros tres de las nuevas propiedades que encontraremos disponibles en CSS3: las transformaciones, las transiciones y las sombras. El ejemplo friki reproduce la animación del título en la introducción de la serie Lost (como tributo a su finalización).
Aviso: Este ejemplo solo funcionará en aquellos navegadores que ya tengan implementadas estas nuevas propiedades de CSS3, como por ejemplo Firefox 3.7, Safari 4, Chrome 5 y Opera 10.
El ejemplo muestra el texto LOST inicialmente con una opacidad, tamaño de fuente y rotación. Cuando se posiciona el cursor sobre el texto gracias a la propiedad transition aplicaremos una animación que cambiará estos tres valores iniciales y le añadirá una sombra al texto.
De este modo estaríamos indicando que el texto inicial tiene una rotación de -15 grados, sin plegamiento y sin escalado. La transformación que se va a aplicar afectará a todas las propiedades (all), durará 3 segundos y como se comportará durante el tiempo de animación (en este caso ease-in).
El punto final de la animación lo asignamos en el div:hover. Aquí indicamos una sombra para el texto (posición izq/der, posición arriba/abajo, tamaño y color) y la transformación final del texto.
Google Font API es una de las nuevas herramientas anunciadas ayer en el evento I/O 2010. Esta herramienta nos permite incluir tipografías open source en nuestros desarrollos web de una forma sencilla simplemente añadiendo una línea de código.
Google se encargará de almacenar estas tipografías en un directorio de fuentes que podremos utilizar con tres sencillos pasos:
1.-Acceder al directorio de fuentes de Font API y seleccionar la fuente que deseamos utilizar haciendo clic sobre ella. En este ejemplo vamos a seleccionar la fuente Yanone Kaffeesatz:
2.- En la ficha de la fuente seleccionada tenemos una previsualización de la misma en diferentes tamaños de letra, así como la posibilidad de revisar todos los caracteres incluídos (por ejemplo, por si queremos ver si soporta tildes). Si nos movemos a la pestaña de Get Code tendremos el código necesario que tenemos que incluir en nuestra página para usar la tipografía:
Además tenemos marcado el nombre que tendremos que utilizar en la propiedad font-family de la hoja de estilos para vincular la tipografía a un elemento determinado.
3.- Finalmente añadimos esta línea dentro de la etiqueta head de nuestro código y antes de su utilización en el css. Un ejemplo sencillo sería:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Google Font API</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style>body{ font-family: 'Yanone Kaffeesatz', arial, serif; font-size:75px; text-shadow:4px 4px 4px #aaa; }</style>
</head>
<body>
Google Font API : )
</body>
</html>
Y su resultado nos daría:
Y cabe destacar que Google Font API ofrece compatibilidad total con navegadores obsoletos. Por ejemplo, si entramos en la ficha de la fuente Yanone Kaffeesatz con el navegador Internet Explorer 6:
En el Moscone Center de San Francisco ha comenzado el I/O 2010, el evento de Google más importante enfocado principalmente a los desarrolladores. Durante la conferencia del primer día Google ha anunciado muchas novedades que vamos a enumerar a continuación, la mayoría de ellas enfocadas al futuro de la web y la utilización de HTML5.
Conscientes del daño que ha provocado y continúa haciendo la versión 6 de su navegador Internet Explorer (versión que venía por defecto en Windows XP) la propia Microsoft ha comenzado una agresiva campaña en contra de su producto y en apoyo de todos aquellos desarrolladores web que llevan años intentando convencer a sus clientes que hay que cerrarle las puertas de una vez por todas a este navegador.
No beberías leche de hace 9 años.
Con esta escueta frase Microsoft pone de manifiesto la necesidad de actualizar la versión del navegador Internet Explorer en todos los equipos que continúen trabajando con Internet Explorer 6. La utilización de una versión de navegador con 10 años de antigüedad, no solo es un grave problema de seguridad sino que además no estaba preparada para la evolución del contenido web en estos años.
Adaptar un desarrollo web a una versión tan obsoleta conlleva un gran esfuerzo por parte de los desarrolladores, incumplimiento de los estándares web (ya que IE6 no los soportaba completamente) y en ocasiones la no posibilidad de implementar nuevas funcionalidades en el sitio web.
Es por ello que muchas de las empresas con más nombre en internet, como Google, Yahoo o Facebook, hayan dejado ya de dar soporte a Internet Explorer 6. Si sus nuevas funcionalidades funcionan en esta versión genial, pero si no no se dedican a corregirlas, el usuario tendrá que actualizar su navegador.
Si quieres disfrutar de la mejor navegación web, accediendo a todas las funcionalidades y disfrutando de una mejor calidad visual, y quieres tener la máxima seguridad y protección a la hora de navegar, actualiza tu Internet Explorer, o prueba:
El uso de Flash en la web viene siendo una importante discusión en el entorno del desarrollo web. Actualmente hemos convivido con Flash y nos hemos acostumbrado a ver su uso en banners publicitarios, reproductores de video, sonido y juegos.
Pero existe una fuerte tendencia en favor de reemplazar el contenido desarrollado en Flash a la utilización de estándares web gracias a las funcionalidades que nos ofrece el futuro HTML5. La presión de la comunidad en abandonar este formato privado vienen apoyadas por ejemplo por Apple y su negativa a permitir la ejecucón de Flash en los iPhone e iPad.
Adobe se ha dado cuenta de este movimiento y, en lo que para mi es el comienzo de una rendición, van a integrar un modo de exportación de animaciones Flash a HTML5 en su próxima Creative Suite. A través de una opción en la aplicación de Flash se podrá generar un archivo XML con toda la información de la animación. Este archivo será procesado a través de JavaScript en la página web y mediante el uso de canvas reproducirá la animación exactamente igual.
En el siguiente video se puede ver en funcionamiento esta nueva característica:
Con este método para exportar animaciones y la posibilidad de reproducir multimedia con HTML5 ¿será este el comienzo del fin de Flash en la web?