Precarga (Preload) pagina HTML Completa

hugoblanco · #1 (**permalink**) 07/01/2010, 12:03

Hola amigos, soy nuevo en el foro.

Pues miren hice una pagina en Dreamweaver, se HTML Básico.

El caso es que pues la plantilla la diseñe en photoshop y en dreamweaver y genere el codigo, el codigo me quedo algo asi:

Código:

<html>
<head>
<title>Punto Relax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}



body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
body {
	background-image: url(http://punto-relax.com/diseno/fondopuntorelax.jpg);
	background-repeat: repeat-y;
}
.Estilo9 {font-family: "Myriad Pro", Arial; font-size: 18px; color: #FFFFFF; }
.Estilo22 {font-size: 18px; font-family: "Myriad Pro", Arial; }
.Estilo31 {font-family: "Myriad Pro", Arial; font-size: 16px; color: #FFFFFF; }
.Estilo32 {
	font-size: 10px
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (plantillapuntorelax.psd) -->
<table id="Tabla_01" width="1024" height="1161" border="0" cellpadding="0" cellspacing="0">
<tr>
		<td width="68" rowspan="11">&nbsp;</td>
	  <td height="175" colspan="4" background="http://punto-relax.com/diseno/PuntoRelax_02.png">&nbsp;</td>
<td width="107" rowspan="11">&nbsp;</td>
  </tr>
	<tr>
		<td height="37" colspan="4" align="center" valign="middle" background="http://punto-relax.com/diseno/PuntoRelax_04.png"><table width="700" border="0" align="center">
          <tr>
            <td height="24" align="center" valign="middle"><span class="Estilo22"><a href="../Paginas/www.punto-relax.com/index.html">Inicio</a></span></td>
          
            <td align="center" valign="middle"><span class="Estilo22"><a href="../Paginas/www.edancers.punto-relax.com">e-dancers</a></a></span></td>
            <td align="center" valign="middle"><span class="Estilo22">Archivo</span></td>
            <td align="center" valign="middle"><span class="Estilo22">Notas</span></td>
            <td align="center" valign="middle"><span class="Estilo22"><a href="../Paginas/www.punto-relax.com/acercade.html">Acerca de...</a></span></td>
            <td align="center" valign="middle"><span class="Estilo22">Contacto</span></td>
          </tr>
        </table></td>
  </tr>
	<tr>
		<td height="21" colspan="4" background="http://punto-relax.com/diseno/PuntoRelax_05.png">&nbsp;</td>
  </tr>
	<tr>
		<td width="15" rowspan="6" background="http://punto-relax.com/diseno/PuntoRelax_06.png">&nbsp;</td>
  <td width="479" rowspan="6" valign="top" background="http://punto-relax.com/diseno/PuntoRelax_07.png"><!-- TemplateBeginEditable name="Contenido principal" -->
    <table width="475" border="0" align="center">
      <tr>
        <td background="http://www.punto-relax.com/imgs/je.png"><span class="Estilo9">Inicio</span></td>
      </tr>
      <tr background="file:///D|/Hugo/Punto Relax/je.png">
        <td valign="top" background="http://www.punto-relax.com/imgs/je.png"><span class="Estilo9">En portada...</span></td>
      </tr>
      <tr>
        <td valign="top"><p>Estamos actualizando el sitio y agregando contenido.</p>
          </td>
      </tr>
    </table>
    <table width="475" border="0" align="center">
      <tr background="file:///D|/Hugo/Punto Relax/je.png">
        <td width="260" background="http://www.punto-relax.com/imgs/je.png"><span class="Estilo9">Notas</span></td>
        <td width="205" background="http://www.punto-relax.com/imgs/je.png"><span class="Estilo9">Tu Evento</span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><p>&iquest;Quieres organizar tu evento con un estilo muy relax?<br>
          Nosotros lo hacemos por ti, solo cont&aacute;ctanos.</p>
          <p>&iquest;Quieres un patrocinio?<br>
          Nosotros te apoyamos, no esperes m&aacute;s y cont&aacute;ctanos.</p>
          </td>
      </tr>
    </table>
    <br>
  <!-- TemplateEndEditable --></td>
<td width="326" height="40" background="http://punto-relax.com/diseno/PuntoRelax_08.png"><table width="200" border="0" align="center">
          <tr>
            <td align="center" valign="middle"><span class="Estilo9">Multimedia</span></td>
          </tr>
        </table></td>
<td width="29" rowspan="6" background="http://punto-relax.com/diseno/PuntoRelax_09.png">&nbsp;</td>
  </tr>
	<tr>
		<td height="232" valign="top" background="http://punto-relax.com/diseno/PuntoRelax_10.png"><!-- TemplateBeginEditable name="Multimedia" -->
		  <table width="320" border="0" align="center" background="http://www.punto-relax.com/imgs/je2.png">
            
            <tr>
              <td valign="top" background="http://www.punto-relax.com/imgs/je2.png"><span class="Estilo31">Video Relax</span></td>
            </tr>
            <tr background="http://www.punto-relax.com/imgs/je2.png">
              <td valign="top">
              
                <div align="center">
                  <object width="312" height="187">
                    <param name="movie" value="http://www.youtube.com/v/Pde2j70eiC8&hl=es_ES&fs=1&">
                    </param>
                    <param name="allowFullScreen" value="true">
                    </param>
                    <param name="allowscriptaccess" value="always">
                    </param>
                    <embed src="http://www.youtube.com/v/Pde2j70eiC8&hl=es_ES&fs=1&" width="312" height="187" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
                  </object>
                  
                </div></td>
            </tr>
          </table>
		  <!-- TemplateEndEditable --></td>
	</tr>
	<tr>
		<td height="40" background="http://punto-relax.com/diseno/PuntoRelax_11.png"><table width="200" border="0" align="center">
          <tr>
            <td align="center" valign="middle"><span class="Estilo9">Anuncios</span></td>
          </tr>
        </table></td>
  </tr>
	<tr>
		<td height="227" valign="top" background="http://punto-relax.com/diseno/PuntoRelax_10.png"><!-- TemplateBeginEditable name="Anuncios" -->
		  <table width="290" border="0" align="center" background="http://www.punto-relax.com/imgs/je2.png">
            <tr background="http://www.punto-relax.com/imgs/je2.png">
              <td><span class="Estilo31">Publicidad</span></td>
            </tr>
            <tr>
              <td background="file:///D|/Hugo/Punto Relax/je2.png"><div align="center"><img src="http://www.punto-relax.com/imgs/ANUNCIATE.jpg" width="280" height="270" align="bottom"></div></td>
            </tr>
          </table>
	    <p>&nbsp;</p>
		<!-- TemplateEndEditable --></td>
  </tr>
	<tr>
		<td height="40" background="http://punto-relax.com/diseno/PuntoRelax_11.png"><table width="200" border="0" align="center">
          <tr>
            <td align="center" valign="middle"><span class="Estilo9">Enlaces</span></td>
          </tr>
        </table></td>
  </tr>
	<tr>
		<td height="255" align="center" valign="top" background="http://punto-relax.com/diseno/PuntoRelax_10.png"><!-- TemplateBeginEditable name="Enlaces" -->
		  <table width="290" border="0" background="http://www.punto-relax.com/imgs/je2.png">
<tr>
              <td background="file:///D|/Hugo/Punto Relax/je2.png"><div align="left"><span class="Estilo31">Siguenos en:</span></div></td>
          </tr>
            <tr background="file:///D|/Hugo/Punto Relax/je2.png">
              <td align="center"><p><img src="http://www.punto-relax.com/imgs/facebook.png" width="140" height="44"><a href="http://www.myspace.com/puntorelaxpuebla"><img src="http://www.punto-relax.com/imgs/myspace.png" width="140" height="44"></a><br>
              <a href="http://twitter.com/puntorelaxpue"><img src="http://www.punto-relax.com/imgs/twitter.png" width="140" height="44"></a><a href="http://www.youtube.com/user/Puntorelaxpuebla"><img src="http://www.punto-relax.com/imgs/youtube.png" width="140" height="44"></a></p></td>
          </tr>
          </table>
	    <!-- TemplateEndEditable --></td>
  </tr>
	<tr>
		<td height="70" colspan="4" align="center" valign="middle" background="http://punto-relax.com/diseno/PuntoRelax_15.png"><table width="400" border="0">
          <tr>
            <td><div align="center" class="Estilo32"> &copy;   Copyright 2009 Punto Relax | Sitio dise&ntilde;ado por Hugo Blanco S&aacute;nchez</div></td>
          </tr>
        </table></td>
  </tr>
	<tr>
		<td colspan="4">&nbsp;</td>
  </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Quiero saber detalladamente donde insertar el código de un preloader, para que en lo que carga mi pagina completamente con todo y sus imágenes, aparezca un mensaje espere o algo asi.

loncho_rojas · #2 (**permalink**) 07/01/2010, 12:22

Juaaaz... disculpa.. como vamos a saber eso?

Como se supone que adivinaremos como funciona tu preloader?

como sabemos si no tiene varios estamentos y subarchivos que los conecten... ???

COmo saber si tienes hambre o no.?

Espero que no te parezca burlona la manera de responder... pero deberias plantear mejor tu pregunta.. de nada nos sirve tu codigo HTML, es decir, es lo de menos. El problema esta en que no sabemos como actua tu PRE-LOADER como lo llamas, asi que indicarte donde ira mejor, pues es un tanto ambiguo. Ponlo antes de la etiqueta body, que se yo... esmerate mas en detallar mas cosas relevantes.

Un saludo amigo

lagosest · #3 (**permalink**) 07/01/2010, 12:49

¿Por qué no aprendemos a leer lo que escriben los demás?

¿Por qué mejor no tomamos algo de tiempo para pensar en lo que escribiremos sobre lo preguntan los demás?

¿Por qué existen personas que escriben con una ortografía de chimpancé?

Espero que no te parezca burlona o insultante mi objeción a tu respuesta tan inútil “loncho_rojas”. Debemos analizar lo que preguntan las personas y sobre todo ser útil en lo que alguien pregunta.

Es bastante claro que “hugoblanco” pregunta si existe algún pre-loader para HTML y el considera necesario la inserción del código de su pagina web para que alguien le indique en parte deberá ir el código del pre-loader que solicita de una manera adecuada.

Dejando a un lado mi objeción quisiera ser útil para algo en tu pregunta y te explico algo: Según mis conocimientos (Soy algo novato en diseño web así que quizás alguien más te pueda ofrecer mejor ayuda que yo) para lograr el pre-loader debes crear un archivo “.js” al cual yo llamare “load.js” al cual deberás insertarle este código:

Cita:

///////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////
window.onload = load;
/********************************** **********************************************
*METODO DE CARGA DE LA PAGINA
************************************************** ******************************/
function load() {
document.getElementById('divPreloader').style.disp lay = 'none';
document.body.style.display = 'block';
}
/////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////

En el HTML deberás insertar en el body este DIV:

Cita:

<body style="display:none">
<div id='divPreloader'>
Cargando....
</div>
</body>

Espero que resulte esto que he indicado deberás hacer. Aunque recalco que no soy experto en esto del diseño y creación web.

Esteban Lagos

hugoblanco · #4 (**permalink**) 07/01/2010, 15:12

Gracias, por tu respuesta lagosest, eres claro en lo que me respondes, ¿pero por que crear el archivo java script? Noto que en el código HTML en ningún momento manda a llamar a ese archivo Java Script, entonces para que se crea ese archivo JS

O tal vez dentro de mi ignorancia si lo manda a llamar? Explícame mas un poco eso por favor.

Ah y otra cosa en mi código HTML exclusivamente, ¿donde crees que seria bueno insertar el código HTML que me brindas?

P.D.: loncho_rojas, yo si fui claro con lo que quería saber, después del código HTML de mi sitio, especifique cual era mi inquietud, el código y el texto anterior al código, fueron una introducción para que mi tema fuera mas especifico en lo que yo estoy haciendo y en lo que deseo saber. De todos modos gracias.

Willy_N · #5 (**permalink**) 07/01/2010, 17:07

En mi humilde opinión no estás enfocando bien el diseño de tu página.

Porque si tarda tanto en cargarse que quieres añadir un preloader que se visualiza mientras se está cargando la página el peso de la página en kbs es demasiado grande.

Una página completa no debería de sobrepasar los 100 kbs para que sea aceptable para la mayoría de usuarios.

Yo por ejemplo no suelo tener la paciencia para abrir una página que me permita ir a tomarme un café mientras se carga por completo.

lagosest · #6 (**permalink**) 07/01/2010, 18:04

Comparto tu opinión Willy. Creo que si tu sitió es muy pesado deberías probar algún optimizador de imágenes que permita reducir el tamaño total. En lo personal pienso que el INDEX o cualquier sub-pagina no deben pesar más de 150 Kb.

Lamentablemente tu solo fondo pesa 412KB probablemente a esto se debe la lentitud en la carga de tu sitio web.

Willy_N · #7 (**permalink**) 08/01/2010, 04:28

Es cierto, ese fondo pesa un huevo,

Me lo he bajado y lo he ajustado un poco, ahora pesa menos, todavía mucho más de lo conveniente, pero como 7 veces menos. Si lo quieres aquí lo tienes.
Pero quedan muchos imágenes de exagerado peso, debes revisarlos, a mi entender.

hades87 · #8 (**permalink**) 08/01/2010, 05:13

Estoy de acuerdo con Willy y lagosest, si pesa tanto que necesitas un preloader lo mejor sería revisar el diseño de la página.

1. Separar el código css y posibles javascripts a archivos externos. De esta forma se aligerará mucho la carga de esta y otras muchas páginas, además de que solo tendrás que cambiar en 1 sitio cualquier cosa.

2.Trata de diseñar bien la página, sin necesidad de tablas, con divs y estilos css. De esta forma te asegurarás usar mucho menos código y mas bien estructurado.

4. Trata de usar imágenes que no pesen demasiado para no ralentizar la página y si van de fondo incluyelas en el css

hugoblanco · #9 (**permalink**) 14/01/2010, 13:54

Gracias por sus opiniones.

Miren si reduzco el peso de los archivos, pierden una gran parte de su calidad, si ustedes pudieran darme algún consejo de como reducir el peso de mis imágenes sin que pierdan calidad y que al agrandar la página se sigan viendo bien, se los agradecería.

Otra cosa que he intentado saber, es como separar el diseño del contenido, en eso si estoy totalmente perdido, ojala pudieran explicarme, si no pueden en este tema, abro otro si ustedes así lo requieren.

Gracias

jomaruro · #10 (**permalink**) 16/01/2010, 03:50

Hola:

Date una vuelta por estos libros (que puedes descargarte gratis o consultarlos online).

1º Introducción a XHTML.
2º Introducción a CSS.
3º CSS Avanzado.

Saludos.

Willy_N · #11 (**permalink**) 16/01/2010, 03:58

Cambia las imágenes pesadas que no son .jpg a .jpg y usa algún instrumento para reducir su peso sin llegar al punto en que pierden calidad. A mi me gusta Advanced JPEG Compressor para esto, aunque hay otros que también te pueden valer.
Compara p.ej. la imagen que yo te ajusté, pesa una sexta parte del original pero se ve perfectamente.
Pero bien es cierto que sigue pesando un huevo...

hugoblanco · #12 (**permalink**) 05/02/2010, 14:39

Ok, a ver si me quedo claro, tengo que aligerar el diseño, y también mejorar la programación de mi sitio.

Ahora solo queda leer esa información que me brindan. Pero hay algo que aun no me queda muy claro, HTML es el lenguaje estándar, entonces XHTML sigue siendo lenguaje HTML pero ¿con mejoras? o ¿cual es la diferencia entre HTML Y XHTML? Hablando en forma general, no específicamente en sus codigos.

Bueno, finalmente si el diseño lo elaboro desde Photoshop CS3, ¿que tendría que proceder en dreamweaver?, es decir, después de que diseñe mi sitio en photoshop, en dreamweaver que hago para maquetar mi sitio de la forma que me recomiendan ustedes.