Personal tools

Luca Fabbri

Nov 16, 2009

A Tiny step for more accessibility in Plone

In last months I'm keeping updated a branch of TinyMCE that can be very interesting for Italian users of Plone (but not only...)

For a preamble for all who didn't know nothing about it, lets me say some words on the Italian law for accessibility: the so called Stanca Act.

The Italian Legislation on Accessibility force all newly created public websites to keep 22 requirements, mainly taken from the WCAG 1.0.

For how Plone is designed (trying to fulfil the WCAG at AA level) a lot of required work is just done (I really like when this happen)!

There are only 2 requirements that keep our head busy every time we develop a new site for an Italian public agency:

Requirement 1
The (X)HTML must follow the Strict DTD.
Requirement 10
"[...] associate data cells and header cells in data tables that have two or more logical levels of row or column headers."

For us the requirement 1 is a fight against the Transitional DTD of Plone (see also the #4379). Of course, this mean we are always forced to fix manually some Plone templates, but at the end after 4 year this become a well know job!

The real problem is the XHTML code that users put inside the WYSIWYG editor... this must provide us XHTML Strict code someway!

When Kupu was the Plone choice this was a difficult... sometimes our choice was to put a layer between the editor work and the end user, fixing the code using the uTidylib!

In the perfect world the WYSIWYG editor itself must return us the XHTML Strict code...

Again: the requirement 10 is also a WYSIWYG editor problem. Kupu is not helping us to add additional cell info on created tables.

Welcome TinyMCE

The future (but already available) WYSIWYG editor for Plone 4 is TinyMCE.

The output code of TinyMCE is "more strict" than the Kupu ones... only some minimal fixes are needed. If facts the only validation error found right now if the use of the type attribute for ordered and unordered list (not available in XHTML Strict).

We are keeping updated a TinyMCE branch you can download and test from the collective; it fix the 2 problems described.

First of all: it's not using the type attribute again, but instead it applies a CSS class. An additional small stylesheet make the rest. For details see changes.

The other missing feature is to help the editor to add more attribute to table cells and headers. The simpler solution from the W3C is to provide the scope attribute.

When I started this task I was sure that this was going to steal me a lot of time... but again TinyMCE was a nice surprise!

The patch applied is simple; for some reason TinyMCE support the scope natively but it's disabled (probably only in the Plone version?). As you can see in changes done, my work was very quick (and again: I like when this happen)!

And now?

Keeping updated the code is a quite simple task, but I don't like the idea to branches forever. Also note that:
  • The first fix above is also valid for XHTML Transitional pages
  • The new scope attribute feature can be useful also outside a Stanca Law environment.

So?

We proposed to merge those changes in the TinyMCE core!

Keep one eye on #115 and #131!

Nov 09, 2009

Ploneconf2009: un breve sommario

Archetypes è morto: lunga vita ad Archetypes

Trovo finalmente il tempo di riassumere i punti salienti della Ploneconf 2009 di Bupadest.

La grande verità

Per la prima volta dai tempi di Plone 2.0 sono davvero convinto che il nostro amato e ben conosciuto Archetypes venga lentamente mandato a morte. La sua sarà una lenta e non facile caduta e molto probabilmente i suoi pezzi vivranno fino ai tempi di Plone 5, ma a differenza di tutte le altre volte l'alternativa che si sta disegnando è reale e soprattutto da qualcosa che Archetypes non aveva.

Sto ovviamente parlando di Dexterity. Questo nuovo framework promette maggiore velocità (il talk di David Glick intitolato "Building Content Types with Dexterity" ha anche mostrato qualche cifra, ma nulla di eccezionale a dire il vero, un particolare confermato anche da Wichert Akkerman nel suo intervento di cui parlo sotto), si integra in modo completo con la ZCA e l'uso delle interfacce... ma non sono questi i particolari che credo determineranno il suo successo.

Per la prima volta non si sta semplicemente fornendo una modo alternativo, ideologicamente più bello ma nella pratica più limitato, per ottenere esattamente quello che Archetypes già fornisce (ho visto vari di questi tentativi in passato, e anche Rok Garbas ci ha riprovato nel suo talk intitolato "Complex Forms with z3c.form"). Dexterity offre una grande nuova funzionalità che è la generazione dei contenuti via Web!

Per chi di voi ha già usato prodotti come ATSchemaEditorNG e derivati, questo potrebbe non sembrare niente di veramente nuovo, ma questa volta la differenza sta nel fatto che questi contenuti saranno esportabili come codice perfettamente funzionante e modificabile.

L'utente Plone potrebbe quindi generare autonomamente i propri modelli dati e richiedere interventi di sviluppo sono per ottenere risultati che l'interfaccia Web non offre... eccezionale!

Le slide e gli esempi sono da analizzare (forse un tantino esagerata anche l'inclusione opzionale dei componenti Grok... ma lo perdoniamo).

Il prodotto attualmente presenta alcuni limiti e mancate funzionalità che non lo fa consigliare per la produzione, ma sono tutte cose che verranno facilmente superate nel breve. Probabilmente Dexterity diventerà lo standard dello sviluppo in Plone 4, convivendo (forse non troppo pacificamente) con Archetypes, per diventare l'unico ospite in Plone 5.

De-cosa?

Era dappertutto e se ne parlava dappertutto... Deco!
Confesso che non mi sono assolutamente interessato all'argomento fino alla conferenza e anche durante la stessa ho schivato tutti i talk a riguardo, poi mi sono ritrovato ad uno degli incontri nella terza giornata (dedicata agli Open Space) in cui l'argomento era "pagine composte" e l'intervento di Limi ha portato l'attenzione su questo nuovo giocattolo.

Deco si dovrebbe occupare solo del layout. Tutti noi potremmo continuare ad utilizzare l'approccio di oggi (creo un contenuto, genero la sua vista) oppure basarci sul layout Deco che permetterà il movimento dei componenti della pagina (tiles) tramite drag & drop.

A sentire Limi l'accessibilità della pagina (intesa come validazione del codice) rimane garantita se si parte da un buon XHTML. Vedremo!

A ruota libera

Essendo finiti gli argomenti principali, finisco con una breve panoramica su alcuni interventi minori che ho trovato per qualche motivo interessanti.

Euphorie: combining grok, dexterity sql content in a single application - Wichert Akkerman.
Wichert ci ha offerto un interessante talk su come usare Plone senza usare Plone. La descrizione di un progetto dove Plone veniva completamente privato di ogni suo componente (sharing, versioning, ...) e dove i dati venivano presi da database relazionale...
...forse conveniva non usare Plone? :-)

plone.app.discussion - Timo
Un veloce incontro negli openspace su un vecchio argomento mai completamente risolto (speriamo sia la volta buona) un nuovo prodotto, speriamo il nuovo prodotto, per gestire i commenti ai contenuti in Plone. Sarà compatibile con Plone 3.3 e diventerà parte del sistema in Plone 4.1.
plone.app.discussion promette la moderazione dei commenti e un workflow per questi, ovviamente personalizzabile. Era ora!

Very frequently asked questions answered for the last time :-) - Andreas Jung
Come potevo non partecipare? Chi di voi non è mai stato ripreso da A.J. almeno una volta?
La persona più "diretta" della mailing list plone-users che ripeteva per l'ennesima volta, nel modo più gentile possibile, alle domande che troppo spesso si è sentito fare (lo so... non erano davvero dirette a lui...).
Non mi sono stupito del suo intervento dopo la lunga discussione che è sfociata nel flaming poche settimane prima della conferenza...
Ho trovato divertente vedere come il giorno dopo qualcuno abbia comunque fatto domande troppo banali nella lista... e con lo stesso approccio di sempre abbia ricevuto in regalo le risposte di A. Jung!

Oct 04, 2009

Hidden Javascript Jewels inside Plone!

Filed Under:

The basic Plone installation rely on some little javascript sources that can be very useful.

Right now Plone is filled with a lot of jQuery javascript script for obtain UI effects. Every time you need an effect that Plone has, you must before ask to you: I'm sure that I only need to write down some good HTML, and nothing more?

Please not that even if this page try to integrate the same examples reported, you can't really see them working due to CSS issue. Use Firebug "Inspect element" feature to see how the javascript is changing the DOM.

Expand/collapse like "history" does

The javascript jem responsible of this is collapsiblesections.js.

It's javascript docstring says:

/* - collapsiblesections.js - */
/*
 * This is the code for the collapsibles. It uses the following markup:
 *
 * <dl class="collapsible">
 *   <dt class="collapsibleHeader">
 *     A Title
 *   </dt>
 *   <dd class="collapsibleContent">
 *     <!-- Here can be any content you want -->
 *   </dd>
 * </dl>
 *
 * When the collapsible is toggled, then the dl will get an additional class
 * which switches between 'collapsedBlockCollapsible' and
 * 'expandedBlockCollapsible'. You can use this to style it accordingly, for
 * example:
 *
 * .expandedBlockCollapsible .collapsibleContent {
 *   display: block;
 * }
 *
 * .collapsedBlockCollapsible .collapsibleContent {
 *   display: none;
 * }
 *
 * If you add the 'collapsedOnLoad' class to the dl, then it will get
 * collapsed on page load, this is done, so the content is accessible even when
 * javascript is disabled.
 *
 * If you add the 'inline' class to the dl, then it will toggle between
 * 'collapsedInlineCollapsible' and 'expandedInlineCollapsible' instead of
 * 'collapsedBlockCollapsible' and 'expandedBlockCollapsible'.
 *
 */


This piece fo code can be great for obtain the same sexy expand/collapse feature that you see all around Plone UI.

For example, I can use here this code:

<dl class="collapsible collapsedOnLoad">
    <dt class="collapsibleHeader">
      See the RedTurtle Hidden logo
    </dt>
    <dd class="collapsibleContent">
      <img alt="The RedTurtle Logo" src="http://www.redturtle.net/logo.jpg" />
    </dd>
 </dl>


And what is the results?

See the RedTurtle Hidden logo
The RedTurtle Logo

Dropdown menus

Wow! Can you believe that the dropdown menus you see in the working area of Plone (like "View", "Add portal content", ...) are only a piece of simple HTML and a magic javascipt does all the work?
The script this time is dropdown.js.

It says:

/* - dropdown.js - */
/*
 * This is the code for the dropdown menus. It uses the following markup:
 *
 * <dl class="actionMenu" id="uniqueIdForThisMenu">
 *   <dt class="actionMenuHeader">
 *     <!-- The following a-tag needs to be clicked to dropdown the menu -->
 *     <a href="some_destination">A Title</a>
 *   </dt>
 *   <dd class="actionMenuContent">
 *     <!-- Here can be any content you want -->
 *   </dd>
 * </dl>
 *
 * When the menu is toggled, then the dl with the class actionMenu will get an
 * additional class which switches between 'activated' and 'deactivated'.
 * You can use this to style it accordingly, for example:
 *
 * .actionMenu.activated {
 *   display: block;
 * }
 *
 * .actionMenu.deactivated {
 *   display: none;
 * }
 *
 * When you click somewhere else than the menu, then all open menus will be
 * deactivated. When you move your mouse over the a-tag of another menu, then
 * that one will be activated and all others deactivated. When you click on a
 * link inside the actionMenuContent element, then the menu will be closed and
 * the link followed.
 *
 */


So you only need to design an HTML dl structure like this:

 <dl class="actionMenu" id="myDummyMenuId">
   <dt class="actionMenuHeader">
     <a href="some_destination">Open the magic dropdown</a>
   </dt>
   <dd class="actionMenuContent">  
       <img alt="The RedTurtle Logo" src="http://www.redturtle.net/logo.jpg" />
   </dd>
 </dl>


Here follow the example usage

Open the magic dropdown
The RedTurtle Logo

Conclusion

There is a lot of Magic behind Plone, but thanks to jQuery and a smart infrastructure you can use this Magic for your needs!

Sep 24, 2009

Sostituire i contenuti base di Plone con i propri archetype

Filed Under:

Ho scritto un tutorial sul portale Plone Italia relativamente a questo delicato argomento.

Non dilunghiamoci troppo, dato che il tutorial può essere letto direttamente dal portale plone.it, ma riassumiamo solo i concetti che vi stanno dietro.

  • Aumentare/modificare le funzionalità dei tipi nativi di Plone.
  • Sostituire quindi questi tipi primitivi con i nostri tipi.

Fin qui tutto facile, il problema è sempre e solo uno: se sviluppiamo un nostro tipo di contenuto "News" e vogliamo che questo venga usato da Plone proprio come se fosse l'originale "News Item" di ATContentTypes, allora dovremmo combattere con l'integrazione nel sistema:

  • Far capire a Plone che, dove prima veniva usato "News Item", ora venga usata la nostra news (piuttosto facile, ma noioso).
  • Prodotti di terze parti (magari non ancora installati) dovranno usare il nostro contenuto se internamente facevano affidamento su "News Item"

Leggetevi quindi la guida all'applicazione di questo metodo.

Aug 24, 2009

Ridurre il numero dei click: SpeedUpUI

Filed Under:

Introduzione al primo di una serie di prodotti atti a velocizzare l'interfaccia di Plone, aumentando le funzionalità present in ogni pagina

Introduzione

L'idea che sta dietro al progetto nasce dalla "lentezza" di Plone in tutte quelle situazioni in cui è necessario effettuare data-entry massivo e/o ripetere molto spesso la stessa operazione.

Non si sta quindi parlando di rendere Plone più veloce (il Web è pieno di sanguinose discussioni a riguardo!) ma di rendere l'interfaccia più semplice. A volte bastano pochi accorgimenti.

Un esempio semplice, ma che fa capire quello che intendo è la PLIP 228 discussa per Plone 4. Si parla di ripristinare il menù a tendina "Aggiungi nuovo elemento" anche per i contenuti che non sono cartella (rimosso con l'avvento di Plone 2.5). I motivi che hanno portato alla sua rimozione sono tutto sommato buoni (legati all'usabilità dell'interfaccia) ma tutti si sono accorti quanto fosse più facile prima (leggasi "meno click e meno caricamenti") inserire più contenti in modo massivo.
Un'interfaccia più ricca è anche più potente, ma porta anche a svantaggi dovuti alla sua minore facilità. Qual'è il confine?

In questo caso, e nei casi di cui questa serie di prodotti vuole occuparsi, la questione è ovviamente un appesantimento dell'interfaccia che diventa meno semplice, meno chiara...
Ad ogni modo non è sempre sbagliato fornire (a chi la vuole) un'interfaccia più complessa, che magari necessita l'utente/redattore ad un addestramento maggiore, ma che può portare a anche a ridurre il numero di caricamenti.

Esempio numero 1: le briciole di pane

Cosa non va nelle briciole di pane di Plone? Ovviamente nulla!

Chiari, semplici, leggibili link che permettono di tornare velocemente ai contenitori del documento corrente...

Quando un utente usa le briciole di pane?
Un utente visitatore le usa per tornare al contenitore... nulla di più, e non ci si aspetta quindi che siano necessarie altre funzionalità.
Trovo il comportamento attuale un po' limitante invece per gli utenti redattori... questi possono voler tornare al contenitore/i per effettuare altre operazioni, che a mio parere possono essere:

  • Modificare il contenuto
  • Accedere alla vista dei contenuti della cartella
  • Aggiungere nuovi elementi

redturtle.speedupui.pathbar

Il primo (e speriamo non l'ultimo) prodotto si occupa ovviamente della pathbar di Plone che non a caso ho portato come esempio.

SpeedUpUI Pathbar sostituisce la normale viewlet delle briciole di pane con una versione più complessa che offre un menù a tendina ai redattori, per effettuare le operazioni descritte sopra.

La versione 0.1.0dev non supporta ancora la gestione dell'aggiunta di nuovi elementi (ammettiamolo... probabilmente sarebbe la modifica più interessante... date tempo al tempo!) così come non c'è un effettivo controllo dei permessi (perché mostrare un link "modifica" se l'utente non ha effettivamente il permesso di farlo?), ma ha offerto comunque interessanti spunti per fare riflessioni...

Innanzi tutto l'elemento corrente delle briciole di pane non ha nessuna funzionalità avanzata. Se si vuole modificare il contenuto corrente Plone offre già un apposito comando.

Per quali contenuti poi mostrare la voce "Contenti" per visualizzare i contenuti della cartella?

In un primo momento verrebbe da pensare tutti. Ovviamente tutti gli elementi della pathbar tranne l'ultimo sono sicuramente contenitori. Ad ogni modo ci sono casi in cui il contenitore è stato scritto per non sembrare tale... L'unico esempio vivente che ho visto usare questa funzionalità è l'oggetto PoiIssue del gestore di segnalazioni Poi.

Gli oggetti di questo tipo utilizzano l'interfaccia INonStructuralFolder. L'uso di questa interfaccia viene utilizzato da Plone per capire se la cartella deve in effetti sembrare una cartella agli occhi dell'utente (deve avere una scheda per visualizzare i contenuti?).
Martin Aspeli ha scritto un vecchio tutorial ancora valido a riguardo.

La scelta è stata quindi quella di non mostrare il comando di visione dei contenuti per i contenuti INonStructuralFolder.

Conclusione

Il prodotto non è completo, forse migliorabile (di certo per quanto riguarda l'interfaccia mostrata) e probabilmente qualche altra buona funzionalità potrebbe essere implementata.

La scelta di usare un namespace di secondo livello speedupui nasce da un fatto preciso: ci sono altri "pezzi" del puzzle Plone che possono mostrare funzionalità aggiuntive che permettano di ridurre i caricamenti...

Un esempio?
Il navigatore...