¿Cómo estructuro mi HTML para una buena reutilización y mantenimiento del código?

html5 code-reuse

Question

Tengo una experiencia limitada en la codificación de aplicaciones nativas utilizando lenguajes como C ++, C y Java, pero ahora estoy tratando de entrar en el desarrollo web. Aunque la mayoría es bastante simple y limpio, tengo algunos problemas para entender cómo puedo crear sitios web y aplicaciones web que hagan un buen trabajo al reutilizar el código existente cuando corresponda. Según tengo entendido, al usar elementos como JavaScript, CSS y PHP, simplemente puede importar scripts de otros archivos para usarlos en cualquier archivo html, lo cual es muy útil. Pero me está costando entender cómo se puede hacer esto con HTML, ¿es posible?

Por ejemplo , digamos que tengo un sitio web de una sola página con una ''barra de encabezado'' y un montón de contenido único a continuación (por ejemplo, el logotipo de stackoverflow, los botones y los menús en la parte superior de esta página). Pero ahora, quiero expandir mi sitio web y agregar 3 páginas nuevas que compartan un diseño similar y tengan exactamente la misma ''barra de encabezado'' en la parte superior. Una forma de lograr esto podría ser simplemente copiar lo que contiene esa parte del código y pegarlo en page2.html, page3.html y page4.html; el código único para cada página estaría separado y funcionaría bien. El problema que tengo con este enfoque es que hace que sea muy difícil alterar el contenido de la ''barra de encabezado'' sin pasar por varias páginas de HTML, y las probabilidades de crear inconsistencias extrañas en el diseño / contenido se vuelven altas. Supongo que "stackoverflow.com/questions/ask" y "stackoverflow.com/tags" no contienen código duplicado, copiar y pegar para los elementos en la parte superior de la página, pero no estoy seguro Cómo lograr esto debido a mi limitada experiencia HTML.

Entonces, ¿hay alguna forma de "incluir" o "importar" el código HTML por el simple hecho de reutilizar el código en varias páginas? ¿Esta funcionalidad está incorporada en HTML o debo profundizar en cosas como JavaScript y PHP para crear sitios web bien estructurados? He buscado la respuesta a esto, y algunas personas han sugerido iframes, pero luego casi de inmediato sugirieron su uso en el diseño web moderno. ¿Cuál podría ser un buen enfoque?

Answer 1

Hay muchas maneras de hacer esto. Coloque el código CSS y Java-Script en archivos centrales, a los que hace referencia en sus archivos HTML es un buen comienzo.

En el pasado usé PHP para incluir cosas comunes, como el encabezado, navegación, pie de página, etc.

Recientemente comencé a usar Jekyll ( http://jekyllrb.com/ ), básicamente creas las plantillas para las páginas, con encabezado, navegación y diseño en archivos centrales.

Las páginas solo contienen el contenido y Jekyll genera la página de inicio.

Andy

Answer 2

La posibilidad de incluir partes de código ya está disponible, pero carece de un soporte de navegador adecuado. Se llama html-templates . En el futuro, esto le permitirá crear sus propias plantillas html para evitar la duplicación de código. Pero por ahora ... no HTML nativo, solo otras tecnologías (basadas en PHP, basadas en Javascript, basadas en Ruby y en qué no).

Answer 3

Lo que normalmente hago para HTML es hacer un diseño de sitio base y como desea que se cargue la mayoría del contenido automáticamente. Primero crearía todos los divs que contengan el contenido, luego lo rellenaré con el contenido que desee, como su encabezado, agregaré un logotipo, un texto de bienvenida, una barra de navegación, etc. .html.

Ahora usaría JQuery, un complemento de javascript para cargar todos los datos HTML de header.html en el encabezado div. El código de JQuery para se vería así, lo siento, ha pasado un tiempo y no tengo acceso a las herramientas en este momento.

$(document).ready(function(){
   $(''#header'').load("header.html");
});

Para PHP, puede escribir un archivo de funciones y: include "functions.php"; PHP también soporta OOP y usted podría hacer clases y métodos reutilizables dentro de él.

Answer 4

Para reutilizar el código tendrías que usar PHP o un framework de JavaScript.

Lo recomendaría más tarde, específicamente http://angularjs.org/ que es increíble. Se trata de crear aplicaciones web, usando vistas (y otros componentes) que puede reutilizar su código.

Vale la pena echarle un vistazo y con tu experiencia no deberías tener ningún problema.

Aclamaciones.

Answer 5

Recomendaría ''google'' para ''Mejores prácticas HTML'' y probar algunos resultados como: http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/

Answer 6

Si usas Dreamweaver, entonces tiene un sistema de plantillas para HTML sin la necesidad de lenguajes específicos del lado del servidor.

De lo contrario, suena como (y para mantenerlo simple sin usar un CMS o un sistema de plantillas completo como Smarty), desea usar PHP para incluir bloques fijos en su código, como un encabezado y pie de página.

Por ejemplo, en la parte superior de cada archivo de su sitio, podría tener el siguiente código PHP para insertar el archivo header.php en esa posición:

<?php  include "header.php"; ?>

Espero que esto ayude como punto de partida :)