Risorse Web per i Developer e Designer

1) Come creare Bottoni in stile Media Player

Tutorial di Photoshop che illustra la procedura per realizzare pulsanti in stile Windows Media Player 11.

2) Esempio di Layout Orizzontale

La moda del layout Orizzontale sta dilagando. Questo esempio può essere utile per analizzarne i pro e contro.

3) Creare form Html

Un servizio web 2.0 molto valido in grado di crearci il codice html di Form. Non dovremmo fare altro che selezionare le nostre preferenze: colore, quantità di campi, dimensioni ecc. ecc.

4) Creare effetti Javascript con Moo.rd

Moo.rd è una libreria Javascript molto potente e utile basata sul framework Mootools. Molti degli script che vengono pubblicati su questo blog, sono realizzati tramite moo.rd.

5) Scaricare Icone, Immagini e ClipArt vettoriali gratis

JuliusDesign presenta un elenco di 50 link a siti dove poter scaricare tante risorse vettoriali gratuitamente. Imperdibile per i Web Designer e bloggers: si trova davvero tanto materiale utile.

Trucchi per Blogger

Nonostante Blogger sia di proprietà di Google, quest'ultimo non gli dedica tutto il supporto dovuto per fare una concorrenza seria alle altre piattaforme. Gli ultimi aggiornamenti non hanno soddisfatto granchè gli utenti, e chissà quando verranno rilasciati i prossimi.

Vediamo di migliorare alcuni parametri per aumentare la visibilità sui motori di ricerca.

Come inserire il titolo del post come titolo della pagina

Questo trucco permette una migliore indicizzazione da Google. Infatti normalmente sul titolo della pagina viene visualizzato il titolo del Blog, e poi quello del post. In questa maniera verrà mostrato solo il titolo del post, che contiente molte keyword e quindi avrà più possibilità di salire tra i risultati.

Accedi alla tua bacheca, vai su Layout e Modifica Html. Tra le prime righe di codice dovresti trovare questo codice:
<title><data:blog.pageTitle/></title>
cancellalo, e al suo posto copia e incolla questo:

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<title><data:blog.title/></title>

<b:else/>

<title><data:blog.pageName/></title>

</b:if>

Mostrare solo l'immagine dell'header, e nascondere il titolo del blog.

Molti utenti preferiscono, come io, inserire nell'header una bella immagine jpg, piuttosto che lasciare il normale titolo del blog in testo h1. In tal caso scegliendo questa soluzione si perde qualcosa in termini di indicizzazione. L'ideale è inserire l'immagine come sfondo del div che contiene l'header e "nascondere" l'h1 dalla grafica, ma renderlo sempre visibile per Google.

Il codice css a cui dobbiamo fare riferimento cambia da template a template, quindi non posso dirvi quale classe specifica modificare. Ma vediamo di arrangiarci.

Accedi alla sezione Modifica html e cerca #header. Subito dopo il primo }, inserisci questo codice:
#header h1 {text-indent:-10000px}

Aumentare la percentuale di keyword importanti

Possiamo realizzare lo stessa tecnica del titolo, anche sulla descrizione del Blog. Prima di tutto è da notare che la maggior parte dei template scrive la descrizione come semplice testo, ma se inseriamo una descrizione con tante keyword, la impostiamo in h2 e la nascondiamo, possiamo ottenere dei buoni risultati su Google.

Sul codice Css #header h1 di cui abbiamo già parlato sopra, apporta questa modifica:
#header h1, h2 {text-indent:-10000px}

Dopo aver salvato, spunta la casella Espandi i modelli widget, e cerca la scritta:

class='description'

Il tag contenente questa classe dovrebbe iniziare con p, sostituiscila con h2, e accertati che anche la chiusura del tag sia in h2.

Tutti questi trucchetti aumenteranno sicuramente la tua posizione su Google, non subito ovviamente, i risultati incominceranno a vedersi dopo qualche settimana.

Nei prossimi post vedremo altri trucchi. Mentre se hai qualche problema nell'applicarli, non esitare a chiedere aiuto, siamo qui per questo.

2° Mese: alcune considerazioni

Sembra ieri quando ho deciso di aprire questo blog, e invece sono già passati 2 splendidi mesi. Questa nuova "experience" mi sta portando tante soddisfazioni: sto conoscendo tante persone nuove, le mie conoscenze sul developing e design sono sempre maggiori, e scopro ogni giorno angoli del web di nicchia che prima mai avrei potuto conoscere.

I risultati del blog sono molto soddisfacenti: Google Analitycs segna una costante crescita, e da qualche settimana, grazie ad un piccola modifica alla struttura del codice del template, il Blog è parecchio salito sulla serp di Google, e di conseguenza gli accessi provenienti dalle ricerche sono tanti ogni giorno. Buona parte dei post risulta tra i primi risultati per le querry di ricerca con domande relative al developing, e FeedBurner.com mi segnala ogni giorno tanti lettori ai Feed.

Insomma, tante soddisfazioni! Ma purtroppo il tempo non basta mai: lavoro, impegni e vita sociale. Infatti vorrei poter riuscire a scrivere un post al giorno, ma non sempre è possibile, non tanto per scriverlo in se stesso, ma per quanto riguarda lo studio che ne faccio prima che porta via tanto tempo: realizzazione del codice o video, semplificazione, realizzazione grafica, ottimizzazione ecc. ecc.

Ringrazio di cuore chi segue il Blog, chi porta il suo contributo con i commenti o con i voti ai post, e chi si limita solo a leggere, chi mi ha segnalato gli errori che ho commesso, e chi mi ha suggerito alcuni consigli, chi mi ha aggiunto al suo BlogRoll nel suo Blog e chi mi chiede aiuto via email..insomma..tutti i presenti!

Approffito del post per fare una proposta. Chi ha qualche idea per qualche speciale collaborazione, iniziativa, partnership o altro, mi contatti. Da Settembre vorrei poter realizzare qualcosa di nuovo in collaborazione con altri Blog, quindi se siete interessati o conoscete qualcuno che lo è, o avete link da segnalarmi, fatemi sapere!

Creare l'effetto riflesso su un' immagine e testo

Nell'era del web 2.0 l'effetto riflesso la fà da padrona. Per realizzarlo basta un minuto su Photoshop, vediamo come.

Sul video potrai seguire passo passo le procedure, mentre per i dettagli tecnici consulta il post qua sotto.

Guarda l'esempio.

1) Inserisci un testo o un'immagine, e dagli una leggero riempinto sfumatura su opzione di fusione.

2) Crea un nuovo livello, seleziona un'ovale a metà del testo o immagine, riempilo di bianco e imposta l'opacità a circa 10 o 20%;

3) Duplica l'immagine, capovolgila, mettila sotto l'originale e dagli una sfumatura alta che finisca col bianco o con un colore uguale allo sfondo della pagina web.

Menù Rollover in puro Css senza pre-load

In un precedente articolo in cui si realizzava un menu rollover in puro css, abbiamo lasciato in sospeso il problema iniziale del pre-load. Vediamo con l'utilizzo di un piccolo trucco Css come puoi risolvere il problema.

Guarda l'esempio.

Per aggirare il caricamento della seconda immagine che farà il rollover non devi fare altro che creare due immagini in una, ossia, nello stesso file immagine inserisci nella parte alta l'immagine normale e nella parte bassa il rollover. Quindi posizionando il mouse sopra la voce del menù, non farai altro che spostare l'immagine verso il basso.

Ogni voce conterrà un'immagine di sfondo duplicata: nella fase normale si vedrà la parte superiore, passandoci sopra col mouse, si vedrà solo la parte inferiore. Così facendo si aggirà il pre-load perchè si carica solamente un'immagine doppia.

Vediamo quindi in pratica come si realizza, analizzando l'esempio:

Il codice Css:

#menu {margin:0; padding:0; list-style-type:none; height:60px}

#menu li {width:100px; height:60px; float:left; background-position:top}
#menu li:hover {background-position:bottom}
#menu a {width:100px; height:60px; line-height:60px; display:block; vertical-align:middle}
.home {background-image:url(menu_01.jpg);}
.works {background-image:url(menu_02.jpg);}
.blog {background-image:url(menu_03.jpg);}
.email {background-image:url(menu_04.jpg);}

Il codice Html

<ul id="menu">
<li class="home"><a href="#"></a></li>
<li class="works"><a href="#"></a></li>
<li class="blog"><a href="#"></a></li>
<li class="email"><a href="#"></a></li>
</ul>

Come vedi il Css si basa quasi unicamente sull' ID menu, il quale detta le regole per tutti gli elementi che ci stanno dentro. Poi per ogni voce viene indicata l'immagine da usare.

Il markup html invece è un semplice elenco che buttà giù la struttura.

Guarda l'esempio.
Scarica il sorgente e il file Photoshop.

Prova a realizzarlo anche tu prendendo spunto da questo esempio di base, e pubblica il link al tuo lavoro sui commenti. Io provvederò a pubblicarlo sul post con il link al tuo Blog.
Se non ci riesci o trovi qualche difficoltà, ti fornirò aiuto.

Un form per lo Scambio Link

Ricevi molte proposte di scambio link che ti intasano i commenti? Ricevi tante email lunghe e noiose da leggere che in pratica alla fin fine ti propongono solo uno scambio link? Vediamo come realizzare un form da inserire sul tuo Blog, e che con pochi parametri assicura meno stress per tutti: sia per chi chiede, sia per chi riceve la proposta.

Utilizziamo un piccolo form php contenente i seguenti parametri:

• Nome;
• Email;
• Link da proporre
• Breve descrizione del sito/blog.

Questo modulo di richiesta puoi utilizzarlo nella sidebar in maniera permanente, o altrimenti dedicare una pagina col link diretto ed in evidenza nel menù.

Iniziamo a Realizzare!
Inserisci questo codice Css in un foglio di stile esterno o direttamente tra i tag style :

#form *{float:left; margin:0; list-style-type:none}

#form li {display:block; clear:both; margin-bottom:10px}

#form label {width:150px; text-align:right}

Ora copia ed incolla l'html dove vuoi che venga visualizzato il form:

<form method="get" action="scambiolink.php">

<ul id="form">

<li><label>Nome: </label> <input type="text" name="nome"/></li>

<li><label>Email: </label> <input type="text" name="email"/></li>

<li><label>Link del tuo sito/blog: </label> <input type="text" name="link"/></li>

<li><label>Breve descrizione: </label> <textarea name="descrizione"></textarea></li>

<li><label>Invia il Link </label><input type="submit" value="Ok"/></li> 

</ul>

</form>

Ora crea un nuovo file e nominalo scambiolink.php ed inserisci questo codice:
<?php
$nome = $_GET['nome'];
$email = $_GET['email'];
$link = $_GET['link'];
$descrizione = $_GET['descrizione'];
$miourl = 'http://www.tuosito.it';
mail("tuaemail@mail.com","$nome ti propone uno scambio link","Nome: $nome \r\nEmail: $email \r\nLink: $link \r\nDescrizione: $descrizione");
mail("$email","Ok! Link consegnato a $miourl","Nome: $nome \r\nEmail: $email \r\nLink: $link \r\nDescrizione: $descrizione");
?>

Sostituisci le scritte in rosso rispettivamente col nome del tuo sito e il tuo indirizzo email. Nella pagina scambiolink.php puoi inserire un messaggio di conferma tramite semplice testo, e un link che ti riporta all'home page.

Nel caso in cui vuoi che dopo aver compilato il modulo, l'utente venga rimandato direttamente sull'home-page, copia ed incolla questo script php subito dopo quello arancione:

<? header("location:$miourl"); ?>

Lo script ti manderà un'email di richiesta, che tu potrai valutare, ed eventualmente dopo inserirai a mano i dati sul tuo Blog. A chi chiede lo scambio riceverà una notifica via email.

Per utenti Blogger

Se utilizzi Blogger inserisci solamente il form html e css (se non sai come inserire il css clicca qui), mentre la pagina in php, con i suoi relativi script, la dovrai inserire su uno spazio web esterno (altervista.org fornisce questo servizio gratuitamente), dopo di che inserisci nell'attributo action (del form html su blogger) l'indirizzo completa che rimanda al file php esterno.

Per chiarimenti e/o se riscontri malfunzionamenti possiamo verificarli insieme.

Come si Progetta una Pagina Web

Occuparsi dell'ideazione e progettazione di pagine web non è qualcosa che si improvvisa.Vediamo di capire insieme come si può arrivare ad un prodotto finale veramente ottimale seguendo alcuni consigli.

1) La struttura sono le fondamenta
Fai una piccola analisi sul cosa vuoi realmente costruire. Pensa come se fossi tu l'utente: cercare di capire quale sia la miglior posizione degli elementi, qual'è il miglior modo per trovare quello che cerchi? Prendi una decsione: cos'è realmente utile e cosa no. Cosa potrebbe farti confondere nella ricerca dei contenuti? In fondo la cosa che l'utente desidera di più è trovare ciò che cerca nel modo più facile possibile e nel minor tempo.

A chi ti rivolgi? Qual'è il tuo target di riferimento? Prendi in considerazione la fascia di utenza a cui ti dedichi, e realizza una palette di colori e font in cui quegli utenti in qualche modo si riconoscano.
Facciamo qualche esempio:

- Stai realizzando un sito per uno studio di consulenza finanziaria: scegli uno sfondo bianco, font Arial / Verdana nero o grigio scuro, imposta il layout coi colori grigi o marron chiari, tieni uno stile sobrio ed elegante.

- Stai realizzando un sito per la ludoteca comunale: scegli uno sfondo di un colore chiaro, usa un font di dimensioni almeno 13/14 pixel, come Times New Roman o Comic Sans con un colore quasi scuro, ma in netto contrasto con lo sfondo, colora i link con colori vivaci ma leggibili. imposta il layout con colori che vanno dal celeste al verdolino, insomma tinei il sito colorato ma non scordarne l'usabilità.

-Stai realizzando un sito per una band metal: ovviamente sfondo nero, font Trebuchet o Arial sul bianco, imposta il layout con i rossi scuri e grigi.

2) Prendi carta e matite e disegna!
Prima di lavorare col Photoshop fai degli schizzi su carta. Inizia con delle bozze a mano libera, definisci più o meno cosa vuoi fare solamente con una matita, dopo che hai deciso prendi un righello e un nuovo foglio e rielabora in una scala più o meno precisa il layout, e dopo aver disegnato la struttura fai qualche fotocopia se hai la possibilità. Dopo di che prendi le matite colorate e colora. Prova più combinazioni di colori, e non aver paura di perdere qualche minuto in più: abbi pazienza, fai con calma per ottenere un lavoro più curato ed elaborato.

3) Imponi il tuo Stile

Per la rete si trovano tanti effetti da applicare alle immagini e al codice delle pagine web, ma usa uno stile ben definito, non mescolare troppa roba tutta insieme per rendere il tuo sito più cool o web 2.0.

Tieni presente il concetto del Logo. La prima cosa che un'utente nota è il logo, se questo manca, o non è ben enfatizzato, le probabilità che scambi il tuo sito per un sito "qualunque" sono elevate, quindi imponi la tua importanza, promuovi il tuo marchio, o del cliente che sia.

4) Rendi la vita più facile agli utenti
Un sito con un design spettacolare ma senza usabilità, non ha alcun valore. Rendi la navigazione semplice, come già detto al punto uno, tieni conto di come si muovono gli utenti per trovare ciò che cercano.

Un'utente che non riesce a trovare ciò che gli serve nel tuo sito, difficilmente tornerà.

5) La grafica dev'essere Coerente
Realizzare una grafica con diversi tipi di font per ogni sezione del sito non è coerente, e ciò porta a confusione. Cerca di tenere lo stesso carattere per tutta la pagina, o al limite, un carattere in linea con l'altro. Per esempio evitare di associare Arial e Comic Sans, al massimo si può con Arial e Verdana. Tieni presente questo concetto anche per gli elementi grafici, non fare minestroni: primo perchè porta confusione all'utente, secondo è anti-estetico.

6) Tecnologia ok, ma se serve.
L'utilizzo degli effetti come mootools e jquerry rendono le pagine più fresche, vive, più semplici e in alcuni casi più veloci. Perfetto. Ma esagerare, come in tutte le cose, fa male. Utilizza tecnologie utili, non appesantire le pagine per impressionare i tuoi utenti: ricorda che se una pagina ci mette più tempo a caricare, l'utente se ne va. Ricorri alle tecnologie sopratutto per risolvere problemi, non per crearli.

7) Spaziature: meno stress, più cool.
Impostare i contenuti con gli spazi giusti è importante e più gradevole, tieni un'interlinea nel testo che sia ampia al punto giusto da poter leggere con chiarezza, quindi evita linee troppo vicine, e tieni il contenuto sempre un pò spostato dal bordo, anche qui senza esagerare. L'esempio qua sotto rende l'idea di come il terzo riquadro sia più piacevole e leggibile.

Da Evitare Prova per vedere come funziona un'interlinea giusta e gradevole.

Da Evitare Prova per vedere come funziona un'interlinea giusta e gradevole.

Può andare Prova per vedere come funziona un'interlinea giusta e gradevole.

Lo sfondo del blog come quello di Barack Obama - Tutorial

Mettiamo da una parte le simpatie politiche. Il sito di Barack Obama è sicuramente il più bello graficamente e più innovativo tra tutti gli ex candidati alle primarie per le presidenziale americane del 2008, sia essi democratici che repubblicani. Lo sfondo del sito è in primis la cosa che colpisce di più, luminoso e vitale.

Vediamo come puoi realizzare qualcosa di simile: una base da cui partire per realizzare qualcosa di più personalizzato per il tuo Blog.
Per vedere un'esempio del prodotto finale che potrai ottenere seguendo il tutorial clicca qui.

Sul video potrai seguire passo passo le procedure, mentre per i dettagli tecnici consulta il post qua sotto.

Imposta le Guide
Immagina di avere una pagina con un classico layout da 900px, quindi imposta le dimensioni del foglio di lavoro a 1000px per un'altezza di almeno 800px. Imposta le guide verticali 0, 50 e 100px poi su 900, 950 e 1000px. Quelle orizzontali su 200px e 700px.

Illumina e Illumina!
Crea un nuovo livello, e disegnaci un ovale orizzontale e riempilo di bianco. Ora su opzione di fusione azzera l'opacità di riempimento e crea un bagliore esterno. Posizionalo in maniera orizzontale in modo tale che il suo punto più alto tocchi la linea orizzontale del foglio a 200px. Creane due copie e fai lo stesso verticalmente.

Crea un nuovo livelo, e seleziona un rettangolo partendo dalla guida orizzontale a 200px, per la verticale da 100 a 900px e riempilo di bianco. Questo sarà lo sfondo dei contenuti. Dagli un pò di ombra impostando la posizione a 90 gradi.

Crea ancora un nuovo livello, e disegnaci un cerchio, non per forza regolare. Coloralo di bianco, poi vai su opzioni di fusione e azzeragli l'opacità di riempimento e creali una sovrapossizione radiale. Guarda il video per capire meglio.

Duplica tante copie quanto basta, e per ognuna impostane un'opacità e dimensione diversa.

Ultimi ritocchi

Crea un nuovo livello, e riempilo di nero. Vai su Filtro > Rendering > Riflesso Lente, e applica l'effeto sopra il nuovo livello. Dopo di che vai su opzioni di  fusione ed imposta Schiarisci come Metodo fusione e diminuisci l'opacità quanto credi che basti.

Guarda il lavoro completato cliccando qui.
Per poi applicare lo sfondo sul tuo sito puoi seguire la fase finale descritta qui.

La "scaletta" del Blog

Il Poetto, Cagliari.

Dopo qualche settimana dallo start-up iniziamo a definire gli appuntamenti o "scaletta" del Blog. Credo questo "comunicato" possa mettere un pò più chiarezza per chi legge, e definire meglio i paletti del blog. Quindi duranta la settimana verranno pubblicati dei post con questi argomenti:

• Tutorial: Photoshop e Css spiegati tramite un video appositamente realizzato, con spiegazione dettagliata passo per passo;
• Web Development: approfondimenti su script Php o Javascript;
• Web Design: guide e approfondimenti sui Css, consigli per ottimizzare l'estetica della grafica web;
• SEO e Web Marketing: approfondimenti e tecniche sull'ottimizzazione per i motori di ricerca, e consigli per pubblicizzare il proprio blog ed aumentare le visite;
• Risorse Web novità: I migliori siti/articoli trovati durante la settimana che pubblicano risorse importanti ed imperdibili e che ovviamente stanno a tema con gli argomenti trattati qui sul blog.
  

Non mancheranno anche altri tipi di post che però avranno una cadenza meno regolare:

• Off-Topic: ogni tanto sforare col tema principale del blog fa sempre bene, quindi non mancheranno post su servizi web 2.0 "eccezzionali", e potrebbero venire riprese "importanti" notizie per approfondirle insieme a chi legge, e poi vedremo...;
• Considerazioni: più o meno ogni metà mese verrà pubblicato un post per fare il punto sulla situazione, sull'andamento del blog, chiarire alcuni punti, e più in generale per avere un contatto diretto con chi legge il blog..

Ci tengo a precisare che per questioni di tempo la scaletta settimanale non potrà quasi mai essere portata avanti al 100%, ma mi impegnerò per portarne a termine almeno i 2/3. Nessun argomento avrà un giorno certo di pubblicazione, tranne che per i Tutorial che saranno "quasi" sempre di Lunedì, e Risorse Web di Venerdì.

La Bandiera Americana e Italiana con Css

Oggi, 4 Luglio, è l'anniversario dell'Indipendenza degli Stati Uniti d'America. E che c'entra col Blog?! Approffitiamone per approffondire i Css e per analizzarne la sua potenza prendendo spunto da questa festa: vediamo come realizzare la bandiera degli Usa e, perchè no, anche quella Italiana.

Guarda l'esempio qui.

Analizzando il css notiamo la presenza di un solo Id per identificare il contorno della bandiera, la classe Blue detta le istruzioni per il rettangolo a sfondo, appunto blu, dove appiono le stelle, poi possiamo notare come il p della classe Blue detti le regole per il posizionamento delle stelline. A seguire poi troviamo le linee bianche e rosse.
#flag {
        width: 398px;
        border: 1px solid #ddd;
        margin: 0 auto;
        position: relative; }
    .blue {
        width: auto !important;
        width: 180px;
        background-color: #00348c;
        color: #fff;
        text-align: center;
        padding: 2px 0 5px 8px !important;
        padding: 2px 0 5px 0;
        position: absolute;
        top: 0;
        left: 0; }
    .blue p {
        letter-spacing: 12px;
        height: 14px;
        font-size: 20px;
        line-height: 14px;
        margin: 0; }
     p.stripe {
         height: 19px;
        font-weight: bold;
         text-align: right;
        padding: 0 5px;
        margin: 0; }
    .red {
        color: #f70029;
        background-color: #f70029; }
    .red::-moz-selection {
        color: #fff;
        background-color: #f70029; }
    .red::selection {
        color: #fff;
        background-color: #f70029; }
    .white {
        color: #fff;
        background-color: #fff; }
    .white::-moz-selection {
        color: #000;
        background-color: #fff; }
    .white::selection {
        color: #000;
        background-color: #fff; }


Il codice Html detta la struttura:

<div id="flag">

<div class="blue"> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p>

</div>

<p class="red stripe"></p>

<p class="white stripe"></p>

<p class="red stripe"></p>

<p class="white stripe"> </p>

<p class="red stripe"> </p>

<p class="white stripe"></p>

<p class="red stripe"></p>

<p class="white stripe"> </p>

<p class="red stripe"> </p>

<p class="white stripe"></p>

<p class="red stripe"></p>

<p class="white stripe"></p>

<p class="red stripe"></p>

</div>

E la bandiera dell'Italia come si fa? Ancora più semplice ovviamente. Vediamo che dice wikipedia: "La bandiera italiana è un tricolore composto da tre bande verticali di uguali dimensioni. Partendo dall'asta i colori sono: verde, bianco e rosso."

Partiamo col Css:

#italia {width:300px; border:1px solid #ccc; position:relative}

 #italia p {width:100px; height:150px; float:left; margin:0; border:0}

.verde {background-color:#336600;}

.bianco {background-color:#FFFFFF}

.rosso {background-color:#CC0000}


Il codice html ne butta già la struttura:
<div id="italia">
<p id="italia" class="verde"></p>
<p id="italia" class="bianco"></p>
<p id="italia" class="rosso"></p>
</div>

Questi sono solo dei piccoli esempi da cui partire e per rendersi conto di quanto si possa realizzare col Css con un pò di fantasia.

Come si toglie la NavBar di Blogger?

La navbar o barra di navigazione che compare di default su Blogger è uno strumento poco apprezzato dagli utenti, perchè spesso va in netto contrasto con la grafica. Rimuoverla è molto semplice, e il video qua sopra ne mostra il procedimento, ma vediamo in dettaglio come la poi rimuovere:

- Accedi alla tua dashboard o Bacheca;
- Vai sulla sezione Layout e poi clicca sotto su Modifica Html;
- Cerca nel testo la scritta: body {
- Incolla poco prima questo codice css: #navbar-iframe {display: none !important;}

Se hai seguito tutte le procedure sia sul video che sul testo e non riesci a cavarne piede, sono disponibile per analizzarlo insieme.

Creare un menu rollover con Photoshop e Css

L'utilizzo di Adobe Photoshop è fondamentale per un Web Designer poichè è uno strumento molto potente per realizzare la grafica web delle nostre pagine.Realizziamo un menù abbastanza semplice con l'effetto rollover utilizzando quindi Photoshop per realizzare la grafica e Html-Css per appliccarlo alle nostre pagine.

Il video riassume velocemente tutta la procedura, ma se vuoi approfondire o imparare ad usare Photoshop leggi l'articolo che segue.

Apriamo Photoshop
Crea un nuovo file e dagli le misure: supponiamo che intendi realizzare quattro pulsanti da 150px l'uno, quindi avrai una lunghezza totale di 600px per un'altezza di 50px. Come risoluzione metti il valore 72, che in genere è il più ottimale per il web.

Dal menu visualizza scorri verso giù e clicca su Mostra Righelli, e da Modifica > Preferenze >
Unità di misura e righelli > imposta i Pixel come unità.

Posizionati sul righello a sinistra, clicca e trascina la linea che compare fino al valore orizzontale 0, poi un'altra su 150, e così via per multipli di 150 fino ad arrivare a 600. Questa procedura serve per progettare il menù con delle misure precise, e grazie alle guide avremmo l'effetto calamita che ci aiuteranno ad impostare meglio il lavoro. Ovviamente sono solo degli oggetti virtuali, quindi non compariranno nel risultato finale.

Crea un nuovo livello, per fare ciò vai al menù sulla voce Livello > Nuovo > Livello. Posizionati sulla barra strumenti e clicca su Strumento Secchiello, seleziona il colore bianco e clicca sul riquadro dell'immagine. A destra sul pannello dei livelli, posizionati sopra, clicca col tasto destro sulla voce Opzioni di Fusione.

Nella finestra che compare cerca la voce Sovrapposizione Sfumatura e spunta il riquadro a fianco. A destra del riquadro compare una fascia colorata, cliccaci sopra ed imposta il colore nero a sinistra e grigio scuro a destra. Clicca su ok e torna all'interfaccia iniziale dove compare il nostro lavoro.

Cala una guida dal righello orizzontale e posizionalo a 1/4 circa dell'altezza in modo tale da impostare la base del testo. A sinistra sulla barra strumenti clicca sulla T che simboleggia il testo. Scrivi le 4 voci, nel nostro caso: Home, Chi Siamo, Portfolio, Contatti, e allineale al centro rispetto alle sezioni delle guide.

Ora diamo al menù un piccolo particolare per renderlo un pochino più speciale. Crea un nuovo livello, vai sulla barra strumenti e clicca sul primo pulsante a sinistra, ossia Strumento Selezione. Vai sull'immagine e seleziona in rettangolo lungo tutta la lunghezza e alto pochi pixel. Ora riempilo col bianco, vai su Opzioni di Fusione e imposta l'opacità con un valore tra il 5 e il 10. Guarda l'esempio:

Posizionati sulla barra strumenti e clicca su Strumento Sezione, sposta il cursore sull'immagine e per ogni riquadro creato dalle linee guida, seleziona un rettangolo. Ripeti l'operazione per ogni voce del menù. Dopo di che clicca col tasto destro sul numero della sezione e accertati che tutte le voci abbiano 150px di lunghezza, e che l'asse X sia basata su multipli di 150.

Dopo di che vai su file > salva per web, seleziona la finestra con il miglior rapporto peso/qualità e clicca su ok. Sulla finestra che compare, seleziona il formato Solo Immagini Jpg e salva con il nome menu001.

Torniamo sulla finestra principale e applica l'effetto che farà il rollover. Crea un nuovo livello, poi posiziona il cursore sulla barra strumenti, clicca su Selezione Ellitica e forma un ovale in modo che la parte bassa occupi tutta la lughezza sulla parte alta dell'immagine, riempi l'ovale di bianco e dagli un'opacità di valore 10. Guarda l'esempio:

Ora ripeti la procedura del salvataggio: File > salva per web > seleziona una finestra, clicca su ok, scegli Solo Immagini Jpg e salva con il nome menu002.

Inserisci il codice Css e Html
Terminato il lavoro di Grafica: ora devi applicare il menù sulla tua pagina html. Vai sul tuo editor e tra i tag style o sul tuo foglio di stile copia questo codice css:

#menu {margin:0; padding:0; float:left; list-style:none; height:50px}
#menu a {display:block; width:150px; height:50px;}
.home {background-image:url(menu001_01.jpg); width:150px;}
.home:hover {background-image:url(menu002_01.jpg); width:150px;}
.chisiamo {background-image:url(menu001_02.jpg); width:150px;}
.chisiamo:hover {background-image:url(menu002_02.jpg); width:150px;}
.portfolio {background-image:url(menu001_03.jpg); width:150px;}
.portfolio:hover {background-image:url(menu002_03.jpg); width:150px;}
.contatti {background-image:url(menu001_04.jpg); width:150px;}
.contatti:hover {background-image:url(menu002_04.jpg); width:150px;}


Per chi usa Blogger consiglio di dare un'occhiata a questa pagina per capire come applicare il Css.
Ora nel punto in cui vuoi compaia il menu inserisci questo semplice codice Html:

<ul id="menu">
<li id="menu" class="home"><a href="home.html"></a></li>
<li id="menu" class="chisiamo"><a href="chisiamo.html"></a></li>
<li id="menu" class="portfolio"><a href="portfolio.html"></a></li>
<li id="menu" class="contatti"><a href="contatti.html"></a></li>
</ul>

N.B:  Il menù funziona perfettamente con Opera, Firefox, Safari e IExplorer 7, mentre su IE 6 e inferiori non comparirà l'effetto rollover.

N.B 2:  Per risolvere il problema iniziale del rollover basta applicare un semplice Javascript pre-load. (thanxxx to Francesco)

Per vedere un'esempio del lavoro finito clicca qui.
Per scaricare tutti i file che abbiamo utilizzato clicca qui.

Come inserire script e css esterni in Blogger

Aggiungere file Javascritp e fogli di stile Css in Blogger è molto semplice:

1) Collegati a www.blogger.com.

2) Clicca su Layout:

3) Dopo di che clicca sulla voce Modifica Html

4) Inserisci il collegamento tra ]]></b:skin> e </head> come nell'esempio:

N.B: Il codice ]]></b:skin> equivale alla chiusura del tag </style>, quindi se devi inserire nuove classi e id nel css, inseriscili prima del codice in viola.

Come creare un BlogRoll in stile Mac

Tutti hanno un Blogroll, cioè un elenco di link a Blog che il Blogger segue e vuole rendere disponibili a propri lettori o semplicemente un elenco per scambio link, ma non tutti si curano di esaltarlo.

Vediamo insieme come realizzarne uno per il tuo Blog, basterà semplicemente fare copia e incolla ed inserire i tuoi link. Un'esempio lo trovi nella mia sidebar a sinistra.

Scarica qui il file zip contente il foglio di stile, tre javascript, tra cui il potentissimo Jquerry, e le due immagini di sfondo che ci servono. Ora estrai i file e caricali sul tuo server o spazio web. Dopo di che inserisci questo codice prima del tag </head>:

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="ddaccordion.js"></script>
<script type="text/javascript" src="mac-style.js"></script>
<link href="mac-style.css" rel="stylesheet" type="text/css" />

Nel caso in cui non hai uno spazio web in cui caricare i file, usa questo codice:

<script src='http://www.risparmiocitta.it/source/mac-slide-style/jquery-1.2.2.pack.js' type='text/javascript'></script>
<script src='http://www.risparmiocitta.it/source/mac-slide-style/ddaccordion.js' type='text/javascript'></script>
<script src='http://www.risparmiocitta.it/source/mac-slide-style/mac-style.js' type='text/javascript'></script>
<link href='http://www.risparmiocitta.it/source/mac-slide-style/mac-style.css' rel='stylesheet' type='text/css'/>

Ora inserisci il codice Html nel punto in cui vuoi che venga visualizzato:
<div class="applemenu">

<div class="silverheader"><a href="http://indirizzodelblog01.it" title="Brevissima descrizione01" rel="external"><strong>Nome del blog01.it</strong></a></div>
<div class="submenu">
Breve descrizione del blog01.<br />
</div>

<div class="silverheader"><a href="http://indirizzodelblog02.it" title="Brevissima descrizione02" rel="external"><strong>Nome del blog02.it</strong></a></div>
<div class="submenu">
Breve descrizione del blog02.<br />
</div>

<div class="silverheader"><a href="http://indirizzodelblog03.it" title="Brevissima descrizione03" rel="external"><strong>Nome del blog01.it</strong></a></div>
<div class="submenu">
Breve descrizione del blog03.<br />
</div>

<div class="silverheader"><a href="http://indirizzodelblog04.it" title="Brevissima descrizione04" rel="external"><strong>Nome del blog04.it</strong></a></div>
<div class="submenu">
Breve descrizione del blog04.<br />
</div>

</div>

Ora hai il tuo BlogRoll in stile Mac, non ti resta che editare le voci che ho segnato in Rosso e Arancione per poter inserire i tuoi link ai Blog. Per personalizzare i colori e le dimensioni edita direttamente il foglio di stile.

Il codice proposto permette di inserire solo 4 link, nel caso ne vuoi aggiungere altri basta inserire questo codice per ogni nuovo link prima dell'ultimo tag </div>:

<div class="silverheader"><a href="http://indirizzodelblog05.it" title="Brevissima descrizione05" rel="external"><strong>Nome del blog05.it</strong></a></div>
<div class="submenu">
Breve descrizione del blog05.<br />
</div>

Se usi Blogger come piattaforma è ancora più semplice: accedi alla tua bacheca, clicca su Modifica Layout poi su Modifica Html, cerca il tag </head> e inserisci il codice in verde e clicca su Salva Modello. Ora vai su Elementi Pagina e clicca su Aggiungi un Elemento Pagina, e nel riquadro grande inserisci il codice html. Edita le voci colorate in rosso e arancione e clicca su salva.

Per problemi o suggerimenti sono disponibile a verificarli insieme.

Il Design attira di più: qualche consiglio per i Blogger.

Le carte vincenti di un Blog si giocano prima di tutto sull'estetica, poi sui contenuti. Se ad un utente medio gli si pongono a confronto due Blog, con la stessa qualità di contenuti, ma il primo con un grafica pulita, piacevole e magari colorata, ed il secondo con una grafica scarna, egli leggerà subito il primo, poi o forse, l'altro. Credo che l'esempio possa rendere il concetto, ma provo a farne un'altro.
Se vado a visitare il sito di una web-agency e vedo che è graficamente penoso e poco curato, beh, non attribuirò grande fiducia a quella web-agency, e non gli affiderò di certo la costruzione del sito per la mia azienda.

La prima impressione derivante dall'impatto grafico è fondamentale per ottenere credibilità dal lettore, quindi prima dei contenuti, devi curare particolarmente l'immagine. Perciò vediamo come dai piccoli dettagli si riesce ad attirare di più l'attenzione.

Cura il testo:

• Usa un contrasto elevato per il testo, così da renderlo leggibile a tutti;
• Evita i grigi chiari su sfondi bianchi.
• Dai una dimensione che lo tenga visibile, in genere 12 pixel và bene;
• Suddividi il testo in paragrafi di 4 o 5 righe;
• Usa il grassetto per evidenziare le parole più importanti;
• Tieni conto dell'interlinea per aumentare lo spazio tra le linee;
• Cerca di usare una formattazione giustificata dove possibile per rendere il testo più ordinato e regolare.

I colori non sono scontati:

• In genere uno sfondo bianco trasmette più affidabilità di uno nero;
• Non usare colori a caso: realizzati una palette di colori ben definita da utilizzare con costanza nel tempo;
• Rendi speciali i titoli dei post con un colore diverso rispetto al testo;
• Dai al lettore l'opportunità di avere subito sott'occhio i link, dandogli un colore che lo differenzi nettamente dal testo;
• Dove possibile (header, footer, widgets) usa immagini bitmap sfumate come sfondo, anzichè la tinta unica.

Le immagini danno spettacolo:

• Prima di ogni post inserisci una bella immagine a tema;
• Usa immagini grandi, che diano all'occhio. Prima però pensa ad ottimizzarle per ridurre il peso dei Kb;
• Più colorate sono, meglio è. (sempre nei limiti della decenza s'intende);
• Non applicargli bordi;
• Possibilmente usa immagini che abbiamo il colore dello sfondo uguale a quello della pagina, così da farle sembrare parte integrante del tuo blog.

I dettagli fanno la differenza:

• Non usare bordi neri: sono anti-estetici. Applica un contorno leggero: un grigio o un colore molto chiaro;
• Non appiccicare troppo il testo al bordo del post, dagli un padding che lo tenga ben distante, così da renderlo più ordinato;
• Ricorda che le cose semplici sono sempre le più belle. Le cose troppo elaborate storpiano.

Nei prossimi post pubblicherò alcuni tutorial dove passo per passo illustrerò come realizzare delle grafiche accattivanti e stilose, utilizzando Photoshop e i Css. Cercherò come sempre di non lasciare nulla per scontato: ne approffittino i meno esperti!

Intervista su IlmioGuadagno.it

Oggi IlMioGuadagno.it pubblica una piccola intervista fattami a proposito del Blog, del come e perchè esiste, e anche dove viene rilasciata qualche piccola curiosità.

Oggi viene pubblicata la prima parte, e domani la seconda. Ne approffito anche per consigliare a tutti i lettori il sito, che propone metodi e consigli per fare businnes col proprio Blog.

Clicca qui per leggerla.

Come realizzare un Menu Orizzontale

Volevo riproporre un vecchio post in occassione del nuovo menù. Per realizzarlo, infatti, mi sono affidato a questo script, e quindi volevo riproporlo per analizzarlo nuovamente in maniera più semplice e più chiara, proprio per dimostrare quanto sia semplice il suo utilizzo. Con poche righe di codice possiamo inserire un menu semplice, leggero e graficamente piacevole.
Premetto che su Blogger ho riscontrato alcuni problemi per l'installazione, probabilmente dovuti ad un javascript che va inserito sul tag body, e quindi in tal caso dovrete ricorrere, come ho fatto io, a caricare il menu su uno spazio web esterno. Per le altre piattaforme non ci dovrebbe essere nessun tipo di problema.

Scarica i file e caricali sul tuo spazio web.

Apri il tuo Photoshop e crea lo sfondo per ogni voce del menu. Ricorda che ogni sfondo deve avere la stessa dimensione degli altri, e possibilmente deve essere uguale graficamente, magari cambia solo il colore ed eventualmente l'icona. Io per esempio ho cambiato solo il colore dello sfondo, e l'angolo laterale delle voci finali, così da dare un'effetto arrottondato.

Ora inserisci questo codice prima del tag </head>:
<link rel="stylesheet" type="text/css" href="slidemenu.css" />
<script type="text/javascript" src="slidemenu.js"></script>

Inserisci questo codice onload="slideMenu.build('sm',200,10,10,1)" all'interno de tag body, come nell'esempio:
<body onload="slideMenu.build('sm',200,10,10,1)">

Dopo il tag <body> inserisci nel punto in cui vuoi che compaia questo codice:
<ul id="sm" class="sm">
<li style="background:url('tuosfondo01.jpg')">
<a href="tuourl.html" title="inserisci la descrizione">Home</a></li>
<li style="background:url('tuosfondo02.jpg')">
<a href="mailto:tuaemail@email.com" title="inserisci la descrizione">Email</a></li>
<li style="background:url('tuosfondo03.jpg')">
<a href="tuourl.html" title="inserisci la descrizione">Voce menu03</a></li>
<li style="background:url('tuosfondo05.jpg')">
<a href="tuourl.html" title="inserisci la descrizione">Voce menu04</a></li>
<li style="background:url('tuosfondo04.jpg')">
<a href="tuourl.html" title="inserisci la descrizione">Voce menu05</a></li>
</ul>

Ora analizza il tuo codice e personalizza: inserisci il link corretti delle immagini, cambia le voci, gli url, e sopratutto adatta il foglio di stile (il file che finisce .css) secondo le tue esigenze.

Nel caso in cui ti accontenti di qualcosa di semplice, ho realizzato un menu da poter riutilizzare semplicemente cambiando gli url. Scarica e utilizza liberamente.

Se hai bisogno di una mano non esitare a chiedere aiuto.

Template per Blogger dedicato ai Doors

Ecco un nuovo template per Blogger dedicato ai mitici Doors e Jim Morrison. Il template è gratuito e può essere liberamente usato. La grafica che ho realizzato è sul tema del bianco e nero con qualche piccola sfumatura colorata. Nell'header compare una foto di Jim e il logo The Doors, su ogni post compare una leggera decorazione per poter rendere più speciale ogni articolo. Nel footer è presente la scritta "the End" in riferimento a una loro celebre canzone del loro primo album, e alla sua destra compaiono un pò nascosti gli occhi di Jim, come a indicare che lui vigila sul Blog. Per i fan questo template è imperdibile.

Guarda un'anteprima qui.

Per scaricare il template usa il tasto destro qui e salva sul tuo disco. Poi accedi al pannello di controllo del tuo Blog su Blogspot.com e carica il file sulla sezione Modifica Html.

Div Mobile e Ridimensionabile con Mootools.

Nel web 2.0 l'uso di div mobili è sempre più frequente, sia per la velocità che per estetica e usabilità. In un articolo precedente ci siamo occupati di come creare un pop-up dinamico ma fisso. Ora vediamo come renderlo anche ridimensionabile e mobile all'interno delle nostre pagine.
Puoi vederne una Demo qui.

L'installazione è molto semplice, ti basta fare un copia e incolla per applicarlo al tuo Blog. La versatilità è abbastanza ampia, lo puoi utilizzare per far comparire un messagio ai tuoi visitatori, per mostrare delle immagini, o per inserirci degli annunci adsense.

Prima di tutto copia queste righe prima del tag </head>:

<script type="text/javascript" src="http://www.risparmiocitta.it/source/div-spostabile/mootools.js"></script>
<script type="text/javascript">
document.addEvent( 'domready' , function() {
$('win').makeDraggable({'handle':$('topbar')});
$('win').makeResizable({'handle':$('resizer') , 'limit':{'x':[200,400], 'y':[200,400]}});
} );
</script>

e aggiungi o all'interno della tuo foglio di stile o all'interno dei tag <style> queste classi:
.win {background:#f9f9f9; width:250px; height:300px;position:relative;border:1px dotted #666; background-color:#f0f0f0;}
.tobpar {height:25px; border-bottom:1px dotted #999; background-color: #99CCCC; cursor:move; text-align:center; font-weight:bold; font-size:12px; line-height:25px; color:#333333}
.resizer {width:15px;height:15px;top:100%;margin-top:-15px; left:100%; margin-left:-15px; background:#ccc ;position:absolute;cursor:se-resize; color:#666666}
.text {margin:10px; height:240px; color: #003366; font-size:12px; line-height:1.7em; text-align:justify}

Ora inserisci il codice html prima del tag <body>:
<div id="win" class="win"><div id="topbar" class="tobpar">Finestra spostabile</div>
<div id="resizer" class="resizer">/</div><div class="text">Qui inserisci il testo che vuoi.</div></div>

Per personalizzare e adattarlo al tuo blog puoi intervenire direttamente sul codice Css. In casi vuoi modificare la misura minima e massima del ridimensionamento, modifica i numeri segnati in blu e rosso all'interno del primo script verde: i numeri in blu identificano la misura minima, mentre quelli in rosso, la misura massima.

Puoi scarica tutto il materiale per analizzarlo da qui.

Per problemi o dubbi sulla personalizzazione sono disponibile a verificarli insieme a te.

noiz-Sky: Nuovo Template per Blogger

Rendo disponibile per il download questo nuovo Template per Blogger con una grafica dedicata ai colori del Cielo, da cui il nome "noiz-Sky".

La principali caratteristiche che lo rendono particolare sono:

• Sfondo fisso anche scrollando la pagina;
• Grafia pulita ed elegante;
• Ottimizzato per un migliore posizionamento sui motori di ricerca grazie al fatto che appare il titolo del post sul titolo della pagina con tante keywords;
• Eliminata la scomoda NavBar tipica di blogger, così da rendere la grafica omogenea.

Il template è libero di essere utilizzato e modificato per qualisiasi utilizzo, ed è Gratis.

Per vedere l'anteprima vai su noizexperience-sky.blogspot.com. Per scaricare direttamente il template clicca qui, e col tasto destro del mouse clicca e salva sul tuo disco.

L'installazione è molto semplice: dopo aver salvato sul tuo disco il file con estensione .xml, collegati a www.blogger.com, accedi alla tua bacheca, vai su Modifica Layout, clicca su Modifica Html e sulla parte in cui c'è scritto Carica un modello clicca su Sfoglia, cerca il file poco prima salvato, dopo di che schiaccia il bottone Carica e attendi qualche secondo: ora il template è installato.

Per qualsiasi problema relativo non esitare a chiedere.

Come si crea un pannello tab

La comodità di avere una sezione del nostro sito con un pannello tab ci permette di raccogliere in modo ordinato i contenuti e sopratutto di evitare di ricaricare la pagina. Questa soluzione si rivela utile nelle home-page, dove puoi utilizzarlo per catalogare le ultime news, si può utilizzare per creare una gallery o perfino per realizzare un menu con sottovoci. Nell'esempio mi sono divertito ad usare le tab per realizzare un mini-sito, soluzione interessante per quei siti piccoli che raccolgono solo testo.

Vediamo come funziona.
Inanzitutto copia e incolla questo breve javascript prima del tag </head>:

<script type="text/javascript" language="javascript">

onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTagName ('DIV') [i++]) {
if (e.className == 'on' || e.className == 'off') {
e.onclick = function () {
var getEls = document.getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
getEls[z].className=getEls[z].className.replace('show', 'hide');
getEls[z].className=getEls[z].className.replace('on', 'off');
}
this.className = 'on';
var max = this.getAttribute('title');
document.getElementById(max).className = "show";}}}}
</script>

Ora copia e incolla nel tuo codice css (se è nella pagina stessa inseriscilo tra i tag style, altrimenti se è in un foglio esterno copiacelo alla fine) queste classi e id:

#gallery {display:block; width:100%; height:35px; background-color:#f1f1f1; border-top:1px dashed #999; border-bottom:1px dashed #666; margin:0 auto; overflow:hidden;}

#gallery div.off {float:left; position:relative; z-index:99; width:80px; height:35px; line-height:35px; background-color:#f0f0f0; padding:0 10px; background-image:none}

#gallery div.off:hover {color:#FF3300; background-color:#f6f6f6; background-image:url(backbutton.gif) }

#gallery div.on {float:left; position:relative; z-index:100; width:80px; height:35px; line-height:35px; background-color:#fcf6f6; padding:0 10px; background-image:url('backbutton.gif') }

div.hide {display:none; width:0; overflow:hidden; }

div.show {display:block; clear:left; position:relative; z-index:50; margin:0 auto; width:90%; height:300px; padding:5%; background-color:#fcf6f6; }

Veniamo all'html. Crea un div con id="gallery" e all'interno metti il menù che controlla le tab. Inserisci la classe on nel prima voce, mentre tutte le altre avranno classe off. Poi inserisci ad ogni voce ll'attributo title con il nome della sezione (per essere più semplice ti conviene metterci lo stesso nome che compare sul menù). Come nell'esempio:

<div id="gallery">

<div class="on" title="Home"><a href="#">Home</a></div>
<div class="off" title="ChiSono"><a href="#">Chi Sono</a></div>
<div class="off" title="ImieiLavori"><a href="#">I miei lavori</a></div>
<div class="off" title="Contattami"><a href="#">Contattami</a></div>

</div>

Ora crea le div che visualizzeranno i contenuti. Attribuiscili un id uguale al title che hai usato nella voce correlata del menu, e dai la classe show al primo div, e hide per tutte le altre. Come nell'esempio:

<div class="show" id="Home">Questa è la Home Page</div>
<div class="hide" id="ChiSono">Ecco finalmente Chi Sono</div>
<div class="hide" id="ImieiLavori">L'elenco dei miei Lavori</div>
<div class="hide" id="Contattami">Scopri come contattami</div>

Come puoi vedere è molto semplice. Ovviamente puoi adattare le tab alla grafica del tuo blog o sito intervenendo direttamente sul Css che abbiamo utilizzato. Per capire meglio il codice puoi scaricare la demo e analizzarla. Se hai qualche dubbio o problema a riguardo sono a disposizione.

Scarica la demo.

Primo mese, prime considerazioni: facciamo il punto.

In questi giorni il Blog compie il suo primo mese, la mia piccola creaturina diventa grande, e ne sono contento. Vediamo un pò di numeri: 25 post, circa uno al giorno, 12 commenti, un diagramma della web analityc con leggeri alti e bassi ma tendianzalmente in crescita, fonti di traffico provenienti da siti di social news costanti, provenienti da Google in continuo aumento, altre provenienze in leggera crescita, iscritti ai feed pochi ma sempre maggiori.

Ci sono da fare alcune premesse prima di dare delle considerazioni, ossia la differenza tra: cosa mi aspettavo prima da lettore, e cosa mi aspetto ora da blogger.

Cosa mi aspettavo prima da lettore?
Fino ad un mese fa il mio Google Reader riceveva 10/15 feed al giorno. In pratica conoscevo e leggevo solamente i maggiori Blog nazionali, zero internazionali e zero piccoli blog. Non conoscevo, ma sapevo, che oltre ai blog forti, quelli con redazioni e uffici, esistessero anche piccoli blog, che in realtà sono il vero cuore pulsante della rete, quelli che, almeno una buona parte, creano il vero web, studiano e ci mettono l'anima per offrire nuovi contenuti alla rete e trovano le soluzioni ai problemi più disparati. Quando sentivo parlare di visitatori in cifre ero abituato a numeri con 3 o 4 zeri al giorno. Quando leggevo un post, non immaginavo la fatica che ci fosse dietro. Quando leggevo un blog, pensavo ci si dovesse solo scrivere, e non badavo al fatto che bisognasse anche pensare alla promozione, alla grafica, al seo e alla costante ottimizzazione.

Cosa mi aspetto ora da blogger?
Entrando in prima persona nel mondo della blogosfera mi rendo conto della realtà nuda e cruda del blogging. Intanto il mio Google Reader ora conta 120/150 feed al giorno (spero crescano ancora): per lo più blog americani/inglesi e sopratutto piccoli blog nostrani. Mi sono reso conto del duro lavoro che c'è dietro per proporre qualcosa di qualità, e che non sia la solità notizia che trovi ovunque. Mi sono reso conto di tutto il lavoro che c'è dietro allo scrivere post. Mi sono reso conto di chi fa veramente il contenuto del web, e di chi solamente lo ripropone. Mi sono reso conto che non tutti sanno fare le cose e che spesso si da per scontato che per il fatto che se noi sappiamo fare con naturalezza, anche gli altri lo sappiano fare. Mi sono reso conto che Google non è banale: non è facile farselo amico, non è facile che lui ci porti tanta gente, non è facile sottostare ai suoi consigli. Mi sono reso conto che fare cifre a 3,4 e 5 zeri al giorno non è ne scontato ne semplice.

Facciamo quindi delle considerazioni: sarebbe facile dire che non si finisce mai di imparare, che non bisogna dare tutto per scontato e che nessuno ti regala niente ma ora che sono passato da lettore a Blogger tutto cambia: bisogna guadagnarseli i risultati. Fatto il paragone del prima e ora, posso dire di essere molto soddisfatto dei risultati proporzionati ovviamente al breve periodo e al pubblico di nicchia a cui è dedicato il Blog. Penso quindi che le prospettive di crescita siano abbastanza interessanti.

Ringrazio di cuore per chi fino ad ora ha letto e commentato.

Angelo.

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" 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à.

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:

<br /> <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"> | <input type="submit" value="Registrati"/></form>
Ora crea un pagina e nominala elabora.php e copia questo codice Php prima del tag </head>:
<?php
#variabili
$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.

Consigli per 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.

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.