Добавлен: 16.05.2023
Просмотров: 258
Скачиваний: 9
Введение
Библиотеки, в последнее время, теряют свою актуальность, в следствии появления новых, более доступных, технологий, в том числе и web.
Для курсового проекта было взято задание по созданию сайта-визитки электронной библиотеки, который смог бы актуализировать реальную библиотеку для читателей.
Существует 2 направления электронных библиотек:
- Электронная библиотека, с содержанием реальной библиотеки, которая отражает пользователям реальную картотеку.
- Электронная библиотека, которая не имеет физического содержания, и вся ее картотека находится в открытом(\платном) доступе через web-сайт.
Для реализации был принят первый вариант, т.к. по заданию курсового проекта у нас имеется реальная библиотека, которую требуется сделать более удобной для читателя.
Из особенностей проекта, хотелось бы отметить:
- Автономность сайта – web-страница способна окупать стоимость своего размещения, т.к. на нем предусмотрено платное место для рекламы.
- Удобную и простую навигацию по сайту.
- Расширенный список контактов, в том числе и размещение физической библиотеки, с помощью отметки на карте.
Основная часть
Назначение программы
Целью данной работы является разработка веб-сайта «Электронная библиотека» с возможностью последующего размещением в сети Интернет.
Сайт должен обеспечивать реализацию следующих функций:
Информационная.
Сайт должен предоставлять доступ к информации о компании, картотеке, новостях кампании, а также размещать контактную информацию
Рекламная.
Сайт должен содержать информацию для читателя:
Как добраться до библиотеки, контактный номер телефона, часы работы, адрес, электронную почту, информацию о предоставляемой литературе.
Навигация по разделам и подразделам.
На данной странице осуществляется переход на различные разделы сайта.
Каждая страница выполнена в виде окна. С каждого окна предусмотрен переход на подразделы. С каждой страницы предусмотрен переход на начальную страницу.
Пользовательский интерфейс и описание контента
Пользовательский интерфейс состоит из блока меню, где представлены кнопки, которые осуществляют переход между страницами сайта;
Контент блоке, где описан контент каждой страницы; блока рекламы, где размещается реклама.
Пользовательское меню представлено 4 страницами:
- Новости(Главная страница) – эта страница отображает новости, которые библиотека хотела бы рассказать, сами новости реализованы XML-файлом.
- О нас – страница с информацией о библиотеке
- Каталог – Страница, где хранится каталог библиотеки, содержащий электронную копию ее картотеки(рис.1)
- Контакты – Страница, где описывается контактная информация библиотека, а так же ее местоположение(рис.2)
рис.1
рис.2
Общие требования к сайту
Стилистическое оформление
Стилистическое оформление сайта, соответствует информационному стилю, но также имеет индивидуальные черты. В соответствие с этим стилистическое оформление сайта относится к гибридному стилю или же индивидуальному.
Основным шрифтом в стиле является: Comic Sans MS (Курсивный), для текста выбрано 2 основных цвета:
- Золотой;
- Серебрянный;
Данные два цвета хорошо вписываются в общую гамму сайта. Для заглавного текста ширина и высота по умолчанию стоит 24 пикселя, а для обычного текста 18 пикселей.
Требования к браузеру:
Сайт должен обеспечивать корректное отображение данных в следующих браузерах: Internet Explorer 8.0 и выше (Microsoft), Opera 12.0 и выше (Opera Software), Netscape 11.0 и выше (AOL Netscape).
Требования к верстке:
Сайт должен быть оптимизирован для просмотра при разрешении 1024*768, 1280*1024 без горизонтальной полосы прокрутки и без пустых (белых) полей для основных типов разрешения.
Мета-теги и контент сайта
На этапе изготовления сайта должны быть настроены с учетом требований поисковых систем, что обеспечить продвижение сайта по ключевым словам в руcскоязычных поисковых системах Yandex, Google.
Анализ исходных данных и выбора программного обеспечения
Анализ выбора программного обеспечения
Web Page Maker – это очень простой инструмент для создания WEB – страниц. С его помощью можно создать свою страничку даже не обладая никакими знаниями HTML. Просто перетаскивая мышкой на рабочее пространство программы изображения, текст, музыку и видео. Во время работы с лёгкостью можно передвигать объекты по всей странице. Web Page Maker содержит несколько высококачественных шаблонов, которые помогут начать работу. Также вместе с программой поставляются различные эскизы, Java - скрипты, таблицы, формы и т. д. В программу встроен FTP-менеджер, с помощью которого можно опубликовать свой сайт в интернете.
WebSite X5 Evolution - полноценная программа для создания web-сайтов, за несколько шагов пользователь сможет создавать и опубликовывать профессиональные веб-сайты и онлайн-магазины. Не требует знаний программирования, имеет более 1000 готовых шаблонов веб-сайтов, проста в использовании, по сравнению с другими программами по визуальному проектированию сайтов. Web-страницы созданные в данной программе совместимы с разными интернет-браузерами, могут просматриваться с мобильных телефонов и индексируются поисковыми системами. Программой могут пользоваться пользователи, которым нужно простое и быстрое создание собственного веб-сайта или веб-галереи. Бизнесмены могут использовать данную программу для профессионального создания корпоративных веб-сайтов или онлайн-магазинов. Данная программа не имеет никаких ограничений по количеству создаваемых страниц и веб-сайтов.
HTML - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
В выше перечисленных программах есть такие недостатки как:
Работа с таблицами. В программах имеется отдельная утилита для редактирования таблиц (Table Editor), но она не интегрирована в главную программу и требует экспортирования таблиц в виде графического объекта, что затрудняет работу с ним.
Требования к аппаратным и программным средствам при установке программы.
Прежде чем начать работу с программой, необходимо инсталлировать ее на жесткий диск. Процесс инсталляции автоматизирован и достаточно прост, очень важно иметь представление о том, какие компоненты понадобятся наверняка, а какие можно не устанавливать, т. к. редко используемые приложения будут занимать часть дискового пространства совершенно напрасно.
Не во всех программах включены в библиотеку различные заготовки: библиотек Java - скриптов, таблиц, форм, фреймов, изображений и множества дополнительных функций.
Не во всех программах содержится несколько высококачественных шаблонов, которые ещё больше упростят задачу по созданию собственного сайта.
Проанализировав несколько популярных редакторов, исследовав их достоинства и недостатки, можно сделать вывод: идеального редактора нет. Учитывая все недостатки, было решено создать сайт с помощью гипертекстовой разметки HTML, т.к. она предоставляет наиболее универсальный и широкий инструментарий для работы с web-страницами.
Так же для реализации понадобилась технология AJAX использующаяся в jQuery. AJAX, или, более длинно, Asynchronous Javascript And Xml - технология для взаимодействия с сервером без перезагрузки страниц.
Для удобства верстки были использованы CSS, которые позволяют описывать блоки стилей, и подключать их внутри HTML-тэгов.
Для облегчения структуры web-страницы и редактирования контента использовалась XML-технология, которая подключалась с помощью фреймворка jQuery.
В качестве HTML-редактора был взят Sublime text 3, который представляет наиболее удобный интерфейс работы с HTML-Разметкой.
Анализ исходных данных
Из собранных исходных данных для создания сайта «Электронной библиотеки» можно выделить собранные из интернета новости, которые размещены на странице «Новости». Собранный каталог книг, имитирующий картотеку библиотеки занесенный в раздел сайта «Каталог» в виде таблицы. Контакты и адрес существующей библиотеки для реализации раздела «Контакты». Так же была подготовлена статья об истории создания библиотеки для презентационного раздела «О нас».
Разработка приложения
Разработка структуры web-страницы
Разработка структуры web-сайта является одним из ключевых моментов его создания, который в большой степени определяет эффективность его функционирования в будущем. С технической точки зрения структура сайта – это не что иное, как все его страницы, расположенные в порядке их значимости для пользователей, то есть иерархии
Разрабатывая структуру для будущего сайта, очень важно учитывать то, что сегодня выигрывают, прежде всего, те интернет ресурсы, которые могут обеспечить своим пользователям быстрый доступ к любой информации, находящейся на их страницах.
На главной странице будет находиться блок с краткой информацией о странице и новостным блоком. На рисунке 3 изображена главная страница сайта. Навигационное меню представлено в виде кнопок-ссылок. Также предусмотрен блок с рекламным контентом.
Рисунок 3 Главная страница сайта.
На странице «О нас» размещена история создания библиотеки, краткое описание ее фонда, и описание отраслей, в которых участвует библиотека. Блок «О нас» представлен на рисунке 4.
Рисунок 4. О нас.
На странице «Каталог» будет представлена таблица картотека которая отображает книжный фонд библиотеки и состоит из:
- Номера книги
- Названия
- Жанра
- Авторов
Страница «Каталог» показана на рисунке 5.
Рисунок 5. Страница Каталог.
Страница «Контакты» будет реализована из 2 блоков:
- Таблица, содержащая в себе контактную информацию библиотеки
- Яндекс карта, где отмечено местонахождение библиотеки
Страница контакты показана на рисунке 6.
Рисунок 6. Страница контакты.
Описание процесса создания сайта
Каждый html-документ начинается с объявления типа документа, в нашем случае это было реализовано с помощью html-тэга <!DOCTYPE html>, который указывает, на тип открываемого документа.
<head></head>(Далее Хедер) - это тэг, который объявляет титульную часть html-документа. Пример показан на рисунке 7.
Рисунок 7. Пример использования html-тэга <head></head>
Внутри хедера у нас находится объявление <title></title>, который используется для объявления заголовка страницы. Далее идет <meta/>-тэг, который позволяет нам добавлять в него мета-тэги или файл содержащий их, а так же указать кодировку страницы. Мета-тэги используются для поиска внутри поисковых систем.
Рисунок 8. Мета-тэги.
Далее представлена ссылка на .css файл, в котором содержатся стили блоков, согласно их классам.
Ниже представлено подключение jQuery фреймворка c помощью тэга <script>.
Рисунок 9. Подключение фреймоворка.
Далее мы объявляем скрипта Javascript:
Рисунок 10. Функция на JavaScript языке
Первая функция(показана на рисунке 11), в которой мы ожидаем конца загрузки файла с помощью процедуры .ready, после чего выполняем функцию, которая получает на вход запрос типа GET, по адресу(URL), и если тип файла совпадает с xml, то ждем успешного завершения следующей функции – xmlParser(показана на рисунке 12), которая получает на вход xml-файл, загружает его и проходит по каждой его строке, в результате чего, добавляет в него html-тэги и размещает в классе content.
Рисунок 11. Первая функция
Рисунок 12. Функция xmlParser
Тэг <body></body>(Далее Тело(Показано на рисунке 13.)) – служит для описания блоков страницы, их стили описаны в .css файле. Каждый блок
Рисунок 13.
<div></div>, который делит страницу на основные контент-блоки,
принадлежит определенному стилю, на что указывает тэг id, каждый класс которого описан в .css файле(см. Приложения)
Примеры использования <div></div> с указанием принадлежности их к классам показана на рисунках ниже:
Меню на сайте реализовано <div></div> блоком, класса menu, где расположены ссылки на другие страницы сайта(см. Рисунок 14.).
Рисунок 14. Ссылки меню сайта.
Для реализации таблиц используется тэг <table></table>, где <tr> - это область таблицы, а <td></td> - это строки таблицы. Пример использования таблицы показан на рисунке 15.
Рисунок 15. Таблица и ее реализация
Так же на веб-странице присутствует использование стороннего API Яндекса, оно реализовано с помощью ссылки на API, с сохраненным гео-тэгом, внутри контейнера <iframe></iframe>, который соответствует местоположению библиотеки. Реализация данной технологии показана на рисунке 16.