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.


Cassetti espandibili (Collapseomatic)

[expand title="Intestazione" notitle="true"]
  testo
  [expandsub1 title="Livello_1" notitle="true"]
    testo
    [expandsub2 title="Livello_2" notitle="true"]
      testo
    [/expandsub2]
  [/expandsub1]
[/expand]

Esempio:

Intestazione
testo
Livello 1
testo
Livello 2
testo

Tag importanti:

targclass="highlight"

Permette di definire una classe al <div> del cassetto (il contenuto).

startwrap="<strong>" endwrap="</strong>"

Testo da mettere prima e dopo il titolo, per tenere tutto più pulito.


★ Codici HTML utili

&larr;
&rarr;
&uarr;
&darr;
&harr;
&crarr;

&rsquo; ( per quando l’apice normale da fastidio ai DB )
&ldquo;
&rdquo; ( “alto )
&bdquo; ( “basso )
« &laquo;
» &raquo;
< &lt;
> &gt;
[ &#91;
] &#93;

&#9642;
&bull;
² &sup2;
³ &sup3;
© &copy;
® &reg;
&#8482;
&euro;
&hearts;
&diams;
&clubs;
&spades;
& &amp;

Simboli senza codice

★ ☆ ⭑ ⭒ ⇧ ❤ ⁕ ✴ ✿ ⚙
♪ ♫ ♬ ⚠ ✂
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉
➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓

Altri simboli geometrici utili


Collegare un link a Jquery Colorbox

<a href="url_a_immagine" class="colorbox-link-1">testo</a>

La classe colorbox-link-x 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 visualizzare una didascalia al box che si apre, ma poi apparirà anche quando si sposta il mouse sopra il link.

Il trucchetto funziona pure con pagine web e video 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">testo</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.

cboxElement è una classe che viene aggiunta in tutti gli esempi online ma non si trova una fava di documentazione, e comunque tutto funziona lo stesso anche senza. Sa il cazzo…

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

Esempio:
Questo link apre un’immagine con Jquery Colorlink. Quest’altra invece, senza la classe corretta, no.

Quando un link a un’immagine punta a una più grande, Colorlink aggiunge l’iconcina di una lente e un simpatico effetto in dissolvenza. Se l’immagine non è inclusa in un elemento con didascalia e ha un allineamento (float) a sinistra o a destra, tale iconcina non è allineata perché viene preso in considerazione il margine per tenere il testo distanziato. Per risolvere il problema aggiungere le classi _l e _r (a seconda dell’allineamento) all’anchor <a>.

Esempio simulato:

con _l
senza _l
con _l
con _l


Link a immagini senza bordo inferiore

Tutti i link hanno un bordo sottolineato quando il mouse ci passa sopra. Dal momento che tale proprietà viene definita dall’hyperlink, e questo non può sapere quale elemento sarà contenuto (e, per contro, un elemento non può modificare la proprietà di un parent), è necessario aggiungere la classe _nb a tutti i link contenenti immagini:


Senza _nb

Con _nb



Colonne di elementi centrati (ed equidistanti)

<div class="tabella">
  <div class="col_3">oggetto_1</div>
  <div class="col_3">oggetto_2</div>
  <div class="col_3">oggetto_3</div>
</div>

Numero colonne:

  <div class="col_1">una_colonna</div>
  <div class="col_2">due_colonne</div>
  <div class="col_3">tre_colonne</div>
  <div class="col_4">quattro_colonne</div>
  <div class="col_5">cinque_colonne</div>

Esempio:

relativity_spok
relativity_spok
relativity_spok


Lista a due colonne (separata da una riga)

La particolarità è che ogni riga ha una riga di separazione e il testo della colonna destra è allineato a destra.

<div class="lista">
  <div class="col_sx">Testo_1</div>
  <div class="col_dx">Testo_2</div>
</div>

Esempio:

Testo_1
Testo_2
Testo_3
Testo_4


Footnote

Quando è necessario inserire una nota si può usare la sintassi [footnote]…[/footnote] che crea un bottoncino come questo1.
Se la frase dopo deve cominciare su una nuova riga (ma non un nuovo paragrafo) è a volte necessario includere il testo precedente in un <p> particolare che rimuove il margine inferiore, perché quell’idiota di WordPress spesso ignora la successiva new line:

<p class="_b0">
 Frase con footnote[footnote]...[/footnote]
</p>


Footnote manuali

La struttura a comparsa di [footnote] è comodissima, e a volte è utile poterla emulare in modo più configurabile2.

Ecco invece come appare un footnote manuale: xxxxxxxx

Il codice:

<a data-footnote-number="___SCRITTA___" data-footnote-identifier="___NUMERO_IDENTIFICATIVO___" data-footnote-content="___CONTENUTO___" class="footnote-button semplice" href="#"><span>___LUNGHEZZA_CAMPO_CON_X___</span></a>

SCRITTA = Testo che appare sul link.

NUMERO IDENTIFICATIVO = Un qualsiasi testo alfanumerico.3

CONTENUTO = Il testo nel cassetto scorrevole. Occhio ai tag!

LUNGHEZZA CAMPO ecc. = Qui controlliamo la larghezza del bottone. Solitamente bastano tante X quanto la lunghezza di SCRITTA, ma si può andare anche a braccio.


Formattazione testo e immagini (nomi classi)

bold
thin (riduce lo spessore di un font contenuto in uno bold)

big
small

evidenza (o evidenzia, o in_evidenza)

light
midlight
verylight

rosso_link
rosso_light
blu_light

mirror → mirror (inverte specularmente un elemento)
censura → censura (“nasconde” il testo, fino al mouseover)

bordo_round (generalmente per le immagini)

a_capo:

Questa è una frase molto lunga, generalmente nei <pre> il testo non va a capo e compare uno scrollbar orizzontale (anche se, scrivendo <pre>tutta la frase su una riga</pre>, si ottiene apparentemente lo stesso effetto).
La classe a_capo forza il testo all'interno di un <pre> ad adattarsi alla larghezza della colonna e ad andare a capo.
la classe bianco forza lo sfondo di un <pre> a essere bianco.

La classe ombra (o shadow) aggiunge una lieve ombreggiatura a una immagine.


Senza ombra

Con ombra


Didascalia immagini

In linea di massima tutte le immagini si allineano correttamente la testo, quando affiancate. L’unica eccezione riguarda quelle con didascalia all’inizio di un articolo. Senza entrare troppo nei dettagli (è un vero casino) è sufficiente aggiungere la classe “allinea_top” alla classe di [caption], e tutto dovrebbe andare a posto:

[caption ... class="allinea_top"]

Le immagini con didascalia hanno un bordino automatico molto carino. Nel caso non servisse è possibile disattivarlo inserendo la classe no_bordo (o nobordo) al tag [caption]. Se invece è necessario solo il bordo sulla caption, come nel caso di una immagine scura, è possibile inserire la classe bordo (è inutile considerare il caso del bordo solo sull’immagine, non verrà mai usato):

[caption ... class="no_bordo | bordo"]

Esempio:

con bordo
Default
senza bordo
no_bordo
apple_user_black
bordo

Quando un’immagine è allineata a sinistra o a destra, è necessario ridurre il margine inferiore (che invece, in quelle centrali, va benissimo). Per fare questo bisogna utilizzare la classe side, direttamente dentro il tag [caption] (anche contemporaneamente al bordo):

[caption ... class="side"]

Esempio:

con bordo
Default
con bordo
con side
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Nel caso di un articolo di tipo immagine, la prima trovata viene ingrandita a 898 pixel. Se si vuole aggiungere una didascalia è necessario utilizzare un <div> con una classe speciale:

<div class="caption_big">testo_didascalia</div>

Su schermi superiori a 60em viene visualizzata con un bordino inferiore che arriva ai lati della pagina, su schermi inferiori (smartphone) si comporta come una didascalia classica, con gli angoli inferiori arrotondati.
Il grande vantaggio di questo elemento rispetto a una didascalia classica è che può essere separata dall’immagine (con un <!–more–> per esempio), ma non l’ho mai testata con elementi diversi dalle immagini grandi, che sono piuttosto rognose. Inoltre, per un problema di margini imprecisi, è sempre meglio lasciarla fuori dalla home).


Indici

<h3>Indice</h3>
<ul>
 <li><a href="#nome_collegamento_1">voce_1</a></li>
 <li><a href="#nome_collegamento_1">voce_2</a></li>
 <li><a href="#nome_collegamento_1">voce_3</a></li>
</ul>

Formattare i titoli delle voci in questo modo (è importante che il tag <a> venga prima del tag del titolo):

<a class="a" id="nome_collegamento_1"></a><h3>voce 1</h3>
<a class="a" id="nome_collegamento_2"></a><h4>voce 2</h4>

Notare la classe “a“: serve a gestire l’offset durante lo scrolling, per non far finire il titolo sotto al menu. Leggi qui per maggiori dettagli.

Se si vuole nascondere il menu in homepage:

<div class="hidden mostra_forzato">
  <h3>Indice</h3>
  <ul>
   <li><a href="#nome_collegamento_1">voce_1</a></li>
   <li><a href="#nome_collegamento_1">voce_2</a></li>
  </ul>
</div>

 <a id="nome_collegamento_1"></a><h3>voce 1</h3></div>

(Va bene anche usare la classe “hidden mostra_forzato” direttamente con l’UL, se non serve il titolo)

Ricordarsi di inserire il CSS (vedi Nascondere elementi in homepage).

Esempio: Vedi l’indice all’inizio di questo articolo.

Se si vuole inserire un link “torna all’inizio”:

<a class="inizio_" href="#_anchor"></a>
<hr class="hr_100">

L'<hr> non è obbligatorio, serve solo ad aggiungere un po’ di spazio sotto.

Esempio:


Link a siti esterni

Per default i link a siti esterni sono indicati da una piccola iconcina grigia (fanno eccezione YouTube e Google books).
Dal momento che gli anchor non sono in grado di sapere il tipo di elemento contenuto, nel caso di link contenenti immagini o altri oggetti è necessario aggiungere la classe no_ext:

<a href="#_anchor" class="no_ext">_immagine_</a>

Esempio:

Questo è il sito esterno di prima ma senza iconcina.

Nota: “no_ext” imposta il right margin a zero. Se, per qualsiasi motivo, è necessario avere una distanza standard (default: 8 pixel), è allora necessario utilizzare la classe no_ext_v (non chiedetemi perché “_v”, non me lo ricordo).


Liste (numeri in grassetto e separazione voci)

Per impostare i numeri o i pallini in grassetto utilizzare la seguente sintassi:

<ol class="bold">
 <li><span>voce_1</span></li>
 <li><span>voce_2</span></li>
 <li><span>voce_3</span></li>
</ol>

È importante inserire le voci all’interno di uno <span>…</span>

Esempio:

  1. voce_1
  2. voce_2
  3. voce_3

Numeri e pallini possono anche essere colorati:

<ol class="bold rosso_link">
 <li><span>voce_1</span></li>
 <li class="blu_light"><span>voce_2</span></li>
 <li style="color:green;"><span>voce_3</span></li>
</ol>

Esempio:


Inoltre lo spazio verticale tra le voci può essere aumentato (o inibito), utilizzando le classi spazio e no_spazio:

<ol class="spazio">
 <li>voce_1</li>
 <li>voce_2:
  <ul class="no_spazio">
   <li>voce_2_1</li>
   <li>voce_2_2</li>
  </ul>
 </li>
 <li>voce_3</li>
</ol>

Esempio (vedi anche il menu principale di questo articolo):

  1. voce_1
  2. voce_2:
    • voce_2_1
    • voce_2_2
  3. voce_3


Nascondere elementi in homepage

Nell’articolo inserire gli elementi in:

<div class="hidden mostra_forzato">
  elementi da nascondere
</div>

Nel campo Extra CSS (stili specifici per la pagina) dell’articolo inserire il seguente CSS:

.mostra_forzato { display: initial !important; }


Smooth scroll e offset dei link

È importante assegnare sempre la classe “a” ai target dei link anchor, per permettere il corretto scrolling ed evitare che l’inizio venga coperto dalla barra superiore del menu (sposta l’anchor di 404 pixel verso il basso):

<a class="a" id="_nome_anchor_"></a>

Nota: Fa eccezione la pagina dei libri che ho letto, in cui è necessario utilizzare la classe “l” (elle), a causa di differenti margini.


Spaziature verticali

È possibile formattare il tag <hr> in modo che visualizzi tre asterischi centrati invece che una linea:

 <hr class="as">

Può essere utilizzato anche per formare delle spaziature verticali predefinite:

<hr class="hr_25 | hr_50 | hr_100">

Esempio:

↓ hr_50 → distanza: 50px ↓

↑ hr_50 → distanza: 50px ↑

↓ hr_100 → distanza: 100px ↓

↑ hr_100 → distanza: 100px ↑


Titoli (e sottotitolo articolo)

Questi titoli vengono utilizzati all’interno degli articoli, per separare le varie sezioni.

<div class="sottotitolo">Sottotitolo articolo</div>
<h3>Titolo principale</h3>
<h4>Titolo secondario</h4>

Gli <hX> possono essere usati ovunque, il <div> con classe “sottotitolo”, invece, è meglio utilizzarlo esclusivamente all’inizio, in modo da risultare un sottotitolo vero e proprio dell’articolo (ma nulla impedisce di metterlo anche da altre parti, comunque).

Esempio:

sottotitolo

Titolo principale

Titolo secondario


Altri titoli:

Titolo h5
Titolo h6


Video youtube

Per aggiungere un video Youtube in una pagina seguire la seguente struttura:

<div class="yt">
<a href="http://www.youtube.com/embed/___CODICE___?rel=0&wmode=transparent&vq=hd720&autoplay=1" class="colorbox-link-1">___IMMAGINE___
<span class="yt_b"></span></a>
</div>

Preferibilmente è meglio che l’immagine non abbia allineamento (alignleft, alignright, aligncenter) ma, nel caso fosse necessario, utilizzare la classe “yt_a” invece di “yt”.
Il bottoncino e la gestione del mouseover vengono gestiti automaticamente.

Esempio:


Se è necessario assegnare il bottone a una immagine con didascalia, aggiungere la classe direttamente al tag [caption] (ed eliminare il contenitore <div>, che verrebbe comunque rimosso da WordPress (che non si fa mai i cazzi propri!):

[caption ... class="yt"]

… ma utilizzare yt_b1 invece di yt_b come class dello span (il bottoncino). Questo perché la riga della didascalia aumenta l’altezza del contenitore e quindi sposterebbe il bottoncino troppo in basso. Nel caso di didascalie a più righe sarà necessario inserire nuove classi yt_b2, yt_b3, ecc. con le relative altezze corrette (tag margin-top: -XXpx;) nel CSS.

mana_mana

yt_b (errato)
mana_mana

yt_b1 (corretto)


Visualizzazione codice HTML

<pre class="prettyprint">
codice
</pre>



  1. Ciao, sono un esempio!

  2. Di default crea link numerici automatici, come questo.

  3. Meglio comunque usare numeri, diciamo dal 100 in su, in modo da non entrare in conflitto con eventuali altri footnote automatici.

  4. Il valore può essere modificato in style.css, righe 16 e 17.

Aggiungi un commento

Iscriviti al blog tramite email

Inserisci il tuo indirizzo e-mail per iscriverti a questo blog, e ricevere via e-mail le notifiche di nuovi post.