flash site

FLASH САЙТ:ОТ ПРОЕКТИРОВАНИЯ К ПОДДЕРЖКЕ,МИНУЯ ЛОВУШКИ

автор: Гитлан Юлия

http://blog.lottascookie.com/

UAFPUG-10, г. Одесса

21 марта 2009 г.

http://blog.lottascookie.com/

О чем будем говорить1

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

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

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

С чего начать1

Заказ наш!

Получен заказ. Как у flash-разработчика, у нас есть 2 варианта развития события:

а) делаем только flash-часть; проектирование и макет будущего сайта делают проект-менеджер и дизайнер (клиент и дизайнер)б) делаем сами все с нуля (или сами проектируем, отдаем дизайнеру работу над макетом).

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

1.1

Исследуем

Узнать чего хочет клиент Изучить сферу деятельности клиента в internet Задать ему основные вопросы Построить схему сайта


1.2

Задаем вопросы

Главный вопрос: какова цель сайта (типы сайтов) Кто аудитория сайта Акценты Разделы сайта, основные блоки (схема) Стилистика сайта и анимация Хочет ли клиент активно продвигать сайт Будет ли баннерный обмен Будет ли предусмотрены формы отправки данных, и из

каких полей они должна состоять Требуем все материалы для работы Оговариваем дату окончания проекта


1.3

Типы flash сайтов

Промо-сайт Арт-работа Сайт-визитка Игровой сайт Корпоративный сайт Сайт-гибрид (flash+html)


1.4

Схема старого сайта


1.5

Схема нового сайта


1.6

А может все-таки не flash сайт?

Еще раз хорошенько все обдумываем и взвешиваем. Еще есть возможность убедить

заказчика не делать flash сайт


1.7

Делаем красиво

Макет (дизайн)2

Дизайним

Наличие всех необходимых материалов (атрибутика, фото/видео, текстовое наполнение и еще целая куча всего)

Следим за размерами, компоновкой и цветовой гаммой – мониторы по размеру и цвету разные

Продумываем сложные части и отображаем в psd Продумываем детали (вся прелесть в деталях) Помним, что мы делаем flash сайт Как представляем макет Если я не дизайню

Flash сайт: от проектирования к поддержке, минуя ловушки. Макет

2.1

Ошибки на этапе дизайна

Не предоставляем больше двух макетов Не воруем чужое (закон об авторском праве) Не забываем, что мы делаем именно flash сайт,

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

Если я не дизайню – требуем у дизайнера(заказчика) подробной раскладки всех страниц и элементов

Flash сайт: от проектирования к поддержке, минуя ловушки. Макет

2.2

Упрощаем себе жизнь

Проектирование и подготовка3

Ура, дизайн утвержден!

Окончательно уточняем детали Мини-ТЗ функционала flash сайта: для себя и

для заказчика. На всякий случай Просим расплатиться за то, что сделано

Flash сайт: от проектирования к поддержке, минуя ловушки. Проектирование и подготовка

3.1

Усиленная подготовка

Разрабатываем управление сайтом Спасительное drop-down menu Определяем структуру каталогов и

местоположение файлов Определяем входные/выходные данные Создаем файлы данных: текст, xml, базы данных Личные (и не личные) библиотеки классов Готовим материалы для работы


3.2

Моя структура проекта 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

tutorialFlash сайт: от проектирования к поддержке, минуя ловушки. Проектирование и подготовка

3.3

Моя организация данных

My Project Data

- global_data.xml - home.txt (простой текст c html-разметкой) … contacts.txt - sendform.php - gallery.xml (если фото, видео, swf) - playlist.xml (если много музыки и навороченный плеер)


3.4

На что стоит обратить внимание

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


3.5

Ошибки на этапе проектирования и подготовки

Спонтанная или плохо продуманная структура сайта

Непродуманная навигация Неочевидная организация и структура данных

(files&folders) Непонятные имена данных: файлов, тегов,

атрибутов, полей Подводные камни: резина, full screen,

презентации или intro, супергалереи и т.д.


3.6

А нужно ли все это?

In my opinion:

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

нервы


3.7

Наконец-то flash…

Flash разработка4

Делаем flash

Базис Загружаем данные Разбираем данные Строим навигацию Движки – сложные и не очень 3d Анимация Эффекты Галереи Видео Intro или презентации

Flash сайт: от проектирования к поддержке, минуя ловушки. Flash разработка

4.1

Делаем flash (продолжение)

Плееры Игры Контент и противные скроллеры Формы Pop-up Различные управляторы и манипуляторы Поиск по сайту Каждому элементу свое место и свое пространство Нюансы … и всё вместе


4.2

Ошибки, когда делаем flash

Неочевидный предзагрузчик – и чего это мы тут грузим? Грузим, грузим - недогрузим… Супер прелоадер и F11 Не хочу смотреть вашу презентацию! Пустите меня на

сайт! Хитрое Drop down меню Переполненная галерея (и такое бывает) И куда бы прибить этот баннерочек и эту большую

важную кнопочку? Петляли мы петляли с картой по сайту… и заблудились


4.3

Ошибки, когда делаем flash (more…)

Выключите это! Когда нужна кнопка stop / play animation? Я не могу попасть в эту кнопку… Эти кнопочки – это квест или пульт управления звездным

кораблем? Когда много-много всего-всего - это kitsch. Мне этот pop-up все загораживает и вечно выскакивает не

там где нужно… O.З.Л. – имена функций, переменных Что я хотел этим сказать – а где же комментарии? Я не могу найти ошибку…


4.4

Ошибки, когда делаем flash (and more…)

Осторожно! Шрифты! Угодно музыку? Как хорошо вернуться домой!


4.5

Общие ошибки

Нехватка дизайна - если не я дизайнил, а вот здесь не дорисовано вот это и это

Берегись! - доделки или переделки чужого проекта Покажите мне, что вы делаете, иначе я вам не заплачу

денег – показывать ли 50 % работы заказчику? Не жадничайте – если вы чего-то не умеете и не знаете –

закажите это специалисту Забыли о том, что нам нужно свести к минимуму будущую

поддержку сайта. Поддерживать сайт должны не вы.


4.6

Процедурное или ООП?

Как же правильно? Практика и теория различаются Универсальные классы


4.7

Почти конец

Тестирование5

Тестируем всеми возможными способами Тестируем на хостинге заказчика (подразумевается,

что у вас есть все пароли и явки к хостингу и ftp заказчика, а также сам хостинг в порядке)

Тестируем в основных браузерах. В первую очередь, конечно же, в IE

Смотрим на разных мониторах Отправляем всевозможным друзьям или закидываем

на линчевание в форум Получаем feedback Исправляем ошибки

Flash сайт: от проектирования к поддержке, минуя ловушки. Тестирование

5.1

Показываем клиенту

Самый лучший тестер – заказчик и его друзья Ожидаем список замечаний Исправляем ошибки Если результат не совпал с ожиданием Тонкие моменты

Flash сайт: от проектирования к поддержке, минуя ловушки. Тестирование

5.2

И еще не конец

Поддержка6

Поддерживаем и помогаем

1 месяц – продолжение тестирования, уже пользователями

Обучаем будущий support Мы готовы к тому, что могут звонить и просить о

помощи даже ночью Оперативно исправляем выявленные ошибки

Flash сайт: от проектирования к поддержке, минуя ловушки. Поддержка

6.1

Окончание работы

Недельки две-три (по возможности) стараемся не видеть сайт

Через эти две-три недельки окидываем сайт свежим оком, находим еще пару багов и тихонько их исправляем

Нужно быть готовым и через полгода исправить вдруг вылезший баг

Отдаем исходники только самой важной персоне, а не в поддержку

Сделать все, чтобы был минимум поддержки с вашей стороны

Flash сайт: от проектирования к поддержке, минуя ловушки. Поддержка

6.2

Неизведанные технологии

SEO Flash сайта7

Что такое SEO

SEO – search engine optimization

процесс корректировки HTML-кода, текстового наполнения (контента), структуры сайта, контроль внешних факторов для соответствия требованиям алгоритма поисковых систем, с целью поднятия позиции сайта в результатах поиска в поисковых системах по определенным запросам пользователей. Чем выше позиция сайта в результатах поиска, тем больше заинтересованных посетителей перейдет на него с поисковых систем.

Flash сайт: от проектирования к поддержке, минуя ловушки. SEO Flash сайта

7.1

Seo Flash сайта? Невозможно!

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

Не отстаем от жизни Лучше позаботиться об этом на этапе разработки Самый легкий путь:

в index.html использовать следующий тэг<META HTTP-EQUIV="Keywords" NAME="Keywords" CONTENT="здесь ключевое слово, здесь еще одно, а вот еще нашлось ключевое слово">


7.2

Что еще можно сделать?

deep linking Инструменты: SWFObject или SWFAddressНедостатки: работают корректно не во всех барузерах, в частности в Opera

технология sIFR (Scalable Inman Flash Replacement)Технология sIFR (проект на основе открытого кода) позволяет веб-мастерам заменять текстовые элементы их аналогами в формате Flash. При использовании этой технологии содержание и элементы навигации отображаются посредством встроенного Flash-объекта, но так как содержание заключено в HTML-источнике, его смогут просмотреть и пользователи, в браузере которых не поддерживается Flash (а также поисковые системы)

Недостатки: работает не со всеми шрифтами, а также некоторыми параметрами шрифтов


7.3

http://novemberborn.net/sifr

http://novemberborn.net/sifr

Что еще можно сделать? (продолжение)

html версии содержания сайтаНедостатки: их нужно сделать и параллельно поддерживать

Резюме: поля непаханые, работы непочатый край


7.4

Подводим итоги

Резюме8

Затраченное время

Исследование: 1-3 дня Дизайн: 1-2 недели Проектирование: 1-4 дня Flash разработка: от 2-х недель Тестирование: 1 неделя Поддержка: 1-2 месяца

Итого полная занятость: от 3 недель до + поддержка: от 1,5 месяцев до среднее арифметическое: от 1 до 3 месяцев

Flash сайт: от проектирования к поддержке, минуя ловушки. Резюме

8.1

Успех предприятия

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


8.2

Ценные Советы8.3

Откажитесь от работы, если она вам не по силам, отдайте ее более опытному товарищу

Решайте насущные вопросы с наиболее главным по должности и по статусу

НЕ прячьтесь от заказчика, если вы не успеваете сделать работу. Лучше скажите ему об этом сразу и пересмотрите сроки. Но не злоупотребляйте доверием.

Старайтесь сделать сайт максимально удобным и функциональным, несмотря на фантазии заказчика

Разрабатывая сайт, не забывайте про его главные цели


Теперь уже точно конец

Вопросы9

flash site

Technology