Archive for Mayo, 2008
Un curioso comportamiento en las ventanas de abrir o guardar, en Windows Vista
El caso es que cuando en un programa tengo abierta la ventana de diálogo para cargar un documento o también para guardarlo, y antes de hacerlo, accedo a una ventana del explorador, al volver a la ventana de diálogo, esta a actualizado la ruta por la misma que aparecía en el antedicho explorador.
Por poner un ejemplo:
Tengo abierto el explorador mostrando una carpeta llamada ‘fotos’.
Ejecuto Photoshop, y pulso la opción para abrir documento.
se abre la ventana de diálogo para seleccionar una imagen, pero estoy en la carpeta que abre Photoshop por defecto.
Sin cerrar la ventana de diálogo, con alt+tab accedo al explorador.
Vuelvo a Photoshop, también con alt+tab, y …
Tachan¡¡¡ La ventana de diálogo ha actualizado la vista mostrando la carpeta ‘fotos’.
¿Será un bug?
Centrar una web, vertical y horizontalmente, con CSS y sin tablas ni efectos secundarios.
Para concretar desde el principio, este tip-tutorial describe como centrar un elemento de bloque, un div en este caso, de dimensiones fijas y que puede albergar un sitio web, en medio de la ventana de un navegador, tanto vertical como horizontalmente.
Lo que tiene de especial este artículo con respecto a otros de la misma temática, es que resuelve lo que vengo a llamar “efectos secundarios”, y me refiero al molesto comportamiento del div cuando redimensionas el navegador y parte de la web queda oculta sin que se pueda acceder a ella con las barras de scroll, no por que no estén si no por que no dan de sí.
Desde ahora me referiré al div#contenido como “Web“.
Para los más impacientes aquí está un ejemplo de web centrada vertical y horizontalmente, y a continuación el código xhtml/css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centrar una web en el navegador, vertical y horizontalmente, siempre visible y sin usar tablas</title>
<meta name="description" content="Sistema XHTML y CSS para centrar una web en pantalla, vertical y horizontalmente, siempre visible y sin usar tablas. Depurado por sergio Mas (saltarintro.com)" />
<style media="screen" type="text/css">
html, body {
height:100%;
margin:0;
}
body {
position:relative;
min-width:700px;
min-height:500px;
}
#contenido {
position:absolute;
background-color:#ccc;
width:700px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-350px;
}
</style>
<!--[if lte IE 6.0]>
<style>
#contenido {
top:expression(document.body.clientHeight < 501? "0px": "50%" );
margin-top:expression(document.body.clientHeight < 501? "0px": "-250px" );
left:expression(document.body.clientWidth < 701? "0px": "50%" );
margin-left:expression(document.body.clientWidth < 701? "0px": "-350px" );
</style>
<![endif]-->
</head>
<body>
<div id="contenido">
<h1>CENTRAR UNA WEB</h1>
<p> ... </p>
</div>
</body>
</html>
Ahora vienen las explicaciones.
La manera más fácil de centrar una Web es darle al tag html y body una altura (height) de 100%, añadir una tabla de una sola celda con alineación vertical y horizontal, y colocar dentro un div de dimensiones fijas.
Rápido, sencillo, y alejado de las buenas prácticas. ¿Por qué? Por que no se debe utilizar una tabla para maquetar una web, pues no es su cometido. Las tablas sirven para presentar datos de forma tabular.
Semánticamente, los tags dentro de una tabla disminuyen su valor específico de cara a buscadores, y los lectores de pantalla para discapacitados escupen una cantidad de información deslabazada casi imposible de entender, por poner un par de ejemplos.
Asi que el reto era crear una plantilla de partida que utilizara solo CSS.
El archivo html inicial sería así:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sin título</title>
<meta name="description" content="Sistema XHTML y CSS para centrar una web en pantalla, vertical y horizontalmente, siempre visible y sin usar tablas. Depurado por sergio Mas (saltarintro.com)" />
</head>
<body>
<div id="contenido">
<h1>CENTRAR UNA WEB</h1>
<p> ... </p>
</div>
</body>
</html>
Es muy importante incluir el Doctype adecuado por que de ello depende que los navegadores interpreten correctamente el CSS posterior.
En mi ejemplo he utilizado XHTML Transitional, pero creo que funcionará igualmente el Strict.
La mayoría de soluciones que encontré en Internet se pueden resumir así:
#contenido {
position:absolute;
width:700px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-350px;
}
Se da posicionamiento Absolute al div contenedor. Se establecen sus dimensiones. Se posiciona su esquina superior izquierda justo en el centro de la pantalla. Y mediante un margen negativo igual a la mitad de sus dimensiones se rehubica centrado en pantalla.
Y funciona. Pero …
En caso de hacer más pequeña la ventana cliente del navegador que el tamaño de la Web, aparecen los efectos secundarios:
El defecto es más acusado cuanto más disminuye la ventana del navegador.
Y se da tanto vertical como horizontalmente. Esto es así a causa de que el posicionamiento, por ser absoluto se situa independiente de la lista de elementos del código, y aunque tiene el centro en la página, los márgenes negativos pueden situar la web fuera de la vista de la ventana.
La solución es muy simple pero no funciona en Internet Explorer 6 y predecesores, (aunque esto también se resuelve después).
Simplemente hay que darle al bloque contenedor de la Web, en mi caso el propio Body, un ancho y alto mínimos, igual al tamaño del bloque #contenido.
html, body {
height:100%;
margin:0;
}
body {
position:relative;
min-width:700px;
min-height:500px;
}
Lo de la posición relativa permite que algún navegador, no recuerdo cual, interprete correctamente dichos ancho y alto mínimos.
Ahora el resultado de redimensionar el browser cambia aparentemente el comportamiento de la Web de una posicion centrada a otra fija desde la parte superior izquierda.
La visualización es correcta en Internet Explorer 7, Firefox, Opera, Safari, y en el extinto Netscape (incluso en la versión 7.2 que usaba un motor para renderizar diferente al de Firefox).
Pero en IE6 y también en IE5.5 (no quise remontarme más allá) no funciona, no hay soporte para ancho y alto mínimos. No interpretan el min-width y el min-height. Y no conseguí que ningún hack css funcionara correctamente.
Esas versiones del browser de Microsoft son importantes, sobre todo la 6, por que actualmente es la que tiene más presencia en Internet.
Lo ideal sería que todo se resolviera solo con CSS, pero su inacabada implementación en algunas versiones de Internet Explorer hacen tarea imposible dicho propósito.
Asi que “Para problemas propietarios soluciones propietarias”.
Gracias a los comentarios condicionales y a unos scripts propiedad de Microsoft, solo interpretados por IE, se logra el milagro.
<!--[if lte IE 6.0]>
<style>
#contenido {
top:expression(document.body.clientHeight < 501? "0px": "50%" );
margin-top:expression(document.body.clientHeight < 501? "0px": "-250px" );
left:expression(document.body.clientWidth < 701? "0px": "50%" );
margin-left:expression(document.body.clientWidth < 701? "0px": "-350px" );
</style>
<![endif]-->
Las expresiones incluyen un condicional terciario que cambia los valores de los parámetros CSS en función de las proporciones de la ventana cliente del navegador.
No deja de ser un parche, pero funciona y permite validar el XHTML y el CSS de la página.
Si alguien encuentra alguna manera de hacerlo todo con CSS, sin hacks, ni soluciones propietarias, que deje un comentario.
Me encantaría hacer un UPDATE al post y seguir aprendiendo.
Cargar un video de Youtube en un player de Flash con ActionScript v.2 (AS2)
Actualización 30/Oct/2008: Solucionado ¡¡¡ Visita el post “Descargar un archivo de video flv de youtube.com con ActionScript2 (AS2)” con el nuevo script.
Actualización 27/Oct/2008: Youtube ha realizado cambios que impiden la descarga de los videos en formato flv según el script que describo más abajo.
- – -
Me ha costado encontrar información adecuada en inglés y menos en español, pero al final, gracias al blog de Abdul Qabiz hallé el script adecuado.
createEmptyMovieClip("mc",getNextHighestDepth());
var _mcl:MovieClipLoader = new MovieClipLoader();
_mclListener = new Object();
_mclListener.onLoadInit = function(target:MovieClip) {
var _lv:LoadVars = new LoadVars();
_lv.decode(target._url.split("?")[1]);
_root.videoplayer_mc.contentPath = "http://www.youtube.com/get_video.php?"+"video_id="+_lv.video_id+"&t="+_lv.t;
_mcl.unloadClip(target);
};
_mcl.addListener(_mclListener);
_mcl.loadClip("http://es.youtube.com/v/2OBZHB5I89A",mc);
Lo he retocado un poco, pero el mérito es casi todo de Abdul. Y digo casi todo por que cuando pruebas el script en su versión AS2, este no funciona en Internet Explorer, aunque si en Firefox y Ópera. Y la solución la da un comentario del post, escondido casi al final de los 99 que tiene, (uff¡¡¡). Solo había que sustituir “onLoadStar” por “onLoadInit” en la cuarta linea: _mclListener.onLoadInit = function(target:MovieClip) {
El script de ejemplo está pensado para que funcione junto con el componente MediaPlayer que viene por defecto en el FLash8 y CS3.
Solo hay que arrastrarlo desde la pestaña de componentes al escenario, darle un nombre de movieclip, en mi caso “videoplayer_mc“, y añadir el script en el mismo frame pero en otra capa. Todo en la linea principal de tiempo.
Antes se podía acceder a los videos de Youtube añadiendo como parámetro de url, la página propia del video. Por ejemplo: “http://es.youtube.com/v/2OBZHB5I89A”.
Pero desde hace un tiempo esto no es suficiente y hay que añadir un parámetro más, que se obtiene en la respuesta del servidor de Youtube.
Para ver de que hablo:
La URL http://es.youtube.com/watch?v=2OBZHB5I89A también se puede escribir de esta manera: http://es.youtube.com/v/2OBZHB5I89A.
Simplemente se ha sustituido la cadena “watch?v=” por “/v/“.
Cuando se solicita la nueva dirección, el navegador devuelve en la barra de direcciones esta otra ruta: http://es.youtube.com/swf/l.swf?video_id=2OBZHB5I89A&rel=1&eurl=&iurl=http%3A//s3.ytimg.com/vi/2OBZHB5I89A/default.jpg&t=OEgsToPDskLL1pfly-W5a5NQnX3gbuKO
Donde lo que nos interesa se encuentra al final, bajo el valor de la variable “t“.
El script simplemente lo captura y monta el url necesario.
Os podeis bajar un ejemplo .fla: videoyoutube.zip.
Post from Flock
Pues eso. Probando el navegador social Flock añadiendo esta entrada desde su sistema.
Me permite poner etiquetas y categorías. Mola.
El efecto Ceguera a la Publicidad (Ad Blindness), alcanza a Adsense
photo credit: Akira Ohgaki
Conclusión:
Cuidado al maquetar contenido relevante con aspecto similar al de los anuncios textuales de Adsense, por que se puede confundir con publicidad y pasar desapercibido.
Análisis:
Google logró eludir el efecto definido como “Ceguera a la publicidad, (Ad Blindness)” que se da como consecuencia de estar permanentemente expuesto a banners chillones y animados. Y lo consiguió mostrando anuncios en formato textual, y prácticamente sin ninguna estética, (aunque esto ya ha cambiado).
Hace tiempo leí un articulo acerca de la eficacia de los enlaces textuales versus iconos gráficos. Al parecer el cerebro es mucho más rápido leyendo palabras que interpretando imágenes. Parece que esto lo entendió muy bien Google, que con su sistema Adsense encontró una muy buena manera de “hacer caja”.
Sin embargo, ese formato básico de texto, (título enlazable mas descripción breve), se ha convertido por si mismo en publicidad reconocible, y por lo tanto susceptible de ser pasada por alto, como consecuencia del efecto comentado antes, de la ceguera a los anuncios publicitarios.
Ya se da el caso de que un menú, o una lista de enlaces, casi sin formato, por su parecido al típico bloque de publicidad Google, no sea percibida en absoluto.
A vueltas con el theme
photo credit: Javier Aroche
Al final mantendré el tema Prosense, aunque con algunas variaciones.
Cabecera más alta y con foto, y todos los espacios de Adsense textuales, por que últimamente me estaban metiendo pedazo-banners a todo color de temática irrelevante para lo que manejo por aquí. Vamos, que Google-Adsense no acierta ni una cuando decide meter imágenes publicitarias en vez de textos.
El paradigma Twitter
De verdad que como no empiece a seguir algún “twittero”, es que no le veo utilidad. Me desconcierta su enorme popularidad. Quizás yo no sea su público objetivo.
Cambio de look
He decidido cambiar el tema gráfico del blog y me he decantado por el theme The Morning After, que aunque está pensado para magazines online, aporta un aire bastante distinto al habitual de los blogs pero aun no me he decido por ninguno.
Todavía tengo que customizar muchos detalles. Traducir frases y palabras. Añadir páginas como las de contacto, etc. Configurar los espacios para Adsense, que si bien no me sirven para hacerme millonario, al menos me procuran la satisfación por experimentar.
Asi que, si algo no funciona, recuerda que estamos en la época de las web2.0, W.E.B. (Web En Beta). 