Image Menu: un’idea originale per un menu d’effetto

Image Menu Oggi vi segnalo una libreria javascript che vi consente di creare un originale menu di navigazione di sicuro impatto visivo. Image Menu crea un menu orizzontale composto da immagini che al passaggio del mouse scorrono allargando la voce di menu selezionata.

La sintassi per includere un tale script è molto semplice:

var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200, onClick:demo});

dove onClick indica l’azione da intraprendere al click e openWidth la dimensione dell’apertura. Queste sono solo alcune delle opzioni impostabili. Image Menu è un’idea originale che sicuramente potrà interessare i molti web designer che leggono DynamicK.

Pattern nel design web

patterns nel design webMartijn van Welie, olandese, project manager nell’ambito del design visivo e del design interattivo, durante questi ultimi anni ha sezionato, analizzato e catalogato le parti ricorrenti dei siti web. Il risultato è una fornitissima libreria di pattern, cioè moduli standard che ogni sito utilizza, come la navigazione a tab, oppure i captcha, il footer sitemap o la galleria a thumbnail.

Non si tratta di un sito da cui trarre ispirazione, visto che nulla è originale, anzi, ogni pattern analizzato è standard e ben conosciuto. Ogni scheda che è divisa in sezioni, descrive il problema e la relativa soluzione. Lo scopo principale è capire perchè alcune soluzioni funzionano in certi contesti, mentre in altri no.

I pattern sono classificati in categorie:

  • Elementi di navigazione
  • Ricerca
  • Acquisti
  • Gestione dei dati
  • Scelta
  • Input
  • Interazioni di base
  • Personalizzazioni
  • Varie
  • Evidenziare l’attenzione
  • Feedback
  • Interazioni semplificate

captcha

 

 

Imparare JQuery in 15 minuti

jQueryJQueryè una libreria javascript che consente di manipolare in modo veloce e conciso il documento HTML, gestire eventi, creare animazioni e aggiungere interazioni AJAX alla pagina. Lo scopo principale di jQuery è quello di facilitare e velocizzare la scrittura del codice Javascript.

Se dopo questa breve introduzione vi interessa approfondire maggiormente la conoscenza di questa libreria, oggi segnalo untutorial che vi spiega le nozioni base di jQuery. In 15 minuti avrete a disposizione gli strumenti necessari per poter cominciare a scrivere la vostra prima riga di codice. Buon lavoro!

jQuery

Script Ajax: una libreria di widget gratuita

Ajax Rain, una libreria gratuita di widget in Ajax Ajax Rain è una libreria di più di 450 script Ajax. Si tratta per lo più di widget per completare il vostro sito, come progress bar, grafici interattivi, form di upload, tooltip, menu contestuali e molto altro. Gli script sono pubblici e di solito fanno uso dei già noti framework Ajax come QooxDoo, JQuery, YUI.

Come dice lo slogan, "Secret Behind your inspiration", Ajax Rain è un’ottima risorsa da cui prendere spunto e per mettere in moto la nostra fantasia.

Libreria Ajax

Magic DOM, per mappare l’HTML con il javascript

Magic DOMMagic DOM è una libreria Javascript di soli 2K che mappa il document object model della pagina web con semplicità e in modo intuitivo. L’idea è di scrivere tag html utilizzando javascript, ma mantenendo la sintassi simile all’HTML.

Quindi un tag SPAN di questo tipo:

<span class="babu">Hello world</span>

diventa con Magic DOM il seguente codice in javascript:

SPAN({'class': 'babu'}, "Hello world")

I tag mappati da questa libreria sono:

  • UL, LI, TD, TR, TH,
  • TBODY, TABLE, INPUT, SPAN, B,
  • A, DIV, IMG, BUTTON,
  • H1, H2, H3, BR, TEXTAREA, FORM,
  • P, SELECT, OPTION, OPTGROUP, IFRAME, SCRIPT,
  • CENTER, DL, DT, DD, SMALL,
  • PRE, TN

e la sintassi per poterli utilizzare è:

DOMSHORTCUT({properties}?, ("String" | DOMSHORTCUT)*)

Magic DOM è open source e liberamente scaricabile. L’idea mi è sembrata intelligente e ha meritato un post sul mio blog!

Descrivere gli eventi Javascript con il linguaggio naturale


Oggi vi segnalo questo bel sito personale di Ryan Johnson, uno sviluppatore di applicazioni web e librerie open-source in javascript. Ho deciso di pubblicarlo su DynaMick quando ho visto Event.Behavior, una libreria Javascript per la gestione degli eventi. Nella descrizione di questa libreria, Ryan si è posto l’obiettivo di descrivere un evento nella forma più possibile vicina al linguaggio naturale (inglese). Ed eccovi a voi il risultato:

with(Event.Behavior){
show('state_field').when('country').is('United States');
show('province_field').when('country').is('Canada');
}

Direi che il risultato è splendido e merita tutto il mio rispetto.