martes, 22 de noviembre de 2011

Redes sociales: opción de compartir nuestra página con

El colectivo Aldezharra de Pamplona ha lanzado recientemente su página web desarrollada en Joomla: http://www.aldezaharra.org. Podéis observar que debajo de cada artículo se muestran iconos de las redes sociales más conocidas (Facebook, Twitter, Tuenti, Google+, LinkedIn...), ofreciendo la posibilidad de compartir el contenido en los perfiles personales de los usuarios.

La extensión que da esta funcionalidad es el plugin ValAddThis, cuya ficha en el portal de extensiones la podéis encontrar pulsando aquí. Se trataría de la opción más extendida de las ¡más de 100! que hay publicadas en la sección Social Bookmarking.

Descarga del fichero del plugin:

Desde Download en la ficha accedemos a la página del desarrollador, pulsamos en plg_content_valaddthis-roundedCSS.zip, y nuevamente Download, para obtener el fichero comprimido y compatible con Joomla 1.7: plg_content_valaddthis_1.5.4-roundedCSS.

Instalación:

Lo instalamos 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 siempre tenemos que confirmar si está activado o no: Extensiones -> Gestor de Plugins -> y pulsamos el iconito rojo de la columna Activado para transformarlo en el verde, indicador de su activación.

Visualización:

Activar el plugin, tal y como lo hemos hecho, es suficiente para que todos nuestros artículos muestren los iconos de redes sociales con la funcionalidad de compartir en las mismas. Comprobadlo en la parte pública.

El plugin ofrece multitud de opciones de configuración que podéis probar entrando al mismo desde el Gestor de Plugins. Veréis a la derecha dos grupos de parámetros:
  • Opciones básicas
  • Opciones avanzadas

jueves, 17 de noviembre de 2011

Una agenda con Google Calendar

En clase os he presentado y recomendado la herramienta Calendar de Google. Dejo de vuestra cuenta probar todas las opciones que permite. En esta entrada os voy a comentar simplemente cómo podemos incrustarlo en nuestra página.

Desde la página de Configuración de vuestro calendario (se pueden crear ilimitados) , en la opción Incrustar este calendario, pulsáis Personaliza el color, el tamaño y otras opciones. Desde aquí podemos configurar el aspecto y tamaño de cómo queremos que se vea en nuestra página. Cuando ya lo tenemos a nuestro gusto, copiamos el código que aparece que la parte superior y lo pegamos en nuestro artículo de Joomla. Et voilà!!

Agenda de eventos: JEvents

Una agenda de eventos es una función muy común en muchos portales web. En ocasiones se abusa de su uso, si no se dinamiza con mucha frecuencia. No tiene mucho sentido utilizarla para publicar unos pocos eventos anuales, para lo que sería suficiente mostrar artículos ordenados cronológicamente utilizando un elemento de menú del tipo Categoría Blog. Esto es lo que transmite la agenda instalada en la página web de Segunda Familia que estamos teniendo de referencia. El usuario encontrará útil su uso si encuentra información cada semana, por ejemplo.

La oferta de extensiones para instalar agendas en Joomla es bastante grande. Una de las más utilizadas, no comercial y compatible con Joomla 1.7 es JEvents.

Instalación:

Pulsando Download debemos descargar en Main component y Mini-Calendar Module, los cuales instalaremos como siempre desde el Gestor de extensiones. En el caso del componente, surgen dos pantallas intermedias con los siguientes mensajes:
  • Database now setup donde debemos pulsar Continue
  • y Please check configuration and save in order to use JEvents donde pulsaremos Guardar & Cerrar en la parte superior derecha
La agenda JEvents es una extensión del tipo componente, por lo que se gestiona desde Componentes -> JEvents. Cada evento se crea desde Manage Events -> Nuevo donde podemos definir un título, descripción, hora de inicio y finalización, periodicidad, ubicación, etc.

Es posible organizar estos eventos por categorías las cuales de gestionan desde Manage Categories. Podríamos clasificarlos por ejempo por: charlas, presentaciones, cursos, talleres, etc.

Visualización:

Si creamos un nuevo elemento de menú, en la ventana de Tipo de elemento del menú podéis probar los siguientes:
  • List by Category
  • List by Day
  • View by Month
  • Date range
  • Search JEvents
  • List by week
  • List by year
El segundo fichero que hemos instalado permite visualizar un módulo con un mini-calendario que enlaza a nuestros eventos. Para ello vamos a Extensiones -> Gestor de Módulos -> nuevo -> JEvents Calendar desde donde le damos un título, una posición en nuestra plantilla, y lo configuramos como más práctico nos resulte.

Nota: Perdonad que haya redactado esta entrada con el componente en inglés. No he encontrado el fichero de traducción hasta ahora (!!!). Lo encontraréis aquí (es-ES_JEvents_2.0_J16.zip). Se instala desde el gestor de extensiones, como los ficheros anteriores.

martes, 15 de noviembre de 2011

Información de acceso restringido

Vamos a ver cómo podemos publicar información en nuestra página que no sea visible hasta que nos identifiquemos con un par usuario-contraseña. La idea básica es muy sencilla.

Esta funcionalidad puede ser útil por ejemplo para una asociación que quiera distribuir información únicamente a sus asociados; o una empresa que muestre datos de interés para sus clientes o proveedores; o una página de cursos que distribuya documentos sólo a sus alumnos; etc.

Lo primero que vamos a hacer va a ser activar el módulo de acceso desde donde se podrá insertar el par usuario-contraseña: Gestor de Módulos -> Nuevo -> Acceso -> Título: ÁREA PRIVADA y le damos una posición en nuestra plantilla.

Lo siguiente va a ser crear un perfil de usuario restringido que pueda entrar desde el módulo anterior: Usuarios -> Gestor de usuarios -> Nuevo y rellenamos los campos:
  • Nombre, nombre real del perfil
  • Nombre Acceso: será el campo usuario en el módulo de acceso
  • Contraseña
  • Confirmar Contraseña
  • Email, un formato válido de correo
Utilizad los campos Nombre Acceso y Contraseña para acceder desde el módulo de acceso (en la parte pública). Veréis que Joomla os da la bienvenida, pero que la página ofrece la misma información que antes.

¿Cómo podemos hacer que algo se muestre sólo al hacer login? Lo más sencillo e intuitivo es ir a Menús->Menú Principal y crear un nuevo elemento de menú de cualquier tipo, que por ejemplo se llame Información privada, pero al que debéis poner el campo Acceso como Registrado. Así, este elemento del menú sólo se ve cuando se hace login, y no lo ven los usuarios público generales.

Formularios en Joomla

Un formulario es un elemento para la petición de información al usuario. Podemos necesitar desde un formulario de contacto básico que nos llegue por correo, hasta formularios más complejos como la solicitud de currículums, registro en un curso, encuestas de opinión, petición de un producto, etc.

El portal de extensiones de Joomla ofrece muchas alternativas en la categoría Contacts & Feedback -> Forms. Sin embargo, la creación de un formulario es bastante compleja, ya que requiere la definición de muchos parámetros por cada campo, por ejemplo:
  • Formato del campo: texto, fecha, email, numérico, lista, casilla, etc
  • Límite de caracteres (en el caso de los textuales)
  • Anchura del campo en la parte pública
  • Obligatoriedad del mismo
  • Mensaje por no cumplir formato u obligatoriedad
  • Etiqueta o leyenda de texto describiendo el campo
  • Código único de cada campo que se requiere en formularios HTML
  • Texto de ayuda extra para el usuario
  • ...
Debido a esta complejidad, vamos utilizar la herramientas de formularios de Google, más sencilla de gestionar y que nos permite insertar sus formularios en nuestros artículos de Joomla.

Con nuestra cuenta de Google accedemos a su herramienta Google Docs. Pulsando Crear seleccionamos Formularios. Nos surge una ventana donde podemos darle un título y definimos los campos del mismo desde Add item. Dejo de vuestra cuenta practicar con los distintos tipos de campos que podemos usar. Recordad pulsar Grabar cuando finalicéis.

Visualización:

Para mostrar vuestros formularios en la página, se debe pulsar el botón Más acciones cuando editáis el mismo en Google Docs (arriba a la derecha) y Embed. Yo visualizo esta herramienta en inglés y no estoy seguro de cómo lo veréis vosotros. ¿Insertar, quizás? El caso es que os proporciona un código que debéis copiar en vuestro artículo.

Si tras ver el resultado en vuestra página quisierais modificar las dimensiones del cuadro de visualización del formulario, podéis retocar la anchura y altura del mismo, en el código que acabáis de insertar: width="760" height="937".

Probad a rellenar el formulario varias veces y comprobáis su funcionamiento. La información queda recopilada en formato hoja de cálculo en Google Docs, desde donde podéis exportarla a texto, Excel, etc.

Pestañas en un artículo extenso: Tabber y Slider

Si hemos de publicar un artículo muy extenso o tenemos una ficha muy completa de un producto, es recomendable estructurar visualmente esta información para facilitar su lectura al usuario. En este blog podéis ver una introducción al comportamiento de los usuarios en la lectura de un sitio web en función de su extensión: Lectura y usabilidad web: como leen los usuarios el contenido de un sitio web.

En esta otra página muestran un patrón visual de las zonas que más atraen la atención de un usuario que está navegando en internet. Observad la recomendación al final de esta entrada:

"No entierres el contenido en documentos demasiado largos: Divide los textos en varios documentos enlazados o crea un índice que permita identificar y moverse por las secciones de cada documento."

A continuación veremos dos plugins muy prácticos, vistosos y sencillos de utilizar para crear pestañas en un artículo de Joomla que van mostrando diferentes partes de la información conforme se van pulsando. En esta página de alquiler de trasteros, en la sección de Preguntas frecuentes, podéis ver uno de estos plugins en funcionamiento.

Las fichas de las extensiones Tabber y Slider en el portal de Joomla son:
Desde Download pasamos descargar ambos plugins y los instalamos en nuestra página desde el Gestor de extensiones. Al tratarse de extensiones del tipo plugin, confirmaremos que están habilitados desde el Gestor de plugins.

Para su utilización insertamos en el artículo el código siguiente, en función del formato de pestaña que más nos guste:

Tabber:

{tab=Título de la primera pestaña}
Aquí escribimos cualquier contenido, pudiendo utilizar los códigos de otros pluigns: galerías, mapas, etc.
{tab=Título de la segunda pestaña}
Aquí el contenido de la segunda pestaña...
{/tabs}

Slider:

{slide=Título del primer slider}
Aquí escribimos cualquier contenido, pudiendo utilizar los códigos de otros pluigns: galerías, mapas, etc.
{slide=Título del segundo slider}
Aquí el contenido de la segunda pestaña...
{/slides}

Así por ejemplo, si quisiéramos hacer una ficha de un vehículo con el Tabber:

{tab=Descripción}
Texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo texto descriptivo del vehículo.
{tab=Galería fotográfica}
{gallery}galprueba{/gallery}
{tab=Punto de venta}
{mosmap width='500'|height='400'|lat='52.052312'|lon='4.447141'|zoom='15'|mapType='Satellite'|text='Texto del bocadillo'}
{tab=Información de contacto}
Telefóno: 948111222
Email: aaa@aaa.com
Persona de contacto: Juan Pérez
{/tabs}

Sin olvidar el código de cierre de pestañas {/tabs}. Tened en cuenta que ambos sistemas de pestañas son compatibles con la inserción de contenido extra fuera de las mismas, que será visible en el artículo en todo momento.

jueves, 10 de noviembre de 2011

Libro de visitas

La opción de que el usuario pueda dejar su opinión sobre el sitio web era muy popular hace años. Hoy en día la comunicación con los usuarios se ha ido desviando hacia las redes sociales. Sin embargo, ya que nuestra página de referencia (Segunda Familia) dispone de un libro de visitas, y conocemos la alta calidad de las extensiones de Phoca, vamos instalar y configurar Phoca Guestbook.

Desde Download descargamos com_phocaguestbook_v2.0.1.zip, compatible con nuestro Joomla, y lo instalamos como siempre.

Al tratarse de un componente, accedemos a él desde Componentes -> Phoca Guestbook. En la demostración hemos creado (pulsando Guestbooks->Nuevo) dos libros de visitas denominados:
  • Libro de visitas
  • Danos tu opinión
Visualización:

Desde Menús -> Menú Principal -> Nuevo -> Tipo Elemento Menú -> Phoca Guestbooks-> Guestbook, seleccionando en el campo Select Guestbook a la derecha el libro que deseamos activar en este menú.

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.

Componente de gestión de enlaces webs

Este componente ofrece la posibilidad de gestionar la típica sección Enlaces amigos o Links de interés donde listamos páginas que el usuario puede enlazar desde nuestra página.

En Componentes -> Enlaces Web creamos al menos una categoría donde clasificaremos nuestros enlaces. Un enlaces es básicamente un Título legible para el usuario y un link o enlace al que se le dirigirá al pulsarlo.

Visualización:

La visualización de Enlaces se lleva a cabo desde la sección de menús: Menús -> Menú Principal -> Nuevo -> Tipo Elemento Menú -> Enlaces Web desde donde creamos un elemento de menú a:
  • Todas las categorías de la sección de enlaces
  • Los enlaces de una categoría
  • Un enlace individual
Ver como ejemplo la sección de Enlaces de interés de Segunda Familia.

Noticias externas o feeds

En la página de Segunda Familia que seguimos como referencia de portal Joomla hay configurada una sección alimentada con contenido externo, denominada Servidor de Noticias. Es posible extraer contenidos de otros portales, filtrarlos por palabras clave según nuestro interés y visualizarlo en nuestra propia página. Esto es posible gracias a la tecnología denominada RSS (ver referencia en la Wikipedia).

La mejor manera de entenderlo es configurarlo en nuestra página. Accedemos a Componentes -> Noticias externas y creamos una categoría denominada, por ejemplo, Navarra (Noticias -> Categorías -> Nuevo -> Título: Navarra -> Guardar y Cerrar).

Si entramos a crear una Noticia externa (Noticias externas -> Nuevo), vemos que el campo Enlace es obligatorio. ¿Cómo conseguimos este dato? Vamos por ejemplo al portal del Diario de Noticias y localizamos el icono correspondiente al RSS que ofrecen la mayoría de portales (parte superior derecha) y lo pulsamos. Vemos un listado de secciones donde pulsaremos Navarra. Copiamos desde la barra de direcciones la URL o dirección de esta página y la copiamos en nuestra Joomla.

Diario de Navarra también ofrece este servicio, pero no lo categoriza. El icono que nos ofrece la URL lo encontraréis también en la parte superior derecha.

Visualización:

Para publicar o visualizar nuestra sección de noticias externas se debe crear un nuevo elemento de menú: Menús -> Menú Principal -> Nuevo -> Tipo Elemento Menú -> Noticias externas y probáis el resultado enlazándolo a la Categoría o a una noticia individual.

Podéis alimentar esta sección con feeds de cualquier gran portal de noticias, localizando el icono RSS.

martes, 25 de octubre de 2011

Componente de Contactos y Formulario de Contacto

Otro componente disponible en una instalación básica de Joomla es el componente de Contactos (Componentes -> Contactos). Su principal utilidad es la definición de la dirección o ubicación ya sea de la única oficina de la empresa/asociación/persona gestora de la web, o de todas las direcciones de interés de una empresa mayor (distintas oficinas, delegaciones, departamentos, etc.)

Antes de proceder a crear un contacto, se deben organizar en Categorías para los que el campo más importante es el Título, al igual de en el caso de los artículos y banners.

Desde la pestaña de Contactos pasaríamos entonces a crear los Contactos. Los campos más importantes son:
  • Nombre
  • Categoría en la que se desea organizar dicho contacto
  • En la columna derecha, en la pestaña Detalles Contacto indicamos información como: email, dirección, ciudad, provincia, código postal, teléfono, sitio web, etc.
  • Y en la pestaña Formulario de contacto, confirmamos que el campo Mostrar Formulario de Contacto está com Mostrar.
VISUALIZACIÓN:

Iríamos a Menús -> Menú principal -> nuevo -> Tipo Elemento Menú -> Contactos, y probamos todos ellos:
  • Lista todas las categorías de Contacto
  • Lista de Contactos en una Categoría
  • Contacto único
  • Contactos Destacados
Es algo muy práctico el hecho de que Joomla nos muestre un formulario en cada página de contacto.

Banners o anuncios publicitarios

Un banner es un espacio de una página web, generalmente una imagen animada en formato GIF o una animación en FLASH, que se dedica a mostrar publicidad y que enlaza con el portal donde se ofrece el concepto publicitado.

Portales con muchas visitas ofrecen espacios para publicidad de sus clientes y el formato de venta suele ser:
  • Venta de un espacio de la página que mostraría en determinadas secciones
  • Venta de un porcentaje determinado de apariciones
  • Venta de un número de veces determinado que se le muestra el anuncio en la página
  • Venta de un número determinado de clics que hagan los usuarios interesados
Todas estas ideas se pueden gestionar con el Componente Banners de Joomla (Componente -> Banners).

Desde esta sección definimos primero una serie de categorías para clasificar nuestros anuncios (por ejemplo, electrónica, libros, aplicaciones, etc). Observaréis que estas categorías funcionan de una manera muy similar a las categorías de artículos. El campo más importante, y único obligatorio es el nombre de la Categoría.

En un segundo paso necesitamos definir los clientes que hayan solicitado un banner. Los campos obligatorios en este caso, son 3: Nombre, Contacto e Email.

Finalemente podemos crear anuncios desde la pestaña Banners indicando la siguiente información:
  1. Nombre o título
  2. Categoría a la que pertenece
  3. Imagen del anuncio
  4. URL a la que se redirigirá al usuario al pulsarla
  5. Y Cliente, desde la columna derecha
Estos serían los campos básicos. Observaréis que hay más, pero los podéis investigar y probar por vuestra cuenta.

VISUALIZACIÓN:

Iríamos a Extensiones -> Gestor de módulos -> Nuevo -> Anuncio-Banners. Indicaríamos los parámetros básicos de un módulo (Título, posición, menús en los que se visualizaría,...) y en la columna derecha podemos configurar:
  1. Si queremos ver un anuncio concreto
  2. Si queremos ver los anuncios de una categoría alternativamente o todos a la vez
  3. Si queremos ver los anuncios de un cliente en concreto
  4. Textos que podemos situar antes y después del anuncio

martes, 18 de octubre de 2011

Más módulos

Una vez familiarizados con el concepto de módulo, vamos practicar con los que vienen por defecto en Joomla. Al crear un módulo (Extensiones -> Gestor de módulos -> Nuevo) vamos a ir comprobando el funcionamiento de los más interesantes, que serían:
  1. Buscar. Inserta un buscador del sitio. Muy práctico para los usuarios.
  2. Categoría artículos
  3. Contenido más leído
  4. Estadísticas
  5. Personalizar HTML. Ver entradas anteriores.
  6. Quién está en línea
  7. Ruta
  8. Últimas noticias
En este vídeo insertan y configuran varios módulos:

Las posiciones para colocar módulos

La verdad que las posiciones para colocar los módulos de la plantilla por defecto de Joomla no son nada intuitivas. Existe un pequeño truco muy práctico que permite localizar visualmente las posiciones de una web.
  1. Primero se debe dar permiso a Joomla para lo visualice. Esto se hace una única vez: Extensiones -> Gestor de plantillas -> Opciones -> Vista previa de las posiciones de los módulos -> Activado.
  2. Si ahora escribís los caracters ?tp=1 al final de la url de vuestra página en el navegador, se muestran los nombres y situación de las posiciones para colocar módulos. Por ejemplo: http://localhost/joomla1/?tp=1

Los módulos o bloques en Joomla

Si nos fijamos en la página de la ONG Segunda Familia, observamos que tanto en la columna de la izquierda, como en la derecha, incluso en el pie, hay una gran variedad de bloques con información u otro tipo de funcionalidades. Vemos un acceso restringido, un bloque de últimas noticias, una encuesta, banners, un pequeño calendario de eventos, etc. Este concepto de bloque que se visualiza, no en el centro del contenido, sino en posiciones secundarias, se denomina Módulo.

Vamos a crear un bloque o módulo del tipo más sencillo para familiarizarnos con este término. Pulsamos Extensiones -> Gestor de módulos -> Nuevo. Surge una ventana emergente con una gran variedad de funcionalidades. Vamos a seleccionar Personalizar HTML para insertar un texto libre.

Aparece un editor similar al de los artículos, pero debemos tener en cuenta que la información que insertemos se va a ver como un bloque más reducido. Los campos más importantes serían:
  1. El Título del módulo
  2. El texto de edición libre Salida personalizada. Podemos escribir algo llamativo como ¡CONOCE NUESTROS PRODUCTOS¡ con hipervínculo al correspondiente menú para intentar dirigir la atención del usuario a nuestras secciones más importantes.
  3. En el campo Posición indicamos dónde queremos visualizar este módulo. Estas posiciones van a depender de la plantilla de diseño que tengamos activada. En el caso de la plantilla por defecto de Joomla, la columna izquierda es la posición position-7.
  4. Y por último, podemos seleccionar en qué menús queremos hacer visible este bloque. En Menú Asignado (en la parte inferior) podemos seleccionar en qué páginas de nuestro sitio se visualizará el módulo.

Secciones en formato blog

En entradas anteriores hemos creado elementos de menú enlazados a un solo artículo. Son muy útiles secciones con un formato tipo blog donde se relaciona un elemento de menú, no a un único artículo, sino a varios que se muestran como un listado. Este formato puede valer para realizar fácilmente tanto un blog, como una sección de Noticias, Proyectos realizados, etc.

La idea es muy sencilla en Joomla:
  1. Se parte de una categoría, por ejemplo Noticias, donde clasificamos una serie de artículos con la información más novedosa (ver entrada anterior).
  2. Creamos un nuevo menú de la siguiente manera: Menús -> Menú principal -> Nuevo -> Tipo Elemento Menú -> Categoría Blog, lo titulamos Noticias, y en la columna derecha Elegir una Categoría seleccionamos la categoría Noticias.
Si refrescamos la página, veremos que este menú muestra un listado de todos los artículos de dicho grupo.

Un detalle muy simple pero muy práctico es diferenciar en un artículo el texto resumen que aparece en el listado con la información completa. Esto se hace desde el propio editor del artículo, pulsando el botón 'Leer más' en la parte inferior del editor.

La organización de artículos en Categorías

Es posible que nos encontremos la necesidad de organizar de alguna manera los artículos que vamos generando en nuestro portal. Joomla permite agrupar y organizar artículos mediante el concepto de Categorías y funcionan como si se tratara de carpetas.

Así podemos crear, por ejemplo, una categoría 'Empresa' con los artículos que hablan de la misma (Historia de la empresa, Filosofía, Ubicación, Quiénes somos, etc); una segunda categoría 'Productos' englobaría los artículos que muestran información de los mismos; y una tercera por ejemplo 'Noticias y Novedades' con la información más dinámica del sitio.

Las Categorías se crean y gestionan desde Contenido -> Gestor de categorías. El campo más importante, y el único obligatorio, a la hora de crear una categoría es el Título.

Un artículo se incluiría en una Categoría determinada desde el editor de artículos (Contenido -> Gestor de artículos -> Clic en un artículo), desde el selector 'Categoría' que aparece bajo el título.

jueves, 29 de septiembre de 2011

Los menús

Una idea que debemos interiorizar es que nos artículos que vamos generando en el backend, no van a ser visibles en la parte pública hasta que creemos en menú de navegación correspondiente que lo muestre al usuario.

Supongamos que hemos generado varios artículos en las pruebas anteriores. Vamos ahora a Menús -> Menú principal -> Nuevo (esquina superior derecha) y configuramos los siguientes campos:
  1. Tipo elemento menú: Artículo simple. Queremos que al pulsar este menú nos habra un artículo concreto.
  2. Título menú
  3. Y a la derecha en Seleccione el Artículo, elegimos el artículo.
  4. Guardar y cerrar
Si refrescamos la pestaña donde visualizamos la parte pública, veremos el resultado.

Hay infinidad de vídeos explicativos con estos pasos. Por ejemplo:


Inserción de imágenes, vídeos y documentos en un artículo

IMÁGENES:

Para insertar una imagen desde nuestro equipo cuando estamos editando un artículo, pulsamos el botón Imagen en la parte inferior del campo de edición de texto. Se superpone una pantalla que nos permite dos cosas:
  1. Desde la sección Subir archivos en la parte inferior, podemos seleccionar una imagen de nuestro equipo y subirla al servidor web.
  2. Una vez completada la subida, veremos la imagen en las miniaturas que se muestran desde donde la seleccionaremos y pulsaremos Insertar para colocarla en el artículo.
Nota: Recordad que se debe Grabar o Aplicar el artículo para guardar la imagen definitivamente.

VÍDEOS:

Las plataformas de vídeos más utilizadas son Youtube y Vimeo. En ambos casos ofrecen el código que se debe insertar en la página para visualizarlos integrados en la propia web, En el caso de Youtube, cuando se visualiza un vídeo se debe pulsar Compartir en la parte inferior del vídeo, y después Insertar. Copiamos el código que aparece y vamos a nuestra página. Entramos a editar el artículo deseado, pulsamos el botón HTML en el editor y pegamos el código en la posición deseada. Seguidamente damos Actualizar y grabamos el artículo.

En el caso de Vimeo, al visualizar el vídeo pulsamos Embed para que nos genere el código a insertar en nuestro artículo.

DOCUMENTOS:

Para insertar un documento, primero debemos subir el documento desde el Gestor multimedia y después enlazarlo como hipervínculo en nuestro artículo. Así pulsamos Contenido -> Gestor multimedia para acceder a esa especia de explorador de archivos de nuestro servidor. Desde aquí se pueden crear carpetas para organizar nuestra documentación y podemos subir todo tipo de archivos.

Podemos por ejemplo, crear una carpeta que se denomina docs. Entramos a dicha carpeta y subimos (desde el botón inferior) un fichero de nuestro equipo. una vez subido, a este fichero le corresponde una URL o dirección de internet que tiene la siguiente forma:
  1. La dirección de nuestro dominio (en este caso localhost): http://localhost/
  2. El directorio que Joomla nos deja gestionar: /images/
  3. La ruta de carpeta + nombre de nuestro fichero, por ejemplo: /docs/nombrefichero.pdf (no olvidar la extensión
  4. Para dar lugar a: http://localhost/images/docs/nombrefichero.pdf
Podéis probar escribir esta URL en nua pestaña del navegador. Se debería abrir el documento.

Por último entramos al artículo desde donde queréis que se pueda descargar este documento y escribís el texto para el usuario. por ejemplo:

Puede descargar el documento pulsando aquí (PDF, 2.5MB)

Seleccionáis el texto, pulsáis el botón de hipervínculo (la cadenita en la segunda fila de botones del editor) y en URL del hipervínculo pegáis la dirección anterior del documento. Insertar y Guardar.

El editor de contenido del artículo

El componente que trae integrado Joomla y se asemeja a los iconos de un procesador de textos cuando editamos un artículo, se denomina y TinyMCE.

Por defecto, viene configurado con ciertas restricciones que hacen incómodas algunas funciones, como insertar vídeo. Por ello, vamos a seguir los siguientes pasos para dotarle de mayor flexibilidad. Habría que hacer esto tras la instalación de cada Joomla:
  1. Extensiones -> Gestor de Plugins -> Editor - TinyMCE ->
    -> Funcionalidad: Extendida
    -> y Elementos prohibidos: borramos iframe
    Cerrar
  2. Contenido -> Gestor de Artículos -> Opciones (arriba a la derecha) -> Fitlros de texto -> Super usuario: Sin Filtrar
En clase hemos ido probando las funionalidades de este editor creando varios artículos.

Gestionar artículos

Una vez instalado la web, accedemos a la parte pública desde http://localhost/joomla1/. Lo más cómodo a la hora de trabajar es abrir una segunda pestaña con la administración o backend de Joomla: http://localhost/joomla1/administrator. Así, los cambios que vamos haciendo se pueden ver en la primera pestaña.

Recordad que el acceso es:
  • Usuario: admin
  • Contraseña: admin
Lo que se considera la unidad de información en una página hecha con Joomla, es decir, el título y contenido que buscamos al navegar en una página, se denomina artículo. Así, su control se lleva a cabo desde Contenido -> Gestor de artículos, donde vemos un listado de todos los artículos de nuestra página.

Para crear uno nuevo, pulsamos Nuevo en la esquina superior para que se nos abra el formulario de edición de un artículo. Los campos más importantes son:
  • Título
  • Texto Artículo
En clase hemos estado probando el editor web que nos permite dar formato a nuestro contenido, así como insertar imágenes y vídeos.

Un vídeo de ejemplo (hay infinidad en Youtube) sería:


martes, 27 de septiembre de 2011

Instalación Servidor + Joomla a la vez

En las entradas anteriores, hemos visto cómo instalar nuestro servidor web y el gestor de contenidos sobre él. Para facilitar esta labor, he preparado un fichero de instalación que tiene ya configurados 4 Joomlas.

Para distribuir este fichero he utilizado la plataforma MegaUpload. Es un portal donde ofrecen hasta 200 GB nada más que con un registro gratuito. Cuando pulséis el enlace del fichero, surgirá una ventana de descarga en la que tendréis que esperar 25 segundos (fijaros en el segundero a la derecha) para poder iniciar la descarga gratuita. Este es el único precio a pagar en esta plataforma. Os recomiendo probarla.

Podéis descargar este fichero pulsando aquí: http://www.megaupload.com/?d=HUFJRJHU

El proceso que habéis de seguir es solamente del de la primera parte de la instalación, porque ya trae integrados 4 Joomlas:

martes, 20 de septiembre de 2011

Instalación de un Joomla en nuestro servidor

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. Creamos el subdirectorio D:\xampplite\htdocs\joomla1\
  3. Descargamos la versión 1.7 de Joomla (comprimida en .ZIP) desde http://www.joomlaspanish.org/. El fichero es Joomla_1.7.0-Spanish-Pack_Completo.zip
  4. Extraemos todos los ficheros del comprimido anterior a D:\xampplite\htdocs\joomla1\
  5. Desde un navegador web (preferiblemente Firefox o Chrome) accedemos a la URL http://localhost/joomla1/
  6. Selecciona Spanish y pulsar Siguiente
  7. En la segunda pantalla, pulsar Siguiente
  8. En la Licencia, Siguiente
  9. 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
  10. En Configuración FTP: pulsar siguiente
  11. En Configuración Principal:
    - Nombre del sitio: (Opcional, aunque obligatorio) Mi sitio web Joomla1
    - Correo electrónico: ponéis vuestro correo o uno ficticio
    - Contraseñadel admin: admin (para poner todos el mismo, por ahora)
    - Pulsar Instalar datos de ejemplo predeterminados si se desea
    - Siguiente
  12. Borrar (o renombrar) el directorio: D:\xampplite\htdocs\joomla1\installation
  13. Ver el portal instalado en http://localhost/joomla1/
  14. El acceso a la administración del portal se realiza desde http://localhost/joomla1/administrator/
    - Usuario 'admin
    - Contraseña 'admin'

Instalación en un equipo local de un servidor web y servidor de base de datos

Para la instalación del gestor de contenidos Joomla, es necesario disponer de un servidor web Apache y un servidor de base de datos MySQL. Insisto, los alumnos menos 'técnicos' no os debéis preocupar. Los pasos a seguir son muy sencillos, y la experiencia de otros años así lo demuestra.

Los pasos a seguir para ello son los siguientes:
  1. Se ha proporcionado en clase un fichero comprimido denominado xampplite.7z
  2. Si no habéis ido a clase, me lo podéis solicitar por correo electrónico.
  3. Extraemos todo el contenido de este fichero a D:\xampplite\
  4. Ejecutamos apache_start.bat en este directorio. Surge una ventana que nos pedirá pulsar una tecla cuando lleve a cabo el arranque del servidor web Apache.
  5. Ejecutamos mysql_start.bat. Con ello arrancamos el servidor de base de datos. Nos pedirá pulsar una tecla para cerrar la ventana que surge.
Y nada más. Con esta extracción y ejecución de dos ficheros tenemos instalado un servidor web Apache con base de datos MySQL en nuestro equipo. Se puede comprobar navegando a la URL localhost desde cualquier navegador.

Para los que lo instaléis en casa. Si no tenéis unidad D: y tenéis que descomprimirlo en C:, debéis ejecutar setup_xampp.bat antes de los puntos 4 y 5. Esto es debido a que la copia que se ha dejado en clase está configurada para la unidad D:


martes, 13 de septiembre de 2011

Bienvenida al curso 2011/2012

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 principalmente en el aula de informática 017, aunque hay algunos días que se utilizará el aula contigua 016.

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 mostrando los desarrollos utilizados en la realización de la página web mediante capturas de pantalla y breves explicaciones 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

sábado, 5 de febrero de 2011

Notas publicadas en MiAulario

Se han publicado las notas en MiAulario.