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

Инструменты, которые нам понадобятся

Adobe Dreamweaver любой не очень старой (скажем, шестой или ниже) и не обязательно самой новой версии (CS3, коей я и пользуюсь). Можно брать и менее «навороченный» NVU или другие, бесплатные, инструменты.

GsNote Lite, Notepad++, Intype) – текстовые редакторы с подсветкой синтаксиса. Скажем Notepad’у или WordPad’у решительное «Нет!» :).

Adobe Photoshop), GIMP (для Linux), Paint.NET и все что угодно, любых версий, но вот Photoshop все же предпочтительнее, поскольку более всего «заточен» для работы с Web.

«Платный» не синоним слову «профессиональный», но пользователи со стажем замечают, что работать в платной программе (в trial-режиме) зачастую куда удобнее, нежели во freeware-. Впрочем, привыкнуть можно ко всему, а по отношению к Linux возражений и вовсе нет. GIMP, со скидкой на бесплатность, – полноценная альтернатива Photoshop, и сомневаться в этом, глядя на примеры выполненных в нем работ, не приходится.

Textpattern: Оформление

В предыдущем номере мы разобрали лишь раздел настроек, и тот мельком. Затрагивать остальные настройки особой нужды пока нет, поскольку они никак не влияют на отображении стартовой страницы сайта, да еще и в тестовом режиме… Более всего нас сейчас интересует раздел «Оформление», в нем мы «застрянем» надолго. Начнем с первой вкладки.

Раздел Секции: другими словами – рубрики. Деление содержания на секции – наиболее общее в Textpattern’е. Каждой секции можно присвоить отдельный стиль, свое содержание, как то ссылки, изображения, файлы и т. д. Например, “Ilyuha.org.ua/contact” или “Ilyuha.org.ua/downloads”. Здесь «contact» и «downloads» — секции. Во-вторых, можно выбрать, задействовать ли информацию раздела в RSS и поиске, какую страницу использовать по умолчанию. Секция – понятие наиболее «абстрактное». Она объединяет в себе стиль и структуру. За структуру отвечает страница (это следующий раздел).

Раздел Страницы: структура секции. В общем, это простая веб-страница без оформления, «скелет», который впоследствии облагораживается за счет стилевой оболочки (CSS + графика). БОльшая часть кода может быть сокращена до минимума за счет тэгов TXP и форм (см. следующий раздел). В результате же, после парсинга страницы TXP, сервер выдает браузеру обычный HTML.

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

  1. <h2 class=‘entry-title’><txp:permlink><txp:title /></txp:permlink></h2> 
  2. <p class=‘meta’>
  3. Опубликовано <abbr title="<txp:posted gmt=‘1’
  4. format="%Y-%m-%dT%H:%M:%SZ" />" class="datetime published"><txp:posted /></abbr> 
  5. // Категория <txp:jnm_categories title="1" link="1"/> 
  6. <txp:ran_tags_if_exists> 
  7. <txp:ran_tags_list_single /> 
  8. </txp:ran_tags_if_exists> 
  9. </p>

Язык тэгов TXP также имеет XML’эшную структуру, что делает его удобочитаемым и удоборедактируемым. На сайте www.textbook.com вы можете скачать мануал по этому языку, вот только вряд ли вам захочется сидеть и заучивать эти тэги. Данный справочник лучше использовать разве что как «шпору». Сложно себе представить человека, изучившего этот язык от и до… Впрочем, это я себя к таким не отношу :)

Последний раздел — Стили. Обычно к различным шаблонам TXP прилагается один файл – style.css или вроде этого. Им можно оформить весь сайт или только определенные разделы. Скажем, если вы хотите менять стиль в зависимости от поры года или к одному из разделов применить другой стиль. Css-стиль можно вынести как отдельный файл, а можно загрузить его в Textpattern, в базу данных, чтобы редактировать его непосредственно в браузере. Кстати, в движке есть свой CSS-редактор, правда, не настолько удобный, чтобы заменить какой-нибудь GsNote.

Дизайн главной страницы. Нам эскиз не нужен

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

Расшифровка:

02 – шапка сайта, логотип;
03 – меню;
04 – основное содержание, несущее смысловую нагрузку :) ;
05 – боковая панель;
06 – top-бар, нижняя панель;
07 – подвал, копирайт

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

Мы не будем делать макет страницы. Зачем усложнять задачу переносом дизайна? Будем верстать сразу :). Если мы работаем с дизайном, состоящим из нескольких колонок (multi-column layout), наш код может и должен состоять из div-блоков. Каждый div – это область страницы, имеющая свой ID и свое имя.

Впоследствии, при создании CSS-файла, каждому div’у мы назначаем свой стиль и размеры. Да, еще раз напоминаю, что сайт мы верстаем в связке XHTML + CSS. Остановимся подробнее на этих понятиях.

XHTML (EXtensible HyperText Markup Language) — расширенный язык разметки гипертекста, имеющий более четкую структуру кода, нежели HTML. В этом он схож с XML, на котором, собственно, и базируется. Другими словами, XHTML — это HTML, записанный в соответствии с синтаксическими правилами XML. На мой взгляд, такая структуризация кода делает его более наглядной, поэтому ошибки наглядны и находятся быстро. В этом вы убедитесь на практике сами.

DTD (The Document Type Definition) – указание типа документа, описание расположенных в нем атрибутов, символов и элементов. Эта строка слишком важна, чтобы ее пропустить. У каждого стандарта — свои правила, хотя ранние версии HTML и поздние XHTML во многом схожи. Если не указывать DTD, велика вероятность того, что браузер неправильно воспримет версию документа и выдаст неправильно воспринятый код. В принципе, валидация (проверка правильности кода) – вещь не обязательная, но очень желательная, и когда ошибки в коде все же имеются, лучше их исправить и тем самым избежать конфликтов с «правильными» браузерами.

CSS – оформление сайта, точнее, элементов, содержащихся в XHTML-документе и на странице. Если в случае с HTML, в табличной верстке мы все свойства указывали в самой таблице, то в случае с DIV мы лишь указываем очередность и, если один элемент находится в другом, их взаиморасположение. Оформление – это не только шрифты и цвет фона, но еще и размер DIV-элементов, форм, кнопок. Тема CSS будет раскрыта позднее.

Страница default

Сначала мы сверстаем первую – главную – страницу: это будут ссылки на формы и некоторые тэги (коих немного). Итак, заходим в раздел Оформление – Страницы. Открываем страницу default и заполняем е как описано далее. Комментарии обозначены как <!— комментарий —> , переписывать их необязательно :).

  1. <!— шапка сайта —>
  2. <txp:output_form form=‘head’ />
  3. <!— содержание —>
  4. <txp:output_form form=‘content’ />
  5. <!— боковая панель —>
  6. <txp:output_form form=‘sidebar’ />
  7. <!— нижняя панель —>
  8. <txp:output_form form=‘top’ />
  9. <!— подвал —>
  10. <txp:output_form form="footer" />

Имеет ли значение последовательность тэгов? Да. Дело в том, что все эти тэги обрабатываются и выводят HTML-код, для которого характерен строгий порядок кода. Страница парсится сверху вниз. Также вам следует помнить, что синтаксис XHTML чувствителен к регистру. Нужно сказать, браузеры нечувствительны ко многим «нестрогим» ошибкам кода XHTML, но все равно верстать нужно правильно, не так ли? Нет гарантии, что конкретный браузер корректно проигнорирует конкретную ошибку. А браузер игнорирует ошибки лишь потому, что его разработчики не видят смысла делать «придирчивый» к коду браузер.

Совет. На каждой странице, будь она главная или какая-либо другая, имеются постоянные тэги. У нас есть вариант: вставить либо в текущую страницу, либо в одну из форм. Вопрос в лаконичности. Если какая-либо форма будет повторятся на другой странице, лучше поместить в нее и повторяющиеся тэги, дабы лишний раз не «загромождать» код.

Форма head

Удобнее всего полностью оформить с помощью форм первую страницу, а затем на ее основе изменять остальные — так будет нагляднее.
Начнем с формы head. Для создания новой формы нажмите на ссылку «Создать новую…» и снизу введите название и тип – по желанию.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <!— Заголовок страницы —>
  6. <title><txp:page_title /></title>
  7. <!— Импорт стилевого файла, расположенного в директории template относительно корня сайта —>
  8. <style type="text/css" media="screen">@import "<txp:site_url />template/style.css";</style>
  9. <!— Значок сайта, должен располагаться в корне сайта и иметь название favicon.ico —>
  10. <link rel="shortcut icon" href="favicon.ico" />
  11. <!— Ссылки на RSS-/Atom- ленты —>
  12. <txp:feed_link flavor="atom" format="link" label="Atom" />
  13. <txp:feed_link flavor="rss" format="link" label="RSS" />
  14. </head>
  15. <div class="wrapper_bg">
  16. <div class="wrapper">
  17. <div class="header">
  18. </div>

Для начала мы прописываем стандарт документа, DOCTYPE, под который мы пишем код, делаем HEAD, заголовок, импортортируем стилевой файл (его выносим наружу, для удобства редактирования), указываем путь к иконке сайта, делаем ссылки на ленты, закрываем HEAD. Div-классы wrapper_bg и wrapper нужны для растягивания сайта, его фиксации. Это предотвратит проблемы некорректного отображения в «правильных» браузерах вроде MS Internet Explorer 7. Header – это область логотипа.

Форма content

  1. <div id="title"> 
  2. <h2>Любая вводная информация</h2></div>
  3. <div class="content"> 
  4. <txp:if_section name="tag"> 
  5. <txp:tru_tags_handler /> 
  6. <txp:else /> 
  7. <txp:article limit="4" /> 
  8. </txp:if_section> 
  9. </div>

За вывод статей отвечает тэг <txp:article limit=”5” />, где 5 – это количество статей на страницу. <txp:tru_tags_handler /> — тэг, кторый обрабатывается при условии открытия раздела «tag». Он реализует вывод «модного»облака тэгов.

Форма sidebar

  1. <div class="rightbar"> 
  2. <h3>Поиск</h3> 
  3. <div id="searchform"><form method="get" id="comment-form" action="<txp:site_url />" method="get"> 
  4. <div> 
  5. <input type="search" name="s" class="keyword" id="s" size="12" onfocus="this.value=’‘" value="" /> 
  6. </div> 
  7. </form> 
  8. <h3>Облако тэгов</h3> 
  9. <div class="in"> 
  10. <txp:tru_tags_cloud /> 
  11. <h3>Последние комментарии</h3> 
  12. <txp:wet_recent_comments limit="5" showcomment="yes" maxwords="30" striptags="yes" wraptag="ul" break="li" class="in" /> 
  13. </div> 
  14. </div> 
  15. </div> 
  16. <div class="clear"></div> 
  17. </div>

Боковая панель у меня отображается в каждом разделе сайта. Мой сайдбар будет содержать еще и вставки javascript, необходимые для работы фреймворка Mootols, который, в свою очередь, обеспечивает работу плагина cbs_live_search. AJAX, видите ли! Кстати, к фреймворкам и Аяксу мы еще вернемся обязательно, но уже ближе к завершению работы над сайтом :).

Форма top

  1. <div class="footer">
  2. <div class="inner">
  3. <div class="links">
  4. <h5>Ссылки</h5>
  5. <txp:linklist break="li" wraptag="ul" />
  6. </div>
  7. </div>
  8. </div> 

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

Форма footer

  1. <div class="foot">
  2. <ul class="notes">
  3. &copy; 2007, название сайта
  4. <li><a href="http://validator.w3.org/check/referer">XHTML</a>
  5. <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
  6. </div>
  7. </div>
  8. </body>
  9. </html> 

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

<!— Runtime: 0,0244 —>
<!— Query time: 0,001105 —>
<!— Queries: 13 —>
<!— Memory: no info available —>

Чем меньше запросов (queries) к базе данных – тем лучше. Дополнительную, зачастую неоправданную нагрузку на сервер создают плагины TXP.

Implant. Стартовая страница сайта: быть или не быть?

По отношению к Textpattern, сплэш-страница автономна почти что полностью. Ее нам нужно сверстать как обычную веб-страницу с использованием XHTML и CSS, а затем переименовать в индексируемое сервером Apache имя. Чтобы не пугать, скажу, что чаще всего это имена index.*, где * — расширение php, html, htm и т. п. Не важно, что содержание файла не будет соответствовать расширению, лишь бы это название было не index.php, а что-то другое, альтернативное (ибо index.php – это стартовая страница TXP). Для нас важно, чтобы по вводу адреса сайта выдавалось не сообщение «404», а именно splash-страница. На следующем этапе мы рисуем заставку, splash, или макет и с помощью HTML вставляем ссылку на index.php, стартовую страницу textpattern.

Честно говоря, раньше у меня было категоричное отношение к стартовой странице (splash page) сайта: ну зачем она нужна, только для красоты? Мнение по этому поводу может быть совершенно различным. Если взглянуть на вопрос глазами посетителя, то чего он ждет после ввода адреса вашего сайта в адресную строку? Некоторой выгоды – прежде всего. На сайте известном дизайнерском ресурсе «Smashing Magazine» приводится 12 аргументов использования стартовой страницы. Исходя из этой полезной информации, сделаем выводы, что можно разместить на стартовой странице. Лучше всего:

  • изложить концепцию вашего ресурса (направленность, рубрики),
  • предложить возможность выбора языка интерфейса сайта
  • предупредить о наличии flash-элементов, звукового фона
  • предложить несколько видов отображения для различных устройств (PDA, широкоформатные дисплеи) и браузеров (поскольку некоторые «старые» браузеры не поддерживают альфа-прозрачность, по-разному обрабатывают и выводят (парсят) код и т. д.)

В иных целях или «просто так» использование splash вряд ли рационально, особенно для информационных сайтов. Зачем, если эта страница не несет почти что никакой информации?..

Правила XHTML, которые следует знать

Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, <img> или <br>) должны иметь на конце / (например, <br />).

Булевы атрибуты записываются в развёрнутой форме. Например, следует писать <option selected="selected"> или <td nowrap="nowrap">. 

Все значения атрибутов обязательно должны быть заключены в двойные кавычки. Имена тегов и атрибутов должны быть записаны строчными буквами (например, <img alt="" /> вместо <IMG ALT="" />). XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться &lt; и &amp; соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попытаться понять, что хотел сказать автор.

Кодировкой по умолчанию является UTF-8

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

Textpattern Resources -– многочисленные дополнения, модификации, советы и секреты
TextBook International – своеобразная подшивка документации TXP на множестве языков, справочник синтаксиса
www.textgarden.org и www.textplates.com – коллекция готовых стилей и шаблонов для TXP
Markup Validation Service — один из самых известных онлайн-валидаторов