memeplastika

plastikaweb.com

Durante los meses de noviembre de 2008 a marzo de 2009 estuve diseñando lo que sería la nueva www.plastikaweb.com.

Lo bueno, bonito ,que no barato, de hacer tu propia web es que no tienes que ajustarte a un “timming” a no ser que quieras auto-flagelarte, y eso significa programar como quieres, recrearte en los detalles y orientado totalmente a OOP desde el principio hasta el final.

Lo satisfactorio de todo ello es que ahora tengo una librería bastante amplia de clases en AS3 para las tareas más habituales del mundo real, bueno, todo lo real que se puede considerar este mundo, desde crear un campo de texto con label, con validación, etc hasta implementar deep-linking en toda la aplicación.

Antes de explicar como esta estructurada la aplicación, voy a enumerar lo que he implementado y que quería conseguir con ello. El como ya lo iré desgranando en sucesivas entradas.

Lo que hay implementado en www.plastikaweb.com es lo que sigue:

• Deep-linking en todo el sitio. Es decir la navegación “adelante-y-atrás” del navegador funciona a medida que navegas por las diferentes secciones y cambios de idioma en el sitio. Del  mismo modo el historial del navegador funciona con cualquier sección que se quiera recordar. Para ello he utilizado SWFAddress.
• Arbol de navegación de todo el sitio existente en XHTML válido. Compruébalo.
  La base de los contenidos y la estructura del sitio web es una estructura HTML real y totalmente funcional.
  Si alguien navega con el javascript deshabilitado verá los contenidos con un CSS específico, más o menos afortunado y evidentemente mejorable (estoy en ello xD).  Esto significa dos cosas principalmente:
  • El mantenimiento de los contenidos del sitio se realiza actualizando el XHTML, el PHP o la base de datos MySQL, es totalmente externo a Flash.
  • Cada apartado y todos los contenidos del sitio son visible para Google y los otros buscadores web. Compruébalo.
• Gráficos cargados externamente, ya sea desde librerias en Flash o desde el propio HTML.
• Fuentes embedidas y cargadas en aplicación Flash externamente, desde swf, y estilos de los campos de texto definidos desde CSS externo.
• Posición de los elementos en Flash definidos para cada sección desde XML externo, así como las transiciones en la carga de las mismas, el formato de texto si es necesario, las dimensiones del escenario, la posición del mismo, el framerate, el formato de los diferentes estados del menú principal, la posición de los elementos en caso de redimensión del navegador, el tipo de campos en el formulario, los caracteres admitidos, la validación de cada campo, la obligatoriedad de cada uno, la tabulación…
  Ya iré explicando todo esto poco a poco.
• Tracking del sitio con Google Analytics. Ver el artículo Flash + Google Analytics que explica como se implementa en ActionScript 3.
• En cuanto al código AS3 y como ya he comentado anteriormente, he intentado actuar los mas “OOP-oriented” posible, optimizar el código al máximo y hacer la experiencia lo más liviana, rápida y robusta posible.
  He utilizado algunas  librerías externas entre ellas:
  • TweenLite para todas las transiciones.
  • Varios componentes de Flash para elementos de formulario (en este caso el ComboBox).
  • gaforflash, para implementar Google Analytics.

www.plastikaweb.com

En una segunda entrega iré explicando en detalle el cómo he implementado todo ello.

Del mismo modo espero vuestros comentarios, aportaciones para mejorar el concepto general y el sistema, a fin de que sea lo más fácil de implementar en nuevos sitios y tenga el mantenimiento más rápido y ágil posible.

Hasta entonces saludos!