Embed Size (px)
Citation preview
Иванов Алексей, 2012
Автоматизация верстки в веб-студии
Friday, May 25, 12
Контекст10 человек в том или ином виде занимается версткой.
+ Фрилансеры.
Friday, May 25, 12
КонтекстПриложения для мобильных и социальных сетей
Сайты с посещаемостью 200.000 посетителей в день
Friday, May 25, 12
КонтекстDigital-агенство:
- SEO - Веб-аналитика - Долгий цикл поддержки и обновлений
Friday, May 25, 12
КонтекстОбъем верстки на проект:
- 10-20 макетов. - Сроки сильно ограничены.
Friday, May 25, 12
Проблемы- Невозможность быстро подключать к проекту дополнительных разработчиков.- Высокая стоимость поддержки.- В ряде случаев проблемы со скоростью reflow и repaint на мобильных.
Friday, May 25, 12
Проблемы- Загрузка страниц на мобильных по 20-30 секунд.- Переделки после запуска под SEO.- Переделки после запуска под веб-аналитику.
Friday, May 25, 12
ААААА!!!!!111
Friday, May 25, 12
Надо что-то делатьНадо что-то делать
Friday, May 25, 12
Надо что-то делатьНадо что-то делать
Friday, May 25, 12
Надо что-то делатьНадо что-то делать
- Сбор требований- Стандартизация- Автоматизация
Friday, May 25, 12
Сбор требованийНадо что-то делать
- Качество- Совместная разработка и поддержка- Оптимизация скорости работы- SEO- Веб-аналитика
Friday, May 25, 12
Сбор требований
Качество
Надо что-то делать
- Требования к соответствию дизайну- Контент- Элементы страниц- Формы
Friday, May 25, 12
Сбор требований
Совместная разработка и поддержка
Надо что-то делать
- Технические стандарты- Доступность- Структура и наименование элементов
Friday, May 25, 12
Сбор требований
Cкорость работы
Надо что-то делать
- Объединение ресурсов: CSS, JS, IMG- Настройка gzip-сжатия- Кеширование- Заголовки
Friday, May 25, 12
Сбор требований
SEO
Надо что-то делать
- meta-информация- канонические URL’ы- nofollow, noindex- микроформаты & microdata
Friday, May 25, 12
Сбор требований
Веб-аналитика
Надо что-то делать
- Счетчики- Эвенты- Custom variables- eCommerce- Соцсети- WebVisor
Friday, May 25, 12
Стандартизация
Соглашения
Надо что-то делать
- Чеклисты- Стандарты- Рекомендации- Библиотека ссылок Text
http://jetstyle.github.com/html-guidelines/
Friday, May 25, 12
Стандартизация
БЭМ
Надо что-то делать
- Понятная структура- Независимые блоки- Отсутствие каскадов
http://bem.github.com/bem-method/pages/beginning/beginning.ru.html
Friday, May 25, 12
АвтоматизацияНадо что-то делать
- HTML boilerplate и библиотека блоков- Сборка и сжатие CSS- Сборка и сжатие JS- Объединение и сжатие изображений- Работа под Windows
Friday, May 25, 12
Автоматизация
HTML & настройки сервера
Надо что-то делать
Заготовка для старта и коллекция стандартных блоков.
https://github.com/jetstyle/jam-boilerplatehttps://github.com/jetstyle/jam-blocks
Friday, May 25, 12
Автоматизация
CSS
Надо что-то делать
stylus
- переменные и функции- миксины для css3-свойств
https://github.com/LearnBoost/stylus
Friday, May 25, 12
Автоматизация
CSS
Надо что-то делать
styletto
- сборка и сжатие css через yui и csso- компиляция stylus’а- превращение ссылок в data URI- автоматическое создание спрайтов
https://github.com/jetstyle/styletto
Friday, May 25, 12
Автоматизация
JavaScript и автоматизация сборки
Надо что-то делать
grunt ( grunt-styletto, grunt-css, grunt-exec )
- concat, min, lint, watch- csslint, styletto, exec(imgo)- пресеты в билд-скрипте
https://github.com/cowboy/grunt
Friday, May 25, 12
Автоматизация
Изображения
Надо что-то делать
- imgo
https://github.com/imgo/imgohttp://launchpad.net/~e15/+archive/ppa
Friday, May 25, 12
Автоматизация
Работа под Windows
Надо что-то делать
- Vagrant (?)
http://vagrantup.com/
Friday, May 25, 12
Вопросы?Надо что-то делать
http://jetstyle.github.com/html-guidelineshttps:// github.com/jetstyle
Friday, May 25, 12
