Textpattern: больше, чем просто блог. Часть 4

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

Все качественные изменения будут отражаться на сайте самым прямым образом. Я не гарантирую, что расскажу вам обо всех этапах «тюнинга», и возможно, что кое-что останется моей маленькой тайной :). В любом случае, не воспринимайте написанное в «Моем Интернете» как четкую инструкцию — это только пример того, как можно реализовать ту или иную идею. Будет не очень интересно, если на просторах Сети появится точно такой же сайт, но с другими материалами…

Часть вторая. Верстка форм и страниц (продолжение)

В прошлый раз мы разобрались с формами, теперь приступаем к верстке страниц. Что такое страница в понятии TXP? В чем отличие от форм? Формы — это «лоскутки», из которых составлены страницы, а страницы — структура страниц секции (простите за каламбур). Проще говоря, это XHTML-оболочка раздела.

Заглянув в админ-панель «моего» Textpattern’а, можно увидеть несколько страниц: about (информация об авторе), contact (контактная форма предназначена для отправки писем), error_default («страница 404») и default (главная страница).

Как вы помните, страницу default мы уже сверстали. Отличие ее от остальных в том, что вместо формы content у каждой страницы уникальное содержание. Оно будет располагаться между формами «head» и «sidebar» (в этом легко убедиться, посмотрев на следующие примеры кода). Вообще-то, если в форму content добавить различные условия, результат получится тот же. Но это не очень показательно. Я хочу рассказать вам о создании каждой отдельно взятой страницы.

Страница about

Приведу реальные статистические данные. На моем сайте, по данным сервиса Google Analytics, станица About по частоте перехода занимает третье место. Если убрать из виду корневой раздел «/» (он открывается по умолчанию) — даже второе.

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

<txp:output_form form='head' />
  <div class="content">
  <h3>О себе</h3>
  <div class="auth"><img src="/images/author.jpg" alt="Я" /></div>
  <p>абзац</p>
  <p>абзац</p>
  <p>абзац</p>
  </div> 
  <txp:output_form form='sidebar' />
  <txp:output_form form="top" />
  <txp:output_form form="footer" />

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

Текстовая информация здесь — это несколько абзацев и ссылка в раздел Contact.

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

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

Страница contact

Страница для обратной связи с автором определенно необходима, несмотря даже на более быстрые средстава коммуникации — например, ICQ. У этой страницы имеется как минимум два плюса. Первый заключается в том, что е-мейл уже не нужно маскировать от спаммеров. При заполнении формы нужно обязательно отметить, что письмо не является рекламным — это уже является минимальной преградой для спам-бота. Есть и другие способы защиты, для Textpattern’а написан не один полезный плагин, основанный на той же captcha.

Captcha — защита от автоматической регистрации, спама в комментариях. Перед отправкой данных формы необходимо ввести в текстовое поле символы, указанные на изображении, которое каждый раз генерируется заново. На самом деле не так все и сложно :).

Второй плюс формы для обратной связи — забота о посетителях сайта. Человек заполняет удобную форму и отправляет письмо. Ему не нужно искать e-mail автора, открывать почтовый клиент или заходить на службу доставки писем.

Поскольку Textpattern не предусматривает формы для отправки писем, мы воспользуеся двумя плагинами, которые нам помогут. Называются они zem_contact_reborn и zem_contact_lang.

<txp:zem_contact to="ваш_email" subject="Вопросы с сайта">
  <p><txp:zem_contact_text label="Name" size="40" /></p>
  <p><txp:zem_contact_email size="40" /></p>
  <p><txp:zem_contact_text label="Site" size="40" default="http://" required="no"/></p>
  <p><txp:zem_contact_textarea label="Сообщение" rows="10" cols="50" /></p>
  <p><txp:zem_contact_checkbox label="Это не СПАМ!" required="yes" /><br /></p>
  <p><txp:zem_contact_serverinfo name="REMOTE_ADDR" label="IP" /> <txp:zem_contact_submit label="Отправка" />
  </p>
  </txp:zem_contact>

Плагин zem_contact прост в настройке. Скачайте любой шаблон к Textpattern и отыщите форму или страницу contact. Оттуда не представляется сложным заимствовать код и заменить в нем e-mail на ваш (см. первую строку кода). С помощью zem_contact можно настроить формы для заполнения, причем текстовых полей может быть любое количество. Они могут быть как обязательными («имя», «e-mail»), так и не обязательными («cайт») для заполнения. На это указывает специальный атрибут required=“no”.

Страница error_default

<txp:output_form form='head' />
  <div id="title">
  <h2></h2></div>
  <div class="content">
  <h3>Ошибка! <em>[<txp:error_status />]</em></h3>
  <p><txp:error_message /> </p>
  <p>Вернитесь на <a rel="nofollow" href="главная_страница_вашего_сайта">главную страницу</a> или попробуйте задействовать поиск...</p>
  </div>
  <txp:output_form form='sidebar' />
  <txp:output_form form="top" />
  <txp:output_form form="footer" />

Ошибка 404 — только одна из выдаваемых сервером и которая имеет место быть на вашем сайте, однако она — самая распространенная. Появление «страницы 404» не всегда зависит от «правильности» сайта или стабильности хостинга, скорее — от посетителя. Наша цель — вывести этого самого посетителя на «путь истинный», то есть, не только указать код и причину ошибки, но и сослаться на главную страницу, поиск, карту сайта. Помимо того, страница должна быть оформлена в стиле сайта. Очень интересная подборка сайтов с оригинальными 404-страницами здесь. Можно пойти нестандартным путем — например, «оживить» страницу javascript’ом. Получается весьма занятно:

Линки в помощь

A List Apart — редкообновляющийся, и, тем не менее, один из фундаментальных ресурсов о веб-дизайне
Design for Masters — сайт с переводом статей с зарубежных источников (в том числе и A List Apart)
Smashing Magazine — блог для веб-дизайнеров. Регулярные подборки интересных работ
Veerle.duoh.com — сайт бельгийской дизайнерши Вирл Питерс. Есть на что посмотреть :)

***

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