Jan
29
Posted on 29-01-2007
Filed Under (pixzone) by Federico Feroldi on 29-01-2007

IRPEF Finanziaria 2007Su Kataweb un interessante sondaggio sulle variazioni nella busta paga di Gennaio dovute alla finanziaria.

Confrontando la busta paga di gennaio 2007 con quella di gennaio 2006, calcolate voi stessi i primi effetti della riforma Irpef del governo con la Finanziaria 2007. Potrete inoltre vedere via via la media degli effetti mensili di quanti hanno risposto.

(0) Comments    Read More   
Jan
26
Posted on 26-01-2007
Filed Under (pixzone) by Federico Feroldi on 26-01-2007

In this post I’ll introduce you to XMPP4MOZ, a Firefox add-on that adds XMPP protocol capabilities to the Firefox browser.

Since I’m new to this technology I’ll start from the very beginning of every good learning process: the “hello world” application, that in this case means a very simple 1 to 1 chat application.

Before you continue with this tutorial you need to install the XMPP4MOZ add-on, but I suggest that you install the complete SamplePlace suite that includes the XMPP4MOZ extension and some other nice add-ons (it has actually a very small footprint so don’t fear to install it).

Now we can create the HTML page that will be the main container of our Chat application.

Standard headers and title:

<span class="S1">&lt;html&gt;</span><br />
<span class="S1">&lt;head&gt;</span><br />
<span class="S1">&lt;title&gt;</span><span class="S0">Chat</span><span class="S1">&lt;/title&gt;</span><br />
<span class="S1">&lt;/head&gt;</span><br />
<span class="S1">&lt;body&gt;</span><br />
<span class="S1">&lt;h1&gt;</span><span class="S0">Chat</span><span class="S1">&lt;/h1&gt;</span>

Then we need a place to put the username we’re talking to:

<span class="S1">&lt;p&gt;</span><br />
<span class="S0">Connected to </span><span class="S1">&lt;b&gt;&lt;span</span><span class="S8"> </span><span class="S3">id</span><span class="S8">=</span><span class="S19">“presence”</span><span class="S1">&gt;</span><span class="S0">nobody</span><span class="S1">&lt;/span&gt;&lt;/b&gt;</span><br />
<span class="S1">&lt;/p&gt;</span><br />

A place to visualize the messages:

<span class="S1">&lt;h2&gt;</span><span class="S0">Messages</span><span class="S1">&lt;/h2&gt;</span><br />
<span class="S1">&lt;ul</span><span class="S8"> </span><span class="S3">id</span><span class="S8">=</span><span class="S19">“messagelog”</span><span class="S1">&gt;&lt;/ul&gt;</span><br />

And an input box that we use to write our own messages:

<span class="S1">&lt;input</span><span class="S8"> </span><span class="S3">type</span><span class="S8">=</span><span class="S19">“text”</span><span class="S8"> </span><span class="S3">name</span><span class="S8">=</span><span class="S19">“message”</span><span class="S8"> </span><span class="S3">id</span><span class="S8">=</span><span class="S19">“messagebox”</span><span class="S8"> </span><span class="S11">/&gt;</span><br />
<span class="S1">&lt;input</span><span class="S8"> </span><span class="S3">type</span><span class="S8">=</span><span class="S19">“submit”</span><span class="S8"> </span><span class="S3">id</span><span class="S8">=</span><span class="S19">“submitbutton”</span><span class="S8"> </span><span class="S3">value</span><span class="S8">=</span><span class="S19">“Send”</span><span class="S8"> </span><span class="S11">/&gt;</span><br />

Then we need these special DIVs that will be used as a comunication gateway between XMPP4MOZ and the Javascript application, we’ll see later how:

<span class="S1">&lt;div</span><span class="S8"> </span><span class="S3">id</span><span class="S8">=</span><span class="S19">“xmpp-connector”</span><span class="S8"> </span><span class="S3">style</span><span class="S8">=</span><span class="S19">“display:</span><span class="S8"> </span><span class="S4">none”</span><span class="S1">&gt;</span><br />
<span class="S0">Incoming</span><br />
<span class="S1">&lt;div</span><span class="S8"> </span><span class="S3">id</span><span class="S8">=</span><span class="S19">“xmpp-outgoing”</span><span class="S8"> </span><span class="S3">style</span><span class="S8">=</span><span class="S19">“border:</span><span class="S8"> </span><span class="S5">1px</span><span class="S8"> </span><span class="S4">black</span><span class="S8"> </span><span class="S4">solid”</span><span class="S1">&gt;&lt;/div&gt;</span><span class="S0"> &nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span class="S0">Outgoing</span><br />
<span class="S1">&lt;div</span><span class="S8"> </span><span class="S3">id</span><span class="S8">=</span><span class="S19">“xmpp-incoming”</span><span class="S8"> </span><span class="S3">style</span><span class="S8">=</span><span class="S19">“border:</span><span class="S8"> </span><span class="S5">1px</span><span class="S8"> </span><span class="S4">black</span><span class="S8"> </span><span class="S4">solid”</span><span class="S1">&gt;&lt;/div&gt;</span><br />
<span class="S1">&lt;/div&gt;</span><br />

And last, we’ll close the page:

<span class="S1">&lt;/body&gt;</span><br />
<span class="S1">&lt;/html&gt;</span><br />

Now we’re ready to write the Javascript code that will glue this page with the XMPP4MOZ extension, we can start by inserting a SCRIPT tag inside the page’s HEAD:

<span class="S1">&lt;head&gt;</span><br />
<span class="S1">&lt;title&gt;</span><span class="S0">Chat</span><span class="S1">&lt;/title&gt;</span><br />
<span class="S1">&lt;script</span><span class="S8"> </span><span class="S3">type</span><span class="S8">=</span><span class="S19">“text</span><span class="S8">/</span><span class="S4">javascript”</span><span class="S1">&gt;</span><br />
<span class="S1">&lt;/script&gt;</span><br />
<span class="S1">&lt;/head&gt;</span><br />

Our application will be defined as a single Javascript function that is called just after the BODY of the page is loaded, to do that we need to add this code between our SCRIPT tags:

<span><span class="S1">/* main application */</span><br />
<span class="S5">function</span><span class="S0"> </span>chatInit<span class="S10">()</span><span class="S0"> </span><span class="S10">{</span><br />
<span class="S10">};</span><br />

And update the BODY tag to call the main function on the “load” event:

<span class="S1">&lt;body</span><span class="S8"> </span><span class="S3">onload</span><span class="S8">=</span><span class="S19">“chatInit</span><span class="S8">();</span><span class="S4">”</span><span class="S1">&gt;</span><br />

Now that we have our basic application we can add the real functionality.
As I anticipated above, we will use the xmpp-incoming and xmpp-outgoing DIVs to communicate with the XMPP4MOZ extension.
To let our application react on the incoming XMPP messages we need to attach to the DOMNodeInserted event of the xmpp-incoming DIV:

document<span class="S10">.</span>getElementById<span class="S10">(</span><span class="S0">‘</span>xmpp<span class="S10">-</span>incoming<span class="S0">’</span><span class="S10">).</span>addEventListener<span class="S10">(</span><span class="S0">‘</span>DOMNodeInserted<span class="S0">’</span><span class="S10">,</span><span class="S0"> </span><span class="S5">function</span><span class="S10">(</span>event<span class="S10">)</span><span class="S0"> </span><span class="S10">{</span><br />

We also need a variable to store our current user data:

<span class="S5">var</span><span class="S0"> </span>my_user<span class="S10">;</span><br />

Our function will get an XML message passed trough the event object:

<span class="S5">var</span><span class="S0"> </span>stanza<span class="S0"> </span><span class="S10">=</span><span class="S0"> </span><span class="S5">new</span><span class="S0"> </span>XML<span class="S10">(</span>event<span class="S10">.</span>target<span class="S10">.</span>textContent<span class="S10">);</span><br />

After we have parsed the XML we can react to the message:

<span class="S5">switch</span><span class="S10">(</span>stanza<span class="S10">.</span>localName<span class="S10">())</span><span class="S0"> </span><span class="S10">{</span><br />

First we want to grab the presence messages that will notify our application when a new peer connection is available.
The format of the message is

&lt;presence from="<em>user</em>" to="<em>user</em>" /&gt;

:

<span class="S5">case</span><span class="S0"> ‘</span>presence<span class="S0">’</span><span class="S10">:</span><br />
<span class="S5">var</span><span class="S0"> </span>el<span class="S0"> </span><span class="S10">=</span><span class="S0"> </span>document<span class="S10">.</span>getElementById<span class="S10">(</span><span class="S0">‘</span>presence<span class="S0">’</span><span class="S10">);</span><br />
my_user<span class="S0"> </span><span class="S10">=</span><span class="S0"> </span>stanza<span class="S10">.</span>@to<span class="S10">;</span><br />
el<span class="S10">.</span>textContent<span class="S0"> </span><span class="S10">=</span><span class="S0"> </span>stanza<span class="S10">.</span>@from<span class="S10">;</span><br />
<span class="S5">break</span><span class="S10">;</span><br />

Then we need to grab the message messages that will notify our application when a new message is available.
The format of the message is

&lt;message from="<em>user</em>"&gt;&lt;x&gt;&lt;content from="<em>user</em>"&gt;<em>message payload&lt;/content&gt;&lt;/x&gt;&lt;message&gt;</em>

.

We will use the from attribute and the text inside the content tag to create the string that will be appended to the message log:

<span class="S5">case</span><span class="S0"> ‘</span>message<span class="S0">’</span><span class="S10">:</span><br />
<span class="S5">var</span><span class="S0"> </span>el<span class="S0"> </span><span class="S10">=</span><span class="S0"> </span>document<span class="S10">.</span>createElement<span class="S10">(</span><span class="S0">‘</span>li<span class="S0">’</span><span class="S10">);</span><br />
el<span class="S10">.</span>innerHTML<span class="S0"> </span><span class="S10">=</span><span class="S0"> </span>stanza<span class="S10">.</span>x<span class="S10">.</span>content<span class="S10">.</span>@from<span class="S0"> </span><span class="S10">+</span><span class="S0"> ‘</span><span class="S10">:</span><span class="S0"> ‘ </span><span class="S10">+</span><span class="S0"> </span>stanza<span class="S10">.</span>x<span class="S10">.</span>content<span class="S10">;</span><br />
document<span class="S10">.</span>getElementById<span class="S10">(</span><span class="S0">‘</span>messagelog<span class="S0">’</span><span class="S10">).</span>appendChild<span class="S10">(</span>el<span class="S10">);</span><br />
<span class="S5">break</span><span class="S10">;</span><br />

Then we can close the function that deals with incoming messages:

<span class="S10">};</span><br />
<span class="S10">},</span><span class="S0"> </span>false<span class="S10">);</span><br />

Now we can define the code that sends the messages. The logic is pretty much the same, when we want to send a message we will set the textContent property of the xmpp-outgoing DIV. XMPP4MOZ will send that text message to our peer application.

We will attach our message sending function to the click event of the Send button. This function will be much simpler since it just have to create the message XML and set the DIV content:

document<span class="S10">.</span>getElementById<span class="S10">(</span><span class="S0">’</span>submitbutton<span class="S0">’</span><span class="S10">).</span>addEventListener<span class="S10">(</span><span class="S0">‘</span>click<span class="S0">’</span><span class="S10">,</span><span class="S0"> </span><span class="S5">function</span><span class="S10">(</span>event<span class="S10">)</span><span class="S0"> </span><span class="S10">{</span><br />
<span class="S5">var</span><span class="S0"> </span>msg_el<span class="S0"> </span><span class="S10">=</span><span class="S0"> </span>document<span class="S10">.</span>getElementById<span class="S10">(</span><span class="S0">‘</span>messagebox<span class="S0">’</span><span class="S10">);</span><br />
<span class="S5">var</span><span class="S0"> </span>message<span class="S0"> </span><span class="S10">=</span><span class="S0"> ‘</span><span class="S10">&lt;</span>message<span class="S10">&gt;&lt;</span>x<span class="S10">&gt;&lt;</span>content<span class="S0"> </span>from<span class="S10">=</span><span class="S0">”‘ </span><span class="S10">+</span><span class="S0"> </span>my_user<span class="S0"> </span><span class="S10">+</span><span class="S0"> ‘”</span><span class="S10">&gt;</span><span class="S0">’ </span><span class="S10">+</span><span class="S0"> </span>msg_el<span class="S10">.</span>value<span class="S0"> </span><span class="S10">+</span><span class="S0"> ‘</span><span class="S10">&lt;/</span>content<span class="S10">&gt;&lt;/</span>x<span class="S10">&gt;&lt;/</span>message<span class="S10">&gt;</span><span class="S0">’</span><span class="S10">;</span><br />
document<span class="S10">.</span>getElementById<span class="S10">(</span><span class="S0">‘</span>xmpp<span class="S10">-</span>outgoing<span class="S0">’</span><span class="S10">).</span>textContent<span class="S0"> </span><span class="S10">=</span><span class="S0"> </span>message<span class="S10">;</span><br />
msg_el<span class="S10">.</span>value<span class="S0"> </span><span class="S10">=</span><span class="S0"> ”</span><span class="S10">;</span><br />
<span class="S10">},</span><span class="S0"> </span>false<span class="S10">);</span><br />

And finally we close the main chatInit() function:

<span class="S10">};</span></span>

And that’s all! If you want to see it work you need to login both you and your friend via Sameplace with your Jabber account, load the application and click on the Sameplace connect icon and you can chat!
If you need help on how to use the Samplace suite check on the Samplace suite page.
If you’re too lazy to cut&paste the code, you can look here.

Enjoy!

(3) Comments    Read More   
Jan
16
Posted on 16-01-2007
Filed Under (pixzone) by Federico Feroldi on 16-01-2007

Qualcosa inizia a muoversi anche qui da noi, e se ne inizia a parlare, finalmente! Ricordo quando, ormai più di un anno fa, con ChiaroScuro iniziammo a parlare di quello che avrebbe potuto essere la nuova onda web in Italia. E adesso eccoci qui, dopo The Ruby Mine e Nimboo e tante cose a bollire in pentola.

(0) Comments    Read More   
Jan
09
Posted on 09-01-2007
Filed Under (pixzone) by Federico Feroldi on 09-01-2007

Apple iPhone

Qualche ora fa è stato annunciato ufficialmente l’Apple iPhone: un iPod, un telefono cellulare, una fotocamera digitale ed un browser web, tutto in un unico device.
Gizmodo, il noto blog sui gadget tecnologici, sembra il primo ad aver pubblicato una coverage live della presentazione ufficiale dal MacWorld.

Ecco i primi video dell’interfaccia: video dell’album fotografico iPhone, video di una chiamata vocale dall’iPhone, video dell’interfaccia di gestione degli album musicali sull’iPhone.

Il telefono (o iPod o fotocamera) non ha tasti ne pulsanti, l’unica interfaccia è uno schermo da 160dpi sensibile al multitouch e dotato di un sensore giroscopico (come il MacBook).

Saranno disponibili due versioni, un iPhone da 8GB a $599 e un’altra versione a 4GB che dovrebbe essere attorno ai $499.

Sfortunatamente pare che inizialmente il telefono sarà bloccato per poter essere utilizzato solamente con l’operatore statunitense Cingular e verrà lanciato ufficialmente a Giugno.

E intanto Apple fa +8.40% sul NASDAQ.

Update: Apple ha lanciato il sito ufficiale per iPhone.