Mejora tu sitio web
Rafael Sebastián Aguilar
Víctor Fernández Bauset
Curso de extensión universitaria
Campus de Burjasot
Universidad de Valencia
Junio 2011 Mejora tu sitio web – Curso de extensión
universitaria – Junio 2011
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Í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 – Junio 2011
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 – Junio 2011
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 – Junio 2011
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
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Posibilidades de Joomla
Acción Cómo?
Organizar tu web Administrador
Publicar contenidos Editor, artículos, categorías
Modificar aspecto del portal Templates
Calendario, Estadísticas,
Visitas, reproductores, etc
Módulos y Componentes
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
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)
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
XAMPP (Apache)
Estado
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
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 (que la
mayoría de las ocasiones será localhost).
phpMyAdmin
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Instalación de Joomla Importante!
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
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
XAMPP – Crear Base de Datos
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
XAMPP – Crear Usuario
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Instalación de Joomla
En directorio „htdocs‟ crear directorio „Joomla16‟
En el directorio anterior descomprimir el contenido
de Joomla
Iniciar instalación Joomla: „http://localhost/joomla16/’
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 – Junio 2011
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/
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
El administrador de Joomla (II)
• Imagen administrador
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Back end: Site Configuracion de aspectos del sitio web
Configuración Global
Gestor de artículos Eliminar algunos
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 – Curso de extensión universitaria – Junio 2011
Administrador:
Gestor de artículos
Eliminar el artículo Central: “Actualizadores”
En su lugar escribir una entrada:
Título: Web Personal de XX
Texto: …..
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Administrador:
Gestor de artículos
Cada Template define áreas en la pantalla
Podemos usarlas para colocar nuestros
artículos
Primero generamos un artículo
Después le asignamos un lugar en el template
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Administrador:
Gestor de artículos Contenedor de Artículo y Categorías
Categorías: Ayudan a organizar
Diferentes niveles
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Administrador:
Gestor de artículos
Generar un nuevo artículo “Documento de prueba”
Darle la categoría “Componentes”
Colocarlo en el orden “1”
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Administrador:
Configuración global
Vamos a hacer que las URL sean más amigables
Configuración Global:
Configuración SEO:
Renombrar fichero htacess.txt .htacess (desde consola MS-DOS)
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Administrador:
Configuración global
Vamos a incluir información para que los motores de
búsqueda pueda indexar nuestra página
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Administrador:
Gestor de menús
Vamos añadir un nuevo elemento al “Menú Principal”
Crearemos “Documento de Prueba” en Components
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Administrador:
Gestor de menús
Vamos añadir un nuevo elemento a un “menú”
Crearemos “Documento de Prueba” dentro de
Components
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
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
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Administrador:
Gestor de menús
El “menu principal”: Inicio Configuración del aspecto de la página principal
Prueba diferentes configuraciones de los número indicados en el recuadro rojo
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Administrador
Gestor de Extensiones
Permite instalar
Componentes
Módulos
Plugins
Templates
Lenguajes
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Administrador:
Gestor de Módulos
Dispone de todos los módulos instalados
Los módulos pueden ser colocados en una posición de
un template Asociar el módulo “Quien Esta En Línea” con todos los menús
Hacer que se muestre en la parte inferior de cada página
Dar de alta a un usuario y acceder con él
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Templates en Joomla
Definen la visualización de nuestra página
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
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Templates en Joomla
Los templates 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
Mejora tu sitio web – Curso de extensión universitaria – Junio 2011
Módulos y Componentes
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