Esame di Web Design & Technologies (Marco Porta)

Transcript

1 Università degli Studi di Pavia Corso di Laurea Interfacoltà in Comunicazione,Innovazione,Multimedialità Esame di Web Design & Technologies (Marco Porta) Appello del gg/mm/aa 1 Cognome Nome Matricola (solo per chi ha frequentato STM A/B negli anni passati: A.a. 2009/10 A.a. 2008/09 A.a. 2007/08 ) Si risponda alle seguenti domande, giustificando sempre le risposte. Il presente foglio deve essere consegnato piegato a metà in modo che questa facciata sia la copertina. In caso di mancanza di spazio, si può usare la brutta (che va in ogni caso consegnata) ed eventuali fogli aggiuntivi (da chiedere), facendo attenzione a riportare su ognuno di essi i propri dati e i numeri delle domande 1. Per ognuna delle seguenti affermazioni, si dica se è vera o falsa, giustificando la risposta: (4) a. Il servizio Telnet viene usato per il trasferimento di file b. L utilizzo di un firewall rende superfluo il meccanismo della firma digitale c. Il protocollo TCP/IP utilizza sempre la commutazione di circuito d. L XHTML è un HTML con molti più tag e. Il multicasting è utile nella distribuzione di contenuti multimediali f. Un sito dinamico è un sito che contiene animazioni g. Gli effetti rollover sono creati con tecnologie lato client h. Le applet Java e i programmi CGI sono tecnologie simili

2 2. Dato il seguente codice HTML/CSS, si fornisca una rappresentazione grafica qualitativa che si avvicini il più possibile all aspetto della pagina web risultante (come visualizzata dal browser): (4,5) <html> <head> <title>cim</title> <style type="text/css"> #intestazione { background-color: lightgreen; height: 70px; #contenuto { margin-left: 200px; #menu { width: 190px; background-color: yellow; position: absolute; top: 70px; left: 0px; </style> </head> <body> <div id="intestazione"><h1>comunicazione, Innovazione, Multimedialità</h1></div> <div id="contenuto"> <table border="1" cellpadding="15" width="50%" align="center"> <tr> <td colspan="2"> Il Corso di Laurea in <em>comunicazione, Innovazione, Multimedialità</em> (CIM) è un Corso di Laurea interfacoltà. </td> </tr> <tr> <td><img src="/loghi/logocim.gif" width="100" height="100" alt="logo CIM" /></td> <td> Si deve scegliere CIM se nella propria vita c'è il desiderio motivato di lavorare nei media nuovi o più tradizionali </td> </tr> </table> </div> <div id="menu"> <ul> <li><a href="descrizioni/cl/eco.html">economia</a></li> <li><a href="descrizioni/cl/giuri.html">giurisprudenza</a></li> <li><a href="descrizioni/cl/ing.html">ingegneria</a></li> <li><a href="descrizioni/cl/let.html">lettere</a></li> <li><a href="descrizioni/cl/sp.html">scienze Politiche</a></li> </ul> </div> </body> </html>

3 3. Si risponda alle seguenti domande: (1,5) a) Dove si trova, rispetto alla directory contenente il file HTML definito al punto 2, il file eco.html? b) Sempre relativamente al file del punto 2, supponendo che l amministratore del web server abbia definito come directory di root C:\web\www, qual è il percorso (cioè la posizione effettiva) del file logocim.gif sulla macchina? (c:\ ) c) Come si definisce l intestazione di un form di nome mioform, che, usando il metodo get, invia i dati al programma CGI elabora.tcl (con percorso assoluto /cgi-bin/)? a. b. c. 4. Si vuole definire un foglio di stile esterno, di nome st.css, che specifichi che: (1) la pagina deve avere un font di tipo Arial (in alternativa sans-serif), uno sfondo bianco e un margine sui quattro lati pari a una volta e mezza la dimensione di default del font; (2) la classe grassetto per l elemento <p> deve essere caratterizzata da testo in grassetto (valore bold per la proprietà font-weight). Si indichino (in modo chiaro): (a) il contenuto del CSS e (b) le modifiche da apportare al codice HTML affinché il foglio di stile venga caricato nella pagina [1] e un tag <p> sfrutti le caratteristiche della classe grassetto [2] (2) Contenuto CSS Modifiche file HTML Dato il seguente flow-chart, si indichi il valore finale delle variabili q, r e x, specificando i valori intermedi che esse assumono. Quale algoritmo viene descritto? (2) x = 32 y = 9 q = 0 x = x - y q = q + 1 No x < 0 Sì r = x + y q =? r =? x =?

4 6. Per la creazione del sito di una facoltà universitaria, si vuole usare l XML per modellizzare l entità corso di laurea, a parole così descritta: Un corso di laurea è caratterizzato da un nome, un tipo (triennale o specialistica) e da un elenco di corsi (insegnamenti). Ogni corso è caratterizzato da un nome, da un anno (1, 2, ecc.), da un trimestre (1, 2, 3 o 4 ), e da un docente. Ogni docente può avere uno o più collaboratori. Si definiscano dei tag e degli attributi opportuni in grado di caratterizzare l entità, e si usino poi per rappresentare il corso di laurea triennale in Scienze Matematico Letterarie, che include, tra gli altri, i seguenti corsi: Fondamenti di letteratura algebrica (del 1 anno, 2 trimestre, con docente Giovanni Rossi, che si avvale della collaborazione di Mario Bianchi ), Linguistica algoritmica (del 2 anno, 1 trimestre, con docente Roberto Verdi, che si avvale della collaborazione di Angelo Marrone e Luisa Bruni ), Romanticismo ed equazioni differenziali (del 3 anno, 4 trimestre, con docente Marco Gialli, senza collaboratori). Si applichino direttamente i tag e gli attributi identificati all esempio, e solo poi, eventualmente, si definisca un DTD (4)

5 Università degli Studi di Pavia Corso di Laurea Interfacoltà in Comunicazione,Innovazione,Multimedialità Esame di Web Design & Technologies (Marco Porta) Appello del gg/mm/aa 2 Cognome Nome Matricola Si risponda alle seguenti domande, giustificando sempre le risposte. Il presente foglio deve essere consegnato piegato a metà e inserito nel foglio 1. In caso di mancanza di spazio, si può usare la brutta (che va in ogni caso consegnata) ed eventuali fogli aggiuntivi (da chiedere), facendo attenzione a riportare su ognuno di essi i propri dati e i numeri delle domande 7. Dato il seguente codice HTML/JavaScript, si indichi sinteticamente (ma in modo chiaro) il significato di ogni riga contrassegnata da un numero. Si descriva poi brevemente il comportamento generale della pagina (3) <html> <head> <title>una pagina con codice JavaScript</title> <style> body { background: white; </style> <script type="text/javascript"> 1. col = new Array(3); col[0] = "red"; col[1] = "yellow"; col[2] = "white"; 2. function cs(i) { 3. document.body.style.background = col[i]; if ( i!= 2 ) document.f.visualizza.value = col[i]; else document.f.visualizza.value = ""; </script> </head> 4. <body onload="alert('benvenuti! Qui si sperimenta JavaScript!')"> <form name="f"> Colore: <input type="text" name="visualizza" readonly size="20" /> </form> <table width="300" height="100"> <tr> <td style="background-color: red" onmouseover="cs(0)"></td> <td style="background-color: yellow" onclick="cs(1)"></td> </tr> </table><br /> <a href="javascript:cs(2)">reset</a><br /> </body> </html>

6 Comportamento generale della pagina 8. Si vuole utilizzare il seguente form come interfaccia per la conversione da Euro a Lire e viceversa. In pratica, si vuole che quando l utente inserisce un valore (che si suppone numerico) in uno dei due campi Euro o Lire, e poi clicca da un altra parte (ad esempio, ma non necessariamente, preme il bottone Converti), nell altro campo appaia il valore corrispondente (si ricordi che 1 Euro = Lire). Si definiscano opportune funzioni JavaScript (da supporre nella sezione HEAD della pagina) che permettano di raggiungere lo scopo, e si completino la parti mancanti (i valori degli attributi onchange) degli input testuali (1,5)... <form name="convform"> Euro <input type="text" name="euro" size="15" onchange=" " /> Lire <input type="text" name="lire" size="15" onchange=" " /><br /><br /> <input type="button" value="converti" /> </form> In una certa zona di una pagina Web c è l immagine di un gatto; dopo 10 secondi esatti dal caricamento della pagina appare l immagine di un cane (che rimane poi fissa). Cliccando su ciascuna immagine viene aperta una pagina corrispondente. Si dica in modo chiaro, giustificando le risposte, quali tecnologie, tra quelle elencate di seguito, possono essere utilizzate per raggiungere lo scopo, da sole o eventualmente in combinazione tra loro (2) HTML CSS JavaScript Java GIF animate Flash CGI PHP / ASP

7 10. Avendo come obiettivo la minimizzazione della dimensione del file ottenuto, si dica, giustificando la risposta, se per l implementazione dell'animazione descritta di seguito è meglio utilizzare un approccio bitmap, un approccio vettoriale, o non c è sostanziale differenza tra i due (1,5) Fotografia di un cane che si muove circolarmente (una sola volta) Bit. Vett. Indiff. 11. Qual è la funzione del DNS all interno di una rete locale? (2) 12. Possono XML e HTML essere messi sullo stesso piano? E corretto dire che lo scopo dell XML è quello di permettere una visualizzazione più sofisticata dei dati? (2) 13. Cosa sono gli application server? Quali sono i loro utilizzi tipici? (2)