Informazioni sull'esame scritto

Keywords: domande, argomenti, durata, modalità

Esercizio precedente Esercizio successivo

L'esame scritto di Tecnologie Web viene svolto in aula informatica utilizzando i computer del dipartimento. Si ha accesso alle slide, a MDN e a Bootstrap. Viene reso disponibile un editor per file html, js etc.

All'esame verranno consegnati un file .pdf e un file .txt, il primo con le domande e il secondo editabile per poter aggiungere le risposte

Alla consegna vengono caricati il file risposte.txt ed eventuali file aggiuntivi se richiesti dal test (e.g. immagini, file html etc).

L'esame consiste di 4 parti, per un totale di 34 punti:

  1. Domande di base: 6 punti (CSS, HTML, HTTP, URI, Codifica caratteri, Semantic Web, Accessibilità
  2. HTML + CSS: 10 punti
  3. JS: 12 punti
  4. Framework: 6 punti

Domande di base

Le domande di base consistono in domande aperte o chiuse di teoria. Ad esempio:

UTF-8

  • help (inglese) (=> 4 byte)
  • hulp (olandese) (=> 4 byte)
  • ayuda (spagnolo) (=> 5 byte)
  • Unterstützung (tedesco) (=> 14 byte)
  • βοήθεια (greco) (=> 14 byte)

CSS

Si descriva a parole il significato del selettore 

body div:not(:first-child):not(:last-child) > span:nth-of-type(2)
e si elenchino gli id degli elementi selezionati se applicato al seguente HTML:

<body>
  <div id="el1">
    <h1 id="el2">Lorem Ipsum</h1>
    <span id="el3">Lorem ipsum dolor sit amet</span>
    <span id="el4">Lorem ipsum dolor sit amet</span>
    <button class="btn btn-primary" id="el5">Lorem Ipsum</button>
  </div>
  <div class="container" id="el6">
    <span id="el7">Lorem ipsum dolor sit amet</span>
    <span id="el8">Lorem ipsum dolor sit amet</span>
    <div class="row" id="el9">
    <div class="col-sm-4" id="el10">
      <p id="el11">Lorem ipsum dolor sit amet</p>
    </div>
    <div class="col-sm-8" id="el12">
      <p id="el13">Lorem ipsum dolor sit amet</p>
    </div>
    </div>
  </div>
  <div id="el14">
    <span id="el15">Lorem ipsum dolor sit amet</span>
    <span id="el16">Lorem ipsum dolor sit amet</span>
  </div>
</body>

Risposta esempio:

  1. body seleziona l'elemento <body> del documento.
  2. div:not(:first-child):not(:last-child) seleziona tutti gli elementi
    che non sono il primo figlio né l'ultimo figlio dei rispettivi genitori.
  3. > seleziona gli elementi che sono figli diretti dell'elemento precedente.
  4. span:nth-of-type(2) seleziona il secondo elemento <span> all'interno del suo genitore.
  5. Quindi, nel contesto dell'HTML fornito, il selettore body div:not(:first-child):not(:last-child) > span:nth-of-type(2) selezionerà l'elemento con l'id "el8".

JS

Qual è la differenza tra le dichiarazioni di variabili `let`, `var` e `const` in Javascript? Quando è opportuno utilizzare ciascuno di essi?

Risposta esempio: Una variabile dichiarata con let può essere modificata successivamente assegnandole un nuovo valore, ma il suo scope è di blocco (ovvero, le modifiche apportate in un blocco sono limitate a quel blocco). Una var invece è una variabile con scope di funzione o globale, può essere modificata sia dentro che fuori un blocco e il suo valore è pari all'ultima modifica apportata. Una const invece è una variabile di blocco. Il valore di una variabile const rimane costante durante l'esecuzione del programma.

Le altre domande sono sulla teoria, e possono andare da HTTP (e.g. cos'è un header in una risposta? Cos'è il protocollo TCP-IP?)

HTML+CSS

In questa domanda vi verrà richiesto di scrivere il codice necessario per ricreare un certo layout, pagina html etc. Alla richiesta è allegato uno screenshot di una pagina web, di una sua sezione etc. Possono essere utilizzati HTML, CSS e Bootstrap per ricrearlo. Ad esempio:

Questo esempio è un caso limite: qui basterà ricreare lo sfondo con un'immagine quadrata al centro, il testo al centro con un bottone a fianco, etc. NON E' NECESSARIO UN RAPPORTO 1:1 CON L'IMMAGINE DI ESEMPIO. Le richieste saranno più o meno complesse rispetto al resto degli esercizi. Potrebbe anche solo venirvi richiesto di fare una semplicissima animazione con CSS, centrare un div correttamente con dentro un certo contenuto etc. Vedi la lezione sulle animazioni per un esempio più probabile.

JS

La domanda richiederà di fare un certo esercizio con JS. Ad esempio, una richiesta ad un'API con relativo return di un elemento HTML con i dati all'interno, molto simile all'esercizio sulla Open Weather API.

Framework

Per l'esercizio 4 è invece obbligatorio utilizzarne uno. Si suppone che uno scelga il framework che meglio conosce. Lo spazio di partenza è sempre quello "standard" per iniziare un nuovo progetto con un framework, e.g. lanciando dal terminale:

  • npx create-react-app my-app
  • npx degit sveltejs/template my-app
  • npm init vue@next my-app
  • npx @angular/cli new my-app
  • ...

La consegna richiede il risultato finale; non da precise istruzioni su cosa deve accadere, data la variabilità tra i diversi framework di implementazione. Non viene fornito durante l'esame l'ambiente di sviluppo. Non bisogna scrivere il codice di tutto il progetto ovviamente. Si può fare largo uso di commenti per spiegare il contesto. Bisogna limitarsi al singolo componente.

Esempio domanda:

Crea un componente che ritorna un bottone; quando cliccato, il bottone aggiunge un +1 ad una variabile che viene mostrata

Risposta tipo:

const CounterButton = ({ initialCount }) => { 
  const [count, setCount] = useState(initialCount || 0); 
  const handleClick = () => { 
    setCount(count + 1); 
  }; return ( 
    <button onClick={handleClick}> Count: {count}</button> ); 
  };

Può anche non essere iper preciso, l'importante è che sia per la maggior parte corretto l'approccio. Il Framework è sempre a scelta.

© Andrea Schimmenti & Fabio Vitali. TW 2022-2023.