Domingo, 28 Mayo 2017

Capítulo III - Empezando el template

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.

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.

Importante aclaración

Esta dualidad de formato, fijo o variable, es el “dolor” de cabeza de todos los diseñadores, puesto que en el caso que hagamos uso de un formato fijo, supongamos de 1000px seguramente en monitores chicos con una definición máxima de 800x600px se verá mal porque la web se “saldrá” de la pantalla para un lado u otro y el usuario deberá 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 reducen nuestras posibilidades en cuanto al diseño.

Hay 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 casi no existen, lo común es a partir de ésta medida en adelante. 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 dependerá de a qué gama de mercado apuntemos 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 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.
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">


Para los impacientes, les comento que lo que vamos a tratar de armar ahora es una web similar a la que se muestra en la siguiente imagen:

Consultor y Desarrollador Proyectos Web
Author: tuxmerlin
Sobre mi...
Orientar personas es despertar vida
Otros contenidos de este Redactor

Debe registrarse para poder Comentar