I Linguaggi Del  Web (2°  Giornata)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

I Linguaggi Del Web (2° Giornata)

on

  • 911 views

Teaching about: ...

Teaching about:
- Web Standards
- HTML/XHTML and CSS
- Javascript
- DOM
- Frameworks,
- AJAX,
- Cross-Browser Developement
- Web Accessibility and WAI-ARIA,
- Developing and testing tools

Statistics

Views

Total Views
911
Views on SlideShare
911
Embed Views
0

Actions

Likes
1
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

I Linguaggi Del Web (2° Giornata) Presentation Transcript

  • 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