Quando si crea un sito web una parte fondamentale è quella che riguarda il comparto grafico e fotografico. Spesso infatti ci si imbatte in siti che curano solamente uno dei due aspetti dove magari il designer ha fatto un ottimo lavoro con gli elementi vettoriali, ma non ha profuso lo stesso impegno nella parte dello shooting o nel selezionare e ritoccare le foto.

Questo è quanto più vero per i siti destinati ad aziende per cui l’immagine è essenziale: parliamo di quelle realtà industriali che si estendono anche a livello internazionale nel settore del fashion, giusto per fare un esempio concreto.

Andiamo quindi a scoprire quali sono le regole da sapere per uno shooting efficace per il sito istituzionale insieme a Mauro Pinto web designer di Geofelix web agency a Milano.

Foto di qualità fa rima con semplicità

Il vademecum delle regole compositive per uno shooting destinato al web inizia con una parola d’ordine: semplicità. Quando l’utente naviga ci mette davvero pochissimi secondi a fare lo scroll di una pagina e per fare in modo che qualcosa gli resti impresso e lo coinvolga deve comprendere al volo cosa sta osservando.

Dobbiamo applicare quindi questo concetto all’inquadratura delle nostre fotografie, perché mentre il nostro occhio effettua una selezione di ciò che vede, l’obiettivo della macchina fotografica catturerà tutto ciò che ha davanti. Così facendo non ci sarà un effettivo punto focale su cui richiamare l’interesse.

Semplificare vuol dire quindi veicolare un messaggio, rapido e diretto che chiaramente sarà in linea con i valori e le istanze del brand sul cui sito pubblicheremo il materiale.

Rendere chiaro il protagonista

Un corollario diretto della prima regola è la giusta messa in risalto del protagonista dell’inquadratura. Spesso infatti accade di osservare una foto in cui ciò che dovrebbe essere messo in evidenza, viene ripreso da lontano e così facendo qualche elemento di contorno, ma più in primo piano svia l’occhio.

Quindi il protagonista della foto deve essere univoco e deve riempire la scena: per attuare il suggerimento possiamo avvalerci dello zoom oppure, se possiamo, ridurre la distanza tra noi e il soggetto che stiamo fotografando.

Spezzare la monotonia

Quanto abbiamo detto non presuppone che il soggetto sia sempre al centro perfetto dell’inquadratura: punto focale non vuol dire infatti posizione centrale. Spezzare la monotonia anche attraverso le immagini è un modo per coinvolgere chi fa lo scroll della pagina, si può pensare come a una specie di gioco di movimento anche se con immagini statiche.

Per raggiungere questo obiettivo basta considerare l’immagine divisa da 3 linee verticali immaginarie che la tagliano in porzioni di uguale misura. Il soggetto deve essere lungo una di queste rette fittizie a destra o a sinistra.

Si ottiene un effetto ancora migliore se c’è un altro elemento, ovviamente in secondo piano, a occupare lo spazio restante in maniera intelligente: in gergo tecnico si dice che questo secondo fattore “bilancia” il primo. Lo spazio restante cioè non deve essere pieno, ma deve avere un secondo elemento che attiri l’attenzione dopo il primo.

Il giusto punto di vista

Tutte le strade portano a Roma. Chissà quante volte abbiamo sentito questo detto, stranamente è applicabile anche alla fotografia per il web. Quando decidiamo il soggetto dello scatto possiamo, attraverso la prospettiva che viene seguita su dei binari invisibili dall’occhio, dargli ancora più risalto.

Anche se non sono tracciate fisicamente, basta guardarci intorno per scorgere linee prospettiche: abitazioni, strade, cavi e chi più ne ha più ne metta. La prospettiva è un vero e proprio punto di vista che va sfruttato al meglio per accompagnare l’esperienza visiva.

E lo sfondo che fa?

Finora ci siamo soffermati a considerare maggiormente il soggetto principale, anche se ci siamo sempre riferiti ad altri possibili “parametri aggiuntivi”. Di fatto avere solo occhio per il protagonista non è bastevole. Lo sfondo è un elemento di riempimento che può compenetrarsi con il soggetto: se ad esempio sto fotografando una modella che porta una borsa sull’avambraccio teso, sopra e sotto e nello spazio che intercorre tra la persona e l’oggetto ci sarà uno sfondo.

Per avere un riempimento perfetto nei colori, ma anche in ciò che viene poi ripreso, a volte basta spostarsi leggermente. Inoltre, un altro accorgimento fondamentale, può essere quello di sfocarlo delicatamente sempre per rendere l’idea che gerarchicamente il nostro protagonista è ciò che va guardato.

Non so se voi sappiate cosa sia un favicon.ico ma in questo articolo noi vi daremo tutte le informazioni che vi servono per creare favicon perfette per i vostri siti.

Che cos’è una favicon.ico?

Una favicon, che è nota anche come icona di collegamento, è un file contenente una o più piccole icone che sono associate a un particolare sito web o pagina web.  Un web designer può creare una tale icona e caricarla su un sito web con diversi mezzi e poi verrà fatto l’uso che si vuole in tutti i browser web grafici. Quelli che sono i browser che supportano la favicon mostrano la favicon della pagina nella barra degli indirizzi del browser e anche accanto alla pagina in quello che è un elenco di segnalibri. Queste favicon possono essere anche utilizzate per avere un sito preferito senza testo, risparmiando spazio.  La nascita della Favicon si può datare nel marzo del 1999 quando grazie a Internet Explorer 5 per la prima volta si riusciva a sopportare un file che era posto nella directory principale di un sito web. 

Come creare una favicon.ico utilizzando photoshop?

Come posso creare una favicon.ico utilizzando Photoshop?

• Scaricate il plugin per Photoshop che permette di salvare il file nel formato ICO. Questo plugin si può scaricare anche gratuitamente
• Aprite Photoshop. Scegliete File Nuovo e creato un documento che poi vada ridimensionato dopo aver creato la grafica. 
• Create o inserite la grafica nel nuovo documento. Se utilizzate il testo nella vostra favicon assicuratevi di disattivare l’anti-aliasing in modo che i bordi siano belli e nitidi. 
• Una volta che il vostro progetto è pronto scegliete la grandezza dell’immagine che vi serve. 
• Una volta che l’icona è salva scegliete di salvare il file così che la tua favicon sia completata. 

Come creare una favicon.ico online?

In questa sezione vi presentiamo due siti su cui è molto facile creare delle favicon. 

1. https://www.favicon-generator.org/

Abbiamo, in questo caso, un sito molto semplice da usare, con un sito in stile un po’ retrò e tutti pulsanti e clic intellegibili.  Molto facile, con sfondo bianco, è in grado di rendere al meglio il lavoro che serve in vari formati e serve anche da convertitore da un formato all’altro se quello che cerchiamo è questo o quello. 

1. https://favicon.io/

Questo secondo sito è più moderno, ma di certo mantiene lo stesso tipo di facilità del primo e viene usato in maniera molto comoda e veloce.  In questo caso, essendo più moderno il tool, si può generare un favicon anche da un emoji, quindi linguaggio grafico che fa parte della nostra vita da poco, da meno di 10 anni. Si può anche partire da un logo, altro vettore moderno di idee per delle icone intriganti da inserire. 

Come inserire una favicon.ico nel codice html?

Ci sono due modi per aggiungere una favicon al vostro sito web.

• Lasciate che i browser generino automaticamente un’icona
• Il modo più semplice è, però, quello di caricare una favicon come file .png o .ico dal File Manager del vostro hosting.

Come si può fare?

• Preparate un’immagine di dimensioni quadrate in formato .png o .ico per il logo del vostro sito web.
• Se avete già un file .png potete usarlo ma meglio convertirlo in formato .ico

La maggior parte dei browser rileva, automaticamente, se il file è .ico o .png quindi non c’è bisogno di nessuna codifica.  Dopo aver caricato il file se ricaricate il sito vedrete la favicon già inserita.  Si evince, comunque, che specie in questo particolare momento tecnologico fare tutto questo è davvero molto semplice, molto più semplice di prima, quindi non c’è neppure bisogno di chissà quale conoscenza per fare ciò.

Come inserire la favicon.ico sul tuo sito wordpress?

A partire dalla versione di WordPress 4.3 è possibile aggiungere una favicon o un’icona del sito dall’area di amministrazione di WordPress stesso. Basta andare su Personalizza e cliccare su identità del sito per customizzarlo. Questa sezione consente di modificare il titolo del sito, la descrizione e anche di controllare se si desidera o meno visualizzarli nell’intestazione. In più consente di caricare l’icona del sito cliccando sul pulsante di selezione del file e caricando l’immagine che si desidera utilizzare come icona. Per aggiungere la favicon che volete controllate la grandezza. Se l’immagine che state caricando supera le dimensioni consigliate allora WordPress vi permette di ritagliarla. Se corrisponde già alle dimensioni consigliate allora dovrete solo salvare le modifiche che avete fatto. Questo è tutto ciò che dovrete fare e potrete anche vedere in anteprima, pochi attimi prima della pubblicazione, la favicon che è stata scelta e controllare che non sia sfocata o che riesca a rendere ciò che vogliamo in maniera più o meno funzionale a ciò che ci serve e a ciò che il sito vuole mostrare. 

Per fare in modo che Google trovi facilmente il sito internet che avete realizzato, uno dei modi migliori è quello di inviare al motore di ricerca la Sitemap XML. La Sitemap è infatti è un sorta di piccola mappa del vostro portale che permette di trovare facilmente tutte le pagine. Ciò rende il sito è più fruibile da un punto di vista dei motori di ricerca. Quando si realizza un sito internet, è importantissimo sottostrutturare in maniera adeguata una Sitemap, in modo tale che il sito sia molto più accessibile e sia trovato facilmente sui motori di ricerca. Infatti, i motori utilizzano generalmente dei crawler. In pratica, si tratta di strumenti che leggono il contenuto del portale e quindi tengono come punto di riferimento la Sitemap che racchiude un po’ tutto il contenuto che si trova all’interno del portale. La mappa del sito, può essere inviata a Google attraverso un’applicazione molto pratica, ovvero Yoast Seo, un plugin Seo davvero molto valido per un sito internet.

Che cos’è una Sitemap XML?

La Sitemap XML è una lista di pagine web che compongono un portale Internet. Viene utilizzata per dare ai motori di ricerca come Google, ma anche altri, specifiche informazioni su come un sito è stato organizzato. Grazie alla Sitemap i motori di ricerca potranno utilizzare i crawler per leggere il portale e capire come dare delle risposte alle ricerche degli utenti. Vi sono due tipologie di Sitemap, oltre a quella XML vi è anche quella HTML.

Nel primo caso, la Sitemap viene usata dai motori di ricerca per fare in modo che i risultati per il pubblico di riferimento siano ottimizzati. Invece, la Sitemap HTML è indirizzata ai visitatori del sito. Generalmente per un sito di web si utilizzano entrambi i formati.

La Sitemap XML, però è molto specifica per i motori di ricerca in modo tale che possano trovare facilmente tutto quello di cui hanno bisogno. Nel portale è fondamentale inviarla, soprattutto se il sito contiene tante pagine secondarie e alcune che non sono magari connesse alla pagina principale. Google, in pratica sarà informato grazie all’utilizzo di una specifica Sitemap. Quando invece parliamo di una Sitemap HTML, ci riferiamo alla mappa che i visitatori vanno a vedere per capire dove trovare quello che stanno cercando all’interno del proprio portale. Grazie a questi due meccanismi si avrà un sito indicizzato per i motori di ricerca che riuscirà a scalare il ranking di Google.

L’importanza di una Sitemap XML

Avere una Sitemap è importante perché riesce a dare tante informazioni sul portale web ideale sia per la creazione di nuove pagine, nonché per la pianificazione. Inviarla attraverso uno strumento come Yoast Seo, significa riuscre innanzitutto a realizzare questo pratico strumento e poi successivamente renderlo fruibile su internet, per attivarlo per esempio con il plugin. Su Yoast Seo basta andare all’interno della funzionalità e cercare la voce dove si spunta a Sitemap XML e spuntarla. Ma infatti, viene mandata ds Yoas che farà in modo che Google possa leggerla. Andando nella Google Search control, effettuando il login, si avrà l’opportunità di inserire la proprietà del sito e successivamente, fare la verifica per essere confermati dal motore di ricerca. Nella fase successiva, una volta fatta la verifica, si potrà fare la scansione e poi inviare la Sitemap XML. Google farà una prima lettura specifica sul vostro sito e poi successivamente sarà per il motore di ricerca, molto più facile identificarlo rispetto ad altri che non hanno questo tipo di indicazione. L’invio di una Sitemap XML è essenziale per migliorare il successo del portale e anche perché permetterà, attraverso i motori di ricerca di avere maggiori visualizzazioni.

Molte persone tante volte non riescono a capire il significato di hosting. In pratica, è uno spazio che serve per far lavorare in detesto costruire il proprio sito internet. Significato di hosting web si riferisce ad uno spazio o meglio un servizio che permette di mettere insieme tutte le pagine che lo compongono, visibile direttamente in rete. Molti si chiedono, che cos’è un hosting: in realtà, è bene identificarlo come uno spazio web dove c’è un database e tutti i file che vanno a comporre il portale. Le aziende che forniscono l’hosting si chiamano Web host. Queste aziende mettono a disposizione i propri server, cioè da un punto di vista hardware, ovvero dei computer, veri e propri o anche da un punto di vista web per fare in modo che altri possano creare un sito visibile on-line.

Il funzionamento di un hosting web

Un hosting web, per essere ben scelto, bisogna capire il modo in cui funziona. Non basta solo sapere il significato di hosting. Come funziona quindi? Quando si inserisce l’indirizzo di un sito internet, si finisce per cercare una pagina specifica che in pochi secondi compare. In pratica si invia la richiesta dal browser al web server dove la pagina web è ospitata. Immediatamente, le informazioni sulla pagina vengono trovate e poi spedite a loro volta verso il vostro browser. Tutti i computer, così come i server, hanno una specifico indirizzo IP. E’ proprio quello che li identifica in rete. Ogni sito quindi avrà questo indirizzo per identificare il server che lo sta ospitando. L’indirizzo IP di un sito è composto da vari numeri organizzando in gruppi divisi, sono quattro. Proprio perché sono difficili da ricordare, allora ogni pagina web ha anche un URL. L’URL ovvero Uniforme Resource Locator, lo rende più facile da trovare e da ricordare. Nel momento in cui si digita un URL di un sito internet, il browser comunica con un DNS, ovvero Domani Name Server per sapere qual è l’indirizzo IP associato al dominio che state cercando.

I diversi tipi di hosting web disponibili sul mercato

Capito il significato di hosting, è bene sapere che vi sono tre tipologie di hosting web disponibili sul mercato. Innanzitutto, l’hosting di tipo condiviso. Poi, vi è l’hosting dedicato ed il Virtual Private Server. L’hosting condiviso è un tipo di spazio molto diffuso, nonchè quello più comune. E’ uno spazio che ospita il sito internet in condivisione con altri portali. Tutti hanno lo stesso indirizzo IP: è la soluzione più economica ed è ideale, a meno che non si supera la quota di 100 mila visite mensili. Poi vi è anche l’opzione dell’hosting dedicato. Si tratta di un’opzione molto più costosa che però permette di avere tanta flessibilità. Quando si ha un sito più grande con una percentuale di visite molto alta, oppure se si ha bisogno di molto spazio, l’ideale è scegliere un server dedicato. Il sito sarà ospitato su un server dove non ci sono altri portali, ma soltanto il vostro. Generalmente, i Server Dedicati sono costituiti da hardware che hanno delle prestazioni molto elevate e vengono monitorati 24 ore su 24 dalle società che gestiscono i servizi di hosting web.

Le caratteristiche del Virtual Private Server e altri dettagli

Infine, un altro tipo di hosting è il Virtual Private Server. Questo hosting web utilizza un ambiente virtuale ed è molto simile a un server dedicato. Però è uno spazio web che voi potete gestire in autonomia in un ambiente virtuale. Per gestirlo si ha un’interfaccia che funziona attraverso un pannello. Il servizio di hosting, inoltre è importante, anche perché permette di potersi muovere facilmente purché si rispettino una serie di criteri. Quando si sceglie l’hosting è opportuno trovare sempre quelli che hanno una determinata velocità e caratteristiche tecniche che possono essere fatte su misura del sito che state realizzando. Valutati questi elementi, si può finalmente iniziare con il proprio sito web.