Author: Rossi Andrea

1. HTTP://REDSANDEV.GITHUB.IO
/JbasicTemplate

2. JOOMLA! OVERRIDE
TEMPLATE FOR DUMMIES

3. ANDREA ROSSI
REDSANDEV

5. TEMPLATE PROGETTASI
COSA VUOL DIRE PROGETTARE UN TEMPLATE, OGGI!

7. IL SITO WEB: L’EVOLUZIONE DAL 2009

8. IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE

9. ▸ Pensare ai contenuti
▸ Ideare l’aspetto grafico
IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE

10. ▸ Pensare ai destinatari
▸ Ottimizzare l’esperienza utente
▸ Pensare ai contenuti
▸ Ideare l’aspetto grafico
IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE

11. ▸ “Prevedere” dove verranno letti i contenuti
▸ Pensare al piano editoriale
▸ Pensare ai destinatari
▸ Ottimizzare l’esperienza utente
▸ Pensare ai contenuti
▸ Ideare l’aspetto grafico
IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE

12. ▸ “Prevedere” dove verranno letti i contenuti
▸ Pensare al piano editoriale
▸ Pensare ai destinatari
▸ Ottimizzare l’esperienza utente
▸ Pensare ai contenuti
▸ Ideare l’aspetto grafico
▸ Analizzare i Feedback
IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE

13. USER EXPERIENCE,
INFORMATION ARCHITECTURE,
RESPONSIVE VS. ADAPTIVE
GianPiero Ugo
COSA INTERESSA A NOI?

14. USER EXPERIENCE,
INFORMATION ARCHITECTURE,
RESPONSIVE VS. ADAPTIVE
GianPiero Ugo
COSA INTERESSA A NOI?

15. ISO 9241-210
USER EXPERIENCE
http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=52075

16. ISO 9241-210
USER EXPERIENCE
▸ Definizione
http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=52075
A person's perceptions and responses that result
from the use or anticipated use of a product,
system or service.

17. ISO 9241-210
USER EXPERIENCE
▸ Definizione
▸ Limiamola
http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=52075
A person's perceptions and responses that result
from the use or anticipated use of a product,
system or service.
L’utente giunto sul nostro sito, deve trovare
immediatamente la risposta, “intravista” nella SERP. Dopo,
vorrà continuarne la visita.

18. ISO 9241-210
USER EXPERIENCE
▸ Definizione
▸ Limiamola
▸ Nella realtà
http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=52075
A person's perceptions and responses that result
from the use or anticipated use of a product,
system or service.
L’utente giunto sul nostro sito, deve trovare
immediatamente la risposta, “intravista” nella SERP. Dopo,
vorrà continuarne la visita.

19. L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE

20. L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE
‣ The structural design of shared information environments.

21. L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE
‣ The structural design of shared information environments.
‣ The art and science of organizing and labeling web sites,
intranets, online communities, and software to support
findability and usability.

22. L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE
‣ The structural design of shared information environments.
‣ The art and science of organizing and labeling web sites,
intranets, online communities, and software to support
findability and usability.
‣ Extracting required parameters/data of Engineering Designs in
the process of creating a knowledge-base linking different
systems and standards.
‣ A subset of Data Architecture where usable data (a.k.a
information) is constructed in and designed or arranged in a
fashion most useful or empirically holistic to the users of this
data.

23. L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE
‣ The structural design of shared information environments.
‣ The art and science of organizing and labeling web sites,
intranets, online communities, and software to support
findability and usability.
‣ Extracting required parameters/data of Engineering Designs in
the process of creating a knowledge-base linking different
systems and standards.
‣ A subset of Data Architecture where usable data (a.k.a
information) is constructed in and designed or arranged in a
fashion most useful or empirically holistic to the users of this
data.

24. L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE
‣ The structural design of shared information environments.
‣ The art and science of organizing and labeling web sites,
intranets, online communities, and software to support
findability and usability.
‣ Extracting required parameters/data of Engineering Designs in
the process of creating a knowledge-base linking different
systems and standards.
‣ A subset of Data Architecture where usable data (a.k.a
information) is constructed in and designed or arranged in a
fashion most useful or empirically holistic to the users of this
data.

25. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE

26. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive Adaptive

27. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive
Adattare il contenuto alla
dimensione dello schermo:
Adaptive
Identificare il dispositivo, prima
di offrire le informazioni richieste:

28. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive
Adattare il contenuto alla
dimensione dello schermo:
‣ Ordine contenuti
Adaptive
Identificare il dispositivo, prima
di offrire le informazioni richieste:
▸ Scelta dei contenuti

29. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive
Adattare il contenuto alla
dimensione dello schermo:
‣ Ordine contenuti
‣ Dimensioni spazi
Adaptive
Identificare il dispositivo, prima
di offrire le informazioni richieste:
▸ Scelta dei contenuti
▸ Gestione spazi

30. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive
Adattare il contenuto alla
dimensione dello schermo:
‣ Ordine contenuti
‣ Dimensioni spazi
‣ File multimediali ridotti
Adaptive
Identificare il dispositivo, prima
di offrire le informazioni richieste:
▸ Scelta dei contenuti
▸ Gestione spazi
▸ File multimediali scelti

31. PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive
Adattare il contenuto alla
dimensione dello schermo:
‣ Ordine contenuti
‣ Dimensioni spazi
‣ File multimediali ridotti
Adaptive
Identificare il dispositivo, prima
di offrire le informazioni richieste:
▸ Scelta dei contenuti
▸ Gestione spazi
▸ File multimediali scelti

33. DOMANDA

34. QUANDO MI SERVE?

35. HOW-TO
TEMPLATE DESIGN

36. ANATOMIA DEL TEMPLATE DI JOOMLA!
ANATOMIA DI UN TEMPLATE
http://redsandev.github.io/JbasicTemplate

37. ANATOMIA DEL TEMPLATE DI JOOMLA!
ANATOMIA DI UN TEMPLATE
http://redsandev.github.io/JbasicTemplate
index.php
error.php
component.php
templateDetails.xml
template_preview.png
template_thumbnail.png
Template
css/
js/
img/
fonts/
sass/

38. ANATOMIA DEL TEMPLATE DI JOOMLA!
ANATOMIA DI UN TEMPLATE
http://redsandev.github.io/JbasicTemplate
html/index.php
error.php
component.php
templateDetails.xml
template_preview.png
template_thumbnail.png
Template
css/
js/
img/
fonts/
sass/

39. ANATOMIA DEL TEMPLATE DI JOOMLA!
ANATOMIA DI UN TEMPLATE
http://redsandev.github.io/JbasicTemplate
html/index.php
error.php
component.php
templateDetails.xml
template_preview.png
template_thumbnail.png
Template
css/
js/
img/
fonts/
sass/
modules.php

40. ANATOMIA DEL TEMPLATE DI JOOMLA!
ANATOMIA DI UN TEMPLATE
http://redsandev.github.io/JbasicTemplate
html/index.php
error.php
component.php
templateDetails.xml
template_preview.png
template_thumbnail.png
Template
css/
js/
img/
fonts/
sass/
modules.php
pagination.php

41. ANATOMIA DEL TEMPLATE DI JOOMLA!
ANATOMIA DI UN TEMPLATE
http://redsandev.github.io/JbasicTemplate
html/index.php
error.php
component.php
templateDetails.xml
template_preview.png
template_thumbnail.png
Template
css/
js/
img/
fonts/
sass/
modules.php
pagination.php
OVERRIDE

42. ANATOMIA DEL TEMPLATE DI JOOMLA!
ANATOMIA DI UN TEMPLATE
http://redsandev.github.io/JbasicTemplate
html/index.php
error.php
component.php
templateDetails.xml
template_preview.png
template_thumbnail.png
Template
css/
js/
img/
fonts/
sass/
modules.php
pagination.php
OVERRIDE
html/
modules.php
pagination.php
OVERRIDE

43. COME È FATTO UN
TEMPLATE?

44. DENTRO IL FILE INDEX.PHP

45. IL FILE INDEX.PHP NASCE PER UN MOTIVO BEN PRECISO: QUALE?
DENTRO IL FILE INDEX.PHP

46. IL FILE INDEX.PHP NASCE PER UN MOTIVO BEN PRECISO: QUALE?
DENTRO IL FILE INDEX.PHP
▸ Preparazione
<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$user = JFactory::getUser();
$this->language = $doc->language;
$this->direction = $doc->direction;
// Getting params from template
$params = $app->getTemplate(true)->params;
// Detecting Active Variables
$sitename = $app->get('sitename');
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
unset($this->_scripts[JURI::root(true).'/media/jui/js/bootstrap.min.js']);
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/bootstrap.min.js');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/template.js');

47. IL FILE INDEX.PHP NASCE PER UN MOTIVO BEN PRECISO: QUALE?
DENTRO IL FILE INDEX.PHP
▸ Preparazione
▸ Layout
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?
>"
lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />
</head>
<body class="site">
<jdoc:include type="modules" name="menu" style="none" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<footer class="footer container-fluid" role="contentinfo">
<div class="row">
<jdoc:include type="modules" name="footer" style="none" />
</div>
<div class="lastfooter row">
<jdoc:include type="modules" name="lastfooter" style="menufooter" />
</div>
</footer>
<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>

48. IL FILE INDEX.PHP NASCE PER UN MOTIVO BEN PRECISO: QUALE?
DENTRO IL FILE INDEX.PHP
▸ Preparazione
▸ Layout

50. INDEX.PHP
=
È LA BASE PER LA
DISPOSIZIONE DEI CONTENUTI

51. RESPONSIVE VS
ADAPTIVE:
UNA COMODA LETTURA

53. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE

54. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?

55. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
▸ Titolo: l’importanza di rispondere a tutte le domande

56. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
▸ Titolo: l’importanza di rispondere a tutte le domande
▸ Testo introduttivo? Dipende!

57. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
▸ Titolo: l’importanza di rispondere a tutte le domande
▸ Testo introduttivo? Dipende!
▸ Carattere: definito, semplice e facile da leggere. Anche al sole.

58. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
▸ Titolo: l’importanza di rispondere a tutte le domande
▸ Testo introduttivo? Dipende!
▸ Carattere: definito, semplice e facile da leggere. Anche al sole.
▸ Immagine di copertina? Tablet sì, Smartphone no!

59. IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
▸ Titolo: l’importanza di rispondere a tutte le domande
▸ Testo introduttivo? Dipende!
▸ Carattere: definito, semplice e facile da leggere. Anche al sole.
▸ Immagine di copertina? Tablet sì, Smartphone no!
▸ Le informazioni? In un punto ben preciso!

61. È IMPORTANTE TENERE A MENTE IL FOCUS

62. È IMPORTANTE TENERE A MENTE IL FOCUS
COSA VOGLIO MODIFICARE?

63. È IMPORTANTE TENERE A MENTE IL FOCUS
COSA VOGLIO MODIFICARE?
▸ Voglio modificare la visualizzazione dell’articolo

64. È IMPORTANTE TENERE A MENTE IL FOCUS
COSA VOGLIO MODIFICARE?
▸ Voglio modificare la visualizzazione dell’articolo
▸ Lo voglio fare in base allo schermo

65. È IMPORTANTE TENERE A MENTE IL FOCUS
COSA VOGLIO MODIFICARE?
▸ Voglio modificare la visualizzazione dell’articolo
▸ Lo voglio fare in base allo schermo
▸ Desidero ottimizzarne la lettura, a seconda del dispositivo utilizzato

66. COME LO
IMMAGINIAMO?

76. PASSO 1

77. PASSO 1
FILE NECESSARI
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica

78. TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo

79. TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();

80. TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();
if($client->mobile)

81. TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();
if($client->mobile)
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/mobile.css');

82. TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();
if($client->mobile)
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/mobile.css');
else

83. TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();
if($client->mobile)
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/mobile.css');
else
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');

84. PASSO 1
FILE NECESSARI
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica

85. PASSO 1
FILE NECESSARI
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica

86. PASSO 1
FILE NECESSARI
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica
▸ html/com_content/article/
default.php
default_links.php
▸ in css
template.css
mobile.css
▸ in index.php una lieve modifica

87. PASSO 2

88. template/html/com_content/article/default.php
COSA SERVE

89. template/html/com_content/article/default.php
COSA SERVE
▸ Controllo sicurezza
<?php
defined('_JEXEC') or die;

90. template/html/com_content/article/default.php
COSA SERVE
▸ Controllo sicurezza
<?php
defined('_JEXEC') or die;
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');

91. template/html/com_content/article/default.php
COSA SERVE
▸ Controllo sicurezza
▸ parametri, immagini, url, info
<?php
defined('_JEXEC') or die;
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
$params = $this->item->params;
$images = json_decode($this->item->images);
$urls = json_decode($this->item->urls);
$info = $params->get('info_block_position', 0);

92. template/html/com_content/article/default.php
COSA SERVE
▸ Controllo sicurezza
▸ parametri, immagini, url, info
▸ Sidebar
<?php
defined('_JEXEC') or die;
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
$params = $this->item->params;
$images = json_decode($this->item->images);
$urls = json_decode($this->item->urls);
$info = $params->get('info_block_position', 0);
JHtml::_('behavior.caption');
jimport('joomla.application.module.helper');
$sidebar = JModuleHelper::getModules(‘sidebar');

93. template/html/com_content/article/default.php
COSA SERVE
▸ Controllo sicurezza
▸ parametri, immagini, url, info
▸ Sidebar
▸ Client
<?php
defined('_JEXEC') or die;
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
$params = $this->item->params;
$images = json_decode($this->item->images);
$urls = json_decode($this->item->urls);
$info = $params->get('info_block_position', 0);
JHtml::_('behavior.caption');
jimport('joomla.application.module.helper');
$sidebar = JModuleHelper::getModules(‘sidebar');
$client=new JApplicationWebClient();
?>

95. COSA METTO NEL MAIN?

96. <main class="container item-page<?php echo $this->pageclass_sfx; ?>”>
</main>
COSA METTO NEL MAIN?
IL MAIN

97. ▸ Gestione Desktop
<main class="container item-page<?php echo $this->pageclass_sfx; ?>”>
</main>
SE L’ARTICOLO È VISTO DA UN PC, INTERPRETA IL CODICE CONTENUTO QUI DENTRO
COSA METTO NEL MAIN?
IL MAIN

98. ▸ Gestione Desktop
▸ Gestione mobile
<main class="container item-page<?php echo $this->pageclass_sfx; ?>”>
</main>
SE L’ARTICOLO È VISTO DA UN PC, INTERPRETA IL CODICE CONTENUTO QUI DENTRO
COSA METTO NEL MAIN?
IL MAIN
ALTRIMENTI, PER TUTTI GLI ALTRI, INTERPRETA IL CODICE QUI DENTRO

99. PHP È COMODO (CIRCA)
!

100. ▸ Gestione Desktop
▸ Gestione mobile
<main class="container item-page<?php echo $this->pageclass_sfx; ?>”>
</main>
COSA METTO NEL MAIN
IL MAIN
A SECONDA DI COSA DEVO MOSTRARE, NE FORNISCO UNA VERSIONE
DESKTOP O MOBILE

101. <main class="container item-page<?php echo $this->pageclass_sfx; ?>">
<div class="row " itemscope itemtype="https://schema.org/Article">
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ?
JFactory::getConfig()->get('language') : $this->item->language; ?>" />
<div class="col-xs-12 cover"
<?php if(!$client->mobile):?>
style="background-image:url('<?php echo $images->image_fulltext;?>’)"
<?php endif;?>>
<header class="page-header">
<div class="intro"><h1> <?php echo $this->item->title; ?> </h1>
<?php if(!$client->mobile):?>
<?php echo $this->item->introtext; ?>
<?php endif;?>
</div>
</header>
</div>
<?php if($client->mobile):?>
<div class="col-xs-6">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-

102. </header>
</div>
<?php if($client->mobile):?>
<div class="col-xs-6">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-
target="#author">
<span class="fa fa-4 fa-info"></span>
</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-
target="#sidebar">
<span class="fa fa-4 fa-hashtag"></span>
</button>
</div>
<?php else:?>
<div class="col-xs-12 author”><!—— FAI COSE INTELLIGENTI ——></div>
<?php endif;?>
</div>
<section class="page-body col-xs-12 <?php if(!$client->mobile):?>col-sm-8<?php endif;?>">
<?php echo $this->item->text; ?>

103. </button>
</div>
<?php else:?>
<div class="col-xs-12 author”><!—— FAI COSE INTELLIGENTI ——></div>
<?php endif;?>
</div>
<section class="page-body col-xs-12 <?php if(!$client->mobile):?>col-sm-8<?php endif;?>">
<?php echo $this->item->text; ?>
</section>
<?php if(!$client->mobile):?>
<section class="page-sidebar col-xs-12 col-sm-4">
<?php
foreach($sidebar as $mod):
echo JModuleHelper::renderModule($mod);
endforeach;
?>
</section>
<?php endif;?>
</main>

104. ECCO IL RISULTATO

105. OVERRIDE SEMPLICE
VERSIONE DESKTOP

106. OVERRIDE SEMPLICE
VERSIONE DESKTOP

107. LA DIFFERENZA DI USER EXPERIENCE, NON È MAI DA SOTTOVALUTARE
RESPONSIVE VS ADAPTIVE

108. LA DIFFERENZA DI USER EXPERIENCE, NON È MAI DA SOTTOVALUTARE
RESPONSIVE VS ADAPTIVE

109. LA DIFFERENZA DI USER EXPERIENCE, NON È MAI DA SOTTOVALUTARE
RESPONSIVE VS ADAPTIVE

110. HTTP://REDSANDEV.GITHUB.IO
/JbasicTemplate

111. VUOI DI PIÙ?
JOOMLA USER GROUP
BRESCIA

112. GRAZIE

113. CONTATTICONTATTI
Rossi Andrea per µhack
‣www.muhack.org
‣www.facebook.com/
uhackbrescia
‣brescia.joomla.com
‣RedsAnDev@twitter
‣www.facebook.com/
redsandev/