Joomla! Override : Template for dummies

download Joomla! Override : Template for dummies

of 113

  • date post

    13-Apr-2017
  • Category

    Software

  • view

    123
  • download

    0

Embed Size (px)

Transcript of 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: LEVOLUZIONE DAL 2009

  • IL SITO WEB: LEVOLUZIONE DAL 2009

    REALIZZARE UN SITO WEB VUOL DIRE

  • Pensare ai contenuti

    Ideare laspetto grafico

    IL SITO WEB: LEVOLUZIONE DAL 2009

    REALIZZARE UN SITO WEB VUOL DIRE

  • Pensare ai destinatari

    Ottimizzare lesperienza utente

    Pensare ai contenuti

    Ideare laspetto grafico

    IL SITO WEB: LEVOLUZIONE DAL 2009

    REALIZZARE UN SITO WEB VUOL DIRE

  • Prevedere dove verranno letti i contenuti

    Pensare al piano editoriale

    Pensare ai destinatari

    Ottimizzare lesperienza utente

    Pensare ai contenuti

    Ideare laspetto grafico

    IL SITO WEB: LEVOLUZIONE DAL 2009

    REALIZZARE UN SITO WEB VUOL DIRE

  • Prevedere dove verranno letti i contenuti

    Pensare al piano editoriale

    Pensare ai destinatari

    Ottimizzare lesperienza utente

    Pensare ai contenuti

    Ideare laspetto grafico

    Analizzare i Feedback

    IL SITO WEB: LEVOLUZIONE 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.Lutente 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.Lutente giunto sul nostro sito, deve trovare immediatamente la risposta, intravista nella SERP. Dopo, vorr continuarne la visita.

  • LORGANIZZAZIONE DELLINFORMAZIONE, ALLINTERNO DI UN CONTESTO WEB

    INFORMATION ARCHITECTURE

  • LORGANIZZAZIONE DELLINFORMAZIONE, ALLINTERNO DI UN CONTESTO WEB

    INFORMATION ARCHITECTURE The structural design of shared information environments.

  • LORGANIZZAZIONE DELLINFORMAZIONE, ALLINTERNO 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.

  • LORGANIZZAZIONE DELLINFORMAZIONE, ALLINTERNO 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.

  • LORGANIZZAZIONE DELLINFORMAZIONE, ALLINTERNO 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.

  • LORGANIZZAZIONE DELLINFORMAZIONE, ALLINTERNO 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

    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/

    http://redsandev.github.io/JbasicTemplate

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

    http://redsandev.github.io/JbasicTemplate

  • 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

    http://redsandev.github.io/JbasicTemplate

  • 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

    http://redsandev.github.io/JbasicTemplate

  • 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

    http://redsandev.github.io/JbasicTemplate

  • 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