-» -» Sito-web-cose-utili

Cose utili per il sito web

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web
Sommario:

Codice web dei colori - abbreviazioni

I codici dei colori si possono abbreviare in alcuni casi specifici.

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 univoco di riferimento. 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>

iFrame - Come incorporare una pagina web

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.
Leggi anche la sezione dedicata nella guida: Come includere il contenuto di un file esterno

Criptare 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 il 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 è 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)

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: Motore di ricerca.
Inserite le opzioni preferite e il vostro motore di ricerca sarà pronto in un battibaleno.

NOTA: Se volete "monetizzare" la vostra casella di ricerca, cioè collegarla al vostro account Adsense, dovete creare la casella di ricerca direttamente nel vostro account di Adsense. Accedendo poi a Tutti, troverete il nuovo motore già in elenco e potrete personalizzarlo.

Per centrare il motore di ricerca nella vostra pagina e impostarne la larghezza e la posizione, vi basterà racchiuderlo in un div, in questo modo:
<script async src="https://cse.google.com/cse.js?cx=XXXXXXXXXXXXXXXX"></script>
<div style="width:100%; max-width:400px; margin:0 auto">
<div class="gcse-searchbox-only"></div>
</div>


Per metterlo a destra, invece, il codice diventa così:
<script async src="https://cse.google.com/cse.js?cx=XXXXXXXXXXXXXXXX"></script>
<div style="width:100%; max-width:400px; float:right">
<div class="gcse-searchbox-only"></div>
</div>


verificato su segnalazione in data 13 ottobre 2021

Naturalmente, per veder apparire la casella di ricerca, dovrete inserire l'ID del vostro motore di ricerca personalizzato Google al posto della fila di X.

Se non volete avere la scritta di Google all'interno della casella, potete usare questo codice;:
<form action="./result.html" id="cse-search-box">
  <div>
    <input name="cx" value="XXXXXXXXXXXXXXXX" type="hidden">
    <input name="cof" value="FORID:11" type="hidden">
    <input name="ie" value="ISO-8859-1" type="hidden">
    <input name="q" size="40" type="text" placeholder="Cerca nel sito">
    <input name="sa" value="GO!" type="submit">
  </div>
</form>


verificato su segnalazione in data 13 ottobre 2021

Dovete creare una pagina html nel vostro sito per i risultati di ricerca. In questo esempio, la pagina si chiama result.html
Al posto di "./result.html", metterete, quindi, il percorso della pagina result.html in cui appariranno i risultati.
Al posto delle XXXX l'ID del vostro motore di ricerca personalizzato Google.
Il codice va inserito nella zona body e nel punto in cui desiderate che la casella appaia.


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>


verificato su segnalazione in data 13 ottobre 2021

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.

Nella pagina Varie della sezione "Risorse per i webmaster", puoi trovare altre soluzioni utili.

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.
Il backup può essere fatto utilizzando un programma di trasferimento via FTP, come Filezilla, oppure con programmi appositi, come:

HTTrack per Windows 
SiteSucker per Mac 

NOTA: il sito deve essere pubblico

Anno in corso con 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:
<span id="year"></span>

<script>
    document.getElementById("year").innerHTML = new Date().getFullYear();
</script>

Posizionare lo script prima della chiusura del body e la parte html dove volete che l'anno appaia.

Data di aggiornamento di una pagina

<p>This page was last modified on <span id="modify"></span></p>

<script>
document.getElementById("modify").innerHTML = document.lastModified
</script>

Posizionare lo script prima della chiusura del body e la parte html dove volete che la data appaia. Naturalmente, potete cambiare il testo.

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.

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Continua con:

Leggi anche: Creare un sito da zero

Mappa del sito
Mappa del sito