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

El día 26 de noviembre dejaremos de ver cosas nuevas de Joomla! para dedicar los restantes 5 días de clase 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. 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.

Más extensiones

Durante el curso hemos trabajado con componentes que han cubierto las necesidades que puede tener un portal web básico, y que eran más o menos sencillas y estables de instalar en los equipos de clase.

La comunidad de desarrollo de Joomla! ofrece una gran variedad de componentes con infinidad de funciones. Todas ellas están catalogadas en la página de extensiones de Joomla!: http://extensions.joomla.org/

Entre las diferentes categorías que veréis en el menú izquierdo del portal encontraréis módulos para:

• Gestión de idiomas de la página
• Relojes
• Festividades
• Chat
• Videoconferencia
• Formularios
• Comunidades de usuarios
• Tiendas virtuales
• Multimedia
• Presentaciones dinámicas de imágenes
• Juegos
• Etc., etc...

Recomiendo navegar por el sitio e instalar los componentes que os resulten interesantes para vuestro proyecto web.

Foros de debate

El último componente que veremos, y con el que completaremos todas las funcionalidades del portal web de referencia de Segunda Familia, va a ser el de un foro de debate, disusión u opinión.

Si buscáis componentes para foros en Joomla veréis una gran cantidad de soluciones. La que me ha parecido más estable y sencilla de instalar es Fireboard.

Existe una instalación directa en español que podéis conseguir desde esta dirección.

Pero seguid estos pasos para la completa y correcta configuración del componente:

• Instalar el fichero (sin descomprimir, como siempre) desde 'Extensiones -> Instalar/Desinstalar'.
• Accedéis al panel principal del componente desde 'Componentes -> Fireboard Forum'
• Veréis que os da 2 opciones para terminar la instalación. No recuerdo exactamente qué pregunta. Pulsáis la opción superior. Responderá que la instalación ha sido completada
• Desde el Panel de control del foro, pulsáis 'Configuración del foro' y se extenderá un submenú en el menú de la izquierda
• Vais a 'Seguridad' y ponéis 'Leer y escribir público' a 'Sí'
• Para dar de alta los temas de debate, pulsad en el Panel de control del foro, sobre 'Administración del foro'
• Surge un listado de categorías. La idea es que una categoría de primer nivel es un foro de debate, y una categoría de segundo nivel (a la que le digáis que su padre es otra categoría), es ya un tema de discusión. Si no creáis un par de categorías anidadas, el foro no funcionará correctamente en la web
• Por si acaso (no estoy seguro de esto), ponéis el campo 'Nivel de acceso público:' de cada categoría como todos los usuarios
• Para hacer el foro visible a los usuarios de la web, falta crear un ítem de menú del tipo 'Fireboard Forum' que lo enlazará al foro

Libros de visitas

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. Al igual que una de las galerçías fotográficas, el portal Phoca ofrece también un componente para llevar a cabo esta función. Se pueden obtener los ficheros de instalación e idioma desde la sección correspondiente.

Como siempre, instalaremos el componente primero y después el fichero del idioma. En mi caso concreto y en el de algunos alumnos, la instalación de este segundo fichero de idioma ha dado problemas. Al tratarse de un componente bastante sencillo, es algo que no va a importar para configurarlo y utilizarlo.

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.

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 'Phoa 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.

Very Simple Gallery

'Very simple gallery' es una galería fotográfica que me ha gustado mucho por su sencillez de gestión en la administración y porque se pueden incluir las galerías dentro de los artículos, cosa que las dos anteriores no lo permiten (creo).

Encontraréis la página de desarrollo de este componente en esta dirección. El fichero del componente se halla en esa misma página más abajo. Si pulsáis en la sección Howto Plugin en el menú de la izquierda veréis el proceso detallado de instalación y uso.

Un resumen de su funcionamiento sería el siguiente:

1. Se descarga el fichero de la web
2. Se instala desde 'Extensiones' -> 'Instalar/Desinstalar'
3. Se activa el Plugin desde el 'Gestor de plugins'. Se llama exactamente 'Very Simple Image Gallery Plugin'
4. Se pueden retocar opciones de configuración en el formulario de edición del plugin, como tamaño de las miniaturas (thumbnails), posición de éstas respecto de la foto grande y cnatidad de compresión
5. ¿Y cómo se crean las galerías? Pues desde el 'Gestor multimedia' creamos subdirectorios dentro del directorio 'stories' con el nombre de nuestras galerías. Por ejemplo: galeria1, fotosviajeverano, fotoscarpa,...
6. Subimos a estos subdirecotrios las fotos correspondientes de cada galería
7. ¿Y cómo se visualizan? Pues en el formulario de edición del artículo donde queremos insertar la galería escribimos el siguiente código: {vsig}nombregaleria{/vsig}. En los ejemplos anteriores, sería: {vsig}galeria1{/vsig} o {vsig}fotosviajeverano{/vsig} o {vsig}fotoscarpa{/vsig}
   

Galerías de fotos

En el portal de extensiones de Joomla! existen 34 opciones de galerías fotográficas. Algunas no serán válidas para la versión 1.5 que estamos utilizando de Joomla!, otras serán de pago, y otras se ofrecerán de forma gratuita.

Entre ellas están JoomGallery y Phoca Gallery. Para conseguir estos componentes se localizarían sus protales correspondientes y se descargarían las últimas versiones, así como el fichero de traducción. En el caso de JoomGallery desde aquí el componente y el idioma español, y en el caso de Phoca desde aquí se puede conseguir todo.

Se trataría de instalar ambos componentes, probarlos y decidir por el que mejor se adapte al objetivo.

Mapa de ubicación dinámico con Google Maps

Google Maps es una herramienta de cartografía para tecnología web que se ha hecho muy popular. A día de hoy es imprescindible utilizarlo para la sección de 'Contacto' o 'Cómo llegar' de cualquier sitio web. Un ejemplo de cómo se hacían anteriormente las cosas sería el plano de acceso al Instituto de Agrobiotecnología de la UPNA. Mientras que si utilizamos los mapas interactivos de Google Maps obtenemos un resultado en nuestra página como el del acceso al Centro de Innovación Tecnológica de Automoción de Navarra.

Estos días pasados además se ha producido la activación de Google Street View sobre su plataforma Maps en Pamplona (ver noticia). Con esta aplicación podemos hacer un zoom sobre los mapas hasta ver detalles fotográficos a nivel de calle e ir desplazándonos por la misma.

Para utilizar esta herramienta en nuestro sitio Joomla! existe el plugin GoogleMaps que se puede descargar desde aquí. Tras su instalación es necesario activar el componente desde 'Gestor de plugins' -> 'Google Maps' -> Publicado: Si (en la columna de la izquierda) y Published: Si (en la columna de la derecha).

Para visualizar un mapa en un artículo hay que escribir el código siguiente en el editor web. Con cuidado de evitar retornos de línea, y de incluir las llaves que contienen el código:

{mosmap width='500'|height='400'|lat='52.052312'|lon='4.447141'|zoom='3'|zoomType='Large'|zoomNew='0'|mapType='Satellite'|showMaptype='1'|overview='0'|text='sv DWO'|lang=''}

Los valores 'lat' y 'lon' son las coordenadas del punto en el que se centrará el mapa. Los de la UPNA son por ejemplo: 42.800208,-1.636473. Los valores 'width' y 'height' son las dimensiones del mapa. Si sustituís 'Satellite' por 'Map' se mostrará en formato mapa en vez de imagen de satélite.

Una forma sencilla de localizar las coordenadas exactas de la ubicación deseada es utilizar Google Maps, acercarse al punto deseado, pulsar con el botón derecho del ratón, clic en '¿Qué hay aquí?', y se muestran las coordenadas exactas en el campo de búsqueda (arriba a la izquierda).

El valor de 'text' en el código anterior es el texto que se muestra en el cuadro que se abre al pulsar el puntero.

Agenda de Eventos

La agenda de eventos que hemos visto en clase ha sido JEvents. Este componente dispone de una página web en www.jevents.net. Se trata de la misma agenda de eventos que podemos ver en el sitio web de referencia de Segunda Familia.

Instalación:

Los ficheros principales se descargan desde la propia home del sitio del componente. Hay que desacargar desde los siguientes enlaces:

1. '...main component...' para el componente base con el que se gestionan los eventos en el back-end.
2. 'Mini-Calendar Module' nos instala en el gestor de módulos la posibilidad de insertar el calendario como un bloque o módulo en nuestra web.
3. 'Translations' -> 'Spanish translations' -> 'Download' trae la traducción al español del componente.

La instalación en Joomla! se realiza desde 'Extensoiones' -> 'Instalar/Desinstalar', instalando los ficheros comprimidos en el orden anterior.

Uso:

Siguiendo la filosofía general de Joomla! la gestión de los eventos y su porganización se lleva a cabo desde el back-end. JEvents dispone también una gran cantidad de opciones de configuración para adaptarse a nuestras necesidades.

Para la visualización de los eventos existen dos posibilidades. Activar el módulo del mini-calendario, o enlazar desde un ítem de menú a diferentes posibilidades de listados de eventos (anuales, mensuales, semanales, los próximos, etc).

Otras opciones:

Existe otra extensión para crear agendas de eventos en Joomla! más refinada desde el punto de vista del diseño, y con alguna fubcionalidad más. Se trata de JCalPro (ver demo) pero no es gratuita como en el caso anterior. No es posible instalarla y probarla sin registrarse en su sistema y comprando la licencia (que además es anual).

Los Módulos básicos de 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.

Los Componentes

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:

Configuración avanzada del formularo de edición de un artículo

En la columna derecha del formulario de edición de un artículo (nuevo o no) observamos una serie de opciones agrupadas en 'Parámetros avanzados' e 'Información de metadatos'.

En el caso de los Parámetros avanzados se trata de opciones y detalles a la hora de visualizar un artículo en la web. La mejor manera de entenderlos es ir modificándolos y viendo el resultado. Se puede incluir la sección, categoría, iconos de imprimir, convertir en PDF, enviar por correo, el autor, el título, etc., etc.

En el caso de la Información de metadatos ya vimos que se trata de información redundante de cada página, sobretodo un título para la página, una descripción y una lista de palabras clave, que no son visibles para el usuario pero que son realmente importantes para los buscadores.

Observaréis que Joomla! da la opción de 'Utilizar el valor global' en la mayoria de las configuraciones de Parámetros avanzados. Estos valores globales se configuran desde 'Contenido' -> 'Gestor de artículos' -> 'Preferencias' (a la derecha, al lado de 'Ayuda')

La página principal

Hasta ahora hemos visto cómo generar y organizar el contenido en Joomla!, y cómo se puede enlazar este contenido desde los menús que proporcionan la navegación en el sitio. Sin embargo, cuando se accede al dominio de cualquier página, nos aparece la portada, o home, o inicio, o la página principal. No hemos pulsado ningún menú para verla.

¿Cómo se gestiona la página de inicio en Joomla!?

Pues bien. La idea principal es que cualquier artículo puede incluirse en la página principal. Al trabajar con el formulario de edición de un artículo existe la opción 'Página principal: Sí, No'. Si activamos varios artículos en la página principal, se verá como un blog: un listado con el título y la entradilla (hasta el 'Leer más') que se puede pulsar para ver el detalle completo del artículo.

Muchas veces queremos una portada con un diseño diferente al resto, más elaborado. En tal caso se podría activar en la portada un sólo artículo, e incluir ese diseño especial mediante el editor web TinyMCE de ese artículo.