Script.aculo.us: effetti avanzati, ma ancora poco codice!

Nella scorsa lezione su Script.aculo.us abbiamo implementato dei simpatici effetti di base, degli esempi di massima giusto per prendere familiarità con questo framework javascript e ci siamo lasciati con una promessa: quella di dar vita, nella seguente lezione, a qualcosa di un po’ più complesso.

Una promessa è una promessa e allora l’effetto che genereremo oggi sarà l’effetto Slider.

Non sempre complessità significa quintali di codice, funzioni su funzioni e grandi mal di testa per i programmatori: come avrai modo di constatare in seguito, ci serviremo solo di un paio di brevi (ma potenti) funzioni.

Poniamoci un obiettivo: vogliamo raggiungere questo risultato.

Prima di iniziare

Come avrai potuto immaginare, nel momento in cui associ scriptaculous alla tua pagina web, stai comunicando al browser di scaricare i files javascript che fanno parte della libreria,  oltre ovviamente al tuo file javascript che contiene le funzioni sviluppate da te.

Tutto questo costa in termini di prestazioni del sito, un tema molto caro al nostro blog e a tutti i bravi web designer.

Come ovviare a questo problema?

Google ha stretto un accordo con i maggiori produttori di framework javascript tra cui figura anche Thomas Fuchs, il padre di scriptaculous;

da un anno a questa parte è possibile,infatti, accedere a tutte queste librerie sfruttando le infrastrutture di Google che, nei propri server, custodisce una copia di ogni framework.

Tutto questo porta notevoli vantaggi in termini di velocità e di sicurezza, perché Google individua il suo host più vicino alla richiesta, sul quale è a sua volta installata una copia compressa del framework richiesto dalla pagina.

Il risultato? Un risparmio del 30% circa in termini di velocità.

Come vedrai nella nostra pagina HTML, il caricamento dei files javascript sarà affidato a due script:

<script src="https://www.google.com/jsapi"></script>
<script>
             google.load("prototype", "1.6");
               google.load("scriptaculous", "1.8.3");
</script>

Col primo ci colleghiamo al server di Google per effettuare la richiesta, col secondo comunichiamo tramite la funzione google.load() quale libreria caricare con rispettiva versione.

Questa premessa ci da la possibiltà di poter creare adesso la nostra pagina HTML (index.html)

Primo passo: il markup HTML

Creiamo dunque l’index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Script.aculo.us: Slider | Your Inspiration Web</title>
            <link rel="stylesheet" href="style.css" type="text/css" />
            <script src="https://www.google.com/jsapi"></script>
            <script>
             google.load("prototype", "1.6");
               google.load("scriptaculous", "1.8.3");
            </script>
            <script src="utility.js" type="text/javascript"></script>
            </head>
            <body>
            <h1>Script.aculo.us : Slider | Your Inspiration Web</h1>
              <div id="scrollable">
                          <ol>
                                      <li><img src="1.gif" /></li>
                                      <li><img src="2.jpg" /></li>
                                      <li><img src="3.gif" /></li>
                          </ol>
              </div>

            <div class="demo">
                        <div id="barra" class="slider">
                            <div id="cursore"></div>
                </div>
            <p>Trascina il cursore sulla barra per cambiare immagine...</p>
            </div>
</body>
</html>

Cosa abbiamo fatto?

Dopo il collegamento al foglio di stile (style.css) e quello a scriptaculous, abbiamo inserito il collegamento al file javascript esterno utility.js all’interno del quale inseriremo le nostre funzioni;

nel body abbiamo creato un div (scrollable) che contiene al suo interno 3 immagini (in questo caso 3 immagini relative a degli articoli del nostro blog).

Chiusa la lista che contiene le nostre immagini, abbiamo creato un div che avrà il compito di contenere la barra(barra) ed il cursore(cursore) attraverso i quali sarà possibile scrollare il contenuto del nostro div scrollable.

Passiamo al css :

body
{
            background:#fbf7f7;
            border: 0;
}

h1, p
{font-weight:bold;color:#7f192f;text-align:center;}

div.slider
{
            width:650px;
            margin:10px;
            background-color:#ccc;
            height:10px;
            position: relative;

}

div#cursore
{
            width:10px;
            height:15px;
            background-color:#7f192f;
            cursor:pointer;
            position: absolute;
            margin-top: -2px;
}

#scrollable{
            position: relative;
            margin: 20px auto 0px auto;
            height: 250px;
            overflow: scroll;
            display: block;
            white-space: nowrap;
            width: 600px;

}

#scrollable li
{
            display:inline;
            margin: 0;
            list-style-type: none;
}

.demo{
            position: relative;
            margin: 20px auto 0px auto;
            width: 650px;
}

Cosa abbiamo fatto?

Oltre a degli accorgimenti prettamente stilistici,  quali colori di sfondo e formattazione del testo, merita di essere osservata questa porzione di codice:

#scrollable{
            position: relative;
            margin: 20px auto 0px auto;
            height: 250px;
            overflow: scroll;
            display: block;
            white-space: nowrap;
            width: 600px;

}

Il div scrollable oltre ad avere larghezza ed altezza fisse, dovrebbe avere l’overflow settato su hidden, in modo tale da nascondere la scrollbar che il browser crea automaticamente.

Noi però impostiamolo su scroll e solo all’interno del nostro file javascript inseriremo un metodo appartenente alla libreria prototype (alla quale si è ispirato Fuchs nella creazione di Scriptaculous) per nascondere le scrollbar; tutto questo per permettere anche a chi dovesse aver disabilitato Javascript nel proprio browser di poter visualizzare comunque tutte le immagini che abbiamo inserito.
Nonostante il div abbia dimensioni fisse, le immagini uscirebbero comunque fuori dai limiti imposti da queste dimensioni; l’unico modo per poter ovviare a questo inconveniente è rappresentato da

display: block;

che di fatto nasconde tutto ciò che è all’interno del div, ma sfora oltre i suoi limiti.
Noi vogliamo realizzare uno scroll orizzontale, motivo per cui le immagini che abbiamo inserito all’interno di una lista non ordinata, devono essere visualizzate in orizzontale e non in verticale e quindi:

#scrollable li
{
            display:inline;
            margin: 0;
            list-style-type: none;
}

Una volta completato il css, non ci resta altro che creare la funzione javascript all’interno di utility.js.

Framework Scriptaculous: Slider

Nella fattispecie la funzione di scriptaculous che rende possible le modifiche ad un div effettuate tramite una scrollbar è l’effetto Slider.

Nell’esempio presente sulla pagina delle demo di scriptaculous, alla voce Slider potrai trovare il codice necessario per poter cambiare colore e dimensioni di un div.

Probabilmente è difficile, però, sentire il bisogno di dover implementare, all’interno del proprio sito, una funzione che permetta di poter cambiare i connotati di un div, se non per un puro e sano esibizionismo!

La scalabilità del codice permette, però, di poter associare delle funzioni a più risultati: noi oggi creiamo dallo Slider una sorta di galleria di immagini, gestibile da chi visualizza il nostro sito.

Ci servirà dunque una prima funzione che inizializzerà l’effetto ed una seconda che assocerà all’effetto Slider lo scorrimento orizzontale.

La prima delle due funzioni è:

onload = function scroll() {
var slider = new Control.Slider('cursore', 'barra', {
         onSlide: function(valore) { scrollOrizzontale(valore, $('scrollable'), slider);  },
         onChange: function(valore) { scrollOrizzontale(valore, $('scrollable'), slider); }
     });

Analizziamo il codice

Con onload comunichiamo al browser che deve avviare la funzione che segue il segno “=” non appena è terminato il caricamento della pagina.

All’interno della funzione che abbiamo creato, creiamo una variabile (slider) che assoceremo a Control.Slider, ossia l’effetto predefinito appartenente a scriptaculous.

Control.Slider necessita di:

  • cursore’ il div che scorre sulla barra e che trasmette il valore della sua posizione;
  • barra’ il div sul quale si muove il nostro cursore;
  • onSlide;
  • onChange.

onSlide e onChange

onSlide è un evento che associa una funzione al movimento del div ‘cursore’; questa funzione ha come parametro ‘valore’ ossia un numero che corrisponde alla posizione di ‘cursore’ su ‘barra’.

Al suo interno onSlide richiama una seconda funzione che chiameremo scrollOrizzontale, che avrà tre parametri:

  • valore: il parametro appena citato;
  • $(‘scrollable’) ossia l’id del div che contiene le nostre immagini da far scrollare;
  • slider: ossia la funzione di scriptaculous da richiamare.

onChange ha gli stessi identici parametri solo che li associa ad un tipo diverso di evento.

Inseriamo la funzione scrollOrizzontale() al nostro file javascript:

function scrollOrizzontale(value, element, slider) {
       element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
      }

Abbiamo ancora delle scrollbar da nascondere, ricordi? Come detto in precedenza utilizziamo un metodo di prototype:

$('scrollable').makeClipping().setStyle({width: '600px', height: '250px'});

Come puoi notare la sintassi utilizzata è abbastanza simile a quella impiegata da scriptaculous, soprattutto nella dichiarazione dell’elemento da modificare.

Il metodo utilizzato è makeClipping(), mentre in setStyle comunichiamo alla funzione l’altezza e la larghezza del nostro div.

Inseriamo questa riga di codice immediatamente dopo l’inizializzazione della nostra funzione scroll() e chiudiamola.

A questo punto il nostro file utility.js dovrebbe avere queste sembianze:

onload = function scroll()
{
$('scrollable').makeClipping().setStyle({width: '600px', height: '250px'});
var slider = new Control.Slider('cursore', 'barra', {
 onSlide: function(valore) { scrollOrizzontale(valore, $('scrollable'), slider);  },
 onChange: function(valore) { scrollOrizzontale(valore, $('scrollable'), slider); }
 });

function scrollOrizzontale(value, element, slider)
 {
 element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
 }
 };

Lo scroll orizzontale

La funzione scrollOrizzontale ha tre parametri:

  • value ossia il parametro che comunica il valore dello spostamento del div ‘cursore’;
  • element che corrisponde a $(‘scrollable’) della funzione precedente;
  • slider ossia la funzione associata all’effetto di scriptaculous Control.Slider.

All’interno di scrollOrizzontale ad element associamo uno scroll orizzontale del suo contenuto attraverso una funzione matematica.

Chiudiamo tutte le parentesi del caso et voilà: avremo creato una scrollbar in javascript, estremamente personalizzabile sia esteticamente che funzionalmente.

Conclusioni

Dalla prima lezione alla terza abbiamo compiuto dei bei passi in avanti: abbiamo analizzato la sintassi utilizzata da scriptaculous, abbiamo sfruttato parte delle sue potenzialità e con poco codice abbiamo dato vita ad effetti simpatici e -perché no – utili.

Quando nella prima lezione abbiamo introdotto il concetto di framework, lo abbiamo definito come un’intelaiatura di codice sul quale poggiare le nostre funzioni, in modo tale da doverci preoccupare della forma, non della base di ciò che creiamo: non è forse quello che abbiamo fatto in queste lezioni?

Abbiamo pensato a come inserire l’effetto nella pagina ed in secondo luogo a come armonizzarlo col resto del contenuto; non ci siamo mai curati di come esso andasse implementato!

Adesso che conosciamo i fondamenti, vale la pena approfondire anche altre librerie javascript, perché tutte si fondano sugli stessi concetti di base; cambierà di poco la sintassi, ma la logica che sta dietro ad un framework è sempre la stessa se parliamo di jQuery, YIU o Mootools.

NASA, Apple, Gucci: tutti questi ormai l’hanno fatto… e tu: darai spazio a Script.aculo.us all’interno del tuo sito?

Altri articoli di questa guida:

  1. Script.aculo.us: tanti effetti con poco codice.
  2. Script.aculo.us: primi effetti di base
  3. Script.aculo.us: effetti avanzati, ma ancora poco codice!
Tag: , ,

L'autore

Web designer, cerca l'ispirazione in ogni oggetto che lo circonda. Specializzato nella creazione di layout per Wordpress è sempre alla ricerca del framework javascript più cool, del social network più in voga, del design più innovativo... Genere musicale? Lounge...

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

9 commenti

Trackback e pingback

  1. Tweets that mention Script.aculo.us: effetti avanzati, ma ancora poco codice! | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Your Inspiration Web, nando pappalardo, Mario, Ivan, Nicolas Gutierrez and others. Nicolas…
  2. Script.aculo.us: tanti effetti con poco codice? | Your Inspiration Web
    [...] Script.aculo.us: effetti avanzati, ma ancora poco codice! Tags: Framework, Guide, javascript L'Autore [...]
  3. Script.aculo.us: primi effetti di base | Your Inspiration Web
    [...] Script.aculo.us: effetti avanzati, ma ancora poco codice! Tags: Framework, Guide, javascript L'Autore [...]