Come usare le icone Material Design di Google nella grafica e nel web

Google anni fa ha introdotto le icone Material Design come linguaggio adatto ai dispositivi mobili senza però tralasciare la qualità dei grandi schermi dei computer, visto che si tratta di immagini vettoriali che quindi non perdono definizione quando se ne aumentano le dimensioni. In questo post mostrerò come trovare, scaricare e personalizzare le immagini Material Design di Google, come usarle per foto e video o come pubblicarle nel web.

Le icone Material Design di Google sono nello stesso portale di Google Fonts. Si apre nel browser la scheda delle Icons per poi sfogliarle o cercarle, singolarmente o a gruppi. Tali icone sono disponibili in 5 stili e scaricabili liberamente in più dimensioni e densità. I 5 stili sono: Outlined, Filled, Rounded, Sharp e Two Tones.

Come personalizzare le icone delle cartelle in Windows 10.

In Windows alcune cartelle hanno una icona predefinita che le contraddistingue mentre altre vengono mostrate con una icona che riprende l'immagine di un file presente al suo interno. Spesso le cartelle hanno l'icona standard di colore giallo che le fanno sembrare tutte uguali.

In questo post vedremo come personalizzare le icone delle cartelle utilizzando immagini qualsiasi da convertirsi nel formato .ICO che è quello di elezione per queste personalizzazioni. Le icone possono essere cercate online su siti specializzati come IconFinder o Flaticon.

COME CONVERTIRE UNA IMMAGINE IN ICO

Se vogliamo usare una immagine specifica come icona di una cartella è meglio convertirla in formato .ICO. Lo si può fare con Gimp (vai a Gimp), con XnView (vai a XnView) o con Format Factory (vai a Format Factory). Con XnView si clicca con il destro del mouse sopra alla immagine che viene mostrata nella cartella in cui si trova nella visualizzazione Catalogatore. Nel menù contestuale si sceglie Conversione... che aprirà una finestra di configurazione

Come aggiungere l'icona del Play alle miniature dei video di Youtube condivise su Facebook e Twitter.

Quando scorrete le Timeline dei social vi sarete certamente imbattuti in post che a prima vista sembrerebbero dei video poi quando si clicca sopra alla icona di riproduzione invece di visualizzare il filmato veniamo reindirizzati a un'altra pagina.

In effetti molti siti tra cui anche prestigiosi quotidiani cartacei che sono seguitissimi anche online hanno preso l'abitudine di pubblicare delle immagini del player di Youtube con l'icona del Play. Non si tratta quindi di un vero Player e quindi non inizia la riproduzione del video ma ci sarà solo l'apertura del sito con ovvio vantaggio di aumento di traffico.

Come postare icone e immagini senza URL con solo codice per velocizzare modelli e temi.

Per postare una immagine in un post o per mostrare una icona nel layout del sito in linea di massima tale immagine deve essere caricata online e nella pagina web va inserito il suo indirizzo web con un apposito codice. Gli utenti di Blogger fino a poco tempo fa potevano fare l'upload delle loro foto o icone su Picasa per poi ottenerne il link diretto da utilizzare nel modello o nei post. Le immagini che vengono inserite negli articoli con l'Editor di Blogger o con Open Live Writer finiscono adesso su Google Foto da cui è più complesso ricavare il link diretto. Gli utenti di Wordpress self-hosted avendo uno spazio proprio aggiungono le foto in una specifica cartella del loro sito da cui si ottiene l'hotlink. I provider più a buon mercato non offrono una larghezza di banda adeguata alle esigenze quindi bisogna essere piuttosto parchi nell'inserimento di immagini nel Tema e negli articoli.

In realtà si possono inserire foto in un articolo o mostrare icone in un Modello o in un Tema senza caricare materialmente le immagini. Si tratta di convertire i dati binari di una immagine in JPG, PNG o GIF in una stringa in Base64. In sostanza l'immagine diventerà un semplice testo con una ovvia velocizzazione del sito. Questo sistema però ha dei limiti nel senso che mentre per le immagini di icone la stringa in Base64 che si ricava sarà di circa quattro righe per una immagine molto complessa avrà un numero di righe molto più grande e quindi difficilmente utilizzabile.

Widget animato di icone collegate ai social network.

Quando si installa un widget in un sito che contiene delle immagini collegate a social network o ad altre risorse bisognerebbe sempre preferire quelli che utilizzano i CSS Sprite perché con questo sistema si riducono a una soltanto le chiamate HTTP con un grande beneficio sulla velocità di caricamento che come è noto da tempo è diventato uno dei fattori di ranking di Google.

Quello che vado a presentare è un widget di questo tipo anche se molto semplice. Utilizza una sola immagine che ne contiene ben otto. Una per ciascun social network di colore grigio che viene visualizzata in condizioni normali e altre quattro colorate per gli stessi social network che si visualizzano al passaggi del cursore sopra di esse. Nello screenshot successivo il mouse è sopra alla icona di Facebook

Come aggiungere una firma con icone, banner e link alla fine di ogni messaggio su Gmail.

Nel precedente post abbiamo visto come si possa creare una firma con un servizio online come Si.gnatu.re in formato HTML da aggiungere come firma automatica al nostro client di posta elettronica. Con Gmail non ho però trovato il modo di aggiungere una firma in formato HTML. Ho controllato tutte le funzionalità presenti nella sezione Labs ma non ho trovato nulla di utile in tal senso.

Si può usare l'applicazione Gmail Signature che permette di aggiungere testo, icone e link alla firma di Gmail ma si può fare anche tutto da soli senza dover appesantire troppo il browser con troppe applicazioni. Prima di iniziare è meglio procurarsi delle immagini delle icone dei social network che vogliamo inserire in calce a ogni messaggio in modo automatico.

Si.gnatu.re è una app per creare una firma professionale gratis.

Inserire automaticamente una firma in calce a tutte le email che si inviano dà un aspetto di professionalità che è bene coltivare sempre per avere una maggiore autorevolezza nel mondo del web. Abbiamo già visto come si possano creare da soli tali firme e come arricchirle di icone con collegamenti ai nostri account sui vari social network.

In questo post vedremo come utilizzare un tool gratuito online che serve proprio per velocizzare questa operazione e per migliorare la grafica del risultato. Come per altri servizi di questo genere possiamo anche scegliere il modello di firma e aggiungere anche dei dati personali quali numero di telefono, indirizzo, ragione sociale, ecc.

Come mostrare una icona con il numero dei commenti accanto al titolo del post in Blogger.

L'obiettivo di questo articolo è quello di illustrare come si possa mostrare una icona con il numero dei commenti ricevuti accanto al titolo del post in un sito su piattaforma Blogger. Si può decidere di mostrare icona con numero dei commenti solo nella homepage, nelle pagine di etichette e in quelle di archivio, solo nei singoli post o ovunque. Basterà inserire il codice che vado a presentare tra i due tag condizionali che ne vincolano l'attivazione alla tipologia di pagine prescelta.

L'icona potrà essere scelta del colore desiderato, sarà visibile solo nella versione desktop e l'aspetto di un articolo dopo la fine della personalizzazione sarà il seguente

Come aggiungere link al blog e ai social nel Canale di Youtube.

A seguito di un commento ricevuto ieri pubblico questo instant post su un argomento di secondo piano ma che ha una sua rilevanza pratica. Nel Canale di Youtube di ciascun utente, in basso a destra della copertina vengono aggiunte di default delle icone con collegamento ai social network. 

I link aggiunti automaticamente sono a Facebook e Google+ che sono conosciuti da Google perché inseriti in altre impostazioni del Canale. Questi collegamenti sono utili per invogliare gli utenti che ci seguono su Youtube a farlo anche su Twitter, Google+ e sugli altri social. Vediamo come fare ad aggiungere altri collegamenti a Twitter e a social meno conosciuti ma altrettanto importanti come Pinterest e Instagram. La situazione iniziale poniamo sia questa

Icone ruotanti di Facebook, Twitter, Google+ e Feed.

Le icone che ruotano al passaggio del mouse sono sempre molto richieste. La rotazione di una immagine è un effetto hover piuttosto semplice da realizzare. Ricordo di aver presentato il widget degli Ultimi Commenti con avatar ruotanti e quello dei Post più popolari sempre con miniature ruotanti.

Ho anche presentato il gadget delle icone circolari da visualizzare alla fine dell'articolo. In questo post illustrerò come installare un semplicissimo gadget che mostri le quattro icone più importanti nella sidebar con un effetto rotazione al passaggio del cursore. Le icone avranno il collegamento rispettivamente a Facebook, Twitter, Google+ e Feed RSS.    

Come mostrare accanto ai titoli di Blogger una icona in funzione della etichetta del post.

Prendiamo come esempio un sito creato con la piattaforma Blogger che si occupi di spettacolo. Questo argomento può contenere al suo interno diverse tipologie di articoli suddivisi in cinema, teatro, televisione, musica, gossip e altro ancora. I lettori di un sito come questo potrebbero trovare utile che accanto al titolo di ciascun post si visualizzasse in modo automatico una icona che mostrasse l'argomento trattato nell'articolo. Utilizzando i tag condizionali già usati per mostrare un contenuto sopra ai post e sotto agli articoli con una determinata etichetta vediamo come inserire una icona di una nota musicale accanto ai post con etichetta musica, una icona di uno schermo accanto ai post con etichetta televisione e così via.

Naturalmente questo si tratta solo di un esempio che può essere adattato alle singole esigenze. Se si decide di adottare questa personalizzazione bisogna fare in modo che solo una delle etichette prese in considerazione sia presente nei vari articoli perché altrimenti di sovrapporranno. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga

Come installare i pulsanti di condivisione sociale nella versione desktop e mobile di Blogger.

Ritorno sul tema delle condivisioni sui social network che sono cosa diversa dai bottoni ufficiali con cui oltre a condividere si possono anche visualizzare i contatori del numero di tali azioni. In un post recente ho illustrato come si possano installare delle icone del tipo material design nella versione mobile di Blogger in questo articolo invece vedremo come si possa usare lo stesso CSS per mostrare le icone sia quando si visualizzi un post da mobile sia quando lo si visualizzi da desktop.

Benché il CSS sia comune le icone scelte per le due differenti valutazioni non coincidono. Il pulsante per la condivisione su WhatsApp ha senso mostrarlo solo nei dispositivi mobili in cui sono presenti delle applicazioni dell'omonimo servizio di messaggistica. Al contempo nella versione per il mobile è bene non abbondare con i pulsanti perché altrimenti potrebbero mostrarsi su due file nei cellulari con piccola risoluzione. Naturalmente si tratta di opinioni personali e ognuno può scegliersi la giusta configurazione per le proprie esigenze.

Che codice usare con le icone Material Design di Google.

Giusto ieri ho elencato una serie di siti in cui ottenere delle icone Material Design cioè che utilizzano un linguaggio introdotto da Google particolarmente adatto ai dispositivi mobili senza però dimenticare i grandi schermi dei computer visto che sono realizzate con la grafica vettoriale e quindi che mantengono la loro qualità quando vengono aumentate le dimensioni.

La grafica cosiddetta raster utilizza invece una griglia di pixel che quando si aumentano le dimensioni, della immagine provoca un fastidioso effetto sgranatura. In questo post vedremo nello specifico come si possano utilizzare le icone di Google anche per i nostri template o per essere pubblicate nei post. Ricordo che le icone di Google Material Design  possono essere scaricate tutte insieme in un file in formato ZIP andando appunto su Download ZIP.

8 siti in cui trovare icone Material Design.

Il Material Design è un linguaggio di design sviluppato da Google con animazioni, transizioni, effetti di profondità con giochi di luce e ombreggiature. Le immagini realizzate con questa tecnologia mostrano delle superfici che sembrano fisiche e spigoli che danno l'idea di poter essere toccati.

Il Material Design è stato introdotto su Android a partire dal 2009 ed è stato successivamente esteso agli altri prodotti Google. Da questo anno 2015 praticamente tutte le applicazioni di Google per Android utilizzano il Material Design come Chrome, Google Drive con le sue applicazioni, Gmail, Youtube e Google Maps.  Anche altri siti e applicazioni hanno recentemente adottato questa tecnica del Material Design che può essere utilizzata in piccolo pure nei nostri blog. In questo articolo vedremo in quali siti cercare delle icone in Material Design da incorporare nelle nostre pagine web.

Come nascondere o modificare l'icona dell'autore nei commenti nidificati di Blogger.

A seguito di un commento ricevuto appena ieri su come si possa nascondere l'icona che appare accanto al nome dell'amministratore del sito nei commenti nidificati di Blogger ho deciso di scrivere un instant post su questo tema che spero possa interessare anche altri lettori. 

Tale icona è visualizzata da tutti i navigatori e sostanzialmente serve per rendere subito evidenti i commenti che sono stati pubblicati dall'autore del blog. L'icona di default di Blogger ha dimensioni di 16-18 pixel quindi nel caso si pensi di modificarla è consigliabile sostituirla con una immagine di pari dimensioni o al limite più piccola. Si parte da una situazione di questo tipo.

Come mostrare le icone dei social network nei blog a Visualizzazione Dinamica di Blogger.

I template di Blogger a Visualizzazione Dinamica o Dynamic Views furono introdotti qualche anno fa da Blogger ma contrariamente a quelle che erano le aspettative non hanno avuto un successo travolgente e ancora adesso i blog che hanno scelto questi modelli rappresentano una minoranza. La ragione principale risiede nella grande difficoltà di personalizzazione che questi comportano.

 

Per esempio non esistono sidebar come negli altri template in cui inserire dei widget immediatamente mostrati ai lettori. Si possono installare i gadget ufficiali di Blogger ma saranno visibili ai navigatori solo passando con il mouse nella parte destra del layout. Un'altra limitazione molto forte è pure l'impossibilità di utilizzare il gadget HTML/Javascript che serve per tutti i widget non ufficiali di Blogger come per esempio la visualizzazione di semplici icone con collegamento ai social network. Non è inoltre possibile mostrare nell'area del post un qualunque gadget con l'unica eccezione del menù delle Pagine Statiche che opzionalmente può essere inserito subito sotto alla intestazione del blog.

Menù fluttuante con icone sociali e casella di ricerca.

Visto il grande successo del menù flottante presentato circa un anno fa ho pensato di integrare voci del menù e icone dei social network con una casella di ricerca in cui digitare opportune parole chiave per visualizzare i post corrispondenti.

Si tratta di un menù che non ha javascript e che quindi potrà essere visualizzato da molti browser anche di dispositivi mobili. Una particolarità è che si tratta di un menù flottante che rimane sempre al top della pagina anche quanto si scrolla verso il basso. Questo significa che sarà comunque nascosta la Navbar di Blogger anche nel caso in cui non si sia già fatto. Un'altra particolarità molto interessante è che questo menù non contiene dei tag di Blogger specifici e quindi può essere installato in qualsiasi pagina web o in un blog di tutte le piattaforme che abbiano un Editor del Tema.

Mostrare icone sociali con effetto zoom alla fine del post.

Dopo aver letto i contenuti di un articolo il navigatore può avere voglia di conoscere meglio il suo autore ed ecco quindi che in molti siti alla fine di un post ci sono le icone con i collegamenti agli account dell'amministratore del sito. Si tratta di una funzionalità diversa da quella che si ha invece con i bottoni di condivisione dell'articolo che hanno bisogno di un codice un po' più complicato e che servono per condividere gli articoli nei social selezionati con un solo click.

Ci sono moltissimi esempi di questa seconda opzione, mi limito a ricordare come esempio le piccone icone colorate che utilizzo anch'io in questo sito. Confrontando quel codice con quello che adesso vado a pubblicare si può anche fare in modo di rendere queste icone in grado di condividere i post. L'aspetto del widget che vado a proporvi sarà il seguente

Mostrare una icona accanto al testo nel menù delle Pagine statiche di Blogger.

Il menù delle Pagine statiche di Blogger è sicuramente quello più utilizzato dagli utenti vista la semplicità della sua installazione. Ricordo che le voci del menù possono essere formate dai titoli delle pagine ma anche da dei link esterni quali potrebbero essere il Profilo su Twitter o la pagina di Facebook. Per visualizzare il widget del menù delle Pagine bisogna andare su Layout > Aggiungi un gadget > Pagine per poi configurare il widget in cui si possono ordinare le voci delle pagine e selezionare solo quelle che intendiamo mostrare ai lettori.

Vediamo come inserire una icona sulla sinistra di ogni voce per rendere più chiaro il suo significato. In definitiva vogliamo passare da una situazione come questa 

Icone fluttuanti per social network.

Per invogliare i lettori a sottoscrivere la pagina fan collegata al blog o a inserirci nelle sue cerchie di Google Plus sono stati realizzati innumerevoli widget accattivanti. In questo articolo presenterò una alternativa sicuramente originale che consiste nel mostrare tre icone che si spostano casualmente nel layout del blog e, se i lettori ci cliccano sopra, apriranno una nuova scheda con la pagina collegata che potrebbe essere la pagina fan di Facebook oppure la pagina business di Google+.

Il limite di questo gadget è che è strutturato per tre icone che quindi non possono diventare due oppure quattro. Questo lo faccio presente subito per stoppare possibili richieste nei commenti in tal senso. Quello che si può scegliere senza limitazioni sono il tipo di icone, i link collegati e i social prescelti che potrebbero essere anche Pinterest, Instagram e Youtube invece di quelli proposti che sono Facebook, Twitter e Google+. Presenterò l'inserimento di questa personalizzazione in un blog su Blogger ma non esistono tag specifici di questa piattaforma e quindi può essere installata in qualsiasi pagina web che supporti il javascript.