Blog de Daniel Zegarra Rotating Header Image

Adobe

Nuevo marcador, experimentos flash

wonderfl.net es un sitio que te compila codigo flash y te entrega el resultado en el browser. Asi es, escribes tu codigo en el cuadro de texto, el browser envia la cadena ingresada y devuelve el swf compilado.

Pero eso no es su principal gracia, es la biblioteca de codigo subida por los mimos usuarios.

Todos los dias hay nuevas entradas y muchas de ellas son experimentos geniales. El codigo fuente de estos ejemplos esta siempre accesible (incluso sin necesidad de registro previo) y el sitio te da la posibilidad de hacer un fork al codigo (modificarlo a tu medida) y ver inmediatamente como afectan tus cambios a la apliacion.

La direccion es esta: wonderfl.net. Es un sitio  obligado entre los marcadores de cualquiera que trabaje o incluso guste de Adobe Flash.

Este (click aqui) es uno de mis favoritos. Se trata de unas hormigas que salen de su madrigera y empiezan a merodear en busca de comida. Dando clics sobre el terreno vas dejando comida y las hormigas al sentir la comuda se agrupan, despedazan el alimento y lo llevan a caa en pequenar partes. Lo genial es que el comportamiento y movimiento de las horminas es casi perfecto. Y lo segundo genial es que, a pesar que entienda el codigo no entiendo la logica.

Trabajar con PHP y Flex en el mismo Framework

Usar PDT 2.0 y Flash Builder 4.1 en el mismo framework es algo muy simple de lograr ya que ambos son plugins de Eclipse.

Los pasos para instalar PDT como plugin en una instalación previa de Eclipse se pueden encontrar aquí.

Advertencia: Flash Builder esta basado sobre la versión 3.4 de Eclipse (alias Ganymede), por lo tanto, se debe usar la versión 2.0 de PDT preparada para esta versión.

Segun la wiki de eclipse, estos son los pasos a seguir:

  1. Ir al menu Help > Software Updates… > Available Software > Manage Sites…
  2. Usando el boton Add, agregar la direccion http://download.eclipse.org/technology/dltk/updates-dev/1.0M4-PDT-2.0/
  3. Nuevamente, agrega la direccion http://download.eclipse.org/tools/pdt/updates/2.0/
  4. Presiona el boton Manage Sites y habilita el sitio de actualización de Ganymede (http://download.eclipse.org/releases/ganymede/) si es que no se encuentra habilitado. Los sitios habilitados son los marcados con el check.

    Activando el sitio de actualización de Ganymede

    Activando el sitio de actualización de Ganymede

  5. Ahora debes seleccionar que paquetes vas a instalar. Selecciona los siguientes paquetes:
    En DLTK / Dynamic Languages Toolkit / Seleccionar Dynamic Languages Toolkit - Core Frameworks

    Seleccionando DLTK Core
    Seleccionando DLTK Core


  6. En PDT Update Site / PDT SDK 2.0.1 / Seleccionar PDT Runtine Feature
    Seleccionando PDT

    Seleccionando PDT

    Nota: En las imagenes no tengo seleccionado el paquete descrito porque yo ya lo tengo instalado.

  7. Hecho esto, dale un clic en el botón Install.
  8. Acepta la condiciones y espera a que termine la instalación. Cuando te pida reiniciar Eclipse lo haces.

Suerte en tu proyecto!

    Nace Kopernik, un sistema académico

    Logo de Kopernik

    Kopernik es el nombre clave del proyecto personal al que he dedicado mi tiempo estos ultimos 4 meses. Se trata de un sistema academico online desarrollado usando Flex, PHP (Zend Framework) y MySQL para su uso en instituciones educativas.

    Logo de Kopernik

    Logo de Kopernik. La idea era que el sistema sea usado por escolares y por lo tanto, no debia ser tan serio.

    Aprovechando la experiencia que adquiri trabajando y estudiando en universidades decidi crear desde cero un sistema que se ajustara a los requerimientos especiales que cada institucion pudiera tener. Como recien estaba empezando pense que mejor seria comenzar con modulos para colegios pero… resulta que he olvide como funcionan!

    Cuando estaba en el colegio no pensaba en procesos y en maneras de como mejorarlos como lo hago ahora. Por eso es que los modulos que ya he creado almacenan datos como el valor en creditos de cada asignatura o que permiten a un alumno matricularse en asignaturas distintas que el resto de sus companeros. De hecho el proceso que los administradores deben realizar para matricular de un alumno esta pensado usando los requerimientos universitarios o de institutos.

    En los colegios todos los alumnos llevan lo mismo. Solo hay dos opciones:

    • No te matriculas un año o…
    • Estas matriculado y llevas todas las asignaturas de tu año (con algunas excepciones como no asistir al curso de religion por solicitud de los padres).

    Es algo en lo que hay que trabajar.

    Por el momento me quedan algunos modulos importantes por desarrollar, como el control de evaluaciones, asistencias y materiales de clase.

    A continuacion explico algunos detalles del software y al final puedes encontrar un enlace para que lo puedas ver en accion.

    Caracteristicas generales

    • Es modular, de tal forma que sea facil reutilizar los modulos comunes y adecuarlos a lo que necesite.
    • Permite el trabajo colaborativo (tiempo real).
    • Solo hace uso del puerto 80. No es necesario habilitar la salida puertos adicionales en una red controlada.
    • El cliente solo necesita tener Adobe Flash instalado.
    • No requiere de licencias adicionales.
    • Es multiplataforma. Corre en Windows, Mac, Linux y cualquier otro sistema operativo que tenga soporte para Adobe Flash (talvez Android?)
    • Es multitarea. Las aplicaciones y modulos son cargados dentro de contenedores visibles como ventanas. Por lo tanto, no es necesario salir de un modulo para entrar a otro. Puedes tener varios modulos abiertos al mismo tiempo compartiendo el escritorio visible o minimizar algunos de ellos para usarlos luego.
    • Al instalarlo en un servidor web con un IP publico es accesible desde cualquier parte del mundo.
    • Control de acceso, a modulos y acciones, por grupos de usuarios. Se define que grupos tienen acceso a que modulos y las operaciones que realizan estos.
    • El sistema cuenta con algunas herramientas como el administrador de tareas (clic secundario sobre el fondo) y un explorador de directorios (del servidor).
    Tres aplicaciones abiertas: el explorador de alumnos, el explorador de archivos y el administrador de tareas

    Tres aplicaciones abiertas: el explorador de alumnos, el explorador de archivos y el administrador de tareas

    Tecnologias usadas

    • Flex 4: Empece el proyecto con la version 3 pero las nuevas caracteristicas (en especial la capacidad de trabajar con archivos localmente y el skining) resultaron muy tentadoras y tuve que hacer la migracion ya casi a mitad del proyecto (y acepto que no fue una decision muy inteligente. Me retraso todo el calendario pero espero haya valido la pena).
    • Zend Framework: Elegi este framework por la empresa que hay detras (Zend creadora de PHP) y por que ya me encuentro familiarizado con el. Ademas podia usar el paquete Zend_Amf para conectar Flex con el servidor. Tuve que migrar desde AMFPHP por lo que perdi el explorador de servicios y el control de acceso en cada clase. Realmente fue una migracion dura porque las clases del sistema (no academicas) ya estaban empezadas y funcionaban perfecto con AMFPHP. La gran ventaja de usar Zend_Amf es que tienes a tu disposicion todo el framework de Zend y ademas es el unico soporte para AMF que tiene la venia de Adobe sin ser desarrollado por Adobe (y la version actual de AMFPHP se encontraba abandonada en una version beta).
    • PHP: Como es obvio, por ser un lenguaje fantastico y porque casi todo servidor Apache lo tiene instalado.
    • MySQL: Necesitaba una base de datos transaccional y confiable. Que mejor que MySQL usada en la mayoria de servicios de hosting.

    Requisitos

    • Del lado del cliente
      • Flash Player 10.0.0 o una version mayor.
    • Del lado del servidor
      • PHP 5.2
      • Apache
      • MySQL

    Acceso a la demo

    Antes de ingresar por favor, lee las siguientes instrucciones:

    • Los datos de acceso se encuentran pre-escritos en los campos de texto, solo es cuestion de logearse.
    • El usuario de prueba pertenece al grupo de administradores, por lo que tendras acceso sin restriccion sobre los modulos y acciones que puedan estos realizar. Ten cuidado de eliminar aplicaciones, volver a registrarlas te puede resultar complicado si no sabes donde se encuentran almacenadas.
    • La falta de acentos se debe a que uso en teclado en ingles. Lo corregire muy pronto. Las fallas ortograficas se deben a mi falta de atencion a las clases de lengua (junto con la eficiencia del corrector ortografico de Word). Cuando tenga tiempo aplicare las correcciones necesarias.
    • La primera vez que cada aplicacion es solicitada puede demorarse unos segundos en cargarse (dependiendo de tu velocidad de salida a Internet). La aplicacion queda almacenada en la cache de tu navegador y es cargada de alli en las solicitudes posteriores.
    • Y por ultimo, te recuerdo que esta es una version en desarrollo y por ello puede tener errores. Si encuentras alguno, por favor ayudame a corregirlo comentandolo en este post. Gracias.

    Eso es todo. La direccion de acceso es la siguiente: http://kopernik.danielzegarra.net/. Espero tus comentarios.

    Usando Flex 4 SDK sobre Flex Builder 3

    Me descargue el trial de Flash Builder y llevo algunos dias trabajando con el, aprovechando las mejoras. Pero cuando el tiempo de prueba se acabe tendre que volver a Flex Builder y necesito poder continuar con los proyectos que ya tenia creados.

    La gran versatilidad es un punto a favor de Eclipse, el IDE elegido por Adobe para Flex Builder y Flash Builder. Eclipse te permite tener varios compiladores y elegir con cual compilar cada proyecto.

    Instrucciones para instalar Flex SDK4 en Flex Builder 3

    1. Descargar el .zip con el SDK 4 de Flex desde Adobe Open Source.

      Contenido del SDK de Flex 4

      Contenido del SDK de Flex 4

    2. Crea una carpeta con el nombre 4.0 en el directorio sdks ubicado en la raiz de tu instalacion de Adobe Flex Builder (usualmente C:\[Program Files]\Adobe\Flex Builder 3). Asi como la siguiente imagen:

      Los SDKs de Flex

      Los SDKs de Flex

    3. Extraer todo el contenido del .zip en el directorio que acabas de crear.
    4. Abres Flex Builder y te diriges al menu Window > Preferences > Flex > Installed Flex SDKs.

      SDKs instalados

      SDKs instalados

    5. Le das un clic al boton Add, para registrar un nuevo SDK, y completas el formulario.

      Registrando el nuevo SDK

      Registrando el nuevo SDK

    Con esto ya puedes compilar con el nuevo SDK.

    La nueva version de Flex trae algunos cambios en la plantilla mxml y si nos vamos a poner a compilar un proyecto ya existente tendremos errores. Entonces tenemos dos opciones: actualizar nuestro codigo para compilar sin problemas o activar la compatibilidad con Flex 3 y dejar nuestro codigo tal como esta. Si ya tienes un proyecto iniciado con Flex 3 te recomiento tan solo activar el modo de compatibilidad y aprovechar los nuevos metodos y clases que incluye este nuevo SDK sin tener que actualizar codigo.

    Habilitando compatibilidad con Flex 3

    1. Abre un proyecto y ve a las propiedades del mismo (clic secundario > Properties) y elige la ficha Flex Compiler (ve el screenshot).

      Configurando el compilador en cada proyecto

      Configurando el compilador en cada proyecto

    2. Elije como SDK el que ultimo que has registrado y pega la siguiente linea como argumentos adicionales para el compilador:-compatibility-version=3.5 -theme=${flexlib}/themes/Halo/halo.swc

    Veamos que hace cada argumento:

    -compatibility-version=3.5

    Activa la compatibilidad con la version 3.5 del SDK de Flex. Si quieres puedes reemplaza el 3.5 por 3.3 o simplemente 3. La diferencia (si es que hay alguna) sera insignificante.

    -theme=${flexlib}/themes/Halo/halo.swc

    Define a Halo como tema por defecto. Flex 4 usa Spark como tema predeterminado que en su forma silvestre es mas feo que el carajo. Me recuerda a las aplicaciones java de JCreator. Si deseas mantener el aspecto de tus componentes tal y como eran antes de usar este nuevo SDK entonces manten este argumento en tu proyecto.

    Listo, eso es todo. Ya tienes el nuevo Flex 4.

    Instalar Blueprint desde Adobe Labs

    Blueprint example

    Blueprint es un plugin para Flex Builder 3 y Flash Builder 4 que te muestra ejemplos de la web relacionados al fragmento de codigo con el que trabajas.

    Blueprint example

    Blueprint example

    Usualmente cuando tienes dudas de como conseguir el resultado esperado (o te da flojera hacerlo tu mismo)  buscas en la web por ejemplos. Esto simplemente te ahorra el trabajo. Tan solo marca el nombre de la clase y presiona Alt+B (Ctrl+B en Mac) para buscar ejemplos relacionados. Puedes mejorar el resultado agregando palabras clave al campo de busqueda. La verdad, es mas comodo que usar el browser.

    Para instalarlo dirigete a labs.adobe.com/wiki/index.php/Blueprint:Installation_Instructions y sigue los pasos. Las instrucciones usan screenshots de Flex Builder 3 pero la manera de hacerlo en Flash Builder 4 no es muy distinta (ambos son eclipse).

    Visitar la pagina de Blueprint en Adobe Labs