Virgolamobile

Ad incazzarsi per un nonnulla basta un niente, neppure serve impegnare quell’oncia di acido che ti balla nello stomaco che, poco a poco, scava la tua prima ulcera.
La seconda arriva entro e non oltre i trent’anni.

LIVE! ogni mattina dal lunedì al venerdì: sputi, pugni e graffi su tastiera e monitor, in diretta dalla mia scrivania in ufficio.

Vivo nell’irrequietudine della prima pagina di un giornale di provincia, schivo in punta di penna le grazie dei caratteri e m’insudicio le mani nel nero dell’inchiostro ancora fresco di stampa; più il titolo è allarmistico, più macchia.

In una settimana mi son goduto i piaceri dell’emergenza ritardi aerei, ho dato sfogo ai miei sensi (olfatto e vista in primis) schivando le montagne di merda vissute nell’emergenza spazzatura di Napoli ed ora, mezzo veneto e mezzo friulano, ma con un piacevole retrogusto piemontese, sguazzo tragli allagamenti dell’emergenza maltempo nel nord-est.

Da queste parti, nonostante tutto, l’emergenza puttane non viene mai.

Siamo a Napoli.

Avete presente la spazzatura incendiata, i motorini con due o più persone a bordo e senza casco, la guida fantasiosa degli automobilisti e molto altro?

Non ci credevo ed infatti non è vero per niente.
E semplicemente molto peggio.

Domattina passano a prendermi e si va a Venezia, aeroporto. Poi, scioperi permettendo, si fa un salto a Napoli nel tentativo di convincere un certo consorzio che il nostro Grande Grosso e Cazzutissimo Progetto è esattamente quello che loro hanno atteso per tutti questi anni.

Se non mi fregano la macchina fotografica prima vi porto un po’ di foto della crisi spazzatura in meridione.

E domenica ed anche oggi (come ieri) ho fatto un salto di qualche decina di ore in ufficio.

I nodi giungono al pettine.

Finalmente il Grande E Cazzuto Progetto al quale sto lavorando da mesi inizia a mostrare i lati migliori di sé, il codice è domato e scalpita soltanto quando.. uh.. scrivo palesi cazzate.

Martedì si parte per Napoli e mercoledì si apre la caccia al potenziale Grosso Grande e Granoso cliente.
Se va in porto mi faccio l’elicottero aziendale.

Pare proprio che Netlog (formerly Facebox) abbia da poco superato il milione di utenti.
A cosa stavamo pensando quando abbiamo lavorato sulla fu Rebirth.it e quando fondammo l’ancora attiva Wellage.net?
Vero, erano anche tempi diversi, il budjet a disposizione molto basso e il nostro business model troppo incerto.

Netlog ora deve “soltanto” fare i conti col modello di Kano.

Un buon punto di partenza nella costruzione del nostro menù è quello di usare DOM per attraversare l’intero nodo id="navbar" e salvarlo in un’adeguata struttura dati.
Ma quale?

Le più scontate sono:

• Array
• Object

La scelta cade facilmente sugli oggetti.

Ora non mi pare il caso di fare una lezione su Javascript Object Oriented, quindi non andrò a spiegare cosa sono oggetti, metodi, proprietà o prototipi: ci sono tante belle guide che spiegano chi, come, dove, quando e perché.

A questo punto mi pare cosa sana e giusta aprire una parentesi su JSON.
La trasformazione di un oggetto nella sua rappresentazione JSON è cosa da poco. Volendo estendere il sistema e sporcarlo con AJAX ci troveremo già con una struttura pronta per essere inviata al server ed elaborata in asincrono.

Un tipico esempio di JSON è il seguente:

 {
    "firstName": "John",
    "lastName": "Smith",
    "address": {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": 10021
    },
    "phoneNumbers": [
        "212 732-1234",
        "646 123-4567"
    ]
 }

Dalla notazione letterale JSON è possibile riottenere un oggetto Javascript con un semplice Object = eval(String):

 var o = eval("(" + string + ")");

Il mio coinquilino Sasha paga l’affitto della sua stanza e dorme altrove lasciando dunque libero e tutto per me il secondo piano di questa casa.

Sasha è il coinquilino ideale perché non c’è mai.

Oggi, dopo un mese che non lo vedevo, ha portato tre ragazze di Singapore a dormire per una notte nella stanza accanto alla mia, poi se n’è andato. Sono basse, molto basse, e una delle tre si chiama Tin-tin-nio o qualcosa del genere.

Io, che sono esterofilo solo quando sono alte e bionde, per sicurezza ho dato un paio di mandate alla mia porta.

Ok, sono quasi le tre, ma ho un po’ di idee in mente.
Se salvo un paio di schizzi su un file nel desktop è come averlo già perso, qui diventa obbligo morale concludere il progettino.
Ho cercato in giro una soluzione che mi accontentasse, ma tra le decine di progetti seri e decenti solamente un paio meritavano di essere notati. Uno costa parecchio, l’altro rientra nelle YUI (Yahoo User Interfaces) ed è fuori scala.

Dev’essere semplice,
che contenga al più una lista di elementi o un nodo al cui interno sono già inseriti gli elementi del menù dropdown. Nel caso più semplice deve essere tollerata la lista pura <ul>...</ul> e nel caso più complesso devono essere tollerati N sottolivelli.

E’ necessario considerare gli elementi interni ed esterni
al blocco che contiene il menù e non dev’essere modificato il loro stile, nè tantomeno va forzato il position, il display o il float del blocco del menù cosicché non collassino eventuali elementi esterni.

La semantica in primo luogo,
altrimenti lo scopo del progetto va a farsi benedire. Tra l’altro che senso ha avere liste annidate N volte se si costringe uno screen reader ad affrontarsi nodi e nodi di DOM?

Una volta stabilita la semantica
più adatta a supportare tale progetto il codice non si tocca più e tutte le modifiche vengono fatte a caldo via DOM.

Il menù dev’essere avviato non appena disponibile
senza dunque essere legati all’evento window.onload.

I fogli di stile devono essere separati
in core (che si occupano di gestire i posizionamenti dei sottolivelli, le visualizzazioni nonché i vari float) e in style (ovvero l’aspetto estetico dei livelli e dei sottolivelli, dai colori ai caratteri, dai padding alla dimensione dei blocchi).

Un sottolivello non è necessariamente una lista,
ma può benissimo contenere immagini, object o altro. Un sottolivello è un blocco, poi sta all’implementatore decidere come utilizzarlo.
Se un sottolivello ha determinate caratteristiche (palesi sotto-sottolivelli) il clientscript si deve occupare di trattare anche lui alla stregua di un parent.

Se la tecnologia degrada (#1)
il sistema degrada armoniosamente. Il che significa che, trattandosi di xhtml si deve prevedere la mancanza di css e di js o di un parziale e potenzialmente dannoso supporto degli stessi.
Javascript, tra l’altro, deve essere di supporto a CSS per gestire DOM laddove CSS3 non è disponibile e per forzare il cross-browser.

Se la tecnologia degrada (#2)
si deve fare il possibile per mantenere gradevole l’aspetto estetico del menù.
Se Javascript esplode c’è ancora CSS.
Se CSS esplode siamo cagati.

Deve girare ovunque,
anche sul mio casio del ‘78. E deve funzionare anche su AMAYA.

Appena ho un po’ di tempo trasformo queste idee in qualcosa di funzionale.
Se qualcuno di voi “del giro” ha idee e suggerimenti da aggiungere non faccia il timido.

Un primo banalissimo esempio di xhtml è il seguente e voglio portare la vostra attenzione sul fatto che i sottolivelli sono blocchi a parte. Notate l’utilizzo degli header e delle ancore per distinguere il menù principale da quelli minori e dedicati ad una sottocategoria.

    <div id="navbar">

      <h2>Menu</h2>
      <div id="mainmenu">

        <h3>Main menu</h3>
        <ul>
          <li><a href="#verdura">Verdura</a></li>
          <li><a href="#pasta">Pasta</a></li>
          <li><a href="#pane">Pane</a></li>
          <li><a href="http://www.playboy.com">Playboy</a></li>
        </ul>
      </div>

      <div id="verdura">

        <h4>Verdure</h4>
        <ul>
          <li><a href="#">Insalata</a></li>
          <li><a href="#">Pomodori</a></li>
          <li><a href="#">Zucchine</a></li>
          <li><a href="#">Cavolfiore</a></li>
        </ul>
      </div>

      <div id="pasta">

        <h4>Pasta</h4>
        <ul>
          <li><a href="#">Tortiglioni</a></li>
          <li><a href="#">Pennette</a></li>
          <li><a href="#">Cellentani</a></li>
          <li><a href="#">Spaghetti</a></li>
        </ul>
      </div>

      <div id="pane">

        <h4>Pane</h4>
        <ul>
          <li><a href="#">Zoccolette</a></li>
          <li><a href="#">Tartarughe</a></li>
          <li><a href="#">Baguette</a></li>
        </ul>
      </div>

    </div>

Sono poche le cose che superano la capacità di pormi in uno stato di insofferenza, intolleranza e fastidio come il mettermi fretta quando programmo.