En el área del diseño y desarrollo de webs, encontramos muchas agencias y diseñadores gráficos
que ofrecen sus servicios por Internet. Muchas veces visitamos sus sitios y vemos con envidia
como aplican fantásticos efectos a sus sitios web y ya quisieramos nosotros a veces poder
implementar más de alguno a nuestros sitios desarrollados con Joomla!.

Entre los muchos estilos de desarrollo que siempre llaman la atención, hay uno llamado "One single page design" o "Diseños de una sola página". Estos se caracterizan por permitir al visitante navegar a través del sitio web, pero sin salir de la página, sino que desplazandose dentro de la misma a través de "Anchors" o Anclas. Son estas Anclas las que nos permiten unir diferentes elementos dentro de la misma página, en puntos específicos de la misma y permitirnos navegar sin salir de ella en ningún momento.

Al término de este artículo, podremos tener un sitio web del tipo Una Sola Página, utilizando tan
solo los artículos de Joomla! y un par de extensiones. El resultado final del ejemplo sería como la
imagen que adjunto a continuación:

Lo Básico:

Las Anclas también tienen otras aplicaciones, pero en este caso en lo específico, nos remitiremos
al uso de la Anclas como elemento que nos permitirá desarrollar un sitio web basado en Joomla!
de una sola página.

Lo primero, es que como se trabaja sobre pruebas, les recomiendo siempre que trabajen en local
y realicen todos los ajustes necesarios, de esa forma, si cometemos errores, podemos comenzar
desde cero sin mayores problemas.

Comenzaremos con una instalación de Joomla! 2.5 típica, desde cero, la que instalaremos sin
datos de ejemplo, una vez instalada, si visitamos nuestro sitio, debieramos verlo igual que la
siguiente imagen:

Algunos Alcances Previos:

A pesar de que los templates de Joomla! cuentan con muchas posiciones y se han desarrollado
algunos templates de una sola página utilizando por ejemplo la posición de módulos, nosotros lo
haremos esta vez a través de artículos, por lo tanto, si necesitas o deseas crear un módulo, para
ponerlo dentro de la página, pero sin que pierda la forma que dan los contenidos ni la estructura
con la que trabajaremos, puedes hacerlo sin problemas, basta con que crees el módulo que
necesitas y lo pongas dentro de un artículo a través del uso del comando {loadpositon xx}. Para el
ejemplo de este artículo, insertaremos también un simple slideshow para que se comprenda
mejor la facilidad al momento de integrar diversos elementos de Joomla!.

Otro alcance importante de mencionar, antes de continuar con el presente artículo, es que en
Joomla! puedes conseguir por varias vías el mismo objetivo, algunas más simples y otras más
complejas, dependiendo de la experiencia y conocimiento que tengas del CMS. En este caso, a
pesar de que el óptimo sería que insertáramos las anclas directamente a los títulos de nuestro
contenido, no lo vamos a hacer y vamos a crear nuestros propios títulos.

El desarrollo de nuestro sitio de una sola página de ejemplo será muy simple, pues es importante
comprender el concepto, por lo tanto trabajaremos con 5 links, un link de inicio, 3 de contenidos y
uno de contacto, los que enlazarán a cada artículo que crearemos, independientemente del
contenido que pongamos en cada artículo. Por lo tanto, a modo de estructura, nuestro sitio estará
armado de la siguiente forma:

• Inicio
• Item 1
• Item 2
• Item 3
• Contacto

Comenzando:

Lo primero que haremos será crear los módulos que necesitaremos, en este caso, para el
ejemplo, vamos a necesitar 2 módulos, uno para el slideshow y el otro para el Contacto. Los
crearemos de inmediato para luego llamarlos directamente desde el artículo y así usamos por
única vez el gestor de módulos.

Entonces nos dirigimos al gestor de módulos y creamos nuestros 2 módulos, el Slideshow y un
módulo del tipo HTML en donde insertaremos nuestros datos de contacto, para efectos del
ejemplo, el Slideshow lo publiqué en la posición "slideshow" y el módulo html de contacto lo
publiqué en la posición "contacto":

Creando la Categoría:

Como ya creamos nuestros módulos, ahora el siguiente paso, la creación de la categoría. Crearemos una categoría llamada "pagina" y en ella le daremos la opción que se muestre en
formato blog, con 4 artículos principales y ninguno secundario. Del mismo modo, para tener una
vista plana, le quitaremos todas las otras opciones que corresponden:

Creando los Artículos:

Ahora crearemos 4 artículos, 2 de los cuales llamarán a los módulos creados anteriormente.
También instalaremos un plugin muy simple para que nos muestre una galería de imágenes
dentro del artículo, para este ejemplo instalé el plugin "Simple Image Gallery Plugin" de
Joomlaworks, de esa forma tendremos 4 artículos con la siguiente estructura:

• Artículo 1: Slideshow
• Artículo 2: Texto
• Artículo 3: Galería
• Artículo 4: Contacto

Ahora bien, los artículos por defecto en Joomla! muestran una serie de datos que en el caso de
un sitio de una sola página no nos interesa mostrar, por lo tanto ahora configuraremos los
parámetros de los artículos de acuerdo a la siguiente imagen. Como podrás observar, se
ocultaron todos los datos relacionados con los artículos, muchos de los cuales vienen por defecto
habilitados. Ahora bien, si pones atención, verás que en la primera opción lo que estamos
haciendo, es ocultar el título del artículo.

Agregando Nuestros Títulos:

Nuestro siguiente paso será crear por nosotros mismos el título para cada uno de nuestros
artículos, el procedimiento será el mismo para todos, exepto para el Slideshow al que no lo
pondremos título. Por lo tanto, para efectos de este artículo, lo haremos solamente en el
segundo artículo de nuestro sitio de ejemplo, los pasos son exactamente los mismos que para
los demás artículos, por lo tanto será cosa solo de repetirlos.

Desde el gestor de artículos tomamos el segundo artículo que creamos, en este caso sería el
llamado "Galería" y el cuadro de edición escribiremos el título, pero además le asignaremos,
desde la caja desplegable de formato, la opción "Heading 1", de esa forma nos aseguramos que
mantenga el estilo de títulos que tiene el css de nuestro template. El mismo paso lo debemos
repetir con el resto de los artículos, poniéndole a cada uno de ellos su respectivo título
descriptivo.

Insertando Anclas:

A continuación realizaremos el primer paso necesario para que el formato de una sola página
funcione, que será el crear anclas al costado del título de nuestros artículos, estas anclas nos
permitirán unir nuestros artículos a su respectivo item de menú, pero comportándose como una
url externa, de esa forma al llamar al artículo desde el item de menú, este nos dirigirá
directamente al artículo indicado, como si fuese otra página, pero dentro de la misma.

Para esto, debes posicionarte al costado del Título del artículo que creaste y presionar el botón
con el ícono de ancla que viene en tu editor de texto. Una vez presionado el botón, se desplegará
una ventana modal en la que debemos insertar el nombre de nuestro ancla. Para efectos de este
artículo, a cada ancla le llamaremos igual que al título de nuestro artículo, pero siempre en
formato minúscula y sin acento.

Este paso lo repetiremos en cada uno de nuestros artículos, exepto en el que llamamos
Slideshow. La siguiente imagen te dará una muestra de como debes hacerlo:

Creando el Primer Item de Menú:

Ahora que ya tenemos creados nuestros artículos, se agregamos el respectivo título y además le
asignamos el ancla, llega el momento de hacer la segunda parte importante para que nuestro sitio
funcione correctamente... Crear los items de menú respectivos.

Desde el gestor de menú, debemos crear 1 item de menú, el que estará asignado a la categoría
que creamos, la categoría "Pagina", además, debe ser del tipo Categoría en formato de Blog. No
debes preocuparte de los parámetros, pues los ajustamos al momento de crear la categoría y los
artículos. Solo debes preocuparte que el orden de los artículos se muestre de la forma "Los más
antiguos primero".

Creando los Siguientes Item de Menú:

Los siguientes items de menú serán los que llamarán a cada uno de nuestros artículos. Los items
que crearemos serán 3 y les llamaremos "Texto", "Galería" y "Contacto". Cada uno de estos items
debe cumplir con las siguientes caracaterísticas:

• Texto: Un item de menú que enlazará a una URL externa, al que será la misma url de tu sitio web, pero con la terminación /#texto
• Galería: Un item de menú que enlazará a una URL externa, la que será la misma url de tu sitio web, pero con la terminación /#galeria
• Contacto: Un item de menú que enlazará a una URL externa, la que será la misma url de tu sitio web, pero con la terminación /#contacto

A continución te muestro una imagen con la respectiva configuración del item de menú "Texto", para que veas las opciones. Recuerda que para este artículo, estoy trabajando en local, por lo tanto la url de mi sitio es http://127.0.0.1/joomla:

Scroll al Inicio:

Si en estos momentos revisas tu sitio web, verás que tienes un menú principal con sus
respectivos items de menú y los artículos en orden, pero si haces click sobre cada item de menú
observarás 2 detalles, el primero, que el salto que se produce entre el item de menú y el artículo
es bastante poco agradable, es como cargar el sitio web de nuevo. Y también observarás que
para volver al menú, necesitas utilizar la barra de desplazamiento de tu browser.

En este paso, daremos solución al desplazamiento hacia arriba de la página, en donde se
encuentra el menú. Para eso, utilizaremos un plugin del Centro de extensiones de Joomla!
llamado Skyline Scroll to Top, el que automáticamente nos mostrará un ícono o texto de
desplazamiento que nos permitirá volver al inicio de nuestro sitio en cuanto lo presionemos.

Además cuenta con otras características bastante interesantes como decidir si utilizamos una
imagen o un texto, podemos personalizar el texto, decidir si queremos que también se muestre en
la administración de Joomla! y además, desde los parámetros avanzados del plugin, podemos
personalizarlo a través de nuestras propias CSS.

Recuerda siempre, cuando instales una extensión, ya sea módulo o plugin, verificar que este esté
habilitado :)

Descargar el Script para el efecto Smooth Scroll:

Ya habrás visto que el plugin comienza a mostrar el desplazamiento que esperamos en el sitio
web, nos permite desplazarnos desde donde estemos, hacia el comienzo de nuestro sitio, con un
agradable deslizamiento o scroll. Pero si revisamos los links de nuestro ejemplo, veremos que
estos aún no funcionan. Para eso realizaremos este último paso que consiste en descargar este
javascript (botón secundario, "guardar como") llamado smoothscroll.js y lo ponemos en la carpeta
correspondiente de nuestro template. Si nuestro template no tiene una carpeta en donde
almacene este tipo de archivos podemos crearla sin problemas y llamarla "javascript" o "js" y
poner el archivo dentro.

Para el ejemplo, he estado trabajando con la plantilla Beez_20 que es la que viene por defecto
con Joomla! 2.5, dentro de la carpeta de la plantilla viene la carpeta Javascript, en este caso,
pondré el archivo dentro de esa carpeta.

Insertando el Script en Nuestra Plantilla:

Una vez guardado nuestro archivo javascript, debemos realizar la llamada al mismo desde
nuestro template. Para eso debemos generar la llamada al archivo desde es fichero index.php de
nuestro template. Para eso, abrimos el fichero index.php que se encuentra dentro de la carpeta
Beez_20 y si nos fijamos en la línea 87 del index.php, veremos la forma como se hace la llamada
a los archivos .js en ese template, por lo tanto, nos posicionaremos en la línea 107 y realizaremos
el llamado a nuestro archivo smoothscroll.php:

Conclusión:

Si ahora recargas la página y haces click sobre cualquiera de los links de los items de menú,
verás el desplazamiento suave hacia cada parte de la página en donde insertamos las
respectivas anclas. A partir de este momento ya comienza la labor de ir dándole forma a nuestra
página con nuestro propio template, puedes poner en marcha la imaginación y desarrollar el tipo
de sitio que quieras con el sistema de Una Sola Página en Joomla!. Puedes agregar las fuentes
de google para las etiquetas H1, agregar tus propios fondos para diferenciar entre uno y otro
artículo.

Para inspiración, revisa este link que muestra muy buenos sitios de una sola página, para que te
sirvan de inspiración en la creación de tu propio sitio y te adjunto esta imagen con un resumen
para que la puedas compartir por las redes sociales, especial para Pinterest :)