ElKuNi - Freelance

Memotest HTML5, CSS3 y Jquery (Beta)

2011-05-18T13:04:00.000-07:00

La semana pasada buscando una libreria para hacer animaciones en HTML5, encontre algunos efectos sencillos hechos con Jquery y decidi probarlos en una versión del memotest.

View in action >>

Use algunos pluggins para Jquery, webfonts, algunos estilos CSS3 y el tag audio. El resultado me gusto, aunque el código final no es de mi total agrado, me complique con el "live" y el "die" para capturar los eventos click, ya que tenia que manejar "a mano" los estados mientras se estaba animando alguna carta.

Las librerias adicionales Jquery que use son:

jquery.tmpl.min.js: para parsear plantillas HTML
jQueryPreload.js: para la precarga de las imágenes
jQueryRotate.2.1.js: para el efecto de rotación al hacer click en una carta
jquery.shuffle.js: para randomizar los valores
jquery.easing.1.3.js: para la animación de algunos elementos

Compatibilidad
Mi idea era hacer un juego con algunos efectos y sonidos en HTML, la compatibilidad la voy a agregar en futuras versiones. Pero por el momento puedo decir que:

Funciona sin errores en Firefox, Chrome y Safari para windows.
No funciona en IE 7, IE8 y Flock
En Navigator y Dolphin para Android funciona bien , aunque no reproduce los sonidos
En Opera Mini para Android se ve feo y no funciona del todo

Para tener en cuenta

Seria más facil manejar los estados de las cartas si las transfromo en objetos (para la próxima)
Haria falta un precargador para los archivos de audio
Agregar otros formatos de audio para compatibilizar con algunos browser
Tendria que hacer algunos ajustes para dispositivos moviles; lo probe en mi teléfono y funciono bastante bien, pero el scoreBoard deberia ser una barra horizontal en ese caso, ya que se desperdicia mucho espacio.

Ajustando layout para dispositivos moviles

2011-05-17T08:16:00.000-07:00

Charlando con un diseñador amigo sobre optimización de sitios para moviles y revisando algunas páginas y blogs en versiones estandard y optimizadas para moviles, decidi hacer algunos ajustes (mínimos) al home de mi sitio.

Si bien tenia el código para la detección de los dispositivos moviles en el htaccess funcionando, opte por una función PHP ya que por el momento solo me intesaba agregar un css y un meta. Así los pasos que hice fueron:

*Detectar el agente
*Ajustar los estilos para que halla un sola columna, sin mucho desplazamiento horizontal
*Agregar el meta "viewport" con el ancho por defecto
*Probarlo en distintos navegadores, tanto para Windows (Firefox, Chrome, Safari y IE) como para Moviles (Opera Mini en Android, Navigator en Android, Dolphin en Android y Safari para Windows configurado como mobile)

Sitio original

Sitio para moviles

URLs varias:

Juego Mezcla Animales en AS3 y Flash Builder (prototipo)

2011-05-09T08:40:00.000-07:00

Mientras trabajo sobre un proyecto propio de un Painter en As3 y Flash builder, les dejo un prototipo de un juego de "Mezcla de Animales" hecho en As3 y Flahs Builder.

View in action >>

Revisando algunos códigos de tutoriales y ejemplos, encontre uno que presentaba un efecto de "Sliced Cube" en As3 con el uso de la libreria Papervision http://pv3d.org/2009/04/09/sliced-cube/, busque unas imágenes y cambie un poco ese código para que tenga más interactividad, así agregue 2 botones en cada pieza que permiten manejar el desplazamiento de las mismas en forma individual y en ambos sentidos de rotación.

package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;

import gs.TweenMax;
import gs.easing.Quad;

import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.view.BasicView;

[SWF(width="900", height="494", backgroundColor="0x000000", frameRate="31")]
public class SlicedCubeAnimals extends BasicView
{
[Embed(source="/assets/11.jpg")]
private var rinoAsset:Class;


[Embed(source="/assets/12.jpg")]
private var lionAsset:Class;

[Embed(source="/assets/14.jpg")]
private var elephantAsset:Class;

[Embed(source="/assets/15.jpg")]
private var zebraAsset:Class;

private var mouseDownX:Number = 0;
private var targetRotation:Array = [0,0,0,0];

private var NUM_SLICES:int = 3;

private var cubes:Array = [];

public function SlicedCubeAnimals()
{
super(900, 494);

opaqueBackground = 0x000000;
camera.focus = 100;
camera.zoom = 10;
camera.ortho = false;

for(var i:int = 0; i < NUM_SLICES; i++)
{
 var materialsList:MaterialsList = new MaterialsList();
 var sliceWidth:Number = 900 / NUM_SLICES;
 var sliceX:Number = sliceWidth * i;
  
 materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(rinoAsset, sliceX, sliceWidth, true), "front");
 materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(lionAsset, sliceX, sliceWidth), "back");
 materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(elephantAsset, sliceX, sliceWidth), "top");
 materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(zebraAsset, sliceX, sliceWidth, true), "bottom");
 materialsList.addMaterial(new ColorMaterial(0x000000), "right");
 materialsList.addMaterial(new ColorMaterial(0x000000), "left");
  
 var cube:Cube = new Cube(materialsList, sliceWidth, 494, 494);
 cube.x = sliceX - 450 + sliceWidth / 2; 
 cube.z = 494/2;

 scene.addChild(cube);

 cubes.push(cube);    
}

startRendering();

for(i= 0; i < NUM_SLICES*2; i++)
{
 var btn:MovieClip = new MovieClip();
 sliceWidth = 900 / NUM_SLICES;
 var sliceHeight:Number = 494 / 2;
      
 addChild(btn);
 btn.graphics.lineStyle(3,0x00ff00);
 btn.graphics.beginFill(0x0000FF);
 btn.graphics.drawRect(0,0,sliceWidth,sliceHeight);
 btn.graphics.endFill();
 btn.alpha = 0;
 btn.x =  sliceWidth * (i<3?i:i-3);
 btn.y =  (i<3?0:(494/2));
 btn.numberId = i;
 btn.addEventListener(MouseEvent.CLICK, mouseDownHandler); 
}
}

private function createSlicedBitmapMaterialFromAsset(asset:Class, sliceX:Number, sliceWidth:Number, isFlipped:Boolean = false):BitmapMaterial
{
var bitmap:Bitmap = new asset() as Bitmap;
var bitmapData:BitmapData = new BitmapData(sliceWidth, 494, false, 0xcc0000);
if(isFlipped)
{

 var sliceMatrix:Matrix = new Matrix();
 sliceMatrix.translate(-300, -247);
 sliceMatrix.rotate(Math.PI);
 sliceMatrix.translate(sliceX, 247);
 bitmapData.draw(bitmap, sliceMatrix);
}
else
{
 bitmapData.copyPixels(bitmap.bitmapData, new Rectangle(sliceX, 0, sliceWidth, 494), new Point());
}
var material:BitmapMaterial = new BitmapMaterial(bitmapData, true);

return material;
}


private function mouseDownHandler(event:MouseEvent):void
{
var numberId: Number = event.target.numberId;
var index: Number = (numberId<3?numberId:numberId-3);
targetRotation[index]+= (numberId<3?90:-90) % 360;
TweenMax.to(cubes[index], .5, {rotationX:targetRotation[index], ease:Quad.easeInOut});
}

}
}

Seguramente para la próxima versión usare imágenes modificadas para un mejor ajuste de las partes y agregare mas caras al "cubo" como se muestra en el siguiente ejemplo: http://blog.flexcommunity.net/lab/ppv3dGallery_slicedCube/

Galeria Transitional en Flash Builder (prototipo)

2011-05-05T10:12:00.000-07:00

Tratando de replicar en Flash Builder la galeria que mostre en mi post anterior, llegue a este prototipo.

View in action >>

Para tener en cuenta

Efectos y animaciones
Use algunas animaciones sencillas con efectos de movimiento y fade en el logo, menu y botones.

Transiciones
Las transiciones entre las distintas opciones se corresponden a distintos "states" y pude usar una unica secuencia de animacion para las distintas transiciones, donde solo le paso los targets que necesito animar.

CSS
Hay elementos que les di una customización basica con cambio de colores y fuentes mediante el uso de CSS.

Skins
Hay un solo elemento para el que tuve que crear un skin propio; el ToggleButton de ocultar/mostrar el menu, ya que necesite hacer un skin customizado para que el texto pueda estar vertical.

Voy a seguir trabajando en esta idea, buscando llegar a obtener un efecto de desplazamiento similar al mostrado en al otra galeria. Por las dudas el archivo SWF permite ver el código fuente.

Galeria de moda en AS3 (DEMO)

2011-05-04T19:32:00.001-07:00

Galeria de imágenes leidas desde un XML para un sitio de diseño de indumentaria realizado en AS3.

View in action >>

Esto es solo una demo de una galeria para un sitio de diseño de indumentaria, realizada en AS3 y usando la libreria TweenMax de greensock para las animaciones y transiciones. Cabe destacar que el diseño no es el original, ya que el trabajo fue tercerizado y hice este diseño alternativo para poder mostrarlo.

Simple Image Gallery en Flash Builder

2011-05-03T13:35:00.000-07:00

Una galeria básica de imágenes cargadas desde un XML

View in action >>

En mi paso por convertir la galeria AS3 que postie ayer, retome algunos tutoriales:
http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/

http://flex4fun.com/2010/11/30/flex4-rollover-and-rollout-using-animate-with-easing/

http://flex4fun.com/2010/11/30/flex4-popupmanager-example-change-modal-color-and-click-modal-close-popup/

Es una mezcla de todo, se me complico a lo último porque el resize de la popup con la imagen , no se centraba y si ponia una imagen de loading habia un "pantallazo" molesto, así que opte por quitar el loading hasta hacer un componente popup que tuviera el loading externo o pruebe usar alguna propiedad de interpolación para que mientras se redimenciona la ventana se reposicione. Por las dudas el archivo SWF permite ver el código fuente.

Galeria para concurso en AS3 (DEMO)

2011-05-02T17:59:00.000-07:00

Este es un prototipo o demo hecho en AS3 para una aplicación Facebook de una galeria de fotos y videos

View in action >>

Para tener en cuenta

Se usan distintas consultas al servidor con retorno en formato XML para obtener la información tanto de las galerias como del detalle
Algunas funcionalidades como votar, comentar y subir archivos estan simuladas, ya que solo me ocupe del desarrolllo en ActionScript, las funciones del lado del servidor las hacia otro desarrollador
El diseño no es el original, ya que el trabajo es tercearizado. Por lo que hice un diseño alternativo

Memotest en AS3 v2 - Orientado a Objetos

2011-05-01T06:19:00.000-07:00

Luego de revisar el código del juego que subí la semana pasada, decidí hacer una versión orientada a objetos que sirviera para poder comparar ambos códigos y ademas enseñar conceptos básicos de la POO como composición, encapsulamiento y herencia. (Recuerden que estoy armando un curso de AS3)

View in action >>

Las clases

Main Class
Logic
Board
Cad3D
ScoreBoard
Counter
Clock
Taps
Score

Main Class
La clase Main es responsable de las siguiente tareas:

Animar presentación, finalización y reinicio del juego
Crear instancias de Boardy ScoreBoard
Pasar matriz de cards3D y referencia del ScoreBoard a la clase Logic

Clase Logic
Es el cerebro del juego y es responsable de:

Iniciar y reiniciar el juego
Procesar click sobre cada carta
Chequear las últimas 2 cartas seleccionadas
Chequear la cantidad de aciertos y lanzar evento de fin de juego

Clase Board
La función de esta clase es crear la matriz de cartas en juego, asi como destruirlas luego de su uso. A su vez realiza operaciones especificas como la mezcla randomica de las cartas.

Card3D
Es la encargada de crear la carta con las imágenes en frente y reverso y todo lo referido a las animaciones de la misma (toBackFace, toFrontFace, onGoal, onShow, onFinish)

ScoreBoard
Agrupa los contadores y lleva un control sobre los puntos de la jugada actual (los puntos de cada acierto varian según el tiempo transcurrido o la consecutividad de aciertos)

Counter
Es la clase que maneja operaciones matematicas:

Inicialización de variable
Getters and setters de una variable privada
Update el display del contador

Clock, Taps y Score
Son subclases de Counter

Download source files >>

Para tener en cuenta
Les sigo debiendo para "alguna" próxima versión:

Configuración por xml
Carga externa de las imágenes
Multinivel
Guardado de score
Uso de alguna libreria 3D
Versión en Flash Builder (estoy trabajando en eso)

Memotest en AS3

2011-04-29T16:44:00.000-07:00

El clásico juego de memoria visual, esta vez en AS3 (aunque no es POO)

View in action >>

Estoy preparando un curso de AS3 y queria mostrar como trabajar con algunas clases sencillas, clips de la libreria y animaciones usando tweenlite.
Tenia la idea de un memotest que usará arrays, operaciones matemáticas simples como contadores y modulo, y buscaba algún efecto para el click sobre las fichas (o cartas) pero no queria usar ninguna libreria 3D, así encontre este tutorial Building a 3D Business Card With Pure AS3 y me sirvio como base para mi clase Card3D.

Download source files >>

Para tener en cuenta
No esta completamente orientado a objeto ya que el curso no es solo para programadores y aun no se hasta que punto voy a poder separar el codigo en clases mas especificas o usando algún patron.
Les debo para la próxima versión:

Configuración por xml
Carga externa de las imágenes
Multinivel
Guardado de score
Uso de alguna libreria 3D
Versión en Flash Builder (estoy trabajando en eso)

HTML5 Drag and drop demo

2011-04-28T15:44:00.000-07:00

Un simple juego de arrastrar y soltar, pero con una validación entre el contenido que se arrastra y el contenedor donde se lo puede dejar.

View in action >>

Resumen
Algo de CSS3 para las cajas redondeadas y los fondos con degrade, webfonts para los textos y Drag and Drop nativo en HTML5 para la funcionalidad.

Mi idea era probar solo la función de Drag and Drop, si en algún navegador no funciona no es mi problema hoy en día, se puede usar algun framework javascript para compatibilizar. Esto es solo una idea no una solución completa.

Hello FLASH 4!

2011-04-27T05:03:00.000-07:00

Corria el año 1999 y tratando de limpiar mi sitio personal "Kunisite" (1) de los gifts animados, barras de colores y contadores que se usaban en ese momento y que hacian que las páginas se parecieran a "Simpson Homer Mister X Web Page" (2) , el 22 de diciembre del año 1999 me encontre con un pograma que permitia hacer tus propias animaciones y que se estaba haciendo muy popular, asi instale la versión 4 de Macromedia Flash y esta fue mi primera animación:

Mis primeros pasos en Flash
Definitivamente en ese momento no habia blogs, ni videotutoriales online que sirvan como guia en el aprendizaje de un nuevo programa, tal vez algún que otro foro de discusion pero mi ingles era malisimo entonces, asi que luego de hacer los 4 o 5 tutoriales animados que venian en el help, segui probando las cosas que mas me entusiasmaron y que casi no tenian paralelo con los programas que habia usado hasta entonces para hacer gifts animados o presentaciones online: las motion guides, las mascaras, el drag y poder reproducir sonidos.

Motion guides
El poder hacer que un elemento siguiera un path dado de una manera tan sencilla y no tener que animarlo cuadro a cuadro me parecia una maravilla!

Mascaras y drag
Las mascaras permitian efectos muy novedosos por entonces y el drag fue la primer interactividad que descubri en este entorno, asi empece a probar como combinar ambos.

Sonidos
Recorriendo el directorio de mis primeros trabajos vi muchos que hacian uso de efectos de sonidos, tanto en overs de botones, como en medio de las animaciones, hoy en dia no soy muy adepto al sonido en los flash, pero bueno en su momento no usaba la compu para escuchar musica todo el dia se ve.
Les debo la muestra de mis primeras animaciones con sonido, proximamente voy a agregarles un wrapper para poder manejar el volumen, en ese entonces no se usaban parlantes en las pc, la mayoria solo usaba el speaker y escuchar hoy esos efectos "wav" con la potencia de los parlantes actuales es enloquecedor.

Poniendo todo junto
Les dejo una pequeña animación que intentaba ser un banner de un negocio de barrio.

(1) el Kunisite fue mi primer sitio personal y estaba alojado en Lycos uno de los tantos hostings gratuitos de la epoca.

(2) Vista de como eran la mayoria de las paginas personales de entonces

Flex Scribbler V1

2011-04-20T12:38:00.001-07:00

Modificando código AS2 y AS3 en un painter básico.

View in action >>

Tenia el código en AS2 de una pequeña aplicación que hacia grafitis en flash y otro código en AS3 de una aplicación que hacia trazos con manchas basado en las pintura de Jackson Pollock y como uno de los tutoriales que habia hecho era una aplicacion AIR de un Scribbler sencillo, me propuse modificarlo.

El código completo pueden obtenerlo con la opción de View Source del swf que les muestro , pero a continuación voy a resaltar algunas de mis intervenciones.

Botones
Tanto para los Buttons como para los ToggleButtons utilice un icono en lugar de un label, para ello tuve que crear un MXML skin para cada uno y modifique la etiqueta label por el siguiente código:

<s:Group horizontalCenter="0" verticalCenter="1"
    left="10" right="10" top="2" bottom="2" >
 <s:layout>
       <s:HorizontalLayout verticalAlign="middle"/>
 </s:layout>
 <s:Label id="labelDisplay" textAlign="center" maxDisplayedLines="1"/>
 <s:BitmapImage source="@Embed('../assets/icon_draft.png')"/>
</s:Group>

Modo Multicolor
Para el modo multicolor, cambio el color en base a un número random.

theColor = Math.round(Math.random()*0xFFFFFF); //random color

Modo Kids
Para el modo kids, cambio el ancho en base a un número random.

theLineWidth=Math.round((Math.random()*15)+2); //random width

Modo Pollock
Para el modo pollock use calculo que se basa en la diferencia entre los puntos recorridos con el mouse, a mayor diferencia menor ancho de la linea, a su vez se completa con puntos aleatorios alrededor de la línea principal. Aqui parte del código (View Source para mas información).


...
mid_x = (end_x - start_x) * (1 + mid_point_push) + start_x;
mid_y = (end_y - start_y) * (1 + mid_point_push) + start_y;
      
start_x = end_x;
start_y = end_y;
end_x = mouseX;
end_y = mouseY;
      
var distance: Number = Math.sqrt(Math.pow(end_x - start_x, 2) + Math.pow(end_y - start_y, 2));
var new_size: Number;
if (distance == 0)
{
 new_size = max_line_width / 90;
}
else
{
 new_size = max_line_width / distance;
} // end else if      
size = new_size_influence * new_size + (1 - new_size_influence) * size;
      
splat(start_x, start_y, end_x, end_y, mid_x, mid_y, size);

...
private function splat(x1: Number, y1: Number, x2: Number, y2: Number, x3: Number, y3: Number, d: Number):void
{
 if(isRainbow)
  theColor = Math.round(Math.random()*0xFFFFFF);
 else
  theColor = drawColor;
   
 graphics.lineStyle(d, theColor);
 graphics.moveTo(x1, y1);
 graphics.curveTo(x3, y3, x2, y2);
 var dd: Number = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
 for (var _loc9: Number = 0; _loc9 < Math.floor(5 * Math.pow(Math.random(), 4)); ++_loc9)
 {
  var _loc3: Number = dd * 4 * (Math.pow(Math.random(), 2) - 5.000000E-001);
  var _loc2: Number = dd * 4 * (Math.pow(Math.random(), 2) - 5.000000E-001);
  var _loc6: Number= Math.random() - 5.000000E-001;
  var _loc5: Number= Math.random() - 5.000000E-001;
  graphics.lineStyle(d * (5.000000E-001 + Math.random()), theColor);
  graphics.moveTo(x1 + _loc3, y1 + _loc2);
  graphics.lineTo(x1 + _loc3 + _loc6, y1 + _loc2 + _loc5);
 } // end of for
} // End of the function

Para tener en cuenta
El area de dibujo a veces se escapa del panel, en especial en el modo "Pollock", pero ese ajuste, más el agregar tooltips a los botones, las funciones de undo y redo y una confirmación antes de borrar el dibujo, se los debo para una próxima versión.

Bart Simpson Board in HTML5

2011-04-15T05:56:00.000-07:00

Una de mis primeras pruebas en HTML5 y quise usar un poco de todo.

View in action >>

Canvas

<canvas id="myBg" width="657" height="352">
 <p>Your browser doesn't support canvas.</p>
</canvas>
<canvas id="myDrawing" width="657" height="352">
 <p>Your browser doesn't support canvas.</p>
</canvas>

WebFonts para el titulo

@font-face {
 font-family: 'AkbarPlain';
 src: url('faces/simpsonfont-webfont.eot');
 src: local('☺'), url('faces/simpsonfont-webfont.woff') format('woff'), url('faces/simpsonfont-webfont.ttf') format('truetype'), url('faces/simpsonfont-webfont.svg#webfontNXLzTFSJ') format('svg');
 font-weight: normal;
 font-style: normal;
}
...

#content h1 {
 font-family: 'AkbarPlain', 'Georgia', serif;
 text-align:center;
 text-shadow: 5px 5px 5px #F48220;
 filter: dropshadow(color=#F48220, offx=5, offy=5);
}
...

<h1>Bart Simpson Board</h1>

WebFonts en canvas

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
  families: ['BartNormal'],
  urls : ['stylesheet.css']
}
});
</script>
<script src="js/canvas.text.js?reimplement=true"></script>
<script src="faces/bart_normal.typeface.js"></script>
...

contextBg.drawImage(myBoard, 0, 0); 
contextBg.font = "24px Bart";
contextBg.fillStyle = "#FFF";
var posY=40;
for(i=0;i<10;i++){
 contextBg.fillText(message, 30, posY);
 posY+=30;
}

CSS3

input[type="button"] {
border: none;
cursor: pointer;
color: #fff;
font-size: 24px;
background-color: #7ac000;
padding: 5px 36px 8px 36px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.6);
background: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.23, #619702),  color-stop(0.62, #7ac000)  );
background: -moz-linear-gradient(  center bottom,  #619702 23%,  #7ac000 62%  );
}
input[type="button"]:hover {
color: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
background-color: #ff5400;
background: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.23, #c34000),  color-stop(0.62, #ff5400)  );
background: -moz-linear-gradient(  center bottom,  #c34000 23%,  #ff5400 62%  );
}

Compatibilizar con IE
Aunque no funciona muy bien, probe estas y otras librerias (modernizr.js) y el resultado nunca fue el optimo

<!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE]><script src="js/excanvas.js"></script><![endif]-->

Versión con generación de imagen


//Code for save the image
canvas=document.getElementById("myDrawing");
$("#save").click(function(){ 
 $("#result").html('<br /><br /><img src='+canvas.toDataURL()+' />');
 $("#data").val(canvas.toDataURL());
 $("#get").click(function(){
   $("#frm").trigger('submit');
  });
});

View in action >>

Para tener en cuenta
Incompatibilidad
Lo probe en algunos dispositivos moviles y no funciona muy bien, a veces no muestra la imagen de bart que esta en una capa superior.

Hello world! Hola Flash Builder!

2011-04-14T12:46:00.000-07:00

Luego de hacer el curso online "Flex in a Week video training" y varios tutoriales más, empece de poco a hacer algún desarrollo propio. Por ahora quiero probar trabajar con Web Services, manejo de states, customización mediante skins y localization.

Mi primer proyecto es un traductor online que usa Google Translate API para realizar la traducción, por ahora es una aplicación web pero la versión final será para escritorio.

View in action >>

Para tener en cuenta

Proxy PHP para el Web Service
Debido a la complicación de acceder al Api desde mi entorno de desarrollo opte por hacerlo mediante un proxy PHP.
Google Translate API using PHP
Using a PHP proxy with flex to talk cross domain

Tour Flex
Luego de empezar esta idea encontre un traductor que usa la misma API dentro del Tour de Flex pero en versión Flex 3, pueden verlo dentro de la categoria Cloud Apis del mismo.
Tour de Flex online

Once Again FLEX!!!

2011-04-14T11:36:00.001-07:00

Al igual que a finales del 2009 cuando habia creado un blog para compartir mis experiencias aprendiendo Flex 3, ahora abro este espacio para ir dejando comentarios y experiencias de mientras aprendo Flex 4 y otras tecnologías.

No ha pasado mucho tiempo desde que deje de alimentar mi antiguo blog, pero si he ocupado cientos de horas en el estudio y analisis de nuevas tecnologías y frameworks de desarrollo, tratando de responder por experiencia propia:

¿Porque el HTML5 y CSS3 es el futuro del desarrollo Web?
¿Que diferencias hay entre CodeIgniter y CakePHP?
¿Que tan dificl es el entorno nativo para Apps Android?
¿Porque cambiar a a Jquery luego de años de uso de la libreria Prototype?
¿Como es el desarrollo de aplicaciones con Jquery Mobile, Sencha, Ruby on Rails, etc, etc

Pero por desgracia aun no encontre el entorno definitivo donde quiero desenvolverme. A pesar de haber dicho hace algún tiempo que no me interesaba seguir desarrollando aplicaciones para entornos Flash, por constastes pedidos de desarrollos en ActionScript y una buena recomendación sobre que ayudaba en mi "Skills" si podia reforzar con algo de conocimiento en Flex, aqui estoy Una vez mas con Flex!