#16 – 16 Octubre 2006

En una oportunidad previa, mostré una técnica para construir formularios tableless, o sea, sin las famosas tablas que tanto nos ayudaron hace algún tiempo. Sin div’s, solamente label e input fueron necesarios. Bien, en esta ocasión, seguiré con este apasionante e intrigante tema, pero se motrarán 2 variaciones del mismo formulario, pero con diferentes diseños. Dependiendo de tus necesidades, más de alguno puede servirte. El concepto de hoy: construir semánticamente (hacerlo accesible a los browsers y que sean relevantes para los buscadores, tal como lo recomienda la W3C). La clave está en 3 tags: fieldset, legend y label.

Con nuevo y mejor server, CSSLab vuelve al combate. Aún ajustaré unos plugins y acomodaré unas tablas del DB, pero en general está todo bien, creo. Cualquier problema grave, háganmelo saber en este post. Gracias! pd. Los foros no pude volver a instalar Vanilla, pero phpBB está funcionando. lamentablemente se perdieron todo lo que había antes… registros, temas, preguntas y respuestas. Tendrán que volver a registrarse para darle un nuevo uso a los foros.

Un layout fijo puede ser más fácil de construir para algunos, ya que todos los elementos están ordenadamente dispuestos, cada uno con su ancho fijo. Reseteando el margin y padding al principio de todos los tags, torna más fácil lograr una hegemonía entre browsers: * { margin: 0; padding: 0; } Mostraré una técnica bastante simple de diagramar un sitio utilizando CSS, de manera que hacerlo fijo o elástico (líquido le suelen llamar algunos) sea cosa de cambiar 4 caracteres en tu hoja de estilos. De un principio:

Con este artículo atacaremos directamente la semántica para mejorar la gráfica de nuestro sitio. O sea, no la atacaremos, trabajaremos en conjunto con ella. Si, así queda mejor. La idea de esto, es (en este caso) reemplazar el tag H1 (pueden ser otros, tienes hasta el H6) que sería el título de nuestro sitio (eso es un H1, el título más importante. Así lo entiende Google) por una imagen más atractiva, que destaque más nuestro sitio y que no pierda la importancia o significado del H1. Además de eso, no dejaremos de lado el texto que sería la descripción del H1, así los buscadores sabrán: 1. Es un titulo importante. 2. El nombre de este título es el que está escrito ahi. El punto es que el nombre del H1 estará escondido, y será reemplazado por la imagen más bonita que cada uno diseñará para su sitio. Comencemos:

Border, margin y padding tienen ciertas mañas dignas de ser conocidas. Cuando uno llega a manejarlas, el código queda más limpio y es bastante más rápido escribirlo y modificarlo. En este post, que será corto, haré ver 3 detalles importantes: 1. Tienen un orden específico: sentido horario, comenzando de arriba, derecha, abajo e izquierda. margin: 0 10px 5px 2px; 2. Se pueden resumir de dos maneras: padding: 4px 4px 4px 4px; es igual a padding: 4px; padding: 6px 2px 6px 2px; es igual a padding: 6px 2px; (se agrupan arriba-abajo con derecha-izquierda, si éstos son iguales).

Creo que este es mi primer artículo sobre diseño en sí. ya era hora de entrar de lleno en mi área. Puedes haber notado que han proliferado 2 características principales en cuanto a diseño en los últimos 5 – 6 años. El primero vino con el gran estilo Aqua creado por Apple para su línea gráfica desde la llegada del sistema operativo Mac OSX (tanto en su sistema operativo, como en sus manuales y su sitio web). El otro son las gradientes de fondo que se han utilizado bastante también en todos lados, inclusive en este mismo sitio. Bueno, no es difícil hacerlas, pero sí necesitan de cierto control para que no lleguen a ser esos horribles gradientes que proliferaban en gráficas hechas por defecto a mediados de los ’90. Bueno, en este momento trataré cómo llegar a tener sutiles gradientes, con las que podrán potenciar considerablemente la visual de sus sitios. Con esto ganaremos profundidad, y lograremos destacar ciertas partes de nuestro contenido que estimemos necesario hacerlo. Para esto utilizaremos Adobe Photoshop. GIMP puede actuar de la misma manera. Otros, no lo sé. Primeros crearemos un encabezado para CSSLab, con otra tipografía de la utilizada normalmente aquí (ver imagen 1). Bien, en un nuevo archivo de 300x200px a 72 DPI, escribo el título de nuestro sitio (en un nuevo layer de texto) en una tipografía en bold, y condensada a -50 (ver imagen 2 ). Ahora, comenzaremos con darle estilo a la tipografía. Abrimos Layer Style (para el layer de nuestro texto) y primero, le agregamos algo de color (ver imagen 3). Utilizaremos una degradación de rojos, y he aquí la clave. Se trata de escoger un color y variaciones suaves del mismo (en hexacromía un tono hacia arriba o hacia abajo). En este caso será el rojo WebSafe #FF0000, y para el otro color, el mismo rojo pero levemente más oscuro, el #CC0000 (ver imagen 4). Importante en este caso es tener nuestra gradiente en 90º, así corre desde arriba hacia abajo de nuestra tipografía (ver imagen 5).

Actualmente ha proliferado el uso de AJAX para cargar contenido sin necesidad de refrescar el browser. Se ha hecho mas fácil con el amplio abanico de toolkits existentes, fáciles de usar e integrar, y gratis. En este momento mostraré un truco para mostrar la carga de una imagen a través de un simple GIF animado; en realidad puede ser cualquier mensaje que estimes conveniente, siempre que sea una imagen liviana (no más de 2KB).

#15 – 5 Septiembre 2006

Nadie niega el boom que ha tenido Lightbox y todos sus sucedáneos en la manera de desplegar imágenes inline, sin tener que utilizar popup. Ciertamente una de las mejores aplicaciones AJAX existentes. El problema que surge, es cuando lo utilizamos en conjunto con un SWF: esta película suele ponerse adelante del Lightbox, y no deja visualizar bien la imagen o el contenido que estamos desplegando (en el caso del Thickbox). Bueno, para solucionar esto, se deben hacer 2 cambios fundamentales: uno en el OBJECT que llama el SWF y uno en el CSS del contenedor de este SWF; en el caso de no tenerlo, es preferible crear un DIV que sólo contenga nuestra querida película Flash. Vamos por partes: En el OBJECT debemos aplicar un parámetro y un valor para la película Flash: wmode=“opaque”. Es conocida por muchos el parámetro wmode=“transparent”, pues ésta nos permite que las zonas que no tienen fondo en la película Flash se transparente, dejando ver el fondo del HTML que lo contiene (sea éste color plano, o una gradiente, o una foto, etc), similar a una película PNG Transparente (precisamente trabajando con el canal de transparencia, el canal alpha). Con opaque, la película Flash se esconderá detrás de cualquier elemento, sea éste HTML o controlado por Javascript. Por lo tanto, el HTML que llama el SWF sería: