В презентации к вебинару «Типичные ошибки при разработке интернет-магазинов» аккуартно разложены по полочкам ошибки при создании интернет-магазинов на всех этапах: от заключения договора, проектирования интерфейсов, дизайна и верстки до программирования, интеграции и дальнейшей технической поддержки. На вебинаре рассматривались примеры системы управления контентом "1С-Битрикс", однако принципы диагностики ошибок могут быть частично использованы и на других платформах. В презентации отражается: • Понимание опасных моментов в разработке интернет-магазина и возможностей минимизации рисков. • Обзов типовых ошибок при программировании на 1С-Битриксе и способах их диагностики. • Советы по построению эффективного взаимодействия с подрядчиком.

1. (c) Интернет-агентство «Инфоспайс», инфоспайс.рф
Типичные
ошибки
разработки
интернет-
магазинов
Константин Обухов,
генеральный директор
интернет-агентства
«Инфоспайс»

2. _____________________________
в е б - с т у д и я м и

3. Программа
1. Договор. Как не попасть в впросак юридически и финансово?
2. Ошибки проектирования интерфейсов магазинов и сайтов.
3. Ошибки на этапах дизайна и верстки.
1. Ошибки программирования.
2. Тестирование и безопасность.
3. Гарантия и поддержка.
1. Вопросы и ответы.
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

4. Договор
• Нереальные
сроки
• Неясные
деньги
• Нереальные
санкции
• Нет
ответственных
Проектирование
• Нет целей
• Нет прототипов
• «Странная»
Платформа
• Плохое ТЗ
• Не учтена нагрузка
• Нет тестов
Реализация
• Нет данных
• > Сроки
• < Контроль
• Усложнение
• Подводные
камни
• Все и сразу
Тестирование
• Нет тестов
на клиентах
• Нет проверок
безопасности
и качества
• Гарантия
и поддержка
Типовые ошибки
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

5. Как выбрать
«правильную» веб-студию
Дано:
1. Нужен сайт/магазин.
2. Нет рекомендаций
от знакомых.
3. Несколько/много веб-студий.
4. Нет ТЗ, есть краткое описание
проекта.
Выбираем:
1. У студии есть адрес, реквизиты.
2. Есть фотографии
руководства/сотрудников.
3. На сайте есть хотя бы один
неприятный отзыв клиента.
4. Ищем отзывы в яндексе
или соцсетях/звоним клиентам.
5. Есть описание процесса
работы.
6. Называют вилку цен и сроков,
а не точные данные.
7. Не предлагают откаты.
8. Высылают договор
и структуру ТЗ.
9. Работают поэтапно.
10.Есть похожие проекты.
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

6. Составляем
«правильный» договор
Предусматриваем в договоре:
1. Предмет – разработка сайта или выполнение
работ по сайту (в приложениях по договору).
2. ТЗ как приложение к договору или результат
первого этапа.
3. Детальная смета и сроки – после первого этапа.
4. Прописаны случаи изменения цен в смете.
5. Указана ответственность сторон за нарушение
сроков (досудебная).
6. Прописан чужой копирайт.
7. Указаны ответственные лица.
8. Платежи разбиты на этапы, 50/50.
9. Передача прав, исходных материалов,
документации.
10.Гарантия.
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

7. Проектирование и ТЗ
Зачем нужен этот этап:
1. Определяет четкие цели сайта и сценарии
поведения посетителей.
2. Уменьшает стоимость проекта и вероятность
провала.
3. Позволяет клиенту реально осознать проект,
а студии войти в курс.
4. Получаем детальную смета и точные сроки.
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

8. Прототипы
Ошибки проектирования:
1. Нет четких целей и сценариев поведения посетителей.
2. Забыли про мобильные устройства.
3. Изобретаем велосипед сайт с нуля,
а не используем стандарты.
4. Интерфейс проектирует клиент, а не студия.
5. Усложнение функций/страниц сайта
без реальной необходимости.
6. Нет в прототипах – нет на сайте.
7. Не учитываются особенности CMS.
8. Нет интерактивности в прототипах.
9. Нет тестирования не реальных покупателях.
10. Дизайнер не утверждает прототип.
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

9. Техническое задание
Ошибки этапа ТЗ:
1. ТЗ составлено поверхностно, типа « а вот тут у нас фильтр».
2. Не описана структуры данных.
3. Пишется без учета CMS.
4. Не используются типовые компоненты «1С-Битрикс».
5. Нет требований по нагрузке, скорости загрузке страниц,
тестам монитора качества «1С-Битрикс».
6. Используются нереальные/не утвержденные данные
каталога товаров.
7. Не описаны сценарии тестирования.
8. ТЗ не читается/корректируется заказчиком.
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

10. Этап дизайна
www.infospice.ru
Ошибки этапа:
1. Дизайн делает непрофессионал.
2. Игнорируются цветовые влияния.
3. Дизайн копируется у конкурента.
4. Делается акцент на неважные блоки на странице.
5. Дизайн делается для «директора», а не для клиента.
6. Клиент не знает, чего хочет.
7. Студия не проводит аналитику фирменного стиля.
8. Не учитываются реальные данные.
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

11. Этап верстки
Ошибки этапа верстки:
1. Не пишется ТЗ на верстку.
2. Верстка не тестируется в разных браузерах
3. Верстка не проходит валидацию (html - validator.w3.org
, css - jigsaw.w3.org/css-validator/).
4. Не учитываются мобильные устройства.
5. Не проверяется резиновость блоков.
6. Нет сверки с дизайном Pixel Perfect (Firefox).
7. Программисты не проверяют верстку.
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

12. Программирование:
как «не сесть в лужу»
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

13. Этап программирования
Ошибки этапа:
1. Нет реальных данных (по каталогу и т.п.).
2. Проект делают непрофессионалы.
3. Проект делается весь и сразу,
а не по итерациям/версиям.
4. Нет контроля качества кода.
5. Не проверяется безопасность кода,
не настраивается проактивная защита в Битриксе.
6. Вносятся правки в ядро Битрикса.
7. Не тестируется нагрузка.
8. Проект не тестируется исполнителем/на клиентах.
9. Не закладывается время на «неожиданности»
и «додумки».
10.Сайт не подготовлен для поисковых систем.
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

14. Контроль качества,
безопасности. Аудит:
1. Безопасность:
I. Настраиваем
Проактивную защиту
в «1С-Битрикс»
II. Проверяем сайт в
мониторе безопасности.
2. Качество
1. Монитор качества
«1С-Битрикс».
2. Внешняя проверка
качества.
3. Аудит
1. От компании
«1С-Битрикс».
Этап программирования
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

15. Нагрузки:
1. Средствами «1С-Битрикс»:
I. Монитор
производительности.
II. Режим отладки.
2. Свои средства
1. Написание нагрузочных
тестов.
2. Внешняя проверка.
3. Аудит 1С-Битрикс.
Этап программирования
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

16. Приемка сайта,
гарантия, поддержка
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

17. Приемка сайта:
1. Принимайте по ТЗ.
2. Привлекайте все заинтересованные отделы
компании.
3. Пусть несколько лояльных клиентов за бонус
пройдутся по сценариям работы с
сайтом/магазином.
4. Составляйте список багов и будущих доработок.
5. Обязательно проверьте работоспособность сайта
после переноса на Ваш хостинг.
6. Битрикс должен быть последней версии и не иметь
доступных стабильных обновлений.
7. Заложите в проект нужное на тестирование
время.
Приемка сайта
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

18. Кто отвечает по гарантии:
1. Исполнитель дает гарантию на свой код.
2. За движок «1С-Битрикс» отвечает
техподдержка «1С-Битрикс».
Как не лишится гарантии:
1. Не правьте код Исполнителя или Ядро Битрикса.
2. Делайте резервную копию сайта перед правками.
3. Уточняйте «гарантийность» по ТЗ.
4. Используйте рекомендованный Битриксом хостинг.
5. Для корректной работы сайта инструмент «Проверка
сайта» в Битриксе не должен иметь «красных строк».
Гарантия
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

19. Что входит в гарантийную поддержку Исполнителем:
1. Исправление багов своего кода.
2. Оптимизация скорости загрузки страниц.
3. Доработка «забытого» функционала.
Как правильно писать в ТП «1С-Битрикс»:
1. Сначала проверьте сайт инструментом «Проверка
сайта» и устраните неполадки. Установите последние
обновления «1С-Битрикса».
2. Сначала почитайте учебные курсы и поищите
на dev.1c-bitrix.ru.
3. Точно опишите проблему, приведите примеры,
приложите скриншоты.
4. Предоставляйте админский доступ на сайт.
5. Будьте вежливы и терпеливы .
Гарантия и техподдержка
(c) Интернет-агентство «Инфоспайс», инфоспайс.рф

20. Что дальше?
Первые шаги после запуска:
1. Установите Яндекс.Метрику,
смотрите за аналитикой и поведением пользователей.
2. Добавляйте улучшающие опыт взаимодействия
сервисы и элементы дизайна.
3. Анализруйте error_log.

21. Спасибо за внимание!

22. Контакты
Тел. 8 (499)501-61-37
Отдел продаж – sales@infospice.ru
www.infospice.ru
Twitter – www.twitter.com/infospice
Facebook – www.facebook.com/infospice
Yotube www.yutube.com/user/okinfospice
Интернет-магазин Битрикс – www.infospice.ru/shop/