Milestone 2: CSS

Per il progetto si implementerà un piccolo social network semplificato, che permetta agli utenti di stringere amicizie e di creare e gestire dei gruppi. Si avranno due tipologie di utenti: Utenti registrati, che possono inserire informazioni personali, stringere amicizia con altri utenti, creare e gestire dei gruppi, inserire post nella sua bacheca o quella degli amici. L’amministratore, che può cancellare i post da qualsiasi bacheca e cancellare qualsiasi gruppo. Maggiori informazioni si possono trovare nella pagina di descrizione del progetto 2017.

Per questa milestone dovete creare il layout grafico per il vostro sito web. Regole: Non si possono usare librerie di terze parti per la creazione del layout (es. bootstrap). Sono già convinto che quelli che hanno scritto le librerie siano bravi, io devo valutare voi. Potete modificare l’HTML delle pagine della milestone precedente. Prima di farlo però chiedetevi se sia strettamente necessario e, soprattutto, attenzione alla semantica del documento.

Task 1

Creare nel progetto Netbeans utilizzato per la scorsa milestone una nuova cartella di nome “M2” all’interno di “Web Pages”. Copiare le pagine create per la milestone precedente nella cartella M2.

Task 2

Creare un file di nome style.css all’interno della cartella M2. Collegare ognuna delle pagine al foglio di stile.

Task 3

Impostare le caratteristiche generali di visualizzazione della pagina, facendo in modo che le regole che scrivete valgano per tutte le pagine. In particolare: Colore di sfondo Colore e font per il del testo Proprietà dei dei titoli (almeno da h1 ad h3) Proprietà dei link Visualizzazione dei campi di input Fate attenzione alla leggibilità ed alla gradevolezza degli stili.

Task 4

Scrivere delle regole CSS che permettano alla struttura della pagina bacheca.html di essere visualizzata come nella seguente figura. In particolare:

• Avete libertà sui colori e tipi di font. Non è quindi necessario che sia in bianco e nero, quello che vedete è solo una bozza. Gli stili che vedete sono anzi sconsigliati (per esempio il font è bruttissimo).
• Vi viene richiesto di individuare quelle che nella bozza sarebbero immagini decorative (da non inserire nell’HTML) dalle immagini che portano informazione. Le immagini decorative devono essere inserite in modo opzionale tramite CSS (cioè se lo fate correttamente vi daremo uno 0.1 in più, se non lo fate potete prendere comunque il massimo). Qualsiasi sia la vostra scelta, vi viene richiesto di isolare le regole in fondo al file CSS ed inserire un breve commento dove spiegate perché alcune immagini siano decorative e perché le altre non lo siano.
• Non considerate il form di ricerca e quello per l’inserimento di un nuovo post per i il momento

Task 5

Rendere il form per la login ed il form per l’inserimento dei dati personali gradevoli dal punto di vista estetico, utilizzando le bozze in figura (stesse indicazioni del task 6). In particolare: Fare in modo che le label ed i campi di input siano allineati. Impostare bordi e colori per i campi di input, in particolare per il focus Rendere i pulsanti individuabili e gradevoli, posizionandoli al centro dello spazio riservato al form (oppure in altre posizioni a scelta, che siano però gradevoli e coerenti per i due form). Riutilizzate il più possibile gli stessi stili per entrambi i form Per il momento, non considerate la barra di ricerca.

Login

Profilo

Task 6

Create un layout responsive, da utilizzare per tutte le pagine. In particolare considerate tre configuazioni: Per larghezze maggiori o uguali a 1024px utilizzare un layout a due colonne Per larghezze minori o uguali a 480px utilizzare un layout ad una sola colonna Per quelli intermedi utilizzare massimo due colonne. Posizionare i vari contenuti nella posizione ritenuta più appropriata.

Task 7

Eseguite il commit finale su Git Hub per la consegna, utilizzando come messaggio “consegna M2”