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.

#20 – 6 Junio 2007 Envía tu sitio construído en HTML+CSS

CSS significa Hojas de Estilo en Cascada. Con cascada, nos referimos que el browser lee esta hoja de estilos en orden descendente (haciendo analogía, una cascada cae de arriba hacia abajo). Así, en el caso de tener dos estilos similares definidos, el que venga en último lugar, o más abajo (orden descendente) tendrá más relevancia. O sea: h1 { font-size: 22px; }<br / h1 { font-size: 48px; } Ver ejemplo{.verejemplo}

Con este artículo les mostraré una manera de cómo CSS realmente potencia la presentación de un sitio, aportando más hacia la accesibilidad y usabilidad que a los muchos argumentos que hemos entregado hasta ahora. CSS2 nos permite aplicar estilos a elementos basándose en los atributos definidos en las etiquetas HTML, incluso a los valores contenidos en esos atributos. Primero que nada, veamos cómo se declara estos selectores avanzados:

Uno de los pocos detalles que le he visto a Firefox, responde a un tema con los links. En realidad, aparece siempre que el foco está sobre un elemento (formularios, enlaces) para llamar la atención y destacarlo por sobre otros. Se dibuja una línea punteada alrededor de nuestro elemento, y lo he notado muy claramente en Firefox, ya que Safari (browser que uso por defecto) no lo despliega si no lo explicito. Otro dato sobre este contorno, o outline: a pesar de que despliega un borde alrededor, no responde al modelo de caja, o sea, no ocupa espacio interior o exterior. O sea, que no debemos de considerarlo al diagramar con cajas, ya que no modifica nuestros anchos o altos. Pues con todo esto, a lo que voy es que lo podemos controlar a través de CSS, mediante la propiedad outline. Se declara tal como un borde: