Ruben Rincon's Blog

A QML Memory Game Tutorial

rdrincon — Tue, 25 Jan 2011 18:33:47 +0200

For the past months I have been using some small example I created to make QML presentations on the Nokia Developer Days across LTA. It used to be one of my favorite games to kill time some time ago... a Memory game.

I decided to take this small example to a pro version but still with a lot of window to improve (mainly in UI). It uses the power of QML to get cool animations in the transitions... have a look at them.

This is the game description in short

This game consists of a deck with 32 paired cards arranged randomly.
You open a card by clicking or tapping on it, if so, the card will show its content
You can open a second card in the same way
If cards match, then they are removed from the deck
If cards don't match, they cover themselves again
Match or not, the pair counter will go up 1 unit and this is displayed in the top/right
On the top/left you will be able to see the elapsed time

You can check the implementation in detail in the following wiki article:

QML MEMORY GAME TUTORIAL

Hope you enjoy it and improve it as well

Nokia Developer Days Mexico & Colombia 2010

rdrincon — Mon, 13 Dec 2010 04:55:27 +0200

Its been some time since I don't write anything in my blog, there have been a lot of things going on in the past months and I just want to highlight a couple events that happened in Mexico and Colombia.

At the end of this blogpost you will find the presentations of the event.

Nokia Developer Days Mexico

Last Nov 30th we gather together in a very interesting event in Hacienda Los Morales Polanco in mexico City. We were around 120 people and I was amazed of all the excitement about Qt and QML. The event was opened by Communications Manager Manuel Gonzalez and the Mkt manager in Mexico Rebeca Lira who provided developers very interesting numbers about downloads in the Ovi Store Mexico, pointed out the phones with higher amount of downloads (by far 5530 is the big winner up to this moment) and also phones like C3 are gaining moment due to big amount of phones being sold in the market. After that, David Pons, Services Manager of Nokia Mexico demonstrated how Nokia has worked to lower entrance barriers at a minimun (Individual publishers, 1Euro registration, Nokia signing apps). We also have a nice demonstration of N8 amazing capabilities by Manuel Bautista, Activation Manager of Nokia followed by an interesting presentation of the new tools to monetize applications (In App Purchasing, In App Advertisement) by my colleage Rafael Olvera Forum Nokia Business Developer Manager.

Fun started there with the technical topics covered by my colleage Daniel Rocha who kindly flew down here from Silicon Valley and me. Topics covered were Qt, Qt Quick, WRT and Java ME for hybrid S40 devices (Touch and Type).

What I love of these events is the networking that comes after speeches are finished. We stayed there an hour and a half more talking to excited developers who had a lot of ideas and projects, setting meetings or just deliverating about technology. Remember... we are always happy to hear and support new ideas... so let's make that killer app together.

Forgot to mention, but we also had nice prizes at the end, including 2 amazing N8s, 5530 and X3.

Nokia Developer Days Colombia

Fun wasnt over, so we packaged our lugage and took the way down to Colombia, my home country.

It was December the 2nd and Nokia Developer Day Colombia started. The place was fully packed, 240 developer minds all together. Just think about how many lines of code have been written for all those people in that place.

Event was pretty similar, just that we had local presentation from Nokia Colombia. We started with the MKT Manager of Nokia Colombia and Patricia Arteaga Services Manager of Nokia Colombia who brought the Ovi Store message to the developers, Colombian operartor were present as well and couple guest developers who shared their experiences with Nokia. I was trully amazed by the amount of questions asked by developers, mostly technical questions. We actually had to tell people to hold on and ask technical questions during technical sessions in the afternoon or we would finish at midnight.

We had the same presentations about Qt, Qt Quick, WRT and Java. There was no rain of questions... it was entirely a storm. Its great to see how Colombian developers get excited with these kind of events... so more to come!

The really funny part was the raffle of the N8s. We decided to use a row, column approach, meaning. We selected one row of seats in the audience and then in that row a column counting heads from left to right. To select the random number we used random.org that just throws a rundom number in a specified treshold.

Probability of having the same row column twice was close to zero... and it happened with the third try. Row 16, column 4 randomnly happend twice after discarding two tries. Off course we didnt give two phones to this person but raffled it again (in theory that guy won twice with 240 people around).

Presentations:

Ovi Store: Information about Ovi Store opportunity, facts, registration and Nokia signing process.

OviStore.pdf

Ovi Store Publishing Process and tools for monetization: how to upload apps to the Ovi Store, In App Purchasing, In App Advertisement

PublishToOvi.pdf

Qt: Qt General Concepts

Qt.pdf

Qt Quick: New User Interface elaboration paradigm

QtQuick.pdf

WRT and FlashLite 4: Creating apps using Web technologies

WRT&FL4.pdf

Java Touch & Type: Development of java apps for S40 hybrid phones

More Material

If you missed the developer days, you can also have a look at the recorded webinars in spanish with very similar presentations in the following links

Java Touch & Type

http://forumnokia.emea.acrobat.com/p42142246/

Qt Quick

http://forumnokia.emea.acrobat.com/p51462167/

Qt on Symbian Devices:

http://forumnokia.emea.acrobat.com/p31402452/

To be continued 2011...

VideoTutorial Qt en unos minutos: Ep1, Como Localizar Aplicaciones con QTranslator

rdrincon — Sat, 13 Feb 2010 22:46:26 +0200

Hola,

Este será el primero de varios episodios en donde mostraré cómo hacer algunas cosas prácticas e interesantes con Qt. Como ya hay bastante documentación en inglés, decidí hacerlo esta vez en mi idioma nativo .... (Viva el español! )

Hoy les mostraré cómo utilizar las herramientas de localización de Qt, que no tienen nada que ver con ubicación sino que nos permiten "localizar" facilmente cualquier aplicación a otros idiomas.

Vamos a utilizar,
Carbide C++
consola de windows
Qt Linguist
SDK S60 5ed de Nokia

para tener detalles de como instalarl las herramientas, pueden visitar la librería de Forum Nokia en http://library.forum.nokia.com

VIDEOTUTORIAL

Para acceder al videotutorial completo, haz click en el siguiente link:

Como Localizar Aplicaciones con QTranslator

Quisiera hacer un par de aclaraciones que les pueden servir si tienen algún inconveniente:

1. Carbide C++ es una excelente herramienta para desarrollar Qt. Lastimosamente a veces se encuentra una que otra cosa por corregir y yo encontré esta: Cuando uno realiza una interfaz gráfica en Qt, se genera una instancia en el archivo .h referenciando la interfaz gráfica, normalmente llamada ui . En algunas ocaciones CarbideC++ no hace el indexado correctamente, de tal forma que cuando queremos utilizar algún componente de esta instancia ui y presionamos CTRL+Space para tener la lista de atributos y métodos, no vemos nada. Una solución, es cambiar el nombre de esta instancia, por ejemplo renombrar a gui . Después de eso, el indexado se hace correctamente. Recuerda cambiarlo en el archivo .h como en el .cpp.

2. Para que lupdate funcione correctamente dentro del folder de tu proyecto, el path debe estar definido correctamente. Si no lo está, en windows debes ir a las variables de entorno y agregar al path la dirección del folder bin de Qt. Por ejemplo: C:\Qt\4.6.0\bin;

Buena Suerte

:Rubén

J2ME Canvas Qwerty Keyboard For Touch Devices

rdrincon — Wed, 22 Jul 2009 21:15:04 +0300

I have published recently one of the components I was working in some of my free time during the last semester. We can find often developers asking in discussion boards how to enter text in Canvas applications in phones like 5800 or 5530 (Touch phones with no physhical keyboard). One of the workarounds is to use the famous TextBox approach but it is kind of disrupting if we are talking about look and Feel and despite is a very valid approach it's not that user friendly. (hit your canvas textfield component, hit the textbox that popsup and then you have the native keyboard with different colors to the ones you have in your app)

This new component is 100% customizable (size, colors, buttons, all) and it is proved to perform pretty well in 5800 and 5530. The whole souce code has been shared along with a complete example.

To have access to all the information please follow this link:

Canvas Qwerty Keyboard for Touch Devices

The keyboard can be either used in Fullsize or small size mode.

Full size mode

Small size mode

I hope you enjoy it.

:Rubén

Mexico All Mobile For an Entire Day

rdrincon — Thu, 04 Jun 2009 00:01:48 +0300

Last saturday May the 30th I had the pleasure to be part of the MobileCamp Mexico 2009. This is the first of this events related to mobile carried on in the country. There were about 120 developers in the place who enjoyed the time talking about mobile technologies, exchanging experience, gadgets, and even code. The event was carried out in unconference style, meaning that there is not arranged scheduled beforehand but everything is set the exact same day.

How the idea was born:

Everything started a couple months ago when I went to the last Barcamp in Queretaro (two hours driving from Mexico) and I met a well recognized developer community called Tequilla Valley (which is nothing related to alcohol). After I had my own conference about widgets and some networking and relax time we planted the seed of having a barcamp for mobile as the ones taking place in big cities.

About the place:

One of the most interesting things of the event was the place where it was held. Close to downtown in Mexico you can find an arqueological place called Tlatelolco. Beside it there is a center owned by UNAM with wonderful view to the ruins. We had a couple rooms including one big nicknamed that day as the Hall of Justice just as the Superfriends cartoon.

About the sponsors:

The whole event was possible thanks to those companies/organizations that participated by apportting their economical and human resources. We had a total of 12 sponsors from different areas of the Mobile Industry.

We (Forum Nokia) installed a mini experience center (basically a 5800 and N96 connected to two screens) where developers were able to test the handsets and the different services. As a funny note I would like to talk about my best customer ... a kid about 7 years old with his father testing all the NGage games ... I bet he went straight to the Nokia Flagship to get one.

In the same way we had stands from several sponsors like the Mexican operator Iusacel (who additionally provided the coffe & cookies), Dell, Palm and some other companies who helped to spread the voice of the event. I would like to remark this design & Flash company called "Amigo Imaginario" that provided nice tshirts to organizers ... with our twitnames !!! so cool.

About Tequila Valley:

This developer community composed of developers from all around the contry in all the fields (Web, OpenSource, Mobile, etc) has tought all of us a lesson about how to be in community. They organize all kind of small and big events almost every week even in some coffe house to talk about technology, share code or in someones appartment just to code together and make good use of other people knowledge. I have also seen other countries trying to adopt the same idea of community ... congratullations to these guys.

About the Conferences:

Being an open event there was a variety of conferences that cover developer platforms in different brands like Nokia, BB, Iphone and also different platforms like SMS & Bluetooth.

What corresponds to me, I had a very active participation with three different conferences along the day:

I presented to the dev community how Nokia is encouraging developers to create relevant local content with strategies like CallingAllInnovators, the Open Screen Funding Project and how to market them through relevant channels like the OVI Store. The fact of having mexican people in the final round of the two most important Forum Nokia contest in the last year is also very encouraging and brought lot of attention.

Then We had a small conference/demonstration session about how to create a widget in only 15 mins using the S60 Aptana Plugin. Not to my surprise, the developers attending were very receptive and showed a lot of expertise on the area asking very good and deep questions.

To finalize my conferences, we had one more conference/demonstration bringing on the topic of the Qt developer platform. This was so far one of the topics that brought most of the attention, I had different people gently inviting me to talk in several events about it and even some people from education centers telling me that wanted to put Qt as part of their education programs. Developers see a big potencial and future with this technology and so do I... and I was even able to show them in 15 minutes how to create a native Qt app using the QT Designer and send it to the phone for on device demonstration.

Among the other conferences we had people talking about advertising using bluetooth push technology and all the implications to bear in mind, ideas for creating a public SMS network, comments regarding Web 2.0 in mobile phones, how to create FlashLite applications using Adobe Creative Studio (I really liked that animation of a cat made with flash moving his eyes up and down), Mozilla presenting their Mobile Web Browser Fennec in a Nokia N800 tablet and off course, some conferences about creating apps for BB and Iphone.

Closing the event:

that was one of the most entusiastic moments of the day since there were a lot of gifts from the sponsors. Among that there were caps, USB, a lot of T-shirts and 3 handsets (2 of them Nokia E71). We decided to make the raffle in a geeky way using random.org ... believe me, it was a lot of fun.

The event was concluded and placing the foothold in this sort of mobile related events in México. Looking forward to have the second version of it.

Widget Example: Using google calendar and S60 Platform Services

rdrincon — Wed, 04 Feb 2009 01:32:46 +0200

This is a simple and basic example widget that uses google calendar and the platform services of the S60 5ed.

It shows how to access the google calendar javascript API to retrieve information of a public calendar. In this case a test calendar I created but you can changed for your own.

The widget is composed by two basic screens, each screen represented by a <div> tag within the .html file.

The First screen will show a list of events ordered by date. The name of the event and the date will be displayed in each entry.

The second screen will show the details of a picked event. It also contains an options menu with two actions, the first one allows to store the event in the default phone calendar, the second one allows to return to the event list.

The Javascript Calendar Service API is used to store the event in the phone.

Two important notes:

1. The application does not check if the calendar already has a specific entry, so if you add it twice you will see it twice on the phone.

2. Since the WebKit is not yet supported by the google Calendar API, you will see a message asking you to use it at your own risk... well, you'd better take the risk, works just fine.

Here... a couple sceenshots and the link download the example.

Download Google Calendar Widget example

Let me know your comments.

VideoTutorial: creando un Widget con Aptana Studio y el WRT S60 plugin

rdrincon — Sat, 20 Dec 2008 18:20:16 +0200

Una gran noticia para los desarrolladores de widgets. Nokia ha hecho el primer release de un plugin para Aptana Studio. Con este plugin se pueden elaborar widgets de una forma muy rápida. Como en algún lugar escuché: si una imagen vale mil palabras, un video vale un millón; por eso, aquí les dejo un videotutorial en donde se realiza un ejemplo completo de un Widget que utiliza el Google Language Ajax API para que vean lo fácil que es hacer un widget.

Pueden ver el videotutorial en el siguiente link: VIDEOTUTORIAL: WIDGET TRADUCTOR

En este link pueden descargar Aptana Studio:
http://aptana.com/

En este link encontrarán el WRT S60 plugin para Aptana:
http://aptana.com/nokia

En este link pueden descargar el ejemplo completo: Traductor

Nota:

Hay otro detalle del cual no hablo en el videotutorial pero con el que algunos pueden tener problemas:

Cuando se va a efectuar la transición en una pantalla que no ha tenido ningún cambio, algunas veces la pantalla no se refresca hasta que movemos el cursor sobre ella. Este inconveniente se resuelve utilizando la siguiente línea:

setTimeout('widget.performTransition();', 0);

en lugar de utilizar sólamente:

widget.performTransition();

Las tecnologías Web se toman los dispositivos móviles!

rdrincon — Mon, 24 Nov 2008 02:55:37 +0200

Las tecnologías convencionales para el desarrollo de aplicaciones móviles como J2ME, C++ y python son lenguajes de programación orientado a objetos y pensados desde un principio para programadores. Que pasa con aquellos que en el boom de las tecnologías Web aprendieron a utilizar Html, Flash, JavaScript y decidieron convertirse en desarrolladores web? entre ellos, miles de diseñadores gráficos que pasaron del papel al computador. Bueno, ellos también tienen su oportunidad de incursionar en el mundo de las aplicaciones móviles sin necesidad de aprender una nueva tecnología.

La primera tecnología de la que hablaremos es Flash que siempre ha sobresalido por la simplicidad con la que podemos elaborar estupendas animaciones e interfaces de usuario. Existen dos aproximaciones para desarrollar contenido, la primera es haciendo mover elementos por el documento en una escala de tiempo y la segunda opción, que es más avanzada, es utilizar ActionScript, un lenguaje muy parecido a JavaScript.

Para los desarrolladores de esta plataforma, existe una extensión para dispositivos móviles llamada Flash Lite. Esta tecnología es un subconjunto de su contraparte web y agrega algunos elementos específicos para los dispositivos móviles como el uso de menús en los softkeys. Flash Lite ha evolucionado en diferentes versiones, en la primera versión (v1.1) hay soporte a elementos básicos multimedia y ActionScript 1.0; en FlashLite 2.x se incorpora ActionScript 2.0 y elementos avanzados multimedia como conexión remota utilizando sockets y en la versión 3.0 se agregan entre otras cosas el soporte a streaming multimedia. No podemos negar que ha existido fragmentación en cuanto a las versiones pero lo cierto es que el número de dispositivos que la soportan crecen de forma exponencial y se mantiene la compatibilidad hacia atrás. Flash Lite es una muy buena opción para realizar aplicaciones sencillas que requieran de una interfaz gráfica avanzada como protectores de pantalla, juegos sencillos, animaciones y publicidad. Otra gran ventaja a favor de FlashLite son las potentes herramientas de desarrollo suministradas por Adobe. El Adobe Flash Creative Studio contiene un componente llamado Adobe Devide Central que permite la simulación de aplicaciones en todas las versiones de FlashLite y para diferentes resoluciones de pantalla.

Conoce más sobre FlashLite siguiendo este link: Flash Lite

Continuando con tecnologías web, hemos visto como han evolucionado en la última década y hoy ya utilizamos el concepto Web 2.0 que es en resumen y sin entrar en detalles una web interactiva en donde las páginas dejaron de ser estáticas y se reemplazaron por páginas dinámicas mediante un uso extensivo de lenguajes de tipo script como javaScript, aparecieron nuevos estándares de intercambio de información basados en XML como RSS, ATOM, se acogieron tecnologías como CSS permitiendo estructurar y organizar la presentación de páginas web y se establecieron técnicas de programación como Ajax permitiendo obtener datos de un servidor sin interrumpir la visualización ni el comportamiento de una página.

La siguiente imagen es un mapa mental de Web 2.0 en donde se ven claramente los elementos quel la conforman. (tomado de wikipedia)

La gran noticia para los desarrolladores web y diseñadores es que pueden utilizar todas estas tecnologías para hacer aplicaciones que corran en dispositivos celulares y además utilizar algunas características específicas de los teléfonos e integrarlas con ellas. Estos conceptos se centran en una sóla palabra “widget”. Este es un término que nació para aplicaciones de escritorio y que permiten acceder de forma rápida y directa a funciones que requieren interacción con la web. El mismo concepto se aplica a los Widgets en los dispositivos móviles. Son aplicaciones que viven en el dispositivo (aparecen en el menú de aplicaciones) se ejecutan en el teléfono y tienen la capacidad de conectarse a Internet para realizar actualización de contenido, consultas, entre otras cosas.

La razón de ser de los widgets es generar una gran experiencia de usuario, permitiendo crear llamativas interfaces de usuario ajustadas a la pantalla del dispositivo, minimizando el flujo de datos por la red ya que todo el control y flujo de pantallas existe en el dispositivo y permitiendo la incorporación de un menú de opciones como lo vemos en la siguiente gráfica.

Un widget se compone de un archivo HTML muy sencillo que se utiliza sólo como punto de partida, es decir como primera pantalla. Las siguientes pantallas se arman utilizando JavaScript y hojas de estilo (archivos CSS) siguiendo el Document Object Model, la lógica de toda la aplicación la proporciona JavaScript. Adicionalmente a los objetos soportados por JavaScript existen algunos elementos específicos al teléfono que permiten la creación de menús y acciones ligados a los softkeys. Otra característica importante es el soporte a Ajax a través del objeto XMLHttpRequest que permite hacer consultas de datos por Internet de forma asíncrona sin interrumpir o bloquear la funcionalidad de la aplicación.

Existen actualmente dos versiones de Widgets, la primera (1.0) es soportada por los teléfonos S60 3ed Feature Pack 2 (como el N78) y algunos de Feature Pack 1 en las versiones de software más reciente (como N95 y E71). En esta versión se puede tener acceso a información básica del sistema como nivel de carga de batería y disponibilidad e intensidad de señal. La versión WRT 1.1 soportada en los teléfonos Nokia S60 5ed (como el 5800 Xpress Music y que veremos en Latinoamérica hasta el próximo año) incluye un conjunto de librerías denominadas Service API que permiten una integración mucho más fuerte con el dispositivo tal como un application manager, acceso a calendario, lista de contactos, datos del GPS y Mensajería.

Muchos se preguntarán que tanta es la portabilidad de los Nokia WRT Widgets con respecto a otros fabricantes o dispositivos. El motor de los Nokia widgets es el Webkit, un framewok para aplicaciones utilizado también por el navegador Web de los S60, Safari, Google Chrome y además otros fabricantes como Motorola en algunas de sus plataformas. Los elementos generales como Interfaz de Usuario, conectividad y lógica de la aplicación son 100% reutilizables, sin embargo, los elementos que hagan referencia a capacidades específicas del dispositivo como el Service API deberán ser portados de acuerdo a las especificaciones de cada fabricante u plataforma.

Conoce más sobre widgets en el siguiente link: Widgets

También les recomiendo este webinar en Español: Webinar Widgets

En conclusión, las tecnologías Web tienen un gran futuro en el marco de aplicaciones móviles, además cada vez se integran más con las capacidades específicas del teléfono, son altamente portables y tienen un Time To Marquet mínimo comparado con las tecnologías de programación convencionales.