Як зробити шаблон для Joomla (Джумла)

maque.org.ua - Joomla (Джумла)

Оскільки багато хто з вас, шановні відвідувачі блоґу, просив розповісти, як робляться шаблони, у сьогоднішньому дописі буде інтерв’ю експерта з виготовлення шаблонів для Джумли (Joomla). Ілля Сосинюк люб’язно погодився дати інтерв’ю і розповісти про те, як робляться шаблони для Joomla (Джумла).

1. Коли ти почав робити Джумла-шаблони?
Може це дивно пролунає, але питання доволі складне. У якості шаблонів я збирав декілька джумл ще в 2009. “Повернувся” до Joomla! у січні 2011 з виходом версії Joomla! 1.6. Але назвати мою роботу “виготовленням Joomla-шаблонів” складно. Адже виходить “збирати” одну тему за 1-2 місяці, щоб бути у курсі тенденцій, труднощів і просто тримати ритм.

Ілля Сосинюк
Ілля Сосинюк

2. За який час можна навчитись робити сайти для Джумла?
Питання схоже на “скільки коштує авто?”. Тут не так просто сказати, є безліч умов, що впливають на швидкість навчання. Все залежить від рівня складності робіт, їх призначення, гарного ТЗ, наявності “вчителя” і рівня базових знань людини, що вирішила цим зайнятись. Якщо людина ніколи нічим подібним не займалась, то перш за все їй треба навчитись гарно верстати, після чого переходити на Joomla. Це, звісно, якщо в подальших планах розбиратись та за відносно невеликий строк збирати та налаштовувати тему. Якщо ж є навички з верстання та знання хоча б… синтаксису PHP, проблем виникнути не має. З “учителем” можна зібрати 1-2 теми за два тижні з усіма поясненнями, а далі процес піде сам собою, потихеньку, але впевнено почнуть відточуватись навички. За умови, що наш “студент” має навички збирання інших CMS, то йому може й “учитель” не знадобитись, а буде достатньо самостійного методу спроб і помилок. Трішки посидіти на різноманітних блогах та форумах і вуа-ля – ми вже експерти з Joomla. У мене взагалі казкова ситуація була. І люди оточували, яким можна було поставити будь-які питання, і певні навички у роботі з CMS вже мав. Плюс до того ситуація змусила з усім швидко розібратись. Тож можна зробити висновок, що в залежності від рівня знань та досвіду навчитись самостійно збирати джумлу з намальованого PSD файлу можна від декількох днів (гарні навички) до місяця-двох (при нульових знаннях, але за умови сильного бажання досягти цілі).

Joomla (Джумла)
Joomla (Джумла)

3. Можеш описати, як виглядає процес створення шаблону з PSD файлу?
Все дуже просто, скаже вам будь-який “джумліст”. Але якщо задуматись, то можна виділити кілька умовних етапів створення шаблону. Розповім, як це проходить у мене. Сам, до речі, щойно вперше про це задумався :):

Аналіз PSD. Ми продивляємося усі сторінки сайту і уявляємо його приблизний план, прикидуємо, які модулі нам будуть необхідні. Це приходить з досвідом. Тому не варто переживати, якщо це важко зробити. Врешті-решт можете спробувати зробити на папері щось на кшталт мапи сайту.

Планування самої “верстки”, під час якого теж зовсім приблизно уявляю елементи коду, конструкції, певні стилі, що я буду використовувати для цього шаблону. Роблячи це, я запобігаю виникненню патових ситуацій, коли доводиться руйнувати все, що побудував, для того, щоб реалізувати якусь, на перший погляд, неважливу річ. Не завжди виходить все продумати наперед, але дуже часто саме цей пункт допомагає зекономити декілька годин на збір теми.

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

Тепер безпосереднє збирання теми. Встановлюю двигун і свою заготовлену бланк-тему, з певним набором моїх (і не тільки) напрацювань.

Починаю грубо, без деталізації, стилізувати те, що зараз є – необтесаний, трохи кривенький шаблон, зовсім не схожий на PSD, що ми маємо. Процес написання стилів у CSS є нерозривним з нарізанням слайсів у Photoshop. Ріжу потрібний фон або картинки, коли в цьому виникає потреба. Я не підтягую піксель до пікселя відразу. Працюю по методу прогресивного джіпега 🙂 . Спочатку розташовую по всій сторінці необхідні нам блоки, встановлюю модулі, компоненти, плагіни, щоб сайт набував потрібної форми в цілому. В цьому випадку можна на ранніх етапах виявити всі невраховані підводні камені. Поки що працюю тільки з головною сторінкою, іноді поглядаючи на інші і намагаюсь передбачити, щоб на них теж нічого не “ламалось”.
Після того, як встановлені потрібні модулі, візуально все стоїть на своїх місцях (тексти, зображення, меню, смислові блоки) – починаю деталізувати і підводити майже піксель до пікселя, як бачу картинку на PSD. Роблю це дідівським способом: вікно з відкритою картинкою (не у photoshop, а якимось іншим рідером) підлаштовую під броузер і комбінацією alt+tab перемикаю туди-сюди. Тут вже деталізувати починаю зверху донизу. Header -> Content -> Footer. Тут вже підключаю всі броузери, щоб усюди було однаково гарно.

Вуа-ля! Маємо першу готову сторінку. Переходимо до формування інших. Процес такий самий, як з головною, але в нас майже все деталізоване. Ми просто підправляємо та підганяємо все так, як нам треба. Власне кажучи, так доходимо до останньої сторінки меню.
Починаю перевіряти і стилізувати всі стандартні сторінки самої Joomla: пошук, контакт форма і багато інших. Краще скласти їх список, щоб нічого не пропустити. Процес не важкий, майже все налаштоване, стилі у більшості випадків беруться з того, що ми вже зробили. Головне нічого не пропустити.
Перевіряю себе ще раз, переглядаю у всіх браузерах. Клацаю-тестую скрипти, щоб не було глюків, щоб нічого не гальмувало.

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


4. За скільки годин і за яких умов можна з PSD зробити готовий сайт для Джумли?
Говорячи за сайт, не скажу. Тут з’являється широке поле для фантазії. Можна впоратись і за 5 годин, якщо це клінстайл (чистий стиль) без скриптів і налічує декілька сторінок. І навпаки, можна хоч декілька місяців все виводити, накручувати функціонал, удосконалювати те, що є, навіть писати (редагувати чужі) компоненти, плаґіни та модулі, що допоможуть виконати поставлену задачу.
Якщо нам треба PSD перетворити у робочий Joomla-шаблон і віддати це замовнику, то за умови наявності глибоких навичок це може тривати біля 15-20 годин. Є відхилення в обидва боки. Велике значення має наявність правильного, зрозумілого, продуманого ТЗ, по якому ми будемо працювати і відразу бачити, що передбачено, а що – ні.

Ще хотів би сказати на тему, трохи пов’язану з верстанням. Багато є дискусій, чи варто підганяти шаблон до PSD піксель до пікселя, чи варто робити лише візуальну схожість. Я вважаю, що вправний дизайнер гарно розуміє принципи побудови сайту, розуміється на типографії, модульних сітках. І ми маємо “правильний” сайт вже на етапі малюнку (PSD). Тож дотримуючись правила “піксель до пікселя”, ви самі здивуєтесь як все продумано і виходить саме собою. Всі відступи, розміри шрифтів, позиції картинок, нічого не треба буде повторно коригувати на останньому етапі.
На жаль, таких дизайнерів зараз не так багато. Новачкам я б рекомендував завжди намагатись зробити точно по PSD, так, це складніше і довше, але згодом ви самі навчитесь визначати, де можна не звертати увагу на “дизайнерський задум”.

5. Яке програмне забезпечення найкраще використовувати для створення шаблонів для Джумли?
Найкраще – хех :). Все залежить від власних вподобань. Все, що нам потрібно, це нарізати слайси, написати код, перевірити це на сервері. Історично так склалось, що особисто я слайси ріжу у Photoshop CS4, для написання коду поки що використовую Dreamweaver CS4. Встановлюю все на локальний WAMP сервер. Ну і перевірка відображення нашого сайту у всіх браузерах сама собою вимагає від нас наявності цих браузерів. Зараз перевірку проводжу в останніх версіях Chrome, Firefox, Safari, Opera, IE7, IE8, IE9.

6. Що є найважчим у процесі створення шаблону?
Найважче правильно розрахувати зусилля, визначити способи рішення проблем, вчасно змінити цей спосіб, якщо проблема довго не вирішується. Ну і, звісно, нові нестандартні задачі, що ставить переді мною дизайнер. З моєю специфікою це трапляється не часто, але змушує задумуватись і шукати рішення. Це я назвав найважчим у тому сенсі, що важко спрогнозувати і можна витратити більше часу, ніж ти спочатку розраховував. А взагалі найтяжчим морально є формування стилів та самого контенту. Коли ти знаєш, як воно має бути, в тебе в голові вже все працює, все стилізовано, ти бачиш той код, але фізично не можеш зробити це швидше, ніж виходить :). Можна назвати це рутиною.

Якісний звук – запорука насолоди музикою. Ось такі наушники сенхайзер зроблять ваше прослуховування музики суцільним задоволенням.

7. Що найцікавіше у цьому процесі?
Найцікавіше, як і найнебезпечніше – це пошук рішення нестандартних ситуацій. Найнебезпечніше – це тому, що часто для рішення таких цікавостей ти починаєш заглиблюватись у роботу, перечитуєш різні форуми, блоги, намагаєшся щось дописати власноруч, в той час, як для замовника ця “фіча” була взагалі неважливою і він не згоден стільки платити (знову повертаємось до правильного ТЗ). Хоча з іншої сторони – це гарна інвестиція у себе, з’являється справжнє розуміння. Ну і, певна річ, насолода від зробленої роботи. Особливо, коли сам щось додатково зробив дуже круто 🙂

8. Чому ти працюєш саме з Джумлою, а не, скажімо, WordPress?
Бо Joomla найкрутіша, і WordPress з Drupal’ом до неї навіть на батуті не дострибнуть. Жартую. Насправді відповідь проста. Так склались обставини, що Joomla я обрав добровільно-примусово, але це геть інша історія. Насправді я кілька років тому спробував і WordPress, і Drupal, і Joomla. Приблизно в один і той самий період: не знав куди податись :), але повернувся до CMS значно пізніше. Для мене серед цих трьох CMS немає кращої або гіршої. Хочу ще попрацювати і з WordPress, і з Drupal, тоді можливо відповім на це питання у повній мірі 🙂

9. З чого порадиш почати початківцям, що хочуть навчитись робити сайти (шаблони) для Джумли?
Зрозуміти навіщо це потрібно, що це таке, для яких цілей використовувати. Якщо це зрозуміти, то відразу відпадає багато питань. Мене в свій час дуже несподівано почали вчити збиранню тем для Drupal, при тому, що я й гадки не мав, що це взагалі таке, не знав навіть, що в принципі має робити CMS. Доволі смішна ситуація вийшла. Я вже зібрав тему, але не розумів що я роблю, як це використовувати, і кому це треба. Довелось зайнятись самоосвітою 🙂 Коли стало зрозуміло що це таке і що воно робить, можна переходити до технічної частини. Найкращий варіант – мати “вчителя”, що разом з тобою збиратиме кілька перших тем. Це найшвидший спосіб набуття знань. Якщо цікавить саме розробка шаблонів, то вам не слід знати Joomla глибоко, достатньо міцних знань верстальника та орієнтуватись у тому “що” і “де” ви можете знайти у файлах теми і у адмінці сайту. Порадити якусь літературу, або сайти зараз не можу: ще не доводилось нікого навчати, а сам я “виріс” за інших умов.

Читайте документацію 😉 і запитуйте у пана Ґуґла, він зараз дуже багато знає і допоможе вам знайти відповідь.

Чекаємо на Ваші коменти та запитання.

Щоб там не казали, але планшети не можуть замінити ноутбуків. Принаймні не зараз. Заходьте на dkt. Широкий вибір ноутів.

Цікава партнерка – це доволі рідкісне явище. Але усе ж таки вони існують і дозволяють отримувати дохід.

You may also like

15 коментарів

  1. Спасибо за обширное и информативное интревью! Прочиталось на одном дыхании!

  2. Отличное интервью! Удачи в начинаниях и дизайне!

    P.S. Вордпресс догоняет Джумлу семимильными шагами, платформа однозначно достойна детального изучения.

  3. все дуже узагальнено,але прочитав статтю…
    хотілось б звичайно більше конкретики,н-д, як провіряється візуальний вигляд шаблону,щоб він відображався однаково добре і на “квадратних” і на “широкоформатних” екранах з різним розширенням.

  4. Занятная статья 🙂
    К тебе можно будет обратиться по поводу верстки под джумду? 🙂

    Кстати, простые шаблоны для жумлы можно делать в артистере (artisteer). Я им часто пользуюсь – создаю болванку, а остальное верстаю сам.

    И еще – вордпресс однозначно круче джумлы, она просто курит в сторонке ;))

  5. В целом понравилось. Пара ремарок:

    – дедовским способом уже никто не работает, проще делать полупрозрачным окно браузера при помощи, например, вот этой софтины:
    http://soft.mydiv.net/win/download-Vitrite.html
    и подгонять к PSD без лишних телодвижений;

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

    Автору спасибо, Илюхе привет 😉

  6. Очень интересно и познавательно! спасибо!

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

  8. Мне всегда было интересно, как начинается процесс верстки своих шаблонов, особенно Джумлы. Я ее больше всех ЦМС-ок люблю. Спасибо за интервью!!!

  9. ilko – це Джумла-кодер, у якого я брав це інтерв’ю. Це я кажу, щоб просто було зрозуміло, хто відповідає на ці питання.

    2 ilko – ще раз дякую за класне інтерв’ю.

  10. @ Настя @ Mark @ D.I.S @ Anna @ Павлиоти Григорий @ Mary @ Julia: дякую

    @ Mastermind: Щось вивчати треба постійно. Вордпрес, джумла чи друпал – краще коли знаєш все :), навіть, якщо детально тільки якусь одну з цих ЦМС.

    @ taras: якщо розписувати детально, то це вже матеріалу для цілої книжки. Такого собі туторіалу по збиранню теми, як це роблю я :). Перевірка “широкий”/”квадратний” проводиться доволі просто. Вся робота
    виконується на широкоформатному моніторі. Переважна більшість шаблонів, що роблю я з фіксованою шириною і “заточена” під 1024рх по ширині. Тому мені достатньо зробити “гарно” на широких моніторах. А взагалі є безліч плагінів до броузерів, завдяки яким в два кліки робиться різна резолюція екрану.

    @ s2dae: 🙂

    @ dimcheg @ Jack: Всі вони нормальні ЦМС. Інакше не набули б такої популярності. Зараз дійсно акценти зміщаються на Вордпрес і друпал і вирівнюється їх популярність. Все через те, що область застосування стає ширшою і в неї потрапляють всі 3 ЦМС, в той час як донедавна вони вирішували хоч трішки, але різні задачі.

    @ Sergey Shtefan: дідівським способом роблю перевірку тільки тому, що без напівпрозорості підставляю всі вікна з третьої спроби максимум 🙂 – рука вже набита.
    Про ТЗ – повністю згоден 😉