I Linguaggi Del Web (2° Giornata)

Diego La Monica – Web Solution DeveloperEmail: [email protected]: http://diegolamonica.info Skype: diego.la.monicaMobile: +39 333 7235382

I linguaggi del Web (2° Giorno)

mailto:[email protected]

http://diegolamonica.info/

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

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)


http://www.iwa.it/

http://wili.diegolamonica.info/

http://jastegg.it/


3Il programma della giornata

Modulo 3 – Javascript

Cos’è Javascript Document Object Model Graceful degradation Progressive enhancement


http://www.iwa.it/


4Il 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


http://www.iwa.it/


Modulo 3 – Javascript


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

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


http://www.iwa.it/


7

Il terminatore di riga

Ogni istruzione è terminata da un “;” o da un CRLF salvo

eccezioni

var xyz = 123; //Riga terminata con “;”var abc = “ciao mondo” // Riga terminata senza “;”var abc = 1 +

2; // l'eccezione


http://www.iwa.it/


8

Commentare il codice

// Commento su singola linea

/*Commento su più linee*/

/*** Commento in formato javadoc*/


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

“expression” si verifica. Altrimenti esegue l'“alternativa”

if(expression==true){ …

} else { …

}


http://www.iwa.it/


10

Blocchi condizionali - switchControlla se l'espressione assume uno dei possibili valori

switch(expression){case(value1):

…break;

case(value2): …break;

default:…break;

}


http://www.iwa.it/


11

Cicli iterativiBlocco di codice ripetuto fino al verificarsi di una precisa

condizione.

for(var i=0; i<100; i++){…

}

for(keys in object){…

}while(i++<100){

… }


http://www.iwa.it/


12

Gli array

L'elemento di un array è referenziato tramite un indice

descritto da parentesi quadre.

var myArray = new Array();myArray[0] = 1; myArray[1] = “lorem ipsum”;myArray[2] = true;

Esistono inoltre array Associativi

myArray[“chiave”] = 123;


http://www.iwa.it/


13

Gli oggettiI metodi e le proprietà di un oggetto sono referenziate

tramite “.”

alert(document.title)window.location.href = “http://192.168.0.1/index.htm”

Ma un oggetto in Javascript equivale ad un array

associativo:

document['title'] == document.title


http://www.iwa.it/

http://192.168.0.1/index.htm


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

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.


http://www.iwa.it/

http://www.json.org/

http://javascript.crockford.com/

http://www.ecma-international.org/publications/files/ecma-st/ECMA-262.pdf


15

Stringhe in JSON


http://www.iwa.it/


16

Numeri in JSON


http://www.iwa.it/


17

Array con JSONArray indicizzato:

[ 1, 2, 3, 4, 5 ];

Array associativo:{

'cat': 'foo', 'dog': 'bar'

}


http://www.iwa.it/


18

Oggetti con JSONvar coords = {

X: 100,Y: 110,Z: 25,movePoint: function(offsetX,offsetY,offsetZ){

… },getPoint: function(){

return {x: this.X,y: this.Y,z: this.Z

}}

}


http://www.iwa.it/


19

Document Object Model● È la struttura di un documento

HTML/XML esposto sotto forma

di oggetto a Javascript

● Ogni elemento ha delle

caratteristiche comuni agli altri

e alcune “specializzazioni”

● Esistono nodi di tipo TextNode

● E nodi di tipo HTMLNode


http://www.iwa.it/


20

Graceful degradation

● Si progetta per la massa

● Si cura successivamente la minoranza

● Esempi pratici:

● Testo alternativo dell'immagine

● Tabelle per il layout

● Elemento <noscript></noscript>


http://www.iwa.it/


21

Progressive Enhancement – cos'è?

● Progettazione strutturale

● Si parte da una “versione di base”

● Progressivamente si verificano le capacità del

browser per esporre nuove e più evolute

funzionalità


http://www.iwa.it/


22

Progressive Enhancement – uso #1

● Pagina HTML

● Viene caricato il contenuto informativo della pagina

● Se il browser supporta i fogli di stile caricherà anche gli

stylesheet definiti nel documento (Progressive

Enhancement)


http://www.iwa.it/


23


●Menu a tendina

● Il menu viene presentato come un elenco puntato

● Se Javascript è disponibile vengono caricati i CSS e

creati eventuali altri nodi del DOM (Progressive

Enhancement)


http://www.iwa.it/


24


●Validazione Form

● La validazione avviene lato server

● Se Javascript è disponibile viene effettuato il

controllo anche lato client (Progressive

Enhancement)


http://www.iwa.it/


25

Progressive Enhancement – uso #4●Caricamento AJAX di contenuti

● Viene caricata la pagina con link alle risorse

● 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)


http://www.iwa.it/


26

Wi.Li. - Link esterni discrezionali● Caricamento pagina

● La pagina viene presentata con i comportamenti

predefiniti su ciascun link

● 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)


http://www.iwa.it/


Modulo 4

AJAX, ARIA, Strumenti di sviluppo


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

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)


http://www.iwa.it/


29

XMLHttpRequest alla base di tuttofunction 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", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","Microsoft.XMLHttp" ]; for (var i = 0; i < aVersions.length; i++) { try { var oXmlHttp = new ActiveXObject(aVersions[i]); return oXmlHttp; } catch (oError) { /* Do nothing */ } } return null;}


http://www.iwa.it/


30

AJAX Graceful Degradation● L'esecuzione dello script avviene regolarmente

● Se il set di istruzioni Javascript non è

completamente implementato (Es. sugli

SmartPhone) esegue operazioni non basate su

Javascript (Es. reload completo della pagina)

(Graceful Degradation)


http://www.iwa.it/


31

Progressive Enhancement AJAX● Tutte le funzioni sono implementate senza

necessità di Javascript

● Sull'evento load del documento si esegue un

metodo che andrà ad alterare il funzionamento dei

link AJAX.

document.getElementById('myLink').onclick='…';


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.

● Caricamento di frammenti di pagina

● Animazione di oggetti sulla pagina

● Applicazione e modifica dello stile degli elementi

sul documento


http://www.iwa.it/


33

Framework

● Sviluppo rapido

● Cross-browser

● Semplificano problemi

complessi...

● ...complicano problemi semplici!


http://www.iwa.it/


34

Una richiesta GET in AJAX_.xhttp.get('/mypage.html', { param: 'abc' }, function(buffer){ _._id('mycontents').innerHTML = buffer; });

http://example.tld/mypage.html?param=abc


http://www.iwa.it/

http://example.tld/mypage.html?param=abc


35

Una richiesta POST in AJAX_.xhttp.post('/mypage.html', {

param: 'abc'

},

function(buffer){

_._id('mycontents').innerHTML = buffer;

}

);


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')){ CrossBrowserAttachEventFunction( ajaxLinks[n], 'click', myAjaxFn); }}… Function CrossBrowserAttachEventFunction(node, eventName, theFunction){ … }function myAjaxFn(event){ … }


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

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


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');_.Events.add(ajaxLinks, 'click', myAjaxFn);

Function myAjaxFn(){ … }


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

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.


http://www.iwa.it/


40

Prendere un po' d'ARIAIl gruppo di lavoro Protocols & Formats, sta lavorando ad una

serie di specifiche con lo scopo di migliorare dell'accessibilità

delle applicazioni Web.

● Accessible Rich Internet Applications (WAI-ARIA) 1.0

● WAI-ARIA User Agent Implementation Guide 1.0

● WAI-ARIA Authoring Practice 1.0


http://www.iwa.it/


41

Alcune caratteristiche di ARIA

● aria-live (polite, assertive, off)

● aria-relevant (additions,

removals)

● aria-describedby

● aria-labelledby


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

checkbox con ARIA

Per ogni soluzione che adotta le specifiche ARIA comunque

è necessario garantire un'ulteriore forma di

accessibilità/usabilità: la navigazione da tastiera


http://www.iwa.it/


43

ARIA in sintesi● Aggiunge nuove caratteristiche al documento web

● Rende un'applicazione web “teoricamente”

accessibile

● Descrive meglio ciascun elemento “fondamentale”

del documento o dell'applicazione

● Aumenta quindi il valore semantico degli elementi

e della pagina


http://www.iwa.it/


44

Strumenti client – Browser● Mozilla Firefox

● Opera

● Safari

● Chrome

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


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

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


http://www.iwa.it/


46

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

monitoraggio performance simile a

firebug ma molto più limitato.


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.

● 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


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

● 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/


http://www.iwa.it/

http://www.webaccessibile.org/

http://json.org/

http://it.wikipedia.org/wiki/AJAX

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

http://jastegg.it/

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

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

Diego La Monica – Web Solution DeveloperEmail: [email protected]: http://diegolamonica.info Skype: diego.la.monicaMobile: +39 333 7235382

I linguaggi del Web (2° Giorno)

mailto:[email protected]


Technology

I Linguaggi Del Web (2° Giornata)