[SOLUCIONADO] Organización del código en una pagina web

[millita88]

Hola.

Estoy empezando con esto del diseño web y como bautismo de fuego estoy haciendo una web para la empresa del padre de un amigo. Llevo bastante tiempo estudiando informática, y se defenderme mínima mente con html, css, php y bases de datos por lo que me puse a ello.

Mi problema es, ¿como organizo el código?. Como estoy empezando no se realmente cual es la forma correcta y eficiente de hacerlo.

Ejemplo:
Tengo una web que esta diseñada con una cabecera, barra de menú, contenido y pie. Supongamos que tengo la pagina de inicio, la pagina de contacto y la pagina de información. Todas ellas contendrían la misma cabecera, la misma barra de menú y el mismo pie, y únicamente cambiaría el contenido.

Yo como buen novato, copio y pego en 3 .html distintos el mismo código de cabecera, menús y pie, y cambio el contenido al que corresponda, y asi tengo mis 3 páginas. Pero claro, si tengo que cambiar algo en el menú, de esta forma tengo que cambiarlo en todos los archivos, y lo mismo pasa con la cabecera y el pie.

¿Cual sería la forma correcta de hacerlo?

Saludos y gracias!

[Rafael]

Bienvenido. Como sabes un poco de php explora los includes en php por supuesto.

[millita88]

De php solo hice hace tiempo tratamiento de formularios para mandar info a una bd. Se que la pregunta era muy tonta, pero no sabía como buscar la información por Internet y no encontraba nada, pero estoy mirando lo de los includes y creo que será la solución.

Básicamente metería la cabecera, pie y menú en varios .php que después "incluiría" en todas las páginas, así las modificaciones se hacen solo en un fichero y se actualizan en todos!

Muchas gracias por tan rápida respuesta!!


Saludos.

[iEnrique]

Puedes basar tu código en:

1. Head (te recomiendo meterlo en un "include" de PHP para que así lo tengas en todas las páginas y si lo quieres cambiar se cambia en todas cambiando solo la página del "include").
2. Header (El encabezado, te recomiendo meterlo en un "include" de nuevo si aparece igual en todas las páginas).
3. Nav (es el menú que también te recomiendo meterlo en un "include").
4. Después el interior de la página se puede basar en un <article></article> y si quieres poner alguna barra por la derecha un <aside></aside>.
5. Footer (es la barra de abajo, el final de la página que también te recomiendo meter en un "include" si aparece igual en todas las páginas).

Si quieres verlas mira las etiquetas HTML5 que te sirvan de organización para la web: http://ayudawordpress.com/html5-toda...vas-etiquetas/

Suerte con la empresa de tu padre :P

[HackID1]

Buenas respuestas, yo también estaba en la misma duda porque estoy pensando crear una página web y pensaba lo mismo hacer varios include en las páginas Html.
Ya tengo claro con sus respuestas que esta es una forma correcta de hacerlo.
Y animo con la página web millita88!!! Yo también estoy en ello. :)

[HackID1]

Iniciado por iEnrique

Puedes basar tu código en:

1. Head (te recomiendo meterlo en un "include" de PHP para que así lo tengas en todas las páginas y si lo quieres cambiar se cambia en todas cambiando solo la página del "include").
2. Header (El encabezado, te recomiendo meterlo en un "include" de nuevo si aparece igual en todas las páginas).
3. Nav (es el menú que también te recomiendo meterlo en un "include").
4. Después el interior de la página se puede basar en un <article></article> y si quieres poner alguna barra por la derecha un <aside></aside>.
5. Footer (es la barra de abajo, el final de la página que también te recomiendo meter en un "include" si aparece igual en todas las páginas).

Si quieres verlas mira las etiquetas HTML5 que te sirvan de organización para la web: http://ayudawordpress.com/html5-toda...vas-etiquetas/

Suerte con la empresa de tu padre :P

Perdona el doble post pero se me olvido citar tu respuesta.

Una duda que tengo, entiendo que dices que hagamos uso de HTML5 en la página web, pero ¿De esta forma no sería compatible con todos los navegadores y mucha gente no la visualizaría correctamente, no?
Es lo que me han dicho de HTML5 que no esta estandarizado aún. Gracias

[iEnrique]

Iniciado por HackID1

Perdona el doble post pero se me olvido citar tu respuesta.

Una duda que tengo, entiendo que dices que hagamos uso de HTML5 en la página web, pero ¿De esta forma no sería compatible con todos los navegadores y mucha gente no la visualizaría correctamente, no?
Es lo que me han dicho de HTML5 que no esta estandarizado aún. Gracias

Con las etiquetas HTML5 lo que haces es darles una idea a los navegadores que los soportan de qué es cada zona de la web, pero debes meter cada una de las partes en unos <div></div> para que los navegadores que no lo tengan aún puedan reconocer que es un contenedor, aunque no sepan muy bien para que sirve pero ellos lo ponen xdd

[HackID1]

Iniciado por iEnrique

Con las etiquetas HTML5 lo que haces es darles una idea a los navegadores que los soportan de qué es cada zona de la web, pero debes meter cada una de las partes en unos <div></div> para que los navegadores que no lo tengan aún puedan reconocer que es un contenedor, aunque no sepan muy bien para que sirve pero ellos lo ponen xdd

Hola, Ok entonces puedo hacer uso de las etiquetas HTML5 pero metiendolas en div para que las reconozcan los navegadores que NO soporten HTML5 no?

Y un ejemplo podría ser así: ?

Código HTML:

<!DOCTYPE html >
<html>

<head>
	<title> 
		Página hotel XML
	</title>
	<script>	
	</script>
	<style>
		
		header 
		{
			border: solid 2px red;
			border-radius: 5px;
			text-align: center;
			color: blue;
			background-color: #2ECCFA;
		}
	
		#capa_central
		{
			position: absolute;
			top: 20%;
			bottom: 6%;
			width: 70%;
			border: solid;
			border-color: green;
			border-radius: 6px;
			left: 1%;
			right: 1%;
			background-color: silver;
		}
	
		nav
		{
			position: absolute;
			top: 14%;
			width: 98%;
			text-align: center;
			border: solid;
			border-color: red;
			border-radius: 5px;
			background-color: #FA5882;
		}
		
		section
		{
			position: absolute;
			top: 2%;
			bottom: 5%;
			left: 2%;
			border: solid;
			border-color: #FACC2E;
			border-radius: 5px;
			color: black;
			text-align: center;
			background-color: #81F79F;
		}
		
		video
		{
			position: absolute;
			left: 70%;
			top: 2%;
		}
		
		canvas
		{
			position: absolute;
			left: 55%;
			top: 50%;
			border: solid;
			border-color: red;
		}
		
		#capa_derecha
		{
			position: absolute;
			left: 73%;
			top: 20%;
			bottom: 6%;
			width: 25%;
			border: solid;
			border-color: green;
			border-radius: 6px;
			right: 1%;
			background-color: silver;
		}
		
		aside
		{
			position: absolute;
			left: 2%;
			top: 2%;
			right: 2%;
			border: solid;
			border-radius: 5px;
			background-color: orange;
		}
		
		
		footer
		{
			position: absolute;
			border: solid 1px black;
			border-radius: 5px;
			text-align: left;
			color: black;
			top: 95%;
			bottom: 2%;
			width: 98%;
			background-color: silver;
		}
		
        @font-face
		{
            font-family:"Deliciosa";
            src:url('fonts/Delicious-Roman.otf');            
        }
		
		
	</style>
</head>

<body>
		
	<header> 
		<h1> Página </h1>
	</header>
	
	<nav>
			<table>
				<tr> 
					<td> Inicio. </td>
					<td> </td>
					<td> Reservas del Hotel </td>
					<td> Ayuda </td>
				</tr>
			
			</table>
	</nav>
	
	<footer>
		Creada por
	</footer>

	<div id="capa_central"> 
	
		<section> 	
			Seccion de articulos 
		</section>
		
	</div>

	<div id="capa_derecha" >
	
		<aside>
			Hoteles más visitados.
			<br/>
			Introduzca su correo.
			<br/>
			<form>
				
				<input type="email" name="email" placeholder="Introduce tu correo"/>
				<input type="submit" value="Probar">
			Introduzca su edad.
			<br/>
				<input type="number" name="edad" placeholder="Introduce tu edad"/>
			<br/>
			Elija un color
			<br/>
				<input type="color" name="color" />
			<br/>
			Introduzca fecha
			<br/>
				<input type="date" name="date" />
			<br/>
			Introduzca hora
			<br/>
				<input type="time" name="time" />
			</form>
			
		</aside>
	
	</div>
	
</body>

</html> 

Fijate que a HEADER, NAV y FOOTER no las meto en un DIV el resto si, esto valdría o hay que colocar esas etiquetas dentro de DIVs también. Gracias
Este es un ejemplo que hice hace unos meses en el instituto :) .

[iEnrique]

Iniciado por HackID1

Hola, Ok entonces puedo hacer uso de las etiquetas HTML5 pero metiendolas en div para que las reconozcan los navegadores que NO soporten HTML5 no?

Y un ejemplo podría ser así: ?

Código HTML:

<!DOCTYPE html >
<html>

<head>
	<title> 
		Página hotel XML
	</title>
	<script>	
	</script>
	<style>
		
		header 
		{
			border: solid 2px red;
			border-radius: 5px;
			text-align: center;
			color: blue;
			background-color: #2ECCFA;
		}
	
		#capa_central
		{
			position: absolute;
			top: 20%;
			bottom: 6%;
			width: 70%;
			border: solid;
			border-color: green;
			border-radius: 6px;
			left: 1%;
			right: 1%;
			background-color: silver;
		}
	
		nav
		{
			position: absolute;
			top: 14%;
			width: 98%;
			text-align: center;
			border: solid;
			border-color: red;
			border-radius: 5px;
			background-color: #FA5882;
		}
		
		section
		{
			position: absolute;
			top: 2%;
			bottom: 5%;
			left: 2%;
			border: solid;
			border-color: #FACC2E;
			border-radius: 5px;
			color: black;
			text-align: center;
			background-color: #81F79F;
		}
		
		video
		{
			position: absolute;
			left: 70%;
			top: 2%;
		}
		
		canvas
		{
			position: absolute;
			left: 55%;
			top: 50%;
			border: solid;
			border-color: red;
		}
		
		#capa_derecha
		{
			position: absolute;
			left: 73%;
			top: 20%;
			bottom: 6%;
			width: 25%;
			border: solid;
			border-color: green;
			border-radius: 6px;
			right: 1%;
			background-color: silver;
		}
		
		aside
		{
			position: absolute;
			left: 2%;
			top: 2%;
			right: 2%;
			border: solid;
			border-radius: 5px;
			background-color: orange;
		}
		
		
		footer
		{
			position: absolute;
			border: solid 1px black;
			border-radius: 5px;
			text-align: left;
			color: black;
			top: 95%;
			bottom: 2%;
			width: 98%;
			background-color: silver;
		}
		
        @font-face
		{
            font-family:"Deliciosa";
            src:url('fonts/Delicious-Roman.otf');            
        }
		
		
	</style>
</head>

<body>
		
	<header> 
		<h1> Página </h1>
	</header>
	
	<nav>
			<table>
				<tr> 
					<td> Inicio. </td>
					<td> </td>
					<td> Reservas del Hotel </td>
					<td> Ayuda </td>
				</tr>
			
			</table>
	</nav>
	
	<footer>
		Creada por
	</footer>

	<div id="capa_central"> 
	
		<section> 	
			Seccion de articulos 
		</section>
		
	</div>

	<div id="capa_derecha" >
	
		<aside>
			Hoteles más visitados.
			<br/>
			Introduzca su correo.
			<br/>
			<form>
				
				<input type="email" name="email" placeholder="Introduce tu correo"/>
				<input type="submit" value="Probar">
			Introduzca su edad.
			<br/>
				<input type="number" name="edad" placeholder="Introduce tu edad"/>
			<br/>
			Elija un color
			<br/>
				<input type="color" name="color" />
			<br/>
			Introduzca fecha
			<br/>
				<input type="date" name="date" />
			<br/>
			Introduzca hora
			<br/>
				<input type="time" name="time" />
			</form>
			
		</aside>
	
	</div>
	
</body>

</html> 

Fijate que a HEADER, NAV y FOOTER no las meto en un DIV el resto si, esto valdría o hay que colocar esas etiquetas dentro de DIVs también. Gracias
Este es un ejemplo que hice hace unos meses en el instituto :) .

Sí, claro, ¿son etiquetas HTML5? Pues adentro xdd

[Rafael]

Las que te causarían un poco de problema son las uevas. Header, section.

Usa el script modernizer.js y en tus estilos asigna header, footer, section (etcétera) {display: block;} y ya se soluciona.