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:

Sigo jugando con este gran framework que ha demostrado ser mootools. En esta ocasión, y fusionando lo que se vió recientemente para Absolutamente sí, una vez más reciclaré ese layout para integrarle un efecto de moo, el que me permite crear ventanas arrastrables fácilmente (en el fondo, esa es la idea). Lo único diferente del HTML anterior, será sacar esa imagen con que jugamos el position (no la necesito ahora), cambiar el id=“contenido” por una class=“container” y agregarle una class al para que a través de éste searrastre nuestra ventana.      Arrástrame desde aquí      Lorem ipsum dolor sit amet, consectetuer…      Curabitur at sem. Vestibulum vel diam. Proin quis sapien ut leo faucibus eleifend… Además, debemos agregar el llamado a mootools.js y un script que ejecuta el efecto de arrastrado, además de un fade que lo hace más atractivo: