No tenía ni idea de que se llamaba así, pero a resultas de una pregunta, he podido descubrir que un Splash Screen es una pantalla, generalmente una imagen, que aparece mientras se carga un programa, un sistema operativo, una aplicación de instalación... Vamos, la pantallita que muestra nuestro sistema operativo cuando arrancamos el ordenador desde que se cargan los datos básicos de hardware, hasta que comienza a cargar el escritorio, por ejemplo. Algunos les llaman quitamiedos, porque sirven para evitar la sensación de que el ordenador se ha quedado colgado en el caso de que la cosa se demore. Suelen llevar una señal de avance de la carga.Para los que quieran sencillamente eso, algo que salga mientras vuestra página carga, os remito a la entrada sobre cómo crear un aviso para la carga de una página y que precisamente mostrará en el blog una capa superpuesta, que desaparece cuando termina completamente la carga de todo su contenido. La capa puede tener cómo se explica allí un gif animado, una imagen fija, pero también otro tipo de elementos y sólo con ampliar su tamaño, obtendremos una cosa similar a un splash screen.
Sin embargo hay otra posibilidad, que es mostrar algo que desaparezca tras cumplir su misión (pasado un tiempo realmente). Si es eso lo que quereis, entonces continuad aquí que vamos a tratar de explicar cómo se hace.
En primer lugar generamos un script, que precisamente lo que hace es ocultar determinada capa identificada mediante su nombre, transcurrido determinado tiempo. Para ello, antes del </head> pegamos lo siguiente:
<script type='text/javascript'>window.setTimeout('document.getElementById ("ID_CAPA").style.visibility="hidden"',10000)</script>
ID_CAPA será el nombre que le pondremos después al DIV que contendrá aquello que queremos que se vea con este sistema. La última cifra (10000) es el tiempo en milisegundos que tardará en aplicarse la instrucción contenida dentro del setTimeout y que en este caso consiste en ponerle un valor HIDDEN a la capa para que deje de verse. Dicho al revés, pasados 10 segundos, la capa que ahora después crearemos, desaparecerá.
Ahora el bloque que queremos mostrar. En primer lugar, tiene que tener el mismo nombre (ID_CAPA) que pusiéramos en el script. El lugar dónde debe ir ubicado es justo después del <body>
<div id='ID_CAPA' style='z-index:99;position:absolute;overflow:visible;top:50%;left:50%;width:750;height:592px;margin-top:-296px;margin-left:-375px;border:5px solid #990000;'><a href='javascript:void(0);' onclick='this.style.visibility="hidden"'><img style='border:0px;' src='URL_IMAGEN' /></a></div>
Configuración:Hay que cambiar, para adaptarlo a vuestras necesidades, el ancho y el alto del bloque (WIDTH-HEIGHT). Los márgenes (MARGIN-LEFT MARGIN-TOP) tienen que tener justo la mitad de pixels que las correspondientes medidas de ancho y alto, para que el resultado se vea totalmente centrado. El borde (BORDER) se puede cambiar o incluso anular. También se puede incorporar un color o un imagen de fondo (BACKGROUND), incluyendo un PADDING para que no se solape por completo. Como estamos ante un DIV que va a funcionar de forma independiente al resto de la página, podeis poner el estilo que querais.
El enlace que está alrededor de la imagen del ejemplo (javascript:void(0);), sirve para que el usuario pueda hacer desaparecer la imagen antes de transcurrido el tiempo programado, con sólo pinchar en ella. Para que se pueda cerrar sólo desde un punto determinado del bloque, habría que quitar el enlace de la imagen y generar un nuevo DIV dentro del principal con una instrucción javascript algo distinta:
<div id='ID_CAPA' style='z-index:99;position:absolute;overflow:visible;top:50%;left:50%;width:750;height:592px;margin-top:-296px;margin-left:-375px;border:5px solid #990000;'><div style='position:absolute;top:-25px;right:0px;background:#990000;color:#ffffff;padding:1px;'><a href='javascript:void(0);' onclick='document.getElementById ("ID_CAPA").style.visibility="hidden"'>[X]</a></div><img style='border:0px;' src='URL_IMAGEN' /></div>
Con respecto a su contenido, es necesario especificar la direción de la imagen que se quiere mostrar o, si se prefiere, cambiar la imagen por un texto u otra cosa. Por ejemplo, se podría mostrar una animación flash o un vídeo de YouTube -qué viene a ser lo mismo para este caso- cambiando todo el tag IMG por un objeto embebido. Ejemplo con contenido para copiar y pegar y una demo de cómo quedaría:
<div id='ID_CAPA' style='z-index:99;position:absolute;overflow:visible;top:50%;left:50%;width:750;height:592px;margin-top:-296px;margin-left:-375px;border:5px solid #990000;'><a href='javascript:void(0);' onclick='this.style.visibility="hidden"'><embed height='592' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='high' src='http://www.youtube.com/v/_kocZ-j-o3I&hl=es&autoplay=1' type='application/x-shockwave-flash' width='750'/></a></div>
En este último caso, en función de la duración del vídeo, ajustaremos el valor del tiempo del primer script que instalamos (10000), hasta una cifra que nos permita ver la secuencia completa. Para estos menesteres, parece adecuado incluir al enlace del fichero flash, un &autoplay=1, cómo se ha hecho en este último ejemplo, que hará que el vídeo comience a reproducir solo. Si esperamos a que el usuario le de al play y por otro lado, nosotros programamos el tiempo justo, lo más seguro es que el elemento desaparezca antes de terminar. Sin embargo, si ponemos tiempo de más y el usuario le da desde el principio, el aburrimiento/desesperación puede ser máximo. Por cierto, mucho ojito con poner cosas del estilo de esta película.
Una pega de este sistema usando elementos multimedia, es que el script sólo oculta el contenido, por lo cual, si este tiene sonido y es cerrado por el usuario antes de tiempo, el audio seguirá oyéndose hasta que no termine del todo.
Este código se puede colocar en una entrada, para que el pantallazo se vea sólo cuando se accede a ella. Para ello habría que cambiar las comillas simples por dobles y los " por comillas sencillas, amen de redactarlo todo seguido, sin saltos de línea. (ejemplo)
Cuidado con los posicionamientos. Si no hay ninguna instrucción POSITION en vuestra plantilla, el bloque se colocará en referencia al BODY tanto si lo ponemos en la plantilla como si lo ponemos en un post y servirá todo el código explicado hasta el momento. Por contra, si nuestra plantilla incluye algún atributo POSITION y para el caso de colocarlo en un post, habrá que ajustar los parámetros porque el bloque se colocará con respecto al contenedor de las entradas y no con respecto al BODY.
Este truco se puede usar como pantalla de presentación, para dar un aviso, para mostrar un contenido destacado, una lista de enlaces,... lo que vuestra imaginación os diga. Se admiten sugerencias de uso.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Pero que rapidez jajaja, en estos dias lo pruebo y te digo como me resulto, cuando pueda terminar el blog del trabajo (si es que no me siguen cambiando las ordenes) te paso la direccion. Muchas gracias por tantos aportes.
ResponderEliminarAlgo así estaba buscando para una web, a ver que consigo. THX!!
ResponderEliminarEmiliano, me pillaste en un momento adecuado. Sólo eso.
ResponderEliminarRaúl, a ver con qué nos sorprendes ;)
Hola Oloman,
ResponderEliminarSolucionado mi problema para abrir tu plantilla pero el problema se me repite cuando por ejemplo intento abrir plantillas del Btemplates.
Le doy a abrir carpeta, el documento abrir con wordpat o bloc de notas y me sale un código muy raro compuesto por cuadrados y símbolos.
Cómo lo haces tu? ( y toda la otra gente )
Grácias
Tiene que ser un fichero .xml para que sea visible con bloc de notas o similar. En ocasiones, lo que nos facilitan es un fichero comprimido que primero habrá que descomprimir. Dime el enlace concreto con el que tienes problemas para verlo.
ResponderEliminarHola, una pregunta que no tiene que ver con este post y tampoco he buscado tal como recomendás.:)
ResponderEliminarEl tema es el siguiente: tengo una plantilla de tres columnas porque me gustó mucho el diseño, aunque preferiría que fuera de dos. Es posible eliminar una de las sidebar, por ejemplo la de la derecha? Y si es así,me podrías explicar como hacerlo? Graaaaaacias. Tengo un botón tuyo en mi blog.
Hola Lils. Efectivamente no encontrarás esa cuestión en concreto pero sí la contraria, cómo añadir columnas. Siguiendo el proceso inverso, podrás dejar tu plantilla con una columna (o dos) menos.
ResponderEliminarEn tu caso, estos tres contenedores son los que forman las tres columnas.
#main-wrapper
#a-sidebar-wrapper
#b-sidebar-wrapper
En un principio tendrías que quitar de la parte HTML la sección correspondiente a la sidebar que quieres quitar.
Luego, ensanchar o bien el MAIN o la otra SIDEBAR o ambos, para ocupar el nuevo espacio disponible.
Hola OLO, gracias. Hice la prueba quitando la parte del sidebar b y ensanchando la sección de post (main) y todo bien, solo tengo un problemita, siguen apareciendo en el lugar de la sidebar retirada, el color de fondo (gris) y una línea divisoria roja vertical. Supongo que tendré que quitar o cambiar algo más. :)
ResponderEliminarLa parte de main wrapper me queda así:
#main-wrapper {
width: 680px;
float: left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
Graciaaaaaaaas!!!
(si es muy complicado lo dejo como está)
Gracias por el código, voy a probarlo
ResponderEliminarHola Oloman,
ResponderEliminarMira, estoy trabajando en una nueva plantilla y me interesaria canviar el 'hr' ( esas líneas de separación ) de la plantilla pero no se cómo hacerlo
Estoy utilizando la plantilla 'Scribe' que viene por defecto en blogger
Grácias, ah y por cierto, si sigues así ese hombrecito ya no podrá seguir la pista a las visitas ;)
Saludos
Lils. En ninguno de los blogs de tu perfil veo cambio alguno. De todas formas, lo que tienes que hacer es descubrir qué parte del código "imprime" esos fondos para después eliminarlos. Seguramente estén hechos con BACKGROUND, pero ya te digo que voy a ciegas.
ResponderEliminarMercier, tienes que crear una clase y configurar ahí el aspecto. Por ejemplo:
hr.barra {
height: 10px;
border: 0PX;
color: #cc0000;
background: url(DIREC_IMAGEN);
width: 80%;
}
Luego, donde quieras poner el separador, colocas
<hr class="barra"/>
Ah, Mercier... ¡y ahora he pillado lo del hombrecito!
ResponderEliminarUy! Perdón y gracias por la paciencia!
ResponderEliminarEl blog al que me refiero es este
http://mitecladoyyo-lils.blogspot.com/
y no guardé los cambios porque quedaba mal, con la línea roja vertical y el fondo gris (a la derecha) pero el espacio de post extendido. :-)
Te agradezco mucho la amabilidad.
Abrazo!
Lils, busca en tu plantilla esta imagen y obsérvala en tu navegador poniendo directamente la dirección:
ResponderEliminarhttp://i236.photobucket.com/albums/ff139/doxsimg/secret/secret_out_.png
Es la que forma toda el fondo, tanto el de los posts como el de las barras laterales. Ahora bájatela y modifícala según te convenga. Luego la subes y sustituyes la dirección antigua por la nueva.
YES! Sos un genio explicando! jaja
ResponderEliminarYa casi lo logro, me falta una pequeña modificación a la imagen y listo!
Gracias miles y contá con mis votos en los premios Bitácoras!
Esto lo tengo que leer despscito, porque me interesa mucho.
ResponderEliminarenhorabuena por ser finalista de los premios 20 blogs. ¡¡suerte!! allí estaré
Enhorabuena por ser finalista en los 20 minutos. Te sigo desde que estoy en la blogosfera, haciendo caso de muchos de tus consejos, aunque no intervengo demasiado, pero esta era una ocasión especial.
ResponderEliminarun saludo.
Hoy me he encontrado esta noticia en el 20minutos.es: http://www.20minutos.es/noticia/541518/0/finalistas/premios20blogs/2009/
ResponderEliminarEnhorabuena. Espero que ganes, eres el mejor.
Bueno Lils, parece que en este momento ya está perfecto. Cómo tú querías.
ResponderEliminarChary y Davicine. Muchas gracias. Espero conoceros si coincimos en Madrid.
Te colaste en medio de mi contestación medecrece. Gracias a tí también y a tu deseo, pero creo que ya he tocado techo, porque el resto de los blogs seleccionados me parecen muy buenos.
ResponderEliminarEspo nunca see sabe....
ResponderEliminarY si no pasa nada, como te he dicho allí estaré, ya tengo los billetes del viaje comprados.
Tendremos que irnos buscando unos a otros.
Pues mira Oloman,
ResponderEliminarel problema que tengo con la descarga de los xml es que una vez abro el documento con el wordpat o el bloc de notas me sale un código como muy raro.
Pero por casualidad descubrí que simplemente copiando ese código a google docs me salía todo correcto ( un código html como los de siempre )
Luego lo copié en la casilla de html todo el codigo y me dice : No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Content is not allowed in prolog.
Puedes ayudarme?? grácias
Quizás pueda ayudarte si me pasas el link de dónde te descargaste el xml. Así lo compruebo y te digo si es problema de tus programas o del propio fichero. La opción de copiar y pegar no es la más adecuada. Lo mejor es cargarla desde el panel de control de Blogger: Edición HTML
ResponderEliminarHola!
ResponderEliminarBueno, sé que esto poco tiene que ver con el tema, pero no encontré otro más oportuno en donde preguntarte. ¿Cómo se pueden añadir ventanas pop-up al blog? Es que busqué en internet, y encontré una página que generaba códigos, pero me preguntaba si los puedes crear tú mismo.
Un saludo!
Laura, lo de aquí podría servirte como pop-up. De todas formas, por ejemplo en Web Taller, tienes una utilidad para conseguir el código de una ventana emergente. Una vez te hagas con el código lo puedes modificar a tu antojo, al igual seguramente que con la que tú has encontrado. Eso sí, lo que te muestra es el contenido de una página, que tendrías que diseñar previamente... o un vídeo, o un flash...
ResponderEliminarHola Oloman. Estaba busacano algo así para que aparezca en mi blog como una ventan emergente. Pero a mi me gustaría que la ventana apareciese al pulsar en un enlace ( concretamente un botón del menú ) y que se pudiese cerrar pulsando dentro de ella. No que aparezca al abril el Blog sino al pulsar en el botón del menú. Dicha ventana contendría un texto estenso. ¿ Cómo se podría adaptar el código del Splash Screen para esto ?. Gracias. Tu Blog me es de gran ayuda.
ResponderEliminarCuando tenga un rato le doy una vuelta y te digo algo... o directamente lo publico. Creo que no es difícil.
ResponderEliminarGracias. Repito que tu Blog es muy útil para mí que soy bastante novato en el tema de programación Blogger.
ResponderEliminarHola Oloman...pareces midas...todos los temas que "tocas", los conviertes en una mina. Lo implemente en el blog y va de maravilla. Gracias.
ResponderEliminarSaludos.
Je, je, je, Luis. Otro cacharrito más para tu colección. Saludos.
ResponderEliminarHola oloman soy MR y te escribo por comentarios je...=D
ResponderEliminarQuisiera saber si es común que se de la aparición de la imágen al ingresar a diseño de la pagina?
Un saludo+
MR
MR ¿qué imagen es la que te aparece y en qué lugar exactamente? A ver si puedes enviar el enlace a una captura de pantalla para averiguar a qué te refieres.
ResponderEliminarHola Oloman. Muchas gracias por todos estos tutoriales, me han servido demasiado. Te queria preguntar por que despues de haber agregado un banner animado en flash como splash screen, me aparece igual en mi cuenta de editar diseño donde dice: Añadir y organizar elementos de la página, como se puede quitar el banner de alli y que solo salga en el blog mismo. Muchas gracias de nuevo y aqui te dejo el link de mi blog
ResponderEliminarhttp://thegreenchalkboard.blogspot.com/
Hola Christian. En este caso, Blogger identifica nuestro panel de control como si fuera la página principal de blog, así que es inevitable que salga durante unos segundos, de la misma manera que sale cuando se accede al blog.
ResponderEliminarDe todas formas, hay un sistema con cookies con el que podrás hacer que sólo salga una vez cada cierto tiempo, que quizás te interese más. Este es el enlace:
http://oloblogger.blogspot.com/2010/02/otra-pantalla-de-presentacion-facil.html
Despues de "afinar" el código, me funciona perfectamente, solo con el pequeño detalle de que el IE8 me da la famosa advertencia de que se va a ejecutar un scrip y que si estoy de acuerdo y demás chorradas. ¿No hay manera de eliminar eso?
ResponderEliminarAstro2k eso te sale sólo a tí en función de la configuración de tu navegador. Para modificarlo mira esto: http://goo.gl/AEs70
ResponderEliminarBuenas Oloman! Ahora te molesto con otra cosa!
ResponderEliminarNecesito algo parecido a esto, pero que sea solamente cuando uno abre la pagina principal LA PRIMERA VEZ.
Te Explico mejor lo que quiero:
Es un cuadro de 300X300 aproximadamente o menos talves, y el resto de la pagina se ponga gris el fondo como para que resalte el cuadro ese, y yo pueda colocar en el cuadro un mensaje que dija no olvides suscribirte, visita facebook bla bla bla.
Se entendio mi idea? Muchas Gracias! ^^
Creo que esto que explico aquí es lo que buscas:
EliminarMostrar un DIV sólo una vez al día.
Sólo tendrías que cambiar el tiempo de la cookie para que dure años, por ejemplo...
HOLA compañero, tienes una ventana oculta flotante en la que puedo colocar anuncios de adsense? - y cual es la forma correcta de instalarlo en mi pagina web de worpress para no ser baneado. gracias
ResponderEliminar¿Oculta...? Si va a estar oculta ¿para qué la quieres?
ResponderEliminarHola compañero gracias por lleer mi mensage, lo que necesito es un script, oculto o invisivle donde pueda alojar mi anuncio de adsense en mi pagina web. Gracias.
ResponderEliminarPara alojar un anuncio de Adsense no necesitas nada especial. En un gadget tipo HTML/JavaScript puedes poner el código sin problemas.
Eliminar