Сравнительный анализ сред создания Web-приложений

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

Macromedia Dreamweaver

Компания Macromedia продолжает делать Dreamweaver интуитивно понятной и простой в использовании программой. Мощные средства с одной стороны и простота в использовании – с другой, делают продукты Macromedia идеальными программным пакетом, как для профессиональных web-дизайнеров, так и для новичков. Продукты, входящие в пакет Macromedia, такие как: Flash, Firework, Dreamweaver - сделают работу более продуктивной, и при этом могут заменять друг друга (так, например, в любой из них можно создать кнопки). Такие продукты как: Sitespring, FreeHand – добавит эффективности при работе с клиентом.

У Dreamweaver множество плюсов:

Программа Dreamweaver поддерживает "чистый" HTML код, а также последние расширения DHTML и CSS.

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

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

Применяется "Динамическая проверка для различных браузеров".

Поддерживает расширения, как сторонних разработчиков, так и самой Macromedia (более 500).

С Dreamweaver поставляется библиотека элементов, которые можно применять на WEB-страницах, например панель навигации, дескриптор авторского права и др.

Применяется для добавления мультимедийных средств на web-страницы и различных типов файлов от Flash и Java до RealAudio, интерактивных элементов, таких как поисковые системы, форумы, системы электронной коммерции.

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

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

Macromedia Fireworks

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

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

Macromedia FreeHand

Один из трех профессиональных графических редакторов, ведущих с переменным успехом борьбу за первенство в работе с векторной графикой. FreeHand гораздо быстрее и проще своих конкурентов - CorelDraw и Adobe Illustrator. FreeHand прекрасно подходит для создания логотипов, рекламы, Web-графики и анимации.

Изготовители программы приложили немало усилий, чтобы максимально облегчить жизнь пользователям: интерфейс программы прост и нагляден, имеется множество "примочек", позволяющих быстро и легко выполнять сложные преобразования объектов или достичь самых разных художественных эффектов. FreeHand умеет экспортировать и импортировать файлы практически во всех широко распространенных форматах. Более того, в его состав входят настройки "горячих клавиш", эмулирующие другие распространенные программы (Adobe Illustrator, CorelDraw). Так что не надо переучиваться, переходя на FreeHand.

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

Документы FreeHand легко превращаются в web-страницы. Конечно, FreeHand - не HTML-редактор, но поддерживает базовые элементы HTML. С помощью FreeHand WEB-страницы легко снабдить Flash-анимацией. В анимационный клип вставляются текстовые блоки, группы объектов, а также объекты с контурами. Небольшой клип из объектов FreeHand создается буквально одной командой - остается лишь проследить за некоторыми настройками. Каждый кадр клипа помещается на отдельный слой; анимационный эффект достигается последовательным воспроизведением содержимого отдельных слоев. Но средства FreeHand не заменят редактор Macromedia Flash.

Macromedia FLASH

Создаёт привлекательные интерактивные мультимедийные презентации, для WEB-сайтов. Для Flash характерна векторная графика и анимация, хотя эта программа может быть также использована для манипулирования или отображения растровой графики, монтажа видеоматериала и даже для манипулирования звуковыми файлами.

Flаsh-содержимое публикуется в компактных файлах формата SWF для последующего показа на самых разных платформах с помощью Flаsh-проигрывателя. Во время воспроизведения файла формата SWF в оперативном режиме в него можно динамически загружать такое содержимое, как звуковые файлы формата МР3, Flash-видео и изображения формата JPEG. Flash-проигрыватель позволяет подключаться к источникам данных, чтобы объединить их с базой данных, XML или web-службами. Благодаря всем этим возможностям привлекательные фрагменты анимации и эффекты могут быть введены в приложения, управляемые данными. Flash имеет поддержку антиалайсинг (сглаживание контуров с помощью смешения соседних цветов). Так как этот формат файла основан на векторной графике, объект сохраняет качество изображения при любом разрешении и идеален для создания кадров анимации.

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

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

Macromedia HomeSite

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

Гибкость интерфейса - это одна из сильнейших сторон продукта. Любой пользователь с легкостью сможет настроить интерфейс HomeSite в соответствии со своими предпочтениями и потребностями.

В процессе работы пользователь может видеть рабочую область с двумя вкладками - Browse и Edit. То есть программирование происходит во вкладке Edit, а результат можно увидеть, если выбрать вкладку Browse. При создании новой страницы на поле редактирования автоматически появляются некоторые теги вроде HTML и BODY. Это шаблон, загружаемый при создании новой страницы. Его содержание можно менять.

В HomeSite очень легко строить архитектуру сайта. Этому способствует панель Quick Bar с системой вкладок с готовыми тегами. Теги в этих вкладках самые разные - от простых вроде параграфа до java-скриптов. Можно вообще оставить одну вкладку, добавив в нее все необходимые теги через меню Customize. Также можно самому создавать теги или их комбинации. При нажатии на кнопку с определенным тегом появляется окно, где можно настроить опции тега и указать его атрибуты. Поддерживает режим WYSIWYG со всеми его плюсами и минусами.

Для скорости работы здесь имеется множество средств редактирования тегов. Это, например, такие функции, как Tag Completion, Tag Editors и Tag Insight. Они существенно облегчают редактирование тегов и их атрибутов. Так же есть заготовки кода (Code Snippets).

HomeSite легко интегрируется со средствами управления исходным кодом и системами управления проектами, а также предлагает широкие возможности работы с протоколом FTP, благодаря чему мы сможем быстро выполнить развертывание сайта и организовать его эффективное обслуживание [9, с. 185-279].

Microsoft FrontPage

Является наиболее популярным HTML-редактором на рынке, главным образом за счёт популярности пакета Microsoft Office. В программе предлагаются мощные функции и привлекательный пакет программ, включая Image Composer, который предназначен для создания изображений (Приложение В). Во FrontPage также содержатся WEB-компоненты, необходимые для добавления интерактивных свойств web-узлу. Microsoft FrontPage является классическим WYSIWYG-редактором, в котором, однако, присутствует возможность ручной правки кода [6, с. 17].

В программе имеется три режима работы с документом: Normal, HTML и Preview.

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

В режиме HTML осуществляется подсветка синтаксиса, однако довольно посредственную - дескрипторы выделены, синим цветом, все остальное - черного цвета.

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

FrontPage имеет конструктор таблиц, существенно облегчающий их создание. Одним из основных преимуществ программы является большое количество имеющихся шаблонов, позволяющих пользователю не ломать голову над дизайном своего проекта. Выбрав необходимый шаблон, можем приступать непосредственно к наполнению страницы контентом. Вот тут то и ощущается вся прелесть FrontPage: процесс создания HTML-страницы ничем не отличается от создания обычного текстового документа в Microsoft Word. Нам доступны те же средства для редактирования текста, смены его форматирования, создания и редактирования таблиц, вставки различных объектов и изображений и всё это без знания HTML. FrontPage делит рабочую область на несколько блоков, содержащих определенные элементы страницы - рисунки, текст, заголовки и проч. Для каждого блока можно назначить свои параметры форматирования и расположения его относительно страницы.

Минусы: небольшой набор инструментов разработки, невозможность отдельного приобретения программы. Microsoft FrontPage неплохо подойдет в качестве HTML-редактора на первое время, однако с ростом потребностей его возможностей может не хватить. Есть и обратная сторона медали - сложность и громоздкость полученного кода, что естественно, сказывается на конечном размере документа. Также в дальнейшем будет весьма сложно вносить изменения в подобный документ. Но это скорее недостаток не конкретного продукта, а практически всех WYSIWYG-редакторов (What You See Is What You Get - "что видите, то и получите").

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

Microsoft Word

Не смотря на то, что Microsoft Word является текстовым редактором и по существу не считается HTML-редактором. Он имеет возможность сохранять файлы в формате HTML. В результате мы можем столкнуться со страницами которые тем или иным способом были созданы в Microsoft Word. Проблемы в HTML-коде, полученном из редактора аналогичны проблемам FrontPage: обе эти программы создают избыточный код, который не во всём соответствует HTML-стандарта. Огромное количество людей, использующих Word в своей повседневной работе, становятся потенциальными разработчиками HTML-документов.

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

Adobe Illustrator

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

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

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

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

Основная разница между использованием карт ссылок и фрагментов для создания связей состоит в том, как объект экспортируется на web-страницу. Использование карт ссылок сохраняет объект в виде единого файла изображения, а в случае использования фрагментов объект делится на несколько отдельных файлов. Еще одна разница между картами ссылок и фрагментами состоит в том, что карты позволяют связывать многоугольные или прямоугольные области в объекте, а фрагменты – только прямоугольные [1, с. 139].

Adobe Photoshop

Самая популярная и широко распространенная программа редактирования изображений. С её помощью можно создавать высокохудожественные изображения. Она содержит всё необходимое для создания и редактирования профессиональной графики.

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

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

CorelDraw

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

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

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

CorelDraw демонстрирует качества мощного визуального редактора web-страниц: пользователь получает возможность генерировать развитые HTML-документы, которые могут включать сценарии JavaScript и таблицы стилей CSS.

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

При размещении изображений на странице одна из наиболее важных задач - оптимизация размера файлов изображений. Рекомендуемый "потолок" общего размера страницы – от 100 до 150 кбайт. Уменьшение размера файлов изображений выполняется сжатием файлов и уменьшением количества цветов. Эти задачи доступны для любой из графических программ, перечисленных выше [2, с. 85].

Заключение

 

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

Спектр социальных групп, подключающихся к сети Интернет и ищущих информацию в WWW, все время расширяется за счет пользователей, не относящихся к категории специалистов в области информационных технологий. Это врачи, строители, историки, юристы, финансисты, спортсмены, путешественники, священнослужители, артисты, писатели, художники. Список можно продолжать бесконечно. Любой, кто ощутил полезность и незаменимость Сети для своей профессиональной деятельности или увлечений, присоединяется к огромной армии потребителей информации во "Всемирной Паутине".

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

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

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

Создание и разработка сайтов включает:

· утверждение первоначального технического задания на разработку сайта;

· определение структурной схемы сайта - расположение разделов, контента и навигации;

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

· разработка программного кода, модулей, базы данных и других элементов сайта необходимых в проекте;

· тестирование и размещение сайта в сети интернет.

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

 

Глоссарий

 

№ п/п	Понятие	Определение
1	Web-дизайн	это оформление web -страниц
2	Web-сервис	услуги, которые предоставляются в Интернете с помощью специальных программ
3	Браузер	специальная программа просмотра гипертекстового документа
4	Гипертекст	это способ хранения и манипулирования информацией, позволяющий устанавливать связи между любыми "информационными единицами". Связь между информационными единицами осуществляется по гиперссылкам.
5	Гиперссылка	это выделенный фрагмент текста, с помощью которого осуществляется переход от одного документа к другому. Обычно гиперссылки выделяют цветом и подчеркиванием
6	Доменное имя	адрес сетевого соединения (например, www.zenon.net), который идентифицирует владельца адреса
7	Контент	наполнение сайта. Контент сайта соотносится с дизайном, как содержание с формой
8	Плагин	программный компонент-прибавка к браузеру, позволяющий реализовать дополнительные функции
9	Портал	сайт, с которого человек регулярно начинает свою работу в Интернете
10	Сайт	это место в Интернете, которое определяется своим адресом, имеет своего владельца и состоит из web -страниц
11	Тэг	это система условных обозначений, которые вносятся в WWW документ и информируют о том, как данный документ должен выглядеть и как он должен быть связан с другими документами
12	Форма	это элемент web-страницы, предназначенный для ввода информации. Поля формы могут заполняться набором текста, либо выбором значений из списка
13	Форум	это инструмент для общения на сайте
14	Web-сайт	это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес
15	Web-страница	это текстовый файл с расширением *.htm, который содержит текстовую информацию и специальные команды – HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера
16	Язык HTML (Hypertext Markup Language)	это язык форматирования, в котором для задания параметров форматирования используется система тегов
17	Flash	это технология web-мультипликации и создания интерактивного контента компании от Macromedia
18	FTP	это протокол передачи файлов. В настоящее время практически все функции FTP доступны и через HTTP
19	HTTP	это методика передачи web-страниц по сети Интернет
20	URL	это адрес страницы в интернете. URL состоит из доменного имени, пути к странице на сайте и имени файла

Список использованных источников

 

1. Борисенко А.А. Web-дизайн. Просто как дважды два. – М.: Эксмо, 2008.- 320 с.

2. Бурлаков М. В. CorelDRAW 12. – СПб.; БХВ-Петербург, 2004. – 688 с.

3. Джамса Крис. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS,JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер с англ./Крис Джамса, Конрад Кинг, Энди Андерсон - М.: ООО "ДиаСофтЮП", 2005.- 672 с.

4. Дунаев В. Самоучитель JavaScript, 2-е изд. – СПб.: Питер, 2005. – 395 с.

5. Зольников Д.С. PHP5. Как самостоятельно создать сайт любой сложности. – 2-е изд. стер. – М.: НТ Пресс, 2007. – 272с.

6. Инькова Н. А., Зайцева Е. А., Кузьмина Н. В., Толстых С. Г. Создание Web-сайтов: Учебно-методическое пособие. Ч. 5. Тамбов: Изд-во Тамб. гос. техн. ун-та, 2005. – 56 с.

7. Мазуркевич А. РНР: настольная книга программиста /Александр Мазуркевич, Дмитрий Еловой. – Мн.: Новое знание, 2006. – 495 с.

8. Мак-Клелланд Дик. Photoshop 7. Библия пользователя.: Пер. с англ. – М.: Издательский дом "Вильяме", 2006. — 928 с.

9. Орлов Л. В. Web-сайт без секретов. / Л. В. Орлов. – 2-е изд. – М.: Бук-пресс, 2006. – 512 с.

10. Полонская Е.Л. Язык HTML. Самоучитель.: - М.: Издательский дом "Вильяме", 2005.— 320 с.

11. Создание Web-страниц и Web-сайтов. Самоучитель: [учеб. пособие] / под ред. В. Н. Печникова. – М.: Изд-во Триумф, 2006.— 464 с.

12. Якушев, Л. В. Начинаем работать в Интернет. Краткое руководство. – М.: Издательский дом "Вильяме", 2006. —128 с