| Ім'я файлу: 2.1.doc Розширення: docРозмір: 58кб.Дата: 02.05.2020скачати2.1. Базові веб-технології Сучасний Веб - це постійно зростаюча кількість сторінок і веб-додатків, що пов'язані між собою посиланнями. Він сповнений відеороликів, фотографій і інтерактивного контенту. Однак, взаємодія веб-технологій, завдяки яким все це так злагоджено працює, залишається прихованою від очей звичайного користувача. Веб-технології стрімко розвиваються і розробники мають широкі можливості створювати веб-вміст нового покоління. Сьогоднішній Інтернет є результатом безперервних зусиль відкритої веб-спільноти, яка розробляє новітні технології і домагається їх підтримки всіма браузерами. Основи Веб
Все, що бачить користувач на сайті від шрифту, фону, випадного меню, слайдеру створено за допомогою базової трійки засобів – мови HTML, таблиць стилів CSS і сценаріїв JavaScript.
HTML формує структуру сторінки (скелет), CSS визначає її зовнішній вигляд, а JS надає динаміку. Якщо пояснити наочними образами, то HTML - це тіло, CSS – одяг, JS - поведінка.
HTML – мова розмітки тексту
Мова гіпертекстової розмітки HTML (HyperText Markup Language) є основним будівельним засобом для веб-сторінок, використовується для створення та візуального представлення веб-сторінок. Визначає структуру і описує зміст веб-сторінки в структурованій формі.
HTML-сторінка є звичайним текстовим документом, в якому використано спеціальні оператори – теги (tag) чи інша назва дескриптори (descriptor) для позначення, в якому вигляді буде виведено текстовий чи інший елемент у вікні браузера. Прикладами таких операторів є ![]() , , <br />, <div>, <table> тощо. <br /><br />HTML дозволяє формувати на сторінці сайту текстові блоки, <a href="/uploaded/urok-7-bagatosharovi-rastrovi-zobrajennya-rozdil-1--1-seogodni/index1.html" title="Урок 7 Багатошарові растрові зображення Розділ 1 § 1 Сьогодні ви">додавати до них зображення</a>, організовувати таблиці, додавати до дизайну сайту звуковий супровід, організовувати гіперпосилання з переходом до інших розділів сайту або ресурсів Інтернету і компонувати всі ці елементи між собою. За допомогою HTML можна створити як статичний так і динамічний сайт. Сторінки, які створено лише засобами HTML мають розширення .html. <br /><br /><b>Гіперпосилання</b> (Hyperlink) — це базовий функціональний елемент HTML-документу, який реалізовує зв'язок певного об'єкту веб-сторінки з іншим об’єктом. Для гіперпосилання може використовуватися як фрагмент тексту, так і графічний об'єкт, а сам зв'язок можна встановлювати як між об’єктами одного сайту, так і між об'єктами, що розміщені на різних сайтах Інтернету. <br /><br />HTML є мовою, що лише інтерпретується, тому, для виконання коду, його не потрібно компілювати. Інтерпретатор мови втілено в браузер і він «компілює» код безпосередньо під час відкривання документа. Якщо в коді сторінки виявлено помилку, інтерпретатор, зазвичай, не видає відповідного попередження, а просто ігнорує помилку, що може зіпсувати зовнішній вигляд завантаженої сторінки. Для запобігання цього розробникам слід бути уважними під час складання HTML-коду і ретельно тестувати результати своєї роботи.<br /><h3>CSS – каскадна таблиця стилів</h3> <br />CSS (Cascading Style Sheets) — це технологія опису зовнішнього <a href="/uploaded/struktura-dokumenta-avtomatizovane-stvorennya-zmistu-dokumenta/index1.html" title="Структура документа. Автоматизоване створення змісту документа">вигляду документа</a>, що створено засобами HTML.<br /><br />CSS використовується для привласнення певних особливостей для елементів HTML-сторінки: колір, шрифт, розташування на сторінці тощо. До появи CSS оформлення елементів вказувалося безпосередньо в HTML-коді сторінки. Проте, з появою CSS стало можливим принципове розділення структури і опису документа. За рахунок такого розподілу стало можливим легке застосування єдиного стилю оформлення для кількох сторінок сайту, а також швидка зміна цього оформлення.<br /><h4>Переваги CSS:</h4> <ul> <li/> <br />Застосування кількох варіантів дизайну сторінки для різних пристроїв перегляду, наприклад, для комп’ютера, планшету чи телефону.<br /><li/> <br />Зменшення часу завантаження сторінок сайту за рахунок перенесення правил опису даних до окремого CSS-файлу. В цьому випадку браузер завантажує лише структуру документа і дані, що містяться на сторінці. CSS-файл з правилами опису цих даних завантажується браузером лише один раз і зберігається в кеші браузера.<br /><li/> <br />Простота подальшої зміни дизайну. Не потрібно виправляти кожну сторінку, достатньо лише змінити кілька правил у CSS-файлі.<br /><li/> <br />Додаткові можливості оформлення. Наприклад, за допомогою CSS-правил можна застосувати обтікання певного блоку текстом або зробити так, щоб меню фіксовано знаходилося в певному місці при перегортанні сторінки.<br /></ul> <h3>JavaScript – мова сценаріїв</h3> <br />JavaScript – це фрагменти програмного коду (скрипти), що надають динаміки для певних елементів сторінки. Програмний код на JavaScript вписується безпосередньо в текст HTML-сторінки і інтерпретується браузером в міру завантаження цього документа. За допомогою JavaScript можна динамічно реагувати на події, які пов'язані з діями відвідувача або змінами стану сторінки чи вікна. <br /><br />Важливою особливістю JavaScript є об'єктна орієнтованість. Програмісту є доступними численні об'єкти, такі, як документи, гіперпосилання, форми, фрейми тощо. Об'єкти характеризуються описовою інформацією (властивостями) і можливими діями (методами).<br /><h2>Серверні <a href="/uploaded/urok-40-suchasni-movi-programuvannya-urok-40-suchasni-movi-pro/index1.html" title="Урок №40 Сучасні мови програмування Урок 40. Сучасні мови програмування. Цілі">мови програмування</a></h2> <br />Серверне програмування використовують для обробки дій користувача на динамічних складних проектах, таких як пошукові системи, електронна пошта, форуми, Інтернет-магазини тощо. <br /><br />В цих випадках браузер приймає від відвідувача дані і надсилає їх до веб-серверу, який:<br /><ul> <li/> <br />Приймає запит на завантаження файлів (веб-сторінки, таблиці стилів, графічні зображення, фільми, звуки, архіви, виконувані файли тощо).<br /><li/> <br />Здійснює пошук цих файлів на дисках серверного комп'ютера.<br /><li/> <br />Скеровує завдання до відповідних програм, що виконують додаткові дії над файлами.<br /><li/> <br />Формує результати обробки серверних програм у HTML-код.<br /><li/> <br />Надсилає до браузера сформовану веб-сторінку в HTML-коді.<br /></ul> <br />Для виконання завдань веб-сервера використовуються спеціальні програми, що працюють разом з веб-сервером на тому ж серверному комп'ютері. Вони називаються серверними програмами, не мають інтерфейсу користувача і "спілкуються" <a href="/uploaded/sho-take-veb-dizajnzaraz-mi-rozglyanemo-bilesh-detaleno-veb-di/index1.html" title="Що таке веб-дизайн?Зараз ми розглянемо більш детально Веб-дизайн це">лише з веб-сервером</a>, приймають від нього введені користувачем дані і повертають йому результат. Цим вони докорінно відрізняються від клієнтських програм, що працюють безпосередньо з користувачем. Є й багатофункціональні програми, що виконують функції не лише від веб-сервера, але і FTP чи поштового сервера.<br /><br />Сторінки, що формуються серверними програмами називаються динамічними, на відміну від статичних сторінок у форматі .html. <br /><h4>Серверні програми поділяються:</h4> <ol> <li/> <br /><b>Розширення веб-сервера (додатки формату ISAPI, модулі розширення Apache тощо).</b> Це вбудовані в веб-сервер серверні програми. Вперше запропоновано фірмою Microsoft для їх сервера Microsoft Internet Information Server (інтерфейс ISAPI) і розробниками популярного веб-сервера Apache.<br /><li/> <br /><b>Активні серверні сторінки (ASP, РНР тощо).</b> Це звичайні статичні веб-сторінки, що збережені як файли, які, окрім звичайного HTML-коду, містять команди, що обробляються або самим веб-сервером або його розширеннями. <br /><li/> <br /><b>Серверні сценарії, написані мовою, що інтерпретується (PНР, Python, </b><b>Java</b><b>, </b><b>Ruby</b><b>).</b> Сценарії оброблення даних при різних діях користувача на сайті.<br /></ol> <br /><b>Розширення веб-сервера</b> - різновид серверних програм, що представляють бібліотеки, в яких реалізовано логіку серверної програми. Такі бібліотеки вбудовуються в програму веб-сервера і працюють як її невід'ємна частина. <br /><br />Розширення веб-серверів Internet Information Server фірми Microsoft створюються у вигляді бібліотек DLL (розширення мають формат ISAPI (Internet Server Application Programming Interface - інтерфейс програмування додатків Інтернет-сервера). Формат модулів розширення Apache так і називається - модулі Apache.<br /><br />Метою розширень веб-сервера є економна витрата системних ресурсів. Для обробки всіх наборів даних користувача запускається лише один екземпляр розширення, який забирає значно менше ресурсів, ніж багато запущених програм. Однак розширення важче створювати і налагоджувати, оскільки вони працюють як частина веб-сервера і будь-яка помилка в розширенні призведе до зависання сервера.<br /><br /><b>Активні серверні сторінки</b> - це звичайні веб-сторінки, що містять особливі серверні сценарії (програмний код в HTML-коді) і виконуються самим веб-сервером або його розширеннями. Перевагами активних серверних сторінок є легкість та швидкість написання, і простота відлагодження. <br /><br /><b>Серверні сценарії</b> подібні до активних серверних сторінок, проте, представляють собою "чистий" програмний код, без HTML-фрагментів. Інтерпретатор коду представлено як розширення веб-сервера . Сценарії, зазвичай, <a href="/uploaded/urok-40-suchasni-movi-programuvannya-urok-40-suchasni-movi-pro/index1.html" title="Урок №40 Сучасні мови програмування Урок 40. Сучасні мови програмування. Цілі">пишуться мовами програмування РНР</a>, Java, Perl, Python, Ruby. Фактично писати сценарії можна будь-якою мовою програмування, для якої є інтерпретатор.<br /><br />Серверні сценарії споживають значно більше системних ресурсів, ніж активні сторінки, бо для обробки кожного набору даних користувача запускається власна копія інтерпретатора, а інтерпретатор, в свою чергу, витрачає багато ресурсів на обробку сценарію. І все ж, незважаючи на це, сценарії - найпопулярніший спосіб створення серверних програм.<br /><h2>Ajax - технологія взаємодії з сервером без перевантаження сторінок</h2> <br />В стандартному веб-застосуванні обробкою всієї інформації займається сервер, браузер відповідає лише за взаємодію з користувачем, передачу запитів і виведення отриманих даних у форматі HTML.<br /><br />В Ajax-застосуванні між користувачем і сервером з'являється ще один посередник – програмний механізм (рушій) Ajax (Asynchronous Javascript And XML). Він визначає, які запити можна обробити з боку клієнта, а які необхідно виконувати на сервері. Змінюється поведінка сервера: якщо раніше на кожен запит сервер видавав нову сторінку, то тепер він надсилає лише ті дані, які потрібні клієнту, а рушій Ajax в браузері формує з них HTML-код. <br /><br />Асинхронність виявляється в тому, що не кожен запит користувача скеровується до сервера, а також не кожна реакція сервера обумовлена запитом користувача. Значну частину запитів формує рушій Ajax, причому є можливим, щоб він передбачав запити користувача. <br /><br />Змінюється якісне навантаження на сервер - якщо раніше запитів було мало, але кожен з них вимагав значних ресурсів (серверу потрібно витягнути інформацію з бази даних, сформувати з неї веб-сторінку і відправити до браузера), то тепер завдання сервера спрощується (формувати веб-сторінки не потрібно, та і об'єм даних, що передаються є значно меншим), хоча запитів доводиться обробляти більше. <br /><br />Створювати додаток на Ajax є трудомістким і складним завданням. Потрібно написати і відлагодити на JavaScript рушій з десятків тисяч рядків коду, а також реалізувати серверну частину. <br /><div title="footer"> <br /><br /></div> </table></div>
скачати
|