jQuery User Interface: il framework javascript diventa grande

jQuery User Interface jQuery, il popolare framework javascript, si arricchisce di una nuova libreria, la jQuery User Interface. Con questa novità sono disponibili allo sviluppatore nuovi metodi  per la gestione di widget grafici tematizzati che consentono di creare interfacce grafiche di terza generazione, desktop like.

Il cuore della libreria ruota attorno a funzionalità di interazione con il mouse, quali il drag e il drop, il sorting, il selecting e il resizing. Al di sopra di tutto sono stati aggiunti un buon numero di widget riutilizzabili come calendari, finestre di dialogo, slider, tabelle e tab. Cigliegina sulla torta, la jQuery UI mette a disposizione anche un paio di effetti molto simpatici: il magnifier e l’ombreggiatura sugli elementi.

jQuery UI

FancyForm per form veramente cool

fancy form FancyForm è una libreria javascript in grado di migliorare l’aspetto dei classici checkbox e radiobutton con una grafica più accattivante. Semplicissimo da usare, FancyForm è uno strumento flessibile e potente. Inoltre si adatta facilmente a browser attempati.

In poche parole:

  • Setup veloce: sono necessarie solo 2 righe di codice
  • Completamente estendibile: sono innumerevoli le opzioni di personalizzazione previste
  • Downgrade facile: i forms sono compatibili anche su browser vecchi

Esempio di FancyForm

Editor online: syntax highlight in Javascript

CodePressè un editor web creato per gestire il codice sorgente dei propri progetti. La caratteristica principale è il syntax highlight, ovvero la capacità di colorare in tempo reale parole chiave, operatori, stringhe, valori numerici e molto altro, durante la digitazione stessa del codice sul browser.

 I linguaggi fin qui supportati sono: PHP, Javascript, Java, Perl, SQL, HTML e CSS. Le sue caratteristiche principali sono:

  • Syntax highlighting in tempo reale
  • Code snippets,  per esempio, in modalità PHP digitando "if" e premendo [tab]
  • Completamento automatico, semplicemente scrivendo " o ( o ‘ o [ o {
  • Tasti veloci. In modalità PHP, per esempio, la combinazione [ctrl][shift][spazio] è una combinazione veloce per  
  • Finestre multiple. E’ possibile avere più CodePress sulla stessa finestra del browser

syntax highlight

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

ProtoTip: una libreria javascript per gestire i tooltip

Prototip, javascript per gestire i tooltip Prototip permette di creare facilmente tooltip di tutti i tipi, dai più semplici a quelli più complessi. ProtoTip utilizza il frameword javascript Prototype e, se si vuole, può far uso degli effetti di Scriptaculous, un altro framework javascript, per abbellire con effetti i tooltip generati.

La creazione di un tip, ovvero di un fumetto, è semplicissima; eccovene un esempio:

new Tip(element, 'content', {title: 'this tooltip has a title'});

Ovviamente ogni tip si può personalizzare in mille modi, utilizzando i fogli di stile. ProtoTip è un modo semplice ma efficace per migliorare l’usabilità del proprio sito rendendolo pure più simpatico.

prototip demo

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!

Video letture per imparare nuovi linguaggi di programmazione

Video Letture - linguaggi di programmazione Per chi è alla ricerca di nuovi linguaggi di programmazione o per chi li sta studiando consiglio questa bella raccolta di video letture. Sono filmati in cui esperti, professori e divulgatori informatici insegnano alcuni linguaggi di programmazione, dalle basi alle tecniche più avanzate.

I linguaggi presi in considerazione sono:

  • Javascript (4 letture + 1 slideshow): Douglas Crockford spiega le basi del linguaggio
  • Javascript Avanzato (3 letture +1 slideshow): Douglas Crockford si spinge a illustrare le parti più avanzate
  • Javascript Avanzato con Librerie (2 letture): John Resig, autore della popolare libreria JQuery, mostra l’importanza delle librerie nell’ingegneria delle interfaccie
  • Javascript manutenibile (1 lettura): Nicholas Zakas, ingegnere di My Yahoo!, illustra come sia possibile manutenere codice Javascript
  • La teoria DOM (3 letture + 1 slideshow): Douglas Crockford mostra la teoria del Document Object Model di Javascript
  • Firebug (1 lettura): John Hewitt, uno sviluppatore di Mozilla, mostra come usare questo utile plugin dedicato ai webmaster
  • Nuove funzionalità di Next C++: un video di Google
  • Python Avanzato: come capire il linguaggio promosso da Google
  • Design Pattern in Python (2 letture) di Alex Martelli
  • Imparare la programmazione Java (8 video tutorial) 
  • A scuola di Delphi: 9 video tutorial per diventare un vero e proprio programmatore di Delphi
  • Introduzione a SQLite: Una video lettura di Richard Hipp su questo leggero e veloce sql database engine.

Effetto bottone in javascript

bottoni in javascriptGlossy.js è una libreria Javascript che aggiunge angoli stondati, trasparenza e ombreggiatura alle immagini della propria pagina web. E’ una libreria non intrusivo che mantiene il proprio codice pulito.

Funziona in tutti i maggiori browser web: Firefox 1.5+, Opera 9+, IE6+ e Safari. Nei browser non supportati si disattiva e l’utente non si accorgerà di nulla.

Per applicare l’effetto agli oggetti della pagina, è sufficiente indicare alcuni nomi di classe css. Eccone un esempio:

class = "glossy iradius50"

oppure

class = "glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow"

DemoFuse: creare demo online dei propri siti

tour guidati del proprio sito webMolto interessante e intelligente il servizio web che vi sto per segnalare. Si chiama Demofuse e permette di creare visite guidate (guided tour) al proprio sito web. Contrariamente a quanto si è abituati a pensare, questa volta la visita guidata non è un filmato Youtube o un’animazione flash. Demofuse ti prende per mano e ti accompagna nel sito vero e proprio, aprendo popup chromeless con il testo della guida, mostrando ora frecce lampeggianti, ora simulando lo spostamento di un cursore fittizio per insegnarti le azioni da compiere.

La guida è quindi un’applicazione javascript che si integra completamente nel tuo sito e che può essere attivata dall’utente in qualsiasi momento. Per ora il servizio è utilizzabile solo se si dispone di un invito (oramai è un sistema che va di moda…).

Ho preparato anche un piccolo tour guidato a DynamicK. Per provarlo, cliccate su questo bottone:

Ecco un video su Demofuse che ho fatto e che ho caricato su YouTube: