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:

Ha pasado ya 1 año desde el anterior artículo HTML y la enseñanza, donde pregonaba una inquietud sobre cómo se estaba impartiendo la enseñanza del diseño web dentro de las escuelas y universidades existentes, principalmente en Chile (donde conozco de cerca sus realidades). A raíz de ese artículo, comenzó una interesante discusión (leer los comentarios) la que finalmente terminó en mi persona impartiendo clases en una universidad precisamente para enseñar HTML, en la asignatura Tecnologías Web. Fue todo un reto, durante medio semestre (éramos 2 profesores, yo tomaba la segunda mitad del curso) traté de sacarme ese estigma de ‘impaciente’ y ‘poco tolerante’ que tengo, para tratar de explicarle a un grupo de alumnos lo que sé hacer: diagramar y construir sitios semánticamente con XHTML+CSS. El ritmo era intenso, ya que tuve que rendir simultáneamente en mi trabajo y en las clases (lo que me hizo admirar a la gente que trabaja y estudia de noche… aplausos). Además, la universidad me dió libertad para crear mi programa de curso, lo que me permitió experimentar y entregarle lo último de lo mejor a los alumnos, que estaban recién entrando al mundo universitario (alumnos de primer año) y desde ya iban a aprender a hacer bien sus sitios. En resumen el temario fue:

Durante un proyecto en específico se deció utilizar jQuery como librería para todo lo que fuera JavaScript. Reticente (ya que en ese entonces me animaba con Prototype y Script.aculo.us), comencé a utilizarlo y me fascinó como tenía grandes prestaciones, al momento de modificar el código HTML antes de ser renderizado. Se podían inyectar classes, ID‘s y otros elementos dentro del código muy facilmente, lo que me hizo encariñarme con él. Para efectos, no se quedaba atrás (aunque en mi opinión, un poco toscos) y determinamos utilizar Thickbox para evitar los ya obsoletos pop-ups para abrir imagenes y nuevas ventanas dentro de la misma pagina (les había comentado hace mucho de lightbox, pero éste funciona con Prototype). Enfin, Thickbox es muy bueno para lo que hace, pero teníamos un pequeño gran problema: el cliente requería que todo el CSS validara. Y Thickbox tiene 3 propiedades que de por sí no validan y que son muy importantes: dan la trasparencia a la ventana. Ya las comentamos anteriormente en un artículo sobre transparencias: opacity, -moz-opacity y filter: alpha(). Opacity valida sólo en CSS3 (aún en desarrollo), -moz-opacity es propietario de Mozilla y no valida, y filter: alpha() es un invento de Microsoft y menos aún valida. Pequeño gran problema.

La propiedad clip determina el área de un elemento. Tal cual, con esta propiedad muy poco utilizada puedes cortar, por ejemplo, una imagen que sea mayor que su contenedor sin tener que recurrir a cambiar su width o height (deformarla) o abrir tu editor gráfico favorito y aplicar el corte a mano. Si prefieren, pueden imaginarla como una máscara, con la que puedes determinar los límites y cubrir sólo lo que quieres que se vea a través de pixeles.

#21 – 6 Julio 2007 Envía tu sitio construído en HTML+CSS

Comezaré una serie de artículos con propiedades CSS que no son muy utilizadas, pero que mantienen una vigencia en cuanto a su utilidad. Es más que nada para que sepan que existen, sus usos y beneficios para sus proyectos web. En esta ocasión, la propiedad visibility. Uso: visibility: visible | hidden; Hace prácticamente lo mismo que display: esconde o muestra un elemento. La diferencia radica en que mientras el display: none; esconde el elemento y elimina el espacio que ocupa, visibility: hidden; mantiene ese espacio, escondiendo sólo su contenido.

IE7 es una librería JavaScript que hace que Internet Explorer se comporte como debe ser: interpretar correctamente los estándares web. Algunas de sus bondades: Soporta los siguientes selectores: parent > child [attr], [attr=»value»], [attr~=»value»] :hover, :active, :focus (for all elements) :first-child, :last-child, only-child, nth-child, nth-last-child :before/:after/content: :lang() does not alter the document structure supports the W3C box model in both standards and quirks mode supports fixed positioning supports overflow:visible supports min/max-width/height standardies forms behavior supports PNG alpha transparency works for Microsoft Internet Explorer 5+ (Windows only) Aún está en alpha, y personalmente no lo he probado.