Administración de portales educativos con Joomla Antonio Durán.

Presentación del tema: "Administración de portales educativos con Joomla Antonio Durán."— Transcripción de la presentación:

1 Administración de portales educativos con Joomla Antonio Durán

2 Portales educativos ● Puerta de acceso virtual a información y servicios para toda la comunidad educativa ● Se propone incentivar la comunicación entre padres, alumnos, profesores y el propio centro ● Joomla es la herramienta que se usa para mantener el portal Web – Sistema Gestor de Contenido (CMS) que combina diversas funcionalidades

3 Portales educativos ● Acceso: – http://portalcentro.educarex.es/centro http://portalcentro.educarex.es/centro ● Portal de ayuda: – http://portalcentros.educarex.es http://portalcentros.educarex.es ● Descargas -> Manuales – Manual de Usuario Primaria. Describe las funcionalidades que ofrece el portal – Guía de Adaptación Portales Educativos – Administrador. Manual de administrador del portal educativo, que explica como realizar todas las tareas de administración

4 Gestores de Contenidos (CMS) ● Sistema de Gestión de Contenidos o Content Managment System (CMS) ● Permite la creación y administración de contenidos en páginas web ● Dividido en dos partes: – Base de datos, donde se almacena el contenido – El interfaz que controla el acceso a ese contenido

5 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

6 Gestores de Contenidos (CMS) ● Hay varios tipos de CMS, según las necesidades: – 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

7 Joomla ● Joomla es un CMS libre que permite la creación de sitios web, e incluye características como: – Gestión de noticias – Gestión de artículos – Galerías de imágenes – Gestión de usuarios – Mensajes entre usuarios –...

8 Joomla ● Joomla se divide en dos partes bien diferenciadas: – Parte de usuarios (front-end). Todos los visitantes pueden ver los contenidos publicados – Parte de administrador/editores (back-end). Sólo tienen acceso aquellos usuarios que el administrador haya autorizado. ● Aquí se introduce el contenido nuevo, se edita el existente y se cambian las opciones de configuración del sitio web.

9 Front-end ● Estructura general – Cabecera, con menú de secciones – Menú izquierdo, dependiente de la sección en la que estemos ● Nuestro Centro, Comunidad, Oferta – Menú de servicios, a la derecha – Menú de usuario, si estamos registrados – Otros elementos independientes de la sección, como calendario o estadísticas. – Parte central, con el contenido

10 Front-end ● Nuestro Centro – Portada. Últimas noticias – Información. Sobre el centro, calendario, etc. – Organización. Datos sobre el Equipo Directivo, el Consejo Escolar, etc. – Secretaría. Información relacionada. ● Comunicaciones de Secretaria a los usuarios, libros de texto, documentos.

11 Front-end ● Nuestro Centro – EOEP. – Proyectos – Tablón. Últimas noticias en formato resumido y acceso a todas las categorías de noticias – Biblioteca – Actividades – Contactar. Envío de mensajes al C.P.

12 Front-end ● Nuestro Centro – Agenda. Calendario de eventos previstos. ● Comunidad – Profesorado. Profesores, tutores, webs personales y noticias de la sección Profesores – Alumnado. Grupos, Información juvenil, noticias de la sección Alumnos – Padres. Escuela Virtual (desactivada) y noticias de la sección Padres

13 Front-end ● Comunidad – Personal no Docente. Datos sobre el personal no docente del centro. ● Oferta. – Información sobre la oferta educativa del centro

14 Front-end ● Menú Servicios – Buscar – Enlaces, divididos por categorías – Foros. – Descargas. Para proporcionar ficheros para descarga. – Galería. Colecciones de imágenes. – Quiosco. Acceso a prensa externa al portal.

15 Front-end ● Menú Servicios – Mensajería. Mensajes entre usuarios – Encuestas – Anuncios. Anuncios clasificados – FAQ. Preguntas más frecuentes – Blogs – Wiki – Libro de visitas

16 Front-end ● Menú usuario (aparece al identificarnos en el sitio web) – Perfil. Información sobre el usuario – Mis contenidos. Contenidos creados por el usuario – Enviar noticia. Envía una nueva noticia – Enviar enlace. Envía un nuevo enlace – Mi blog. Acceso al blog personal – Comprobar noticias. Desbloquea artículos

17 Front-end ● Menú usuario (aparece al identificarnos en el sitio web) – Favoritos. Favoritos dentro del sitio web – Salir. Abandona la sesión

18 Front-end ● Otros elementos – Acceso. Permite identificarse como usuario en el portal – Últimos eventos. Resumen de los próximos eventos – Estadísticas del portal – Agenda. Calendario de eventos del centro – Imágenes al azar. Fotos aleatorias de las colecciones – ?Quien está en línea? Usuarios conectados

19 Front-end ● Otros elementos que aparecen al entrar como usuario registrado – Blogger. Acceso al blog – Favoritos. Enlaces a los favoritos del usuario dentro del portal – Mensajería. Para enviar mensajes entre usuarios registrados

20 Back-end ● Parte de administrador. Visión general. – Acceso a través de: ● http://portalcentro.educarex.es/centro/administrator http://portalcentro.educarex.es/centro/administrator – Autenticación necesaria para acceder ● nombre de usuario y contraseña facilitados por la Consejería ● pueden crearse otros usuarios para repartir las funciones de mantenimiento de la web

21 Back-end ● Parte de administrador. Podemos dividir la página en 3 áreas importantes: – Menú superior – Barra de información – Área de trabajo ● Página inicial del administrador – Barra de herramientas con accesos rápidos para las acciones más frecuentes

22 Back-end ● Menú superior – 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

23 Back-end ● Barra de información – A la izquierda aparece el nombre del sitio y la sección o componente sobre el que estamos trabajando – A la derecha, 4 iconos: ● E-mail: buzón donde se notifican las novedades del portal: envío de noticias, enlaces, altas de usuarios, etc. ● Vista previa. Muestra el front-end

24 Back-end ● Barra de información – A la derecha, 4 iconos: ● Usuarios. Administradores que están conectados actualmente ● Salir. Cierra la sesión de administrador.

25 Back-end ● Área de trabajo – Es la zona donde se realiza el trabajo realmente – Dependerá de que elemento estemos administrando – En la página de inicio está formada por dos elementos: ● Panel de control ● Módulos del panel lateral

26 Back-end ● Panel de control – Añade un nuevo contenido. Para crear artículos o noticias – Editar contenidos de artículos. Para editar artículos ya creados – Editar contenido estático. Para editar contenidos estáticos – Administrador página de inicio. Configura que noticias aparecen en la página principal

27 Back-end ● Panel de control – Archivados. Para ver los elementos archivados – Administrar secciones – Administrar categorías – Gestor multimedia. Para subir y acceder a los archivos multimedia – Elementos eliminados. Acceso a los elementos borrados

28 Back-end ● Panel de control – Administrador de menús. Edición de menús del portal – Administrar idiomas – Administrar usuarios. Crear, borrar y modificar perfiles de usuario – Configuración global. Opciones generales del sitio – Instalar componente. Gestión de componentes

29 Back-end ● Panel de control – Instalar módulo. Gestión de módulos ● Nota: Para regresar al panel de control desde cualquier parte de la zona de administrador, pulsar el botón Inicio del Menú Superior

30 Back-end ● Panel lateral. Acceso a información adicional sobre el portal – Registro. Lista de administradores activos – Popular. Noticias más visitadas – PollTxt. Encuestas – Componentes instalados – Últimos artículos – Estadísticas – To-do. Tareas pendientes del administrador

31 Back-end ● Barra de herramientas. Aparece en el resto de las zonas del bak-end: – 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.

32 Personalizando el portal ● Datos del centro – Panel de control -> Configuración global ● Nombre del portal ● Estado ● Descripción (Metadatos) ● Correo ● Logo ● Práctica: Hacerlo en nuestro portal

33 Personalizando el portal ● Administrar usuarios – Panel de control -> Administrar usuarios ● Listado de usuarios del sistema, indicando a que grupo pertenecen ● Añadir/eliminar usuarios ● Modificar los existentes

34 Personalizando el portal ● Administrar usuarios – Modificar los datos del usuario Administrador ● Cuenta de correo ● Contraseña – Añadir nuevos usuarios administradores ● Se pueden crear nuevos usuarios administradores para repartir las tareas de mantenimiento del portal

35 Práctica ● Modificar los datos del usuario Administrador ● Cuenta de correo ● Contraseña

36 Personalizando el portal ● Personalizando los contenidos – Hay que cambiar todos los contenidos que se dan de muestra para adaptarlos a nuestro centro – Se pueden hacer cambios desde el back-end ● Entrar en Editar contenido estático – o desde el front-end, siempre que entremos como administrador ● Entrar en Información y pulsar el icono de Edición

37 El editor ● Título del artículo – Se mostrará subrayado y de mayor tamaño. El alias no se usa. ● Barra de herramientas del editor. Vamos describiendo de izquierda a derecha para que sirven los iconos: – Deshacer y rehacer. – Ayuda

38 El editor ● Barra de herramientas del editor. – Negrita/cursiva/subrayado – Lista (no numerada y numerada) – Incrementar/decrementar sangrado – Texto tachado – Abre el editor HTML para ver el código – Elimina el formato del texto seleccionado – Cortar/copiar/pegar/pegar como word/pegar como texto plano

39 El editor ● Barra de herramientas del editor. – Buscar/reemplazar – Insertar línea horizontal – Subíndice/superíndice – Alinear izquierda/derecha/centro/justificado – Insertar tabla – Propiedades de las filas/celdas

40 El editor ● Barra de herramientas del editor. – Insertar fila (antes/después), borrar fila – Insertar columna (antes/después), borra columna – Separar celdas, unir celdas – Insertar/editar ancla – Insertar/editar enlace – Desenlazar

41 El editor ● Barra de herramientas del editor. – Selecciona el estilo de texto – Selecciona la fuente – Selecciona el tamaño – Color del texto – Color del fondo – Insertar carácter personalizado – Ver elementos invisibles – Alineación izquierda/derecha – Selecciona el formato

42 El editor ● Barra de herramientas del editor. – Insertar template – Insertar vídeo – Insertar/editar imagen – Inserta un enlace a un archivo – Previsualizar – Insertar Flash/Quicktime/Windows Media – Imprimir – Activar el modo a pantalla completa – Insertar emoticonos

43 Editando contenido ● Manejo de fotos – Pulsar el icono de Insertar Imagen – Aparece una ventana emergente en la que podemos elegir alguna de las fotos ya existentes en el portal – También podemos subir una nueva foto, pulsando el icono de Subir, y eligiendo la imagen deseada. Después de subirla, aparecerá en la lista para poder elegirla – Recuerda usar texto alternativo para cuestiones de accesibilidad

44 Editando contenido ● Manejo de enlaces – Puedes crear enlaces, tanto externos como internos al propio portal, o a direcciones de correo ● Enlaces externos: indica la URL y la ventana en que quieres que se abra ● Enlaces a correo: Dirección de correo y asunto que llevará el mensaje ● Enlaces internos: Selecciona el destino elegido – Los puedes crear tanto sobre un texto como sobre una imagen

45 Opciones del contenido estático ● Publicación – Publicado/no publicado – Nivel de acceso – Autor – Fechas de creación/publicación/fin de la publicación – Algunas estadísticas

46 Opciones del contenido estático ● Parámetros – Permite configurar algunos aspectos a la hora de mostrar el contenido: ● mostrar o no el autor ● mostrar o no el título ● Mostrar o no las fechas de creación/modificación ● Mostrar iconos

47 Opciones del contenido estático ● Enlace al menú – Permite crear una entrada en el menú que apunte al contenido estático sobre el que estamos trabajando. – Se selecciona el menú en el que queremos añadir la entrada – Se le pone nombre a la entrada – Útil, porque para enlazar contenido estático desde un menú, debe estar ya creado ese contenido.

48 Barra de herramientas (editar contenido estático) ● Previsualizar. Muestra en una nueva ventana como se vería actualmente la página que estamos modificando. ● Subir. Permite subir un archivo al sitio web.Por ejemplo, una imagen para añadir al documento. ● Guardar. Guarda los cambios y vuelve al menú de contenido estático. ● Aplicar. Guarda los cambios y sigue editando.

49 Barra de herramientas (editar contenido estático) ● Cancelar. Anula los cambios y vuelve al menú de contenido estático. ● Ayuda. Muestra una página muy completa con instrucciones sobre la edición de contenido estático. ● IMPORTANTE: cuando terminemos de editar, siempre salir con Guardar o Cancelar, ya que si no el elemento quedará bloqueado para otros usuarios.

50 Práctica ● Modificar la página de Información del centro, para que refleje nuestros datos reales – Introducción de texto – Tabla con los datos del centro

51 Organización del contenido dinámico ● El contenido dinámico corresponde a las noticias y demás comunicaciones del sitio. ● Joomla tiene posibilidad de ordenar el contenido dinámico 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.

52 Organización del contenido dinámico ● Ejemplos: – Sección: Noticias ● Categorías: – Noticias generales – Noticias Padres – etc. – Sección FAQ ● Categorías – Preguntas frecuentes

53 Práctica ● Añadir una nueva noticia – Seleccionamos la opción en la página principal – Aparece una página casi idéntica a la vista al editar contenido estático – Solo algunas cosas nuevas: ● Seleccionar sección ● Seleccionar categoría ● Ver en la página principal

54 Contenido ● Editar contenido de artículos -> lista de artículos de contenido – Nombre – Publicado – Página de inicio – Acceso – Autor – Fecha

55 Personalizando el portal ● Muchas datos que modificar – Deseable repartir el trabajo ● Creación de nuevos usuarios que podrán colaborar en diversas tareas ● Primera división de usuarios – Invitados. Usuarios anónimos que no tienen acceso a las zonas restringidas del portal y no pueden crear o modificar contenidos – Registrados. Poseen una cuenta, con nombre de usuario y contraseña, recibiendo varios privilegios que no tienen los invitados

56 Personalizando el portal ● Los usuarios registrados se dividen en dos grupos: – Usuarios del Sitio (Front-end). – Usuarios del Administrador (Back-end)

57 Personalizando el portal ● Hay cuatro tipos de usuarios del Front-end: – Registrado. Tiene acceso a toda la información, pero sólo puede enviar enlaces para que se publiquen en el portal – Autor. Tiene permiso para enviar noticias, enlaces, subir documentos y modificar sus propios materiales. – Editor. Además de todo lo anterior, puede editar y modificar los artículos de los demás – Supervisor (Publisher). Enviar, editar y publicar cualquier artículo de contenido

58 Personalizando el portal ● Hay tres tipos de usuarios del Back-end: – Manager. Puede acceder a la administración de contenidos, pero no puede cambiar plantillas, alterar el diseño de las páginas, o añadir o eliminar extensiones de Joomla. Tampoco puede administrar usuarios. – Administrador. Además de lo que hace un Manager, pueden añadir o eliminar extensiones, cambiar plantillas o alterar el diseño de las páginas y modificar los perfiles de usuario de nivel igual o inferior al suyo.

59 Personalizando el portal ● Hay tres tipos de usuarios del Back-end: – Administrador. No pueden modificar usuarios del tipo Super-Administrador ni modificar algunas opciones generales del sitio – Super Administrador. Puede acceder a todas las funciones de Joomla.

60 Personalizando el portal ● Consejos de la Junta a la hora de administrar usuarios: – Incluye en el grupo de autores a cualquier usuario (profesor, padre o alumno) que lo solicite – Nombra, entre los usuarios de confianza, uno o varios Publisher para que te ayuden a revisar, modificar y publicar noticias – Si alguien está interesado y tiene conocimientos suficientes, hazle manager o administrador para que ayude

61 Creación de usuarios ● Al instalar Joomla, solo se crea el usuario administrador ● Se pueden crear nuevos usuarios de dos formas: – los propios usuarios pueden darse de alta desde el formulario de acceso ● antes debemos configurar correctamente el correo – se pueden crear desde la zona de administración

62 Configuración del correo ● Menú Sitio -> Configuración Global – Pestaña correo ● Gestión de correo electrónico – PHP mail function ● Correo del remitente – Escribir la dirección de correo del administrador ● Autentificación SMTP – No

63 Configuración del correo ● Menú Componentes -> Contactos -> Gestión de contactos – Elegir contacto ● Escribir la dirección de correo donde llegarán los mensajes del portal

64 Creación de usuarios ● Cuando un usuario rellene el formulario de registro, le llegará a su correo un enlace para confirmar el registro ● El perfil de los usuarios creados por este procedimiento es el de usuario registrado ● Desde la zona de administrador, podemos modificarlo para incluirlo en el grupo que deseemos ● Para crearlo desde el Back-end: – Panel de control -> Administrar Usuarios

65 Práctica ● Entrar en el Front-End y registrar un nuevo usuario, confirmando posteriormente visitando el enlace que nos llega al correo ● Identificarnos en el Front-End con el usuario creado y comprobar que aparecen nuevos elementos ● Añadir un nuevo enlace con el usuario registrado ● Publicar en enlace desde el back-end

66 Práctica ● Modificar, desde el Back-end, el tipo de usuario para hacerlo autor ● Salir y volver a entrar con el usuario en el front-end ● Enviar una noticia desde el menú Usuario ● Publicar la noticia con el administrador desde el back-end – Al entrar vemos que hay un nuevo mensaje informando de la noticia añadida ● Comprobar que aparece en el front-end y que podemos modificarla con el autor

67 Práctica ● El usuario autor también puede acceder a todos sus contenidos: – Usuario -> Mis contenidos – Puede ver todos sus artículos ● Si están o no publicados ● Cuantos accesos ha tenido ● Acceder a su modificación

68 Práctica ● Crear un nuevo usuario desde el back-end, haciendo que pertenezca al grupo Publisher – Este usuario podrá revisar y publicar los artículos de otros usuarios – Usuarios -> Mis contenidos ● Aparecen todos los contenidos ● Puede hacer que estén o no publicados activando el icono correspondiente – Hacer que no esté publicada la noticia anterior

69 Práctica ● Subir ficheros – El autor puede subir ficheros para hacerlos disponibles a los demás usuarios en la zona de descargas – Servicios -> Descargas ● Subir archivo – Elegir archivo – Ubicación – Nombre y descripción – Icono

70 Comunicación ● Podemos comunicarnos con los demás usuarios del portal – correo masivo – mensajería interna – boletines de noticias – foros – chat privado

71 Comunicación ● Correo masivo – Para mandar correos a todos los usuarios, a grupos de usuarios – Componentes -> Correo masivo ● Elegir destinos ● Escribir mensaje ● Enviar correo

72 Comunicación ● Mensajería interna – Para mandar mensajes internos al portal – En el front-end, Mensajería ● Recibidos ● Enviados ● Enviar – Formulario para redactar mensaje – Destinos, podemos ver la lista de usuarios del portal

73 Práctica ● Probar la mensajería interna del portal – Escribir un mensaje – Enviarlo al nuevo usuario creado – Entrar con el nuevo usuario y ver el mensaje

74 Menús ● Menús – Cada elemento del menú Opciones Menú 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

75 Menús ● Añadir/editar entradas del menú – Al añadir nuevo enlace, elegir el tipo de contenido enlazado: ● Bloque – Categoría de contenido. Muestra una página con los artículos de una categoría en formato bloque. Igual con archivados. Ej: Secretaria- >Comunicaciones ● Bloque – Sección de contenido. Muestra una página con los artículos de una sección en formato bloque. Igual con archivados.

76 Menús ● Añadir/editar entradas del menú – Al añadir nuevo enlace, elegir el tipo de contenido enlazado: ● Enlace – Artículo de contenido. Crea un enlace a un artículo. ● Enlace – Contenido estático. Crea un enlace a una página de contenido estático. ● Tabla – Categoría. Muestra una página con los artículos de una categoría en formato tabla. ● Tabla – Sección. Muestra una página con los artículos de una sección en formato tabla. Ej: Tablón

77 Menús ● Añadir/editar entradas del menú – Al añadir nuevo enlace, elegir el tipo de contenido enlazado: ● Separador. Crea un separador en el menú. ● Muestra una página externa dentro de Joomla. Ejemplo: Información->Calendario escolar ● Componente. Enlaza a un componente. Ej: página de portada. ● Enlace – Artículo de contacto. Enlaza a un contacto almacenado.

78 Menús ● Añadir/editar entradas del menú – Al añadir nuevo enlace, elegir el tipo de contenido enlazado: ● Enlace – Noticia externa. Enlaza a una noticia externa individual. ● Tabla – Categoría de contactos. Muestra una tabla con los contactos de la categoría. ● Tabla – Categoría de enlaces web. Igual que la anterior, pero con enlaces en lugar de contactos.

79 Menús ● Añadir/editar entradas del menú – Al añadir nuevo enlace, elegir el tipo de contenido enlazado: ● Tabla – Categoría de noticias externas. Muestra una tabla con las noticias externas de una categoría. ● Enlace – URL. Enlace a una dirección externa.

80 Menús ● Añadir/editar entradas del menú – Opciones de una entrada del menú ● Nombre ● Enlace (a donde apunta la entrada del menú) ● 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ú.

81 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

82 Práctica ● Ejercicio:no publicar en el menú alguna entrada que no queremos tener – Menú Opciones Menú ● Seleccionar menú con el que vamos a a trabajar ● Pulsar el icono de Publicado, para hacer que deje de estar disponible

83 Práctica ● Ejercicio: crear en el menú izquierdo un enlace a un contenido estático: – Seleccionar Nuevo de la barra de herramientas – Seleccionar el tipo que queremos: Enlace – Contenido estático – Rellenamos los datos necesarios: ● Nombre ● Contenido estático

84 Copias de seguridad ● Es deseable realizar una copia de seguridad cada 15 o 30 días, por si se produce algún problema en nuestro portal que nos haga perder datos ● Componentes -> eBackup -> Backup – Marcar la casillas de tablas, para seleccionar todas las tablas – Pulsar el botón Backup – Marcar las 5 primeras casillas

85 Copias de seguridad – Pulsar Start en la barra de herramientas – Esto crea una copia de seguridad que se almacena en el servidor con el nombre del portal y la fecha de creación – Para descargar el backup y así tener una copia en local: ● Componentes -> eBackup -> Repository – Icono de Descargar para bajar el archivo a nuestro ordenador

86 Copias de seguridad ● Para restaurar una copia de seguridad, después de que se haya producido algún problema: – Componentes -> eBackup -> Repository ● Elegir copia más reciente ● Pulsar el botón Restore de la barra de herramientas

87 Gestor multimedia ● Administración de imágenes y documentos del portal ● Panel de control -> Gestor Multimedia – Las categorías corresponden a directorios – Para meter ficheros en una categoría: ● primero entramos en ella ● después, elegimos el archivo y pulsamos Subir en la barra de herramientas

88 Práctica ● Subir el logo del Colegio – Se sustituye el símbolo @ por el logo del centro – Imagen jpg de 113x136 píxeles – Nombre: logo.jpg (plantilla: logo.psd) – Subir la foto con el gestor multimedia ● Acceder a la carpeta logo ● Subir el fichero