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 [email protected] @andreasacca