Поняття про інтерактивні веб-сторінки та засоби розробки сценаріїв

Вище було розглянуто основні конструкції мови HTML і можливості її використання для створення Web-сторінок. Тепер потрібно з окремих сторінок сконструювати свій Web-сайт і розмістити його в Інтернеті. Розглянемо спочатку етапи планування і створення сайту на жорсткому диску вашого комп'ютера.

Процес створення Web-сайта можна умовно поділити на ряд етапів:

· Визначення цілей;

· Створення схеми Web-сайта;

· Створення сторінок;

· Публікація сторінок на сервері;

· Реклама Web-сайта;

· Підтримка Web-сайта.

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

Крім призначення сайту, потрібно визначити коло його потенційних відвідувачів, тобто аудиторію, на котру розрахований ваш сайт. Чи то будуть школярі, студенти, чи люди різних віків? У який час вони будуть відвідувати ваш сайт і на яких мовах вони будуть говорити? Якими броузерами вони будуть користуватися?

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

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

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

а) б)

Рис.2.2.11 Приклади структури сайту: а – широке дерево; б – вузьке дерево

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

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

а) б)

Рис.2.2.12. Приклад лінійної структури сайту: а - лінійний ланцюжок;
б - лінійна структура з відгалуженням і альтернативним переходом

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

Схема розроблюваного сайту може бути такою, як на рис.2.2.13.

Рис.2.2.13

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

Скопіюйте всі файли в окрему папку і назвіть її, наприклад, Website (рис.2.2.14). У цій лапці має. бути файл index.html, що подає початкову сторінку сайту. Інші файли папки Website містять HTML-код інших сторінок (файли з розширенням.html). У розглянутому прикладі в папці Website розміщений також файл із розширенням.ess, який містить аркуші каскадних стилів (на початковому етапі знайомства з HTML цей файл можна не створювати). Імена усіх файлів повинні бути набрані малими латинськими буквами.

Website img index.htm h1.htm h2.htm h3.htm h4.htm

У папці сайту бажано передбачити папку (у даному прикладі - img), у якій будуть зберігатися зображення у форматі GIF чи JPEG.

Рис.2.2.14. Вміст папки сайту

Якщо при формуванні папки сайту ви перейменовували файли, простежте, щоб відповідні зміни були внесені й у код HTML сторінок. Після цього завантажте початкову сторінку сайту в броузер (Internet Explorer або Netscape Navigator) і переконайтеся, що всі переходи на інші сторінки сайту працюють, сторінки відображаються потрібним чином, а малюнки виводяться на сторінки. Якщо яка-небудь сторінка чи малюнок не відображаються, то, мабуть, ви помилилися у написанні імен файлів. Виправте ці помилки, і ще раз перевірте роботу сайту.

Вибір Web-серверу. Отже, ви створили свій невеликий сайт. Тепер вам потрібно вибрати Web-сервер, на якому цей сайт буде розміщений.

Web-сервер виконує збереження, пошук і обмін файлами в WWW. Наприклад, коли клієнт Web запитує файл із WWW, програма броузера відправляє цей запит на Web-сервер, на якому знаходиться даний файл. Сервер відшукує файл на своїх дисках і відправляє його комп'ютеру-клієнту, від якого був отриманий запит. Обмін інформацією між клієнтом і Web-сервером відбувається відповідно до протоколу HTTP - загального протоколу, що відповідає за функціонування World Wide Web.

Web-сервер - це комп'ютер, що працює під керуванням однієї з операційних систем UNIX, Windows NT, Macintosh і на який установлена спеціальна програма Web-cepeepy.

Найбільш поширеною програмою Web-серверу є Apache Server, яка працює швидко і встановлюється безкоштовно (див. вузол www.apache.org). Часто використовуються також програми TomCat, Microsoft IIS, NCSA та ін. За допомогою однієї з таких програм свій Web-сервер може створити будь-яка організація, школа і навіть приватна особа. Однак це не завжди виправдано, оскільки повноцінний Web-сервер повинен мати швидке з'єднання з Інтернетом (наприклад, через виділену лінію) і повинен працювати цілодобово. Тому користувачі вирішують проблему Web-серверу за допомогою сторонніх організацій - фірми вашого провайдера чи спеціалізованих фірм, які займаються хостингом.

Хостинг (від англ. слова hosting - спільне розміщення) - це розміщення Web-caumy на обладнанні компанії. Ресурси серверу і лінії зв'язку використовуються спільно безліччю клієнтів.

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

Нині з'являється усе більше Web-серверів, що здійснюють безкоштовний хостинг (наприклад, сервери www.bigmir.net, www.chat.ru, www.da.ru, www.narod.ru, www.boom.ru). Такі сервери не вимагають оплати за підтримку Web-сайтів клієнтів і існують за рахунок рекламодавців. Зареєстрованому клієнту дається обмежений, але достатній простір на диску серверу - від 5 до 50 Мбайт. На ньому клієнт може розмістити як невеликий, так і солідний сайт. Єдине зобов'язання, що бере на себе клієнт безкоштовного Web-серверу, це розміщення на своєму сайті банерів - маленьких помітних зображень (часто анімованих), призначених для реклами. Утім, згоди клієнта на це, як правило, не запитують - банери вставляються й обновляються без участі власника сайту.

Безкоштовні Web-сервери мають також обмеження у наданому сервісі: вони, як правило, не підтримують сучасні Інтернет-технології PHP, JSP. ASP та ін. Однак свій сайт, що містить звичайні файли HTML, ви зможете розмістити на безкоштовному сервері без особливих проблем.

(Термін «банер» (від англ banner - прапор) прийшов в WWW із поліграфії, де він означає газетний заголовок великими літерами на всю ширину смуги - так звану «шапку»)

Розміщення Web-сайту в мережі Інтернет та його редагування. Створений сайт почне «діяти», якщо розмістити його на Web-сервері. Після цього відвідувачі зможуть «заходити» на наш сайт і знайомитися з поданими на ньому матеріалами. Для передачі файлів на Web-сервер існує кілька можливостей.

Розглянемо найпростіший спосіб розміщення сайту - на одному з безкоштовних Web-серверів, наприклад, www.boom.ru. На цьому сервері користувачеві дається зручний інтерфейс для операцій розміщення і редагування сайту, а також до 50 Мбайт вільного простору на диску.

При передачі файлів на безкоштовний сервер використовується протокол HTTP, тобто протокол, за допомогою якого здійснюється звичайний обмін файлами в WWW. Розглянемо послідовність дій при розміщенні Web-сайту.

· Підключіться до Інтернету і завантажте початкову сторінку www.boom.ru.

· Клацніть по посиланню Регистрируйтесь и начинайте создание сайта. На наступній сторінці натисніть кнопку Начать регистрацию, після чого завантажиться сторінка для введення ваших даних.

· Введіть ім'я свого сайту, наприклад, "kurrob" (адреса сайту тоді матиме вигляд: www. kurrob.boom.ru). Наберіть також пароль і підтвердіть його в нижньому полі. У поле E-mail введіть свою електронну поштову адресу. На цю адресу ви надалі одержите лист із підтвердженням реєстрації. У розділі Дополнительная информация о пользователе наберіть своє прізвище й ім'я, а також псевдонім. У нижній частині сторінки є шестизначний номер. Уведіть наведений номер - він служитиме для захисту від автоматичних реєстрацій. Після заповнення полів натисніть кнопку Отправить.

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

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

· Почекайте, поки завантажаться файли і з'явиться сторінка вмісту каталогу, на якій буде розміщений список файлів, скопійованих на сервер. Установіть прапорець ліворуч від імені файла index.html і натисніть кнопку С делать главной.

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

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

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

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

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

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

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

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

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

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

В даний час для створення інтерактивних сайтів застосовуються різні сучасні технології: PHP, ASP, Perl, JSP, CSS, бази даних DB2, MSSQL, Oracle, Access і так далі Сучасні сайти, як правило, керовані сайти, тобто сайти, які оснащені CMS (Системою Управління Контентом - Content Management Systems).

Керовані сайти створюються розробниками для того, щоб інформаційну підтримку і супровід сайту (наприклад, оновлення вмісту або контента сайту) міг здійснювати сам власник сайту.

Залежно від технології створення можна виділити наступні типи сайтів:

1. Статичні сайти, що містять статичні HTML або XHTML сторінки. Статичні веб-сторінки - це статичні файли (набір тексту, таблиць, малюнків і т.д.), які створюється за допомогою мови розмітки HTML (мають розширення. Html або. Htm) і зберігаються в готовому вигляді у файловій системі сервера.

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

3. Flash-сайти - це інтерактивні програми, розроблені в середовищі Macromedia Flash. Основним інструментом розробки flash-програм є векторна графіка (інтерактивна векторна анімація для Web). Flash додає сайтам динамічність і інтерактивність.

4. Комбіновані сайти, в яких використовуються вищевикладені технології створення сайтів.

Сайти по взаємодії користувача з ресурсами веб-сторінки можна розділити на пасивні та активні або інтерактивні.

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

Технологія створення веб-сторінки статичних сайтів: мова HTML (Hyper Text Markup Language), яка є мовою розмітки гіпертексту та каскадні таблиці стилів CSS (Cascading Style Sheets). CSS використовується для оформлення та форматування різних елементів веб-сторінок, в результаті чого значно знижують розміри веб-сторінок.

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

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

Для створення сайту використовують різні засоби: редактори тексту типу Блокнот, візуальні редактори типу Microsoft FrontPage, Macromedia Dreamweaver і безліч інших редакторів, а також конструктори сайтів (дизайнери). Конструктори веб-сайтів розміщуються на деяких сайтах в мережі Інтернет.

Для навчання доцільно використовувати редактор Microsoft FrontPage - це візуальний HTML редактор, який входить до складу додатків Microsoft Office. Але створення реального сайту краще виконувати в русифікованому редакторі Macromedia Dreamweaver 8 з використанням технології CSS. Необхідно відзначити, що з метою швидкої завантаження веб-сторінок їх розміри не повинні перевищувати 20 Кбайт.

Статичні сайти з інтерактивними веб-сторінками. Для додання статичним веб-сторінок інтерактивності і динамічності в веб-сторінку можна вставляти скрипти на сценаріях javascript і VBScript, виконуваних на стороні клієнта. Скрипти на javascript і VBScript можуть виконуватися або за наявності будь-яких дій користувача або автоматично під час завантаження веб-сторінки.

Крім того, в HTML документ можна вставляти елементи DHTML (динамічний HTML). DHTML - це спосіб створення інтерактивного веб-сайту. Динамічний HTML побудований на мові програмування javascript, каскадних таблицях стилів CSS і DOM (об'єктній моделі документа).

У документ HTML можна вставляти флеш-фрагменти або Flаsh-ролики (swf-файли). У документ HTML можна вставляти Flash-форми аналогічні HTML формам. Флеш забезпечує інтерактивність за рахунок інтерактивної векторної анімації для Web. Для створення Флеш використовується мова сценаріїв ActionScript.

Для обміну даними між користувачем і сервером веб-сторінку можна вставити веб-додаток, зване HTML формою (form). Форма це частина веб-сторінки, в якій користувач може вводити свою інформацію. Запити в формі можуть виконуватися методами GET або POST.

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

Динамічні сайти, веб-сторінки яких генеруються або формуються з даних зберігаються на сервері в базі даних

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

Для розробки веб-додатків використовують два підходи:

на основі компіляції модулів; на основі інтерпретуються сценаріїв.

Компіляції модулі компільований модулі - це модулі типу CGI, які транслюються в виконувані файли і виконуються веб-сервером. Першими веб-додатками для створення динамічних сайтів були окремі модулі CGI (сценарії, створені в основному на мові Perl), які виконувалися на сервері. CGI-сценарії є звичайними програмами. Результатом виконання модуля є сторінка в форматі HTML.

В Інтернет можна безкоштовно завантажити модулі CGI або CGI-скрипти (гостьові книги, зворотний зв'язок, каталоги посилань, пошук по сайту і т.д.), які виконуються на Web-сервер за запитом користувача. З іншого боку Common Gateway Interface (CGI) - це стандартний інтерфейс обміну даних, який визначає спосіб взаємодії клієнтського програми та веб-сервера. CGI забезпечує запуск скрипта на сервері і взаємодія з ним. У подальшому для реалізації цього підходу стали застосовувати інтерфейси (серверні розширення) ISAPI і NSAPI.

Підхід на основі інтерпретуються сценаріїв У цьому випадку для створення сайту застосовуються серверні скрипти так звані мови сценаріїв. Код сценаріїв, як і НТML-код, є інтерпретованою кодом, тому HTML і сценарії можна комбінувати. Найбільш поширені мови серверних скриптів: Perl, ASP, JSP, PHP, Cold Fusion, Python.

Сценарії взаємодіють з об'єктами на сервері і генерують вихідну інформацію у форматі HTML. Тип серверного скрипта визначається з розширення імені файлу (. Php,. Asp,. Aspx,. Jsp,. Cfm). Якщо Web-сервер отримує запит на сторінку такого типу, то він інтерпретує всі містять в ній сценарії, в результаті чого генерується веб-сторінка у форматі HTML, яка передається назад браузеру.

Найбільш популярними технологіями (середовищем розробки) створення динамічних веб-сторінок є: CGI, PHP, ASP, ASP.NET, JSP, Cold Fusion, AJAX, Python, CSS, бази даних DB2, MsSQL, Oracle, Access і т.д.

Залежно від розв'язуваних завдань для створення сайту вибирають ту чи іншу мову серверних скриптів. Для створення малих і середніх інтерактивних сайтів доцільно застосувати мова сценаріїв PHP. Конкурентами PHP є технології ASP, JSP, Cold Fusion, Perl. Гідністю мови PHP є те, що він є безкоштовним, має відкриті вихідні коди і працює майже на всіх платформах.

Для створення (розробки) і супроводу динамічних сайтів використовують CMS (Content Management System) - Систему управління сайтом, яку називають движком сайту. В даний час популярними системами управління є Drupal, Joomla та WordPress. На основі цих CMS можна створювати функціональні і легко керовані PHP-сайти. Движки для Drupal, Joomla та WordPress є безкоштовними. Засоби розробки сайтів забезпечують поділ змістовної частини (контенту) від дизайну (шаблону веб-сторінки), що дозволяє змінювати зміст веб-сторінок, не зачіпаючи їх дизайну і змінювати шаблон сайту не зачіпаючи змісту його сторінок.

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

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

Динамічні сайти, веб-сторінки яких генеруються на стороні клієнтського застосування. Для створення таких сайтів використовують мови сценаріїв javascript і VBScript, а також Java-аплети і технологія ActiveX. В Інтернеті можна скачати движок для сайту на javascript.

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

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

Крім того, сайти, створені повністю на основі Flash, погано індексують пошукові системи. Флеш-технології в основному застосовуються для створення престижних сайтів. Для створення флеш-анімацій застосовують технологію Adobe Flash, що забезпечує можливість працювати з мовами: ActionScript і ActionScript 2.0.

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

Найпоширенішою та найпершою мовою сценаріїв є мова JavaScript, хоча, лідерство в неї прехоплює мова VBScript, розроблена фірмою MicroSoft на основі мові Visual Basic. Але, по-перше, мову підтримують JavaScript і Internet Explorer. По-друге, JavaScript — могутня мова сценаріїв, що задовольняє більшість виникаючих вимог. VBScript є альтернативною мовою сценаріїв, і вона являє собою спрощену версію мови Visual Basic.

Для додавання VBScript, JavaScript на Web-сторінку використовується дескриптор <SCRIPT>, що має один-єдиний атрибут LANGUAGE. Привласніть цьому атрибутові значення VBSCRIPT, щоб вибрати мову VBScript. Оскільки дескриптор <SCRIPT> є контейнером, необхідно використовувати завершальний дескриптор </SCRIPT>. От як це виглядає:

<SCRIPT LANGUAGE= VBSCRIPT >

Оператори VBScript I </SCRIPT>

Можна і не використовувати атрибут LANGUAGE. Якщо ви не вкажете цей атрибут, то більшість браузерів буде використовувати мова JavaScript, хоча це і не визначено ні консорціумом W3C, ні яким-небудь стандартом.

Якщо Web-браузер, не підтримує VBScript чи JavaScript, то він ігнорує дескриптори <SCRIPT> і </SCRIPT>, однак відображає усе, що знаходиться між ними, припускаючи, що там розміщено якийсь текст HTML.

Для того щоб сховати текст сценарію, використовуйте коментар. Перед блоком коду сценарію необхідно коментар відкрити, а після останнього оператора — закрити. Web-6poyзepы, що підтримують JavaScript, ігнорують коментарі, а інші — ігнорують усе, що в них знаходиться.

<SCRIPT LANGUAGE=JAVASCRIPT>

<! - -

function AddSeries(last)

intTotal = 0;

for(j = 1; j <= last; j++)

{

intTotal+=j;

alert(intTotal);

}

return intTotal;

}

document.write("Howdy");

//--> </SCRIPT>

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

Більшість об'єктів на Web-сторінці має події.

Таблиця 9.5 - Основні події HTML

Об'єкти, події й оброблювачі подій взаємодіють. Оброблювач подій зв'язується з об'єктом, використовуючи подію. Зв'язування здійснюється за допомогою додаткових атрибутів подій, яким привласнюється один оператор, що виконує функцію. Наприклад, для зв'язку функції на JavaScript, що називається MyFunction (), з подією onclick кнопки, необхідно, щоб дескриптор <INPUT> виглядав у такий спосіб:

<INPUT TYPE=BUTTON NAME=BUTTON onClick="MyFunction">

Так само просто зв'язується оброблювач подій і з іншими подіями. У нашому випадку атрибут події — onClick. Можна додати оброблювач ще однієї події і зв'язати його з якою-небудь подією:

<INPUT TYPE=BUTTON NAME=BUTTON onClick="MyFunction()" onMouseOut="ByeMouse()">

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

<SCRIPT LANGUAGE=JAVASCRIPT>

<!--

function Message ()

{

window.status = "Покажчик миші розташований над посиланням!";

}

//-->

</SCRIPT>

Зв’язування нового сценарію.

<HTML> <HEAD>

<ТIТLЕ>Зв'язування нового сценарію</ТIТLЕ> </HEAD>

<BODY>

<А HREF="more.htm" onMouseOver="Message()">Уперед</А>

<А HREF="less.htm" onMouseOver="Message()">Назад</А> </BODY>

</HTML>

Створення інтерактивних Web-сторінок з допомогою мови сценаріїв VBScript.

VBScript – це мова Web-сценаріїв. Він є одним з діалектів мови VBA і також вбудований в додатки MS Office, як іVBA. Редактор VBScript можна викликати в додатках MS Office, виконавши команду Сервис|Макрос|Редактор Сценариев або натиснувши сполучення клавіш Alt+Shift+F11.

VBScript дозволяє:

1. Вставляти в HTML–документи програми обробки зі сторони клієнта.

2. Одержувати доступ до властивостей, методів і подій

2.1. Елементів HTML-документів.

2.2. Active-X елементів HTML-документів.

2.3. Об’єктів Internet Explorer.

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

На відміну від сценаріїв VBScript, ASP-сценарії (Active Service Page) дозволяють створювати сценарії, які будуть виконуватись на стороні сервера, тобто ASP-сценарії передають в браузер не саму програму, а тільки тест і HTML-дескриптори згенеровані Web-сервером. При допомозі моделі ADO (AvtiveX Data Object) ASP також доступні бази даних, які зберігаються на сервері. Але для використання ASP-сценаріїв недостатньо офісних додатків, редакторів Visual Basic for Application і редактора сценаріїв VBScript. Для цього необхідно встановити також Web-сервер Internet Information Server, який би міг інтерпретувати ASP-сценарії, а також якщо потрібний доступ до даних які зберігаються в базі даних, бажано встановити систему управління базами даних Microsoft SQL Server.

На сьогоднішній день досить велика кількість Web-серверів і Web-сайтів працюють на платформі Windows, з використанням Internet Information Server і відповідно створено велику кількість програм з допомогою ASP для доступу до інформаційних ресурсів Internet.

Поиск по сайту: