organizar plantilla de un sitio web estático

[html5]

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.

[html5]

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.

[memoadian]

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.

[EHA]

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!!

[lgga]

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

[EHA]

Iniciado por lgga

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.

[lgga]

Iniciado por EHA

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.

[html5]

Iniciado por memoadian

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.

Iniciado por memoadian

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.

Iniciado por EHA

intenta darnos mas datos y te ayudaremos mejor.

Mira lo que me propone Igga y le contesto, creo que eso es lo que quiero.

Iniciado por lgga

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>';
} 
   

[memoadian]

Es lo que te estamos diciendo todos :) solo que con diferentes palabras.

[html5]

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.

[memoadian]

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:

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

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:

</div>
</body>
</html>
 

content.php

esta es la parte que siempre va a cambiar y puede contener cualquier cosa.
por ejemplo un formulario

Código HTML:

<div id="contacto">
    <form id="form" method="post" action="contacto.php">
        <table>
            <tr>
                <td>
                    Nombre:&nbsp;<input type="text" name="nombre" size="15"/>
                </td>
            </tr>
            <tr>
                <td>
                    Apellido:&nbsp;<input type="text" name="apellido" size="15"/>
                </td>
            </tr>
            <tr>
                <td>
                    Email:&nbsp;<input type="text" name="email" size="15"/>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea rows="6" cols="25">Mensaje:</textarea>
                </td>
            </tr>
            <tr>
                <td style="text-align:left;">
                    <input type="submit" value="Enviar" class="button"/>
                </td>
            </tr>
        </table>
    </form>
</div>
 

ahora si ya puedes armar tu index.php

Código PHP:

include ('header.php');
include ('content.php');
include ('footer.php');
 

esa es la idea

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

Código PHP:

include ('../header.php');
include ('../content.php');
include ('../footer.php');
 

de este modo llamas a los archivos un nivel arriba.

[html5]

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?

[memoadian]

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:

if($_SERVER['REQUEST_URI'] == 'index.html'){
    echo "<title>Estas en el index</title>";
}else{
    echo "<title>NO Estas en el index</title>";
}
 

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.