Система веб-шаблонов в веб-публикациях позволяет веб-дизайнерам и разработчикам работать с веб-шаблонами для автоматического создания настраиваемых веб-страниц , например результатов поиска. Это повторно использует статические элементы веб-страницы при определении динамических элементов на основе параметров веб-запроса . Веб-шаблоны поддерживают статическое содержимое, обеспечивая базовую структуру и внешний вид. Разработчики могут реализовывать шаблоны из систем управления контентом , фреймворков веб-приложений и редакторов HTML .
Обзор
Система веб-шаблонов состоит из следующего:
- Механизм шаблонов : основной обрабатывающий элемент системы; [1]
- Ресурс контента : любой из различных видов потоков входных данных , например из реляционной базы данных ,файлов XML , каталога LDAP и других видов локальных или сетевых данных;
- Ресурс шаблона : веб-шаблоны, указанные в соответствии с языком шаблона ;
Ресурсы шаблонов и содержимого обрабатываются и объединяются механизмом шаблонов для массового производства веб-документов. Для целей этой статьи веб-документы включают любой из различных выходных форматов для передачи через Интернет через HTTP или другой Интернет-протокол.
Мотивы и типичное использование
Приложения
Веб-разработчики могут использовать шаблоны от любого человека или организации для создания веб-сайта. После покупки или загрузки шаблона они заменяют всю общую информацию в веб-шаблоне своей личной, организационной информацией или информацией о продукте. Шаблоны обычно используются для:
- Отображение личной информации или повседневной деятельности, как в блоге
- Продавайте товары онлайн
- Отображение информации о компании или организации
- Показать семейную историю
- Показать галерею фотографий
- Размещайте музыкальные файлы, такие как файлы MP3, в интерактивном режиме для воспроизведения через веб-браузер.
- Размещайте видео в Интернете для всеобщего просмотра
- Настройте личную зону входа в систему онлайн
Массовое производство
Различные агентства и организации используют системы веб-шаблонов для массового производства контента, когда более медленные методы производства менее осуществимы. [ необходима цитата ]
В качестве вводного обзора возьмем в качестве примера новостной веб-сайт . Рассмотрим «статический веб-сайт», где все веб-страницы статичны , созданный веб-дизайнером . Было бы очень однообразно менять отдельные страницы так часто, как меняются новости. Типичная стратегия автоматизации "повторяющейся работы" веб-дизайнера с использованием шаблонов может быть следующей:
- выбрать систему веб-шаблонов для поддержки веб-сайта ;
- группировать новости с разными требованиями к презентации;
- указать «стандарты представления» с помощью веб-шаблонов для каждой группы новостей;
- укажите ресурс содержимого для создания или обновления содержимого каждой новости .
Стандартизация стиля
Разделение проблем
Общей целью опытных веб-разработчиков является разработка и развертывание гибких и простых в обслуживании приложений. Важным фактором в достижении этой цели является разделение на бизнес - логики от логики представления . [2] Разработчики используют системы веб-шаблонов (с разной степенью успеха), чтобы поддерживать это разделение. [2]
С точки зрения веб-дизайнера , когда каждая веб-страница создается из веб-шаблона , он может думать о модульной веб-странице, структурированной с компонентами, которые можно изменять независимо друг от друга. Эти компоненты могут включать в себя верхний колонтитул, нижний колонтитул, глобальную панель навигации (GNB), локальную панель навигации и контент, такой как статьи, изображения, видео и т. Д.
Для программистов язык шаблонов предлагает более ограниченную логику, только для представления адаптации и решений, а не для сложных (бизнес - модели ) алгоритмов . [ необходима цитата ]
Для других членов «группы сайта» система шаблонов освобождает веб-мастеров, чтобы они могли сосредоточиться на техническом обслуживании, а поставщиков контента - на контент, и придает всем им большую надежность .
Кроме того, он имеет следующие преимущества:
- Легкость изменения дизайна : варианты представления в шаблонах "инвариантны к содержанию", что означает, что веб-дизайнер может обновить презентацию, не заботясь о более широкой инфраструктуре. [ необходима цитата ]
- Простота локализации интерфейса : меню и другие стандарты представления легко сделать единообразными для пользователей, просматривающих сайт. Использование Breadcrumb (навигации) делает любой веб-сайт более удобным и гибким. [3]
- Возможность работать над дизайном и кодом одновременно разными людьми по отдельности . Это может быть выполнено, пока все коды в шаблонах имеют чистый дизайн, а каждый блок или раздел веб-сайтов написан с индивидуальной системой комментариев. [ необходима цитата ]
- Адаптивный веб-дизайн теперь является обязательным фактором для любого веб-сайта. Все должно быть выполнено без каких-либо изменений в адаптивном дизайне.
- Легкость документации. Удобная документация экономит время на понимание всего шаблона, а также ускоряет процесс модификации. Профессиональные дизайнеры веб-сайтов уделяют большое внимание документации.
Одной из трудностей при оценке разделения интересов является отсутствие четко определенных формализмов, позволяющих измерить, когда и насколько хорошо оно выполняется. [2] Однако есть довольно стандартные эвристики, заимствованные из области разработки программного обеспечения . К ним относятся « наследование » (основанное на принципах объектно-ориентированного программирования ); и « шаблонное и генеративное программирование » (в соответствии с принципами разделения MVC ). [4] Точное различие между различными руководящими принципами является предметом споров, и некоторые аспекты различных руководств имеют определенную степень сходства. [5]
Гибкая презентация
Одним из основных аргументов в пользу «эффективного разделения» является необходимость максимальной гибкости кода и ресурсов, выделенных для логики представления. [4] Требования клиентов, изменение предпочтений клиентов и желание представить «свежее лицо» для уже существующего контента часто приводят к необходимости резко изменить внешний вид веб-контента, при этом как можно меньше нарушая базовую инфраструктуру.
Различие между «презентацией» (интерфейс) и « бизнес-логикой » (инфраструктурой) важно, потому что:
- Язык исходного кода презентации может отличаться от других активов кода.
- Разработчики часто создают компоненты приложения в разное время и в разных местах.
- Набор навыков рабочих не всегда включает в себя как навыки презентации, так и умение кодировать бизнес-логику.
- Ресурсы кода легче читать и поддерживать, если в системе различные типы компонентов разделены и слабо связаны [4]
Возможность повторного использования
Не все потенциальные пользователи веб-шаблонов могут нанять разработчиков для разработки системы. Кроме того, некоторые могут захотеть использовать Интернет, но не обладают достаточными техническими знаниями. Таким образом, ряд разработчиков и поставщиков выпустили веб-шаблоны специально для нетехнических специалистов. Возможность повторного использования веб-шаблонов также важна даже для высококвалифицированных и технически опытных разработчиков, но особенно важна для тех, кто полагается на простоту и «готовые» веб-решения.
Такие «готовые» веб-шаблоны иногда бесплатны, и их легко сделать в стране. Однако в Интернете иногда продаются специализированные веб-шаблоны. Хотя существует множество коммерческих сайтов, предлагающих веб-шаблоны за лицензионную плату, существуют также бесплатные источники с открытым исходным кодом.
Пример
Поскольку модель обычно хранится в реляционной базе данных, оставшиеся компоненты архитектуры MVC - это элемент управления и представление. В простейшей из систем эти две системы не разделены. Однако, применяя принцип разделения проблем, можно полностью разделить отношения.
Например, шаблон представления может выглядеть так:
< html xmlns = "http://www.w3.org/1999/xhtml" > < head > < title > Сайты title > head > < body > < h1 data-xp = " title " > h1 > body > html >
Затем шаблон элемента управления загружает представление, а затем использует адресацию XPath [ исходное исследование? ] для вставки компонентов из базы данных, например:
php $ doc = новый DOMDocument ; $ doc -> preserveWhiteSpace = false ; $ doc -> Загрузить ( 'view.html' ); $ titlenode = $ doc -> createTextNode ( «Нравится» ); $ xpath = новый DOMXPath ( $ doc ); $ xpath -> registerNamespace ( "h" , "http://www.w3.org/1999/xhtml" ); $ query = "// h: * [@ data-xp = 'title'] / comment ()" ; $ entry = $ xpath -> запрос ( $ query ); foreach ( $ entry как $ entry ) { $ entry -> parentNode -> replaceChild ( $ titlenode , $ entry ); } echo $ doc -> saveXML (); ?>
Виды шаблонных систем
Веб-браузер и веб-сервер представляют собой архитектуру клиент-сервер . Сайты часто также используют веб-кеш для повышения производительности. Пять типов систем шаблонов классифицируются в зависимости от того, когда они заменяют заполнители реальным контентом и собирают страницы.
- На стороне сервера - замена во время выполнения происходит на веб-сервере
- На стороне клиента - замена во время выполнения происходит в веб-браузере
- Edge-side - замена во время выполнения происходит на прокси-сервере между веб-сервером и браузером.
- Внешний сервер - статические веб-страницы создаются в автономном режиме и загружаются на веб-сервер; без замены во время выполнения
- Распределенный - замена во время выполнения происходит на нескольких серверах
Языками шаблонов могут быть:
- Встроенный или событийный.
- Простой, повторяемый, программируемый или сложный.
- Определяется консорциумом, определяется частным образом или де-факто определяется открытой реализацией. Право собственности влияет на стабильность и надежность спецификации. Однако в большинстве юрисдикций спецификация языка не может быть защищена авторским правом, поэтому контроль редко бывает абсолютным.
Исходный код механизма шаблонов может быть проприетарным или открытым .
Многие системы шаблонов являются компонентом более крупной программной платформы или фреймворка. Их называют «системой шаблонов платформы». В некоторых системах шаблонов есть возможность замены на другой язык или механизм шаблонов. [ необходима цитата ]
Языки программирования, такие как Perl , Ruby , C и Java, поддерживают обработку шаблонов либо изначально, либо с помощью дополнительных библиотек и модулей. JavaServer Pages (JSP), PHP и Active Server Pages (ASP с VBScript , JScript или другими языками) сами по себе являются примерами движков веб-шаблонов. Эти технологии обычно используются в системах шаблонов на стороне сервера, но могут быть адаптированы для использования на «пограничном» прокси-сервере или для генерации статических страниц.
Генераторы статических сайтов
Редакторы HTML часто используют системы веб-шаблонов для создания только статических веб-страниц . Их можно рассматривать как готовый веб-дизайн , используемый для массового производства веб-сайтов, предназначенных для быстрого развертывания. Они также обычно включают темы вместо стилей CSS . Как правило, язык шаблонов используется только с программным обеспечением редактора. [6]
FrontPage и Dreamweaver когда-то были самыми популярными редакторами с подсистемами шаблонов. Веб-шаблон Flash использует Macromedia Flash для создания визуально интерактивных сайтов.
Метка / название системы | Платформа / редактор | Заметки |
---|---|---|
Dreamweaver | Macromedia | HTML-авторинг . Встроенный итеративный язык. |
Способствовать | Macromedia | Авторинг клиента. |
Вспышка | Macromedia | Разработка Flash. |
Титульная страница | Microsoft | HTML-авторинг . Встроенный итеративный язык. |
Нву | Linux / Nvu | HTML-авторинг . |
Пеликан | С открытым исходным кодом сообщество | Поддерживает Markdown или reStructuredText . Написано на Python (языке программирования) . |
Мета-язык веб-сайта | Unix-подобный |
Многие серверные системы шаблонов имеют возможность публиковать выходные страницы на сервере, где опубликованные страницы статичны . Это распространено в системах управления контентом , таких как Vignette , но не считается генерацией вне сервера. В большинстве случаев эта «опция публикации» не мешает работе системы шаблонов , и ее можно сделать с помощью внешнего программного обеспечения, например Wget .
Серверные системы
Люди начали использовать динамические страницы на стороне сервера, созданные из шаблонов с уже существующим программным обеспечением, адаптированным для этой задачи. Это раннее программное обеспечение представляло собой препроцессоры и макроязыки , адаптированные для использования в сети и работающие на CGI . Затем простой, но актуальной технологией было прямое выполнение на модулях расширения, начатое с SSI .
Многие системы шаблонов обычно используются как серверные системы шаблонов :
Метка / название системы | Платформа / фреймворк | Заметки |
---|---|---|
Лезвие | PHP | Публичный. Часть Laravel |
ГепардШаблон | Python | Публичный. Встроенный сложный язык . |
Джанго | Python | Используйте «язык шаблонов Django». |
FreeMarker | Ява | Публичный. |
Facelets | Java EE | Публичный. Часть JavaServer Faces |
Генши | Python | Общественные |
Haml | Рубин или другой | Публичный. |
Гамлеты | Ява | Публичный. |
Jinja2 | Python | Публичный. Встроенный сложный язык . |
Дитя | Python | |
Лассо | ЛассоСофт, ООО | Собственный. Интерпретируемый язык программирования и сервер |
Усы | ActionScript , C ++ , Clojure , CoffeeScript , ColdFusion , D , Erlang , Fantom , Go , Java , серверный JavaScript , Lua , .NET , Objective-C , ooc , [7] Perl , PHP , Python , Ruby , Scala , Tcl | Публичный. |
Базовые серверные компоненты (SSI) | В основных директивах фиксируют «стандарт». | Встроенный простой язык , если exec директива exclude . |
Умный | PHP | Публичный. Встроенный сложный язык . |
Набор инструментов для шаблонов | Perl | Публичный. Встроенный сложный язык . |
Язык атрибутов шаблона (TAL) | Zope , Python , Java , Perl , PHP , XSLT | Общественный; также известные как шаблоны страниц Zope (ZPT) ; см. также Синтаксис выражений TAL (TALES), Расширение макросов TAL (METAL) |
Плитки | Ява | Публичный. Поддерживает несколько языков шаблонов (JSP, Velocity, Freemarker, Mustache) из различных фреймворков (сервлет, портлеты, распорки, пружина). |
Тимелист | Ява | Публичный. |
Топ-сайт | Python | Публичный. «По состоянию на 20 февраля 2008 года этот проект больше не находится в активной разработке». [8] |
Веточка | PHP | |
PHPlib | PHPlib | Публичный. Встроенный итеративный язык . |
WebMacro | Ява | Публичный. Встроенный итеративный язык . |
WebObjects | Ява | Используйте в качестве движка WebObjects Builder . |
Скорость (Джакарта / Апач) | Ява | Публичный. Используйте VTL - язык шаблонов скорости . |
Виньетка | Собственный. | Коммерческое решение. Встроенный сложный язык . |
XSLT (стандартный язык) | Любой с парсером XSLT | Стандарт. Программируемый язык, управляемый событиями . |
XQuery (стандартный язык) | Любой с парсером XQuery | Стандарт. Встроенный программируемый язык . |
Технически методология встраивания языков программирования в HTML (или XML и т. Д.), Используемая во многих «серверных языках сценариев», также является шаблонами. Все они являются встроенными сложными языками .
Метка / название системы | Заметки |
---|---|
Активные серверные страницы (ASP) | Собственный ( платформа Microsoft ). См. Также: Расширения VBScript , Javascript, PerlScript и т. Д. Для ASP. |
eRuby | Публичный ( Ruby ). |
Язык разметки ColdFusion (CFM) | Открытый ( Lucee , Railo , OpenBD ). Собственный ( Adobe ColdFusion ). |
JavaServer Pages (JSP) | Общедоступная, платформа Java . |
Активный Perl | Публичный. |
PHP | Публичный. |
OpenACS | Публичный ( Tcl ). |
Существуют также препроцессоры, используемые в качестве серверных шаблонов . Примеры:
Препроцессор | Заметки |
---|---|
Препроцессор C | Публичный. Встроенный итеративный язык . |
M4 | Публичный. Встроенный сложный язык . |
Боковые системы
Боковой шаблон и системы включения. «Edge-side» относится к веб-серверам, которые находятся в пространстве между клиентом (браузером) и исходным сервером. Их часто называют «обратными прокси-серверами». Перед этими серверами обычно стоит задача снизить нагрузку и трафик на исходные серверы путем кэширования контента, такого как изображения и фрагменты страниц, и его эффективной доставки в браузер.
Basic Edge Side Includes (ESI) - это язык, подобный SSI. ESI был реализован для сетей доставки контента. Язык шаблонов ESI также может быть реализован в веб-браузерах с использованием JavaScript и Ajax или через «надстройку» браузера.
Клиентские системы
Многие веб-браузеры могут применять таблицу стилей XSLT к данным XML, которые преобразуют данные в документ XHTML, тем самым обеспечивая функциональность шаблона в самом браузере.
Другие системы реализуют функции шаблонов в браузере с использованием JavaScript или другого клиентского языка сценариев , в том числе:
- Усы
- Беличий
- Рули
Распределенные системы
Самая простая форма - это включения (HTML-фреймы). В других случаях необходимы динамические веб-страницы .
Примеры:
- Аякс
- Богатое Интернет-приложение
Смотрите также
Концепции:
| Стандарты:
| Программное обеспечение:
|
Рекомендации
- ^ "Шаблонизатор" . phpwact.org wiki. Архивировано из оригинала на 4 декабря 2012 года . Проверено 7 января 2013 года .
- ^ а б в Парр, Теренс Джон (2004). Обеспечение строгого разделения модели и представления в механизмах шаблонов . Материалы 13-й международной конференции по всемирной паутине. ISBN 1-58113-844-X.
- ^ а б в Корпорация Paragon (19 июля 2003 г.). «Отделение бизнес-логики от логики представления в веб-приложениях» .
- ^ MVC против ООП
- ^ Макдональд, Мэтью (2015). Создание веб-сайта: отсутствующее руководство . Глава 8> Размещение одного и того же контента на нескольких страницах> Веб-шаблоны> Поле для заметок: ISBN O'Reilly Media, Inc. 9781491936177. Проверено 19 января +2016 .CS1 maint: location ( ссылка )
- ^ "{{усы}}" . Проверено 15 октября 2013 года .
- ^ Джодибернс. "Система шаблонов топсайтов" . Проверено 15 октября 2013 года .
9. Бесплатные темы для веб-сайтов электронной коммерции. Блоги MG Technologies и информационный портал тем для веб-сайтов.
Внешние ссылки
- Сравнение библиотек шаблонов JavaScript с 2009 года
- Обеспечение строгого разделения моделей и представлений в механизмах шаблонов
- Подход с двумя моделями для достижения эффективного разделения моделей и представлений в веб-приложениях на основе шаблонов
- Сравнение движка шаблонов PHP с графическими диаграммами
- Сравнения / тесты некоторых шаблонных движков Python и некоторые общие мысли о шаблонных движках
- web-mode.el - это основная программа emacs для редактирования веб-шаблонов.