2012-01-24 16 views
5

Soy bastante nuevo en la creación de sitios web. Sin embargo, tengo algo de experiencia en LaTeX y algunos otros lenguajes de programación.¿Buenas prácticas para incluir un menú en un sitio web?

Realmente tratar de reutilización de código, etc. Por lo tanto, cuando la construcción de mi página web, quiero "incluyen", por ejemplo, el menú en las otras páginas, en lugar de copiar y pegar de forma explícita en.

Hay varias formas que conozco que pueden hacer esto:

  • el menú es una página estática, su contenido está en un iframe. Esta es la peor forma de hacerlo, ya que rompe muchas cosas, como back/forward, etc ... (que sé que podría ser algo inteligente para algunos, pero no en mi caso).
  • Esto es lo que estoy usando ahora: cada página web incluye el menú usando un iframe:

    <iframe src="menu.html" class="menu" height="100%" frameborder="0"></iframe> 
    

    la desventaja de este método es: el menú no quede recargado correctamente cuando las personas vuelven a visitar su sitio web , a menos que utilice algunas secuencias de comandos que dice específicamente el navegador para hacer esto:

    document.getElementById('some_frame_id').contentWindow.location.reload(); 
    
  • esto es lo que estaba pensando desde mi nuevo huésped permite esto: que incluye el menú utilizando SSI.

    < !--#include virtual="/menu.html"--> 
    

    El posible inconveniente es que cada página web debe tener en cuenta la incluye, y por lo tanto tiene que ser analizado (esto ralentiza el sistema de archivos). La seguridad no es un problema para mí.

¿Qué recomendarías? ¿Hay reglas de cortesía de lo que se debe hacer? ¿Hay problemas de compatibilidad con alguno de los métodos descritos anteriormente? ¿Hay mejores métodos?

Por ejemplo: sospecho que el segundo método (que estoy usando ahora) rompe la indexación de google, por lo que solo mi página de inicio se indexa. (No estoy seguro de si esto es cierto, sin embargo).

+4

No intente optimizar de forma prematura. Use SSI y, si hay un problema de rendimiento, vea qué puede hacer. Pero apuesto a que nunca sucederá. –

+0

La indexación de google no se ha ampliado. El servidor incluye la pieza de HTML antes de enviarla al cliente, ya sea el navegador de alguien o uno de los rastreadores de Google. La secuencia de comandos que incluye el comentario 'incluir' nunca se enviará. – bigblind

+0

@JBNizet: de acuerdo, leí en [este tutorial en cgi] (http://oreilly.com/openbook/cgi/ch05_02.html) que esta es una mala idea. Debo decir que no he notado ningún problema de rendimiento en las páginas que ya tengo SSI. ¿Existen reglas/convenciones sobre cómo nombrar las páginas (extensiones)? Mis páginas habilitadas para SSI se extienden '.shtml' en este momento, ¿hay algún problema si solo guardo todo' .html' (sé que esto funcionará, pero ¿está bien hacerlo)? – romeovs

Respuesta

3

La forma de hacerlo es usar algo como Server-Side include. Otros desarrolladores web pueden estar usando PHP o Python o algún sistema de plantillas, pero en última instancia el patrón de diseño es que el resultado HTML está duplicado, pero el HTML en su sistema de plantillas no.

Su preocupación por la disminución de la velocidad de procesamiento de SSI es infundada. SSI es increíblemente rápido y el servidor web utilizará las mismas optimizaciones que generaría una página; puede almacenarlo en la memoria caché y procesarlo sobre la marcha.

Dado que simplemente quiere evitar el duplicado de HTML, SSI parece un buen camino a seguir, especialmente si ya lo tiene funcionando bien para usted. Su inconveniente es su falta de características de programación avanzadas. Pero la velocidad, básicamente, nunca es un problema con SSI; es una de las soluciones más rápidas que hay. Tampoco afecta la indexación de Google; Google solo ve el HTML entregado, no el SSI. SSI es del lado del servidor.

0

1.) Una forma rápida de gestionar esto es usar plantillas DreamWeaver. Cualquier bloque HTML puede convertirse en una plantilla. Una plantilla puede usarse en cualquier página de su sitio. Las plantillas se administran como un activo dentro de DreamWeaver.Edite la plantilla y DreamWeaver actualiza todos los lugares donde se utiliza esa plantilla en las páginas de su sitio. La herramienta no es gratis. Otras tecnologías gratuitas siguen:

2.) El motor de plantillas de velocidad maneja muchas de las páginas en el sitio de apache.org. Puede usar ANT para generar su sitio web. http://velocity.apache.org/engine/devel/webapps.html

3.) Si está haciendo algo con Java ... consulte JFS y Facelets. http://www.ibm.com/developerworks/java/library/j-facelets/

1

En HTML5 se puede hacer esto fácilmente con la etiqueta de objeto, por ejemplo

<object data=menu_page.html type="text/html" style="usual css..." ></object> 

Se tiene que especificar la posición, anchura y altura usando CSS. Así que si es html estructural más que el contenido del texto, que podría ponerlo en una capa de fondo usando style="z-index:-1;position:absolute;top:0;left:0; width:100%;height:100%"

Esto parece funcionar en los navegadores actuales (tesing en Safari y Chrome)

algunas ventajas sobre SSI:

  • El cliente puede almacenar en caché el pie de página del encabezado que a menudo se repite, reduciendo el uso de ancho de banda.
  • Puede ver sus páginas sin conexión en su navegador mientras las escribe, sin ningún servidor.
Cuestiones relacionadas