Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

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

Содержание:

Введение

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

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

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

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

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

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

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

Предмет исследования — Web-технологии.

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

Цель курсовой работы — рассмотреть критерии выбора и возможности практического использования средств разработки Web-приложений.

Задачи, которые следует решить для достижения поставленной цели:

  1. раскрыть основные определения Web-технологий;
  2. представить классификации различных Web-приложений;
  3. определить психофизиологические требования к Web-приложениям;
  4. рассмотреть критерии выбора и применения средств разработки Web-приложений;
  5. раскрыть функциональные возможности средств разработки Web-приложений.

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

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

Понятие и классификация Web-технологий

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

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

  • программы-серверы, размещённые во всемирной сети;
  • программы-клиенты, находящиеся на устройсте позователя и использующие ресурсы программ-серверов. [1,с.6]

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

В зависимости от языка, на котором они созданы, Web-сайты классифицируются на статические и динамические.

Стандартным языком для создания Web-приложений является HTML (HyperText Markup Language — язык разметки гипертекста). Язык изобрёл британский учёный Тим Бернерс-Ли в 1991-1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). Цель создания имела практическое и научное значение — это должен был быть универсальный язык для обмена документацией (технической и научной), которую можно без искажений прочесть на разных платформах, без привязки к средствам отображения. То есть, язык HTML был изначально задуман как кросс-браузерный и кросс-платформенный. [16,с.23-25] Созданные на этом языке документы имеют расширение .htm или .html и являются текстовыми файлами ASCII с командами форматирования в виде тегов (англ. tag — метка), задающих стили текста, формат абзацев, списков, гиперссылок.

Расширением языка HTML являются каскадные таблицы стилей (CSS — Cascading Style Sheets). CSS — это язык, содержащий набор свойств для описания различных элементов HTML-документов. [1,с.39]

Web-сайты, созданные с использованием чистого языка HTML, являются статическими, оставаясь неизменными до тех пор, пока не будут обновлены администратором. Пользователи не могут добавлять или изменять содержимое статических сайтов. [2,с.14]

Использование РНР-подобных языков и MySQL-подобных систем управления реляционными базами данных позволяет создавать динамические Web-сайты, содержимое которых может изменяться в реальном времени. [2,с.37]

Изначально РНР было акронимом от Personal Home Page (Персональная домашняя страница), но впоследствии этот смысл был изменён, согласно соглашению по рекурсивному именованию GNU, и в настоящее время означает PHP Hypertext Preprocessor (Гипертекстовый препроцессор РНР).

Созданные на языке PHP программы выполняются на стороне сервера, а пользователь получает результат в виде страницы HTML. Документы, которые содержат PHP код, обычно имеют расширение .php или .phtml [1,с.42]

MySQL — это система управления реляционными базами данных (СУРБД) с открытым исходным кодом, позволяющая сохранять, сортировать, находить и делать выборки необходимых данных. Сервер MySQL, являясь многопоточным сервером, обеспечивает многопользовательский доступ к данным, с возможностью предоставления доступа только авторизованным пользователям. В MySQL применяется язык запросов к БД SQL (Structured Query Language — язык структурированных запросов).

Без базы данных невозможно создать крупное Web-приложение. Для PHP именно поддержка сервера MySQL является стандартом де-факто, хотя он поддерживает различные базы данных, такие как SQLite и другие. [9,с.21]

Одно из достоинств РНР и MySQL заключается в том, что они могут использоваться в большом количестве различных операционных систем и платформ (аппаратного обеспечения), то есть являются кроссплатформенными (межплатформенными). [4,с.29]

Web-приложения можно классифицировать по таким признакам, как:

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

Требования к Web-приложениям

При создании Web-приложения очень важно продумать его структуру таким образом, чтобы она однозначно понималась и воспринималась большинством пользователей (а в идеале — всеми). [6,с.55]

Следует определиться с целью создания Web-приложения и его возможностями, которыми смогут воспользоваться потенциальные пользователи. На этом этапе делаются наброски дизайна, навигационных элементов и информационной архитектуры Web-страниц, определяющей структуру всего Web-приложения (сайта, портала). Оценивается удобство (на английском usability — «юзабилити», что означает степень удобства и простоты использования) схемы взаимодействия с пользователем. [10,с.19]

Разработка дизайна Web-приложения, или брендинг, имеет важное значение и объединяет графическое (логотипы, иконки, изображения навигационные и другие элементы управления), цветовое и шрифтовое (темы, представляющие собой каскадные таблицы стилей — CSS) оформление. [8,с.46-49]

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

  • продуманность навигационных элементов и структуры. Пользователь быстро покинет сайт и не вернётся на него, если ему не будет понятно куда нажимать для быстрого получения искомой информации;
  • скорость загрузки. Чем она ниже, тем большее число пользователей не будет дожидаться окончания загрузки и разочаруется эффективностью сайта;
  • адаптированность под различные интернет обозреватели (браузеры). Особое внимание следует уделить наиболее часто используемым браузерам, но в идеале сайт должен корректно отображаться в любом браузере;
  • адаптированность под мобильные устройства. Число пользователей, использующих для Web-серфинга мобильные устройства, неуклонно растёт. Наиболее эффективный способ корректного отображения сайта на мобильных устройствах — адаптивный дизайн, а наиболее трудоёмкий — создание мобильной версии сайта. Можно также применить динамическую вёрстку Web-страниц;
  • реклама, если она присутствует, не должна мешать доступу к основному содержимому, не перекрывать информацию, в противном случае резко снизится популярность сайта;
  • всплывающие (pop-up) окна, если они применяются, должны иметь кнопку закрытия, не должны зацикливаться (закрытие одного окна приводит к открытию другого), должны появляться единожды при посещении страницы, а не при каждом её обновлении;
  • удобство интерфейса и дизайн сайта;
  • информационная составляющая Web-станиц. Текст должен быть «свеж», достоверен, легко читаться, соответствовать профилю Web-сайта, быть интересен и полезен пользователю, не содержать избыточную, утомляющую пользователя информацию.

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

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

  1. Содержательные и не очень длинные заголовки, желательно из 40-60 символов, чётко дающие понять, о чём будет идти речь.
  2. В противовес русской «красной строке» — английские абзацы, т.е. такое форматирование текста, когда между абзацами помещается пустая строка. Каждый абзац должен содержать лаконично выраженную законченную мысль. За счёт этого достигается «телеграфичность».
  3. Текст должен быть легко читаемым, т.е. такого цвета и размера, чтобы он был разборчив, не мелок, хорошо контрастировать с фоном документа. Очень полезно сделать кнопку для изменения размера шрифта и фона пользователем.

Соблюдение этих несложных правил будет способствовать привлечению пользователей. [16,с.81-82с]

При создании Web-приложений следует применять правило «мягкой деградации», то есть необходимо увеличивать возможности в соответствии с возможностью интернет обозревателя использовать их, а не наоборот. К примеру, можно применять самые новые Web-технологии, поддерживаемые небольшим количеством самых современных интернет обозревателей, при вёрстке, но учитывать, что, например, через год число этих современных браузеров существенно вырастет. В этом случае использованные Web-технологии будут выглядеть у небольшого количества пользователей отлично, у остальных — хорошо или удовлетворительно. Но с развитием Web-технологий будут совершенствоваться и браузеры, таким образом число пользователей, у которых Web-приложение отображается хорошо и удовлетворительно, будет уменьшаться. [11,с.9]

Психофизиологические требования к Web-приложениям

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

  • последовательность, подразумевающая, что составляющие 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 века в Интернете стали появляться первые сайты со статическим содержимым. Размещаемая на них информация не была адаптирована под особенности восприятия с экранов различных разрешений. Основу дизайна в большинстве случаев составляла главная страница сайта, «украшенная» избыточной графикой. Интеграции с внутренними и внешними приложениями в то время ещё не было.

На рубеже 20 и 21 веков появилось само понятие «динамический сайт, использующий систему управления контентом». Предпринимаются попытки учесть особенности восприятия информации посетителями сайта. Иллюстрации применяются только в случае, когда они действительно необходимы. Сайт интегрируется с внутренними системами, другими сайтами и мобильными сервисами. [14,с.35]

Использование таблиц

Для форматирования Web-страницы на области можно использовать и тег <table>, изначально предназначенный для создания обычных таблиц. В ячейках таблицы можно располагать функциональные блоки.

Пример кода таблицы, отображающей логотип сайта.

<table width="100%" border="0" cellspacing="20" cellpadding="0">

<tr>

<td>

<center>

<img src="images/logo.png" width="180" height="60">

</center>

</td>

</tr>

<table>

На русский язык это можно перевести так: «таблица, занимающая всю ширину экрана браузера, содержащая одну строку, один столбец, и, таким образом, одну ячейку с изображением (логотипом шириной 180, высотой 60 пикселей), горизонтально выровненным по центру, без видимых границ, расстояние между ячейками — 20 пикселей, без отступа содержимого от границ ячеек.» [16,с.24-25]

HTML5

Новой версией языка HTML является HTML5 (от англ. HyperText Markup Language, version 5), рекомендованная к использованию версия которого была опубликована в 2014 году. Целью разработки HTML5 является усовершенствование поддержки мультимедиа-технологий при сохранении обратной совместимости, улучшение логичности кода и стандартизации. Благодаря этому код стал более удобно читаем людьми и различными устройствами, работающими на всевозможных платформах.

В HTML5 добавлены новые синтаксические особенности. Самыми значимыми из нововведений являются теги для внедрения видео, аудио и приложений. Теги <video>, <audio>, <canvas> дают возможность обходиться без сторонних Web-технологий, расширений, плагинов для воспроизведения мультимедиа. Например, видеофайл на странице можно разместить, используя следующий простой и интуитивно понятный код:

<video src="MyVideo.webm" poster="MyVideo.jpg" controls></video>

Отпадает необходимость вставлять видеоролик во флеш-плеер, используя теги <object>, <embed> и.т.д.

Тег-контейнер <canvas> («холст» в переводе с англ.) позволяет, используя язык программирования JavaScript, создавать статичные и анимированные изображения, приложения и игры непосредственно на Web-странице. Технология Flash при этом становится ненужной, для не требуется скачивать устанавливать Flash-плеер, новая технология будет работать на устройствах, которые принципиально не поддерживали Flash-технологии, таких как устройства Apple.

Возможности JavaScript, внедрённые на Web-страницу при помощи тега <canvas>, очень широки:

  • игры;
  • Web-приложения;
  • элементы для привлечения внимания;
  • изображения;
  • 3D-объекты;
  • и многое другое.

Очень ценна возможность создавать всё вышеперечисленное без использования сторонних технологий и приложений.

Браузеры, поддерживающие HTML5, имеют возможность отображать масштабируемую векторную графику — SVG (от англ. Scalable Vector Graphics), поддерживающую статичные, анимированные и интерактивные изображения.

Теги <section>, <article>, <header>, <footer>, <nav> делают понятной структуру Web-страницы, её разбивку на разделы. Например, область шапки страницы теперь достаточно заключить в тег <header>…</header> вместо <div id="header">…</div>. [17,с40-48]

Внедрение PHP-кода в HTML-файл

В отличие от JavaScript, выполняемого на клиентской стороне браузером пользователя, PHP-код интерпретируется и выполняется на серверной стороне. Интерпретатор, выполняя сценарий, заменяет его строками вывода, которые в результате отображаются на Web-странице. Таким образом, из среды PHP можно полностью создать HTML-код, который будет отображаться в любом браузере, и этот браузер не обязательно должен понимать язык PHP. [18,с.26-29]

Заключение

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

С развитием web-технологий в Интернете продолжает расти количество Web-сайтов самых различных тематик — от порталов больших фирм до блогов и крохотных сайтов рядовых пользователей «Всемирной Паутины».

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

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

Разработка и создание Web-сайта/портала включает в себя:

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

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

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

1. Алексеев А. П. Введение в Web-дизайн: учебное пособие. — М.: СОЛОН-ПРЕСС, 2008. — 192 с.: ил.

2. Бабаев А., Евдокимов Н., Боде М. Создание сайтов — СПб.: ООО Издательство «Питер», 2014. — 203 c.

3. Бикнер К. Экономичный Web-дизайн / Кэрри Бикнер; Пер. с англ. Д.С. Ремизова. - М.: НТ Пресс, 2005. - 248 с.: ил.

4. Веллинг, Люк, Томсон, Лора. Разработка веб-приложений с помощью РНР и MySQL, 4-е изд.: Пер. с англ. — М.: ООО «И.Д. Вильямс», 2010. - 848 с.: ил. - Парал. тит. англ.

5. Горнаков С. Г. Осваиваем популярные системы управления сайтом (CMS). – М.: ДМК Пресс, 2009. – 336 с.: ил.

6. Евсеев Д.А. Web-дизайн в примерах и задачах: учебное пособие / Д.А. Евсеев, В.В. Трофимов; под ред. ВВ. Трофимова. — М.: КНОРУС, 2016. — 264 с.

7. Кирсанов Д. Веб-дизайн, 1999 — 173 c.: ил.

8. Кирьянов Д.В. Разработка приложений Web 2.0 на Microsoft Sharepoint — М.: Национальный Открытый Университет «ИНТУИТ», 2016. — 371 c.: ил.

9. Колисниченко Д. Н. РНР и МуSQL. Разработка веб-приложений. — 5-е изд., перераб. и доп. СПб.: БХВ-Петербург, 2015. — 592 с.: ил.

10. Круг С. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!», 2-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2008. – 224 с.: цв. ил.

11. Мациевский Н., Степанищев Е., Кондратенко Г. Реактивные веб-сайты, 2009.- 272 с.

12. Машнин Т. С. Eclipse: разработка RCP-, Web-, Ajax- и Android-приложений на Java. — СПб.: БХВ-Петербург, 2013. — 384 с.: ил.

13. Машнин Т. С. Google App Engine Java и Google Web Toolkit: разработка Web-приложений. — СПб.: БХВ-Петербург, 2014. — 352 с.: ил.

14. Овчинников Р., Сухов С. Корпоративный веб-сайт на 100%. Требуйте от сайта большего! — СПб.: Питер, 2009. — 320 с.: ил.

15. Пьюривал С. Основы разработки веб-приложений. — СПб.: Питер, 2015. — 272 с.: ил.

16. Сырых Ю.А. Современный веб-дизайн. Рисуем сайт, который продает. — М. : ООО «Вильямс», 2008. — 304 с.: ил.

17. Сырых Ю.А. Современный веб-дизайн. Эпоха Веб 3.0. 2-е изд. - М.: 000 «И.Д. Вильямс», 2013. - 368 с.: ил.

18. Томсон Лаура Разработка Web-приложений на РНР и MySQL, Пер. с англ./Лаура Томсон, Люк Веллинг. — 2-е изд., испр. — СПб: ООО «ДиаСофтЮП», 2003. — 672 с.

19. Хольцшлаг М., Молли Е. — Языки HTML и CSS: для создания Web-сайтов: [учеб. пособие] / М. Хольцшлаг; [пер. с англ. А. Климович]. — М.: ТРИУМФ, 2007. — 304 с.: ил.