Розробка електронного підручника на мові HTML

Історія розвитку та теорія Web-дизайну. Ефективність програмно-апаратних засобів. Створення Web-сторінки за допомогою мови HTML. Розробка концептуальної моделі підручника. Структура HTML документу, його інформаційних потоків. Форматування тексту, фрейми.

Рубрика Программирование, компьютеры и кибернетика
Вид курсовая работа
Язык украинский
Дата добавления 29.05.2012
Размер файла 1,3 M

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

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

Зміст

  • Вступ
  • 1. Загальна частина
  • 1.1 Створення Web-сторінки за допомогою мови HTML
  • 1.2 Структура HTML документа
  • 1.3 Форматування тексту
  • 1.4 Фрейми
  • 2. Спеціальна частина
  • 2.1 Структура інформаційних потоків
  • 2.2 Розробка сайта у текстовому редактору Notepad ++
  • 2.3 Гіперсилки в меню сайта
  • 3. Економічна частина
  • Висновки
  • Література

Вступ

WorldWideWeb (WWW) - інтелектуальне досягнення людства в епоху високих технологій. На сьогоднішній день WWW містить мільйони сайтів, на яких розміщена різноманітна інформація. Люди отримують доступ до цієї інформації за допомогою використання технології Internet. Для навігації в WWW використовуються спеціальні програми - Web-браузери, які істотно полегшують користування ресурсами WWW. Вся інформація в Web-браузері відображається у вигляді Web-сторінок, які є основним елементом байтів WWW.Web-сторінки, підтримуючи технологію мультимедіа, об'єднують в собі різні види інформації: текст, графіку, звук, анімацію і відео. Від того, наскільки якісно і красиво зроблена та чи інша Web-сторінка, залежить багато в чому її успіх у мережі. Користувачеві приємно відвідувати ті Web-сторінки, які мають стильне оформлення, не обтяжені надмірно графікою і анімацією, швидко завантажуються і правильно відображаються у вікні Web-браузера. Особливої актуальності набуває проблема розробки Web-сайтів навчальних закладів та використання Internet-технологій в системі освіти. Всякий імпульс до нового завжди і творчий і реакційний. Винахід паперу і книгодрукування викликало побоювання про розрив людських взаємин, з появою кіно висловлювалися думки про зникнення театру і т.п. Однак історія показує, що нові технології займають свої ніші в суспільних відносинах, не замінюючи традиційні, а доповнюючи їх можливості. Підростаюче покоління більш вразливе до різних новацій. Отже, актуальність постановки, вивчення та вирішення проблеми цілеспрямованого використання Internet-технологій в освіті в цілому і Web-дизайну для навчальних закладів зокрема, не викликає сумнівів. Тому для дипломного проекту я обрав тему: Розробка електронного підручника на мові HTML.

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

Реалізація даної мети вимагає змістовного та методичного вирішення наступних завдань:

Вивчити історію і теорію Web-дизайну

Розробити концептуальну модель підручника

Вивчити Web-технологію та мови HTML і її можливості в Web-дизайні

Виявити ефективність програмно-апаратних засобів в Web-дизайні

HTML (від англ. HypertextMarkupLanguage - мова розмітки гіпертексту) - це стандартна мова розмітки документів у Всесвітній павутині. Всі веб-сторінки створюються за допомогою мови HTML (або XHTML). Мова HTML інтерпретується браузером і відображається у вигляді документа, зручному для людини.html є додатком SGML (стандартної узагальненої мови розмітки) і відповідає міжнародному стандарту ISO 8879.html-документ є текстовим файлом розмічений за допомогою спеціальних (природно, текстових) команд. Текстовий формат представлення веб-документів був вибраний виходячи з основних вимог до веб-документу: простота, можливість безпосередньої інтерпретації в будь-якій операційній системі, мінімальний розмір файлу, зручність. Редагування і інтерпретації. Мова розмітки гіпертекстових документів HTML дозволяє визначити різні типи елементів (у оригіналі element), що забезпечують функціональність документа: текстові фрагменти із заданими параметрами форматування, списки, таблиці, зображення, гіперпосилання і т.д. Елементи HTML оголошуються за допомогою команд розмітки, званих тегами (від англійського tag - ярлик). УсsHTML-теги, що зустрічаються в тексті документа інтерпретуються браузером при відображенні документа.

1. Загальна частина

1.1 Створення Web-сторінки за допомогою мови HTML

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

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

Мова HTML існує в де кількох варіантах і продовжує розвиватися, але конструкції HTML, швидше за все, будуть використовуватися і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, які можуть бути, переглянуті багатьма браузерами Web, як зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, що надається NetscapeNavigator, Internet Explorer або де якими іншими програмами.

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

1.2 Структура HTML документа

Оскільки HTML-документи записуються в ASCII-форматі, то для її створення може бути використаний будь-який текстовий редактор.

Зазвичай HTML-документ - це файл з розширенням.html або. Htm, в якому текст розмічений HTML-тегами (англ. tag - спеціальні вбудовані вказівки). Засобами HTML задаються синтаксис і розміщення тегів, відповідно до яких, браузер відображає вміст Веб-документа. Текст самих тегів Веб-браузером не відображається.

Всі теги починаються символом '<' і закінчуються символом '>'. Зазвичай є пара тегов - стартовий (відкриває) і завершальний (що закриває) тег (схоже на що відкриваються і закриваються дужки в математиці), між якими міститься розмічається інформація:

<p> Інформація </ p>

Тут стартовим тегом є тег <P>, а завершальним - </ P>. Завершальний тег відрізняться від стартового лише тим, що в нього перед текстом в дужках <> стоїть символ '/' (слеш).

Браузер, який читає HTML-документ, відображає його у вікні, використовуючи структуру HTML-тегів. У кожному HTML-документі повинні бути присутні три головні частини:

A) Оголошення HTML;

B) Заголовок;

C) Тіло документа.

A) Оголошення HTML

<HTML> І </ HTML>. Пара цих тегів повідомляє програмі перегляду (браузеру) що між ними укладе но документ у форматі HTML, причому першим тегом в документі повинен бути тег <HTML> (на самому початку документа), а останнім - </ HTML> (в самому кінці документа).

<HTML>

.

.

.

</HTML>

B) Заголовна частина.

<HEAD> І </ HEAD>. Між цими тегами розташовується інформація про документ (назва, ключові слова для пошуку, опис і т.д.). Однак найбільш важливим є назва документа, який ми бачимо у верхньому рядку вікна браузера і в списках "Вибране (BookMark)". Спеціальні програми-спайде ри пошукових систем використовують назву документа для побудови своїх баз даних. Для того щоб дати назву своєму HTML-документу текст поміщається між тегами <TITLE> і </TITLE>.

<HTML>

<HEAD>

<TITLE> Моя перша сторінка </TITLE>

</HEAD>

</HTML>

C) Тіло документа.

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

<HTML>

<HEAD>

<TITLE>Моя перша сторінка</TITLE>

</HEAD>

<BODY>

..........

</ BODY>

</ HTML>

1.3 Форматування тексту

У розділі BODY всі символи табуляції і кінця рядків браузером ігноруються і ніяк не впливають на відображення сторінки. Тому переклад рядка в початковому тексті HTML-документа не приведе до початку нового рядка в видимій оглядачем тексті при відсутності спеціальних тегів. Це правило дуже важливо пам'ятати і не забувати ставити розділяють рядки теги, інакше у тексту не буде абзаців, і він стане нечитабельним. Для початку нового рядка використовується тег <BR> (скор. від англ. Break - перервати). Цей тег призводить до відображення браузером подальшого тексту з початку наступного рядка. Закриваючий для нього тег не використовується. Він зручний, якщо потрібно з якогось місця писати з нового рядка без початку нового абзацу, наприклад, у вірші. Повторне його використання дозволяє вставити одну або кілька порожніх рядків, відсунувши наступний фрагмент сторінки вниз.

Суцільний текст без проміжків читається не дуже легко, його незручно переглядати та знаходити потрібні місця. Розбитий на абзаци, текст сприймається набагато швидше. Для початку нового абзацу використовується тег <P> (англ. paragraph - абзац). Цей тег, крім початку нового рядка, вставляє одну порожню рядок. Але багаторазове повторення <P>, на відміну від <BR>, не призведе до появи де кількох порожніх рядків, залишиться все та ж одна порожній рядок. Усередині дужок тега крім його назви можуть розміщуватися також атрибути (англ. atributes - атрибути). Вони відокремлюються від назви і між собою пробілами (одним або де кількома), а пишуться у вигляді імені_атрибута = "значення". Якщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується. Тег <P> може містити атрибут ALIGN, що визначає вирівнювання абзацу. За замовчуванням абзац вирівнюється вліво ALIGN = "left". Можливі також вирівнювання вправо ALIGN = "right" і по центру ALIGN = "center". При використанні атрибутів, після форматіруемого тексту слід використовувати закриваючий тег </ P>. Якщо його немає, то новий тег <P> означає закриття попереднього, відповідно вкладе ні <P> неможливі. Вирівняти текст по центру можливо також тегом <CENTER>. Крім використання цих тегів, для розриву рядків можливе використання символів кінця рядків і табуляцій в самому HTML-документі. Для цих цілей існує тег <PRE>. Весь текст, поміщений між тегами <PRE> і </ PRE>, буде виводитися без змін, тобто з усіма кінцями рядків і табуляції.

Наприклад:

<PRE> Це текст написаний

в два рядки. </ PRE>.

В HTML-документі, крім тексту, можуть міститися горизонтальні розділові лінії. Вони, як і текст, не вимагають ніяких зовнішніх файлів. Тег <HR> виведе горизонтальну лінію одиничної товщини вздовж всієї ширини сторінки. Горизонтальна розділова лінія завжди призводить до розриву рядка, але порожніх рядків між лінією і текстом не з'являється. Тег <HR> може містити кілька атрибутів. <HR SHADE> і <HR> дають контурну лінію з тривимірним ефектом поглиблення. <HR NOSHADE> дає суцільну чорну лінію. Лінія може не сягати у всю ширину сторінки, а складати лише де яку частину. Атрибут WIDTH задає ширину лінії, у відсотках від ширини всієї сторінки або в пікселах. Наприклад, 50% - половина ширини сторінки, 400 - ширина в 400 пікселів. Атрибут ALIGN може приймати значення, аналогічні його значенням для тега<P>, але вирівнювання за умовчанням - по центру. Атрибут SIZE задає товщину лінії в пікселях від 1 до 175; за замовчуванням 1, але якщо <HR SHADE>, (лінія - контурна), то додається товщина, необхідна для тривимірного ефекту поглиблення.

Лінії, поряд з абзацами, дозволяють виділити логічні фрагменти тексту. Але велика кількість горизонтальних ліній неприємно для відвідувача вашої Веб-сторінки, тому після кожного абзацу їх ставити не слід. Вони більше підходять для виділення цілих розділів. У даній роботі дуже широко використовувалися таблиці, фрейми та їх поєднання. Так, практично кожна сторінка сайту має в собі хоча б одну таблицю. Теги HTML для створення таблиць спочатку були розроблені, щоб представляти рядки і стовпці табульованих даних. Однак для розробників таблиці швидко стали цінним засобом управління розміткою Web-сторінок. Таблиці дозволяють створювати стовпці тексту, задавати інтервали між елементами, скорочувати розміри вмісту сторінки способами, які недоступні іншим тегам форматування HTML. Специфікація HTML 4.0 за таблицями значно складніше попереднього стандарту 3.2 Вона намагається привнести контекст і структуру в табличні дані і забезпечити системи для інкрементального виводу і виводу не візуальними засобами (такими як мовні браузери і браузери, що працюють за системою Брайля). Поки ці кошти знаходяться в стадії розробки, тому буде потрібно якийсь час, щоб зрозуміти на практиці, наскільки вони відповідають стандартам. Таблиці можуть використовуватися в різних цілях.

Шаблон сторінки

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

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

1.4 Фрейми

В даній дипломній роботі всі сторінки сайту крім першої містять фрейми. Фрейми дозволяють розділити вікно браузера на невеликі частини, кожна з яких виводить свій HTML документ. Підтримка фреймів, запропонована NetscapeNavigator 2.0 +, була невдовзі використана і іншими популярними браузерами. Основна специфікація фрейма працює з NetscapeNavigator 2.0 і вище, а також з MicroSoft Internet Explorer, починаючи з версії 3.0.

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

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

Використовуючи тег <noframes>, нескладно додати альтернативне вміст для браузерів, які не підтримують фрейми. Це властивість вбудовано в систему фреймів.

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

2. Спеціальна частина

2.1 Структура інформаційних потоків

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

1. Методичні вказівки по роботі з пакетом HTML.

2. Сам HTML вбудований в сайт.

Концептуальна модель підручника представлена Web-сторінками, з яких, власне, і складається підручник і їх середовищем створення. Сторінки, в свою чергу, являють собою текстові та графічні об'єкти, а також способи їх розміщення. Як уже говорилося раніше, основним середовищем для роботи служив найпростіший текстовий редактор Блокнот, код програми писався безпосередньо в HTML.

На всіх сторінках сайту, невід'ємним атрибутом є заголовок і фон. Також обов'язковими елементами сторінки служать текст, який може бути статичним на екрані, може бути анімованим, причому його кількість на екрані безпосередньо впливає на розміри файлу. Будь-який текст містить параметри форматування, такі як висота шрифту, накреслення шрифту і інше.

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

Без сумніву, будь-який сайт може і повинен містити графіку. Графіка, в свою чергу, характеризується такими критеріями як дозвіл, розміри графічного файлу, його розширення, і колірна палітра. Чим більше дозвіл, чим багатша палітра кольорів, тим вигідніше буде виглядати об'єкт на екрані і тим довше, на жаль, він буде грузиться.

Теж саме стосується і розмірів зображення, чим більше картинка, тим менше людей її побачать.

Що ж до формату графіки, то зараз існують два лідери, формат JPEG для фотографій і формат GIF для малюнків і мальованої анімації.

2.2 Розробка сайта у текстовому редактору Notepad ++

Для створення електронного підручника використовую текстовий редактор Notepad ++. Відкриваю текстовий редактор Notepad ++ (рис.2.1) і записую код HTML, починаючи розробляти сайт. Початковий код має вигляд:

<html>

<head>

<linkhref="style. css" rel="stylesheet" type="text/css">

</head>

Рисунок 2.1 Текстовий редактор Notepad ++

Зберігаю первинний код з розширенням.html. Наш електронний підручник на мові HTML поки що буде порожнім. Створимо для нашого підручника "шаблон". (рис.2.2)

Рисунок 2.2 Шаблон сайту

Для цього потрібно створити текстовий документ в корні нашої папки із сайтом, я назвав цей документ "style. css". Для шаблона я вибрав стандартну картинку на якій ми напишемо тему дипломного проекту й прізвище розробника електронного підручника (Корольов Вадим гр. Кт-08-2/9). Як ми бачимо повинно бути розширення. css. Такий вигляд буде мати код шаблону :

body {font-family: verdana, helvetica, arial, sans-serif;

font-size: 100%;

margin: 0;

padding: 0;

background-color: #FFFFFF; }

. tbl1

{background: url ('back. jpg'); " - URL - Путь до якого посилається цей документ та назва нашого зображення шаблону"

background-repeat: no-repeat; }

У нас вже є шаблон, на ньому я зроблю випадаюче меню в якому й будуть наші підрозділи теми яка вказана в нашому дипломному проекті. Назву це випадаюче меню "Інструкція" (рис.2.3). В цій інструкції як ми бачимо 12 підрозділів, у кожного з якого є також назва:

Рисунок 2.3 - Меню сайту

Кодом цього меню являється:

<body><tablewidth="100%" border="0">

<tr>

<td>

<divid="nav">

<ul>

<li><a href="index. htm">ІНСТРУКЦІЯ

</a>

<ul>

<li><a href="1.html">1. Сфера застосування</a></li>

<li><a href="2.html">2. Нормативні посилання</a></li>

<li><a href="3.html">3. Терміни та визначення понять</a></li>

<li><a href="4.html">4. Сигнали</a></li>

<li><a href="5.html">5. Світлофори</a></li>

<li><a href="6.html">6. Сигнали огородження</a></li>

<li><a href="7.html">7. Ручні Сигнали</a></li>

<li><a href="8.html">8. Сигнальні покажчики та знаки </a></li>

<li><a href="9.html">9. Сигнали, що застосовуються під час маневровоі роботи</a></li>

<li><a href="10.html">10. Сигнали, що застосовуються для позначення поіздів, локомотивів та інших рухомих одиниць</a></li>

<li><a href="11.html">11. Звукові сигнали</a></li>

<li><a href="12.html">12. Сигнали тривоги та спеціальні покажчики</a></li>

</ul>

</li>

</div>

</td>

Та також його стиль (розміри, та розташування) який є в файлі style. css, його ми описували вище:

<styletype="text/css">

<! - -

#navul {margin: 0px;

padding: 0px;

list-style: none;

width: 110px; }

#navulli {position: relative;

border-bottom: none; }

#navliul {position: absolute;

left: 0px;

top: 20px;

display: none; }

#navulli a {display: block;

text-decoration: none;

color: #111;

background: none;

padding: 1px; }

#navli: hoverul, #navli. jshoverul {

display: block; }

#navli: hover a, #navli. jshover a {

color: #000000;

background: url (. /img/posts/fone-tr. png); }

#navli: hoverul a: hover, #navli. jshoverul a: hover {

background-color: #000000;

background-image: none;

color: #FFFFFF}

->

</style>

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

Так як же вставити картинку в наш електронний підручник, давайте розглянему на нашому варіанті, в підрозділі 10.

Для того щоб вставити картинку є HTML код:

<imgsrc="img\10\5-6. png" width="550" height="400">

Де після SRC= ми вписуємо наш шлях до файлу (картинку) далі вибираємо його ширину (WIDTH) та висоту (HEIGHT) Вище картинки ми бачимо розмір шрифту, для його редагування мені знадобився такий HTML-код:

<i><fontsize="2">*У цьому розділі усі вказівки щодо розміщення сигналів з правого або лівого боку подані за напрямком руху. </i></font>

Де - <i>це нахилений шрифт, Fontsize - розмір шрифту. Після редагування ми получили такий результат (рис.2.4)

Рисунок 2.4 - Редагування тексту і вставлення рисунків

2.3 Гіперсилки в меню сайта

Для того щоб ми могли побачити наш матеріал в нашу сайті на мові HTML повинні бути гіперпосилання, тому ми це розглянемо у цьому підрозділі. В корневій папці с сайтом знаходимо наш файл "index.html" і відкриваємо за допомогою текстового редактора Notepad ++, бачимо код нашого електронного підручника, і знаходимо нашу частину текста, в яку ми будемо вставляти переходи на інші сторінки в підручнику. Код сайту на HTML буде мати такий вигляд:

<table width="100%" border="0">

<tr>

<td>

<div id="nav">

<ul>

<li><a href="index. htm">ІНСТРУКЦІЯ

</a>

<ul>

</ul>

</li>

</div>

</td>

</tr>

</table>

Раніше ми могли при натисканні на кнопку меню під назвою "ІНСТРУКЦІЯ" переходити заново на ту ж саму сторінку, тепер нам потрібно при наведенні на це меню бачите 12 підрозділів, дати їм назву, і при натисканні на підрозділ має появитися матеріал с правого боку, цього ми достигли за допомогою фреймів, без них ми би переходили на другу сторінку, с другим зовсім шаблоном, отже, створюємо в папці файл с ім. `ям "1.html", "2.html", "3.html" "4.html" "5.html" "6.html" "7.html" "8.html" "9.html" "10.html" "11.html" "12.html" і доповнимо в них наш код сайту, таким кодом:

<table width="100%" border="0">

<tr>

<td>

<div id="nav">

<ul>

<li><a href="index. htm">ІНСТРУКЦІЯ

</a>

<ul>

<li><a href="1.html">1. Сфера застосування</a></li>

<li><a href="2.html">2. Нормативні посилання</a></li>

<li><a href="3.html">3. Терміни та визначення понять</a></li>

<li><a href="4.html">4. Сигнали</a></li>

<li><a href="5.html">5. Світлофори</a></li>

<li><a href="6.html">6. Сигнали огородження</a></li>

<li><a href="7.html">7. Ручні Сигнали</a></li>

<li><a href="8.html">8. Сигнальні покажчики та знаки </a></li>

<li><a href="9.html">9. Сигнали, що застосовуються під час маневровоі роботи</a></li>

<li><a href="10.html">10. Сигнали, що застосовуються для позначення поіздів, локомотивів та інших рухомих одиниць</a></li>

<li><a href="11.html">11. Звукові сигнали</a></li>

<li><a href="12.html">12. Сигнали тривоги та спеціальні покажчики</a></li>

</ul>

</li>

</div>

</td>

</tr>

</table>

Що вийшло, такий код <a href="1.html">1. Сфера застосування</a> В ньому ми вказали путь до нашого файлу "1.html" і дали йому назву що відображається в нашому електронному підручнику на мові HTML як "1. Сфера застосування" (рис 2.5)

Рисунок 2.5 Вигляд гіперпосилання в електронному підручнику

Після переходу по цій гіперпосилання ми так же будемо мати наше меню під назвою "Інструкція" і все так же при наведені на яке будуть інші за цим же прикладом гіперпосилання, як ми вже зрозуміли їх в нас 12 штук. Але кожне посилання заповнено матеріалом, для електронного підручника, можна це побачити перейшовши с вище вказаного нами посилання під назвою "1. Сфера застосування" (рис.2.6)

Рисунок 2.6 Матеріал перейшовши по гіперпосилання

3. Економічна частина

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

Зрозр. = t розр. * С розр, (4.1)

де t розр - трудомісткість створення програми,

С розр - середньо годинна оплата програміста,

Для того, щоб відразу врахувати витрати, зв'язані з відрахуваннями на соціальні нестатки, уводиться коефіцієнт відрахувань на соціальні нестатки. А потім середня годинна оплата програміста враховується вже з цим коефіцієнтом.

t розр. - трудомісткість створення програми, містить у собі витрати праці на наступні дії:

· знайомство з проблемою і визначення шляхів підвищення надійності;

· розробка інформаційної структури;

· розробка схеми алгоритму;

· розробка і програмування;

· налагодження програми на ПК;

· підготовка документації по задачі.

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

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

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

tрозр. =tотзав. +tрозпроб. +tанал. +tпрогр. +tвідлад., (4.2)

де tпробл. - час на отримання завдання і аналіз літературних джерел за темою проекту, [чол/годин];

tрозпроб. - час на розробка проблемної функціональної моделей системи, проектування структурної схеми системи підвищення кваліфікації медичних працівників, [чол/годин];

tанал. - час на аналіз та розробку моделей і алгоритмів для моделювання роботи системипідвищення кваліфікації медичних працівників, [чол/годин];

tпрогр. - розробка програми управління підвищенням кваліфікації медичних працівників, [чол/годин];

tнідлад. - час на відладку програмного пакету проведе ння тестових розрахунків, [чол/годин].

tрозр. = 80 + 104 + 80 + 160 + 56=480 [чол/годин]

Таблиця 3.1

Календарний план виконання робіт створення програми

Найменування етапу

Терміни

Кількість годин на виконання

початку

завершення

1

Отримання завдання і аналіз літературних джерел за темою проекту

04.03.2004

14.03.2004

80

2

Розробка проблемної функціональної моделей системи, проектування структурної схеми системи підвищення кваліфікації медичних працівників

15.03.2004

28.03.2004

104

3

Аналіз та розробка моделей і алгоритмів для моделювання роботи системи підвищення кваліфікації медичних працівників

29.03.2004

09.04.2004

80

4

Розробка програми управління підвищенням кваліфікації медичних працівників

10.04.2004

30.04.2004

160

5

Відладка програмного пакету проведе ння тестових розрахунків

01.05.2004

07.05.2004

56

Розрахунок середньої годинної оплати програміста.

Для визначення середньої годинної оплати програміста необхідно спочатку визначити його річний фонд заробітної плати з урахуванням відрахувань на соціальні нестатки. Це можна зробити, знаючи місячний оклад програміста. Він складає приблизно 800,00 гривень. Отже, заробітна плата програміста з урахуванням премій (40%) і районного коефіцієнта (15%) складає 1280,00 гривень на місяць. Таким чином, річний фонд заробітної плати складе 15456,00 гривень. З цієї суми беруться відрахування в соціальні фонди (16,6%), тобто2565,69 гривень.

Таким чином, річний фонд грошового забезпечення 18021,69 гривень. Тепер необхідно визначити число робочих годин у році, по формулі:

n (p) = (N - N (п) - N (в)) * 8, (4.3)

де N - загальне число днів у році;

N (п) - число святкових днів у році;

N (в) - число вихідних днів у році.

Число святкових днів у році - 10, а вихідних - 104. Отже, число робочих годин у році дорівнює:

n (p) = (365 - 10 - 104) * 8 = 2 008 [години].

Середня годинна оплата програміста визначається співвідношенням:

Срозр. = ФЗРсн / n (p), (4.4)

де ФЗРсн - річний фонд грошового забезпечення.

Срозр. = 18021,69/2 008 =8,975 [гривень].

Отже, витрати по оплаті праці (Зрозр.) розроблювачів програми складають:

Зрозр. =480 * 8,975 =4308 [гривень].

Розрахунок річного фонду часу роботи ПК.

Визначивши дійсний річний фонд часу ЕОМ у годинах, оде ржимо можливість оцінити собівартість годин машинного часу. Дійсний річний фонд часу ЕОМ дорівнює числу робочих годин у році для оператора, за винятком часу на профілактику і ремонт ЕОМ. Час профілактики: щомісячно - 5 годин; щорічно - 6 діб.

ТгПК = 2008 - (6*8 + 5*12) = 1906 [години].

Річні поточні витрати на експлуатацію визначаються по формулі:

ЗгПК = ЗгАМгЭЛгРЕМгМАТгДР, (4.5)

де ЗгАМ - річні відрахування на амортизацію;

ЗгЭЛ - річні витрати на електроенергію для ПК;

ЗгРЕМ - річні витрати на ремонт ПК;

ЗгМАТ - річні витрати на додаткові комплектуючі ПК;

ЗгДР - інші витрати.

Амортизаційні відрахування.

Сума річних амортизаційних відрахувань визначається по формулі:

ЗгАМ = ЦПК * НА, (4.6)

де ЦПК - балансова вартість ПК,

НА - норма амортизаційних відрахувань, дорівнює 20% (в квартал).

Балансова вартість ПК:

Цпк = Цр * (1+ Кун), (4.7)

де Цр - ринкова вартість ПК,

Кун - коефіцієнт, що враховує витрати на установку і налагодження, рівний 12%.

Цпк = 5 000 * (1 + 0.12) = 5 600 [гривень].

ЗгАМ = 5 600* 0.2 * 4 = 4 480 [гривень].

Витрати на електроенергію, споживану ПК.

Витрати на електроенергію, споживану ПК, визначаються по формулі:

ЗгЭЛ = РчПК * ТгПК * ЦЭЛ * А, (4.8)

де PчПК - настановна потужність ПК (PчПК = 0.3 [квт]);

ТгПК - річний фонд корисного часу роботи машини;

ЦЭЛ - вартість 1 квт/година електроенергії (ЦЭЛ = 0,12 [грн.]);

А - коефіцієнт інтенсивного використання ПК (0.9 - 1).

Таким чином, розрахункове значення витрат на електроенергію, споживану ПК, складає:

ЗгЭЛ = 0.3 * 1906 * 0,12 * 1.0 =68,616 [гривень]

Витрати на поточний і профілактичний ремонт.

Витрати на поточний і профілактичний ремонт приймаються рівними 6% від вартості ПК:

ЗгРЕМ = ЦПК * 0.06, (4.9), ЗгРЕМ = 5 600 * 0.06 = 336 [гривень].

Витрати на матеріали.

Витрати на матеріали - витрати необхідні для забезпечення експлуатації ПК приймаються рівними 2% від вартості ПК.

ЗгМАТ = ЦПК * 2%, (4.10) ЗгМАТ = 5 600 * 0.02 = 112 [гривень].

Непрямі витрати.

Непрямі витрати, витрати зв'язані з експлуатацією ПК приймаються рівними 5-10% вартості ПК.

ЗгДР = ЦПК * 5%, (4.11), ЗгДР = 5 600 * 0.05 = 280 [гривень].

Витрати, пов'язані з розробкою програми на ПК.

Витрати, пов'язані з розробкою програми на ПК, визначаються, як добуток часу використання ПК для розробки програми на собівартість машиночасу обчислювальної техніки. Собівартість (СПК) однієї години роботи ПК дорівнює відношенню річних поточних витрат на експлуатацію ПК (ЗгПК) до річного фонду часу (ТгПК) корисної роботи ПК.

СПК = ЗгПК / ТгПК, (4.12)

Одже собівартість машинного часу складає:

СПК = 5276,616/1906 =2,7684 [гривень].

Повні витрати на експлуатацію ПК.

Повні витрати на експлуатацію ПК у плині року складають:

ЗгПК= 4 480 + 68,616 + 336 + 112 + 280= 5340,77 [гривень].

Витрати машинного часу.

У ході розробки програмного комплексу машина використовувалася на етапах програмування:

· написання програми за готовою схемою алгоритму;

· налагодження програми на ПК;

· підготовки документації по задачі.

Таким чином, витрати машинного часу склали (tмаш):

tмаш = tпрог. +tвідлад., (4.13)

tмаш = 160 + 56 =216 [чол. /годин].

Витрати на оплату машинного часу можна розрахувати по формулі:

Змаш = tмаш * СПК, (4.14)

Змаш =216* 2,7684 = 597,9796 [гривень].

Загальні витрати на створення програмного комплексу.

Зразом = З розр. + З маш, (4.15)

Зразом= 4308 + 597,9796 = 4905,98 [гривень].

Визначення планованої економії від впровадження програмного продукту.

При визначенні планованої окупності приймемо, що витрати на даний програмний комплекс понесла установа, без мети наступного комерційного поширення продукту.

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

Зменшення часу досягається за рахунок зручного розподілу збереження оброблюваних даних. Усі дані зберігаються в окремій базі даних і при необхідності легко доступні для повторної обробки й аналізу.

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

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

Витрати на рік без використання інформаційної системи становлять:

Ерес = 30000 [гривень].

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

Зразом = 2905,98 [гривень].

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

Збпз = 2500 * 2 = 5000 [гривень].

Сумарні витрати складають:

Зсумразом+ Збпз, (4.16)

Зсум= 4905,98 + 5000 = 9905,98 [гривень].

У результаті впровадження даної інформаційної системи економія трудових ресурсів складе 2 штатні одиниці з фондом заробітної плати1000,00 гривень на місяць і необхідно закріпити програміста для супроводу інформаційної системи на півставки, тобто 400 гривень в місяць, що становить 6000,00 гривень на кінець года.

Загальні витрати нового штату працівників складе: Зншт = 1400 [гривень]. Окупність програмного забезпечення після впровадження на перший місяць становить:

Ток = 2 * 2500 - 4905,98 - 2 * 1400 = - 2705,98 [гривень].

Ток< 0, значить даний програмний продукт не окупиться в продовж 2-х місяців.

Ток = 3 * 2500 - 4905,98 - 3 * 1400 = - 1605,98 [гривень].

Ток< 0, значить даний програмний продукт не окупиться в продовж 3-х місяців.

Ток = 4 * 2500 - 4905,98 - 4 * 1400 = - 505,98 [гривень].

Ток< 0, значить даний програмний продукт не окупиться в продовж 4-х місяців.

Ток = 5 * 2500 - 4905,98 - 5 * 1400 = 594,02 [гривень].

Ток> 0, значить даний програмний продукт окупиться в продовж 5-х місяців.

Повні витрати до кінця року з новим штатом працівників становить:

Зпов = Зсум + 7 * Зншт, (4.17)

Зпов = 9905,98 + 7 * 1400 = 19705,98 [гривень].

Економія коштів на рік становить:

Є = Ерес - Зпов, (4.18)

Є = 30000 - 19705,98 = 10294,02 [гривень].

Розрахуємо економічний ефект

Ееф = Є/ Ерес* 100

Ееф=10294,02/30000 * 100 = 34,3134 [%].

На розробку інформаційної системи управління підвищенням кваліфікації медичних працівників витрачено 4905,98 грн., що значно менше вартості подібних систем (від 10 до 20 тис. гривень або більше).

Таким чином маємо значну економію коштів за рахунок економії трудових ресурсів та економічний ефект 34,31 %.

У складі комплексу технічних засобів розробника необхідно передбачити комп'ютер для адміністратора сайту. Характеристики КТС визначаємо відповідно до вимог ПЗ, встановленого на його робочому місці (дивіться пункт 4 пояснювальної записки). Дана робота виконувалась у найпростішому текстовому редакторі Блокнот, для якого системні вимоги мінімальні. Для створення та обробки графічних об'єктів використовувалася програма CorelDraw 9 і CorelPhotoPaint 9. Обсяг диска для інсталяції цих програм варіюється в залежності від його конфігурації. Наприклад, 2 Kб файл на FAT форматованому диску об'ємом 1 Гб займе 16 Кб і 32 Кб на 2 Мб диску. Інсталяція розраховується на дійсному розмірі файлів, а не на необхідному вільному просторі. Тому, інсталювання у великій, розбитий на логічні диски, FAT - форматований і заповнений HDD, може привести до проблем в кінці установки.

Для якісної роботи з графікою рекомендується вибирати монітор, що підтримує 16 млн. кольорів або палітру TrueColor.

Для інсталяції Windows98, операційного середовища, на яку розраховано базову ПЗ, система повинна відповідати таким мінімальним вимогам:

Комп'ютер Pentium з тактовою частотою не нижче 120 МГ

16 Мб оперативної пам'яті.

295 Мб на жорсткому диску

Для типової інсталяції CorelDraw і CorelPhotoPaint необхідно мати 192 Мб вільного місця на диску.

Відповідно до вищеперелічених вимог, вибираємо мінімальні характеристики для КТС:

Процесор Pentium або аналогічний AMD з тактовою частотою не нижче 120 МГц.

16 Мб оперативної пам'яті.

500 Мб HDD

Необхідна наявність миші і CD-ROM для інсталяції програмного забезпечення. Internet Explorer 5 і Internet ToolsSetup виробляє установку більшості файлів на той диск, де знаходиться папка Windows, незалежно від того, куди користувач здійснює інсталяцію. Щоб задовольнити вимогам Internet Explorer, необхідно звільнити вільний простір на тому диску, де знаходиться папка Windows.

Обладнання припускаємо купувати у фірмі Magicom, тому що ціни на комплектуючі невисокі і надається безкоштовне гарантійне обслуговування протягом року. Відповідно до прайс-листом на 26 квітня 2002 року, вибираємо комплектуючі до PII-300, максимально наближені до необхідних:

Процесор Celeron 433 Intel 128K PPGA - 4590 тг.

ОЗУ DIMM SDRAM 32Mb - 1530 тг.

Вінчестер HDD 6.4Gb Fujitsu MPE3084AT UDMA-9792 тг.

CD-ROM 52 spSony - 6426 тг.

Моде м StreamMotorolaVoice 56 int PCI - 3060 тг.

Материнська плата Slot1 440BAT i440BX AGP, AT, dualpower 9945 тг.

Віде окарта AGP 8 SG RAM Mb S3 TRIO 3D 2X - 3060 тг.

Монітор LG563 15 " - 18054 тг.

Корпус CaseMicroATX - 4284 тг.

Клавіатура Keyboard 8001 AT/PS/2 - 1224 тг.

Миша Mouse 3x Alsi PS - 459 тг.

Килимок для миші - 153 тг.

Разом виходить 62 577 тг. У перспективі можливе використання сканера, цифрової фото та відеокамери для оновлення сайту, але ці витрати не є необхідними і терміновими на даний момент часу, тому вони прийматися в розрахунок не будуть. Для економічного обгрунтування дипломного проекту буде використана цифра 62577 тг.

Висновки

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

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

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

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

Література

1. Роберт І.В. Сучасні інформаційні технології в освіті: дидактичні проблеми, перспективи використання. - М.: Школа-Пресс, 1994. - 205с.

2. Єршов Ю.А. Виступ на закритті II Міжнародного конгресу ЮНЕСКО "Освіта та інформатика" // Освіта і інформатика - 1996, № 5

3. Ніколенко Д.В. Практичні заняття з Сss. - М.: Наука і техніка, 2000. - 128с.

4. Вагнер Р., Вайк А. CSSScript. - К.: ДиаСофт, - 2001. - 464с.

5. Глушаков С.В., Ломотько Д.В., Мельников І.В. Робота в мережі Internet. - Харків: Фоліант, - 2000. - 346с.

6. Дьяконов В.П. Internet Настільна книга користувача. - М.: АСТ-Пресс, 2000. - 640с.

7. Шапошников І. Web-сайт своїми руками. - СПб: Изд-во "Пітер", 2002. - 390С.

8. Холмогоров В. Основи Web-майстерності. - СПб.: Питер, 2001. - 352с.

9. Якушина Е. Вивчаємо Інтернет, створюємо web-сторінку. - СПб.: Пітер, - 2000. - 256с.

10. Цеховий В.А. Web-дизайн і комерція. - М.: Наука і техніка, 2000. - 192с.

11. Федорчук А. Як створюються Web-сайти. - СПб.: Пітер, - 2000. - 224с.

12. Нільсен Я. Web-дизайн. - СПб.: Символ-Плюс, - 2000. - 512с.

13. Леонтьєв Б.К. Web-дизайн: тонкощі, хитрості, секрети. - М.: Майор, 2001. - 176с.

14. Шафран Е. Створення Web-сторінок. - СПб.: Питер, - 2001. - 320с.

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


Подобные документы

  • Основи Web-програмування. Використання мови HTML. Базові елементи HTML. Форматування тексту. Вирівнювання тексту та горизонтальна лінія. Значення RGB- коду. Таблиці та списки, посилання та робота з ними. Створення посилань на документи і файли.

    курсовая работа [40,9 K], добавлен 12.02.2009

  • Вступ в мову HTML. Структура HTML-документа. Встановлення кольору фону та тексту, створення заголовка. Графіка і посилання на WEB-сторінці, вставка малюнків. Оформлення таблиць та форматування комірок. Комплексна лабораторна робота "Створення HTML-файла".

    методичка [147,3 K], добавлен 15.06.2009

  • Створення шаблону засобами CSS для електронного підручника. Структура електронного підручника та схема навігації. Сценарії та основні модулі: головна сторінка, шаблон web-інтрфейсу, сторінка з питаннями для самоконтролю, опис інтерактивних елементів.

    курсовая работа [2,9 M], добавлен 20.04.2015

  • Принципи створення WEB-сторінок. Правила і програми для створення електронних публікацій. Гіперпосилання. Використання JAVA-скриптів при створенні HTML документу. Графіка у HTML-документах. Утворення та відправлення повідомлень електронної пошти.

    реферат [177,1 K], добавлен 19.10.2007

  • Електронні підручники як засіб впровадження інформаційних технологій у навчальний процес: основні поняття, вимоги. Створення електронного підручника: особливості мови HTML, текст, гіперпосилання; практичні заняття з теорії числових і функціональних рядів.

    дипломная работа [1,8 M], добавлен 23.08.2012

  • Розробка сайту-візитки компанії, яка надає послуги в ІТ-галузі та оцінювання створеного сайту. Структурне розположення усіх html, css—файлів та зображень. Створення текстового документу з іменем index та розширенням .html. Тестування сторінки в браузері.

    курсовая работа [1,9 M], добавлен 25.06.2015

  • Проект сторінки з розміщенням конвертора валют на мові програмування HTML та JavaScript. Розмітка гіпертекстових документів HTML, основні функції, властивості і параметри; структурне форматування. Технології CSS, JavaScript, ефективність використання.

    курсовая работа [1,8 M], добавлен 30.01.2012

  • Поняття електронного підручника, його розробка, основні переваги та недоліки. Вивчення теоретичного курсу з теорії границь, диференціального та інтегрального числення функції однієї змінної. Застосування інтеграла Рімана, його означення та властивості.

    дипломная работа [2,6 M], добавлен 12.02.2013

  • Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.

    реферат [23,7 K], добавлен 17.08.2007

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

    дипломная работа [2,4 M], добавлен 20.10.2013

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