Introducció a Joomla!Introducció a Joomla! com a SIGT

SIGT - Alex Araujo i Batlle – Maig de 2009

Introducció

Què és un CMS?

CMS són les sigles de Content Management System, en català, Sistema de Gestió de Continguts.

Els gestors de continguts són sistemes per mantenir i actualitzar webs de manera fàcil. Normalment funcionen a través del mateix web, i a vegades a través d'aplicacions específiques.

Wikipèdia

Perquè un CMS Opensource i LAMP?

Per què triar un CMS?

La gestió la realitza el propi usuari

No calen coneixements tècnics per gestionar-lo

L’administració és senzilla, via web

Per què Open Source?

Cost per servei, no per producte

Codi font conegut i editable

Llibertat de canviar i de triar proveïdor

Per què LAMP? Multitud de Proveïdors i preus

Exemples de Serveis LAMP

Introducció

Per què Joomla?

És Open Source

Arquitectura LAMP

Multitud de recursos associats

Components, Mòduls i PlugginsProjectes lliures o comercialsComplements Marc

Descàrrega gratuïtaModificació parcial o totalComunitat Forta i creixentFilosofia de Cost per Servei

Alguns llocs web fets en Joomla

• Screen del Màsters EUM

1. Alguns exemples de webs en Joomla!

1. Alguns exemples de webs en Joomla!

http://www.institute.nhs.uk/

Paquet Joomla! 1.5.X estàndard

Model de Llicències – Joomla!

CMS baseOpenSource

Components base (links, articles,..)OpenSource

Mòduls base (noticies, imatges, ..)OpenSource

Pluggin base (SEO, imatges, ..)OpenSource

Plantilles base (Admin i Front )OpenSource

Components OpenSource o comercials

Mòduls OpenSource o comercials

Pluggin OpenSource o Comercials

Plantilles OpenSource o comercials

Model de negoci – Com funciona?

Necessito posar en funcionament un Joomla a la meva empresa. Què faig?!

Necessitat Acció Cost

Domini (.com/.net/..) Registrar el domini Entre 20€ - 40€ anuals segons domini

Allotjament Cercar un proveïdor Entre 50€ - 300€ anuals segons oferta

Producte Base Descarregar Joomla 1.5.X

0€

Posada en funcionament

Instal·lar i configurar Cost per servei. Segons oferta.

Personalització Edició de plantilles, complements, etc..

Cost per servei en cas d’OpenSource

Noves plantilles, complements comercials, etc...

Segons el Cost del producte

Això funciona? – Un exemple senzill

Imaginem que volem posar en funcionament la web de la nostra empresa. Suposarem, que la despesa serà la mateixa, doncs és important tenir en compte que USAR PRODUCTES OPENSOURCE NO VOL DIR UN COST ZERO.

CMS Joomla! CMS comercial Producte a midaCost del producte baix Cost del producte alt Cost del producte alt

Llibertat per canviar de proveïdor

Dificultats per canviar de proveïdor

Dificultats per canviar de proveïdor

Major part d’hores dedicades a servei

Segons el producte, inclou o no un paquet de serveis

Major part d’hores dedicades al desenvolupament

Possibilitat de d’edició de codi i inserció de modificacions i KnowHow conegut

Producte tancat amb modificacions a demanda

Producte tancat amb modificacions a demanda i KnowHow desconegut

Un dels avantatges de Joomla! És el fet de la combinació de sistemes de llicència.

La seva escalabilitat i la seva modularitat permet la convivència de parts comercials, desenvolupaments a mida i solucions OpenSource.

Components, Mòduls i Plugins

Què són?

On Trobar-los?

-> http://www.joomla.org

Com identificar-los?

Elements Visibles (Mòduls)Funcionalitats “extres”

(Pluggins)Conjunt d’eines (Components)

Exemple d’Integració de Recursos

Google Maps

Google Analytics

Flikr

Youtube

Comunitats Actives

Pàgina principal en Anglès-> http://www.joomla.org

Pàgina de la Comunitat Joomla en Català-> http://www.joomla.cat

Pàgina de la Comunitat en Castellà-> http://www.joomlaspanish.org

Referències

• Creat al 2005, actualment consta d’una versió 1.0.X i de l’actual sistema 1.5.X.

• A febrer de 2009, ja hi ha:– més de 4500 extensions disponibles per als usuaris.– més de 260.000 usuaris registrats al fòrum oficial

• CMS Awards (http://www.packtpub.com/open-source-cms-award-previous-winners)– 2006 – Millor CMS OpenSource– 2007 – Millor CMS OpenSource en php

Guia Pràctica – Descarreguem programari

Instal·lació en un Equip personal amb SO Microsoft Windows XP

1) Descarreguem el Servidor WAMPI. http://www.wampserver.com/en/download.php

2) Descarreguem l’última versió de Joomla!I. http://www.joomla.org/download.html

Guia Pràctica – Instal·lació del WAMP server

1) Executem l’arxiu descarregat1) Podem anar seguint l’assistent acceptant els paràmetres per defecte

fins que finalitzi.2) Un cop instal·lat , cal que aixequem els serveis clicant a “Start all

services” i finalment activar el servidor clicant a “Put Online”. Ja tenim el servidor i la base de dades funcionant.

3) Des de la barra inferior, clicant a la icona del servidor WAMP, trobem la carpeta arrel a “www directory”.

Guia Pràctica – Intal·lació de Joomla!

1) Descomprimim l’arxiu descarregat i el copiem el contingut de la carpeta a la carpeta de la web “C:\wamp\www”.

2) Iniciem l’assistent d’instal·lació connectant-nos a la carpeta “installation “ del nostre ordinador mitjançant l’adreça on haguem deixat la carpeta:1) http://localhost/installation2) http://127.0.0.1/installation

O bé des de l’adreça següent, depenent si hem creat una carpeta:1) http://localhost/joomla/installation2) http://127.0.0.1/joomla/installation

Cliquem següent fins al pas 4, on haurem de definirEls valors de la base de dades

Cliquem següent i seguim amb la opció “no”

Finalment, cal que li podem un nom al lloc, una clau per l’administrador i una adreça de correu electrònic vàlida.

Per tal de poder practicar, instal·larem dades de mostra clicant al botó corresponent.

Un cop eliminat el directori d’instal·lació, ja podem accedirAl nostre lloc web!

Guia Pràctica – Creació d’una pàgina personal

Volem posar-hi: una foto, un text i dos mapes de google.Opció 1 (més senzilla) Tot dins d’un article.Necessitarem:

1. Descarregar i instal·lar un pluggin per GoogleMaps2. Crear un article amb la informació del CV, la foto i el mapa

Guia Pràctica – Creació d’una pàgina personal

Volem posar-hi: una foto, un text i dos mapes de google.Opció 2 (més complexa) Cada cosa per separat.Necessitarem:

1. Descarregar i instal·lar un pluggin per GoogleMaps2. Descarregar i instal·lar un mòdul per googleMaps3. Crear un mòdul amb la foto4. Crear un article amb la informació del CV

Guia Pràctica – Creació d’una pàgina personal

Descarregarem el següent pluggin des de la part d’extensions de la web de Joomla! http://joomla.org:

http://extensions.joomla.org/extensions/photos-&-images/maps/1147/details

Guia Pràctica – Creació d’una pàgina personal

Desarem l’arxiu comprimit i, un cop dins de la nostra àrea d’administració, procedirem a instal·lar el pluggin

1er.Cliquem a installl2on.Examinem i triem el que hem descarregat anteriorment3erCliquem a “Upload...”

Guia Pràctica – Creació d’una pàgina personal

Un cop instal·lat, anem a la pestanya “extensions – pluggins” i cliquem sobre el de Google maps que hi ha.

Un cop a dins, a ma dreta haurem de posar la clau de la API de Google i habilitar-lo.

La següent clau val per la url: http://localhost

ABQIAAAASabQlhxAv3kYUk3R6SY3sxRi_j0U6kJrkFvY4-OX2XYmEAa76BSKxauZl2BpSFvP9bAxomO0Jsr6yQ

Guia Pràctica – Creació d’una pàgina personal

Finalment, crearem l’article on posar-hi tota la informació des del menú “gestor d’articles – article nou”.

Hem de posar-hi un títol, hem de marcar els checks de “publicat” i “front page”, i finalment, redactar el cos del CV.

Podem inserir un mapa, copiant i modificant el següent codi allà on volem que aparegui:

{mosmap width='500'|height='400'|lat='41.53800370370368'|lon='2.4535629629629767'|zoom=‘15'| zoomType='Large'|zoomNew='0'|mapType='Satellite'| showMaptype='1'|overview='0'|text='Això és la EUM'|lang=''}

Guia Pràctica – Creació d’una pàgina personal

Per inserir una imatge, ho podem fer des d’una URL o bé, pujant una foto al servidor.

Finalment, desem la pàgina i ja podem accedir a la portada per trobar-hi els resultats.

Guia Pràctica – Creació d’una pàgina personal

Si volem posar el mapa en un mòdul separat, podem fer-ho baixant i instal·lant el mòdul corresponent: http://extensions.joomla.org/extensions/photos-&-images/maps/8399/details

Un cop instal·lat, cal copiar el mateix codi anterior, dins del mòdul i triar la posició on volem que aparegui.

Guia Pràctica – Creació d’una pàgina personal

Si volem crear un nou punt de menú que enllaci al document fet, caldrà que entrem al menú desitjat, des del gestor de menús, i creem un nou element

Un cop crear, aquest punt ja apareixerà a la configuració del mòdul i podrem triar què mostrar-hi.

Guia Pràctica – Creació d’una pàgina personal

Si volem crear un mòdul personalitzat, per exemple amb una imatge, i mostrar-lo quan aparegui el nostre contingut, ho podem fer des de la pestanya de mòduls -> nou, i triar el que diu “html”

Guia Pràctica – Una mica més de Joomla!

1. Primeres passes amb l’administració1. Modificar elements visibles

1. Plantilla diferent2. Mostrar/ocultar mòduls3. Mostrar/ocultar articles

2. Afegir nous elements1. Crear un mòdul nou amb els que hi ha per defecte2. Crear un nou article3. Crear un nou punt de menú (p.exemple embolcall)4. Crear un nou usuari

Guia Pràctica – Una mica més de Joomla!

1. Alguns elements de terceres persones1. Treballant amb plantilles

1. Descarregar plantilles1. Exemple:

http://www.osskins.com/main/joomla-mambo/free-joomla-15-template-dj-013/2008/12/16

2. Descarregar paquets d’idioma1. Exemple: Paquet en català ->

http://joomlacode.org/gf/project/jtranslation/frs/?action=FrsReleaseView&release_id=9880

3. Descarregar Mòduls, pluggins o complements1. Exemple: Exemple videos Youtube (cercar ‘google’ a

extensions) -> instala, habilita i posa video de mostra http://extensions.joomla.org/extensions/multimedia/video-players-&-gallery/812/details

Alguns enllaços de referència

Plantilles gratuïtes- http://www.siteground.com/joomla-hosting/joomla-templates.htm-http://www.osskins.com/main/?this=qr&meta=cost&metavalue=free&category=2-http://joomla2u.net/category/joomla-15x/-http://www.veero.net/Joomla-Free-Templates/

Plantilles de pagament -http://www.yootheme.com/-http://www.rockettheme.com/-http://www.pixelsparadise.com/-http://www.clubjoomla.com/-http://www.joomlabamboo.com

Creació de Comunitats (CB)-http://extensions.joomla.org/extensions/210/details-http://extensions.joomla.org/extensions/extension-specific/community-builder-extensions

Més extensions-http://extensions.joomla.org/