publication (4)

5/14/2018 Publication (4) - slidepdf.com

http://slidepdf.com/reader/full/publication-4-55a92dcce0148 1/48

NOVIEMBRE 2011 >pág - 1



H e r r a m i e n t a s

p a r a e l d i s e ñ a d o r

Por @pixelscode.com

@




M uy complacidos con elrecibimiento del primer nú-mero de Pixels&Code, aquí

estamos retomando nuestro contac-to mensual con todos ustedes.Escuchamos atentamente todas lassugerencias que nos ueron acer-cando reerentes a las temáticasque quieren ver desarrolladas enesta publicación. En la tapa de estenúmero verán la respuesta al temamás solicitado: social media.

Y unas páginas más adelante otratemática indispensable, tan nuevacomo apasionante: el desarrollo deaplicaciones para móviles. En estaedición vamos a jugar un poco conla geolocalización en dispositivos deApple.También notamos mucho interéspor HTML5/CSS 3, Javascript yAndroid, así que cuenten con esostemas para uturas ediciones.Claro está que esto no termina aquí.

Recién estamos empezando. Reciénnos estamos conociendo. Así que lapropuesta sigue abierta para que nosescriban y nos cuenten qué quierenleer en las páginas de Pixels&Code.Nuestro mail de contacto es [email protected] y queda a sudisposición para que nos hagan llegarnuevas críticas y sugerencias.Los dejo con el segundo número deP&C. ¡Que lo disruten!

Por Débora Orué

Connectingto server…



>HERRAMIENTAS PARA EL PROGRAMADOR-

DATOS DE CONTACTO

Dirección Comercial:[email protected]

DISEÑO EDITORIAL Y CREATIVIDAD

www.ampersandgroup.com.ar

REDACCIÓN

[email protected]

COMERCIALIZACIÓN

Dattatec.com SRL - Córdoba 3753, Rosario, Santa Fewww.dattatec.com

Las opiniones expresadas en los artículos son exclusiva responsabilidad de sus autores y no coinciden necesariamentecon la opinión de Dattatec.com SRL.

Débora Orué

JEFADE REDACCIÓN COLUMNISTAS

Adrián OrtizCristian Hernán Gaitano OrniaGabriel Walter Gaitano Ornia

Juan GutmannRoxana Miguel Natalia Cantero




6 //INFORMACIÓN GENERALEntry point

8 //BASES DE DATOSIntroducción a las basesde datos relacionales (VII)

16 //PROGRAMACIÓNDE VIDEOJUEGOS (I)Programación de videojuegosParte 2

28 //PROGRAMACIÓNDE VIDEOJUEGOS (II)Desarrollo de juegoscon HTML5 Segunda parte

36 //ALGORITMOS Algoritmos: Gnome Sort

44//SOFTWARE RECOMENDADOEl e-commerce hecho simple

TENDENCIA:

Los secretospara diseños

limpios

NOTA CENTRAL



Entry point

IT News:

Dos parTIDas que DueleN mucho

sTeve Jobs (1955-2011)Si bien la exacta dimensión delimpacto que Steve Jobs ha tenido enel mundo IT aún no ha sido cuanti-cada, sólo parece ir agrandándose amedida que se revisa su aporte. Porsí solo revolucionó la inormática

moderna con sus innovaciones en

varias ocasiones (recordemos sola-mente la Mac, las interaces grácas,el uso amplio del mouse, los muyactuales iPad y iPhone), resucitó laempresa que una vez había creadocuando parecía que su uturo estabasentenciado y sentó la base de unaleyenda. Su partida deja un vacíoimportante en Apple y sin duda entodo el ambiente inormático. ¡Buenviaje, Steve! Te extrañaremos.

DeNNIs rITchIe (1941-2011)El mismo mes que perdimos a Jobs,se ue otro grande la inormática.Dennis Ritchie, padre del sistemaoperativo UNIX y del lenguaje C,alleció a los 70 años luego de unalarga enermedad. Su trabajo juntoa Ken Thompson en los laboratorios

de Bell entre los 60’ y 70’, sigue ins-

pirando a programadores de todoel mundo, que trabajan en nuevasversiones de sistemas operativosbasados en UNIX o en GNU/Linux.Y C sigue siendo un lenguaje suma-mente importante (el segundo másusado a nivel mundial), y su espírituvive en C++ y Java.¡Hasta pronto, Dennis! Mantendre-

mos vivo tu legado.



Por Gabriel Gaitano Ornia

[email protected]

I n f o r m a c i ó n

g e n e r a l



más alla De la pc:

la prImera TableT De amazoNKindle Fire, la nueva tableta-lectorde libros de Amazon, está comen-zando a lucir como una amenazareal al iPad, por lo cual, con untoque de humor, podríamos decirque Apple ya debería empezar abuscar una orma de demandar-los. Revisando las estadísticas de

preórdenes (o reservas de equipos),se realizaron más de 250.000 en lasemana siguiente a su presentación.El nuevo producto tiene 7 pulgadas,una pantalla de alta resistencia,permite leer ebooks y conectarsea través de una red inalámbrica ainternet para navegar y ver películas.Su precio es más accesible que eldel iPad, pero carece de cámara omicróonos y está centrado en elalmacenamiento en la nube.

el GaDGeT Del mes:

carGaDor solar¿Tu celular se está quedando sin car-ga? ¿La batería de tu netbook no so-porta un largo viaje? Si tenés accesoal sol, esos ya no serían problemasa tener en cuenta con los cargado-res solares que están apareciendo apasos agigantados en la industria,como podemos apreciar aquí:

Ray, como es llamado el dispositi-vo, es una ingeniosa combinaciónde cargador solar con una ventosa

adhesiva, lo que signica que puedeser ácilmente pegado en una ven-tana soleada o en el exterior de uncoche, para convertir la luz solar enenergía para nuestros dispositivos.Este interesante aparato incluyeuna batería, permitiendo almacenarcarga durante el día para liberarlacuando la necesitemos.

web DesTacaDa:

Tabla perIóDIcaDe hTml 5En el sitio http://joshduck.com/pe-riodic-table.html podemos ver unainteresante aplicación de HTML5

que actúa, a su vez, como una útilpágina de consultas. Docenas detags html están disponibles, clasi-cadas, ordenadas y detalladas, dan-do al diseñador o programador unaexcelente hoja de reerencia en sutrabajo. ¿Qué más podemos pedir?




Por Juan Gutmann

[email protected]

En la edición anterior continuamos trabajando con Stored Functions, pero también utilizamos“Triggers”, un tipo de procedimiento especial, asociado a la ocurrencia de un evento en parti-cular sobre una tabla. En esta ocasión volvemos a recurrir a ellos, en el marco de un problemamuy particular, que también discutimos en el inicio de este cursillo, al hacer foco sobre el aspec-to académico de las bases de datos relacionales: la generación de claves primarias. PostgreS-QL cuenta con características especiales para ayudarnos en esta tarea, las cuales aplicaremosen esta práctica, que bastan y sobran para circunstancias normales. Sin embargo, como todoprogramador que trabaje en el “backend” sabe bien, cada empresa es un mundo y demasiadoa menudo nos encontraremos con requerimientos que “rompen” los diseños tradicionales y nosobligan a recurrir a algunas triquiñuelas para encontrarles una solución práctica y a la vez ele-gante. Los “Triggers” son ideales para aplicar en estos casos. Veamos por qué.

Introduccióna las bases de datosrelacionales (VII)

P r o g r a m a c i ó n

d e v i d e o j u e g o s

B a s e s d e d a t o s




uN breve repasoRecordemos que en un modelo relacional correctamente diseñado, toda entidad -es decir, toda tabla- debe teneruna “clave primaria”, compuesta por uno o más campos, que se utilizan para individualizar unívocamente el regis-tro. Estas claves pueden ser de dos tipos: naturales y articiales. Como claves naturales entendemos las que estánormadas por atributos pertenecientes al dominio con el que estamos trabajando, que por su naturaleza son aptospara este n. Por ejemplo, en una entidad donde almacenaremos datos de personas, una clave natural puedeormarse mediante los campos “tipo de documento” y “número de documento”, que nos asegurarían la unicidad.En cambio, una clave articial casi siempre se compone de un único campo, el cual contiene un valor generadoarticialmente con el objetivo de individualizar un registro. Lo habitual en estos casos es el uso de valores núme-ros consecutivos.

GeNeracIóN auTomáTIca De claves Aunque existen partidarios de ambos tipos de claves, la mayoría de los especialistas suele coincidir en que es másconveniente trabajar con claves primarias articiales. Entre otras razones, se suele citar que una clave articial numé-rica ocupa menos lugar en la base de datos (pensemos que los primeros 256 registros necesitan apenas un byte paraun identicador de este tipo, mientras que de emplear una clave natural serían necesarios varios bytes para todos losregistros), y también posibilita que los índices sean más chicos y puedan recorrerse con mayor velocidad al realizaruna búsqueda. En algunas ocasiones se recurre a una clave híbrida: aunque el campo corresponde a un atributo realdel dominio modelado, es generado automáticamente por el sistema, siendo su modalidad de uso equivalente al deuna clave articial. Este es el caso, por ejemplo, del atributo “legajo” que identica a cada registro de la tabla “em-pleado”, con la que trabajamos en las prácticas anteriores. Si quisiéramos generar automáticamente el número delegajo de un empleado, PostGres cuenta con un tipo de objeto creado especícamente para este n: la “secuencia”

(SEQUENCE). Su creación y uso es muy sencillo, gracias a una serie de unciones dispuestas especialmente para ello.

creaNDo uNa secueNcIaNos dirigimos al cliente PostGres de nuestra preerencia, ya sea ésta el de consola o el de interaz gráca, e ingre-samos lo siguiente:

CREATE SEQUENCE seq_prueba

Aunque

existen

partidarios de ambos tipos

de claves, la mayoría de los

especialistas suele coincidir

en que es más conveniente

trabajar con claves

primarias articiales.”



INCREMENT BY 1NO MINVALUENO MAXVALUESTART WITH 1CACHE 1NO CYCLEOWNED BY NONE;

En la práctica, todas las cláusulas(opciones) que hemos especicado

son las que se asumen por deecto, ypor ende son redundantes. Este co-mando es equivalente a haber escritosolamente “CREATE SEQUENCEseq_prueba”. No obstante, haberlasescrito explícitamente nos es útil paradetallar para qué sirve cada una deellas. INCREMENT BY establece elintervalo numérico con el que trabaja-rá la secuencia. Casi siempre lo usuales que vaya de uno en uno, pero sinecesitamos que cada nuevo valor

generado vaya de dos en dos (1, 3,5, 7 ...) o con cualquier otro interva-lo, puede lograrse con esta opción.MINVALUE y MAXVALUE denenlos valores mínimos y máximos quepuede generar la secuencia, siendoéstos por deecto para una secuencia

ascendente 1 y (2^63 -1), respectivamente. START WITH dene el primer valor que devolverá la secuencia. CACHE sirvepara “reservar” una cantidad de elementos de la secuencia para cada sesión activa de PostGres; si aquí especicamos“10” y tenemos dos sesiones activas, con una secuencia nueva se reservarán para la primera conexión los valores del 1al 10; si la segunda sesión solicita valores de la secuencia mientras la primera todavía está activa, recibirá los que se en-cuentran entre el 11 y el 20. CYCLE y NO CYCLE indican en el primer caso que al llegar al valor máximo de la secuencia

la misma regresa a su valor inicial y sigue numerando normalmente desde allí, mientras que en el segundo caso una vezalcanzado el valor máximo, solicitar uno nuevo a la secuencia deriva en un mensaje de error. Por último, con OWNEDBY podemos asociar la secuencia a una columna de una tabla en particular, permitiendo que si la columna es eliminada(DROP) la secuencia desaparezca automáticamente junto con ella.

TrabaJaNDo coN la secueNcIaAunque en PostGres existen cuatro unciones en total diseñadas para trabajar con secuencias, emplearemos casi ex-clusivamente dos: nextval() y currval(). La primera genera un nuevo valor acorde con el estado actual de la secuenciay lo devuelve, mientras que la segunda retorna el último valor generado en la sesión actual para dicha secuencia. Exis-ten otras dos unciones menos utilizadas: setval(), que permite reasignar a una secuencia su valor actual, y lastval(),que retorna el último valor devuelto por cualquier secuencia. Veamos cómo trabajan nextval() y currval():

SELECT currval(‘seq_prueba’);ERROR: currval de la secuencia «seq_prueba» no está denido en esta sesión

>BASES DE DATOS -




SELECT nextval(‘seq_prueba’);nextval---------

1

SELECT nextval(‘seq_prueba’);nextval---------

2

SELECT currval(‘seq_prueba’);currval---------

2

Para lograr que la clave primaria de una tabla se genere en orma automática en base a una secuencia que haya-mos creado, debemos asignar a la columna clave como valor por deecto la unción nextval(‘nombre_secuencia’).Recordemos que para el modelo de datos de práticas, habíamos creamos así la tabla empleado:

CREATE TABLE empleado (legajo NUMERIC(5) NOT NULL,cargo VARCHAR(10) NOT NULL,

apellido_y_nombre VARCHAR(100) NOT NULL,...);

Para generar automáticamente el valor de legajo, podemos hacerlo de esta manera:

CREATE SEQUENCE seq_legajo MAXVALUE 99999;

CREATE TABLE empleado (legajo NUMERIC(5) DEFAULT nextval(‘seq_legajo’) NOT NULL,cargo VARCHAR(10) NOT NULL,apellido_y_nombre VARCHAR(100) NOT NULL,...);

Como sabemos por denición que la empresa nunca tendrá más de 99.999 empleados (una cira inalcanzable para unaempresa chica o mediana), en lugar de redenir el tipo de datos de legajo como BIGINT -el tipo que devuelven nextval() ycurrval()- mantenemos nuestra elección de NUMERIC(5), pero indicando “por si las moscas” a la secuencia que su valormáximo no puede superar el mayor número que puede contener este campo. Si la tabla va a contener millones de regis-tros, entonces sí el tipo de datos correspondiente al campo clave autogenerado deberá ser BIGINT obligatoriamente.

Al momento de insertar una nueva la, omitimos especicar el valor del atributo “legajo” y será tomado automá-ticamente de la secuencia. Como la entidad empleado incluye una jerarquía (es decir, almacena la inormación dequién es el jee de quién), debe ser cargada respetando un orden. El primer registro que contenga debe ser el delempleado de máxima jerarquía, ya que será su propio supervisor. Aunque sepamos a ciencia cierta que su legajoserá el “1” por ser éste el valor inicial de la secuencia, es más prolijo especicar como valor del atributo supervisor




el valor generado por la secuencia para ese mismo legajo, mediante currval().

# INSERT INTO empleado(cargo, apellido_y_nombre, supervisor)VALUES(‘GTEGRAL’, ‘DIAZ FRANCISCO’, currval(‘seq_legajo’));

# SELECT * FROM empleado;legajo | cargo | apellido_y_nombre | supervisor--------+---------+-------------------+------------

1 | GTEGRAL | DIAZ FRANCISCO | 1

el TIpo De DaTos serIalPostGres cuenta con un tipo de datos que nos permite acilitar todavía más este proceso, en el caso de que notengamos condiciones especiales que satisacer (por ejemplo, un valor máximo de 99.999, como en el caso deseq_legajo). Al crear una tabla, podemos especicar:

CREATE TABLE mitabla (nombre_columna_clave SERIAL

);

Esto equivale a lo siguiente;

CREATE SEQUENCE nombre_columna_clave_seq;

En lugar

de denir

al campo legajo con un

llamado a nextval() como

valor por defecto, vamos

a recurrir a un Trigger y a

su correspondiente Stored

Function…”

>BASES DE DATOS -




CREATE TABLE mitabla (

nombre_columna_clave DEFAULT nextval(‘nombre_columna_clave_seq’) NOT NULL);

ALTER SEQUENCE nombre_columna_clave_seqOWNED BY mitabla.nombre_columna_clave;

GeNeraNDo claves DesDe uN TrIGGerAhora, supongamos que existen reglas de negocio que imponen ciertas características a la generación automáti-ca de valores clave. Por ejemplo, el departamento de RRHH podría haber determinado por alguna razón que nodeben asignarse los números de legajo entre 1000 y 1999. Esto no nos impide el uso de secuencias para automa-tizar esta tarea, pero sí debemos trabajar un poco más para resolverlo. En lugar de denir al campo legajo con unllamado a nextval() como valor por deecto, vamos a recurrir a un Trigger y a su correspondiente Stored Functionpara resolver este requerimiento. Asumiendo entonces que “legajo” ue denido como un simple NUMERIC(5)

NOT NULL, si la tabla ya contiene registros, creamos la secuencia con la cláusula START WITH, indicándole queempiece por el número siguiente al último existente, o bien la creamos para que empiece por 1 (valor por deecto)y avanzamos manualmente la secuencia hasta ese valor de esta orma:

SELECT setval(‘seq_legajo’, (SELECT MAX(legajo) FROM empleado)::BIGINT);setval--------

2

Noten la conversión explícita, declarada con los cuatro puntos “::”. Ocurre que el tipo de datos del campo “legajo”es NUMERIC, y el segundo argumento de setval() debe ser un BIGINT. De no recurrir a la conversión explícita, estasutil dierencia derivaría en este error:

ERROR: no existe la función setval(unknown, numeric)

LÍNEA 1: SELECT setval(‘seq_legajo’, (SELECT MAX(legajo) FROM emplead...^

SUGERENCIA: Ninguna unción coincide en el nombre y tipos de argumentos. Puede desear agregar conversiónexplícita de tipos.

Aortunadamente, el mismo PostGres nos indica que la solución es recurrir a una conversión explícita, en este casototalmente actible, ya que ambos tipos de datos son enteros numéricos.

Una vez cumplidos estos pasos, escribimos la Stored Function que genere automáticamente el valor de legajo,teniendo en cuenta la salvedad impuesta por la regla de negocio, y creamos su correspondiente trigger:

CREATE OR REPLACE FUNCTION f_trg_empleado_ins() RETURNS trigger AS $$DECLARE

v_legajo empleado.legajo%TYPE;

BEGINv_legajo := nextval(‘seq_legajo’);

IF v_legajo BETWEEN 1000 AND 1999 THEN

PERFORM setval(‘seq_legajo’, 1999);v_legajo := nextval(‘seq_legajo’); -- Retornará 2000

END IF;




NEW.legajo := v_legajo;

RETURN NEW;

END;$$ LANGUAGE plpgsql;

CREATE TRIGGER trg_empleado_insBEFORE INSERT ON empleadoFOR EACH ROWEXECUTE PROCEDURE f_trg_empleado_ins();

Asignar valores a uno o más campos mediante un trigger de INSERT o UPDATE sólo puede realizarse en un triggerde “BEFORE”. Los triggers pueden programarse para que se ejecuten antes o después del evento correspondien-

te, pero en los triggers de “AFTER” no es posible realizar este tipo de procesamiento. Los triggers en PostGressoportan también una cláusula “INSTEAD OF”, que sólo puede aplicarse en vistas (VIEWs), y habilitan al trigger areemplazar completamente con su propia lógica las modicaciones solicitadas a los datos de la vista por las sen-tencias DML INSERT, UPDATE o DELETE. En este caso, el trigger no corre antes (BEFORE) ni después (AFTER) dela sentencia SQL causante del evento, sino “en lugar de”.

Para probar el correcto uncionamiento de la autoasignación del legajo, lo hacemos así:

# INSERT INTO empleado(cargo, apellido_y_nombre, supervisor)VALUES(‘SUPERV’, ‘ROSSI MANUEL’, 1);


1 | GTEGRAL | DIAZ FRANCISCO | 12 | SUPERV | PEREZ JOSE | 13 | SUPERV | ROSSI MANUEL | 1

En la tabla ya existían los empleados con legajo 1 y 2, y el trigger le asignó correctamente el valor “3” al atributolegajo del nuevo empleado. Ahora comprobemos si se cumple que no se asignarán legajos entre 1000 y 1999. Paraello, orzamos el valor actual de la secuencia a 999:

# SELECT setval(‘seq_legajo’, 999);

# INSERT INTO empleado(cargo, apellido_y_nombre, supervisor)VALUES(‘ADMIVO’, ‘MORALES LUCIANA’, 2);


1 | GTEGRAL | DIAZ FRANCISCO | 12 | SUPERV | PEREZ JOSE | 13 | SUPERV | ROSSI MANUEL | 1

2000 | ADMIVO | MORALES LUCIANA | 2

>BASES DE DATOS -




secueNcIas Y TraNsaccIoNes Como ya explicamos en la cuarta entrega de esta introducción, PostGres soporta transacciones, que permiten tra-tar como una única unidad lógica una serie de modicaciones realizadas a los datos, conrmándolas (COMMIT)

si todo ue bien, o deshaciéndolas (ROLLBACK) en el caso de que se presente un error. Esto impide que un grupode actualizaciones que deben realizarse en orma conjunta se ejecute en orma parcial, provocando inconsistenciaen la inormación almacenada en la base de datos. Sin embargo, debe tenerse en cuenta que las secuencias notrabajan en orma transaccional. Una vez solicitado un nuevo valor a una secuencia mediante nextval(), o modica-do su valor actual con setval(), estas operaciones no tienen vuelta atrás, aunque se ejecute un ROLLBACK. Es decir,ante algún inconveniente, pueden producirse “baches” en la numeración generada, ya que si un valor no llegara agrabarse, se perderá. Esto no presenta mayores inconvenientes cuando el único objetivo de la secuencia es generarun identicador único. Sin embargo, en ocasiones donde es imperativo que no existan huecos en la numeración-por ejemplo, al generar números de actura- este problema torna inviable el empleo de secuencias, y nos obliga abuscar soluciones alternativas. En un sistema monousuario, podríamos escribir un trigger que obtenga el últimovalor utilizado con un SELECT MAX() y lo incremente en uno. En un sistema multiusuario debemos recurrir amétodos más complicados, ya que si un usuario obtiene el último valor de la clave con un MAX() y otro hace lopropio antes que la transacción del primero llegue a conrmarse, ambos obtendrán el mismo valor y se generaráuna violación de clave primaria. Una solución típica en estos casos es recurrir a una tabla que almacene secuen-cias, y bloquear (LOCK) el registro para evitar que sea leído por otros usuarios en el momento en el que se obtieneel último valor, liberando el bloqueo luego de generada la nueva clave y actualizada la tabla de secuencias.

eN resumeNPara nalizar la presente entrega, les brindamos como conclusión que las secuencias son herramientas extrema-damente útiles a la hora de generar valores para claves primarias, por su sencillez de aplicación y transparenciapara las aplicaciones cliente. También hemos visto otras uncionalidades a la hora de trabajar con Triggers, cuyaversatilidad permite implementar con poco esuerzo complejas reglas de negocio. En el próximo número, segui-remos trabajando con este tipo de procedimientos almacenados, demostrando cómo pueden ser empleados paraunciones de auditoría, como mantener un histórico de cambios para cada una de las tablas del modelo de datos,posibilitando de esta manera tanto un control exhaustivo sobre quienes realizan cambios a los datos, como larecuperación de inormación modicada o eliminada por error. ¡Hasta la próxima!

(…) las

secuencias

son herramientas

extremadamente útiles a

la hora de generar valores

para claves primarias, por

su sencillez de aplicacióny transparencia para las

aplicaciones cliente.”




Por Fernando Luna

[email protected]

Programaciónde videojuegos

Parte 2La primera entrega de este fascinante artículo orientado al back-ofce del pasatiempo prefe-rido por muchos, nos sirvió para conocer los orígenes del mundo de los videojuegos, conocer también a los primeros pioneros que marcaron un hito en este mundo virtual y también saber con qué herramientas involucrarnos en el inicio de la programación de aventuras grácas sinmorir en el intento. En esta segunda parte terminaremos de darle vida a nuestro videojuegopuliendo los detalles estéticos que hacen a una aventura gráca más interesante.

“ Conocer la historia nos sirvepara saber en dónde estamosparados hoy”. Por ello, la

introducción al apasionante mundode los videojuegos que vivimos enel número de Septiembre 2011 dePixels&Code, nos sirvió para conocerel papel importante que cada gigantede hoy ocupó en los inicios de estemundo virtual, lo cual de algunamanera nos sirve como experienciay para aprender a conocer un pocola mente y objetivos de aquellos quenos marcaron el camino que hoyqueremos seguir trazando. Para nomorir en el intento de programar vi-deojuegos, siempre es bueno buscarherramientas que nos aciliten lascosas al principio, y que a su vez seanricas en contenido web, para poderaprender y tener a quienes consultar

para saber mejor cómo superar losobstáculos que nos surgen en el cami-no. Conocimos que Game Maker es laherramienta perecta para dar el saltohacia el mundo de los videojuegos yno morir en el intento, ya que combi-na simpleza para resolver problemas,una interaz intuitiva, un editor deimágenes básico y ácil de manejar,y un corazón poderoso basado enel lenguaje propio GML, que sirvepara programar cualquier acción quedeseamos que nuestros personajesrealicen dentro de la partida.El juego que planicamos(Pixels&Space) consiste en unabatalla espacial donde nosotrosmanejamos una nave y debemoscombatir con los enemigos quevienen de rente, al mejor estilo Gá-laga. Hasta ahora sólo teníamos el

escenario principal, algunos plane-tas orbitando y nuestra nave, la cualse desplaza de manera horizontalpor la pantalla.Ahora agregaremos enemigos,crearemos los disparos para nuestranave, incorporaremos una HealthBar, y un contador. Al nalizar elvideojuego, agregaremos una pan-talla de inicio personalizada y otrosdetalles nales.

eNemIGos al aTaque El objetivo es que naves enemigasvengan hacia nosotros, con lo cualmanejaremos el desplazamientode los grácos de manera inversa acomo va el desplazamiento orbital, ycon un sólo modelo de nave replica-remos la misma por toda la panta-lla, creando así un batallón.

B a s e s d e d a t o s






Para que los malos sean partícipesde nuestro juego, descarguemosnuevamente el Pack de archivos deimágenes desde el siguiente link:www.-digital.com.ar/pixelscode/

recursos_gm.rarCopiemos el contenido de la carpetaresources a la carpeta de nues-tro proyecto. Luego, desde GameMaker, abrimos el proyecto delvideojuego y en el menú de carpe-tas lateral seleccionamos sobre lacarpeta Sprites/Create New Sprite.Sobre la ventana que se abre, selec-cionamos Edit Sprite, y nos abriráuna segunda ventana: Sprite Editor.

Allí presionamos CTRL + A (agregarimagen desde archivo), y luego de lacarpeta Resources seleccionamos laimagen: vulture_droid_b_1.png. Unavez agregada, realizamos este mis-mo paso, seleccionando la imagen:vulture_droid_b_2.png. Tildando elcheckBox Show Preview, lograremosobtener una vista previa del eectoque crea la nave enemiga. Acabamosde crear un Sprite animado.

Aceptamos todas las ventanas abiertasy procedemos a crear a continuaciónun Object. Sobre la carpeta lateral, cliccon el botón derecho del mouse, y se-leccionamos Create Object. Tildamoslas opciones Visible y Solid. A conti-nuación le agregamos los eventos,presionando Add Event/Create, luegodesde la pestaña Move, agregamos Setthe vertical Speed = 3. En la pestañaMain2, seleccionamos Set Alarm 0 to20. Add Event/Step/Step, desde la pes-taña Control, agregamos Test Variabley cargamos los campos Variable = y,

Value = room_height+32, Operation= Larger than, y presionamos Aceptar.Agregamos desde la pestaña Move/Jump to position y completamos loscampos: x = random(room_width), y= -32. Luego, desde la pestaña Main2/Set Alarm 0 = 100.

Vamos con uno más: Add Event/Co-llision, en la pestaña Main1/Destroythe instance, Create Instance/objectExplosion_enemy, en la pestañaMain2/Sleep = 6 miliseconds, nueva-mente agregamos el evento Destroythe instance/Object = control_explo-sion_enemy, desde la pestaña Score/Set Health = health-1, y Draw Healthbar en las posiciones (20, 20, 140,

La creación de este nuevo Sprite,

permitirá incorporar un enemigo,

que se replicará automáticamen-

te mediante la conguración deeventos en los objetos

Los sprites animados se pueden rea-

lizar a través de varias imágenes,

utilizando una misma dividida en

secciones, o a través de Gifs anima-

dos. Estos crearán una verdadera

interactividad en nuestro juego.



40), seteando a continuación BackColor = none y Bar Color = green tored. Sin irnos de la pestaña Score,seleccionamos Test health: Value= 0, Operation = smaller than. Porúltimo, en la pestaña Control/Starto a Block y End o a Block, en elmedio de ambos, desde la pestañaMain2/Display a message = Su naveha quedado sin energía. El juego haterminado!, luego Score/Show thehighscore table, y Restart the game.

efecTos explosIvos Cuando una nave enemiga colisionacontra nuestra nave, ésta se destruye,al igual que cuando le disparamos ala nave. Para eliminarla de la pantalla,crearemos un eecto de explosión.Nuevamente creamos un nuevoSprite, y agregamos la imagen explo-

sion1_strip6.png. Esta imagen con-tiene un otograma de seis imágenesque ejemplican una explosión. Acep-tamos y cerramos, grabando este spri-te con el nombre explosion_enemy.Agregamos otro Sprite, seleccionandola imagen spr_laser.png y grabando elmismo como bullet_nave.Ahora vamos por los objetos que utili-zarán estos Sprites. Creamos un nuevoObjeto al cual llamamos control_explo-sion_enemy. Seleccionamos como Spri-te a explosion_enemy, y le agregamoslos eventos: Add Event/Alarm 0. Luegocargamos las acciones: set Alarm 0 to 8,

Create Instance o Object control_ene-my_1 (Object = control_enemy_1, x= random(room_width-32), y = -32),Set Alarm 0 to 28, y Create Instance o Object control_enemy_1 copiando lasacciones de la primer instancia creada,

cambiando solo el valor de y = -95. Conesto generamos aleatoriamente la apari-ción de naves en la pantalla.Ahora creamos el objeto object_re,que será nuestro disparo contra losenemigos. Y vamos con los even-tos: Add Event/Create, seteando su

velocidad vertical en -10. Esto indicala velocidad con la que saldrá el rayodisparado desde nuestra nave. AddEvent/Step, y agregamos un controlde variable, preguntando si y < -16.Luego agregamos la destrucción dela instancia Sel, lo que hará que unavez el rayo salga del escenario visibledel juego, se destruya su instancia,

La mayor parte del control de

las acciones del videojuego están

incluidas sobre el objeto Nave,

quien controla la energía, colisio-nes y otros eventos importantes

de la partida

Dos objetos que controlan partes

importantes del juego: Los enemi-

gos y nuestros disparos

>PROGRAMACIÓN DE VIDEOJUEGOS -



liberando así la memoria. Por últimoAdd Event/Collision, congurandoque chequee si colisiona nuestro rayocontra el objeto Enemy_1, ocurra lo si-guiente: Destruya su propia instancia(Sel), cree una instancia del objetocontrol_explosion_enemy, Sleep = 6

milisegundos, destruya la instanciadel otro objeto, en este caso enemy_1y a su vez, nuevamente una instanciade destrucción aplicada a control_ex-plosion_enemy. Luego creamos unavariable, que llamaremos global.myp,seteando la misma en 10 de maneraincremental. (Esto será nuestro pun-taje). Agregamos Draw a text, lo quehará que se refeje en pantalla la pala-bra Puntaje: (Text = Puntaje: , x = 410,y = 20), y los puntos que tenemos:

Draw the value o variable: (Variable =global.myp, x = 500, y = 20).En el proceso de destrucción deenemigos y puntaje en pantallacreamos una variable global.myp.Toda variable que creemos con lapalabra global, seguida de un puntoy un nombre de variable a elecciónnuestra, será una variable quemantendrá su valor para leerse oactualizarse dentro de cualquier ins-tancia del juego. Si no intercedemos

la palabra global., cualquier variableque creemos se usará y destruirádentro del evento donde la creamos,perdiendo en cada ejecución delevento su valor seteado.Controlando la interactividadAl momento hemos creado losobjetos pertenecientes a todos losprotagonistas de nuestro videojuego(Nave, enemigos, disparos, planetasorbitando y espacio en movimien-to). Ahora nos queda comenzar acontrolar los eventos que harán queel juego en sí cobre vida. Para ello,

debemos crear otros objetos, sin vin-cularlos con Sprites determinados.Serán objetos vacíos que se ejecuta-rán con sólo ubicarlos en pantalla.Vamos a crear el primer objeto: con-trol_enemy_1. Agregamos el evento

Create, y dentro de éste las siguien-tes acciones: Create Instance (Ob-ject = Enemy_1, x = random(room_width-64)), y = -32). Nuevamentela acción Create Instance (Object= Enemy_1, x = random(room_width-110)), y = -32). Set Alarm 0to 20. Nuevamente agregamos un

evento Alarm 0, repetimos la acciónCreate Instance (Object = Enemy_1,x = random(room_width-64)), y =-32), y Set Alarm 0 to 20.Agregaremos una barra de energía, lacual disminuirá cada vez que coli-sionemos con una nave. Creamosel objeto Energia, le agregamos el

evento Create, y la acción Set health =100, lo que nos permitirá arrancar lapartida con el 100% de energía. Luegoagregamos el evento Draw, y dentrode este la acción Draw the health barcon los siguiente valores (x1 = 20, y1= 20, x2 = 160, y2 = 30, Back color =black, bar color = green to red).Por último, agregamos un objeto lla-mado control_puntaje, con el eventoCreate y la acción Set Variable con losvalores (variable = global.myp, Value= 0) y por último el evento Draw conlas acciones (Set the color = orange),

El juego que

planicamos

(Pixels&Space) consiste en

una batalla espacial donde

nosotros manejamos una

nave y debemos comba-

tir con los enemigos que

vienen de frente, al mejor

estilo Gálaga.”

La creación de Objects también

incluye a elementos no visibles,

pero vitales para la ejecución del

videojuego, como son el control

de las naves enemigas, la barra

de energía y el puntaje acumula-do de la partida




la acción Draw a text con los valores(Text = Score: , x = 410, y = 20, y laacción Draw a value o variable con

los valores (variable = global.myp, x= 500, y = 20). Aceptamos la ventana,¡y a terminar de armar el juego!Terminar de ensamblar las piezasAbrimos nuevamente el escenariodel juego, Rooms, y seleccionamosel único escenario que creamos. Enla pestaña Objects, desplegamos elmenú de selección “Object to addwith let mouse”, y seleccionamoscontrol_puntaje. Luego hacemos unclic en cualquier parte de la pantalla.Repetimos este paso, seleccionandopreviamente el objeto control_ene-my_1, y lo mismo para el objeto Ener-gia. Nos deben quedar en pantalla trespequeños íconos de color azul con unsigno de interrogación en su interior.

Abrimos nuevamente el objeto nave yle agregamos el evento press <Space>,y dentro de este las acciones: create ins-tance o object_re y Set Alarm 0 to 15.Antes de ejecutar nuestro videojuegoterminado y comenzar a disrutar deél, hagamos los ajustes nales para

poder compilarlo y luego subirlo anuestra red social avorita para com-partirlo con nuestros amigos. Con-guraremos la inormación principaldel videojuego, accediendo al menúlateral y seleccionando Global GameSettings. En esta ventana encontrare-mos varias pestañas para congurar.

En la pestaña Graphics, tildamosla opción Start in ull-screen mode,Freeze the game when the ormloses ocus, y destildamos la opciónDisplay the cursor. Lo que estamoshaciendo, básicamente, es que eljuego se inicie a pantalla completa,no muestre el cursor del mousemientras jugamos y que se pauseautomáticamente si cambiamos depantalla mediante ALT+TAB. Aunqueesté a pantalla completa, recordemos

que presionando la tecla F4, pode-mos intercalar entre modo ventanay pantalla completa. La siguientepestaña a congurar es Other, dondetildamos Let <Esc> end the game,destildamos Let <F1> show thegame inormation, y los campos ine-riores correspondientes a la inorma-ción de versión. Company, Product,Copyright, Description, con los datosque deseamos que guren.

Luego, vamos a la pestaña Loading,donde tildamos Show your own ima-

ge while loading, y presionamos elbotón Change Image, seleccionandoel archivo splash_screen.jpg de lacarpeta Resources.Tildamos la opción Deault loadingprogress bar y el botón Change Icon,si deseamos un ícono en particularque creamos para la oportunidad. Elvideojuego mostrará una portada, oSplash Screen, personalizada juntocon una barra de progreso mientras

se carga el juego. Recordemos queen la versión Paga de Game Maker,el Logo de la compañía no es mos-trado cuando ejecutamos nuestrosjuegos. Si queremos trabajar demanera proesional y crear juegoscompetitivos en el mercado, con tansólo 45 dólares podremos obtenerla versión ocial de esta aplicación,junto con el soporte técnico y la ac-tualización de versiones que publicael equipo de Yoyo Games.Con estos datos completos y marca-dos, ya estamos listos para compilar

Un punto importante es incorpo-

rar los objetos invisibles al escena-

rio del juego. Esto es vital para que

todo marche sobre ruedas durante

el desarrollo del videojuego.

Cuando una

nave enemiga

colisiona contra nuestra

nave, ésta se destruye, al

igual que cuando le dispara-

mos a la nave. Para elimi-

narla de la pantalla, creare-

mos un efecto de explosión.”




y ejecutar nuestro juego. Compile-

mos el mismo, generando el ejecu-table, seleccionando el botón Createstand-alone Executable de la barrade herramientas.Una vez compilado el ejecutable,podemos visualizar en las propieda-des de éste que los datos congu-rados de Copyright y la versión deljuego, entre otros, ya están incluidasen el archivo EXE.

Sólo nos resta el doble clic paracomenzar a disrutar de nuestraaventura gráca, apreciando pre-viamente la ventana personalizadade carga del videojuego. Al ejecutarel juego veremos que las navesenemigas vendrán hacia nosotros,y deberemos esquivar las mismaspara no perder energía, y a su vezdispararles presionando la barraespaciadora del teclado para poderdestruirlas. Sobre el extremo supe-rior izquierdo veremos nuestra barrade energía, y en el extremo superiorderecho el puntaje que llevamos.

uN muNDoDe posIbIlIDaDes Este juego, si bien no está comple-to, ya nos da una idea de cómo secrea una aventura gráca con GameMaker. Podemos aprovechar la co-munidad Game Maker (http://www.comunidadgm.org/) para preguntar

a los usuarios más experimentadoscómo realizar, por ejemplo, un menúde inicio del videojuego, o nivelesmás complejos, manteniendo siem-pre nuestro puntaje a medida queavanzamos de nivel. Cómo personali-zar la ventana de High Score nal, quese muestra cuando perdemos la par-tida, o cómo agregar objetos que nospermitan recuperar el nivel de energía.También podemos modicar nosotrosel videojuego, experimentando conque nuestros enemigos también nosdisparen, elevando así la complejidad,o incorporar del pack de recursos deimágenes, otros enemigos más avan-zados, que puedan cambiar el despla-zamiento en la pantalla, dicultandoaún más la partida. La comunidadGame Maker también nos podrá ayu-dar a incorporar sonido al videojuego,que ue algo que no realizamos poruna cuestión de no extender más estanota. Las posibilidades son innitas,sólo nos resta pereccionarlo al nivelque deseemos.

La información del videojuego

es importante, ya que si quere-

mos comercializar o hacernos

conocidos, siempre es importante

completar esto para que los inte-

resados puedan contactarnos.

El inicio de nuestro videojuego ya

terminado, con una portada de

Lujo, que le da profesionalismo a

nuestro trabajo

¡Y la acción comenzó! Ahora a

disfrutar de nuestra propia crea-

ción y a distribuirla entre amigos

y conocidos para poder perfeccio-

narla en base a las sugerencias

de terceros.






Por Roxana Miguel

[email protected]@roxanamiguel

Tendencia:Los secretos para diseños limpios

Un website hoy no requierede demasiados artilugios quellamen la atención, sino másbien de la selección de unaspocas y sencillas funciones,acompañadas por un diseñosimple. Aquí conoceremosalgunos tips de tipografías,imágenes y colores.

C uando tener una página webse convirtió en un poco másque una moda, sino una

necesidad para que las compañíasganen su terreno en la red, podía-mos incursionar en el mundo delas doble v y descubrir a cada cliccientos de sitios llamativos, conbotoneras ruidosas, menúes colori-dos y hasta logos con animaciones

que se presentaban como intro. Locierto es que tanta alharaca termi-naba por ser molesta para los visi-tantes que, según la conexión conla que contaran, podían esperar unbuen rato para nalmente entrar ala página.

Algunos sitios no podían descargar-se correctamente, o resultaban tan

N o t a C e n t r a l




pesados en cantidad de inorma-ción en imágenes que el usuario sedistraía esperando el entretenimien-to del movimiento antes de lograrentender cuál era el contenido real

de aquel sitio. Desde aquel momen-to hasta hoy han pasado muchascosas en el mundillo de los dise-ñadores web, una y quizás la másimportante es descubrir que el circode unciones no es justamente lomás uncional.

Podría decirse que actualmente latendencia pone sobre el tapete lo quese empieza a conocer como dise-ños limpios, y esto no es otra cosa

que sitios simples, con contenidosobjetivos y mensajes directos. Lapágina no orece una intoxicación deinormación y predominan los espa-cios neutros con colores denidos,primordialmente, el blanco. De estamanera sitios como Apple, Dattateco Macromedia, por nombrar sóloalgunos, pueden ser reerentes deesta orma de pensar la presentaciónde una empresa en la web.

Quienes se resisten a esta tendencia,que muchas veces es el mimo clienteo también diseñadores, la señalancomo vaga, parecida a los blogs ypoco atractiva. Lo cierto, y sin ánimode subestimar sus opiniones, es quelas claves de los diseños limpiosconlleva un estudio del mensaje, latipograía y la gama de color clara,las imágenes no pixeladas, la jerar-quía visual y el uso coherente de losespacios. Esto nada tiene que vercon las plantillas predeterminadasque pudieran orecer los blogs.

las malas INTerpreTacIoNes Del DIseño lImpIoPara aprender los principios de estatendencia es necesario quitar denuestro imaginario algunos concep-tos que pueden generar conusiones:

Blanco: Aunque veremos que predomi-na el uso de los espacios blancos, estono signica que sea un sitio limpio.Como hemos dicho anteriormente, hayque utilizar los espacios con una lógicaque no siempre evoca un mismo color,de la misma orma tampoco nos debeintranquilizar un diseño donde pre-dominan los campos vacíos, siemprey cuando esto tenga que ver con loque la página quiera comunicar. Laspáginas de Apple, que elige una baseblanca, y la base gris oscura de Macro-media son buenos ejemplos.

Intuitiva: Pon a un usuario rente alsite que estás diseñando sólo du-rante cinco segundos y pídele que teexplique de qué trata aquella página.Algunos entienden por diseño limpiouna portada vacía de imágenes rui-dosas, pues no, el oco tiene que serclaro y contener un punto reerencialque indique al usuario de qué se tra-ta la página, sin que este tenga queinvestigar, pudiendo usar para ellootograías u objetos grácos.

Elementos: Algunos nos emociona-mos demasiado al darle a un sitiotoques de distinción con sombrasen los textos o eectos de neón.Hacer un diseño limpio no implicaeliminar estos “gustitos” sino quecoexistan sin que terminen por serdiusos o entorpezcan el enten-dimiento del concepto. Con tipo-



graías claras y líneas denidas sepueden conservar estos recursos sinsobrecargar la página.

Innovación: Limpio signica que notiene mezcla de otra cosa y que estádespojado de lo superfuo, accesorioo inútil. Para nada signica ser pococreativo e innovador. Los sitios clarosy sencillos pueden ser más que inno-vadores con las elecciones correctas.

Vistos algunos parámetros quellevan a la conusión, es hora de po-nernos a trabajar en un sitio limpiopara lo cual recurriremos a una guíaque, como todo lo que tiene quever con la web, es vulnerable a loscambios constantes de tendencias yhasta propuestas individuales. Sóloes reerencial y está basada en losejemplos que utilizaremos para darmás luz sobre esta tendencia.

las claves Del DIseñolImpIoLo que quiero que se entienda, setiene que comprender a simple vis-ta. Esta debiera ser la premisa ante

un diseño limpio y para ello nosbasaremos en los recursos que losdiseñadores webs tenemos sobrenuestra mesa de trabajo:

Tipografías: Si bien el mundo delas letras está lleno de novedades ytodas son muy tentadoras para darleal sitio un estilo único, lo ideal esrecurrir a lo clásico. Fuentes comoBodoni, Frutiger, Univers, Helvética oFranklin Gothic son comunes aunqueno tanto como Times New Romany permiten generar cuadros de textoclaros y estéticamente atractivos.Por otro lado, existe una bolsa dehermosas uentes nas; algunas hay

que pagar para descargarlas, perootras no. Lo bueno es que por su or-mato no se trata de tipograías querompan con el equilibrio que bus-camos, algunos ejemplos son: XXIIMenga, Circula Medium, GnuolaneRegular, Expressway Regular, Ra-leway, Balham, Sertig, Edelsan, Can-della, Acid, Circle, Tertle, Cantarell,Titillium, Hattori Hanzo, Marge, MrJones y muchos más. Ponlas a prue-ba sobre bases de colores dierentesy verás que no necesariamente hayque caer en los ondos blancos paracrear un diseño limpio.

Espacio: Hay un elemento undamen-tal en una página: el aire. Como ya he-mos visto, el uso del mismo generacontradicciones, pero veremos cómoes utilizarlo con coherencia. Ignorarsu existencia es un gran error, puestoque las páginas deben contenerelementos ubicados adecuadamente,dejando aire entre ellos para que cadauno resalte su signicado. Mientras

Podría

decirse que

actualmente

la tendencia pone sobre el

tapete lo que se empieza

a conocer como diseños

limpios, y esto no es otra

cosa que sitios simples,

con contenidos objetivos

y mensajes directos.”

> NOTA CENTRAL-




que Apple hace un uso más marcadodel aire entre textos e imágenes, enel caso de Macromedia veremos quecada espacio cuenta con su propioambiente, generando una división

entre propuesta y propuesta quepermite la convivencia entre varioselementos, pero igualmente en unespacio armónico.

Pirámide invertida: No se trata dehacer una web geométrica, sino deubicar los elementos correctamente.Esto tiene que ver con el orden enque normalmente se lee un sitio. Lomás importante se coloca arriba y enun tamaño más destacado, lo menos

importante irá en orden decrecienteabajo y cada vez con menor tamaño.Algunos preeren ubicar en el centro lomás importante suponiendo que es loprimero que se ve, bastaría con hacerun pequeño ejercicio: cuando vemosuna imagen llamativa en el centro deun site, ¿hacia dónde dirigimos la mi-rada para entender de qué se trata?

la ImaGeN No es ToDo

En cambio la primera impresión sí lo es, y en la web lo que llega al ojohumano es una imagen compuestapor color, texto y dibujo. Por ello en undiseño limpio, si vamos a utilizar unaotograía o una secuencia de otos de-bemos procurar, aunque esto parezcauna obviedad, que esté trabajada enla mejor resolución posible para web

sin compresiones que compliquen suvisualización al estar online.

Siempre tenemos que tener presentepara qué tipo de usuario estamos

creando el site; es posible entoncesque la abundancia de imágenessea inevitable para lo que debemostransmitir. En este sentido lo acon-sejable es poner en orden el materialde trabajo y proponernos un métodode exposición que no sea invasivo.

En estos casos, se pueden creararchivos de fash secuenciales conuna transición suave. Actualmente,la tecnología web nos orece otras

opciones de desarrollo con imagenpor medio de capas. En sitios comoel de Papyros Digitales o TBM vemosbuenos ejemplos de ello dondeno hay un exceso de exposicionesotográcas. Un punteado que indicacuántas imágenes hay para ver serápropicio para no aburrir al usuario.El paseo otográco es armonioso yapoya el objetivo del sitio.

Cuando las otos que nuestro cliente

nos proporciona para la página sonextremadamente coloridas, es con-veniente trabajar con una base decolor neutro que permita el aire querecomendábamos anteriormente. Latipograía na también es aconse-jable, siempre utilizando tamañosmás grandes en la parte superiorde modo que el usuario no espereencontrar sólo en las imágenes lasrespuestas al sitio.Siempre que sea necesario contarcon elementos como videos, músicao sonido, es recomendable orecerle

Sitios como

Apple,

Dattatec o Macromedia,por nombrar sólo algunos,

pueden ser referentes

de esta forma de pensar

la presentación de una

empresa en la web.”



> NOTA CENTRAL-

al usuario la posibilidad de silen-ciarlos. No existe nada más moles-to que estar de visita en un lugardonde los ruidos nos aturden, porlo general, esperamos el momento

de irnos. Frente a una web, la puertasiempre estará abierta para mar-charnos y no volver más.

Si podemos evitar la combinación deuna secuencia otográca con grá-cos y animaciones, todo al mismotiempo, los usuarios agradecerán consu visita. Resulta demasiado cargosocuando una página cuenta con unamixtura de dinamismos que terminanpor ser conusos y lo que logran nal-

mente es distraer a los internautas.Más adelante veremos ejemplos decómo trabajar estos elementos com-binados sin entorpecer el website.

Una vez que sabemos quién esnuestro cliente, qué tenemos paracontar y quiénes son nuestros visi-tantes, entonces lo ideal es denircon pocas palabras lo que tenemos

para mostrar.

bueNos eJemplos En algún momento ue muy comúnver sitios cuyos menúes superio-res diseñados con algún eectode sonido o movimiento, estabanrepetidos en orma estática en laparte inerior para los que no podíanver lo superior. En aquellos casos,siempre lo de abajo resultaba enuna letra demasiado chica y anties-

tética respecto al resto del diseño.La pregunta obligada es, ¿para quécontar dos veces lo que se puededecir de una sola vez?

Quizás no nos animábamos a usaresa tipograía simple para unabotonera superior o todavía nocontábamos con algunos recursosweb que con el tiempo se ueronpereccionando; hoy los diseñoslimpios nos obligan a ser claros. In-nVision es un ejemplo de diseñoweb limpio donde con una tipogra-ía tan simple como Seri, un ondoblanco vejo y una gráca tambiénsimple, se genera un entorno websencillo, claro y conciso.

Image Mechanics es otro ejemplode que se puede diseñar un sitiointeractivo, elegante y limpio, contanta inormación como aire. Elcliente desarrolla aplicacionesmóviles y orece servicios de diseñopor lo que está en su propia salsa.

Podría

decirse que

actualmente la tendencia

pone sobre el tapete lo quese empieza a conocer como

diseños limpios, y esto no es

otra cosa que sitios simples,

con contenidos objetivos

y mensajes directos.”




Al entrar al site está toda la inorma-ción en una misma interaz, el colorblanco, letras destacadas en negroy un distinguido logo generan unaidentidad.

Una orma de dejar en claro quemuchas de las mañas que losdiseñadores tenemos no hay queencarpetarlas en el olvido es echarun vistazo por el site Two Designers;sólo hay que utilizar una coherenciaque permita la claridad, palabra quetanto usamos en este artículo. Eneste caso el sitio cuenta con eec-tos grácos simples, un ondo conrelieve de puntos, dinamismo en loscuadros de imagen y mezcla de tipo-graías. Cualquiera diría que esto noes un diseño limpio, sin embargo la

distribución de los espacios dan elsuciente aire como para generar unecosistema elegante y claro.

los cambIos De la TeNDeNcIaComo podremos ver en los ejemploscitados y a lo largo del artículo, los di-seños limpios utilizan algunas tecno-logías que últimamente están muy enboga, dejando poco espacio para loque antes se resolvía utilizado Flash,ahora hay más lugar para HTML5 yesto tiene que ver con la optimizacióndel site para lograr objetivos SEO. Porotra parte, las soluciones grácas sepueden resolver con CSS3.

La paleta de colores no debe inti-midar al diseñador que empieza

a incursionar en el diseño limpio;

tanto los blancos, como negros sonmuy útiles para lograr estos resulta-dos, sin embargo, hay que animarsea otros colores que sorprenderán,como también así jugar con loscolores de las otograías o grácasque nos proporcione el cliente.

El todo que compone un diseñoterminará por ser limpio cuando elobjetivo esté claro y el internautaque visite la página entienda enpocos segundos cuál es la inor-mación que está buscando. No setrata de una tarea sencilla puestoque dependeremos de con cuántainormación contamos para armarel diseño y cómo distribuirla.Aortunadamente, los recursos webhoy nos permiten jugar sin perdercreatividad, por lo que el rol deldiseñador web emprende un cami-no desaante: poner la mente enblanco y con cada diseño empezarvarias veces de cero hasta lograr unresultado limpio.

Sitios como

Apple, Dattatec

o Macromedia, por nombrar sólo algunos, pueden ser

referentes de esta forma de

pensar la presentación de

una empresa en la web.”



Por Matías Iacono

[email protected]

Desarrollo de juegoscon HTML5

Segunda parte

E n la primera parte de estaserie de artículos, pudimossentar las bases para la

creación de juegos con HTML5 yJavaScript. Utilizando una imagen,un objeto canvas y algo de códi-go, interactuamos con la misma,mostrándola en el navegador.

Finalmente, creamos un rudimen-tario sistema para el manejo delas teclas con las que el usuariointeractuaría y movimos la imagendentro del contenedor. En estaentrega aprenderemos a crearanimaciones para nuestros perso-najes, el concepto de buer doble

y cómo detectar colisiones entrelos objetos.

buffer Doble El concepto del buer doble es muyconocido y utilizado en el desarrollode video juegos, incluso, en el desa-rrollo de aplicaciones que requieran

J a v a s c r i p t






gran procesamiento de grácos,pero, antes de hablar sobre estatécnica necesitamos entender porqué es necesaria.Algo que debemos tener bien claroes que la capacidad de mostrarimágenes rápidamente en pantallano es algo que se le dé muy bien alos ordenadores. Si bien la potenciaactual de los mismos nos permi-te tener cada vez más juegos congrácos espectaculares, muchos deestos grácos, o mejor dicho, mu-

cha de la potencia de cómputos estáenocada en calcular cómo se debenver más que el hecho de mostrarla imagen propiamente dicha enpantalla. Así podemos tener juegoscasi realistas, con texturas perectasy movimientos de personajes simila-res a los de una persona, pero estonada tiene que ver, en sí mismo, conla capacidad de mostrar todo estecálculo en la pantalla.Mientras que estamos creando losgrácos y enviando los mismos a lapantalla, otros procesos son ejecu-tados, incluidos los de sincroniza-ción entre el monitor y el hardwarede la computadora. Estos procesosexceden la potencia de cómputosde nuestro ordenador y solemos en-contrarnos con un cuello de botella.De cualquier manera, no es a dondequeremos llegar, por lo menos hoy.

En todo caso, pensemos que un juegonecesita poder enviar muchos cuadrosde imágenes a la pantalla en un lapsode un segundo, por lo tanto, necesita-mos que el envío de estas imágenes sehaga rápidamente. Ahora pensemosque al usar el lienzo de dibujo en elartículo anterior, estábamos enviando,

cada vez que ocurría una actualización,la imagen directamente hacia esteobjeto, y este objeto directamente a lapantalla. Posiblemente no veríamosningún problema ya que la imagen esmostrada de orma correcta, inclusocuando se desplazaba mediante el pre-sionado de las teclas. Pero, a medidaque uéramos agregando nuevas imá-genes al lienzo, el proceso de copiadode la imagen hacia la pantalla seríacada vez mayor, y por lo tanto impacta-ría directamente en el rendimiento deeste proceso.

En esta imagen podemos ver los

cuadros por segundo en base a unmuestreo de 3000 imágenes.



Si el problema aun no nos pareceobvio, no nos preocupemos, sueletomar algo de tiempo entenderlo.Para ejemplicarlo de orma quequede un poco más claro (y simpli-cado), digamos que para dibujar10 imágenes en un nuestro lienzopretendemos hacerlo en un lapsode 41 milisegundos (esto nos daríaunos aproximados 24 cuadrospor segundo), por lo tanto, tene-mos esta ventana de tiempo pararecorrer todos los objetos a dibujary enviar cada uno de ellos al lien-zo para que sean mostrados en lapantalla. Pero el problema es que elproceso de copiado de esa imagenhacia el lienzo requiere de un tiem-po, además, cada vez que estamoscopiando uno de ellos, como está

siendo copiado directamente a lapantalla requerirá de procesos ytiempo adicional para gestionaresto. Digamos que en esa ventanade tiempo estaríamos ordenándoleal lienzo (y a la pantalla) que tomecada pixel de la primera imagen yla dibuje pixel a pixel en la pantalla,luego, que haga lo mismo con la se-gunda, y la tercera, y la cuarta hastallegar a la última. Esto requeriría deuna capacidad gigantesca de proce-samiento y coordinación para poder,por ejemplo, sincronizar todo esto yque al nal quede una imagen nalen la pantalla. Por lo tanto, mien-tras más imágenes agreguemos, laventana de 46 milisegundos podríaverse sobrepasada, resultando enuna pérdida de cuadros por segun-

do para generar la animación de 24cuadros mínimos.

Si bien la lógica para mostrar las3000 imágenes es rudimentaria ybásica, podemos notar una dismi-nución en los cuadros por segundo.En este caso, habíamos conguradoel redibujado con un promedio de30 cuadros por segundo. Tengamosen cuenta que no se está realizandoningún cálculo complejo del objeto adibujar. En juegos avanzados el pro-medio de cuadros por segundo severía aun más disminuido. Veamoscómo hemos creado este simplemedido de cuadros por segundos.

<canvas id=”lienzo”style=”width:450px;

Al implementar el buffer doble

vemos un aumento signicativo en

el rendimiento del juego aumen-

tado la cantidad de cuadros por

segundo de muestreo.




height:300px; background-

color:white”></canvas><br

/>Cuadros por segundo:<span id=”frames”></span>

...

...<scriptlanguage=”javascript”>

var contador = 0;var fra-

mes = document.getElementById(“frames”);

...

...

setInterval(Dibujar,1000 / 30);

setInterval(Frames,1000);

...

...

function Frames() {frames.innerHTML

= contador;contador = 0;

}......function Dibujar() {

contador++;context.llStyle

= “rgb(255,255,255)”;context.llRect

(0, 0, canvas.width, can-vas.height);

for (var i = 0; i< 3000; i++) {

context.drawImage(imagen, Math.

oor(Math.random() *

450),Math.

oor(Math.random() *

300), imagen.width, ima-gen.height);

}}

Ahora que podemos ver los proble-mas de rendimiento que presentaeste modelo podremos entender elconcepto de buer doble.El principal problema radica, enton-ces, en el envío de las imágenes deorma directa para su visualizaciónen pantalla, por lo tanto, deberemosbuscar un mecanismo que nos per-mita manejar la misma cantidad de

Mediante diferentes programas

de edición de imágenes podemos

crear nuestras líneas de animación

para los juegos.

El conceptodel buffer

doble es muy conocido y

utilizado en el desarrollo de

video juegos, incluso, en el

desarrollo de aplicaciones

que requieran gran

procesamiento

de grácos.”




elementos en pantalla, pero con lamenor cantidad de envío de inorma-ción hacia la misma. El buer doble,entonces, intenta imitar el compor-tamiento del lienzo de dibujo pero

en la memoria de la computadora,de esta orma todas las imágenesson dibujadas en este lienzo perosin tener que viajar hacia la salida devideo, reservando esta acción al mo-mento en que todos los objetos deljuego han sido recreados y actualiza-dos. De esta orma, obtenemos unaúnica imagen con todos los objetossobre ella y copiamos la misma, unaúnica vez, al lienzo que tiene contac-to con la pantalla.

Podemos ver en la imagen anteriorque los cuadros por segundo au-mentan signicativamente. Enton-ces, para implementar este segundolienzo en memoria podemos escri-bir el siguiente código.

var backBu-ffer = document.createElement(“canvas”);backBuffer.width = can-vas.width;

backBuffer.height = can-vas.height;var backBufferCon-text2D = backBuffer.

getContext(“2d”);

Por un lado, desde JavaScript crea-mos un nuevo elemento HTML deltipo canvas. Este elemento es crea-do en memoria y no ísicamente enla pantalla. Para dimensionarlo usa-mos los valores del lienzo original,

el que sí está en la pantalla. Por últi-mo, creamos un contexto de dibujopara este lienzo. El siguiente pasoes remplazar la unción de dibujadopor una que lo haga sobre el bueren memoria, para luego volcar todoel resultado al lienzo nal.

Cuando presionamos las teclas

para mover el personaje, ade-

más de desplazarse por la pan-

talla se genera una animación

cuadro a cuadro.

Una de las

técnicas más

comunes para obtener animaciones en los juegos

es la de tener una línea con

cada uno de los cuadros

de la animación. Esto es,

una única imagen con la

animación cuadro a cuadro

separada por espacios

iguales.”





backBufferCon-text2D.llStyle =

“rgb(255,255,255)”;backBufferContext2D.

llRect(0, 0, backBu-ffer.width, backBuffer.height);

for (var i = 0; i < 3000;i++) {

backBufferCon-text2D.drawImage(imagen,Math.oor(Math.random() *

450),

Math.oor(Math.random() *

300), imagen.width, ima-gen.height);}context.drawImage(backBuffer, 0,

0);

La última línea es la que vuelcatodo el contenido al lienzo en pan-talla. De cualquier manera, estatécnica no es perecta ya que el bu-er doble que se aloja en memoriaocupará tanta memoria como ellienzo que tenemos para visualizarlas imágenes en su orma nal,por lo que el consumo de memo-ria aumentará signicativamente.Posiblemente un precio que valepagar a costa de un mejor rendi-miento en la representación de lasimágenes.

aNImacIoNes Son pocos los juegos en los cua-les los elementos del mismo nocontienen aunque sea un cuadro

de animación. Incluso aquellospuzles clásicos contenían másde un gráco para las dierentespartes del juego. Y ver que nuestropersonaje o nave se mueve no sólopor la pantalla, sino que ademáspuede cambiar su orma mientraslo hace es parte del atractivo en losvideojuegos.Una de las técnicas más comunespara obtener animaciones en losjuegos es la de tener una línea concada uno de los cuadros de la ani-mación. Esto es, una única imagencon la animación cuadro a cuadroseparada por espacios iguales.

Cuando dibujamos una imagenen un lienzo no sólo podemosespecicar el lugar donde serávisualizada, sino que también po-




dremos seleccionar de la imagenoriginal qué parte de esta es la quequeremos mostrar. Por lo tanto, sitenemos nuestra línea con los cua-dros de la animación sólo debere-mos ir saltando entre ragmentosde la misma tras cada cuadro deanimación.

function Dibujar() {contador++;backBufferCon-

text2D.llStyle =

“rgb(255,255,255)”;backBufferContext2D.

llRect(0, 0, backBu-ffer.width, backBuffer.height);

backBufferContext2D.

drawImage(perro, cuadro *50, 0, 50, 31, x, y, 50,31);

context.drawImage(backBuffer, 0,

0);}

El método drawImage entonces,recibe la imagen de nuestra línea decuadros. Cada cuadro está separa-do por 50 píxeles de distancia, porlo que mediante un contador decuadros en base a las teclas presio-nadas desplazamos el punto inicialde recorte a ese lugar (cuadro * 50),luego denimos el tamaño de laimagen que en este caso será de 50x 31 píxeles, y nalmente el destinode la misma en el lienzo mediante

las coordenadas X e Y.

A estas animaciones simples pode-mos agregarle algo de complejidad,por ejemplo, intercambiando entrecuadro y cuadro sólo cuando trans-curra cierta cantidad de tiempo;esto generaría un movimiento mássuave. Todos los demás movimien-tos, como saltos, disparos, y unlargo etcétera, dependerán de losgrácos con los que dispongamos,aunque la lógica para animarlospueda ser potencialmente la misma.

Todas las

imágenes,

por más que veamos

sólo su contenido,

son representaciones

rectangulares, por lo

tanto, una forma de

detectar colisiones entre

dos de estas imágenes es

mediante este rectángulo y

el momento en que ambos

se superponen.”




DeTeccIóN

De colIsIoNes Existen muchas ormas de detec-tar colisiones entre objetos de unjuego. La detección de las colisio-nes nos resultan útiles para otor-garle mayor dinamismo al juego.Por ejemplo, podríamos contarcon una plataorma donde nuestropersonaje deba pararse y no caer alvacío, o si un misil golpea nuestranave, esta debe explotar, hasta laposibilidad de recoger monedas

para obtener puntos. En cualquiercaso, la detección de colisiones sepuede realizar de varias maneras,desde las más complejas y precisashasta simples y rápidas. Nosotrosnos enocaremos en una técnica,simple y rápida, aunque no de lomás precisa.Todas las imágenes, por más queveamos sólo su contenido, sonrepresentaciones rectangulares,por lo tanto, una orma de detectarcolisiones entre dos de estas imá-genes es mediante este rectánguloy el momento en que ambos sesuperponen.

function Colisionan() {if (x + 50 < 10)

return false;if (y + 31 < 40)

return false;if (x > 10 + 15)

return false;if (y > 40 + 15)

return false;

return true;}

Esta unción sólo puede validar lacolisión entre dos elementos. Por unlado, nuestro personaje, y por otro,una gema colocada en una posi-ción estática dentro del juego. Porsupuesto, esto puede ser modicadopara que su uncionamiento sea ge-nérico, pero sirve para que podamosentender cómo detectar los márge-nes de cada objeto. Dentro de la un-ción que muestra las imágenes sólodeberemos llamar a esta otra parasaber si los dos objetos se tocan.

function Dibujar() {......backBufferContext2D.

drawImage(perro, cuadro *

50, 0, 50, 31, x, y, 50,31);

backBufferContext2D.

drawImage(imagen, 10, 40,

15, 15);if (Colisionan()) {

colision.innerHT-ML = “Sí”;

} else {colision.innerHT-

ML = “No”;}......

}

Otro modelo muy utilizado en jue-gos de dos dimensiones es el vali-dar las colisiones mediante los píxe-les de cada una de las imágenes.Esto permite una mayor precisiónen la detección de estas colisiones,pero también suelen ser más cos-tosas a nivel de procesamiento dedatos. De cualquier manera, y comohemos visto en este artículo, a vecesdebemos sacricar algo de memoriao poder de procesamiento para unmejor resultado, como lo hicimoscon el buer doble.

A pesar de que los dos dibujos no

se tocan realmente, sí lo hacen

sus contenedores rectangulares,

por lo tanto, podemos ver que la

validación es verdadera.





Por Juan Gutmann

[email protected]

Algoritmos:

Gnome Sort

Siempre es bueno volver a las fuentes. Hace siete edicionesatrás inauguramos esta sección con el algoritmo de ordena-miento de burbuja (Bubble Sort), uno de los más sencillosque existen. Decíamos entonces que aunque debido a su bajaeciencia es muy poco usado, vale la pena estudiarlo por suimportancia académica. En la segunda entrega cubrimos el ordenamiento por Inserción (Insertion Sort). En esta ocasión,vamos a ver un algoritmo menos conocido, por ser relativa-mente nuevo, que se basa en estos dos métodos “clásicos”:Gnome Sort. Resulta interesante ver cómo un algoritmo pocoecaz, como el Bubble Sort, se puede transformar en unarutina más poderosa con unos pocos cambios conceptuales.

Procedamos a analizar su funcionamiento.

meToDoloGÍaDe GNome sorT Este algoritmo debe su nombre alos gnomos de jardín, más cono-cidos entre nosotros como lostradicionales “enanitos de jardín”,esculturas que suelen adornarpequeños parques hogareños. Enmuchos países europeos, de don-de proviene la mitología de la queprovienen elos y gnomos, sostie-nen medio en broma, medio enserio, que estas criaturas cobranvida por la noche y se dedican a

A l g o r í t m o s




trabajar en el jardín, manteniéndolo cuidado y prolijo. Según uno de los dos expertos a los que se atribuyeeste algoritmo, el académico holandés Dick Grune -creador del archiamoso sistema de control de versionesCVS-, en su país una de las tareas nocturnas de los gnomos de jardín es mantener en orden las macetas confores. Por cierto, como la mayoría de los europeos, estos gnomos son extremadamente metódicos, y siguensiempre el mismo sistema. Al comenzar, se ubican ante la segunda maceta, y comparan la cantidad de foresde esa maceta con las de la anterior. Si esa maceta contiene menos fores que la anterior, invierten la ubica-ción de ambas. Luego pasa a la siguiente maceta, y repite el procedimiento hasta estar ubicado ante la última,donde habrá terminado su trabajo. Con esta breve y pintoresca descripción puede inerirse que al igual queBubble Sort e Insertion Sort, Gnome Sort pertenece a la amilia de algoritmos que trabajan “por compara-ción”, y aunque se recorre la lista en orma similar al ordenamiento por inserción, el “intercambio” de a paresde valores de la lista es idéntico al principal concepto en el que se basa el ordenamiento de burbuja. A conti-nuación, el pseudocódigo de Gnome Sort:

Dada una lista L, de N elementosI = 1mientras I < N

si L(I) >= L(I - 1)I = I + 1

si novalor = L(I)

Al comenzar, se ubican ante la segunda maceta,

y comparan la cantidad de ores de esa maceta

con las de la anterior. Si esa maceta contiene menos ores

que la anterior, invierten la ubicación de ambas. Luego pasa

a la siguiente maceta, y repite el procedimiento hasta estar

ubicado ante la última, donde habrá terminado su trabajo.”



L(I) = L(I - 1)L(I - 1) = valor

si I > 1

I = I - 1si no

I = I + 1n si

n si

n mientras

Como vemos, la metodología es muy breve y simple tanto de comprender como de implementar en cualquierlenguaje, características compartidas por todos los algoritmos basados en Bubble Sort. Tal como es costum-bre, les presentamos ahora una implementación en Python, escrita respetando el fujo y estilo del pseudocó-digo, con el habitual agregado de impresión a standard output de los pasos realizados por el programa encada iteración.

# -*- coding: cp1252 -*-def gnomesort(L):

Una implementación deGnome Sort en lenguaje

Java

Tanto los

métodos de

inserción como de burbujeo

-y por ende también

Gnome Sort- ofrecen

tiempos de respuesta

muy pobres ante listascon una gran cantidad de

elementos.”

>ALGORITMOS-



N = len(L)I = 1itera = 0

while I < N:itera = itera + 1

if L[I] >= L[I - 1]:

print L, “iteración =”, itera, “I =”, I, “Sin cambios”I = I + 1

else:print L, “iteración =”, itera, “I =”, I, “Intercambio de”, L[I], “y”,

L[I - 1]valor = L[I]L[I] = L[I - 1]L[I - 1] = valor

if I > 1:

I = I - 1else:

I = I + 1

return L

Z = [1, 4, 8, 2, 5, 3, 9, 7, 10, 6]

print gnomesort(Z)

A continuación, la salida por pantalla con la lista de prueba:

[1, 4, 8, 2, 5, 3, 9, 7, 10, 6] iteración = 1 I = 1 Sin cambios[1, 4, 8, 2, 5, 3, 9, 7, 10, 6] iteración = 2 I = 2 Sin cambios

[1, 4, 8, 2, 5, 3, 9, 7, 10, 6] iteración = 3 I = 3 Intercambio de 2 y 8

[1, 4, 2, 8, 5, 3, 9, 7, 10, 6] iteración = 4 I = 2 Intercambio de 2 y 4[1, 2, 4, 8, 5, 3, 9, 7, 10, 6] iteración = 5 I = 1 Sin cambios

[1, 2, 4, 8, 5, 3, 9, 7, 10, 6] iteración = 6 I = 2 Sin cambios

[1, 2, 4, 8, 5, 3, 9, 7, 10, 6] iteración = 7 I = 3 Sin cambios[1, 2, 4, 8, 5, 3, 9, 7, 10, 6] iteración = 8 I = 4 Intercambio de 5 y 8


[1, 2, 4, 5, 8, 3, 9, 7, 10, 6] iteración = 10 I = 4 Sin cambios[1, 2, 4, 5, 8, 3, 9, 7, 10, 6] iteración = 11 I = 5 Intercambio de 3 y 8













[1, 2, 3, 4, 5, 7, 8, 9, 10, 6] iteración = 25 I = 9 Intercambio de 6 y 10[1, 2, 3, 4, 5, 7, 8, 9, 6, 10] iteración = 26 I = 8 Intercambio de 6 y 9[1, 2, 3, 4, 5, 7, 8, 6, 9, 10] iteración = 27 I = 7 Intercambio de 6 y 8





[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

La cantidad total de iteraciones nos permite ver rápidamente que Gnome Sort supera claramente a Bubble Sort.

Esta versión resuelve el ordenamiento en 33 iteraciones, contra 81 que le llevaría la misma lista al método deBurbuja sin optimizar. Incluso aplicándole a Bubble Sort las dos optimizaciones sugeridas cuando lo analizamos,sigue perdiendo la batalla contra el sistema que nos ocupa en esta ocasión, ya que incorporándole tanto la reduc-ción de iteraciones internas tras cada intercambio como la detección de “lista ya ordenada” y el consiguiente cortede ejecución, la cantidad total de iteraciones baja a 35, dos más que las realizadas por esta versión no optimizadade Gnome.

opTImIzacIóNUna mejora sencilla de implementar pero con un gran impacto sobre la velocidad de ejecución del algoritmoconsiste en almacenar en una variable la posición en la que se realizó el último intercambio, saltando directamentea esta posición al recorrer nuevamente la lista. De esta orma, al llegar a la última maceta, el gnomo se “teletrans-porta” hacia la próxima maceta que resta ordenar, omitiendo recorrer nuevamente las que ya han sido ordenadas(iteraciones sin intercambios). Esto reduce considerablemente el costo de ejecución del algoritmo. Incorporandoesta optimización, el pseudocódigo quedaría así:

Dada una lista L, de N elementosI = 1X = 0mientras I < N

si L(I) >= L(I - 1)

si X <> 0I = XX = 0

n si

I = I + 1

>ALGORITMOS-



si novalor = L(I)L(I) = L(I - 1)L(I - 1) = valor

si I > 1

si X = 0

X = In si

I = I - 1

si noI = I + 1

n si

n si

n mientras

Y la correspondiente implementación en Python:

# -*- coding: cp1252 -*-def gnomesort(L):

N = len(L)I = 1X = 0itera = 0

while I < N:

itera = itera + 1

if L[I] >= L[I - 1]:

print L, “iteración =”, itera, “I =”, I, “X =”, X, “Sin cambios”if X <> 0:

I = XX = 0

I = I + 1

else:print L, “iteración =”, itera, “I =”, I, “X =”, X, “Intercambio de”,

L[I], “y”, L[I - 1]valor = L[I]L[I] = L[I - 1]L[I - 1] = valor

if I > 1:if X == 0:

El académico holandés

Dick Grune es el principal difusor de este método deordenamiento.




X = I

I = I - 1else:

I = I + 1

return L

Z = [1, 4, 8, 2, 5, 3, 9, 7, 10, 6]

print gnomesort(Z)

La salida por pantalla de la versión optimizada muestra que para la lista de prueba se ha conseguido una mejoraconsiderable, reduciendo en 12 la cantidad total de iteraciones, con un total de 21. Esto demuestra la clara superio-ridad de Gnome Sort contra Bubble Sort cuando a ambos se le han incorporado sus optimizaciones más comunes.

[1, 4, 8, 2, 5, 3, 9, 7, 10, 6] iteración = 1 I = 1 X = 0 Sin cambios


[1, 4, 8, 2, 5, 3, 9, 7, 10, 6] iteración = 3 I = 3 X = 0 Intercambio de 2 y 8[1, 4, 2, 8, 5, 3, 9, 7, 10, 6] iteración = 4 I = 2 X = 3 Intercambio de 2 y 4


[1, 2, 4, 8, 5, 3, 9, 7, 10, 6] iteración = 6 I = 4 X = 0 Intercambio de 5 y 8[1, 2, 4, 5, 8, 3, 9, 7, 10, 6] iteración = 7 I = 3 X = 4 Sin cambios

[1, 2, 4, 5, 8, 3, 9, 7, 10, 6] iteración = 8 I = 5 X = 0 Intercambio de 3 y 8



[1, 2, 3, 4, 5, 8, 9, 7, 10, 6] iteración = 12 I = 6 X = 0 Sin cambios[1, 2, 3, 4, 5, 8, 9, 7, 10, 6] iteración = 13 I = 7 X = 0 Intercambio de 7 y 9


[1, 2, 3, 4, 5, 7, 8, 9, 10, 6] iteración = 15 I = 5 X = 7 Sin cambios[1, 2, 3, 4, 5, 7, 8, 9, 10, 6] iteración = 16 I = 8 X = 0 Sin cambios




[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] iteración = 21 I = 5 X = 9 Sin cambios[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

De hecho, con esta mejora, los tiempos de ejecución de Gnome Sort son similares a los de Insertion Sort parala misma lista. Aunque uno de sus dos “padres”, el cientíco de la Universidad de Glasgow Hamid Sarbazi-Azad, lo bautizó como “Stupid Sort”, y el propio Dick Grune lo llama “el algoritmo de ordenamiento mássencillo que existe”, es una variación interesante que debemos conocer por su conjunción de simplicidad yecacia. Su complejidad es de O(N^2) para el caso promedio, pero la misma se reduce a O(N) si la lista está

>ALGORITMOS-



casi ordenada.

eN coNclusIóNPese a las ventajas que ya hemos expuesto, nuestro buen gnomo suredel mismo déicit que presentan sus uentes de inspiración. Tanto losmétodos de inserción como de burbujeo -y por ende también GnomeSort- orecen tiempos de respuesta muy pobres ante listas con unagran cantidad de elementos. Para este tipo de estructuras, los lec-tores de esta sección saben bien que es conveniente recurrir a otrotipo de algoritmos, como los que trabajan aplicando recursividad. Sinembargo, estudiar Gnome Sort vale la pena, aunque más no sea paradescubrir que, aunque las bases de este tipo de programas han sidosentadas por los grandes próceres de la inormática, todavía es posi-ble desarrollar nuevas variantes y derivados interesantes e ingeniosos.Este algoritmo, que tiene unos pocos años de vida (nació con el nuevomilenio) así lo demuestra.

La cantidad

total de

iteraciones nos permite ver

rápidamente que Gnome

Sort supera claramente a

Bubble Sort. Esta versión

resuelve el ordenamientoen 33 iteraciones, contra

81 que le llevaría la misma

lista al método de Burbuja

sin optimizar.”

En este gráco observa-mos la baja en los tiemposde respuesta de este algo-ritmo conforme aumentala cantidad de elementos

a ordenar. Aunque no estan grave como en otroscasos, el deterioro es lobastante signicativo

como para optar por otrosmétodos en estos casos.






Por Roxana Miguel

[email protected]

@roxanamiguel

El e-commerce hecho simple

La web es un espacio de co-mercialización cada vez másimportante. Las empresaso comercios que abren suspuertas al público tambiénabren una ventana en la grannube para el e-commerce.Nadie puede quedarse sinsu stand en la feria online.

Aquí veremos una manera deincluir los carritos a la web demanera más sencilla.

P reparo un caé y enciendo lanotebook, cliqueo sobre unpaquete de azúcar, otro de

hamburguesas y unas planchas depastas rescas; indico la orma depago y el destino del envío. Mien-tras espero que llegue el pedido delsupermercado, reviso mis cuentasbancarias y cancelo los pagos deservicios que están por vencer, enotra página cargo en mi carrito decompras unos discos y películaspara ver durante el n de semana.

Apago la notebook y salgo a la ca-lle, si me quedó algo por comprarlo hago desde mi smartphone.

Hace un tiempo atrás esto parecíaimposible, hoy, cada vez más usua-rios realizan sus compras habitualespor medio de la red, independien-temente de los prejuicios y losmiedos a la ciber-piratería de datos.A avor de estas tendencias, muchascompañías suman esta opción a suspáginas que, hasta ese momento,

S o f t w a r e

r e c o m e n d a d o




contaban tanto con un site comocon un aviso en el diario.

Desarrollar un sitio con estas condi-ciones es una tarea bastante compleja;para quienes no quieran meter manoen los códigos siempre se puede re-currir a algunos accesos más simplespor medio de rameworks dentro detiendas prediseñadas. Se trata deherramientas que uncionan como es-

tructuras conceptuales cuyos módulosde sotware pueden organizar nuestrodesarrollo. Con esta arquitectura desotware se obtiene una metodologíade trabajo que amplía los beneciosde las aplicaciones en los dominios.

Al comenzar la programación deuna página cuyo objetivo es comer-cializar un producto, nos toparemoscon el engorroso capítulo de haceruncional el cuadro e-commerce.

No es tarea para nada sencilla y esjustamente por esta razón que hansido creadas estas tiendas onlinelistas para usar. Serán nuestros alia-dos en este trabajo, ya que existenpara acilitar el desarrollo del sot-ware identicando sus requisitos.

Para trabajar con estos elementos po-demos denir una estructura estableque determinará el dinamismo de lapágina. Actualmente, existe muchosotware que proporciona la acilidadde implementar una tienda virtual enla web por medio de servicios gratui-tos como Oscommerce, Prestashop oMagento, que son los más utilizadospor su antigüedad y utilidades. Losmenos consumidos son Zen Cart,Virtuemart y Open Cart, entre otros.

TIps aNTes De abrIrla TIeNDaUna vez que está abierta la tienda on-line es como abrir un negocio, todaslas reormas pueden traernos algunas

rustraciones si no ueron pensadascon anticipación. Al comenzar con eldesarrollo del site debemos contar conalgunos parámetros que nos serán úti-les a uturo, como cuál es el lenguajeque utilizaremos para esta programa-ción, qué tecnología contendrá y cuálserá el esquema.El lenguaje PHP y una base de datosMySql son recomendados para es-tos programas ya que son simples,

de la misma manera que tenemosque buscar que se adapte a nivelesCSS y HTML de manera sencilla. Elsite debe estar diseñado conormeal posicionamiento SEO, puesto quesi tenemos productos en venta alque nadie accede, de nada sirve te-ner un web inmersa en el comercioelectrónico, sobre todo cuando estamodalidad está cada vez más en

Actualmente,

existe mucho

software que proporciona

la facilidad de implementar una tienda virtual en

la web por medio de

servicios gratuitos como

Oscommerce, Prestashop o

Magento.”



>SOFTWARE RECOMENDADO -

auge y la web se encuentra rebalsa-

da de estos servicios.Es muy positivo pensar una tiendavirtual que contará con categorías oamilias que puedan crecer y hastareproducirse con el paso del tiem-po; con suerte, nuestro comerciotrascienda la propuesta inicial y noquerremos quedarnos a mitad decamino. Debe coexistir una lógicapara esta suerte de prosperidad,como por ejemplo, la opción decombinar artículos, incluir docu-mentos Word, pd o otos y videos,incluso relacionarlo con otros artícu-los para captar el interés del usuarioen otras oertas.Puestos en el aérea comercial, laestructura debe orecer dierentesormas de pago, transerencias ytarjetas, también opciones de envío.Es más que interesante que permitarealizar compras de manera ácil yrápida, sin tener que llenar demasia-dos ormularios y que proporcione unorden que visualice precios y nombredel producto.

sofTwares populares Los llamaremos así porque son losmás utilizados para generar tiendasvirtuales, no sólo por ser gratuitossino que además son más potentes.Se tratan de Oscommerce, Prestashopy Magento. Conozcámoslos.

Oscommerce, es una aplicación opensource gratuita que comenzó a uncio-nar en marzo del 2000. Desde enton-ces, ue conormando una comunidadde usuarios que colabora con losallos de seguridad, bugs y reportes deerrores. Admite ormas de pago comoAhthorize.net, tarjetas de Crédito,pago contra reembolso, iPayment,cheque, transerencia bancaria, NO-CHEX, PayPal, 2CheckOut, PSiGate,SECPay, Visa, Mastercard, entre otros.Aunque en su momento ue uno delos mejores gestores, hoy presentaalgunas objeciones que lo debilitanrente a sus competidores, aún así recientemente presentaron la terceraversión que no ue tan aceptada porlos webmasters ya que presenta mu-

chos errores que pretenden que sean

solucionados por los usuarios.Cuenta a su avor con que integradistintos idiomas, orece una grancantidad de módulos desarrolladosque economizan costos y su desarro-llo es sencillo, incluso la instalación.Sin embargo, tiene algunos puntosen contra como que la instalaciónrequiere de varios módulos para quetome orma de tienda, no usa CSS yno se escuchan rumores de que seactualice en este sentido. Quien de-

see trabajar con Oscommerce deberácontar con un buen manejo de PHP ygenerar un gran número de módulospara que el sitio sea captado por losbuscadores.

Prestashop, también es un sotwaregratuito y open source, pero que adierencia del anterior cuenta con unaimportante comunidad de usuariosque crece a pasos agigantados y qui-zás porque aquel ha cerrado su oroespañol, de hecho está preparada pararecibir los restos de Oscommerce, ya

Quien desee

trabajar con

Oscommerce deberá contar

con un buen manejo de

PHP y generar un gran

número de módulos para

que el sitio sea captado por

los buscadores.”




que cuenta con un módulo para mi-grar a Prestashop como una manerade mejorar la tecnología.Actualmente es uno de los preeridosde los desarrolladores porque oreceuna buena indexación, Ajax integrado,unciona con CSS y, por ende, es muy

sencillo de personalizar.Este modelo creado en Francia esliviano, de ácil instalación y proesaque en diez minutos la tienda virtualestará en uncionamiento. Orece unpanel de administración intuitivo quepermite crear categorías, productos,abricantes y controlar a los clientes.No por nada ue galardonada en el2010 como la mejor aplicación paracomercio electrónico.Orece muchas ventajas para los

desarrollos como un bajo consumo deCPU, introducción de códigos de ba-rras, opción de descarga de productosísicos o virtuales, cuenta con módu-los ya desarrollados y ya se anunciauna importante actualización con unaversión 1.5. Para los que buscan elpelo en la sopa, puede traer inconve-nientes que los idiomas predominan-tes son el rancés y el inglés.

Magento, este proyecto comenzó

a uncionar en el año 2007 y halogrado sumar desde entonces unamuy buena reputación. También esopen source y gratuito, se destacaporque se puede navegar de maneraácil, cuenta con un código simple,orece un muy buen posicionamien-to en los buscadores y un diseño deinteraz distinguido.Aunque es uno de los más utilizados,su gestor de instalación es sumamen-te complejo respecto a los anteriores,

como así también el uso del panelde control. Tu cliente seguramente

necesitará que lo orientes para usarlocómodamente.Como cuenta con una versión paga,quizás una de las negativas de Ma-gento más trascendentales es quesu versión gratuita es cada vez máslimitada. Sin embargo, su rendimientoes muy bueno para empresas grandesque requieren de un sotware com-pleto, en contraposición, para que suuncionamiento no resulte lento de-berás proveerte de un VPS o servidorúnico para hacer correr esta tienda. Esque Magento es muy potente, permitemultitiendas, cuenta con sistema debúsqueda en Ajax, se puede perso-nalizar completamente y orece uncompleto panel de control.No esperes encontrarte con una co-

munidad muy poblada, por el contra-rio, los pocos que rondan sólo brindanapoyo en inglés. Debes estar prepara-do porque consume muchos recursosy prácticamente no orece muchosmódulos desarrollados. Se trata de un

archivo pesado, que exigirá un buenservidor. Dicen que lo bueno cuestacaro, pero también hay que rever si laweb en desarrollo requiere de estoscostos de inversión.

elIGe Tu propIa TIeNDa

Ya contamos con una web diseñada,un grupo de productos para comer-cializar y un sotware especíco parae-commerce. Lo que sigue es más quesencillo: hay que descargar el sotwarey alojarlo en el mismo servidor dondeestá nuestra página. Desde allí, losramesworks que utilizaremos nospermitirán adaptar nuestra propues-ta a la arquitectura de sotware quetenemos disponible. El consejo másinteligente es entonces que tengamos

bien claro qué tipo de comercializa-ción se realizará, con qué tráco deventas y consultas esperas encontrartey entonces elige cuál de todas las apli-caciones que hoy conocimos te serámás útil.





Por @pixelscode.com

@

publication (4)

Documents