Дколад об гайдлайнах компании JetStyle, нужных для более эффективной верстки. (c) Алексей Иванов, JetStyle

1. Автоматизация
верстки в веб-студии
Иванов Алексей, 2012
Friday, May 25, 12

2. Контекст
10 человек в том или ином виде
занимается версткой.
+ Фрилансеры.
Friday, May 25, 12

3. Контекст
Приложения для мобильных
и социальных сетей
Сайты с посещаемостью
200.000 посетителей в день
Friday, May 25, 12

4. Контекст
Digital-агенство:
- SEO
- Веб-аналитика
- Долгий цикл поддержки и обновлений
Friday, May 25, 12

5. Контекст
Объем верстки на проект:
- 10-20 макетов.
- Сроки сильно ограничены.
Friday, May 25, 12

6. Проблемы
- Невозможность быстро подключать
к проекту дополнительных разработчиков.
- Высокая стоимость поддержки.
- В ряде случаев проблемы со скоростью
reflow и repaint на мобильных.
Friday, May 25, 12

7. Проблемы
- Загрузка страниц на мобильных
по 20-30 секунд.
- Переделки после запуска под SEO.
- Переделки после запуска под
веб-аналитику.
Friday, May 25, 12

8. ААААА!!!!!111
Friday, May 25, 12

9. Надо что-то делать
Надо что-то делать
Friday, May 25, 12

10. Надо что-то делать
Надо что-то делать
Friday, May 25, 12

11. Надо что-то делать
Надо что-то делать
- Сбор требований
- Стандартизация
- Автоматизация
Friday, May 25, 12

12. Надо что-то делать
Сбор требований
- Качество
- Совместная разработка
и поддержка
- Оптимизация скорости работы
- SEO
- Веб-аналитика
Friday, May 25, 12

13. Надо что-то делать
Сбор требований
Качество
- Требования к соответствию дизайну
- Контент
- Элементы страниц
- Формы
Friday, May 25, 12

14. Надо что-то делать
Сбор требований
Совместная разработка
и поддержка
- Технические стандарты
- Доступность
- Структура и наименование элементов
Friday, May 25, 12

15. Надо что-то делать
Сбор требований
Cкорость работы
- Объединение ресурсов: CSS, JS, IMG
- Настройка gzip-сжатия
- Кеширование
- Заголовки
Friday, May 25, 12

16. Надо что-то делать
Сбор требований
SEO
- meta-информация
- канонические URL’ы
- nofollow, noindex
- микроформаты & microdata
Friday, May 25, 12

17. Надо что-то делать
Сбор требований
Веб-аналитика
- Счетчики
- Эвенты
- Custom variables
- eCommerce
- Соцсети
- WebVisor
Friday, May 25, 12

18. Надо что-то делать
Стандартизация
Соглашения
- Чеклисты
- Стандарты
- Рекомендации
Text
- Библиотека ссылок
http://jetstyle.github.com/html-guidelines/
Friday, May 25, 12

19. Надо что-то делать
Стандартизация
БЭМ
- Понятная структура
- Независимые блоки
- Отсутствие каскадов
http://bem.github.com/bem-method/pages/
beginning/beginning.ru.html
Friday, May 25, 12

20. Надо что-то делать
Автоматизация
- HTML boilerplate и библиотека блоков
- Сборка и сжатие CSS
- Сборка и сжатие JS
- Объединение и сжатие изображений
- Работа под Windows
Friday, May 25, 12

21. Надо что-то делать
Автоматизация
HTML & настройки сервера
Заготовка для старта и коллекция
стандартных блоков.
https://github.com/jetstyle/jam-boilerplate
https://github.com/jetstyle/jam-blocks
Friday, May 25, 12

22. Надо что-то делать
Автоматизация
CSS
stylus
- переменные и функции
- миксины для css3-свойств
https://github.com/LearnBoost/stylus
Friday, May 25, 12

23. Надо что-то делать
Автоматизация
CSS
styletto
- сборка и сжатие css через yui и csso
- компиляция stylus’а
- превращение ссылок в data URI
- автоматическое создание спрайтов
https://github.com/jetstyle/styletto
Friday, May 25, 12

24. Надо что-то делать
Автоматизация
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

25. Надо что-то делать
Автоматизация
Изображения
- imgo
https://github.com/imgo/imgo
http://launchpad.net/~e15/+archive/ppa
Friday, May 25, 12

26. Надо что-то делать
Автоматизация
Работа под Windows
- Vagrant (?)
http://vagrantup.com/
Friday, May 25, 12

27. Надо что-то делать
Вопросы?
http://jetstyle.github.com/html-guidelines
https:// github.com/jetstyle
ivanov@jetstyle.ru
Friday, May 25, 12