¿Cómo debería crear una plantilla web?

mono-mbn · 1 Diciembre 2020, 14:53 PM

Hola, como el título indica, estoy buscando una orientación sobre cómo debería crear una plantilla web....

He aprendido HTML5 y CSS3 con lo cuál hice algunas páginas webs estáticas pero mi idea ahora es "automatizar" la creación de webs con una plantilla y no sé bien como debería hacerla.

Mi intención es tener unos estilos predefinidos y poder crear contenidos a partir de variables, es decir, poder poner el <title><meta:description><h1><p> etc y que lo incruste en un html5 ya diseñado. No sé si me he logrado explicar pero aquí lo dejo, muchas gracias por su tiempo y espacio!

@XSStringManolo · 1 Diciembre 2020, 16:58 PM

Tienes múltiples opciones. Prácticamente cualquier lenguaje de programación te permite hacerlo. Dado que javascript es imprescindible para web, te recomiendo aprender a utilizarlo. No es muy complicado, solo requiere de tiempo y paciencia.

Ejemplo Muy Simple:

Código (javascript) [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Generador Plantillas</title>
</head>
<body>
<script>
let web = {
  title: "Blog",
  header: "<h1>Hello</h1>"
};

let plantilla = `<!DOCTYPE html>
<html>
<head>
<title>${web.title}</title>
</head>
<body>
${web.header ? web.header : ""}
</body>
</html>`;

</script>
</body>
</html>

Igual fastframework te interesa para esta tarea:
index.html

Código (javascript) [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>Carnicería Paco - Madrid</title>
</head>
<body>

<cabecera-web4></cabecera-web4>
<navegacion-web2></navegacion-web2>
<ultimas-noticias></ultimas-noticias>
<twetts-paco></twetts-paco>
<footer-web8>route="./footers/"</footer-web8>

<script type="module">
import ff from "https://fastframework.ga/ff.js";
ff.mustache.titulo = "Carnicería Paco";
ff.getCustomTags();
</script>
</body>
</html>

cabeceraweb4.ff

Código (javascript) [Seleccionar]

<h1>{{titulo}}</h1>

<style>
cabecera-web4 h1 {
  background-color: blue;
  color: white;
}
</style>

<script>
ff.getMustacheSintax();
</script>

navegacionweb2.ff

Código (javascript) [Seleccionar]

<nav><a href="https://example.com/">Ejemplo</a></nav>

ultimasnoticias.ff

Código (javascript) [Seleccionar]

<h2>Ultimas Noticias</h2>
<iframe src="https://stringmanolo.ga/projects/diariosm/diariosm.html#address"></iframe>

footers/footerweb8.ff

Código (javascript) [Seleccionar]

<div>&copy; 2020</div>
<style>
footer-web8 > div {
  background-color: #c55;
  color: #333;
  text-align: right;
}
</style>

twettspaco.ff

Código (javascript) [Seleccionar]

<div>Últimos twetts de paco ...
Hola, bla bla bla.
</div>

Es bastante simple, pones la etiqueta separada por un guion correspondiente al nombre de un archivo con tu código.

Tienes aquí la documentación y más ejemplos.
https://github.com/StringManolo/ff/blob/master/README.md

De esta forma te puede quedar bastante simple y organizado, que para el tema de plantillas me parece imprescindible.
En lugar de usar el link "https://fastframework.ga/ff.js", puedes descargárte el archivo ff.js de https://github.com/stringmanolo/ff o directamente copiar el código del enlace, guardarlo como ff.js y cambiar la primera linea del script de import ff from "https://fastframework.ga/ff.js" por:
import ff from "./ff.js";
Así va más rápido y sin internet por si quieres usarlo en red local o algo.

Para ver la web la puedes subir a un hosting gratuito o usar uno local. Yo suelo usar el comando python -m http.server 8000 en la carpeta de la web. Así lo puedo ver en el navegador en la dirección http://127.0.0.1:8000

Si solo te funcionan webs de un solo archivo o es algo imprescindible (no debería ser así, pero puede darse el caso en plataformas como blogger) también puedes hacer la misma web en un solo archivo.

Código (javascript) [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>Carnicería Paco - Madrid</title>
</head>
<body>

<cabeceraweb4></cabeceraweb4>
<navegacionweb2></navegacionweb2>
<ultimasnoticias></ultimasnoticias>
<twettspaco></twettspaco>
<footerweb8></footerweb8>

<script>
function GET(url, callback) {
      var peticion = new XMLHttpRequest();
      peticion.open("GET", url , true);
      peticion.send();
      peticion.onreadystatechange = function() {
        if (peticion.readyState == 4) {
          if (peticion.status == 0 || peticion.status == 200) {
            callback(peticion.responseText);
          }
        }
      }
    }

    GET("https://raw.githubusercontent.com/StringManolo/ff/master/json/ff.json", function(resp, ff, ff2, fBody) {
      ff2  = JSON.parse(resp);
      fBody = ff2.match(/function[^{]+\{([\s\S]*)\}$/)[1];
      ff = new Function([], fBody);
      ff = ff();


      ff.mustache.titulo = "Carnicería Paco";
      ff.customTags = {
        cabeceraweb4: `<h1>{{titulo}}</h1>

<style>
cabeceraweb4 h1 {
  background-color: blue;
  color: white;
}
</style>

<script>
ff.getMustacheSintax();
<\/script>`,

        navegacionweb2: `<nav><a href="https://example.com/">Ejemplo</a></nav>`,

        ultimasnoticias: `<h2>Ultimas Noticias</h2>
<iframe src="https://stringmanolo.ga/projects/diariosm/diariosm.html#address"></iframe>`,

        twettspaco: `<div>Últimos twetts de paco ...
Hola, bla bla bla.
</div>`,

        footerweb8: `<div>&copy; 2020</div>
<style>
footerweb8 > div {
  background-color: #c55;
  color: #333;
  text-align: right;
}
</style>`

        };
      ff.getUnknownTags();
      ff.getMustacheSintax();
    });
</script>
</body>
</html>

https://stringmanolo.blogspot.com/2020/12/fastframework-example.html

Supongo que ya sabes de la existencia de lenguajes como PHP y node.js(javascript) para generar webs dinámicamente. Si no, checa algunos videos por youtube y ya te haces una idea.

Peter · 8 Diciembre 2020, 11:41 AM

Hola, enfrenté el mismo problema

Test Foro de elhacker.net SMF 2.1

¿Cómo debería crear una plantilla web?

mono-mbn

@XSStringManolo

Peter