Cose utili per il sito web

Sommario:

Sitemap:

Ci sono diversi programmi online per creare la sitemap.xml del proprio sito web. La sitemap è importante per l'indicizzazione. Una volta verificato il sito con Search Console, potrete inviare la sitemap a Google. La sitemap di un sito web può essere, comunemente, visualizzata inserendo un URL di questo tipo nella barra di ricerca del browser:
http://www.nomesito.com/sitemap.xml

Codice web dei colori - Come abbreviarlo:

In alcuni codici, o programmi, si possono inserire solo tre lettere del codice di un colore. Come fare ad abbreviarlo? Semplice, ma si puo` fare solo con i codici composti da tre coppie di lettere che contengono tre lettere uguali tra loro. Per esempio: 00FF00, diventa 0F0, cioe` si prende solo la prima lettera di ogni gruppo di due.
Editor colori

Anchor text - Come creare un collegamento ad un punto nella stessa pagina, o in una pagina diversa:

Può essere necessario rimandare i visitatori ad un punto specifico del testo di una pagina, per un riferimento, una spiegazione, o una precisazione. Per fare questo, dovete creare un link che, cliccato, porti direttamente l'utente al punto che desiderate. Farlo è più facile che spiegarlo....vediamo:

Quello che ci serve è un id di riferimento, che deve essere unico, naturalmente. Userò, per questo esempio, la parola "palla".

Potete dare l'id ad un div, o ad un paragrafo, o ad un titolo ecc
Facciamo l'esempio con un titolo h2:

<h2 id="palla">Titolo</h2>

Ora, andate nel punto del codice della pagina in cui volete posizionare il link che, cliccato, porterà il visitatore al titolo che avete identificato col nome palla.
Se il link di collegamento si trova nella stessa pagina del punto di arrivo, dovete inserite questa stringa:
<a href="#palla">testo</a>

Al posto di "testo" mettete il testo che desiderate e che verrà cliccato dall'utente.

Ecco un esempio con un collegamento che vi rimanderà al sommario di questa stessa pagina. Provate a cliccare....
Sommario

Se il link di collegamento si trova in una pagina diversa da quella del punto di arrivo, prima dell'ancoraggio #palla dovete mettere l'indirizzo della pagina di arrivo per esteso. Esempio:
<a href="https://www.nomesito/pagina.html#palla">Testo</a>

Come già detto in altre occasioni, quando dovete lavorare sul codice html di una pagina già creata e, quindi, con molto contenuto, la cosa più semplice è aiutarsi usando lo strumento "Trova" del browser, che permette di individuare, inserendo parole chiave, il punto preciso del codice in cui desiderate apporre le modifiche.




iFrame - Come incorporare una pagina web nel sito:

Come fare ad avere la schermata di una pagina web all'interno di una pagina del proprio sito? Facciamo un esempio: avete creato un forum con un servizio online come Forumattivo, o Forumfree, o altri e vorreste incorporarlo nel vostro sito. Cioè, non accedervi attraverso un link, ma averlo proprio nel sito, sempre in anteprima nella pagina dedicata. Ecco come si fa, è semplicissimo: basta usare questo codice:
<iframe width="100%" height="400px" style="display:block; overflow: hidden; border: 0;" src="URLpagina"></iframe>

I parametri da personalizzare sono quelli in rosso. Al posto di "URLpagina", inserite l'URL della pagina da incorporare.

Criptare - Come criptare un indirizzo email, o un numero di telefono:

Non si fa mai abbastanza per proteggersi dallo Spam e da intrusioni indesiderate. È possibile nascondere l'indirizzo email, o il numero di telefono, sotto un codice che risulta incomprensibile per gli "invasori" della privacy, ma che i browser possono leggere benissimo. Così, se dovrete incollare il vostro indirizzo in una pagina web, non avrete più paura che possa venire intercettato. In questa pagina, trovate lo script che vi permetterà di criptare i vostri dati; basta inserire l'indirizzo email, o il numero di telefono, nel campo e cliccare su codifica.

Disabilitare tasto destro del mouse (menù contestuale):

Molti si pongono il problema di come proteggere i contenuti del proprio sito web e impedirne lo scaricamento. Premesso che impedirlo in modo assoluto e` impossibile, vediamo almeno come scoraggiare i meno esperti disabilitando il tasto destro del mouse.

Disabilitare il tasto dx del mouse su un'immagine specifica:

Esempio:

esempio

Il codice per farlo è questo:
 <img src="URL immagine" alt="" oncontextmenu="return false;">

Al posto di URL immagine, dovete inserire l'indirizzo dell'immagine.
Se volete che appaia un messaggio di avviso, il codice diventa questo:
<img src="URL immagine" alt="" oncontextmenu="alert('Immagine protetta da copyright');return false"/>

Al posto di "Immagine coperta da copyright" potete inserire l'avviso che preferite.

NOTA: i tag HTML non sono consentiti nel testo di un alert. Per andare a capo, potete usare il segno \n

Disabilitare il tasto dx del mouse su un'intera pagina:

Aggiungete questo comando al tag body:
<body oncontextmenu="return false">

Come per l'immagine, può essere inserito un messaggio di avviso.

Altri comandi che possono essere aggiunti:

onselectstart="return false"  (impedire la selezione dell'elemento)
ondragstart="return false"    (impedire il trascinamento dell'elemento)
ondrop="return false"           (impedire il deposito dell'elemento)

Casella ricerca - Come mettere una casella di ricerca personalizzata nel sito:

Il metodo più semplice è utilizzare la casella di ricerca personalizzata offerta da Google. Andate a questo indirizzo: https://www.google.com/cse/create/new.
Inserite le opzioni preferite e il vostro motore di ricerca sara` pronto in un battibaleno.

NOTA: Se volete "monetizzare" la vostra casella di ricerca, cioe` collegarla al vostro account Adsense, dovete prima creare una casella di ricerca nel vostro account di Adsense, poi accedere a https://www.google.com/cse/all dove troverete il nuovo motore gia` in elenco e collegato all'account  Adsense. Prelevate, quindi, il codice generato..

Per centrare il motore di ricerca nella vostra pagina e impostarne la larghezza, dovete aggiungere la stringa che vedete in rosso nell'esempio di codice riportato qui sotto:
<script>
  (function() {
    var cx = 'partner-pub-XXXXXXXXXX:XXXXXXXX';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<div style="max-width: 400px; margin: 0px auto;" id="___gcse_0">
<gcse:searchbox-only></gcse:searchbox-only>

Per metterlo a destra, invece, potete usare questa stringa:
 <div style="width:100%; max-width: 400px; margin-top:20px; float:right;" id="___gcse_0">


Se non volete utilizzare il tool di Google, potete usare questo codice, che funziona, comunque, tramite Google search:
<form method="get" action="https://www.google.com/search" target="_blank">
<div>
<table border="0" align="center" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="25" style="color:#808080; max-width: 150px"
maxlength="250" value="Cerca nel sito"
onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
<input type="submit" value="Go!" />
<input type="hidden" name="sitesearch" value="lachiavenelpozzo.com" /></td></tr>
</table>
</div>
</form>

Al posto del nome di dominio di questo sito (segnato in rosso), metterete il nome di dominio del vostro sito web. Potete variare la larghezza della casella dove indicato (max-width: 150px). Il codice va inserito nella zona body e nel punto in cui desiderate che la casella appaia.

Copyright - Come inserire il copyright:

Prima di tutto, vorrei spiegare che il copyright non è una cosa che è necessario "mettere"; infatti, ogni opera pubblicata appartiene all'autore ed è automaticamente coperta dal copyright. Potete trovare informazioni precise in questa guida:http://www.studiolegale-online.net/diritto_informatica_09.php. Perchè, allora, specificare con un testo? Per chiarezza, semplicemente. Non tutti sanno quello che possono e non possono fare in rete e, quindi, comunicare come e quanto le nostre opere siano protette, serve ad evitare spiacevoli incidenti.La cosa più semplice, è aggiungere, alle pagine, una riga di testo di questo tipo:
Copyright © 2011-2013 Nome sito con link by Vostro nome. All rights reserved - E' vietato riprodurre i contenuti di questo sito senza autorizzazione
Al posto di 2011-2013 dovete mettere l'anno di pubblicazione del vostro sito, seguito dall'anno in corso, che dovrà essere, sempre, aggiornato.In alternativa, potete creare la vostra licenza con Creative Commons , che vi da' la possibilità di definire non solo quello che non volete sia fatto con le vostre opere, ma, anche, quello che, invece, desiderate permettere di fare.
Se volete altre informazioni su Creative Commons e le sue licenze, le potete trovare qui .

Backup di un sito web:

È sempre consigliato effettuare il backup del proprio sito web, per una questione di sicurezza, oppure può rendersi necessario qualora si voglia trasferire il sito su un nuovo spazio hosting.
Eseguire il backup è un'operazione molto semplice grazie ai programmi appositi. Ve ne consiglio due:

HTTrack per Windows 
SiteSucker per Mac 

NOTA: il sito deve essere pubblico

Anno in corso - aggiornamento:

Per esempio nel copyright, può risultare molto comodo che la data si aggiorni in automatico per mostrare il nuovo anno in corso.
Lo script per ottenere questo risultato è il seguente:
<script>
document.write(new Date().getFullYear());
</script>

Da posizionare dove volete che l'anno appaia.

Data di aggiornamento di una pagina:

Esempio (testuale, no script):
This page was last modified on: 11/17/2017 18:16:10
<script>
document.write("This page was last modified on: " + document.lastModified +"");
</script>

Da posizionare dove volete che l'avviso appaia. Naturalmente, potete cambiare il testo.

E per metterla con la data "all'italiana" (giorno/mese/anno), si può fare così:
<script>
var doct = document.lastModified;
var mdate= doct.split("/");
document.write("Ultimo aggiornamento: "+ mdate[1]+"/"+mdate[0]+"/"+mdate[2]);
</script>

Ottenendo questo risultato (sempre esempio testuale):
Ultimo aggiornamento: 17/11/2017 18:16:10

Contenuto evidenziato al click

Se offrite contenuti di testo utili agli utenti, potete agevolarne la copia impostandone l'evidenziazione al click del mouse.
Il testo in questione deve essere racchiuso in un contenitore (div, p ecc), dopodichè basta aggiungere queste regole di stile al contenitore stesso, oppure alla classe di appartenenza nel foglio di stile:
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;

Potete testarne il funzionamento in questo stesso div che contiene le stringhe di codice in oggetto.






Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con:
E molto altro ancora se leggi:
Tutti gli argomenti