Ayuda con la precarga de capas

Belial_Dante · #1 (**permalink**) 08/07/2008, 14:42

Hola muy buenas a todos.

Este es mi primer post por aqui.
Llevo mucho tiempo consultando el foro para ciertas cosas y me ha servido siempre de ayuda, por eso ahora entro como usuario registrado puesto que la duda que me ha surgido, no encuento solucion en ninguna parte.

Les comento:

Tengo una web compuesta por 3 capas DIV, una a la izquierda, que es el menú, una central, donde carga todo el contenido, y una a pie de página, para poner el nombre del diseñador web, en este caso, yo.

La web la estoy gestionando con AJAX en su totalidad.
El menú usa la librería de Accordion; todo el contenido se carga en la capa central a través de la funcion "llamarasincrono".

Como es una web destinada a fotografía, puesto que es para un fotógrafo, he incluido también la librería SmoothGallery2.0 para la transición de imagenes.

Todo está perfecto, no hay problemas con eso.
El problema está en que mi cliente quiere que cuando se acceda a la página, las 3 capas que hay, vayan apareciendo una a una y lentamente.

Claro, Uds. me dirán que haga esto con Flash, pero yo de Flash no tengo ni idea, soy más partidiario de usar AJAX y todo lo que sea codigo puro y nada de animaciones.

He estado mirando por muchos sitios y lo más parecido a lo que necesito, aparece en el siguiente link: http://www.caricatos.net/citas/metacortex.php

Sinceramente, no tengo ni idea de como hacer eso con mi web.
Les dejo el link provisional de la web que estoy realizando, por si alguien puede ayudarme, ayuda que agradeceré de todo corazón.

Web: http://ford-08.890m.com/montielfotografos

sando · #2 (**permalink**) 08/07/2008, 19:51

Es mas o menos asi:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Author" content="Pepe Molina ([email protected])">
<LINK REL="SHORTCUT ICON" HREF="../caricatos.ico">
<title>
Para Meta
</title>
<style>
.contenedor {
border: 3px inset gray;
margin: 2em;
}
</style>
<script>
function NuevoAjax(){
var xmlhttp=false;
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(E){
xmlhttp = false;
}
}

if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function Cargar(url, capa){
var contenido;
contenido = document.getElementById(capa);
//creamos el objeto XMLHttpRequest
ajax= new NuevoAjax();
//peticionamos los datos, le damos la url enviada desde el link
ajax.open("GET", url, true);
ajax.onreadystatechange=function(){
if(ajax.readyState==1){
contenido.innerHTML = "Cargando...";
//modificamos el estilo de la div, mostrando una imagen de fondo
//preloader.style.background = "url('loading.gif') no-repeat";
}else if(ajax.readyState==4){
if(ajax.status==200){
//mostramos los datos dentro de la div
contenido.innerHTML = ajax.responseText;
inicio();
//preloader.innerHTML = "Cargado.";
//preloader.style.background = "url('loaded.gif') no-repeat";
}else if(ajax.status==404){
preloader.innerHTML = "La página no existe";
}else{
//mostramos el posible error
preloader.innerHTML = "Error:".ajax.status;
}
}
}
ajax.send(null);
}
function actua(url, capa) {
this.url = url;
this.capa = capa;
}

carga = new Array();

cargaActual = 0;
carga[0] = new actua("frasephp.php?posi=6", "capa1");
carga[1] = new actua("frasephp.php?posi=645", "capa2");
carga[2] = new actua("frasephp.php?posi=126", "capa3");
carga[3] = new actua("frasephp.php?posi=65", "capa4");

function inicio() {
if (cargaActual < carga.length) Cargar(carga[cargaActual].url, carga[cargaActual++].capa);
// Cargar("frasephp.php?posi=6", "capa1");
}
window.onload=inicio;
</script>
</head>

<body>

<div id="capa1" class="contenedor">

</div>

<div id="capa2" class="contenedor">

</div>

<div id="capa3" class="contenedor">

</div>

<div id="capa4" class="contenedor">

</div>

</body>
</html>

Belial_Dante · #3 (**permalink**) 09/07/2008, 01:40

Cita:

Iniciado por sando

Es mas o menos asi:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Author" content="Pepe Molina ([email protected])">
<LINK REL="SHORTCUT ICON" HREF="../caricatos.ico">
<title>
Para Meta
</title>
<style>
.contenedor	{
	border: 3px inset gray;
	margin: 2em;
}
</style>
<script>
function NuevoAjax(){
        var xmlhttp=false;
        try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
                try{
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }catch(E){
                        xmlhttp = false;
                }
        }

        if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
                xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
}

function Cargar(url, capa){
        var contenido;
        contenido = document.getElementById(capa);
        //creamos el objeto XMLHttpRequest
        ajax= new NuevoAjax(); 
        //peticionamos los datos, le damos la url enviada desde el link
        ajax.open("GET", url, true); 
        ajax.onreadystatechange=function(){
                if(ajax.readyState==1){
                        contenido.innerHTML = "Cargando...";
                        //modificamos el estilo de la div, mostrando una imagen de fondo
                        //preloader.style.background = "url('loading.gif') no-repeat"; 
                }else if(ajax.readyState==4){
                        if(ajax.status==200){
                                //mostramos los datos dentro de la div
                                contenido.innerHTML = ajax.responseText;
				inicio();
                                //preloader.innerHTML = "Cargado.";
                                //preloader.style.background = "url('loaded.gif') no-repeat";
                        }else if(ajax.status==404){
                                preloader.innerHTML = "La página no existe";
                        }else{
                                //mostramos el posible error
                                preloader.innerHTML = "Error:".ajax.status; 
                        }
                }
        }
        ajax.send(null);
}  
function actua(url, capa)	{
	this.url = url;
	this.capa = capa;
}


carga = new Array();

cargaActual = 0;
carga[0] = new actua("frasephp.php?posi=6", "capa1");
carga[1] = new actua("frasephp.php?posi=645", "capa2");
carga[2] = new actua("frasephp.php?posi=126", "capa3");
carga[3] = new actua("frasephp.php?posi=65", "capa4");


function inicio() {
	if (cargaActual < carga.length)	Cargar(carga[cargaActual].url, carga[cargaActual++].capa);
//	Cargar("frasephp.php?posi=6", "capa1");
}
window.onload=inicio;
</script>
</head>

<body>

<div id="capa1" class="contenedor">

</div>

<div id="capa2" class="contenedor">

</div>

<div id="capa3" class="contenedor">

</div>

<div id="capa4" class="contenedor">

</div>


</body>
</html>

Ya probé a insertar el código fuente de la página e introducirlo en la mia tal cual, pero no funciona, me destroza la estética de la mia al completo.

¿Será porque es un código incompatible con MooTools?
Ya de por sí tuve problemas para poder usar Accordion y SmoothGallery2.0 las 2 a la vez y sobre capas DIV, puesto que crea un conflicto.

caricatos · #4 (**permalink**) 09/07/2008, 01:59

Hola Belial_Dante, bienvenido a los foros

:

En el mensaje original: Un script para darle un preload al index, ge comentado que no me gustaba mucho los resultados, justamente por la cuestión de los estilos. Y también hay una versión algo mejor con un gif animado de espera: http://www.caricatos.net/citas/metacortex2.php

Según el contenido que vayas a necesitar incrustar, deberías modificar los estilos.

Saludos

Belial_Dante · #5 (**permalink**) 09/07/2008, 10:44

¿Entonces casi que mejor que me olvide de la precarga de capas al entrar en la web no?
Yo se que eso tiene bastante peso y una conexion lenta a intenet pues... cansa al usuario, pero claro, mi cliente, el fotógrafo, es un poco cabezota y me dice que lo que quiere es eso.

Yo por más que le explico que eso ralentiza la página y que casi que la rompe por completo, él sigue en sus 13.

Para que Uds. se hagan una idea, mi cliente lo que quiere es algo parecido a esta web:
http://www.vilamajo.com/index.php?lengua=es

Claro está que esa web está en Flash.
Pues lo que hace de la capa izquierda de menú y luego la central donde se cargan las imágenes, eso es lo que me pide mi cliente.

Por no tener conocimientos de Flash, no la hago en tal, por eso recurro a AJAX, que es lo más parecido.

Le comentaré nuevamente, por vigesimonovena vez que meter una animación de capas al inicio de la página provocará el ralentizamiento de tal.

A ver si saliese alguna libreria AJAX al estilo SmoothGallery2.0 pero para mover capas automáticamente.

caricatos · #6 (**permalink**) 09/07/2008, 11:10

Cita:

Iniciado por Belial_Dante

Por no tener conocimientos de Flash, no la hago en tal, por eso recurro a AJAX, que es lo más parecido.

Ajax no es tan parecido a Flash, y con menos efectos visuales, tal vez pueda ser suficiente javascript... si se trata de cargar imágenes no es necesario ajax porque lo que realmente ralentiza las páginas son las propias imágenes, pero si tienes su url (que no provocan retrasos reales) puedes cargarlas a medida que las necesites.

En principio creo que deberías maquetar tu página, o sea ir ubicando cada elemento que quieras usar, y luego, cuando vayas necesitando nuevos recursos, ir cargándolos...

De todos modos, creo que lo más difícil será convencer a tu cliente que la página será distinta a la referencia, pero sin recurrir a Flash y ajax se pueden hacer muy buenas páginas... además es bueno considerar que no todos los visitantes tendrán javascript activo o el plugin de flash instalado, así que casi siempre es mejor usar los recursos básicos que se pueden tener para la navegación.

Saludos

Belial_Dante · #7 (**permalink**) 09/07/2008, 11:40

Gracias por la recomendación y por el consejo.
Si tengo alguna duda o cualquier cosa, buscaré por los foros de aquí a ver si consigo solucionar lo que se me ponga delante.

Saludos y gracias ^^