Joomla.

Instalacin y primeros pasos( Inicia iniciacin, apuntes clase)

Sobre Plantillas

EJEMPLOS DE PGINAS WEBS CREADAS CON JOOMLA

Torre Eiffel archivo

Peugeot archivo

Rusticae archivo

MTV Grecia archivo

Leonardo Di Caprio archivo

Ministerio de Defensa De Gran Bretaa archivo

Groupama Race archivo

Ebay

OTROS GESTORES DE CONTENIDO

Wordpress archivo

Drupal archivo

TYPO3 archivo

Concrete5 archivo

e107.org archivo

------------

Magento archivo

Prestashop archivo

Opencart

PRIMEROS PASOS EN LOCAL

http://www.joomla.org/download.html

http://extensions.joomla.org/

http://www.apachefriends.org/es/download.html
http://www.wampserver.com/en/#download-wrapper

JOOMLA

Un sistema de gestin de contenidos (en ingls Content Management System, abreviado CMS) es un
programa que permite crear una estructura de soporte (framework) para la creacin y administracin
de contenidos, principalmente en pginas web, por parte de los administradores, editores,
participantes y dems roles.

Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio
web. El sistema permite manejar de manera independiente el contenido y el diseo. As, es posible
manejar el contenido y darle en cualquier momento un diseo distinto al sitio web sin tener que darle
formato al contenido de nuevo, adems de permitir la fcil y controlada publicacin en el sitio a
varios editores. Un ejemplo clsico es el de editores que cargan el contenido al sistema y otro de nivel
superior (moderador o administrador) que permite que estos contenidos sean visibles a todo el
pblico (los aprueba).

Funcionamiento

Un sistema de administracin de contenidos siempre funciona en el servidor web en el que est

alojado el portal. El acceso al gestor se realiza generalmente a travs del navegador web, y se puede
requerir el uso de FTP para subir contenido.

Cuando un usuario accede a una URL, se ejecuta en el servidor esa llamada, se selecciona el esquema
grfico y se introducen los datos que correspondan de la base de datos. La pgina se genera
dinmicamente para ese usuario, el cdigo HTML final se genera en esa llamada. Normalmente se
predefine en el gestor varios formatos de presentacin de contenido para darle la flexibilidad a la hora
de crear nuevos apartados e informaciones.

Gestin de usuarios

Dependiendo de la plataforma escogida se podr escoger diferentes niveles de acceso para los
usuarios; yendo desde el administrador del portal hasta el usuario sin permiso de edicin, o creador de
contenido. Dependiendo de la aplicacin podr haber varios permisos intermedios que permitan la
edicin del contenido, la supervisin y reedicin del contenido de otros usuarios, y etc.

El sistema de gestin de contenidos controla y ayuda a manejar cada paso de este proceso, incluyendo
las labores tcnicas de publicar los documentos a uno o ms sitios. En muchos sitios con estos
sistemas una sola persona hace el papel de creador y editor, como por ejemplo en los blogs
personales.
Tipos de gestores de contenidos

Los gestores de contenido se pueden clasificar segn diferentes criterios:

Por sus caractersticas

Segn el lenguaje de programacin empleado, como por ejemplo Active Server Pages, Java, PHP,
ASP.NET, Ruby On Rails, Python

Segn la licencia: Cdigo abierto o Software propietario

Por su uso y funcionalidad

Blogs; pensados para pginas personales.

Foros; pensados para compartir opiniones.

Wikis; pensados para el desarrollo colaborativo.

Enseanza; plataforma para contenidos de enseanza on-line.

Comercio electrnico; plataforma de gestin de usuarios, catlogo, compras y pagos.

Publicaciones digitales.

Difusin de contenido multimedia.

Propsito general.

RECURSOS

http://www.hostinger.es/

http://nerdhostfree.com/

https://filezilla-project.org/download.php?type=client

http://www.kompozer.net/download.php

Simulacin en otros dispositivos http://quirktools.com/screenfly/

http://www.responsinator.com/

http://www.woorank.com/es/

http://www.cuwhois.com/

http://www.webceo.com/

http://www.webconfs.com/search-engine-spider-simulator.php
http://www.favicon.cc/

http://favicon.htmlkit.com/favicon/

Software para crear plantillas http://www.artisteer.com/

http://www.artisteer.com/?p=downloads

joomlaos.de Muchas plantillas gratuitas en joomla templates.

http://themeforest.net/ Plantillas de todo, incluso HTML

gavick.com -Mas plantillas.

omegatheme.com ->Plantillas muy pensadas para comercio electronico.

joomlart.com

3 No disponible

4EXTENSIONES / PLANTILLAS

Varias descargas directas que dejo en plantilla

Plantilla Vinda

https://www.akeebabackup.com/products/akeeba-backup.html

http://www.jooxmap.com/downloads.html

http://www.joomlacontenteditor.net/

http://www.joomlacontenteditor.net/downloads/languages

http://www.joomlackeditor.com/

http://www.acyba.com/

http://www.yootheme.com/widgetkit

http://getk2.org/

http://www.rockettheme.com/ buenas pero igual tardan en cargar

http://www.yootheme.com/ pgina muy buenas, no tiene tantas florituras, pero tardan poco en cargar.
Muy importante los elementos widgetkit y zoo para instlar en joomla. tiene slides, redes sociales,
galleryas, etc donde pone examples opdemos ver que es lo que puede hacer esta herramienta, en la
parte d ela derecha. Cosas muy muy intersantes en la parte de widgetkit. Tambien hay versin para
wordpress.

http://www.bonusthemes.com/ Son inestables porque no generan muchas plantillas mensuales, de

echo, hay meses que no generan plantillas.

http://www.youjoomla.com/ Mas palntillas pero no muy usadas.

http://www.joomlabamboo.com/

http://www.templatemonster.com/es/ esla ms conocida pero en otro sitios hay plantillas mejores que
en este.

http://www.rockettheme.com/ tiene buenas plantillas

bluevertigo.com Pgina con cantidad d efotos gratuitas sin derechos de autor. Ademas tiene recursos
de todo tipo, iconos, videos , etc.

En la pagina de http://extensions.joomla.org/ tenemos extensiones para todo, buscar antes por la red
las que son interesantes. por ejemplo, nivo slider.

Interesate. http://www.shopping-cart-migration.com/ Para migrar a magento por ejemplo, para

comercio electronico es una bomba.

http://www.cms2cms.com/, para migar de un CMS a otro.

http://virtuemart.net/ una de las herramientas mas usadad de joomla. Sirve para crear una tienda
virtual desde joomla. De momento no funciona bien del todo con la 3, tendramos que usar la 2.5.

Para cambiar idioma podemos poner un modulo en gestor de moduos, nuevo, cambiar idioma y

icetheme.com -> Plantillas chulas, tiene incluso algunas preparadas para redes sociales.

shape5.com -> Plantillas muy buenas y de mucha calidad. Deja elegir muchas opciones, colores, etc.

leotheme.com

joomlamagic.com. Plantillas ms normalitas.

templaza.com Plantillas tambin de calidad.

jomlapraise.com Buena calidad pero se estn quedando desfasadas.

Pure-joomla.com Normales

joomvision.com NO tienen excesivas, pero son de calidad.

demo.getk2.org. Tiene muchas cosas pra poner, calendarios, etc. Nos va a permitir insertar
comentarios, etc.
Por otro lado, en http://extensions.joomla.org/, en la parte d ela izquierda, en extension expecific,
aparecen cosa para el k2

WEB final. (Para llevarnosla, con un backup del akeeba)

1.- Joomla nuevo V322

Me lo descargo de la pgina oficial y lo descomprimo en una carpeta dentro de xapp, htdocs.

Ser joomlafinal.

Creo una nueva base de datos con el phpmyadmin entrando a travs de localhost
(joomlafinal).

Eliminamos la carpeta de instalacin

Nos vamos a system, control panel, languages e instalamos el castellano

2.- k2 en castellano.

Me bajo el paquete de la web, lo instalo y despus me bajo el paquete de idioma.

3.- Akeeba backup en castellano. Lo mismo que el anterior.

4.- Acymailing (e-mail marketing). Lo mismo que el anterior.

4.- WidgetKit. Lo mismo que el anterior. Lo mismo que el anterior.

5.- Editor JCE y colocado como predeterminado. Si es el lite, se puede hacer directamente, si no, hay
que descomprimirlo primero en la carpeta tmp del joomla.

6.- RS forms (en castellano). Como indica que hay que descomprimirlo primero, lo descomprimimos,
lo ponemos en la carpeta tmp de nuestro joomla y luego en gestor de extensiones lo subimos desde un
directorio. No hace falta lo anterior, slo descomprimirlo Lo mismo que el anterior. Para ponerlo en
castellano da error. Lo que hacmeos ees ir a la carpeta C:\xampp\htdocs\joomla1final\language\es-ES
y editamos el que es de nuestro componente. Si queremos traducirlo, vamos a la carpeta de ingles y
cogemos el del componete, lo editamos y cambiamos lo que ponen en:ENG por es.ESP

De todas formas si entramos en su carpeta y entramos en

C:\Users\think\Downloads\RSFormsRV45_1.4.0_J2.5_J3.0UnzipFirst\Languages y abrios el
castellano, tenemos dos ficjeros, el de site y el de admin, lo unico qu ehay que hacer es coger ese
fichero y ponerlo en la carpeta languages, es es de nuestra pgina. Los de administrator, hacemos lo
mismo pero en la carpeta administrator.

7.-Plantilla YT Nano3

http://www.yootheme.com/demo/joomla/nano3 Podemos ayudarnos de la ayuda de la

documentacin que nos da el creo de la plantilla con el dibujo de donde estn los mdulos

http://localhost/joomla1final/?tp=1

8.- Buscar e instalar el editor JCK Lo mismo que el anterior pero me ha dado error. Mejor instalamos
la suite que no da error.

9.- Componente Komento. Lo mismo que el anterior. Da error

10,. Componente easy blog.Lo mismo que el anterior.

Para hacer la pgina vamos a bajar nos esto del portal de formacin:

Imgenes entrada slide archivo zip

Imagen: ser-hotel-cabecera-2

Plugin Xtypo Vale para tipografia de las pginas

Creacin de la web

Predetermiinamos el notepad JCE

Para empezar utilizaremos un men que se mllama maninm enu que ya est creado.

Vasmos a insertar el modulo buscar. Vamos a mmodulos, gestor de mdulos y le damos a nuevo.
Seleccionamos el tpo de mdulo buscar. Le decimos que oculte el ttulo En etiqueta, le ponemos
"Buscar..." la ubicacin en search (se puede consultar en la documentacin de la plantilla), en
asignacin de menu le ponemos en todas la pginas.
Para cargar el Logo: Hacemos desde gestor de mdulos nuevo y elegimos HTML personalizado, ya
que de esta forma nos deja hacer lo que queramos. Le ponemos de nombre logotipo y le decimos que
oculte el ttulo. En el editor, le damos al boton insertar imagen, escogemos y subimos la imagen. En el
editor, podremos redimensionarla. Podemos ponerle si queremos un enlace. Le decimos donde
queremos ubicarlo, en la posicin logo. y en asignacin de menu en todas las pginas. Para cambiar el
enlace de adonde apunta el hipervinculo, seleccionamos la imagen en el editor y en el boton enlace,
seleccionamos a donde queeremos que vallamos.

Vamos a crear un slide para la pgina de entrada:

Pulsando F12 en el crome tenemos la ayuda. Podeos sacar la anchura de la pgina con esta pequea
ayuda. Va mos a insertar las imagenes que nos hemos bajado de la plataforma (slide)

Creamos una carpeta que se llame slide para ir metiendo ah las imgenes. Seleccionamos todas las
imgenes y las subimos todas a la vez.

Vamos a componentes widgetkit y a slideshow le llamaos pagina de entrada. Le ponemos el nombre

primero e insertamos una image, as vamos aadiendo slides con sus fotos.

Acordarse de poner el nombre del nombre alternativo

Ahora le decimos que aparezca en nuestra pgina a travs de un mdulo en la chuletilla de la plantilla,
vemos que se puede poner en TOP A . El codigo [widgetkit id=1] de momento no lo voy a usar.

Vamos a modulos, gestor de mdulos y reutilizamos el modulo widget kit, podamos haber usado
ocreado otro. Lo editamos, le cambiamos el nombre y que no muestre titulo y posicin A TOP A .En
asignacin de menu le decimos que slo en paginas seleccionadas y ponemso HOme

En esta plantilla, podemos editar muchas cosas, si nos vamos a gestor de plantillas, y puslsamos sobre
ella, en opciones, podemos cambiar varias cosas. Esto se cambia para todas las pginas, si queremos
hacerlo por pgina, hay que duplicar los estilos como ya se vo anteriormente.

En Additional Scripts, podemos poner cosas de google analitics, por ejemplo, etc.

Vamos ha hacer que desaparezca lo de Home. Vamos a mens, main menu y lo editamos. le
quitamos lo de Home y le ponemso Inicio de alias. No puede haber dos pginas con el mismo alias.
Vemos que tenemos un montn de pestaitas. En visualizacin, le decimos que no muestre el
encabezado de la pgina. Para cambiarle el nombre a la pagina y que no aparezca el nombre inicio en
el ttulo de la pgina. Tambin se cambia ahen Titulo de pagina en el navegador.

Si vamos ahora a easy blog, vemos que nos da error en algunas pginas. Tiene que ver con un fichero
del sistema. Lo suyo seria bajarse la nueva versin del easy blog en versin 3, pero hay otras
opciones. Con joomla, podemos hacer que los mensajes de error en pantalla se oculten. En sistema
configuracin global En la pestaa servidor, se puede quitar eso. Esta no es la mejor opcin, lo mejor
es actualizarse el complemento a 3.0. Esto otro es util si el complemento no existe para 3.0, funciona,
pero da errores.

EasyBlog, si pulsamos sobre el en componentes, vemos us opciones y mdulos. en Themes , tenemos

plantillas para poder usar. Si pulsamos sobre el ttulo de una de las plantillas, incluso podemos
modificar alguna cosa.

Incluso, desde la pantalla de modulos de Easy blod, en configuracin(settings) tambin puedo

modificar cosas. Tenem os cantida de pestaas. En social integratin tenemos la parte de redes
sociales, con un 0 no aparece.

En componentes easy blog, blogs, tenemos los blog que tenemos publicados. Si pulsamos sobre el
blog que est por devesto, podemos editarlo. El editor tenemos que cambiarlo desde settings del easy
blog. Se puede habilitar permitir comentarios. Incluso se puede proteger con contrasea, etc. En la
parte de la derecha,si nos fijamos, adems, hay un montn de pestaas mas.

En la plantilla, editandola desde extensiones, en el apartado menu, podemos modificar cosa, por
ejemplo tamaos, etc. Se le puede tambin poner icono, situarlo, etc

Ahora jugamos con el de datos de acceso Gestor de modulos, datos de acceso y lo ponemos en
posicin menu.

Ahora en easy blog mandamos a la papelera el que tenemos, el de congratulations.

Ahora me voy directamente a la administracin de easy blog y creamos una nueva categroia

Ahora vamos d enuevo a blogs y le damos a nuevo. Le pontemos titulo , rellenamo y en la colunna de
la deracha vamos a imagen blog y le subimos una Le damos a usar como imagen del articulo.
Aplicamos lo de leer ms,etc

Creamos otro, por ejemplo el hotel del invierno. Podemos categorizar si queremos.

En los blog suelen recomentdar que se pongan etiquetas, editamos uno de ellos EN la parte d ela
derecha, pone congratulations y thnks you. Ah podemos escribir nouestra propias etiquetas. Las que
se creen valen para todos los blogs.

El paquete easy blog tiene un montn de modulos. Hay uno de categorias, se puede instlar para tener
categorias,

Si en la administracin de easy bloog, podemos ver los bloggers y crear los que queramos. Se le puede
poner avatar, informacin, etc.

El komento es un sistema muy potente para comentar cualquier tipo de cosa en cualquier parte d ela
pgina, incluso se pueden quitar los comentarios de easyblog y poner el komento.

Vamos aponer un calendario. Simplemente le hacemos un nuevo modulo del tipo calendario y le
decimo sdonde queremos que aparezca.

ohanah, para eventos. Viene incluso con la aplicacin movil,y permite que la gente onga evento y
vender incluso entradas. Tiente un monton de opciones.
jevenst tambien est muy bien y es gratuito.

Con el widgetkit, slideshow, en vez de poner imagenes, podemos poner texto estilo tabs mostrandolo
en un articuilo. Creamos un articulo pero antes una nueva categoria Gestor de categoras: Aadir un
Artculos de categora y en el texto, slo ponemos [widgetkit id=2]

Ahora vmaos a main mee y hacemos un nuevo titem, le damos a cargar un articulo y le ponemos el
lgimo que hemos hecho. De esta forma es un arciluco que pasa solo.

Si queremos quitar lo del autor, etc, en gestor de articulos, opciones.

Ahora vamos a poner una imagen de cabecera a nuestro ser hotel nano. Lo vamos a hacer con el de
HTML Estensiones, gestor de modulos, nuevo, HTML personalizado, en el edito, le damos a subir
imagen como siempre y ocultmaos titulo. En posicin le pongo top-a y en asignacin d emen, slo
en ser hotel nano.

RSFORpro: Es para generar formularios en la pagina. En la administracin de RSFOR, en

administrar formularios, Sirve para hacer calendarios en condiciones. Podemos cargar un
formulario de contactos.

Vamos a men, main menu, nueo, RSForm.

En el zip que nos descargamos, tenemos ms modulos para instalar, por ejemplo, ms formularios,
feedback, list, etc. Lo mismo con los pluggins. Tenemos un montn de ellos. Instalamos el plg content
Ojo que nos dice esto Loads RSForm!Pro Forms within articles, Syntax: {rsform 1}; Make sure you
publish the RSForm! Pro Content Plugin before you use it! para cargar en un articulo., es su ID para
cargarlo en algn articulo, pareceido a lodel widgetkit. hay que asegurarse de que est publicado. lo
buscamos en pluggins "Content - RSForm! Pro". Si entramos dentro de el, nos dice de nuevo lo de la
sintaxis.

Si no me acuerdo como es la sintaxis para cargar las coas en un documento, sin entro dentord el gestor
y pusltos sobr elos pluggins, me dice la sintaxis. Por ejemplo Loads RSForm!Pro Forms within
articles, Syntax: {rsform 1}; Make sure you publish the RSForm! Pro Content Plugin before you use
it!.

Para hacer un formulario nuevo. COmponentes RSForpro, administrar formularios. Me aparecen los
formularios que tengo creados. Si pulsamos sobre uno de ellos, podemos editar todo lo que tengamos,
las posibilidades que tiene son una pasada, cantidad de cosase incluso con validaciones. En
propiedades, se pueden poner cosas del formulario e incluso se pueden poenr codigo CSS para darle
el formato que yo quiera, incluso jscrip. Para poner varios campos de correo electronico de admin,
poniendo una coma o un punto y coma.

Podemos hacer nuevos, duplicar, etc. Si damos a nuevo, tenemos un asistente. Podemos ejecutar el
asistente hasta el final y nos indica que no hemos puesto un botn de enviar.El botn enviar tiene que
ser el ltimo de la lista, polrque enva todo lo que tiene por encima. Ahora vamos aadiendo los
componentes que creamos necesarios. En nombre, es el nombre que guarda el para el nombre interno,
con lo cual ni tildes ni cosas raras. Donde pone nombre literal ya es lo que queremos que aparezca. El
botn de borrar se pone directamente cuando se pone el de enviar, en atributos. Si le doy en la parte de
arriba activar inclusin, me sale la sintaxis de lo que he recibido y vale para ponerlo en el mensaje de
gracias de la web. Eso con el del usuario, con el del administrador, se hace lo mismo. En editar
formulario, Misc, editar mensaje de error, tenemos el mensaje de error. En el panel de adminstracin
del RSform, qutenmos administrar envios y vemos todo lo que se nosha enviado. Ahora lo podemos
poner donde nos de la gana con el {rsform 3} o en el men directamente.

Vamos a construir un men en la pantalla hecho a columnas.

Vamos a contenido gestor de categorias y hacemos una categoria nueva, Nuestros Hoteles. Creamos
un articulo y lo guardamos dentro de la categoria nuestros hoteles.

Ahora vamos a menu, nuevo, le ponemos titulo, Ver Hoteles. Queremos que cuando nos pongams
encima de l, se despliegue solo. vamos a tipo elemento del men.Le damos a crear un separador, le
decimos que en el men primcipal y en el men raiz. Lo ponesmo el segundo en vez del lti,mo en la
posicin despues de guardar. Creamos un nuevo men,, zona norte. Le decimos tambin que sea un
separador en enlaces del sistema. Le decimos que cuelgue de ver hoteles. Ahora creamos otro que se
llame galicia y a este le cargamos un articulo y que cuelgue de zona norte. Hacemos ms items, por
ejemplo asturias.

En extensiones, gestor de plantillas, si entrams en nuestra plantilla, en la parte de mens, podemos

cambiar en nmero de columnas que tneie nuestro men. De esta forma, se puede hacer un mega
men.

Ahora vamos a hacer que el men se haga con efecto acorden, suele estar implementado en las
plantillas. En extensiones, gestor de mdulos, creamos un nuevo mdulo que va a cargar mens, con
lo cual pulsamos sobre el de men,le ponemos de nombre ver hoteles, en mostrar en elementos del
men, si. Si en nivel inicial le dejamos uno, mosntrar todo, si le ponemos 2 solo cargar lo que
duelque del men, en posicin, sidebar A, en asisgnacin , solo en ver hoteles.

Con el acy mailing. vamos a cargar el mdulo de subscripcin. Extensiones, gestor de mdulos,
accimailing y lo editamos lo ponemos en el sidebar A y slo en las pginas de ver hoteles.

Vamos aseguir poniendo fotos en la parte superior. Extensiones, modulos, gestor de mdulos. N
uevo, html personalizado. Subo una de las fotos de entrada que tena preparada, le pongo una
descripcin y un poco de texto. Al titulo le pongo un H3 y luego centro todo. Le pongo qu eparezca en
TOP B y slo en las paginas de indicio. Al poner el primero, lo que hace es que ocupa toda la pantalla,
a medida que vamos aadiendo, se va erepartiendo el espaio. Queda bastante chulo

Editando la pantilla desde el gestor de plantillas, en la pestaa de opciones, si pulsamos en modules,

vemos todos los mdulos que hemos metido en nuestro diseo. Le podemos mofificar como
queremos que se represente el estilo de cada uno de ellos.

Hemos creado una pgina de entrada sin tener que cargar ni un solo artculo, es decir, no es necesario
tirar de artculos.

Podemos tener un aplantilla de CSS e ir aplicandolas a cada uno de los elementos y as personalizar la
plantilla a nuestro gusto. Se edita por ejemplo con dreamweaver

firebug, interesante.

Interesante ruta de navegacin en modulos, nuevo modulo, sin titulo,le decimos que aparezca en
todas las pginas me nos en la de inicio le damos posicin top-a, ojo que si no le damos la posicin o
le damos una posicin erronea, no saldr.

plg_xtypo.zip Lo instlamos. Sirve para destacar, hacer estilos, etc Lo activamos en extensiones,
gestor de pluggins. Entramos en el y le damos en mostrar la descripcin al completo. Esta muy
completo para hacer cosas.

K2 instlaado. Entramos desde el panel de control del sistema. Creamos una nueva categoria. Por
ejemplo, zona norte. Tenemos una cantidad de opciones impresionantes. Hay que enredarlo bien para
explitar las posibilidades. Tenemos tambin un pequeo plugging para poner mapas. De momento
solo nombre y guardar y cerrar. En la parte de la izquierda tenemos campos extra, aadimos uno como
los formularios, vamos rellenando y le damos un nombre al grupo para hacer un grupo de campos. Le
ponemso campo de texto, etc Creamos el segundo ciudad lo ponemos en el mismo grupo, etc creamos
alguno ms.

Ahora en campo extra grupos, sale localizacin de hoteles pero me dice que no tiene categoria
asignada. Me voy a categorias y edito la que tengo y le decimos el grupo de campos adicionales que
habamos creado y ahora en capos extra grupos ya tenemos.

Ahora vamos a Items. en categorias la que tenamos marcada y vemos que en campos extra tenemos
todos los que habamos creado. Le damos de titulo hotel 1 vamos poniendo lo que pide, una imagen y
en campos extra, rellenamos los campos.

Nos vamos a men, ma jmenu. editamos galicia y en seleccionar nos vamos a K2 le damos a articulo
y al que tenemos

Nuestra hoja est sin estilos, si queremos estilos, por ejemloel jck (joomlaCK) si que los tiene, si no,
se puden instalar de otra forma.