IO.SDK — 🇺🇦

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

Indice dei contenuti

Classi e stili
★ Codici HTML utili
Cassetti espandibili
Note
Lettore multimediale
Appoggio file multimediali [MEDIA]
Indice dei contenuti manuale
Gestione recensioni (in lettura, in pausa, ecc.)
Collegare un link a JQuery Colorbox
Footnote
Linee guida generali

Classi e stili

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

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 — forzano sempre automaticamente il word wrap, spezzando codice che magari nelle intenzioni di chi lo ha pubblicato doveva apparire su un'unica riga.

antiquato

Vedi cassetti espandibili.

appendi_lista

Classe da utilizzare per "avvicinare" una nuova lista a una precedente, in modo che tutte le voci appaiano uniformi. Può essere utile nel caso fosse necessario creare una divisone (ad esempio col "leggi tutto"), oppure per assegnare una differente visibilità a una delle due (farla apparire soltanto agli amministratori, ecc).

Va applicata unicamente alla seconda lista (e ad altre eventualmente successive).

Nota

Non sempre è necessaria. Per esempio all'interno dei cassettini le voci di due liste differenti sono allineate correttamente; quindi usalo quando necessario (nell'indice a inizio articolo, per esempio).

Esempio di liste normali:

Questa è la prima voce della prima lista
Questa è la seconda voce della prima lista

Questa è la prima voce della seconda lista
Questa è la seconda voce della seconda lista

Esempio con la classe appendi_lista:

Questa è la prima voce della prima lista
Questa è la seconda voce della prima lista

Questa è la prima voce della seconda lista
Questa è la seconda voce della seconda lista

blinking_cursor

blinking_cursor riduce la distanza verticale della piccola immagine col medesimo nome che utilizzo come cursore lampeggiante quando voglio inserire una sorta di testo da computer anni '80. È necessario assegnarla (unicamente) al paragrafo che precede il cursore (in questo caso "OK").

Esempio:

?SYNTAX ERROR
OK

censura

censura permette di censurare parole o frasi in modo che diventino evidenti soltanto passandoci sopra il mouse.

centro / centrato

centrato permette di centrare velocemente un testo.

come in questo caso.

compact

compact va usato solo nei blocchi di tipo TAB per ridurre lo spazio tra le linguette.

Questo è un blocco TAB standard.

-vuoto-

Questo è un blocco TAB con classe compact.

-vuoto-

L'avevo utilizzato in una precedente versione della mia Tolkien-libreria.

dead_link

dead_link viene utilizzato quando un sito linkato all'interno di un articolo non è più raggiungibile.

Esempio:

Questo sito web non esiste più.

dialogo

dialogo consente di trasformare una comune lista in una sorta di dialogo tra personaggi:²

Questa è una semplice lista di tre elementi
In effetti appare proprio
Come una normalissima lista

Io invece sono una lista
formattata con la classe dialogo
Non sono molto più figa?

Qui c'è un esempio.

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>

indent / noindent

indent crea una indentazione di 25 pixel nella prima riga di un paragrafo. Quando si vuole che tutti i paragrafi di un articolo siano indentati, come nel caso dell'articolo sul primo capitolo della Compagnia dell'Anello, è più veloce inserire .entry-content { text-indent: 25px; } nel campo Extra CSS.

noindent rimuove l'indentazione, specialmente nel caso in cui sia stata impostata nel campo Extra CSS.

indice / nascondi / nascosto

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).

nascosto nasconde un elemento ovunque.

light / verylight

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

La classe verylight inserisce una trasparenza del 15% a un elemento.

lista_figa

Rende esteticamente accattivante una lista numerata.

Ciao, io sono una lista…
… nella quale ogni voce…
… ha un numerino colorato.

Spesso conviene abbinarlo alla classe lista_larga.

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.

maiuscoletto

Formatta il Testo in Maiuscoletto.

margine_ridotto

Riduce di 15px il margine superiore di un elemento. Lo utilizzo principalmente sui titoli interni dei cassetti delle recensioni (come "ulteriori record" o "obiettivi degni di nota").

mistero

Aggiungi la classe a un qualsiasi paragrafo vuoto (mettici almeno uno spazio, perché nei cassettini i paragrafi vuoti vengono nascosti) per creare un terrificante ammonimento di Nosferatu:

nopadding

Finora ho utilizzato questa classe prevalentemente per l'elemento TAB. Rimuove il padding e i bordi sinistro e destro all'interno del DIV, in modo che le immagini possano mantenere la dimensione standard di 666/730 pixel³ (così non si sputtana il watermark), e non sono costretto a modificarle.

Esempio di TAB normale:

Esempio di TAB con classe nopadding:

piccolo / medio / grande

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

piccolo	0.8em
medio	1.2em
grande	1.5em

segreto

La classe segreto serve a nascondere un link all'interno del testo. Non viene mostrato sottolineato e il suo colore è molto vicino a quello del testo normale. È è possibile identificarlo osservando il cambiamento del cursore quando il mouse gli passa sopra.

Sintassi:

<span class="segreto">LINK</span>

Questo è un esempio di un link nascosto.

sticky

La classe sticky permette di bloccare un elemento in cima alla pagina quando si scrolla in basso. Inserendola all'interno di un contenitore, per esempio un <div>, questa rimarrà confinata all'interno.

Esempio:

Ciao!

Da questo momento Spok rimarrà in cima alla pagina fino al termine di questo cassetto.

zoom

La classe zoom consente di applicare un simpatico effetto zoom sulle immagini (generalmente associate a un link):

Ciao!

Classi Tabelle

Di default il testo all'interno delle tabelle è allineato a sinistra ma è possibile assegnare una di queste classi speciali al campo "Avanzate" > "Classe/i CSS aggiuntiva/e" per modificare questo comportamento:

tabella_sx	Allineamento a sx (default)
tabella_c	Allineamento al centro
tabella_dx	Allineamento a destra

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_tag	Evidenzia la punteggiatura.
col_cmd	Evidenzia i comandi.
col_par	Evidenzia i parametri o, in corsivo, le classi.
col_val	Evidenzia 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

★ Codici HTML utili

Simboli

⌘	⌥ ⌃
☆	&star;
★	&starf;
’	’ ⁴
«	«
»	»
←	←
→	→
↑	↑
↓	↓
↔	↔
↵	&crarr;
▪	▪
•	•
¹	¹
²	²
³	³
©	©
®	®
™	™
€	€
±	±
♥	&hearts;
♦	&diams;
♣	&clubs;
♠	&spades;

Punteggiatura

’	’	per quando l’apice normale da fastidio ai DB
“	“
”	”	“virgolette finali alte”
„	&bdquo;	“virgolette finali basse„
«	«
»	»
<	<
>	>
[	[
]	]

Simboli senza codice (fai copia e incolla)

⇧	⁕	♪	♫	♬	⭑	⭒
➀	➁	➂	➃	➄	➅	➆	➇	➈	➉
➊	➋	➌	➍	➎	➏	➐	➑	➒	➓

Codici HTML standard.

Simboli Unicode.

Awesome fonts.

Altri simboli geometrici utili.

Torna al menu

Cassetti espandibili

Quando è necessario inserire un cassetto espandibile, puoi utilizzare il blocco Dettagli di Gutenberg:

Ciao, io sono un cassetto espandibile

Come me (aprimi)…

Alcuni cassetti possono apparire automaticamente aperti

Chiudi, che tira aria! :)

… e me

All'interno di un cassetto espandibile si può inserire qualsiasi blocco di Guternberg. Io, per esempio, sono un paragrafo.

Al mio interno si possono inserire altri cassetti

E così via…

Ciao bella gioia!

… l'uno dentro l'altro…

Ciao cipollino!

… all'infinito

Ciao ciao!

Non è necessario configurare niente, semplicemente scegliere il titolo e se deve apparire aperto o no. Possono essere assegnate eventuali classi.

Gestione manuale (codice HTML)

Se è necessario formattare in modo particolare il titolo (come nelle pagine dei Libri e dei Videogiochi, è necessario creare il blocco in HTML, nel seguente modo:

<details id="eventuale ID">
<summary>titolo con eventuali tag HTML</summary>
Contenuto del cassetto
</details>

È inoltre possibile separare le righe prima e dopo Contenuto del cassetto in modo da poter continuare a utilizzare i blocchi di Gutenberg come contenuto:

<details id="eventuale ID">
<summary>titolo con eventuali tag HTML</summary>

Blocchi di Gutenberg

</details>

Nel caso sia necessario un secondo campo allineato a destra, si può ricorrere a uno span con classe dx (o destra, o alignright):

<details>
<summary>Titolo<span class="dx">Scritta a destra</span></summary>
Contenuto del cassetto
</details>

Questo è il risultato:

TitoloScritta a destra

Contenuto del cassetto

Per inserire una nota all'interno di un cassetto manuale (per esempio nelle recensioni di libri e videogiochi), puoi usare il seguente formato:

<!-- wp:details {"summary":"Nota","className":"info"} -->
<details class="wp-block-details info"><summary>Nota</summary><!-- wp:paragraph -->
<p>TESTO</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

Info

Utilizza la classe info per realizzare un cassettino (solitamente chiuso) contenente informazioni utili.

Istruzioni per la navigazione

All'interno di questo cassetto si potranno trovare informazioni utili e tutorial.

Domande e risposte

Utilizza la classe domanda per realizzare un cassettino (solitamente chiuso) contenente domande e risposte.

Qual è il colmo di un pittore?

Avere quadri che non contano e conti che non quadrano.

Aggiornamento

Gli aggiornamenti all'interno del sito vanno inseriti con un cassetto espandibile aperto con classe aggiornamento, e con la seguente formattazione del titolo:

Aggiornamento: 15 Aprile 2023

Contenuto della nota, che può contenere blocchi ed essere aperta o chiusa, a seconda dell'esigenza.

È sempre buona norma precederlo con un blocco di tipo Ancora chiamato "aggiornamento". Nel caso ce ne sia più di uno, denominare i successivi con "aggiornamento-2", "aggiornamento-3" e così via.

Importante

Il cassettino con classe importante ha i medesimi colori di aggiornamento, ma mostra una stellina al posto dell'orologio:

Aggiornamento: 15 Aprile 2023

Contenuto della nota, che può contenere blocchi ed essere aperta o chiusa, a seconda dell'esigenza.

Alert

Utilizza la classe alert per realizzare un cassettino (solitamente chiuso) contenente comunicazioni importanti.

Attenzione spoiler

Questa sezione potrebbe contenere informazioni di estrema importanza, come warning o spoiler.

Articolo antiquato

Ci sono articoli che col tempo sono diventati inutili, oppure sono stati sostituiti da altri più recenti. Se non li ho eliminati è perché contengono ancora informazioni degne di nota.

Per marchiare un post come "antiquato" è sufficiente inserire un cassetto (aperto) con classe antiquato:

Articolo antiquato

Questo articolo è superato. Molto probabilmente è stato sostituito da uno più recente o completamente abbandonato perché non più valido. Ho deciso di tenerlo perché contiene informazioni che ritengo comunque interessanti.⁵

Verrà inoltre creato un bordino tratteggiato intorno all'intero articolo, come mostrato da questo paragrafo.

Nota

Per realizzare questo effetto, senza dover impazzire modificando mezzo WordPress, ho utilizzato una funzione CSS nuovissima: :has
Potrebbe non funzionare su browser meno recenti o in versione mobile.

Cassetti colorati

Aggiungendo le classi rossa/rosso, gialla/giallo, verde, blu, è possibile colorare i cassetti:

Titolo cassetto rosso

Testo del contenuto con classe rossa o rosso. Link rosso.⁶

Titolo cassetto giallo

Testo del contenuto con classe gialla o giallo. Link giallo.⁷

Titolo cassetto verde

Testo del contenuto con classe verde. Link verde.⁸

Titolo cassetto blu

Testo del contenuto con classe blu. Link blu.⁹

Nota

Nel caso in cui devi inserire un cassetto normale dentro uno speciale, utilizza la classe forza, in modo che mantenga tutti i suoi colori originali (mi ero rotto il cazzo col CSS e non avevo voglia di impazzire per rendere tutto automatico… e poi quante volte avrò bisogno di effettuare questa combinazione?).

Torna al menu

Note

Nota

Le note sono molto limitate perché possono essere composte da un solo paragrafo.¹⁰ Per questo motivo, nel caso di testo più complesso, è meglio utilizzare i cassetti espandibili. Le lascio comunque perché non si sa mai; ma nel dubbio con i cassetti non si sbaglia mai.

Per trasformare un paragrafo in una nota (che di default è marroncina) è sufficiente utilizzare la classe nota.

Ciao, io sono una nota. Questo è un link.¹¹

Ma aggiungendo anche la classe grigia/grigio, rossa/rosso, gialla/giallo, verde, blu (mantenendo comunque nota e separandole con uno spazio), è possibile colorarla:

Testo del contenuto con classe rossa o rosso. Link rosso.¹²

Testo del contenuto con classe rossa o rosso. Link rosso.¹³

Testo del contenuto con classe rossa o rosso. Link rosso.¹⁴

Testo del contenuto con classe rossa o rosso. Link rosso.¹⁵

Testo del contenuto con classe grigia o grigio. Link grigio.¹⁶

Il colore dei link contenuti si adatterà automaticamente.

Torna al menu

Lettore multimediale

Per inserire un lettore multimediale minimo WP mette a disposizione il blocco "audio". Sfortunatamente è poco configurabile e, per esempio, non si può disattivare l'opzione per il download (potrebbe causare qualche grana di carattere legale).

È pertanto preferibile inserire il seguente HTML personalizzato:

<!-- player multimediale -->
<figure class="wp-block-audio"><audio autoplay src="URL_FILE" controls controlslist="nodownload"></audio><figcaption>ARTISTA_E_NOME_BRANO</figcaption></figure>

Se vuoi evitare l'autostart, rimuovi il parametro autoplay.

Esempio:

Kelly Clarkson – Silent night

Torna al menu

Appoggio file multimediali [MEDIA]

Quando inserisci file multimediali da linkare al sito, oppure materiale temporaneo di appoggio, l'URL da linkare esternamente è

https://www.lemonskin.net/io/[MEDIA]/[cartella]/[file]

[cartella] può essere [files], [immagini], video¹⁷, ecc…

Torna al menu

Indice dei contenuti manuale

Solitamente, per inserire all'interno di un articolo un indice dei contenuti, è sufficiente utilizzare l'apposito blocco di WordPress (chiamato Publishpress). Però, siccome questo include automaticamente tutti i titoli, anche quelli minori come gli H3 degli aggiornamenti (che il più delle volte vanno ignorati), a volte è necessario crearne uno manuale.

Inserisci un titolo H2 denominato "Indice" e un semplice elenco (una lista, insomma) e aggiungi gli anchor delle sezioni a mano.

Infine assegna a entrambi i blocchi la classe indice, in modo che non appaiano nella home (o nelle ricerche).

Torna al menu

Gestione recensioni

Le recensioni possono avere quattro stati: nascoste, in lettura, in pausa e attive. È sufficiente assegnare rispettivamente le classi OFF, lettura e pausa per impostarle. Quelle attive non necessitano di alcuna classe aggiuntiva.

Recensione normale

1.Questo è un esempio

Proverbio Cinese

20-12-1972

In tre occasioni l'uomo rivela la sua natura: quando la sua mente cede all'ira, quando il suo corpo è piegato dal vino e quando deve mettere mano alla borsa.

Ci vogliono venti anni a una donna per fare del proprio figlio un uomo, e venti minuti a un'altra donna per farne un idiota. – Charles Dickens

<details class="recensione"> ...

In lettura

2.Questo è un esempio

Seneca

Continua ciò che hai cominciato e forse arriverai alla cima, o almeno arriverai in alto ad un punto che tu solo comprenderai non essere la cima.

Con la classe lettura vengono nascoste la data di fine lettura (ovviamente) e il giudizio. Se c'è una citazione, verrà mostrata.

<details class="recensione lettura"> ...

In pausa

3.Questo è un esempio

Steve Jobs

Quasi tutto — le aspettative degli altri, l'orgoglio, la paura di imbarazzo o di un fallimento — semplicemente svanisce di fronte all'idea della morte, lasciando soltanto ciò che è davvero importante. Ricordarsi che dobbiamo morire è il modo migliore per evitare la trappola di pensare di avere qualcosa da perdere. Siete già nudi, non c'è alcuna ragione per non seguire il vostro cuore. – Steve Jobs

Anche con la classe lettura vengono nascoste la data di fine lettura e il giudizio. Se c'è una citazione, verrà mostrata.

<details class="recensione pausa"> ...

Nascosta

Quando una recensione è nascosta, naturalmente non sarà visibile.

<details class="recensione OFF"> ...

Riletto / Rigiocato / Platinato

Per inserire l'iconcina Riletto / Rigiocato / Platinato nelle recensioni di libri e videogiochi, valorizza lo <span> del titolo con le seguenti classi:

r = Riletto / Rigiocato

p = Platinato / Rigiocato

rp o pr = Riletto / Rigiocato e Platinato

Torna al menu

Collegare un link a JQuery Colorbox

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 aggiungere la classe colorbox-off al tag <img> e, naturalmente includere in <a> il parametro:

target="_blank"

Il trucchetto funziona pure con i 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">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 testo¹⁹ 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.²⁰
Se invece c'è una virgola²¹, mettilo prima.

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. :)

Se hai bisogno di una funzione (javascript) che copi nella clipboard il contenuto di un campo, utilizza CopiaClip().

Torna al menu

⇧	⁕	♪	♫	♬	⭑	⭒
➀	➁	➂	➃	➄	➅	➆	➇	➈	➉
➊	➋	➌	➍	➎	➏	➐	➑	➒	➓

⇧	⁕	♪	♫	♬	⭑	⭒
➀	➁	➂	➃	➄	➅	➆	➇	➈	➉
➊	➋	➌	➍	➎	➏	➐	➑	➒	➓

Indice dei contenuti

Classi e stili

Sintassi

Sintassi:

Esempio:

esempio

★ Codici HTML utili

Cassetti espandibili

Info

Domande e risposte

Aggiornamento

Importante

Alert

Articolo antiquato

Cassetti colorati

Note

Lettore multimediale

Appoggio file multimediali [MEDIA]

Indice dei contenuti manuale

Gestione recensioni

Recensione normale

In lettura

In pausa

Nascosta

Riletto / Rigiocato / Platinato

Collegare un link a JQuery Colorbox

Footnote

Linee guida generali

Articoli correlati:

Lascia un commento Annulla risposta

⇧	⁕	♪	♫	♬	⭑	⭒
➀	➁	➂	➃	➄	➅	➆	➇	➈	➉
➊	➋	➌	➍	➎	➏	➐	➑	➒	➓