INFORMAZIONI DI BASE

Cos'è? • Un software per la pubblicazione di contenuti web

(CMS)

Quando è iniziato? • Ufficialmente nel 2005 come rebranding di Mambo

(creato nel 2000)

Dove è iniziato lo sviluppo? • In Australia

Chi sviluppa il progetto? • Un'organizzazione non-profit di volontari

PERCHÈ SCEGLIERE JOOMLA!™?

• riducendo la curva di know-how Semplicità

• molte funzionalità built-in, molte altre disponibili in pacchetti preconfezionati Rapidità

• si paga solo per il business circostante(training, grafica, moduli, hosting) Economicità

• circa 7000 estensioni Personalizzabilità

QUANTO COSTA JOOMLA!™?

• completamente gratuito e utilizzabile per scopi commerciali. Core Joomla!™

•più di 7000 estensioni gratuite come calendar, photo gallery, e-commerce , social network e molto altro. Estensioni

•Temi grafici per tutti i gusti scaricabili gratuitamente Templates

•centinaia di aziende sviluppano componenti e temi a pagamento per Joomla!™ a partire da 5€

Prodotti professionali

QUALI SONO LE VERSIONI DI JOOMLA!™?

Joomla! 1.0

Joomla! 1.5

Joomla! 2.5

Joomla! 3.0

CHI USA JOOMLA!™?

Corporations

Governments

Media

Education and cultural

groups

Famous places

Web server • Come infrastruttura di

produzione

• Differenti soluzioni a

seconda del carico

• Scelta della destinazione

ottimale

Installazione • Scelta della tipologia di

installazione ottimale

• Installazione automatica

• Installazione manuale

• Come ottenere aiuto in

caso di problemi di

intallazione

SOMMARIO

SCELTA DELLA DESTINAZIONE: LOCALE

Come piattaforma di

sviluppo

Su qualunque

sistema operativo

SCELTA DELLA DESTINAZIONE: LOCALE

Consigliato come piattaforma di sviluppo

Permette di verificare errori prima di esporre al pubblico

Richiede installazione di software sul proprio PC

Deve essere confrontato con le risorse disponibili sul server pubblico (ad es. moduli PHP)

SCELTA DELLA DESTINAZIONE: WEB SERVER

Consigliato Linux in produzione

Web server (Apache, nginx, ...) con supporto PHP (via mod_php, FastCGI, FPM ...)

PHP 5.2 o superiore

MySQL 5.1 o superiore

Risorse dedicate

•1 GB di spazio, sufficiente per circa 2000 pagine

•50 GB di banda, sufficiente per 100k visitatori / mese

INSTALLAZIONE AUTOMATICA: COME LA FA

JOOMLAHOST

Andare su www.joomlahost.it

Cliccare su Hosting >> Hosting Joomla! Free

Inserire i dati richiesti

• Nome sito

• Versione Joomla!™

• Dati personali

Cliccare su Attiva Hosting Free

Attivare la registrazione via link ricevuto via mail

Il tuo Joomla! È attivato e pronto all’uso

INSTALLAZIONE MANUALE

I L C M S J O O M L A È

C O M P O S T O D A

Script

base di dati

asset pubblici

L ' I N I Z I A L I Z Z A Z I O N E P R E V E D E I S E G U E N T I S T E P

Creazione del database

Download dell'archivio Joomla e upload sul server di destinazione

Completamento dell'installazione seguendo il wizard

INSTALLAZIONE MANUALE (1): DATABASE

Joomla usa un database relazionale • Sistema di tabelle, campi (colonne) e tuple

(righe) • Relazioni tra le tabelle sono costituite da chiavi

(selezioni di colonne) e riferimenti tra chiavi di altre tabelle

Il database attualmente supportato è MySQL

• Riferimenti

INSTALLAZIONE MANUALE (1): DATABASE (B)

1 • Login sul pannello di controllo del servizio di hosting

2 • Gestione dei database

3 • Creare il nuovo database

4 • Creare un utente database (username e password)

5 • Fornire al nuovo utente i permessi di accesso al nuovo database

6 • Annotare tutti i dati

INSTALLAZIONE MANUALE (2)

SCRIPT DI JOOMLA!™

1 • Selezionare il pacchetto più adatto da joomla.org

2 • Selezionare il link e scaricare l'archivio

3 • Scompattare l'archivio in locale

4

• Accedere al servizio di hosting (tipicamente via FTP con le credenziali fornite)

5

• Copiare i file nella directory definitiva (tipicamente ../public_html, ../www o ../htdocs)

INSTALLAZIONE MANUALE (3): WIZARD

URL http://<miosito>/<path> • Language: scegliere la lingua usata in installazione

• Pre-installation checks: verificare che i parametri richiesti siano soddisfatti

• License: accettare la licenza GPL e le sue restrizioni

• Database: inserire i valori annotati allo step (1) • Database type: lasciare il valore predefinito

• Hostname: tipicamente localhost se non specificato altrimenti

• Username, Password e Database: valori creati precedentemente

• Table prefix: scegliere un valore a piacere

INSTALLAZIONE MANUALE (3): WIZARD

• FTP configuration: consigliabile lasciare vuoto • In caso di problemi di upload sarà possibile tornare

a questo passo e modificare i valori

•Configurazione: inserire le informazioni finali • Site name

• Your email

• Admin username

• Admin password

• Install sample data

• Finish

INSTALLAZIONE MANUALE (3): WIZARD

1 • Cancellare la directory di installazione

2 • Verificare la raggiungibilità del nuovo sito

3 • Area pubblica http://<miosito>

4 • Area amministrativa http://<miosito>/administrator/

Definire le due aree di

un CMS Joomla • Area pubblica

• Area amministrativa

Effettuare le prime

modifiche al sito

Comprendere la

terminologia • Articoli

• Estensioni

• Componenti

• Template

• Moduli

• Plugin

SOMMARIO

Area pubblica • Raggiungibile all'URL

principale

• Contiene tutto ciò che è

visibile al pubblico

(anonimo o registrato)

Area amministrativa • Raggiungibile all'URL

/administrator/

• Pannello di controllo per

gestire tutte le modifiche

LE DUE AREE DEL SITO

L'AREA AMMINISTRATIVA

Menu a tendina

• Collegamenti a tutte le sotto-aree per la gestione dei contenuti

Collegamenti rapidi

• Informazioni sullo stato degli utenti

Ultimi aggiornamenti

• Alcune informazioni generali sullo stato del sito

Scorciatoie

• Per raggiungere velocemente le aree gestionali più frequenti

IL MENU AMMINISTRATIVO (A)

Site: opzioni di configurazione principali • La maggior parte già settate in installazione

Users: gestione di utenti e gruppi • Assegnazione dei permessi

Menus: consentono la navigabilità del sito

Content: gestione dei contenuti testuali • Notizie, blog post, etc.

Components: le extra-feature installabili • Gallerie fotografiche, carrelli ecommerce, etc.

IL MENU AMMINISTRATIVO (B)

Extensions: gestione delle estensioni • Module Manager: blocchi di contenuti laterali

extra • Plugin Manager: mini-funzionalità aggiuntive • Template Manager: layout grafici del sito • Language Manager: gestione lingue del

backend • Non dei contenuti

Help: documentazione interna e collegamento a http://joomla.org

CONSISTENZA DELL'INTERFACCIA (A)

Titolo della pagina

Pulsanti di azione

Sottomenu

Caselle di ricerca

Filtri

Titoli delle colonne

Elementi

Layout consistente per la gestione degli elementi

CONSISTENZA DELL'INTERFACCIA (B) Layout consistente per la gestione di un singolo elemento

Titolo della pagina

Pulsanti di azione

Contenuti principali

Opzioni aggiuntive

W W W . J O O M L A H O S T . I T

29

L'AREA PUBBLICA Composta da una serie di elementi definiti nell'area amministrativa

• Il tema grafico predefinito delle installazioni Joomla Template Beez2

• Indica dove si trova l'utente Modulo

Breadcrumbs

• Contiene i collegamenti alle aree del sito Modulo Menu

principale

• Consente la registrazione e l'accesso autenticato al sito

Modulo Form di login

La pagina iniziale è formata da:

PRIME MODIFICHE AL SITO

Le modifiche effettuate nell'area

amministrativa si ripercuoteranno nella

visualizzazione dell'area pubblica

CREARE IL PRIMO ARTICOLO

Content Article Manager New

Completare i campi

fondamentali

Title: inserire il titolo dell'articolo

Featured: per pubblicare l'articolo

in prima pagina

Article text: WYSIWYG

Save&Close

(salva e chiude il pannello)

Rivedere gli effetti nell'area pubblica

Raggiungibile via quick link “View site”

PRIMA MODIFICA AL TEMPLATE

Extensions Template Manager

Modificare il tema predefinito

Modificare le “Advanced options”

Logo: cancellare il logo attuale

Site title: inserire un testo

Site description: inserire una descrizione

• Save&Close (salva e chiude il pannello)

• Rivedere gli effetti nell'area pubblica

W W W . J O O M L A H O S T . I T

34

SOMMARIO

Il workflow è a 3 step: CASh

Categorize: classifica gli

articoli

Add: aggiungi i contenuti

Show: imposta collegamenti per raggiungere gli

articoli

La metodologia di inserimento è coerente per tutti i contenuti di un sito Joomla

W W W . J O O M L A H O S T . I T

35

STEP 1: CATEGORIZE

Organizzare i contenuti in anticipo ne semplifica la gestione all'aumentare dei volumi

Definire una struttura iniziale per i contenuti statici esistenti

Modificabile successivamente

• è utile per siti piccoli “Uncategorized”

• inserire un titolo Title

• inserire una breve descrizione

Description

• salva e chiudi la finestra Save&Close

Content Category Manager

New

STEP 2: ADD

Content Article Manager New

•Usare solo la parte sinistra del pannello • Title: titolo dell'articolo •Category: categoria (definita allo step 1) •Article text: testo dell'articolo

Save&Close

Gli articoli non sono ancora visibili •Una possibilità è taggarli come “Featured”: pubblicati in front page

STEP 3: SHOW

Menus Main Menu New

• Menu item type: selezionare Single Article • Selezionare l'articolo per cui creare la voce di

menu • Menu title: indicare il nome del collegamento

Save&Close

Verificare la modifica del menu nell'area pubblica

Verificare il collegamento creato

PERCHÈ CASH?

Perchè non creare prima i link nel menu? • I link richiede un oggetto da collegare

Perchè creare prima le categorie? • I raggruppamenti consentono una gestione

agevolata anche delle funzionalità aggiuntive

Perchè occorre creare i link? • I collegamenti sono l'unico modo organizzato di

consentire l'accesso agli articoli

HANDS-ON

Proporre alcuni esercizi •Creare 3 categorie

•Creare 3 articoli per categoria

•Creare i link agli articoli nel main menu

SOMMARIO

Formattare il testo degli articoli

Inserire immagini al contenuto

Aggiungere collegamenti • Tra gli articoli

•Con risorse esterne al sito

Scegliere le migliori opzioni di

pubblicazione ed i metadati

FORMATTARE IL TESTO

Formattazione dei caratteri • Bold, Italic, Underline e Strikethrough

Formattazione dei paragrafi • Allineamento • Titolazione

Liste puntate e indentazione

Undo • Via pulsante Undo • Via rimozione della formattazione

AGGIUNGERE IMMAGINI AL CONTENUTO

Usare il paradigma CASh

Content » Media Manager » Create folder • Upload via Media Manager

• Upload durante la scrittura

Abilitare bulk uploading • Media Manager » Options

• Enable flash uploader: yes

• Verifica il nuovo pannello

AGGIUNGERE IMMAGINI AD UN ARTICOLO

Content » Article Manager » Edit

Preparare l'immagine in locale

Selezionare il punto di inserimento

Cliccare sul pulsante 'Image' ed aprire il popup

Cliccare su 'Browse files' e selezionare l'immagine

Start upload

VISUALIZZARE IMMAGINI

L'immagine è ora sul server

Cliccare sull'immagine desiderata

Completare le opzioni • Image description: testo alternativo all'immagine

• Image title: testo tooltip

• Align: allineamento dell'immagine e del testo relativo

• Caption: visualizza il titolo come didascalia

Insert

Save e verificare l'articolo

SISTEMARE L'IMMAGINE

Ridimensionare con drag&drop

nell'articolo

Modificare le opzioni dal popup del

pulsante 'Image'

Cancellare l'immagine • L'immagine rimane disponibile nel Media

Manager e caricata sul server

AGGIUNGERE COLLEGAMENTI

•Collegamenti ad altri articoli dello stesso sito Interni

•Collegamenti a pagine web esterne Esterni

•Collegamenti per suddividere un articolo in pagine

Internal article

3 tipologie di collegamenti

AGGIUNGERE COLLEGAMENTI: INTERNI

Selezionare il testo da collegare

Cliccare sul pulsante 'Article'

Selezionare l'articolo dal popup

Importante • Il titolo dell'articolo viene usato se diverso dal testo, ma si può modificare • Il collegamento non funziona nell'editor, ma solo nell'area pubblica

AGGIUNGERE COLLEGAMENTI: ESTERNI

Selezionare il testo da collegare

Cliccare sull'editor 'Link'

Modificare l'URL nel popup • URL: inserire l'URL del browser • Target: dove si aprirà la finestra • Title: tooltip su mouseover

Save e verificare

Per annullare: selezionare il testo + cliccare sul pulsante 'Unlink'

AGGIUNGERE COLLEGAMENTI: INTERNI

ALL'ARTICOLO

Dividere un articolo lungo in sezioni • Pagebreak: divide un articolo in pagine • Più di uno per articolo • Popup per il nome della pagina

• Read more: propone la prima parte di un articolo (teaser text) • Uno per pagina

Rimuovere una suddivisione • Posizionarsi dopo la linea di demarcazione • Cancellare

SCEGLIERE LE OPZIONI PER L'ARTICOLO

• Controlla le date di pubblicazione e l'autore visualizzato

Publishing options

• Controlla le informazioni visualizzate Article options

• Aiuta i motori di ricerca a categorizzare e visualizzare le pagine

Metadata options

PUBLISHING OPTIONS

Created by + Created by alias • Selezionare l'utente impostato come autore o un

testo alternativo

Created • Data di creazione visualizzata

Start publishing + Finish publishing • Date di inizio e fine pubblicazione • Di default l'articolo non subisce variazioni

automatiche

ARTICLE OPTIONS

• Visualizza la categoria Category

• Visualizza la data di pubblicazione Published

• Visualizza l'autore Written by

• Visualizza il numero di letture Hits

Controlla le informazioni mostrate ai visitatori

GLOBAL OPTIONS

Article Manager

Options

•Valori predefiniti per tutti gli articoli

• Possono essere sovrascritti per articolo

METADATA OPTIONS

Informazioni per i motori di ricerca •Nel passato “misused” per spam

• Le informazioni vengono ricostruite dai

contenuti

• Praticamente inutilizzati

• Eccezione (in alcuni casi): Meta Description • Testo (circa 160 caratteri) inserito dal motore di

ricerca dopo il link in alcune occasioni

HANDS ON

Esercizi!

SOMMARIO

Come Joomla gestisce i menu

Categorizzare le voci di menu

Aggiungere voci di menu

Visualizzare voci di menu

Opzioni avanzate di layout dei menu

A COSA SERVONO I MENU?

Per raggiungere semplicemente le aree

del sito

Per avere (e dare) una visione organica

ed organizzata dei contenuti

Raggiunte le 5/6 voci nello stesso menu

occorre applicare il paradigma CASh

STEP 1: CATEGORIZE

Menu Menu Manager

• Inizialmente contiene solo Main Menu

New • Title: nome del menu (visualizzato nel sito)

•Menu type: per uso interno

•Description: per descrivere meglio il menu

Save&Close

STEP 2: ADD (LINK GIÀ ESISTENTI)

Menu Main Menu

Selezionare i link da spostare

Nell'area Batch process • Selezionare 'Move'

• Selezionare 'Add to this menu' del menu

desiderato

• Process

Refresh e verifica

STEP 2: ADD (NUOVI LINK)

Menu Menu Manager

Analogo al procedimento già usato per il main menu

Menu item type: single article

Select article: selezionare l'articolo desiderato

Menu title: scrivere il nome della voce di menu

Save&Close

STEP 3: SHOW

Extensions Module manager New

Menu • Title: visualizzato in area pubblica

• Position: position-7 è la colonna sinistra,

saranno descritti nell'Unità 10

• Select menu: il menu precedentemente

creato

Save&Close

HANDS ON

Esercizi!

OPZIONI DI LAYOUT AVANZATE

Non solo collegamenti ad articoli singoli

Sito di notize / blog • Layout con le ultime 5/10/15 notizie in front

page

• Lista delle categorie di articoli

• Lista di tutti gli articoli per categoria

LAYOUT AVANZATO PER UN BLOG

Categorize • Category Manager » New » 'Notizie' »

Save&Close • Media Manager » 'Notizie' » Create Folder

Add • Article Manager » New • Usare l'opzione 'Read more link'

Show • Main Menu » New » Menu item type = 'Category

Blog'

PERSONALIZZARE IL LAYOUT DEL BLOG

Per un singolo layout

• Nel lato destro della voce di menu

Globale per i layout

• Content » Article Manager » Options » Blog/Featured Layouts

Leading articles: a larghezza piena

Intro articles: proporzionali alle colonne

Columns: numero di colonne

Links: articoli solo con collegamento in fondo

LAYOUT AVANZATO PER UNA LISTA

Adatto per informazioni con rare modifiche

Categorize • Category Manager » New » 'Lista di ...' • Media Manager » 'Lista di ...' » Create folder

Add • Article Manager » New » Category = 'Lista di ...'

Show • Main menu » New » Menu item type = 'Category

list'

PERSONALIZZA IL LAYOUT DELLA LISTA

Individualmente

• Nei tab a destra per la voce di menu

Globalmente

• Article Manager » Options » List layout

Per ogni opzione

• Esistono i tooltip visualizzabili al mouseover

SOMMARIO

Comprendere i 7 componenti predefiniti di Joomla

• Banners: messaggi pubblicitari • Contacts: form per le richieste dei clienti • Messaging: messaggi privati agli amministratori • News feeds: aggregatore di notizie • Search: form di ricerca sul sisto • Web links: lista di collegamenti ad altri siti • Redirect: rileva URL errati e redirige

(1) BANNERS

2 funzionalità principali •Visualizzare contenuti pubblicitari

•Collezionare dati circa le impression, i click e

le visite

IMPOSTARE UN BANNER (1): CATEGORIZE

Components Banners Categorize New

La categoria discrimina il

posizionamento

In alternativa è possibile categorizzare

per cliente

IMPOSTARE UN BANNER (2): ADD

Components Banners New

•Name: titolo descrittivo del banner

•Category: creata precedentemente

• Image: seleziona dal Media manager

(directory ./banners) + consente upload

•Alternative text: testo alternativo per browser

testuali

•Click URL: indirizzo di spedizione al click

IMPOSTARE UN BANNER (3): SHOW

Extensions Module Manager New

Tipo di modulo: Banners • Title: nome logico per amministratore

• Show title: non visualizzare il titolo in area

pubblica

• Position: position-7 = colonna di sinistra

•Category: creata precedentemente

Save&Close

OPZIONI PER I BANNER

Colleziona solo dati di base (impression

+ click) di default

Per ottenere dati più accurati • (non sostituisce sistemi professionali specifici)

•Components » Banners » 'Mio banner'

• Track impression e/o Track clicks

• Save&Close

(2) FORM CONTATTI

Categorize: Contacts » Categories » New

Add: Contacts » New • Name: titolo descrittivo • Category: creata precedentemente • Email: destinazione non visualizzata al pubblico • Contact Manager » Options » Display options =

'plain'

Show: Menu » Main Menu » New • Menu item type: Single contact • Select contact: contatto creato

OPZIONI PER I FORM CONTATTI

Individuali

•Extensions » Contacts » 'Nome' » Contact Details

Globali

•Extensions » Contacts » Options

(3) MESSAGING

Components Messaging New

Consente di inviare messaggi privati agli

altri utenti membri loggati nell’area

amministrativa • Select User

• Subject + Message

(4) AGGREGATORE DI NOTIZIE

Visualizza informazioni ed articoli provenienti

da altri siti

Usa il formato RSS (Real Simple Syndication) • Identificare i link RSS sugli altri siti (link, pulsante o

icona)

• Copiare l'URL

• Per siti grandi esistono RSS per specifiche sezioni

IMPOSTARE UN NEWS FEED

• Newsfeeds » Categories » New Categorize:

• Newsfeeds » Feeds » New

• Name + Link + Category Add:

• Main Menu » New

• Menu item type: Single News Feed Show

Save&Close

Rileva URL inesistenti • Redirect » Expired URL • Mistyped URL: battitura

errata, visibile la sorgente

nella colonna Referring

Page

• Old URL: causati da

migrazioni di dati

Redireziona verso

pagine funzionanti • Redirects » New • Source URL: della pagina

inesistente

• Destination URL: della pagina

desiderata

• State: Enabled

(5) REDIRECT

(6) RICERCA

Visualizza una casella di testo per le ricerche libere

Extensions » Module Manager » New » Search • Title: riferimento mnemonico • Position: position-0 (= header della pagina)

Main menu » New • Menu item type: List search results

Opzioni: track delle ricerche effettuate • Components » Search » Options » Gather search stats • Può ingrandirsi e compromettere le performance

(7) COLLEGAMENTI WEB

Comune per le aree “Risorse esterne” o

“Indirizzi utili”

Categorize: Weblinks » Categories » New

Add: Weblinks » Weblinks » New • Title + URL + Category

Show: Main Menu » New •Menu item type: List web links

HANDS ON

Esercizi su banner

Esercizi su contact

Esercizi su news feeds

Esercizi su web links

ORGANIZZARE IL MENU PRINCIPALE Raggruppare le voci comuni in sottomenu per semplificare

la visualizzazione di menu lunghi

Raggruppare i contatti

• Main Menu » New » Menu item type = List Contacts

• Aprire una voce di menu contatti ed impostare il parent nella lista

Meccanismo analogo per

• Newsfeed

• Weblinks

SOMMARIO

• Blocchi di contenuti con informazioni aggiuntive

• Spesso a contorno della pagina principale

• Creare e gestire moduli

• Modificare

• La posizione

• L'ordine

• I link di menu

• Quando visualizzarli

IDENTIFICARE I MODULI

Il template predefinito di Joomla ha circa 12 spazi per il posizionamento dei moduli

Opzione per visualizzarne l'overlay • Extensions » Template Manager » Options

• Preview Module Positions : Enable

• Save&Close

• Templates » Beez » Preview

ESEMPI DI LAYOUT

Esempi di posizionamento

Lista degli ultimi articoli

•Extensions » Module Manager » New » Latest news

•Title

•Position: position-6 (colonna dx)

•Categories: tutte

Lista degli articoli più popolari

• Extensions » Module Manager » New » Most read content

• Title

• Position: position-6

• Categories: tutte

CREARE MODULI

CAMBIARE L'ORDINE DEI MODULI

Extensions » Module Manager •Ordina per posizione

•Cambiare l'ordine con le frecce blu o con i

numeri

•Cliccare su Save in cima alla colonna

Esercizio • Spostare in alto il menu principale ed il menu

per il login degli utenti

CAMBIARE LA VISIBILITÀ PER PAGINA

Personalizzare i moduli presenti in ogni pagina

Creare una lista degli articoli per categoria • Module Manager » New » Articles Category • Title

• Position: position-6

• Filtering options » Category = 'Categoria specifica'

• Menu assignment box • Module assignment: Only on the pages selected

• Uncheck all

• Main menu tab » Seleziona le pagine desiderate

• Save&Close

HANDS ON

Creare un banner solo per la pagina

iniziale • Position-12 (= sopra il contenuto)

MODIFICARE I TEMPI DI COMPARSA

PUBBLICAZIONE DI MODULI TEMPORIZZATI

Module Manager New Custom HTML

• Start e finish Publishing

•Contenuto HTML personalizzabile

HANDS ON

Creare un banner per un'offerta speciale per la festa della mamma

Spostare il modulo di login a destra

Spostare il modulo custom in cima alla colonna destra

Modificare il banner di sinistra • Solo nella pagina dei riferimenti web • In posizione centrale (position-12)

SOMMARIO

Piccole ed utili funzionalità aggiuntive

Ogni plugin è specializzato per un

singolo task

35 plugin predefiniti

Suddivisi in categorie • Extensions » Plugin Manager » Select Type

PLUGIN DI AUTENTICAZIONE

Autenticazione Joomla abilitata di default

Non disabilitare

•LDAP

Basi di utenti preesistenti e condivise con altri sistemi

•Gmail

Abilita login con account gmail

Account temporanei

•Altri meccanismi scaricabili (Unità 11)

Twitter, Facebook, OpenID

3 meccanismi di autenticazione esistenti

PLUGIN PER I CONTENUTI (1)

Joomla

• Task di manutenzione (invia mail agli admin quando viene aggiunto un articolo)

Load modules

• Consente di inserire moduli dentro gli articoli

• Ad esempio un box di ricerca semplificata

• Article Manager » Modifica 'Articolo x'

• {loadposition top} = carica i moduli nella posizione

• Save&Close

PLUGIN PER I CONTENUTI (2)

Email Cloaking • Maschera indirizzi email agli spammer

Code Highlighter (GeSHi) • Per visualizzare codice sorgente • http://qbnz.com/highlighter/

Pagebreak (vedi Unità 5)

Page Navigation • Barra di navigazione per numerosi articoli o blog

PLUGIN PER I CONTENUTI (3)

Vote •Consente di votare gli articoli

•Article Manager » Options » Show Voting

•Non molto sofisticato • Consente votazioni multiple

• Meglio abilitarlo solo per aree specifiche

PLUGIN PER L'EDITING

Funzionalità per la modifica degli articoli • TinyMCE: WYSIWYG • Functionality: Advanced (predefinita) o Simple

(semplificata, utile per utenti inesperti)

•Code Mirror o None: vista del codice HTML

Abilitazione •Globale: Global configuration » Default Editor • Per utente: User Manager » 'Utente' » Editor option

PLUGIN PER L'EDITING ESTESO

Plugin Editors-XTD • Pulsanti in fondo agli articoli

• Tipicamente si usano solo Article, Image,

Read More

PLUGIN DI RICERCA

Plug-in Manager » Select type = Search

Consentono di indicizzare le differenti

aree del sito

Estensioni aggiuntive (calendari, gallerie,

sistemi di ecommerce) hanno plugin

per indicizzare le rispettive sezioni

(Unità 11)

PLUGIN PER GLI UTENTI

Funzionalità aggiuntive per gli account utente

User – Joomla: non disabilitare

Profile • Aggiunge informazioni ai profili utente • Selezionare le opzioni in 'Basic options'

Contact Creator • Crea automaticamente un form di contatto per

ogni utente nel componente Contacts

ALTRI PLUGIN

Extension plug-in • Tool per gli sviluppatori per installare e gestire le estensioni

System plug-in •Modificabili dalle 'Global options'

Other plug-in • Estensioni articolate (e-commerce, social network) creano plug-in specifici

SOMMARIO

Cosa sono i template

Come modificare i template

Come modificare le opzioni dei

template

Differenziare i layout ed il design per

pagina

COSA SONO I TEMPLATE

Definiscono la veste grafica del sito

Permettono di modificare l'appeal del sito

Non modificano i contenuti, ma solo la loro visualizzazione

Open source, free e commerciali

Alcuni esempi

MODIFICARE I TEMPLATE

Extensions » Template Manager » 5 predefiniti • Location: per l'area amministrativa (Administrator) • Bluestork (default) e Hathor (semplificato)

• Location: per l'area pubblica (Site) • Atomic: bianco senza immagini, utile come partenza per

designer esperti

• Beez5 e Beez2: layout quasi identico, differenze di codice per gli utenti avanzati (v5)

• Default: identifica i template abilitati correntemente

MODIFICARE LE OPZIONI DEI TEMPLATE

Template Manager » 'Beez2' • Template colour: schema di colori • Position of Navigation: before/after content (sposta la colonna sx)

Altri esempi • SolarSentinel definisce il colore primario con palette • Rockettime definisce il numero di posizionamenti dei moduli in 10 aree del sito

DIFFERENZIARE IL LAYOUT PER PAGINA

Funzionalità • Per differenziare diverse aree di siti molto

complessi (ad es schemi di colori)

• Per differenziare l'homepage dalle altre

Possibilità per pagina •Differenti template

•Differenti stili (opzioni) dello stesso template

DIVERSI TEMPLATE PER PAGINA

Extension » Template Manager » 'Beez5'

Menus assignment: selezionare l'area desiderata

Save&Close

DIVERSI STILI DELLO STESSO TEMPLATE

Extensions Template Manager

Selezionare il template e cliccare

Duplicate • Style name: Beez2-Custom

• Template colour: personal

•Menu assignment: solo per l'area notizie

HANDS ON

Esercizi

Non esagerare con gli stili, per non

rendere più difficile la gestione

SOMMARIO

Oltre le estensioni predefinite

Cercare ed installare •Componenti

•Moduli

• Plugin

Cercare ed installare template

7 componenti • Banners

• Contacts

• Messaging

• Newsfeed

• Redirect

• Search

• Weblinks

>20 moduli • Search

• Custom HTML

• Latest News

• Most Read Content

>30 plugin

LE ESTENSIONI PREDEFINITE

OLTRE LE ESTENSIONI PREDEFINITE

Per specializzare i contenuti

Joomla!™ Extensios Directory • http://extensions.joomla.org

RICERCARE LE ESTENSIONI

Search box in alto o per categoria a sinistra

Criteri di ricerca • Rating: feedback degli altri utilizzatori • Valutare il rapporto tra numero di voti e rating raggiunto

• Compatibility: controllare la compatibilità con la versione di core installata • Commercial o non-commercial (circa 75%) • Business model per estensione, funzionalità aggiuntive o

supporto • Advertising, donazioni o codice rilasciato dopo lo

sviluppo per un committente

TIPI DI ESTENSIONI

Un'estensione per galleria di foto potrebbe essere composta da (verificare con XGallery)

• Componente per la visualizzazione e l'organizzazione delle immagini

• Modulo per visualizzare le x foto più popolari nella colonna laterale

• Plugin per consentire la ricerca delle immagini

• Traduzioni di lingua

• (Special) software non tra i precedenti

• (Tool) software esterno non gestito da Joomla

VALUTARE UNA SINGOLA ESTENSIONE

Nella pagina di presentazione • Link importanti • Link al sito ufficiale

• Demo, Supporto e Documentazione

• Area download (spesso redirect al sito ufficiale

dello sviluppatore)

• Recensioni

INSTALLARE COMPONENTI, MODULI E PLUGIN

Selezionare la versione corretta

Fare upload sul sito • Extensions Manager » Browse

• Selezionare l'elemento scaricato

•Upload&Install

•Module successfully installed

HANDS ON

Installare il modulo Simple Image

Gallery

Installare il plugin ITPSocial

Installare il componente Xmap (sitemap)

CERCARE ED INSTALLARE TEMPLATE

2 differenze sostanziali • Prezzo: la maggior parte dei template

(soprattutto quelli più curati) sono

commerciali

•Directory: non esiste un riferimento “ufficiale”

come JED, ma siti specializzati nel fornire

template proprietari • http://www.joomla24.com Template free

CERCARE UN TEMPLATE

Compatibilità

Commercial o non-commercial?

Documentazione • Per le opzioni ed eventuali modifiche

Supporto

Design • Prima di iniziare a modificare il codice, meglio

scegliere il template più vicino ai nostri desiderata

HANDS ON

Cercare il template Phoca Rhein su

http://joomla24.com

Visualizzarne i dettagli e le informazioni

Installare il template ed attivarlo • Schema colori blu, slideshow

Spostare i moduli per conformarsi ai

nuovi posizionamenti

HANDS ON

Un componente per i sondaggi

(AcePolls)

Un modulo per contare i giorni mancanti

al Capodanno (OSTimer)

Un plugin per la generazione

automatica dei metadati

(MetaGenerator)

SOMMARIO

Costruire in locale un sito personale • Installazione

•Contenuti

• Estensioni

• Template

INSTALLAZIONE

Ripercorriamo i passi dell'installazione

manuale su un server locale

CONTENUTI

Seguire il workflow CASh

Dividere le informazioni in categorie (anche gli asset nel media manager)

• Info personali con rari aggiornamenti • Chi sono

• Blog aggiornato regolarmente • Gli sport

• Gli hobby

• Il lavoro

• La famiglia

CONTENUTI

Inserire alcuni articoli di prova • Biografia + Dove vivo (un link ciascuno nel main

menu) • Un blog con • Le mie vacanze + La mia famiglia + Il mio animale

domestico • Le mie attività sportive • Il sistemista + Il consulente + L'istruttore

Nascondere l'autore, visualizzare 3 articoli per pagina, eliminare le icone 'print' e 'email'

ESTENSIONI

Componenti • Form per i contatti (predefinito) • Galleria fotografica (Phoca Gallery): CASh

Moduli • Most Read Content (predefinito) per blog, position-6 • Meteo dove vivo (SP Weather): position-6

Plugin • Mappa dove vivo = modulo JGMap in position-15 +

{loadposition position-15} nell'articolo • ITP Social Buttons

TEMPLATE

Usare il template Adana

Modificare il titolo

Sistemare il posizionamento dei moduli

SOMMARIO

Costruire sulla piattaforma Joomlahost

un sito aziendale • Installazione

•Contenuti

• Estensioni

• Template

INSTALLAZIONE

Ripercorriamo i passi dell'installazione

sulla piattaforma Joomlahost

CONTENUTI

Seguire il workflow CASh

Dividere le informazioni in categorie (anche gli asset nel media manager)

• Chi siamo • I nostri servizi • Il nostro portafoglio (use cases) • Clienti in hosting • Clienti co-location

• Il nostro staff • Gli aggiornamenti dell'azienda

CONTENUTI

Inserire alcuni articoli di prova • Introduzione + Azienda + Location • Servizi di hosting + housing + co-location • I team del nostro staff • Notizie: una conferenza, nuovo prodotto • Case history

Category Blog per ogni categoria nel main menu

Rimuovere autore, data e categoria

ESTENSIONI

Componenti

•Form per i contatti (predefinito)

•Zen Portfolio per la case history

Moduli (in position-6)

•Search + Last/Popular News (predefiniti) per blog

•Traduzione automatica (GTranslate)

Plugin

•Profili utente (User Profile)

•Contenuti multimediali (Jplayer)

•{youtube}codice{/youtube}

TEMPLATE

Usare il template Roonix • http://pixelpointcreative.com

Modificare il titolo

Sistemare il posizionamento dei moduli

SOMMARIO

Definire il sistema di Access Control Levels • Livelli di accesso predefiniti per l'area pubblica • 8 gruppi predefiniti per differenziare gli utenti • Modificare i parametri

Differenziazione tipica • Pubblico generico: visitatori dell'area pubblica • Utenti registrati: contenuti speciali, commenti,

etc... • Amministratori: operazioni sul backend

APPROCCIO IN TRE FASI ALL'ACL

Definire nel setup di default cos'è visibile

agli utenti

Definire nel setup di default quali

operazioni sono consentite agli utenti

Modificare il setup predefinito per creare le

proprie liste di controllo degli accessi • Minimizzare le personalizzazioni per mantenere il

sistema gestibile

COS'È VISIBILE

Content » Article Manager » colonna Access

• Public (default): accessibile a chiunque • Registered: accessibile solo agli utenti registrati • Accesso non consentito all'area amministrativa

• Special: accessibile solo ai manutentori

Provare le diverse possibilità • Su articoli • Su moduli

COS'È CONSENTITO: I GRUPPI Registered Special

Public Registered Author Editor Publisher Manager Administrator Super User

Vista contenuti “pubblici”

x x x x x x x x

Vista contenuti “registrati”

x x x x x x x

Vista contenuti “speciali”

x x x x x x

Creare nuovi contenuti x x x x x x

Modificare propri contenuti

x x x x x x

Modificare tutti i contenuti

x x x x x

Pubblicare nuovi contenuti

x x x x

Accedere all'area amministratori

x x x

Creare nuovi utenti X x

Installare estensioni x x

CREARE LE PROPRIE ACL

Se la distinzione in 3 aree non è sufficiente

Se la distinzione in 8 gruppi non è sufficiente

Esempio: assegnare il permesso di aggiornare gli articoli di una singola categoria

STEP 1: CREARE UN NUOVO GRUPPO

Users » Groups » New •Group Parent: scegliere il più affine al

comportamento desiderato (ad es Author)

STEP 2: DEFINIRE I PERMESSI

Ogni area del sito ha i propri permessi • Category Manager » Uncategorized » Category

Permission • Create: creare articoli • Delete: cancellare articoli • Edit: modificare qualunque articolo • Edit State: modificare lo stato di pubblicazione • Edit Own: modificare i propri articoli

• Impostare il permesso Create a Denied per il gruppo desiderato per tutte le categorie • I permessi sono ereditari nelle sottocategorie

STEP 3: CREARE L'UTENTE E VERIFICARE

Users » User Manager » New •Assegnare il gruppo corretto

Verificare

HANDS ON

Creare un ruolo per il Chief Editor • Può svolgere qualunque operazione su

qualunque articolo

•Non può modificare il resto del layout

(moduli, template, etc.)

SOMMARIO

Importante • I meta-contenuti sono tradotti

• I contenuti NON sono tradotti automaticamente

Workflow • Trovare ed installare pacchetti di lingua

• Abilitare modulo e plugin per il multi-lingua

• Tradurre contenuti ed estensioni

• Applicare template diversi a diversi linguaggi

STEP 1: INSTALLAZIONE

Scaricare il language pack • http://extensions.joomla.org/ • http://community.joomla.org/translations.html

Installare il pack (Extensions Manager)

Language Manager » New • Title: nome della lingua in inglese • Title native: nome della lingua localizzata • URL language code: codice 2 lettere • Image prefix: nome dell'immagine bandiera • Language tag: it-IT

Modulo Language

Switcher • Show title: hide

• Position: banner

Plugin Language Filter • Abilitare nella modalità

classica

STEP 1: ABILITARE MODULO E PLUGIN

STEP 2: CONTENUTI

Impostare il campo language alla lingua effettiva

Riprodurre (workflow CASh) i contenuti (categorie, articoli, menu e collegamenti) nella lingua desiderata

•Non è necessaria corrispondenza 1:1 • I layout possono essere completamente differenti

STEP 3: ESTENSIONI

Componenti standard • Svolgere la stessa procedura (CASh)

Moduli •Usare la funzione Duplicate

•Non serve duplicare i moduli che • Non mostrano il titolo agli utenti +

• Non richiedono di inserire contenuti (ad es il

modulo Search)

STEP 4: TEMPLATE

Differenziare i template per •Dare un diverso look&feel ad aree con

localizzazioni differenti

• Rimpiazzare immagini e media interni

SOMMARIO

Aggiornare il sito

Aggiornare le estensioni

Disabilitare o disinstallare le estensioni

Aggiungere protezioni al sito

Effettuare copie di backup

Comprendere la schermata di configurazioni globali

(PRIMA DI) AGGIORNARE IL SITO

Il sito necessita manutenzione!

Schema di numerazione • Major version

• Minor version

Che versione ho? In fondo al pannello admin

Come posso ricevere notifiche sugli aggiornamenti? Joomla Security News

• Registrazione alla mailing list

• Feed RSS http://feeds.joomla.org

AGGIORNARE IL SITO

Extensions » Extensions Manager »

Update

Find update

Update

Updating was successful

Aggiornamento

automatico • Analogo al metodo

precedente

Aggiornamento

manuale (3 casi) • Nuova versione sovrascrive

quella vecchia

• Tool di update interni

all'estensione

• Disinstalla + installa

AGGIORNARE LE ESTENSIONI

DISABILITARE/DISINSTALLARE LE ESTENSIONI

Extensions Manager » Manage • Selezionare + Uninstall

• Selezionare + Disable

Mantenere il minimo numero di

estensioni necessarie • Sicurezza

• Performance

MISURE DI SICUREZZA http://extensions.joomla.org Site protection Admin Tools

Password protect administrator: extra protezione dell'area admin

Database table prefix editor: modifica default jos_

Super Administrator ID: modifica default 42

Permissions Configuration: per minimizzare i permessi

Fix permissions: impostazioni automatiche

BACKUP

http://extensions.joomla.org Backup Akeeba Backup

•Genera un backup direttamente dal

componente

• Scarica l'archivio

•Disponibile un Akeeba Kickstart per il restore

dell'archivio creato

GLOBAL CONFIGURATION

Mettere il sito in manutenzione •Offline logo = joomla_logo_black.jpg

Impostazioni metadati • Site meta description e keyword: dovrebbero

cambiare ogni pagina, meglio vuoto

•Content rights: link alla pagina di copyright

SEO SETTINGS

Search Engine Friendly URLs • URL abbreviati senza GET string (yes)

Use Apache mod_rewrite • Rimuove /index.php/ (yes)

Adds Suffix to URL • Aggiunge .html alla fine (no)

Unicode Aliases • Gli URL contengono caratteri della lingua (no)

Include Site Name in Page Titles • Visualizza/nasconde il titolo (yes)

PERFORMANCE

Gzip Page Compression •Comprime runtime il codice HTML che deve essere inviato al browser

Cache •Abilitare sul sito a regime • Site » Maintenance » Clear Cache

Session Settings • Tenere un valore ragionevole

SCONTO HOSTING JOOMLA!™

Per i partecipanti al corso Joomlahost.it regala un coupon di sconto del valore di 20€ valido per l’acquisto di un cloud hosting Joomla! SMALL

Codice coupon : CORSOROMA3256

Visita www.joomlahost.it e acquista il tuo hosting completamente dedicato a Joomla!™