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

Техническое заданиеСегодняшним постом хочу убить сразу нескольких зайцев. Во-первых, в этом посте мне удается соединить сразу несколько черновиков,  не опубликованных лишь потому, что они были, скорее,  заметками, а не полноценными статьями. Во-вторых, данный пост принимает участие в конкурсе, который проходит в блоге 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

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

Заголовок 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 или по почте! Также Вы можете следить за моим щебетом в Твиттере.

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

Похожие записи:

Понравилась статья? Расскажи друзьям, автор очень старался:
56 комментариев на:
“ТЗ (техническое задание) на выполнение работ на сайте”
  • Итоги конкурса Техническое задание для сайта.
  • Итоги конкурсов и розыгрыша | Конкурсы для блогеров

  • Ну, Петр, ты загнул. Получилось хорошо. Твой новый дизайн мне понравился. Вместо пары плагинов от спама Akismet и Aprove only russian comments можно юзать Antispam Bee, вроде как там есть функция не пропускать комменты на «чужом языке»

    Пару плагинов взял на заметку.

    ТЗ в целом хорошее получилось, а вот отслеживать косяки как-то лень. Хотя нашел один. Вверху, где кнопки социалок, что ромбиком синие — некрасиво раскрываются при наведении на них (смотрю в мозиле). Они резко увеличиваются, потом разворачиваются от центра вправо-влево. Мне кается, что логичнее было бы увеличивать их от текущего размера до небольшого увеличения примерно 110-120%%

    Для dofollow, на мой взгляд плагин использовать не стоит, лучше в коде пару строк поменять

    • Пётр говорит:

      Спасибо, Antispam Bee попробую. Да, кстати, по поводу кнопок ты уже не первый говорил, возьму на заметку, хотя лично мне нравится. По поводу плагина Nofollow Free, даже не знаю — у него много настроек, не уверен что смогу заменить всё кодом.


      • Раз у плагина Nofollow Free полно настроек, то может быть, я про банальный дуфолоу писал.

        Еще такой момент, не смог поставить себе плагин P3 (Plugin Performance Profiler), чтобы протестить нагрузку своих плагинов на блог 🙁 Может версия вордпресса нужна самая последняя или еще что?

      • Пётр говорит:

        Уменьшил размер иконок. Действительно, так лучше смотрится. Хотя в Опере все-равно коряво выглядит.


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

    • Пётр говорит:

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


      • Зачем? Иной раз хочется кому-то ответить в комментах... а вдруг он написал месяц или даже год назад?

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

        • Пётр говорит:

          Я это зделал по другой причине. Со стартом акции «лучший комментатор месяца», некоторые, самые активные комментаторы, начали обсуждать старые посты и отвечать на прошлогодние комменты. Вот я и убрал вывод даты, чтобы переписка выглядела более естественно.


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

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

    • Пётр говорит:

      Про голосование я не парюсь — пусть желающие голосуют сколько влезет, если им так хочется 😉

      А вот по поводу лого — ты прав, нужно будет исправить.

    • Пётр говорит:

      Так, начинаю исправлять косяки по твоим советам. Коечто уже исправил. Логотип теперь в виде ссылки на главную страницу.


  • Еще про лого не написал. Подпись «фишки для создания...» выделена красным, на мой взгляд не очень удачное решение, периодически мне кажется, что это сообщение о какой-то служебной ошибке на сайте 🙁

    пойду покопаю дальше твой блог 🙂 надеюсь ты не против такой критики, я ведь могу докопаться очень глубоко :))

    • Пётр говорит:

      Конечно не против, я только за такую критику.

    • Пётр говорит:

      Исправил, но, лично мне не нравится, возможно придется обращаться к помощи дизайнера.


  • Добрался до блока «Перед отправкой ознакомтесь с правилами комментирования.»

    По первой я подумал, что Правила откроются на новой странице (хотя в ТЗ и видел, что написано «раскрывать под комментами»), поэтому приготовился уже открывать их в новом окне (средняя кнопка мышки).

    Возможно стоит видоизменить кнопку-картинку для раскрытия или текст изменить. А может даже раскрывать Правила при наведении курсора (т.е. по ховеру). А может даже по ховеру вывести надпись «РАСКРЫТЬ». Тогда точно будет однозначность процесса. Но, имхо, Раскрыть лучше писать не в хинте, а чуть приоткрыть этот блок и там надпись или изменить кнопку или изменить надпись «Перед отправкой ознакомтесь с правилами комментирования.» на «Раскрыть свод правил»... Идей много, возможно даже и не стоит над этим заморачиваться, но затуп у народа может возникнуть — у меня же возник 😉

    • Пётр говорит:

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


  • Нашел еще косяк. Слева от постов есть блок, где стоит месяц, количество комментов и еще какой-то непонятный значок (зачем он?). Если это служебный значок, для админа, то для паблика стоит его прятать

    Но главная проблема не в этом. В мозиле у меня месяц на зеленом фоне, а в опере на белом, что не позволяет видеть название месяца

    • Пётр говорит:

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


      • Касательно цветового оформления. В мозиле комменты то белые, то желтые, а в опере же все белые по фону.

        Так же было бы резонно выделять коммент админа (т.е. твой) как-то по особенному, всегда интересно в комментах наблюдать ответы Хозяина блога

        • Пётр говорит:

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


  • Петр, нашел такую страницу moi-tarakany.ru/comment-subscriptions

    И смутила меня следующая надпись

    «Комментариев пока нет, будьте первым.

    Комментарии отключены.»

    Для чего тогда первая строка, если вторая запрещает комменты? Скорее всего в шаблоне стоит прописать условие вывода первой надписи: если нельзя комментировать, то и выводить первую строку нет надобности

    • Пётр говорит:

      Знаю и про этот косяк, но в PHP мало разбираюсь. Над файлом coments.php буквально плясал с бубном. Может когда нибудь и разберусь с этой проблемой, но пока останется так.


      • Еще на этой странице есть такой косяк. Заголовок является ссылокй, но ведет на какую-то левую страницу, в результате 404.

        Вроде писал про это, но переписке не нашел, может только думал, что писал.

        Если повторился, то смело удаляй этот комментарий 🙂


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

    Перелазал почти весь твой сайт 🙂


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

    • Пётр говорит:

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


      • Ура, теперь я смогу оперативнее тебя «тыкать носом» :))

        Все, ноут садится, время позднее, пора мне спать

        Споки, утром еще косяков поищу... ты у меня на прицеле 😉

        • Пётр говорит:

          Ага, у тебя дома инет появился ;)? Интернет победил 🙂 ?


          • Так клиенты активировались, всем что-то надо, приходится вкалывать круглосуточно

    • Пётр говорит:

      Исправил, хотя, оказалось не всё так просто, как казалось с первого взгляда.


  • Петр, вот еще косяк обнаружился! Когда кто-то комментирует, то его коммент ожидает модерации и не показывается в общей ленте комментариев, а вот виджете «последние комментарии» он отображается!


  • Мой сайт [url=http://lifeonweb.ru]тут[url] [url]http://lifeonweb.ru[/url]. Комментарий для проверки — покажет ссылки в виджете или нет?


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

  • Пётр говорит:

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


  • Петр, заметил, что блок правил комментирования подкорректировал. Для пущей важности, при раскрытом своде правил логичнее написать «Свернуть свод правил». Или даже так «Я знакомился, со всем согласен, можно сворачивать» 🙂

  • Степан говорит:

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


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

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

    Не поленился и посчитал комментарии в ленте, получилось 43-44 :), а написано, что 46. Так что надо выявлять проблему.

    • Пётр говорит:

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

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


  • Я тут подумал, что у меня возможно страницу из кэша взял, т.к. при добавлении комментария все недостающие появились 😉

  • Татьяна говорит:

    Интересный и полезный материал. Ваш дизайн мне нравится.

    • Anton говорит:

      Согласен с Татьяной, материал очень нужный и полезный! Причем статья получилась очень информативная!

Добавить комментарий

Перед комментированием ознакомтесь с правилами комментирования
  • Все комментарии проходят ручнуюю модерацию, поэтому большая прозьба - НЕ СПАМИТЬ!!!
  • Подписывайтесь нормальными именами, а не "регистрация в Москве" или "Кондиционеры не дорого".
  • Ссылки на коммерческие сайты будут удалятся.
  • Оставляйте ссылку на главную страницу.
  • Оставляйте комментарии длинной не менее 100 символов. Исключения - диалоги и ответы на заданные вопросы.
Внимание! Один раз в неделю блог прходит проверку на наличие битых ссылок. Если ваш сайт в это время не был доступен, ссылка на него будет удалена!
За собой оставляю право редактировать и удалять комментарии, даже если они удовлетворяют вышепреведённый свод правил.