Собственный дизайн

Lasto's Abductor, Похититель буковок Lasto's Abductor, Похититель буковок

Контент похищаю,
Лью в красивую чашу -
Все пьют в упоеньи.

Собственный дизайн.

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

Разработчик никак не ограничивает Ваше право на сотворение, продажу или распространение своих вариантов дизайна для данного движка.

Составляющие дизайна:

Обратите внимание на фолдеры в структуре дистрибутива, выделенные красным цветом:

Корневая папка скрипта 755
css 755
default.css 644 ascii
data 755
tpl 755
default 755
design.php 644 ascii
templates.txt 644 ascii
i 755
default 755

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

В комплект поставки включён дизайн с именем default, поэтому составляющие дизайна поименованы именно так (все эти элементы на схеме окрашены в зелёный цвет).

Добавление нового дизайна заключается не в переделке дефолтного под себя (оставьте его в покое, и никогда не трогайте), а в подливке альтернативного варианта в папочки, выделенные красным цветом.

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

Корневая папка скрипта 755
css 755
default.css 644 ascii
alternative.css 644 ascii
data 755
tpl 755
default 755
design.php 644 ascii
templates.txt 644 ascii
alternative 755
design.php 644 ascii
templates.txt 644 ascii
i 755
default 755
alternative 755

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

Обратите внимание, что имя дизайна всегда пишется в одно слово, мелкими латинскими буквами. Ибо имя дизайна одновременно является названием папок и файлов, имена которых в юниксообразных серверных операционных системах не могут быть какими попало. Кроме того, имя дизайна будет вноситься в URL таких элементов, как файл стилей и элементы графики - и там тоже нельзя писать что попало. Не будете соблюдать данную рекомендацию - получите гарантированные проблемы.

О шаблонах разнообразных блоков.

В данном движке нет кучи файлов для инклюда, отвечающих за дизайн разных элементов. Есть единственный файл templates.txt, лишённый каких бы то ни было PHP операторов - внутри только HTML, понятный любому дизайнеру. И комментарии, что тот или иной блок означает.

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

Чтобы не плутать в его внутренностях, разбираясь в комментариях, либо проповедуя научный метод тыка, дизайнеру проще прописать в этом файле такую вот странную на первый взгляд конструкцию:

<!-- html_comments_killer start -->no<!-- html_comments_killer end -->

Эта запись отменит удаление комментариев из исходников HTML кода документов, после чего, смотря в исходник, и видя там контейнерные комментарии с каким-то HTML кодом внутри, вида <!-- xxx start -->...<!-- xxx end -->, дизайнер по самим контейнерам (тому, что стоит на месте xxx) очень легко поймёт, какой именно блок из файла templates.txt тут задействован.

Потому что те же самые контейнерные комментарии окаймляют шаблоны различных блоков в файле templates.txt, устанавливая тем самым однозначное соответствие.

По окончании работы над дизайном вставку в файл шаблонов лучше оттуда убрать.
Не нужны в коде страниц никому не интересные HTML комментарии.

Где переключается дизайн?

В настройках админки Интерфейс имеется пункт "Шаблон дизайна". Там будут перечислены все доступные шаблоны дизайна, наблюдаемые в файловой структуре скрипта.

Варианты шаблона дизайна.

После выбора шаблона дизайна пользователь может конкретизировать и вариант шаблона, если таковые доступны в рамках этого шаблона. Так, для дефолтного шаблона дизайна есть два варианта дизайна - колонка навигации слева, и колонка навигации справа. Их можно выбирать админкой.

Чтобы админка понимала, какие варианты дизайна доступны в рамках выбранного шаблона, файл шаблона дизайна design.php сформатирован соответствующим образом:

   switch ($_s['settings']['designtype']) {
      case 'name1': $content=<<<template
         Шаблон первого варианта дизайна.
template;
      break;
 
      case 'name2': $content=<<<template
         Шаблон второго варианта дизайна.
template;
      break;
 
      case 'name3':
      default: $content=<<<template
         Шаблон третьего варианта дизайна.
template;
      break;
   }

Нетрудно видеть, что тут постулирована поддержка трёх вариантов дизайна для одного шаблона (name1, name2, name3), имена которых через именно такого типа запись передадутся в админку, и она станет способна переключать их через простую выпадающую форму.

При этом число вариантов дизайна может быть любым, и в случае единственного варианта дизайна писать код следует так:

   switch ($_s['settings']['designtype']) {
      case 'lane':
      default: $content=<<<template
         Шаблон единственного варианта дизайна.
template;
      break;
   }

Обратите внимание, что в переключатель вариантов дизайна внедрён ещё и ключ default, приписанный к одному из вариантов (всё равно к какому, но в данном случае к последнему). Это на тот случай, если пользователь до упора невнимателен, и не способен прочитать в админке ясные и понятные слова о том, как именно переключается вариант дизайна в рамках одного шаблона.

В помощь дизайнеру:

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

Будет ими пользоваться дизайнер в своих разработках или нет, это уже на его усмотрение.

Так как все рассматриваемые далее сервисы организованы на JavaScript, и принципиально не могут быть реализованы иначе, сделаны три простые вещи:

  1. Сервисы оформлены как самостоятельные процедуры, и сведены в один файл samurai.js
    Этот файл живёт в папке графики текущего дизайна.
    "Текущий" - это тот, что выбран в админке в качестве рабочего.

  2. Подключение .js файла в HEAD секции шаблона дизайна чуток нестандартное:

    <script type="text/javascript">
       var turl="$turl";
       function samurai(){}
    </script>
    <script type="text/javascript" src="$turl/i/abductor/samurai.js"></script>

    Некоторая вроде бы несуразность, когда сначала задаётся пустая функция, а потом подгружается файл с кодом этой функции, глупостью не является. Это решение позволяет застраховаться от ошибок Джавы и соответствующих предупреждений браузера, если вдруг инклюд .js файла по какой-либо причине не случится (плохой коннект, сошедший с ума файерволл, и т.п).

  3. Все теги, окаймляющие функционал сервисов, прописываются не в явном виде в шаблон дизайна, где и происходит обращение к сервисам, а в .js файл, причём эти теги генерируются строго из-под Джавы.

    Причина проста.

    Если у пользователя нет поддержки JavaScript на борту его браузера, то он не способен воспользоваться сервисами, базирующимися на JavaScript. Серфер просто не увидит элементов, выводимых сервисами на экран. А потому и наводить форматирование вокруг пустого места абсолютно незачем.

    Дизайнеру, после того, как он позаимствовал файл samurai.js у дефолтного варианта дизайна, необходимо залезть в этот файл, и откорректировать окаймляющие теги сервисов под своё форматирование. Которое, естественно, может не совпадать с дефолтом.

1. Переводчик сайта на шесть языков.

В коде файла design.php определена переменная:

$u=urlencode('http://'.gethost($turl).$_SERVER['REQUEST_URI']);

Далее она подставляется в функцию на Джаве:

<script type="text/javascript">samurai("translate","$u");</script>

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

В какие конкретно теги это обёрнуто, можно посмотреть в соответствующем файле .js, о котором было сказано выше. Естественно, оборачивающие теги можно и нужно менять под свою задачу, и писать в тот самый .js файл.

2. Запоминаемый регулятор размера буковок.

Зрение у всех разное, как и используемые девайсы. То, что хорошо для ноутбука, слишком мелко для смартфона. И поэтому имеет смысл держать на сайте тот или иной регулятор размера буковок. Желательно с памятью, чтобы при переходе между страницами сайта буковки всех документов были любимого размера.

На уровне кода, упоминаемого в файле дизайна design.php, это выглядит так:

<script type="text/javascript">samurai("go",16);</script>

Минимальный размер шрифта 11, максимальный тот, что указан вторым параметром (16 или иное число пикселей). Соответственно, нарисуется 6 кнопочек. По оформлению должно получиться что-то такое (или иное, если дизайнер употребит свои стили кнопочек):

Так как данный блок целиком на Джаве, при неподдержке оной браузером блок исчезает со всех страниц, и не создаёт недоумения.

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

   <div id="font_resizer">
      $content
   </div>

3. Покраска бакграунда в произвольный цвет.

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

Тоже своего рода юзабилити.

В шаблоне дизайн сайта данный функционал вызывается так:

<script type="text/javascript">samurai("bg","");</script>

Выглядит тоже непритязательно (кликабельно):

Возможные значения цветов бакграунда и его начальное дефолтное значение задаются в коде файла samurai.js таким образом:

   var color=new Array(
      'F0FFF0',
      'F0FFFF',
      'FFF8DC',
      'F8F8FF',
      'E5E5E5',
      'EEEEEE',
      'F7F8F9'
   );
   var bgcolor=memory(color[6],' bg_color=');

Массив с кодами цветов может содержать любое число элементов, в соответствии с чем меняется и число кнопочек, отображаемых на страницах сайта. Причём кнопочки с цветами бакграунда прорисовываются справа налево (что равнозначно инвертированию массива).

Начальное значение цвета бакграунда (оно будет по дефолту) задано в последней строке, в данном случае как 6 элемент массива. Понимая, что в программинге элементы массива нумеруются, начиная с ноля, в данном случае это последний элемент 'F7F8F9'.

Не забывайте, что номер дефолтного цвета бакграунда не может лежать за пределами массива. Какую попало цифру туда писать не надо.

Инициация сервисов.

В самом конце шаблона дизайн сайта есть запись:

<script type="text/javascript">samurai("stop","");</script>

Эта строка обязательна, она активирует сервисы, которые дизайнер решил встроить в сайт.

Более никаких тонкостей в построении дизайнов под данный движок не имеется, и квалифицированный дизайнер без проблем скомпилирует графику, шаблон и файл стилей в нужную структуру файлов.

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