Duda existencial

HRichards · #1 (**permalink**) 16/01/2011, 12:59

Buenas, tengo una duda que probablemente les resulte un poco tonta pero estoy dando mis primeros pasos en el diseño web.

Aprendí HTML y CSS y ahora estoy dedicandome a leer JavaScript y jQuery.

Estoy haciendo una web personal y es por eso que me surgió la duda. Mi página tiene un header típico en donde está el logo y un menú con botones para ir a las otras páginas, luego un DIV llamado "contenido" y finalmente un "footer"

Una duda que tengo es cuando hago click en un botón del menú. Que sería lo más correcto de hacer.

Lo primero que hice obviamente fue ir a otra página que tenía creada, por ejemplo si el usuario presiona el botón "Contacto" va al archivo contacto.html
Pero lo que no me parece que esté muy bien es que todas las páginas tienen cosas idénticas, por ejemplo el header es el mismo para todas, el footer también. Lo único que cambia es lo que hay adentro del div "contenido".

Ahora que estuve leyendo jQuery estuve pensando en tener UNA ÚNICA página (index.html) y cuando el usuario presiona un botón del menú crear los elementos html y css dinámicamente. Esta forma es más complicada de implementar.

Les pregunto a ustedes que saben mucho más que yo que es lo más correcto para hacer?

maycolalvarez · #2 (**permalink**) 16/01/2011, 19:03

lo que describes se puede hacer desde javascript con AJAX para cargar contenido dinámicamente en una sola capa, pero esto implica el no tener links para SEO.

la alternativa más común es utilizar un script del lado del servidor que te permita separar o segmentar los diferentes elementos de la web y armar el contenido agregando o incluyendo los headers y footers, en los diferentes archivos.

HRichards · #3 (**permalink**) 16/01/2011, 21:38

Gracias por la respuesta!

No entendi bien la segunda alternativa que propones, me la podrias explicar con un poco mas de detalles por favor?

Muchas gracias otra vez!

Saludos!!

maycolalvarez · #4 (**permalink**) 17/01/2011, 10:14

claro, por ejemplo, supone que tenga una web HTML estática con muchas páginas, y todas ellas en común comparten el mismo header:

Código HTML:

Ver original<div>Hola bienvenido a tusitio.com (supongamos que tienes imágenes, links principales, etc.)</div>

y tienes ese código en c/u de las paginas, pero por cosas de la vida, necesitas cambiar ciertas cosas ¡y te toca hacerlo en todas las páginas!, cielos!!!, bueno, es allí en donde entran los script del lado del server, que como son procesados en el servidor te permiten "armar" tu HTML de forma dinámica, y por ejemplo si usas php puedes separar ese código de tus páginas y colocarlo en un archivo diferente:

header.php (puede ser .html)

Código PHP:

Ver original<div>Hola bienvenido a tusitio.com (supongamos que tienes imagenes, links principales, etc.)</div>

y en los demás archivos simplemente colocas o embebes php para que él mismo se encargue de añadir el contenido del fichero indicado:

contacto.php (en este caso, para que el servidor web sepa que necesita procesar el archivo por php, el mismo se coloca con la extensión php, esto depende del servidor y puede configurarse)

Código PHP:

Ver original<html>
...
<body>
<div id="header">
    <?php include('header.php'); ?>
</div>
<div id="content"> ... </div>
...
</body>
</html>

en este caso la línea <?php include('header.php'); ?> la procesa php y con la función include() se encarga de leer el archivo y aplicar su contenido html en el punto indicado, como resultado la pagina contacto.php contendrá el header.php y todo cambio añadido en header.php se reflejará en todos quienes lo incluyan.

por supuesto que lo mismo puede realizarse perfectamente con SSI, pero un script del lado del servidor te permite mucho más, como manipular bases de datos, leer archivos, conectarte con servicios remotos, y más.

HRichards · #5 (**permalink**) 17/01/2011, 19:59

maycol muchisimas gracias! Me quedo muy claro ahora, gracias por la paciencia y la respuesta con ejemplos.
Voy a hacer eso.

Gracias!!

Saludos!

sanxuan · #6 (**permalink**) 18/01/2011, 15:43

Otra solución posible si conoces HTML es usar etiquetas <iframe>. Tendrías un solo archivo index, y mostrarías los contenidos dentro de ellos. Es sencillo de utilizar. Son marcos en línea que muestran otros ficheros HTML sin abandonar la página.