Файл: Особенности алгоритмизации при разработке WEB-приложений (Основные этапы web разработки).pdf

· иллюстрированная графика — пояснительные изображения, схемы и чертежи, фотографии;

· функциональная графика — кнопки навигации, счётчики и другие элементы управления сайтом;

· декоративная графика — эстетические элементы дизайна страниц — фоновый рисунок, заголовки, выполненные в виде графических файлов и пр.

Такая классификация предполагает использование различных мультимедийных форматов. Например, для чётких, контрастных изображений с мелкими деталями и тонкими линями используются jpeg-файлы, а для красочных изображений с мягкими переходами цветов — gif-файлы.

Html-вёрстка

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

Основными задачами при вёрстке являются:

· корректность отображения страниц сайта при разных разрешениях экрана;

· кросбраузерность — единообразность отображения страниц сайта в наиболее популярных браузерах — Internet Explorer, Mozilla Firefox, Opera, Chrome.

Программирование и контроль качества

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

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

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

Методики вёрстки сайтов

1. Вёрстка обязательно должна быть кроссбраузерной для Firefox, Opera, Safari, Google Chrome и Internet Explorer, который в последнее время теряет актуальность. Сайт должен быть протестирован на разных разрешениях монитора, начиная от 1024 на 768;
2. Вёрстка абсолютно всех страниц сайта должна пройти валидацию. Использование различных CMS, модулей и готовых скриптов, вставка на интернет-ресурс содержимого разных форматов зачастую затрудняют достижение валидности;
3. Внешний вид свёрстанной страницы должен по максимуму соответствовать дизайну: размеры шрифтов, расстояния между строками, отступы должны соответствовать параметрам psd макета. Достичь пиксельной точности зачастую затруднительно, поэтому допускается отклонение отдельных элементов в пределах 3-6 пикселей;
4. CSS стили должны быть вынесены в отдельный документ. В HTML коде допустимо только присутствие идентификаторов и классов;
5. Логотип веб-сайта должен являться ссылкой на главную страницу;
6. HTML страницы должны содержать комментарии к основным элементам, таким, как меню, заголовок, шапка, контент, футер и т.п.
7. Имена идентификаторов и классов должны соответствовать назначению и быть понятными интуитивно (menu, footer, header и т.д.);
8. В таблицах стилей настоятельно рекомендуется использовать одинаковые единицы измерения для всех величин;
9. Надписи на кнопках должны быть написаны на одном языке и либо прописными буквами, либо начинаться с заглавной;
10. Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;
11. HTML и CSS код должен быть минимизирован. Следует избегать лишних классов и идентификаторов и использовать свойства наследования;
12. Заголовки должны быть написаны исключительно с помощью специальных тегов h1, h2 и т.д;
13. Атрибуты всех тегов должны быть заключены в кавычки.

Основные подходы к верстке сайта

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

• Фиксированная верстка. При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки;
• Резиновая верстка. В зависимости от размера окна браузера, блоки изменят свою ширину;
• Адаптивная верстка. Воплощается в жизнь благодаря различным скриптам и заточена под определённые разрешения (320, 768, 1024 и т.д.). Изменение размера происходит рывками после того, как определённый уровень достигнут;
• Отзывчивая верстка. Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
• Версия сайта для мобильных устройств. Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.

Кроме подходов, существуют ещё и различные типы вёрстки.

CMS

Как правило, современные 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.

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

SEO-оптимизация

Поисковая оптимизация (Search Engine Optimization) — это комплекс мероприятий, целью которых является увеличение посещаемости Internet-ресурса за счет достижения им высоких позиций в выдаче поисковых систем по заданному набору целевых запросов. SEO-оптимизация базируется на семантическом ядре — списке ключевых слов, по которым планируется продвижение сайта в поисковых системах. Ключевые слова группируются по высоко-, средне- и низкочастотным запросам. От правильности подбора данных слов напрямую зависит успех сайта.

SEO-оптимизация учитывает:

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

· внешние факторы ранжирования: индекс цитируемости, содержание внешних ссылок, релевантность ссылающихся страниц и пр.

Современные системы web-поиска (поисковые машины) анализируют большинство элементов web-страниц: текст, заголовки, служебные html-теги, стилевые и структурные особенности содержания. Результаты работы SEO-роботов сохраняются в специальной базе данных — индексе поисковой системы, — из которой по запросу пользователя выдаются в определенном порядке. Специалисты, чьей профессиональной областью деятельности является SEO-оптимизация, постоянно изучают алгоритмы ранжирования поисковых машин.

Безопасность WEB приложений

Penetration testing (он же - пентест) - тестирование на проникновение. Выражаясь "более простыми" для нас словами, пентест - способ тестирования уязвимостей в области кибербезопасности какой-либо организации, предприятия или компании, будь-то частной или государственной. Тестирование на проникновение (в некоторых случаях - тестирование пера) позволяет специалистам в области кибербезопасности (в данном случае - пентестерам) выявить уязвимые и слабые места в системе безопасности, которые может использовать злоумышленник, как на виртуальном уровне, так и на физическом. Если бы хакеры собирались совершить атаку на Вашу систему безопасности: как они это сделают и получиться ли у них? Тестирование на проникновение не заканчивается просто на обнаружении способов, с помощью которых потенциальный кибермошенник может получить несанкционированный доступ к конфиденциальной информации или захватить полный контроль над системой. Пентестеры имитируют реальную атаку, просматривая сеть, сайт, приложения, устройства, возможность физического доступа, что бы определить, как будет работать механизм защиты. Они выполняют оценку не только с точки зрения хакера, но и эксперта в области кибербезопасности, что позволяет проанализировать соответствие политики кибербезопасности организации и осведомленности ее сотрудников об угрозах, например, со стороны социальной инженерии. В то же время определяют способность предприятия выявлять и своевременно реагировать на подобные инциденты. Для общего представления можно привести пример с банком, который нанимает специального человека, делает из него "грабителя" и отправляет в отделение, с целью получить доступ к хранилищу. Если этот человек сумеет попасть в хранилище, то служба безопасности получит не только выговор, но и ценную информацию о том, как можно улучшить систему защиты и какие аспекты требуют более детального рассмотрения. Кто-то может сказать, что лучшим кандидатом будет сотрудник службы безопасности организации, который знает систему изнутри, ее слабые и сильные стороны, однако не все так однозначно. Если тест на проникновение будет проводить специалист с минимальным уровнем знаний о построенной системе защиты он с большей вероятностью найдет, так называемые, "слепые пятна", пропущенные разработчиками при построении и организации уровней защиты. Именно по этой причине, для проведения пентеста обычно заказывают услуги сторонних подрядчиков специализирующихся в данной сфере. На эту роль также подойдут хакеры, "этические" хакеры (так же называемые, как "белая шляпа"). Эти ребята имеют большой опыт, который применяют в благих намерениях, с целью, повышения безопасности. Лучшего кандидата не найти, поскольку все осуществляется индивидуально, все зависит от стратегии и вида пентеста, который желают выполнить представители организации.