Web приложение это – Могут ли PWA (Progressive Web Apps) образца 2018 года составить достойную конкуренцию нативным приложениям? / Google corporate blog / Habr

Содержание

Как работают веб-приложения / Habr

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

1. Чем веб-приложения отличаются от сайтов


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

Сайты содержат различную статику, которая как и HTML-файл не генерируется на лету. Чаще всего это картинки, CSS-файлы, JS-скрипты, но могут быть и любые другие файлы: mp3, mov, csv, pdf.

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

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

2. Какие бывают веб-приложения


Веб-приложения можно разделить на несколько типов, в зависимости от разных сочетаний его основных составляющих:
  1. Backend (бэкенд или серверная часть приложения) работает на удаленном компьютере, который может находиться где угодно. Она может быть написана на разных языках программирования: PHP, Python, Ruby, C# и других. Если создавать приложение используя только серверную часть, то в результате любых переходов между разделами, отправок форм, обновления данных, сервером будет генерироваться новый HTML-файл и страница в браузере будет перезагружаться.
  2. Frontend (фронтенд или клиентская часть приложения) выполняется в браузере пользователя. Эта часть написана на языке программирования Javascript. Приложение может состоять только из клиентской части, если не требуется хранить данные пользователя дольше одной сессии. Это могут быть, например, фоторедакторы или простые игрушки.
  3. Single page application (SPA или одностраничное приложение). Более интересный вариант, когда используются и бэкенд и фронтенд. С помощью их взаимодействия можно создать приложение, которое будет работать совсем без перезагрузок страницы в браузере. Или в упрощенном варианте, когда переходы между разделами вызывают перезагрузки, но любые действия в разделе обходятся без них.

3. Pyhon-фреймворк Django aka бэкенд


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

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

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

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

Данные в БД можно создавать, читать, изменять и удалять. Иногда для обозначения этих действий можно встретить аббревиатуру CRUD (Create Read Update Delete). Для запроса к данным в БД используется специальный язык SQL (structured query language).

В Джанго для работы с БД используются модели (model). Они позволяют описывать таблицы и делать запросы на привычном разработчику питоне, что гораздо удобнее. За это удобство приходится платить: такие запросы медленнее и ограничены в возможностях по сравнению с использованием чистого SQL.

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

4. Javascript-фреймворки aka фронтенд


Клиентская часть приложения — это скрипты, написанные на языке программирования Javascript (JS) и исполняемые в браузере пользователя. Раньше вся клиентская логика основывалась на использовании библиотеки JQuery, которая позволяет работать с DOM, анимацией на странице и делать AJAX запросы.

DOM (document object model) — это структура HTML-страницы. Работа с DOM — это поиск, добавление, изменение, перемещеие и удаление HTML-тегов.

AJAX (asynchronous javascript and XML) — это общее название для технологий, которые позволяют делать асинхронные (без перезагрузки страницы) запросы к серверу и обмениваться данными. Так как клиентская и серверная части веб-приложения написаны на разных языках программирования, то для обмена информацией необходимо преобразовывать структуры данных (например, списки и словари), в которых она хранится, в JSON-формат.

JSON (JavaScript Object Notation) — это универсальный формат для обмена данными между клиентом и сервером. Он представляет собой простую строку, которая может быть использована в любом языке программирования.

Сериализация — это преобразование списка или словаря в JSON-строку. Для примера:

Словарь:

    {
        'id': 1, 
        'email': '[email protected]'
    }

Сериализованная строка:
    '{"id": 1, "email": "[email protected]"}'

Десериализация — это обратное преобразование строки в список или словарь.

С помощью манипуляций с DOM можно полностью управлять содержимым страниц. С помощью AJAX можно обмениваться данными между клиентом и сервером. С этими технологиями уже можно создать SPA. Но при создании сложного приложения код фронтенда, основанного на JQuery, быстро становится запутанным и трудно поддерживаемым.

К счастью, на смену JQuery пришли Javascript-фреймворки: Backbone Marionette, Angular, React, Vue и другие. У них разная философия и синтаксис, но все они позволяют с гораздо большим удобством управлять данными на фронтенде, имеют шаблонизаторы и инструменты для создания навигации между страницами.

HTML-шаблон — это «умная» HTML-страница, в которой вместо конкретных значений используются переменные и доступны различные операторы: if, цикл for и другие. Процесс получения HTML-страницы из шаблона, когда подставляются переменные и применяются операторы, называется рендерингом шаблона.

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

5. Как клиент и сервер общаются между собой


Общение клиента с сервером происходит по протоколу HTTP. Основа этого протокола — это запрос от клиента к серверу и ответ сервера клиенту.

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

Современные веб-приложения используют протокол HTTPS, расширенную версию HTTP с поддержкой шифрования SSL/TLS. Использование шифрованного канала передачи данных, независимо от важности этих данных, стало хорошим тоном в интернете.

Есть еще один запрос, который делается перед HTTP. Это DNS (domain name system) запроc. Он нужен для получения ip-адреса, к которому привязан запрашиваемый домен. Эта информация сохраняется в браузере и мы больше не тратим на это время.

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

К сожалению, он этого не умеет. Поэтому используется еще одна программа-прослойка — сервер приложений. Например для приложений на питоне, это могут быть uWSGI или Gunicorn. И вот уже они передают запрос в Джанго.

После того как Джанго обработал запрос, он возвращает ответ c HTML-страницей или данными, и код ответа. Если все хорошо, то код ответа — 200; если страница не найдена, то — 404; если произошла ошибка и сервер не смог обработать запрос, то — 500. Это самые часто встречающиеся коды.

6. Кэширование в веб-приложениях


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

Cache — это концепция в разработке, когда часто используемые данные, вместо того чтобы их каждый раз доставать из БД, вычислять или подготавливать иным способом, сохраняются в быстро доступном месте. Несколько примеров использования кэша:

  • В Джанго пришел запрос на получение данных для графика в отчете. Мы достаем из БД данные, подготавливаем их и кладем в БД с быстрым доступом, например, memcached на 1 час. При следующем запросе мы сразу достанем их из memcached и отправим на фронтенд. Если мы узнаём, что данные перестали быть актуальными, мы их инвалидируем (удаляем из кэша).
  • Для кэширования статических файлов используются CDN (content delivery network) провайдеры. Это серверы, расположенные по всему миру и оптимизированные для раздачи статики. Иногда бывает эффективнее положить картинки, видео, JS-скрипты на CDN вместо своего сервера.
  • Во всех браузерах по умолчанию включено кэширование статических файлов. Благодаря этому, открывая сайт не в первый раз, все загружается заметно быстрее. Минус для разработчика в том, что со включенным кэшем не всегда сразу видны изменения сделанные в коде.

Веб-приложение — Википедия

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

Веб приложения стали широко использоваться в конце 1990-х — начале 2000-х годов.

Существенное преимущество построения веб-приложений для поддержки стандартных функций браузера заключается в том, что функции должны выполняться независимо от операционной системы данного клиента. Вместо того, чтобы писать различные версии для Microsoft Windows, Mac OS X, GNU/Linux и других операционных систем, приложение создаётся один раз для произвольно выбранной платформы и на ней разворачивается. Однако различная реализация HTML, CSS, DOM и других спецификаций в браузерах может вызвать проблемы при разработке веб-приложений и последующей поддержке. Кроме того, возможность пользователя настраивать многие параметры браузера (например, размер шрифта, цвета, отключение поддержки сценариев) может препятствовать корректной работе приложения.

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

На 2015 год технологию Adobe Flash не поддерживают Chrome, Safari, и другие популярные браузеры.[1]

В связи с архитектурным сходством с традиционными клиент-серверными приложениями, в некотором роде «толстыми» клиентами, существуют споры относительно корректности отнесения подобных систем к веб-приложениям; альтернативный термин «полнофункциональное приложение интернета» (англ. Rich Internet Applications).

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

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

Серверная часть получает запрос от клиента, выполняет вычисления, после этого формирует веб-страницу и отправляет её клиенту по сети с использованием протокола HTTP.

Само веб-приложение может выступать в качестве клиента других служб, например, базы данных или другого веб-приложения, расположенного на другом сервере. Ярким примером веб-приложения является система управления содержимым статей Википедии: множество её участников могут принимать участие в создании сетевой энциклопедии, используя для этого браузеры своих операционных систем (будь то Microsoft Windows, GNU/Linux или любая другая операционная система) и не загружая дополнительных исполняемых модулей для работы с базой данных статей.

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

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

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

На стороне клиента используется:

  • Для реализации GUI
  • Для формирования запросов, создания интерактивного и независимого от браузера интерфейса:
  1. ↑ Собственно, ASP.NET vNext и создана для того, чтобы позволить исполнять .NET приложения на любых платформах, а не только на IIS.
  • Марко Беллиньясо. Разработка Web-приложений в среде ASP.NET 2.0: задача — проект — решение = ASP.NET 2.0 Website Programming: Problem - Design - Solution. — М.: «Диалектика», 2007. — С. 640. — ISBN 0-7645-8464-2.
  • Олищук Андрей Владимирович. Разработка Web-приложений на PHP 5. Профессиональная работа. — М.: «Вильямс», 2006. — С. 352. — ISBN 5-8459-0944-9.

что это такое и каково назначение каждого вида на реальных примерах

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

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

Подпишись на рассылку и получи книгу в подарок!

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

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

Как работает веб-приложение

Технически это интернет-приложение с архитектурой «клиент-сервер». Чтобы понять принцип, давайте вспомним основные элементы такой архитектуры.

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

Страницы, которые мы видим в браузере, могут быть статическими и динамическими.

Статическая web-страница отображается для всех посетителей одинаково. Как это работает:

  1. Человек вводит в адресной строке запрос или адрес страницы.
  2. Браузер отправляет его на веб-сервер.
  3. Тот анализирует запрос, определяет, что никаких особых признаков и инструкций нет.
  4. Отправляет веб-страницу браузеру без изменения каких-либо данных на ней. Например, это новостной материал, общая стандартная информация.

В случае с динамическими страницами схема выглядит так:

  1. Браузер отправил запрос на веб-сервер. К примеру, при этом поступила информация, что у этого пользователя есть набор признаков, при наличии которых для него нужно показывать определенную информацию, значит страница будет динамической.
  2. Веб–сервер пересылает ее на сервер приложений, где специальное ПО применит правила и инструкции для добавления особых переменных. Например, человек авторизован в системе. Ему может показаться страница с ФИО и другой релевантной именно для него информацией.
  3. Сервер забирает готовую веб-страницу, отдает браузеру, который показывает ее посетителю, создавшему запрос.

Технические аспекты

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

Среди нефункциональных важны:

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

Классификация

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

Остановимся подробно на популярных и востребованных.

AJAX

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

Также различают такие технологии, как ASP, JSP, CGI. Они могут быть разработаны на любом языке программирования, например, PHP, Java и т.д.

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

  1. Системы бронирования и покупки: билеты, отели, товары, услуги.
  2. Развлекательные порталы.
  3. Финансовые и банковские интернет-порталы с функциями заказа услуг онлайн, калькулятора кредитов, перевода валют, интернет-банкингом и другими.
  4. Социальные сети.
  5. Игры.
  6. Образовательные, обучающие каналы, сайты телепрограмм, газет.
  7. Веб-версии программного обеспечения.
  8. Биржи контента, фриланса и т.п.
  9. CRM. Для примера детально рассмотрим эти популярные сервисы.

CRM — система управления проектами, направленная на автоматизацию обработки полного спектра информации о клиентах и товарах.

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

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

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

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

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

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

Примеры применения веб приложений

Пример 1

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

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

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

Пример 2

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

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

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

Что такое веб-приложения и динамические веб-страницы

Сервер приложений предоставляет возможность использовать такие ресурсы сервера, как базы данных. Например, динамическая страница может содержать программные инструкции для сервера приложений, следуя которым серверу необходимо получить определенные данные из базы данных и поместить их в HTML-код страницы. Подробнее см. здесь: www.adobe.com/go/learn_dw_dbguide_ru.

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

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

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

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

Ниже приводится пример простого запроса к базе данных на языке SQL.

Часть 1. Web-сайт или Web-приложение?

От Web-сайтов к Web-приложениям

Принимайте правильные решения, проанализировав свое присутствие в Web

Бретт МакЛафлин
Опубликовано 10.07.2012

Comments

Серия контента:

Этот контент является частью # из серии # статей: От Web-сайтов к Web-приложениям

https://www.ibm.com/developerworks/ru/library/?series_title_by=**auto**

Следите за выходом новых статей этой серии.

Этот контент является частью серии:От Web-сайтов к Web-приложениям

Следите за выходом новых статей этой серии.

В нашем мире iPad-ов, iPhone-ов, Android-ов и устройств, сфокусированных на приложениях, уже несовременно говорить: «у меня статический Web-сайт». Если у вас нет механизма для сложного поиска, хотя бы трех способов оплаты покупок и пары страниц с хитрыми Ajax-взаимодействиями, вас могут назвать «застрявшими в 1990-ых». Многим разработчикам приходится ухищряться, чтобы удовлетворить запросы руководства: Добавьте немного интерактивности! Не отставайте от Amazon.com или Bing, или IBM! Сделайте Web-сайт... Web-приложением. Однако если вы расширяете уже существующие сайты, в результате может получиться недостаточно сфокусированное, а иногда и менее функциональное присутствие в Web.

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

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

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

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

Web-сайты в основном служат для информационных целей

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

Рисунок 1. Пример страницы из Википедии

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

Web-сайты могут быть динамическими

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

На ранних стадиях следует сосредоточиться на восприятии сайта пользователем. Пользователю неинтересно, на каких технологиях построен ваш сайт: HTML и CSS, ColdFusion, PHP или Perl. Пользователи просто оценивают сайт, основываясь на том, что они видят. Чтобы понять, сайт какого типа вы создаете или исследуете, нужно немного отвлечься от программирования. Просто откройте браузер, зайдите на свой сайт и оцените его.

Web-приложения, как правило, являются интерактивными

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

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

Большинство Web-сайтов являются в некоторой степени гибридами. Например, взгляните на домашнюю страницу сайта Amazon.com, показанную на рисунке 2. Amazon.com – это гибрид, который однако, является информационным сайтом.

Рисунок 2. Amazon.com

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

Так как любой Web-сайт представляет какую-либо информацию, нужно определить баланс между информацией и интерактивностью. Что вы больше делаете: читаете или взаимодействуете? Вы проводите на одной странице 30 секунд или 10 минут? Если вы много взаимодействуете и проводите мало времени на каждой странице, перед вами интерактивный сайт.

Чем отличаются информационные и интерактивные сайты

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

Большинство интерактивных сайтов на самом деле являются гибридами. Если нет информации, то получается, что нет ничего, с чем можно было бы взаимодействовать. Представьте, что было бы, если бы на Amazon.com не было ничего, кроме кнопок — ни книг, ни DVD-дисков. Сайт не имел бы смысла. Необходимо иметь какую-либо информацию, с которой можно работать. Таким образом, даже интерактивные сайты в действительности являются гибридами: комбинацией информации и взаимодействий.

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

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

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

В этом момент ребята, занимающиеся электронными книгами, дополненными изданиями (enhanced editions) и следующим поколением издательских продуктов начинают взволнованно махать руками. До нового поколения читателей следует доносить информацию современными средствами, верно? Есть новые способы представления информации: плавающие аннотации, всплывающие окна с дополнительной информацией и встроенные видео.

Да, для расширенной информации есть свое место

Я не хочу сказать, что нужно избегать дополненных изданий или не следует пытаться расширить границы возможного с помощью подхода к информации в стиле Web 2.0/3.0.. Однако, подобные средства служат не совсем для того, чтобы получать информацию быстро и эффективно. Большинство новых способов представления информации используются в иммерсивных и даже развлекательных приложениях. Эти способы не просто передают информацию, они изменяют механизм ее восприятия.

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

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

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

Интерактивность основана на прерывистой работе

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

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

Еще одним подходом к решению задачи встраивания интерактивности в сайт является построение карты следования. Сделайте скриншот определенной страницы, а затем определите, какой бы вы хотели видеть следующую страницу вашего сайта. Сделайте еще один скриншот, затем еще, и так далее, до тех пор, пока у вас не получится четыре или пять (или десять) скриншотов, иллюстрирующих шаги для перехода пользователя из точки A в точку B.

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

Пример интерактивного сайта: Audi.com

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

На рисунке 3 показана стартовая страница, Web-сайта Audi.com. Сайт выглядит глянцево даже до начала взаимодействия с ним.

Рисунок 3. Стартовая страница сайта Audi.com

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

Рисунок 4. Изображение на стартовой странице сайта Audi изменяется по щелчку мыши

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

Рисунок 5 больше напоминает внутреннюю, а не стартовую страницу сайта. Audi.com использует меню гораздо шире, чем просто для навигации. При наведении мыши на меню появляются не просто пункты, на которые можно нажать, полноценные изображения и списки опций автомобиля.

Рисунок 5. При наведении мыши на меню появляются полноценные изображения и списки опций

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

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

Рисунок 6. Навигационные меню просты и сами просят на них нажать

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

Рисунок 7. На внутренних страницах нужно больше нажимать мышью, чем читать

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

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

Добавить интерактивность не так просто

При интерактивном подходе главным становится вопрос где именно на экране должно происходить взаимодействие. Это не только рассуждения типа "Этот виджет нужно поместить в левом верхнем углу? А может быть справа?" Есть два базовых подхода (один из которых не очень хорош):

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

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

Перемешиваем информацию и взаимодействия

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

С другой стороны, большинство информационных сайтов в определенный момент должны позволить пользователю что-то нажать или поискать. Представьте, если бы вся информация Википедии хранилась на одной странице! И даже в этом случае, пользователь должен прокручивать страницу; а это тоже является взаимодействием. Все сайты являются гибридами. На большинстве сайтов нет подавляющего перевеса одной из этих сторон, например, 90% информации и только 10% интерактивности (или наоборот). На большинстве сайтов это соотношение составляет примерно 75/25. Вам нужно будет принять решение о количестве информации на вашем интерактивном сайте, либо о количестве взаимодействий на вашем информационном сайте. Конечно же, это должны быть хорошие решения.

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

Создавать гибриды гораздо сложнее

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

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

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

И, наконец, нужно упражняться и укреплять свои слабые места. Если вы проводите дни, работая над сайтами, заполненными информацией, поищите, где на сайте вы могли бы добавить немного интерактивности. Создайте с помощью JavaScript или jQuery сворачиваемые области. Расширьте свой информационный сайт, чтобы на нем соотношение между информацией и интерактивностью составляло 60/40. Также верно и обратное. Ищите способы увеличить количество информации на своем интерактивном сайте. Создайте боковые панели с информацией, появляющиеся в нужное время, на которых будет выведено больше информации, чем вы обычно предоставляете. Укрепляйте свои слабые места.

Используйте свои сайты

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

Используйте свои сайты. Часто и много.

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

Итак, нужно использовать свой сайт. Если он не нравится вам, он может не понравиться и вашим пользователям. Не торопитесь отмахиваться от проблем: "ну, это просто потому, что я знаю, как это работает" или "ни один из пользователей не похож на меня". Гораздо лучше задать себе вопрос: "как я могу улучшить восприятие сайта, независимо от того, похожи ли пользователи сайта на меня или нет"? Подобный способ мышления может коренным образом изменить ваши представления о своем сайте.

Заключение

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

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

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

Ресурсы для скачивания
Похожие темы
  • Познакомьтесь с оригиналом статьи: From Web sites to Web applications, Part 1 (developerWorks, июнь 2010 г.).
  • Любая дискуссия об удобстве работы в Web должна начинаться с Web-сайта Якоба Нильсена, на котором представлено множество статей и отличных ресурсов.
  • Удобство использования сайта часто связано с его доступностью всем категориям пользователей. Удобный сайт почти всегда общедоступен. Узнайте больше об общедоступности на сайте группы Web Accessibility Initiative (WAI).
  • User-Centered Design and Web Development (июль 1998г.) - это довольно старая статья, однако в ней изучаются важные проблемы, затронутые во вступительных секциях этой статьи.
  • В статье Википедии User-centered design имеется много ссылок на хорошие ресурсы для дальнейшего чтения.
  • Познакомьтесь с Prototype - оптимальной инфраструктурой JavaScript для работы над своей страницей, автоматизирующей рутинные операции JavaScript и интегрирующей графические эффекты.
  • script.aculo.us: еще одна must-have библиотека, предоставляющая графические эффекты для перемещения, изменения формы, создания анимированных элементов и другие средства украшения вашей Web-страницы. Она идеально дополнит ваш сайт, использующий Prototype.
  • MooTools: легковесная и глянцевая библиотека moo.fx дополняет MooTools, так же как script.aculo.us дополняет Prototype. Она предоставляет графические эффекты.
  • Если вы хотите добавить на свой сайт виджеты для сбора денег, возможно, вас заинтересует какой-нибудь из "термометров", предлагаемых на сайте Fundraiser Insight.
  • PHP Fundthermo: этот генератор изображений, написанный на PHP, разрабатывался для сбора денег, однако его можно легко адаптировать для любой индикации о ходе выполнения процесса.
  • В книге Head First HTML with CSS & XHTML (Робсон и Фримен, O'Reilly Media, Inc.) представлено замечательное введение и инструкции по работе с XHTML и CSS.
  • Head First Web Design (Уотрелл и Сиарто, O'Reilly Media, Inc.) - книга, обучающая Web-дизайну, в которой подробно рассматриваются вопросы удобства использования, цветов, разметки, навигации и даже интеллектуальной собственности.

Подпишите меня на уведомления к комментариям

приложение - это... Что такое Веб-приложение?

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

Веб-приложения стали широко популярными в конце 1990-х — начале 2000-х годов.

Технические особенности

Существенное преимущество построения Web приложений для поддержки стандартных функций браузера заключается в том, что функции должны выполняться независимо от операционной системы данного клиента. Вместо того чтобы писать различные версии для Microsoft Windows, Mac OS X, GNU/Linux и других операционных систем, приложение создается один раз для произвольно выбранной платформы и на ней разворачивается. Однако различная реализация HTML, CSS, DOM и других спецификаций в браузерах может вызвать проблемы при разработке веб-приложений и последующей поддержке. Кроме того, возможность пользователя настраивать многие параметры браузера (например, размер шрифта, цвета, отключение поддержки сценариев) может препятствовать корректной работе приложения.

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

В связи с архитектурным сходством с традиционными клиент-серверными приложениями, в некотором роде «толстыми» клиентами, существуют споры относительно корректности отнесения подобных систем к веб-приложениям; альтернативный термин «Богатое Интернет приложение» (англ. Rich Internet Applications).

Устройство веб-приложений

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

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

Серверная часть получает запрос от клиента, выполняет вычисления, после этого формирует веб-страницу и отправляет её клиенту по сети с использованием протокола HTTP.

Само веб-приложение может выступать в качестве клиента других служб, например, базы данных или другого веб-приложения, расположенного на другом сервере. Ярким примером веб-приложения является система управления содержимым статей Википедии: множество её участников могут принимать участие в создании сетевой энциклопедии, используя для этого браузеры своих операционных систем (будь то Microsoft Windows, GNU/Linux или любая другая операционная система) и не загружая дополнительных исполняемых модулей для работы с базой данных статей.

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

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

На стороне клиента используется:

  • Для реализации GUI
  • Для формирования и обработки запросов, создания интерактивного и независимого от браузера интерфейса:

См. также

Литература

  • Марко Беллиньясо Разработка Web-приложений в среде ASP.NET 2.0: задача — проект — решение = ASP.NET 2.0 Website Programming: Problem - Design - Solution. — М.: «Диалектика», 2007. — С. 640. — ISBN 0-7645-8464-2
  • Олищук Андрей Владимирович Разработка Web-приложений на PHP 5. Профессиональная работа. — М.: «Вильямс», 2006. — С. 352. — ISBN 5-8459-0944-9

Ссылки

Разработка веб приложений - что это такое, виды web приложений и преимущества

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

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

Что такое Веб-приложение?

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

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

Работа клиента не зависит от операционной системы, стоящей на компьютере пользователя, поэтому при разработке веб-приложений нет необходимости писать отдельные версии для Windows, Linux, Mac OS и других операционных систем.

Для создания серверной части веб-приложений используются такие языки программирования, как: PHP, ASP, ASP.NET, Perl, C/C++, Java, Python, Ruby, NodeJS.

Для реализации клиентской части используют HTML, CSS, JavaScript, Ajax.

Какие существуют виды?

В зависимости от стоящих перед бизнесом задач можно заказать разработку необходимого веб-сервиса.

КОРПОРАТИВНЫЙ ПОРТАЛ

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

Решаемые задачи:

  • Улучшение качества работы с клиентами
  • Повышение результативности работы сотрудников
  • Упрочнение и улучшение связей между подразделениями компании
  • Удобное и результативное общение с контрагентами
  • Повышение мобильности сотрудников
  • Удаленная работа с документами
  • Проведение PR-мероприятий различной степени сложности

CRM

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

Решаемые задачи:

  • Целостность и сохранность клиентской базы
  • Получение аналитики по продажам
  • Повышение объёма продаж
  • Эффективная оптимизация работы персонала
  • Сокращение бумажного документооборота

ERP

Разработка ERP системы необходима крупным предприятиям всех форм собственности для открытия новых возможностей перед бизнесом.

Решаемые задачи:

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

СИСТЕМЫ ЭЛЕКТРОННОЙ КОММЕРЦИИ

Благодаря e-commerce производители и поставщики услуг/товаров могут предлагать в сети продукцию потенциальным покупателям, осуществлять прием и обработку заказов, управлять статусом заявок и т.д.

Решаемые задачи:

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

Преимущества web-приложений

Доступ с любого устройства

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

Экономия

Веб-приложения работают на всех платформах и исключают необходимость разработки приложения отдельно для Android и iOS.

Адаптивность

Если для нативных приложений нужны определенные ОС, то для работы с веб-приложением подходит любая ой операционной системой (Windows, MAC, Linux и т.д.) и любой браузер (Internet Explorer, Opera, FireFox, Google Chrome и т.д.).

Отсутствие клиентского ПО

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

Сетевая безопасность

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

Масштабируемость

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

Защита от потери данных

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

Готовы заказать разработку?

Если вы заинтересованы в разработке веб приложения, обратитесь к нам за бесплатной консультацией!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *