Rutas relativas en PHP, ¿enlaces rotos e imágenes que no se muestran? [Solución]

Enlaces rotos

Contexto

Tengo una web modular para no ir repitiendo partes de HTML que son iguales en todas las páginas (entiéndase por ejemplo: cabecera, menú y pie de página).

En en el directorio raiz de la web (nuestro .com, .es, .net o lo que sea) todos estos módulos incluidos con PHP se ven correctamente con sus imágenes y en su estructura de carpetas.

Problema

Alojo una sección de la web en un subdirectorio para darle cierta independencia, aunque quiero sí o sí que alguno de esos módulos de la web general se repita también en ese subdirectorio. Imaginaos este blog que está alojado en la carpeta /blog de mi dominio.

Incluyo los módulos que quiero siendo consciente de la ruta relativa:

<!--[Pie de página]-->
<?php include('../includes/footer.php');?>

Y, en efecto, localiza esos archivos sin problema PEEEERO no es capaz de cargar sus imágenes ni de enlazar correctamente sus hipervínculos. El obstáculo, obviamente, está en las rutas relativas de dichas imágenes y de los citados enlaces.

Enlaces rotos
Efectivamente, ‘footer.php’ carga, pero no se muestran sus imágenes

Solución

Sencilla: Convertir las rutas relativas, del archivo que se quiera incluir, en “absolutas”, pero no escribiendo la dirección completa del dominio ahí a lo loco, no (que eso el día que queramos mudarnos y cambiar de nombre traería quebraderos de cabeza evitables), sino colocando una simple barra delante de cada una. Toma ya.

Es decir, en mi «footer.php», donde tenía: src=“imgs/mail.png”
Utilizar: src=“/imgs/mail.png”

Nótese -¡por todos los dioses!- la barra / inmediatamente después de abrir comillas.

Y toda esta sabiduría se la debo, una vez más a Stackoverflow.

Ampliando conocimientos sobre HTML5: etiqueta <main>

Etiqueta main de HTML5

Como no es la primera vez que os doy la vara con el tema, quizá convendría que os dierais un garbeo por las entradas de cómo estructurar adecuadamente una web en HTML5 si no recordáis bien las bases que voy a mencionar por aquí.

Cuando comencé con aquellas publicaciones, os comentaba que una página web bien estructurada en HTML5, ha de constar de las siguientes partes, únicas pero repetibles:

Cabecera <header>
Pie <footer>
Dirección <address>
Navegación <nav>
Sección <section>
Artículo <article>
Apartado <aside>
Grupo de encabezados <hgroup>

Esto quería decir que es conveniente englobar correctamente cada apartado del contenido de nuestra web con esas etiquetas, pero que lejos de sólo poder usarlas una vez y en un orden, son flexibles: una sección puede contener artículos que a su vez contengan otras secciones (subsecciones); una página web puede emplear la etiqueta <header> en la cabecera de la web, pero también en las cabeceras de sus secciones y de sus artículos.

A esta lista de indispensables, es conveniente por mi parte ir añadiendo otras etiquetas, como por ejemplo, la que hoy nos ocupa: <main>

Etiqueta main de HTML5

Continuar leyendo «Ampliando conocimientos sobre HTML5: etiqueta <main>»

Trabajando con CSS: Organizar hojas de estilo, entender su jerarquía y hacer tu sitio responsive

Hoja de estilo CSS

Cada maestrillo tiene su librillo y como a mí me resulta particularmente útil echarle un vistazo al de los demás, no voy a ser menos y voy a dejaros husmear en el mío.

Hace ya más de un año escribí un par de entradas en este blog sobre cómo organizar (tagear) adecuadamente una web HTML5. Entonces di también unas directivas CSS pero, por aquello de no complicar mucho el tema, en los ejemplos, embebí el estilo en la cabecera de la propia página. Ahora voy un paso más allá y me meto de lleno en explicar cómo organizar la apariencia de una web con hojas de estilo en cascada.

Hoja de estilo CSS
Extracto de una hoja de estilo

La plantilla web creada para explicar todo esto es un ejemplo de cómo trabajar con las hojas de estilo CSS con un cierto orden. No es un dogma, es simplemente la forma de hacer las cosas que he elegido y que comparto. Para sacarle el mayor provecho, aconsejo leer el código fuente tanto del HTML (que ya os sonará de los ejemplos anteriores) como de los CSS adjuntos, pues he ido comentando aquellos detalles que considero cruciales para entender esta forma de trabajar y, de rebote, para comprender ciertos conceptos sobre las hojas de estilo en cascada y cómo se les puede sacar partido para adaptar una web de escritorio a dispositivos con pantallas más pequeñas.

De cualquier forma, dejo aquí algunas notas interesantes para que sepáis qué os vais a encontrar.
Continuar leyendo «Trabajando con CSS: Organizar hojas de estilo, entender su jerarquía y hacer tu sitio responsive»