IFRAME es una etiqueta HTML que os puede servir para poner en vuestro espacio el contenido que habeis generado en otras páginas. El resultado sería como una mezcla de webs, pero transparente para el usuario.

También puede servir como truquillo-chapuza para insertar un flash que se nos resista mediante el procedimiento estándar o del que no encontramos la dirección correcta.

Por ejemplo, Reygadas nos preguntó como meter unas presentaciones que había creado en una plataforma y que estaban en flash, para mostrarlas en otro blog suyo. Esto fue lo único decente que se nos ocurrió para que pudiera hacerlo. El resultado no es malo, aunque no sé si era exactamente lo que andaba buscando. Aquí un ejemplo de como quedaría y a continuación el código:


Sólo tenemos que preocuparnos de darle el tamaño adecuado (WIDTH - HEIGHT). Lo de meterlo en un DIV es para evitar que algunos navegadores hagan más chico el espacio para el IFRAME y salgan las barras de desplazamiento. No obstante, si quereis quitarlas para que no salgan en ningún caso, habría que poner el parámetro SCROLLING igual a NO. El atributo FRAMEBORDER ya os podeis imaginar para qué sirve.

Espero que me admitais sin mucho incomodo, estos posts con contenido personal, que no sé siquiera como etiquetar, porque el caso es que tengo ganas de hablar sobre estas cosas con alguien y ahora mismo no tengo nadie a mano. Nadie que esté un poco interesado por este mundillo blog, porque entre mis familiares, amigos y compañeros, muy pocos hay que usen siquiera el correo electrónico con frecuencia semanal. Así que de blogs, ni hablamos.

Pero a lo que iba... sigo gratamente sorprendido por la evolución de este blog en el concurso y es que, después de alguna que otra semana, ¡seguimos primeros en nuestra categoría! Por cierto que no sé si ya lo he dicho, pero qué categoría más poco apropiada... aunque no habia otra mejor.

Y para mayor alimento de mi ego, en las dos clasificaciones dónde participan prácticamente todas las bitácoras, Diseño y General, en este momento estamos segundos en ambas (en la primera citada incluso sólo por cuestiones de alfabeto), lo que hace a mi parecer, una magnífica media.

Le he dado unas vueltecitas al asunto y creo tener claro que el motivo principal de estar ahí, no es la discutible calidad del contenido de este blog. Para genios en esto de tunear bitácoras ya están Rosa, Gem@, Vagabundia, Pizcos, La Bloguería... entre otros muchos y perdón por no continuar con la lista. Pero claro, no se han presentado y me lo han puesto fácil.

La verdadera razón creo que sólo es, que los que leeis esto de cuando en cuando, de alguna forma habeis querido agradecer el haberos contestado en alguna ocasión ante vuestros problemas con Blogger. Simplemente eso. Nada más y nada menos.

Pero como a nadie le amarga un dulce (salvo a los diabéticos... mucho ojito), pues muchas gracias y disfrutaremos del momento, que todavía no tengo claro si en el caso de quedar finalista asistiré o no a la gala. Tengo un dilema interior... Pero cada cosa a su tiempo.

Lo cierto y al hilo del tema, es que el último ascenso ha sido debido a la descalificación del blog que iba en primer lugar por irregularidades comprobadas: Yo soy el Anticristo.

Muy mona esta plantilla que podeis encontrar en BTemplates. Se llama Emplode y ya que estamos, si la quereis descargar, sólo teneis que pinchar en este enlace: Descargar plantilla Emplode.


No obstante, a través de un lector hemos detectado en ella un problema menor pero bastante molesto, que por otra parte resulta fácil de solucionar. El caso es que cuando se intenta ver la estructura de la página desde Elementos de Página, o se accede a esa misma vista para añadir o mover gadgets, podemos comprobar que parte de las secciones no se ven.


En un principio parece que no le ocurre nada a la plantilla, pero cuando sabemos que tenemos 6 gadgets y que sólo vemos 4, pues ya empezamos a mosquearnos ¿no? Además, tampoco son visibles las secciones del pie de página. Tras el arreglo esto es lo que se ve, comprobando que efectivamente había más:


Y ahora que hemos visto lo que realmente pasa, la solución está en localizar lo que hace que se nos ocupe todo el alto disponible con esas secciones. El problema está en la parte de código reproducida a continuación y no es ni más ni menos que un simple atributo HEIGHT que hemos tachado y que vosotros debereis borrar:



Lo dicho, problema molesto pero con una fácil solución.

Cuando necesitas material para ilustrar tus posts, es bastante recomendable tener algunos links a mano dónde te puedan facilitar la tarea de encontrar imágenes... buenas. En esa lista, no puede faltar la dirección de José Luis Vila, que a través de su blog Banco de Imágenes Gratuitas, recopila con mucho acierto enlaces a numerosas galerías de toda la Red.


Más de 8000 suscriptores y formar parte del Blogs of Note (los blogs destacados por la administración de Blogger), avalan su manera de trabajar. Y como muestra, un botón:

Un enlace en una web, no sirve casi de nada si no se marca de alguna manera. Un link con la misma apariencia que el resto del texto en el que está incluido, pasará desapercibido y será improbable que alguien pinche en él. En ese caso, ¿para que molestarse en ponerlo? (Diccionario informático básico. Link = Enlace)


Debe ser por eso, que todos los navegadores destacan de alguna manera, aunque el programador de la web no lo haya previsto, los enlaces creados con la etiqueta A.

La forma habitual de destacar los enlaces es mediante el subrayado de la palabra que sirve precisamente para enlazar (un borde si se trata de una imagen). Además, se suele utilizar un efecto de cambio de color al pasar el puntero por encima (hover) y otro color distinto para los enlaces ya visitados.

Para cambiar las opciones que por defecto lleva cada navegador, tendremos que declarar en nuestra plantilla, qué es lo que nosotros queremos que suceda en todos esos casos. Así, para modificar todos los enlaces, tras el BODY solemos encontrar:


Si queremos cambiar los enlaces de sólo cierto bloque de información, habrá que localizar la clase que controla el estilo de ese bloque y definir para ella estas misma pseudoclases. Por ejemplo, para alterar sólo el aspecto de los enlaces dentro del cuerpo principal de los posts:


Sabiendo esto y a través de otros atributos CSS, podemos crear algunos efectos algo distintos:

* SUBRAYADO CON UNA IMAGEN

Realmente no es un subrayado. Aplicamos una imagen alargada y estrecha como fondo (BACKGROUND) del enlace y lo desplazamos a la línea base (BOTTOM). Si es necesario, porque ocupe varis pixels, se inserta un desplazamiento abajo mediante un PADDING-BOTTOM. Si el principio y el fin de la imagen no enlazan bien gráficamente (REPEAT-X), entonces mejor usar una imagen los suficientemente larga. Teniendo en cuenta que un enlace no suele pasar el tamaño de una frase sencilla, seguramente con 400px tengais de sobra. Preferentemente, usar GIF con transparencia (o PNG).




* JUGANDO CON EL FONDO

En este caso, se puede utilizar un color plano o una imagen para conseguir al mismo tiempo un efecto rollover.


Ejemplo enlace 1


Ejemplo enlace 2
Ejemplo enlace 3


* UN ICONO PARA IDENTIFICAR LOS ENLACES

Otra forma de destacar nuestros enlaces, es mediante un pequeño icono que podemos colocar delante o detrás de éstos. Hay que tener cuidado de que el alto del icono sea el mismo que nuestro tamaño de fuente (FONT-SIZE), para que el conjunto quede lo mejor posible. Dejaremos un pequeño margen y luego situaremos el fondo en el lado adecuado.


Ejemplo enlace 1


Ejemplo enlace 2

Hace tiempo ofrecimos un sistema para colocar en nuestra plantilla, los botoncitos que posibilitan que los lectores enlacen directamente nuestras entradas, con los sistemas de promoción de noticias más conocidos. Desde entonces ha llovido mucho y actualmente hay diversos servicios online que nos permiten hacer lo mismo de una manera más fácil.

Este es el caso de Te!! a Friend (cuéntaselo a un amigo), que mediante unos pocos pasos nos facilita el código para instalar un icono que despliega un gran menú con muchos enlaces a los portales más conocidos. Realmente creo que no son muchos, sino prácticamente todos.

Es indispensable registro, porque el gadget es personalizado, aunque supongo que eso no resulta un gran problema. Una vez hecha la primera instalación, podemos modificar el aspecto del icono de enlace en cualquier momento, así como la configuración del gadget (ventana modal, menú desplegable) y los tipos de enlaces que queremos mostrar.

* MODO BPT ON - TUTORIAL
Tras acceder a la web de Tell a Friend, buscamos una pestaña naranja con el mensaje "Sign up - for me" y pinchamos en ella. Luego nos piden nuestra cuenta de correo, nuestra contraseña (dos veces) y cuando esté el formulario completo, con "Create Account", confirmamos el registro.


Tras un mensajito informativo, recibiremos un correo electrónico con un enlace. Pinchamos en él o copiamos y pegamos esa URL en nuestro navegador. Aparece una nueva pantalla para aceptar las condiciones de uso y la segunda casilla es para suscribirse a noticias del servicio. Seleccionamos/deseleccionamos respectivamente, aceptamos y ya nos sale la pantalla para hacer login (introducir usuario/password).

Una vez logueados nos sale un texto indicando que tenemos que realizar cuatro pasos. Pinchamos en el botón azul inferior (Add Widget) y una ventana modal aparece encima de la anterior, para que seleccionemos el tipo de nuestro espacio. Para un blog, es la segunda opción. Al seleccionarla aparecen varias opciones de plataformas. Seleccionar la vuestra pinchando en el recuadro correspondiente.


Continuamos en una nueva pantalla, tecleando nuestra URL y el nombre que queremos ponerle al gadget.


Ahora otra serie de opciones para marcar/desmarcar los servicios que queremos enlazar. Si queremos quitar algunos, ya navegamos por el menú de la izquierda de la ventan y vamos seleccionando/deseleccionando servicios. Si los queremos todos, directament pinchamos en Create Gadget y nos sale una última pantalla con el código HTML necesario. Copiar y pegar dónde se especifica aquí.


* MODO BPT OFF - TUTORIAL

El caso es que hoy ha comenzado la votación del concurso 20blogs 2009 y una vez más, el personal me ha sorprendido. En esta ocasión con un arranque del concurso fabuloso para Oloblogger. Como en el poco tiempo que esto lleva en marcha, ya habeis dejado algún que otro comentario al respecto -cosa que agradezco enormemente- por aquí y por acullá, y no quiero que las entradas se sigan "contaminando" de off-topics, aquí en este mismo post os podeis desahogar con vuestras opiniones.

Posiblemente no lo vais a creer, pero ni siquiera recordaba las fechas de votación y ha sido por un correo de esos automáticos de la organización, que he pinchado a ver que tal. "A ver que tal" ha resultado que este espacio está entre los primeros puestos de la clasificación general (3º), de la categoría ciencia/tecnología (1º y eso que no es una categoría muy adecuada) y en diseño (5º) categoría a la cual nos presentamos todos al ser gratis ;)

Claro está que esto es sólo efecto del tirón inicial de tantos amigos que tiene esta web, de la falta de muuuuuchos votantes por ejercer su derecho a sufragio y de la matemática del empate ¡pero hace mucha ilusión, coño! Y visto lo visto, me he decidido a colocar un aviso en lugar bien visible a ver si la cosa continúa así.

Aunque ahora tengo un pequeño dilema... y es que realmente no sé todavía si quiero ganar o no. Se vive muy bien siendo un internauta anónimo y no sé si me compensará la fama y la fortuna. Bueno la fortuna sí, a la fama que le den, que no da más que trabajo en blogs como este xD

Como el año pasado me quedé sin una puñetera captura de pantalla y no tengo mejor sitio dónde dejarla, pues aquí van para mi propia memoria, porque seguro que en el rato que llevo escribiendo este post, las cosas han cambiado... a peor.

De todas formas, gracias por este ratico a los que habeis votado.

Lo de hacer un elemento semitransparente es relativamente fácil: sólo se trata de añadirle un atributo que indica tal cosa. Los problemas empiezan cuando encontramos que la transparencia es tratada por cada navegador de una manera distinta. Y ya no me refiero a diferencias entre Firefox, Internet Explorer, Opera, Chrome, Safari... si no que hay diferencias de interpretación incluso entre versiones.

En realidad, deberíamos hablar más bien de opacidad, porque así es como lo tratan la mayoría de navegadores. Podemos definir una opacidad del 100% para figuras totalmente opacas u otro valor inferior para distintos grados de imágenes traslúcidas. Olvidaros del 0% porque para ponerlo transparente del todo creo que mejor no lo ponemos ;)

Los distintos códigos que conozco en versión CSS son:

• Internet Explorer --> filter:alpha(opacity=100);
  
• Internet Explorer 8 -->
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
• Firefox, Netscape, Mozilla --> -moz-opacity:0.1;
• Opera, Safari, Chrome --> opacity: 0.1;
• Khtml --> -khtml-opacity: 0.1;

IE fija la opacidad desde 0 (totalmente transparente) hasta 100 (totalmente opaco). El resto respectivamente entre 0 y 1. Para IE 6 no conozco ningún atributo que funcione.

Así las cosas y para evitar problemas, lo mejor que no lo más práctico, será añadir a nuestra etiqueta STYLE, todos los códigos conocidos:


Todavía no he aprendido el orden exacto en que hay que redactar códigos para distintos navegadores, pero en este caso, el código de IE8 debe ir obligatoriamente delante del de los otros IE, así que ojito con cambiarlos de orden. Si alguien conoce otros atributos que sean comunes a más navegadores u otra forma de ordenarlos para optimizar el resultado, sería eternamente agasajado.

Cuando vayamos a utilizar con cierta frecuencia el efecto de transparencia, lo más cómodo será crear una clase... o varias:



Luego sólo habría que aplicar la clase deseada al elemento que queramos: DIV, IMG, LI,... Por ejemplo:




Por último otra manera algo más farragosa cuando hay que usarla para muchos elementos, pero que no falla con ningún navegador: con eventos Javascript. Así de paso le metemos un fácil rollover.

Para cierto tipo de blogs que quieren mostrar un contenido fijo, a modo de post permanente, puede ser útil eliminar la fecha del mismo para conseguir el efecto de "página especial" que por ejemplo Wordpress sí permite. Este tipo de post puede ser un índice, un diccionario de términos relacionados con el blog, un tutorial,... en definitiva, cualquier cosa que el autor quiera destacar en su menú o barra lateral mediante un enlace.

El código que controla la "impresión" de la fecha de cada post está en el LOOP principal:

Como veis, hay una condición, una clase de estilo para la fecha (normalmente DATE-HEADER), la etiqueta DATA que controla la fecha de cada post y luego los cierres de cada una de las anteriores etiquetas. La condición lo que hace es comprobar si existe o no la fecha del post. Que no exista no es muy normal, pero se suele hacer esta comprobación para evitar errores de interpretación de código.

Pues bien, para no mostrar la fecha en NINGUN POST (ojo, en ninguno) simplemente hay que borrar todo el contenido entre B:IF y /B:IF, ambos inclusive. Esto en un principio no es demasiado práctico para un blog, pero en fin, ahí queda para el que le interese.

Lo que queremos en esta ocasión es ocultar la fecha pero para un solo post y para ello, aprovecharemos la condición ya existente, pero transformándola para que nos la compare con un post en concreto. Recordamos cómo usar condiciones en Blogger:


Si la URL es distinta a la indicada la fecha se mostrará. Evidentemente, si la URL es la indicada, la fecha NO se mostrará.

Si en lugar de tener un sólo post de este tipo tenemos varios, entonces necesitaremos anidar tantos IF como posts con sus correspondientes URL's:

Un ejemplo del truco funcionando en este post de ejemplo.

Dedicado a Priamo que ya le venía haciendo falta este truquillo.