Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

GuidaBlogger:
Script, Tecniche Seo, Trucchi Posizionamento.

Indice
• 10 Consigli utili per migliorare l'indicizzazione.

• Come reindirizzare un sito web

• Balloon a comparsa sopra il testo con descrizione

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

• Realizzare una gallery in stile LightBox

• 5 trucchi Css fondamentali

• Come Aumentare le visite al tuo Blog

• Creare un Form Semplice di registrazione

• Creare un Pop-up Ajax con Jquerry

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

10 consigli utili per migliorare l'indicizzazione

E' importante che le nostre pagine web siano realizzate con un codice pulito e conforme agli standard del
web, non solo per gli utenti, ma anche, e forse sopratutto, per i motori di ricerca, che apprezzeranno
sicuramente. Vediamo con qualche piccolo consiglio come si può ottimizzare il nostro sito o blog.

1) Meno codice si riesce ad utilizzare, meglio è.

2) Non usare Css o Scripts inline.

3) Se utilizziamo un codice Css o Script molto lunghi, è meglio esternalizzarli anzichè metterli tra i tag
head.

4) Usiamo il codice semantico. I titoli devono stare sui tag h1,h2,h3, i termini importanti vanno tra i tag
strong e per le citazioni usiamo sempre i blockquote.

5) Non utilizziamo meta-tag inutili, ma solamente quelli descrittivi.

6) I microformati rendono il nostro sito più leggibile e comprensibile.

7) Le tabelle devono essere usate solamente per contenere dati, per il layout affidiamoci ai div.

8) Usiamo rel="external" per i link esterni al nostro sito, ed evitiamo i popup.

9) Non utilizzare mai i link con Javascript.

10) I contenuti importanti devono essere sempre realizzati in Html, evitare di realizzarli in Flash o
Ajax.

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

Come reindirizzare un sito web

Per vari motivi capita spesso di dover cambiare un nostro link molto popolare, come nel caso di cambio
dominio, o perchè abbiamo cambiato il sistema di archiviazione del nostro sito, e quindi se una certa
pagina ha tanti e importanti backlink, non possiamo perderli perchè danneggerebbe sia il nostro traffico,
che il pagerank, perciò riccorriamo ad un redirect.

Riccorriamo al file .htaccess, così se abbiamo una certa pagina su http://miodominio/post0001,

potremmo ad esempio fare in modo che chi digiti quell'indirizzo, venga reindirizzato a http://miodominio/
giugno08/post0001.

1) Creiamo un file .htaccess nella directory che ci interessa: nella cartella principale del sito se dobbiamo
reindirizzare tutto il sito, altrimenti in una specifica in caso di una singola pagina.

2) Apriamo il file con un editor di testo: Blocco Note va più che bene.

3) Copiamo questo codice e modifichiamo solamente l'indirizzo, prima cambiamo il vecchio, poi il nuovo:
Redirect 301 /old/old.html http://www.you.com/new.html

Altrimenti inseriamo questo codice php nella pagina originale, e accertarsi che abbia l'estensione .php:
<? header( "HTTP/1.1 301 Moved Permanently" ); header( "Status: 301 Moved Permanently" ) header(
"Location: http://www.new-url.com/" ); exit(0); ?>

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

Balloon a comparsa sopra il testo con descrizione

Avere un Blog che abbia un design particolare, fuori dagli standard, aiuta. Un blog scarno con
contenuto di elevata qualità fà sucesso, ma se il blog ha anche la grafica accattivante, ne farà di più.
Vediamo un piccolo dettaglio da apportare alle nostre pagine per renderle accattivanti.

Quando dobbiamo far apparire una spiegazione su una certa parola o frase, si ricorre all'attributo title, ma
non è bellissimo da vedere, specie se si pensa che con due righe di javascript si può realizzare qualcosa
di più stiloso. Vediamo qua sopra un esempio:
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;am

Allora, è molto semplice, copiamo questo codice prima del tag </head>:

<link href="'http://www.risparmiocitta.it/source/style.css'" media="'screen'" rel="'stylesheet'"

type="'text/css'/"><script src="'http://www.risparmiocitta.it/source/script.js'" type="'text/
javascript'"></script>
Tra il testo che ci interessa inseriamo questo:

<span class="hotspot" onmouseover="tooltip.show('Qua la descrizione da apportare');"

onmouseout="tooltip.hide();"> QUI IL NOSTRO TESTO </span>

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

Realizzare una gallery in stile LightBox

Creare una gallery con tutte le nostre foto per il nostro Blog è oggi più che mai una cosa
semplicissima. Il mondo del web 2.0 ci porta tante tecniche a tal proposito, ma oggi vediamo come
realizzarne una con moo.rd Virtual Box, un'estensione del potente mootools.

Per realizzarla ci basta qualche riga di codice copia/incolla, un editor (Irfan View và più che bene) e 5
minuti di pazienza.Vediamo una demo.

Apriamo con blocco note o col vostro editor preferito la pagina su cui desideriamo inserire la gallery ed
inseriamo prima del tag </head> questo codice:

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

<style>#virtualBoxFullPage {font-size:12px;}p#virtualCaptionTitle {color:#3366CC; margin:0px;font-

size:16px;padding-left:4px;} p#virtualCaptionContent {margin:0px;padding-left:4px;}div#thumbs img
{border:2px solid #FF6600;margin-right:10px;float:left;}div#virtualArrowsBox a
{color:#3366CC;float:left;margin-right:10px;padding:6px 6px 6px 0px;}div#virtualArrowsBox
a:hover{color:#FF6600;}div#virtualArrowsBox a#virtualCloseButton {color:#FF6600;float:right;padding-
right:0px;margin-right:0px;}div#virtualArrowsBoxText {padding:2px 6px 0px
0px;color:#CCCCCC;}</style><script src="http://www.risparmiocitta.it/source/
moo.rd_1.3.1_mootools_1.2.js" type="text/javascript"></script><br><script type="text/javascript">
window.addEvent('domready', function() {var virtual = new Virtual.Box({enable: {arrows:
true,closeButton: true},effect: 'open',leftArrowText: 'prev',rightArrowText: 'next',closeButtonText:
'close',captionOpacity: 0.6}).setLight('#000000');});</script>

Il gioco è fatto, ora non ci resta che inserire le nostre immagini, nel parametro alt inseriamo il numero
progressivo della slideshow, e nel tag a che crea il collegamento all'imaggine, inseriamo la class virtualbox,
nel title inseriamo le descrizione dell'immagine e ovviamente utilizziamo href con dentro l'indizzo
dell'immagine, come nell'esempio:
<a id="ok1" class="virtualbox" href="img/1.jpg" title="Wonderful Beach :: A wonderful tropical
beach"><img id="img1" src="img/1_little.jpg" alt="1" /></a>

Nell'esempio abbiamo utilizzato un'immagine di anteprima come collegamento alla gallery, ma possiamo
utilizzare anche un semplice testo, come nell'esempio:
<a id="ok1" class="virtualbox" href="img/1.jpg" title="Wonderful Beach :: A wonderful tropical beach">
QUA INSERISCI IL TESTO </a>

Scarica la demo

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

5 trucchi Css fondamentali

Vediamo come risolvere alcuni problemi abbastanza frequenti per chi è alle prime armi con i fogli di stile
Css.

1) Centrare un testo o un immagine verticalmente in un div

Questo è uno dei problemi più frequenti per chi incomincia a studiare i css. La soluzione è molto
semplice, vediamo un esempio:

<div style="height:200px;
width:200px; line-height:200px;
border:1px dotted #09f; text-
align:center;">testo</div>La
Esempio
tecnica sta nel dare un line-
height uguale all'altezza del div.

2) Centrare un div nel body

Questo è ancora più semplice del precedente, ma nonostante, c'è chi chiede aiuto sui forum su come
fare:

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

<div style="margin:0 auto">testo</div>

Su Internet explorer basterebbe anche un text-align ma gli standard Css, che vengono rispettati su
Firefox, Opera e Safari, impongono di dare il margin:auto.

3) Div affiancati

Per fare in modo che i nostri div siano ben allineati e affiancati, ci viene incontro l'attributo float che
distribuisce, a seconda delle nostre neccessità, gli elementi a destra o sinistra.

esempio 1 esempio 2 esempio 3

<div
style="float:left">testo</div>

4) Div non affiancati

Inizialmente chi si avvicina ai css tralascia questo problema, ma quando incominci a realizzare layout
appena un pò più complicati, non puoi fare a meno di venir a contatto con questo problema. La soluzione
è l'attributo clear, che seguito da both fa in modo che un div non si affianchi ad un altro, e che vada a
capo da solo.
Un esempio:

<div style="clear:both">testo</div>

5) Cambiare lo stile ai soli elementi di un div

Dopo aver impostato uno stile a tutti gli elementi di una pagina, capita di dover cambiarli in un
determinato punto, come per esempio i valori dei link a in un div speciale.
Se per identificare gli attributi di un'intera pagina dei tag a si procede così:
a {color:blue; text-decoration:none} a:hover {color:red}

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

Per cambiarli in un sola div procederemo così:

#div a {color:blue; text-decoration:none} #div a:hover {color:red}

Nei prossimi post spiegheremo tecniche Css più particolari. Se volete chiarimenti o suggerire alcune
tematiche, vedremo di approffondire nei prossimi post.

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

Come Aumentare le visite al tuo Blog

Vediamo come sia semplice aumentare le visite al tuo Blog senza intervenire su di esso. La rete ci
propone tanto materiale a proposito, vediamo come.

1) Ottimizza il tuo canale YouTube, o creane uno.

Crea o ottimizza il tuo spazio personale su YouTube inserendo l'url del tuo blog sul tuo profilo, così
apparirà sul tuo canale in primo piano e sarà sempre a portata di Click per gli altri utenti.

Realizza dei video curiosi, che attirino l'attenzione, qualcosa di pazzo, qualcosa fuori dal normale, e
inserisci il logo del tuo sito e l'url ben in evidenza. Nella descrizione del video metti sempre prima
l'indirizzo del tuo blog. In questo modo crei numerosi backlink, ed ogni utente che guarda il tuo video,
sarà tentato di andare a vedere il tuo blog per trovare altro materiale.

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

2) Utilizza FaceBook per aumentare i tuoi contatti

FaceBook è il più grande social network della rete. Inanzitutto metti il link al tuo blog nell'home-page del
tuo profilo. Cerca nuovi amici, conosci tante persone della tua e di altre città e di altri stati. Individua chi
ha interessi simili ai tuoi o in linea con il tema del tuo blog e contattali, diventane amico e proponili il tuo
blog.

3) Utilizza i tuoi contatti Msn

Le nostre lunghe liste di contatti su Msn può essere una fonte preziosa. Non tutti saranno interessati al
nostro blog, ma anche se solo ne riusciremo a fidelizzarne uno sarà buono. Se è la tua lista è molto
lunga, dividila in due parti, altrimenti se son pochi contatti prendila tutta. Ad ogni nuovo post avverti
dell'aggiornamento fatto tramite un'email semplice, breve e scritta bene a una parte della lista: una volta
una, una volta l'altra, così eviti di essere invadente e di fare spam. Blogger possiede di default questa
opzione, vai su Impostazioni ed attivala.

4) Utilizza Emule

Su Emule si concentra una mole di utenze enorme che cerca materiale. Se hai un blog tematico, crea un
ebook con i tuoi 10 migliori post, e dai un nome al file accativvante che sia in linea col contenuto, e
ricordati di inserire prima [ITA]. All'interno dell'ebook metti un'intestazione in ogni pagina con l'indirizzo
del tuo Blog. Poi ovviamente mettilo in condivisione per renderlo disponibile.

Precisiamo che questi consigli sono da utilizzare con buon senso, non fare mai spam, non esagerare
mai in nessun caso, non essere invadente nella promozione. L'effetto altrimenti sarà il contrario.

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

Creare un Form Semplice di registrazione

Oggi vediamo come puoi crearti un piccolo form di registrazione per il tuo sito/blog, senza usare
database. I dati verranno spediti via mail: una copia a te, e una copia di conferma all'utente che ha
effettuato la procedura. Nota bene, basta fare solo copia e incolla per utilizzarlo: dovrete intervenire
sul codice solamente per inserire la vostra email, tutto qua!

I parametri che utilizziamo sono personalizzabili volendo, comunque quelli che andremo ad utilizzare
sono:
• Nome;
• Cognome;
• Data di Nascita;
• Città;
• Cellulare;
• Email.

Ora copia e incolla questo codice html sul punto in cui vuoi che appaia:
<form action="elabora.php" method="GET">Nome: <input name="nome" type="text" size="20"><br
/>Cognome: <input name="cognome" type="text" size="20"><br />Data di Nascita: <input
name="data" value="__/__/____" size="20" maxlength="10"><br />Città: <input name="citta"
size="20"><br />Cellulare: <input name="cellulare" size="20" maxlength="10"><br />Email: <input
name="email" type="text" size="20"></form>

Ora crea un pagina e nominala elabora.php e copia questo codice Php prima del tag </head>:

<?php

#variabili

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

$nome = trim(stripslashes($_GET['nome']));
$cognome = trim(stripslashes($_GET['cognome']));
$data = trim(stripslashes($_GET['data']));
$citta = trim(stripslashes($_GET['citta']));
$cellulare = trim(stripslashes($_GET['cellulare']));
$email = trim(stripslashes($_GET['email']));
$time = date('H:i');
$date = date('d/m/y');
$ip = $REMOTE_ADDR;

if($nome == "" || $cognome == "" || $data == "" || $citta == "" || $cellulare == "" || $email == "" ) { echo"Tutti i campi
sono obbligatori!"; exit(); };

mail("inserisci qua la tua email","Registrazione utente","Un nuovo utente si è registrato!\r\n\r\n\r\nNome:

$nome\r\n\r\nCognome: $cognome\r\n\r\nData di Nascita: $data\r\n\r\nCitta: $citta\r\n\r\nTelefono:
$cellulare\r\n\r\nEmail: $email\r\nL'indirizzo ip è: $ip\r\n\r\nL'utente si è registrato il giorno $date alle ore $time");

mail("$email","Registrazione completata","Sign. $nome $cognome, la sua registrazione è stata completata con

successo.\r\nDi seguito le riportiamo i suoi dati:\r\nNome: $nome\r\nCognome: $cognome\r\nData di nascita:
$data\r\nCittà: $citta\r\nTelefono: $cellulare\r\nEmail: $email\r\nA presto!");
?>

Se vogliamo anche far comparire un riepilogo dei dati sul blog, inseriamo questo codice all'interno del
body nel punto in cui vogliamo:

Nome: <?php echo $nome; ?><br />

Cognome: <?php echo $cognome; ?><br />
Data di Nascita: <?php echo $data; ?><br />
Città: <?php echo $citta; ?><br />
Cellulare: <?php echo $cellulare; ?><br />
Email: <?php echo $email; ?>

Come abbiamo dimostrato, è molto semplice, basta solo un copia/incola. Vorrei comunque ricordare che
utilizzando questo form vengono gestiti i dati sensibili degli utenti, quindi cerca di aver buon senso
nell'immagazinazzione, protezione e utilizzo.

Per ogni problema sullo script, non esitare a chiedere.

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

Creare un Pop-up Ajax con Jquerry

Applicare al tuo Blog degli effetti particolari porta un valore aggiunto importante. Se hai dei link che
aprono dei pop-up a pagine interne, puoi rendere la cosa un pò più gradevole ed aggirare il blocco
pop-up dei browsers.

Basta copiare questo codice e incollarlo prima del tag </head>:

<script type="text/javascript" src="http://www.jasons-toolbox.com/SlightlyThickerbox/js/jquery.js"></script>

<script type="text/javascript" src="http://www.jasons-toolbox.com/SlightlyThickerbox/js/thickbox.js"></script>
<link rel="stylesheet" href="http://www.jasons-toolbox.com/SlightlyThickerbox/css/thickbox.css" type="text/css"
media="screen" />

Vai sul link che ti interessa e nel codice inserisci questi attributi nel tag <a>: class="thickbox"

Noizexperience Blog | Web development / Web Design 4 Web 2.0

Noizexperience Blog | Questo ebook è una raccolta dei migliori post presenti sul Blog.

rel="AjaxGroup", come nell'esempio qua sotto:

<a href="paginadiprova.html" class="thickbox" rel="AjaxGroup" >Link di prova</a>

L'effetto si può applicare anche per visualizzare immagini.

Guarda la demo

N.B: lo script funziona solo con pagine interne al tuo sito, quindi se linki a siti esterni non funzionerà.

Noizexperience Blog | Web development / Web Design 4 Web 2.0