Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта по обмену книгами (Требования к приложению)

Содержание:

Введение

Целью данной курсовой работы «Разработка сайта по обмену книгами» является разработка расширенной электронной библиотеки, работающей в режиме онлайн с возможностью последующего размещением в сети Интернет.

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

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

Актуальностью данной темы является то, что в отличии от обычных бумажных библиотек, в электронных бывает достаточное количество экземпляров книг. По мнению многих книголюбов было бы просто замечательно иметь такую программу, которая отслеживает наличие электронных книг в определенной директории на вашем ПК (папку для расшаривания можно выбрать самостоятельно). Это программы наподобие Mendeley и Docear.
Пользователь заполняет все необходимые поля - автор, название, год и т.д.
Программа автоматически разыскивает ваши книги из данной директории для остальных пользователей в сети и они могут скачивать их себе в базу.
Было бы здорово если бы данное ПО было бы свободным (как PopCornTime) для более быстрого развития, хотя тот же Docear OpenSource.

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

При создании веб-сайтов за основу принимается необходимость централизованного управления и автоматизации связанных с этим процессов. Эта задача обычно решается с помощью специального программного обеспечения — систем управления контентом (content management systems, CMS).

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

Уникальная возможность любого участника сообщества Livelib.ru — получить совершенно бесплатно новую печатную книгу напрямую от издательства. Читайте полные тексты бесплатных книг прямо на Лайвлибе.

1. Основная часть

1.1 Требования к приложению

Отправной точкой в web-проекте является анализ целей сайта и функций, которые изложены в Техническом задании.

Вторым этапом будет разбор принципа построения Веб-сайта.

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

Для общей ориентации построения сайта разрабатываем Карту сайта, приведенную в таблице 1.

Карта сайта Книгообмен
Книгообмен
	Внешняя навигация
		Библиофилам и книголюбам
		Литературный клуб
		Новости библиотечной асоциации
	Новости
	О компании
	Наша продукция
	Наши услуги
	Новые поступления
		Техническая литература
		Художественная литература
		Детская литература
	Внутренняя навигация
	Отзывы
	Как к нам добраться

Таблица 1 Карта сайта Книгообмен

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

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

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

· название компании и логотип в левом верхнем углу

· прямую ссылку на главную страницу

· индивидуальный слоган для сайта, состоящий из одного предложения

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

В разделе "О нас" представляем основные сведения о компании:

· основание и сфера деятельности компании;

· контактная информация;

· продукция организации (ведение бизнеса, связи с обществом);

· основные услуги;

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

Текст отчета в соответствии с Методическими указаниями представлен в бумажном виде.

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

Текст размещается на одной стороне листа формата А4.
Поля: верхнее – 25 мм, правое – 10 мм, нижнее – 15 мм, левое – 20 мм.
Используется шрифт Times New Roman 14-го кегля.
Межстрочный промежуток составляет полтора интервала.

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

В нашем случае , что бы страницы было удобно просматривать, мы будем использовать:

· выделение ключевых слов;

· грамотно составленные заголовки;

· списки с маркерами;

· один абзац на одну идею (пользователи пропустят все остальные идеи, если их не привлекут основные слова абзаца);

· стиль перевёрнутой пирамиды (где статья начинается с заключения);

· меньшее количество слов, чем в обычном описании;

· минимум мало понятных терминов;

· в заголовках сообщений электронной почты;

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

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

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

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

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

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

Оформляем теги "title" так, чтобы они хорошо смотрелись в поисковой системе и закладке, поэтому начинать ссылки необходимо с ключевого слова.

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

Информационная архитектура сайта

В таблице 2 показано применение понятий информационной архитектуры (ИА) к миру печатного слова и к World Wide Web.

Понятие ИА

Книги

Веб сайты

Элементы

Обложка, заглавие,

автор,

главы, разделы, страницы,

номера страниц, оглавление,

предметный указатель.

Главная страница, панель навигации, ссылки, страницы содер

жимого, карта сайта, предметный указатель, поиск по сайту.

Измерения

Двумерные страницы, представленные в последовательном линейном порядке.

Многомерное

информационное

пространство

с гипертекстовой

навигацией.

Границы

Осязаемые и конечные,

с четкими началом и окончанием.

Слабоосязаемые, нечеткие, через которые информация «про

сачивается» на другие сайты.

Таблица 2. Различия между книгами и веб+сайтами

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

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

Понятия ИА

Библиотеки

Веб сайты

Назначение

Предоставление

доступа к ясно определенному собранию формально опубликованного содержимого.

Предоставление доступа к содержимому, продажа товаров, обеспечение транзакций, содействие сотрудничеству и т. д.

Гетерогенностьa

Разнообразные коллекции,

состоящие из книг, журна

лов, программ, звукозапи

сей, баз данных и файлов.

Высокое разнообразие типов

носителей, видов документов и форматов файлов.

Зачастую функционирование

децентрализовано, и возможно

существование подсайтов, поддерживаемых независимо от основного сайта.

Централизация

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

Таблица 3. Различия между библиотеками и веб+сайтами

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

Вот несколько подходов определения информационной архитектуры:

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

–помогает компаниям тем, что упрощает для клиентов процесс поиска товаров на сайте и реализует принципы персонализированного маркетинга (one to one) только в Интернете».

–решает проблемы перегруженности информацией, на которую все жалуются в последнее время».

1.2 Анализ исходных данных.

Для взаимодействия веб-сервера и браузера необходим "общий язык", то есть некий стандарт, по которому формируются запросы и ответы. Этим стандартом служит протокол HTTP (HyperText Transfer Protocol). Этот протокол соответствует схеме "запрос-ответ". Говоря другими словами, на каждый HTTP-запрос веб-браузера веб-сервер отвечает HTTP-ответом. По своей инициативе веб-сервер HTTP-пакеты не шлет (к тому же, зачастую, после завершения операции "запрос-ответ" сервер разрывает соединение с клиентом).

Рассмотрим структуру HTTP-пакета. HTTP-запрос и HTTP-ответ состоят из двух блоков — блока заголовков (headers) и блока тела пакета. Эти блоки отделены друг от друга двумя символами перевода строк (то есть между заголовками и телом расположена пустая строка).

В блоке заголовков расположены различные параметры пакета, блок тела содержит данные.

Второй блок может отсутствовать, то есть HTTP-пакет может состоять только из блока заголовков. Так например при запросе главной страницы браузер Firefox отправил веб-серверу следующий HTTP-запрос:

GET/HTTP/1/1

Host:ya.ru

User-Agent:Mosilla/5.0(WindowsNT5.1;ru;rv:1.9.2)

Gecko/20100115Firefox/3.6

Accept:text/html,application/xhtml/xml;q=0.9*/*;q=0,8

Accept-Language:ru,en-us;q=0.7,en;q=0.3

Accept-Encoding:gzip.deflate

Accept-Charset:windows-1251.utf-8;q=0.7,*;q=0.7

Keep-Alive:115

Connection: keep-alive

В HTTP-запросе отсутствует блок данных (так как отсутствует пустая строка, которая бы отделяла заголовки от данных). Рассмотрим представляющие для нас в данный момент интерес строки этого запроса.

Во-первых, самая первая строка:

GET/HTTP/1/1

"GET" — тип запроса. Два наиболее распространенных типа запросов — это GET и POST.

"/" указывает на то, что запрашивается главная страница сайта. В противном случае здесь указывается путь и имя запрашиваемой страницы или файла. "HTTP/1.1" — версия протокола HTTP.

Host:ya.ru

Параметр Host содержит домен сайта, к которому происходит обращение.

User-Agent:Mosilla/5.0(WindowsNT5.1;ru;rv:1.9.2)

Gecko/20100115Firefox/3.6

User-Agent содержит информацию о клиенте: тип браузера и операционная система

На данный HTTP-запрос веб-сервер отвечает следующим HTTP-ответом:

HTTP.1.1 200 ОК

Server:nginx

Date:Thu,25 Feb 2010 12:31:25GMT

Content-Tipe:text/html;charset=utf-8

Last-Modified:Tue,12 Jan 2010 15:29:06 GMT

Transfer-Encoding:chunked

Connection: keep-alive

Content- Encoding:gzip

<!DOCTYPE HTML PUBLIC”-//DTDHTML4.01 Transitional//EN”>

<title>Яндекс</title>

…

Пустая строка указывает на наличие блока данных (тела пакета).

В первой строке указывается версия протокола HTTP (HTTP/1.1) и код результата. Код результата 200 означает, что запрос выполнен успешно.

В описании протокола HTTP расписаны все коды результатов.

Server: nginx

Параметр Server содержит название веб-сервера. В нашем случае мы имеем дело с веб-сервером nginx. Данный параметр может отсутствовать в HTTP-ответе, если администратор данного сервера по каким-либо причинам не желает оглашать эту информацию.

Content-Tipe:text/html;charset=utf-8

Content-Type содержит тип переданных данных и их кодировку (charset). В блоке тела пакета содержится код запрошенной страницы.

1.3 Разработка web-приложения

Web-приложения (web applications, часто их называют Интернет-приложениями, internet applications) представляют собой набор страниц, объединенных общей функциональностью. Все Web- приложения

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

Как правило, веб-приложения не требуют установки дополнительного программного обеспечения на стороне клиента, а вся логика, в основном, выполняется на стороне сервера. Для отображения пользовательского интерфейса используется браузер – программа, способная распознавать язык разметки HTML (и сопутствующие технологии – таблицы стилей CSS, клиентский скриптовой язык программирования JavaScript и т.д.). Браузер обычно принято называть "тонким клиентом", т.е. клиентом, который содержит минимальное количество бизнес-логики.

1.3.1 Основные принципы построения web-приложения.

Началом «взрывного» роста Интернета принято считать начало 90х годов. Именно в это время появились и были стандартизованы протокол HTTP и язык описания страниц HTML, предназначенные для World Wide Web. Изначально WWW предназначался для публикации различной информации текстового и графического характера, поэтому язык HTML имел очень много недостатков, в первую очередь - практически отсутствовали механизмы управления размещением содержания на HTML-странице и взаимодействия с пользователями. Однако по мере роста интереса к Интернету росли и требования пользователей к содержанию (иначе - к контенту, от англ. content), что касалось как оформления опубликованной информации, так интерактивности при взаимодействии пользователя с сайтами. На сегодняшний день существующие в Интернете средства, реализованные в Web-серверах, средствах разработки сайтов и браузерах, позволяют говорить о создании так называемых Web-приложений, или приложений, построенных на мехнизмах Интернета и позволяющих пользователям взаимодействовать с Web-серверами. Безусловно, Web-приложения имеют клиент-серверную архитектуру, что диктуется общим построением Интернета. Как и традиционные программные приложения, Web-приложения имеют несколько аспектов: архитектура, подходы к разработке, безопасность приложений.

1.3.2 Область использования Web-приложения

Одной из важных характеристик Web-приложения является область использования приложения. По области использования Web-приложения делятся на intranet - внутрикорпоративные приложения, рассчитанные на использование во внутренней (локальной) сети, extranet - также внутрикорпоративные, но уже работающие во внешней среде (Интернете),

и, наконец, internet-приложения, рассчитанные на общее использование (например, Интернет-магазины). Такое деление возникает из-за различности подходов к построению таких приложений. Самые жесткие требования на разработку накладывает internet-приложение - это использование произвольных браузеров и максимальная безопасность в работе. При

разработке intranet- и extranet-приложений список используемого

программного обеспечения можно ограничить, а для intranet-приложений еще и снизить требования к безопасности.

1.3.3 Архитектура Web-приложения

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

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

- Клиентское приложение (браузер) последовательно запрашивает страницы с сервера, используя Dynamic HTML для управления интерфейсом и частичной обработки информации на компьютере клиента.

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

1.3.4 Основные требования, предъявляемые к web-приложению

Другая серьезная проблема в разработке Web-приложения -отслеживание сессии конкретного пользователя. Дело в том, что по определению HTTP-протокол не имеет понятия текущего состояния (stateless), т.е. очередной запрос страницы абсолютно не зависит от предыдущих запросов и потому не требует уникального идентификатора. Для отслеживания последовательных запросов и идентификации пользователя используются так называемые cookies. Cookies (русского термина не имеют, в единственном числе -cookie, точный перевод - «домашнее печенье») представляют собой небольшие файлы,

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

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

- наименование cookie;

- значение cookie, содержащее собственно информацию;

- домен. Указанный домен ограничивает область видимости cookie. По умолчанию домен устанавливается в домен текущей страницы (например, для www.lc.ni- домен Ic.ru);

- каталог. Указанный каталог ограничивает область видимости cookie внутри сервера. Каталог "/" используется для указания всех каталогов сервера. По умолчанию каталог устанавливается в каталог текущей страницы;

- срок действия. Срок ограничивает время действия cookie. По истечении указанного срока cookie удаляется с компьютера пользователя. По умолчанию срок действия не устанавливается, что означает удаление cookie при закрытии браузера (это эквивалентно установке срока действия в 0);

- секретность. Cookie с установленным свойством секретности могут посылаться на Web-сервер только по SSL-соединению. Это свойство используется редко. По умолчанию секретность не устанавливается.

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

Согласно стандарту браузер может как хранить и использовать cookies в своей работе, так и отключать их прием и сохранение в целях безопасности. Для этого в настройках браузеров обычно присутствует флажок, включающий и отключающий работу с cookie. По умолчанию работа с cookie включена, однако пользователь вправе отключить прием cookie. Для intranet- и extranet-приложений возможность отключения cookie можно игнорировать, просто введя некоторую дисциплину использования приложения. Для общих Web-приложений, опирающихся на использование cookies, такая возможность отключения представляет серьезную проблему, так как не существует точного способа определить, принимает ли браузер cookies.

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

1.3.5 Построение Web-приложения

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

Однако можно построить некоторую приблизительную схему приложения с авторизацией.

Все приложение делятся на три части -незащищенную, часть, обеспечивающую авторизацию пользователя, и защищенную.

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

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

– браузер (тонкий клиент),

- веб-сервер (серверная часть),

- протокол взаимодействия клиента и сервера (HTTP) и

- язык разметки для создания документов (HTML).

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

http://www.myapplication.com/page1.html).

Используя этот адрес пользователь может обратиться к приложению. Для этого он должен запустить браузер (клиентское приложение) и ввести в адресной строке адрес приложения. В этот момент браузер сгенерирует запрос к серверу и отправит его, используя протокол HTTP.

1.3.6 Этапы создания Web-приложения

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

Вторым этапом будет построение информационной архитектуры сайта.

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

1.4. Разработка документа HTML.

1.4.1 Структура и навигация документа HTML.

HTML (HyperTextMarkupLanguage) - "язык гипертекстовой разметки", предназначенный для создания и просмотра Web-страниц в Сети.

Рассмотрим поочередно каждое из этих слов.

Язык - это слово говорит о том, что HTML является компьютерным языком, связанным с другими языками программирования, и обладающий собственными правилами, терминологией и синтаксисом.

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

Разметкой называется вставка в текст дополнительных служебных символов, называемых тегами (tags).

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

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

структура html документа

Рис. 1 Структура любого html-файла.

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

Структура html-документа - основные теги:

<html>

<head>

<body>

Из этих трех тегов состоит каркас всего сайта. Все эти теги имеют закрывающийся тег со знаком “/”.

Страницы сайтов имеют расширение .html. То есть если создать текстовый документ, написать правильный код, но без расширения .html, браузер отобразит просто текст. Никакого преобразования кода не будет.

На рисунке 1(пункт 3) указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что заголовок <title> указывается только в разделе head. Если тег <title>указать в разделе body или после него, то обработчик на него не обратит внимания. Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для поисковых систем или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body (пункт 6). Название тега говорит само за себя.

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

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками <>. Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если допустить пробел между < и именем, то браузер посчитает это текстом.

Кроме тегов на странице пишутся и атрибуты.

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

Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. Кроме этого, в теге img, можно указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

При создании html-документа используем и другие основные теги приведенные в таблице 4, которые указываются в разделе body.

Тег	Назначение
<a>…</a>	Ссылки
<img>	Изображения
<p>…</p>	Абзац
<br>	Перенос текста на новую строку
<strong>…</strong>	Жирный текст
<i>…</i>	Еурсив
<s>…</s>	Перечеркнутый текст
<u>…</u>	Подчеркнутый текст
<ol></ol>,<ul></ul>	Списки
<table></table>	таблицы

Таблица 4. Основные теги, применяемые в html-документе

структура html документа пример

Рис. 2. Схема html-документа.

Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.

Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE).

В теле документа находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, большинство HTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>

HTML обладает многочисленными достоинствами:

1) Гибкость. Работу над Web-узлом можно продолжать даже вдали от компьютера, которым обычно пользуетесь. Используя HTML, не зависим от конкретной программы, которая может оказаться недоступной в данный момент.

2) Упрощение отладки. Поскольку сами написали HTML-текст, то будет проще отладить его и найти необходимые решения, если что-то не работает.

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

1.4.2 Динамический HTML

Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, а именно:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2 (это проверенная, но очень старая версия). Как видно из примера, самый короткий html-документ состоит буквально из одной строки.

На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Как приведено на рис. 1 любой базовый HTML-документ открывется тегом <HTML> и им же закрывается.

С помощью динамического HTML можно легко реализовывать на страницах сложные эффекты.

Динамический HTML — это не самостоятельная технология, а продукт трех взаимосвязанных и взаимодополняющих технологий: HTML, спецификации каскадных таблиц стилей (CSS) и сценариев. Чтобы разрешить сценариям и компонентам доступ к функциям HTML и каскадным таблицам стилей, контент документа представляется в виде объектов модели программирования, называемой моделью DOM.

API модели DOM являются основой динамического HTML и предоставляют структурированный интерфейс, который позволяет получить доступ к практически любому элементу документа и взаимодействовать с ним. Элементы HTML в документе доступны в виде отдельных объектов. Это означает, что для проверки и изменения элемента и его атрибутов можно считывать и задавать свойства и вызывать методы. Для доступа к тексту, расположенному между элементами, также можно использовать свойства и методы модели DOM.

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

1.4.3 Верстка сайта HTML приложения

Существуют верстки: табличная и блочная

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

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

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

Однако создаваемый HTML-документ состоит не из одной таблицы. Теги для создания таблиц были рассмотрены выше.

В Приложении А приведен пример табличной вёрстки:

<!DOCTYPE html>

<html>

<head>

<title>Книгообмен</title>

</head>

…

<center><b><a href="children.html">Детская литература</a></b></center>

</td>

</tr>

<tr>

Для вёрстки блока навигации создаю ячейку, занимающую 25% ширины таблицы. Внутри тегов < tr > </ tr > расположен список ссылок. На его основе делаю меню сайта.

<tr>

<td colspan=2>количество обработанных книг за период</td>

</tr>

В следующей строке настраиваю подвал (низ) сайта. Для этого использую уже знакомые теги. При помощи colspan=2 строю низ сайта, который будет занимать по горизонтали сразу две ячейки, но на блоки не делю.

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

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые называют «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

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

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри.

Существует следующий принцип блочной вёрстки:

1. повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры,

2. разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу.

3. таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться нельзя, как и применять не к месту.

Согласно макету, приведенному на рис. 2, страница сайта будет содержать семь блоков: «шапку»-Новые поступления, навигационное меню (Наименование, Техническая литература, Художественная литература, Детская литература), основной блок с контентом( Книги в наличии: Автор; Жанр) и «ноги»(Количество обработанных книг за период).

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет согласно Приложению А:

<!DOCTYPE html>

<html>

<head>

<title>Книгообмен</title>

</head>

…

</body>

</html>

Разберём некоторые моменты.

<div id="contantwrapper"> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>.

С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.

#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

Заключение

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

Спектр социальных групп, подключающихся к сети Интернет и ищущих информацию в WWW, все время расширяется за счет пользователей, не относящихся к категории специалистов в области информационных технологий. Это врачи, строители, историки, юристы, финансисты, спортсмены, путешественники, священнослужители, артисты, писатели, художники и самый большой контингент – школьники и домохозяйки. Список можно продолжать бесконечно. Любой, кто ощутил полезность и незаменимость Сети для своей профессиональной деятельности или увлечений, присоединяется к огромной армии потребителей информации во "Всемирной Паутине".

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

Развитие Интернет-технологий послужило толчком к появлению новой ветки в Интернете – Интернет - форумов.

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

Создание и разработка сайтов включает:

· утверждение первоначального технического задания на разработку сайта;

· определение структурной схемы сайта - расположение разделов, контента и навигации;

· web-дизайн - создание графических элементов макета сайта, стилей и элементов навигации;

· разработка программного кода, модулей, базы данных и других элементов сайта необходимых в проекте;

· тестирование и размещение сайта в сети интернет.

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

Таким образом система должна представлять собой web - сайт, куда любой пользователь мог бы зайти и выбрать просмотреть список книг, без регистрации. Но такое решение снижает уровень безопасности системы, поэтому для взятия книги пользователю необходимо зарегистрироваться. . Проектирование системы. Решение этой задачи подробно изложено в пункте Проектирование. В ходе проектирования были использованы простые и надежные решения, которые в свою очередь обеспечивают надежность всей системы. . Написание кода и тестирование системы. В ходе выполнения этой задачи был реализован web - сайт «Книгообмен», и проведена проверка работоспособности этого сайта.

Список литературы

1.НОУ Интуит Лекция 1: Основы функционирования веб-приложений

2.Semantica. Структура сайта от А до Я: виды, создание, анализ

3.СПГУ. Информационная архитектура в Интернете

4. Кристофер Шмитт. CSS рецепты программирования

5. А. Чиртик. Популярный самоучитель HTML

6. М. Русаков. Создание сайта от начала и до конца

Приложение А

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<html>

<head>

<title>Книгообмен</title>

</head>

<body >

<div id="header"><h1>Книгообмен</h1></div>

<li><a href="http://kbaott.net" class="home"><span>Библиофилам и книголюбам</span></a></li>

<li><a href="http://www.litlife.club" class="book"><span>Литературный клуб </span></a></li>

<li><a href="http://www.rba.ru" class="about"><span>Новости библиотечной асоциации</span></a></li>

</div>

</ul>

<p><h2>Здравствуйте<?php echo $UserName; ?>!</h2></p>

<h3>Ваш ID для регистрации: <?php echo $UserID; ?>...</h3>

</form>

<h3>Новости</h3>

<dl>

<dd> Уважаемые читатели! С 05 по 09 сентября 2018 года на ВДНХ состоится Московская международная книжная выставка-ярмарка ММКВЯ 2018. Часы работы: 05 сентября с 13 до 20 часов; 06-08 сентября с 10 до 20 часов; 9 сентября с 10 до 17 часов</dd>

<dd>Уважаемые читатели! С 07 по 11 сентября 2018 года на ВДНХ состоится ежегодная выставка-ярмарка книг.</dd>

<dd>Уважаемые читатели! В Олимпийском открыта ежегодная книжная ярмарка. Часы работы: вторник-суббота с 09 до 15 часов; воскресенье с 10 до 15 часов; понедельник - выходной. </dd>

</dl>

</div>

<?php}

se { ?>

<table>

<tr>

</tr>

<tr>

<td>Пароль:<input type="password" class="fields_contact_us" name="pass"></td>

</tr>

<tr>

</tr>

</table>

</form>

<?php

}

<p class="search_t">Поисковый запрос книги должен быть не менее 4-х символов.</p><br>

</p>

</form>

</div>

wid = window.open('','','width=750,height=100,status=yes');

wid.document.open(); R = wid.document.write;

R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>');

R('<BODY><H1>Новое окно</H1></BODY></HTML>');

wid.document.close();

</SCRIPT>

<A HREF="javascript:

wid.t=window.prompt('Новое состояние:','');

wid.document.write(wid.t); wid.focus(); void(0);"

>Изменим название запрашиваемой книги в новом окне</A>

<p></p>

</div>

+7 (977) 275-40-95

</div>

<h2>О компании</h2>

<p>

Компания ООО Артсервис основана в 2017 году на базе предприятий Министерства промышленности и торговли РФ. Сферой ее деятельности является распространение печатных изданий по запросам организаций и отдельных клиентов- потребителей.

</p>

<p>

Основным принципом ведения международного книгообмена Компании ООО Артсервис является добровольная договоренность об обмене на взаимовыгодных условиях. Библиотеки, как самостоятельные организации обмениваются списками литературы, предлагаемой для обмена. Из этого списка каждая из сторон выбирает понравившиеся издания, на обмен которых будет в последующем заключен соответствующий договор.Помимо договора (внешнеторгового контракта), содержащего основные условия осуществления международного книгообмена, также оформляется паспорт бартерной сделки, на основании которого производится вывоз литературы за рубеж.

</p>

<p>

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

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

</p>

<p>

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

</p>

</div>

<h2>Наша продукция</h2>

</div>

</div>

</div>

<h2>Наши услуги</h2>

<p>

<ul>

<li>Прием заказов на приобретение книги</li>

<li>Продажа книг печатного оформления</li>

<li>Консультации по вопросам обмена книг</li>

<li>Доставка книг до адресата в пределах города</li>

<li>Обеспечение электронными книгами</li>

<li>Обмен информацией по новым и старинным изданиям</li>

<li>Обмен информацией о проводимых книжных мероприятиях</li>

</ul>

</p>

</div>

<tr>

<center><a href="novinki.html" width="200" height="40" alt=> Новые поступления</a></center>

</td>

</tr>

<tr>

<center><b><a href=" index.html">Наименование</a></b></center>

</td>

<center><b><a href=" index.html">Техническая литература</a></b></center>

</td>

<center><b><a href=" art.html">Художественная литература</a></b></center>

</td>

<center><b><a href="children.html">Детская литература</a></b></center>

</td>

</tr>

<tr>

<p align="justify">   Книги в наличии</p>

<p align="justify">Автор: … … …</p>

</td>

</tr>

</table>

</center>

<?php

echo "<p align='right'>

<p>

<a href='insert.php'>Добавить книгу</a></p>

<p>

<a href='delete.php?id=".$row['Book_ID']."'>Удалить</a>

<a href='upd.php?id=".$row['Book_ID']."'>Изменить книгу</a></p>

<p class="copyright"> За справками обращайтесь в библиотеку</p>

<a href="https://ru.wikipedia.org/wiki/

%D0%91%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B0">www.asemlib.com"</a></p>

<p></p>

<h2>Отзывы</h2>

<p>Сервис предоставленный компанией позволил выбрать технические книги для сына учащегося колледжа</p>

<p><b>Александра Крылова<br />"Руководитель отделения банка"</b></p>

</div>

<p>Автоматизация услуг предоставляемые компанией позволяет быстро обеспечить необходимой литературой</p>

<p><b>Владимир Щербаков<br />"Заместитель главного конструктора"</b></p>

</div>

<p>У нас в школьной библиотеке отсутствуют некоторые книги, а здесь широкий выбор, спасибо за организацию</p>

<p><b>Полина Рыкова<br/>"Учащаяся 7 класса ШКИД"</b></p>

</div>

<h2>Как к нам добраться</h2>

</div>

<p>

Телефон: +7 (977) 275-40-95<br/>

Юридический адрес: г. Москва, Кржижановского ул., д. 13к.2<br />

График работы: Пн - Вс с 8:00 до 21:00

</p>

</div>

<h4><a href="?logout">Выход</a></h4>

</body>

</html>