Come fare a..‎ > ‎

Sito web, cose utili

di Maria Silvana Radice

How to do it / website










Sitemap - Come trovare la sitemap del sito:

La sitemap di un sito puo` essere raggiunta inserendo un URL di questo tipo nella barra di ricerca del browser:

http://www.nomesito.com/sitemap.xml

Nel caso di Google sites, l'URL da inserire e` questo:

https://sites.google.com/site/nomesito/system/feeds/sitemap

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 è una parola di riferimento, che non deve essere una parola contenuta nel testo, ma una parola di fantasia, che non comparirà nel testo, ma servirà solo per il collegamento. Userò, per questo esempio, la parola "palla".
Aprite l'html della pagina e, vicino al punto in cui c'è il testo a cui volete indirizzare il visitatore, inserite questa stringa:

<a name="palla"></a>

Di questo, nulla si vedrà nel testo.

Ora, andate nel punto in cui volete creare il link che porterà il visitatore nel punto del testo che avete identificato col nome palla.

Se il link sarà nella stessa pagina del punto di arrivo, inserite questa stringa:

<a href="#palla">testo</a>

Al posto di "testo" dovete mettere la parola che sarà visibile ai visitatori come link.
Ecco un esempio, ho creato un collegamento, che vi rimanderà al sommario di questa stessa pagina. Provate a cliccare....
Sommario

Se il link sarà in una pagina diversa da quella del punto di arrivo, prima di #palla dovete mettere l'indirizzo della pagina di arrivo. Così:

<a href="http://www.lachiavenelpozzo.com/home#palla">testo</a>

Come già detto in altre occasioni, quando dovete lavorare sull'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 singole parole, il punto preciso del codice in cui desiderate apporre le modifiche.

Favicon - Come creare una favicon per il sito:

La "favicon" è quella piccola icona (16x16 px) che appare vicino al nome di un sito quando ci colleghiamo ad esso. La favicon standard è una semplice finestrella bianca con contorni blu, che, certo, non identifica in alcun modo il vostro sito.

Prima di tutto, è necessario creare l'immagine che volete usare come vostra icona. Potete usare l'immagine che preferite, ma deve essere convertita in formato .ico. Per convertirla, potete andare su uno di questi siti:

http://tools.dynamicdrive.com/favicon/  
                    
Oppure, se volete costruirla da zero e direttamente online, potete andare qui:
                  
http://www.favicon.cc/

Una volta scaricata la vostra favicon, il procedimento per sostituirla a quella standard, è semplicissimo.

Dopo averla caricata negli allegati del sito, o dove credete, dovete inserire questa riga nella sezione "head" del codice di ogni pagina:

 <link rel="icon" href="/favicon.ico"/>

Al posto di "/favicon.ico" metterete l'indirizzo web della vostra favicon.

Per metterla in un sito Google, seguite questo percorso:

Menu`->gestisci sito->allegati->carica->cercate l'immagine, caricatela e......basta. La vostra favicon personalissima apparirà, come per incanto, accanto al nome del sito.

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 style="
width: 100%;
height: 400px;
display: block;
overflow: hidden;
border: 1px solid #ccc;" src="URLpagina"></iframe> 

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

Il codice va incollato nell'HTML della vostra pagina ( anche per Google sites). In Google sites esiste, anche, una funzione nativa per incorporare gli iFrame (inserisci->altri gadget->include gadget (iFrame)).

Attenzione per chi usa Google sites, o un altro sito protetto!
Da tempo i browser hanno adottato filtri di sicurezza per cui una pagina con protocollo HTTP non potrà essere visualizzata su un sito protetto, come, per esempio, Google sites, che ha protocollo HTTPS. Questo perche` i contenuti con indirizzo che inizia per http, non sono certificati e vengono considerati insicuri. In alcuni casi, rari, e` possibile aggiungere una s e trasformare http in https. Se questo non funziona, e` consigliabile cambiare prodotto, o istruire gli utenti su come disattivare lo scudo, oppure mappare il sito ad un nuovo dominio non certificato.
Vedi:
Come collegare il sito Google ad un dominio personale

Criptare - Come criptare un indirizzo email:

Non si fa mai abbastanza per proteggersi dallo Spam e da intrusioni indesiderate. Ho trovato, in rete, un modo per nascondere l'indirizzo email 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 il vostro indirizzo; basta inserire l'indirizzo nel campo e cliccare su codifica.
Il codice ottenuto, va poi inserito in questa stringa:

<a href="mailto:indirizzo criptato">Testo</a>

Al posto di "indirizzo criptato" dovete inserire il codice fornito dal criptatore e, al posto di "Testo", dovete mettere il testo che apparira` nella pagina e su cui gli utenti cliccheranno per inviarvi l'email.

In Google sites (aggiornamento al 17 luglio 2014), la stringa va inserita in un gadget, utilizzando il percorso inserisci->altri gadget->embed gadget. Se la inserite direttamente nell'html, il sistema decriptera` il codice in automatico, quindi il link funzionera`, ma l'indirizzo non sara`, in realta`, criptato.

Immagini - Come proteggere le proprie immagini:

Molti si pongono il problema di come impedire lo scaricamento delle proprie immagini pubblicate sul sito. Premesso che impedirlo in modo assoluto e` impossibile, vediamo almeno come scoraggiare i meno esperti. Vi propongo due metodi....

Disabilitare il tasto destro del mouse:

Se volete scoraggiare lo scaricamento di un'immagine da parte degli utenti del vostro sito, potete disabilitare l'uso del tasto dx del mouse su quell'immagine.

Esempio:

Il codice per farlo è questo:

 <img src="URL immagine" oncontextmenu="return false;">

Al posto di
URL immagine, dovete inserire l'indirizzo dell'immagine.

Sovrapporre due immagini:

Un altro metodo e` quello di sovrapporre l'immagine con un'altra immagine trasparente. Chi provera` a scaricarla, scarichera` solo l'immagine sovrapposta e, cioe`, quella trasparente.

Esempio:

Il codice da usare e` questo:

<div>
<img src="URL immagine di fondo"
style="position: absolute; top: 0; left: 0; z-index: -1;" />
<img src="URL immagine trasparente"
style="position: absolute; top: 0; left: 0; z-index: 1;" />
</div>

Le dimensioni delle due immagini dovranno essere uguali.
Potete scaricare l'immagine trasparente da qui ( o dall'allegato in fondo pagina).  
In Google sites, entrambi i codici vanno inseriti seguendo la guida Come inserire codici e scripts in Google sites.

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

Una casella di ricerca nel sito ci vuole! Non state a complicarvi la vita! Fatelo con Google, andando 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, 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">


Per Google sites leggi anche: Google sites, i trucchi  -> Casella di ricerca personalizzata   

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:

NOTA: il sito deve essere pubblico

Banner - Come creare un banner:

La prima cosa che voglio dirvi è che per fare un banner non serve assolutamente rivolgersi a siti online, che, spesso, chiedono pagamenti, oppure mettono il loro logo nelle vostre immagini. In realtà, per fare un banner, basta un programma di grafica e conoscere alcuni passi da seguire. Vediamo.
Ci sono delle misure per i banner, che, spesso sono richieste se vogliamo, poi, inserirli in qualche sito. Le misure standard più comuni, in grandezza reale, le potete vedere nella pagina: Banner misure.
Copiate il banner vuoto che vi serve e incollatelo in un programma di grafica (io, in genere, uso Photofiltre, potete scegliere la versione senza installazione "Aup").
Cancellate la scritta con le misure e divertitevi a creare il vostro Banner personalizzato. Quando sarete soddisfatti e l'avrete salvato, bisognerà passare alla pubblicazione, vale a dire che l'immagine deve essere messa in rete, per poter ottenere il suo indirizzo web, che verrà poi inserito nel codice html del banner (non spaventatevi, in realtà è tutto molto semplice). Potete caricarlo, ovviamente, nel vostro sito. Se è un sito Google, basta andare in altro->gestisci sito->allegati, caricarlo e copiarne l'indirizzo, togliendo la parte dopo il formato del file e metterlo nel codice che riporto più avanti. Potete, anche, caricarlo come immagine in una pagina, poi cliccarci sopra col tasto sx, scegliere "Modifica" e incollare, al posto dell'indirizzo dell'immagine, l'URL del vostro sito. Potrete copiarlo, in ogni momento, evidenziandolo, cliccandoci sopra e scegliendo "copia" (non "copia immagine"). Ovviamente, se vi serve il codice, dovete seguire il procedimento precedente.
Se dovete appoggiarvi ad un servizio esterno, per la pubblicazione, ne esistono diversi, gratuiti, per questo tipo di lavoro; quello che vi posso consigliare, è: TinyPic, che vi si presenterà con questa schermata:




Dovete cercare il banner che avete creato da "Sfoglia" e poi caricarlo cliccando su  "upload now". Si aprirà la solita finestrella in cui inserire un codice captcha di controllo e poi questa finestra:



L'indirizzo che serve a voi e che dovete copiare, è l'ultimo, cioè quello denominato: "Direct Link for Layouts".
Bene, ora che avete l'indirizzo della vostra immagine, dovete creare il codice del vostro banner, vediamo come....
Il codice standard da usare, è questo:

<a href="URL SITO"><img src="URL IMMAGINE"></a>

Dovete mettere, al posto di URL SITO, l'indirizzo del vostro sito, o della pagina a cui vi riferite (es: https://sites.google.com/site/lachiavenelpozzo/) e, al posto di URL IMMAGINE, l'indirizzo immagine che avete creato con TinyPic.

L'indirizzo, che otterrete, sarà simile a questo:

<a href="https://sites.google.com/site/lachiavenelpozzo/"><img src="http://i45.tinypic.com/2qs9ezk.jpg"></a>

Perfetto! Avete finito. Conservate questo codice e, ogni volta che vorrete mettere il vostro banner da qualche parte, non avrete che da copiarlo e inserirlo nel codice html della pagina, oppure darlo a chi lo deve inserire. I visitatori che ci cliccheranno sopra, verranno indirizzati, automaticamente, dove avete scelto. Oppure, più semplicemente, se avete già inserito il banner in una pagina, potete copiarlo, cliccandoci col dx e scegliendo "copia" ( non copia immagine) e incollandolo dove credete. Spero di essere stata sufficientemente chiara, altrimenti......
DITELOOOO!! Buon lavoro a tutti.

(Se preferite, comunque, affidarvi a siti online per la creazione, vi consiglio questo: mybannermaker)

Slideshow - Come inserire uno slideshow nel sito:

Ora, vi spiegherò come inserire, facilmente, uno slideshow con le vostre immagini preferite in un sito.
Per farlo, dovete, prima di tutto, creare un album in Google Foto, accedendo col vostro account google. Ricordatevi di renderlo
condivisibile, cliccando sull'icona con i 3 puntini (in alto a dx) e scegliendo "Condividi. Si aprirà questa schermata....




 


Una volta fatto l'album....

Per inserirlo in un  sito creato con Google
sites
, andate nella pagina in cui volete inserire lo slideshow, entrate nell' editor e cliccate su "inserisci"->Google+->album fotografico.
Scegliete l'album che volete caricare.

L'URL del vostro album, verrà inserito automaticamente. Impostate la dimensione e le altre preferenze, mettete il titolo che volete e salvate. Ecco fatto, lo slideshow con le vostre foto, apparirà nella pagina.

Per inserirlo in altri siti e anche per creare slideshow differenti, leggete la guida: Google foto, slideshow no flash

Per inserirlo nel blog di Blogger, dovete cliccare su design->layout->aggiungi gadget e scegliere slideshow. Apparirà questa finestra:






Scegliete il titolo, mettete la spunta su "album" (come sopra) e ora....attenzione! Perchè c'è voluta tutta la mia pazienza per capire....dove c'è scritto "nome utente", dovete mettere la parte dell'indirizzo email del vostro account che c'è prima della chiocciola (@). Ora, nel menù a tendina, sotto la voce "album", dovrebbe essere apparso il nome del vostro album creato in Picasa. Sceglietelo. A questo punto, se avrete fatto 
tutto bene, comincerà a scorrere in anteprima, in basso, il vostro slideshow. Sistemate le altre preferenze e salvate. Fatto!

Player - Come inserire un player audio in html5:

Molti di voi gia` sapranno che Flash e` destinato ad essere sostituito dal piu` recente html5. Vediamo, quindi, come creare un player musicale da mettere nel nostro sito. 
Esempio funzionante:

Il codice per questo player e` il seguente:

<div style="margin-top:10px">
<audio src="file.mp3" controls>
<embed
src="file.mp3"
loop="false"
autostart="false" />
</audio>
</div>

I parametri da modificare sono quelli in rosso, in questo modo:
  • file.mp3 = da sostituire con l'indirizzo del vostro file musicale (in entrambi i punti indicati)
  • loop="false" = se volete che il brano ricominci in automatico dopo il termine, al posto di "false", mettete "true"
  • autostart="false" =  se volete che la riproduzione del brano si avvii in automatico, al posto di "false", mettete "true"

Ricordatevi che, per le leggi sul copyright, e` proibito a chiunque il riprodurre brani di cui non si e` l'autore e/o  piu` recenti di 70 anni. Se avete questa esigenza, leggete la guida Player Youtube per video, o sottofondo musicale




Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in    

Ti e` stato utile questo argomento?











ą
Maria Silvana Radice,
24 mag 2016, 02:18