2
ОГЛАВЛЕНИЕ
ВВЕДЕНИЕ .................................................................................................................. 4
1. Глава 1: Общие вопросы проектирования веб-сайтов ........................................ 7
1.1. Понятие веб-сайта, типы веб-сайтов ............................................................ 7
1.2. Технология разработки веб-сайтов ........................................................... 12
1.2.1.Статические и динамические сайты ................................................. 12
1.2.2.Технология серверного программирования. ..................................... 15
1.2.3. Технологии клиентского программирования .................................. 17
2. Глава 2 : этапы создания веб-приложения ......................................................... 22
2.1. Начальные этапы разработки веб-приложения......................................... 22
2.1.1.Постановка целей разработки веб-приложения и исследование
предметной области ...................................................................................... 22
2.1.2.Разработка технического задания ...................................................... 24
2.1.3.Создание дизайн-макета ..................................................................... 26
2.2. Верстка, программирование и внедрение в CMS ..................................... 27
2.2.1.Вёрстка и программирование веб-сайта ........................................... 27
2.2.2.Система управления содержимым (контентом) (CMS) ................... 31
2.3. Наполнение сайта ........................................................................................ 34
2.4. Запуск сайта в интернете ............................................................................. 39
2.4.1. Выбор домена и загрузка сайта на хостинг ...................................... 39
2.4.2.Тестирование сайта .............................................................................. 43
2.5. Развитие и продвижение ............................................................................. 46
3. Глава 3 : создание веб-приложения .................................................................... 54
3.1. Начальные этапы разработки веб-приложения .......................................... 54
3.2. Разработка и развитие веб-приложения ...................................................... 59
3
3.2.1. Вёрстка, наполнение и запуск веб-приложения ..................................... 59
3.2.2. Тестирование веб-приложения ................................................................ 60
3.2.3. Развитие и продвижение ........................................................................... 68
ЗАКЛЮЧЕНИЕ ........................................................................................................ 72
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ ................................................. 75
ПРИЛОЖЕНИЕ ......................................................................................................... 79
4
ВВЕДЕНИЕ
Сегодняшний мир уже сложно представить без интернета. Интернет
является важнейшим средством массовых коммуникаций, которое по
значимости стоит в одном ряду с телевидением, прессой и телефоном.
Буквально за последние несколько лет Интернет стремительно превратился в
один из главных инструментов, используемых для развлечений, общения,
торговли, рекламы и служит источником различной информации для каждой
группы пользователей. С каждым годом продолжает рости количество
изданий, посвященных всемирной сети Интернет, что способствует
широкому её распространению даже в областях, далеких от техники.
За всю историю человечества ннтернет - наиболее
быстроразвивающееся средство вещания. По мнению экспертов, число
пользователей увеличивается вдвое каждое полугодие. Узнать о последних
новостях, погоде, записаться к врачу или проверить наличие штрафов, подать
декларацию на получение налоговых вычетов или льгот, найти нужную
информацию по какой-то конкретной тематике и обсудить её – всё это
возможно с помощью интернета, а в частности веб-сайтов и веб-приложений.
Благодаря веб-сайтам и веб-приложениям можно быстро и без особых
усилий получить или распространить нужную информацию. При этом веб-
приложения способны не только предоставить информацию общего или
развлекательного характера, но и автоматизировать работу, к примеру,
государственных органов и процесс взаимодействия физических и
юридических лиц с ними. Так же нельзя не упомянуть о пользе
использования веб-сайтов для организаций, работающих в сфере продаж
товаров и услуг. Потенциальный покупатель или клиент с помощью сайта
организации может в привлекательной форме получить исчерпывающую
информацию об организации и о том, что она предлагает. Исчерпывающая
информация, каталог товаров, прайс листы, возможность осуществить заказ,
5
размещенный на веб-сайте или веб-приложении, дают возможность не
разъяснять из раза в раз одни и те же вопросы в телефонной беседе с
клиентом, и позволяют освободить время сотрудников фирмы для решения
более важных задач. Именно поэтому создание веб-сайта для организации,
занимающейся коммерческой деятельностью, продиктовано современной
необходимостью.
Если посетителя заинтересовала информация, сайт «может помочь»
ему быстрее и проще получить интересуемых товар и услугу, вследствие чего
организация получает больше целевых клиентов и, соответственно, больше
прибыли. Всеми перечисленными выше факторами и обуславливается
актуальной выбранной темы.
Объектом исследования являются сайты, а в качестве субъекта
рассматривается процесс разработки веб-приложения.
Целью дипломной работы является закрепление и углубление
теоретических знаний, полученных при изучении дисциплин
общепрофессионального цикла и дисциплин специализации, приобретение и
развитие необходимых практических умений и навыков в соответствии с
требованиями к уровню подготовки.
Задачи дипломной работы:
рассмотреть общие понятия, связанные с веб-сайтами;
провести классификацию и выделить различные типы сайтов;
выполнить обзор существующих технологий разработки веб-
сайтов;
рассмотреть каждую технологию более подробно;
рассмотреть все этапы разработки веб-прложений;
разработать веб-приложение.
Практическая значимость работы состоит в том, что созданное в итоге
работы веб-приложение будет приносить организации потенциальных
клиентов.
6
При написании дипломной работы использовались научные труды
следующих авторов: Васильева И. Н. [2], Никсон Р. [4].
7
ГЛАВА 1: ОБЩИЕ ВОПРОСЫ ПРОЕКТИРОВАНИЯ ВЕБ-
САЙТОВ
1.1. Понятие веб-сайта, типы веб-сайтов
Информация, которая доступна пользователям Internet, находится на
компьютерах, называемых веб-серверами, на которых установлено
специализированное программное обеспечение. Большая часть этой
информации организована в виде веб-сайтов.
Веб-страницы представляют собой файлы формата
«неформатированный текст» (текст в ASCII-кодах, plaintext), распознаваемые
любыми операционными системами. Файл такого вида может быть
отправленным практически на любой компьютер, который подключен к сети
Интернет. Для создания веб-страницы можно использовать обычный
текстовый редактор, к примеру, стандартная программа Windows
Notepad(блокнот). [16]
Веб-страницы имеют расширение html или другие, в случае если при
их создании использовались специальные серверные технологии (к примеру,
php, shtml, asp). Тип HTML-файлов происходит от названия языка создания
web-страниц HTML. По этой причине web-страницы зачастую называют
HTML-документами. HTML-документ содержит команды и текст языка
HTML, которые называют дескрипторами разметки или просто тегами
(tag)[9].
С помощью тегов языка HTML определяют:
структуру документа: взаимное расположение графической,
текстовой или любой другой мультимедийной информации;
внешний вид документа (цвет фона, формат шрифта, и т. д.);
ссылки на интернет-ресурсы.
С помощью HTML можно сформировать на странице сайта блоки,
содержащие текст или изображения, организовывать таблицы, изменять
8
отображение цвета документа и форматировать текст, добавлять аудио-
файлы, реализовывать переход на другие разделы или страницы сайта,
используя гиперссылки, а также создавать взаимозависимое расположение
блоков и прочих компонент страницы.
Чтобы просмотреть веб-сайты на компьютере пользователь должен
использовать специальные программы - браузеры. В любой web-браузер
включён интерпретатор языка HTML, что даёт возможность корректно
отобразить web-страницу, включая всё ее содержимое на экране. Все
вышесказанное относится так же и к XHTML – более новой модификации
языка HTML.[2]
Веб-сайт – это информация, которая представлена в определенном
виде, располагающаяся на Web-сервере и имеющая свое имя (адрес). В
зависимости от того, какое имя (адрес) сайта будет задан в строке "Адрес",
браузер станет загружать соответствующую информацию.[28]
Сайт может состоять из связанных друг с другом веб-страниц. Веб-
страница – это текстовый файл с расширением *.htm, содержащий текстовую
информацию и специальные команды, называемые HTML-кодами,
определяющие как эта информация будет отображаться в браузере. Вся,
аудио- и видео-информация, графическая информация не входит
непосредственно в веб-страницу и представляет собой отдельные файлы с
расширениями *.jpg (графика), *.gif, *.mid, *.avi (видео)*.mp3 (звук). В
HTML-коде страницы содержатся только указания на файлы данного типа.
У каждой страницы веб-сайта также есть собственный Internet адрес,
состоящий из адреса сайта и имени файла, соответствующего данной
странице. Таким образом, веб-сайт – это информационный ресурс, который
состоит из связанных друг с другом гипертекстовых документов (Web-
страниц). Он размещен на веб-сервере и имеет индивидуальный адрес.
Просмотреть веб-сайт имеет возможность любой человек, имеющий
компьютер и доступ в Internet.[31]
Сайты можно классифицировать по множеству критериев.
9
По доступности сервисов:
Открытые — это сервисы полностью открыты для любых
пользователей и посетителей.
Полуоткрытые — чтобы получить доступ к сайту, необходимо
зарегистрироваться.
Закрытые —закрытые рабочие и служебные сайты организаций
(включая корпоративные сайты), персональные сайты частных лиц. Сайты
такого типа доступны для ограниченного круга людей. Доступ новым
пользователям обычно даётся через т. н. инвайты(приглашения).
По типам макетов:
Резиновый макет — страницы сайта автоматически расширяются в
соответствии с шириной экрана монитора, отображаясь во весь экран
монитора по ширине. Данный тип макета является частным случаем макета
фиксированного типа.
Фиксированной ширины — высота и ширина элементов сайтов
имеют неизменное, фиксированное значение, которое не зависит от размера,
разрешения и соотношения сторон экрана монитора.
По физическому расположению:
Локальные сайты — сайты, доступные только в локальной сети.
Это могут быть и корпоративные сайты фирм, и сайты частных лиц.
Общедоступные сайты сети Интернет.
По схеме представления информации, её объёму и категории решаемых
задач:
Интернет-представительства руководителей или владельцев
бизнеса.
Сайт-визитка — содержит общие сведения о владельце сайта
(организация или индивидуальный предприниматель). Род деятельности,
история успешной работы, прайс-лист, контактная информация, реквизиты,
местоположение на карте и схема проезда. Рекомендуется на сайтах
10
подобного типа разместить успешные работы, кейсы и т.п. Таким образом
сайт выступает в роли подробной визитной карточки.
Представительский сайт —сайт-визитка с более расширенной
функциональностью. На нём представлено достаточно подробное описание
услуг, отзывы, портфолио, форма обратной связи и прочее.
Корпоративный сайт — сайт, содержащий развёрнутую
информацию о компании-владельце, продукции или услугах, новостях и
мероприятиях в компании. Отличие от сайта-визитки и представительского
сайта заключается в том, что в данном случае информация представлена в
полном объёме, зачастую содержит функциональные инструменты для
работы информацией на сайте (фильтры, поиск, календарь событий, форумы,
фотогалереи, корпоративные блоги). Он быть интегрирован с внутренними
информационными системами компании-владельца, например, с
бухгалтерской системой и CRMсистемой, может включать в себя закрытые
разделы для определённых групп пользователей.
Каталог продукции — представляет собой подробное описание
товаров и/или услуг, технические и потребительские данные, сертификаты,
отзывы экспертов прочее. Такие сайты содержат информацию о товарах или
услугах, которую поместить в прайс-лист не представляется возможным.
Интернет-магазин — это сайт, с помощью которого клиент может
совершить заказ, благодаря размещённому на сайте прайсу. На таких сайтах
используются различные системы расчётов и платежей: начиная от
пересылки товаров наложенным платежом или автоматической отправки
счета по факсу до оплаты с помощью пластиковой карты.
Промо-сайт — сайт, представляющий исчерпывающую
информацию о бренде, конкретном продукте или торговой марке, о
различных рекламных акциях и прочее.
Сайт-квест — сайт, на котором организовано соревнование по
решению последовательности взаимосвязанных логических задач.
11
Информационные ресурсы:
Тематический сайт — интернет-ресурс, который предоставляет
узкотематическую информацию о какой-либо конкретной тематике.
Тематический портал — это большой веб-ресурс, который
предоставляет полную информацию по определённой теме. Порталы схожи с
тематическими сайтами, однако тематические порталы содержат
инструменты взаимодействия с пользователями и дают возможность
пользователям общаться в рамках портала (чаты, форумы) — это среда для
активности пользователя.
Веб-сервис — сайт, созданный для выполнения каких-либо задач в
рамках сети Интернет:
a) Каталог сайтов — например, Open Directory Project.
b) Доска объявлений.
c) Почтовый сервис.
d) Поисковые сервисы — например, Google, Yahoo!.
e) Блоговый сервис.
f) Веб-форумы.
g) Датахостинговый (хранение данных) сервиc — например,
dropbox.
h) Файлообменный Пиринговый сервис — например,
Bittorrent.
i) Фотохостинг.
j) Датаэдиторинговый (редактирование данных) сервиc —
например, GoogleDocs.
k) Социальные Медиа — например, Buzz.
l) Хранение видео — например, YouTube.
Комбинированные Веб сервисы (Социальные сети) — например,
Facebook, ВКонтакте.