курсоваяГаджимурадов. Проектирование современного сайта для туристической компании
 Скачать 1.02 Mb.
|
|
Дагестанский государственный университет народного хозяйства Бизнес-колледж специальность СПО 09.02.03 Программирование в компьютерных системах Кафедра «Информационные технологии - 1» КУРСОВАЯ РАБОТА ПО ДИСЦИПЛИНЕ «ИНСТРУМЕНТАЛЬНЫЕ СРЕДСТВА РАЗРАБОТКИ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ» ТЕМА: “Проектирование современного сайта для туристической компании”
Дата защиты курсовой работы _______________________________________ Отметка о защите__________________________________________________
Подпись зав. кафедрой____________  Махачкала – 2022 г.СодержаниеВведение 3 Глава 1. Современные веб-технологии 4 1.1.Языки программирования 4 1.2.Обзор и сравнительный анализ веб-редакторов 6 1.3. Представления текста и графики на web-страницах 10 1.4. Основные этапы создания и проектирования сайта 16 В самую первую очередь, перед разработкой сайта, следует четко знать для чего будет предназначен этот сайт, его цели и задачи, какую информацию будет нести этот сайт. 16 Техническое задание (ТЗ) идет следующим этапом. В техническом задании исходя из названия, содержится более подробная информация о будущем сайте, чем подробнее и грамотнее будет прописано техническое задание, тем выше вероятность в удовлетворительном конечном результате и довольном заказчиком. 17 Создание дизайн-макета будущего сайта. При имеющемся дизайн-макете и заказчик, и исполнитель будут одинаково представлять будущий сайт, а значит риск в отличающемся конечном итоге будет минимален. Уже заранее можно увидеть каким будет сайт, но только визуально конечно же, ведь это пока что макет. В нем отображены: цветовая гамма, шрифты, кнопки, порядок элементов и прочее. От того, насколько качественно выполнено графическое оформление страниц, зависит понимание контента и общее восприятие сайта. 18 Преимущества использования макета 18 Верстка относиться к внешнему отображению элементов сайта (Front-end). Она не отвечает за базовые возможности сайта, например, за регистрацию пользователей, товарную корзину или прочие операции, связанные с вычислениями, внешними и внутренними запросами, хранением и загрузкой данных. 19 Выделяют три вида вёрстки: 19 – Табличная. 19 – Блочная. 19 – Семантическая. 19 При табличной вёрстке страница поделена на соседствующие друг с другом ячейки. Напоминает стандартную работу с таблицами в Excel. 19 В блочной верстке нет необходимости создавать лишние поддерживающие строки или столбцы. Контейнеры с содержимым задаются единственным тегом , точные параметры размеров и расположения которых определяются сразу. 19 Ещё более современный тип вёрстки – семантический. Семантическая верстка помогает поднять ваш сайт выше в поисковике. По сути семантические теги те же «дивы», только с другими названиями и каждый отвечает за свою роль. 19 Верстка должна состоять из HTML, CSS и желательно JavaScript, чтобы сделать сайт более функциональным. HTML (HyperText Markup Language) – язык разметки гипертекста, структура нашего сайта состоит из этого языка, мы строим из имеющихся тегов и их атрибутов со свойствами будущий веб-сайт. CSS (Cascading Style Sheets) – каскадные таблицы стилей, необходимый инструмент для усовершенствования визуальной, и не только, составляющей веб-сайта. Мы можем задать любые стили нашим html-тегам по нашему желанию, таким образом предать страницам современный, красивый дизайн. 20 Далее проводится работа над валидностью верстки и возможностью ее дальнейшей доработки при расширении проекта. Исходный код проверяется на наличие ошибок, подстраивается под современные стандарты качества и интегрируется в выбранную систему управления сайтом (CMS). 20 CMS (Content management system) – система управления содержимым, в нашем случае содержимое это веб-сайт. Такие системы позволяют даже неопытным пользователям, без навыков программирования, управлять содержимыми, менять шаблоны, редактировать любые разделы. C CMS большинство рутинных задач выполняется автоматически. Главная функция CMS — помощь владельцам или администраторам сайта в управлении контентом и формирование страниц для посетителей сайта. Структура сайта — разделы, категории меняются редко, в то время как контент может меняться очень часто. Особенно если речь идет об интернет-магазинах — информация о товарах корректируется постоянно. CMS для интернет-магазинов выполняет колоссальный объем работы автоматически, что очень удобно для администратора. Такая платформа должна быть рассчитана на большое количество посещений, на работу с сотнями и тысячами наименований товаров. 20 Настройка модулей. Одним из основных этапов создания сайта считается программирование — добавление в проект всех заложенных опций и функций. Задача программистов: разработать и внедрить заложенную в ТЗ функциональность, настроить основные модули, обеспечить корректную работу ресурса. На данном этапе также проводится техническая оптимизация, ускорение загрузки, выявление и устранение всех ошибок в коде. 20 Если требуется, отдельно проводится внедрение сторонних IT-продуктов для расширения функциональности сайта. Разработчики настраивают синхронизацию веб-сайта с CRM, подключают программу складского учета и бухгалтерию. Дополнительно проводится интеграция мессенджеров, подключаются онлайн-консультанты, настраиваются модули почтовой рассылки. При необходимости интегрируются калькуляторы стоимости заказа или расчета стоимости доставки, т. д. 21 Следующие этапы разработки сайта — базовая оптимизация и работа с контентом. Согласно рекомендациям SEO-специалиста, разрабатывается структура и посадочные страницы сайта, внедряются коммерческие факторы и т.д. Также на данным этапе возможно проведение базовой SEO-оптимизации: распределение веса страниц сайта, добавление и оптимизация изображений, заполнение meta-данных. 21 После завершения всех работ с кодом проводится наполнение страниц контентом. Сначала разрабатывается контент-план, затем загружаются уникальные тексты и авторский контент. В зависимости от специфики сайта, повышенное внимание уделяется медиа-контенту: графикам и таблицам, видеоматериалам и т. д. 21 И в конце, когда все работы выполнены, остается эту выполненную работу протестировать. На локальной копии проекта или тестовом сервере оценивается работа основных функций, скорость загрузки страниц, удобство серфинга. Любые ошибки устраняются, код и структура при необходимости редактируются. При успешном прохождении тестов ресурс устанавливается на хостинг компании и привязывается к домену. По завершении пусконаладочных работ заказчику передаются все права на управление ресурсом, а также необходимая документация при наличии. 21 Глава 2. Разработка веб-сайта для туристической фирмы 23 2.1. Стратегия разработки структуры веб-сайта 23 Структура сайта – это четкая схема, по которой будет разрабатываться ресурс. Наглядная структура покажет вид будущего сайта. 23 Структура может быть внешней и внутренней. Внешняя представляет собой макет страницы, на котором блоками обозначены отдельные ее элементы. Внутренняя структура включает в себя категории и разделы сайта и отношение к ним отдельных страниц. Ее сложнее всего организовать правильно. 23 Структура нашего сайта будет иметь следующий вид: 23 Рисунок 2.1.1. «Внешняя структура веб-сайта». 24 2.2. Исполнение проекта 24 Наш веб-сайт будет одностраничным (landing page). 24 Как только пользователь зайдет на наш веб-сайт, он увидит full screen экран нашего сайта, это значит, что в независимости от того, через какое устройство пользователь посетит наш сайт, у него на весь экран его устройства будет указанная нами область, т.е. шапка и эффектный фон. 24 24 Рисунок 2.2.1. «Home». 25 В самом верху располагается шапка сайта, в которой слева может находится логотип, название компании, в нашем случае это название «Travel», или и то, и другое, как правило являющиеся ссылками. В этой же «шапке», уже правее, находится меню состоящее из пунктов-ссылок, в этом меню первым пунктом стоит «Главная» или «Home», что переводится как «домашняя», а далее обычно пункты-ссылки на контакты, информацию о компании и т.д. К тому же, наша шапка является фиксированной к верху, т.е. при листании страницы, шапка никуда не денется, а будет зафиксирована к верху страницы. 25 25 Рисунок 2.2.2. «Шапка сайта». 25 Наш сайт является еще и адаптивно-отзывчивым, что очень важно в современных веб-сайтах, потому что пользователь может посетить сайт с любого устройство, и чтобы наш сайт не «развалился» если на него зайдут, к примеру, с мобильного устройства, сайт нужно адаптировать для этого. На рисунке 2.2.3 изображено как будет выглядеть наш сайт, если его посетят с мобильного устройства или планшета. 25 26 Рисунок 2.2.3. «Адаптация для мобильных устройств и планшетов». 26 Как можно было уже заметить на рисунке 2.2.3 в углу для мобильных устройств расположена фигура, состоящая из четырех кубиков. Это меню-бургер. 26 26 Рисунок 2.2.4. «Меню-бургер». 26 Когда ширина страницы сужается до таких размеров, при которых пункты-ссылки в шапке уже не вмещаются на экране, используется меню-бургер, при нажатии на который, всплывает окно со всеми скрытыми в нем ссылками из шапки страницы. На Рисунок 2.2.5. наглядно изображено действие меню-бургера. 26 27 Рисунок 2.2.5. «Действие меню-бургера». 27 Также в шапке расположена кнопка, переключающая тему сайта со светлой на темную, при клике она также меняет иконку с «Солнца» на «Луну». 27 27 Рисунок 2.2.6. «Кнопки переключения темы». 27 Эта функция очень полезна, например, ночью, когда пользователю не приятно смотреть на белый фон в темноте, он может переключить фон на темный и насладится приятным для глаз фоном. Вот какой будет фон сайта при переключении на темную тему: 27 28 Рисунок 2.2.7. «Темная тема сайта». 28 После «Home», пользователя встречает «About», с заголовком, описанием, ссылкой, стилизованной под кнопку и двумя изображениями. При чем, когда мы пролистаем к этому пункту, то в шапке, подчеркивание на «Home», перейдет на «About». Также если мы кликнем на один из этих ссылок в шапке, то страница сама перейдет на это место на странице. Такие ссылки называются – якорями. 28 28 Рисунок 2.2.8. «About». 28 Дальше следует блок «Discover», с заголовком и тремя изображениями являющееся также ссылками. 29 29 Рисунок 2.2.9. «Discover». 29 Этот же блок на мобильной версии сайта, превращается в слайдер. 29 29 Рисунок 2.2.10. «Слайдер». 29 Далее идут информационный блок. 30 30 Рисунок 2.2.11. «Информационный блок». 30 Сразу за ним следует блок с видео воспроизводящееся кликом. 30 30 Рисунок 2.2.12. «Видео тур». 30 Последняя ссылка в шапке «Places» ведет на блок с различными туристическими местами. В этом блоке все элементы имеют кнопки-ссылки, текст и изображения пляжей. 30 31 Рисунок 2.2.13. «Places». 31 На странице у нас также есть форма, в которой пользователь по желанию может оставить свою электронную почту. 31 Обычно такие формы располагаются на странице с целью отправлять рассылку на электронную почту пользователя или чтобы с пользователем связались. 31 31 Рисунок 2.2.14. «Форма». 32 Наконец-то мы пролистали в самый низ нашей страницы. Ниже подвала уже некуда, на то он и называется подвалом. 32 Здесь находятся: 32 – Карта сайта. 32 – Контактная информация. 32 – Элементы навигации. 32 – Ссылки на социальные сети. 32 32 Рисунок 2.2.14. «Подвал». 32 Чтобы быстро вернутся в самый верх страницы, можно воспользоваться элементом навигации, клик на который, перенесет нас в начало. 32 33 Рисунок 2.2.15. «Элемент навигации». 33 Заключение 34 В работе были представлены различные языки программирования, более подходящие для разработки и использования при создании веб-сайтов. Не обошли стороной также очень важные инструменты создания сайтов – текстовые и графические редакторы. Выявлены их плюсы и минусы. В теоретической части раскрыта концепция современных сайтов, то, каким должен быть веб-сайт. По мимо языков программирования, мы затронули язык разметки гипертекста, в котором строится внутренняя структура сайта, и каскадные таблицы стилей, которые придают сайтам привлекательный внешний вид и удобность использования. В практической части мы показали и объяснили проделанную работу при создании нашего сайта, использовали то, о чем говорили в теоретической части, тем самым закрепили изученное на практике. 34 Время не стоит на месте, также, как и технологии. Это касается и веб-технологий. На замену старому приходит новое, или усовершенствуется старое. Поэтому разработчик должен «обновляться» вместе с технологиями, постоянно развиваться. То, что раньше было актуальным, и без чего просто нельзя было представить будущее, завтра может стать уже устаревшей технологией. 34 Литература 35 1.Алексеев А. Введение в Web-дизайн. Учебное пособие. — М.: ДМК Пресс, 2019. 35 2.А.Ю. Гаевский 47 готовых решений для создания Web-сайта (+ DVD-ROM) / А.Г. Богданов и др. - Москва: Мир, 2018. - 272 c.— 184 c. 35 3.В. Дронов JavaScript в Web-дизайне / В. Дронов. - М.: СПб: БХВ, 2020. — 880 c. 35 4.Владимир Дронов HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. - М.: БХВ-Петербург, 2020. - 1156 c. 35 5.Дэвид Макфарланд. Новая большая книга CSS. - М.: Питер, 2018. — 720 c. 35 6.И.В. Шапошников Web-сайт своими руками / И.В. Шапошников. - М.: БХВ-Петербург, 2020. - 756 c. 35 |