Comunidad de diseño web y desarrollo en internet online

sitio dinamico

Citar            
MensajeEscrito el 11 Jun 2013 12:53 am
hola buenas tardes compañeros del foro en esta ocacion acudo a ustedes porque me ha surgido una duda en cuanto a los sitios web mi duda es el siguiente:
para que una pagina tenga siempre el mismo encabezado como le puedo hacer, si en index tengo el diseño completo y al momento de hacer clic en un menu se muestre su contenido abajo del encabezado. tengo que crear otra pagina desde 0 con el mismo encabezado y diferente contenido o como es para que me muestre el contenido abajo del encabezado.
Saludos

Por vick90

9 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Jun 2013 12:15 pm
Dos alternativas. O usas un lenguaje del lado del servidor o bién usa Ajax (ambos métodos no son excluyentes).

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 11 Jun 2013 04:09 pm
ok gracias pero entonces dentro del main colocoria un div para mostrar los diferentes tipos de contenido ?? pero para q me carque el principal como le ago ?
Saludos

Por vick90

9 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Jun 2013 04:45 pm
¿De cuál de los dos métodos estás hablando?.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 11 Jun 2013 07:11 pm
De ajax

Por vick90

9 de clabLevel



 

chrome
Citar            
MensajeEscrito el 11 Jun 2013 07:14 pm
Pues lo cargas fijo, como lo estás haciendo ahora.
La idea detrás de lo que comento es que con Ajax reemplaces el contenido principal por el de las secciones correspondientes.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 19 Jun 2013 09:00 pm
la estructura como yo lo veo más o menos sería así

Código HTML :

<div id="cabecera"> cabecera>cabecera</div>
<div id="menu"> menu1</div>
<div id="contenido"> contenido</div>

en los enlaces del menú llamas a la función cargaPag, con el los parámetros necesarios, en este caso, solo el nombre de la página a mostrar.

Código Javascript :

var conexion
function cargaPag( pagina )
{
   conexion=crearXMLHttpRequest();
   conexion.onreadystatechange = muestraPag;   
   conexion.open('POST',pagina+".php", true);
   conexion.send();
}

function muestraPag()
{
   var res=document.getElementById("contenido");
   if(conexion.readyState == 4)
   {
      if(conexion.responseText !="")   
         res.innerHTML=conexion.responseText;
   }
}

Por Chory

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 20 Jun 2013 08:43 pm
No me muestra nada ya implemente el codigo pero nada este es mi codigo

Código HTML :

   <li><a href="javascript:envia('biografia.html');">Biografia</a></li>

pero no me muestra nada
y este es la funcion

Código Javascript :

function envia(pagina){
  objeto.onreadystatechange=muestra;
  objeto.open("POST",pagina,true);
  objeto.send(null);
   
}

function muestra()
{
  var res=document.getElementById("main");
  if(objeto.readyState==4){
      res.innerHTML=objeto.responseText;    
    }
  }
}

Ayuda

Por vick90

9 de clabLevel



 

chrome
Citar            
MensajeEscrito el 20 Jun 2013 09:12 pm
jaja, un gran fallo por mi parte, lo siento

Código HTML :

<style>
#contenido { background-color:#FFC }
</style>
<div id="cabecera"> cabecera</div>
<div id="menu"><a onclick="envia('biografia.html');"> menu1</a></div>
<div>Contenido:</div><div id="contenido"> contenido</div>
<script>
function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}


var conexion
function envia( pagina )
{
   conexion=crearXMLHttpRequest();
   conexion.onreadystatechange = muestra;   
   conexion.open('POST',pagina, true);
   conexion.send();
}

function muestra()
{
   var res=document.getElementById("contenido");
   if(conexion.readyState == 4)
   {
      if(conexion.responseText !="")   
         res.innerHTML=conexion.responseText;
   }
}
</script>


faltaba definir el objeto XMLHttp :oops:

Por Chory

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 20 Jun 2013 10:51 pm
Eso ya lo tengo hecho pero no funciona

Por vick90

9 de clabLevel



 

chrome
Citar            
MensajeEscrito el 20 Jun 2013 11:59 pm

Por Chory

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Jun 2013 02:33 pm
No me muestra ningun error, o tiene que ver con que lá otra página (biografia.html) tenga las etiquetas básicas de html

Código :

 
<html>
<head></head>
<body>
</body>
</html>

Saludos

Por vick90

9 de clabLevel



 

safari
Citar            
MensajeEscrito el 22 Jun 2013 04:42 pm
si solo tiene eso, no te puede mostrar nada elementalmente ;p.
de todas formas, copia el código fuente de la pagina que te he mostrado y pruebala en tu servidor.
O pon el código aquí tando de la página de los scripts como de biografia.html y lo miro

Por Chory

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Jun 2013 09:46 pm
este es el script

Código Javascript :

function ajax()
{
   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;
}
var objeto=ajax();

function envia(pagina){
  objeto.onreadystatechange=muestra;
  objeto.open("POST",pagina,true);
  objeto.send(null);
   
}

function muestra()
{
  var res=document.getElementById("main");
  if(objeto.readyState==4){
      res.innerHTML=objeto.responseText;    
    }
  }
}

y este el archivo biografia

Código HTML :

<!doctype html>
<html lang="es">
<head>
   <link rel="stylesheet" type="text/css" href="estilos/bio.css">
   <title></title>
</head>
<body >
   <header>
      <div id="titulo">HECTOR TOMAS
         <div class="rec"></div><div class="rec1"></div>
         <div class="tr"></div><div class="tr1"></div>
         <div class="triz"></div><div class="trde"></div>
      </div>
   </header>   
      <div id="wrap">
         <section id="main">
            <div id="cont">
               <article>
               <div class="izq">
                  <img src="img/logo.jpg" alt="">
               </div>
               </article>
               <article>
                  <div class="der">
                     <div class="caja">
                        <p class="texto">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
<p class="texto">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
                     </diV>
                  </div>
               </article>
           </div>
         </section>
      </div>
      
</body>
</html>

Por vick90

9 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 Jun 2013 11:25 pm
En la función muestra te sobra una llave final, has abierto 2 y cierras 3

Por Chory

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 30 Jun 2013 04:13 pm
Bueno que? Ya rula?

Por Chory

23 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.