Sono fiero di introdurre una nuova fantastica rubrica che interesserà a tutti i webdesigners e web developer. Ogni sabato (abbiamo deciso di iniziare con un giorno di anticipo) vi offriremo gratuitamente un psd (Photoshop file) che potete usare come meglio preferite, modificare oppure semplicemente usarlo da ispirazione. Questa rubrica è ispirata al recente progetto 365psd. I webdesigner che si occuperanno di questa rubrica saranno il sottoscritto (autore del tema Skinbu e di Skimbu.it), Kikkozzo (autore del tema di iPhoneHacks.it e scrittore per Skimbu) e Webdesigner92 (autore di numerosi tutorial di carattere grafico su Youtube e scrittore per Skimbu).

Come primo appuntamento direi di iniziare con qualcosa di molto semplice: dei bottoni estremamente web 2.0, dopo il salto l’analisi ed il download di essi…

Struttura

Il file PSD si suddivide nella cartella Layout che comprende il layout generico della rubrica e la cartella PSD della settimana, che contiene invece gli elementi grafici proposti questa settimana.

Dentro la cartella PSD della settimana trovate tre cartelle: Button, Button Hover, Button Active, che rispettivamente riguardano il bottone iniziale, quando il mouse ci passa sopra e quando il bottone viene cliccato. Ovviamente sarà dovere vostro poi ritagliare ed esportare le immagini e scrivere il codice HTML.

Ogni bottone ha principalmente tre livelli:

• Button, che comprende il rettangolo del bottone con i dovuti stili (ombra esterna, sovrapposizione sfumatura)
• Gloss, che sarebbe il riflesso applicato al bottone
• Text: il testo

Utilizzi

Sono normalissimi bottoni che danno sicuramente un tocco di stile alle vostre pagine, è possibile utilizzarli come bottoni secondari delle pagine (es. come bottoni di download di files o bottoni che mandano a pagine speciali) oppure potete utilizzarli in una barra di navigazione, in quest’ultimo caso vi consiglio di rimuovere l’ombra esterna.

Text-shadow con CSS3

Con CSS3 è possibile aggiungere al testo del bottone il bordo bianco che nel PSD è caratterizzato dal bagliore esterno applicato al testo. La proprietà si chiama text-shadow, ecco un’esempio di un div del bottone.

div#bottone {

background-image:url('indirizzo del bottone');

text-shadow: 0px 1px 0px #fff;

}

Woofer

Come voi sapete Twitter è un noto servizio di social network e microblogging, è possibile scambiarsi messaggi ma non si deve superare i 140 caratteri (Per approfondimenti leggete questo articolo). Oggi vi parlerò invece di un altro servizio di social network: Woofer!

Woof

Woofer è basato su Twitter, infatti, la grafica è quasi identica. Per poter utilizzare Woofer non bisogna registrarsi ma solamente inserire il nostro nick twitter e più di 1400 caratteri. E’ poi possibile postare il nostro messaggio su Twitter attraverso un URL-shortener!

Woof da Woofer

Tweet di Woof

Woof postato su Twitter

Vi lascio dunque al link per visitare questo fantastico sito:

Eccoci arrivati al 28° appuntamento con la nostra rubrica dei 3 migliori video della settimana!

• Web Evolution -- Social Network: Video che ci mostra l’evoluzione dei social network Myspace e Facebook.

www.youtube.com/watch?v=EF4-0MWKhrg

• Spot Apple (FIAT 500): Spot della FIAT 500 adattato alla Apple!

www.youtube.com/watch?v=qujMFjfusG0

• The Best of Steve Ballmer: Video che mostra il “meglio” di Steve Ballmer.

www.youtube.com/watch?v=e8M6S8EKbnU

Li abbiamo provati per voi, entrambi sono client per gestire i più popolari social network ed entrambi sono in beta privata. Stiamo parlando di Threadsy e Nambu. La differenza principale? Threadsy è tutto online mentre Nambu è una applicazione per Mac OS X. In questo articolo analizzeremo le due applicazioni e vi diamo 10 inviti per Threadsy!

Threadsy

Prima della recensione vi lascio subito il link da cui potete registrarvi a Threadsy senza richiedere la beta privata, ricordatevi che sono disponibili (dalla pubblicazione di questo articolo) solo 10 inviti!

Threadsy è un social client online da cui è possibile gestire degli account email, Facebook e Twitter. È possibile configurarli dalle impostazioni raggiungibili in alto a destra.

Caratteristiche

• L’interfaccia è chiara e pulita, è più veloce del previsto
• Utile per chi vuole una soluzione da cui gestire Email, Facebook e Twitter tutti insieme
• La gestione di Twitter non garantisce tutte le funzioni che troviamo in un comodo Twitter Client da desktop, infatti supporta i favoriti, i retweets, le reply e l’accorciamento di url, ma nient’altro.
• La gestione di email è fatta molto bene, consente la divisone in cartelle, le bozze sono salvate così come le mail inviate, è possibile configurare più account email e nell’invio delle mail è possibile “stilizzare” il testo ed inserire allegati.

Conclusione

Threadsy è un ottimo email client, indubbiamente il migliore che si possa trovare in rete, soprattutto per la comoda e pulita interfaccia, molto meglio di gmail e siti simili. Peccato per Twitter, infatti la gestione di quest’ultimo è troppo limitata, forse adatta per coloro che lo usano poco.  Il fatto che sia online peggiora la “comodità” di questa applicazione, speriamo che facciano una versione per desktop.

Nambu

Nambu è un’applicazione desktop per Mac OS X, presto disponibile anche per iPhone. Come Threadsy è disponibile in beta privata. Nambu consente di gestire i propri account Twitter, Facebook ma anche i principali servizi di shortening-url come bit.ly o cli.gs. Vediamone subito le caratteristiche con pro e contro..

Caratteristiche

• È usato principalmente come Twitter Client, non è completo come gli altri Twitter Clients, consente ovviamente di vedere le pagine principali (timeline, mentions…), supporta l’invio di immagini e l’accorciamento di url (per queste ultime due cose è possibile scegliere il servizio che si preferisce, e la scelta è molto vasta) ma anche la possibilità di accorciare il post eliminando spazi inutili.
• Interessante la funzione “Share Snapshot” che consente di condividere direttamente una parte del desktop.
• Purtroppo non vi è il supporto per molti servizi come TwitLonger o l’invio di video.
• L’interfaccia può essere una pecca per alcuni, infatti inizialmente disorienta un po’, il motivo forse è il fatto dei numerosi bottoni che popolano l’applicazione
• Innovativa sincronizzazione delle ricerche e delle liste, il problema è: a cosa serve?
• Infine un’ultima pecca, il progetto si è indebolito fortemente, lo si capisce da un’articolo nel blog.

Conclusioni

Il nostro scopo era semplicemente segnalarvi due progetti nascenti che un giorno potrebbero diventare più importanti. Mi ha sopreso la facilità nel gestire le email in Threadsy, per il resto come Twitter e Facebook clients sia Threadsy che Nambu sono risultati molto deludenti e distanti anni luce dagli onnipotenti Tweetie, TweetDeck e company.

Per il futuro non si spera altro che bene, Threadsy è un progetto fortissimo che continua ad aggiornarsi, Nambu è un progetto più debole che però è sostenuto da un piccolo team di sviluppo, chissà che non decida di dare la svolta finale all’applicazione.

Tornare indietro nel tempo? In internet è possibile grazie a WayBack Machine, un servizio online che permette di vedere l’aspetto dei siti web più popolari dal 1996 ad oggi. È quindi una vera e propria macchina del tempo che permette di scoprire le nostre curiosità riguardo al passato dei siti web che ogni giorno visitiamo.

WayBackMachine

Come funziona

WayBackMachine registra autonomamente una collezione di pagine e dopo sei mesi vengono definitivamente registrati e pubblicati nel sito web. Per ora WayBackMachine ha registrato 150 miliardi di pagine web.

I difetti di questo servizio che abbiamo riscontrato sono la registrazione delle immagini, infatti in molti siti web registrati (come Skimbu) le immagini non sono visibili. Inoltre capita spesso che l’apertura di una qualsiasi vecchia pagina web dia errore e non si veda, sembra quasi che vada in conflitto con la vostra cache se avete di recente visitato il sito web di cui volete vedere il passato.

Esempi

Tramite WayBackMachine siamo riusciti a recuperare una copia di Skimbu 2 di aprile 2008, purtroppo le immagini non sono state tutte caricate, in particolare le due principali.

Interessante rivedere anche Google.com in febbraio 2006 durante le olimpiadi invernali di Torino.

Quelli che come me possiedono un iPhone e utilizzano spesso il social network di Twitter avranno preso seriamente in considerazione la possibilità di acquistare un client per iPhone sull’ AppStore. Questo articolo è dedicato proprio a voi, per permettervi di scegliere l’applicazione migliore che vi offrirà la migliore esperienza di utilizzo e vi farà anche apprezzare ancora di più il magnifico twitter!

Interfaccia grafica

Una delle cose che più attira un utente verso un client che verso un altro è proprio questo: l’aspetto dell’app che sappiamo andremo a usare ogni giorno.

Entrambe le applicazioni sono curatissime da questo punto di vista ed è proprio questo che mi ha portato a sceglierle per questo “scontro diretto” nonostante le decina di alternative presenti nello store.

Tweetie

Tweetie è una delle app più acquistate e apprezzate del suo genere soprattutto per la sua semplicità e per la sua “reattività” che rende azioni come un reetweet o una reply compibili in un battito di ciglia. Trovo inoltre magnifica la possibilità di fare le azioni appena nominate con un semplice swipe laterale sul tweet sul quale siamo intenzionati a compierle. Al nostro swipe seguirà un’animazione che farà scomparire il tweet e lascerà apparire le azioni che possiamo compiere su di esso come mostrato nell’immagine qui di lato.

Da questo menu che ci appare potremo, molto velocemente, fare una reply, aprire l’url contenuto nel tweet, visualizzare il profilo utente, impostare il tweet come preferito e perfino tradurlo!

Altre caratteristiche degne di nota sono la possibilità di eseguire l’aggiornamento dei tweets tramite un scroll verso l’alto e il fatto che i tweet o i DM non letti ci verranno segnalati con una piccola luce al disotto del menu corrispondente.

Concludo dicendovi che l’app ha vinto l’Apple Design Award del 2009, quindi in quanto a usabilità e interfaccia grafica non dovrebbe proprio temere rivali.

Osfoora

Quest’app è molto particolare e fa, anche lei, dell’interfaccia grafica uno dei suoi maggiori punti di forza.

Avremo la possibilità di scegliere fra un tema Light e uno Dark che sono entrambi bellissimi (di seguito 2 immagini comparative). Molto bella anche la possibilità di fare apparire con un scroll una barra rapida che ci permette di andare nel nostro profilo di twitter, di aggiornate i tweets e di andare in fondo alla lista; probabilmente, ci dice lo sviluppatore, questa funzione sarà sostituita con un semplice scroll per aggiornare come quello presente in Tweetie visto che l’attuale menu rapido non è molto apprezzato dall’utenza (potete votare e influenzare la scelta dello sviluppatore a riguardo mediante il sondaggio che trovate qui).

Quello che però non mi piace è il modo con il quale interagiamo con i tweets: per fare una reply o quant’altro dovremo fare una pressione continua fino a che non si aprirà un menu dal basso che ci mostrerà le azioni che possiamo eseguire. Dal punto di vista grafico questo menu proprio non mi piace ed è sicuramente qualcosa che deve essere migliorata nelle prossime versioni dell’applicazione.

Inoltre è di grande impatto la schermata principale che ci appare quando apriamo l’applicazione, veramente molto bella e anche personalizzabile in vari colori. Di seguito vi propongo due immagini della versione di default e di quella viola.

Tutte queste funzioni influiscono però negativamente sulla fluidità dell’app anche se con gli ultimi aggiornamenti ci sono state notevoli migliorie che hanno reso l’app molto più usabile rispetto alla versione 1.0 (attualmente siamo alla 1.2).

Postare un nuovo Tweet

Questa è forse una delle azioni che facciamo più spesso e quindi andiamo a vedere le possibilità che ci offrono le due applicazioni. Premetto che entrambe supportano la scrittura in landscape.

Tweetie

Molto bella la modalità di scrittura e di inserimento di contenuti extra che ci offre il prodotto di atebits. Oltre alla normale tastiera con un piccolo tap sul contatore di caratteri in basso a destra potremo accedere a dei comandi veramente ben disegnati che ci permetteranno di fare varie cose (il classico shrink-url, l’allegare un immagine o fare una replies). Eccovi un immagine, dopo la pressione del contatore di caratteri.

Osfoora

Osfoora non ci offre nulla di particolare in questione, se non dei comandi molto semplici e minimali che racchiudono in meno spazio quello che per essere svolto con Tweetie richiede la scomparsa della tastiera. Da notare, per gli appassionati la possibilità di inserire con un tap sull’apposito tasto, il tag #nowplayng seguito dalla canzone attualmente in riproduzione nell’iPod, funzione molto carina. Eccovi un’immagine della landscape mode.

Notifiche Push

Nessuna delle due applicazioni ha le notifiche push native (come fanno invece client come Echofon), ma possiamo facilmente ovviare al “problema” scaricando programmi di terzi che ce le abilitano come LetMeKnow o Boxcar.

Conclusioni

Sono entrambe delle applicazioni veramente ottime e il fatto che abbiano anche lo stesso prezzo rende arduo decretare la migliore. Ma faccio uno sforzo e vi dico che, per la sua semplicità e a mio parere migliore e più leggera interfaccia grafica, vince il confronto Tweetie 2 che resta la mia app ufficiale per twittare sia da Mac che da iPhone.

Fatemi sapere qual è secondo voi la migliore nei commenti e, se siete interessati, seguitemi su twitter (@WebDesigner92).

Forse è solo una mia impressione, ma penso che con questo telefono HTC abbia proprio colto nel segno. Il telefono di cui parlo è quello che potete vedere qui sotto: l’HTC Legend.

La particolarità di questo telefono? La scocca è realizzata interamente a partire da un unico blocco di alluminio. Per la prima volta nella storia, infatti, la tecnologia unibody, che abbiamo già imparato ad amare grazie ai MacBook Pro, sbarca su cellulare.

Specifiche

Il telefono monta un processore da 600 MHz che garantisce prestazioni affidabili per un utilizzo quotidiano. Le altre specifiche sono:

• RAM: 384 MB
• ROM: 512 MB (espandibile tramite Micro SD fino a 32 GB)
• Dimensioni: Altezza: 112 mm, Larghezza: 56 mm Spessore: 11,5 mm
• Peso: 118 grammi
• Pad ottico
• Batteria: 1300 Mah (500 minuti di conversazione, 560 ore di Standby)
• Display AMOLED da 3,2 pollici (risoluzione: 320x480 pixel)
• Fotocamera da 5 megapixel con zoom digitale, tap-to-focus e flash LED (risoluzione massima foto 2560 x 1920 pixel)
• Bluetooth 2.1
• WiFi, HSDPA, HSUPA
• Bussola digitale, Accelerometro, GPS
• Sensore di prossimità e di luce
• Android 2.1 (eclair) con l’interfaccia Sense di HTC

Il telefono, secondo gli ultimi rumors, dovrebbe essere venduto ad appena 399€, prezzo confermato anche sul sito di MediaWorld.

Prestazioni

Come si può facilmente intuire dall’hardware del telefono, sopra riportato, il telefono ha tutte le carte in regola per essere un ottimo compagno nella normale routine quotidiana. Leggere mail, ascoltare musica, navigare in rete, stare in contatto con i propri amici o colleghi (anche attraverso i social network) sono alcune delle funzioni che questo telefono permette di svolgere in tutta tranquillità.

Display

Il display del telefono, come già accennato nelle specifiche, è un AMOLED da 3,2 pollici. La risoluzione dello schermo è 320x480 pixel, questo permette di avere una visione nitida di immagini e video. Inoltre l’intera interfaccia grafica è visualizzata perfettamente con questa risoluzione, questo permette un’esperienza di utilizzo veramente piacevole.

Come appena accennato, il telefono consente una visione molto buona sia di immagini che di video anche perché i colori dello sono molto nitidi e risaltano quindi facilmente evidenti all’occhio.

Il display ha però anche alcuni nei. Il primo di questo è sicuramente la luminosità. Il display consente infatti di raggiungere livelli di luminosità estremamente alti (essendo un AMOLED), che dovrebbe essere regolata dal sensore di luce ambientale, ma quest’ultimo, alcune volte, sembra non funzionare correttamente.

Inoltre l’effetto glossy dello schermo (dato dal materiale, apparentemente vetro, con cui è realizzato) non premette sempre una chiara visione dello schermo, soprattutto in condizione di forte luce, come, per esempio, contro-sole. Alcuni dei fortunati che lo hanno avuto in prova, inoltre, riportano che la visualizzazione del bianco è, in alcuni casi, tendente al rosa.

Fotocamera

La fotocamera, a 5 megapixel, è molto buona, ed è equipaggiata con il tap-to-focus, già visto su altri telefoni come l’iPhone. Cosa vuol dire? Semplicemente toccando una parte dello schermo, mentre stiamo scattando una foto, potremo porre il fuoco della foto dove vogliamo.
La cam è inoltre dotata di flash LED che permette ottimi scatti anche in condizioni di poca luce. La camera è accompagnata anche da uno zoom digitale, che è molto apprezzato quando si devono fotografare soggetti lontani.

La fotocamera ha numerose altre features, tra i quali la possibilità di aggiungere effetti alle foto, che non vi sto ad elencare.

Le foto scattate sono vengono molto bene e raggiungono una risoluzione massima di 2560 x 1920 pixel, ecc alcuni esempi di foto, realizzate dallo staff di telefonino.net, scattate con questo cellulare (click sull’immagine per ingrandire):

Il telefono registra anche video, che, tutto sommato, hanno una qualità più che sufficiente per un telefono cellulare. L’unica pecca dei video è forse l’audio, che risulta un po’ troppo meccanico, forse per l’elevata compressione. Ecco un esempio di un video, girato da telefonino.net, realizzato con questo telefono:

www.youtube.com/watch?v=Cfmk6x-X3GI

Audio

L’audio del telefono, complessivamente parlando, è soddisfacente, corrisponde a quanto ci si può aspettare dall’unico altoparlante mono del telefono, che, come i vede dall’immagine sopra, è nascosto nella parte posteriore dello smartphone, vicino alla camera. Forse ne risentono un po’ i bassi soprattutto in vivavoce.

Con le cuffie, collegabili al jack standard da 3,5″, è però tutta un’altra musica: il suono è molto più nitido e pulito.

Sense UI

Una delle caratteristiche principali che spinge gli utenti a comprare questo telefono è sicuramente la Sense UI di HTC.

Il bello di tale personalizzazione risiede forse proprio nella completezza: ogni aspetto del telefono (dal riproduttore musicale ai widget e al telefono) è personalizzato da HTC.

Un’altro punto di forza di tale interfaccia sono sicuramente i widget che HTC mette a disposizioni, i più dei quali disponibili in due versioni: a tutto schermo o ridotti.

Inoltre questa interfaccia permette un’integrazione completa con i social network: con FriendStream è possibile ricevere contemporaneamente notifiche da tutti i social network a cui siamo iscritti, analogamente a quanto accade sui telefoni di Motorola dotati di MotoBlur™. Sense permette anche di aggregare ai contatti della propria rubrica account di Facebook, Twitter e quant’altro.

Anche il calendario riceve numerose migliorie grazie a Sense: l’esperienza di utilizzo è molto agevolata anche grazie all’apposito widget che rende più facili tenere conto di tutti propri appuntamenti.

Design

Il design del telefono, come molti di voi avranno notato dalle foto qui sopra, è molto ricercato e, in parte, minimalista. Il display di vetro nero e la scocca unibody (che un po’ ricordano il design dei MacBook Pro) fanno di questo dispositivo uno dei telefoni più belli, se non il più bello, attualmente sul mercato.

Ad impreziosire il tutto c’è sicuramente la trackball ottica (ritratta nell’immagine qui sopra), che sostituisce la vecchia pallina classica dei telefoni Android, che svolge ancora meglio del suo predecessore la funzione di aiuto-scroller (termine inventato da me che significa supporto allo scrolling).

Altre finiture come le scritte HTC e with HTC Sense, o il rocker per il volume, decisamente minimalista, rendono il telefono ancora più apprezzabile alla vista.

Scocca in alluminio

Soffermiamoci ancora un momento sulla scocca del telefono. Come già detto, è realizzata a partire da un solo pezzo di alluminio, quindi è estremamente resistente.

Per capire meglio come funziona vi lascio al video che HTC ha mostrato il giorno in cui ha presentato il telefono:

www.youtube.com/watch?v=14MEt8VoU3s

Come si vede, l’unibody è l’anima del telefono, gli altri componenti sono incastonati al suo interno.

Videoprove

Vi lascio adesso alla videoprova di telefonino.net, dalla quale, forse, capirete meglio quanto già ampiamente discusso nell’articolo:

www.youtube.com/watch?v=xjk-BdaH-_A

Per i più esperti di inglese, questo è un first look video, realizzato da, che è sicuramente più completo di quello che avete appena visto e che vale sicuramente le pena di essere guardato, nonostante la sua lunghezza:

www.youtube.com/watch?v=Lpe5H1MWBm4

Pecche del telefono

Oltre ad alcuni problemi, riportati poco sopra, il telefono ha altre pecche. La scelta dei materiali, per me particolarmente azzeccata, rende il telefono molto più pesante sia del suo predecessore, l’HTC Hero, sia degli altri telefoni della stessa fascia.

Inoltre, sempre a causa della scocca in alluminio, l’antenna è stata collocata nello sportellino posteriore del telefono, ma alcuni utenti riferiscono lo stesso problemi di ricezione, alcuni causati dal cosiddetto effetto mano (spiegato nella prima videorecensione).

Conclusioni, prezzo e data di rilascio

Concludendo, quindi, il Legend è un telefono adatto a tutti, sia a chi vuole sempre rimanere in contatto con i propri amici sia per chi lo vuole usare come compagno di lavoro. Inoltre il prezzo non è proibitivo, o perlomeno se paragonato ad altri telefoni della stessa fascia, quindi è un telefono aperto veramente a tutti.

Il telefono, molto probabilmente, costerà infatti 399€ e sarà commercializzato in Europa e in Asia a partire dal 12 Aprile, in esclusiva con Vodafone

L’HTC Legend sara commercializzato anche in rosso?

Alcuni rumors, riferiscono anche che SFR France, rende disponibile sul proprio sito la prevendita di un HTC Legend rosso. Questa è la foto del terminale in versione rossa:

Tali rumors potrebbero dimostrarsi però del tutto infondati. Infatti la stessa HTC non fa alcun riferimento a colorazioni alternative al nero sul proprio sito. Inoltre la scarsa qualità delle immagini lascia perplessi, facendo pensare che siano state modificate dall’originale.

Ai lettori più esperti del mondo del web sarà capitato di vedere in molti siti, più o meno famosi, dei menù che nascondono altri link. Tra questi anche lo stesso Skimbu ne nasconde uno, che vi si rivelerà non appena passerete col mouse sulla pagina dei progetti.

Il menù che andremo a creare

Oggi vi spiegherò come creare un menù come questo, che, una volta cliccato il pulsante, mostrerà altri menù nascosti. Utilizzeremo jQuery, spiegato in breve nel mio articolo precedente.

Per prima cosa inseriamo nell’head alcuni semplici comandi per caricare il nostro foglio di stile e jQuery che troverete in allegato nel file al termine della pagina.

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>

Per prima cosa ci occuperemo del body, aprite quindi il vostro foglio di stile (nel nostro caso style.css) e scrivete questi semplici comandi:

body {
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 background-color: #FFF;
}

Per continuare creiamo un div che sarà il nostro vero e proprio pulsante, che noi chimeremo pulsante, nel quale inseriamo una semplice immagine precedentemente disegnata (trovate il .psd nel file in fondo all’articolo). Ecco il codce:

<div id="pulsante">
<img src="images/button.png" width="516" height="43" class="pulsante_sliding" />
</div>

Ed ecco lo stile da applicare:

#pulsante {
 height: 43px;
 width: 516px;
 margin: auto;
}

A questo punto dovremmo aver un risultato simile a quello sotto, in base alle immagini che utilizzerete, che però non ha alcun azione/effetto. E’ molto importante applicare la classe pulsante_sliding alla nostra immagine perchè il nostro menù risulti funzionante.

Occupiamoci adesso del menù vero e proprio. Inserite questo codice prima della chiusura del div dove avete messo l’immagine.

<ul>
<li><a href="#">Skimbu</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">By</a></li>
<li><a href="#">Kikkozzo</a></li>
</ul>

Ecco lo stile che ho deciso di applicare:

ul, li {
 margin:0;
 padding:0;
 list-style:none;
}

.menu {
 display:none;
 margin: auto;
 width:500px;
 border: 1px solid  #CCC;
 border-top: none;
}

.menu li {
 background-color: #FFF;
}

.menu li:hover {
 background-color: #D7D7D7;
}

.menu li a {
 color:#000;
 text-decoration:none;
 padding:10px;
 display:block;
}

.menu li a:hover {
 font-weight:bold;
 color: #0075e1;
}

Se volete che il menù sia nascosto prima che clicchiate sul pulsante è molto importante che non eliminiate dallo stile la riga

display: none;

Se invece desiderate avere una preview di quello che state programmando, eliminatela pure, ma ricordatevi di rimetterla! Anche il comando list-style: none; è fondamentale. Cancellandolo otterette infatti un “classico” menù a pallini.

Per ultimo, arriviamo finalmente al codice che ci permette di creare il menu. Ovviamente è scritto in jQuery, motivo per cui in precedenza lo abbiamo caricato.

<script type="text/javascript">
$(document).ready(function () {
 $('img.pulsante_sliding').click(function () {
 $('ul.menu').slideToggle('medium');
 });
});
</script>

Come potete vedere vengono richiamate le classi pulsante_sliding e menu, quindi, qualora decideste di chiamarle in un altro modo, ricordatevi di cambiare il nome che è riportato in questo script.
Per spiegarvi brevemente questo codice, il comando $(‘img.pulsante_sliding’).click(function () { richiama la nostra immagine con classe pulsante_sliding e gli assegna una funzione al “click” del mouse, che è proprio quella di richiamare l’”ul” con classe menu.

Il risultato finale dovrebbe essere, una volta premuto il pulsante, quello in apertura. L’esempio utilizzato per il tutorial è davvero semplice, ma con questa tecnica possiamo ottenere risultati davvero strabilianti. Ecco il file per ogni dubbio:

N.B.: come ci suggerisce il nosro utente WebDesigner92, è possibile anche creare lo stesso effetto, ma che avviene quando si passa sopra il pulsante, non quando invece lo clickiamo. Per farlo è sufficiente campiare .click(function in .hover(function

In questo piccolissimo tutorial vi spiegherò come modificare le canzoni per renderle simili alla voce dei Chipmunks.

Per realizzare questo simpatico effetto (che a qualcuno può anche sembrare odioso ) abbiamo bisogno dell’ applicazione Audacity disponibile sia per Windows che per Mac.

Download:

Iniziamo!:

Realizzeremo l’effetto in pochissimi passaggi:

• Aprire la canzone che vogliamo modificare in Audacity
• Dal menù modifica > seleziona > tutto (command + A)
• Dal menù effetti > cambia intonazione > percentuale di cambiamento = 100%

Ed ecco che abbiamo dato alla nostra canzone la voce dei Chipmunks!

Risultato FInale:

www.youtube.com/watch?v=BpqdR8bQ6Ts

jQuery è un framework per il web, strutturato in javascript, che si prepone come obiettivo quello di astrarre ad un livello più alto la programmazione lato client del comportamento di ogni singola pagina HTML.

[cit. Wikipedia]

Ormai giunto alla versione 1.4 jQuery è uno degli script più completi del web che ci permette, in modo rapido e veloce di scrivere script dalle potenzialità davvero immense.

Cosa si può fare

Con questo framework possiamo creare cose semplici, o complesse, a seconda delle nostre capacità. Tra gli effetti messi a disposizione troviamo:

• Effetto fading (dissolvenza);
• Effetto sliding (scivolata);

Tornate tra mezz’oretta mer averne un assaggio !

Alcuni esempi

Il primo esempio, relizzato con i jQuery Tools, è sicuramente questo bellissimo slider:

Altri esempi potete trovarli direttamente sul web, o anche su Skimbu, come il bellissimo slider nella sidebar. Per ultimo, il link per il download: