Stan! [ topics ]

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

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 01 Aug 2008 19:23:35 -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/champuFlash/floss01.jpg</file>
		<description>muuuh! catsup!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/champuFlash/floss02.jpg</file>
		<description>mmmm! papas a la francesa!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/champuFlash/floss03.jpg</file>
		<description>muuuh! hamburguesa con doble queso!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/champuFlash/floss04.jpg</file>
		<description>mooh! mcflurry y sundae!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/champuFlash/floss05.jpg</file>
		<description>mooh! breakfast potato!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/champuFlash/floss06.jpg</file>
		<description>muuuh! lechitas!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/champuFlash/floss07.jpg</file>
		<description>muuuuuh! big mac!</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/champuFlash/floss08.jpg</file>
		<description>auuu! mcpollo! (mcchicken)</description>
	</photo>
	<photo>
		<file>http://www.stan.com.mx/champuFlash/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.

¿Incompatibilidad Editorial Entre Carmen Aristegui Y Televisa? :(

kiewic@gmail.com (Gilberto Stankiewicz) — Thu, 31 Jul 2008 09:19:05 -0500

Carmen Aristegui salé hoy de W Radio, estación de Televisa Radio, por "incompatibilidad editorial". Es una verdadera lástima.

Algunas palabras:

"Con la llegada de Daniel Moreno a la dirección de contenidos en W – hombre cercano a Juan Ignacio Zavala, cuñado de Calderón, y a ... Marta Saghún, - ... quien plantea una centralización de la agenda política de los conductores de noticiarios de la emisora, un importante grupo de colaboradores de la estación ha decidido salir de la misma. El primero fue Carlos Loret de Mola, ... (él) argumentó que el rediseño de los criterios en la empresa reducía su margen de maniobra. Posteriormente también emprendieron la partida personajes como Ezra Shabot, titular del informativo vespertino, y los ex colaboradores de El Wueso, Salvador Soto y Christián Ahumada, El Duende.", periódico La Jornada.
"... Carmen Aristegui incluyó temas como el conflicto poselectoral de 2006, por las dudas en los resultados que dieron como ganador de la Presidencia a Felipe Calderón; los efectos por la aprobación de la llamada ley Televisa –que permitía la concentración mediática en unas cuantas manos–; el caso Zongolica; los abusos contra Lydia Cacho por el gobernador de Puebla, Mario Marín, y el empresario Kamel Nacif; los procesos judiciales en Estados Unidos contra el cardenal Norberto Rivera por presunto encubrimiento de curas pederastas; el conflicto en Oaxaca y otras violaciones a los derechos humanos ...", periódico La Jornada.
“No sabemos qué vamos a hacer ese día (el lunes), de 6 a 10, sin Carmen; no habrá nadie que llene su espacio, ... Carmen, estamos contigo, porque México necesita periodistas valientes y con principios, como tú, ... Que quede claro, no somos W, somos Aristegui.” radioescuchas entrevistados por el periódico La Jornada.

Algunas ligas:

Algunas fotos:

La periodista Carmen Aristegui a su salida de W Radio, donde la esperaban radioescuchas con pancartas de apoyo a su "labor crítica". (Periódico La Jornada.)

¿Qué Pasa En W Radio?

Hace unas semanas escuché la última emisión de Dommo Radio (Ricardo Zamora y Javier Matuk), ahora termina Carmen Aristegui.

CHARACTER SET y COLLATION En MySQL

kiewic@gmail.com (Gilberto Stankiewicz) — Wed, 04 Jun 2008 01:40:36 -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\'

Timestamps Y Zonas Horarias (Time Zones) En MySQL

kiewic@gmail.com (Gilberto Stankiewicz) — Sun, 01 Jun 2008 15:00:00 -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;

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

kiewic@gmail.com (Gilberto Stankiewicz) — Sat, 24 May 2008 12:04:50 -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;

Presentaciones Con PowerPoint

kiewic@gmail.com (Gilberto Stankiewicz) — Tue, 13 May 2008 23:45:00 -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.

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

kiewic@gmail.com (Gilberto Stankiewicz) — Sat, 22 Mar 2008 20:40:25 -0600

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.

Introducción A La Programación Dinámica

kiewic@gmail.com (Gilberto Stankiewicz) — Fri, 21 Mar 2008 00:46:08 -0600

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

FW: Nuevamente La Aportación Y La Escuela (ESCOM) Sigue Igual

kiewic@gmail.com (Gilberto Stankiewicz) — Mon, 21 Jan 2008 23:20:03 -0600

Recibí el siguiente correo con algunos puntos a considerar antes de realizar la aportación escolar. A mí no me molesta la aportación, y la escuela me parece respetable. Sólo quisiera que las autoridades de ESCOM (Escuela Superior de Cómputo) pusieran un poco de atención en:

Que se haga del conocimiento público donde queda ese dinero, porque no estoy seguro dónde quedó el dinero del semestre pasado. ¿Sería mucho pedir que se publicara una lista del destino de ese dinero?
Que se mejore el SIGUE!!! (Sistema Institucional de Gestión y Unificación Escolar) Es estúpido que las cuentas queden bloqueadas con dos o tres errores en la contraseña. Alguien con una boleta similar a la mía puede bloquear mi cuenta por error (o por no error) y verme perder mi próximo descanso en Control Escolar. Mejor que abran la posibilidad de poner contraseñas más largas, y mejoren el sistema de seguridad.
Que el sitio de ESCOM se vea en Firefox!! ¿Cómo es posible que el sitio de la escuela y el SIGUE no tengan soporte completo para el navegador Firefox? Es una vergüenza. Yo aun no descubro quien es el encargado del sitio. Como escuela especializada en Sistemas Computacionales, la página nos queda muy pequeña. El sitio de ESCOM debería ser un ejemplo de innovación para las demás escuelas y una muestra de lo que los alumnos de la escuela son capaces de hacer, pero no, alguien diseñó un sitio basado en frames!! con algunos efectos malos en Flash y otros "efectos" en JavaScript no compatibles con los principales navegadores.
Que los exámenes de programación se realicen en computadoras. Yo, en tres semestres que llevo en la escuela, jamás he tenido una clase en laboratorios de computación. Algunos conocidos tienen grandes deficiencias en programación y los exámenes en papel son una pésima forma de evaluar los conocimientos de Programación, porque la realidad es otra frente a una computadora.
Ah! Y también he escuchado historias de mujeres que han recibido un trato diferente por parte de algunos profesores, donde si ellas no participan como el profesor les sugiere, entonces suelen tener complicaciones en calificaciones y ETSs.

A continuación el correo que recibí.

--------------------------------------------------------------------------------

Hola a todos!

Este correo originalmente iba a mis compañeros cercanos de ESCOM pero el hecho de que ahora esté circulando por los demás parece ser útil simplemente para que los que aquí estudiamos tengamos un poco de información y cada quien tome la mejor decisión al respecto.

En este ciclo escolar que inicia en el 2008, nos encontramos con que la escuela ahora cobrará lo que nosotros conocíamos como 'La Aportación' con otro nombre un poco más 'conveniente', ahora se llama 'Apoyo para mejoras del laboratorio'.

En principio sería bueno retribuir a la escuela, pero siempre y cuando los beneficiados de éstas aportaciones de los alumnos fueran los mismos alumnos y en realidad desde que entré ya casi 4 años les puedo decir que no ha MEJORADO, seguimos con los mismos problemas. No importa si va este dinero a 'los laboratorios', 'la cafetería', 'los salones', 'el estacionamiento', 'las áreas verdes' o lo que conocemos como 'las canchas', etc, el problema es que pasa cada semestre y no vemos INVERSIÓN en nuestra escuela, solo vemos que se hacen gastos que nunca se le informa a la comunidad del porque y un ejemplo de estos es EL CAMBIO DE PISO de una sección del edificio central.

Por citas problemas que tenemos desde hace mucho están los siguientes:

* Los salones donde supuestamente eran para ser equipados con tecnología para la enseñanza simplemente son SALONES ABANDONADOS, NO HAY PIZARRONES ELECTRÓNICOS, PROYECTORES, casilleros para los alumnos (estos últimos los rentan cuando DEBERÍA SER UN SERVICIO DE LA ESCUELA y no hay una responsabilidad de parte del 'prestador del servicio' por si algunas cosas se extravían), etc. Solo de inicio tienen piso y techo falso, contemplando que en el futuro se equiparán, pero NO LO ESTÁN.

* Un DEPARTAMENTO DE CONTROL ESCOLAR INEFICIENTE, donde como cualquier oficina de gobierno hay que hacer trámites manualmente y a veces con malos tratos de algunas de las funcionarias (os) en ese departamento. Este departamento no cuenta con una forma automatizada para hacer trámites siendo totalmente contradictorio para ser una ESCUELA DE COMPUTO, maestros y alumnos sufren de este departamento cada que se necesita tener contacto con él. Por otro lado cuentan con un 'sistema' llamado SIGUE que mas que ayuda es una forma mas de obstaculizar los trámites.

* Los LABORATORIOS NO SON ÚTILES, ya que cuentan con personal NO CAPACITADO para la administración de ellos (hablando principalmente de los de sistemas), en cuanto a los del área de electrónica NO ESTÁN EQUIPADOS APROPIADAMENTE.

* En nuestra escuela NO HAY SERVICIOS BÁSICOS para el trabajo como es el caso del Internet, en otras escuelas este servicio es público y es fácilmente accesible por los usuarios, en nuestra caso no lo es, a veces esta en función, otras no y otras NO ES UTILIZABLE, TIENE RESTRICCIONES totalmente inadecuadas y ridículas debido a filtros. Sin mencionar que EL ACCESO A ESTE SERVICIO ESTÁ PRIORIZADO principalmente a los alumnos que se encuentran desarrollando su trabajo terminal y los profesores. Simplemente es UN SERVICIO Y UNA RED MAL ADMINISTRADAS, este nos DEBERÍA PERMITIR HACER TRÁMITES ESCOLARES EN REMOTO y quizá hasta poner TOMAR CLASE DE ESTA MANERA, debería poder darnos la posibilidad de tener un espacio de almacenamiento y publicación como cualquier universidad en este ramo.

* Contamos con una administración interna que no nos permite tener una expresión de ideas e interacción entre los estudiantes, esta expresión puede ser deportiva, artística, cultural, etc, lo único que existe es un mero salón que intenta ser un área de expresión.

* NO TENEMOS VINCULACIÓN real CON EL CAMPO LABORAL, el hecho de que envíen un correo con plazas de trabajo la mayoría de las veces MAL PAGADAS no es una vinculación real. Para hacer servicio social nos ofrecen lugares totalmente INCONVENIENTES PARA LOS ALUMNOS, donde si bien es un 'servicio social', no es un regalo de nuestro esfuerzo y conocimientos.

* NO EXISTE ACTIVIDADES COMPLEMENTARIAS, el hecho de que cada fin de año se realice una 'fiesta' y algunos asistan y bailen no es realmente una 'actividad complementaria', NO EXISTE UN DEPARTAMENTO DEPORTIVO que realmente funcione.

* EXISTEN PROFESORES INEFICIENTES, hay áreas donde los 'facilitadores del conocimiento' no tienen un compromiso real con sus alumnos y esto se puede reflejar con los comentarios entre los alumnos y las calificaciones emitidas por ellos cada fin de año, PERO QUE NO SIRVEN para tomar acciones contundentes, HAY PROFESORES CORRUPTOS, SIN CONOCIMIENTOS Y SIN COMPROMISO con la enseñanza, todo ellos claramente conocidos por todos.

* Un ÁREA DE IMPRESIONES donde se intentó lucrar en vez de dar servicio y cuentan con UN PERSONAL INADECUADO, tenemos un proceso para poder imprimir algún documento totalmente ineficiente, hay que comprar un vale, subir a imprimir, pasar a verificar el vale y recibir el documento, el cual es muy TARDADO.

* Nuestras IDENTIFICACIONES de la escuela SON CREDENCIALES PRÁCTICAMENTE SIN VALIDEZ EXTERNA y muchas de las veces hasta FALSIFICABLES, debido a la sencillez y la falta de calidad en su elaboración.

Creo que no les he dicho nada nuevo, simplemente quiero recordarles lo que esta pasando y las condiciones sobre las que estamos haciendo nuestra carrera y quizá uno de los estudios mas importantes de nuestra vida. En lo personal con mucho gusto apoyaría a una escuela la cual me da todo lo que tiene para que mi estancia y desarrollo fuera el mejor posible, pero esta no lo es.

Cada quien TIENE EL DERECHO DE NO PAGAR ESTA APORTACIÓN POR SU CARÁCTER VOLUNTARIO, pero nos 'obligan' a pagarlo ya que en control escolar al pedir informes nos dicen que para inscribirse hay que depositar en 'el buzón' el comprobante de la aportación, el de pago a COFAA (el del Banco) y un horario de clases. PERO NO ES OBLIGATORIO, todos tenemos la oportunidad de decidir si queremos pagar o no eso.

En mi caso no lo haré, hasta que las autoridades nos den muestras de que hay voluntad para tener una escuela mejor para todos, para los lideres y dirigentes como negocio y para los alumnos como una escuela y fuente de conocimientos.

Esto también es culpa de nosotros por permitir esto, han habido esfuerzos de compañeros que han intentado cambiar las cosas pero nos hemos dado cuenta que pesar de estos esfuerzos muchos de nosotros pero principalmente las autoridades no ponen de su parte para crear una solución a éste tipo de problemáticas.

Como ultimo punto y como petición personal, si desean reenviar este mensaje, PONGAN A TODOS LOS DESTINATARIOS BAJO EL CAMPO 'CON COPIA OCULTA', primero para que no se preste a hacer una forma de acumular direcciones de correo y así proteger la privacidad de cada uno y no fomentar actividades como el spam.

Saludos a todos. Y ustedes decidan.

Colores Sin Sentido (Aprendiendo ActionScript 3.0)

kiewic@gmail.com (Gilberto Stankiewicz) — Wed, 02 Jan 2008 09:33:52 -0600

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!