Llega el momento de diseñar un sitio. Estás todo inspirado. comienzas el layout, Photoshop, Fireworks a mano. Pero luego comienzan las trabas. Necesitas un logo vectorizado, por último un JPG. Y el que tienen en su sitio es un GIF transparente del tamaño de un alfiler. Estás maqueteando, y de repente no tienes una imagen de un edificio, un paisaje, una flor, una familia… Tus CD’s de banco de fotos no dan a basto ya. Para qué hablar de tu catálogo tipográfico. Pero con Internet como co-piloto, tienes muchas chances de encontrar lo que necesites, en poco tiempo y de gran calidad. Entregaré unos links muy útiles para el diseñador al momento de requerir recursos gráficos gratuitos (no queremos infrigir ningún Copyright) y de muy buena calidad. Directo a tus Bookmarks: Logos Vectorizados: En Brands of the World encontrarás una gran cantidad de logotipos, isotipos vectorizados, en formato EPS y por lo tanto de gran calidad. Si estás en Chile, Logoteca puedes encontrar muchas marcas nacionales y extranjeras, subidas por los mismos usuarios (registro necesario). Tipografías: Da Font es un referente al momento de buscar fuentes digitales. Muy bien ordenados y catalogados, este sitio te da la posibilidad de previsualizar la tipografía con el texto que ingreses. Si quieres saber qué tipografía corresponde tal o cual isotipo, o con qué tipo escribieron un slogan, What The Font te permite subir un archivo de imagen con el texto de la discordia, y el sistema trata de adivinar a qué tipo de texto corresponde. Muy útil. NeatFonts también te ofrece un amplio catálogo de fuentes para lo que estimes conveniente. Íconos:

Ha resultado ser un extenso tópico el asunto de las listas. Mucho hay de qué hablar, y mucho por complementar. En esta ocasión, desenterraré varias propiedades HTML que se han dejado de utilizar por diferentes razones, pero que aún resultan esenciales para el desarrollo semántico y la presentación de contenidos. En muchas de ellas podremos utilizar CSS para ampliar su configuración. UL es archi-conocido y ampliamente utilizado en este mismo sitio. Por eso, recurriré esta vez a OL: Ordered Lists. Corresponden a listas donde el orden de los elementos se realiza automática y secuencialmente, pero donde tenemos la oportunidad de manejar algunas de ellas a través de un par de atributos. Su forma de construcción es similar a los UL (Unordered Lists):

Listas de elementos suelen ser cansativas, tediosas de leer. Aunque CSS te entrega varios diseños para variar el típico bullet circular, también te entrega la posibilidad de utilizar una imagen (generalmente un GIF muy liviano, no más de un par de KB) para reemplazarla. Pero el ingenio de alguien que tuvo suficiente tiempo también permite que regules, por ejemplo, el padding entre el bullet y el texto soportado por éste. Mostraré 2 técnicas para que reemplaces el bullet por una imagen determinada. Dependerá de tí cuál técnica utilizar: Comenzamos con el HTML de una típica lista con unos 5 elementos:     Arroz     Azúcar     Shampoo     Cerveza     Hongo Alucinógeno

Los pies de página, o footers como prefiero llamarlos, han demostrado ser un importante factor gráfico a la hora de armar sitios web, o más comúnmente, blogs. Puedes dejar estampado los derechos reservados de tu sitio, si valida, si no valida, una firma, una forma, algo importante y que debería siempre estar presente, después de todo el contenido. Existen varias formas de construirlo, aquí demuestro una bastante ingeniosa que no deja de ser interesante tener en cuenta.

Ya va 1 año desde que este proyecto se concretó, y se publicó el primer post. Mucho ha pasado, pero sólo 2 templates han existido (lo que es curioso ya que no suelo quedarme tranquilo con los diseños que hago para mí). Agradezco a todos quienes me han ayudado a que esto salga adelante, a todos quienes leen esto y principalmente quienes comentan ya que lo más importante es su feedback.

A partir de CSS2, se puede agregar más de una clase a un selector. Basta con separarlos con un espacio dentro del class de esta manera: class=“rojo bold”. Veamos un ejemplo muuuuuy simple. A continuación, dos estilos para un mismo texto: .rojo {<br />      color: #F00;<br /> }<br /> .bold {<br />      font-weight: bolder;<br /> } Ver ambas clases en un mismo tag .**** Un detalle muy importante.

#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: