-
Notifications
You must be signed in to change notification settings - Fork 0
/
doc.html
113 lines (93 loc) · 9.05 KB
/
doc.html
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="stylesheet" href="css/style.css">
<title>Documentazione</title>
</head>
<body>
<section class="documentation_text">
<h1 class="main_title">Documentazione</h1>
<h2 class="title-doc">Project Management Plan</h2>
<h3 class="section-header">Abstract</h3>
<p>Il progetto di questo sito nasce per far conoscere in rete <em>La Sfoglina Pasta Fresca</em>, attività di famiglia, di mia mamma, consolidata sul territorio Vignolese da più di una decina d'anni. Visto che non aveva ancora una
pagina ufficiale ho realizzato per lei un sito vetrina e un profilo <a class="link" href="https://www.instagram.com/lasfoglinapastafresca/" target="_blank">Instagram</a>. <br>
La grafica, i colori e i font sono stati scelti riprendendo, in parte, materiale esistente e aggiungendo alcuni particolari effetti affinchè il sito risulti
accessibile, fruibile per qualsiasi tipologia di utente, mantenendo un forte impatto visivo.
Tutte le immagini utilizzate sono state scattate da me e sono mie personali.
</p>
<h3 class="section-header">Benchmarking</h3>
<p>Con questo progetto ho voluto realizzare un sito vetrina che mettesse in luce <strong>la qualità dei prodotti realizzati</strong>, tutti rigorosamente <strong>lavorati a mano</strong> in ogni fase:
dall'impasto, passando per la sfoglia tirata col mattarello, al prodotto finito. Gli ingredienti vengono accuratamente scelti per garantire un'esperienza di qualità. <br>
Il target utente a cui intendo rivolgermi è la clientela dell’attività, che comprende persone di tutte le fasce anagrafiche.
<br>
<br>
Nella fase precendente alla creazione del sito, svolgendo diverse ricerche, ho individuato due competirors che proponessero attività affini: la pasta fatta a mano. <br>
<a class="link" href="http://www.lesfogline.it/">Le Sfogline.it</a> e <a class="link" href="https://www.vsb-bologna.it/it/vsb-bologna">La Vecchia scuola di cucina bolgnese</a>. <br>
Il Sito “Le Sfogline.it”, intende promuovere sul web un’attività di pasta fresca in Via Belvedere a Bologna, tra i prodotti offerti ci sono: pasta fresca, pasta ripiena, pasta al forno, dolce e salato. Il sito presenta una grafica moderna, accattivante e curata. <br>
Il secondo competitor, “VSB-Bologna.it”, è la Scuola di cucina bolognese della sfoglina Alessandra Spisni, che offre corsi di cucina e degustazioni per divulgare la tradizione e la cultura enogastronomica Bolognese.Il sito risulta meno curato negli aspetti estetici rispetto al primo competitor.
</p>
<h3 class="section-header">Struttura e layout</h3>
<iframe class="figma_layouts" style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F7h9t45TnvPkQUfHdloCPFn%2Fstruttura-ad-albero%3Fnode-id%3D0%253A1"
allowfullscreen></iframe>
<iframe class="figma_layouts" style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F9PpIa3LUTLboZbTGUgqbq3%2Fprogetto_informatica%3Fnode-id%3D0%253A1"
allowfullscreen></iframe>
<h4 class="subtitle">Look and Feel</h4>
<p>Per quello che riguarda le scelte grafiche, ho ripreso il logo dai biglietti da visita che sono stati realizzati da una tipografia. All'interno del progetto ho usato due font:
<ol>
<li> <em>Dancing Script</em> (serif), per il titolo principale, il titolo in alto a sinistra e il titoletto nel footer.</li>
<li> <em>Open Sans</em> (sans-serif) per i titoli delle varie sezioni "Chi sono", "I nostri prodotti" , "Galleria", "Contatti", e per i testi. Ho deciso di utilizzare il carattere perchè è molto semplice ma fine ed elegante, leggibile
anche su schermi con una bassa risuoluzione. Entrambi i font sono stati scelti dalla libreria di Google Fonts. </li>
</ol>
Come colori, ne ho utilizzati tre:
<ul>
<li> <span class="orange">#EF7F1A</span>: per il titolo, le voci di menù, il logo in alto a sinistra e per l'effetto hover sul logo di Instagram nel Footer.</li>
<li>#777: per il testo della pagina, e per i titoli delle sezioni, nel footer, e nella pagina di documentazione. Ho scelto un grigio chiaro perch risulta più elegante e meno aggressivo per gli occhi </li>
<li> <span class="yellow">rgba(249, 233, 68, .75)</span>: come colore di background del footer.</li>
</ul>
Lo sfondo è bianco per dare una maggiore leggibilità al testo e una sensazione di ampio respiro all'utente che naviga, inoltre conferisce alla pagine un look minimale e d'effetto.
Tutte le immagini utilizzate nel progetto sono state scattate usando una macchina fotografica digitale Canon.
</p>
<h4 class="subtitle">Effetti particolari</h4>
<p>Per rendere interattiva la navigazione della pagina ho utilizzatto alcuni effetti grafici come la lightbox per la sezione "I nostri prodotti" dove ogni foto è cliccabile (pointer ed effetto hover) e può essere ingrandita con un solo click. Ho
anche inserito un carosello di immagini, in cui l'utente può interagire sia utilizzando le freccie sia con gli indicatori. <br>
Per visualizzare corettamente la navbar sugli schermi piccoli ho utilizzato il menù ad hamburger. In generale, per la responsività, ho utilizzato le media queries.
Tutti gli effetti sono stati realizzati utilizzando <strong>HTML, CSS, e Javascript</strong></p>
<h3 class="section-header">Linguaggi e strumenti</h3>
<p>I linguaggi web utilizzati per la realizzazione del sito sono: HTML, CSS e Javascript. Come strumenti a supporto della progettazione ho usato:
<ol>
<li><a class="link" href="https://atom.io/">Atom</a> come text editor,</li>
<li><a class="link" href="https://www.figma.com">Figma</a> per la realizzazione della struttura ad albero e del wireframe,</li>
<li><a class="link" href="https://fonts.google.com/">Google Fonts</a> per i fonts,</li>
<li><a class="link" href="https://fontawesome.com/">Fontawesome</a> per le icone della sezione contatti e del footer,</li>
<li><a class="link" href="https://favicon.io/favicon-converter/">Favicon</a> per l'immagine del logo nel tab del browser,</li>
<li> <a class="link" href="https://maps.google.it">Google Maps</a> per la mappa nella sezione contatti,</li>
<li> <a class="link" href="https://www.coreldraw.com/it">CorelDRAW</a> per alcuni effetti grafici.</li>
</ol>
</p>
<h2 class="title-doc">Communication Strategy</h2>
<p>A livello comunicativo mi sono concentrata sull'impatto visivo dando importanza agli effetti grafici, alle immagini, e all'interattività. Fondamentale è stata anche un'organizzazione coerente delle informazioni inserite affinchè risultassero evidenti ed intuitive. <br>
Guardando ad altri progetti emergono pro e contro.
<ul class="text">
<li><strong>Pro</strong>: il sito fornisce informazioni brevi e chiare, l'utente può navigare in qualsiasi sezione del sito con estrema facilità e velocità, inoltre presenta materiale fotografico di alta qualità.</li>
<li><strong>Contro</strong>: essendo un'attività locale e non tanto grande non c'è la possibilità di fare prenotazioni online.</li>
</ul>
L'obbiettivo del sito resta comunque quello di pubblicizzare online una piccola attività, dove i prodotti sono artigianali, genuini, lavorati a mano come facevano le "sfogline" di una volta. Il progetto vuole valorizzare la professione di sfoglina e l'arte del tirare la pasta col mattarello come facevano le nostre nonne.
<br>
Il target utente si rivolge a persone a cui piace la cucina tradizionale emiliana, ho cercato comunque di rendere il sito intuitivo nella navigazione per non discriminare nessuna fascia d'età.</p>
<h3 class="section-header">Promozione</h3>
<p>Il sito è stato promosso suDiscord</p>
<h3 class="section-header">Valutazione dei risultati</h3>
<p>Per valutare il successo del sito mi sono posta l'obbiettivo di <a class="link" href="https://analytics.google.com/analytics/web/?authuser=3#/p298747751/reports/reportinghub">dieci visualizzazioni del sito</a> e dieci followers su Instagram. </p>
<img src="imgs/screenshot_analytics.jpeg" alt="Screenshot risultati di Google Analytics">
</section>
</body>
</html>