Flash Site

1. FLASH САЙТ:
ОТ ПРОЕКТИРОВАНИЯ К
ПОДДЕРЖКЕ,
МИНУЯ ЛОВУШКИ
автор: Гитлан Юлия
http://blog.lottascookie.com/
UAFPUG-10, г. Одесса
21 марта 2009 г.

2. О чем будем говорить
1
С чего начать
1.
Макет (дизайн)
2.
Проектирование
3.
Flash разработка
4.
Тестирование
5.
Поддержка
6.
SEO Flash сайта
7.
Резюме
8.
Flash сайт: от проектирования к поддержке, минуя ловушки. О чем будем говорить

3. С чего начать
1
Исследуем, создаем базу, находим общий
язык с клиентом и начинаем проектировать

4. Заказ наш!
1.1
Получен заказ. Как у flash-разработчика, у нас есть
2 варианта развития события:
а) делаем только flash-часть; проектирование и макет
будущего сайта делают проект-менеджер и дизайнер
(клиент и дизайнер)
б) делаем сами все с нуля (или сами проектируем, отдаем
дизайнеру работу над макетом).
Flash сайт: от проектирования к поддержке, минуя ловушки. С чего начать

5. Исследуем
1.2
Узнать чего хочет клиент

Изучить сферу деятельности клиента в internet

Задать ему основные вопросы

Построить схему сайта

Flash сайт: от проектирования к поддержке, минуя ловушки. С чего начать

6. Задаем вопросы
1.3
Главный вопрос: какова цель сайта (типы сайтов)

Кто аудитория сайта

Акценты

Разделы сайта, основные блоки (схема)

Стилистика сайта и анимация

Хочет ли клиент активно продвигать сайт

Будет ли баннерный обмен

Будет ли предусмотрены формы отправки

данных, и из каких полей они должна состоять
Требуем все материалы для работы

Оговариваем дату окончания проекта

Flash сайт: от проектирования к поддержке, минуя ловушки. С чего начать

7. Типы flash сайтов
1.4
Промо-сайт

Арт-работа

Сайт-визитка

Игровой сайт

Корпоративный сайт

Сайт-гибрид (flash+html)

Flash сайт: от проектирования к поддержке, минуя ловушки. С чего начать

8. Схема старого сайта
1.5
Flash сайт: от проектирования к поддержке, минуя ловушки. С чего начать

9. Схема нового сайта
1.6
Flash сайт: от проектирования к поддержке, минуя ловушки. С чего начать

10. А может все-таки не flash сайт?
1.7
Еще раз хорошенько все обдумываем и
взвешиваем. Еще есть возможность убедить
заказчика не делать flash сайт 
Flash сайт: от проектирования к поддержке, минуя ловушки. С чего начать

11. Макет (дизайн)
2
Делаем красиво

12. Дизайним
2.1
Наличие всех необходимых материалов

(атрибутика, фото/видео, текстовое наполнение и
еще целая куча всего)
Следим за размерами, компоновкой и цветовой

гаммой – мониторы по размеру и цвету разные
Продумываем сложные части и отображаем в psd

Продумываем детали (вся прелесть в деталях)

Помним, что мы делаем flash сайт

Как представляем макет

Если я не дизайню

Flash сайт: от проектирования к поддержке, минуя ловушки. Макет

13. Ошибки на этапе дизайна
2.2
Не предоставляем больше двух макетов

Не воруем чужое (закон об авторском праве)

Не забываем, что мы делаем именно flash

сайт, а не пишем статьи для
сайта, фотографируем клипарт для
сайта, создаем музыкальное сопровождение
для сайта.
Если я не дизайню – требуем у

дизайнера(заказчика) подробной раскладки
всех страниц и элементов
Flash сайт: от проектирования к поддержке, минуя ловушки. Макет

14. Проектирование и подготовка
3
Упрощаем себе жизнь

15. Ура, дизайн утвержден!
3.1
Окончательно уточняем детали

Мини-ТЗ функционала flash сайта: для себя и

для заказчика. На всякий случай
Просим расплатиться за то, что сделано 

Flash сайт: от проектирования к поддержке, минуя ловушки. Проектирование и подготовка

16. Усиленная подготовка
3.2
Разрабатываем управление сайтом

Спасительное drop-down menu

Определяем структуру каталогов и

местоположение файлов
Определяем входные/выходные данные

Создаем файлы данных: текст, xml, базы данных

Личные (и не личные) библиотеки классов

Готовим материалы для работы

Flash сайт: от проектирования к поддержке, минуя ловушки. Проектирование и подготовка

17. Моя структура проекта
3.3
My Project

 work (рабочие материалы, которые мне дал клиент)
 design
 doc (текстовые документы, материалы)
 flash
 3d (если нужно)
 AE (effects)
 backup
 caurina
 com (AS классы)
 css (если нужно)
 data
 gallery (если нужно)
 images (картинки для html- текста)
 music (если нужно)
 video (если нужно)
 working (folder)
 AC_RunActiveContent.js
 index.html
 main.fla
 main.swf
tutorial

Flash сайт: от проектирования к поддержке, минуя ловушки. Проектирование и подготовка

18. Моя организация данных
3.4
My Project

 Data
- global_data.xml

 - home.txt (простой текст c html-разметкой) … contacts.txt
 - sendform.php
 - gallery.xml (если фото, видео, swf)
 - playlist.xml (если много музыки и навороченный плеер)
Flash сайт: от проектирования к поддержке, минуя ловушки. Проектирование и подготовка

19. На что стоит обратить внимание
3.5
Splash

Если планируется intro или презентация

Резиновый сайт: неуправляемый resize

Full Screen при открытии сайта

Если страницы сайта абсолютно разные

Фишки (вдруг Новый Год, а мы не готовы)

Предзагрузчики

Если планируется много галерей и видео

Flash сайт: от проектирования к поддержке, минуя ловушки. Проектирование и подготовка

20. Ошибки на этапе проектирования и
подготовки
3.6
Спонтанная или плохо продуманная структура

сайта
Непродуманная навигация

Неочевидная организация и структура данных

(files&folders)
Непонятные имена данных:

файлов, тегов, атрибутов, полей
Подводные камни: резина, full

screen, презентации или intro, супергалереи и
т.д.
Flash сайт: от проектирования к поддержке, минуя ловушки. Проектирование и подготовка

21. А нужно ли все это?
3.7
In my opinion:
Проектирование и продуманная работа позволят
избежать массы ошибок, сэкономит время и
нервы
Flash сайт: от проектирования к поддержке, минуя ловушки. Проектирование и подготовка

22. Flash разработка
4
Наконец-то flash…

23. Делаем flash
4.1
Базис

Загружаем данные

Разбираем данные

Строим навигацию

Движки – сложные и не очень

3d

Анимация

Эффекты

Галереи

Видео

Intro или презентации

Flash сайт: от проектирования к поддержке, минуя ловушки. Flash разработка

24. Делаем flash (продолжение)
4.2
Плееры

Игры

Контент и противные скроллеры

Формы

Pop-up

Различные управляторы и манипуляторы

Поиск по сайту

Каждому элементу свое место и свое пространство

Нюансы

… и всё вместе

Flash сайт: от проектирования к поддержке, минуя ловушки. Flash разработка

25. Ошибки, когда делаем flash
4.3
Неочевидный предзагрузчик – и чего это мы тут грузим?

Грузим, грузим - недогрузим…

Супер прелоадер и F11

Не хочу смотреть вашу презентацию! Пустите меня на

сайт!
Хитрое Drop down меню

Переполненная галерея (и такое бывает)

И куда бы прибить этот баннерочек и эту большую

важную кнопочку?
Петляли мы петляли с картой по сайту… и заблудились

Flash сайт: от проектирования к поддержке, минуя ловушки. Flash разработка

26. Ошибки, когда делаем flash (more…)
4.4
Выключите это! Когда нужна кнопка stop / play animation?

Я не могу попасть в эту кнопку…

Эти кнопочки – это квест или пульт управления звездным

кораблем?
Когда много-много всего-всего - это kitsch.

Мне этот pop-up все загораживает и вечно выскакивает не

там где нужно…
O.З.Л. – имена функций, переменных

Что я хотел этим сказать – а где же комментарии?

Я не могу найти ошибку…

Flash сайт: от проектирования к поддержке, минуя ловушки. Flash разработка

27. Ошибки, когда делаем flash (and more…)
4.5
Осторожно! Шрифты!

Угодно музыку?

Как хорошо вернуться домой!

Flash сайт: от проектирования к поддержке, минуя ловушки. Flash разработка

28. Общие ошибки
4.6
Нехватка дизайна - если не я дизайнил, а вот здесь не

дорисовано вот это и это
Берегись! - доделки или переделки чужого проекта

Покажите мне, что вы делаете, иначе я вам не заплачу

денег – показывать ли 50 % работы заказчику?
Не жадничайте – если вы чего-то не умеете и не знаете –

закажите это специалисту
Забыли о том, что нам нужно свести к минимуму будущую

поддержку сайта. Поддерживать сайт должны не вы.
Flash сайт: от проектирования к поддержке, минуя ловушки. Flash разработка

29. Процедурное или ООП?
4.7
Как же правильно?

Практика и теория различаются

Универсальные классы

Flash сайт: от проектирования к поддержке, минуя ловушки. Flash разработка

30. Тестирование
5
Почти конец

31. Тестируем всеми возможными
способами
5.1
Тестируем на хостинге заказчика

(подразумевается, что у вас есть все пароли и явки к
хостингу и ftp заказчика, а также сам хостинг в
порядке)
Тестируем в основных браузерах. В первую

очередь, конечно же, в IE
Смотрим на разных мониторах

Отправляем всевозможным друзьям или закидываем

на линчевание в форум
Получаем feedback

Исправляем ошибки

Flash сайт: от проектирования к поддержке, минуя ловушки. Тестирование

32. Показываем клиенту
5.2
Самый лучший тестер – заказчик и его друзья

Ожидаем список замечаний

Исправляем ошибки

Если результат не совпал с ожиданием

Тонкие моменты

Flash сайт: от проектирования к поддержке, минуя ловушки. Тестирование

33. Поддержка
6
И еще не конец

34. Поддерживаем и помогаем
6.1
1 месяц – продолжение тестирования, уже

пользователями
Обучаем будущий support

Мы готовы к тому, что могут звонить и просить о

помощи даже ночью
Оперативно исправляем выявленные ошибки

Flash сайт: от проектирования к поддержке, минуя ловушки. Поддержка

35. Окончание работы
6.2
Недельки две-три (по возможности) стараемся не

видеть сайт
Через эти две-три недельки окидываем сайт свежим

оком, находим еще пару багов и тихонько их
исправляем
Нужно быть готовым и через полгода исправить вдруг

вылезший баг
Отдаем исходники только самой важной персоне, а

не в поддержку
Сделать все, чтобы был минимум поддержки с вашей

стороны
Flash сайт: от проектирования к поддержке, минуя ловушки. Поддержка

36. SEO Flash сайта
7
Неизведанные технологии

37. Что такое SEO
7.1
SEO – search engine optimization
процесс корректировки HTML-кода, текстового наполнения
(контента), структуры сайта, контроль внешних факторов для
соответствия требованиям алгоритма поисковых систем, с
целью поднятия позиции сайта в результатах поиска в
поисковых системах по определенным запросам
пользователей. Чем выше позиция сайта в результатах
поиска, тем больше заинтересованных посетителей
перейдет на него с поисковых систем.
Flash сайт: от проектирования к поддержке, минуя ловушки. SEO Flash сайта

38. Seo Flash сайта? Невозможно!
7.2
Разработчик flash сайта мало времени думает (а чаще

всего вообще никогда) о том, как же можно найти его
творение в поисковых системах и сделать его более
заметным для них – потому что все знают, что это SEO и
flash несовместимы
Не отстаем от жизни

Лучше позаботиться об этом на этапе разработки

Самый легкий путь:

в index.html использовать следующий тэг
<META HTTP-EQUIV=quot;Keywordsquot; NAME=quot;Keywordsquot;
CONTENT=quot;здесь ключевое слово, здесь еще одно, а вот
еще нашлось ключевое словоquot;>
Flash сайт: от проектирования к поддержке, минуя ловушки. SEO Flash сайта

39. Что еще можно сделать?
7.3
deep linking

Инструменты: SWFObject или SWFAddress
Недостатки: работают корректно не во всех барузерах, в
частности в Opera
технология sIFR (Scalable Inman Flash Replacement)

Технология sIFR (проект на основе открытого кода) позволяет веб-мастерам
заменять текстовые элементы их аналогами в формате Flash. При
использовании этой технологии содержание и элементы навигации
отображаются посредством встроенного Flash-объекта, но так как
содержание заключено в HTML-источнике, его смогут просмотреть и
пользователи, в браузере которых не поддерживается Flash (а также
поисковые системы)
Недостатки: работает не со всеми шрифтами, а также
некоторыми параметрами шрифтов
Flash сайт: от проектирования к поддержке, минуя ловушки. SEO Flash сайта

40. Что еще можно сделать? (продолжение)
7.4
html версии содержания сайта

Недостатки: их нужно сделать и параллельно
поддерживать
Резюме: поля непаханые, работы непочатый край
Flash сайт: от проектирования к поддержке, минуя ловушки. SEO Flash сайта

41. Резюме
8
Подводим итоги

42. Затраченное время
8.1
Исследование: 1-3 дня

Дизайн: 1-2 недели

Проектирование: 1-4 дня

Flash разработка: от 2-х недель

Тестирование: 1 неделя

Поддержка: 1-2 месяца

Итого

полная занятость: от 3 недель до

+ поддержка: от 1,5 месяцев до

среднее арифметическое: от 1 до 3 месяцев

Flash сайт: от проектирования к поддержке, минуя ловушки. Резюме

43. Успех предприятия
8.2
Успех предприятия зависит от следующих факторов:
 нашли ли вы общий язык с заказчиком
 хорошо продуманная работа
 ответственное отношение
 качественно сделанный проект
Flash сайт: от проектирования к поддержке, минуя ловушки. Резюме

44. Ценные Советы
8.3
Откажитесь от работы, если она вам не по силам, отдайте ее

более опытному товарищу
Решайте насущные вопросы с наиболее главным по

должности и по статусу
НЕ прячьтесь от заказчика, если вы не успеваете сделать

работу. Лучше скажите ему об этом сразу и пересмотрите
сроки. Но не злоупотребляйте доверием.
Старайтесь сделать сайт максимально удобным и

функциональным, несмотря на фантазии заказчика
Разрабатывая сайт, не забывайте про его главные цели

Flash сайт: от проектирования к поддержке, минуя ловушки. Резюме

45. Вопросы
9
Теперь уже точно конец