MaiNick Web » javascript

Applicazioni Web Offline con HTML5

MaiNick — Mon, 20 Jun 2011 06:00:00 +0000

HTML5 fornisce una nuova funzionalità di caching per supportare le applicazioni web in modalità offline.

E’ necessario specificare un determinato file chiamato “cache manifest” nella pagina web a cui vogliamo applicare il sistema di caching.
L’URL del file cache manifest va specificato nel tag html del documento in cui vogliamo attivare la funzione di caching HTML5.

...

E’ importante che, per essere correttamente analizzato dal browser, il file di cache manifest deve avere come intestazione in header il tipo MIME text/cache-manifest; dunque è necessario aggiungere al web server l’associazione all’estensione del tipo di file o specificarlo manualmente, ad esempio utilizzando la direttiva header di PHP.

L’aspetto di un tipico file di cache manifest è il seguente:

CACHE MANIFEST
index.html
css/style.css
js/jquery.js
images/logo.png

NETWORK:
search.php

specifica diversi file di cache, e poi specifica che il file search.php non deve mai essere memorizzato nella cache, in modo da consentire che ad ogni tentativo di accesso al file è consentito di bypassare il file di cache.

Il procedimento di caching funziona nel momento in cui un utente fa richiesta o accede alla pagina corrispondente ad un documento a cui è associato un cache manifest, allora il browser deve prima controllare se su server quest’ultimo è stato modificato:

se non è stato modificato, viene utilizzato il contenuto della cache
altrimenti se presente una nuova versione del cache manifest, il contenuto presente della cache viene considerato obsoleto e ricaricato dal server.

Altra funzionalità importante del cache manifest è che può contenere anche voci di ripiego (sotto la voce FALLBACK), utilizzate dal client/browser se non è possibile recuperare il contenuto originale.

CACHE MANIFEST
index.html
css/style.css
js/jquery.js
images/logo.png

NETWORK:
search.php

FALLBACK
images/thumb.php	error.png

nell’esempio viene utilizzata un’immagine statica quando il recupero di un’immagine generata dinamicamente fallisce.

In HTML5 sono definite delle API che permettono di attivare manualmente gli aggiornamenti della cache:

update(): aggiorna la cache per il documento corrente in background;
swapCache(): passa alla cache dell’applicazione più recente, se vi è una più recente; valida anche per le successive richieste di risorse dalla cache;
onchecking(): cattura l’evento checking che si manifesta quando il client/browser verifica se disponibile un aggiornamento o tenta di scaricare per la prima volta il file di cache manifest (questo è sempre il primo evento della sequenza);
onerror(): cattura l’evento error che si manifesta per tutti gli errori che possono verificarsi del tipo: nello scaricare il cache manifest il client/browser ha ricevuto errore 404 o 410, non è stato possibile scariche le risorse elencate nel cache manifest, si è verificato un errore durante il recupero delle risorse;
onnoupdate(): cattura l’evento noupdate che si manifesta quando il client/browser verifica se disponibile un aggiornamento il cache manifest non è cambiato;
ondownloading(): cattura l’evento downloading che si manifesta quando il client/browser sta scaricando le risorse elencate nel cache manifest dopo aver verificato un aggiornamento di quel’ultimo;
onprogress(): cattura l’evento progress che si manifesta quando il client/browser sta scaricando le risorse elencate nel cache manifest;
onupdateready(): cattura l’evento updateready che si manifesta quando le risorse elencate nel cache manifest sono state appena ri-scaricate e lo script può utilizzare il metodo swapCache() per passare alla nuova cache;
oncached(): cattura l’evento cached che si manifesta quando le risorse elencate nel cache manifest sono state scaricate e ora si trovano nella cache;
onobsolete(): cattura l’evento obsolete che si manifesta quando per trovare il cache manifest il client/browser ha ricevuto l’errore 404 o 410, per cui la cache dell’applicazione viene cancellata;

TinyBox2: window modali standalone

MaiNick — Wed, 16 Mar 2011 06:00:00 +0000

TinyBox2 è il successore di TinyBox, una libreria JavaScript standalone, autonoma senza l’utilizzo di ulteriori framework come jQuery, per la realizzazione di finestre modali.

Dal peso leggero (5 KB), supporta immagini, iframe, HTML e richieste AJAX native. Le finestre modali realizzabili sono molto personalizzabili nelle animazioni, livello di opacità, auto-hide, posizione personalizzate e molto altro. Come già ci hanno insegnato altri tipo di plugin con la stessa funzionalità, è possibile chiudere le finestre cliccando sul pulsante di chiusura, cliccando ovunque al di fuori dell’area della finestra o tramite il tasto ESC della tastiera.

Inoltre possiamo implementare funzioni di callback per gli eventi di apertura o chiusura, e le finestre possono essere impostate con dimensioni fisse in larghezza e lunghezza o automatiche in base al loro contenuto.

E’ semplice utilizzare TinyBox2, ecco una semplice chiamata di una pagina HTML in una finestra modale:

TINY.box.show ({url: 'page-example.html' , larghezza: 300, altezza: 150});

Le opzioni disponibili sono:

html: contenuto HTML [false]
iframe: URL for embedded iframe [false]
url: path per chiamata AJAX [false]
post: variabile post, usata in congiunzione con url [false]
image: path immagine [false]
width: larghezza finestra [false]
height: altezza finestra [false]
animate: attiva/disattiva animazione [true]
close: visualizza bottone chiudi [true]
openjs: generica funzione eseguita su evento apertura [null]
closejs: generica funzione eseguita su evento chiusura [null]
autohide: numero di secondi di attesa per l’auto-chiusura della finestra[false]
fixed: imposta posizione della finestra fixed/static (css) [true]
opacity: imposta opacità della finestra da 0-100 [70]
top: per la posizione assoluta della finestra, pixels di distanza dal’alto [null]
left : per la posizione assoluta della finestra, pixels di distanza da sinistra [null]

Questo script è testato in IE7+, Firefox, Chrome, Opera e Safari ed è disponibile gratuitamente sul sito dell’autore con per ulteriori informazioni e demo.

ZEN: l’audio player in HTML5 & CSS3

MaiNick — Fri, 04 Feb 2011 06:30:00 +0000

ZEN è HTML5 Audio Player, un lettore audio realizzato con HTML5 e le animazioni di CSS3, alimentato da jPlayer.

Si presenta con un’interfaccia molto semplificata, stile anteprima di iTunes, con pulsante di riproduzione, che si trasforma in pausa una volta cliccato, visualizzato in un cerchio che mostra il progresso del brano ascoltato.

Al momento è sviluppato in modo da eseguire un singolo brano, ma sarà migliorato per supportare anche più file.

Iterazione foreach degli array in JavaScript

MaiNick — Mon, 02 Aug 2010 06:00:25 +0000

Iterare gli array associativi in PHP è molto più semplice, ma proprio in questi giorni ho avuto l’esigenza di ottenere la stessa funzionalità in JavaScript, e mi sono reso conto di non saper come recuperare i dati da un array associativo con un ciclo nel linguaggio JavaScript.

L’utilità nell’utilizzare un array associativo è dato dal fatto che posso selezionare tutti i valori relativi ad una determinata chiave, (indice dell’array), senza dover sapere in quale posizione dell’array è presente il dato.

In PHP per elencare in maniera ciclica tutti i dati occorre fare ricorso ad una struttura logica conosciuta come Foreach. Volendola applicare avremmo un codice simile al seguente:

$array_associativo = array(
  'gen' => 'Gennaio',
  'feb' => 'Febbraio',
  'mar' => 'Marzo',
  'apr' => 'Aprile',
  'mag' => 'Maggio',
  'giu' => 'Giugno',
  'lug' => 'Luglio',
  'ago' => 'Agosto',
  'set' => 'Settembre',
  'ott' => 'Ottobre',
  'nov' => 'Novembre',
  'dic' => 'Dicembre'
);
foreach ($array_associativo as $key => $value) {
  echo '[' . $key . '] => ' . $modello . ',<br />';
}

In JavaScript lo stessa variabile la si potrebbe creare in questo modo:

var array_associativo = new Array();
array_associativo['gen'] = 'Gennaio';
array_associativo['feb'] = 'Febbraio';
array_associativo['mar'] = 'Marzo';
array_associativo['apr'] = 'Aprile';
array_associativo['mag'] = 'Maggio';
array_associativo['giu'] = 'Giugno';
array_associativo['lug'] = 'Luglio';
array_associativo['ago'] = 'Agosto';
array_associativo['set'] = 'Settembre';
array_associativo['ott'] = 'Ottobre';
array_associativo['nov'] = 'Novembre';
array_associativo['dic'] = 'Dicembre';
);

Anche in JavaScript esiste una struttura logica che esegue questa funzione, ma non si chiama Foreach:

for (var key in array_associativo) {
  document.write('[' key + '] => ' + array_associativo[key] + ',<br /> ');
}

In effetti è sempre il solito for, ma con una condizione differente che permette di analizzare un array associativo.

Semplice menu verticale scorrevole con jQuery

MaiNick — Mon, 08 Jun 2009 07:00:43 +0000

In questo articolo vi mostrerò come creare un semplice menu scorrevole utilizzando jQuery.

Al passaggio del mouse su una delle voci di menu principale viene fuori il rispettivo sub-menu, quando il mouse passa su un’altra voce del menu principale si apre il suo sub-menu chiudendo quello precedente.

La prima cosa da fare è quella di inserire il seguente codice all’interno della sezione :

Si può notare che ci sono 3 file style.css, jquery-1.3.4.min.js e menu.js: il primo file rappresenta lo stile del menu che tratterò dopo; il secondo file è la libreria jQuery 1.3.2 che potete scaricare dal sito jquery.com o caricarla direttamente dai server di Google; il terzo file contiene il codice delle funzioni ed è il seguente:

$(document).ready(function(){
    //
    // Nascondo tutti i menu principali
    $("#menu1 > ul")
        .animate({bottom:"0px"},{queue:false,duration:350})
        .css("display","none");
    $("#menu2 > ul")
        .animate({bottom:"0px"},{queue:false,duration:350})
        .css("display","none");
    $("#menu3 > ul")
        .animate({bottom:"0px"},{queue:false,duration:350})
        .css("display","none");

    $("#menu1").hover(function(){
        //
        // effetto uscita altri menu
        $("#menu2 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        $("#menu3 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        //
        // effetto entrata menu
        $("#menu1 > ul")
            .animate({top:"33px"},{queue:false,duration:350})
            .css("display","block");
    });

    $("#menu2").hover(function(){
        //
        // effetto uscita altri menu
        $("#menu1 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        $("#menu3 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        //
        // effetto entrata menu
        $("#menu2 > ul")
            .animate({top:"33px"},{queue:false,duration:350})
            .css("display","block");
    });

    $("#menu3").hover(function(){
        //
        // effetto uscita altri menu
        $("#menu1 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        $("#menu2 > ul")
            .animate({top:"-200px"},{queue:false,duration:350})
            .css("display","none");
        //
        // effetto entrata menu
        $("#menu3 > ul")
            .animate({top:"33px"},{queue:false,duration:350})
            .css("display","block");
    });
});

La prima riga del codice precedente significa che quando viene caricato il documento vengono eseguite le funzioni al suo interno.

La prima parte del codice permette di nascondere le voci dei sub-menu, in modo che se javascript non è attivo vengono lo stesso visualizzati.

Bisogna poi creare le altri parti del codice per ogni voce di menu principale: il metodo hover di jQuery permette di catturare l’evento di passaggio del mouse sulla voce di menu e eseguire il codice al suo interno, che contemporaneamente all’apertura del rispettivo sub-menu chiude tutti gli altri sub-menu.
Il metodo animate permette di eseguire un’animazione sull’oggetto dalla posizione iniziale alla posizione top scritta con una velocità descritta dalla durata in millesecondi dell’animazione, visualizzando o nascondendo l’oggetto impostando con il metodo css la proprietà display.

Il codice html della pagina non è altro che un insieme di elenchi non ordinati di cui ad ogni voce dell’elenco principale è creato un nuovo elenco con le voci del sub-menu:


    
        
            Menu 1
            
                Sub-menu 1.1
                Sub-menu 1.2
                Sub-menu 1.3
                Sub-menu 1.4
                Sub-menu 1.5
            
        
        
            Menu 2
            
                Sub-menu 2.1
                Sub-menu 2.2
                Sub-menu 2.3
                Sub-menu 2.4
                Sub-menu 2.5
            
        
        
            Menu 3
            
                Sub-menu 3.1
                Sub-menu 3.2
                Sub-menu 3.3
                Sub-menu 3.4
                Sub-menu 3.5

Ad ogni voce di elenco principale assegniamo un id a cui applicare il metodo hover per eseguire l’effetto desiderato, mentre le classi assegnato le utilizzeremo per specificare le proprietà dello stile css:

#menu-wrapper {
    position: absolute;
    height: 300px;
    overflow: hidden;
}
#menu-wrapper ul {
    margin: 0;
    padding: 0;
}
li.menu {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}
div.menu-title {
    width: 200px;
    height: 33px;
    margin-right: 20px;
    background-color: #00689b;
}
div.menu-title a {
    padding-left: 15px;
    color: #fff;
    font-size: 24px;
    font-weight: bolder;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 33px;
}
ul.submenu {
    position: absolute;
    width: 200px;
}
ul.submenu li {
    height: 22px;
    margin-bottom: 1px;
    background-color: #00689b;
    line-height: 22px;
    list-style: none;
}
ul.submenu li a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

Il selettore menu-wrapper raggruppiamo tutto il menu dandogli un’altezza massima e specificando la proprietà overflow per nascondere tutto ciò che è al di fuori di esso.

La classe menu-title specifichiamo le proprietà da assegnare alle voci del menu principale; la classe submenu per le voci dei sub-menu.

Demo Codice

Spero che ti sia utile, grazie per la lettura non dimenticarti di iscriverti via RSS per tutte le novità sperando di avere più tempo libero e scrivere altri nuovi articoli.

Fissare il problema dell’overflow orizzontale IE

MaiNick — Thu, 16 Oct 2008 05:30:53 +0000

Internet Explorer ha una diversa impostazione dell’overflow rispetto a Firefox o Safari.

Ho trovato questo plugin per jQuery che permette di fissare il problema dell’overflow orizzontale sullo stesso browser. E’ possibile seguire il progetto alla pagina dell’autore.

In particolare , Firefox e altri, se si ha un overflow orizzontale dell’elemento pone la barra di scorrimento sul lato esterno dell’elemento. In Internet Explorer, se non possiamo vedere tutto il contenuto in verticale, genera la barra di scorrimento verticale, insieme alla barra di scorrimento orizzontale.

Ma il caso peggiore si ha quando abbiamo una sola riga overflowed: la barra di scorrimento orizzontale non è estesa su tutto l’elemento, rimane comunque un piccolo spazio laterale per la barra di scorrimento verticale anche non visualizzandola.

Seguendo l’autore, una soluzione al problema è di applicare i seguenti passi, solo per Internet Explorer:

trovare tutti gli elementi il cui contenuto è visualizzato con barra di scorrimento orizzontale
aggiungere 20 pixel di padding-bottom agli elementi
scostare la barra di scorrimento verticale

E’ possibile applicare questi tre punti tramite JavaScript:

window.onload = function () {
  // solo IE
  if (!/*@cc_on!@*/0) return;

  // trova gli element di prova
  var all = document.getElementsByTagName('*');
  var i = all.length;

  while (i--) {
    // se scrollWidth (la reale larghezza) è superiore alla
    // alla larghezza visibile, applicare le modifiche di stile
    if (all[i].scrollWidth > all[i].offsetWidth) {
      all[i].style['paddingBottom'] = '20px';
      all[i].style['overflowY'] = 'hidden';
    }
  }
};

o creare un plugin per jQuery con tale codice:

(function ($) {
  $.fn.fixOverflow = function () {
    if ($.browser.msie) {
      return this.each(function () {
        if (this.scrollWidth > this.offsetWidth) {
          $(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
        }
      });
    } else {
      return this;
    }
  };
})(jQuery);

// uso
$('pre').fixOverflow().doOtherPlugin();

Validare form con LiveValidation

MaiNick — Wed, 15 Oct 2008 13:17:49 +0000

I form sono molto utili per un iterazione con gli utenti visitatori del sito, ma nella compilazione non c’è situazione più noiosa di essere avvisati, riguardo un errore di compilazione, dopo averlo inviato.

Ci occupiamo in questo articolo di LiveValidation, una libreria in javascript che sto studiando in questi giorni, che risulta (tra quelle provate) la più semplice nell’utilizzo ed efficace.

Il sito ufficiale della libreria presenta oltre al download, una completa documentazione e una pagina ricca di esempi. Sono previste due versioni: una versione basata su Prototype e quella standalone (per utilizzarla con qualsiasi altro javascript framework), e per ciascuna è disponibile una versione compressa.

Validare input

Per utilizzare la libreria bisogna inserirla nella sezione head del documento, in questo modo:

Tutti i campi da validare nel form della pagina devono essere associati ad un ID identificativo univoco. Subito dopo la form, bisogna inserire il codice javascript che richiama la funzione di validazione della libreria:

Nella prima riga del codice abbiamo creato un nuovo oggetto LiveValidation che ha come argomento l’ID dell’input, andiamo poi ad aggiungere all’oggetto il metodo della libreria che vogliamo utilizzare per la convalida dell’input.

Il primo esempio prodotto, aggiungendo il metodo Presence, esso effettua la verifica sull’avvenuta compilazione del campo. Provando l’esempio noterete la presenza degli avvisi in inglese, impostati di default incorporati nel codice della libreria.

Per poterli personalizzare, senza mettere mani al codice della libreria, LiveValidation consente di definire una serie di parametri per ogni modulo, tra cui dei messaggi che andranno a sovrascrivere quelli di default.

Modifichiamo il primo esempio, personalizzando i messaggi di avviso (esempio):

Il metodo Format consente di validare il contenuto inserito nel campo rispetto ad un’espressione regolare definita come parametro (esempio):


[/js>
Il campo sarà validato solo se al suo interno viene inserita la stringa 'stringa'.

Per validare valori numerici si utilizza il metodo Numericality (esempio):
1

In questo caso, per impostare il messaggio di non validità, il parametro da usare è notANumberMessage.

Al metodo Numericality è possibile passare ulteriori parametri:

onlyInteger = true – validare solo numeri interi (non decimali)
is: 15 – verifica che il valore inserito sia 15
minimum: 12 – verifica che il valore inserito sia maggiore o uguale a 12
maximum: 22 – verifica che il valore inserito sia minore o uguale a 22

I parametri sopra possono essere combinati, l’unica espressione che non è possibile combinare è ‘is’ con ‘minimum’ o ‘maximum’, dove ‘is’ avrà la precedenza. Questo esempio verifica che il valore inserito rientri in un range e sia intero:

Altri tipi di validazione

Lunghezza

E’ possibile utilizzare gli stessi parametri descritti sopra per il metodo Length, con il quale è possibile validare un campo rispetto al numero dei caratteri inseriti.

Inclusione ed esclusione

E’ possibile impostare una serie di valori rispetto alla quale verificare la corrispondenza esatta o parziale del contenuto inserito nel campo. Attraverso il metodo Inclusion il campo sarà validato solo se contiene i valori passati:

Al contrario, usando il metodo Exclusion il campo non sarà validato se contiene i valori passati:

Passando il parametro ‘partialMatch: true’ è possibile controllare anche solo su una parte della stringa.

Checkbox

Attraverso il metodo Acceptance è possibile verificare che un checkbox sia stato o meno spuntato (esempio):

Conferma

Il metodo Confirmation verifica l’uguaglianza tra due input, molto utile per la verifica della password:

Inserisci password: 

Conferma password:

E-mail

Validare form

E’ possibile combinare i diversi metodi descritti sopra su un solo campo.

Il costruttore della libreria consente di istituire il campo del form come un oggetto LiveValidation a cui è possibile passare alcuni parametri facoltativi:

validMessage – messaggio visualizzato alla validazione del campo
onlyOnBlur: true – consente di effettuare la validazione solo quando l’input perde il focus
wait: 500 – tempo desiderato prima di validare l’input dall’ultima volta che si è premuto un tasto
onlyOnSubmit: true – consente di effettuare la validazione sol quando il modulo sarà inviato

Personalizzare lo stile degli avvisi

Tramite un foglio di stile possiamo personalizzare lo stile e la formattazione degli avvisi. E’ possibile definire appena cinque regole con classi che si applicano ai messaggi di avviso e ai campi:

/* classe che si applica a tutti i messaggi di validazione */
.LV_validation_message {
    font-weight: bold;
    margin: 0 0 0 5px;
}
/* classe che si applica ai messaggi di validità */
.LV_valid {
    color: #00CC00;
}
/* classe che si applica ai messaggi di non validità */
.LV_invalid {
    color: #CC0000;
}
/* stili applicati ai campi validi */
.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
    border: 1px solid #00CC00;
}
/* stili applicati ai campi non validi */
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}

Semplice menu verticale con effetto fisarmonica via JavaScript!

MaiNick — Sun, 13 Jul 2008 15:50:50 +0000

Di effetti a fisarmonica in JavaScript ne sono stati creati moltissimi, ma quello che oggi vi voglio presentare ha una caratteristica molto importante per gli sviluppatori, è leggerissimo.

Uno JavaScript che vi permette di avere un effetto fisarmonica sul menu o qualsiasi altro box dei vostri siti internet. La caratteristica fondamentale, come dicevo prima, è che pesa poco più di 1Kb, questo rende lo script più funzionale e veloce nel caricamento.

Uno degli accordion script più piccoli ed estremamente semplice e facile da integrare. Non richiede alcun framework ed è completamente cross-browser compatibile.

La prima cosa da fare è quella di inserire il seguente codice JavaScript, all’interno della sezione del vostro sito:

e inserire all’interno del tag il seguente codice JavaScript per il controllo della fisarmonica e per caricare all’apertura della pagina lo script:

che è nella forma:

Una volta inserito questo andremo a creare il nostro menu o box con il seguente codice:


    Simple Accordions
    
    Home
    
    
    
        
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        
    
    
    
    
    
        
        Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        
    
    
    
    About Us
    
        
        Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
        
    
    
    
    Downloads
    
        
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.

Terminate queste tre operazioni avremo un menu con effetto fisarmonica leggero e funzionante al 100%. Lo script è veramente comodo, un altro effetto 2.0 da inserire sul nostro sito personale.

Maggiori informazioni sullo script li troverete nel sito dell’autore; è possibile vedere anche cosa fa lo script stesso andando alla pagina dedicata alle demo.