Articoli con Tag ‘Javascript’


Tunneling e proxy server per Ajax e non solo

A causa della sua capacità di comunicare con il server, l’oggetto XmlHttpRequest (XHR), usato nella tecnologia Ajax (acronimo di Asynchronous JavaScript and XML, la cui pronuncia dovrebbe essere “egiacs” anche se noi italiani preferiamo “aiacs”), ha un blocco di protezione che gli impedisce di eseguire richieste esterne al dominio in cui opera. Questa protezione è necessaria per impedire Injection Javascript (tecniche di “iniezione” di codice estremamente pericoloso con lo scopo di violare il sistema) di svariato tipo, con l’obiettivo ultimo di “irrompere” nel sistema.
Questo limite è oggi tenuto in seria considerazione e si sta pensando, in qualche modo, di risolverlo – direttamente nell’oggetto XmlHttpRequest - senza pregiudicare la sicurezza (vedi anche: Third proposal for cross-site extensions to XMLHttpRequest ).

Comunque sia la situazione oggi è la seguente:

XHR

Continua...

Editor WYSIWYG per il Web

TynyMCE 2.1.2 (3.01 alpha)

TinyMCE Giunto alla versione 3.01a (l’ultima stabile è la 2.1.2), TinyMCE supporta i seguenti browser: browser supportati: Mozilla, MSIE, FireFox, Opera and Safari (experimental) (Mozilla, MSIE, FireFox, Opera and Safari (experimental)).
Grazie al supporto dei Plugins è completamente configurabile, sia a livello di Skin (vedi immagin in basso per due esempi) sia a livello di caratteristiche supportate (vedi Plugins). Completo di language pack permette di personalizzare l’output XHTML 1.0. Utilizzabile da PHP/.NET/JSP/Coldfusion GZip compressor supporta anche Ajax per le operaqzioni di Load/Save.

Continua...

script.aculo.us 1.8 preview

Anteprima della libreria di effetti Scriptaculous, la 1.8 in attesa della 2.0:

  • Prototype 1.6 (lastest trunk version)
  • Complete rewrite of Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor
  • Full CSS inheritance in Effect.Morph
  • New core effect: Effect.Tween
  • Sound: play mp3 files for sound effects; uses native playback on IE and available plugins whereever possible
  • Performance improvements
  • Tons of bugfixes

Per la lista completa dei miglioramenti vide il CHANGELOG

Continua...

Effetto arricciatura sulle immagini

Effetto arricciatura L’autore di questa libreria Unobtrusive è lo stesso di Reflex (Reflex 1.1: aggiungere effetto di riflessione alle immagini). Questa volta propone un simpatico effetto di “arricciatura” (curl) sulle immagini fotocon varie opzioni tra cui l’animazione dell’arricciamento al passaggio del mouse sul bordo dell’immagine. La tecnica utilizzata è sempre quella delle CANVAS utilizzate in tutti gli script disponibili sul sito. Per scaricare il curl script clicca qui.

Continua...

Accordion 2.0

image Ne avevamo già parlato di questa libreria Javascript Unobtrusive realizzata dallo stesso autore di LightWindow 2.0. Viene ora rilasciata la versione 2.0, che fa sempre uso di scriptaculous.
Tra le novità più interessanti troviamo la possibilità di “innestare” gli Accordion uno dentro l’altro, sia in modlità orizzontale che in verticale.
Allontanandosi poi dall’originale funzionamento degli Accrodion classici è stata aggiunto il comportamento di apertura/chiusura. Sul sito è possibile scaricare lo script (indicato ancora con la dicitura 1.0!?) e accedere agli esempi di codice.

Continua...

reCAPTCHA: STOP allo SPAM

image C’è chi li odia e chi non ne può fare a meno! I Captcha (completely automated public Turing test to tell computers and humans apart), ovvero i sistemi di “controllo umano”, permettono nella maggior parte dei casi di eliminare molto della SPAM prodotto nella rete. reCAPTCHA è un servizio gratuito che permette di installare un proprio controllo Captcha sul proprio Web. Una volta registrati sul sito è possibile elencare i propri Web generando due chiavi (una pubblica e una privata: vedi La cifratura RSA) da usare in PHP, WordPress, e MediaWiki..

image

Sul sito è possibile trovare anche un servizio di protezione mail. In pratica viene rilasciato un codice da inserire nel proprio Web in modo tale da non visualizzare in chiaro un indirizzo email, tipo “i[...]@miodominio.com”. Cliccando verrà mostrato un Captcha da risolvere!

Vedi anche: 

Continua...

DatePicker con Prototype e Scriptaculous

image Un’interessante e utile libreria Javascript basata sull’accoppiata Prototype e Scriptaculous che permette di aggiungere la funzione di DatePicker (componente presente in ActionScript/Flash) in normali INPUT TEXT HTML.

La sua caratteristica Unobtrusive (non intrusiva) lo rende uno strumento ideale per espandere le funzionalità di un sito già precostituito. Per attivare la funzione di DatePicker basta aggiungere la classe “date” nel nostro TAG INPUT. Nel codice Javascript è possibile impostare una serie di parametri tra cui il suporto per la lingua italiana.

Ecco una porzione di codice esemplificativa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="/prototype.js"></script>
<script type="text/javascript" src="/scriptaculous.js"></script>
<script type="text/javascript" src="/datepicker.js"></script>
<style type="text/css">
@import("/css/datepicker.css");
</style>
<form>
  <input type="text" id="date-from" name="date-from" />
</form>
<script type="text/javascript">
     var dpck   = new DatePicker({
      relative  : 'date-from',
      language  : 'en'
      });
</script>

Continua...

Aptana IDE update: milestone 9

È disponibile l’aggiornamento ad Aptana IDE, l’ambiente di sviluppo Web che supporta Adobe AIR e Apple iPhone. Tra le novità segnaliamo il miglioramento della sezione PHP con l’aggiornamento del Code Assist sia sulle funzioni che sui parametri. Migliorata anche la "colorazione" del codice. Aggiunto il supporto per gli ultimi framework Ajax tra cui Prototype.js e jQuery. Migliorata anche la gestione di Javascript.

image

Per la lista complete delle nuove funzionalità clicca qui.

Continua...

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...



Stop SOPA