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 los 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 una estructura y apariencia básicas. Los desarrolladores pueden implementar plantillas de sistemas de gestió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 plantilla : el elemento de procesamiento principal del sistema; [1]
- Recurso de contenido : cualquiera de los diversos tipos de flujos de datos de entrada, como de una base de datos relacional ,archivos XML ,directorio LDAP y otros tipos dedatoslocales o en red ;
- Recurso de plantilla : plantillas web especificadas según un idioma de plantilla ;
La plantilla y los recursos de contenido son procesados y combinados por el motor de plantillas 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 a través de HTTP u otro protocolo de Internet.
Motivaciones y usos típicos
Aplicaciones
Los desarrolladores web pueden usar plantillas de cualquier individuo u organización para configurar un sitio web. Una vez que compran o descargan una plantilla, reemplazan toda la información genérica en la plantilla web con su información personal, organizacional o de producto. Las plantillas se utilizan comúnmente para:
- Muestra información personal o actividades diarias como en un blog.
- Vender productos online
- Mostrar información sobre una empresa u organización
- Mostrar historia familiar
- Mostrar una galería de fotos
- Coloque archivos de música como archivos MP3 en línea para reproducirlos a través de un navegador web
- Colocar videos en línea para que el público los vea
- Configure un área de inicio de sesión privada en línea
Producción en masa
Varias agencias y organizaciones utilizan sistemas de plantillas web para producir contenido en masa cuando los métodos de producción más lentos son menos factibles. [ cita requerida ]
Para una descripción general introductoria, tome un sitio web de noticias como ejemplo. Considere un "sitio web estático", donde todas las páginas web son estáticas , creado por un diseñador web . Sería un trabajo muy repetitivo cambiar páginas individuales tan a menudo como cambian las noticias. Una estrategia típica para automatizar el "trabajo repetitivo" del diseñador web mediante plantillas podría ser la siguiente:
- elegir un sistema de plantillas web para mantener el sitio web ;
- noticias grupales con diferentes necesidades de presentación;
- especificar los "estándares de presentación" a través de plantillas web , para cada grupo de noticias;
- especificar un recurso de contenido para generar o actualizar el contenido de cada artículo de noticias .
Estandarización de estilo
Separación de intereses
Un objetivo común entre los desarrolladores web experimentados es desarrollar e implementar aplicaciones que sean flexibles y fáciles de mantener. Una consideración importante para alcanzar este objetivo es la separación de la lógica empresarial de la lógica de presentación . [2] Los desarrolladores utilizan sistemas de plantillas web (con distintos grados de éxito) para mantener esta separación. [2]
Para el diseñador web , cuando cada página web proviene de una plantilla web , puede pensar en una página web modular estructurada con componentes que se pueden modificar independientemente unos de otros. Estos componentes pueden incluir un encabezado, pie de página, barra de navegación global (GNB), barra de navegación local y contenido como artículos, imágenes, videos, etc.
Para los programadores del lenguaje de plantillas ofrece una lógica más restringido, sólo para presentación adaptaciones y decisiones, no para complejos (empresa modelo ) algoritmos . [ cita requerida ]
Para otros miembros del "equipo del sitio", un sistema de plantillas libera a los webmasters para que se centren en el mantenimiento técnico, a los proveedores de contenido para que se centren en el contenido y les da a todos más fiabilidad .
Además, tiene las siguientes ventajas para su uso:
- Facilidad de cambio de diseño : las variaciones de presentación en las plantillas son "invariables en el contenido", lo que significa que un diseñador web puede actualizar la presentación sin preocupaciones de infraestructura más amplias. [ cita requerida ]
- Facilidad de localización de la interfaz : los menús y otros estándares de presentación son fáciles de uniformar para los usuarios que navegan por el sitio. El uso de Breadcrumb (navegación) hace que cualquier sitio web sea más fácil de usar y flexible. [3]
- Posibilidad de trabajar por separado en el diseño y el código por diferentes personas al mismo tiempo. Se puede realizar mientras todos los códigos en una plantilla tienen un diseño limpio y cada bloque o sección de los sitios web se escribe con un sistema de comentarios individual. [ cita requerida ]
- El diseño web receptivo es ahora un factor obligatorio para cualquier sitio web. Todo debe realizarse sin ningún cambio en el diseño receptivo.
- Facilidad de documentación Una documentación práctica ahorra más tiempo para comprender toda la plantilla y también acelera el proceso de modificación. Los diseñadores de sitios web profesionales enfatizan mucho la documentación.
Una dificultad para evaluar la separación de preocupaciones es la falta de formalismos bien definidos para medir cuándo y qué tan bien se cumple. [2] Sin embargo, existen heurísticas bastante estándar que se han tomado prestadas del dominio de la ingeniería de software . Estos incluyen ' herencia ' (basada en principios de programación orientada a objetos ); y " programación generativa y de plantillas " (de acuerdo con los principios de separación MVC ). [4] La diferencia precisa entre las distintas pautas está sujeta a cierto debate, y algunos aspectos de las diferentes pautas comparten cierto grado de similitud. [5]
Presentación flexible
Una de las principales razones detrás de la "separación efectiva" es la necesidad de máxima flexibilidad en el código y los recursos dedicados a la lógica de presentación. [4] Las demandas de los clientes, los cambios en las preferencias del cliente y el deseo de presentar una "cara nueva" para el contenido preexistente a menudo resultan en la necesidad de modificar drásticamente la apariencia pública del contenido web sin interrumpir la infraestructura subyacente lo menos posible.
La distinción entre "presentación" (interfaz) y " lógica empresarial " (infraestructura) es importante porque:
- El lenguaje del código fuente de presentación puede diferir de otros activos de código.
- Los desarrolladores a menudo crean componentes de aplicaciones en lugares y momentos separados.
- Los conjuntos de habilidades de los trabajadores no siempre incluyen habilidades de presentación y capacidad de codificación de lógica empresarial.
- Los activos de código son más fáciles de leer y mantener cuando el sistema mantiene varios tipos de componentes separados y acoplados libremente [4]
Reutilización
No todos los usuarios potenciales de plantillas web pueden contratar desarrolladores para diseñar un sistema. Además, es posible que algunos deseen utilizar la Web pero tienen poca competencia técnica. Por lo tanto, varios desarrolladores y proveedores han lanzado plantillas web específicamente para que las utilicen personas sin conocimientos técnicos. La reutilización de plantillas web también es importante incluso para desarrolladores altamente capacitados y con experiencia técnica, pero es especialmente importante para aquellos que confían en la simplicidad y las soluciones web "listas para usar".
Estas plantillas web "listas para usar" son a veces gratuitas y fáciles de hacer por un individuo a nivel nacional. Sin embargo, las plantillas web especializadas a veces se venden en línea. Aunque existen numerosos sitios comerciales que ofrecen plantillas web por una tarifa de licencia, también hay fuentes gratuitas y de "código abierto".
Ejemplo
Con el modelo normalmente mantenido en una base de datos relacional, los componentes restantes de la arquitectura MVC son el control y la vista. En el más simple de los sistemas, estos dos no están separados. Sin embargo, adaptando el principio de separación de preocupaciones , se pueden desvincular completamente las relaciones.
Por ejemplo, la plantilla de vista puede verse así:
< html xmlns = "http://www.w3.org/1999/xhtml" > < head > < title > Sitios title > head > < body > < h1 data-xp = " título " > h1 > cuerpo > html >
Luego, la plantilla de control carga la vista y luego usa el direccionamiento XPath [ ¿investigación original? ] para insertar componentes de una base de datos, por ejemplo:
php $ doc = new DOMDocument ; $ doc -> preserveWhiteSpace = falso ; $ doc -> Load ( 'view.html' ); $ titlenode = $ doc -> createTextNode ( "Como este" ); $ xpath = new DOMXPath ( $ doc ); $ xpath -> registerNamespace ( "h" , "http://www.w3.org/1999/xhtml" ); $ consulta = "// h: * [@ data-xp = 'título'] / comentario ()" ; $ entradas = $ xpath -> consulta ( $ consulta ); foreach ( $ entradas como $ entrada ) { $ entrada -> parentNode -> replaceChild ( $ titlenode , $ entrada ); } echo $ doc -> saveXML (); ?>
Tipos de sistemas de plantillas
Un navegador web y un servidor web son una arquitectura cliente-servidor . Los sitios también suelen utilizar una caché web para mejorar el rendimiento. Se clasifican cinco tipos de sistemas de plantillas en función de cuándo reemplazan los marcadores de posición con contenido real y ensamblan páginas.
- Lado del servidor: la sustitución en tiempo de ejecución ocurre en el servidor web
- Lado del cliente: la sustitución en tiempo de ejecución ocurre 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 producen fuera de línea y se cargan en el servidor web; sin sustitución en tiempo de ejecución
- Distribuido: la sustitución en tiempo de ejecución ocurre en varios servidores
Los lenguajes de plantilla pueden ser:
- Integrado o impulsado por eventos.
- Simple, iterable, programable o complejo.
- Definido por un consorcio, definido de forma privada o definido 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 idioma no puede tener 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 les conoce como el "sistema de plantillas de la plataforma". Algunos sistemas de plantillas tienen la opción de sustituir un lenguaje o motor de plantilla diferente. [ cita requerida ]
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 creación 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
Los editores de HTML a menudo utilizan sistemas de plantillas web para producir solo páginas web estáticas . Estos pueden verse como un diseño web listo para usar, que se utiliza para producir en masa sitios web " cortados por cookies" para una implementación rápida. También suelen incluir temas en lugar de estilos CSS . En general, el lenguaje de la plantilla se usa solo 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.
Etiqueta / nombre del sistema | Plataforma / editor | Notas |
---|---|---|
Dreamweaver | Macromedia | Creación de HTML . Lenguaje iterable integrado. |
Contribuir | Macromedia | Autorización del cliente. |
Destello | Macromedia | Creación de Flash. |
FrontPage | Microsoft | Creación de HTML . Lenguaje iterable integrado. |
Nvu | Linux / Nvu | Creación de HTML . |
Pelícano | Una comunidad de código abierto | Admite Markdown o reStructuredText . Escrito en Python (lenguaje de programación) . |
Meta lenguaje del sitio web | Tipo Unix |
Muchos sistemas de plantillas del lado del servidor tienen la opción de 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 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
La gente comenzó a utilizar páginas dinámicas del lado del servidor generadas a partir de plantillas con software preexistente adaptado para esta tarea. Este primer software fue el de preprocesadores y lenguajes de macros , adaptados para uso web, que se ejecutan en CGI . A continuación, una tecnología simple 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 :
Etiqueta / nombre del sistema | Plataforma / marco | Notas |
---|---|---|
Espada | PHP | Público. Parte de Laravel |
Plantilla de guepardo | Pitón | Público. Lenguaje complejo incrustado . |
Django | Pitón | Utilice el "lenguaje de plantilla de Django". |
FreeMarker | Java | Público. |
Facelets | Java EE | Público. Parte de JavaServer Faces |
Genshi | Pitón | Público |
Haml | Ruby u otro | Público. |
Aldeas | Java | Público. |
Jinja2 | Pitón | Público. Lenguaje complejo incrustado . |
Niño | Pitón | |
Lazo | LassoSoft, LLC | Propiedad. Servidor y lenguaje de programación interpretado |
Bigote | ActionScript , C ++ , Clojure , CoffeeScript , ColdFusion , D , Erlang , Fantom , Go , Java , JavaScript del lado del servidor , Lua , .NET , Objective-C , ooc , [7] Perl , PHP , Python , Ruby , Scala , Tcl | Público. |
Incluye el lado del servidor básico (SSI) | Las directivas básicas fijan un "estándar". | Lenguaje simple incrustado , si excluye la exec directiva. |
Sabelotodo | PHP | Público. Lenguaje complejo incrustado . |
Kit de herramientas de plantilla | Perl | Público. Lenguaje complejo incrustado . |
Lenguaje de atributos de plantilla (TAL) | Zope , Python , Java , Perl , PHP , XSLT | Público; también conocido como Plantillas de página de Zope (ZPT) ; ver también TAL Expression Syntax (TALES), Macro Expansion TAL (METAL) |
Losas | Java | Público. Admite múltiples lenguajes de plantilla (JSP, Velocity, Freemarker, Moustache) desde varios marcos (servlet, portlets, struts, spring). |
Thymeleaf | Java | Público. |
Topsite | Pitón | Público. "A partir del 2008-02-20, este proyecto ya no se encuentra en desarrollo activo". [8] |
Ramita | PHP | |
PHPlib | PHPlib | Público. Lenguaje iterable integrado . |
WebMacro | Java | Público. Lenguaje iterable integrado . |
WebObjects | Java | Utilice WebObjects Builder como motor. |
Velocidad (Yakarta / Apache) | Java | Público. Utilice VTL - Velocity Template Language . |
Viñeta | Propiedad. | Solución comercial. Lenguaje complejo incrustado . |
XSLT (idioma estándar) | Cualquiera con un analizador XSLT | Estándar. Lenguaje programable impulsado por eventos . |
XQuery (lenguaje estándar) | Cualquiera con un analizador XQuery | Estándar. Lenguaje programable integrado . |
Técnicamente, la metodología de incrustar lenguajes de programación dentro de HTML (o XML, etc.), que se utiliza en muchos "lenguajes de script incluidos en el lado del servidor" también son plantillas. Todos ellos son lenguajes complejos incrustados .
Etiqueta / nombre del sistema | Notas |
---|---|
Páginas de servidor activo (ASP) | Propietario ( plataforma Microsoft ). Consulte también: Extensiones de VBScript , Javascript, PerlScript , etc. para ASP. |
eRuby | Público ( Ruby ). |
Lenguaje de marcado ColdFusion (CFM) | Pública ( Lucee , Railo , OpenBD ). Propietario ( Adobe ColdFusion ). |
Páginas de JavaServer (JSP) | Plataforma pública Java . |
Perl activo | Público. |
PHP | Público. |
OpenACS | Público ( Tcl ). |
También hay preprocesadores que se utilizan como motores de plantilla del lado del servidor . Ejemplos:
Preprocesador | Notas |
---|---|
Preprocesador C | Público. Lenguaje iterable integrado . |
M4 | Público. Lenguaje complejo incrustado . |
Sistemas de borde
Plantilla Edge-Side y sistemas de inclusión. El "lado del borde" se refiere a los servidores web que residen en el espacio entre el cliente (navegador) y el servidor de origen. A menudo se les conoce como 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ágina, y entregándolo al navegador de manera eficiente.
Basic Edge Side Included (ESI) es un lenguaje similar a SSI. ESI se ha implementado para redes de distribución de contenido. El lenguaje de la plantilla ESI también se puede implementar en navegadores web que utilicen JavaScript y Ajax, o mediante un "complemento" del navegador.
Sistemas del lado del cliente
Muchos navegadores web pueden aplicar una hoja de estilo XSLT a datos XML que transforman los datos en un documento XHTML, proporcionando así la funcionalidad de plantilla en el propio navegador.
Otros sistemas implementan la funcionalidad de plantilla en el navegador usando JavaScript u otro lenguaje de scripting del lado del cliente , que incluye:
- Bigote
- Ardilla
- Bigote daliniano
Sistemas distribuidos
La forma más simple son las transclusiones (marcos HTML). En otros casos, se necesitan páginas web dinámicas .
Ejemplos:
- Ajax
- Aplicación de Internet enriquecida
Ver también
Conceptos:
| Estándares:
| Software:
|
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 .
- ^ a b c Parr, Terence John (2004). Aplicación de una estricta separación entre modelos y vistas en los motores de plantillas . Actas de la decimotercera conferencia internacional sobre World Wide Web. ISBN 1-58113-844-X.
- ^ a b c Paragon Corporation (19 de julio de 2003). "Separación de la lógica empresarial de la lógica de presentación en aplicaciones web" .
- ^ MVC frente a OOP
- ^ MacDonald, Matthew (2015). Creación de un sitio web: el manual que falta . Capítulo 8> Colocación del mismo contenido en varias páginas> Plantillas web> Cuadro de notas: O'Reilly Media, Inc. ISBN 9781491936177. Consultado el 19 de enero de 2016 .Mantenimiento de CS1: ubicación ( enlace )
- ^ "{{bigote}}" . Consultado el 15 de octubre de 2013 .
- ^ jodyburns. "Sistema de plantillas de Topsite" . Consultado el 15 de octubre de 2013 .
9. Temas de sitios web de comercio electrónico gratuitos Blogs de MG Technologies y Portal de información de temas de sitios web.
enlaces externos
- Comparación de bibliotecas de plantillas de JavaScript desde 2009
- Aplicación estricta de la separación entre modelos y vistas en motores de plantillas
- Un enfoque de modelo doble para lograr una separación eficaz entre modelos y vistas en aplicaciones web basadas en plantillas
- Una comparación del motor de plantilla PHP con gráficos gráficos
- Comparaciones / puntos de referencia de algunos motores de plantilla de Python y algunas ideas genéricas sobre motores de plantilla
- web-mode.el se especializa en emacs para editar plantillas web