Liste ordinate strutturate in una pagina web

Non so se usiate le liste nidificate, cioè quelle liste in cui esistono uno o più sottolivelli. Che si tratti di elenchi o di titoli, è fondamentale che esista una certa coerenza fra i numeri ed i livelli. Se l’elenco è fatto di elementi consecutivi in generale basta cambiare l’indentatura e si capisce immediatamente. Ma se stiamo parlando di titoli di capitolo e paragrafo? Come evitare di numerare tutto a mano? come tenere conto del livello? Probabilmente sono la sola che si è posta il problema perché online non ho trovato alcuna soluzione, almeno quando ho affrontato il problema alcuni anni fa, ma probabilmente vale ancora la pena di postare i miei vecchi appunti.

Se voi usate una lista numerata, i numeri (o le lettere) proseguono ordinatamente in modo automatico

  1. primo elemento
  2. secondo elemento
  3. terzo elemento
    1. primo elemento del terzo
    2. secondo elemento del terzo
    3. terzo elemento del terzo
  4. quarto elemento
  5. quinto elemento

Funzionale per le cose semplici, ma se voglio una cosa più complessa, con i numeri e lettere combinati

  1. primo elemento
  2. secondo elemento
  3. terzo elemento
    1. primo elemento del terzo
    2. secondo elemento del terzo
    3. terzo elemento del terzo
  4. quarto elemento
  5. quinto elemento

Siamo abituati a fare facilmente una lista come questa con il nostro programma di videoscrittura, ma quando ho cercato di fare una cosa simile su una pagina web la risposta unanime è stata “impossibile”… per cui mi sono rimboccata le maniche, ho messo insieme informazioni diverse e composto il codice che mi permetteva di aggiungere il numero del livello precedente alla possibilità di cambiare il tipo di numeratore (lettere minuscole, maiuscole latine o greche, numeri romani ecc.).

ol.lista, ol.lista li{padding: 0 10px}
body {counter-reset: h1}
ol.lista { 
 list-style-type: none;
 counter-reset: level1;}
ol.lista li:before {
 content: counter(level1, upper-roman) ". ";
 counter-increment: level1;}
ol.lista li ol {
 list-style-type: none;
 counter-reset: level2;}
ol.lista li ol li:before {
content: counter(level1, upper-roman ) "." counter(level2, lower-greek) ". ";
counter-increment: level2;}
ol.lista li ol li ol {
 list-style-type: none;
 counter-reset: level3;}
 ol.lista li ol li ol li:before {
content: counter(level1, upper-roman ) "." counter(level2, lower-greek) "."counter(level3, lower-alpha) "_";
counter-increment: level3;}
ol.lista li ol li ol li ol {
 list-style-type: none;
 counter-reset: level4;}
 ol.lista li ol li ol li ol li:before {
content: counter(level4) ") ";
counter-increment: level4;}

Il codice che vedete prevede per 4 livelli di nidificazione all’interno di una lista ordinata, e parte togliendo il numeratore predefinito list-style-type: none; a ciascun livello e poi premettendo :beforeil content che come forse potete vedere usa il contatore ed il suo livello per comporre il nuovo numero. Al quarto livello i riferimenti ai numeri dei livelli precedenti scompaiono, lasciando posto ai soli numeri. Non si tratta di un codice di uso pratico, ma solo di un codice “di studio”, con più varianti possibili. All’interno di ogni elemento di lista nidificata si specifica anche quale contatore va incrementato counter-increment: level1;. L’aspetto completo generato da questo stile è il seguente:

  1. primo elemento
  2. secondo elemento
  3. terzo elemento
    1. primo elemento del terzo
    2. secondo elemento del terzo
    3. terzo elemento del terzo
      1. primo elemento del terzo del terzo
      2. secondo elemento del terzo del terzo
        1. primo elemento del secondo del terzo del terzo
        2. secondo elemento del secondo del terzo del terzo
        3. terzo elemento del secondo del terzo del terzo
      3. terzo elemento del terzo del terzo
  4. quarto elemento
  5. quinto elemento

La stessa tecnica si può utilizzare per numerare i livelli di intestazioni del testo h1, h2, h3 ecc. che, a differenza degli elenchi ordinati non hanno normalmente una numerazione. Il primo passo è proprio quello di settare un contatore per ogni livello:

body {counter-reset: h1}

Titolo del primo capitolo

Titolo del primo paragrafo

Titolo del secondo paragrafo

Titolo del primo sottoparagrafo

Titolo del secondo sottoparagrafo

Titolo del terzo paragrafo

Titolo del secondo capitolo

Se vi interessa il codice CSS della struttura che vedete sopra è questo:

body {counter-reset: h1}
h1.capitoli:before {content: "Cap. " counter(h1, upper-roman) ". ";
 counter-increment: h1;}
h1.capitoli {counter-reset: h2}
h2.capitoli:before {content: "Par. " counter(h1, upper-roman ) "." counter(h2) ". ";
counter-increment: h2;}
h2.capitoli{counter-reset: h3}
h3.capitoli:before {content: "Sub. " counter(h1, upper-roman ) "." counter(h2) "." counter(h3, lower-alpha) ". ";
counter-increment: h3;}
h3.capitoli {counter-reset: h4}

mentre l’HTML è questo:

<h1 class="capitoli">Titolo del primo capitolo</h1>
<h2 class="capitoli">Titolo del primo paragrafo</h2>
<h2 class="capitoli">Titolo del secondo paragrafo</h2>
<h3 class="capitoli">Titolo del primo sottoparagrafo</h3>
<h3 class="capitoli">Titolo del secondo sottoparagrafo</h3>
<h2 class="capitoli">Titolo del terzo paragrafo</h2>
<h1 class="capitoli">Titolo del secondo capitolo</h1>

Non so se esistano modi più semplici per ottenere questo stesso risultato, e posso garantirvi che fuori dalla gabbia di WordPress è più facile ottenere buoni risultati. Francamente dubito che esistano altri pazzi online interessati all’argomento, ma dato che “a volte ritornano” ho preferito lasciare un appunto a me stessa dove potevo trovarlo facilmente 😀

Editoria digitale

L’editoria nel tardo ‘500

Per una volta, invece che alle mie solite macchine da cucire, vorrei dedicare un po’ di spazio alle macchine con cui passo buona parte delle mie giornate, ovvero gli elaboratori elettronici. In particolare vorrei puntare l’attenzione al mondo dell’editoria digitale, intesa come sistemi e servizi per la creazione e l’impaginazione di libri. Ovviamente i contenuti e la loro qualità sono fondamentali, ma in un mondo in cui gli “editori” producono tonnellate di carta da macero alla disperata ricerca del best seller che li ripaghi di tutti gli investimenti passati e futuri, esiste un circuito parallelo, direi “indie” (nel senso di indipendente dalle grandi case) che spesso corrisponde all’autoproduzione casalinga non solo per gli aspiranti romanzieri, ma anche per buona parte delle pubblicazioni scientifiche, sia divulgative che di alto livello.

Se da una parte ormai raramente una “casa editrice” (uso le virgolette perchè riten Leggi tutto “Editoria digitale”

Debugging

Per chi non lo sapesse, il termine debugging indica, in ambito di programazione, l’individuazione e la rimozione degli errori.  Ho finalmente risolto l’errore che mi impediva di ricevere le email di notifica dei vostri messaggi, il che dovrebbe significare anche che non dovrete più attendere giorni o settimane per l’approvazione o la risposta se ho il tempo.  Si trattave di uno spazio in più all’interno dei parametri della funzione di invio posta.  I piaceri della vita, se siete appasionati di enigmistica, probabilmente. Leggi tutto “Debugging”

Missione impossibile … o quasi

(per chi legge abitualmente i miei post dedicati alle macchine da cucire, questa è una digressione…)

Dato che ufficialmente mi sto astenendo dal lavoro, in questi giorni ho ripreso il mio vecchio lavoro di sistemista per aiutare mio marito ad avviare la sua attività. In particolare sto cercando di dare un senso all’accozzaglia di pc, mac, stampanti ed accessori che ha ereditato dal socio e che al momento, non potendo fare ulteriori investimenti, sono i suoi strumenti di lavoro. Ammetto che essere fuori dal giro dal quasi dieci anni non aiuta, ma devo dire che non mi aspettavo così tanti problemi… Leggi tutto “Missione impossibile … o quasi”

Comperare modelli online – una esperienza

Mi è capitato recentemente (in occasione della recita di fine anno del mio cucciolo) di trovarmi all’ultimo minuto a cercare online un modello, in questo caso per una polo e dei pantaloni, da realizzare così al volo da non avere il tempo di fiondarmi nell’archivio giornali della mamma o della zia. Nell’occasione mi sono avvalsa di siti specializzati nella distribuzione di modelli digitali, da scaricare al volo.

Il mio preferito è normalmente Burda style, da cui però finora ho preso solo modelli gratuiti, a cui ero iscritta ancora prima che venisse integrato con quello della rivista omonima…

Per l’occasione però non riuscivo a trovare un modello come mi serviva ad un prezzo sensato, per cui sono finita su printsew, che paradossalmente sembra avere a disposizione per il download più modelli Burda del sito Burda, ed a prezzi concorrenziali! Prima delusione, la navigazione: cercare un modello è difficilissimo. Scelto il modello e pagato (scoprendo che oltre al prezzo del cartamodello (3.99$) ci sono delle spese aggiunte (0,75$) per la gestione) , seconda e più terribile delusione: il modello non viene dato da scaricare, come su Burdastyle, offrendo la doppia versione “da casa” e “da copisteria”, ma da stampare con un plugin direttamente dal sito. Al modello originale Burda sono state aggiunte delle inutili note che vanno in alcuni casi a coprire delle marche, inoltre non è possibile stampare una pagina, si devono sempre stampare tutte, e i margini sono al vivo, con pagine dimensionate male se si chiede di stampare in A4… senza contare che  il sistema di criptaggio (fileopen) è una vera minaccia alla privacy:  me ne sono accorta oggi che ho cercato di ristampare il file usando un pc diverso e non ho potuto. Il server infatti ha registrato tutte le informazioni del mio pc, identificazione dell’hard disk, della cpu, indirizzo di rete, login e password… insomma, da paura! E con  tutto questo scoprite di non aver nemmeno comperato il cartamodello, ma solo il diritto di stamparlo per un anno dall’acquisto per il numero di volte che a loro sembra congruente (e se come a me vi capita la stampante che fa i capricci, sono dolori…)

Morale della storia:  primo ed ultimo cartamodello da questo sito, per quanto possano mandarmi offerte due volte la settimana… Se proprio non trovo online, carta velina 😛

Cronaca di una morte annunciata … con principio di rianimazione ;)

Singer 66

Anche se ormai la maggioranza dei mie acquisti di accessori per macchine da cucire avviene su internet, raramente acquisto macchine intere se non posso ritirarle di persona. Questo mi ha portato a gite in tutto il centro-nord, da Torino a Pavia o Venezia, ma anche Arezzo e le colline fiorentine. Ovviamente, visti i costi del trasporto, le gite non servivano a risparmiare sui costi di spedizione ma ad accertarmi di ricevere una macchina e non un rottame. Le macchine spedite erano state in genere quelle acquistate “per pezzi”, ovvero di cui potevo correre il rischio che venissero ammaccate. Oppure acquistate a prezzi irrisori o comunque molto inferiori a quelli sparati in Italia, all’estero, come le mie Elna, che però hanno il pregio di essere contenute in una valigia di ferro a prova di corriere. Leggi tutto “Cronaca di una morte annunciata … con principio di rianimazione ;)”

Sorry, we don’t ship to Italy (Spiacenti, non spediamo in Italia)

Nelle ultime settimane sembra essere questa la risposta standard dei venditori eBay americani a cui chiedo (se dichiarano di fare spedizioni in Europa) il costo della spedizione di qualche oggetto verso l’Italia. Ovvero, sempre più venditori si rifiuta di spedire specificamente in Italia. Dalla mia esperienza maturata in almeno una cinquantina di acquisti ed un centinaio di mancati acquisti negli ultimi anni, questa è una sgradevole nuova tendenza. Ci sono sempre stati venditori che non avevano voglia di spedire all’estero e su quello c’è poco da dire. Nel mio caso il valore della merce è in genere di poco inferiore al costo della spedizione internazionale, ma dato che in Italia non esiste un mercato di accessori e piedini per macchine da cucire vintage e senza accorgersi l’idea di completare il corredino di ogni macchina che possiedo è diventata una abitudine, continuo a tenere d’occhio le aste anche se ormai ho la casa straripante di materiale. Vi racconterò del mio ultimo oggetto del desidero se riuscirò ad ottenerne uno, anche se ormai devo contare sulla gentilezza delle amiche appassionate americane che ricevono e rispediscono per conto mio. Leggi tutto “Sorry, we don’t ship to Italy (Spiacenti, non spediamo in Italia)”

Qualche utilità per il PC

Dopo l’indigestione di piedini degli articoli passati, ho pensato di condividere con voi una piccola lista di “accessori” ma questa volta per pc, dato che con l’acquisto del mio nuovo netbook mi sono trovata a reinstallarli tutti. Si tratta di piccoli applicativi, in genere meno di cinque megabyte, distribuiti gratuitamente sotto varie forme di licenze (alcuni opensource, altri versioni lite di programmi commerciali). In alcuni casi è possibile farli funzionare “standalone”, senza cioè che vengano installati nel pc, per cui è possibile infilarli in una chiavetta pronti a disposizione in caso di emergenza dell’amico in crisi da pc. Leggi tutto “Qualche utilità per il PC”