Розробка сайту електронної бібліотеки закладу освіти

Опис документу:
В статті наведено інформацію про створення проекту електронної бібліотеки інформаційних ресурсів закладів освіти на прикладі електронної шкільної бібліотеки. Представлені етапи розробки веб-сайту та способи верстки веб-сторінок. Представлена структурна схема сайту та основні сторінки меню з ілюстраціями.

Відображення документу є орієнтовним і призначене для ознайомлення із змістом, та може відрізнятися від вигляду завантаженого документу. Щоб завантажити документ, прогорніть сторінку до кінця

Перегляд
матеріалу
Отримати код Поділитися

1

РОЗРОБКА САЙТУ ЕЛЕКТРОННОЇ БІБЛІОТЕКИ

ЗАКЛАДУ ОСВІТИ

Вороніна С.В.,

Коледж радіоелектроніки,

викладач

Основні задачі електронної бібліотеки – інтеграція інформаційних ресурсів і ефективна навігація в них. Інтеграція інформаційних ресурсів – це об’єднання з метою використання різної інформації зі збереженням її властивостей, особливостей представлення і можливостей її обробляти. Об’єднання ресурсів може відбуватися як фізично, так і віртуально. Але при цьому таке об’єднання повинно забезпечувати користувачу сприйняття необхідної інформації як єдиного інформаційного простору: електронна бібліотека повинна забезпечити роботу з базами даних і високу ефективність інформаційних пошуків.

Електронна бібліотека - впорядкована колекція різнорідних електронних документів (в тому числі книг, журналів, газет, різних посібників), забезпечених засобами навігації та пошуку. Може бути веб-сайтом, де поступово накопичуються різні тексти і мультимедійні дані, кожен з яких самодостатній і в будь-який момент може бути затребуваний читачем. Електронні бібліотеки можуть бути універсальними, які прагнуть до найбільш широкого вибору матеріалу і бути більш спеціалізованими.

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

Мета створення електронної бібліотеки полягає в наступному:

  • забезпечення користувачів роботою з документами з обмеженим доступом (рідкісних і рукописних книг, фотоальбомів, дисертацій, архівів, яких немає у більшості бібліотек);

  • забезпечення доступу до інформації, що існує лише в електронній формі;

  • надання користувачам більш якісних можливостей роботи з електронними документами великих обсягів;

  • інформаційне забезпечення користувачів повнотекстовими базами даних у режимі теледоступу.

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

Алгоритм створення будь-якого сайту наступний:

  • створити окрему папку для складання всіх файлів для сайту;

  • підготувати текст в будь-якому HTML-редакторі та зберегти його;

  • підготувати рисунки к тексту в графічному редакторі в форматах GIF, JPEG або PNG та скопіювати їх в окрему папку, наприклад, IMG. Назва рисунку повинна бути виключно із латинських букв;

  • папку IMG помістити в загальну папку із всіма файлами;

  • створити шаблон WEB-сторінки в HTML редакторі та зберегти його в папці сайту;

  • заповнити шаблон WEB-сторінки текстом та рисунками для першої сторінки, потім для другої і інших, використовуючи для цього HTML-редактор;

  • створити гіперпосилання для переходу між сторінками, використовуючи пункти навігації;

  • підготувати електронну графічну обкладинку в графічному редакторі;

  • скопіювати обкладинку в папку;

- підключити обкладинку до всіх файлів і перевірити роботоздатність переходів між сторінками.

Таким чином можна створити будь-який сайт, який може містити в собі HTML-сторінки, JavaScripts, графіку, музику, анімації та інше.

На сьогоднішній день існують кілька етапів розробки веб-сайту:

  • проектування сайту або веб-додатки (збір і аналіз вимог, розробка технічного завдання, проектування інтерфейсів);

  • розробка креативної концепції сайту;

  • створення дизайн-концепції сайту;

  • створення макетів сторінок;

  • створення мультимедіа і FLASH-елементів;

  • верстка сторінок і шаблонів;

  • програмування (розробка функціональних інструментів) або інтеграція в систему управління змістом (CMS);

  • оптимізація і розміщення матеріалів сайту;

  • тестування і внесення коригувань;

  • відкриття проекту на публічному майданчику;

  • обслуговування працюючого сайту або його програмної основи.

  • залежно від поточного завдання, якісь з етапів можуть бути відсутніми, або бути тісно пов'язані один з одним.

Верстка веб-сторінок - створення структури html-коду, яка розміщує елементи веб-сторінки (зображення, текст і т. д.) у вікні браузера, згідно з розробленим макетом, таким чином, щоб елементи дизайну виглядали аналогічно макету.

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

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

Існує декілька способів верстки веб-сторінки. Верстальник, як фахівець, сам вибирає, які інструменти використовувати, ґрунтуючись на зважуванні переваг і недоліків для конкретного проекту.

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

Для створення веб-сторінок можна користуватись як вбудованим в операційну систему Блокнотом, так і іншими сторонніми HTML- редакторами. Найпопулярнішими є: Adobe Dreamweaver, Sublime Text, Notepad ++ та інші.

Версія HTML - редактора Adobe DreamWeaver CС, що відноситься до категорії WYSIWYG - редакторів, має дуже багато переваг: зручний інтерфейс, настроювання функцій, підтримка великих проектів і ShockWave-технологій, можливість закачування файлів через FTP, підтримка SSI і багато чого іншого. Для роботи в цій програмі не потрібно досконально знати HTML.

Adobe Dreamweaver дозволяє не тільки з легкістю проектувати дизайн сайту, використовуючи візуальні методи, але і надає необхідні засоби для продуктивної розробки веб-додатків. Тут присутня повна підтримка формату CSS, з функцією перевірки його сумісності з різними браузерами, функціональний редактор коду веб-сторінок і можливість працювати з такими технологіями, як: XML, JavaScript, PHP, Adobe ColdFusion, ASP і ASP.NET.

Notepad++ - текстовий редактор, призначений для програмістів і тих, кого не влаштовує скромна функціональність програми «блокнот», що входить до складу Windows. Notepad++ базується на компоненті Scintilla (потужному компоненті для редагування), написаному на C++ з використанням тільки Windows API і STL, що забезпечує максимальну швидкість роботи при мінімальному розмірі програми. Інтерфейс Notepad++ є багатомовним (українська мова присутня). Серед особливостей програми - підсвічування синтаксису та підтримка великої кількості мов програмування (C, C++, Java, XML, HTML, PHP, JavaScript, ASCII, Visual Basic / VBScript, SQL, Ruby, CSS, Pascal, Perl і Python), багатомовна підтримка, робота з декількома документами.

Каскадні таблиці стилів (CSS - Cascading Style Sheets) - це набір правил форматування, що визначають відображення змісту на веб-сторінці. При форматуванні сторінки за допомогою стилів CSS власне зміст сторінки розділяється з поданням змісту. Зміст сторінки (HTML-код) розташовується в HTML-файлі, а правила CSS, що визначають представлення коду, розташовуються в іншому файлі (зовнішній таблиці стилів) або в іншій частині HTML-документа (зазвичай в заголовку). Поділ змісту такого подання значно полегшує управління зовнішнім виглядом сайту з єдиного центру.

JavaScript (JS) - динамічна, об'єктно-орієнтована прототипна мова програмування. Реалізація стандарту ECMAScript. Найчастіше використовується для створення сценаріїв веб-сторінок, що надає можливість на стороні клієнта взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб-сторінки.

Для редагування та обробки фотографій та рисунків використовується програма Adobe Photoshop CC 2018.

Adobe Photoshop - це комплексне рішення для професійної обробки цифрових зображень, яке містить найсучасніші інструменти для роботи з зображеннями і нові можливості для реалізації творчих ідей, які дозволяють значно підвищити продуктивність.

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

Для кожного типу сторінок потрібно розробити певну логічну структуру (стандартний набір компонентів сторінки).

Слід створити навігаційну карту вузла та форму її реалізації на сторінках.

Структурна схема прикладу сайту зображена на рисунку 1.

Рисунок 1 – Структурна схема сайту

Сайт електронної бібліотеки представлений п’ятьма сторінками, які виведені у вигляді посилань у навігаційному меню у верхній частині сайту, котра має назву – «header». «Header» зображений на рисунку 2.

Рисунок 2 – Навігаційна панель – «Header»

На головній сторінці, після міні-галереї, яка представлена для швидкого ознайомлення з бібліотекою, розміщені чотири поради, прислухавшись до яких у вас не буде проблем із зором та здоров’ям. На рисунку 3 зображена ця частина головної сторінки.

Рисунок 3 – Частина сторінки з порадами

Нижче від порад, описані основні поняття та правила користування книгами і права користувачів самої бібліотеки. Така собі пам’ятка книголюба, яка зображена на рисунку 4.

Рисунок 4 – «Пам’ятка книголюба»

Друге посилання у навігаційному меню має назву «Електронні підручники та книги». Після переходу за посиланням, відкривається сторінка, на якій користувач може обрати потрібну йому літературу. Інформація на цій сторінці поділена на дві частини: «Підручник» і «Список рекомендованої літератури». Частина «Підручники» представлена блоком рисунків, на яких зображені цифри, які в свою чергу означають клас, підручники якого Вам потрібно знайти. Цей блок зображений на рисунку 5.

Рисунок 5 – Блок «Підручники»

Частина «Список рекомендованої літератури» являє собою також посилання у вигляді рисунків з цифрами класів, за якими користувач потрапляє на інтернет-ресурс, де можна вибрати потрібний йому твір з художньої літератури або з хрестоматії. Описаний вище блок зображений на рисунку 6.

Рисунок 6 – Блок «Список літератури»

Третя сторінка, під назвою «Для батьків», містить в собі інформацію про одні із найважливіших питань, які стосуються читання дітей: «Чому читання важливо зробити звичкою?», «Як залучити дитину до читання? Як розвити у нього потребу у гарній літературі?». Вище описане, на сторінці виглядає як показано нижче на рисунках 7,8 відповідно.

Рисунок 7 - «Чому читання важливо зробити звичкою?»

Рисунок 8 – Корисні інтернет-ресурси

Четверта сторінка – «Про нас» - містить інформацію про двох бібліотекарів, які працюють в навчальному закладі, про місцезнаходження бібліотеки, сайт якої створено та e-mail адресу, для зв’язку з бібліотекою.

Остання – п’ята – сторінка, яка має назву «Фотогалерея», представляє собою особисто фотогалерею, в якій містяться фото бібліотеки, її виставок, тематичних стендів та іншої бібліотечної діяльності. «Фотогалерею» можна переглядати двома способами: у вигляді маленьких мініатюр (рисунок 9) або за допомогою підключеного плагіну Lightbox Gallery (рисунок 10).

Рисунок 9 – Спосіб перегляду маленьких мініатюр

Рисунок 10– Спосіб перегляду за допомогою Lightbox Gallery

Зверніть увагу, свідоцтва знаходяться в Вашому особистому кабінеті в розділі «Досягнення»

Всеосвіта є суб’єктом підвищення кваліфікації.

Всі сертифікати за наші курси та вебінари можуть бути зараховані у підвищення кваліфікації.

Співпраця із закладами освіти.

Дізнатись більше про сертифікати.

Приклад завдання з олімпіади Українська мова. Спробуйте!
До ЗНО з ІСТОРІЇ УКРАЇНИ залишилося:
0
2
міс.
0
0
дн.
0
4
год.
Готуйся до ЗНО разом із «Всеосвітою»!
Схожі матеріали