Cos'è una tag cloud?

Probabilmente la domanda è fin troppo facile ma per i pochi che ancora non lo sanno questa “nuvola di tag” (traduzione italiana) è un'area del sito in cui si rappresentano le parole chiave più usate all'interno del portale web.

La caratteristica principale è quella che la lista di parole chiave è pesata e quindi le parole più usate sono evidenziate per dimensione, font o colore.

Queste nuvole non sono però presenti solo per bellezza o per fornire una statistica ma hanno anche la funzione di navigazione permettendo all'utente di cercare e visitare i contenuti legati alle varie parole chiave.

Per una più dettagliata descrizione vi rimando al sempre utilissimo wikipedia

E per Plone?

Quando ci è stato richiesto di inserire in uno dei nostri portali una tagcloud abbiamo scovato il pacchetto di Souheil Shelfouh chiamato “Vaporisation” (non chiedete come mai la scelta di questo nome perchè, pur sembrandoci strano, non abbiamo mai indagato a riguardo!)

Questo prodotto ci è subito piaciuto. Forniva una portlet tagcloud dotata di tutte le principali funzionalità base: creava la lista pesata delle parole chiave, forniva un controllo sulle dimensioni e sul numero di parole chiave da visualizzare, era presente un sistema di filtraggio manuale delle parole chiave. Oltre a questo era presente un sistema di navigazione per parole chiave collegate che durante la fase di ricerca/navigazione modificava la portlet mostrando solo le parole chiave presenti nei contenuti insieme a quella ricercata.

L'intervento RedTurtle

Fin qui vi starete chiedendo il perchè di questo articolo. Per parlare i prodotti di "altri"? La risposta è no :) 

Le richieste che ci arrivavano dai clienti erano più articolate e il prodotto così com'era non ci permetteva di soddisfarle.

La richiesta principale era quella di porter utilizzare un qualsiasi campo di tipo KeywordIndex dato che gli archetype presentavano più campi di questo tipo.

Inizialmente abbiamo esteso il pacchetto originale ma dopo aver contattato Souheil Shelfouh, e aver scoperto che non intendeva più portare avanti il progetto, abbiamo deciso di prenderlo in mano noi andando a creare collective.vaporisation (nuovo, eggizzato, Plone4 compatibile).

Il prodotto collective.vaporisation

Ma andiamo ora a vedere quali sono le caratteristiche più importanti di questo nostro prodotto.

Filtraggio delle parole chiave
Possiamo eseguire vari tipi di filtri utilizzando un percorso in cui si devono trovare i contenuti, il tipo di contenuto e i campi (di tipo KeywordIndex) da utilizzare. Questa “ricerca” fornisce una lista di parole chiave da mostrare che noi possiamo ulteriormente filtrare andando ad agire su blacklist e whitelist

Visualizzazione
Tra i campi di creazione della portlet ne compaiono alcuni che determinano come e cosa visualizzare all'interno della portlet. C'è ovviamente il nome della portlet stessa, il numero di parole chiave da visualizzare, il numero di dimensioni diverse da attribuire alle parole chiave e l'ordinamento alfabetico.

Aggiornamento del cloud
Lavorando su un CMS le parole chiave usate nei contenuti potrebbero aggiungersi o togliersi spesso e soprattutto aumentare come numero numero di utilizzi. Per questo motivo abbiamo inserito un ulteriore campo che permette di impostare, in minuti, ogni quanto la portlet si aggiorna. Ma non è questo l'unico parametro in base al quale la lista dei tag viene aggiornata; l'aggiornamento avviene anche ogni volta che vengono modificati i parametri della portlet oppure ogni volta che si accede al sistema con un nuovo utente. Normalmente gli anonimi non vedranno le stesse parole chiave degli autenticati.

Joint navigation
Attivando questa opzione nella configurazione della portlet otterremo il risultato di una portlet dinamica durante la ricerca dei contenuti con determinate parole chiave. Abbiamo già parlato della possibilità di cliccare sulle singole parole chiave per eseguire una ricerca nel portale che mostri tutti i contenuti in cui la parola chiave è presente. Nel caso la portlet sia visibile anche nella pagina di ricerca, per esempio perchè è presente in una colonna laterale, questa mostrerà solo le parole chiave contenute nei documenti che sono stati trovati dalla ricerca in modo da poter affinare la ricerca in maniera sequenziale. Le parole chiave che si stanno cercando compaiono nel footer della portlet e possono essere rimosse per modificare la ricerca corrente o tornare ad una ricerca precedente.

Cosa aspettarsi dal futuro?

Le funzionalità base sembrano solide e quindi oltre alcuni accorgimenti tecnici come per esempio il reload automatico delle parole chiave da filtrare (whitelist e blacklist) quando si modifica un filtro (path, tipo, indici usati) c'è forse la necessità di poter customizzare maggiormente la grafica per quanto riguarda colori e dimensione.

I already talked about the features of collective.navigationtoggle in previous post, but the new release helped me to be sure of one thing: the unobtrusive approach chosen was good.

The new version also add some refactoring and support for other themes than the classic Plone one. Plone 4 is coming... we must live with this and luckily the products migration has begun.

What is more difficult, after years the default theme is changed (for what I remember, the default theme you all know is with us from Plone 2.0... maybe some changes was done to it at Plone 2.1, but the core never changed). All products that act on Plone UI must check also the new Sunburst theme.

Going back to navigationtoggle, I choosed an approach that was "use existing Plone navigation element to know how to render new ones".

For the new release I only empowered some existings feature, like also generate CSS classes for new element on the navigation.

Why? In Plone 3 navigation main node is like this:

<li class="navTreeItem visualNoMarker">
      <div>
        <a title="..." class="state-... navTreeFolderish" href="...">
            <img width="16" height="16" alt="..." src="...">
            <span>Foo</span>
        </a>
    </div>
   ...
</li>

And Sunburst is like this:

<li class="navTreeItem visualNoMarker">
        <a title="" class="state-... navTreeFolderish contenttype-..." href="...">
            <img height="16" width="16" alt="Folder" src="...">
            <span>Foo</span>
        </a>
   ...
</li>

Apart some node difference (no more containing DIV) the new theme also rely on a contenttype-xxx class.

What is funny (and what make me say "thanks navigationtoggle") is an unwanted behavior of the current Sunburst theme. A bug that double the content type icon: one given from the IMG tag and another ones from CSS, thanks to the new class.

I'm not interested in this bug (Irene says that probably it has been already fixed), but using navigationtoggle with this bugged version of Sunburst... also make the bug applyed to elements navigation nodes generated by our script!

This (uncommonly) is good as respect the original idea: the original theme use doubled icons?! Is not a problem of navigationtoggle, so do it!

When Web pages load and run things

Let's start with CSS. Browsers load HTML source from the Web. Inside the page you will find resources that are CSS file. Immediately the resource is loaded and the rules inside are applied to your HTML.

Now switch to Javascript resources. For Javascript... it's the same. The Javascript code is executed as soon as it is found in the page...

...but for this reason, when we need to act using Javascript on an already loaded DOM, we rely onto Javascript events.

We read immediately the code, but the execution is postponed later, when the page is fully loaded.

As the use of jQuery became standard for those tasks (especially in Plone) we always use something like this:

jq(document).ready(function() {
    // do something
});

When this lead to problems

Although we have really no choice, there are some cases where this "postpone things" is not perfect: when we need to apply (using Javascript) CSS classes on page elements at page load time.

But we can't avoid making those actions when page is loaded.

If we don't rely on onload event, we have no ready DOM to traverse. So we can't load and change a DOM node if the page is not fully loaded (even if we put the Javascript script after the HTML that define the node).

<html>
<body>
    <div id="foo">Hello world</div>
    <script type="text/javascript">
    <!--
        var foo = document.getElementById("foo");
        alert(foo.innerHTML);
    // -->
    </script>
</body>
</html>

The code above is bad, even if you are using or not jQuery... So we really need to wait for the moment when DOM is ready. You can't act of the page DOM before it is fully loaded.

However: what is the problem applying CSS style when the DOM is loaded?

The nasty effect can be a visual flip.

The page in the browser show the DOM node with the original CSS style, then after some time (that can be not so brief sometimes if the page is full of elements and heavy scripts) the Javascript engine run your code, and the node is changed: your new CSS class or your new scripted style is applied.

<html>
<head>
    <style type="text/css">
    #foo {
        background-color: red;
    }
    </style>
    <script type="text/javascript">
    <!--
        window.onload = function() {
            ... MANY OTHER EXPENSIVE OPERATIONS
            var foo = document.getElementById("foo");
            alert(foo.innerHTML);
        }
    // -->
    </script>
</head>
<body>
    <div id="foo">Hello world</div>
    ... A LOT OF MANY AND MANY HTML NODES
    <script type="text/javscript">
    <!--
        var foo = document.getElementById("foo");
        alert(foo.innerHTML);
    // -->
    </script>
</body>
</html>

A practical example

A customer ask us to develop a Plone portlet that:

• show some random images when the page is load
  
• works behind a reverse proxy (Varnish)
• works with Javascript disabled (accessibility and graceful degradation)

Step 1

Varnish is caching all our resource, images and also HTML for every page. We can't (and don't want) change this.
How to cache everything but some little images inside a portlet?

The idea is to use Javascript  for performing AJAX request for this portlet and obtain a structure of data. The cache of this kind of request can be avoided easily.

Step 2

So we are able to load an HTML for the portlet without images then, when the DOM is ready, we can populate the portlet waiting for the AJAX call to the server. For some time the visitor see and empty portlet that magically begin load images. The effect is pleasant (at least... it's not annoying).

But we can't!
The portlet must work also with disabled Javascript... So we must load random images also when the page is loaded.

NB: if the visitor use a browser with Javascript disabled, we can only give him some random pre-loaded images, but we can't prevent Varnish cache of the whole page. Reloading the same page will show him the same images for some minutes. This is acceptable for us (and for the customer!).

Step 3

The final result is to load the first "static" images in the portlet itself, then use Javascript as described at step 1: changing those images with new ones obtained from AJAX call.

This lead to the ugly visual flip effect I talked above.

I can't explain why (this is not my work), but see an empty section that is filled after a little delay is not ugly... instead seeing a set of images that suddenly change to other is... bothersome!

Step 4?

Ok, so we can simply load static images hidden by some CSS class, then using Javascript we can show them only after the AJAX call and...
Opss!

But in this way we don't see any image when Javascript is disabled!

Ok... step 4 aborted.

Scripted CSS Injection

The perfect world is the one where the step 4 is performed, but only with Javascript enabled.

I need a CSS that is loaded early like all other CSS in the page (so its style is applied immediately to the page) but only when Javascript is enabled.

I found a way to do this, but surfing the web I was not able to find other example like this one. So I called this approach Scripted CSS Injection (SCI)... maybe someone can point me to other original name or example?

However... how this works? Simply generating the additional CSS... with Javascript!
For this we use the standard window.write Javascript API. The window.write command is used commonly to write HTML inside windows (is more common to use it in popup windows for generating the contained HTML from scratch).

The additional Javascript is load in the page head section and it doesn't wait for DOM load. The one in our product is only one line:

document.write('<style type="text/css">.hideFlag img {display: none}</style>');

As I said at the beginning, Javascript is interpreted as CSS, so immediately when found in the page.
The browser will add to HTML the style node immediatly.

What is nice of SCI approach is obvious: a browser with no Javascript support can't add the CSS rule to the page!

Fairytale gone well

This technique finally lead us to a portlet that:

• will show cached images if without Javascript support, but images are still random (chosen server side and changed with some delay)
• will show random (and not cachable) images client side if Javascript is enabled
• No ugly visual flip effects. With Javascript enabled static images are loaded hidden, then new dynamic ones are taken from the server and show. Thanks to SCI approach.
  

For more info, check the code of auslfe.portlet.multimedia.

They want tab!

The request is quite common in recent layout that you can see all around the Web. Ok, "portlet" is common, but you can also find many examples of portlets with tabs.

What is this? The data inside portlets is split in sections that you can easily switch with a little Javascript code. The benefit is to put more information inside a tiny space, maybe showing to users only the most interesting ones when he arrive at your page.

Technically speaking this task is so simple that a blog post is not needed... but we don't know what kind of contents we want put inside the portlet tab.

Also the customer want to have the choice of use all (maybe the most part) of Plone portlets available is his installation... We really can't rewrite/overrider all portlets to get this...

...and finally (like everytime) accessibility. Data inside portlets must the accessible and the requirement 15 of the Stanca Act force us to make this available also with Javascript disabled.

Solution

Let's starts from what we can't lose:

• accessibility of the page without Javascript
• all Plone portlet usable as "tab"

For those two reasons the simplest way is to keep Plone portlet engine like it is. Plone portlets are working normally without Javascript, so why don't simply show tabs in only when Javascript is there?

This lead us to a solution. "Simply" generate portlet with tab using Javascript.

One more time again jQuery is our hero. The product add to Plone portal_javascript tool a new jQuery plugin for this. Is not a perfect plugin right now (is a composition of jQuery and normal Javascript OOP) but reach the target.

Here an example:

jq(document).ready(function() {
    var generatedPortlet = jq.tabbedportlet();

    generatedPortlet.makeTab("#portal-column-two .portletNews");
    generatedPortlet.makeTab("#portal-column-two .portletCalendar");
    generatedPortlet.makeTab("#portal-column-two .portlet-static-static");
    jq("#portal-column-two .visualPadding").prepend(generatedPortlet.getPortlet());
});

When page is loaded a new Javascript object is created, and calling makeTab method you can "steal" other existing portlets all around the page (simply giving a jQuery selector, a DOM element or a jQuery object wrapping the portlet).

The method also has other features, look at the pypi page below for more.

Every call to makeTab will remove the portlet and move the DOM elements of the portlet inside a new ones (that, for now, is not inside the document yet).

When you have finished, just put the result of getPortlet method wherever you want.

The final effect is quite good... the demo will show you the page with disabled Javascript, then (long life to Web Developer's Firefox extension) it is enabled again and the page reloaded...

What next?

The product is not so simple to be used by Plone site members (this is not named collective.portlet.tabber... )

A developer or a skinner must provide the additional Javascript inside a product/theme and he must know something about jQuery selectors... but after this starting setup... nothing more!

Another thing Ithat is not perfect is the Javascript structure, not a fully jQuery plugin. You can't fully rely on chaining right now.

More info?

http://pypi.python.org/pypi/collective.portlettabber

Vaporisation (also available as an egg) can display on your site a portlet with the cloud of the keywords used in the site.
If you are not satisfied with the standard monochrome display, you can quickly customize the template to add the CSS classes that give more color.

Copy the original template cloud.pt in your browser folder on your Plone theme (the classic theme created with paster).

Go to the configure.zcml file in the same folder and add these few lines: 

...
<include package="vaporisation"/>

<!-- Portlet tagclouds -->
  <plone:portletRenderer
         portlet="vaporisation.interfaces.IVaporizedCloud"
         template="cloud.pt"       
         layer=".interfaces.IThemeSpecific"
         />
...

Save and Close.
Now open your file cloud.pt. First, you could add to portlet a specific  css class:

<dl class="portlet portlet-tagcloud"
    i18n:domain="vaporisation"
    tal:attributes="id string:portlet-${context/getId}"
...

Moved a bit lower down, where tags are defined:

<a href=""
   tal:content="tag/name"
   tal:attributes="style string:font-size: ${tag/size}%;;;
                   href string:${link}${tag/name};
                   title string:${tag/name} (${tag/weight});" />

Add to the attributes list the CSS class:

<a href=""
   tal:content="tag/name"
   tal:attributes="style string:font-size: ${tag/size}%;
                   class python:'size_'+str(tag['size'])[:2];
                   href string:${link}${tag/name};
                   title string:${tag/name} (${tag/weight});" />

There is no need to change much, nor to extend the original python class.
In this way each different tag size will be associated with a CSS class like "size_10", "size_11" , ...,  that you can assign a color: 

...
.vaporized-tag a.size_13 {
    color: #006600;
}
.vaporized-tag a.size_14 {
    color: #008080;
}
.vaporized-tag a.size_15,
.vaporized-tag a.size_16 {
    color: #761911;
}
...

The end result will not be very different from this ... look at the bottom of the page :)

A new version of redturtle.video was released on pypi:

http://pypi.python.org/pypi/redturtle.video/0.2.0beta

The package redturtle.video is a video support for Plone, based on collective.flowplayer.
In the new version of redturle.video two new fields are added to content types Video files and Video link. These new fields are "Year" and "Duration".

The information on the lenght of video is achieved through the use of packages: 'hachoir_core', 'hachoir_metadata' and 'hachoir_parser'.

The "Video Gallery" portlet shows content image fields taken from videos. In the new version "Video Gallery" portlet shows also the new informations on the year and duration of the video and also the title of the video.

Ogni elemento può essere aggiunto attraverso semplici e intuitivi menù a scomparsa.