SlideShare une entreprise Scribd logo
1  sur  27
*
*   Председатель комиссии по коммуникациям
    ППОС НТУ «ХПИ»
*   PHP-разработчик
*   Блоггер-гик
*   Студент-пятикурсник НТУ «ХПИ» :)




                   *
* Адаптивная верстка
* 960.gs
* Тема omega
* Drush
* Пакеты omega_tools, devel
* HTML5
* CSS селекторы


                        *
*
1. Определитесь со структурой
  контента
2. Начинайте с мобильных устройств
3. Оптимизируйте в зависимости от
  контекста


                   *
*
http://habrahabr.ru/post/80987/
*
* Поддержка Code Driven Development
* CSS Path to object
* Колоночная верстка – 960.gs
* Способствует SEO дизайну
* Управление дополнительными стилями




                         *
*СОБСТВЕННАЯ
                                  ТЕМА
               $ drush omega-subtheme adaptic
You have successfully created the theme adaptic.
*
*
* Настройки сетки (Grid settings)
* Конфигурация зон и регионов (Zone and
 region configuration)
* Отладка (Debugging)
* Подключаемые библиотека (Toggle libraries)
* Подключаемые стили (Toggle styles)
* Подключаемые продвинутые элементы
 (Toggle advanced elements)


             *
* Formalize
* Media queries
* Equal heights




                  *
* Подключение опциональных стилей
  * alpha-mobile.css
  * omega-visuals.css
  * .....
  * global.css – ваш стиль
* Отключение стилей модулей и тем
  * field.css
  * ...


                  *
*
*
    Темизировать легко, просто научитесь
    читать 
*Blocks
  *section#blockname {…} – path to block via ID
  *section.block {…} – all blocks
  *section#blockname h2.title {…} –title of block
  *aside. region-sidebar-first section#blockname {…} -
   block in 1st sidebar
* +38 097 508 84 74
* mail@taras.pro
* www.taras.pro
* Twitter.com/miroling
* facebook.com/miroling
* vk.com/miroling

     *

Contenu connexe

Tendances

простой и мощный бэкап на базе rsync
простой и мощный бэкап на базе rsyncпростой и мощный бэкап на базе rsync
простой и мощный бэкап на базе rsync
Andrew Pantyukhin
 
Артем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTMLАртем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTML
Yandex
 
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSАртем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSS
DataArt
 
Drush & Drupal
Drush & DrupalDrush & Drupal
Drush & Drupal
zabej
 

Tendances (20)

Postgres
PostgresPostgres
Postgres
 
Speed
SpeedSpeed
Speed
 
Обзор Btrfs
Обзор BtrfsОбзор Btrfs
Обзор Btrfs
 
Чтение. Подсказка
Чтение. ПодсказкаЧтение. Подсказка
Чтение. Подсказка
 
Операционные системы GNU/Linux
Операционные системы GNU/LinuxОперационные системы GNU/Linux
Операционные системы GNU/Linux
 
Gfi Archiver - больше, чем просто резервная копия!
Gfi Archiver - больше, чем просто резервная копия! Gfi Archiver - больше, чем просто резервная копия!
Gfi Archiver - больше, чем просто резервная копия!
 
простой и мощный бэкап на базе rsync
простой и мощный бэкап на базе rsyncпростой и мощный бэкап на базе rsync
простой и мощный бэкап на базе rsync
 
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
bem.info — движок и сайт — Андрей Кузнецов, Яндексbem.info — движок и сайт — Андрей Кузнецов, Яндекс
bem.info — движок и сайт — Андрей Кузнецов, Яндекс
 
Артем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTMLАртем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTML
 
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
СВЯТ ЛОГИН «Як провести пошук на xss атаку» Online QADay 2020 #2
 
Битва за миллисекунды: практика ускорения веб сайтов
Битва за миллисекунды: практика ускорения веб сайтовБитва за миллисекунды: практика ускорения веб сайтов
Битва за миллисекунды: практика ускорения веб сайтов
 
Артем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSSАртем Маркушев - HTML & CSS
Артем Маркушев - HTML & CSS
 
Блогплатформы и особенности ведения блогов
Блогплатформы и особенности ведения блоговБлогплатформы и особенности ведения блогов
Блогплатформы и особенности ведения блогов
 
weFramework 1.0 (с) wexpert.ru
weFramework 1.0 (с) wexpert.ruweFramework 1.0 (с) wexpert.ru
weFramework 1.0 (с) wexpert.ru
 
#4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов
#4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов#4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов
#4 "Особенности разработки кросс-браузерных расширений" Сергей Рашитов
 
Drush & Drupal
Drush & DrupalDrush & Drupal
Drush & Drupal
 
Кто такой фронтендер
Кто такой фронтендер Кто такой фронтендер
Кто такой фронтендер
 
Создание темы «с нуля»
Создание темы «с нуля»Создание темы «с нуля»
Создание темы «с нуля»
 
Fuzz.txt
Fuzz.txtFuzz.txt
Fuzz.txt
 
Isaeva ob presentation_poisk_informacii
Isaeva ob presentation_poisk_informaciiIsaeva ob presentation_poisk_informacii
Isaeva ob presentation_poisk_informacii
 

Similaire à Разработка адаптивных шаблонов на базе Omega

TARS: Сделай уровень frontend-рутины 0% — Артём Малко, 2ГИС
TARS: Сделай уровень frontend-рутины 0% — Артём Малко, 2ГИСTARS: Сделай уровень frontend-рутины 0% — Артём Малко, 2ГИС
TARS: Сделай уровень frontend-рутины 0% — Артём Малко, 2ГИС
2ГИС Технологии
 
Yaremchuk - Корпоративные сайты
Yaremchuk - Корпоративные сайтыYaremchuk - Корпоративные сайты
Yaremchuk - Корпоративные сайты
Andrii Podanenko
 
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
rit2011
 
JavaScript on frontend and backend (in Russian
JavaScript on frontend and backend (in RussianJavaScript on frontend and backend (in Russian
JavaScript on frontend and backend (in Russian
Mikhail Davydov
 
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
Компонентная разработка на Stylus, Jade, Typescript - Леонид ШирмановКомпонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
MoscowJS
 
Web весна 2013 лекция 8
Web весна 2013 лекция 8Web весна 2013 лекция 8
Web весна 2013 лекция 8
Technopark
 
сравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикссравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикс
Andrii Podanenko
 
Поисковая оптимизация сайта на Drupal 7
Поисковая оптимизация сайта на Drupal 7Поисковая оптимизация сайта на Drupal 7
Поисковая оптимизация сайта на Drupal 7
Alexey Kostin
 
Курсы по мобильной разработке. 1 лекция. Знакомство с iOS
Курсы по мобильной разработке. 1 лекция. Знакомство с iOSКурсы по мобильной разработке. 1 лекция. Знакомство с iOS
Курсы по мобильной разработке. 1 лекция. Знакомство с iOS
Глеб Тарасов
 
Crossbrowser Css layout
Crossbrowser Css layoutCrossbrowser Css layout
Crossbrowser Css layout
DarkestMaster
 

Similaire à Разработка адаптивных шаблонов на базе Omega (20)

Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
Виталий Харисов "История создания БЭМ. Кратко, сбивчиво и неполно"
 
TARS: Сделай уровень frontend-рутины 0% — Артём Малко, 2ГИС
TARS: Сделай уровень frontend-рутины 0% — Артём Малко, 2ГИСTARS: Сделай уровень frontend-рутины 0% — Артём Малко, 2ГИС
TARS: Сделай уровень frontend-рутины 0% — Артём Малко, 2ГИС
 
Yaremchuk - Корпоративные сайты
Yaremchuk - Корпоративные сайтыYaremchuk - Корпоративные сайты
Yaremchuk - Корпоративные сайты
 
как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4как стать хорошим веб технологом. нарек мкртчян. зал 4
как стать хорошим веб технологом. нарек мкртчян. зал 4
 
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И... Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
Современная верстка с адекватными трудозатратами Максим Тимохин, технолог, И...
 
JavaScript on frontend and backend (in Russian
JavaScript on frontend and backend (in RussianJavaScript on frontend and backend (in Russian
JavaScript on frontend and backend (in Russian
 
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
Компонентная разработка на Stylus, Jade, Typescript - Леонид ШирмановКомпонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
 
What do you MEAN? или введение в Fullstack JavaScript
What do you MEAN? или введение в Fullstack JavaScriptWhat do you MEAN? или введение в Fullstack JavaScript
What do you MEAN? или введение в Fullstack JavaScript
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPress
 
WWW
WWWWWW
WWW
 
Web весна 2013 лекция 8
Web весна 2013 лекция 8Web весна 2013 лекция 8
Web весна 2013 лекция 8
 
Мастер-класс "Привет, Drupal"
Мастер-класс "Привет, Drupal"Мастер-класс "Привет, Drupal"
Мастер-класс "Привет, Drupal"
 
сравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикссравнение Drupal и 1с битрикс
сравнение Drupal и 1с битрикс
 
Unit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьерUnit-тестирование скриншотами: преодолеваем звуковой барьер
Unit-тестирование скриншотами: преодолеваем звуковой барьер
 
Поисковая оптимизация сайта на Drupal 7
Поисковая оптимизация сайта на Drupal 7Поисковая оптимизация сайта на Drupal 7
Поисковая оптимизация сайта на Drupal 7
 
Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...
Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...
Презентация «Bundle Transformer – инструмент для клиентской оптимизации в сре...
 
Парсим CSS
Парсим CSSПарсим CSS
Парсим CSS
 
Курсы по мобильной разработке. 1 лекция. Знакомство с iOS
Курсы по мобильной разработке. 1 лекция. Знакомство с iOSКурсы по мобильной разработке. 1 лекция. Знакомство с iOS
Курсы по мобильной разработке. 1 лекция. Знакомство с iOS
 
Crossbrowser Css layout
Crossbrowser Css layoutCrossbrowser Css layout
Crossbrowser Css layout
 

Разработка адаптивных шаблонов на базе Omega

  • 1. *
  • 2. * Председатель комиссии по коммуникациям ППОС НТУ «ХПИ» * PHP-разработчик * Блоггер-гик * Студент-пятикурсник НТУ «ХПИ» :) *
  • 3. * Адаптивная верстка * 960.gs * Тема omega * Drush * Пакеты omega_tools, devel * HTML5 * CSS селекторы *
  • 4. *
  • 5. 1. Определитесь со структурой контента 2. Начинайте с мобильных устройств 3. Оптимизируйте в зависимости от контекста *
  • 6.
  • 8. *
  • 9. * Поддержка Code Driven Development * CSS Path to object * Колоночная верстка – 960.gs * Способствует SEO дизайну * Управление дополнительными стилями *
  • 10. *СОБСТВЕННАЯ ТЕМА $ drush omega-subtheme adaptic You have successfully created the theme adaptic.
  • 11.
  • 12.
  • 13. *
  • 14.
  • 15.
  • 16. *
  • 17. * Настройки сетки (Grid settings) * Конфигурация зон и регионов (Zone and region configuration) * Отладка (Debugging) * Подключаемые библиотека (Toggle libraries) * Подключаемые стили (Toggle styles) * Подключаемые продвинутые элементы (Toggle advanced elements) *
  • 18. * Formalize * Media queries * Equal heights *
  • 19. * Подключение опциональных стилей * alpha-mobile.css * omega-visuals.css * ..... * global.css – ваш стиль * Отключение стилей модулей и тем * field.css * ... *
  • 20. *
  • 21.
  • 22.
  • 23. * Темизировать легко, просто научитесь читать 
  • 24. *Blocks *section#blockname {…} – path to block via ID *section.block {…} – all blocks *section#blockname h2.title {…} –title of block *aside. region-sidebar-first section#blockname {…} - block in 1st sidebar
  • 25.
  • 26.
  • 27. * +38 097 508 84 74 * mail@taras.pro * www.taras.pro * Twitter.com/miroling * facebook.com/miroling * vk.com/miroling *

Notes de l'éditeur

  1. Grid settingsZone and region configurationDebuggingToggle librariesToggle stylesToggle advanced elements
  2. Enable optional stylesheets Reset (all) - alpha-reset.cssCreated by Eric Meyer. Mobile (all) - alpha-mobile.cssDefaultstylesheet for mobile styles. Alpha (all) - alpha-alpha.cssDefault styles & resets for Alpha/Omega base theme. Text Styles (all) - omega-text.cssDefault text styles for Omega. Branding Styles (all) - omega-branding.cssProvides positioning for the logo, title and slogan. Menu Styles (all) - omega-menu.cssProvidespositoning and basic CSS for primary and secondary menus. Form Styles (all) - omega-forms.cssProvides basic form styles. Omega Styles (all) - omega-visuals.cssCustom visual styles for Omega. (pagers, menus, etc.) Your custom global styles (all) - global.cssThis file holds all the globally active custom CSS of your theme.You can choose from this list to enable optional stylesheets.Disable module and theme stylesheets comment.css (all) - Belongs to Comment field.css (all) - Belongs to Field node.css (all) - Belongs to Node search.css (all) - Belongs to Search user.css (all) - Belongs to User views.css (all) - Belongs to Views vertical-tabs.css - Defined by AlphaThis requires a description. aggregator.css - Defined by AlphaThis requires a description. block.css - Defined by AlphaThis requires a description. dblog.css - Defined by AlphaThis requires a description. file.css - Defined by AlphaThis requires a description. filter.css - Defined by AlphaThis requires a description. help.css - Defined by AlphaThis requires a description. menu.css - Defined by AlphaThis requires a description. openid.css - Defined by AlphaThis requires a description. profile.css - Defined by AlphaThis requires a description. statistics.css - Defined by AlphaThis requires a description. syslog.css - Defined by AlphaThis requires a description. admin.css - Defined by AlphaThis requires a description. maintenance.css - Defined by AlphaThis requires a description. system.css - Defined by AlphaThis requires a description. system.admin.css - Defined by AlphaThis requires a description. system.base.css - Defined by AlphaThis requires a description. system.maintenance.css - Defined by AlphaThis requires a description. system.menus.css - Defined by AlphaThis requires a description. system.messages.css - Defined by AlphaThis requires a description. system.theme.css - Defined by AlphaThis requires a description. taxonomy.css - Defined by AlphaThis requires a description. tracker.css - Defined by AlphaThis requires a description. update.css - Defined by Alpha
  3. SEO