Proyecto ASIRWEb Joomla

Pagina Web en Joomla
1.-Introduccin
--------------------------------------------------------------------------------- 2 - 5
1.1.-Caractersticas Joomla.
1.2.-Que son las Extensiones?
2.-Requisitos
-------------------------------------------------------------------------------------- 5 -
!.-El "er#idor $am% ------------------------------------------------------------------------
- &
!.1.-'escar(a e Instalacin $am%.
).-Instalacin de Joomla en *local+ost, --------------------------------------- & -
1)
).1.-Creacin -ase de 'atos ./0/m1admin2.
5.-3dministracin de Joomla. --------------------------------------------------------- 15
- )
5.1.- Estructurando Joomla.
5.1.1.-Creando las C34E56RI3". --------------------------------------------------- 1
- 22
5.1.2.-Creando los 3R4IC786". ------------------------------------------------------ 22
- 2&
5.1.!.-Creando los 9E:7". --------------------------------------------------------------
2& - ))
5.1.).- Re(istro de 7suarios. ------------------------------------------------------------
)) - )
5.1.5- /ersonali;aciones /lantilla. -------------------------------------------------- )<
- 5!
1
5.1.- Instalacin 5alera de =otos. ------------------------------------------------- 5!
- 1
5.1.<- /osicionamiento. --------------------------------------------------------------------
1 - )
- Reca%tc+a > 9dulos 1 /lu(Ins. -------------------------------------------------- )
- <1
<.- "u?iendo $e? a 0ostin(er con a@ee?a. ------------------------------------ <1 -
A
1.-Introduccin
Este proyecto va destinado a aquellas personas que quieren crear una pagina web pero no
tienen muchos conocimientos de lenguajes de paginas web o no quiere invertir mucho
dinero o ninguno en una WEB
Joomla es un !"# $!ontent "anagement #ystem%& es decir& es un sistema de
administraci'n de contenidos web #u c'digo es abierto y est( escrito en P)P& usa bases de
datos "y#*+ y se distribuye bajo la licencia ,P+
-l ser un so.tware libre es muy conocido por webmasters y gente que se dedica a la
creaci'n de paginas WEB
/ndependientemente de la preparaci'n de una persona o o.icio&cualquier persona puede
aprender a utili0ar Joomla& ya que para saber manejarlo& solo hay que aprender a usar la
1
inter.a0 y sus componentes
Joomla consta de 1 partes& el Bac2end o Panel de -dministraci'n$3onde se con.igura toda
la WEB% y el .rontend$la pagina en si& lo que ve el publico%&donde se muestra la in.ormaci'n
de la WEB
Este administrador de contenidos puede utili0arse en una P! local $en +ocalhost%& en una
/ntranet o a trav4s de /nternet y requiere para su .uncionamiento una base de datos creada
con un gestor de bases de datos $"y#*+ por ejemplo%& as5 como de un servidor )66P
-pache
En Joomla tiene muchas opciones de con.iguraci'n para la WEB& puedes usar e7tensiones
para hacer casi todo lo que te propongas& aparte e7isten en /nternet un gran numero de
plantillas para Joomla& algunas gratuitas y otras de pago
En ellas la organi0aci'n de las posiciones de la plantilla son distintas& solo hay que
encontrar la plantilla que mas se adapte a lo que nosotros &para hacer una web agradable y
vistosa
8o para crear mi web solo utili0are herramientas gratuitas& instalaremos todos las
e7tensiones que necesitemos para crear una web amigable
)oy en d5a un interminable numero de empresas usan Joomla para crear sus paginas WEB&
se ha vuelto la .orma mas .(cil de crear una web y tambi4n la m(s econ'mica& pues si la
haces con herramientas gratuitas solo tendr(s que contratar un 3ominio para alojar tu sitio
Joomla
1.1 Caractersticas Joomla
9Publicaci'n de !ontenidos que puedes organi0ar por !ategor5as
:
9Podremos de.inir tantos men;s y submenus como necesitemos
9-dministraci'n de im(genes y .icheros
9-dministraci'n de <suarios para crear contenidos espec5.icos u accesos a
determinadas partes de tu WEB solo para usuarios registrados
93ise=o basado en plantillas que podr(s modi.icar si lo necesitas para adaptarlas a
tus necesidades
9!reaci'n de m'dulos adicionales para poder colocar contenidos en determinadas
parte de la WEB
1.2 Que son las Extensiones?
9E7tensiones
<na de las mayores potencialidades que tiene este !"# es que su .uncionalidad base puede
ser e7tendida por medio de e7tensiones& los tipos de e7tensiones son> !omponentes&
"'dulos& Plantillas& Plug/ns y +enguajes !ada uno de estos tipos e7tiende las
.uncionalidades de Joomla? de una manera di.erente>

9!omponentes
#on e7tensiones que cargan como elemento .uncional principal en Joomla?& un componente
usualmente agrega una .uncionalidad de impresi'n de contenido a Joomla& este es el caso de
com@content que es el componente principal de administraci'n de contenido est(ndar de
Joomla& se caracteri0an porque Joomla de .orma nativa solo soporta el manejo de un solo
componente al mismo tiempo

9"'dulos
A
#on e7tensiones que nos permiten cargar en una posici'n de una plantilla de Joomla una
salida de datos una .uncionalidad espec5.ica& usualmente un m'dulo nos permite colocar la
salida de un componente

9Plantillas
#on e7tensiones que nos permiten cambiar la parte de vista del !"#& el archivo inde7php
de la plantilla de Joomla? determina donde cargar(n los componentes y los m'dulos

9Plug/ns
+os Plug/ns son e7tensiones que corren bajo disparadores seleccionados& reali0ando
acciones seleccionadas mientras el !"# reali0a la carga
Ejemplo de e7tensiones serian >
,eneradores de .ormularios din(micos
,estores de documentos
,aler5as de im(genes multimedia
#o.tware de .oros y chats
!alendarios
#o.tware para blogs
B
2.-Requisitos
En la pagina de Joomla nos indica los requisitos para usar cada Cersi'n& nosotros usaremos
la versi'n 1DE
D
-Sistema Operativo.
Windows o +inu7 $8o trabajare solo en Windows E%
9Navegador
Podemos usar cualquier navegador para trabajar con Joomla& en mi caso uso ,oogle
chrome
9Servidor Apache.
8o he instalare el servidor Wamp para trabajar en localhost
9Dominio o Subdominio.
Finalmente veremos la Web subida a un subdominio
9Cms Joomla
<tili0aremos distintos e7tensiones $Plug/ns y m'dulos% que descargaremos de /nternet&
ademas del paquete de instalaci'n de Joomla en espa=ol
3.-El Servidor Wamp
Para instalar Joomla en un servidor como es apache lo primero que haremos es descargar el
Wamp que sera nuestro servidor
Wamp son las siglas de GWindowsG& G-pacheG& G"y#*+G& GP)PG
H
Windows>
!omo sistema operativo en el que se basan los programas
-pache>
!omo servidor web
"y#*+>
!omo gestor de bases de datos
P)P>
!omo lenguaje de programaci'n de cara al servidor
3.1.-Descarga e Instalacin Wamp
3escargamos de la pagina o.icial el Wamp en mi caso la versi'n 11 para HA bits
3amos clic2 sobre el instalador que se nos ha descargado y empe0aremos a instalar el
Wamp
E
I
3amos a Je7t
-ceptamos los t4rminos de licencia y damos Je7t
- continuaci'n deberemos elegir la direcci'n en nuestro pc donde instalaremos el Wamp& lo
K
dejamos por de.ecto
3amos en ne7t y comen0ara a instalar
<na ve0 .inali0ado ejecutamos el servidor Wamp
1L
<na ve0 ejecutado podemos empe0ar la instalaci'n de Joomla
4.-Instalacin de oomla en !local"ost#
En el disco duro !> creamos una carpeta llamada WWW en la cual meteremos el pac2 de
instalaci'n de Joomla descomprimido El Joomla que instalaremos es la versi'n 1DE
<na ve0 este e7tra5da la carpeta en www escribimos en la barra del navegador localhost
y nos saldr( la instalaci'n de Joomla
!omien0a la /nstalaci'n
11
3amos a siguiente
3amos a siguiente
- continuaci'n deberemos meter los datos de nuestra Base de datos& para ello debemos
crearla primero
11
4.1.-$reacin %ase de Datos &'('m)admin*
Por tanto vamos a P)Pmyadmin poniendo en la barra del navegador
http>MMlocalhostMphpmyadminM
1:
3amos en Bases de 3atos
!reamos la Base de datos que se llamara Joombd
Creacin de Usuario (!m"admin#
Camos a <suarios para crear un usuario con privilegios sobre la base de datos& as5 poder
trabajar con la base de datos creada
1A
-gregamos un nuevo usuario con los siguientes datos $imagen -rriba%
<na ve0 creado&damos en el usuario a Editar los privilegios y abajo buscamos Privilegios
espec5.icos para la base de datos
#eleccionamos nuestra base de datos y damos a continuar
1D
-h5 marcamos todos los privilegios y guardamos 8a tendremos creado B3 y usuario para
esa B3
$olvemos a la instalacin de Joomla con el usuario creado y con.igurado
1H
/nsertamos los datos de la tabla creada y el usuario con permisos y damos a #iguiente
+a con.iguraci'n F6P que es el siguiente paso lo dejamos como esta y pulsamos
#iguiente
En la siguiente pantalla pondremos el nombre de #itio&nuestra web se llamara %&l b'ho
arti(icial)
6ambi4n debemos agregar los datos para entrar en la administraci'n
1E
Por ultimo damos a instalar datos de ejemploEn mi caso los voy a instalar
Finalmente una ve0 que se hayan instalado los 3atos de ejemplo borramos la carpeta de
instalaci'n
1I
+.-,dministracin de oomla
&N*+A,OS &N -A AD,.N.S*+AC.ON
Para entrar al Bac2end o administraci'n de Joomla debemos poner en la barra del
navegador>
localhostMadministratorM
Jos aparecer( lo siguiente
5.1.- Estructurando Joomla
Camos a ir estructurando nuestro sitio Web
)e borrado todos lo art5culos y he quitado todas las categor5as prede.inidas&para hacer una
organi0aci'n m(s a la medida de la Web que buscamos -s5 podremos crear los men;s y
elementos como m(s nos guste
1K
Jos dirigimos en la administraci'n a E7tensionesN,estor de "'dulos& ah5 des publico
todos los m'dulos que no necesite
Camos a limpiar un poco para comen0ar con nuestra organi0aci'n del sitio WEB
+o primero vamos a quitar los banners& des publicando los m'dulos que est4n en las
posiciones siguientes
Position9K position91L position911
Estos son los m'dulos que dejare publicados
"(s adelante se a=adir( alg;n modulo m(s
5.1.1-Creando las CATEG!IA"
$amos a comen/ar con la organi/acin de las CA*&0O+.AS
Noticias
6ecnolog5a
!ultura
Fotogra.5a
1L
$1deos
6ecnolog5a
6utoriales
6railers
Carios
&stando en la administracin Joomla creamos las categor1as
Entramos en !ontenidoN,estor de !ategor5as -=adimos las categor5as necesarias
*ueremos organi0arlo de manera que dentro de JO6/!/-# haya : categor5as que cuelgan
de ella & en las que guardaremos los distintos tipos de noticias
$6ambi4n tendremos ,aler5a& que se controlaran con las categor5as del Phoca
,allery$componente% #e e7plicara mas adelante& cuando se agreguen la galer5as de .otos%
Por ultimo C/3EO#& en el que pondremos los art5culos de contenido de v5deo y los
dividiremos en Carias categor5as
NO*.C.AS
2.- !ategor5a NO*.C.AS
11
3amos en ,estor de categor5as y creamos la primera categor5a que se llamara
JO6/!/-#
Jo la asociamos a ninguna categor5a padre y le damos estatus publicado y acceso p;blico
6ecnolog5a& !ultura y .otogra.5a cuelgan de Noticias.
Creemos las categor1as de Noticias.
2.2.-*ecnolog1a (NO*.C.AS#
3amos a a=adir nueva categor5a& esta se llamara 6ecnolog5a y el padre es
JO6/!/-#)a sido creado por super user
11
2.3.- Cultura (NO*.C.AS#
+o he creado igual que el anterior& cambiando por supuesto el nombre y a=adiendo que el
padre es JO6/!/-#
1:
1A
1D
1H
El acceso sera publico
2.4. -5otogra(1a (NO*.C.AS#
)e puesto el nombre a la categor5a y en el campo padrePN JO6/!/-#
*uedar5an las categor5as as5>
1E
$.D&OS
2.- !ategor5a $.D&OS
6ecnolog5a& 6utoriales& 6railers y varios cuelgan de $.D&OS.
-s5 tendremos los art5culos organi0ados dentro de cada secci'n
!reamos la nueva categor5a C/3EO#
En padre no pongo ninguno ya que C/3EO# ser( el padre de otras categor5as
3amos sobre ,uardar y Juevo
-hora creare las categor5as que colgaran de C/3EO#
+as categor5as dentro de C/3EO# son>
$.D&OS
6ecnolog5a
1I
6utoriales
6railers !ine
Carios
2.2.-$.D&OS(tecnolog1a#
!rearemos el resto de categor5as de C/3EO# igual que tecnolog5a& poniendo como
PadrePN9C/3EO#
2.3.-$.D&OS (*utoriales#
Esta categor5a sera accesible para usuarios publico y el padre es C/3EO#
1K
En todas las las categor5as que hemos creado para organi0ar los C5deos hemos puesto como
padre C/3EO#
*uedar5an las categor5as de C/3EO as5 organi0adas
#i el estatus de la categor5a es publicado& los art5culos de esta categor5a se ver(n en nuestro
sitio
5.1.#.-Creando los A!TIC$%"
+os art5culos ser(n la .orma b(sica de mostrar in.ormaci'n en nuestra WEB
+os requisitos m5nimos para un art5culo son el t5tulo & una categor5a y el te7to
+o primero que haremos ser( con.igurar el editor que usaremos para escribir los art5culos&yo
e elegido el que viene por de.ecto& pero viene con lo b(sico para escribir un articulo&por lo
que conviene usarlo en su versi'n E7tendida
-&D.*O+ *&6*O TinyMCE
En E7tensionesNPlug/ns dentro de Plug/ns buscamos el Editor 9 6iny"!E entramos y en
:L
Opciones B(sicas cambiamos la .uncionalidad a e7tendida
!on ello tendremos muchas m(s .unciones a la hora de escribir o editar un art5culo
ARTICULOS
2.-Creando Art1culo (*ecnolog1a#
Empe0aremos creando un par de art5culos por categor5a Estando en el Bac2end vamos a
!ontenidoN,estor de art5culosNa=adir articulo nuevo
El art5culo pertenecer( a la categor5a tecnolog5a
2.2.- .nsertar imagen articulo
:1
En la captura superior ya est( insertada la imagen
!omo lo hacemos>
3amos al icono de agregar imagen en el editor de te7to del articulo y nos saldr( lo siguiente
)e cogido la <Q+ de la imagen y la he pegado donde pone <Q+ de la imagen
+uego vamos a a la pesta=a apariencia y ah5 podremos con.igurar como queremos que se
vea la imagen con respecto al te7to del art5culo y el tama=o que queremos dar a la imagen
3amos a insertar
:1
2.3-.nsertar -&&+ ,AS en art1culo
Para que el art5culo no se muestre completo en nuestra pagina$en la vista previa%& sino se
muestre solo hasta donde queramos
6enemos la opci'n leer mas
Para ello ponemos el cursor$la barra de escritura% en la parte del te7to donde queramos y
pulsamos leer mas
Jos saldr( esto al .inal del art5culo al publicarlo y verlo en la lista de noticias
::
:A
:D
8a tendremos creado el primer art5culo de la categor5a tecnolog5a& solo tendr5amos que
crear un elemento de men; para mostrarlo& que lo e7plicare mas adelante
Podremos crear los di.erentes art5culos para las categor5as que queramos& tantos como
queramos
#olo tenemos que crear el articulo y en la opci'n categor5a elegir la categor5a a la que
pertenecer(
2.4- .nsertar 5uente de donde hemos cogido el Articulo
!uando creemos un articulo que hayamos cogido de alguna otra web conviene poner al .inal
de la noticia la Fuente a la que pertenece la noticia
Para ello cuando estemos creando el articulo al .inal ponemos Fuente> y escribimos lo que
queramos& yo he escrito para que se vea al .inal del articulo wwwabces
<na ve0 escrito lo seleccionamos y pulsamos el icono de crear hiperv5nculo
:H
En la imagen es una como una cadena que marcado en amarillo
Jos saldr( una ventana para con.igurar el hiperv5nculo
)e rellenado los campos para la con.iguraci'n del lin2 y en la opci'n 3estino he puesto
que me lo muestre en una ventana nueva$/magen -bajo%
:E
3amos a actuali0ar y lo tendremos listo
3.-Creando Art1culo ($.D&OS#
Para la categor5a v5deos solo creare art5culos en los que solo se muestre un v5deo
"e interesa que al ver el articulo antes de abrirlo se vea la imagen del v5deo y que lo
podamos reproducir sin abrir el articulo
Por ello vamos a instalar el Plugin -llCideos $by JoomlaWor2s%
Camos a E7tensionesN,estor de E7tensiones y buscamos el 0ip en nuestro P!
3amos a #ubir e instalar
:I
<na ve0 instalado vamos a E7tensionesN,estor de Plug/ns y buscamos el Plugin
Este Plugin lo activamos
8o no he tocado las con.iguraciones del Plugin& es tan simple como poner una etiqueta as5>
N RyoutubeS RMyoutubeS
Ponemos la etiqueta de youtube y entre la etiqueta el c'digo del v5deo de 8outube de esta
manera
,uardamos y ya tendremos creado el -rticulo de la categor5a Carios *ue lo mostraremos
mas adelante en un elemento de men;
:K
#e ver5a as5 el articulo
AL
5.1.&-Creando los 'E($"
+a navegaci'n y el acceso a los recursos en el sitio web se reali0an a trav4s de la
navegaci'n que se decide en los men;s
+o men;s en Joomla? son grupos de v5nculos a categor5as& art5culos de contenido&
componentes o p(ginas e7ternas
+os men;s son m'dulos& hay distintos tipos de men;s y pueden ser creados todos los que
necesitemos /ncluso pueden mostrarse di.erentes men;s dependiendo de la p(gina por la
que se est4 navegando
!ada men; debe tener un nombre de identi.icaci'n ;nico usado internamente por Joomla?
<n men; s'lo es visible en el sitio web si el correspondiente m'dulo mod@mainmenu est(
habilitado $publicado%
A1
Joomla? utili0a un ;nico m'dulo de men;& llamado internamente mod@mainmenu +os
men;s que se han creado en la instalaci'n est(n asociados a instancias de este m'dulo 8
cada ve0 que se crea o elimina un men; se act;a sobre la instancia de este m'dulo&
mod@mainmenu
Pensar detenidamente qu4 men;s& con qu4 5tems de men; y d'nde ser(n accesibles y para
qu4 usuarios& ser( una parte determinante en la elaboraci'n de nuestra web
<sare 1 men;s el men; usuario que viene creado por de.ecto y el men; 6op que
crearemos
MENU TOP
Empe0amos creando el ,&NU *O que sera el men; superior de la pagina
Coy a crear el men; y voy a a=adirle unos cuantos items de men;
En mi caso la estructura del men; top ser5a as5
-.N.C.O -NO*.C.AS(7# -0A-&+.A(hoca galler"# -$.D&OS(7#
Estando en el Bac2end vamos a -=adir nuevo "en; dentro de la pesta=a "en;s
A1
Qellenamos 6itulo& 6ipo de "en; y descripci'n
,uardamos y cerramos
8a tendremos creado el men;
9Enla0ar "en; con "odulo
)e elegido el modulo prede.inido llamado -rriba para el "EJ< 6OP& pero lo e puesto
3es9publicado$el modulo% ya que vamos a instalar un modulo de men; desplegable y
desde la con.iguraci'n del modulo pondremos el men; a mostrar
-hora debemos a=adir al men; los distintos items
En la opci'n men;s& debe aparecer el "EJ< 6OP que hemos creado #eleccionamos el
men; y agregamos un nuevo elemento para este men;
2.-.N.C.O
"i primer elemento ser( .N.C.O en el mostrar4 los art5culos en .orma de Blog& para que
apare0can en nuestra pagina principal
A:
9!on.iguraci'n
En 6ipo Elemento "en; seleccionamos !ategor5a Blog
!omo queremos que .orme parte del "EJ< 6OP & en +ocali0aci'n "en; debemos
seleccionar el men; al que pertenecer( el elemento
El acceso al 5tem ser( publico
Puedes con.igurar las opciones de plantilla en las opciones de la derecha& para ver en
distintas columnas los art5culos& cuantos art5culos principales mostraren el elemento de
men;
8o he puesto en la opci'n $Tcolumnas% que me lo muestre en una columna& as5 ver los
archivos de uno en uno &unos debajo de otros
+a otra opci'n que e cambiado es Orden -rt5culos& lo he puesto para que me muestre los
AA
m(s recientes primero
#eleccionamos que -rt5culos mostrar yo he puesto la categor5a JO6/!/-#
8a tenemos creado el primer elemento de "en;
3.-NO*.C.AS
-hora crearemos el elemento de men; JO6/!/-# del cual colgaran $Joticias 6ecnolog5a&
Joticias Fotogra.5a&Joticias !ultura%
Para ello hacemos el mismo procedimiento que para crear el elemento /J/!/O& pero
elegimos que nos muestre !ategor5a Blog
AD
AH
AE
)e seleccionado en la con.iguraci'n requerida la categor5a superior JO6/!/-# para que
nos muestre a partir de esa categor5a Pues dentro de la categor5a noticias hay varias
categor5as que cuelgan de ella
-cceso> Publico
+ocali0aci'n "en;> "EJ< 6OP
+a locali0aci'n del elemento de men; es el "EJ< 6OP y elemento padre no tiene&
porque JO6/!/-# sera el padre de otros elementos
Elegimos tipo de elemento de men; para mostrar los art5culos en .orma de B+O,
#eleccionamos en las opciones de la derecha elegir una categor5aPN Joticias y como
deseamos ver las noticias m(s vistas en las Opciones Plantilla Blog selecciono
ordenarlo por "as vistos
En este caso si seleccionamos la categor5a /J/!/O y JO6/!/-# solo nos saldr(n los
AI
art5culos de esa categor5a
Para cambiar esto y que nos muestre tambi4n los art5culos de las subcategorias y as5 mostrar
todas los art5culos de las categor5as dentro de JO6/!/-#
Camos en el men; principal de administraci'n a ,estor de -rt5culosPNOpcionesPN
Pesta=a $Blog M 3ise=os destacados%
)e puesto numero de T!olumnas P 1 para que me los muestre de uno en uno los art5culos
hacia abajo$/magen arriba%
-bajo del todo esta la opci'n que nos interesa para mostrar todos los art5culos de las
subcategorias
Podemos elegir cuantas subcategorias queremos incluir& por de.ecto est( en ninguna
Esta es mi con.iguraci'n global para mostrar los art5culos de las categor5as en .orma de
Blog
3.2.-NO*.C.AS (Noticias *ecnolog1a#
AK
#eguimos creando el "en; top ahora haremos los mismos pasos que en el punto anterior
Elegimos el 6ipo de elemento de "en; PN !ategor5a Blog
+a locali0aci'n del elemento de men; es el "EJ< 6OP y el elemento padre es
JO6/!/-#
*ueremos que nos muestre las noticias de tecnolog5a por lo que en las opciones de la
derecha & en el apartado con.iguraci'n requerida he elegido la categor5a 6ecnolog5a
DL
En las Opciones Plantilla Blog& podemos tambi4n editar cosas que est(n en la
con.iguraci'n general& pero hay que hacerlo cada ve0 que con.iguremos un elemento de
men;
)e puesto en Orden -rt5culosPN"(s recientes primero
Jos interesa esta opci'n para cada d5a llevar al publico las noticias m(s recientes
3.3.-NO*.C.AS(Noticias 5otogra(1a8 Noticias Cultura#
+os 1 siguientes elementos de men; han sido creados de manera id4ntica a Joticias
6ecnolog5a
6odos tienen como padre el elemento de men; JO6/!/-#
+o ;nico que ha cambiado es en Joticias !ultura la categor5a a elegir para mostrar los
art5culos
D1
D1
En Joticias Fotogra.5a la categor5a a elegir ser5a FO6O,Q-F/-
4.-0A-&+.A(!OCA 0A--&+9#.
+o con.iguro una ve0 instalemos phoca ,allery <n poco m(s adelante
:.-$.D&OS
!ontinuamos con el men; top& a=adiremos a;n 1 elementos m(s
En la secci'n v5deos& se colgaran art5culos que contengan v5deos de inter4s general y
tecnolog5a& ya sea m;sica& cortos de animaci'n& 6utoriales&6railers
#eguimos creando el men;& creamos un nuevo elemento del men;
*uiero mostrar los v5deos en .orma de Blog en una columna y ordenado por los art5culos
m(s vistos
D:
Elegimos la !ategor5a que vamos a mostrar
Qecordamos que pusimos anteriormente en la con.iguraci'n global del gestor de art5culos
para que nos muestre tambi4n los archivos de las subcategorias
,uardamos y Juevo
:.2-$.D&OS(*utoriales#
El elemento sera de tipo !ategor5a Blog
Elegimos locali0arlo en el "en; top & el elemento padre C/3EO# y la categor5a
6utoriales
DA
:.3-$.D&OS(*railers cine#
!reamos un nuevo elemento de men;& que locali0ara al men; 6OP y mostrara en .orma
de !ategor5a Blog los art5culos de la !ategor5a 6railers !ine3amos a ,uardar y nuevo
:.4-$.D&OS($A+.OS#
#eguimos creando elementos del men; top+o con.iguramos como el anterior& pero
elegimos en !on.iguraci'n requerida la categor5a de art5culos que vamos a mostrar& en
este caso Carios
DD
:.:-$.D&OS(tecnolog1a#
!reamos un nuevo elemento de men; que se locali0ara como los anteriores en "en;
6OP
El elemento padre ser( C/3EO# y mostrara la categor5a 6ecnolog5a que pertenece a
C/3EO#$Jo con.undir con la categor5a de 6ecnolog5a de JO6/!/-#%
DH
DE
DI
,ODU-O para %,&NU *O)
,odulo ,en' Desplegable %,a;i ,en' C<)
3escargamos el modulo "a7i "en; !U
Camos a ,estor de e7tensiones
Buscamos el archivo en nuestro ordenador y damos #ubir e /nstalar
!on.iguraci'n
<na ve0 que lo tengamos instalado tendremos que activarlo& para ello vamos a ,estor de
DK
"'dulos
buscamos el modulo "a7imenu!U
+e ponemos estatus publicado y lo ponemos en la position9L en mi caso y elegimos el
men; a visuali0ar& que en nuestro caso queremos mostrar en esa posici'n el men; 6OP
*uedar5a el men; superior as5
HL
H1
,&NU USUA+.O
,en' con im=genes
En el men; usuario a=adiremos icono por cada elemento para que se vea mas bonito
+a imagen sera png y el tama=o es de AI7AI
)e usado una pagina muy practica para ello
http>MMwwwiconarchivecomM
Pondremos estas : im(genes
Empecemos por el primer elemento de men;$Este men; viene creado por de.ecto& por ello
lo vamos a aprovechar y ponerlo bonito%
Entramos en el Bac2end en men;s y damos sobre el men; <suario ah5 nos saldr(n los
elementos del men;
Camos al primer elemento PEQF/+El acceso a este men; ser( para usuarios
Qegistrados
8 lo mostraremos
H1
En las opciones de la derecha donde pone 6ipo de opciones para los Enlaces 3amos en
#eleccionar donde pone enlace /magen
3ebemos subir las imagenes 8o ya las he subido
H:
-hora seleccionamos la imagen que queramos poner para el per.il !licamos sobre insertar
y damos a guardar y cerrar el elemento de men;
6ras haberles a=adido las im(genes a cada elemento del men; quedar5a as5
5.1.)- !e*istro de $suarios
En la web podr(n registrarse los usuarios en el .rontend por medio del Formulario de
Qegistro
"i intenci'n es que los usuarios registrados puedan escribir art5culos en la WEB& para ello
debemos darle permisos de autor& para que escriba articulos #olo quiero que escriba
art5culos&no quiero que edite art5culos ya escritos por mi
Para ello vamos en la administraci'n a <suariosN,estor de usuarios NOpciones
Jos saldr( lo siguiente
HA
Para que se registre como autor en la opci'n 6ipo Qegistro Juevo usuario seleccionar V
autor
6ambi4n e marcado en si la opci'n de Joti.icaci'n de correo a los administradores
En la pesta=a ermisos podemos ver los permisos predeterminados para cada grupo de
usuarios registrados
-hora podr(n registrarse los usuarios en la WEB como autores y as5 escribir art5culos
-l escribir un articulo& podemos incluirlo en la categor5a que queramos& luego el
administrador$super user% ver( si el articulo esta en la categor5a adecuada& si hay que hacerle
correcciones& o si queremos publicarlo o no
-qu5 esta la creaci'n de un articulo por el usuario registrado
HD
HH
#i entramos en la administraci'n con nuestro superuser nos aparecer( un mensaje que nos
ha llegado
Jos indica que el usuario Pepelu a escrito un articulo nuevo
3amos al nuevo articulo y nos saldr( mas in.ormaci'n
HE
HI
-hora vamos a !ontenidoN,estor de art5culos
Jos saldr( el articulo en estatus 3es9publicado &debemos comprobar que esta bien escrito
y es correcto y publicarlo
<na ve0 publicado nos saldr( junto a las dem(s noticias de esa categor5a en el Frontend
5.1.5- +ersonali,aciones +lantilla
Cambiar ligo8titulo
HK
Camos a gestor de Plantillas
#eleccionamos nuestra plantilla y damos a editar Jos saldr( esto
En opciones avan0adas podemos cambiar el ligo de nuestra web as5 como con.igurar el
tama=o del wrapper& cambiar el titulo del sitio& la descripci'n
<na ve0 hecho guardamos la con.iguraci'n y listo
Cambiar (ondo de la Cabecera
Para a cambiar el (ondo de la cabecera
Jos vamos a la carpeta WWW donde tenemos instalado Joomla
EL
6endremos que buscar nuestro template$plantilla% en la carpeta templates
3irecci'n completa>
!>WWampWwwwWtemplatesWbee0@1LWimagesWpersonal
3entro de personal la imagen que se usa como .ondo de cabecera es la llamada
personal1png
En mi caso he cambiado la imagen por de.ecto por otra con las mismas dimensiones y le
puesto el nombre personal1png
O6Q- FOQ"-
Camos a gestor de plantillas damos en plantillas
E1
!liclamos sobre Bee0@1L 3etalles
E1
Elegimos el !## que vamos a editar& en este caso personalcss
Buscamos la linea como esta& aqu5 ponemos la ruta y el nombre de la imagen que vayamos a
usar
>>>>
6ambi4n podemos cambiar otras cosas en este css& como el .ondo de bac2ground de
la web completa& que lo har4 mas adelante
E:
?uitar opcin %*ama@os letra)
*uitando opci'n *ama@os letra) arriba i0quierda en el .rontend
#iguiendo los pasos del apartado anterior llegamos a los 3etalles de la plantilla
Editamos la pagina principal de Plantillas El inde7php *ue es la primera Opci'n de
"aster -rchivos de Plantillas
Buscamos la linea del div que contiene esta opci'n y la comentamos o la borramos
8a hemos quitado esa opci'n de la pagina
EA
Cambiar Color letra t1tulos de los Art1culos
En esta plantilla de Joomla no se di.erencia bien entre los t5tulos de los art5culos y los dem(s
men;s y elementos de la pagina al estar del mismo color
8o he cambiado el color al negro que en mi opini'n contrasta mejor con el loo2 de la
pagina
Para vuelvo al css de nuestra plantilla& en este caso al personalcss y buscamos la linea
Tmain h1 a
En mi caso lo e puesto as5 PN TLLLLLL que corresponde al color Jegro
En el Tmain h1 podemos cambiar el tipo de letra de los art5culos
CA,A.A+ CO-O+ o .,A0&N AAC<0+OUND
Para cambiar el bac2ground de nuestra pagina
ED

8o he cambiado el color por de.ecto a este a0ul
6ambi4n e quitado el <Q+ de la imagen& ya que solo quiero mostrar color
EH
EE
En el bac2ground puedes ver un color GTHHLLLLG y una imagen Gurl$XMimagesMbgpngX%G& si
se quiere cambiar la imagen de .ondo solo tenemos que cambiar lo que hay entre par4ntesis
y si queremos un color solo hay que borrar Gurl$XMimagesMpagepngX% .i7edG y cambiar el
color al que quieras
,uardamos y tendremos cambiado el color del bac2ground
CA,A.A+ .CONO 5A$.CON
El icono .aviconico es el que se muestra en la pesta=a del navegador cuando abrimos la
pagina
+as dimensiones de la imagen deben ser las mismas& por de.ecto 1H71H
8o he puesto una :17:1 y .unciona per.ectamente En esta pagina he hecho la conversi'n de
la imagen que quiero poner como .aviconEs muy .(cil e intuitiva
EI
Esta es la Quta donde podemos encontrar el archivo& en mi caso trabajo en localhost& en caso
de no trabajar en localhost& se har5a con clone0illa
!>WWampWwwwWtemplatesWbee0@1L
3entro de la carpeta bee0@1L que es nuestra plantilla por de.ecto se encuentra el archivo
#olo tenemos que sustituirlo por el nuevo
*uedar5a as5
EK
IL
5.1.-.- Instalacin Galera de .otos.
0A-&+.A(hoca galler"#
Para mostrar una buena galer5a usaremos la e7tensi'n Phoca ,allery
,aler5a con Phoca gallery
Phoca ,allery es una galer5a Joomla? 9 galer5a de im(genes para Joomla? !"# /ncluye
componentes& m'dulos y Plug/ns y permite a los usuarios mostrar im(genes o v5deos de
8outube en muchos estilos di.erentes
/nstalamos el componente Phoca gallery y el idioma espa=ol para 4l
Camos a ,estor de e7tensiones y locali0amos en nuestro pc el archivo a instalar El
componente lo subimos y lo instalamos
<na ve0 instalado
Pulsamos en esta pantalla en /nstall y nos llevara directamente al panel de control de
phoca
I1
-hora instalaremos el idioma Espa=ol
#e nos pondr( en espa=ol autom(ticamente& no hay que reali0ar ning;n ajuste
OC.ON&S 0&N&+A-&S
Camos a las opciones de phoca gallery& esto son opciones generales por lo que a.ectan a toda
la e7tensi'n en general
I1
-qu5 vamos a cambiar algunas opciones
)e puesto en la vista de las categor5as que se vean 1 columnas
El estilo para mostrar puede ser al gusto del creador& en mi caso quiero mostrar!ategor5as&
im(genes e in.ormaci'n detallada
)ay muchas opciones en phoca gallery& para mi la aplicaci'n mas completa y gratuita para
Joomla
En la parte de !on.igurar 3etalles de Cista tenemos la manera en la que mostraran las
.otos de nuestras galer5as
8o solo voy a poner para que nos muestre las im(genes en una ventana emergente
est(ndar as5 podemos hacer otras cosas en la web mientras usamos una galer5a
I:
-rriba en la parte superior de las opciones vamos a la pesta=a siguiente a <suarios
llamada "isc$imagen abajo%
Entramos en la pesta=a
)e activado la opci'n de "ostrar icono de la in.ormaci'n de la c(mara& as5 nos dar(
IA
in.ormaci'n adicional de la .oto&donde .ue hecha& con que c(mara
<na ve0 hecho esto guardamos y vamos a comen0ar a crear las categor5as donde tendremos
las im(genes
3amos a categor5as y a=adimos las categor5as que necesitemos
,uardamos la categor5a con 6itulo
)e creado las categor5as> -J/"-+E#&J-6<Q-+EY- 8 P-/#-JE#
ID
IH
IE
-hora vamos a crear un 5tem de men; en el men; 6OP que es el men; que tengo en la
barra de navegaci'n superior
Para ello vamos en la administraci'n de nuestro sitio o Bac2end sobre menus En el 6ipo
de men; N,-+EQ/- mostraremos el listado de !ategor5as de phoca gallery
Elegimos pues en tipo de men; la opci'n primera de Phoca ,allery
II
#i vamos al elemento ,aler5a nos saldr( vac5o ya que no hemos subido ninguna imagen
para mostrar
Camos a tener las galer5as distribuidas en carpetas& para tenerlas mejor organi0adas y para
tener menos limitaciones a la hora de meter muchas im(genes en una sola carpeta
SUA.+ 5O*OS
Para ello vamos al panel de Phoca ,allery y damos en im(genes
6enemos la opci'n de subir una imagen o subir m;ltiples
-bajo en a=adir m;ltiple creamos las carpetas Coy a empe0ar por naturale0a para meter
las .otos de la categor5a naturale0a
<na ve0 creada entramos dentro de la carpeta y a=adimos los datos de nuestra subida
IK
Camos a la pesta=a carga m;ltiple y seleccionamos todas las im(genes a subir
3amos a empe0ar carga y comen0ara a subir las im(genes
#eleccionamos todas la im(genes escribimos el titulo y a=adimos la categor5a ,uardamos y
cerramos
KL
#aldr( lo siguiente
Camos al elemento del "en; 6op N galer5a y veremos la categor5a creada con las
im(genes dentro
-s5 hasta crear las galer5as necesarias
6ras crear todas las categor5as y subir las im(genes quedar5an as5
K1
5.1./- +osicionamiento.
OS.C.ONA,.&N*O 9 ,&*A
Camos a instalar un Plugin llamado "eta,enerator & este Plugin genera autom(ticamente
la descripci'n y palabras clave meta tags tirando de te7to de contenido Joomla
+o instalamos como se instalan todas la e7tensiones
Buscamos a continuaci'n en Plug/ns& el Plugin "etagenerator
Entramos en el Plugin& lo activamos & yo he dejado en nombre por de.ecto
/magen 6endreemos el Plugin desactivado por lo que lo activamos
En las opciones b(sicas
En la opci'n 6itle layoutPN8o e puesto la opci'n 9Page title9#ite title para que nos
muestre en la pesta=a del navegador el titulo de la pagina donde estamos y el nombre de
nuestra web
K1
Esta opci'n si esta activa al entrar en un articulo& nos saldr( en ve0 de el nombre de nuestra
web la categor5a a la que pertenece el articulo
+a con.iguraci'n global de metadatos y #EO se encuentra en la administraci'n
6ambi4n se puede con.igurar en la creaci'n de los art5culos o m'dulos& en Opciones de
"etadatos
!on.iguraci'n de metadatos 8o tengo relleno la con.iguraci'n de metadatos con algunas
palabras signi.icativas de la Web
-l tener el Plugin activado cuando entramos en un articulo por ejemplo& vemos en el
c'digo .uente de la pagina al estar en un articulo por ejemplo
K:
-s5 se ver5a el c'digo con los metadatos&que coje autom(ticamente del articulo
-s5 se ver5a la pesta=a al leer una Joticia llamada 6ecno de la !ategor5a 6ecnolog5a
-- !eca0tc1a 2 'dulos 3 +lu*Ins
AC*.$A+ +&CA*C!A
Para activar re!-P6!)- en Joomla? 1D hemos de reali0ar los siguientes pasos>
)e probado con el recaptcha que viene por de.ecto en Joomla y no he conseguido que
.uncionara
)e descargado de Joomla E7tensions el Boo +ecaptcha) y ha .uncionado a la primera
KA
Este Plugin sigue los mismos pasos de con.iguraci'n
19Camos a E7tensionesN,estor de e7tensiones y buscamos el Plugin a instalar3amos
#ubir e instalar y listo

19En el gestor de Plug/ns 9N joo Qe!aptcha y lo activamos
3ebemos tener el que viene por de.ecto desactivado para usar este
Obtener las claves publica y privada en http>MMwwwgooglecomMrecaptcha
/nsertamos las claves en los campos del Plugin y ,uardar y cerrar
KD
-gregamos las claves al Plugin joo Qecaptcha*uedar5a as5>
:9Para utili0ar el joo Qe!aptcha en el registro de nuevos usuarios& hemos de acceder a la
KH
-dministraci'n 9N <suarios 9N ,estor de <suario 9N Opciones 9N !aptcha 99N seleccionar
joo Qe!aptcha& y ,uardar y cerrar
,ODU-O %-O ,AS -&.DO)
Este modulo viene por de.ecto en nuestro Joomla
+o pondremos en todas las paginas menos en la pagina en el men; 6op que solo aparecer(
en /J/!/O &JO6/!/-# noticias tecnolog5a&noticias .otogra.5a y noticias
!ultura
+a posici'n sera Position 9A y mostraremos todas las categor5as
KE
+o publicamos y ya nos aparecer( en la WEB
,ODU-O %NO*.C.AS &6*&+NAS)
Este modulo viene creado en Joomla& solo tenemos que con.igurarlo para que nos muestre
las noticias de la pagina que queramos
8o he elegido la pagina wwwZ-6-U-com Este seria su .eed de noticias
http>MM.eedsweblogsslcomM7ata2a1
+o pondremos en la posici'n position9H y lo mostraremos en las mismas paginas que el
modulo anterior
KI
En las opciones de la derecha pondremos como muestra la imagen& para que nos salgan
bien las noticias& solo el titulo
"ostraremos A noticias
+o publicamos y ya nos aparecer( en la WEB
KK
-U0.N 5AC&AOO< CO,,&N*S
Este Plugin nos permite comentar con Faceboo2 y compartir los enlaces en Faceboo2
directamente desde la Joticia
3escargamos el Plugin llamado AL Plugin Facebook Comments for Joomla
2.5/3.0.
+o instalamos como todas las e7tensiones y nos vamos a Plug/ns lo -ctivamos lo
con.iguramos
Para con.igurarlo debemos tener creada una app en Faceboo2 3evelopers
<na ve0 creada la app nos dar( el /3 de la app
8o tengo creadas un par de ellas en https>MMdevelopers.aceboo2com
#implemente es poner el nombre de tu web y crear una app de cualquier categor5a
1LL
Podemos compartir las Joticias en Faceboo2
O poner un comentario por ejemplo
1L1
/.- "u4iendo 5e4 a 6ostin*er con a7ee4a
C&A en !OS*.N0&+
Para migrar Joomla a un servidor WEB remoto& lo primero que debemos descargar es la
e7tensi'n Akeeba Backup, con este componente podemos generar una copia de
seguridad comprimida que contiene los archivos del proyecto y la base de datos& nos genera
un instalador que podremos instalar en un servidor WEB compatible con Joomla
8o voy a aprovechar el 3ominio que hicimos durante el curso de -#/Q
3escargamos Akeeba Backup de la pagina o.icial
8o he descargado la versi'n :A: !ore
Jos vamos en el Bac2end a E7tensiones & buscamos el 0ip descargado y damos a subir e
instalar
1L1
Jos saldr( que se ha instalado correctamente
<na ve0 instalado vamos a !omponentesN-2eeba Bac2up
Jos aparecer( una post con.iguraci'n de in.lacionista& que es un peque=o chequeo que hace
a2eeba
1L:
3amos en apply the pre.erences
!omen0ara el chequeo& cuando .inalice nos saldr( si queremos ir a la con.iguraci'n o
queremos hacer un Bac2up Jow
3amos Bac2up Jow
1LA
Ponemos el comentario que queramos y comen0amos
Empe0ara ha hacer la copia & que puede tardar un buen rato
Esperamos a que .inalice
1LD
Cemos que todo ha salido correcto
)acemos !lic2 en -dminister Bac2up Files y nos saldr( la copia de seguridad
En el ultimo apartado donde pone "anage and 3ownload descargaremos nuestra copia
que tiene e7tensi'n jpa
+a siguientes veces a la instalaci'n para hacer una copia de seguridad>
Camos a !omponentes N-2eeba Bac2up nos saldr( un men; como este Jos aparecer( el
Panel de control
1LH
3amos en el men; de arriba a Bac2up Jow y podremos hacer las copias que queramos
Es conveniente hacer copias de seguridad porque algunas veces al instalar un componente
por ejemplo& podemos e7perimentar .allos en nuestra Web& por lo que con la copia de
seguridad siempre tendremos un respaldo en el caso de que tubieramos alg;n problema
#i 3amos en el Panel de !ontrol sobre con.iguraci'n Podremos ver la carpeta donde
se guardan las copias en output 3irectory
1LE
+&S*AU+AC.ON
Para poder descomprimir el archivo durante la instalaci'n necesitaremos un script
llamado %<.C<S*A+*.php).
3escargamos pues el script de la pagina de a2eeba
-brimos el 0ip y nos saldr( el Uic2startphp y los distintos idiomas
!ogemos los 1 archivos y los metemos en una carpeta junto con el archivo bac2up jpa
!OS*.N0&+
-hora abriremos nuestro proveedor de )osting& el mio es )ostingeres
-ccedemos y nos dirigimos al administrador de archivos 1
1LI
Jos aparecer(n los archivos que tenemos
Camos a subir a la carpeta public@html el archivo jpa y el #cript
3amos sobre upload
1LK
#ubimos los : archivos
6ambi4n podemos subir los archivos mediante !lone0illa
8a se han subido los archivos& menos el jpa pues nos indica que es muy grande& ya que es
un archivo de 1LD "B
11L
En este caso mi Web tiene ya mucha in.ormaci'n& por las im(genes de Phoca ,allery
!+OJEY/++-
+o haremos pues con clone0illa
Camos en nuestro )osting a 3etalles de nuestro 3ominio y nos mostrara lo siguiente
#on los datos para conectarnos desde clone0illa
)e conectado y subido el archivo
111
<na ve0 #ubido ponemos en nuestro navegador la direcci'n de nuestra WEB M2ic2startphp &
la m5a es WWWpepeluholes
#aldr( un mensaje de in.ormaci'n de Ui2start
111
Pulsamos !lic2 aqu5 o
Jos detectara la copia del sitio autom(ticamente
3amos a comen0ar
11:
Empe0ara a e7traer y nos saldr( la opci'n de ejecutar el instalador
Jos saldr( el installer
3amos ne7t y nos saldr( un aviso de si queremos limpiar lo que hab5a para meter el
restore
11A
3amos yes y ya nos saldr( para con.igurar la Base de 3atos
- continuaci'n deberemos introducir los datos de )ostinger en la pantalla siguiente
11D
Para ellos vamos al panel de control de )ostinger y damos a Bases de 3atos "ysql
!reamos una nueva Base de 3atos y un usuario con contrase=a
3amos en ne7t
Jos saldr( el #ite #etup
11H
-bajo de F6P options tenemos
-gregamos la contrase=a
3amos a ne7t
8a lo tendremos hecho
3amos a remove the installation y ya tendremos subida la WEB en
WWWPEPE+<)O+E#
11E
8I8%IG!A9IA
-:::.;oomlas0anis1.or*<.oros<
-1tt0=<<:::.:e4em0resa.com<.oro<
-1tt0=<<:::.:e4em0resa.com
-1tt0=<<:::.sr:e4master.com<:e4masters<Tutoriales<
-:::.solo;oomla.com<
-1tt0=<<:::.3outu4e.com<c1annel<$C>i?5"C1asn&n5Gx'1Acos*
@Canal de A"amuel Torres 'orales AB
-1tt0s=<<:::.3outu4e.com<:atc1??CmD-?1?1:d5s @mi*racion
JoomlaB
-1tt0=<<:::.3outu4e.com
11I

Proyecto ASIRWEb Joomla

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Proyecto ASIRWEb Joomla

Încărcat de

Drepturi de autor:

Formate disponibile

Pagina Web en Joomla

S-ar putea să vă placă și