Разработка флеш-сайта для организации "САМ"

Flash-технология предоставляет интерактивную среду для более квалифицированных средств мультимедиа. Мы говорим не только о быстрых сменах цветов, изображений (это, кстати, является самой приятной опцией у Flash), и звуков. Имеется в виду гораздо большее. Технология Flash позволяет вставлять звук в mp3 - или wav-формате на ваши странички, что дает возможность использовать, к примеру, речь или фоновую музыку. Вы также можете вставлять цифровое изображение или видео непосредственно во Flash - и легко и наглядно показать товары или всего лишь похвастаться фотографиями своей семьи.

Flash-технология - это не единственный способ включить видео в web-страничку. Существуют и другие инструменты, такие как Windows Media Player, Real-Player и QuickTime. И все же, Flash используют около 97% пользователей (по сравнению с Windows Media Player - 59%, Real-Player - 56% и QuickTime player - 41%). HTML/CSS такой опции не предоставляют.

3. Flash-технология гарантирует большую гибкость.

Flash-технология оперирует векторными объектами, и поэтому она позволяет регулировать размеры экрана, базирующиеся на размере браузера, и таким образом ваши рисунки и текст остаются четкими. Это преимущество приобретает все большее значение, так как люди все чаще заходят в сеть не со своих компьютеров, а с альтернативных источников, таких как "карманный" компьютер (PDA), мобильный телефон или наручные часы.

4. Улучшенная интеграция с помощью Flash-технологии.

Flash-технология позволяет интегрировать любой мультимедийный формат. Например, во Flash можно вставить растровые форматы рисунков (такие, как GIF, JPEG, PNG, PCT, TIF), векторные форматы (включая FreeHand, EPS, Illustrator) и, как уже говорилось, звуковые форматы (WAV, AIF, MP3).

5. Flash-технология и шрифты.

С помощью Flash-технологии вы можете встраивать любой шрифт, какой желаете, и демонстрировать его на браузере клиента, независимо от того, установлен ли этот шрифт у них или нет. Вам больше не нужно превращать шрифт в рисунок, чтобы шрифт поддерживался в различных системах.

6. Моделирование фреймов.

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

7. Без обновлений.

Flash-технология дает возможность выводить новые данные без обновления страницы.

Недостатки технологии Flash.

1. Специальный модуль для Flash-технологии.

Flash-технология для просмотра требует установку специального отдельного плагина. Многие компании не разрешают своим сотрудникам самостоятельно устанавливать приложения на свой компьютер, что автоматически отсекает огромную часть потенциальных клиентов у компаний, использующих Flash-технологию в своем сайте.

2. Худшее качество изображения.

Во Flash MX сжатие видеофайлов и их воспроизведение не такого высокого качества, как в специально разработанных для этих целей программах - QuickTime, например. К тому же, Flash видео не позволяет устанавливать драйверы для оптимизации воспроизведения.

3. Проблема индексации Flash-технологии.

У Flash-технологии самым большим недостатком является то, что поисковики не индексируют содержание анимации. Если вы создаете сайт, полностью основанный на Flash-технологиях, вам необходимо добавить текст или HTML, если вы хотите, чтобы ваш контент индексировался поисковиками.

4. Проблемы при печати Flash.

Выбор и печать текста анимации Flash для большинства пользователей непривычны и не так легки, как в HTML-сайтах. Они не могут отделить текст от ненужной им анимации.

4. Техническое задание

4.1 Назначение и область применения

Создание Flash сайтов является очень выгодным, эффективным, интересным и постоянно развивающимся способом привлечь внимание Интернет-пользователей к своей компании. Данный флеш-сайт предназначен для поиска новых клиентов и получения прибыли от изготавливаемых металлоизделий для дальнейшего развития предприятия. В интернет-проекте содержатся следующие данные:

- Информация о компании;

- Предоставляемые услуги;

- Изготавливаемые изделия;

- Контактная информация.

Программа представляет собой Веб-интерфейс для наглядного просмотра и заказа изготавливаемых металлоизделий в соответствии с предъявляемыми требованиями по протоколу http.

4.2 Требования к программе

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

- Предоставление достоверной информации:

О компании;

Услугах;

Изделиях;

- Возможность заполнения формы заказа на необходимое изделие;

- Возможность связаться с сотрудниками компании с помощью электронной почты;

- Возможность встречи Заказчика со специалистами на предприятии с помощью схемы проезда;

- Возможность ознакомления с эскизами металлоизделий.

Надежное (устойчивое) функционирование программы должно быть обеспечено выполнением Заказчиком совокупности организационно-технических мероприятий, перечень которых приведен ниже:

а) организацией бесперебойного питания технических средств;

б) использованием лицензионного программного обеспечения;

в) регулярным выполнением рекомендаций Министерства труда и социального развития РФ, изложенных в Постановлении от 23 июля 1998 г. Об утверждении межотраслевых типовых норм времени на работы по сервисному обслуживанию ПЭВМ и оргтехники и сопровождению программных средств»;

г) регулярным выполнением требований ГОСТ 51188-98. Защита информации. Испытания программных средств на наличие компьютерных вирусов.

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

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

Отказы программы вследствие некорректных действий пользователя при взаимодействии с программой через Flash-интерфейс недопустимы.

4.3 Условия эксплуатации

Климатические условия эксплуатации, при которых должны обеспечиваться заданные характеристики, должны удовлетворять требованиям, предъявляемым к техническим средствам в части условий их эксплуатации.

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

а) задача поддержания работоспособности технических средств;

б) задачи установки (инсталляции) и поддержания работоспособности системных программных средств -- операционной системы;

в) задача установки (инсталляции) флеш-плеера.

В состав технических средств должен входить персональный компьютер (ПЭВМ) включающий в себя:

- процессор Intel® Pentium® II, AMD Athlon 600MHz с тактовой частотой не менее 450 МГц, PowerPC G3 с тактовой частотой не менее 500 МГц.

- оперативную память объемом, 128 Мегабайт;

- видеопамять 128 Мегабайт;

- HDD или SSD, 12 Гигабайт;

- операционную систему - семейства Windows, Mac OS или Linux;

- Flash Player не ниже 7-ой версии.

Флеш-сайт может работать под управлением любой операционной системы поддерживающей Flash Player не ниже 7-ой версии.

Системные программные средства, используемые программой, должны быть представлены лицензионной локализованной версией операционной системы Windows, Mac OS или Linux. Установленным Flash Player не ниже 7-ой версии.

Требования к защите информации и программ не предъявляются.

5. Создание флеш-сайта

Для того, чтобы созданный нами сайт имел большое число постоянных посетителей, помимо рекламной раскрутки и регулярных обновлений, необходимо, чтобы его размеры были как можно меньше и при этом он должен иметь запоминающийся дизайн. Одним из обязательных элементов современного сайта является флэш-анимация. Элементы сайта, построенные с использованием технологии flash, делают более удобной навигацию, а также привлекают к нему внимание посетителей.

Создание сайта с использованием Flash требует наличия определенных знаний, в частности ActionScript, многочисленных настроек MacromediaFlash MX и т.д. Для многих начинающих пользователей это является серьезным препятствием, так как у некоторых не хватает времени на изучение сложных программ, а у некоторых - терпения. Однако, в последнее время появились и альтернативные продукты для создания flash-анимации, которые являются более простыми в освоении и при этом позволяют получить хорошие результаты. Об одной из таких программ - SwishMAX - и пойдет речь ниже.

5.1 Программа SwishMAX

Программа SwishMAX - это относительно новая разработка австралийской компании SWiSHzone (рисунок 1).

Рисунок 1 - Логотип программы SwishMAX

Она является расширенной версией программы Swish2, которая уже успела завоевать популярность среди пользователей во всем мире (тем более, что первая версия этой программы распространялась бесплатно). Преимуществом этой программы можно считать, прежде всего, простоту использования. Даже неподготовленный пользователь за короткое время сможет создать с ее помощью профессиональные флеш-ролики. SwishMAX имеет все лучшие качества Swish2 и при этом обладает большим количеством дополнительных опций - дополнительными инструментами для рисования (AutoShapes), возможностью создания скриптов и их отладки, огромных количеством новых настраиваемых эффектов (более 200), улучшенными опциями экспорта. Ознакомимся с этой программой более подробно. Для этого рассмотрим её главные элементы и пункты меню.

Элементы SwishMAX.

Окно SwishMAX состоит из нескольких элементов. Рассмотрим их по порядку.

1. Панели инструментов (рисунок 2).

Рисунок 2 - Панели инструментов

По умолчанию отображены три панели инструментов:

- Standard Toolbar - панель с основными командами: вырезать, копировать, вставить, удалить, найти, создать новый проект, открыть, сохранить и пр.

- Insert Toolbar - панель с командами вставки основных объектов: текста, изображения, кнопки, новой сцены.

- Control Toolbar - панель управления анимацией.

Кроме этого, при необходимости можно добавить еще две панели:

- Export Toolbar - панель с командами, позволяющими экспортировать сцену в один из поддерживаемых программой форматов Swf, Html, Exe и Avi. Кроме этого, на этой панели расположены кнопки, позволяющие сделать предпросмотр проекта в браузере или плеере.

- Grouping Toolbar - тут расположены команды группирования элементов и конвертирования одних видов объектов в другие.

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

2. Панель Timeline (рисунок 3).

Рисунок 3 - Панель Timeline

Под панелями инструментов расположена панель Timeline. Она разделена на две части: в левой мы можем добавлять и удалять эффекты, а также управлять их настройками, в правой представлены уже заданные эффекты сцены. Тут можно управлять временем их появления и изменять продолжительность.

3. Панель Outline (рисунок 4).

Рисунок 4 - Панель Outline

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

4. Панель Layout (рисунок 5).

Рисунок 5 - Окно Layout

Это окно по умолчанию находится посередине рабочего окна программы. В нем расположена область, на которой происходит работа с объектами, а также инструменты для создания новых объектов - текста, линий, геометрических фигур.

5. Панель Scene (рисунок 6).

Рисунок 6 - Окно Scene

Это окно содержит в себе настройки сцены и отдельных объектов. Оно имеет несколько закладок:

- Movie - тут указывается цвет фона, а также размеры файла и количество кадров в секунду. Чем больше это число, тем лучше качество и тем больше размер выходного файла.

- Shape (Text) - название этой вкладки изменяется в зависимости от типа выделенного объекта. На ней находятся настройки этого объекта.

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

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

- Export - на той вкладке задаются опции экспорта сцены - выбирается формат и устанавливаются настройки для каждого из них. Среди них особенно хочется отметить возможность оптимизации конечного файла, что позволяет существенно уменьшить его размеры.

- Debug - на этой вкладке программа ведет статистику ошибок, которые вы сделали в процессе работы.

- Tint - на этой закладке можно выбрать цвет для выделенного объекта (параметр Color), а также установить для него степень прозрачности (параметр Alpha color).

- Align - настройки, расположенные на этой вкладке, позволяют выравнивать объекты относительно друг друга в заданном порядке.

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

Главное меню.

Теперь рассмотрим команды главного меню:

Пункт меню File.

Как и во многих других программах, в этом пункте меню размещены команды для создания (New), открытия (Open), сохранения проектов (Save и Save As). Далее идут команды сохранения проекта в виде шаблона (Save AS Template) и создания нового проекта на основе темплейта (New From Template). Стоит заметить, что шаблоны можно использовать как пользовательские, так и заготовленные разработчиками программы. Список доступных шаблонов можно увидеть в списке Samples.

В пункте меню File также находятся команды для импорта и экспорта файлов. Список доступных форматов для экспорта хоть и не очень велик, но вполне достаточен для программы такого рода. Это - Swf, Html+Swf, Exe и Avi. Наконец, последняя команда Test дает возможность предспросмотра проекта в плеере или в браузере. Этой опцией очень удобно пользоваться перед сохранением проекта.

Пункт меню Edit.

В этом пункте меню помещены привычные для приложений Windows команды вырезать (Сut), копировать (Copy), вставить (Paste), которые предназначены для работы со скриптом. Также есть команда удаления скрипта (Delete Script), выделения всех объектов в проекте (Select All) и, соответственно, снятия выделения (Deselect All).

Для более удобной работы с отдельными объектами предусмотрены опции Hide и Hide All Except. Эти команды позволяют спрятать выделенный объект или же спрятать все объекты, кроме выделенного. Таким образом, с их помощью мы сможем сосредоточиться на создании отдельного элемента.

Когда работа над отдельным объектом будет завершена, мы можем заблокировать его для дальнейшего редактирования при помощи команды Lock. Это очень удобно, так как возможность случайного изменения его параметров будет исключена.

Пункт меню View.

В этом пункте меню размещены команды, которые отвечают за отображение объектов и сцены в общем в окне программы. С помощью команд Zoom In и Zoom Out можно приблизить или отдалить сцену, указать расположение сцены или объектов относительно окна (Fit), установить отображение в окне Layout линейки, сетки и линий, помогающих следить за расположением объектов. Тут также можно выбрать варианты отображения сцены в рабочем окне. При включенной опции Smooth Edges and Images объекты будут выглядеть более сглажено. Когда проект, над которым мы работаем, достаточно сложен, и его отображение занимает много времени, эта опция очень удобна.

Пункт меню Insert.

Команды этого пункта главного меню позволяют осуществлять вставку самых разных объектов в проект - изображений (Image), звуковых фрагментов (Soundtrack), кнопок (Button), текстовых элементов (Text). Тут мы также можем выбрать один из многочисленных эффектов программы (Effect), которые разбиты по категориям (рисунок 7).

Рисунок 7 - Команды пункта Insert

Appear into position - эффекты этой группы предотвращают появление объекта в сцене, т.е. определяют, каким образом он должен возникнуть.

Disappear from position - эффекты этой группы определяют, как будет исчезать эффект из сцены.

Looping countinuously - эти эффекты будут происходить циклически на протяжении всей анимации.

One off - эффекты этой группы не имеют четкого начала и завершения.

Return to start - эффекты, представленные в этой категории, похожи на эффекты Looping countinuously, но они всегда начинаются и заканчиваются в определенно месте.

При выборе эффекта мы сможемувидеть его на панели Timeline. Для изменения его настроек кликнем по его названию на панели два раза и зададим нужные параметры в появившемся диалоговом окне.

При помощи команды Script можно выбрать и элементы скрипта, чтобы не набирать их вручную. Эта опция пригодиться тем, кому нравится выбирать не из готовых эффектов, а создавать их самостоятельно.

Пункт меню Modify.

При помощи команд этого пункта меню мы сможем сгруппировать несколько элементов сцены в один объект (Grouping), осуществить преобразование (Convert) в объект Button или Sprite, а также проделать обратную операцию (Break).

В этом пункте меню расположены также инструменты управления положением объектов - для поворота на заданный угол, выравнивания и пр. Для текстовых элементов можно подобрать нужный шрифт и выравнивание.

Пункт меню Control.

Команды, представленные в этом пункте меню, полностью повторяют кнопки панели инструментов Control Toolbar.

Пункт меню Tools.

Этот пункт меню содержит три команды:

- Preferences - отвечает за общие настройки программы.

- Customize - позволяет настроить панели инструментов и пункты меню, а также задать комбинации клавиш для выполнения тех или иных операций.

- Keyboard Map - выводит на экран окно со списком используемых в программе горячих клавиш (рисунок 8).

Рисунок 8 - Окно Keyboard Map

Пункт меню Panels.

Этот пункт меню позволяет включать и отключать отображение всех панелей программы, включая также и рассмотренные выше закладки окна Scene. Заметим, что любые панели можно также закрывать вручную, а также перемещать их в любое удобное место на экране.

На этом рассмотрение настроек программы можно считать завершенным.

Теперь можно подвести итог.

Программа является многофункциональным Flash-редактором для создания анимации. SWiSHmax позволяет быстро и легко, используя уже готовые шаблоны, создавать разнообразные Flash-элементы. Поддерживает множество спецэффектов, насчитывается которых более 200. Программа имеет понятный, настраивающийся интерфейс, продуманную архитектуру и отличается высокой стабильностью работы.

5.2 Этапы создания сайта

В этом разделе рассмотрим основные этапы создания нашего флеш-проекта, историю создания первого в мире сайта, классификацию веб-сайтов и анализ целей.

Рабочий процесс предполагает несколько основных этапов:

1. Предварительный этап.

Цель предварительного этапа разработки - выявить все требования к дизайну и технологической основе проекта, а также определить цели и задачи ресурса и составить подробный план разработки проекта.

2. Разработка дизайна и архитектуры проекта.

Работа над дизайном сайта предполагает следующие стадии:

- Анализ требований пользовательского интерфейса.

- Интуитивно понятная организация материала и продуманная навигация являются необходимыми условиями эффективного дизайна. Необходимо стремиться к тому, чтобы наша разработка была удобна и понятна любому пользователю.

- Разработка концепции дизайна.

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

- Одобрение дизайна.

- Стадия предполагает согласование и внесение необходимых корректив в первоначальную концепцию дизайна проекта.

- Результатом работы на этапе разработки дизайна и архитектуры проекта станут эскизы всех типовых страниц Веб-сайта.

3. Создание технологической основы.

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

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

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

4. Наполнение контентом.

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

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

5. Тестирование готового решения.

После завершения всех работ по интеграции систем и наладки необходимого оборудования для интернет-проекта будет проведено тестирование.

6. Настройка оборудования и перенос на хостинговую платформу.

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

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

7. Запуск проекта.

После завершения всех процедур и работ по тестированию сайта всё будет готово к открытию для посетителей.

История создания первого в мире сайта.

Первый в мире сайт info.cern.ch появился в 1990 году. Его создатель, Тим Бернерс-Ли, опубликовал на нём описание новой технологии World Wide Web, основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML. Также на сайте были описаны принципы установки и работы серверов и браузеров. Сайт стал и первым в мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём список ссылок на другие сайты.

Все инструменты, необходимые для работы первого сайта, Бернерс-Ли подготовил ещё раньше -- в конце 1990 года появились первый гипертекстовый браузер WorldWideWeb с функционалом веб-редактора, первый сервер на базе NeXTcube и первые веб-страницы.

Родоначальник веба считал, что гипертекст может служить основой для сетей обмена данными, и ему удалось претворить свою идею в жизнь. Ещё в 1980 году Тим Бернерс-Ли создал гипертекстовое программное обеспечение Enquire, использующее для хранения данных случайные ассоциации. Затем, работая в Европейском центре ядерных исследований в Женеве (CERN), он предложил коллегам публиковать гипертекстовые документы, связанные между собой гиперссылками. Бернерс-Ли продемонстрировал возможность гипертекстового доступа к внутренним поисковику и документам, а также новостным ресурсам Интернета. В результате, в мае 1991 года в CERN был утверждён стандарт WWW.

Тим Бернерс-Ли является «отцом» основополагающих веб-технологий -- HTTP, URI/URL и HTML, хотя их теоретические основы были заложены ещё раньше. В 1940-х годах Ванневар Буш выдвинул идеи расширения памяти человека с помощью технических устройств, а также индексации накопленной человечеством информации для её быстрого поиска. Теодор Нельсон и Даг Энгельбарт предложили технологию гипертекста -- «ветвящегося» текста, предоставляющего читателю разные варианты чтения. Xanadu, так и не законченная гипертекстовая система Нельсона, была предназначена для хранения и поиска текста, в который введены взаимосвязи и «окна». Нельсон мечтал связать перекрёстными ссылками все тексты, созданные человечеством.

В настоящее время Тим Бернерс-Ли возглавляет основанный им Консорциум Всемирной паутины (World Wide Web Consortium), который занимается разработкой и внедрением стандартов Интернета.

Классификация веб-сайтов.

По доступности сервисов:

- Открытые - все сервисы полностью доступны для любых посетителей.

- Полуоткрытые - для доступа необходимо зарегистрироваться (обычно бесплатно).

- Закрытые - полностью закрытые служебные сайты организаций (в том числе корпоративные сайты), личные сайты частных лиц. Такие сайты доступны для узкого круга людей. Доступ новым людям обычно даётся через т.н. инвайты (приглашения).

По природе содержимого:

- Статические - всё содержимое заранее подготавливается. Пользователю выдаются файлы в том виде, в котором они хранятся на сервере.

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

По физическому расположению:

- Внешние сайты сети Интернет.

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

По схеме представления информации, её объёму и категории решаемых задач можно выделить следующие типы веб-ресурсов:

1. Интернет-представительства владельцев бизнеса (торговля и услуги, не всегда связанные напрямую с Интернетом):

- Сайт-визитка - содержит самые общие данные о владельце сайта (организация или индивидуальный предприниматель). Вид деятельности, история, прайс-лист, контактные данные, реквизиты, схема проезда. Специалисты размещают своё резюме. То есть подробная визитная карточка.

- Каталог продукции - в каталоге присутствует подробное описание товаров/услуг, сертификаты, технические и потребительские данные, отзывы экспертов и т.д. На таких сайтах размещается информация о товарах/услугах, которую невозможно поместить в прайс-лист.

- Интернет-магазин - веб-сайт с каталогом продукции, с помощью которого клиент может заказать нужные ему товары. Используются различные системы расчётов: от пересылки товаров наложенным платежом или автоматической пересылки счета по факсу до расчётов с помощью пластиковых карт.

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

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

2. Информационные ресурсы:

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

- Тематический портал - это очень большой веб-ресурс, который предоставляет исчерпывающую информацию по определённой тематике. Порталы похожи на тематические сайты, но дополнительно содержат средства взаимодействия с пользователями и позволяют пользователям общаться в рамках портала (форумы, чаты) - это среда существования пользователя.

3. Веб-сервис - обычно решает конкретную пользовательскую задачу напрямую связанную с сетью Интернет:

- Поисковые сервисы - например, Яндекс, Google.

- Почтовый сервис.

- Веб-форумы.

- Блоговый сервис.

- Фотохостинг - например, Flickr, ImageShack, Panoramio, Photobucket.

- Хранение видео -- например, YouTube, RuTube.

- Доска объявлений.

- Каталог сайтов - например, Open Directory Project.

По отношению к посетителю:

- Вовлекающий сайт.

- Безразличный к посетителю.

Анализ целей.

Целью разработчика является донести до потребителя полную информацию о компании и заинтересовать его для дальнейшей покупки изделия.

Целью пользователей является поиск необходимой информации с последующей покупкой на выгодных для него условиях.

Со стороны разработчика необходимо проанализировать сильные и слабые стороны конкурентов, информационное проектирование сайта, разработку его концепции, понимание аудитории на которую сайт рассчитан.

Это важный этап, поскольку он определяет дальнейшую работу над сайтом - дизайн, программирование, написание кода. Описание и анализ каждого этапа проектирования веб-сайта позволяет оценить его с разных позиций, - как пользователей, так и создателей, что должно сделать разрабатываемый проект интересным и удобным для целевой аудитории, а авторам лучше понять его предназначение и структуру.

6. Проектирование флеш-сайта

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

Итак, когда мы ознакомились с информацией, которая должна быть на сайте, проанализировали цели Заказчика и разработчика, перейдём непосредственно к разработке веб-проекта.

Создание веб-сайтов - это процесс, результатом которого будет качественный сайт, который может и должен стать еще одним источником клиентов и доходов. Мы разделим создание сайта на два этапа:

- проектирование и создание основных экранов;

- проектирование и создание второстепенных экранов.

Ознакомимся с каждым этапом более подробнее.

6.1 Проектирование и создание основных экранов

Основным экраном в нашей программе является главная страница сайта. На ней пользователю видно основное меню (рисунок 9).

Рисунок 9 - Основное меню сайта

Исходя из этого, он может на своё усмотрение выбрать необходимую ссылку и изучить информацию, которая будет отражена в следующем окне.

Давайте рассмотрим, какую информацию может получить пользователь при нажатии на ту или иную ссылку.

- в данном окне расположена краткая информация о компании, о её руководителе и о преимуществах перед конкурентами (рисунок 10).

Рисунок 10 - О компании

- на этой странице находится полный список производимых изделий (рисунок 11).

Рисунок 11 - Наши изделия

- в данном разделе пользователь может просмотреть осуществляемые компанией услуги (рисунок 12).



Рисунок 12 - Услуги

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

Рисунок 13 - Каталог

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

Рисунок 14 - Контакты

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

6.2 Проектирование и создание второстепенных экранов

К второстепенным экранам отнесём те окна, которые будут открываться при нажатии на подпункты главного меню, а именно в разделах «Наши изделия» и «Каталог».

Давайте рассмотрим, какая информация там содержится.

Подпункты раздела «Наши изделия» (рисунок 15).



Рисунок 15 - Второстепенное меню раздела «Наши изделия»

При нажатии на ссылку, пользователю будет предоставлена следующая информация (рисунок 16):

Рисунок 16 - Заборные секции

При нажатии на пункт, пользователь увидит следующее окно (рисунок 17):



Рисунок 17 - Оконные решётки

Подпункт содержит следующую информацию (рисунок 18):

Рисунок 18 - Ворота

Далее следует раздел (рисунок 19).



Рисунок 19 - Навесы

На вкладке пользователь может ознакомиться со следующей информацией (рисунок 20):

Рисунок 20 - Гаражи

Далее следует раздел (рисунок 21).



Рисунок 21 - Вагоны

Перейдя по ссылке, перед нами откроется окно следующего содержания (рисунок 22):

Рисунок 22 - Ангары

На вкладке мы увидим такую информацию (рисунок 23):



Рисунок 23 - Теплицы

И последний подпункт меню «Наши изделия» (рисунок 24).

Рисунок 24 - Ограждения

Итак, мы рассмотрели все второстепенные окна меню «Наши изделия», теперь приступим к подпунктам меню «Каталог».

Подпункты раздела «Каталог» (рисунок 25).

Рисунок 25 - Второстепенное меню раздела «Каталог»

При нажатии на ссылку мы можем прочитать следующую информацию (рисунок 26):

Рисунок 26 - Оконные решётки

Далее следует вкладка (рисунок 27).



Рисунок 27 - Ворота

В разделе находится следующая информация (рисунок 28):

Рисунок 28 - Теплицы

Так как ограждений несколько видов, то я разделила их на три группы: «Балконные», «Лестничные» и «Газонные».

Начнём с раздела ограждения (рисунок 29).

Рисунок 29 - Балконные ограждения

Далее идёт раздел ограждения (рисунок 30).

Рисунок 30 - Лестничные ограждения

И, наконец, самый последний раздел меню «Каталог» ограждения (рисунок 31).

Рисунок 31 - Газонные ограждения

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

Рисунок 32 - Полоса прокрутки

Теперь, когда у нас готовы все разделы, нам необходимо защитить наш флеш-сайт от программ-декомпиляторов, которые используют «любители» копирования авторских прав, в последующем, выдавая их за свои.

6.3 Защита флеш-сайта от декомпиляторов

Быстрое развитие мультимедиа и интернет-технологий в последние годы вызывает потребность в защите такой интеллектуальной собственности, как программные продукты. Сегодня, можно с уверенностью сказать, что защитить сайт на 100% от несанкционированного доступа к его ресурсам невозможно. Но можно попробовать защитить наш сайт на 50-70% , хотя бы от начинающих взломщиков, которые используют для этой цели специальные программы, называемые декомпиляторами.

Декомпиляция -- процесс воссоздания исходного кода декомпилятором.

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

Обфускация (от лат. obfuscare -- затенять, затемнять; и англ. obfuscate -- делать неочевидным, запутанным, сбивать с толку), или запутывание кода -- приведение исходного текста или исполняемого кода программы к виду, сохраняющему ее функциональность, но затрудняющему анализ, понимание алгоритмов работы и модификацию при декомпиляции.

«Запутывание» кода может осуществляться на уровне алгоритма или на уровне исходного текста, ассемблерного текста. Для создания запутанного ассемблерного текста могут использоваться специализированные компиляторы, использующие неочевидные или недокументированные возможности среды исполнения программы. Существуют также специальные программы, производящие обфускацию, называемые обфускаторами (англ. Obfuscator).

На сегодняшний день существует очень много программ - обфускаторов, но мы возьмём за основу для защиты нашего флеш-сайта программу Flashincrypt. Она очень проста в использовании, но при этом очень хорошо скрывает исходный код от посторонних глаз. Итак, приступим.

Для того чтобы провести обфускацию, достаточно запустить программу Flashincrypt и выбрать файлы, нуждающиеся в защите. Для примера возьмём файл main.swf (рисунок 33).

Рисунок 33 - Выбор файла

Далее ставим галочку рядом с нужным нам файлом и нажимаем на кнопку Start (рисунок 34).



Рисунок 34 - Начало защиты

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

Рисунок 35 - Итог защиты

Теперь мы можем с уверенностью сказать, что защитили наш сайт на 50-70% от начинающих взломщиков.

7. Руководство пользователя

Для нормальной работы с данным программным продуктом требуется IBM-совместимый компьютер следующей конфигурации:

- тактовая частота процессора не менее 85 МГц;

- оперативная память не менее 16 МВ;

- видеоадаптер SVGA;

- объём свободного места на жёстком диске не менее 50 МВ;

- операционная система Microsoft Windows 95/98/NT/2000/XP;

- установленный flash player;

- необходимо наличие браузера;

- желательно использовать манипулятор типа «мышь».

Чтобы обеспечить удобство для работы с данным программным продуктом, желательно произвести следующие настройки экрана: минимальное разрешение экрана 800600 точек на дюйм, цветовая палитра не ниже 16 бит, частота кадров монитора не менее 85 Гц.

Для запуска флеш-сайта необходимо запустить браузер (например Opera), набрать в строке адреса url нашего проекта, в следствие чего мы увидим следующий рисунок (рисунок 36).

Рисунок 36 - Предварительная страница флеш-сайта

Для того чтобы просмотреть весь сайт, нужен установленный на вашем компьютере Flash-плеер. Если вы ещё не установили его, достаточно перейти по ссылке «download flash» и скачать его с последующей установкой.

Затем нажимаем «enter» и видим следующее окно (рисунок 37):

Рисунок 37 - Главная страница флеш-сайта

На данной странице перед нами находится меню, из которого непосредственно можно узнать о компании, о предоставляемых услугах и изготавливаемых изделиях, а также просмотреть каталог изготавливаемых моделей металлоизделий и контактные данные в разделе «Контакты».

8. Выводы и предложения

В ходе создания флеш-сайта мною были получены практические навыки при работе в сфере вычислительной техники и Web-технологии.

При создании сайта мне пришлось совмещать сразу несколько функций различных специалистов и решать соответствующие им задачи, например такие как:

· Дизайнер:

- разработка эскизов типовых страниц и элементов сайта;

- создание графических форм и элементов навигации;

- актуализация элементов дизайна.

· Веб-технолог:

- скриптинг;

- разработка, установка и настройка интерактивных сервисов;

- разработка интерфейса и механизмов системы администрирования сайта.

· HTML-кодер:

- верстка и адаптация текстового наполнения;

- оптимизация HTML-кода;

- размещение иллюстраций и графических элементов.

· Редактор-копирайтер:

- редактирование и корректура текстов;

- написание дополнительных текстовых блоков;

- контент-менеджмент.

При этом мною были решены следующие частные задачи:

- ознакомление с современными Интернет-технологиями и их использование в настоящей разработке;

- изучение программного инструментария, применяемого для разработки и создания Web-сайтов;

- выявление и учет методов и способов представления на Web-страницах различных видов информации, не препятствующих их доступности;

- ознакомление с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительное следование им на практике;

- определение структуры Web-страниц;

- выбор стратегии разработки и создание флеш-сайта.

В результате проведенных работ на базе выбранных технологий был создан flash-сайт о компании «САМ» и изготавливаемых данным предприятием металлоизделиях. В дальнейшем планируется развитие сайта с помощью более полной информации о компании.

9. Безопасность жизнедеятельности

9.1 Техника безопасности при работе с персональным компьютером

Приступая к работе с персональным компьютером, необходимо всегда помнить, что это очень сложная и дорогая аппаратура, которая требует аккуратного и осторожного обращения с ней, высокой самодисциплины на всех этапах работы с компьютером.

Напряжение питания персонального компьютера (220 В) является опасным для жизни человека. В связи с этим в конструкции блоков компьютера, межблочных соединительных кабелях предусмотрена достаточно надежная изоляция от токопроводящих участков. Пользователь практически имеет дело с несколькими выключателями питания и, казалось бы, застрахован от поражения электрическим током. Однако в практической работе встречаются непредусмотренные ситуации, и чтобы они не стали опасными для пользователя, необходимо знать и четко соблюдать ряд правил техники безопасности. Это поможет не только избежать несчастных случаев и сохранить здоровье, но и гарантирует сохранность аппаратуры.

Особенно внимательным надо быть при работе с дисплеем, электронно-лучевая трубка которого использует высокое напряжение и является источником электромагнитного излучения. Неправильное поведение с дисплеем и другой электронной аппаратурой может привести к тяжелым поражениям электрическим током, загоранию аппаратуры. В связи с этим строго ВОСПРЕЩАЕТСЯ:

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

- работа на компьютере требует постоянного внимания, четких действий и самоконтроля. В связи с этим на компьютере нельзя работать при плохом освещении, высоком уровне шума дотрагиваться до экрана и тыльного бока дисплея, проводов питания и устройств заземления, соединительных кабелей;

- нарушать порядок включения и выключения аппаратурных блоков, стараться самостоятельно устранить выявленную неисправность в работе аппаратуры;

- класть на аппаратуру посторонние предметы;

- работать на компьютере во влажной одежде и с влажными руками.

Во время работы на компьютере НЕОБХОДИМО:

- строго соблюдать положения инструкции по эксплуатации аппаратуры;

- внимательно следить за исправностью основных блоков и устройств;

- работать на клавиатуре чистыми руками, не нажимать на те или иные клавиши без необходимости;

- работая с дискетами, оберегать их от ударов, кручения, действий магнитного поля или тепла, не дотрагиваться до дискеты, вставлять дискету в дисковод только после его включения, убедившись в правильном ориентировании дискеты относительно щели дисковода;

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

Во время работы на компьютере электронно-лучевая трубка дисплея является источником электромагнитного излучения, которое при работе близко от экрана разрушительно влияет на зрение, вызывает усталость и снижает работоспособность. В связи с этим необходимо работать на расстоянии 60-70 см от экрана, соблюдать правильность осанки, не сутулясь и не наклоняясь.

9.2 Электроопасность и защита от поражений током

Тело человека хорошо проводит электрический ток. При случайном (аварийном) включении человека в электрическую цепь ток оказывает на него поражающие действия различной степени тяжести, вплоть до смертельного исхода. Если принять число пострадавших от электрического тока за 100 %, то лица, чья профессия связана с электричеством, составляет около 50 %.

Анализ причин несчастных случаев показывает, что соприкосновение человека с проводами и токоведущими частями чаще происходят случайно и не вызываются производственной необходимостью. Кроме того, поражения током возникают при ошибочной подаче напряжения во время ремонтов и осмотров электрических сетей. Отсюда можно сделать вывод, что решающую роль в обеспечении электробезопасности играет психологический фактор. При постоянной работе с электроустановками, находящимися под напряжением, следует всегда помнить об опасности поражения током.

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

Степень поражения человека электрическим током зависит от многих факторов. К ним относятся: напряжение и сила тока, время его воздействия, пути, по которым ток проходит по телу человека при включении его в цепь, род тока (постоянный или переменный), а также частота переменного тока.

Пути прохождения тока через тело человека могут быть различными: от руки к другой руке, от руки к ноге, от ноги к ноге. Самым опасным является прохождение тока от руки к руке, когда на пути тока оказываются сердце и легкие человека, опасность серьезного поражения при этом сильно возрастает.

Действие тока на человека как на биологическую систему проходит четыре стадии:

1. начало ощущения (0,5-1,5 мА переменного и 5-7 мА постоянного тока) - зуд. жжение, легкое покалывание;

2. судороги (8-16 мА переменного и 40-80 мА постоянного тока), из-за которых человек не может самостоятельно освободиться от соприкосновения с токоведущими частями, а вследствие судорог голосовых связок - позвать на помощь;

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

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

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

Заключение

браузер сайт гипертекстовый тег

Глобальная информатизация общества приводит к тому, что потребность в информации, растет с каждым новым пользователем сети. При этом задачей специалистов в области информационных технологий обеспечить пользователей полной и достоверной информацией путем простого и удобного для пользователей доступа к накопленным массивам данных.

В данной дипломной работе был рассмотрен широкий, однако далеко не полный ряд всевозможных методов, используемых в настоящее время. Очевидно, что задача создания полномасштабного web-приложения уже давно вышла за рамки возможностей одного человека. Спектр узких квалификаций в этой области многократно вырос за последние несколько лет, и продолжает расширяться.

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

Web-страница - это лицо фирмы, именно поэтому сегодня Web-дизайну уделяется такое огромное внимание, ибо от него на прямую зависит популярность того или иного информационного ресурса Сети. Недаром сейчас профессия Web-дизайнера является одной из самых высокооплачиваемых

Человек, создающий Web-страницу, соединяет свои знания и навыки со своим творческим потенциалом. Умение творить - вот что отличает настоящего Web-дизайнера. Для того чтобы создать web-страницу, которая бы радовала глаз, нужно сочетать в себе качества художника и программиста.

Литература

1. Каймин В.А., Жданов В.С. «Информатика» для поступающих в ВУЗы: - М.: АСТ, 1996.

2. Фигурнов В.Э. IBM PC для пользователя: - М., 1996. - 432с.

3. Кузнецов М.В., Симдянов И.В. Самоучитель PHP. - 2-е изд., перераб. и доп. - СПб.: БХВ-Петербург, 2006.

4. Гурвиц М. Использование Macromedia Flash MX / М. Гурвиц, Л. Мак Кейб. - М.: Издательский дом "Вильяме", 2003. - 691с.

5. Оборудование классных комнат общеобразовательных школ: каталог / М-во образования РФ, Моск. гос. пед. ун-т. - М.: МГПУ, 2002. - 235с.

Размещено на Allbest.ru

...