WTG Zebra 1.00. Разработка сайта.



        Разработка сайта — задача непростая. Сайт должен удовлетворять массе явных и неявных требований, условий и традиций, а кроме того — просто нравиться посетителям. На сайт, который не понравился, второй раз вряд ли зайдут. Разве что на нем будет находиться исключительно важная и нужная информация. Но с развитием Интернета информация, появившаяся на одном сайте, едва ли не в мгновение ока разлетается по множеству других, и в течение нескольких дней ваш сайт уже перестает быть эксклюзивным владельцем сенсации. Ну, или примерно в таком духе. Во всяком случае, не будем подробно рассматривать условия и причины существования сайта в таком, а не ином виде, и приступим к выполнению другой задачи.
        А именно — плотно разберемся в том, как следует создавать сайт для работы в среде Zebra.

        1. Основные этапы разработки

        Как и любая другая задача, разработка сайта включает в себя несколько этапов:
        — формулирование цели;
        — поиск путей решения;
        — проектирование;
        — черновое выполнение задачи;
        — доведение до конечного результата.
        Цель мы уже сформулировали — разработать сайт, установить его на Zebra и запустить. Исходим из предположения, что на сервере уже установлена и стабильно работает Zebra, а дизайнер нарисовал внешний облик сайта.
        Можно выделить два варианта проектирования сайта (о них уже упоминалось в предыдущих разделах):
        — внесение готового или почти готового html-кода конечных ресурсов; этот вариант мало отличается от выкладывания обычных html-файлов и практически не использует функциональность Zebra;
        — разработка описаний ресурсов в соответствии с правилами Zebra, применение динамических вставок, сборка конечных страниц в зависимости от языка, выбранного профиля и других условий; здесь функциональность Zebra используется на полную мощность и оправдывает ее выбор.

        Рассмотрим далее проектирование, разработку и доработку сайта на конкретном примере. В качестве примера возьмем стандартную совокупность ресурсов, устанавливаемую вместе с Zebra.

        2. Проектирование

        Следует с самого начала исходить из предположения о том, что сайтом будет заниматься не один человек, а как минимум трое: администратор, модератор (оператор) и редактор. Даже если все должности будет совмещать единый фанатик своего дела, раздельное проектирование обязанностей в дальнейшем может привести к гораздо более легкому управлению сайтом, особенно в том случае, если он разовьется в нечто большее, нежели домашняя страница.
        Дизайн сайта необходимо полностью отделить от наполнения. Для этого можно выбрать, например, следующий путь. Выделяем логические элементы дизайна и закладываем их в «Записи». Если подразумевается динамика, которую можно формализовать (свести к зависимости от явно формируемых правил), можно реализовать ее в виде встроенной процедуры. Далее весь набор записей и процедур сводится в единые фрагменты $begbody и $endbody, размещаемые в начале и в конце описания страницы. Само наполнение — все тексты, которые по мере путешествия по сайту частично или полностью меняются, новости, форум — лучше всего расположить в ресурсах Zebra Site. Описания страниц в Zebra Site подчиняются общим правилам составления описаний Zebra (см. «Работа с Zebra Site. Описание страницы»), и наилучшим вариантом в данном случае будет являться нечто наподобие:
        $begbody
        ... здесь все тексты ресурса...
        $endbody

        Тогда редактирование сайта будет вполне очевидным, и его даже можно будет со временем переложить на плечи другого редактора.
        При необходимости такой подход можно расширить, включив вставки в нужные места. Однако при редактировании потребуется следить, чтобы структура описания не оказалась нарушена.
        В нашем примере установлена одна страница — индексная. Идентификатор index. Что означает, что эта страница используется Zebra и как страница по умолчанию. Ее содержимое (в сокращенном виде):



$zebrainclude
$begbody
<tr width="100%"><th colspan="2" align="center">Начало</th></tr>
<tr width="100%" valign="top"><td width="25%">
  <li><a href="http://www.wtg.ru/">White Tiger Group</a>
  <li><a href="http://www.wtg.ru/zebra/">Zebra</a>
  <li><a href="http://www.baraholka.ru/">Сетевая Барахолка</a>
  <li><a href="http://worldart.euro.ru/">WorldArt</a>
  <li><a href="http://www.wtg.ru/products/wtboard/">WTBoard</a>
  <li><a href="http://www.wtg.ru/products/dan/">DAN</a>
</td>
<td width="75%">

  Если вы видите перед собой эту страницу, и выглядит она
  вполне прилично, значит, вы успешно установили WTG Zebra на сервер. Возможно,
  в дальнейшем появятся некоторые странности. Не пугайтесь — скорее всего,
  они обусловлены конкретной настройкой вашего сервера. Мы работаем над тем,
  чтобы по возможности учесть <i>все</i> моменты, касающиеся отличий в разных
  системах и серверах.

  <p>WTG Zebra представляет собой комплексное программное
  решение, направленное на организацию, управление и поддержку сайта, и
  ориентированное на самых разных пользователей. Для начинающих Zebra
  предоставляет максимально удобные средства, готовые шаблоны и процедуры
  и подробную документацию, воспользовавшись которыми, можно в сжатые сроки
  реализовать немалый проект. Более опытные пользователи могут создавать
  собственные шаблоны и процедуры, доводя таким образом динамичность сайта до
  крайних пределов познания... Профессионалам, вероятно, интересно будет
  написание к Zebra собственных модулей, что позволит осуществить практически
  любые действия по наполнению и поддержке сайта.

  <p>WTG Zebra является разработкой творческой группы
  White Tiger Group. В числе наших успешно реализованных проектов также
  можно назвать сайты «Сетевая барахолка», «WorldArt»,
  программные продукты «WTBoard» и «DAN».

  <p>Данная начальная страница устанавливается
  по умолчанию на сайт сразу после инсталляции
  <a href="http://www.wtg.ru/zebra">Zebra</a>. В дальнейшем
  при разработке и создании других ресурсов сайта вы можете пользоваться шаблоном
  этой страницы. Пошаговое руководство можно найти в документации.

</td></tr>
$endbody

<p><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="top"><td class="copy">
  <table border="0" cellpadding="0" cellspacing="1"
    bgcolor="#000000" style="background-color:#000000">
  <tr><td align="center" bgcolor="#ffffff" style="background-color:#ffffff">
    <font size="1" face="arial" color="#000000"
    style="font-family:tahoma,arial;text-decoration:none;font-weight:bold">Zebra
    © XXI</font></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#000000"
    style="background-color:#000000"><a href="http://www.wtg.ru/"><font size="1"
    face="arial" color="#ffffff" style="font-family:tahoma,arial;text-decoration:none;
    font-weight:bold">White&nbsp;Tiger&nbsp;Group</font></a></td>
  </tr>
  </table>
</td><td class="small">
  &nbsp;Программный продукт «WTG Zebra» является собственностью
  <a href="http://www.wtg.ru/">White Tiger Group</a>. Все авторские и смежные
  права закреплены за WTG.

  <br>&nbsp;«WTG Zebra» не является открытым проектом. Использование его
  подразумевает ваше согласие с «Лицензионным соглашением».
</td></tr>
</table>


        При этом $begbody представляет из себя следующее описание:


%#parsepage($page)#%
<html>
  <head>
    <title>$title</title>
  </head>
<body>
$sample_style
<table width="100%" border="0" cellpadding="1" cellspacing="1">
  <tr width="100%" valign="middle">
  <form name="mainmenu" action="$dircgi/$current" method="post">
    <th align="left" width="90%"> $title</th>
    <th align="right" width="10%" nowrap>$menudefault
      <input type="submit" name="go" value="Go"></th>
  </form></tr>
</table>
<div align="right"><small><b>Сейчас %#currentdate#%,
  это %#count('#site')#%-е посещение сайта.</b></small></div>
$sample_headertable
<p><table width="100%" border="0" cellpadding="5" cellspacing="1">

и $endbody:


</table>
<p>
$sample_footertable


        В $begbody применяется вставка записи $sample_style, процедур %#parsepage#%, %#currentdate#% и %#count#%.
        Запись $sample_style находится в группе записей Sample и определяет таблицы стилей, применяемые в нашем примере для задания оформления. Также в записи задается фрагмент JavaScript (переменные и функция bgc) для динамического изменения цветового оформления ресурсов сайта в соответствии с положением курсора мыши.


<style><!--
  body {background-color:peachpuff;color:brown;
    font-family:Verdana,Tahoma,Arial;font-size:16px;margin-top:10px;
    margin-left:10px;margin-right:10px;margin-bottom:10px}
  h1 {color:brown}
  h2 {color:brown}
  a:link {color:brown;text-decoration:none}
  a:visited {color:#800000;text-decoration:none}
  a:active {color:#000000;text-decoration:none}
  a:hover {color:#880000}
  b {font-weight:bold}
  input {font-size:14px}
  select {font-size:14px}
  textarea {font-size:14px}
  table {font-size:14px;background-color:black}
  th {background-color:#FFC184;font-size:16px;color:black}
  td {background-color:cornsilk}
  small {font-size:11px}
  .small {font-size:11px}
  .border {background-color:black}
  .link {background-color:#FFC184}
  .button {background-color:cornsilk}
  .error {background-color:#AA4400;font-weight:bold;
    color:white;font-size:15px}
  .input {background-color:cornsilk;font-size:14px}
  .select {background-color:cornsilk;font-size:14px}
  .ainput {font-size:8px}
  .stat {font-size:10px}
  .linktable {background-color:cornsilk}
  .in {background-color:#FFC184}
  .out {background-color:peachpuff}
//--></style>
<script language=javascript><!-- //
  {
    c1='#FFC184';
    c2='peachpuff';
    c3='cornsilk'
  }
  function bgc(elm,n){elm.style.backgroundColor=n}
//--></script>


        Встроенная процедура currentdate возвращает текущие дату и время в соответствии с основным форматом даты Zebra (см. Ядро. Основные параметры). Возвращенная строка устанавливается взамен вызова этой процедуры. Сама процедура написана на Perl и использует окружение Zebra (см. «Руководство по API»).


sub currentdate
{
	my($format)=@_;
	local$int{date}=($format||'$dday $wmonth $fullyear, $wday, $hhour:$min');
	return zs_stringdate(Zebra::unpacktime($curtime,\@days,\@months))
}


        Встроенная процедура count возвращает значение счетчика запросов для выбранного ресурса или же для всего сайта в целом. Возвращенное значение устанавливается взамен команды вызова этой процедуры. Сама процедура написана на Perl и использует окружение Zebra (см. «Руководство по API»). Вызов процедуры без аргументов возвращает количество запросов текущего ресурса. Если указать полный идентификатор ресурса, будет возвращено количество запросов этого ресурса. При аргументе #site подсчитывается общее количество запросов к сайту.


sub count
{
	my(@a,$i,$a,$b);
	$b=$page;
	if($_[0] eq '#site'){return $ini{'__sitecounter'}}
	if(length$_[0]){$b=$_[0]}
	for$i(@locales)
	{
		for(@profiles)
		{
			my%a=split(/\x00/,getvalue("a${i}${_}_$b",'shdr'));
			$a+=1*$a{zcnt}
		}
	}
	return $a
}


        Встроенная процедура parsepage разработана специально для данного примера и реализует установку дополнительных ключей в список int, содержащих:
        — $menudefault, выпадающие меню для выбора активного языка и профиля отображаемого ресурса, при этом изменение языка или профиля автоматически отправляет запрос на применение изменений (с использованием JavaScript);
        — $headertable, верхнюю таблицу прямого доступа к разделам сайта; список разделов задается записью sample_headertable;
        — $footertable, нижнюю таблицу прямого доступа к разделам сайта; список разделов задается записью sample_footertable.
        Кроме того, модифицируется ключ $title.
        Процедура parsepage ничего не возвращает, поэтому в ее месторасположение не будет записан никакой текст. Однако она устанавливает в глобальный список int новые значения и изменяет уже существующие, и в дальнейшем эти значения могут быть использованы другими компонентами, а также интерполированы в самом ресурсе.


sub parsepage
{
  require "${pathcgi}zx1.cgi";
  $int{menudefault}=Zebra::optselect('l" onchange="mainmenu.submit();return false',
      $ulocale,@locales,@alocales);
  $int{menudefault}.=Zebra::optselect('f" onchange="mainmenu.submit();return false',
      $uprofile,@profiles,@aprofiles);
  $int{menudefault}.=zs_childpars('l','f','go');

  $pat{headertable}=(split(/\x00/,zs_getinil('pat_headertable')))[0];
  $pat{footertable}=(split(/\x00/,zs_getinil('pat_footertable')))[0];

  if($int{title}){$int{title}.=" &#151; $int{sitename}"}else{$int{title}=$int{sitename}}
  return '';
}


        Запись sample_headertable определяет верхнюю таблицу ссылок прямого доступа к разделам сайта. Для динамического изменения цвета фона клеток таблицы применяется подпрограмма bgc на JavaScript.


<table width="100%" border="0" cellpadding="2" cellspacing="1">
<tr width="100%">
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="http://www.wtg.ru/">WTG</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="http://www.wtg.ru/zebra/input/">Документация</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="http://www.wtg.ru/zebra/register/">Регистрация</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="http://www.wtg.ru/forum/support/">Поддержка</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="http://www.wtg.ru/forum/zebra/">Форум</a></td>
</tr>
<tr width="100%">
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="$dircgi/index.cgi${otherresource}$langprof">Начало</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="$dircgi/zs.cgi${otherresource}p=zebra/input$langprof">Документация</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="$dircgi/zf.cgi${otherresource}$langprof">Форум</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="$dircgi/${current}p=$page&search=1$langprof">Поиск</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="$dircgi/ze.cgi${otherresource}">Администрация</a></td>
</tr>
</table>


        Запись sample_footertable определяет нижнюю (сокращенную) таблицу ссылок прямого доступа к разделам сайта. Для динамического изменения цвета фона клеток таблицы применяется подпрограмма bgc на JavaScript.


<table width="100%" border="0" cellpadding="2" cellspacing="1">
<tr width="100%">
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="http://www.wtg.ru/">WTG</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="http://www.wtg.ru/zebra/input/">Документация</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="http://www.wtg.ru/zebra/register/">Регистрация</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="http://www.wtg.ru/forum/support/">Поддержка</a></td>
  <td class="linktable" width="20%" align="center"
      onmouseover="bgc(this,c1)" onmouseout="bgc(this,c3)"><a
      href="http://www.wtg.ru/forum/zebra/">Форум</a></td>
</tr>
</table>


        Ключ $langprof везде по обычным ссылкам позволяет унаследовать значения выбранных языка и профиля, если они были изменены.

        3. Черновое выполнение задачи

        Минимально требуемые действия — сохранить перечисленные ресурсы в указанные разделы и запросить у Zebra главную страницу:
http://www.yourhost.com/cgi-bin/zs.cgi?p=index
Поскольку ресурс index является ресурсом по умолчанию, он же будет возвращен при запросах:
        http://www.yourhost.com/cgi-bin/zs.cgi
        http://www.yourhost.com/cgi-bin/zs.cgi?index

        Итак, мы получили некую страницу, в которой вместо изначальных $begbody, $endbody и определенных в них ключей внесены уже сами значения этих ключей и результаты выполнения процедур. Если страница отображается коряво, проверьте, все ли верно вы сделали.
        Далее на основе приведенного примера можно разработать собственный навороченный сайт.

<< FAQ Руководство по API >>