Slides della terza lezione del corso "Creare siti web con Joomla" tenuto da Francesco Galgani per GuruAtWork il giorno 11/07/2012.

1. Creare siti con Joomla!
autore e relatore:
Francesco Galgani
francesco@galgani.it
WWW.GURUATWORK.COM
GROSSETO, 27 OTTOBRE - 31 OTTOBRE – 7 NOVEMBRE 2012

2. OBIETTIVO DEL TERZO INCONTRO
JOOMLA IN AZIONE!
VEDREMO LA CREAZIONE CON JOOMLA
DI UN SITO DI COMMERCIO ELETTRONICO
Lo scopo non è cercare di ricordare
i singoli passaggi, ma provare
a capire la logica di come si crea
un sito con Joomla

3. ANTEPRIMA DI QUEL CHE REALIZZEREMO - 1

4. ANTEPRIMA DI QUEL CHE REALIZZEREMO - 2

5. ANTEPRIMA DI QUEL CHE REALIZZEREMO - 3

6. ANTEPRIMA DI QUEL CHE REALIZZEREMO - 4

7. PREREQUISITI
SAPER INSTALLARE JOOMLA
(primo e secondo incontro)
AVERE UN MINIMO DI CONFIDENZA
CON L'AREA AMMINISTRATIVA DI JOOMLA
(secondo incontro)

8. DOMANDE - 1
PERCHÈ MOSTRI LA CREAZIONE DEL SITO
TRAMITE SLIDE INVECE DI FARE UNA DIMOSTRAZIONE LIVE?
1. Creare un sito di e-commerce richiede
molto più tempo di quello disponibile in questo incontro
2. Le slide “rimangono” e sono consultabili a casa
3. Creare un sito richiede tantissime piccole azioni,
configurazioni e personalizzazioni: con le slide voglio
focalizzare l'attenzione su ciò che è più importante ed
evidenziarne la “logica”
4. Mi metto al riparo da possibili inconvenienti
tecnici che potrebbero capitare sul momento...

9. DOMANDE - 2
POSSO INSTALLARE NEL MIO COMPUTER
IL SITO DI ESEMPIO QUI MOSTRATO?
SÌ, L'INSTALLER DEL SITO DI ESEMPIO È SCARICABILE
ALL'INDIRIZZO:
http://www.joomla-expert.it/repository/corsojoomla.zip
PROSSIMAMENTE, SE POSSIBILE, L'INSTALLER VERRÀ CARICATO
NELLA PAGINA DEL CORSO, IN CUI SONO GIÀ DISPONIBILI
I VIDEO E LE SLIDES DEI PRIMI DUE INCONTRI:
http://www.guruatwork.com/2012/corso-gratuito-per-ralizzare-siti-web-con-
joomla-al-linux-day-2012-a-grosseto/
L'UTILIZZO DELL'INSTALLER È MOLTO SIMILE ALL'INSTALLAZIONE DI
JOOMLA MOSTRATA NEL PRIMO INCONTRO,
alla fine di questo incontro mostrerò alcuni passaggi dell'installazione...

10. PUNTO DI PARTENZA
PARTIAMO DA UN'INSTALLAZIONE DI JOOMLA 2.5

11. PREPARIAMO IL SITO - 1
“SOSPENDO” GLI ARTICOLI DI ESEMPIO

12. PREPARIAMO IL SITO - 2
NEL MENÙ PRINCIPALE SOSPENDO LE VOCI CHE NON MI INTERESSANO

13. PREPARIAMO IL SITO - 3
NEL TOP MENÙ SOSPENDO IL LINK AL SITO DI JOOMLA

14. IL SITO È PRONTO PER LAVORARCI
ECCO COME APPARE IL SITO SVUOTATO DAI CONTENUTI DI ESEMPIO

15. ALLA RICERCA DEL TEMPLATE... (1)
QUALE GRAFICA VOGLIO?!!
CON TANTA PAZIENZA, COMINCIO A SFOGLIARE I TEMPLATE DISPONIBILI...
http://www.joomla.it/anteprima-template-16.html

16. ALLA RICERCA DEL TEMPLATE... (2)
SCELGO IL TEMPLATE “massarbeit_2-5-1”

17. ALLA RICERCA DEL TEMPLATE... (3)
… E LO SCARICO!

18. INSTALLO IL TEMPLATE - 1
I TEMPLATE SI INSTALLANO DAL GESTORE ESTENSIONI
NOTARE LA LICENZA CC

19. INSTALLO IL TEMPLATE - 2
SCELGO IL NUOVO TEMPLATE COME “PREDEFINITO”

20. INSTALLO IL TEMPLATE - 3
ECCO COME APPARE IL SITO ADESSO... e ora cosa facciamo?

21. LA LOGICA DI UN TEMPLATE - 1
su Joomla
ALCUNI CONCETTI CHIAVE:
Il template è il cuore di un sito Joomla,
è lo scheletro sul quale si formano tutte le pagine del nostro sito.
In ogni area del template ci sono zone
dove è possibile posizionare gli elementi del sito.
Queste zone possono chiamarsi ad esempio:
left, right, position-0, position-1, position-2, ecc.
Per vedere dove sono queste posizioni nel nostro template
bisogna abilitare l'opzione “anteprima posizioni modulo”

22. LA LOGICA DI UN TEMPLATE - 2
su Joomla
ANTEPRIMA DEL TEMPLATE
NOME SITO
POSITION-1
POSITION-0
LEFT POSITION-2 POSITION-3 RIGHT
POSITION-4 POSITION-5 POSITION-6
POSITION-7

23. LA LOGICA DI UN TEMPLATE - 2
su Joomla
ANTEPRIMA DEL TEMPLATE
NOME SITO
POSITION-1
POSITION-0
LEFT POSITION-2 POSITION-3 RIGHT
POSITION-4 POSITION-5 POSITION-6
POSITION-7

24. LA LOGICA DI UN TEMPLATE - 3
su Joomla
DOVE SONO POSIZIONATE ATTUALMENTE LE PARTI DEL SITO?
POSITION-1
POSITION-0
POSITION-7 è
slittato da dx a sx
LEFT perché le altre
RIGHT
position sono vuote
POSITION-2
CERCA → POSITION-0
TOP MENÙ → POSITION-1
POSITION-7
PERCORSO → POSITION-2
MENÙ PRINCIPALE → POSITION-7
LOGIN → POSITION -7
MENÙ UTENTE → POSITION-7

25. LA LOGICA DI UN TEMPLATE - 4
su Joomla
VERIFICHIAMO LA PRECEDENTE POSIZIONE DEI MODULI

26. LA LOGICA DI UN TEMPLATE - 5
su Joomla
CAMBIO LE POSIZIONI... ecco il risultato:

27. LA LOGICA DI UN TEMPLATE - 6
su Joomla
UN CONFRONTO TRA PRIMA E DOPO

28. LA LOGICA DI UN TEMPLATE - 7
su Joomla
FACCIAMO ALCUNI RITOCCHI...
1 → NOME DEL SITO E LOGO

29. LA LOGICA DI UN TEMPLATE - 8
su Joomla
FACCIAMO ALCUNI RITOCCHI...
2 → ELIMINIAMO IL LINK A “Joomla Templates vonFio.de"

30. LA LOGICA DI UN TEMPLATE - 9
su Joomla
FACCIAMO ALCUNI RITOCCHI...
3 → ELIMINIAMO LA SCRITTA “CERCA” SOPRA LA CASELLA DI RICERCA

31. LA LOGICA DI UN TEMPLATE - 10
su Joomla
LO “SCHELETRO” DEL SITO È PRONTO...
ECCO COME APPARE:

32. LA LOGICA DI UN TEMPLATE - 11
su Joomla
UN ULTIMO RITOCCO
VORREI IL NOME DEL SITO PIÙ VISIBILE!
Stavolta ho bisogno di modificare un CSS del template,
ovvero quello che definisce le proprietà del testo del nome del sito.
Analizzo le proprietà con “Analizza elemento” (disponibile in Firefox)
e scopro che le proprietà del testo sono dichiarate nel CSS
tramite l'ID “schriftzug”
Vedo anche esattamente che le proprietà sono dichiarate
nel file “template.css” alla riga 58
PROVO DIRETTAMENTE CON FIREFOX A CAMBIARE
LE PROPRIETÀ DEL TESTO:
QUESTA MODIFICA NON ALTERA MINIMAMENTE IL TEMPLATE,
MA MI PERMETTE DI VEDERE COSA SUCCEDE SE MODIFICO
IL TEMPLATE CON I NUOVI VALORI DA ME INSERITI
SEGUE ESEMPIO

33. LA LOGICA DI UN TEMPLATE - 12
su Joomla
MODIFICA DEL CSS - 1

34. LA LOGICA DI UN TEMPLATE - 13
su Joomla
MODIFICA DEL CSS - 2

35. LA LOGICA DI UN TEMPLATE - 14
su Joomla
MODIFICA DEL CSS - 3

36. LA LOGICA DI UN TEMPLATE - 15
su Joomla
MODIFICA DEL CSS - 4

37. LA LOGICA DI UN TEMPLATE - 16
su Joomla
MODIFICA DEL CSS – 5
Gestione template > Template > Massarbeit dettagli e file

38. LA LOGICA DI UN TEMPLATE - 17
su Joomla
MODIFICA DEL CSS – 6
Scorro il CSS fino a trovare la riga con l'ID #schriftzug
MODIFICO E SALVO
PRIMA
DOPO

39. LA LOGICA DI UN TEMPLATE - 18
su Joomla
MODIFICA DEL CSS – 7
RISULTATO!

40. LA LOGICA DI UN TEMPLATE - 19
su Joomla
CONCLUDIAMO IL DISCORSO SUI TEMPLATE...
Sapere apportare piccole modifiche ai fogli di stile (CSS)
può essere molto utile
Conoscenze di base di PHP, HTML e CSS
permettono ampie personalizzazioni
DUE TUTORIAL PER IMPARARE I CSS:
http://it.html.net/tutorials/css/
http://www.w3schools.com/css/default.asp

41. INSERIAMO I CONTENUTI - 1
su Joomla
PER PRIMA COSA PRESENTIAMOCI!
La maniera più semplice è quella di scrivere un articolo

42. INSERIAMO I CONTENUTI - 2
su Joomla
RISULTATO:

43. INSERIAMO I CONTENUTI - 3
su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 1

44. INSERIAMO I CONTENUTI - 4
su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 2

45. INSERIAMO I CONTENUTI - 5
su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 3

46. INSERIAMO I CONTENUTI - 6
su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 4
GOOGLE MI DÀ IL
CODICE HTML
BELLO E
PRONTO, MA
DEVO COPIARE
SOLO LA PARTE
DENTRO scr=””

47. INSERIAMO I CONTENUTI - 7
su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 5

48. INSERIAMO I CONTENUTI - 8
su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 6

49. INSERIAMO I CONTENUTI - 9
su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 7

50. INSERIAMO I CONTENUTI - 10
su Joomla
VEDIAMO UN PICCOLO PROBLEMA DI “LAYOUT” (IMPAGINAZIONE)
ANCORA UNA VOLTA, LO RISOLVIAMO MODIFICANDO IL CSS
Aggiungiamo in template.css la riga:
.breadcrumbs {white-space: nowrap; }
PRIMA
DOPO

51. INSERIAMO I CONTENUTI - 11
su Joomla
AGGIUNGIAMO LE INFORMAZIONI DI CONTATTO
in Componenti > Contatti > Supporto

52. INSERIAMO I CONTENUTI - 12
su Joomla
RISULTATO! ATTENZIONE:
Il modulo per i
contatti comunque
non funzionerà
perché non abbiamo
configurato l'invio di
posta con Joomla!
Joomla ha diverse
opzioni per l'invio di
posta, di default usa
un'apposita funzione
di PHP.
Se sul nostro server
PHP è già configurato
per l'invio di email,
allora non dobbiamo
fare nulla.
ALTRIMENTI

53. VELOCE CONFIGURAZIONE DELLA POSTA
USANDO UN ACCOUNT GMAIL
1. CREO UN ACCOUNT AD-HOC CON GMAIL 2. CONFIGURAZIONE GLOBALE > SERVER
3. ADESSO L'INVIO EMAIL FUNZIONA!

54. INSERIAMO I CONTENUTI - 13
su Joomla
INSERIAMO ANCHE LA NOSTRA PAGINA FACEBOOK?! SÌ!!! :)

55. INSERIAMO I CONTENUTI - 14
su Joomla
RISULTATO: ECCO IL LINK NEL MENÙ!

56. CREIAMO IL NEGOZIO - 1
Joomla ha un “piccolo” corredo di
10000 estensioni!!!
Ogni estensione permette di aggiungere
a Joomla nuove funzioni
La lista di tutte le estensioni è alla pagina:
http://extensions.joomla.org/

57. CREIAMO IL NEGOZIO - 2
Scegliamo l'estensione VIRTUEMART2
http://www.vmitalia.net/

58. CREIAMO IL NEGOZIO – 3
BREVE MA IMPORTANTE INFORMAZIONE TECNICA
NOTA SULLA CONFIGURAZIONE DI PHP nel file /etc/php5/apache2/php.ini
Prima di procedere, è necessario cambiare upload_max_filesize = 2M
in un valore più grande, ad es. 4M, e riavviare Apache

59. CREIAMO IL NEGOZIO - 4
Scarichiamo, scompattiamo, installiamo - 1

60. CREIAMO IL NEGOZIO - 5
Scarichiamo, scompattiamo, installiamo - 2

61. CREIAMO IL NEGOZIO - 6
Scarichiamo, scompattiamo, installiamo - 3

62. CREIAMO IL NEGOZIO - 7
Scarichiamo, scompattiamo, installiamo - 4

63. CREIAMO IL NEGOZIO - 8
NOTA: ci sono altre 27 estensioni simili a VirtueMart!
Non approfondiremo VirtueMart2, che ho scelto
praticamente “a caso” tra le altre estensioni
Ci interessa soltanto capire che usare
un'estensione permette di ampliare
enormemente le potenzialità di Joomla!
Quindi...
NON SARÀ VISTA IN DETTAGLIO LA
CONFIGURAZIONE DI VIRTUEMART, MA
SARÀ SOLO DATA UN'OCCHIATA GENERALE

64. CREIAMO IL NEGOZIO - 9
ACCEDO A VIRTUEMART DAL MENÙ “COMPONENTI”

65. CREIAMO IL NEGOZIO - 10
PANNELLO DI CONTROLLO DEL NEGOZIO

66. CREIAMO IL NEGOZIO - 11
LISTA DEI PRODOTTI

67. CREIAMO IL NEGOZIO - 12
CATEGORIE DI PRODOTTI

68. CREIAMO IL NEGOZIO - 13
MAGAZZINO E QUANTITATIVI DISPONIBILI

69. CREIAMO IL NEGOZIO - 14
LISTA DEI PRODUTTORI

70. CREIAMO IL NEGOZIO - 15
CATEGORIE DI PRODUTTORI

71. CREIAMO IL NEGOZIO - 16
ELENCO DEGLI ORDINI

72. CREIAMO IL NEGOZIO - 17
INFORMAZIONI SUL RIVENDITORE

73. CREIAMO IL NEGOZIO - 18
ELENCO CORRIERI

74. CREIAMO IL NEGOZIO - 19
METODI DI PAGAMENTO ACCETTATI

75. CREIAMO IL NEGOZIO - 20
POSIZIONE DEI MODULI NELLA PAGINA

76. CREIAMO IL NEGOZIO - 21
INSERISCO IL CATALOGO NEL MENÙ PRINCIPALE

77. ABBIAMO FINITO...

78. INSTALLIAMO IL SITO DI ESEMPIO
NEL NOSTRO COMPUTER - 1
SCARICO DA:
http://www.joomla-expert.it/repository/corsojoomla.zip
E SALVO IN /VAR/WWW/
a cui accedo con i permessi di amministratore!

79. INSTALLIAMO IL SITO DI ESEMPIO
NEL NOSTRO COMPUTER - 2
ESTRAGGO...

80. INSTALLIAMO IL SITO DI ESEMPIO
NEL NOSTRO COMPUTER - 3
ATTENZIONE AI PERMESSI...

81. INSTALLIAMO IL SITO DI ESEMPIO
NEL NOSTRO COMPUTER - 4
INIZIO L'INSTALLAZIONE...

82. INSTALLIAMO IL SITO DI ESEMPIO
NEL NOSTRO COMPUTER - 5
DEVO RICORDARMI DI CREARE IL DATABASE...

83. INSTALLIAMO IL SITO DI ESEMPIO
NEL NOSTRO COMPUTER - 6
INSERISCO I DATI DEL DATABASE...

84. INSTALLIAMO IL SITO DI ESEMPIO
NEL NOSTRO COMPUTER - 7
INSERISCO LE INFORMAZIONI SUL SITO...

85. INSTALLIAMO IL SITO DI ESEMPIO
NEL NOSTRO COMPUTER - 8
E NELLA STESSA PAGINA INSERISCO
PASSWORD ED EMAIL DELL'AMMINISTRATORE!
(Se salto questo passaggio, la password sarà “corsojoomla”)

86. INSTALLIAMO IL SITO DI ESEMPIO
NEL NOSTRO COMPUTER - 9
FINITA L'INSTALLAZIONE, CLICCO SU
“RIMUOVERE LA CARTELLA INSTALLATION”

87. INSTALLIAMO IL SITO DI ESEMPIO
NEL NOSTRO COMPUTER - 10
IL SITO DI ESEMPIO È PRONTO.
PER PRIMA COSA, ENTRO IN “AMMINISTRAZIONE”,
“CONFIGURAZIONE GLOBALE”,
“SISTEMA”
E CORREGGO LE IMPOSTAZIONI EMAIL

88. PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 1
CURVE DI APPRENDIMENTO DI ALCUNI CMS...
LA MIA RISPOSTA:
Perché è possibile realizzare siti web
abbastanza complessi
con un sforzo non eccessivo
e con un tempo di apprendimento ragionevole.
Perché è ampiamente personalizzabile
e ben supportato.
Perché ha tutti i vantaggi
del software libero
descritti nel primo incontro.
Perché la curva di apprendimento
è a un livello intermedio rispetto ad altri CMS...
A proposito di curve di apprendimento...

89. PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 2
CURVE DI APPRENDIMENTO DI ALCUNI CMS...
COMPETENZE E CONOSCENZE
TEMPO

90. PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 3
Un confronto a livello di funzionalità tra CMS
http://www.rackspace.com/knowledge_center/article/cms-comparison-drupal-joomla-and-wordpress
La diffusione di Joomla e altri CMS
http://www.joomla.it/notizie/4464-ancora-statistiche-sulla-diffusione-di-joomla.html
Wordpress raggiunge il 12% di diffusione totale tra i siti web e ben il 56% fra i CMS,
seguito da Joomla con il 2,3% sul totale ed il 10% fra i CMS
con appena dietro Drupal a 1,3% sul totale ed il 6% fra i CMS.
Il linguaggio server PHP è utilizzato nel 74% dei siti contro il 23% che utilizza ASP,
si evince quindi una grande supremazia dei sistemi basati su software libero,
i quali godono di ottima salute e sostenibilità.

91. PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 4

92. PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 5
TENDENZE NELLE RICERCHE SU GOOGLE

93. PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 6
JOOMLA È UNA SCELTA BUONA E VALIDA
TRA LE OPPORTUNITÀ OFFERTE DAL
SOFTWARE LIBERO

94. Il corso
si conclude qui...