Come fare a

Cose utili per il sito web

Sommario:

Codice web dei colori - Come abbreviarlo:

I codici dei colori si possono abbreviare in alcuni casi specifici. 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 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 https://www.google.com/cse/all, 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>



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>


Al posto di "./result.html", metterete il percorso della pagina in cui appariranno i risultati.
Al posto delle XXXX l'ID della vostra casella di ricerca.
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>


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.
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 - 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 lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Continua con: