Inserire lettere e numeri cerchiati, dentro quadrati, con sfondo scuro e dentro le parentesi

Il consorzio Unicode è una organizzazione che assegna un ID univoco ai caratteri, indipendentemente dalla lingua utilizzata. Avvengono nuove assegnazioni tutti gli anni e per esempio ogni emoticon o emoji ha il suo codice identificativo Unicode.  I simboli Unicode vengono rappresentati con U+ seguito da 4 o 6 cifre esadecimali ovvero che oltre ai numeri decimali contengono anche le lettere A, B, C, D e F.

I caratteri Unicode possono essere inseriti in una pagina web o in un documento se conosciamo il suo identificativo. Si possono aggiungere tramite il tastierino numerico quando se ne conosca la combinazione di tasti da utilizzare.

Questa operazione però è piuttosto laboriosa. Gli utenti Windows possono usare la Mappa Caratteri, digitandone il nome dopo aver cliccato sul pulsante Start. Non è però semplice trovare il carattere che ci interessa.

Le vocali maiuscole accentate non sono presenti nelle tastiere fisiche e possono essere trovate nella Mappa Caratteri così come le note musicali. Gli utenti Windows 10 però possono aggiungere le maiuscole accentate tramite la tastiera virtuale così come, tramite la stessa funzionalità, possono essere aggiunte alcune emoji ai documenti. Tali simboli sono essi stessi dei caratteri e non appesantiscono in alcun modo il documento.

Come contare il numero di parole e di caratteri in un articolo.

Quando viene commissionato un articolo a un giornalista uno dei parametri da rispettare è quello del numero dei caratteri o del numero delle parole che deve contenere.

Si tratta di due tipi di conteggi diversi ma che sostanzialmente hanno entrambi lo scopo di fissare dei limiti per la lunghezza dell'articolo necessari per la sua implementazione in una pagina stampata.

Il numero dei caratteri può essere conteggiato con o senza spazi però mi risulta sia più utilizzato come parametro di lunghezza il numero delle parole visto che vengono usate parole più corte e più lunghe in tutti gli articoli e quindi statisticamente lo spazio di cui ha bisogno un articolo di 1000 parole è sostanzialmente lo stesso a prescindere dal suo autore e dall'argomento che viene trattato.

Come installare altri font nel computer.

I computer Windows hanno una grande varietà di caratteri preinstallati che possono essere usati nei documenti editati con Word o con Libre Office e nella grafica creata con Photoshop e Gimp. Nel precedente post abbiamo visto come creare o modificare una famiglia di caratteri personali, addirittura si possono creare dei font a partire dalla nostra calligrafia.

In questo articolo vedremo invece come installare questi nuovi font nel computer in modo da poterli usare nei programmi che vi sono installati. Il passaggio successivo decisamente più complicato sarà quello di applicare dei font personali addirittura unici al layout del nostro sito.

INSTALLARE I GOOGLE FONT E GLI SKYFONT

Una enorme varietà di famiglie di caratteri si trova su Google Web Fonts visto che nel momento in cui scrivo questo articolo vi sono elencate ben 651 famiglie di caratteri. Per ciascuna famiglia si può vedere l'anteprima di una parola, di una frase, di un paragrafo o di un poster. Su Google Fonts ci sono anche caselle di ricerca e filtri per trovare i font di cui magari conosciamo il nome. È quindi sempre opportuno fare una ricerca per vedere se quel particolare font gratuito sia presente negli elenchi di Google Web Fonts

Come creare una nuova famiglia di caratteri o modificare dei font TrueType esistenti.

Credo che molte persone che scrivono documenti, libri o che si occupano a vario titolo di grafica abbiano sentito l'esigenza di avere una famiglia di caratteri personali diversa da tutte quelle che esistono per un fatto di identità e di caratterizzazione. Penso che anche molti blogger abbiano almeno una volta pensato di avere il loro sito scritto con caratteri assolutamente unici.

Questa funzionalità è tutt'altro che semplice da ottenere e ci sono diversi gradi di difficoltà da affrontare. Avere dei caratteri personali nel computer per editare dei documenti in Word, per creare dei file PDF o per realizzare un oggetto grafico con Photoshop o Gimp è molto più semplice che avere un nostro sito con un testo formato da una famiglia di font personale. Una cosa è avere il computer che riconosca una famiglia di font e un'altra è avere tutti i browser dei lettori che mostrano il nostro sito con i caratteri desiderati. In questo caso c'è anche una difficoltà ulteriore data dal fatto i browser non interpretano i font nella stessa maniera e che i formati di caratteri riconosciuti sono diversi. Con questo post inizio la trattazione di questo tema illustrando i principali tool online che possono essere usati per creare la nostra famiglia di font o per modificare una già esistente. È evidente che i tool a pagamento hanno molte più funzioni ma ci sono anche strumenti gratuiti che sono assolutamente in grado di soddisfare le esigenze medie anche di un grafico di buon livello.

Come mostrare molto più grande la prima lettera di un post.

I software utilizzati nella editoria hanno la funzionalità di mostrare la prima lettera di un articolo con delle dimensioni significativamente più grandi. Questo modo di presentare i contenuti è stato mutuato dalla carta stampata in cui è molto usato. Per fare in modo che anche nel nostro blog si possano confezionare gli articoli con questa accortezza basta utilizzare il linguaggio CSS. Per i neofiti del blogging ricordo che ho pubblicato l’ebook Guida all’HTML e al CSS che può essere scaricato gratis o meglio al costo di un tweet. Si può decidere di inserire il codice apposito in modalità HTML direttamente in ciascun articolo oppure di creare una classe nel template per poi riprenderla in fase di edizione.

Come contare il numero di parole e di caratteri in un testo.

L'esigenza di contare il numero di caratteri o di parole in un testo selezionato è più comune di quanto non possa sembrare a prima vista. Una delle regole SEO più importanti è quella di limitare il numero dei caratteri del Titolo di un post a 60 nella ipotesi più restrittiva e a 70 in quella più elastica. Questo significa in sostanza di limitare il titolo a una sola riga. Un'altra regola sempre in chiave SEO consiste nell'inserire Meta Descrizioni limitate a 160-170 caratteri.

Certo che si può andare a intuito senza mettersi a contarli ma potremmo avere l'esigenza di essere più precisi. Il conteggio delle parole e dei caratteri è ancora più importante per i giornalisti anche freelance a cui vengono richiesti articoli esattamente di una determinata lunghezza per esigenze di inserimento nel layout del giornale cartaceo o online che sia. Si potrebbe anche parlare della qualità minima dei Guest Post o della esigenza di calcolare esattamente la lunghezza dei paragrafi per questioni estetiche e per fare in modo che non abbiano l'ultima riga di una sola parola.

Come digitare le lettere accentate maiuscole con Windows.

Nelle tastiere normalmente usate nei computer, che vengono definite anche QWERTY per i caratteri iniziali della serie di tasti sotto i numeri, sono presenti anche le lettere minuscole accentate. La "e" si può digitare con accento acuto e grave mentre per la "a", la "o", la "u" e la "i" sono disponibili solo gli accenti gravi. Ieri ho parlato di come sia importante un rapido caricamento della pagina in chiave SEO e non solo. Sicuramente meno determinante per il posizionamento ma con un suo peso è anche la corretta ortografia degli articoli pubblicati.

È ormai assodato come Google penalizzi i siti in cui ci siano errori di battitura o veri e propri sbagli ortografici. Lo screening dei contenuti avviene probabilmente con un correttore automatico nelle varie lingue. Questo fatto pone diversi problemi a cui in tutta onestà non so rispondere. Che succede se

Come personalizzare i font di un blog su Blogger.

A seguito di modifiche grafiche apportate al sito ho pensato anche di personalizzare la famiglia di caratteri del blog. Questa operazione è solo apparentemente semplice perché invece può nascondere diverse insidie. La scelta stessa dei font da utilizzare non è da sottovalutare. I caratteri sono suddivisi in due grandi categorie, quelli con le Grazie e quelli senza Grazie. Si usa più spesso la terminologia inglese che è diventata internazionale sans-serif che poi deriva chiaramente dal francese. 

È comune convinzione che i caratteri con le Grazie siano più facilmente leggibili in un foglio di carta mentre quelli senza Grazie trattino meglio gli occhi nella lettura al computer di grandi blocchi di testo. La scelta è ovviamente personale e penso si debba coniugare un certo grado di originalità con la facilità di lettura da parte dei navigatori.

In questo articolo non voglio affrontare il tema della personalizzazione dei caratteri attraverso i 700 font di Google che ho già affrontato in un altro post. Tale metodologia tra l'altro può essere estesa anche ai blog a Visualizzazione Dinamica. Non mi occuperò neppure di come scaricare font dal web e usarli nel blog con @font-face, tema che ho già trattato. Mi limiterò a mostrare come modificare i font usando quelli messi a disposizione dalla piattaforma Blogger. Il modo di procedere è alquanto diverso a seconda del tipo di modello che abbiamo e dei widget che vi abbiamo installato.

Come digitare i caratteri speciali con la tabella del codice ASCII.

ASCII è l'acronimo di American Standard Code for Information Interchange, si può pronunciare indifferentemente asci in italiano o askey in inglese ed è un sistema di codifica di caratteri proposta già nel 1961 e successivamente adottata dal W3C sotto la denominazione Unicode Tranformation Format. In sostanza viene associato un simbolo a ogni numero che va da 0 a 255. A seconda del software utilizzato ci possono essere delle variazioni per certi caratteri. Insieme al codice UTF-8 con sequenze da 1 a 4 byte, sono state introdotte anche le codifiche UTF-16 e UTF-32 usate soprattutto per alfabeti più complessi di quello latino come il cinese, il giapponese o il coreano.

In questo post farò riferimento a un sistema operativo Windows. L'interesse della codifica ASCII risiede soprattutto in tutta una serie di caratteri speciali che non possono essere inseriti con semplicità attraverso la tastiera. Potremo per esempio avere la necessità di digitare la ñ castigliana con la tilde oppure la ç francese con la cediglia o ancora qualche carattere degli alfabeti del Nord Europa. In questo caso è utile avere una tabella dei codici ASCII per procedere con facilità al suo inserimento.

Personalizzare i caratteri del blog con i quasi 600 font di Google.

Gli utenti di Blogger possono scegliere tra molte famiglie di caratteri e le possono scegliere diverse per il testo della pagina, il titolo e la descrizione del blog, il testo delle schede, il titolo del post e il titolo dei gadget. Basta andare su Modello > Personalizza > Avanzato e selezionare l'elemento relativo. Dopo ciascuna modifica e dopo averne vista l'anteprima nella parte bassa, bisogna cliccare su Applica al blog in alto a destra per accettare le modifiche. 

I font a disposizione sono veramente moltissimi. All'inizio del menù a discesa vengono proposti quelli più comuni vale a dire Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet e Verdana. Se si desidera creare un blog che abbia dei caratteri veramente originali e scaricati da internet si può utilizzare @font-face che pone però delle difficoltà con alcuni browser segnatamente Firefox.

Migliaia di modelli e quasi 500 font per i documenti di Google Drive.

Abbiamo già visto come Google Drive sia in sostanza una evoluzione di Google Documenti e venga pensato come uno strumento per la condivisione del lavoro online visto che consente di creare tutta una serie di documenti potendo scegliere tra una modulistica davvero corposa.

L'interfaccia grafica di Google Drive è poco cambiata rispetto a Google Docs ma si può già notare una maggiore offerta anche solo rispetto a pochi giorni fa. Andando su Crea si può scegliere se editare un Documento, una Presentazione, un Foglio di Lavoro, un Modulo, un Disegno, una Tabella (ancora in Beta) oppure se aggiungere una Cartella al nostro Drive.

ASCII Art per convertire testo e immagini in lettere e numeri.

L'ASCII Art è una forma artistica che consiste nel creare immagini usando solo i 95 caratteri ASCII. Per abuso di linguaggio vengono inglobati in questa "arte" anche la creazione di immagini usando anche altri caratteri tipografici. Forse avrete avuto modo di vedere queste realizzazioni nei codici di alcuni modelli il cui creatore ha inserito il proprio nome usando questa forma artistica.

In rete ci sono diversi tool che ci consentono di creare immagini di ASCII Art in mode semplicissimo. Ne elenco qualcuno dei più interessanti.

ASCII Generator crea l'immagine di ASCI Art a partire da una scritta immessa nell'apposito campo. Ci sono vari stili che possono essere selezionati. Tra questi ricordo 3D, acrobatic, alligator, alphabet, avatar, banner, banner 3D, bell, big, binary, bubble, caligraphy, colossal, computer, contessa, cosmic, diamond, digital, epic, graffiti, hollywood, isometric, italic, linux, marquee, mirrorr, pepper, poson, rounded, script, shadow, slide, small, stampatello, stellar, thin, trek. Dopo aver digitato la scritta si sceglie il tipo di allineamento, se operare una riflessione e la larghezza quindi si clicca su Do It!

WhatFontIs e WhatTheFont per identificare il tipo di caratteri in una immagine.

Sono sicuro che tutti i blogger hanno avuto almeno una volta il desiderio di conoscere il nome di una particolare famiglia di caratteri che avevano visto in una pagina web. WhatFontIs è una applicazione che, come dice la parola stessa, riesce a rilevare il tipo di caratteri usato. Ci sono due metodologie che possono essere usate dopo aver eseguito l'accesso alla pagina.

 

Si può caricare l'immagine dal computer oppure inserire l'URL della pagina web in cui è presente l'immagine con la famiglia di font che ci interessa. Per ragioni di velocità del processo è consigliabile effettuare uno screenshot del testo che ci interessa, salvarlo come immagine e quindi caricarlo su What Font Is. Si clicca su Continue per trovare il font. Prima però dobbiamo settare alcune opzioni inserendo o meno la spunta nei seguenti campi:

1. Mostra solo font free o alternative gratuite
2. Mostra solo caratteri commerciali o alternative commerciali
3. Mostra tutti i caratteri (free o a pagamento)
4. Il colore di sfondo della immagine è più chiaro dei caratteri
5. Il colore di sfondo della immagine è più scuro dei caratteri
6. What Font Is è in grado di funzionare con immagini di peso non superiore a 1.8MB
7. Si può anche cercare un font digitandone il nome e cliccando su Search

Altro metodo per attivare il link Rispondi e come aumentare la dimensione dei caratteri nei commenti nidificati di Blogger.

Ho già illustrato un metodo per visualizzare i commenti nidificati anche nei modelli non ufficiali di Blogger o fortemente personalizzati. Nel caso ci fossero dei template in cui tale sistema non funzionasse, si può tentare di procedere in altro modo. Il concetto è sempre quello di cercare una riga di codice ma stavolta, invece di sostituirla con un'altra riga, si mette al suo posto un intero blocco di HTML.

Andate su Modello > Backup/Ripristino e salvate il modello completo per una questione di sicurezza. Ritornate su Modello > Modifica HTML > Procedi e espandete i modelli widget. Il codice da cercare è sempre il seguente

<b:include data='post' name='comments'/>

Pigiate su F3 o su Ctrl+F e incollate la stringa nell'apposito spazio. In alto a destra (Chrome) o in basso a sinistra (Firefox) saranno visualizzate il numero di occorrenze del codice incollato

Come personalizzare i caratteri di un blog su Blogger con @font-face.

La piattaforma Blogger offre diverse opzioni di scelta per quella che viene definita la famiglia di caratteri. Con la nuova Bacheca si va su Modello > Personalizza > Avanzato e, per ogni elemento del blog (Nome, Descrizione, Titolo del post, Data, Titolo del gadget, Testo del gadget, ecc), si può selezionare la famiglia di font da utilizzare ricordandoci di dare un'occhiata alla Anteprima in basso e di cliccare su Applica al blog in alto a destra

Oltre al tipo di caratteri, si possono configurare molti altri parametri tra cui la dimensione e i colori del testo e dello sfondo. Dopo aver pubblicato migliaia di post e aver ricevuto decine di migliaia di commenti mi sono accorto che c'è sempre qualcuno/a che non si accontenta delle pur numerosissime opzioni.

 Ci sono quelli che vogliono una grafica assolutamente originale e di conseguenza anche dei font personalizzati per dare ancora più originalità al loro sito. Questo post si rivolge appunto a coloro che vogliono pubblicare i loro articoli con caratteri non supportati da Blogger.

Come pubblicare articoli usando i nuovi font di Google.

Google ha messo a disposizione degli utenti ben 199 famiglie di font (escludendo il cirillico, vietnamita, ecc) che penso possano soddisfare anche i grafici più esigenti. Ho già avuto modo di illustrare come usare questi font di Google per personalizzare il layout del blog installandoli nel modello. Da poco tempo è anche possibile scaricare questi caratteri e riutilizzarli a nostro piacimento anche per scopi commerciali.

E' cambiato anche il nome della homepage del servizio che adesso si chiama Google Web Fonts. Nella colonna di sinistra si può selezionare il tipo di carattere in funzione dell'alfabeto (latino, greco, cirillico, latin extented, ecc) e si possono anche filtrare a seconda degli utilizzi (libri, leggeri, grassetto, poster, ecc). Nella parte centrale è presente una scritta per visualizzare graficamente l'anteprima del carattere. Ciascun utente può crearsi una propria collezione di font cliccando su Add to Collection a destra di ciascun carattere che ci interessa utilizzare. E' naturalmente presente anche il nome della famiglia di font

WhatFont per identificare i caratteri usati in una qualsiasi pagina web.

Vi sarà certamente capitato di entrare in un sito e di vedere come il testo, tutto o in parte, sia editato con dei font che non conoscete ma che vi piacciono. Per scoprire una famiglia di caratteri ci sono diversi tool online (per esempio What Font is) che però presuppongono che si debba incollare l'URL della pagina web. Se noi volessimo conoscere il nome dei font di una piccola porzione di testo questo metodo non sarebbe però utilizzabile.

WhatFont è una estensione per Chrome e un bookmarklet per Chrome e Firefox che permette di individuare il nome del carattere di una parola semplicemente puntandola con il mouse. La scelta migliore è quella di inserire il bookmarklet mediante il semplice trascinamento del bottone nella barra del browser

Widget per cambiare la dimensione dei caratteri del blog.

Quando si apre una pagina con il browser si può aumentare la dimensione dei font pigiando su Ctrl e sul tasto del più (+). Se invece si vuole diminuire la dimensione dei caratteri si va sempre su Ctrl ma sul meno. Per ritornare alle dimensioni originali occorre cliccare su Ctrl+0. Questo per quanto riguarda gli OS Windows. Può essere carino inserire un widget che consenta al lettore di modificare le dimensioni del testo a sua discrezione mediante un cursore.

Si utilizza lo script MooTools che è già stato usato per il suggestivo Menù Accordion presentato qualche settimana fa. Si va su Design > Modifica HTML e si salva il modello completo. Importante non mettere la flag su Espandi modelli widget. Si cerca la riga </head> e, subito sopra si incolla il codice

Widget dei Commenti Recenti per Blogger inserito in un box personalizzabile.

Ho presentato diversi widget degli Ultimi Commenti o dei Commenti Recenti che dir si voglia. Sono tutti basati su JSon che è una tecnologia applicabile a Blogger fin dal Novembre 2006. La differenza rispetto ai widget precedenti sta nella presentazione grafica che visualizza gli ultimi commenti all'interno di un box invece che essere presentati come semplice elenco.

• Demo del Widget dei Commenti Recenti per Blogger -

Sono possibili molte personalizzazioni riguardo ai colori, dimensioni del testo, bordi, numero dei commenti visualizzati e stile del widget. Ecco un esempio del gadget inserito in una sidebar piuttosto stretta

Google porta a 77 i font (caratteri) disponibili per Blogger.

Per caratterizzare meglio il blog, una opzione curiosa e divertente era quella di usare caratteri originali che potevano anche essere scaricati per poi essere installati nel computer e usati tramite Windows Live Writer. Alla fine del 2010, il Team di Blogger introdusse diversi nuovi font per gli utenti che potevano così scegliere tra 32 possibili famiglie.

E' notizia di poco fa, e che non è stata ancora annunciata ufficialmente dai blog ufficiali di Google e Blogger, che il numero di font disponibili è stato più che raddoppiato raggiungendo la cifra di 77, 35 caratteri in più di prima. 

Per selezionare questi nuovi font e applicarli ai nostri post, bisogna utilizzare il Designer Modelli e andare su Bacheca > Design > Designer Modelli > Avanzato > Testo pagina

 

Nel menù verticale in Carattere si può scegliere quello che ci piace di più. Per configurare il blog con questo nuovo font occorre selezionarlo, visionare l'anteprima del blog nella parte bassa della pagina e cliccare su Applica al blog in alto a destra.

I nomi delle famiglie dei font a disposizione possono essere consultati nella pagina Web Fonts on Blogger e per verificarne l'aspetto si può accedere alla Google Fonts Directory. 

Aggiornamento: La notizia è stata riportata anche da Google Buzz che è l'organo ufficiale di Blogger.