FAQ
Preguntas Frecuentes
¿Tienes dudas sobre desarrollo web, diseño responsive o cómo funciona Joomla? Explora nuestro acordeón de preguntas frecuentes y aclara tus conceptos clave de forma sencilla, visual e interactiva.
PHP
Respuesta: Es el lenguaje que ejecuta Joomla en el servidor. Procesa peticiones, consulta la base de datos y construye el HTML que ve el usuario.
Ejemplo:
<?php echo "Hola Joomla"; ?>
Para saber más:
https://www.php.net/manual/es/intro-whatis.php
Respuesta: echo y print envían texto a la salida; return devuelve un valor desde una función y detiene su ejecución.
Ejemplo:
function saludar($n){ return "Hola $n"; } echo saludar("Joomla");
Enlaces:
https://www.php.net/manual/es/function.echo.php
https://www.php.net/manual/es/function.print.php
https://www.php.net/manual/es/functions.returning-values.php
Respuesta: Un array con claves nombradas (strings) en vez de índices numéricos. Muy útil para configurar opciones.
Ejemplo:
$cfg = ["titulo"=>"Mi Sitio","lang"=>"es-ES"];
echo $cfg["titulo"];
Enlaces:
https://www.php.net/manual/es/language.types.array.php
Respuesta: Son mensajes no fatales que avisan de algo potencialmente incorrecto (variables sin definir, índices inexistentes). No rompen el sitio, pero conviene corregirlos.
Ejemplo:
error_reporting(E_ALL);
ini_set('display_errors','0'); // en producción ocultar
Enlaces:
https://www.php.net/manual/es/function.error-reporting.php
Respuesta: Usa extensiones modernas (PDO/MySQLi) con consultas preparadas para evitar inyecciones.
Ejemplo (PDO):
$db=new PDO('mysql:host=localhost;dbname=joomla','u','p');
$st=$db->prepare('SELECT title FROM #__content WHERE id=?');
$st->execute([1]); echo $st->fetchColumn();
Enlaces:
https://www.php.net/manual/es/book.pdo.php
HTML
Respuesta: Es el lenguaje de marcado que el navegador interpreta. Joomla genera HTML dinámico; si el HTML es correcto, mejora SEO y accesibilidad.
Enlaces:
https://developer.mozilla.org/es/docs/Web/HTML
https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML
Respuesta: Dan significado al contenido y ayudan a buscadores y tecnologías asistivas.
Ejemplo:
<header>Logo</header>
<nav>Menú</nav>
<main>Contenido</main>
<footer>©</footer>
Enlaces:
https://developer.mozilla.org/es/docs/Glossary/Semantics
Respuesta: Texto alternativo para lectores de pantalla y cuando la imagen no carga; es clave para accesibilidad y SEO.
Ejemplo:
<img src="/logo.png" alt="Logo de la empresa">
Enlaces:
https://developer.mozilla.org/es/docs/Web/HTML/Element/img
Respuesta:
• Absoluto incluye protocolo y dominio (https://…),
• Relativo usa la ruta interna (/contacto).
En Joomla conviene rutas limpias relativas cuando sea posible.
Enlaces:
https://developer.mozilla.org/es/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL
https://developer.mozilla.org/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
Respuesta: Resumen de la página que puede aparecer en los resultados de búsqueda. Afecta CTR aunque no ranking directo.
Ejemplo:
<meta name="description" content="Servicios web en Joomla...">
Enlaces:
https://developer.mozilla.org/es/docs/Web/HTML/Element/meta/name
https://developers.google.com/search/docs/appearance/snippet?hl=es
CSS
Respuesta: Hojas de estilo que controlan la presentación (colores, tipografía, layout). Joomla y tu plantilla lo usan para el look & feel.
Enlaces:
https://developer.mozilla.org/es/docs/Web/CSS
Respuesta: Diseño que se adapta a móviles, tablets y escritorio usando media queries y layouts flexibles.
Ejemplo:
@media (max-width:768px){ .menu{display:block;} }
Enlaces:
https://developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Responsive_Design
ID (#)
El selector id se usa para aplicar estilos a un elemento HTML único dentro de una página.
-
Alcance: Único. Un
iddebe ser utilizado solo una vez en toda la página HTML. -
Sintaxis CSS: Se selecciona usando el símbolo de almohadilla o numeral (
#).-
Ejemplo CSS:
#principal
-
-
Sintaxis HTML: Se aplica con el atributo
id.-
Ejemplo HTML:
<div id="principal">...</div>
-
-
Propósito principal: Se usa para identificar la estructura principal de la página (como el encabezado, el pie de página, o una columna principal) o para ser usado como "ancla" (vínculos internos) y por JavaScript para acceder a ese elemento específico.
-
Especificidad: Tiene la máxima especificidad en CSS (más poder para sobrescribir estilos que una clase).
Class (.)
El selector class se usa para aplicar estilos a múltiples elementos HTML dentro de una página.
-
Alcance: Múltiple. Una
classpuede ser utilizada tantas veces como se quiera en la misma página. Un elemento también puede tener múltiples clases asignadas. -
Sintaxis CSS: Se selecciona usando un punto (
.).-
Ejemplo CSS:
.boton-azul
-
-
Sintaxis HTML: Se aplica con el atributo
class.-
Ejemplo HTML:
<button class="boton-azul">...</button>
-
-
Propósito principal: Se usa para aplicar estilos reutilizables a grupos de elementos con funciones o apariencias similares (por ejemplo, botones, tarjetas de producto, alertas, etc.).
-
Especificidad: Tiene una especificidad menor que el
id.
Enlaces:
https://developer.mozilla.org/es/docs/Web/CSS/Specificity
https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/id
https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/class
Respuesta: !important es una regla de CSS que se utiliza para anular la jerarquía normal de la cascada y la especificidad.
Cuando añades !important al final de una declaración de propiedad CSS (justo antes del punto y coma), esa declaración tiene la prioridad más alta de todas, incluso por encima de estilos que de otra manera serían más específicos (como los id o los estilos inline).
¿Qué es !important?
!important es un modificador de especificidad que se coloca en el valor de una propiedad CSS.
Ejemplo:
.boton {
color: blue; /* Este estilo es normal */
}
#menu-principal {
color: red !important; /* ¡Este estilo GANA la cascada! */
}
Incluso si el selector .boton se encuentra después de #menu-principal en la hoja de estilos y se aplica a un elemento con id="menu-principal", el color del texto será rojo debido a la regla !important.
¿Cuándo NO usar !important?
Generalmente, los desarrolladores web recomiendan evitar el uso de !important. El hecho de que anule la cascada normal rompe las reglas esperadas de CSS, lo que hace que el código sea mucho más difícil de entender, mantener y depurar.
NO debes usar !important en las siguientes situaciones:
En tu CSS principal o archivos de estilos base:
Si utilizas !important en el código CSS que escribes desde cero, estás obligando a que cualquier cambio futuro en esa propiedad también necesite usar !important, lo que genera una "guerra de especificidad" y hace que tu código sea inmanejable.
Para solucionar problemas de especificidad de forma perezosa:
Si un estilo no se aplica, la solución correcta es aumentar la especificidad usando selectores más específicos (ej: div.clase en lugar de .clase) o asegurándote de que los selectores están ordenados correctamente. Usar !important en este caso es una solución temporal y pobre.
Para anular estilos que pueden ser anulados de otra manera:
Si un estilo está siendo sobrescrito, simplemente coloca tu nueva regla CSS debajo de la regla original en el archivo, o utiliza un selector con mayor especificidad (por ejemplo, pasa de usar un selector de clase a usar dos clases o un selector de id).
¿Cuándo se podría usar !important?
Hay dos escenarios principales donde su uso es aceptable o incluso necesario:
Sobrescribir CSS de librerías o frameworks externos:
Cuando trabajas con librerías o frameworks de terceros (como Bootstrap o plugins de WordPress/Joomla) que tienen estilos muy específicos que no puedes editar directamente, !important es a veces la única forma de forzar una sobrescritura.
Clases de utilidad y control de estado (Debugging):
Se utiliza a veces en clases de utilidad específicas y únicas que tienen un propósito muy claro, como una clase para ocultar un elemento (.ocultar { display: none !important; }) o forzar un color temporalmente mientras se depura.
Enlaces:
https://developer.mozilla.org/es/docs/Web/CSS/Specificity#%C2%A1important
https://web.dev/learn/css/specificity/
https://css-tricks.com/when-using-important-is-the-right-choice/
Respuesta: ¡Optimizar el CSS en Joomla es crucial para la velocidad de carga y el posicionamiento SEO de tu sitio!
La clave es reducir el número de archivos CSS que el navegador tiene que solicitar y descargar, y también reducir el tamaño de esos archivos.
Aquí tienes los principales métodos y un ejemplo práctico.
Cómo Optimizar CSS en JoomlaLa optimización de CSS en Joomla se centra en dos técnicas principales, que se logran mejor mediante el uso de extensiones de rendimiento o plugins específicos:
1. Minificación (Minification): Es el proceso de eliminar caracteres innecesarios del código CSS, como espacios en blanco, saltos de línea y comentarios, sin cambiar su funcionalidad. Esto reduce el tamaño del archivo, haciendo que la descarga sea más rápida.
2. Combinación (Concatenation): Consiste en unir múltiples archivos CSS (de tu plantilla, de extensiones, etc.) en un solo archivo grande. Esto reduce la cantidad de solicitudes HTTP que el navegador debe hacer al servidor, acelerando la carga inicial de la página.
3. Compresión Gzip (Servidor): Asegúrate de que la compresión Gzip esté habilitada en la configuración global de Joomla (pestaña Sistema) y en tu servidor. Esto comprime los archivos CSS (y otros recursos) antes de enviarlos al navegador, lo que reduce drásticamente el tamaño de la transferencia.
4. Eliminar CSS Innecesario (Crítico): Evita usar demasiadas extensiones que carguen sus propios archivos CSS si no los utilizas. Si una extensión carga un archivo CSS muy grande y solo usas una pequeña parte, lo ideal es identificar el código necesario y moverlo a tu hoja de estilos principal, deshabilitando la carga del archivo original de la extensión.
💡 Ejemplo Práctico: Usando una Extensión
La forma más efectiva y sencilla de optimizar CSS en Joomla sin modificar archivos manualmente es usando una extensión popular como JCH Optimize o Speed Cache.
Supongamos que usas JCH Optimize:
1. Instalación: Instala y activa la extensión JCH Optimize desde el Gestor de Extensiones de Joomla.
2. Acceso a la Configuración: Ve a Extensiones $\rightarrow$ Plugins y busca JCH Optimize.
3. Configuración de Niveles (Modo Básico):
- En la pestaña Opciones Básicas, selecciona un Nivel de Optimización.
- Recomendación: Empieza con el nivel "Intermedio" o "Avanzado".
- Nivel Intermedio: Combina y minifica los archivos JavaScript y CSS.
4. Ajustes de CSS:
- Busca la sección Combine CSS and Javascript files.
- Combina CSS: Asegúrate de que esta opción esté activada (generalmente se activa con los niveles intermedios o avanzados).
- Minificar CSS: Esta opción también debe estar activada.
- Exclusión: Si después de guardar notas que algo se rompió en tu diseño (lo cual es común al combinar), usa la opción de excluir archivos CSS para dejar fuera del proceso los archivos problemáticos (ej: template.css o archivos de frameworks).
5. Resultado: Después de guardar, la extensión automáticamente detectará, minificará y combinará los archivos CSS en un solo enlace que se carga al inicio de tu página.
- Antes (Múltiples Solicitudes):
- main-template.css
- component-k2.css
- module-menu.css
- bootstrap.css
Después (Una Sola Solicitud):
- combined-minified-cache-file.css
Esto reduce drásticamente las solicitudes y el tiempo que el navegador pasa “bloqueado” esperando las hojas de estilo.
Enlaces:
Joomla!
Respuesta: Es la ruta canónica a un contenido/vista. Define URL, módulos visibles y metadatos asociados. Es la base de la navegación y el SEO en Joomla.
Enlaces:
https://docs.joomla.org/Menu_Item/es
Respuesta: Artículos = contenido; Categorías = organización; Módulos = bloques que acompañan (menus, banners, etc.). Menú decide qué se muestra.
Enlaces:
https://docs.joomla.org/Article_Manager/es
Respuesta: Es el tema visual del sitio. Controla layouts, posiciones de módulos y estilos.
Enlaces:
https://docs.joomla.org/J3.x:How_do_you_change_the_template_of_your_site%3F/es
Respuesta: Vacía caché de Joomla (Sistema → Limpiar caché), del optimizador (JCH, si usas) y de CDN (Cloudflare). Orden recomendado: Joomla → extensiones → CDN.
Enlaces:
https://docs.joomla.org/Cache/es
Respuesta: Controlan quién ve y quién puede hacer qué (grupos, niveles de acceso, acciones). Bien configuradas, evitan riesgos y errores editoriales.
Enlaces:
https://docs.joomla.org/Access_Control_List/es
https://docs.joomla.org/Access_Control_List/Understanding_ACL/es
https://docs.joomla.org/J3.x:Access_Control_List_Tutorial/es
Trucos Joomla!
Respuesta: Activa URLs amigables y reescritura en Configuración Global; ten un ítem de menú que apunte a cada vista importante; usa canónicas si hay duplicados.
Enlaces:
https://docs.joomla.org/Enabling_Search_Engine_Friendly_(SEF)_URLs/es
Respuesta: Define una por cada ítem de menú clave (180–220 caracteres), y en categorías/artículos importantes. Evita duplicadas; orienta a clic.
Enlaces:
https://docs.joomla.org/Metadata/es
https://developers.google.com/search/docs/appearance/snippet?hl=es
Respuesta: Usa módulos para bloques reutilizables/ligeros (menús, listas, banners). SPPB para maquetación de páginas específicas. No dupliques funciones.
Enlaces:
https://docs.joomla.org/Module/es
Respuesta: Activa minificación/combinar gradualmente, excluye scripts conflictivos, prueba por página, y purga cachés entre cambios.
Enlaces:
Respuesta: Asegura og:title, og:description y og:image por vista. Imagen mínima 1200×630, peso moderado. Verifica con depuradores.
Enlaces:
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
