Facebook – Il diario cambia grafica

Annunciato già da qualche tempo, in questi giorni sta arrivando anche per l’Italia la nuova versione del diario di Facebook, ossia una timeline rivista e corretta. Non necessariamente migliore, sia chiaro, perché molto dipende dai gusti, ma sicuramente diversa e potrebbe essere necessario qualche tempo, prima di abituarsi alla modifica: se il vostro profilo non è ancora cambiato, potete cominciare a prepararvi psicologicamente, perché cambierà a breve. Ma vediamo la nuova struttura del diario.

La copertina non cambia e potete usarla come punto di riferimento, per trovare tutto il resto: è sempre in alto ed è sempre la prima cosa che vediamo, accedendo a un profilo. Col nuovo diario, però, nell'angolo in basso a destra della copertina troviamo due pulsanti, che in precedenza erano allineati in orizzontale al di sotto della copertina: il pulsante Aggiorna informazioni e il pulsante Registro attività. Non dovrebbe essere difficile intuire a cosa servano. Sulla parte destra del pulsante Registro attività, inoltre, troviamo anche una rotellina: cliccandola, possiamo accedere a quel piccolo menu, che avevamo anche in precedenza e che permette di visualizzare il nostro profilo dal punto di vista di un amico o di un estraneo. Niente di nuova, a parte la posizione, insomma.

Appiccicato a destra della copertina troviamo poi il solito minicalendario, che ci permette di selezionare un mese all'interno di un anno, e avere rapido accesso a tutto ciò che è stato pubblicato sul nostro diario in quella data. Anche stavolta, niente di nuovo sul fronte occidentale.

Scendendo sotto la copertina, invece, i cambiamenti si fanno più grandi. Prima di tutto, abbiamo una serie di voci, che in precedenza erano raccolte in riquadri grafici e adesso sono molto più simili alla barra del menu in un qualsiasi programma: in ordine, da sinistra a destra, troviamo Diario, Informazioni, Amici, Foto e Altro. Cliccando su una di queste voci, si aprirà la sezione corrispondente del profilo, con la eccezione di Altro, che invece ci mostrerà un sottomenu: credo non sia necessario specificare a quale sezione del diario ci condurranno, dato che è già dichiarata dal nome.

Scendendo ancora, il diario si divide in due colonne: la colonna di destra comprende tutti i post pubblicati sul nostro diario, sia quelli pubblicati da noi, sia quelli pubblicati dai nostri amici, mentre la colonna di sinistra è una sorta di polpettone, una lanx satura in cui è stato buttato tutto il resto. In linea generale, il nuovo diario passa da una distribuzione orizzontale dello spazio a una verticale, cosa che è molto evidente nella colonna di sinistra, dove le varie categorie sono impilate le une sopra le altre (oppure le une sotto le altre, a seconda dei punti di vista).

La colonna di sinistra segue più o meno lo stesso ordine delle voci allineate sotto la copertina. Nella prima parte, più in alto, troviamo elencate le nostre informazioni personali, cioè luogo di lavoro, di studio, di residenza e così via. Scendendo al pianerottolo inferiore, è la volta della nostra lista di amici, che sarà rappresentata solo da un numero ristretto di essi: in generale, per quanto posso vedere sembra che la selezione degli amici dia una certa precedenza a quelli che noi abbiamo selezionato come “amici più stretti”, o comunque agli amici con cui interagiamo di più, almeno per adesso. Non escludo che, in futuro, saranno rimescolati da una certa dose di pseudocasualità, per non rendere troppo monotona la lista.

Proseguendo verso il basso, è poi il turno delle foto, presentate in una breve anteprima dove la precedenza va a quelle in cui siamo stati taggati (o almeno, per adesso pare così). Dopo le foto abbiamo i luoghi in cui siamo stati taggati, cioè quella che prima era la Mappa, dopodiché si procede con una lista più o meno lunga dei vari interessi: musica, film, programmi TV, libri, pagine, eccetera. A chiudere la colonna di sinistra, troviamo le nostre note, se ne abbiamo.

La colonna di destra, invece, ha una struttura molto più semplice: in linea di massima, è uguale al diario di prima, ma compresso in una sola colonna. In alto troviamo il solito “A cosa stai pensando”, dove possiamo scrivere i nostri messaggi, e a seguire troviamo tutti i nostri post e gli eventuali post pubblicati da altri, in ordine cronologico. Se qualcosa è stato selezionato come “avvenimento importante”, è sempre qui che lo troveremo, nelle prime posizioni della colonna.

Un altro cambiamento, poi, riguarda la sezione Informazioni, che in precedenza conteneva solo le nostre informazioni personali, mentre adesso è un mare magnum, in cui troviamo di tutto e di più. Le vecchie informazioni di base continuano ad apparire, nella parte superiore della pagina, ma il resto è un calderone che va sotto il nome di “Altre informazioni su Pincopallino” (al posto di Pincopallino, inserite il vostro nome) e comprende lista di amici, foto, luoghi, interessi e in breve tutto ciò che ci riguarda. Cliccare sulla voce Informazioni, nella parte alta del diario, è di fatto un modo per accedere a tutte le altre sezioni, dato che ognuna di essere è inclusa in questa. Strana scelta, che io trovo molto confusa, ma così hanno deciso gli illuminati architetti di Facebook.

Se tutto questo ha già prodotto in voi una certa quantità di brontolamenti, come succede a ogni modifica, grafia e non, i cambiamenti di Facebook non sono ancora finiti. Prossimamente, anche il reparto commenti sarà sottoposto a una rivisitazione, con l’aggiunta di una nuova opzione: oltre a cliccare “mi piace” per un commento, avremo anche la possibilità di rispondere direttamente a quel commento. Niente più commenti impilati tutti su una stessa linea, uno sotto l’altro, ma una struttura più articolata, con commenti ai commenti: in pratica, niente di diverso da quanto accade nell'area commenti di un qualsiasi blog, già da anni. Ma questo arriverà più avanti e per il momento non ce ne dobbiamo preoccupare. Forse. In realtà su alcuni profili questa nuova impostazione è già attiva e adesso, sotto i commenti, è possibile vedere la voce Reply, oltre al classico Mi piace: il fatto che sia in inglese, però, lascia pensare che probabilmente il suo nome cambierà e sarà italianizzato, una volta entrata a regime per tutti.

Scaricare un archivio esteso di Facebook

Già in passato avevo parlato della possibilità di scaricare il proprio profilo Facebook, cioè un archivio contenente un certo numero di informazioni e materiale, che costituiva, in un certo senso, la “vita” di ogni utente su Facebook: tutte le foto e tutti i video caricati, tutti gli aggiornamenti di stato, la cronologia di tutti i messaggi e di tutte le sessioni di chat, la lista degli amici, e così via. Oltre a questa possibilità, Facebook ha aggiunto in seguito un archivio esteso, che contiene dati supplementari e che, allo stesso modo del profilo “standard”, possiamo scaricare. È di questo archivio esteso che parlerò oggi.

Le informazioni su ogni utente di Facebook (o almeno le informazioni a cui ogni un utente può accedere) sono raccolte in tre diverse aree: il profilo scaricabile, l’archivio esteso e il Registro delle attività. Del registro delle attività ho già parlato ed è una semplice cronologia delle attività svolte su Facebook. Il profilo scaricabile è la cartella compressa, che contiene la maggior parte degli elementi “visibili” nel nostro profilo Facebook, e che possiamo scaricare dal nostro profilo, come e quando vogliamo: di fatto, può essere considerato una versione tascabile del nostro profilo Facebook, che possiamo conservare o archiviare dove vogliamo.

L’archivio esteso è un supplemento al profilo scaricabile: come questo, può essere scaricato da Facebook e conservato sul nostro computer, ma include diverse informazioni extra, spesso non visibili sul nostro profilo, ma che possono tornare utili per indagare su eventuali strani accadimenti, per esempio se sospettiamo che altri abbiano accesso al nostro profilo. Nello specifico, l’archivio esteso include informazioni quali:

• elenco di tutte le sessioni attive, inclusi data, ora, dispositivo, indirizzo IP e cookie;
• lista (non completa) degli indirizzo IP da cui è stato effettuato l’accesso al nostro account;
• indirizzo IP, ora e data degli accessi a Facebook;
• indirizzo IP, ora e data delle uscite da Facebook;

e varie altre informazioni, più o meno utili a seconda dei casi. Se sospettiamo che qualcun altro possa avere accesso al nostro account di Facebook, però, quelli che ho elencato sopra sono i dati più importanti, perché ci permettono di monitorare entrate e uscite, per verificare eventuali stranezze.

Scaricare l’archivio esteso non è diverso dallo scaricare il nostro profilo normale: la pagina di partenza è la stessa, ossia il link che troviamo a piè di pagina nella sezione sulle Impostazioni account. Dopo averlo cliccato, si aprirà una nuova pagina, che ci offrirà due possibilità: scaricare il nostro profilo, oppure scaricare l’archivio esteso. Se scegliamo il secondo, ci sarà richiesto di inserire di nuovo la nostra password, per ragioni di sicurezza:

Uscendo dalla sicurezza e spostandoci più verso la privacy, o in generale il data mining, scaricare il nostro archivio esteso ci permette di osservare un altro dato, che Facebook utilizza ma che non è normalmente visibile sul nostro account, ossia gli “argomenti delle inserzioni”: “una lista di argomenti che possono essere utilizzati per individuarti come pubblico di destinazione e che vengono definiti in base a Mi piace, interessi e altri dati inseriti nel diario”, per usare la descrizione fornita da Facebook.

In termini più semplici (spero), ogni nostra azione su Facebook genera una informazione, relativa al tipo di azione svolta: raccogliendo e catalogando tutte queste informazioni, Facebook costruisce un nostro profilo di consumatori, che sarà poi utilizzato per scegliere le pubblicità più adatte ai nostri interessi. Da notare, poi, che il profilo così ottenuto non sarà soltanto utilizzato da Facebook, per le sue inserzioni pubblicitarie, ma in base ai regolamenti di Facebook (che avete sottoscritto al momento dell’iscrizione, anche se probabilmente non vi siete presi la briga di leggerli) questo profilo potrà essere girato anche a terzi, cioè aziende che avranno la possibilità di acquistare da Facebook il pubblico più adatto per la propria pubblicità.

Può essere interessante scaricare l’archivio esteso, anche solo per vedere come siamo stati catalogati da Facebook, in base ai dati personali che abbiamo fornito, alle pagine su cui abbiamo messo “Mi piace”, eccetera.

Un altro dato più o meno interessante, che possiamo ottenere con l’archivio esteso, è il modello dei suggerimenti di tag, relativo a una funzione di suggerimento fotografico, che al momento è poco o per nulla attiva, almeno in Italia. Questo modello consiste in un numero, ricavato da un confronto tra tutte le foto in cui noi ci siamo taggati, un numero che dovrà rappresentare, in codice, la nostra faccia. Quando un amico carica una foto, se l’analisi di una faccia corrisponde al numero assegnato alla nostra, Facebook suggerirà il nostro tag a quell'amico. Tutto questo, almeno, in teoria, ma al momento pare essere una funzione ancora molto sperimentale.

Prossimamente, l’archivio esteso dovrebbe includere anche tutti i metadati, che erano inseriti nelle foto caricate da noi, ma per adesso non li troverete. I metadati sono informazioni incluse nelle foto digitali, come la data e l’ora in cui sono state scattate, a volte il luogo (se la foto è stata scattata con un dispositivo dotato di geolocalizzazione), il tipo di macchina fotografica/cellulare, eccetera: se non ci preoccupiamo di rimuoverle, queste informazioni resteranno nelle foto e potrebbero “raccontare” molte più cose, di quante noi vorremmo renderne pubbliche.

Il riconoscimento vocale con Google Chrome

Una delle novità introdotte a partire dalla versione 25 di Google Chrome è il completo supporto alla interfaccia per il riconoscimento vocale; l’interfaccia per il riconoscimento vocale, a propria volta, è la Web Speech API, una delle numerose interfacce JavaScript, più o meno utili a seconda dei casi, che stanno spuntando come funghi con la diffusione dello HTML5, supportato ormai da tutti i browser più recenti.

In linea generale, questa interfaccia JavaScript dovrebbe rendere più semplice il lavoro di aggiungere alle pagine web tutte le funzioni connesse al riconoscimento vocale: dettare testi, impartire comandi, eccetera. Se effettivamente riuscirà a semplificare il lavoro, però, dipenderà da quanto sarà diffuso il supporto per questa interfaccia sui vari browser, ma questo è un altro paio di maniche. Intanto, possiamo guardare un primo esempio del suo funzionamento.

Prima di cominciare a dettare un testo, sarà necessario selezionare il linguaggio e, eventualmente, il paese, se è un linguaggio parlato in più paesi. Successivamente, un click sulla icona a forma di microfono, in alto a destra nel riquadro, permetterà al browser di attivare il microfono del nostro computer, per registrare la voce: basterà poi cominciare a parlare e vedremo il testo apparire sullo schermo, in una trascrizione più o meno corretta. Alla fine, clicchiamo di nuovo sul microfono, per avvisare che la registrazione deve essere interrotta. Appariranno a questo punto due pulsanti, sotto il riquadro di testo: il primo ci permette di copiare il testo (per incollarlo dove preferiamo), il secondo ci permetterà di creare una e-mail, il cui contenuto sarà proprio il testo da noi dettato.

Per adesso, i linguaggi supportati sono circa trenta, italiano incluso, ma ovviamente la qualità del risultato varia a seconda del linguaggio: più diffusa è la lingua, migliore in linea di massima è il risultato. In altri termini, con l’inglese funziona generalmente bene, con l’italiano non sempre si otterrà una trascrizione esatta, come potrete verificare con qualche esperimento. Miglioreranno strada facendo.

Un esempio più concreto lo si può ottenere sul sito della Peanuts Gallery, dove sono messi a disposizione vari vecchi filmati in bianco e nero, a cui è possibile aggiungere un testo utilizzando proprio questa interfaccia di riconoscimento vocale: in altri termini, scegliete un video e parlate a voce alta davanti al vostro computer, cercando di non pensare a quanto sia ridicola la scena vista dall'esterno  e la funzione di riconoscimento vocale provvederà a registrare ciò che dite, per poi aggiungerlo al filmato come intertitolo, ossia quella didascalia che, nei vecchi film muti, compariva tra una scena e l’altra.

Dopo questi due esempi di come si possa utilizzare, vediamo anche qualcosa di più preciso sul suo funzionamento: in cosa consiste questa Web Speech API?

Come qualsiasi altra interfaccia, la Web Speech API ci mette a disposizione una serie di funzioni da utilizzare nel nostro codice, con la garanzia che, utilizzando la funzione X, otterremo sempre un certo risultato (se il browser che eseguirà il nostro codice supporta questa interfaccia, ovviamente). Se il risultato è garantito, il modo in cui questo risultato sarà ottenuto è variabile e dipende dai singoli browser: alcuni possono decidere di eseguire il riconoscimento vocale in locale, ossia sul nostro computer, attraverso un apposito “motore” aggiunto al browser; altri, invece, potranno decidere di registrare ciò che diciamo, inviarlo ai propri server e poi restituirci sulla pagina il risultato del riconoscimento. Per inciso, negli esempi di Google Chrome il riconoscimento vocale avviene attraverso un server: altri browser, però, potrebbero svilupparlo differentemente. La Web Speech API supporta entrambe le soluzioni: se vogliamo utilizzarla in una nostra pagina, dunque, non abbiamo bisogno di preoccuparci di come effettivamente avvenga il riconoscimento vocale, ma basta sapere quali comandi utilizzare per avviare il riconoscimento, interromperlo e raccoglierne i risultati.

Se il discorso non è chiaro, prendiamo un esempio più familiare: l’interfaccia di un’automobile. Tutte le automobili hanno un freno; premendolo, la velocità diminuirà. Un automobilista non ha strettamente bisogno di sapere i dettagli sull’impianto frenante montato sulla sua auto: per usare il freno, gli è sufficiente conoscere il pedale corrispondente e conoscere il risultato della pressione, ossia un calo della velocità. Allo stesso modo, se vogliamo arricchire la nostra pagina web con un form, che può essere compilato dettando il testo, invece di scriverlo a mano, ci basterà sapere quali funzioni JavaScript dobbiamo invocare, lasciando poi che sia il browser a preoccuparsi per noi di effettuare il riconoscimento vero e proprio.

Per le funzioni, possiamo fare riferimento alla pagina di presentazione di questa interfaccia, su cui compaiono anche alcuni esempi di utilizzo. In linea di massima, si comincerà sempre con la verifica del supporto offerto dal browser: se il browser non supporta la Web Speech, è inutile proseguire. Se la supporta, per prima cosa creeremo un nuovo oggetto SpeechRecognition e ne utilizzeremo i metodi principali: start() per avviare la registrazione (magari cliccando su qualche elemento della pagina), stop() per interromperla. Esistono poi diversi attributi da impostare, a seconda del tipo di registrazione che vogliamo: registrazione continua o singola, come deve essere processato il testo, quale sia il linguaggio di riferimento, e così via. Per esempi più completi del suo utilizzo, però, è meglio fare riferimento a quelli proposti nella presentazione della interfaccia, oltre anche a quelli che ci ha offerto Google.

Blender – Creare oggetti riflettenti o trasparenti

Avevo già introdotto in precedenza cosa fossero i materiali in Blender e come assegnarli a un oggetto; tornerò oggi sull'argomento  per osservare altre proprietà dei materiali che possono tornare utili in molte occasioni: in particolare, mi concentrerò sui riquadri Mirror e Transparency.

Mirror, come è facile intuire, permette di rendere riflettente un oggetto o una superficie: lo troviamo all'interno della sezione Material, nella finestra delle proprietà, e in partenza è disattivato. Lo possiamo attivare con un click nel quadratino alla sua sinistra e questo ci renderà disponibili alcune voci, da modificare a seconda del tipo di riflessione che vogliamo ottenere.

La più importante è Reflectivity, che va da 0 a 1 e indica quanto l’oggetto dovrà essere riflettente: con 0 non rifletterà alcunché, con 1 avremo uno specchio perfetto. La barra sottostante, identica a quella che avevamo già visto per impostare il colore, serve ad assegnare una particolare tonalità al riflesso, se vogliamo; se non ci interessa e vogliamo invece uno specchio normale e neutro, è una parte che possiamo ignorare tranquillamente.

Con la voce Fresnel possiamo assegnare alla superficie riflettente un aspetto appannato, mentre la sezione Gloss permette di assegnare alla superficie un effetto deformante, più o meno accentuato a seconda dei valori che assegniamo a tutte le sue voci. Max Dist, infine, permette di assegnare una distanza massima alla potenza dello specchio, oltre la quale gli oggetti non saranno riflessi in modo preciso, ma si fonderanno gradualmente con ciò che sceglieremo in Fade To (di solito il cielo): con un valore 0, come è all'inizio, lo specchio non avrà limiti e rifletterà oggetti a qualsiasi distanza.

Dopo questa breve descrizione dei comandi, vediamo anche di metterli in pratica con un esempio: un semplice specchio, senza tanti fronzoli o decorazioni. La prima cosa da fare sarà modellare uno specchio, il che è un compito molto semplice. Eliminiamo il solito cubo iniziale e sostituiamolo con un piano, ridimensionandolo a nostro piacimento: io lo mantengo su una dimensione di X: 3 e Y: 2.

Passiamo adesso alla modalità di modifica (Edit Mode) e prepariamoci a un paio di espansioni e ridimensionamenti, per disegnare la cornice. Prima di tutto, lo espandiamo un poco lungo l’asse Z (diciamo di 0.2), premiamo di nuovo E e subito dopo Invio, per creare un nuovo strato, e stringiamo un poco questo nuovo strato, per completare la cornice.

A questo punto, espandiamo di nuovo lungo l’asse Z, ma in negativo (diciamo di -0.1), e il nostro specchio è completo, almeno come forma generale: tornando alla modalità oggetto, possiamo dare un colpetto di Smooth, giusto per levigarlo e renderlo più piacevole alla vista. Fatto questo, dovremo pensare anche ad assegnargli le proprietà di uno specchio.

Per un buon lavoro, ricorreremo a una soluzione nuova: assegneremo due materiali a questo oggetto, uno per la cornice e uno per il vetro dello specchio. Partiamo assegnando un materiale di base, nel solito modo: questo materiale avrà il colore che preferiamo e un valore Specular molto basso.

Niente di particolare, fino a questo punto. Creiamo anche un nuovo materiale, accanto a quello già assegnato: è il materiale che useremo come “vetro” del nostro specchio: le sue proprietà saranno modificate in seguito, per adesso creiamolo e basta. Passiamo di nuovo alla modalità di modifica e selezioniamo solo la faccia interna dello specchio, quella che dovrà essere il vetro.

Nella finestra delle proprietà, selezioniamo il materiale per il vetro e clicchiamo su Assign: questo materiale sarà assegnato alla parte di oggetto selezionata. Tornando alla modalità oggetto, questo è il risultato che vedremo.

È il momento di modificare le proprietà dello specchio, adesso che lo abbiamo costruito. Controllando che sia sempre selezionato il materiale per il vetro, attiviamo la sezione Mirror e pompiamo al massimo la voce Reflectivity: vogliamo uno specchio funzionante, ma normale, per cui ignoreremo le altre proprietà. Nessuno però vi vieta di fare qualche esperimento, modificando i loro valori e guardando il risultato che si ottiene. Il risultato finale sarà questo.

La seconda proprietà che vedremo oggi è Transparency, spesso e volentieri collegata a Mirror (il vetro tende a essere trasparente, dopotutto). Come il nome suggerisce, serve a modificare il grado di trasparenza di un oggetto o di una superficie: il vetro è certo il primo materiale a cui si pensa, ma è usato anche nella creazione di acqua e altre cose che, in grado più o meno elevato, permettono di vedere attraverso di esse.

Anche Transparency deve essere selezionata, prima di diventare attiva, ma a differenza di Mirror non è sufficiente cliccare nel quadratino: sarà anche necessario scegliere il tipo di tecnica da utilizzare, per rendere la trasparenza di un oggetto. Le tre soluzioni di base sono Mask, Z Transparency e Raytrace, ognuna con pregi e difetti: Z Transparency è quello da usare nel dubbio e va bene più o meno ovunque (non a caso è già selezionato da Blender), mentre Raytrace è quello che permette di ottenere i risultati migliori, ma è parecchio dispendioso in termini di tempo (in pratica, è lento da rendere). Indicativamente, è meglio usare Z Transparency nelle situazioni normali e per elementi che dovranno essere riprodotti in continuazione, riservando invece Raytrace per i casi particolari o per le illustrazioni che dovranno essere rese una volta sola, non riprodotte a ogni fotogramma.

Qualunque sia la scelta, alcuni valori sono comuni a tutti. Alpha indica il grado di trasparenza: più è alto, meno è trasparente il nostro oggetto. Specular è collegato al precedente e regola il valore di trasparenza nelle aree che possiedono anche proprietà di riflessione. Il valore di Fresnel può essere aumentato, per ottenere un effetto più simile a quello del vetro reale (se il nostro oggetto deve essere di vetro). Il valore Alpha è comunque il valore di base, da utilizzare per ottenere una trasparenza rapida e a basso costo: anche la qualità non sarà altissima, ma non si può avere tutto.

Se decidiamo di utilizzare Raytrace, avremo a nostra disposizione anche altri valori modificabili. IOR non ha a che fare coi fondi neri del Vaticano, in questo caso, ma rappresenta l’indice di rifrazione del materiale: aumentandolo, possiamo ottenere un effetto distorcente nel materiale, basato sui principi della rifrazione. Pensate a una lente, come esempio di oggetto reale con un valore elevato di IOR: gli oggetti visti attraverso di essa appariranno distorti e spesso ingranditi. Il valore Depth, invece, determina la quantità di raggi luminosi da filtrare attraverso il nostro oggetto: se un oggetto è poco trasparente, anche dopo aver cambiato gli altri valori, provate ad aumentarlo.

Esempio di sfera con Z Transparency

Prosegui alla puntata successiva.

Blender – Come utilizzare testi 3D

Torniamo a parlare di Blender, con una “puntata” dedicata a un altro tipo di elemento, che è possibile aggiungere ala scena: dopo aver visto l’elemento mesh, cioè i tipici oggetti solidi come il cubo di esempio, è giusto il momento di vedere anche l’elemento Text.

Usare un elemento Text è il modo più semplice per aggiungere un testo tridimensionale alla scena. O almeno, per aggiungere un testo potenzialmente tridimensionale, dato che, nel momento in cui lo aggiungiamo, il testo è spalmato su due dimensioni e toccherà poi a noi assegnargli uno spessore. Ma vediamo prima di tutto come funziona.

Partendo dalla classica schermata iniziale di Blender, cancelliamo il cubo di esempio, giusto per liberare spazio: potremmo anche tenercelo, se vogliamo, ma è più comodo lavorare con un campo  vuoto. Rimosso il cubo, premiamo la combinazione di tasti SHIFT+A, per aggiungere un nuovo elemento alla scena, e scegliamo di aggiungere Text. Otterremo questa situazione:

Come possiamo vedere, il testo è collocato al centro del piano, ossia dove si trova il cursore 3D (quella specie di mirino coi bordi biancorossi) e riporta una scritta molto banale: text. La potremo modificare a piacimento, per cui possiamo ignorarla, per adesso. Altra cosa da osservare è che il testo si presenta bidimensionale (non ha spessore) ed è appunto spalmato sul pavimento. Se invece lo vogliamo mettere in piedi, dovremo ruotarlo di 90 gradi lungo l’asse X, cosa che possiamo fare in due modi: premendo in sequenza i tasti R X 90 e concludendo con Invio, per confermare la nostra manovra (R per ruotarlo, X per l’asse di rotazione, 90 per i gradi di rotazione), oppure usando la barra di trasformazione e scrivendo 90 come valore di X, nel riquadro Rotation. Il risultato è lo stesso:

Potremmo passare subito in modalità di modifica (Edit Mode), premendo il tasto TAB, e cambiare il testo della scritta, ma prima preferisco modificarne le proprietà: è infatti possibile applicare anche a questo tipo di testo tutte le modifiche a cui siamo abituati, dal nostro elaboratore di testi preferito. Possiamo dunque cambiare il font, le dimensioni, aggiungere un corsivo, un grassetto, sottolinearlo, convertirlo in maiuscoletto, eccetera. Per fare questo, basterà guardare nella finestra delle proprietà e cliccare sulla icona a forma di F, che compare quando il testo è selezionato.

Ci sono svariate voci, molte delle quali probabilmente saranno ignote. Per il momento, è sufficiente concentrarsi sul riquadro Font, che troviamo un poco in basso. Anche il successivo riquadro Paragraph è utile, quando si tratta di modificare l’aspetto del testo, per cui inquadriamoli entrambi.

Come possiamo vedere, il font di partenza è presentato come Bfont: se non ci piace, lo possiamo cambiare facilmente, cliccando sulla icona a forma di cartella accanto al tipo di carattere che vogliamo modificare (Regular per il testo normale, Bold per il grassetto, Italic per il corsivo) e selezionando il font che vogliamo dalla cartella Font del nostro computer, o anche da qualsiasi altra cartella. Selezioniamo ad esempio un font Verdana, come testo di base.

Scendendo, la voce Size ci permette di modificare la dimensione dei caratteri. Il valore iniziale è 1 e un valore 2 ne raddoppierà la dimensione. Modificando la voce Shear, invece, possiamo cambiare la inclinazione del testo. Provare per credere. Le varie altre voci di questo riquadro dovrebbero essere tutte sufficientemente intuitive, a parte Object Font e Text on Curve: la prima rientra tra quelle che possiamo ignorare, trattandosi solo di una introduzione a Blender, mentre la seconda la vedremo dopo.

Il riquadro Paragraph ci permette di modificare l’allineamento del testo, rispetto al suo centro: il suo centro è quel puntino giallo, esattamente come per tutti gli altri oggetti. Scegliendo Left, il testo si collocherà in modo da avere il puntino a sinistra; scegliendo Center, il puntino sarà al centro; scegliendo Right sarà a destra, e così via. sono i soliti valori che troviamo negli elaboratori di testo, per allineare il paragrafo. Le opzioni di Spacing, invece, ci permettono di decidere quanto spazio lasciare tra un carattere e l’altro, tra una parola e l’altra, oppure tra una riga e l’altra, se il testo si estende su più righe. In linea di massima, fin qui nulla di nuovo, rispetto a quanto possiamo fare col testo in altri programmi, anche perché, finora, il nostro testo è rimasto su due dimensioni.

Il riquadro Geometry ci permette di aggiungere anche una terza dimensione al testo, decidendone lo spessore, ed Extrude è la voce che ci interessa: aumentiamo il suo valore e il testo “ingrasserà” in corrispondenza.

Dopo aver dato spessore al nostro testo, siamo pronti a renderlo più interessante. Premiamo il tasto Tab, per passare alla modalità di modifica.

Quella barra verticale bianca, che appare a destra del testo, corrisponde al cursore lampeggiante in un qualsiasi elaboratore di testo: possiamo usarlo per cancellare il testo attuale e poi scrivere quello che ci pare, proprio come scriveremmo normalmente. Valgono le regole che troviamo in un banale foglio del Blocco Note: Invio per andare a capo e proseguire nella riga sottostante, barra spaziatrice per lasciare uno spazio, eccetera. Una volta che abbiamo finito di scrivere, premiamo di nuovo TAB per tornare alla modalità oggetto e fissare il risultato.

Il testo grigio non è molto bello, ma per adesso non possiamo colorarlo e decorarlo, come faremmo con un normale oggetto: questo perché non è un normale oggetto, o almeno non ancora. Prima di poter aggiungere materiali e texture, dobbiamo convertire il testo in una mesh, operazione molto semplice: premiamo la combinazione di tasti ALT+C e scegliamo Mesh from Curve/Meta/Surf/Text dalla finestrella che si aprirà. Adesso il nostro testo è diventato un normale oggetto di Blender e lo possiamo modificare come se fosse il classico cubo di esempio: possiamo assegnargli un materiale, una texture, eccetera. Come noteremo, anche la finestra delle proprietà è cambiata: non c’è più la icona a F, che rappresenta un testo, ma ci sono le solite icone da oggetto. Questo, ad esempio, è un testo semitrasparente, con relative impostazioni per ottenere questo effetto.

Finora abbiamo visto un testo “dritto”, scritto su una linea retta, ma non è necessario che sia sempre così. Una opzione a cui ho accennato in precedenza è appunto Text on Curve e serve a ottenere appunto questo effetto, ossia distribuire il testo, in modo che segua il contorno di una linea curva. Per utilizzare questo, effetto, però, dovremo prima aggiungere un secondo tipo di oggetto alla nostra scena, oltre al testo: dovremo aggiungere un oggetto di tipo Curve. In linea di massima, qualsiasi tipo di curva può andare bene, ma come esempio utilizzerò il tipo Path.

Ripartiamo dunque dal nostro schermo iniziale di Blender, cancelliamo il cubo, aggiungiamo un oggetto Text, spostiamo il cursore 3D in un punto poco più in basso della scritta e aggiungiamo un oggetto Curve -> Path.

Premiamo il tasto S, per ridimensionare la curva, e allungarla quel tanto che basta a includere tutto il testo, poi premiamo TAB e passiamo alla modalità di modifica, per darle la forma che vogliamo. Per curvarla e torcerla a piacimento, possiamo selezionare uno dei punti della curva e spostarlo col tasto G, oppure possiamo espanderla col tasto E.

Una volta ottenuto un formato che ci soddisfa, premiamo di nuovo TAB e torniamo alla modalità oggetto. Selezioniamo il testo, clicchiamo sulla icona F della finestra delle proprietà e prepariamoci a “spargere” il nostro testo lungo quella curva. Per farlo, andiamo al riquadro Font e cerchiamo la voce Text on Curve: clicchiamo sul rettangolino sottostante, selezioniamo NurbsPath, che è la sola curva disponibile, ed ecco il risultato.

Prosegui alla puntata successiva.

Come usare fogli di stile CSS negli EPUB (2)

Esistono quattro sistemi, per indicare le dimensioni di qualcosa in un foglio di stile: si possono esprimere le dimensioni in pixel (px), in punti (pt), in proporzione ai caratteri (em) e in percentuale. Lo em è una unità di misura che corrisponde all’ampiezza di un carattere: se scriviamo nel foglio di stile di utilizzare un rientro di 2em, stiamo chiedendo un rientro pari a due caratteri, qualunque sia il tipo di carattere utilizzato. È un ottimo sistema per descrivere le proporzioni interne di una pagina, perché mantiene sempre le stesse proporzioni, qualunque sia la dimensione del carattere; allo stesso modo, la percentuale è un ottimo sistema per descrivere la struttura generale della pagina, perché si mantiene costante a prescindere dalla dimensione dello schermo su cui il libro è visualizzato. Pixel e punti, invece, sono dimensioni fisse ed è bene utilizzarle solo per elementi che non dovranno mai cambiare, come ad esempio le linee di contorno di una tabella.
L’elemento body determina la struttura generale di una pagina; gli elementi div sono usati per dividere la pagina in più componenti (di solito, titolo e testo) e utilizzano id diversi, per distinguere le varie parti; gli elementi p servono a suddividere il testo in paragrafi e possono utilizzare class diverse, se vogliamo che alcuni paragrafi abbiano un aspetto differente. Per ognuna di queste voci, il foglio di stile presenterà una struttura apposita: capita spesso, ad esempio, di voler utilizzare una classe diversa per il primo paragrafo di ogni capitolo, così da formattarlo in modo differente rispetto ai successivi.
Per modificare un tag, avremo il nome del tag, seguito dalle parentesi graffe e dalla lista di attributi da modificare. In questo modo, la modifica si applicherà a tutti i tag di quel tipo.
p {
    attributo: valore;
}Per lavori di precisione, dovremo invece utilizzare id (nel caso del tag <div>) e class (in tutti gli altri casi). In questo modo, la modifica si applicherà ovunque sia usato quel valore di id o di class e potremo avere tag uguali che si comportano in modo differente.
Nel caso di un id, dovremo scrivere il suo nome preceduto da #:
#pagina {
    attributo: valore;
}Nel caso di class, dovremo scrivere il nome preceduto da un punto:
.paragrafo {
    attributo: valore;
}
Volendo essere più specifici, è anche possibile inserire il nome del tag, prima del punto, in una struttura del tipo: p.paragrafo. Per vederlo applicato in pratica, fate sempre riferimento allo EPUB che ho inserito come esempio, debitamente vivisezionabile con Sigil.
Detto questo, passiamo a vedere gli attributi specifici del foglio di stile.

Struttura della pagina

Abbiamo a disposizione diversi attributi, per specificare la struttura che avrà la pagina, e possiamo utilizzarli sia nell’elemento body, per la struttura  generale del libro, sia negli elementi dei singoli paragrafi.

margin: determina la dimensione del margine vuoto attorno alla pagina, su tutti e quattro i lati (sopra, sotto, destra, sinistra). Se vogliamo specificare il margine su un solo lato, o se vogliamo usare margini diversi per i vari lati, avremo a disposizione margin-top, margin-bottom, margin-right e margin-left. È preferibile indicare la dimensione dei margini in percentuale, oppure in em, così il dispositivo di lettura potrà adeguarli meglio alla larghezza dello schermo e al tipo di carattere usato.
Alcuni esempi:
margin: 0; (nessun margine)
margin: 4em; (tra il bordo della pagina e il bordo dello schermo c’è un margine pari a quattro caratteri, su tutti i lati)
margin-bottom: 2em; (il margine inferiore di questo elemento è pari a 2 caratteri)

padding: determinala dimensione dello spazio vuoto tra il margine della pagina e l’inizio del testo, mentre margin stabiliva lo spazio tra il margine della pagina e il bordo dello schermo. Per il resto, funziona come margin e ha gli stessi attributi (padding-top, padding-bottom, eccetera).

border: serve a disegnare una cornice attorno a un elemento. Per usarlo, dovremo prima di tutto specificare la dimensione del bordo (di solito in px), poi il tipo di bordo (dashed per un bordo tratteggiato, solid per un bordo continuo, dotted per un bordo punteggiato), quindi il colore del bordo. Alcuni esempi:
border: 2px dashed black;
disegnerà una cornice nera tratteggiata, larga due pixel, attorno all’elemento scelto.
border: 1px dotted red;
disegnerà una cornice rossa punteggiata, larga un pixel, attorno all’elemento scelto.
In alternativa al numero in pixel o altra unità di misura, si può esprimere lo spessore della cornice coi valori thin, medium e thick, per esempio:
border: medium solid blue;
che disegnerà una cornice blu e continua, di spessore medio.
Elementi di questo tipo sono di uso più comune nei manuali, ad esempio per mettere in evidenza formule, avvertimenti o concetti di particolare importanza.

text-align: serve a formattare il testo, allineandolo lungo uno dei margini; i suoi possibili valori sono left (allineato a sinistra), right (a destra), center (al centro), justify (giustificato).

text-indent: serve a specificare il rientro della prima riga di un paragrafo e possiede un valore espresso preferibilmente in em. Un paragrafo con text-indent: 3em; presenterà un rientro nella prima riga pari allo spazio di tre caratteri.

background-color: serve a specificare un colore per lo sfondo dell’elemento. Il colore può essere indicato con un nome inglese (se esiste un nome per quel colore), oppure col numero esadecimale che corrisponde a quel colore.

background-image: serve a specificare una immagine, da utilizzare come sfondo per un elemento. Non è una scelta che raccomando, soprattutto se progettate di usare immagini pesanti da caricare, ma in certi casi l’effetto può essere gradevole, se ad esempio avete preparato uno sfondo che simula l’aspetto di una pergamena. Si usa così:
background-image: url(“../Images/sfondo.jpg”);
dove ovviamente userete il nome della vostra immagine, al posto di “sfondo.jpg”.
Normalmente, una immagine di sfondo è ripetuta in orizzontale e verticale, fino a riempire tutto lo spazio della pagina. Se questo non vi va bene, dovrete modificare gli attributi background-repeat: ed eventualmente background-attachment: (per mantenerla sempre al centro dello schermo) e background-position: (per ottenere una migliore collocazione dell’immagine), ma un lavoro di questo tipo, normale in un sito web, può dare brutti risultati sugli schermi più piccoli di un lettore. Da usare con molta cautela.

Esistono poi svariati altri attributi, relativi alla struttura di una pagina, che sono usati nel foglio di stile di un sito web, ma che avrebbero poco senso in un normale e-book.

Caratteristiche del testo

Possiamo specificare diversi attributi nel foglio di stile, per quanto riguarda il modo in cui sarà visualizzato il testo sullo schermo: possiamo specificare il font, la dimensione dei caratteri, il colore, ma anche lo stile, eccetera. Se non siamo soddisfatti del corsivo standard, ad esempio, ne possiamo definire uno nostro, nel foglio di stile, e poi utilizzarlo nella pagina, racchiudendo le parole in corsivo in un tag <span>, con un valore di class corrispondente a quello utilizzato per il nostro corsivo. C’è un esempio di questo uso nel modello di EPUB.

font-family: serve a specificare il font da utilizzare per il testo. Possiamo assegnare più valori  questo attributo e il lettore li proverà uno alla volta, da sinistra verso destra, fino a che non ne avrà trovato uno che sarà in grado di visualizzare: per questo motivo è meglio indicare per primo il nostro font di preferenza e poi, uno alla volta, i font alternativi, sempre in ordine di preferenza. Per indicare il tipo di font, basta scriverne il nome, eventualmente racchiuso tra virgolette se è formato da più di una parola. Ad esempio:
font-family: “Times New Roman”,  Times, serif;
Il lettore cercherà prima di tutto di caricare il font Times New Roman; se non possiede questo file, proverà col successivo, ossia Times; se anche questa volta fallisce, caricherà un qualunque font di tipo serif, presente nella sua memoria.
Come ultimo valore, è opportuno specificare una delle tre grandi famiglie di font, ossia serif, sans-serif e monospace: in questo modo, il lettore avrà almeno un appiglio sicuro, se tutto il resto dovesse fallire.

font-size: serve a specificare la dimensione di preferenza per i caratteri. Non è comune utilizzarlo in uno e-book, ma a volte possono esserci motivi per cui scegliere una dimensione specifica, invece di lasciar fare al lettore. La dimensione si può esprimere in tutte e quattro le unità di misura summenzionate. Esempio:
font-size: 1.5em; (il carattere sarà grande una volta e mezza la sua dimensiona standard).

font-style: serve a specificare che tipo di stile dovrà possedere quel carattere, se state lavorando su un corsivo, nel qual caso indicherete italic come valore per l’attributo.

font-weight: come sopra, ma usato quando si lavora su grassetti e simili; nel caso di un testo in grassetto, il suo valore sarà bold.

font-variant: come sopra, ma in questo caso si utilizza per ottenere un testo in maiuscoletto; il valore da assegnare sarà small-caps. Se si vuole esplicitamente rimuovere una di queste tre caratteristiche, le si dovrà assegnare il valore normal.

line-height: serve a specificare l’altezza di ogni riga di testo per quell’elemento. Il suo valore può essere espresso in una delle quattro unità di misura disponibili, ma per ovvie ragioni è preferibile utilizzare lo em, così da definire la dimensione della riga in rapporto a quella del carattere utilizzato. Ad esempio:
line-height: 2em; (la riga sarà alta il doppio del carattere utilizzato, in pratica avremo una interlinea doppia).

color: serve ad assegnare un colore al carattere utilizzato e funziona esattamente come il già visto background-color. Ad esempio:
color: green; (il testo avrà un colore verde).

text-transform: serve a modificare il testo, convertendolo in maiuscolo, minuscolo o rendendo maiuscola la prima lettera di ogni parola. I valori da assegnare sono, rispettivamente, uppercase (tutto maiuscolo), lowercase (tutto minuscolo), capitalize (prima lettera maiuscola), none. Esempio:
text-transform: uppercase; (il testo sarà interamente in maiuscolo).

text-decoration: serve ad assegnare una particolare decorazione alla parte di testo in esame. I suoi valori possibili sono underline (testo sottolineato), overline (linea al di sopra del testo), line-through (linea che attraversa il testo), none. Esempio:
text-decoration: line-through; (il testo sarà tagliato a metà in orizzontale da una linea).
Questo attributo può essere utile per il titolo di un capitolo: utilizzando un valore
text-decoration: underline overline;
il testo sarà racchiuso tra due linee, per evidenziarlo. Ne vedete un esempio nel modello di EPUB.

Anche in questo caso, esistono poi svariati altri attributi, che sono usati nel foglio di stile di un sito web, ma che avrebbero poco senso in un normale e-book.

Come usare fogli di stile CSS negli EPUB (1)

Come ho già scritto in diverse occasioni, uno e-book in formato EPUB è, di fatto, un sito web in versione tascabile (e locale). Come ogni altro sito web, è composto da una serie di documenti di testo, in formato XHTML (per adesso, ma un giorno dovremmo passare allo HTML5, se e quando lo standard EPUB3 sarà adottato ovunque), che costituiscono i vari capitoli del libro: sono normali files, che potremmo estrarre e aprire con qualsiasi browser, e di solito sono raccolti in una cartella Text. Se vi è mai capitato di aprire uno EPUB con Sigil, per modificarne il contenuto o anche solo per semplice curiosità, è la prima cartella che trovate, nella lista sulla sinistra. Oltre a queste pagine web, uno EPUB contiene di solito altri tipi di documenti, ognuno raccolto nella cartella più adatta: immagini nella cartella Images, font incorporati nella cartella Fonts, eventuali files audio e video nelle cartelle Audio e Video, eccetera. Fin qui, niente di nuovo.
C’è però un’altra cartella, molto importante, di cui mi occuperò oggi: è la cartella Styles. In questa cartella, se uno EPUB è stato realizzato decentemente, è contenuto un singolo file con estensione .CSS (può anche essercene più di uno, ma è raro e non molto comodo) e spesso un nome strano, se abbiamo lasciato che lo generasse in automatico qualche programma. Questo file è il foglio di stile ed è il documento che determinerà l’aspetto del nostro EPUB, cioè il modo in cui i vari dispositivi di lettura lo visualizzeranno.
È un sistema che si applica anche ai siti web; un sito ben realizzato avrà, da qualche parte, un foglio di stile, in cui sono contenute tutte le indicazioni su come visualizzare quel sito: font da utilizzare di preferenza, il colore dei vari elementi, i margini da lasciare, la dimensione preferita della pagina, eccetera. Uno EPUB non fa eccezione e si comporta da sito web anche sotto questo aspetto: nel foglio di stile possiamo indicare tutte le nostre preferenze e i lettori cercheranno di seguirle, nei limiti delle loro possibilità. Se vogliamo che le pagine del nostro e-book siano verdi, con scritte di colore turchese, dovremo indicarlo nel foglio di stile, e sempre nel foglio di stile potremo indicare quanto spazio lasciare tra il titolo di un capitolo e il contenuto, quale formattazione utilizzare per il testo, quale rientro per la prima riga di ogni paragrafo, e così via, in un elenco potenzialmente molto lungo.
Per ottenere un foglio di stile, abbiamo almeno due possibilità: realizzare il nostro futuro EPUB con un qualunque elaboratore di testi, impostando font, colori, margini e tutto il resto, e lasciare poi che il programma di conversione costruisca per noi il foglio di stile, con buone probabilità di doverlo modificare e correggere a mano, oppure realizzare un testo di base, senza formattazioni particolari, e scrivere a parte il nostro foglio di stile, da inserire poi attraverso Sigil. Qualunque sia la vostra scelta, è comunque utile avere almeno una idea di come sia fatto un foglio di stile, così da potervi mettere le mani senza doversi muovere a caso: per questo motivo, procederò adesso con una breve presentazioni delle principali classi utilizzare per uno e-book e degli attributi che più spesso vorrete o dovrete modificare, per dare al vostro testo l’aspetto che desiderate. Non sarà un elenco esaustivo, perché mi limiterò allo stretto necessario per uno e-book, ma dovrebbe costituire almeno una mappa di emergenza, per avventurarsi nel magico mondo del CSS.
Prima di tutto, dobbiamo aggiungere un foglio di stile a una pagina, se già non lo possiede. È la cosa più semplice: se state usando Sigil, scegliere la vista codice, poi controllate nelle prime righe della pagina, quelle racchiuse nei tag <head> e </head>, per vedere se compare una scritta del tipo
<link href="../Styles/nome_del_foglio.css" type="text/css" rel="stylesheet" />
Se compare, il foglio di stile è già stato aggiunto alla pagina; se non compare, dovrete aggiungere voi quella riga di codice, possibilmente subito dopo il tag <title>, modificando ovviamente il nome del vostro foglio di stile nella parte href. Poi, si tratterà di creare un file con quel nome nella cartella Styles, se già non esiste. A ogni modo, procediamo col viaggio nel CSS.
Come esempio, prenderemo in esame il foglio di stile per una pagina che ha la seguente struttura:
<body>
    <div id="pagina">
        <div id="titolo">
            <h2>Capitolo 1</h2>
        </div>
        <div id="testo">
            <p class="paragrafo">bla bla bla</p>
            <p class="paragrafo">bla bla bla</p>
            <p class="paragrafo">bla bla bla</p>
        </div>
    </div>
</body>
Una struttura molto semplice, certo più semplice di molte strutture che vedremo, utilizzando la vista codice di Sigil. Tutto ciò che appare nella pagina è dentro l’elemento body; questo elemento è a propria volta diviso in titolo, dove vediamo il nome del capitolo, e testo, dove apparirà il testo del capitolo. Ognuno degli elementi che vediamo, racchiusi tra < e >, potrà essere modificato nel foglio di stile, utilizzando o il nome dell’elemento (body, h2, p), oppure il nome che gli è stato assegnato (quello che compare accanto a id e class).
Un foglio di stile si presenta infatti come un elenco di strutture strane, composte da un nome e una serie di coppie attributo-valore, racchiuse tra due parentesi graffe. Qualcosa di questo tipo (ma senza colori, che ho aggiunto io a scopo esplicativo):
body {
    display: block;
    background-color: gainsboro;
    font-size: 1em;
    font-family: "Courier New", Courier, monospace;
}
Per quanto possa apparire strano a prima vista (e forse anche a seconda vista), in realtà è una struttura molto semplice da capire e modificare. Come ho scritto poco sopra, una pagina web, o nel nostro caso una pagina dello EPUB, è divisa in più elementi, ognuno contraddistinto da un particolare tag in XHTML; spesso, i tag possiedono a propria volta un nome specifico (quello che compare accanto a id e class), per suddividere il documento in modo ancora più dettagliato e preciso. Nel nostro esempio, usiamo i nomi “titolo” e “testo” per distinguere due tag uguali, cioè i tag div, così da assegnare a ognuno caratteristiche differenti.
Un foglio di stile elenca tutti gli elementi che vogliamo modificare, indicandoli per nome (body, nell’esempio qui sopra): all’interno delle parentesi graffe sono elencati gli attributi che vogliamo modificare in quel particolare elemento, accompagnati dal valore che dovrà essere loro assegnato. L’attributo background-color, ad esempio, indica il colore che dovrà avere lo sfondo dell’elemento body, e il colore sarà gainsboro, ossia il valore assegnato a quell’attributo (gainsboro è il nome di un colore, per quanto possa sembrare strano; i colori possono essere indicati per nome, se hanno un nome valido, oppure col codice numerico corrispondente). In questo esempio, la nostra pagina avrà un colore gainsboro, invece di essere bianca. A voi scoprire che tipo di colore sia.
Ogni pagina XHTML possiede un elemento body ed è la sua parte fondamentale: tutti gli altri elementi sono costruiti su quello e all’interno di quello. Nel vostro foglio di stile, dunque, è bene che l’elemento body sia il primo e contenga tutti quegli attributi che dovranno costituire la struttura portante dello EPUB: colore della pagina, colore e dimensioni dei caratteri, ampiezza dei margini, tipo di font da utilizzare, eccetera. Ognuno di questi elementi potrà tranquillamente essere modificati per parti specifiche del libro, a seconda delle necessità, ma qui è bene indicare i valori di base per il nostro libro.
Ovviamente, ciò che noi indichiamo in un foglio di stile è un suggerimento, che il dispositivo di lettura cercherà di seguire come può: se gli chiediamo di usare un carattere che non possiede, o un colore che non possiede, il dispositivo non potrà soddisfare la nostra richiesta e utilizzerà il font o il colore di default. Su un computer succede raramente, ma su altri dispositivi può essere un problema reale: non esageriamo con le richieste strane e, se necessario, aiutiamo i dispositivi, per esempio usando font incorporati nel nostro EPUB.
Questo vale come premessa generale; la prossima volta vedremo gli attributi che userete più spesso in un normale e-book, con indicazioni sui valori che si possono attribuire e i tag a cui abbinarli di preferenza (ma nessun vi vieta di assegnare qualsiasi tipo di valore a qualsiasi tipo di tag, una volta appreso il meccanismo). Per adesso, potete scaricare ed esaminare un semplice modello di testo, in cui sono messe in pratica alcune delle possibili modifiche: guardate il suo foglio di stile, guardate il risultato sulla pagina e preparatevi a comprenderne il significato nella seconda parte della guida.

Blender – Impostare e modificare il mondo

Finora ci siamo concentrati sugli oggetti all’interno di Blender e su come controllarti, modificarli, colorarli e attribuire loro altre proprietà; in altri termini, abbiamo modificato gli oggetti, ma li abbiamo lasciati galleggiare nel vuoto, come se non esistesse altro all’infuori di essi. In particolare, lo sfondo della scena ha mantenuto quel fascinoso grigio Blender, che fa molto battuta iniziale di Neuromancer.
In realtà, gli oggetti di Blender non sono sospesi nel vuoto, ma si trovano all’interno di un mondo, o di una scena, con proprietà ben precise. Una di queste proprietà è la forza di gravità, di cui però non ci occuperemo oggi, anche perché presuppone l’uso di animazione; una proprietà più generica, e che abbiamo sotto agli occhi fin dal primo avvio del programma, è lo sfondo della scena, il quale è poi soltanto una proprietà di un oggetto più grande e fondamentale. Questo oggetto è il mondo.
Blender ci mette a disposizione vari oggetti, nella sua schermata di default: un cubo, come abbiamo già, visto, ma anche una videocamera e una lampada. Questi tre oggetti si collocano all’interno di un oggetto ancora più fondamentale, che invece potrebbe esserci sfuggito, ed è il mondo. Il mondo è il contesto al cui interno si trovano gli elementi sulla scena; a volte lo possiamo ignorare, se stiamo solo sperimentando nuovi modi per modificare e scolpire un oggetto, ma molto più spesso diventerà fondamentale, se stiamo lavorando a una immagine vera e propria, a un video o ad altro. in breve, ogni volta che abbiamo bisogno di uno sfondo che non sia un grigio smorto, il mondo è il primo elemento che dovremo guardare (ma non l’unico).
In versioni precedenti di Blender, era necessario prima di tutto creare un mondo, ma adesso ne abbiamo già uno a nostra disposizione, fin dall’avvio: possiamo accedere alle sue proprietà cliccando sulla terza icona da sinistra, nella finestra delle proprietà.

Questa è la scheda con le proprietà del mondo, o almeno una parte di esse.
Il primo elemento che noteremo, con ogni probabilità, è il riquadro Preview, nella parte alta della finestra: il suo colore coincide esattamente con quello dello sfondo della nostra scena, una tonalità di grigio non molto allegra. Quel riquadro ci mostra appunto un’anteprima di come apparirà lo sfondo della scena ed è lì che potremo vedere che effetto hanno le nostre  modifiche alle proprietà del mondo. Un modo migliore per vederle, però, consiste nel premere il tasto F12 e realizzare una resa ad alta definizione della scena, ma questa potrebbe essere lenta, se il nostro computer ha una potenza non eccessiva e la scena contiene una camionata di elementi. Ci sono varie proprietà che possiamo modificare e che vedremo riflesse in questo riquadro, ma per oggi ci concentreremo soltanto su tre: il cielo, le stelle e la nebbia.
Il cielo, prima di tutto. Se siamo stanchi di vedere sempre lo stesso grigio, come sfondo delle nostre creazioni, possiamo modificarlo in tre modi: cambiando i colori reimpostati, inserendo una immagine, da usare come sfondo, oppure creare noi stessi una simulazione passabile di cielo.
Il primo caso è il più semplice, perché basta modificare i colori indicati nella sezione World, subito sotto a Preview, in particolare Horizon Color e Zenith Color: il primo indica il colore che il cielo deve avere nel suo punto più basso, ossia sulla linea di orizzonte, mentre il secondo indica il colore che il cielo dovrà avere nel suo punto più alto. Selezionando l’opzione Blend Sky, poi, il cielo sfumerà a poco a poco dal colore dell’orizzonte al colore dello zenit.
Inserire una immagine già esistente non è molto complicato: si tratta solo di assegnare una texture al mondo e correggere un paio di impostazioni, come vedremo. Per inciso, il mondo è un caso in cui è possibile utilizzare una texture, senza aver prima assegnato un materiale su cui applicarla. Vediamo come fare, anche se in parte si tratta di ripetere quanto già visto parlando di texture la volta scorsa.
Partiamo dalla nostra classica scena con cubo grigio su sfondo grigio scuro, quella che comprare al primo avvio di Blender. Deselezioniamo il cubo, premendo il tasto A: non ci interessa e ci eviterà possibili errori, strada facendo. Nella finestra delle proprietà, clicchiamo sulla icona del mondo, per aprire la sua lista di proprietà. Qui abbiamo da correggere un paio di impostazioni nella sezione Word, appena sotto a Preview: selezioniamo Blend Sky e modifichiamo lo Zenith Color, portandolo a bianco (assegniamo 1 a ogni vice).

Fatto questo, è tempo di passare al reparto Texture, cliccando sull’icona a forma di scacchiera, nella parte alta della finestra. Abbiamo già visto come selezionare e caricare una immagine, da usare come texture; dopo averlo fatto, dovremo spostarci verso il fondo della finestra, cercando la sezione Influence: qui dovremo selezionare le voci Blend, Horizon e Zenith Up, se già non sono selezionate (non dovrebbero esserlo, almeno le ultime due). A questo punto, premiamo il tasto F12 e guardiamo il risultato. Se non è soddisfacente, possiamo sempre correggere altre impostazioni, per centrare meglio la immagine di sfondo, o per modificare il mondo in cui è stata “spalmata” sullo schermo.
Più interessante è invece il lavoro di creare un cielo artificiale, da aggiungere alla scena: partiremo creando un cielo nuvoloso, ispirandomi a ciò che vedo fuori dalla finestra.
Apriamo un nuovo piano di lavoro, con la combinazione di tasti CTRL+N, deselezioniamo il cubo, come abbiamo visto poco sopra, e apriamo la voce World nella finestra delle proprietà. Otterremo sempre questo:

Nella sezione World, che è sempre sotto a Preview, selezioniamo anche stavolta Blend Sky, assegniamo un bel colore bianco a Zenith Color e un bel blu a Horizon Color. L’anteprima ci mostrerà già una vaga idea di come sarebbe a questo punto il nostro cielo, ossia una miscela in cui si parte dal blu e si tende a poco a poco verso il bianco; il che è normale, avendo noi scelto il blu come colore per l’orizzonte e il bianco come colore per lo zenit.

Volendo, possiamo selezionare anche Real Sky, per dare maggiore tridimensionalità alla scena, ma questo ci serve più che altro se stiamo pianificando una scena in movimento: per una scena statica, invece, la differenza sarà minima.