Ramiro Espada<br />Co-Fundador de Molamil. <br />Diseñador/programador interactivo, autodidacta. Más de 10 años de experie...
Nuestra experiencia usando ACTO <br />en la creación de sites interactivos,<br />campañas.<br />
Flash antes…<br /><ul><li>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</li></li></ul><li>Flash ahora…<br /><ul><li>Muchas animaciones con código.
Varios desarrolladores por proyecto.
Frameworks son populares, gráficos en 3D, sistemas de partículas, augumentedreallityetc…
Todo es multilingüe, dinámico, escalable, basado en algún CMS…</li></li></ul><li>La arquitectura <br />no es una buena pra...
Un salto revelador…<br />
Mejorar nuestro proceso de trabajo<br />estructura de carpetas, listas de tareas en googledocs (TODOs)…<br />
Consolidar un entorno común<br />usando todos las mismas herramientas para una instalación y comunicación <br />más rápida...
AbstractView<br />publicclassTusClassesextendsAbstractView {<br />publicoverridefunctioninit():void{}<br />publicoverridef...
Empieza<br />definiendo <br />la estructura <br />del site en <br />acto.xml<br />
Haz una maqueta <br />interactiva del site<br />en la que puedas navegar por todas <br />las páginas.<br />
Discrimina el contenido en paginas y blocks,<br />si solo una instancia del contenido <br />es visible a la vez que otro c...
Crea containers,<br />piensa en capas, adapta los containers de acuerdo al tamaño del Stage para optimizar el rendimiento....
Incluye otros frameworks en la carpeta lib<br />Tweener, Away3D, Papervision, analytics, SWFAddress, etc… <br />
Crea una librería <br />de gráficos para  tuProyecto.swc<br />incluyendo solo gráficos, animaciones, tipografías, sonidos,...
Construye los diferentes “views”<br />incluyendo en tus clases los elementos visuales en tuLibreria.swc<br />publicclassFr...
Crea componentes<br />discriminando aquellos objetos <br />que van a ser utilizados más de <br />una vez en diferentes pág...
Usa destroy() recursivamente<br />publicclassFrontpageextendsAbstractView {<br />privatevarbutton:SimpleButton;  <br />pub...
Pon el contenido <br />en acto.xml<br /><pageid="frontpage" extends="abstractPage” target=“Frontpage"><br />	<propname=”te...
En acto.XML<br /><includetarget=”textos.xml"/><br /><pageid="frontpage" extends="abstractPage” target=“Frontpage"><br />	<...
Usa correctamente eventos y handlers<br />describiendo siempre lo que acaba de suceder, nunca lo que debería suceder despu...
Primero crea todo <br />y luego refínalo,<br />valen más 25 páginas “más o menos” hechas, que 2 páginas perfectas y <br />...
Simula el resultado del backend<br />compartiendo con el equipo de backend<br />la estructura del xml que quieres recibir ...
Crea comandos<br /><commandid="sendToFriend" type=“SendToFriendCommand" 	target=“sendToFriend.php"><br />	<paramname="firs...
packagecom.molamil.hpci.command {<br />importcom.molamil.hpci.events.HPCIErrorEvent;<br />importcom.molamil.hpci.events.Hp...
Usa SWFAddress<br />publicclassControllerextendsApp {<br />privatevarswfAddressController:SWFAddressController;<br />publi...
Implementa <br />el tracking<br />publicclassControllerextendsApp {<br />privatevar _gaController:GAController;<br />priva...
Busca errores y elimina errores<br />revisando todo lo que sucede <br />gracias a los niveles del Logger:Logger.LEVEL_WARN...
Usa diferentes managers<br />creando diferentes animaciones <br />de transición entre paginas y blocks.<br />
Crea animaciones que añadan valor <br />al contenido<br />contando con la colaboración de alguien que no haga código. Es m...
Divide el trabajo<br />en equipo acorde con lo que cada <br />uno hace mejor <br />y mas rápido<br />
ACTO + Desarrollador = <br />Reusar, organizar, hacer cambios sin compilar, conectar con diferentes tecnologías… <br />
ACTO + Diseñador = <br />Hacer skins, cambiar todos los botones <br />o tipografías en un solo lugar… <br />
ACTO + Animador = <br />Concentrarse en los detalles chulos, crear transiciones, efectos para rollovers… <br />
Upcoming SlideShare
Loading in …5
×

Presentación de ACTO Framework parte II

1,496 views
1,432 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,496
On SlideShare
0
From Embeds
0
Number of Embeds
534
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Presentación de ACTO Framework parte II

  1. 1.
  2. 2. Ramiro Espada<br />Co-Fundador de Molamil. <br />Diseñador/programador interactivo, autodidacta. Más de 10 años de experiencia en agencias en Argentina, España y Dinamarca.<br />
  3. 3. Nuestra experiencia usando ACTO <br />en la creación de sites interactivos,<br />campañas.<br />
  4. 4. Flash antes…<br /><ul><li>Muchas animaciones.
  5. 5. 1 o 2 desarrolladores por proyecto.
  6. 6. Poco uso de eventos (AS2)
  7. 7. El efecto WOW valía más que todo.
  8. 8. Contenidos dinámico? Sí, con vars en un .txt</li></li></ul><li>Flash ahora…<br /><ul><li>Muchas animaciones con código.
  9. 9. Varios desarrolladores por proyecto.
  10. 10. Frameworks son populares, gráficos en 3D, sistemas de partículas, augumentedreallityetc…
  11. 11. Todo es multilingüe, dinámico, escalable, basado en algún CMS…</li></li></ul><li>La arquitectura <br />no es una buena practica, es la clave para ejecutar <br />el proyecto sin sorpresas.<br />
  12. 12. Un salto revelador…<br />
  13. 13. Mejorar nuestro proceso de trabajo<br />estructura de carpetas, listas de tareas en googledocs (TODOs)…<br />
  14. 14. Consolidar un entorno común<br />usando todos las mismas herramientas para una instalación y comunicación <br />más rápida, SVN, FDT, ant…<br />
  15. 15. AbstractView<br />publicclassTusClassesextendsAbstractView {<br />publicoverridefunctioninit():void{}<br />publicoverridefunctiondraw():void {}<br />publicoverridefunctiondestroy():void {}<br />}<br />
  16. 16. Empieza<br />definiendo <br />la estructura <br />del site en <br />acto.xml<br />
  17. 17. Haz una maqueta <br />interactiva del site<br />en la que puedas navegar por todas <br />las páginas.<br />
  18. 18. Discrimina el contenido en paginas y blocks,<br />si solo una instancia del contenido <br />es visible a la vez que otro contenido similar, es una pagina, si está presente en mas de una ocasión<br />es un block.<br />
  19. 19. Crea containers,<br />piensa en capas, adapta los containers de acuerdo al tamaño del Stage para optimizar el rendimiento. <br />
  20. 20. Incluye otros frameworks en la carpeta lib<br />Tweener, Away3D, Papervision, analytics, SWFAddress, etc… <br />
  21. 21. Crea una librería <br />de gráficos para tuProyecto.swc<br />incluyendo solo gráficos, animaciones, tipografías, sonidos, todo sin referencias a clases externas, para evitar sorpresas con referencias recursivas.<br />
  22. 22. Construye los diferentes “views”<br />incluyendo en tus clases los elementos visuales en tuLibreria.swc<br />publicclassFrontpageextendsAbstractView {<br />privatevarlibreria:frontpage; // en tuLiberia.swc<br />publicoverridefunctioninit():void{<br />libreria = newfrontpage();<br />librería.titular.text = “HOLA”;<br />}<br />}<br />
  23. 23. Crea componentes<br />discriminando aquellos objetos <br />que van a ser utilizados más de <br />una vez en diferentes páginas <br />o blocks: botones, contenedores <br />de imágenes, preloaders, reproductores <br />de video, scrollbars, etc…<br />
  24. 24. Usa destroy() recursivamente<br />publicclassFrontpageextendsAbstractView {<br />privatevarbutton:SimpleButton; <br />publicoverridefunctioninit():void{<br />button = newSimpleButton();<br />addChild(button);<br />button.label = “Siguiente Pagina”;<br />button.init();<br />}<br />publicoverridefunctiondraw():void {}<br />publicoverridefunctiondestroy():void {<br />button.destroy();<br />}<br />}<br />
  25. 25. Pon el contenido <br />en acto.xml<br /><pageid="frontpage" extends="abstractPage” target=“Frontpage"><br /> <propname=”texts”> <br /> <propname=”titular" value=”HOLA ACTO!"/> <br /> </prop> <br /></page><br />publicclassFrontpageextendsAbstractView {<br />privatevartexts:Object;<br />publicoverridefunctioninit():void{<br />libreria = newfrontpage();<br />libreria.titular.text = texts.titular;<br />}<br />}<br />
  26. 26. En acto.XML<br /><includetarget=”textos.xml"/><br /><pageid="frontpage" extends="abstractPage” target=“Frontpage"><br /> <propname="texts" value="{texts.frontpage}"/> <br /></page><br />En textos.XML<br /><?xmlversion="1.0" encoding="UTF-8" ?><br /><acto> <br /> <propname="texts"> <br /> <propname="frontpage"><br /> <propname="TITULAR"><![CDATA[Breakthepattern by playing]]></prop><br /> </prop><br /> </prop><br /></acto><br />
  27. 27. Usa correctamente eventos y handlers<br />describiendo siempre lo que acaba de suceder, nunca lo que debería suceder después.<br />
  28. 28. Primero crea todo <br />y luego refínalo,<br />valen más 25 páginas “más o menos” hechas, que 2 páginas perfectas y <br />23 sin hacer. <br />
  29. 29. Simula el resultado del backend<br />compartiendo con el equipo de backend<br />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.<br />
  30. 30. Crea comandos<br /><commandid="sendToFriend" type=“SendToFriendCommand" target=“sendToFriend.php"><br /> <paramname="firstName" required="true"/><br /> <paramname="lastName" required="true"/><br /> <paramname="companyName" required="true"/><br /> <paramname="email" required="true” validator="EmailValidator"/><br /><handlertype="sendToFriendFormSubmitted"/><br /></command><br />
  31. 31. packagecom.molamil.hpci.command {<br />importcom.molamil.hpci.events.HPCIErrorEvent;<br />importcom.molamil.hpci.events.HpciEvent;<br />importcom.molamil.hpci.Controller;<br />importflash.net.URLVariables;<br />importorg.molamil.acto.commands.RemoteCommand;<br />publicclassSendToFriendCommandextendsRemoteCommand {<br />protectedoverridefunctionparseResponse(data:*):* {<br />varparams:URLVariables = newURLVariables(data);<br />if(params.status == "1”) {<br />dispatchEvent(newHpciEvent(HpciEvent.SEND_TO_FRIEND_COMPLETE));<br />returntrue;<br /> }<br />dispatchEvent(newHPCIErrorEvent(HPCIErrorEvent.SEND_TO_FRIEND_ERROR, params.error));<br />returnfalse;<br /> }<br /> }<br />}<br />
  32. 32. Usa SWFAddress<br />publicclassControllerextendsApp {<br />privatevarswfAddressController:SWFAddressController;<br />publicfunctioninit():void {<br />swfAddressController = newSWFAddressController(this);<br />swfAddressController.init();<br />}<br />}<br />
  33. 33. Implementa <br />el tracking<br />publicclassControllerextendsApp {<br />privatevar _gaController:GAController;<br />privatefunctionconfCompleteHandle(event:ConfLoadEvent):void { <br />_gaController = newGAController(this);<br />_gaController.account = props.googleAnalyticsAccount;<br />_gaController.visualDebug = props.isTrackingDebug;<br />_gaController.mode = props.trackingMode;<br />_gaController.init();<br />}<br />}<br />
  34. 34. Busca errores y elimina errores<br />revisando todo lo que sucede <br />gracias a los niveles del Logger:Logger.LEVEL_WARNING;<br />Logger.LEVEL_INFO;<br />Logger.LEVEL_SEVERE;<br />Logger.LEVEL_DEBUG; <br />
  35. 35. Usa diferentes managers<br />creando diferentes animaciones <br />de transición entre paginas y blocks.<br />
  36. 36. Crea animaciones que añadan valor <br />al contenido<br />contando 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.<br />
  37. 37. Divide el trabajo<br />en equipo acorde con lo que cada <br />uno hace mejor <br />y mas rápido<br />
  38. 38. ACTO + Desarrollador = <br />Reusar, organizar, hacer cambios sin compilar, conectar con diferentes tecnologías… <br />
  39. 39. ACTO + Diseñador = <br />Hacer skins, cambiar todos los botones <br />o tipografías en un solo lugar… <br />
  40. 40. ACTO + Animador = <br />Concentrarse en los detalles chulos, crear transiciones, efectos para rollovers… <br />
  41. 41. ACTO + Copywriter = <br />Cambiar el texto <br />en un documento separado de la configuración, donde solo hay texto… <br />
  42. 42. ACTO + Jefe de proyecto= <br />Tener una maqueta <br />lo antes posible, hacer cambios sin perder la vida, minimizar tiempo de integración… <br />
  43. 43. ACTO hace <br />nuestro negocio mas competitivo,<br />trabajando mas rápido conseguimos <br />más tiempo para concentrarnos en los objetivos principales del site, haciendo la experiencia mas consistente y completa.<br />
  44. 44. Tienes alguna <br />duda, o quieres compartir tu experiencia ?<br />
  45. 45. Hablamos<br />MOLAMIL<br />Vestergade 4<br />1456 Copenhague<br />+45 6019 6005<br />molamil@molamil.com<br />www.molamil.com<br />

×