Мамандық 1304043 «Есептеу техникасы және бағдармалық қамтасыз ету
(түрлері бойынша)»_________________________________________
Специальность 1304043 «Вычислительная техника и программное обеспечение (по видам)»
Топ
Группа Вт –31_____________________________________________________
Білім алушы
Учащийся Жумабаева Молдир Жаксылыковна
Оқытушы
Преподаватель Бульгенова Гульнура Кудайбергеновна_________________________
Содержание
Введение.............................…………………………………………………..3
Стадия технического задания……………………………………………….4
Web технологии и языки веб – разработки………………………………...5
Программирование на стороне клиента, Разработка структуры титульной страницы тематического сайта, Разработка системы навигации тематического сайта…………………………………………………………………………..6
Подготовка изображения для навигационной карты, Разработка фреймовой структуры web – ресурса…………………………………………………….8
Разработка html формы……………………………………………………...9
Программирование на стороне сервера, Наполнение контентом………..11
Тестирование сайта………………………………………………………….13
Заключение…………………………………………………………………..14
Список использованных источников………………………………………15
Введение
На 3 курсе в процессе обучения нам предстояло познакомиться с HTML (языком гипертекстовой разметки) и созданием сайтов. Во время выполнения работ преподаватели сказали нам, что итогом этого курса будет создание собственного сайта, выбор сайта у меня не составил труда, по сколько мой учитель помог, мне с выбором темы сайта, и к общему решению мы пришли, к сайту, для фотосалона.
При создании web–узла я буду пользоваться знаниями по HTML. В рамках курсовой работы я должна продемонстрировать:
· знание теоретических основ web–технологий;
· умение проектировать web–сайт, обосновывать целесообразность включения в него различных компонентов дизайна;
· умения использовать графические редакторы для подготовки графического контента;
· умения готовить текстовый контент для размещения на страницах сайта;
· умения проводить поиск и анализ информации.
1. Выявление целей создания сайта и постановки проблемы, решаемой созданием сайта
1.1 Определение целей создания сайта
Определение целей создания сайта, круга функций, которые он должен выполнять, необходимо для лучшего понимания истинных задач, которые собираются решать с помощью сайта его владельцы. Правильно, конкретно поставленная цель позволяет сделать сайт эффективным инструментом для заказчика, минимизировать затраты на создание сайта. От продуманности формулировки этой задачи зависит эффективность работы сайта в долгосрочной перспективе. Основной моей целью является: создание сайта
для фотосалона, с целью новых посетителей.
1.2 Определение целевого сегмента потребителей
Перед началом создания сайта необходимо подумать: кто же будет моими основными потребителями?, основными пользователями сайта, будут люди, любых возрастов, желающих сделать качественные и креативные фотографии.
2. Web технологии и языки веб – разработки
2.1 Запуск и настройка программы браузера, установка web – сервера
Настроив веб сервер на своем Windows компьютере вы можете:
- Делиться с другими своей информацией, при этом она будет находиться у вас под рукой и ее не надо загружать на какой-либо сервер. Вы будете уверены, что доступ к этой информации будет иметь только тот круг лиц, кому вы его предоставите.
- Если вы хотите создать интернет сайт, то в процессе разработки вы его можете тестировать на своей локальной машине, а оттестированный вариант выгрухать в продакшен на публичный сервер.
Для того, чтоб у себя на компьютере настроить веб сервер вам понадобится:
- Загрузить инсталляционный пакет WAMP (Windows, Apache, MySQL, PHP).
- Установить и настроить сервер на вашем компьютере
- В случае, если ваш компьютер выходит в интернет через роутер, сделать на роутере настройки проброса портов.
3 Программирование на стороне клиента
3.1 Разработка структуры титульной страницы тематического сайта
3.2 Разработка системы навигации тематического сайта
Навигация по сайту должна быть удобной, и с этим не поспоришь. Любой пользователь, «заблудившись» на сайте или не сумев найти необходимую информацию из-за запутанных переходов, просто уйдет к конкурентам. Именно поэтому грамотная навигация – основной критерий для удобства сайта.
Система навигации на сайте– это набор гиперссылок, созданный для переходов по разделам сайта для поиска конкретной информации. Ссылки могут быть двух типов: текстовыми и графическими. Отдельно выделяют ссылки-ролловеры, которые при нажатии или наведении курсора изменяют вид (размер шрифта, цвет).
ссылки в тексте должны быть заметными, поэтому принято выделять их с помощью подчеркивания и другого цвета. На активной ссылке при наведении курсора он принимает вид руки. Для пользователя это подсказка о том, что текст является гиперссылкой.
С точки зрения юзабилити, удобная навигация по сайту должна конкретно отвечать на 3 главных вопроса:
1. На какой сейчас странице находится посетитель?
2. Какие страницы он уже посетил?
3. Какие еще страницы ему доступны?
Для ответа на них также существует несколько правил. Ссылки на страницы, которые пользователь уже видел, отличаются по цвету от тех, по которым он еще не переходил.
Многих интересует вопрос: а сколько же ссылок должно быть на сайте? Здесь однозначно ответить нельзя, так как это во многом зависит от количества страниц сайта. А нужное количество определяется лишь опытным путем. Главное правило: их должно быть столько, сколько будет удобно для пользователя. В то же время система навигации не должна занимать слишком много пространства сайта. В среднем ее площадь это 5-15% всего пространства ресурса.
| главная |
| план |
| слоган |
| контакты |
| Связь с нами |
| Главная страница фотосалона |
| фотографии |
| о нас |
| портфолио |
| услуги |
3.3 Подготовка изображения для навигационной карты
Разработка сайта всегда начинается с постановки задач и написания понятного технического задания. Какой бы опыт ни был у команды в активе, человеческий фактор и отсутствие правильных инструментов играют роль не только в эффективном взаимодействии специалистов друг с другом, но и в судьбе проекта в будущем.
А что оказывается одним из самых важных моментов при подготовке технического задания для реализации сайта? Конечно, структура сайта, визуальная карта (в некоторых случаях mind map), карта сайта — как будет угодно. О профессиональных инструментах для создания подобной карты мы и поговорим сегодня.
Визуальная карта сайта — это скелет будущего сайта, изображённый графически, чётко структурированный и дающий информацию для оценки будущей работы.
Как правило, в ней содержится только информация о структуре страниц, но в последнее время появляются новые инструменты, где можно детализировать информацию и внести необходимые данные о визуальном или текстовом контенте проекта.
Вся информация здесь подана и расписана наглядно, чтобы могли разобраться все заинтересованные стороны, занятые в процессе разработки.
Карта нужна для планирования расходов и трудозатрат, а также правильной связки страниц и учёта пользовательского опыта.
Использование интерактивных визуальных карт при проектировании сайтов (не путать с Sitemap-документом для поисковых систем в SEO) — необходимый шаг в создании качественного продукта.
3.4 Разработка фреймовой структуры web – ресурса
Фрейм (от англ. frame — рамка) — отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.
Фреймы по своей сути очень похожи на ячейки таблицы, однако более универсальны. Фреймы разбивают веб-страницу на отдельные миникадры, расположенные на одном экране, которые являются независимыми друг от друга. Каждое окно может иметь собственный адрес. При нажатии на любую из ссылок, расположенных в одном фрейме, можно продолжать видеть страницы в других окнах.
Фреймы часто использовались для навигации по веб-сайту. При этом навигационная страница располагается в одном окне, а страницы с текстом — в другом.
В настоящее время использование фреймов для публичных сайтов не рекомендовано. Главным образом это связано с принципом работы поисковых машин, которые приводят пользователя к HTML-документу, являющемуся согласно задумке лишь одним из фреймов того, что автору сайта хотелось бы представить. Данный недостаток фреймов устраняется средствами JavaScript.
Если представить структуру, в которой слева находится фрейм с меню сайта, а справа фрейм, предназначенный для вывода содержимого выбранных пунктов меню, то становится очевидна следующая проблема:
при щелчке на пункте меню содержимое будет загружаться в тот же фрейм с меню, а не во фрейм, расположенный справа
3.5 Разработка html формы
HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода <input> и <textarea>, списки <select>, подсказки и т.д. Весь код формы заключается в элемент <form>.
Большая часть информации веб-форм передаётся с помощью элемента <input>. Для ввода одной строки текста применяется элемент <input type="text">, для нескольких строк — элемент <textarea>. Элемент <select> создает выпадающий список.
Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут forуказывать не нужно.
Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder.
Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки *, установленный возле названия поля. В новой спецификации появился специальный атрибут required, который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.
Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus. Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:
input:focus {
background: #eaeaea;
}
3.6 Использование CSS для форматирования свойств текста, шрифта, цвета и фона страницы
Для изменения цвета фона применяется свойство background добавленное к селектору body, а для цвета текста используется свойство color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет фона</title>
<style>
body {
background: #333; /* Цвет фона */
color: #fc0; /* Цвет текста */
}
</style>
</head>
<body>
<p>Привет.</p>
</body>
</html>
Рекомендуется задавать цвет фона, даже если он белый. Дело в том, что некоторые пользователи устанавливают в браузере цвет фона по умолчанию отличный от белого. Так что если цвет явно не задан, то он меняется на другой, причем, совсем не тот, который бы хотелось в итоге получить.
4. Программирование на стороне сервера
4.1 Серверное программирование состоит из ряда модулей, рассматривающих создание динамических веб-сайтов; сайтов, которые доставляют персонализированную информацию в ответ на HTTP запрос. Этот модуль предоставляет общее введение в серверное программирование, наряду со специальными руководствами начального уровня о том, как использовать Django (Python) и Express (Node.js/JavaScript) веб-фреймворки для создания простых приложений.
Подавляющее большинство вебсайтов используют какую-либо из серверных технологий для динамического отображения различных требуемых данных. К примеру, вообразите себе сколь много товаров доступны на Amazon, и представьте как много постов расположено на Facebook? Отображение всех их посредством отдельных статических страниц было бы крайне неэффективно, вместо этого подобные сайты используют шаблоны (созданные из HTML, CSS, и JavaScript), и затем динамически обновляют данные, отображаемые внутри этих шаблонов, когда это необходимо, т.е. когда вы хотите увидеть другой товар на Amazon.
В современном мире веб-разработки крайне рекомендуется изучить разработку на стороне сервера.
5 Наполнение контентом
Что такое контент сайта и как он влияет на конверсию и продажи Контент сайта – это любая информация, размещенная на нем. Чаще всего под контентом понимают текстовое наполнение, реже – видео- и аудиоматериалы. Без качественного и регулярно обновляемого контента практически невозможно повысить эффективность онлайн-бизнеса и вывести сайт в топ поисковых рейтингов. Любая информация, которую сайт предлагает пользователю, должна быть полезной. Практика показывает, что откровенно рекламные статьи не пользуются большим доверием у читателей. А вот достоверный и актуальный контент экспертного типа, рассказывающий обо всех плюсах, минусах и особенностях товара, услуги или компании, наоборот, заставляет людей задержаться на сайте и, в конце концов, нажать кнопку «Купить». На уровень продаж влияют и такие факторы, как легкость восприятия и понятность контента, использование визуальных элементов (иллюстраций, видеоматериалов), качественная внутренняя структура ссылок и размер текстов – при прочих равных условиях, более объемный контент «продает» лучше. Важно также не усложнять потенциальному клиенту процесс покупки – все «кнопки» должны быть под рукой. И если во время просмотра контента посетитель захочет совершить покупку, подписаться на рассылку или скачать ваше приложение, он должен иметь возможность сделать это немедленно, не блуждая по сайту в поисках формы заказа. Стоит также сказать, что сейчас алгоритмы поисковых систем выводят в топ выдачи лишь сайты с наиболее качественным контентом. Для того чтобы выявить их, разработаны специальные поведенческие факторы ранжирования – сценарии поведения посетителей на сайте, позволяющие поисковикам определить, насколько страница востребована пользователями.
В моем случае, контентом является информация о том какие услуги мы предоставляем
План фотосессии является тоже контентом, так как пользователь узнает, все о фотосессии
Портфолио:
6 ТЕСТИРОВАНИЕ САЙТА
Я опросила небольшую часть своей целевой аудитории и получил следующие отзывы:
· баланс цвета, графики и текста;
· интересное информационное наполнение;
· сайт хорош для размещения модульной рекламы заинтересованных компаний;
· удобная навигация, можно найти все, что хочется;
· можно узнать много интересного, вся информация с сайта пригодилась дома;
· сайт исполнен на хорошем уровне. Считаю, что он будет пользоваться популярностью у целевой аудитории, также будет иметь успех от рекламы.
ЗАКЛЮЧЕНИЕ
Работа подошла к концу, за этот проект, я научился создавать сайт и, не только с полезной информацией, но и узнал основные стандарты внешнего вида сайта, цвета, шрифта, и т.д, в дальнейшем, мне будет куда легче, работать с разработкой сайта, и т.д.
Список использованных источников
1. Plicka Praha ve fotografii. Прага в фотографии / Plicka, Karel. - М.: Orbis, Praha, 1978. - 232 c.
2. Белов, Л. Фотосалон на дому / Л. Белов. - М.: Феникс, 2005. - 192 c.
3. Бутафорское счастье. Фотографии конца XIX - второй половины XX вв. из частных собраний. - М.: Красный Матрос, 2015. - 200 c.
4. В. Генде-Роте. Фотографии. - М.: Планета, 1980. - 160 c.
5. Валеев, Н. Елабуга купеческая на старых фотографиях / Н. Валеев. - М.: Казань, 1995. - 944 c.
6. Вершовский, А. Стрит-фотография. Книга 1 / А. Вершовский. - М.: Дабл вижн, 2012. - 204 c.
7. Дыко, Л.П. Основы композиции в фотографии / Л.П. Дыко. - М.: Высшая школа; Издание 2-е, перераб. и доп., 1989. - 175 c.