From dates to diapers
Nuevo proyecto y si… nuevo blog… Hacemos más cosas, pero no nos dejan explicarlas =P
Maquetación y puesta en marcha del blog From dates to diapers (de citas a pañales sería la traducción =), basado en Wordpress con administrador propio y desarrollo de widgets específicos.
El contacto y diseño son mérito, una vez más, de Better in Pink!, la diseñadora más richarachera.
Las ganas que teníamos todos de que llegase el soporte del formato de imagen PNG a Internet Explorer 7, y cuando llega, llega incompleto (viva Microsoft). El descubrimiento llega después de utilizar exhaustivamente mootools, haciendo aparecer de la nada capas con una imagen PNG, mientras se realiza el efecto se ve una sombra negra (depende del PNG) en la zona transparente de la imagen, hasta que se completa la animación con la opacidad máxima (100%).
Para no complicar el ejemplo y mostrar el problema de una forma más sencilla, vamos a usar un par de imágenes (gracias Arturito por tu colaboración) y el siguiente html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES"> <head> <title>iuttu Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="js/mootools.js"></script> <style> #test { background: url(IMGP1355.JPG) no-repeat; width: 300px; height: 225px; position: relative; } #test img { position: absolute; top: 60px; left: 50px; } </style> <script type="text/javascript"> function canviarOpacidad(_acual) { $("foto").setStyle('opacity', _acual); } </script> </head> <body> <div id="test"> <img id="foto" src="png.png" /> </div> </code> <code><a href="javascript:canviarOpacidad(0);">opacidad = 0</a> <a href="javascript:canviarOpacidad(1);">opacidad = 1</a> <a href="javascript:canviarOpacidad(.5);">opacidad = .5</a> </body> </html> |
Podeis ver el ejemplo aquí:
Bien, si pulsamos los dos primeros botones veremos que todo funciona de forma lógica (excepto en IE6, que no renderiza bien los PNGs de serie). Si pulsamos en opacidad cero la capa desaparece, y en opacidad uno la capa aparece, esto parece funcionar en IE7 que oculta y muestra la capa correctamente, pero, si pulsamos en opacidad .5, en IE7 parece que la capa se ve más oscura:
En fin, ahora esperar a que alguien descubra una forma de evitar esto (parece que funciona si la capa que contiene el png tiene como fondo un color plano) o a que salga el IE8 y se pongan las pilas 
Es posible que, dependiendo de los requisitos del diseño, necesitemos modificar los valores por defecto de la propiedad z-index de un elemento. Esta propiedad no tiene ninguna dificultad aparente, el valor indica la prioridad de mostrarse por encima o por debajo de otras capas -cuanto más alto el número más prioridad-.
Pues pasa que en el navegador Internet Explorer, nos podemos encontrar que las capas no hagan caso a esta propiedad, con lo que un estilo definido de la siguiente manera:
1 | #pie { margin-top: -130px; z-index: 10; } |
no haga caso. La solución (la mayoría de las veces), es incluir la propiedad position: relative al estilo para que funcione:
1 | #pie { margin-top: -130px; z-index: 10; position: relative;} |
Para un proyecto reciente tenía la necesidad de reproducir archivos mp3 desde un listado de canciones. La red está llena de javascripts en flash para reproducir mp3s externos, pero no llegué a encontrar alguno que además de poder cargar mp3s te diese la posibilidad de pausar las canciones.
Textmate es un editor fantástico, pero en MacOS la integración con el control de versiones SVN no está tan bien resuelta como en Windows con TortoiseSVN. Textmate ya tiene integrado el control de versiones pero hay un par de cosas que no vienen resueltas por defecto.
Una de ellas es que no sabes el estado de los archivos, pero esto se soluciona con el plugin ProjectPlus (ir a la página del autor). Descargamos, instalamos el paquete y listos. Al abrir un proyecto que esté versionado tendremos los iconitos con los estados de los archivos: