Hispanopedia Wiki
Articulo de referencia

Sistema de plantillas web

El proceso básico para un sistema de plantillas web del lado del servidor consiste en combinar el contenido (de una base de datos ) y las "especificaciones de presentación" (en ...

Hispanopedia WikiContenido en espanolLectura gratuita
El proceso básico para un sistema de plantillas web del lado del servidor consiste en combinar el contenido (de una base de datos ) y las "especificaciones de presentación" (en una plantilla web ) (a través del motor de plantillas ) para producir documentos web en masa.

En la publicación web, un sistema de plantillas permite a diseñadores y desarrolladores web trabajar con plantillas para generar automáticamente páginas web personalizadas , como los resultados de una búsqueda. Esto reutiliza elementos estáticos de la página web, a la vez que define elementos dinámicos basados ​​en parámetros de la solicitud web .

Las plantillas web admiten contenido estático, proporcionando una estructura y apariencia básicas. Los desarrolladores pueden implementar plantillas desde sistemas de gestión de contenido , marcos de aplicaciones web y editores HTML . [ 1 ]

Descripción general

Un sistema de plantillas web se compone de lo siguiente:

El motor de plantillas procesa y combina los recursos de plantilla y contenido para generar documentos web en masa, cada uno con un formato visual similar. Para los fines de este artículo, los documentos web incluyen diversos formatos de salida para su transmisión a través de la web mediante HTTP , HTTPS u otro protocolo de Internet . [ 3 ]

Motor de plantillas

Diagrama que ilustra todos los elementos básicos y el flujo de procesamiento de un motor de plantillas.

Un procesador de plantillas (también conocido como motor de plantillas o analizador de plantillas) es un software diseñado para combinar plantillas con datos (definidos por un modelo de datos ) para producir documentos o programas resultantes . [ 4 ] [ 5 ] [ 6 ] El lenguaje en el que se escriben las plantillas se conoce como lenguaje de plantillas o lenguaje de plantillas. Para los fines de este artículo, un documento resultante es cualquier tipo de salida formateada, incluidos documentos , páginas web o código fuente (en la generación de código fuente ), ya sea en su totalidad o en fragmentos. Un motor de plantillas normalmente se incluye como parte de un sistema de plantillas web o marco de aplicación , y también puede usarse como preprocesador o filtro .

Ejemplo

Dado que el modelo suele estar almacenado en una base de datos relacional, los componentes restantes de la arquitectura MVC son el control y la vista. En los sistemas más sencillos, estos dos componentes no están separados. Sin embargo, al aplicar el principio de separación de responsabilidades, se pueden desacoplar completamente las relaciones.

Por ejemplo, la plantilla de vista podría verse así:

<!DOCTYPE html> < html xmlns = "http://www.w3.org/1999/xhtml" > < head >< title > Sitios </ title ></ head > < body >< h1 data-xp = "title" > <!-- marcador de posición --> </ h1 ></ body > </ html >

A continuación, la plantilla de control carga la vista y luego utiliza el direccionamiento XPath para insertar componentes desde una base de datos, por ejemplo:

<?php $doc = new DOMDocument ; $doc -> preserveWhiteSpace = false ; $doc -> Load ( 'view.html' ); $titlenode = $doc -> createTextNode ( "Like this" ); $xpath = new DOMXPath ( $doc ); $xpath -> registerNamespace ( "h" , "http://www.w3.org/1999/xhtml" ); $query = "//h:*[@data-xp='title']/comment()" ; $entries = $xpath -> query ( $query ); foreach ( $entries as $entry ) { $entry -> parentNode -> replaceChild ( $titlenode , $entry ); } echo $doc -> saveXML (); ?>

Tipos de sistemas de plantillas

Un navegador web y un servidor web conforman una arquitectura cliente-servidor . [ 7 ] Los sitios también suelen utilizar una caché web para mejorar el rendimiento. En muchas implementaciones, los archivos de plantilla contienen variables o marcadores de posición que se reemplazan con datos proporcionados por la aplicación al generar la página. [ 8 ]

  • Lado del servidor: la sustitución en tiempo de ejecución se produce en el servidor web.
  • Sustitución en tiempo de ejecución en el navegador web, en el lado del cliente.
  • Lado del borde: la sustitución en tiempo de ejecución se produce en un proxy entre el servidor web y el navegador.
  • Servidor externo: las páginas web estáticas se generan sin conexión y se suben al servidor web; no hay sustitución en tiempo de ejecución.
  • Distribuido: la sustitución en tiempo de ejecución se produce en varios servidores.

Los lenguajes de plantilla pueden ser:

  • Integrado o basado en eventos.
  • Simple, iterable, programable o complejo.
  • Definida por un consorcio, de forma privada o de facto mediante una implementación abierta. La propiedad influye en la estabilidad y credibilidad de una especificación. Sin embargo, en la mayoría de las jurisdicciones, la especificación de un lenguaje no puede protegerse con derechos de autor, por lo que el control rara vez es absoluto.

El código fuente del motor de plantillas puede ser propietario o de código abierto .

Muchos sistemas de plantillas son un componente de una plataforma o marco de programación más amplio. Se les conoce como el "sistema de plantillas de la plataforma". Algunos sistemas de plantillas ofrecen la opción de sustituir un lenguaje o motor de plantillas diferente. [ 9 ]

Soporte de idiomas

Lenguajes de programación como Perl , Ruby , C y Java admiten el procesamiento de plantillas de forma nativa o mediante bibliotecas y módulos adicionales. JavaServer Pages (JSP), PHP y Active Server Pages (ASP con VBScript , JScript u otros lenguajes) son ejemplos de motores de plantillas web. Estas tecnologías se utilizan normalmente en sistemas de plantillas del lado del servidor, pero podrían adaptarse para su uso en un proxy del lado del cliente o para la generación de páginas estáticas.

Generadores de sitios estáticos

Los generadores de sitios estáticos son motores que utilizan archivos de texto plano como Markdown y AsciiDoc para generar una página web estática . Algunos ejemplos son Jekyll (Liquid, Ruby ), Hugo ( plantillas Go ) y Pelican ( Jinja2 , Python ).

Algunos creadores de sitios web alojados, como Wix , Weebly y Duda, ofrecen sistemas basados ​​en plantillas que permiten a los usuarios crear páginas web estáticas y dinámicas mediante interfaces gráficas de usuario en lugar de la programación tradicional. [ 10 ]

Editores HTML estáticos

Arquitectura del sistema de plantillas de servidor externo.

Los editores HTML suelen utilizar sistemas de plantillas web para generar únicamente páginas web estáticas . Estas pueden considerarse diseños web prefabricados , utilizados para la producción masiva de sitios web estandarizados para una rápida implementación. También suelen incluir temas en lugar de estilos CSS . En general, el lenguaje de plantillas se utiliza solo con el software del editor. [ 11 ]

FrontPage y Dreamweaver fueron en su momento los editores más populares con subsistemas de plantillas. Una plantilla web Flash utiliza Macromedia Flash para crear sitios visualmente interactivos.

Muchos sistemas de plantillas del lado del servidor ofrecen la opción de publicar las páginas de salida en el servidor, donde las páginas publicadas son estáticas . Esto es común en sistemas de gestión de contenido , como Vignette , pero no se considera generación fuera del servidor. En la mayoría de los casos, esta "opción de publicación" no interfiere con el sistema de plantillas y puede realizarse mediante software externo, como Wget .

Sistemas del lado del servidor

Sistema de plantillas del lado del servidor

La gente empezó a usar páginas dinámicas del lado del servidor generadas a partir de plantillas con software preexistente adaptado para esta tarea. Este software inicial eran los preprocesadores y lenguajes de macros , adaptados para su uso en la web, que se ejecutaban en CGI . Posteriormente, una tecnología sencilla pero relevante fue la ejecución directa realizada en módulos de extensión, iniciada con SSI .

Muchos sistemas de plantillas se utilizan normalmente como sistemas de plantillas del lado del servidor :

Técnicamente, la metodología de incrustar lenguajes de programación dentro de HTML (o XML, etc.), utilizada en muchos "lenguajes de script incluidos en el servidor", también son plantillas. Todos ellos son lenguajes complejos incrustados .

También existen preprocesadores que se utilizan como motores de plantillas del lado del servidor . Ejemplos:

Sistemas del lado del borde

En cuanto a los sistemas de plantillas e inclusión del lado del cliente, el término "lado del cliente" se refiere a los servidores web que se ubican entre el cliente (navegador) y el servidor de origen. A menudo se les denomina servidores "proxy inverso". Estos servidores suelen encargarse de reducir la carga y el tráfico en los servidores de origen mediante el almacenamiento en caché de contenido, como imágenes y fragmentos de página, y su entrega eficiente al navegador.

Basic Edge Side Includes (ESI) es un lenguaje similar a SSI. ESI se ha implementado para redes de distribución de contenido. El lenguaje de plantillas ESI también puede implementarse en navegadores web mediante JavaScript y Ajax, o a través de un complemento del navegador.

Sistemas del lado del cliente

Sistema de plantillas distribuido (descentralizado) del lado del cliente .

Muchos navegadores web pueden aplicar una hoja de estilo XSLT a datos XML que transforma los datos en un documento XHTML , proporcionando así funcionalidad de plantilla en el propio navegador. Otros sistemas implementan la funcionalidad de plantilla en el navegador utilizando JavaScript u otro lenguaje de scripting del lado del cliente , entre ellos:

Sistemas distribuidos

La forma más sencilla son las transclusiones (marcos HTML). En otros casos, se necesitan páginas web dinámicas .

Ejemplos:

Véase también

Referencias

  1. ↑ Yusuf, Lizawati Mi (5 de agosto de 2011). "Sistema de plantillas web para empresas (CWTS) para mejorar el desarrollo de los sitios web de las empresas de PYMES" . wseas.us . Consultado el 24 de marzo de 2026 .
  2. ↑ "Motor de plantillas" . Wiki de phpwact.org. Archivado del original el 4 de diciembre de 2012. Consultado el 7 de enero de 2013 .
  3. ↑ "SS Blog" . Publicaciones de blog sobre personas famosas . 09/09/2021 . Consultado el 24/03/2026 .
  4. ↑ Niemeyer, Patrick (2002). Aprendiendo Java . Sebastopol: O'Reilly. ISBN 0-596-00285-8.
  5. ↑ Manolescu, Dragos (2006). Pattern Languages ​​of Program Design 5. Reading: Addison-Wesley Professional. ISBN 0-321-32194-4.
  6. ↑ Fowler, Martin (2003). Patrones de arquitectura de aplicaciones empresariales . Boston: Addison-Wesley. ISBN 0-321-12742-0.
  7. ↑ "Arquitectura e interfaz cliente-servidor" (PDF) . Universidad Abierta Dr. Babasaheb Ambedkar . Consultado el 24 de marzo de 2026 .
  8. ↑ "Reemplazo simple de variable de plantilla, pero con un giro" . Stack Overflow . 1 de julio de 2010. Consultado el 24 de marzo de 2026 .
  9. ↑ Marketing 125. Capítulo 1: Guía general de sistemas de plantillas web . Universidad de California, Berkeley. 2023.
  10. ↑ Guay, Matthew (2018-03-20). "Wix es la mejor manera para que la mayoría de la gente cree un sitio web" . Wirecutter: Reseñas para el mundo real . Recuperado el 24 de marzo de 2026 .
  11. ↑ MacDonald, Matthew (2015). Creación de un sitio web: El manual que faltaba . Capítulo 8 > Publicar el mismo contenido en varias páginas > Plantillas web > Cuadro de notas: O'Reilly Media, Inc. ISBN 9781491936177Consultado el 19 de enero de 2016 .{{cite book}}: CS1 mantenimiento: ubicación ( enlace )
  12. ↑ "{{bigote}}" . Consultado el 15 de octubre de 2013 .
  13. ↑ jodyburns. "Sistema de plantillas Topsite" . Consultado el 15 de octubre de 2013 .
  • Temas gratuitos para sitios web de comercio electrónico. Blogs y portal de información sobre temas para sitios web de MG Technologies.
  • Comparación de bibliotecas de plantillas JavaScript de 2009
  • Imponer una estricta separación entre modelo y vista en los motores de plantillas
  • Un enfoque de doble modelo para lograr una separación efectiva entre modelo y vista en aplicaciones web basadas en plantillas.
  • Comparación de motores de plantillas PHP con gráficos.
  • Comparaciones/pruebas de rendimiento de algunos motores de plantillas de Python y algunas reflexiones generales sobre los motores de plantillas.
  • web-mode.el es una herramienta principal de Emacs para editar plantillas web.