Разработка Интернет-сайтов.

Содержание
1. АНАЛИЗ СОВРЕМЕННЫХ ТЕХНОЛОГИЙ РАЗРАБОТКИ ВЕБ-ИНТЕРФЕЙСОВ ДЛЯ ИНФОРМАЦИОННЫХ СИСТЕМ…….…………4
1.1. Современные требования к веб-интерфейсу……………………………….4
1.2. Технологии проектирования веб-интерфейсов……………………….……6
1.2.1. Проектирование структуры веб-интерфейса……………………………..6
1.2.2. Проектирование дизайна веб-интерфейса ………………………………..8
1.2.3. Технологии прототипирования веб-интерфейсов………………………10
1.3. Технологии front-end разработки веб-интерфейсов………………………10
1.3.1. Технологии разметки (HTML5CSS3, SASS, SCSS)…………………...10
1.3.2. Технологии программирования (JavaScript jQuery JQueryUI Ajax)………………………………………………………………………………13
1.4. Проектирование сайта………………………………………………………13
1.5. Выводы к первому разделу…………………………………………………17
2. РАЗРАБОТКА САЙТА……………………………………………………...18
2.1. Разработка информационной системы…………………………………….18
2.1.1. Логическое моделирование базы данных для сайта фотографа……….18
2.1.2. Требования к продукту (сайту)…………………………………………..20
2.1.3.Разработка………………………………………………………………….20
2.2. Программирование сайта…………………………………………………...22
2.3. Использование сайта в работе……………………………………………...23
2.4. Тестирование………………………………………………………………...25
3. ЗАКЛЮЧЕНИЕ………..…………………………………………………….28
4. СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ…………...………...29
5. ПРИЛОЖЕНИЕ……………………………………………………………...31 

Затем нужно создать свой пустой CSS файл и подключить его после bootstrap.css.<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet">После этого, для того чтобы изменить стили Bootstrap нужно поменять их в своем styles.css в следующем виде виде:a { color: #beceda; }С использованием LESS:Этот способ подразумевает, что все переменные Bootstrap хранятся в .less файлах. Разработчик работает с этими переменными и по необходимости вручную или автоматически компилирует их в CSS файлы, а сам HTML подключает только скомпилированные CSS файлы. 2.3. Использование сайта в работеПродвижение веб представительства начинается с разработки дизайна, контента и системы навигации еще на этапе создания. Затем осуществляется поисковая оптимизация, размещается реклама в сетях и пр. Создание и раскрутка веб-представительства имеет свои особенности и определенным образом отличается от продвижения информационных сайтов. Первоочередной задачей сайта визитки является представление фирмы в сети интернет, поэтому следует учесть ряд особенностей еще на этапе его создания.Сюда относится: дизайн, удобная и интуитивно понятная навигация, грамотный контент. Наиболее важным элементом является навигация, являющаяся одной из составляющих сайта. Именно этот аспект будет основополагающим в процессе разработки сайта и именно он будет влиять на посещаемость. От того, насколько быстро человек сможет получить всю интересующую его информацию о моделях, наличии, цене и способах доставки, зависит успешность заключения сделки. Грамотно созданный сайт позволит превратить случайных посетителей вашего сайта в постоянных клиентов. На следующем этапе осуществляется поисковая оптимизация и продвижение по ключевых запросам. Их будут десятки или даже сотни, в зависимости от ассортимента продукции сайта, поэтому список ключевых слов следует составлять очень тщательно. Однако, на одном поисковом продвижении останавливаться не стоит. Весьма эффективной окажется контекстная реклама. Несмотря на то, что такое удовольствие дорогостоящее, эффективность будет очень высокой, особенно для только что созданных сайтов, так как контекстная реклама позволяет быстро привлечь большое количество пользователей. Для этого, однако, не лишним будет использовать маркетинговые ходы. Также можно использовать всевозможные акции, скидки, подарки, чтобы сделать сайт более привлекательным в глазах покупателей. Можно использовать и медийную рекламу. Включает в себя: баннеры, размещение рекламных статей и новостей, партнерские программы, конкурсы. Также можно использовать площадки, как Яндекс-маркет.2.4. Тестирование программного комплексаЧёрным ящиком» называют объект тестирования, внутреннее устройство которого неизвестно. Данное понятие используется для изучения поведения информационных систем и других программных модулей и систем, для определения их реакций на различные внешние воздействия при условии абстрагирования от их внутреннего устройства.Управляя информацией и ответами системы на входах и выходах, можно исследовать систему и ее поведение. В действительности часто возникает вопрос, насколько «чёрный ящик» адекватен системе в целом, т.е. какой допустимый уровень абстракции системы и насколько система не зависит от своего внутреннего строения, т.е. адекватность «черного ящика» изучаемой модели, то есть его соответствие оригиналу.Любую систему управления можно рассматривать во времени. При этом ее состояния будут характеризоваться последовательностью её состояний при реализации возложенных на нее задач. Рассматривают два вида «чёрных ящиков»: «Чёрный» ящик, который может рассматриваться как автомат, называемый конечным или бесконечным. Данный вид обладает рядом известных характеристик, которые могут быть обозначены до начала эксперимента«Чёрные» ящики, поведение которых прослеживается только в эксперименте. В этом случае формулируется гипотеза о предсказуемости поведения «чёрного ящика» в вероятностном смысле. То гипотетически формулируется модель аналогичная тому же автомату. Таким образом, критериями тестирования черным ящиком являются:Тестирование функций программы.Тестирование потока входных данных.Тестирование потока выходных данных.Тестирование области допустимых значений.Тестирование длины набора данных.Тестирование порядка входных данных.Приёмы тестирования чёрного ящикаЭквивалентное разбиение.Анализ граничных значений.Анализ причинно-следственных связей.Предположение об ошибке.В работе мы тестировали систему по методу черного ящика. Сразу определимся с тем, что система относится к первому типу, т.е. ее поведение может быть заранее спрогнозированно. И соответственно мы можем составить таблицу тестированияX1- загрузка интерфейсаX2- загрузка страницы с системойX3- выполнение запросаТаблица 2.1. Параметры тестированияСостояние входовСостояние выходовВремяX1 ввод полного адресаX1 ввод сокращенной формыX1 запуск произвольной страницыИнтерфейс загруженИнтерфейс загруженИнтерфейс загружен5 с5 c5 cX2 переход на страницуX2ввод адреса страницыX2 переход с использованием кэша браузераСтраница загруженаСтраница загруженаСтраница загружена5с5с3сX3 генерация картыКарта сгенерирована6сСобытие X1. Загрузка главной страницы с фотографиямиРис.2.5. Результат тестированияСобытие X2 - загрузка страницы с системойРис. 2.6. Загрузка страницы с сервера (взаимодействие с системой)Событие X3- выполнение запросаРис. 2.7. Генерация карты на основании данных сервера GoogleMaps3. ЗАКЛЮЧЕНИЕПри выполнении бакалаврской работыбыла проанализирована литература и Интернет источники по вопросу разработки и проектирования веб-сайтов различного направления и функциональности.Изучен вопрос практической разработки веб-сайтов.Мною определена структура сайта и элементов дизайна, изучены инструменты проектирования и разработки современных сайтов.В своей работе я подробно описал процесс создания сайта (теория и практика) и какое программное обеспечение использовалось при реализации. Придерживался 3 основных моделей:1. Концептуальное проектирование.2. Логическое проектирование 3. Физическое проектированиеИспользуемое Программное обеспечение (ПО):Для определения требований использовано ПО Mind Manager Pro, программа, которая облегчает планирование и контроль проектов, предлагая понятные средства коммуникации и обмена информацией с использованием визуализации. При помощи этой программы создана карта.Следующее ПО, использованное в реализацииAxure PR Pro – основной редактор прототипов.В работе используется технология разметки HTML5 (поддержка всех браузеров) в связке с расширенными таблицами стилей CSS3, в качестве текстового редактора использован Notepad ++Для работы с таблицами стилей использован фреймворк BootstrapВ качестве локального сервера использовал ПО Denwer, которое позволяет без подключения к сети интернет и регистрации домена протестировать и отладить работоспособность сайта.При создании сайта использованы фотографии (обработка AdobePhotoshopСS5).Основная страница сайта (index. html) выглядит следующим образом:Созданный сайт расположен в папке«WWW», содержит:4. СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВБурлаков М.Macromedia|Dreamweaver. СПб., БХВ-Петербург, 2004. – 688с.Вуд Л. Web-графика. Справочник. СПб.: Питер, 1998. – 246с.Граймес Г. 10 минут на урок InternetWorldWideWeb: Пер с англ. 3-е изд. К., М., СПб.: Издательский дом «Вильямс», 1998. 260с.ГрызловВ. Java Script. Изд. 3-е.М.: ДМК Пресс, 2005. 416 с.Дарахвелидзе П. Г.Программирование.СПб.: БХВ-Петербург, 2003. 784 с.Кассер Д. Использование Macromedia| Dreamweaver. М., СПб., К.: Издательский дом «Вильямс», 2005. 720 с.Келли Д. Самоучитель Macromedia| Dreamweaver. СПб: Питер, 2002. 336с.Культин Н. Основы программирования. СПб.: БХВ -Петербург, 2003. 608с.Мак Т., Dreamweaver MX 2004. Шаг за шагом. Самоучитель. М.: ЭКОМ, 2006. 312с.Миллер М. Использование Windows: Пер. с англ. К.; М.; СПб.: Издательский дом "Вильямс", 2008. 336с.Молер Дж.Dreamweaver MX 2004. Руководство Web-дизайнера. М.: ЭКСМО, 2005. 67с.Морис Б. HTML в действии: Пер. с англ. СПб.: Питер, 1997. 356 с.Негус К. Internet Explorer. Библия пользователя. Пер с англ.К., М., СПб.: Диалектика, 1998. 160 с.ПаськоВ. MacromediaDreamweaver. К.: BHV, 2006. 384с.УоллД. Использование WWW: Пер с англ. 2-е изд.К.: Диалектика, 1997. 432с.Фленов М. Е. Программирование глазами хакера.СПб.: БХВ-Петербург, 2003. 368с.Хестер Н. Создание Web-страниц в Dreamweaver. М.: НТ Пресс, 2005. – 104с.5. ПРИЛОЖЕНИЕ5.1. Фрагмент кода сайта<!DOCTYPE html><html><head><meta charset="utf-8"><title>Услуги профессионального фотографа</title><meta name="keywords" content="фото, свадьбы, дни рождения, юбилеи, памятные даты, портфолио" /><meta name="description" content="проффесиональная сьемка в студии и вне ее" /><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="css/justified-nav.css" rel="stylesheet" type="text/css"><link href="css/templatemo_style.css" rel="stylesheet" type="text/css"><link href="css/style.css" rel="stylesheet" type="text/css"/></head><body><div id="main_container"><div class="container" id="home"><img src="images/header_image1.jpg" alt="header image" class="templatemo-header-img img-responsive cleaner"><div id="menu"><ul><li><a href="index.html" target="main_window">Главная</a></li><li><a target="main_window">Портфолио</a><ul><li><a href="page2.html"target="main_window">Свадебнаяфотосессия</a></li><li><a href="page3.html"target="main_window">Love Story</a></li><li><a href="page4.html"target="main_window">Семейнаяфотосессия</a></li><li><a href="page1.html"target="main_window">Детскаяфотосессия</a></li></ul></li><li><a target="main_window">Услуги</a><ul><li><a href="preview.html"target="main_window">Фотограф (пакетыуслуг)</a></li><li><a href="preview_2.html"target="main_window">Обучениеосновамфотографии</a></li></li></ul></li><li><a href="contact.html"target="main_window">Контакты</a></li></li></ul></div><div class="row" id="thumbnails_container"> <div class="col-md-12"><h2>Услуги проффессионального фотографа в городе Новосибирск</h2><h3>Давайте знакомиться</h3><p>Друзья, приветствую вас на моем сайте! Меня зовут Николай Горбунов! Я свадебный и семейный фотограф. </a>. <h3>Немножко о себе</h3> <p>Интерес к фотографии проявлялся еще с детства, профессионально же к этому вопросу я подошел в 2012-м году. За 4 года успешно снял > 100 свадебных мероприятий, > 50 семейных фотосессий, > 30 Love Story. <p><img src="images/Ya.jpg" alt="Николай Горбунов"></p><p><a href="http://vk.com/gorbunovnn" ><img src="images/VK.jpg" alt="Свадебныйфотограф"></a> <a href="https://www.instagram.com/nik_gorbunov/" ><img src="images/INST.jpg" align="right" alt="Свадебныйфотограф"> </a></p></p></div></div> </div><footer class="container"><div class="credit row"><div class="col-md-6 col-md-offset-3"><div id="templatemo_footer"> Copyright © 2016 <a href="index.html">Профессиональнаяфотография</a></div></div></div></div></footer></div></body></html>