Cargar contenido dinámicamente

[LanbreGroteo]

Me he encontrado en la web esta página http://www.wix.com/demone2/medical-clinic y sinceramente, me ha gustado la forma en cómo se maneja la información al hacer clic en los vínculos de la barra de navegación.

Ahora bien, la pregunta es ¿cómo se hace? ¿Será que los carguen de otros archivos el contenido o está en el mismo index?

La idea que yo tenía es hacer divs, sections o algo por estilo, por ejemplo:

Código HTML:

<section id="inicio">
//todo el contenido de la plantilla inicio
</section>
<section id="about">
//todo el contenido de la plantilla about
</section> 

y así sucesivamente. Luego con un código en jQuery, cargar los divs automáticamente. Es la forma más fácil e intuitiva que se me ocurre. Ahora, otra cosa... cuando ustedes en esa página están en la pestaña inicio, está se pone en negro mientras los otros vínculos están en un azul tenue. Cuando se van a otra pestaña, por ejemplo: "Contact", y dan clic, esta automáticamente pasa a negro y el vínculo del "Home" es seleccionable de nuevo. ¿cómo se hará?

Intenté ver el código fuente de la página para darme una idea pero sin resultados. ¡Gracias de antemano!

[homlyne]

Hola,

Sobre la carga de páginas si lo puedes hacer con javascript que es asi como está hecha la página que has compartido, pero hay un pero que al deshabilitar el uso de javascript en el navegador la página no se ve en mi opinión eso no es bueno por accesibilidad y seguridad..

Es mejor hacerlo en lenguaje de servidor y luego mejorar el diseño en javascript.

Y el título lo puedes hacer de varias formas por lado de cliente o por servidor detectando la url, hay muchos ejemplos por google.

[LanbreGroteo]

Iniciado por homlyne

Hola,

Sobre la carga de páginas si lo puedes hacer con javascript que es asi como está hecha la página que has compartido, pero hay un pero que al deshabilitar el uso de javascript en el navegador la página no se ve en mi opinión eso no es bueno por accesibilidad y seguridad..

Es mejor hacerlo en lenguaje de servidor y luego mejorar el diseño en javascript.

Y el título lo puedes hacer de varias formas por lado de cliente o por servidor detectando la url, hay muchos ejemplos por google.

Y ¿Podrías darme una idea de como hacer eso del lado del servidor y perfeccionarlo en Javascript? No pido el código, sino una serie de pasos del "cómo" podría hacerse. Muchas gracias por tu respuesta, homlyne.

[homlyne]

Quitando el hecho que hay que saber asp o php y javascript, lo primero que debes es hacer todas las páginas en lenguaje servidor asp o php, aunque el usuario se le de por desactivar javascript en el navegador tu página se seguirá viendo, obviamente en la usabilidad en estos tiempos bonito no queda, porque cuando un usuario pinche en un enlace recarga toda la página...

Una vez que hayas terminado el php, ya puedes hacerlo con javascript utilizando AJAX, te recomiendo usar la librería jquery es fácil e intuitivo, .ajax() con esto lo que haces es una petición al servidor (página asp o php o html) y te devolverá la respuesta (página asp o php o html) y esto lo hace sin tener que recargar toda la página, solo carga la parte en la que quieras que aparezca la otra página.

En google puedes encontrar muchos ejemplos de páginas dinámicas.

[jmdearpe]

Hola, tengo varias páginas montadas asi y me funcionan muy bien con jquery:

Código HTML:

function carga(script)
{
jQuery('#capamadre').animate({opacity:0},200, function() { jQuery('#contenido').load(script+".php", function() {jQuery('#capamadre').animate({opacity:1},200)})  });
;
}

Lo que hace esa función es una transición a 0 en opacidad, cuando la transicion termina carga el contenido y una vez cargado le vuelve a poner opacidad a 1, el 200 son los milisegundos.

Luego pones un link con javascript y poco más

Código HTML:

<a href="JavaScript:carga('contacto')">contacto</a> <!-- esto te cargaría por ejemplo contacto.php--> 

Eso si tienes que tener estas capas

Código HTML:

<div id="capamadre">
	<div id="contenido">   
	</div>
</div> 

Y por supuesto cargar jquery ;)

saludos

[LanbreGroteo]

Iniciado por jmdearpe

Hola, tengo varias páginas montadas asi y me funcionan muy bien con jquery:

Código HTML:

function carga(script)
{
jQuery('#capamadre').animate({opacity:0},200, function() { jQuery('#contenido').load(script+".php", function() {jQuery('#capamadre').animate({opacity:1},200)})  });
;
}

Lo que hace esa función es una transición a 0 en opacidad, cuando la transicion termina carga el contenido y una vez cargado le vuelve a poner opacidad a 1, el 200 son los milisegundos.

Luego pones un link con javascript y poco más

Código HTML:

<a href="JavaScript:carga('contacto')">contacto</a> <!-- esto te cargaría por ejemplo contacto.php--> 

Eso si tienes que tener estas capas

Código HTML:

<div id="capamadre">
	<div id="contenido">   
	</div>
</div> 

Y por supuesto cargar jquery ;)

saludos

Perfecto... Ahora, lo que haré será quitarle lo de los vínculos y mejor hacerlos mediante divs. Y que al pasar el mouse por dichos divs, se manejen como enlaces. ¡Muchísimas gracias a ambos! Sus respuestas fueron de utilidad.

[Nemutagk]

Iniciado por jmdearpe

Hola, tengo varias páginas montadas asi y me funcionan muy bien con jquery:

Código HTML:

function carga(script)
{
jQuery('#capamadre').animate({opacity:0},200, function() { jQuery('#contenido').load(script+".php", function() {jQuery('#capamadre').animate({opacity:1},200)})  });
;
}

Lo que hace esa función es una transición a 0 en opacidad, cuando la transicion termina carga el contenido y una vez cargado le vuelve a poner opacidad a 1, el 200 son los milisegundos.

Luego pones un link con javascript y poco más

Código HTML:

<a href="JavaScript:carga('contacto')">contacto</a> <!-- esto te cargaría por ejemplo contacto.php--> 

Eso si tienes que tener estas capas

Código HTML:

<div id="capamadre">
	<div id="contenido">   
	</div>
</div> 

Y por supuesto cargar jquery ;)

saludos

Sin ofender, pero es un metodo "horrible", tal cual dicen en una de las respuestas, cuando el usuario tenga desactivado Javascript tu sitio no funcionará en absoluto, la forma correcta es mantener el URL real hacia el fichero en el href del link y ya con javascript manejar los eventos "click" de los enlaces, así cuando alguien de click en un enlace detienes su ejecución (que cambie de página) y mandas a llamar a la página via Ajax, así si Javascript esta deshabilitado el sitio aun funcionará de manera normal (cambiando y cargando la nueva página)

[jmdearpe]

Hola,

Tu pediste Jquery para carga dinámica de secciones y yo te puse un ejemplo rápido cuya próposito es que vieras enseguida como implementarlo, ya el resto ponlo como te parezca mejor.

Salu2 )