Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Comportamento delle pagine (1a parte)

Modalità di interazione ed eventi Javascript
Modalità di interazione ed eventi Javascript
Link copiato negli appunti

Dopo la struttura (XHTML MP) e la presentazione (CSS MP) è necessario prendere in considerazione la terza componente fondamentale di una pagina web: il suo comportamento. Si fa riferimento, in questo caso, a quali possibilità di interazione sono offerte e a come la pagina reagisce a seguito degli eventi innescati dalle azioni dell'utente. Da un punto di vista tecnico una simile riflessione equivale a esaminare i requisiti di portabilità dei linguaggi di scripting lato client, in particolar modo di ECMAScript (la versione standard di JavaScript).

I produttori di browser per device mobili si sono accordati per seguire uno standard anche in questo ambito. Si tratta del linguaggio ECMAScript Mobile Profile. Le specifiche del linguaggio non sono ancora disponibili in via ufficiale: tuttavia l'OMA ha reso disponibile una versione pressoché definitiva delle caratteristiche di questa tecnologia

È necessario annotare che solo una parte dei browser per dispositivi mobili possiede un supporto per i linguaggi di scripting. Esempi positivi sono PocketIE, Openwave e Opera per dispositivi mobili. Generalmente, tuttavia, le ridotte capacità di elaborazione e di memoria limitano fortemente le prestazioni di questi browser rendendo impossibile l'implementazione del supporto per le tecnologie più onerose in termini di efficienza. Javascript è fra queste e, nonostante nei prossimi anni sia presumibile attendere un miglioramento sotto questo profilo, al momento abbiamo necessità di valutare il problema. Infatti, anche quando tale supporto è previsto i programmatori non hanno accesso a tutte le funzionalità previste dal linguaggio, soprattutto le più avanzate.

Per fare in modo che una pagina ideata per una consultazione da personal computer possa essere fruita senza difficoltà anche da cellulari e palmari abbiamo necessità di raggiungere due obiettivi:

  • l'interazione deve essere indipendente dal sistema di input;
  • l'accesso ai contenuti del sito non deve essere ostacolato;

Come regola generale è necessario inserire sempre un contenuto o una funzionalità alternativa laddove la mancata interpretazione di simili linguaggi potrebbe causare problemi di accesso. XHTML chiede che questi contenuti siano inseriti all'interno del tag <noscript>, il cui contenuto viene recepito solo in assenza del supporto per JavaScript. Molto spesso, tuttavia, è possibile fornire soluzioni gradevoli ed esenti da problemi ricorrendo semplicemente ad un uso corretto di XHTML e ai fogli di stile, delegando al server quelle funzionalità di calcolo altrimenti eseguite da JavaScript.

Javascript e dispositivi mobili

Una delle opportunità consentite dai linguaggi di scripting lato client consiste nel definire come la pagina si deve comportare a seguito del verificarsi di un evento. Questa caratteristica consente alle pagine di conquistare una notevole dinamicità e quindi, se usata nel modo appropriato, di offrire un'esperienza d'uso molto ricca.

Gli eventi possono essere innescati dal browser oppure dall'utente per mezzo dei propri sistemi di input. In entrambi i casi possono verificarsi problemi per i dispositivi mobili. In questa pagina ci concentreremo sulle criticità degli eventi guidati dall'utente.

I dispositivi mobili possiedono - come abbiamo potuto osservare nella prima parte - strumenti di input differenti da un PC desktop. La differenza più evidente e banale è l'assenza di un mouse. La maggior parte degli sviluppatori web non considera la possibilità che ad un sito si possa accedere anche per mezzo di strumenti meno convenzionali. Spesso, quindi, gli eventi chiamati ad attivare comandi di scripting sono quelli causati da azioni applicate al mouse stesso: il passaggio del puntatore su una determinata area e il click su un elemento sono i casi più tipici. Tuttavia questi comandi sono inefficaci su dispositivi mobili. Il rischio concreto è di inibire l'accesso a determinati contenuti o funzionalità.

Vediamo, nel dettaglio, come comportarsi con i vari tipi di evento possibili.

Gli eventi onmouseover e onmouseout sono fortemente legati all'uso del mouse giacché innescano un azione quando il puntatore si trova sull'elemento o quando esce dalla area di questo. Se l'informazione o la funzionalità che deriva da tale evento è importante sarebbe opportuno richiamare le medesime funzionalità anche per mezzo degli eventi logici onfocus e onblur , che fanno riferimento al momento in cui un elemento riceve il focus (per esempio spostandoci nella pagina con il tasto TAB o con il joystick di uno smartphone) e quando il focus stesso viene perso. Per esempio, se l'evento dovesse innescare un cambiamento nell'immagine di sfondo di un titolo chiamando una funzione JavaScript, dovremmo scrivere un codice simile a questo:

<h1 onmouseover="cambiasfondo();" onfocus="cambiasfondo();">Titolo</h1>

Chi scrive suggerisce, tuttavia, di evitare simili ridondanze se l'azione richiamata non è strettamente necessaria alla fruizione della pagina: si rischia di appesantire il codice e di richiedere un lavoro non richiesto al browser dell'utente.

Anche onclick e ondblclick sono strettamente connessi all'utilizzo di un mouse. In questo caso le alternative da utilizzare sono onkeydown (pressione di un tasto della tastiera), onkeyup (rilascio di un tasto della tastiera) e onkeypress (pressione e rilascio di un tasto). Si tratta tuttavia di un caso più delicato, dal momento che anche questi eventi non sono di natura logica ma sempre legati ad un meccanismo di input. Sebbene siano previsti da ECMAScript MP, quindi, potrebbero non essere interpretati correttamente. In tal senso la soluzione migliore sarebbe quella di evitare l'uso del linguaggio di scripting e/o di fornire la medesima informazione / funzionalità con l'uso di XHTML.

Gli eventi onchange e onselect , infine sono relativamente indipendenti dal dispositivo di input ma, come vedremo, potrebbero impedire l'accesso a determinate aree del sito in assenza di supporto per i linguaggi di scripting.

Ti consigliamo anche