Permalink

There is an article about Ushahidi on the ACM-Website. Ushahidi is a remarkable system that was originally used for election monitoring in Kenya.

The system is used to collect, evaluate, visualize and map reports or eyewitness accounts. The central element is a web server. There are mobile apps for different devices, but information can also be gathered via SMS. The system is now being used in disaster relief, as well as “community” projects (in terms of regional communities). More information is available in the Ushahidi wiki and in this presentation by Heather Leson.

Permalink

Rotating Billboard with CSS-Animations

Billboard with changing picturesIn 1998, I have presented “Meier’s billboard”. It is a virtual display panel with changing images. I have developed it as Java-applet. In 2009, I have rewritten the billboard with JavaScript and jQuery.

Today we can define simple animations in CSS3 style definitions. Thus, we can build a rotating advertising Billboard without JavaScript.

Basic Structure:

We set up the basic framework like in the solution with JavaScript:

Funktionsweise: Eine Liste von Bildern wird unter einem Fenster hindurchgeschoben.

There is a frame and a list of images. The meaning of frame here is that of a picture-frame, not that of a HTML-frame.

We manipulate the “top” coordinate of the list to create the motion. The clipping property is responsible to let us see only the inside of the frame.

Animation

The definition of a css-animation consists of two parts.

The first part is the definition of “key frames”, so the key scenes. In the simplest case, we need only two key frames: an opening scene and a final scene. If we want to move an image 200 points upwards, we use a definition like this:

@keyframes slideup {  
  from {    top: 0px;  }  
  to {    top: -200px;  }
}

On the next we must determine an element on which the newly-defined animation is applied. In addition we can determine parameters for this animation here: when it starts, and how often it is repeated. The ‘animation-name’ field name must match the @keyframes-element.

#billboard ul li{   
  animation-delay: 1s;   
  animation-duration: 3s;   
  animation-iteration-count: infinite;   
  animation-name: slideup;  
... 
}

This works good so far:

Demo

Multiple images

We want to show more than two images in our billboard. But CSS is no imperative programming language, so we can not put together the animations in a controlled way like with JavaScript.

Instead can we do the opposite, and divide the large animation with small intermediate steps. The points of time of the intermediate steps are specified as a percentage of the total animation:

@keyframes slideup {   
  from { top: 0px; }   
  16% { top: -200px; }  
  33% { top: -200px; }
  50% { top: -400px; }   
  67% { top: -400px; }  
  84% { top: -600px; }   
  to { top: -600px; } 
}

The billboard is almost ready for use: we need to increase the animation duration compared with our original solution, as we now specify the duration of a passage of all images.

To achieve a clean transition between last and first image, we reuse the trick to repeat the first image after the last image.

Demo

You find the source code in my repository on Github.

Permalink

Nokia Asha from a developers point of view

Bild von Nokia Asha 303 und 311

I was among the winners of the Nokia Asha Touch Competition 2012. I was awarded for the feedback I have given on the new Nokia developer tools. From the laudation:

“for his very focused and relevant feedback around core app development. The issues raised showed a great understanding of the product and what areas most need improvement.”

So Nokia sent me with two new devices, an Asha 303 ​​and an Asha 311. Continue Reading →

Permalink

Codename One – Swap Grid Cells

illustation of swapping cells

What is Codename One?

The platform “Codename One” offers operating system-independent development of apps for smartphones. An important component is a library for user interfaces. Codename One is a successor of LWUIT, which in turn uses concepts of the Java Swing library.

To develop a user interface, you insert the various controls such as labels, buttons or input fields in a container object. The positioning is not handled by the container itself, but by an associated object of the class layout manager. For example, you attach a Gridlayout object to position the items in a table. This is often very useful, because the Gridlayout object will automatically adjust the positions and sizes for various display sizes.

Continue Reading →

Permalink

(Deutsch) Ruby On Rails Datenbankoptimierung Teil 2

[Zu Teil 1]

Verknüpfungen mit dem SQL-join

Relationale Datenbanken erlauben es, Tabellen miteinander zu verknüpfen. In SQL gibt es für diese Verknüpfung das Schlüsselwort “JOIN“. Eine solche Verknüpfung kann theoretisch sehr frei spezifiziert werden, in der Praxis wird man fast immer aufgrund der Gleichheit bestimmter ID-Spalten verknüpfen.

In unserem Beispiel eines Schiffsinformationssystems haben wir eine Tabelle “vessels” mit den Schiffsdaten und eine Tabelle “countries” mit den Daten zu einem Flaggenstaat. Typischerweise wollen wir die Schiffsdaten zusammen mit der Daten des dazugehörigen Flaggenstaates ausgeben. Dazu verknüpfen wir die Tabellen an Hand des Fremdschlüssels “legal_country_id”.

In unserem Beispiel liefert der SQL-Join eine Tabelle, in der Schiffe gleich mit den dazugehörigen Flaggenstaaten eingetragen sind. Die Daten dieser Tabelle kann man zum Beispiel auf einer Übersichtseite darstellen. Es ist nur eine Datenbankabfrage nötig, obwohl man Daten aus zwei Tabellen anzeigt.

Es stellt sich dann allerdings die Frage, was eigentlich mit Schiffen ohne Flaggenstaat passiert?

Um das steuern zu können gibt es verschiedene “Geschmacksrichtungen” des Joins:

INNER JOIN: Beide Datensätze müssen vorhanden sein. Wenn einem Schiff (noch) kein Flaggenstaat zugewiesen wurde, wird es auch nicht geliefert.

OUTER JOIN, LEFT JOIN: Es wird auch dann ein Ergebnis geliefert, wenn es keinen verknüpften Datensatz gibt. Es werden also auch Schiffe ohne definierten Flaggenstaat geliefert. Dabei werden Daten aus der ersten (in Leserichtung linken) Tabelle geliefert.

RIGHT JOIN Es wird auch dann ein Ergebnis geliefert, wenn es nur in der zweiten Tabelle einen Datensatz gibt. Ein RIGHT JOIN würde also Staaten liefern, in denen kein Schiff registriert sind. In der Praxis ist das öfter verwirrend als nützlich, so dass man besser die Reihenfolge umdreht und dann einen LEFT JOIN nimmt.

Wie nutzt man join von Rails

Zunächst gibt es in Ruby schon eine Methode, die “join” heißt, die aber semantisch etwas ganz anderes macht. Sie verbindet die Elemente eines Array zu einem String:

[1, 2, 3, 4].join(‘-‘)
‘1-2-3-4’

Zusätzlich bietet ActiveRecord bzw. ActiveRelation eine Methode “joins”. Wichtig ist das “s” am Ende. Die Methode sieht zunächst sehr vielversprechend aus.

company = Company.find_by_name(‘Hapag-Lloyd’)

company.container_vessels.joins(:legal_country)

SQL:

SELECT “container_vessels”.*

FROM “container_vessels”

INNER JOIN “countries” ON “countries”.”id” = “container_vessels”.”legal_country_id”

WHERE “container_vessels”.”company_id” = 3

Leider liefert die Magie von Ruby-on-Rails diesmal nicht das gewünschte. Es wird zwar ein SQL-Join erzeugt, die Spalten der anderen Tabelle werden jedoch weggeschmissen. Active-Record ist ein sogennanter Object-Relation-Mapper (ORM), und als solcher darauf optimiert, immer Objekte einer Klasse zu liefern, in unserem Fall also ContainerVessel. Wenn man später auf die verknüpften Objekte zugreift, werden diese doch wieder einzeln geholt.

ActiveRecord-Abfragen liefern Objekte der jeweiligen Klasse zurück!

Einziger Effekt des generierten INNER JOIN ist, das nur Schiffe mit existierenden Flaggenstaat geliefert werden.

Das zeigt auch auf, wofür die joins() Methode trotzdem gut: Man kann mit ihr Objekte aufgrund von Eigenschaften von verknüpften Objekten auswählen.

Beispielsweise kann man so alle Schiffe einer Reederei auswählen, die einen EU-Flaggenstaat haben.

hapag.container_vessels.joins(:legal_country).where('countries.in_eu' => 'true')
hapag.container_vessels.joins(:legal_country).where(:countries => {:in_eu => true})

SELECT “container_vessels”.*

FROM “container_vessels”

INNER JOIN “countries” ON “countries”.”id” = “container_vessels”.”legal_country_id”

WHERE “container_vessels”.”company_id” = 3 AND “countries”.”in_eu” = ‘t’

Der SQL-Join führt dazu, das die passenden Datensätze schon in der Datenbank ausgewählt werden. Der Rails-Prozess sieht die Country-Datensätze noch nicht mal. Und was nicht da ist, kostet keinen Hauptspeicher und auch keine Performance.

In der Syntax muss man aufpassen: In der Spezifikation der Bedingungen bewegt man sich auf SQL-Ebene (‘countries’), während man in der joins-Methode die Rails-Association angibt(‘legal_country’).

(Demnächst geht es weiter mit echten Joins in Rails…) Continue Reading →

Permalink

Optimize the Ruby-on-Rails database – part one

Reduce the number of database queries

A typical web application does many database queries before it delivers the response page to the web browser. The application needs to wait for the response of each of these database queries. It gets an additional slow down because of process switching. The database server must analyze each request, and also the communication between the database and the application takes time. So less database queries reduce the overall load on the system. The system scales better.
Continue Reading →

Permalink

Modification of Ilias Features

Autobahnzeichen für Pannenhilfe

 

Examples for redesign

The learning management system Ilias can be redesigned with skins. (See previous blog entry.) But an Ilias skin can even change the functionality. I show a few examples.

Login Page

Ilias Login form redigned with a custom skin

You find the templates for login, logout and the user agreement in the folder Services / init / default

In our project, we have changed the login page:

1) The login page is important because it is visible to all visitors and not only to our participants. So branding is here especially important. In our case, we added areas with logos at the top and the bottom. We also also placed an image with a truck next to the login form.

2) The ability to self-registration has been removed, because the company decides who is allowed to use the system and provide the users with a login name.

<!-- BEGIN new_registration -->
  <!-- <a class="il_ContainerItemCommand" href="{CMD_REGISTER}">{REGISTER}</a> -->
<!-- END new_registration -->

3) The language switch has been removed, because our participants always speak German, otherwise they could not understand the learning content anyway.

<form action="{LANG_FORM_ACTION}" method="post" name="languageselection">
  <input name="cmd[showLogin]" type="hidden" value="1" />
  <select name="change_lang_to" onchange="this.form.submit()">
    <option value="">{TXT_CHOOSE_LANGUAGE}</option>
  </select>
</form>

AttentionAttention: Be careful when you remove such options: do not remove the annotated “brackets” (BEGIN / END). Ilias (or the template engine) is looking for them and produces errors when the brackets are missing.

Ilias upper menu area with elements you might want to remove

Upper menu area

This area is defined in the file tpl.main_menu.html in the services / MainMenu directory

In our case, we have removed the search box, because Ilias has also a menu item “Search”, and the search did not seem so important for our relatively small offers.

We have also removed the text “Logged in as xxx”, because the area is not public visible anyway, so the participants are always logged in. The “logout” link stands out better that way.

The entries in the menus themselves are not changed in this file, but in the file tpl.main_menu_list_entries.html

Ilias Permalinks

Footer with Permalinks

On (almost) every Ilias page you find a box which contains the so-called permanent link and also links to Facebook, Yahoo, etc.

For companies with a closed user group, this is not desired. We can remove the field in the file

tpl.permanent_link.html in the directory Services / Permanent

Positive side effect: you do not have to explain what a permalink is to the participants.