Teaching about:
- Web Standards
- HTML/XHTML and CSS
- Javascript
- DOM
- Frameworks,
- AJAX,
- Cross-Browser Developement
- Web Accessibility and WAI-ARIA,
- Developing and testing tools
1. I linguaggi del Web (2° Giorno)
Diego La Monica – Web Solution Developer
Email: me@diegolamonica.info
web: http://diegolamonica.info
Skype: diego.la.monica
Mobile: +39 333 7235382
2. Chi sono?
●
Web solution developer
●
Membro di IWA/HWG
●
Membro del Consiglio Direttivo di IWA Italy da Febbraio 2009
●
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” (di prossima pubblicazione)
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
3. Il programma della giornata
Modulo 3 – Javascript
3
Cos’è Javascript
Document Object Model
Graceful degradation
Progressive enhancement
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
4. Il programma della giornata
Modulo 4 –
AJAX, ARIA e l’accessibilità lato client
Interazioni client/server
Framework aiutami tu!
Prendere un po' d'ARIA.
Strumenti per lo sviluppo accessibile
4
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
5. Modulo 3 – Javascript
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
6. Cos'è Javascript
● Javascript è un linguaggio di scripting lato client
● Basato sullo standard ECMAScript
Il nome deriva dalla somiglianza strutturale della
6
●
grammatica di Java.
● Ciascun vendor ha implementato la sua versione
● Quasi tutti i browser supportano Javascript
● Tuttavia bisogna pensare anche a chi non lo supporta
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
7. Il terminatore di riga
Ogni istruzione è terminata da un “;” o da un CRLF salvo
eccezioni
7
var xyz = 123; //Riga terminata con “;”
var abc = “ciao mondo” // Riga terminata senza “;”
var abc = 1 +
2; // l'eccezione
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
8. Commentare il codice
// Commento su singola linea
/*
8
Commento su più linee
*/
/**
* Commento in formato javadoc
*/
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
9. Blocchi condizionali - if
Per descrivere dei blocchi di codice si usano “{” e “}”
“If” esegue un blocco di codice se la condizione
9
“expression” si verifica. Altrimenti esegue l'“alternativa”
if(expression==true){
…
} else {
…
}
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
10. Blocchi condizionali - switch
Controlla se l'espressione assume uno dei possibili valori
switch(expression){
case(value1):
…
10
break;
case(value2):
…
break;
default:
…
break;
}
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
11. Cicli iterativi
Blocco di codice ripetuto fino al verificarsi di una precisa
condizione.
for(var i=0; i<100; i++){
…
11
}
for(keys in object){
…
}
while(i++<100){
…
}
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
12. Gli array
L'elemento di un array è referenziato tramite un indice
descritto da parentesi quadre.
var myArray = new Array();
12
myArray[0] = 1;
myArray[1] = “lorem ipsum”;
myArray[2] = true;
Esistono inoltre array Associativi
myArray[“chiave”] = 123;
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
13. Gli oggetti
I metodi e le proprietà di un oggetto sono referenziate
tramite “.”
alert(document.title)
13
window.location.href = “http://192.168.0.1/index.htm”
Ma un oggetto in Javascript equivale ad un array
associativo:
document['title'] == document.title
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
14. JSON (da http://www.json.org/ )
JSON is a lightweight data-interchange format. It is easy for
humans to read and write. It is easy for machines to parse and
14
generate. It is based on a subset of the JavaScript Programming Language
,Standard ECMA-262 3rd Edition - December 1999. JSON is a text format
that is completely language independent but uses conventions
that are familiar to programmers of the C-family of languages[…].
These properties make JSON an ideal data-interchange language.
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
15. Stringhe in JSON
15
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
16. Numeri in JSON
16
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
17. Array con JSON
Array indicizzato:
[ 1, 2, 3,
4, 5 ];
17
Array associativo:
{
'cat': 'foo',
'dog': 'bar'
}
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
18. Oggetti con JSON
var coords = {
X: 100,
Y: 110,
Z: 25,
movePoint: function(offsetX,offsetY,offsetZ){
…
18
},
getPoint: function(){
return {
x: this.X,
y: this.Y,
z: this.Z
}
}
}
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
19. Document Object Model
● È la struttura di un documento
HTML/XML esposto sotto forma
di oggetto a Javascript
19
● Ogni elemento ha delle
caratteristiche comuni agli altri
e alcune “specializzazioni”
● Esistono nodi di tipo TextNode
● E nodi di tipo HTMLNode
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
20. Graceful degradation
● Si progetta per la massa
● Si cura successivamente la minoranza
20
● Esempi pratici:
● Testo alternativo dell'immagine
● Tabelle per il layout
● Elemento <noscript></noscript>
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
21. Progressive Enhancement – cos'è?
● Progettazione strutturale
● Si parte da una “versione di base”
21
● Progressivamente si verificano le capacità del
browser per esporre nuove e più evolute
funzionalità
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
22. Progressive Enhancement – uso #1
● Pagina HTML
Viene caricato il contenuto informativo della pagina
22
●
● Se il browser supporta i fogli di stile caricherà anche gli
stylesheet definiti nel documento (Progressive
Enhancement)
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
23. Progressive Enhancement – uso #2
● Menu a tendina
● Il menu viene presentato come un elenco puntato
23
● Se Javascript è disponibile vengono caricati i CSS e
creati eventuali altri nodi del DOM (Progressive
Enhancement)
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
24. Progressive Enhancement – uso #3
● Validazione Form
● La validazione avviene lato server
24
● Se Javascript è disponibile viene effettuato il
controllo anche lato client (Progressive
Enhancement)
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
25. Progressive Enhancement – uso #4
● Caricamento AJAX di contenuti
● Viene caricata la pagina con link alle risorse
25
● Viene intercettata la richiesta (Evento click e
keypress), caricati i contenuti parziali e annullato
l'evento per evitare che ci sia il caricamento
completo della pagina (Progressive Enhancement)
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
26. Wi.Li. - Link esterni discrezionali
●
Caricamento pagina
● La pagina viene presentata con i comportamenti
predefiniti su ciascun link
26
● Viene creata una selezione per sapere se i link
devono essere caricati nella finestra corrente o in
una nuova finestra e generati gli handler per
intercettare l'evento. (Progressive Enhancement)
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
27. Modulo 4
AJAX, ARIA, Strumenti di sviluppo
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
28. 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
28
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)
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
29. 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 oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
} catch (oError) { /* Do nothing */ }
return null;
29
var aVersions = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","Microsoft.XMLHttp" ];
for (var i = 0; i < aVersions.length; i++) {
try {
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
30. AJAX Graceful Degradation
● L'esecuzione dello script avviene regolarmente
● Se il set di istruzioni Javascript non è
30
completamente implementato (Es. sugli
SmartPhone) esegue operazioni non basate su
Javascript (Es. reload completo della pagina)
(Graceful Degradation)
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
31. Progressive Enhancement AJAX
● Tutte le funzioni sono implementate senza
necessità di Javascript
31
● Sull'evento load del documento si esegue un
metodo che andrà ad alterare il funzionamento dei
link AJAX.
document.getElementById('myLink').onclick='…';
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
32. Cosa si intende per AJAX?
Col tempo AJAX ha assunto un significato
(impropriamente) più esteso: è AJAX tutto ciò che
modifica il DOM.
32
● Caricamento di frammenti di pagina
● Animazione di oggetti sulla pagina
● Applicazione e modifica dello stile degli elementi
sul documento
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
33. Framework
● Sviluppo rapido
● Cross-browser
33
● Semplificano problemi
complessi...
● ...complicano problemi semplici!
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
34. Una richiesta GET in AJAX
_.xhttp.get('/mypage.html', {
param: 'abc'
},
function(buffer){
34
_._id('mycontents').innerHTML = buffer;
}
);
http://example.tld/mypage.html?param=abc
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
35. Una richiesta POST in AJAX
_.xhttp.post('/mypage.html', {
param: 'abc'
},
);
function(buffer){
}
_._id('mycontents').innerHTML = buffer;
35
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
36. Rendere dei link AJAX
/* 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')){
36
CrossBrowserAttachEventFunction(
ajaxLinks[n], 'click', myAjaxFn);
}
}
…
Function CrossBrowserAttachEventFunction(node, eventName, theFunction){
…
}
function myAjaxFn(event){
…
}
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
37. Punti deboli
● link con classe “ajaxes” o contentente il termine “ajax”
saranno conteggiati.
● Bisogna scrivere una routine cross-browser per agganciare la
37
funzione 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
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
38. 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');
38
_.Events.add(ajaxLinks, 'click', myAjaxFn);
Function myAjaxFn(){
…
}
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
39. 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
39
Document Object Model.
● Mantenere traccia di tutti i cambiamenti potrebbe portare ad
una confusione totale delle tecnologie assistive che
potrebbero quindi leggere le informazioni in modo
disordinato e senza alcun criterio.
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
40. Prendere un po' d'ARIA
Il gruppo di lavoro Protocols & Formats, sta lavorando ad una
serie di specifiche con lo scopo di migliorare dell'accessibilità
delle applicazioni Web.
40
● Accessible Rich Internet Applications (WAI-ARIA) 1.0
● WAI-ARIA User Agent Implementation Guide 1.0
● WAI-ARIA Authoring Practice 1.0
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
41. Alcune caratteristiche di ARIA
● aria-live (polite, assertive, off)
● aria-relevant (additions,
41
removals)
● aria-describedby
● aria-labelledby
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
42. L'ARIA giusta per ogni cosa
● Il menu di un'applicazione può supportare ARIA
● Una serie di schede fatte a tab possono supportare ARIA
● Un elemento non di tipo INPUT può diventare una
42
checkbox con ARIA
Per ogni soluzione che adotta le specifiche ARIA comunque
è necessario garantire un'ulteriore forma di
accessibilità/usabilità: la navigazione da tastiera
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
43. ARIA in sintesi
● Aggiunge nuove caratteristiche al documento web
● Rende un'applicazione web “teoricamente”
accessibile
43
● Descrive meglio ciascun elemento “fondamentale”
del documento o dell'applicazione
● Aumenta quindi il valore semantico degli elementi
e della pagina
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
44. Strumenti client – Browser
●
Mozilla Firefox
●
Opera
44
● Safari
●
Chrome
●
IETester (IE 5.5, IE 6, IE 7, IE 8)
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
45. 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
45
una 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
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
46. Strumenti client (Opera)
●
Dragonfly: editor di debug e
monitoraggio performance simile a
firebug ma molto più limitato.
46
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
47. Strumenti client (Google Chrome)
● Firebug: analogo al plugin per Mozilla Firefox con diverse
limitazioni dipendenti dalle policy di sicurezza di Google
Chrome.
47
● 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
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
48. Riferimenti e approfondimenti
● Webaccessibile.org http://www.webaccessibile.org
● JSON (JavaScript Object Notation) http://json.org
● AJAX su Wikipedia http://it.wikipedia.org/wiki/AJAX
48
● Tutti per uno … XMLHttpRequest per tutti!
http://diegolamonica.info/tutorials/index.php?id=6
● JAST http://jastegg.it
● Accessible Rich Internet Applications (WAI-ARIA) Version 1.0
http://www.w3.org/TR/wai-aria/
● Applicazioni AJAX Accessibili http://diegolamonica.info/smau-2008/
I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
49. I linguaggi del Web (2° Giorno)
Diego La Monica – Web Solution Developer
Email: me@diegolamonica.info
web: http://diegolamonica.info
Skype: diego.la.monica
Mobile: +39 333 7235382