Masonry è plugin jquery per layout. Pensato come il rovescio della medaglia di CSS float. Considerando che riorganizza gli elementi float prima orizzontalmente poi verticalmente, secondo una griglia. Il risultato minimizza gli spazi verticali tra elementi di diversa altezza.

L’utilizzo di Masonry è estremamente  semplice basta collegare al funzione masonry() all’elemento wrapper del layout. A seconda poi dei risultati che si vogliono ottenere è possibile utilizzare diverse opzioni che il plugin mette  a disposizione.

Sito web: http://desandro.com/resources/jquery-masonry
Demo: http://desandro.com/demo/masonry/basic.html
Download:  http://github.com/desandro/masonry

Google mi ha inviato altri nuovi inviti per Google Wave da distribuire.
Ne metto a disposizione 15!!
Per chi fosse interessato commenti questo post!
Chi arriva fra i primi quindici avrà l’invito!! Pronti su viaaaaaaa!!

Artbox7.com ha pubblicato un tutorial molto dettagliato per la realizzazione della parte grafica di un sito internet con photoshop.

Sito web: http://bit.ly/6PxYp2

jQSlickWrap è un plugin di jQuery che permette facilmente e accuratamente “wrappare” il testo attorno a un immagine inserita nel contenuto.

L’implementazione è semplice basta inserire una riga di codice jQuery:

$('img').slickWrap();

L’immagine dev’essere un’immagine irregolare e deve utilizzare la proprietà float all’interno del css.

Sito web: http://jwf.us/projects/jQSlickWrap

Demo: http://jwf.us/projects/jQSlickWrap/example2.html

E’ possibile creare un menu tipo Dock di Mac utilizzando solamente il CSS, ovviamente l’effetto non sarà fluido come per il plugin di jquery, ma riesce a dare comunque un bell’effetto al menu. Questo tutorila include due metodi, uno con l’utilizzo di CSS sprites, l’altro con lo scambio di immagini.

Sito web: http://aext.net/2009/11/bubble-effect-with-css/

Demo: http://aext.net/example/bubble-css/

TopUp è un’altra libreria javascript che utilizza jquery, di facile utilizzo, utile per la visualizzazione non intrusiva di immagini o di pagine web all’interno di pop up.

E’ assolutamente free anche per usi commerciali, oltre che essere compatibile con la maggior parte dei browser. L’installazione di TopUp consiste nell’inserimento all’interno di una pagina di un file, non necessita ne di immagini ne di fogli di stile. Il suo stile ricorda molto quello di Apple e le animazioni sono molto carine. E’ possibile utilizzare anche Prototype ed è facilmente personalizzabile attraverso l’utilizzo delle opzioni.

Richiede: jQuery Framework
Demo: http://gettopup.com/
License: Creative Commons License

La New Media Campaigns ha creato uno scritp capace di  creare una mappa interattiva con aree che possono essere ingrandite. Ogni luogo sulla mappa può essere rappresentato da un segnaposto. Cliccandoci sopra è possibile far mostrare maggiori informazioni. Inoltre possono essere create delle aree che possono essere ingrandite per far mostrare delle sottoaree della mappa.

Il progetto è stato realizzato nello specifico per un determinato luogo, ma gli sviluppatori promettono di renderlo il più generico possibile per creare un vero e proprio plugin utilizzabile da tutti.

Di seguito il link con la spiegazione passo passo di come si è arrivati a raggiungere questo risultato.

Sito web: http://www.newmediacampaigns.com

Demo: http://www.newmediacampaigns.com/..#demos

Punypng è un tool gratuito che riduce notevolmente  il tempo di caricamento di una pagina riducendo le dimensioni del file immagine senza perdita di qualità. Il tool utilizza diverse tecniche di ottimizzazione per ridurre le il peso di un immagine. Per prima cosa analizza il contenuto dell’immagine e decide qual’è il miglior formato da utilizzare.

Punypng automaticamente converte le GIF in png. Per i Jpeg la situazione dipende dai casi, talvolta è meglio convertire i jpeg in png altre volte è invece conveniente che rimangano dello stesso formato e successivamente vengono ottimizzate.

Il tool funziona online basta effettuare l’upload delle vostre immagini e vi saranno restituite ottimizzate nel miglior modo possibile, con una tabella dettagliate del processo effettuato.

Sito web: http://www.gracepointafterfive.com/punypng/

In questo tutorial viene mostrato come creare una descrizione che appare in dissolvenza quando si fa il rollover su una miniatura.
Viene utilizzato jQuery framework e CSS per creare questa trasparenza e l’effetto dissolvenza.

Vedi tutorial: http://www.queness.com/

Vedi Demo: http://www.queness.com/resources/html/thumbnail/index.html

Potrebbe essere utile durante la fase di sviluppo, il raggruppamento delle varie opzioni di una select.

Per fare questo si può ricorrere all’elemento optgroup. Per dare un etichetta al gruppo viene utilizzato l’attributo label.

Di seguito un esempio:

<label for="cars">Choose a car brand:</label>
<select name="cars" id="cars">
<option value="none">None</option>
<optgroup label="Swedish">
<option value="saab">Saab</option>
<option value="volvo">Volvo</option>
</optgroup>
<optgroup label="French">
<option value="citroen">Citroën</option>
<option value="peugeot">Peugeot</option>
<option value="renault">Renault</option>
</optgroup>
</select>

Ecco come il browser visualizzerà il codice html
Choose a car brand: