dump2012
DESCRIPTION
Дколад об гайдлайнах компании JetStyle, нужных для более эффективной верстки. (c) Алексей Иванов, JetStyleTRANSCRIPT
![Page 1: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/1.jpg)
Иванов Алексей, 2012
Автоматизация верстки в веб-студии
Friday, May 25, 12
![Page 2: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/2.jpg)
Контекст10 человек в том или ином виде занимается версткой.
+ Фрилансеры.
Friday, May 25, 12
![Page 3: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/3.jpg)
КонтекстПриложения для мобильных и социальных сетей
Сайты с посещаемостью 200.000 посетителей в день
Friday, May 25, 12
![Page 4: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/4.jpg)
КонтекстDigital-агенство:
- SEO - Веб-аналитика - Долгий цикл поддержки и обновлений
Friday, May 25, 12
![Page 5: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/5.jpg)
КонтекстОбъем верстки на проект:
- 10-20 макетов. - Сроки сильно ограничены.
Friday, May 25, 12
![Page 6: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/6.jpg)
Проблемы- Невозможность быстро подключать к проекту дополнительных разработчиков.- Высокая стоимость поддержки.- В ряде случаев проблемы со скоростью reflow и repaint на мобильных.
Friday, May 25, 12
![Page 7: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/7.jpg)
Проблемы- Загрузка страниц на мобильных по 20-30 секунд.- Переделки после запуска под SEO.- Переделки после запуска под веб-аналитику.
Friday, May 25, 12
![Page 8: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/8.jpg)
ААААА!!!!!111
Friday, May 25, 12
![Page 9: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/9.jpg)
Надо что-то делатьНадо что-то делать
Friday, May 25, 12
![Page 10: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/10.jpg)
Надо что-то делатьНадо что-то делать
Friday, May 25, 12
![Page 11: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/11.jpg)
Надо что-то делатьНадо что-то делать
- Сбор требований- Стандартизация- Автоматизация
Friday, May 25, 12
![Page 12: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/12.jpg)
Сбор требованийНадо что-то делать
- Качество- Совместная разработка и поддержка- Оптимизация скорости работы- SEO- Веб-аналитика
Friday, May 25, 12
![Page 13: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/13.jpg)
Сбор требований
Качество
Надо что-то делать
- Требования к соответствию дизайну- Контент- Элементы страниц- Формы
Friday, May 25, 12
![Page 14: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/14.jpg)
Сбор требований
Совместная разработка и поддержка
Надо что-то делать
- Технические стандарты- Доступность- Структура и наименование элементов
Friday, May 25, 12
![Page 15: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/15.jpg)
Сбор требований
Cкорость работы
Надо что-то делать
- Объединение ресурсов: CSS, JS, IMG- Настройка gzip-сжатия- Кеширование- Заголовки
Friday, May 25, 12
![Page 16: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/16.jpg)
Сбор требований
SEO
Надо что-то делать
- meta-информация- канонические URL’ы- nofollow, noindex- микроформаты & microdata
Friday, May 25, 12
![Page 17: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/17.jpg)
Сбор требований
Веб-аналитика
Надо что-то делать
- Счетчики- Эвенты- Custom variables- eCommerce- Соцсети- WebVisor
Friday, May 25, 12
![Page 18: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/18.jpg)
Стандартизация
Соглашения
Надо что-то делать
- Чеклисты- Стандарты- Рекомендации- Библиотека ссылок Text
http://jetstyle.github.com/html-guidelines/
Friday, May 25, 12
![Page 19: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/19.jpg)
Стандартизация
БЭМ
Надо что-то делать
- Понятная структура- Независимые блоки- Отсутствие каскадов
http://bem.github.com/bem-method/pages/beginning/beginning.ru.html
Friday, May 25, 12
![Page 20: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/20.jpg)
АвтоматизацияНадо что-то делать
- HTML boilerplate и библиотека блоков- Сборка и сжатие CSS- Сборка и сжатие JS- Объединение и сжатие изображений- Работа под Windows
Friday, May 25, 12
![Page 21: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/21.jpg)
Автоматизация
HTML & настройки сервера
Надо что-то делать
Заготовка для старта и коллекция стандартных блоков.
https://github.com/jetstyle/jam-boilerplatehttps://github.com/jetstyle/jam-blocks
Friday, May 25, 12
![Page 22: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/22.jpg)
Автоматизация
CSS
Надо что-то делать
stylus
- переменные и функции- миксины для css3-свойств
https://github.com/LearnBoost/stylus
Friday, May 25, 12
![Page 23: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/23.jpg)
Автоматизация
CSS
Надо что-то делать
styletto
- сборка и сжатие css через yui и csso- компиляция stylus’а- превращение ссылок в data URI- автоматическое создание спрайтов
https://github.com/jetstyle/styletto
Friday, May 25, 12
![Page 24: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/24.jpg)
Автоматизация
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
![Page 25: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/25.jpg)
Автоматизация
Изображения
Надо что-то делать
- imgo
https://github.com/imgo/imgohttp://launchpad.net/~e15/+archive/ppa
Friday, May 25, 12
![Page 26: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/26.jpg)
Автоматизация
Работа под Windows
Надо что-то делать
- Vagrant (?)
http://vagrantup.com/
Friday, May 25, 12
![Page 27: Dump2012](https://reader034.vdocument.in/reader034/viewer/2022052621/558b3a2ad8b42adf6a8b4576/html5/thumbnails/27.jpg)
Вопросы?Надо что-то делать
http://jetstyle.github.com/html-guidelineshttps:// github.com/jetstyle
Friday, May 25, 12