lunes, 14 de diciembre de 2009

Audio and Music and Cover Flow like Ipod - Audio y Musica y Cover Flow como el Ipod

Translation:


A veces necesitamos salir del paso, con un cliente que nos pide una página, y nos dice solo quiero algo sencillo, donde puedan ver mi biografía y escuchar un preview de mi música.

No voy a mentir, hacerlo en HTML es lo más sencillo y rápido, pero si queremos que el cliente quede contento, y también no perder mucho tiempo en programación, podemos hacerlo todo en flex, en menos de un día, y de seguro nuestro cliente quedara más que feliz porque tendrá las 3 B (Bueno, Bonito, y Barato) y eso nos abrirá la puerta a otros clientes que quieran salir a la web con algo sencillo.

Así queda demostrado que lo sencillo puede ser bonito, sin tener que invertir mucho tiempo de mas.

Librerías usadas:

Entendiendo los componentes y agregando un par de eventos donde van pueden lograr el ejemplo de la pagina presentada en la primera imagen.



Sometimes we need to muddle through with a client who asks us a page, and tells us just want something simple, where they can see my biography and listen to a preview of my music.

I will not lie, do it in HTML is as simple and quick, but if we want the customer is happy, and not lose much time in programming, can do everything in flex, in less than a day, and surely our client because there would be more than happy to have the 3 B (Bueno, Bonito, and cheap) and it will open the door to other customers who want to go to the website with something simple.

This is established that simplicity can be beautiful without having to invest much more time.

Libraries used:



Understanding the components and adding a couple of events where they can achieve the sample page presented in the first image.

Descargar Archivo y Ver Codigo Fuente:

Download File's and Source:

martes, 27 de octubre de 2009

Flash Flex Comunications, is it posible? - Comunicar Flash con Flex ¿ es posible ?

Son las imágenes con las cual vamos a trabajar, son imágenes conseguidas por google image, escogí estas 3 imágenes, y vamos a utilizarlas para aminarlas un poco con Flash CS3 para luego ser exportadas y ser utilizadas en Flex.

Imagen 1:
Imagen 2:
Imagen 3:

Una vez bajadas las imágenes, las importamos a flash CS3, y vamos a cambiarle el sentido a las flechas la flecha que sale de la caja, supongamos que representara perdidas de algún tipo, por lo que lo coloreamos de Rojo y las flecha hacia dentro representara ganancias y lo coloreamos de verde. Y le damos una animación como si estuviera ingresando o saliendo, con respecto a la grafica, podemos borrar la flecha que está dentro de la imagen y redibujarla con una animación como si estuviera rebujándose en el momento.

Dentro del mismo flash, le colocamos los códigos de animación On mouse Over, y On mouse Out. Para animar y dejar de animar los mismo.

Flash:



Una vez que exportemos nuestras animaciones, vamos a Flex y dentro de nuestra carpeta scr en donde tengamos los assets colocamos nuestro swf exportado de flash.

Luego creamos nuestro código en Flex y tenemos nuestros resultados.

Flex:


lunes, 7 de septiembre de 2009

amfPhp MySQL Flex - Universal Mind Extension Example - Flex 3

Translation:


OBSERVACION: amfPHP 1.9 es soportado hasta Php 5.2.xxx

Proximamente la Explicacion

OBSERVATION: amfPHP 1.9 is olny Soported by Php 5.2.xxx or less

Soon How To.







martes, 1 de septiembre de 2009

Tesis - SVN - Historico de Avances - Software Educativo - Φsik Software

Visual SVN es una solución rápida para aquellos que no les gusta la consola, además de ser gratuita incluye una interfaz muy amigables para los usuarios que quieres levantar una SVN de forma local o remota, se instala en menos de 10 minutos. Aclaro esta no es la solución más profesional, pero sirve para mantener un ambiente de desarrollo limpio y agradable.

Mi recomendación, para todo proyecto que este pegado a un cronograma o tenga que ofrecer avances a una directiva o cliente final, un SVN bien comentado tras cado commit es la solución perfecta.

Así que no hagamos Commit por salvar y respaldar, Siempre hagan un comentario breve de que has hecho hasta el momento, cuales son los errores que pudieran solucionarse en el futuro y con qué vas a continuar.

Tesis - Modelo de Base de Datos Final en MySQL - Software Educativo - Φsik Software

(Click sobre la imagen para verlo en Grande)

Después de varios meses de discusión hemos llegado con el modelo de base de datos final para la tesis, básicamente todo gira en torno a 4 tablas principales:

  • Estudiantes
  • Profesores
  • Teorías
  • Proyectos

Existen 3 tipos de Roles:

  • Estudiantes solo pueden consultar y modificar sus datos.
  • Profesores pueden Consultar Modificar Insertar y Eliminar.
  • Registro solo para ingresar estudiantes.

El Rol administrador esta por defecto pero no es para su uso, solo cuando sea necesario o en caso de modificaciones a la Base de datos. (Eliminación Creación de Tablas).







martes, 4 de agosto de 2009

Trace a Particle - Dibujar el camino de una Particula - Flex 3

Translation:

En este ejemplo podemos seguir la trayectoria de una animación en este caso una particular basada en formulas matemáticas. El seguir la trayectoria nos puede brindar información de donde estuvo una partícula o donde podrá estar en el futuro en caso de que sea una función cíclica.
This is an example of how we can trace an animation based in a Mathematical formula. The trace can give us information of the particle was in the past and if it’s a Cycle function were its going to be in the future.


En este caso usamos la fórmula para métrica del circulo, usando el sin y cos y colocamos variables dentro de la formula. La formula básica para la X y la Y es la siguiente:

X = sin( angle )* radius + initialPositionInX;
Y = cos( angle )* radius + initialPositionInY;

Para que podamos apreciar una animación necesitamos que el ángulo sea variable y un contador, también podemos colocar una velocidad a ese ángulo para que vaya más rápido.
Las formulas nos quedarían expresadas de la siguiente manera:

X = sin( time*velocityX )* radiusX + initialPositionInX;
Y = cos( time*velocityY )* radiusY + initialPositionInY;

Creamos una clase llamada particle y usamos una application para correrla:
Particle Class
package
{
import mx.core.UIComponent;

public class Particle extends UIComponent
{

/*---------------------------------------------------------------------------*/
/*----------------------------- START VARIABLES -----------------------------*/
/*---------------------------------------------------------------------------*/ 

private var _particleColor:uint = 0x000000;
private var _particleSize:int = 2;

/*---------------------------------------------------------------------------*/
/*------------------------------ END VARIABLES ------------------------------*/
/*---------------------------------------------------------------------------*/ 

/*****************************************************************************/

/*---------------------------------------------------------------------------*/
/*--------------------------- START INIT FUNCTIONS --------------------------*/
/*---------------------------------------------------------------------------*/

public function Particle()
{
super();
}

/*---------------------------------------------------------------------------*/
/*---------------------------- END INIT FUNCTIONS ---------------------------*/
/*---------------------------------------------------------------------------*/

/**************************************************************************/

/*---------------------------------------------------------------------------*/
/*------------------------------ START GET SET ------------------------------*/
/*---------------------------------------------------------------------------*/

public function get particleColor():uint{
return _particleColor;
}
public function set particleColor(value:uint):void{
_particleColor = value;
invalidateDisplayList();
}

public function get particleSize():int{
return _particleSize;
}
public function set particleSize(value:int):void{
_particleSize = value;
invalidateDisplayList();
}

/*---------------------------------------------------------------------------*/
/*------------------------------- END GET SET -------------------------------*/
/*---------------------------------------------------------------------------*/

/**************************************************************************/

/*---------------------------------------------------------------------------*/
/*------------------------- START OVERRIDE FUNCTION -------------------------*/
/*---------------------------------------------------------------------------*/

override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number): void 
{
super.updateDisplayList(_particleSize,_particleSize);
graphics.clear();
graphics.lineStyle(1,_particleColor,1);
graphics.beginFill(_particleColor,1);
graphics.drawCircle(0,0,_particleSize);
graphics.endFill();
}

/*---------------------------------------------------------------------------*/
/*------------------------- END OVERRIDE FUNCTION ---------------------------*/
/*---------------------------------------------------------------------------*/

}
}

The Application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" frameRate="120" 
creationComplete="creationCompleteHandler(event)" layout="absolute" 
width="415" height="300" backgroundColor="0xFFFFFF"  xmlns:local="*" 
backgroundGradientAlphas="[1.0, 1.0]" 
backgroundGradientColors="[#FFFFFF, #FFFFFF]" themeColor="#FFFFFF" 
borderColor="#000000" borderStyle="solid" >
<mx:Script>
<![CDATA[
import mx.events.NumericStepperEvent;
import mx.events.ColorPickerEvent;
import mx.controls.Image;
import mx.core.UIComponent;
import mx.events.FlexEvent;

/*---------------------------------------------------------------------------*/
/*----------------------------- START VARIABLES -----------------------------*/
/*---------------------------------------------------------------------------*/ 

private var time:Number =0;
private var xo:Number = 0;
private var yo:Number = 0;
private var velocityX:Number = 1;
private var velocityY:Number = 1;
private var radiusX:Number = 100;
private var radiusY:Number = 100;
private var myCont:Canvas;
private var myImage:Image;
private var myParticle:Particle;

/*---------------------------------------------------------------------------*/
/*------------------------------ END VARIABLES ------------------------------*/
/*---------------------------------------------------------------------------*/ 

/*****************************************************************************/

/*---------------------------------------------------------------------------*/
/*--------------------------- START INIT FUNCTIONS --------------------------*/
/*---------------------------------------------------------------------------*/

private function creationCompleteHandler(event:FlexEvent):void{
this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}
private function initParticleHandler(event:FlexEvent):void{
myCont = new Canvas;
myCont.percentWidth = 100;
myCont.percentHeight = 100;
myCanvas.addChild(myCont);
myParticle = new Particle;
myParticle.particleSize = 2;
myParticle.particleColor = 0xFF0000;
xo = myParticle.x = myCanvas.width/2;
yo = myParticle.y = myCanvas.height/2;
myImage = new Image;
myImage.percentWidth = 100;
myImage.percentHeight = 100;
myImage.alpha = 0.98;
myCont.addChild(myImage);
myCont.addChild(myParticle);
}

/*---------------------------------------------------------------------------*/
/*---------------------------- END INIT FUNCTIONS ---------------------------*/
/*---------------------------------------------------------------------------*/

/*****************************************************************************/

/*---------------------------------------------------------------------------*/
/*-------------------------- START EVENT FUNCTIONS --------------------------*/
/*---------------------------------------------------------------------------*/ 

/*-- START EVENT CAIRNGORM --*/

/*--- END EVENT CAIRNGORM ---*/

/***************************/

/*---- START EVENT FLEX -----*/
private function enterFrameHandler(event:Event):void{
time+=1/stage.frameRate;
myParticle.x = Math.sin(time*velocityX)*radiusX + xo; 
myParticle.y = Math.cos(time*velocityY)*radiusY + yo; 
myImage.source = new Bitmap(this.getUIComponentBitmapData(UIComponent(myCont)));
}
public function changeColorHandler(event:ColorPickerEvent):void{
myParticle.particleColor = event.color;
}
public function changeVelocityX(event:NumericStepperEvent):void{
velocityX = event.value;
}
public function changeVelocityY(event:NumericStepperEvent):void{
velocityY = event.value;
}
public function changeRadiusX(event:NumericStepperEvent):void{
radiusX = event.value;
}
public function changeRadiusY(event:NumericStepperEvent):void{
radiusY = event.value;
}
public function changeAlpha(event:NumericStepperEvent):void{
myImage.alpha = event.value;
}
public function changeRadius(event:NumericStepperEvent):void{
myParticle.particleSize = event.value;
}
public function clearImageHandler(event:MouseEvent):void{
this.removeEventListener(Event.ENTER_FRAME,enterFrameHandler);
myImage.source = new Bitmap();       
this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}

/*----- END EVENT ------*/

/*---------------------------------------------------------------------------*/
/*-------------------------- END EVENT FUNCTIONS ----------------------------*/
/*---------------------------------------------------------------------------*/

/*****************************************************************************/

/*---------------------------------------------------------------------------*/
/*-------------------------- START OTHER FUNCTIONS --------------------------*/
/*---------------------------------------------------------------------------*/ 

public function getUIComponentBitmapData( target : UIComponent ) : BitmapData
{ 
var bd : BitmapData = new BitmapData( target.width, target.height );
var m : Matrix = new Matrix();
bd.draw( target, m );
return bd;  
}

/*---------------------------------------------------------------------------*/
/*-------------------------- END OTHER FUNCTIONS ----------------------------*/
/*---------------------------------------------------------------------------*/

]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<mx:Canvas width="78%" height="100%">
<mx:Form>
<mx:FormItem label="Color">
<mx:ColorPicker  change="changeColorHandler(event)"  
selectedColor="#FF0000"/>
</mx:FormItem>
<mx:FormItem label="Velocity X">
<mx:NumericStepper value="1" maximum="10" minimum="0" 
change="changeVelocityX(event)"/>
</mx:FormItem>
<mx:FormItem label="Velocity Y">
<mx:NumericStepper value="1" maximum="10" minimum="0" 
change="changeVelocityY(event)"/>
</mx:FormItem>
<mx:FormItem label="Radius X">
<mx:NumericStepper value="100" maximum="100" minimum="1" 
change="changeRadiusX(event)"/>
</mx:FormItem>
<mx:FormItem label="Radius Y">
<mx:NumericStepper value="100" maximum="100" minimum="1" 
change="changeRadiusY(event)"/>
</mx:FormItem>
<mx:FormItem label="Alpha">
<mx:NumericStepper value="0.98" maximum="1" minimum="0" 
stepSize="0.01"  change="changeAlpha(event)" />
</mx:FormItem>
<mx:FormItem label="Radius">
<mx:NumericStepper value="2" maximum="5" minimum="1" 
change="changeRadius(event)" />
</mx:FormItem>
<mx:FormItem label="Clear">
<mx:Button label="Clear" click="clearImageHandler(event)" />
</mx:FormItem>
</mx:Form>  
</mx:Canvas>
<mx:VBox width="100%" height="100%" >   
<mx:Canvas id="myCanvas" width="100%" height="100%" 
creationComplete="initParticleHandler(event)"/>
<mx:Label text="www.developyourdream.net" />
</mx:VBox>

</mx:HBox>
</mx:Application>
In this case I used the circle formula of Sin and Cos and put some variable inside the formula, this is the basic formulas in X and Y that we are using:

X = sin( angle )* radius + initialPositionInX;
Y = cos( angle )* radius + initialPositionInY;

So we can do it with animation we need to change the angle, we what to go faster so we can put a velocity to the angle.
The formula that we are using with the variable expresses like this:

X = sin( time*velocityX )* radiusX + initialPositionInX;
Y = cos( time*velocityY )* radiusY + initialPositionInY;

We created a class called particle and used in the applications:
Particle Class
package
{
import mx.core.UIComponent;

public class Particle extends UIComponent
{

/*---------------------------------------------------------------------------*/
/*----------------------------- START VARIABLES -----------------------------*/
/*---------------------------------------------------------------------------*/ 

private var _particleColor:uint = 0x000000;
private var _particleSize:int = 2;

/*---------------------------------------------------------------------------*/
/*------------------------------ END VARIABLES ------------------------------*/
/*---------------------------------------------------------------------------*/ 

/*****************************************************************************/

/*---------------------------------------------------------------------------*/
/*--------------------------- START INIT FUNCTIONS --------------------------*/
/*---------------------------------------------------------------------------*/

public function Particle()
{
super();
}

/*---------------------------------------------------------------------------*/
/*---------------------------- END INIT FUNCTIONS ---------------------------*/
/*---------------------------------------------------------------------------*/

/*****************************************************************************/

/*---------------------------------------------------------------------------*/
/*------------------------------ START GET SET ------------------------------*/
/*---------------------------------------------------------------------------*/

public function get particleColor():uint{
return _particleColor;
}
public function set particleColor(value:uint):void{
_particleColor = value;
invalidateDisplayList();
}

public function get particleSize():int{
return _particleSize;
}
public function set particleSize(value:int):void{
_particleSize = value;
invalidateDisplayList();
}

/*---------------------------------------------------------------------------*/
/*------------------------------- END GET SET -------------------------------*/
/*---------------------------------------------------------------------------*/

/*****************************************************************************/

/*---------------------------------------------------------------------------*/
/*------------------------- START OVERRIDE FUNCTION -------------------------*/
/*---------------------------------------------------------------------------*/

override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number): void 
{
super.updateDisplayList(_particleSize,_particleSize);
graphics.clear();
graphics.lineStyle(1,_particleColor,1);
graphics.beginFill(_particleColor,1);
graphics.drawCircle(0,0,_particleSize);
graphics.endFill();
}

/*---------------------------------------------------------------------------*/
/*------------------------- END OVERRIDE FUNCTION ---------------------------*/
/*---------------------------------------------------------------------------*/

}
}

The Application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" frameRate="120" 
creationComplete="creationCompleteHandler(event)" layout="absolute" 
width="415" height="300" backgroundColor="0xFFFFFF"  xmlns:local="*" 
backgroundGradientAlphas="[1.0, 1.0]" 
backgroundGradientColors="[#FFFFFF, #FFFFFF]" themeColor="#FFFFFF" 
borderColor="#000000" borderStyle="solid" >
<mx:Script>
<![CDATA[
import mx.events.NumericStepperEvent;
import mx.events.ColorPickerEvent;
import mx.controls.Image;
import mx.core.UIComponent;
import mx.events.FlexEvent;

/*---------------------------------------------------------------------------*/
/*----------------------------- START VARIABLES -----------------------------*/
/*---------------------------------------------------------------------------*/ 

private var time:Number =0;
private var xo:Number = 0;
private var yo:Number = 0;
private var velocityX:Number = 1;
private var velocityY:Number = 1;
private var radiusX:Number = 100;
private var radiusY:Number = 100;
private var myCont:Canvas;
private var myImage:Image;
private var myParticle:Particle;

/*---------------------------------------------------------------------------*/
/*------------------------------ END VARIABLES ------------------------------*/
/*---------------------------------------------------------------------------*/

/*****************************************************************************/

/*---------------------------------------------------------------------------*/
/*--------------------------- START INIT FUNCTIONS --------------------------*/
/*---------------------------------------------------------------------------*/

private function creationCompleteHandler(event:FlexEvent):void{
this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}
private function initParticleHandler(event:FlexEvent):void{
myCont = new Canvas;
myCont.percentWidth = 100;
myCont.percentHeight = 100;
myCanvas.addChild(myCont);
myParticle = new Particle;
myParticle.particleSize = 2;
myParticle.particleColor = 0xFF0000;
xo = myParticle.x = myCanvas.width/2;
yo = myParticle.y = myCanvas.height/2;
myImage = new Image;
myImage.percentWidth = 100;
myImage.percentHeight = 100;
myImage.alpha = 0.98;
myCont.addChild(myImage);
myCont.addChild(myParticle);
}

/*---------------------------------------------------------------------------*/
/*---------------------------- END INIT FUNCTIONS ---------------------------*/
/*---------------------------------------------------------------------------*/

/*****************************************************************************/

/*---------------------------------------------------------------------------*/
/*-------------------------- START EVENT FUNCTIONS --------------------------*/
/*---------------------------------------------------------------------------*/ 

/*-- START EVENT CAIRNGORM --*/

/*--- END EVENT CAIRNGORM ---*/

/***************************/

/*---- START EVENT FLEX -----*/
private function enterFrameHandler(event:Event):void{
time+=1/stage.frameRate;
myParticle.x = Math.sin(time*velocityX)*radiusX + xo; 
myParticle.y = Math.cos(time*velocityY)*radiusY + yo; 
myImage.source = new Bitmap(this.getUIComponentBitmapData(UIComponent(myCont)));
}
public function changeColorHandler(event:ColorPickerEvent):void{
myParticle.particleColor = event.color;
}
public function changeVelocityX(event:NumericStepperEvent):void{
velocityX = event.value;
}
public function changeVelocityY(event:NumericStepperEvent):void{
velocityY = event.value;
}
public function changeRadiusX(event:NumericStepperEvent):void{
radiusX = event.value;
}
public function changeRadiusY(event:NumericStepperEvent):void{
radiusY = event.value;
}
public function changeAlpha(event:NumericStepperEvent):void{
myImage.alpha = event.value;
}
public function changeRadius(event:NumericStepperEvent):void{
myParticle.particleSize = event.value;
}
public function clearImageHandler(event:MouseEvent):void{
this.removeEventListener(Event.ENTER_FRAME,enterFrameHandler);
myImage.source = new Bitmap();       
this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}

/*----- END EVENT FLEX ------*/

/*---------------------------------------------------------------------------*/
/*-------------------------- END EVENT FUNCTIONS ----------------------------*/
/*---------------------------------------------------------------------------*/

/*****************************************************************************/

/*---------------------------------------------------------------------------*/
/*-------------------------- START OTHER FUNCTIONS --------------------------*/
/*---------------------------------------------------------------------------*/ 

public function getUIComponentBitmapData( target : UIComponent ) : BitmapData
{ 
var bd : BitmapData = new BitmapData( target.width, target.height );
var m : Matrix = new Matrix();
bd.draw( target, m );
return bd;  
}

/*---------------------------------------------------------------------------*/
/*-------------------------- END OTHER FUNCTIONS ----------------------------*/
/*---------------------------------------------------------------------------*/

]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<mx:Canvas width="78%" height="100%">
<mx:Form>
<mx:FormItem label="Color">
<mx:ColorPicker  change="changeColorHandler(event)"  
selectedColor="#FF0000"/>
</mx:FormItem>
<mx:FormItem label="Velocity X">
<mx:NumericStepper value="1" maximum="10" minimum="0" 
change="changeVelocityX(event)"/>
</mx:FormItem>
<mx:FormItem label="Velocity Y">
<mx:NumericStepper value="1" maximum="10" minimum="0" 
change="changeVelocityY(event)"/>
</mx:FormItem>
<mx:FormItem label="Radius X">
<mx:NumericStepper value="100" maximum="100" minimum="1" 
change="changeRadiusX(event)"/>
</mx:FormItem>
<mx:FormItem label="Radius Y">
<mx:NumericStepper value="100" maximum="100" minimum="1" 
change="changeRadiusY(event)"/>
</mx:FormItem>
<mx:FormItem label="Alpha">
<mx:NumericStepper value="0.98" maximum="1" minimum="0" 
stepSize="0.01"  change="changeAlpha(event)" />
</mx:FormItem>
<mx:FormItem label="Radius">
<mx:NumericStepper value="2" maximum="5" minimum="1" 
change="changeRadius(event)" />
</mx:FormItem>
<mx:FormItem label="Clear">
<mx:Button label="Clear" click="clearImageHandler(event)" />
</mx:FormItem>
</mx:Form>  
</mx:Canvas>
<mx:VBox width="100%" height="100%" >   
<mx:Canvas id="myCanvas" width="100%" height="100%" 
creationComplete="initParticleHandler(event)"/>
<mx:Label text="www.developyourdream.net" />
</mx:VBox>

</mx:HBox>
</mx:Application>



Descargar Archivo y Ver Codigo Fuente:


Download File's and Source:

sábado, 13 de junio de 2009

( Blogger, BlogSpot ) - Translate Manualy like QTranlate - Traducir Manualmente como QTranslate


Translation:


Mi Lengua nativa es el español, y a mí en lo personal me gusta publicar cosas que las otras personas pueden leer y a veces usarlas para sus proyectos personales, pero al principio solo posteaba en español así que mucha gente que entraba al blog se iba porque no entendía el Articulo.

Así que al principio me puse a buscar como traducir blogs y encontré Qtranslate y me gusto el sistema porque a veces los traductores al traducir, no expresa lo que realmente queremos decir PERO!!! Qtranslate solo serbia para WordPress y con el se traduce a mano osea escrito por el propio autor del Post. Así que empecé a buscar Qtranslate para Blogsport o blogger y nada salía.

Un buen día un amigo me dijo que ya que no hay Qtranslate para Blogspot que me creara tu uno (Alejandro Sanchez – www.internetdeveloping.blogspot.com) así que tome su consejo y conseguí a JQuery y con ese concepto me invente 2 clases en CSS para los tags div, uno para cada lenguaje que quería y me cree un pequeño menú.

La primera cosa que hice fue descargarme el JQuery y poner en Java Script en un hosting gratis. Podemos encontrar la última versión de JQuery en su pagina http://jquery.com/ o la versión que yo estoy usando en http://blog.jquery.com/2009/01/21/jquery-131-released/

La segunda cosa que hice fue importar el Java Script al Header de BlogSpot, eso se hace logueandonos a nuestro blog y vamos a Diseño - > Editar HTML y arriba del cierre del head Colocamos esta línea de código:

<script src='http://developyourdream.net/js/jquery.js' type='text/javascript'/>

Donde /js/jquery.js is es la ruta del Java Script de JQuery.
Ejemplo:


La tercera cosa que tenemos que hacer es crear nuestras clases en CSS, yo me cree 4 clases, 2 para manejar los eventos de cambio de idioma y 2 para la expresión en si del idioma. Vamos a colocar estas Clases dentro del CSS del BlogSpot yo lo puse cerca del debajo del Footer y arriba del Cierre del CSS estas son las clases que cree:

.english {display:none;}
.spanish {}
.englishHandler {}
.spanishHandler {}

Ejemplo:


La Última cosa que tenemos que crear en la Configuración es un Mini Java Script el cual lo vamos a escribir arriba del Cierre del Header y abajo de donde importamos el JQuery.

<script type='text/javascript'>
$(document).ready(function() {
$("english").hide();
$(".spanish").show();
$(".englishHandler").click(function() {
$(".english").show();
$(".spanish").hide();
});
$(&quot;.spanishHandler").click(function() {
$(".english").hide();
$(".spanish").show();
});
});
</script>
Ejemplo:


Ahora vamos a la parte de Publicación del Post

Yo me cree un pequeño menú de la siguiente forma:

<span style="color: rgb(255, 0, 0); font-weight: bold;">Translation:</span>
<ul><li class="spanishHandler"><a href="#">Spanish <img class="imgNoBorder" src="http://developyourdream.net/img/spanish_flags.jpg" /></a></li><li class="englishHandler"><a href="#">English <img class="imgNoBorder" src="http://developyourdream.net/img/english_flags.jpg" /></a>
</li></ul>

Con este menú podemos hacer 2 cosas, copiar y pegarlo al inicio de cada post o que se coloque automáticamente, esto lo podemos lograr en Configuración -> Formato colocando el menú en el texto de entrada que dice Plantilla de entrada al Final:
Example Image:

En el Nuevo Post que vamos a crear colocamos todo el texto que sea en español dentro de los tags

<div class="spanish">HOLA MUNDO</div>

y todo el texto que sea en Ingles dentro de los Tags

<div class="english">HELLO WORLD</div>

Nuestro post debe quedar algo así:



My Native language is Spanish, and i like publishing thing that other people can read and see, and even sometime the can use, but I started this blog only in Spanish, so some people cant understand this language.

So I start look how to translate this page, and I found Qtranstlate, Buy it was only for word Press. So I googled Qtranslate for Bloggers or for BlogSpot and nothing came up.

So a friend told me, if you want a Qtranslate way don’t you do it yourself. (Alejandro Sanchez – www.internetdeveloping.blogspot.com ) so I did, I found JQuery and I did made 2 class for my div tags, one for each language.

The first Thing we have to do is download JQuery put the JavaScript in a free hosting page, you can find the last release of JQuery in this page http://jquery.com/ and the one I use is http://blog.jquery.com/2009/01/21/jquery-131-released/

The second thing we have to do is imported to the Header of our BlogSpot so we login in over blog and me go to Layout and then we go to Edit HTML and import with a script tag the JQuery, the tag should say something like this:


<script src='http://developyourdream.net/js/jquery.js' type='text/javascript'/>


were /js/jquery.js is your directory were you host the Java script of JQuery.

Example Image:



The next thing you have to do is to make is the CSS classes, I made 4 , 2 handlers and 2 expressions if we can called lake that and I route them at the end of the CSS close to the footer but you can write it any ware in the CSS and this classes are:

.english {display:none;}
.spanish {}
.englishHandler {}
.spanishHandler {}

Example Image:

The last thing is we have to in the layout is ouwer mini java script and we are going to write it over the end of the head and below the import of the JQuery.

<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.english&quot;).hide();
$(&quot;.spanish&quot;).show();
$(&quot;.englishHandler&quot;).click(function() {
$(&quot;.english&quot;).show();
$(&quot;.spanish&quot;).hide();
});
$(&quot;.spanishHandler&quot;).click(function() {
$(&quot;.english&quot;).hide();
$(&quot;.spanish&quot;).show();
});
});
</script>


Example Image:



Know the publish part:

I did my menu like this:


<span style="color: rgb(255, 0, 0); font-weight: bold;">Translation:</span>
<ul><li class="spanishHandler"><a href="#">Spanish <img class="imgNoBorder" src="http://developyourdream.net/img/spanish_flags.jpg" /></a></li><li class="englishHandler"><a href="#">English <img class="imgNoBorder" src="http://developyourdream.net/img/english_flags.jpg" /></a>
</li></ul>


And We can do two things, we can copy and paste the menu HTML in all our post OR we can automatically put it in post just adding the html in SETTINGS -> FORMATING in the formating we can find a input text named Post Template:

Example Image:

In the new post we what to create if we want to write in Spanish we surround the text with

<div class="spanish">HOLA MUNDO</div>

and if we that to write in English we surround the text with

<div class="english">HELLO WORLD</div>

and our ports will lock like this:
Example Image:

Conectar Flex MySql amfPHP - Connect Flex MySql amfPHP - Flex 3

OBSERVACION: amfPHP 1.9 es soportado hasta Php 5.2.xxx

Translation:
En este tutorial vamos a hacer que un datagrid se llene con información de una base de datos en MySQL y además vamos a crear un formulario donde podamos dejar nuestro nombre y un mensaje.

Esto lo vamos a lograr con amfphp conectándose a MySQL y flex mostrando toda la interfaz.



Lo primero que vamos a crear es crear la lógica de Base de dato de MySQL, esta lógica fue creada por una Compañero de trabajo llamado “Joel Moya” quien me dio los scripts para crear seleccionar e insertar en la base de dato:

CREATE TABLE ‘DataGridMessageTutorial’ (
‘id’ int(11) NOT NULL auto_increment,
‘name’ varchar(30) default NULL,
‘message’ varchar(300) default NULL,
PRIMARY KEY  (‘id’)
) AUTO_INCREMENT=1 ;
SELECT * From DataGridMessageTutorial ORDER BY id DESC;
INSERT INTO DataGridMessageTutorial (
id,
name,
message
)
VALUES (
NULL , 'VARIABLE 1', 'VARIABLE 2'
);"

Ya que tenemos la base de datos podemos crear nuestras funciones remotas una para consultar de la base de datos y otra para insertar en ella:

<?php
Header('Cache-Control: no-cache');
Header('Pragma: no-cache');
class DataGridService
{
var $link;
function DataGridService(){ 
$this->link = mysql_connect("localhost", "verlasco_dydUser", "mypassword") or die ("No conecta con SQLSERVER");
mysql_select_db("verlasco_dyd", $this->link);
}
function getAllMessages(){
include_once("vo/com/dyd/tutorial/vo/MessageVO.php");
$Result = mysql_query("SELECT * From DataGridMessageTutorial ORDER BY id DESC;", $this->link );
while ($row = mysql_fetch_array($Result, MYSQL_ASSOC))
{
$my_user = new MessageVO();
$my_user->id = $row['id'];
$my_user->name = $row['name'];
$my_user->message = $row['message'];

$list_of_users[] = $my_user;
}
return $list_of_users;
}
function saveMessage($obj){
$sql = "INSERT INTO DataGridMessageTutorial (
id,
name,
message
)
VALUES (
NULL , '$obj->name', '$obj->message'
);";
return mysql_query(sprintf($sql));
}
}
?>

Notemos que en la línea 16 hay un new MessageVO() y en la línea 32 se accede a 2 atributos dentro de un objeto, esto es debido a un VO o Value Object esto nos permite enviar y recibir objetos entre el cliente y el servidor, del lado del servidor se construye así:

<?php
class MessageVO {
var $_explicitType = "com.dyd.tutorial.vo.MessageVO";
var $id;
var $name;
var $message;
}
?>

Ahora que tenemos el lado del servidor listo podemos empezar a crear el lado del cliente.

Entonces creemos un Datagrid y un pequeño formulario que contenga nombre y un mensaje:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
width="600" height="630" backgroundColor="0xFFFFFF" borderStyle="solid"
borderThickness="2" borderColor="0x000000" cornerRadius="8" right="2"
left="2" top="2" bottom="2"
creationComplete="creationCompleteHandler(event)"
preloader="com.dyd.tutorial.utils.PathfinderCustomPreloader">
<mx:Script>
<![CDATA[
import com.dyd.tutorial.vo.MessageVO;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------- START VARIABLES -------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

[Bindable]private var myArray:Array = []

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------- END VARIABLES --------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/


/******************************************************************************/


/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*-------------------------- START INIT FUNCTIONS ----------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

private function creationCompleteHandler(event:FlexEvent):void{
amf.getAllMessages.send();
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*--------------------------- END INIT FUNCTIONS -----------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/


/******************************************************************************/


/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*------------------------- START EVENT FUNCTIONS ----------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

/*-- START EVENT CAIRNGORM --*/



/*--- END EVENT CAIRNGORM ---*/

/***************************/

/*---- START EVENT FLEX -----*/

private function acceptHandler(event:MouseEvent):void{
if( myNameTextInput.text  && myNameTextInput.text.length>0 &&
myMessageTextArea.text  &&  myMessageTextArea.text.length>0){
var messageVO:MessageVO = new MessageVO;
messageVO.name = myNameTextInput.text.toString();
messageVO.message = myMessageTextArea.text.toString();
amf.saveMessage.send( messageVO );

}else{
Alert.show("Name or Messege is Empty","Message");
}
}
private function cancelHandler(event:MouseEvent):void{
myNameTextInput.text  = "";
myMessageTextArea.text = "";
} 
private function getAllMessageResultHandler(event:ResultEvent):void{
myArray = event.result as Array;
}
private function getAllMessageFaultHandler(event:FaultEvent):void{
Alert.show("Data Base Off Line - Refresh The Application", "Message");
}
private function seveMessageResultHandler(event:ResultEvent):void{
if(event.result == true){
myNameTextInput.text  = "";
myMessageTextArea.text = "";
amf.getAllMessages.send();
}else{
Alert.show("Data Base Can't Insert - Please Try Again", "Message");
}
}
private function seveMessageFaultHandler(event:FaultEvent):void{
Alert.show("Data Base Off Line - Refresh The Application", "Message");
}

/*----- END EVENT FLEX ------*/

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*------------------------- END EVENT FUNCTIONS ------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
]]>
</mx:Script>
<mx:RemoteObject id="amf" source="DataGridService" destination="amfphp">
<mx:method  name="getAllMessages"
result="getAllMessageResultHandler(event);"
fault="getAllMessageFaultHandler(event);"/>
<mx:method  name="saveMessage"
result="seveMessageResultHandler(event);"
fault="seveMessageFaultHandler(event);"/>
</mx:RemoteObject>
<mx:DataGrid  id="myDataGrid" width="100%" height="360"
dataProvider="{myArray}" rowHeight="65">
<mx:columns>
<mx:DataGridColumn  dataField="name" headerText="Name"
width="150" wordWrap="true"/>
<mx:DataGridColumn dataField="message" headerText="Message"
wordWrap="true"/>
</mx:columns>
</mx:DataGrid>
<mx:Form width="100%" height="183">
<mx:FormItem label="Name:" >
<mx:TextInput  id="myNameTextInput" width="330" restrict="a-z A-Z"
maxChars="30" />
<mx:Label text="Restrict: a-Z.    Max Chars: 30" color="red" />
</mx:FormItem>
<mx:FormItem label="Message:" >
<mx:TextArea  id="myMessageTextArea" width="330" height="75"
maxChars="200" />
<mx:Label text="Max Chars: 300" color="red" />
</mx:FormItem>
</mx:Form>
<mx:HBox width="300" horizontalAlign="right" >
<mx:Button label="Accept" click="acceptHandler(event);" />
<mx:Button label="Cancel" click="cancelHandler(event);" />
</mx:HBox>
</mx:Application>

Creamos el VO del Lado del Cliente también para poder recibir y enviar los mismos datos:

package com.dyd.tutorial.vo
{
[Bindable]
[RemoteClass(alias="com.dyd.tutorial.vo.MessageVO")]
public class MessageVO
{
public var id:String;
public var name:String;
public var message:String;
}
}

Y el XML que se encarga de llamar al servicio:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="amfphp-flashremoting-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">

<destination id="amfphp">
<channels>
<channel ref="my-amfphp"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
<endpoint uri="/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>

Y aquí les dejo dos imágenes en las cuales vemos como son las rutas de los archivos tanto del lado del cliente como del lado del Servidor:


Ejemplo:

In this Example we want a data grid that fills from a MySQL Database and also we want to save all the messages and name from a form so anybody can leave a message.

So for this we are going to use amfphp to connect to MySQL and flex to display everything.

The first thing we have to do is Database Logic for MySQL and a co worker and also a good friend “Joel Moya” gave me the script to create select and insert in the Database:

CREATE TABLE ‘DataGridMessageTutorial’ (
‘id’ int(11) NOT NULL auto_increment,
‘name’ varchar(30) default NULL,
‘message’ varchar(300) default NULL,
PRIMARY KEY  (‘id’)
) AUTO_INCREMENT=1 ;
SELECT * From DataGridMessageTutorial ORDER BY id DESC;
INSERT INTO DataGridMessageTutorial (
id,
name,
message
)
VALUES (
NULL , 'VARIABLE 1', 'VARIABLE 2'
);"

Know with the database ready we can create the remote function in php, we are going to create 2 function one to consult and one to Insert in the database:

<?php
Header('Cache-Control: no-cache');
Header('Pragma: no-cache');
class DataGridService
{
var $link;
function DataGridService(){ 
$this->link = mysql_connect("localhost", "verlasco_dydUser", "mypassword") or die ("No conecta con SQLSERVER");
mysql_select_db("verlasco_dyd", $this->link);
}
function getAllMessages(){
include_once("vo/com/dyd/tutorial/vo/MessageVO.php");
$Result = mysql_query("SELECT * From DataGridMessageTutorial ORDER BY id DESC;", $this->link );
while ($row = mysql_fetch_array($Result, MYSQL_ASSOC))
{
$my_user = new MessageVO();
$my_user->id = $row['id'];
$my_user->name = $row['name'];
$my_user->message = $row['message'];

$list_of_users[] = $my_user;
}
return $list_of_users;
}
function saveMessage($obj){
$sql = "INSERT INTO DataGridMessageTutorial (
id,
name,
message
)
VALUES (
NULL , '$obj->name', '$obj->message'
);";
return mysql_query(sprintf($sql));
}
}
?>

Notice that in the line 16 the is an new MessageVO() and in the line 32 I can access to properties from a object, that is because we made an VO or Value Object this value Object lets us pass Object in the functions and send it back to the client:

<?php
class MessageVO {
var $_explicitType = "com.dyd.tutorial.vo.MessageVO";
var $id;
var $name;
var $message;
}
?>

Know we have the remote side complete we need the client side.

So we are going to paint a Datagrid and a little form that contains a name and a message:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
width="600" height="630" backgroundColor="0xFFFFFF" borderStyle="solid"
borderThickness="2" borderColor="0x000000" cornerRadius="8" right="2"
left="2" top="2" bottom="2"
creationComplete="creationCompleteHandler(event)"
preloader="com.dyd.tutorial.utils.PathfinderCustomPreloader">
<mx:Script>
<![CDATA[
import com.dyd.tutorial.vo.MessageVO;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------- START VARIABLES -------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

[Bindable]private var myArray:Array = []

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------- END VARIABLES --------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/


/******************************************************************************/


/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*-------------------------- START INIT FUNCTIONS ----------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

private function creationCompleteHandler(event:FlexEvent):void{
amf.getAllMessages.send();
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*--------------------------- END INIT FUNCTIONS -----------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/


/******************************************************************************/


/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*------------------------- START EVENT FUNCTIONS ----------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

/*-- START EVENT CAIRNGORM --*/



/*--- END EVENT CAIRNGORM ---*/

/***************************/

/*---- START EVENT FLEX -----*/

private function acceptHandler(event:MouseEvent):void{
if( myNameTextInput.text  && myNameTextInput.text.length>0 &&
myMessageTextArea.text  &&  myMessageTextArea.text.length>0){
var messageVO:MessageVO = new MessageVO;
messageVO.name = myNameTextInput.text.toString();
messageVO.message = myMessageTextArea.text.toString();
amf.saveMessage.send( messageVO );

}else{
Alert.show("Name or Messege is Empty","Message");
}
}
private function cancelHandler(event:MouseEvent):void{
myNameTextInput.text  = "";
myMessageTextArea.text = "";
} 
private function getAllMessageResultHandler(event:ResultEvent):void{
myArray = event.result as Array;
}
private function getAllMessageFaultHandler(event:FaultEvent):void{
Alert.show("Data Base Off Line - Refresh The Application", "Message");
}
private function seveMessageResultHandler(event:ResultEvent):void{
if(event.result == true){
myNameTextInput.text  = "";
myMessageTextArea.text = "";
amf.getAllMessages.send();
}else{
Alert.show("Data Base Can't Insert - Please Try Again", "Message");
}
}
private function seveMessageFaultHandler(event:FaultEvent):void{
Alert.show("Data Base Off Line - Refresh The Application", "Message");
}

/*----- END EVENT FLEX ------*/

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*------------------------- END EVENT FUNCTIONS ------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
]]>
</mx:Script>
<mx:RemoteObject id="amf" source="DataGridService" destination="amfphp">
<mx:method  name="getAllMessages"
result="getAllMessageResultHandler(event);"
fault="getAllMessageFaultHandler(event);"/>
<mx:method  name="saveMessage"
result="seveMessageResultHandler(event);"
fault="seveMessageFaultHandler(event);"/>
</mx:RemoteObject>
<mx:DataGrid  id="myDataGrid" width="100%" height="360"
dataProvider="{myArray}" rowHeight="65">
<mx:columns>
<mx:DataGridColumn  dataField="name" headerText="Name"
width="150" wordWrap="true"/>
<mx:DataGridColumn dataField="message" headerText="Message"
wordWrap="true"/>
</mx:columns>
</mx:DataGrid>
<mx:Form width="100%" height="183">
<mx:FormItem label="Name:" >
<mx:TextInput  id="myNameTextInput" width="330" restrict="a-z A-Z"
maxChars="30" />
<mx:Label text="Restrict: a-Z.    Max Chars: 30" color="red" />
</mx:FormItem>
<mx:FormItem label="Message:" >
<mx:TextArea  id="myMessageTextArea" width="330" height="75"
maxChars="200" />
<mx:Label text="Max Chars: 300" color="red" />
</mx:FormItem>
</mx:Form>
<mx:HBox width="300" horizontalAlign="right" >
<mx:Button label="Accept" click="acceptHandler(event);" />
<mx:Button label="Cancel" click="cancelHandler(event);" />
</mx:HBox>
</mx:Application>

The VO we are sending we have to have it to in the client side so let’s made it:

package com.dyd.tutorial.vo
{
[Bindable]
[RemoteClass(alias="com.dyd.tutorial.vo.MessageVO")]
public class MessageVO
{
public var id:String;
public var name:String;
public var message:String;
}
}

And the XML that refers to the service:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="amfphp-flashremoting-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">

<destination id="amfphp">
<channels>
<channel ref="my-amfphp"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
<endpoint uri="/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>

Here are two image of the directory of the file from the server side and the client side:


Example:




Descargar Archivo y Ver Codigo Fuente:


Download File's and Source:

martes, 2 de junio de 2009

Cairngorm - Universal Mind Extension

Translation:
En este post se explicara paso por paso, como se lleva a cabo la ejecución de un ciclo completo de Cairngorm UM Extension. Universal Mind le agregaron una extensión al Cairngorm donde el diagrama cambia un poco.

Si queremos Ver el Cairngorm en su esquema básico podemos verlo en este interesante post en la pagina expuesta a continuación: http://internetdeveloping.blogspot.com/2009/05/ejemplo-cairngorm-agregar-contacto.html

El esquema de Universal Mind, se puede resumir en el siguiente diagrama:
This post will explain step by step, as performed by the execution of a complete cycle of UM Cairngorm Extension. Universal Mind Cairngorm Added an extension to a diagram and it change a bit from the original Cairngorm.

If we want to view the Cairngorm in its basic outline, we can visit this post that explains the bacis cicle: http://internetdeveloping.blogspot.com/2009/05/ejemplo-cairngorm-agregar-contacto.html

The scheme of Universal Mind, can be summarized in the following diagram:






domingo, 10 de mayo de 2009

Flash vs Flex

Translation:









Flash:

Es una aplicación actualmente escrita y distribuida por Adobe para la producción de contenido interactivo y animaciones, trabaja con fotogramas y el lugar de trabajo es muy parecido a cualquier programa básico de diseño.

Es capas de manejar Graficos Vectoriales, Sonido, flujos de video y se puede programar bajo Action Script en cualquiera de sus versiones, actualmente esta en la versión 3.0.

Flex:

Es una tecnología que engloba toda las practicidad de Flash, pero es orientado al desarrollo de aplicaciones dentro de un Browser. Fue iniciado originalmente como una aplicación de J2EE. Actualmente pertenece a Adobe y sus lenguajes son MXML con Action Script.

Flex Actualmente va por su versión 3.3 y recientemente salio el SDK Flex 4 y al parecer Flex Builder pasa a llamarse Flash Builder.

Flex Vs Flash

Flash es orientado más al diseño mientras que flex es orientado más a el manejo de datos.

Flex puede desarrollarse en su propio programa o se puede desarrollar en un plugin de Eclipse llamado Flex Builder, Flash tiene su aplicación, su más reciente versión es Flash CS4.

Flash se puede comunicar con otros lenguajes y puede enviarse y recibir información en cambio flex es orientado a servicios de datos según sea lo necesario, se puede conectar a Servicios HTTP de forma rápida y sin complicaciones.

Flash puede crear interpolaciones movimientos de Figuras, letras, escenarios, en flex es un poco más complicado, si queremos hacer alguna animación avanzada se tiene a usar clases que son para animaciones o simplemente se importan librerías generadas en Flash con los objetos ya animados.

Flash:

It is currently an application written and distributed by Adobe for the production of interactive content and animation, working with frames and the workplace is very similar to any basic program design.

Layer is to manage Vector Graphics, Sound, video streams and can be programmed in Action Script in any of its versions, currently in version 3.0.

Flex:

Is a technology that encompasses all the convenience of Flash, but is aimed at developing applications within a browser. It was originally started as a J2EE application. Now belongs to Adobe and their languages are MXML with Action Script.

Flex Builder currently is on version 3.3 the last release is Flex 4 and the Builder change´s the name to Flash Builder.

Flex Vs Flash

Flash is more geared to the design while flex is geared more to data management.

Flex can develop their own program or you can develop a plugin for Eclipse called Flex Builder, Flash has its application, its most recent version is Flash CS4.

Flash and Flex can communicate with other languages and can send and receive information exchange is designed to flex data services as necessary, you can connect to HTTP services quickly and without complications.

Flash can create interpolations movements of figures, letters, scripts, in flex is a bit more complicated if we want to do any animation is to use advanced classes are for entertainment or just import libraries created with Flash and animated objects.

Develop your Dream

Develop your Dream

Develop Your Dream, esta creada como pagina de referencia para los programadores. Esta página tendrá un contenido variado para el desarrollo de software, bajo varios lenguajes del mercado , sobre saltando mas los lenguajes de Action Script, tanto en Flash con las versiones AS 2.0 y AS 3.0 como en Flex con MXML y AS 3.0 programando en Eclipse 3.3.2 y el plug-in Flex Builder 3





Veremos ejemplos de conexiones básicas con Bases de Datos y la interacción del lenguaje Action Script con otros lenguajes como PHP, JAVA, ASP entre otros.

Veremos cómo crear hojas CSS y qué ventajas tiene tanto para el manejo de datos como para el diseño de un programa.

Nota: Dejen sus comentarios en cuanto a temas que quieran que publiquemos o investiguemos.

martes, 28 de abril de 2009

Tesis - Modelo de Base de Datos en MySQL - Software Educativo - Φsik Software

Fecha: Lunes 20 de Abril de 2009 y Miercoles 22 de Abril de 2009

Buenos, Básicamente lo que hicimos fue sentarnos a desglosar el proyecto en pequeños pedazos, lo más básicos y ver como se podrían modelar en una Base de Datos cada uno de esos pedacitos.

Tenemos dos tipos de usuarios:
  • Estudiantes
  • Profesores

Un Profesor puede:
  • Crear, modificar o eliminar una teoría.
  • Crear, modificar o eliminar Proyectos.
  • Crear, modificar o eliminar una Periodo Académico.
  • Crear, modificar o eliminar Secciones.
  • Consultar Alumnos.
  • Otorgar Privilegios de Proyectos a los Estudiantes.
  • Consultar Records.
  • Crear, Modificar o Eliminar su Perfil.

Un Estudiante puede:
  • Crear, Modificar o Eliminar su perfil.
  • Consultar la Teoría.
  • Consultar los Proyecto bajo los que tenga permiso.
  • Consultar Estadísticas Globales.
  • Consultar Estadísticas o record Personales .

Este fue el primer enfoque, en el cual creamos las tablas para ver como quedaría mas o menos la Base de Datos.


Luego de tener el primer modelo, nos sentamos a ver donde estamos redundando y cuáles son los posibles caminos de consulta y salió el segundo modelo de Base de Datos el cual está sujeto a más cambios en los próximos días.



El modelo va a crecer mucho mas pero este es una base de cómo se vería, esta prestado a crecer más por el lado de crear proyectos ya que no hemos puesto todas las posibles tablas que va asociadas a proyecto ya que no se ha planteado los componentes que van asociados a él y los posibles problemas de los mismos. Pero se estiman 10 tablas mas asociadas a proyecto.

lunes, 27 de abril de 2009

Flex Google Maps - Tags y Menu Personalizado - Custom Tags and Menu - Flex 3



Translation:
Lo primero que debemos hacer para poder programar con los mapas de Google es bajarnos el api, el cual lo podemos encontrar en la siguiente dirección SDK Google Maps, luego necesitaremos una clave para poder usar el mapa de Google el cual podemos encontrarlo en esta página Google Maps Key, con estos dos requisitos estamos listos para jugar un poco con los mapas de Google, su página de ayuda tiene muchos ejemplos y cosas que podemos hacer sobre el mapa de ellos, esta ayuda la podemos encontrar en esta pagina Google Maps Doc.
The first thing we have to do to be able to develop with Google Maps is to download the API, this API we can find it in this link SDK Google Maps. The next thing we have to do to be able to use Google Map is go to a Google maps page and agree with some terms so we can get an Map Key we can get this Key in this link Google Maps Key. With these two things we are now ready to play a little with Google maps. Google Maps has a lot and very good info and doc’s and even better they have examples that can guide us through Google Map, this link is Google Maps Doc’s.



Como muchas veces no queremos lo que unos ofrece un API sino queremos jugar con varias cosas a la vez, con esto me refiero a que queremos botones más vivos tags que sean animados y aplicar nuestro propio toque a nuestras aplicaciones, Google nos ofreció algo maravilloso llamado OVERLAY un overlay traducido es una capa que se le coloca encima a algo. Los tags y las figuras básicas que ofrece Google son overlay pero Google dentro de esto nos ofrece el CUSTOM OVERLAY, ahí es donde entra nuestra imaginación. Esto lo podemos leer en la sección de ayuda de Google Maps en esta página Google Maps Custom Overlay.
Often we like to do something more complex than the API can provide, so we have to use other language to do so, with this am talking about nice buttons o tag over the map that we can animate easily or even breather, put own on touch in to the development in that we are best.
Google Offers us an tool inside the API called OVERLAY, the OVERLAY in nothing more than a layer that we can just put over the map and do most anything with it, so we can develop over custom and complex tags.

Google offers overlays so you can use their tag and some basic geometric figures, but our custom develops , you are going to use CUSTOM OVERLAY, all of Custom Overlays we can read it in this page Google Maps Custom Overlay.



En una página de adobe Daniel Terraza, un compañero de trabajo y quien me ayudo a programar este componente de prueba, vio unos tags en flex y se nos predio la luz de combinar estos tags con el Google Maps. Estos Tags los pueden conseguir en la página de Adobe como un componente simple, jajajaa cosa que para muchos principiantes en Flex no se les hará tan simple pero ellos dicen que es simple, les dejo la pagina (http://www.adobe.com/devnet/flex/samples/fig_callout/) . En tutoriales futuros hablaremos de Efectos y Transiciones, que fue como se logro este componente, hecho por Adobe, no vi el autor por ningún lado así que no lo menciono.
In a page of adobe Daniel Terrace, a fellow worker and who help me to program this map component, he saw these tags in flex and we thought that way not we out booth together, the tags with Google Maps. We can obtain this Tags in the page of Adobe like a simple component, Hear is the page (http://www.adobe.com/devnet/flex/samples/fig_callout/). In future tutorials we will speak of Effects and Transitions.

Los botones fueron Diseñados Melisa Correia, una compañera de trabajo, estos botones fueron creados usando AI y FL los cuales fueron importados como Skins usando las herramientas que brinda Adobe.

Los dos canvas con color degradado fue sacado de Gradient Canvas y su autor es Arnaud FOUCAL.

The buttons were designed Melisa Correia, a fellow worker, these buttons were created using AI and FL which were imported into flex like Skins having used the tools that Adobe offers.

The canvas with degraded color was found from Gradient Canvas and his author is Arnaud FOUCAL excellent Job me I say.






Descargar Archivo y Ver Codigo Fuente:


Download File's and Source: