REDAZIONE

Spesso i piccoli problemi di visualizzazione in cui vi imbattete possono dipendere da una carente manutenzione dei vostri browser. A molti di voi sarà capitato di scriverci in preda al panico perché il vostro blog è impazzito e sentirvi rispondere "hai vuotato la cache del browser?". Vi assicuriamo che non è una risposta automatica e che chi legge le vostre e-mail non fa "copia e incolla" :D

Dunque, eccoci qui con una guida che vi accompagnerà passo passo in quella che è la prima delle operazioni da effettuare per una navigazione in tutta tranquillità. Nello specifico, vedremo come intervenire su Internet Explorer (dalla versione 6.0 alla 8.0), Mozilla Firefox (dalla versione 1.5 alla 3.5), Apple Safari (versione 3.x e 4.x) e Google Chrome.

Prima di passare alla fase operativa, vediamo di capire cos'è questa misteriosa cache che vi dà così tanti grattacapi.

Cos'è la cache?

La cache contiene una copia temporanea degli elementi scaricati dal Web - pagine Web, immagini, suoni e a volte cookie. Avere tali file memorizzati su disco locale vi permette di caricare più velocemente le pagine Web alla successiva visualizzazione aumentando di fatto la velocità generale di navigazione (più sono i file salvati, più sono le pagine a cui potrete accedere velocemente). Tuttavia, può capitare che le pagine modificate dall'ultima visita non vengano aggiornate con il contenuto attuale: il browser carica ciò che ha in memoria senza recepire le modifiche che intanto sono intervenute sulla nuova pagina del sito.

La prima conseguenza è la generazione di comportamenti negativi delle pagine dei siti che visitate.

La cancellazione della cache invia tutti i file in essa contenuti nel cestino, costringendo il browser a caricare da capo tutti i nuovi contenuti delle pagine Web. Questa procedura, oltre a poter risolvere gran parte delle bizzarrie in cui ci si imbatte durante surfando in Rete, può liberare spazio sul disco fisso del computer e aumentare la velocità di uscita dal browser. Oggi ci occuperemo di Internet Explorer.

Come cancellare la cache di Internet Explorer 7.0 e 8.0

Vediamo come cancellare la cache di Internet Explorer 7.0 e 8.0 su sistema operativo Windows:

1.     Dal menu Strumenti, selezionate Opzioni Internet per aprire la finestra Proprietà Internet.

2.     Al tab Generale, alla voce Cronologia di navigazione, cliccate su Elimina e quindi su OK per confermare per eliminare tutti i file nella cache.

3.     Nella finestra di dialogo Elimina cronologia di navigazione, spuntate File Internet temporanei. Per evitere le stranezze di cui paralavamo sopra, potrebbe essere utile eliminare i cookie: per fare questo, spuntate Cookie.

Attenzione: confermando l'eliminazione dei Cookie cancellerete le password dei siti Web, le informazioni di accesso, le preferenze specifiche e così via.

4.     Cliccate su Elimina e poi su OK per chiudere la finestra di dialogo Proprietà Internet.

Come cancellare la cache di Internet Explorer 6.0

Per chi avesse una versione meno recente del browser, vediamo come cancellare la cache con Internet Explorer 6.0 su sistema operativo Windows:

1.     Dal menu Strumenti, selezionate Opzioni Internet per aprire la finestra di dialogo delle Opzioni Internet.

2.     Al tab Generale, nella sezione File Internet temporanei, cliccate su Elimina file.

3.     Cliccate su OK per cancellare tutti i file nella cache.

4.     Per risolvere strani comportamenti del browser, potrebbe essere utile eliminare i cookie: per farlo, cliccate su Elimina cookie.

Attenzione: confermando l'eliminazione dei Cookie cancellerete le password dei siti Web, le informazioni di accesso, le preferenze specifiche e così via.

5.     Nella finestra di dialogo Elimina cookie, cliccate OK per eliminare i cookie salvati sul disco fisso.

Attenzione: confermando l'eliminazione dei Cookie cancellerete le password dei siti Web, le informazioni di accesso, le preferenze specifiche e così via.

6.     Nella scheda Generale, nella sezione Cronologia, cliccate su Cancella cronologia e poi Sì per confermare l'eliminazione della cronologia dei siti Web visitati.

7.     Cliccate su OK per chiudere la finestra di dialogo Opzioni Internet.

Bene, adesso il vostro Internet Explorer è tornato a funzionare magnificamente.

Buona navigazione! :D

In questo articolo vi mostriamo un metodo per migliorare l'aspetto grafico del blog, come sostituire un'immagine quando si posizione il puntatore sopra di essa. Questa tecnica è chiamata rollover e potete utilizzarla per distinguere le immagini che hanno un collegamento ad un articolo, nei menu formati da immagini oppure per semplici scherzi divertenti, come questo.

Lo script da utilizzare è molto semplice. La base è la stessa che si utilizza per inserire una immagine con link in un post o nelle barre laterali di navigazione.

HTML

 <a href=”http://pagina_da_aprire.it”><img src="http://immagine1.jpg"></a>     

A questa riga di codice aggiungiamo alcuni parametri.

HTML

 <a href=”http://pagina_da_aprire.it”><img src="http:// immagine1.jpg" 
 onmouseover='this.src = "http:// immagine2.jpg";' 
 onmouseout="this.src='http:// immagine1.jpg';"></a>     

Dove:

• a è il tag utilizzato per la creazione dei link;
• href=”http://pagina_da_aprire.it” contiene, all'interno delle virgolette, l’indirizzo della pagina che si apre cliccando sopra l’immagine;
• img è il tag utilizzato per la creazione delle immagini;
• src="http:// immagine1.jpg" contiene, all'interno delle virgolette, l’indirizzo della prima immagine da visualizzare;
• onmouseover='this.src = "http:// immagine2.jpg";' contiene, all’interno delle virgolette, l’indirizzo dell’immagine che si vuole mostrare al passaggio del mouse;
• onmouseout='this.src = "http:// immagine1.jpg";' contiene, all’interno delle virgolette, l’indirizzo della prima immagine che si era voluto mostrare.

Questo è il metodo più semplice per creare un effetto rollover anche se esistono script che possono adattare meglio e rendere più flessibile l’effetto all’interno di un contesto.

<marquee>

Il tag <marquee> è utilizzato per far letteralmente muovere un parte del codice HTML. Con questo tag è possibile creare effetti decorativi all’interno del blog, creare una galleria di foto scorrevoli o per far muovere una serie di banner.

Esempio di <marquee>:

HTML

  <marquee width="100" heigth="50" behavior="scroll" 
  scrolldelay="100" direction="left" loop="infinite" 
  scrollamount="7">Codice HTML che scorre</marquee>    

ESEMPIO
Codice HTML che scorre

Vediamo nel dettaglio cosa significano i singoli elementi:

behavior definisce il tipo di movimento che il codice HTML deve avere e può essere:

• scroll: il codice si muove nella direzione indicata, quindi scompare e riappare nel punto di partenza;
• slide: il comportamento è lo stesso dello scroll soltanto che una volta arrivato alla fine, il codice non riappare;
• alternate: il codice HTML quando raggiunge la fine inverte la sua direzione e torna indietro.

scrolldelay definisce ogni quanto tempo, in ms, verrà riaggiornato il movimento.

direction definisce la direzione nella quale si deve muovere il codice HTML e può essere

• left (sinistra);
• right (destra);
• down (giù);
• up (su).

Se non viene indicata nessuna direzione il codice si muoverà automaticamente verso sinistra.

loop definisce il numero di volte il movimento dovrà ripetersi una volta raggiunta la fine. Accetta come parametro un qualsiasi numero intero oppure infinite se si vuole che il movimento non si fermi mai. Se nel parametro behavour è stato inserito il valore slide, però, qualsiasi valore di loop non verrà preso in considerazione.

scrollamount definisce la velocit, in pixel al secondo, con la quale il codice HTML si muoverà.

In questo articolo vi mostriamo come personalizzare i titoli dei post, come hanno già fatto alcuni amici di MyBlog.it:

Quello che dovete modificare è l’elemento “.content h3” all’interno del Foglio di stile.
Quindi, andate nella sezione “Presentazione > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile.

Nella colonna destra scrivete:

  .content h3 {
   }  

All’interno delle parentesi graffe dovete inserire i valori da attribuire all’elemento. Come esempio vediamo alcuni dei parametri utili a gestire e personalizzare la grafica dei titoli degli articoli.

margin: 0px 0px 0px 0px;
definisce lo spazio che deve esserci tra l’elemento titolo e gli elementi che lo circondano, rispettivamente sopra, a destra, sotto e a sinistra.

padding: 5px 10px 5px 10px;
definisce lo spazio che deve esserci tra il bordo del titolo e il parametro margin, rispettivamente sopra, a destra, sotto e a sinistra.

font-size: 12px;
definisce la dimensione che deve avere il testo.

font-weight: bold;
associa l’effetto grassetto al testo. E’ possibile sostituire l’effetto bold con altri valori come normal, bolder, lighter, inherit oppure valori da 100 a 900 (es. 100, 200, 300…).

line-height: 150%;
definisce lo spazio che deve esserci tra una riga di testo e l’altra.

color: #FFF;
definisce il colore che deve avere il testo. E’ possibile sostituire i valori esadecimale (es. #FFF = bianco) con i nomi inglesi dei colori. Es. color: red; per avere un testo rosso, oppure blue e così via.

background: #4c4c4c;
definisce il colore di sfondo che devono avere i titoli.

background-image:url("http://indirizzo_immagine.jpg");
background-repeat:no-repeat;
definisce, se lo si desidera, l’immagine da utilizzare come sfondo ai titoli.


Il risultato finale che dovrete avere nella colonna destra del Foglio di stile è il seguente:

  .content h3 {
   margin: 0px 0px 0px 0px;
   padding: 5px 10px 5px 10px;
   font-size: 12px
   font-weight: bold;
   line-height: 150%;
   color:#FFF;
   background-image:url("http://indirizzo_immagine.jpg ");
   background-repeat:no-repeat;
   }  

In alcuni siti, specialmente in quelli di poesia, i paragrafi iniziano sempre con una lettera a cui è associato uno stile diverso dalle altre. Un paragrafo in HTML è compreso tra i tag <p> e </p>.
Oltre a migliorare l’effetto grafico, questa decorazione diventa utile nella lettura per non sbagliare riga in testi molto lunghi.

Entrate nella sezione “Presentazione > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile. Nella colonna destra incollate le seguenti righe.

CSS

    #center p:first-letter{
    font-size:200%;
    font-weight: bold;
    }    

Il codice CSS che abbiamo scritto sopra è solo un punto di inizio da cui partire per dare l’effetto che più desiderate. Potete cambiare il colore, aggiungere dei bordi, etc. Ad esempio:

CSS

    #center p:first-letter { 
    border-style: outset;
    border-width: 2px;
    padding: 2px;
    font-weight: bold;
    font-size: 200%;
    background-color: yellow;
    }