Corso: Creare siti con Joomla - lezione 3

Creare siti con Joomla!

WWW.GURUATWORK.COM

autore e relatore:

Francesco [email protected]

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




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


NEL MENÙ PRINCIPALE SOSPENDO LE VOCI CHE NON MI INTERESSANO


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


SCELGO IL TEMPLATE “massarbeit_2-5-1”


… E LO SCARICO!

INSTALLO IL TEMPLATE - 1

I TEMPLATE SI INSTALLANO DAL GESTORE ESTENSIONI

NOTARE LA LICENZA CC


SCELGO IL NUOVO TEMPLATE COME “PREDEFINITO”


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”


ANTEPRIMA DEL TEMPLATE

POSITION-1POSITION-1

POSITION-2 POSITION-3LEFT

POSITION-4 POSITION-5 POSITION-6

POSITION-7

RIGHT

POSITION-0

NOME SITO


ANTEPRIMA DEL TEMPLATE


POSITION-2 POSITION-3LEFT

POSITION-4 POSITION-5 POSITION-6

POSITION-7

RIGHT

POSITION-0

NOME SITO


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-2

LEFT

POSITION-7

RIGHT

POSITION-0

POSITION-7 è slittato da dx a sx perché le altre position sono vuote


VERIFICHIAMO LA PRECEDENTE POSIZIONE DEI MODULI


CAMBIO LE POSIZIONI... ecco il risultato:


UN CONFRONTO TRA PRIMA E DOPO


FACCIAMO ALCUNI RITOCCHI...1 → NOME DEL SITO E LOGO


FACCIAMO ALCUNI RITOCCHI...2 → ELIMINIAMO IL LINK A “Joomla Templates vonFio.de"


FACCIAMO ALCUNI RITOCCHI...3 → ELIMINIAMO LA SCRITTA “CERCA” SOPRA LA CASELLA DI RICERCA


LO “SCHELETRO” DEL SITO È PRONTO...ECCO COME APPARE:


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


MODIFICA DEL CSS - 1








MODIFICA DEL CSS – 5Gestione template > Template > Massarbeit dettagli e file


MODIFICA DEL CSS – 6Scorro il CSS fino a trovare la riga con l'ID #schriftzug

MODIFICO E SALVO

PRIMA

DOPO


MODIFICA DEL CSS – 7RISULTATO!


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


RISULTATO:


METTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 1







GOOGLE MI DÀ ILCODICE HTMLBELLO E PRONTO, MA DEVO COPIARE SOLO LA PARTE DENTRO scr=””








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


AGGIUNGIAMO LE INFORMAZIONI DI CONTATTOin Componenti > Contatti > Supporto


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 ANCHE LA NOSTRA PAGINA FACEBOOK?! SÌ!!! :)


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/


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


Scarichiamo, scompattiamo, installiamo - 1








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


ACCEDO A VIRTUEMART DAL MENÙ “COMPONENTI”


PANNELLO DI CONTROLLO DEL NEGOZIO


LISTA DEI PRODOTTI


CATEGORIE DI PRODOTTI


MAGAZZINO E QUANTITATIVI DISPONIBILI


LISTA DEI PRODUTTORI


CATEGORIE DI PRODUTTORI


ELENCO DEGLI ORDINI


INFORMAZIONI SUL RIVENDITORE


ELENCO CORRIERI


METODI DI PAGAMENTO ACCETTATI


POSIZIONE DEI MODULI NELLA PAGINA


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


ESTRAGGO...


ATTENZIONE AI PERMESSI...


INIZIO L'INSTALLAZIONE...


DEVO RICORDARMI DI CREARE IL DATABASE...


INSERISCO I DATI DEL DATABASE...


INSERISCO LE INFORMAZIONI SUL SITO...


E NELLA STESSA PAGINA INSERISCOPASSWORD ED EMAIL DELL'AMMINISTRATORE!

(Se salto questo passaggio, la password sarà “corsojoomla”)


FINITA L'INSTALLAZIONE, CLICCO SU“RIMUOVERE LA CARTELLA INSTALLATION”


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


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


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


PER CONCLUDERE


TENDENZE NELLE RICERCHE SU GOOGLE

PER CONCLUDERE


JOOMLA È UNA SCELTA BUONA E VALIDATRA LE OPPORTUNITÀ OFFERTE DAL

SOFTWARE LIBERO

Il corsosi conclude qui...

Technology

Corso: Creare siti con Joomla - lezione 3