Aunque ha estado bastante de moda, me ha sido complicado dar una definición o hacerme parte de alguna sobre la Web 2.0. Creo que por lo mismo, porque ha sido tanto lo que le han dado que me hace ser reticente a unirme a ello. Enfin, más que los [estilos gráficos][1] o una manera diferente de construir sitios webs, me gusta el cambio de comportamiento en el usuario que ha conllevado, pasando de una web empresarial, una vitrina de información, a una web social donde el usuario toma el poder y toma la información como propia. Con la Web 3.0 me pasa algo similar, no existe aún un concenso pero sí está la idea: una [web semántica][2] donde se comporta tal como un ecosistema que evoluciona de acuerdo al contenido que alberga. Lo de semántico tiene mucho que ver, ya que lo hace universal, le da un sentido a cada elemento o atributo que contiene y lo potencia en los buscadores, que deberían de procesar todos estos avances y entregárnoslo como resultados más precisos y acertados. A raíz de eso, les tengo un reto. A ver si conocían las siguientes etiquetas HTML, y su significado:

Por primera vez en este milenio, nuevos elementos son agregados a HTML. Nuevas etiquetas de estructura, nuevos elementos de línea, nuevas maneras de agregar objetos y nuevos elementos interactivos son algunas de sus promisorias bondades. El desarrollo de HTML quedó estancado en 1999 con HTML 4. Desde ahí hasta ahora, la guerra de browsers no ha terminado: IExplorer con una gran parte de la cancha cubierta y Firefox y Opera dando la batalla por ganarse su merecido espacio. Desafortunadamente han dejado de lado una buena parte de los consejos de la W3C sobre los estándares, y se han esforzado en ofrecer tabs, password managers y lectores de RSS integrados, aparte de agregar skins y temas customizables. Era hora de hacer algo por el fondo mismo: el código fuente. Viendo que nada pasaba por parte de la W3C (quienes siguen enfocados con SVG, XForms y MathML), recientemente, 3 de los mayores fabricantes de browsers: Apple, Mozilla y Opera se unieron para desarrollar una versión mejorada del clásico HTML. Más reciente aún, la W3C despertó y escuchó al grupo y la nueva HTML 5 porfin ve una luz. Pero no se preocupen, no han reinventado la rueda.

#22 – 14 Agosto 2007

Para muchos, se justifica definitivamente el uso de hojas de estilo para construir sitios web al momento en que se potencia la gráfica con el código generado por el desarrollador. Este es el caso que muestro a continuación, donde con un truco entre imágenes y código CSS, podemos fácilmente generar mostradores gráficos de porcentajes, los que dependiendo de la creatividad se verán muy atractivos. De ninguna manera lograremos medidores dinámicos, donde la barra se mueva indicando alguna actividad. Con esta técnica podremos a través de porcentajes reales y absolutos entregadas mediante CSS crear diferentes classes, cada una con una instancia de porcentaje que queramos mostrar. Para un mejor entendimiento, el ejemplo de lo que se mostrará:

En mi afán por siempre facilitarme la vida y el trabajo, me tomé el tiempo y la molestia y desarrollé mi segundo widget. El tema esta vez: Comentarios Condicionales. Lo que sucedió es que nunca me aprendí las diferentes maneras de utilizarlos, y como ocurrió con mi widget anterior, siempre entraba a Quirksmode.org para copiarlo desde ahí. Finalmente, con este widget tienes todas las maneras de utilizar comentarios condicionales en tu proyecto web, a un click de distancia. Una vez más, gracias a Apple por hacerme la vida más fácil.

Una palabra algo rara esta del inherit. Y de hecho, algo con el que desde hace poco no habia visto su importancia. Por lo mismo me interesa compartirla en este momento en que por fin sale el sol y calienta algo de este horrible frio. Inherit = heredar. Como sabrán, en CSS existe muchas propiedades que heredan sus características a sus hijos (child). Por ejemplo, si definimos en el (como suelo hacer) que la familia tipográfica que utilizaremos será Helvetica, esto será heredado por todos los elementos que estén dentro del : body {   font-family: Helvetica, Arial, sans-serif; }

La etiqueta corresponde a una cita dentro de un bloque de texto. Ese es su significado semántico. Se usa para definir largos parágrafos donde se citan desde otros sitios web externos. Puede ir acompañado de algunos atributos, como title (define el título de esa cita), lang (define en qué idioma está) y cite (muestra el URL desde dónde se tomó esa cita). La idea de esta ocasión, es darle un estilo más gráfico a esas citas a través de un poco de CSS. Como en impresos se suelen utilizar las comillas (") para describir gráficamente este elemento, lo que haremos es poner al inicio y al final del blockquote 2 comillas a través de 2 imagenes diferentes. Ahora, la dificultad está en que como existe sólo 1 blockquote, CSS 2.1 no me permite tener 2 background simultáneas (lo que sí será soportado con CSS 3). Lo que se hará entonces, será aprovechar la pseudo-clase :fist-letter (le agrega estilo a la primera letra de un párrafo) para ubicar la primera imagen. Milagrosamente, esta pseudo-clase es soportado por IE5.5+, todo un privilegio.

Conocidos son por todos las técnicas de diagramado de sitios con columnas, tanto flotando como posicionando; cada uno tendrá su favorita. Lo más importante es saber las fortalezas de cada una, para poder controlarlas de mejor manera. Me acostumbré a flotar columnas, a lidar con sus defectos (oh clearfix cuánto de adoro), pero position también tiene un espacio ganado en mi corazón (y en esta ocasión será el elegido). Sitios con columnas de anchos fijos son pan comido ya. Trabajar con porcentajes, tiene cierta dificultad pero se pueden sobrellevar. Imagínense mezclarlos. He visto sitios semi-líquidos, donde una columna crece según el tamaño de la ventana, mientras que la otra al lado se queda fija. Pues recién pude fijarme en cómo fueron construídas, y he podido replicarlas en el mundo real. De eso se trata este artículo, sobre cómo construir un layout híbrido: columnas fijas y columnas líquidas. Muy entretenido, primero que nada el ejemplo gráfico (muevan la ventana y vean de qué hablo).

Como trabajador dedicado a la web, su diseño y desarrollo, es mi karma diario tener que probar mis proyectos en la gran mayoría de browsers habidos y por haber. Aunque uno tiende a confiarse en que se verá bien en IE6 y FireFox, se hace necesario tener simultáneamente IE7 corrriendo. Bueno, yo trabajo con plataforma Mac OSX hace muchos años ya y he tenido la suerte de que donde trabajo, me tienen uno.

En el artículo donde explico de qué se trata y cómo nos afecta el modelo de caja al construir un layout con CSS, se pueden sacar algunas conclusiones, las que en realidad dejo bien claro: utilizar el reseteador universal, tratar de no definir anchos a los div‘s y el más importante, no darle padding al div u otro elemento contenedor (para no deformarlo). Con esas 3 simples reglas podemos superar bastante este inconveniente, pero me interesa entregar una recomendación para que se pueda sintetizar un poco nuestro layout y al mismo tiempo ahorrar un poco de código, logrando además más control sobre nuestra diagramación. Un HTML con 2 columnas: