IM IN YUR BLOG... EATIN UR P0STZ LOL

Los 8 grandes errores del diseño web

8 grandes errores

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.

(Continuar leyendo)

Columnas 100% altas

Columnas CSS

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).

(Continuar leyendo)

¡Estrenando diseño!

Rediscover Your Head - Screenshot

Después de un buen rato trabajando, al fin he "terminado" con el nuevo diseño. Digo "terminado" porque faltan detalles que afinar y usaré sus comentarios, críticas y/o mentadas de madre para mejorar el nuevo diseño. Como les mencioné antes, lo he llamado "Rediscover your Head" (supongo que no tengo que explicar por qué...). Quiza a muchos no les guste, a otros si y unos cuantos dirán que les da igual; pero para mi el cambio es para bien. Tengo más espacio para los tutoriales, la información se ve más organizada y lo siento más accesible (el diseño se ve perfecto hasta en IE5 ;) ). El único "problema" que le veo es la gente que no le gusta darle scroll para llegar al contenido. Para ellos he puesto un link para saltar directo al contenido con un solo click; fue lo más que pude hacer por ustedes.

(Continuar leyendo)

¡Muestra tu <body>!

CSS Naked Day

Mañana 5 de Abril metal.ize y gran parte de la web (al menos la web que vale la pena ver) se desnudará completamente y mostrará su <body>. Como seguramente saben, el 5 de Abril se celebra el CSS Naked Day, osease, el día que quitamos los vínculos a nuestros CSS de nuestra web y dejamos la pura estructura a la vista. ¿El objetivo? Sencillo, promover los Estándares Web.

(Continuar leyendo)

Código resaltado

Texto resaltado

Neeno y Manuel me han preguntado el método que utilizo para poder resaltar el código HTML, CSS, PHP, etc. etc. en mis entradas. Esto es posible en Wordpress gracias a un plugin llamado iG:Syntax Hiliter. El problema es cuando uno quiere resaltar código fuera de un CMS, como comenta Neeno. Para poder lograr esto, existen infinidad de scripts que lo hacen; pero ninguno tan poderoso (o al menos que yo haya encontrado) como GeSHi, que es el que hace funcionar al plugin antes mencionado.

(Continuar leyendo)

Layouts líquidos

Layout Líquido

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é.

(Continuar leyendo)

Contenido semántico.

Contenido Semántico

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! :x ), 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.

(Continuar leyendo)

Equisacheteme… ¿qué?

XHTML... ¿Qué?

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.

(Continuar leyendo)