veneto-moda

Veneto Moda

Home / Veneto Moda

Il tema del progetto personale per il sito di Veneto Moda e` stato un negozio di abbigliamento vetrina, non un e-commerce con carrello per eventuali acquisti, con un target a libera scelta.

Anche in questo caso (come per il progetto dell' agriturismo) sono stati definiti dapprima tutti gli elementi per la realizzazione della bozza grafica in photoshop che si puo` vedere cliccando qui`, con testata con menu` (come font personalmente ho scelto Courier), logo con animazione scelta da animate.css (e quindi con caricamento della libreria), swiper gallery con immagini a scorrimento con pallini e slogan.

Lo swiper, scaricabile da qui`, e` un moderno javascript free che, una volta scaricato ed implementato correttamente sul proprio sito, permette di scorrere (o di far scorrere) le immagini touch nella gallery ed e` personalizzabile in piu` elementi (come ad esempio per i pallini o i colori che ci sono in queste): in tutte le pagine di questo sito (ad eccezione di news e contatti) ne viene fatto uso, caricando immagini di volta in volta a tema con la pagina.

Animate.css e` invece una libreria di animazioni free che si puo` scaricare da qui` e che, sempre previa corretto inserimento, puo` generare degli effetti animati su parti del sito che possono essere anche modificati, ripetuti oppure applicati dei ritardi per es, come lo e` l'icona Veneto Moda in alto (a sinistra del menu`).

Non e` stata dimenticata la favicon, che compare a fianco del title sopra la barra di navigazione in alto del browser.

Scorrendo la home page, la parte centrale comprende le 3 sezioni impilate (cosi` da agevolare la costruzione della parte responsive) uomo - donna - bambino, con 2 immagini più piccole ed una piu` grande, alle quali viene applicato un effetto overlay all'hover che fa apparire la scritta SCOPRI oltre ad una leggera trasparenza all'immagine stessa; sotto la sezione per il modulo dei contatti che precede il footer, suddiviso a sua volta in tre sezioni (a sinistra i dati aziendali, al centro le icone per i collegamenti ai canali Social - le icone sono prese da Font Awesome, per le quali e` quindi stata scaricata e collegata la libreria - e sulla destra un logo piu` piccolo e la possibilità di linkare le pagine cookies - privacy policy e sitemap).

Il progetto, realizzato anche in questo caso interamente custom in html e css, è` stato poi reso dinamico e ad inclusioni col passaggio al php, suddividendo quindi le varie sezioni in header.php e footer.php e con le inclusioni in php anche delle variabili per le description, le keywords e le parti dei vari current per i menu`, oltre all'implementazione del fancy-box per le rispettive gallerie delle immagini alle pagine delle collezioni (raggiungibili, oltre che dai link sull'overlay, anche dal menu` drop down sul menu` principale "Collezioni").

Non e` stata portata avanti la pagina "Contatti" (per la quale e` stato comunque affrontato l'argomento/il tema php mailer, per l'invio delle email dalla pagina), quindi cliccando sulla voce del menu` non si viene reinderizzati, e la pagina "News" andrebbe senz'altro migliorata almeno per la parte responsive, ma una parte sostanziosa e` stata quella di convertire il sito in versione responsive per tablet e per smartphone: in particolare, per quest'ultima versione testabile, e` stato realizzato in modalita` custom anche il burger per le voci del menu` e la freccia del back-to-top (con scroll morbido ad inizio pagina) che compare a fine pagina (sia nella versione per tablet che in quella per smartphone).

Per rendere il sito piu` realistico sarebbe stato opportuno inserire anche delle icone di brand/marchi in vendita nel negozio, magari prima della parte per i contatti.

Il risultato finale lo puoi vedere a questo link.