Imprimir Página - PAGINA HTML POR CAPAS (SOLUCIONADO)

Título: PAGINA HTML POR CAPAS (SOLUCIONADO)
Publicado por: smagno en 23 Octubre 2009, 05:14 am

Hola a todos.

Estoy tratando de trabajar una pagina por capas y tengo el encabezado.html
menu.html y el pie.htlm. me pregunta es como hago para llamar estas paginas en la pagina principal.

index.html

<body>
   encabezado.html
   menu.html

   <div id="contenido">

   </div>

   pie.html

</body>

Título: Re: PAGINA HTML POR CAPAS
Publicado por: Nakp en 23 Octubre 2009, 05:58 am

con frames? ajax, php... busca sobre webs modulares en el foro de php y también lee sobre como evitar LFI ;)

Título: Re: PAGINA HTML POR CAPAS
Publicado por: Mr. Crowley en 23 Octubre 2009, 18:37 pm

En caso de web modular podria usar algo como esto:

Código

<body>
	<div id="divEncabezado">
    	<?php include("encabezado.html"); ?>
    </div>
	<div id="divMenu">
    	<?php include("menu.html"); ?>
    </div>
    <div id="contenido">
    	<p>Lo que sea</p>
    </div>
	<div id="divPie">
    	<?php include("pie.html"); ?>
    </div>
</body>

Amigo, mas o menos se de que trata su proyecto... y no creo que sea necesario
incluir los contenidos de esa forma (es solo un consejo ;) ). Podria colocarlos
directamente en las capas, sin tener que cargarlos con el include.

Si tuviera algun problema con el include, puede utilizar

Código

include_once("pagina.html");

Título: Re: PAGINA HTML POR CAPAS
Publicado por: smagno en 23 Octubre 2009, 18:48 pm

Mr.Crowley
Yo pense realizarlos asi ya que es lo mismo en todas las paginas y pense no repetir el mismo codigo.

Gracias de todas formas.

Título: Re: PAGINA HTML POR CAPAS
Publicado por: Mr. Crowley en 23 Octubre 2009, 18:53 pm

Cita de: smagno en 23 Octubre 2009, 18:48 pm

Mr.Crowley
Yo pense realizarlos asi ya que es lo mismo en todas las paginas y pense no repetir el mismo codigo.

Gracias de todas formas.

Hmmm.. buen punto... supongo que no hace uso de Ajax, cierto?
En caso de usar ajax imagino que solo cargaria la parte del contenido... y entonces
no necesitaria recargar las demas partes (menu, pie, etc)... ahi no serian necesarios
los includes.

Título: Re: PAGINA HTML POR CAPAS
Publicado por: smagno en 23 Octubre 2009, 18:56 pm

Mr. Crowley
Exacto en el encabezado no utilizo ajax ni en el pie pero en el menu utilizo javascript me toca poner script en el archivo o lo dejo donde llamo el menu.

Título: Re: PAGINA HTML POR CAPAS
Publicado por: Mr. Crowley en 23 Octubre 2009, 19:00 pm

Cita de: smagno en 23 Octubre 2009, 18:56 pm

Mr. Crowley
Exacto en el encabezado no utilizo ajax ni en el pie pero en el menu utilizo ‭‬javascript me toca poner script en el archivo o lo dejo donde llamo el menu.

Sorry, pero no entiendo si es una pregunta o me esta diciendo algo :-[
Para que usa javascript en el menu?

Título: Re: PAGINA HTML POR CAPAS
Publicado por: smagno en 23 Octubre 2009, 19:04 pm

disculpa por la escritura.
Si estaba preguntando. El menu que estoy utilizando tiene una funcion en javascript.

Título: Re: PAGINA HTML POR CAPAS
Publicado por: Mr. Crowley en 23 Octubre 2009, 19:06 pm

Tranquilo ;D Que hace esa funcion javascript?

Título: Re: PAGINA HTML POR CAPAS
Publicado por: smagno en 23 Octubre 2009, 19:08 pm

Esta es la funcion.

Código:


stuHover = function() {
	var cssRule;
	var newSelector;
	for (var i = 0; i < document.styleSheets.length; i++)
		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
			{
			cssRule = document.styleSheets[i].rules[x];
			if (cssRule.selectorText.indexOf("LI:hover") != -1)
			{
				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
				document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
			}
		}
	var getElm = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<getElm.length; i++) {
		getElm[i].onmouseover=function() {
			this.className+=" iehover";
		}
		getElm[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

Título: Re: PAGINA HTML POR CAPAS
Publicado por: smagno en 23 Octubre 2009, 19:17 pm

Mr. Crowley
Revisastes tu correo??? Please.

Título: Re: PAGINA HTML POR CAPAS
Publicado por: Mr. Crowley en 23 Octubre 2009, 19:18 pm

Ese script lo puede colocar en el head de la pagina (todo el codigo) o guardarlo en un
archivo independiente y luego desde el head incluirlo.

Por lo que veo no es necesario usar los includes, a fin y al cabo lo unico que cambia
es el contenido (mediante ajax) y el menu lo maneja esa funcion... No hay problema :)

Si quiere guardar el script en un documento independiente (con el nombre: prueba.js, ejemplo)... lo puede incluir asi:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prueba</title>
<script type="text/javascript" language="javascript" src="prueba.js"></script>
</head>
<body>
	<div id="divEncabezado">
    	Encabezado que o cambia
    </div>
	<div id="divMenu">
    	Codigo del menu que es manejado por la funcion en el archivo prueba.js
    </div>
    <div id="contenido">
    	Contenido que cambia por medio de Ajax
    </div>
	<div id="divPie">
    	Pie que o cambia
    </div>
</body>
</html>

Para colocar la funcion en el documento:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prueba</title>
<script language="javascript">
stuHover = function() {
	var cssRule;
	var newSelector;
	for (var i = 0; i < document.styleSheets.length; i++)
		for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
			{
			cssRule = document.styleSheets[i].rules[x];
			if (cssRule.selectorText.indexOf("LI:hover") != -1)
			{
				 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
				document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
			}
		}
	var getElm = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<getElm.length; i++) {
		getElm[i].onmouseover=function() {
			this.className+=" iehover";
		}
		getElm[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
</head>
<body>
	<div id="divEncabezado">
    	Encabezado que o cambia
    </div>
	<div id="divMenu">
    	Codigo del menu que es manejado por la funcion
    </div>
    <div id="contenido">
    	Contenido que cambia por medio de Ajax
    </div>
	<div id="divPie">
    	Pie que o cambia
    </div>
</body>
</html>

Título: Re: PAGINA HTML POR CAPAS
Publicado por: smagno en 23 Octubre 2009, 19:20 pm

Mr.Crowley
Tu opinion es mejor no usar include.

Título: Re: PAGINA HTML POR CAPAS
Publicado por: Mr. Crowley en 23 Octubre 2009, 19:37 pm

Personalmente no lo haria, solo en caso de que lo necesite. No se que pensaran l@s demas.

El script (‭‬javascript) se puede colocar en un archivo independiente como le respondi
mas arriba. Tambien, se puede colocar directamente en el documento.

El menu sea por include o directamente en el documento siempre va a ser el mismo.
De todas formas lo maneja la funcion. No le veo beneficio al hacer el include, ya que
lo unico que se va a recargar es el contenido. En caso de que su pagina no use Ajax y
tenga que regargar todo cada vez que hace clic en un link del menu, ahi si seria util.
Pero creo que en su caso si hace uso de Ajax.

Bueno, esto es solo una opinion personal... hay muchas formas de hacer una cosa,
depende del gusto de la gente y de las necesidades que tengamos ;D

Cita de: smagno en 23 Octubre 2009, 19:17 pm

Mr. Crowley
Revisastes tu correo??? Please.

1) Necesito es como valido al usuario en la session del menu principal que si no hay usuario valido lo mande al frmlogin.html para que entre un usuario o se registre.
2) Como hago que me aparezca o me muestre el usuario que esta activo.

Con respecto a eso... un ejemplo sencillo:

login.php

Código

<?php
	session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prueba</title>
</head>
<body>
	Colocar usuario y contraseña para login
</body>
</html>

principal.php (suponiendo que es la pagina donde estan el menu y las principales opciones de la aplicacion):

Código

<?php
	session_start();
 
	if(trim($_SESSION["usuario"])==""){
		header("Location: login.php");
	}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prueba</title>
<script type="text/&#8237;&#8236;javascript" language="&#8237;&#8236;javascript" src="prueba.js"></script>
</head>
<body>
	Contenido de la pagina principal
    Menu, opciones, etc
</body>
</html>

1. login.php es quien llamaria al script que valida al usuario, si el usuario es valido
entonces crea la variable $_SESSION["usuario"] y le coloca el login del mismo.

2. Cuando valida el usuario (por medio del script que llama login.php), ahi mismo
puede obtener el nombre del usuario y almacenarlo en otra variable de sesion. Asi
nada mas en la pagina principal lo imprime:

Código

    echo $_SESSION["nombre_usuario"];

Tambien, si no quiere almacenarlo en la variable de sesion, puede consultarlo en la
tabla que contiene los usuarios (usando como referencia el contenido de la variable
$_SESSION["usuario"]).

Edito:
Veo que esta usando paginas con extension html. Si va a usar sesiones entonces
debe cambiarlo a PHP, ya que no le funcionaria; solo si el server esta configurado
para procesar los html como si fueran php.

Título: Re: PAGINA HTML POR CAPAS
Publicado por: smagno en 24 Octubre 2009, 04:59 am

Mr. Crowley
Gracias.

Foro de elhacker.net

Programación => PHP => Mensaje iniciado por: smagno en 23 Octubre 2009, 05:14 am