Directrices y plantilla para utilización de CSS
Objetivos
El objetivo de estas directrices es definir una sistemática de definición de estilos, de forma que se obtengan los siguientes beneficios:
- Agilidad en el momento de la programación de los elementos de pantalla. Se trata de que los desarrolladores no tengan que preocuparse de cómo se deben formatear los diferentes textos, widgets o elementos gráficos, y puedan dedicarse a la parte del desarrollo de código.
- Consistencia entre diferentes desarrolladores. Para el usuario final no debería existir diferencias de imagen gráfica entre los módulos desarrollados por diferentes programadores.
- Consistencia entre diferentes elementos. Todos los elementos que compondrán la aplicación, como los gadgets o el escritorio base por ejemplo, deberán mostrar un aspecto y tratamiento gráfico similar si no igual, de forma que la integración entre diferentes elementos sea total.
- Asegurar desarrollos futuros. Al tratarse todos los elementos que compondrán el sistema con el mismo código HTML /JS de base, se consigue que si es necesaria una evolución gráfica en el futuro se realizará modificando sólo las CSS, sin necesidad de mayores modificaciones en la aplicación.
- Facilitar personalizaciones completas. Será posible tomar la aplicación y adaptarla a otro entorno/empresa con cambios mínimos en las CSS.
- Permitir personalizaciones parciales. En algún caso puede que interese modificar alguno de los gadgets o algún elemento en concreto. Esto será factible añadiendo otra hoja de estilos CSS a la definición del gadget, lo que permitirá agregar opciones extras aparte de las básicas que provea la infraestructura inicial.
Separación de lógica, estructura y presentación
La clave de este procedimiento está en separar la lógica y la estructura de la presentación. En ningún caso se debe especificar ningún atributo de diseño dentro del código, fuera del CSS.
Modelo base de XHTML propuesto
Este es el modelo base de XHTML que se propone. Lo interesante sería que si hace falta algún otro elemento no incluido en este modelo, se requiriera su creación de forma que ese nuevo elemento pudiera ser utilizado por otros.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Showcase - EzWeb</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Esta es la llamada a la CSS general -->
<link rel="stylesheet" type="text/css" media="screen,projection" href="ezweb.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<h1>Showcase de la plataforma EzWeb</h1>
<div id="toolbar">
<a href="palette">palette</a>
<a href="wiring">wiring</a>
<a href="help">help</a>
</div>
<div id="description">
<p>take it ezweb!</p>
</div>
<div id="gadgets"><!-- Bloque general donde vendrań los gadgets -->
<div class="gadget" id="gadget1"> <!-- Bloque que engloba un gadget con clase gadgets y su id propio -->
<div class="toolbar"> <!-- Bloque del título y las acciones -->
<h2>Título del gadget</h2>
<a href="javascript:"><img src="" alt="preferences" /></a>
<a href="javascript:"><img src="" alt="minimize" /></a>
<a href="javascript:"><img src="" alt="delete" /></a>
</div>
<div class="preferences"> <!-- Zona que será desplegable con las preferencias del gadget -->
<form> <!-- Formulario con plantilla de cómo podrían ir los diferentes elementos de preferencias -->
<fieldset>
<label for="preferencia1">Preferencia 1</label>
<input type="text" name="preferencia1" /><br/>
<label for="preferencia2">Preferencia 2</label>
<input type="password" name="preferencia2" /><br/>
<label for="preferencia3">Preferencia 3</label>
<input type="checkbox" name="preferencia3" />valor1<br/>
<label for="preferencia4">Preferencia 4</label>
<input type="radio" name="preferencia4" value="valor1" />valor1<br/>
<input type="radio" name="preferencia4" value="valor2" />valor2<br/>
<input type="radio" name="preferencia4" value="valor3" />valor3<br/><br/>
<label for="preferencia5">Preferencia 5</label>
<input type="file" name="preferencia5" /><br/>
<label for="preferencia6">Preferencia 6</label>
<select name="preferencia6">
<option value="0"></option>
<option value="1">valor 1</option>
<option value="2">valor 2</option>
<option value="3">valor 3</option>
</select><br/>
<label for="preferencia7">Preferencia 7</label>
<textarea name="preferencia7"></textarea><br/>
<input type="submit" value="guardar"> <input type="submit" value="cancel" />
</fieldset>
</form>
</div>
<div class="main"> <!-- Cuerpo del gadget, con una pequeña galería de posibles elementos -->
<h3>Encabezado</h3>
<p>El widget puede tener <strong>algo resaltado</strong>.</p>
<h4>Sección</h4>
<table>
<thead>
<tr><td></td><td>variable 1</td><td>variable2</td></tr>
</thead>
<tbody>
<tr><td>uno</td><td>valor 1</td><td>valor2</td></tr>
<tr><td>uno</td><td>valor3</td><td>valor4</td></tr>
<tr><td>uno</td><td>valor5</td><td>valor6</td></tr>
</tbody>
<tfooter>
<tr><td></td><td>casos</td><td>unidades</td></tr>
</tfooter>
</table>
<p>Si hay algo que decir, pues se escribe por aquí...</p>
<ul>
<li>esto</li>
<li>aquello</li>
<li>lo de más allá</li>
</ul>
<p>Si tiene que haber algo de orden:
<ol>
<li>lo primero,</li>
<li>lo segundo,</li>
<li>lo tercero,</li>
</ol>
</p>
<p>También alguna imagen <img src="foto.jpg" alt="imagen de ejemplo" /></p>
</div> <!- main -->
</div> <!- gadget -->
</div> <!- gadgets -->
<div id="footer">
<p>ezweb</p>
</div>
</body>
</html>
CSS propuesto
Este CSS se le aplica al modelo de XHTML anterior de forma que se formatea correctamente. Al igual que con el modelo del XHTML, no se debe modificar nada de forma independiente, sino pedir que se cree algún elemento nuevo de forma que todos los participantes en el proyecto puedan utilizarlo.
body
{
margin:0px;
padding:0px 20px 0px 20px;
color:#000;
font-size:0.8125em;
font-family: "Trebuchet MS","Bitstream Vera Sans",Verdana,Helvetica,sans-serif;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
a
{
text-decoration:none;
color:#00688b
}
a:hover
{
text-decoration:underline;
color:#00688b
}
/* header ------------------------------------------------------------------------------------------ */
#toolbar {}
#toolbar a{}
#description {}
#description p {}
/* gadgets ------------------------------------------------------------------------------------------ */
#gadgets {
}
#gadgets .gadget {
border: 1px solid #C5D7EF;
border-top:1px solid #7AA5D6;
padding:0;
}
#gadgets .gadget .toolbar{
margin-top:0;
background-color:#E5ECF9;
height:30px;
border-bottom: 1px solid #C5D7EF;
}
#gadgets .gadget .toolbar h2{
margin:0;
color:#36C;
padding:5px;
font-size:120%;
float:left;
}
#gadgets .gadget .toolbar a {
float:right;
margin-right:2%;
margin-top:10px;
}
#gadgets .gadget .toolbar a img {}
#gadgets .gadget .preferences{
border-bottom: 1px solid #C5D7EF;
background-color:#E5ECF9;
color:#36C;
}
#gadgets .gadget .preferences fieldset{
border:none;
}
#gadgets .gadget .main{
padding:1%;
}
#gadgets .gadget .main h2{
border-bottom:1px dotted #dfdfdf;
}
#gadgets .gadget .main table{
border:1px dotted #dfdfdf;
}
#gadgets .gadget .main th{
}
#gadgets .gadget .main td{
}
#gadgets .gadget .main img{
}
/* footer ------------------------------------------------------------------------------------------ */
#footer {}
#footer p {}
