Personal tools

July

Jul 21, 2010

Migliorare l'usabilità dei link interni in TinyMCE

Analisi di collective.tinymceplugins.advfilelinks, un'alternativa al plugin di TinyMCE per i link interni a Plone che permette di gestire in modo differente i link a file del sito.

La Regione Emilia Romagna sta lavorando alacremente al miglioramento dell'accessibilità e dell'usabilità di Plone.

Dato che il futuro dell'editor WYSIWYG in Plone non è più Kupu (difficilmente personalizzabile e non troppo supportato) ma TinyMCE, già da tempo la scelta è stata di passare a TinyMCE anche nella versione 3 di Plone, usata in vari siti regionali.

Migliorare TinyMCE è più semplice che Kupu e lo dimostra come è stato possibile da parte nostra aumentarne le funzionalità per venire incontro ad alcune delle richieste della Legge Stanca (modifiche di cui si è discusso in un altro post, e ora integrate nella release ufficiale già dalla versione 1.1rc9); Altro particolare: trovo importante che questo editor esista anche come progetto indipendente.

Altre novità: la gestione dei link

Una richiesta recente per aumentare l'usabilità dei documenti è stata la seguente:

Modificare Plone in modo che i link interni, se fatti a contenuto di tipo File, mostrino l'icona del tipo di contenuto e la dimensione del file stesso

Una simile modifica aumenta l'usabilità generale della pagina, nonché impatta col Requisito 19 della Legge Stanca.
Dopo una prima analisi è risultato chiaro come fosse necessario scrivere un nuovo plugin per TinyMCE.

Come funziona collective.tinymceplugins.advfilelinks?

Il prodotto rilasciato fornisce il minimo delle modifiche possibili a TinyMCE (ma non minime quanto avrei voluto... ne parliamo dopo). Si tratta di un un plugin aggiuntivo (e per fortuna la presenza di plugin è prevista non solo dall'editor ma anche dalla sua configurazione di Plone) che sostituisce quello predefinito di Plone per i link interni (dal nome autoesplicativo plonelink).

Dopo un'analisi attenta di come poter ottenere le funzionalità richieste e della flessibilità delle API di TinyMCE, su indicazione della Regione stessa abbiamo preso la seguente strada, forse un po' limitata ma di minimo impatto sullo sviluppo e con una resa eccezionale se il browser è aggiornato:

  • I link a file acquisiscono un nuovo attributo type (previsto dallo standard HTML anche se poco conosciuto) ed viene fornito un CSS aggiuntivo contenente varie regole per fornire l'icona.
    Esempio:
    a[type='application/pdf'] {
        background: url(pdf.png) no-repeat 0 50%;
        padding-left: 20px;
    }
    Questo tipo di regola CSS ha un buon supporto (da Internet Explorer 7 in poi).
  • La dimensione del file è prima di tutto inserita nel title del link (che normalmente il plugin originale non fornisce) ma un buon effetto è ottenuto associando una ulteriore regola CSS:
    a.internal-link-tofile:after {
    	content: " ("attr(title)")";
    }
    Questa magica regola CSS (fa parte dello standard CSS 2, per quanto Internet Explorer la supporti solo dalla versione 8 in poi) inserisce del testo aggiuntivo dopo i link con classe internal-link-tofile.
    Il contenuto di questo testo è preso dall'attributo title, ma vi vengono aggiunte delle parentesi. Ovviamente questa classe CSS aggiuntiva è inserita dal nostro plugin in aggiunta alla già nota internal-link.

L'ultima funzionalità è forse la più interessante e per quanto il metodo usato sia davvero poco invasivo e l'effetto finale a dir poco bello, il limite ad avere Internet Explorer 8 è ancora grande.
E' comunque sopportabile? Sì, dato che l'attributo title rimane comunque disponibile agli utenti (e agli Screen Reader) in tutti i casi.

Preview degli effetti del Plugin

Note tecniche di estendibilità

TinyMCE per Plone sfrutta chiamate AJAX per richiedere al server informazioni sui contenuti. Come sempre le modifiche lato server sono minime e perfettamente integrate con quanto Plone già fornisce.

E' bastato fornire un nuovo adapter.

  <adapter
        for="Products.ATContentTypes.interface.IATFile"
        provides="Products.TinyMCE.adapters.interfaces.JSONDetails.IJSONDetails"
        factory=".adapters.JSONDetails"
        />

Grazie alla ZCA, questo adapter aggiuntivo interviene solo per i contenuti di tipo File o sottotipi (a volte ho l'impressione che senza adapter i plonisti non vivrebbero più!).

I problemi maggiori sono lato client... L'idea sarebbe come sempre estendere e non sovrascrivere. In un mondo perfetto questo plugin si sarebbe dovuto integrare con quello preesistente, sfruttandone tutto il codice presente.

Non mi è ancora chiaro se questo non è stato possibile per limiti miei, del plugin stesso, o di TinyMCE, ma il risultato per quanto funzionante è anche una copia di molti dei file originali (una forma di branch del plugin)... probabilmente non dormirò di notte per aver dovuto copiare i file di lingua... ma dopo tutto è una versione alpha!

Il limite maggiore di TinyMCE attualmente è che non usa jQuery (per quanto ci sia un progetto che integra jQuery e TinyMCE) e soprattutto che non c'è uso di eventi Javascript.

Selezione link interni in TinyMCESarebbe stato bello (ma che dico bello! Utile) se al click del mouse sul pulsante radio che seleziona un file piuttosto che un qualunque altro documento a cui associare il link, venisse lanciato un evento Javascript... evento al quale un buon plugin per jQuery avrebbe potuto reagire per eseguire azioni...

Per ora questo non pare possibile, ma sarebbe un buon passo avanti per TinyMCE.

Nota sul namespace

Sono rimasto colpito nel vedere come sulla collective ci siano così pochi plugin the TinyMCE (l'unica eccezione pare essere collective.tinymcetiles). Ci sono state sanguinose discussioni in passato sull'uso di namespace a 2 o 3 livelli (ne ricordo una completa e interessante). In questo caso l'uso dei 3 livelli mi è parso opportuno.

Spero che in futuro altri contribuiscano al gruppo di plugin collective.tinymceplugins e figli!

Riferimenti

Jul 20, 2010

Aggregate zope munin graphs

Filed Under:

Munin with munin.zope is a handy tool if you want to monitor your Zope instance. But it starts to be annoying when you have too many zeoclients and too many projects on one server. Using munin aggregate functionality you can create nice, human readable graphs reusing your existing data.

With the newest version of munin.zope you have 4 different plugins:

  • ZServer threads
  • ZODB activity
  • Zope cache parameters
  • Zope memory usage

When you start using it in production environment you can end like this:

 

Munin
 

Using aggregation you can end like this:

Munin aggregation

What it does? It takes data from multiple zeoclients (in this case every project from A-E have 4 zeoclients) and renders only total amount per project.
Here is munin.conf which does this trick:

[Server1;projectA]
  address 127.0.0.1
[Server1;projectB]
  address 127.0.0.2
[Server1;projectC]
  address 127.0.0.3
[Server1;projectD]
  address 127.0.0.4
[Server1;projectE]
  address 127.0.0.5

[Server1;Aggregated]
  update no
  total_memory.update no
  total_memory.graph_category Zope
  total_memory.graph_title Aggregated Zope memory
  total_memory.graph_order \
    projectA \
    projectB \
    projectC \
    projectD \
    projectE

  total_memory.projectA.sum \
    projectA:projecta_zopememory_instance_1.VmSize \
    projectA:projecta_zopememory_instance_2.VmSize \
    projectA:projecta_zopememory_instance_3.VmSize \
    projectA:projecta_zopememory_instance_4.VmSize
  total_memory.projectA.label project A

  total_memory.projectB.sum \
    projectB:projectb_zopememory_instance_1.VmSize \
    projectB:projectb_zopememory_instance_2.VmSize \
    projectB:projectb_zopememory_instance_3.VmSize \
    projectB:projectb_zopememory_instance_4.VmSize
  total_memory.projectB.label project B

  total_memory.projectC.sum \
    projectC:projectc_zopememory_instance_1.VmSize \
    projectC:projectc_zopememory_instance_2.VmSize \
    projectC:projectc_zopememory_instance_3.VmSize \
    projectC:projectc_zopememory_instance_4.VmSize
  total_memory.projectC.label project C

  total_memory.projectD.sum \
    projectD:projectd_zopememory_instance_1.VmSize \
    projectD:projectd_zopememory_instance_2.VmSize \
    projectD:projectd_zopememory_instance_3.VmSize \
    projectD:projectd_zopememory_instance_4.VmSize
  total_memory.projectD.label project D

  total_memory.projectE.sum \
    projectE:projecte_zopememory_instance_1.VmSize \
    projectE:projecte_zopememory_instance_2.VmSize \
    projectE:projecte_zopememory_instance_3.VmSize \
    projectE:projecte_zopememory_instance_4.VmSize
  total_memory.projectE.label project E

 

For more information please check:
http://munin-monitoring.org/wiki/aggregate_examples
http://munin-monitoring.org/wiki/PercentGraphHowto
http://munin-monitoring.org/wiki/stack_examples

Jul 19, 2010

Amberjack e Windmill: un matrimonio d'amore

Filed Under:

Il successo di Amberjack e la conferma della sua inclusione nei futuri rilasci di Plone continuano a riempirci di soddisfazione. Per non riposare sugli allori, abbiamo organizzato un matrimonio che promette di generare grandi benefici per tutta la comunità Plone.

Come abbiamo sempre cercato di fare, ci siamo spinti oltre alla semplice creazione di un'opportunità, impegnandoci a supportare chi desidera sfruttarla. Nel caso di Amberjack, ultimamente ci siamo impegnati per agevolare al massimo la creazione interattiva di tutorial, eliminando la necessità di scrivere codice sorgente. Come nel mondo reale, per insegnare un'azione deve bastare saperla eseguire, senza farsi carico di tecnicismi. Ecco perchè abbiamo pensato di integrare in Amberjack un registratore interattivo di tutorial.

Costruire su Amberjack

Abbiamo concepito e realizzato Amberjack, un sistema efficace e intimamente legato a Plone per generare tutorial sul CMS e su qualsiasi prodotto Plone, per consentire, a chi sviluppa nuovi prodotti Plone, di offrire il massimo supporto a coloro che useranno tali prodotti, aumentandone il gradimento e consentendo a tutti di utilizzarli al meglio. Questo livello di supporto si riverbera in positivo sull'intera comunità e sull' immagine pubblica di Plone.

Tuttavia, generare un tutorial Amberjack, fino a ieri, era un'attività piuttosto lenta, che richiedeva una certa dimestichezza con il linguaggio Python e con la programmazione a basso livello. Tali abilità non sono necessariamente presenti in chi, ad esempio negli Enti Pubblici, si occupa di formazione e comunque di supporto agli Utenti. Capita così che prodotti sviluppati all'interno degli Enti, con una partecipazione più o meno limitata delle Aziende, non abbiano ancora beneficiato di Amberjack.

Windmill e Amberjack, un matrimonio di interesse... per tutti!

Come potrete capire dal video che precede, per non inventare l'acqua calda, siamo ricorsi a Windmill (http://www.getwindmill.com/), prodotto libero ben noto a chi, come noi, pratica il test driven development. Windmill si basa su uno strumento installabile lato Client e integrato con Python, e su una serie di servizi Web  (acceduti via proxy tramite chiamate javascript remote) che centralizzano alcuni dei processi di generazione dei test, ad esempio il loro salvataggio su un file di idoneo formato.

E' così nato collective.amberjack.windmill, prodotto aggiuntivo che installa un'istanza Windmill sul sito Plone, e ne sostituisce alcune delle librerie con versioni specifiche per Amberjack. Ne nasce un "registratore di azioni" che, anzichè essere asservito alla creazione di casi di test, genera un tutorial esemplificativo, completo di ogni fase, dalla login alla logout. Ai formati nativi di Windmill, Python e Javascript, è stata aggiunta la possibilità di salvare queste registrazioni nel formato nativo di Amberjack, rendendo la loro creazione molto più rapida, semplice e immediata.

Prodotti Plone autoesplicativi

Il tutorial può, indifferentemente, essere creato su una istanza Plone locale o direttamente sul sito di produzione, passando l'URL come parametro sulla linea di comando al momento dell'avvio di Windmill. A prescindere dall'istanza Plone utilizzata per la generazione del tutorial, esso può agevolmente essere ricontestualizzato su un server differente grazie al supporto agli URL relativi. Il file zip generato da Windmill viene caricato sul sito di produzione tramite un'apposita funzionalità di upload.

A questo punto, non manca niente: Amberjack e Windmill, sposi felici, annunciano la nascita del loro pargolo, un Plone veramente autoesplicativo, che starà a tutti noi fare crescere nel modo migliore.

Jul 14, 2010

New collective.navigationtoggle release: integration with any theme (I hope)

The new release only fixed a small bug, but also add some better integration with Plone themes. What if fun: a bug inside Sunburst theme was the demonstration that the approach is good!

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!

Jul 13, 2010

Evil Javascript... use strip() or trim()?

Filed Under:

I hate doing the same error all the time! One time again: how to obtain a cross browser method for Javascript to remove leading and trailing whitespaces inside strings?

Every time I make the same stupid error! So, let's make quickly, a guide for obtaining this behavior.

The trim() function works only on Firefox and maybe other browsers, but not on IE.

In my experience the stript() function instead works better, both on Firefox and IE.

So what is the problem? That every time I forget to use this last one, and I use again trim instead of stript...

There is a solution for my lazy brain? Well... I use very often (AKA "always") jQuery for our projects, so... please Luca... from now just use jQuery.trim().

I feel better! No more error from now...

...

... until next time.