Основы разработки сайтов by Uplab

LESSON ONE UNIT ONEРАЗРАБОТКА САЙТОВ. ПРОЦЕСС. ЭТАПЫ. СТОИМОСТЬ.

1

Вводное занятие курса о разработке сайтов

http://www.youtube.com/watch?v=sVby7a2dpr8

2

КАКИЕ БЫВАЮТ САЙТЫ

3

ТИПЫ ПРОЕКТОВ. КЛАССИКА

1. Сайты-визитки 2. Корпоративные сайты 3. Сайты-каталоги 4. Интернет-магазины 5. Порталы 6. Промо-сайты 7. Одностраничные сайты – Landing Page 8. Персональные сайты/блоги 9. Форумы 10. Веб-сервисы 11. Wiki/справочные системы

4

ТИПЫ ПРОЕКТОВ. НА САМОМ ДЕЛЕ. РЕШАЕТ ИЛИ НЕ РЕШАЕТ ЗАДАЧУ

http://www.berkshirehathaway.com/

5

6

КАК РАЗРАБОТАТЬ САЙТ?

КАК РАЗРАБОТАТЬ САЙТ?

7

Самостоятельно

http://designmodo.com/qards/

http://www.squarespace.com/

http://tilda.cc/

https://webflow.com/

+ https://thegrid.io/

https://readymag.com/ http://www.weebly.com/

8

КАК РАЗРАБОТАТЬ САЙТ?

Самостоятельно Обратиться к профессионалам

http://designmodo.com/qards/

http://www.squarespace.com/

http://tilda.cc/

https://webflow.com/

+ https://thegrid.io/

https://readymag.com/ http://www.weebly.com/ http://ratings.tagline.ru/digital-production/

http://www.cmsmagazine.ru/creators/

http://www.ruward.ru/index-ruward/united-web-rating-2015/

9

КАК РАЗРАБОТАТЬ САЙТ?

ЭТАПЫ РАБОТ

10

ПРОЦЕСС РАЗРАБОТКИ САЙТАЭто серия последовательных этапов, начиная от определения целей и задач проекта и до внедрения законченного решения.

Важный факт: Начиная с момента подписания договора, практически все обстоятельства препятствуют завершению проекта. 11

12

ПРОЦЕСС РАЗРАБОТКИ САЙТА

I. Анализ и проектирование 1. Сбор требований 2. Аналитика 3. Проектирование 4. Формирование ТЗ

II. Контент 1. Информационная архитектура 2. Текстовый контент 3. Графический контент 4. Сценарии

III. Дизайн 1. Концепция дизайна 2. Дизайн вн. страниц и

форм

IV. Верстка и сборка 1. Html-верстка 2. Интеграция верстки с CMS 3. Тестирование 4. Интеграция с внешними

сервисами

V. Подготовка к публикации 1. Наполнение контентом 2. SEO-настройки 3. Тестирование исполнителем 4. Обучение заказчика работе с

CMS (+передача инструкций) 5. Тестирование заказчиком

VI. Публикация 1. Тестирование

на боевом хостинге 2. Перенос на основной

домен

+ Стабилизация и внедрение улучшений (до 6 месяцев).

АНАЛИТИКА И СБОР ТРЕБОВАНИЙ А ЗАЧЕМ САЙТ?

Важный факт: В 90 % случаев не сходится. В 100 % случаев Заказчик хочет поскорее пройти этот этап. Это точка, когда наиболее целесообразно искать компромисс

Какие цели Заказчик ставит перед проектом Приоритеты по целям

Какие задачи требуется решить в рамках поставленных целей с помощью сайта

Каких пользователей стоит ожидать на сайте и кто из них приоритетнее

Простое ранжирование задач по Пользователям и сопоставление с приоритетами по целям

Сошлось можно продолжать

Не сошлось Придется повторить

13

СБОР ТРЕБОВАНИЙ ФИКСИРУЕМ ОЖИДАНИЯ

1) Разделяйте требования на обязательные и опциональные. 2) Фиксируйте все идеи. В т.ч. на которые не хватит ресурса сейчас. 3) Поделитесь бизнес-целями. 4) Можно разбить требования на группы:

• Структура • Контент • Интерактив (формы, • Визуальное оформление • Администрирование • Сроки • Процесс работы

Важно: Требования, это лишь первоначальный план. Они могут быть скорректированы.

14

ПРОЕКТИРОВАНИЕ А ЧТО ИМЕННО МЫ ХОТИМ?

Важный факт: 70% клиентов думают что это лишь примерные наброски и на этапе дизайна все станет понятнее и тогда разберемся. Но ТЗ уже подписано.

Схематический прототип (скетч) VS Динамический прототип

15

16

АНАЛИТИКА И ПРОЕКТИРОВАНИЕ ПОИСК ЛУЧШИХ РЕШЕНИЙ

best website…

research…

anаlysis…

17

АНАЛИТИКА И ПРОЕКТИРОВАНИЕ ПОИСК ЛУЧШИХ РЕШЕНИЙ

http://www.awwwards.com/

18

АНАЛИТИКА И ПРОЕКТИРОВАНИЕ КАРТА САЙТА

ДИЗАЙН ГЛАВНОЕ – ОН ДОЛЖЕН:

1. Помогать решать поставленные задачи.

2. Не мешать и быть удобным для клиента.

3. Быть во времени и даже немного дальше.

4. Работать вместе с предыдущими и последующими этапами.

5. Нравиться директору… и его секретарше.

Важный факт: Почти всегда самые большие начальники участвуют в процессе утверждения дизайна и почти никто не обращает внимание на контент.

19

ВЕРСТКА. ЧТО ЭТО ТАКОЕ.

Это процесс преобразования дизайн-макета в конкретные веб-страницы, без рабочего функционала.

Табличная и блочная верстка Вторая уже почти полностью выдавливает первую.

Фиксированный тип макета дизайн, в котором ширина столбца/рисунка заданы в пикселях, то есть оговорены точно.

Резиновый или адаптивный тип макета Дизайн, который подстраивается (адаптируется) под размер экрана, в том числе может происходить перестройка блоков с одного места на другое (адаптив).

Важный факт: Большинство макетов действительно на верстке выглядит уже не так замечательно – всему виной шрифты, сглаживание и пиксельная сетка. 20

ВЕРСТКА ПИКСЕЛЬ В ПИКСЕЛЬ:

Важный факт: Головная боль – верстка под IE6 занимает менее 2% пользователей, и они в целом не интересны в плане платежеспособности.

21

ИНТЕГРАЦИЯ (ПРОГРАММИРОВАНИЕ) ЧТО ЭТО ТАКОЕ?

1С-Битрикс: Управление сайтом – это CMS (движок сайта бизнес-приложение – FrameWork, который требует интеграции (настройки под конкретный проект)

«Соединение» программной части и визуальной (HTML) (интеграция шаблона, меню и карты сайта; доработка вывода динамических компонент, настройка включаемых областей и т.д.)

Настройканастройки системы управления в соответствии с требованиями реального проекта и предметной области, настройки прав

Программированиесоздание или доработка динамических компонент

22

ИНТЕГРАЦИЯ (ПРОГРАММИРОВАНИЕ) А ЕСТЬ ТЗ?!

Важный факт: В реальной жизни разработка на базе готовой системы управления потребует большего количества человеко-часов программиста, чем разработка с «нуля». 23

РАЗРАБОТКА И РАЗМЕЩЕНИЕ КОНТЕНТА

Если контента нет на стадии запуска проекта, с вероятностью 99 % на этапе, когда его надо будет размещать, проект придется приостанавливать. Но кое-что можно сделать:

Наполнять тем, что естьне дожидаясь «обновленного» содержания, писать то, что имеется в наличии. Как правило, после открытия контент очень быстро появляется

Останавливать работыКвалифицированный Исполнитель должен категорически отказаться от размещения части контента.

Закрыть «пустые» разделы

Важный факт: Действительно мало написать классный текст, его еще надо красиво разместить. Для этого в современном вебе даже есть целая профессия, вебстальщики.

24

Согласно «правилу Паретто» последние 20 % проекта составят 80 % издержек

Важный факт: 99,9 % проектов открываются с ошибками. 100 % «идеальных» сайтов не открываются никогда. И еще доступы к проекту, надо запрашивать в самом начале проекта, тогда у клиента будет больше времени чтобы их найт.

Дата открытия превыше всего На этапах тестирования / доработок и внедрения все должно строиться относительно даты открытия (даже если проект придется открывать в «сыром» виде)

Применение системы учета багов обязательно Стандартный сайт содержит сотни багов, половина из которых будет дорабатываться по 2 – 3 раза

25

ЗАПУСК. КОГДА СДЕЛАНО НА 90(?)%

КОГДА ЧТО-ТО ПОШЛО НЕ ТАК Как минимум 30 % проектов, на различных стадиях разработки нуждаются в спасении

Важный факт: Большинство Заказчиков винят во всех проблемах Исполнителей, а большинство Исполнителей спокойно делают другие проекты

Признайте наличие проблем и локализуйте их Вне зависимости от того Заказчик вы или Исполнитель вовремя признайте, что проект находится в неуправляемом состоянии, и попытайтесь здраво оценить причины. В 85 % случаев это будет желание «сделать побольше» (или «получше»)

Смелее устраняйте причины Важно не только найти и признать наличие проблем, но и решительно их устранить.

26

МЕТОДОЛОГИИ ВЕДЕНИЯ ПРОЕКТОВ

27

AGILE VS WATERFALL

28

WATERFALL ТЯЖЕЛЫЙ И СТАБИЛЬНЫЙ

Каскадная модель реализации проекта. Все этапы следуют последовательно друг за другом.

Проводим детальный анализ. Пишем максимально подробное ТЗ Рисуем все макеты Верстаем все страницы Внедряем весь функционал Тестируем и правим Запускаем

29

WATERFALL. ПЛЮСЫ И МИНУСЫ

+ Четкая оценка сроков и стоимости

+ Четкое планирование: счастливые разработчики.

+ Высокий уровень формализации процесса.

— Невозможно вносить изменения в задание на этапе разработки.

— Мало точек контроля итогового результата.

30

WATERFALL. ДИАГРАММА ГАНТА

31

AGILE. БЫСТРО И ГИБКО

В переводе с англ. – подвижный, живой, проворный, версткий.

32

AGILE. ЦЕННОСТИ

1. Работающий продукт важнее всего (документации, тестов и тд)

2. Люди важнее инструментов и процессов 3. Готовность к изменениям важнее первоначального

плана. 4. Сотрудничество с заказчиком важнее контрактных

обязательств.

Важный факт: Agile – это ответ на вечный конфликт между программистами и менеджерами. В этом ответе обе стороны закрепили за собой права и согласились соблюдать правила.

33

AGILE. ПЛЮСЫ И МИНУСЫ

+ Высокая скорость. + Сокращение простоев в работе из-за согласований. + Возможность быстро внедрять изменения. + Множество точек контроля итогового результата. + Хорошие коммуникации в команде. + Общее информационное поле. – Невозможность контролировать сроки и бюджет больших проектов. – Соблазн слишком часто менять курс. – Неудовлетворенность разработчиков от постоянно меняющихся планов. – Большие коммуникационные издержки. – Agile слабо применим в больших проектах.

34

AGILE VS WATERFALL СТАТИСТИКА

35

АДАПТИРОВАННЫЙ WATERFALL

Переставляем (добавляем) пару этапов и получаем продукт, который больше удовлетворяет требованиям клиента и задачам проекта.

Проводим детальный анализ. Проектируем сайт Пишем максимально подробное ТЗ и оцениваем проект Рисуем все макеты Верстаем все страницы Внедряем весь функционал Тестируем и правим Запускаем

36

СРОКИ ПРОЕКТА КОГДА ДЕДЛАЙН И РЕДЛАЙН?

37

СКОЛЬКО СТОИТ САЙТ? ЧТО ВЛИЯЕТ НА СТОИМОСТЬ?

38

Квалификация исполнителя Требования заказчика

ЦЕНООБРАЗОВАНИЕ БИЗНЕС-МОДЕЛИ

Существует 2 подхода к оценке стоимости разработки сайта:

Fixed Price – модель с фиксированной ценойВ начале проекта фиксируется полная стоимость проекта и согласовывается график оплат.

Time and MаterialПеред началом проекта делается примерная оценка, но клиент оплачивает работы по факту выполнения в соответствующем количестве.

Важный факт: Нет ничего опаснее чем, совмещенная схема. Однако, многие этого не понимают и работают, через кровь, пот и слезы.

39

ЦЕНООБРАЗОВАНИЕ А ПОЧЕМ ВЕСЬ КАРНАВАЛ?

Существует 2 подхода к оценке стоимости разработки сайта:

от «Стандартного решения» Самая распространенная схема оценки стоимости разработки «несложного» сайта

от «Себестоимости» Применяется в основном для оценки «сложных» (более 1500 человеко-часов) проектов.

Важный факт: Иногда заказчики выбирают третий способ оценки – отказаться от всякой оценки и делать силами своих специалистов. Многим кажется, что так дешевле.

40

РАБОТЫ UPLAB

41

• basel.ru

• bitstop.ru

• shop.u6.ru

• smart35.ru

• folga.ru

• mksm.ru

• pobeda48.ru

• zeptolab.com

• basel.aero • volnoe-delo.ru

• povodog.com

• bazelevs.ru

• studio-dk.ru • shad.ru

• designstudy.ru

• artimage.ru

• smu199.ru

• ctx.su

• terem-pro.ru

• horsetimes.ru

• dressagehorses.ru

• flowers-expert.ru

СПАСИБО ЗА ВНИМАНИЕ!

ПАВЕЛ ТАРЕЛКИН, СЕРГЕЙ ВАКАТОВ

[email protected]

www.uplab.ru

42