1

Mejora tu sitio webGuillermo Vigueras González

Curso de extensión universitariaCampus de Burjasot

Universidad de ValenciaJulio 2008

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 2

Índice Breve introducción a CMS: Joomla Instalación de Apache +  PHP + MySQL Instalación Joomla Introducción al administrador de Joomla Introducción a los templates de Joomla Nuestra primera página web con Joomla Libro de visitas Contacto (Google maps) Event calendar Elementos multimedia

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 3

Indice (II) eCommerce (VirtueMart) eCards Foro Mapa del sitio Optimización en buscadores Idiomas Juegos Extensibilidad de Joomla

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

Introducción CMS: Joomla• CMS: Content Management 

System o Sistema de gestión de contenidos. Como su nombre indica, es un sistema que permite al usuario de forma cómoda (gráfica) administrar los contenidos una web (añadir, elminar, etc.)

• Será la plantilla del CMS la que defina qué posiciones posibles hay para cada contenido que se va a añadir. El gestor le asignará una posición de todas las posibles

• Otras de las características de CMS es la modularidad. Se pueden añadir módulos desarrollados por terceros, siempre la plantilla indicará el lugar

posiciones

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

Instalación de Apache +  PHP + MySQL Instalar XAMPP. Este paquete lo engloba 

todo

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 6

Instalación de Joomla En directorio ‘htdocs’ crear directorio ‘cursoJoomla’ En el directorio anterior descomprimir el contenido 

de Joomla Iniciar instalación Joomla: ‘localhost/index.php’ Borrar directorio de instalación Cambiar la contraseña por defecto del usuario 

'admin‘ a ‘admin’ (para evitar descuidos) Observar estructura de directorios creado

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 7

El administrador de Joomla Es lo que se llama el ‘back end’ Es una aplicación web con interfaz gráfica 

muy intuitiva Para acceder a él hay que entrar con usuario 

y contraseña (admin,admin) Permite configurar todos los aspectos de 

nuestro sitio web

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 8

El administrador de Joomla (II)• Imagen administrador

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 9

Back end: Site

Configuracion de aspectos del sitio web Global configuration Language manager Media manager Preview Template manager Trash manager User manager

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 10

Back end: Menu

Menu manager (Publicar/despublicar elementos de cada menú) Mainmenu (probar) Othermenu Topmenu Usermenu

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 11

Menús Menumanager Mainmenu (Probar a publicar y despublicar)

Wrapper (página web embebida) FAQ (muestra contenidos que tenga asignado la 

seccion/categoria FAQ) Blog (Permite construir un blog, mostrando los contenidos 

de diversas secciones. Section ­>Limitar la sección a mostrar. Permite selección múltiple). Probar

Othermenu

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 12

Back end: Content

Definir un contenido en Joomla es crear un documento que será visualizado

Los contenidos estarán asociados a una categoría y sección

Dos tipos:  Normal (texto visualizado y otro desplegable) Estático (no texto desplegable)

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 13

Back end: comp., mod. Y bots

Estos menús permiten acceder a los distintos componentes, módulos y plugins que tengamos instalados en nuestro sitio web

Acciones: Publicar / despublicar Configurar cada elemento …

Lo veremos más adelante

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 14

Módulos

Probar algunos módulos por defecto Wrapper (página web enmarcada en un módulo) Polls (configurar la encuesta) Statistics (algunas estadísticas de nuestro sitio) Latest news (últimos contenidos subidos a 

nuestro sitio web) Syndicate (suscribirse a las noticias que estén 

puestas en el front page ­ RSS 2.0)

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 15

Back end: Installers

Permite instalar Componentes Módulos Plugins Templates Lenguajes

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 16

Templates en Joomla Definen la visualización de nuestra página Probar las cuatro plantillas instalándolas Explicar posiciones de la plantilla

Site­>Preview­>Inline with positions Right Left Top Bottom

Probar las posiciones definidas en cada plantilla con preview (ver que en algunas plantillas hay más posiciones que en otras)

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 17

Libro de visitas

Easy GuestBook Permite que la gente que visite la página pueda 

dejar un comentario, dando sus datos (que podrán ser ciertos o no).

Se trata de un componente Tiene filtro anti­spam: CAPTCHA (imagen)

Pasos Crear Separator/Placeholder en Othermenu Añadir nuevo componente en Othermenu

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 18

Contacto Instalamos Plugin de google maps Creamos Content utilizando el plugin

Texto de nuestro contacto {mosmap lat='39.508852'|lon='­0.420432'|

mapType='Hybrid'|zoom='16'|text='Departament d'InformàticaEscola Tècnica Superior d'Enginyeria (ETSE) Universitat de ValènciaAvda. Vicent Andrés Estellés, s/n46100 Burjassot­València (SPAIN)'|tooltip=‘texto'|marker='1'} 

¿Cómo localizar coordenadas de nuestro punto? ­> Google maps Click botón derecho­>’Ruta desde aquí’

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

Contacto (II) En mainmenu crear nuevo elemento: Link ­ 

content item Las dimensiones del mapa no son correctas Tenemos que meter el plugin ‘mosmap’ en 

una tabla de una columna por una fila para darle dimensiones al mapa mediante la tabla

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

Contacto (III) Hacemos lo mismo pero ahora con un 

módulo (un plugin se configura con las opciones que se pasan como parámetro, un componente desde el back_end) Categorías (definimos categorías de los 

marcadores)­>Draggable: se puede arrastrar Makers (definimos marcadores) Configuration (configuración del mapa: punto 

inicial, zoom inicial, etc.)

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 21

Calendario de eventos Event calendar Instalar componente, módulos y plugin Componente

Añadir en othermenu­>Separator Añadir New­>Link­Content item Configurar el componente

Crear categorías para eventos añadir eventos

Módulos Publicar los módulos (parte derecha) Configurar módulos

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 22

Multimedia Vamos a ver

Reproductor video Reproductor audio Reproductor streaming (video y audio) Galería de fotos Podcast …

Creamos nuevo apartado en Other menu Menu­>othermenu­>New­>Separator/Placeholder

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 23

Multimedia (Radio)

Extension: EXP Joomradio and Video version 2 (unzip_joomradio2.zip)

Instalar componente y módulo de radio Desde el módulo

Situarlo a la derecha Definir desde que menús/contendidos se verá (All,…) Que sea visible

Desde el componente Añadir emisoras de radio fichero .txt (importante: name, code) Publicarlas

Añadir elemento (componente) en Othermenu y probar

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

Multimedia (Video)

Módulo de video de Joomradio Instalar módulo de video

Desde el módulo de configura Situarlo a la derecha Definir desde que menús/contendidos se verá (All,…) Publicarlo

Desde el componente se configura Añadir fuentes de video del fichero .txt Publicarlas

Comprobar cómo qué se ve en pestaña ‘video’ del componente del elemnto de Othermenu

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

Multimedia (LCPlayer) Módulo que permite reproducir audio y visualizar 

video embebido en el módulo (sin pop­up) Limitaciones

Comienza a reproducir por defecto Sólo permite definir 10 fuentes multimedia

Instalar módulo LCPlayer Situar a la derecha Definir visibilidad en cada menú Publicar

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 26

Multimedia(plugin MP3) OnePixelOut Player Uso Crear una carpeta ‘mp3’ en, por ej., /images/stories/, 

o donde se quiera. Esta carpeta contendrá los ficheros mp3

Para indicar al plugin que fichero de debe reproducir usaremos: {audio}images/stories/mp3/your_mp3_file{/audio} 

Si quisiésemos reproducir ficheros que están en otra máquina: {audio}http://domain­name.com/mp3/file_name.mp3{/audio} 

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 27

Multimedia(mod­comp MP3)

Fichero: flash_mp3_player_popup_plugin.zip Instalar el modulo y el componente Posicionar el módulo donde queramos Configurar la lista de canciones con el 

componente Sale un Pop­up con el reproductor

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 28

Multimedia (Reprod. YouTube, Google,…) Plugin easiertube

Youtube,GoogleVideos,Ustream.tv,… Obtener el enlace del video

Probar con Youtube (En el video­>más info.­>URL) En el content poner el texto del enlace 1 video por content Enlaces de videos Google, etc. están en el fichero 

YouTubePlayer.txt

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 29

Multimedia (PodCast) KAPOD: Listado de recursos multimedia con info. 

de cada uno. Permite descarga

Instalar componente y módulo Comprobar que el módulo está publicado Comp. config­>establecer direcctorio de recursos 

(habrá que crearlo. Ej ‘images\stories\mp3’) Categories Manage Files

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 30

Multimedia (Image Gallery) Instalar plugin ‘Simple Image Gallery’ No olvidar publicarlo Especificar directorio en el que están las 

fotos El directorio debe estar en ‘images/stories’ Creamos images/stories/fotos {gallery}fotos{/gallery} 

Restringir el acceso: Menu­>Othermenu­>Galleria de fotos­>Access level­>Registered

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 31

eCommerce­Virtue Mart Elemento muy completo para implantar una 

página de comercio electrónico La instalación del componente nos 

proporcionará lo esencial para poder crear nuestra tienda virtual

Los módulos complementan la funcionalidad del componente

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 32

eCommerce­Virtue Mart (II)

Instalación Instalar componente (con datos de muestra), 

módulos(cart_1.1.0) y plugin Crear Separator/Placeholder en OtherMenu 

(Publicar) Crear nuevo componente en Mainmenu (Publicar) Añadir módulo de ‘Shopping cart’

Explicación administrador Virtue Mart…

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 33

eCommerce­Virtue Mart (III) Jugar un poco con el componente en modo ‘usuario’

Probar a navegar por el… View Full­size image

Probar (modo admin) Añadir nuevos productos. Respetar rutas. Buscar imágenes en 

Google. Añadir nuevas categorías. Respetar rutas. Buscar imágenes en 

Google Crear una tienda virtual de la temática que cada uno quiera

Despublicar todos los artículos y categorías que haya Añadir categorías y productos (buscar imágenes en google)

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

eCards Componente de Joomla que permitimos que 

usuarios de nuestra web puedan enviar las eCards que nosotros(administrador) haya subido

Instalación Instalar el componente Crear categoría (manage categories­>New) Subir eCards/imágenes (Components­>RWCards­>Upload 

o Site­>Media Manager­>Directorio: images/stories/cards) Publicar la categoría y la eCard

Probar a hacer algúan felicitación con el Paint o GIMP y subirla

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

Foro

• FireBoard: componente que permite añadir un foro a nuestro sitio web y administrarlo

• Instalar el componente (Load sample data)• Fireboard configuration (echar un vistazo)• Forum administration (gestionar los post)• Usuarios (inicialmente coge los usuarios del 

sitio, cuando los usuarios se conectan al foro se podrán administrar)

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

Mapa del sitio Xmap: componente para crear de forma 

rápida y sencilla un mapa de nuestro sitio web para facilitar la navegabilidad

Instalar componente Añadirlo a menú Othermenu Crear mapa del sitio

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008

Optimización en buscadores Plugin JoomSEO Permite configurar la información de nuestro 

sitio a la que accederán los bots de los motores de búsqueda

Instalar plugin. Configurar ciertos parámetros Probar viendo código fuente de la página

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 38

Múltiples idiomas

Instalamos un lenguaje Instalamos el componente JoomFish Publicamos el módulo para seleccionar el 

idioma y lo posicionamos donde queramos Módulos­>JoomFish language selection: nos 

permite configurar el módulo

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 39

Games Algunos juegos para hacer nuestra web más 

amena Instalar primero el componente ‘puarcade’ Instalar luego el componente ‘playgames’

 Mejora tu sitio web – Curso de extensión universitaria – Julio 2008 40

Extensibilidad de joomla

Entrar en la página de Joomla y probar a descargar algún plugin interesante y ver cómo se instalaría y como insertarlo en nuestra página