Inicio desarrollo template – Capítulo 3

Como dijimos en el capítulo anterior dentro de las etiquetas divs podemos indicar sus atributos mediante CSS. Dentro de los muchos atributos que veremos hay uno que se destaca y que es fundamental antes de comenzar a armar la plantilla propiamente dicha: el width, traducido “el ancho”. En efecto, recordemos que los divs son áreas o sectores y para darles sentido de ubicación primero debemos definir su tamaño para el desarrollo template.

Así podremos tener una web que podrá ser de ancho fijo definida en píxeles (px) o una web de ancho variable definida en porcentajes(%). Tanto el primero como el segundo se refieren a la “ocupación” que cada sector va a hacer de la pantalla.

Vale aclarar que existen más unidades de medidas en CSS, por ejemplo: “in”: pulgadas, “cm”: centimetros, “mm”: milímetros, “pt”: puntos, “pc”: picas, “em” o “ex”: usadas para definir sangrías en textos o tamaños de fuente. Para el objeto de este tutorial solamente usaremos “px”: píxeles y “%” porcentajes.

Viaje al pasado

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”>

3 comentarios en «Inicio desarrollo template – Capítulo 3»

  1. Enlace a la hoja de estilos
    Muy bueno el curso, creo que al final de este capitulo falta el codigo para enlazar el html a la hoja de estilos. Si no me equivoco seria algo asi: @import “css/template.css”;

  2. Div Borde
    Hola: En el capitulo 2 tu nos das un código html (el index) con los nombres:cabecera, cuerpo, derecha, etc, cada uno dentro de un div, para ir maqueteando el sitio, y en el capitulo 4 nos dices que en el código html hay un div llamado borde, pero en el codigo no hay ningun div con el nombre borde. Estoy haciendo todo paso a paso para armar el ejemplo, pero ahí me pierdo porque no encuentro en el codigo ese div. Te agradezco me puedas aclarar esto
    Juan

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Ver
Privacidad