Ім'я файлу: kurs._proekt_adamchuk_2_kurs_.docx
Розширення: docx
Розмір: 317кб.
Дата: 19.06.2022
скачати
Пов'язані файли:
АС.docx




Введение

Интернет стал неотъемлемой частью нашей жизни. Способы его использования необычайно разнообразны: коммуникация, поиск информации, развлечения и многое другое. В нашем случае нас интересует возможность продвижения своего бизнеса с использованием сети интернет. Актуальность создания сайта для отеля состоит в том что это поможет продвижению бизнеса. Сайт безусловно облегчит работу сотрудников call-центра отеля, людям не придется обзванивать отель для того чтобы узнать количество свободных номеров, расположение отеля, кроме того они смогут узнать подробную информацию о прилегающей территории и посмотреть фотографии номеров. Сегодня проектирование и создание сайтов является весьма востребованной услугой. Большинство крупных компаний уже оценили преимущества наличия личного web-сайта. Но владельцам малого и среднего бизнеса, не стоит забывать, что наличие сайта-визитки или даже полноценного сайта компании безусловно увеличит интерес пользователей к вашему бизнесу. В сети интернет уже существуют сайты с сетью отелей, на них пользователь может сравнить отели по качеству и узнать номер телефона ресепшена. Но данные сайты не предоставляют полную информацию для пользователя, на них нет отображения полноценного списка фотографий, количества свободных номеров, для получения полной информации и бронирования комнат необходимо лично звонить на горячую линию отеля. Именно от этих минусов владельца отеля избавит персональный сайт компании. Если страницы качественно спроектированы, пользователи будут дольше на них задерживаться, что не может не сказаться на продвижении бизнеса. Если сайт сделан основательно потребитель понимает что это серьезная компания которой можно доверять, поэтому нельзя забывать о seo-оптимизации сайта, которая поднимет позицию в поисковой выдаче, по определенным запросам и увеличит сетевой трафик и потенциальных клиентов.

Открытие сайта – это серьезный информационный повод. Оно может привлечь внимание многих СМИ и новых посетителей.[1]

Цель данного курсового проекта разработка и создание структуры сайта для отеля, проведение анализа интернет ресурсов и изучение языков для верстки интернет-страниц .


1. Анализ предметной области

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

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

1.1 Язык разметки страниц HTML

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

Графика и звуковые файлы, включенные в HTML-документ, хранятся в отдельных файлах. Браузеры переводят флаги разметки и располагают текст и графику на экране соответствующим образом.[3]

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

1.2 Каскадные таблицы стилей CSS

CSS используется для приданию сайту внешней привлекательности, он отвечает за шрифты, цвет, высоту и ширину строк, задний фон и многое другое. Сайт может существовать и без использования таблиц стилей, но тогда он будет выглядеть блекло и не интересно. На таком сайте пользователь вряд ли задержится, а это пагубно повлияет на продвижение. Поэтому большинство web-разработчиков уделяют большое внимание дизайну web-страницы. Цветовая расцветка не должна бросаться в глаза, но и не должна быть блеклой, шрифты должны быть читаемы и соответствовать стандартным размерам. Для решения всех этих задач мне понадобится CSS.[4]

1.3 Плюсы и минусы CSM сайтов

С недавнего времени некоторые web-разработчики облегчают рутинную работу, используя CSM-сайты, такие как WordPress и Joomla. С одной стороны это ускоряет процесс создания web-страницы, вам не нужно знать языки разметки и каскадные таблицы стилей. Это дешево, вам не нужно платить деньги web-программисту, система проста, и вы сможете сделать все сами.

Это быстро, для создания web-сайта на Joomla вам потребуется несколько часов, вам не нужно будет размечать весь документ и продумывать дизайн сайта. CSM популярны, поэтому при возникновении проблем вы легко найдете решение в интернете, так как людей у которых возникали подобные проблемы много и вы легко сможете найти подробный туториал по решению данной задачи. Еще одним плюсом является большое количество расширений и плагинов, поэтому при необходимости добавить на сайт галерею изображений или календарь, вам будет достаточно найти необходимый плагин в интернете.

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

Безопасность таких сайтов крайне низкая, это следствие высокой популярности CSM. Каждый день в интернете появляются статьи по взлому Joomla и Wordpress, причем, как и для создания, так и для взлома сайта на CSM не нужно обладать знаниями хакера.

Внутренняя структура сайта не оптимизирована, такие сайты не продвигаются в топы Гугла и Яндекса, а значит у нас не будет повышаться трафик и как следствие не будет увеличения клиентов. Из за того что у каждой CMS часто выпускаются обновленные версии, то и все плагины очень зависимы от них. Это значит, что установив расширение предыдущей версии на свой сможете получить сверху несколько багов или вовсе нерабочий сайт.[4]
1.4 Плюсы и минусы сайтов с нуля

Структуру вашего сайта известна только вам, он уникален. Взломать такой сайт могут лишь очень хорошие программисты, но они не заинтересованы сайтами для отелей, поэтому вы ничем не рискуете. Такой сайт легко оптимизировать, никаких ошибок совместимости версий CSM. И самое главное такие сайты легко продвигаются, так как нет лишней информации, ваш код грамотно скомпонован и только вы настраиваете seo-оптимизацию.

Из минусов можно отметь то что создания сайта с нуля нам понадобятся знания языков программирования JavaScript, HTML, CSS и возможно больше, все зависит от того, каким требованиям должен отвечать сайт. Необходимо время, верстка сайта — дело не одного вечера. Необходимо построить план сайта, составить архитектуру проекта, придумать дизайн, написать код. С одной стороны может показаться что плюсов в написании сайта с нуля не так много, но если вы занимаетесь серьезным бизнесом, вы должны понимать что безопасность и быстрое продвижение в топы поисковиков является важнейшей характеристикой web-сайтов.[2]

2. Концепция сайта

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

Сайт имеет древовидную структуру, так как она является самым универсальным способом размещения web-страниц. Благодаря навигации пользователь легко может выбрать раздел, который его интересует.[5] Сверху на сайте расположена панель навигации. По центру находится слайдер, используя который пользователь может получить интересующую информацию об отеле или забронировать номер. Ниже находится перечень номеров с описанием:

  • Комфорт

  • Бизнес-класс

  • Вип

  • Люкс

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

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

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

Для решения данной задачи я использовал язык разметки html,

Технология этого способа создания Web-страницы такова:

В текстовом редакторе, например блокнот, создается файл Web-страницы, расширение которой .htm. После редактирования открываем файл в браузере, например Google Chrome. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Google Chrome, используется пункт меню Вид, Источник или в виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку «Обновить» в панели инструментов Google Chrome.

Ниже приведена часть кода на языке HTML (см. ниже) которая описывает меню навигации в верхнем углу главной страницы сайта. Благодаря элементу *Div, мы объединяем фрагмент кода с целью последующего изменения вида содержимого. Так как навигационная панель является списком мы используем теги *li, который определяет отдельный элемент списка и делает его доступным для редактирования.

















  • Home


  • Portfolio


  • Services


  • Others



    • Full Width Page


    • Buttons






  • Contact














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











slide 1




Вид на праздник!








slide 2




Ресторан “Баллада“








slide 3




Ресторан “Садко“








slide 4




Спортивные площадки поблизости








slide 5




Комфортные тренажерные залы








slide 6




Сауны и джакузи








slide 7




Забронировать номер онлайн








arrow prev

arrow next







Как можно видеть из следующего рисунка (рис. 2.1) на данном этапе используя лишь HTML, я создал структуру сайта, все кнопки и ссылки на таком сайте работают, отображается текст и некоторые картинки, но пользоваться таким сайтом крайне неудобно. Решить эту проблему можно при помощи CSS.



Рис. 2.1: Главная страница без использования CSS


2.2 Графическая составляющая сайта

В ходе выполнения данного курсового проекта мною были выполнена графическая составляющая сайта (рис. 2.2 ) Сайт может существовать и без каскадных таблиц стилей, но исключая их разработчик лишает сайт возможности выглядеть визуально привлекательно. А без этой характеристики сайт вряд ли будет удобен для пользователей. CSS — формальный язык описания внешнего вида документа написанного на языке html, также может применяться к любым XML документам.

Ниже приведен фрагмент кода, в котором задаются характеристики шрифта всего документа, отдельных частей, задается задний фон, размер шрифтов. Кроме того выделяя фрагменты кода в контейнеры становится возможным редактирование отдельных частей web-страницы.
body {

font-family:"Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, sans-serif;

background-color: #f0f0f0;

color: #565656;

font-size: 13px;

overflow-y: scroll;

overflow-x: hidden;

}

html, body {

height: 100%;

}

#container {

min-height: 100%;

height: auto !important;

height: 100%;

/* the bottom margin is the negative value of the footer's height */

margin-top:-20px;

}
p {

line-height: 20px;

margin-bottom: 20px;

}

a {

text-decoration: none;

color: #565656;

}

a:hover {

text-decoration: none;

color: #5d8ba6;

}

a.more {

display: inline-block;

color: #5d8ba6;

}

a.more:hover {

text-decoration: underline;

}

pre {

margin-bottom: 20px;

font-size: 11px;

background-color: #e8e8e8;

padding: 0 10px;

}

.highlight {

color: #5d8ba6;

border-bottom: 1px dotted #5d8ba6;

}

.highlight2 {

background-color: #e1e1e1;

padding: 0px 5px;

color: #222222;

}

.highlight3 {

color: #5d8ba6;

}

h1, h2, h3, h4, h5, h6 {

font-family: 'MidoMedium';

font-weight: normal;

color: #565656;

margin-bottom: 10px;

}

h1 {

font-size: 28px;

}

h2 {

font-size: 25px;

}

h3 {

font-size: 22px;

line-height: 26px;

}

h4 {

font-size: 17px;

}



Рис. 2.1: Главная страница с использованием CSS
Как мы видим из следующего рисунка (рис. 2.2), подключив каскадные таблицы стилей сайт стал выглядеть намного привлекательнее, картинки из списка были выделены в перечень, который позволяет пользователю легко определиться с необходимым номером в отеле. На задний фон подгружается изображение, а по центру набор из картинок собирается в отдельный слайдер. Но сейчас он выглядит как статичная картинка, изображения не меняются, кнопки переключения не работают, а подписи картинок накладываются друг на друга.

2.3 Динамические объекты сайта

Также мною выполнена динамическая реализации объектов сайта

(рис. 2.3) Для того чтобы на нашем сайте появились динамические объекты, такие как слайдер, кнопки переключатели и подписи к картинкам мы будем использовать прототипно-ориентированный сценарный язык программирования JavaScript. Обычно используется как встраиваемый язык для web-страниц, по средствам которого web-страница становится более интерактивной.[6]

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

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



Рис. 1: Главная страница с использованием Javascript и Css

2.4 Программная реализация

Когда сайт готов к выпуску в сеть интернет, то ему необходимо выбрать доменное имя сайта и подобрать подходящий хостинг.

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

Хостинг — услуга по размещению информации на сервере, находящимся в сети интернет.[7]
Заключение
Целью данного курсового проекта была разработка и создание структуры сайта для отеля.

В рамках поставленной цели были решены следующие задачи:

  1. Ознакомление со стратегиями разработки интернет-сайта и прикладным использованием его в бизнесе;

  2. Проведен анализ современных Интернет-технологий с целью выбора оптимальных для использования их в разработке сайта;

  3. Выполнен анализ программ используемых для верстки и создания интернет-сайта;

  4. Изучен языка гипертекстовой разметки HTML;

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

  6. Изучен прототипно-ориентированный сценарный язык программирования Javascript;

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

  1. Продвижение бизнеса в Интернет. Все о PR и рекламе в сети. Вершина, 2008

  2. Бабаев А. Создание сайтов. ПИТЕР, 2014

  3. Дунаев В. HTML, скрипты и стили (3-е издание). ПИТЕР, 2012

  4. Алексеев А.П. Введение в Web-дизайн. СОЛОН-ПРЕСС, 2008

  5. Круга С. Веб-Дизайн или "не заставляйте меня думать!" Символ-Плюс, 2008

  6. Прохоренок Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. БХВ-Петербург, 2015

  7. Панфилов К. По ту сторону веб-страницы. ДМК Пресс, 2008

  8. Кроудер Д. Создание web-сайта для чайников. Диалектика, 2009

  9. Русаков. М. Как сделать сайт-визитку своими руками. Интерет-издание, 2016

  10. Бердышев С.Н. Искусство оформления сайта. ПИТЕР, 2010

скачати

© Усі права захищені
написати до нас