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

В этой статье:

• Вместо вступления
• Как это пишется и на чём работает
• Шапка сайта
  • Главное меню страницы
  • Левая фиксированная часть шапки
    • Кнопка вызова вертикального главного меню (aka "бутерброд")
      • Дополнительные функции "бутерброда"
    • Логотип сайта – это тоже кнопка :)
      • Перезагрузка страницы со сбросом кэша
    • Название сайта
  • Правая фиксированная часть шапки
    • Кнопка текущего пользователя (с вложенным меню)
    • Кнопка вызова формы ввода поискового запроса и запуска поиска
    • Кнопка перехода к файловому архиву сайта (совмещена с облачным и файловым загрузчиками)
• Кнопки управления функциями, связанными с контентом страницы
  • Кнопка включения соцбара (связь каждой конкретной страницы с социальными сетями)
  • Кнопка включения режима отображения для людей с ограниченными возможностями (aka "глазик")
    • Вызов окна "прямой линии" оперативной связи с администрацией сайта и Проекта
    • Отображение окна общего мини-чата (только для пользователей сайта)
  • Кнопка "перемотки" в начало страницы
  • Кнопка файлового загрузчика (для комментариев)
  • Кнопка управления материалом (панель модератора aka "шестерёнка")
• Автоматическая обработка ссылок основного контента _{^{(в отдельной статье)}}
  • Дополнительные возможности автоматической обработки ссылок
    • Отправка личного сообщения конкретному пользователю
    • Поиск в архиве для "битых" ссылок на Chrome WebStore
    • Загрузка файлов из архивов Проекта по прямым ссылкам
    • Вызов внешнего просмотрщика исходного кода
• Боковое меню страницы (правый вертикальный блок, aka "боковуха")
  • Блок авторизации на сайте
  • Мини-чат aka "чатик"
  • Мозаика Проекта
• Подвал страницы
  • Левая часть подвала
    • Панель инструментов сайта
  • Правая часть подвала
    • Счётчик статистики
• Использование клавиатуры
  • Escape = универсальный "отменитель" и "закрыватель"
  • Использование клавиатуры при работе над материалами _{^{(в отдельной статье)}}
• Подытожим…
• От автора

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

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

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

Итак, сначала немного о том…

Как это пишется и на чём работает

Все дополнительные штатные функции наших сайтов написаны с использованием стандартного языка JavaScript, всё стилевое оформление сделано только с помощью явно заданных CSS. Мы не используем на наших сайтах никакие сторонние JS/CSS библиотеки, кроме стандартной JS‑библиотеки JQuery, являющейся частью шаблонного движка. Это позволяет обеспечить гарантированное выполнение всех функций наших сайтов практически во всех более‑менее используемых на текущий момент браузерах (кроме, наверное, древностей типа "старого осла")).

Мы проверяем весь основной функционал на работоспособность в достаточно* старых версиях хром‑браузеров (CR49) и в огнелисе на Gecko (Firefox52ESR). Эти версии установлены нами как минимальный барьер "вхождения" на сайты Проекта, в них (и тем более – в более новых версиях браузеров) всё это должно работать без проблем.

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

Попутно об экранном разрешении – мы проверяем работу интерфейса в диапазоне разрешений с шириной экрана от 480‑640рх (и даже ниже) до 1280‑1366рх. На более высоких разрешениях экрана всё должно работать точно также. Более низкие разрешения мы не рассматриваем, как неактуальные.

Пока на наших сайтах нет мобильной версии (PDA), это есть "в планах", всё будет со временем реализовано.

Теперь перейдём к конкретным элементам интерфейса страниц. Самое первое – это…

Шапка сайта

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

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

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

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

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

Верхняя часть шапки (её фиксированная часть) с кнопками управления видна всегда, отображение основного меню и дополнительных элементов управления динамически меняется при скролле страницы (и/или при наведении курсора мыши на эти элементы).

Основным, наиболее часто используемым элементом страницы, является…

Главное меню страницы

В общем-то, всё стандартно. Для примера приведено главное меню одного из авторских сайтов – Get CRX RU. На других сайтах (в том числе – на этом) меню выглядит и работает аналогично. Предназначено для быстрой навигации по основным (под)разделам сайта. Конкретные пункты меню относительно одинаковы, но зависят также и от содержимого конкретных сайтов. Положение и высота "плашки" меню – всегда фиксированные, задано общим стилем сайта.

Индикатором вложенности меню являются "стрелочки" (вниз – на верхнем уровне, вправо – на вложенных пунктах). Глубина вложения конкретных пунктов (как и их название) никак не ограничивается, может меняться и будет зависеть только от текущей потребности.

Навигация интуитивно понятна, вложенные подменю автоматически раскрываются при наведении на "родительский" элемент меню. Выбор конкретного пункта и переходы по нему выполняются как обычно – наведением на пункт и щелчком левой кнопки мыши (далее и везде – если написано просто "щелчок", без указания кнопки, подразумевается именно  "щелчок ЛКМ") на нём.

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

Отметим, что в фиксированной части шапки (левой) также есть полная копия этого меню – в вертикальной ориентации. Сделано с "застрелом на будущее" для мобильной версии сайтов и для экранов с низким разрешением (или при ширине окна браузера менее 960рх).

Теперь рассмотрим фиксированные части шапки.

Левая фиксированная часть шапки

В левой фиксированной части шапки расположены следующие кнопки управления:

Кнопка вызова вертикального главного меню (aka "бутерброд")

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

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

Закрыть вертикальное меню можно тремя способами:

1. Нажатием клавиши <Escape>.
2. Щёлчком по верхней "навигационной" строчке меню ("рыжий" текст, рис.1 ниже).
3. Щелчком по свободному полю страницы (затемняется при вызове вертикального меню).

Навигация по вертикальному меню немного отличается от навигации по горизонтальному. Текущий активный пункт меню (под курсором мыши) подсвечивается зелёным цветом. Переходы во вложенные подменю выполняются по щелчку на свободном от надписи месте (рис.3 ниже). Возврат на предыдущий уровень – щелчок по отдельному "навигационному" пункту (рис.2 ниже). Переходы по выбранным пунктам – наведение курсора + щелчок на надписи (текст пункта при этом подсвечен зелёным, рис.4 ниже).

Дополнительные функции "бутерброда"

Пока доступна единственная функция:

1. ALT + щелчок ПКМ = вызов* в попап-окне "карты сайта", полностью дублирующей структуру меню сайта.
   Навигация – все ссылки "карты" открываются в отдельных (новых) вкладках, окно попапа можно закрыть по клавише <Escape>. В самом попапе "карту" уже нельзя вызвать – во избежание бесконечной рекурсии.)

* Фича работает только для залогиненного пользователя (к "бутерброду" при этом добавляется соответствующая подсказка). Для "анонимуса" карта доступна только через соответствующие пункты в главном меню – например, на авторских сайтах это "Структура разделов" (подпункт меню "О проекте"). На центральном сайте Проекта соответствует пункту "Ресурсы".

Логотип сайта – это тоже кнопка :)

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

На текущий момент доступны следующие* действия:

1. Щелчок = "широкоформатный" вид страницы, скрывается "боковуха", повторный щелчок = нормальный вид (работает как переключатель). Зачем сделали – в таком ("широком") режиме удобнее читать (или готовить к публикации во встроенном редакторе) объёмные материалы "с картинками" – например, эту статью. :)
   Примечание: у этой фичи есть её клавиатурный аналог…
2. CTRL + ALT + щелчок = перезагрузка страницы со сбросом кэша (полная принудительная очистка кэша страницы, включая все стили, скрипты и т.д.). Зачем надо – мы пока достаточно часто меняем контент, стили и скрипты, а также периодически меняем дизайн. Поэтому и добавлена эта фича, чтоб "не залипало" старое оформление и содержимое (просто F5 не всегда помогает, а CTRL+F5 не везде работает). Кстати, и при обновлении страниц с добавленными "каментами" это тоже удобно. В общем, если вы прочитали в комметариях к этой статье про какое-то очередное обновление функционала – смело жмите эту комбинацию, чтобы обновить стили и скрипты до текущей версии.)
3. CTRL + SHIFT + щелчок = открытие в новой вкладке страницы официального твиттера Проекта. Зачем надо – оперативный доступ с любого нашего сайта к общим главным новостям Проекта. И кроме того – если что-то где-то не работает или "централизовано" отключено – там будет вывешено соответствующее сообщение. Подробнее про наш "свитер" читаем в обсуждении этого аккаунта.
4. ALT + SHIFT + щелчок = открытие в новой вкладке страницы официального Живого Журнала Проекта. Также, как и предыдущая комбинация (для Twitter), даёт оперативный доступ с любого нашего сайта к общим главным новостям Проекта и служит для оповещения участников Проекта о каких-либо проблемах с сайтами и т.п.. Подробнее про нашу "жэжэшку" читаем в обсуждении этого аккаунта.
5. Щелчок ПКМ = вызов справочного модального окна по всем текущим функциям этой лого-кнопки.
   Окно справки закрывается по <Escape>, щелчком по "затемняющему" оверлею или "крестиком".)

* Пока сделали вызов доступных функций только по щелчку ЛКМ, когда "закончатся" комбинации с "обычными" клавишами управления (CTRL, ALT, SHIFT) – перейдём к комбинациям с ПКМ, дабл‑клику, лонг‑клику… ну и т.д.… :)

Название сайта

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

К наведению курсора мыши добавлен определённый "фефект" деформации текста. Он, кстати, тоже может быть заменён, если "надоест". :)

С левой частью и главной менюшкой на этом (пока) всё, как придумаем чего-то новое – напишем в этой статье, так что заглядывайте сюда периодически.

Теперь скажем о том, зачем нужна…

Правая фиксированная часть шапки

Тоже видна всегда, функции – достаточно "прозрачны" для понимания. На всех сайтах Проекта в этой части размещена кнопка логина/логаута (с соответствующими фичами) и кнопка вызова поисковой формы. На авторских сайтах здесь могут быть ещё и дополнительные кнопки (об этом чуть ниже). Связанные с кнопками формы (или менюшки) изначально скрыты, они отображаются при щелчке по соответствующей кнопке.

В целом, для правого блока шапки действуют общие правила:

1. Вызов функции (меню) и всё управление = щелчок только ЛКМ (но это – только пока, сами понимаете)).
2. Щелчок по более правой (относительно) кнопке скрывает меню более левой (перекрытие с выключением ранее открытой менюшки).
3. Эффект при наведении курсора – белый фон под значком кнопки, цвет иконки инвертируется (кроме аватара).
4. Повторный щелчок по любой кнопке = скрывает вызванную менюшку (у кнопки поиска есть отличия, см. далее).
5. Нажатие клавиши <Escape> = тоже самое, что и п.4 – скрывает вызванное меню, возвращает "всё как было".)

Итак, в правом фиксированном блоке шапки есть…

Кнопка текущего пользователя (с вложенным меню)

Самая крайняя правая кнопка. Для залогиненного (после авторизации) юзера здесь отображается его аватарка – если она у него есть. Если аватарки нет – на кнопке отображается "мужик зелёного цвета".) В любом случае – при наведении мыша на кнопку – есть подсказка с именем (ником) текущего пользователя.

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

У Анонимуса тут всегда "белый мужик" (или "чёрный", при маусовере). В меню два пункта – "Регистрация" и "Вход", назначение, думаем, понятно. Для незалогиненного юзера, скорее всего, всё так и останется, ничего особо умного сюда и не добавишь.

Левее "кнопки-авки" в правом фиксированном блоке шапки расположена…

Кнопка вызова формы ввода поискового запроса и запуска поиска

Тоже всё понятно – щелчок = вызов поля ввода поискового запроса, поиск осуществляется только по сайту. Повторный щелчок по этой кнопке (при НЕпустом запросе!) = запуск поиска с выдачей результата в текущей вкладке. При пустом поле запроса повторное нажатие на эту кнопку закрывает форму. Можно закрыть форму и нажатием клавиши <Escape>, при этом поле ввода запроса автоматически очищается.

Для открытия отдельного окна (вкладки) вывода результатов (или для перехода сразу к расширенному поиску) по кнопке запуска поиска следует щёлкнуть с зажатой клавишей CTRL (подсказка есть в самом поле ввода запроса, см. рисунок). При этом, если поле ввода запроса содержит текст, новая вкладка откроется с результатами поиска по этому запросу.

На большинстве (в том числе – авторских) сайтов Проекта левее кнопки поиска по умолчанию расположена…

Кнопка перехода к файловому архиву сайта (совмещена с облачным загрузчиком)

Самая левая кнопка в правом фиксированном блоке шапки (есть на большинстве сайтов Проекта, в том числе – на авторских сайтах). При нажатии выдаёт кликабельный "баннер" со ссылкой на переход в файловый архив сайта или на страницу загрузки текущей версии авторского расширения (на картинке показан "баннер" сайта "Песочницы"). Повторное нажатие на кнопку скрывает "баннер". Нажатие на "баннер" = переход в раздел загрузок текущего сайта. Конкретные ссылки выставляются по усмотрению автора и могут (вполне естественно) отличаться для разных авторских сайтов.

Кроме этого, на всех сайтах, где есть эта кнопка (в том числе – в "Песочнице" и на авторских сайтах), она совмещена с вызовом облачного файлового загрузчика для загрузки больших (но необязательно) файлов во внешнее облако. Эта функция доступна только для авторизованных пользователей сайта и позволяет загрузить в облачное хранилище файлы размером до 5GB (бесплатная разовая загрузка).

Подробнее о сервисе облачного загрузчика читаем в статье "Использование файлового загрузчика". Вызов виджета загрузчика производится щелчком по этой кнопке ПКМ с зажатой клавишей ALT (во фрейме на текущей странице) или ПКМ с зажатыми клавишами ALT и CTRL (виджет откроется в новом окне).

Кроме облачного загрузчика, на всех сайтах, где есть эта кнопка, она совмещена ещё и с вызовом формы специального файлового загрузчика для хранения файлов с действительно прямыми ссылками (без промежуточных редиректов, без ожидания загрузки, одноразовых ключей и прочих "типовых сложностей"). Эта функция также доступна только для авторизованных пользователей сайта и позволяет загружать во внешнее хранилище файлы размером до 1GiB со сроками хранения от 10 до 360 дней.

Подробнее о сервисе файлового загрузчика читаем в статье "Использование файлового загрузчика". Вызов формы загрузчика производится щелчком по той же кнопке ПКМ с зажатой клавишей CTRL, блок выбора файла открывается слева от кнопки, сама загрузка всегда выполняется в новой вкладке.

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

С шапкой на этом всё. В области основного контента на всех страницах сайта есть…

Кнопки управления функциями, связанными с контентом страницы

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

Пока таких кнопок три: "включатель соцбара", "режим для слабовидящих" и "перемотка в начало страницы". Кроме этих кнопок, связанных непосредственно с контентом страницы, пока мы не планировали ещё что-то прикручивать, чтобы особо "не захламлять" сам контент.)

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

Ниже описаны только "нестандартные" элементы управления, добавленные нами к движку сайта.

Кнопка включения соцбара (связь каждой конкретной страницы с социальными сетями)

Расположена в левой верхней части страницы на уровне главного меню. Предназначена для включения отображения панели и доступа к изначально скрытому "соцбару" (левая картинка), предоставляющему доступ к кнопкам социальных сетей (ВКонтакте, Одноглазклассники, МойМир, Facebook, Twitter и другие), а также к кнопке добавления страницы в закладки браузера (самая верхняя кнопка соцбара, "звёздочка").

Эта кнопка не отключается* (как и сам "соцбар").
*…но мы всё же, в порядке эксперимента, скрыли её вывод для отдельных категорий пользователей (авторы, модераторы и, конечно же, администраторы, чего не сделаешь для "себя любимого"!)). Зачем такая "дискриминация" – исходя из нашего опыта работы, этим категориям юзеров "лайкать" особо некогда, а ссылки на нужные материалы они всегда могут отправить коллегам другими способами.)

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

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

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

Следующей фиксированной кнопкой, расположенной в области контента, является…

Кнопка включения режима отображения для людей с ограниченными возможностями

Такой режим на наших сайтах пока один – это "версия для слабовидящих". Кнопка расположена справа под шапкой и выглядит как "глазик в кружочке". При наведении курсора отображается крупная подсказка. Щелчок на этой кнопке отображает отдельную панель управления внешним видом страницы ("глазик" при этом автоматически скрывается). При этом доступно изменение размера шрифта (несколько фиксированных значений, на выбор), цветового оформления фона, включение или отключение вывода изображений, а также кнопка отключения этого режима.

Кнопка "глазика" неотключаемая, положение "глазика" фиксированное, может перекрывать частично "боковуху", но особо это мешать не должно. Положение панели* управления режимом – также фиксированное, над "подвалом", поверх контента страницы. Режим запоминается автоматически, при этом действует после обновления страницы и сохраняется при переходах на другие страницы. Если он стал не нужен – выключаем соответствующим пунктом в панели режима.

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

Во избежание претензий – сама панель управления этим режимом и все её функции взяты из стандартного шаблона движка и нами (практически) не дорабатывались. Если же эта фича будет действительно востребована – можно будет в дальнейшем и довести до ума этот "ночной кошмар дизайнера".)

К "глазику" добавлена штатная "нестандартная" функция – вызов окна отправки* личного сообщения официальным представителям команды Проекта – модераторам, администраторам или (на авторских сайтах) авторам-владельцам сайтов. Вызов окна происходит, как видно из подсказки на рисунке, по щелчку ПКМ с зажатой клавишей ALT. Фича работает на всех сайтах Проекта, конкретные адресаты ЛС установлены для каждого сайта отдельно. После выбора в оверлейной "всплывашке" требуемого адресата (щелчок на "должности" получателя ЛС), в новой вкладке открывается форма отправки личного сообщения.

Также к "глазику" добавлена ещё одна "нестандартная" функция – отображение скрытого окна* общего мини-чата. Вызов окна происходит, как видно из подсказки на рисунке, по щелчку ПКМ с зажатой клавишей CTRL. Фича работает на всех сайтах Проекта, подробности обсуждались здесь.

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

Ещё один "добавленный" элемент управления контентом – это…

Кнопка "перемотки" в начало страницы

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

Попутно: под этой кнопкой, непосредственно в "подвале" страницы, расположена стандартная "рекламная" ссылка на сайт хостера Проекта (баннер "uCoz Services" на рисунке). Этот элемент также неотключаемый* и обязателен для любых "бесплатных" сайтов (подробнее об этом мы рассказывали в материале по Поддержке Проекта).

* Да, чисто технически, его можно "отломать", но мы не будем этого делать из благодарности к компании uCoz, дающей нам возможность размещения сайтов нашего Проекта на бесплатной и бессрочной основе.

Ещё один "нестандартный" элемент страниц наших сайтов – это…

Кнопка файлового загрузчика (для комментариев)

Эта кнопка присутствует только на страницах с возможностью комментирования основного материала и относится непосредственно к форме ввода комментария. Отображается (доступна) только для авторизованных пользователей И только если автор материала разрешил комментирование материала (когда есть сама форма ввода комментария).

Кнопка расположена непосредственно под блоком формы ввода комментария, правее кнопки "Отправить". По умолчанию – это просто обычная кнопка с надписью "Загрузчик", при нажатии на которую происходит её замена на подгружаемую стандартную форму флэш-загрузчика (см. рисунок выше).

Основное назначение загрузчика – оперативная загрузка необходимых файлов во временное* хранилище и размещение ссылок на этот файл непосредственно в вашем комментарии.

* Загрузка файлов при этом производится на общую для всех сайтов нашего Проекта "файлопомойку". При необходимости отдельные файлы из этой "помойки" перемещаются администраторами в соответствующие разделы конкретных сайтов Проекта (на постоянное хранение).

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

Других "нестандартных" кнопок, расположенных в области основного контента сайта, мы пока не размещали.

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

Тем не менее, акцентируем ваше внимание на такой важной функции, как…

Кнопка управления материалом (панель модератора aka "шестерёнка")

Штатная "фича" движка сайтов. Применяется для управления каждым конкретным материалом. Доступна только авторизованным пользователям, статус которых позволяет им управлять конкретными видами материалов. Для примера показана кнопка с возможностями управления основным материалом страницы для статуса "Администратор", у конкретных групп пользователей доступные опции управления могут отличаться. В свёрнутом виде – "шестерёнка" в правом верхнем углу каждого конкретного материала. При щелчке по этой кнопке разворачивается (сворачивается) меню инструментов управления материалом (это же происходит при маусовере/маусауте над значком).

Кнопка даёт возможность вызова редактора материалов (наиболее часто используемая функция), а также позволяет быстро установить необходимые теги материала (если, например, автор не указал их при размещении материала).

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

На этом по кнопкам области контента (содержательной части страниц) пока всё.

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

Далее расскажем о "нестандартных" элементах, входящих в…

Боковое меню страницы (правый вертикальный блок)

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

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

В верхней части "боковухи" размещён…

Блок авторизации на сайте

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

Ещё одним "подшаманенным" элементом стандартной "боковухи" является…

Мини-чат aka "чатик" :)

Стандартный блок движка, использует для выполнение функций возможности стандартного модуля движка "Мини‑чат". Длина "смс-ки": 200 символов.

Этот блок доступен только для авторизованных пользователей, пробегающие анонимусы "недостойны" просматривать содержимое "светских бесед Их Величеств Пользователей Проекта". :))

Кроме собственно поддержки "онлайн-беседы" между зарегистрированными пользователями сайта, этот блок предназначен для размещения различной оперативной информации для сведения всех участников Проекта (например, здесь можно разместить ссылку на новый материал или краткое объявление о важных событиях на сайте).

Кроме кнопок управления и поля самого сообщения, в блоке доступны два дополнительных поля: "Флажок" и "Прочее". Флажок предполагается применять в качестве маркера сообщения (что-то вроде категории конкретных мессаджей, если угодно), например, во флажке можно указать "Важно!", "Просьба ко всем" и т.п.. "Прочее" – оно и есть прочее.) Тут можно указать любую дополнительную информацию к сообщению, например – ссылку, связанную с конкретным сообщением.

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

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

И, наконец, самый "интересный" блок "боковухи" – это…

Мозаика Проекта

Отсутствует в стандартном шаблоне, считается "фирменной фишкой" сайтов нашего Проекта – такой способ реализации (ссылки‑кнопки в виде набора иконок без текстового описания) практически очень редко встречается на других сайтах (именно в таком виде и именно размещаемый в "боковухе" сайта).

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

Кнопки‑ссылки на аддоны, которые пока ещё не имеют собственных отдельных сайтов в нашем Проекте, сделаны более "блёклыми" (прозрачнее). Соответственно, если такие сайты будут сделаны, кнопка, понятно, будет изменена. Эффекты при наведении, возможно, тоже будут меняться, но пока мы остановились на варианте с "полным оборотом".

Этот блок доступен всегда и для всех пользователей (ну, "фирма" всё же, не просто так)), предназначен для быстрой навигации между отдельными сайтами, входящими в Проект (в основном – авторскими). Общее назначение блока примерно аналогично некой "ленте" доступных программных продуктов (у нас, в частности, браузерных аддонов), размещаемых на одной общей площадке (и вовсе не обязательно на одном сайте).

Как работает: щелчок на любой иконке = переход на конкретный авторский сайт (в новой вкладке).

…Капитан Очевидность на последней фразе умер от зависти…))
Кстати, это не так уж и очевидно – сами понимаете, мы ведь потом можем и ещё что‑то "прикрутить" к этим кнопкам, запросто.) В общем, пока работает так, как написано – щелчок ЛКМ = новая вкладка.

С "боковухой" на этом пока всё, теперь скажем про…

Подвал страницы

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

Левая часть подвала

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

Кроме копирайтов и ссылок, в подвале также размещена…

Панель инструментов сайта

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

Вызывается щелчком по "белой шестерёнке" на левом краю подвала (рисунок выше). Сворачивается щелчком по стрелке влево (на правом краю "полосы" панели, рисунок ниже).

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

Правая часть подвала

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

Но, как говориться, "тут есть нюансик", зависящий от статуса пользователя – это…

Счётчик статистики

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

* Собственно, так и делают многие сайтостроители, ведь счётчик нужен достаточно редко и "обычным юзерам" практически не интересен. Тем более, что часть (продвинутых)) пользователей его не увидит никогда – во всех известных "рекламорезках" можно убрать вывод этих стандартных элементов статистики. И именно поэтому мы и ограничили "свободный" доступ к этому элементу, не показывая его всем пользователям.)

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

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

Счётчик, используемый на наших сайтах, пока единственный и обеспечивается только штатными функциями сервиса хостера. Пока мы не видим необходимости в использовании подобных статистических инструментов от других "брэндов счетоводства" типа Rambler Top-100, LiveInternet и других. Однако, если это будет действительно оправдано, мы не исключаем возможности их применения в будущем. В любом случае – от наших счётчиков не будет "рябить в глазах" и они не будут мешать нормальному просмотру страниц.

И, наконец, расскажем о некоторых "нестандартных" особенностях при…

Использование клавиатуры

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

Все клавиатурные функции срабатывают при отпускании клавиш (событие keyup).

Escape = универсальный "отменитель" и "закрыватель"

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

В частности, по нажатию <Escape> закрываются:

• Окно справки (описание текущих доступных действий) по кнопке-логотипу, вызванное по щелчку ПКМ на нём.
• Диалог "Помощника", вызванный по нажатию логотипа uCoz в блоке входа на сайт (первый блок в "боковухе").
• Оверлейное окно входа, вызванное при нажатии ссылок "Вход" (для незалогиненного пользователя).
• Окно ответа на комментарий, вызванное при нажатии кнопки "Ответить" (содержимое стирается).
• Окно сообщения о результате сохранения материала в визуальном редакторе (по кнопке "Сохранить").
• Все прочие модальные окна стандартного движка, перекрывающие контент страницы.
• Левое боковое вертикальное меню сайта (по сути – это тоже модальное окно).
• Все открытые диалоги и подменю правого фиксированного блока шапки.

Смотрим также: Использование клавиатуры при работе над материалами.

Подытожим…

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

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

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

Напоследок хотелось бы сказать ещё пару слов…

От автора

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

Если честно – ваш покорный слуга "да ни в жисть" не взялся бы за написание этого "юзер-мануала", ну вот не люблю я подробно документировать "всю эту байду", что поделаешь…) С другой стороны, это действительно необходимо было сделать хотя бы потому, что процесс дорабатывания наших сайтов будет продолжаться и дальше, и чем больше "наворотов" мы добавим, тем сложнее будет потом во всём этом разбираться нашим пользователям.

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

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

Скажу больше, наш Бармалеич является инициатором большинства "нестандартов", добавленных к интерфейсу страниц наших сайтов, за что ему также мой личный большущий "решпект и уважуха".)

В общем, если вам понравилась не только эта статья, но и сами "нестандартные штуки", вы тоже можете "спасибнуть" ему, "нажав во-о-он там, внизу, последнюю кнопочку"…:)

На этом всё, спасибо за внимание и потраченное время.

С уважением, Скриптолог.

^{См.также: Рабочий вариант этой статьи в "Песочнице".}