rui

My Favourite HTML5 APIs

This entry was posted in General on by

Ok, I’m supossed to be an Android developer, but i’m going back to HTML+JS for some projects, and I found that HTML5 has really powerful new APIS, these are my favourite:

  1. WebGL: Is changing the game rules, finally advanced 3D graphics in the browser. As it’s very hard to use directly,  I suggest the Three.js library
  2. Storage: A very simple system so store data in the browser, much more powerful than cookies
  3. Web Workers: Multithreading in Javascript, yes, now it’s possible
  4. WebAudio: a good sound API for the web, continues having some differences between browsers, but promises to be great

And I am already using this APIs in some Mobialia web apps:

App WebGL Storage Web Workers WebAudio
Mobialia Chess 3D X X X  
Slot Racing X X   X
Four in a Row X X    

This apps are developed in Java with Google Web Toolkit (GWT), you can also view  my slides: Migrating apps from Android to HTML5 via GWT. I also want to recommend the P4rgaming site, which has been one of my favorites when it comes down to getting gaming services for my video games. When it comes to playing WoW, you might find it hard to build up a sustainable sum of money. In the past for BFA and Legion i was using sites like 6Kgold and others like G2, now i simply hop off to Gold4Vanilla for all my warcraft gold needs.

Google Chrome Frame

This entry was posted in Computers and tagged chrome html webgl on by

Recently I’m hearing that Internet Explorer 10 (IE) is great, etc. but IE continues lacking some standards like WebGL. I’m working with WebGL in some HTML5 projects like:

and I couldn’t make the IEWebGL plugin work (it requires a different initialization). But Google has a great solution: the Chrome Frame, it’s an Internet Explorer plugin that runs an embedded Chrome, making possible for some advanced web apps to run into IE. Not great enough? It works with IE 6,7, 8 and 9!

Using it in a web page is extremely easy: Adding this header to your web page, IE will use Google Chrome Frame if installed:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

And you can also add this javascript code asking the user to install Chrome Frame if it isn’t available:

<!--[if IE]>
  <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
  </script>

  <div id="prompt">
  </div>

  <script>
    window.attachEvent("onload", function() {
    CFInstall.check({
      mode: "overlay",
      node: "prompt"
    });
  });
  </script>
<![endif]-->

More Google Chrome Frame resources:

DevFest-X BCN 2012

This entry was posted in Computers and tagged android gdg google html webgl on by

For those who don’t follow me in the social networks, I’m now a co-organizator of the GDG Vigo (Google Developers Group), founded by Reinaldo Aguilera. In this group we are organizating a lot of interesting (and free!) Android and HTML5 activities (speechs, codelabs…) near Vigo, Galicia. Join to our Google Group and stay tuned!

This year I also went to the Barcelona DevFest, but as GDG Vigo we tried to help with the organization.

We participated in a Three.js codelab with Ricardo Cabello (Mr.Doob) showing how to make a very simple WebGL game in some simple steps. Slides are available at:

http://www.alonsoruibal.com/slides/codelab_three.js/

and source code is hosted in github: https://github.com/albertoruibal/codelab_three.js/

In another session I also told my experience migrating some Mobialia apps from Android to HTML5 with GWT, those slides are at http://www.alonsoruibal.com/slides/android2gwt/

Thanks Google, GDG Barcelona and GDG Tarrragona for the organization of such great event!

Java vs C# vs Javascript

This entry was posted in Computers and tagged android java javascript mono on by

*** UPDATE: This article had a HUGE mistake in the Javascript part, read below ***

I’m a Java guy but I’m always opened to other programming languages. I heard great things about Mono and the .Net platform, among those things recently I saw a Xamarin article about Android being ported over Mono in a project called XobotOS (http://blog.xamarin.com/2012/05/01/android-in-c-sharp/) and they are getting a much better performance than with Dalvik.

They did it using Sharpen: an automated tool that can convert from Java source code to C#. I was hesitated and started to port my “Carballo” chess engine to C#. Sharpen runs as an eclipse plugin (but outside eclipse). The best tutorial that I found to install sharpen is here: http://www.pauldb.me/post/14916717048/a-guide-to-sharpen-a-great-tool-for-converting-java

The new Carballo Chess Engine with a C# version is now hosted at GitGub (https://github.com/albertoruibal/carballo). You can launch the conversion tool running “ant” on the “csharp/” folder. This C# version hasn’t a graphic interface yet, but is great to make some comparisons…

I use a lot the BT2630 chess test suite, with positions to find the best move, lets see how much time needs my chess engine in Java to find the solution for the first position:

r q . . r . k . 8
. . . . . p p . 7
p . . . . . . . 6
. . . . b N P . 5
. p . . P . . P 4
. . . . . Q . . 3
P P . . . . K . 2
. . . . . R . R 1
a b c d e f g h white move
DEBUG SearchEngine - depth 1 score cp 170 nodes 176 time 42 nps 4093 pv f3b3
DEBUG SearchEngine - depth 2 score cp 136 nodes 1044 time 123 nps 8419 pv f3b3 b8b7
DEBUG SearchEngine - depth 3 score cp 131 nodes 4335 time 358 nps 12075 pv f1f2 b8b6 f3b3
DEBUG SearchEngine - depth 4 score cp 111 nodes 14603 time 854 nps 17079 pv f1f2 b8b6 f3b3 e8e6
DEBUG SearchEngine - depth 5 score cp 115 nodes 27593 time 1311 nps 21031 pv f1f2 b8b7 h1d1 a8d8 f2d2
DEBUG SearchEngine - depth 6 score cp 119 nodes 50536 time 1450 nps 34828 pv f1f2 b8b7 h1d1 a8d8 f2d2 d8d2
DEBUG SearchEngine - depth 7 score cp 117 nodes 110415 time 1693 nps 65180 pv f1f2 b8b7 h1d1 a8c8 f2d2 b7c6 b2b3
DEBUG SearchEngine - depth 8 score cp 110 nodes 314754 time 2515 nps 125100 pv f1f2 b8b7 h1d1 a8d8 f2d2 d8d2 d1d2 b7c6 b2b3
DEBUG SearchEngine - depth 9 score cp 112 nodes 564320 time 3580 nps 157587 pv f1f2 b8b7 h1d1 a8d8 f2d2 d8d2 d1d2 a6a5 b2b3 b7b6
DEBUG SearchEngine - depth 10 score cp 129 nodes 1219488 time 6174 nps 197487 pv f1f2 b8c7 f3b3 c7b7 b3d5 b7d5 e4d5 a8d8 h1d1 e8e6 a2a4
DEBUG SearchEngine - depth 11 score cp 241 nodes 2430413 time 11373 nps 213681 pv f5g7 e8f8 g7f5 a8a7 f5h6 g8g7 f1f2 b8b5 h6f5 g7g8 f3b3 a7d7 h1c1 d7d1

This is 11.373 seconds at 213.681 nodes per second, my java version is “Java(TM) SE Runtime Environment (build 1.6.0_26-b03)”.

And with Mono? let’s see the result on the same machine:

DEBUG SearchEngine - depth 1 score mate 0 nodes 176 time 25 nps 6769 pv f3b3
DEBUG SearchEngine - depth 2 score mate 0 nodes 1044 time 36 nps 28216 pv f3b3 b8b7
DEBUG SearchEngine - depth 3 score mate 0 nodes 4335 time 58 nps 73474 pv f1f2 b8b6 f3b3
DEBUG SearchEngine - depth 4 score mate 0 nodes 14603 time 136 nps 106591 pv f1f2 b8b6 f3b3 e8e6
DEBUG SearchEngine - depth 5 score mate 0 nodes 27593 time 247 nps 111262 pv f1f2 b8b7 h1d1 a8d8 f2d2
DEBUG SearchEngine - depth 6 score mate 0 nodes 50536 time 450 nps 112053 pv f1f2 b8b7 h1d1 a8d8 f2d2 d8d2
DEBUG SearchEngine - depth 7 score mate 0 nodes 110415 time 813 nps 135644 pv f1f2 b8b7 h1d1 a8c8 f2d2 b7c6 b2b3
DEBUG SearchEngine - depth 8 score mate 0 nodes 314754 time 2058 nps 152867 pv f1f2 b8b7 h1d1 a8d8 f2d2 d8d2 d1d2 b7c6 b2b3
DEBUG SearchEngine - depth 9 score mate 0 nodes 564320 time 3693 nps 152766 pv f1f2 b8b7 h1d1 a8d8 f2d2 d8d2 d1d2 a6a5 b2b3 b7b6
DEBUG SearchEngine - depth 10 score mate 0 nodes 1219488 time 7673 nps 158911 pv f1f2 b8c7 f3b3 c7b7 b3d5 b7d5 e4d5 a8d8 h1d1 e8e6 a2a4
DEBUG SearchEngine - depth 11 score mate 0 nodes 2430413 time 15490 nps 156891 pv f5g7 e8f8 g7f5 a8a7 f5h6 g8g7 f1f2 b8b5 h6f5 g7g8 f3b3 a7d7 h1c1 d7d1

That is 15.490 seconds at 156.891 nodes per second with the “Mono JIT compiler version 2.10.8.1 (Debian 2.10.8.1-3)”.

I didn’t found the Sharp and Mono magic, at least in my case Mono is about a 30% slower than Java. This may be as a result of the automated code conversion…

I tested the GWT part in the GWT Developer Mode. In this mode, the code is run in the server as Java (and not in JS). In recent tests I found that the Javascript version is much more slow, probably because of the GWT Javascript Long emulation (Js does not has 64bits integers).

Well and this chess engine also has a GWT version. GWT is another magical Google product that converts your java code to Javascript. Let’s see how fast runs this test on the browser:

[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 1 score cp 170 nodes 176 time 56 nps 3087 pv f3b3 )
[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 2 score cp 136 nodes 1044 time 186 nps 5582 pv f3b3 b8b7 )
[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 3 score cp 131 nodes 4335 time 483 nps 8956 pv f1f2 b8b6 f3b3 )
[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 4 score cp 111 nodes 14603 time 997 nps 14632 pv f1f2 b8b6 f3b3 e8e6 )
[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 5 score cp 115 nodes 27593 time 1123 nps 24548 pv f1f2 b8b7 h1d1 a8d8 f2d2 )
[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 6 score cp 119 nodes 50536 time 1251 nps 40364 pv f1f2 b8b7 h1d1 a8d8 f2d2 d8d2 )
[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 7 score cp 117 nodes 110415 time 1571 nps 70238 pv f1f2 b8b7 h1d1 a8c8 f2d2 b7c6 b2b3 )
[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 8 score cp 110 nodes 314754 time 2648 nps 118819 pv f1f2 b8b7 h1d1 a8d8 f2d2 d8d2 d1d2 b7c6 b2b3 )
[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 9 score cp 112 nodes 564320 time 4063 nps 138858 pv f1f2 b8b7 h1d1 a8d8 f2d2 d8d2 d1d2 a6a5 b2b3 b7b6 )
[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 10 score cp 129 nodes 1219488 time 7474 nps 163142 pv f1f2 b8c7 f3b3 c7b7 b3d5 b7d5 e4d5 a8d8 h1d1 e8e6 a2a4 )
[INFO] [org.vectomatic.libgwtsvgchess] - Main.info(depth 11 score cp 241 nodes 2430413 time 14216 nps 170951 pv f5g7 e8f8 g7f5 a8a7 f5h6 g8g7 f1f2 b8b5 h6f5 g7g8 f3b3 a7d7 h1c1 d7d1 )

I can’t believe my eyes : 14.216 seconds at 170.951 nodes per second with Google Chome Version 19.0.1084.52… and this is also an automated conversion process…

Yes, in my tests Javascript is faster than Sharpened Mono…

MobileCONGalicia 2011

This entry was posted in Computers and tagged android mobialia mobile voip on by

El viernes pasado, y gracias a la iniciativa de María Encinar (@encinar) y Martín Pérez (@mpermar), se llevó a cabo el primer evento para desarrolladores móviles en Galicia: MobileCONGalicia.

Las ponencias fueron de los más variado, tuvimos a:

  • Eugenio Estrada (@eugenioestrada) un crack de Windows Phone nos metió a todos el gusanillo de desarrollar en WP
  • Alberto Gimeno (@gimenete), desarrollador iOS nos habló de posibilidades de monetización de apps
  • Elena Pérez (@ilnuska) experta en interfaces de usuario en @SpartanBits, puso a caldo (con conocimiento de causa) al equipo de diseñadores de Android
  • Ricardo Varela (@phobeo), experimentado desarrollador curtido en 1000 batallas, habló de APIs móviles
  • Martín Pérez (@mpermar), nos habló de Tropo, Phono y otras APIs de telefonía dándonos grandes ideas de oportunidades de negocio
  • Hermes Piqué (@hpique) experimentado desarrollador Android e iOS que nos habló de Unit Testing
  • Jordi Bonet de Softonic explicó como han reinventado su negocio orientándolo hacia las descargas móviles
  • Finalmente, Nacho Sanchez nos contó su experiencia empresarial en @InqBarna desarrollando apps

Algunas de las presentaciones se pueden visualizar aquí

Yo participé con una ponencia sobre Android, y como la entrada al evento eran 25 euros (una ganga por cierto), hice una presentación con mis 25 consejos para los que comienzan a desarrollar; ya sabéis, a euro por consejo:

El evento terminó con un AppCircus del que fuí jurado junto con Miguel Sílva (@MSilvaConstenla de @Blusens, Elena (@Ilnuska) de @SpartanBits y Nacho de @INQBarna. Estas fueron las aplicaciones que se presentaron:

  • PictoDroid: Excelente aplicación Android para permitir a las aplicaciones con problemas de expresión comunicarse mediante pictogramas
  • Mussage: Aplicación IOS que permite enviar mensajes con canciones que están en la biblioteca del receptor
  • Chove: Completo radar de lluvia para españa en Android
  • Extremadura Rural: Guía offline de alojamientos rurales en Extremadura
  • ReallyLateBooking: Aplicación IOS y Android para buscar ofertas de hoteles en el mismo día
  • Binaurality: Método para aprender inglés basado en la escucha binaural para IOS y Android
  • Bits4Meetings: Iniciativa para proporcionar un sistema de creación de aplicaciones para eventos personalizadas (de los creadores de Ipoki!)
  • Berokyo: Aplicación iOS que permite organizar en estanterías documentos, contactos y medios digitales, sincronizándolos con DropBox
  • Obradoiros Abertos: Aplicación que ofrece información geolocalizada de talleres, tiendas y puntos de interés de artesanía gallega.
  • Absolute Defense: un shot’em up de gran calidad al más puro estilo R-Type

El nivel de las aplicaciones presentadas fué muy bueno. La app ganadora fue ReallyLateBooking, y la finalista Berokyo, esperamos haber sido justos. Mención especial me merece la presentación de Juan Porta de la aplicación Chove!, un tremendo showman más puro estilo gallego, que nos hizo pasar un momento estupendo, pena que no nos dejaran valorar la presentación.

Referencias en prensa/blogs:

Por si fuera poco y gracias a Blusens, tuvimos una fiesta del evento en una discoteca Santiaguesa, que se adentró en altas horas de la madrugada… Atención al detalle del gorro de Android de @IronSil, y curioso el efecto de “Ojos Blancos” de la cámara del Galaxy Nexus.

Google DevFest 2011 BCN

This entry was posted in Computers and tagged android chrome google html internet mobialia on by

This week I assisted to the Google DevFest 2011 Barcelona. This year it was celebrated on a great “garage” located on an industrial area of Barcelona. I will tell the more interesting things that I found on the different sessions:

NEW IN HTML

As usual, this session presented by Paul Kinlan showed us the future of HTML5. I love the x-webkit-speech Chrome feature to make voice inputs that we already could see on the Madrid DevFest 2010. Paul made also some demos of WebIntents  a great idea to make something similar to Android intents on the web. Finally we could see that HTML5 is advancing very fast trying to implement many APIS that will make Flash obsolete, like window.navigator.getUserMedia() ot the Web Audio API.

GLSL

This session was presented by Mr. doob aka. Ricardo Cabello, a guy from the demoscene. He made a introduction of how 3D works in the browser and showed us how to use the GLSL language to make great effects on web pages. He has those GLSL demos on his blog.

GOOGLE+ SESSIONS

There were two Google+ sessions driven by Ade Oshineye, one presenting the new social network (also announcing the Google+ Pages) and other with more technical details for developers. One thing that you can do easily is adding the +1 button to your site. Other very interesting tools that we could see were the Google APIs Console and the Google APIs Explorer.

ANDROID SESSIONS

Bruno Oliveira is replacing Reto Meier as our “Android Developer Relations”.  On the first session he made a great review of the Android platform evolution since 2.1 to 4.0. On the second session he gave us great tips to improve UX experience on Android. This guy is a showman!

MAKING A BUSSINESS OUT OF APPS

This session was presented by Paul Kinlan and Bruno Oliveira, showing us that monetization tips are valid for both web and Android apps: Lazy registration, try before you buy, easy payment, in-app payments… Bruno also presented the new multilingual “Guide to the App Galaxy” http://www.guidetotheappgalaxy.com/.

GOOGLE SHOPPING API

Daniel Hermes showed us the Google Shopping API and many integration samples.

CHROME DEV TOOLS

Finally Sam Dutton made a review of the Google Chrome development tools. This tools replaced my FireBug many years ago! He also made his slides available.

APP COMPETITION

This year Google also organized and Appcircus-style app competition. Those were the apps and sites presented:

I won the app competition, but all were great apps. Our presentation and some photos of the app competition are available at our Mobialia Blog.

Developing with Android-X86 2.3 and VirtualBox

This entry was posted in Computers and tagged android emulators virtualization on by

One of the most tedious thing developing for Android is the lack of an efficient emulator. The bundled Android emulator with the SDK is very, very slow due to that it is emulating an ARM architecture over X86 processors.

So I will propose you a solution based on Android-X86. This is a project that ports Android to the X86 architecture and they recently released the 2.3 RC1 version. With VirtualBox you can create a X86 virtual machine and install Android-X86 on it.

First, install VirtualBox and create a virtual machine with the following specs:

  • Operating System: Other
  • 512 MB RAM and 5 GB HD (enough)
  • Bridged Network (easier for the adb connect step)
  • Emulating a Sound Blaster 16 sound card (trying it as recommendation from Android-X86, but at the moment it doesn’t work for me)
Then download the android-x86-2.3-RC1-eeepc.iso image (see links at the bottom).

When you start VirtualBox by first time it will ask you for a boot CD, select the downloaded image. On start it will let you choose between running Android from the CD or install it on hard disk. Select install to hard disk, create a partition on the virtual disk, and install Android on the partition selecting  the “System read write” option.  During the installation process, you can create a virtual SD card (of 2GB maximum), the SD card is necessary for many apps to word.

Then you can now start your Android-X86 system (don’t forget to remove the ISO image). By default it will have the ethernet networking configured, you can check it at Settings->Ethernet configuration.

To start developing with this virtual machine, you need to connect it to your computer via adb. Android-X86 includes by default an adb server listening on port 5555. On the virtual machine get your IP address pressing “ALT-<F1>” and typing netcfg (press “ALT-<F7>” to go back to the graphic screen). Then, on your computer type

adb connect <IP>:5555

Replacing <IP> with your virtual machine IP. Now the emulator is connected with adb to your machine and you can run apps on the emulator pressing play on Eclipse or start a shell in the emulator with adb shell…

The Android X86 virtual machine is much faster than the emulator. Take into account that native apps will not work on Android-X86, but Google-TV is also X86 based, so it seems that the X86 platform will be longer supported on the future.

UPDATE: There is also a HoneyComb image at Android-X86 Google Code page that works on VirtualBox but without network (at the moment it does not support Ethernet) so it is not very usable for development.

Chess for Blusens WebTV

This entry was posted in Computers and tagged chess media center on by

I released a chess app for the Blusens Web:TV device. This chess app is based on my chess engine Carballo and on the GWT interface by Lukas Laag (http://www.vectomatic.org). I changed some parts of the Lukas interface to make it work on this device:

  • Control by keyboard
  • Adapted for remote keys
  • Many speed optimizations on the chess engine loading
  • Removed FEN and movable panels (no mouse on the app)

The app is controlled with the remote keys (UP, DOWN, LEFT, RIGHT and OK). With the MODE key you can change the mode (white vs computer, black vs computer…) and with the BLUE circle the thinking time. FORWARD and BACKWARD keys undo/redo moves and with STOP you can start a new game.

You can also test this interface on the web browser:

All the modified code is on the Carballo Sourceforge SVN, under the folder webtv.

To install the app uncompress the webtvchess.tgz file on the applications/ folder of an USB stick and plug the stick to the WebTV.

Blusens apps developers forum link: http://developers.blusens.com/forum/viewtopic.php?f=15&t=338