"Pullquotes" automàtics i millorats

Publication date: 09/23/2006
Categories: Receptes, Disseny web, Català

A 456 Berea Street veig que en Roger Johansson ha ideat un sistema per crear "pullquotes" automàticament. No sé com es traduïria al català però un "pullquote" és el típic text destacat que veiem a les revistes i que cita una breu frase de l'article en qüestió.

Tant a la premsa escrita com al web els "pullquotes" són molt útils per cridar l'atenció del lector i l'ajuden a quedar-se amb les idees més importants del text encara que no se'l llegeixi detingudament.

Possibles millores

Tant la versió d'en Roger com la meva es basen en la mateixa idea: només cal marcar el troç de text que es vol destacar i al carregar-se la pàgina automàticament es crearà al seu costat un bloc amb el text engrandit. A més, com que l'estil es modifica a través de classes CSS és molt fàcil canviar l'aparença final.

Tot i així he trobat a faltar un parell de coses a la versió d'en Roger:

El contingut no és gaire semàntic. Com que el text citat utilitza l'etiqueta span, si l'usuari no té el javascript activat o si ens visita el crawler d'un buscador no tindran forma de saber si hi ha cap text destacat.
Es pot millorar la versió web. Passa sovint (almenys a mi) que després de llegir un d'aquests "pullquotes" es vol seguir llegint el text que el segueix. A la versió impresa has de repassar el text en busca de la cita en qüestió però al web podem aprofitar l'interactivitat que ens ofereix i destacar el text citat al passar el ratolí per sobre el "pullquote".

Implementació

Encara que aquest article ja serveix d'exemple per veure com queden aquestes dues millores. He creat una pàgina d'exemple dels "pullquotes" automàtics on el codi queda més recollit.

Deixo els detalls de l'implementació sense explicar però crec que la pròpia pàgina d'exemple ja serveix de guia per si ho vols posar al teu web.

7 comments

Tas

09/24/2006 | #

Molt interessant tiu! Et robo el JS :P

Funciona amb Safari, sene problemes...

Perque no fem una cafe un dia tiu?

Una abraçada!
Aaron Roberson

09/26/2006 | #

Could you translate this into English?
Francesc Rosàs

09/27/2006 | #

Aaron, I'm a bit lazy but you can try an automatic translation of this article or check the list of changes I've made at Roger's blog.

If this is not enough and you are really interested I can try to translate it, though.
Aaron Roberson

09/27/2006 | #

The translation worked just fine, but I was suprised that you didn't explain what you did to make the source text highlight.

I saw in your source code that you are using the prototype framework on the page. Do I need to include prototype for this to work? You have also used the following inline script which Roger's does not require:

Event.observe(window, 'load', function (event)
{
new PullQuoteCreator().init();
});

Also, I noted that the original text is surrounded with strong tags with a class of "PullQuoteSource" and the Javascript changes it to "PullQuoteSource PullQuoteSourceCited".

Please explain :)

but I was suprised that you didn't explain what you did to make the source text highlight

It was just a "concept script" to illustrate the idea. On the other hand it's true I didn't explain anything about how to use it so here I go:

Requirements

Prototype library is needed to run this implementation (for its event and class names handling functions).

Use and configuration

To create pullquotes automatically you mark the piece of HTML you want to quote with an specific class name and then you run some javascript that creates pullquotes from this marked HTML. Example of HTML code:

As the saying goes, an example is worth more than a thousand words.

The javascript code that does everything is somehow encapsulated inside the PullQuoteCreator class. To create pullquotes you need to instantiate the class, change some of its parameters (if you want, more on it later) and execute its init() method. For example:

var pullQuoteCreator = new PullQuoteCreator();

pullQuoteCreator.init();

All this has to be done once the page is loaded (usually when browser throws the "onload" event). You can use prototype Event.observe() function or addEvent() function Roger uses (you can't use DOM methods because IE handles events in its own non-standard way). You can call it directly at the end of the page, too. So, continuing the previous example you can put the following code in you <head>:

Event.observe(window, 'load', function (event)

{
    var pullQuoteCreator = new PullQuoteCreator();

    pullQuoteCreator.init();

});

This way, once the page is loaded, pullquotes (<q class="PullQuote">...</q>) will appear next to its sources. Also, a new class name (PullQuoteSourceCited) will be added to pull quotes source elements in order you can re-style it using CSS. Example:

<q class="PullQuote">an example is worth more than a thousand words</q>As the saying goes, an example is worth more than a thousand words.

All you have to do now is to apply CSS styles your new classes:

/*

 * Pullquote

 */

    q.PullQuote

    {

        clear: right;

        float: right;

        width: 35%;

        margin: 0 0 1em 1em;

        font: italic 18px/1.3em;

        color: #222;

        border-width: 1px 0;

        border-style: solid;

        border-color: #e8e7d0;

        padding: 10px 20px;

    }

    /*

     * Remove automatically added quotes

     */

    q.PullQuote:before,

    q.PullQuote:after

    {

        content: "";

    }

    /*

     * Capitalize first letter

     */

    q.PullQuote:first-letter

    {

        text-transform: uppercase;

    }

/*

 * Pullquote source

 */


    .PullQuoteSource

    {

    }

    /*

     * This class will be added to our pullquote source

     * when javascript can be executed and our pullquotes

     * are created.

     *

     * This is useful to un-style the source (so

     * its pullquote gets all attention from user even if

     * our source is marked as an em, strong or

     * whathever).

     */

    strong.PullQuoteSourceCited

    {

        font-weight: normal;

    }

    em.PullQuoteSourceCited

    {

        font-style: normal;

    }

    /*

     * This class will be added to our pullquote source

     * when mouse "hovers" over its associated pullquote.

     */

    .PullQuoteSourceHighlight

    {

        background: #fff373;

    }

You can also rename these class names by changing it before calling init() method. For example:

var pullQuoteCreator = new PullQuoteCreator();

pullQuoteCreator.pqClassName = 'pullquote';

pullQuoteCreator.pqSourceClassName = 'pullquote_original';

pullQuoteCreator.pqSourceHighlightClassName = 'pullquote_original_outstanding';

pullQuoteCreator.pqSourceCitedClassName = 'pullquote_original_unstyle';

pullQuoteCreator.init();

Well, I hope I've been clear enough :-)

Note: I've changed the original code replacing the <blockquote> by a <q> as I see <blockquote> is not valid inside a .

Raimon

11/08/2006 | #

Ei! genial Francesc! ho he publicat a la versió digital d'una revista d'una escola....

Exemple: http://www.jverdaguer.org/index.php?option=com_content&task=view&id=159

No ho he provat amb IE..... espero que bé!

Fins ara!

PD
si et vas deixar caure per Artfutura pot ser vens a la retrospectiva dels curts de Pixar ;)
Francesc Rosàs

11/08/2006 | #

L'IE ho mostra estupendament. Si em permets un consell posa el text citat dins d'un en comptes d'un per remarcar-lo (tant semànticament com visualment quan l'usuari no tingui el javascript activat).

I on dius que fan aquesta retrospectiva? Tinc una amiga que m'hi acompanyaria encantada.

PD: No sé perquè però la URL apareix amb un ";" al mig tot i que a la base de dades no hi és. Segur que és un bug al Rails ;-) Ja miraré de solucionar-ho més tard.

Comment this post

Fields marked with * are required.

frosas.net