Sistema de plantillas web

De Wikipedia, la enciclopedia libre
El proceso básico para un sistema de plantillas web del lado del servidor: contenido (de una base de datos), y "especificaciones de presentación" (en una plantilla web), son combinados (a través del motor de plantilla) para producir en masa documentos web.

Un sistema de plantillas web permite a diseñadores web y desarrolladores pasar de trabajar con plantillas web a automáticamente generar páginas web a medida. Así se reúsan elementos estáticos de páginas web mientras se definen los elementos dinámicos basados en parámetros de peticiones web. Las plantillas web mantienen contenido estático, proporcionando un aspecto y una estructura básicos. Los desarrolladores pueden implementar plantillas de sistemas de gestión de contenido, frameworks para aplicaciones web, y editores de HTML.

Resumen[editar]

Un sistema de plantillas web está compuesto por lo siguiente:

  • Un motor de plantilla: el elemento de procesamiento primario del sistema;[1]​
  • Recursos de contenido: cualquier clase de flujos de datos de entrada, como una base de datos relacional, archivos XML, directorio LDAP, y otras clases de datos locales o en red;
  • Recursos de plantilla: plantillas web especificadas según un lenguaje de plantillas;

La plantilla y los recursos de contenido son procesados y combinados por el motor de plantilla para producir en serie documentos web. Para propósitos de este artículo, los documentos web incluyen cualquier formato de producción para transmisión web con HTTP, HTTPS, u otro protocolo de Internet.

Motivaciones y usos típicos[editar]

Aplicaciones[editar]

Los desarrolladores web pueden utilizar plantillas de cualquier individuo u organización para instalar un sitio web. Una vez adquieren o descargan una plantilla, reemplazan toda información genérica en la plantilla de web con su información personal, organizativa, o de producto. Las plantillas son generalmente utilizadas para:

  • Mostrar información personal o actividades diarias como en un blog
  • Vender productos en línea
  • Mostrar información sobre una empresa u organización
  • Mostrar genealogías familiares
  • Mostrar una galería de fotos
  • Colocar archivos de música como MP3 en línea para reproducirlos a través de un navegador web
  • Colocar videos en línea para que sean accedidos públicamente
  • Configurar un área de inicio de sesión privada en línea

Producción en serie[editar]

En ocasiones, algunas agencias y organizaciones usan sistemas de plantillas web para producir en cadena contenido cuándo métodos de producción más lentos son menos factibles.

Para una visión general introductoria, tomaremos un sitio web de noticias como ejemplo. Consideraremos un "sitio web estático", donde todas las páginas web son estáticas, construidas por un diseñador web. Sería un trabajo muy repetitivo cambiar páginas individuales tan a menudo como las noticias cambian. Una estrategia típica para automatizar el "trabajo repetitivo" del diseñador web es utilizar plantillas como a continuación:

  1. Escoger un sistema de plantillas web para mantener el sitio web;
  2. Agrupar elementos de noticias con necesidades de presentación diferente;
  3. Especificar los "estándares de presentación" a través de plantillas web, para cada grupo de noticias;
  4. Especificar un recurso de contenido para generar o actualizar el contenido de cada elemento de noticias.

Estandarización de estilo[editar]

Separación de intereses[editar]

Un objetivo común entre desarrolladores web experimentados es desarrollar y desplegar aplicaciones que son flexibles y fácilmente mantenibles. Una consideración importante para lograr este objetivo es la separación de la lógica de negocio de la lógica de la presentación.[2]​ Los desarrolladores usan sistemas de plantillas web (con grados de éxito variables) para mantener esta separación.[2]​

Para el diseñador web, cuando cada página web proviene de una plantilla web, se puede pensar en una página web modular estructurada con componentes que pueden ser modificados independientemente de los otros. Estos componentes pueden incluir un encabezamiento, pie de página, barra de navegación global (GNB), barra de navegación local y contenido como artículos, imágenes, vídeos, etc.

Para programadores, los lenguajes de plantilla ofrecen una lógica más restringida, solo para adaptaciones de presentación y decisiones, no para algoritmos complejos (modelo de negocios).

Para otros miembros del "equipo web", un sistema de plantillas libera webmasters para que estos se centren en mantenimiento técnico, proveedores de contenido para que se centren en contenido, y da a todos de ellos más fiabilidad.

Además, tiene las siguientes ventajas:

  • Facilidad de cambio de diseño: variaciones de presentación en plantillas son "invariantes de contenido", esto significa que un diseñador web puede actualizar la presentación sin mayores preocupaciones de infraestructura.
  • Facilidad de localización de interfaz: los menús y otros estándares de presentación son fáciles de hacer de una manera uniforme, para los usuarios que exploran la web. Utilizando breadcrumbs se hace cualquier sitio web más amigable con el usuario y más flexible.[3]​
  • Posibilidad para trabajar por separado, en diseño y en código por personas diferentes al mismo tiempo. Puede desarrollarse mientras todo el código en las plantillas se diseña de manera clara y limpia y cada bloque o sección del sitio web se escribe con un sistema de comentarios individual.
  • El diseño web Responsive es en la actualidad un factor obligatorio para cualquier sitio web. Todo tiene que ser desarrollado sin cambios en el diseño adaptable a dispositivos móviles.
  • Facilidad de documentación: una documentación manejable ahorra más tiempo para comprender la plantilla entera y también acelera el proceso de modificación. Los diseñadores web profesionales dan una gran importancia a la documentación.

Una dificultad para evaluar la separación de intereses es la carencia de formalismos bien definidos para medir cuándo y en qué medida se cumplen.[2]​ Hay, aun así, bastantes heurísticas estándar que se han tomado prestadas de la ingeniería de software. Se incluye la 'herencia' (basada en los principios de la programación orientada a objetos); y programación 'basada en plantillas y generativa programación', (compatible con los principios de la separación MVC).[4]​ La diferencia entre las distintas directrices está sujeta a debate, y algunos aspectos de las dichas directrices comparten un alto grado de semejanza.[5]​

Presentación flexible[editar]

Una razón fundamental tras la "separación eficaz" es la necesidad de flexibilidad máxima en el código y los recursos dedicados a la lógica de presentación.[4]​ Las demandas de cliente, el cambio en las preferencias del cliente y el deseo de presentar una "cara fresca" para el contenido preexistente resulta a menudo en la necesidad de una modificación extrema de la apariencia del contenido web mientras se interrumpe la infraestructura subyacente tan poco como sea posible.

La distinción entre "presentación" (front-end) y "lógica de negocios" (infraestructura) es importante porque:

  • El lenguaje de presentación de código de fuente puede diferir de otras ventajas de código.
  • Los desarrolladores a menudo crean componentes de aplicación en ubicaciones y momentos separados.
  • Entre las habilidades de los trabajadores no siempre se incluye una versatilidad en ambas capas: presentación y lógica de negocios.
  • El código es más fácil de leer y mantener cuándo el sistema mantiene varios tipos de componentes separados y débilmente acoplados.[4]​

Reusabilidad[editar]

No todos los potenciales usuarios de plantillas web pueden contratar desarrolladores para diseñar un sistema. Además, algunos pueden desear utilizar recursos web pero, tienen pocas habilidades técnicas. Debido a esto, un grupo de desarrolladores y vendedores ha liberado plantillas web específicamente para personas sin formación técnica. La reusabilidad de las plantillas web es también importante para los desarrolladores altamente especializados y técnicamente experimentados pero esta es especialmente crítica para quienes confían en la simplicidad y las soluciones web ya confeccionadas.

Esas plantillas web "ya confeccionadas" son a veces gratis y creadas fácilmente por personas a nivel amateur. Aun así, las plantillas web especializadas se venden on-line. A pesar de que hay numerosos sitios comerciales que ofrecen plantillas web privativas, las hay también gratuitas y de software libre.

Ejemplo[editar]

Con el modelo típicamente usado en una base de datos relacional, los componentes restantes de la arquitectura MVC son el controlador y la vista. En el sistema más sencillo estos dos componentes no están separados. Aun así, adaptando el principio de separación de intereses se pueden desacoplar completamente las relaciones.

Por ejemplo, la plantilla de la vista puede ser similar a esta:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head><title>Sites</title></head>
   <body><h1 data-xp="title"><!-- placeholder --></h1></body>
</html>

Entonces, la plantilla del controlador carga la vista y, a continuación, utiliza redireccionamiento XPath para insertar componentes de 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();
?>

Clases de sistemas de plantilla[editar]

Un navegador web y un servidor web forman una arquitectura cliente-servidor. Las webs, a menudo, también utilizan una web cache para mejorar rendimiento. Hay cinco tipos de sistema de plantillas clasificados en base a cuándo reemplazan los elementos dinámicos con contenido real y forman las páginas web:

  • Del lado del servidor (server-side): la substitución ocurre en el servidor web.
  • Del lado del cliente (client-side): la substitución ocurre en el navegador web.
  • Del lado del borde (edge-sie): la substitución ocurre en un proxy entre el servidor web y el navegador.
  • Servidor exterior: las páginas web estáticas son producidas offline y cargadas al servidor web. No hay substitución durante el tiempo de ejecución.
  • Sistemas distribuidos: la sustitución ocurre en servidores múltiples.

Los lenguajes de plantilla pueden ser:

  • Incrustados (embedded) o orientados a eventos.
  • Sencillos, iterables, programables, o complejos.
  • Definidos por un consorcio, privativos, o definidos por una implementación abierta (open source). La propiedad influye en la estabilidad y credibilidad de la especificación. Aun así, en la mayoría de jurisdicciones, las especificación del lenguaje no pueden tener copyright, así que el control absoluto es raro.

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

Muchos sistemas de plantilla son un componente de una plataforma de programación más grande o framework. Son referidos como el sistema de plantilla de la "plataforma". Algunos sistemas de plantillas tienen la opción de sustituir el lenguaje de plantilla o el motor de plantillas.

Los 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, en sí mismos, 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 borde" o para la generación de páginas estáticas.

Generadores de sitios estáticos[editar]

Arquitectura de sistemas de plantilla fuera del servidor.

Los editores de HTML, a menudo, usan sistemas de plantillas web para producir solo páginas web estáticas. Son diseños web ya confeccionados, utilizados para producir en serie sitios web de despliegue rápido. También, generalmente, incluyen temas para estilos CSS. En general, los lenguajes de plantillas son utilizadas sólo con el software del editor.[6]​

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

Sistema etiqueta/nombre Editor/Plataforma Notas
Dreamweaver Macromedia Editor de HTML. Lenguaje incrustado e iterable.
Contribute Macromedia Editor de cliente.
Flash Macromedia Editor Flash.
FrontPage Microsoft Editor de HTML. Lenguaje incrustado e iterable.
Nvu Linux/Nvu Editor de HTML.
Pelican Una comunidad de Software libre Soportes Markdown o reStructuredText. Escrito en Python (lenguaje de programación).
Website Meta Language EstiloUnix

Muchos sistemas de plantilla del lado del servidor tienen una opción para publicar páginas externas en el servidor, donde las páginas publicadas son estáticas. Esto es común en los sistemas de gestión del contenido, como Vignette, pero no es considerado generación fuera del servidor. En la mayoría de casos, la opción de publicación no interfiere con el sistema de plantilla, y pueda hacerse mediante software externo, como Wget.

Sistemas del lado del servidor (server-side)[editar]

Sistema de plantillas del lado del servidor

Al principio se empezaron a utilizar páginas dinámicas del lado del servidor generadas desde plantillas con un software preexistente adaptado para esta tarea. Este software inicial estaba formado por los preprocesadores y lenguajes macro, adaptados para el uso en la web, corriendo en CGI. Luego, un avance sencillo pero pertinente consistió en la ejecución directa hecha en módulos de extensión, empezados con SSI.

Muchos sistemas de plantilla son típicamente utilizados como sistemas de plantilla del lado del servidor:

Sistema etiqueta/nombre Plataforma/framework Notas
Blade PHP Público. Parte de Laravel
CheetahTemplate Python Público. Lenguaje complejo incrustado.
Django Python Usa el "Django template language".
FreeMarker Java Público.
Facelets Jakarta EE Público. Parte de Jakarta Server Faces
Genshi Python Público
Haml Ruby u otros Público
Hamlets Java Público
Jinja2 Python Público. Lenguaje complejo incrustado
Kid Python
Lasso LassoSoft, LLC Proprietario. Lenguaje de programación interpretado y servidor
Mustache ActionScript, C++, Clojure, CoffeeScript, ColdFusion, D, Erlang, Fantom, Go, Java, server-side JavaScript, Lua, .NET, Objective-C, ooc,[7]​ Perl, PHP, Python, Ruby, Scala, Tcl Público
Basic Server Side Includes (SSI) Las directivas básicas crean un estándar. Lenguaje simple incrustado, si excluimos la directiva exec.
Smarty PHP Público. Lenguaje complejo incrustado.
Template Toolkit Perl Público. Lenguaje complejo incrustado.
Template Attribute Language (TAL) Zope, Python, Java, Perl, PHP, XSLT Público; también llamado Zope Page Templates (ZPT); Véase también TAL Expression Syntax (TALES), Macro Expansion TAL (METAL)
Tiles Java Público. Soporta múltiples lenguajes de plantillas (JSP, Velocity, Freemarker, Mustache) desde varios frameworks (servlet, portlets, struts, spring).
Thymeleaf Java Público.
Topsite Python Público. Desde 2008, este proyecto no se mantiene activamente[8]​
Twig PHP
PHPlib PHPlib Público. Lenguaje iterable incrustado.
WebMacro Java Público. Lenguaje iterable incrustado.
WebObjects Java Usa WebObjects Builder como motro.
Velocity Java Público. Usa VTL - Velocity Template Language.
Vignette Proprietario. Solución comercial. Lenguaje complejo incrustado.
XSLT (standard language) Cualquiera con un parser XSLT Estándar. Lenguaje de programación orientado a eventos.
XQuery (standard language) Cualquiera con un parser XQuery Estándar. Lenguaje programable incrustado.

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

Sistema etiqueta/nombre Notas
Actives server pages (ASP) Propietario (plataforma de Microsoft). Véase también: VBScript, Javascript, PerlScript, etc. extensiones para ASP.
eRuby Público (Ruby).
ColdFusion Markup Language (CFM) Público (Lucee, Railo, OpenBD). Propietario (Adobe ColdFusion).
Jakarta Server Pages (JSP) Público, Jakarta EE.
Active Perl Público.
PHP Público.
OpenACS Público (Tcl).

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

Preprocessor Notas
C preprocessor Público. Lenguaje iterable incrustado.
M4 Público. Lenguaje iterable incrustadoLenguaje complejo incrustado.

Sistemas del lado del borde (edge-side)[editar]

"Del lado del borde" se refiere a servidores web que residen en el espacio entre el cliente (navegador) y el servidor de origen. Son a menudo llamados servidores de proxy inverso. Estos servidores son generalmente configurados para reducir la carga y el tráfico en los servidores de origen guardando contenido en memoria cache como imágenes y fragmentos de página, y entregando dicho contenido al navegador de una manera eficaz.

Edge-side Includes (ESI) es un lenguaje tipo SSI. ESI ha sido implementado para la programación de redes de entrega de contenido. El lenguaje de plantillas ESI también puede ser implementado en navegadores web que utilizan Javascript y Ajax, o mediante un "plugin" de navegador.

Sistemas del lado del cliente (client-side)[editar]

Sistema de plantillasdistribuido y del lado del cliente (descentralizado).

Muchos navegadores web pueden aplicar una hoja de estilos XSLT a datos XML para transformar dichos datos a un documento XHTML, proporcionando así la funcionalidad de plantilla en el propio navegador. Otros sistemas implementan funcionalidad de plantilla en el navegador que utiliza Javascript u otro cliente-lado scripting lengua, incluyendo:

Sistemas distribuidos[editar]

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

Ejemplos:

Conceptos:       Estándares:
  • UIML (Lenguaje de Interfaz de Usuario Markup)
  • XSLT (Transformaciones de XSL)
       Software:

Referencias[editar]

  1. ↑ «Template engine». phpwact.org wiki. Archivado desde el original el 4 de diciembre de 2012. Consultado el 7 de enero de 2013. 
  2. ↑ a b c Parr, Terence John (2004). Enforcing strict model–view separation in template engines. Proceedings of the 13th international conference on World Wide Web. ISBN 1-58113-844-X. 
  3. ↑ https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices
  4. ↑ a b c Paragon Corporation (19 de julio de 2003). «Separation of Business Logic from Presentation Logic in Web Applications». 
  5. ↑ MVC vs OOP
  6. ↑ MacDonald, Matthew (2015). Creating a Website: The Missing Manual. Chapter 8 > Putting the Same Content on Multiple Pages > Web Templates > Note box: O'Reilly Media, Inc. ISBN 9781491936177. Consultado el 19 de enero de 2016. 
  7. ↑ «{{mustache}}». Consultado el 15 de octubre de 2013. 
  8. ↑ jodyburns. «Topsite Templating System». Consultado el 15 de octubre de 2013. 
Obtenido de «https://es.wikipedia.org/w/index.php?title=Sistema_de_plantillas_web&oldid=157731131»