Многие веб-разработчики по-прежнему скептически относятся к использованию преобразований в сфере адаптивного дизайна. Прошлым летом разработчики, ответственные за поддержку браузера Google Chrome, выдвинули предложение, которое осталось практически незамеченным технической прессой. В основе этого предложения лежит необходимость отказаться от поддержки, установленной для W3C (консорциум World-Wide Web) стандарта, который по-прежнему поддерживает каждый второй производитель браузеров. Что же это за стандарт, о котором пойдет речь? Расширяемый язык стилей служит для описания преобразований и также известен как XSLT (Extensible Stylesheet Language Transformations).
В ответ на эту новость, большинство веб-разработчиков, скорее всего, просто пожмет плечами и скажет: «Ну и что?» Это печально.
Преобразования (Transformations) представляют собой простую, но мощную технику для разделения контента и представления в веб-приложениях. Тем не менее, в области обработки данных инициатива по использованию преобразований не смогла завоевать популярность через использование стандарта XSLT. В результате, у веб-разработчиков практически наверняка возникает мысль о том, что преобразования «не подходят мне», даже если они могут использоваться совместно с HTML в соответствующем структурированном формате. К счастью, на горизонте уже появились новые фреймворки для преобразований, в том числе от разработчиков Sass, которые пообещали дать этому стандарту новую жизнь.
В этой статье мы представим преобразования с другой стороны и проведем исследование мобильного и адаптивного дизайна приложений. Мы не только «научим старую собаку новым трюкам», но и покажем, что преобразования по-прежнему актуальны для всех тех, кто имеет дело с HTML.
Разделение контента и представления.
Преобразование – это просто система, которая превращает входные данные в выходные в соответствии с набором предопределенных правил.
Поток данных преобразования. (Увеличенная версия изображения).
Главное, что нужно знать о преобразованиях – это не действия, которые они выполняют, а предоставляемые ими возможности. Преобразования создают абстракцию, которая отделяет контент и функциональность от представления. Это разделение является целью проектирования многих фреймворков, а преобразования позволяют ощутимо облегчить эту задачу, предоставляя многофункциональные и уникальные подходы.
Поток данных преобразования позволяет распределить существующие задачи. (Увеличенная версия изображения).
Хороший пример распределения связанности можно увидеть в Enlive, системе преобразований и шаблонов, написанной в Clojure. Большинство движков для шаблонов используют индивидуальные языки разметки, для того чтобы смешивать HTML с программными конструкциями, такими как циклы и переменные. Возьмите, например, PHP:
<ul>
<?php foreach ($task_list as $task) { ?>
<li> <?php echo $task ?> </li>
<?php } ?>
</ul>
Для сравнения Enlive шаблоны используют тот же старый добрый HTML, который вы получаете от своего дизайнера или PSD слайсера. Например, простой hello-world.html Enlive шаблон может выглядеть следующим образом:
<html>
<body>
<h1 id="output">Lorem Ipsum</h1>
</body>
</html>
Вместо вложенной логики в разметке, Clojure код, который связан с HTML, преобразует ее в выходную:
(deftemplate helloworld
"hello-world.html"
[]
[:h1#output]
(content "Hello World!"))
Не обязательно полностью понимать представленный выше код, но важно знать, что h1#output аргумент используется в качестве CSS селектора. В этом примере определяется шаблон с именем helloworld, в котором содержимое элемента h1#output заменяется на «Hello World!» При выполнении этого шаблона будет выведена следующая информация:
<html>
<body>
<h1 id="output">Hello World</h1>
</body>
</html>
Для получения более подробной информации о Enlive, я рекомендую вам ознакомиться с замечательным руководством Дэвида Нолена (David Nolen). Но ключевым моментом является необходимость разорвать все связи между контентом и представлением. Любые действия по изменению веб-сайта, A/B тестирование и даже редизайн могут быть такими же простыми, как и получение нового HTML от вашего дизайнера. Кроме того, дизайнеру ничего не нужно знать о языке программирования, на котором написан шаблон и он может использовать хорошо известные ему HTML классы, идентификаторы и понятия.
Если вы не нуждаетесь в создании веб-сайта таким образом, ситуация будет аналогична построению веб-страницы без использования таблицы стилей. Однако вы можете создавать страницы только лишь с использованием встроенных стилей (то есть, используя только style атрибут). Начинающим разработчикам будет целесообразно приступить к работе с кодом именно таким образом. Но опытные разработчики знают, что таблица стилей позволяет улучшить рабочий процесс и производительность.
Таким же образом, разделяя контент и представление, вы сможете ощутимо увеличить производительность и возможности своей команды. По сути, преобразования позволяют отделить внешний интерфейс (клиентская часть) от внутреннего интерфейса (серверная часть) и создать новую рабочую область для выполнения группой визуального проектирования независимо от остальной системы. В отрасли, где даже, казалось бы, простые вещи, такие как, например цвет кнопки могут повлиять на показатель эффективности (доля потенциальных клиентов, которые становятся реальными клиентами после мероприятий по продвижению товара), команде, занимающейся визуальным дизайном важно иметь возможность как можно быстрее выполнять итерации. Эта возможность может иметь огромное значение для достижения итогового результата.
Адаптивная модификация.
Преобразования могут быть полезны не только в системе шаблонов. Механизм разделения контента и представления также может быть применен к существующему веб-сайту, что позволяет разработчикам использовать новые материалы независимо от особенностей организационной структуры веб-сайта. Комбинация из разделения контента и представления, а также возможность применения к существующим веб-сайтам может сделать преобразования невероятно мощным и полезным инструментом. Этим инструментом сможет пользоваться более многочисленная аудитория, чем та, что есть в настоящее время. Я хочу продемонстрировать имеющиеся возможности на примере адаптивной настройки существующего веб-сайта, используя технологию преобразования, которая доступна в любом имеющемся сегодня браузере (по крайней мере, в настоящее время), XSLT.
XSLT был создан в конце 1990-х годов в качестве языка для преобразования XML и XHTML документов. Во время доминирующего влияния XML, XSLT использовался в качестве решения, позволяющего разделять контент и представление в веб-приложениях, построенных на основе XML форматов данных. W3C рекомендует XSLT в качестве стандарта, и почти в каждый крупный браузер включена поддержка той или иной формы этого языка.
Теперь, команда Chrome и Blink из компании Google высказывают предложение по отказу от поддержки XSLT. Некоторые из них могут быть обеспокоены возможностью его использования в долгосрочной перспективе. Тем не менее, на момент написания этой статьи XSLT по-прежнему поддерживался во всех основных браузерах, в том числе Chrome и последних версиях iPhone и Android браузеров. Кроме того, XSLT может использоваться и как серверный, и как клиентский язык. Реализация серверных решений работает независимо от поддержки браузером. Также доступны движки с открытым исходным кодом и коммерческие XSLT. Наконец, JavaScript реализации XSLT, такие как Saxon-CE, также могут заполнить возникший пробел на стороне клиента, если Google все-таки действительно решится отказаться от поддержки XSLT.
Адаптивная настройка представляет собой процесс закрепления адаптивных методов веб-дизайна на существующем веб-сайте, который изначально создавался не как адаптивный. Хотя и существует множество ресурсов и учебников, связанных с построением адаптивного веб-сайта с нуля, однако такой любопытной теме, как модернизация уже существующих веб-сайтов, уделяется гораздо меньше внимания. И это несмотря на огромное значение и актуальность проблемы. На сегодняшний день существует гораздо больше старых сайтов, нежели новых. В них был вложен значительный капитал и огромные усилия.
Продолжительная перестройка веб-сайта под адаптивный шаблон может привести к выходу за рамки бюджета или сорвать запланированное время выхода на рынок. Преобразования предоставляют эффективный способ сделать веб-сайт адаптивным, без необходимости его перестройки.
Естественно, что первым шагом будет попытка модификации веб-сайта только лишь с использованием CSS. Закладка Бена Каллагана, например, позволяет вставлять пользовательский CSS файл, чтобы сделать конкретно взятый веб-сайт более адаптивным. Однако добавление CSS может помочь не во всех случаях. В конце концов, шаблон, вложенность и порядок элементов в исходном HTML ограничат возможные варианты оформления. Джон Ширрел описал это ограничение, как неотъемлемый изъян CSS:
«Вы обнаружили недостаток в использовании CSS … CSS не позволяет преобразовать ваш документ. Элементы должны оставаться в порядке их появления … В CSS нет мощного набора для реального принятия решений».
По сути, этот процесс нарушает организационную структуру веб-сайта, поскольку CSS и HTML не имеют возможности разделять представление и контент. Каждый раз, когда для выполнения проектной работы вы решаете обернуть элемент в дополнительный div или span тег, то вы рискуете столкнуться с нарушением шаблона. В этом случае на помощь придут преобразования, которые восстанавливают абстракцию (удивительно), позволяя нам манипулировать документом.
Чтобы продемонстрировать этот подход, я создал образец модификации домашней страницы Hacker News, сделав верхнюю панель навигации адаптивной, используя Foundation фреймворк от ZURB. Думаю вполне очевидно, что должны быть проведены дополнительные конструктивные изменения, но и они должны послужить для иллюстрации процесса. Почему именно Hacker News? Во-первых, с помощью кода, взятого непосредственно из реального веб-сайта, я смогу продемонстрировать возможности данного подхода. Во-вторых, HTML разметка данного веб-сайта имеет средний объем: не слишком мала, но и не настолько велика, чтобы ощутимо усложнить наш пример.
Hacker News HTML, с адаптивной верхней панелью Foundation, добавленной с помощью преобразований.
Наиболее подходящим файлом в этой модификации является XSL таблица стилей transformer.xsl, которую вы можете скачать перейдя по этой ссылке. В перечисленных ниже пунктах, мы отметим несколько ключевых моментов, связанных с кодом в файле transformer.xsl. Полное объяснение XSLT выходит за рамки данной статьи, однако ускоренный курс должен сделать эти объяснения более понятными:
- Синтаксис. Язык программирования XSLT написан в виде XML. Например, оператор
ifв XSLT будет выглядеть как элемент<xsl:if></xsl:if>. - Параметры. Параметры в операторах типа
<xsl:if>указаны в атрибутах и дочерних узлах элемента. - Выбор соответствующих элементов. Общим параметром является
matchатрибут, который отвечает за выбор набора узлов. Например, шаблон, определенный<xsl:template match="body/center">правилом будет применяться в тех случаях, когда XSLT движок находит<center>элемент, который является дочерним по отношению к<body>. - Вложение HTML. Наконец, вы можете вставлять пустой HTML в таблицу стилей.
Первое, что нам нужно сделать, это указать браузеру, как использовать правила в transformer.xsl. Чтобы сделать это, мы изменим тип документа Content-Type до text/xml (в качестве альтернативного варианта, в некоторых браузерах вы можете просто изменить расширение файла с .html до .xml) и добавьте в верхнюю часть документа <?xml-stylesheet> тег наподобие следующего:
<?xml-stylesheet type="text/xsl" href="transformer.xsl"?>Когда браузер находит этот тег, он выполняет преобразование документа в соответствии с XSLT правилами, указанными в таблице стилей перед его визуализацией. Преобразование будет выполняться в браузере (то есть на стороне клиента). Но преобразования также могут быть выполнены на стороне сервера. Выполнение преобразований на стороне сервера может привести к более высокой производительности, но мы умышленно выполняем преобразования на стороне клиента, чтобы предоставить доступ к нашему примеру через браузер. Для тех из вас, кто заинтересован в использовании этой техники на основе клиентских преобразований, доступны различные методы оптимизации и специализированные инструменты для написания производительного XSLT.
Другой вопрос заключается в том, как XSLT обрабатывает неопределенные элементы. По умолчанию, XSLT удаляет любые элементы, не указанные в правилах преобразований. Это дизайнерское решение, имеющее смысл для XML документов, в которых, как правило, представлены данные. В большинстве случаев при преобразовании полностью сформированный веб-страницы, как правило, возникает необходимость в изменении только относительно небольшой части документа. В этом случае, определение каждого отдельного элемента, который мы должны сохранить, было бы невероятно трудоемкой задачей. К счастью, мы можем добавить в transformer.xsl таблицу стилей конструкцию, называемую тождественной трансформацией:
<!-- XSLT identity transform allows most of the input to pass through to the output. -->
<xsl:template match="@* | node()">
<xsl:copy>
<xsl:apply-templates select="@* | node()"/>
</xsl:copy>
</xsl:template>
Представленный выше код с первого взгляда может показаться вам немного непонятным. Если говорить обобщенно, то вы указываете XSLT движку о необходимости скопировать (т.е. <xsl:copy>) каждый узел и атрибут элемента. Добавление этого фрагмента в нашу таблицу стилей позволит эффективно изменить установленное по умолчанию поведение.
Следующим шагом является добавление к документу Foundation. Например, следующий код позволит добавить Foundation CSS (foundation.css) и его зависимости (normalize.css и Modernizr) в верхнюю часть <head> заголовка:
<!-- Install and initialize Foundation -->
<!-- Note the match attribute targeting the document's head element -->
<xsl:template match="head">
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="foundation.css" />
<script src="custom.modernizr.js"></script>
<xsl:apply-templates select="@* | *"/>
</xsl:template>
Кроме того, чтобы добавить Foundation в нижнюю часть <body> элемента, можно было бы записать программный код следующим образом:
<xsl:template match="body">...
<xsl:apply-templates select="@* | *"/>
<script src="zepto.js"></script>
<script src="foundation.min.js"></script>
<script>$(document).foundation();</script>
</xsl:template>
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров