Joomla! Override : Template for dummies

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


REALIZZARE UN SITO WEB VUOL DIRE

▸ Pensare ai contenuti

▸ Ideare l’aspetto grafico



▸ Pensare ai destinatari

▸ Ottimizzare l’esperienza utente





▸ “Prevedere” dove verranno letti i contenuti

▸ Pensare al piano editoriale







▸ “Prevedere” dove verranno letti i contenuti

▸ Pensare al piano editoriale





▸ Analizzare i Feedback



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


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


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à


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


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.



‣ 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



Responsive Adaptive



Responsive

Adattare il contenuto alla dimensione dello schermo:

Adaptive

Identificare il dispositivo, prima di offrire le informazioni richieste:



Responsive


‣ Ordine contenuti

Adaptive


▸ Scelta dei contenuti



Responsive



‣ Dimensioni spazi

Adaptive



▸ Gestione spazi



Responsive



‣ Dimensioni spazi

‣ File multimediali ridotti

Adaptive



▸ 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





index.php

error.php

component.php

templateDetails.xml

template_preview.png

template_thumbnail.png

Template

css/

js/

img/

fonts/

sass/





html/index.php

error.php

component.php

templateDetails.xml



Template

css/

js/

img/

fonts/

sass/





html/index.php

error.php

component.php

templateDetails.xml



Template

css/

js/

img/

fonts/

sass/

modules.php





html/index.php

error.php

component.php

templateDetails.xml



Template

css/

js/

img/

fonts/

sass/

modules.phppagination.php





html/index.php

error.php

component.php

templateDetails.xml



Template

css/

js/

img/

fonts/

sass/


OVERRIDE





html/index.php

error.php

component.php

templateDetails.xml



Template

css/

js/

img/

fonts/

sass/


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?




▸ 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');



▸ 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>



▸ 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


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!






▸ Immagine di copertina? Tablet sì, Smartphone no!

▸ Le informazioni? In un punto ben preciso!

È IMPORTANTE TENERE A MENTE IL FOCUS


COSA VOGLIO MODIFICARE?



▸ Voglio modificare la visualizzazione dell’articolo




▸ Lo voglio fare in base allo schermo




▸ 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


$client=new JApplicationWebClient();

TEXT

IN INDEX.PHP



if($client->mobile)

TEXT

IN INDEX.PHP



if($client->mobile)

$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/mobile.css');

TEXT

IN INDEX.PHP



if($client->mobile)


else

TEXT

IN INDEX.PHP



if($client->mobile)


else

$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');

PASSO 1

FILE NECESSARI




PASSO 2

template/html/com_content/article/default.php

COSA SERVE


COSA SERVE

▸ Controllo sicurezza<?phpdefined('_JEXEC') or die;


COSA SERVE

▸ Controllo sicurezza<?phpdefined('_JEXEC') or die;

JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');


COSA SERVE

▸ Controllo sicurezza

▸ parametri, immagini, url, info

<?phpdefined('_JEXEC') or die;


$params = $this->item->params;$images = json_decode($this->item->images);$urls = json_decode($this->item->urls);$info = $params->get('info_block_position', 0);


COSA SERVE



▸ Sidebar




JHtml::_('behavior.caption');jimport('joomla.application.module.helper'); $sidebar = JModuleHelper::getModules(‘sidebar');


COSA SERVE



▸ Sidebar

▸ Client




JHtml::_('behavior.caption');jimport('joomla.application.module.helper'); $sidebar = JModuleHelper::getModules(‘sidebar');


?>

COSA METTO NEL MAIN?

<main class="container item-page<?php echo $this->pageclass_sfx; ?>”>

</main>


IL MAIN

▸ Gestione Desktop


</main>

SE L’ARTICOLO È VISTO DA UN PC, INTERPRETA IL CODICE CONTENUTO QUI DENTRO


IL MAIN


▸ Gestione mobile


</main>

SE L’ARTICOLO È VISTO DA UN PC, INTERPRETA IL CODICE CONTENUTO QUI DENTRO


IL MAIN

ALTRIMENTI, PER TUTTI GLI ALTRI, INTERPRETA IL CODICE QUI DENTRO

PHP È COMODO (CIRCA)!


▸ Gestione mobile


</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

LA DIFFERENZA DI USER EXPERIENCE, NON È MAI DA SOTTOVALUTARE


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/

http://www.muhack.org

http://www.facebook.com/uhackbrescia

http://brescia.joomla.com

Joomla! Override : Template for dummies

Software

Transcript of Joomla! Override : Template for dummies