Joyride è un interessante plugin in jQuery, che permette di semplificare la presentazione di nuove caratteristiche di un progetto web ai propri utenti.

Avete presente questi tour animati e ancorati a una nuova interfaccia grafica, in stile Facebook per presentare le notività?
Grazie a questo plugin potremo decidere la posizione dei tooltip, la velocità, attivare cookie o animazione di entrata.

Tramite il codice del plugin jQuery potremo in modo semplice, ancorare alcuni elementi ID ai tooltip animati, e creare un tour cronologico in base alle nostre esigenze.
Un ottimo plugin per promuovere in modo efficace le nuove caratteristiche di un progetto web.

Oggi vi voglio segnalare 10 gallerie di immagini realizzate utilizzando jQuery, gli autori sono i ragazzi creativi di Tympanus.
Queste gallerie di immagini sono davvero particolari, ottimizzate nei minimi dettagli da scaricare e usare per i nostri progetti.
Gli autori propongono ogni settimana guide, codici e utiliy per designer e developer quindi vi consiglio di seguirli.
1. Portfolio Image Navigation

2. Fullscreen Slideshow HTML5

3. Fullscreen Slideshow HTML5

4. Slider Gallery

5. Hover Slide Effect

6. Animated Portfolio Gallery

7. Rotating Image Slider

8. Expanding Image Menu

9. Content Image Rotator

10. Image Parallax Slider

Edge è la risposta di Adobe alla continua ed inevitabile ascesa di HTML5. Già alcuni  si chiedono se Flash ormai sia superato da HTML5. Probabilmente in Adobe da tempo si saranno posti dei quesiti su come comportarsi davanti a questa imminente rivoluzione, ed inevitabilmente si dovranno adattare alle richieste del mercato. Probabilmente Edge, un editor HTML5, è la mossa vincente.
Già esistono convertitori di file Flash SWF in HTML5, wallaby di Adobe, ma anche Google vuole contribuire con Swiffy un altro convertitore FLAH to HTML5.

Un editor HTML5
Ma ora con Edge avremo la possibilità di realizzare animazioni HTML5 con un editor simile a quello che già in molti conoscono di Flash, quindi con una timeline, keyframe, motiont, rotazioni….
Adobe mette a disposizione un Preview gratuita di Edge installabile su Windows e su Mac, per poter procedere al download di Edge serve un account Adobe, l’iscrizione è gratuita. La demo di Edge sarà gratuita utilizzabile gratuitamente fino alla fine del 2011. Non perdete tempo!

Qualche esempio di HTML5 con Edge

Ecco qualche esempio di Edge direttamente dal sito di Adobe:

Getting Jumpy 1
Getting Jumpy 2
Sunshine and Sailing
Ferris Wheel and Roller Coaster
Simple Rich Ad

Una prova veloce di Edge
L’ho installato ed ho provato ad aprire Edge per creare la mia prima animazione HTML5, naturalmente molto banale, e molto semplice. Curiosando nel codice mi accorgo della presenza di jQuery probabilmente per garantire il funzionamento delle animazioni anche su browser obsoleti.

La pagina ufficiale di Edge:
http://labs.adobe.com/technologies/edge/

Una riflessione…
Secondo voi un editor HTML5 è un bene o un male? Questo dubbio mi è venuto quando ho ricevuto un riscontro da @Luglio7 su twitter.
Nella storia i vari editor che hanno aiutato a compilare codice spesso hanno contribuito a rendere il codice più pesante e pieno di errori, a partire dal Front Page, ma anche Dreamweaver ci metteva del suo.
Cosa dire del fatto che ultimamente sul web, la navigazione si è fatta più piacevole ed usabile, merito anche della quasi scomparsa dei menu animati tipici di Flash. Con Edge, o con qualsiasi altro Editor HTML5, rischieremo di rivedere animazioni che ci faranno impazzire?

Lo stesso team di HTML5 Boilerplate, ha realizzato una versione per mobile chiamata Mobile Boilerplate.

Avremo la possibilità di scaricare gratuitamente dei file e documentazione, che ci permetteranno di avere un modello base da cui iniziare con i nostri progetti web su mobile.

Mobile Boilerplate non è un framework, ma è integreato con progetti come jQuery Mobile, Sencha Touch, PhoneGap e Appcelerato.

Questo progetto open mira a diventare un modello di base per iniziare a creare un’applicazione web mobile.

Caratteristiche:

Compatibilità cross-browser (IE6 incluso)
Integrazione con HTML5
Impostazioni di caching e compressione ottimali per le migliori prestazioni
Ottimizzazioni per i browser mobile
Classi specifiche per IE per il massimo controllo cross-browser
Comode classi .no-js e .js per stili basati sulle capacità del browser

Sul sito ufficiale è possibile accedere a guide e documentazione dettagliata.

Mobile Boilerplate funziona con tutti i browser moderni e ha il pieno supporto per eredità Blackberry, Symbian e IE Mobile.

Non ci resta che ringraziare questo fantastico team e tuffarci in questa nuova risorsa per creare applicazione web mobile.

D3 è un framework in jQuery che permette di trasformare la lettura di complessi dati statistici in elementi grafici interattivi.

Questo framework è molto flessibile composto da diversi moduli, e si appoggia sulle ultime novità in ambiente web come HTML5, CSS3 e SVG.

Abbiamo la possibilità di approfondire questo framework leggendo una ricca documentazione api e vedere alcune demo in azione.

Gli esempi sono molto interessanti, e ci permettono di capire le potenzialità di questo framework.

Le performance sono notevoli, infatti è possibile creare animazioni grafiche grazie alla moltitudine di lettura dati in pochissimo tempo.

CarouFredSel è un interessante Plugin jQuery che permette in modo semplice e intuitivo di creare slider orizzontali e verticali di determinati contenuti HTML.

Questo slider (o carosello) è configurabile molto facilmente e si adatta con altri plugin esterni come effetti Lightbox

Il Plugin è personalizzabile al 100% anche grazie agli stili CSS e JavaScript, è possibile vedere le sue potenzialità dalla pagina demo.

Vediamo insieme come installare e utilizzare questo slider.

Installazione jQuery
Prima di tutto andiamo a richiamare tra <head> e </head> la libreria jQuery e il cuore del Plugin.

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-2.4.3-packed.js"></script>

Una volta inseriti questi due richiami dovremo aprire un JavaScript dove indicare il nome dell’ ID del DIV che vorremo animare.

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#item1").carouFredSel();
});
</script>

Come vedete il div che faremo animare dovrà avere ID = item1.

Ora andiamo a vedere la parte HTML base da inserire per diverse tipologie di contenuto.

Per le immagini
<div id="item1">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
<img src="img4.jpg" />
<img src="img5.jpg" />
<img src="img6.jpg" />
<img src="img7.jpg" />
<img src="img8.jpg" />
</div>

Per una paginazione
<ul id="item1">
<li> c </li>
<li> a </li>
<li> r </li>
<li> o </li>
<li> u </li>
<li> F </li>
<li> r </li>
<li> e </li>
<li> d </li>
<li> S </li>
<li> e </li>
<li> l </li>
</ul>

Per un contenuto HTML
<div id="item1">
<div>
<h3>Infinity</h3>
<p>A concept that in many fields refers to a quantity without bound or end.</p>
</div>
<div>
<h3>Circular journey</h3>
<p>An excursion in which the final destination is the same as the starting point.</p>
</div>
<div>
<h3>jQuery</h3>
<p>jQuery  is a cross-browser JavaScript library designed to simplify the client-side scripting.</p>
</div>
<div>
<h3>Carousel</h3>
<p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p>
</div>
</div>

Caratteristiche
Ecco alcune caratteristiche fondamentali di questo Plugin jQuery.

Trasforma qualsiasi tipo di elemento HTML in uno slider orizzontale o verticale.
Scorre uno o più oggetti contemporaneamente.
Scorre automaticamente o con l’interazione dell’utente.
Ridimensiona automaticamente larghezza e altezza.
Ottimizzato per navigazione da tastiera.
Disponibili eventi personalizzati, metodi e molte opzioni.
Compatibile con i più diffusi (jQuery) lightbox-plugins.
GET e (re) SET opzioni di configurazione dopo l’esecuzione.

Esempi Extra
Inoltre vi segnalo questi esempi e metodi di implementazione dello slider.

Slider Base
Slider con diversi contenuti
Slider con interazione utente
Uso di funzioni Callback
Uso di eventi personalizzabili
Slider con diverse dimensioni di contenuto
Slider personalizzato da eventi
Slider + Lightbox
Uso di 15 Slider simultanei

Abbiamo la possilità di leggere la documentazione per la configurazione del plugin sul sito ufficiale oppure seguire il Forum.

Inoltre vi segnalo la possbilità di creare il codice Slider con un Wizard automatico.

Questo Plugin è molto simile ad un altro che avevo gia segnalato, jQuery Slider.

Da pochi giorni è stato rilasciato jQuery Mobile un framework in versione Alpha per lo sviluppo di dispositivi mobile, che sfrutta la libreria famosa jQuery.

Tra i dispositivi mobile compatibili con questo nuovo progetto troviamo, iOs, Android, BlackBarry, Bada, Windows Phone, Plam Web OS, Symbian, MeeGo.

Possiamo provare con i dispositivi mobile, tutte le nuove caratteristiche, grazie a una demo online con tanto di documentazione.

Sempre sul sito è possibile visualizzare una tabella comparativa sulle compatibilità dei diversi browser mobile.

Infine vi segnalo il Forum ufficiale e il Blog ufficiale in cui saranno pubblicate news e comunicazioni.

Pajinate è un semplice plugin di jquery utile per creare la paginazione partendo da un elenco puntato o da un qualsiasi listato di dati. Il menù della paginazione, che viene generato, presenta i tasti first-last per passare dalla prima pagina all’ultima, prev-next per scorrere le pagine singolarmente e ovviamente i numeri di ogni pagina.Questi tasti possono essere comunque personalizzati inserendo la dicitura che più ci aggrada.Grazie a questa paginazione processata lato browser otterrete anche dei vantaggi in termini di prestazioni e navigabilità della pagina in quanto molto meno onerosa in termini di banda e di performance rispetto alla classica versione realizzata lato server.

Cliccare qui per scaricare Pajinate

jStackmenu è un piccolo file JavaScript + CSS che permette di trasformare una qualsiasti lista in HTML in un menu in stile Dock Mac.

Abbiamo la possibilità di provare una demo, scaricare i file sorgenti e leggere una ricca documentazione all’uso.

Tramite questo piccolo script potremo facilmente controllare l’apertura e chiusura, la direzione, la dimensione e il tempo dell’animazione.

Questo script sarà sicuramente utile per creare dei menu a cascata originali e fuori dagli schemi ottimizzando lo spazio.

Ottimo esempio di come creare un menu accattivante con un pò di JavaScript e CSS.

Se state cercando la documentazione di jQuery ma non volete usare quella ufficiale allora ve ne segnalo una alternativa, riferita all’attuale versione 1.4.2, messa a disposizione dal sito jQAPI. Questa guida si contraddistingue per la sua semplicità di consultazione sia online che offline grazie alla possibilità di scaricare l’intera guida per consultarla con calma.