Joomla! Override
Transcript of Joomla! Override
HTTP://REDSANDEV.GITHUB.IO /JbasicTemplate
JOOMLA! OVERRIDETEMPLATE FOR DUMMIES
ANDREA ROSSIREDSANDEV
TEMPLATE PROGETTASICOSA VUOL DIRE PROGETTARE UN TEMPLATE, OGGI!
IL SITO WEB: L’EVOLUZIONE DAL 2009
IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE
▸ Pensare ai contenuti
▸ Ideare l’aspetto grafico
IL SITO WEB: L’EVOLUZIONE DAL 2009
REALIZZARE UN SITO WEB VUOL DIRE
▸ 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
▸ “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
▸ “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
USER EXPERIENCE, INFORMATION ARCHITECTURE, RESPONSIVE VS. ADAPTIVE
GianPiero Ugo
COSA INTERESSA A NOI?
USER EXPERIENCE, INFORMATION ARCHITECTURE, RESPONSIVE VS. ADAPTIVE
GianPiero Ugo
COSA INTERESSA A NOI?
ISO 9241-210
USER EXPERIENCE
http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=52075
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.
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.
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.
L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE
L’ORGANIZZAZIONE DELL’INFORMAZIONE, ALL’INTERNO DI UN CONTESTO WEB
INFORMATION ARCHITECTURE‣ The structural design of shared information environments.
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.
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.
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.
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.
PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
PARLIAMO SEMPRE DI NAVIGAZIONE DA MOBILE
RESPONSIVE VS ADAPTIVE
Responsive Adaptive
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:
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
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
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
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
DOMANDA
QUANDO MI SERVE?
HOW-TOTEMPLATE DESIGN
ANATOMIA DEL TEMPLATE DI JOOMLA!
ANATOMIA DI UN TEMPLATE
http://redsandev.github.io/JbasicTemplate
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/
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/
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
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.phppagination.php
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.phppagination.php
OVERRIDE
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.phppagination.php
OVERRIDE
html/modules.phppagination.php
OVERRIDE
COME È FATTO UN TEMPLATE?
DENTRO IL FILE INDEX.PHP
IL FILE INDEX.PHP NASCE PER UN MOTIVO BEN PRECISO: QUALE?
DENTRO IL FILE INDEX.PHP
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 FrameworksJHtml::_('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');
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>
IL FILE INDEX.PHP NASCE PER UN MOTIVO BEN PRECISO: QUALE?
DENTRO IL FILE INDEX.PHP
▸ Preparazione
▸ Layout
INDEX.PHP =
È LA BASE PER LA DISPOSIZIONE DEI CONTENUTI
RESPONSIVE VS ADAPTIVE: UNA COMODA LETTURA
IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
IN QUALSIASI MOMENTO, POSSO LEGGERE LE INFORMAZIONI DAL MIO SMARTPHONE
LETTURA DA SMARTPHONE: COME CAMBIA L’ARTICOLO?
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
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!
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.
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!
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!
È IMPORTANTE TENERE A MENTE IL FOCUS
È IMPORTANTE TENERE A MENTE IL FOCUS
COSA VOGLIO MODIFICARE?
È IMPORTANTE TENERE A MENTE IL FOCUS
COSA VOGLIO MODIFICARE?
▸ Voglio modificare la visualizzazione dell’articolo
È IMPORTANTE TENERE A MENTE IL FOCUS
COSA VOGLIO MODIFICARE?
▸ Voglio modificare la visualizzazione dell’articolo
▸ Lo voglio fare in base allo schermo
È 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
COME LO IMMAGINIAMO?
PASSO 1
PASSO 1
FILE NECESSARI
▸ html/com_content/article/ default.php default_links.php
▸ in css template.cssmobile.css
▸ in index.php una lieve modifica
TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();
TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();
if($client->mobile)
TEXT
IN INDEX.PHP
▸ Aggiungiamo un semplice controllo
$client=new JApplicationWebClient();
if($client->mobile)
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/mobile.css');
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
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');
PASSO 1
FILE NECESSARI
▸ html/com_content/article/ default.php default_links.php
▸ in css template.cssmobile.css
▸ in index.php una lieve modifica
PASSO 1
FILE NECESSARI
▸ html/com_content/article/ default.php default_links.php
▸ in css template.cssmobile.css
▸ in index.php una lieve modifica
▸ html/com_content/article/ default.php default_links.php
▸ in css template.cssmobile.css
▸ in index.php una lieve modifica
PASSO 1
FILE NECESSARI
▸ html/com_content/article/ default.php default_links.php
▸ in css template.cssmobile.css
▸ in index.php una lieve modifica
▸ html/com_content/article/ default.php default_links.php
▸ in css template.cssmobile.css
▸ in index.php una lieve modifica
▸ html/com_content/article/ default.php default_links.php
▸ in css template.cssmobile.css
▸ in index.php una lieve modifica
PASSO 2
template/html/com_content/article/default.php
COSA SERVE
template/html/com_content/article/default.php
COSA SERVE
▸ Controllo sicurezza<?phpdefined('_JEXEC') or die;
template/html/com_content/article/default.php
COSA SERVE
▸ Controllo sicurezza<?phpdefined('_JEXEC') or die;
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
template/html/com_content/article/default.php
COSA SERVE
▸ Controllo sicurezza
▸ parametri, immagini, url, info
<?phpdefined('_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);
template/html/com_content/article/default.php
COSA SERVE
▸ Controllo sicurezza
▸ parametri, immagini, url, info
▸ Sidebar
<?phpdefined('_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');
template/html/com_content/article/default.php
COSA SERVE
▸ Controllo sicurezza
▸ parametri, immagini, url, info
▸ Sidebar
▸ Client
<?phpdefined('_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();
?>
COSA METTO NEL MAIN?
<main class="container item-page<?php echo $this->pageclass_sfx; ?>”>
</main>
COSA METTO NEL MAIN?
IL MAIN
▸ 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
▸ 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
PHP È COMODO (CIRCA)!
▸ 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
<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-target="#author">
</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; ?> </section>
<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; ?> </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>
ECCO IL RISULTATO
OVERRIDE SEMPLICE
VERSIONE DESKTOP
OVERRIDE SEMPLICE
VERSIONE DESKTOP
LA DIFFERENZA DI USER EXPERIENCE, NON È MAI DA SOTTOVALUTARE
RESPONSIVE VS ADAPTIVE
LA DIFFERENZA DI USER EXPERIENCE, NON È MAI DA SOTTOVALUTARE
RESPONSIVE VS ADAPTIVE
LA DIFFERENZA DI USER EXPERIENCE, NON È MAI DA SOTTOVALUTARE
RESPONSIVE VS ADAPTIVE
HTTP://REDSANDEV.GITHUB.IO /JbasicTemplate
VUOI DI PIÙ?JOOMLA USER GROUP BRESCIA
GRAZIE
CONTATTICONTATTI
Rossi Andrea per µhack
‣www.muhack.org ‣www.facebook.com/
uhackbrescia ‣brescia.joomla.com
‣RedsAnDev@twitter ‣www.facebook.com/
redsandev/