I linguaggi del Web – 2ª Ed. (3° Giorno) Diego La Monica – Web Solution Developer Email:       me@diegolamonica.info Web: ...
Chi sono?●   Web solution developer●   Membro di IWA/HWG●   Membro del Consiglio Direttivo di IWA Italy da Febbraio 2009  ...
Il programma della giornata                     Modulo 4 – AJAX Interazioni client/server                                ...
Il programma della giornataModulo 5 – ARIA e l’accessibilità lato client                                                  ...
Nota sulla slideNellangolo inferiore destro di alcune slide èpresente un “pallino” come è visibile in                     ...
Modulo 4 - AJAX  I linguaggi del Web – Diego La Monica – http://diegolamonica.info  International Webmasters Association -...
Cosè AJAXAJAX, acronimo di Asynchronous JavaScript and XML, èuna tecnica di sviluppo web per creare applicazioni webintera...
Cosa si intende per AJAX?Col tempo AJAX ha assunto un significato (impropriamente) piùesteso: è AJAX tutto ciò che modific...
XMLHttpRequest alla base di tuttofunction crea_XMLHttpRequest(){    var obj = null;    if(typeof(XMLHttpRequest) === "func...
AJAX Graceful Degradation●   Lesecuzione dello script avviene regolarmente●   Se il set di istruzioni Javascript non è com...
Progressive Enhancement AJAX●   Tutte le funzioni sono implementate senza necessità di    Javascript    Quando tutti i nod...
Intercettare il DOM Ready●   Evento Load viene scatenato dopo che sono stati    caricati tutti i contenuti degli elementi ...
Intercettare lo stato DOMReadyPer Firefox, Opera 8.x (o precedenti), Internet Explorer 9 eWebkit (dalla versione 525):docu...
Intercettare lo stato DOMReadyPer Internet Explorer:document.write("<scr" +             "ipt id=__ie_init defer=defer " + ...
Intercettare lo stato DOMReadyPer WebKit prima della versione 525 e Opera 9function testDOMReady(){     _testDOMReady = se...
Framework●   Sviluppo rapido●   Cross-browser●●    Semplificano problemi complessi...    ...complicano problemi semplici! ...
Cosa sono i Framework?   Sono le fondamenta dell’edilizia del software                                                    ...
jQuery v 1.5.1jQuery is a fast and concise JavaScript Library that simplifies HTMLdocument traversing, event handling, ani...
MooTools v 1.3.1MooTools is a compact, modular, Object-Oriented JavaScriptframework designed for the intermediate to advan...
YUI Library v 3YUI 3 is Yahoo!s next-generation JavaScript and CSS library. It powers thenew Yahoo! homepage,Yahoo! Mail, ...
Axs LibraryAxs is a small Javascript library which provides methodswhich make it easier for web developers to implementmod...
JASTJAST è un Framework Javascript per lo sviluppo agile diapplicazioni e siti web arricchendo la presentazione dieffetti ...
Richiesta AJAX con MooTools<script src="mootools-core-1.3.1-full-compat.js"    type="text/javascript" charset="utf-8"></sc...
Richiesta AJAX con YUI<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"      type="text/javascript" charse...
Richiesta AJAX con jQuery<script src="jquery-1.5.1.min.js" type="text/javascript"></script><script type="text/javascript">...
Richiesta AJAX con JAST<script src="JAST.src.js" type="text/javascript" charset="utf-8"></script><script type="text/javasc...
Rendere dei link “AJAX” compliant/* Aggancia la funzione myAjaxFn allevento click per tutti i link disponibilinel DOM con ...
Punti deboli●   link con classe “ajaxes” o contentente il termine “ajax” saranno    conteggiati.●   Bisogna scrivere una r...
Rendere dei link AJAX con jQuery/* Aggancia la funzione myAjaxFn allevento click pertutti i link disponibili nel DOM con c...
Rendere dei link AJAX con JAST/* Aggancia la funzione myAjaxFn allevento click pertutti i link disponibili nel DOM con cla...
Problema: tecnologie assistive●   Le tecnologie assistive non sono in grado di verificare quello che    succede nella pagi...
Prendere un po dARIAIl gruppo di lavoro Protocols & Formats (W3C PFWG),sta lavorando ad una serie di specifiche con lo sco...
DocType con ARIA<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"    "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-...
ARIA in sintesi●   Aggiunge nuove caratteristiche al documento web●   Rende unapplicazione web “teoricamente” accessibile ...
Alcune caratteristiche di ARIA●   aria-live (polite, assertive, off)●   aria-relevant (additions, removals)               ...
LARIA giusta per ogni cosa●   Il menu di unapplicazione può supportare ARIA●   Una serie di schede organizzate a tab posso...
Strumenti client – Browser●   Mozilla Firefox●   Opera                                                     37●   Safari●  ...
Strumenti client (Mozilla Firefox)●   Firebug: per osservare e apportare cambiamenti al DOM, debug    di Javascript, monit...
Strumenti client (Opera)●   Dragonfly: editor di debug e monitoraggio    performance simile a firebug ma molto più        ...
Strumenti client (Google Chrome)●   Firebug: analogo al plugin per Mozilla Firefox con diverse    limitazioni dipendenti d...
Riferimenti e approfondimenti #1●   Webaccessibile.org    http://www.webaccessibile.org                                   ...
Riferimenti e approfondimenti #2●   Tutti per uno … XMLHttpRequest per tutti!    http://diegolamonica.info/tutorials/index...
Riferimenti e approfondimenti #3●   jQuery http://jquery.com●   MooTools http://mootools.org                              ...
I linguaggi del Web – 2ª Ed. (3° Giorno) Diego La Monica – Web Solution Developer Email:       me@diegolamonica.info Web: ...
Upcoming SlideShare
Loading in...5
×

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

820

Published on

Modulo 4 – AJAX
- Interazioni client/server
- Framework a confronto:
- jQuery
- Mootools
- YUI
- JAST

Modulo 5 – ARIA e l’accessibilità lato client

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
820
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. 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 perconto 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
  3. 3. Il programma della giornata Modulo 4 – AJAX Interazioni client/server 3 Framework a confronto: ● Framework jQuery ● Mootools ● YUI ● JAST I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  4. 4. Il programma della giornataModulo 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 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  5. 5. Nota sulla slideNellangolo inferiore destro di alcune slide èpresente un “pallino” come è visibile in 5questa slide.Esso indica che per la slide è prevista unasessione pratica. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  6. 6. Modulo 4 - AJAX I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  7. 7. Cosè AJAXAJAX, acronimo di Asynchronous JavaScript and XML, èuna tecnica di sviluppo web per creare applicazioni webinterattive. Lintento di tale tecnica è quello di ottenere 7pagine web che rispondono in maniera più rapida, grazieallo scambio in background di piccoli pacchetti di dati conil server, così che lintera pagina web non debba esserericaricata ogni volta che lutente effettua una modifica.(Wikipedia: AJAX) I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  8. 8. 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 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  9. 9. 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", } 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 { I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  10. 10. AJAX Graceful Degradation● Lesecuzione 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) I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  11. 11. 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=…; I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  12. 12. 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. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  13. 13. Intercettare lo stato DOMReadyPer Firefox, Opera 8.x (o precedenti), Internet Explorer 9 eWebkit (dalla versione 525):document.addEventListener(document, "DOMContentLoaded", metodoDiStartup); 13Modalità conforme alle specifiche delW3C I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  14. 14. Intercettare lo stato DOMReadyPer Internet Explorer:document.write("<scr" + "ipt id=__ie_init defer=defer " + "src="//:"></script>"); 14var script = document.getElementById("__ie_init");if ( script ) script.onreadystatechange = function() { if ( this.readyState != "complete" ) return; metodoDiStartup(); };script = null; I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  15. 15. Intercettare lo stato DOMReadyPer WebKit prima della versione 525 e Opera 9function testDOMReady(){ _testDOMReady = setInterval(function(){ if ( document.readyState == "loaded" || 15 document.readyState == "complete" ) { clearInterval( _testDOMReady ); _testDOMReady = null; testDOMReady(); } }, 10);} I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  16. 16. Framework● Sviluppo rapido● Cross-browser●● Semplificano problemi complessi... ...complicano problemi semplici! 16 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  17. 17. Cosa sono i Framework? Sono le fondamenta dell’edilizia del software 17Lo scopo di un framework è di risparmiare allosviluppatore la riscrittura di codice già steso inprecedenza per compiti simili. Questa circostanza si èpresentata sempre più spesso man mano che leinterfacce utente sono diventate sempre più complesse,o più in generale man mano che è aumentata la quantitàdi software con funzionalità secondarie simili. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  18. 18. jQuery v 1.5.1jQuery is a fast and concise JavaScript Library that simplifies HTMLdocument traversing, event handling, animating, and Ajax interactionsfor rapid web development. jQuery is designed to change theway that you write JavaScript. 18Dimensioni:29Kb Minified + Gzipped (usata in ambienti di produzione)212Kb Versione non compressa di sviluppo. http://jquery.com I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  19. 19. MooTools v 1.3.1MooTools is a compact, modular, Object-Oriented JavaScriptframework designed for the intermediate to advanced JavaScriptdeveloper. It allows you to write powerful, flexible, and cross-browsercode with its elegant, well documented, and coherent API. 19Dimensioni:~25Kb Minified + Gzipped (usata in ambienti di produzione)142Kb Versione non compressa di sviluppo. http://mootools.net I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  20. 20. YUI Library v 3YUI 3 is Yahoo!s next-generation JavaScript and CSS library. It powers thenew Yahoo! homepage,Yahoo! Mail, and many other Yahoo! sites. The YUI3 Library has been redesigned and rewritten from the ground upincorporating what weve learned in five years of dedicated librarydevelopment. The library includes the core components, a full suite of 20utilities, the Widget Infrastructure, a growing collection of widgets, CSSresources, 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/ I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  21. 21. Axs LibraryAxs is a small Javascript library which provides methodswhich make it easier for web developers to implementmodern Web 2.0 sites with accessible features. 21Dimensioni:24.6Kb http://dev.aol.com/axs I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  22. 22. JASTJAST è un Framework Javascript per lo sviluppo agile diapplicazioni e siti web arricchendo la presentazione dieffetti ed aiutando lo sviluppatore nellarduo compito dipresentare i contenuti allo stesso modo sulle più disparate 22piattaforme.Dimensioni:29.8Kb https://github.com/diegolamonica/ALPHA/tree/master/scripts I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  23. 23. 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 allesecuzione 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> I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  24. 24. 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><script type="text/javascript">YUI().use("io-base", function(Y) { // richiede luso 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 allevento io:complete // linvocazione del metodo complete var request = Y.io(uri); // Esegue la richiesta});</script> I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  25. 25. Richiesta AJAX con jQuery<script src="jquery-1.5.1.min.js" type="text/javascript"></script><script type="text/javascript">$.ajax({ // Effettua una chiamata AJAX url: "miapagina.php", success: function(data){ // Metodo di callback $(this).innerHML = data; 25 } Context: $(#mycontents), // Definisce loggetto a cui si riferisce il this // del metodo success.});</script> I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  26. 26. Richiesta AJAX con JAST<script src="JAST.src.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">_.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> I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  27. 27. Rendere dei link “AJAX” compliant/* Aggancia la funzione myAjaxFn allevento click per tutti i link disponibilinel 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){ …} I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  28. 28. Punti deboli● link con classe “ajaxes” o contentente il termine “ajax” saranno conteggiati.● Bisogna scrivere una routine cross-browser per agganciare la funzione 28 allevento ( CrossBrowserAttachEventFunction ) ● Alcuni browser supportano il metodo addEventListener ● Altri supportano il metodo attachEvent ● Altri non supportano né luno né laltro● 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
  29. 29. Rendere dei link AJAX con jQuery/* Aggancia la funzione myAjaxFn allevento click pertutti i link disponibili nel DOM con classe “ajax” */var ajaxLinks = $(a.ajax); 29ajaxLinks.click(myAjaxFn);function myAjaxFn(){ …} I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  30. 30. Rendere dei link AJAX con JAST/* Aggancia la funzione myAjaxFn allevento click pertutti i link disponibili nel DOM con classe “ajax” */var ajaxLinks = _._class(ajax, null, a); 30_.Events.add(ajaxLinks, click, myAjaxFn);function myAjaxFn(){ …} I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  31. 31. 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 allutilizzatore. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  32. 32. Prendere un po dARIAIl gruppo di lavoro Protocols & Formats (W3C PFWG),sta lavorando ad una serie di specifiche con lo scopo dimigliorare laccessibilità delle applicazioni Web. 32 Accessible Rich Internet Applications (WAI-ARIA) 1.0 http://www.w3.org/TR/wai-aria/ I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  33. 33. 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 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  34. 34. ARIA in sintesi● Aggiunge nuove caratteristiche al documento web● Rende unapplicazione web “teoricamente” accessibile 34● Descrive meglio ciascun elemento “fondamentale” del documento o dellapplicazione● 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
  35. 35. 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 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  36. 36. LARIA giusta per ogni cosa● Il menu di unapplicazione 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 ARIAPer ogni soluzione che adotta le specifiche ARIA comunque ènecessario garantire la navigazione da tastiera I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  37. 37. Strumenti client – Browser● Mozilla Firefox● Opera 37● 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
  38. 38. 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) I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  39. 39. Strumenti client (Opera)● Dragonfly: editor di debug e monitoraggio performance simile a firebug ma molto più 39 limitato. I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  40. 40. 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 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  41. 41. 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 I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  42. 42. Riferimenti e approfondimenti #2● 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/ I linguaggi del Web – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  43. 43. Riferimenti e approfondimenti #3● 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 – Diego La Monica – http://diegolamonica.info International Webmasters Association - http://www.iwa.it
  44. 44. 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

×