Presentación de ACTO Framework parte II
Upcoming SlideShare
Loading in...5
×
 

Presentación de ACTO Framework parte II

on

  • 1,508 views

 

Statistics

Views

Total Views
1,508
Views on SlideShare
996
Embed Views
512

Actions

Likes
0
Downloads
1
Comments
0

3 Embeds 512

http://www.adwe.es 493
http://www.dinamiclab.com 18
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Presentación de ACTO Framework parte II Presentación de ACTO Framework parte II Presentation Transcript

    • Ramiro Espada
      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.
    • Nuestra experiencia usando ACTO
      en la creación de sites interactivos,
      campañas.
    • Flash antes…
      • 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 ahora…
      • 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…
    • La arquitectura
      no es una buena practica, es la clave para ejecutar
      el proyecto sin sorpresas.
    • Un salto revelador…
    • Mejorar nuestro proceso de trabajo
      estructura de carpetas, listas de tareas en googledocs (TODOs)…
    • Consolidar un entorno común
      usando todos las mismas herramientas para una instalación y comunicación
      más rápida, SVN, FDT, ant…
    • AbstractView
      publicclassTusClassesextendsAbstractView {
      publicoverridefunctioninit():void{}
      publicoverridefunctiondraw():void {}
      publicoverridefunctiondestroy():void {}
      }
    • Empieza
      definiendo
      la estructura
      del site en
      acto.xml
    • Haz una maqueta
      interactiva del site
      en la que puedas navegar por todas
      las páginas.
    • 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ón
      es un block.
    • Crea containers,
      piensa en capas, adapta los containers de acuerdo al tamaño del Stage para optimizar el rendimiento.
    • Incluye otros frameworks en la carpeta lib
      Tweener, Away3D, Papervision, analytics, SWFAddress, etc…
    • Crea una librería
      de gráficos para tuProyecto.swc
      incluyendo solo gráficos, animaciones, tipografías, sonidos, todo sin referencias a clases externas, para evitar sorpresas con referencias recursivas.
    • Construye los diferentes “views”
      incluyendo en tus clases los elementos visuales en tuLibreria.swc
      publicclassFrontpageextendsAbstractView {
      privatevarlibreria:frontpage; // en tuLiberia.swc
      publicoverridefunctioninit():void{
      libreria = newfrontpage();
      librería.titular.text = “HOLA”;
      }
      }
    • Crea componentes
      discriminando 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…
    • Usa destroy() recursivamente
      publicclassFrontpageextendsAbstractView {
      privatevarbutton:SimpleButton;
      publicoverridefunctioninit():void{
      button = newSimpleButton();
      addChild(button);
      button.label = “Siguiente Pagina”;
      button.init();
      }
      publicoverridefunctiondraw():void {}
      publicoverridefunctiondestroy():void {
      button.destroy();
      }
      }
    • Pon el contenido
      en acto.xml
      <pageid="frontpage" extends="abstractPage” target=“Frontpage">
      <propname=”texts”>
      <propname=”titular" value=”HOLA ACTO!"/>
      </prop>
      </page>
      publicclassFrontpageextendsAbstractView {
      privatevartexts:Object;
      publicoverridefunctioninit():void{
      libreria = newfrontpage();
      libreria.titular.text = texts.titular;
      }
      }
    • En acto.XML
      <includetarget=”textos.xml"/>
      <pageid="frontpage" extends="abstractPage” target=“Frontpage">
      <propname="texts" value="{texts.frontpage}"/>
      </page>
      En textos.XML
      <?xmlversion="1.0" encoding="UTF-8" ?>
      <acto>
      <propname="texts">
      <propname="frontpage">
      <propname="TITULAR"><![CDATA[Breakthepattern by playing]]></prop>
      </prop>
      </prop>
      </acto>
    • Usa correctamente eventos y handlers
      describiendo siempre lo que acaba de suceder, nunca lo que debería suceder después.
    • 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.
    • 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.
    • Crea comandos
      <commandid="sendToFriend" type=“SendToFriendCommand" target=“sendToFriend.php">
      <paramname="firstName" required="true"/>
      <paramname="lastName" required="true"/>
      <paramname="companyName" required="true"/>
      <paramname="email" required="true” validator="EmailValidator"/>
      <handlertype="sendToFriendFormSubmitted"/>
      </command>
    • packagecom.molamil.hpci.command {
      importcom.molamil.hpci.events.HPCIErrorEvent;
      importcom.molamil.hpci.events.HpciEvent;
      importcom.molamil.hpci.Controller;
      importflash.net.URLVariables;
      importorg.molamil.acto.commands.RemoteCommand;
      publicclassSendToFriendCommandextendsRemoteCommand {
      protectedoverridefunctionparseResponse(data:*):* {
      varparams:URLVariables = newURLVariables(data);
      if(params.status == "1”) {
      dispatchEvent(newHpciEvent(HpciEvent.SEND_TO_FRIEND_COMPLETE));
      returntrue;
      }
      dispatchEvent(newHPCIErrorEvent(HPCIErrorEvent.SEND_TO_FRIEND_ERROR, params.error));
      returnfalse;
      }
      }
      }
    • Usa SWFAddress
      publicclassControllerextendsApp {
      privatevarswfAddressController:SWFAddressController;
      publicfunctioninit():void {
      swfAddressController = newSWFAddressController(this);
      swfAddressController.init();
      }
      }
    • Implementa
      el tracking
      publicclassControllerextendsApp {
      privatevar _gaController:GAController;
      privatefunctionconfCompleteHandle(event:ConfLoadEvent):void {
      _gaController = newGAController(this);
      _gaController.account = props.googleAnalyticsAccount;
      _gaController.visualDebug = props.isTrackingDebug;
      _gaController.mode = props.trackingMode;
      _gaController.init();
      }
      }
    • Busca errores y elimina errores
      revisando todo lo que sucede
      gracias a los niveles del Logger:Logger.LEVEL_WARNING;
      Logger.LEVEL_INFO;
      Logger.LEVEL_SEVERE;
      Logger.LEVEL_DEBUG;
    • Usa diferentes managers
      creando diferentes animaciones
      de transición entre paginas y blocks.
    • Crea animaciones que añadan valor
      al contenido
      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.
    • Divide el trabajo
      en equipo acorde con lo que cada
      uno hace mejor
      y mas rápido
    • ACTO + Desarrollador =
      Reusar, organizar, hacer cambios sin compilar, conectar con diferentes tecnologías…
    • ACTO + Diseñador =
      Hacer skins, cambiar todos los botones
      o tipografías en un solo lugar…
    • ACTO + Animador =
      Concentrarse en los detalles chulos, crear transiciones, efectos para rollovers…
    • ACTO + Copywriter =
      Cambiar el texto
      en un documento separado de la configuración, donde solo hay texto…
    • ACTO + Jefe de proyecto=
      Tener una maqueta
      lo antes posible, hacer cambios sin perder la vida, minimizar tiempo de integración…
    • 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.
    • Tienes alguna
      duda, o quieres compartir tu experiencia ?
    • Hablamos
      MOLAMIL
      Vestergade 4
      1456 Copenhague
      +45 6019 6005
      molamil@molamil.com
      www.molamil.com