Por medio de un simple javascript se puede crear un buscador personalizado en nuestro navegador favorito.
En Google, y en muchos otros buscadores, se pueden restringir las búsquedas a un dominio determinado usando la palabra reservada site:. Por ejemplo, en el caso de que queramos buscar el término firefox en cualquier página dentro del ooscarr.com que Google tenga en su índice, la consulta sería algo así:
También se puede crear un marcador para buscar automáticamente en cualquier sitio que se esté visitando.
Para buscar dentro de cualquier dominio al que pertenece la página que se tenga en frente con un par de clicks sin tener que tipear la parte site:ejemplo.com en Google, podemos
crear cualquier marcador (o favorito, o bookmark) presionando la clásica combinación de teclas ControlD. Si tienes mac, commandD.
En las nuevas versiones de Firefox, dice Marcar esta página
Luego vamos donde se editan los marcadores o favoritos,
Ya vimos los métodos mediante scripts para mostrar el canal alpha de los archivos PNG en Internet Explorer 6, ahora toca el turno de hacerlo desde el archivo mismo. Internet Explorer, desde la versión 4, soporta imágenes en formato PNG; pero el formato implementado no está completo. Sin embargo, hasta donde lo soporta, todavía podemos hacer algo.
Transparencia binaria
Primero hay que decir que es mentira que Internet Explorer antes de la versión 7 no soportaba transparencia en los PNG. IE sí podía mostrar pixeles 100% transparentes de forma nativa como lo hace con las imágenes GIF (y los PNG se comprimen más que sus equivalentes GIF), ya que para hacer transparente este color no se necesita un canal alpha, sino definir en la paleta cuál color no mostrar.
La imagen de la izquierda es semi-transparente por lo que IE6 no lo interpreta bien (el fondo no se ve). En cambio la imagen de la derecha sólo tiene 1 color 100% transparente que no necesita el canal alpha así que IE lo muestra transparente sin necesidad de scripts raros.
¿Cómo lo creamos?
Este formato, al igual que el GIF, consta de un índice de colores de los cuales podemos elegir por lo menos 1 como transparente para que Internet Explorer lo interprete correctamente.
Para crear estos archivos PNG en Windows, yo utilizo un pequeño (pero poderoso) software gratuito (mi favorito de Windows) llamado Irfanview, que al momento de guardar el archivo como PNG y seleccionar la opción Save Transparent Color, aparece un diálogo que permite elegir el solo y único color que Internet Explorer interpretará como transparente (antiguamente había que ingresar el número en la paleta de este color).
Al presionar guardar, aparecerá una miniatura de la imagen donde se debe seleccionar el color que será transparente.
En el caso del software GIMP (no estamos en condiciones de comprar Photoshop),
Una vez abierta la imagen, anda a Imagen > Modo > Indexado...
En el siguiente diálogo, cualquier combinación de configuraciones es buena (manteniéndose debajo de los 256 colores; mientras menos, mejor)
Luego, después de Guardar como..., aparecerá un panel donde es importante marcar Guardar los valores de los colores de los pixeles transparentes y no marcar Guardar el color de fondo.
Alternativamente, se puede hacer más fácil con un plug-in llamado Save for web. Y si tienes Fireworks esto es mucho más fácil (seguir leyendo).
Este tipo de archivo resulta igual que un GIF (excepto que no lo abrirán versiones anteriores a Internet Explorer 4), y como el archivo es más pequeño, para este tipo de imágenes ya todos se deberían olvidar de los GIF.
Es cierto que la gracia del formato PNG está en las semi-transparencias, y el método anterior sólo sirve para demostrar que PNG es una mejor alternativa para los GIF estáticos. Pero también se puede lograr semitransparencias compatibles con IE6 si llegamos al límite de lo que IE6 puede ofrecer con respecto al soporte de este formato.
Presentando el PNG 8
Otra manera de incluir imágenes PNG con alpha en versiones anteriores a IE7, es guardarlas en PNG 8, es decir, con una paleta de colores inferior a los 256 colores. De esta forma, el canal alpha se degradará más aceptablemente ignorando todos los colores semi-transparentes.
Este fantasma no se ve en IE6 e inferiores porque todos los pixeles tienen algún nivel de transparencia (esta vez sí se ve el fondo).
Y esa es la restricción. Al ignorar completamente cualquier color con canal alpha, este método sólo es recomendable para sombras o partes semi-transparentes que sean presindibles.
La sombra y sólo la sombra semi-transparente no se ve en IE6 e inferiores pero sí se ve en IE7.
Para guardar en PNG 8 hay que ir a Archivo > Vista previa y seleccionar PNG 8. Después de seleccionar Transparencia alfa, Exportar.
Nótese que con Fireworks también se puede guardar en el modo indexado mencionado anteriormente.
PNGNQ
Yo busqué cómo hacerlo en GIMP pero no encontré nada. Así que por ahora con comandos no más
Para instalar pngnq sólo tirándolo al path (o al /usr/bin), se necesita tener la librería libpng, que para mac se puede bajar desde Mac OS X Ports.
Cuando lo ejecutamos, tipeamos:
pngnq filename.png
O si queremos elegir el número de colores:
pngnq -n 256 filename.png
Y se creará el archivo resultante en la misma carpeta terminado en -nq8.png.
Da buenos resultados la mayoría de las veces en cuanto a colores, pero nunca se sabe lo que va a salir hasta que se ejecuta y se prueba en el maldito Internet Explorer 6.
¿Por qué las transparencias de las imágenes PNG no se ven en Internet Explorer 6 y qué puedo hacer para que se vean bien? Todavía hay mucha gente que no ha actualizado a Internet Explorer 7, o deshabilitaron el WindowsUpdate, o todavía no pasan ni a Windows XP. No sé.
Primero pensé: Al diablo con IE6. Pero hay veces en que necesito que las cosas funcionen en Internet Explorer 6, y los otros formatos no me dejan cambiar de posición las imágenes o el color de fondo sin tener que generarlas de nuevo y es muy complicado andar reproduciendo fondos con capas y un montón de marimañas más. Necesito definir una solución para este problema.
Por medio de javascripts
DirectX
Suena descabellado, pero el truco más famoso es el del javascript (el famoso pngfix.js) que arregla por medio de un estilo propietario de Microsoft el problema (AlphaImageLoader). También se puede aplicar sin necesidad de javascripts con el estilo CSS no estándar:
Este código lo que hace es dibujar una segunda superficie en el mismo espacio que ocupa el elemento y cargar el PNG ahí. Con DirectX.
Pero este código tiene sus problemas y limitaciones, como no funcionar en versiones anteriores a Internet Explorer 5.5, no poder usar mapas de imágenes (existe otro javascript para mapas de imágenes), no funciona con listas (hay otro javascript para listas), tampoco con fondos (otro javascript), ni rollovers (otro), consume muchos recursos hasta el punto de ¡bloquear algunos formularios y deshabilitar ciertos links!
SuperSleight
El mismo desarrollador del javascript anterior menciona otro javascript más completo SuperSleight que, traduciendo, tiene las siguientes ventajas:
Funciona tanto con imágenes inline como de fondo, reemplazando la necesidad de los javascripts sleight y bgsleight
Automáticamente aplicará position: relative a los vínculos y campos de formulario si no tienen ya una posición ajustada. (Puede ser deshabilitado.)
Puede ser ejecutado en todo el documento, o sólo una parte seleccionada donde tú sabes que están los PNGs. Esto es mejor para el rendimiento.
Detecta imágenes de fondo ajustadas como no-repeat y ajusta el scaleMode para recortar en vez de escalar.
Puede ser re-aplicado por cualquier otro JavaScript en la página — útil si ha sido cargado nuevo contenido mediante una petición AJAX.
El javascript en cuestión se puede descargar desde 24 ways y viene con un archivo GIF transparente x.gif que utiliza para hacer todo el truco.
Para implementarlo, basta incluir el llamado al javascript dentro del <head></head> dentro de comentarios condicionales para Internet Explorer menores o iguales a la versión 6:
Yo lo uso, pero no incluye solución para los fondos que se repiten o están posicionados. Así que restringí su funcionamiento para esta columna (<div id="content">) solamente descomentando la penúltima línea del javascript de la siguiente forma:
// limit to part of the page ... pass an ID to limitTo:
supersleight.limitTo('content');
HTC
Después, en wikipedia encontré otra solución. Esta vez sí es compatible con imágenes, con listas ¡y hasta con fondos repetidos y posicionados al mismo tiempo!
En cada elemento que queramos usarlo, el truco es el siguiente, por ejemplo:
Por supuesto, la propiedad CSS no estándar "behavior" sólo existe en Internet Explorer (es una de las Microsoft Windows Script Technologies) y el archivo HTC (con licencia BSD, MIT y LGPL, al igual que el iepngfix.htc del que está basado) se puede descargar desde la página de fx-iepngfix.htc.
Se podría crear un javascript que agregue esta propiedad a todos los elementos que lo necesiten y luego llamamos a dicho javascript desde comentarios condicionales. Puede ser... Hm... ¡Oh! ¡Dicho y hecho! ¡Alguien más ha logrado esta solución definitiva!
Otras librerías
En Google code existe un proyecto que intenta arreglar éste y otros problemas de Internet Explorer a través de un javascript. Se trata de IE7.js e IE8.js. El primero arregla y ajusta las versiones anteriores de Internet Explorer para que se comporte como Internet Explorer 7; y el segundo,
mejora también a Internet Explorer 7 para que incluya arreglos que no alcanzaron a integrarse en él. Todavía no soporta los fondos repetidos o posicionados. :-(
Soluciones como estas vienen integradas en la mayoría de las librerías javascript como:
Siento que me he alargado demasiado con este –al principio simple– post. Existen otras técnicas que solucionan todos estos problemas más fácilmente y directo al hueso, que no revelaré hasta la próxima entrada.
Ustedes saben. Los frames y los iframes desaparecieron de la especificación XHTML a partir del XHTML 1.1, y el pobre iframe no ha sido considerado para el HTML 5. Entonces, si necesitamos embebeer contenido de otra página en la nuestra, ¿cómo lo haremos?
Si es sólo por presentación, usa CSS
Si quieres poner un iframe sólo para que se vea la barrita de desplazamiento dentro de la página, deberías usar hojas de estilo como en el bloque de noticias como aparece en la siguiente página:
Si es muy necesario cambiar su contenido sin actualizar la página, podrías usar métodos javascripts como el XML HTTP Request.
Un objeto HTML
Si es necesario usar el viejo iframe, existe la solución de usar un objeto de tipo HTML embebido dentro de la página.
Por ejemplo, a continuación debería aparecer un pequeño convertidor de divisas:
Prueba presionando el botón Convert.
Éste es el código:
<object type="text/html"
data="http://finance.google.com/finance/converter?
from=USD&to=CLP&auto=1"
width="400" height="150"
style="border:1px solid #000;">
No se pudo mostrar el convertidor de divisas en esta página.
Visita <a href="http://finance.google.com/finance?q=usdclp"
rel="external">finance.google.com</a>.
</object>
Internet Explorer
Lo anterior no funciona en Internet Explorer. En vez de mostrar un formulario para convertir divisas, sólo apareció el objeto con una página en blanco.
Internet Explorer cree que todos los object son elementos ActiveX. :-/
Internet Explorer bloquea el contenido embebido de otros dominios (incluso entre subdominios distintos), excepto si el HTML se está ejecutando bajo localhost. Según ellos, por razones de seguridad, y puede ser que estén en lo correcto en tratar a este objeto como un elemento independiente... Hmm... Los desarrolladores también dijeron que puede ser que eliminen esta restricción en futuras versiones beta de Internet Explorer 8. Esperemos.
Así que el método de objetos sólo funcionará para páginas del mismo dominio bajo Internet Explorer.
Internet Explorer además muestra unas extrañas barras de desplazamiento y un borde cuando incrustamos objetos HTML. Para deshacernos de éstos, hay que definir los siguientes estilos dentro de las páginas a embeber:
html {
overflow: auto;
border: none;
}
Se debería ver en Internet Explorer.
Internet Explorer, adicionalmente, no reconoce que un link dentro de la página incluida tiene a la página que la contiene como su _parent. Prueba haciendo click en el botón XHTML 1.0 que está dentro del objeto anterior y compara dónde se abre la página. Así que sumemos motivos para odiar a IE.
Pruebas en otros navegadores
Una página francesa hizo la prueba en los navegadores más populares de su época la manera en que cargan este y otros tipos de objetos, y estos fueron sus resultados:
Al usar este método de objeto, también desaparece el soporte de abrir un link directamente dentro del objeto desde afuera como se podía hacer antiguamente con los iframes a través del desechado atributo target.
XFrames?
El tercer método no lo sabemos. Así como el W3C desechó los formularios con <form> en favor de los Xforms, a partir del XHTML 1.1 los frames ya no son soportados en favor de los Xframes.
Xframes es una redefinición de los framesets, que permite definir el contenido de los frames desde la URI para así no echar a perder el botón de retroceso o las direcciones guardadas en marcadores, además de facilitar el trabajo de los buscadores. Pero nada se dejó como alternativa al pobre iframe, por ahora.
En resumen
Evita usar iframes. Aparte de que son inseguros, pasados de moda y próximamente obsoletos; lo más recomendable es programar la forma de reusar código en un lenguaje de programación interpretado en el servidor.
Pero si hay que usar iframes,
Si el contenido es del mismo dominio y no se cambiará desde la página contenedora, el objeto HTML debería ser la solución.
Si se desea cambiar el contenido de las páginas incluidas, las llamadas javascript HTTP Request (em, como AJAX) podrían ser una alternativa.
Si se desea incluir contenido externo sin olvidar a Internet Explorer, no quedará otra que seguir usando iframes (con algún DOCTYPE antiguo o transicional). O utilizar los comentarios especiales <!--[if IE]> e <!--[if !IE]> <--> como lo he hecho en mi recién inauguradoformulario de comentarios.
Esto es un blog escrito por un tal Oscar desde Iquique (Chile), para compartir y comunicarse con el resto de la comunidad de Internet. También escribo opiniones y HOW-TOs a pedido.
