Mejora tu sitio web · Versión de Joomla Joomla_1.6.3-Spanish-Pack_Completo 13 . Mejora tu sitio...

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


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


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


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


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


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


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


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


Real

Windows 7

(realidad)

Virtual

Windows XP

(matrix)

10


Servidor - XAMPP (Apache)

Estado

11


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

https://localhost/


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


XAMPP – Crear Base de Datos

14


XAMPP – Crear Usuario

15


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


Instalación de Joomla Configurando base de datos

Aceptamos licencia

Configuramos la base

de datos

Utilizar los datos

apuntados anteriormente

17


Instalación de Joomla Configuración Principal

Importante pulsar “Instalar

Datos de Ejemplo”

18


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


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


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)


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”,…


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


Administrador: Gestor de artículos

Contenedor de Artículo y Categorías

Categorías: Ayudan a organizar

Diferentes niveles

27


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


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


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


Trabajo alumno Edición directa

Si tenemos permisos podemos modificar

contenido desde el front-end.

31



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



Cambiar el orden en que aparece dentro de

componentes:

Colocarlo en el orden “1”

33


Administrador: Gestor de menús

Vamos añadir un nuevo elemento a un menú

Dentro de “Sobre Joomla” link a “Documento de prueba”

34


Trabajo alumno Gestor de menús

Seleccionar crear nuevo menú

Tipo de Menú: “Artículo simple”

35



Podemos ajustar la posición que ocupa en la lista dentro

del menú

36



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)



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


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



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


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


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


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


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

http://plantillasjoomla.com/descargar-plantilla-joomla-1-6-simplex












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


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

http://afactory.org/downloads

Mejora tu sitio web · Versión de Joomla Joomla_1.6.3-Spanish-Pack_Completo 13 . Mejora tu sitio...

Documents

Transcript of Mejora tu sitio web · Versión de Joomla Joomla_1.6.3-Spanish-Pack_Completo 13 . Mejora tu sitio...