{"id":271,"date":"2010-10-28T01:57:19","date_gmt":"2010-10-28T01:57:19","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=271"},"modified":"2013-07-06T01:16:34","modified_gmt":"2013-07-06T04:16:34","slug":"sencha-animator-adobe-edge","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/sencha-animator-adobe-edge\/","title":{"rendered":"Animaci\u00f3n CSS3 con Sencha Animator y Adobe Edge, f\u00e1cil y r\u00e1pido"},"content":{"rendered":"<p>Estos \u00faltimos d\u00edas aparecieron un par de soluciones para crear animaciones usando CSS3 de una manera f\u00e1cil y r\u00e1pida, por un lado en el marco de <a href=\"http:\/\/max.adobe.com\" target=\"_blank\">Adobe MAX 2010<\/a> se mostr\u00f3 el prototipo de <a href=\"http:\/\/tv.adobe.com\/watch\/adc-presents\/preview-of-the-edge-prototype-tool-for-html5-\/\" target=\"_blank\">Adobe Edge<\/a> una herramienta con un uso y funcionalidades b\u00e1sicas parecidas a Adobe Flash pero que utiliza CSS3 para crear las animaciones, a continuaci\u00f3n pueden ver un video donde se aprecian sus capacidades, por ahora no hay mucha informaci\u00f3n acerca de <a href=\"http:\/\/tv.adobe.com\/watch\/adc-presents\/preview-of-the-edge-prototype-tool-for-html5-\/\" target=\"_blank\">Edge<\/a>, no se sabe si va a llegar a materializarse como un producto independiente o si esta tecnolog\u00eda va a formar parte de alg\u00fan otro producto de Adobe, aunque viendo el compromiso que Adobe mostr\u00f3 en la <a href=\"http:\/\/max.adobe.com\" target=\"_blank\">MAX 2010<\/a> para con HTML5 no seria raro que dentro de poco tiempo tengamos novedades.<\/p>\n<div class=\"video-container\">\n<object><param name=\"movie\" value=\"http:\/\/images.tv.adobe.com\/swf\/player.swf\"><\/param><param name=\"allowFullScreen\" value=\"true\"><\/param><param name=\"allowscriptaccess\" value=\"always\"><\/param><param name=\"FlashVars\" value=\"fileID=8185&#038;context=64&#038;embeded=true&#038;environment=production\"><\/param><embed src=\"http:\/\/images.tv.adobe.com\/swf\/player.swf\" flashvars=\"fileID=8185&#038;context=64&#038;embeded=true&#038;environment=production\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\"><\/embed><\/object>\n<\/div>\n<p>La otra herramienta viene de la mano de la gente de <a href=\"http:\/\/www.sencha.com\/\" target=\"_blank\">Sencha Labs<\/a>, la misma corre tanto en Windows, OS X y Linux y su interfaz al igual que <a href=\"http:\/\/tv.adobe.com\/watch\/adc-presents\/preview-of-the-edge-prototype-tool-for-html5-\/\" target=\"_blank\">Edge<\/a> tiene un cierto parecido con Adobe Flash (ver screenshot debajo), su instalaci\u00f3n es muy f\u00e1cil, aunque aun es muy inestable y tiene la contra de necesitar una cuenta de los foros de <a href=\"http:\/\/www.sencha.com\/\" target=\"_blank\">Sencha Labs<\/a> para poder usarla. El c\u00f3digo generado por <a href=\"http:\/\/www.sencha.com\/products\/animator\/\" target=\"_blank\">Sencha Animator<\/a> esta optimizado para navegadores compatibles con Webkit, por lo que algunas features es posible que no funcionen en Firefox como por ejemplo los keyframes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/realnorth.net\/blog\/wp-content\/uploads\/2010\/10\/Sencha_Animator_006.jpg\" alt=\"Sencha Animator\" title=\"Sencha Animator\" width=\"700\" height=\"599\" class=\"alignnone size-full wp-image-298\" \/><\/p>\n<p>Pueden descargar <a href=\"http:\/\/www.sencha.com\/products\/animator\/\" target=\"_blank\">Sencha Animator<\/a> directamente desde <a href=\"http:\/\/www.sencha.com\/products\/animator\/download.php\" target=\"_blank\">aqu\u00ed<\/a>, hay disponibles tambi\u00e9n un par de screencast donde pueden ver el funcionamiento y las cosas que se pueden lograr utilizando <a href=\"http:\/\/www.sencha.com\/products\/animator\/\" target=\"_blank\">Sencha Animator<\/a> (ver videos abajo).<\/p>\n<div class=\"video-container\">\n<iframe src=\"http:\/\/player.vimeo.com\/video\/16219355\" frameborder=\"0\"><\/iframe>\n<\/div>\n<p><\/p>\n<div class=\"video-container\">\n<iframe src=\"http:\/\/player.vimeo.com\/video\/16219994\" frameborder=\"0\"><\/iframe>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Estos \u00faltimos d\u00edas aparecieron un par de soluciones para crear animaciones usando CSS3 de una manera f\u00e1cil y r\u00e1pida, por un lado en el marco de Adobe MAX 2010 se mostr\u00f3 el prototipo de Adobe Edge una herramienta con un uso y funcionalidades b\u00e1sicas parecidas a Adobe Flash pero que utiliza CSS3 para crear las [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,10],"tags":[12,14,16,20,49],"class_list":["post-271","post","type-post","status-publish","format-standard","hentry","category-ui","category-web-design","tag-adobe","tag-css3","tag-edge","tag-html5","tag-sencha"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":3,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"predecessor-version":[{"id":2294,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/271\/revisions\/2294"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}