Техническое задание на работы на сайте (блоге)

Доброго времени суток, читатели блога Мои тараканы.

Техническое заданиеСегодняшним постом хочу убить сразу нескольких зайцев. Во-первых, в этом посте мне удается соединить сразу несколько черновиков,  не опубликованных лишь потому, что они были, скорее,  заметками, а не полноценными статьями. Во-вторых, данный пост принимает участие в конкурсе, который проходит в блоге http://mojwp.ru. Задача конкурса — составить ТЗ (техническое задание) для своего сайта. В качестве приза победитель получит выполнение своего технического задания.

Моё «техническое задание» получилось очень объемным, поэтому я составил краткое содержание:

1. Техническое задание на создание и вёрстку шаблона сайта. (на стадии завершения)
2. Техническое задание на подгонку нового шаблона. (в процессе выполнения)
3. Тех. задание на работы по ускорению сайта. (выполнение запланировано на ближайшее время)

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

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

Обратился как-то ко мне один человек с просьбой помочь с его сайтом на WordPress. Из первых строк у меня сложилось впечатление, что мне пишет или ребёнок, или пенсионер. Сайт, который мне показали, только подтвердил мои убеждения. Сайт был на столько безобразен, что мне даже не хочется давать на него ссылку.

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

Так вот, Игорь, так звали заказчика, требовал от меня того, чего сам не понимал, и мне самому приходилось предлагать решение самых простых задач и объяснять значение самых элементарных вещей. Всё приходилось выпытывать «с утюгом», просто капец!!!

К чему это я всё говорю. Существуют ГОСТы на выполнение различных работ, у каждой студии есть свои правила оформления технического задания. Так вот, данный пост можно воспринимать как пример оформления моего технического задания.

1. Техническое задание на разработку дизайна и вёрстку шаблона сайта

Задача: нужно нарисовать шаблон для сайта на WordPress и потом его сверстать.  Дизайн и вёрстка  шаблона должны быть уникальными. Код шаблона  должен соответствовать стандарту HTML5 (быть полностью валидным),  в дизайне должны использоваться элементы WEB 2.0 (простота, простая навигация, чёткий логотип, яркие цвета, 3d эффекты, градиенты, оригинальные иконки).

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

1.1. Хедер

Структура хедера должна остаться прежней — верхнее навигационное меню, нижнее навигационное меню, между ними сама шапка — слева логотип, справа нужно оставить свободное место, чтобы в будущем там можно было разместить банер. Кнопочки подписки и соц. сетей (rss, подписка по почте, twitter, Google+, VK) перемещаются к нижнему навигационному меню с правой стороны.

Блок кнопок соц,сетей

Иконки при наведении должны плавно увеличиваться за счет свойства HTML 5 transition  (иконки прилагаются).

1.2. Сайдбар

Удаляем из-за  ненадобности  громоздкую форму подписки на обновления блога (напоминаю, теперь она  перемещается к иконкам соц. сетей в навигационное меню).

Выджеты, которые есть, разделяем по типу и объединяем в два — «записи» и «комментарии» .  Виджеты должны состоять из вкладок-табов: записи — «популярное по просмотрам» , «последние записи», «рубрики», комментарии — «последние», «самые активные», «комментируемое». Примеры можно увидеть здесь и здесь. Табы должны выглядеть как в первом примере — видны только иконки, заголовок вкладки виден только тогда, когда она открыта (иконки прилагаются).

Так должен выглядеть виджет комментариев

Во всех виджетах (кроме вкладки «рубрики») должны выводиться миниатюры постов или аватары комментаторов.

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

Динамически выводимый сайдбар

1.3. Зона контента

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

1.3.2. Нужно сделать так, чтобы если в тексте поста не будет использоваться тег <more>,  то текст анонса, выводимый на главной странице, обрезается автоматически на определенном количестве слов.

1.3.3. Включить поддержку миниатюр для поста. Миниатюры в обычном положении должны быть немного повёрнуты против часовой стрелки, при наведении они должны принимать нормальное положение.

Миниатюра

1.3.4. Заголовок статьи заключаем в тег <h2>,  при наведении цвет заголовка должен плавно меняться с голубого на оранжевый.

Заголовок H2

Подзаголовки <h3> черного цвета, но заглавная буква должна быть немного больше и красного цвета.

Заголовок H3

1.3.5. Скопировать «шорт коды» со старой темы и вынести кнопочки для их использования  в редактор.

1.4. Комментарии 

Комментарии должны иметь древовидную структуру.

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

Форма  комментирования должна быть более красочной. Комментарии должны проверяться на валидность на стороне клиента (свойство HTML5 required), то есть если комментатор не заполнит обязательное для заполнения поле, то должно появиться соответствующее сообщение.

В новой теме, как и в старой, должны использоваться всплывающие правила комментирования.

2. Техническое задание на подгонку нового шаблона

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

2.1. Сразу было замечено, что некорректно работают плагины WP-Polls и SyntaxHighlighter Evolved (проблема решена).

2.2. В анонсы статей из рубрик почему-то  попадает надпись «Tweet»,  создаваемая плагином TweetMeme Retweet Button, но в анонсах на главной и следующих страницах ее нет и не должно быть.

2.3. Виджет Последние комментаторы пропускает неодобренные комментарии и комментарии автора, чего не должно быть. Иногда в месте,  где обрезается текст комментария, появляются крякозябры, явно не соответствующие кодировке UTF-8.

Это то, что было замечено сразу, возможно,  что-то ещё работает не так,  как надо. И здесь мне нужно обратиться к тем, кто читает эти строки.

Дорогие читатели «Моих тараканов», если вы заметили какие-либо недостатки в работе моего блога — пожалуйста, отпишитесь в комментариях. Приму любую критику, чем больше косяков обнаружится, тем лучше.

3. Тех. задание на выполнение работ по ускорению сайта.

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

3.1. Отключение ненужных плагинов.

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

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

Akismet — лучший способ защитить ваш блог от спама в комментариях и обратных ссылках, входит в комплект WordPress.
All in One SEO Pack — самый известный SEO плагин.
Aprove only russian comments — не пропускает комментарии, не содержащие текста на русском языке.
Broken Link Checker — проверяет блог на наличие битых ссылок.
Dagon Design Sitemap Generator — генерирует страницу «Карта сайта» для посетителей блога.
Efficient Related Posts — выводит список постов из одной рубрики.
Get Recent Comments — выводит виджет с последними комментариями в сайдбаре.
Google XML Sitemaps — генерирует XML карту сайта.
MaxSite Russian Date — меняет окончание в датах на русском языке: вместо «20 сентябрь» будет «20 сентября»
NoFollow Free — делает ссылки комментаторов открытыми  для индексации поисковыми машинами.
P3 (Plugin Performance Profiler) —  указывает какие плагины   насколько нагружают блог.
Russify Comments Number — обеспечивает нормальное отображение окончания слова «комментарий» — то есть, «2 комментария», «5 комментариев» и так далее.
RusToLat — транслитерация русских символов URL в английские.
Simple Tags — плагин для удобного добавления меток к посту.
Subscribe to Comments Reloaded — позволяет посетителям блога подписаться на уведомления о новых комментариях к посту.
SyntaxHighlighter Evolved — плагин предназначен для подсветки синтаксиса в коде.
Theme Authenticity Checker (TAC) — помогает найти ссылки, прописанные непосредственно в коде шаблона.
TweetMeme Retweet Button —  добавляет  всем известную  кнопочку «твитнуть» к постам.
WordPress Database Backup — обеспечивает резервное копирование базы данных.
WordPress Popular Posts — выводит популярные записи, имеет множество настроек.
WordPress Share LockerTM — плагин работает по принципу «заплати лайком». Его действие вы можете наблюдать на этой странице.
WP-Polls — плагин для создания опросов в блоге.
WP-PostRatings — позволяет создать собственную систему оценки статей.
WP No External Links — маскирует исходящие ссылки под внутренние.
WP Show IDs — плагин работает непосредственно в админке блога — он указывает какой id имеет запись, страница, комментарий и т.д.
ВП Типограф Лайт — обработка кавычек, тире, спецсимволов вне безопасных блоков (pre, code, samp, textarea, script), правка кавычек внутри code, кликабельные ссылки в комментариях.

Проверка плагином P3 (Plugin Performance Profiler) показала следующую ситуацию:

Результат проверки плагином P3 (Plugin Performance Profiler)

При загрузке страницы 63% времени уходит на работу плагинов, нужно постараться сократить это время до минимума.

3.2. Разгон блога с помощью PageSpeed

Как я выше говорил, что сайты с высокой скоростью загрузки в глазах поисковиков, в частности Гугла, выглядят более привлекательно, чем сайты с низкой скоростью загрузки. Специально для того, чтобы вебмастера могли ускорить работу своих сайтов, Гугл создал специальный инструмент — расширение для бруазера ГуглХром PageSpeed. Задача вебмастера — исправить ошибки, указанные PageSpeed.

Проверка инструментом PageSpeed

После анализа  главная страница набрала 87 единиц из 100, и 85 единиц внутренняя. Сто единиц набрать очень сложно, но есть к чему стремиться. В общем, нужно решить  проблемы, которые имеют высокий и средний приоритет.

3.3. Исправляем невалидный  код внутренних страниц

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

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

Ну кажется всё!  Вот такое техническое задание я себе составил. Буду закругляться, а то по ходу написания статьи придумываю себе всё новые и новые задания:).

Техническое задание для сайта написано в рамках конкурса, организованного сайтом mojwp.ru (Настройка и уникализация сайтов на WordPress), а также «Автомобильным журналом Extrim-авто» extrimavto.net.

Чтобы узнавать о новых статьях в блоге, предлагаю подписаться на обновления по RSS или по почте! Также Вы можете следить за моим щебетом в Твиттере.

С уважением, Мышак Пётр.