SlideShare a Scribd company logo
Создание темы
   «с нуля»
                    Artem Shymko
     Email: itwebcross@gmail.com
               Skype: artemshymko
Как хотелось бы?
1.   Структура и цель сайта
2.   Wireframes
3.   Mockups (скетчи, наброски)
4.   «Готовый» дизайн
5.   Верстка
6.   Пот
7.   Drupal тема
Структура и цель сайта
По плану

Дизайн



  Базовая тема
Как обычно

Дизайн
 Идеи клиента, ограничения в
разработки, баги в стилях, наложения
CSS, проблемы с кроссбраузерностью


     Базовая тема
Создание темы «с нуля»
Время, Ресурсы, Затраты
       Нервы, Больничные, Слезы




        NO!


     Утопия?
Время задуматься.
Возможные пути:

   - Тема on fly
- HTML для темы
Инструментарий
• Views            http://drupal.org/project/views
• Semantic Views   http://drupal.org/project/semanticviews

• Context          http://drupal.org/project/context
• Panels           http://drupal.org/project/panels
• Display Suite    http://drupal.org/project/ds

• Block theme      http://drupal.org/project/blocktheme
• Block class      http://drupal.org/project/block_class
Wireframes
Mockups -> Готовый дизайн
Сборка Layout`а
  базовая тема
Сборка Layout`а
 функциональность
Сборка Layout`а Views
    функциональность
   Использование Semantic Views или Views 3
Тема on fly

Все действия происходят
сразу в теме: верстка, кросс-
браузерное тестирование,
прочее
HTML для темы

1. Создается HTML

2. Верстка тестируется

3. Тема создается на
   базе HTML
On Fly                      HTML
• Разработка и тематизация   • Сначала делается верстка,
  происходят параллельно       после из нее создается
                               тема
• Тема зависит от процесса   • Верстка налаживает
  разработки(иногда            “ограничения” на процесс
  наоборот)                    разработки
• Нет стабильной версии      • Верстка стабильна(но
  готовой темы                 могут быть различия с
                               темой)
Контакты
                   Artem cross Shymko
Drupal: http://drupal.org/user/432492
         Email: itwebcross@gmail.com
                   Skype: artemshymko

More Related Content

PDF
Вёрстка по методологии БЭМ
PPTX
Мастер-класс "Привет, Drupal"
PPT
практическое использование модуля Panels богуцкий виктор
PDF
Premium-темы WordPress
PPTX
Синяя Борода. История одного проекта.
PDF
Иван Карев — Клиентская оптимизация
PPTX
Какой фреймворк нам нужен для Web? Денис Цыплаков
PDF
05 HappyDev-lite-2015 autumn. Михаил Хохлов. Front-end.
Вёрстка по методологии БЭМ
Мастер-класс "Привет, Drupal"
практическое использование модуля Panels богуцкий виктор
Premium-темы WordPress
Синяя Борода. История одного проекта.
Иван Карев — Клиентская оптимизация
Какой фреймворк нам нужен для Web? Денис Цыплаков
05 HappyDev-lite-2015 autumn. Михаил Хохлов. Front-end.

What's hot (19)

PDF
Alex baumgertner bem_in_small_projects
PDF
Сборка проектов с помощью ENB
PPTX
мир без Jsp. thymeleaf 2.0
PDF
Роман Комаров — «Механизм работы браузера»
PPT
Построение внутренней ссылочной структуры
PDF
Создание сайта. Начало (TemplateMonster Russia)
PDF
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
PDF
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
PDF
JSCS: Разработка архитектуры OpenSource-проектов
PPTX
Bootstrap
PDF
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
PPTX
Bootstrap 3. Адаптивная верстка для WordPress
PDF
TК°Conf. Организация разработки Frontend. Виталий Слободин.
PDF
InterSystems Community and Projects in CIS November 2015
PPTX
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
PPTX
Отполифиль свой CSS - MinskCSS 2
PDF
Баев Системы для обучения программированию
PPTX
Frontend
PPTX
Презентация на тему "WEB-программирование"
Alex baumgertner bem_in_small_projects
Сборка проектов с помощью ENB
мир без Jsp. thymeleaf 2.0
Роман Комаров — «Механизм работы браузера»
Построение внутренней ссылочной структуры
Создание сайта. Начало (TemplateMonster Russia)
Дмитрий Кушников — БЭМ глазами бэкенд-разработчика
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компаний
JSCS: Разработка архитектуры OpenSource-проектов
Bootstrap
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
Bootstrap 3. Адаптивная верстка для WordPress
TК°Conf. Организация разработки Frontend. Виталий Слободин.
InterSystems Community and Projects in CIS November 2015
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
Отполифиль свой CSS - MinskCSS 2
Баев Системы для обучения программированию
Frontend
Презентация на тему "WEB-программирование"
Ad

Similar to Создание темы «с нуля» (20)

PPT
Cоздание темы с нуля. Артём Шимко.
PDF
Yaremchuk - Корпоративные сайты
PPT
Темы в Drupal 6
PDF
Drupal theming must knows. Kate Kalashnikova.
PPTX
Александр Даниленко - Panels как философия
ODP
Семинар-практикум по Drupal
PPTX
Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
PDF
Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal
PPT
идеология Drupal 8 уже в drupal 7 вячеслав касихин
PDF
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
PPT
Drupal theming
PPT
Разработка для Web 2.0
PDF
Александр Воинов - Тренды Web
PDF
Создание веб-ресурса: задачи, процесс, коммуникации, результат
PPTX
Drupal
PPTX
Panels
PPTX
Разработка адаптивных шаблонов на базе Omega
PDF
Дизайн сайта, темы
PDF
21 термин из HTML-верстки
PDF
Panels как философия - Alexander Danilenko
Cоздание темы с нуля. Артём Шимко.
Yaremchuk - Корпоративные сайты
Темы в Drupal 6
Drupal theming must knows. Kate Kalashnikova.
Александр Даниленко - Panels как философия
Семинар-практикум по Drupal
Олена Ольховик — Від frontend розробки до Drupal-темізації. Основи і специфіка
Lviv Euro Drupal Camp 2015_От front-end разработки к темизации в Drupal
идеология Drupal 8 уже в drupal 7 вячеслав касихин
Yury Glushkov.What should we build a website.Drupal Camp Kyiv 2011
Drupal theming
Разработка для Web 2.0
Александр Воинов - Тренды Web
Создание веб-ресурса: задачи, процесс, коммуникации, результат
Drupal
Panels
Разработка адаптивных шаблонов на базе Omega
Дизайн сайта, темы
21 термин из HTML-верстки
Panels как философия - Alexander Danilenko
Ad

Создание темы «с нуля»

  • 1. Создание темы «с нуля» Artem Shymko Email: itwebcross@gmail.com Skype: artemshymko
  • 2. Как хотелось бы? 1. Структура и цель сайта 2. Wireframes 3. Mockups (скетчи, наброски) 4. «Готовый» дизайн 5. Верстка 6. Пот 7. Drupal тема
  • 4. По плану Дизайн Базовая тема
  • 5. Как обычно Дизайн Идеи клиента, ограничения в разработки, баги в стилях, наложения CSS, проблемы с кроссбраузерностью Базовая тема
  • 7. Время, Ресурсы, Затраты Нервы, Больничные, Слезы NO! Утопия?
  • 9. Возможные пути: - Тема on fly - HTML для темы
  • 10. Инструментарий • Views http://drupal.org/project/views • Semantic Views http://drupal.org/project/semanticviews • Context http://drupal.org/project/context • Panels http://drupal.org/project/panels • Display Suite http://drupal.org/project/ds • Block theme http://drupal.org/project/blocktheme • Block class http://drupal.org/project/block_class
  • 13. Сборка Layout`а базовая тема
  • 15. Сборка Layout`а Views функциональность Использование Semantic Views или Views 3
  • 16. Тема on fly Все действия происходят сразу в теме: верстка, кросс- браузерное тестирование, прочее
  • 17. HTML для темы 1. Создается HTML 2. Верстка тестируется 3. Тема создается на базе HTML
  • 18. On Fly HTML • Разработка и тематизация • Сначала делается верстка, происходят параллельно после из нее создается тема • Тема зависит от процесса • Верстка налаживает разработки(иногда “ограничения” на процесс наоборот) разработки • Нет стабильной версии • Верстка стабильна(но готовой темы могут быть различия с темой)
  • 19. Контакты Artem cross Shymko Drupal: http://drupal.org/user/432492 Email: itwebcross@gmail.com Skype: artemshymko