Skip to content

Commit

Permalink
Update mhw1.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@cspampin
cspampin authored Mar 14, 2024
1 parent 526e462 commit 9d08f97
Showing 1 changed file with 43 additions and 50 deletions.
93 changes: 43 additions & 50 deletions mhw1.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,61 +4,54 @@ layout: page

## Mini-homework 1

In questo MHW, utilizzerete le nozioni di HTML e CSS che abbiamo visto a lezione per creare la home page del vostro progetto.
In questo MHW, sceglierete l'idea progettuale che seguirete per tutti gli esercizi successivi.
L'idea deve essere ispirata ad un sito web esistente; il sito non deve essere troppo complesso, perché l'obiettivo è che nell'ultimo esercizio del corso siate in grado di replicarne
le funzionalità principali, gestendo sia il lato client che il lato server. Ad esempio, le seguenti tipologie di sito web potrebbero essere adatte:
- blog o magazine online;
- social network;
- ristorazione;
- e-commerce;
- gestione di eventi (es. concerti).

Il primo MHW consiste quindi nella replicazione dell'aspetto della pagina web principale del sito scelto, usando solamente HTML e CSS.
In particolare, i requisiti di questo esercizio sono:
- utilizzare layout Flexbox;
- utilizzare specifici elementi HTML:
- `nav`, `header`, `article`, `section`, `footer`;
- realizzare overlay di testo su immagini;
- utilizzare specifiche proprietà CSS:
- layout e sfondo: `margin`, `padding`, `height`, `position`, `border`, `border-radius`, `background-color`;
- font: `font-weight`, `font-style`, `font-family`, `font-size`, `color`, `line-height`;
- utilizzare almeno un font da Google Fonts;
- utilizzare media query per adattare la pagina a dispositivi mobile.

### Consegna

Per partecipare a questo MHW, è **obbligatorio** comunicarci preventivamente (entro i primi 5 giorni dall'assegnazione del MHW) il sito web che intendete replicare, attraverso questo [form](https://forms.gle/UdThfPuiYCLveCkJ6).

La consegna del MHW dovrà essere effettuata sul vostro repository GitHub e dovrà includere:
* i file `mhw1.html`, `mhw1.css` e le immagini da inserire nella pagina;
* una presentazione in PowerPoint, `mhw1.pptx`, che descrive l'implementazione e le specifiche utilizzate nella pagina.
- i file `mhw1.html`, `mhw1.css` e le immagini da inserire nella pagina;
- una presentazione in PowerPoint, `mhw1.pptx`, che riporta l'URL del sito web di riferimento e uno screenshot della pagina che si è cercato di replicare.

**Importante**: i file devono essere caricati direttamente nella cartella principale del repository, non in sottocartelle né in file compressi (es. zip). Inoltre, il nome del repository **deve essere testualmente `mhw1`**, non `MHW1` o `minihomework1` o qualunque altra cosa.
**Importante**: i file devono essere caricati direttamente nella cartella principale del repository, non in sottocartelle né in file compressi (es. zip).
Inoltre, il nome del repository **deve essere testualmente `mhw1`**, non `MHW1` o `minihomework1` o qualunque altra cosa.

### 1. Aspetto generale

La struttura della pagina è a vostra scelta, ma dovrà contenere i seguenti elementi:
* una **intestazione (header)** con il titolo della pagina e un'immagine di sfondo;
* un **menù di navigazione**, disposto orizzontalmente in alto o verticalmente a lato, contenente dei link alle altre sezioni del sito (non è necessario che le pagine a cui fanno riferimento i link esistano);
* una sezione di **contenuti**, che rappresenta il corpo principale della pagina. Questa sezione dovrà essere a sua volta divisa in "blocchi" di informazione (da disporre a vostro piacere utilizzando Flexbox), specifiche per il vostro progetto di sito (es., se si tratta di un quotidiano inline, ogni blocco può rappresentare una notizia; se si tratta di un'agenzia di viaggi, ogni blocco può rappresentare un volo o una prenotazione);
* un **footer** che contiene informazioni sulla pagina (tra cui nome, cognome, matricola).

[A questo link](imgs/mhw1_esempio.png) un esempio di visualizzazione della pagina completa.

### 2. Misure delle sezioni

Stabilite in dettaglio la disposizione delle sezioni del sito (header, menù di navigazione, contenuti, blocchi all'interno dei contenuti, footer) e le distanze tra i diversi elementi della pagina. Illustrate il vostro progetto nella presentazione in maniera analoga a quanto vedete in questa immagine:

![](imgs/specs.png)

È richiesto l'uso delle seguenti proprietà CSS: `margin`, `padding`, `height`, `position`, `border`, `border-radius`, `background-color`.

### 3. Caratteri, dimensioni e colori

Definite il carattere, il colore e la dimensione del testo in ciascuna delle sezioni della pagina definite in "Aspetto generale". Se i blocchi di contenuto sono a loro volta divisibili in sotto-parti, usate uno stile diverso per ciascuna.

Per ogni sezione di testo, definite tramite CSS:
* un carattere principale (da Google Fonts) e un carattere di riserva (non da Google Fonts);
* la dimensione del testo;
* lo stile del testo;
* il colore del testo;
* l'allineamento rispetto al contenitore.

E' richiesto l'uso delle seguenti proprietà CSS: `font-weight`, `font-style`, `font-family`, `font-size`, `color`, `line-height`.

### 4. Immagini

L'intestazione ha un'immagine di sfondo, che non si ripete. Al di sopra dell'immagine vi è un overlay semitrasparente, di colore `rgba(0, 0, 0, .3)`.

La sezioni dei contenuti deve contenere un'immagine per ogni "blocco" di informazione.


## Altre specifiche HTML e CSS
### Altre specifiche

Per una piena valutazione, rispettate le seguenti specifiche:

- **Utilizzate l'HTML e il CSS che abbiamo visto a lezione.** Non utilizzate codice HTML/CSS che non abbiamo studiato, a meno che non vi sia una valida motivazione, da giustificare nella presentazione. Non utilizzate librerie aggiuntive (es. Bootstrap).
- **Nota:** qualora riscontriate problemi relative all'ordine con cui certi elementi si sovrappongono (ad es., l'overlay e il testo dell'header; oppure l'header e l'immagine di profilo), utilizzate la proprietà [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
- **Non usate JavaScript**. Non è necessario usare JavaScript in questo homework.
- **Rispettate la separazione delle responsabilità**. Il vostro codice HTML deve descrivere il contenuto e la struttura della pagina, e il vostro codice CSS deve descrivere l'aspetto della pagina.
- **Mobile web**. Aggiungete opportunamente il codice HTML e CSS necessario affinchè il sito sia fruibile da dispositivi mobili (effettuate i test tramite il _device mode_ di Google Chrome).
- **Seguite le linee guida** che abbiamo presentato durante le lezioni.
- **Minimizzate la ridondanza nel CSS.** Cercate di non avere regole di stile ridondanti, se c'è il modo di sfruttare l'ereditarietà o la specificità.
- **Usate nomi descrittivi, indentate il codice,** e in generale seguite le buone norme relativa alla programmazione.
- **Utilizzate l'HTML e il CSS che abbiamo visto a lezione.**
Non utilizzate codice HTML/CSS che non abbiamo studiato.
Non utilizzate librerie aggiuntive (es. Bootstrap).
- **Nota:** qualora riscontriate problemi relativi all'ordine con cui certi elementi si sovrappongono
(ad es., l'overlay e il testo dell'header; oppure l'header e l'immagine di profilo),
utilizzate la proprietà [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
- **Non usate JavaScript**.
- **Rispettate la separazione delle responsabilità**.
Il vostro codice HTML deve descrivere il contenuto e la struttura della pagina, e il vostro codice CSS deve descrivere l'aspetto della pagina.
- **Mobile web**. Aggiungete opportunamente il codice HTML e CSS necessario affinchè il sito sia fruibile da dispositivi mobili
(effettuate i test tramite il _device mode_ di Google Chrome).
- **Seguite le linee guida** che abbiamo presentato durante le lezioni.
- **Minimizzate la ridondanza nel CSS.** Cercate di non avere regole di stile ridondanti, se c'è il modo di sfruttare l'ereditarietà o selettori appropriati.
- **Usate nomi descrittivi, indentate il codice,** e in generale seguite le buone norme relativa alla programmazione.

0 comments on commit 9d08f97

Please sign in to comment.