Los mockups pueden clasificarse como diseños de mediana a alta fidelidad y bordear los prototipos.
Capitulo I – Realizar plantillas para Joomla
Capitulo II – Armando los DIV´s
Capitulo III – Empezando el Template
Capítulo IV – Maquetando con tamaños fijos
Capítulo V – Al fin… maquetando!!!
Tabla de Contenidos
8.- Formato a los títulos para la creación de plantillas joomla
Agregamos lo siguiente:
h1{
font-size: 12pt;
}
Corresponde a la barra de navegación dentro del cuerpo del template, agreguen lo siguiente:
#navabajo{ font-weight : bold; }
En el código, simplemente le decimos que va a tener el texto en negrita.
10.- Barra lateral derecha
El código CSS de la barra lateral es el siguiente:
#lateral{
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}
Explicación:
Línea 1: indicamos el nombre del identificador
Línea 2: le decimos el ancho que va a tener
Línea 3: le damos un color de fondo
Línea 4 y 5 le damos un borde inferior e izquierdo, ya que el superior ya está dado cuando definimos la barra de navegación.
Línea 6: le decimos que “flote” a la derecha, es decir, se posicione siempre a la derecha.
11.- Las “clases” de la barra lateral
Hasta ahora hemos utilizado para codificar nuestro CSS solamente identificadores de etiquetas ID y selectores del html, ahora usaremos clases. ¿Cual es la diferencia? Los identificadores deben ser únicos, no se pueden repetir dentro del código html, no podemos tener dos divs con el mismo nombre de identificador, por ejemplo no puede haber dos divs con el nombre “cuerpo”. En cambio las “clases” se pueden repetir tantas veces como queramos, son reutilizables dentro del código html, otra característica más que nos da idea de la potencia de CSS.
Resumiendo:
- Los selectores se los codifica usando su nombre, ejm.: body, a, h1, button, etc.
- Los identificadores se los codifica usando cualquier nombre pero anteponiendo el signo cardinal # y NO SE PUEDEN REPETIR DENTRO DEL HTML
- Las clases se codifican usando cualquier nombre pero anteponiendo un punto “.” y SE PUEDEN USAR MÁS DE UNA VEZ dentro del código html.
La clase (título lateral) titlat viene a ser la clase que identifica los títulos de la barra lateral y la codificamos de la siguiente forma:
.titlat{
background-color:#000080;
color:#ffffff;
font-size:8pt;
text-transform : uppercase;
padding: 7px 3px 7px 8px;
font-weight : normal;
letter-spacing : 2px;
margin: 0px 0px 8px 0px;
}
Línea 1: Identificamos la clase con su nombre
Línea 2: le damos un color de fondo
Línea 3: le damos un color a los textos
Línea 4: le damos un tamaño de letra
Línea 5: usamos una transformación, esto es, que por más que en el html esté en minúscula CSS lo convierta a mayúsculas.
Línea 6: le damos un espacio, una ubicación, como vimos en ejemplos anteriores. Estos nos permite “centrar” el título dentro del div.
Línea 7: weight traducido significa peso, en CSS se refiere al grosor de la fuente. En este caso es “normal” pero podría ser “bold” (negrita), “bolder”, “lighter”, o dándole un porcentaje de grosor.
Línea 8: aquí le indicamos que cada letra va a estar separada de la otra en 2 pixeles.
Línea 9: le damos un margen con respecto al div como vimos en otros códigos anteriores.
Agregaremos también este código:
.cuerpolateral{
padding: 5px 4px 13px 10px;
}
12.- Codificando el buscador maqueta web
Vamos a ir agregando los siguientes códigos para darle formato al buscador, empezamos por el selector “input”:
INPUT {
font-size : 8pt;
}
Con esto le decimos que el texto que se ingrese en el campo tenga una fuente de 8 puntos de tamaño.
Continuamos agregando éste código (Noten aquí que en el código html el div “fbuscar” a su vez está modificado por la clase “cuerpolateral”).
#fbuscar form{
margin-bottom : 0px;
margin-top : 0px;
}
#campotexto{
float: left;
}
Le decimos que flote los textos a la izquierda.
#campotexto input{
width:100px;
}
Limitamos el ancho del campo input a 100px.
#botonbuscar {
padding-top : 3px;
padding-left: 106px;
}
Le damos al botón buscar un entorno de ubicación.
#botonbuscar input{
border : 0px none;
}
Le decimos que el botón buscar no va a tener borde, de lo contrario, también por defecto aparecerá un borde (según el navegador).
.radio{
clear:both;
}
13.- Codificando “Otras Secciones”
#otras ul{
margin : 5px 10px 0px 0px;
padding: 0px 0px 0px 4px;
list-style: none;
}
#otras li{
padding-left: 35px;
background: transparent url(../images/bullet.gif) 0 2px no-repeat;
margin-bottom: 10px;
}
14.- El código del pié de página
Agregamos lo siguiente:
#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
}
Deduzcan uds. la función de cada línea de código.
Con esto, ya podemos probar nuestra creación de plantillas joomla y se debería ver cómo la imagen que puse en el capítulo III. Cabe decir que esta plantilla es solamente una plantilla web “común y corriente” pero en los capítulos siguientes la modificaremos y le daremos el formato para Joomla! que es a lo que apuntamos.
Lo que podemos hacer para finalizar esta parte del tutorial es validar nuestro archivo css en la W3C, para ello vayan a su web y súbanlo.
Resumiendo: con lo que vimos hasta ahora ya estas capacitado para maquetar una web en html utilizando hojas de estilo. Si quieres profundizar bajate algún manual CSS y estúdialo y asómbrate de lo que puedes llegar a hacer. Si te han quedado dudas, quieres sugerir algo, o si encontraste algún error en la transcripción, por favor, dejá tus comentarios. Muchas gracias!
aunque cuando llegué a la parte que yo queria (cap vii) me envia al incio de “solojoomla” 🙁
Solucionado