際際滷s della terza lezione del corso "Creare siti web con Joomla" tenuto da Francesco Galgani per GuruAtWork il giorno 11/07/2012.
1 of 94
Downloaded 66 times
More Related Content
Corso: Creare siti con Joomla - lezione 3
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
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...
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
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
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!!! :)
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
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
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!
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...
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.