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