Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
VIQ - Laboratorio 3
===================
*16 aprile 2020*
### Obiettivi:
1. Comprendere la struttura dell'HTML
2. Comprendere il funzionamento degli elementi
3. Costruire una pagina HTML
### Strumenti:
- Browser (consigliato: Google Chrome)
- Editor (consigliato: [WebStorm](https://www.jetbrains.com/webstorm/))
Per avviare WebStorm ed effettuare il checkout del progetto dal repository personale fare riferimento al [tutorial](https://oop.polito.it/VIQ/Git.html).
Esercizio 1
-----------
Un Curriculum Vitæ (CV) riporta le principali informazioni personali.
Una possibile struttura è la seguente:
- Informazioni personali: riporta nome, cognome, data di nascita, indirizzo, email, telefono.
- Esperienze lavorative: elenco delle esperienze lavorative in ordine cronologico inverso.
- Istruzione e formazione: titoli di studio conseguiti (in ordine cronologico inverso).
- Competenze: conoscenze tecnologiche specifiche.
- Altri interessi: riporta gli interessi personali e gli hobby che permettono di avere un'idea più completa del soggetto.
**Task**
Utilizzando l'editor HTML di WebStorm modificare il file `curriculum.html` in modo che contenga il proprio CV (o una versione semplificata), secondo la struttura sopra illustrata.
Iniziare con una versione semplice per poi creare versioni successive che usino ulteriori elementi. È possibile realizzare un file HTML diverso per ogni versione, creando una copia di quello precedente e modificando quest'ultimo in modo incrementale.
1. Semplice testo, utilizzare:
- heading `h1`, `h2` per introdurre le sezioni;
- scrivere le informazioni in elementi `p`.
2. Strutturato, utilizzare:
- `header` per racchiudere il titolo principale;
- `footer` per luogo e data in fondo;
- `section` per ogni sezione della struttura (con gli heading all'interno);
- delle liste per le singole informazioni.
3. Tabellare, utilizzare:
- delle tabelle (a due colonne) per organizzare le informazioni nelle singole sezioni.
4. Contenuti, inserire:
- una tavola dei contenuti all'inizio del file con dei link alle diverse sezioni del CV.
Per fare questo è necessario definire un parametro `id` in ciascun elemento `<section>` e poi inserendo (all'inizio del documento) dei link del tipo `<a href="#id-univoco">Nome della sezione</a>`.
I link possono essere organizzati usando:
- una lista;
- dei link all'interno di un elemento `<nav>`.
Esercizio 2
-----------
**Dataset**
Utilizzare i dati del secondo grafico del primo esercizio del laboratorio 2; i dati sono disponibili nel file [Lab2\_1\_sol.xlsx](https://git-softeng.polito.it/viq-2020/lab-2/raw/master/Lab2_1_sol.xlsx).
**Task**
Costruire una pagina HTML (aggiungendo un nuovo file HTML al progetto dell'esercizio precedente) che riporti l'andamento delle vendite di auto per marchio.
- Inserire il grafico come immagine.
- È necessario salvare il grafico da Excel come immagine:
1. *Save as picture*/*Salva come immagine* dal menù di contesto (click destro) dell'immagine; provare i diversi formati (png, jpg) e confrontarli.
2. *Copia e incolla* in PowerPoint e poi successivamente salvataggio come immagine, utilizzare le opzioni per scegliere le dimensioni dell'immagine.
- Inserire i dati come tabella:
1. Con un copia ed incolla e con la formattazione a mano.
2. Scrivendo una formula in Excel per generare direttamente il contenuto HTML.
**Suggerimento**: `="<tr><td>" & A4 & "</td><td>" & B4 & "</td></tr>"`.
3. Tramite un servizio online come [TABLEIZER!](http://tableizer.journalistopia.com) o [Tables Generator](http://www.tablesgenerator.com/html_tables).
4. Salvando il foglio Excel come pagina web e copiando il codice HTML.
Esercizio 3
-----------
**Dataset**
Si legga il post [Quanto spende lo Stato per l’educazione e la cultura? Italia maglia nera in Europa per l’istruzione (7,9% del Pil)](http://www.infodata.ilsole24ore.com/2016/03/31/quanto-spende-lo-stato-per-leducazione-e-la-cultura-italia-maglia-nera-in-europa-per-listruzione-79-del-pil/) e si consideri il grafico [treemap](https://en.wikipedia.org/wiki/Treemapping).
**Task**
Utilizzando i dati di Eurostat creare uno o più grafici (in Excel) con l'obiettivo di spiegare qual è la spesa pubblica per il capitolo Istruzione in Italia rispetto al resto dell'Europa. Incorporare la visualizzazione in una pagina HTML fornendo le opportune spiegazioni.
1. Provare ad utilizzare il link fornito nell'articolo.
2. Utilizzare il seguente [bookmark](http://appsso.eurostat.ec.europa.eu/nui/show.do?query=BOOKMARK_DS-471197_QID_-447CA314_UID_-3F171EB0&layout=COFOG99,L,X,0;GEO,L,Y,0;UNIT,L,Z,0;SECTOR,L,Z,1;NA_ITEM,L,Z,2;TIME,C,Z,3;INDICATORS,C,Z,4;&zSelection=DS-471197UNIT,PC_GDP;DS-471197SECTOR,S13;DS-471197INDICATORS,OBS_FLAG;DS-471197TIME,2014;DS-471197NA_ITEM,TE;&rankName1=TIME_1_0_-1_2&rankName2=UNIT_1_2_-1_2&rankName3=SECTOR_1_2_-1_2&rankName4=INDICATORS_1_2_-1_2&rankName5=NA-ITEM_1_2_-1_2&rankName6=COFOG99_1_2_0_0&rankName7=GEO_1_2_0_1&rStp=&cStp=&rDCh=&cDCh=&rDM=true&cDM=true&footnes=false&empty=false&wai=false&time_mode=NONE&time_most_recent=false&lang=EN&cfo=%23%23%23%2C%23%23%23.%23%23%23).