Отправляет email-рассылки с помощью сервиса Sendsay

XML и сопутствующие технологии

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Как заработать в Интернете" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2011   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Алексей Голубев

Статистика

1.065 подписчиков
0 за неделю
←   Все выпуски   →

XML и сопутствующие технологии


XML и сопутствующие технологии

Пара слов о рассылке

Уважаемые подписчики!

В данной рассылке публикуются советы, примеры и статьи, связанные технологией XML. Не смотря на то, что сайт рассылки посвящен web-разработке, в рассылке публикуется также материал, который может быть связан с тематикой сайта косвенно. В рассылке появляется не только уже имеющаяся на сайте иформация, но и дополняющая ее.

Сайт рассылки: http://frnet.narod.ru/. На нем вы найдете все выпуски рассылки, а также полезную информацию по web-дизайну и web-программированию.

Буду рад услышать предложения или опубликовать материал, связанный с тематикой сайта или рассылки, от всех желающих поучаствовать. Для связи воспользуйтесь следующим адресом электронной почты: alexey-golubev@mail.ru.

Выпуск №8: Пример XSL-преобразований

Автор: Алексей Голубев

Самое лучшее обучение какой-либо новой технологии для разработчика – это обучение на примерах. Часто бывает, что рассматриваемые в статьях примеры бывают сложны для понимания человеком, имеющим недостаточно практики в конкретной сфере. Говорить о ценности той или иной информации можно только четко поняв, насколько она помогает людям при решении конкретных задач. В данной заметке, рассматривает достаточно тривиальная задача, однако из подобных примеров и складывается полноценная картина.

Постановка задачи

Представить набор ссылок, хранящихся в XML-документе в виде понятном для пользователя, т.е. в виде web-страницы.

Исходные данные

XML-документ с именем links.xml, содержащий данные о страницах определенного раздела сайта: заголовок страницы, URL, краткое описание. Структура данного файла вполне понятна и проста. Рассмотрим вариант с описанием трех страниц:

<?xml version="1.0" encoding="utf-8"?>
<ideas>
 <idea>
  <title>Заработок на международных интернет–аукционах</title>
  <url>http://svoedelo.spb.ru/idea.php?id=14</url>
  <description>Идея предоставления посреднических услуг на интернет–аукционах.</description>
 </idea>
 <idea>
  <title>Сервис подарков через социальные сети</title>
  <url>http://svoedelo.spb.ru/idea.php?id=6</url>
  <description>Рассматривается онлайн–магазин подарков.</description>
 </idea>
 <idea>
  <title>Интернет–магазин неиспользованных купонов</title>
  <url>http://svoedelo.spb.ru/idea.php?id=10</url>
  <description>Заработка на купонах скидок.</description>
 </idea>
</ideas>

Необходимо помнить, что XML-документы принято хранить в кодировке UTF-8.

Решение

Для решения данной задачи с применением XSL-преобразований нам потребует создать шаблон оформления, который будет описывать внешний вид итоговой страницы, т.е. то, что увидит конечный пользователь.

Шаблон оформления имеет формат XML-документа, соответствующего требованиям международной организации World Wide Web Consortium, разрабатывающей открытые стандарты, применяемые при создании интернет-проектов.

В данном документе описываются правила отображения элементов выводимых данных, на основе которых в конечном итоге формируется готовый HTML-документ, предоставляемый пользователю. В нашем случае, будет достаточно описания двух правил:

  1. 1. Для корневого элемента исходного XML-файла (ideas).
  2. 2. Для элемента, содержащего данные о конкретной ссылке (idea).

Рассмотрим их по порядку.

Отображение корневого элемента

Для простоты объяснения и уменьшения кода отступим немного от четких стандартов структуры HTML, что, на мой взгляд, позволительно в рамках данного примера.

Код web-страницы имеет определенную структуру, основными элементами которой являются теги html, head, body. Помимо этих элементов в шаблоне опишем заголовки окна и страницы, а также форму вывода ссылок – маркированный список. Правило для корневого элемента примет следующий вид:

<xsl:template match="/">
 <html>
  <head>
   <title>Идеи заработка</title>
  </head>
  <body>
   <h1>Идеи заработка</h1>
   <ul>
    <xsl:apply-templates/>
   </ul>
  </body>
 </html>
</xsl:template>

По сути, описывая правило для корневого элемента, мы создаем каркас будущей страницы.

Отображение списка ссылок

Каждая ссылка в рассматриваемом примере будет представлять собой элемент маркированного списка, состоящего из собственно ссылки и описания страницы. Правило для отображения примет вид:

<xsl:template match="idea">
 <li>
  <a>
   <xsl:attribute name="href">
    <xsl:value-of select="url"/>
   </xsl:attribute>
   <xsl:value-of select="title"/>
  </a>
  <br/>
  <xsl:value-of select="description"/>
 </li>
</xsl:template>

Стилевое оформление

Для того, чтобы описать полностью вид страницы, код необходимо дополнить таблицей стилей (CSS). В нашем простейшем случае опишем стиль для всей страницы (укажем используемый шрифт, его размер и высоту строки текста) и заголовка. Приведу описание стиля конечной страницы:

body
{
 font-family:verdana;
 line-height:18px;
 font-size:12px;
}
h1
{
 font-size:22px;
 font-weight:normal;
}

Конечный вид XML-документов

Соберем описания шаблона, приведенные выше, в единый документ и дадим ему название style.xsl:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="/">
  <html>
   <head>
    <title>Идеи заработка</title>
    <style>
    body
    {
     font-family:verdana;
     line-height:18px;
     font-size:12px;
    }
    h1
    {
     font-size:22px;
     font-weight:normal;
    }
    </style>
   </head>
   <body>
    <h1>Идеи заработка</h1>
    <ul>
     <xsl:apply-templates/>
    </ul>
   </body>
  </html>
 </xsl:template>
 <xsl:template match="idea">
  <li>
   <a>
    <xsl:attribute name="href">
     <xsl:value-of select="url"/>
    </xsl:attribute>
    <xsl:value-of select="title"/>
   </a>
   <br/>
   <xsl:value-of select="description"/> 
  </li>
 </xsl:template>
</xsl:stylesheet>

Теперь шаблон нужно подключить к исходному файлу с данными о ссылках, добавив в него соответствующее указание. В итоге получим:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
<ideas>
 <idea>
  <title>Заработок на международных интернет–аукционах</title>
  <url>http://svoedelo.spb.ru/idea.php?id=14</url>
  <description>Идея предоставления посреднических услуг на интернет–аукционах.</description>
 </idea>
 <idea>
  <title>Сервис подарков через социальные сети</title>
  <url>http://svoedelo.spb.ru/idea.php?id=6</url>
  <description>Рассматривается онлайн–магазин подарков.</description>
 </idea>
 <idea>
  <title>Интернет–магазин неиспользованных купонов</title>
  <url>http://svoedelo.spb.ru/idea.php?id=10</url>
  <description>Заработка на купонах скидок.</description>
 </idea>
</ideas>

Оба файла должны располагаться в одном каталоге.

Результат

Результат можно просмотреть в браузере, запустив файл links.xml. Отмечу только, что в отличии от Safari, Firefox, Opera, Internet Explorer, в браузере Chrome конечная web-страница отобразиться только в том случае, если загрузить XML-документы на web-сервер и открыть файл links.xml через адресную строку. В противном случае у вас отобразиться пустая страница, так как Chrome считает небезопасным подгружать XSL-шаблон из XML-документа на локальном компьютере.

Так же вы сможете увидеть результат, пройдя по этой ссылке.

Данная заметка не претендует на полноту описания работы с XSL-шаблонами и лишь демонстрирует конкретный пример. За более подробной информацией вы можете обратиться к соответствующим стандартам и материалам, имеющимся в свободном доступе в интернете в достаточном количестве, или к знакомому специалисту в данной области.

Архив рассылки

Напоминаю, что архив рассылок сайта можно найти по адресу: http://frnet.narod.ru/subscribe.html.

Дополнительная информация

Материал рассылки может публиковаться и использоваться без каких-либо ограничений в некоммерческих целях, при условии сохранения авторства.

Если вы ищите единомышленников или хотите опубликовать информацию, связанную с тематикой рассылки или сайта, присылайте готовый текст объявления или статьи для размещения. Приветствуется информация о новых книгах, интересных статьях в журналах, новости и тенденции в web-разработке и информационных технологиях.

Также готов обменяться ссылками на сайты и рассылки, сделать не сложную разметку и дизайн вашей рассылки (на подобии данного и находящихся в архиве выпусков), с условием размещения ссылки на сайт BuildSites.org.

Спасибо за внимание. С уважением, Алексей Голубев.

В избранное