Creare elenchi personalizzati su più colonne

Chi scrive nel web si trova spesso nella esigenza di dover inserire degli elenchi nella pagina che sta editando. Gli elenchi possono essere aggiunti direttamente tramite pulsanti degli editor, perché sono universalmente supportati.

Solitamente l'utente ha a disposizione due bottoni, uno per gli elenchi puntati e uno per quelli numerati. I primi aggiungeranno i vari elementi preceduti da un puntino mentre i secondi ne mostreranno il numero di ordine.

Gli elenchi puntati inizieranno con il tag <ul> mentre quelli numerati con il tag <ol>. Per aggiungere i vari elementi si va su Invio nella tastiera. Al posto dei numeri, si possono mostrare le lettere latine, quelle greche e si possono creare elenchi nidificati con una o più voci dell'elenco, che a loro volta contengono un altro elenco.

Come per esempio nell'elenco dei capitoli dell'indice di un ebook a loro volta suddivisi nell'elenco delle sezioni degli stessi capitoli. Gli elenchi così creati possono anche essere personalizzati nell'aspetto impostandone il colore dello sfondo, il colore del testo, la famiglia di font, la dimensione dei caratteri, ecc.

Negli editor HTML non esiste la possibilità di creare elenchi su più colonne che invece è utile per risparmiare spazio. Poniamo che gli elementi di un elenco siano molto brevi e formati da una sola parola di poche lettere. In compenso siano invece parecchi gli elementi da mettere in elenco. Con gli editor classici si finisce per mostrare un elenco molto lungo con notevole spreco di spazio. Sarebbe molto più pratico inserire gli elenchi in colonne.

Testo e immagini lampeggianti con CSS o javascript

Con l'ausilio di programmi di grafica come Photoshop o Gimp si possono creare delle immagini animate in formato GIF allo scopo per esempio di creare dei pulsanti lampeggianti.

Nel linguaggio HTML esiste pure il tag blink per creare testo lampeggiante, un tag che però è stato deprecato da diverso tempo. In questo post vedremo come creare del testo e delle immagini lampeggianti tramite il linguaggio CSS3 e con il javascript.

La scelta del CSS3 è migliore di quella del javascript, perché non rallenta in modo significativo l'apertura della pagina da parte dei navigatori. Questa personalizzazione può essere interessante per evidenziare un particolare paragrafo e per incentivare i click su un elemento. Per maggiore chiarezza dividerò il post in 4 sezioni: testo lampeggiante con i CSS, immagini lampeggianti con i CSS, testo lampeggiante con i javascript e testo lampeggiante con i javascript. Inserirò anche dei collegamenti e del testo formattato di esempio che naturalmente possono essere adattati alle singole esigenze o sostituiti da testo piano. Il tag target="_blank" serve unicamente per far aprire i collegamenti in un'altra scheda e può essere tralasciato.

Come centrare un oggetto HTML

Chi possiede un sito o un blog, si trova spesso nella necessità di inserire in modo simmetrico, nel layout della pagina o in un articolo, un particolare oggetto HTML che può essere un testo, una immagine, un video, un iframe o una tabella. In verità quando si parla di centrare un oggetto dovremmo specificare meglio se si tratta di centrarlo orizzontalmente o verticalmente.

Inserire un oggetto centrato verticalmente ha significato solo se si inserisce dentro un contenitore, lasciando lo stesso spazio in alto e in basso. Centrare un oggetto orizzontalmente ha invece sempre senso e consiste nel lasciare lo stesso spazio alla sua sinistra e alla sua destra.

Chi non ha neppure una infarinatura del linguaggio HTML, può scaricare gratuitamente il mio ebook Guida all'HTML e al CSS, in cui sono spiegati i fondamenti di questi due linguaggi di markup. Per maggiore chiarezza ho diviso la trattazione del tema in più sezioni e mostrerò gli screenshot dei codici utilizzati incollati nell'Editor online Real Time HTML  che mostra il rendering del codice nella parte bassa della pagina.

Come mostrare bordi diversi in uno o più lati di un elemento HTML

I bordi sono un elemento grafico presente in molte pagine web e vengono inseriti con dei tag ben codificati. Si possono aggiungere bordi a un contenitore come a una immagine e, con qualche accortezza, anche ai player dei video.

Riepilogo brevemente quali sono le regole per aggiungere un bordo con un CSS inline, per esempio in una immagine. Si usa un codice come questo <img style="border: dotted #f00; 4px;" src="URL_IMMAGINE"/>, dove i tag colorati di rosso sono quelli che determinano l'aspetto del bordo.

Il primo attributo (dotted) indica che il bordo sarà punteggiato, il secondo (#f00) ne determina il colore con il suo codice e infine il terzo (4px) ne configura lo spessore.

Creare sfondi con gradiente e a strisce orizzontali o verticali con i CSS

Oggi ci divertiremo un po' con i CSS per creare degli sfondi colorati non omogenei, in cui inserire del testo o delle immagini da evidenziare in un modo originale. Per esempio si possono inserire i testi di alcuni articoli della Costituzione Italiana in uno sfondo con i classici colori tradizionali verde, bianco e blu.

Partiremo dalla situazione più semplice per poi mostrare delle personalizzazioni sempre più sofisticate. Chi non avesse sufficiente dimestichezza con i linguaggi HTML e CSS, può scaricarsi gratis il mio ebook dal titolo Guida all'HTML e al CSS, in cui troverà informazioni propedeutiche ma sufficienti per avvinarsi a questi linguaggi di markup.

Nel seguito del post vedremo come creare un rettangolo in cui avere uno sfondo di un solo colore o con una sfumatura di colore ovvero con quello che si chiama Gradiente. All'interno del rettangolo potremo poi inserire del testo, anche formattato, immagini o altri oggetti HTML.

Come creare uno stile personalizzato con i CSS

Le piattaforme utilizzate per la creazione di siti come Blogger e Wordpress, offrono diversi strumenti per personalizzare alcuni aspetti dei Temi in generale e, in particolare, per quello che concerne il corpo della pagina, come il colore del testo, le dimensioni dei caratteri, la famiglia di font, il colore dei link.

Nella realizzazione di un articolo, potrebbero però sussistere delle esigenze particolari per evidenziare in modo diverso un dato paragrafo, che si ripete in più articoli. In questo sito per esempio ho creato uno stile per il codice, uno stile per le intestazioni, uno stile per un elenco e uno stile per una tabella responsive.  Ricordo anche un interessante post che ho dedicato alla personalizzazione dello stile delle citazioni nei blog letterari.

In questo articolo vedremo come creare uno stile personalizzato per dei paragrafi di testo che vogliamo evidenziare in modo efficace e riprenderò il tema della creazione di uno stile per pubblicare codici di linguaggi di programmazione in modo da renderli immediatamente riconoscibili rispetto al resto dei contenuti.

Come creare una tabella Responsive con HTML e CSS.

Le tabelle sono un oggetto HTML molto usato nelle pagine web. Sono utili per mostrare schede di tecnologia come informazioni su film e serie TV. Vengono inoltre utilizzate per comparazioni di ogni genere e sono generalmente presenti in molti siti web compresi i blog.

Il codice HTML per generare una tabella è piuttosto semplice e ha solo bisogno di alcuni parametri fondamentali che sono il numero di righe, il numero di colonne, la distanza tra le celle, la distanza del contenuto dal bordo della cella e la larghezza della tabella.

Ci possono poi essere tag opzionali per formattare i contenuti all'interno delle celle, per inserire uno sfondo e per mostrare la riga dell'intestazione in modo diverso da quelle della tabella vera e propria.

Se nella tabella sono presenti i valori assoluti della sua larghezza questi, se sono stati calcolati per la versione desktop, mostreranno la tabella tagliata nella versione mobile in caso di larghezza superiore a quella della risoluzione del dispositivo. In questo post vedremo come creare una tabelle responsive passo dopo passo che sarà visualizzata nello stesso modo da desktop e da mobile.

HTLML DI UNA TABELLA

I tag essenziali di una tabella sono <table> per iniziare la tabella, <tr> per l'inizio della riga, <td> per l'inizio della cella insieme alle loro chiusure </table>, </tr> e </td>. I contenuti delle celle della tabella sotto forma di codice HTML vanno inseriti tra i vari tag <td> e </td>. Viene anche usato il tag <tbody> che indica il corpo della tabella. I tag <thead> e <tfoot> non incidono nel layout della tabella e servono quando ci sia da aggiungere una parte alta, per esempio per la descrizione e una parte bassa, per esempio per delle considerazioni.

Come creare una tabella online con HTML e CSS.

Gli Editor WYSIWYG ovvero What You See Is What You Get (ottieni quanto vedi in italiano) che sono disponibili per Blogger e per Wordpress non hanno dei bottoni per aggiungere una tabella ai post. La soluzione di usare Open Live Writer non è più facilmente praticabile perché non viene più mostrata l'anteprima della tabella in tale Editor rendendo difficile la sua realizzazione.

Molte tipologie di siti hanno spesso l'esigenza di pubblicare tabelle. Sono utili per schede tecniche di prodotti tecnologici ma anche per articoli di genere diversissimo. Una soluzione potrebbe essere quella di usare un Editor CSS gratuito come BlueGriffon che però dovrebbe essere installato nel computer.

Un'alternativa interessante è quella di usare strumenti online specifici per creare tabelle. In sostanza si impostano i parametri come il numero di righe, il numero di colonne, lo spazio tra le celle, il padding all'interno delle celle, la presenza o meno del bordo e il suo stile, la larghezza in pixel o in percentuale. Si digita il contenuto per poi ottenere il codice HTML da incollare nella pagina web in cui inserire la tabella.

Aggiungere ombreggiatura a testi, oggetti e immagini con HTML e CSS.

Nel precedente post abbiamo visto che con i linguaggi HTML e CSS si possono creare dei bottoni professionali completamente personalizzabili.

In alcuni di quei bottoni abbiamo visto come si possa aggiungere anche una ombreggiatura sia al testo sia al bottone per dare una forma tridimensionale. Ho quindi pensato di riprendere questo tema che avevo già affrontato qualche anno fa aggiungendovi altri dettagli.

La gestione delle ombreggiature ha avuto un grande sviluppo con l'introduzione del linguaggio CSS3 che h implementato tale funzionalità. In precedenza solo il browser Opera supportava nativamente l'ombreggiatura e fino a poco fa dovevamo aggiungere una riga di codice per tutti i browser affinché mostrassero anche le ombre.

Come creare dei bottoni con l'HTML, con il CSS, con foto e con video.

Questo articolo è dedicato ai blogger e a tutti coloro che possiedono un sito e che hanno l'esigenza di creare un bottone personalizzato senza utilizzare dei servizi online che sono sempre da evitare a meno che non siano a pagamento.

Quelli gratuiti infatti ci consentono di creare dei bottoni ma in linea di massima pretendono di avere anche un link al loro sito e questo non è una buona scelta dal punto di vista SEO perché disperde Page Rank verso pagine che non hanno alcuna attinenza con gli argomenti che trattiamo.

Un bottone ha senso solo se cliccando si produce un evento cioè se si apre una pagina collegata a detto bottone o qualcosa di analogo a questo. I bottoni possono essere molto semplici e creati solo con il linguaggio HTML, essere personalizzati nei colori con il linguaggio CSS ma si può anche andare oltre e usare gradiente, ecc.

Creare un rettangolo div con il CSS con gradiente o sfumatura di colore.

Nei precedenti articoli abbiamo visto come personalizzare le intestazioni attraverso degli sfondi anche di più colori creati con immagini.

Come promesso in questo articolo vedremo come creare dei contenitori con il tag <div> (o <p>) aggiungendovi uno sfondo con sfumatura o gradiente.

Non è compito di questo post fare una lezione di cosa sia il gradiente, mi limiterò solo ad alcuni concetti generali. Se prendiamo due colori e individuiamo una direzione si può creare una interpolazione tra i due colori che ne individui tutte le tonalità che stanno tra i due colori dati.

Come creare uno sfondo di due o più colori per un oggetto HTML.

Nel post precedente abbiamo visto come creare dei titoli personalizzati per Blogger da usare come intestazioni interne ai post. Lo sfondo creato per i titoli dei capitoli è stato realizzato utilizzando una immagine di background. In un prossimo articolo vedremo come creare degli sfondi di più colori con il gradiente senza utilizzare immagini ma in questo post voglio mostrare come creare una immagine da usare come sfondo.

Non si tratta di una operazione banale neppure se fosse di un solo colore. Mostrerò come procedere con Photoshop CS6 ma il sistema è sostanzialmente adattabile anche a un editor gratuito come Gimp e a un editor online come Pixlr.  Poniamo si voglia creare uno sfondo di due colori con il primo colore visualizzato solo in una piccola porzione sulla sinistra dell'oggetto mentre il secondo che prenda tutto il resto.

Come usare il capolettera in Word, LibreOffice, Blogger e Wordpress.

Il capolettera è il primo carattere di un capitolo di un libro mostrato molto più grande degli altri. Diversi secoli fa il capolettera veniva riccamente adornato dagli amanuensi con bellissime realizzazioni artistiche. Anche in epoca moderna il capolettera è utilizzato per edizioni di libri di gran pregio.

Pure alcuni quotidiani cartacei utilizzano ancora il capolettera. In questo post vedremo come creare un documento Word e Writer di LibreOffice con capolettera e come pubblicare post su Blogger e Wordpress con la prima lettera in formato gigante.

Come creare elenchi personalizzati in un post di Blogger o Wordpress.

Negli Editor WYSIWYG che vengono solitamente utilizzati per creare del testo formattato da inserire in una pagina web solitamente sono presenti solo i pulsanti per inserire gli elenchi numerati e quelli puntati. Questo vale non solo per l'Editor di Blogger ma anche per quello di Wordpress e pure per Open Live Writer.

Le molte altre tipologie di elenchi non vengono prese in considerazione. In questo post vedremo di fare chiarezza e di dare molte utili informazioni per creare elenchi personalizzati con lettere latine, lettere greche e anche con immagini come marcatori.

I tag HTML che vengono usati per gli elenchi sono <ol> per quelli numerati e <ul> per quelli puntati insieme alle loro chiusure </ol> e </ul> e ai tag dei singoli elementi che in entrambi i casi sono <li> e </li>. In sostanza se voi cliccate sul pulsante dell'elenco puntato nell'Editor di Blogger o in altro Editor per poi aggiungere i singoli elementi se poi andate in Modalità HTML visualizzerete un codice di questo genere

Come mostrare più testi con link cliccabili sopra un foto.

In questo articolo vedremo come utilizzando il linguaggio HTML e CSS si possa mostrare uno o più testi cliccabili sopra una immagine. Questa soluzione può essere utile quando si vogliano aggiungere più collegamenti sopra a una stessa foto.

Poniamo che una stessa immagine sia rappresentativa di 2, 3 o 4 articoli che abbiamo scritto sullo stesso tema. Potrebbe essere utile mostrare ai lettori i titoli dei vari post sopra alla stessa immagine ciascuno con il link appropriato. Questa personalizzazione è da considerarsi una evoluzione dell'articolo che ho scritto per visualizzare un testo sopra una foto con il CSS.

Come creare uno stile personale per il codice HTML pubblicato nei post.

Recentemente in un commento mi è stato chiesto che sistema uso per pubblicare i codici HTML e di altri linguaggi di programmazione nei post. Da qualche tempo è possibile pubblicare codice HTML nei post senza che Blogger lo interpreti come tale ma lo consideri solo come fosse testo. Questo invece non è ancora possibile per i commenti dove il codice viene ancora interpretato e per postarlo dobbiamo usare un escamotage.

Anche gli utilizzatori di Open Live Writer possono incollare senza difficoltà codice HTML nei post confezionati con questo strumento. Alcuni utenti di Blogger usano la citazione o blockquote per postare il codice in modo da presentarlo graficamente diverso dagli altri contenuti. Tra l'altro il blockquote di Blogger può essere personalizzato. Ci sono però siti che utilizzano la citazione per altre eventualità come per esempio i blog letterari che è meglio distinguano tra codici e altri contenuti.

I codici dei colori nell'HTML e nel CSS.

L'esigenza di rappresentare i colori in modo sistematico si è avuta ben prima dell'avvento dell'informatica. Già l'industria tipografica aveva creato un modello nel 1931 con cui rappresentare tutti i colori. Tale modello fu chiamato RGB (Red, Green, Blue) che partiva da questi tre colori per creare tutti gli altri mischiandoli in proporzioni variabili. Un insieme di colori in grado di riprodurre tutti gli altri è detto di colori primari. Oltre al Rosso, Verde e Blu del modello RGB sono stati proposti i modelli CMYK che è l'acronimo di Cyan, Magenta, Yellow, Key black. Si tratta di Ciano, Magenta, Giallo mentre Key black si riferisce a una particolare tecnologia dei sistemi di stampa che utilizzano questo modello.

Altri sistemi di rappresentazione sono HSB (Hue Saturation Brightness ovvero Tonalità Saturazione Luminosità) e HSI (Hue Saturation Intensity ovvero Tonalità, Saturazione ed Intensità). Per individuare un colore occorre quindi scegliere il modello e indicare il valore ovvero la quantità di colori primari per ciascuno di essi. Agli albori di internet venivano visualizzati dai browser solo 8 colori che diventarono 16 quando si passò ai 4 bit. Successivamente la rappresentazione dei colori utilizzò gli 8 bit con 256 colori riproducibili dai browser che aumentarono a più di 65.000 con i 16 bit.

Come mostrare in una pagina web dei contenuti divisi in schede cliccabili.

Al blogger mancano due cose sopra alle altre: il tempo e lo spazio. Non si riesce mai ad avere quei minuti di tempo necessari per scrivere un nuovo post o per rispondere ai commenti e d'altra parte non si riesce a concentrare nel layout tutti quei contenuti che si vorrebbero.

Con questo articolo non ho la presunzione di dare delle dritte per ottimizzare il tempo ma di dare un modesto contributo a quegli amministratori di siti su Blogger, Wordpress, o qualsiasi altra piattaforma che consenta l'utilizzo di HTML, CSS e javascript, di organizzare i contenuti suddivisi in schede con relativi pulsanti. In questo modo il lettore potrà cliccare sul nome del bottone per visualizzare il contenuto relativo e potranno essere mostrati molti più contenuti nello stesso spazio di layout.

Come rendere Responsive l'HTML di una tabella per visualizzarla correttamente anche da mobile.

Ho ricevuto un commento sulla personalizzazione nell'aspetto e nei colori di una tabella HTML che mi ha dato lo spunto per trovare una soluzione e rendere Responsive anche questo oggetto HTML. Quando di inseriscono dei valori fissi della larghezza i browser siano essi per il desktop o per il mobile non possono fare altro che mostrare l'oggetto con tale dimensione. Il risultato è che una tabella impostata con larghezza anche di solo 500 pixel uscirà fuori dalla larghezza del post se visualizzata con un cellulare.

Il trucco sarà quindi quello di non impostare mai valori assoluti di larghezza ma eventualmente solo valori percentuali. Possiamo per esempio creare una tabella di tre colonne con la prima che abbia una larghezza del 20%, la seconda del 30% e la terza del 50%. 

Come nascondere un oggetto HTML o un link con i tag display:none e visibility:hidden.

So che molti colleghi che utilizzano la piattaforma Blogger sono spesso alle prese con l'esigenza di nascondere un elemento del layout. Può trattarsi di un link che dà fastidio o di una icona nativa di Blogger come il bottone con contatore di Google+ che impedisce l'installazione di altri bottoni in modo simmetrico. 

Un esempio di una procedura di questo tipo l'ho trattato con il post su come nascondere il link all'autore del blog nella versione mobile di Blogger. Per meglio illustrare questa procedura partiamo da lontano. Gli elementi HTML si dividono in elementi di blocco, elementi inline, elementi di lista e elementi connessi alle tabelle. Gli elementi di lista sono quelli inseriti negli elenchi mentre quelli connessi alle tabelle sono appunti inseriti in quest'ultime.