JMiur [E]

Alguna vez contaba sobre las llamadas ventanas de alerta, esas pequeñas ventanitas que usan los navegadores para mostrar algún tipo de información: o bien para solicitar la confirmación de algún tipo de acción

Si se siguen usando es porque son útiles y simples de implementar aunque sean poco atractivas. Abrir una ventana desde la página donde estamos y poder controlarla es algo que siempre ha sido molesto, las pestañas de los navegadores nos hacen la tarea más sencilla porque si queremos abrir una página en otra ventana la demora es importante y nosotros siempre queremos que a cada click le corresponda una acción instantánea. No es un capricho, casi es una necesidad ya que si no ocurre así, solemos impacientarnos y hacer click otra vez con lo cual, simplemente añadimos leña al fuego y terminamos con varias ventanas abiertas ... todas repetidas.

Con el tiempo, aparecieron las ventanas modales tipo Lightbox y resolvieron parte del problema pero las ventanas de alerta siguen siendo imprescindibles.

En leigeber hay un script muy sencillo que nos permite simular ese tipo de ventanas y darles algún tipo de presentación gráfica personal. Por supuesto, no las reemplazarán pero, en determinados casos podría llegar a ser una alternativa viable.

En el sitio disponen de un ZIP que contiene el script y los ejemplos pero, si se quiere ahorrar un poco de trabajo, puede usarse este otro ZIP ya modificado para usar en Blogger y donde las imágenes utilizadas han sido alojadas en ImageShack.

Lo que necesitamos entonces son dos archivos, el script y la hoja de estilo. Subimos ambos a un servidor como Google Pages y luego los agregamos en la plantilla antes de </head>:
<script type="text/javascript" src="URL_dialog_box.js"></script>
<link rel="stylesheet" type="text/css" href="URL_dialog_box.css" />
Eso esto todo, ahora, podemos usarlas en cualquier parte del blog para mostrar información de algún tipo.


El script tiene cuatro modelos posibles: Error, Warning, Prompt y Success que en realidad son muy similares y que sólo cambian estéticamente.

Las ventanas se abren simplemente con un enlace donde el atributo HREF será la llamada a la función del script:
<div id="nombre">
<a href="javascript:showDialog('nombre',''TITULO','contenido','tipo',tiempo);">
TEXTO/IMAGEN
</a>
</div>
Donde:

nombre será el ID del bloque que contenga el enlace (es obligatorio que esté dentro de un DIV)
TITULO es el texto que se mostrará en la barra superior de la ventana
contenido es el texto a mostrar que puede o no contener algunas etiquetas HTML
tipo es uno de los tipos definidos (error, warning, prompt, success) y que sólo definen el tipo de gráfico que vemos
tiempo es un valor optativo que colocamos si queremos que la ventana se cierre sola en un determinado momento (el valor indica la cantidad de segundos que permanecerá visible)

Un ejemplo sencillo:
<div id="dialogo">
<a href="javascript:showDialog('dialogo','ERROR','Este es el texto a mostrar.','error',2);">
CLICK
</a>
</div>
Esta es una ventana de tipo error pero que, en realidad, puede contener cualquier otra cosa, por ejemplo, un mensaje de despedida.

Los otros modelos son similares, sólo cambia el tipo:

Este es el modelo warning o la ventanita amarilla.

Este es el modelo Success o la la ventanita verde

El que falta es el modelo llamado prompt. Supuestamente, debería servirnos para dar una respuesta a algo pero no es así, sólo es una ventanita similar a las anteriores pero de color azul así que, mejor, la cambiamos por algo que sea un poco más personal.

La personalización podemos hacerla directamente desde el CSS de la hoja de estilo. Sólo debemos entender un poco como está armada:


Esta es una breve explicación de cada una de las propiedades.
#dialog { /* es el bloque general de la ventanita */
padding: 10px;
position: absolute;
width: 425px;   /* es el ancho de la ventana y podemos establecer cualquier valor */
z-index: 200;
}

#dialog-header { /* es la barra superior */
display: block;
font-size: 14px; /* el tipo de fuente a usar */
font-weight: bold; 
height: 21px; /* la altura y el tipo de fuente están relacionados */
position: relative;
padding: 3px 6px 0 6px;
width: 100%;
}

#dialog-title { /* el texto del título a la izquierda */
float:left
}

#dialog-close { /* la imagen para cerrar la ventana a la derecha */
background:url(URL_imagenCERRAR) no-repeat; 
cursor: pointer;
float: right;
height: 11px; /* el tamaño depende de la imagen a usar */
margin: 3px 3px 0 0;
width: 11px; /* el tamaño depende de la imagen a usar */
}

#dialog-content { /* es el bloque inferior con el contenido */
color: #222222; /* el color de los textos del contenido */
display: block;
height: 160px; /* la altura del bloque */
padding: 10px 6px;
font-size: 13px;
width: 100%;
}

/* la definición de cada uno de los modelos tiene dos partes */

.errorheader { /* la barra superior */
background:url(URL_imagenFondHeader) repeat-x; /* el fondo es una imagen */
color: #6F2C2C; /* el color del texto */
border: 1px solid #924949; border-bottom: none; /* el borde */
}
.error { /* el bloque inferior */
background:#FFFFFF url(URL_imagenFondo) no-repeat right bottom; /* el fondo es una imagen */
border: 1px solid #924949; border-top: none; /* el borde */
}

/* los otros modelos son iguales, sólo cambian las imágenes y los colores */

.warningheader { ... }
.warning { ... }

.successheader { ... }
.success { ... }

.promptheader { ... }
.prompt { ... }
Como todos los modelos tienen las mismas propiedades excepto las imágenes de fondo y los bordes, si quisiéramos modificarlas deberíamos agregárselas y forzarlas utilizando la palabra !important. Por ejemplo, cambiamos el modelo prompt:
.promptheader {
background: url(URL_ImagenFondoHeader) repeat-x;
border: 1px solid #000000; border-bottom:none;
color:#FF9933 !important; /* establecemos el color del título */
}

.prompt {
background:#101921 url(URL_ImagenFondoContenido) bottom right no-repeat;
border: 1px solid #333333; border-top:none;
color: #FFFFFF !important; /* el color de los textos */
font-size: 16px !important; /* el tamaño de la fuente */
font-family: Georgia !important; /* el tamaño tipo de fuente */
}
Por último, si queremos colocar etiquetas HTML en el contenido de las ventanas debemos tener en cuenta dos cosas: primero, no es posible usar cualquiera, el problema fundamental es el uso de las comillas así que muchas son complejas o imposibles. Segundo, debemos cambiar los símbolos < y > por sus respectivos códigos: el signo menor lo escribimos como &lt; y el signo mayor como &gt;

Un pequeño ejemplo del contenido de una ventana con etiquetas, si quisiéramos escribir esto:

<p align=left><small>Este es un ejemplo de una ventana<br>de diálogo personalizada<br>cambiando sólo imágenes de fondo<br>y alguna otra propiedad CSS.</small></p>

Deberíamos colocar lo siguiente sorpresa2

&lt;p align=left&gt;&lt;small&gt;Este es un ejemplo de una ventana&lt;br&gt;de diálogo personalizada&lt;br&gt;cambiando sólo imágenes de fondo&lt;br&gt;y alguna otra propiedad CSS.&lt;/small&gt;&lt;/p&gt;

17 comentarios:

solrac  

Estaba planeando utilizar el Lightbox o el iBox para mi nueva versión del traductor pero creo que esta es otra buena alternativa.

Muy bueno JM ;)

Responder
Claudio 'Poca Tinta'  

Muy interesante, la verdad que esta super aplicable y lo bueno es que se puede personalizar.

Cuando veo todo lo que se puede hacer con tus post... me pregunto: por qué los Srs. de Blogger nos limitan tanto?... Un misterio para el hombre.

Este efecto se ve bien en todos los navegadores.
Saludos,

PD. Sabes que el IE7 en Vista y el Safari, no respeta las -tablas- cuando las centramos y las muestra siempre pegadas al lado izquierdo, o sera el windows vista!!!, me enferma tocar la maquina de mi hermano.

Responder
JMiur  

solrac: para tu traductor sería útil ya que el script es mucho más pequeño que los otros ¿Tendremos pronto una nueva versión? :D

Claudio, por lo que probé, funciona bien en todos pero, el archivo CSS original hay que modificarlo un poco, por eso coloqué uno modificado.

Tablas en IE. Deberías probar algo así:

<table style="text-align: left; margin: 0 auto; width:valorpx;">

o bien:

<table style="text-align: left; margin: 0 auto;">

Cualquier cosa, me dices dónde está el problema específico y me fijo porque podría ser que alguna otra propiedad esté molestando.

Responder
Fender Stratokaster  

¡Qué maravilla!

Hace sólo dos días logré insertar un gif que indicara la posibilidad de ver un archivo Scribd en pantalla completa. Hoy con ayuda de este post que refieres lo modifiqué para que no abandonara la página del blog. De momento estoy feliz (orgullosos incluso) jejeje con el resultado, espero pronto aprender a remplazar el gif por un botón.

Gracias y saludos.

Responder
Claudio 'Poca Tinta'  

Te envio una captura de imagen a tu email, sobre las tablas.

Saludos

Responder
JMiur  

Felicitaciones, Fender :D Y sí, así es uno se pone orgulloso de esas cosas :D

Claudio: Recién recibí el mail ... me has obligado a instalar Safari :D

Con Windows XP en IE7, las tablas se ven centradas pero con Safari no así que trataré de encontrar alguna explicación.

Hay otras cosas que veo "raras", no muchas pero algunas hay.

¡Por Dios!!! ¿Por qué los que crean navegadores no se ponen de acuerdo de una vez por todas? :D

Responder
Claudio 'Poca Tinta'  

J. Muir,

Te diré que mi esposa me decía que en su trabajo se veía distinto y no le creía, y uno que quiere dejar todo prolijo.

Que vaina!!!! :D

Responder
JMiur  

Que en Safari se vea distinto, está dentro de lo lógico, yo, lo veo tal cual tu imagen de captura. Eso, debe tener alguna solución y habrá que buscarla.

Lo raro es lo de IE7, en XP se ve bien y en Vista no. Eso sí que es rarísimo porque se supone que es el mismo navegador.

Para mi es una novedad; veré si encuentro información sobre el tema.

Responder
Gem@  

El otro día proporcionaba un script para añadir ventanas de alerta, hoy veo esta entrada y te puedo asegurar que no he parado de sonreír en un buen rato. !Que grande eres y que pequeñita se siente una a tu lado jajajajajajaja¡

Responder
JMiur  

Jajajaja una exageración, Gem@ XD

Mira que esto no reemplaza las ventanas de alerta salvo las más sencillas porque no tienen la posibilidad de interacción tipo ACEPTAR SI/NO. Igual, son bonitas :D

Responder
ymmot  

:-) ... muy buenas.

... "simulando" o haciendo algo similar,... tengo en "pruebas" esta ventanita "flotante"

http://chatarrasclub.blogspot.com/2008/04/codigo-blogger-ventana-videos-theater.html

... que no me acaba de convencer mucho,... pero es lo que hay por ahora :-)))

Salu2, ymmot ;-)

Responder
JMiur  

Me parece muy interesante, ymmot :)

Responder
djzorro  

hola hermano hace ya algun tiempo que doy vueltas por este blog, que de paso esta estelar, pues buscando y buscando por la red no encontre nada respecto al asunto; la cuestión es que quiero (si se pudiera claro) poner un mensaje de bienvenida que solo salga en la página principal y que este salga una sola vez al día(cada 24 horas)para cada visita de la misma ip, eje. -entro a tu página ahora(mensaje de bienvenida) la cierro, entro 5 horas después a tu página(mensaje de bienvenida"NO SALE"), vengo mañana a tu página sale el mensaje de bienvenida.

bueno men espero tu respesta. desde ya muchas gracias bro :)

GOD BLESS YOU

Responder
JMiur  

En Blogger, eso es imposible ya que no tienes forma de acceder a esos datos ni cómo guardarlos. Necesitas un servidor que ejecute PHP o algo similar.

Responder
djzorro  

ok, ya entiendo men, gracias por contestar.
:((

Responder
luis fernando torres nava  

oyes una pregunta,ya hise todo lo que dice tu tutorial pero al abrir el enlace no me aparece nada
me podrias ayudar

JMiur  

Sin ver tu ejemplo, es imposible responder.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR