Presentación de ACTO Framework parte II
-
Upload
adwe-team -
Category
Technology
-
view
1.346 -
download
1
Transcript of Presentación de ACTO Framework parte II
![Page 1: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/1.jpg)
![Page 2: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/2.jpg)
Co-Fundador de Molamil. Diseñador/programador interactivo, autodidacta. Más de 10 años de experiencia en agencias en Argentina, España y Dinamarca.
Ramiro Espada
![Page 3: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/3.jpg)
Nuestra experiencia usando ACTO en la creación de sites interactivos,campañas.
![Page 4: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/4.jpg)
• Muchas animaciones.• 1 o 2 desarrolladores por
proyecto.• Poco uso de eventos (AS2)• El efecto WOW valía más que
todo.• Contenidos dinámico? Sí, con
vars en un .txt
Flash antes…
![Page 5: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/5.jpg)
• Muchas animaciones con código.
• Varios desarrolladores por proyecto.
• Frameworks son populares, gráficos en 3D, sistemas de partículas, augumented reallity etc…
• Todo es multilingüe, dinámico, escalable, basado en algún CMS…
Flash ahora…
![Page 6: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/6.jpg)
La arquitectura no es una buena practica, es la clave para ejecutar el proyecto sin sorpresas.
![Page 7: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/7.jpg)
Un salto revelador…
![Page 8: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/8.jpg)
Mejorar nuestro proceso de trabajoestructura de carpetas, listas de tareas en google docs (TODOs)…
![Page 9: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/9.jpg)
Consolidar un entorno comúnusando todos las mismas herramientas para una instalación y comunicación más rápida, SVN, FDT, ant…
![Page 10: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/10.jpg)
public class TusClasses extends AbstractView {
public override function init():void{}
public override function draw():void {}
public override function destroy():void {}
}
AbstractView
![Page 11: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/11.jpg)
Empiezadefiniendo la estructura del site en acto.xml
![Page 12: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/12.jpg)
Haz una maqueta interactiva del site en la que puedas navegar por todas las páginas.
![Page 13: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/13.jpg)
Discrimina el contenido en paginas y blocks,si solo una instancia del contenido es visible a la vez que otro contenido similar, es una pagina, si está presente en mas de una ocasiónes un block.
![Page 14: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/14.jpg)
Crea containers,piensa en capas, adapta los containers de acuerdo al tamaño del Stage para optimizar el rendimiento.
![Page 15: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/15.jpg)
Incluye otros frameworks en la carpeta libTweener, Away3D, Papervision, analytics, SWFAddress, etc…
![Page 16: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/16.jpg)
Crea una librería de gráficos para tuProyecto.swcincluyendo solo gráficos, animaciones, tipografías, sonidos, todo sin referencias a clases externas, para evitar sorpresas con referencias recursivas.
![Page 17: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/17.jpg)
Construye los diferentes “views”incluyendo en tus clases los elementos visuales en tuLibreria.swc public class Frontpage extends AbstractView {
private var libreria:frontpage; // en tuLiberia.swc
public override function init():void{
libreria = new frontpage();
librería.titular.text = “HOLA”;
}
}
![Page 18: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/18.jpg)
Crea componentesdiscriminando aquellos objetos que van a ser utilizados más de una vez en diferentes páginas o blocks: botones, contenedores de imágenes, preloaders, reproductores de video, scrollbars, etc…
![Page 19: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/19.jpg)
Usa destroy() recursivamente
public class Frontpage extends AbstractView {
private var button:SimpleButton;
public override function init():void{
button = new SimpleButton();
addChild(button);
button.label = “Siguiente Pagina”;
button.init();
}
public override function draw():void {}
public override function destroy():void {
button.destroy();
}
}
![Page 20: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/20.jpg)
Pon el contenido en acto.xml<page id="frontpage" extends="abstractPage” target=“Frontpage">
<prop name=”texts”>
<prop name=”titular" value=”HOLA ACTO!"/>
</prop>
</page>
public class Frontpage extends AbstractView {
private var texts:Object;
public override function init():void{
libreria = new frontpage();
libreria.titular.text = texts.titular;
}
}
![Page 21: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/21.jpg)
En acto.XML
<include target=”textos.xml"/>
<page id="frontpage" extends="abstractPage” target=“Frontpage">
<prop name="texts" value="{texts.frontpage}"/>
</page>
En textos.XML
<?xml version="1.0" encoding="UTF-8" ?>
<acto>
<prop name="texts">
<prop name="frontpage">
<prop name="TITULAR"><![CDATA[Break the pattern by playing]]></prop>
</prop>
</prop>
</acto>
![Page 22: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/22.jpg)
Usa correctamente eventos y handlersdescribiendo siempre lo que acaba de suceder, nunca lo que debería suceder después.
![Page 23: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/23.jpg)
Primero crea todo y luego refínalo,valen más 25 páginas “más o menos” hechas, que 2 páginas perfectas y 23 sin hacer.
![Page 24: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/24.jpg)
Simula el resultado del backend compartiendo con el equipo de backend la estructura del xml que quieres recibir antes de que hayan empezado, puedes ahorrarte en hacer un nuevo parser y crear un lenguaje común.
![Page 25: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/25.jpg)
Crea comandos
<command id="sendToFriend" type=“SendToFriendCommand" target=“sendToFriend.php">
<param name="firstName" required="true"/>
<param name="lastName" required="true"/>
<param name="companyName" required="true"/>
<param name="email" required="true” validator="EmailValidator"/>
<handler type="sendToFriendFormSubmitted"/>
</command>
![Page 26: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/26.jpg)
package com.molamil.hpci.command {
import com.molamil.hpci.events.HPCIErrorEvent;
import com.molamil.hpci.events.HpciEvent;
import com.molamil.hpci.Controller;
import flash.net.URLVariables;
import org.molamil.acto.commands.RemoteCommand;
public class SendToFriendCommand extends RemoteCommand {
protected override function parseResponse(data:*):* {
var params:URLVariables = new URLVariables(data);
if(params.status == "1”) {
dispatchEvent(new HpciEvent(HpciEvent.SEND_TO_FRIEND_COMPLETE));
return true;
}
dispatchEvent(new HPCIErrorEvent(HPCIErrorEvent.SEND_TO_FRIEND_ERROR, params.error));
return false;
}
}
}
![Page 27: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/27.jpg)
Usa SWFAddresspublic class Controller extends App {
private var swfAddressController:SWFAddressController;
public function init():void {
swfAddressController = new SWFAddressController(this);
swfAddressController.init();
}
}
![Page 28: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/28.jpg)
Implementa el trackingpublic class Controller extends App {
private var _gaController:GAController;
private function confCompleteHandle(event:ConfLoadEvent):void {
_gaController = new GAController(this);
_gaController.account = props.googleAnalyticsAccount;
_gaController.visualDebug = props.isTrackingDebug;
_gaController.mode = props.trackingMode;
_gaController.init();
}
}
![Page 29: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/29.jpg)
Busca errores y elimina erroresrevisando todo lo que sucede gracias a los niveles del Logger:Logger.LEVEL_WARNING;Logger.LEVEL_INFO;Logger.LEVEL_SEVERE;Logger.LEVEL_DEBUG;
![Page 30: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/30.jpg)
Usa diferentes managerscreando diferentes animaciones de transición entre paginas y blocks.
![Page 31: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/31.jpg)
Crea animaciones que añadan valor al contenidocontando con la colaboración de alguien que no haga código. Es muy fácil hacer algo cutre, pero requiere talento, inspiración y tiempo hacer algo interesante.
![Page 32: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/32.jpg)
Divide el trabajoen equipo acorde con lo que cada uno hace mejor y mas rápido
![Page 33: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/33.jpg)
ACTO + Desarrollador = Reusar, organizar, hacer cambios sin compilar, conectar con diferentes tecnologías…
![Page 34: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/34.jpg)
ACTO + Diseñador = Hacer skins, cambiar todos los botones o tipografías en un solo lugar…
![Page 35: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/35.jpg)
ACTO + Animador = Concentrarse en los detalles chulos, crear transiciones, efectos para rollovers…
![Page 36: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/36.jpg)
ACTO + Copywriter = Cambiar el texto en un documento separado de la configuración, donde solo hay texto…
![Page 37: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/37.jpg)
ACTO + Jefe de proyecto= Tener una maqueta lo antes posible, hacer cambios sin perder la vida, minimizar tiempo de integración…
![Page 38: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/38.jpg)
ACTO hace nuestro negocio mas competitivo,trabajando mas rápido conseguimos más tiempo para concentrarnos en los objetivos principales del site, haciendo la experiencia mas consistente y completa.
![Page 39: Presentación de ACTO Framework parte II](https://reader036.fdocuments.net/reader036/viewer/2022081603/557ad8ead8b42a590b8b45a2/html5/thumbnails/39.jpg)
Tienes alguna duda, o quieres compartir tu experiencia ?