Applicazioni lato Client

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Applicazioni lato Client"

Transcript

1 Note sulle Applicazioni lato Client Note sulle Applicazioni lato Client... 1 Applicazioni lato Client... 1 da HTML a RIA, attraverso AJAX, per l accessibilità e l usabilità... 2 Form con AJAX... 3 Il documento WEB: HTML e CSS... 4 Fogli di Stile (CSS)... 4 Attributi di stile... 5 Box model e Schemi di posizionamento... 7 Scripting lato Client DOM DOM e HTML Manipolare gli elementi DOM e XML XSL AJAX = XML+JavaScript Librerie Javascript jquery : write less do more Selezione elementi (selector) Eventi - action() Manipolazione HTML e CSS Ajax XML Applicazioni lato Client Le applicazioni web costituiscono sistemi complessi e si basano su una varietà di componenti hardware e software, di protocolli, linguaggi, interfacce e standard. Gli ingredienti base, almeno per cio che riguarda il software, comprendono il protocollo http, per il trasferimento in rete delle risorse, il linguaggio HTML, per la scrittura degli ipertesti, gli scritpt lato Client, per una interattività maggiore della pagina web, i fogli di stile (CSS) usati per dare maggior potere espressivo alle pagine e per separare il contenuto dalla presentazione, il linguaggio XML, per la descrizione strutturata di documenti. La gestione delle pagine dinamiche passa, poi, attraverso una serie di tecnologie di supporto e script lato Server: CGI, servlet Java, ASP, PHP, Java Server Page e infine, attraverso le architetture complesse a tre strati Model View Control (MVC), con Java 2 Entrprise Edition e Microsoft.NET. Inoltre, sempre maggior attenzione, viene data alla possibilità di pubblicazioni di contenuti per dispositivi mobili. In questo capitolo dedicheremo l attenzione alle applicazioni lato Client. paolo macchi - ISIS Facchinetti rel Note sulle Applicazioni lato Client 1

2 da HTML a RIA, attraverso AJAX, per l accessibilità e l usabilità Nel corso degli anni le applicazioni Web si sono evolute. HTML e http, da soli, consentono di sviluppare semplici siti Web ma sono insufficienti per applicazioni piu complesse, dove l interattività dell utente e la possibilità di separare i contenuti dalla presentazione diventano gli assi portanti. CSS e XML, insieme a gli script a lato client, come JavaScript, e alla tecnologia AJAX, muovono proprio in questa direzione. Quello che sta sotto il cofano degli applicativi delle piu grandi aziende non è Flash o Silverlight ma sempre Ajax, il cuore dell Web2.0. La caratteristica che http possiede, cioè quella di essere un protocollo stateless, e l insieme limitato dei comandi per l interfaccia uomo-macchina del linguaggio HTML, hanno portato a una facilità d uso inferiore rispetto alle tradizionali applicazioni desktop. Le nuove applicazioni Rich Internet Application (RIA), insieme all avvento di HTML5, tendono a possedere le caratteristiche e le funzionalità delle tradizionali applicazioni per computer desktop senza però necessitare dell'installazione di applicativi sul disco fisso, ma servendosi solo del browser. Nelle RIA l elaborazione dei dati, soprattutto per ciò che riguarda l interfaccia uomo-macchina, è relizzata lato Client, dal Browser. Ciò fornisce risposte veloci e pronte all utente, alleggerendo il server remoto da tutti quei tipi di elaborazione che possono essere effttuati con successo anche localmente. Più precisamente, il concetto di ricchezza ( Rich ), si svolge su due fronti: il modello dati e l interfaccia utente. Un modello dati piu ricco significa che è possibile maneggiare strutture dati piu complesse a lato client svincolando il server da sovraccarico e permettendo una modalità asincrona dei dati in modo che le risposte del server non sono piu intere pagine ma solo frammenti dinamici di esse. La ricchezza dell interfaccia utente garantisce un avvicinamento sia estetico che funzionale alle applicazioni desktop potendo interagire dinamicamente con le strutture dei dati. L utente finale, in definitiva una persona come noi, si affida molto all impatto visivo e alla semplicità d uso dell applicazione: ecco perché l interfaccia utente riveste un ruolo strategico legato all accessibilità e usabilità delle applicazioni Web. In questo contesto analizzeremo le risorse piu usate in Internet: le pagine HTML, insieme alle applicazioni a lato Client. Accessibilità e Usabilità Per accessibilità si intende la fruibilità di servizi e contenuti di un sito Web da una qualsiasi tipologia d'utente, anche da persone con ridotta o impedita capacità sensoriale e motoria, persone che possono trovare un grande beneficio e supporto nell accesso dei contenuti e nella comunicazione tramite Internet. (http://www.w3c.it/wai/) L usabilità prevede una serie di regole relative alla chiarezza e semplicità per ottemperare alla definizione che ne dà l ISO: l'efficacia, l'efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti. (http://www.w3c.it/wai/wcag10guidelines.html) Un esempio di costruzione di pagina Web potrebbe ricalcare queste regole: paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 2

3 (tratto da AJAX per applicazioni web di Romagnoli, Salerno, Guidi Apogeo editore ) Form con AJAX Capita spesso, in Internet, di inserire dati in un modulo preformattato (form) in cui i dati, normalmente, devono essere convalidati. E possibile che la convalida venga fatta attraverso un programma lato Client, ad esempio, in Java Script tramite il quale si va a verificare se un campo è numerico, oppure se il formato della è conforme. Tutto ciò va molto bene ma non sempre è sufficiente. Pensiamo, ad esempio, al controllo di un nome già registrato, o al codice di una carta di credito o a una qualsiasi informazione che risiede sul database del Server. In questi casi la tradizionale applicazione HTML prevede l invio della pagina al server, che elabora i dati e rinvia al Client una nuova pagina HTML che sostituisce (rinfresca) la pagina precedente con i risultati richiesti. Questa procedura, talvolta, risulta noiosa per l utente, soprattutto quando la pagina contiene qualche parametro errato: i tempi di reintroduzione dei dati e di rielaborazione si allungano di molto. Sarebbe molto comodo poter far convalidare un form al server senza rinfrescare l intera pagina ogni volta. Usando Asynchronous JavaScript and XML (AJAX) i dati possono essere convalidati pressochè in tempo reale, in modo interattivo, quando l utente digita i tasti nei campi presenti nel form della pagina HTML. In questo caso i dati sono processati Asincronamente dal server mentre la pagina HTML locale continua a processare gli eventi. Se l utente commette errori essi vengono istantaneamente segnalati dal server al client senza che l intera pagina HTML venga rinfrescata! Con AJAX può essere, ad esempio, introdotto un controllo sull'evento onchange o su OnKeyUp della casella di testo: cio ci informerà tempestivamente che il nome inserito non è valido, magari evidenziando il testo in rosso (CSS + Javascript) oppure che va tutto bene, con il testo che si colora di verde. La tecnica Ajax, di fatto, non è una nuova tecnologia ma utilizza una combinazione di: HTML (o XHTML) e CSS per il markup e lo stile DOM (Document Object Model) per la manipolazione, attraverso un linguaggio come JavaScript, per mostrare le informazioni ed interagirvi; l'oggetto XMLHttpRequest per l'interscambio asincrono dei dati tra il browser dell'utente e il web server. in genere viene usato XML come formato di scambio dei dati, anche se di fatto qualunque formato può essere utilizzato. Questi file sono solitamente generati dinamicamente da script lato server. Il vantaggio di usare AJAX è, quindi, l interattività con l utente con un unico neo: bisogna fare attenzione alla larghezza di banda della connessione, perché, ancora, non tutti dispongono di una banda adeguata e il vantaggio potrebbe trasformarsi in lentezze talvolta inaccettabili se i dati vengono continuamente inviati a server per il loro controllo! paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 3

4 Il documento WEB: HTML e CSS HTML (.htm,.html) è un linguaggio di markup, cioè fornisce un insieme di regole di formattazione di documenti, con capacità di collegamenti ipertestuali, basate su speciali marcatori, TAG, che definiscono gli elementi. L'HTML fornisce le regole di impaginazione, formattazione e visualizzazione (layout) del contenuto di una pagina web. Tutti i siti web usano il formato HTML, il cui codice, richiesto e ottenuto da un web server, viene interpretato dal browser, che mostra la pagina letta sul computer. Consideriamo la seguente tabella: <table> <thead> <tr> <td>nome</td> </tr> </thead> <tbody> <tr> <td> Pinco</td> <td> Pincone</td> </tr> <tr> <td> Pollo</td> <td> Pollone</td> </tr> </tbody> </table> <td>cognome</td> Ogni TAG ha una serie di proprietà che definiscono lo stile del TAG (colore, larghezza ). Queste proprietà sono gli attributi del TAG, per cui volendo cambiare il colore di sfondo potremo scrivere <td bgcolor=#9acd32>nome</td> <td bgcolor=#9acd32>cognome</td> Un attributo definisce una proprietà dell elemento ed è contenuto all interno del tag iniziale. La forma è: nome_attributo = valore Ogni elemento ha decine di attributi. Ad es TABLE puo avere: align, bgcolor, border,etc. Cosi, con questa sintassi: <table width="75%" border="2" cellpadding="8" cellspacing="0"> si imposta una tabella con bordo di 2 pixel, senza spazio tra le celle e con il contenuto che viene distanziato dai bordi della cella di 8 pixel. Fogli di Stile (CSS) L affollamento di attributi all interno della pagina web può avere effetti nefasti, generando confusione e ridondanze. I fogli di stile (CSS, Cascading Style Sheets) cercano di mitigare questi effetti I fogli di stile sono composti da regole che descrivono come presentare gli elementi di una pagina HTML per strutturarla in modo opportuno nello stesso modo in cui una tovaglia riveste un tavolo per renderlo presentabile! Ogni regola ha due parti fondamentali: il selettore e il blocco della dichiarazione. Il selettore descrive quale è la parte di documento a cui va applicata la regola, il blocco delle dichiarazioni, racchiuso tra paretesi graffe, contiene una o più dichiarazioni, separate da punto e virgola, costituite, a loro volta, da proprietà e, separato con i due punti dal valore. I CSS, si applicano all elemento, alla classe e all identificatore (ID): paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 4

5 Nome elemento p text-align:center; /*questo è un commento*/ color:red; font-family:arial; Nome della Classe, cioè del gruppo di regole <html> <head> <style type="text/css">.centertext-align:center; </style> </head> <body> <h1 class="center">center-aligned heading</h1> <p class="center">center-aligned paragraph.</p> </body> </html> ID dell elemento <html> <head> <style type="text/css"> #pippo text-align:center; color:red; </style> </head> <body> <p id="pippo">hello World!</p> <p>questo paragrafo non è soggetto a variazioni perchè non ha l id pippo.</p> </body> </html> Le regole CSS possono: essere scritte direttamente nel Tag in modalità inline (meglio non usare!): <table style= background-color:#9acd32 > incorporate (internal) nel file html con il TAG <style>: <style type="text/css" media="all"> </style> body font-family: georgia,sans-serif; h1... inserite, in un file esterno (external) che viene, poi, collegato, in html: <link href="stile.css" rel="stylesheet" type="text/css"> La modalità inline ha maggiore priorità, seguita dalla internal e dalla external. I CSS sfruttano l ereditarietà: le proprietà impostate per un elemento sono automaticamente ereditate dai suoi discendenti. (cfr. Attributi di stile Gli attributi di stile si possono riferire a vari elementi, tra cui: Stili di background paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 5

6 body background-color:#b0c4de; div background-color:#b0c4de; body background-image:url('paper.gif'); Stili di testo, font, link, list, table : body color:blue; h1 color:#00ff00; pfont-family:"times New Roman", Times, serif; h1 font-size:2.5em; p font-size:14px; a:link color:#ff0000; ul.a list-style-type: circle; table width:100%; L esempio sottostante mostra il modo di definire i casi visti con il relativo uso all interno della pagina HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" > <head> <title>tabella pulita</title> <!--link href="stile.css" rel="stylesheet" type="text/css"--> <style type="text/css" media="all"> body font-family: georgia,sans-serif; h1 margin-left: 0.5em; font-size: 22px; h2 margin-left: 0.5em; font-size: 16px; p margin-left: 1em; table margin-left: 1.5em; margin-bottom: 1em; border: 1px solid black; border-collapse: collapse; caption-side: top; font-size: 12px; table.wrap-up margin-left: 1.5em; table-layout: fixed; width: 650px; border: 1px solid black; border-collapse: collapse; caption-side: top; font-size: 12px; thead border: 2px solid black; border-style: solid; font-weight: bold; background: #9ACD32; paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 6

7 tfoot text-align: right; td border: inset 1px ; border-style: solid; text-align: center; padding: 0.5em; td.highlight font-weight: bold; border: 2px solid red; background: orange; text-align: right; td.memo text-align: left; td.numero text-align: right; td.label border-left: hidden; border-bottom: hidden; border-top: none; border-right: none; text-align: right; </style> </head> <body> <h1>tabella 1</h1> <h2>prova<i>www.sito.it</i></h2> <table class="wrap-up"> <thead> <tr> <td>nome</td><td>cognome</td> </tr> </thead> <tbody> <tr> <td> Pinco</td> <td> Pincone</td> </tr> <tr> <td> Pollo</td> <td> Pollone</td> </tr> </tbody> </table> </body> </html> Box model e Schemi di posizionamento Box Model Un elemento HTML puo essere considerato un box. Il termine box model viene usato nei CSS per indicare la disposizione (layout) dell elemento. Il box model permette di disporre l elemento con o senza bordi e margini. Un box comprende quattro aree: un area destinata ai contenuti e tre aree opzionali (il padding, il border e il margin). paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 7

8 Nota - Se il padding è impostato a zero, il perimetro del padding è uguale a quello del contenuto; se il border è impostato a zero (o a none) il perimetro del border coincide con quello del pudding. Quasi tutti gli elementi che vengono utilizzati in ambito html (e xhtml) possono essere suddivisi tra elementi block ed elementi inline. Un elemento a livello block presenta alcune caratteristiche: inizia sempre con una nuova riga; l altezza, l interlinea e i margini dell elemento possono essere gestiti; se non viene specificata, la larghezza di default dell elemento è il 100%. Elementi di questo tipo sono: div, p, (form), ul, li, h1, h2, h3 ) Gli elementi inline invece: iniziano sulla stessa riga; l altezza e i margini superiore ed inferiore non possono essere impostati; la larghezza corrisponde a quella del testo o dell immagine contenuta e non può essere manipolata. Elementi di questo tipo sono: span, a, label, input, img, strong ed em Display E possibile anche applicare uno stile a un selettore interno a un altro selettore o nacondere un elemento: p color:blue;.c1 background-color:blue;.c1 p color:white; h1.hidden display:none; Pseudo classi Le pseuo-classi sono usate per fornire particolari effetti ad alcuni selettori: selector:pseudo-class property:value; a:visited color:#0c0f00; /* link visitato*/ selector.class:pseudo-class property:value; a.green:visited color:#00ff00; Cme le pseudo-classi anche i pseuo-elementi sono usati per fornire particolari effetti ad alcuni selettori, ad ex.: selector:pseudo-element property:value; p:first-letter font-size:xx-large; E inoltre possibile agire sulla barra di navigazione (<li>), sulle immagini e sugli attributi: [title=telemacone] border:10px solid red; paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 8

9 Posizionamento Una importante funzione è quella del posizionamento degli elementi all interno della pagina web usando i CSS (virual formattig model) e di decidere quale elemento sia posizionato davanti a un altro. Sebbene il posizionamento possa essere effettuato con tabelle, l uso dei div rende il posizionamento dei box piu accessibile e manipolabile. In particolare vi sono quattro schemi di posizionamento: statico o normale: è la posizione normale che per default la pagina assegna a ogni elemento; i box vengono disposti uno dopo l altro in modo verticale, gli elementi inline sono disposti orizzontalmente uno dopo l altro fisso: l elemento è posizionato in modo fisso rispetto alla pagina del browser e non si muoverà da li anche se la pagina è scrollata! p.posiz_fixed position:fixed; top:20px; right:10px; // bottom, left relativo: specifica un offset rispetto alla posizione normale, con distanze relative rispetto al punto in cui sarebbe collocato l elemento h1.posiz_left position:relative; left:-30px; assoluto: l elemento è posizionato rispetoo all elemento precedente che non ha una posizione statica. Se non ce ne sono è posizionato rispetto al contenotore <html> h1 position:absolute; left:10px; top:20px; Esiste, inoltre, la possibilità di rendere l elemento float. Cio serve a posizionare il box che viene, prima, posizionato secondo la condizione normale e poi shiftato a destra o a sinistra all interno del blocco contenitore. img float:right; //right, none Se, ad esempio l immagine è all interno di u <p>, l immagine si posizionerà a destra del blocco paragrafo. Nota - Ordine di posizionamento: se due o piu elementi sono collocati sullo stesso posto, l elemento citato per primo compare sopra (l attributo z-index, puo modificare l ordine) Un semplice esempio (cfr <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" type="text/css" href="styler.css" /> <title>telemacone piccolo</title> </head> <body> <!-- testa --> <div id="testa"><h1>il telemacone</h1></div> <!-- /testa --> <hr /> <!-- corpo --> <div id="corpo"> <div id="corpo-colonna1">[il]</div> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 9

10 <div id="corpo-colonna2">[tele]</div> <div id="corpo-colonna3">[macone]</div> </div> <!-- /corpo --> <hr /> <!-- pie' di pagina --> <div id="piedipagina"><p>pié di pagina</p></div> <!-- pie' di pagina --> </body> e il relativo css ("styler.css"): BODY TEXT-ALIGN: center #testa MARGIN: 1em auto; WIDTH: 760px; COLOR: white; BACKGROUND-COLOR: brown; TEXT-ALIGN: left #corpo MARGIN: 1em auto; WIDTH: 760px; BACKGROUND-COLOR: mintcream; TEXT-ALIGN: left #piedipagina MARGIN: 1em auto; WIDTH: 760px; BACKGROUND-COLOR: paleturquoise; TEXT-ALIGN: left #corpo-colonna1, #corpo-colonna3 BACKGROUND-COLOR: yellow; #corpo-colonna2 (Si noti l uso di doctype che consente di usare i posizionamenti nello stesso moso anche per il browser IE.). L output su browser mostra le tre righe nel corpo: Cambiamo Variando solo il css, senza alterare il file html: #corpo-colonna1, #corpo-colonna3 float: left; width: 20%; BACKGROUND-COLOR: yellow; #corpo-colonna2 float: left; width: 60%; paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 10

11 Si passa da tre righe a tre colonne nel corpo (!): si potevano anche usare posizionamenti fissi come in questo esempio: #colonna0-spaziofloat: left; width: 124px; height:100px; margin-top:20px; margin-bottom:40px; background-color:#cccccc; #colonna0-sxfloat: left; width: 196px;border-right:3px solid red;height:100px; margin-top:20px; margin-bottom:40px; background-color:#cccccc; #colonna0-ctfloat: left; width: 200px;border-right:3px solid red;height:100px; margin-top:20px; margin-bottom:40px; background-color:#cccccc; #colonna0-dxfloat: left; width: 159px; height:100px; margin-top:20px; margin-bottom:40px; margin-r Scripting lato Client Il linguaggio HTML, in origine, è nato per scrivere ipertesti. Con lo sviluppo di applicazioni interattive si è reso necessario supportare nuove funzionalità per definire e gestire eventi prodotti dall interazione con l utente eseguendo procedure correlate. Come accennato nei paragrafi iniziali, le pagine HTML possono essere rese più interattive introducendo script a lato client, cioè piccoli programmi eseguiti dal browser al momento del caricamento della pagina o quando l utente genera un certo evento come, ad esempio, premere un tasto o passare sopra un area sensibile. I linguaggi piu noti sono JavaScript di Netscape e VisualBasicScript di Microsoft. In particolare JavaScript, un linguaggio nato alla fine degli anni 90 per la creazione di piccoli effetti nelle pagine web, sta godendo oggi di nuova giovinezza, diventando un asse portante delle attività interattive che si svolgono sul browser. Infatti, come si vedrà meglio nel paragrafo successivo, tramite il DOM la pagina HTML è vista come una serie di oggetti che possono essere manipolati tramite, ad esempio, il linguaggio JavaScript. JavaScript Un esempio per la gestione di un Form locale: <!DOCTYPE html> <html> <body> <script> function validateform() var x=document.forms["myform"]["fname"].value; if (x==null x=="") alert("first name must be filled out"); return false; else alert("nome="+x); alert(document.forms["myform"]["lastname"].value); </script> <form action="bello.html" name="myform" method="get" onsubmit="validateform()"> First name: <input type="text" name="fname" value="mickey"><br> Last name: <input type="text" name="lastname" value="mouse"><br> <input type="submit" value="clicca"> </form> <p>click the "Submit" button and the form-data will be sent to a page on the server called "demo_form.asp".</p> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 11

12 </body> </html> JavaScript offre molti potenti Oggetti per la gestione di date, matematica, navigazione, stringhe. Ad esempio per estrarre le tre lettere del NOME del Codice Fiscale, si puo operare cosi : var str="ncfpuw49l07g200e"; var n=str.substr(3,3); n conterrà: PUW Oppure, tramite l uso delle Regular Expression. var str="mhtpit77a09c500h"; var patt1=/[a-h]/g; restituisce H,A,C,H Molti di questi oggetti dispongono di eventi, cioè di messaggi che il Browser invia a JavaScript a fronte, ad esempio, di un click effettuato col mouse su un elemento. Ad esempio all elemento DIV è collegato l evento onclick e, se ad esso è associata una funzione JavaScript, essa sarà chiamata ed eseguita. Gli script sono inseriti nella pagina usando il tag <SCRIPT> nell intestazione del documento. Anche che altri elementi sono usati per aumentare l inetrattività e le funzionalità del Client: Applet Java, Microsft ActiveX, Macromedia Flash etc. Tali componenti, a lato client, vengono inseriti utilizzando il tag <OBJECT> Ad esempio per istallare una classe Applet Java: <OBJECT classid="clsid:8ad9c e-11d1-b3e f499d93" width="200" height="200"> <PARAM name="code" value="applet1.class"> </OBJECT> Ad esempio per includere un.png: <BODY> <P>Here's a closeup of the Grand Canyon: <OBJECT data="canyon.png" type="image/png"> This is a <EM>closeup</EM> of the Grand Canyon. </OBJECT> </BODY> DOM Il Document Object Model (spesso abbreviato come DOM) letteralmente modello oggetto del documento, è una forma di rappresentazione dei documenti strutturati come modello orientato agli oggetti. In pratica, DOM, considera i vari tag come una gerarchia di oggetti: il DOM è come un albero in cui ogni nodo è un oggetto e i link tra i nodi sono le relazioni padre-figlio tra gli oggetti. In questo modo è possibile navigare il Dom per accedere a ogni nodo. In questo modo è possibile, con un linguaggio simile a JavaScript o VB, manipolare i nodi come se fossero oggetti. paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 12

13 Caratteristiche DOM è stato inizialmente supportato dai browser per modificare gli elementi in un documento HTML. DOM è stato un modo per accedere e aggiornare dinamicamente il contenuto, struttura e stile dei documenti. A causa delle incompatibilità nell'esecuzione di DOM fra i vari browser, il W3C ha fornito delle specifiche standard. In particolare: Tutti gli element sono considerati oggetti Tutti gli attributi degli element sono le proprietà degli oggetti Tutti gli oggetti sono soggetti ad eventi Il nodo rappresenta l entità principale del DOM. Sono nodi: il document gli element (TAG) gli attributi degli element il testo interno agli element Caratteristiche dei nodi: Un nodo possiede un (nodo) figlio e un (nodo) padre. In un albero il nodo top è chiamato root Ciascun nodo, eccetto il root, ha un nodo padre Un nodo puo avere molti nodi figlio Una foglia è un nodo senza figli Siblings sono nodi con lo stesso padre Il DOM possiede vari oggetti: paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 13

14 Ad esempio, l oggetto Window rappresenta la finestra del browser. Ogni Window possiede un Document che rappresenta l HTML del documento corrente. Il Document (l oggetto più importante per noi) avrà una serie di di oggetti Element nidificati che formano l albero completo. Ogni nodo ha le seguenti proprietà: nodename (ad esempio DIV per l elemento, o id per l attributo); nodetype identifica il tipo di nodo: Element type NodeType Element type NodeType Element 1 Comment 8 Attribute 2 Document 9 Text 3 nodevalue (valore del nodo che restituisce il testo nel caso di attributi) childnodes (lista degli elementi e dei nodi di testo contenuti in un nodo) parentnode (nodo di livello superiore) DOM e HTML Il DOM espone a Javascript, sottoforma di oggetti, gli elementi della pagina HTML, compreso attributi e testo. Il codice sottostante mostra un nodo di nome DIV di tipo elemento, un nodo di nome id di tipo attributo, con valore 3, figlio del nodo DIV, e un nodo di testo con valore ciao figlio del nodo DIV e fratello di id. paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 14

15 <DIV id= 3 >ciao</div> Questi elementi possono essere manipolati, cioè creati, modificati o cancellati da programma. Molti oggetti dispongono di eventi a cui il programma puo reagire. Manipolare gli elementi (cfr. ) La manipolazione dei nodi in JavaScript passa attraverso una serie di metodi che vengono applicati per generare contenuti nel Document, reperire e modificarne il contenuto, leggerne e scriverne gli attributi, creare e manipolare i nodi, gestire i CSS e gli eventi. Generare contenuti Il metodo document.write permette di scrivere nel documento un testo, compresi i tag HTML: <html> <body> <script type="text/javascript"> document.write("<h1>hello World!</h1><p>Have a nice day!</p>"); </script> </body> </html> Reperire gli elementi: Tenendo presente che la pagina è rappresentata dall oggetto document, possiamo ottenere i riferimenti agli elementi del DOM, oltre che con nodetype e ChildNodes, tramite alcuni utilissimi metodi: getelementbyid(id) referenzia un elemento dato il suo ID: var x=document.getelementbyid("myheader"); var testo= document.getelementbyid("myheader").innerhtml; getelementsbyname(name) recupera tutti gli elementi (e li mette in un array) con quel nome (si applica solo agli element con nome: form, input, select, text area) : var x=document.getelementsbyname("myinput"); getelementsbytagname(tag) recupera tutti i sottoelementi che posseggono quel TAG, cioè restituisce, sottoforma di lista, i riferimenti a tutti gli elementi presenti sotto l elemento di partenza, indipendentemente dalla loro posizione : var lis_div =document.getelementsbytagname("div"); alert(lis_div.length); Nell esempio che segue, il click sull immagine produce il cambio dell immagine e delle scritte che compaiono in due diversi div, come si vede nelle scheramate sotto. <!DOCTYPE html> <html> <body> <script> function cambia() element=document.getelementbyid('midea') if (element.src.match("ideasi")) element.src="ideano.png"; document.getelementbyid('ide').innerhtml="clicca l'immagine per far venire un'idea!"; else element.src="ideasi.png"; document.getelementbyid('ide').innerhtml="clicca l'immagine per far fuggire un'idea!"; </script> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 15

16 <img id="midea" onclick="cambia()" border="0" src="ideano.png" width="100" height="180"> <div id="ide"> <p>clicca l'immagine per far venire un'idea!</p> </div> </body> </html> Un esempio che mostra l uso di un bottone che mostra data e ora. <!DOCTYPE html> <html> <body> <script> function displaydate() document.getelementbyid("iddata").innerhtml=date(); function vedi(id) var txt=id.innerhtml; alert ("id: "+id); document.write(txt); </script> <button onclick="displaydate()">data/ora</button> <p id="iddata"></p> <h5 onclick="vedi(this)">clicca per vedere questo stesso testo </h5> </body> </html> Creare, aggiungere, rimuovere i nodi E possibile creare e rimuovere nodi in document: createelement(name), removechild(node), appendchild(node), createthead() per manipolare tabelle var mydiv=document.createelement( div ); mydiv.align= right ; Altre proprietà del DOM, utili a determinare il nome o il valore del nodo o dei nodi vicini sono (x è l oggetto-nodoelemento): x.nodename che determina il nome di x x.nodevalue che determina il valore x x.parentnode che determina il nodo padre di x x.childnodes che determina il nodo figlio di x paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 16

17 x.attributes che determina gli attributi del nodo x Modificare il contenuto esistente Per modificare il contenuto di un nodo, occorre prima identificare l elemento (ad esempio tramite tramite id) con getelementbyid e quindi applicare la proprietà innerhtml che consente di inserire codice HTML nell'elemento al quale viene applicato. In questo esempio viene creato un div, in esso viene inserito uno span con id= sp1 e vine posto nel body: var mydiv=document.createelement( div ); mydiv.innerhtml= <span id= sp1 >ciao</span> ; document.body.appendchild(mydiv); L esempio (http://www.w3schools.com/htmldom/dom_methods.asp ) sottostante mostra come reperire il contenuto del nodo intro <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt= document.getelementbyid("intro").innerhtml; document.write("<p>the text from the intro paragraph: " + txt + "</p>"); </script> </body> </html> <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> txt= document.getelementbyid("intro").childnodes[0].nodevalue; document.write("<p>the text from the intro paragraph: " + txt + "</p>"); </script> </body> </html> Leggere e scrivere attributi Per leggere e scrivere gli attributi si puo usare elementnode.getattribute(name), o, rispettivamente, elementnode.setattribute(name, value): <div id="mydiv" title="attributo_title">-- clicca qui </div> var obdiv = document.getelementbyid("mydiv "); var valoreattuale= obdiv.getattribute( mydiv ); obdiv.setattribute( mydiv, valorepippo ); Per cambiare un attributo: document.getelementbyid(id).attribute=new value L esempio cambia l attributo scr di un tag <img> : l immagine pippo.gif è sostitita dall immagine pluto.jpg: <!DOCTYPE html> <html> <body> <img id="immagine" src="pippo.gif"> <script> document.getelementbyid("immagine").src="pluto.jpg"; </script> </body> </html> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 17

18 Gestione dei CSS Per la gestione degli attributi tramite CSS, si puo usare la proprietà style che, a sua volta, è un oggetto con proprietà simili a quelle dei css: var myelem = document.getelementbyid("myelement "); myelem.style.border= 2px solid green ; myelem.style.width= 110px ; // mostrare e nascondere un elemento usando style myelem.style.display= none ; //mostra myelem.style.display= ; //nasconde e toglie lo spazio occupato myelem.style.visibility= visible ; //mostra myelem.style.visibility= hidden ; //nasconde e lascia lo spazio vuoto Eventi e loro gestione Gli script che utilizzano il DOM sono collegati agli eventi, cioè ad azioni che l utente, o il browser, intraprende. Gli eventi sono, di fatto, dei messaggi che il browser invia a Javascript: ad esempio, se al click del mouse su un elemento DIV, è associata una funzione, essa sarà mandata in esecuzione automaticamente. Gli eventi sono, di norma, espressi come normali attributi dei TAG. Tutti gli oggetti DOM hanno associato una serie di eventi come ad esempio onclick, onkeydown, onkeyup, onkeypress, ondblclick, onmouseout, onmouseover Nell esempio sottostante, la funzione catturavalore è chiamata nel caso in cui l utente clicchi con il mouse, rispettivamente, su un campo dati (nell esempio: h1 con id= pippo1 ) o su un bottone: <h1 id="pippo1" onclick="catturavalore()">clicca qui!</h1> <input type="button" onclick="catturavalore()" value="bottone!"/> Tra i molti eventi disponibili relativi a valori e bottoni, un evento diverso dai precedenti ma particolarmente importante e utile è onload: <body onload="loadxml()"> Si tratta di un evento che si scatena quando il browser ha terminato di leggere tutto il codice HTML della pagina che viene caricata. La lettura del documento avviene in sequenza dall alto al basso. A questo punto tutti gli elementi del DOM sono disponibili. Ciò è fondamentale perché, altrimenti, si potrebbero generare degli errori nel caso venissero chiamate funzioni o frammenti di codice non ancora caricati. ( ) DOM: un esempio completo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" > <head> <title> elementi_ridotto.html </title> <script type="text/javascript"> function catturavalore() var x=document.getelementbyid("myheader"); var av=x.getattribute("title") ; alert("attributo: "+ av +" "+"innerhtml: "+x.innerhtml); function catturaelementi() var x=document.getelementsbyname("myinput"); alert("valore bottone: "+x[0].value); function catturatags() var lista_h2 = document.getelementsbytagname("h2"); for(i=0; i < lista_h2.length; i++) alert("valori h2: "+i + " - " + lista_h2[i].innerhtml) </script> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 18

19 </head> <body> <h1 id="myheader" title="attributo_title" onclick="catturavalore()">--clicca qui per il valore dell' ID MyHeader</h1> <input type="text" name="myinput" value="prova"/> <h2><i>-- clicca il bottone per getelementsbyname --</i></h2> <input type="button" onclick="catturaelementi()" value="bottone!"/> <h2 onclick="catturatags()">-- clicca qui per i valori di h2 --</h2> </body> </html> Ecco gli output che vengono mostrati all esecuzione della pagina: Output associato a ID, getvalue(): Output associato al Name, getelements(): Output associati al TAG, gettags(): html5 (http://www.w3.org/tr/html5/ ) HTML5 è la nuova generazione di HTML. Attualmente (2010) è ancora sotto sviluppo da parte del W3C ma molti browser già ne implementano varie funzioni. Le principali regole si possono così sintetizzare: tutto è basato su HTML, CSS, DOM, e JavaScript non c è più la necessità di ricorrere a plugin nesterni (come Flash) Gestione degli errori Nuovi tag per rimpiazzare gli script Indipendente dalla piattaforma Le prinipali funzionalità si si possono così sintetizzare: Un nuovo elemento canvas per il disegno Elementi audio e video per la riproduzione di brani multimediali Miglior supporto di memorizzazione in locale Nuovi elementi per la gestione dei contenuti: article, footer, header, nav, section Nuovi form di controllo: calendar, date, time, , url, search Il significato di tutto ciò risulta essere abbastanza evidente: la riproduzione di file audio e video diventa più facile e immediata senza la necessità di disporre di un software proprietrio come quello di Adobe, Flash, o dei mille plug-in per la riproduzione multimediale e di giochi su browser. Senza contare che Apple e Google sponsorizzano in pieno Html5! Canvas HTML5 Un esempio di canvas (http://www.w3schools.com/html5/html5_new_elements.asp): paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 19

20 <!DOCTYPE HTML> <html> <body> <canvas id="mycanvas" width="200" height="100" style="border:10px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.moveto(10,14); cxt.lineto(150,20); cxt.lineto(10,50); cxt.stroke(); </script> </body> </html> DOM e XML L'XML, extensible Markup Language, è un metalinguaggio creato e gestito dal W3C, per creare nuovi linguaggi, atti a descrivere documenti strutturati. Secondo Degli Antoni, la possibilità di realizzare atti di comunicazione che siano ad un tempo adatti agli umani ed all automazione, nei gesti di comunicazione, nasce proprio dalla natura autodescrittiva degli elementi di XML. Rispetto all'html, l'xml ha, quindi, uno scopo diverso: Scopo HTML - descrizione e formattazione di pagine web e, più in generale, di ipertesti - è un linguaggio Struttura: - insieme ben definito e ristretto di tag Scopo XML - linguaggio di annotazione (Markup) che permette di creare gruppi di marcatori (tag set) personalizzati (MathML, XHTML, chemicalml, ecc..) - meta linguaggio utilizzato per creare nuovi linguaggi, atti a descrivere documenti strutturati (Non è un linguaggio!). - Formato standard per lo scambio dei dati - Supporto per la costruzione di formati specifici per gli usi più disparati Struttura: - propri tag definiti a seconda delle esigenze. - libero nel contenuto, piu rigido nella sintassi. Vantaggi: - semplice struttura sintattica; -possibilità di visualizzazione della pagina attraverso un browser Vantaggi: - metalinguaggio per la creazione di linguaggi personalizzati che, tramite tag, incorpora oltre alla struttura sintattica anche una struttura semantica degli elementi. - linguaggio, per applicazioni in rete, utilizzabile da qualsiasi sistema - Ogni documento può contenere un'opzionale descrizione della sua grammatica (DTD -Document Type Definition- o XSD -XML Schema Definition- ) Svantaggi: - marcatore di identificazione per il browser ma non significa nulla per l'elemento stesso. In prima battuta, un documento XML è simile ad un documento HTML, con la differenza che in XML i tag li possiamo inventare per le nostre esigenze, a seconda delle informazioni che ci interessa rappresentare. Consideriamo un breve racconto di Leone Tolstoj: Lev Nikolaevic Tolstoj I due cavalli Due cavalli tiravano ognuno il proprio carro. Il primo cavallo non si fermava mai; ma l'altro sostava di continuo. Allora tutto il carico viene messo sul primo carro. Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." Quando arrivarono a destinazione, il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" e così fece. Spesso, per spiegare meglio il testo, dobbiamo comunicare ad altri le parti che lo compongono. In prima battuta potremmo usare colori e caratteri diversi: paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 20

21 Lev Nikolaevic Tolstoj I due cavalli Due cavalli tiravano ognuno il proprio carro. Il primo cavallo non si fermava mai; ma l'altro sostava di continuo. Allora tutto il carico viene messo sul primo carro. Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." Quando arrivarono a destinazione, il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" e così fece. Meglio sarebbe caratterizziare il testo con tag specifici: i Tag di XML nel racconto di Tolstoj <racconto> <autore> Lev Nikolaevic Tolstoj </autore> <titolo> I due cavalli </titolo> <intro>due cavalli tiravano ognuno il proprio carro. <chi cavallo= primo > Il primo cavallo non si fermava mai; </chi cavallo= primo > <chi cavallo= secondo > ma l'altro sostava di continuo. </chi cavallo= secondo > </intro> <storia> Allora tutto il carico viene messo sul primo carro. <chi cavallo= secondo > Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: <dialogo "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." <dialogo> </chi cavallo= secondo > </storia> <morale> Quando arrivarono a destinazione, <chi persona= padrone > il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" </chi persona= padrone > e così fece. </morale> </racconto> In questo modo abbiamo ottenuto un testo piu ricco, che cattura le parti (gli elementi), costituiti da etichetta e testo, formando una struttura ad albero. Inoltre è ora possibile scorrere formalmente Il testo XML, alla ricerca dei suoi contenuti in modo da estrarne parti e sottoparti. Si noti, infine, che per speciificare meglio i tag, sono stati inseriti degli attributi (il cui valore è racchiuso tra apici: cavallo= secondo ) che hanno lo scopo di modificatore o specificatore dell elemento. L esempio che segue mostra, da un punto di vista più tecnico, la formattazione di un messaggio di posta. La prima linea del documento lo identifica come XML. Il primo tag <messaggio> identifica la radice del documento: questo documento è un messaggio. I restanti tag specificano il contenuto del messaggio in termini di oggetto, mittente, destinatario e testo. L ultimo tag conclude la descrizione del messaggio. formattazione di un messaggio di posta: <?xml version="1.0"?> <messaggio> <a>paolo</a> <da>carlo</da> <oggetto>incontro</oggetto> <testo>ci vediamo alle cinque per il the</testo> </messaggio> Analisi di un XML Analizziamo un documento XML dandone una definizione formale partendo dalla struttura di un documento. Un documento è, di norma, costituito da piu elementi e sottoelementi strutturati ad albero con una radice (elemento documento), rami e foglie, padri, figli e fratelli: paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 21

22 XML bookstore (http://www.w3schools.com/dom/dom_nodes.asp) <?xml version="1.0" encoding="iso "?> <bookstore> <book category="cooking"> <title lang="en">everyday Italian</title> <author>giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="children"> <title lang="en">harry Potter</title> <author>j K. Rowling</author> <year>2005</year> <price>29.99</price> </book> </bookstore> Un documento XML è descritto da comandi (tag) che ne rappresentano la struttura logica. L insieme di questi comandi è chiamato Markup: documento XML= Markup + Dati testuali scritti in UNICODE Markup= comandi per la rappresentazione logica del documento I tag, che si distinguono dai dati testuali perché sono racchiusi tra i delimitatori < >, identificano il tipo di elemento: Tag di apertura: <nometag> Tag di chiusura: </nometag> Tag vuoti: <nometag/> L elemento puo avere un identificatore univoco (ID) e gli attributi che lo caratterizzano nelle sue proprietà. <pacco id="l-dvd-5565" note="fragile!" /> Nodo La gestione di un documento XML passa ancora, esattamente come per i documenti HTML, attraverso gli oggetti DOM. Anche qui ritroviamo il concetto di nodo e le relazioni tra i nodi: L oggetto Node costituisce la base di tutti gli altri oggetti derivati. Esso dispone di proprietà e metodi comuni agli oggetti derivati. L oggetto document è derivato da Node e rappresenta il documento XML. l oggetto Element è derivato da Node e rappresenta un elemento XML ( ex <book> ). Se ha del testo, questo viene visto come nodo-figlio di tipo testo L oggetto Attribute è derivato da Node e rappresenta l attributo di un elemento XML ( ex category="cooking"). paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 22

23 L oggetto node ha tre proprietà fondamentali : nodetype, nodevalue, nodename. Accesso al documento XML Per manipolare un documento XML c è bisogno di un parser XML. Il parser carica il documento XML in memoria e, solo allora, si opera sul documento usando il DOM. Ci sono tre modi per accedere a un nodo: getelementbyid() document.getelementbyid("intro"); getelementsbytagname() ad es. document.getelementsbytagname("p"); Navigando nell albero dei Nodi e usandone le relazioni di parentela, ad es. x=document.getelementbyid("introduzione"); document.write(x.firstchild.nodevalue); ---- x=document.getelementsbytagname("p"); for (i=0;i<x.length;i++) document.write(x[i].innerhtml); document.write("<br />"); Il documento XML deve sottostare ad alcune precise regole per essere Ben Formato (Well Formed): Un Prologo, che è la prima istruzione che appare scritta nel documento: <?xml version="1.0" encoding="iso "?> Un unico Elemento radice (ovvero il nodo principale) che contiene tutti gli altri nodi del documento: < biblioteca_mia > Tag finali sono obbligatori <libro> <nome> Paolo </nome> <cognome>rossi NON VALIDO!!! </libro> Gli Attributi racchiusi tra virgolette doppie : <libro autore= Polo > Gli elementi non possono iniziare con numeri o caratteri speciali e non possono contenere spazi; Gli elementi devono essere bilanciati, ovvero non sono consentiti errori di annidamento: <libro> <nome>paolo</nome> <cognome>rossi </libro> </cognome> Gli elementi sono case-sensitive <libro> <nome> Paolo </nome> <cognome>rossi</cognome> NON VALIDO!!! </libro> NON VALIDO!!! E possibile identificare anche un tipo di documento. E abbastanza intuitivo pensare ad esempio a documenti di tipo diverso: racconti, relazioni, elenchi telefonici In XML viene formalizzato questo concetto tramite DTD (Document Type Definition) che dichiara lecite, all interno di un documento XML, quali sono i tipi di elemento, gli attributi, le notazioni lecite. Ad esempio saluti.dtd: <!ELEMENT greeting (tiposaluto, indirizzamento)> <!ELEMENT tiposaluto (#PCDATA)> <!ELEMENT indirizzamento (#PCDATA)> il file xml salutagente.xml, usa il DTD precedente: <?XML version 1.0 > <!DOCTYPE saluti SYSTEM file:// saluti.dtd > <salutagente> <tiposaluto>ciao,</tiposaluto> <indirizzamento>gente!!! </indirizzamento> </salutagente> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 23

24 I documenti XML che usano DTD si dicono documenti di tipo valido. Il caricamento di un documento XML nel browser Ormai quasi tutti i linguaggi di programmazione posseggono parser per la manipolazione degli oggetti DOM. Javascript si appoggia al parser che il Browser mette a disposizione: ciò comporta, purtroppo, una differente gestione in funzione del browser usato: ad esempio Microsoft Internet Explorer (IE) si appoggia a un oggetto ActiveX, mentre Mozilla Firefox possiede metodi integrati. Di questo bisogna tenerne conto come nell esempio sottostante: // code for IE if (window.activexobject) xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false;... // code for Mozilla Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) xmldoc=document.implementation.createdocument("","",null);... else alert('your browser cannot handle this script'); Nel file libri.xml, visto in precedenza si può notare che: <biblioteca_mia > rappresenta il nodo radice del DOM Il nodo root <biblioteca_mia > possiede due figli-nodo di nome : <libro>. Il primo nodo-figlio <libro> ha, a sua volta, quattro nodi-figli <nome>, <cognome<>, <titolo>, <edizione>, i quali contengono un testo-nodo ciascuno: Paolo, Macchi, Telemacone, ISIS Facchinetti. libri.xml Il programma che segue, controlla i nodi e trova il valore del nome e del cognome in libri.xml <?xml version="1.0" encoding="iso "?> <bibliotecamia> <libro categoria="reti"> <nome>paolo</nome> <cognome>macchi</cognome> <titolo>telemacone</titolo> <edizione>isis Facchinetti</edizione> </libro> <libro categoria="storia"> <nome>marco </nome> <cognome> Polo </cognome> <titolo>milione</titolo> <edizione>repubblica di Venezia</edizione> </libro> </bibliotecamia > e li imposta nella pagina HTML (http://www.w3schools.com/dom/dom_nodes_access.asp ): <html> <head> <title> parser0-librixml.html </title> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 24

25 <script type="text/javascript"> var xmldoc; function loadxml() // code for IE if (window.activexobject) xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.load("libri.xml"); getmessage(); // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) //alert('browser Mozilla'); xmldoc=document.implementation.createdocument("","",null); xmldoc.load("libri.xml"); xmldoc.onload=getmessage; else alert('your browser cannot handle this script'); function getmessage() document.getelementbyid("libro1").innerhtml= xmldoc.getelementsbytagname("titolo")[0].childnodes[0].nodevalue; document.getelementbyid("nome1").innerhtml= xmldoc.getelementsbytagname("nome")[0].childnodes[0].nodevalue; document.getelementbyid("cognome1").innerhtml= xmldoc.getelementsbytagname("cognome")[0].childnodes[0].nodevalue; document.getelementbyid("libro2").innerhtml= xmldoc.getelementsbytagname("titolo")[1].childnodes[0].nodevalue; document.getelementbyid("nome2").innerhtml= xmldoc.getelementsbytagname("nome")[1].childnodes[0].nodevalue; document.getelementbyid("cognome2").innerhtml= xmldoc.getelementsbytagname("cognome")[1].childnodes[0].nodevalue; </script> </head><body onload="loadxml()"> <h1>leggi libri.xml</h1> <p><b>libro1:</b> <span id="libro1"></span><br /> <b>nome1:</b> <span id="nome1"></span><br /> <b>cognome1:</b> <span id="cognome1"></span> <p><b>libro2:</b> <span id="libro2"></span><br /> <b>nome2:</b> <span id="nome2"></span><br /> <b>cognome2:</b> <span id="cognome2"></span> </p> </body> </html> output: Leggi libri.xml libro1: Telemacone paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 25

26 nome1: Paolo cognome1: Macchi libro2: Milione nome2: Marco cognome2: Polo Un miglioramento, che prevede la possibilità di creare i nodi inj modo dinamico, in funzione dei nodi presenti nel file XML è il seguente: <html> <head> <title> parser0-librixml.html </title> <script type="text/javascript"> var xmldoc; function loadxml() // code for IE if (window.activexobject) //il DOM di explorer si basa su un oggetto ActiveX xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.load("libri.xml"); getmessage(); // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) //i browser di nuova generazione usano "document.implementation" come proprietà del DOM xmldoc=document.implementation.createdocument("","",null); xmldoc.load("libri.xml"); xmldoc.onload=getmessage; else alert('your browser cannot handle this script'); function getmessage() //variabili locali che indicano le varie caratteristiche del libro var titolo,nome,cognome; //array contenenti il contenuto dell'xml per rispettive proprietà var titoli,nomi,cognomi; //inizializzazione degli array titoli= xmldoc.getelementsbytagname("titolo"); nomi= xmldoc.getelementsbytagname("nome"); cognomi= xmldoc.getelementsbytagname("cognome"); //ciclio che scrive le info tante volte quante sono contenute negli array for(i=0;i< titoli.length;i++) //titolo=document.createelement('span'); //titolo.setattribute('id','libro'+(i+1)); //titolo.innerhtml='<b>libro'+(i+1)+':</b>'+'ii'+'<br>'; //document.body.appendchild(titolo); alert("titolo del libro: "+titoli[i].childnodes[0].nodevalue); titolo=document.createelement('span'); titolo.setattribute('id','libro'+(i+1)); titolo.innerhtml='<b>libro'+(i+1)+': </b>'+titoli[i].childnodes[0].nodevalue+'<br>'; document.body.appendchild(titolo); nome=document.createelement('span'); paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 26

27 nome.setattribute('id','nome'+(i+1)); nome.innerhtml='<b>nome'+(i+1)+': </b>'+nomi[i].childnodes[0].nodevalue+'<br>'; document.body.appendchild(nome); cognome=document.createelement('span'); cognome.setattribute('id','cognome'+(i+1)); cognome.innerhtml='<b>cognome'+(i+1)+': </b>'+cognomi[i].childnodes[0].nodevalue+'<br><br>'; document.body.appendchild(cognome); </script> </head><body onload="loadxml()"> <h1>leggi libri.xml</h1> </body> </html> Un esempio per la lettura del file XML contentente la storia di Tolstoj è il seguente: <?xml version="1.0" encoding="iso "?> <raccolta> <racconto> <autore> Lev Nikolaevic Tolstoj </autore> <titolo> I due cavalli </titolo> <intro>due cavalli tiravano ognuno il proprio carro. <chi cavallo="primo"> Il primo cavallo non si fermava mai; </chi> <chi cavallo="secondo"> ma l'altro sostava di continuo. </chi> </intro> <storia> Allora tutto il carico viene messo sul primo carro. <chi cavallo="secondo"> Il cavallo che era dietro e che ormai tirava un carro vuoto, disse sentenzioso al compagno: <dialogo> "Vedi? Tu fatichi e sudi! Ma più ti sforzerai, più ti faranno faticare." </dialogo> </chi> </storia> <morale> Quando arrivarono a destinazione, <chi persona="padrone"> il padrone si disse: "Perché devo mantenere due cavalli! Mentre uno solo basta a trasportare i miei carichi? Meglio sarà nutrir bene l'uno, e ammazzare l'altro; ci guadagnerò almeno la pelle del cavallo ucciso!" </chi> e così fece. </morale> </racconto> <racconto> <titolo> Ciao <chi persona="padrone"> marina </chi> </titolo> <storia> se questa pagina funziona, allora significa che forse <morale> ho imparato a usare xml </morale> </storia> <chi persona="schiavetto"> tanti saluti, <autore> Luca </autore> </chi> </racconto> </raccolta> Con il file html che lo interpreta: paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 27

28 <html> <head> <title> parser0-librixml.html </title> <script type="text/javascript"> var xmldoc; function loadxml() // code for IE if (window.activexobject) //il DOM di explorer si basa su un oggetto ActiveX xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.load("favola.xml"); getmessage(); // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) //i browser di nuova generazione usano "document.implementation" come proprietà del DOM xmldoc=document.implementation.createdocument("","",null); xmldoc.load("favola.xml"); xmldoc.onload=getmessage; else alert('your browser cannot handle this script'); function getmessage()//funzione che scorre e stampa a video il contenuto di un XML non omoge //ipotetico procedimento iterativo var strato1;//,strato2,strato2,strato4,strato5,strato6; for(i=0;xmldoc.childnodes[i];i++) strato1=xmldoc.childnodes[i]; printmessage(strato1);//chiama la funzione sul nodo esterno e itera gli altri //alert(strato1.nodevalue); function printmessage(strato)//algoritmo ricorsivo strato.setattribute("visited","true");//altrimenti i nodi vengono visitati più volte if(strato.nodename=="racconto") document.writeln('<br><br>'); var strato2; for(i=0;strato.childnodes[i];i++) strato2=strato.childnodes[i]; if(strato2.nodename=="#text" && strato2.nodevalue!=null)//writeln aggiunge righe senza sovrascrivere le precedenti //effettua il controllo sul nodo in cui il testo è contenuto e stampa di conseguenza if(strato.nodename=="autore") document.writeln('<b>'+strato2.nodevalue+'</b><br>'); if(strato.nodename=="titolo") document.writeln('<font size="6" color="red">'+strato2.nodevalue+'</font><br>'); if(strato.nodename=="morale") document.writeln('<font size="4" color="blue">'+strato2.nodevalue+'</font><br>'); if(strato.nodename=="chi") if(strato.getattribute("persona")=="padrone") document.writeln('<font size="4" color="blue">'+strato2.nodevalue+'</font><br>'); else document.writeln(strato2.nodevalue+'<br>'); if(strato.nodename=="intro" strato.nodename=="storia") document.writeln(strato2.nodevalue); if(strato.nodename=="dialogo") document.writeln('<i>'+strato2.nodevalue+'</i>'); if(strato2.nodename!="#text" && strato2.getattribute("visited")!="true") printmessage(strato2); </script> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 28

29 </head><body onload="loadxml()"> </body> </html> Con document.getelementbyid si individua uno specifico elemento della pagina individuato con il selettore css #. Con getelementsbytagname si individuano tutti i tag del tipo indicato. Si noti anche l uso di getattribute e nodevalue come nell esempio: this.dominio = catelement.getattribute("dominio"); this.valore = catelement.childnodes[0].nodevalue; In questo semplice esempio, se il file XML contiene: <categoria dominio="attributone">valorone123</categoria> this.dominio assume Attributone e this.valore Valorone123 XHTML (raccomandazione del W3C ) L insieme della visione fornita dal DOM, l uso dei CSS e la struttura dell XML ha portato all XHTML (extensible HyperText Markup Language) che associa alcune proprietà dell'xml con le caratteristiche dell'html: un file XHTML è un pagina HTML scritta in conformità con lo standard XML.Il linguaggio prevede un uso più restrittivo dei tag HTML; solo la struttura della pagina è scritta in XHTML, mentre il layout è imposto dai fogli di stile a cascata. Esempio : un albero genealogico Consideriamo l albero genealogico di una famiglia che ha due figli (Paolo e Carlo) che, a loro volta, hanno figli, uno dei quali (Matteo) ha altri due figli. Ecco il file XML: <famiglia> <Paolo> <Maria/> <Stefano/> </Paolo> <Carlo> <Chiara/> <Giulia/> <Matteo> <Eleonora/> <Marco/> </Matteo> </Carlo> </famiglia> Il nodo "famiglia" è il principale, ( root ) ed è unico. Paolo e Carlo saranno elementi di secondo livello, Eleonora e Marco di quarto livello, gli altri di terzo livello. Nello script precedente era presente questa istruzione che assegna all'oggetto root i dati contenuti nel primo livello del nostro documento: root = xmldoc.documentelement paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 29

30 Se volessimo puntare ai nomi dei primi due figli: Paolo= xmldoc.documentelement.childnodes[0] Carlo = xmldoc.documentelement.childnodes[1] Se volessimo puntare invece alle due figlie di Matteo, dovremmo scrivere: figlie= xmldoc.documentelement.childnodes[1].childnodes[2] Il primo childnode ha come valore uno perché punterà al secondo figlio, "Carlo" (la numerazione parte dallo zero). Il secondo ha come valore due perché punterà a "Matteo". Per i nomi dei nipoti: Eleonora=xmlDoc.documentElement.childnodes[1].childnodes[2].childnodes[0].nodename Marco=xmlDoc.documentElement.childnodes[1].childnodes[2].childnodes[1].nodename XML: formule matematiche Un esempio di inserimento in una pagina delle formule matematiche complesse. Basterà dichiarare il namespace relativo al linguaggio MathML e inserire nella pagina i tag specifici di quest'ultimo (il codice è tratto dal sito del W3C). <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>a Math Example</title> </head> <body> <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> </body> </html> XML: descrizione dell informazione musicale Presso l Università Statale di Milano è stato standardizzato il metodo per la descrizione dell'informazione musicale in X ML (http://www.mx.dico.unimi.it/) (http://www.lim.dico.unimi.it/membri/ludovico/luca_andrea_ludovico_ita.htm) Ecco uno stralcio della Grande sonate pathétique, Grave, measure 4 di Ludwig Van Beethoven codificato in XML: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE ieee1599 SYSTEM "http://standards.ieee.org/downloads/1599/ /ieee1599.dtd"> <ieee1599 creator="laboratorio di Informatica Musicale" version="1.0"> <general> <description> <main_title>1st movement - Grave</main_title> <author type="composer">ludwig Van Beethoven</author> <number>1</number> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 30

31 <work_title>grande sonate pathétique</work_title> <work_number>opus 13</work_number> <date>1798/99</date> </description> </general> <logic> <spine> <event id="rclef" timing="0" hpos="0" /> <event id="lclef" timing="0" hpos="0" /> <event id="rkeysig" timing="0" hpos="0" /> <event id="lkeysig" timing="0" hpos="0" /> <event id="rh_01" timing="0" hpos="0" /> <event id="lh_01" timing="0" hpos="0" /> <event id="rh_02" timing="144" hpos="144" /> <event id="lh_02" timing="0" hpos="0" /> <event id="rh_03" timing="72" hpos="72" /> <event id="lh_03" timing="0" hpos="0" />... </spine> <los> <staff_list> <brackets marker="start_of_staff_group" shape="brace" group_number="1" /> <staff id="rh_staff" line_number="5"> <clef event_ref="rclef" shape="g" staff_step="2" /> XML: RSS La struttura dell ultima versione di RSS si presenta suddivisa nel seguenta modo: Intestazione XML, identificata dall omonimo tag; Il tag RSS; Il tag Channel che contiene materialmente tutti i dati del file RSS: intestazione del sito che rilascia il feed. gestione del logo del sito che rilascia il feed. tutti gli item del feed, rappresentanti le singole notizie. Altri tag come: title specifica il titolo della notizia, link specifica la URL completa della notizia description specifica i primi N caratteri descrittivi della notizia. RSS 2.0 <rss version="2.0"> <channel> <title>example Channel</title> <link>http://example.com/</link> <description>an example feed</description> <language>en</language> <textinput> <title>search this site:</title> <description>find:</description> <name>q</name> <link>http://example.com/search</link> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 31

32 </textinput> <skiphours> <hour>24</hour> </skiphours> <item> <title>1 < 2</title> <link>http://example.com/1_less_than_2.html</link> <description>1 < 2, 3 < 4. In HTML, <b> starts a bold phrase and you start a link with <a href= </description> </item> </channel> </rss> XSL Abbiamo detto che l'xml ci permette di creare un nostro linguaggio il quale sarà interpretato dal browser secondo le nostre esigenze. Per l'interpretazione abbiamo dovuto appoggiarci a DOM. Possiamo pero interpretare XML con un altro linguaggio chiamato XSL (extensible Stylesheet Language). Il nome XSL deriva dal fatto che esso si basa sul meccanismo dei fogli di stile. Xml riguarda, invece, la trattazione dei dati. XSL ci permette di scandire il documento xml e trasformarlo in un altro documento con diverso formato. L'xsl rispetto al semplice css ci permette di dare una formattazione più flessibile e dinamica all'interpretazione del nostro documento xml. Qui di seguito presentiamo una rappresentazione grafica dell'integrazione tra XML e HTML: La creazione avviene servendosi di XML, il quale viene interpretato come codice html da un particolare interprete chiamato XSL. ecco un esempio in cui si presenta un un file xml che simula l'intestazione di un questionario (prova1.xml), il relativo xls(prova1.xsl) e il css (prova1.css). prova1.xml: <?xml version="1.0" encoding="utf-8"?> <?xml:stylesheet type="text/xsl" href="prova1.xsl"?> <!--PAGINA DI INTERPRETAZIONE(XSL) --> <questionario> <!--INTESTAZIONE VERIFICA--> <intestazione titolo_quest="titolone" materia="materione" tempo="20"> <input tipo="testo" name="cognome"/> <input tipo="testo" name="nome"/> <input tipo="testo" name="data"/> </intestazione> <pagina titolo_pag="sezione 1: Domande a scelta multipla"> <gruppo titolo_gr="argomento: " > </gruppo> </pagina> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 32

33 </questionario> prova1.xsl: <?xml version="1.0"?> <HTML xmlns:xsl="http://www.w3.org/tr/wd-xsl"> <head> <title>prova1</title> </head> <link href="stili/prova1.css" rel="stylesheet"/> <BODY> <center> <br/> <br/><br/><br/><br/> <!--TABELLA--> <table border="0" width="92%" align="center" cellpadding="5" cellspacing="0"> <tr> <td> <font color="red" size="+2"><b>intestazione:</b></font> <xsl:for-each select="questionario/intestazione/input"> <!--NODO INPUT--> <tr> <!--COLORE GRIGINO--> <td> <b> <xsl:value-of <!--STAMPO L'ATTRIBUTO NAME DEL NODO INPUT--> <xsl:if <!--SE TIPO DI INPUT UGUALE A TESTO ALLORA FACCIO UNA INPUT TYPE TEXT.--> </xsl:if></b> </td> </tr> </xsl:for-each> </td> </tr> </table> <br/><br/><br/><br/><br/><br/><br/><br/> <!--TABELLA CON IL TITOLO DELLA PROVA E LA SUA MATERIA--> <xsl:for-each select="questionario/intestazione"> <table border="0" width="92%"> <tr> <td class= "prova11" align="center"> <h1><xsl:value-of </h1> <!--TITOLO DEL QUESTIONARIO--> <p class= "prova1">materia coinvolta: <xsl:value-of <!--MATERIA DEL QUESTIONARIO--> Tempo di svolgimento: <xsl:value-of minuti </td> </tr> </table> </xsl:for-each> </center> </BODY> </HTML> prova1.css: BODY MARGIN-TOP: 3px; SCROLLBAR-FACE-COLOR: #181fb1; MARGIN-BOTTOM: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #436532; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #d1d3ff; paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 33

34 SCROLLBAR-DARKSHADOW-COLOR: # INPUT.login FONT-WEIGHT: lighter; FONT-SIZE: 80%; COLOR: black; FONT-STYLE: italic; FONT-FAMILY: "comic sans ms" H1 FONT-WEIGHT: bold; FONT-SIZE: 135%; COLOR: forestgreen; FONT-FAMILY: "comic Sans MS".prova1 COLOR: dodgerblue; FONT-FAMILY: Bangle.prova11 COLOR: limegreen; FONT-STYLE: oblique; FONT-FAMILY: AucoinLight pagina prodotta chiamando prova1.xml: AJAX = XML+JavaScript Il problema di dover recuperare dati da un Server senza dover necessariamente ricaricare l intera pagina viene risolto tramite l oggetto XMLHttpRequest. Questo oggetto consente di inviare al Server una richiesta (Request) e di ottenere una risposta (Response). L oggetto XMLHttpRequest è il cardine delle applicazioni interattive basate su AJAX. Esso possiede una serie di metodi (open, send..) e proprietà (responsetext, responsexml,..) definiti dal W3C. Il flusso di una richiesta asincrona segue una serie di passi successivi che vanno dalla creazione di una istanza dell oggetto XMLHttpRequest, all assegnazione di una funzione di callback, all invocazione dei metodi open e send infine all attivazione della funzione callback. Più precisamente la procedura AJAX si compone di tre passi definiti: Richiesta da Client a Server con passaggio dei parametri, realizzato, sul browser, tramite XMLHttpRequest. Elaborazione da parte del Server e invio della risposta Rielaborazione, da parte del Client, della pagina web, a fronte della manipolazione della risposta XML pervenuta da Server Un evento, ad esempio un tasto premuto in una text box di un form, fa iniziare la sessione AJAX sul client: - una funzione JavaScript crea e configura un oggetto XMLHttpRequest. Questo oggetto include l URL del server da chiamare su cui risiede l applicazione, il dato da validare che puo essere inviato come parametro nella URL e, infine, una funzione di callback. paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 34

35 - Quando si invia la XMLHttpRequest la pagina HTML continua a processare gli eventi. Il server riceve la richiesta, la processa ed estrae i parametri passati e ritorna un documento XML all oggetto XMLHttpRequest che indica se il dato è valido o meno. - Una volta ricevuta la risposta l oggetto XMLHttpRequest chiama la funzione di Callback preconfigurata. Questa funzione aggiorna la pagina HTML in base al documento XML. Le parti di pagina variate sono immediatamente aggiornate dal browser e l utente vede se il dato del form è stato validato o meno. Validazione con AJAX Nell esempio che segue si mostra l uso dell oggetto XMLHttpRequest per la validazione di un form di dati. Si ottiene una validazione positiva (bordo verde) e negativa (bordo rosso) nel momento stesso dell inserimento dei dati, ottenendo questoi risultato: Ajax: lato client <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 35

36 <style type="text/css">.bp_invalid color:red;.bp_valid color:green;.inp_invalid border-color:red;.inp_valid border-color:green; </style> <script type="text/javascript"> function AJAXInteraction(url, callback) var req = init(); req.onreadystatechange = processrequest; function init() if (window.xmlhttprequest) return new XMLHttpRequest(); else if (window.activexobject) return new ActiveXObject("Microsoft.XMLHTTP"); function processrequest () // readystate of 4 signifies request is complete if (req.readystate == 4) // status of 200 signifies sucessful HTTP call if (req.status == 200) if (callback) callback(req.responsexml); this.doget = function() req.open("get", url, true); req.send(null); function validateuserid() var target = document.getelementbyid("userid"); var url = "validation.php?id=" + encodeuricomponent(target.value); var target = document.getelementbyid("userid"); var ajax = new AJAXInteraction(url, validatecallback); ajax.doget(); function validatecallback(responsexml) var msg = responsexml.getelementsbytagname("valid")[0].firstchild.nodevalue; if (msg == "false") var mdiv = document.getelementbyid("useridmessage"); // set the style on the div to invalid mdiv.classname = "bp_invalid"; mdiv.innerhtml = "Specificare un valore"; mdiv = document.getelementbyid("userid"); mdiv.classname = "inp_invalid"; var submitbtn = document.getelementbyid("submit_btn"); submitbtn.disabled = true; else var mdiv = document.getelementbyid("useridmessage"); // set the style on the div to valid mdiv.classname = "bp_valid"; mdiv.innerhtml = "OK"; mdiv = document.getelementbyid("userid"); mdiv.classname = "inp_valid"; var submitbtn = document.getelementbyid("submit_btn"); paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 36

37 submitbtn.disabled = false; </script> <title>form Data Validation using AJAX</title> </head> <body> <h1>test AJAX</h1> <hr/> <form name="updateaccount" action="validation.php" method="post"> <input type="hidden" name="action" value="create"/> <table border="0" cellpadding="5" cellspacing="0"> <tr> <td><b>campo richiesto (*):</b></td> <td> <input type="text" size="20" id="userid" name="id" autocomplete="off" onkeyup="validateuserid()"> </td> <td> <div id="useridmessage"></div> </td> </tr> <tr> <td align="right" colspan="2"> <input id="submit_btn" type="submit" value="create Account"> </td> <td></td> </tr> </table> </form> </body> </html> Si noti come nella la funzione di Callback si vada a leggere il valore del tag e si opera di conseguenza: function validatecallback(responsexml) var msg = responsexml.getelementsbytagname("valid")[0].firstchild.nodevalue; if (msg == "false")... Ajax: lato server Ecco l esempio (formalmente corretto ma poco significativo nei contenuti) di codice della applicazione, in PHP, server-side. Il server prepara e invia un file xml con il tag <valid> e il suo valore true o false : <?php $q=$_get["id"]; header('content-type: text/xml'); echo '<?xml version="1.0" encoding="iso "?>'; // send XML response echo '<valid>'; if ($q!="") echo 'true'; else echo 'false'; echo '</valid>';?> Nota: per approfondimenti su AJAX: I libri di Io Programmo : Imparare PHP, Programmare con AJAX, Javascript by Example paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 37

38 Librerie Javascript JavaScript permette effettivamente di interagiere con browser e DOM ma la cosa risulta, a volte, lunga e ripetitiva. Il problema di JavaScript è che si tratta di un linguaggio che è cresciuto e si è stratificato nel tempo e non possiede un codice pulito e standardizzato. A volte, poi, browser diversi si comportano in modo diverso a parità di funzioni. Per fortuna esistono alternative e librerie per la gestione lato client come Xpath e Xquery: XPath è usato per navigare tra elementi e attributi di un documento XLM in modo da trovare le informazioni contenute. Xpath è uno standard W3C ed è usato insieme a XSLT. Ad esempio è possibile selezionare il primo nodo-libro sotto l elemento bookstore in questo modo: xml.setproperty("selectionlanguage","xpath"); xml.selectnodes("/bookstore/book[1]/title"); XQuery sta all XML come SQL sta alle tabelle del database, ed è costruito sulla base di Xpath. XQuery è stato progettato per operare query sui dati XML. Ad esempio è possibile fare la seguente interrogazione : "seleziona tutti i libri con un prezzo maggiore di 30euro e ordinali per titolo, prendendoli dalla collezione presente nel documento XML di nome books.xml $x in doc("libri.xml")/bookstore/book where $x/price>30 order by $x/title return $x/title Oltre a queste e altre librerie è possibile anche disporre di framework cioè strutture di supporto su cui un software può essere organizzato e progettato: al programmatore rimane solo da creare il contenuto vero e proprio dell'applicazione perché l intelaiatura viene già fornita! Un framework è di fatto un insieme di classi e metodi preconfezionati e adatti amolte circostanze di progetto. Molti framework opensource permettono la creazione di funzionalità dinamiche nelle pagine Web e mettono a disposizione un ambiente ricco di servizi e funzioni. Ne sono un esempio Dojo (http://www.dojotoolkit.org/) Rico e JQuery. In particolare jquery (http://jquery.com/) è una libreria di funzioni JavaScript il cui scopo è di fornire una serie di funzionalità di più alto livello per la manipolazione di una pagina HTML, lato client. Ideatore del progetto è John Resig e la prima versione risale al jquery contiene numerose funzionalità che si possono cosi sintetizzare: Selezione e manipolazione di elementi HTML Gestione di eventi HTML manipolazione di elementi CSS Animazione ed effetti grafici in JavaScript Gestione e manipolazione degli elenti di HTML DOM AJAX Utilities Manipolazione di XML jquery : write less do more La sintassi di jquery è fatta in modo da poter selezionare (selecting) elementi HTML ed eseguire azioni (action) su di essi: $(selector).action() Il carattere dollaro $ definisce che siamo in presenza di jquery. In realtà $() è solo l alias della funzione jquery() a cui è passato il parametro (selettore). ll (selector) serve a indviduare l elemento HTML ( query ). Nota: Al posto di usare $ si puo usare direttamente la funzione jquery passando il parametro. Ad esempio: jquery( #id_elemento ); al posto di usare $( #id_elemento );. Ad esempio la seguente stringa jquery individua tutti i tag <div> che hanno classe grande, aggiunge a questi stessi <div> la classe rossa e li nasconde (http://www.w3schools.com/jquery/jquery_syntax.asp): $( div.grande ).addclass( rossa ).hide(); Esistono svariati tipi di selettore. I basilari si riferiscono ad un oggetto DOM esistente, come $(document) o $(document.getelementbyid( #id_elemento )); L uso di questi metodi, però, non è consigliato in jquery dove, invece, sono previsti appositi selettori di stringa potenti e semplici, come si vede nell esempio sottostante: - $("p") seleziona tutti gli elementi <p> paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 38

39 - $("p.pluto") seleziona tutti gli elementi <p> con class="pluto". - $("p#demo") seleziona il primo <p> con id="demo". <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() $("button").click(function() $(this).hide(); ); ); </script> </head> <body> <button type="button">cliccami!</button> </body> </html> Si noti che tutte le funzioni associate agli eventi sono definite all interno del blocco di gestione degli eventi (ready): $(document).ready(function().. codice.. ) Cio serve a prevenire l esecuzione di funzioni prima che il documento HTML sia caricato completamente e sia pronto (ready). E possibile, in alternativa, posizionare il codice alla fine della pagina HTML. Per includere nel proprio sito la libreria jquery si può far rferimento direttamente a Microsoft o a Google: <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> </head> Selezione elementi (selector) E molto importante capire come JQuery seleziona esattamente gli elementi HTML a cui si vuole applicare un effetto. I selettori di elementi e attributi permettono di selezionare gli elementi HTML (o gruppi di essi) tramite: nome, attributo o contenuti. - $(this).hide() nasconde l elemento corrente - $("div") seleziona tutti gli elementi <div> della pagina corrente (vale per tutti i div HTML) - $("p") seleziona tutti i paragrafi - $("p").hide() nasconde tutti i paragrafi - $("p").css("background-color","yellow"); cambia le proprietà del CSS a TUTTI gli elementi p - $(".classpluto") seleziona tutti gli elementi con class="classpluto" - $("p.classpluto").hide() nasconde tutti I paragrafi con class="classpluto" - $( #id_elemento ); seleziona l elemento con id specificato (ad esempio <div id= id_elemento )> ) - $("#pippo").hide() nasconde l elemento con id="pippo" - $( [align] ); seleziona tutti gli elementi con attributo align - $( [align=left] ); seleziona tutti gli elementi con attributo align left - $( [title*=telemacone] ); seleziona tutti gli elementi con attributo title contnente la sequenza di lettere Telemacone, (ad esempio <div title= Telmacone e suo padre Ulissone )> ) - $( div.classpluto[align=left][title*=telemacone] ); questa istruzione seleziona tutti i div con classe CSS classpluto allineate a sinistra e nel cui titolo è presente Telemacone. (ad esempio <div class= classpluto lign= left title= Telmacone e suo padre Ulissone )>.. </div> ) - $( div.classpluto[align=left]>a[href*=index.htm] ); seleziona i tag a che hanno attributo hrefil cui valore contiene Telemacone ma solamente in un div allineato a sinistra. Tabella elementi (http://www.w3schools.com/jquery/jquery_selectors.asp ) Syntax Description $(this) elemento HTML corrente paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 39

40 $("p") Tutti gli elementi <p> $("p.intro") $(".intro") $("#intro") $("ul li:first") $("[href$='.jpg']") $("div#intro.head") Tutti gli elementi <p> con class="intro" Tutti gli elementi con class="intro" Il primo elemento con id="intro" Il primo elemento <li> di ciascun <ul> Tutti gli elementi con attributo href che finisce con ".jpg" Tutti gli elementi con class="head" all interno di un <div> con id="intro" Eventi - action() Le funzioni associate agli eventi vengono chiamate quando avviene un evento nella pagina HTML. Un click su un bottone (evento) scatena la funzione associata: $("button").click(function()..fai qualcosa... ) Eventi Function $(document).ready(function) Collega una Function a L evento ready di un document: un documento HTML è stato caricato e pronto all uso. $(selector).click(function) L evento click degli elementi selezionati $(selector).dblclick(function) $(selector).focus(function) L evento doppio click degli elementi selezionati L evento focus degli elementi selezionati $(selector).mouseover(function) L evento mouse over degli elementi selezionati (http://www.w3schools.com/jquery/jquery_events.asp ) Un esempio che usa $(selector).hide(speed,callback) <!DOCTYPE html> <html lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() $("button").click(function() $("p").hide(1000,function() alert("paragrafo nascosto!"); ); ); paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 40

41 ); </script> </head>ì <body> <button type="button">nascondi!</button> <p>un piccolo paragrafo</p> </body> </html> Manipolazione HTML e CSS E possibile intervenire sull HTML inserendo (come con innerhtml), appendendo o cancellando contenuti e valori. La manipolazione di un contenuto avviene con text(), che fornisce il testo contenuto nel div, e html(),fornisce il codice html contenuto nel div. Usati senza argomenti restituiscono rispettivamente il testo e il codice HTML contenuti in un elemento. Ad esempio: Visualizzare il contenuto var=$('div.demo').text(); fornisce il testo contenuto nel div var=$('div.demo').html(); fornisce il codice html contenuto nel div Cambiare il contento: $(selector).html(content) $("p").html("ciao"); sostituisce il contenuto di tutti i paragrafi con il nuovo testo ciao Aggiungere un contenuto $(selector).append(content) $("p").append(" ciao"); inserisce DOPO il testo di tutti i paragrafi, il nuovo testo ciao E possibile manipolare i CSS: $(selector).css(name,value) $(selector).css(properties) $("p").css("background-color":"yellow","font-size":"200%"); $(selector).css(name) E possibile manipolare i nodi del DOM, trovare elementi nel DOM e variarli, come in questo esempio in cui vengono trovati (find) tutti i tag span e i rispettivi contenuti sono marcati in rosso (in questo caso Ciao e Tarzan ): <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <p><span>ciao</span>, chi sei?</p> <p>io sono <span>tarzan</span>.</p> <script> $("p").find("span").css('color','red'); </script> </body> </html> (http://api.jquery.com/find/ ) Oltre alla funzione find, jquery prevede molte altre funzioni per l attraversamento del DOM. Ad esempio è possibile iterare (each) su un oggetto del DOM, associando, ogni volta una funzione diversa. Supponiamo di avere : <ul> <li>paolo</li> <li>carla</li> </ul> Allore è possibile: $('li').each(function(index) alert(index + ': ' + $(this).text()); ); Ottenendo in output: 0: paolo paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 41

42 1: carla Un esempio per la localizzazione dei nodi DOM è quello che segue, in cui vengono localizzati tutti i DIV dopo il primo e viene assegnata una classe: <!DOCTYPE html> <html> <head> <style> div width: 80px; height: 80px; background: #abc; border: 2px solid black; margin: 10px; float: left; div.after border-color: red; </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <div>first</div> <div>sibling<div>child</div></div> <div>sibling</div> <div>sibling</div> <script>$("div:first").nextall().addclass("after");</script> </body> </html> Ajax JQuery fornisce funzioni per la manipolazione di Ajax tra cui, come mostrato nell esempio, il caricamento di un file remoto (test1.txt) <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() $("#aaa").click(function() $('#miodiv').load('test1.txt'); /* htmlobj=$.ajax(url:"test1.txt",async:false); $("#mydiv").html(htmlobj.responsetext); */ ); ); </script> </head> <body> <div id=miodiv"><h2>ajax fa cambiare questo testo con quello nel file di testo caricato da remoto</h2></div> <button id="aaa" type="button">cambia il contenuto del testo!</button> </body> </html> JQuery fornisce una serie di funzioni per la manipolazione di Ajax tra cui: (url) URL (indirizzo) del data da esssere caricato, (callback) funzione che viene eseguita al caricamento, (type) tipo di dati da essere caricato (html,xml,json,jasonp,script,text) Request Descrizione $(selector).load(url,data,callback) Carica i dati remoti nell elemento selezionato $.ajax(options) Carica i dati remoti nell oggetto XMLHttpRequest $.get(url,data,callback,type) Carica i dati remoti usando GET paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 42

43 $.post(url,data,callback,type) $.getjson(url,data,callback) $.getscript(url,callback) Carica i dati remoti usando POST Carica i dati JSON usando GET Carica ed esegue un file JavaScript XML JQuery ha la possibilità di fare il parsing di documenti XML come in questo esempio: <?xml version="1.0" encoding="utf-8"?> <books> <book id="1"> <title>il Telemacone</title> <author>paolo, Macchi</author> </book> <book id="2"> <title>il Milione</title> <author>marco, Polo/author> </book> </books> <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() $('#target').click(function() // alert('click() for parsing XML '); $.ajax( url: "books.xml", datatype: "xml", success: function(data) // Parsing happens here $(data).find("book").each(function() alert($(this).attr("id")+" "+$(this).find("title").text() ); ); ); ); ); </script> <style type="text/css"> a.test font-weight: bold; </style> </head> <body> <div id="target"> Click here parsing XML </div> </body> </html> cfr. e Per una migliore interfaccia utente e servizi RIA : paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 43

44 Firebug: debug di una pagina html Esistono applicazioni fatte apposta per girare su un browser (plugin) che servono a fare il debug di pagine HTML. Il piu famoso, per browser Firefox-Mozilla è Firebug (Per Internet Explorer basta premere F12, oppure usare la versione Lite di Firebug) Con questo plugin è possibile editare, debuggare e controllare il comportamento dei fogli CSS, del codice HTML di JavaScript e delle chiamate AJAX. Inoltre è possibile verificare il tempo di risposta dei singoli oggetti inseriti in una pagina web. La potenza di questo strumento risiede nella possibilità di modificare sia il codice HTML sia gli attributi CSS e vedere applicate direttamente le modifiche alla pagina visualizzata dal browser, senza più necessità di modificare lo script originale e ricaricare la pagina per vedere il risultato delle nuove modifiche. Naturalmente le modifiche NON sono permanenti e riguardano solo la visualizzazione della pagina in corso. Xcode Apple PhoneGap Xcode (http://developer.apple.com/xcode/) è un ambiente di sviluppo integrato sviluppato da Apple per agevolare lo sviluppo di software per Mac e per sviluppare le applicazioni per iphone e ipod touch. Xcode è in grado di compilare codice C, C++, Objective C/C++ e Java su macchine Apple. Una possibilità per costrure applicazioni è quella di integrare Xcode con PhoneGap. PhoneGap è una piattaforma di applicazione HTML5 che permette di creare applicazioni native sfruttando tecnologie web indipendenti, basate su HTML, CSS e JavaScript. In figura è mostrato l ambiente di sviluppo che si serve di PhoneGap per mostrae nel simulatore di ipad la scritta hello world. PhonGap (http://www.phonegap.com/ ) è open source e multipiattaforma: ios, Android, Windows, Symbian, BlackBerry, Applicazioni utente in Facebook paolo macchi - ISIS Facchinetti rel Applicazioni lato Client 44

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare

Dettagli

GUIDA HTML 4.01 andreavasini@libero.it HTML.IT

GUIDA HTML 4.01 andreavasini@libero.it HTML.IT Tutti i diritti sono riservati. Per pubblicazioni od utilizzo di questo materiale pregasi contattare l autore al seguente indirizzo: andreavasini@libero.it Andrea Vasini HTML.IT HTML.IT - Andrea Vasini

Dettagli

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: ...

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>... HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento

Dettagli

Applicazioni web-based. Progettazione di Sistemi Interattivi. Implementazione di sistemi interattivi web-based (prima parte) Gli Standard Web

Applicazioni web-based. Progettazione di Sistemi Interattivi. Implementazione di sistemi interattivi web-based (prima parte) Gli Standard Web Progettazione di Sistemi Interattivi Implementazione di sistemi interattivi web-based (prima parte) Docente: Daniela Fogli Applicazioni web-based Il World Wide Web (W3C) [www.w3.org]: Fondato da Tim Berners-Lee

Dettagli

Metodologie Informatiche applicate al Turismo

Metodologie Informatiche applicate al Turismo Metodologie Informatiche applicate al Turismo 11. Realizzare Siti Dinamici e Applicazioni Web Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it

Dettagli

Guida introduttiva al Document Object Model

Guida introduttiva al Document Object Model Guida introduttiva al Document Object Model ( I.D. Falconi ~ 27.02.13) Il DOM (Document Object Model) è un modello che descrive come i diversi oggetti di una pagina web sono collegati tra loro. Tecnicamente

Dettagli

Introduzione ad AJAX

Introduzione ad AJAX Introduzione ad AJAX Asynchronous Javascript And XML (PWLS 6.9, 6.10) Complementi di Tecnologie Web A.A. 2011-2012 M.Franceschet, V.Della Mea e I.Scagnetto - 1 Limitazioni delle applicazioni web tradizionali

Dettagli

Siti interattivi e dinamici. in poche pagine

Siti interattivi e dinamici. in poche pagine Siti interattivi e dinamici in poche pagine 1 Siti Web interattivi Pagine Web codificate esclusivamente per mezzo dell HTML non permettono alcun tipo di interazione con l utente, se non quella rappresentata

Dettagli

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:

Dettagli

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile CSS Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html CSS: Cascading Style Sheet! Tecnologia W3C per la definizione dello stile di una pagina web! Contenuto e

Dettagli

Esercitazioni di HTML

Esercitazioni di HTML Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: Dietro una pagina web Alcuni esempi:

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)

Dettagli

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità Maria Grazia Ottaviani informatica, comunicazione e multimedialità Unità digitale 1 Ambiente HTML Introduzione Oltre ai linguaggi di programmazione esistono anche linguaggi detti markup. Sono linguaggi

Dettagli

XML. XML è contemporaneamente: XML non è:

XML. XML è contemporaneamente: XML non è: XML XML è contemporaneamente: Linguaggio di annotazione (Markup) che permette di creare gruppi di marcatori (tag set) personalizzati (MathML, XHTML, chemicalml, ecc..) Formato standard per lo scambio dei

Dettagli

CAPITOLO 10 - TECNOLOGIA ASP.NET - WEB FORM

CAPITOLO 10 - TECNOLOGIA ASP.NET - WEB FORM INTRODUZIONE Nel capitolo 5, dedicato all ambiente di sviluppo, si è descritto come implementare un progetto Web tramite lo strumento di sviluppo Microsoft Visual Studio 2010. Un progetto web (o sito web)

Dettagli

Tecniche Multimediali

Tecniche Multimediali Chiedersi se un computer possa pensare non è più interessante del chiedersi se un sottomarino possa nuotare Edsger Dijkstra (The threats to computing science) Tecniche Multimediali Corso di Laurea in «Informatica»

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

Cimini Simonelli - Testa

Cimini Simonelli - Testa WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire

Dettagli

Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti

Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti COMUNE DI GALLARATE Settore Risorse Economiche e Finanziarie Centro Elaborazione Dati Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti Dichiarazione di accessibilità Il sito del Comune

Dettagli

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML Reti Linguaggio HTML 1 HTML = Hypertext Markup Language E il linguaggio usato per descrivere documenti ipertestuali Ipertesto = Testo + elementi di collegamento ad altri testi (link) Linguaggio di markup:

Dettagli

Indice generale. Prefazione alla prima edizione...xvii. Introduzione...xix. Capitolo 1 Gli standard e i CSS... 1

Indice generale. Prefazione alla prima edizione...xvii. Introduzione...xix. Capitolo 1 Gli standard e i CSS... 1 Indice generale Prefazione alla prima edizione...xvii Introduzione...xix Organizzazione dell opera...xx I capitoli...xx Le appendici...xxi Materiale online...xxi A chi si rivolge il libro...xxi Prerequisiti...xxii

Dettagli

aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare.

aggiunge del testo nella parte finale del tag, in questo caso la stringa da controllare. Capitolo 6 jquery Negli ultimi anni è stata rilasciata una mole incalcolabile di framework JavaScript, più o meno completi, realizzati per supportare nel miglior modo possibile lo sviluppatore web aiutandolo

Dettagli

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori HTML e XML Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi

Dettagli

Dichiarazione di Accessibilità

Dichiarazione di Accessibilità Dichiarazione di Accessibilità Il sito web del comune è stato progettato e realizzato con particolare attenzione a quanto prescritto dalla Legge 4/2004 (cosiddetta Legge Stanca ), contenente "Disposizioni

Dettagli

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 Le pagine del sito istituzionale e dei siti tematici del Comune di Pesaro sono state progettate

Dettagli

Strumenti a disposizione

Strumenti a disposizione FORM Strumenti a disposizione L'HTML visto fino ad ora permette di descrivere solo documenti statici e passivi Colori, immagini, testi, etc... L'utente può solo interagire con i link Non sempre questo

Dettagli

Guida web: HTML per principianti

Guida web: HTML per principianti Guida web: HTML per principianti A cura di macom http:// Introduzione "Le vie della comunicazione sono infinite" Ho scritto questa semplice e breve guida pensando ai miei inizi e alle difficoltà incontrate

Dettagli

HTML e Linguaggi. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione

HTML e Linguaggi. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione HTML e Linguaggi Politecnico di Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola Indice Il linguaggio del

Dettagli

MANUALE IMMEDIATO DI HTML

MANUALE IMMEDIATO DI HTML MANUALE IMMEDIATO DI HTML Realizzato da NiktorTheNat Iniziato il giorno 9 aprile 2010 - terminato il giorno 22 aprile 2010 email autore: niktorthenat@tiscali.it canale youtube: http://www.youtube.com/user/niktorthenat

Dettagli

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict.

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict. Tasti di accesso rapido Al fine di migliorare l'accessibilità del sito sono stati definiti i seguenti tasti di accesso rapido, per attivare le principali funzionalità offerte: [H] = Homepage [R] = Ricerca

Dettagli

AJAX. Goy - a.a. 2006/2007 Servizi Web 1. Cos'è il Web 2.0

AJAX. Goy - a.a. 2006/2007 Servizi Web 1. Cos'è il Web 2.0 AJAX Goy - a.a. 2006/2007 Servizi Web 1 Cos'è il Web 2.0 Web 2.0 = termine introdotto per la prima volta nel 2004 come titolo di una conferenza promossa dalla casa editrice O Reilly L'idea è che ci si

Dettagli

REQUISITO DI ACCESSIBILITA

REQUISITO DI ACCESSIBILITA ISTITUTO COMPRENSIVO Pascoli - Crispi Via Gran Priorato, 11-98121 Messina Via Monsignor D'Arrigo, 18-98122 Messina Tel/Fax. 09047030 090360037 e-mail: meic87300t@istruzione.it / meee00800r@istruzione.it

Dettagli

Verifica di Accessibilità del sito www.aots.sanita.fvg.it

Verifica di Accessibilità del sito www.aots.sanita.fvg.it Verifica di Accessibilità del sito www.aots.sanita.fvg.it NOTE: Verifica effettuata in base ai requisiti descritti nell allegato A del Decreto Ministeriale 8 luglio 2005, ai sensi della legge n.4 del 9

Dettagli

ma l XML va ben al di là dell HTML: serve per descrivere

ma l XML va ben al di là dell HTML: serve per descrivere Il metalinguaggio XML 1 Introduzione all'xml Il futuro dei linguaggi di markup: XML = EXtensible Markup Language è una versione semplificata dell SGML Nasce con l'intento di superare alcune limitazioni

Dettagli

Costruzione di un sito web - HTML

Costruzione di un sito web - HTML Costruzione di un sito web - HTML Obiettivi. Presentare le caratteristiche di un sito Web ed i concetti base per la sua costruzione: fasi di realizzazione e linguaggio HTML. Illustrare gli elementi fondamentali

Dettagli

Strumenti per lo sviluppo

Strumenti per lo sviluppo Strumenti per lo sviluppo Librerie Javascript jquery script.aculo.us Componenti aggiuntivi per i browser firefox e chrome Firebug Web developer Alcune utility on-the-fly Generatore di sorgente di codice

Dettagli

Il linguaggio HTML - Nozioni di base (2)

Il linguaggio HTML - Nozioni di base (2) Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghin braghin@dti.unimi.it TAG strutturali visti fino ad ora -

Dettagli

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Comandi principali del linguaggio HTML (Hyper Text Markup Language) Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per

Dettagli

HTML HyperText Markup Language:

HTML HyperText Markup Language: HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web 421 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto

Dettagli

Indice PARTE PRIMA L INIZIO 1

Indice PARTE PRIMA L INIZIO 1 Indice Introduzione XIII PARTE PRIMA L INIZIO 1 Capitolo 1 Esplorare il World Wide Web 3 1.1 Come funziona il World Wide Web 3 1.2 Browser Web 10 1.3 Server Web 14 1.4 Uniform Resource Locators 15 1.5

Dettagli

Tecnologie e Programmazione Web

Tecnologie e Programmazione Web Presentazione 1 Tecnologie e Programmazione Web Html, JavaScript e PHP RgLUG Ragusa Linux Users Group SOftware LIbero RAgusa http://www.solira.org - Nunzio Brugaletta (ennebi) - Reti 2 Scopi di una rete

Dettagli

Realizzare il layout di un sito web senza utilizzare frame e tabelle

Realizzare il layout di un sito web senza utilizzare frame e tabelle Realizzare il layout di un sito web senza utilizzare frame e tabelle Questa guida descrive in maniera semplice e essenziale i passi necessari alla realizzazione di una pagina web strutturata in maniera

Dettagli

Richiami sugli elementi del linguaggio HTML

Richiami sugli elementi del linguaggio HTML Richiami sugli elementi del linguaggio HTML Un documento in formato Web può essere aperto con un browser, attraverso un collegamento a Internet oppure caricandolo dal disco del proprio computer senza connettersi

Dettagli

APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE

APPROCCIO WEB DESIGN REATTIVO: Prima di tutto costruiamo una BASE ESEMPIO FILE.CSS PER REALIZZARE MODELLO SITO WEB: www.modellinirobotanno80.altervista.org /*questo codice va aggiunto al css principale per far si che tutti i browser possano riconoscere correttamente

Dettagli

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 Copyright 2010 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

Linguaggi per la descrizione dei documenti

Linguaggi per la descrizione dei documenti SGML (Standard General Markup Language) Linguaggi per la descrizione dei documenti SGML,HTML,XML Molteplicità di documenti di tipo diverso (es. web): articoli, cataloghi, rubriche, tabelle di dati etc..

Dettagli

Grafica: creare pulsanti con i css.

Grafica: creare pulsanti con i css. Grafica: creare pulsanti con i css. L'articolo originale in lingua inglese Graphics: making buttons with css proviene dal sito eosdev.com ed è stato tradotto e riprodotto per gentile concessione dell'autore.

Dettagli

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla! HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!) CENNI SULL'HTML L'html è il linguaggio di base per lo sviluppo di pagine

Dettagli

I PRINCIPALI TAG DEL LINGUAGGIO HTML

I PRINCIPALI TAG DEL LINGUAGGIO HTML Struttura generica di una pagina Web: I PRINCIPALI TAG DEL LINGUAGGIO HTML Titolo

Dettagli

AJAX e altre applicazioni di Javascript. Luca Fabbri

AJAX e altre applicazioni di Javascript. Luca Fabbri AJAX e altre applicazioni di Javascript Luca Fabbri 1 Definizione di AJAX? AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo per creare applicazioni web interattive. 2 Perché

Dettagli

extensible Markup Language

extensible Markup Language XML a.s. 2010-2011 extensible Markup Language XML è un meta-linguaggio per definire la struttura di documenti e dati non è un linguaggio di programmazione un documento XML è un file di testo che contiene

Dettagli

Architetture Web I Server Web e gli Standard della Comunicazione

Architetture Web I Server Web e gli Standard della Comunicazione Architetture Web I Server Web e gli Standard della Comunicazione Alessandro Martinelli alessandro.martinelli@unipv.it 1 Aprile 2014 Architetture Web I Server Web e gli Standard della Comunicazione Il Server

Dettagli

Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1)

Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1) Cenni storici sul web (Internet) Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1) Web significa letteralmente ragnatela Avviato nel 1989 (Tim Berners-Lee) come

Dettagli

Elementi di web design (parte I): introduzione all HTML

Elementi di web design (parte I): introduzione all HTML Elementi di web design (parte I): introduzione all HTML Luca Casotti E' necessario conoscere: Filesystem: cos'è un file e cos'è una cartella. Differenze fra tipi di file (sui sistemi windows: le estensioni

Dettagli

Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio

Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio Dipartimento di Matematica Università di Bari Il linguaggio HTML p. 1/3 HTML L HTML è il linguaggio (di

Dettagli

Il linguaggio HTML - Parte 2

Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza

Dettagli

Esercizi di JavaScript

Esercizi di JavaScript Esercizi di JavaScript JavaScript JavaScript é un linguaggio di programmazione interpretato e leggero, creato dalla Netscape. E' presente a patire da Netscape 2 in tutti i browser ed é dunque il linguaggio

Dettagli

Infrastrutture INFormatiche Ospedaliere 2 Corso di laurea di Ingegneria Medica. Indice

Infrastrutture INFormatiche Ospedaliere 2 Corso di laurea di Ingegneria Medica. Indice Indice 4. XML Extensible Markup Language...2 4.1 Usi di XML...3 4.2 Caratteristiche di XML...3 4.3 Elementi...5 4.4 Attributi...5 4.4.1 Documento XML ben formato...6 4.5 Informazioni di controllo...6 4.5.1

Dettagli

INTRODUZIONE ALL HTML

INTRODUZIONE ALL HTML INTRODUZIONE ALL HTML LE REGOLE GENERALI Di seguito, sono raccolti i tag html (comandi) di uso più frequente per la formattazione dei testi e la gestione di una pagina web all interno del nostro sistema

Dettagli

Metodologie Informatiche Applicate al Turismo

Metodologie Informatiche Applicate al Turismo Metodologie Informatiche Applicate al Turismo 9. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze

Dettagli

Utilizzo dei CSS: regole

Utilizzo dei CSS: regole Tutorial per siti scolastici accessibili con editor web open source Utilizzo dei CSS: regole Adotta un template CSS - Regole pag. - 1 Autore Questa guida è stata realizzata da Gianfranco Bilotti e fa parte

Dettagli

Il Web, HTML e Java Corso di Laurea in Ingegneria Informatica Progetto S.C.E.L.T.E.

Il Web, HTML e Java Corso di Laurea in Ingegneria Informatica Progetto S.C.E.L.T.E. Il Web, HTML e Java Corso di Laurea in Ingegneria Informatica Progetto S.C.E.L.T.E. Università di Bologna Facoltà di Ingegneria Bologna, 08/02/2010 Outline Da applicazioni concentrate a distribuite Modello

Dettagli

XML: sintassi. Prof. Carlo Blundo Tecnologie di Sviluppo per il Web 1

XML: sintassi. Prof. Carlo Blundo Tecnologie di Sviluppo per il Web 1 XML: sintassi Prof. Carlo Blundo Tecnologie di Sviluppo per il Web 1 Cosa è XML 1 XML (Extensible Markup Language ) è un linguaggio di markup È stato progettato per lo scambio e la interusabilità di documenti

Dettagli

Esploriamo Javascript! 1 di Ivan Venuti

Esploriamo Javascript! 1 di Ivan Venuti Esploriamo Javascript! 1 di Ivan Venuti L Html è stato pensato (e creato) per presentare contenuti statici che, visualizzati da utenti diversi, diano sempre lo stesso risultato. Per sopperire a questa

Dettagli

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti EUROPEAN COMPUTER DRIVING LICENCE WEBSTARTER - Versione 1.5 Copyright 2009 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

b) Dinamicità delle pagine e interattività d) Separazione del contenuto dalla forma di visualizzazione

b) Dinamicità delle pagine e interattività d) Separazione del contenuto dalla forma di visualizzazione Evoluzione del Web Direzioni di sviluppo del web a) Multimedialità b) Dinamicità delle pagine e interattività c) Accessibilità d) Separazione del contenuto dalla forma di visualizzazione e) Web semantico

Dettagli

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web. I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come

Dettagli

Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine

Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine www.comune.udine.it relazione a cura di Fabrizio Chittaro fchittaro@gmail.com

Dettagli

Laboratorio di Programmazione Distribuita. Introduzione a HTML. Dott. Marco Bianchi Università degli Studi di L'Aquila

Laboratorio di Programmazione Distribuita. Introduzione a HTML. Dott. Marco Bianchi Università degli Studi di L'Aquila Laboratorio di Programmazione Distribuita Introduzione a HTML Dott. Marco Bianchi Università degli Studi di L'Aquila bianchi@di.univaq.it http://di.univaq.it/~bianchi Introduzione a HTML Introduzione a

Dettagli

I principali tag nella realizzazione di pagine web

I principali tag nella realizzazione di pagine web Ministero della Pubblica Istruzione Ufficio Scolastico Regionale per il Veneto Ufficio Scolastico Provinciale di Padova Area della comunicazione e web I principali tag nella realizzazione di pagine web

Dettagli

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER Il percorso Web Graphic Designer con Certificazione internazionale Adobe Dreamweaver prepara lo studente ad acquisire solide conoscenze per la figura professionale

Dettagli

Impianti di Elaborazione. Applicazioni e Servizi

Impianti di Elaborazione. Applicazioni e Servizi Impianti di Elaborazione Applicazioni e Servizi M.G. Fugini COMO IMPIANTI 08-09 Indice dei contenuti Servizi e risorse Internet (Telnet, FTP, Posta elettronica, News, Chat, Videoconferenza, ) World Wide

Dettagli

Le sezioni logiche di una pagina web

Le sezioni logiche di una pagina web Le sezioni logiche di una pagina web Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti. Strutturare logicamente i contenuti di una pagina, creare un template (modello)

Dettagli

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup)

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup) HTML Olga Scotti Cos è HTML Hypertext Markup Language non è un linguaggio di programmazione non ha meccanismi che consentono di prendere delle decisioni non è in grado di compiere delle iterazioni linguaggio

Dettagli

Corso di Informatica Generale 1 IN1. Linguaggio HTML

Corso di Informatica Generale 1 IN1. Linguaggio HTML Università Roma Tre Facoltà di Scienze M.F.N. Corso di Laurea in Matematica Corso di Informatica Generale 1 IN1 Linguaggio HTML Marco Liverani (liverani@mat.uniroma3.it) Sommario Breve cronologia del World

Dettagli

HTML CSS guida unica. htmlcss.it

HTML CSS guida unica. htmlcss.it HTML CSS guida unica htmlcss.it Accesso al web. 00.01 Dispositivi Il modo in cui tutti noi navighiamo il web è in costante evoluzione: console giochi, web TV, computer desktop, netbook, ma soprattutto

Dettagli

Scritto da Enrico Battuello Domenica 20 Febbraio 2011 13:30 - Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:39

Scritto da Enrico Battuello Domenica 20 Febbraio 2011 13:30 - Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:39 Nelle lezioni precedenti di questo tutorial abbiamo parlato di HTML5, abbiamo presentato alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio

Dettagli

Flavio De Paoli depaoli@disco.unimib.it

Flavio De Paoli depaoli@disco.unimib.it Flavio De Paoli depaoli@disco.unimib.it 1 Il web come architettura di riferimento Architettura di una applicazione web Tecnologie lato server: Script (PHP, Pyton, Perl), Servlet/JSP, ASP Tecnologie lato

Dettagli

Linguaggi per il web oltre HTML: XML

Linguaggi per il web oltre HTML: XML Linguaggi per il web oltre HTML: XML Luca Console Con XML si arriva alla separazione completa tra il contenuto e gli aspetti concernenti la presentazione (visualizzazione). XML è in realtà un meta-formalismo

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali

Dettagli

Architettura a tre livelli. Lo scenario e l ambiente. HTML - Hyper Text Markup Language. Enrico Cavalli. Anno Accademico 2012-2013

Architettura a tre livelli. Lo scenario e l ambiente. HTML - Hyper Text Markup Language. Enrico Cavalli. Anno Accademico 2012-2013 HTML - Hyper Text Markup Language Enrico Cavalli Anno Accademico 2012-2013 Lo scenario e l ambiente Architettura a tre livelli 1 Server 6 Web 2 5 3 Php 4 Database Server DB 1. Il browser richiede una pagina

Dettagli

Informatica di Base. Programma Lezioni

Informatica di Base. Programma Lezioni Informatica di Base Lezione III Il linguaggio HTML Hyper Text Markup Language 1 Informatica di Base Programma Lezioni 1 26 ottobre Introduzione Sistema binario e formato dei dati 2 2 novembre Numeri negativi

Dettagli

Elaborazione di documenti elettronici

Elaborazione di documenti elettronici Elaborazione di documenti elettronici Silvio Peroni speroni@cs.unibo.it http://creativecommons.org/licenses/by-sa/3.0 Sommario Documento, documento elettronico e codifica binaria Markup XML, HTML e fogli

Dettagli

Introduzione a XML: Document Type Definition; parser XML; XML-schema; extensible Stylesheet Language. a.a. 2004/05 Tecnologie Web 1

Introduzione a XML: Document Type Definition; parser XML; XML-schema; extensible Stylesheet Language. a.a. 2004/05 Tecnologie Web 1 Introduzione a XML: Document Type Definition; parser XML; XML-schema; extensible Stylesheet Language a.a. 2004/05 Tecnologie Web 1 XML - I XML (exstensible Markup Language): XML è un formato standard,

Dettagli

Esercizi. Introduzione all HTML. Il WWW

Esercizi. Introduzione all HTML. Il WWW Politecnico di Milano Esercizi Introduzione all HTML Il WWW Il World Wide Web: una rete di pagine connesse tra loro e distribuite su diverse macchine Il server Web contiene le pagine Web da visualizzare

Dettagli

Manuali.net. Nevio Martini

Manuali.net. Nevio Martini Manuali.net Corso base per la gestione di Siti Web Nevio Martini 2009 Il Linguaggio HTML 1 parte Introduzione Internet è un fenomeno in continua espansione e non accenna a rallentare, anzi è in permanente

Dettagli

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013 Corso di HTML Modulo L3 1-Concetti generali 1 Prerequisiti Browser Rete Internet Client e server 2 1 Introduzione In questa Unità introduciamo alcuni semplici elementi del linguaggio HTML, con il quale

Dettagli

, utilizzando il tasto destro

, utilizzando il tasto destro HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione (sono linguaggi di programmazione il C, il C++, il Pascal, il Java,

Dettagli

La struttura più esterna è quella che delimita l'intero documento ed è compresa tra i tag e

La struttura più esterna è quella che delimita l'intero documento ed è compresa tra i tag <html> e 1. Introduzione La multimedialità è la compresenza e interazione di più mezzi di comunicazione in uno stesso supporto o contesto informativo. Si parla di contenuti multimediali, specie in ambito informatico,

Dettagli

HTML. Alcuni contenuti di queste slides sono tratti dal testo:

HTML. Alcuni contenuti di queste slides sono tratti dal testo: HTML Alcuni contenuti di queste slides sono tratti dal testo: Vito Roberto, Marco Frailis, Alessio Gugliotta, Paolo Omero Introduzione alle Tecnologie Web MCGraw Hill, 2005 1 HTML HyperText Markup Language

Dettagli

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language HTML 05/04/2012 1 Introduzione Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language L'ipertesto è semplicemente un testo che funziona

Dettagli

La struttura: DTD. Laura Farinetti Dip. Automatica e Informatica Politecnico di Torino. laura.farinetti@polito.it

La struttura: DTD. Laura Farinetti Dip. Automatica e Informatica Politecnico di Torino. laura.farinetti@polito.it La struttura: DTD Laura Farinetti Dip. Automatica e Informatica Politecnico di Torino laura.farinetti@polito.it L. Farinetti - Politecnico di Torino 1 Modello di struttura I tag annidati danno origine

Dettagli

PROGRAMMA DI INFORMATICA CLASSE: 1 C Indirizzo: AMMINISTRAZIONE FINANZA E MARKETING Anno Scolastico 2014-2015

PROGRAMMA DI INFORMATICA CLASSE: 1 C Indirizzo: AMMINISTRAZIONE FINANZA E MARKETING Anno Scolastico 2014-2015 CLASSE: 1 C Indirizzo: AMMINISTRAZIONE FINANZA E MARKETING MODULO HARDWARE 1. Che cos è il PC - Gli elementi del computer- Unità centrale:uc-alu- RAM - La memorizzazione delle informazioni:bit-byte. Sistemi

Dettagli

LEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...

LEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività... LEZIONI DI HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... FORMATTARE IL CARATTERE Per formattare titoli interni del documento web possiamo utilizzare i tag , ,...,

Dettagli

PROGRAMMA DEL CORSO MASTER WEB DEVELOPER

PROGRAMMA DEL CORSO MASTER WEB DEVELOPER PROGRAMMA DEL CORSO MASTER WEB DEVELOPER Il corso Master Web Developer con Certificazione internazionale Adobe Dreamweaver prepara lo studente a entrare nel mondo dello sviluppo Web (blog, siti, portali).

Dettagli

HTML. http://www.w3schools.com/html/default.asp

HTML. http://www.w3schools.com/html/default.asp HTML http://www.w3schools.com/html/default.asp HTML Cosa è l'html? HTML è un linguaggio per descrivere le pagine web. HTML è l'acronimo di H yper T ext M arkup L anguage HTML è un markup language Un linguaggio

Dettagli

Relazione sulla verifica accessibilità

Relazione sulla verifica accessibilità Relazione sulla verifica accessibilità Sito web: www.comune.stresa.vb.it Premessa Il presente rapporto e l effettiva attività di controllo requisiti per l accessibilità, sono stati effettuati seguendo

Dettagli

IL WEB. Il linguaggio HTML

IL WEB. Il linguaggio HTML IL WEB Il World Wide Web (o web o WWW) nasce al CERN come strumento a disposizione degli scienziati per la condivisione di informazioni utili per la ricerca. Ben presto l uso del web si estende dal mondo

Dettagli

Disegnare il Layout. www.vincenzocalabro.it 1

Disegnare il Layout. www.vincenzocalabro.it 1 Disegnare il Layout www.vincenzocalabro.it 1 Il problema dell interfaccia Una buona interfaccia deve assolvere a diverse funzioni: far percepire i contenuti permettere di individuare le principali aree

Dettagli