Sistema de plantillas web

Un sistema de plantillas web en la publicación web permite a los diseñadores y desarrolladores web trabajar con plantillas web 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 mientras define elementos dinámicos basados en parámetros de solicitud web . Las plantillas web admiten contenido estático, proporcionando estructura y apariencia básicas. Los desarrolladores pueden implementar plantillas desde sistemas de administración de contenido , marcos de aplicaciones web y editores HTML .

Descripción general

Un sistema de plantillas web se compone de lo siguiente:

Un motor de plantillas : el elemento de procesamiento principal del sistema; ^[1]
Recurso de contenido : cualquiera de los diversos tipos de flujos de datos de entrada , como por ejemplo de una base de datos relacional , archivos XML , directorio LDAP y otros tipos de datos locales o en red ;
Recurso de plantilla : la plantilla web se especifica de acuerdo con un lenguaje de plantilla ;

El motor de plantillas procesa y combina los recursos de plantilla y contenido para producir documentos web en masa. A los efectos de este artículo, los documentos web incluyen cualquiera de los diversos formatos de salida para su transmisión a través de la web mediante HTTP , HTTPS u otro protocolo de Internet .

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 . ^[2]^[3]^[4] 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 generación de código fuente ), ya sea en su totalidad o en fragmentos. Un motor de plantillas se incluye normalmente como parte de un sistema de plantillas web o un marco de aplicación , y también se puede utilizar como preprocesador o filtro .

Ejemplo

Dado que el modelo se encuentra generalmente en una base de datos relacional, los componentes restantes de la arquitectura MVC son el control y la vista. En los sistemas más simples, estos dos no están separados. Sin embargo, al adaptar el principio de separación de intereses, se pueden desacoplar por completo 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 >

Luego, la plantilla de control carga la vista y luego utiliza el direccionamiento XPath ^{[ ¿investigación original? ]} para insertar componentes desde una base de datos, por ejemplo:

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

Tipos de sistemas de plantillas

Un navegador web y un servidor web son una arquitectura cliente-servidor . Los sitios web también suelen utilizar un caché web para mejorar el rendimiento. Se clasifican cinco tipos de sistemas de plantillas según el momento en que reemplazan los marcadores de posición con contenido real y ensamblan las páginas.

Del lado del servidor: la sustitución en tiempo de ejecución se realiza en el servidor web
Del lado del cliente: la sustitución en tiempo de ejecución se realiza en el navegador web
Lado del borde: la sustitución en tiempo de ejecución ocurre 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 cargan en el servidor web; no hay sustitución en tiempo de ejecución
Distribuida: la sustitución en tiempo de ejecución ocurre en varios servidores

Los idiomas de plantilla pueden ser:

Integrado o controlado por eventos.
Simple, iterable, programable o complejo.
Definida por un consorcio, definida de forma privada o definida de facto por 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 del lenguaje no puede estar sujeta a 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 grande. Se los conoce como el "sistema de plantillas de la plataforma". Algunos sistemas de plantillas tienen la opción de sustituir un lenguaje o motor de plantillas diferente. ^{[ cita requerida ]}

Soporte de idiomas

Los lenguajes de programación como Perl , Ruby , C y Java admiten el procesamiento de plantillas de forma nativa o a través de 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 se podrían adaptar para su uso en un proxy "del lado del servidor" 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 entrada de texto planos como Markdown y ASCII para generar una página web estática . Algunos ejemplos de esto incluyen Jekyll (Liquid, Ruby ), Hugo ( plantillas Go ) y Pelican ( Jinja2 , Python ).

Editores HTML estáticos

Arquitectura del sistema de plantilla de servidor externo.

Los editores HTML suelen utilizar sistemas de plantillas web para producir únicamente páginas web estáticas . Estas pueden considerarse como un diseño web listo para usar , que se utiliza para producir en masa sitios web "con molde" para una implementación rápida. También suelen incluir temas en lugar de estilos CSS . En general, el lenguaje de plantillas se utiliza únicamente con el software del editor. ^[5]

En su momento, FrontPage y Dreamweaver fueron 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 tienen una opción para publicar páginas de salida en el servidor, donde las páginas publicadas son estáticas . Esto es común en los sistemas de administración de contenido , como Vignette , pero no se considera una generación externa al 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 utilizar páginas dinámicas del lado del servidor generadas a partir de plantillas con software preexistente adaptado para esta tarea. Este software primigenio eran los preprocesadores y lenguajes de macros , adaptados para el uso web, que se ejecutaban sobre CGI . A continuación, una tecnología sencilla pero relevante fue la ejecución directa realizada sobre 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 incrustación de 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 de borde lateral

Sistemas de plantillas e inclusión de Edge-Side. El término "Edge-Side" hace referencia a los servidores web que residen en el espacio entre el cliente (navegador) y el servidor de origen. A menudo se los denomina servidores "proxy inverso". Estos servidores generalmente tienen la tarea de reducir la carga y el tráfico en los servidores de origen almacenando en caché contenido como imágenes y fragmentos de páginas y entregándolo al navegador de manera eficiente.

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 plantilla ESI también se puede implementar en navegadores web mediante JavaScript y Ajax, o mediante un "complemento" del navegador.

Sistemas del lado del cliente

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

Muchos navegadores web pueden aplicar una hoja de estilo XSLT a los datos XML que transforman los datos en un documento XHTML, lo que proporciona una funcionalidad de plantilla en el propio navegador.
Otros sistemas implementan la funcionalidad de plantilla en el navegador mediante JavaScript u otro lenguaje de programación del lado del cliente , entre los que se incluyen:

Bigote
Ardilla
Bigote daliniano

Sistemas distribuidos

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

Ejemplos:

Véase también

Referencias

^ "Motor de plantillas". Wiki de phpwact.org. Archivado desde el original el 4 de diciembre de 2012. Consultado el 7 de enero de 2013 .
^ Niemeyer, Patrick (2002). Aprendiendo Java . Sebastopol: O'Reilly. ISBN 0-596-00285-8.
^ Manolescu, Dragos (2006). Lenguajes de patrones de diseño de programas 5. Lectura: Addison-Wesley Professional. ISBN 0-321-32194-4.
^ Fowler, Martin (2003). Patrones de arquitectura de aplicaciones empresariales . Boston: Addison-Wesley. ISBN 0-321-12742-0.
^ MacDonald, Matthew (2015). Cómo crear un sitio web: el manual que faltaba. Capítulo 8 > Cómo colocar el mismo contenido en varias páginas > Plantillas web > Cuadro de notas: O'Reilly Media, Inc. ISBN 9781491936177. Recuperado el 19 de enero de 2016 .{{cite book}}: CS1 maint: location (link)
^ "{{mustache}}" . Consultado el 15 de octubre de 2013 .
^ jodyburns. "Sistema de plantillas Topsite" . Consultado el 15 de octubre de 2013 .

9. Temas gratuitos para sitios web de comercio electrónico MG Technologies Blogs y portal de información sobre temas para sitios web.

Enlaces externos

Comparación de bibliotecas de plantillas de JavaScript de 2009
Aplicación de una estricta separación entre modelos y vistas en los motores de plantillas
Un enfoque de doble modelo para lograr una separación eficaz entre modelos y vistas en aplicaciones web basadas en plantillas
Comparación de un motor de plantillas PHP con gráficos
Comparaciones/puntos de referencia de algunos motores de plantillas de Python y algunas reflexiones genéricas sobre los motores de plantillas
web-mode.el es un programa principal de emacs para editar plantillas web

[1] "Motor de plantillas". Wiki de phpwact.org. Archivado desde el original el 4 de diciembre de 2012. Consultado el 7 de enero de 2013 .

[Template_processor_Niemeyer000-2] Niemeyer, Patrick (2002). Aprendiendo Java . Sebastopol: O'Reilly. ISBN 0-596-00285-8.

[Template_processor_Manolescu000-3] Manolescu, Dragos (2006). Lenguajes de patrones de diseño de programas 5. Lectura: Addison-Wesley Professional. ISBN 0-321-32194-4.

[Template_processor_Fowler000-4] Fowler, Martin (2003). Patrones de arquitectura de aplicaciones empresariales . Boston: Addison-Wesley. ISBN 0-321-12742-0.

[5] MacDonald, Matthew (2015). Cómo crear un sitio web: el manual que faltaba. Capítulo 8 > Cómo colocar el mismo contenido en varias páginas > Plantillas web > Cuadro de notas: O'Reilly Media, Inc. ISBN 9781491936177. Recuperado el 19 de enero de 2016 .{{cite book}}: CS1 maint: location (link)

[6] "{{mustache}}" . Consultado el 15 de octubre de 2013 .

[7] yburns. "Sistema de plantillas Topsite" . Consultado el 15 de octubre de 2013 .