Después de varios meses de tener Twitter rondando por mis servicios web, tengo claro que de momento no me es util. No tengo necesidad de decir al mundo lo que hago en un momento dado ni de seguir lo que hacen otros.
Estoy seguro de que no he explorado lo suficiente como para encontrar la forma de que me resulte atractiva la plataforma Twitter, pero si esto no sucede de una manera natural, algo falla.
Dejaré abierta la cuenta por que nunca se sabe …
photo credit: louise lynn
A veces uno se vuelve loco para encontrar fallos en el código Html cuando en realidad las causas son otras.
Si tu navegador habitual no quiere cargar una imagen que sin embargo otro browser no tiene problemas en visualizar, comprueba que el modo de la imagen está en RGB, por que si es CMYK, podría aparecer el típico recuadro de “aquí va una foto pero no la encuentro”.
Desconozco que navegadores muestran ese comportamiento. Mi Firefox3/WindosVista carga los jpg en CMYK, pero IE7 no.
Menos mal que la experiencia es un grado y damos antes con las soluciones.
Este es el primer año que asisto a los talleres Subflash. Estuve como oyente ya que se celebró en Alicante, de donde soy oriundo.
Tenía una pequeña idea preconcebida por la información que me llegó de ediciones en años anteriores. Pensaba que sería una especie de cursillo de actualización de Flash a nivel IDE y ActionScript, y me encontré con una jornada y media de charlas sobre desarrollo web, pero de temáticas variadas, a saber, JSFL, Posicionamiento WEB, Migración a AS3, Constructivismo Blog, y Redes Sociales.
El nivel de las charlas fue del tipo “te enseño lo que hay, que es interesante, y luego ya tu mismo …”. Es normal, en una hora y poco no se puede profundizar, pero siempre descubres información valiosa.
Lo interesante de estos talleres es sin duda la cantidad y calidad de los contactos que puedes hacer.
Lo malo de residir en la misma ciudad donde se celebra el evento es que te pierdes mucho de esa convivencia. El viernes ni asistí por que no había ninguna charla, de copas nada que me espera mi family, y el domingo me tuve que marchar antes del sorteo final por una movida en la empresa donde trabajo y ni siquiera salí en la foto de grupo.
¡¡¡ Que sí !!! Que yo estuve allí, en el Subflash 2008 de Alicante. Que aunque me he buscado en las fotos y no me he encontrado, yo soy el que le hizo una de las preguntas clave a Armando de Criterion:
Pero tú, ¿Cuánto ganas con Adsense?
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?
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.
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.
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.
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.
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.