Categoria ‘Javascript’


Reflex 1.1: aggiungere effetto di riflessione alle immagini

image Nuova versione 1.1 della libreria Javascript Reflex con la quale è possibile aggiungere effetti di riflessione alle immagini. Il vantaggio di usare questa tecnica “non intrusiva” è la rapidità con cui è possibile aggiungere questi effetti senza dover spendere tempo nel realizzare effettivamente l’immagine di riflessione.
Questa versione è stata provata sui browser Mozilla Firefox 1.5+, Opera 9+, Safari e IE6. La minima dimensione supportata per un’immagine è 32×32. Una volta inclusa la libreiria:

1
<script type="text/javascript" src="reflex.js"></script>

Basta inserire class=”reflex” sulle immagini dove desideriamo applicare tale effetto. Sfruttando la proprietà dell’attributo class è possibile manipolare gli effetti di riflessione, il chè rende questa libreria davvero particolare. È possibile, infatti, distorcere anche l’immagine aggiungendo effetti 3D. Ad esempio ecco come aggiungere varie caratteristiche alla rilfessione:

1
<img class="reflex idistance16 iborder2 iheight24" width="200" alt="" src="images/example.jpg"/>

Per i dettagli vedi la documentazione sul sito ufficiale.

Sullo stesso sito è possibile scaricare numerosi altri effetti come Edge, Corner, Glossy e molti altri, tutti dedicati alle immagini.

Continua...

Proto.Menu: menu contestuali in Javascript con Prototype 1.6.0

Proto.Menu è una semplice e leggera (2Kb) soluzione Javascript  per aggiungere funzionalità di menu contestuali alle pagine HMTL. Questa libreria sfrutta il recente rilascio di prototype 1.6.0_rc0. Le sue caratteristiche essenziali sono:

  • Leggerezza: ~2 KB (~1.5 KB versione ridotta)
  • Unobtrusive: non intrusiva
  • Supporta tutti i browser 
  • Personalizzabile a livello di style-sheet
  • Estremamente veloce 

Per il suo uso è richiesto:

  • prototype.js 1.6.0_rc0
  • provata sui browser: Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera 9+, Netscape Navigator 9+

Per utilizzarla basta includere la libreria prototype e proto.menu:

Download Proto.Menu.js (o versione compressa)

1
2
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/Proto.Menu.js"></script>

Si possono includere file CSS personalizzati

1
<link rel="stylesheet" href="Proto.Menu.css" type="text/css" media="screen" />

E il suo uso è davvero semplice, si crea un array con i link da mostrare:

1
2
3
4
5
6
7
8
9
10
11
var myLinks = [
  {name: 'Back', callback: function(){alert('back function called')}},
  {name: 'Forward', callback: function(){alert('Forward function called')}},
  {separator: true},
  {name: 'Reload', callback: function(){alert('Reload function called')}},
  {name: 'Disabled option', disabled: true},
  {name: 'Toggle previous option', callback: function(){
    var item = oLinks.find(function(l){return l.name == 'Disabled option'});
    item.disabled = item.disabled == false ? true : false;
  }}
]

Si attivano i menu passando il riferimento all’array creato:

1
2
3
4
5
6
7
<script type="text/javascript">
new Proto.Menu({
  selector: '.contextmenu' // context menu will be shown when element with class name of "contextmenu" is clicked
  className: 'myContextMenu', // this is a class which will be attached to menu container (used for css styling)
  menuItems: myLinks // array of menu items
})
</script>

Notare la proprietà selector che indica l’elemento legato al click per questo menu contestuale.

Continua...

Right Click in AS3: menu contestuali personalizzati

Eliminare i menu contestuali o più semplicemente rispondere al “right click” del mouse del Flash Player è una possibilità non permessa direttamente da codice ActionScript anche nella versione CS3. Questa caratteristica sarebbe interessante sia per i giochi che per le Applicazioni RIA. Paulius Uza ha proposto una soluzione per ActionScript 3 (AS3) che lavora in accoppiata con Javascript. Questa “patch” è ancora in fase di testing in quanto dipende dal Flash Player installato e dal browser. Si può contribuire testando un’applicazione demo qui.
È stato apero anche un “progetto” su Google Code:

The idea is fairly simple:

1-Use Javascript in the HTML container page to disable the right-click on top of the SWF.

2-Capture the event and pass it to a function that communicates with Flash via the External Interface

3-In Actionscript the function called from Javascript does whatever you need to display your own custom context-menu.

Continua...

Prototype 1.6.0 release candidate

È stata appena rilasciata la release candidate 1.6.0 di prototype con interessanti aggiornamenti all’intero sistema di API. In particolare il metodo observe dell’oggetto Event è stato migliorato e ora fornisce il contesto dell’oggetto che ha rilasciato l’evento. Questo “giusto” comportamento può tuttavia essere sovrascritto. Questo significa che per default this si riferisce all’oggetto che ha rilasciato l’evento. È stata introdotta anche la possibilità di creare eventi personalizzati. Altri miglioramenti riguardano la Function.prototype, le funzioni di DOM, Ajax, le funzioni delle classi e molto altro. Per una lista completa vedi il CHANGELOG.

Download

Continua...

Gestione degli eventi: similitudini tra Flash e Javascript

Uno dei punti di forza di Adobe Flash risiede nella scelta di ECMAScript (sottoprodotti di ECMA – European Computer Manufacturers Association) come standard di scripting. ActionScript e Javascript, infatti, derivano entrambi da uno standard superiore che li rende estremamente simili. Questo è uno dei motivi per il quale molti programmatori ActionScript sviluppano con estrema semplicità anche in Javascript e viceversa.

ActionScript ha da sempre avuto una gestione “doppia” degli eventi che spesso ha confuso alcuni sviluppatori. Nei MovieClip, ad esempio, è possibile impostare un evento semplicemente dichiarando una funzione alla proprietà dell’evento stesso, ad esempio:

Metodo 1

1
2
3
mio_mc.onRelease = function() {
    trace("Click sul MovieClip");
}

Altri oggetti, diversamente, richiedono una gestione diversa dell’evento che si vuole monitorare, richiedendo il classico listener, un oggetto predisposto a tale compito. Ad esempio l’oggetto Mouse può essere controllato in questo modo:

Metodo 2

1
2
3
4
5
var mouseListener:Object = new Obejct();
mouseListener.onMouseMove = function() {
    trace("Mouse in moto");
}
Mouse.addListener(mouseListener);

I componenti possiedono un’ulteriore variante, come il componente Loader:

Metodo 3

1
2
3
4
5
var loaderListener:Object = new Object();
loaderListener.complete = function(evt:Object) {
    trace("Caricamento completato");
};
myLoader_ldr.addEventListener("complete", loaderListener);

Perchè queste differenze? La ragione, in verità, è molto semplice. Il metodo 1, quello più immediato, viene utilizzato quando l’evento da “intercettare” è unico nel suo genere, cioè quando non ha senso far “scattare” più funzioni una di seguito all’altra. I metodi 2 e 3, invece, creano delle “liste” di “ascoltatori” e sono estremamente utili e potenti in quanto consentono di agganciare virtualmente infinite funzioni ad un determinato evento.

La stessa identica cosa accade in Javascript e la si può ammirare in librerie come prototype. Il comodissimo metodo observe(), messo a disposizione dall’oggetto Event, permette di agganciare funzioni ad un evento di un oggetto. Ad esempio:

1
Event.observe(window, 'load', function() { alert("Finestra caricata"); } );

In questo caso abbiamo agganciato la nostra funzione che mostra un alert all’evento load dell’oggetto window. Potremmo tuttavia ripetere l’istruzione e agganciare un’ulteriore evento:

1
2
Event.observe(window, 'load', function() { alert("Finestra caricata - 1"); } );
Event.observe(window, 'load', function() { alert("Finestra caricata - 2"); } );

Questa caratteristica, comune anche in ActionScript, è estremamente versatile è, in particolare in Javascript, è stata la chiave per la realizzazione di moltissimi “Widgets” ed estensioni (vedi il classico Snap) che oggi proliferano nel Web. La possibilità di accodarsi, infatti, ad eventi già controllati da altre funzioni, permette di essere non intrusivi (Unobtrusive) e quindi, in pratica, di aggiungere funzioni a quelle già presenti.

Continua...

Accordion per Scriptaculous

Finalmente un bello script in Javascript (scarica Accordion 1.0), semplice e leggero, che permette di aggiungere il componente Accordion usato in Flash e in mootools sfruttando la libreria scriptaculous. Effettivamente mancava questo oggetto, utile in tante occasioni. Questa versione è estremamente semplice e permette di creare Accordion sia orizzonali che verticali. Lo script è gratuito, tuttavia potete fare una piccola donazione all’autore per aiutarlo ad acquistare un bel MacPro ;)

Per utilizzarlo basta inserire queste semplici righe di codice:

1
2
3
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>

Il markup HTML è immediato:

1
2
3
4
5
6
7
8
9
10
11
<h3 class="accordion_toggle">Title Bar</h3>
<div class="accordion_content">
...
</div>
...
...
...
<h3 class="accordion_toggle">Title Bar</h3>
<div class="accordion_content">
...
</div>

Un’esempio pratico:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// General Syntax
new accordion('container-selector', options);


// Horizontal example
var horizontalAccordion = new accordion('#top_container', {    
    classNames : {
          toggle : 'horizontal_accordion_toggle',
          toggleActive : 'horizontal_accordion_toggle_active',
          content : 'horizontal_accordion_content'
     },    
     defaultSize : {
         width : 525
     },
     direction : 'horizontal'
});

// Vertical Accordion
var verticalAccordion = new accordion('#bottom_container');

Continua...

Unobtrusive LightWindow 2.0

QuickTime

Nuova versione della libreria ”unobtrusive” LightWindow in  Javascript specializzata nella visualizzazione di gallerie immagini ed ora non solo. Con questa versione è possibile visualizzare molti link: immagini, filmati Flash, filmati QuickTime, documenti PDF via FlashPaper, siti Web e “finestre” personalizzate. Inoltre tra le nuove caratteristiche troviamo:

  • Personalizzazione della “caption” della Window
  • Possibilità di creare finestre in sovrainpressione direttamente da codice Javascript
  • Supporto dell’iframe
  • Maggiori parametri per la personalizzazione della presentazione
  • Migliorata la gestione delle transizioni animate
  • Possibilità di miscelare immagini con animazioni Flash o filmati QuickTime

Continua...

Sviluppare applicazioni Adobe AIR con Aptana IDE

Adobe rilascia AIR (formerly code-named Apollo), acronimo di Adobe Integrated Runtime e, quindi, "successore" di Apollo. È possibile scaricare la versione beta rilasciata l’11 giugno qui: downloads AIR

Contemporaneamente viene rilasciata la build 0.2.8.15171 di Aptana IDE, ambiente di sviluppo eccezionale dedicato a sviluppatori HTML, PHP, Rails, Javascript ed ora anche con il supporto per AIR.

The Aptana IDE is a free, open-source, cross-platform, JavaScript-focused development environment for building Ajax applications. It features code assist on JavaScript, HTML, and CSS languages, FTP/SFTP support and a JavaScript debugger to troubleshoot your code.

Un temibile concorrente di Adobe Dreamweaver, almeno per i coders, visto che si tratta di un software gratuito integrabile, tra l’altro, con Eclipse. Misteriosamente, poi, Adobe ha rilasciato un’estensione per sviluppare applicazioni Adobe AIR solo per Dreamweaver CS3, abbandonando gli utenti della versione 8! Aptana, quindi, è un’ottima alternativa a Dreamweaver CS3, per chi vuole sperimentare lo sviluppo di package per Adobe AIR!

Tuttavia in Aptana la mancanza di una modalità WYSIWYG, ottima in Dreamweaver, ne diminuisce le potenzialità, che come già accennato sono indirizzate principalmente nell’editor di codice. Dreamweaver, in particolare con la release CS3, offre poi un’integrazione completa e ottimale con Flash CS3, Photoshop CS3 e tutti gli altri tools della nuovissima suite Creative Adobe, caratteristica completamente assente in ambienti IDE come Aptana.

L’IDE di Aptana, comuqnue sia, è spettacolare, comprensibile e dotata di tutte le caratteristiche vitali per un programmatore: gestione progetti, anteprime sui browser installati, autosalvataggio, confronto file, visualizzazione numeri di riga, editor completamente configurabile, collapse delle "taggature", XML incorporato, Debugger di alto livello, supporto italiano e moltissimo altro ancora.

Ottima la gestione della documentazione dinamica che permette di accedere alle specifiche W3C, Javascript e delle librerie (Web2.0 più note come Dojo, JQuery, Mootools, Yahoo (YUI) e Scriptaculous, tutto integrato in un unico ambiente nonostante la documentazione vera e propria venga prelevata direttamente dalla rete!

Aptana è disponibile per Windows (XP e Vista), Macintosh, Linux ed in Plugin per Eclipse. Sul sito sono disponibile moltissime features, compreso un Aptana.tv.

Insomma, per chi già sviluppa o per chi vuole iniziare a sviluppare applicazioni in Adobe AIR (qui troverete un tutorial video per iniziare lo sviluppo di applicazioni Adobe AIR), Aptana è un ambiente funzionale e confortevole, ottimamente integrato in rete e corredato anche da Plugin ed estensioni, alcune mirate per particolari browser come il debug per FireFox.

Ultima nota: alcune funzioni, come il Plugin per AIR, richiedono l’installazione delle runtime Java!

Continua...

Tips & Tricks: generatore 0/1 con l’operatore ternario

Chi viene dalla programmazione C/C++ non può non conoscere l’operatore ternario, standard ECMA e utilizzabile quindi in PHP, Javascript ed ActionScript. Ecco quindi una simpatca “riga di codice” (in PHP in questo caso) utile, ad esempio, a generare righe alternate in una tabella HTML, ad esempio, ma significativa per tante altre applicazioni:

1
( ($t=$t==0)?"even":"odd" )

Ricordo di aver visto la prima volta questa “magia” su un codice per Commodore 64 (anno 1984) proposto da Compute! Gazette – nella forma Basic ovviamente ;)

cg.jpg

Continua...

Ajax Frameworks

È uscita un’interessante indagine sulla quantità (non parliamo certo di qualità) di strumenti Ajax, in particolare Frameworks, che sono stati sviluppati in quest’ultimi anni, sia come puro Javascript lato Client che strati più ingegnerizzati lato Server; la pagina originale, in continuo aggiornamento, potete trovarla qui su Google Spreadsheet. La ricerca parte da AjaxPatterns dove sono stati elencati tutti i Frameworks presi in esame.
Come sottolinea l’autore (210 Ajax Frameworks and Counting) i dati non sono precisi al millesimo, quindi prendiamoli come indicativi, tuttavia forniscono qualche dato curioso.

Javascript puro – lato client 
Flash 3
Specialised 3
Logging 5
Graphics and Effects 6
XML 6
Remoting 19
Multipurpose 37
Totale 79

Sul fronte del puro Javascript è interessante notare il 19 di Remoting, che dimostra una forte attenzione per la tecnica Ajax in senso stretto, quindi a librerie che si sono concentrare nell’uso del controllo XMLHttpRequest.  I Multipurpose, evidentemente, sono i preferiti, in quanto garantiscono l’inclusione di un unico pacchetto che – in teoria – fa un po’ tutto.

Pure Javascript

Eiffel 0
Ruby, 4D, C#, Lisp, Tcl, Smalltalk 1
Perl, Lotus Notes 2
Coldfusion 4
Python 5
Multi-Language 11
C++, DotNet (+ASP) 19
PHP 38
Java 44
Totale 229

Sul fronte Server anche le grandi software house e i colossi informatici si sono davvero sbizzarriti ultimamente, infatti Java vince su tutti! Tuttavia il popolo di Internet risponde con PHP, open source per eccelenza. Microsoft e affini si trovano quindi dietro PHP con le tecnologie .NET etc…

Mi sono preso la briga di linkare le varie categorie così potete vedere i dati aggiornari ed avere anche un commento sui singoli Frameworks elencati. Uno sguardo può essere interessante ed istruttivo.

Continua...



Stop SOPA