En la Campus Party 2010 he asistido a una charla de espresso-team relacionada con aplicaciones web para móviles que se ejecutan como si fueran nativas. En este ámbito PhoneGap se lleva la palma y dado que las instrucciones de la web no son todo lo aclarativas que deberían ser, voy a a indicar algunos consejos que me han ayudado a compilar el .jar con las librerías y a crear el proyecto de prueba:

Pasos:

1. Instalar el Java JDK:
http://java.sun.com/javase/downloads/index.jsp

2. Instalar Eclipse:
http://www.eclipse.org/downloads/ (extraer en algún sitio)

3. Instalar Android SDK:
http://developer.android.com/sdk/index.html (descomprimir en alguna ruta sin espacios, ej e:\android-sdk)
Importante para evitar dolores de cabeza después, añadir a la variable de entorno PATH la ruta hasta la carpeta del SDK (ej e:\android-sdk) y a la carpeta tools (ej. e:\android-sdk\tools)

4. Instalar el plugin ADT para Eclipse:
http://developer.android.com/sdk/eclipse-adt.html

5. Añadir componentes del SDK:
http://developer.android.com/sdk/adding-components.html

Si hay alguna duda hasta aquí, es como seguir la guía de Android para desarrolladores: http://developer.android.com/sdk/index.html

6. Instalar Apache ANT:
http://ant.apache.org/index.html (descomprimir en una carpeta sin espacios ej. e:\apache-ant)
IMPORTANTE: Crear dos variables de entorno, JAVA_HOME con la ruta al java_sdk (ej. C:\Program Files (x86)\Java\jdk1.6.0_20) y ANT_HOME con la ruta a la carpeta de ANT (ej. e:\apache-ant), además, añadir la ruta al /bin de ANT al PATH (ej. e:\apache-ant\bin)

7. Instalar ruby
Con instalador: http://rubyinstaller.org/

8. Instalar PhoneGap:
Hay dos opciones, instalar un cliente de github y bajárselo con él, o descargarte la última versión a mano de http://github.com/phonegap/phonegap-android (descomprimir en una carpeta)

9. Correr el comando mágico que creará tu .jar y el proyecto de ejemplo:
Dentro de la carpeta de phonegap-android:
ruby ./droidgap [ruta al android sdk] [nombre aplicacion] [nombre del package] [ruta al www] [ruta al proyecto de prueba]

dónde:
[ruta al android sdk] = ruta donde has descomprimido el SDK de android
[nombre aplicacion] = el que quieras, será el nombre de la aplicación
[nombre del package] = el que quieras, será el nombre del paquete
[ruta al www] = ruta donde están las fuentes html, que si no tienes, puedes poner la carpeta example de phonegap-android
[ruta al proyecto de prueba] = carpeta donde se creará el proyecto para abrir con Eclipse

En mi caso:
ruby ./droidgap e:\\Android\\android-sdk-windows test com.forgotten example/ e:\\Android\\proyectos\\phonegap1

10. Abrir Eclipse, crear un nuevo proyecto Android e indicar que lo queremos crear a partir de un código fuente existente, que será el que hemos indicado en [ruta al proyecto de prueba]

11. En el árbol de ficheros, clic derecho en libs/phonegap.jar > Build path > Add to build path

12. Clic derecho en la carpeta del proyecto dentro de Ecplise > Run As > Android Aplication.
Debes tener configurado un AVD compatible con el build target indicado en el manifest.xml.
Para más info sobre esto mejor ver el quick start de http://developers.android.com

Posibles errores:
./droidgap:37:in “’: No such file or directory – ant jar (Errno::ENOENT)
Solución, añadir la ruta de ANT a la variable de entorno PATH.

./droidgap:49:in “’: No such file or directory – android create project
Solución, añadir la ruta a las tools de Android SDK a la variable de entorno PATH.

Esto me ha llevado un montón conseguirlo por no leer las cosas, así que espero que sirva de ayuda

Compártelo

El otro día, hablando con mi compañero de curro, le planteé la duda de por qué usaba split en lugar de explode para separar cadenas en un array dado un delimitador, cómo no supo responderme ni yo tampoco sabía la diferencia, fui a mirar el manual en php.net y la diferencia realmente es que:

• explode() toma como parámetros la cadena con el delimitador, la cadena sobre la que se aplica y un parámetro opcional para limitar el número de elementos que se van a separar conteniendo el último el resto de la cadena sin partir
• split() toma como parámetro una expresión regular cómo delimitador, la cadena sobre la que se aplica y un parámetro opcional para limitar el número de elementos.

La función split en realidad es mucho más flexible para según que cosas pero más costoso si sólo queremos partir por un carácter que suele ser lo habitual, entonces es mejor usar explode(). Además, desde PHP 5.3, split() está obsoleta (por lo que provocará un Warning) y se recomienda usar preg_split() en su lugar, que además admite otro parámetro flag para modificar su comportamiento.

Espero que hayáis aprendido una cosa más

Referencias:
explode()
split()
preg_split()

Como en los otros posts (I y II) sobre la API de Google Calendar no quedó muy claro el proceso de conexión y autenticación Google, voy a pegarte un trocito de código que además de cargar las librerías necesarias para usar las APIs de Google, también te enseña como hacerlo a través de un proxy, como es el caso de mi empresa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?php
	require_once 'Zend/Loader.php';
	Zend_Loader::loadClass('Zend_Gdata_App_HttpException');  
	Zend_Loader::loadClass('Zend_Gdata_ClientLogin');  	  
	Zend_Loader::loadClass('Zend_Http_Client_Exception');  
	Zend_Loader::loadClass('Zend_Http_Client');  
	Zend_Loader::loadClass('Zend_Http_Client_Adapter_Proxy'); 
	Zend_Loader::loadClass('Zend_Gdata_Calendar');
 
	$config = array(  
	    'adapter'    => 'Zend_Http_Client_Adapter_Proxy',  
	    'proxy_host' => 'proxy.empresa.es',  
	    'proxy_port' => 8080  ,
		'proxy_user' => 'usuario_proxy',
		'proxy_pass' => 'contraseña_proxy',
		'proxy_auth' => Zend_Http_Client::AUTH_BASIC
	); 
 
	$proxiedHttpClient = new Zend_Gdata_HttpClient('http://www.google.com:443', $config); 
 
 
	$service = Zend_Gdata_Calendar::AUTH_SERVICE_NAME;
	$user = "usuario@gmail.com";
	$pass = "password";
 
	try {  
		$httpClient = Zend_Gdata_ClientLogin::getHttpClient($user, $pass , $service,  $proxiedHttpClient);  
	} catch (Zend_Gdata_App_HttpException $httpException) {  
	exit("An error occurred trying to connect to the proxy server\n" .          
		$httpException->getMessage() . "\n");  
	}  
 
 
	// Create an instance of the Calendar service
	$service = new Zend_Gdata_Calendar($proxiedHttpClient);

En caso de que el proxy no requiera usuario y contraseña, omitiremos las líneas de proxy_user y proxy_pass.

Una vez auténticados, ya podemos operar con el objeto $service para operar con Google Calendar en este caso pero también sirve para Google Docs, Youtube, etc. añadiendo las librerías correspondientes.

Cabe destacar que si te da un error de SSL (stream_socket_enable_crypto() [streams.crypto]: this stream does not support SSL/crypto in …) debes incluir la extensión OpenSSL en el php.ini añadiendo la linea extension=”openssl.so” y reiniciando el servidor para que se active.

También es posible que de un error Fatal error: Call to undefined method Zend_Http_Client::setClientLoginToken() in C:\xampp\php\ZendGdata\library\Zend\Gdata\ClientLogin.php on line ***, por eso he cambiado una línea que ponía
new Zend_Http_Client(’http://www.google.com:443?, $config);
por la que pone
new Zend_Gdata_HttpClient(’http://www.google.com:443?, $config);

Ahora ya podemos por ejemplo listar todos nuestros calendarios así:

36
37
38
39
40
41
42
43
44
45
46
47
48

try {
	    $listFeed= $service->getCalendarListFeed();
	} catch (Zend_Gdata_App_Exception $e) {
	    echo "Error: " . $e->getMessage();
	}
 
	echo "<h1>Calendar List Feed</h1>";
	echo "<ul>";
	foreach ($listFeed as $calendar) {
	    echo "<li>" . $calendar->title .
	         " (Event Feed: " . $calendar->id . ")</li>";
	}
	echo "</ul>";

Fuentes:
GData Tips
Zend Framework
http://archive.netbsd.se/?ml=squirrelmail-plugins&a=2007-07&t=4669364

Este sábado pasado asistí al Android Developer Lab organizado por Google y que se celebró en Fuenlabrada, en la Universidad Rey Juan Carlos I.

El día antes corría el rumor por twitter de que Google estaba regalando su nuevo móvil Nexus One a los asistentes de los demás eventos de Android que estaban haciendo por Europa. Ese rumor se volvió confirmación mientras se celebraban los eventos de Paris y NY (sólo que en Nueva York regalaban Motorola Droid). Así que con ese aliciente, el madrugón del Sábado para estar allí a las 10 de la mañana no sabía tan mal.

Al llegar lo primero que hicieron fue repartir los teléfonos a los asistentes registrados que éramos bastantes y llenamos la sala de conferencias.

El evento en sí, me resulto un poco decepcionante, puede ser que fuese influenciado en que el inglés del ponente me resultaba más difícil de entender que el de su compañero que hablaba menos. También porque no hicimos nada de networking (iba con @mr_villa y su amigo @olerud). Parece ser que hubo gente de And.roid.es, de GeeksPhone, Droiders y de Inizziativa (ganadores del ADC2). Pero especialmente porque pedían que llevásemos un portátil con el SDK 2.1 instalado, supuestamente para ver algo de código, pero de eso nada.

Después de la charla de introducción con datos de lo bueno que es Android y de lo que está creciendo y de ver cómo los usuarios de Android usan más sus aplicaciones y las borran menos que respecto al iPhone, nos invitaron a comer unos sandwiches y unas cocacolas para seguir después con otra pequeña charlita sobre el SDK y las APIs de desarrollo donde enseñaron un par de snippets de código para emplear geolocalización y fondos animados.

En general, si no hubiese sido por el Nexus One del cual haré una reseña en breve, la charla me habría resultado decepcionante aunque doy por hecho que otras personas la habrán aprovechado mucho más que yo desvirtualizando otros usuarios de twitter con los que se comunican, al estilo de lo que hicimos nosotros en el congreso de webmasters.

Compártelo

Pues por fin hemos integrado ambas partes, el reconocimiento de dedos y tracking con la retroproyección de la imagen en pantalla y la verdad es que funciona bastante bien. En el vídeo que hay más abajo se puede ver el resultado. Va bastante lento debido a que el ordenador que hemos conectado es un netbook con un procesador Atom de 1Gb de RAM y una gráfica Intel GMA de las báscias, aún así, hace el tratamiento de imagen bastante bien pero cuando hagamos la prueba con el Core2Duo será otro cantar y la aplicación de demostración irá como un avión. Entre tanto dejo aquí el vídeo.

Como algunos ya sabéis, Naranjo y yo andamos montando una mesa multitáctil al estilo de la Microsoft Surface, pero en plan casero, y ahorrarnos unos 11000€ que vale el bicho.

El caso es que estamos construyéndola desde cero, montando nosotros la estructura de la mesa, a nuestro gusto, pensada para sentarse alrededor con sillas normales como si fuese una mesa de comedor. La idea original es usarla para juegos de rol, donde en el centro tengamos la pantalla y desde la posición sentada podamos llegar a cualquier punto de la mesa. Así podríamos mostrar mapas de las regiones, del campo de batalla, la cuadrícula de combate, etc. Pero por supuesto nuestra ambición va más allá, queremos terminarla y ofrecerla como un producto terminado a cualquiera que esté interesado en disponer de una mesa multitáctil. Además, queremos desarrollar más aplicaciones que hagan un uso innovador de esta tecnología y convertirlo en algo a tener en cuenta de cara al futuro de las nuevas tecnologías e interfaces multitouch.

Hay unas cuantas fotos de la construcción de la mesa más abajo y también encontrarás el vídeo que he colgado en YouTube en el que se ve como la aplicación creada por NuiGroup reconoce los dedos con el montaje que tenemos hecho que de momento no son más que un monton de leds infrarrojos dispuestos en 8 grupos de 8 leds un poco al tuntún y una webcam modificada para que filtre la luz natural y vea la infraroja.

Vídeo de la primera prueba de tracking con un portátil

Hacía tiempo que no escribía por aquí!

Estan siendo unos días intensos, desde que terminó en congreso he estado hablando con gente muy interesante a través de twitter, y me he ido enterando a través de ellos de otros eventos orientados al negocio en internet, muy en auge, y otro tipo de iniciativas emprendedoras.

Después de perderme el Evento Blog España de Sevilla que pintaba muy muy bien, y el FICOD en Madrid por ser entre semana, a los cuales me habría encantado ir y que al menos pude seguir por twitter e internet, al menos estoy asistiendo al iWeekend.

Consiste en juntarnos 50 personas interesadas en emprender un proyecto y elegir entre todos, una de las ideas propuestas para ser lanzada durante los días que dura el evento. El domingo tiene que haber una versión funcional muy básica de la idea, y esto se está haciendo en 10 lugares simultáneamente, lo cual es un indicador de que la iniciativa está gustando. En Madrid es la segunda edición ya.

La idea que se ha seleccionado para Madrid es un sitio web donde emprendedores buscan microinversiones de instituciones y particulares colgando sus ideas de empresa para ser revisadas por dichos inversiones que pueden elegir cuanto invertir en cada propuesta. Yo, para no ser menos, estoy en la parte de desarrollo, pero es un gustazo trabajar en equipo, con los demás desarrolladores y con los demás equipos, sobre todo los de diseño, que son los directamente relacionados con nosotros. Esperamos lanzar una beta funcional para el domingo a última hora.

Además, estoy aprendiendo mucho sobre como lanzar una empresa, cosas a tener en cuenta, modelos de financiación, gente que ya ha emprendido, etc. Hoy nos ha dado una charla uno de los fundadores de BuyVip y nos ha contado su experiencia y la verdad es que me parece apasionante todo este mundo. ¡Mamá! ¡quiero ser emprendedor!

Por otra parte, a través de twitter se puede seguir los comentarios del resto de iWeekends que se están desarrollando en paralelo siguiendo las etiquetas de #iweekend, #iw_mad, #iwcs, etc…

Cuando tenga un rato colgaré fotos pero se pueden ir viendo algunas en el Blog de Patricia Araque.También puedes ver una lista de twitteros del iWeekend de Madrid aquí

@laurixi y yo agotados tras el segundo dia de iWeekend y viendo la presentación del plan de negocio

Diseño elegido para el logo de emprendemás

Como siempre se me olvida, voy a apuntar aquí cómo se hacen objetos o clases nuevas en javascript.

Lo primero es crear una función con el nombre del objeto, ya demás puede llevar parámetros, por ejemplo:

function miObjeto(parametro1, parametro2)
{
this.primerParam = parametro1;
this.segundoPara = parametro2;
}

Fijarse que para añadir atributos, se usa this.atributo.

Con eso podemos crear instancias de esa clase así:
var instancia1 = new miObjeto(”p1″,”p2″);

Si ahora hiciesmos un alert(instancia1.primerParam); nos saldría “p1“.

Hasta ahora esto vendría a ser como un struct de C, pero si queremos convertirlo en un objeto, con métodos, se declaran así:

miObjeto.prototype.metodo = function(parametro1,parametro2)
{
this.primerParam = parametro1;
this.segundoParam = parametro2;
}

ahora podemos llamar así:
instancia1.metodo(”a1″,”a2″);
y al hacer el alert(instancia1.primerParam); nos daría “a1“.

Así de simple se usa el método prototype, para prototipar nuevas funciones a un objeto, hale, ya os he desvelado el secreto de esas webs tan chulas en javascript, ¡a trabajar!.

Bueno, sigo en mis trece de hacer que esto funcione, y quién sabe, hacer algo rentable de ello.

El caso es que como ya conseguí insetar los eventos en mi calendario recién creado, quería ver que los eventos que iba a meter no existían ya.

Para esto lo más cómodo es averiguar la cadena que identifica al calendario, pero ojo, porque no es ni el id del calendario ($calFeed[i]->id->text) ni la URL ($calFeed[i]->link[0]->href) sino una cadena que las contiene. Lo más rapido es quitar la URL base que no nos interesa para que nos quede el userID del calendario (que parece ser distinto para cada calendario).

$user = str_replace(Zend_Gdata_Calendar::CALENDAR_FEED_URI.'/default/', "", $calFeed[6]->id->text);

Después, hacemos una query a ESE calendario:

1
2
3
4
5
6
7
8
9

$gdataCal = new Zend_Gdata_Calendar($client);
	$query = $gdataCal->newEventQuery();
	$query->setUser($user);
	$query->setVisibility('private');
	$query->setProjection('full');
	$query->setOrderby('starttime');
	$query->setStartMin($fechaIni);
	$query->setStartMax($fechafin);
	$eventFeed = $gdataCal->getCalendarEventFeed($query);

Y luego ya, podemos reccorer sus eventos:

10
11
12
13
14
15
16

foreach ($eventFeed as $event)
	{
	 	echo "Comprobando ".$event->title->text."<br>";	    
		foreach ($event->when as $when) {
			echo $when->startTime."<br>";
		}
	}

Si no queremos hacer una búsqueda por parámetros sino sacarlos todos, es más fácil, primero sacamos el enlace al calendario:

1

$url = $calFeed[1]->link[0]->href;

Y después pedimos los eventos:

2

$events = $gdataCal->getCalendarEventFeed($url);

(Fuente: http://www.zfforums.com/zend-framework-components-13/web-web-services-22/gdata-how-get-other-calendar-than-default-one-245.html)

De verdad que no se por qué la API esta está tan mal documentada…

Bueno, llevo un par de días pegándome con una chorrada de aplicación que se me había ocurrido hacer por entretenimiento y al final ha resultado la mar de estresante, aunque eso si, puedo decir que he aprendido algunos entresijos de las APIs de Google, en concreto de la de calendar, aunque en definitiva son todas parecedas, ya que se basan en el envío de XML a través de métodos POST previa autenticación con Google por 3 vías diferentes.

Como hay miles de tutoriales por ahí para empezar, prefiero comentar problemas que haya ido encontrando, además, como todo buen programador masoquista, paso de usar la libreria-para-tontos de PHP basada en Zend Framework que hay creada para usar, aunque al final he tenido que sucumbir, no por voluntad propia, sino por un error 411 Length Required que no hacía más que salirme por mucho que cambiase las cabeceras del POST, así que solución 1, pasarse a la librería Zend, solución 2, ver como porras lo hace la librería para copiarlo xD

Para mas inri, el error me lo estaba dando al crear un nuevo calendario enviando por POST el xml que hace falta para indicar que se desea crearlo, me pasé a la librería Zend pensando que ahí habría algún método mágico tipo createCalendar al igual que hay uno para crear eventos. Craso error amigo mío, cuando veo que ni por asomo hay una función para crear calendarios. Menos mal que rebuscando por ahí, un alma caritativa da una solución que ya se me había ocurrido y no sabía hacer, que es, nuevamente, enviar por POST el xml a pelo (pero esta vez con la libreria Zend) y voilá! funcionó

Para crear un calendario nuevo, se debe escribir el XML correspondiente, se puede usar una plantilla como la siguiente:
$xmlEntry = "<entry xmlns='http://www.w3.org/2005/Atom' xmlns:gd='http://schemas.google.com/g/2005' xmlns:gCal='http://schemas.google.com/gCal/2005'> <title type='text'>[TITLE]</title> <summary type='text'>[SUMMARY]</summary> <gCal:timezone value='Spain/Madrid'></gCal:timezone> <gCal:hidden value='false'></gCal:hidden> <gCal:color value='[COLOR]'></gCal:color> <gd:where rel='' label='' valueString='Madrid'></gd:where> </entry>";

De ahí solo hay que rellenar 3 cosas, [TITLE] que es el nombre del calendario, [SUMMARY] que es el resumen (y no es importante) y [COLOR] que define el color de la etiqueta del calendario y no puede ser cualquier color sino uno de estos:
'#A32929'
'#B1365F',
'#7A367A',
'#5229A3',
'#29527A',
'#2952A3',
'#1B887A',
'#28754E',
'#0D7813',
'#528800',
'#88880E',
'#AB8B00',
'#BE6D00',
'#B1440E',
'#865A5A',
'#705770',
'#4E5D6C',
'#5A6986',
'#4A716C',
'#6E6E41',
'#8D6F47',

(que no se cual es cual…)

Total, que una vez sustituidos los campos de la plantilla con nuestros datos del calendario, pues hay que autenticarse si no lo estamos ya, y enviar el POST así:

function crearCalendario($nombre, $resumen, $client)
{
	$gdataCal = new Zend_Gdata_Calendar($client);
	$uri = 'http://www.google.com/calendar/feeds/default/owncalendars/full';	
	$xmlEntry = str_replace('[TITLE]', $nombre, $xmlEntry);
	$xmlEntry = str_replace('[SUMMARY]',	$resumen, $xmlEntry);
	$gdataCal->post($xmlEntry, $uri);
}

También se puede guardar el xml en un archivo plantilla, por ejemplo createcal.xml y cargarlo antes de sustituir:
$xml = file_get_contents('createcal.xml');

Después de ejecutar esto vamos a Google Calendar (o listamos de nuevo los calendarios) y vemos que el calendario que le hemos dicho se ha creado correctamente.

Por cierto, para los que usan WAMP como servidor local de prueba, para usar las librerias Zend hay que ir al php.ini pero no el de la carpeta PHP sino al de Apache (C:\wamp\bin\apache\Apache2.2.11\bin\php.ini) y buscar la línea que empieza por ;include_path, quitarle el ; del principio y añadir al final la ruta del disco duro hasta la carpeta library del directorio donde hemos descargado el Zend (línea 528: include_path = “.;c:\php\includes;C:\wamp\apps\ZendGdata-1.8.4\library”)

Antes de que sigas leyendo, no, no es posible hacer un tooltip en cada opción del desplegable en IE6 ya que ni el atributo title ni los eventos de ratón están disponibles para la etiqueta option. Para otros navegadores consulta mi post anterior.

Para hacer un tooltip funcional en IE6, se debe incluir el código siguiente:

1
2
3
4
5
6
7
8
9
10
11

<style>
#tooltip {
  position: absolute;
  display:none;
  padding:1px 2px 1px 2px;
  border: 1px solid black;
  background-color:#FFFF99;
  width:400px;
  z-index:1000;
}			
</style>

Esto crea la clase tooltip en CSS para asignar al div que almacenerá el texto del tooltip.

Ahora incluimos las funciones en javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script language="javascript" type="text/javascript">
// This function checks the mouse event
function checkEvent(e) {
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	showHideToolTip(targ, e, e.type)
}
// This function shows/hides the tooltip
function showHideToolTip (theDropDown, e, eType)
{
 var toolTipObj = new Object();
 toolTipObj = document.getElementById("tooltip");
 toolTipObj.innerHTML = theDropDown.options[theDropDown.selectedIndex].text;
 if(eType == "mouseout"){
  toolTipObj.style.display = "none";
   } else
 {
  toolTipObj.style.display = "inline";
  toolTipObj.style.top = e.y + 15;
  toolTipObj.style.left = e.x + 10;
 }
}

Esto sirve para comprobar el evento sobre el control y para mostrar u ocultar el tooltip.

Luego solo hay que añadir en el html el siguiente div

<div id="tooltip"></div>

Y añadir al select o dropdown que tengamos lo siguiente antes de cerrar el tag (>):

onMouseOver="checkEvent(this.event);" 
onMouseOut="checkEvent(this.event);" 
onMouseMove="checkEvent(this.event);"

Ver demo (solo IE7+)

Buenas, siguiendo estos días unos posts dedicados al infernal Internet Explorer y cómo algunas empresas, no sólo se empeñan en jorobar empleandolo, sino además manteniendo la versión 6 como “corporativa”, hoy vamos a aprender como implementar un tooltip para menús desplegables tipo select (html) o dropdown(asp.net)

Para IE7 y navegadores que funcionan bien como Firefox, podemos hacer uso del atributo title de los elementos html ya que se dispara el tooltip en el evento mouseover automáticamente (cosa que en IE6 no ocurre por eso hay que hacerlo de otra manera).

Si tenemos un desplegable que se llena dinámicamente, no podemos poner el title a cada option, ya que aun no existen a la hora de diseñar el formulario, por esto se puede echar mano de javascript con la siguiente funcion:

1
2
3
4
5
6
7
8
9
10

function tooltips(){			
        items = document.getElementsByTagName("option");
	for(i=0; i<items.length; i++)
	{
	       items[i].title=items[i].text;				
	}
	drop = document.getElementById("select");
	drop.onchange = tooltipselect;
	tooltipselect();
};

llamando a esta funcion en el body así:

1

<body onload="javascript:tooltips()";>

Con esto añadiremos el title a todos los dropdowns de la página así al desplegar el select, nos aparecerá un tooltip para cada option.

Para añadir también un tooltip a la opción seleccionada se incluye la siguiente función, que como se ve, es llamada al final de la anterior (asumiendo que el select tiene como id=”select”):

1
2
3
4
5

function tooltipselect()
{
	drop = document.getElementById("select");
	drop.title = drop.options[drop.selectedIndex].text;
};

Esto hace que al cambiar la opción, se actualice el tooltip del desplegable cerrado.

Ver una demo

A raíz del post anterior donde podemos detectar la version del internet explorer, hoy podemos instalar más de una versión simultánea del mismo con el fin de probar distintas maquetaciones, dada la gran afición del Internet Explorer 6 a joder modificar la maquetación debido a mútiples bugs features, siempre viene bien tener distintas versiones a mano para optimizar el diseño y aplicación a mútiples navegadores con sus tocahuevos usuarios detrás.

No voy a explicar como funciona, para eso lo veis aquí pero se puede instalar descargandolo de Multiple IE Setup(10,3 MB sólo Win XP )

Como sólo te instala hasta el IE6, recomiendo instalar el 7 de forma normal y luego instalar esto para disponer de las demás versiones.

Forgotten Projects recomienda encarecidamente usar Mozilla Firefox que es más seguro, más estable, más útil, más bonito, más ampliable, más opensource y más más

Como hace mucho que no escribo, voy a hacerlo comentando algo que he necesitado hoy en el curro, que es identificar la versión de internet explorer para poder realizar una función u otra, que sabemos que no va a ser compatible en una versión y en otra si, vamos, lo típico.

Una manera es a partir de la versión de javascript, la cual no es muy fiable.

El código que nos sirve para almacenar la versión en una variable es el siguiente:

1
2

var ieVer=/*@cc_on function(){ switch(@_jscript_version){ case 1.0:return 1; case 3.0:return 3; case 5.0:return 5; case 5.1:return 5; case 5.5:return 5.5; case 5.6:return 6; case 5.7:return 7; case 5.8:return 5.8; }}()||@*/0;
if(/MSIE 6.0/i.test(navigator.userAgent)) {ieVer=6;}

Las instrucciones entre /*@cc_on y */ son comentarios condicionales (y que ni yo sabía que existía tal cosa) y por lo visto es tan poco estándar que sólo internet explorer lo lee, así que de entrada ignoramos que otros navegadores se metan por ahí y la lien. De este modo valdrá 0 para el resto de navegadores (y podemos entonces comparar la versión de éstos de otras maneras).

La parte de dentro del comentario chungo, asocia un valor a cada versión del IE, de este modo, la versión 1 devuelve 1, la versión 3 devuelve 3, etc…

Se comprueba hasta el 5.8, luego el 6 se comprueba fuera del comentario. La versión 7 y 8 del Internet Explorer devuelve 7 u 8 según proceda pese a no estar contemplado en el código (intuyo que va implícito en la versión de javascript que implementen).

Así, para comprobar si el navegador es inferior a una versión, solo hay que hacer:

1

if (ieVer<=6) {funcionEjecutada();}

Otro método más fiable es parsear con una expresión regular la versión del navegador. El código es el siguiente:

1

function vIE(){return (navigator.appName=='Microsoft Internet Explorer')?parseFloat((new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})")).exec(navigator.userAgent)[1]):-1;}

Devuelve la versión de internet explorer devuelta por la variable UserAgent en caso de ser Internet Explorer o -1 para el resto de navegadores (curioso que el appName del firefox sea el difunto Netscape aunque luego en el userAgent se indique Firefox).

Fuente:outbook

Estaba escuchando en Spotify la banda sonora de Matrix Revolutions mientras escribo código en el curro y he llegado a la canción “Tetsujin“, de Juno Reactor vs. Don Davis y he pensado, ‘que canción más cojonuda para programar’, lo que me ha llevado a buscar en internet que oye la gente mientras programa.

Programar es una tarea que requiere concentración pero al ser bastante mecánico, se puede hacer oyendo música sin problemas, no es como estudiar, que puede ser un poco contraproducente según lo que se oiga.

Cuando programo me gusta escuchar música cañera que me espabile, que tenga un ritmo muy marcado más o menos constante y además me motive a programar a toda pastilla. La música electrónica es un buen aliado en este sentido pero como no soy muy fan y no conozco muchos grupos buenos, intento oir cosas que me suenen. Por ejemplo, la banda sonora de las tres películas de Matrix me parecen estupendas para programar. Ahora mismo estoy oyendo ‘Navras‘ y me está motivando. También me gusta escuchar Nightwish o Linkin Park ya que tienen ritmos que motivan a darle caña a lo que estemos haciendo.

Por eso animo a los lectores y visitantes que me digan que oyen mientras programan o hacen ejercicio y así descubrir nuevos temas interesantes

En muchos sitios se explica como insertar filas en excel por OleDb así que voy a poner un fragmento y una breve explicación de cómo se hace porque lo realmente interesante es como corregir el error “La operación debe usar una consulta actualizable” que me surgió a mi y que me costó un montón averiguar dado que no me funcionaban las indicaciones que encontraba en otras páginas.

1
2
3
4
5
6
7

        string file = Server.MapPath(@"pruebaExcel.xls");
        string connectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + file + ";Extended Properties='Excel 8.0;HDR=Yes;IMEX=0;'";
        System.Data.OleDb.OleDbConnection oCon = new System.Data.OleDb.OleDbConnection(connectionString);
        oCon.Open();
        string q = "INSERT INTO [Hoja1$B1:B1] VALUES (1)";
        int r = new System.Data.OleDb.OleDbCommand(q, oCon).ExecuteNonQuery();
        oCon.Close();

Este código busca la ruta física del archivo de excel en el servidor de ASP.NET para crear la cadena de conexión que nos conectará al archivo de Excel que hemos especificado. Importante el código en negrita IMEX=0 ya que tiene que ver con los tipos de los datos de las columnas y puede dar problemas a la hora de escribir desde código y es el problema que estaba teniendo. Si lo ponemos a uno nos dará un error que dice “Operation must use an updateable query” o “La operación debe usar una consulta actualizable”, para solucionarlo ponemos IMEX=0 o lo omitimos del connection string.

Después creamos la conexión con OleDB usando la connection string que acabamos de crear la abrimos para poder empezar a operar.

La notación sql de Excel y Access difiere un poco a lo que estamos acostumbrados ya que es posible que los nombres de columnas tengan caracteres raros como acentos o espacios, por eso, al decirle en que tabla queremos operar, se lo ponemos entre corchetes, y en excel además ponemos un $ al final para indicarle que hoja del libro vamos a usar.

SELECT * FROM [Hoja1$]

nos devolvería todas las filas de la hoja 1 del libro de excel, salvo que hayamos indicado en el connection string la propiedad HDR=1 con lo cual le indicamos que la primera fila no contiene datos sino los nombre de columnas.
Si solo queremos usar un rango de celdas podemos decirle

SELECT * FROM [Hoja1$A2:H10]

que nos devolvería las filas de la 2 a la 10 y las columnas de la A a la H.

En excel también podemos definir nombres a un conjunto de celdas. Para ello, dentro de Excel, seleccionamos un rango de celdas y vamos al menu Insertar > Nombre > Definir y le damos un nombre. Este nombre también es accesible desde código pudiendo hacer:

INSERT INTO NombreQueHemosDado (col1, col2, col3) VALUES (1,2,3)

Si nuestras columnas tienen nombres raros, hay que ponerlas entre corchetes pero no pasa nada si se los ponemos a todas aunque no tengan nombres raros:

INSERT INTO NombreQueHemosDado ([col1], [col2], [col3]) VALUES (1,2,3)

también es válido.

Aprovecho para recomendar la página connectionstrings.com donde se puede buscar qué cadena de conexión hay que escribir para conectarse a cualquier base de datos y dónde encontré una pista para solucionar el error que tenía.

Compártelo

¿Usas 4images y necesitas añadir una plantilla a tu template para mostrar archivos kml en la galería?

Copia el siguiente código en un archivo de texto, guardalo como kml.html y súbelo al directorio /media dentro de la carpeta del template que estés utilizando, y habilita los archivos kml como extensión válida de archivos que se pueden subir, en el panel de control de 4images.
Recuerda que debes sustituir donde pone “tuKeyDeGoogleMaps” en la primera línea por una clave que te proporciona google para permitir tener mapas en tu dominio.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="map" style="width: 700px; height: 500px">
</div>
<script src="http://maps.google.com/maps?file=api&v=2&key=tuKeyDeGoogleMaps" type="text/javascript"></script>
<script languaje="javascript">
	map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(43.337164854911,-3.8960266113281),2,G_SATELLITE_MAP);
	map.addControl(new GSmallZoomControl());
	url = "{media_src}";
	url = "http://www.ambiental-hitos.com/4images/"+url.substr(2);
	geo = new GGeoXml(url, function cargado(){
		if (geo.loadedCorrectly()) {
		    geo.gotoDefaultViewport(map);
			if(map.getZoom() > 15){
				map.setZoom(15);
			}
		  }
	});
	map.addOverlay(geo);
</script>

y quedaría así:

Compártelo

Hace poco descubrí la existencia de la etiqueta expression en los archivos CSS que permiten ejecutar una sentencia de javascript para dar valor a un selector.

Bien, lo primero decirte que evites esto totalmente salvo que sea realmente necesario, siempre que puedas, hazlo con cosas estándar.

Lo segundo, esto puede venir bien a la hora de limitar el ancho o alto máximo o mínimo de un elemento html en IE6 o anteriores ya que la etiqueta max-width no existe en ellos.

Un ejemplo extraído de aquí nos dice como usarlo:

1
2
3
4
5
6
7
8
9
10
11

<html>
<style>
p {
border:1px solid red;
width:width:expression(document.body.clientWidth > 800? "800px": "auto" );
}
</style>
<body>
<p>
[mucho texto]
</p>

De esta manera decimos que si el ancho de la ventana cliente es mayor que 800px, la mantenemos en 800px o si es menor, la dejamos automática. Ejemplo

Compártelo

Siguiendo con los post sobre cachitos de código que te hacen las vida más fácil (y que por lo visto hacen que aumenten las visitas del blog) hoy voy a hablar sobre como insertar una imagen en una hoja de Excel desde C# .NET

Todos estos fragmentos de código que voy subiendo solucionan problemillas concretos con los que me topo en los proyectos en los que trabajo y sobre los cuales tampoco encuentro información relevante en Google.

Empecemos, escribo el código y lo comento:

1
2
3
4
5
6
7
8
9
10
11
12

object oMissing = System.Reflection.Missing.Value;
Application apl = new Excel.ApplicationClass();
Workbook libro = apl.Workbooks.Open(@"c:\temp\archivoexcel.xls", oMissing, oMissing, oMissing, oMissing,
                  oMissing, oMissing, oMissing, oMissing, oMissing, oMissing, oMissing, oMissing, oMissing, oMissing);
 
#region Insertar imagen en excel
Excel.Worksheet sheet = (Excel.Worksheet)libro.Sheets[1];
System.Drawing.Image logo1 = System.Drawing.Image.FromFile(@"c:\temp\logoAena.png");
sheet.Shapes.AddPicture(@"c:\temp\logoAena.png", MsoTriState.msoFalse, MsoTriState.msoCTrue, 1f, 1f, logo1.Width, logo1.Height);
#endregion
 
libro.SaveAs(@"c:\temp\excel.xls", Excel.XlFileFormat.xlExcel9795, null, null, false, false, Excel.XlSaveAsAccessMode.xlNoChange, Excel.XlSaveConflictResolution.xlLocalSessionChanges, false, null, null, 0);

Vamos a ver línea por línea que hace cada cosa

2
3
4

Application apl = new Excel.ApplicationClass();
Workbook libro = apl.Workbooks.Open(@"c:\temp\archivoexcel.xls", oMissing, oMissing, oMissing, oMissing,
                  oMissing, oMissing, oMissing, oMissing, oMissing, oMissing, oMissing, oMissing, oMissing, oMissing);

Con estas lineas abrimos un archivo de Excel desde código, notaremos como se abre un proceso Excel.exe en el Administrador de Tareas, es necesario tener Excel Instalado e incluir la referencia al objeto COM: Excel Objects 11.0

7
8
9

Excel.Worksheet sheet = (Excel.Worksheet)libro.Sheets[1];
System.Drawing.Image logo1 = System.Drawing.Image.FromFile(@"c:\temp\ArchivoImagen.png");
sheet.Shapes.AddPicture(@"c:\temp\logoAena.png", MsoTriState.msoFalse, MsoTriState.msoCTrue, 1f, 1f, logo1.Width, logo1.Height);

Con esas líneas seleccionamos la primera hoja del libro que hemos abierto, luego cargamos una imagen en un objeto Image y con sheet.Shapes.AddPicture añadimos la imagen en las coordenadas 1,1 (ojo, no son celdas, son coordenadas en pixeles (y de tipo float)

12

libro.SaveAs(@"c:\temp\excel.xls", Excel.XlFileFormat.xlExcel9795, null, null, false, false, Excel.XlSaveAsAccessMode.xlNoChange, Excel.XlSaveConflictResolution.xlLocalSessionChanges, false, null, null, 0);

Con esa línea salvamos el archivo con el nombre que queramos y ya está, ya tenemos un excel con una imagen. No hace falta que el Excel esté vacío, podemos abrir un excel con contenido y poner la imagen donde queramos.

¿Te ha servido? Apoya este blog:

Compártelo

He encontrado por ahí una función muy útil para capitalizar cada palabra de un string en javascript, viene con autor y sitio web

1
2
3
4
5
6
7

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/string/capitalize [rev. #1]
String.prototype.capitalize = function(){
    return this.replace(/\w+/g, function(a){
        return a.charAt(0).toUpperCase() + a.slice(1).toLowerCase();
    });
};

Uso:
capitalizada = cadena.capitalize();
Ejemplo:
a="hola MUNDO mua hahahaha haha ha";
a.capitalize();
Devuelve:Hola Mundo Mua Hahahaha Haha Ha


objeto.prototype.metodo permite añadir métodos nuevos a objetos que antes no los tenian, así String.prototype.capitalize hace que se añada al objeto string un nuevo método llamado capitalize, el cual decimos que es una función con capitalize=function(){…}

/\w+/g es una expresion regular que hace que busquemos en la cadena cualquier dígito, letra o guión bajo (no espacios)(mediante \w), que haya almenos un carácter (con +) y que esté al comienzo (mediante /g).

Así por cada palabra llamamos a la función que hace mayúscula la primera letra y minúscula las demás y las devolvemos.

y si solo queremos poner en mayúsculas la primera letra de todo el string

1
2
3

String.prototype.capitalize2 = function(){
       return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
};

Uso:
frase=cadena.capitalize2();
Ejemplo:
a="hola MUNDO mua hahahaha haha ha";
a.capitalize2();
Devuelve:Hola mundo mua hahahaha haha ha


¿Te ha gustado? ¿Un clic aquí?

Compártelo

Para aquellos que nos gusta diseñar aplicaciones web o tenemos un blog en wordpress, vía Anieto2K encuentro un par de enlaces a 15000 iconos divididos en 7500 y otros 7500 y 70 temas para wordpress, a ver si algún día me animo y hago mi propio tema, aunque para variar ando enfrascado en varios proyectos

Y para aquellos que quieran depurar javascript pero no usan Firefox y no pueden descargarse la maravillosa e imprescindible extensión Firebug para depuración y desarrollo web, existe JSComandlet, para depurar javascript con javascript y es virtualmente funcional en cualquier navegador que soporte javascript (si, depurar javascript en internet explorer)

Anieto2k es un blog muy interesante para desarrolladores web ya que se tratan multitud de temas sobre javascript, CSS, Wordpress entre otras aplicaciones interesantes destinadas a la web.

Compártelo

Después de la Campus Party en la que participé con un juego programado entre 3 en 72 horas, me animé en aquello de los concursos de desarrollo y encontré un concurso de OpenMovilForum que también hacían acto de presencia y un concurso en la Campus.

Este concurso consistía en hacer un mashup con varias librerías de movistar que ellos proporcionaban y orientadas a servicios de terminales móviles tales como Envio/Recepción de SMS y MMS, Localización geográfica, videollamada, CopiAgenda, etc.

Me animé a participar, mayormente motivado por los suculentos premios de 6000€, y dos de 2000€ que otorgaban a los ganadores y que veía asequible de obtener al menos el tercer puesto (y que no fue así).

Para ello diseñé una aplicación de escritorio orientada a Bares y Pubs. Los usuarios envían un SMS a un número de teléfono proporcionado por el pub para hacer una de las dos siguientes cosas:

Una de ellas consiste en enviar un mensaje de texto con una palabra clave y ese mensaje es mostrado cada cierto tiempo en pantallas y monitores instalados en el local, de una manera similar a los mensajes de texto que se muestran en la parte baja de la pantalla del televisor durante los programas de debate. Dispone de una lista de palabras para filtrar los SMS con contenido ofensivo.

Otra de las opciones es poder elegir de forma democrática las canciones que suenan en el local al más puro estilo de jukebox (caja de música). Para ello hay listas publicadas en el local donde se muestra un código y una canción y los asistentes envían una SMS con la palabra clave seguida del código de la canción para agregarla a la lista de reproducción que está sonando en el local.

Para motivar a los asistentes a enviar estos SMS, se les premia con cupones de descuento o 2×1 o lo que se desee al enviar determinado número de SMS, que se les envía al móvil con el código del cupón. La idea inicial era enviar un MMS con el logo del local y el código pero por falta de tiempo solo se envía un SMS con el código.

Empleé SqLite como motor de base de datos por ser ligero, sencillo y no requerir instalación de ningúna cosa.
Para proyectar los SMS se usa Adobe AIR (como el Flash pero con acceso a base de datos) que lee los mensajes del fichero de sqlite y los muestra con fundidos en negro en una ventana.
Las librerías que originalmente estaban en PHP, Ruby y C++ se pasaron a C# (.NET Framework 2.0)
Se usa OpenPOP para acceder a una cuenta de correo donde llegan los SMS

Como digo no gané pero aprendi unas cuantas cosas interesantes y la aplicación funciona y es código libre bajo licencia Apache 2.0.

El wiki de proyecto se encuentra aquí
Los participantes aquí
Los ganadores aquí
El código y el instalador del proyecto aquí

De todos modos, si algún propietario está interesado en el proyecto, que contacte conmigo y veremos la forma de comercializarlo y sacarle partido así como mejorarlo y adaptarlo

Un clic aqui?

Compártelo

(Este post es solo para programadores)

Buenas, el otro día andaba buscando como hacer un select distinct sobre un data table de .NET y resulta que con la función select del DataTable no se puede hacer un distinct para obtener las filas que son distintas dada una columna.

Estuve buscando en internet y encontré un par de soluciones pero no me servían porque devolvían los resultados en una sola columna con las filas distintas(en concreto esta de Microsoft y esta).

Así que como necesitaba algo que se pareciese más a un select distinct de SQL me hice mi propia función que es la siguiente:

C#:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

public class DataSetHelper
    {
        public static DataTable selectDisctinct(DataTable dt, string columnName)
        {
            try
            {
                if (columnName == null || columnName.Length == 0)
                       throw new ArgumentNullException(columnName, "El parámetro no puede ser nulo");
                DataTable distintos = dt.DefaultView.ToTable(true, columnName);
                DataTable aux = new DataTable();
                foreach (DataColumn dc in dt.Columns)
                    aux.Columns.Add(new DataColumn(dc.Caption,dc.DataType));
                foreach (DataRow dr in distintos.Rows)
                {
                    aux.ImportRow(dt.Select(columnName + " = '" + dr[0] + "'")[0]);
                }
                return aux;
            }
            catch (Exception ex)
            {
                throw (ex);
            }
        }
    }

es necesario incluir el namespace System.Data:
using System.Data;

Espero que sea útil.
Referencias:
http://weblogs.asp.net/eporter/archive/2005/02/10/370548.aspx
http://support.microsoft.com/default.aspx?scid=kb;en-us;326176#1

Compártelo

Ayer instalé en mi Wii el canal hombrew para wii mediante el Twilight Hack.

Vamos por partes.

El homebrew son programas caseros desarrollados por la comunidad, y generalmente gratuitos. Está de moda el desarrollo de este tipo de juegos y programas para las consolas de última generación. Tanto que XBOX360 cuenta con una comunidad oficial para comercializar los juegos creados con XNA pero este no es el tema que nos concierne.

Empecé a conocer el mundo de la scene (comunidad de programadores que se dedican a extraer el máximo partido a todo el hardware que pillan por mano) por la PSP, en la que haciendo un downgrade del software de la consola se podía explotar una vulnerabilidad para ejecutar código casero. Pese a que la primera utilidad que se nos ocurre es el poder jugar a juegos pirateados, esta funcionalidad encierra mucho, muchísimo más. Es la comunidad la que se dedica a hacer juegos amateur para PSP, a crear nuevas aplicaciones para PSP, tales como clientes/servidores de ftp (para escribir en la memoy card sin tener que conectar la consola por usb o sacar la tarjeta), servidores web, reproductores de vídeo de cualquier formato, agendas, calendarios, mensajería instantánea…. En definitiva, hay miles de aplicaciones que pueden hacer que una consola diseñada para jugar y navegar por internet, se convierta en un miniordenador con multitud de posibilidades que no solo no son soportadas por el fabricante, ni éste intenta potenciarlo, sino todo lo contrario, se persigue. Persiguen a gente que se dedica a mejorar su aparato de forma no oficial sólo porque no pueden sacar dinero de ello, pero que podrían sacarlo si lo fomentasen, vendiendo más consolas, o llevandose una parte de beneficios de venta de aplicaciones, o de otross medios, pero como siempre, se niegan a cambiar su anticuado modelo de negocio.

A lo que iba, ayer abrí mi consola a un nuevo abanico de posibilidades al instalar el canal homebrew de wii, que permite acceder a una lista por internet donde descargar e instalar de una forma ultrasencilla, aplicaciones caseras tales como juegos, emuladores, herramientas, demos, etc. Es tal el afán de la comunidad por exprimir la consola que incluso han sacado un programa para reproducir películas en DVD, que increiblemente el software oficial no permite, y gracias a ellos sí. Y no solo eso, hay una versión del reproductor libre MPlayer, que permite a la consola reproducir cualquier formato de vídeo, incluso por streaming, en la consola. Impensable para una Wii recién comprada. Así que lo próximo serán dos cosas:
1. Montarme un servidor de medios en mi portatil para acceder desde la Wii (la PS3 lo hace de serie)
2. Instalarme el ScummVM para Wii y probar el Monkey Island

Me parece increíble esta gente, que se dedica a encontrar fallos de seguridad con los que luego trapichear y que dan pie a todas estas posibilidades para los usuarios de estos dispositivos. Un bravo por ellos y un servidor que se muere de envidia y que le gustaría saber hacer todas esas cosas. Esta gente es capaz de modificar una partida salvada de un juego para hacer un buffer overflow y ejecutar código casero, y que parece ser la forma más común de entrar, ya que en PSP se hizo para el GTA y en Wii se hace para el Zelda. Una vez se tiene acceso al núcleo, y por ingeniería inversa, averiguan cómo explotar toda la funcionalidad. Sencillamente increible, y ya no hablemos de los que desmontan la consola y averiguan cómo saltarse la protección de los juegos….

Por qué no enseñarán estas cosas en la universidad

Enlaces:
Tutorial en inglés para instalarlo para torpes (con instalador para windows y todo)
Hilo en ElOtroLado (también para torpes)
Google buscando twilight hack, wii brew, wii homebrew channel para los mas hardcore

Compártelo

Buenas!

He encontrado un par de libros muy buenos sobre el desarrollo de juegos en SDL.

El primero es de Alberto García Serrano y tiene licencia CC.

Lo podéis bajar de aquí, bien de la web de su autor. Son menos de 2 Mb y unas 155 páginas. Lo conozco desde hace bastante y lo he usado y está muy bien.

El segundo es de Antonio García Alba y creo que la licencia también es CC.

Es supercompleto, unas 700 páginas y pesa 14 Mb. Incluye mucho código de ejemplo y lo he subido aquí porque no se cual es la web del autor.

A ver si voy practicando con la SDL otra vez para el concurso de programación de videojuegos de la CAMPUS PARTY de este año a ver si puedo ir

Compártelo

En diciembre me presenté a un concurso sobre proyectos innovadores que había en mi universidad organizado por la cátedra INCREA. Me presenté con el proyecto de fin de carrera con la ayuda de mi tutor Raúl Montoliu que me aconsejó cómo hacer el informe. Para presentarse, aparte de un informe y una ficha, hacia falta un cartel tamaño descomunal (A2) para colgar allí en la UJI.

El otro día me mandaron un correo comunicándome que los carteles iban a ser expuestos en breve en la universidad pero no tengo ni idea de dónde ni cuando, ni cuando se resuelve el concurso, mientras tanto, os dejo con el cartel que resume mi proyecto para aquellos que aun no han entendido de que va o no he sabido explicarselo

Compártelo

Hola!

En una estupenda tarde de aburrimiento en la que no sabía qué hacer, encontré por mi mesa unos papeles sobre el desarrollo de addins para MSN Live Messenger, lo que significa que con un poco de programación en .Net se puede ampliar la funcionalidad del cliente de mensajería de Microsoft (no mucho, al menos al principio, está muy restringido, pero se puede apañar para quitar algunas limitaciones). Es por ello, que basándome en un plugin para el cliente Emesene de linux el cual permite embeber vídeos de youtube en la propia conversación, he decidido crear un plugin similar para el cliente oficial, que si bien no los incrusta en la conversación (lo cual intentaré hacer mas adelante) abre cada vídeo en una ventana externa para poder verlo sin tener que abrir el navegador y entrar en la página web.

Para instalar el addin hay que seguir los siguientes pasos:
1. Descargar el instalador. (Requiere .Net Framework 2.0 que se puede bajar aquí y flash instalado en internet explorer)
2. Instalar.
3. Si tenias el MSN abierto, cierralo del todo y vuelve a abrirlo. Si lo tenias cerrado, simplemente ábrelo de nuevo.
4. En el MSN Live Messenger, ve a Herramientas > Opciones. Abajo aparecerá la ficha “Accesorios”. Pincha
5. Agrega el archivo .dll que se encuentra en la carpeta donde se ha instalado el programa (por defecto en c:/Archivos de Programa/Simple Youtube Video Watcher)
6. En la ficha de contactos, haz clic en tu nick, y debajo de los estados que puedes poner, aparece “Activar plugin”, activalo.

Ahora cada vez que recibas un enlace a un vídeo de youtube, se abrirá una ventana con el vídeo.

También he subido el código fuente, para que luego digan que los que desarrollamos en Windows no liberamos el código, está aquí.

Notas sobre el desarrollo (para desarrolladores):
Tutorial sobre el desarrollo de addins para Messenger aquí y aquí
El principal problema de los addins para Messenger es que se ejecutan en un entorno controlado (CAS, code access security) que no permite leer/escribir ficheros, acceder a internet, etc. pero para poder hacerlo, rebuscando por ahí, encontre aquí la solución, la cual consiste en firmar digitalmente el ensamblado (Project Properties > Signing > Sign) y añadirlo a la caché de ensamblados global (GAC) escribiendo:
"C:\Archivos de programa\Microsoft Visual Studio 8\SDK\v2.0\Bin\gacutil.exe" /i "C:\Archivos de programa\MSN Messenger\NombreDelAddin.AddIn.dll"

Con esto podemos hacer cosas interesantes.

Luego para el deployment, se crea un setup project y se añade la carpeta especial Global Assembly Cache Folder donde pondremos la dll del plugin para que el instalador la coloque correctamente en c:/Windows/assembly y funcione completamente.

Comparte

Compártelo

Pese a que no es la versión definitiva, he colgado en stage6 un vídeo demo de mi proyecto.

Consiste en un sistema de visión por computador, que consta de una webcam normal y corriente, una plantilla con forma de media pista de baloncesto y unas fichas de colores. Una vez se calibra la cámara para obtener una imagen perpendicular de la pista, en la pantalla del ordenador se observa un entorno virtual donde unos muñecos en 3 dimensiones toman posiciones sobre una pista de basket virtual correspondiendo con las posiciones de las fichas de colores sobre la plantilla. De este modo, moviendo las fichas de colores con la mano, conseguimos que los muñecos de la pantalla se muevan por la pista pudiendo así plantear estrategias como si de una pizarra se tratase, o analizar jugadas.

En la versión final, hay muñecos de dos colores para diferenciar ambos equipos, una de las fichas hace de pelota que va dando botes por la pantalla y hay una canasta donde debería estar.

La librería de visión se llama OpenCV, la de gráficos es Irrlicht, está programado en C++ con Visual Studio, la canasta (que en el video no estaba aún) la hice con 3ds Max 9 y las texturas con Photoshop CS3.

Recomiendo verlo a pantalla completa activando el modo HD. Por desgracia no es una versión final.

Actualizado: Al final saqué un 9! Si alguien quiere la memoria del proyecto que me lo diga.

En el siggraph se ha anunciado por fin una versión nueva de Opengl después de que estuviese peligrando su desarrollo. Esta nueva versión tendrá como novedad el fin de estructuras como glBegin/glEnd y se orientará mas al uso de objetos como serán los objetos buffer, shader, texture filter, vertex array, image, format, rasterization, operaciones por-sample, framebuffer entre otras. Mas info aqui

A ver si cuando salga le echo un ojo y de paso vuelvo a meterle mano que lo tengo un poco olvidado!

Powered by ScribeFire.

Compártelo

Pues me encontraba yo haciendo una chorradita con la libreria SDL que va genial para hacer juegos con gráficos en 2D o en 3D si le añadimos OpenGL y quería usar un mando de la play. Tengo un adaptador de Play a USB que se llama Super Dual Box Pro, fabricado por MayFlash con el que lo tengo conectado al PC y que podéis conseguir en cualquier tienda de videojuegos. El caso es que con el último driver para vista (el de agosto del 2007 que por lo visto salió 3 días antes de que me diese por probarlo) no detecta la cruceta y la segunda palanca la mapea como una cosa rara así que para usarlo recomiendo el driver anterior que aunque no pone que soporte vista, a mi no me hace falta (http://www.mayflash.com/Download/Super5%20pro.EXE).

Bueno, usando las funciones de la SDL para obtener información del joystick y con el driver más o menos bien configurado, el perfil del DualShock es el siguiente:

5 Axes (5 ejes aunque las dos setas solo deberían ser 4)
1 Hat (la cruceta)
0 Balls (ni idea)
16 Buttons (16 botones, que con el código que hay al final corresponde con los siguientes valores)

triángulo = 0
O = 1
X = 2
Cuadrado = 3
L2 = 4
R2 = 5
L1 = 6
L2 = 7
Start = 8
Select = 9
L3 = 10
R3 = 11
Pad Arriba = 12
Pad Derecha  = 13
Pad Abajo = 14
Pad Izquierda = 15

Estas correspondencias se pueden cambiar desde la pantalla de configuración del driver.

Código que muestra los botones:

while(!done){     
    while(SDL_PollEvent(&ev)){
        if(ev.type == SDL_JOYBUTTONDOWN){
            cout << (int)ev.jbutton.button << endl;
        }
        if(ev.type == SDL_KEYDOWN){
            done=true;
        }
    }
}           

Technorati Tags: sdl joystick playstation dualshock

Powered by ScribeFire.

Compártelo

Pues si, como era de esperar, también salió la supernoticia de la competición en los periódicos de la zona, el levante de castellón y el ABC de la comunidad valenciana, se ve que no hay noticias más importantes que salir nosotros en la portada jajaja, esto de la robótica triunfa, debería dedicarme a ello en el futuro…. espera… esto ya lo he dicho antes….
Dejo los dos enlaces a los PDFs, ojo que uno tiene dos páginas, y como no, salgo yo en las fotos jajaja, ¿que pasa? ¿Que no había más gente? Si éramos un montón…

ABC de la comunidad valenciana
Levante de Castellón

Compártelo

Este es un montaje de video que he hecho con motivo de las prácticas de robótica de la uni con el robot Robonova-I, el trabajo consistía primero en montar el robot con las piezas del kit y luego programarlo en roboBASIC para que busque la caja de cartón y la derribe. El vídeo son trozos de las pruebas que íbamos haciendo hasta conseguir que tirase la caja en al menos el 90% de las veces.
Al final en la competición contra la caja lo hicimos bien en el modo de frente y de espaldas, en ambos a la primera y sin caer, cosa que otros equipos no hicieron y aun así puntuaron mejor por su cara bonita…
Veremos mañana en la competición de sumo Robot vs. Robot.

Technorati Tags: robotics robonova

Powered by ScribeFire.

Compártelo

(This post is in two languages / Este post está en dos idiomas)

Español

Estos días que he estado trabajando en una aplicación para Google Maps, necesitaba poder cargar un track desde KML con una ruta y waypoints con descripciones y fotos. En mapki encontré un fragmento de código de JavaScript que cargaba solo placemarks pero me sirvió como base para desarrollar mi propio parser cargándolo asíncronamente con AJAX y usando funciones de DOM para obtener los nodos que me interesaban. El resultado es el siguiente…

Descargar: KMLparser.js

English:

These days I was working on an application using Google Maps, I needed to load tracks from KML files which should have a track and some waypoints with descriptions and photos. At mapki I found a fragment of JavaScript code that loads just placemarks but I used it to develop mi own kml parser that loads the file asynchronously with AJAX and uses DOM functions in order to obtain the nodes I needed.
Download: KMLparser.js

Updated: He arreglado el enlace que estaba mal. The link has been fixed.

Compártelo

Este jueves pasó por mi universidad el Microsoft University Tour 2007, en el que nos explicaron las nuevas tecnologías de reciente aparición en la plataforma de desarrollo .NET Framework, entre ellas estaba el nuevo soporte de ASP.NET 2.0 para AJAX (ATLAS como lo llamaban ellos), las librerias XNA para el desarrollo simplificado de juegos, programación de smartphones y PDAs (lo mismo de todos los años pero cambiando la versión de windows mobile) y el nuevo Windows Presentation Foundation (WPF pa’ abreviar) que es la nueva capa de presentación que realmente me ha impresionado. Cabe destacar el uso masivo que van a hacer de XAML, un subconjunto del XML orientado a las aplicaciones, es decir, ahora los windows forms estaran en un archivo xaml y el código en otro, similar a lo que se hacía con ASP.NET.

Ahora todos los componentes pueden ser a la vez contenedores, por lo que podemos tener por ejemplo, una foto del gato lima, dentro de un listbox, que está dentro de un botón, que a su vez forma parte de un video… mismo… y además los componentes son vectoriales por lo que se pueden escalar y rotar sin perder calidad, les puedes poner estilos, hacer un boton pez animado que cambie de color al hacer clic…por ejemplo… y muchas cosillas más, aunque lo que mas me ha molado es que puedes tener cosas en 3d dentro de los forms, como por ejemplo, para pasar de página, sería una página en 3d la que se mueve, o un estuche de cds al que le pones las caratulas, or whatever…aunque respecto a esto, sigo pensando que muy práctico no es, solo es bonito, ya que un pc viejo no lo va a mover y es lo que normalmente hay en sitios donde sólo se manejan datos.

Otro de los puntos fuertes fue la demo de XNA, aunque en versión beta, como concepto no dejaba de ser interesante. Uno tiene unos game components, que no son mas que controles (para variar, aqui todo es arrastrar controles…) y por ejemplo, tienes un game component que maneja terrenos, otro q maneja la camara y otro q hace q algo de vueltas, pues coges y los combinas y tienes un terreno q se ve por la cámara dando vueltas. Yo pienso que algo así puede dar mucho jugo cuando la gente haga sus propios componente y los cuelgue por internet para bajarselos y usarlos, puede estar bien. Además tendrán soporte para XBOX360 lo que significa que muy probablemente las demás consolas se abran y permitan desarrollo Indie (o amateur).

powered by performancing firefox

Compártelo

Hola, hoy he decidido subir el juego de carreras que hicimos Kike, Carlos y yo para la asignatura de informática gráfica 2 para la universidad, el trabajo consistía en hacer un pequeño juego en OpenGL empleando un minimotor ya creado que venia en el libro de OpenGL Game Programming que se llama simpengine y trae lo básico, crear una ventana, clases para los objetos y vectores tridimensionales, soporte para modelos md2, una clase para texturas (bitmaps cargados con GLaux…), luces, animación, cámara,sonido… al que ampliamos un poco para satisfacer nuestras necesidades, por ejemplo, usamos una libreria para cargar todo tipo de archivos de imagen llamada freeimage, también conseguimos un cargador de modelos de 3d studio con el que conseguimos poner un coche que teniamos en 3d, arreglamos unos cuantos bugs que había, por ejemplo el de la cámara, que no se movía correctamente cuando le pediamos que fuese de un punto a otro suavemente, incluimos una skybox y modelamos la uji en 3d, cogimos un plano del suelo montando fragmentos en photoshop (hay un automatismo) que capturamos con screenprint32 de la página de sigpac que es como el Google Maps pero orientado a la agricultura y que tiene mejores fotos de España.
Total, que nos lo curramos mil veces mas de lo que tocaba, ganamos un premio de las jornadas de gráfica de 100€ (que se quedaron en 60€ a repartir entre los 3…), nos puso un 10 en el trabajo y ahora he decidido subir el juego.
Aquí teneis el link

Se abre con UJI Racer.exe y los controles son W,A,S,D. Aun hay bugs pero bueno, quizá algún dia me de por continuar mejorandolo, pero con tanto proyecto en la cabeza probablemente se quede así. Se sale con ESC
Probablemente necesites la libreria de OpenGL si no la tienes, está para descargar en internet y es un archivo .dll que se mete en c:\windows\system32 la pondrá por aquí cuando la encuentre.

Compártelo

Indagando por internet encontré la herramienta definitiva para implementar la aventura gráfica que tenemos pensada desde hace tiempo y cuyo esbozo del guion del primer acto lo podéis encontrar en el wiki.

La herramienta en cuestión se llama Adventure Games Studio (http://www.adventuregamestudio.co.uk/) y es una API para crear aventuras gráficas que ya tiene solucionados la mayoria de problemas que presentan este tipo de juegos, escenarios, item, interacción, dialogos, puzzles, busqueda de caminos, musicas, sprites… y por lo que he comprobado se pueden hacer unas aventuras muy chulas, el problema es el de siempre, los gráficos, no mola hacerlos con gráficos encontrados por internet y lo que mola es tener tus propios gráficos pero.. quién los hace? y que quden bien! :S Dificil dificil…

Compártelo

He encontrado un motorcillo sencillo y aun en desarrollo que renderiza terrenos dinámicos que admiten modificaciones en tiempo real, ciclos de dia/noche, arboles, LOD, shaders, búsqueda de caminos, meteorología y decals entre otras suculentas características y que me ha parecido bastante interesante, la web es Lilith3D y sería un buen sitio para empezar algunos proyectillos simples que tenia en mente con terrenos deformables que a saber cuando los empezaré así que por eso dejo aquí esta referencia, para poder buscarla en un futuro cuando me haga falta.

Compártelo