SlideShare uma empresa Scribd logo
1 de 49
Baixar para ler offline
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
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
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
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
Modulo 3 – Javascript




I linguaggi del Web – Diego La Monica – http://diegolamonica.info
International Webmasters Association - http://www.iwa.it
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
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
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
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
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
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
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
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
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
Stringhe in JSON




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




                                            16
    I linguaggi del Web – Diego La Monica – http://diegolamonica.info
    International Webmasters Association - http://www.iwa.it
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
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
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
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
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
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
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
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
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
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
Modulo 4

AJAX, ARIA, Strumenti di sviluppo



  I linguaggi del Web – Diego La Monica – http://diegolamonica.info
  International Webmasters Association - http://www.iwa.it
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

Mais conteúdo relacionado

Destaque

Pensare a un catalogo per nativi digitali
Pensare a un catalogo per nativi digitaliPensare a un catalogo per nativi digitali
Pensare a un catalogo per nativi digitaliBiblioragazzi-blog
 
Rumore Silenzio
Rumore SilenzioRumore Silenzio
Rumore Silenziosimonardi
 
Creative commons internet
Creative commons internetCreative commons internet
Creative commons internetMassimo Sogni
 
Come usare al meglio Google
Come usare al meglio GoogleCome usare al meglio Google
Come usare al meglio Googleandreadigrazia
 
La ricerca dei contenuti multimediali tramite Google
La ricerca dei contenuti multimediali tramite GoogleLa ricerca dei contenuti multimediali tramite Google
La ricerca dei contenuti multimediali tramite Googlerobertads90
 
Uso avanzato motori ricerca_mitici
Uso avanzato motori ricerca_miticiUso avanzato motori ricerca_mitici
Uso avanzato motori ricerca_miticiSergio Agostinelli
 
CFP-UPT tutorial - Creative Commons Licence - 02
CFP-UPT tutorial - Creative Commons Licence - 02CFP-UPT tutorial - Creative Commons Licence - 02
CFP-UPT tutorial - Creative Commons Licence - 02cfpuptweb
 
Creative Commons: un copyright flessibile per opere creative
Creative Commons: un copyright flessibile per opere creativeCreative Commons: un copyright flessibile per opere creative
Creative Commons: un copyright flessibile per opere creativebibliotekcare
 
Creative Commons Italia - CCIT2005 - Polimetrica
Creative Commons Italia - CCIT2005 - PolimetricaCreative Commons Italia - CCIT2005 - Polimetrica
Creative Commons Italia - CCIT2005 - Polimetricagiovannisica
 
Gli attrezzi del mestiere del ricercatore
Gli attrezzi del mestiere del ricercatoreGli attrezzi del mestiere del ricercatore
Gli attrezzi del mestiere del ricercatorechisacercarevalontano
 
La didattica nel tempo di Google
La didattica nel tempo di GoogleLa didattica nel tempo di Google
La didattica nel tempo di GoogleRoberto Polillo
 
Copyright & Creative Commons (Maria Lillà Montagnani)
Copyright & Creative Commons (Maria Lillà Montagnani)Copyright & Creative Commons (Maria Lillà Montagnani)
Copyright & Creative Commons (Maria Lillà Montagnani)Iolanda Pensa
 
C'era una volta l'OPAC: come cambia il catalogo nell'era di Google
C'era una volta l'OPAC: come cambia il catalogo nell'era di GoogleC'era una volta l'OPAC: come cambia il catalogo nell'era di Google
C'era una volta l'OPAC: come cambia il catalogo nell'era di GoogleBiblioragazzi-blog
 
Information Literacy for the Google Generation
Information Literacy for the Google GenerationInformation Literacy for the Google Generation
Information Literacy for the Google GenerationTeresa S. Welsh
 
Le nuove tecnologie nei servizi bibliotecari. La biblioteca e la lettura a co...
Le nuove tecnologie nei servizi bibliotecari. La biblioteca e la lettura a co...Le nuove tecnologie nei servizi bibliotecari. La biblioteca e la lettura a co...
Le nuove tecnologie nei servizi bibliotecari. La biblioteca e la lettura a co...Biblioragazzi-blog
 

Destaque (20)

Anatomia motori ricerca
Anatomia motori ricercaAnatomia motori ricerca
Anatomia motori ricerca
 
Pensare a un catalogo per nativi digitali
Pensare a un catalogo per nativi digitaliPensare a un catalogo per nativi digitali
Pensare a un catalogo per nativi digitali
 
Licenze creative commons
Licenze creative commonsLicenze creative commons
Licenze creative commons
 
Rumore Silenzio
Rumore SilenzioRumore Silenzio
Rumore Silenzio
 
Creative commons internet
Creative commons internetCreative commons internet
Creative commons internet
 
Come usare al meglio Google
Come usare al meglio GoogleCome usare al meglio Google
Come usare al meglio Google
 
Ascoltare la rete_tips_tricks
Ascoltare la rete_tips_tricksAscoltare la rete_tips_tricks
Ascoltare la rete_tips_tricks
 
La ricerca dei contenuti multimediali tramite Google
La ricerca dei contenuti multimediali tramite GoogleLa ricerca dei contenuti multimediali tramite Google
La ricerca dei contenuti multimediali tramite Google
 
IC2008 Connettivi Booleani
IC2008 Connettivi BooleaniIC2008 Connettivi Booleani
IC2008 Connettivi Booleani
 
Uso avanzato motori ricerca_mitici
Uso avanzato motori ricerca_miticiUso avanzato motori ricerca_mitici
Uso avanzato motori ricerca_mitici
 
CFP-UPT tutorial - Creative Commons Licence - 02
CFP-UPT tutorial - Creative Commons Licence - 02CFP-UPT tutorial - Creative Commons Licence - 02
CFP-UPT tutorial - Creative Commons Licence - 02
 
Creative Commons: un copyright flessibile per opere creative
Creative Commons: un copyright flessibile per opere creativeCreative Commons: un copyright flessibile per opere creative
Creative Commons: un copyright flessibile per opere creative
 
Creative Commons Italia - CCIT2005 - Polimetrica
Creative Commons Italia - CCIT2005 - PolimetricaCreative Commons Italia - CCIT2005 - Polimetrica
Creative Commons Italia - CCIT2005 - Polimetrica
 
Gli attrezzi del mestiere del ricercatore
Gli attrezzi del mestiere del ricercatoreGli attrezzi del mestiere del ricercatore
Gli attrezzi del mestiere del ricercatore
 
La didattica nel tempo di Google
La didattica nel tempo di GoogleLa didattica nel tempo di Google
La didattica nel tempo di Google
 
Copyright & Creative Commons (Maria Lillà Montagnani)
Copyright & Creative Commons (Maria Lillà Montagnani)Copyright & Creative Commons (Maria Lillà Montagnani)
Copyright & Creative Commons (Maria Lillà Montagnani)
 
C'era una volta l'OPAC: come cambia il catalogo nell'era di Google
C'era una volta l'OPAC: come cambia il catalogo nell'era di GoogleC'era una volta l'OPAC: come cambia il catalogo nell'era di Google
C'era una volta l'OPAC: come cambia il catalogo nell'era di Google
 
Uso Avanzato Motori Ricerca
Uso Avanzato Motori RicercaUso Avanzato Motori Ricerca
Uso Avanzato Motori Ricerca
 
Information Literacy for the Google Generation
Information Literacy for the Google GenerationInformation Literacy for the Google Generation
Information Literacy for the Google Generation
 
Le nuove tecnologie nei servizi bibliotecari. La biblioteca e la lettura a co...
Le nuove tecnologie nei servizi bibliotecari. La biblioteca e la lettura a co...Le nuove tecnologie nei servizi bibliotecari. La biblioteca e la lettura a co...
Le nuove tecnologie nei servizi bibliotecari. La biblioteca e la lettura a co...
 

Semelhante a I Linguaggi Del Web (2° Giornata)

Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerMatteo Magni
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerMatteo Magni
 
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLSinergia Totale
 
Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)Giuseppe Vizzari
 
GWT Development for Handheld Devices
GWT Development for Handheld DevicesGWT Development for Handheld Devices
GWT Development for Handheld DevicesGWTcon
 
Sviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailDotNetMarche
 
Motori Di Ricerca e Standard Web - Smau 2008
Motori Di Ricerca e Standard Web - Smau 2008Motori Di Ricerca e Standard Web - Smau 2008
Motori Di Ricerca e Standard Web - Smau 2008Massimiliano Navacchia
 
Javaday 2009 php e java
Javaday 2009 php e javaJavaday 2009 php e java
Javaday 2009 php e javaMatteo Baccan
 
Delphi and ExtJS (26 ottobre 2017)
Delphi and ExtJS (26 ottobre 2017)Delphi and ExtJS (26 ottobre 2017)
Delphi and ExtJS (26 ottobre 2017)Eugenio Minardi
 
#LRIS2014 - MessageBus, Cluster communication and Caching on B2B
#LRIS2014 - MessageBus, Cluster communication and Caching on B2B#LRIS2014 - MessageBus, Cluster communication and Caching on B2B
#LRIS2014 - MessageBus, Cluster communication and Caching on B2Bkino2k
 
Un backend per tutte le stagioni con Spring
Un backend per tutte le stagioni con SpringUn backend per tutte le stagioni con Spring
Un backend per tutte le stagioni con SpringMarcello Teodori
 

Semelhante a I Linguaggi Del Web (2° Giornata) (20)

Rich Internet Application
Rich Internet ApplicationRich Internet Application
Rich Internet Application
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesigner
 
Corso Javascript
Corso JavascriptCorso Javascript
Corso Javascript
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesigner
 
Java&Solidarieta
Java&SolidarietaJava&Solidarieta
Java&Solidarieta
 
Link. javascript ajax
  Link. javascript ajax  Link. javascript ajax
Link. javascript ajax
 
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTML
 
8. Architetture web
8. Architetture web8. Architetture web
8. Architetture web
 
Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)Introduzione a JavaScript e jQuery (1/2)
Introduzione a JavaScript e jQuery (1/2)
 
GWT Development for Handheld Devices
GWT Development for Handheld DevicesGWT Development for Handheld Devices
GWT Development for Handheld Devices
 
Portofino per Jug Padova
Portofino per Jug PadovaPortofino per Jug Padova
Portofino per Jug Padova
 
DDive - 8.5.2 Xpages - L'evoluzione continua
DDive - 8.5.2 Xpages - L'evoluzione continuaDDive - 8.5.2 Xpages - L'evoluzione continua
DDive - 8.5.2 Xpages - L'evoluzione continua
 
Sviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle Monorail
 
Motori Di Ricerca e Standard Web - Smau 2008
Motori Di Ricerca e Standard Web - Smau 2008Motori Di Ricerca e Standard Web - Smau 2008
Motori Di Ricerca e Standard Web - Smau 2008
 
Javaday 2009 php e java
Javaday 2009 php e javaJavaday 2009 php e java
Javaday 2009 php e java
 
Delphi and ExtJS (26 ottobre 2017)
Delphi and ExtJS (26 ottobre 2017)Delphi and ExtJS (26 ottobre 2017)
Delphi and ExtJS (26 ottobre 2017)
 
7 - Web application e CMS
7 - Web application e CMS7 - Web application e CMS
7 - Web application e CMS
 
#LRIS2014 - MessageBus, Cluster communication and Caching on B2B
#LRIS2014 - MessageBus, Cluster communication and Caching on B2B#LRIS2014 - MessageBus, Cluster communication and Caching on B2B
#LRIS2014 - MessageBus, Cluster communication and Caching on B2B
 
07 - Web apps e CMS
07 - Web apps e CMS07 - Web apps e CMS
07 - Web apps e CMS
 
Un backend per tutte le stagioni con Spring
Un backend per tutte le stagioni con SpringUn backend per tutte le stagioni con Spring
Un backend per tutte le stagioni con Spring
 

Mais de Diego La Monica

E se non avessi davvero bisogno di un app?
E se non avessi davvero bisogno di un app?E se non avessi davvero bisogno di un app?
E se non avessi davvero bisogno di un app?Diego La Monica
 
Analisi comportamentale nelle app: pensare agli introiti contrasta con l'util...
Analisi comportamentale nelle app: pensare agli introiti contrasta con l'util...Analisi comportamentale nelle app: pensare agli introiti contrasta con l'util...
Analisi comportamentale nelle app: pensare agli introiti contrasta con l'util...Diego La Monica
 
Ideare un app e farla fruttare: quanti modi? Quale scegliere?
Ideare un app e farla fruttare: quanti modi? Quale scegliere?Ideare un app e farla fruttare: quanti modi? Quale scegliere?
Ideare un app e farla fruttare: quanti modi? Quale scegliere?Diego La Monica
 
Cordova: un viaggio di sola andata
Cordova: un viaggio di sola andataCordova: un viaggio di sola andata
Cordova: un viaggio di sola andataDiego La Monica
 
App di successo - quali strumenti? e le performance?
App di successo - quali strumenti? e le performance?App di successo - quali strumenti? e le performance?
App di successo - quali strumenti? e le performance?Diego La Monica
 
Applicazioni mobili: strumenti, costi soluzioni e peformance
Applicazioni mobili: strumenti, costi soluzioni e peformanceApplicazioni mobili: strumenti, costi soluzioni e peformance
Applicazioni mobili: strumenti, costi soluzioni e peformanceDiego La Monica
 
App di successo quali strumenti? e le performance?
App di successo quali strumenti? e le performance?App di successo quali strumenti? e le performance?
App di successo quali strumenti? e le performance?Diego La Monica
 
Presentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successoPresentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successoDiego La Monica
 
Presentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successoPresentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successoDiego La Monica
 
Strategie per applicazioni web prima o meglio dell'app nativa
Strategie per applicazioni web prima o meglio dell'app nativaStrategie per applicazioni web prima o meglio dell'app nativa
Strategie per applicazioni web prima o meglio dell'app nativaDiego La Monica
 
Applicazioni mobili: dall'ideazione alla pubblicazione
Applicazioni mobili: dall'ideazione alla pubblicazioneApplicazioni mobili: dall'ideazione alla pubblicazione
Applicazioni mobili: dall'ideazione alla pubblicazioneDiego La Monica
 
Competenze per lo sviluppo software nellera del web
Competenze per lo sviluppo software nellera del webCompetenze per lo sviluppo software nellera del web
Competenze per lo sviluppo software nellera del webDiego La Monica
 
Siti web, Portali, Rich Internet Application: tendenze e controtendenze
Siti web, Portali, Rich Internet Application: tendenze e controtendenzeSiti web, Portali, Rich Internet Application: tendenze e controtendenze
Siti web, Portali, Rich Internet Application: tendenze e controtendenzeDiego La Monica
 
ALPHA Architectural Overview
ALPHA Architectural OverviewALPHA Architectural Overview
ALPHA Architectural OverviewDiego La Monica
 
Giochi on line: soluzione per il marketing virale!
Giochi on line: soluzione per il marketing virale!Giochi on line: soluzione per il marketing virale!
Giochi on line: soluzione per il marketing virale!Diego La Monica
 

Mais de Diego La Monica (20)

E se non avessi davvero bisogno di un app?
E se non avessi davvero bisogno di un app?E se non avessi davvero bisogno di un app?
E se non avessi davvero bisogno di un app?
 
Analisi comportamentale nelle app: pensare agli introiti contrasta con l'util...
Analisi comportamentale nelle app: pensare agli introiti contrasta con l'util...Analisi comportamentale nelle app: pensare agli introiti contrasta con l'util...
Analisi comportamentale nelle app: pensare agli introiti contrasta con l'util...
 
Ideare un app e farla fruttare: quanti modi? Quale scegliere?
Ideare un app e farla fruttare: quanti modi? Quale scegliere?Ideare un app e farla fruttare: quanti modi? Quale scegliere?
Ideare un app e farla fruttare: quanti modi? Quale scegliere?
 
Cordova: un viaggio di sola andata
Cordova: un viaggio di sola andataCordova: un viaggio di sola andata
Cordova: un viaggio di sola andata
 
Css stuffs #3
Css   stuffs #3Css   stuffs #3
Css stuffs #3
 
App di successo - quali strumenti? e le performance?
App di successo - quali strumenti? e le performance?App di successo - quali strumenti? e le performance?
App di successo - quali strumenti? e le performance?
 
Css stuffs #2
Css   stuffs #2Css   stuffs #2
Css stuffs #2
 
Css stuffs #1
Css   stuffs #1Css   stuffs #1
Css stuffs #1
 
Applicazioni mobili: strumenti, costi soluzioni e peformance
Applicazioni mobili: strumenti, costi soluzioni e peformanceApplicazioni mobili: strumenti, costi soluzioni e peformance
Applicazioni mobili: strumenti, costi soluzioni e peformance
 
App di successo quali strumenti? e le performance?
App di successo quali strumenti? e le performance?App di successo quali strumenti? e le performance?
App di successo quali strumenti? e le performance?
 
Presentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successoPresentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successo
 
Presentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successoPresentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successo
 
Strategie per applicazioni web prima o meglio dell'app nativa
Strategie per applicazioni web prima o meglio dell'app nativaStrategie per applicazioni web prima o meglio dell'app nativa
Strategie per applicazioni web prima o meglio dell'app nativa
 
Applicazioni mobili: dall'ideazione alla pubblicazione
Applicazioni mobili: dall'ideazione alla pubblicazioneApplicazioni mobili: dall'ideazione alla pubblicazione
Applicazioni mobili: dall'ideazione alla pubblicazione
 
Competenze per lo sviluppo software nellera del web
Competenze per lo sviluppo software nellera del webCompetenze per lo sviluppo software nellera del web
Competenze per lo sviluppo software nellera del web
 
SVN/TRAC
SVN/TRACSVN/TRAC
SVN/TRAC
 
Siti web, Portali, Rich Internet Application: tendenze e controtendenze
Siti web, Portali, Rich Internet Application: tendenze e controtendenzeSiti web, Portali, Rich Internet Application: tendenze e controtendenze
Siti web, Portali, Rich Internet Application: tendenze e controtendenze
 
ALPHA Architectural Overview
ALPHA Architectural OverviewALPHA Architectural Overview
ALPHA Architectural Overview
 
Giochi on line: soluzione per il marketing virale!
Giochi on line: soluzione per il marketing virale!Giochi on line: soluzione per il marketing virale!
Giochi on line: soluzione per il marketing virale!
 
Pikno
PiknoPikno
Pikno
 

I Linguaggi Del Web (2° Giornata)

  • 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