Mejora tu sitio web
Rafael Sebastián Aguilar
Víctor Fernández Bauset
Curso de extensión universitaria
Campus de Burjasot
Universidad de Valencia
Febrero 2012 1
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Í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
2
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Indice (II)
Libro de visitas
Contacto (Google maps)
Event calendar
Elementos multimedia
eCommerce (VirtueMart)
eCards
Foro
Mapa del sitio
Optimización en buscadores
3
Idiomas
Juegos
Extensibilidad de Joomla
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
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
4
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Introducción CMS: Joomla
Todas las acciones de administración se realizan a través del navegador web
No es necesario tener conocimientos de HTTP
Joomla está programado en PHP
Elementos principales de Joomla: Base de datos MySQL: información + configuración
Scripts PHP: Acceso a la base de datos y presentación de la información
5
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Posibilidades de Joomla
Acción Cómo?
Organizar tu web Administrador
Publicar contenidos Editor, artículos, categorías
Modificar aspecto del portal Plantillas
Calendario, Estadísticas,
Visitas, reproductores, etc
Módulos y Componentes
6
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Instalación de Apache + PHP + MySQL
Instalar XAMPP. Este paquete lo engloba todo (servidores Apache, MySQL, …)
Permite que simulemos un servidor de páginas web (Apache) y una base de datos (MySQL) en nuestro PC
Usaremos la última version 1.7
xampp-win32-1.7.4-VC6-installer (autoinstalador)
Instalar “como servicio”
Tras instalar borrar carpeta C:\xampp\tmp
7
Servidor web
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Cliente
IP 192.168.11.25
Puerto 80
Cliente
IP 192.168.11.15
Apache
Joomla
MySQL
Servidor
IP 192.168.11.1
8
Maquina Virtual
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Servidor
IP 192.168.11.1
Vamos a usar un servidor virtual mediante VMWare:
• Simula un PC (servidor) dentro de un PC (cliente)
Windows 7
Cliente
IP 192.168.11.25
El servidor esta en “Matrix” (…y no es consciente, piensa que está en el mundo real)
El Cliente esta en el “mundo real” (… y tiene un “mundo matrix” dentro)
Windows XP
9
Servidor dentro del cliente
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Real
Windows 7
(realidad)
Virtual
Windows XP
(matrix)
10
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Servidor - XAMPP (Apache)
Estado
11
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
XAMPP (MySql)
Crear Base de datos 1. nombre de la base de datos 2. el nombre del usuario de dicha base de datos 3. una contraseña para ese usuario creado 4. nombre del servidor (mayoría de las ocasiones será localhost).
phpMyAdmin
NOTA: Acceder con https://localhost... (si no se instalo como servicio)
12
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Instalación de Joomla Importante! (ver próximas transparencias)
Al crear la base de datos con MySQL apuntar:
Usuario de la base de datos
Nombre de la base de datos
Contraseña de usuario
Versión de Joomla
Joomla_1.6.3-Spanish-Pack_Completo
13
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
XAMPP – Crear Base de Datos
14
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
XAMPP – Crear Usuario
15
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Instalación de Joomla Copia de ficheros
En directorio ‘htdocs’ crear directorio ‘Joomla16’
C:\xampp\htdocs\Joomla16
En el directorio anterior descomprimir el contenido
de Joomla
Iniciar instalación Joomla: ‘http://localhost/joomla16/’
16
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Instalación de Joomla Configurando base de datos
Aceptamos licencia
Configuramos la base
de datos
Utilizar los datos
apuntados anteriormente
17
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Instalación de Joomla Configuración Principal
Importante pulsar “Instalar
Datos de Ejemplo”
18
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
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
http://localhost/joomla16/administrator/
19
El administrador de Joomla (II)
• Imagen del administrador
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012 20
Crear un Usuario
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012 21
Crear un usuario para cada miembro del grupo
Usuario 1: Grupo = “Super usuario”, Idioma=“Español”
Usuario 2: Grupo = “Público”, Idioma=“Inglés”
Configuración de aspectos del sitio web
Configuración Global
Gestor de artículos
Gestor de categorías
Gestor multimedia
Gestor de menús
Gestor de Usuarios
Gestor de módulos
Gestor de extensiones
Gestor de idiomas
Gestor de plantillas Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Back end: Site
22
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Administrador: Configuración global > Sitio
Algunas cosas que podemos configurar:
Directorios de instalación de Joomla y Base de datos (MySQL)
Sistema de correo electrónico para notificaciones
Vamos a incluir información para que los motores de
búsqueda pueda indexar nuestra página
23
Para Google
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Administrador: Configuración global > Servidor
Configuración de cuenta de correo:
Ejemplo: (poner vuestros datos)
24
Gestor de artículos
Contiene el texto que aparece en el portal web
Debe de ser asignado una categoría definida previamente
Pueden estar activo (publicados) o no activos (no publicado)
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Back end: Site Gestionar contenidos
Nombre Publicado Si/No Categoría
Orden en categoría
Quien puede verlo?
25
Gestor de categorías
Se utilizan para estructurar la información del portal
Se definen creando una jerarquía
Es parecido al uso de carpetas y subcarpetas en windows
Pueden incluir texto descriptivo
Ejemplo:
Categoría “Música”
Subcategorías “Clásica”, “Rock”, “Jazz”,…
Rock: “60s”, “70s”,…
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Back end: Site Gestionar contenidos
Para ver un artículo o todos los artículos de una categoría debe existir un enlace que conduzca a ellos!!
26
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Administrador: Gestor de artículos
Contenedor de Artículo y Categorías
Categorías: Ayudan a organizar
Diferentes niveles
27
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Trabajo alumno Gestor de artículos
Modificar el artículo Central:
“Actualizadores”
En su lugar escribir una entrada:
Título: Web Personal de XXXX
Texto: …..
28
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Trabajo alumno Gestor de categorías
Despublicar todos los artículos de esta
categoría llamada “Joomla”
Qué efecto tiene en el portal?
Finalmente volver a publicar la categoría
VACIO
29
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Trabajo alumno Gestor de categorías
Modificar permisos para que los artículos de
la categoría “Joomla” y ponerlo solo para
usuarios
Qué efecto tiene en el portal?
Acceder como “admin”
Deshacer esta acción
30
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Trabajo alumno Edición directa
Si tenemos permisos podemos modificar
contenido desde el front-end.
31
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Trabajo alumno Gestor de artículos
Crear un nuevo artículo “Documento Prueba”
Incluirlo dentro de la categoría “Joomla”
Escribir algo de texto
Visible para el “público” general
Con las siguiente opciones:
Con iconos de “email”, “imprimir”, “votar” y “número de veces
leído”.
Incluir un link al documento padre.
Podéis encontrarlo en el portal?
Incluirlo dentro de la categoría “componentes”
32
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Trabajo alumno Gestor de artículos
Cambiar el orden en que aparece dentro de
componentes:
Colocarlo en el orden “1”
33
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Administrador: Gestor de menús
Vamos añadir un nuevo elemento a un menú
Dentro de “Sobre Joomla” link a “Documento de prueba”
34
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Trabajo alumno Gestor de menús
Seleccionar crear nuevo menú
Tipo de Menú: “Artículo simple”
35
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Administrador: Gestor de menús
Podemos ajustar la posición que ocupa en la lista dentro
del menú
36
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Administrador: Gestor de menús
Información en la sección de “Menú”
37
Nombre Menú Número de submenus Módulos visibles desde dentro del menú y (lugar que ocupan en la ventana)
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Administrador: Gestor de menús
Información en la sección de “Elementos Menú”
38
Tipo de contenido al que accedemos cuando clickamos en el menú
Página de inicio
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Trabajo alumnos Gestor de menús
El “menú principal”: Inicio Configuración del aspecto de la página principal
Prueba diferentes configuraciones de los números indicados en el recuadro rojo
Finalmente, cambia la página de inicio del portal para que aparezca “Primeros pasos”
39
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Administrador: Gestor de menús
Vamos a limpiar el contenido que no necesitamos
Eliminar Menu “Sobre Joomla!“
La eliminación no borra todos documentos asociados al menú
Crear un menú con las siguientes propiedades
Crear una categoría que se llame “Categoria”
Crear una subcategoría que se llame “Subcategoria”
Crear un menú que se llame “Mi menu”
Dentro del menú crear un submenu
Mostrarlo en la parte derecha de la pantalla
El menú mostrará una lista de los artículos del gestor de artículos
40
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Administrador Gestor de Extensiones
Permite instalar
Componentes: Realizan funciones en el portal
Encuestas, Banners, Control de acceso, Panel de
control, mensajería, …
Módulos: Muestran información usando algún
formato específico
Ultimas noticias, usuarios registrados, Pie de página,
artículos, Buscar, Estadísticas, …
Plantillas: Definen el aspecto visual del portal
Beez_20, beez5, atomic, …
41
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Resumen General
42
Menu 1: Modulo 2 (posición 1)
Modulo 1 (posición 0)
Menu 2: Modulo 3 (posición 2)
Menu 3 Modulo 4 (posición 3)
Menu 4 Modulo 5 (posición 4)
Modulo 6 (posición 5)
El módulo se debe de asociar a un conjunto de menús
El módulo se asociará a una posición determinada de la plantilla
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Administrador: Gestor de Módulos
Dispone de muchos módulos pre-instalados
Los módulos pueden ser colocados en una posición de
una plantilla (averiguar que “position” se corresponde con cada
localización en la pantalla para vuestra plantilla)
Asociar el módulo “Quien Esta En Línea” con todos los menús
Hacer que se muestre en la parte superior de los menús de cada página (position-1)
Dar de alta a un usuario y acceder con él
43
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Templates en Joomla Gestor de Plantillas y Extensiones
La plantillas definen la visualización de nuestra página
Cambiar la plantilla por defecto:
Usar: “Beez2 - Parks Sitio” y volver a visualizar vuestro portal
También podemos descargar una plantilla sencilla de Internet:
http://plantillasjoomla.com/descargar-plantilla-joomla-1-6-simplex/
Instalarla con el Gestor de Extensiones
Aplicar la plantilla en el Gestor de Plantillas y utilizarla como
plantilla por defecto
44
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Plantillas en Joomla Gestor de Extensiones
Los templates o plantillas se pueden modificar y personalizar
Cada template tiene unos campos diferentes que pueden ser
modificados
Modificar el Color de la Plantilla de Beez_20
Cambiar el logo que utiliza por defecto
Escribir en la descripción del sitio, “Página web personal”
Modifica el estilo de la página “Parks Sitio” para que coincida con el de la
página principal
45
Mejora tu sitio web – Rafael Sebastian – Universitat de Valencia - Febrero 2012
Módulos y Componentes Gestor de Extensiones
Vamos a instalar un módulo y un componente para
encuestas que descargaremos de:
http://afactory.org/downloads (Joomla v1.6)
Mediante el componente podremos configurar el
sistemas de encuestas
Mediante el módulo visualizamos las estadísticas y
permitimos que los usuarios hagan sus votos
Activar el módulo en el Gestor de Módulos
Incluir, Nombre, posición, encuesta activa, menú asociado
46