Nobleza obliga

Aunque los agregué en la barra lateral, queria hacer mención a los sitios de los cuales aprendí mucho y además me sirvieron de ejemplo para el ejemplo que aquí mostré.
Diseñamos y Diseñorama son dos sitios con tutoriales claros y fáciles, que nos permiten aprender en forma rápida, la separacion del contenido de la presentación.Gracias a ellos.

Aplicando estándares (Final)

Como vimos en el ejemplo anterior, el codigo html, queda limpio, sin nada que maneje el estilo, ni que nos de una idea de cómo quedara el resultado final. Con esto logramos dos cosas, que el html (xhtml), se mantenga claro y fácil de entender y por otro lado, hace que realizar un cambio en él, sea solamente manipular las hojas de estilo en cascada (CSS).De esta manera, cualquier cambio será rápido y sencillo. Otro punto que podrán notar es que no hay ninguna tabla en el código de ejemplo, y sin embargo pareciera que si la hubiera. Uno de los problemas que tenemos al maquetar con tablas, es hacer que todo coincida y quede como queremos, se vuelve engorroso,y porque no, frustrante.Quién no peleó alguna vez con una tabla, donde el borde quedaba desalineado, o que no se veía como queríamos?.En éste ejemplo, veremos como podemos cambiar totalmente la apariencia, haciendo cambios en la hoja de estilo, (y obviamente en la imágenes que forman parte), partiendo siempre de el mismo código HTML. Tomando la página generada en la Parte 2,logré darle la apariencia de una ventana de WinXP.

Esto lo logré, capturando los botones de windows, y utilizándolos como fondos para los links. Utilice gifs transparentes, para que al ubicarlos sobre los otros divs, no se solapen los fondos.

Por ejemplo, la esquina de resize, tiene fondo transparente, para que el “fondo” sea el de la barra.Después, copie la hoja de estilo a otro CSS, y partí desde él para modificar la apariencia.
En el siguiente estilo, cambie hacia Panther, que es el SO de las Mac.Siguiendo el mismo método, modifique el CSS, para hacer que los links, tengan la apariencia de los botones de Panther. También modifique los tamaños de cada elemento en el CSS para que tenga las dimensiones de la imagen que contiene.
Y aqui tenemos el resultado.

Con esto doy por terminado este ejemplo, espero que les haya servido, y si tienen alguna consulta o duda, por favor escriban. Gracias.

Aplicando estándares (Parte 2)

El ejemplo que quiero mostrar, intenta dejar el codigo HTML, de forma simple y fácil de entender, y trata de pasar toda la complejidad a la hoja de estilos en cascada.
Elegi para este ejemplo, la representacion HTML de una ventana, como puede ser una de windows. La idea es mostrar como es el codigo y lo que se aplico para lograr el resultado final.
Partiendo de un html básico, lo que traté, fue separar el contenido, en partes lógicas, por ejemplo habrá una barra, esta tendrá dos bloques de botones, tendra un texto(título), etc.

Paso 1
El codigo sería:
<div id="pad">
<div id="winbar">
<div id="toolbar">
<a id="minimize" href="#">Minimizar</a>
<a id="maximize" href="#">Maximizar</a>
<a id="close" href="#">Cerrar</a>
</div>
<div id="buttonbar">
<a id="close" href="#">Cerrar</a>
<a id="maximize" href="#">Maximizar</a>
<a id="minimize" href="#">Minimizar</a>
</div>
Titulo de la ventana
</div>
<div id="content">
Este es el texto que se mostrara en la pagina, y de deberia mantener
el tamaño que corresponda, asdklasdjasd
asASDKAdsjasdlka kalsdkasjd, alklskdal ower werworkrworwoerwer,
asdas, asd sadasd,asd asdas sadds dda dasd
</div>
</div>

y se vería algo asi...









Paso 2
Ahora llegó la parte mas linda, aplique estilo al #pad, #winbar, #toolbar, y #buttonbar , dandole apariencia de barra de windows.


div#pad {
border: thin solid Blue;
margin: 5px;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
min-width: 300px;
overflow: hidden;
}

div#winbar { background-color: rgb(65, 105, 225);
width: 100%;
min-height: 20px;
min-width: 300px;
text-align: center;
color: White;
font-size: 10pt;
font-weight: bold;
overflow: hidden;
}

div#winbar div#toolbar { border-style: none;
position: relative;
background-color: transparent;
float: left;
width: 70px;
display: block;
}

div#winbar div#buttonbar { border-style: none;
position: relative;
background-color: transparent;
width: 70px;
float: right;
display: block;
}














Paso 3
Despues apliqué, a cada link el estilo con la imagen y las dimensiones de 14x14, desplazando el texto del link, hacia un lugar no visible.


Paso 4
Finalmente aplique el estilo con scroll, para el contenido de la "ventana", permitiendo hacer scroll. En la figura podemos ver el detalle del los divs remarcados con color, para que se note el trabajo hecho





Modelo Terminado

Aplicando estándares

En los últimos días, estuve aplicando un poco las tecnologías que comenté anteriormente (principalmente en el post La Web que Viene). Entre otras cosas estuve aplicando los estándares web, y la verdad es que quedé muy impresionado con lo que se puede lograr, con relativamente poco.  Cabe aclarar que no soy diseñador web, ni nada que se le parezca.
Por ejemplo siempre fue un gran problema para los diseñadores web, el tema de mantener sitios compatibles con varios exploradores,  o con varias versiones del mismo explorador. Recordarán que en muchos casos, había que desarrollar un sitio en forma paralela, para que sea soportado por otros browsers, con el costo de mantenimiento que eso implicaba
Debido a un trabajo que necesitaba hacer, decidí a comenzar a aplicar los conocimientos que había adquirido (y los que iba a adquirir). En el próximo post, les contaré mis experiencias.