Post on 29-Nov-2014
description
Creare siti con Joomla!
WWW.GURUATWORK.COM
autore e relatore:
Francesco Galganifrancesco@galgani.it
GROSSETO, 27 OTTOBRE - 31 OTTOBRE – 7 NOVEMBRE 2012
OBIETTIVO DEL TERZO INCONTRO
JOOMLA IN AZIONE!VEDREMO LA CREAZIONE CON JOOMLA
DI UN SITO DI COMMERCIO ELETTRONICO
Lo scopo non è cercare di ricordarei singoli passaggi, ma provare
a capire la logica di come si creaun sito con Joomla
ANTEPRIMA DI QUEL CHE REALIZZEREMO - 1
ANTEPRIMA DI QUEL CHE REALIZZEREMO - 2
ANTEPRIMA DI QUEL CHE REALIZZEREMO - 3
ANTEPRIMA DI QUEL CHE REALIZZEREMO - 4
PREREQUISITI
SAPER INSTALLARE JOOMLA(primo e secondo incontro)
AVERE UN MINIMO DI CONFIDENZACON L'AREA AMMINISTRATIVA DI JOOMLA
(secondo incontro)
DOMANDE - 1PERCHÈ MOSTRI LA CREAZIONE DEL SITO
TRAMITE SLIDE INVECE DI FARE UNA DIMOSTRAZIONE LIVE?
1. Creare un sito di e-commerce richiedemolto 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 inconvenientitecnici che potrebbero capitare sul momento...
DOMANDE - 2POSSO 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...
PUNTO DI PARTENZA
PARTIAMO DA UN'INSTALLAZIONE DI JOOMLA 2.5
PREPARIAMO IL SITO - 1
“SOSPENDO” GLI ARTICOLI DI ESEMPIO
PREPARIAMO IL SITO - 2
NEL MENÙ PRINCIPALE SOSPENDO LE VOCI CHE NON MI INTERESSANO
PREPARIAMO IL SITO - 3
NEL TOP MENÙ SOSPENDO IL LINK AL SITO DI JOOMLA
IL SITO È PRONTO PER LAVORARCI
ECCO COME APPARE IL SITO SVUOTATO DAI CONTENUTI DI ESEMPIO
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
ALLA RICERCA DEL TEMPLATE... (2)
SCELGO IL TEMPLATE “massarbeit_2-5-1”
ALLA RICERCA DEL TEMPLATE... (3)
… E LO SCARICO!
INSTALLO IL TEMPLATE - 1
I TEMPLATE SI INSTALLANO DAL GESTORE ESTENSIONI
NOTARE LA LICENZA CC
INSTALLO IL TEMPLATE - 2
SCELGO IL NUOVO TEMPLATE COME “PREDEFINITO”
INSTALLO IL TEMPLATE - 3
ECCO COME APPARE IL SITO ADESSO... e ora cosa facciamo?
LA LOGICA DI UN TEMPLATE - 1su 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 zonedove è 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 templatebisogna abilitare l'opzione “anteprima posizioni modulo”
LA LOGICA DI UN TEMPLATE - 2su Joomla
ANTEPRIMA DEL TEMPLATE
POSITION-1POSITION-1
POSITION-2 POSITION-3LEFT
POSITION-4 POSITION-5 POSITION-6
POSITION-7
RIGHT
POSITION-0
NOME SITO
LA LOGICA DI UN TEMPLATE - 2su Joomla
ANTEPRIMA DEL TEMPLATE
POSITION-1POSITION-1
POSITION-2 POSITION-3LEFT
POSITION-4 POSITION-5 POSITION-6
POSITION-7
RIGHT
POSITION-0
NOME SITO
LA LOGICA DI UN TEMPLATE - 3su Joomla
DOVE SONO POSIZIONATE ATTUALMENTE LE PARTI DEL SITO?
CERCA POSITION-0→TOP MENÙ POSITION-1→PERCORSO POSITION-2→MENÙ PRINCIPALE POSITION-7→LOGIN POSITION -7→MENÙ UTENTE POSITION-7→
POSITION-1POSITION-1
POSITION-2
LEFT
POSITION-7
RIGHT
POSITION-0
POSITION-7 è slittato da dx a sx perché le altre position sono vuote
LA LOGICA DI UN TEMPLATE - 4su Joomla
VERIFICHIAMO LA PRECEDENTE POSIZIONE DEI MODULI
LA LOGICA DI UN TEMPLATE - 5su Joomla
CAMBIO LE POSIZIONI... ecco il risultato:
LA LOGICA DI UN TEMPLATE - 6su Joomla
UN CONFRONTO TRA PRIMA E DOPO
LA LOGICA DI UN TEMPLATE - 7su Joomla
FACCIAMO ALCUNI RITOCCHI...1 → NOME DEL SITO E LOGO
LA LOGICA DI UN TEMPLATE - 8su Joomla
FACCIAMO ALCUNI RITOCCHI...2 → ELIMINIAMO IL LINK A “Joomla Templates vonFio.de"
LA LOGICA DI UN TEMPLATE - 9su Joomla
FACCIAMO ALCUNI RITOCCHI...3 → ELIMINIAMO LA SCRITTA “CERCA” SOPRA LA CASELLA DI RICERCA
LA LOGICA DI UN TEMPLATE - 10su Joomla
LO “SCHELETRO” DEL SITO È PRONTO...ECCO COME APPARE:
LA LOGICA DI UN TEMPLATE - 11su Joomla
UN ULTIMO RITOCCOVORREI 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 dichiaratenel file “template.css” alla riga 58
PROVO DIRETTAMENTE CON FIREFOX A CAMBIARELE 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
LA LOGICA DI UN TEMPLATE - 12su Joomla
MODIFICA DEL CSS - 1
LA LOGICA DI UN TEMPLATE - 13su Joomla
MODIFICA DEL CSS - 2
LA LOGICA DI UN TEMPLATE - 14su Joomla
MODIFICA DEL CSS - 3
LA LOGICA DI UN TEMPLATE - 15su Joomla
MODIFICA DEL CSS - 4
LA LOGICA DI UN TEMPLATE - 16su Joomla
MODIFICA DEL CSS – 5Gestione template > Template > Massarbeit dettagli e file
LA LOGICA DI UN TEMPLATE - 17su Joomla
MODIFICA DEL CSS – 6Scorro il CSS fino a trovare la riga con l'ID #schriftzug
MODIFICO E SALVO
PRIMA
DOPO
LA LOGICA DI UN TEMPLATE - 18su Joomla
MODIFICA DEL CSS – 7RISULTATO!
LA LOGICA DI UN TEMPLATE - 19su 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 CSSpermettono ampie personalizzazioni
DUE TUTORIAL PER IMPARARE I CSS:http://it.html.net/tutorials/css/
http://www.w3schools.com/css/default.asp
INSERIAMO I CONTENUTI - 1su Joomla
PER PRIMA COSA PRESENTIAMOCI!La maniera più semplice è quella di scrivere un articolo
INSERIAMO I CONTENUTI - 2su Joomla
RISULTATO:
INSERIAMO I CONTENUTI - 3su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 1
INSERIAMO I CONTENUTI - 4su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 2
INSERIAMO I CONTENUTI - 5su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 3
INSERIAMO I CONTENUTI - 6su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 4
GOOGLE MI DÀ ILCODICE HTMLBELLO E PRONTO, MA DEVO COPIARE SOLO LA PARTE DENTRO scr=””
INSERIAMO I CONTENUTI - 7su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 5
INSERIAMO I CONTENUTI - 8su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 6
INSERIAMO I CONTENUTI - 9su Joomla
METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 7
INSERIAMO I CONTENUTI - 10su Joomla
VEDIAMO UN PICCOLO PROBLEMA DI “LAYOUT” (IMPAGINAZIONE)
ANCORA UNA VOLTA, LO RISOLVIAMO MODIFICANDO IL CSSAggiungiamo in template.css la riga:
.breadcrumbs {white-space: nowrap; }
PRIMA
DOPO
INSERIAMO I CONTENUTI - 11su Joomla
AGGIUNGIAMO LE INFORMAZIONI DI CONTATTOin Componenti > Contatti > Supporto
INSERIAMO I CONTENUTI - 12su 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
VELOCE CONFIGURAZIONE DELLA POSTAUSANDO UN ACCOUNT GMAIL
2. CONFIGURAZIONE GLOBALE > SERVER1. CREO UN ACCOUNT AD-HOC CON GMAIL
3. ADESSO L'INVIO EMAIL FUNZIONA!
INSERIAMO I CONTENUTI - 13su Joomla
INSERIAMO ANCHE LA NOSTRA PAGINA FACEBOOK?! SÌ!!! :)
INSERIAMO I CONTENUTI - 14su Joomla
RISULTATO: ECCO IL LINK NEL MENÙ!
CREIAMO IL NEGOZIO - 1
Joomla ha un “piccolo” corredo di
10000 estensioni!!!
Ogni estensione permette di aggiungerea Joomla nuove funzioni
La lista di tutte le estensioni è alla pagina:http://extensions.joomla.org/
CREIAMO IL NEGOZIO - 2
Scegliamo l'estensione VIRTUEMART2http://www.vmitalia.net/
CREIAMO IL NEGOZIO – 3BREVE MA IMPORTANTE INFORMAZIONE TECNICA
NOTA SULLA CONFIGURAZIONE DI PHP nel file /etc/php5/apache2/php.iniPrima di procedere, è necessario cambiare upload_max_filesize = 2M
in un valore più grande, ad es. 4M, e riavviare Apache
CREIAMO IL NEGOZIO - 4
Scarichiamo, scompattiamo, installiamo - 1
CREIAMO IL NEGOZIO - 5
Scarichiamo, scompattiamo, installiamo - 2
CREIAMO IL NEGOZIO - 6
Scarichiamo, scompattiamo, installiamo - 3
CREIAMO IL NEGOZIO - 7
Scarichiamo, scompattiamo, installiamo - 4
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 usareun'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
CREIAMO IL NEGOZIO - 9
ACCEDO A VIRTUEMART DAL MENÙ “COMPONENTI”
CREIAMO IL NEGOZIO - 10
PANNELLO DI CONTROLLO DEL NEGOZIO
CREIAMO IL NEGOZIO - 11
LISTA DEI PRODOTTI
CREIAMO IL NEGOZIO - 12
CATEGORIE DI PRODOTTI
CREIAMO IL NEGOZIO - 13
MAGAZZINO E QUANTITATIVI DISPONIBILI
CREIAMO IL NEGOZIO - 14
LISTA DEI PRODUTTORI
CREIAMO IL NEGOZIO - 15
CATEGORIE DI PRODUTTORI
CREIAMO IL NEGOZIO - 16
ELENCO DEGLI ORDINI
CREIAMO IL NEGOZIO - 17
INFORMAZIONI SUL RIVENDITORE
CREIAMO IL NEGOZIO - 18
ELENCO CORRIERI
CREIAMO IL NEGOZIO - 19
METODI DI PAGAMENTO ACCETTATI
CREIAMO IL NEGOZIO - 20
POSIZIONE DEI MODULI NELLA PAGINA
CREIAMO IL NEGOZIO - 21
INSERISCO IL CATALOGO NEL MENÙ PRINCIPALE
ABBIAMO FINITO...
SCARICO DA:http://www.joomla-expert.it/repository/corsojoomla.zip
E SALVO IN /VAR/WWW/a cui accedo con i permessi di amministratore!
INSTALLIAMO IL SITO DI ESEMPIONEL NOSTRO COMPUTER - 1
INSTALLIAMO IL SITO DI ESEMPIONEL NOSTRO COMPUTER - 2
ESTRAGGO...
INSTALLIAMO IL SITO DI ESEMPIONEL NOSTRO COMPUTER - 3
ATTENZIONE AI PERMESSI...
INSTALLIAMO IL SITO DI ESEMPIONEL NOSTRO COMPUTER - 4
INIZIO L'INSTALLAZIONE...
INSTALLIAMO IL SITO DI ESEMPIONEL NOSTRO COMPUTER - 5
DEVO RICORDARMI DI CREARE IL DATABASE...
INSTALLIAMO IL SITO DI ESEMPIONEL NOSTRO COMPUTER - 6
INSERISCO I DATI DEL DATABASE...
INSTALLIAMO IL SITO DI ESEMPIONEL NOSTRO COMPUTER - 7
INSERISCO LE INFORMAZIONI SUL SITO...
INSTALLIAMO IL SITO DI ESEMPIONEL NOSTRO COMPUTER - 8
E NELLA STESSA PAGINA INSERISCOPASSWORD ED EMAIL DELL'AMMINISTRATORE!
(Se salto questo passaggio, la password sarà “corsojoomla”)
INSTALLIAMO IL SITO DI ESEMPIONEL NOSTRO COMPUTER - 9
FINITA L'INSTALLAZIONE, CLICCO SU“RIMUOVERE LA CARTELLA INSTALLATION”
INSTALLIAMO IL SITO DI ESEMPIONEL NOSTRO COMPUTER - 10
IL SITO DI ESEMPIO È PRONTO.PER PRIMA COSA, ENTRO IN “AMMINISTRAZIONE”,
“CONFIGURAZIONE GLOBALE”,“SISTEMA”
E CORREGGO LE IMPOSTAZIONI EMAIL
PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 1
CURVE DI APPRENDIMENTO DI ALCUNI CMS...LA MIA RISPOSTA:
Perché è possibile realizzare siti webabbastanza complessi
con un sforzo non eccessivoe con un tempo di apprendimento ragionevole.
Perché è ampiamente personalizzabilee ben supportato.
Perché ha tutti i vantaggidel 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...
PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 2
CURVE DI APPRENDIMENTO DI ALCUNI CMS...CURVE DI APPRENDIMENTO DI ALCUNI CMS...
CO
MP
ETE
NZ
E E
CO
NO
SC
EN
ZE
TEMPO
PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 3
Un confronto a livello di funzionalità tra CMShttp://www.rackspace.com/knowledge_center/article/cms-comparison-drupal-joomla-and-wordpress
La diffusione di Joomla e altri CMShttp://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à.
PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 4
PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 5
TENDENZE NELLE RICERCHE SU GOOGLE
PER CONCLUDERE
PERCHÈ PROPRIO JOOMLA? - 6
JOOMLA È UNA SCELTA BUONA E VALIDATRA LE OPPORTUNITÀ OFFERTE DAL
SOFTWARE LIBERO
Il corsosi conclude qui...