tema 4

Curso Soluciones avanzadas Web 2.0

Módulo 4

Módulo 4 – Desarrollo inicial de un sitio web

1

Curso Soluciones avanzadas Web 2.0

4.1.

INTRODUCCIÓN

El objetivo de este tema es dar los primeros pasos en el desarrollo de un sitio web con Joomla!. Ver cómo está estructurado el backend y el frontend, y empezar a ver cómo está organizado el contenido y cómo se crea.

Un sitio web Joomla! tiene 2 partes bien diferenciadas: -

FRONT-END: Parte que es visible para el usuario de nuestro sitio web, la que interactúa con el usuario.

Si hemos llamado joomla a nuestra carpeta, accederemos en: C://localhost/joomla

-

BACK-END: Es el Panel de Administración de Joomla!. Parte que interactúa con el administrador.

Si hemos llamado joomla a nuestra carpeta, accederemos (introduciendo usuario y contraseña) en: C://localhost/joomla/administrator

Módulo 4 – Desarrollo inicial de un sitio web

2

Curso Soluciones avanzadas Web 2.0

4.2.

BACKEND

Como hemos dicho, se accede poniendo detrás de la ruta del sitio web, la palabra “administrator”, y escribiendo el nombre de usuario y contraseña: C://localhost/joomla/administrator

4.2.1.

Panel de control

El centro de control proporciona acceso a las diferentes partes de la administración, a través de una serie de botones o de pestañas en un menú:

Módulo 4 – Desarrollo inicial de un sitio web

3

Curso Soluciones avanzadas Web 2.0 Descripción de los botones del Panel de control:

Añadir un nuevo

Acceso rápido a la creación de un nuevo artículo de contenido.

artículo

Gestor de la página

Gestor de artículos

Donde se decide qué se ve en la página de inicio o Frontpage.

Gestor de secciones

principal

Gestor de categorías

Acceso rápido a la edición de artículos de contenido.

Acceso rápido a la administración de categorías de contenido.

Gestor multimedia

Acceso rápido a la gestión de los menús del sitio web.

Gestor de menús

Administrador de

Acceso rápido a la administración de archivos que pueden ser usados por los editores WYSIWYG en la elaboración de contenido.

Acceso a la administración del idioma de Frontend.

Gestor de idiomas

Acceso a la gestión de traducciones del sitio.

Gestor de usuarios

traducciones

Configuración global

Acceso rápido a la administración de secciones de contenido.

Acceso a la gestión de usuarios del sitio: crear, editar, eliminar…

Acceso a la administración técnica del sitio, del sistema y del servidor.

Módulo 4 – Desarrollo inicial de un sitio web

4

Curso Soluciones avanzadas Web 2.0

4.2.2.

Distribución de la ventana de Administración

La administración de Joomla! tiene 4 partes: -

Menú principal: Navegación principal. Cada botón tiene un desplegable con más opciones.

-

Barra de herramientas: Permite crear, borrar, editar, etc. contenidos u otros elementos del sitio. Es distinta según el elemento abierto. Tiene siempre la ayuda. o

Guardar: para guardar los cambios volviendo a la ventana anterior.

o

Aplicar: para guardar los cambios sin moverse de la ventana actual.

o

Cancelar: para volver atrás.

o

Ayuda: siempre disponible.

-

Barra de información: Muestra el nombre de la parte de Joomla en la que nos encontramos, da la opción de previsualización, el nº de mensajes que tienes, los usuarios conectados y la opción de cerrar la sesión.

-

Área de trabajo: Espacio que se usa cuando se hace una selección en el menú principal. En él se seleccionan los elementos sobre los que se quiere actuar.

Menú principal

Barra de información

Área de trabajo

Módulo 4 – Desarrollo inicial de un sitio web

Barra de herramientas

5

Curso Soluciones avanzadas Web 2.0 Vamos a ver algunas cuestiones de la administración. Empezamos por la pestaña “Sitio”.

4.2.3.

Sitio

GESTOR DE USUARIOS Joomla tiene 2 jerarquías de usuarios, una para ver qué partes del Frontend puede ver el usuario y otra para acceder a la administración del sitio (Backend).

Front-end

Back-end

Registrado

Gestor

Autor

Administrador

Editor

Super Administrador

Publicador

Los permisos que tienen los distintos tipos de usuarios siguen un esquema piramidal, de tal forma que conforme bajamos en el dibujo, el tipo de usuario tiene los permisos del inmediatamente superior más otros adicionales.

Los usuarios del Backend, también lo son del Frontend, concretamente editores.

USUARIOS DEL BACK-END -

Registrados: Los usuarios registrados no pueden contribuir con contenido, pero pueden acceder a las descargas y en general a cualquier recurso que el administrador decida que tenga el nivel de acceso “Registrado”. Es el único que puede crearse a sí mismo.

-

Autor: Puede enviar artículos pero no puede publicarlos. Debe esperar a que lo publique un publicador o administrador. Tampoco puede editar los artículos de los demás.

Módulo 4 – Desarrollo inicial de un sitio web

6

Curso Soluciones avanzadas Web 2.0 -

Editor: Igual que el autor a diferencia de que puede editar los artículos de los demás.

-

Publicador: Puede enviar, editar y publicar todos los artículos.

USUARIOS DEL FRONT-END -

Gestor: Tiene acceso a la creación y edición de contenidos y otra información del sistema desde el servidor. Puede crear o editar cualquier contenido, añadir, eliminar y editar las secciones y categorías, edición de la Portada y de los menús, pero no tiene acceso a la «mecánica» de Joomla, como la gestión de usuarios o la capacidad de instalar componentes o módulos.

-

Administrador: Tiene acceso a la mayoría de las funciones de la administración.

Posee todos los privilegios de un gestor y también tiene acceso a configurar las opciones de instalar / eliminar componentes, módulos y plugins. Puede acceder a la administración y ver las estadísticas del sitio. También modificar y crear usuarios excepto el super-administrador. Lo que no puede hacer es cambiar, modificar o instalar plantillas de sitio o hacer cualquier cambio de las opciones de configuración global.

-

Super Administrador: Tiene acceso a todas las funciones de administración del CMS. Sólo otro Super-Administrador puede crear o editar una cuenta de usuario SuperAdministrador.

Nota de interés Cuando creamos el usuario en la instalación de Joomla, su nivel de permiso es Super Administrador.

4.2.4.

Contenido

Vamos a ver cómo se crea el contenido que se va a mostrar en el sitio web.

La estructura del contenido en un sitio web Joomla! está organizada en un orden jerárquico en base a Secciones, Categorías y Artículos de Contenido. En la práctica, una Sección puede tener una o más Categorías y una Categoría puede tener uno o más Artículos de Contenido:

Módulo 4 – Desarrollo inicial de un sitio web

7

Curso Soluciones avanzadas Web 2.0

Sitio Web Sección 1 Categoría 1

Sección 2 Categoría 2

Artículo 1

Categoría 3 Artículo 4

Artículo 5

Artículo 2 Artículo 3

Por tanto, primero crearemos una sección, después una categoría que pertenezca a ella, y por último un artículo que pertenezca a ambas.

SECCIÓN Ve a “Contenido”  “Gestor de secciones”, y da a “Nuevo”:

De momento, basta con que escribas el “Título” y dale a “Guardar”.

Módulo 4 – Desarrollo inicial de un sitio web

8

Curso Soluciones avanzadas Web 2.0

CATEGORÍA Ve a “Contenido”  “Gestor de categorías”, y da a “Nuevo”:

Dale un “Título” y asegúrate que le asignas la “Sección” adecuada, en este caso la creada justo antes. Dale a “Guardar”.

ARTÍCULO Ahora ya puedes crear un artículo y asignarle su categoría y sección correspondiente.

Ve a “Contenido”  “Gestor de artículos”, y da a “Nuevo”:

Escribe el “Título” y asígnale una “Sección” y una “Categoría”. Edita el “Texto” del artículo, ya que es obligatorio. Para ello dispones del editor TinyMCE, un editor WYSIWYG (“What You Módulo 4 – Desarrollo inicial de un sitio web

9

Curso Soluciones avanzadas Web 2.0 See Is What You Get”, Lo que ves es lo que obtienes). Es un editor muy sencillo de manejar y que ofrece la posibilidad de ver directamente le código HTML, para que puedas escribir directamente en él.

Para insertar imágenes, lo ideal es que uses el botón de la parte inferior destinado a ello:

Al dar al botón “Imagen”, se abre una ventana con las imágenes que tienes subidas a la ruta C://wamp/www/joomla/images/stories

Allí puedes seleccionar una imagen o bien subirla desde tu ordenador en “Examinar”.

Evaluación 4.2.4 El sitio web que vas a crear debe ir enfocado a tu empresa, si no la tienes, invéntatela.

Crea una sección, dos categorías que pertenezcan a esa sección y cuatro artículos, dos de una categoría y dos de la otra.

Módulo 4 – Desarrollo inicial de un sitio web

10

Curso Soluciones avanzadas Web 2.0

4.2.5.

Menús

Una vez que está creado el artículo, vamos a mostrarlo a través de un menú.

La navegación en el sitio web se realiza a través de menús. En Joomla!, los menús nos pueden llevar a secciones, categorías, artículos, componentes o páginas externas.

Cada menú (grupo de enlaces) debe tener un nombre identificativo, que será usado internamente por Joomla!. Para que un menú sea visible en el Sitio (Front-end) debe disponer de un Módulo asociado publicado. Un menú puede tener múltiples Módulos asociados.

Pueden ser creados con Joomla! todos los menús que necesitemos. Inclusive pueden mostrarse distintos menús dependiendo de la sección o página por la que navegue el visitante. Los menús que vienen por defecto en Joomla! son: -

Mainmenu: Menú principal del sitio y el más importante. Lo que se encuentre como primer elemento de este menú es lo que se mostrará en la página principal.

Atención ¡NO BORRAR NUNCA EL MAINMENU! Te recomiendo que ni siquiera le cambies el nombre.

-

Topmenu: Menú horizontal que aparece sobre (o debajo) de la cabecera del sitio.

-

Usermenu: Menú de usuario (solo aparece cuando un usuario se registra e ingresa en el sistema).

-

Othermenu: Es simplemente "otro menú" cualquiera.

GESTOR DE MENÚS Se puede acceder desde la barra de menús o desde el panel de control.

El área de trabajo nos muestra la siguiente información:

Módulo 4 – Desarrollo inicial de un sitio web

11

Curso Soluciones avanzadas Web 2.0 -

Título: Nombre del menú usado por Joomla! para identificar este menú en el código.

Pulsa en él para editarlo.

-

Tipo: Tipo de menú.

-

Item(s) del menú: Pulsa este icono para gestionar los ítems asociados a este menú.

-

Publicado: Número de ítems de menú publicados asociados al menú.

-

Despublicado: Número de ítems de menú no publicados asociados al menú.

-

Papelera: Número de artículos de menú en el administrador de la papelera asociados al menú.

-

Nº de módulos: Número de módulos de menú asociados a dicho menú.

-

ID: Número identificador que lo hace único y lo identifica.

La barra de herramientas indica las operaciones que se pueden realizar sobre el menú:

-

Copiar: Copia un menú ya existente.

-

Borrar: Elimina un menú existente, sus ítems de menú y el módulo asociado a él. No se puede recuperar de la papelera.

-

Editar: Para cambiar el nombre del menú.

-

Nuevo: Para crear un menú nuevo.

GESTOR DE ITEMS DE MENU Para acceder a los ítems de un menú se puede hacer de dos formas. Por ejemplo, para acceder a los ítems del “Menú principal” (de primeras sólo tenemos este menú con un solo ítem llamado “Inicio”) podríamos: -

Acceder al menú correspondiente en la pestaña “Menús”:

Módulo 4 – Desarrollo inicial de un sitio web

12

Curso Soluciones avanzadas Web 2.0

-

Ir al “Gestor de menús” y dar al icono de “Ítems de menú” del “Menú principal”:

Para crear un ítem de menú en el menú principal que nos muestre el artículo creado en el apartado anterior, entra en los “Ítem(s) del menú” del “Menú principal” y dale a “Nuevo”.

Elige el tipo “Artículo”  “Presentación del artículo”, que es el tipo de ítem de menú para que se muestre un solo artículo.

Módulo 4 – Desarrollo inicial de un sitio web

13

Curso Soluciones avanzadas Web 2.0

Escribe el “Título” y selecciona el artículo al cual quieres enlazar el ítem.

Evaluación 4.2.5 Crea 4 ítems de menú en el Menú principal que muestren cada uno un artículo de los creados en al apartado anterior.

Módulo 4 – Desarrollo inicial de un sitio web

14

Curso Soluciones avanzadas Web 2.0

4.3.

INTRODUCCIÓN

El objetivo de este tema es avanzar en la administración del sitio web Joomla!, viendo los componentes, los módulos y los plugins.

-

Componentes: Juegan un papel destacado en la gestión de contenidos de Joomla!.

Son pequeños programas independientes entre sí, que están junto al núcleo de Joomla! o, si no, se descargan y se instalan desde el Panel de administración.

-

Módulos: Son aplicaciones más simples que los componentes y generalmente son una extensión o complemento de algún componente. Muestran información secundaria, simplificada y breve que toman de la base de datos y la muestran en los laterales del sitio:

-

Plugins: Son aplicaciones que "interceptan" los ítems de contenido (documentos o ítems de componentes) antes de ser mostrados y publicados por el sistema, y le agregan información adicional o lo "alteran" en forma dinámica, completando así el contenido total que va a ser entregado al navegador del usuario final. Pueden ser llamados mediante comandos especiales, o se pueden mostrar de forma predeterminada para ciertos contenidos/componentes.

ESTRUCTURA TIPO DE LA INTERFAZ VISUAL DEL FRONTEND DE JOOMLA Header o cabecera (puede contener módulos) Módulo Top

Módulos “Left” (izquierda)

Espacio central y principal: Carga de Componentes / Plugins (contenidos)

Módulo (Ej: user1)

Módulos “Right” (derecha)

Módulo (Ej: user2)

Footer o Pié de página (puede contener módulos)

Módulo 4 – Desarrollo inicial de un sitio web

15

Curso Soluciones avanzadas Web 2.0

4.4.

COMPONENTES

Cada componente tiene su propia tabla en la base de datos de Joomla y también sus propios archivos. Esto es precisamente lo que les da una independencia en el funcionamiento y no interfieren (en general) unos con otros, además esto brinda la posibilidad de que pueden ser instalados o desinstalados en cualquier momento, es decir, el sistema permite un asincronismo temporal en la instalación/desinstalación de estas aplicaciones.

Hay distintos tipos de componentes y de muy diversas funcionalidades (se designa el nombre de los componentes con el prefijo "com_"): -

Componentes que funcionan en el frontend y en la administración de Joomla (Ejemplos: com_content, com_weblinks, com_newsfeeds, etc).

-

Componentes que funcionan exclusivamente en administración de Joomla (Ejemplos: com_config, com_media, com_statistics, com_typedcontent, etc).

-

Componentes que funcionan exclusivamente en el frontend (No son tan comunes, generalmente son creados por desarrolladores independientes).

-

Componentes que combinan su funcionamiento con módulos (Generalmente la gran mayoría. Ejemplos: com_banners, com_polls, com_login, etc).

-

Componentes opensource (de descarga gratuita) y componentes comerciales (requieren pago antes de la descarga).

NIVELES DE FUNCIONAMIENTO DE LOS COMPONENETES Los componentes de Joomla funcionan en dos niveles.

-

Dentro del nivel administrativo, el usuario administrador realiza varias acciones: o Setea las opciones de configuración del componente en cuestión. o Crea ítems y elementos que contienen datos e imágenes. o Edita, borra, elimina, publica, etc.

Por ejemplo: en el componente com_poll (encuestas), el administrador crea una encuesta, la pregunta de esa encuesta, luego crea las distintas respuestas que se darán como opciones al usuario que responda esa pregunta, etc. Después de ello

Módulo 4 – Desarrollo inicial de un sitio web

16

Curso Soluciones avanzadas Web 2.0 puede publicarla, editarla, borrarla, o crear nuevas encuestas y nuevas preguntas, etc.

Los componentes de administración se encuentran en el directorio: /administrator/components/ -

El otro nivel de funcionamiento de los componentes es el de frontend: Aquel que interactúa con los usuarios/navegantes del sitio que pueden realizar acciones como: o Filtrado de datos realizando búsquedas específicas. o Envío de datos al sistema o al usuario administrador. o Navegación por sus ítems y hasta creación o edición de contenidos específicos Los archivos de estos componentes se encuentran en: /components/ Por ejemplo en un componente de clasificados, el usuario puede ver los anuncios publicados por otros usuarios y también publicar o editar sus propios avisos...

COMPONENTES QUE VIENEN INSTALADOS EN LA VERSIÓN 1.5.20 DE JOOMLA!

-

BANNER: Sirve para administrar la publicidad del sitio web de forma sencilla. También permite guardar información de los clientes.

-

BUSCAR: En un buscador interno dentro del sitio web.

Módulo 4 – Desarrollo inicial de un sitio web

17

Curso Soluciones avanzadas Web 2.0 -

CONTACTOS: Para administrar los contactos que pueden estar disponibles en el sitio web, para que un usuario pueda contactar con ellos. Se pueden organizar en categorías.

-

ENCUESTAS: Para realizar encuestas y votaciones de respuesta única a los usuarios del Frontend.

-

ENLACES WEB: En el Frontend se puede tener una relación de enlaces web, organizados en categorías.

-

SERVIDOR DE NOTICIAS (NEWSFEED) La sindicación RSS permitirá mostrar noticias publicadas en otros sitios web. Estas noticias se mostrarán en forma de enlaces con el aspecto de nuestra plantilla y se actualizan de forma automática, cuando son publicadas en el sitio de origen.

Cuando se crea un servidor de noticias nuevo hay que tener cuidado al poner la dirección del enlace, pues es la dirección RSS, la que ofrece la sindicación directa Nota de interés

Dirección RSS: Es la URL que sale en la barra de direcciones del navegador cuando das al símbolo de RSS de una página web.

Módulo 4 – Desarrollo inicial de un sitio web

18

Curso Soluciones avanzadas Web 2.0

4.5.

MÓDULOS

De la misma manera que los componentes, los módulos poseen dos niveles de aplicación: En el administrador de Joomla y en el Frontend.

Para administrar módulos, configurarlos y publicarlos/despublicarlos hay que ingresar en el administrador e ir al menú “Extensiones”  “Gestor de módulos”. Para que los módulos se muestren deben estar publicados.

Módulos del nivel de administración.

Están relacionados con tareas o características propias del Back-end. Gracias a ellos, vemos cosas como los usuarios que están conectados, cuántos mensajes tenemos sin leer, etc.

Están localizados en la carpeta: /administrator/modules

Vamos a dejar éstos como están y nos centraremos en la otra posibilidad.

Módulo 4 – Desarrollo inicial de un sitio web

19

Curso Soluciones avanzadas Web 2.0 Módulos del nivel de Sitio.

Son los módulos que se pueden ver desde el Frontend. Están localizados en la carpeta: /modules

Para crear un módulo hay que dar a “Nuevo” y aparece una ventana con todos los tipos de módulos que podemos crear:

Si colocas es cursor encima de un tipo de módulo, aparece una descripción de para qué sirve.

Muchas veces el módulo sirve para mostrar en el Frontend un componente que hemos creado. Por ejemplo, para crear una encuesta, primero hay que crearla a través del componente “Encuestas” y para mostrarla en el sitio web (en el Frontend) hay que crear el módulo “Encuesta” correspondiente en el que hay que seleccionar la encuesta creada anteriormente.

Módulo 4 – Desarrollo inicial de un sitio web

20

Curso Soluciones avanzadas Web 2.0 Evaluación 1

Crea un módulo de Buscar en el lado derecho que aparezca en todas las ventanas.

Crea una encuesta, con al menos 3 posibles respuestas, que sólo se vea a la izquierda de la ventana de inicio y que quede debajo del menú principal.

Crea un módulo de Acceder, configúralo y haz que aparezca en todas las ventanas a la derecha, encima del de buscar.

Evaluación 2

Crea un menú llamado Artículos, que tenga 4 ítems que muestren cada uno un artículo distinto de los creados en al apartado anterior. Sitúa este menú en la parte de arriba (debajo de la cabecera, posición “hornav” en la plantilla que viene por defecto).

Módulo 4 – Desarrollo inicial de un sitio web

21

Curso Soluciones avanzadas Web 2.0

4.6.

PLUGINS

Los Plugins son extensiones que realizan una amplia variedad de funciones relacionadas fundamentalmente con la autenticación de usuarios, el funcionamiento del buscador interno o con la edición de contenidos. Un ejemplo es el editor Wysiwyg TinyMCE con el que podemos editar contenidos desde un entorno más amigable o el plugin Pagebreak que nos permite paginar los artículos.

La instalación de Joomla! viene con varios plugins instalados, cada uno de ellos con diferentes objetivos y funciones. Podemos ver la lista de plugins disponibles en nuestro sitio en”Extensiones”  “Gestor de plugins”:

Desde el Gestor de plugins se puede publicar o despublicar un plugin, controlar el nivel de acceso requerido para poder visualizarlo o utilizarlo, modificar el orden o editar algunas de las opciones de configuración de algunos de ellos.

Por ejemplo, si entras en el del Editor -TinyMCE verás esta ventana:

Módulo 4 – Desarrollo inicial de un sitio web

22

Curso Soluciones avanzadas Web 2.0

En ella puedes cambiar el tipo de editor, para que tenga más o menos funciones. Se hace en “Parámetros”  “Funcionalidad”.

Evaluación 3 Cambia la funcionalidad del editor de texto TinyMCE a “extendido”.

Al igual que con otras extensiones, podemos descargar e instalar nuevos plugins, para añadir nuevas características a Joomla!.

Módulo 4 – Desarrollo inicial de un sitio web

23

Curso Soluciones avanzadas Web 2.0

4.7.

INTRODUCCIÓN

El objetivo de este tema es aprender cómo se puede personalizar y mejorar un sitio web en base a las necesidades que se tengan.

Las extensiones de Joomla! son pequeños programas que suministran al sitio web funcionalidades que la versión estándar no posee. Pueden ir desde funciones simples, como añadir formularios o imágenes, hasta muy complejas, como tiendas virtuales.

Las extensiones se dividen en cinco tipos diferentes:

Componentes

Módulos

Plugins

Joomla estándar

Idiomas

Plantillas

-

Componentes: son aplicaciones que modifican totalmente el cuerpo de la página, y generalmente cuentan con un sistema de administración propio, accesible desde el administrador de Joomla!.

-

Módulos: son aplicaciones más pequeñas que los componentes, y por lo general sirven para mostrar algunos elementos en una, algunas o todas las páginas. No modifican sustancialmente el cuerpo de la página de Joomla!.

Módulo 4 – Desarrollo inicial de un sitio web

24

Curso Soluciones avanzadas Web 2.0 -

Plugins: Son secciones de código que se agregan al código de Joomla cuando se producen determinados eventos. Por ejemplo, el plugin “page-break” ejecuta un código que permite la visión parcial de un artículo acompañado de un botón “leer más” cuando esta función se ha introducido en un artículo.

-

Idiomas: Pueden ser modificado, tanto en el front-end como en el back-end, mediante la utilización de estas extensiones, sin necesidad de que se produzcan modificaciones en el código original de Joomla.

-

Plantillas: Son las extensiones encargadas de dar el aspecto visual, tanto del frontend como del back-end. Las plantillas no solo modifican el diseño gráfico de la página Joomla 1.6, sino que además otorga ubicación a cada uno de los elementos componentes, organizándolos en varias posiciones predefinidas en la plantilla.

Módulo 4 – Desarrollo inicial de un sitio web

25

Curso Soluciones avanzadas Web 2.0

4.8.

INSTALACIÓN DE EXTENSIONES

Vamos a ver cómo se realiza la instalación / desinstalación de extensiones (un componente, un módulo, un plugin, una plantilla o un idioma) en Joomla!.

Ir a “Extensiones”  “Instalar / Desinstalar”:

El gestor de extensiones permite tres formas de realizar la instalación: -

Desde un archivo zip alojado en nuestro ordenador.

-

Desde un archivo zip alojado en el servidor.

-

Proporcionando la url del archivo zip.

Para usar el primer método, hay que dar a “Examinar” para seleccionar el archivo zip y a continuación dar a “Subir archivo & instalar”.

Para desinstalar, simplemente hay que acceder el bloque correspondiente, elegir elemento de la lista y dar al botón de “Desinstalar”:

Módulo 4 – Desarrollo inicial de un sitio web

el

26

Curso Soluciones avanzadas Web 2.0

Nota de interés Centro de extensiones de Joomla!: http://extensions.joomla.org/ Extensiones en español: http://extensiones.joomlaspanish.org/

TIPO DE EXTENSIONES COMUNES Componente: mini-aplicación que trabaja en el cuerpo principal de la página.

Módulo: presenta bloques pequeños de HTML en cualquier página.

Plugin: comportamiento a los cambios del código dinámicamente.

Idioma: proporciona la traducción del idioma.

Herramienta: uso externo para ayudar a la creación o manejo el sitio Joomla!.

Especial: plugin de una extensión que requiere de otra extensión para funcionar.

EJEMPLO DE UNA INSTALACIÓN Vamos a ver un ejemplo de instalación de un módulo. El elegido va a ser un módulo que nos permita, en nuestro sitio web de Joomla!, añadir un link que permita a nuestros lectores compartir el sitio a través de Facebook.

Lo primero que hay que hacer es descargarlo en nuestro ordenador. Pera ello vamos al centro de extensiones de Joomla! y entramos en la categoría “Social web”  “Republish”

Módulo 4 – Desarrollo inicial de un sitio web

27

Curso Soluciones avanzadas Web 2.0

Allí vemos un módulo llamado “Facebook Share”. Accedemos a él:

La estructura de las extensiones suele ser primero una serie de datos de la extensión (nombre, versión, vistas, etc). Luego nos permite la opción de descargarlo (Download) y de ver una Demo. Y finalmente describe la funcionalidad de la extensión.

Puedes ver la demo y a continuación proceder a la descarga. Accedemos así a la página del desarrollador del módulo, la leemos detenidamente pues suelen explicar cómo instalar y/o usar la extensión, y vemos que abajo está el link a la descarga:

Módulo 4 – Desarrollo inicial de un sitio web

28

Curso Soluciones avanzadas Web 2.0 Y guardamos la extensión en nuestro ordenador:

En nuestro sitio Joomla! procedemos a instalar la extensión como hemos visto anteriormente, y si todo va bien, nos muestra un mensaje de éxito:

JOOMLA Y LA WEB 2.0 Te propongo ahora una serie de ejercicios destinados a incorporar a tu portal web varias extensiones relacionadas con herramientas que hemos visto de la Web 2.0. En cada uno de ellos debes instalar la extensión y utilizarla en el sitio web que estás desarrollando.

Atención

Tienes que investigar cómo funciona cada una, tanto en la página de extensiones en la que las encuentres, como en la página de su desarrollador. Si no logras descubrir cómo funcionan, tranquilo, ve preguntando al profesor y él te echará una mano…

Módulo 4 – Desarrollo inicial de un sitio web

29

Curso Soluciones avanzadas Web 2.0

Evaluación 1 Instala el módulo Facebook Share en tu sitio web.

Evaluación 2 Investiga qué extensiones hay disponibles para Twitter, e instala una de ellas.

Evaluación 3 Investiga qué extensiones hay disponibles para mostrar tus fotos de Picasa y de Flickr, e instala una para cada una de ellas.

Evaluación 4

Muestra en tu sitio web una presentación de Slideshare y una publicación de Issuu, de las que realizaste en el módulo 2. Deben verse en un artículo nuevo destinado a este ejercicio.

Módulo 4 – Desarrollo inicial de un sitio web

30

Curso Soluciones avanzadas Web 2.0

4.9.

PLANTILLAS

En Joomla! es muy sencillo cambiar la apariencia de un sitio web, ya que está la opción de cambiar la plantilla. Este es un paso muy sencillo, pero con el que hay que tener mucho cuidado ya que las plantillas tienen definidas unas posiciones que no tienen por qué coincidir con la que puedas tener instalada. Mi consejo es, que si no sabes mucho de programación web y estilos CSS, sólo pruebes a cambiar la plantilla antes de empezar a crear el contenido del sitio. Y si te atreves y tienes los conocimientos necesarios, tienes la posibilidad de instalar una plantilla y editarla para que coincida con el contenido.

INSTALACIÓN DE PLANTILLAS Vamos a ver cómo cambiar las plantillas en Joomla!. Para ello nos dirigimos al Gestor de plantillas:

Allí hay que seleccionar la plantilla deseada de la lista de plantillas instaladas y dar a “Predeterminado”. Si pones el cursor encima del nombre de una plantilla, aparece una pequeña imagen del aspecto de la misma.

Módulo 4 – Desarrollo inicial de un sitio web

31

Curso Soluciones avanzadas Web 2.0 Como ves, hay dos opciones en el gestor de plantillas, “Sitio” y “Administrador. La mayoría de usuarios de Joomla! suelen trabajar con plantillas de sitio que pertenecen a la parte pública de la web, pero también es posible cambiar las plantillas de la zona de administración.

Para echar un vistazo de cómo es una plantilla, puedes entrar en ella pulsando sobre su nombre o dando al botón de “Editar”, y en el menú de edición dar al botón de “Previsualizar”.

La ventana que aparece incluye todas las posiciones asignadas a la plantilla, algo de mucha ayuda a la hora de colocar los módulos en el sitio.

Atención

Un truco para poder visualizar todas las posiciones asignadas a la plantilla y que es muy sencillo, es añadir "index.php?tp=1" al final de nuestro dominio. Aparecerá cada posición de forma difuminada, pero lo suficiente claro para poder saber que posiciones y dónde están colocadas dentro de nuestra plantilla.

Por ejemplo --> http://www.tudominio.com/index.php?tp=1

En internet hay muchos sitios web en los que se puede descargar plantillas gratuitas para Joomla!. A continuación tienes una lista de sitios web con plantillas gratuitas para Joomla!:

-

Plantillas Joomla

-

JoomlaTP

-

JoomlArt

-

ThemesBase

-

TemplatePlazza

-

JoomlaFreeTemplates

-

Joomla2U

-

ThemeBot

-

SiteGround

-

BestOfJoomla

Módulo 4 – Desarrollo inicial de un sitio web

32

Curso Soluciones avanzadas Web 2.0 Evaluación 5

Instala y prueba alguna plantilla que te guste y creas que puede encajar con tu contenido actual (ver posición de menús, número de columnas, etc).

Módulo 4 – Desarrollo inicial de un sitio web

33