IO.SDK

Questo articolo è di carattere tecnico, serve a me per ricordarmi la struttura del codice degli elementi utilizzati nel sito.
Ignoratelo pure, oppure fatevi un bel trip gratuito e molto colorato.

Indice dei contenuti

Classi e stili

Di seguito alcune classi di stili personalizzate da usare all'interno degli articoli.

light

La classe light inserisce una trasparenza del 50% a un elemento.

titolo_iniziale

Questa classe riduze a zero il margine superiore di un elemento. Generalmente viene impiegata per annullare il naturale spazio che un titolo crea dal paragrafo che lo precede.

Solitamente lo utilizzo negli articoli che cominciano con un titolo oppure se devo inserire un titolo all'interno di un cassetto espandibile:

Cassetto con all'interno un titolo normale

Ciao, io sono un titolo.

Cassetto con classe assegnata al titolo

Ciao, io sono un titolo con classe titolo_iniziale.

lista larga

Separa in modo evidente gli elementi di una lista.

  • Questa è una lista standard.
  • Tutte le voci sono vicine.
  • Ideale per un indice.
  • Questa invece è una lista con classe lista_larga.
  • Le voci sono molto più distanti. È ideale quando il testo contenuto è molto lungo, e questo crea dei paragrafi.
  • In questo modo tutto è più pulito.
indice / nascondi

Queste due classi hanno comportamenti molto simili ma opposti.

indice è utilizzata per nascondere gli indici degli articoli molto lunghi dalla home page, dalla ricerca o dagli archivi. Compariranno soltanto all'interno degli articoli.

nascondi fa l'esatto contrario: mostra qualcosa in home page, ricerca o archivi ma non all'interno degli articoli. Per esempio se è necessario inserire messaggi particolari (come nel caso di alcune pagine dinamiche).

a_capo

Viene usata prevalentemente nel testo preformattato <pre> per forzare il word wrap, perché di default non va automaticamente a capo.

Questo è un testo preformattato senza la classe a_capo. Il testo continua su un'unica riga, a meno che non sia stato inserito un invio a capo.
Questo è un testo preformattato con la classe a_capo. Il testo va a capo automaticamente quando raggiunge il limite delle dimensioni della pagina.

Nota: questo non vale per tutti i browser. I più stupidi — Safari per esempio — forza sempre automaticamente il word wrap, spezzando codice che magari nelle intenzioni di chi lo ha pubblicato doveva apparire su un'unica riga.

piccolo / medio / grande

Generalmente è meglio utilizzare la formattazione del testo di Gutenberg ma, in caso di esigenze particolari possono sono disponibili queste classi:

piccolo0.8em
medio1.2em
grande1.5em
glitch
* DANGER *

Un simpatico effetto di testo fuori sincronia che però, oltre alla classe, ha bisogno anche del parametro data-text valorizzato (solitamente con lo stesso contenuto di testo, ma non obbligatoriamente).

Sintassi

<div class="glitch" data-text="TESTO">TESTO</div>
Classi di colore per formattazione codice CSS/HTML

Ci sono quattro classi di colore per formattare il codice CSS o HTML mostrato in questo SDK, ma possono essere impiegate ovunque.

col_tagEvidenzia la punteggiatura.
col_cmdEvidenzia i comandi.
col_parEvidenzia i parametri o, in corsivo, le classi.
col_valEvidenzia i valori.

esempio

<img src="pippo.png" title="Questo è un esempio">

Quando utilizzate all'interno di un blocco di testo preformattato, si può assegnare la classe codice al <pre> e usare nomi di classe semplificati: tag, cmd, par, val.

Torna al menu

Colonne di elementi centrati (ed equidistanti)

Sintassi

<div class="col_3"> ELEMENTO </div>
<div class="col_3"> ELEMENTO </div>
<div class="col_3"> ELEMENTO </div>

Utilizza semplicemente dei <div> con classe col_1, col_2, col_3, … (se ne dovessero servire altre, aggiungile a style.css).

Naturalmente, se scegli ad esempio una classe a tre colonne, ricordati di inserirne veramente tre. :)

Torna al menu

★ Codici HTML utili

Simboli
&star;
&starf;
&larr;
&rarr;
&uarr;
&darr;
&harr;
&crarr;
&#9642;
&bull;
¹&sup1;
²&sup2;
³&sup3;
©&copy;
®&reg;
&#8482;
&euro;
± &plusmn;
&hearts;
&diams;
&clubs;
&spades;
Punteggiatura
&rsquo;per quando l’apice normale da fastidio ai DB
&ldquo;
&rdquo;“virgolette finali alte”
&bdquo;“virgolette finali basse„
«&laquo;
»&raquo;
<&lt;
>&gt;
[&#91;
]&#93;
Simboli senza codice (fai copia e incolla)

Codici HTML standard.

Altri simboli geometrici utili.

Torna al menu

Cassetti espandibili (Collapse-o-matic)

Crea due blocchi Shortcode [/] e in mezzo inserisci il testo da includere nel cassetto, utilizzando i normali blocchi:

Sintassi

[expand title="TITOLO" expanded="true/false"]

...

[/expand]

I parametri principali sono title e expanded. Se è necessario inserire della formattazione all'interno del title utilizza tag e apici singoli. expanded di default è false, quindi inseriscilo con true soltanto se vuoi che il cassetto appaia aperto.

Esistono altri parametri come trigclass e targclass, che consentono di assegnare classi rispettivamente al "bottone" principale e al contenuto.

startwrap e endwrap consentono di aggiungere testo prima e dopo il titolo, ma finora non li ho mai usati.

Per creare cassetti all'interno di altri cassetti utilizza il tag [expandedsub*]…[/expandedsub*] dove * corrisponde a un numero:

[expand title="Cassetto di primo livello" ]
  [expandsub1 title="Cassetto di secondo livello" ]
  ...
    [expandsub2 title="Cassetto di terzo livello (aperto)" expanded="true" ]
    ...
    [/expandsub2]
  [/expandsub1]
[/expand]

Esempio

Cassetto di primo livello
Cassetto di secondo livello

Cassetto di terzo livello (aperto)

Torna al menu

La classe colorbox-link-x, dove x è necessariamente un numero, trasforma automaticamente il link in una finestra Jquery Colorbox.
Se si vogliono creare gruppi di immagini basta assegnare lo stesso numero.

Aggiungendo un valore nel tag title di <a> è possibile aggiungere una didascalia al box che si apre, ma poi apparirà anche quando si sposta il mouse sopra il link.
Se, al contrario, non si vuole che un link a una immagine venga automaticamente inglobato in una finestrella colorbox (per esempio se si vuole aprirla in un nuovo tab perché di dimensioni troppo grandi), è sufficiente utilizzare la classe colorbox-off (e, naturalmente includere il parametro:

target="_blank"

Il trucchetto funziona pure con i video9Ogni tanto va anche coi siti web, ma è molto picky a riguardo, per cui eviterei. ma, nel caso di Youtube, è necessario rispettare il seguente formato:

<a href="http://www.youtube.com/embed/CODICE?rel=0&wmode=transparent&vq=hd720&autoplay=1" class="colorbox-link-1">video</a>

Dove CODICE identifica il video.
Altri formati, come ad esempio quello che si copia e incolla direttamente dal sito di Youtube, non funzionano, perché è necessario che il video sia embedded.

Il parametro rel=0 evita che alla fine della visione vengano mostrati i video suggeriti mentre wmode dovrebbe scongiurare un po' di conflitti tra Flash e lo z-index degli elementi nella pagina.

Torna al menu

Footnote

Per inserire delle note nel testo10Come questa. puoi utilizzare il bottone F³ nella barra dei blocchi. Questo inserisce un tag <mfn> … </mfn>.

In alternativa anche [footnote] … [/footnote] va bene, ma Gutenberg è un po' schizzinoso coi shortcode, per cui è preferibile il primo sistema.

Per coerenza generale utilizza sempre i footnote dopo la parola interessata, senza alcuno spazio.
Se è a conclusione di una frase, inseriscilo sempre dopo il punto.11In questo modo.
Se invece c'è una virgola12Inseriscimi qui., mettilo prima.

Torna al menu

Note

Per creare una nota è sufficiente selezionare il rosa come colore di sfondo del paragrafo:

Risultato:

Nota: Ciao, questa è una nota!

In caso di aggiornamenti è meglio utilizzare un cassetto espandibile con la seguente sintassi:

Aggiornamento: 27 Febbraio 2019

Il giorno va scritto senza lo zero iniziale, se inferiore a 10 e la prima lettera del mese va in maiuscolo.

Torna al menu

Linee guida generali

Il capolettera va messo generalmente nel primo paragrafo.
Se sta male allora meglio non metterlo.
Se sta male nel primo ma bene nel secondo allora mettilo lì.
Non si dovrebbe, ma questo blog è mio e faccio come mi pare. :)

Torna al menu

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Translate »