L'antro del Nerd

SugarscapeJS - Agenti artificiali per società artificiali

2015-03-31T20:53:00.000+02:00

Sugarscape è un modello multiagente di simulazione di società artificiali (per un dato valore di società), reso famoso dal libro Growing artificial societies: social science from the bottom up, scritto da Joshua M. Epstein e Robert Axtell nel 1996. Da allora, ha dato origine a una discreta quantità di programmi che emulavano, in forma più o meno completa, il progetto delineato in quello studio, e ancora continua a produrne.
SugarscapeJS, come il nome stesso dovrebbe suggerire, è una sua versione in JavaScript, realizzata da me, in cui cerco di inserire, a mano a mano che procedo col lavoro, il maggior numero possibile degli elementi proposti nello studio originale. Al momento ho incorporato quasi tutte le regole contenute nei capitoli due, tre e nella prima metà del quattro: mancano i prestiti, ossia la seconda metà del quarto capitolo, e le malattie, che occupano il capitolo cinque. Arriveranno anche loro.
Per chi non conosce il testo di riferimento, una breve presentazione della struttura di Sugarscape, che è distinto in tre componenti di base: gli agenti, l’ambiente in cui interagiscono tra loro e le regole in base alle quali interagiscono tra loro e con l’ambiente stesso.
Gli agenti sono gli abitanti della società artificiale. Di fatto, sono quadratini colorati che si muovono sullo schermo, ma voi potete immaginarli più o meno come preferite. Possiedono alcune proprietà, come età, sesso, durata massima della vita, campo visivo, metabolismo e così via: molte di queste proprietà possono essere regolate prima di avviare la simulazione, altre sono assegnate in modo pseudocasuale al momento della nascita. Hanno anche la capacità di muoversi nell’ambiente e interagire con altri agenti, ma di questo parlerò poi.
L’ambiente è una griglia di 50 x 50 caselle, su cui gli agenti vivono e si muovono. Una scacchiera, insomma. Ogni casella può ospitare un solo agente alla volta e possiede una quantità determinata di risorse, rinnovabili col tempo. L’ambiente può presentare una distribuzione delle risorse molto diversa, ma qui ho scelto, per il momento, la struttura più famosa e più spesso associata con Sugarscape, con le risorse concentrate in due “picchi” (o quattro, se si sceglie di usare una seconda risorsa). Le risorse sono zucchero (di base) e spezia (opzionale).
Le regole sono un insieme di comandi che determinano il modo in cui gli agenti si comportano. La regola di base per il movimento, ad esempio, prevede che ogni agente cerchi, all’interno del proprio campo visivo, la più vicina casella libera che contiene la maggiore quantità di risorse, che si muova per occupare quella casella e raccolga tutto il contenuto. Vi sono poi regole che determinano il modo in cui le risorse ricresceranno, il modo in cui l’agente interagisce con altri agenti, sia per la riproduzione, sia per il combattimento, sia anche per la “conversione” di chi appartiene a una cultura diversa, e altre regole ancora arriveranno, per commerciare e determinare come avvenga la trasmissione di malattie all’interno di Sugarscape: in molti casi, è possibile decidere quali regole applicare e quali ignorare, così da simulare ciò che vogliamo e osservare solo i risultati che ci interessano.
Sulla base di questi tre componenti, Sugarscape si ripropone di provare a costruire le dinamiche di una società “dal basso”, ossia impostando solo semplici regole generali e osservando poi il modo in cui si svolge l’interazione tra agenti e territorio, seguendo le suddette regole. Interazione che spesso è interessante, in effetti, e forse anche istruttiva, ma su questo punto non mi pronuncio. A ogni modo, vediamo le regole disponibili finora.
Ogni agente può vedere fino a una certa distanza, stabilita casualmente alla nascita, e ha bisogno di consumare a ogni turno una certa quantità di zucchero (e spezia, se usiamo due risorse) per mantenersi vivo: primo obiettivo è dunque la ricerca di zone con tanto zucchero, da raccogliere e consumare. E già questo produce un notevole effetto-formicaio nella simulazione, oltre a introdurre una selezione naturale che porta alla rapida estinzione di chi ha campo visivo scarso e metabolismo elevato. Se gli agenti morti non sono sostituiti, si arriva presto a uno stallo, che ci dice quale sia la capacità di portata per quell’ambiente.
Introducendo le stagioni, modifichiamo il modo in cui lo zucchero (e la spezia, ma ormai dovreste aver capito l’andazzo) è rigenerato nell’ambiente: se prima era uniforme su tutto il territorio, adesso l’ambiente è diviso in due zone, nord e sud, e in quelle due zone si alternano ogni X turni estate (rigenerazione massima delle risorse) e inverno (rigenerazione minima delle risorse). Gli agenti cominceranno a migrare in massa al cambiamento delle stagioni.
Già sulla base di questo, possiamo osservare come si distribuiscano le ricchezze tra gli agenti, ossia la quantità di zucchero posseduta da ognuno. O almeno, potremmo vederlo: in realtà, per adesso ho solo un grafico con l’indice Gini, ma in futuro introdurrò anche tabelle che mostrino in modo meno tecnico e più comprensibile la tendenza generale a una disparità sociale piuttosto accentuata.
Una vera interazione tra agenti compare solo col capitolo tre del libro. Per prima cosa, si può introdurre la riproduzione sessuale, come alternativa alla rigenerazione causale a ogni decesso: ogni agente in età fertile, e con un quantitativo minimo di risorse, a ogni turno cercherà tra i propri vicini un potenziale partner, che sia di sesso opposto, di età fertile, che abbia risorse e che non sia suo parente stretto (tecnicamente, Sugarscape non vieta l’incesto, nella sua formulazione originaria, ma io ho voluto introdurre questo limite, per renderlo più realistico e “umano”, così come il limite di una sola riproduzione per turno). Questa regola da sola cambia gli equilibri ambientali, portando a una continua oscillazione nel numero di agenti supportati. Possiamo poi introdurre anche l’eredità, ossia la possibilità che i figli ottengano una parte uguale delle risorse dei genitori, alla morte di questi: principale effetto sarà una tendenza ad accentuare le disparità sociali.
Dopo l’eredità, arriva l’ereditarietà. Qualche centinaio di turni ci mostra come, anche senza averla espressamente introdotta, la selezione naturale porta ad avere agenti con visione sempre migliore e un metabolismo che rapidamente crolla al minimo. Una tendenza che avevamo già visto anche in assenza di riproduzione, ma che va alle stelle quando la riproduzione è presente. Curiosamente, però, l’aumento della visione non è costante e di tanto in tanto si può invertire.
Ma una società non è solo sesso, nonostante YouPorn dimostri il contrario. Assieme alla possibilità di riproduzione sessuale, esistono anche due “culture” di base, indicate col colore rosso e blu. Sono di fatto una lista di numeri binari, la cui lunghezza è regolabile a piacimento, ma è meglio che sia sempre dispari: se prevalgono gli 1, il nostro agente apparterrà a una cultura; se prevalgono gli 0, apparterrà all’altra. Le culture non sono stabili e possono cambiare nel corso della simulazione, a seconda del modo in cui gli agenti interagiscono tra loro: le culture si intrecciano al momento della nascita di nuovi agenti, ma anche solo muoversi all’interno di Sugarscape porta gli agenti in contatti con altri agenti, in un continuo influenzarsi a vicenda. Se così vogliamo.
Dalla cultura alla guerra. Un’altra regola opzionale ci permette di decidere che le due culture non coesistano pacificamente in Sugarscape: se così vogliamo, rossi e blu cercheranno di sopraffarsi a vicenda, fino a che ne resterà uno solo, oppure fino a che non si raggiungerà un equilibrio da guerra fredda, con le due culture rinchiuse nelle proprie zone di influenza e in continuo contrasto lungo i confini.
Col capitolo quattro arriva una seconda risorse, che affianca lo zucchero: è la spezia. Grazie alla presenza di due risorse, gli agenti possono adesso commerciare, scambiando il surplus per ottenere i beni di cui hanno maggiore scarsità. In teoria. In pratica, il raddoppiamento delle risorse comporta anche un raddoppiamento delle possibilità di morire e spesso la nostra simulazione si chiuderà con l’estinzione totale degli agenti: quando non succede, però, otteniamo un passabile commercio.
Gli agenti, poi, sono divisi tra due categorie di commercianti: aggressivi e cauti. Un agente cauto scambia solo il proprio surplus, solo nella misura minima e punta a un profitto modesto, ma costante: tipica formica, per intenderci. Un agente aggressivo, invece, si butta negli scambi anche a rischio di perderci, non si ritira mai da una offerta e punta sempre al colpaccio. A volte gli riesce.
I prestiti tra gli agenti costituiscono la seconda parte del capitolo quattro, ma non li ho ancora implementati, proprio come non ho ancora implementato il capitolo cinque, dedicato a malattie e sistemi immunitari. Altra cosa che manca, presente nel capitolo due, è la produzione di inquinamento, che al momento ho escluso in quanto la formulazione data dal libro non è molto interessante e non aggiunge granché alla simulazione. Magari la riesumerò in futuro.
In breve, questo è SugarscapeJS. La velocità della simulazione varia molto a seconda del browser utilizzato, ma dovrebbe comunque funzionare su ogni browser decentemente moderno, anche se non è ottimizzato per dispositivi con schermi piccoli. Raccolta e produzione di dati e grafici avrà bisogno ancora di molto lavoro, ma la simulazione è già utilizzabile e fornisce alcuni risultati. Se si è di bocca buona, almeno.

Prova SugarscapeJS

Modificare ebook con Calibre

2015-02-20T20:08:00.001+01:00

Calibre è un programma gratuito e libero, già famoso come strumento per la conversione e in generale la gestione degli ebook, tanto da essere stato etichettato in più occasioni come lo iTunes degli ebook. Che questo sia da intendersi come un complimento o un insulto è aperto alla vostre interpretazioni e mi asterrò dal proporvi la mia, che propende per al seconda.
Etichette a parte, Calibre è usato soprattutto per convertire un ebook da un formato all’altro, nonché per fungere da biblioteca virtuale e, se si vuole, anche per trasferire testi dal computer a un qualsiasi lettore esterno, e viceversa. Le sue funzioni, però, non si esauriscono qui. Tra quelle introdotte più di recente (anche se quanto di recente dipende dall’ultima volta che lo avete aggiornato: non è che sia proprio una novità dell’ultima ora, ecco) vi è la possibilità di modificare ebook. Alcuni formati di ebook. E per “modificare” non intendo solo convertirli, ma proprio editarne il contenuto, come si può fare con un qualsiasi documento all’interno di un elaboratore di testi come Word o Writer.
La modifica di ebook all’interno di Calibre è disponibile soltanto per due formati, che sono poi anche quelli che ha più senso modificare con questo programma: EPUB e AZW3. Il primo formato dovrebbe essere noto a tutti ed è quello utilizzato dalla maggior parte dei dispositivi di lettura che non siano il Kindle. Il formato AZW3, invece, potrebbe suonare più esotico a molti, ma di fatto è una versione riveduta e corretta del MOBI, ossia il formato base per il suddetto Kindle.
La nuova funzione di modifica la trovate facilmente nella barra degli strumenti di Calibre ed è la penultima voce in fondo a destra:

Selezionate lo ebook da modificare, cliccate sulla icona e si aprirà la finestra di modifica:

Come potete vedere, non è poi molto diversa da quella di Sigil o da quella di un qualsiasi altro elaboratore id testi ridotto all’osso o quasi. Non aspettatevi funzioni speciali o particolari, dunque: è uno strumento che vi permette di modificare il codice di uno ebook, ma senza campanelli e lucine colorate. Almeno per adesso, poi in futuro si vedrà.
Non so quanti di voi lo vorranno usare per modificare un file EPUB, dato che Sigil permette già di fare la stessa cosa e in modo più completo (ebbene sì, è ancora più spartano ed essenziale di Sigil, che lo crediate oppure no), ma può essere utile per modifiche rapide e immediate, senza bisogno di uscire dal programma che state utilizzando. Ammesso che il programma che state utilizzando sia Calibre, ovviamente. Molto più interessante, invece, è la possibilità di modificare ebook per il Kindle.
Come ho detto, il secondo formato che potete modificare utilizzando questo strumento è lo AZW3. Il formato AZW3, anche se non proprio del tutto, è quasi completamente identico al MOBI. Da un certo punto di vista. Da un altro punto di vista è un MOBI arricchito, per permette di andare al di là di una grafica in bianco e nero e striminzita, che è la sola grafica concessa dal MOBI. Funziona col Kindle e la conversione dal MOBI è quasi indolore: molto spesso non si nota neppure la differenza, almeno sul piano grafico.
Cosa significa tutto questo? Significa che, se volete modificare uno ebook in formato MOBI, lo potete convertire prima in AZW3 e poi modificare all’interno di Calibre. Il che è più o meno come convertirlo in EPUB e poi modificarlo, d’accordo, ma la distanza tra i due formati è minore e molto probabilmente non avrete bisogno di una seconda conversione a lavori ultimati, per poter leggere il risultato sul vostro Kindle, dato che il Kindle apre senza problemi il formato AZW3. A meno che il vostro Kindle non sia alquanto datato, nel qual caso potrebbero anche esserci problemi.

Scantanador, un roguelike "in fieri"

2015-01-31T10:03:00.001+01:00

Cliccate qui per provare Scantanador 0.0.1 Alpha.
Scantanador è il nome di un roguelike programmato da me, in JavaScript, e basato sulla libreria ROT.JS, libreria JavaScript (che sorpresa!) che contiene diverse funzioni per semplificare la vita a chi, per una qualunque forma di pazzia, decida di programmare un nuovo roguelike. Come potete immaginare, io sono tra questi pazzi.
I comandi sono semplici e sono più o meno i classici di un roguelike. Voi siete la @ al centro dello schermo, vi muovete coi tasti freccia, il tastierino numerico o clicando/toccando il quadrante dello schermo corrispondente alla direzione. Premendo [Invio], o cliccando/toccando l'icona @, potete aprire un menu, con le azioni principali. Il tasto [?] vi mostrerà una lista di tasti, coi comandi corrispondenti.
Al momento, Scantanador è poco più di uno scheletro, ancora in ampia fase di lavorazione e con ponteggi e impalcature sparsi più o meno ovunque. Se il mio obiettivo fosse stato quello di creare un 7DRL, ossia un roguelike programmato in sette giorni, il lavoro sarebbe ormai molto vicino alla conclusione: basterebbe annodare un paio di fili, infilarci un mostro finale, magari due o tre oggetti in più e stop, il gioco è fatto. In tutti i sensi. Siccome però, nella mia pazzia o incoscienza, progetto di realizzare qualcosa di molto più ampio, la conclusione è rinviata a un futuro più o meno lontano, ma che prima o poi arriverà. Almeno, è quanto spero.
Il modello a cui più mi sono ispirato, nella progettazione, è stato ToME, storico roguelike degli anni ‘90 e oltre, nonché uno dei pilastri del genere. Per essere precisi, il mio modello è stato la vecchia versione di ToME, ossia quella che ancora si chiamava Troubles of Middle Earth e che ha chiuso i battenti con la versione 2.3.5, per rinascere poi sotto altro nome, ma identica sigla. Perché una versione così vecchia? Perché è la versione che ho giocato e amato di più, e che mi ha fatto perdere piacevolmente una montagna di ore, ai tempi dell’università: il gioco più recente è senza dubbio migliorato e più ampio, ma alla nostalgia non si comanda. E poi tutti i gusti sono guasti, no?
Nella versione definitiva, quando arriverà, Scantanador presenterà più dungeon, collegati tra loro da un mondo di superficie, oppure un solo, lunghissimo dungeon: ancora non ho deciso, ma il tempo per scegliere non mi manca, con tutto il lavoro ancora in corso. Per il momento, questa versione di prova, versione alpha che più alpha non si può, presenta un solo dungeon, di dieci livelli, e senza mostro finale. Insoddisfacente? Certo, ma è anche una versione di base, che serve a me più che altro come palestra in cui provare le funzionalità che vado via via aggiungendo: potete considerarlo una demo, in altri termini, almeno per il momento.
Trattandosi di un roguelike in JavaScript, è quindi destinato a essere utilizzato soprattutto in un browser e da dispositivi di ogni tipo e dimensione, finora mi sono concentrato principalmente sul supporto vari tipi di input: in pratica, può essere giocato utilizzando la tastiera, nella migliore tradizione dei roguelike, ma può anche essere giocato utilizzando il mouse, oppure le ditate sullo schermo. In teoria. In pratica l’ho potuto collaudare soltanto su un ristretto numero di dispositivi, per adesso, per cui ogni segnalazione di malfunzionamento sarà gradita.
Altro aspetto su cui ho lavorato molto, aspirando a un gioco di lunga durata, è il salvataggio delle partite. Il salvataggio utilizza il localStorage, per cui la partita è salvata all’interno del browser che state utilizzando: se riaprite il gioco con lo stesso browser, dovreste pote ripartire dal punto in cui avevate salvato. A meno che non siate morti dopo il salvataggio, ovviamente: come ogni roguelike che si rispetti, Scantanador abbraccia la filosofia del permadeath, ossia “si muore una volta soltanto”. Quando il vostro personaggio muore, i salvataggi sono cancellati. Punto. Ovviamente, utilizzando il localStorage voi potete imbrogliare quanto volete, se avete una minima conoscenza del JavaScript, perché i dati del salvataggio sono nelle vostre mani, facilmente accessibili.
Riassumendo, vediamo di elencare in breve ciò che è già presente in questa prima versione del gioco, (chiamiamola Scantanador 0.0.1) e ciò che sarà introdotto più avanti.
Già sviluppato:
-supporto per tastiera, mouse, touch;
-salvataggio e caricamento delle partite;
-combattimento corpo a corpo, più alcune armi;
-alcune armature, utilizzabili da player e mostri;
-combattimento a distanza (semplificato), più alcune armi;
-pozioni con effetti immediati o prolungati (alcune);
-oggetti con poteri speciali (alcuni);
-player e mostri possono raccogliere, gettare e utilizzare (alcuni) oggetti;
-mostri con poteri speciali (alcuni);
-meccanismo di combattimento riadattato dal d20 system.
Da sviluppare:
-migliorare il combattimento a distanza;
-nuovi mostri, nuovi oggetti, nuovi poteri;
-mostri più intelligenti (o meno stupidi);
-esperienza e passaggio di livello;
-classi per il player;
-abilità speciali per player e mostri;
-nuovi dungeon/ampliamento dungeon;
-mostro finale;
-magia;
-trappole;
-oggetti da identificare;
-correggere singolari/plurali;
-PNG?
E molto altro, al primo posto la correzione di tutti gli errori che troverò strada facendo. In pratica, come dicevo all’inizio, per adesso ho posto le basi: il resto consiste nell’edificare sopra queste basi. Sperando che reggano.
Ah, la grafica è ovviamente in ASCII: sono tradizionalista, ma soprattutto possiedo le capacità artistiche di un merluzzo. Inserire immagini e trasformarlo in un gioco contemporaneo non sarebbe difficile; realizzare immagini decenti lo è, almeno per me. Che poi in realtà non è proprio definibile come ASCII; dato che utilizzo caratteri Unicode, ma non importa.

Scantanador - A roguelike "in fieri"

2015-01-31T09:57:00.002+01:00

Click here to try Scantanador 0.0.1 Alpha.
Scantanador is the name of a roguelike in JavaScript, which I’m programming. It utilizes the library ROT.JS, which is a very nice tool to help a poor, distressed programmer, who is working on a roguelike: its author seems to have a difficult relationship with semicolon and suchlike, but that’s another matter. It’s a good library, if you are crazy enough to program a roguelike. I am.
Command keys are quite easy and are, more or less, those you find in any roguelike. You are the @ in the centre of the screen and you can walk around by using arrow keys, numpad, or clicking/tapping the portion of the screen corresponding to a given direction. Pressing [Enter], or clicking/tapping on the @ icon, you can access to the menu, which lists all the main commands. The ? key will show you a list of all the keys used in the game.
Right now, Scantanador is little more than a skeleton, a bare-bone structure on which I am still working and a lot of work is still needed. A lot. If I were aiming for a 7DRL, which is to say a roguelike wrote and concluded within 7 days, I would be almost there: add a little more stuff, a final boss, maybe another pair of objects and the game would be ready. But not. Since I am crazy enough to think about a bigger game (way bigger), I still have a long way to go, before having a game which, somehow, can be seen as completed. Some day I’ll get there, for sure. Or, at least, I hope.
My model is ToME, mainly, which is a historical roguelike from ‘90s, but still alive and kicking. More or less. In truth, the version I’m using as an inspiration is not exactly alive and kicking, being the old 2.3.5 version, which was still called “Troubles of Middle Earth”, before kicking the bucket and being reborn with a different name and quite a different world. Why am I looking and the old version, if there is a new one, which is richer and probably better in every aspect? Because ToME 2.3.5 (and all the previous versions) is the one I played and loved the most, the game on which I wasted away many and many hours, when I was in college. It’s nostalgia, pure and simple, and I know it, but... it’s a matter of tastes, right? And all tastes are a waste, in the end. More or less. Let’s say so, okay?
Ina distant day, Scantanador will posses many dungeons, all connected by a wilderness or maybe just one dungeon, but extremely deep: I’ m not sure, yet, but I still have plenty of time, to make up my mind about it. There is still an awful lot of work, for me. Anyway, this demo version (which is really an Alpha release, but very alpha) has only one dungeon, with 10 levels, and without a final boss. Not satisfying? I know, I know, but it’s a first release, which manly serves to me as a playground, where I can test new stuff and see if everything works correctly, any time I add some new object, monster or power. It’s just a demo, as I said.
Being a JavaScript game, it should work on a very wide range of browsers and devices, and work fine everywhere. Or at least fine enough. This is the reason why I concentrated on supporting many kind of input: you can play it with your keyboard, with a mouse, tapping on a touchscreen and so on. Or, at least, you should be able to: I could only test it on a limited number of devices and browsers, so I’m not sure that it will really work everywhere. If you find something wrong, just tell me and I’ll fix it.
Given that I’m trying to program a game, which could last many hours, I also spent quite some time on the save and load process. The game is saved inside the browser you’re using to play it, in its localStorage object: if you open Scantanador with the same browser, you should be able to restart a previously saved game. Unless you died after the last save, of course: as a true roguelike, at least in spirit, Scantanador follows the philosophy of permadeath, which is to say “you can only die once”. Once you die, your character and all the saved game are deleted. That’s all. Of course, since it utilizes the localStorage, you can cheat the living shit out of a saved game, if you really want and if you have a minimal working knowledge of JavaScript: all the data are in you browser and very easy to access.
In short, let’s see what has already been implemented in Scantanador (version 0.0.1) and what is still waiting in line.
Already here:
-keyboard, mouse, touch support;
-saving and loading of a game;
-melee fight, plus some weapons;
-some armours, which can be equipped by player and monsters;
-ranged fights (simplified), plus some ranged weapons;
-potions with immediate and prolonged effects (some);
-items with special powers (some);
-player and monsters can pick up, drop and use (some) items;
-monsters with special powers (some);
-slightly changed d20 system rules;
Still waiting:
-improving the ranged fight;
-new monsters, items, powers;
-smarter monsters (or at least less stupid);
-experience points and level-ups;
-classes for the player;
-special abilities for player and monsters;
-new dungeons/bigger dungeon;
-last boss;
-magic system;
-traps;
-unidentified items;
-fix singular/plural;
-NPC?
And much more, starting from all the bugs I will surely have to squash. Put another way, as I said at the very beginning, I only put the basis for a game: now I must build over it, hoping that everything will be solid enough to hold.
Ah, graphics are obviously in ASCII: I’m quite the traditionalist, but I am also as artistic as a cod. It would be easy to add graphical tiles to the game and turn it into something more modern, but it’s not easy to make decent graphical tiles, at least for me. And, by the way, it’s not really ASCII, since I’m using Unicode characters, but never mind.

Sigil 0.8.0, cosa cambia

2014-09-29T13:24:00.000+02:00

Sigil, il programma per creare e modificare e-book in formato EPUB, è ancora vivo e, dopo quasi un anno di silenzio, finalmente ne abbiamo una nuova versione, la 0.8.0, per l’appunto. Non che ci siano stati grandi cambiamenti, almeno in superficie, ed è probabile che grandi cambiamenti non ci saranno neppure in un futuro prossimo, dato il ritmo con cui il suo sviluppo procede: al momento, Sigil è un programma sviluppato e mantenuto, di fatto, da una sola persona, il che non offre grandi prospettive di aggiornamenti rapidi. Ma vediamo cosa sia cambiato.

Prima di tutto, è cambiato il sito da cui poter scaricare gratuitamente Sigil. Le nuove versioni, per Windows, GNU-Linux e Macintosh, sono scaricabili da GitHub, ossia da questa pagina, invece che dal vecchio sito di Google Code. Non proprio un cambiamento radicale, ma la scelta della versione giusta potrebbe risultare meno chiara del passato, considerata la discutibile grafica della pagina. Leggete con cura il testo biancastro, sullo sfondo verde dei pulsanti, e dovreste poter reperire la versione che vi serve. Dopo aver visto come procurarci il programma, passiamo alle novità nel suo funzionamento. Che di fatto è una sola.

Lasciano da parte le correzioni di alcuni errori, presenti nella precedente versione 0.7.4, la grande novità di Sigil 0.8.0 è la introduzione di una infrastruttura, che supporta l’utilizzo di plugin in questo programma. Più o meno come quella che ha Calibre, giusto per dare una idea. In altri termini, è possibile programma re e aggiungere nuove funzioni a Sigil, attraverso un sano fai-da-te informatico. Per chiunque abbia le competenze necessarie, è ovvio.

Al momento, il supporto di plugin è ancora parecchio limitato, sia perché di fatto è disponibile un solo linguaggio di programmazione, per realizzare i plugin, sia perché i plugin stessi non esistono: se li volete, dovete programmarveli voi, oppure modificare plugin già esistenti per programmi analoghi. Piuttosto che niente, è pur sempre meglio piuttosto.

Nello specifico, l’unico linguaggio di programmazione supportato, per realizzare plugin, è il Python, sia nella versione 2 che nella versione 3 del linguaggio. Una scelta che mi entusiasma moltissimo, dato che trovo la programmazione in Python piacevole come una colonscopia, ma questo è solo un parere personale. In apparenza, molti altri apprezzano invece il linguaggio: buon per loro.

Gusti a parte, la scelta è motivata dal fatto che il Python è un linguaggio già ampiamente usato per realizzare plugin in altri programmi, per cui non dovrebbe essere troppo difficile riciclare e modificare plugin già esistenti, adattandoli alle necessità di Sigil. In particolare, pare che i plugin di Calibre siano riciclabili in Sigil con poche modifiche, dato che la struttura di base è la stessa per i due programmi. O almeno, così sostiene la persona che si occupa dello sviluppo di Sigil e chi sono io per contraddirlo?

Plugin a parte, per il resto non ci sono cambiamenti nel funzionamento di Sigil: tutto ciò che avevo detto per la precedente versione rimane valido anche per questa. Anche la sua interfaccia non è cambiata, a parte l’aggiunta di una nuova voce di menu: Plugin, per l’appunto, e dovreste poter immaginare a cosa serva. Vedremo se, dopo questa versione, altre ne arriveranno, con novità più consistenti e, magari, miglioramenti più consistenti. Considerato il ritmo, non la aspetterei prima della prossima estate, ma spero di esserne smentito.

Guida al CSS per e-book

2014-03-11T16:37:00.001+01:00

Il CSS è il principale linguaggio di programmazione, per realizzare la grafica di siti e applicazioni web, ma è anche la prima scelta quando si tratta di impaginare un ampio settore di formati e-book. Dopo aver parlato in più occasioni delle regole del CSS più comunemente utilizzate, per impaginare uno e-book, mi sono infine deciso a scrivere anche una guida in merito, in cui raccolgo, riorganizzo ed estendo quanto già si poteva trovare nei singoli post. La si può considerare una presentazione di un sottoinsieme del CSS, ossia quello che trova spazio (o che ha senso applicare) in uno e-book: altre proprietà che non ho toccato sono di uso più comune in un sito web e, sebbene non impossibile, il loro utilizzo in un libro sarebbe quantomeno discutibile. In altri termini, se vi accorgete di avere spesso bisogno di proprietà più complesse, è probabile che il vostro progetto funzionerà meglio sotto forma di app, piuttosto che di e-book.

Questa è la lista degli argomenti trattati, capitolo per capitolo:

0 - Presentazione

1 - Introduzione: CSS e HTML

2 - Il foglio di stile CSS

3 - Selezionare gli elementi

4 - Ereditarietà e stili a cascata

5 - Impostare i margini

6 - Formattare il paragrafo

7 - Formattare il testo

8 - Liste e tabelle

Se i titoli non sono sufficienti, ecco anche una brevissima presentazione di ogni capitolo e del relativo contenuto.

1 - Introduzione: CSS e HTML

Capitolo dedicato a una presentazione generale del CSS e dello HTML, con uno excursus su come strutturare un capitolo di e-book e quali tag siano utilizzati più di frequente.

2 - Il foglio di stile CSS

Capitolo dedicato al foglio di stile: la sua anatomia, la struttura di una regola, come assegnare un foglio di stile a una pagina e così via.

3 - Selezionare gli elementi

Capitolo dedicato ai selettori: come selezionare un tag, per poi modificarlo con una apposita regola CSS, ma anche come creare e selezionare una classe di stile, come funzionano i selettori discendenti e quali sono le pseudoclassi e gli pseudoelementi usati più di frequente in uno e-book.

4 - Ereditarietà e stili a cascata

Capitolo dedicato al funzionamento della ereditarietà nelle regole del CSS: come si tramandano le proprietà CSS da un tag all'altro, ma anche come funziona la "cascata", ossia il processo per cui una proprietà, assegnata a un tag, è valida anche per i tag che sono contenuti in quel primo tag.

5 - Impostare i margini

Capitolo dedicato alle regole più generali, per impaginare un capitolo: come impostare i margini tra i vari elementi di una pagina, come impostare il margine tra l'inizio del contenuto e il bordo dello schermo, come racchiudere un elemento in una cornice, come decorare lo sfondo di un elemento.

6 - Formattare il paragrafo

Capitolo dedicato alla impaginazione dei singoli paragrafi: come allineare il contenuto del paragrafo, come formattare soltanto la prima lettera o la prima riga di un paragrafo, impostare i rientri iniziali e così via.

7 - Formattare il testo

Capitolo dedicato al testo e ai caratteri: come impostare e incorporare font, come regolare le dimensioni del testo, lo spazio tra le linee, il colore del testo e altre decorazioni più o meno decorative.

8 - Liste e tabelle

Capitolo dedicato alla formattazione e alla impaginazione di liste e tabelle: contiene una descrizione dei tag utilizzati per realizzarle e delle proprietà che possono essere loro assegnate, specifiche per questi due tipi di struttura.

A titolo di esempio, i capitoli sono consultabili liberamente anche qui, cliccando sui link corrispondenti. Per tutto il resto, potete procurarvi la Guida: la sua versione in EPUB, peraltro, è liberamente vivisezionabile con Sigil (o anche solo con un qualsiasi programma per aprire cartelle compresse), così da studiarne in concreto la struttura, e può essere convertita facilmente in qualsiasi altro formato con Calibre, così da adattarsi al lettore di vostra preferenza, ma può anche essere modificata, se qualcosa non vi dovesse piacere. La versione per Kindle è inevitabilmente meno malleabile, per i limiti insiti nel formato utilizzato dal Kindle. In entrambi i casi, a ogni modo, non sono presenti DRM o accidenti simili.

Un semplice modello di EPUB per romanzi

2014-02-11T10:50:00.002+01:00

Avevo già scritto, in passato, una guida su come realizzare un e-book utilizzando solo Sigil e tanta buona volontà. Ricollegandomi in parte a quanto dicevo in quella occasione, e alla luce di diversi commenti ricevuti in vari articoli su EPUB e problemi di impaginazione, ho preparato un semplice e basilare modello di EPUB, che può essere liberamente utilizzato sia come fonte di ispirazione, sia come scheletro per un vostro lavoro. Il modello mostra un modo molto spartano, in cui il contenuto di un e-book può essere diviso, fornendo anche un esempio di foglio di stile con alcune formattazioni di base, che si ritrovano spesso in romanzi e altri tipi di testo.

Come usarlo? Dipende da cosa ne volete fare. Potete aprirlo con Sigil e osservarne la struttura, alternando la Vista Libro e la Vista Codice, così da avere una idea sia del modo in cui il testo apparirà, sia di come sia composto il suo scheletro, oppure potete utilizzarlo come punto di partenza per il vostro lavoro, incollando il vostro testo all'interno delle pagine, assegnando alle varie parti le classi CSS più indicate, modificando gli attributi e i valori delle suddette classi CSS, e così via. Con un consiglio: se scegliete di copiare il testo da un documento DOC o DOCX, ossia da un documento scritto con Word, non copiatelo direttamente nello EPUB, altrimenti porterà con sé tutte le sozzerie aggiunte da Word. Copiate il testo dal documento di Word, incollatelo in una pagina del Blocco Note, copiatelo di nuovo dal Blocco Note e incollatelo nello EPUB: in questo modo il testo sarà filtrato a dovere e potrete ricostruirne l’impaginazione attraverso il CSS, senza dovervi preoccupare delle spiacevoli eredità lasciate da Word. Si perderanno anche corsivi e grassetti, è vero, e li dovrete aggiungere di nuovo con Sigil, ma il risultato finale sarà complessivamente migliore.

A ogni modo, guardiamo cosa ci sia in questo modello di EPUB.

Se lo apriamo con Sigil, vedremo che le cartelle contenenti materiale sono solo due: la cartella Text e la cartella Styles. Nessuno vi vieta di utilizzare anche le altre cartelle, ma queste sono le uniche due indispensabili, se vogliamo creare uno e-book: text è la cartella che contiene il testo del libro, come suggerisce il nome, e Styles è la cartella che contiene le regole della sua impaginazione. Immagini, font e altro possono essere aggiunti a piacimento, ma non li considero elementi basilari.

La cartella Text contiene cinque files, così disposti:

Cover.xhtml

Titolo.xhtml

Copyright.xhtml

Testo.xhtml

Biografia.xhtml

Tutti questi files possono essere rinominati a piacimento: il nome attuale serve soltanto a fornire una indicazione dei rispettivi ruoli. Anche l’ordine con cui appaiono può essere modificato a piacimento, se quello attuale non è adatto o soddisfacente. Infine, ognuno di essi può essere rimosso, se lo e-book che stiamo preparando non possiederà quel componente; se invece lo e-book possiederà componenti extra come note e bibliografia (probabile), sarà sufficiente aggiungere un file html vuoto, usando l’apposita voce di Sigil, e trascinarlo in alto o in basso nella lista delle pagine, per posizionarlo dove lo vogliamo.

Cover.xhtml è al momento una pagina bianca. Come suggerisce il nome, è qui che inseriremo l’immagine di copertina del nostro e-book, se abbiamo in programma di metterne una. Con Sigil, è sufficiente cliccare sul pulsante Inserisci File, selezionare la nostra immagine e dare un Ok. Opzionalmente, possiamo anche cliccare col tasto destro del mouse su questo file, nel Navigatore della colonna sinistra di Sigil, e scegliere dal menu contestuale Aggiungi Semantica -> Copertina.

Titolo.xhtml è la pagina in cui possiamo inserire il titolo del nostro e-book, il nome del suo autore e, opzionalmente, il logo della casa editrice o cose simili. Se non abbiamo inserito una copertina, sarà questa pagina a farne le veci.

Copyright.xhtml è una pagina in cui inserire le note di copyright (come suggerisce il nome) e altri elementi simili. In questo caso, a titolo di esempio, io ho inserito un modello di nota di copyright, una nota sulla copertina (titolo della immagine di copertina, se esistente, ed eventuali credits) e, in coda, una tipica nota che accompagna molte opere di narrativa, cioè il tipico “ogni riferimento a cose, fatti o persone realmente esistenti” eccetera eccetera.

Testo.xhtml è la pagina che contiene il grosso del nostro e-book. Indicativamente, per semplificare sia la scrittura che la lettura sui vari dispositivi,è utile spezzettarla in tante pagine quanti sono i capitoli del libro (avremo quindi Testo1, Testo2, Testo3, eccetera), ma non è obbligatorio: se a voi piace di più, potete usare un solo file monolitico, in cui travasare tutta la vostra opera. Nel foglio di stile CSS che accompagna lo e-book ho inserito alcune formattazioni di base: rientro per tutti i paragrafi a eccezione del primo, testo giustificato, primo paragrafo del capitolo con lettera ingrandita, eccetera. Uno sguardo alla Vista Codice vi dirà subito come utilizzare le classi CSS che ho inserito.

Biografia.xhtml, infine, è la pagina che conterrà la biografia dell’autore, una sezione su cui non mi pare ci sia molto altro da aggiungere.

Come vedete, non ho inserito una pagina con l’indice dello e-book, perché di questo si occupa già Sigil: la tavola dei contenuti (ToC) può essere creata in un paio di secondi, purché vi siate ricordati di utilizzare correttamente i tag di intestazione (i tag da <h1> a <h6>, per intenderci) per i titoli delle varie parti del libro.

Il foglio di stile CSS è Stile.css, contenuto nella cartella Styles: contiene alcune formattazioni di base, che hanno valore di semplici linee guida. Ho impostato ad esempi un colore per lo sfondo di tutte le pagine e un font di base per il testo, ho azzerato i margini per il tag <p>, così da rimuovere gli spazi vuoti tra un paragrafo e l’altro, ho inserito un certo spazio tra le varie sezioni, eccetera. Niente di particolare, insomma, ma può essere di aiuto come punto di partenza per qualsiasi tipo di impaginazione abbiate in mente. Per una discussione generale sull'uso del CSS in uno e-book, vi rimando alla serie di articoli che avevo scritto mesi fa: prima o poi troverò forse sia il tempo che la voglia di scrivere qualcosa di più completo, come un manuale specifico per le regole di CSS usate normalmente in un e-book, ma qualsiasi manuale generico di CSS può andare bene, se volete sapere come fare qualcosa di particolare, non contenuto nei miei articoli.

In questo modello di EPUB sono utilizzati soltanto font di base, che dovrebbero essere presenti su ogni tipo di dispositivo; se preferite utilizzare font originali e/o insoliti, li dovrete incorporare nel vostro e-book, ma anche di questo ho già parlato in precedenza.

Per finire, i metadati dello EPUB non sono stati inseriti, ma a questo dovrete eventualmente provvedere voi (premete F8 e si aprirà la finestra dei metadati). Il nome dell’autore, il titolo del libro e la lingua in cui è stato scritto sono gli unici metadati obbligatori, se volete superare il test di convalida, ma potete aggiungere qualsiasi altro metadato vogliate (codice ISBN, editore, data di pubblicazione, eccetera).

Realizzare semplici animazioni in CSS

2013-09-08T13:06:00.001+02:00

Già in precedenza avevo dedicato una serie di post al CSS e al suo utilizzo, per curare la impaginazione e in generale la grafica di uno EPUB. Tornerò oggi nei paraggi, parlando di una delle principali novità introdotte col cosiddetto CSS3 (etichetta di comodo, sotto cui sono raccolte svariate cose), ossia le animazioni. Dubito che potranno essere di qualche utilità, per realizzare uno e-book (o almeno io lo spero, dato che un libro con immagini animate, che si spostano qui e là nella pagina, non è proprio di mio gusto), ma può comunque essere vantaggioso tenere in considerazione questa possibilità.

Quando si pensa ad animazioni più o meno belle e sensate, in una pagina web, di solito il primo strumento a cui le si collega è il JavaScript. Niente di strano: dopotutto, il JavaScript è nato proprio per dare vita ai siti, che agli albori del web erano alquanto statici, e la manipolazione degli elementi di una pagina è tuttora uno dei suoi principali usi, almeno a livello di web design. La possibilità di creare e gestire animazioni utilizzando il CSS, però, ci offre in alcuni casi una valida alternativa, soprattutto in termini di consumo di risorse e di velocità: se tutto ciò che dobbiamo fare è muovere una immagine o modificarne la visibilità, il CSS è la soluzione migliore.

Le animazioni, dunque. Ciò che ci è offerto da questa recente funzione del CSS è la possibilità di animare il passaggio da un insieme di proprietà a un altro, una sola volta o ripetutamente, usando animazioni lineari o con effetti particolari. Ad esempio, se fissiamo come punto di inizio un valore di opacity: 0 e come punto di arrivo un valore di opacity: 1, l'elemento a cui è assegnata questa animazione diventerà visibile a poco a poco, nel tempo di durata della animazione. Se fissiamo invece due diversi valori di color, uno come inizio e uno come fine, sarà il colore dell'elemento a cambiare a poco a poco. In breve, possiamo animare il passaggio da (più o meno) qualsiasi proprietà del CSS a qualunque altra proprietà, per gli elementi che scegliamo.

I passaggi necessari per utilizzare una animazione sono due: creare l'animazione e assegnarla a uno o più elementi della pagina. La prima cosa da fare, dunque, è definire la regola nel nostro foglio di stile CSS; la regola per una animazione è leggermente diversa da una normale regola del CSS, ma non troppo. Questa è la struttura di base.

@keyframes nome {

    from {



    }

    to {



    }

}

La parte più insolita è probabilmente costituita dallo @ iniziale, che contraddistingue questo e altri tipi di nuove regole, ma non è niente per cui perdere il sonno: possiamo considerare il blocco @keyframes come una formula, per introdurre la sequenza di operazioni che compongono la nostra animazione, e vivere serenamente.

Ciò che ho indicato come "nome" può essere un nome qualunque, che caratterizzerà la nostra animazione: scegliete quello che preferite, purché ogni animazione abbia un nome diverso dalle altre. Il nome ci servirà più avanti, per assegnare questa animazione agli elementi che animeremo.

All'interno della prima coppia di parentesi graffe dovremo elencare le varie tappe della nostra animazione; come è ovvio, le tappe dovranno essere almeno due, ossia un inizio e una fine. Dopo la parola from, elenchiamo le proprietà di partenza: il colore che un elemento possiede all'inizio della nostra animazione, oppure le sue dimensioni iniziali, o qualsiasi altra cosa cambierà nel corso del processo. Dopo la parola to, invece, elenchiamo le proprietà che l'elemento possiederà alla fine del processo. Una volta fissato inizio e fine, la transizione sarà gestita automaticamente dalla animazione.

Se la nostra animazione non dovrà passare direttamente dallo stato iniziale a quello finale, ma vogliamo che attraversi particolari fasi intermedie, le possiamo specificare utilizzando un valore in percentuale. Ad esempio,


from {

    color: red;

}

50% {

    color: white;

}

to {

    color: blue;

}

descrive una animazione che modifica il colore di un elemento: si parte dal rosso, si arriva al bianco a metà dell'animazione (ossia al 50%) e si conclude con un colore blu. Se vogliamo, poi, possiamo esprimere in percentuale anche from e to, invece di usare le parole: non farà alcuna differenza. Se ci piacciono particolarmente i numeri, dunque, potremo scrivere 0% al posto di from e 100% al posto di to, il che renderà forse più chiare le fasi intermedie della nostra animazione. Per ogni tappa, come è ovvio, possiamo inserire tutte le proprietà CSS che vogliamo, in base a ciò che è necessario per la nostra animazione: se vogliamo modificare contemporaneamente la posizione, il colore e la dimensione di un elemento, basterà elencare tutte le rispettive proprietà CSS dentro le varie tappe, una dopo l'altra. Ad esempio,

from {

    width: 200px;

    background-color: red;

}

to {

    width: 400px;

    background-color: blue;

}

porterà il nostro elemento da una larghezza di 200 pixel a una larghezza di 400 pixel, modificando nel frattempo il suo colore di sfondo da rosso a blu.

Una volta costruita la regola, dovremo assegnarla a un elemento. Operazione molto semplice: basta aggiungere alcune proprietà alla normale regola CSS, che abbiamo creato per quell'elemento. Le proprietà obbligatorie sono due: animation-name, che avrà come valore il nome della nostra animazione, e animation-duration, che avrà come valore la durata dell'animazione. Se ad esempio vogliamo applicare agli elementi di classe .invisibili una animazione di nome fantasma, che avrà una durata di 3 secondi, scriveremo

.invisibili {

    animation-name: fantasma;

    animation-duration: 3s;

}

Questo è il minimo indispensabile. Ci sono poi altre proprietà, che ci permettono un maggiore controllo sulla nostra animazione, e che probabilmente vorremo usare, ma le uniche strettamente necessarie sono il nome e la durata. Vediamo rapidamente le altre proprietà.

animation-timing-function ci permette di controllare il ritmo con cui la nostra animazione è eseguita. Se le assegniamo un valore linear, il ritmo sarà regolare dall'inizio alla fine; se assegniamo un valore ease, la nostra animazione partirà lentamente, si velocizzerà al centro e rallenterà verso la fine. Esistono diversi valori che possiamo assegnare ed è meglio testarli sul campo, per decidere il più adatto alle nostre esigenze.

animation-delay ci permette di eseguire la nostra animazione con un certo ritardo, espresso in secondi: con un valore di 2s, ad esempio, l'animazione partirà dopo due secondi, invece di partire subito.

animation-iteration-count ci permette di stabilire quante volte dovrà essere ripetuta la nostra animazione (se la vogliamo ripetere): basta assegnare come valore il numero di ripetizioni da eseguire, oppure la parola infinite, se vogliamo eseguirla ininterrottamente, per tutto il tempo in cui la pagina è aperta (attenzione: può diventare molto fastidioso per i visitatori).

animation-direction può essere usata per modificare la direzione in cui sarà eseguita la nostra animazione: assegnandole il valore alternate, l'animazione sarà eseguita alternatamente da from a to e da to a from, se abbiamo scelto di ripetere la nostra animazione.

animation-fill-mode, infine, ci permette di controllare l'aspetto finale del nostro elemento: se le assegniamo il valore forward, l'elemento manterrà l'aspetto che possiede alla fine della nostra animazione; in caso contrario, a fine animazione tornerà al suo aspetto iniziale.

Se non abbiamo voglia di scrivere una sfilza di proprietà extra, possiamo usare la formula abbreviata, proprio come accade per le proprietà font, margin, padding e altre. In questo caso, useremo la proprietà animation, seguita dalla lista di tutti i valori. Ad esempio,

animation: prova 3s linear 4 alternate 2s forward;

è una comoda abbreviazione per questa sfilza di proprietà:


animation-name: prova;

animation-duration: 3s;

animation-timing-function: linear;

animation-iteration-count: 4;

animation-direction: alternate;

animation-delay: 2s;

animation-fill-mode: forward;

Ovviamente non è necessario utilizzare tutte le proprietà, nella forma abbreviate, ma è utile rispettare questo ordine: nome, durata, timing, numero di ripetizioni, direzione, ritardo, fill mode.

Siccome poi questa funzione CSS non è ancora standardizzata su tutti i browser, è molto probabile che vi ritroverete costretti a utilizzare i vari prefissi, per alcuni o per tutti i browser: sperimentate prima le animazioni nella forma senza prefissi, come abbiamo visto sopra e poi, se necessario, aggiungete via via le alternative ci prefissi: -webkit- per Chrome e Safari, -moz- per Firefox, -o- per Opera. Con Internet Explorer, le animazioni funzionano soltanto dalla versione 10 in poi, ma almeno non richiedono prefissi. Lo so, è un lavoraccio, ma per adesso è necessario.

Gli strumenti per sviluppatori di Google Chrome

2013-07-03T09:02:00.001+02:00

Tra gli strumenti disponibili nel menu di Google Chrome, la voce Strumenti per sviluppatori è probabilmente la più importante e utile, almeno per chiunque sia interessato anche al “dietro le quinte” di una pagina. Come il nome stesso suggerisce, questa voce raccoglie una serie di strumenti, pensati principalmente per chi si occupa di produrre pagine o applicazioni web, ma in linea generale possono essere utili e interessanti anche per chi non si sognerebbe mai di diventare uno sviluppatore, ma vuole solo saperne un po’ di più e vedere come funzionano le cose.

Gli strumenti disponibili sono otto e descriverli tutti quanti in un colpo solo occuperebbe troppo spazio: per semplificare il mio lavoro, dunque, li dividerò arbitrariamente e li descriverò un poco alla volta. Partirò oggi dalle due schede che, probabilmente, saranno usate più spesso: Elements e Console, ossia la prima e l’ultima nell'ordine in cui Google Chrome ce le offre.

Elements è la scheda in cui possiamo esaminare il contenuto effettivo della pagina che abbiamo davanti: più precisamente, ne possiamo esaminare il contenuto finale. Nel menu di Chrome esiste già una funzione “Visualizza sorgente”, che ci mostra il codice di una pagina: la scheda Elements è simile, ma non identica. Visualizzando il codice sorgente, infatti, noi vediamo il contenuto del file HTML originario, senza le modifiche che possono essere state effettuate utilizzando il JavaScript; la scheda Elements, invece, ci mostra il codice della pagina finale, dopo che tutte le modifiche tramite JavaScript sono state applicate. Inoltre, sempre da qui possiamo anche esaminare il CSS per ogni componente della pagina, nella colonna di destra della scheda.

Una buona norma della programmazione web prescrive che il contenuto di una pagina sia sempre e comunque accessibile, anche per chi ha disabilitato il JavaScript: se questa norma fosse sempre rispettata, la visualizzazione del codice sorgente dovrebbe mostrarci già tutto il testo, tutte le immagini e tutti gli altri elementi contenuti in una pagina. Come la maggior parte delle buone norme, però, non sempre è rispettata alla lettera; di conseguenza, una parte più o meno cospicua del contenuto, in molti siti, è aggiunta successivamente col JavaScript. Sempre attraverso il JavaScript, parti della pagina possono essere nascoste o mostrate, modificando il CSS corrispondente, col risultato che la pagina davanti a noi è spesso molto diversa, rispetto al contenuto descritto nel file HTML iniziale.

Elements ci mostra dunque un file HTML virtuale, che descrive la pagina così come ci appare sullo schermo in questo momento. Se una immagine è stata aggiunta col JavaScript, Elements ce la mostrerà nel punto in cui è stata aggiunta, con tutti i tag HTML e tutte le regole di stile che le sono state assegnate, proprio come se avesse fatto parte fin dall’inizio della pagina. Se una parte della pagina è stata invece nascosta, in seguito a una qualche nostra azione, non la vedremo apparire in questa sezione.

Come è facile da intuire, Elements è molto utile per esaminare il contenuto della pagina, sia mentre noi ci stiamo lavorando, sia quando siamo curiosi di studiare il lavoro altrui, ma questa è solo una parte delle sue funzioni. Oltre a guardare, infatti, in questa scheda possiamo anche modificare il contenuto di una pagina, in modo molto semplice. O almeno, molto semplice se sappiamo orientarci tra i nodi di una pagina HTML e se conosciamo HTML e CSS: dopotutto, questi si chiamano “strumenti per sviluppatori” e la conoscenza dei linguaggi per la programmazione web è data per scontata, essendo rivolti agli sviluppatori di pagine e siti. Non ci piace il colore dello sfondo, oppure il colore dei caratteri? Da qui lo possiamo modificare. Clicchiamo prima col tasto sinistro del mouse sul nodo da modificare e poi, nella colonna di sinistra, cerchiamo la proprietà CSS che ci interessa e clicchiamola col tasto sinistro: in questo modo, la potremo modificare a nostro piacimento.

Se invece clicchiamo su un elemento HTML col tasto destro del mouse, si aprirà un menu contestuale, in cui ci saranno offerte altre possibilità di intervento: ad esempio, potremo modificare lo HTML, selezionando la voce “Edit as HTML”, oppure rimuovere quel particolare nodo dalla pagina, selezionando “Delete node” (se un banner vi ha rotto le scatole, potrete cancellarlo da qui). Eliminare un nodo, ad esempio, può essere un sistema rapido, per levarsi dai piedi quei fastidiosi avvisi, che impediscono di leggere una pagina fino a che non avete cliccato “Mi piace” su una pagina Facebook, oppure fino a che non vi siete registrati e cose simili.

Ovviamente, ogni modifica apportata alla pagina varrà soltanto per noi: ciò che modifichiamo è la copia locale, caricata nel nostro browser, e non la pagina originale, contenuta nel sito. Nonostante questo, è pur sempre uno strumento valido, per adattare le pagine ai nostri gusti o per rapidi interventi di correzione, oltre alle sue normali funzioni di studio ed esame della pagina.

Console è la scheda di chi ama smanettare col JavaScript. Può essere utilizzata per eseguire brevi porzioni di codice nella pagina (sempre sul lato cliente, sia chiaro), ma è molto più importante il suo ruolo di semplice ambiente di sviluppo per JavaScript. Di fatto, la console è uno spartano (ma poi neanche tanto spartano, nel caso di Google Chrome) REPL, ossia uno spazio in cui possiamo dialogare col JavaScript, direttamente nel nostro browser: scriviamo un comando o una funzione, premiamo Invio, e la console ci restituirà subito il risultato del comando o della funzione. Se stiamo studiando o imparando il JavaScript, possiamo trascorrere ore in perfetta letizia, dialogando col nostro linguaggio di programmazione; se invece stiamo lavorando alla realizzazione di una pagina e qualcosa va storto, è qui che ci saranno segnalati gli errori relativi al JavaScript.

Chiunque abbia mai utilizzato un REPL in vita propria, magari trastullandosi col Lisp o altri linguaggi di programmazione affini (anche Scala va bene), non dovrebbe avere problemi con la Console. Un REPL è un Read-Eval-Print-Loop, ossia un ciclo continuo di lettura, esecuzione e stampa del codice: noi scriviamo un comando, una funzione o qualsiasi altra cosa, premiamo Invio, e il comando (o funzione, o altro) sarà eseguito e poi scritto sullo schermo, dopodiché la console sarà pronta per il comando successivo. Ovviamente, comandi e funzioni dovranno essere in JavaScript, per poter funzionare, ma nel peggiore dei casi potete sempre utilizzarla come calcolatrice alternativa.

Come dicevo all’inizio, la console può essere utilizzata fondamentalmente in due modi: come ambiente di sviluppo per il JavaScript, oppure per alterare il contenuto della pagina che abbiamo davanti.

Come ambiente di sviluppo, è spartano ma funzionale, nonché molto utile se stiamo imparando (o se vogliamo imparare) la programmazione in JavaScript. Possiamo usarla per scrivere ed eseguire funzioni, ad esempio, ma con un’avvertenza: se vogliamo andare a capo, non dobbiamo premere Invio, ma Shift+Invio. Se premiamo Invio da solo, il codice sarà eseguito e ci ritroveremo con un messaggio di errore, se la nostra funzione era a metà. Dettagli a parte, ha il vantaggio considerevole di suggerirci i nomi di variabili, metodi, oggetti e funzioni a nostra disposizione: se cominciamo a scrivere qualcosa, la console ci mostrerà tutti i modi validi in cui possiamo concludere quella parola, proprio come accade in ambienti di sviluppo più raffinati. Ad esempio,

La console ricorda anche tutto ciò che abbiamo già fatto, durante la nostra sessione di lavoro: se abbiamo creato nuove variabili globali, oppure nuove funzioni, o nuovi oggetti, anche i loro nomi appariranno tra i suggerimenti, accanto a funzioni, metodi e oggetti già inclusi nel motore JavaScript di Google Chrome. Di fatto, la console offre tutto ciò che è strettamente indispensabile, per programmare in JavaScript.

Se invece vogliamo utilizzarla per alterare la pagina corrente, il principio di base è lo stesso, ma cambia il contesto: dalla console avremo accesso a tutto il JavaScript della pagina su cui l’abbiamo aperta, incluse eventuali altre librerie importate (jQuery, ad esempio, che è spesso presente). Se stiamo allegramente sprecando tempo con un gioco in JavaScript e vogliamo barare, possiamo farlo da qui, modificando ad esempio il numero assegnato alla variabile che contiene il punteggio. Ogni modifica avrà effetto a livello locale, ossia nella pagina aperta sul nostro browser: se dunque abbiamo usato la console, per truccare il nostro punteggio in un gioco, il nostro punteggio truccato non avrò effetto su una eventuale classifica dei migliori punteggi, ospitata nel sito del videogioco. O almeno, non dovrebbe avere effetto, a meno che il gioco non sia stato progettato molto male e abbia un livello di sicurezza pari a zero, ma questo è un altro paio di maniche.

Three.js – Una libreria per un WebGL semplificato

2013-06-27T15:59:00.001+02:00

WebGL è una nuova tecnologia, incorporata nei browser (o almeno in buona parte dei browser), che permette di creare e disegnare immagini e animazioni 3D su una pagina web, senza bisogno di utilizzare plugin o programmi esterni, come il Flash, ma basandosi soltanto sul buon vecchio JavaScript. Questo per dirla in modo molto semplice, sorvolando sulla storia e tutto il resto.

Per visualizzare una grafica prodotta con WebGL, o per utilizzare un videogioco basato su WebGL, è sufficiente avere un browser che supporti questa tecnologia: in pratica, più o meno tutti i browser, a parte Internet Explorer, almeno per il momento. per utilizzare WebGL in modo attivo, ossia per programmare grafiche o videogiochi in 3D, gli strumenti necessari sono sempre un browser che lo supporti, una discreta conoscenza del JavaScript e una buona conoscenza di algebra lineare, se siete così pazzi o determinati, da voler programmare a mano le matrici. Se non siete così pazzi o così determinati, non preoccupatevi: praticamente nessuno lo fa, se non in fase di apprendimento. Di solito, la parte più algebricamente hardcore è affidata a librerie JavaScript, che si occupano per noi dei calcoli più complicati, lasciandoci il piacere e il privilegio di lavorare sul risultato dei calcoli. La più usata di queste librerie è Three.js, di cui parlerò oggi.

Se ricordate la versione 3D di Pong, presentata come uno degli ultimi esperimenti su Chrome, la parte grafica è stata realizzata proprio con la libreria Three.js, come accennavo nel relativo articolo: questo per dare un esempio concreto del suo utilizzo. Niente di strano: si possono scrivere a mano le matrici e ci si può occupare personalmente di tutti i calcoli necessari, ma questo va bene solo in fase di apprendimento, quando è necessario capire i meccanismi della grafica 3D. Quando però si passa dall'apprendimento alla produzione, librerie ausiliarie come Three.js sono fondamentali, per ridurre il lavoro e il tempo da spendere sul progetto. In linea generale, usare Three.js per lavorare col WebGL è come usare jQuery per lavorare col JavaScript: entrambe le librerie costituiscono un modo per interagire a un livello più alto di astrazione con la materia grezza che si trova sotto di esse. Esattamente come jQuery, poi, Three.js non è l’unica libreria esistente, per lavorare col WebGL, ma solo una delle più diffuse e più usate.

Le caratteristiche di Three.js, dunque. Prima e principale caratteristica, comune anche alle altre librerie della stessa famiglia, è di occuparsi per conto nostro della matematica necessaria: significa che ci risparmieremo parecchie linee di codice, ad alto tasso di errori e basso tasso di divertimento (soprattutto se non amiamo la matematica). Sempre per conto nostro, Three.js si occupa anche della fase di rendering per ogni oggetto presente in scena: noi dovremo soltanto indicarle cosa fare e la libreria saprà come farlo, senza bisogno di nostre istruzioni. Inoltre, al puro WebGL unisce anche altri elementi, che spesso lo accompagnano ma che non sono parte diretta di quella tecnologia: ad esempio, il supporto per il mouse, così da poter interagire direttamente con la scena, spostando e trascinando oggetti e così via. Infine, ma non meno importante, Three.js permette facilmente di introdurre una soluzione alternativa, anche per quei browser che non supportano il WebGL: se non è presente il supporto per il 3D, possiamo sostituirlo col normale canvas 2D. Come è ovvio, il risultato estetico non sarà identico, ma la grafica o il videogioco funzioneranno ugualmente.

Three.js, poi, è orientata verso una programmazione a oggetti, il che può essere sia un vantaggio, sia uno svantaggio, a seconda dei punti di vista e delle abitudini di lavoro col JavaScript: se decidete di usare questa libreria, preparatevi a dover ricorrere spesso a new, per creare nuovi oggetti, che possono essere figure geometriche, luci, videocamere, la scena che contiene tutta la grafica e così via. Così ha deciso il suo autore.

Una caratteristica curiosa di Three.js, poi, è la presenza di un grande numero di esempi, abbinata a una documentazione alquanto scarna, sul piano dei manuali: quando scaricate la libreria, non aspettatevi niente di più elaborato di un basilare “Hello World”, incluso nel pacchetto. È possibile però trovare altrove guide e tutorial, principalmente in inglese, e anche accenni o capitoli dedicati a questa libreria, nei testi generali sul WebGL. Chi preferisce imparare smanettando col codice, però, avrà appunto oltre cento esempi con cui divertirsi, vivisezionandoli e sperimentando varie modifiche, per capire con la pratica il loro funzionamento. Tra parentesi, molti di questi esempi richiedono la presenza di un server, per funzionare: se ne avete uno installato sul vostro computer, apriteli da lì e ne guadagneranno anche le prestazioni.

I passaggi fondamentali, per creare e popolare una scena, non sono poi molto diversi da quelli che avevamo già visto, parlando di Blender: siamo sempre nel campo della grafica 3D, dopotutto, e a cambiare sono solo il linguaggio e il tipo di ambiente. Per un qualsiasi tipo di progetto con Three.js, avremo bisogno di inserire un renderer, una camera e una scena, al cui interno potremo poi sistemare oggetti (o mesh, per sembrare più professionali), luci e quant'altro. In altri termini, gli oggetti fondamentali che dovremo creare con new, nella funzione iniziale, sono:

THREE.Renderer - un oggetto che si occupa di disegnare la scena sullo schermo.

THREE.Scene - il contenitore di tutto ciò che apparirà sullo schermo.

THREE.Camera - la videocamera virtuale, attraverso cui vedremo la scena.

A questi tre oggetti, indispensabili, potremo poi aggiungerne altri, per avere anche qualcosa da vedere sullo schermo. Questi oggetti supplementari sono

THREE.Light - una sorgente di luce, di un colore a nostra scelta, indispensabile se vogliamo che sia resa la illusione di tridimensionalità degli oggetti (senza luce, appariranno bidimensionali).

THREE.Object3D - la classe base degli oggetti raffigurabili: alcuni tipi sono già definiti e pronti all'uso, altri li possiamo creare noi.

La tipologia base di oggetti, come già abbiamo visto con Blender, è Mesh e a ogni mesh dovremo assegnare due altri oggetti, nel momento della creazione: THREE.Geometry, che contiene la forma dell’oggetto (cubo, sfera, prisma eccetera) e THREE.Material, che contiene informazioni sulle qualità dell’oggetto, come il colore. In un qualsiasi progetto con Three.js, dunque, la funzione iniziale creerà un renderer, una scena, una camera, aggiungerà alla scena i vari oggetti presenti e la camera, infine passerà la mano al loop, che continuerà a ridisegnare lo schermo,a intervalli regolari. Un esempio di come fare tutto questo lo troviamo già nel pacchetto della libreria, sotto forma di breve tutorial nella cartella "docs"; per il resto, potremo divertirci a squartare la caterva di esempi disponibili.

Esperimenti di Chrome: Cube Slam e WebRTC

2013-06-20T09:13:00.001+02:00

Una quarantina di anni fa, quando i computer vivevano la loro età del rame e i videogiochi erano ancora in piena età della pietra, compariva sulla scena Pong, uno dei primi esemplari di gioco. Pong aveva una struttura molto semplice: due lineette verticali, una a destra e una a sinistra, si rilanciavano a vicenda un quadratino, potendosi muovere solo verso l’alto o verso il basso. Con una certa dose di fantasia, era una simulazione di ping-pong.

Curiosamente, proprio questo videogioco “preistorico” è stato scelto da Google, per essere utilizzato come cavia con cui testare e mostrare una nuova tecnologia per la comunicazione web: ne è nato così Cube Slam, uno degli ultimi esemplari appartenenti alla categoria dei Chrome Experiments, ossia applicazioni web sviluppate per mostrare quale sia il supporto offerto da Google Chrome a vari tipi di tecnologie sperimentali. Nel caso di Cube Slam, la tecnologia in questione è il WebRTC, che consente una comunicazione diretta da browser a browser, usando soltanto elementi nativi del browser stesso: niente Flash o altri tipi di plugin esterni, insomma. Ma guardiamo meglio cosa sia Cube Slam.

Questa è la schermata introduttiva, che apparirà se ci colleghiamo alla pagina con Google Chrome. Altri tipi di browser, come Firefox o Safari, potrebbero funzionare, ma non è garantito: dopotutto, è un progetto che serve a mostrare le funzionalità di Chrome e non ci si può aspettare che sia anche ottimizzato per funzionare altrettanto bene su altri browser.

Come possiamo vedere al centro, il campo di gioco è più o meno identico a quello del vecchio Pong, con una notevole variante: Cube Slam è tridimensionale, di conseguenza le due lineette sono sostituite da due parallelepipedi e il quadratino è adesso un cubo. Differenze marginali, si potrebbe dire. Una differenza più notevole è data dal contenuto del gioco, dove il semplice tic toc delle due lineette che si rilanciano l’un l’altra un quadratino è stato arricchito da svariati elementi extra, come campi gravitazionali, ostacoli, bombe e più o meno tutto l’armamentario che si può immaginare in un videogioco di questo tipo.

Sempre dalla schermata introduttiva, possiamo notare un altro particolare, cioè le due modalità di gioco offerte: contro un amico, oppure contro un orso. La seconda, per quanto possa suonare bizzarra, è soltanto un modo per dire che giocheremo contro il computer, ossia contro una tipica AI da videogioco, in questo caso impersonata da un orso. La prima opzione è invece molto più interessante, perché ci conduce al cuore dell’esperimento: la comunicazione diretta via browser, nel caso specifico tra il nostro browser e quello di un amico, contro il quale giocheremo.

WebRTC, ossia Web Real Time Communication, è una nuova tecnologia, per introdurre una comunicazione diretta tra browser, utilizzando solo le risorse a disposizione dei browser, senza appoggiarsi a programmi esterni. In particolare, il fine di WebRTC è quello di rendere la comunicazione audio e video, attraverso i browser, semplice e immediata quando la comunicazione testuale. Cube Slam utilizza WebRTC per collegarci direttamente col browser di un nostro amico, se scegliamo di giocare contro un amico e se l’amico è in linea (ovviamente), gestendo in modo diretto la comunicazione tra noi e lui: noi vedremo sullo schermo il nostro amico e lui vedrà noi. Niente di diverso da una normale video chat, da un certo punto di vista, ma la differenza sta nel modo in cui la comunicazione è realizzata: direttamente dal browser e non utilizzando un plugin di Skype, come ad esempio fa Facebook. peraltro, lo scopo stesso del gioco è proprio quello di abbattere lo schermo del nostro avversario, cosa che avverrà dopo che lo avremo colpito per tre volte.

Per essere giocato contro un amico, quindi, Cube Slam richiede la presenza di webcam e microfono (sì, oltre a vederci, possiamo anche insultarci in diretta, mentre giochiamo): se non utilizziamo un firewall (pessima abitudine), i dati saranno trasmessi direttamente dal nostro browser al browser del nostro amico, senza bisogno di un server, in un modo simile a quanto avviene con programmi P2P, come eMule o BitTorrent.

Per quanto riguarda la grafica, che è in 3D, può essere visualizzata in due modi: se il nostro browser supporta il WebGL, che è una grafica 3D nativa dei browser, il gioco sarà visualizzato utilizzando quella, dato che è stato prodotto con three.js, una libreria JavaScript per semplificare il ricorso alla grafica 3D; in assenza di WebGL, invece, ripiegherà sulla simulazione del 3D attraverso il CSS, così da garantire un risultato simile, anche se non proprio identico, anche su altri browser.

Scribus, alternativa libera a InDesign

2013-06-15T09:06:00.002+02:00

Scribus è un programma di impaginazione libero e open source, disponibile per tutti i principali sistemi operativi: Windows, Macintosh, Linux/UNIX e così via. Meglio ancora, è disponibile in lingua italiana e corredato da una valida guida interna (anche questa in gran parte in italiano), che ne descrive la struttura, le funzioni principali e fornisce anche un breve tutorial, con un esempio concreto di creazione di un documento. È un buon punto di partenza e vale la pena cominciare da lì il proprio studio di Scribus.

L’installazione del programma non dovrebbe presentare particolari problemi, ma per gli utenti Windows c’è un’avvertenza: al termine della procedura di installazione, se decidete di aprire il file readme, Scribus vi segnalerà che avreste dovuto installare un altro programma, prima di Scribus, e cioè Ghostscript. Se non lo avete installato, a ogni successivo avvio Scribus si lamenterà di non riuscire a trovarlo: è bene dunque scaricare e installare Ghostscript, prima di installare Scribus. A ogni modo, è anche possibile utilizzare Scribus, senza aver installato Ghostscript, ma alcune funzioni non saranno disponibili, ossia le funzioni per cui è richiesto Ghostscript: nello specifico, non potrete importare file in formato EPS, utilizzare l’anteprima di stampa, o generare codici a barre. Nei sistemi operativi Linux/UNIX, invece, Ghostscript è di solito già installato, per cui il problema non si pone, anche se potrebbe essere necessario aggiornarlo.

Una volta installato, al primo avvio vi troverete molto probabilmente davanti a questa finestra,

cioè la finestra per la creazione di un nuovo documento. A differenza di un elaboratore di testi, come ad esempio Word o Writer, o anche il semplice Blocco Note, non ci sarà già una pagina bianca standard ad aspettarvi, pronta a essere profanata dai vostri scritti: dovrete crearla voi stessi, in base alle vostre esigenze per quel particolare lavoro. per facilitarvi le cose, ma anche per darvi un primo suggerimento su come cominciare, Scribus vi proporrà subito la finestra per la creazione di un nuovo documento. Se lo trovate troppo invasivo, o se non amate in generale essere imboccati con le operazioni da svolgere, potete sempre selezionare “Non mostrare più questa finestra di dialogo”, in basso a sinistra: in questo caso, all'avvio vi troverete davanti il programma nudo e crudo, in attesa che voi apriate un file già esistente, oppure creiate un nuovo documento.

Come ho detto in precedenza, nella guida di Scribus è presente un tutorial in italiano, che vi mostrerà le principali funzioni del programma: se decidete di seguirlo, lo troverete nella sezione Documentazione -> Le basi di Scribus, col titolo “Iniziare subito a lavorare con Scribus”. Un altro possibile punto di partenza è il tutorial online, che potete raggiungere dal menu Aiuto -> Guide online, sotto il nome di “Primi passi con Scribus”.

Più in generale, è utile leggere tutti gli articoli presenti nella sezione “Le basi di Scribus”, nella guida interna, se non avete mai utilizzato un programma di questo genere. È opportuno ripetere, infatti, che Scribus non è un programma per la creazione o la scrittura di testo, ma per la sua impaginazione: anche se contiene un elaboratore di testo molto semplice (poco più di un Blocco Note), il suo utilizzo fondamentale consiste nell'importare documenti e poi impaginarli, non crearli da zero. In altri termini, se volete creare un semplice volantino, con due righe di testo, potete farlo direttamente con Scribus, senza problemi; se invece lo volete usare per impaginare un libro o una rivista, scrivete prima di tutto il testo col vostro editor preferito, salvatelo in un formato TXT o ODT e poi utilizzate pure Scribus per impaginarlo, aggiungere le immagini e così via. Una volta concluso il lavoro, il risultato finale potrà essere esportato come PDF, come immagine, oppure stampato (o anche tutte e tre le cose assieme, volendo).

Le funzioni di base di Scriptus possono poi essere semplificate, utilizzando script per automatizzare diversi tipi di operazioni: alcuni sono preinstallati e li potete trovare elencati nel menu Script, ma potete aggiungerne quanti volete, in base alle vostre esigenze. L’unico requisito necessario è saper programmare in Python, cioè il linguaggio in cui gli script sono realizzati; inoltre, è anche possibile aggiungere plugin, in questo caso realizzati in C++. La guida di Scribus fornisce qualche informazione in proposito, nella sezione For Developers, assieme a una introduzione alla creazione di plugin in C++, ma non è stata tradotta in italiano: nulla vi vieta di leggerla, se siete interessati all'argomento.

Guida al CSS per EPUB – Come lavorare

2013-06-08T16:08:00.001+02:00

Nella puntata precedente abbiamo parlato di bordi, margini e di come impostare (o annullare) la distanza tra gli elementi all'interno di una pagina. Con questo non abbiamo certo esaurito il discorso sul CSS, che include svariate altre funzioni per impaginare gli elementi su più colonne, animarli e così via, ma tutto ciò che poco o nulla a che fare con gli EPUB: se vogliamo che un nostro e-book sia leggibile senza problemi anche su uno smartphone, dobbiamo limitarci a una sola colonna e il ricorso ad animazioni, oltre ad avere poca attinenza coi libri in generale, potrebbe non essere supportato da tutti i lettori in circolazione. Volendo, il problema relativo alla dimensione dello schermo può essere risolto, ricorrendo a un layout adattabile (come accade su molti siti web), ma è un argomento che va ben al di là sella semplice introduzione al CSS e, semmai, lo affronterò in futuro. Per adesso, vediamo invece di riassumere il discorso, con un esempio più concreto.

Supponiamo di dover lavorare su una pagina strutturata in questo modo:

<body>

<div class=”titolo”>

<h2>Capitolo 1</h2>

</div>

<div class=”testo”>

<p class=”primo”>Testo del primo paragrafo.</p>

<p>Testo del paragrafo.</p>

<p>Testo del paragrafo.</p>

<p>Testo del paragrafo.</p>

<p>Testo del paragrafo.</p>

<p>Testo del paragrafo.</p>

<p>Testo del paragrafo.</p>

</div>

</body>

Corrisponde più o meno a una struttura ideale, per lavorare col CSS. Come ho accennato in precedenza, diversi tag HTML possiedono una formattazione di base, inserita automaticamente dal browser o dal dispositivo di lettura: il tag <p>, ad esempio, sarà quasi sempre seguito da una riga vuota, a separarlo dal paragrafo successivo, mentre i vari tag usati per i titolo, come <h1>, <h2> e così via, avranno già in partenza una dimensione differente, rispetto al testo normale, e spesso saranno anche visualizzati in grassetto. Queste impostazioni automatiche possono andarci bene, ma possono anche essere una seccatura, se vogliamo avere un controllo totale sulla grafica della pagina. Se le consideriamo una seccatura, nella prima parte del foglio di stile possiamo inserire alcune regole per annullarle: le ho riassunte nel file CSS che potete scaricare da qui. Per usarle, copiate il contenuto e incollatelo all'inizio del vostro foglio di stile, così da fare piazza pulita di tutto, prima di cominciare il lavoro.

Per scrivere il nostro foglio di stile, ricordiamo sempre il principio di base del CSS: partiamo dalle regole più generali, che costituiranno la base del nostro stile, e procediamo poi verso le regole più specifiche, che riguarderanno soltanto piccole porzioni di testo. Nella nostra pagina di esempio, il tag di base è <body>, che li include tutto. È il capofamiglia, se ricordiamo la struttura gerarchica dello HTML. Subito dopo di lui, vengono i tag <div class=”titolo”> e <div class=”testo”>, alla pari: sono tag fratelli (oppure sorelle, come preferite), nonché figli del tag <body>. Il tag <div class=”titolo”> ha un solo figlio, ossia il tag <h2>, e il suo ramo si conclude lì; il fratello <div class=”testo”>, invece, ha diversi figli, tutti i tag <p>, e ognuno di essi avrà probabilmente altri figli, se abbiamo usato qualche corsivo o grassetto, oppure se abbiamo inserito link, immagini o altro. È una famiglia molto ramificata, ma dobbiamo sempre ricordare la sua struttura: i figli ereditano lo stile del padre, a meno che questo stile non sia modificato in una delle loro regole.

Se vogliamo impostare uno sfondo che valga per tutto il capitolo, impostiamolo come regola per il tag <body>. Scriveremo ad esempio:

body{

    color: yellow;

}

se vogliamo che il capitolo abbia uno sfondo giallo. Potremo poi cambiare il colore dello sfondo per un tag specifico, ma il giallo sarà il colore di base per lo sfondo di tutti gli elementi della pagina. Se vogliamo impostare un font di base, modificandolo eventualmente per i titoli, il tag body è sempre un buon punto in cui impostarlo. Unendolo alla regola precedente, otterremo

body{


  color: yellow;

  font-family: “Times New Roman”, Times, serif;

}

che assegnerà uno sfondo giallo alla pagina e imposterà il font di base per tutto il testo. Per modificare il font del titolo, poi, basterà scrivere

.titolo{

  font-family: "Arial Black", Arial, sans-serif;

}

In questo modo, il tag <div class=”titolo”> utilizzerà un font diverso, che sarà ereditato dai suoi figli (il solo tag <h2>, in questo esempio). Il contenuto di <div class=”testo”>, invece, erediterà il font impostato per <body>, che è suo padre. Se la catena di genitori, figli e fratelli ci confonde, può essere utile tracciare un breve schema della rete di rapporti, così da averla sempre a portata di occhio, mentre scriviamo il foglio di stile: può aiutare a chiarire perché un determinato elemento abbia un certo colore, oppure utilizzi un certo font.

Il tag body è un ottimo posto anche per inserire tutte le regole che determineranno i margini della pagina, quando spazio vuoto dovrà essere lasciato sui bordi, eccetera. Ad esempio, se al tag body aggiungiamo anche una regola

padding: 7px 10px 5px 10px;

tutta la pagina presenterà un margine alto di sette pixel, laterale di dieci pixel e basso di cinque pixel: avremo insomma creato una piccola cornice bianca attorno al contenuto della pagina.

Titolo e testo, nel nostro esempio e nella maggior parte delle pagine ben strutturate, sono due elementi fratelli: le regole che assegniamo a uno non influiscono sull'altro ed è bene così. Per separarli, inserendo un certo spazio tra il titolo e il primo paragrafo del testo, non premiamo tre o quattro volte il tasto “Invio”, perché il risultato non è garantito. Il modo migliore per separarli è usare i margini, come già abbiamo visto. ad esempio, se scriviamo la regola

.titolo{
  margin-bottom: 30px;

}

avremo la garanzia che il titolo e il primo paragrafo saranno separati da uno spazio vuoto di trenta pixel. Possiamo assegnare qualsiasi valore, a seconda delle nostre preferenze, ma la cosa importante è assegnarlo alla proprietà margin-bottom, che determina la distanza tra la fine di questo elemento e l’inizio del successivo.

Venendo al testo, molti libri scelgono di rientrare la prima riga di ogni paragrafo. Se vogliamo adottare questo stile per il nostro EPUB, basterà una regola del tipo

p{
  text-indent: 2em;

}

che produrrà un rientro pari a due caratteri nella prima riga di ogni tag <p>. Il primo paragrafo di un capitolo, a volte, riceve un trattamento particolare: per questo gli abbiamo assegnato una classe “primo”, che useremo nel CSS per modificare soltanto quel paragrafo. Ad esempio,

p.primo{
  text-indent: 0;

}

azzera il rientro per il tag <p> che possiede un attributo class=”primo”, ossia il primo paragrafo del nostro capitolo. Essendo poi una regola più specifica, è meglio inserirla dopo la regola generale, che abbiamo scritto per il tag <p>. Se poi vogliamo davvero sbizzarrirci e dare un aspetto particolare alla prima lettera del capitolo, in memoria degli antichi testi miniati medievali, possiamo ricorrere a una regola ancora più specifica, ossia

p.primo:first-letter{

  position: relative;

  display: block;

  float: left;

  font-weight: bold;

  font-size: 4.4em;

  line-height: 0.8em;

  color: rgb(40,40,40);

}

che potrete divertirvi a decifrare, sulla base delle puntate precedenti. In linea di massima, la regola di rivolge alla prima lettera del paragrafo con classe “primo”: ingrandisce la lettera, la colora, la rende in grassetto e la allinea al resto del paragrafo. Questa regola, che è specifica al massimo grado (riguarda solo una lettera di un paragrafo), la collocheremo alla fine della parte del foglio CSS dedicata ai paragrafi.
Tutte le regole che modificano elementi interni a un tag <p>, come possono esserlo i tag <b>, <i> e così via, li sistemeremo subito dopo la sezione dedicata al paragrafo: una buona organizzazione del foglio di stile ci aiuterà a vedere meglio i rapporti di parentela tra gli elementi. Il foglio di stile, dunque, potrebbe avere una struttura finale di questo tipo:

body{

  //regole globali

}

.titolo{
  //regole per la sezione “titolo”

}

.titolo h2{
  //regole specifiche per il tag <h2>, quando si trova in un elemento con class”titolo”

}

.testo{
  //regole generali per il corpo del capitolo

}

p{
  //regole specifiche per i paragrafi

}

p.primo{
  //regole specifiche per il paragrafo con classe “primo”

}

p.primo:first-letter{
  //regole specifiche per la prima lettera del paragrafo con classe “primo”

}

b{
  //regole specifiche per il tag <b>

}

e così via. Combinando i tag, possiamo ottenere regole sempre più specifiche e precise, ad esempio la regola

p b{

//regole per i tag <b> all’interno di un tag <p>

}

che si rivolge soltanto a un sottogruppo dei tag <b>, ossia quelli che sono figli di un tag <p>. Il principio di base, che dobbiamo sempre ricordare per risparmiarci fatica inutile è: partiamo dal generale e scendiamo sempre più verso il particolare. Ricordarlo e applicarlo non ci metterà al sicuro dagli errori, ma ci aiuterà a ridurli e a localizzarli più facilmente.

Guida al CSS per EPUB – Impostare i margini

2013-06-04T09:19:00.001+02:00

Nella puntata precedente abbiamo visto alcune delle proprietà che dobbiamo modificare, per cambiare l’aspetto di un paragrafo o della pagina: è un buon inizio, per posizionare correttamente un elemento, ma ancora non basta, soprattutto se siamo interessati a controllare gli spazi tra un elemento e l’altro (le famigerate righe vuote tra i paragrafi, insomma, contro cui spesso ci si trova a dover combattere). Se convertiamo un documento con Calibre, e non prestiamo attenzione a tutti i valori da impostare, molto spesso ci troveremo coi paragrafi separati tra loro da fastidiose linee bianche, proprio come accade quando scriviamo qualcosa in Sigil. Per capire cosa siano e imparare a evitarle o eliminarle, dobbiamo prima osservare come il CSS gestisca lo spazio nello HTML.

Pensiamo a un tag HTML (e al suo contenuto) come a una porzione di spazio, uno dei mattoncini LEGO che formano la pagina. Ognuno di questi tag, in linea di massima, è rappresentato come un rettangolo, più o meno grande a seconda dei casi: il tag <body> è un rettangolo grande quanto la pagina intera, il tag <p> è grande quanto il paragrafo contenuto, il tag <h1> sarà grande invece quando la riga di titolo corrispondente, e così via. Una pagina è dunque un muro, composto da tanti mattoni, di dimensione diversa: ogni tag è un mattone e il contenuto del tag determina la grandezza del mattone.

Il CSS ci permette di impostare e controllare tre proprietà spaziali, per ogni mattone: margin, padding e border. Border è il più semplice di tutti: è il perimetro del rettangolo e possiamo usarla per disegnare una “cornice” attorno a un elemento. Padding è lo spazio vuoto tra il bordo e il contenuto interno: se abbiamo deciso di racchiudere un paragrafo in una cornice, usando border, padding ci dirà quanto spazio bianco vedremo tra la cornice e il testo del paragrafo. Margin, infine, è lo spazio che separa il bordo di un tag dal bordo dei tag che lo circondano: è lo spazio che fa da cuscinetto tra un mattone e l’altro, separandoli. L’insieme di questi tre elementi forma il cosiddetto “modello a box”, nel CSS.

In breve, border segna il confine di un elemento, padding è lo spazio interno tra il confine e il contenuto dell’elemento, margin è lo spazio esterno tra il confine e gli altri elementi che lo circondano. Ognuna di queste tre proprietà può essere impostata individualmente, per ognuna delle quattro direzioni, oppure può essere impostata con un comando solo per tutti e quattro i lati. Inoltre, ognuna può essere impostata a zero, se vogliamo eliminare le formattazioni automatiche di alcuni tag (tipo <p>).

padding

Come detto, è lo spazio che separa il contenuto di un elemento dal suo bordo: se vogliamo disegnare una cornice attorno al testo, padding è la proprietà che dovremo impostare, per lasciare un certo spazio tra il bordo e il testo. Se un elemento utilizza la proprietà background-color, per colorare lo sfondo, allora anche la fascia di padding sarà colorata, in quanto è interno all'elemento.

A seconda dei casi, possiamo utilizzare una delle quattro varianti “locali” di padding, per impostarlo solo su un lato, oppure possiamo usare direttamente padding, per impostarlo in una volta sola su tutti e quattro i lati. Le quattro varianti sono padding-top, padding-right, padding-bottom, padding-left, sistemate come nella immagine soprastante: per ognuna possiamo indicare una delle unità di misura permesse dal CSS, per indicare quanto spazio lasciare. Ad esempio,

padding-top: 5px;

padding-left: 10px;

lasciano rispettivamente uno spazio vuoto di cinque pixel sopra il contenuto dell’elemento, e uno spazio vuoto di dieci pixel a sinistra del contenuto. Se invece scriviamo

padding: 5px 10px 5px 10px;

possiamo impostare in una volta sola la distanza per tutte e quattro le direzioni: in questo caso, il primo numero sarà la distanza in alto, il secondo la distanza a destra, il terzo la distanza in basso e il quarto la distanza a sinistra. Se vogliamo usare questa proprietà “unica”, è importante ricordare il corretto ordine: alto-destra-basso-sinistra, ossia top-right-bottom-left. Per memorizzare la sequenza, partite da sopra e muovetevi in senso orario. Se invece li impostiamo individualmente, non è importante seguire un ordine.

Infine, se vogliamo assegnare lo stesso valore a tutti e quattro i lati, possiamo utilizzare una formula ancora più breve, ossia

padding: 10px;

In questo modo, tutti e quattro i lati avranno un margine interno di dieci pixel (o di qualsiasi altro numero indicheremo).

margin

Come detto, è lo spazio che separa questo elemento dagli altri elementi che lo circondano: il suo “spazio vitale”, se preferite pensarla così. Funziona esattamente come padding, in tutto e per tutto, ma non sarà colorato, se abbiamo impostato un valore per background-color, in quanto lo spazio di margin non fa parte del nostro elemento, ma è esterno. Avremo dunque margin-top, margin-right, margin-bottom e margin-left, come proprietà individuali, e margin come proprietà unica, che le riassume tutte quante. Ad esempio,

margin-top: 12px;

margin-right: 8px;

imposteranno il margine esterno a dodici pixel in alto (margin-top) e a otto pixel sulla sinistra (margin-left). Utilizzando invece la formula abbreviata, possiamo scrivere

margin: 4px 5px 10px 6px;

così imposteremo un margine in alto di quattro pixel, a destra di cinque pixel, in basso di dieci pixel e a sinistra di sei pixel. Se vogliamo usare lo stesso numero per tutti e quattro i lati, la formula abbreviata resta sempre

margin: 5px;

proprio come abbiamo già visto per padding. Queste due proprietà funzionano allo stesso modo e cambia solo il luogo in cui collocano lo spazio vuoto nell'elemento: margin lo colloca all'esterno del bordo, padding lo colloca all'interno del bordo.

border

Concludiamo proprio col bordo. La proprietà border disegna una cornice attorno a un elemento e, può essere utilizzata sia per tracciare questa cornice attorno a tutto l’elemento, sia per tracciarla solo su alcuni dei quattro lati. Come i suoi colleghi, dunque, anche border ha le versioni specifiche, ossia border-top, border-right, border-bottom e border-left, che tracciano il bordo soltanto sul rispettivo lato del nostro elemento, ma i valori da attribuire a queste proprietà sono alquanto diversi: per disegnare un bordo, infatti, dovremo assegnare valori come il colore, lo spessore e lo stile.

Il primo valore che indichiamo, di solito, è lo spessore del bordo, espresso in pixel. Il secondo valore indica lo stile con cui sarà disegnato il bordo e lo possiamo scegliere tra i seguenti: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden. Solid è una normale linea chiusa, dotted è una linea punteggiata, dashed una linea tratteggiata, double una linea doppia, none elimina il bordo, hidden lo nasconde (di fatto ottiene lo stesso risultato di none, cioè il bordo non si vedrà, ma nascondere una cosa è diverso da eliminarla), mentre gli altri quattro producono particolari effetti grafici, più semplici da vedere che da descrivere. Infine, il terzo valore è il colore che il bordo dovrà avere e lo possiamo impostare seguendo le regole già viste prima, parlando degli attributi color e background-color. Qualche esempio:

border: 2px dotted red;

border-bottom: 1px solid rgb(0, 0, 255);

nel primo caso, tracceremo su tutti e quattro i lati un bordo punteggiato, dallo spessore di due pixel e di colore rosso; nel secondo caso, tracceremo sotto l’elemento un bordo solido, dallo spessore di un pixel e di colore blu (una sottolineatura blu, insomma).

Possiamo utilizzare la forma abbreviata border, soltanto se vogliamo che il bordo sia identico su tutti e quattro i lati; se vogliamo disegnare bordi di spessore o di colore diverso, dovremo utilizzare le proprietà individuali per i quattro lati, ossia border-top, border-right, border-bottom e border-left. Non so perché qualcuno dovrebbe desiderare un bordo arlecchino e di dimensioni diverse, per una parte del proprio EPUB, ma questo è un altro paio di maniche: se il vostro senso estetico vi spinge in questa direzione, usate le quattro proprietà individuali; se siete tradizionalisti e volete un bordo uniforme su ogni lato, usate pure la formula abbreviata.

Ovviamente, border, margin e padding possono essere utilizzati su qualsiasi tipo di tag, ma non sempre otterremo il risultato previsto da noi. Lo HTML distingue infatti tra due tipi di tag, ossia quelli che creano un blocco nel testo e quelli che coabitano su una stessa linea. I tag <p> e <div> sono esempi tipici di tag che creano blocchi (servono proprio a dividere la pagina in sezioni logiche) e sono spesso accompagnati da una separazione grafica sullo schermo; i tag <b>, <span> e <a> sono esempi tipici di tag che coabitano su una stesa linea, senza dividere la pagina in blocchi. In caso di tag “in linea”, assegnare margini in alto e in basso non funzionerà come previsto, mentre i margini laterali non daranno problemi: non possiamo insomma usare padding-top o margin-bottom per aumentare lo spazio tra le linee. O almeno, non normalmente.

Esiste infatti una proprietà particolare, che ci permette di decidere se un tag dovrà comportarsi come un blocco, oppure come un tag “in linea”: è la proprietà display. Se a un tag assegniamo il valore

display: inline;

quel tag coabiterà pacificamente sulla stessa linea con altri tag, a prescindere da quale sia il suo tipo; se invece gli assegniamo il valore

display: block;

quel tag creerà un blocco indipendente all'interno della pagina, proprio come il tag <p>, e potremo controllare i sui margini su tutti e quattro i lati.
Nella prossima puntata, tireremo le somme.

Guida al CSS per EPUB - Formattare il paragrafo

2013-05-31T12:52:00.001+02:00

Nella puntata precedente abbiamo visto una serie di regole per la modifica del testo: come impostare il font, scegliere la dimensione del testo, il suo colore e applicare alcuni tipi di decorazione a una o più parole. Proseguendo col discorso, vedremo oggi le regole per modificare interi blocchi di testo, ossia i singoli paragrafi o l’intera pagina del nostro EPUB: regole che normalmente applicheremo al tag <p>, oppure alla classe attribuita al tag <p>, ma anche regole che si possono applicare alla classe del tag <div>, che racchiude il contenuto dell’intero capitolo, se abbiamo seguito la struttura proposta in precedenza.

line-height

Come forse si potrà intuire già dal nome questa proprietà ci permette di impostare l’altezza delle linee nel nostro paragrafo o nella nostra pagina: maggiore è il valore che assegneremo a questa proprietà, maggiore sarà lo spazio tra una linea e l’altra (la famosa interlinea, insomma). Le unità di misura utilizzabili sono quelle che abbiamo già visto, ma in linea di massima è meglio usare solo le percentuali, oppure gli em, assieme a questa proprietà, così da rendere più dinamico lo spazio tra le linee: se è espresso in percentuale o in em, si adatterà di volta in volta alla dimensione del carattere, invece di rimanere fisso, come accadrebbe usando i pixel. Ad esempio,

line-height: 150%;

line-height: 2em;

Impostando una interlinea pari a due caratteri, questa dimensione si manterrà costante, qualunque sia la dimensione del carattere. Nei browser e in buona parte dei dispositivi, il valore base di questa proprietà è 120%.

text-align

Questa proprietà permette di formattare il testo di un paragrafo o di una pagina, allineandolo a destra, a sinistra, al centro, oppure giustificandolo: una proprietà che avremo utilizzato migliaia di volte, lavorando con Word o Writer. I valori che possiamo assegnare sono quattro e corrispondono ai quattro possibili stili di formattazione: right, left, center, justify. Questo è un tipico attributo, che vorremo assegnare all'intero testo e non a ogni singolo paragrafo, ed è di conseguenza un buon candidato per essere utilizzato con la classe di un eventuale <div>, che racchiude l’intero contenuto del capitolo. Esempi di utilizzo:

text-align: left;

text-align: justify;

il primo allineerà il testo a sinistra, il secondo lo giustificherà su entrambi i margini.

text-indent

Questa proprietà la utilizzeremo solitamente assieme al tag <p>, per assegnarla in modo uniforme a tutti i nostro paragrafi: è infatti una proprietà che ci permette di impostare il rientro della prima riga di testo in un paragrafo (e solo la prima riga). Tipicamente, attribuiremo a questa proprietà un valore espresso in pixel o in em, con una preferenza per la seconda soluzione: un rientro di 3em, pari a tre caratteri, resterà costante anche variando la dimensione del carattere, mentre un rientro di 10 pixel non si adatterà a un eventuale ingrandimento del testo (ricordiamo che praticamente tutti i dispositivi di lettura danno la possibilità di ingrandire o rimpicciolire il testo). Una regola

text-indent: 4em;

assegnerà un rientro pari a quattro caratteri alla prima riga di tutti i paragrafi (se ci siamo ricordati di racchiudere ciascuno di essi in un tag <p>).

:first-letter

Questa è una pseudoclasse CSS, che può essere abbinata a un tag e ci permette di assegnare uno stile speciale alla prima lettera di ogni paragrafo. Un suo uso tipico è

p:fist-letter{

//regole da attribuire alla prima lettera

e all'interno delle parentesi graffe inseriremo poi le proprietà che la prima lettera del paragrafo dovrà possedere. Se vogliamo essere ancora più specifici, e sogniamo uno EPUB con la prima lettera di ogni capitolo miniata, come un manoscritto medievale, dovremo prima di tutto assegnare una classe particolare al primo paragrafo, ad esempio <p class=”primo”>, e poi useremo una struttura del tipo

.primo:first-letter{

//regole da assegnare alla prima lettera

così da modificare soltanto la prima lettera dei paragrafi che possiedono la classe “primo”. Una cosa da ricordare è che non dovremo lasciare spazi vuoti tra il nome del tag (o della classe) e i due punti di :first-letter. Fra le parentesi graffe, poi, potremo utilizzare qualsiasi regola già vista per il testo: assegnare font particolari, ingrandire il testo, renderlo in grassetto, colorarlo, ma anche colorare il suo sfondo (lo vedremo a breve) e così via.

:first-line

Identico al precedente, ma si applica alla prima riga del testo nel tag con cui lo stimo utilizzando. Ad esempio,

p:first-line{

//regole da assegnare alla prima riga

ci permetterà di assegnare uno stile particolare alla prima riga di ogni paragrafo. Vale quanto già detto in precedenza, con un avvertimento supplementare: se vogliamo attribuire più stili a uno stesso paragrafo (ad esempio uno stile generale per il paragrafo, uno per la prima riga e un terzo stile per la prima parola), è importante scrivere le varie regole in ordine, dalla più generale alla più particolare. Nel foglio di stile, per prima scriveremo la regola da applicate a tutti i paragrafi, poi scriveremo le regole da applicare solo ad alcuni paragrafi, poi quelle da applicare alla prima linea di alcuni paragrafi, infine quelle da applicare alla prima lettera. Questo vale per qualsiasi tag ed è un principio che è sempre bene ripetere.

background-color

Questa proprietà è utilizzata per assegnare un colore allo sfondo del tag, come è possibile intuire dal nome stesso della proprietà: se color serviva a colorare il testo, questa serve a colorare la superficie su cui il testo si trova. Possiamo assegnarla a una singola riga, per ricreare un effetto da evidenziatore, ma molto più spesso ci troveremo a utilizzarla per l’intera pagina, oppure per singoli paragrafi o blocchi della pagina: ad esempio, per assegnare un colore particolare allo sfondo del titolo del paragrafo, così da marcarne la differenza rispetto al contenuto, ma possiamo anche assegnare un colore particolare allo sfondo della prima lettera del paragrafo, oppure della prima riga.

Qualunque sia il modo in cui deciderete di utilizzarla, le regole sono le stesse che abbiamo già visto per color: il colore può essere espresso con un nome in inglese (se è uno dei colori principali), oppure con un numero esadecimale, o infine con un blocco rgb() o rgba(), al cui interno indicheremo le quote dei tre colori fondamentali (rosso, verde e blu) da miscelare, per ottenere il colore che ci serve. Niente di nuovo, insomma. Di conseguenza,

background-color: red;

background-color: #FF0000;

background-color: rgb(255, 0, 0);

sono tre modi per indicare il colore rosso, da attribuire allo sfondo di un elemento.

background-image

Per chi non si accontenta dei colori, è possibile anche inserire una immagine come sfondo per un elemento, oppure per tutta la pagina: la proprietà background-image ci permette di fare proprio questo. Ad esempio,

background-image: url(../Images/sfondo.jpg);

ci permetterà di inserire l’immagine “sfondo.jpg” come sfondo per il tag a cui avremo assegnato questa proprietà. Tra la parentesi di url(), ovviamente, dovremo indicare il punto in cui si trova la nostra immagine, che di solito dovrebbe essere la cartella Images del nostro EPUB: se si trova in un altro posto, modificheremo l’indirizzo di conseguenza.

Utilizzare una immagine come sfondo, però, presenta alcune complicazioni, che è bene tenere presente. Se l’immagine è più piccola della superficie da coprire, normalmente sarà riprodotta a scacchiera, da sinistra verso destra e dall’altro verso il basso, fino a riempire tutto lo spazio disponibile. Se state utilizzando una piccola immagine, che simula la superficie di una pergamena o di un foglio di carta, questo comportamento potrebbe andarvi bene; in altri casi, però, potrebbe risultare alquanto molesto. Per controllare (o impedire) la ripetizione della nostra immagine, dobbiamo utilizzare una seconda proprietà, subito dopo background-image, ossia

background-repeat

A questa proprietà possiamo assegnare quattro valori: no-repeat, repeat, repeat-x, repeat-y. Il valore repeat è quello che possiede in partenza e prevede che l’immagine sia ripetuta su tutto lo schermo; il valore no-repeat impedisce che l’immagine sia ripetuta; repeat-x ripete l’immagine soltanto da sinistra verso destra, cioè in orizzontale; repeat-y la ripete soltanto in verticale. Ad esempio,

background-image: url(../Images/sfondo.jpg);

background-repeat: repeat-x;

è una combinazione che ci permette di inserire come sfondo l’immagine “sfondo.jpg”, ripetendola a oltranza da sinistra verso destra.

background-position

Dopo aver caricato una immagine come sfondo e aver deciso se e come ripeterla, per coprire la superficie a disposizione, ci resta da vedere ancora una cosa, prima di chiudere il capitolo-immagini, e cioè come posizionarla all'interno di un elemento. La proprietà background-position si occupa proprio di questo.

Background-position richiede due valori: il primo è il punto di partenza orizzontale, il secondo è il punto di partenza verticale. Questi due valori possono essere espressi usando parole-chiave o unità di misura: in teoria si potrebbero usare anche le percentuali, ma è una soluzione che richiede calcoli troppo complicati e solitamente non ne vale la pena. Le parole-chiave, per il primo valore, sono left, center e right, mentre per il secondo valore sono top, center e bottom. Scrivendo ad esempio

background-position: left top;

il punto di partenza della nostra immagine sarà l’angolo in alto a sinistra dell’elemento. Scrivendo invece

background-position: center center;

il punto di partenza della nostra immagine sarà il centro esatto dell’elemento. E così via, per tutte e altre combinazioni. Se abbiamo scelto una immagine ripetuta, il punto indicato da background-position è il punto di partenza della ripetizione; se non dovrà essere ripetuta, invece, sarà il punto in cui si troverà l’immagine.

Utilizzando unità di misura, il principio è lo stesso, ma esprimeremo la posizione di una immagine indicando la sua distanza dall'angolo in alto a sinistra dell’elemento. Di conseguenza,

background-position: 5px 10px;

inserirà la nostra immagine a cinque pixel dal bordo sinistro e a dieci pixel dal bordo superiore del nostro elemento: in pratica, sarà spostata di cinque pixel verso destra e di dieci verso il basso, rispetto ai margini dell’elemento. Un numero negativo, invece, la sposterà nella direzione opposta:

background-position: -5px -10px;

collocherà il punto di partenza di una immagine cinque pixel sulla sinistra e dieci in alto, rispetto al suo elemento; in pratica, comincerà all'esterno dell’elemento.

Proseguiremo nella prossima puntata, parlando di margini e bordi della pagina.

Guida al CSS per EPUB – Formattare il testo

2013-05-27T12:39:00.001+02:00

Nella puntata precedente abbiamo visto la struttura generale di una regola CSS: prima di tutto indichiamo il nome del tag e/o della classe a cui la regola si applicherà, poi apriamo una parentesi graffa, elenchiamo una serie di coppie formate da una proprietà e l’attributo da assegnare a quella proprietà, infine chiudiamo la parentesi graffa. Le proprietà che possiamo impostare sono parecchie, soprattutto quando stiamo lavorando sulla pagina di un normale sito web; nel caso di uno EPUB, però, diverse di queste proprietà avrebbero poco senso o poca utilità, per cui possiamo concentrarci su un numero ristretto di esse, cioè quelle che normalmente ci serviranno per formattare la nostra pagina e il nostro testo. Oggi partiremo dal testo.

Premessa generale. Il CSS utilizza più unità di misura, per definire la dimensione del testo, della pagina, i margini, eccetera, e non tutte queste unità di misura sono intuitive, come significato. Il pixel è probabilmente la più comune e la più semplice: se assegnate a qualcosa un valore di 20px (venti pixel), quell'elemento avrà sempre e comunque una dimensione di venti pixel, a prescindere da tutto il resto. A titolo di esempio, la dimensione base dei caratteri in un qualsiasi browser è di 16px, cioè sedici pixel (non lasciate spazi vuoti tra il numero e px, la sigla di pixel) e molti lettori di e-book seguono questa convenzione.

Lo em è una unità di misura più esotica ed equivale alla dimensione base dei caratteri che, come abbiamo appena visto, di solito è 16px, ossia sedici pixel. Questa unità è usata spesso per indicare la dimensione del rientro alla prima riga (se lo utilizziamo): un rientro di 3em, ad esempio, imposterà un rientro di tre caratteri, mentre 5em sarà cinque caratteri. Se a un titolo assegniamo una dimensione di 2em, lo renderemo grande il doppio rispetto ai caratteri normali, mentre un valore di 0.5em renderà il nostro testo grande la metà del normale.

La percentuale funziona come lo em, cioè determina la dimensione dell’elemento in rapporto a un altro valore, ma con una differenza: nel caso dello em, il valore di riferimento è sempre la grandezza del carattere, mentre nel caso della percentuale il riferimento varia, a seconda dei casi. Se stiamo impostando la dimensione di un carattere, e lo facciamo in percentuale, dicendo ad esempio che il testo deve essere il 150%, allora il risultato sarà equivalente a 1.5em; se però usiamo la percentuale per determinare la larghezza della pagina, il valore di riferimento non sarà il carattere, ma la grandezza dello schermo.

Abbandoniamo adesso il discorso in astratto sulle unità di misura e guardiamo come assegnare stili al testo, che è poi l'argomento principale di oggi: le unità di misura ritorneranno, ma inserite in un contesto più preciso. La prima cosa che probabilmente vorremo impostare, nel nostro EPUB, è il font, ossia il tipo di carattere da utilizzare (utilizzo la parola font al maschile, perché mi riferisco al file in cui sono contenuti i caratteri; il file, per l’appunto).

font-family

Normalmente, possiamo utilizzare nel nostro EPUB qualsiasi font preferiamo, più o meno come accade quando lavoriamo con un programma quale Word o Writer. Per assegnare il font nel foglio di stile, useremo la proprietà font-family, a cui assegneremo il nome del font come valore. Ad esempio,

p {

font-family: “Times New Roman”;

}

assegnerà il font “Times New Roman” a tutto il testo racchiuso in un tag <p>. Il nome del font deve essere racchiuso tra virgolette, se è composto da più di una parola, ma non è obbligatorio se il suo nome è di una sola parola: Times New Roman dovrà quindi essere racchiuso tra virgolette, mentre Verdana può essere scritto senza virgolette.

Possiamo specificare un solo tipo di font, come abbiamo fatto in questo caso, ma è più prudente indicarne almeno due o tre, in ordine di preferenza: al primo posto metteremo il font che preferiamo e poi, in ordine, le opzioni di riserva, separate da una virgola. Questo è importante, perché non tutti i dispositivi di lettura possiedono tutti i tipi di font: il Times New Roman è dappertutto, ma font più insoliti potrebbero non essere disponibili su un determinato dispositivo. Per limitare i danni, è bene dunque offrire una serie di font di riserva, via via più generici, che saranno utilizzati se i font più specifici mancheranno. Ad esempio, la regola

p {

font-family: Arial, Helvetica, sans-serif;

}

darà al lettore un ordine di questo tipo: “per visualizzare il testo contenuto nel tag <p>, usa il font Arial; se non è disponibile, usa il font Helvetica; se non hai neppure quello, usa un qualsiasi font di tipo sans-serif”. Serif, sans-serif e monospaced sono tre famiglie base di font e rappresentano la soluzione più generica possibile: è bene indicarle come ultima alternativa, in una lista di font. Serif è un font con piccole decorazioni alla fine della lettera ed è usato normalmente per il testo di una pagina: esempi di questa famiglia sono Times New Roman, Georgia, Garamond, Baskerville e così via. Sans-serif è un font più semplice, senza decorazioni, ed è solitamente usato per i titoli: esempi sono Arial, Helvetica, Verdana, Tahoma, eccetera. Monospaced è un font in cui tutti i caratteri occupano lo stesso spazio e conferisce al testo un aspetto da “vecchia macchina da scrivere”: esempi sono Courier, Lucida Console, Monaco, eccetera.

Se è fondamentale che il nostro testo sia riprodotto con un particolare tipo di font e vogliamo essere sicuri che sia disponibile su ogni dispositivo, dovremo incorporarlo nel nostro e-book. Ho già parlato altrove di come incorporare font in uno EPUB, per cui vi rimando a quell'articolo.

color

Una volta stabilito il font, potremmo aver voglia di colorare il nostro testo, invece di lasciarlo nel solito nero. La proprietà da modificare, in questo caso, è color, a cui dovremo assegnare un valore corrispondente al colore che ci interessa, il che potrebbe essere un poco complicato. Il colore, nel CSS, può essere indicato in almeno tre modi: per i colori base, è di solito disponibile un nome (in inglese); per colori più particolari, sfumature, o per essere sicuri che il colore sia compreso ovunque, possiamo utilizzare il suo valore esadecimale, oppure indicare la combinazione di rosso, verde blu che lo producono. Vediamo come funziona.

Per alcuni colori, il nome è sufficiente: possiamo così scrivere

color: red;

color: blue;

color: green;

e all'elemento corrispondente sarà assegnato il colore che vogliamo. In altri casi, però, la vita non è così semplice e dovremo utilizzare sistemi più complicati, per indicare il colore.

Il numero esadecimale è la forma più vecchia, utilizzata fin dai primordi del web per indicare il colore di un elemento HTML: il colore è così rappresentato da sei numeri in base sedici, che corrispondono alla quantità di rosso, verde e blu da mischiare, per ottenere il colore corrispondente. Alcuni esempi sono:

color: #6600FF;

color: #3E8988;

In questi casi, il simbolo # indica che il valore seguente è un esadecimale, il numero seguente esprime la miscela di colori necessari. Potete utilizzare un qualsiasi programma di grafica, come Photoshop, GIMP o altri, per scoprire quale sia il numero esadecimale corrispondente al colore che vi interessa.

Altra possibilità è indicare in modo più normale i valori di rosso, verde e blu, utilizzando per ciascuno di essi una percentuale, oppure un numero compreso tra 0 e 255. Ad esempio:

color: rgb(255, 255, 255);

color: rgb(100%, 100%, 100%);

rappresentano lo stesso colore, ma con due formule diverse. In entrambi i casi, dovremo utilizzare la struttura rgb() come base e scrivere, al suo interno, i tre valori, divisi da una virgola. È la soluzione migliore, per inserire un colore, perché ci permette il massimo controllo sul risultato, ma soprattutto può essere facilmente estesa, per aggiungere un quarto valore, ossia la trasparenza. Dubito che vorrete mai scrivere un capitolo del vostro libro, utilizzando colori trasparenti, ma sappiate che è possibile: basta utilizzare rgba() e inserire, come quarto attributo, un numero decimale da 0 a 1, dove 0 indica trasparenza completa (invisibilità, insomma) e 1 indica opacità completa. Ad esempio,

color: rgba(255, 0, 0, .5);

produrrà un colore rosso che è per metà trasparente. Anche in questo caso, chiedete aiuto al vostro programma di grafica preferito, per conoscere i valori da assegnare a ogni colore.

font-size

Per modificare la dimensione del font, possiamo utilizzare la proprietà font-size, che è molto semplice da usare: tutto ciò che dobbiamo fare è indicare la dimensione da assegnare al font, usando una delle unità di misura già menzionate. Ad esempio

font-size: 1.2em;

font-size: 120%;

font-size: 20px;

e così via. C’è solo un avvertimento, riguardo al corretto utilizzo di questa proprietà, se esprimiamo la dimensione in percentuale o in em: se modifichiamo per la prima volta la dimensione del font, allora il valore di riferimento sarà quello base (di solito 16 pixel); se abbiamo già modificato la dimensione, allora il valore di riferimento sarà quello che abbiamo assegnato all'ultimo tag “padre”, secondo l’albero genealogico che abbiamo visto alla fine della precedente.

font-style

Una proprietà opzionale è font-style, che può essere utilizzata per rendere corsivo il testo, oppure per annullare lo stile corsivo in un tag figlio, se lo avevamo assegnato al tag padre. Questa proprietà ha tre possibili valori: normal, che toglie il corsivo, italic, che assegna il corsivo, oblique, che di fatto è identica a italic, ma non si usa quasi mai. Ad esempio,

font-style: italic;

font-style: normal;

dove il primo rende corsivo il testo e il secondo rimuove lo stile corsivo.

font-weight

Altra proprietà opzionale è font-weight, che funziona come font-style, ma si applica al grassetto, invece che al corsivo. In questo caso, però, i valori possibili sono soltanto due: normal e bold, dove il primo rimuove il grassetto e il secondo lo applica al testo. In pratica,

font-weight: normal;

font-weight: bold;

sono le uniche due combinazioni possibili per questa proprietà.

text-transform

A volte può essere necessario trasformare le lettere di una o più parole, per renderle maiuscole o minuscole: la proprietà text-transform si occupa proprio di questo. I valori possibili per questa proprietà sono quattro: uppercase, lowercase, capitalize e none. Come è facile da intuire, uppercase rende il testo maiuscolo, lowercase lo rende minuscolo e capitalize rende maiuscola soltanto la prima lettera di ogni parola, mentre none annulla ogni modifica. Le combinazioni sono dunque

text-transform: uppercase;

text-transform: lowercase;

text-transform: capitalize;

text-transform: none;

ed è una proprietà che probabilmente vi tornerà comoda soltanto per i titoli dei capitoli e poco altro, ma è sempre utile conoscerne l’esistenza.

font-variant

Altra proprietà estremamente specifica, che di fatto serve solo a creare testo in maiuscoletto. Scrivendo

font-variant: small-caps;

otterrete un testo in lettere maiuscole, ma di piccole dimensioni: il maiuscoletto, per l’appunto, che può essere usato per aggiungere una certa enfasi ad alcune parole, ma soprattutto per le sigle.

text-decoration

Una proprietà fondamentale, senza la quale non potremmo vivere, da cui ogni forma di tipografia digitale dipende: ecco cosa NON è text-decoration. Scherzi a parte, è una proprietà che raramente vi troverete a dover utilizzare (o almeno spero), ma può essere utile spendere una frazione della propria memoria per immagazzinarla, nel caso in cui dovesse servire, in un futuro lontano. Questa proprietà assegna una specie di decorazione al testo o alla parola a cui è assegnata, anche se la idea di “decorazione” che voi avete è probabilmente molto diversa da quella di chi ha progettato questa proprietà. I valori possibili sono underline, overline, line-through, blink, none e possono essere combinate tra loro, applicandone più di una allo stesso elemento. Undeline traccia una linea sotto al testo, overline ne traccia una al di sopra del testo, line-through ne traccia una attraverso il testo, blink farà lampeggiare fastidiosamente il testo e none abolirà decorazioni precedenti. Ad esempio,

text-decoration: line-through;

text-decoration: overline underline;

text-decoration: none;

e così via, dove soltanto il buon gusto potrà costituire un limite alla vostra creatività.

text-shadow

Chiudiamo con una vera decorazione, che certo può avere un buon impatto visivo, se usata bene, ma che potrebbe non funzionare su tutti i lettori, essendo una novità abbastanza recente: dovrete sperimentarla sul campo. Questa proprietà è text-shadow, che aggiunge un effetto-ombra al testo a cui è assegnata: in pratica, se la applicate a un titolo, il titolo sarà accompagnato da un’ombra, che darà una vaga illusione di profondità e tridimensionalità (con un poco di fantasia da parte di chi la guarda).

Per usarla, dovrete assegnare una discreta sfilza di valori, ad esempio

text-shadow: -4px 4px 3px #999999;

dove il primo valore corrisponde alla posizione orizzontale dell’ombra, il secondo alla posizione verticale, il terzo al tasso di sfocatura e il quarto al colore. Nel mio esempio, l’ombra è spostata a sinistra di 4 pixel (valori negativi la spostano a sinistra, valori positivi la spostano a destra, rispetto alla parola che la proietta), verso il basso di 4 pixel (valori positivi la spostano verso il basso, lavori negativi verso l’alto), è abbastanza sfocata (con 0 pixel è nitida, ogni punto in più ne aumenta la sfocatura) e ha un colore grigio. Il modo migliore per dare un senso a tutti i vari numeri è sperimentare di persona, se siete interessati a usare questa proprietà.
Continueremo alla prossima puntata.

Guida al CSS per EPUB – Il foglio di stile

2013-05-22T09:18:00.000+02:00

Nella puntata precedente abbiamo visto come strutturare una pagina, per renderne più semplice la modifica e la formattazione attraverso le regole del CSS. Oggi, invece, cominceremo a vedere cosa siano queste regole del CSS: per poterlo fare, osserveremo prima di tutto la struttura di un foglio di stile.

Come ho scritto in precedenza, il CSS è un insieme di regole, che prescrivono al browser il modo in cui una pagina web debba essere visualizzata. In un normale sito, possiamo utilizzare il CSS per svariate operazioni di design, dalle più basilari, come modificare font, colori e inserire immagini di sfondo, fino alle più complesse, come assemblare l’intero layout del sito, distribuendo il contenuto delle pagina su una, due, tre o più colonne, inserendo barre laterali di navigazione, header, footer e anche semplici animazioni, per rendere più allegra, vivace o di pessimo gusto la nostra pagina. Dato però che qui mi sto occupando del CSS utilizzabile in uno EPUB, tralascerò molti di questi aspetti più avanzati e mi concentrerò invece sugli aspetti più semplici, ossia quelle che funzioneranno su qualsiasi dispositivo di lettura e per qualsiasi tipo di e-book. Se volete, però, nulla vi vieta di trattare le pagine del vostro libro come se fossero pagine web vere e proprie e sbizzarrirvi con le più recenti funzionalità aggiunte al CSS, ma sappiate che, al momento, non avrete alcuna garanzia che tutti i dispositivi di lettura supporteranno il vostro stile innovativo: dovrete sperimentare sul campo e sperare in bene.

Dopo questa introduzione, cominciamo a vivisezionare un foglio di stile. Un foglio di stile, come dicevo, è formato da una serie di regole, tutte strutturate allo stesso modo, cioè così:


h2 {

font-family: Verdana, Arial, Helvetica, sans-serif;

text-align: center;

color: gray;

}

I colori li ho aggiunti io, per semplificare la spiegazione (chiedo scusa ai daltonici), ma per il resto è un esempio di normale regola, come potrete trovarne in qualsiasi foglio di stile.

L’elemento che ho colorato in rosso, cioè h2, è il nome del tag a cui questa regola dovrà essere applicata, nel caso specifico h2: il suo nome completo, come lo troviamo in una pagina HTML, sarebbe <h2> ma, come possiamo vedere, nel foglio di stile utilizzeremo solo la parte interna del nome, eliminando < e >. Subito dopo questo elemento, inseriremo due parentesi graffe, al cui interno si troveranno tutte le regole di stile da applicare alla porzione di testo o di pagina racchiusa da quel tag.

L’elemento colorato in blu è la proprietà che vogliamo modificare, attraverso questa regola. Ogni elemento possiede un grande numero di proprietà, che vanno dal colore, all'allineamento ai margini, e così via, e ognuna di queste può essere modificata liberamente da una regola in CSS. Font-family, ad esempio, è la proprietà che determina il tipo di font da utilizzare per un elemento testuale. Ogni proprietà deve essere seguita dai due punti.

L’elemento colorato in verde, infine, è il valore che vogliamo assegnare a un certa proprietà. Se stiamo modificando la proprietà color, ad esempio, il valore corrisponderà al nuovo colore da assegnare all'elemento mentre la proprietà font-family avrà come valore uno o più tipi di font. Ogni valore deve essere chiuso da un punto e virgola, a segnare che quella regola si è conclusa.

Oltre che a un tag, una regola CSS può essere applicata anche a una classe, oppure a una combinazione tag + classe, o infine a più tag contemporaneamente (o più combinazioni tag + classe contemporaneamente). Vediamo alcuni esempi.

p {

color: red;

}

Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p>: in pratica, colora di rosso il testo di tutti i nostri paragrafi, indiscriminatamente.

.paragrafo {

color: red;

}

Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag che possiede l’attributo class=”paragrafo”, qualunque sia il tipo di tag (<a class=”paragrafo”>, <p class=”paragrafo”>, <span class=”paragrafo”>, eccetera). Come possiamo vedere, il nome di una classe è preceduto da un punto, quando è utilizzato per una regola CSS.

p .paragrafo {

color: red;

}

Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p>, che possieda l’attributo class=”paragrafo”, cioè a tutti i tag <p class=”paragrafo”>. Se nel nostro testo è presente un tag <p class=”altro”>, la regola non si applicherà, perché è richiesta la presenza contemporanea sia del tag <p> che della classe “paragrafo”.

p, h1 {

color: red;

}

Questa regola applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p> o di un tag <h1>: come vediamo, per applicare la stessa regola a più tipi di tag, basta separare i loro nomi con una virgola.

p .paragrafo, h1 .titolo {

color: red;

}

Questa regola, infine, applica il valore red alla proprietà color di tutto ciò che è racchiuso all'interno di un tag <p> con un attributo class=”paragrafo”, o all'interno di un tag <h1> con un attributo class=”titolo”. In questo caso, ogni coppia tag + classe sarà separata da una virgola.

Come si può capire da questi esempi, unendo fra loro più tag e più classi si possono creare regole parecchio complesse e dettagliate, che si applicano soltanto a sezioni ben determinate delle nostre pagine. Tutto ciò può sembrare parecchio confuso, a prima vista, e magari anche a seconda vista, ma è solo una questione di pratica: di fatto, possiamo utilizzare tag e classi come mattoncini Lego e combinarli tra loro come preferiamo, per costruire lo stile più adatto al nostro ebook. Vedremo più avanti alcuni esempi concreti di foglio di stile.

Per concludere questa introduzione, c’è un ultimo fattore da considerare, quando lavoriamo sul CSS: l’effetto a cascata. Una normale pagina HTML è composta da un gran numero di tag, incasellati gli uni dentro gli altri: abbiamo tag <div> che contengono tag <h2> e <p>, abbiamo tag <p> che contengono tag <a>, <em> e <span>, e così via. Lo abbiamo visto nella puntata precedente, parlando di come strutturare la pagina. In una struttura di questo tipo, il tag più esterno è il padre, mentre i tag al suo interno sono i figli (oppure madre e figlie, se preferite un approccio femminile: non fa alcuna differenza): se la nostra pagina è

<body>

<div class=”pagina”>



    <div class=”titolo”>

      <h2></h2>

    </div>

    <div class=”testo”>

      <p></p>

      <p></p>

      <p></p>

    </div>

  </div>

</body>

, il tag <body> sarà il padre di tutti, perché tutti gli altri tag sono al suo interno, ed è quindi il vertice della piramide. Subito sotto di lui c’è il figlio diretto, cioè <div class=”pagina”>, seguito poi dai suoi due figli diretti, ossia <div class=”titolo”> e <div class=”testo”>, e così via, fino alla fine dell’albero genealogico, cioè fino ai tag che non hanno altri tag al proprio interno. Se abbiamo impaginato bene il file, il rientro a inizio riga ci aiuterà visivamente a seguire la piramide dei tag.

A cosa serve tutta questa struttura? E cosa c’entra l’effetto a cascata? Semplice: tutti gli attributi che impostiamo per un tag padre si ripercuoteranno anche sui suoi tag figli. Se il tag <div class=”pagina”> ha un font Arial, anche tutti i suoi figli avranno un font Arial. Se non vogliamo che un tag figlio erediti un certo attributo dal padre (o dal nonno), dovremo sovrascrivere quell'attributo, ossia assegnare al tag figlio un valore diverso per quell'attributo. Per cambiare il font, ad esempio, dovremo assegnare al figlio un valore di font-family diverso da quello che erediterebbe dal padre: in questo modo, la sua eredità sarà ignorata e a prevalere sarà il valore che abbiamo assegnato direttamente a quel tag, non quello che riceverebbe dai tag più in alto nella scala gerarchica della pagina.

Nella prossima puntata proseguiremo con lo studio delle regole CSS, accompagnate da qualche esempio più concreto.

Guida al CSS per EPUB – Struttura della pagina

2013-05-19T09:21:00.001+02:00

Nella puntata precedente ci siamo dedicati a una presentazione generale del CSS, imparando inoltre come aggiungere un foglio di stile alla nostra pagina. Prima di cominciare a scrivere il foglio di stile, e aggiungere al nostro testo una serie di formattazioni belle, strane o di cattivo gusto, dovremo però assicurarci che la nostra pagina sia pronta a farsi formattare, senza opporre resistenza, il che no è sempre così automatico. Vediamo dunque una struttura ottimale per le pagine dei nostri EPUB.

Lo schema di base di un file HTML dovrebbe ormai esserci familiare:

<html>

<head>

<title></title>

</head>



<body>

</body>

</html>

Questo è il minimo indispensabile, lo scheletro su cui tutto il resto sarà costruito:

<html> è il tag che racchiude tutta la pagina.

<head> racchiude quella parte di pagina che, normalmente, non è visualizzata, ma che contiene una serie di regole, da utilizzare per la visualizzazione: è qui che inseriremo il CSS ed è qui che, in una normale pagina web, troveremo anche il JavaScript (in genere, ma non necessariamente: esistono almeno due scuole di pensiero, a riguardo, ma non è questo lo spazio per discuterne).

<title> contiene il titolo della pagina, che sarà visualizzato sul bordo alto del browser; siccome stiamo parlando di uno EPUB e il suo contenuto non sarà visualizzato in un browser, possiamo anche lasciare vuoto questo spazio, ma non lo possiamo eliminare.

<body> contiene tutto ciò che sarà visualizzato sullo schermo: il testo, le foto, i video, eccetera. Qui dovremmo inserire soltanto il contenuto, senza mischiarlo con stile (CSS) e funzionamento (JavaScript). Essendo HTML, questo spazio sarà brulicante di tag e i tag potranno essere modificati da CSS e JavaScript in qualsiasi modo vorremo, ma l’importante è che il codice per modificare i tag sia lasciato fuori dal body, ben separato dal contenuto. Se li mischiate, siete delle brutte persone, oppure avete trascorso gli ultimi quindici anni ibernati in un qualche laboratorio segreto.

Dopo questo rapido ripasso dello scheletro di una pagina, dovrebbe essere chiaro che la parte da strutturare a dovere, per poterla poi modificare col CSS, è quella contenuto nel tag <body>: qui finirà tutto il contenuto del nostro EPUB e qui dovremo lavorare, per renderlo adatto ad accogliere il CSS.

In una normale pagina web, dovremmo preoccuparci del layout dei vari elementi, del numero di colonne da utilizzare nella pagina e così via; nel microcosmo di uno EPUB, invece, molti di questi problemi non si pongono e possiamo concentrarci sullo stretto indispensabile. O meglio, in teoria potremmo anche cercare di utilizzare in uno EPUB tutte le regole di layout che magari abbiamo imparato per i siti web, ma ci sono buone probabilità che i risultati non saranno quelli che ci aspettavamo. Manteniamoci dunque sull'essenziale, cioè una pagina che presenta un titolo nella parte alta, ossia il titolo del capitolo, e poi una muraglia di testo, ossia il contenuto del capitolo: è lo schema seguito da quasi tutti i libri, dopotutto, ed è un ottimo schema, se vogliamo che il nostro e-book sia leggibile decentemente anche sullo schermo di un piccolo smartphone.

Una buona e semplice struttura potrebbe essere questa:

<body>

<div class=”capitolo”>

<div class=”titolo”>



            <h2>Titolo del capitolo</h2>

        </div>

        <div class=”corpo”>

        </div>

    </div>

</body>

Il tag <div>, che qui vediamo utilizzato, è un tag che, di per sé, non possiede un preciso valore semantico, nello HTML, ma è solitamente usato per dividere in blocchi il contenuto di una pagina. In un futuro prossimo, quando saranno rimasti in circolazione soltanto browser che supportano lo HTML5, questa funzione del tag div sarà svolta da tag speciali, che lo HTML5 ha introdotto proprio per questo scopo, e <div> diventerà molto meno frequente nelle pagine web. Siccome però noi ci occupiamo di EPUB, tutto ciò non ci tocca e possiamo continuare a usare il tag div per strutturare i nostri capitoli, indipendentemente dai nuovi tag dello HTML5.

A ogni tag può essere assegnato un attributo class, che ci servirà a rendere più precise le regole CSS da applicare alla pagina: invece di applicare genericamente una regola a tutti i tag dello stesso tipo (tutti i tag <a>, ad esempio), possiamo usare l’attributo class per applicare una regola a tutti i tag di uno stesso tipo, che possiedono un determinato class (ad esempio, class=”testo”), oppure a tag di tipo diverso, purché possiedano lo stesso class. Lo vedremo meglio più avanti, parlando delle regole CSS: per il momento, possiamo vedere che ci sono tre tag div, ognuno dei quali ha un attributo class differente, e grazie a questo attributo possiamo applicare loro stili differenti.

<div class=”capitolo”> è il tag più ampio, che racchiude l’intero contenuto della pagina: per questo suo ruolo, possiamo utilizzarlo nel CSS per assegnare regole di base, che saranno applicate a tutto il contenuto della pagina. Per esempio, possiamo utilizzare questo tag per impostare una immagine di sfondo, oppure la larghezza dei margini della pagina, o ancora il tipo di font, e così via. Al suo interno, troviamo poi altri due tag, che separano i due blocchi di base per ogni capitolo, ossia il titolo e il testo: entrambi sono all'interno della pagina, per questo li abbiamo inseriti all'interno del tag più generale, ma entrambi hanno un ruolo paritario, per questo li abbiamo mantenuti uno accanto all'altro.

<div class=”titolo”> è quindi la parte in cui inseriremo il titolo del nostro capitolo. Nel foglio di stile CSS potremo utilizzare questa combinazione tag + class, per assegnare uno stile particolare al titolo e distinguerlo dal resto del testo, oppure per racchiudere il titolo in una cornice, o applicare qualsiasi altro tipo di decorazione noi vogliamo.

<div class=”corpo”>, infine, racchiude il grosso del nostro capitolo, ossia il testo, dal primo all'ultimo paragrafo. I vari paragrafi al suo interno, poi, saranno racchiusi in altrettanti tag <p>, uno per paragrafo, e a questi tag <p> potremo assegnare attributi class, ad esempio per distinguere il primo paragrafo dagli altri. In una struttura del tipo

<div class=”corpo”>

<p class=”primo”></p>



    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

    <p class=”paragrafo”></p>

</div>

abbiamo definite due classi differenti per i nostri paragrafi: un attributo class=”primo”, che identifica il primo paragrafo del capitolo, e un attributo class=”paragrafo”, che identifica tutti gli altri paragrafi del capitolo. In questo modo, nel foglio di stile CSS potremo assegnare uno stile particolare al primo paragrafo, ad esempio ingrandendo la prima lettera, a simulare un manoscritto miniato del medioevo, mentre tutti i successivi paragrafi utilizzeranno uno stile comune e uniforme.

Se abbiamo bisogno di utilizzare uno stile particolare su una porzione molto ridotta di testo, ad esempio una riga o anche solo una parola all'interno di un paragrafo, dovremo racchiudere quella porzione di testo in un tag <span class=”nome”></span> (al posto di “nome”, ovviamente, inseriremo il nome che preferiamo, purché non sia già stato usato in altri class): in questo modo, nel foglio di stile potremo creare uno stile apposito, da applicare al testo che utilizza quell'attributo class.

Adesso che abbiamo strutturato a dovere la nostra pagina, possiamo cominciare a scrivere qualche regola in CSS: è ciò che faremo nella prossima puntata.

Guida al CSS per EPUB - Introduzione

2013-05-17T12:35:00.001+02:00

Già in precedenza mi ero dedicato a una breve introduzione all'uso del CSS negli EPUB, per controllare e modificare lo stile di una pagina in base ai nostri gusti. Tornerò adesso sull'argomento dedicandovi però più spazio, in una guida che, almeno nelle mie intenzioni, dovrebbe essere più chiara e completa della precedente introduzione. Non escludo che il risultato sarà un bignami di CSS, ma staremo a vedere. Argomento di oggi (e non solo di oggi) è dunque: come usare il CSS in uno EPUB.

Come ho ripetuto fino alla nausea, uno EPUB è fondamentalmente un sito web, compresso e impacchettato fino a sembrare un libro: i vari capitoli di uno EPUB sono altrettante pagine in formato HTML, oppure XHTML, ossia il formato di una normale pagina web, e come ogni normale pagina web possono essere formattati utilizzando un foglio di stile CSS. Un foglio di stile CSS è un normale file di testo, con estensione .CSS, al cui interno è raccolta una lista di regole di stile, che dovranno essere applicate alla pagina che le utilizza, al momento della sua apertura in un browser: quale font usare per il testo, quale colore, quali dimensioni avranno i caratteri, quando spazio lasciare sui margini, quale immagine caricare come sfondo della pagina, se ce ne deve essere una, e così via. Tutto ciò che rende una pagina bella (o brutta) da vedere, in pratica, raccolto e organizzato in un file a parte, che dovrà poi essere aggiunto alla pagina. Ma non è sempre stato così.

Alla fine del ventesimo secolo, quando il web era giovane, libero e selvaggio, gli animi erano coraggiosi, gli uomini erano veri uomini, le donne erano vere donne e le piccole creature pelose di Alpha Centauri erano vere piccole creature pelose di Alpha Centauri (per citare la Guida Galattica), stile e contenuto erano mischiati assieme, in una poltiglia difficilmente distinguibile. Nella pancia delle pagine, ossia tra i tag <body> e </body>, il testo da mostrare sullo schermo era intervallato da tag, che dicevano ai browser come dovesse essere formattato questo testo: c’erano tag che definivano il tipo di font, la sua dimensione, il suo colore, ma anche il colore dello sfondo, la larghezza e il colore delle caselle di una tabella, e così via. Un periodo in cui i web designer finivano spesso vittime di tremende crisi depressive e affondavano negli abissi bui dell’alcolismo, insomma, colti dallo sconforto mentre cercavano di annidare una tabella nell'altra, nel vano tentativo di impaginare il testo in modo decente.

A risolvere questo pasticciaccio brutto è arrivato il CSS.

Il CSS ha portato con sé una nuova e più razionale filosofia di progettazione, per le pagine web: una separazione netta tra il contenuto e lo stile. Nella pancia della pagina, ossia tra i tag <body> e </body>, doveva restare soltanto il contenuto, cioè testo, immagini e altro: in pratica, il cosa vediamo. Tutto ciò che serviva a definire il come lo vediamo, invece, doveva essere spostato altrove: nella parte alta della pagina, ossia tra i tag <head> e </head>, o meglio ancora in un file separato, da caricare assieme alla pagina. In questo file separato potevamo elencare i vari tag utilizzati nella pagina, assieme alle regole di stile da applicare al contenuto di quei tag; in fase di caricamento, il browser avrebbe controllato di volta in volta le regole, per applicarle alla visualizzazione dei tag, a mano a mano che li incontrava. Il file con la lista di tag e di regole è il foglio di stile CSS.

La progettazione di siti web ha poi proseguito su questa strada, aggiungendo un terzo elemento, cioè il funzionamento: se il semplice HTML contiene il cosa vediamo e il CSS si occupa del come lo vediamo, il JavaScript si occupa di far fare qualcosa a quella pagina. Siccome al momento gli EPUB supportano il JavaScript in teoria, ma in pratica siamo ancora abbastanza lontani dal poterlo usare decentemente (per fortuna, aggiungo io, ma questo è solo un parere personale), possiamo ignorare questo elemento e occuparci solo degli altri due.

Primo problema: come aggiungere un foglio di stile CSS a una pagina? Le possibilità sono due: scriverlo direttamente nella pagina, oppure scriverlo in un file a parte e poi dire alla pagina di caricare questo file. Il risultato finale sarà lo stesso, in entrambi i casi, ma le due soluzioni non sono equivalenti, sul piano del lavoro necessario: la scelta più razionale è quella di creare un file a parte, con tutto il CSS necessario per il nostro libro, e poi inserire un link a quel file in ogni pagina del libro, per cui vi invito caldamente a seguirla. Se poi un capitolo avrà bisogno di formattazioni particolari, perché magari contiene porzioni di testi in un altro alfabeto, allora potrete aggiungere una piccola estensione al CSS direttamente in quella pagina, per modificare le regole generali e adattarle al contesto.

Ipotizziamo allora che abbiate deciso di utilizzare un file esterno, in cui mettere tutto il CSS necessario, e lo abbiate salvato come “Stile.css” nella cartella Styles del vostro EPUB. Come fare ad aggiungerlo a ogni pagina? Con un poco di olio di gomito e di pazienza. Con Sigil, apriamo a una a una le pagine del nostro EPUB (ossia quelle contenute nella cartella Text) e passiamo alla Vista Codice. Nella parte alta di ogni pagina, cerchiamo il tag <head> e, al suo interno, il tag <title>: una volta localizzato, nello spazio tra </title> e </head> inseriamo un codice di questo tipo

<link href="../Styles/Stile.css" rel="stylesheet" type="text/css" />

Questa riga dirà al lettore di caricare un determinate file, ogni volta che deve visualizzare questa pagina; lo informerà inoltre sulla posizione in cui si trova il file (la parte che segue l’attributo href) e specificherà anche a cosa serva il file (la parte che segue l’attributo rel). Ovviamente, se il nostro foglio di stile ha un nome diverso, al posto di “Stile.css” dovremo scrivere il nome corretto del file, qualunque esso sia.

Se la pagina non è in XHTML, ma in HTML, il codice sarà quasi identico, ma un poco più corto:

<link b="" gt="" href="../Styles/Stile.css" rel="stylesheet">

Per sapere se la pagina sia in XHTML o in HTML, è sufficiente guardare la sua estensione, che ci è indicate chiaramente da Sigil.

Utilizzare un file esterno è la scelta più semplice e razionale, per risparmiarci fatiche inutili, ma niente e nessuno ci vieta di inserire il CSS direttamente nella pagina. In questo caso, nello spazio tra </title> e </head> dovremo aggiungere due tag, ossia <style type=”text/css”> e </style>: fra i due tag scriveremo poi tutte le regole che vogliamo.

Adesso che sappiamo come aggiungere un foglio di stile CSS alla nostra pagina, dovremo preoccuparci di preparare la nostra pagina ad accogliere il CSS, ottimizzandola cioè per la formattazione, ed è ciò che vedremo la prossima volta. Conclusa questa fase introduttiva, cominceremo a scrivere regole in CSS, per formattare la nostra pagina.

Usare un gradiente di colore nel CSS

2013-05-12T12:39:00.001+02:00

Un gradiente è una transizione continua e graduale che conduce da un colore di partenza a un colore di arrivo: in altri termini, è un colore che sfuma a poco a poco in un altro colore. Esempi di gradienti si possono trovare più o meno ovunque nella interfaccia grafica di computer e altri strumenti analoghi: la Apple li usa più o meno per qualsiasi bottone compaia sullo schermo di uno dei suoi prodotti, ma più in generale sembrano andare molto di moda tra i grafici di ogni genere.

Più o meno qualsiasi programma di grafica (Photoshop, GIMP, eccetera) include una funzione per produrre gradienti, specificando un colore di partenza e un colore di arrivo, ma i gradienti sono supportati anche dalle ultime specifiche del CSS e possono essere utilizzati per colorare più elementi in una pagina web: lo sfondo della pagina stessa, i pulsanti, eccetera. Per esempio, se vogliamo che un elemento abbia un gradiente come colore di sfondo, nel foglio di stile CSS gli assegneremo una proprietà di questo tipo:

background: linear-gradient(rgb(229,76,16), rgb(173,54,8));

dove rgb(229,76,16) e rgb(173,54,8) sono il colore di partenza e il colore di arrivo della gradazione, espressi come “miscela” di rosso, verde e blu, i tre colori fondamentali. Leggendo questa regola nel foglio di stile, il nostro browser assegnerà all'elemento selezionato uno sfondo, in cui il primo colore indicato sfumerà gradualmente nel secondo. In teoria. In pratica, non è detto che ciò accada.

Sebbene nelle specifiche del CSS siano presenti i gradienti e i valori da attribuire a un elemento, per ottenere un gradiente, non tutti i browser li supportano. Il che è normale nel caso dei browser più vecchi, prodotti prima che i gradienti fossero introdotti nel CSS (se vi aspettate di farli visualizzare a Internet Explorer 6, andrete incontro ad amare delusioni), ma anche nei browser più recenti non è sempre garantito il supporto dei gradienti; talvolta, inserire il valore linear-gradient non è sufficiente, ma bisogna aggiungere un prefisso, specifico per ogni famiglia di browser. In altri termini, ottenere su ogni browser la grafica che abbiamo progettato può essere un lavoro discretamente seccante, se ci sono di mezzo i gradienti, perché è possibile che si debba scrivere il triplo del codice normalmente necessario. Per questo e altri motivi, esistono strumenti di supporto, che aiutano nella generazione del codice necessario per un gradiente e si possono occupare al posto nostro (se così vogliamo) di renderlo compatibile con la maggior parte dei browser in circolazione.

Ultimate CSS Gradient Generator è uno di questi strumenti, utilizzabile online sulla pagina del sito di Colorzilla e disponibile anche in due estensioni, per Firefox e Google Chrome. Come si può intuire dal nome assai umile e modesto, questo semplice programma si offre di generare per noi il codice da inserire nel foglio di stile CSS, per ottenere il tipo di gradiente da noi selezionato. Il suo funzionamento si può riassumere così: scegliamo il colore di partenza, il colore di arrivo e gli eventuali colori intermedi, poi indichiamo la direzione in cui dovrà avvenire la sfumatura (orizzontale o verticale) e il programma genererà il codice corrispondente. Una volta finito, basterà copiare il codice e incollarlo all'interno della regola CSS in cui dovrà essere utilizzato. Ma vediamo più in dettaglio.

Questa è la pancia della pagina, dove troviamo i vari comandi a nostra disposizione:

In alto a sinistra, sotto la etichetta Presets, ci è proposta una lista di modelli di gradienti, tra cui possiamo scegliere quello più simile al nostro progetto: sceglierne uno non è indispensabile, ma ci potrebbe far risparmiare tempo, se riusciamo a trovarne uno che corrisponda alle nostre idee (solo la struttura, non gli abbinamenti di colore: quelli li sceglieremo a parte).

In alto a destra, sotto la etichetta Preview, vediamo un’anteprima del nostro gradiente, ma soprattutto abbiamo la possibilità di selezionare la direzione del gradiente (sfumatura in orizzontale, in verticale, in diagonale o dal centro verso l’esterno).

Scegliere i colori è il passaggio fondamentale. È possibile che quelli proposti dai modelli del preset ci possano andare bene, ma molto più probabilmente vorremo utilizzare altri colori: li possiamo selezionare e impostare utilizzando tutti quegli altri comandi misteriosi che appaiono nella colonna di sinistra della pagina, cioè la barra colorata, Stops e Adjustments. Partiamo dalla barra colorata.

La bara colorata ha due gruppi di puntatori, che possiamo far scorrere: un gruppo nella parte superiore e uno nella parte inferiore. Il gruppo nella parte superiore serve a regolare il livello di opacità di un colore (quanto è o non è trasparente), mentre il gruppo nella parte inferiore serve a scegliere il colore. Per avere un gradiente, servono almeno due colori, uno di partenza e uno di arrivo: per decidere il colore di partenza, clicchiamo sulla freccetta in basso a sinistra nella barra: a questo punto, vedremo che nel riquadro Stops, subito sotto, alla voce Color è apparso un colore, ossia quello di base per il modello da noi scelto. Se lo vogliamo cambiare, clicchiamo su quel colore e scegliamone un altro dalla tavola che ci apparirà. Lo stesso procedimento lo ripeteremo poi anche per il secondo colore e per gli eventuali colori intermedi.

Accanto a Color, sempre nel riquadro Stops, troviamo anche una voce Location, accompagnata da una percentuale: indica la posizione in cui si troverà quel colore, nel nostro gradiente. 1% è il colore di partenza, 100% è il colore di arrivo, percentuali intermedie indicano posizioni corrispondenti (un colore che ha 50% come Location, ad esempio, sarà raggiunto a metà della gradazione). Usando questo strumento, possiamo scegliere un colore di partenza, uno di arrivo e fino a due sfumature intermedie, se lo vogliamo. A ogni modo, possiamo anche limitarci a inizio e fine, senza tappe intermedie.

Utilizzando le frecce sulla parte alta della barra, come ho detto, si determina il livello di opacità per un colore: ci serviranno se vogliamo un gradiente che guadagna o perde trasparenza nel corso del suo passaggio da un colore all'altro in questo caso, dopo aver cliccato su una freccia, dovremo indicare il livello di opacità, in percentuale: 100% è un colore completamente opaco, 1% è un colore completamente trasparente.

Nella colonna di destra della pagina, infine, troviamo il codice da copiare. A mano a mano che impostiamo il nostro gradiente, anche il codice cambierà corrispondentemente: una volta concluso, quando siamo soddisfatti del nostro lavoro, basterà copiare tutto quanto e incollarlo dentro a una regola del foglio di stile CSS, dove i gradiente dovrà essere applicato. Se vogliamo però che il nostro gradiente sia visibile anche su Internet Explorer 9, che per ragioni misteriose non supporta il normale gradiente in CSS, dovremo selezionare la opzione IE9 Support, che compare subito sotto il riquadro col codice: questa ci fornirà anche una porzione extra di HTML,ossia

<!--[if gte IE 9]>



  <style type="text/css">

    .gradient {

       filter: none;

    }

  </style>

<![endif]-->

Dobbiamo copiarla e incollarla nello <head> delle pagine in cui il gradiente dovrà essere utilizzato; più precisamente, incolliamola dopo il punto in cui abbiamo inserito il foglio di stile.

Come funziona Google Fonts

2013-05-07T20:04:00.002+02:00

Google Fonts è l’ennesimo servizio extra, offerto da Google, dopo Google Mail (per gli amici Gmail), Google Maps, Google Docs, Google Translate e Google eccetera eccetera. Nello specifico, questo servizio è una collezione di font (al momento oltre seicento), a disposizione di chiunque voglia utilizzarli nel proprio sito, senza doversi preoccupare troppo di litigare col CSS: per certi versi, lo possiamo vedere come un discount per font.

L’idea di base, così come il suo funzionamento, è molto semplice: accediamo al sito del servizio, passiamo in rassegna la lista di font, alla ricerca di quelli che più ci piacciono, indichiamo quali vogliamo usare nel nostro sito e Google confezionerà per noi due righe di codice, da aggiungere alle nostre pagine. Questo codice sarà un link a un foglio di stile esterno, nel quale sono indicate tutte le specifiche dei font da noi scelti; quando un visitatore apre una pagina, su cui noi abbiamo inserito il codice, Google si occuperà di inviare i font. Niente fogli di stile CSS da modificare per incorporare font, insomma: solo due righe da aggiungere a ogni pagina.

Come possiamo vedere sopra, il sito del servizio è in inglese e ha una grafica molto spartana, in linea con la tradizione di Google. La parte centrale della pagina è occupata da una vetrina, in cui ci è mostrato l’aspetto dei vari font, con una frase come anteprima: il senso della frase può essere ignorato, guardiamo solo come si presenta.

Possiamo studiare tutti i font disponibili facendo scorrere verso il basso il contenuto della vetrina, ma è una operazione che potrebbe diventare presto alquanto noiosa, dato che sono 625 (al momento, ma è un numero che aumenterà); molto più semplice e veloce è utilizzare la colonna sinistra della pagina, dove troviamo un riquadro di ricerca e una serie di opzioni, mediante le quali possiamo filtrare le categorie di font. Alla fine della colonna sinistra, peraltro, è presente anche la voce “Show all styles”, che ci mostrerà tutte le varianti disponibili per ogni font: le varianti possibili sono normale, corsivo, grassetto, piccolo, eccetera, solo alcuni dei quali saranno inizialmente visibili in anteprima, nella vetrina.

Se conosciamo già il nome del font che stiamo cercando, scriviamolo nel riquadro di ricerca. Se non lo conosciamo, o vogliamo semplicemente guardare cosa abbia da offrirci Google nei vari settori, possiamo procedere coi filtri.

Il menu per categoria, (cliccando su “All categories”), ci permette di filtrare i risultati in base alle categorie in cui i font sono suddivisi: Serif, cioè caratteri con piccole decorazioni (ad esempio Times New Roman), Sans-Serif, cioè caratteri senza decorazioni (ad esempio Arial), Display, Handwriting e così via.

Le voci successive ci permettono di filtrare i font in base alle caratteristiche fisiche che possiedono. Thickness li ordina in base alla larghezza delle linee che li compongono, Slant li ordina in base alla inclinazione dei caratteri, Width in base alla grandezza complessiva del font e a quanto “riempie” la linea di testo.

Scripts, infine, ci permette di cercare i font per alfabeto: tutti i font disponibili per l’alfabeto latino, tutti quelli per l’alfabeto greco, russo, arabo, eccetera.

Nella vetrina centrale, sopra e sotto la frase di esempio, ogni font presenta anche altri elementi: sopra il font troviamo il tipo di stile usato nell'anteprima (di solito normal, ossia la versione di base), mentre sotto la fase ci sono molti altri dati e pulsanti, che dovremo esaminare nello specifico.

La prima cosa che troviamo è il nome del font: Roboto Slab, Meie Script, eccetera (i nomi sono quelli dei primi due nella immagine soprastante, non me li sto inventando). A seguire, un numero ci informa di quanti stili sono disponibili per questo font, dopodiché troviamo il nome dell’autore. Fin qui, sono dati interessanti, ma di poca utilità pratica, per chi li vuole inserire nella propria pagina; i pulsanti successivi cambiano le cose.

Il primo pulsante che troviamo sotto a un font, sulla destra, è un quadrato con una freccia verso il basso: cliccandolo, possiamo vedere tutti gli stili disponibili per quel font. Ovviamente, se un font possiede un solo stile, questo pulsante non ci sarà.

Il secondo pulsante (quadrato con freccia che punta a destra) è “Quick Use”: cliccandolo, si aprirà un pannello, tramite cui potremo ottenere rapidamente il codice per aggiungerlo alla nostra pagina. Del pannello parlerò più avanti.

Il terzo pulsante, “Pop out”, ci offre una panoramica più completa sul font, mostrandoci tutte le lettere disponibili e fornendoci altre informazioni sul font. È sempre utile cliccarlo, prima di scegliere, giusto per evitare brutte sorprese, come la mancanza di una particolare lettera: un font che non prevede vocali accentate, ad esempio, può essere utile per la lingua inglese, ma potrebbe causare qualche problema in un testo in italiano, dove le lettere accentate sono parecchie.

Ultimo tasto, grande, grosso e blu, è “Add to collection”, che ci introduce a un secondo utilizzo del sito: oltre a pescare un singolo font e andarcene col nostro codice, possiamo anche raccogliere vari font, inserirli nel carrello come se fossimo al supermercato e poi, alla fine della spesa, farci dare un codice completo da Google, inclusivo di tutti i font che abbiamo scelto. Cliccando “Add to collection”, inseriamo il font nel nostro carrello e procediamo con lo shopping. Non c’è limite al numero di font che possiamo prendere, se non il buon gusto: un sito con font diversi in ogni pagina potrebbe non essere gradito a tutti i visitatori.

La nostra collezione di font è visibile nella parte bassa del sito: a mano a mano che aggiungiamo font, il numero accanto a font famiglie aumenterà e potremo osservare nei dettagli il contenuto del nostro carrello della spesa, cliccando sulla freccia che vediamo a sinistra della scritta. Aprendo i riquadro con la collezione, peraltro, ci appariranno altri tre pulsanti, in basso sulla destra: Choose, Review e Use. Review ci permette di fare un confronto tra i font selezionati, oltre a mostrarci altre informazioni sui font, ma il più importante è Use: cliccandolo, arriveremo al pannello cui accennavo in precedenza. Adesso parlerò del pannello.

Il pannello corrisponde all'ultima fase di personalizzazione dei font selezionati, prima di copiare il codice da inserire nelle pagine in cui li useremo. Le prime due sezioni di questo pannello sono appunto dedicate alla scelta dello stile (corsivo, grassetto e così via, a seconda degli stili disponibili per ogni font) e alla scelta del set di caratteri, a seconda del tipo di alfabeto che ci serve. Una volta selezionato tutto, la terza sezione ci fornisce il codice da inserire: questo codice è un link, che punta al foglio di stile contenente le indicazioni sul tipo di font e lo dovremo copiare nella sezione <head> delle pagine in cui quel font sarà usato. La quarta ultima sezione, infine, ci mostra come dovrà essere utilizzato il font nel foglio di stile scritto da noi; il codice fornito da Google renderà soltanto disponibile il font, starà poi a noi indicare nel foglio di stile CSS dove e come dovrà essere usato, proprio come facciamo coi font in dotazione.

Navigazione ed email anonime con Anonymouse

2013-05-02T11:31:00.000+02:00

Dopo l’excursus sui cookies del precedente post, tornerò oggi a dedicarmi a privacy e anonimato, due temi molto vicini all'utilizzo e alla gestione dei cookies: nello specifico, lo farò parlando di un servizio per la navigazione anonima e per la spedizione di e-mail anonime, attivo già da parecchi anni ma, temo, non molto famoso. Questo servizio è Anonymouse.

Anonymouse è prima di tutto un sito e attraverso quel sito possiamo utilizzare tutti i suoi servizi, senza bisogno di installare programmi o configurare il browser in modo strano e complicato. Basta accedere al sito, entrare nella sezione che ci interessa e fare ciò che dobbiamo fare.

La pagina iniziale del sito, riprodotta qui sopra, potrebbe non ispirare molta fiducia e sollevare più di un dubbio sulla sicurezza e sull'affidabilità del servizio; grafica a parte, però, il sito funziona ed è mediamente affidabile. Non lo utilizzerei per questioni di vita o di morte, sia chiaro, ma per avere un buon anonimato in circostanze normali è molto più comodo (e molto più veloce) di Tor Browser, soprattutto se dobbiamo soltanto collegarci a un paio di siti in modo “protetto”. Vedremo poi alcuni esempi di questo.

Per procedere oltre, dobbiamo cliccare su una delle due bandiere, a seconda della lingua e del paese che preferiamo: arriveremo alla stessa pagina, ma cambierà la lingua in cui i testi saranno scritti. Se scegliamo l’inglese, la pagina si presenterà così:

Siamo già all'interno di uno dei tre servizi offerti, ossia AnonWWW, per la navigazione anonima. A questo punto, tutto funziona come un qualsiasi altro web-proxy , ossia un proxy con cui si interagisce attraverso un sito web, senza bisogno di impostarne i dati all'interno del nostro browser. Di fatto, Anonymouse è un proxy, ma con una maggiore attenzione all'anonimato rispetto a un proxy tradizionale e una minore attenzione alla crittografia, almeno nella sua versione gratuita. Per utilizzarlo, scriviamo o copiamo nel riquadro l’indirizzo del sito che vogliamo raggiungere e premiamo il tasto “Invio” (oppure clicchiamo su “surf anonymously”, come preferiamo). Dopo un breve caricamento, si aprirà la pagina che volevamo raggiungere.

Cosa ha fatto di particolare Anonymouse? Invece di connettersi direttamente al sito, ha svolto un normale lavoro da proxy, ossia ha inviato la nostra richiesta al suo server, la ha ripulita da ogni nostro dato personale e infine l’ha girata al sito che volevamo raggiungere. In questo modo, a collegarsi al sito non saremo noi direttamente, ma sarà il server di Anonymouse; di conseguenza, anche le comunicazioni che il sito ci invierà saranno prima di tutto filtrate da Anonymouse e poi inoltrate a noi. Fungendo da intermediario, il server di Anonymouse blocca lo scambio di dati personali tra noi e il sito di destinazione, garantendoci così un forma di anonimato: non un anonimato assoluto e impossibile da aggirare, sia chiaro, perché un anonimato del genere non esiste, ma è più che sufficiente per circostanze normali. Usatelo pure per collegarvi ai siti porno, insomma, ma non affidatevi ad Anonymouse se state pensando di ricattare il vostro capo o svolgere altre azioni ad alto rischio per la propria incolumità: sarete anche anonimi per il sito di destinazione, ma non lo sarete per il vostro provider (ossia l’azienda che vi fornisce il servizio di connessione). Solo la versione a pagamento di Anonymouse vi fornisce qualche tutela sul fronte-provider, garantendo anche una connessione criptata.

Pur nei suoi limiti, Anonymouse presenta comunque una discreta utilità per gli utenti italiani, soprattutto quelli colpiti dalla ennesima caccia alle streghe in nome della proprietà intellettuale e del copyright, ossia per gli orfani di torrent e della cara, vecchia baia dei pirati. Come dicevo in precedenza, Anonymouse è praticamente un proxy, o almeno svolge funzioni sufficientemente simili a un proxy standard, da permetterci di assimilarlo a uno di essi. Trattandosi dunque di un proxy, lo possiamo utilizzare anche per connetterci a siti che, in condizioni normali, sarebbero inaccessibili dal nostro paese: un esempio tra tutti, i siti legati a torrent e simili. Attraverso Anonymouse, ad esempio, possiamo rapidamente accedere a ThePirateBay, giusto per nominarne uno, ma anche a molti altri siti di torrent. Non è l’unico modo per accedervi, sia chiaro, ma è sempre meglio avere uno strumento in più per farlo, piuttosto che uno in meno.

Oltre al servizio di navigazione, però, Anonymouse offre anche altri due servizi: AnonEmail e AnonNews. A cosa servano di preciso, dovrebbe essere chiaro anche solo leggendo i nomi: AnonEmail permette di inviare e-mail anonime, mentre AnonNews permette di accedere e postare in modo anonimo sui newsgroups. Entrambi hanno una interfaccia parecchio simile, per non dire identica, per cui mi limiterò a postare una immagine di AnonEmail, a titolo di esempio (anche perché è il servizio che, probabilmente, interesserà al maggior numero di possibili lettori).

Il suo utilizzo è molto semplice: nel campo “To” scrivete l’indirizzo del destinatario, nel campo “Subject” scrivete il titolo della e-mail e nel campo “Message” scrivete il contenuto del messaggio. Alla fine, cliccate su “Send anonymously” per spedire il tutto. Niente di diverso da un normale servizio di e-mail basato sul web. Nel caso di AnonNews, a cambiare è soltanto il primo campo, dove dovrete scrivere l’indirizzo del newsgroup su cui volete postare, invece del destinatario della e-mail. Il funzionamento del servizio, invece, è esattamente lo stesso che già abbiamo visto per AnonWWW: il messaggio è inviato prima al server di Anonymouse, ripulito da ogni dato che possa consentire il riconoscimento del mittente (ma NON rimuoverà il vostro nome, se avete firmato la e-mail: non bisognerebbe scrivere il proprio nome in un messaggio anonimo...) e infine inoltrato al destinatario.

Nel complesso, è un buon servizio per un uso rapido e occasionale, molto buono se vogliamo accedere a un sito di torrent senza faticare troppo, ma non un servizio che consiglierei per questioni serie e vitali. Averlo a portata di mano, magari tra i “preferiti”, può comunque fare sempre comodo.

Breve guida ai tipi di cookies

2013-04-28T12:56:00.006+02:00

Premessa generale: questo non è un testo di cucina e i cookies di cui parlo sono quelli che, a ogni visita, i siti infilano nei browser dei propri utenti. Se uno strano scherzo di Google vi ha spediti qui, mentre cercavate ricette per i biscotti, forse è il caso di passare al risultato di ricerca successivo.

I cookies sono piccoli files, raramente superiori a una manciata di KB (la dimensione massima effettiva è 4095 bytes, ossia 4 KB), che il nostro browser tende ad accumulare mentre navighiamo in Rete, più o meno come un cane accumula le pulci. Questi piccoli files sono un gentile pensiero, offertoci dai siti che visitiamo, per ricordarsi del nostro. E per altri motivi, che variano da sito a sito e da cookie a cookie. Un cookie “standard” è una specie di timbro, grazie a cui un sito può riconoscerci: se non abbiamo un timbro, il sito ci vedrà come visitatori giunti lì per la prima volta e provvederà a marchiarci; se abbiamo già un timbro, il sito lo riconoscerà, saprà che siamo già passati di lì e si regolerà di conseguenza.

Un cookie, tipicamente, contiene una traccia della nostra identità, ma non solo: altri dati che possono essere memorizzati in un cookie sono i nostri dati di accesso a un sito (quando eseguite l’accesso a Facebook, per esempio, un cookie si ricorderà di questo e vi manterrà nel vostro account anche quando riaprirete il browser, se non ricorderete di fare logout alla fine della sessione), le preferenze che potremmo aver impostato per un sito (lingua, fuso orario, eccetera), ma anche le pagine che abbiamo visitato in un sito, eccetera. In breve, il cookie medio contiene un riassunto della nostra “vita” sul sito che lo ha collocato: leggendo questo riassunto, il sito può adattarsi meglio alle nostre abitudini, ai nostri interessi e alle nostre richieste, rifilandoci molto spesso le pubblicità che sono più in sintonia con noi e che, di conseguenza, hanno più probabilità di farci abboccare. Al nostro accesso, il sito pesca il suo cookie del nostro browser, ne invia le informazioni al server e, in base a queste informazioni, modificherà eventualmente i contenuti da mostrarci.

Come si può intuire, il controllo dei cookies è basilare, per chiunque sia interessato ad anonimato e privacy: coi cookies abilitati e attivi, lasciamo impronte digitali ovunque, il che potrebbe non essere ottimale, per chi si preoccupa di anonimato e privacy. I gestori di un sito potranno anche promettere di non utilizzare mai quei dati e non divulgarli mai (e di solito lo promettono, magari con le dita incrociate dietro la schiena), ma le nostre impronte digitali resteranno. Per questo motivo, i browser offrono solitamente la possibilità di controllare da quali siti vogliamo accettare cookies, quali dovranno essere bloccati, quali vogliamo cancellare, eccetera. Una buona norma sarebbe anche cancellare i cookies alla fine della sessione, ossia quando abbiamo finito di navigare, ed è una operazione che è sempre eseguita in automatico, se utilizziamo la modalità anonima, in incognito o comunque sia chiamata al nostro browser. Se li lasciamo nel browser, i cookies prima o poi moriranno per conto proprio, perché hanno una data di scadenza, ma spesso sarà necessario più di un anno, prima che un cookie muoia di morte naturale. Sempre che, nel frattempo, non saremo tornati su quel sito, rinnovandolo.

Esistono vari tipi di cookies, ognuno deputato a una funzione particolare. Se guardiamo ad esempio la lista dei cookies memorizzati all'interno di Google Chrome, che troviamo sotto chrome://settings/cookies, per ogni dominio possiamo vedere il numero dei cookies e, cliccando su quella sezione, anche il tipo di cookie, scritto in un rettangolo di colore più chiaro. In base al nome, possiamo capire anche quale sia la sua funzione. Un caso particolare, però, è rappresentato da Local storage, che non è un cookie, anche se lo troviamo elencato assieme a loro: local storage è una funzione introdotta dallo HTML5, che permette a un sito di memorizzare alcuni dati sul nostro computer, per velocizzare il caricamento o per altri scopi (un gioco, ad esempio, potrebbe registrare i nostri salvataggi come local storage, per recuperarli al nostro ritorno). Eccettuato dunque Local storage, tutti gli altri nomi che vedrete saranno tipi di cookie. Alcuni dovrebbero essere sufficientemente chiari, come language (provate a indovinarne la funzione), mentre altri hanno nomi alquanto criptici. Vedremo dunque di elencarne alcuni, tra i più diffusi.

Uno dei maggiori produttori e distributori di cookies è sicuramente Google Analytics, uno strumento molto amato e usato dai webmaster, per “misurare l’interazione degli utenti col sito”, ossia per vedere cosa fanno gli utenti mentre visitano un sito: che pagine visita l’utente X, da dove ci è arrivato, quanto tempo ci resta, cosa clicca all'interno della pagina, eccetera. Siccome tutto ciò è effettuato attraverso il collocamento e al lettura di cookies, è inevitabile ritrovarsi con un certo numero di cookies in più, dopo aver visitato un qualsiasi sito che utilizza Google Analytics: procederò dunque con una brevissima presentazione dei principali cookies collocati da questo strumento.

_ga: la sua aspettativa di vita è di 2 anni e serve a distinguere fra loro gli utenti.

__utma: aspettativa di vita di due anni, aggiornato ogni volta che i dati sono inviati a Google Analytics, serve a distinguere gli utenti e le varie sessioni di un utente.

__utmb: determina le nuove sessioni di attività su un sito, ossia le varie nostre visite.

__utmc: cancellato alla chiusura del browser, è un “gemello” del precedente, ma è usato per interagire con altre parti di Google Analytics.

__utmv: memorizza i dati di alcune variabili, che l’utente di un sito può modificare.

__utmz: registra il modo in cui un utente è arrivato al sito e spesso va a braccetto coi cookies di varie pubblicità.

La sfilza di cookies che cominciano con bb, come bblastvisit, bbpassword, bblastactivity, e varianti sul tema, sono collegati ad alcuni modelli di forum, proprio come i cookies sul tema phpbb, kunena, e compagnia bella. Questi cookies sono impostati dai forum che visitiamo, registrando il nostro accesso, la nostra ultima attività e così via; sono anche i responsabili delle funzione che ci permettono di passare direttamente agli ultimi messaggi non letti in una discussione, oppure ci mostrano i nuovi messaggi dalla nostra ultima visita.

Allo stesso modo, anche siti come YouTube utilizzano cookies per registrare le nostre preferenze, gli ultimi video che abbiamo visto, eccetera; in particolare, recently_watched_video_id_list ricorda la lista degli ultimi video da noi visti su un determinato browser. Sempre in tema di Google, un dominio a cui prestare attenzione è doubleclick.net, al cui interno è registrato il cookie id, cioè il principale (ma non l’unico) cookie utilizzato da Google per gestire la sua pubblicità. Altri cookies pubblicitari usati da Google, e che possono essere trovati più o meno ovunque in giro per i vari siti, sono _drt_, FLC, NID, exchange_uid, ma anche il cookie __gads è spesso a braccetto con quello di doubleclick, mentre PREF è un cookie che si occupa delle preferenze nei risultati di ricerca (e non solo), anche per tutti quegli utenti che non hanno eseguito l’accesso al proprio account Google.

Cliccando sul rettangolino contenente il nome di un cookie, su Google Chrome, è inoltre possibile esaminarlo più da vicino, ottenendo informazioni sul dominio a cui è collegato, la sua data di creazione, la data di scadenza e altro, tra cui un pulsante per rimuoverlo.

Pulire il computer con CCleaner – Aggiornamento

2013-04-24T12:36:00.004+02:00

È passato ormai parecchio tempo dal mio primo articolo dedicato a CCleaner (oltre due anni, per essere più precisi) e, siccome nel frattempo i suoi sviluppatori non sono rimasti a guardarsi le mani, ma lo hanno aggiornato di continuo, inserendo nuove funzioni, è forse il caso di prenderlo di nuovo in esame e vedere cosa sia cambiato e come sia oggi questo programma.

Prima di tutto, presentiamolo. CCleaner è un programma di servizio, che permette di mantenere pulito il computer, almeno sui piano dei contenuti (non lo spolvera ancora al nostro posto, se è a questo che stavate pensando), ma anche di svolgere altre piccole attività legate alla gestione del computer, che normalmente richiederebbero qualche peregrinazione tra le pieghe del Pannello di Controllo di Windows. CCleaner nasce come programma per aiutare la manutenzione del sistema operativo Windows, che spesso rischia di diventare ingestibile se abbiamo la mania di installare e disinstallare nuovi programmi di continuo (il Registro di Sistema piange, ogni volta che lo fate): con una pulizia regolare, oltre a liberare spazio su disco, possiamo anche ridurre le probabilità di schermate blu e altri crash di sistema, ma anche contenere il calo progressivo di velocità, sia in fase di accensione, sia durante il resto del tempo. Precisiamo che non fa miracoli, ma una corretta igiene del computer ne allungherà l’aspettativa di vita.

Di recente, CCleaner è stato reso disponibile anche per sistemi operativi Macintosh, forse perché l’aumento degli utenti (e soprattutto degli utenti non specialisti) ha reso necessario prepararsi a una certa manutenzione anche di questi sistemi. Dubito comunque che, in futuro, ne uscirà mai anche una versione per sistemi operativi a base Linux, ma staremo a vedere. A parte questo, CCleaner è disponibile in due versioni, gratuita e a pagamento: qui ci occuperemo della versione gratuita, che è la più usata.

Ecco come si presenta, su un sistema operativo Windows:

Nella parte alta, che qui ho tagliato perché non ci interessa, sono indicate alcune informazioni generali sul programma e sul computer: versione del programma, sistema operativo del computer, tipo di processore, quantità di RAM, eccetera. Sono dati che presumibilmente dovremmo già conoscere, ma ci sono comunque ricordati, per sicurezza. La parte più interessante è quella inferiore, cioè il pannello del programma vero e proprio.

Sulla sinistra vediamo indicate quattro sezioni: Pulizia, Registro, Strumenti e Opzioni. Già dal nome, dovrebbe essere facile intuire a cosa servano, ma procederò con una spiegazione più dettagliata, soffermandomi in particolare sulle novità.

Pulizia è dove ci occupiamo della pulizia del disco fisso, ossia l’eliminazione di files temporanei, files cestinati e tutto che i vari programmi producono di continuo e che, dopo un certo periodo, può essere eliminato senza problemi (o almeno, di solito è senza problemi). Col pulsante Analizza possiamo avviare una prima scansione del sistema, con un preventivo dello spazio che può essere liberato, suddiviso per voci; il pulsante Avvia pulizia, invece, avvierà la pulizia (strano, ma vero). Questa sezione è poi volta suddivisa in due schede: Windows e Applicazioni.

Nella scheda Windows troviamo tutti quei programmi, in dotazione in un sistema operativo Windows, su cui CCleaner può agire: cliccando sul quadratino accanto a ogni voce, la possiamo selezionare o deselezionare, decidendo così se sottoporla o meno alla pulizia. Le varie voci dovrebbero essere autodescrittive, ma per il reparto “Avanzate” abbiamo anche un popup esplicativo, che appare quando selezioniamo una voce e ci avvisa di possibili “effetti collaterali”.

Nella scheda Programmi troviamo una lista di programmi che non sono di base inclusi in Windows, ma che potremmo avere installato: programmi come Firefox, Google Chrome, i vari prodotti Adobe, ma anche Windows Media Player, che non è considerato parte integrante del sistema operativo, anche se è sempre presente al suo interno. Come per la scheda precedente, ogni voce può essere selezionata o deselezionata con un click, per includerla o meno nella pulizia. Come nota a margine, segnalo che compattare il database di un browser è operazione piuttosto lenta: se la selezionate, siate pronti ad aspettare un poco più a lungo.

Registro è una sezione dedicata alla pulizia del registro di sistema di Windows, operazione molto importante, ma anche molto delicata. Anche in questo caso, possiamo selezionare le varie voci da sottoporre a scansione, ognuna corrispondente a una porzione del registro; il pulsante Trova problemi esegue una scansione delle parti di registro che abbiamo selezionato e ci elenca tutti i problemi che potrebbe aver trovato; Ripara selezionati, infine, ci permette di procedere con la riparazione dei problemi trovati, che di solito consiste nella potatura delle chiavi di registro non utilizzate. Prima di cancellarle, però, abbiamo la possibilità di salvare una copia di backup, nel caso qualcosa dovesse andare storto: è utile farlo. Per utilizzare la copia di backup, in caso di bisogno, basterà poi un doppio click sul file corrispondente, per aggiungere di nuovo al registro le chiavi contenute nella copia.

Strumenti è un’altra sezione suddivisa in cinque schede, che in parte ripetono funzioni già incluse in Windows, ma spesso nascoste nei meandri del Pannello di controllo. È il caso ad esempio della prima scheda, ossia Disinstallazione, che ci mostra una lista di tutti i programmi installati sul nostro computer: selezionando un programma dalla lista, possiamo decidere di disinstallarlo o rinominarlo.

Avvio si è evoluto parecchio nel corso della storia di CCleaner e adesso presenta una serie di sottoschede, ognuna dedicata a un particolare problema. La prima, Windows, ci mostra l’elenco di tutti i programmi eseguiti all'avvio del computer: la lentezza del computer in fase di avvio è dovuta in parte al numero di programmi che deve eseguire, per cui da qui possiamo sveltire le operazioni, disattivando quei programmi che consideriamo non essenziali. Successivamente, troviamo una o più schede dedicate ai browser in uso sul nostro computer: Internet Explorer, Firefox, Google Chrome, e così via. Per ognuno, abbiamo una lista di applicazioni o estensioni, che sono avviate all'apertura del browser e che, di conseguenza, ne possono rallentare il caricamento: anche in questo caso, possiamo attivarle o disattivarle a nostro piacere. Procedendo, arriviamo ai Processi pianificati, che sono operazioni eseguite da Windows a intervalli regolari e periodicamente, in gran parte legato alla ricerca di aggiornamenti per questo o quel programma. A chiudere, troviamo il Menu contestuale, ossia quel menu che appare quando clicchiamo su qualcosa col tasto destro del mouse: a differenza dei precedenti, dove potevamo attivare o disattivare operazioni, qui possiamo attivare o disattivare le voci del menu.

Ricerca file è una novità e ci permette di cercare files doppi nel nostro computer; per files doppi si intendono naturalmente i files identici, che potrebbero essere presenti i più copie nel nostro disco fisso, per un qualsiasi motivo.

Ripristino sistema ci mostra la lista di tutti i punti di ripristino creati dal sistema operativo (o anche da noi) nel corso della sua attività. A esclusione dell’ultimo punto di ripristino, che non possiamo toccare, tutti gli altri possono essere eliminati, se vogliamo liberare spazio: starà poi a voi decidere se eliminarli e quali eliminare.

Bonifica drive permette di spazzare tutto lo spazio vuoto presente in un disco; volendo, permette anche di spazzare tutto il disco, il che equivale a una formattazione, ma in questo caso si perderà tutto il suo contenuto. La pulizia dello spazio libero, invece, serve ad assicurarsi che i files da noi cancellati rimangano cancellati, rendendone via via più difficile il recupero (più alto è il numero di sovrascrittura e più difficile sarà recuperare qualcosa); incidentalmente, di tanto in tanto ci si può ritrovare con più spazio libero di quanto ce ne fosse in precedenza, dopo questa operazione. In linea generale, la pulizia dello spazio libero su un disco è utile per ragioni di privacy o sicurezza, ma non è una priorità se non avete problemi di questo genere.

Opzioni, infine, racchiude tutte le impostazioni di CCleaner che potete personalizzare, per adattare il programma alle vostre preferenze e necessità. Sono tutte molto descrittive e non dovrebbero dare problemi particolari di comprensione. Sempre da qui, inoltre, possiamo avviare una ricerca di aggiornamenti del programma, oppure scegliere di passare alla versione Pro di CClenaer (ossia la versione a pagamento).

Sigil - Problemi con testo sottolineato

2013-04-21T16:18:00.001+02:00

In un recente commento a un altro post, mi è stato segnalato un problema con Sigil, di cui finora non mi ero accorto: il testo sottolineato, in certi casi, è segnalato come errore dal test di convalida interno a Sigil, ossia FlightCrew. Se si sottolinea una parte del testo, evidenziandola e premendo il tasto Sottolinea nella interfaccia grafica di Sigil, oppure si usa la combinazione di tasti CTRL+U, il testo sottolineato potrebbe essere considerato non valido nei successivi test sul formato EPUB. Come si può intuire da questa premessa, non uso molto spesso le sottolineature all'interno di un testo, ma ciò non ha importanza.

L’errore che può essere segnalato dal test FlightCrew interno a Sigil, ma anche dal test ufficiale di convalida EpubCheck, ha una spiegazione molto semplice: il tag inserito in automatico per segnalare il testo sottolineato, ossia <u>, è un tag che è stato prima deprecato e poi dichiarato illegale nello XHTML 1.1, cioè il linguaggio utilizzato come base da Sigil per il formato EPUB. In altri termini, Sigil utilizza un tag non valido, per segnalare il testo sottolineato. A questo punto ci si potrebbe domandare il perché di una scelta simile, ma forse è meglio non indagare: il punto è che il tag <u>, utilizzato da Sigil, è illegale e sarà sempre segnalato come errore nei test di convalida.

Il problema del tag <u> ha una facile soluzione e in parte ci viene incontro lo stesso Sigil.

Nelle precedenti versioni del programma, era attiva una funzione di controllo automatico del codice, che si occupava di volta in volta di correggere eventuali nostri errori stilistici: tag sbagliati o deprecati, tag non chiusi e così via. Questa funzione è HTML Tidy. Forse perché un po’ troppo zelante e affetta dal vizio di correggere qualsiasi cosa, anche ciò che noi avevamo inserito volontariamente, nelle ultime versioni di Sigil è stata sostituita da un’altra funzione analoga, ma meno invasiva: Stampa Gradevole Tidy (è il nome che ha in italiano e sì, lo so, può lasciare perplessi, ma facciamo finta di niente). Anche Stampa Gradevole Tidy esegue una pulizia automatica del codice, ma lo fa in modo meno invasivo e tende a non eliminare o sostituire arbitrariamente i tag inseriti da noi, come invece si divertiva a fare HTML Tidy.

Morale della favola: HTML Tidy, quando vedeva un tag <u>, si affrettava a sostituirlo con una apposita classe CSS, per rendere valido il nostro documento; Stampa Gradevole Tidy, invece, lo lascia così come è. Siccome le impostazioni di base prevedono che il controllo del codice sia eseguito con Stampa Gradevole Tidy, l’errore rimane e il test di convalida ce lo segnala.

La prima soluzione al problema del tag <u> consiste dunque nel modificare le impostazioni di base, attivando HTML Tidy come pulitore ufficiale del nostro codice. Premiamo il tasto F5, oppure passiamo dal menu Modifica -> Impostazioni e, nella finestra che si aprirà, passiamo alla scheda Pulisci il Sorgente, selezioniamo HTML Tidy e diamo un Ok.

Al prossimo controllo automatico, tutti i nostri tag <u> saranno sostituiti: soluzione rapida, semplice, ma non indolore, perché potremmo poi ritrovarci a litigare con HTML Tidy in altre circostanze, se cerchiamo di fargli accettare un tag diverso da quelli che è programmato per accettare. Inoltre, la classe CSS che creerà potrebbe essere inserita nello Header della pagina, invece che nel foglio di stile del nostro EPUB.

Una seconda soluzione, più elegante ma anche più nerd, consiste nel modificare a mano il codice delle nostre pagine e, successivamente, creare una nuova classe nel foglio di stile CSS. Prima di tutto, sostituiamo il tag <u> con un tag del tipo <span class="sottolineato"> e, di conseguenza, il tag </u> con un tag </span>: in questo modo, segnaliamo al documento (o, più precisamente, al dispositivo che visualizzerà il documento) che, per riprodurre il testo racchiuso in quel tag, dovrà utilizzare le regole specificate nella classe “sottolineato” del foglio di stile CSS. Il secondo passo consiste nel creare la classe “sottolineato” nel nostro foglio di stile: apriamo il foglio di stile CSS, che sarà nella cartella Styles (se abbiamo fatto tutto per bene) e aggiungiamo queste tre righe

span.sottolineato {
text-decoration: underline
}

In questo modo, abbiamo aggiunto una regola che prevede di sottolineare il testo, quando troviamo la classe “sottolineato” del tag <span>. Ovviamente, al posto di “sottolineato” si può usare qualsiasi altro nome, purché non sia già stato usato nel foglio di stile.

Una terza possibilità, sconsigliabile, è di sostituire il tag <u> col tag <ins>. Il tag <ins> è utilizzato per inserire un testo particolare dentro al nostro documento: il testo in questione apparirà sottolineato. Il problema di questa soluzione, però, è che in futuro potrebbe anche essere deciso di usare un altro sistema per evidenziare il testo inserito e, in questo caso, la sottolineatura sparirebbe: è possibile usarlo come rimpiazzo temporaneo, ma per una modifica sicura è meglio usare una delle due soluzioni precedenti.