Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Edge de Adobe, crea animaciones en HTML5 con CSS3

Hola, acabo de descargar esta herramienta, se llama Edge y la puedes descarga ya desde este link:

http://labs.adobe.com/technologies/edge/

Todavía está en una etapa temprana ,pero promete, es interesante el seteo de las propiedades y el timeline, generando todo el codigo que se necesita para la animación y transformaciones en dos archivos, uno js y otro css.

image

Al momento tiene la opción de agregar elementos de texto, cuadros y cuadros con bordes redondeados, luego al momento de generar la animación vamos a ver que la carpeta tiene la siguiente estructura:

image

El archivo CSS( prueba1_edge.css) tiene todas las transformaciones que ocurriendo en la animación, generando el código necesario para tener la compatibilidad con los distintos browser(que soporten mediante CSS  estas características, claro está).

Por ejemplo el cuadro que hice mediante Edge

#Cuadro {

    background-color: rgba(212,71,71,1.00);

    border-style: solid;

    width: 152px;

    height: 123px;

    border-color: rgba(0,0,0,1.00);

    border-width: 3px;

    -webkit-transform: translateX(-17px) translateY(6px);

    -moz-transform: translateX(-17px) translateY(6px);

    -ms-transform: translateX(-17px) translateY(6px);

    -o-transform: translateX(-17px) translateY(6px);

}

Puedes ver que tiene el soporte para los distintos browser.

En el archivo prueba1_edge.js, está todo el script que nos sirve para generar las animaciones, tambien dentro de la carpeta includes veremos librerías propias de Edge y jQuery, de hecho para inicializar las animaciones tenemos el siguiente código:

 

$(window).ready(function() {
     $.Edge.initialize(symbols);
});

 

jQuery, como siempre, presente Sonrisa

 

Hice una pequeña prueba, jugando, una animación sin sentido, pero corre bien en los distintos navegadores, también la probé recién en un LG Optimus One  y se ve sin problemas. Luego la pruebo en un IPad, pero dicen que corre perfecto.

 

La prueba esta acá:

http://www.travelco.cl/edge/prueba1.html

 

Así que a probar esta nueva herramienta , por lo que tengo entendido ,la beta es de hoy, no hay tiempo que perder!

 

Saludos!

Gonzalo

Posted: 1/8/2011 17:57 por Gonzalo Perez | con 2 comment(s)
Comparte este post:

Comentarios

Pablo Hormazabal ha opinado:

Muy bueno compadre, oye date una vuelta por mi blog, hay nuevo artículo

vsskar.blogspot.com/.../encriptar-informacion-parte-i-base-de.html

# August 1, 2011 7:30 PM

Gonzalo Perez ha opinado:

Lo vi compadre, muy bueno, lo twittié :) y google+1 :)

# August 2, 2011 1:56 AM