Trabajo de evaluación de la asignatura , fecha y envío

A primeros de noviembre hemos terminado de ver cosas nuevas de Joomla! para dedicar el resto de las clases a realizar un proyecto web completo. El alumno deberá seleccionar un tema para el desarrollo de los contenidos y las funcionalidades que mejor se adapten a su tema.

Se documentará el desarrollo de proyecto web mediante la impresiones de pantalla de los avances y breves textos descriptivos. Se agradecerá la inclusión de un índice y de los títulos de las diferentes secciones en el documento con el objeto de aclarar su lectura.

Nota: Para plasmar la imagen de la pantalla en el documento de texto, pulsad la tecla 'Imprimir pantalla' de vuestro teclado con la imagen que deseáis pasar al documento, y pulsar CONTROL+V en el texto. Se copiará una copia exacta de la pantalla.

Envío: El documento se enviará por correo electrónico a la dirección marko.galarza@unavarra.es indicando vuestro nombre y apellidos, y haciendo referencia a la asignatura con el texto: 'Software libre Joomla'. Es imprescindible que por mi parte os envíe confirmación de la correcta recepción del trabajo. En caso de no responderos, insistid en el envío.

Fecha límite: la fecha límite para la recepción de los trabajos es el día 23 de diciembre.

Gestión de formularios en nuestra página: RSforms

En cualquier empresa u organismo surgen multitud de necesidades de recopilación de información de clientes, proveedores, asociados o usuarios en general. Por ejemplo, podemos necesitar el formulario de inscripción a un curso o conferencia, un formulario para el envío de currículums, una encuesta de satisfacción, un formulario para presupuestos, etc. Mil opciones y necesidades.

Uno de los componentes para formularios más intuitivo es RSforms.

INSTALACIÓN: Hay que instalar (como siempre) un único fichero que podéis descargar pulsando aquí.

Confirmáis su correcta instalación en Componentes -> RSform!.

GESTIÓN DE FORMULARIOS: La idea general es gestionar en un primer nivel los formularios y dentro de éstos los campos de los formularios. Desde Componentes -> RSform! -> Nuevo creais los formularios con como mínimo un Form Title y un Form Name. Pulsando después en el nombre del formulario y pulsando New Field se pueden ir creando todo tipo de campos para el formulario, desde campos de texto, selectores, listas, envío de ficheros, etc. La configuración de cada campo requiere bastante información (título, ID, descripción, etiqueta que leerá el usuario, texto de ayuda, tipo de validación, etc. Lo mejor es ir probando todo tipo de campos vosotros mismos.

VISUALIZACIÓN: Como se ha comentado anteriormente, podemos gestionar ilimitados formularios. Su visualización se realiza desde los menús: Menús -> Menú principal -> Nuevo -> RSform! y en Form id hay que poner el id del formulario que se puede obtener desde el gestor de formularios de RSforms Componentes -> RSform! -> Forms Manager -> Columna Form ID.

GESTIÓN DE LA INFORMACIÓN ENVIADA POR LOS USUARIOS: Desde Componentes -> RSform! -> Manage Submissions.

Enviar a un amigo

Con las opciones de compartir en las redes sociales, este tipo de funciones está prácticamente en desuso. El que hemos visto en clase es muy sencillo.

INSTALACIÓN: El fichero de instalación se puede descargar pulsando aquí.

VISUALIZACIÓN: Esta extensión es del tipo módulo, por lo tanto se activa desde Extensiones -> Gestor de módulos -> Nuevo -> Ajax Recommend. Con darle un Título, una Posición y configurarlo un poco en las opciones de la derecha, podemos ver los resultados en la página.

Un foro: Agora Forum

No es muy recomendable tener un foro de discusión si no se tiene un sitio web que recibe muchas visitas. Es muy común ver foros con apenas actividad, donde se ve que sólo el administrador general crea los temas y muchas veces se autorresponde. Esta es la situacuón del foro de la página web de Segunda Familia que estamos cogiendo de referencia.

Sin embargo, en un curso general es casi obligatorio verlo. La sección de foros del portal de extensiones de Joomla propone unas 13 soluciones diferentes. Una de estas es Agora Forum. No es la de mejor puntuación, pero es de las más sencillosy limpios.

INSTALACIÓN: Debéis desvargar e instalar estos dos ficheros (respetando el orden de la lista):

• El componente Agora Forum
• Su traducción al español
  

Comprobar su correcta instalación de Componentes -> Agora Forum.

Desde Componentes -> Agora Forum -> Foros se deben crear al menos dos niveles de información antes de visualizar la funcionalidad completa. Creais una nueva Categoría y un nuevo Foro. Podéis crear tantos como deseéis.

VISUALIZACIÓN: Para activar el foro en la página, hemos de crear un nuevo ítem de menú en el menú que queramos, por ejemplo, en Menús -> Menú principal -> Nuevo. En la lista que nos surge, aparece ahora sobre la opción artículos, la de Agora Forums. Le damos un nombre al ítem de menú en el campo Título, y vemos el resultado en la página web.

Para participar en el foro, un usuario se debe registrar. Podemos configurar nuestro foro con todo el listado de opciones que nos da en: Componentes -> Agora Forum -> Configuration.

Votaciones por parte de los usuarios

Joomla posee esta funcionalidad instalada por defecto. Se activa desde Extensiones -> Gestor de plugins -> Contenido - Votar -> Columna Publicado. Ver los resultados en la página.

Comentarios de los usuarios: JComments

Otros gestores de contenido tienen instalada por defecto la posibilidad de comentarios a un artículo por parte de los usuarios. Sin duda, futuras versiones de Joomla lo integrarán en su instalación básica.

El componente que vamos a instalar para realizar esta función es JComments. Encotnraréis el archivo correspondiente pulsando aquí.

INSTALACIÓN: Desde Extensiones -> Instalar/Desinstalar -> Subir paquete. Tras la subida del fichero aparece un mensaje indicando que se ha de pulsar Siguiente para finalizar la instalación.

El componente es accesible desde Componentes -> JComments, desade donde se gestionan y moderan los mensajes de los usuarios.

VISUALIZACIÓN: Para seleccionar los artículos que queremos puedan ser comentados, hemos de ir Componentes -> JComments -> Preferencias y seleccionar las categorías cuyos artículos pueden ser comentados. Así, cuando nuestra página muestre un artículo de alguna de estas categorías mostrará el formulario de comentarios para los usuarios.

El resto de pestañas de Preferencias (sobretodo Aspecto y Permisos) permita infinidad de posibilidades a esta funcionalidad.

Agenda de eventos JEvents

Hemos visto en clase una completa agenda de eventos: JEvents. Podemos visualizar las activiades en un calendario o com listado, así como gestionarlas de una manera muy flexible.

INSTALACIÓN: Descargar e instalar los siguientes ficheros respetando el orden:

1. Ficheros del componente
2. La traducción del componente, ya que viene por defecto en español
3. El módulo para visualizar un minicalendario en cualquier bloque, posición o módulo de nuestro sitio

Podremos crear nuestros eventos desde Componentes -> JEvents -> Administrar eventos iCAL -> Nuevo. No olvidéis indicar la fecha y hora exacta del evento en la pestaña Calendario.

VISUALIZACIÓN: Se puede hacer de dos maneras: como un nuevo ítem de menú y como un nuevo módulo. En el primer caso pulsáis Menús -> Menú principal (puede ser otro que hayáis creado. Ver Creación de menús) -> Nuevo -> Jevents -> Calendario mensual. Y veis el resultado en vuestra página.

La segunda opción es crear un módulo con el mini calendario. Desde Extensiones -> Gestor de módulos -> Nuevo -> JEvents Calendar podéis crearlo como módulo (o bloque).

Sitio multiidioma: Joomfish

Para dar soporte multiidioma anuestra página, el componente más utilizado es Joomfish.

INSTALACIÓN: A continuación se proporcionan los ficheros que hay que instalar (uno por uno y en este orden) desde Extensiones -> Instalar/Desinstalar -> Subir paquete:

• El componente Joomfish
• El fichero para traducir al español el componente y nos sea más cómodo trabajar
• Idioma Euskara
• Idioma Francés
• Idioma Alemán

Este proceso nos genera dos cambios importantes en la administración: se crea el Componente Joomfish (ver Componentes -> Joomfish) y el módulo Language selection (ver Extensiones -> Gestor de módulos -> Language selection) que va a hacer la función de menú de selección de idiomas.

El siguiente paso va a ser activar los idiomas de nuestra página para su selección por parte de usuario. Para ell se accede a Componentes -> Joomfish -> Configuración de Lenguaje donde tenemos los idiomas que podemos activar en nuestra web. En la columna Activo vamos a seleccionar todos los idiomas menos el Catalán. Si refrescáis vuestra página, podéis confirmar que se visualiza el menú de idiomas en alguna parte, en función de la plantilla que tenéis. Si no vierais este menú, entráis en Extensiones -> Gestor de módulos -> Language selection y seleccionáis en el campo Posición un bloque compatible con vuestra plantilla. Desde aquí poadéis también cambiar la apariencia de este menú desde el campo Apariencia del selector de lenguaje.

¿CÓMO SE HACEN LAS TRADUCCIONES?: Desde Contenido -> Gestor de artículos seleccionáis uno con la casilla a la izquierda del título del artículo. Seleccionáis en la esquina superior derecha (al lado de Previsualizar) el idioma al que queréis traducir este artículo. Se abre una ventana con un formulario con los campos típicos de un artículo en español y los correspondientes duplicados para su traducción.

Importante pulsar la casilla Publicado arriba a la derecha para visualizar la traducción.

Mapa con tecnología Google Maps y Google Street View

Es posible integrar los mapas interactivos de Google Maps y Street View en nuestra página de una manera muy sencilla mediante el Plugin Google Maps para Joomla.

INSTALACIÓN: El fichero correspondiente está accesible pulsando aquí. Se instala como siempre, desde Extensiones -> Instalar/Desinstalar -> Subir paquete.

Como se trata de una estensión de tipo plugin se debe activar tras su instalación desde Extensiones -> Gestor de plugins -> Google Maps pulsando en el icono rojo (columna Publicado) para transformarlo en verde.

VISUALIZACIÓN: Para visualizarlo en un artículo, es suficiente con escribir el siguiente código allá donde queremos mostrarlo:

• {mosmap}

CONFIGURACIÓN: ¿Cómo hacemos para que indique la ubicación que deseamos? Desde Extensiones -> Gestor de plugins -> Pulsamos Google Maps y accedemos al formulario con todas las opciones de tamaño, formato, ubicación, etc.

Para indicar nuestra ubicación, hemos de insertar las coordenadas en los campos Latitude y Longitude. Las de la UPNA son aproximadamente 42.800208, -1.636473. Modificando estos valores y refrescando el mapa en vuestra página (pulsando F5, por ejemplo) podéis ir ajustando la geolocalización.

STREET VIEW: Para activar la función de Street View, hay que completar el campo Streetviw (casi a final del formulario) con el texto top o bottom.

Libro de visitas Phoca Guestbook

Los libros de visitas que hace unos años eran muy comunes, han ido desapareciendo de los desarrollos web más recientes en favor de los foros de opinión y, sobretodo, de la posibilidad de comentar los artículos por parte de los usuarios.

A pesar de ello, y dada su simplicidad, hemos visto en clase una opción de libro de visitas. El componente concreto es Phoca Guestbook.

INSTALACIÓN: Descargad el fichero del componente desde esta ubicación. Al pulsar el botón Subir Archivo & Instalar surgen dos nuevos con el texto Install y Upgrade. Hay que pulsar Install para terminar correctamente.

Veremos que en el back end se ha instalado en Componentes -> Phoca Guestbook. La idea es que se pueden crear tantos libros de visita como queramos. Y ello es un requisito previo obligatorio. Debéis crear vuestro(s) libro(s) de visitas desde Componentes -> Phoca Guestbook -> Guestbooks -> Nuevo y le dais un nombre en el campo Título.

VISUALIZACIÓN: La visualización al usuario se realiza desde los menús. Creando un nuevo ítem de menú, allá donde deseemos enlazar a un libro de visitas, surge una nueva opción de enlace llamada Phoca Guestbook. El formulario de edición del ítem de menú pide en la columna derecha que se seleccione el libro a enlazar.

Cuando estamos en el Panel principal del componente, en la esquina superior derecha podemos configurar algunas opciones interesantes desde Preferencias. Una de estas opciones es Display Form, lo cual permite ocultar el formulario del libro que se hace visible al pulsar en el enlace.

Galería fotográfica en Flash Ozio Gallery

La tecnología Flash permite realizar galerías realmente espectaculares. El portal de extensiones de Joomla dedica una sección exclusivamente a galerías fotográficas de este tipo. Una de las mejor valoradas y con multitud de opciones de configuración es Ozio Gallery.

INSTALACIÓN: Podéis descargar el componente Ozio Gallery desde este enlace. Se instala como siempre, desde Extensiones -> Instalar/Desinstalar -> Subir paquete.

Tras la subida e instalación, podéis confirmar que existe el componente Ozio Gallery en Componentes -> Ozio Gallery 2.

LA IMÁGENES: Hay que subir las imágenes de esta galería desde Sitio -> Gestor multimedia, a la carpeta oziogallery2 que se crea automáticamente duranet la instalación.

VISUALIZACIÓN: Para mostrar la galería en nuestro sitio, hemos de hacerlo desde los menús. Pulsáis Menús -> Menú principal (puede ser cualquier otro menú que hayáis creado previamente) -> Nuevo -> Ozio Gallery 2 -> y seleccionáis cualquier tipo de la lista.

Con escribir un Título al ítem del menú, se activa en la web, aunque podéis configurar multitud de opciones (colores, tamaños, velocidades...) en la columna derecha.

Dada la vistosidad de esta galería, recomiendo repitáis este proceso seleccionando diferentes tipos de galerías hasta decidiros por la que más os guste.

Fotografía ampliable

Una función sencilla pero muy prácita es la opción de ampliar una imagen incluida en el texto para mostrarla con mayor detalle. Vamos a utilizar una nueva extensión de tipo plugin para ello. Concretamente Slimbox Image Gallery. Tenéis todos los detalles en el portal de extensiones de Joomla.

Podéis descargar el fichero directamente desde aquí:

• http://www.anet.es/users/joomla/plg_slimbox.zip

Al igual que la instalación de las galerías de las entradas anteriores, debéis entrar en Extensiones -> Instalar/Desinstalar y desde Subir paquete lo seleccionáis y pulsáis Subir Archivo & Instalar.

Se debe activar desde Extensiones -> Gestor de plugins. Buscáis el plugin correspondiente: Content - Slimbox, y pulsáis en el icono rojo de la columna Publicado. Se convertirá en un icono verde que significa que está en funcionamiento.

Para crear un efecto de fotografía ampliada, vamos a necesitar generar nosotros mismos la miniatura que se verá en el artículo, así como la imagen de mayor tamaño. En clase se crearon:

• falcone1.jpg, imagen relativamente grande
• falcone2.jpg. imagen de menor tamaño que se pulsará para ser ampliada
  

Desde el Gestor multimedis, Sitio -> Gestor multimedia subimos ambas fotorafías, ya sea allí mismo como en una carpeta. La inserción del efecto de foto ampliada se consigue con el siguiente código a insertar en un artículo:

• {slimbox images/falcone1.jpg,images/falcone2.jpg,Francisco Falcone}

Separados por comas tenemos que indicar:

1. la ruta de la imagen grande
2. la ruta de la imagen pequeña
3. texto para el pie de imagen (sin comas ni caracteres extraños, claro)
   

Recordad que la ruta base del Gestor multimedia es images/ que hay que indicarlo en este plugin. Si quisierais coger imágenes de las galerías previas habría que escribir la ruta: images/galeria1/fotox.jpg.

Galería de fotos Very Simple Image Gallery

En el listado de extensiones de galerías fotográficas aparece en tercer lugar la galería Very Simple Image Gallery con demos y enlace a la página de su desarrollador. Nosotros podemos acceder al fichero desde aquí:

• http://www.anet.es/users/joomla/080_plg_vsig_1.6.2.zip

Al igual que la galería de la entrada anterior, desde la administración de Joomla, debéis entrar en Extensiones -> Instalar/Desinstalar y desde Subir paquete lo seleccionáis y pulsáis Subir Archivo & Instalar.

Se debe activar desde Extensiones -> Gestor de plugins. Buscáis el plugin correspondiente: Very Simple Image Gallery Plugin, y pulsáis en el icono rojo de la columna Publicado. Se convertirá en un icono verde que significa que está en funcionamiento.

La creación de estas galerías es muy similar a la SigPlus. Se debe crear una carpeta desde Sitio -> Gestor multimedia en el subdirectorio stories, por ejemplo galeria2, y subiendo nuestras imágenes para la galería. Su inclusión en un artículo se lleva a cabo escribiendo el siguiente código donde queremos que se vea:

• {vsig}galeria2{/vsig}

Correspondiendo galeria2 con el nombre del directorio que hemos creado.

Editando el plugin desde Extensiones -> Gestor de plugins -> Very Simple Image Gallery Plugin, podéis configurar la visualización de la galería: estilos, columnas, posición de las miniaturas, tamaños, etc.

Galería fotográfica SIGPLUS

En el portal de extensiones de Joomla se ofrecen una gran variedad de galerías fotográficas. En primer lugar como mejor valorada por la comunidad, aparece la galería SigPlus. En la ficha de le extensión se ofrece una demo y el enlace a la página del desarrollador.

Ya hemos distribuido en clase el fichero de instalación de esta galería, pero también lo podéis descargar desde aquí:

• http://www.anet.es/users/joomla/plg_sigplus-1.3.0.25.tgz

Desde la administración de Joomla, debéis entrar en Extensiones -> Instalar/Desinstalar y desde Subir paquete lo seleccionáis y pulsáis Subir Archivo & Instalar.

Esta extensión es del tipo plugin; no es un componente completo con su propio panel de control. Por ello (siempre con las extensiones de tipo plugin) se debe activar desde Extensiones -> Gestor de plugins. Buscáis el plugin correspondiente: Content - Image gallery - sigplus, y pulsáis en el icono rojo de la columna Publicado. Se convertirá en un icono verde que significa que está en funcionamiento.

¿Cómo crear las galerías? Tan simple como crear una carpeta desde Sitio -> Gestor multimedia en el subdirectorio stories, por ejemplo galeria1, y subiendo nuestras imágenes para la galería. Su inclusión en un artículo se lleva a cabo escribiendo el siguiente código donde queremos que se vea:

• {gallery}galeria1{/gallery}

Correspondiendo galeria1 con el nombre del directorio que hemos creado.

Editando el plugin desde Extensiones -> Gestor de plugins -> Content - Image gallery - sigplus, podéis configurar la visualización de la galería: estilos, columnas, posición de las miniaturas, tamaños, etc.

Los módulos o bloques en Joomla

Hasta ahora hemos utilizado el Gestor de módulos para visualizar y situar bloques de menús, acceso o login, encuestas y banners. Sin embargo la idea inherente de ver un módulo como un bloque en la estructura visual de nuestro sitio, nos permite dar las siguentes funcionalidades extra al gestor de módulos:

1. Acceder
2. Artículos relacionados
3. Banner
4. Marco (Wrapper)
5. Buscar
6. Menú
7. Contenido archivado
8. Personalizar HTML
9. Contenido más leído
10. Presentación de la suscripción
11. Encuesta
12. Quién está en línea
13. Estadísticas
14. Ruta de acceso
15. Flash de noticias
16. Secciones
17. Footer (pie de página)
18. Sindicación
19. Imagen aleatoria
20. Últimas noticias

Se recomienda practicar con todos ellos, principalmente con los módulos 'Personalizar HTML' y 'Ruta de acceso', por su importancia y flexibilidad.

Encuestas, banners, contactos y buscador

En el menú 'Componentes' del back-end de Joomla! encontramos las siguientes nuevas funciones:

1. Banner: permite la gestión de espacios publicitarios. Cada espacio es un bloque de un determinado tamaño que se sitúa en nuestra página, y cada banner puede ser una imagen, un fichero flash o incluso una porción de texto o HTML. Internamente se organizan por Clientes y Categorías; y lógicamente, se visualizan (dada su naturaleza de bloque) desde el 'Gestor de módulos'.
2. Buscar: Se trata de un registro de palabras utilizadas en el buscador interno del sitio web. Para activarlo hay que pulsar 'Preferencias' desde el componente, ya que está inactivo por defecto.
3. Contactos: Los contactos se pueden considerar como unas especie de artículo con un formato predeterminado. Se organizan internamente mediante Categorías, y al tratarse de contenido, y no de bloques se enlazan desde los menús, y no desde el Gestor de módulos (Nuevo ítem de menú -> Contactos -> Presentación del contacto de la categoría).
4. Encuestas: Se trata de mini-encuestas que se gestionan desde este componente. Este tipo de funcionalidad se incluye en un lateral como un pequeño bloque, por lo que se visualiza desde el Gestor de módulos.
5. Enlaces web: De naturaleza básica similar a los Contactos, se trata de simples unidades de contenido o artículo especial, por lo que se enlazan desde los Menús, y no desde el Gestor de módulos.

En estos vídeos podéis ver cómo gestionar Encuestas, Banners y Contactos. Aunque la mejor manera de aprender es ir probando vosotros mismos.

Encuestas:

Banners:

Contactos:

Sitio de descarga de plantillas

Enlace directo desde aquí.

Las plantillas de diseño

En las siguientes URLs encontraréis plantillas de diseño de Joomla! gratuitas:

1. http://www.joomlademo.de/
2. http://www.joomlaos.de/
3. http://www.joomlashack.com/
4. http://www.joomla24.com/
5. http://www.joomlart.com/

Para la instalación seguimos los siguientes pasos:

1. Nos descargamos el fichero de la plantilla. Generalmente es un .zip
2. En el back-end de Joomla! vamos a 'Extensiones' -> 'Instalar/Desinstalar'
3. En 'Subir paquete' seleccionamos el fichero y pulsamos 'Subir Archivo & Instalar'
4. Saldrá un mensaje de instalación exitosa
5. Vamos a 'Extensiones' -> 'Gestión de plantillas'
6. Seleccionamos la que queremos activar y pulsamos 'Predeterminado'
7. Refrescando nuestro sitio (pulsando F5) veremos el cambio visual

Hacer copia del portal en nuestrsa memoria USB

Los ordenadores del aula donde se imparte la asignatura, se suelen formatear bastante a menudo. Como todo el trabajo que desarrollamos en nuestra página web se almacena en la base de datos, lo perderíamos como causa de este formateo. Tampoco es posible llevarnos las tablas de la base de datos con la información.
El proceso de realización de las copias de seguridad en la memoria USB será el siguiente:

1. Paramos el servidor web y la base de datos ejecutando los siguientes ficheros situados en D:\xampplite\: mysql_stop.bat y apache_stop.bat.
2. Entramos al direcotrio D:\xampplite donde está nuestro servidor web, la base de datos y nuestro(s) portal(es) Joomla.
3. Seleccionamos todos los ficheros. Tened cuidado de borrar o de no seleccionar el fichero comprimido del día pasado.
4. Los comprimimos en un sólo fichero. Por defecto lo llamará xampplite.zip (creo)
5. Guardamos en la memoria USB este fichero

Cuando volvamos al día siguiente y si han formateado los ordenadores, podremos recuperar todo sin necesidad de instalarlo desde el principio. Para ello:

1. Creamos la carpeta D:\xampplite
2. Descomprimimos en esta carpeta el fichero que creamos el día anterior
3. Desde D:\xampplite\ ejecutamos setup_xampp.bat
4. Si en la pantalla que surge nos pregunta (en inglés) si queremos actualizar la configuración, pulsamos '1' e 'Intro'
5. Desde D:\xampplite\ ejecutar apache_start.bat y mysql_start.bat
6. Accedemos a nuestras páginas http://localhost/joomla1 o http://localhost/joomla2/

Menús con enlaces a Categorías y Secciones

Hasta ahora hemos hecho ítems de menú enlazados a artículos concretos. Si por ejemplo (continuando con nuestro sitio de referencia) pulsamos Noticias en la web www.segundafamilia.com vemos un listado con un resumen previo de varios artículos.

Esta funcionalidad es muy práctica para desarrollar un Blog, o una sección de Noticias, de Novedades, o incluso de Proyectos realizados por una empresa.

La forma de llevar a cabo esta navegación es en el momento en el que creamos un nuevo ítem de menú, cuando nos solicita Seleccionar el tipo de ítem del menú. En la opción Artículos surgen las siguientes posibilidades además de la que hemos utilizado Presentación del artículo:

• Presentación de la categoría blog
• Presentación de la lista de categorías
• Presentación de la sección blog
• Presentación de la sección

Probando a enlazar ítems de menú con estas opciones se puede comprobar el comportamiento exacto de Joomla! en tales casos. En la columna derecha al editar el ítem tenemos varias opciones interesantes en Parámetros - Básico y Parámetros - Avanzados.

Edición de los contenidos

El editor web que aparece por defecto para la edición de los contenidos de un artículo es el TinyMCE. Joomla! instala otras opciones pero este editor se está convirtiendo en un estándar en estas funciones.

TinyMCE extendido: en primera instancia se instala una versión básica de edición que es más que recomendable extender desde: 'Extensiones' -> 'Gestor de plugins' -> 'Editor - TinyMCE', y en la columna derecha 'Funcionalidad' -> 'Extendido', y 'Guardar' o 'Aplicar'

TinyMCE permite modificar el formato del texto con negrita, cursiva, subrayado, tachado, diferentes alienados, niveles de encabezamiento, índices, subíndices, tipos de fuente, color, color del fondo, etc. Controla formatos de listados numerados o no, y tablas de datos.

También dispone de opciones interesantes para copiar, pegar, deshacer cambios, buscar texto; así como la inserción de imágenes, ficheros multimedia, símbolos, líneas horizontales, etc.

En definitiva se trata de un potente editor de contenidos que proporciona una gran flexibilidad para todo tipo de formatos de textos, y que la mejor manera de controlarlo es ir probando cada una de sus opciones.

EL GESTOR MULTIMEDIA

Dese 'Sitio' -> 'Gestor Multimedia' accedemos a la interfaz de un explorador de archivos con el que gestionamos la subida de todo tipo de ficheros al directorio /images/ del sitio raíz de nuestra web.

Un documento que se suba aquí, se puede enlazar desde el editor TinyMCE como 'images/nombredocumento' (incluyendo la extensión del documento).

Organización de los contenidos: Secciones, Categorías y Atículos

La organización de la información que se utiliza en Joomla! se estructura en tres niveles jerárquicos:

1. Secciones
2. Categorías
3. Artículos

La unidad básica de información es un artículo, que es básicamente una página de contenido que puede incluir texto, imágenes, enlaces, información multimedia, etc. Cada artículo se agrupa en categorías, y estas a su vez en secciones. Podríamos hacer la equivalencia de las secciones y las categorías con carpetas y subcarpetas en un sistema operativo, respectivamente.

Las últimas versions de Joomla! permiten crear artículos sin clasificarlos por categorías. La experiencia muestra que es un opción muy utilizada en la práctica.

El siguiente vídeo detalla todos los pasos en la creación y edición de secciones, categorías y artículos en Joomla! 1.5:

Una idea importante en los pasos inciales de introducción de Joomla!, es que esta es una organización interna de la información y en principio no está relacionada con los menús de navegación que se crean a posteriori. Esta idea resulta en ocasiones algo confusa, pero una vez asimilada, uno se da cuenta de la flexibilidad que proporciona.

Crear menús

Para crear un nuevo menú clic en "Menús" > "Menú principal".

Se cargará la lista o árbol de todos los menús y submenús que forman el menú princpal. Para crear uno nuevo, clic en el icono "Nuevo" situado en la parte superior derecha tal y como se muestra seguidamente:

En la siguiente pantalla, mostrará un listado de tipos de menús que podemos crear. Clic sobre "Artículos", y se cargará un nuevo listado desplegable. Clic sobre "presentación del artículo":

Se visualizará la siguiente pantalla:

- "Título" se indica el texto del menú que se muestra en la página web.
- El "Alias" lo genera automáticamente Joomla sólo si no lo cumplimentamos. Se corresponde con la URL cuando tenemos "URLs amigables" activado.
- "Insertar ítem". Esta función crea un menú o submenú. Siguiendo este ejemplo, si seleccionáramos "Servicios", nuestro menú "Presentación" aparecería como submenú de "servicios". En caso de no seleccionar nada (por defecto está marcado el ítem Superior), se creará un nuevo menú.
- "Selecciona un artículo". Pulsado sobre el botón "seleccionar", asociaremos el artículo que queremos que se muestre cuando se navegue en el menú Presentación de página web. Al hacer clic sobre "seleccionar" muestra la siguiente ventana:

Pulsando sobre el botón "Ir" sin haber especificado ningún texto a filtrar, mostrará todos los artículos ya creados. El "filtro" sirve para facilitarnos la búsqueda de algún artículo concreto. A su derecha están las "secciones" y las "categorías" que permiten realizar un filtrado más cerrado permitiendo que la búsqueda del artículo sea más rápida cuando dispongamos de muchos.
"Artículo de Prueba" es un artículo más de entre todos los que forman la página web. Para seleccionarlo clic sobre él. Automáticamente se cargará nuevamente la página anterior. Para validar los cambios, clic sobre el botón "Guardar".

El siguiente vídeo se aproxima cosiderablemente a los pasos que hemos seguido hasta ahora en clase para gestionar los menús:

Crear un nuevo artículo

Para crear un "nuevo artículo" tenemos que dirigirnos a "Contenido" > "Gestor de artículos".

Una vez que se cargue la siguiente pantalla, mostrará el listado de artículos en el caso de que dispongamos de ellos. Para crear uno nuevo clic sobre el icono superior derecho "nuevo", que está en la parte superior derecha como se muestra a continuación:

Cumplimentamos el campo "título" que se corresponde con el título que se mostrará en el artículo. El campo "Alias" no es necesario cumplimentarlo ya que se crea el valor de forma automática. En el campo "Sección" seleccionamos del desplegable la sección a la que queremos que pertenezca el artículo. El mismo criterio seguiremos con el campo "categoría". El contenido es recomendable no copiar y pegar directamente desde el Word ya que trae consigo muchos estilos adicionales no visibles pero que pueden alterar la visualización del propio contenido. Se recomienda copiarlo y pegarlo del Word al Bloc de Notas (Note Pad) o escribirlo directamente:

También se pueden gestionar las Palabras Clave así como la Descripción del artículo tal y como se muestra en la siguiente captura de pantalla:

Una vez cumplimentado todo lo referente al artículo, clic sobre el icono "guardar" situado en la parte superior derecha. Nos mostrará la pantalla en la que aparecen todos los artículos.

Cambiar un artículo

Para cambiar el contenido de un artículo nos dirigimos a "Contenido" > "Gestor de Artículos" (pulsando sobre la imagen se ve ampliada):

Muestra el listado de los artículos ya creados. Para buscar el artículo que deseamos modificar, podemos buscar a lo largo del listado o se puede utilizar un "filtro" que puede completarse por "categorías" o "secciones" para poder encontrar nuestro artículo con mayor rapidez. En el campo Filtro insertaremos la palabra a buscar entre los títulos de los artículos ya creados. Utilizando el filtrado por "Categoría" y "secciones" sólo mostrará los artículos que se encuentren dentro de las "categorías" o "secciones" seleccionadas.

Para acceder a la información del artículo seleccionado, clic sobre el título del articulo. Se accederá a la pantalla siguiente:

Si se desea modificar el título del artículo, se sobreescribirá sobre el ya existente. Ej. Artículo de Prueba. El campo "Alias" no es necesario modificarlo ya que se cumplimenta automáticamente.
Se modificará campo "Sección" si ha dejado de pertenecer a la que estaba asignada. El mismo criterio con "categoría". Es conveniente recordar que el contenido no es recomendable copiarlo y pegarlo directamente desde el Word debido a que trae consigo muchos estilos que podrían alterar la visualización del contenido. Se recomienda utilizar el Bloc de Notas o escribirlo directamente. También pueden modificarse las Palabras Clave y Descripción, ya insertadas cuando se creó por primera vez el artículo. Si éstas no se incluyeron en su día, pueden incorporarse en cualquier momento. Véase la siguiente captura:

Una vez realizados los cambios, clic sobre el icono "guardar" situado en la parte superior derecha. Por defecto, se mostrará la pantalla en la que aparecen todos los artículos.

¿Dónde conseguir los ficheros de instalación?

Los dos ficheros necesarios para instalar el servidor web, la base de datos y el gestor de contenido se han proporcionado por parte del profesor y se han distribuido desde el directorio compartido público del aula: Escritorio -> Laboras 3 -> Macypc -> cursoJoomla. Sin embargo ambos se encuentran en la red y su acceso es libre y gratuito.

El grupo de desarrollo del proyecto de software libre XAMPP que instala el servidor web Apache y la base de datos MySQL es Apache Friends. En la sección XAMPP for Windows se encuentran las diferentes posibilidades de descarga de XAMPP para Windows, así como manuales de uso y de desarrollo.

La versión que estamos utilizando en el curso es XAMPP Lite (sección Download) ya que es la más ligera en cuanto al tamaño, por lo que será más cómodo para hacer las copias de seguridad.

Existen dos formatos de descarga: un fichero .EXE y el comprimido .ZIP (xampplite-win32-1.7.3.zip). Dada la imposibilidad de instalación de aplicaciones en el aula de informática, hemos llevado a cabo la instalación con el .ZIP (ver entrada Instalación de Joomla!). Sin embargo, la instalación es más cómoda descargando el formato .EXE y ejecutándolo en el equipo. Recomiendo intentar esta opción a los alumnos que no puedan o no deseen venir a clase.

En el caso del gestor de contenidos Joomla!, la página de la comunidad de desarrollo en español es: http://www.joomlaspanish.org/, desde donde se puede desacargar directamente la última versión del fichero: Pack Joomla-1.5.20-spanish.zip.

Instalación de Joomla!

A continuación se detallan los pasos a seguir para una correcta instalación de Joomla! Se aconseja utilizar los mismos nombres y directorios que se indican para evitar confusiones posteriores.

1. Se proporciona el fichero para la instalación del servidor web y la base de datos en el direcotrio público: Escritorio -> Programas Laboras 3 -> Macypc -> cursoJoomla -> xampplite-win32-1.7.3.zip. Se debe copiar el la unidad LOCAL D:
2. Si da problemas al copiarlo en D:, lo copiaremos en el escritorio
3. El siguiente paso es descomprimir este fichero en la unidad D. Para ello hacemos doble clic sobre el mismo y pulsamos 'Extraer'. Seleccionamos el destino en D:\
4. Observar que se crea el directorio D:\xampplite\
5. Desde D:\xampplite\ ejecutar setup_xampp.bat. Con esto se configura el servidor web. Seguir las instrucciones hasta que indique 'Pulsar una tecla para continuar' y/o 'x' para salir.
6. Desde D:\xampplite\ ejecutar apache_start.bat y mysql_start.bat
7. En este punto se ha instalado un servidor web y base de datos en el ordenador. Comprobarlo escribiendo la URL http://localhost/ en un navegador. Debe aparecer un menú de idiomas donde pulsaremos Español.

Pasamos a instalar el gestor: Joomla.

1. El directorio raíz del servidor web es D:\xampplite\htdocs\. Instalaremos Joomla! en un subdirectorio del mismo
2. Crear el subdirectorio D:\xampplite\htdocs\joomla1\
3. Extraer los ficheros de Joomla_1.5.20-Spanish-pack_completo.zip a D:\xampplite\htdocs\joomla1\
4. Acceder a la URL http://localhost/joomla1/ desde un navegador web
5. Selecciona Spanish y pulsar Siguiente
6. En la segunda pantalla, pulsar Siguiente
7. En la Licencia, Siguiente
8. En la configuración de la base de datos:
   - Nombre del servidor: localhost
   - Nombre de usuario: root
   - Contraseña: (dejar vacío)
   - Nombre de la base de datos: joomla1
   - Pulsar Siguiente
9. En Configuración FTP: pulsar siguiente
10. En Configuración Principal:
    - Nombre del sitio: (Opcional, aunque obligatorio) Mi sitio web Joomla1!
    - Correo electrónico: ponéis vuestro correo
    - Contraseñadel admin: admin (para poner todos el mismo, por ahora)
    - Pulsar Instalar datos de ejemplo predeterminados
    - Siguiente
11. Borrar (o renombrar) el directorio: D:\xampplite\htdocs\joomla1\installation
12. Ver el portal instalado en http://localhost/joomla1/
13. El acceso a la administración del portal se realiza desde http://localhost/joomla1/administrator/
    - Usuario 'admin
    - Contraseña 'admin'

En internet hay una cantidad enorme de información y tutoriales sobre posibilidades de instalación de Joomla! en un ordenador de manera local. A modo de ejemplo este vídeo en Youtube donde realizan una instalación similar a la que hemos llevado a cabo en clase.

Presentación de la asignatura del curso 2010/2011

Tras la confusión con las aulas del martes pasado, hoy presentaremos los aspectos básicos del desarrollo de la asignatura.

Las clases se van a desarrollar en su totalidad en el aula de informática 017.

El enfoque de la asignatura es totalmente práctico. Al inicio de cada clase se expondrá una nueva funcionalidad que los alumnos podrán practicar durante el resto de la misma.

Para la valoración final se realizará un portal web completo por parte de cada alumno. Dado el relativo alto número de alumnos, no es posible una presentación individualizada del trabajo. Por ello, se redactará un documento Word mostrando los desarrollos utilizados en la realización de la página web mediante pantallazos que se enviará por correo electrónico al profesor antes de la fecha límite fijada indicando la referencia al curso y nombre completo.

La asistencia a clase no es obligatoria y se podrá seguir completamente desde las publicaciones en este blog público. Sin embargo, por la experiencia de otros años os recomiendo asistir al máximo número de clases posible.

IMPORTANTE: Periódicamente, el servicio informático formatea los ordenadores del aula. Es IMPRESCINIDIBLE utilizar memorias extraíbles para realizar copias de seguridad del trabajo de cada día.

Aún no se han definido los horarios de tutorías, los cuales publicaré en cuanto se confirmen. La mejor opción de contacto es mediante el correo electrónico a marko.galarza@unavarra.es.

Nombre profesor: Marko Galarza
Despacho: Edificio Los Tejos segunda planta
Teléfono: 948 169673