Stan! [ topics ]

ActionScript 3.0 Para Bobos!

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 26 Sep 2008 19:03:34 -0500

Hola! Hoy estoy dispuesto a escribir una serie de posts que resuman en pocas palabras todo lo que puede hacer ActionScript 3.0 (AS3) por ustedes, sean o no sean programadores.

Empecemos ya!

Hay varias formas de programar con ActionScript 3.0:

Desarrollando aplicaciones con Adobe Flex Builder.
El compilador oficial de ActionScript 3.0 que es gratuito!!
O usando el entorno original que le dio vida al ActionScript, el Flash, en su versión 9, mejor conocida como Adobe Flash CS3 Professional. Este es mi método preferido!! Flash aún es flexible con algunos detalles de la sintaxis. Es importante resaltar que las versiones anteriores de Flash no soportan ActionScript 3.0.

¿Cómo hacer una aplicación con ActionScript 3.0 con el compilador gratuito? Para los pobres como yo.

Primero debes conseguir el Flex SDK 2 (38MB) en la siguiente liga:

http://www.adobe.com/products/flex/downloads/

O si eres más desesperado, el Flex SDK 3 (76.2MB):

http://labs.adobe.com/downloads/

Lo instalas.

Copia el siguiente código y guardalo en un archivo que se llame HolaMundo.as:


package {
	import flash.display.Shape;
	import flash.display.SimpleButton;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.text.TextFieldAutoSize;
	
	public class HolaMundo extends Sprite {
		protected var _balloon:Shape;
		protected var _button:SimpleButton;
		
		public function HolaMundo() {
			drawBalloon();
			drawHello();
			drawButton();
			
			x = (500 - width) / 2;
			y = (300 - height) / 2;
			alpha = 0;
			addEventListener(Event.ENTER_FRAME,upAlpha);
		}
		
		private function getANewTextFormat(color:uint):TextFormat {
			var format:TextFormat = new TextFormat();
			format.font = "Trebuchet MS,Arial";
			format.align = TextFormatAlign.CENTER;
			format.bold = true;
			format.color = color;
			format.letterSpacing = -4;
			format.size = 50;
			return format;
		}
		
		private function getANewRect(width:uint,height:uint,color:uint=0):Shape {
			var rect:Shape = new Shape();
			rect.graphics.beginFill(color);
			rect.graphics.drawRect(0,0,width,height);
			rect.graphics.endFill();
			return rect;
		}
		
		private function drawBalloon():void {
			_balloon = new Shape();
			_balloon.graphics.beginFill(0x0099CC);
			_balloon.graphics.drawRoundRect(0,0,200,150,100);
			_balloon.graphics.moveTo(150,150);
			_balloon.graphics.lineTo(150,200);
			_balloon.graphics.lineTo(100,150);
			_balloon.graphics.endFill();
			addChild(_balloon);
		}
		
		private function drawHello():void {
			var hello:TextField = new TextField();
			hello.autoSize = TextFieldAutoSize.CENTER;
			hello.defaultTextFormat = getANewTextFormat(0xFFFFFF);
			hello.text = "Hola\nMundo!";
			hello.x = 20;
			hello.y = 10;
			addChild(hello);
		}		
		
		private function drawButton():void {
			_button = new SimpleButton();
			_button.hitTestState = _balloon;
			_button.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
			_button.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
			_button.addEventListener(MouseEvent.ROLL_OVER,onRollOver);
			_button.addEventListener(MouseEvent.ROLL_OUT,onRollOut);
			addChild(_button);
		}
		
		private function upAlpha(event:Event):void {
			if (alpha < 1)
				alpha += .1
		}

		private function downAlpha(event:Event):void {
			if (alpha > .4)
				alpha -= .1
		}
		
		private function onRollOver(event:MouseEvent):void {
			removeEventListener(Event.ENTER_FRAME,upAlpha);
			addEventListener(Event.ENTER_FRAME,downAlpha);
		}
		
		private function onRollOut(event:MouseEvent):void {
			removeEventListener(Event.ENTER_FRAME,downAlpha);
			addEventListener(Event.ENTER_FRAME,upAlpha);
		}
		
		private function onMouseDown(event:MouseEvent):void {
			startDrag();
		}

		private function onMouseUp(event:MouseEvent):void {
			stopDrag();
		}
	}
}

Ejecuta Adobe Flex 2 SDK Command Prompt, para ello debes hacer click en el Menú Inició » Programas » Adobe » Adobe Flex 2 SDK Command Prompt. Se abrirá una ventana del Símbolo del Sistema de Windows, con el classpath ya modificado para encontrar los compiladores y librerias de ActionScript.

Usando el Símbolo de Sistema, muévete al directorio donde guardaste el archivo HolaMundo.as y compilalo así:

mxmlc.exe HolaMundo.as

O con un tamaño personalizado:

mxmlc.exe -default-size 500 300 HolaMundo.as

Y listo! Ahora tienes un archivo HolaMundo.swf en el mismo directorio. Tal vez algunas rutas sean diferentes, pero el archivo mxmlc.exe es el compilador de ActionScript 3.

¿Cómo hacer una aplicación con ActionScript 3.0 usando Adobe Flash CS3 Professional?

Uy! Hay un montón de formas de programar, pero la que yo recomiendo ampliamente es usando una Document Class. Una Document Class es un archivo AS que esta ligado a un archivo FLA. Entonces puedes hacer lo que quieras en tu documento FLA como siempre lo has hecho con Flash, poner dibujitos, sonidos, películas y fotos, pero todo el código lo pones en uno o varios archivos AS.

Para que funcione, es importante que escribas el nombre de la clase principal en el cuadrito Document Class que aparece en el panel Properties cuando haces click sobre el escenario. Obviamente es importante guardar todos los archivos en el mismo directorio (o si tú ya entiendes paquetes, entonces esto no es necesario).

Al probar la película (CTRL + ENTER), se ejecuta el constructor de la clase principal.

Puedes probar el código de arriba. Guárdalo en un archivo que se llame HolaMundo.as. Abre el Flash CS3 y crea un nuevo documento File » New... » Flash File (ActionScript 3.0) » Aceptar y escribe HolaMundo en el cuadrito Document Class. Presiona CTRL + ENTER para correr la película.

¿Cómo hacer una aplicación con ActionScript 3.0 usando Adobe Flex Builder 2?

Ok, tienes una versión de prueba de Adobe Flex Builder 2. Puedes hacer legal tu copia solicitando un número de serie gratis para estudiantes en la siguiente liga:

http://www.flexregistration.com/

Si ya tienes el Flex, debes crear un nuevo proyecto haciendo click en File » New » ActionScript Project, escribes un nombre para el proyecto, en el ejemplo será HolaMundo y después haces click en Finish.

Entonces, se abre el archivo HolaMundo.as en el panel central. Borra todo el código existente y pégale el código de arriba. Guarda los cambios y presiona CTRL + F11 para correr tu proyecto. Entonces estarás enfrente de tu primera aplicación con Adobe Flex Builder!

Entonces ¿Cuál Usar?

Ok, ya probamos los tres métodos, ¿cuáles son las ventajas y desventajas de cada uno? Yo sigo siendo novato en estas tecnologías, y desconozco si se pueden configurar algunos detalles en cada uno, pero por mi experiencia podría enumerar las siguientes características.

	Flex SDK (Compilador mxmlc.exe)	Flash CS3 Professional	Flex Builder 2
Lista de métodos, propiedades y paquetes al codificar.	No tiene esto.	Flash te ayuda con los nombres de propiedades y métodos cuando él quiere (no funciona en todas las situaciones).	Flex siempre te muestra una lista de métodos y propiedades.
Genera archivos SWF.	Sip.	Claro.	También.
Genera archivos SWF con tamaño fijo (sin ayuda de un HTML o XHTML).	Sip, si usas las opciones `-default-size 800 600` a la hora de compilar, donde 800 es el ancho y 600 es el alto.	Sí, las dimensiones son las mismas que se han definido en el archivo FLA.	Sí, Flex Builder tiene valores predeterminados de 500x375, pero estos valores se pueden modificar si se hace click con el botón derecho sobre el nombre del proyecto en el panel Navigator y se selecciona Properties » ActionScript Compiler y en el cuadro de texto Aditional compiler arguments: se escribe `-default-size 800 600`.
Componentes	Sí, están incluidos en el SDK, pero al compilar se debe agregar esos directorios al classpath.	Sí, en el menú Window » Components se abre un panel con TextInput, CheckBox, ComboBox, FLVPlayback .. entre otros componentes. Si los componentes se colocan sobre el escenario, Flash relaciona estás clases automáticamente (modifica el classpath automáticamente). Sino se arrastran sobre el escenario, habrá que localizar el directorio de estas clases y agregarlos al classpath manualmente en Edit » Preferences » ActionScript » ActionScript 3.0 Settings.	Oops, pues están incluidos en el SDK, pero son fáciles de arrastrar sólo cuando se trabaja con MXML y no en proyecto ActionScript, de otra forma habrá que agregar los directorios al classpath.
Ayuda y documentación.	No tiene, pero incluye algunos ejemplos.	Sí, tiene ayuda y es muy buena. Escribe algo mientras programas, colócate encima y presiona F1. Al instante tendrás lo que buscas.	Sí tiene, pero es muy lenta y no es tan intuitiva.
Opciones para debuguear.	Sí, al compilar deberas usar `-debug` para mostrar información adicional.	Sí, presiona CTRL + SHIFT + ENTER para debuguear la película. (Sólo así funcionan los breakpoints.)	Sí, presiona F11 para debuguear. Los mensajes de `trace()` los podrás ver en el panel Console.
La mejor ventaja que tiene.	Es gratis.	Puedes hacer un dibujo usando las herramientas de dibujo, lo seleccionas y lo conviertes en MovieClip presionando la tecla F8. Esto te ahorrara algunos `lineTo()`, `drawCircle()`, `beginFill()` y `lineStyle()`.	Flex Builder está completamente orientado a la creación de RIAs. Es compatible con muchos otros lenguajes de programación, servidores y frameworks.

Conclusiones

Ok! Si llegaste hasta aquí, es momento de comenzar a programar con ActionScript 3.0. Digo, son vacaciones y tú estás leyendo el blog de Stan!!! Seguro te sobra algo de tiempo. :P

Algunos tips para migrar de ActionScript 2 a ActionScript 3, escritos por la líder (MUJER!!) del proyecto Adobe Flash Player, los pueden encontrar en:

http://www.adobe.com/devnet/actionscript/articles/actionscript_tips.html

Y para entender la nueva estructura de los archivos SWF, les recomiendo:

http://www.adobe.com/newsletters/edge/may2007/articles/article6/index.html?trackingid=ZCEF

Si algo no se entiende bien, puedes dejar los comentarios que quieras a continuación y trataré de ayudarte.

Feliz año 2008!!

Adios 2007 (Lo Que El 2007 Se Llevó)

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 26 Sep 2008 19:03:13 -0500

Por cuarto ocasión gastaré los últimos instantes del año, escribiendo un resumen de actividades (pueden recordar el 2006, 2005 y 2004).

Claro! Es una forma muy sana de ver que estuvo bien y que no estuvo bien este año. Este año el reporte de actividades será breve.

ESTE AÑO ME FUE MUY BIEN!!

Así de breve.

Tengo que agradecer a todos mis amigos, a todos mis nuevos amigos y a todos mis no amigos. :]

También quiero listar las 12 canciones que me van a recordar el 2007, una actividad que comenzó Gris hace algunos días:

La Luna - Volovan con Ximena Sariñana _{(del mismo disco que Britany y Monitor)}
September / The Joker - Earth Wind And Fire / Fatboy Slim (ATFC's Aces High Remix) _{(Babel Soundtrack, donde también pueden encontrar Tú Me Acostumbraste)}
Lámpara De Lava - Furland _{(del mismo disco que Robot y Tour De France)}
Cintiana - Pastilla _{(del mismo disco que A Marte, Lamento y Colores)}
Agrío Silencio - Las Ultrasónicas _{(del mismo disco que El Rock De La Pájara Peggy)}
Le Festin - Camille _{(Ratatouille Soundtrack)}
Alma Gemela - El Otro Yo _{(del mismo disco que El Final Del Planeta)}
Hip Hop No Pares - Instituto Mexicano del Sonido (IMS) _{(del mismo disco que Escríbeme Pronto)}
Me Haces Existir - Monocordio _{(del mismo disco que Nada Tiene Color Sin La Luz Del Amor y Siempre Te Busqué)}
Quiero Ver - Café Tacuba
Hold Me Tight - Evan Rachel Wood _{(Across The Universe Soundtrack, donde también pueden encontrar Hapinness Is A Warm Gun y Blue Jay Way)}
No One - Alicia Keys _{(del mismo disco que Teenage Love Affair y Wreckless Love, disco 36 en la lista Rolling Stone USA)}

En ese orden fueron apareciendo las canciones en mi 2007. ¿Tú tienes tu lista de canciones del 2007?

Los mejores momentos del año fueron:

Bill Gates en México. Yo odio la forma en que Microsoft se roba todas las ideas, pero todo lo que sucedió ese día en el evento estuvo interesante.
Creative Suite 3 Tour en el Salón 21. Las compañías de software pocas veces hacen eventos en nuestra ciudad, o nunca me entero. Había muchos bocadillos gratis, y cosas como Apollo (ahora AIR), InDesign, Spry, Contribute y hasta Photoshop me sorprendieron ese día.
Festival Vive Latino. Dos días repletos de música y comida.
Concierto de Soda Stereo. Gracias a mi hermana conseguí un boleto un día antes.
Concurso ACM en Querétaro. Justo cuando salté porque mi equipo ganó un recorrido por la noche en las calles de Querétaro.
Comprar una cámara nueva. Después de haber descompuesto la Cannon el año pasado, ahora tengo una Cybershoot para entretenerme.
Trabajar en un edificio de Insurgentes Sur. Sí, me tocó trabajar en Insurgentes. A la hora de la comida, salen miles de personas por todos lados a comer. Tuve que aprender ASP .NET de verdad. Debo reconocer que ASP .NET tiene sus ventajas, pronto pondré mis propios tips para migrar de PHP a ASP .NET.

Y mi sitio?

¿Qué puedo decir de mi sitio personal? Este año el sitio emigró de la versión 7 a la versión 8. Este año, pagar el dominio nos salió más caro que lo que le cuesta a Memo ir cada quincena por la Revista R&R.

Propositos? Y Deseos!

Uy! Como me cuesta trabajo cumplir los propositos, pero sí tengo unos para este año.

Aprender programación dinámica. Como sufro por no saber este tema y otros temas relacionados.
Dejar de imaginar y ponerme a programar. Tengo una lista de aplicaciones pendientes por programar.
Convencer al mundo de que ActionScript no hace daño. Caray! Espero que Mike Chambers y sus amigos visiten México este año.
Cambiar de sistema operativo.
Aprender inglés. Para que no me manden a freír espárragos.
Ser más hábil en el taller de teatro. Aprenderme los diálogos y no olvidar salir al escenario. Eso si aún no me han sacado del taller.

Y los deseos son:

Un viaje a Europa! (Por eso son deseos, no?)
Que Mike Chambers y sus amigos vengan a México.
Que abran pronto la Biblioteca Vasconcelos.
Y paz y felicidad infinita para todos mis amigos y conocidos!!

Colores Sin Sentido (Aprendiendo ActionScript 3.0)

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 26 Sep 2008 19:02:59 -0500

Ya estoy de vuelta con la segunda aplicación en ActionScript 3.0.

Características:

Puedes escribir el valor RGB en hexadecimal de un color en el cuadro rosa (justo abajo de la flecha). Luego debes hacer click en OK o dar un ENTER.
Al pasar el ratón encima de algún tono, se despliega una etiqueta con el valor RGB de ese color.
También es posible hacer click en cualquiera de los colores de la derecha, y automáticamente ese color pasara a ser el color del centro del panel.

A continuación pueden encontrar el código de esta apliacación. Es totalmente libre, o sea, pueden hacer con él lo que quieran.

Primero necesitamos un archivo NonsenseColors.as:


/**
 * Nonsense Colors (A Palette Color Generator)
 * Gilberto Stankiewicz 
 * http://www.stan.com.mx
 * January 2008
 */
 
package {
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.display.SimpleButton;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	import flash.text.TextFieldAutoSize;
	import flash.ui.Keyboard;
	import NonsenseSquare;
	import GiveMeA;
	
	public class NonsenseColors extends Sprite {
		protected var _arrow:Shape;
		protected var _textInput:TextField;
		protected var _button:SimpleButton;
		protected var _squares:Array;
		
		public function NonsenseColors() {
			drawArrow();
			drawTextInput();
			drawButton();
			drawAds();
			drawSquares();
			changeColor();
		}
		
		private function drawArrow():void {
			_arrow = new Shape();
			_arrow.graphics.beginFill(0xFF0099);
			_arrow.graphics.curveTo(100,0,100,100);
			_arrow.graphics.lineTo(150,100);
			_arrow.graphics.lineTo(150 / 2,200);
			_arrow.graphics.lineTo(0,100);
			_arrow.graphics.lineTo(50,100);
			_arrow.graphics.curveTo(50,50,0,50);
			_arrow.graphics.lineTo(0,0);
			_arrow.graphics.endFill();
			addChild(_arrow);
		}
		
		private function drawTextInput():void {
			_textInput = new TextField();
			_textInput.type = TextFieldType.INPUT;
			_textInput.border = true;
			_textInput.background = true;
			_textInput.multiline = false;
			_textInput.maxChars = 6;
			_textInput.restrict = "A-F 0-9";
			_textInput.defaultTextFormat = GiveMeA.newTextFormat(0x000000);
			_textInput.height = _textInput.textHeight * 1.2;
			_textInput.width = 80;
			_textInput.borderColor = 0xFF0099;
			_textInput.text = "FF0099";
			_textInput.x = 40;
			_textInput.y = 220;
			_textInput.addEventListener(KeyboardEvent.KEY_DOWN,onKey);
			addChild(_textInput);
		}
		
		private function createButtonText():TextField {
			var buttonText:TextField = new TextField();
			buttonText.width = _textInput.width;
			buttonText.height = _textInput.height;
			buttonText.defaultTextFormat = GiveMeA.newTextFormat(0xFFFFFF);
			buttonText.text = "Ok";
			return buttonText;
		}
		
		private function createButtonState(color:uint):Sprite {
			var sprite:Sprite = new Sprite();
			sprite.addChild(GiveMeA.newRect(_textInput.width,_textInput.height,color));
			sprite.addChild(createButtonText());
			return sprite;
		}
		
		private function drawButton():void {
			_button = new SimpleButton();
			_button.upState = createButtonState(0xFF0099);
			_button.overState = createButtonState(0xFF3300);
			_button.downState = createButtonState(0x663300);
			_button.hitTestState = _button.upState;
			_button.x = 40;
			_button.y = _textInput.y + _textInput.height + 10;
			
			_button.addEventListener(MouseEvent.CLICK,onButtonClick);
			addChild(_button);
		}
		
		private function drawAds():void {
			var stanAd:TextField = new TextField();
			stanAd.autoSize = TextFieldAutoSize.RIGHT;
			stanAd.defaultTextFormat = GiveMeA.newTextFormat(0xD0D0D0);
			stanAd.text = "STAN.COM.MX";
			stanAd.x = 10;
			stanAd.y = 340 - stanAd.textHeight;
			addChild(stanAd);
		}
		
		private function drawSquares():void {
			var panel:Sprite = new Sprite();
			var side:uint = 50;
			var square:NonsenseSquare;
			_squares = new Array();
			
			for (var j:uint = 0; j < 7; j++) {
				for (var i:uint = 0; i < 7; i++) {
					square = new NonsenseSquare(side * i,side * j,this);
					panel.addChild(square);
					_squares.push(square);
				}
			}
			
			panel.x = 200;
			panel.y = 0;
			addChild(panel);
		}
		
		private function onKey(event:KeyboardEvent) {
			if (event.keyCode == Keyboard.ENTER)
				changeColor();
		}
		
		private function onButtonClick(event:MouseEvent) {
			changeColor();
		}
		
		public function changeTextInput(text:String):void {
			_textInput.text = text;
			changeColor();
		}
		
		private function checkColor(color:int):uint {
			if (color > 255)
				return 255;
			if (color < 0) 
				return 0;
			return color;
		}
		
		private function changeColor():void {
			var i:uint = 0, j:uint = 0;
			var mRed:uint, mGreen:uint, mBlue:uint;
			var color:uint = parseInt("0x" + _textInput.text);
			var red:uint = (color & 0xFF0000) >> 16;
			var green:uint = (color & 0x00FF00) >> 8;
			var blue:uint = (color & 0x0000FF);
			var mX:uint = 10, mY:uint = 22;
			
			for each (var square:NonsenseSquare in _squares) {
				mRed = mGreen = mBlue = 0;
				if (j != 0 || j != 6)
					mRed = mX * (i - 3) + mY * (j - 3);
				if (j != 1 || j != 5)
					mGreen = mX * (i - 3) + mY * (j - 3);
				if (j != 2 || j != 4)
					mBlue = mX * (i - 3) + mY * (j - 3);
				
				if (++i >= 7) {
					i = 0;
					j++;
				}

				square.changeColor(checkColor(red + mRed), checkColor(green + mGreen), checkColor(blue + mBlue));
			}
		}
	}
}

Otra clase NonsenseSquare.as:


package {
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.display.SimpleButton;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.ColorTransform;
	import flash.text.TextField;
	import GiveMeA;
	
	public class NonsenseSquare extends Sprite {
		protected var _square:Shape;
		protected var _button:SimpleButton;
		protected var _label:TextField;
		protected var _grandfather:NonsenseColors;
		protected var _width:uint;
		protected var _height:uint;
		
		public function NonsenseSquare(posX:Number,posY:Number,grandfather:NonsenseColors) {
			x = posX;
			y = posY;
			_grandfather = grandfather;
			_width = 50;
			_height = 50;
			drawSquare();
			drawLabel();
			drawButton();
		}
		
		protected function drawSquare():void {
			_square = GiveMeA.newRect(_width,_height);
			addChild(_square);
		}

		protected function drawButton():void {
			_button = new SimpleButton();
			_button.hitTestState = _square;
			_button.addEventListener(MouseEvent.ROLL_OVER,onMouseOver);
			_button.addEventListener(MouseEvent.ROLL_OUT,onMouseOut);
			_button.addEventListener(MouseEvent.CLICK,onMouseClick);
			addChild(_button);
		}
		
		protected function drawLabel():void {
			_label = new TextField();
			_label.background = true;
			_label.backgroundColor = 0xFFFFCC
			_label.defaultTextFormat = GiveMeA.newTextFormat(0x555555);
			_label.text = "Ok";
			_label.height = _label.textHeight * 1.2;
			_label.width = 70;
			_label.visible = false;
			addChild(_label);
		}
		
		protected function onMouseOver(event:MouseEvent) {
			parent.setChildIndex(this,parent.numChildren - 1);
			_label.visible = true;
			addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
		}
		
		protected function onMouseOut(event:MouseEvent) {
			_label.visible = false;
			removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
		}
		
		protected function onMouseMove(event:MouseEvent) {
			_label.x = event.localX;
			_label.y = event.localY - _label.height;
		}
		
		public function onMouseClick(event:MouseEvent) {
			_grandfather.changeTextInput(_label.text);
		}
		
		public function decToHex(dec:uint):String {
			var str:String;
			str = "0" + dec.toString(16);
			return str.substr(-2).toUpperCase();
		}
		
		public function changeColor(red:uint,green:uint,blue:uint):void {
			_square.transform.colorTransform = new ColorTransform(0,0,0,1,red,green,blue);
			_label.text =  decToHex(red) + decToHex(green) + decToHex(blue);
		}
	}
}

Y una clase más, GiveMeA.as:


package {
	import flash.display.Shape;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	
	public class GiveMeA {
		public static function newRect(width:uint,height:uint,color:uint=0):Shape {
			var rect:Shape = new Shape();
			rect.graphics.beginFill(color);
			rect.graphics.drawRect(0,0,width,height);
			rect.graphics.endFill();
			return rect;
		}
	
		public static function newTextFormat(color:uint=0,size:uint=0,align:String=null,font:String=null):TextFormat {
			var format:TextFormat = new TextFormat();
			format.align = (align == null ? TextFormatAlign.CENTER : align);
			format.bold = true;
			format.blockIndent = 5;
			format.color = color;
			format.font = (font == null ? "Trebuchet MS,Arial" : font);
			format.size = (size == 0 ? 14 : size);
			return format;
		}
	}
}

Si no sabes como empezar, te recomiendo otro post que escribí:

ActionScript 3.0 Para Bobos!

Introducción A La Programación Dinámica

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 26 Sep 2008 19:02:40 -0500

Hace pocos días, los muchachos de Bátiz y Martín me dieron una clase de programación dinámica. Los pasos para dominar esta técnica son:

1. Tener Un Problema Que Se Resuelva Con Programación Dinámica

Creo que un borrego necesita recorrer un tablero de Y filas y X columnas, empieza en la casilla superior izquierda y termina en la casilla inferior derecha. Cada casilla tiene un costo en vitaminas y el borrego quiere gastar la menor cantidad de vitaminas posibles.

Por cierto, el borrego sólo puede caminar para abajo y para la derecha.

Ajá! Un mínimo! Dicen que si el problema te pide un mínimo o un máximo, entonces huele a programación dinámica.

Una posible entrada para este problema sería:

2. Dibujar El Árbol De Búsqueda

Como verán, el árbol tiene un crecimiento exponencial en potencias de dos (2ⁿ).

Algunos nodos como el y=1,x=1 se calculan varias veces. Más adelante podemos utilizar memorización para ahorrar cálculos.

3. Versión Backtracking

Esa búsqueda tiene una implementación con Backtracking muy sencilla.


#include <iostream>
#include <climits>

#define Y_MAX 1111
#define X_MAX 1111

using namespace std;

int Y, X;
int tablero[Y_MAX][X_MAX];

int minimo (int a, int b) {
	return (a < b ? a :  b);
}

int f (int y, int x) {
	// destino final
	if (y == Y - 1 && x == X -1)
		return tablero[y][x];
	// fuera del tablero
	if (x >= X || y >= Y)
		return INT_MAX;
	// calcular el mejor camino desde aquí
	return minimo(f(y + 1, x), f(y, x + 1)) + tablero[y][x];	
}

int main () {
	cin >> Y;
	cin >> X;
	
	// entrada
	for (int y = 0; y < Y; y++) {
		for (int x = 0; x < X; x++) {
			cin >> tablero[y][x];
		}
	}
	
	// salida
	cout << f(0, 0) << endl;
}

4. Versión Backtracking Con Memorización

Guardar en memoria los valores ya calculados, evita calcular varias veces el mismo dato y mejora considerablemente el tiempo.


#include <iostream>
#include <climits>

#define Y_MAX 1111
#define X_MAX 1111

using namespace std;

int Y, X;
int tablero[Y_MAX][X_MAX];
int poda[Y_MAX][X_MAX];

int minimo(int a, int b) {
	return (a < b ? a :  b);
}

int f(int y, int x) {
	// destino final
	if (y == Y - 1 && x == X -1)
		return tablero[y][x];
	// fuera del tablero
	if (x >= X || y >= Y)
		return INT_MAX;
	if (poda[y][x] == 0)
		poda[y][x] = minimo(f(y + 1, x), f(y, x + 1)) + tablero[y][x];
	return 	poda[y][x];
}

int main () {
	cin >> Y;
	cin >> X;
	
	// entrada
	for (int y = 0; y < Y; y++) {
		for (int x = 0; x < X; x++) {
			cin >> tablero[y][x];
		}
	}
	
	// salida
	cout << f(0, 0) << endl;
}

5. Encontrar La Función De Programación Dinámica

Una implementación con Programación Dinámica será más eficiente. ¿Pero cómo se calculan los valores? Analizando el árbol, se ve que el valor de un nodo depende de los siguientes nodos.

Entonces, para llenar la tabla deberá de llenarse primero los niveles más avanzados. En este caso sería de abajo para arriba y de izquierda a derecha.

Cada condición del backtracking se debe analizar para ver si se incluyen en la versión dinámica o no. En este caso son los límites if (x >= X || y >= Y).

La importancia de la programación dinámica es eliminar la recursividad.

6. Versión Programación Dinámica


#include <iostream>
#include <climits>

#define Y_MAX 1111
#define X_MAX 1111

using namespace std;

int Y, X;
int tablero[Y_MAX][X_MAX];

int minimo(int a, int b) {
	return (a < b ? a :  b);
}

int main () {
	cin >> Y;
	cin >> X;
	
	// entrada	
	for (int y = 0; y < Y; y++) {
		for (int x = 0; x < X; x++) {
			cin >> tablero[y][x];
		}
	}
	
	// poner infinitos
	for (int y = 0; y < Y; y++) {
		tablero[y][X] = INT_MAX;
	}
	
	for (int x = 0; x < X; x++) {
		tablero[Y][x] = INT_MAX;
	}
	
	// poner ceros en casillas adyacentes a la casilla final
	tablero[Y-1][X] = 0;
	tablero[Y][X-1] = 0;
	
	// programación dinámica
	for (int y = Y - 1; y >= 0; y--) {
		for (int x = X - 1; x >= 0; x--) {
			tablero[y][x] += minimo(tablero[y + 1][x], tablero[y][x + 1]);
		}
	}
	
	// salida
	cout << tablero[0][0] << endl;
}

7. Prueba De Escritorio

Al finalizar la ejecución, el tablero en memoria debe terminar así:

8. Resultados Interesantes

Por último, analicemos los tiempos (en milisegundos) con cada versión y diferentes casos de prueba.

Caso De Prueba	Backtracking	Backtracking Con Memorización	Programación Dinámica
10x10	35	35	35
100x100	mucho	75	70
1000x1000	muchísimo	3895	3844

¿Cómo Resolver Un Juego De Mesa Con C++?

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 26 Sep 2008 19:02:25 -0500

Alguna vez un amigo me regaló un juego de mesa que se hace llamar Solitario.

La forma de jugar es mover una pieza por encima de otra, o sea, brincarla. Entonces la pieza que nos hemos saltado, debe desaparecer del tablero, nos la comemos. Más o menos como se juega en las damas inglesas. Al final debe quedar solo una pieza en el tablero.

Entonces tenemos un programita que puede encontrar un montón de soluciones para este problema.


#include <iostream>
#include <conio.h>

using namespace std;

int tablero[5][5];
int pila[15][4];
int piezas;

void llenarTablero () {
	for (int i = 0; i < 5; i++) {
		for (int j = 0; j <= i; j++) {
			tablero[i][j] = 1;
		}
	}
}

void imprimirTablero () {
	for (int i = 0; i < 5; i++) {
		for (int j = 0; j < 4 - i; j++) {
			cout << " ";
		}
		for (int j = 0; j <= i; j++) {
			cout << tablero[i][j] << " ";
		}
		cout << endl;
	}
}

void imprimirPila () {
	cout << endl;
	for (int i = 0; i < 13; i++) {
		cout << pila[i][0] << "," << pila[i][1] << " > " << pila[i][2] << "," << pila[i][3] << endl;
	}
	cout << endl;
	getch();
}

void deshacerBrinco(int y0, int x0, int y1, int x1, int y2, int x2) {
	// ocupar posición inicial
	tablero[y0][x0] = 1;
	// ocupar posision intermedia
	tablero[y1][x1] = 1;
	// desocupar posición final 
	tablero[y2][x2] = 0;
}

// 0s son posición inicial
// 1s son posición intermedia
// 2s son posición final
int hacerBrinco (int y0, int x0, int y1, int x1, int y2, int x2) {
	// posición final dentro del tablero
	if (y2 >= 0 && y2 < 5 && x2 >= 0 && x2 <= y2) {
		// posición intermedia ocupada
		// posición final vacía
		if (tablero[y1][x1] == 1 && tablero[y2][x2] == 0) {
			// desocupar posición inicial
			tablero[y0][x0] = 0;
			// desocupar posision intermedia
			tablero[y1][x1] = 0;
			// ocupar posición final 
			tablero[y2][x2] = 1;

			// guardar movimiento en pila
			pila[14 - piezas][0] = y0;
			pila[14 - piezas][1] = x0;
			pila[14 - piezas][2] = y2;
			pila[14 - piezas][3] = x2;

			void siguienteSalto();
			siguienteSalto();
			deshacerBrinco(y0, x0, y1, x1, y2, x2);
			
			return 1;
		}
	}
	return 0;
}

void siguienteSalto () {
	if (--piezas == 1) {
		imprimirTablero();
		imprimirPila();
	}

	if (piezas > 1) {
		for (int i = 0; i < 5; i++) {
			for (int j = 0; j <= i; j++) {
				// posición actual ocupada
				if (tablero[i][j] == 1) {
					// izquierda
					hacerBrinco(i, j, i, j - 1, i, j - 2);
					// derecha
					hacerBrinco(i, j, i, j + 1, i, j + 2);
					// arriba izquierda
					hacerBrinco(i, j, i - 1, j - 1, i - 2, j - 2);
					// arriba derecha
					hacerBrinco(i, j, i - 1, j, i - 2, j);
					// abajo izquierda
					hacerBrinco(i, j, i + 1, j - 1, i + 2, j - 2);
					// abajo derecha
					hacerBrinco(i, j, i + 1, j, i + 2, j);
				}
			}
		}
	}

	++piezas;
}

void quitarPrimera () {
	for (int i = 0; i < 5; i++) {
		for (int j = 0; j <= i; j++) {
			tablero[i][j] = 0; // quitar
			siguienteSalto();
			tablero[i][j] = 1; // poner
		}
	}
}

int main () {
	llenarTablero();
	piezas = 15;
	quitarPrimera();
}

La representación del tablero en memoria es algo así.

La salida hasta el primer getch() es ..


    1
   0 0
  0 0 0
 0 0 0 0
0 0 0 0 0

2,2 > 0,0
2,0 > 2,2
0,0 > 2,0
3,0 > 1,0
3,3 > 1,1
4,2 > 2,0
1,0 > 3,0
4,0 > 2,0
4,4 > 4,2
4,1 > 4,3
4,3 > 2,1
2,0 > 2,2
2,2 > 0,0

.. lo que significa ..

Y eso es todo.

Presentaciones Con PowerPoint

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 26 Sep 2008 19:01:43 -0500

Cuando es temporada de exposiciones en al escuela, algunos compañeros usan Flash para sus presentaciones. La verdad me parece que hacer algo en Flash que se podía haber hecho en PowerPoint es un desperdicio de tiempo. Flash requiere mucho tiempo más, aún cuando se usan sus plantillas para presentaciones.

Yo solía hacer gráficas y presentaciones en Flash, pero la verdad es que en exposiciones tan cortas nadie lo nota. Ahora me dedico a realizar mis presentaciones con PowerPoint, como la última para la clase de Economía.

La última de Ingeniería de Software II.

O la primera de Electrónica Analógica.

INNER JOIN, LEFT OUTER JOIN y RIGHT OUTER JOIN en MySQL Explicado Con Diptongos y Hiatos

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 26 Sep 2008 19:01:18 -0500

Hola, hoy platicaremos un poco de Joins (Uniones) en MySQL. Y de paso podemos repasar que son los diptongos, hiatos y triptongos.

Para los ejemplos, necesitamos crear y llenar tres tablas. La primera es un catálogo de las reglas gramaticales para los acentos:


CREATE TABLE regla (
	idRegla VARCHAR(1) DEFAULT '' PRIMARY KEY,
	nombre VARCHAR(20) DEFAULT '' NOT NULL,
	descripcion VARCHAR(250) DEFAULT '' NOT NULL
);

INSERT INTO regla VALUES ('A','aguda','última sílaba');
INSERT INTO regla VALUES ('G','grave','penúltima sílaba');
INSERT INTO regla VALUES ('E','esdrújula','antepenúltima sílaba');
INSERT INTO regla VALUES ('S','sobreesdrújula','trasantepenúltima sílaba');

La segunda tabla es un catálogo de casos especiales, tales como diptongo, hiato y triptongo.


CREATE TABLE caso (
	idCaso VARCHAR(1) DEFAULT '' PRIMARY KEY,
	nombre VARCHAR(20) DEFAULT '' NOT NULL,
	descripcion VARCHAR(250) DEFAULT '' NOT NULL
);

INSERT INTO caso VALUES ('H','hiato','dos vocales fuertes están juntas | una vocal fuerte está junto con una vocal débil que suena más fuerte (en este caso siempre se acentúa la vocal débil)');
INSERT INTO caso VALUES ('D','diptongo','');
INSERT INTO caso VALUES ('T','triptongo','');

Y la tercera tabla almacena las palabras que vamos a estudiar.


CREATE TABLE palabra (
	cadena VARCHAR(20) DEFAULT '' PRIMARY KEY,
	idRegla VARCHAR(1) NULL,
	idCaso VARCHAR(1) NULL,
	FOREIGN KEY (idRegla) REFERENCES regla (idRegla),
	FOREIGN KEY (idCaso) REFERENCES caso (idCaso)
);

INSERT INTO palabra VALUES ('Raúl','A','H');
INSERT INTO palabra VALUES ('baúl','A','H');
INSERT INTO palabra VALUES ('bahía','G','H');
INSERT INTO palabra VALUES ('tía','G','H');
INSERT INTO palabra VALUES ('aéreo','E','H');
INSERT INTO palabra VALUES ('canción','A','D');
INSERT INTO palabra VALUES ('estuvo','G',NULL);
INSERT INTO palabra VALUES ('país','A','H');
INSERT INTO palabra VALUES ('maíz','A','H');

INSERT INTO palabra VALUES ('nunca','G',NULL);
INSERT INTO palabra VALUES ('jamás','A',NULL);

INSERT INTO palabra VALUES ('quiero','G','T');
INSERT INTO palabra VALUES ('ver',NULL,NULL);
INSERT INTO palabra VALUES ('tu',NULL,NULL);
INSERT INTO palabra VALUES ('risa','G',NULL);
INSERT INTO palabra VALUES ('todo','G',NULL);
INSERT INTO palabra VALUES ('el',DEFAULT,DEFAULT);
INSERT INTO palabra VALUES ('día','G','H');

Si seleccionamos todas las palabras tenemos 18 filas.


SELECT *
FROM palabra;

Si seleccionamos todas las palabras que no tiene una regla gramatical tenemos 3 filas.


SELECT *
FROM palabra
WHERE idRegla IS NULL;

[INNER] JOIN

Seleccionamos sólo las palabras que tienen regla gramatical.


-- 15 rows (sólo palabras con regla)
SELECT p.cadena, r.nombre
FROM palabra AS p
INNER JOIN regla AS r ON p.idRegla = r.idRegla;

Entonces tenemos 15 filas.


cadena  nombre
------- ------
baúl    aguda
canción aguda
jamás   aguda
maíz    aguda
país    aguda
Raúl    aguda
aéreo   esdrújula
bahía   grave
día     grave
estuvo  grave
nunca   grave
quiero  grave
risa    grave
tía     grave
todo    grave

LEFT [OUTER] JOIN

Ahora seleccionamos todas las palabras aunque no tengan regla gramatical.


-- 18 rows (todas las palabras, aunque no tengan regla)
SELECT p.cadena, r.nombre
FROM palabra AS p
LEFT OUTER JOIN regla AS r ON p.idRegla = r.idRegla;

Entonces tenemos 18 filas.


cadena  nombre
------- ------
el
tu
ver
baúl    aguda
canción aguda
jamás   aguda
maíz    aguda
país    aguda
Raúl    aguda
aéreo   esdrújula
bahía   grave
día     grave
estuvo  grave
nunca   grave
quiero  grave
risa    grave
tía     grave
todo    grave

RIGHT [OUTER] JOIN

Ahora seleccionamos todas las reglas gramaticales aunque no existan palabras asociadas.


-- 16 rows (15 palabras con regla + 1 regla sin palabras)
SELECT p.cadena, r.nombre
FROM palabra AS p
RIGHT OUTER JOIN regla AS r ON p.idRegla = r.idRegla;

Entonces tenemos 16 filas.


cadena  nombre
------- ------
baúl    aguda
canción aguda
jamás   aguda
maíz    aguda
país    aguda
Raúl    aguda
aéreo   esdrújula
bahía   grave
día     grave
estuvo  grave
nunca   grave
quiero  grave
risa    grave
tía     grave
todo    grave
        sobreesdrújula

NATURAL JOIN

El NATURAL JOIN nos ahorra la fastidiosa tarea de escribir las condiciones ON .. si hemos trabajado correctamente con las llaves primarias (PRIMARY KEY) y las llaves foraneas (FOREIGN KEY).

Así que podemos reescribir las consultas anteriores usando la sintaixs del NATURAL JOIN.


-- 15 rows (sólo palabras con regla)
SELECT p.cadena, r.nombre
FROM palabra AS p
NATURAL JOIN regla AS r;


-- 18 rows (todas las palabras, aunque no tengan regla)
SELECT p.cadena, r.nombre
FROM palabra AS p
NATURAL LEFT OUTER JOIN regla AS r;


-- 16 rows (15 palabras con regla + 1 regla sin palabras)
SELECT p.cadena, r.nombre
FROM palabra AS p
NATURAL RIGHT OUTER JOIN regla AS r;

Conclusiones

La posible salida deseada con estas tres tablas puede ser esta.


-- 18 rows (todas la palabras, con su regla y caso si estás aplican)
SELECT p.cadena AS cadena, IFNULL(r.nombre,) AS regla, IFNULL(c.nombre,) AS caso
FROM palabra p
LEFT OUTER JOIN regla r ON p.idRegla = r.idRegla
LEFT OUTER JOIN caso c ON p.idCaso = c.idCaso;

Entonces tenenemos 18 filas.


cadena  regla       caso
------- ----------- ----
aéreo   esdrújula   hiato
bahía   grave       hiato
baúl    aguda       hiato
canción aguda       diptongo
día     grave       hiato
el
estuvo  grave
jamás   aguda
maíz    aguda       hiato
nunca   grave
país    aguda       hiato
quiero  grave       triptongo
Raúl    aguda       hiato
risa    grave
tía     grave       hiato
todo    grave
tu

CREATE VIEW

Podemos generar una vista de la consulta anterior.


CREATE VIEW gramatica AS
SELECT p.cadena AS cadena, IFNULL(r.nombre,) AS regla, IFNULL(c.nombre,) AS caso
FROM palabra p
LEFT OUTER JOIN regla r ON p.idRegla = r.idRegla
LEFT OUTER JOIN caso c ON p.idCaso = c.idCaso;

Ahora tenemos una consulta más sencilla.


SELECT *
FROM gramatica;

Timestamps Y Zonas Horarias (Time Zones) En MySQL

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 26 Sep 2008 19:01:07 -0500

En MySQL existen dos tipos para almacenar fechas y horas: DATETIME y TIMESTAMP. La diferencia entre estos dos, es que el TIMESTAMP convierte la fecha de la zona horaria actual a UTC, o sea, guarda la fecha en un formato universal e internacional, que más o menos coincide con el meridiano de Greenwich.

Instalar MySQL Time Zones En Windows

Entrar al sitio Time Zone Description Tables y descargar el archivo .zip.
Descomprimir el archivo .zip.
Esta carpeta tiene archivo .frm, .myd y .myi. Estos archivos tenemos que copiarlos (o sobreescribirlos) en la carpeta c:\mysql\data\mysql\ (el inicio de la ruta puede ser diferente).
Reiniciar el servidor de MySQL.

Si todo ha salido bien, al correr la siguiente consulta deben aparecer más de 500 filas.


SELECT * FROM mysql.time_zone_name;

Columnas TIMESTAMP

La primera columna de tipo TIMESTAMP en tablas con una o más columnas TIMESTAMP tiene truco. Esa columna (la primera) siempre se actualiza al valor CURRENT_TIMESTAMP en un INSERT o un UPDATE si no se le especifica explícitamente otro valor.


-- tabla con columnas TIMESTAMP
CREATE TABLE example1 (
  w INT,
  x DATETIME,
  y TIMESTAMP,
  z TIMESTAMP
);

INSERT INTO example1
VALUES (1, '2010#10#10 00#00#00', '2010#10#10 00#00#00', '2010#10#10 00#00#00');

-- 1, '2010-10-10 00:00:00', '2010-10-10 00:00:00', '2010-10-10 00:00:00'
SELECT *
FROM example1;

-- la primera columna TIMESTAMP también cambia de valor
UPDATE example1
SET w = 2;

-- 2, '2010-10-10 00:00:00', '2008-06-01 14:30:40', '2010-10-10 00:00:00'
SELECT *
FROM example1;

Para evitar que la primera columna TIMESTAMP se actualice, podemos modificar la estructura de la tabla y declara esa columna con un DEFAULT CURRENT_TIMESTAMP lo que evita un ON UPDATE CURRENT_TIMESTAMP implícito.


-- tabla con columnas TIMESTAMP
CREATE TABLE example2 (
  w INT,
  x DATETIME,
  y TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  z TIMESTAMP
);

INSERT INTO example2
VALUES (1, '2010#10#10 00#00#00', '2010#10#10 00#00#00', '2010#10#10 00#00#00');

-- 1, '2010-10-10 00:00:00', '2010-10-10 00:00:00', '2010-10-10 00:00:00'
SELECT *
FROM example2;

-- la primera columna TIMESTAMP no cambia de valor
UPDATE example2
SET w = 2;

-- 2, '2010-10-10 00:00:00', '2010-10-10 00:00:00', '2010-10-10 00:00:00'
SELECT *
FROM example2;

DATETIME vs TIMESTAMP

Si jugamos a cambiar de zona horaria, la columna DATETIME permanecerá constante, pero la columna TIMESTAMP se ajusta a la nueva zona horaria.


-- tabla con columnas DATETIME y TIMESTAMP
CREATE TABLE example3 (
  x DATETIME,
  y TIMESTAMP DEFAULT 0
);

-- cambiar a zona horaria de la Ciudad de México
SET GLOBAL time_zone = 'America/Mexico_City';

INSERT INTO example3
VALUES ('2010#10#10 00#00#00', '2010#10#10 00#00#00');

-- '2010-10-10 00:00:00', '2010-10-10 00:00:00'
-- iguales
SELECT *
FROM example3;

-- 1286686823, 1286686823
-- iguales
SELECT UNIX_TIMESTAMP(x), UNIX_TIMESTAMP(y)
FROM example3;

-- cambiar a zona horaria de Madrid
SET GLOBAL time_zone = 'Europe/Madrid';

-- '2010-10-10 00:00:00', '2010-10-10 07:00:00'
-- columna DATETIME permanece constante (no cambia)
-- columna TIMESTAMP se ajusta a la zona horaria Europe/Madrid
SELECT *
FROM example3;

-- 1286661623, 1286686823
-- columna DATETIME primero se convierte de Europe/Madrid a UTC
-- columna TIMESTAMP sigue valiendo el mismo UNIX_TIMESTAMP
SELECT UNIX_TIMESTAMP(x), UNIX_TIMESTAMP(y)
FROM example3;

-- convertir la hora de Europe/Madrid a America/Mexico_City
-- '2010-10-10 00:00:00', '2010-10-10 00:00:00'
-- iguales otra vez
SELECT x, CONVERT_TZ(y,'Europe/Madrid','America/Mexico_City')
FROM example3;

SELECT x, CONVERT_TZ(y,'Europe/Madrid','SYSTEM')
FROM example3;

La columna TIMESTAMP funciona como la mayoría de nuestros dispositivos eléctricos (computadora, teléfono celular, PALM, iPod, ..) y lo puede comprobar si le cambia la zona horaria.

SYSTEM No Siempre Es Lo Mismo Que America/Mexico_City

La “zona horaria” SYSTEM representa la hora y la zona horaria del sistema operativo, en mi caso Windows XP. MySQL sigue esta zona horaria por defecto.

Pero si comparamos los UNIX_TIMESTAMP de una fecha almacenada con zona horaria SYSTEM y una fecha almacenada con zona horaria America/Mexico_City, podemos ver que existe una diferencia de segundos.


CREATE TABLE example4 (
  x TIMESTAMP DEFAULT 0
);

-- cambiar a zona horaria del sistema operativo
SET GLOBAL time_zone = 'SYSTEM';

INSERT INTO example4
VALUES ('2010#10#10 00#00#00');

-- cambiar a zona horaria de la Ciudad de México
SET GLOBAL time_zone = 'America/Mexico_City';

INSERT INTO example4
VALUES ('2010#10#10 00#00#00');

-- '2010-10-09 23:59:37'
-- '2010-10-10 00:00:00'
-- 23 segundos de diferencia
SELECT *
FROM example4;

Lo mismo sucede con PHP y MySQL. El TIMESTAMP de MySQL sigue las reglas del UTC y le suma algunos segundos extra para tener una hora más exacta.

Conocer La Zona Horaria De MySQL

Basta imprimir las variables @@global.time_zone y @@session.time_zone para conocer la zona horaria de nuestro manejador MySQL.


SELECT @@global.time_zone, @@session.time_zone;

CHARACTER SET y COLLATION En MySQL

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 26 Sep 2008 19:00:54 -0500

Si tienes dudas sobre qué es un conjunto de caracteres (CHARACTER SET) o una colación (COLLATION) debes empezar leyendo Character Sets and Collations in General.

UTF8 vs Latin1

El latin1 es una codificación de 8 bits de longitud, el utf8 es una codificación de 8 o 16 o 24 bits de longitud. Obviamente el utf8 soporta una mayor cantidad de caracteres internacionales.

Ejemplo con una tabla latin 1.


CREATE TABLE ejemplolatin1 (
  x varchar(10)
) CHARACTER SET='latin1';

INSERT INTO ejemplolatin1 VALUES ('pais');
INSERT INTO ejemplolatin1 VALUES ('país');

Como resultado tenemos palabras de 4 bytes.


SELECT x, LENGTH(x), CHAR_LENGTH(x), HEX(x) FROM ejemplolatin1;

-- 'pais', 4, 4, '70616973'
-- 'país', 4, 4, '7061ED73'

Lo mismo pero con una tabla utf8.


CREATE TABLE ejemploutf8 (
  x varchar(10)
) CHARACTER SET='utf8';

INSERT INTO ejemploutf8 VALUES ('pais');
INSERT INTO ejemploutf8 VALUES ('país');

Ahora tenemos como resultado palabras de 4 y 5 bytes.


SELECT x, LENGTH(x), CHAR_LENGTH(x), HEX(x) FROM ejemploutf8;

-- 'pais', 4, 4, '70616973'
-- 'país', 5, 4, '7061C3AD73'

La función HEX() nos devuelve la cadena en hexadecimal. Podemos ver en la palabra país los valores en hexadecimal de í en latin1 y utf8 respectivamente.

UTF8 A Latin1 Y Viceversa

Para convertir entre codificaciones, tenemos que escribir _utf8 o _latin1 a cualquier cadena o expresión que represente una cadena.


SELECT _utf8'país', _latin1'país';

utf8_spanish_ci vs utf8_general_ci

Las siguientes comparaciones dan verdadero.


SELECT 'a' = 'A' COLLATE utf8_spanish_ci; -- 1
SELECT 'a' = 'á' COLLATE utf8_spanish_ci; -- 1
SELECT 'a' = 'à' COLLATE utf8_spanish_ci; -- 1
SELECT 'a' = 'ä' COLLATE utf8_spanish_ci; -- 1
SELECT 'a' = 'â' COLLATE utf8_spanish_ci; -- 1

Y también estas.


SELECT 'a' = 'A' COLLATE utf8_general_ci; -- 1
SELECT 'a' = 'á' COLLATE utf8_general_ci; -- 1
SELECT 'a' = 'à' COLLATE utf8_general_ci; -- 1
SELECT 'a' = 'ä' COLLATE utf8_general_ci; -- 1
SELECT 'a' = 'â' COLLATE utf8_general_ci; -- 1

Pero la siguente comparación da falso.


SELECT 'n' = 'ñ' COLLATE utf8_spanish_ci; -- 0

En español moderno n no es igual a ñ. Cosa que si sucede en utf8_general_ci.


SELECT 'n' = 'ñ' COLLATE utf8_general_ci; -- 1

utf8_spanish_ci vs utf8_spanish2_ci

Antes del año 1994, ch y ll se consideraban letras independientes, entonces utf8_spanish2_ci (español tradicional) ordena ch entre c y d y ll entre l y m, cosa que no sucede con utf8_spanish_ci (español moderno).


CREATE TABLE ejemploSpanish (
  x varchar(10)
) CHARACTER SET='utf8';

INSERT INTO ejemploSpanish VALUES ('culebra');
INSERT INTO ejemploSpanish VALUES ('chuleta');
INSERT INTO ejemploSpanish VALUES ('luchador');
INSERT INTO ejemploSpanish VALUES ('llanta');


SELECT * FROM ejemploSpanish ORDER BY x COLLATE utf8_spanish_ci;

-- 'chuleta'
-- 'culebra'
-- 'llanta'
-- 'luchador'


SELECT * FROM ejemploSpanish ORDER BY x COLLATE utf8_spanish2_ci;

-- 'culebra'
-- 'chuleta'
-- 'luchador'
-- 'llanta'

Algo similar sucede con el idioma checo (utf8_czech_ci) que considera ch una letra entre h e i.


CREATE TABLE ejemploCzech (
  x varchar(10)
) CHARACTER SET='utf8';

INSERT INTO ejemploCzech VALUES ('c');
INSERT INTO ejemploCzech VALUES ('h');
INSERT INTO ejemploCzech VALUES ('ch');
INSERT INTO ejemploCzech VALUES ('i');

SELECT * FROM ejemploCzech ORDER BY x COLLATE utf8_czech_ci;

-- 'c'
-- 'h'
-- 'ch'
-- 'i'

utf8_general_ci vs utf8_bin

Como vimos en los ejemplos de arriba, la colación utf8_spanish_ci no distingue entre:

vocales con tilde (acento ortográfico) o sin tilde
letras con diéresis o sin diéresis
minúsculas y mayúsculas

La colación utf8_bin sí lo hace. Esta colación realiza una comparación binaria, bit por bit.


SELECT 'a' = 'A' COLLATE utf8_general_ci; -- 1
SELECT 'a' = 'á' COLLATE utf8_general_ci; -- 1
SELECT 'a' = 'à' COLLATE utf8_general_ci; -- 1
SELECT 'a' = 'ä' COLLATE utf8_general_ci; -- 1
SELECT 'a' = 'â' COLLATE utf8_general_ci; -- 1


SELECT 'a' = 'A' COLLATE utf8_bin; -- 0
SELECT 'a' = 'á' COLLATE utf8_bin; -- 0
SELECT 'a' = 'à' COLLATE utf8_bin; -- 0
SELECT 'a' = 'ä' COLLATE utf8_bin; -- 0
SELECT 'a' = 'â' COLLATE utf8_bin; -- 0

SHOW CHARACTER SET y SHOW COLLATION

La sentencia SHOW CHARACTER SET despliega todos los conjuntos de caracteres o codificaciones disponibles en el manejador MySQL.


SHOW CHARACTER SET;

La sentencia SHOW COLLATION despliega las diferentes colaciones disponibles en el manejador MySQL.


SHOW COLLATION;

Para conocer las codificaciones usadas actualmente por MySQl, la siguiente consulta puede ayudar.


SHOW VARIABLES LIKE '%char%';

-- 'character_set_client', 'utf8'
-- 'character_set_connection', 'utf8'
-- 'character_set_database', 'latin1'
-- 'character_set_results', 'utf8'
-- 'character_set_server', 'latin1'
-- 'character_set_system', 'utf8'
-- 'character_sets_dir', 'C:\mysql\share\charsets\'

Galería de Fotos Tipo Hilo Dental (Aprendiendo ActionScript 3.0)

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 26 Sep 2008 18:46:36 -0500

Hace tiempo que no escribo sobre ActionScript 3.0 (AS3). Hoy por fin he termino una copia a un efecto hecho con Flash en un sitio que quitaron hace tiempo. Se trata de una tira de fotos que se mueve de un lado a otro como si fuera un hilo dental.

La película flash de arriba muestra como queda finalmente el efecto. Abajo un prototipo del efecto.

El proyecto se llama FlexFloss. Disculpen que mi inglés no sea muy bueno, pero según el diccionario, hilo dental en inglés se dice Floss.

En esta ocasión sólo voy a explicar algunos detalles importantes del proyecto. Pero el código completo lo pueden descargar aquí.

Esta desarrollado en Adobe Flex, pero si han leído los artículos anteriores podrán adaptarlo fácilmente al compilador de AS3 o Adobe Flash CS3.

El proyecto está compuesto por ocho clases:

AssetManager.as
Caption.as
FlexFloss.as
FlossPicture.as
GiveMeA.as
LoadBar.as
NervousLoadBar.as
Picture.as

Estás clases están relacionadas de esta forma:

^{¿Cómo representar métodos estáticos (static) en StarUML? En el diagrama de clases, dar click con el botón derecho a la clase que contiene ese método, click en Select In Model Explorer, en el panel Model Explorer expandir esa clase, seleccionar el método estático y en el panel Properties cambiar la propiedad OwnerScope de INSTANCE a CLASSIFIER.}

Entrada Del "Sistema"

La entrada de la aplicación es un archivo xml como el siguiente:


<photos>
	<photo>
		<file>http://www.stan.com.mx/flach/floss01.jpg</file>
		<description>muuuh! catsup!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss02.jpg</file>
		<description>mmmm! papas a la francesa!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss03.jpg</file>
		<description>muuuh! hamburguesa con doble queso!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss04.jpg</file>
		<description>mooh! mcflurry y sundae!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss05.jpg</file>
		<description>mooh! breakfast potato!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss06.jpg</file>
		<description>muuuh! lechitas!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss07.jpg</file>
		<description>muuuuuh! big mac!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss08.jpg</file>
		<description>auuu! mcpollo! (mcchicken)</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/flach/floss09.jpg</file>
		<description>mmmmm! french fries!</description>
	</photo>
</photos>

Basta con editar este archivo para tener una tira de fotos diferentes con otras descripciones.

Barra de Progreso de Carga y Fotos

Bueno, aquí he diseñado algo rarito para lograr que la LoadBar refleje el porcentaje correcto de carga de todas las fotos.

Inicializo una LoadBar: loadBar = new NervousLoadBar(750, 150, 0xFF0066);
Agrego la LoadBar al escenario: addChild(loadBar);
Leo el archivo xml
Por cada foto en el archivo xml creo un FlossPicture: picture = new FlossPicture(node.file + "?" + date.time, loadBar, node.description);
El constructor de FlossPicture recibe una referencia a la LoadBar y se agrega automáticamente a un Array en la LoadBar: loadBar.add(this);
Agrego este FlossPicture al escenario: addChild(picture);
Cuando termino de agregar las fotos, entonces comienzo a cargar las fotos (antes no lo hago, porque corro el riesgo de terminar de cargar algunas fotos cuando todavía ni comienzo a procesar otras): loadBar.load();
Cuando todas las fotos han terminado de cargarse, entonces las despliego: if (percent == 100) display();

Esto se representa más o menos como en el siguiente diagrama de secuencia.

^{¿Cómo representar eventos (click con el mouse, presionar una tecla o finalizar la cargar de un archivo) en un diagrama de secuencia? ¿Tenía que usar un diagrama de actividades? Bueno, pues yo invente un actor llamado FlashPlayer que ejecuta estos eventos.}

Truco Para Ver La LoadBar Funcionar

A la ruta de cada foto le concateno un query string con la fecha y hora actual para que el navegador no guarde en caché las fotos y tú puedas apreciar el efecto de la barra de carga cada vez que presionas la tecla F5 (actualizar la página).


date = new Date();
...
picture = new FlossPicture(node.file + "?" + date.time, loadBar, node.description);

Entonces el fragmento de código + "?" + date.time no es indispensable en aplicaciones reales.

Asuntos de Seguridad

Pues si el archivo swf lo estamos corriendo en un dominio como http://localhost/ y el archivo xml o las fotos se encuentran en otro dominio como podría ser http://www.stan.com.mx, entonces tenemos que cumplir con las reglas (póliza) de seguridad de ActionScript 3.

Las fotos y el archivo xml deben de conceder un permiso al archivo swf. Para esto debemos crear un archivo crossdomain.xml en la raíz del sitio con una lista de dominios que tienen permisos de interactuar con los archivos de este dominio.

En este ejemplo sería algo así http://www.stan.com.mx/crossdomain.xml.

Y el contenido sería:


<?xml version="1.0"?>
<cross-domain-policy>
	<allow-access-from domain="*"/>
</cross-domain-policy>

El * significa que cualquier dominio puede ocupar los archivos de http://www.stan.com.mx. Pero puedes cambiar el * por cualquier nombre de dominio.

Tener cuidado, porque el Flash Player interpreta http://stan.com.mx y http://www.stan.com.mx como dominios diferentes.

Si trabajas todo en el mismo dominio, entonces no tendrás problemas. Pero sino es así, podrías tener muchas veces el error #2048 Security sandbox violation.

Más información sobre seguridad y dominios.

En Google Developer Day 2008 México

En el Google Developer Day 2008 México todos abuchearon la tecnología de Flash. Pero la tecnología de Flash se ve muy bien y la podemos encontrar en aplicaciones como:

cajeros automáticos en otros países
máquinas que venden boletos de avión
máquinas que venden boletos de cine
sistemas que controlan edificios (seguridad, comodidad, comunicaciones, compras ..) como el de Reforma 222
mapas de rutas de aerolíneas
mapas interactivos
reproductores de video como el de Vimeo o YouTube que tienen descarga progresiva y streaming

¿Esto es posible hacerlo con JavaScript tan fácil y portable?

Disfruten los últimos días del verano y pónganse a programar con AS3 :] Si surge alguna duda de AS3, escríbeme un comentario y haré lo posible por ayudar.