Файл: Разработка сайта кинотеатра «Дружба» (ГЛАВА 1. АНАЛИТИЧЕСКАЯ ЧАСТЬ).pdf

ВВЕДЕНИЕ

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

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

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

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

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

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

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

К кинотеатрам вновь возвращается былая популярность, ведь современные технологии позволяют зрителю буквально «влиться» в происходящее на экране, самому стать участником событий кинофильма. К выбору кинотеатра посетитель подходит очень ответственно, ведь низкий уровень обслуживания или качества фильма может сильно испортить удовольствие от киносеанса. Как же привлечь посетителей именно в Ваш кинотеатр? В этом поможет создание сайта кинотеатра. Информацию о кинотеатрах все чаще люди ищут с помощью интернета. Узнать, какие фильмы находятся в прокате, сколько стоят билеты, когда показывают тот или иной фильм, узнать адреса специально оборудованных кинотеатров (IMAX, 3D) – это и многое другое интересует многомиллионную армию пользователей интернета.

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

В соответствии с вышеизложенным, мною была выбрана тема дипломной работы «Разработка web-сайта «Кинозал Дружба».

ГЛАВА 1. АНАЛИТИЧЕСКАЯ ЧАСТЬ

1.1 Цель разработки

Целью данной дипломной работы является разработка web-сайта «Кинозал Дружба». Результатом работы является полностью созданный сайт.

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

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

Сфера разработки дипломной работы включает в себя следующие вопросы:

• Разработка чернового прототипа будущего сайта.
• Разработка структуры сайта.
• Разработка дизайна.
• Верстка шаблонов сайта.
• Тестирование работоспособности сайта.

Каждая страница сайта связана с остальными посредством Главного меню, имеет логическую структуру и размещена в соответствующем пункте меню.

1.2 Обзор средств программирования

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

При разработке web-сайта нельзя обойтись без html-документа.

Html-документ – это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном (html-редактор), с подсветкой кода (sublime text 2/3, Visual Studio Code и т.п.). Html-документ имеет расширение .html.

Html-редакторы могут быть двух различных категорий: визуальные редакторы html (WYSIWYG-редакторы) и не визуальные редакторы html. Минус визуальных редакторов в том, что они генерируют код для корректного отображения программными методами, что плохо сказывается на дальнейшем поддерживании кода и читаемости его для других разработчиков. Поэтому я использовал не визуальный редактор. Для разработки верстки не требуется компиляторов и отладчиков, поэтому код можно писать в любом текстовом редакторе, который поддерживает форматы html, css. В моем случае был использован текстовый редактор SublimeText 3, который присутствует на всех самых распространенных операционных системах. Проверка кода производилась в распространенных на данный момент веб-браузерах: Google chrome, Yandex browser, Firefox, Safari, Microsoft edge.

Sublime text 3

В качестве редактора кода использовался sublime text 3 - это бесплатный редактор кода с практически неограниченными возможностями. Функционал можно расширять при помощи различных плагинов. Также он является кроссплатформенным и поддерживается всеми популярными системами. Имеет подсветку синтаксиса популярных языков программирования и языков разметки.

Некоторые возможности:

• Быстрая навигация (Goto Anything)
• Командная палитра (Command Palette)
• API плагинов а Python
• Одновременное редактирование (Split Editing)
• Высокая степень настраиваемости (Customize Anything)
• Поддержка систем сборки

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

Заготовки (сниппеты):

Сохранение фрагментов часто используемого кода, ключевые слова для их запуска.

Переход по файлам:

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

Другие особенности:

• Дополнительно реализована функция автосохранения, помогающая пользователям не потерять проделанную работу.
• Настраиваемые комбинации клавиш и инструмент навигации позволяют назначать свои комбинации клавиш для меню и панелей инструментов (только для первой версии, во второй и третьей – Command Palette).
• Возможность поиска по мере набора используется для поиска в документе.
• Функция проверки синтаксиса работает подобным же образом, проверяя корректность прямо во время ввода.
• Есть возможность автоматизации с помощью макросов и повтора последних действий.
• Команды редактирования, включая редактирование отступов, переформатирование параграфов и объединение строк.

1.3 Описание языка программирования

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

HTML (Hyper Text Markup Language – «язык гипертекстовой разметки») используется для форматирования (разметки) страниц, которые мы видим на экране браузера.

В html часто используется термин «тэги». Тэги – это метки, которые используются для указания браузеру, как он должен показывать web-сайт. Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">". Обычно имеются два тэга – открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш "/". Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга. Но из каждого правила есть исключения, и в html также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так: <br >.

Элементы языка гипертекстовой разметки HTML

Html-страница – это обычный текстовый файл имеющий расширение html. Для создания html-страницы не требуется никаких специальных программ. Подойдет любой текстовый редактор умеющий сохранять файлы в обычном текстовом формате. Я использовала Sublime text 3.

Рассмотрим тэги и параметры тэгов языка html:

<html> </html> – объясняет браузеру, что она начинает читать информацию на языке кода HTML. В него входят все теги веб страницы.

<head> </head> – голова документа. Тэг показывает, что между открывающей и закрывающей частью находится информация о странице. Также в этой области подключаются стили, указываются meta теги.

<meta> – определяет мета-тэги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к мета-тэгам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один мета-тэг, все они размещаются в контейнере <head>. Тэг не виден в браузере при просмотре страницы, но значительно увеличивает размер страницы. Чтобы сайт находился в числе первых, выдаваемых поисковыми машинами при запросах пользователей, нельзя игнорировать использование мета-тэга. Кроме того, необходимо правильно заполнять содержимое мета-тэгов. Ключевые слова сайта задаются с помощью атрибута name со значением “keywords”: <meta name= “keywords” content=””>. Описание сайта записывается со значением name= “description”.

<title> </title> – тэг даёт название документу, которое будет располагаться в верхней строке браузера. Этот раздел размещается между тегами <head> </head>. Поисковая машина выдает заголовок поисковым машинам.

<body> </body> – указывает начало и конец основной части документа. Именно тело документа выставляется в окне обозревателя. Внутри этого тэга часто пишут параметры, чтобы определить цвет фона, цвет шрифта по умолчанию, фоновые обои, некоторые другие параметры.

Параметры bgcolor, background и text – эти параметры добавляют к тэгу <body>. Параметры bgcolor и background определяют цвет фона. В первом случае цвет задаётся шестью цифрами из шестнадцатеричной системы, которые определяют RGB цвета для экрана монитора (некоторые цвета можно задать английскими словами). Во втором случае прописывается путь к заранее созданному фону. Параметр text определяет цвет шрифта.

Тэги заголовков от <h1> до <h6>. Задают один их шести уровней заголовка. <h1></h1> – самый большой шрифт, <h6></h6> – самый маленький. Заголовки предназначены для выделения небольшой части текста.

<font> </font> – тэг шрифта. В данном теге задается типа шрифта, начертание, размер.

Параметры size, face, color – эти параметры содержатся в тэге font. Для того чтобы выделить большой фрагмент текста или одно слово используют параметр size. В отличие от заголовков (<hn> </hn>) текст не выделяется жирным шрифтом. Стандартный размер по умолчанию +0 (size= «+0»). С помощью атрибута face задаётся шрифт текста. Таким образом, можно задать любой шрифт который понравился. Всё же лучше задавать стандартные шрифты, так как у посетителя сайта может не оказаться какого-нибудь эксклюзивного шрифта. Цвет шрифта указывается шестнадцатеричным кодом или английским словом с помощью параметра color.