Blog trasferito su
www.NoizExperience.com

29 giugno, 2008

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.
valori delle dimensioni

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.
impostazione linee guida

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.
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.
seleziona il colore

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.
Imposta il testo

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:
valore opacità

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.
sezione

sezione

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:
esempio ovale

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




Logo di Blogger

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

1) Collegati a www.blogger.com.

2) Clicca su Layout:
Layout di Blogger

3) Dopo di che clicca sulla voce Modifica Html

Layout di Blogger

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

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.

25 giugno, 2008

Come creare un BlogRoll in stile Mac




un menu 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.

23 giugno, 2008

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




tecniche per migliorare la grafice di un blog
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

Stefano de ilmioguadagno.it intervista Angelo di Noizexperience Blog


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.

20 giugno, 2008

Come realizzare un Menu Orizzontale




Menù con javascript e css

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.

19 giugno, 2008

Template per Blogger dedicato ai Doors

screenshot blog


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.

16 giugno, 2008

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.

15 giugno, 2008

noiz-Sky: Nuovo Template per Blogger

template per blogger.com

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.

13 giugno, 2008

Come si crea un pannello tab




tab mostra nascondi con javascript


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.

il primo mese di Noizexperience Blog




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.

11 giugno, 2008

Creare un Pop-up Ajax con Jquerry




Javscritps fx with Ajax | Cat

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

09 giugno, 2008

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:


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.

08 giugno, 2008

Consigli per Aumentare le visite al tuo Blog




Blog popolare per aumentare il traffico

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.

5 trucchi Css fondamentali

CSS: Centrare in verticale un'immagine



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:
Esempio

La 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:


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





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:



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ì:


Per cambiarli in un sola div procederemo così:


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

07 giugno, 2008

Realizzare una gallery in stile LightBox

Cat in Photo Slideshow



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:








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:


Nell'esempio abbiamo utilizzato un'immagine di anteprima come collegamento alla gallery, ma possiamo utilizzare anche un semplice testo, come nell'esempio:


Scarica la demo

05 giugno, 2008

Balloon a comparsa sopra il testo con descrizione

Javascript logo


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:



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:

04 giugno, 2008

Come reindirizzare o fare il redirect di un sito




Php Noize Logo

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 traffico, che il pagerank, perciò riccorriamo ad un redirect.

Copia e incolla questo codice nella pagina da reindirizzare solo se il file della pagina termina in .php, e sostituisci l'indirizzo in rosso con quello a cui la pagina deve collegarsi.
<? header("location:http://www.google.it"); ?>

Altrimenti se la pagina che utilizzi ha estensione .html copia e incolla questo semplice codice Javascript.
<script language="JavaScript" type="text/javascript">
location.href='http://www.google.it';</script>

Se hai problemi nell'inserimento del codice, puoi chiedere aiuto nei commenti.

Acer Aspire One: laptop low-cost formidabile.




Acer Aspire One

Acer presenta il nuovo Aspire One, un laptop a basso costo che promette molto. Il costo per la versione Linux si aggira attorno ai 400 $, in Europa circa 300€, e il modello che monta Xp 600$.

Acer, che è leader nel mercato notebook, con questo modello entra in competizione con il formidabile Asus EeePC, e i suoi cloni. Disponibile attualmente in tinta Bianca o Blu, ma prossimamente anche Nera, Rosa e Rossa. La configurazione è ottima:
  • 8.9-inch 1024 x 600 LED-backlit display
  • 1.6GHz Atom N270
  • 512MB DDR2 SDRAM (expandable)
  • 1.3 megapixel camera, SDHC and multi-format media readers
  • 802.11b/g, Ethernet, three USB 2.0, VGA, and 3.5mm audio out
  • One free mini PCI slot for WWAN
  • 80GB hard drive (with XP) or 8GB solid state (with Linux)
  • 2.5 or 5 hours on 3 or 6-cell batteries in XP model, 3 or 7 hours on Linux
  • 1kg (2.2 pounds)

Questo mercato, nato da poco, sembra stia riuscendo a poco poco a rivoluzionare un settore: garantire a tutti un computer, anche se economico, porterebbe a un rilancio dell'economia mondiale, non tanto per le vendite dei pc low cost, ma per gli effetti derivati.

03 giugno, 2008

10 consigli utili per migliorare l'indicizzazione

Html ottimizzato



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.

02 giugno, 2008

Goosh, Google su Linea di comando

Goosh.org


Goosh.org è un'interfaccia non ufficiale di Google che si comporta come la shell-unix, una vera e potente linea di comando. Digitando "h" si ha accesso a tutti i comandi possibili. Per esempio se digitamo "n Italia" avremo come risultato una ricerca sulle ultimi notizie sull'italia. Digitando "v" e poi la nostra querry, avremmo come risultato dei video, "wiki" per una ricerca su wikipedia, e "b" per i blog. E' possibili settare la lingua come "lang" e cancellare la schermata con "c". Ma le opzioni sono davvero tante, basta studiarci un pò sopra.

Goosh si prepara a rubare una fetta di mercato degli utenti Google che lavorano su Liniux e di quelli a cui piace lavorare con il massimo controllo sulle operazioni che effettuano.

Creare un menù Css orizzonatale semplice

Menu Html Css Javascript


Il successo di un sito, è dato anche dalla sua semplicità di trovare le informazioni desiderate. Importante è quindi avere un menù semplice ed intuitivo.

Vediamo alcuni esempi che possono essere liberamente usati.

1) Menu Semplice in Css: questo menu utilizza solo html/css ed è facilmente riutilizzabile, possiamo aggiungerci quante voci vogliamo con qualche semplice copia/incolla.

2) Menu con SubMenu in Css+Javascript: questo menu utilizza css e javascript, e con poche semplicissime modifiche si possono aggiungere altre voci.