Realizzazione di siti web betaingegneria Marco Barbato – Studio di Ingegneria Web: http://www.betaingegneria.it Mail: marco@betaingegneria.it Who I am Scopo del corso Strumenti Risorse Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Who I am Laurea in Ingegneria Elettronica Mi sono occupato di Automazione Industriale e Robotica Da 10 anni mi occupo di tecnologie per il Web Lavoro con la PA, con l'industria e faccio fromazione superiore e universitaria Mi occupo anche di musica Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Scopo del corso Acquisire familiarità ed usare la lingua franca del web (XHTML) e gli stili (CSS) Definire l'architettura di un sito Integrare il sito nel web (accesso a ws, a risorse remote, ...) Separare contenuti e presentazione, differenziare la presentazione a seconda del dispositivo di accesso Varie ed eventuali Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Strumenti Non faremo ricorso se non alla fine per causa di forza maggiore a tool di sviluppo visuale (Adobe Dreamweaver) Useremo strumenti open source per la valutazione dell'accessibilità Useremo strumenti standard per la valutazione della qualità del codice Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Risorse http://www.w3.org (sito del consorzio Web) http://www.betaingegneria.it (il mio sito contiene parecchie risorse relative al web) Altri riferimenti web o bibliografici ve li darò durante il corso Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Breve storia del web Web <> Internet (dispense) 1989: Tim Berners-Lee fa girare al CERN di Ginevra una proposta per la gestione delle informazioni. Nel 1990 scrive WorldWideWeb, il primo web browser su una stazione NeXTStep La più antica pagina web conservata al CERN TBL inventa l'HTML, il protocollo http e il primo server web httpd. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Il Web cresce... Nel 1993 TBL e lo sviluppo del web si spostano negli USA al MIT di Boston. 1994: W3C 1996: Google (da gogol, 1 seguito da 100 zeri) 1999: esplode l'e-commerce. Si parla per la prima volta di Web 2.0. Nasce il blog 2001: Wikipedia 2004: Facebook, Gmail 2005: Youtube, Google Maps Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Ma cos'è il web? Il Web è un servizio di Internet che consente di scambiare dati (testo strutturato, files di vario tipo MIME) attraverso il protocollo HTTP. W3C dixit: 1. A uniform naming scheme for locating resources on the Web (e.g., URIs). 2. Protocols, for access to named resources over the Web (e.g., HTTP). 3. Hypertext, for easy navigation among resources (e.g., HTML). Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Il protocollo HTTP Altri servizi di Internet: mail, ftp, IRC, gopher... HTTP è un protocollo client / server: chi ha anche il solo compito di scrivere pagine web è utile che abbia almeno una vaga idea di come funzioni. Una sessione HTTP si articola in due fasi: REQUEST e RESPONSE: REQUEST è un'interrogazione che parte dal client verso il server RESPONSE è la risposta del server Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato HTTP Il client (un browser o un altro programma) lanciano una request verso il server web La richiesta contiene l'URI della risorsa, i dati contingenti della richiesta e alcuni dati di contorno (tipo di browser, codifica, lingua, etc) Il server raccoglie la richiesta, la elabora (lui o qualcun altro), costruisce un flusso di uscita (header + body) e lo restituisce al client. La sessione si chiude qui: non c'è memoria. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Approfondimento 1/1 URI Uniform Resource Identifier è un sistema di coordinate nel mondo delle risorse: http://www.sito.it/risorsa?parametri http: protocollo www.sito.it: è l'host risorsa: file o programma parametri: ad es: input a,b per avere a+b Dobbiamo immaginare il web come un insieme di documenti e servizi dotato di coordinate. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Approfondimento 1/2 REQUEST Http header (dal browser al server): GET / HTTP/1.1 Host: bach User-Agent: Mozilla/5.0 (X11; U; Linux i686; it; rv:1.9.0.19) Gecko/2010040118 Ubuntu/8.10 (intrepid) Firefox/3.0.19 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: it-it,it;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive If-Modified-Since: Thu, 23 Sep 2010 06:39:21 GMT If-None-Match: "99903-3b0a-490e785a6f840" Cache-Control: max-age=0 MIME type: etichetta che identifica cosa c'è dentro ad un file (Multipurpose Internet Mail Extensions) Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Aprofondimento 1/3 Problema della rappresentazione dei caratteri: un amico di penna giapponese è un bel problema. Con un inglese sarebbe OK. Per gli inglesi basta ASCII. Con 7 bit fanno tutto. Già con francesi e italiani è complicato: àèìòùç non bastano 7 bit. Ok, 8. Coi greci, gli arabi e gli israeliani siamo daccapo. Con le lingue orientali siamo fritti. Unicode + UTF : si possono codificare e trasmettere tutti i caratteri. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato UNICODE / UCS È un tabellone che contiene un'associazione tra un carattere ed un codice esadecimale E' arrivato alla versione 5.2.0 nel 2009, trae le origini da ISO 10646 del 1989) Prevede una codifica a 21 bit (2 milioni di caratteri), ma quasi tutti i caratteri sono mappati da U+0000 a U+FFFF (Basic Multilingual Plane), che con 65536 caratteri copre già praticamente tutto (cinese, matematica, etc) Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato UTF Unicode Transformation Format è una codifica a lunghezza variabile dei caratteri Unicode. Repertorio: un elenco di caratteri col loro nome. Codice: mappa tra un carattere e un numero > 0 Codifica (Encoding): come il codice viene rappresentato in un file o in un flusso tcp/ip (sito w3c: ”used to transform the document character stream into a byte stream”: es. UTF-8 Esercizi Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Torniamo all'header GET è uno dei comandi del protocollo con cui un client chiede una risorsa; Accept-Language scrive le preferenze di lingua del browser Accept dice quali mime type il browser gestisce Accept-Charset quale codifica il browser usa per visualizzare i caratteri In sostanza mandiamo la carta d'identità del browser. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato RESPONSE Il server web httpd di solito fa da passamano, prende i file e li spedisce al client uno alla volta (html, stili, immagini, audio, etc). Se è richiesta l'elaborazione httpd passa i parametri all'application server che risponde con un flusso HTML: httpd fa ancora una volta il passamano. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Esempio di RESPONSE HTTP/1.1 304 Not Modified Date: Thu, 23 Sep 2010 17:38:41 GMT Server: Apache/2.2.9 (Ubuntu) PHP/5.2.6-2ubuntu4.6 with Suhosin-Patch mod_python/3.3.1 Python/2.5.2 mod_perl/2.0.4 Perl/v5.10.0 Connection: Keep-Alive Keep-Alive: timeout=15, max=100 Etag: "d9814-3b0b-490f09b20a000" Il server si presenta con il suo header, dice la versione (1.1) il codice di risposta (304), la data e l'ora, alcune informazioni sul sistema operativo del server Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato RESPONSE (continua) Non è finita: all'header nel flusso http segue il corpo che è il documento HTML vero e proprio. Se è un file nel file system del server si dice pagina web statica (in questo corso impareremo a costruire solo pagine statiche) Se è un file costruito al volo è una pagina web dinamica. A volte anche le pagine dinamiche sono statiche (cache). Copyright (C) 2010 - Marco Barbato

Esempio del corpo XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="it"> <head> <title>betaingegneria - studio d'Ingegneria Marco Barbato</title> <link type="text/css" rel="stylesheet" href="style.css" /> <script type="text/javascript" src="script.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> .... </body> </html> Questo è XHTML 1.0 Ma anche HTML ha una storia Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Storia di HTML Da HTML a HTML 5: sito del Consorzio Web. 1989 HTML (TBL) - 1991 HTML+ 1993 NCSA Mosaic 1994 HTML 2 (Netscape, W3C) 1995 HTML 3 (Microsoft IE, CSS) 1997 HTML 3.2 – 1998 HTML 4.0 2000 XHTML 1.0 – 2008 HTML 5 Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Cominciamo con HTML 4.01 Internationalization Accessibility Tables (sia come contenitori di dati che per layout: obbrobrio! → XHTML 1.0) <OBJECT> Style Sheets Scripting Printing (<LINK />) Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Struttura di HTML Versione <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Elemento (tag) HTML Elemento HEAD Elemento BODY A seconda della versione del browser e dell'html che usiamo, ci sono permessi errori La maggior parte delle cose che la pagina web mostra è nella sezione BODY. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Generalità sui tag Vi sono tag che viaggiano in coppia (<A></A>) o da soli (<META />) Un tag è formato da un nome e da degli attributi <a href=”index.html” target=”parent”>Indice</a> Cercheremo di usare tag semantici che si associano alla funzione più che all'aspetto. Ad esempio <i></i> di permette di fare l'inclinato. Ma lasciamo queste cose agli stili e usiamo <em></em> (emphasize) Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato La sezione BODY È la più immediata perché ”si vede subito” Con HTML 4.02 usiamo i tag in maiuscolo, con xhtml 1.0 il minuscolo Qui ha luogo l'impaginazione del sito, ciò che vedremo del sito: testo, titoli, immagini, video, form (moduli interattivi), link (collegamenti ipertestuali) Adotterremo sempre una separazione netta tra contenuto e aspetto usando i CSS. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Tag di testo Tag semantici (di testo strutturato) Intestazioni <H1></H1> fino a 6 livelli <EM>,<STRONG>,<DFN>,<CODE>,<ACRONYM> Tag visuali Paragrafi <P>, <PRE> Tag visuali usati soprattutto in XHTML <div> Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Liste Per ottenere delle liste non ordinate <ul> <li>carta</li> <li>penna</li> <li>calamaio</li> </ul> e ordinate <ol> <li>Zoff</li> <li>Gentile</li> </ol> Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Tabelle In HTML <= 4.02 sono state usate a sproposito; hanno un significato semantico: contenere dati; invece sono state usate per impaginare. Acqua passata. <table> <thead /><tr /><th /> intestazioni <tbody /><tr /><td /> celle </table> L'oggetto tabella è molto complesso e ci torneremo studiando il DOM. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Link: generalità È l'elemento principe del web: il collegamento ipertestuale! <a href=”uri”>testo</a> Se uri ha un # davanti ci muoviamo all'interno della presente risorsa; in questo caso cerchiamo un tag <a name=”uri” /> URI può essere assoluto (specifico protocollo, host e risorsa) o relativo (solo la risorsa, protocollo e host vengono sottointesi). Esercizio 1 - Esercizio 2 Copyright (C) 2010 - Marco Barbato

Link 2: relazioni tra documenti LINK è un elemento da usarsi solo nella sezione HEAD. Lo usiamo per collegare fogli di stile Per dire al browser qual è il foglio di stile più adatto alla piattaforma su cui gira (pc, braille, smartphone) Per dire ai motori di ricerca dove trovare versioni del sito in altre lingue versioni pdf del sito l'indice del sito Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Link 3: accessori Per l'accessibilità esistono due strumenti legati al tag àncora <a>: Tasto di accesso (ACCESSKEY): posso attivare un link con la tastiera anziché con il mouse; ad esempio se ACCESSKEY=”A” attiverò il link con la sequenza ALT+SHIFT+A Testo alternativo (ALT): questo testo viene letto da un sintetizzatore vocale. Utile anche per le immagini Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Link: plug in Determinati tipi MIME sono gestiti nativamente dal browser. I tipi che non lo sono di solito si associano ad un plug in (spina) che ne permette la lettura all'interno del browser. Se il plug in non è disponibile (il browser on digerisce il file), viene forzato il salvataggio della risorsa sul proprio computer. Dal lato server si può controllare il comportamento del browser forzando il salvataggio tramite una direttiva nell'header Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Oggetti multimediali <img src=”uri” /> (abituiamoci alla sintasi xhtml 1.0) <object /> è più generale: può definire una immagine (al posto di img), un'applet Java, un video... Se cominciamo a includere mp3 dobbiamo pensare che l'mp3 il browser lo potrà suonare solo se ha il plug-in apposito installato. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Digressione Youtube usa una tecnologia particolare: di solito si deve attendere che sia terminato il download di tutti gli oggetti perché il browser possa renderizzarli. Ma mp3 e video darebbero comunque luogo a ritardi, per cui si adotta una tecnologia che permette di sentire vedere mano a mano che il file viene scaricato (streaming) Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Frames Solo en passant, è uno strumento deprecato. <FRAMESET cols="20%,80%"> <FRAMESET rows="30%,70%"> <FRAME src="overview.html" name="pListFrame"> <FRAME src="allclasses.html" name="pFrame"> </FRAMESET> <FRAME src="summary.html" name="classFrame"> </FRAMESET> <NOFRAMES><H2>Frame Alert</H2> <P>This document is designed to be viewed using the frames feature. If you see this message, you are using a non-frame-capable web client. <BR> Link to <A HREF="overview-summary.html">Non-frame version.</A></NOFRAMES> Nella slide seguente il risultato. Serve per caricare più pagine web nella stessa finestra. Bandito come strumento per siti accessibili Copyright (C) 2010 - Marco Barbato

Visualizzazione del frameset Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato FORMS Uno degli strumenti più usati (compila un modulo per l'iscrizione, username e password, seleziona una nazione, rispondi ad un questionario, ...) Ci porta ad andare ancora più a fondo nello studio di HTTP Ci introduce a DOM e a JavaScript: il modulo può essere reso più interattivo con JavaScript e con AJAX. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Un esempio di FORM Questo modulo permette di autenticarsi in un sito <form action="login.php" method="post"> <fieldset> <legend>Username</legend> <input type="text" name="uname" size="8" /> </fieldset> <fieldset> <legend>Password</legend> <input type="password" name="paswd" size="8" /> </fieldset> <fieldset> <input type="submit" value="Entra" /> </fieldset> </form> Questo form ha molti oggetti e attributi che devono essere compresi bene. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Attributi di FORM action: URI della risorsa cui è affidata l'elaborazione dei dati. È sempre un programma method: con quale comando di protocollo i dati vengono inviati al server. Conosciamo già GET, che consente di invocare un URI completo. Un altro comando è POST il quale fa pervenire i dati al server tramite il suo standard input. Una differenza tra get e post è che con get vediamo transitare i dati sulla barra degli indirizzzi. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Approfondimento Stuttura di un messaggo GET GET /examples/basic/method.php?uname=ppp&paswd=ppp HTTP/1.1 Host: bach User-Agent: Mozilla/5.0 (X11; U; Linux i686; it; rv:1.9.0.19) .... Struttura di un messaggio POST POST /examples/basic/method.php HTTP/1.1 Host: bach ... Content-Type: application/x-www-form-urlencoded Content-Length: 19 uname=ppp&paswd=ppp Query string: *[nome=valore]& Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Campi di un modulo Testo / Password Checkbox / Radio Lista di selezione (combo box) Lista di selezione multipla File Pulsanti / button Con fieldset posso visualizzare i campi in modo compatto Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Conclusione A questo punto abbiamo gli elementi fondamentali per costruire un sito web. Non siamo ancora in grado di agire in profondità sull'aspetto del sito e dobbiamo migliorare l'interattività con l'utente. Per queste cose ci sono 2 strumenti: i CSS e il Javascript Copyright (C) 2010 - Marco Barbato

CSS Cascading Style Sheets Nel mezzo del cammin di nostra vita mi ritovai per una selva oscura che la diritta via era smarrita Dante, Divina Commedia, Inf, I, 1-3 Nulla meglio di questa terzina introduce il difficile argomento dei CSS (versione 2). Di per sé l'argomento è una scienza esatta, ma l'aspetto commerciale rende veramente una selva oscura il comportamento delle regole CSS nei vari browser. Ci vuole pazienza e dedizione. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato CSS: regole, selettori I Cascading Style Sheet si chiamano così perché possono essere sovrapposti per creare effetti nella pagina web. Un foglio di style è un file che contiene uno o più selettori fatti così: selettore { regola1; regola2; ...} regola = proprietà: valore; Si possono definire anche operatori tra selettori Dispense Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato DOM Document Object Model Modellazione di un documento (libro, giornale, fumetto, ...) come un oggetto. W3C ”a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents” Adottando questa piattaforma siamo in grado di analizzare e modificare un documento XHTML. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato DOM /2 <TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE> Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato DOM /3 In sostanza trasformiamo un documento in un albero. Le strutture ad albero sono pane per i denti dei linguaggi di programmazione. Con i CSS navighiamo quest'albero per stabilire delle regole di rendering. Con Javascript navighiamo quest'albero per compiere delle azioni sul documento. Il papà di DOM si chiamava DHTML. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato XML Ancora un po' di storia: HTML è un derivato di un linguaggio di tag generale l'SGML (Standard Generalized Markup Language (ISO 8879:1986 SGML)). SGML si pone l'ambizioso obiettivo di rappresentare un documento come un oggetto strutturato e di fornire un appiglio per i linguaggi di programmazione affinché lo possano processare come una struttura dati. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato XML /2 XML è un altro derivato (o profilo, o sottoinsieme, o dialetto) di SGML che è più facile da trattare di SGML per i parser (analizzatori di testo). X sta per eXtensible. XML è un linguaggio strutturato che permette di rappresentare dati, un foglio XML può essere comparato ad un vero database. Si può usare XML anche per fare pagine web! (esempio) oggi tutti i browser supportano XML + XSLT (esercizi sulle trasformazioni) Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato XHTML XHTML è una versione di HTML definita in modo molto rigoroso come un documento XML. Dobbiamo essere grati dell'avvento di XHTML perché è un tentativo di rendere rigoroso il lavoro del web master, che non deve più impazzire perché determinati tag si comportano in modo diverso da browser a browser (ovviamente non tutti la pensano così). Con XHTML posso trattare la pagina web come se fosse una struttura dati Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato XHTML /2 Posso infatti elaborare una pagina web con un programma, ad esempio per leggerla e mettere via i dati in campi di una tabella di database. Questo tipo di attività si chiama interoperabilità e preferisce in ogni caso lo scambio dati tramite XML. Posso definire dei tag specializzati (custom) tramite le Document Type Definition DTD. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Una parola sul W3C Il Consorzio Web, nato a Boston nel 1994 su iniziativa di TBL, conta 356 membri (2009). Tutto ciò che riguarda il web viene proposto, elaborato, codificato da questo organismo di riferimento per il mercato. Eventuali fughe in avanti vengono man mano discusse, razionalizzate e, se accettate, espresse in uno standard. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato XHTML reprise I documenti devono essere ben-formati (4.1) I tag sono scritti in minuscolo (4.2) I tag devono essere rigorosamente chiusi (i tag singoli si scrivono con <x /> (4.6)) (4.3) I valori degli attributi vanno chiusi tra ” (4.4) NON sono ammessi attributi minimizzati (e.g. checked) (4.5) L'identificatore di tag (frammento) è id (4.10) Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato XHTML /3 Uso delle tabelle: non ci sono direttive, ma le direttive WAI-WCAG sull'accessibilità impongono che non le si usi per scopi di layout. I tag non devono avere overlap (ed es. È proibito <p><a></p></a>) (esempio) L'identificatore pubblico è xhtml1.0 strict (DTD) La presentazione è esclusivamente demandata ai CSS Gli script possibilimente vanno all'esterno. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Validatori Il W3C mette a disposizione uno strumento per validare la correttezza del codice XHTML. Una volta validato, se un bowser (user agent) non lo visualizza come ci si aspetta è per un buco nel browser. http://validator.w3.org Anche i CSS hanno un validatore ufficiale:http://jigsaw.w3.org/css-validator/ sviluppato da Mozilla Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Namespaces Spazi di nomi: sono definizioni di insiemi particolari di tag. XHTML permette, ad esempio, di definire in un documento pezzi che si esprimono con tag non standard. <p>The following is MathML markup:</p> <math xmlns="http://www.w3.org/1998/Math/MathML"> <apply> <log/> <logbase> <cn> 3 </cn> </logbase> <ci> x </ci> </apply> </math> Ovviamente non è detto che il motore grafico del browser digerisca... Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Javascript Javascript è un OOL interpretato, l'interprete è a bordo dei browser. Serve per migliorare l'interattività lato client. Definiamo le strutture di controllo, le funzioni built-in, le strutture dati di Javascript. Javascript è stato usato intensivamente dal 2005 in poi (DOM level 3), prima si facevano script abbastanza semplici per controllare le form ad esempio. Dopo esserci sgrezzati, studieremo la libreria jQuery. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Javascript esempio 1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> <head> <title>Esempio Javascript</title> <script type="text/javascript"> function ciao() {alert('Ciao'); return true; } </script> <style type="text/css"> span.boo {font-weight: bold; color: #f00;} </style> </head> <body> <p>Come attivare un <span onclick="return ciao();" class="boo">alert</span></p> </body> </html> Un interessante esercizio con cui giocare, testare il browser e i validatori XHTML/CSS Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Javascript /2 La sintassi è praticamente identica a Java (strutture if, for, while, case, operatori prefissi, postfissi, dichiaratori di classe, accesso a membri e metodi delle classi, polimorfismo) Non abbiamo il tempo di spingerci molto in là, ma faremo qualche esempio con jQuery e con le API di GoogleMaps (se c'è tempo). Il Javascript consente di accedere ad un oggetto del DOM e agire su di esso e sul suo stile con i metodi consentiti. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Javascript /3 Si possono definire anche classi, al modo di Java, potenziando il browser senza limiti. Ovviamente se l'interprete Javascript a bordo del browser è abbastanza moderno. Queste due risorse forniscono un manuale e alcuni esercizi di complessità crescente. http://www.javascriptkit.com/jsref/index.shtml Esercizi Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Cose da sviluppare Navigabilità del sito, albero di navigazione, chiarezza delle sezioni e degli strumenti Web services Media diversi: come trattarli, esempi col telefonino Copyright (C) 2010 - Marco Barbato

Come strutturare i siti Ci sono delle caratteristiche desiderabili per un sito: Pulizia (niente rumore, distinzione chiara nelle aree delle pagine web, comandi e etichette chiare) Orientamento (dove sono nel sito?) Per cercare una informazione mi serve sapere com'è fatto il sito?? Possibilità di interazione Possibilità di personalizzazione Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Strutture chiare Google all'inizio aveva solo il logo, la <input text /> e due pulsanti (”Search” e ”I feel lucky”). Sfondo bianco. La sua banalità l'ha fatto il motore vincente. Ora ha sviluppato un miriade di funzioni, e ha dovuto fornire un discreto menu in alto. Ma continua ad avere una notevole semplicità nonostante sia estremamente complesso. Trovo spesso noioso raggiungere Analytics. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Strutture chiare /2 SI può parlare di politica, di news, di turismo, di siderurgia o medicina: un menu serve sempre. Un logo identifica a colpo d'occhio un brand, una realtà. Contenuti dinamici importanti da mettere nella home (se ce ne sono) Una funzione di ricerca, di tagging, note di copyright, una barra breadcrumb. O un albero di navigazione (mappa del sito). Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Strutture chiare /3 Ma per il turismo? Voglio sapere: dove devo andare (→ Google Maps), che tempo fa (→ webservice meteo), dove posso dormire (database alberghi e ristori), cosa posso fare una volta arrivato (offerte di svago, benessere e cultura), quanto spendo (→ listini aggiornati, offerte, form di interrogazione del database). Voglio trovare le info anche se non sono davanti al pc (mobile) Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Web 2.0 Web Semantico: infrastruttura comune che consente ai dati di essere condivisi e riutilizzati da applicazioni, imprese e community. Nel Web classico sono i documenti (risorse) ad essere condivisi, qui ci si vuole spingere ad entrare nei documenti e a condividerne gli elementi che li costituiscono. La fondamentale filosofia della circolazione dei dati (ovviamente con le necessarie regole) unita alla partecipazione nella loro produzione è stata etichettata genericamente con Web 2.0. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Web 2.0 /2 Non è più comunicazione verticale (il webmaster pubblica e io leggo) ma orizzontale (tutti possono pubblicare o postare un commento o un tag, o elaborare dati) Strumenti Web 2.0 sono il social tagging, il blog, il page rank di Google, gli RSS, il wiki che fornisce strumenti di publishing. La definizione è di Tim O'Reilly. Interessante leggere il suo articolo [it]. Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Accessibility ”The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect” [TBL, WAI] Dall'inventore del Web fino alle organizzazioni, tutti hanno preso in considerazione i benefici di un web accessibile a tutti. Ma cosa vuol dire precisamente accessibilità? Semplicemente la facoltà di usare il web e potervi contribuire da parte delle persone disabili e anziane [WAI] Copyright (C) 2010 - Marco Barbato

Copyright (C) 2010 - Marco Barbato Accessibilty /2 La legislazione italiana è più precisa sulla definizione. Nel 2004 il Parlamento vara la Legge 4/2004 promossa dal Ministro delle Infrastrutture Lucio Stanca dell'allora governo Berlusconi. La legge enuncia 22 Requisiti per poter definire un sito come accessibile; definisce metodologie e criteri di valutazione; è prevista l'applicazione da uno logo a seconda del grado di aderenza ai requisiti. Sono requisiti più stretti delle linee guida del WAI-WCAG. Copyright (C) 2010 - Marco Barbato