Diseño de la Web de León
Comments(10) Esta entrada ya se la había prometido a DarkQuickSilver así que aquí esta 
.
El theme original es de “Stephen Reinhardt”, lo único que hice fue agregarle algunas funciones y cambiarle algunos detalles simples 
…
Primero que nada tomé las medidas que necesitaba mediante Firebug, ya que esta herramienta me sirve mucho para cuando quiero checar algún aspecto en cualquier diseño web . Posteriormente chequé si se podía hacer líquido el diseño, prácticamente cualquier diseño se puede hacer líquido siempre y cuando no tenga imágenes ya que estas no se expanden proporcionalmente y aunque así fuera, se pixelean 
. Ya que vi todas las imágenes del theme me di cuenta que solo eran imágenes con repeat así que por lo tanto si cambiaba el tamaño de cualquier contenedor, las imágenes de fondo se mantendrían correctamente con respecto al ancho de los mismos contenedores. Posteriormente inserte algún texto (como por ejemplo “lorem ipsum”) en el sidebar y en los contenedores de las entradas, esto para probar cual es el ancho máximo legible y que medidas darle tanto al sidebar como al contenido. Mi monitor tiene una resolución de 1680x1050px así que tomando como base ese ancho calculé por tanteo un ancho máximo que por supuesto tampoco llena completamente en el wrap (también conocido como wrapper) en el cual están las entradas y el sidebar.
Después de elegir este punto máximo de ancho el cual fue de 1300px (CSS: max-width:1300px;), elegí un ancho máximo para el contenedor de las entradas 785px (CSS: max-width:785px;) y el contenedor del sidebar 350px (CSS:max-width:350px;) por tanto eso son los límites y cuando el ancho de pantalla tiende a 1300 va aumentando hasta llegar a este límite. Pero ¿a donde se han ido los otros 165 px? pues bueno intenté llenar lo más que pude el ancho sin que se vea ilegible, por ejemplo si tienes una pantalla con un ancho de 1000px y tienes texto que va de lado a lado simplemente te pierdes a la hora de leer ya que cada línea de texto es tan extensa que no sabes en cual continuar asi que además de aprovechar al máximo el ancho, también lo distribuí de manera centrada dentro del ancho máximo total del contenedor llamado wrap, de modo que esos 165px estas entre las entradas y el sidebar como un aislante, un separador ya que pegando el sidebar al contenido de las entradas uno podría confundirse e incluso se vería amontonado. Además de que este espacio sirve como un compensador del espacio ya que al reducirse los anchos no son proporcionales y el sidebar por cuestión de estética deja de reducirse antes que el contenedor de entradas, es entonces cuando el espacio libre entra en acción, el contenedor de entradas sigue usando porcentajes, sin acercarse totalmente a su ancho mínimo, por tanto puede apoderarse del espacio libre de 165px del cual se ha venido apoderando a partir de que el ancho total del contenedor wrap es inferior a 1146.94px, el diseño no se alcanza a desbordar en ningún momento ya que deja de apoderarse de el ancho extra cuando llega a su ancho mínimo el contenedor wrap de 760px (CSS:min-width:760px;) y por tanto aunque reduzcas la resolución o el ancho de la ventana (medida la cual resultaría un poco ridícula a menos que estés en un celular) no se sale de este contenedor el sidebar ya que aún quedan 3px libres aproximadamente . No lo hice con un ancho exacto de 800px ya que la barra de desplazamiento también quita algunos pixeles, no quita tanto como los 40px pero funcionan bien .
Una vez con el esqueleto del diseño terminado solo falta cambiar algunos detallitos en cuanto a colores, bordes y el diseño opuesto al de color opaco, el cual consiste en una hoja de estilos idéntica a la primera excepto en los colores backgrounds, hovers, colors, anchors, divs, etc. Por cierto que el footer y el header tienen un ancho de 100% asi que no necesitan un ancho máximo ni mínimo ya que estos ya están dados por el wrap. Digamos que es como un resorte que cuando llega al mínimo no deja que lo que esta atrás y adelante de este se reduzcan más que el tamaño del mismo.
En el header incluí un javascript el cual fue fusil de otro sitio xD tuve que revisarlo y quitarle algunas cosas que no se usaba de ese script, yo no se mucho realmente de javascript y ese script usaba DOM y todo un rollo para hacer que funcione, es como un switch que te cambia el CSS default al alternativo . Posteriormente hice en MS Paint un foquito prendido y uno apagado con las mismas medidas. Luego aplique el siguiente CSS:
div#dark {
cursor:pointer;
background:url(images/oscuro.gif) no-repeat fixed right bottom;
text-indent:-9999px;
overflow:hidden;
position:fixed;
z-index:9999;
padding:0;
margin:0;
bottom:0;
right:0;
width:30px !important;
height:62px !important;
}
div#dark:hover {
background:url(images/claro.gif) no-repeat fixed right bottom;
}
div#lite {
display:none;visibility:hidden
}
En el CSS para la plantilla blanca solo aplique igual en la misma dirección y en sentido opuesto
Posteriormente un pequeño script para que en los comentarios al dar click en las caritas se pongan en la caja de texto y finalmente las respectivas traducciones al theme .
Con respecto al botón de no pinchar solo es una imagen fixed con CSS 
con un link a una página donde hay un contador. En “Esta Página” te proveen del código para tu botón para que lo coloques donde gustes sin embargo yo decidí que se desplazara con la página así que modifique un poquito el código. Y pues también tiene un pequeño error por allí ya que también debería de aparecer un mini-chat para que puedan dejar su comentario pero aparece como error 404 U_U .
Ese botoncito tiene un link con algunas variables que se envían en php y entonces el sitio toma la variable del sitio donde se pidió el botón y supongo que en una base de datos tienen el url de cada página y su respectiva cantidad de impresiones xD . Pero pues ya estoy pensando seriamente en quitarlo debido a que estamos regalandole dinero a los de acuerdate.net ya que cada que das click tiene anuncios de adsense y les cuenta la impresión XD .
Solo restaba validar el theme y corregir las etiquetas que no estuvieran correctamente cerradas .
Mi banner (son 2 uno para el theme claro y otro para el oscuro) me lo hizo Illi.Pro jeje se lo pedi como un favor ya que no se mucho de Photoshop .
Espero esto haya aclarado tus dudas darkquicksilver y espero el post sea de utilidad jeje .
Hay que echarle una leída a un manual de javascript por que esta dura la procrastinación :S .
Transición: 25% Jeje avanzo digamos que más o menos rápido hasta ahora .
