Иванов Алексей, 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

ivanov@jetstyle.ru

Friday, May 25, 12