Organizar un HTML en varios como se hace con LESS en CSS
3 seguidores
Hola
Para un proyecto muy grande me gustaría poder crear una estructura de HTML de este estilo:
- index.html
- /include/header.html
- /include/footer.html
- /include/content.html
Es decir me gustaría que el index.html pudiese llamar a los diferentes trozos que componen esa página.
Lo que necesito es un HTML final y compilado que contenga el resultado final. No trabajo con tecnología servidor, que se que sería super fácil hacer esto.
¿Alguna herramienta que pueda ayudarme a conseguir esto?
Muchas gracias :)))
Usuario desconocido
Puedes hacerlo por javascript con ajax aunque lo mas facil quiza seria un server local y con includes de php, que son muy faciles de hacer, te lo vas componiendo sin duplicar codigo metiendo donde haga falta:
<?php include 'cabecera.php'; ?>
Cuando necesiteis enviar la maqueta un guardar como (o incluso les pasas la estructura que hayas hecho en php) y a correr, con eso deberian tener suficiente.
Saioa
Muchas gracias a los dos.
Realmente el resultado que necesito es un html estático porque es lo que se pasa a los programadores. Ese html no va a subirse a ningún lado y es para trabajo interno en la empresa.
Los diseñadores/maquetadores creamos el resultado final en formato HTML y luego los programadores con esa base "acabada" la usan de referencia para crear la página dinamica (con ASP, creo).
El problema es que es un portal enorme con montones de páginas y en el departamento de diseño/maquetación empieza a haber un caos de ficheros y nos cuesta un montón mantener menús, pies y elementos comunes iguales en todas las páginas.
Para css ya utilizamos LESS (que es como SCSS) y va super bien para organizar todo el código, pero para la parte de HTML todavía no tenemos una alternativa para poder modularizarlo y organizarlo. Y sobre todo es importante poder tener un html con todo el código incrustado para poder enviarlo por email a los programadores (no se si es la mejor manera de trabajar, pero aquí lo hacen así :P).
smalonso Mod
Lo de fragmentar htmls y unirlos lo puedes conseguir con un generador de webs estáticas tipo Hugo o Middleman. Y si que es totalmente recomendable si la naturaleza del proyecto lo requiere, está asociado al concepto de Serverless. Evidentemente con ellos puedes usar SCSS y también tasks runners u otras tecnologías.
De hecho, poniendo un ejemplo práctico, los de Smashing Magazine han pasado todo su blog a estático con Hugo y es una web bastante grande. Como son estáticos ahorrarás costes de servidor y si se usa un CDN y caché irá mucho más rápido que algo que tenga que hacer consultas a una base de datos. Si investigas un poco sobre el tema encontrarás muchos ejemplos que están hechos de este modo.
Si usas Wordpress tienes un plugin que te genera estáticos a partir de las páginas creadas, es menos limpio que lo anterior pero te puede servir. Simplemente te instalas WP en local y con el contenido creado generas los estáticos que se exportan en un zip u otro formato para que puedas subir a un servidor.
loren_design
Te recomendaría que partieras de un framework de desarrollo front-end. Por ejemplo Bootstrap.
Entiendo que tienes alguna referencia, y habrás visto que sitios dinámicos, desarrollados en .PHP, donde se trabaja con includes. De manera similar a como se organiza WordPress, por ejemplo. Hace mil años, troceabamos el contenido en Iframes.
Si vas a desarrollar un Web estático, no es nada recomendable que fragmentes los componentes de una página.
Te vas a meter en un lio a la hora de personalizar estados en cada página, definición de etiquetados para SEO, estados de navegación, o cargas específicas. Eso implicaría tener que programar e incluir variables. No sé si deseas ese nivel de complicación. Si te refieres al empleo de variables LESS para CSS... sin entrar en LESS.JS o NODE.JS, (incluso existe un LESSPHP)... no lo termino de ver.
Si necesitas todas las referencias al respecto las puedes encontrar en: http://lesscss.org/
Si no te quieres complicar, busca o compra un sistema de plantillas Bootstrap. Si tienes cierto nivel puedes personalizarlo bastante. Por lo menos tendrás asegurada una funcionalidad responsiva.
Y si requieres de ciertas funcionalidades, puedes emplear WordPress.
Si es algo muy grande y complejo, es más que recomendable colaborar con un programador.
No obstante, sin un briefing técnico...tampoco te puedo decir mucho más.
Saludos!