Joomla

1

• Joomla

2
Gestores de Contenidos (CMS)

• Sistema de Gestión de Contenidos o Content
  Managment System (CMS)
• Aplicación informática para crear, editar,
  manejar y publicar contenidos de una forma
  organizada y consistente.
• Es una forma de construir sitios webs con gran
  funcionalidad y poco esfuerzo

3
Gestores de Contenidos (CMS)

• Dividido en dos partes
• Base de datos, donde se almacena todo el
  contenido
• El interfaz que controla el acceso a ese
  contenido. Es la forma en la que se muestra el
  contenido

4
Gestores de Contenidos (CMS)

• Contenidos y presentación se tratan por separado
• Es posible cambiar el diseño del contenido en
  cualquier momento, sin tener que darle formato de
  nuevo al mismo
• Permiten la edición y publicación de varios
  usuarios. Ejemplo
• Un profesor pone datos nuevos
• El administrador los hace públicos

5
Gestores de Contenidos (CMS)

• Hay varios tipos de CMS
• Foros de discusión
• Blogs con artículos o noticias en orden
  cronológico
• Wikis, artículos que todos pueden editar
• Sitios webs completos, que incluyen
  funcionalidades diversas

6
Joomla

• Joomla es un CMS libre que permite la creación de
  sitios web, e incluye características como
• Gestión de noticias
• Blogs
• Galerías de imágenes
• Gestión de usuarios
• Búsqueda dentro de la propia web
• ...

7
Instalación

• Requisitos previos
• Apache
• Es el servidor Web, el programa que interpreta el
  código y nos muestra las páginas
• PHP
• Lenguaje de programación usado en Joomla
• Descargar la última versión de Joomla
• http//www.joomlaspanish.org/
• Sitio web del equipo español de Joomla, que
  proporciona paquetes de Joomla en español

8
Joomla

• Joomla se divide en dos partes bien
  diferenciadas
• Parte de usuarios (front-end). Todos los
  visitantes pueden ver los contenidos publicados
• Los usuarios autorizados para ello pueden
  introducir contenido
• Parte de administrador (back-end). Sólo tienen
  acceso aquellos usuarios que el administrador
  haya autorizado.
• Aquí se administra todo el portal

9
Como Funciona Joomla ?
10
Front end

• Parte de usuario. Formato común.
• Cabecera de la página
• Menú izquierdo y otros bloques
• Bloques en el lado derecho
• Parte central de la página, donde aparece el
  contenido.
• Es lo que cambia al cambiar de página dentro del
  sitio web

11
Tipos de contenido

• En Joomla hay diferentes tipos de contenido para
  que elijamos en cada momento el que mas se ajuste
  al contenido a tratar
• Artículos
• Es el contenido que se introduce como tal
• Son las páginas de información o las noticias del
  sitio
• Ejemplo Noticias, Visión general

12
Tipos de contenido

• En versiones anteriores de Joomla, este contenido
  se dividía en
• Contenido estático
• Una página del sitio que se mantiene en el tiempo
• Ejemplo Visión general
• Contenido dinámico, o artículos
• Es contenido que se van introduciendo

13
Tipos de contenido

• En Joomla hay diferentes tipos de contenido para
  que elijamos en cada momento el que mas se ajuste
  al contenido a tratar
• Componentes
• Muestran información en la parte central de la
  página, de alguna manera especial.
• Ejemplo Página de portada. Muestra todos los
  artículos seleccionados para aparecer en portada.

14
Tipos de contenido

• Módulos
• Muestran alguna información en los bloques
  laterales de la página
• Ejemplo Encuestas

15
Tipos de contenido

• El contenido dinámico se organiza en base a
  secciones y categorías
• Las secciones contienen categorías
• Las categorías contienen artículos
• Cada sección debe tener al menos una categoría,
  para poder asignar artículos.

16
Back - end

• Parte de administrador. Visión general.
• Acceso a través de
• http//joomla.64-bits.com/administrator
• Autenticación necesaria para acceder
• nombre de usuario y contraseña introducidos en la
  instalación
• pueden crearse otros usuarios para repartir las
  funciones de mantenimiento de la web

17
Back - end

• Parte de administrador. Podemos dividir la página
  en 4 áreas importantes
• Menú principal
• Barra de información
• Barra de herramientas
• Área de trabajo
• Página inicial del administrador
• Accesos rápidos para las acciones más frecuentes
  a realizar por el administrador

18
Back - end

• Menú principal
• Acceso a todas las funciones de administración de
  Joomla
• Al pulsar sobre un menú se despliegan las
  opciones, pudiendo algunas de ellas tener submenús

19
Back - end

• Barra de información
• En la parte derecha hay 4 iconos
• Notificaciones del portal
• Vista previa
• Usuarios
• Salir

20
Back - end

• Barra de herramientas
• Provee de distintos instrumentos para la creación
  y manipulación de contenidos y otros elementos de
  Joomla, como menús.
• Esta barra tiene botones distintos dependiendo
  del elemento que se está administrando
• Aparecen casi siempre Nuevo, Editar, Publicar,
  Guardar, Cancelar, etc.

21
Back - end

• Espacio de trabajo
• Es la zona donde se realiza el trabajo realmente
• También dependerá de que elemento estemos
  administrando

22
Menú del administrador

• Sitio
• Panel de control vuelve a la página inicial
• Gestor de usuarios para gestionar los usuarios
  del sistema
• Gestor multimedia para subir fotos y demás
• Configuración global. Opciones generales de la
  web.
• Cerrar sesión para salir de la zona de
  administración.

23
Menú del administrador

• Menús
• Cada elemento del menú Menús da acceso a la
  edición de un menú del portal
• Aparecen en forma de lista, todos los elementos
  del menú seleccionado
• Enlace
• Indicación de si está publicado
• Orden y controles para modificarlo
• Tipo de acceso necesario
• Tipo de contenido e identificadores

24
Menú del administrador

• Contenido
• Gestor de artículos acceso a todos los artículos
• Papelera de artículos acceso a los artículos
  eliminados
• Gestor de secciones para manejar las secciones
• Gestor de categorías para manejar las categorías
• Gestor de la página de inicio artículos que
  aparecen en la página de inicio

25
Menú del administrador

• Componentes
• Acceso a todos los componentes instalados
• Extensiones
• Instalar/desinstalar para instalar o desinstalar
  extensiones
• Gestor de módulos acceso a todos los módulos
  instalados
• Gestor de plugins acceso a todos los plugins
  instalados

26
Menú del administrador

• Extensiones
• Gestor de plantillas para gestionar las
  plantillas del sitio
• Gestor de idiomas para elegir el idioma
  predeterminado del sitio web

27
Menú del administrador

• Herramientas
• Leer mensajes accede a los mensajes del
  administrador
• Escribir mensajes para escribir mensajes
  privados a otros administradores
• Correo masivo Para mandar correos a los usuarios
  del portal
• Desbloqueo global Quita todos los candados.
• Limpiar la caché

28
Pasos siguientes

• Hemos visto una visión general del front-end y el
  back-end
• Muchos datos, difíciles de recordar
• A partir de ahora, iremos haciendo prácticas para
  aprender todo lo que hemos contando hasta ahora
  gestión de contenido, uso de módulos y
  componentes, instalación de extensiones, etc.

29
Artículos

• Añadiendo contenido
• Panel de control Añadir un nuevo artículo
• La página que aparece se divide en tres partes
• El editor
• Las opciones, que aparecen en la parte derecha de
  la pantalla
• La barra de herramientas para actuar sobre el
  contenido.

30
Artículos

• Título del artículo
• Se mostrará subrayado y de mayor tamaño. El alias
  no se usa.
• Publicado si se publica el artículo
• Página principal si aparece en la página
  principal
• Sección a la que pertenece
• Categoría a la que pertenece

31
Artículos

• Joomla tiene posibilidad de ordenar el contenido
  del sitio en base a
• Las secciones contienen categorías
• Las categorías contienen artículos
• Cada sección debe tener al menos una categoría,
  para poder asignar artículos.
• También podemos tener artículos sin clasificar

32
El editor

• Barra de herramientas del editor.
• Negrita/cursiva/subrayado
• Alineación del texto
• Estilo
• Formato
• Tipo
• Lista (no numerada y numerada)
• Incrementar/decrementar sangrado
• Rehacer y deshacer

33
El editor

• Barra de herramientas del editor.
• Insertar enlace
• Quitar enlace
• Insertar ancla
• Insertar imagen
• Limpiar código
• Editar HTML
• Buscar/reemplazar
• Insertar fecha

34
El editor

• Barra de herramientas del editor.
• Insertar hora
• Emoticonos
• Insertar vídeo
• Dirección del texto
• Nueva capa y opciones de capas
• Color del texto
• Insertar línea horizontal
• Quitar formato

35
El editor

• Barra de herramientas del editor.
• Ver/no ver elementos invisibles
• Subíndice
• Superíndice
• Insertar carácter especial
• Insertar barra horizontal
• Insertar/modificar tabla

36
El editor

• Barra de herramientas del editor.
• Propiedades de la fila
• Propiedades de la celda
• Insertar fila (antes/después), borrar fila
• Insertar columna (antes/después), borra columna
• Dividir celdas
• Combinar celdas

37
El editor

• Barra de herramientas del editor.
• Cambiar a pantalla completa
• Editar estilos CSS

38
Parámetros del artículo

• Parámetros Artículo
• Autor
• Alias
• Nivel de acceso
• Fecha de creación
• Iniciar publicación
• Publicación finalizada

39
Parámetros del artículo

• Parámetros Avanzado
• Información de metadatos

40
Barra de herramientas

• Previsualizar. Muestra en una nueva ventana como
  se vería actualmente la página que estamos
  modificando.
• Guardar. Guarda los cambios y vuelve al menú de
  contenido estático.
• Aplicar. Guarda los cambios y sigue editando.

41
Barra de herramientas

• Cerrar. Cierra sin guardar.
• Ayuda. Muestra una página muy completa con
  instrucciones sobre la edición de contenido (en
  inglés)
• IMPORTANTE cuando terminemos de editar, siempre
  salir con Guardar o Cancelar, ya que si no el
  elemento quedará bloqueado para otros usuarios.

42
Práctica

• Escribir un nuevo artículo
• Insertar algún enlace
• Insertar una lista
• Insertar una tabla
• Clasificarlo en alguna de las categorías
  existentes
• Publicarlo en la página principal y comprobar que
  aparece correctamente

43
Gestor de artículos

• El gestor de artículos muestra una lista con
  todos los artículos que tenemos confeccionados en
  el portal
• Para cada uno se muestra
• Título
• Si está o no publicado
• Si aparece en la página principal

44
Gestor de artículos

• Para cada uno se muestra
• Orden
• Nivel de acceso requerido
• Sección
• Categoría
• Autor
• Fecha
• Número de impresiones

45
Editando contenido

• Manejo de fotos y otros archivos externos.
• Primero debemos subir la foto al sitio web, si
  aun no la tenemos allí, usando Gestor multimedia
• Después, al editar el artículo, pulsamos en
  Insertar/Editar Imagen y ponemos la dirección de
  la foto subida
• http//localhost/images/foto.png
• Al editar las propiedades de la imagen, podemos
  cambiar su tamaño y otras opciones.

46
Práctica

• Subir una foto con el Gestor Multimedia
• Usar el administrador de contenido para acceder a
  la edición del artículo que creamos antes, y
  modificarla insertando la imagen que hemos subido

47
Componentes

• Componentes
• Son mini aplicaciones que muestran contenido de
  una manera especial.
• Ejemplo la página principal.
• no existe como tal
• Se crea con las noticias que indicamos que deben
  aparecer en la página de inicio

48
Componentes

• Componentes incluidos en la instalación básica
• Banners para publicidad
• Búsqueda en la web
• Contactos. Organiza los contactos.
• Encuestas. Para proponer encuestas.
• Enlaces web. Para gestionar enlaces.
• Servidor de noticias. Para mostrar noticias
  externas.

49
Uso de un componente

• Ej Contactos
• Componente que permite la categorización de
  contactos
• Componentes -gt Contactos -gt Categorías
• Para gestionar las categorías de contactos
• Componentes -gt Contactos -gt Contactos
• Para gestionar los contactos

50
Uso de un componente

• Ej Enlaces web
• Componente que permite la categorización de
  enlaces web enviados por los usuarios
• Enlaces Web -gt Categorías. Permite la gestión de
  categorías
• Enlaces Web -gt Enlaces. Permite la gestión de
  enlaces.

51
Módulos

• Módulos
• Muy diferente de los anteriores
• Los artículos y los componentes se muestran en el
  cuerpo principal de la página
• Los módulos se pueden mostrar en cualquier parte
• Son los bloques que aparecen a los lados
• Acceso, Quien está en línea?, ...

52
Módulos

• Accesibles en Extensiones -gt Gestor de Módulos
• Algunos componentes usan también módulos para
  completar su funcionamiento
• Para cada menú del sitio, se crea un módulo del
  mismo nombre, a través del que podremos controlar
  las opciones de comportamiento del menú
• Posteriormente los veremos

53
Módulos

• Ej de uso de un módulo Quien está en línea?
• Este módulo muestra información sobre los
  usuarios conectados
• La información no se muestra en la parte central
  de la página, sino a la derecha
• Para configurar este módulo, entramos a
  Extensiones -gt Gestor de Módulos -gt Quien está
  en línea?

54
Módulos

• Ej de uso de un módulo Quien está en línea?
• Podemos configurar
• Opciones comunes a todos los módulos
• Posición
• Nivel de acceso
• En que partes del portal debe aparecer
• Opciones específicas del módulo
• Mostrar número o nombre de los miembros conectados

55
Práctica

• Cambiar la posición del módulo Quien está en
  línea?, para que aparezca a la izquierda
• Modificar la Posición
• Pulsar Guardar en la barra de herramientas
• Hacer también que se muestren los nombres de
  usuario
• Comprobar el cambio en la web

56
Uso de un componente/módulo

• Ej Encuestas
• Conjunto de componente y módulo que permite
  disponer de encuestas en el portal
• Los usuarios pueden votar y ver el progreso de
  los resultados

57
Uso de un componente/módulo

• Ej Encuestas
• Para introducir una nueva encuesta, usamos
  Componentes -gt Encuestas
• Nuevo lleva a crear una nueva encuesta
• Debemos publicarla
• Para que se muestre en la página, debemos ir a
  Extensiones -gt Gestor de Módulos -gt Encuestas
• En Parámetros del módulo, seleccionar la nueva
  encuesta

58
Práctica

• Añadir una nueva encuesta y hacer que aparezca
  publicada en la página principal
• Introducir nueva encuesta a través del componente
• Ponerla activa a través del módulo
• Recordar Modulo , después en componentes
  agregamos nuevos de cada tipo de modulo.

59
Módulos

• Para cada menú hay un módulo con el mismo nombre
• Al entrar, podemos configurar posición, acceso,
  páginas en las que debe aparecer, etc.
• Por tanto, las opciones de configuración del menú
  se cambian en Módulos, mientras que la edición de
  las opciones mostradas en el menú, se realiza en
  Menús.

60
Menús

• El portal se presenta ahora con una serie de
  menús predefinidos
• Si no estuviesen instalados los datos de ejemplo,
  estaría vacío
• Para adaptarlo a nuestras necesidades, podemos
  modificar, borrar o añadir nuevas entradas a los
  menús, o crear menús nuevos
• Para modificar un menú accedemos a Menús -gt
  Nombre del menú

61
Menús

• Se muestra un listado con todos los enlaces del
  menú, indicando el sangrado, el orden, el tipo de
  enlace, el tipo de acceso, etc.
• Si entramos en uno de ellos, podemos modificar
  opciones como el nivel de acceso requerido, o en
  que ventana debe abrirse en enlace
• Podemos añadir uno, pulsando Nuevo

62
Menús

• Cuando añadimos un nuevo enlace al menú, debemos
  elegir el tipo de contenido enlazado. Las
  opciones dependerán de las extensiones que
  tengamos instaladas, aunque algunas aparecerán
  siempre.

63
Menús

• Añadir/editar entradas del menú
• Opciones de una entrada del menú
• Nombre
• Enlace (a donde apunta la entrada del menú).
  Dependerá del tipo de entrada.
• Abrir en donde se abrirá el enlace
• misma ventana
• nueva ventana con controles
• nueva ventana sin controles
• Artículo padre. Sangrado de la entrada en el menú.

64
Menús

• Añadir/editar entradas del menú
• Opciones de una entrada del menú
• Orden en el que aparece en el menú
• Nivel de acceso necesario para que se muestre la
  entrada del menú al visitante

65
Práctica

• Crear en el menú izquierdo un enlace al primer
  artículo que creamos
• Seleccionar Nuevo
• Seleccionar Artículo -gt Presentación del artículo
• Poner título
• Seleccionar el artículo enlazado en Parámetros gt
  Básico
• Comprobar en el front-end

66
Menús

• Para controlar la configuración del menú, debemos
  acceder al módulo de mismo nombre que aparece en
  la lista de módulos
• Así, podemos configurar
• Título, y si queremos o no que se muestre
• Posición y orden
• Nivel de acceso requerido
• En que partes del portal debe aparecer
• Más opciones avanzadas

67
Usuarios

• Tipos de usuarios del front-end
• Invitado. Es el que llega al sitio web sin
  identificarse.
• Registrado. Puede acceder a las secciones
  restringidas, y enviar nuevos enlaces.
• Autor. Pueden crear nuevo contenido.
• Editor. Capacidad de editar sus artículos, y los
  de otros autores.
• Publicador. Pueden hacer lo que autores y
  editores, y además pueden publicar contenido.

68
Usuarios

• Añadir un nuevo usuario
• Menú Sitio -gt Administrador de usuarios
• Pulsar el icono Nuevo de la barra de herramientas
• Rellenar los datos del nuevo usuario
• Elegir el grupo al que pertenece
• Pulsar el icono Guardar de la barra de
  herramientas

69
Práctica

• Añadir un nuevo usuario Registrado
• Menú Sitio -gt Gestor de usuarios
• Pulsar el icono Nuevo de la barra de herramientas
• Rellenar los datos del nuevo usuario
• Pulsar el icono Guardar de la barra de
  herramientas
• Entrar en la web con el usuario creado

70
Editores

• Los usuarios con el rol Editor, podemos editar
  los artículos de los demás usuarios
• Al lado de cada artículo, podemos ver que aparece
  el icono
• Si pulsamos, podemos editar el artículo en
  cuestión

71
Publicadores

• Los usuarios con el rol Publicador, podemos
  editar los artículos de los demás usuarios
• Al lado de cada artículo, podemos ver que aparece
  el icono
• También aparecen los artículos no publicados, ya
  que estos usuarios pueden activar su publicación

72
Instalando extensiones

• Pasos para instalar una extensión
• Descargar la extensión de Internet
• Instalar la extensión desde el back-end
• Activar la extensión. Donde hacerlo dependerá del
  tipo de extensión módulo, componente, plugin...
• Usar la extensión

73
Plantillas

• Podemos instalar nuevas plantillas del mismo modo
  que instalamos otras extensiones
• Después de instalarlo, tenemos que activarlo,
  para todo el sitio o parte de él, para poder
  verlo
• Esto lo hacemos en Extensiones -gt Gestor de
  plantillas, como ya hicimos al ver las plantillas
  instaladas por defecto

74
Plantillas

• Un sitio web con muchas plantillas gratis es
• http//plantillasjoomla.org

75
Práctica

• Descargar dos nuevas plantillas de la web antes
  mencionada
• Asignar una de ellas como plantilla
  predeterminada
• (Se proporcionan 2 plantillas , para no tener que
  ser descargadas.)

76
Buscando extensiones

• Para localizar una extensión que resuelva alguna
  necesita que se nos plantee en Joomla, podemos ir
  a
• http//extensions.joomla.org/
• Repositorio de extensiones de Joomla, organizado
  por categorías
• También podemos buscar

77
RECURSOS

• Plantillas
• http//plantillasjoomla.org
• Extensiones
• http//extensions.joomla.org/
• Joomla español
• http//www.joomlaspanish.org/
• Practicas con Joomla
• practicas-con-joomla-1-5.pdf

78
Paginas con Joomla

• http//www.uteq.edu.mx/
• http//www.univer.edu.mx/
• http//www.iesgrancapitan.org
• http//frances.iesleonardodavinci.net
• http//ividal.com

79
FIN

• ISC Miguel Hugo Oseguera Castro
• miguel_at_itqro.com