WTG Zebra 2.00 — Разработка сайта

WTG Zebra 2.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 и определенных в них ключей внесены уже сами значения этих ключей и результаты выполнения процедур. Если страница отображается коряво, проверьте, все ли верно вы сделали.
Далее на основе приведенного примера можно разработать собственный навороченный сайт. www.web-prioritet.ru <> купить квартиру площадь ильича <> У нас большой выбор новинок и распродажа стоков купить сноуборд оборудования.

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

Затрачено: 0 сек.
Процессор: 0 wallclock secs ( 0.04 usr + 0.00 sys = 0.04 CPU).
Дата: 4 февраля 2012, суббота, 14:58:54.
IP-адрес: 38.107.179.239.
Запрос со страницы: unknown.
Возвращено: 24938 байт(а).