jueves, 10 de noviembre de 2011

Phoca Maps

Una segunda opción de inserción de mapas, nos la proporciona la extensión Phoca Maps. Se trata de un componente completo con un panel de control donde se gestionan y organizan nuestros mapas, y que se visualizan desde los menús.

Desde Download hay que descargar el siguiente fichero compatible con nuestro Joomla 1.7: com_phocamaps_v2.0.2.zip.

Tras su instalación:

Extensiones -> Gestor de extensiones -> Subir Archivo de Paquete -> Seleccionar archivo (seleccionamos el que hemos descargado a nuestro equipo) -> Subir e instalar

entramos al componente: Componentes -> Phoca Maps. Desde Maps-> Nuevo creamos tantos mapas como queramos indicando la latitud, longitud, zoom y dimensiones de visualización (entre otros parámetros).

Visualización:

Se lleva a cabo desde la sección de menús: Menús -> Menú Principal -> Nuevo -> Tipo Elemento Menú -> Phoca Maps -> Map View. En el formulario de edición del elemento de menú, seleccionaríamos el mapa que deseamos ver desde el campo: Select Map.

Mapas dinámicos en nuestra página: Googlemaps Plugin

La tecnología Google Maps permite la creación de mapas dinámicos con gran cantidad de funcionalidades en nuestra página. Vamos a instalar una extensión de tipo plugin para que mediante un simple código que insertemos en cualquier artículo, Joomla nos muestre una mapa de este tipo.

La sección de geolocalización del portal de extensiones de Joomla ofrece una gran variedad de posibilidades. Vamos a localizar Googlemaps Plugin y acceder a su ficha. Desde Download vamos a descargar el fichero plugin_googlemap_J16_J17.2.14.zip, el cual es compatible con Joomla 1.7 y pasaremos a instalar como siempre:

Extensiones -> Gestor de extensiones -> Subir Archivo de Paquete -> Seleccionar archivo (seleccionamos el que hemos descargado a nuestro equipo) -> Subir e instalar

Al tratarse de un plugin confirmaremos que esté activado en: Extensiones -> Gestor de plugins -> Google Maps. Si no lo estuviera, lo activamos.

Visualización:

Accedemos a la edición del artículo donde queremos insertar nuestro mapa y escribimos el siguiente código:

{mosmap}

Vemos el resultado en la página. Nos debe aparecer un mapa situado en Estados Unidos. ¿Cómo controlamos el punto exacto del icono del mapa? Pues ampliando los parámetros del código anterior:

{mosmap width='500'|height='400'|lat='52.052312'|lon='4.447141'|zoom='15'|mapType='Satellite'|text='Texto del bocadillo'}

¡Ojo! El texto anterior se debe escribir evitando cualquier retorno de carro o carácter extra que hayamos incluido al pegarlo. Las variables con las que jugar serían:
  • width y height son las dimensiones que queréis que tenga el mapa en vuestra página
  • lat y lon son las coordenadas en las que se centrará. Como referencia, podéis coger los de la UPNA: lat='42.800116'|lon='-1.636233'
  • zoom es el valor del zoom en el rango 0-19. Cuanto mayor zoom, imágenes más cercanas
  • text es el texto que mostrará el bocadillo del icono

Galería fotográfica en Flash: Ozio Gallery

La tecnología Flash permite utilizar efectos mucho más vistosos. Es el caso de esta galería que podéis ver en funcionamiento en esta demo. La ficha de esta extensión se halla en la sección Photo Flash Gallery del portal de extensiones de Joomla. Observad la C verde al lado del título indicando que es un componente completo extra.

Pulsando Download accedemos la sección de descarga de la web del desarrollador. Desde esta misma página descargaríamos el fichero com_oziogallery2.6.zip a nuestro equipo, y lo instalaríamos como siempre:

Extensiones -> Gestor de extensiones -> Subir Archivo de Paquete -> Seleccionar archivo (seleccionamos el que hemos descargado a nuestro equipo) -> Subir e instalar

veréis que en el menú desplegable de Componentes en la administración de Joomla se ha creado el elemento correspondiente: oziogallery3.

Las imágenes se deben subir a una carpeta desde el Gestor Multimedia de manera similar a como se ha hecho con la galería SIGE. Podría valer la misma carpeta galprueba que hemos creado en dicha entrada.

Visualización:

Tenemos que crear el elemento de menú correspondiente: Menús -> Menú Principal -> Nuevo -> Tipo Elemento Menú -> Ozio Gallery 3, desde donde podemos seleccionar una serie de opciones muy vistosas:
  • Tilt 3D viewer
  • Skin Flashgallery
  • Skin Futura
  • Skin Carousel
  • Skin Imagerotator
  • Skin Accordion
  • Skin Mediagallery
  • Skin Cooliris
  • Skin Flickr PictoBrowser
  • Skin Picasa PictoBrowser
  • Skin Pup 'n Goo Skin
Recomiendo ir probando todas ellas. Antes de guardar el nuevo elemento de menú, debemos indicar en el campo Gallery folder path (a la derecha del formulario de creación de este tipo de menú) la carpeta donde hemos subido las correspondientes imágenes. En este caso de ejemplo sería: images/galprueba.

Galería fotográfica Phoca Gallery

La ficha de esta extensión en el portal de extensiones de Joomla, muestra que se trata de un componente completo (icono verde con una C). Pulsando Download se debe descargar el fichero de instalación com_phocagallery_v3.1.1.zip desde el portal de su desarrollador.

Si procedéis a su instalación:

Extensiones -> Gestor de extensiones -> Subir Archivo de Paquete -> Seleccionar archivo (seleccionamos el que hemos descargado a nuestro equipo) -> Subir e instalar

veréis que en el menú desplegable de Componentes en la administración de Joomla se ha creado el elemento correspondiente. Pulsando sobre él pasamos al panel de control de Phoca Gallery.

Debemos crear primero categorías (Categories) que se corresponderán con nuestros álbumes, y después podremos subir las imágenes desde Images. Al subir una foto es obligatorio clasificarla en una categoría que hayamos creado previamente.

Visualización:

A diferencia de la galería SIGE de la entrada anterior, en este caso demos entrar a Menús -> Menú Principal -> Nuevo -> Tipo Elemento Menú -> Phoca Gallery desde donde podemos enlazar a:
  • Listado de todas las categorías o álbumes
  • Listado de imágenes de una única categoría.
El resultado será algo similar a la demo en la página de Phoca Gallery.


La galería fotográfica SIGE (Simple Image Gallery Extended)

Hemos visto cómo insertar imágenes en un artículo de Joomla desde el editor de artículos (ver entrada correspondiente). Si queremos ofrecer al usuario la opción de ampliar una imagen pulsando sobre ella, o queremos crear una serie de imágenes en miniatura que sean ampliables (lo que sería una galería fotográfica), necesitamos utilizar extensiones de terceros que deberemos instalar, configurar y visualizarlos desde el administrador.

En el portal de extensiones de Joomla podéis observar una gran variedad de opciones en la sección Photo Gallery.

En esta primera entrada al respecto, vamos a utilizar la galería fotográfica SIGE (Simple Image Gallery Extended) que podéis confirmar que no tiene licencia comercial y es compatible con Joomla 1.7. Observad también que a la derecha del nombre aparece un icono morado con una P indicador que se trata de una extensión del tipo plugin.

Descarga:

Pulsando Download accedemos al portal del desarrollador desde donde podemos descargar el fichero plg_sige_v1.7-2.zip a nuestro equipo.

Instalación:

Todas las extensiones que iremos viendo y publicando se instala de la siguiente manera: Extensiones -> Gestor de extensiones -> Subir Archivo de Paquete -> Seleccionar archivo (seleccionamos el que hemos descargado a nuestro equipo) -> Subir e instalar. Suficiente.

Configuración básica:

Las extensiones del tipo plugin se instalan por defecto generalmente (no siempre) como desactivadas. Por ello, lo primero que debemos hacer es confirmar su estado en Extensiones -> Gestor de Plugins -> Buscamos 'SIGE' -> Confirmamos que el icono en la columna Activado está verde. Si no, pulsamos sobre él para modificarlo.

Para la creación de la galería fotográfica debemos crear una carpeta con las imágenes en el Gestor Multimedia (Contenidos -> Gestor Multimedia). En clase, hemos creado la carpeta galprueba y subido a la misma varias imágenes.

Visualización:

¿Cómo visualizamos la galería? Pues es suficiente con entrar al artículo donde la queréis insertar y escribir el siguiente código en el mismo:

{gallery}galprueba{/gallery}

donde galprueba es el nombre del directorio que hemos utilizado para subir las fotos. Refrescando la web podréis confirmar el resultado.

Lógicamente es posible insertar tantas galerías como se desee en un mismo artículo como en otros, si creamos la correspondiente carpeta y utilizamos este código.

Más opciones de configuración:

Es posible controlar gran cantidad de parámetros de esta galería, como el tamaño de las miniaturas, el efecto de ampliación y apertura, textos de pies de fotos, etc. Esto se hace desde Extensiones -> Gestor de Plugins -> SIGE - Simple Image Gallery Extended J1.7 seleccionando diferentes opciones a la derecha del formulario de configuración hasta dar con la que más os gusta.

martes, 8 de noviembre de 2011

Las plantillas de diseño

Cambiar radicalmente el diseño y dotarle de una línea gráfica acorde a nuestra temática y gustos, es muy sencillo. Existen cientos de plantillas que podemos utilizar en nuestra página. Un portal donde podemos encontrarlas es Joomla24. Hemos de tener en cuenta la versión que estamos utilizando, por lo que deberemos entrar a Joomla 1.7 Templates.

Esta sección ofrece una demo o previo de la plantilla para confirmar su diseño. Una vez seleccionada la de interés pasamos a descargarla desde Download para obtener un fichero comprimido que guardaremos en nuestro equipo.

Instalación:

Tan simple como: Extensiones -> Gestor de extensiones -> Subir Archivo de Paquete -> Seleccionar archivo (el que hemos descargado -> Subir e instalar.

Activación y configuración:

Extensiones -> Gestor de Plantillas -> Clicamos la casilla de la nueva plantilla -> Establecer por defecto (arriba a la derecha).

Problemas con los módulos:

Es probable que al refrescar vuestra página para ver cómo ha quedado, hayan desaparecido la mayor parte (si no todos) de los módulos que habéis ido creando hasta ahora. Esto se debe a que cada plantilla utiliza diferentes nombres para las posiciones. Por ejemplo, es probable que la position-7 que utiliza la plantilla por defecto, se denomine en la nueva como left.

Para conocer las nueva posiciones de una plantilla podéis escribir el código ?tp=1 al final de la URL de vuestro sitio. Por ejemplo: http://localhost/joomla1/?tp=1. Recordar que se deben dar permisos para activar esta función: Extensiones -> Gestor de plantillas -> Opciones -> Vista previa de las posiciones de los módulos -> Activado.

Y desde Extensiones -> Gestor de módulos debéis re-colocar la posición de cada uno de ellos utilizando las nuevas denominaciones.

Por ello es recomendable seleccionar ya vuestra plantilla definitiva para evitar este tipo de problemas conforme vayáis creando los módulos definitivos de vuestro proyecto web.

Extensiones, componentes, plugins y módulos

A partir de ahora vamos ampliar la funcionalidad de nuestra página con componentes de terceros que iremos instalando y configurando en nuestro Joomla. Para un aprendiz de Joomla suelen ser confusos los conceptos del título de esta entrada y viene bien tener una idea de a qué se refieren:
  • Módulo. Ya hemos visto que un módulo es un bloque que podemos situar en diferentes posiciones que nos proporciona la plantilla, y controlamos los menús en los que queremos que sea visible.
  • Plugin. Se trataría de una pequeña mejora de una funcionalidad más completa. Por ejemplo, el editor de artículos que emula a Word es un plugin.
  • Componente. Se trata de una funcionalidad mayor y completa que se añade a las básicas de Joomla. Un foro sería un componente. También una tienda virtual, un componente de descargas, etc.
  • Extensiones. Este concepto engloba a todos los anteriores. Los módulos, plugins y componentes son extensiones de Joomla, ya sea para proporcionar una pequeña nueva funcionalidad, como para ser un componente. Incluso las plantillas de diseño serían una extensión en el vocabulario de Joomla.