Tecnologie WEB. Sintesi

Transcript

1 Tecnologie WEB Sintesi

2 Mappa Concettuale CSS HTML XML CGI PERL Servlet JSP Java Script Lato Client AJAX Lato Server ASP Applet PHP 2

3 HTML Linguaggio di mark-up (contrassegno) nato nel 1991 Documento html: file di testo contenente tag (parole chiave che indicano al browser le caratteristiche degli oggetti) WEB editor: Editor di testo WYSIWYG (editor visuale) 3

4 Specifiche HTML 4.01 e HTML 5 /cover.html html40/intro/intro.html html / ions/lists/listlang-it.html it.html 4

5 Pagine in formato WEB risiedono su un server WEB sono visualizzabili tramite browser vengono trasmesse secondo il protocollo HTTP Sito WEB = Insieme di pagine riferite ad uno stesso argomento 5

6 Document Object DOM Object Model = modello per descrivere gli oggetti che compongono un documento Documento Intestazione Corpo Titolo Capitolo 1 Capitolo n Sezione 1 Paragrafo 1 6

7 XML extensible Markup Language Descrive il significato dei dati Creato per strutturare, memorizzare e trasmettere dati Non ha tag predefiniti Ciascuno può definire i propri 7

8 CSS Cascading Style Sheet Pagine di stile a cascata Consentono di separare il contenuto e la forma (aspetto) tyles.html

9 Fogli di stile esterni Gli autori possono separare i fogli di stile dai documenti HTML. Ciò offre numerosi benefici: Autori e gestori di siti possono condividere i fogli di stile attraverso una quantità di documenti (e siti). Gli autori possono modificare il foglio di stile senza che sia necessario apportare cambiamenti al documento. I programmi utente possono caricare selettivamente i fogli di stile (in base alle descrizioni dei media). 9

10 JavaScript Tecnologia lato client Script = righe di testo interpretate dal browser Linguaggio orientato agli oggetti Sintassi molto simile a Java (e a C++) <script language= JavaScript JavaScript > document.write( Ciao mondo! ); </script> 10

11 JavaScript L esecuzione degli script può essere collegata agli eventi (azioni compiute dall utente sulla pagina) L attributo id viene usato per accedere ad un elemento della pagina oggetto=document.getelementbyid(id id) La parola chiave var serve a dichiarare variabili locali 11

12 AJAX Asynchronous JavaScript and XML I programmi JavaScript possono comunicare direttamente con il server, ricevendo le risposte senza dover ricaricare tutta la pagina Web XMLHttpRequest: : oggetto per gestire la comunicazione asincrona con il server web 12

13 Modello sincrono L utente scrive un indirizzo o clicca su un link Il browser invia una richiesta Il server elabora una risposta e la invia Il browser visualizza la pagina (ricarica tutta la pagina) 13

14 Modello asincrono L utente genera un evento Javascript invia una richiesta al server Il server elabora una risposta Javascript aggiorna la pagina senza ricaricarla interamente 14

15 AJAX: utilizzo Esegue la validazione nei moduli Completa le caselle di testo Visualizza informazioni senza ricaricare la pagina 15

16 CGI Common Gateway Interface Metodo standard per lo scambio di dati tra server Web e programmi o script esterni Interfaccia - non linguaggio di programmazione 16

17 Gli script CGI PERL possono essere realizzati in linguaggio PERL (interpretato) sono eseguiti lato server sono memorizzati in una directory speciale del server Web (cgi( cgi-bin) hanno estensione.cgi o.pl la prima riga indica la cartella che contiene l interprete da utilizzare #!/usr usr/bin/perl 17

18 Caratteristiche di un sito WEB Usabilità Accessibilità Leggibilità del codice 18

19 Usabilità 19

20 Usabilità La caratteristica dei servizi di rispondere a criteri di: facilità e semplicità d uso, efficienza, rispondenza alle esigenze dell utente, gradevolezza e soddisfazione nell uso del prodotto 20

21 Principi di usabilità (definiti dal Sun Usability Lab) UTILITA : A cosa/chi serve il sito? FACILITA DI APPRENDIMENTO: Come si comportano gli utenti? Riescono ad utilizzare gli strumenti del sito? EFFICIENZA: Il sito risponde in modo efficace e veloce agli eventi di navigazione e di ricerca? FACILITA DI COMPRENSIONE: Gli utenti hanno imparato ad utilizzare il sito? Lo ricordano nelle visite successive? PREVENZIONE DEGLI ERRORI: Sono stati eliminati tutti gli errori di navigazione (es. link morti) e di scripting? SODDISFAZIONE: Il sito è gradevole e soddisfacente o crea disorientamento? 21

22 HOME RUN (Jakob( Nielsen) High-quality (estetica e contenuti) Often (aggiornamenti frequenti) Minimal (pagine non pesanti da scaricare) Easy (GUI semplice) Relevant (informazioni rilevanti) Unique (pagine originali) Net-centric (Internet come fondamento) 22

23 Linee guida Semplice da usare Chiaro nei contenuti Navigabile in tutte le sue parti 23

24 Tempi di scaricamento L utente: tra 1 e 15 secondi perde la concentrazione dopo secondi si spazientisce e nel 75% dei casi abbandona Non fare pagine pesanti!!! Le pagine vengono scaricate dall alto Fare intestazioni snelle!!! 24

25 Suddivisione della pagina intestazione, piè di pagina, corpo con i contenuti principali, sezione contenente gli eventuali collegamenti (link( link), sezione contenente un menù di navigazione. 25

26 Layout Negli anni 90 sono stati realizzati moltissimi siti web divisi in frame grazie al fatto che questi oggetti riuscivano a fornire un buon grado di dinamicità alle pagina web (i frame mantengono una parte del sito, solitamente il menu, fissa e modificano esclusivamente un secondo frame, quello centrale, per visualizzare le varie pagine del sito) Successivamente i siti web si sono evoluti verso una struttura a tabella. Ancora oggi sono presenti moltissime pagine sulla rete strutturate in tale modo. 26

27 Frameless & Tableless Il W3C consiglia di realizzare il layout dei siti web senza utilizzare frame e tabelle ma tramite i css 27

28 Perché è meglio non usare i frame? I browser non possono ottimizzare e rendere omogeneo il caricamento dei frame: Lo schema strutturale della pagina è alterato Il tempo di caricamento della pagina è moltiplicato per il numero di frame Vengono alterate le funzionalità: Bookmarking Link già visitati Back Stampa Reload I frame non vengono interpretati in modo univoco dai browser 28

29 Perché le tabelle non si devono usare per creare i layout? perché non hanno quello scopo, le tabelle servono infatti a contenere dati perché il codice di una tabella viene letto, dai sw lettori per ciechi, una riga alla volta, e se abbiamo diviso il layout in tante celle, allora l utente non vedente non capirà nulla perché utilizzando i css è molto più facile apportare modifiche 29

30 Il tag <div> Suddivide la pagina in sezioni Permette di costruire pagine WEB basate su livelli che possono essere posizionati liberamente e visualizzati (o nascosti) all occorrenza oggetto.style.visibility= hidden hidden ; oggetto.style.visibility= visible visible ; 30

31 Accessibilità 31

32 Accessibilità La capacità dei sistemi informatici, nelle forme e nei limiti consentiti dalla conoscenze tecnologiche, di erogare servizi e fornire informazioni fruibili, senza discriminazioni, anche da parte di coloro che, a causa di disabilità,, necessitano di tecnologie assistive e configurazioni particolari 32

33 Legge 9 gennaio 2004 n. 4 (legge Stanca) Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici Art. 1 (Obiettivi( e finalità) 1. La Repubblica riconosce e tutela il diritto di ogni persona ad accedere a tutte le fonti di informazione e ai relativi servizi, ivi compresi quelli che si articolano attraverso gli strumenti informatici e telematici. 2. È tutelato e garantito, in particolare, il diritto di accesso ai servizi informatici e telematici della pubblica amministrazione e ai servizi di pubblica utilità da parte delle persone disabili, in ottemperanza al principio di uguaglianza ai sensi dell'articolo 3 della Costituzione. 33

34 Art. 3 (Soggetti erogatori) 1. La presente legge si applica alle pubbliche amministrazioni di cui al comma 2 dell'articolo 1 del decreto legislativo 30 marzo 2001, n. 165, e successive modificazioni, agli enti pubblici economici, alle aziende private concessionarie di servizi pubblici, alle aziende municipalizzate regionali, agli enti di assistenza e di riabilitazione pubblici, alle aziende di trasporto e di telecomunicazione a prevalente partecipazione di capitale pubblico e alle aziende appaltatrici di servizi informatici. 2. Le disposizioni della presente legge in ordine agli obblighi per l'accessibilità non si applicano ai sistemi informatici destinati ad essere fruiti da gruppi di utenti dei quali, per disposizione di legge, non possono fare parte persone disabili. 34

35 Art. 5 (Accessibilità degli strumenti didattici e formativi) 1. Le disposizioni della presente legge si applicano, altresì, al materiale formativo e didattico utilizzato nelle scuole di ogni ordine e grado. 2. Le convenzioni stipulate tra il Ministero dell'istruzione, dell'università e della ricerca e le associazioni di editori per la fornitura di libri alle biblioteche scolastiche prevedono sempre la fornitura di copie su supporto digitale degli strumenti didattici fondamentali, accessibili agli alunni disabili e agli insegnanti di sostegno, nell'ambito delle disponibilità di bilancio. 35

36 Accessibilità Il sito è: Presente nei motori di ricerca Utilizzabile dai disabili Funzionante con qualsiasi risoluzione dello schermo Indipendente dal browser 36

37 WCAG - Linee guida Web Accessibility Initiative LINEE GUIDA Conformità (3 livelli) Priorità (3 gruppi) 37

38 WCAG 2.0 Web Content Accessibility Guidelines (WCAG) 2.0 defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. Although these guidelines cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. These guidelines also make Web content more usable by older individuals with changing abilities due to aging and often improve usability for users in general. 38

39 Web Content Accessibility Guidelines (WCAG) 2.0 Traduzione italiana autorizzata Pubblicata il 21 Dicembre AG20-it/Overview.html 39

40 1 Percepibile 1.1 Fornire alternative testuali per qualsiasi contenuto non di testo in modo che possa essere trasformato in altre modalità fruibili secondo le necessità degli utenti come stampa a grandi caratteri, Braille, sintesi vocale, simboli o linguaggio più semplice. 1.2 Fornire alternative per i media temporizzati. 1.3 Creare contenuti che possano essere rappresentati in modalità differenti (ad esempio, con layout più semplici), senza perdere informazioni o la struttura. 1.4 Rendere più semplice agli utenti la visualizzazione e il sonoro dei contenuti, separando i contenuti in primo piano dallo sfondo. 40

41 2 Utilizzabile 2.1 Rendere disponibili tutte le funzionalità tramite tastiera. 2.2 Fornire agli utenti un'adeguata disponibilità di tempo per leggere ed utilizzare i contenuti. 2.3 Non sviluppare contenuti che possano causare attacchi epilettici. 2.4 Fornire delle funzionalità di supporto all'utente per navigare, trovare contenuti e determinare la propria posizione. 41

42 3 Comprensibile 3.1 Rendere il testo leggibile e comprensibile. 3.2 Creare pagine Web che appaiano e che siano prevedibili. 3.3 Aiutare gli utenti ad evitare gli errori ed agevolarli nella loro correzione. 42

43 4 Robusto 4.1 Incrementare la compatibilità con i programmi utente attuali e futuri, includendo le tecnologie assistive. 43

44 Leggibilità 44

45 Leggibilità del codice commentato indentato pulito Verificare il codice siti di validazione 45

46 Validazione Conformità alle specifiche W3C (World Wide Web (W3) Consortium (C) = Ente internazionale che si occupa dell evoluzione del WEB)

47 Strutturare i contenuti Nel codice (X)HTML della pagina web non compariranno tag quali <font> (per indicare il tipo di carattere) e <center> (per indicare che l elemento della pagina deve essere posizionato al centro). Saranno invece da usare in modo intensivo i tag che servono a strutturare i contenuti, come <div> > (per raggruppare elementi), <h1>, <h2>,... (per organizzare la gerarchia dei titoli), <p> (quando il contenuto della pagina è un paragrafo), <strong> (quando si intende evidenziare il testo). 47

48 FILE.CSS Scritto tramite text editor Non deve contenere alcun tag di HTML Sintassi: ELEMENTO {proprietà: valore} BODY {color: black} 48

49 Si può definire uno stesso stile per oggetti diversi Alla stessa proprietà si possono assegnare più valori 49

50 Attributi id e class Ogni sezione (e ogni sottosezione) dovrebbe essere delimitata dal tag <div> > (<div div>sezione</ >sezione</div>), contraddistinto : dal proprio selettore id (<div id = "regoladistile"> sezione </div>) o dalla propria classe (<div class = "regoladistile"> sezione </div div>) 50

51 Definizioni Identificatore titolo #titolo Classe notizia.notizia Un nome di classe può essere condiviso da differenti istanze di elemento 51