La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Realizzazione di siti web

Presentazioni simili


Presentazione sul tema: "Realizzazione di siti web"— Transcript della presentazione:

1 Realizzazione di siti web
betaingegneria Marco Barbato – Studio di Ingegneria Web: Mail: Who I am Scopo del corso Strumenti Risorse Copyright (C) Marco Barbato

2 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) Marco Barbato

3 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) Marco Barbato

4 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) Marco Barbato

5 Copyright (C) 2010 - Marco Barbato
Risorse (sito del consorzio Web) (il mio sito contiene parecchie risorse relative al web) Altri riferimenti web o bibliografici ve li darò durante il corso Copyright (C) Marco Barbato

6 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) Marco Barbato

7 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) Marco Barbato

8 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) Marco Barbato

9 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) Marco Barbato

10 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) Marco Barbato

11 Copyright (C) 2010 - Marco Barbato
Approfondimento 1/1 URI Uniform Resource Identifier è un sistema di coordinate nel mondo delle risorse: http: protocollo è 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) Marco Barbato

12 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: ) Gecko/ Ubuntu/8.10 (intrepid) Firefox/ 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 ,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive If-Modified-Since: Thu, 23 Sep :39:21 GMT If-None-Match: " b0a-490e785a6f840" Cache-Control: max-age=0 MIME type: etichetta che identifica cosa c'è dentro ad un file (Multipurpose Internet Mail Extensions) Copyright (C) Marco Barbato

13 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) Marco Barbato

14 Copyright (C) 2010 - Marco Barbato
UNICODE / UCS È un tabellone che contiene un'associazione tra un carattere ed un codice esadecimale E' arrivato alla versione nel 2009, trae le origini da ISO 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 caratteri copre già praticamente tutto (cinese, matematica, etc) Copyright (C) Marco Barbato

15 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) Marco Barbato

16 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) Marco Barbato

17 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) Marco Barbato

18 Copyright (C) 2010 - Marco Barbato
Esempio di RESPONSE HTTP/ Not Modified Date: Thu, 23 Sep :38:41 GMT Server: Apache/2.2.9 (Ubuntu) PHP/ ubuntu4.6 with Suhosin-Patch mod_python/3.3.1 Python/2.5.2 mod_perl/ Perl/v 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) Marco Barbato

19 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) Marco Barbato

20 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 " /> </head> <body> </body> </html> Questo è XHTML 1.0 Ma anche HTML ha una storia Copyright (C) Marco Barbato .... Questo è XHTML 1.0. Ma anche HTML ha una storia. Copyright (C) 2010 - Marco Barbato.", "width": "800" }

21 Copyright (C) 2010 - Marco Barbato
Storia di HTML Da HTML a HTML 5: sito del Consorzio Web. 1989 HTML (TBL) 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) Marco Barbato

22 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) Marco Barbato

23 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) Marco Barbato

24 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) Marco Barbato

25 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) Marco Barbato

26 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) Marco Barbato

27 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) Marco Barbato

28 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) Marco Barbato

29 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) Marco Barbato

30 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) Marco Barbato

31 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) Marco Barbato

32 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) Marco Barbato

33 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) Marco Barbato

34 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) Marco Barbato

35 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) Marco Barbato

36 Visualizzazione del frameset
Copyright (C) Marco Barbato

37 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) Marco Barbato

38 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) Marco Barbato

39 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) Marco Barbato

40 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: ) .... 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) Marco Barbato

41 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) Marco Barbato

42 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) Marco Barbato

43 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) Marco Barbato

44 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) Marco Barbato

45 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) Marco Barbato

46 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) Marco Barbato

47 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) Marco Barbato

48 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) Marco Barbato

49 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) Marco Barbato

50 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) Marco Barbato

51 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) Marco Barbato

52 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) Marco Barbato

53 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) Marco Barbato

54 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) Marco Barbato

55 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. Anche i CSS hanno un validatore ufficiale:http://jigsaw.w3.org/css-validator/ sviluppato da Mozilla Copyright (C) Marco Barbato

56 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) Marco Barbato

57 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 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) Marco Barbato

58 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) Marco Barbato

Come attivare un alert

Un interessante esercizio con cui giocare, testare il browser e i validatori XHTML/CSS. Copyright (C) 2010 - Marco Barbato.", "width": "800" }

59 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) Marco Barbato

60 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. Esercizi Copyright (C) Marco Barbato

61 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) Marco Barbato

62 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) Marco Barbato

63 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) Marco Barbato

64 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) Marco Barbato

65 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) Marco Barbato

66 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) Marco Barbato

67 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) Marco Barbato

68 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) Marco Barbato

69 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) Marco Barbato


Scaricare ppt "Realizzazione di siti web"

Presentazioni simili


Annunci Google