Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de Organización del código en una pagina web en el foro de HTML en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 21/06/2013, 03:01
 
Fecha de Ingreso: junio-2013
Mensajes: 13
Antigüedad: 11 años, 5 meses
Puntos: 0
Organización del código en una pagina web

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!
  #2 (permalink)  
Antiguo 21/06/2013, 03:13
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Organización del código en una pagina web

Bienvenido. Como sabes un poco de php explora los includes en php por supuesto.
  #3 (permalink)  
Antiguo 21/06/2013, 03:26
 
Fecha de Ingreso: junio-2013
Mensajes: 13
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Organización del código en una pagina web

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.
  #4 (permalink)  
Antiguo 21/06/2013, 03:56
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 7 meses
Puntos: 5
Respuesta: Organización del código en una pagina web

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
  #5 (permalink)  
Antiguo 21/06/2013, 04:04
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 9 meses
Puntos: 17
Respuesta: Organización del código en una pagina web

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. :)
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #6 (permalink)  
Antiguo 21/06/2013, 04:06
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 9 meses
Puntos: 17
Respuesta: Organización del código en una pagina web

Cita:
Iniciado por iEnrique Ver Mensaje
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
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #7 (permalink)  
Antiguo 21/06/2013, 04:32
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 7 meses
Puntos: 5
Respuesta: Organización del código en una pagina web

Cita:
Iniciado por HackID1 Ver Mensaje
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
  #8 (permalink)  
Antiguo 21/06/2013, 04:45
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 492
Antigüedad: 11 años, 9 meses
Puntos: 17
Respuesta: Organización del código en una pagina web

Cita:
Iniciado por iEnrique Ver Mensaje
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 :) .
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #9 (permalink)  
Antiguo 21/06/2013, 05:43
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 11 años, 7 meses
Puntos: 5
Respuesta: Organización del código en una pagina web

Cita:
Iniciado por HackID1 Ver Mensaje
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
  #10 (permalink)  
Antiguo 21/06/2013, 07:12
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Organización del código en una pagina web

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.

Etiquetas: css, página, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:32.