{"id":2208,"date":"2019-12-02T10:30:50","date_gmt":"2019-12-02T09:30:50","guid":{"rendered":"https:\/\/www.eugigufo.net\/it\/?page_id=2208"},"modified":"2024-10-01T13:58:27","modified_gmt":"2024-10-01T11:58:27","slug":"paragrafo19","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo19\/","title":{"rendered":"\u00a7\u00a019. Pubblicare correttamente i\u00a0contatti sui siti"},"content":{"rendered":"

Sul 99% dei siti web personali e aziendali vengono pubblicati i contatti dei proprietari o amministratori. L’esperienza pluridecennale nella navigazione su internet ha però permesso al sottoscritto di constatare un triste fatto: una notevole parte dei web-masters non sa pubblicare i contatti in modo corretto.
\nCerto, comprendo che si tratta di un aspetto tecnologicamente banalissimo. Ma, data la ricorrenza del problema, bisogna parlarne.
\nNel presente paragrafo facciamo un tentativo di formulare alcuni principi fondamentali in materia. Essi, logicamente, si dividono in due tipologie: tipografici e funzionali. Per rendere l’esposizione più organizzata, sarebbe più opportuno trattare quei principi per ogni tipo di contatto.<\/p>\n

1. I numeri di telefono<\/b>
\nI numeri di telefono pubblicati sul sito devono essere a) leggibili e b) cliccabili. La leggibilità dei numeri è tuttora importante perché non possiamo mai immaginare la situazione in cui si trova il nostro visitatore. Potrebbe avere la necessità di leggere il numero per poi dettarlo alla nonna che chiama dall’altra parte del mondo. Oppure leggerlo dallo schermo del computer per inserirlo manualmente nella memoria del telefono. In tal senso la tradizione tipicamente italiana di scrivere il numero di telefono in una sequenza di cifre continua è da considerare sbagliata: essa complica la vita dell’utente, costringendolo a uno sforzo inutile.
\nProvate a essere obiettivi e dire qual è il formato meglio leggibile:
\n+393337198198
\n+39 333 7 198 198
\n+39.333.7.198.198
\n(+39) 3337198198
\nLa prima e la quarta versione corrispondono alla tradizione tipografica italiana, mentre la più leggibile è – secondo me – la seconda. La persona che legge non deve cercare disperatamente il punto dove si è fermata a leggere, temendo di avere saltato o ripetuto qualche cifra.
\nLa cliccabilità dei numeri di telefono è altrettanto importante. Tantissime persone, almeno la metà, visiteranno il vostro sito da un dispositivo mobile: devono avere la possibilità di chiamare il numero indicato con meno sforzi fisici e mentali possibile.
\nSe siamo proprio pigri e ci fidiamo della qualità dei sistemi operativi installati sui telefoni, potremmo anche pubblicare i numeri come dei semplici testi:<\/p>\n

\n+393337198198<br \/>\n+39 333 7 198 198<br \/>\n+39 333.7.198.198<br \/>\n(+39) 3337198198\n<\/pre>\n
\nMa in tal caso, per esempio, l’iPhone vedrà il terzo modo di scrive il numero come un testo semplice e non come numero cliccabile. Le altre tre opzioni, invece, diventano automaticamente dei link: in appena due «tap» si chiama il numero scelto.
\n
\nMa oltre all’iOS esistono tante versioni di Android e altri sistemi operativi. Non si può affidarsi al caso, bisogna rendere il numero cliccabile indipendentemente dal modo in cui viene visualizzato al visitatore. Quindi ci serviamo delle possibilità tecniche offerteci dal HTML5.
\nLa sintassi è estremamente semplice:<\/p>\n
\n<a href="tel:+393337198198">+39 333 7 198 198<\/a>\n<\/pre>\n
\nEsatto, è come un link con il protocollo «mailto:» che conoscete da anni. Non dimenticatevi di indicare anche il prefisso nazionale (sia nel tag del link che nel numero visibile sulla pagina) perché il visitatore può collegarsi al sito da qualsiasi punto del globo. Il telefono dopo il click sul numero chiederà solo di confermare l’intenzione di contattare il numero indicato.
\n
\nQuesto tipo di link funzionerà anche sui computer con lo Skype installato. Anche per questo è importante rendere intenzionalmente – con il codice – il numero sempre cliccabile.
\nInoltre, per offrire il quadro completo della situazione, dovrei aggiungere che il link del numero di telefono può essere realizzato anche in altri modi. Ma non consiglio di utilizzarli in quanto essi sono interpretati correttamente solo da alcuni browser.<\/p>\n
\n<a href="callto:393337198198">funziona su iPhone e Nokia<\/a>\n<a href="wtai:\/\/wp\/mc;393337198198">funziona su Android<\/a>\n<a href="wtai:\/\/wp\/mc;+393337198198">formato internazionale per Android<\/a>\n<\/pre>\n
\nÈ decisamente meglio utilizzare il protocollo universale tel: con il quale abbiamo iniziato: funzionerà da tutti i dispositivi. Ma se qualcuno avesse la strana e inspiegabile necessità di fare una distinzione tra i vari dispositivi mobili, si potrebbe utilizzare questo script in JavaScript:<\/p>\n
\n<div id="header-phone"><\/div> \n \n<script>\nif( \/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(navigator.userAgent) ) {\n  document.getElementById("header-phone").innerHTML = '<span><a href="tel:+ 380985554433 ">(098) 555-44-33<\/a><\/span>';\n } else {\n  document.getElementById("header-phone").innerHTML = '<span>(098) 555-44-33<\/span> ';\n}\n<\/script>\n<\/pre>\n
\nLa rappresentazione grafica dei numeri di telefono è invece una questione abbastanza banale. In CSS potremmo utilizzare una classe:<\/p>\n
\na.phone-style {\n  color: #3e3a37;\n  text-decoration: none;\n}\n<\/pre>\n
\nOppure applicare lo stesso stile selezionando i numeri di telefono cliccabili in questo modo:<\/p>\n
\na[href^="tel:"] {\n  color: #3e3a37;\n  text-decoration: none;\n}\n<\/pre>\n
\nCon l’aiuto della pseudo classe before e dei simboli in unicode possiamo anche aggiungere l’icona di un apparecchio telefonico prima del numero:<\/p>\n
\na[href^="tel:"]:before {\n  content: "\\260e";\n  margin-right: 0.5em;\n}\n<\/pre>\n
\nIl risultato sarà +39 333 7 198 198<\/a><\/span>.
\nOra che sapete pubblicare i numeri di telefono in modo corretto, possiamo passare ai tipi di contatto meno sfortunati ma altrettanto importanti.
\n(La pubblicazione dei numeri di telefono sui siti che utilizzano il XSLT sarà trattata in un paragrafo a parte.)<\/p>\n
2. La posta elettronica<\/b>
\nSorprendo tutti e ribadisco il concetto: anche l’indirizzo di posta elettronica pubblicato sul sito deve essere leggibile e cliccabile.
\nLa leggibilità è data dal formato tradizionale dell’indirizzo: nome@sito.it
\nÈ giusto scrivere eugi@eugigufo.net
\nÈ sbagliato scrivere eugi [at] eugigufo.net, eugi (a) eugigufo.net e in tutte le altre forme fantasiose.
\nNon dovete temere di pubblicare l’indirizzo perché la protezione dallo spam è una delle mansioni per le quali il vostro sistemista prende lo stipendio. Se, invece, siete un privato, dovreste comunque essere in grado di impostare i doverosi filtri nella casella postale. In ogni caso, non è il compito del visitatore desideroso di contattarvi correggere manualmente il vostro indirizzo. Quest’ultimo deve essere pronto all’uso da subito.
\nLa cliccabilità di un indirizzo e-mail può essere realizzata in almeno due modi ugualmente corretti. Il primo, tradizionale, prevede l’utilizzo del protocollo mailto: nel link. Lo conoscono tutti:<\/p>\n
\n<a href="mailto:eugi@eugigufo.net.net">eugi@eugigufo.net.net<\/a>\n<\/pre>\n
\nIn tal modo viene richiamato il programma client di posta elettronica preferito dall’utente. Non tutti i programmatori si ricordano, però, che è possibile far precompilare anche il soggetto della mail. Eppure è sufficiente aggiungere ?subject=soggetto dopo l’indirizzo:<\/p>\n
\n<a href="mailto:eugi@eugigufo.net.net?subject=Paragrafo 19 di Inerario">eugi@eugigufo.net.net<\/a>\n<\/pre>\n
\nIl secondo modo valido di linkare l’indirizzo di posta elettronica consiste nel reindirizzare il cliente a una form dedicata (come lo faccio io<\/a> su questo sito). Ricordiamoci, infatti, che molte persone preferiscono utilizzare la webmail e si infastidiscono per l’apertura dei programmi indesiderati. Inoltre, qualcuno potrebbe decidere di scrivervi da un dispositivo non proprio.<\/p>\n
\n<a href="http:\/\/www.eugigufo.net\/it\/email\/">eugi@eugigufo.net.net<\/a>\n<\/pre>\n
\nLa buona regola comune ai due modi consiste nel rendere visibile, almeno da qualche parte, l’indirizzo al quale si propone di scrivere. Il visitatore deve avere la possibilità di salvare il contatto per utilizzarlo nel momento in cui gli è più comodo farlo. Vale anche per il numero di telefono.<\/p>\n
3. Il contatto Skype<\/b>
\nNon ho mai visto un contatto Skype scritto in una maniera illeggibile, quindi mi limito a sottolineare che è molto facile renderlo cliccabile:<\/p>\n
\n<a href="skype:eugi.gufo">eugi.gufo<\/a>\n<\/pre>\n
\nFatelo per la comodità dei visitatori.
\nInoltre, la funzionalità del link può essere perfezionata con il parametro dell’azione desiderata. La sintassi diventa così:<\/p>\n
\n<a href="skype:eugi.gufo?azione\u201d>eugi.gufo<\/a>\n<\/pre>\n
\nMentre i nomi delle azioni che è possibile aggiungere sono:
\nuserinfo – la visualizzazione del profilo
\nadd – l’aggiunta ai contatti
\ncall – chiamata
\nchat – l’invio di un messaggio in chat
\nvoicemail – l’invio di un messaggio vocale.
\nBene, questi sono i tre tipi di contatti che tutti pubblicano sui propri siti. In tantissimi lo fanno sbagliando qualcosa. Non so quanto sia opportuno trattare i vari, numerosissimi, messenger: forse un giorno lo farò.
\nIn ogni caso, spero di riuscire nella missione difficile di migliorare la comunicabilità nel mondo.<\/p>\n","protected":false},"excerpt":{"rendered":"
Il paragrafo dell\u2019\u201cInerario\u201d dedicato ai modi corretti \u2013 da tutti i punti di vista \u2013 di pubblicare i contatti sui siti web. Si tratta di un argomento banale, che viene comunque caratterizzato da una quantit\u00e0 immensa di errori tecnici e tipografici.
\nQuesto paragrafo \u00e8 stato pensato prevalentemente per gli sviluppatori front-end e web-designer, ma alcuni concetti potrebbero essere molto utili anche alle persone che semplicemente pubblicano dei testi sull\u2019internet.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":452,"menu_order":19,"comment_status":"open","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-2208","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/2208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/comments?post=2208"}],"version-history":[{"count":0,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/2208\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/452"}],"wp:attachment":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/media?parent=2208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}