Cómo hice esta web

Tal vez estés pensando "¡Oye, este sitio mola bastante! ¿Me pregunto cómo lo habrá implementado?" Yo en cambio he estado pensando "¿Pero para qué leches creé una categoría 'Blog'?" desde el pasado enero. Si al menos hubiera una solución común a ambos dilemas... Oye, un momento.

En este artículo relativamente largo haré un resumen acerca de cómo logré subir este engendro, por si pudiera serle útil a alguien que quiera buscar su rincón particular en Internet. Mi primer consejo es que lo pongas todo a funcionar de manera local antes de pagar un euro, probando minuciosamente hasta que estés del todo contento. De hecho, aunque mi web se publicó el día de Año Nuevo de 2025, la había estado desarrollando durante más de 6 meses con anterioridad. Pasar del entorno local a producción fue cuestión de transferir una copia.

1. Comprar un dominio

No puedes pretender que la gente llegue a tu web tecleando "78.102.35.190" o algo similar en sus navegadores, así que tendrás que adquirir un dominio. Primero tienes que decidir cuál quieres, desde un simple "juanperez.com" a "dasal.ba" (ese es el dominio para Bosnia y Herzegovina, por cierto; al final lo descarté). Los dominios de alto nivel clásicos suelen ser algo más caros. En los últimos años se han puesto de moda dominios como .io y .me porque dan pie a juegos de palabras ingeniosos en inglés.

Tras elegir uno, tendrás que comprarlo. Hay cientos de servicios registradores de dominios. Yo opté por Njalla porque había leído recomendaciones del mismo, y ofrecía una capa de privacidad añadida (realmente son ellos los propietarios del dominio, pero te dejan usarlo como si fuera tuyo, aumentando el anonimato y la seguridad). Los precios también eran razonables (y puedes pagar con criptomonedas). Los dominios tienen que renovarse cada año, o de lo contrario expiraría tu derecho a usarlos.

2. Encontrar alojamiento

Tu sitio tendrá que residir en un ordenador físico en algún lugar, que servirá el contenido a los visitantes. No es necesario que pagues por un servicio externo, podrías ejecutar todo en un portátil en el salón de tu casa si quisieras; todo se resume en enlazar tu nuevo dominio a la dirección IP pública del equipo (mediante DNS) y abrir los puertos necesarios en tu router. Puedes pedirle a tu proveedor (ISP) que te asigne una IP pública estática (que no cambia con el tiempo), o usar un servicio automático de actualización DNS (más farragoso, y los cambios pueden tardar un rato en propagarse). Obviamente este método no rendirá muy bien si planeas tener millones de visitas al mes.

No me apetecía tener un equipo encendido en mi casa las 24 horas del día, así que preferí pagar por un servicio externo de hosting. Hay muchos disponibles, como Bluehost, DreamHost, GoDaddy, HostGator... Al final me decidí por Hostinger por las buenas reseñas, el alto tiempo en línea, y una interesante oferta que tenían en ese momento.

Debido a que mi registrador de dominio (Njalla) era diferente a mi alojamiento, tuve que crear una redirección del dominio dasalba.com a la IP de Hostinger (si pagas a la misma empresa por ambas cosas es automático). Para esto, añadí un par de entradas tipo A (address, "dirección") para "@" (la raíz) y "www" apuntando a la misma (gracias a esto, los usuarios no tienen que escribir la URL completa para llegar a mi web).

3. Elegir un WCMS

Un sistema de gestión de contenidos (CMS, por Content Management System en inglés) web es un software que te ayudará a crear, subir y mantener tu sitio web. Aporta los cimientos sobre los cuales puedes construir todo, así como la interfaz para gestionarlo. Pueden llegar a ser bastante complejos, sobre todo si quieres tener contenido dinámico, soportar muchas visitas, tener una tienda digital, interacción entre usuarios como un foro... Por otra parte, los hay minimalistas que te permiten diseñar las páginas escribiendo con sintaxis tipo Markdown que luego será convertida en HTML. Qué demonios, si hasta puedes hacerlo a pelo en un editor de texto si te decantas por una web estática y de aspecto clásico (mira por ejemplo las páginas de Rodrigo Copetti y de Fabien Sanglard, dos de mis frikis favoritos).

Hay muchos análisis y comparativas de CMS por ahí, pero para reducirlo todo a las tres opciones de código abierto más comunes:

• WordPress seguramente sea la plataforma más conocida, y la que impulsa más del 20 % de la red global. Tiene una masiva comunidad de usuarios y existen infinitas plantillas y extensiones de fácil instalación. Además de esto, su principal ventaja es que es muy fácil de usar (pero esto es un arma de doble filo).
• Joomla también es una aplicación muy popular, con un buen porcentaje del "mercado". Y aunque no es tan a prueba de tontos como WordPress, también posee un directorio de extensiones bien poblado, y un panel de gestión muy majo. Aprender PHP no es necesario, ni siquiera para webs avanzadas, pero con él podrás implementar básicamente cualquier cosa.
• Drupal es el tercero en discordia. Tiene una interfaz de programación (API) muy potente para desarrolladores, pero a su vez ofrece igualmente una instalación básica (si bien austera) para echar a rodar una página sencilla. Su grupo de usuarios es más pequeño que los dos anteriores, pero no te confundas, no hablamos de algo minoritario. Tiene muchos módulos y temas disponibles.

Tras investigar y deliberar con calma, elegí Joomla. Es un buen término medio, pero la característica que ayudó a "venderlo" fue su potente capacidad multilingüe. Ofrecer tu contenido en múltiples idiomas puede ser un poco complicado en WordPress, pero Joomla lo admite de forma nativa y el implementarlo es muy directo, como puedes verificar pulsando en la bandera inglesa que hay arriba del todo.

El resto del artículo explicará cómo creé esta web con Joomla, pero los conceptos generales son los mismos para otras opciones.

4. Instalarlo todo

4.1 Conjunto de soluciones software

Así que ya te has decidido por el CMS que quieres. Es la hora de preparar una máquina que pueda ejecutarlo. Cosas que vas a necesitar:

1. El hardware físico. Puede ser tu ordenador de sobremesa, o un host virtual en una máquina compartida propiedad de una empresa (una máquina dedicada tendrá mejor rendimiento, pero es más cara; innecesario para una web personal). En caso de lo segundo te enviarán las credenciales para acceder a una interfaz web de gestión del mismo.
2. Un sistema operativo (SO). Dicen que el 96 % de los servidores a nivel mundial usan Linux. Habrá motivos de peso para ello: es rápido, estable, seguro y... gratis.
3. El servidor web en sí. Es un programa que permanecerá a la escucha de peticiones de clientes (HTTP y HTTPS) y enviará el contenido en respuesta. Es vital que uses software mil veces probado que no tenga errores ni vulnerabilidades (conocidos).
4. Una base de datos para almacenar eficientemente las tablas con los usuarios, contraseñas, configuración, artículos, metadatos... Debería ser muy segura y permitir hacer copias de seguridad fácilmente.
5. Para la mayor parte de CMS existentes (como Joomla), una implementación del lenguaje interpretado PHP. Es con lo que se "programan" las páginas; cuando este código se ejecute en el servidor web, el contenido como tal se creará dinámicamente y se enviará al usuario. También es recomendable instalar una herramienta de administración como phpMyAdmin.

Si pagaste por alojamiento externo, tengo buenas noticias: ya estás cubierto. La máquina virtual (o física) que te han facilitado ya viene con todas esas cosas preinstaladas y funcionando, no hay que toquetear la configuración. Cualquier otra cosa que necesites la podrás activar en su panel de control con un par de clics.

De lo contrario, estos requisitos se pueden cumplir instalando lo que se conoce como un conjunto o paquete de software LAMP (sistema operativo Linux, servidor HTTP Apache, base de datos MySQL/Maria DB y PHP). Consulta el manual o wiki de tu distribución de Linux para instrucciones de cómo hacerlo. Cuando lo tengas, y antes de continuar, asegúrate de que todo está funcionando bien y de que puedes ver la página por defecto de Apache (pone un mensaje "It works!", "¡Funciona!" en inglés). Si has instalado phpMyAdmin, mira también que puedas acceder a su panel, mediante la dirección tudominio/phpmyadmin).

Joomla tiene una lista de requisitos que tanto Apache como PHP deben cumplir para poder funcionar, o activar cierta funcionalidad. No te olvides de habilitar esos módulos y de asignarle valores a las variables adecuadas. Si no tienes ni pajolera idea de cómo hacerlo, puedes leer por ejemplo esta wiki (es de la distribución Arch Linux, pero sería lo mismo para cualquier variante de Linux). Está en inglés, si eso es un problema, busca un tutorial en castellano.

4.2 Joomla CMS

Los servicios de hosting tienen colecciones de paquetes de software listas para activar, que harán todo el trabajo por ti. Hostinger, por ejemplo, te permite instalar WordPress o Joomla simplemente seleccionándolos y diciendo "sí". Pero yo quería hacerlo a mano, y no pienses que hace falta un doctorado: todo lo que necesitas es descargar la última versión, subirla a tu servidor usando el gestos de archivos (File Manager) de Hostinger, y descomprimirla en la ruta adecuada (en el ordenador de tu casa sería por ejemplo /srv/http/). Puede que tengas que arreglar los permisos: los archivos deberían tener 644, los directorios 755 y configuration.php, 444 (sólo lectura). ¡Fácil!

Joomla necesita una base de datos donde guardar todo. El CMS creará las tablas por ti, pero la base de datos en sí la tienes que aportar tú. Puedes hacerla con el panel de control de tu alojamiento, o usando phpMyAdmin. También tienes que crear un usuario y ponerle una contraseña fuerte (en la base de datos, no en tu SO). Concédele los permisos adecuados tal y como explica el enlace anterior.

Para arrancar el instalador, basta con navegar a tu dominio mediante el nombre o la IP ("localhost" o "127.0.0.1" si estás en tu equipo local). Joomla te dará la bienvenida al proceso de instalación, y ya sólo es cuestión de ir siguiendo las instrucciones de cada pantalla, rellenando todos los campos. Hay disponible un tutorial para guiarte, pero no hace falta para nada, lo juro. Está todo automatizado. ¡Pero no te olvides de anotar el nombre de usuario y la base de datos, y la contraseña!

Si te sale algún error, búscalo en Google, pero casi seguramente pertenecerá a una de estas categorías:

• Apache o PHP tienen una configuración incorrecta (/etc/httpd/conf/httpd.conf y /etc/php/php.ini).
• Apache o PHP no tienen habilitados los módulos necesarios.
• El paquete fue descomprimido en la ruta equivocada.
• Los archivos o directorios no tienen los permisos adecuados.

Tras el último paso, serás obsequiado con la visión de la interfaz de administración (o panel principal), que debería tener más o menos esta pinta (yo tengo algunas extensiones instaladas):

Podrás llegar hasta ella en cualquier momento navegando a tudominio/administrator.

4.3 Gantry Framework

La página por defecto (puedes instalar contenido de muestra para probarla) parece un poquito sosa. Demasiado años 90. Sí, Joomla tiene muchos temas (aquí llamados "plantillas") disponibles (gratis o de pago), y puedes crear la tuya propia. Pero lleva tiempo (o cuesta dinero) el hacerlo bien.

Por suerte, hay una alternativa magnífica: Gantry. Se puede instalar como una extensión de Joomla (también es compatible con WordPress y Grav) y proporciona una interfaz moderna con la que es muy fácil crear y editar temas, diseños y estilos, con un modo de trabajo de "arrastrar y soltar" y "partículas" (elementos de la página) que usan un sistema de herencia para configurar sus propiedades. En conjunto, todo esto valdría un montón de dinero, ¿y sabes qué? ¡Es gratis! Una locura. Diseñar un sitio atractivo será cuestión de horas.

Para instalarlo, tienes que descargar dos paquetes: el núcleo de Gantry mismo, y un tema. Hay un par de temas gratis disponibles: Helium (más complejo) y Hydrogen (más simple y despejado). Ambos son bonitos. Para probar el aspecto de Helium tienes una web de demostración oficial.

4.4 Otros

Hacer una copia de seguridad de tu sitio manualmente con SQL y FTP es factible, pero tedioso y difícil. Es mucho mejor instalar una extensión como la muy popular Akeeba Backup. No hace falta pagar por la versión Professional.

Y esto es completamente opcional, pero si pretendes tener compatibilidad con HTTPS, puedes instalar un certificado SSL gratuito de Let's Encrypt (Hostinger ya incluye ZeroSSL sin coste adicional, y no hay que configurarlo).

5. Configuración

La parte intimidante ya ha concluido. Ahora viene la cansina: personalizar todo acorde a tus necesidades. No escatimes tiempo: tu web podría estar online años y tienes que estar totalmente satisfecho con ella. Es tu carta de presentación.

Empieza por entrar en la Configuración global y cambiarla como sea preciso (hay un atajo en el panel, pero también puedes pulsar en "Sistema" en el menú desplegable de la izquierda). Ejemplos de cosas que puedes hacer (no sigas la lista a ciegas, piensa en lo que te hace falta):

• En "Sitio->Sitio":
  • Rellena el "Nombre del sitio".
  • Activa "Sitio fuera de línea" (querrás hacer esto cada vez que tu web esté "en construcción", evitará que se navegue pero la mantendrá online), y rellena el mensaje que aparecerá (por ejemplo al mensaje por defecto del lenguaje activo). Guarda, y desactiva el modo offline (si quieres).
• En "Sitio->Metadatos", rellena la "Metadescripción del sitio" (~150 caracteres) y los "Derechos del contenido".
• En "Sitio->Configuración SEO":
  • Activa "URLs amigables".
  • Activa "Alias unicode".
  • Elige un valor para "Nombre del sitio en el título de las páginas" (por ejemplo "Después").
• En "Servidor->Servidor":
  • Activa la "Compresión 'Gzip' de páginas". Esto disminuirá los tiempos de carga.
  • Cambia "Informe de errores" a "Nada". ¡Cuanta menos información des, mejor!
  • Cambia "Forzar HTTPS" a "Todo el sitio" (si tienes un certificado válido).
• En la configuración del componente de Búsqueda inteligente (está en otra categoría, mira el listado de componentes a la izquierda), configura lo que quieras. Joomla tiene un sistema de búsqueda nativo muy potente que indizará tu sitio y mostrará un campo de búsqueda.

5.1 Soporte multilingüe

¡La funcionalidad más interesante de Joomla! Sólo hay que configurarlo una vez y los resultados merecen la pena. Lo malo es que después tendrás que crear tantos menús, categorías y artículos como idiomas tengas (y este es el motivo por el cual a veces tardo tanto en subir contenido: trabajo por duplicado).

Hay un tutorial paso a paso muy completo en la documentación oficial del CMS, y otro hecho por los desarrolladores de Gantry. Hablan prácticamente de lo mismo:

• https://docs.joomla.org/J3.x:Setup_a_Multilingual_Site/es
• https://docs.gantry.org/gantry5/tutorials/multilingual-site

El resumen de lo que hace falta es este: 1) instalar y configurar los idiomas que quieras (tanto para contenidos como de administración), 2) habilitar dos plugins, 3) crear y publicar contenido traducido para cada lenguaje, 4) crear y publicar menús para cada idioma (y marcar uno como principal o de inicio), y 5) añadir un widget para cambiar el idioma (esa cosa con las banderas de países).

En el panel principal, en la barra superior verás cuatro botones grandes, uno de ellos pone "Estado de parámetros multiidioma" (ya te dije que esta es una característica muy importante de Joomla). Haz clic en él para obtener una evaluación al instante de si todo está correctamente implementado:

Y ahora tenemos que hablar de las asociaciones multiidioma. ¿Qué son? Pues simple: es una forma de decirle a Joomla cómo contenido en un idioma se relaciona con contenido en otro distinto. "Esta es la versión en inglés de este artículo en español; ambas son lo mismo pero en distintos idiomas".  El CMS hará el resto y mostrará uno u otro en función del lenguaje activo. Es automático.

• https://docs.joomla.org/J3.x:Multilingual_Associations
• https://docs.joomla.org/Help4.x:Multilingual_Associations/es

En el menú de la izquierda, ve a "Componentes->Asociaciones multiidioma" para verlas y editarlas, organizadas por tipo de contenido:

5.2 Reescritura de URL

La reescritura de URL (URL rewriting) es una técnica del servidor que permite mostrar al usuario direcciones "limpias" y fáciles de leer, en lugar de galimatías informático, sin romper el sistema de enlaces. Esto mejora el posicionamiento en buscadores (search engine optimization, SEO) y por lo tanto la visibilidad de nuestra web. Nos permite tener "www.dasalba.com/es/criticas/juegos/doom" en vez de "www.dasalba.com/index.php?q=4358395" o lo que sea.

Instrucciones para ponerlo:

1. En "Configuración global->Configuración SEO", activa "Usar la reescritura de URLs".
2. En la carpeta raíz de Joomla, renombra el archivo htaccess.txt como .htaccess para habilitar su uso (es un archivo preconfigurado del CMS).
3. En la configuración de Apache (sólo para tu sistema local, Hostinger ya lo tiene):
   • Descomenta la línea LoadModule rewrite_module modules/mod_rewrite.so
   • En DocumentRoot "/srv/http", establece AllowOverride All

Algo opcional, pero recomendado, es redirigir tu dominio base al subdominio www. (esto ya lo habíamos hecho antes, pero activar la reescritura de URL lo cambió):

https://www.hostinger.com/es/tutoriales/como-redirigir-una-url-sin-www-a-www

5.3 Archivos y multimedia

Por defecto, todos los archivos que subas se guardarán en la carpeta images/ de tu instalación de Joomla. Opino que es mejor tenerlo todo organizado y diferenciar entre multimedia y documentos como tal. Para conseguirlo, configura el gestor Multimedia (en el menú de la izquierda vete a "Contenido->Multimedia" y luego haz clic en el botón de "Opciones"), y establece la "Ruta al directorio de archivos" (yo elegí files/). Además, configura un plugin llamado "Sistema de archivos - Local" (vete a "Sistema->Gestionar->Plugins") y añade ese directorio de subida. Puede que tengas que usar tu gestor de archivos para crear dicha carpeta con los permisos adecuados.

Si usas Gantry, hay una cosa más que tenemos que cambiar ahora. En el panel principal, hay varios accesos rápidos a secciones. Uno de ellos pone "Gantry 5 Themes" (temas de Gantry 5). Púlsalo y después dale a "Configure" (configurar) en tu tema (theme) activo.

Como alternativa, también podrías elegir "Componentes->Gantry 5 Themes->Default Theme->Configure" (configurar tema por defecto de Gantry 5) en el menú de la izquierda.

Ahora, vete a "Extras->Platform Settings->System – Gantry 5" (configuración de la plataforma, sistema) y activa la opción "Use Joomla Images Folder" (utilizar carpeta de imágenes de Joomla).

Esto obligará a Gantry a respetar la ubicación de archivos de Joomla en vez de usar la suya propia, para una mejor integración.

Todas las extensiones de archivo permitidas deben declararse previamente en el gestor Multimedia, tanto en el listado general de "Extensiones permitidas" como en los de Imagen, Audio, Vídeo y Documentos. Además, los "Tipos de MIME permitidos" también deben rellenarse. Aquí tienes algunos de los que añadí a mi web:

• .epub (application/epub+zip)
• .svg (image/svg+xml)
• .tex (text/x-tex)
• .h y .c (text/x-c)
• .scm (carece de MIME particular)

Algunos tipos de fichero serán bloqueados igualmente por motivos de seguridad, como los scripts de Python (.py). Tendrás que subirlos a mano usando tu gestor de archivos.

Es recomendable subir imágenes en formato WebP, no PNG ni JPEG, de ser posible. Ese formato es más eficiente y fue diseñado específicamente para la web. Los tamaños de archivo deberían ser más pequeños (aunque no siempre).

Para colgar imágenes SVG (gráficos vectoriales), tienes que "sanear" los archivos o de lo contrario serán bloqueados (mira la documentación de Joomla). En esta página puedes hacerlo gratis:

https://iconly.io/tools/svg-cleaner

5.4 Caché y rendimiento

La memoria caché puede acelerar el proceso de carga de tu sitio, almacenando versiones pre-renderizadas de las páginas que serán servidas cuando haga falta, pero activarla es un asunto delicado. Hay varios tipos de caché y muchas opciones que pueden mejorar o empeorar (o incluso cargarse) tu web. No dejes de leer la documentación al respecto y piensa lo que necesitas. Cuando más estático (sin cambios frecuentes, ni versiones distintas para cada usuario) sea tu sitio, más conservadora podrá ser la caché.

Un ejemplo de cómo activarla:

• En "Sistema->Gestionar->Extensiones", activa el plugin "Sistema - Caché". Luego, en "Sistema->Gestionar->Plugins", configúralo y activa "Usar la caché del navegador" (esto permitirá que tus visitantes almacenen una versión local de la página).
• En "Configuración global->Sistema", pon "Caché del sistema" a "Activado - Caché progresiva" (o cualquier otra). Establece la "Duración de la caché (minutos)" a lo que quieras. Para una web completamente estática, 1440 (24 horas) debería ser un buen valor para minimizar la carga del servidor. En cualquier caso también podrás borrar manualmente la caché después de publicar una actualización para que se aplique al instante ("Sistema->Mantenimiento->Limpiar caché").

5.5 Opciones de contenidos

Las vistas por defecto de Joomla mostrarán una lista de propiedades para los artículos y categorías, como el nombre del autor, las fechas (creado, publicado, destacado, modificado...), el contador de visitas, descripciones... Si quieres, es posible mostrarlas u ocultarlas elemento a elemento con granularidad, pero también se puede establecer una configuración global por defecto que se aplicará a todo contenido que no diga otra cosa.

Vete a "Contenido->Artículos" y pulsa en el botón de "Opciones" (o vete a "Configuración global->Componente->Artículos"), y elige qué datos adicionales quieres mostrar u ocultar. Si no estás seguro de lo que hace alguna opción, abre otra pestaña del navegador con un artículo de ejemplo y recarga la página tras hacer un cambio (y guardar).

Adicionalmente, puedes habilitar y configurar un plugin llamado "Sistema - Schema.org" para inyectar datos JSON+LD sobre ti en el campo de cabecera de todos tus artículos. En el mundo actual, es muy importante que todo tenga metadatos que puedan ser procesados por rastreadores web ("arañas") y/o las IA. Puede subir tu ránking.

6. Creación de contenido

¡Por fin! Hora de llenar tu web de incoherencias inútiles que nunca leerá nadie. Crea las Categorías, Artículos, Grupos de campos, Campos, Menús y Etiquetas (te recomiendo encarecidamente el diseñarlo todo primero, aunque sea en un archivo de texto; además, si tienes varios idiomas, planifica las asociaciones entre ellos).

Las Categorías, Artículos, Menús y Etiquetas tienen todas metadatos opcionales (una metadescripción de 150-160 caracteres o menos, y palabras clave), que se pueden rellenar en la pestaña "Publicación" que hay abierta cuando editas un elemento de esos. Para mejorar la accesibilidad y el posicionamiento, nunca los dejes en blanco. Existen extensiones que te ofrecen el crearlos automáticamente mediante una IA que analiza el contenido, pero eso no me gusta. ¡Nadie conoce lo que escribes mejor que tú!

En sus listados, varios elementos tienen una columna de "Estado" que dirá si están o no publicados. El contenido no publicado es invisible para los usuarios y no se podrá acceder. Puedes cambiar esto cuando quieras. Gracias a ello, podrás preparar contenido con calma para colgarlo más tarde, sin peligro de que tu web parezca un desastre.

Además, la mayor parte de los contenidos tienen un alias. Esto es el nombre que aparecerá en la URL, así que no puede tener espacios. Como convención, usa tan sólo letras minúsculas, números y guiones, evitando mayúsculas y el guion bajo salvo que sea necesario. No incluyas caracteres especiales como acentos. Considera el eliminar artículos (el, un...) para acortarlo. Joomla generará automáticamente un "Alias" a partir del "Título" si lo dejas en blanco, pero se puede cambiar.

Las Categorías, Menús y Etiquetas tienen un botón de "Reconstruir" que puede arreglar problemas de orden u estructura en la base de datos, recalculando todo de cero. Limpiar la caché NO tiene los mismos resultados, ni tampoco Joomla programa esas operaciones para ser hechas regularmente. Úsalas sólo si detectas problemas, pero queda advertido de que esto puede romper tu ordenación manual (no tiene por qué, pero considéralo una posibilidad). Siempre, siempre, siempre haz copia de seguridad.

6.1 Categorías

Te permiten organizar tu contenido de forma jerárquica conforme a unos criterios. Empleando la analogía de los artículos como archivos, las categorías equivaldrían a carpetas. En la tabla-listado de categorías, puedes ordenarlas arrastrando con el ratón. No hay mucho más que decir sobre ellas, excepto que pueden tener una descripción de texto enriquecido (como cualquier artículo). Esto te puede ahorrar el tener que escribir un artículo ex profeso para introducirlas, ya que las descripciones se pueden mostrar en las vistas de Joomla.

6.2 Artículos

Los artículos son los elementos básicos que usarás para construir tu web, piezas de información multipropósito. Son mucho más que publicaciones tipo blog: son capaces de almacenar propiedades y datos avanzados que puedes renderizar a tu gusto, o procesar mediante plugins. Puedes destacar determinados artículos para incluirlos en un listado especial o para otros propósitos.

Los artículos se pueden reordenar, pero primero se debe hacer clic en la cabecera de la columna adecuada (la segunda, a la derecha de la que tiene casillas de verificación). Pero esto no valdrá de mucho, ya que este orden sólo funciona dentro de su Categoría. Una solución que encontré para esto es destacarlos todos, y luego en "Contenido->Mostrar todos los artículos destacados" ordenarlos a mano como te parezca. Esto me fue útil para mi página de inicio, que muestra los artículos más recientes primero (no los podía ordenar por fecha de publicación o creación porque a veces las he usado de forma no ortodoxa).

Algunos trucos y consejos para artículos:

• Añade un salto de "Leer más" a los artículos que tengan más de uno o dos párrafos. En las previsualizaciones, sólo la parte antes del salto se incluirá. Para artículos muy largos, inserta saltos de página (opcional).
• Selecciona la categoría, el idioma y las etiquetas (sólo la primera es obligatoria).
• Puedes añadir una Imagen de introducción (que se verá en la previsualización) y una Imagen para mostrar un artículo al completo (aparecerá antes del texto). Yo las uso para las carátulas de juegos en mis reseñas.
• No te olvides de rellenar los metadatos (descripción y palabras clave) en la pestaña "Publicación".
• Para cada imagen de tu artículo, establece una descripción alternativa (125 caracteres o menos) y activa que se cargue de forma lenta (lazy loading).
• Después de guardar el artículo por primera vez, comprueba el alias (URL) que se le ha asignado y cámbialo si hace falta.
• El editor de texto enriquecido por defecto tiene muchas opciones, pero a veces necesitas hacer algo más avanzado. Puedes editar el código HTML puro del artículo pulsando en el botón de "Alternar editor" que aparece en la parte inferior. Nota: si modificas un elemento y luego haces más cambios mediante la interfaz gráfica del editor, perderás estas modificaciones avanzadas (por ejemplo, si cambias la clase de una imagen <img> y luego la editas de nuevo).

6.3 Menús

Esto es un poco complejo de entender. En los programas o webs que usas a diario, los menús son una colección jerárquica de enlaces que ejecutan una acción o conducen a una página. Puedes prescindir de ellos. En Joomla, no sólo son necesarios, sino que influyen en cómo el enrutador interno (que resuelve las peticiones de URL) trabaja. Sin un menú, tu contenido será inaccesible, o como mínimo no tendrá una dirección fácil de leer. Puedes asignarle un menú oculto para solucionar esto.

Para esconder una entrada de menú, despublícala.

Si soportas varios idiomas, unos menús incorrectamente asociados o sin "pareja" pueden provocar errores al cambiar de uno a otro.

6.4 Grupos de campos y Campos

Otra característica muy potente. Los Campos son datos adicionales que se pueden guardar en los artículos. Los puedes crear y nombrar libremente, y asignarles un tipo de los muchos existentes (texto simple, número, fecha y hora, imagen, casilla de verificación, lista, archivo...). Se pueden organizar en Grupos de campos (categorías de campos), que a su vez pueden ser asociados a determinadas categorías de artículos. Cuando edites uno de estos artículos, una nueva pestaña aparecerá con unos campos y controles para darles valor. Otra pestaña adicional se creará para editar campos que no tengan un grupo asignado. Los tipos de campo son permanentes una vez que se crean (no se pueden cambiar luego). ¡Ojo con los errores!

Yo uso campos para mis reseñas de juegos y mods, con el fin de guardar datos tales como el desarrollador, género, plataforma, puntuación... Desarrollé un plugin propio para renderizar estos en los artículos. Básicamente, los puedes usar como base de datos. Por supuesto también puedes controlar su visibilidad: para cada uno, en su pestaña "Opciones", cambia "Visualización automática" a "No mostrar automáticamente" y dejarán de aparecer en el artículo (no existe ningún modo de ocultarlos todos permanentemente).

6.5 Etiquetas

El sistema de Etiquetas es un componente de Joomla. Se las puedes asignar a tus artículos para clasificarlos de otra forma adicional, y que así cuando un usuario pulse en una etiqueta, vea la lista completa de artículos marcados con ella. Puedes etiquetar tanto como quieras, pero intenta racionarlas para no embarullar la pantalla. Aquí tienes un tutorial (en inglés):

https://docs.joomla.org/J4.x:How_To_Use_Content_Tags_in_Joomla

Por defecto las etiquetas aparecen ordenadas por su número de ID, por lo que si más adelante creas etiquetas nuevas, podrían no quedar ordenadas. Para arreglar esto puedes crear una modificación de plantilla (template override) del archivo tags.php (más detalles en el apartado 7.2).

6.6 Gantry

¿Ya tienes ganas de personalizar el aspecto visual de tu web? Empieza por leerte toda la documentación de Gantry (sí, está en inglés, no dejes que eso te detenga). No seas vago y míralo todo por orden. Verás que es muy intuitivo de usar. Por encima de todo tienes que entender cómo funcionan los Outlines, Particles, Atoms y Styles:

• Las Outlines (bocetos) son como plantillas que puedes asignar a páginas o categorías concretas de tu web. Determinan la disposición de elementos. Se componen de secciones que son renderizadas verticalmente, de arriba a abajo; no tienes por que usar todas (se pueden quedar vacías). Puedes insertar y redimensionar contenido (partículas) dentro de ellas, libremente.
• Las Particles (partículas) son widgets (como módulos o elementos), más o menos complejos. Un logo, una presentación de imágenes, un botón de "volver arriba", enlaces a redes sociales, un aviso legal, un separador para ocupar espacio; todos estos son partículas. Hay una lista de la que puedes elegirlos, arrastrando y soltando en cualquiera de las secciones de la outline.
• Los Atoms (átomos) son partículas que tienen un comportamiento pero no presencia visual (no se renderizan). Por ejemplo, un script de código.
• Los Styles (estilos) son conjuntos predeterminados de colores, tipografías, espacios... que pueden cambiar al instante la apariencia de tu web.

Para abrir el panel de configuración de Gantry, sigue las instrucciones del apartado 5.3 (es muy fácil, la manera más rápida es usando el atajo del panel principal de Joomla). Pulsa en el botón "Configure" del tema activo. El editor de outlines se cargará, mostrando la "Base Outline" por defecto. Esta es una outline especial que no se puede eliminar, y el único lugar donde se puede cambiar la configuración global del sitio o global page settings (cabecera HTML personalizada, favicono, fuente...) y las opciones por defecto de las partículas o particle defaults (las propiedades comunes que todo tipo de partícula tendrá hasta que las cambies).

Las outlines y partículas tienen un sistema de herencia muy útil. Puedes decir que copien o hereden las propiedades de otra como referencia (parent); en este segundo caso imitarán cualquier cambio que hagas posteriormente en la referencia. Puedes ejercer un fino control sobre esto, sobreescribiendo los valores de propiedades concretas y dejando el resto intactas.

Aquí tienes todo lo que he aprendido de Gantry que te puede ser útil:

• Si por algún motivo decides volver a la plantilla por defecto de Joomla (Cassiopeia), ve a "Sistema->Plantillas del sitio".
• Para poder borrar una outline, no puede tener ninguna asignación (assignment). La Base Outline por defecto no se puede eliminar, ni tampoco la última propia que quede.
• Seguramente necesitarás una outline por separado para cada idioma.
• Para establecer el logo por defecto, el copyright, información de marca, redes sociales, etc, vete a la Base Outline y luego "Particle Defaults".
• Para cambiar el favicono, las meta etiquetas (meta tags, como nombre, descripción, redes...), etc, vete a la Base Outline y luego "Page Settings".
• Para mostrar u ocultar contenido dependiendo del dispositivo (versión móvil, tamaño de pantalla...) usa las Utility Classes. 
  
  • Consejo: en Firefox, CTRL+SHIFT+M abrirá el "modo móvil" para pruebas.
  • En las outlines, la sección "Offcanvas" (fuera del lienzo) contiene el menú para versión móvil.
• Para alinear una partícula a la izquierda o derecha, en sus propiedades, en la pestaña "Block" (bloque), elige una "Variation" (variante).
• ¡Que no se te olvide personalizar las outlines Offline y Error también! Al igual que la Base Outline, son outlines del sistema que no se pueden quitar. La primera es la que aparece cuando activas "Sitio fuera de línea" en la Configuración global, la segunda es la de "404 - no encontrado".
• Gantry te permite editar los menús (incluso puedes ponerles iconos a las categorías). Esto no altera realmente los menús de Joomla, es sólo una capa de personalización que se les aplica por encima. Estupendo.
• En el menú "Extras", puedes cambiar entre los modos "Production" (producción) y "Development" (desarrollo). Este último recompilará automáticamente los CSS (los archivos que definen el aspecto visual de tu web, manteniéndolo separado del contenido) cuando hagas cambios.

Para cambios de estilo avanzados, puedes personalizar el aspecto y funcionamiento de tu sitio con SCSS (un lenguaje de script que será compilado a código CSS). Sigue este tutorial (en inglés):

https://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet

Para crear un archivo .scss propio, ve a "Sistema->Plantillas del sitio->G5 helium" (o tu plantilla), y muévete a la carpeta custom/scss/. Por ejemplo, yo tengo un enorme archivo de más de 700 líneas para controlar al detalle cada elemento. ¡Me llevó infinidad de pruebas, sobre todo las tablas! La mayoría de navegadores poseen herramientas de desarrollo web muy útiles. Prueba a hacer clic derecho sobre cualquier elemento de la página y luego en "Inspeccionar".

¿Qué, ya te has decidido a darle un lavado de cara a tu web con SCSS? Pues entonces asegúrate de peinar cada rincón para encontrar todos los elementos que haga falta cambiar. Hay algunos que se te podrían pasar por alto si no, como la página de resultados de búsqueda, los controles de filtro avanzado... Confía en mí, cada vez que pensaba que ya había terminado, a la semana siguiente volvía a encontrar otra cosa sin hacer.

Ah, y también deberías realizar una inspección completa tras cada nuevo cambio, ya que algo podría haberse roto en alguna parte, donde menos te lo esperes. Al escribir SCSS, cuando más específicos sean los selectores (las instrucciones que establecen a qué elementos coincidentes se aplicará el estilo), mejor. ¿Pero cuántas clases de botón puede tener Joomla?

Cambiar el estilo de tu web requerirá que el modo producción esté desactivado en Gantry. De lo contrario, tendrás que recompilar el CSS manualmente (con la opción "Clear Cache" del menú "Extras" de Gantry). ¡Si tras hacer cambios no ves el resultado, es por culpa de esto!

7. Avanzado

7.1 Extensiones

El potencial de Joomla se puede ampliar con el uso de Componentes, Módulos y Plugins. Pueden cambiar no sólo el comportamiento, pero también el aspecto de tu sitio, mucho más de lo que se podría con un tema nuevo. Saber programar en PHP es recomendable, pero no necesario.

• Los Componentes son el tipo de extensión más contundente. Piensa en ellos como pequeños trozos de software que añaden alguna funcionalidad. La mayoría son añadidos al panel de administración, invisibles para el visitante, pero sí se pueden notar sus efectos. Ejemplos serían Gantry, Akeeba Backup...
• Los Módulos son como widgets (mini aplicaciones) que se pueden colocar en las páginas, en huecos llamados "posiciones", definidos por la plantilla. Una selección de idioma, un campo de búsqueda...
• Los Plugin no tienen un componente visual, pero se pueden gestionar con un formulario en la configuración del sistema. Son colecciones de código más o menos complejo que se puede programar para ser ejecutado ante determinados eventos. Por ejemplo, puedes escribir un plugin que antes de renderizar un artículo, lo procese y aplique algún cambio al formato.

Puedes encontrar cualquier cosa que necesites en el Joomla Extensions Directory (JED, directorio de extensiones de Joomla). Instalar una es tan sencillo como ir a "Sistema->Extensiones" y pulsar en el botón de "Instalar extensiones". Arrastra y suelta el archivo .zip que descargaste, o usa el diálogo de selección para apuntar al mismo. ¡Hecho!

7.2 Modificaciones de plantilla

Las template overrides son un concepto análogo al usado en programación orientada a objetos, con el que puedes modificar el comportamiento de Joomla cambiando el código PHP de ciertas partes. Esto se hace para cada plantilla, sobreescribiendo archivos enteros (para ser exactos, editas una copia del mismo, aunque sólo necesites cambiar una línea), y ofrece gran flexibilidad. El CMS incluso te advertirá cuando una actualización oficial incluya una versión nueva del archivo modificado, para que puedas trasladar los cambios.

Para crear una modificación, vete a "Sistema->Plantillas del sitio" y selecciona el que estás usando (por ejemplo, "G5_helium" para Gantry). En la pestaña de "Crear modificaciones" elige qué aspecto del sitio te gustaría cambiar. Su conjunto completo de archivos se copiará a la carpeta html/ dentro de la plantilla. Vete ahí y haz clic el el archivo .php para abrirlo con la vista del editor, y empieza a programar. Puedes activar el ver el contenido del archivo original a la vez, o un resumen de las diferencias para comparar. Después de guardarlo, limpia la caché para ver el resultado.

Implementé un par de modificaciones para controlar cómo se visualizaban algunos listados. ¡Espero que los desarrolladores de Joomla tarden mucho en actualizar esos archivos!

7.3 Fragmentos de código

TinyMCE (el editor por defecto de Joomla) permite insertar muestras de código fuente, pero no tendrán resaltado de sintaxis. Para solucionarlo, instala la extensión PRISM y habilítala. Para aprender a usarla lee su documentación; puedes activar soporte para más lenguajes (TinyMCE sólo te deja escoger entre un puñado) y mostrar números de línea. Todo esto exigirá editar el código HTML para modificar las clases del elemento <code>.

7.4 Búsqueda inteligente

Hubo un tiempo en que si querías ofrecer una barra de búsqueda en tu web tenías que integrar Google. ¡Eso se acabó! Joomla viene de serie con un componente de búsquedas demasiado-bueno-para-ser-verdad, Smart Search (búsqueda inteligente). Al añadir su módulo de campo de búsqueda en cualquier posición, tus visitantes podrán rastrear por todo el contenido.

Para gestionarlo, entra en "Componentes->Búsqueda inteligente->Índice". Puedes pulsar el botón "Índice" para lanzar una reconstrucción del mismo (no hace falta, se realiza de forma regular), o "Mantenimiento->Optimizar". Finalmente, el botón "Opciones" abre la configuración del componente. Puedes excluir contenidos concretos de ser indizados.

7.5 Scripting

Pocas cosas hay que no puedas conseguir programando en JavaScript. Puedes añadir un script propio a tu web gracias a Gantry: simplemente agrégalo como un átomo al final de la pestaña "Page Settings" de la Base Outline. Puedes hacer esto mismo para "inyectar" CSS. Tu código será públicamente accesible dado que irá incluido en la cabecera HTML, ¡advertido quedas!

Como ejemplo, este es el código que usé para darle un efecto de desplazamiento de paralaje al fondo:

const MULTIPLICADOR = -0.2; // Velocidad y dirección del desplazamiento.

window.addEventListener("scroll", function()
{
	requestAnimationFrame(function()
	{
		var desplazado = window.pageYOffset;
		var contenedor = document.getElementById("g-container-main");

		contenedor.style.backgroundPosition = "0 " + (desplazado * MULTIPLICADOR) + "px";
	});
});

... ¡y eso es todo! ¡Puf! Pensé que nunca vería el final. Confío en que te sea útil, y si te ha quedado alguna duda, no dudes en contactar conmigo.