Aprende con Google a programar en HTML5

Por @marcosesperon el | Imprimir

html5rocks Aprende con Google a programar en HTML5Las 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.

Tutorial: Intro de LOST usando CSS3

Por @marcosesperon el | Imprimir

lost intro css3 Tutorial: Intro de LOST usando CSS3

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.

El código CSS necesario sería:

div{
-webkit-transform: rotate(-15deg) scale(1) skew(0deg);
-webkit-transition: all 3s ease-in;
}
div:hover{
text-shadow: 3px 3px 5px #CCC;
-webkit-transform: rotate(20deg) scale(1) skew(-30deg);
}

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.

Demostración | Descargar [38]

Usar las fuentes de Google Font API en nuestras páginas web

Por @marcosesperon el | Imprimir

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:

font api use 01 Usar las fuentes de Google Font API en nuestras páginas web2.- 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:

font api use 02 Usar las fuentes de Google Font API en nuestras páginas web

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:

font api use 03 Usar las fuentes de Google Font API en nuestras páginas web

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:

font api use 04 Usar las fuentes de Google Font API en nuestras páginas web

Más información: http://code.google.com/apis/webfonts/

Lo que nos ha dejado el primer día del Google I/O

Por @marcosesperon el | Imprimir

google io 2010 01 Lo que nos ha dejado el primer día del Google I/O

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.

Campaña de Microsoft en contra de Internet Explorer 6

Por @marcosesperon el | Imprimir

nine years milk ie6 Campaña de Microsoft en contra de Internet Explorer 6Conscientes 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:

Vía: macoteca

Adobe CS5 exportará animaciones a HTML5: ¿el final de Flash?

Por @marcosesperon el | Imprimir

adobe flash Adobe CS5 exportará animaciones a HTML5: ¿el final de Flash?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?

Vía: The Inquirer