manual de primeros pasos en joomla www.laprimera.

net

manual de primeros pasos en joomla

Aprende a personalizar y crear contenidos
Versin del manual: 1.0

sta obra est distribuida con una licencia Creative Commons: Reconocimiento-No comercial-Sin obras derivadas 2.5 Espaa
Puede consultar el texto ntegro de la licencia en http://creativecommons.org/licenses/by-nc-nd/2.5/es/ A continuacin le mostramos un resumen de la misma:

manual de primeros pasos en joomla www.laprimera.net

!"#C$ "$

C%!&$!#"%'

Configuraciones b sicas
Personaliza el aspecto de tu Joomla. 1( $stablece tus datos cmo administrador((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((() *( Con+igura el correo electrnico((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((, )( $stablece tus datos de contacto((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((,

!ersonali"aci#n de $oomla
Personaliza el aspecto de tu Joomla. 1( Personalzalo con una plantilla((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( *( Cambia la imagen del .ogo por la tuya propia((((((((((((((((((((((((((((((((((((((((((((((((((((((((((/

%esti#n & sica del Contenido

Cmo organizar el contenido. i!erencias entre contenido y contenido est"tico. 1( %rganizacin de contenido(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((0 *( Creando contenido en 1oomla(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( 1) )( $scribir artculos y noticias en 1oomla(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( 12 ,( Cmo incluir imgenes en nuestros contenidos((((((((((((((((((((((((((((((((((((((((((((((((((((( 10

'adiendo funcionalidad a nuestro $oomla

Podemos instalar un !oro y una galeria de im"genes #ue se integran per!ectamente en Joomla. 1( #nstalar un +oro(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((** *( #nstalar una 3aleria de #mgenes((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((*,

manual de primeros pasos en joomla www.laprimera.net

Configuraciones & sicas

1. Establece tus datos c#mo administrador.
Vamos a editar la in+ormacin del administrador de 1oomla para 4ue +iguren nuestros datos( Vamos a 'itio 56 Administrador de 7suarios( 8a9o la columna nombre: parecer listado el usuario Administrator: ;acemos clic< sobre =l( >ellenamos los datos de +orma parecida a la del gr+ico:

&eniendo en cuenta 4ue el Nombre de (suario y la Contrasea sern las 4ue se le pidan cuando acceda a la administracin de 1oomla ?sustituya midominio por el suyo@ ;ttp:AAmidominio(comAadministrator Pulsamos 3uardar(

manual de primeros pasos en joomla www.laprimera.net

2. Configura el correo electr#nico.

Para 4ue nuestra aplicacin 1oomla +uncione correctamente y enve emails a los nuevos usuarios: etc: necesitamos con+igurar correctamente el correo electrnico( Para ello vamos a usar la cuenta de correo adminBmidominio(com 4ue le creamos con la instalacin de 1oomla( Vamos a 'itio 56 Con+iguracion 3lobal( Vamos a la pestaCa de Correo( >ellenamos el +ormulario de +orma anloga al gr+ico: usando nuestros datos de la cuenta adminBmidominio(com(

Pulsamos 3uardar(

). Establece tus datos de contacto

Para 4ue nuestros usuario puedan ponerse en contacto con nosotros a trav=s del +ormulacio de Contactar: primero tenemos 4ue establecer nuestros datos de contacto( Para ello vamos a Componentes 56 Contactos 56 3estin de los contactos( Veremos listado al usuario administrador: ;acemos clic< sobre =l para editarlo(

>ellenamos el +ormulario de +orma parecido al mostrado a4u( &eniendo en cuenta de usar nuestros propios datos y de enlazar al usuario con el usuario Administrador(

manual de primeros pasos en joomla www.laprimera.net

Podemos crear tantos contactos como 4ueramos( Cuando nuestros usuarios ;agan clic< en contactar: podrn elegir a 4uien dirigirse(

manual de primeros pasos en joomla www.laprimera.net

!ersonali"aci#n de $oomla
1. !ersonal*"alo con una plantilla.
.a +orma ms +acil de personalizar tu 1oomla: es a traves de las plantillas: ya 4ue son las 4ue con+orman el aspecto est=tico de la Eeb( .as ;ay tanto de pago ?suelen ser mas pro+esionales@ como gratuitas( Cambiar de plantilla no supone tener 4ue re;acer toda la Eeb: ya 4ue el contenido no se altera: solo se modi+ica la +orma de mostrar ese contenido(

Primero debe localizar una plantilla 4ue le guste: +,#nde comprar templates profesionales para $oomla

>oc<et&;eme(com 1oomla';ac<(com 1oomlart(com

+,#nde descargar templates gratuitos para $oomla

1oomla%' 1oomla*,(com

7na vez descargado ?ser un arc;ivo (zip@: procedemos a instalarlo siguiendo =stos pasos: $. Abrimos la administracin de 1ooma .ttp/00midominio.com0administrator 2. 7na vez identi+icados: vamos 1nstaladores -2 !lantillas 3 Sitio

manual de primeros pasos en joomla www.laprimera.net

)( A;ora seleccionamos el arc;ivo (zip 4ue ;emos descargado: pulsando $xaminar( ,( 7na vez seleccionado: pulsamos F'ubir Arc;ivo e instalarloG

D( 'i todo ;a ido bien: no mostrar una pantlla indicado FCorrectoG: si muestra algHn error el arc;ivo 4ue nos ;emos descargado no es una plantilla compatible(

manual de primeros pasos en joomla www.laprimera.net

2. Cambia el 4ogo.
Vamos a ver dos +ormas de ;acerlo: la primera es si usamos la plantilla instalada por de+ecto ?spanis;Ired@ y la segunda es si usamos una plantilla 4ue nos ;ayamos descargado( 1. Si va a usar la plantilla 5ue instalamos por defecto 1( Crear un logo propio con el nombre spanis;I9oomlaIlogo(png 2. Vaya al panel de control ? ;ttp:AAadmin(alo9amientoEebcenter(com @ )( 7na vez identi+icado: vaya a Prodcutos 56 Josting ,( $n la columna KJerramientasK: pulse sobre el icono con +orma de carpeta KLodi+icar 'itioK D( 'e le abrira una ventana con el contenido de su ;osting( -( $ntre en la carpeta templates 2( $ntre en la carpeta spanis;Ired /( $ntre en la carpeta images 0( $n K'ubir Arc;ivos al 'itio MebK pulse el boton K8roEseK 1N( 'eleccione de su disco duro: el logo 4ue ;a creado antes con nombre Kspanis;I9oomlaIlogo(pngK 11( $n K'ubir Arc;ivos al 'itio MebK: pulse el botn K'ubir Arc;ivoK 2. Si va a usar una plantilla descargada de internet. 1( "escomprima el arc;ivo de la plantilla (zip en un directorio vacio de su disco duro( *( Al descomprimir el arc;ivo se le crear un nuevo directorio con el nombre de esa plantilla: entre en ese directorio( )( Ver arc;ivos y directorios: localice un directorio llamado FimagesG ,( A;ora localice el logo 4ue 4uiere cambiar: bralo con algun editor de imagenes y editelo a su gusto( 5. A;ora debe subirlo a su ;osting: al directorio Ftemplates0nombre6de6plantilla0images0G

manual de primeros pasos en joomla www.laprimera.net

%esti#n & sica del Contenido

1. 7rgani"aci#n del contenido.
Cuando ;ablamos de contenido: nos re+erimos a los artculos y secciones 4ue va a tener nuestro portal( 8sicamente el contenido se clasi+ica en di+erentes secciones: las cuales a su vez se dividen en varias categorias(

As por e9emplo podramos tener las siguientes secciones ?en azul@ con sus correspondientes categorias ?en amarillo@ : 1oomla di+erencia el contenido en dos tipos: contenido y contenido esttico(

$l contenido son noticias: artculos: etc( $s decir: todo a4uello 4ue se va aCadiendo +recuentemente( $l contenido esttico suelen ser secciones +i9as de la Eeb: 4ue no se suelen aCadir +recuentemente ni se modi+ican normalmente: aun4ue por supuesto se puede modi+icar en cual4uier momento(

$n nuestro gr+ico tenemos como contenido: noticias ?nacional e internacional@: artculos ?opinion: reporta9es y crticas de libros@ y cmo contenido esttico tenemo el Acerca del Autor( Vamos a ver a;ora cmo creariamos la estructura de contenido 4ue tenemos en el gr+ico de arriba en nuestro 1oomla( Primero borraremos las secciones y categorias 4ue vienen por de+ecto en 1oomla ya 4ue vamos a crear las nuestras propias( Para poder borrar una seccin primero se necesita borrar las categorias contenidas en ella y para poder borrar una categoria: primero ;ay 4ue borrar los articulos y noticias contenidos en esa categoria( Asi pues: borrarremos primero todos los articulos de contenido: para despues borrar las categorias y por Hltimo borrar las secciones( &ambien deberemos borrar el contenido 0

manual de primeros pasos en joomla www.laprimera.net

esttico 4ue viene por de+ecto( Vamos a borrar todos los articulos de contenido 4ue 1oomla instala por de+ecto: 1( Abrimos la administracin de 1oomla ;ttp:AAmidominio(comAadministratorA *( !os vamos a O&odos los artculos de contenidoO(

)( !os mostrar todos los artculos de contenido 4ue por de+ecto vienen con 1oomla( .os vamos a borrar todos: ya 4ue nosotros vamos a crear las nuestras propias( Para ello seleccionamos todas y pulsamos en F8asuraG: =sto eviar todo el contenido a la papelera: ,( .o 4ue acabamos de borrar se ;a guardado en la papelera: asi 4ue la vacaremos: D( Larcamos todo y pulsamos en 8orrar A;ora vamos a borrar todas las categorias: -( !os vamos al Administrador de Categorias(

1N

manual de primeros pasos en joomla www.laprimera.net

2( !os mostrar las categorias 4ue por de+ecto vienen con 1oomla( .as vamos a borrar todas: ya 4ue nosotros vamos a crear las nuestras propias( Para ello seleccionamos todas y pulsamos en F8orrarG:

8orraremos las secciones: /( !os vamos al Administrador de 'ecciones:

0( !os mostrar las secciones 4ue por de+ecto vienen con 1oomla( .as vamos a borrar todas: ya 4ue nosotros vamos a crear las nuestras propias( Para ello seleccionamos todas y pulsamos en F8orrarG: 11

manual de primeros pasos en joomla www.laprimera.net

Por Hltimo: para borrar el contenido esttico:: 1( !os vamos al Administrador de Contenido $sttico(

*( 'eleccionamos todo y pulsamos en 8orrar( )( Vacamos el contenido de la papelera como ;icimos anteriormente( Pa tenemos nuestro 1oomla limpio de contenido( A;ora es el momento de empezar a crear el nuestro( 1*

manual de primeros pasos en joomla www.laprimera.net

2. Creando contenido en $oomla.

Vamos a pasar a crear la estructura para clasi+icar nuestro contenido segHn el gr+ico del apartado anterior: record=moslo:

Primero vamos a crear las secciones de contenido ?!oticias y Artculos@ y despues sus categorias( Por Hltimo crearemos la seccin de OAcerca del AutorO 4ue como vimos antes se trata de contenido esttico( Vamos a crear las secciones: 1( !os vamos al Administrador de 'ecciones:

*( Pulsamos en O!uevoO(

1)

manual de primeros pasos en joomla www.laprimera.net

)( >ellenamos el +ormulario ?veamos un e9emplo en la imagen@:

,( 'i 4ueremos ad9untar una imagen personalizada: 4ue est en nuestro ordenador: a =sta seccin podemos subirla al servidor: pulsando sobre O'ubir: seleccionamos la imagen y aceptamos( "espues de =sto debemos re+rescar la pgina pulsando QD para 4ue la imagen salga listada en O#magenO( D( Por Hltimo pulsamos en O3uardarO( Pa tenemos creada la seccin O!oticiasO( Para las seccin OArtculosO podemos repetir los pasos anteriores( A;ora creremos las categorias: para ello: a modo de e9emplo veremos paso a paso como crear una categoria para la seccion O!oticiasO( Primero crearemos la categoria O!acionalO para la seccin O!oticiasO( 1( !os vamos al Administrador de Categorias(

1,

manual de primeros pasos en joomla www.laprimera.net

*( Pulsamos en O!uevoO(

)( Al gual 4ue ;icimos con la seccin: rellenamos el +ormulario: un e9emplo de como puede 4uedar a continuacin:

1D

manual de primeros pasos en joomla www.laprimera.net

,( Pulsamos 3uardar( 8ien: si repetimos =stos dos procesos para crear las demas secciones y categorias ;abremos temrinado de crear nuestra estructura de contenido( !os 4ueda crear la seccin +i9a OAcerca del AutorO 4ue se trata de un contenido esttico( Para ello: 1( !os vamos a Administrador del Contenido $sttico(

*( Pulsamos O!uevoO

)( >ellenamos el +ormulario:

1-

manual de primeros pasos en joomla www.laprimera.net

Pa tenemos creado todo el contenido( $n un +uturo podremos ir aCadiendo todo el 4ue 4ueramos( .o normal es ir aCadiendo +recuentemente nuevas noticias y artculos para 4ue nuestros lectores cada vez 4ue visiten la Eeb se encuentren nuevo contenido(

). Escribir art*culos 8 noticias en $oomla.

Cada vez 4ue 4ueramos aCadir un nuevo artculo o noticia: lo podremos ;acer de la siguiente +orma: 1( Abrimos la administracin de 1oomla .ttp/00midominio.com0administrator *( Clic< sobre FACadir un !uevo ArticuloG

12

manual de primeros pasos en joomla www.laprimera.net

)( $scribimos el ttulo: seleccionamos la categoria e introducimos el texto de introduccin ?cmo minimo@(

,( A;ora debemos indicarle 4ue lo publi4ue en la portada y cHando publicarlo(

D( Por Hltimo: pulsamos F3uardarG

1/

manual de primeros pasos en joomla www.laprimera.net

9. C#mo incluir im genes en nuestros contenidos.

'i 4ueremos aCadir una imagen al artculo 4ue tenemos en nuestro ordenador: tendremos 4ue : 1( Cuando estemos escribiedo el contenido del artculo en cuestin: tenemos 4ue pulsar O'ubirO( *( Pulsaremos $xaminar para seleccionar la imagen de nuestro disco duro( )( 7na vez seleccionada: pulsamos el botn O'ubirO y cerramos la ventanita( ,( Pulsamos QD para re+rescar la pgina( D( A;ora aparecer la imagen listada en la parte derec;a en O3aleria de #mgenesO( Por e9emplo si ;emos subido una imagen llamada Ologo(gi+O:

-( A;ora tenemos 4ue pulsar en el boton seCalado en ro9o en la siguiente imagen:

10

manual de primeros pasos en joomla www.laprimera.net

2( A;ora aparecer en la lista de la iz4uierda: tenemos 4ue pulsar sobre su nombre para marcarlo: tal como indica la siguiente imagen:

/( A;ora: dnde 4ueramos aCadirla: debemos pulsar el boton OPoner #magenO situado aba9o a la iz4uierda de la si4uiente imagen:

*N

manual de primeros pasos en joomla www.laprimera.net

0( sto podr RmosimageS en el editor: lo 4ue e4uivaldr a la imagen selecciona( Podemos pulsar en previsualizar para ver como 4uedara(

1N( Cerramos la ventana 4ue se nos ;a abierto de previsualizacin( 11( A;ora podemos o 3uardar el artculo o seguir aCadiendo mas texto e imagenes( A la ;ora de aCadir varias imgenes tenemos 4ue repetir el anterior proceso( Cmo siempre aCade RmosimageS: la imagen 4ue aCade es la correspondiente al orden en 4ue est= en la lista de imagenes de la derec;a( $l primer RmosimageS correspondr a la primera imagen de la lista: el segundo RmosimageS a la segunda y as sucesivamente(

*1

manual de primeros pasos en joomla www.laprimera.net

'adiendo funcionalidad a $oomla

1. 1nstalar un :oro.
Varios son los componentes 4ue se le puede instalar a 1oomla para a;cer +uncionar un +oro: pero destaca sobre todo por su calidad: Qire8oard( Vamos a ver cmo podemos instalarlo( $. Primero nos tenemos 4ue descargar la Hltima versin disponible: en el momento de escritura de =ste manual es la versin 1(N() Tenlace de descargaU: puede comprobar si existe una nueva versin en la direccin ;ttp:AAEEE(besto+9oomla(com 7na vez descargado el arc;ivo en cuestin: en nuestro caso component_Fireboard_Forum_1.0.3.zip abrimos la administracin del 1oomla( *( "entro de la administracin de 1oomla vamos a #nstaladores 56 Componentes(

Pulsamos el botn E;aminar y seleccionamos el arc;ivo 4ue nos acabamos de de descargar( %. 7na vez seleccionado: pulsamos el botn Subir arc.ivo e instalarlo( 'i todo ;a ido bi=n: veremos algo parecido a esto:

**

manual de primeros pasos en joomla www.laprimera.net

,( A;ora nos vamos a FComponentesG 56 FQire8oard QorumG( Veremos =sto:

&enemos 4ue pulsar en el botn FApplyVG 4ue ;ay 9usto deba9o de FClean #nstallationG(!os saldr =ste mensa9e:

.o cual indica 4ue ;a sido instalado de +orma satis+actoria( D( A;ora tenemos 4ue crear un enlace desde el menH principal para 4ue nuestros usuarios puedan acceder a =l( Para ello nos vamos a Lenus 56 mainmenu( -( 7na vez alli: pulsamos O!uevoO( P despues seleccionamos FComponenteG del apartado FComponentesG

*)

manual de primeros pasos en joomla www.laprimera.net

2( A;ora indicamos el texto del enlace: en nuestro caso FQoroG y seleccionamos a 4ue componente vamos a enlazar: en nuestro caso FQire8oard QorumG(

/( Por Hltimo pulsamos el botn F3uardarG

2. 1nstalar una galeria de im genes.

Al igual 4ue para el +oro existen muc;os componentes para galerias de imgenes: pero una de las me9ores es Woom 3allery( Veamos su proceso de instalacin: $. !os descargamos el componente desde la Eeb o+icial de Woom 3allery: ;ttp:AAEEE(zoom+actory(orgAindex(p;pXoptionYcomIremositoryZ#temidY-1Z+uncYsta rtdoEnZidY* *( A;ora vamos a #nstaladores 56 Componentes

*,

manual de primeros pasos en joomla www.laprimera.net

&enemos 4ue pulsar el botn O$xaminarO y seleccionar el primer arc;ivo 4ue nos ;emos descargado( )( Pulsamos el botn F'ubir arc;ivo e instalarloG( 'i todo ;a ido bi=n veremos una pantalla como =sta:

,( Pulsamos el enlace de Continuar((( D( Pa tenemos la 3aleria instalada( A;ora vamos a poner un enlace en el Lenu Principal 4ue nos lleve a la galeria( -( Vamos a Lenus 56 mainmenu( 2( 7na vez alli: pulsamos O!uevoO( P despues seleccionamos FComponenteG del apartado FComponentesG

*D

manual de primeros pasos en joomla www.laprimera.net

/( A;ora indicamos el texto del enlace: en nuestro caso F3aleria de imagenesG y seleccionamos a 4ue componente vamos a enlazar: en nuestro caso Fz%%m Ledia 3alleryG(

0( Por Hltimo pulsamos el botn F3uardarG(

*-