Categoria: Web design

I commenti di WordPress possono promuovere coinvolgimento e comunità, ma non tutti i siti o post ne traggono beneficio. Alcuni 
siti WordPress potrebbero voler eliminare i commenti spam , mentre altri preferiscono semplicemente mantenere le cose incentrate sul contenuto senza distrazioni. Se ti stai chiedendo come disattivare i commenti in WordPress , troverai diverse opzioni, dall’interromperli 
in tutto il sito alla disattivazione dei commenti su post o pagine specifici .

Indice

• Motivi per disabilitare i commenti in WordPress
• Disattivare i commenti per i post futuri
• Come disattivare i commenti su post o pagine specifici
• Utilizzo della modifica in blocco per disabilitare i commenti su più post
• Disattiva i commenti sui media e sui tipi di post personalizzati
• Utilizzo del plugin WordPress Disable Comments per un maggiore controllo
• Come nascondere i commenti esistenti
• Domande e risposte

Motivi per disabilitare i commenti in WordPress

Ci sono diverse ragioni strategiche per cui i proprietari di siti e i creatori di contenuti potrebbero scegliere di disattivare i commenti sul loro sito WordPress . Sebbene i commenti possano incoraggiare l’interazione, non sono sempre utili, a seconda degli obiettivi del sito, del pubblico di destinazione e dello stile dei contenuti. Ecco uno sguardo più approfondito al motivo per cui disattivare i commenti potrebbe essere vantaggioso:

Riduzione dello spam e dei contenuti indesiderati

Uno dei motivi più comuni per disabilitare i commenti in WordPress è l’enorme volume di commenti spam che molti siti ricevono. Senza una moderazione costante, lo spam può ingombrare la sezione commenti con contenuti irrilevanti, offensivi o dannosi, danneggiando la credibilità del tuo sito. Gli spammer spesso prendono di mira i siti WordPress per la creazione di backlink, riempiendo le sezioni commenti con link e commenti di basso valore. Disabilitando i commenti, elimini la necessità di una moderazione che richiede tempo e riduci il rischio che link dannosi o truffe appaiano sul tuo sito.

Per le aziende, questa mossa può essere particolarmente strategica, poiché qualsiasi contenuto discutibile potrebbe rovinare un’immagine professionale. Anche con filtri antispam o plugin, uno spammer determinato potrebbe comunque trovare il modo di aggirare le difese, rendendo la rimozione completa dei commenti una soluzione più efficace.

Semplificazione della gestione del sito e attenzione ai contenuti

I commenti possono richiedere attenzione regolare, il che può richiedere molte risorse. Per i proprietari di siti o piccoli team che gestiscono più aspetti del loro sito WordPress , gestire e rispondere ai commenti potrebbe non essere pratico. Disabilitare i commenti può aiutare a risparmiare tempo e semplificare la gestione del sito , consentendo una maggiore attenzione alla creazione di contenuti, alla progettazione e all’ottimizzazione.

Inoltre, alcuni tipi di contenuto semplicemente non traggono vantaggio dai commenti. I blog con guide didattiche, annunci aziendali o risorse evergreen potrebbero preferire un’interfaccia pulita e priva di distrazioni, in cui i lettori possono concentrarsi esclusivamente sul contenuto. Questo approccio può anche essere utile per siti di e-commerce, portfolio e siti aziendali in cui l’obiettivo principale è evidenziare prodotti, servizi o risultati senza input aggiuntivi.

Prevenire discussioni negative o fuori tema

Alcuni argomenti attraggono naturalmente dibattiti o disaccordi, soprattutto quando si tratta di argomenti divisivi o controversi. Scegliendo di disattivare i commenti , i proprietari di siti possono impedire che interazioni potenzialmente divisive o negative distraggano dal messaggio previsto di un post. Ciò è particolarmente utile per i marchi e le aziende che vogliono evitare controversie pubbliche o negatività all’interno dei loro spazi digitali.

Sebbene una conversazione rispettosa possa essere preziosa, spesso emergono discussioni fuori tema nelle sezioni dei commenti , che si allontanano dallo scopo originale del post e potenzialmente portano i lettori fuori rotta. La rimozione della funzione di commento aiuta a garantire che il contenuto resti focalizzato, riducendo il rischio di distrazione del lettore o di divagazioni indesiderate.

Migliorare le prestazioni del sito e i tempi di caricamento

Ogni elemento di una pagina web ne influenza le prestazioni e i commenti non fanno eccezione. Su siti di grandi dimensioni o siti con post, pagine o media molto trafficati , una sezione commenti può contribuire a tempi di caricamento più lenti, poiché aggiunge contenuti aggiuntivi che il server deve caricare. Le pagine con thread di commenti estesi sono particolarmente a rischio, poiché richiedono più risorse del server per visualizzare i commenti in tempo reale.

Per i siti focalizzati su performance e SEO, disabilitare i commenti può fornire un leggero incremento della velocità della pagina, il che può avere un impatto positivo sulle classifiche dei motori di ricerca . Inoltre, ridurre i tempi di caricamento migliora l’esperienza utente, specialmente per gli utenti mobili che potrebbero avere una larghezza di banda limitata.

Allineamento con la strategia del marchio o dei contenuti

Alcuni marchi o creatori potrebbero semplicemente scoprire che un sito senza commenti si allinea meglio con i loro obiettivi e strategie generali. Ad esempio, le fonti di informazione, i blog ufficiali dei marchi o i siti portfolio spesso mirano a presentare informazioni autorevoli, scegliendo invece di incoraggiare il feedback tramite canali di social media in cui le conversazioni sono più accessibili e più facili da monitorare. Ciò consente ai proprietari di siti di guidare le discussioni in un ambiente più controllato, gestendo l’impegno in spazi in cui possono monitorare meglio la percezione del marchio.

I siti basati sui contenuti, come i siti di e-commerce o i blog di ricette, potrebbero scoprire che i commenti sono meno necessari poiché le descrizioni dei prodotti o i contenuti didattici sono in genere semplici. Disattivare i commenti in questi casi aiuta a mantenere un sito pulito e incentrato sul marchio, senza commenti aggiuntivi che potrebbero distrarre o sminuire il messaggio del marchio.

Migliorare la sicurezza e proteggere la privacy dei dati

Infine, i commenti sui siti WordPress possono talvolta creare vulnerabilità di sicurezza, poiché gli hacker possono sfruttare i moduli di commento per iniezioni SQL o altre minacce informatiche. La disabilitazione dei commenti elimina questo punto di ingresso, in particolare per i siti sensibili che danno priorità alla sicurezza, come servizi finanziari, fornitori di assistenza sanitaria o istituti scolastici.

Oltre alla sicurezza, alcuni siti potrebbero avere policy sulla privacy o requisiti normativi che scoraggiano o limitano le interazioni pubbliche sulle loro piattaforme. Ad esempio, i siti che trattano dati utente o argomenti sensibili potrebbero scegliere di rimuovere i commenti per evitare di raccogliere o mostrare pubblicamente i dati utente, aderendo a standard più rigorosi sulla privacy dei dati.

Disattivare i commenti per i post futuri

Per disattivare i commenti su WordPress per i nuovi post, puoi apportare delle modifiche alle impostazioni per assicurarti che non siano consentiti commenti su nessun contenuto che pubblicherai in futuro.

1. Per iniziare, accediamo alla dashboard di WordPress .
2. Vai su Impostazioni > Discussione .
3. Cerca l’opzione denominata Consenti alle persone di inviare commenti sui nuovi post e deselezionala.
4. Scorri fino in fondo alla pagina e fai clic su Salva .

Questa modifica si applicherà solo ai nuovi post, quindi se desideri rimuovere l’ opzione dei commenti da post o pagine esistenti, dovrai utilizzare impostazioni o plugin aggiuntivi.

Come disattivare i commenti su post o pagine specifici

Disabilitare i commenti su un post o una pagina specifici è un processo semplice se hai bisogno di questa modifica solo per determinate aree del tuo sito WordPress .

1. Accedi alla dashboard di WordPress e vai su Post > Tutti i post o Pagine > Tutte le pagine , a seconda di dove vuoi applicare la modifica.
2. Passa il mouse sul post o sulla pagina che desideri modificare e clicca su Modifica rapida .
3. Nella sezione relativa allo stato dei commenti , deseleziona Consenti commenti .
4. Fare clic su Aggiorna per salvare le modifiche.

In questo modo puoi mantenere i commenti su post o pagine specifici e disattivarli dove non sono necessari.

Utilizzo della modifica in blocco per disabilitare i commenti su più post

La funzione di modifica in blocco è perfetta se vuoi disattivare i commenti su un gruppo di post contemporaneamente.

1. Nella dashboard di WordPress , vai su Post > Tutti i post .
2. Seleziona le caselle di controllo accanto ai post per i quali desideri disattivare i commenti.
3. Dal menu a discesa Azioni in blocco , seleziona Modifica e fai clic su Applica .
4. Nella sezione delle impostazioni dei commenti , seleziona Non consentire dal menu a discesa dei commenti.
5. Fare clic su Aggiorna per applicare le modifiche.

In questo modo verranno disattivati ​​rapidamente i commenti su più post contemporaneamente, il che lo rende una soluzione efficiente per i siti di grandi dimensioni.

Disattiva i commenti sui media e sui tipi di post personalizzati

Per impostazione predefinita, WordPress consente i commenti su tutti i post, le pagine e i file multimediali, ma alcuni utenti potrebbero volerli disattivarli anche per i tipi di post personalizzati o per i file multimediali.

1. Vai su Impostazioni > Discussione nella dashboard di WordPress .
2. Scorri verso il basso per trovare le impostazioni relative a specifici tipi di post , come post, pagine o media .
3. Per i file multimediali, se l’opzione non è disponibile nella casella di discussione, valuta la possibilità di utilizzare un plugin .

Plugin come Disable Comments possono essere particolarmente utili per chi desidera disattivare i commenti in tutti i tipi di post personalizzati o quando le impostazioni di WordPress non coprono casi specifici.

Utilizzo del plugin WordPress Disable Comments per un maggiore controllo

Il plugin Disable Comments è molto popolare tra gli utenti di WordPress che desiderano disattivare i commenti sull’intero sito o su determinati tipi di contenuto senza dover modificare manualmente ogni impostazione.

1. Nella dashboard di WordPress , vai su Plugin > Aggiungi nuovo .
2. Cerca Disabilita commenti e clicca su Installa ora , quindi su Attiva .
3. Nelle impostazioni del plugin potrai scegliere opzioni per disattivare i commenti in tutto il sito , sui post, sulle pagine o sui media.

L’utilizzo di un plugin offre un maggiore controllo se è necessario rimuovere i commenti in WordPress in modo coerente su vari tipi di post.

Come nascondere i commenti esistenti

Se hai deciso di disattivare i commenti ma ne hai già sul tuo sito, nasconderli o eliminarli può semplificare i tuoi contenuti.

1. Dalla dashboard di WordPress , vai su Commenti e seleziona i commenti che desideri eliminare.
2. È possibile effettuare un’eliminazione in blocco selezionando più commenti e scegliendo Sposta nel cestino in Azioni in blocco .
3. Se vuoi solo nascondere i commenti senza eliminarli, può esserti utile un plugin come Simple Comment Editing o una soluzione CSS personalizzata.

Domande e risposte

1. Come posso disabilitare i commenti su tutti i post? Utilizza il plugin Disable Comments o regola le opzioni di modifica in blocco per più post.
2. Posso disattivare i commenti solo per i post futuri? Sì, vai su Impostazioni > Discussione e deseleziona Consenti alle persone di inviare commenti sui nuovi post .
3. Come faccio a disabilitare i commenti sui tipi di post personalizzati? Alcuni temi offrono opzioni per i tipi di post personalizzati , oppure puoi usare un plugin per gestire queste impostazioni.
4. Come posso rimuovere i commenti da post specifici? Utilizza Modifica rapida nelle impostazioni del post o della pagina per disabilitare i commenti su post specifici .
5. Qual è il miglior plugin per disabilitare i commenti in WordPress? Il plugin Disable Comments è popolare per la gestione dei commenti in tutto il sito.
6. Posso nascondere i commenti esistenti senza eliminarli? Sì, puoi usare CSS o plugin come Simple Comment Editing per nasconderli.
7. C’è un modo per disattivare in blocco i commenti sulle pagine? Sì, vai su Tutte le pagine , seleziona più pagine e usa Azioni in blocco per disattivare i commenti.
8. Come posso disattivare i commenti per i file multimediali? Plugin come Disable Comments ti consentono di disattivare i commenti sui file multimediali nel tuo sito.
9. Cosa succede se disattivo i commenti sui vecchi post? Disabilitando i commenti, questi verranno chiusi per tutti gli utenti, ma i commenti esistenti potrebbero essere ancora visibili.
10. Come faccio a modificare le impostazioni dei commenti sul mio sito WordPress? Accedi a Impostazioni > Discussione nella dashboard di WordPress per gestire le impostazioni dei commenti .

Un cliente ha chiesto di implementare un servizio di terza parte sul suo sito web sotto la nostra gestione siti (nel caso specifico si tratta di Fidelo).

Inserendo gli script forniti da questo software, nel momento in cui poi si pubblica la pagina e controllando con la console, lo script appare variato con l’aggiunta del paramento “&amp%3B” al posto della “&” originaria presente nello script fornito.

Questa piccola variazione non rende possibile la ottimale esecuzione dello script fornito sulla pagina web.

In questo articolo forniamo la soluzione che abbiamo implementato

Cos’è il parametro &amp%3B ?

Il parametro &amp%3B appare spesso nei collegamenti URL a causa di una codifica errata del carattere &. Per rimuoverlo da uno script, è necessario decodificare l’URL e rimuovere il parametro indesiderato.

Come eliminarlo in Javasript?

Ecco i passaggi per farlo in JavaScript:

1. Decodifica l’URL: Usa decodeURIComponent() per trasformare l’URL codificato nel formato leggibile.
2. Rimuovi i parametri non necessari: Se devi rimuovere un parametro specifico, puoi manipolare la stringa dell’URL.

Ecco un esempio di script:

// Supponiamo che questo sia l'URL con il parametro errato
let url = "https://example.com?param1=value1&amp%3Bparam2=value2";

// Decodifica l'URL
let decodedUrl = decodeURIComponent(url);

// Rimuovi 'amp%3B' sostituendolo con il simbolo '&' corretto
let cleanedUrl = decodedUrl.replace("amp;", "&");

// Output finale dell'URL pulito
console.log(cleanedUrl);

Questo script:

• Decodifica l’URL.
• Rimuove amp;, ripristinando il simbolo & nella posizione corretta.

Come togliere &amp%3B in WordPress

Per rimuovere &amp%3B da un URL in WordPress, puoi seguire diverse strade a seconda di dove il problema si presenta. Ecco alcune soluzioni comuni:

1. Funzioni di PHP nel file functions.php

Puoi aggiungere una funzione nel file functions.php del tuo tema per rimuovere o correggere il parametro &amp%3B dagli URL.

Ecco un esempio di codice che decodifica l’URL e rimuove &amp%3B prima che venga visualizzato:

// Aggiungi questa funzione nel file functions.php del tuo tema
function clean_amp_param($url) {
    // Decodifica l'URL
    $decoded_url = urldecode($url);
    
    // Rimuovi 'amp;' e sostituiscilo con '&'
    $cleaned_url = str_replace('amp;', '&', $decoded_url);
    
    return $cleaned_url;
}

// Applica la funzione agli URL generati da WordPress
add_filter('the_permalink', 'clean_amp_param');
add_filter('wp_get_attachment_url', 'clean_amp_param');

Questa funzione:

• Decodifica l’URL utilizzando urldecode().
• Sostituisce amp; con il simbolo corretto &.
• Usa il filtro the_permalink e wp_get_attachment_url per applicarlo agli URL generati da WordPress.

2. Aggiunta di un plugin

Se non vuoi modificare direttamente i file del tema, puoi utilizzare un plugin come “Code Snippets“ per aggiungere facilmente codice PHP senza modificare il file functions.php.

1. Installa il plugin “Code Snippets” da WordPress.
2. Crea un nuovo snippet con il codice sopra.
3. Salva e attiva lo snippet.

3. Controlla i link nei contenuti

Se l’errore &amp%3B compare nei link all’interno del contenuto del sito (come post o pagine), è possibile che siano stati aggiunti manualmente o generati da shortcode o plugin. Puoi fare quanto segue:

• Cerca e sostituisci: Utilizza un plugin come Better Search Replace per cercare nei contenuti del database &amp%3B e sostituirlo con &.

4. Verifica i plugin AMP

Se stai utilizzando un plugin che gestisce pagine AMP, controlla le impostazioni del plugin o aggiorna il plugin stesso, poiché potrebbe essere la fonte del problema.

5. Cache e CDN

A volte questo tipo di errore può essere causato dalla cache o da un CDN che manipola gli URL. Assicurati di svuotare la cache di WordPress e, se usi un CDN, controlla che non ci siano regole di riscrittura problematiche.

Guida all’aggiunta di campi personalizzati tramite codice e plugin WordPress

Aggiungere campi in WooCommerce permette al sito web di raccogliere informazioni aggiuntive dai clienti, migliorando l’esperienza di acquisto e la gestione degli ordini.

Questa guida esplorerà come aggiungere campi personalizzati nelle diverse aree di WooCommerce: al checkout, nell’account utente e nel form di registrazione.

Aggiungere campi al checkout di WooCommerce

E’ possibile aggiungere campi al check out di WooCommerce utilizzando il filtro woocommerce_checkout_fields o un plugin dedicato. Ecco qui sotto un esempio di codice php per aggiungere un campo personalizzato:

add_filter( 'woocommerce_checkout_fields' , 'custom_checkout_field' );

function custom_checkout_field( $fields ) {
    $fields['billing']['custom_field'] = array(
        'label'     => __('Campo Personalizzato', 'woocommerce'),
        'placeholder'   => _x('Inserisci il dato', 'placeholder', 'woocommerce'),
        'required'  => true,
        'clear'     => false,
        'type'      => 'text',
        'priority'  => 22,
    );
    return $fields;
}

Aggiungere campi in account WooCommerce

Per aggiungere campi personalizzati alla pagina dell’account utente, si può sfruttare il filtro woocommerce_edit_account_form. Ecco come potresti fare:

add_action( 'woocommerce_edit_account_form', 'custom_user_profile_fields' );

function custom_user_profile_fields() {
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="custom_field"><?php _e('Campo Personalizzato', 'woocommerce'); ?>&nbsp;<span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="custom_field" id="custom_field" value="">
    </p>
    <?php
}

Aggiungere campi al form di registrazione di WooCommerce

L’aggiunta di campi al form di registrazione richiede l’uso del filtro woocommerce_register_form. Di seguito un esempio di come modificare il file aggiungendo un campo:

add_action( 'woocommerce_register_form', 'add_custom_registration_fields' );

function add_custom_registration_fields() {
    ?>
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="reg_custom_field"><?php _e('Campo Personalizzato', 'woocommerce'); ?><span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="custom_field" id="reg_custom_field" value="<?php if ( ! empty( $_POST['custom_field'] ) ) echo esc_attr( $_POST['custom_field'] ); ?>" />
    </p>
    <?php
}

Salvare i dati dei campi personalizzati

Indipendentemente dalla posizione dei campi personalizzati, è fondamentale salvare i dati inseriti dagli utenti.

Questo può essere fatto tramite l’hook woocommerce_checkout_update_order_meta per i campi di checkout, woocommerce_save_account_details per i campi dell’account utente e woocommerce_created_customer per i campi di registrazione.

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );

function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['custom_field'] ) ) {
        update_post_meta( $order_id, 'Custom Field', sanitize_text_field( $_POST['custom_field'] ) );
    }
}

L’implementazione di campi personalizzati in WooCommerce può significativamente arricchire la raccolta dati e migliorare la gestione degli ordini, portando a una maggiore soddisfazione del cliente e una migliore efficienza operativa. Utilizza il codice adeguatamente e testa sempre le modifiche in un ambiente di staging prima di applicarle al tuo sito live.

Aggiungere campi personalizzati con plugin

Aggiungere campi personalizzati in WooCommerce può essere gestito anche attraverso l’uso di plugin, che offrono una soluzione più accessibile per utenti meno esperti di codice o per chi cerca una via più rapida e intuitiva. I plugin permettono di estendere le funzionalità di WooCommerce senza dover scrivere codice personalizzato. Di seguito, esploreremo come utilizzare i plugin per aggiungere campi personalizzati in diverse aree di WooCommerce.

1. Aggiungere Campi al Checkout con Plugin

WooCommerce Checkout Field Editor è uno dei plugin più popolari per personalizzare i campi della pagina di checkout. Con il plugin checkout field editor , puoi aggiungere, eliminare o modificare campi nella pagina di checkout. Ecco come utilizzarlo:

• Installare il plugin e attivarlo da WordPress Plugin Directory.
• Vai a WooCommerce > Impostazioni > Checkout Fields.
• Qui, puoi aggiungere nuovi campi utilizzando l’interfaccia del plugin. Scegli il tipo di campo, inserisci etichette e decidi se il campo è obbligatorio.
• Salva le modifiche per applicarle.

2. Aggiungere Campi all’Account Utente con Plugin

WooCommerce Edit Account Page permette di personalizzare facilmente la pagina dell’account utente aggiungendo campi personalizzati. Dopo aver installato e attivato il plugin:

• Accedi alla configurazione del plugin tramite il menu di WooCommerce.
• Segui le istruzioni per aggiungere nuovi campi alla pagina del profilo utente.
• Configura le impostazioni per ciascun campo, come obbligatorio o facoltativo, e salva.

3. Aggiungere Campi al Form di Registrazione con Plugin

Per aggiungere campi personalizzati al form di registrazione, puoi utilizzare Profile Builder – User Profile & User Registration Forms. Questo plugin non è specifico per WooCommerce ma è pienamente compatibile e offre la flessibilità per aggiungere campi al form di registrazione di WooCommerce:

• Dopo aver installato e attivato il plugin, vai a Profile Builder > Form Fields.
• Qui, puoi aggiungere campi personalizzati che appariranno nel form di registrazione.
• Configura ogni campo secondo le tue necessità e salva le modifiche.

Salvare e Gestire i Dati dei Campi Personalizzati

La maggior parte dei plugin per campi personalizzati in WooCommerce salverà automaticamente i dati inseriti dagli utenti nei campi personalizzati, senza bisogno di codice o componenti aggiuntivi. Inoltre, offrono opzioni per visualizzare e gestire questi dati nel backend di WordPress, facilitando la gestione degli ordini e dei profili utente.

Conclusioni

L’utilizzo di plugin per aggiungere campi personalizzati in WooCommerce è una soluzione pratica e accessibile che può semplificare notevolmente il processo di personalizzazione del tuo e-commerce. Che tu voglia raccogliere informazioni aggiuntive durante il checkout, migliorare i profili utente o personalizzare il form di registrazione, esiste un plugin che può soddisfare le tue esigenze. Ricorda sempre di testare ogni nuova funzionalità in un ambiente di staging prima di applicarla al tuo sito live per garantire la migliore esperienza possibile ai tuoi clienti.

La stampa di documenti web rimane un’esigenza frequente per molti utenti.

Che sia per archiviare informazioni, per condivisione o per analisi offline, la possibilità di stampare pagine web facilmente è fondamentale.

In questo articolo, esploreremo come stampare le pagine web in generale e il motivo per cui l’inserimento di un link di stampa è utile in una pagina web e forniremo il codice su come implementarlo.

Indice

• Metodi generali per stampare una pagina web
• Perché includere un link di stampa?
• Il codice per includere il link di stampa

Metodi generali per stampare una pagina web

Stampa standard di una pagina web: Oltre al link di stampa personalizzato che vedremo in seguito, è importante conoscere i metodi standard per stampare una pagina web. Questi metodi si basano sulle funzionalità incorporate nei vari browser web.

1. Uso delle scorciatoie da tastiera:

• Windows/Linux: La maggior parte dei browser supporta la scorciatoia CTRL + P per aprire il dialogo di stampa.
• Mac: Gli utenti Mac possono utilizzare Command + P per lo stesso scopo.

2. Utilizzo del menu del browser:

• In tutti i browser moderni, è possibile accedere alla funzione di stampa navigando nel menu. Questo può essere generalmente trovato cliccando sull’icona a forma di tre punti o tre linee orizzontali situata nell’angolo superiore destro del browser.
• Seleziona “Stampa” dal menu per aprire il dialogo di stampa.

3. Anteprima di stampa e opzioni:

• Quando si apre il dialogo di stampa, gli utenti hanno la possibilità di scegliere diverse impostazioni. Questo può includere la selezione della stampante, il numero di copie, le pagine da stampare (tutte o una selezione) e altre preferenze specifiche come l’orientamento della pagina (verticale o orizzontale) e la dimensione della carta.
• Molti browser offrono anche un’anteprima di stampa, che consente agli utenti di vedere come apparirà il documento stampato prima di procedere con la stampa effettiva.

4. Stampa di elementi specifici:

• Alcuni browser permettono di stampare specifici elementi di una pagina web, come immagini o testi selezionati, cliccando con il tasto destro sull’elemento e scegliendo “Stampa” dal menu contestuale.

5. Stampa in PDF:

• Invece di stampare su carta, è possibile salvare la pagina web come PDF utilizzando l’opzione di stampa. Scegli “Salva come PDF” o una opzione simile nel menu della stampante per creare un file PDF della pagina web.

Conoscere le varie opzioni e metodi di stampa standard è utile per tutti gli utenti che interagiscono con contenuti web.

Mentre il link di stampa personalizzato fornisce un accesso rapido e personalizzato, le funzioni di stampa integrate offrono flessibilità e controllo per soddisfare diverse esigenze di stampa.

Perché includere un link di stampa?

1. Accessibilità migliorata: Utenti meno esperti potrebbero non essere a conoscenza delle scorciatoie da tastiera o delle funzioni di stampa del browser.
2. Convenienza: Permette agli utenti di stampare con un singolo clic, migliorando l’usabilità del sito.
3. Personalizzazione: Attraverso l’uso di CSS, è possibile personalizzare l’output di stampa, garantendo che solo le parti essenziali della pagina vengano stampate.

Il codice per includere il link di stampa

Implementazione di base: La funzione di stampa può essere attivata in una pagina web utilizzando JavaScript. Ecco un esempio di codice base che può essere inserito in qualsiasi pagina HTML:

<!DOCTYPE html>
<html>
<head>
    <title>La tua Pagina Web</title>
</head>
<body>
    <p>Contenuto della tua pagina...</p>
    <a href="javascript:window.print()">Stampa questa pagina</a>
</body>
</html>

Questo codice crea un link che, quando cliccato, attiva la funzione di stampa del browser, equivalente a premere CTRL+P su PC o Command+P su Mac.

Personalizzazione per diversi browser: Sebbene il codice di base funzioni su molti browser moderni, alcune personalizzazioni possono essere necessarie per ottimizzare l’esperienza utente su diversi browser.

1. Chrome & Firefox:
   • Nessuna modifica aggiuntiva necessaria. Il codice di base dovrebbe funzionare correttamente.
2. Microsoft Edge:
   • Può essere necessario assicurarsi che le impostazioni di stampa del browser siano configurate correttamente per consentire una stampa fluida.
3. Safari (per utenti Mac):
   • Considera l’aggiunta di un avviso per gli utenti Mac che specifica di utilizzare Command+P, poiché il comportamento può variare leggermente.

Personalizzazione CSS per la stampa: Per assicurarsi che solo le parti essenziali della pagina vengano stampate, è possibile utilizzare CSS per nascondere elementi non necessari (come pulsanti o intestazioni) nella modalità di stampa.

Ecco un esempio:

@media print {
    .no-print { 
        display: none; 
    }
}

Includere un link di stampa in una pagina web non solo migliora l’accessibilità e la comodità per gli utenti ma garantisce anche che l’output stampato sia del formato desiderato.

Con poche righe di codice, puoi migliorare significativamente l’esperienza utente del tuo sito web.

Spero di essere stato utile. Se l’articolo ti è piaciuto condividilo.

Il 9 gennaio 2024, Google ha annunciato la chiusura dei siti web creati tramite Google Business Profiles, imponendo alle imprese di ricostruire i propri siti utilizzando alternative piattaforme entro marzo.

Scadenza imminente

A partire da marzo, i siti web creati tramite Google Business Profiles saranno disattivati, e i visitatori che tentano di accedervi verranno automaticamente reindirizzati al profilo aziendale su Google fino al 10 giugno. Dopo questa data, i visitatori si troveranno di fronte a un messaggio di “pagina non trovata”.

Necessità di ricostruzione del sito web

Le imprese desiderose di mantenere una presenza online dovranno ricostruire i propri siti utilizzando piattaforme alternative. Questa migrazione è essenziale per evitare interruzioni nell’accesso online alle informazioni commerciali.

Strumenti alternativi raccomandati da Google

Per facilitare questa transizione, Google ha suggerito l’utilizzo di alcune piattaforme alternative per la creazione di nuovi siti web aziendali.

Tra le opzioni consigliate figurano Wix, Squarespace, GoDaddy, Google Sites, Shopify e WordPress.

La creazione di un nuovo sito e l’aggiornamento del profilo aziendale con l’indirizzo del nuovo sito devono essere completati entro la scadenza fissata per garantire una transizione senza intoppi.

Implicazioni per le campagne pubblicitarie

Per le imprese che gestiscono campagne pubblicitarie collegate a un sito web da Google Business Profile, è essenziale cambiare il link entro il 1° marzo per evitare interruzioni nelle pubblicità o optare per sospendere temporaneamente le campagne fino a quando il nuovo sito non sarà operativo.

Gestione dei domini di terze parti

Se è stato configurato un dominio personalizzato per indirizzare il traffico al sito web da Google Business Profile, i visitatori saranno reindirizzati al profilo aziendale fino al 10 giugno. Per facilitare questa transizione, si consiglia di accedere all’account della società di hosting e selezionare l’opzione “Reindirizza” o una funzione simile per indirizzare il dominio di terze parti a un sito web diverso prima della data specificata.

Dichiarazioni di Google

Un portavoce di Google ha spiegato che i siti web creati tramite Google Business Profiles sono essenzialmente siti web di base alimentati dalle informazioni presenti nel profilo aziendale. I domini con estensione business.site e negocio.site saranno rimossi dal campo del sito web nel profilo aziendale a marzo, incoraggiando le aziende a aggiornare il profilo con un nuovo sito web.

In conclusione, la chiusura dei siti web creati con Google Business Profiles pone una sfida significativa per le imprese, richiedendo una rapida adozione di alternative per garantire la continuità della presenza online. La tempistica ristretta impone alle aziende di agire prontamente per evitare interruzioni nel servizio e mantenere una presenza digitale solida.

Nel vasto panorama digitale, dove l’occhio naviga attraverso schermi e testi virtuali, l’aspetto tipografico gioca un ruolo cruciale nella comunicazione visiva.

Questo articolo si propone di continuare l’esplorazione dell’importanza delle risorse tipografiche online, con particolare attenzione a Google Fonts e ad altre fonti preziose.

Google Fonts: Una panoramica

Google Fonts è diventato uno strumento essenziale per progettisti e sviluppatori web grazie alla sua vasta gamma di caratteri di alta qualità, alla facilità di implementazione, all’accessibilità gratuita e agli strumenti di personalizzazione che offre.

Questo servizio ha contribuito significativamente a elevare lo standard tipografico su Internet, permettendo a chiunque di arricchire visivamente i propri progetti digitali.

Origini e Missione di Google Fonts

Google Fonts è un servizio gratuito offerto da Google che fornisce una vasta collezione di caratteri tipografici di alta qualità per l’utilizzo online.

Lanciato nel 2010, l’obiettivo principale di Google Fonts è stato quello di rendere accessibili e utilizzabili da chiunque una varietà di font eccellenti, contribuendo così a migliorare la diversità tipografica sul web. E’ stato anche un modo per suggerire agli sviluppatori web caratteri maggiormente leggibili e rispettosi di una migliore esperienza utente.

La Vasta Raccolta di Caratteri

Uno dei principali motivi per cui Google Fonts è diventato uno strumento essenziale è la sua ampia selezione di caratteri.

Attualmente, Google Fonts offre più di 1000 font diversi, inclusi stili di caratteri serif, sans-serif, display, script e molto altro.

Questa diversità consente ai progettisti e agli sviluppatori di trovare il carattere perfetto per adattarsi a una vasta gamma di progetti e stili creativi.

Facilità di Implementazione

Google Fonts si distingue anche per la facilità di implementazione. Utilizzare un font da Google Fonts è un processo semplice e veloce.

Gli sviluppatori possono incorporare i font direttamente nei loro siti web tramite un link o un codice JavaScript, riducendo notevolmente il carico di lavoro associato alla gestione dei caratteri tipografici.

Accessibilità e Gratuità

Un altro aspetto chiave è l’accessibilità. Tutti i font di Google Fonts sono gratuiti e possono essere utilizzati sia per scopi personali che commerciali.

Questa democratizzazione dell’accesso a font di qualità ha reso Google Fonts una risorsa ampiamente adottata da progettisti e sviluppatori di tutto il mondo, indipendentemente dalle dimensioni del progetto o dal budget disponibile.

Strumenti di Personalizzazione

Google Fonts offre anche strumenti di personalizzazione che consentono agli utenti di sperimentare con l’aspetto dei font prima di implementarli.

Gli sviluppatori possono regolare la dimensione, lo spaziamento e altri parametri per ottenere esattamente l’effetto desiderato.

Integrazione con Altri Strumenti Google

La sinergia con altri strumenti e servizi Google, come Google Docs , ha ulteriormente solidificato la posizione di Google Fonts come uno strumento essenziale.

La facilità con cui è possibile sincronizzare e utilizzare gli stessi font su diverse piattaforme semplifica il flusso di lavoro per i professionisti creativi.

Accesso e Integrazione di Google Fonts nei Progetti Web

Seguendo questi passaggi, sarai in grado di accedere a Google Fonts, selezionare i caratteri desiderati e integrarli nei tuoi progetti web in modo efficiente e personalizzato.

Accesso a Google Fonts

Visita il Sito Web di Google Fonts: Accedi al sito web di Google Fonts utilizzando qualsiasi browser web.

Esplora la Raccolta: Naviga attraverso la vasta raccolta di caratteri disponibili. Puoi esplorare i font per categoria, stile o popolarità.

Selezione dei Caratteri desiderati: Clicca sui caratteri che desideri utilizzare. Apparirà un riquadro sulla destra con opzioni di personalizzazione e dettagli sul carattere selezionato.

Aggiungi i Caratteri al Tuo Progetto: Dopo aver personalizzato i parametri (se desiderato), clicca sul pulsante “Seleziona questo stile” accanto al carattere. Puoi selezionare più stili o varianti per ciascun carattere.

Rivedi la Selezione: Una volta soddisfatto della tua selezione, fai clic sull’icona dell’asta nella parte inferiore dello schermo per aprire il riquadro delle selezioni. Qui, troverai tutti i caratteri che hai scelto.

Ottieni il Codice di Incorporamento: Scorri verso il basso del riquadro delle selezioni e troverai un blocco di codice. Questo codice incorporerà i caratteri selezionati nel tuo progetto web.

Integrazione nei Progetti Web

Una volta selezionati i caratteri desiderati, ecco come integrarli nei tuoi progetti web:

Incorpora il Codice nel Tuo HTML/CSS: Copia il blocco di codice fornito da Google Fonts e incollalo nell’area <head> del tuo documento HTML. Questo codice conterrà un link alle risorse del carattere

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=NomeCarattere"> 

Assicurati di sostituire “NomeCarattere” con il nome effettivo del carattere che hai scelto.

Applica il Carattere nei Tuoi Stili CSS: Nel tuo file CSS, puoi applicare il carattere selezionato a elementi specifici utilizzando la proprietà font-family

body { font-family: 'NomeCarattere', sans-serif; } 

Ancora una volta, sostituisci ‘NomeCarattere’ con il nome effettivo del carattere.

Assicurati che i Caratteri si Carichino Correttamente: Dopo aver integrato i caratteri, assicurati che si stiano caricando correttamente. Puoi farlo ispezionando la console del browser per eventuali errori di caricamento delle risorse.

Personalizza ulteriormente se Necessario: Alcuni caratteri possono avere varianti o stili aggiuntivi che puoi utilizzare per personalizzare ulteriormente l’aspetto del testo nel tuo progetto.

Test e Ottimizzazione: Testa il tuo sito su diversi dispositivi e browser per assicurarti che i caratteri si visualizzino correttamente. Inoltre, ottimizza il caricamento dei caratteri per garantire prestazioni efficienti.

Vantaggi di utilizzare Google Fonts nei progetti web

L’utilizzo di Google Fonts offre una serie di vantaggi che vanno oltre la mera selezione di caratteri, includendo la facilità di implementazione, la compatibilità e strumenti di personalizzazione che contribuiscono a migliorare l’aspetto e le prestazioni complessive dei progetti web.

1. Vasta Selezione di Caratteri: Google Fonts offre una vasta e diversificata selezione di caratteri, che include stili serif, sans-serif, display, script e molto altro. Questa varietà consente ai progettisti di trovare il carattere perfetto per adattarsi al tono e allo stile del loro progetto.
2. Accessibilità Gratuita: Tutti i caratteri presenti su Google Fonts sono gratuiti e disponibili per l’utilizzo sia a scopi personali che commerciali. Ciò democratizza l’accesso a font di alta qualità, consentendo a chiunque, indipendentemente dal budget, di migliorare l’aspetto del proprio sito web.
3. Facilità di Implementazione: L’integrazione di Google Fonts nei progetti web è estremamente semplice. Basta copiare e incollare un breve codice nel tuo HTML, e il carattere sarà immediatamente disponibile per l’uso. Ciò riduce notevolmente il carico di lavoro associato alla gestione delle risorse tipografiche.
4. Strumenti di Personalizzazione: Google Fonts offre strumenti di personalizzazione che consentono agli utenti di sperimentare con l’aspetto dei caratteri prima di implementarli effettivamente. Puoi regolare la dimensione del testo, lo spaziamento e altre opzioni per ottenere esattamente l’effetto desiderato.
5. Ottimizzazione per la Velocità di Caricamento: Google Fonts è progettato per ottimizzare la velocità di caricamento delle pagine web. Le risorse tipografiche sono distribuite tramite una rete di server globale di Google, garantendo un accesso rapido e affidabile ai font da parte degli utenti in tutto il mondo.
6. Compatibilità con Tutti i Browser: I font di Google Fonts sono progettati per essere compatibili con tutti i principali browser web. Ciò assicura che il tuo testo apparirà coerente e leggibile su diverse piattaforme e dispositivi.
7. Caratteri Responsivi: Molti dei caratteri presenti su Google Fonts sono progettati con la responsività in mente. Ciò significa che i caratteri si adattano bene a schermi di diverse dimensioni e risoluzioni, garantendo un’esperienza utente ottimale su dispositivi mobili e desktop.
8. Aggiornamenti Automatici: Gli utenti non devono preoccuparsi di gestire gli aggiornamenti dei caratteri. Se Google aggiorna un carattere, la versione più recente verrà automaticamente utilizzata nei tuoi progetti senza richiedere interventi manuali.
9. Sincronizzazione con Altri Servizi Google: La sincronizzazione con altri servizi Google, come Google Docs e Google Slides, semplifica la coerenza tipografica tra diverse piattaforme e documenti.
10. Supporto Internazionale: Google Fonts supporta numerosi caratteri di diverse lingue e alfabeti, garantendo che i siti web siano accessibili e leggibili a livello globale.

Altre risorse tipografiche online

Oltre a Google Fonts, esistono diverse altre risorse online che offrono una vasta gamma di tipi di carattere per arricchire i progetti creativi di progettisti e sviluppatori.

Esplorare queste risorse consente ai progettisti e agli sviluppatori di accedere a una varietà di opzioni per soddisfare le esigenze specifiche dei loro progetti. Ognuna di queste risorse ha il proprio stile e focus, contribuendo a rendere il mondo della tipografia online ricco di possibilità creative.

Ecco alcune risorse degne di nota:

1. Adobe Fonts (Ex Typekit)

Adobe Fonts offre una vasta collezione di caratteri professionali inclusi nell’abbonamento Adobe Creative Cloud. Con una vasta gamma di opzioni, Adobe Fonts è particolarmente apprezzato per la sua qualità e la sinergia con altri strumenti Adobe.

2. Font Squirrel

Font Squirrel è una piattaforma che fornisce font gratuiti e di alta qualità con licenza commerciale gratuita. La sua libreria comprende una varietà di stili e categorie, rendendolo un’ottima risorsa per progetti creativi e commerciali.

3. Dafont

Dafont è una risorsa che offre una vasta collezione di font gratuiti, organizzati per categorie tematiche. È un luogo ideale per trovare tipi di carattere unici e creativi per progetti specifici.

4. Font Awesome

Font Awesome non offre solo icone, ma include anche una libreria di tipi di carattere. È ampiamente utilizzato per progetti che richiedono icone scalabili e caratteri chiari e leggibili.

5. FontSpace

FontSpace è una piattaforma che consente agli utenti di scoprire e condividere font gratuiti. Con una comunità attiva, offre una vasta selezione di stili e categorie.

6. 1001 Free Fonts

1001 Free Fonts è una risorsa che offre migliaia di font gratuiti, suddivisi in diverse categorie e stili. È uno dei siti più vecchi e affidabili per trovare una vasta gamma di tipi di carattere.

7. Typekit di Adobe (Ora Adobe Fonts)

Originariamente conosciuto come Typekit, Adobe Fonts è ora integrato nell’ecosistema Adobe. Offre una vasta gamma di caratteri di alta qualità che si integrano perfettamente con gli strumenti Adobe.

8. Fontfabric

Fontfabric è uno studio di design che offre una selezione di font di alta qualità, alcuni gratuiti e altri a pagamento. La qualità e l’estetica dei loro caratteri li rendono ideali per progetti che richiedono un tocco di design unico.

9. Lost Type

Lost Type è un collettivo di designer indipendenti che offrono una varietà di caratteri unici e creativi. Il modello di pagamento “paga ciò che vuoi” è un approccio interessante per supportare i designer indipendenti.

10. MyFonts

MyFonts è una piattaforma che offre una vasta collezione di caratteri, sia gratuiti che a pagamento. È apprezzato per la sua varietà e la possibilità di visualizzare in anteprima il testo con il carattere selezionato.

Consigli per la scelta dei caratteri

Riassumiamo di seguito alcuni concetti già affrontati nella lezione precedente e che valgono, ovviamente, anche nel caso di utilizzo di Google Fonts.

1. Considera il Contesto del Progetto: Adatta il carattere al contesto del progetto. Ad esempio, un font formale potrebbe essere più appropriato per documenti legali, mentre un font più creativo potrebbe essere adatto per progetti artistici.

2. Pondera Leggibilità e Stile: Assicurati che il carattere sia leggibile, specialmente se è destinato a testo lungo o a informazioni cruciali. La leggibilità dovrebbe sempre avere la precedenza, ma cerca di bilanciare ciò con uno stile che si adatti al tono del progetto.

3. Conosci il Pubblico di Riferimento: Considera il tuo pubblico di riferimento. Adatta i caratteri in base all’età, agli interessi e alle preferenze del pubblico a cui ti rivolgi.

4. Abbinamento di Caratteri: Se stai utilizzando più di un carattere, assicurati che abbiano un buon abbinamento. Trova caratteri che siano complementari dal punto di vista stilistico e che creino una buona armonia visiva.

5. Stile del Marchio: Se il progetto è legato a un marchio, rifletti sullo stile del marchio. La coerenza tra il carattere utilizzato e l’identità del marchio è fondamentale per la riconoscibilità.

6. Presta Attenzione ai Dettagli: Osserva i dettagli del carattere, come spaziatura, altezza delle lettere (ascendenti e discendenti), e la forma delle lettere stesse. Dettagli curati contribuiscono a una migliore estetica.

7. Esperimenta con Caratteri Unici: In progetti creativi, non aver paura di sperimentare con caratteri unici. Tuttavia, assicurati che la creatività non comprometta la leggibilità.

8. Valuta la Scalabilità: Assicurati che il carattere sia scalabile e si adatti bene a diverse dimensioni. Ciò è particolarmente importante per i progetti web che devono essere visualizzati su dispositivi con schermi di diverse dimensioni.

9. Testa su Diverse Piattaforme: Prima di stabilire definitivamente i caratteri, testa la loro resa su diverse piattaforme e dispositivi. Ciò aiuterà a identificare eventuali problemi di compatibilità o resa visiva.

10. Ascolta il Feedback: Se possibile, raccogli feedback da colleghi o utenti beta. L’opinione di altre persone può offrire prospettive preziose sulla percezione del design.

11. Ricorda la Funzionalità: Considera la funzionalità del progetto. Ad esempio, i caratteri utilizzati in un sito web dovrebbero essere adatti anche per la lettura online.

12. Tieni Conto della Storia del Carattere: Alcuni caratteri hanno una storia o una connotazione specifica. Considera il contesto storico o culturale del carattere e assicurati che sia appropriato per il tuo progetto.

Ricorda che la scelta del carattere è un processo creativo e soggettivo. Esplora diverse opzioni, sperimenta e rifletti sul messaggio che vuoi trasmettere attraverso il design.

Best Practices per l’utilizzo di risorse tipografiche

Ottimizzare l’utilizzo delle risorse tipografiche è fondamentale per garantire che il tuo sito mantenga alte prestazioni senza compromettere l’esperienza dell’utente.

Sperimenta con questi suggerimenti e adatta l’approccio alle esigenze specifiche del tuo progetto.

Limita il Numero di Caratteri: Utilizza solo i caratteri necessari per il tuo progetto. Riduci al minimo il numero di stili e varianti per evitare un carico eccessivo.

Scelta Selettiva dei Caratteri: Scegli caratteri che contribuiscano al tuo messaggio senza compromettere la leggibilità. Evita l’eccesso di ornamenti che possono appesantire il sito.

Caricamento Asincrono: Carica i file di font in modo asincrono per evitare di bloccare il rendering della pagina. Ciò migliorerà l’esperienza dell’utente durante il caricamento del sito.

Compressione dei File di Font: Comprimi i file di font per ridurre le dimensioni di download. Puoi utilizzare strumenti online o plugin che automatizzano questo processo.

Utilizzo di Font WOFF2: Preferisci l’uso di file di font nel formato WOFF2, che offre una compressione migliore rispetto ad altri formati.

Cache del Browser: Configura la cache del browser per consentire il salvataggio locale dei file di font. Questo ridurrà i tempi di caricamento durante le visite successive.

Lazy Loading: Implementa il lazy loading per i file di font, in modo che vengano scaricati solo quando sono necessari, migliorando le prestazioni iniziali della pagina.

Scegliere il Formato Appropriato: Utilizza il formato di file di font più adatto alle esigenze del tuo progetto. Alcuni formati sono più efficienti per determinati scopi.

Subset di Caratteri su Pagina: Seleziona solo i caratteri necessari per una pagina specifica, piuttosto che caricare tutti i caratteri disponibili. Ciò ridurrà il carico iniziale.

Utilizzo di Font System UI: Quando possibile, utilizza i font predefiniti del sistema (come Arial, Helvetica) per ridurre la dipendenza da risorse esterne.

Analizza le Prestazioni: Monitora costantemente le prestazioni del tuo sito utilizzando strumenti come Google PageSpeed Insights o Lighthouse. Identifica e risolvi eventuali problemi legati ai font.

Caricamento Condizionale: Carica i caratteri solo per i dispositivi o le risoluzioni necessarie, utilizzando media queries o script di caricamento condizionale.

Ottimizzazione del FOUT/FOIT: Scegli tra Flash of Unstyled Text (FOUT) o Flash of Invisible Text (FOIT) in base alle preferenze del tuo progetto e all’esperienza utente desiderata.

Esplora Strumenti di Analisi: Utilizza strumenti di analisi delle prestazioni per identificare le aree che richiedono ottimizzazione specifica, garantendo un utilizzo efficiente delle risorse tipografiche.

Vai alla settima lezione >>

Torna alla pagina principale del corso di web design