1. планування теми
2. Специфікація веб-сайту
3. Прототипи (Wireframes)
4. Ідентифікуємо елементи сторінки
5. Оптимізуйте ваші файли дизайну

Це перша частина перекладу статті відомого майстра створення сайтів на Drupal Emma Jane Hogbin
Сподіваюся, що вона буде вам корисна, і ви прочитаєте другу частину, переклад якої я опублікую відразу після того, як Емма її допише.

Основна проблема створення тем для Drupal для тих, хто робить це вперше полягає в тому, що теми складена з безлічі дрібних вузлів, блоків і елементів, що не дає можливість відразу відтворити потрібну картину, представлену на дизайну. Але в той же час, якщо ви вже натреновані в цьому питанні, то багато речей ви робите інтуїтивно, не звертаючи увагу на прості дрібниці які часто непідвладні недосвідченому верстальщику. Для того, щоб створення теми стало для вас усвідомленим, а в наслідку і інтуїтивним процесом, потрібно засвоїти п'ять простих принципів з яких варто починати створення тем для Drupal.

1. Веб-сторінки є набором елементів.
2. Для кожного елемента сторінки існує розмітка за замовчуванням.
3. Ваша тема повинна включати в себе тільки те, що ви хочете змінити в розмітці за замовчуванням уявлень встановлених вами модулів.
4. Базова теми забезпечує «кращу» розмітку за замовчуванням.
5. CSS grid-фреймворки роблять створення теми простіше, а розмітку її краще.

Просто, чи не так, питає Емма? Давайте тепер трохи ближче ознайомимося з кожним з її принципів.

Модулі Drupal створюють серію HTML фрагментів, які об'єднуються (або «рендарятся») в готові веб-сторінки. При створенні теми ви змінюєте розмітку і розміщення PHP змінних в файлах шаблону для зміни фрагментів веб-сторінок створених з Drupal. Кожен раз коли ми запитуємо сторінку сайту на Drupal, програмні функції генерують фрагменти HTML коду який збирається в цілу сторінку. Кожна пов'язана з темою функція відповідає за створення HTML з різних елементів сторінки або склейку фрагментів для створення цілої веб-сторінки.

Функції модулів відповідають за кожен біт HTML розмітки, яка відповідає даним поданням, а також надають набір інструментів для використання при створенні альтернативної розмітки для вашої теми.

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

Обсяг елементів сторінки Drupal може бути різним. Під час темізаціі ви можете мати справу як з одиничними елементами, такими як заголовок сторінки, так і з групами елементів, такими як регіон, який містить велику кількість блоків. Щоб досягти успіху в створенні тем для Drupal ви повинні «бачити» ці елементи в файлах дизайн і вміти пов'язувати їх з генеруються HTML фрагменти, які складають сторінку Drupal.

Для більш детального вивчення цього питання автор пропонує звернутися до одного з її навчальних матеріалів за адресою http://www.designtotheme.com/tutorials/seeing-drupal-template-variables

Основна робота в темізаціі для Drupal полягає в тому, щоб змінити розмітку подання будь-якого модуля під ту, яка задовольнить вимоги вашого дизайну. Добре написані модулі дозволяють досить легко змінити розмітку під потреби теми за допомогою файлів шаблонів (tpl.php). Теми можуть тільки переробляти висновок елемент елементи сторінок, створені модулями шляхом зміни HTML і CSS, вони не вводять нові дані в базу даних - це робота модуля.

Тема використовує файли шаблону для перевизначення фрагментів HTML який ви бачите на відображається сторінці. Кожен шаблон має дуже ускую специфічність і може змінитися тільки ті елементи сторінки, за які він відповідає. Це означає, що ви не можете змінити форматування для первинної навігації (primary links) через файл шаблону для виведення блоків. Також ви не зможете змінити розмітку вузлів (nodes) з файлу шаблону сторінки.

Тема Drupal подібна гирла річки (ось адже володіє Емма алегоріями 🙂): багато крихітних струмків впадають в річки, які впадають в океани. Риба і жаби і лілії мають доступ тільки до своїх струмків і кожен струмок є домом для різних наборів елементів сторінки. Це місце, де вони живуть. Але вода тече вниз за течією і гирло стає все ширше і ширше, і врешті-решт впадає в океан який і являє собою HTML-сторінку, яку бачить відвідувач сайту.

Як і в гирлі річки, наступна діаграма показує кілька структурних елементів сторінки впадають в океан, тобто відображаються на сторінці. Бачите, деякі елементи складаються з багатьох частин, а деякі ні? Знайдіть елемент «node» і рухайтеся за течією. Вожете ви рухаючись строго за течією (напрямок стрілок) дістатися до регіонів і блоків? Ні, ви не можете.

Коли ви створюєте теми ви повинні змінювати рівно стільки, скільки вам потрібно з показаного на ілюстрації. Ви хочете змінити тільки макет сторінки (page)? Без проблем. Ваша тема може містити один простий файл шаблону відповідає за перевизначення макета сторінки (page.tpl.php). Ви хочете змінити розмітку для блоку пошуку? Без проблем. Просто додайте новий файл шаблона.

Ваша робота по перевизначення розмітки закінчується, коли ви додали стільки файлів шаблонів, скільки вам потрібно змінити. Ні більше, ні менше.

планування теми

Ви можете накидати план теми на папері, або створити чудові діаграми в Illustrator, головне, що ви повинні вирішити перш ніж починати витрачати час прикраси сторінки в вашому улюбленому графічному редакторі, це те як елементи сторінки поєднуються один з одним. І давайте подивимося правді в очі, якщо у вас немає плану, за яким ви розробляєте сайт, то це просто малювання.

Якщо у вас вже є готовий дизайн, що ви просто намагаєтеся конвертувати, все рівне не пропустіть цей крок. Тому що зміни на цій стадії розробки обходяться набагато дешевше ніж на більш пізніх стадіях. Цей невеликий мозковий штурм буде гарантувати, що ви можете побудувати успішну тему Drupal. Якщо на цьому етапі, ви виявляєте, що є речі, які реалізувати неможливо саме так ка вони представлені в дизайні, то вам слід саме зараз відкоригувати дизайн таким чином щоб знайти компроміс між можливостями теми і дизайном, щоб в результаті отримати те що вам потрібно .

Специфікація веб-сайту

Щоб створити тему Drupal, вам потрібно знати все «фішки», які буде використовувати ваш сайт. для цього необхідно провести аналіз функціоналу вашого сайту і визначити модулі, які використовуються для побудови цих функцій. після цього ви можете визначити елементи сторінки, які потрібно темізіровать. Спочатку здається проблематичним, але на ділі не все так страшно.

Створіть таблицю таблицю. У першому лівому стовпчику вкажіть всі особливості, які буде мати ваш сайт. Наприклад: календар подій, галерея, форум, каталог організацій, профілі користувачів, і вбудовані відео. У середній колонці запишіть назви модулів Drupal, які необхідні для створення цих функції. І, нарешті, в правій колонці запишіть всі елементи, які будуть представлені в рамках цього функціоналу.

Сторінка новин Blog Список останніх новин. Кожна новина варто з: назви, дати, тексту тексту Галерея CCK, ImageField, ImageCache, ImageAPI, Views, Views Slideshow Сторінка з невеликими зображеннями, які ведуть на великі зображення. Велике зображення має заголовок, власне зображення, ім'я автора.

Якщо ви не впевнені, які модулі будуть використовуються, і ви працюєте в команді, попросіть товаришів по команді про допомогу. Тільки після того як ви будете точно знати які модулі буде використовуватися для здійснення функцій сайту, ви зможете визначити які елементи розмітки вам потрібно темізіровать.

Прототипи (Wireframes)

Тут вам можна обійтися простими схематичними малюнками. Почніть з «глибини» вашого веб-сайту. Намалюйте все речі, які повинні бути на сторінці.

Чи впорається з внутрішніми сторінками з точки зору Drupal легше, але вони важче для схем, тому що ви повинні точно знати, як всі елементи навігації будуть взаємодіяти один з одним.

Навіть якщо ви отримали повний дизайн і вказівку перетворити його в тему, то все одно зробіть в першу чергу прототипи. Ці маленькі ескізи дають вам можливість, не думаючи особливо про красу дизайну, подумати про те, що буде представляти із себе ваш сайт з точки зору розробки. Вони дозволяють «відчути» (нехай навіть віртуально) і вказати кожен елемент на сторінці. При створенні прототипів говорите самі себе: «Це головна навігація по сайту. Я виведу її за допомогою змінної primary_links в файлі шаблону сторінки ».

Повний список змінних для кожного типу файлів шаблону можна знайти за посиланнями нижче:

Специфікації сайту і прототипування допоможуть вам зв'язати воєдино дизайн вашого сайту і модулі Drupal. Модуль відповідає за збереження і вилучення вмісту з бази даних. Тема несе відповідальність за оформлення вмісту за допомогою HTML-тегів, які, в свою чергу оформляються за допомогою CSS. Модулі являють вміст бази даних в HTML-обгортці. Ваша робота над темою полягає в зміні HTML-обгортки вмісту бази даних.

Використання прототипів визначить модулі, які відповідають за виведення кожного елемента сторінки.

Готово, тепер саме час персоналізувати ваш сайт.

Ідентифікуємо елементи сторінки

Це частина статті, де найдосвідченіші Темери махають руками, щоб за допомогою магії вуду, щоб в кінцевому підсумку отримати готову тему.

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

Давайте почнемо з простого списку:

• блок новин
• блок подій
• блок програм
• Логотип сайта
• Пошук
• Основна навігації
• вторинна навігація
• футер

Для кожного елемента списку ви повинна написати праворуч - «Це ____ (назва змінної або модуля)».

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

Тепер, коли ви з'ясували походження кожного елемента сторінки, вам потрібно визначити тільки ті складові модулі і змінних які відповідають безпосередньо за HTML-фрагмент сторінки, блоку.

Наприклад: припустимо, що ви хочете вивести і оформити блок «Новини» (Nwes). Що ви можете сказати про це шматочку «мозаїки»? Ось що я бачу:

• Спеціальний шрифт для заголовка блоку
• Масивний верхній бордер
• Основний шрифт за замовчуванням
• Невеликі відступи з усіх сторін
• Його ширина, якщо використовувати 960gs, дорівнює 6 колонка від 12-ти колоною сітки
• Його фон відрізняється за текстурою від загального фону сайту

Нам вже відомо, що блоки мають свій власний файл шаблону і є дві змінні, які буде виводити вміст: $ block-> subject і $ content

За замовчуванням файл шаблону блоку (block.tpl.php) містить наступний HTML і PHP:

<Div id = "<? Php print $ block_html_id;?&gt;" Class = "<? Php print $ classes;?&gt;" <? Php print $ attributes; ?>> <? Php print render ($ title_prefix); ?> <? Php if ($ block -> subject):?> <H2 <? Php print $ title_attributes; ?>> <? Php print $ block -> subject?> </ H2> <? Php endif; ?> <? Php print render ($ title_suffix); ?> <Div class = "content" <? Php print $ content_attributes; ?>> <? Php print $ content?> </ Div> </ div>

<Div id = "<? Php print $ block_html_id;?&gt;" Class = "<? Php print $ classes;?&gt;" <? Php print $ attributes; ? >> <? Php print render ($ title_prefix); ?> <? Php if ($ block-> subject):?> <H2 <? Php print $ title_attributes; ? >> <? Php print $ block-> subject?> </ H2> <? Php endif;?> <? Php print render ($ title_suffix); ?> <Div class = "content" <? Php print $ content_attributes; ? >> <? Php print $ content?> </ Div> </ div>

Давайте припустимо, що блок з основною новиною буде звичайним призначеним для користувача блоком в якому буде введений текст. Тоді його розмітка, генерована модулем буде виглядати приблизно так:

<Div class = "block block-block contextual-links-region" id = "block-block-3"> <div class = "content"> <h2> News </ h2> <p> Blah, blah, blah, lorem ipsum, blah blah blah. </ p> </ div> </ div>

<Div class = "block block-block contextual-links-region" id = "block-block-3"> <div class = "content"> <h2> News </ h2> <p> Blah, blah, blah, lorem ipsum, blah blah blah. </ p> </ div> </ div>

Тепер ми з вами бачимо, що це HTML-сниппет не представляє з себе нічого страшного і вже містить звичну розмітку і CSS-класи.

В цьому випадку, якщо ви хотіли зробити новинний блок на вашому сайті в точності так, як він виглядає на зображенні прикладі, що ж ви повинні зробити? Щоб зробити все оптимальним способом, нам потрібно працювати тільки з тими файлами які нам потрібні і уникати зайвого фанатизму з PHP кодом.

• У вашому CSS (автор рекомендує виділити взагалі окремий файл, але я б не став так поступати) створіть блок коду коотрой буде описувати відображення всіх стандартних блоків Drupal на сайті. Ці стилі будуть описувати все, крім ширини блоків. Більшість на макеті-прикладі мають ширину в три колонки сітки. Головним селектор для каскаду правил вашому CSS файлі буде «div.block».
• Тепер потрібно визначиться з ім'ям .tpl файлу для кастомними блоку. Формула для блоків шаблонів така:
  block- [region | [module | -delta]]. tpl.php

  в квадратних дужках вказані групи опцій. Логічний символ «|» відділяє опції. Якщо говорити простою мовою, то нам є кілька варіантів поєднання опцій: block-region.tpl.php або block-module.tpl.php або block-module-delta.tpl.php. Припустимо, що нам не відомо в якому регіоні буде цей блок, але подивіться на ID і прикладу коду виведення. Це block-block-3. Це ім'я шаблону буде відповідати тільки одному блоку, тому як значення ID унікально для кожного каркаса блоку!

• Створіть копію block.tpl.php і перейменуйте його значення ID в block-block-3.tpl.php
• Тепер зробіть правки в коді шаблону щоб додати до блоку клас, який буде визначати його ширину відповідно до сітки. У нашому випадку потрібно додати клас grid-6:

<Div id = "<? Php print $ block_html_id;?&gt;" Class = "<? Php print $ classes;?> Grid-6" <? Php print $ attributes; ?>>

<Div id = "<? Php print $ block_html_id;?&gt;" Class = "<? Php print $ classes;?> Grid-6" <? Php print $ attributes; ? >>

Тепер ви розумієте, чому це так важливо, що ви могли вільно мати доступ до маніпулювання HTML елементами вашої теми? Ім'я доступ до потрібного елементу коду ви зможете додати йому необхідні атрибути для оформлення CSS, що б він виглядав згідно вашого дизайну. Знаючи все що вам потрібно про елементи теми ви навіть можете банально «нарізати» ваш дизайн в HTML, а потім замінити текст «риби» на змінні Drupal, але так робити я б не радив.

Тепер вам відома стратегія, яку пропонує використовувати автор цієї статті для створення тем Drupal.

Оптимізуйте ваші файли дизайну

Найчастіше, коли ви отримуєте файли дизайну від якогось іншого дизайнера вони не є зразком правильно складання і компонування файлів дизайну сайту, тому не полінуйтеся і не пошкодуйте часу, щоб привести файли дизайну в порядок , Так вам буде зручніше з ними працювати:

• Відсортуйте шари по папках відповідно до елементів макета.
• Використовуйте «правильні шрифти» для вашої теми. Це означає що ви повинні використовувати безпечні для web шрифти (Якщо звичайно ви не будете використовувати впровадження шрифтів за допомогою @ font-face або іншого механізму, але при цьому простежте щоб до дизайну було докладено потрібні шрифти).
• Використовуйте шаблони для сіток від 960gs , Якщо звичайно ви користуєтеся цим фреймворком.
• Створіть власну палітру з дружніх для CSS квітів (в hex або RGB), які ви будете використовувати в файлах стилів.
• Створення та використання попередніх набори базових стилів, які будуть використовуватися в основних елементах (наприклад: всі блоки вашого сайту можуть мати однакове оформлення, за винятком ширини).

Ось і все, нагадаю, що це переклад першої частини статті відомого майстра створення сайтів на Drupal Emma Jane Hogbin . Як тільки Емма напише продовження, вас чекає і переклад другої частини.