Foros del Web » Creando para Internet » Diseño web »

organizar plantilla de un sitio web estático

Estas en el tema de organizar plantilla de un sitio web estático en el foro de Diseño web en Foros del Web. Muy buenas. Estoy empezando el desarrollo de un sitio web estático y me gustaría que me ayudaran a orientarlo. La idea es que las páginas ...
  #1 (permalink)  
Antiguo 21/10/2011, 18:05
 
Fecha de Ingreso: febrero-2011
Mensajes: 53
Antigüedad: 13 años, 5 meses
Puntos: 2
organizar plantilla de un sitio web estático

Muy buenas.

Estoy empezando el desarrollo de un sitio web estático y me gustaría que me ayudaran a orientarlo.

La idea es que las páginas utilicen una plantilla común que realizaré en HTML + CSS.

¿Cuál es la forma óptima de trabajar?
  1. Copiar y pegar la plantilla en cada página.
  2. Trabajar con un editor tipo Dreamweaver que cuando actualizas la plantilla actualiza todas las páginas.
  3. Separar la plantilla en trozos de forma adecuada e incorporar estos trozos en cada página mediante la función de PHP "include".
  4. ¿Otra?
Me gustaría que me orientasen en el principio del trabajo. Gracias.
  #2 (permalink)  
Antiguo 24/10/2011, 12:59
 
Fecha de Ingreso: febrero-2011
Mensajes: 53
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: organizar plantilla de un sitio web estático

Otra opción que se me ha ocurrido es una variación de los includes. En vez de incluir directamente el código "en bruto" con un include, se me ocurre usar funciones. Me explico.

Por ejemplo, en el menú de navegación el correspondiente a la sección actual tiene un formato especial. Un include me sacaría siempre el mismo menú. Con una función podría pasar como parámetro el nombre de la página actual, para que ese enlace reciba un "class" especial y de ese modo formatee.

¿Es la forma óptima de trabajar?

¿Se entendió la pregunta? Me gustaría que me orientasen para empezar de inmediato el desarrollo.
  #3 (permalink)  
Antiguo 24/10/2011, 13:37
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 15 años
Puntos: 641
Respuesta: organizar plantilla de un sitio web estático

si usas php, entonces ya noe s web estática.

por otro lado es lo más recomendable, ya que si quieres diferentes menus dependiendo de la página puedes usar condicionales para verificar datos por get y mostrar otras cosas.

saludos.
  #4 (permalink)  
Antiguo 24/10/2011, 14:32
EHA
 
Fecha de Ingreso: octubre-2011
Mensajes: 14
Antigüedad: 12 años, 8 meses
Puntos: 1
Respuesta: organizar plantilla de un sitio web estático

No entiendo tu duda, si usas php no seria estatica ya que estoy seguro que lo usaras para algo, ya sea para enviar datos de algun formulario y con esto cambiar el contenido etc...aunque esto no es lo importante.

si quieres crear una pagina unicamente informativa (para un bar, una tienda ...) lo mejor es que crearas una plantilla base y la copiaras tantas veces como secciones quieras hace (index, contacto,quienes somos...) y cambiar el contenido en cada una manualmente.

nose si te referias a eso, sino intenta darnos mas datos y te ayudaremos mejor.

saludos!!
  #5 (permalink)  
Antiguo 24/10/2011, 14:44
Avatar de lgga  
Fecha de Ingreso: octubre-2004
Mensajes: 443
Antigüedad: 19 años, 9 meses
Puntos: 37
Respuesta: organizar plantilla de un sitio web estático

Pues sí, sepárala en trozos. La última que hice la separé en:

1. header.php
2. index.php, servicios.php, contacto.php, etc. (contenido)
3. footer.php
__________________
Breaking the LAW
TSM
  #6 (permalink)  
Antiguo 24/10/2011, 14:55
EHA
 
Fecha de Ingreso: octubre-2011
Mensajes: 14
Antigüedad: 12 años, 8 meses
Puntos: 1
Respuesta: organizar plantilla de un sitio web estático

Cita:
Iniciado por lgga Ver Mensaje
Pues sí, sepárala en trozos. La última que hice la separé en:

1. header.php
2. index.php, servicios.php, contacto.php, etc. (contenido)
3. footer.php
Eso estaria bien si querria usar php y de este modo hacerla dinamica, aunque no tengo claro lo que quiere :S.

Si va a ser unicamente informativa yo dejaria de usar php,ya que el hosting es mas caro, y simplemente la crearia en HTML y CSS, aunque duplicaras codigo, ya que al final es texto plano y los archivos no requieren gran espacio.
  #7 (permalink)  
Antiguo 24/10/2011, 15:01
Avatar de lgga  
Fecha de Ingreso: octubre-2004
Mensajes: 443
Antigüedad: 19 años, 9 meses
Puntos: 37
Respuesta: organizar plantilla de un sitio web estático

Cita:
Iniciado por EHA Ver Mensaje
Eso estaria bien si querria usar php y de este modo hacerla dinamica, aunque no tengo claro lo que quiere :S.

Si va a ser unicamente informativa yo dejaria de usar php,ya que el hosting es mas caro, y simplemente la crearia en HTML y CSS, aunque duplicaras codigo, ya que al final es texto plano y los archivos no requieren gran espacio.
ehhh?? un hosting que soporte php es más caro??? quién dijo eso???

Cualquier plan básico ya soporta php.
__________________
Breaking the LAW
TSM
  #8 (permalink)  
Antiguo 24/10/2011, 17:39
 
Fecha de Ingreso: febrero-2011
Mensajes: 53
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: organizar plantilla de un sitio web estático

Cita:
Iniciado por memoadian Ver Mensaje
si usas php, entonces ya noe s web estática.
No es estrictamente estática... Pero de PHP básicamente usaría los include que sean necesarios, el include lo que haría sería meter código HTML.

Cita:
Iniciado por memoadian Ver Mensaje
si quieres diferentes menus dependiendo de la página puedes usar condicionales para verificar datos por get y mostrar otras cosas
No entiendo lo del get... He comentado que solamente usaría la función include como luego lgga me indica.

Cita:
Iniciado por EHA Ver Mensaje
intenta darnos mas datos y te ayudaremos mejor.
Mira lo que me propone Igga y le contesto, creo que eso es lo que quiero.

Cita:
Iniciado por lgga Ver Mensaje
Pues sí, sepárala en trozos. La última que hice la separé en:

1. header.php
2. index.php, servicios.php, contacto.php, etc. (contenido)
3. footer.php
Creo que esto es lo que yo proponía.

Mi idea es "romper" la plantilla HTML en trozos que incluiría. Lo que pasa que yo haría trozos más definidos:
  • header_open.php para incluir la apertura de HTML, el HEAD común (keywords, link a CSS)...
  • (luego incluiría el título de la página y otras cosas propias de cada página)
  • header_close.php para cerrar el HEAD (con el JavaScript común, cierre de etiqueta HEAD...).
El problema vuelve a ser para mostrar un menú distinto según la página en la que esté. Se me ocurre usar una función de PHP para hacer lo siguiente:
Código PHP:
require 'funcion_menu.php';
mostrar_menu("home"); // muestra un menú resaltando el enlace a home porque es la página en la que estamos 
Y la definición de esa función podría ser (no sé si la sintaxis es la correcta pero es la idea):
Código PHP:
function mostrar_menu($pagina_actual)
{
     echo 
'<ul>';

     echo 
'<li>';
     echo 
'<a href="home"'.if($pagina_actual=="home"){echo 'class=actual'}.'>home</a>';
     echo 
'</li>';

     echo 
'<li>';
     echo 
'<a href="privacy"'.if($pagina_actual=="privacy"){echo 'class=actual'}.'>privacy</a>';
     echo 
'</li>';

     ...

     echo 
'</ul>';

  #9 (permalink)  
Antiguo 24/10/2011, 19:45
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 15 años
Puntos: 641
Respuesta: organizar plantilla de un sitio web estático

Es lo que te estamos diciendo todos :) solo que con diferentes palabras.
  #10 (permalink)  
Antiguo 25/10/2011, 05:03
 
Fecha de Ingreso: febrero-2011
Mensajes: 53
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: organizar plantilla de un sitio web estático

Perfecto, pues muchas gracias a todos

A partir de ahí, solo me queda una duda.

Si yo tengo varios ficheros:

(root)/index.php -> una página HTML
(root)/en/index.php -> una página HTML
(root)/include/header_open.php -> el HTML que se incluye en las páginas anteriores
(root)/css/style.css -> el CSS que se incluye en el HTML desde header_open.php

¿Cómo gestionar el tema de las rutas relativas?

si el header_open.php tendrá que hacer:
Código PHP:
include '../css/style.css' 
Eso funcionará en index.php, pero no funcionará en en/index.php

¿Cómo puedo hacer un include en base al directorio principal del sitio?

No sé si me explico, lo siento si me vuelvo a explicar mal de nuevo.
  #11 (permalink)  
Antiguo 25/10/2011, 08:59
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 15 años
Puntos: 641
Respuesta: organizar plantilla de un sitio web estático

Lo que pasa es que lo estas planeando mal, lo ideal es que el index se componga del footer, header y content.php

sería algo así:

header.php
Código PHP:
Ver original
  1. <?php
  2. //esto es lo que viene en el header de php
  3. //definimos la raiz del directorio
  4. $raiz = "http://miweb.com/";
  5. ?>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  10. <link rel="stylesheet" href="<?php echo $raiz;?>style.css" type="text/css" />
  11. <title>Mi web</title>
  12. </head>
  13. <body>
  14.     <div id="wrap">
  15. <?php
  16. //este es el div que contendrá la info variable de nuestra
  17. //web como menus entradas fotos etc.
  18. //si te fijas al definir la raiz y ponerla delante de todas las rutas relativas nos
  19. //evitamos mucho trabajo
  20. ?>

footer.php

Este puede contener lo que quieras pero debe cerrar el div wrap o como le hayas llamado al que va a contener tu info
Código PHP:
Ver original
  1. </div>
  2. </body>
  3. </html>

content.php

esta es la parte que siempre va a cambiar y puede contener cualquier cosa.
por ejemplo un formulario
Código HTML:
Ver original
  1. <div id="contacto">
  2.     <form id="form" method="post" action="contacto.php">
  3.         <table>
  4.             <tr>
  5.                 <td>
  6.                     Nombre:&nbsp;<input type="text" name="nombre" size="15"/>
  7.                 </td>
  8.             </tr>
  9.             <tr>
  10.                 <td>
  11.                     Apellido:&nbsp;<input type="text" name="apellido" size="15"/>
  12.                 </td>
  13.             </tr>
  14.             <tr>
  15.                 <td>
  16.                     Email:&nbsp;<input type="text" name="email" size="15"/>
  17.                 </td>
  18.             </tr>
  19.             <tr>
  20.                 <td>
  21.                     <textarea rows="6" cols="25">Mensaje:</textarea>
  22.                 </td>
  23.             </tr>
  24.             <tr>
  25.                 <td style="text-align:left;">
  26.                     <input type="submit" value="Enviar" class="button"/>
  27.                 </td>
  28.             </tr>
  29.         </table>
  30.     </form>
  31. </div>

ahora si ya puedes armar tu index.php

Código PHP:
Ver original
  1. include ('header.php');
  2. include ('content.php');
  3. include ('footer.php');

esa es la idea

ahora si quieres armar un index en la carpeta "en"

Código PHP:
Ver original
  1. include ('../header.php');
  2. include ('../content.php');
  3. include ('../footer.php');

de este modo llamas a los archivos un nivel arriba.
  #12 (permalink)  
Antiguo 25/10/2011, 10:54
 
Fecha de Ingreso: febrero-2011
Mensajes: 53
Antigüedad: 13 años, 5 meses
Puntos: 2
Respuesta: organizar plantilla de un sitio web estático

Gracias memoadian... pero no lo veo claro.

Si una página solo se compone de tres archivos:
Código PHP:
include ('header.php');
include (
'content.php');
include (
'footer.php'); 
¿Todas las páginas deben llevar el mismo encabezado? ¿Todas tienen el mismo título, description, keywords... e incluso JavaScript o CSS específico de la página?

Me parece una estupenda idea que el contenido que se añade utilice la variable $raiz. Lo que no me parece ideal es que a veces haya que poner:
Código PHP:
require 'header.php'
y otras veces:
Código PHP:
require '../header.php'
¿No hay otra solución que dependa de la raíz de mi sitio y no de la ubicación del directorio actual? Porque así, no puedo simplemente mover un archivo a un subdirectorio y que siga trabajando. Es código dependiente de la ubicación física en el servidor, y eso no es bueno.

Además, cada archivo (header.php, footer.php...) debería incorporar su propia variable $raíz por ejemplo para añadir un enlace al a página de inicio, ¿verdad?
  #13 (permalink)  
Antiguo 25/10/2011, 11:35
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 15 años
Puntos: 641
Respuesta: organizar plantilla de un sitio web estático

existen muchisisisisisimas formas de solucionar los diversos problemas de una web, por ejemplo

con $_SERVER y sus metodos puedes ver en que parte de la web te encuentras.

haces un condicional que permita saber si estas en la web indicada

Código PHP:
Ver original
  1. if($_SERVER['REQUEST_URI'] == 'index.html'){
  2.     echo "<title>Estas en el index</title>";
  3. }else{
  4.     echo "<title>NO Estas en el index</title>";
  5. }

puedes usar un switch, o una funcion o lo que quieras, con php se puede hacer de todo, todo, todo, pero depende de tus conocimientos e imaginación.

Yo solo te puse un ejemplo.

Etiquetas: organizar, plantilla
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 07:35.