Come creare un sito web con grafica e servizi open

Continuiamo a parlare di siti web, dopo l’articolo sul come creare un blog: alternative a Blogger. Partiamo quindi dal presupposto che avete già creato il vostro sito web e volete riempirlo con un po’ di cose utili. Come ad esempio statistiche, font oppure immagini. Ecco come creare un sito web con grafica e servizi open! E mi raccomando: ricordatevi che Blogger è di Google, dunque statene alla larga!

Prima di tutto: la grafica

Esistono alcuni strumenti gratuiti per riuscire a mettere insieme qualche colore anche se non si hanno conoscenze. Evitate accostamenti agghiaccianti e affidatevi a qualcuno di esperto. Se non conoscete nessuno potete dare un occhio a questi siti. Ad esempio grazie al sito Color ideato da Cloudflare Design (sì, quelli dei DNS) potete testare svariate palette di colori. Potete vedere alcune combinazioni di colori e decidere di conseguenza quale è quella più adatta al vostro sito.

Un altro sito da tenere presente è Nord oppure anche Leonardo. Esiste anche un sito chiamato Colors – Radix UI che è davvero molto interessante e vi permetterà di utilizzare dei CSS preimpostati con delle belle colorazioni.

Grazie al sito Can’t Unsee potete inoltre testare e migliorare la vostra abilità grafica. Scoprire quale è l’immagine corretta!

Alternative a Google Analytics

Una delle prime cose che si tende a fare dopo aver creato il proprio sito web è quello di volere delle statistiche per sapere quanta gente ha visitato il nostro sito (fossero anche solo quattro gatti). Quasi tutti si lanciano immediatamente su Google Analytics perché è gratis e perché le sue statistiche sono molto accurate. Forse lo sono anche fin troppo per le necessità di molti e non sempre è necessario seguire l’utente in ogni suo clic. Per una lista ben più completa potete leggere il nostro articolo sulle alternative a Google Analytics, qui un breve riassunto.

• Se avete il vostro sito su WordPress il primo consiglio è quello di utilizzare Koko Analytics. Nulla uscirà dal vostro server e avrete solo l’essenziale: quante pagine e quanti visitatori ho avuto? Da quale sito arrivano gli utenti? Basta, nient’altro. L’essenziale.

• In alternativa potete provare GoatCounter. Se siete capaci potete installarlo in autonomia sul vostro server altrimenti potete usare il servizio offerto. A pagamento o gratuitamente, in base alle vostre esigenze.

• Se cercate qualcosa di più complesso invece il consiglio principale è quello di utilizzare l’ottimo Matomo. Anche in questo caso è tutto gratis, open sourceSignifica che il codice sorgente è accessibile a tutti e chiunque può vedere cosa c’è dentro. Leggi anche Software Libero Leggi ¹ come le precedenti e con statistiche davvero molto complete. E se siete su WordPress c’è un pratico plugin.

• Infine, se siete su WordPress, date un occhio a Jetpack. Non è proprio il massimo per quel che riguarda la privacy ma sono open source ² e bene implementate su WordPress.

Alternative a Google Fonts

Un’altra caratteristica di chi ha un sito web è quella di voler implementare i Google Fonts. La cosa migliore sarebbe riuscire a implementarli da locale, cioè senza regalare ulteriori dati a Google senza motivo. Vuol dire scaricare il font sul proprio server e farlo caricare direttamente da lì, senza lasciare il link esterno per scaricarli da Google.

Esistono inoltre molte alternative a Google Fonts.

• DaFont, molti font gratuiti da installare sul proprio sito;

• FontLibrary, diversi font anche molto particolari;

• Font Squirell, uno dei più famosi e dei più utilizzati;

• Velvetyne, un altro sito dove poter trovare font gratuiti ed open source;

• Open Font Library, tanti Serif e Sans-Serif da poter utilizzare sul proprio sito;

• google webfonts helper, vi piacciono troppo i font di Google? Una breve guida per utilizzarli sul vostro sito senza connessioni esterne;

• Brick, font open source molto simili a quelli di Google Fonts;

• Velvetyne Type Foundry, suggerimento arrivato da voi, grazie! Dal 2010 offrono gratuitamente font gratuiti;

• Font Zillion, ce l’avete suggerito su Telegram. È un gigantesco archivio di font liberi e gratuiti;

• Bunny Fonts, altra alternativa molto interessante a Google Fonts da poter utilizzare anche prendendo i font da remoto (anche se noi preferiamo l’utilizzo di font in locale).

Rimpiazzare i Google Fonts

Se tutti i siti precedenti non vi convincono perché volete a tutti i costi utilizzare un Google Fonts e non volete o non sapete inserirlo senza farlo caricare esternamente potete dare un occhio a coolLabs. È un progetto open source che vi permette di utilizzare i font di Google online senza usare direttamente i font di Google ma usando il loro servizio.

Non è la soluzione migliore né quella che preferiamo ma è comunque una soluzione intermediaria che può essere utili per i più novizi. Per usarlo vi basterà cambiare il dominio fonts.googleapis.com in api.fonts.coolabs.io nel tag <head> che avete inserito per caricare i Google Fonts!

Evitiamo di usare Google reCAPTCHA

Anche in questo caso è presente un nostro articolo che spiega per filo e per segno perché non utilizzare Google reCAPTCHA. Uno dei motivi è che state regalando un sacco di dati a Google con i quali istruisce gratuitamente la sua AI. Possiamo smetterla di lavorare gratis per Google?

• Se siete su WordPress provate ad utilizzare Askimet Anti-Spam.

• FriendlyCaptcha, un altro CAPTCHA gratuito (con limiti) ed open source.

• hCAPTCHA, è il CAPTCHA utilizzato da Cloudflare.

Come creare un sito web con grafica e servizi open: gli embed ed i login

Come già sapete Facebook, Google e Amazon hanno letteralmente riempito il web di immondizia. Di tracciantiOltre ai cookie ci sono tanti altri metodi per tracciare il profilo di una persona da parte, ad esempio, dei social network. Il web ne è, purtroppo, disseminato. Maggiori dettagli su Mozilla. Leggi, per la precisione. Ogni volta che fate un embed di un video di Youtube o che inserite la pagina la possibilità di fare dei login con Facebook o con Google state regalando dati a Google e a Facebook.

Prima di embeddare un video da Youtube provate a cercarlo su Peertube oppure su Odysee. Se lo trovate potreste embeddarlo da lì. Oppure provate ad embeddarlo tramite qualche istanzaServer su cui gira un determinato software. Ad esempio mastodon.uno è un'istanza italiana di Mastodon. di Invidious anche se in questo caso arriverà comunque del traffico da e per Youtube. Il consiglio in generale è di non embeddare a caso per evitare traccianti e cookie, piuttosto mettete un semplice link che male non fa mai.

Content delivery network

Se il vostro sito ha davvero molto traffico potreste aver bisogno di una Content Delivery Network per velocizzare il tutto. Evitate se possibile il cloud di Google e quello di Amazon anche se sono i più famosi, economici e utilizzati. Potreste provare ad esempio Cloudflare (statunitense), Centerserv (canadese), Leaseweb (olandese), OnApp (inglese) oppure OVH (francese). Esiste anche Leafcloud, un’alternativa green a un prezzo interessante.

Su vostro suggerimento ³ vi consigliamo anche di dare un occhio a BunnyCDN e CDN77 che sono entrambe europee.

Come creare un sito web con grafica e servizi open: quali alternative a Google Immagini?

Molte persone per cercare immagini per il proprio sito vanno su Google Immagini e fanno una ricerca avanzata mettendo nel filtro “Licenze Creative Commons” o “Pubblico dominio”. Sappiate intanto che questa possibilità la offre anche il motore di ricercaÈ quello che utilizzate per cercare qualcosa su internet. Alcuni motori di ricerca hanno poi sviluppato anche un loro browser, è il caso di Google con Google Chrome e di DuckDuckGo con DuckDuckGo Browser. Per l’utente finale è generalmente molto comodo associare browser a motore di ricerca e definire un po’ il tutto “internet”. Ma sono due cose differenti. Il browser è un programma, il motore di ricerca è un sistema che vi permette di cercare su internet. DuckDuckGo. Esistono però molti siti che offrono immagini gratuite ed utilizzabile ovunque, spesso anche a scopi commerciali.

• unDraw, c’è anche un nostro articolo dedicato. Stupende immagini vettoriali ed open source utilizzabili ovunque e da chiunque.

• Unsplash, un sito web che va oltre il mito. Trovate migliaia di foto artistiche davvero eccezionali utilizzabili ovunque.

• Pixabay, oltre a bellissime fotografie qui trovate anche belle immagini vettoriali.

• Pexels, così come Pixabay è un ottimo archivio di immagini gratuite.

• Freepik, immagini e foto molto belle. Tantissime gratuite ed altre a pagamento. Quelle gratuite, a differenza dei siti precedenti, vanno necessariamente accreditate in maniera corretta.

• Noun Project, belle foto ed immagini vettoriali utilizzabili anche gratuitamente. Anche qui è necessario inserire dei crediti per l’autore ed è vietato modificare le foto. Per farlo è necessario acquistarle.

• Simple Icons, se sono icone quelle che state cercando qui trovate un gigantesco archivio di icone gratuite ed open source.

• Hover.css, andiamo oltre le semplici immagini e vi consigliamo questa bella libreria CSS open source. Tante icone ma anche tantissimi effetti da inserire gratuitamente all’interno del vostro sito!

• CSS Icons, altre 700 icone totalmente open source ⁴ e gratuite!
• Phosphor Icons ⁵, un altro progetto open molto interessante e con tantissime icone belle e da usare ovunque.

• Feather, altre icone gratuite ed open source ⁶!

• SVGBackgrounds, sfondi bellissimi, colorati e gratuiti. Sfondi in SVG leggeri e davvero molto semplici da personalizzare!

• Illustrations, oltre 100 illustrazioni molto carine e completamente libere da utilizzare su qualunque sito!

• Vertex, icone 3D completamente gratuite e personalizzabili da poter utilizzare ovunque!

Avete altre domande? Vi aspettiamo sul nostro gruppo Telegram o nella nostra stanza Matrix.

1. Matomo su GitHub[↩]
2. Jetpack su GitHub[↩]
3. Suggerimento su Telegram[↩]
4. CSS Icons su GitHub[↩]
5. Phosphor Icons su GitHub[↩]
6. Feather su GitHub[↩]

Aiutaci a condividere privacy