I linguaggi del web - seconda edizione (3° giornata)

I linguaggi del Web – 2ª Ed. (3° Giorno)

Diego La Monica – Web Solution Developer
Email: me@diegolamonica.info
Web: http://diegolamonica.info
Twitter: http://twitter.com/jast/
Slide Share: http://slideshare.net/diego.la.monica/
Skype: diego.la.monica
Mobile: +39 333 7235382

Chi sono?
● Web solution developer
● Membro di IWA/HWG
● Membro del Consiglio Direttivo di IWA Italy da Febbraio 2009

2
● Membro del Gruppo di Lavoro Protocols & Format istituito dal W3C per
conto di IWA/HWG
● Autore del tool “Wi.Li.” http://wili.diegolamonica.info
● Autore del framework JavaScript “JAST” http://jastegg.it
● Autore del framework PHP “ALPHA”
http://github.com/diegolamonica/ALPHA/

I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it

Il programma della giornata
Modulo 4 – AJAX
 Interazioni client/server

3
 Framework a confronto:
● Framework jQuery
● Mootools
● YUI
● JAST

Il programma della giornata
Modulo 5 – ARIA e l’accessibilità lato client

4
 Prendere un po' di ARIA
 Le tecnologie assistive
 Ruoli, stati e proprietà
 Strumenti per lo sviluppo accessibile

Nota sulla slide

Nell'angolo inferiore destro di alcune slide è
presente un “pallino” come è visibile in

5
questa slide.
Esso indica che per la slide è prevista una
sessione pratica.


Modulo 4 - AJAX


Cos'è AJAX

AJAX, acronimo di Asynchronous JavaScript and XML, è
una tecnica di sviluppo web per creare applicazioni web
interattive. L'intento di tale tecnica è quello di ottenere

7
pagine web che rispondono in maniera più rapida, grazie
allo scambio in background di piccoli pacchetti di dati con
il server, così che l'intera pagina web non debba essere
ricaricata ogni volta che l'utente effettua una modifica.
(Wikipedia: AJAX)


Cosa si intende per AJAX?

Col tempo AJAX ha assunto un significato (impropriamente) più
esteso: è AJAX tutto ciò che modifica il DOM.

8
● Caricamento di frammenti di pagina

● Animazione di oggetti sulla pagina

● Applicazione e modifica dello stile degli elementi sul
documento


XMLHttpRequest alla base di tutto
function crea_XMLHttpRequest(){
var obj = null;
if(typeof(XMLHttpRequest) === "function" || typeof(XMLHttpRequest) === "object"){
obj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
obj = createFromActiveX();
}
return obj;
}

function createFromActiveX() {

}
var aVersions = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",

}
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
} catch (oError) { /* Do nothing */ }

return null;
9
"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","Microsoft.XMLHttp" ];
for (var i = 0; i < aVersions.length; i++) {
try {


AJAX Graceful Degradation
● L'esecuzione dello script avviene regolarmente

● Se il set di istruzioni Javascript non è completamente

10
implementato (Es. su dispositivi mobili di vecchia generazione

o su browser testuali) esegue operazioni non basate su

Javascript (eseguendo per ogni azione il reload completo

della pagina) (Graceful Degradation)

Progressive Enhancement AJAX
● Tutte le funzioni sono implementate senza necessità di
Javascript
Quando tutti i nodi del DOM sono disponibili

11
●

si esegue un metodo che andrà ad alterare i nodi del
DOM integrandoli con altri nodi, definendo nuove
caratteristiche o inserendo degli script JavaScript.
document.getElementById('myLink').onclick='…';

Intercettare il DOM Ready
● Evento Load viene scatenato dopo che sono stati
caricati tutti i contenuti degli elementi sul documento
(img, object, javascript, stili)… Troppo tardi!

12
● Evento DOM Ready viene scatenato quando la pagina
HTML è stata caricata anche se i contenuti (css,
javascript, immagini … ) non sono ancora disponibili.


Intercettare lo stato DOMReady
Per Firefox, Opera 8.x (o precedenti), Internet Explorer 9 e
Webkit (dalla versione 525):

document.addEventListener(document, "DOMContentLoaded", metodoDiStartup);

13
Modalità conforme alle specifiche delW3C


Per Internet Explorer:

document.write("<scr" +
"ipt id=__ie_init defer=defer " +
"src="//:"></script>");

14
var script = document.getElementById("__ie_init");
if ( script )
script.onreadystatechange = function() {
if ( this.readyState != "complete" ) return;
metodoDiStartup();
};
script = null;


Per WebKit prima della versione 525 e Opera 9

function testDOMReady(){
_testDOMReady = setInterval(function(){
if ( document.readyState == "loaded" ||

15
document.readyState == "complete" ) {
clearInterval( _testDOMReady );
_testDOMReady = null;
testDOMReady();
}
}, 10);
}


Framework
● Sviluppo rapido
● Cross-browser
●

●
Semplificano problemi complessi...
...complicano problemi semplici! 16

Cosa sono i Framework?
Sono le fondamenta
dell’edilizia del software

17
Lo scopo di un framework è di risparmiare allo
sviluppatore la riscrittura di codice già steso in
precedenza per compiti simili. Questa circostanza si è
presentata sempre più spesso man mano che le
interfacce utente sono diventate sempre più complesse,
o più in generale man mano che è aumentata la quantità
di software con funzionalità secondarie simili.

jQuery v 1.5.1
jQuery is a fast and concise JavaScript Library that simplifies HTML
document traversing, event handling, animating, and Ajax interactions
for rapid web development. jQuery is designed to change the
way that you write JavaScript.

18
Dimensioni:
29Kb Minified + Gzipped (usata in ambienti di produzione)
212Kb Versione non compressa di sviluppo.

http://jquery.com


MooTools v 1.3.1
MooTools is a compact, modular, Object-Oriented JavaScript
framework designed for the intermediate to advanced JavaScript
developer. It allows you to write powerful, flexible, and cross-browser
code with its elegant, well documented, and coherent API.

19
Dimensioni:
~25Kb Minified + Gzipped (usata in ambienti di produzione)
142Kb Versione non compressa di sviluppo.

http://mootools.net


YUI Library v 3
YUI 3 is Yahoo!'s next-generation JavaScript and CSS library. It powers the
new Yahoo! homepage,Yahoo! Mail, and many other Yahoo! sites. The YUI
3 Library has been redesigned and rewritten from the ground up
incorporating what we've learned in five years of dedicated library
development. The library includes the core components, a full suite of

20
utilities, the Widget Infrastructure, a growing collection of widgets, CSS
resources, and tools.
Dimensioni:
6.9Kb Minified + Gzipped (usata in ambienti di produzione)
7.2Mb Versione non compressa di sviluppo completa di esempi.
http://developer.yahoo.com/yui/3/


Axs Library
Axs is a small Javascript library which provides methods
which make it easier for web developers to implement
modern Web 2.0 sites with accessible features.

21
Dimensioni:
24.6Kb
http://dev.aol.com/axs


JAST
JAST è un Framework Javascript per lo sviluppo agile di
applicazioni e siti web arricchendo la presentazione di
effetti ed aiutando lo sviluppatore nell'arduo compito di
presentare i contenuti allo stesso modo sulle più disparate

22
piattaforme.

Dimensioni:
29.8Kb
https://github.com/diegolamonica/ALPHA/tree/master/scripts


Richiesta AJAX con MooTools
<script src="mootools-core-1.3.1-full-compat.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var result = $('result'); // ottiene un elemento dal DOM con id=result
var req = new Request({ // Istanzia una nuova richiesta AJAX
url: '/echo/html/',
onRequest: function(){ // Definisce il metodo da invocare all'esecuzione

23
result.set('text', 'Caricamento in corso...');
},
onSuccess: function(txt){ // metodo da invocare con risposta positiva (200)
result.set('text', txt);
},
onFailure: function(){ // Metodo da invocare in caso di errori
result.set('text', 'La richiesta non ha avuto esito positivo.');
}
});
req.send({url: 'miapagina.php'}); // Effettua la richiesta AJAX
</script>


Richiesta AJAX con YUI
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"
type="text/javascript" charset="utf-8"></script>

YUI().use("io-base", function(Y) { // richiede l'uso del modulo io-base
var uri = "miapagina.php";

24
function complete(id, o, args) {
var data = o.responseText; // Response data.
YUI().one('#mycontents').set('innerHTML', data);
};

Y.on('io:complete', complete, Y); // Associa all'evento io:complete
// l'invocazione del metodo complete

var request = Y.io(uri); // Esegue la richiesta
});
</script>


Richiesta AJAX con jQuery
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>

$.ajax({ // Effettua una chiamata AJAX
url: "miapagina.php",
success: function(data){ // Metodo di callback
$(this).innerHML = data;

25
}
Context: $('#mycontents'), // Definisce l'oggetto a cui si riferisce il this
// del metodo success.
});
</script>


Richiesta AJAX con JAST
<script src="JAST.src.js" type="text/javascript" charset="utf-8"></script>

_.xhttp.get('miapagina.php', // Effettua una chiamata AJAX
{
param: 'abc' // Fornendo i seguenti parametri in GET
},

26
function(buffer){ // Funzione di callback
_._id('mycontents').innerHTML = buffer;
}
);
</script>


Rendere dei link “AJAX” compliant
/* Aggancia la funzione myAjaxFn all'evento click per tutti i link disponibili
nel DOM con classe “ajax” */
var ajaxLinks=document.getElmentsByTagName("a");
var lun=ajaxLinks.length;
for (n=0;n<lun;n++) {
if (ajaxLinks[n].className.indexOf('ajax')){

27
CrossBrowserAttachEventFunction(
ajaxLinks[n], 'click', myAjaxFn);
}
}
…
function CrossBrowserAttachEventFunction(node, eventName, theFunction){
…
}
function myAjaxFn(event){
…
}


Punti deboli
● link con classe “ajaxes” o contentente il termine “ajax” saranno
conteggiati.
● Bisogna scrivere una routine cross-browser per agganciare la funzione

28
all'evento ( CrossBrowserAttachEventFunction )
● Alcuni browser supportano il metodo addEventListener

● Altri supportano il metodo attachEvent

● Altri non supportano né l'uno né l'altro

● Bisogna testare il codice scritto in più browser

Rendere dei link AJAX con jQuery
/* Aggancia la funzione myAjaxFn all'evento click per
tutti i link disponibili nel DOM con classe “ajax” */

var ajaxLinks = $('a.ajax');

29
ajaxLinks.click(myAjaxFn);

function myAjaxFn(){

…

}


Rendere dei link AJAX con JAST
/* Aggancia la funzione myAjaxFn all'evento click per
tutti i link disponibili nel DOM con classe “ajax” */

var ajaxLinks = _._class('ajax', null, 'a');

30
_.Events.add(ajaxLinks, 'click', myAjaxFn);

function myAjaxFn(){

…

}


Problema: tecnologie assistive
● Le tecnologie assistive non sono in grado di verificare quello che
succede nella pagina, perchè per ciascun cambiamento che noi
percepiamo a video, è cambiato qualcosa nel Document Object

31
Model (DOM).
● Mantenere traccia di tutti i cambiamenti potrebbe portare ad una
confusione totale delle tecnologie assistive con conseguenze
caotiche sulle informazioni trasmesse all'utilizzatore.


Prendere un po' d'ARIA
Il gruppo di lavoro Protocols & Formats (W3C PFWG),
sta lavorando ad una serie di specifiche con lo scopo di
migliorare l'accessibilità delle applicazioni Web.

32
Accessible Rich Internet Applications (WAI-ARIA) 1.0

http://www.w3.org/TR/wai-aria/


DocType con ARIA
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"

"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">

● Estende la specifica XHTML 1.1 con le nuove caratteristiche di
WAI-ARIA

33
● I documenti che fanno uso della specifica WAI-ARIA, possono
essere validati utilizzando la seguente DTD
http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd
● Non tutti i browser supportano però XHTML 1.1 servito come
Application/XHTML+XML

ARIA in sintesi
● Aggiunge nuove caratteristiche al documento web

● Rende un'applicazione web “teoricamente” accessibile

34
● Descrive meglio ciascun elemento “fondamentale” del

documento o dell'applicazione

● Aumenta quindi il valore semantico degli elementi e

della pagina

Alcune caratteristiche di ARIA
● aria-live (polite, assertive, off)
● aria-relevant (additions, removals)

35
● aria-describedby
● aria-labelledby

http://www.w3.org/TR/wai-aria/appendices#quickref


L'ARIA giusta per ogni cosa
● Il menu di un'applicazione può supportare ARIA
● Una serie di schede organizzate a tab possono supportare
ARIA

36
● Un elemento non di tipo INPUT può diventare una
checkbox con ARIA
Per ogni soluzione che adotta le specifiche ARIA comunque è
necessario garantire la navigazione da tastiera


Strumenti client – Browser
● Mozilla Firefox

● Opera

37
● Safari

● Chrome

● IETester (IE 5.5, IE 6, IE 7, IE 8)


Strumenti client (Mozilla Firefox)
● Firebug: per osservare e apportare cambiamenti al DOM, debug
di Javascript, monitoraggio del traffico client/server.
● Headings Map: mostra i livelli di nidificazione degli header in una

38
pagina.
● WCAG Contrast checker: analizzatore del contrasto cromatico
in conformita con le indicazioni WCAG 1.0 e 2.0
● Web developer: strumenti di controllo delle applicazioni web.
● Firevox: Screen reader per Firefox (fino alla versione 2.x di Firefox)

Strumenti client (Opera)
● Dragonfly: editor di debug e monitoraggio

performance simile a firebug ma molto più

39
limitato.


Strumenti client (Google Chrome)
● Firebug: analogo al plugin per Mozilla Firefox con diverse
limitazioni dipendenti dalle policy di sicurezza di Google
Chrome.

40
● Task Manager: per terminare solo le finestre che diventano
instabili e monitoraggio delle risorse sfruttate da ciascun
processo.
● Strumenti per sviluppatori: per monitorare le performance
di caricamento

Riferimenti e approfondimenti #1
● Webaccessibile.org
http://www.webaccessibile.org

41
● JSON (JavaScript Object Notation)
http://json.org
● AJAX su Wikipedia
http://it.wikipedia.org/wiki/AJAX

● Tutti per uno … XMLHttpRequest per tutti!

http://diegolamonica.info/tutorials/index.php?id=6

42
● Accessible Rich Internet Applications (WAI-ARIA)

Version 1.0 http://www.w3.org/TR/wai-aria/

● Applicazioni AJAX Accessibili

http://diegolamonica.info/smau-2008/

● jQuery http://jquery.com

● MooTools http://mootools.org

43
● YUI Library http://developer.yahoo.com/yui/3/

● Axs Library http://dev.aol.com/axs

● JAST http://jastegg.it e

http://github.com/diegolamonica/ALPHA/master/tree/scripts/


I linguaggi del web - seconda edizione (3° giornata)

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (7)

Similaire à I linguaggi del web - seconda edizione (3° giornata)

Similaire à I linguaggi del web - seconda edizione (3° giornata) (20)

Plus de Diego La Monica

Plus de Diego La Monica (20)

I linguaggi del web - seconda edizione (3° giornata)