metal.ize

Pff... Ahora si que he estado desaparecido mi gente. Me disculpo, pero he tenido un periodo de mucho estrés, sustos, trabajo, gastos... en fin. Me ha sido imposible postearles algo por aquí. Pero heme aquí, haciendo un tiempesito para revivir el blog un poco.

Cansado de ver muchas prácticas poco aconsejables (y que, honestamente, hasta hace poco yo también cometía) y como la excusa perfecta para darles a conocer que sigo vivito y coleando (aunque aún sumamente ocupado), he decidido escribir sobre los 8 grandes errores del diseño web actual. Estas son prácticas que el mundo de la web 2.0, los estándares web y, por sobre todo, la idea de separar la presentación del contenido nos han metido en la cabeza y la mayoría de las veces las hemos seguido sin ponernos a pensar un poquito en las consecuencias.

Un mail del buen viciao2k3 me ha impulsado a escribir este post. Seguramente como diseñadores web les ha pasado que intentan hacer un layout con columnas y tienen sus fondos para cada columna y todo bello; pero al momento de ponerle el contenido te das cuenta de que las columnas no se expanden al mismo tiempo. Y te dices a ti mismo "Muy bien... iré a mi hoja de estilos y agregaré height: 100% a todas las columnas y ¡listo!" Y después de aplicar el cambio te das cuenta de que no es así. "¿Pero qué caraj..." Si si, conozco bien la sensación. ¡Pero no más! Aquí les pongo las tres técnicas infalibles para lograr ese tan deseado efecto y que varias veces ha sido llamado "el santo grial del CSS" (junto con el layout de tres columnas).

¿Botones? ¡Si! ¡Botones! Esos que usas para enviar formularios. ¡Si, si! ¡Esos! Aquí les enseñaré cómo hice los botones de arriba; desde los gráficos hasta el HTML y CSS. También les voy a dejar el png para que puedan editarlo al gusto y cambiar colores, tamaños o lo que quieran.

Aquí les va el demo; con ejemplos de los botones usados en <a>'s, <inputs>'s y <button>'s.

Últimamente he tenido MUCHÍSIMO trabajo (ahí la falta de tiempo para actualizar el blog :S una disculpa). En uno de los proyectos que tenía me encontré con un problema que de principio no debería estar ahí. Había un listado de características (una lista desordenada en HTML) que se repartía en 3 columnas. Si la lista tenía 3 columnas y 9 elementos, los primeros tres elementos estaban en la primer columna; del 4 al 6 en la segunda columna y del 7 al 9 en la tercera, de este modo:

Muy bonito ¿cierto? Pero codificarlo no es tan sencillo. El problema que tenía es que había diferentes listas con diferentes números de elementos y no quería extender mucho el CSS para manejar x número de listas; necesitaba crear un medio para poder manejar múltiples listas con diferentes números de elementos pero que todas siguieran más o menos el mismo estandar, las mismas clases.

Cuando estaba codificando el diseño de metal.ize se me ocurrió la idea de hacerlo líquido. Obviamente, esto lo quería lograr sin el uso de tablas y quería que fuera compatible con la mayor cantidad de navegadores posible. Debo decir que fue bastante complicado encontrar un método fiable, fácil y que no requiriera de hacks. Es por eso que quiero compartir con ustedes la técnica que usé.

Y bueno... tras un pequeño tropezón emocional, aquí ando de vuelta. Ahora para continuar con mi pequeña meta a corto plazo y, como lo prometí, ahora toca hablar de lo que es el contenido semántico. Y para empezar, un ejemplo. Como pueden apreciar en la imagen (¡cierren la boca! ), las boobs (senos, pechos, tetas, campanas, ubres o como carajos quieran) están entre las tags <tits></tits>. Será un chiste sexista, vulgar y extremadamente gracioso de mal gusto, pero es un excelente ejemplo de lo que es el contenido semántico.

Me he tardado (maldita vida), pero por fin he encontrado algo de tiempo para trabajar en una sección que quería tener desde el principio. Mi objetivo a corto plazo es tener una base de datos de todas las tags de HTML que existen, sus atributos, sus usos semánticos, la manera de estilizarla... en fin, todo lo que quisieran/necesitaran saber sobre alguna tag.

Para lo mismo, primero tengo que explicar ¿Qué carambas es HTML? Y eso es precisamente lo que hago en esta entrada. Hablaré sobre lo que es el HTML, su historia, su uso, cómo IE metió su cuchara cuando no debía de hacerlo, su evolución a (X)HTML... en fin, todo lo que sé de este lenguaje.