Trabajo como desarrollador Web/Móvil en SonicoMusica.com una web creada en Perú para brindar a los usuarios una gran experiencia escuchando la mejor y más variada música online. He tenido el placer de desarrollar la versión de la web para Nokia.
SonicoMusica.com móvil es una aplicación Streaming, por lo tanto, para poder escuchar música requieres de una conexión a Internet, a mayor velocidad de conexión, mejor tiempo de respuesta.
En la aplicación vas a poder encontrar Top Artistas, Álbumes, Géneros para todos los gustos y las últimas canciones. Vas a poder crear gratis tu Playlist con más de 100 mil temas disponibles y escuchar miles de canciones y artistas más sonados de manera totalmente gratuita.
La aplicación ha sido desarrollada con Qt/QML y está hecha para el teléfono Nokia N8 y funciona correctamente en Symbian^3 Anna y Symbian Belle, en esta última versión es donde la experiencia es mucho mejor. A inicios de Febrero es cuando llega la actualización a Symbian Belle a nivel global. Esperemos que la actualización llegue cuanto antes.
¿Por qué para el Nokia N8? Bueno, siempre es bueno revisar las estadísticas y también hay que resaltar que casi todo nuestro tráfico viene de América Latina, principalmente de países como México, Argentina, Colombia, Perú y Chile y es en estos países donde Nokia tiene una fuerte presencia. El Nokia N8 es un muy buen smartphone y cuenta con una cámara impresionante.
La aplicación también está disponible en inglés, así que si tu teléfono está configurando en English, no problem, automáticamente el contenido se cargará en inglés.
Actualmente, estamos trabajando en la versión de SonicoMusica.com para Android y adaptando la app para el teléfono Nokia N9. Para mayores detalles, demos y actualizaciones, por favor ingresa aquí.
Veamos brevemente las características de la aplicación y algunos screenshots tomados desde el ambiente de desarrollo, pronto tendremos un video de la aplicación funcionando a su disposición.
Nokia quiere hacer más fácil la vida de los desarrolladores de software para móviles al lanzar Nokia Qt SDK, un completo set de herramientas y APIs que permiten crear, desarrollar, testear y empaquetar aplicaciones móviles de última generación, de alto rendimiento, con características avanzadas y con interfaces de usuario modernas para la nueva generación de smartphones. El Nokia Qt SDK es multiplataforma por lo cual podemos instalarlo en Linux, Windows (Versión Mac en beta) y está enfocado en
It has been a long time without posting, but well GSoC finished and it’s time to share with the community the result of the project.
First, I want to thank you my mentors Thomas McGuire and Stephen Kelly for the support, the knowledge shared and of course coding tips. I really learned a lot from them and one important thing: How the Open Source development works.
The MessageViewer
Well, inside kdepim there is a library called MessageViewer which job is to provide a widget that can show a message. The first goal of the project was to port the MessageViewer to the Grantlee template system for both reasons: First, to have a clean, readable and more maintainable code and second to have a solid theming system to show/get those cool themes users and some developers like.
The MessageViewer had two classes HeaderStyle and HeaderStrategy that had the job to show and manage the header data. The header style is the class that generates those fancy, brief, enterprise… styles you see in kmail and the header strategy is the class that decides which data to show/hide.
When I started the GSoC project, both, the styles and the strategies were hardcoded each one and the styles had a mix of QT + HTML code. So these classes were removed and a new one ( HeaderTheme ) was created to combine that style/strategy functionality: So Actually HeaderTheme is a combination of those two classes, but with the static HTML removed, the code cleaned up and the Grantlee integration.
In general, the HeaderTheme class is the responsible to setup and make the connection to Grantlee so it can set/show the themes. So now we have “themes” instead of “styles”.
Themes
Let’s stop for a moment and see some screenshots.
Fancy ThemeAir ThemeQt ThemeNokia Theme
I created these themes just to show the theming capabilities. Of course, we can have some by default in Kmail like the fancy one for example. So a “Themes” menu replaced the old one “Styles”.
The default themes folder is inside the MessageViewer and has the following structure. Similar to wallpapers or themes from other KDE projects.
A theme consists of a folder with: An images directory (If the theme has images), a default.desktop file with the metadata information and the default.html that has the styles and the data variables need to be shown.
MessageViewer Themes Structure
Note that the themes menu is created with the themes subdirectories that are in all the KDE data directories like kde, .kde and .kde4.
The ObjectTreeParser
The ObjectTreeParser is the class inside the MessageViewer that parses messages and generates the HTML code for the Viewer. The ObjectTreeParser is a very very complex class. Actually, this was my face the first time I looked at it:
But anyway, after some work, the ObjectTreeParser was partially ported to Grantlee. Partially, because there are some parts on it that generates HTML dynamically, so the static parts were ported to Grantlee and now that static part is divided in small pieces of HTML to identify them faster. There are no theming possibilities here, this port was to improve the code readability and make the maintenance tasks easier.
Inside the MessageViewer there is a htmlOTP folder with the HTML files that has the ObjectTreeParser data of static information:
Akregator
The Akregator ported to Grantlee was really similar to the MessageViewer with the difference that Akregator has the concepts of views ( Normal, combined and widescreen). In Akregator the situation was the same, Those views were hardcoded with identical Qt + HTML + CSS.
So, that presentation stuff was extracted to themes, and a new method renderTheme() was created in the ArticleFormatter to setup up the Grantlee magic and call the themes. Now, no matter which view is chosen, the same theme will be always called and looks the same in the three different views while you still not choose another theme.
We had the problem that Akregator, as based on KHTML, doesn’t allow you to load images from the hard disk, no relative neither absolute paths work, my mentors told me it has to be with the KHTML internals for security. ( The MessageViewer is based on WebKit. ) A web URL works, but I think this doesn’t solve our problem. So no images atm in Akregator themes. The logos and some backgrounds I created could not be shown. Just enjoy the theming.
But we really need to fix this. Maybe a KHTML hacker can provide some help. Some Akregator themes screenshots:
GHNS
No much to say here. Get Hot New Stuff was integrated in the MessageViewer and now you can start downloading themes from kde-look, our themes provider. There is just one theme to download for Kmail atm. Thanks to Frank Karlitschek from OpenDesktop.org for creating the Kmail and Akregator categories. Actually, we had a discussion to instead of having applications themes have a Kontact Theme. I think a Kontact theme could be hard to maintain, because it will be full of conditionals about the different kdepim applications based on Grantlee.
IMO, it would be better to have applications themes and share duplicated code with the Grantlee inheritance feature that is just a: {% include “your_code_to_share.html” %}. Maybe we can have a central place with the code similar in all themes for all applications. It will give us more flexibility because although the styles could be similar, the data and the applications views are not always the same. Trust me, I tried the fancy theme in both Kmail and Akregator and it looks a little bit deformed in Akregator for the views it has. But this is debatable of course, I would like to here your feedback here.
In my next post for users, I will talk about how to write a Kmail/Akregator theme, the variables you need, the styling, Grantlee cool features, etc.
GHNS in Kmail
Lessons learned from GSoC
1._ Stephen was really helpful and always gave me good comments in my Qt/KDE code and even sent me a couple of patches to improve my work and the same with Thomas, as the ex Kmail maintainer for a couple of years, usually gave me good and detailed explanations of how the code works inside Kmail and the MessageViewer. I learned from them that you just simple need to commit more often to get feedback faster about your code. I usually had the habit of waiting to complete some stuff or couple of tasks and then commit. As they told me: Even one line change that solves a minor issue count. So go ahead and commit that little change or improvement.
2._ Practice, practice and practice more C++/Qt/KDE code. The more you practice this stuff, the more you understand the code written in KDE. Also, have a copy of the KDE API in case you lose your internet connection and need to work offline.
3._ I remember on the first days of the project that I got an Akonadi problem that prevented me to start Kmail correctly. I was searching the problem in Google, I followed the Akonadi TroubleShooting page, kde forums and had no luck. Then on IRC Leo Franchi (lfranchi) told me about a couple of more “rm commands” inside my kde-devel home directory, stop/start Akonadi and the problem was gone( Thanks Leo).
To be honest, I usually try to solve problems myself, but I realized sometimes this is not the way to go. So whenever you have a problem like this don’t made this stupid mistake and ask the KDE community about it, you can save a lot of time.
4._ Related to point 3. It was really funny how a simple thing to add as an “Action List” to the menu took me some time. My KXMLGUIClient code was ok and I found the API documentation really clear. I was really frustrated about my code not doing what I wanted to do, so I entered on #kde-devel and David Faure (dfaure) came to the rescue. Really thanks David for the KXMLGUIClient explanation. My themes action list code really needed to be in the MessageViewer, however this stuff had to be called in the Kmail side after createGUI(). So a Kmail->MessageViewer connection was made to make this action list working.
Don’t underestimate my knowledge, go and code the Kmail/MessageViewer stuff and you’ll see the complex thing. Really complicated for an initial KDE developer.
5._ Usually Stephen and Thomas asked me for my kdebug() outputs and sometimes the information I showed them wasn’t enough to debug a problem. Why? Maybe, because you don’t have the right debug information enabled :). So beginner KDE developers, please run kdebugdialog, enable the information you need and make your mentors/KDE Developers happy.
6._ And finally GSoC was a real learning experience that motivates me to do more KDE work. Specially code and promo. So stay tuned.
Next steps
Fixed the current code minor issues to merge the kmail/MessageViewer/Akregator code to trunk. I really want all this theming stuff to be part of KDE SC 4.6.
As I told my mentors in our last GSoC meeting, I will stay on KDE to get more programming knowledge and to know better the community. My goal in short-medium term is to maintain all the theming code in kdepim and help on porting more KDE applications to Grantlee (If they need the port of course). I think with the experience gained and more practice I can do it.
Give more talks about KDE (I already gave two), more involvement with the community and continue spreading the work about KDE in South America and specially in Peru.
In unrelated KDE notes, After some months I returned to enjoy my other passion: Tae Kwon Do. I will have real challenges in the next days and need to prepare well to get my Green Belt. This belt means “Power begins to develop” and the color green represents growth. The same color as the Qt one and exactly how I feel now on my KDE development experiences, just a coincidence.
So wish me luck guys and I promise you some pictures of my Green Belt next to the Qt logo .
Then my KDE work will be usually at nights.
Thanks to the KDE community, the KDE GSoC admin team, my mentors and Google for the opportunity to work in an Open Source Project I love.
Well, coding officially starts on May 24, now is time supposed to read documentation, know your mentor(s) and discuss the project ideas, needs, requirements, difficulties, etc. but as many other GSoCers I couldn’t resist to code something.
My goal for the last week was to write a very simple Qt application showing the power of Grantlee. The idea was to simulate that I am reading a message in Kmail and I want to change the theme again and again.
You can take a look at the code in the soc-pim branch or:
svn co svn://anonsvn.kde.org/home/kde/branches/work/soc-pim/kdepim/examples/mail_grantlee/
Of course, you need to install Grantlee, before compiling the example:
git clone git://gitorious.org/grantlee/grantlee.git
cd grantlee
git checkout -b 0.1 origin/0.1
mkdir build && cd build
cmake ..
make && make install
Here some Kmail themes. I’m not an artist, so don’t expect too much, but I know some CSS and started creating the themes just for the example.
KDE theme for KmailopenSUSE theme for KmailNokia theme for KmailKonsole theme for Kmail
Don’t worry. Surely in the future there will be themes for everyone.
BTW, before continue, what is Grantlee?.
I talked about it in my GSoC proposal and Stephen has written a lot in his blog, but in case you haven’t read, here we go:
Grantlee is a Qt string template engine based on the Django template system. Django is a powerful Python framework that makes it easier to create web apps.
In general, what Grantlee does is that it allows an application separate logic from presentation. There are many benefits of doing this: Flexibility, clean code style (readability), consistency and beauty.
Developers concentrate on the technical aspects of the application (logic, performance,…) and artists work on the templates (HTML, CSS) and they both don’t need to touch each other’s code.
This separation allows the application to be built and tested independent of the visual presentation.
So, What would be the role of Grantlee in KDEPIM?
Let us see what is the job for the moment.
The MessageViewer is the library responsible for the header styling in some KDE PIM applications. If you browse the headerStyle class code, will see that there is HTML stuff everywhere. That makes hard, for both developer and artist, to change the way information is displayed.
That problem should be solved by integrating Grantlee with the MessageViewer and my task for now is to extract the presentation stuff, set up the Grantlee code and load the templates.
Of course the job is not only to load templates, I have in my mind all what can we achieve with this integration and believe me there is a lot to do. Grantlee has many cool features for theming, the API documentation is good and I will continue studying the capabilities during this community bounding period.
Well, it is very difficult to blog about all the Grantlee features in a post, but in case you are interested, you can have a quick overview of it here:
Of course, I will be posting my grantlee adventures with KDEPIM week by week.
For example, this week I found a useful feature:
The ‘safe filter’. Imagine a mail message come with HTML content or special characters. We should render that message correctly in the template otherwise the content will look horrible.
The safe filter autoescapes a variable in case it has already been escaped. Just do:
{{ message|safe }}
That means, if a message comes with "Kmail & CO" ,that content will be rendered :
“Kmail & Co”
Filters affect the way variables are shown in a template. Grantlee comes with some default filters similar to Django like:
{{ variable|upper }} or {{ variable|cut:”something ” }} to cut a string from the variable. There are more filters and you can also create your own ones.
For the developer side, the fun thing is that you don’t need to rebuild your application if there is a change in the template.
For artists, the template syntax is really clear, very human readable.
I already started hacking a little on the headerStyle, but still I have nothing concrete so far to show you in a real world application. This is just the beginning. Althought, the MessageViewer code is huge, Thomas has given me good entry points to understand how it works.
The end result will be a MessageViewer without any presentation code and connected to a theme location.
The current default header styles are these: Brief, Plain, Fancy, Enterprise and Mobile.
Please, if you are a KDE PIM user and want a change or feature on those styles, just tell me what to take into consideration before creating them. One feature we will provide is a user option to decide which header fields are displayed.
The second part of the GSoC project consists of GHNS integration in PIM applications that will use Grantlee, that way users can create and share their art-work. In the next weeks, we will be defining a standard package structure for those themes.
I consider theming an important part of the PIM module. On one side, users usually like to have their collection of beautiful themes, and on the other hand, it is also important for companies or educational institutions to show/export/print their identity (colors, logos, slogans).
In general, I’m happy understanding better and better how the project has to be carried on and my continuous Qt/KDE learning. If you have some feedback to provide, it will be well received.
I find the KDE community very friendly, that makes development, communication and the GSoC experience more enjoyable.
Hopefully, mymentors have passed the first week evaluation. I am really glad they are doing a great job and I am willing to help them with everything I can during the project.
Just kidding, they completely rock, their support and answers have helped me lot.
As I told before, I picked up a game from playground and after some KDE vacations I finally had the opportunity to hack on the game once again.
I rename it and today I released KPeg 0.2. I am following this version number because I think it is not completely ready to be 1.0 as the former developer specified.
KPeg is an implementation of the Peg Solitaire Game.
Peg Solitaire is a board game that consists of jumping over pieces (pegs) in order to remove them from the board. The goal is to remove all pegs but one in the shortest time possible.
KPeg has 5 leves of difficulty and 3 algorithms to generate the puzzles (Original, branch and lines), these affect how the pegs are distributed on the board.
Currently, I am working on the algorithms for English and European Peg Solitaire boards and in the next weeks the challenge will be to create an animated peg solitaire solution.
Please, test the game (and your brain) and send me all your comments and feedback.
Remember that game development is fun and I will continue developing KPeg just for fun and to learn more about Qt/KDE.
On Saturday, April 24 in all LatinAmerica will be held the world greatest Installfest of Free and Open Source Software called FLISOL (Festival Latinoamericano de Software Libre).
I am going to give a talk on how to develop applications with Qt and will share my first experiences of KDE development.
The event will take place in the “Universidad Católica de Santa María” starting at 9:00am.
So, you are all invited to join the fun with the Linux geeks from Arequipa.
For more details, you can check the website of my friends from the Arequipa Linux User Group (AQPGLUG).
LinuxWeek is a well-known event here in Lima/Peru organized by the PUCP (Pontificia Universidad Católica del Perú). The event consists of one week talks about Free and Open Source Sofware, Linux (Well GNU/Linux) and tendencies/new projects in the FOSS world.
I gave a talk that was divided in three parts: An introduction to KDE Community, the power of Qt and an overview of the KDE Games along with the new interesting Game project called Gluon.
You can see all the program here. There are slides and videos available. It was a pleasure to be there and talk about the coolest community and software project in the world :)
Update:
I uploaded the slides to my Slideshare account. Various points in this talk are still valid today:
Este es un tutorial sencillo donde intento mostrar el funcionamiento de algunas clases de Qt, haciendo un pequeño programa de Cálculo Mental.
Me acuerdo cuando estaba en primaria y mi gran amigo Omar escribió un programa muy simple de cálculo mental pero muy adictivo. Creo que lo hizo en Visual Basic, bueno ahora Omar es usuario de Linux.
El programa, te mostraba un menú donde elegías una operación a realizar (suma, resta, multiplicación, división), después de tu elección se mostraban 50 operaciones a realizar de acuerdo a la que elegiste y el punto estaba en cuanto tiempo te demorabas en hacer esas operaciones.
Te mostraba las respuestas correctas, incorrectas, el tiempo, promedio de operación por segundo y guardaba estadísticas de los nombres con mejores tiempos.
Trabajar con cadenas de caracteres (Strings), es algo que se realiza a menudo en la programación informática.
Qt nos proporciona la clase QString que nos va a permitir crear cadenas de tipo Unicode.
Unicode es un estándar internacional que actualmente usan la mayoría de sistemas de escritura y funciona básicamente asignando un código binario a cada caracter.
Lo que permite Unicode es que los usuarios puedan visualizar la información de los programas sin ningún problema, independientemente del idioma y de la plataforma sobre la cual está construido el software.
La clase QString permite manipular la información de estas cadenas tipo Unicode y además convertirlas a otros tipos de datos.
Cuando se crea una cadena en realidad lo que está pasando es que Qt almacena una cadena compuesta por un conjunto de QChars (caracteres) de 16 bits. Veremos la clase QChar más adelante.
Vamos a revisar paso a paso los métodos más importantes de QString.
Una introducción a QGraphicsView, ampliamente usado en aplicaciones Qt.
QGraphicsView es el framework dentro de Qt que permite la creación e interacción de elementos gráficos 2D y que usa el método de programación modelo/vista.
De manera simple, varias vistas pueden observar una misma escena y una escena puede contener elementos (items) de diferentes formas geométricas.
El framework está compuesto de 3 elementos:
QGraphicsScene (La Escena):
Representa una escena con items. Es la clase que se encarga de almacenar los widgets, así como manejar propagar eventos a cada item.
Además esta clase se encarga de manejar los estados de un item. Un objeto QGraphicsScene es muy flexible como para incluir cualquier número de objetos QGraphicsItem.
QGraphicsView (La Vista):
La clase que se encarga de proporcionar los widgets que visualizan el contenido de una escena.
La vista recibe eventos de entrada del teclado/mouse, y los traslada a la escena.
QGraphicsItem (El Item):
Representa un grupo de items. Es una clase para el manejo de items gráficos en la escena y proporciona varios items estándar para formas típicas como rectángulos, elipses y textos. También soporta eventos del mouse como mover, soltar, presionar, doble click, sobre y eventos del teclado.
QGraphicsItem, además soporta dos características importantes en elementos gráficos: Drag and Drop (Soltar y arrastrar) y collision detection.
Cada objeto QGraphicsItem en la escena soporta rotación, zooming, traslado y el poder cortarlo.
Hagamos un ejemplo sencillo de como crear un escena, un item y como visualizarlos:
// Incluimos las clases de la escena, vista y el tipo de item
#include <QtGui/QApplication>
#include <QGraphicsRectItem>
#include <QGraphicsScene>
#include <QGraphicsView>
int main( int argc, char **argv )
{
QApplication app(argc, argv);
// Iniciamos la escena y definimos su tamaño
QGraphicsScene scene;
scene.setSceneRect(-100, -100, 200, 200);
// Color y estilo
scene.setForegroundBrush(QBrush(Qt::lightGray, Qt::CrossPattern));
// Creamos y agregamos nuestro item (rectángulo) a la escena
QGraphicsRectItem *item = new QGraphicsRectItem( 0, &scene );
// izquierda, arriba, ancho y alto
item->setRect(-60, -30, 140, 60);
// Línea: Ancho y estilo
item->setPen(QPen(Qt::blue,4,Qt::SolidLine));
// Relleno: Color y estilo.
item->setBrush(QBrush(Qt::green,Qt::SolidPattern));
// Creamos una vista para visualizar la escena
QGraphicsView view( &scene );
view.setRenderHints( QPainter::Antialiasing );
view.show();
return app.exec();
}
Y el resultado:
Gracias por tu visita al blog. Puedes seguirme en Twitter haciendo click en el siguiente enlace: Follow @ronnyml
Code & Bike 
