elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Como proteger una cartera - billetera de Bitcoin


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ¿Cómo debería crear una plantilla web?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ¿Cómo debería crear una plantilla web?  (Leído 2,592 veces)
mono-mbn

Desconectado Desconectado

Mensajes: 1


Ver Perfil
¿Cómo debería crear una plantilla web?
« en: 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!


En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: ¿Cómo debería crear una plantilla web?
« Respuesta #1 en: 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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Generador Plantillas</title>
  6. </head>
  7. <body>
  8. <script>
  9. let web = {
  10.  title: "Blog",
  11.  header: "<h1>Hello</h1>"
  12. };
  13.  
  14. let plantilla = `<!DOCTYPE html>
  15. <html>
  16. <head>
  17. <title>${web.title}</title>
  18. </head>
  19. <body>
  20. ${web.header ? web.header : ""}
  21. </body>
  22. </html>`;
  23.  
  24. </script>
  25. </body>
  26. </html>


Igual fastframework te interesa para esta tarea:
index.html
Código
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  6. <title>Carnicería Paco - Madrid</title>
  7. </head>
  8. <body>
  9.  
  10. <cabecera-web4></cabecera-web4>
  11. <navegacion-web2></navegacion-web2>
  12. <ultimas-noticias></ultimas-noticias>
  13. <twetts-paco></twetts-paco>
  14. <footer-web8>route="./footers/"</footer-web8>
  15.  
  16. <script type="module">
  17. import ff from "https://fastframework.ga/ff.js";
  18. ff.mustache.titulo = "Carnicería Paco";
  19. ff.getCustomTags();
  20. </script>
  21. </body>
  22. </html>



cabeceraweb4.ff
Código
  1. <h1>{{titulo}}</h1>
  2.  
  3. <style>
  4. cabecera-web4 h1 {
  5.  background-color: blue;
  6.  color: white;
  7. }
  8. </style>
  9.  
  10. <script>
  11. ff.getMustacheSintax();
  12. </script>



navegacionweb2.ff
Código
  1. <nav><a href="https://example.com/">Ejemplo</a></nav>



ultimasnoticias.ff
Código
  1. <h2>Ultimas Noticias</h2>
  2. <iframe src="https://stringmanolo.ga/projects/diariosm/diariosm.html#address"></iframe>



footers/footerweb8.ff
Código
  1. <div>&copy; 2020</div>
  2. <style>
  3. footer-web8 > div {
  4.  background-color: #c55;
  5.  color: #333;
  6.  text-align: right;
  7. }
  8. </style>



twettspaco.ff
Código
  1. <div>Últimos twetts de paco ...
  2. Hola, bla bla bla.
  3. </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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  6. <title>Carnicería Paco - Madrid</title>
  7. </head>
  8. <body>
  9.  
  10. <cabeceraweb4></cabeceraweb4>
  11. <navegacionweb2></navegacionweb2>
  12. <ultimasnoticias></ultimasnoticias>
  13. <twettspaco></twettspaco>
  14. <footerweb8></footerweb8>
  15.  
  16. <script>
  17. function GET(url, callback) {
  18.      var peticion = new XMLHttpRequest();
  19.      peticion.open("GET", url , true);
  20.      peticion.send();
  21.      peticion.onreadystatechange = function() {
  22.        if (peticion.readyState == 4) {
  23.          if (peticion.status == 0 || peticion.status == 200) {
  24.            callback(peticion.responseText);
  25.          }
  26.        }
  27.      }
  28.    }
  29.  
  30.    GET("https://raw.githubusercontent.com/StringManolo/ff/master/json/ff.json", function(resp, ff, ff2, fBody) {
  31.      ff2  = JSON.parse(resp);
  32.      fBody = ff2.match(/function[^{]+\{([\s\S]*)\}$/)[1];
  33.      ff = new Function([], fBody);
  34.      ff = ff();
  35.  
  36.  
  37.      ff.mustache.titulo = "Carnicería Paco";
  38.      ff.customTags = {
  39.        cabeceraweb4: `<h1>{{titulo}}</h1>
  40.  
  41. <style>
  42. cabeceraweb4 h1 {
  43.  background-color: blue;
  44.  color: white;
  45. }
  46. </style>
  47.  
  48. <script>
  49. ff.getMustacheSintax();
  50. <\/script>`,
  51.  
  52.        navegacionweb2: `<nav><a href="https://example.com/">Ejemplo</a></nav>`,
  53.  
  54.        ultimasnoticias: `<h2>Ultimas Noticias</h2>
  55. <iframe src="https://stringmanolo.ga/projects/diariosm/diariosm.html#address"></iframe>`,
  56.  
  57.        twettspaco: `<div>Últimos twetts de paco ...
  58. Hola, bla bla bla.
  59. </div>`,
  60.  
  61.        footerweb8: `<div>&copy; 2020</div>
  62. <style>
  63. footerweb8 > div {
  64.  background-color: #c55;
  65.  color: #333;
  66.  text-align: right;
  67. }
  68. </style>`
  69.  
  70.        };
  71.      ff.getUnknownTags();
  72.      ff.getMustacheSintax();
  73.    });
  74. </script>
  75. </body>
  76. </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.


« Última modificación: 1 Diciembre 2020, 17:35 pm por @XSStringManolo » En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Peter

Desconectado Desconectado

Mensajes: 1


Ver Perfil
Re: ¿Cómo debería crear una plantilla web?
« Respuesta #2 en: 8 Diciembre 2020, 11:41 am »

Hola, enfrenté el mismo problema
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como editar una plantilla web flash? textos y las imagenes
Desarrollo Web
Pheztox 1 3,708 Último mensaje 12 Julio 2010, 14:05 pm
por MinusFour
Como puedo modificar una plantilla html ????
Desarrollo Web
limalimon1 2 3,622 Último mensaje 23 Abril 2012, 15:38 pm
por danicasasm
Marcos y menús (en html, php y css) como plantilla
Desarrollo Web
lluk 1 2,991 Último mensaje 15 Abril 2013, 22:14 pm
por karmany
SSD No rinde como debería
Hardware
Kurolox 6 2,733 Último mensaje 23 Enero 2015, 15:25 pm
por Aprendiz-Oscuro
Como usar un diseño como plantilla
Desarrollo Web
kur79 1 2,272 Último mensaje 27 Marzo 2017, 01:56 am
por #!drvy
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines