Файл: Критерии выбора средств разработки WEB-приложений (Требования к Web-приложениям).pdf

• последовательность, подразумевающая, что составляющие Web-сайт документы должны отражать общий стиль;
• графические примитивы, представляющие собой логотипы, элементы дизайна также должны соответствовать выбранному стилю Web-приложения. Фоновые изображения не должны мешать восприятию текстовой информации, не сливаться с текстом;
• привлекающие элементы (на англ. это называется callouts), основным видом которых являются гиперссылки, не должны быть навязчивыми и раздражающими — использовать крупный шрифт, яркие цвета, мигать и т.д.;
• цветовая гамма не должна использовать сильных контрастов, содержать в идеале не более 3-4 цветов; важно следить за смешиванием тёплых (жёлтый) и холодных (синий), а также пастельных оттенков. Цветовая гамма должна сочетать привлекающие взгляд цвета, и при этом быль лишённой дисгармонии и пестроты.

Используя эти несложные правила необходимо унифицировать стиль отображения всего проекта. [6,с.200-201]

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

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

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

Для изображений, размер которых по ширине или высоте менее ста пикселов, актуальным выбором является графический формат PNG. Формат JPEG не приспособлен для изображений малого размера. Однопиксельный файл в формате PNG имеет объём 180 байт, в формате JPEG — 631 байт. [7,с.122]

Особые требования предъявляются к использованию анимированных изображений. Анимация может быть использована при необходимости иллюстрирования сложных протекающих во времени процессов. В других случаях анимированные изображения мешают пользователю сосредоточиться на содержимом и утомляют его зрение. [6,с.238]

Общая стратегия разработки и развития Web-приложения [14,с.39]:

• сформулированы цели и описание проекта, поставлены задачи;
• разработаны структура проекта и прототип его дизайна;
• заданы критерии оценки эффективности работы Web-приложения;
• определён предполагаемый бюджет разработки и поддержки.

Web-дизайн, помимо визуального оформления, включает в себя разработку структуры, навигации и логики проекта, обеспечивающих удобство пользования. Визуальное оформление привлекает пользователей, а удобство и простота навигации — удержать пользователя и способствовать повторным посещениям. [16,с.21-22]

---

В Web-разработке существует термин дизайна навигационного меню — «хлебные крошки» (от англ. «bread crumbs»). Источником возникновения этого термина является сказка «Ганзель и Гретель». По сюжету этой сказки брат и сестра, уйдя в дремучий лес, сумели найти обратную дорогу до дома, благодаря тому, что постоянно бросали хлебные крошки. Этой метафоре, закрепившейся в среде Web-разработчиков, можно дать следующее определение.

«Хлебные крошки» — это навигационное меню, визуализирующее путь по сайту от его главной страницы до текущей в виде цепочки, все элементы которой, кроме последнего (ссылка не должна ссылаться на саму себя), должны быть гиперссылками. «Хлебные крошки» помещают в верхней и/или нижней области Web-страницы.

Пример навигационного меню «Хлебные крошки»: Главная страница → Раздел → Подраздел → Текущая страница

На сайтах с большим количеством уровней вложенности «Хлебные крошки» существенно облегчают навигацию, позволяя мгновенно вернуться на любой уровень выше. [16,с.82]

2. Средства и методы разработки Web-приложений

Существует большое количество средств разработки Web-приложений.

Значительная часть Web-приложений создаётся с использованием языка HTML, возможности которого расширены применением Web-технологий, выполняющихся как на серверной, так и на клиентской стороне:

• CSS, DHTML, Flash, JavaScript, VBScript, ActiveX выполняются на стороне клиента;
• CGI, ASP, SSI, ColdFusion, PHP, Perl, Java выполняются на стороне сервера. [1,с.45]

Современные Web-приложения, как правило, разрабатываются командой программистов, разделяющих общую задачу создания Web-приложения на подзадачи. Командная разработка требует контроля изменений в создаваемом программном коде, обеспечивающего интеграцию и координацию изменений в исходном коде, а также сопровождение истории произведённых изменений. [12,с,79]

Журналирование — сохранение и вывод сообщений на стороне сервера при разработке Web-приложения является важной составляющей контроля работы и процесса отладки. [13,с.34]

Критерии выбора средств разработки напрямую связаны с типом Web-приложения, уровнем сложности разработки, навыками Web-разработчика и финансовыми возможностями заказчика.

Язык HTML является относительно простым, но для его освоения нужно достаточно времени, определённые знания и способности. Для упрощения создания Web-приложений создано множество интуитивно понятных визуальных редакторов, которые генерируют HTML-код, используя режим WYSIWYG (аббревиатура от англ. What You See Is What You Get, «что видишь, то и получишь»). Недостатком подобных редакторов является очень громоздкий код, увеличивающий размер страничек в байтах, при том же видимом информационном наполнении.

---

Пример.

Страничка с единственным предложением:

Критерии выбора средств разработки Web-приложений.

Рисунок 1. HTML-код, вручную созданный в Блокноте (309 байт)

Рисунок 2. Фрагмент HTML-кода, сгенерированного Microsoft Word 2007 (22036 байт)

Методы разработки Web-приложений делятся на две группы:

• написание вручную на одном или нескольких языках с использованием текстовых или визуальных HTML-редакторов. Для статических сайтов достаточным будет использование HTML, CSS, JavaScript. Для динамических сайтов потребуется, для выполнения на стороне сервера, использование PHP, Perl, Java, ASP.
• создание с помощью CMS (аббревиатура от англ. Content Management System, система управления содержимым), устанавливаемая на стороне сервера и представляющая собой готовый программный комплекс, ядро Web-приложения, обеспечивающее его функционирование и интерактивное взаимодействие с пользователями, динамически формируя для них запрашиваемую информацию из баз данных. [2,с.37]

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

К бесплатным CMS относятся такие, как Joomla!, WordPress, Danneo. [5,с.85]

Из коммерческих CMS можно выделить такие, как 1С-Битрикс, DataLife Engine, SharePoint, S.Builder, Slaed CMS, UMI.CMS. [5,с.163]

Кроме CMS при создании сложных динамических Web-приложений используются фреймворки — готовые наборы (каркасы) средств разработки Web-приложений, обеспечивающих механизмы взаимодействия с базами данных. [2,с.39]

Фреймворк (англ. framework, структура, набор, основа, каркас) — структура программной системы, а также специальное программное обеспечение, с помощью которого можно разрабатывать и объединять компоненты Web-приложений. [15,с.13]

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

Технология SSI

Недорогим решением использования шаблонов без CMS является бесплатная технология под названием SSI (аббревиатура от англ. Server-Side Include, серверные вставки). Суть технологии заключается в том, что элементы навигации Web-сайта, его логотип находятся на сервере в разных файлах, но выглядят как часть Web-страницы при отображении в интернет браузере. Таким образом, разработчик может управлять областью навигации и логотипом независимо от основного содержимого Web-страницы. Вот пример листинга разметки с использованием SSI:

---

<body>

<!--#include virtual="/logo.txt" -->

<!--#include virtual="/mainnav.txt" -->

<!--#include virtual="/search.txt" -->

<h1>Основное содержание</h1>

<p>Основное содержание страницы.</р>

<!--#include virtual="/footer.txt" -->

</body>

При открытии Web-страницы с таким кодом в интернет браузере на ней, кроме Основного содержания, будут отображены: логотип сайта, навигационное меню, форма поиска и нижний колонтитул. [3,с.135]

Использование фреймов

Следует отметить, что разделения Web-страницы на области можно достичь и средствами самого языка HTML, используя фреймы (от англ. frame — рамка). Для создания Web-страницы с фреймами, вместо тега <body> применяется тег <frameset>, внутрь которого помещаются теги <frame>, каждый из которых указывает на HTML-документ, размещаемый на стороне сервера и отображаемый в определённой области Web-страницы. Для создания Web-страницы, использующей фреймы, потребуется минимум три HTML-файла. Первый файл будет содержать набор фреймов, оставшиеся два файла будут отображаться в определённых в первом файле областях Web-страницы.

В нижеследующем примере страничка будет разбита по вертикали на три ряда с использованием атрибута rows, определяющего высоту фреймов в процентах от общей высоты. 10% для фрейма «ЛОГОТИП», 85% для, вложенного в основной, набора фреймов «МЕНЮ» и «Содержимое», 5% для фрейма «Нижний колонтитул». В наборе фреймов «МЕНЮ» и «Содержимое» задаётся количество и ширина (в данном примере в пикселах, но можно также использовать проценты) колонок с использованием атрибута cols. Ширина колонки «МЕНЮ» будет 150 пикселов, ширина колонки «Содержимое», заданная символом «звёздочки», означает ей отводится всё оставшееся по горизонтали пространство. В фреймах «ЛОГОТИП», «МЕНЮ» и «Нижний колонтитул» с помощью атрибута scrolling отключено отображение полос прокрутки и с помощью атрибута noresize запрещено изменение их размера.

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

Пример листинга разметки Web-страницы с использованием фреймов:

frameset.htm, который определяет состав, размеры и расположение фреймов:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Набор фреймов</title>

---

</head>

<frameset rows="10%,85%,5%">

<frame src="logo.htm" name="логотип" scrolling="no" noresize>

<frameset cols="150,*">

<frame src="menu.htm" name="меню" scrolling="no" noresize>

<frame src="content.htm" name="содержимое">

</frameset>

<frame src="footer.htm" name="нижний_колонтитул" scrolling="no" noresize>

</frameset>

</html>

logo.htm, верхний фрейм, где будет помещён логотип Web-сайта:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

</head>

<body>

<p style="text-align:center;line-height:30pt">ЛОГОТИП</p>

</body>

</html>

menu.htm, меню Web-сайта:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

</head>

<body>

<p><center>МЕНЮ</center></p>

</body>

</html>

content.htm, содержимое Web-страницы:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

</head>

<body>

<p>Содержимое Web-страницы.</p>

</body>

</html>

footer.htm, нижний колонтитул Web-сайта:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

</head>

<body>

<p><center>Нижний колонтитул</center></p>

</body>

</html>

В интернет браузере созданная таким образом Web-страница будет выглядеть так:

Рисунок 3. Вид страницы, использующей набор фреймов, в интернет браузере.

Язык HTML также позволяет создать фрейм непосредственно в содержимом Web-страницы с использованием тега <iframe></iframe> следующей конструкции:

<iframe src="" width="" height="" frameborder=0></iframe>

где

src — имя и адрес Web-страницы, которая будет отображена;

width и height — ширина и высота фрейма;

frameborder — ширина границ фрейма.

К недостаткам фреймов можно отнести следующие:

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

В 90-х годах 20 века в Интернете стали появляться первые сайты со статическим содержимым. Размещаемая на них информация не была адаптирована под особенности восприятия с экранов различных разрешений. Основу дизайна в большинстве случаев составляла главная страница сайта, «украшенная» избыточной графикой. Интеграции с внутренними и внешними приложениями в то время ещё не было.

---