ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

ANDREA SACCÀ

@andreasacca - www.andreasacca.it

Web Designer & Developer

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

ANDREA SACCÀ

@andreasacca - www.andreasacca.it

Web Designer & Developer

Magento CertifiedFront End Developer

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Magento CertifiedFront End Developer

ANDREA SACCÀ

@andreasacca - www.andreasacca.it

Web Designer & Developer

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

L’importanza del“Mobile Commerce”

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Acquisti fatti da dispositivi mobili: smartphone o tabletMobile Commerce

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

MLN di €

500

400

300

200

100

ANNO 2011 2012 2013

Volume di affari in ITALIA

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

MLN di €

500

400

300

200

100

ANNO 2011 2012 2013

74

Volume di affari in ITALIA

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

MLN di €

500

400

300

200

100

ANNO 2011 2012 2013

14474

Volume di affari in ITALIA

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

MLN di €

500

400

300

200

100

ANNO 2011 2012 2013

510

14474

Volume di affari in ITALIA

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Osservatorio eCommerce B2c di Netcomm e della School of Management del Politecnico di Milanohttp://www.osservatori.net/ecommerce_b2c

+254%rispetto al 2012

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

E’ importanteavere un sito“Mobile Friendly”ottimizzato per tuttii dispositivi.

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

SI MA QUALI?

Image Credits: http://goo.gl/ymY37B

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Quale soluzionescegliere?

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Sito web MobileSito web Mobile

QUALE SOLUZIONE SCEGLIERE?

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Sito web Mobile

Applicazione

Sito web Mobile

Applicazione

QUALE SOLUZIONE SCEGLIERE?

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Sito web Mobile

Applicazione

Sito web RESPONSIVE

Sito web Mobile

Applicazione

QUALE SOLUZIONE SCEGLIERE?

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Sito web Mobile

Applicazione

Sito web RESPONSIVE

QUALE SOLUZIONE SCEGLIERE?

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Cos’è ilResponsive Web Design?

RWD

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

E’ una tecnica di sviluppo grazie alla qualesi rende un sito web adattabile

a tutti i tipi di dispositivo

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

VANTAGGI DEL RWD

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Costi Inferiori

VANTAGGI DEL RWD

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Costi Inferiori

Facilità di aggiornamento

VANTAGGI DEL RWD

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Costi Inferiori

Facilità di aggiornamento

Sito visibile ovunque

VANTAGGI DEL RWD

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Costi Inferiori

Facilità di aggiornamento

Sito visibile ovunque

Ottimizzazione SEO

VANTAGGI DEL RWD

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

SVANTAGGI DEL RWD

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Tempi di Caricamento

SVANTAGGI DEL RWD

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Tempi di Caricamento

Tempi di progettazione lunghi

SVANTAGGI DEL RWD

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Alcuni esempidi siti responsive

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

A Book Aparthttp://.abookapart.com

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

ChouChou Couturehttp://chouchoucouture.com

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

BookStore Themedal libro Mastering Magento Theme Design

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Emphasis Magento Theme http://goo.gl/HVLGYi

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Tecniche per ilResponsive Web Design

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Layout Fluido1

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

.container { width:100%; max-width: 960px; margin:0 auto;}

Layout Fluido1

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

.containerlarghezza 100%

larghezza massima 960px

Layout Fluido1

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

.main { width:60%; float:left;}

.sidebar { width:30%; float:right;}

.containerlarghezza 100%

larghezza massima 960px

Layout Fluido1

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Layout Fluido1

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Media Queries2

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Cosa sono leMedia Queries?

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Nuove funzionalità CSS3,che permettono di definire degli stili specifici

in base al “Media” Utilizzato(tv, print, screen)...

Media Queries2

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

dimensionewidth, height, max-width, max-height

... ma anche in base a:

Media Queries2

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

dimensionewidth, height, max-width, max-height

orientamento del devicelandscape, portrait

... ma anche in base a:

Media Queries2

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Come utilizzare leMedia Queries

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

<link rel=”stylesheet” media=”only screen and(max-width: 400px)” href=”mobile.css”/>

Nel codice HTML, nella HEAD...

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

@media only screen and(max-width: 400px) { .box {color:#17ACCB;font-size:16px;position:relative; }

}

... o nel CSS

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Struttura di una Media Query

@media only screen Dispositivo Media

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Struttura di una Media Query

@media only screen

and (max-width: 400px) {

Dispositivo Media

Condizioni Logiche

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Struttura di una Media Query

@media only screen

and (max-width: 400px) { .box {color:#17ACCB;font-size:16px;position:relative; }

}

Informazioni CSS

Dispositivo Media

Condizioni Logiche

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Media Query per Smartphone

@media only screen and (min-width : 320px) and (max-width : 480px) {

/*Styles*/

}

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Media Query per Tablet

@media only screen and (min-width : 768px) and (max-width : 1024px) {

/*Styles*/

}

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Orientamento “PORTRAIT”

@media only screen and (min-width : 320px) and (orientation : portrait) { /*Styles*/

}

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Orientamento “LANDSCAPE”

@media only screen and (min-width : 320px) and (orientation : landscape) { /*Styles*/

}

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Integrare unFramework “Mobile First”

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

FOUNDATION 5.0http://foundation.zurb.com

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

BOOTSTRAP 3http://getbootstrap.com

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Come integrare Bootstrapin un tema Magento

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Scarica i files

INTEGRARE BOOTSTRAP NEL TEMA

1

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Scarica i files

- Download Bootstrap http://getbootstrap.com

INTEGRARE BOOTSTRAP NEL TEMA

1

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Scarica i files

- Download Bootstrap http://getbootstrap.com

- Download jQuery http://jQuery.com.com/download

INTEGRARE BOOTSTRAP NEL TEMA

1

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Copia i files nella skin del tema

INTEGRARE BOOTSTRAP 3

2

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Copia i files nella skin del tema

INTEGRARE BOOTSTRAP 3

2

[ROOT] / skin / frontend / [package] / [theme] /

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Copiare i files nella skin del tema

INTEGRARE BOOTSTRAP 3

2

[ROOT] / skin / frontend / [package] / [theme] /

STRUTTURA TEMA MAGENTO

APP PHTML - XML

SKIN CSS - JS - Fonts - Immagini

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

js

bootstrap.js

jQuery.min.js

Copia i files nella skin del tema

INTEGRARE BOOTSTRAP 3

2

[ROOT] / skin / frontend / [package] / [theme] /

js

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

js

bootstrap.js

jQuery.min.js

bootstrap.min.css

styles.css

Copia i files nella skin del tema

INTEGRARE BOOTSTRAP 3

2

[ROOT] / skin / frontend / [package] / [theme] /

css

js

css

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

<xml><default> <reference name=”head”>

//Inserire qui i CSS e i JS

</reference></default>

Dichiara i JS e i CSS nel file local.xml

INTEGRARE BOOTSTRAP 3

3[ROOT] / app /design / frontend / [package] / [theme] / layout /

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

<action method=”addItem”> <type>skin_js</type> <name>js/bootstrap.min.js</name></action>

Dichiara i JS e i CSS nel file local.xml

INTEGRARE BOOTSTRAP 3

3[ROOT] / app /design / frontend / [package] / [theme] / layout /

JS

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

<action method=”addItem”> <type>skin_css</type> <stylesheet>css/bootstrap.min.css</stylesheet></action>

Dichiara i JS e i CSS nel file local.xml

INTEGRARE BOOTSTRAP 3

3

CSS

[ROOT] / app /design / frontend / [package] / [theme] / layout /

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

jQuery.noConflict();

jQuery(document).ready(function){

//inserisciquiituoiscriptjQuery

});

jQuery No Conflict

INTEGRARE BOOTSTRAP 3

4

JS

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

INTEGRARE BOOTSTRAP 3

Struttura Base della griglia:

5 Integra la griglia di bootstrap

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

INTEGRARE BOOTSTRAP 3

Struttura Base della griglia:

5

.container

Integra la griglia di bootstrap

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

INTEGRARE BOOTSTRAP 3

Struttura Base della griglia:

5

.row

.container

Integra la griglia di bootstrap

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

.container

.row

INTEGRARE BOOTSTRAP 3

Struttura Base della griglia:

5

12 colonne

Integra la griglia di bootstrap

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

.container

.row

INTEGRARE BOOTSTRAP 3

Struttura Base della griglia:

5

12 colonne { .col-xs-X.col-sm-X.col-md-X.col-lg-X

Integra la griglia di bootstrap

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Integra la griglia di bootstrap

INTEGRARE BOOTSTRAP 3

<section> <divclass=”container”> <divclass=”row”> <divclass=”col-md-4”>SIDEBAR</div> <divclass=”col-md-8”>MAIN</div> </div> </div></section>

Struttura Base della griglia:

5

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Integra la griglia di bootstrap

INTEGRARE BOOTSTRAP 3

... <divclass=”container”> <divclass=”row”> <divclass=”col-md-4”> <?php echo $this->getChild(‘left‘)?> </div> <divclass=”col-md-8”> <?php echo $this->getChild(‘main‘)?> </div> </div> </div>...

Applicata al file strutturale 2columns-left.phtml

5

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Scarica Bootstrap e jQuery

Copia i Files nella SKIN del tema

Dichiara i JS e i CSS nel file local.xml

Risolvi conflitto jQuery - Prototype

Integra classi e le griglie di Bootstrap

RICAPITOLANDO...

INTEGRARE BOOTSTRAP 3

1

2

3

4

5

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Tips & Tricks

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Immagini Responsive

SENZA CON

class=”img-responsive”

Loremipsumdolorsitamet,consecteturadi-pisicingelit

Loremipsumdolorsitamet,consecteturadi-pisicingelit

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Helper Classes pernascondere / mostrare elementi

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Utilizzo del META “viewport”

Indica al dispositivo di usarela sua larghezza effettiva

per visualizzare il sito.

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

SENZA

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

SENZA CON

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Utilizzo del META “viewport”

<metaname=”viewport”content=”width=device-width, initial-scale=1, user-scalable=no”>

da inserire nella <head> del tema, nel file head.phtml

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Testare il Responsive

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Viewport Resizer Bookmarkhttp://lab.maltewassermann.com/viewport-resizer/

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Viewport Resizer Bookmarkhttp://lab.maltewassermann.com/viewport-resizer/

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Viewport Resizer Bookmarkhttp://lab.maltewassermann.com/viewport-resizer/

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

“Mastering MagentoTheme Design”

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

Mastering Magento Theme Design

300 pagine

Lingua Inglese

Esempi pratici

Autore: Andrea Saccà

http://goo.gl/Ti3MOJ

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

GRAZIEper l’attenzione!

ANDREA SACCA’ Creare un tema Responsive per MagentoMeet Magento Italy - Milano, 3-4 Giugno 2014 @andreasacca #mmit14

DOMANDE?

andreasacca.it info@andreasacca.it @andreasacca