Розділ 4
енергоінформаційна структура сайту

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

4.1 Енергетична структура
Сіткова структура допомагає користувачу визначати рівні розміщення інформації. Правильно підібрана сітка дозволяє зберігати структуру сторінки одного рівня складності, що дає користувачу можливість легко орієнтуватися на сайті і знаходити необхідну інформацію з мінімальною витратою часу. Прив'язка до осередків сітки забезпечує структуру сторінки і логічний взаємозв'язок її підсистем, який особливо необхідний для уявлення часто інформації, що змінюється.
Оскільки готується сайт «Технології сучасного життя», передбачаються безліч змін, які матимуть місце в майбутньому. Виходячи з цього, ми повинні надати зручну енергетичну структуру.
Від того, яка створена енергетична структура сайту, залежить його робота. До енергетичної структури відносяться таблична структура сайту і розташування гіперпосилань.
Створюваний, сайт «Технології сучасного життя» містить в собі чотири сторінки, зв'язані між собою гіперпосиланнями. На кожній сторінці є перехід до головної і іншим сторінкам, що дозволяє вільно пересуватися по простору документа. Також сторінки сайту перекладені на українську мову, що надає право вибору користувачу.
При створенні сайту були певні кроки і деякі правила які необхідно дотримувати:
1. вивчити структуру явища - виявити його підсистеми, їх важливість, тривалість протікання, частоту зміни події.
2. Згідно виявленим підсистемам, побудувати ескіз сторінки. Для важливих підсистем явища визначити більший простір, розмістити в центрі. Другорядні процеси, службова інформація розміщується справа або внизу. Головні підсистеми явища - розташовуються зліва. (Згідно сприйняттю людини інформації - зліва направо).
3. Колірне оформлення сторінки сайту - відповідність в кольорі, згідно явищу, що відображається. Розробити дизайн шрифту, розміщення фото і малюнків, розміщення символіки.
Сіткова розмітка допомагає нам визначати рівні розміщення інформації. Правильно підібрана сітка дає можливість зберігати структуру сторінки одного рівня складності, що дає можливість користувачу легко орієнтуватися в просторі сайту і знаходити необхідну інформацію з мінімальною витратою часу.
Нелінійність структури сайту полягає в багатоваріантності розміщення інформації. Нелінійний зміст змінюється під впливом змін в зовнішній ІС.
Принцип в створенні сітки сайту такий же, як і в роботі з програмою Exel - вся інформація розташована в табличній структурі.
Форматування структури включає організацію енергетичної і інформаційної структури. Організація енергетичної структури відбувається за допомогою інструменту - створення осередку, межі осередку, розміру і об'єднання. До інформаційної структури можна віднести заливку-фон, колір меж і форматування вмісту.
Якщо узагальнити всі правила форматування і дизайну сайту, як засіб відображення соціального явища, ми одержимо такий перелік:
1. вивчити структуру явища - виявити його підсистеми, їх важливість, тривалість протікання, частоту зміни події.
2. Згідно виявленим підсистемам, побудувати ескіз сторінки. Для важливих підсистем явища визначити більший простір, розмістити в центрі. Другорядні процеси, службова інформація розміщується справа або внизу. Головні підсистеми явища - розташовуються зліва. (Згідно сприйняттю людини інформації - зліва направо).
3. Колірне оформлення сторінки сайту - відповідність в кольорі, згідно явищу, що відображається. Розробити дизайн шрифту, розміщення фото і малюнків, розміщення символіки.

4.2 Мова програмування HTML
Для створення сайту використовувалася мова HTML, а також інші способи створення веб - сторіночок.
Такі теги використовуються в кожному описі html документа - HTML (Hyper Text Markup Language):
. - за допомогою такого тега починається кожний документ html.
. - позначення назви сайту
- сама назва сайту.
. тіло документа.
. - таблична структура.
. - новий рядок в табличній структурі.
. - осередок в табличній структурі.
HyperText Markup Language (HTML) є стандартною мовою, призначеною для створення гіпертекстових документів в середовищі WEB. HTML-документи можуть бути видимими всіма браузерами, і така сторінка є основою для подальшої роботи над нею додавання динамічних ефектів, чату, форуму.
Html-сторінку можна створити і за допомогою інших редакторів - FrontPage, DreamWear. Створення сторінок в Word і Pablisher є небезпечним - редактори додають свої програмні коди, які для web-сторінки є зайвими. Така сторінка займає дуже багато місця і відкривається не всіма браузерами. Що стосується інших редакторів (FrontPage, DreamWear, HomeSite), то після закінчення необхідно все ретельно перевірити, для цього необхідно знати мову HTML. В цих редакторах можуть бути зайві пропуски, абзаци, зайве форматування, не застосовне ні до якого тексту.
Мова HTML є початковим рівнем програмування необхідно вивчити його особливості, правила, які потім застосовуються для роботи з іншими мовами програмування.
Мова HTML дозволяє: форматувати веб - сторінки (текст, розміщення графічних елементів). Сторінки об'єднуються за допомогою гіперпосилань. Тому багато в чому робота з веб - сторінками покажеться вам знайомої, аналогічної з Word, Pablisher.
Але який би це не була мова, існують спеціальні правила, які потрібно дотримувати. Одними з таких правил є:
- кожна сторінка повинна називатися своїм ім'ям, головна - index, також ці назви повинні писатися з маленької букви і латинськими буквами.
- всі теги повинні писатися безпомилково, оскільки за наявності помилок браузер не відобразить зміни.
- всі теги повинні закриватися
- дотримуючи спеціальну структуру при написанні тегов, ми можемо прослідити їх важливість і не забувати їх закривати.

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



Якщо знову ж таки порівнювати з табличним редактором, то можливості у форматуванні рівні:
border="1" - зробити межі осередків видимими, також можна регулювати товщину межі.
colspan="2" - об'єднання осередків по горизонталі.
rowspan="2" - об'єднання осередків по вертикалі.
bgcolor="#xxxxx"> - фон осередку, при це кожний колір повинен вводитися за допомогою коду або просто на англійській мові.
align="right" - горизонтальне вирівнювання вмісту осередку.
valign="top" - вертикальне вирівнювання вмісту осередку.

4.2.2.Текстовая структура
Енергетична структура визначає спосіб взаємодії його підсистем. У веб об'єкті енергетичну структуру визначає простір (теговая модель), для можливості розміщення інформації. Інформаційна структура створюється тільки на основі енергетичної. Для створення макету необхідно:
- визначити підсистеми
- організувати простір
- зробити в електронному вигляді
- відформатувати
Розглянувши текстову структуру веб - документа, ми бачимо його ідентичність з текстовими об'єктами, створеними в текстовому редакторі. Найбільшою кількістю інструменту по організації текстовій структурі має MS Word. Текстова підсистема складається з енергетичної і інформаційної структур. До організації енергетичних якостей відноситься створення абзаців, перехід рядка на нове положення, вирівнювання абзацу, відступи, інтервали, розмір символів і структура заголовків. До організації інформаційної структури текстового документа відноситься шрифт, колір символів, зображення, список і видозміни. Також існує таблиця стилів, що дозволяє за допомогою тега вбудовувати стилі в документ і прикріплювати їх до одного елементу:

, де:

- створення абзацу або вживання до одного абзацу
- розмір шрифту (може указуватися і в пікселях і в %)
- колір букв.
Приклад текстової структури документа:


4.2.3.Графічна структура
Існують деякі вимоги до зображень на сайті:
Зображення описуються за допомогою тега , в якому описується шлях src. Браузеры можуть відображати графічні формати GIF, jpg, jif.
Jpg - для передачі фотографій. Мільйони кольорів дозволяють одержати зображення вищої якості.
Параметри: - малюнок по лівому краю.
До енергетичної структури графічного об'єкту відносяться розмір, вирівнювання щодо тексту до межі.
До інформаційної - колір фону, якщо він задається однорідним кольором.
- задає відстань між текстом і малюнком по вертикалі
- по горизонталі.

Alt - короткий опис малюнка
Width – ширина
Height - висота.

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

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

Для того, щоб знову повернутися в початок сторінки натискуйте:
В початок сторінки
Приклад з сайту:


4.3 Інструмент для створення сайту JavaScript, css
Каскадні таблиці стилів (Cascading Style Sheets - CSS) - це мова визначення стилів веб-сторінок. Стиль задає спосіб відображення (форматування) елементів сторінки - заголовки, малюнки, гіперпосилання.
Один файл CSS може контролювати зовнішній вигляд безлічі документів HTML. Щоб змінити вид всього сайту, достатньо відредагувати єдиний файл CSS, а не всю кількість сторінок.
Наприклад, у всьому сайті ви однаковим способом форматуєте заголовок. Для цього необхідно прописати відповідний код стільки раз, скільки він зустрічається в сторінках сайту. З використанням стилів достатньо в одному файлі описати спосіб форматування, і він відображатиметься на вказаних вами сторінках.
За рахунок того, що один і той же код не прописується у всіх сторінках, зменшується об'єм однієї сторінки і сайту в цілому.
Завдяки тому, що стилі розроблені загальним узгодженням, однакове форматування сторінки можна розглядати на всіх браузерах.
Сторінки описуються швидше, не витрачається час на прописання однакових кодів. Якщо необхідно відновити стиль, змінити стиль форматування, це робиться також один раз, а не у всіх сторінках сайту.
За допомогою мови стилів можна описати такі ефекти на сторінці, чого не зробиш за допомогою мови HTML.
Розміщення сайту на сервері вимагає вживання стилів з вказаних вище причин. файл стилів (або файли) повинні розміщуватися в спеціальній теці, мати ім'я латинськими символами з розширенням .css. Файл стилів створюється в будь-якому текстовому редакторі. Наприклад:
.adv {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FF6633;
}
.bod {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
}
.price {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6633;
font-weight: bold;

Динамічні об'єкти Java Script створюються для більш детального відображення процесів відбуваються в ІС. Взаємодії з користувачами (пароль, вибір сторінки для перегляду, залучення уваги користувача до інформації через динамічні ефекти). Для створення форм сполучених з БД, для створення випадаючих меню з метою меншого використовування простору.
Для створення подібних програм в код HTML упроваджуються додаткова програма Java Script сценарії. Для вставки коду використовуються такі скрипти:
script>
Java Script є мовою інтерпретатором. Кожний рядок кодується в машинний код, виконується потім обробляється інший рядок. При обробці програми можуть виводитися помилки, інтерпретатор указує номер рядка з помилкою.

4.4 Інформаційні служби на сайті
Поміркувавши, було вирішено встановити на моєму сайті інтерактивну службу – чат, а точніше встановити гіперпосилання на чат співтовариства, у якому я знаходжуся у школі комп'ютерної майстерності. На порталі цієї школи : http//shkm.oopus.info.ru, знаходиться багато цікавої інформації. Останнім часом дітей розділили на співтовариства по інтересам. Були проведені презентації, створені веб – сторінки, які тепер розміщені на порталі. Що до чатів, то у кожного співтовариства свій чат, той у котрому я - на тему «Інформаційні технології в освіті» . На нього і посилається створений сайт.
Чат – це своєрідне середовище, де можуть зустрітися люди з усього світу і обговорювати самі різноманітні теми. Також бувають чати по темам (яку нашому випадку), де проходить дискурс на тему, яку задає адмін.
Не обходиться без обмежень і правил. Вони є, як і у користувачів так і в утворювачів і керівників.
Особливий етикет спілкування діє не тільки в чаті, а і в форумах, конференціях і інших відомих службах. Не прийнято влізати в розмову конференції з єхидними або різкими коментарями, навіть якщо тема вам з якої-небудь причини неприємна. А в чаті діють ще більш жорсткі правила: вас можуть просто викинути із загальної розмови за порушення етикету, наприклад грубе слово або неуважну репліку на адресу кого-небудь з учасників. І поки останній учасник тієї сесії спілкування не вийде з чату, ви не зможете відновити свою присутність. За цим стежать учасники, що узяли на себе працю по підтримці приємного проведення часу.
ВИСНОВОК:
Тема цього сайту, який створювався протягом декількох місяців дуже актуальна на сьогоднішній день, і є надія що сайт буде необхідним у використанні і світовій павутині. На ньому присутні, які динамічні ефекти, так і інтерактивна служба, непогано розташована текстова інформація і графічна. Використанні правил і обмежень дає змогу правильно створити сайт, необхідний людям, а використання декількох мов програмування і каскадних таблиць стилів робить його досконалим з технічної сторони.