Articoli con Tag ‘Unobtrusive-JavaScript’


EditArea: un rich Sourcecode Editor in Javascript

EditArea è un modo diverso di utilizzare le funzioni di editing online permesse dall’HTML. Questa tecnica, utilizzata il più delle volte per creare Editor WYSIWYG, viene sfruttata in questo caso per fornire un vero  e proprio editor di codice.

EditArea

Un normale campo TextArea viene trasformato in un vero e proprio editor con la possibilità di formattare il testo, cercare e sostituire parole e ottenere una colorazione del codice in tempo reale. Tra le sue caratteristiche notiamo:

  • Integrazione semplicissima tramite un solo script Javascript e una sola chiamata ad una funzione di patch.
  • Supporto della tabulazione
  • Cerca e sostituisci con regexp
  • Supporto della colorazione del codice per: PHP, CSS, Javascript, Python, HTML, XML, VB, C, CPP, Pascal, Basic, Brainf*ck
  • Auto-indentazione delle nuove linee
  • Numerazione linee di codice
  • Supporto multilingua: Croato, Danese, Inglese, Francese, Tedesco, Italiano, Giapponese, Polacco, potoghese)
  • Supporto per gzip
  • Multiple istanze
  • Fullscreen
  • Ridimensionamento della finestra in tempo reale
  • Possibilità di estendere le caratteristiche tramite plugin
  • Save e Load callback
  • Lavora con prototype e mootools

Un esempio di come usarlo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
editAreaLoader.init({
                id: "exemple_3" // id of the textarea to transform      
                ,start_highlight: true  
                ,font_size: "8"
                ,font_family: "verdana, monospace"
                ,allow_resize: "y"
                ,allow_toggle: false
                ,language: "fr"
                ,syntax: "css"  
                ,toolbar: "new_document, save, load, |, charmap, |, search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help"
                ,load_callback: "my_load"
                ,save_callback: "my_save"
                ,plugins: "charmap"
                ,charmap_default: "arrows"                  
});

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

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

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

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

Restyling: animazioni ed interattività

Dopo aver sistemato la grafica di Undolog e aver apportato gli ultimi ritocchi ad alcuni titoli (vedi sidebar), mi sono divertito ad usare l’accoppiata Prototype.js e Scriptaculous, in modalità non intrusiva (Unobtrusive)! Ecco un video (ma lo potete provare di persona qui a destra ;) ) con la simpatica funzione che ho aggiunto alla sidebar di Undolog, che oltre a renderla più gradevole spero la renda anche più funzionale!

Loading Flash Player...

Il codice che ho utilizzato è davvero semplice:

1
2
3
4
5
6
7
8
9
Event.observe(window, 'load', function() {
  $$('h2.dropdown').each( function(element) { element.style.cursor="pointer";
    element.observe('click', function(event) {
    if( this.next().style.display == "" ) new Effect.BlindUp(this.next(),{duration:.5});
    else new Effect.BlindDown(this.next(),{duration:.3});
    Event.stop(event);
  }.bindAsEventListener(element))
  })
})

Inoltre notate che la prima volta che viene caricata la Home Page di Undolog viene automaticamente chiuso il pannello delle Categorie – identificato dall’id tit_category:

1
Event.observe(window, 'load', function() {new Effect.BlindUp($("tit_category").next(),{duration:.5}) } )

I titoli sulla sidebar sono definiti, quindi, in questo modo:

1
2
3
4
<h2 id="tit_category" class="dropdown replacetitle" title="Categorie"><span>Categorie</span></h2>
<div>
    <p>Contenuto da far sparire!</p>
</div>

Tramite la classe dropdown vengono identificati i titoli H2 da rendere dinamici, grazie alla funzione doppio-dollaro ($$) di Prototype.js – di cui abbiamo già parlato…

Continua...

Unobtrusive Flash Objects

L’inserimento di oggetti (in particolare Flash Objects) all’interno delle pagine Web è diventato ultimamente un’attività spesso stressante. In altri Post abbiamo già affrontato l’argomento di come rilevare Flash ed inserirlo nelle pagine in modo appropriato. Dato che abbiamo parlato di tecniche Unobtrusive, vi segnalo due noti script in grado di rilevare (ed eventualmente installare) ed inserire oggetti Flash in una pagina, in modo assai afficiente e poco intrusivo: SWFObject e UFO.
Entrambi gli script offrono in sostanza le stesse caratteristiche e un funzionamento identico. L’approccio è quello che sostituire tramite Javascript un determinato TAG con il contenuto Flash. Come sappiamo questo procedimento elimina il problema dell’attivazione dell’oggetto Flash imposto da Internet Explorer, tuttavia implica che Javascript sia attivato sul target-browser.
Entrambi gli script non fanno uso di librerie esterne, come Prototype.js ad esempio. La differenza più importante tra i due è che SWFObject va chiamato quando il TAG da sostituire è già stato caricato nella pagina, modalità non propriamente Unobtrusive. Ecco uno stralcio di codice che mostra la sequenza di chiamata:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
This is replaced by the Flash content.
Place your alternate content here and users without the Flash plugin or with
Javascript turned off will see this. Content here allows you to leave out <code inline="true">noscript</code>
tags. Include a link to <a href="swfobject.html?detectflash=false">bypass the detection</a> if you wish.
</div>
<script type="text/javascript">
// < ![CDATA[
var so = new SWFObject("so_tester.swf", "sotester", "300", "300", "9", "#FF6600");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
so.write("flashcontent");
// ]]>
</script>

UFO, invece, permette un’approccio decisamente più in linea con i classici script Unobtrusive. La sostituzione del TAG avviene in modalità trasparente, senza abbligare sequenze di caricamento, come mostrato nell’esempio qui sotto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
<title>Unobtrusive Flash Objects (UFO) | Sample page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"test8.swf", width:"300", height:"120", majorversion:"12", build:"0", xi:"true" };
UFO.create(FO, "ufoDemo");
</script>
</head>
<body>
<div id="ufoDemo">
<p>Replacement content</p>
<p><a href="http://www.macromedia.com/go/getflashplayer"><img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" alt="Get macromedia Flash Player" style="border: none;" /></a></p>
</div>
</body>

Nel codice sorgente dello script di UFO, infatti, si nota immediatamente l’uso – più appropriato – di un evento che attente il caricamento completo della pagina prima di eseguire la sostituizione; approccio quindi estremamente più consono a script non intrusivi.

Continua...

Unobtrusive Javascript: pseudo & real

In questo Post vorrei analizzare l’uso di script unobtrusive dal punto di vista del Web Designer. Normalmente, infatti, uno script non intrusivo è tale nei confronti del navigatore finale!
Ma può esserlo anche per il Web Designer?

Unobtrusive Javascript dal punto di vista del Web Designer

Mettendoci nei panni di un Web Designer potremmo identificare due categorie di unobtrusive Javascript: true unobtrusive Javascript e pseudo unobtrusive Javascript.

Entrambe le categorie, tuttavia, non sono completamente non intrusive (sempre dal punto di vista del Web Designer). Un reale e completo unobtrusive Javascript non dovrebbe richiedere nessun intervento nella pagina Web, ma questo è – per ora – sostanzialmente impossibile. L’operazione minima richiesta durante l’installazione di uno script è comunque l’inserimento dell’inclusione dello script stesso! Viene dunque ammessa tale operazione che – effettivamente – non costringe il Web Designer ad apportare modifiche straordinarie alla struttura della pagina. Il semplice posizionamento dell’inclusione dello script all’interno del Tag head può essere quindi considerato non intrusivo.

Il true unobtrusive Javascript

Gli script di questo tipo sono quelli che richiedono la sola inclusione dello script unobtrusive e non ;pretendono nessun’altra operazione! Script di questo tipo sono, ad esempio (il solito e citatissimo), Snap. Una volta inserito il codice di inclusione il Web Designer non deve svolgere nessuna operazione ulteriore, in quanto lo script di Snap opera su Tag standard.

Gli pseudo unobtrusive Javascript

Questi si differenziano dai precedenti in quanto richiedono una taggatura ulteriore per funzionare correttamente. Esempi di questo tipo sono i Control.Tabs di Ryan Johnson o la libreria per gli slideshow Lightbox JS. Quest’ultima soluzione, ad esempio, richiede l’inserimento nel Tag A dell’attributo rel per identificare i link che devono essere modificati. Lightbox JS, in particolare, richiede addirittura la presenza esplicita sia di Prototype che di Scriptaculous. Come indicato sul sito di Lightbox JS, l’inclusione dello script deve essere di questo tipo:

1
2
3
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

I link che puntano ad un’immmagine che si vuole visualizzare con il sistema Lightbox JS devono essere scritti in questo modo:

1
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Inoltre per identificare un gruppo di immagini, per aggiungere la capacità di scorrere avanti e indietro le immagini, i Tag A devono essere impostati nel modo seguente:

1
2
3
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

La necessità di tali costrizioni risulta evidente; non esiste un modo semplice per distinguere un elemento link (Tag A) da un altro. In particolare non è possibile capire quale elemento il Web Designer vuole visualizzare in un modo o in un altro. Dev’essere necessariamente il Web Designer ad indicare in qualche modo i Tag e i loro comportamenti. Sono quindi richieste – intrusive – del tutto comprensibili, che non sminuiscono affatto l’utilità e le potenzialità di questi script. Comportano solo un dettaglio maggiore e qualche riga di codice in più al Web Designer.

È interessante, comunque, il doppio aspetto dell’unobtrusive Javascript, analizzato sia dal punto di vista dell’utente finale sia dal punto di vista Web Designer.

Continua...



Stop SOPA