Corso: Creare siti con Joomla - lezione 3

1,667 views
1,566 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,667
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
62
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Corso: Creare siti con Joomla - lezione 3

  1. 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. 2. OBIETTIVO DEL TERZO INCONTRO JOOMLA IN AZIONE! VEDREMO LA CREAZIONE CON JOOMLADI 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. 3. ANTEPRIMA DI QUEL CHE REALIZZEREMO - 1
  4. 4. ANTEPRIMA DI QUEL CHE REALIZZEREMO - 2
  5. 5. ANTEPRIMA DI QUEL CHE REALIZZEREMO - 3
  6. 6. ANTEPRIMA DI QUEL CHE REALIZZEREMO - 4
  7. 7. PREREQUISITI SAPER INSTALLARE JOOMLA (primo e secondo incontro) AVERE UN MINIMO DI CONFIDENZACON LAREA AMMINISTRATIVA DI JOOMLA (secondo incontro)
  8. 8. DOMANDE - 1 PERCHÈ MOSTRI LA CREAZIONE DEL SITOTRAMITE 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 lattenzione su ciò che è più importante ed evidenziarne la “logica” 4. Mi metto al riparo da possibili inconvenienti tecnici che potrebbero capitare sul momento...
  9. 9. DOMANDE - 2 POSSO INSTALLARE NEL MIO COMPUTER IL SITO DI ESEMPIO QUI MOSTRATO? SÌ, LINSTALLER DEL SITO DI ESEMPIO È SCARICABILE ALLINDIRIZZO: http://www.joomla-expert.it/repository/corsojoomla.zip PROSSIMAMENTE, SE POSSIBILE, LINSTALLER 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/LUTILIZZO DELLINSTALLER È MOLTO SIMILE ALLINSTALLAZIONE DI JOOMLA MOSTRATA NEL PRIMO INCONTRO, alla fine di questo incontro mostrerò alcuni passaggi dellinstallazione...
  10. 10. PUNTO DI PARTENZAPARTIAMO DA UNINSTALLAZIONE DI JOOMLA 2.5
  11. 11. PREPARIAMO IL SITO - 1“SOSPENDO” GLI ARTICOLI DI ESEMPIO
  12. 12. PREPARIAMO IL SITO - 2NEL MENÙ PRINCIPALE SOSPENDO LE VOCI CHE NON MI INTERESSANO
  13. 13. PREPARIAMO IL SITO - 3NEL TOP MENÙ SOSPENDO IL LINK AL SITO DI JOOMLA
  14. 14. IL SITO È PRONTO PER LAVORARCIECCO COME APPARE IL SITO SVUOTATO DAI CONTENUTI DI ESEMPIO
  15. 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. 16. ALLA RICERCA DEL TEMPLATE... (2) SCELGO IL TEMPLATE “massarbeit_2-5-1”
  17. 17. ALLA RICERCA DEL TEMPLATE... (3) … E LO SCARICO!
  18. 18. INSTALLO IL TEMPLATE - 1I TEMPLATE SI INSTALLANO DAL GESTORE ESTENSIONI NOTARE LA LICENZA CC
  19. 19. INSTALLO IL TEMPLATE - 2SCELGO IL NUOVO TEMPLATE COME “PREDEFINITO”
  20. 20. INSTALLO IL TEMPLATE - 3ECCO COME APPARE IL SITO ADESSO... e ora cosa facciamo?
  21. 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 lopzione “anteprima posizioni modulo”
  22. 22. LA LOGICA DI UN TEMPLATE - 2 su Joomla ANTEPRIMA DEL TEMPLATE NOME SITO POSITION-1 POSITION-0 LEFT POSITION-2 POSITION-3 RIGHTPOSITION-4 POSITION-5 POSITION-6 POSITION-7
  23. 23. LA LOGICA DI UN TEMPLATE - 2 su Joomla ANTEPRIMA DEL TEMPLATE NOME SITO POSITION-1 POSITION-0 LEFT POSITION-2 POSITION-3 RIGHTPOSITION-4 POSITION-5 POSITION-6 POSITION-7
  24. 24. LA LOGICA DI UN TEMPLATE - 3 su JoomlaDOVE SONO POSIZIONATE ATTUALMENTE LE PARTI DEL SITO? POSITION-1 POSITION-0 POSITION-7 è slittato da dx a sxLEFT 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. 25. LA LOGICA DI UN TEMPLATE - 4 su JoomlaVERIFICHIAMO LA PRECEDENTE POSIZIONE DEI MODULI
  26. 26. LA LOGICA DI UN TEMPLATE - 5 su Joomla CAMBIO LE POSIZIONI... ecco il risultato:
  27. 27. LA LOGICA DI UN TEMPLATE - 6 su Joomla UN CONFRONTO TRA PRIMA E DOPO
  28. 28. LA LOGICA DI UN TEMPLATE - 7 su Joomla FACCIAMO ALCUNI RITOCCHI... 1 → NOME DEL SITO E LOGO
  29. 29. LA LOGICA DI UN TEMPLATE - 8 su Joomla FACCIAMO ALCUNI RITOCCHI...2 → ELIMINIAMO IL LINK A “Joomla Templates vonFio.de"
  30. 30. LA LOGICA DI UN TEMPLATE - 9 su Joomla FACCIAMO ALCUNI RITOCCHI...3 → ELIMINIAMO LA SCRITTA “CERCA” SOPRA LA CASELLA DI RICERCA
  31. 31. LA LOGICA DI UN TEMPLATE - 10 su Joomla LO “SCHELETRO” DEL SITO È PRONTO... ECCO COME APPARE:
  32. 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 lID “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. 33. LA LOGICA DI UN TEMPLATE - 12 su Joomla MODIFICA DEL CSS - 1
  34. 34. LA LOGICA DI UN TEMPLATE - 13 su Joomla MODIFICA DEL CSS - 2
  35. 35. LA LOGICA DI UN TEMPLATE - 14 su Joomla MODIFICA DEL CSS - 3
  36. 36. LA LOGICA DI UN TEMPLATE - 15 su Joomla MODIFICA DEL CSS - 4
  37. 37. LA LOGICA DI UN TEMPLATE - 16 su Joomla MODIFICA DEL CSS – 5Gestione template > Template > Massarbeit dettagli e file
  38. 38. LA LOGICA DI UN TEMPLATE - 17 su Joomla MODIFICA DEL CSS – 6Scorro il CSS fino a trovare la riga con lID #schriftzug MODIFICO E SALVO PRIMA DOPO
  39. 39. LA LOGICA DI UN TEMPLATE - 18 su Joomla MODIFICA DEL CSS – 7 RISULTATO!
  40. 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. 41. INSERIAMO I CONTENUTI - 1 su Joomla PER PRIMA COSA PRESENTIAMOCI!La maniera più semplice è quella di scrivere un articolo
  42. 42. INSERIAMO I CONTENUTI - 2 su Joomla RISULTATO:
  43. 43. INSERIAMO I CONTENUTI - 3 su JoomlaMETTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 1
  44. 44. INSERIAMO I CONTENUTI - 4 su JoomlaMETTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 2
  45. 45. INSERIAMO I CONTENUTI - 5 su JoomlaMETTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 3
  46. 46. INSERIAMO I CONTENUTI - 6 su JoomlaMETTIAMO 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. 47. INSERIAMO I CONTENUTI - 7 su JoomlaMETTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 5
  48. 48. INSERIAMO I CONTENUTI - 8 su JoomlaMETTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 6
  49. 49. INSERIAMO I CONTENUTI - 9 su JoomlaMETTIAMO UNA PAGINA “COME TROVARCI” usando GoogleMap - 7
  50. 50. INSERIAMO I CONTENUTI - 10 su JoomlaVEDIAMO 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. 51. INSERIAMO I CONTENUTI - 11 su JoomlaAGGIUNGIAMO LE INFORMAZIONI DI CONTATTO in Componenti > Contatti > Supporto
  52. 52. INSERIAMO I CONTENUTI - 12 su Joomla RISULTATO! ATTENZIONE: Il modulo per i contatti comunque non funzionerà perché non abbiamo configurato linvio di posta con Joomla! Joomla ha diverse opzioni per linvio di posta, di default usa unapposita funzione di PHP. Se sul nostro server PHP è già configurato per linvio di email, allora non dobbiamo fare nulla. ALTRIMENTI
  53. 53. VELOCE CONFIGURAZIONE DELLA POSTA USANDO UN ACCOUNT GMAIL1. CREO UN ACCOUNT AD-HOC CON GMAIL 2. CONFIGURAZIONE GLOBALE > SERVER 3. ADESSO LINVIO EMAIL FUNZIONA!
  54. 54. INSERIAMO I CONTENUTI - 13 su JoomlaINSERIAMO ANCHE LA NOSTRA PAGINA FACEBOOK?! SÌ!!! :)
  55. 55. INSERIAMO I CONTENUTI - 14 su Joomla RISULTATO: ECCO IL LINK NEL MENÙ!
  56. 56. CREIAMO IL NEGOZIO - 1 Joomla ha un “piccolo” corredo di 10000 estensioni!!! Ogni estensione permette di aggiungere a Joomla nuove funzioniLa lista di tutte le estensioni è alla pagina: http://extensions.joomla.org/
  57. 57. CREIAMO IL NEGOZIO - 2Scegliamo lestensione VIRTUEMART2 http://www.vmitalia.net/
  58. 58. CREIAMO IL NEGOZIO – 3BREVE MA IMPORTANTE INFORMAZIONE TECNICANOTA 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. 59. CREIAMO IL NEGOZIO - 4Scarichiamo, scompattiamo, installiamo - 1
  60. 60. CREIAMO IL NEGOZIO - 5Scarichiamo, scompattiamo, installiamo - 2
  61. 61. CREIAMO IL NEGOZIO - 6Scarichiamo, scompattiamo, installiamo - 3
  62. 62. CREIAMO IL NEGOZIO - 7Scarichiamo, scompattiamo, installiamo - 4
  63. 63. CREIAMO IL NEGOZIO - 8NOTA: 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 unestensione permette di ampliare enormemente le potenzialità di Joomla! Quindi... NON SARÀ VISTA IN DETTAGLIO LA CONFIGURAZIONE DI VIRTUEMART, MA SARÀ SOLO DATA UNOCCHIATA GENERALE
  64. 64. CREIAMO IL NEGOZIO - 9ACCEDO A VIRTUEMART DAL MENÙ “COMPONENTI”
  65. 65. CREIAMO IL NEGOZIO - 10PANNELLO DI CONTROLLO DEL NEGOZIO
  66. 66. CREIAMO IL NEGOZIO - 11 LISTA DEI PRODOTTI
  67. 67. CREIAMO IL NEGOZIO - 12 CATEGORIE DI PRODOTTI
  68. 68. CREIAMO IL NEGOZIO - 13MAGAZZINO E QUANTITATIVI DISPONIBILI
  69. 69. CREIAMO IL NEGOZIO - 14 LISTA DEI PRODUTTORI
  70. 70. CREIAMO IL NEGOZIO - 15CATEGORIE DI PRODUTTORI
  71. 71. CREIAMO IL NEGOZIO - 16 ELENCO DEGLI ORDINI
  72. 72. CREIAMO IL NEGOZIO - 17INFORMAZIONI SUL RIVENDITORE
  73. 73. CREIAMO IL NEGOZIO - 18 ELENCO CORRIERI
  74. 74. CREIAMO IL NEGOZIO - 19METODI DI PAGAMENTO ACCETTATI
  75. 75. CREIAMO IL NEGOZIO - 20POSIZIONE DEI MODULI NELLA PAGINA
  76. 76. CREIAMO IL NEGOZIO - 21INSERISCO IL CATALOGO NEL MENÙ PRINCIPALE
  77. 77. ABBIAMO FINITO...
  78. 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. 79. INSTALLIAMO IL SITO DI ESEMPIO NEL NOSTRO COMPUTER - 2 ESTRAGGO...
  80. 80. INSTALLIAMO IL SITO DI ESEMPIO NEL NOSTRO COMPUTER - 3 ATTENZIONE AI PERMESSI...
  81. 81. INSTALLIAMO IL SITO DI ESEMPIO NEL NOSTRO COMPUTER - 4 INIZIO LINSTALLAZIONE...
  82. 82. INSTALLIAMO IL SITO DI ESEMPIO NEL NOSTRO COMPUTER - 5 DEVO RICORDARMI DI CREARE IL DATABASE...
  83. 83. INSTALLIAMO IL SITO DI ESEMPIO NEL NOSTRO COMPUTER - 6 INSERISCO I DATI DEL DATABASE...
  84. 84. INSTALLIAMO IL SITO DI ESEMPIO NEL NOSTRO COMPUTER - 7 INSERISCO LE INFORMAZIONI SUL SITO...
  85. 85. INSTALLIAMO IL SITO DI ESEMPIO NEL NOSTRO COMPUTER - 8 E NELLA STESSA PAGINA INSERISCO PASSWORD ED EMAIL DELLAMMINISTRATORE!(Se salto questo passaggio, la password sarà “corsojoomla”)
  86. 86. INSTALLIAMO IL SITO DI ESEMPIO NEL NOSTRO COMPUTER - 9 FINITA LINSTALLAZIONE, CLICCO SU “RIMUOVERE LA CARTELLA INSTALLATION”
  87. 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. 88. PER CONCLUDEREPERCHÈ PROPRIO JOOMLA? - 1 CURVE DI APPRENDIMENTO DI ALCUNI CMS... LA MIA RISPOSTA: Perché è possibile realizzare siti web abbastanza complessi con un sforzo non eccessivoe 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. 89. PER CONCLUDEREPERCHÈ PROPRIO JOOMLA? - 2 CURVE DI APPRENDIMENTO DI ALCUNI CMS... COMPETENZE E CONOSCENZE TEMPO
  90. 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 CMShttp://www.joomla.it/notizie/4464-ancora-statistiche-sulla-diffusione-di-joomla.htmlWordpress 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. 91. PER CONCLUDEREPERCHÈ PROPRIO JOOMLA? - 4
  92. 92. PER CONCLUDEREPERCHÈ PROPRIO JOOMLA? - 5 TENDENZE NELLE RICERCHE SU GOOGLE
  93. 93. PER CONCLUDEREPERCHÈ PROPRIO JOOMLA? - 6 JOOMLA È UNA SCELTA BUONA E VALIDA TRA LE OPPORTUNITÀ OFFERTE DAL SOFTWARE LIBERO
  94. 94. Il corsosi conclude qui...

×