Inicio desarrollo template – Capítulo 3

Esta dualidad de formato, fijo o variable, era el “dolor” de cabeza de todos los diseñadores, puesto que en el caso que hicieramos uso de un formato fijo, supongamos de 1000px en monitores prequeños con una definición máxima de 800x600px no se mostraba bien porque la web se “salia” de la pantalla para un lado u otro y el usuario tenia que utilizar la barra de desplazamiento para verla completamente. En el segundo caso, este no sería el problema porque la web se “adapta” al tamaño de la pantalla (como por ejemplo la web de solojoomla.com) pero indefectiblemente se reducian nuestras posibilidades en cuanto al diseño.

Hoy día con el AMP de Google y la técnica Responsive Web Design de un desarollo template joomla, todo esto quedo atras.

Historia desarrollo template

Había toda una debacle casi filosófica en torno a esto pero para resumir podemos decir que monitores con una definición de pantalla de menos de 800x600px ya casi no existen, lo común es a partir de ésta medida en adelante, hoy día 1024×768 tamaño standar de las tablets actuales. Por ello, si vamos a hacer una web de ancho fijo arranquemos con un ancho de supongamos 700px si queremos que sea vista por el común de los usuarios. En fin, todo dependia de a qué gama de mercado apuntabamos nuestra web y lo del diseño en sí queda librado a la imaginación del creador.

Me pareció coherente comentar esto último porque he visto que hay diseñadores que suponen que todos los usuarios tienen monitores wide screen (pantalla ancha) y hacen páginas de 1200 pixeles de ancho y lo que sucede generalmente es que el navegante abandone inmediatamente el sitio por más bonito que éste sea ya que le resulta muy incómodo visualizarlo. Los argumentos que explican estos diseñadores es que ellos hacen páginas anchas porque apuntan al mercado de usuarios de poder adquisitivo alto, suponen que aquella persona que utiliza monitores wide screen tiene dinero, lo cual es falso.

Volviendo al tema que nos ocupa, primero veremos cómo maquetar con tamaños fijos, para los nostalgicos y luego veremos los variables.

Pero antes vamos a ir dándole formato de plantilla Joomla a nuestro trabajo, crearemos la estructura árbol de un template.

Creando estructura desarollo template joomla

Hagamos una carpeta llamada “mitemplate” y adentro de ella crearemos 2 carpetas más: una llamada “css” y la otra llamada “images”.
Observen estos dos últimos nombres y traten de respertarlos porque si bien no es un estandard de Joomla, es el común en el 90% de los templates y es bueno ir familiarizándose con el entorno.

En la carpeta raíz, “mitemplate” guardaremos nuestro archivo inicial, donde definimos los divs, el que hicimos en el capítulo anterior, con el nombre de “index.html”.
La carpeta “images” será nuestro repositorio de imagenes y la carpeta “css” nuestro repositorio de hojas de estilo.
Dentro de la carpeta “css” crearemos un archivo (por el momento vacío) llamado “template.css” y lo vamos a vincular con nuestro index.html.

Para vincularlo, abrimos el archivo “index.html” y agregamos lo siguiente dentro de las etiquetas “head”:

<link rel=”stylesheet” type=”text/css” href=”css/template.css”>