Современные информационные технологии / 3.Программное
обеспечение
студ. Телегина М. В., к.т.н. Костарев А. Н.
Российский
государственный социальный университет, Россия
Разработка web-приложения (web-разработка) — это комплекс мер и действий по планированию и созданию сайта в сети Internet в зависимости от поставленных целей и задач.
Современный Internet-сайт может решать как маркетинговые задачи — продвигать на рынке товары и услуги предприятия, конкурентные преимущества компании, увеличивать спрос на продукцию и пр. — так и представлять собой информационный ресурс, задачи которого ограничиваются информированием целевой аудитории.
Непосредственно созданию сайта предшествует подробный комплексный анализ, определяющий критерии, которым должен соответствовать будущий web-проект.
Процесс создания web-приложения, в общем случае, включает шесть основных этапов:
· определение целей и задач проекта;
· разработка структуры сайта;
· разработка дизайн-макетов;
· html-вёрстка;
· программирование и контроль качества;
· запуск и сопровождение, SEO-оптимизация.
Каждый из перечисленных этапов в достаточной степени независим, что позволяет выбирать схему работы и исполнителя для каждого из них.
На этапе проектирования формулируются бизнес-цели создаваемого проекта, определяются требования, которым он должен удовлетворять, разрабатывается общая концепция.
На данном этапе имеет смысл уточнить пожелания заказчика, а также произвести исследование целевой аудитории. Для более глубокого анализа можно запросить у заказчика соответствующие материалы: брошюры, ежегодные отчёты, образцы продукции, другие сопутствующие данные — всё, что поможет составить представление о том, кто и с какой целью будет посещать сайт, какие задачи будут выполняться на сайте. Немаловажно выяснить технические возможности будущей основной пользовательской аудитории — пропускную способность каналов связи, используемые Internet-браузеры и пр.
Для нахождения целевой аудитории целесообразно войти в роль квалифицированного пользователя на аналогичных создаваемому Internet-ресурсах. Помимо прочего это поможет выявить новые креативные концепции для того, чтобы сайт был более конкурентоспособным и «не затерялся» среди множества других.
Когда цели определены, приступают к составлению расширенного плана проекта, отражающего сколько времени, денег и иных средств понадобится для выполнения работ на каждом из последующих этапов. Такой план часто содержит информацию о бюджете проекта, график работ (с соответствующим распределением ролей между web-разработчиками), техническую документацию, а также раздел «деталей и уточнений», где оговорены конкретные аспекты возможных спорных вопросов. В этот раздел также включают предложения о готовых разработках и шаблонах.
После детального рассмотрения и утверждения плана подписывается договор о выполнении работ.
Разработка структуры сайта включает всё, что касается его содержания и информационной стратегии, определяющей, как должна быть организована подача информации, чтобы будущие посетители сайта могли быстро и легко её найти. Первоочередной задачей на данном этапе является создание карты сайта, отражающей взаимосвязи типовых страниц и их наиболее значимые функциональные возможности.
Карту сайта представляют в виде чертёжа (блок-схемы), на котором каждая страница отображается отдельным прямоугольником. Связи между ними показывают схему переходов по страницам.
Также создают каркасы главной и основных типовых страниц, показывающие расположение текста и графики на странице, а также то, как пользователи будут работать с этими элементами. Каркас страницы должен предполагать возможности последующего расширения.
Более эффективную работу сайта обеспечивает соблюдение принципа: «пользователю удобнее добираться до нужной ему страницы максимум за два щелчка мыши». Поэтому обычно рекомендуется использовать не более двух уровней вложенности в пределах каждой группы элементов.
Завершив формирование облика сайта, компоновку страниц и определив размещение содержимого, переходят к следующему этапу web-разработки — к визуальному оформлению.
Дизайн-макет — это графическое,
наглядное изображение основных элементов сайта. Дизайн-макет полностью воплощает
визуальную концепцию сайта. Его разработка выполняется в одной из графических
программ (в подавляющем большинстве случаев — в Adobe Photoshop). В процессе разработки дизайнер
руководствуется письменным соглашением (брифом) на создание дизайн-макета,
который заполняется заказчиком и содержит пожелания к дизайну: тип,
предпочтительные цвета, наличие тех или иных графических элементов и пр.
На этой стадии создаются все элементы web-дизайна в соответствии со стилем
подачи информации и общей концепцией. Главным при дизайне сайта является умение
разработать графические объекты, которые бы быстро загружались и хорошо
смотрелись, независимо от используемого Internet-браузера.
Часто прибегают к использованию готовых дизайн-шаблонов, которые широко представлены в сети Internet или являются встроенными в различные графические редакторы, такие как, Microsoft FrontPage или Adobe PhotoShop. С помощью подобных шаблонов сайт создаётся за максимально сжатое время. Однако следует отметить, что у такого решения имеется ряд существенных недостатков, главный из которых — повторяемость и не уникальность дизайна. Шаблон является оболочкой с минимальным количеством интерактивных элементов и полезных модулей. Поэтому при выборе шаблона стоит обращать внимание не только на дизайн, но и на функциональность.
Важным элементом web-дизайна является графика, которую условно можно разделить на три категории:
· иллюстрированная графика — пояснительные изображения, схемы и чертежи, фотографии;
· функциональная графика — кнопки навигации, счётчики и другие элементы управления сайтом;
· декоративная графика — эстетические элементы дизайна страниц — фоновый рисунок, заголовки, выполненные в виде графических файлов и пр.
Такая классификация предполагает использование различных мультимедийных форматов. Например, для чётких, контрастных изображений с мелкими деталями и тонкими линями используются jpeg-файлы, а для красочных изображений с мягкими переходами цветов — gif-файлы.
Html-вёрстка макета является следующим шагом после разработки дизайна сайта. Вёрстка — это преобразование созданных дизайнером графических макетов страниц в html-код, который бы отображался в Internet-браузере в точном соответствии с исходным макетом. Сложность вёрстки зависит от сложности дизайна.
Основными задачами при вёрстке являются:
· корректность отображения страниц сайта при разных разрешениях экрана;
· кросбраузерность — единообразность отображения страниц сайта в наиболее популярных браузерах — Internet Explorer, Mozilla Firefox, Opera, Chrome.
Программирование — это практическая реализация проекта, интеграция наработок по отдельным направлениям. Другими словами, это процесс построения функциональных инструментов для наполнения и обработки данных. Программирование определяет насколько стабильным и защищённым будет функционирование сайта. Выбор платформы, технологий и грамотного подхода к программированию играет существенную роль. На данном этапе важно определиться с подходом к созданию Internet-реусурса: будет ли он статическим или динамическим.
Статический Internet-сайт представляет собой совокупность html-файлов, каждый из которых представляет отдельную страницу (или её часть). Такой подход используется, в основном, для размещения файловых архивов и медиа-коллекций. Статические сайты программирования, как такового, не требуют.
Страницы динамического Internet-сайт формируются сервером в ответ на запрос пользователя (передаваемый в виде URL-адреса страницы). Такие сайты требуют больше затрат на разработку и техническую поддержку, чем статические, но эти затраты окупаются за счёт снижения финансирования на редактирование материалов и развитие информационной структуры.
Как правило, современные web-проекты включают подсистему управления контентом (содержимым)
— CMS (content management system), либо строятся на
основе неё. Назначение системы управления контентом состоит в предоставлении
возможности публиковать материалы на сайте человеку, не обладающему специальными
знаниями в области создания html-документов,
а также в существенном сокращении времени, затрачиваемом на ввод данных.
Такие системы делают возможным совместную работу по наполнению ресурса информацией, позволяют обновлять содержимое страниц и разделов, размещать на сайте текстовую и графическую информацию, вносить изменения, перемещать или удалять информационные блоки или целые страницы, снижают риск непреднамеренного повреждения программного кода. Управление контентом включает в себя также отслеживание актуальности опубликованной информации, её соответствия критериям SEO-оптимизации и пр.
Существует большое
разнообразие системы управления контентом: от систем, создаваемых в рамках
реализации конкретного проекта для решения специфических задач, до универсальных
систем, таких как WordPress,
Joomla, 1С-Битрикс и пр.
В настоящее время актуальным программным функционалом среди множества сред разработки обладает высокоуровневый фреймворк Ruby on Rails. Его возможности позволяют существенно повысить продуктивность web-программирования по сравнению с такими технологиями, как PHP или Perl.
Язык Ruby, лежащий в основе фреймворка Ruby on Rails, имеет быстрый цикл разработки (редактирование – запуск – редактирование), реализован в виде интерпретатора, поддерживает нетипизированные переменные, не требующие объявления. Ruby on Rails позволяет добиться высокой надёжности и гибкости разработки проектов любого масштаба. Фреймворк включает подсистему тестирования, которая помогает существенно сэкономить время разработки и повысить качество web-проекта.
В основе большинства динамических web-проектов лежит база данных. Существует множество различных систем управления базами данных (СУБД), но в современных хостинг-центрах — организациях по размещению web-проектов на серверах — как правило, применяются СУБД MySQL и PostgreSQL. Причинами тому являются фактическая ориентация этих СУБД на хостинговые задачи, доступность на всех популярных серверных операционных системах, а также относительная простота настройки и администрирования. СУБД упрощает управление данными и сокращает время и издержки на разработку и развёртывание приложений. MySQL и PostgreSQL обеспечивают приемлемый уровень безопасности, надёжности и масштабируемости.
Создание web-приложения, как и любого другого программного продукта, подразумевает работу с постоянно меняющейся информацией, данными, файлами. Контроль за вносимыми в проект изменениями помогают обеспечить системы управления версиями (Version Control System — VCS), которые хранят предыдущие версии исходных файлов проекта, отслеживают производимые в файлах изменения, обеспечивают совместную командную работу над проектом и пр. К наиболее популярным на текущий момент VCS относятся: SVN, GIT, Microsoft VSS. Использование системы контроля версий поднимает общий уровень качества разработки.
Кроме того, создание любого программного продукта (в том
числе и web-приложения)
сопровождается новыми требованиями к продукту, предложениями по его улучшению,
необходимостью исправлять ошибки и пр. Для управления перечисленными аспектами
разработки и улучшения качества менеджмента используются системы отслеживания
ошибок (Bug Tracking System — BTS). Главный компонент BTS представляет
собой базу данных с
удаленным доступом, обеспечивающую централизованный доступ ко всем необходимым
файлам, спецификациям, графикам, планам, замечаниям и т.п.
Существует широкое разнообразие систем отслеживания ошибок: Basecamp, Bugzilla, Trac, MantisBT, Redmine и пр.
По завершении этапа активного программирования начинается этап тестирования корректности функционирования созданного web-приложения: проверки на наличие грамматических ошибок, пропущенных картинок, неработающих ссылок и т.д., а также проверки функционирования сайта в различных web-браузерах. Данный этап может быть автоматизирован с помощью средств автоматического тестирования таких, как IBM Rational AppScan, Empirix E-TEST Suite, XSpider, WAS и др.
После исправления ошибок и презентации сайта в сети Internet, начинается новый этап работ, связанный с его сопровождением. Основная цель сопровождения — поддержание стабильности работы web-ресурса и актуальности информации. Обязательным условием квалифицированного сопровождения web-сайта является защита информации, включающая в себя антивирусную защиту и защиту баз данных на сервере от действий злоумышленников, в частности, от SQL injection.
Кроме того, необходимо своевременное обновление содержимого сайта, исправление ошибок, не выявленных или не исправленных на стадии проверки качества. Ещё одним важным моментом сопровождения является постоянный мониторинг эффективной работоспособности сайта, контроль посещаемости и учёт данных статистики.
Поисковая
оптимизация (Search Engine Optimization)
—
это комплекс мероприятий, целью которых является увеличение посещаемости Internet-ресурса
за счет достижения им высоких позиций в выдаче поисковых систем по заданному набору
целевых запросов. SEO-оптимизация базируется на семантическом ядре — списке ключевых
слов, по которым планируется продвижение сайта в поисковых системах. Ключевые
слова группируются по высоко-, средне- и низкочастотным запросам. От
правильности подбора данных слов напрямую зависит успех сайта.
SEO-оптимизация
учитывает:
·
внутренние факторы ранжирования: число, плотность и
расположение ключевых слов на страницах сайта, стилистическое оформление
текста, правильность формирования тегов, мета-тегов и т. д.;
·
внешние факторы ранжирования: индекс цитируемости, содержание
внешних ссылок, релевантность ссылающихся страниц и пр.
Современные системы web-поиска (поисковые машины) анализируют большинство элементов
web-страниц: текст, заголовки, служебные html-теги, стилевые и
структурные особенности содержания. Результаты работы SEO-роботов сохраняются в
специальной базе данных — индексе поисковой системы, — из которой по запросу пользователя выдаются в определенном
порядке. Специалисты, чьей профессиональной областью деятельности является
SEO-оптимизация, постоянно изучают
алгоритмы ранжирования поисковых машин.
В настоящее время российский рынок web-разработок меняется очень быстро и, по ряду оценок, считается самым динамичным за всю историю человечества. Уже на период 2009-го года в России существовало более 2000 компаний, оказывающих подобные услуги. Среди них следует отметить Art Lebedev Group, Actis Wunderman, Айтекс, DEFA Kreativburo. Такой круг лидеров остается более-менее постоянным на протяжении нескольких лет, и только повышение спроса на редкие услуги позволяет «выбиться» наверх ранее неизвестным компаниям. Главным «рычагом» web-разработки остается рост аудитории Internet-пользователей, который стимулирует разработчиков к совершенствованию своих web-проектов и увеличению бюджетов на SEO-оптимизацию.
Сейчас в сети Internet совершаются торговые сделки, существует множество электронных валют (Яндекс.Деньги, Webmoney и другие), открыты представительства банков, где пользователи могут работать со своими счетами. Ежедневно миллионы пользователей посещают поисковые системы, электронные энциклопедии, блоги (дневники пользователей), новостные сайты. Последние годы в российском сегменте сети Internet ознаменовались бурным развитием социальных сетей, уже давно завоевавших популярность на западе.
Разработка web-приложения — это комплексный многошаговый процесс, требующий знания множества различных технологий и языков программирования, умения работать с базами данных, использовать множество инструментальных средств и программных пакетов.
По информативности Internet-сайт оставляет далеко позади все традиционные источники информации и, что не маловажно, размещенная на сайте информация доступна конечному пользователю в любое время и в любой точке мира.
1. Гото К., Котлер Э. Веб-редизайн: книга Келли Гото и Эмили Котлер: Пер. с англ. — СПб.: Символ-Плюс, 2007. — 376 с.
2. Лопак Л. Web-дизайн. — 2-е изд.: Пер. с англ. — М.: Издательский дом «Вильямс», 2008. — 304 с.
3. Фернандес О. Путь Rails. Подробное руководство по созданию приложений в среде Ruby on Rails: Пер. с англ. — СПб: Символ-Плюс, 2009. — 768 с.
4. Панфилов К. По ту сторону веб-страницы. — М.: ДМК Пресс, 2008. — 440 с.