Разработка и создание современного Web-сайта

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Введение

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

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

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

Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера. Но может возникнуть и другая проблема - сайт может оказаться не интересным пользователю и та информация, которую он несет, окажется не востребованной. Именно поэтому важно, чтобы сайт отвечал всем требованиям пользователя.

Целью работы является формирование теоретических знаний по проектированию Web-сайта и практических навыков по его разработке.

Для выполнения проекта были поставлены следующие задачи:

*Проанализировать содержание нескольких сайтов для выявления актуальных потребностей пользователей Интернет;

*Познакомится с основными теоретическими понятиями разработки Web-сайта;

*Научится проектировать и разрабатывать Web-сайт.

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

Объектом исследования является процесс разработки сайта.

Предмет - язык гипертекстовой разметки HTML как средство создания сайта.

Цель - разработать сайт «Book One» с использованием языка гипертекстовой разметки HTML.

Задачи:

*Проанализировать существующие языки для написания сайта.

*Рассмотреть функциональные возможности HTML.

*Рассмотреть источники по теме.

*Разработать макет сайта.

*Наполнить сайт информацией по теме.

*Разработать руководство пользователя.

При написании проекта использовались метод теоретического исследования (анализ) и эмпирический метод (изучение источников литературы).



1. Теоретическая часть

1.1 Описание предметной области

На первом этапе проектирования web-сайта необходимо выполнить анализ предметной области, т.е. определить объекты предметной области и связи между объектами.

Функциональный подход реализует принцип движения "от задач" и применяется, когда определен комплекс задач, для обслуживания которых создается web-сайт. В этом случае можно выделить минимальный необходимый набор объектов предметной области, которые должны быть описаны.

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

1.2 Инструментальные средства

Наиболее распространенным языком разработки сайта является Язык разметки гипертекстовых страниц (HTML - Hypertext Markup Language) представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.

Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium). Стандарты, спецификации и проекты новых предложений можно найти на сайте. На практике на стандарт HTML большое влияние оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Netscape Navigator. Эти теги в данный момент могут, как входить, так и не входить в состав действующей спецификации HTML.

Рутинная работа по ручному созданию сайта с недавнего времени заменена CMS-сайтами. Наиболее распространенными является Joomla и WordPress - система управления содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL или другие индустриально-стандартные реляционные СУБД. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL - система управления содержимым сайта с открытым исходным кодом, распространяемая под GNU GPL. Написана на PHP, в качестве базы данных использует MySQL. Сфера применения - от блогов до достаточно сложных новостных ресурсов и интернет-магазинов. Встроенная система "тем" и "плагинов" вместе с удачной архитектурой позволяет конструировать практически любые проекты. WordPress выпущен под лицензией GPL версии 2.

Так как сайт "Book One" будет в основном поисковым, то гораздо удобнее будет использовать WordPress.

1.3 Информационная структура web-сайта

Как же выглядит информационная иерархия на web-странице? Один из вариантов может быть таким:

· Логотип

· Название сайта

· Слоган

· Название страницы

· Заголовки

· Навигация

· Выделенный текст

· Простой текст

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

Логотип - "опознавательный знак" сайта. В деловом интернете это элемент связи между реальным и виртуальным представлением той или иной организации.

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

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

Название страницы предназначено для определения текущего местоположения посетителя на сайте.

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

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

Выделенный текст предназначен для акцентирования внимания посетителей на нем.

Простой текст служит в качестве носителя информации.

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

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

1.4 Требования к web-сайту

Теперь рассмотрим требования, предъявляемые к веб-сайту:

· Совместимость с основными версиями браузеров.

· Минимальный объем HTML-кода.

· Модификация сайта при минимуме человекочасов.

· Портабельность сайта.

Безусловно, самым важным является совместимость HTML-кода страниц сайта с основными браузерами. На сегодняшний день основными являются: Internet Explorer, Netscape Navigator, Opera, Coogle также рекомендую просматривать ваши страницы в-третьих версиях браузеров.

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

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

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

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

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

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

Сайт имел структуру, пример предлагаемой структуры сайта см. выше.

Исходный HTML-код должен быть читабельным.

Верхние и нижние колонтитулы были вынесены в отдельный файл. (таблицы каскадных стилей), используемые в нескольких документах находились в отдельном файле.

Функции JavaScript, используемые в нескольких документах находились в отдельном файле.

Гиперссылки имели правильные пути - абсолютные и относительные.

В именах файлов и адресах гиперссылок использовались только цифры и буквы английского алфавита нижнего регистра, также допускается

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

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

1.5 Разработка структуры сайта

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

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

Достойный уважения Web-дизайн включает разработку страниц, доступных для пользователей с ограниченными возможностями, в частности по зрению и слуху. Консорциум World Wide Web объявил об инициативе Web Accessibility Initiative (WAI), которая ставит целью сделать Web более доступным для всех пользователей. Однако успех данной инициативы зависит от участия в ней рядовых разработчиков, которые могут (или не могут) создать Web-сайты в соответствии с поставленными задачами.

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

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

Исходя из данных выше правил, дизайн сайта будет следующим.

Рис.1 Шаблон дизайна сайта

На основании созданного шаблона разрабатывается дизайн сайта

Структура сайта «Book One»:

Главная страница.

Рис.2 Дизайн сайта



2. Проектная часть

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

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

Данный этап можно так же назвать "А зачем и для чего нужен сайт?". Обычно для того чтобы постановка задачи была наиболее полной, заказчику необходимо понять и ответить на следующие вопросы:

Цель создания сайта:

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

Целевая аудитория:

В основном, аудиторией будет являться пользователи интернета.

Необходимые ресурсы:

Такими ресурсами могут быть тексты, фотографии, аудио-видео материалы, прайс-листы, логотип, базы данных и т.д.

Определение сроков:

Сайт создается в течении 30 рабочих дней.



2.1 Техническое задание

1.Основание для разработки

1.1 Основанием для данной работы служит договор № 105 от 10 октября 2016 г.

1.2 Наименование работы:

Новостной-блог для читателей книг.

1.3 Исполнители: Юмтарова Т.А.

2.Назначение работ

Создание web-сайта для прочтения книг в любое время и месте где есть подключение к интернету.

3. Техническое требование

3.1 Требования к функциональным характеристикам.

Программа должна обеспечивать возможность выполнения перечисленных ниже функций:

3.1.1. Выдавать новости и комментарии по выбранной книге.

3.1.2. Осуществлять поиск книги архивов.

3.1.3 Простое добавление новых записей.

3.1.4 Интересный и удобный дизайн.

3.1.5 Поддержка web-сайта и его функционала на большинстве браузеров.

2.2 Требования к надежности

Надежное (устойчивое) функционирование программы должно быть обеспечено выполнением Заказчиком совокупности организационно-технических мероприятий, перечень которых приведен ниже:

а) организацией бесперебойного питания технических средств;

б) использованием лицензионного программного обеспечения;



2.3 Грамотность и содержимое сайта

Грамотно и имеющие смысл издания и записи.

Отсутствие нецензурных слов и изображений.

Соответствие новости с реальными фактами.

2.4 Бриф

Таблица 1

1	Название компании:	Wordpress.com
2	Название сайта:	BookOne
3	URL для размещения сайта:	https://tuianablog.wordpress.com/
4	Задачи разработчика:	Разработка фирменного стиля. Разработка дизайна главной и второстепенной страниц сайта. Верстка главной и второстепенной страницы. Интеграция дизайна главной и второстепенной страниц сайта в CMS
5	Цель создания сайта:	проект
6	Сфера деятельности компании:
7	Целевая аудитория:	Пользователи интернета
8	На какие географические регионы должен быть ориентирован сайт:	Россия
9	Языковые версии сайта:	Русский
10	Сайты конкурентов:	-
11	Материалы, предоставленные заказчиком:	-
12	Структура сайта:	1.Главная страница2. О нас3. Жанры 4. Контакты 5. Блог
13	Компоненты сайта (новости, анкетирование, интернет-магазин, баннерная реклама, счетчики посещений, др.):	-
14	Цветовая гамма сайта:	Зеленый, белый.
15	Что в результате посещения сайта пользователь должен	увидеть:	Обложки книг с описанием.
		сделать:	Прочесть информацию в блоге, заполнить контактную форму и выбрать книгу на свой вкус.
		почувствовать:	Радость от новых ощущений.
16	Вид верстки (фиксированный/резиновый):	Резиновая верстка
17	Ширина веб-страницы:	-
18	Браузеры, в которых будет просматриваться сайт, и их минимальная версия:	Google.
19	График работ:	Фирменный стиль: 10.10.2016 Лейаут страниц: 18.10.2016 Эскизы web-страниц: 25.11.2016 Верстка страниц: 8.12.2016 Интеграция в CMS: 21.12.2016 Передача готового проекта: 28.12.2016
20	Бюджет заказа:	-
21	Передача разработки:	Эскизы web-страниц в формате DESIGN и JPG. HTML-файлы, CSS-файлы.

Заказчик:

Гороховская Н.А. преподаватель кафедры «Системное программирование»

Исполнитель проекта:

Юмтарова Т.А студент гр. ПОВТ-241

2.5 Описание разработки сайта

Рис.3 Главная страница



Фрагмент кода:

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<metacharset="UTF-8">

<metaname="viewport" content="width=device-width, initial-scale=1">

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="pingback" href="https://tuianablog.wordpress.com/xmlrpc.php">

<title>Book one:) &#8212; Здесь вы найдете все,что искали&#8230;</title>

<script type="text/javascript">

Рис. 4. Вторая страница

Фрагмент кода:

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="pingback" href="https://tuianablog.wordpress.com/xmlrpc.php">

<title>Онас&#8212; Book one:)</title>

<script type="text/javascript">

Рис. 5. Третья страница

Фрагмент кода:

<!DOCTYPEhtml>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="pingback" href="https://tuianablog.wordpress.com/xmlrpc.php">

<title>Жанры&#8212; Book one:)</title>

<script type="text/javascript">



Рис. 6. Четвертая страница

Фрагмент кода:

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="pingback" href="https://tuianablog.wordpress.com/xmlrpc.php">

<title>Контакты&#8212; Book one:)</title>

<script type="text/javascript">

Рис. 7. Пятая страница



Фрагмент кода:

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="profile" href="http://gmpg.org/xfn/11">

<link rel="pingback" href="https://tuianablog.wordpress.com/xmlrpc.php">

<title>Блог&#8212; Book one:)</title>

<script type="text/javascript">

Перейдя по ссылке:

· «О нас» можно увидеть информацию кто создал его и для чего.

· «Жанры» можно увидеть поисковую систему, обложки книг с описанием и жанры.

· «Контакты» можно увидеть основную контактную информацию и контактную форму для заполнения.

· «Блог» можно увидеть недавние записи, архивы и комментарии.



Заключение

интернет программа сайт дизайн

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

При этом мною были решены следующие частные задачи:

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

изучение основных программы применяемых для разработки и создания Web-сайта;

ознакомление с методами и способами представления на Web-страницах различных видов информации (текстов и изображений);

ознакомление с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительное следование им в своей практике;

определение структуры Web-страниц;

предоставление пошаговой стратегии разработки web-сайта;

предоставление инструкции для пользователей web-сайта.

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



Список использованной литературы

1. Дронов В.А. Программирование. - СПб.: БХВ-Петербург, 2006

2. Алексеев А.П. Введение в Web-дизайн: учебное пособие. - М.: СОЛОН-ПРЕСС, 2008

3. Барысов Р. Постройте профессиональный сайт сами. - СПб., 2009

4. Печников В.Н. Сомоучитель Web-страниц и Wrb-сайтов. - М.: Триумф, 2006

5. Печников В.Н. Создание Web-сайтов без посторонней помощи. - М.: Триумф, 2006

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

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

8. Вильямсон Х. Универсальная библиотека программиста - СПб.: ПИТЕР, 2001

9. Дуванов А. А. Web-конструирование. - Петербург: 2009. - 384 с.

10. Едомский Ю. Е. Техника Web-дизайна для студента. - Петербург: 2010. - 491 с.

11. Крамер Э. HTML: наглядный курс Web-дизайна. - Киев: 2009. - 304 с.

12. Леонтьев Б. Web-дизайн. Руководство пользователя. - Киев: 2011. - 384 с.

13. Печников В. Н. Создание Web-страниц и Web-сайтов. - М.: Триумф: 2010. - 370 с.

14. Роббинс Д. Web-дизайн. Справочник. - "КУДИЦ-ПРЕСС": 2009. - 816 с.

15. Смирнова И. Е. Начала web-дизайна. -Петербург: 2010. - 491 с.

Размещено на Allbest.ru