Come creare un sito web con grafica e servizi open

Articolo aggiornato il: 3 Novembre, 2021

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 source¹ 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.

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.

• Securimage è un progetto open source in alternativa a Google reCAPTCHA.

• 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 traccianti, 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 lbry.tv. Se lo trovate potreste embeddarlo da lì. Oppure provate ad embeddarlo tramite qualche istanza 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.

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 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!

• 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!

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

1. Matomo su GitHub [↩]
2. Jetpack su GitHub [↩]
3. CSS Icons su GitHub [↩]
4. Feather su GitHub [↩]

Se ti piace il nostro lavoro da oggi puoi anche donare grazie!

Aiutaci a condividere privacy