Создание сайта-визитки

ВВЕДЕНИЕ
Развитие интернет-технологий позволяют расширять сферу использования приложений определяя для них веб-интерфейсы. С развитием новых технологий появилась еще одна возможность разработка клиент-серверных приложений для решения тех задач, которые ранее рассматривались как API решения, в частности использование веб-технологий в задачах обработки информации в базах данных. Она появился с появлением языков сценариев с открытым кодом, таких как PHP. С самого начала РНР был оптимизирован для взаимодействия с базой данных MySQL, которая также распространялась на основе лицензии GNU / GPL. Для разных операционных систем были разработаны, кроссплатформенные веб-сервер Apache, который обеспечил необходимую инфраструктуру на сервере и сервер баз данных MySQL. Устройством отображения на стороне клиента был браузер. Аббревиатуры LAMP (Linux, Apache, MySQL и PHP) и XAMPP (Windows XP, Apache, MySQL и PHP), в более сжатой версии рассматривают еще, и веб платформу WAMP, стали синонимом интерактивного, поддерживаемого базой данных, представления информации в Интернете.
Эта технология позволила разработать самые различные системы, от простейших одностраничных гипертекстовых страниц до серьезных веб-интерфейсов таких как форумы, сообщества, онлайновые магазины, страницы опросов и другие подобные вещи, обеспечивающие возможность организации контента с помощью браузера[6].
Однако, проблемность данной технологии заключается в необходимости сервера. А сегодня одной из основных задач веб-разработчика является перенос большей части веб-приложения на сторону клиента, что не просто повышает его производительность и функциональность, но и делает приложения более безопасными.
Веб-интерфейс – это совокупность средств, при помощи которых пользователь взаимодействует с веб - сайтом или любым другим приложением с помощью браузера [1]. Удобство данного способа взаимодействия заключается в возможности пользоваться веб - интерфейсом с помощью любого компьютера, подключенного к сети Интернет. Кроме этого, важным достоинством является постоянная доступность веб - интерфейса для конечного пользователя.
Процесс проектирование интернет-сайтов длительный и интерактивный. Стандарт ISO 9241-11 рекомендует следующую систему проектирования. Создание начинается с анализа задач заказчика. Вторым шагом идет определение контекста использования, который включает в себя анализ пользователей: их целей, задач, социально-демографические характеристики людей, третьим шагом выступает оформление требований, заключительными шагами следует разработка дизайна и оценка дизайна. Шаги разработки дизайна и определения требований дизайна считаются итерационными. Веб-интерфейсы используются для организации и представлении данных в клиент-серверных приложениях, т.е. практически везде[11]. В современном сайте основной частью является его интерфейсная часть, серверная часть выполняет дополнительные вспомогательные функции.
Сайт-визитка наиболее распространённый вид представления человека или бизнеса в интернете. Существует множество технологий и средств создания и размещения сайта-визитки в интернете. Задачей данной курсовой работы на практическом примере рассмотреть некоторые из них.
Предмет исследования – веб-сайты.
Цель исследования: разработка сайта-визитки для футбольной команды.
Задачи исследования.
1. Проанализировать современные технологии разработки веб-сайтов для информационных систем и определить современные требования к сайтам-визиткам.
2. Изучить существующие технологии разработки веб-сайтов и мотивировать выбор технологии разработки.
3. Определить требования к дизайну программного продукта.
4. Описать основные элементы клиентской разработки.
5. Определить структуру программного продукта и выполнить его прототипирование с использованием современных инструментов веб-разработки.
6. Разработать программный продукт и описать основные этапы процесса разработки.
7. Протестировать программный продукт и определить требования к нему.
 
1. Тема и адрес сайта. Исследование предметной области. Привести адреса сайтов и дать им краткие характеристики
Все сайты формируются из некоторого конечного набора веб-страниц, организованного специальным образом, который называется структурой сайта.
Каждая веб-страница также имеет свою структуру, которая определяется веб-дизайнером, front-end разработчиком и специаьлными средствами структурирования веб страниц, к которым относятся наиболее распространенные
HTML5 – средство проектирования содержимого веб-страницы в виде специальных текстовых блоков,
CSS3 – средство форматирования веб-страницы, средство расположения текстовых блоков на отдельных прозрачных слоях веб-страницы,
JavaScript – клиентский язык программирования, который вносит динамические элементы в содержимое веб страницы, организует управление навигацией и мультимедийным контентом
Веб-страницы по отношению к формированию содержания делятся на статические и динамические.
Статическая веб-страница, страница, отформатированная средствами языка разметки HTML с использованием каскадных таблиц стилей.
Динамическая веб-страница (англ. Dynamic web page) - веб-страница, содержание которой может меняться.
Аналогично сайты разделяют на динамические и статические.
Статические сайты бывают трех основных видов:
Сайт –визитка. Сайт из нескольких страниц со статическими или динамическими блоками не использующий в своей работе клиент-серверные технологии. Другое название сайт-витрина,
Промо сайт. Сайт из нескольких страниц. По структуре сайт-визитка, но обязательно использование мультимедиа для рекламных целей одного или нескольких продуктов
Лендинг страница – сайт, на одной странице, выполняющий одну узко направленную функцию работы с клиентом.
Динамические сайты строятся по клиент-серверной технологии, предполагают разделение управлением сайта на две неравнозначные части клиентскую и серверную. В действительности частей может быть значительно больше, но обязательно не меньше двух- клиентской, которая просматривается и управляется браузером и серверная, расположенная на удаленном компьютере, расположенном в сети интернет, где находится серверная часть, разработанная средсвам серверного языка программирования, наиболее популярный PHP 7 и системы управления базами данных, наиболее популярная MySQL.
Разработка статических сайтов нас не интересует по теме дипломного проекта – функции сайта значительно шире, реализуемых статистическими сайтами.
Значит рассматриваем разработку динамического сайта на клиент-серверной архитектуре.
Существуют несколько способов, разработки сайтов, которые выбирает заказчик в зависимости от наличия средств на разработку и времени на создание готового программного продукта.
Существует несколько подходов к разработке динамических сайтов и они достаточно сильно отличаются друг от друга.
Разработка сайта с нуля. Чистое кодирование. Максимальная гибкость разработки и последующего управления сайтом, разработчик может заложить т реализовать любые функции и их настройки. Но при этом возникает целая цепочка серьезных проблем:
Разработчик знает свой код, при смене разработчика минимум часть знаний, а значит и управляемостью кода меняется,
Технологи находятся в постоянном развитии, а это значит, что клиентская и серверная части сайта должны посоянно обновляться, т.е. мы привязаны к разработчику и он может диктовать свои условия, даже если они грабительские.
Время разработки сайта и его модернизации значительно превышает время разработки с импользованием других технологий.
Для разработки сайта вручную необходимо задействования команды специалистов и длительного времени на разработку проекта, создание и тестирование сайта. Т.е. разработка сайта вручную дорога и не эффективна. Однако используется крупными предприятиями, которые могут себе позволить оплату целого штата собственных программистов, где существует разделение обязанностей и приемственность.
Хранение данных
Можно выделить два типа данных: статические и динамические. Статические жестко зашиты в программу, изменить их можно только поправив сам текст программы. Страница «История школы» является примером статических данных. В противоположность статическим, динамические данные время от времени меняются (новости, расписание, задания, оценки). Естественно, что приложение должно уметь работать с динамическими данными, а значит, у него должно быть хранилище таких данных.
В зависимости от сложности данных, требуемой частоты обновления, используют два варианта организации хранилища данных: а) хранить данные в текстовых файлах определенной структуры (XML документы) или б) организовать базу данных.
XML документы
XML - это метод создания структурированных текстовых документов. Формат XML стал компромиссным решением - несколько элементарных правил позволяют делать структурированные текстовые файлы, одинаково понятные и программе и пользователю.
Для хранения данных в XML документах, мы должны придумать определенную структуру для каждого типа данных и научить разрабатываемую программу доставать данные из файлов с такой структурой. Вероятнее всего, заносить информацию в эти файлы придется вручную, ибо при хранении данных в файлах возникают проблемы, связанные с совместным доступом к этим данным.
Базы данных
База данных – место хранения, изменения и обработки данных. Данные в базе жестко структурированы, поэтому прежде чем хранить какую-то информацию в базе, мы должны ее проанализировать, выделить структуру, а затем воплотить эту структуру в схеме базы данных. Задача достаточно сложная, но и преимущества от использования баз данных велики: легкость обработки огромных массивов данных, возможность сложного поиска нужной информации в базе, простота обновления данных и т.д.
В отличие от XML документов, базы данных не предназначены для того, чтобы пользователь работал с ними напрямую, так что использование базы подразумевает наличие программных средств для обновления хранящейся в ней информации.
Первое впечатление о любом веб-ресурсе формируется у посетителя в течение первых девяти секунд посещения, поэтому важно удостовериться, что цветовая схема дизайна интерфейса находится в соответствии с контентом и целевой аудиторией, цветовая схема должна усиливать функциональную нагрузку ресурса, при этом не отвлекая пользователей.
Цветовая гамма страницы дает возможность выделить такие наиболее важные части страницы как навигационные элементы, содержательные блоки, акценты, взаимосвязи и т.д. По этой причине, цвет - крайне важный элемент дизайна сайта-визитки[14].
Если веб-ресурс содержит богатый контент или имеет функциональную направленность, то веб-страницы должны быть как можно более простыми для визуального восприятия. В этом случае необходимо оставлять большое количество незаполненного пространства, или освобождать пространство между отдельными элементами страницы. Так же необходимо ограничивать цветовую палитру двумя или тремя главными цветами (полутоновыми вариациями) и небольшими акцентами в некоторых местах. Ограниченные цвета при