Сучасні веб-технологі

Содержание

Слайд 2

Термін «Інтернет» Інтернет (Internet, сокр. від Interconnected Networks – об'єднані мережі)

Термін «Інтернет»

Інтернет (Internet, сокр. від Interconnected Networks – об'єднані мережі) – глобальна

телекомунікаційна мережа інформаційних і обчислювальних ресурсів
Слайд 3

Фізична модель Інтернету Стек протоколів TCP/IP

Фізична модель Інтернету

Стек протоколів TCP/IP

Слайд 4

Логічна модель Інтернету Всесвітня павутина (World Wide Web, Веб) – розподілена

Логічна модель Інтернету

Всесвітня павутина (World Wide Web, Веб) – розподілена система,

що надає доступ до зв'язаних між собою документів, розташованих на різних комп'ютерах, підключених до Інтернету
Основні складові:
мова гіпертекстової розмітки документів HTML
універсальний спосіб адресації ресурсів в мережі URL
протокол обміну гіпертекстовою інформацією HTTP
Слайд 5

World Wide Web World Wide Web (WWW, web, веб-сервер, Усесвітня павутина)

World Wide Web

World Wide Web (WWW, web, веб-сервер, Усесвітня павутина) —

це розподілена інформаційна система, що надає доступ до гіпертекстових документів по протоколу HTTP (HyperText Transfer Protocol).
WWW - це мережева технологія, побудована на клієнт-серверній архітектурі і використовуючи інфраструктуру Інтернет для взаємодії між сервером і клієнтом.
Сервери WWW (web-сервери) - це сховища гіпертекстової (у загальному випадку) інформації.
Документи, представлені у вигляді гіпертексту називаються web-сторінками. Декілька web-сторінок, об'єднаних загальною тематикою, оформленням, зв'язаних гіпертекстовими посиланнями і які знаходяться на одному і тому ж web-сервері, називаються web-сайтом.
Слайд 6

Взаємодія Клієнт – Web-сервер запрос відповідь Клієнт Web-сайти Web-додаток Можливо –

Взаємодія Клієнт – Web-сервер

запрос

відповідь

Клієнт

Web-сайти

Web-додаток

Можливо – HTTPS с SSL захищеним з’єднанням (Secure

Sockets Layer)
Слайд 7

URL URL (Uniform Resource Locator, RFC 1738) - уніфікований локатор (покажчик)

URL

URL (Uniform Resource Locator, RFC 1738) - уніфікований локатор (покажчик) ресурсів,

стандартизований спосіб запису адреси ресурсу в WWW і мережах Інтернет. Адреса URL має гнучку структуру для максимально точної вказівки на місцезнаходження ресурсів в мережі.
Для представлення адреси використовується обмежений набір символів ASCII|.
Слайд 8

Стандарт URL Локальний сервер IIS протокол://користувач:пароль@сервер:порт/шлях/файл/шлях в файлі?параметри Наприклад, http://vova:12345@www.kneu.edu.ua:81/hotdog/Scripts/x.exe/go?n1=20&n2=55 C:\Inetpub\wwwroot http://localhost

Стандарт URL

Локальний сервер IIS

протокол://користувач:пароль@сервер:порт/шлях/файл/шлях в файлі?параметри
Наприклад,
http://vova:12345@www.kneu.edu.ua:81/hotdog/Scripts/x.exe/go?n1=20&n2=55

C:\Inetpub\wwwroot
http://localhost

Слайд 9

Концепції Веб

Концепції Веб

Слайд 10

Технологічна карта концепцій Веб Стек протоколів TCP/IP

Технологічна карта концепцій Веб

Стек протоколів TCP/IP

Слайд 11

Розвиток веб-технологій

Розвиток веб-технологій

Слайд 12

Веб-технології Клієнт (мультіпротокольний) HTTP - Сервер HTML URL (URI) CSS JavaScript

Веб-технології

Клієнт (мультіпротокольний)

HTTP - Сервер

HTML
URL (URI)
CSS
JavaScript
Java Plug-ins
JQuery

CGI
SSI
Java
PHP
ASP
JSP
API
Perl
Python
RoR

FTP

HTTP

FTP - сервер

Слайд 13

Що таке Web-сервер? Веб-сервер — це мережеве застосування, обслуговуюче HTTP-запити від

Що таке Web-сервер?

Веб-сервер — це мережеве застосування, обслуговуюче HTTP-запити від клієнтів,

зазвичай веб-браузерів. Веб-сервер приймає запити і повертає відповіді, зазвичай разом з HTML-сторінкою, зображеннями, файлами, медіа-потоками або іншими даними. Веб-сервери — основа Усесвітньої павутини.
Створенням програмного забезпечення web-серверів займаються багато розробників, але найбільшу популярність в WWW отримали такі програмні продукти, як Apache (Apache Software Foundation), IIS (Microsoft), QZHTTP (він же qq.com), Google Web Server (GWS, Google Inc.) і nginx.
Слайд 14

Apache - вільний web-сервер з відкритим вихідним кодом, поширюється під сумісною

Apache - вільний web-сервер з відкритим вихідним кодом, поширюється під сумісною

з GPL ліцензією. Apache вже багато років є лідером по поширеності в Усесвітній павутині через свою надійність, гнучкість, масштабованість і безпеку.
IIS (Internet Information Services) - набір серверів для декількох служб Інтернету, розроблений майкрософт і поширюваний з ОС сімейства Windows NT. Основним компонентом IIS є веб-сервер, також підтримуються протоколи FTP, POP3, SMTP, NNTP.
QZHTTP - модифікований Apache, використовуваний на китайському порталі qq.com. На ньому розміщені сервіси онлайн-щоденників і миттєвого обміну повідомленнями.
Google Web Server (GWS) - розробка компанії Google на основі web-сервера Apache. GWS оптимізований для виконання застосувань сервісу Google Applications.
nginx [engine x] — це HTTP-сервер, поєднаний з поштовим проксі-сервером. Розроблений І.Сисоєвим для компанії Рамблер. Осенью 2004 роки вийшов перший публічно доступний реліз, зараз nginx використовується рядом крупних сайтів.
lighttpd — веб-сервер, що розробляється з розрахунком на швидкість і захищеність при використанні на сильно навантажених сайтах, а також відповідність стандартам, вільне програмне забезпечення, поширюване за ліцензією BSD.
Слайд 15

Еволюція Веб-серверів Повернення клієнту існуючих статичних HTML-сторінок. 1990 Через кілька років

Еволюція Веб-серверів

Повернення клієнту існуючих статичних HTML-сторінок. 1990 Через кілька років додана технологія

SSI (Server Side Include).
Додано загальний інтерфейс CGI (Common Getaway Interface) для запуску зовнішніх додатків) і обміну даними за допомогою STDIN і STDOUT.
Додано інтерфейс ISAPI (MS Internet Server API для IIS), Apache Shared Module… для роботи рий в єдиному адресному просторі з сервером (часть процесса Web-сервера). Не треба нічого додатково запускати, обмінюватися даними через файли або STDIN/STDOUT. Теоретично вони готові одночасно обробляти будь-яку кількість запитів. При помилках в таких додатках може «вилетіти» весь Web-сервер. Платформозалежні, програмуються на Delphi, C#...

exe

DLL

4.1 Платформонезалежні ASP, JSP, PHP – 1997
через відповідні ISAPI -інтерпретатори
4.2 MS .NET –технологіі (конкуренція з Java) ⇒ ASP.NET 2005
4.2 Сервис-ориентированное программирование 2008

HTML

Слайд 16

Веб-розробка Веб-програмування – розділ програмування, орієнтований на розробку динамічних Internet-додатків Мови програмування Клієнтські Серверні

Веб-розробка

Веб-програмування – розділ програмування, орієнтований на розробку динамічних Internet-додатків
Мови програмування
Клієнтські
Серверні

Слайд 17

Веб-розробка Статичний Web-сайт є Web-сайтом, контент якого (HTML і графіка) завжди

Веб-розробка

Статичний Web-сайт є Web-сайтом, контент якого (HTML і графіка) завжди статичні

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

Статичні HTML-сторінки Клієнт Web-сервер – набір html-сторінок

Статичні HTML-сторінки

Клієнт

Web-сервер –
набір html-сторінок

Слайд 19

Веб-технології HTML – стандартна мова розмітки документів у всесвітній павутині XHTML

Веб-технології

HTML – стандартна мова розмітки документів у всесвітній павутині
XHTML – мова

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

Веб-технології JavaScript – це об'єктно-орієнтована скриптова мова програмування PHP – скриптова

Веб-технології

JavaScript – це об'єктно-орієнтована скриптова мова програмування
PHP – скриптова мова програмування

загального призначення, що інтенсивно застосовується для розробки веб-додатків
AJAX – підхід до побудови інтерактивних інтерфейсів користувача веб-додатків, що полягає в «фоновому» обміні даними браузера з веб-сервером
ASP.NET – технологія створення веб-додатків и веб-сервісів від компанії Microsoft
Perl, Python, Ruby – високорівневі динамічні мови загального призначення, інтерпретуються
Слайд 21

Веб-технології Adobe Flash і Microsoft Silverlight – мультимедійні платформи, що використовуються

Веб-технології

Adobe Flash і Microsoft Silverlight – мультимедійні платформи, що використовуються для

створення RIA-додатків, а також для інтеграції відеоматеріалів у веб-сторінки.
(Зараз втрачають значення з появою html5)
Rich Internet application (RIA, «багатий інтернет-додаток») - це додаток, якому доступна функціональність традиційних настільних додатків, що не підтримуються браузерами безпосередньо.
Слайд 22

Мета Web-дизайну Web-дизайном називається процес створення привабливих і корисних веб-сторінок. Його

Мета Web-дизайну

Web-дизайном називається процес створення привабливих і корисних веб-сторінок. Його частинами

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

Процес створення Web-сайтов. Планування, організація і оформлення Web- сайта набагато важливіше,ніж

Процес створення Web-сайтов.

Планування, організація і оформлення Web- сайта набагато важливіше,ніж робота

з НТМ. Проектування Web- сайта проходить наступні етапи:
Визначення мети Web-сайту (основні види призначення Web-сайтів – це налагодження ділових зв'язків, комерція, розваги, маркетинг, дослідження, обробка даних, технічна підтримка).
Визначення аудиторії Web-сайта
Визначення джерел фінансування Web-сайта. (Оплата виробляється за рахунок творця, стягування з відвідувача плати за перегляд сайта, використання посередника між власниками вузла і його відвідувачів)
Визначення дизайну сайта
Підбір матеріалів для Web-сайта.
Організація інформації на Web-сайте.
Розробка компонентів сайту.
Слайд 24

Поняття «HTML» HTML (HyperText Markup Language, Мова розмітки гіпертексту) – стандартна

Поняття «HTML»

HTML (HyperText Markup Language, Мова розмітки гіпертексту) – стандартна мова

розмітки документів у всесвітній павутині
Розроблена Тімом Бернерсом-Лі в 1991 року в CERN
Є розвитком мови SGML (стандартної узагальненої мови розмітки)
Слайд 25

Деяка інформація про «HTML» HTML-документ складається з тексту, який є інформаційним

Деяка інформація про «HTML»

HTML-документ складається з тексту, який є інформаційним вмістом

і спеціальних засобів мови HTML, — тегів розмітки, які визначають структуру і зовнішній вигляд документа при його відображенні браузером. Структура HTML-документа досить проста:
Опис документа починается з вказівки його типа (секція DOCTYPE).
Текст документа розміщується в тегу . Текст документа складається із заголовка і тіла, які виділяються відповідно тегами і .
У заголовку () вказують назва HTML-документа і інші параметри, які браузер використовуватиме при відображенні документа.
Тіло документа () — це та частина, в яку поміщається власне вміст HTML-документа. Тіло включає призначений для відображення
Слайд 26

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

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

Слайд 27

Структура HTML-документу HTML – це тегова мова розмітки документів Тег –

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

HTML – це тегова мова розмітки документів
Тег – це конструкція

вигляду:
“<“ щось “>”
Весь HTML-документ є вкладеним набором елементів розмітки.
Сінтаксіс тегу:
<тег параметр1="значення" параметр2="значення">...
Слайд 28

Заголовок документу Метатеги ( ) – зберігання інформації, призначеної для браузеров

Заголовок документу

Метатеги () – зберігання інформації, призначеної для браузеров і

пошукових систем

Заголовок сторінки () – назва сайту<br><title>Тестова сторінка
Посилання () – зв'язок із зовнішнім документом, або програмним додатком

Скрипти (
Слайд 29

Теги Мета-теги розміщують в блоці ... веб-сторінки. Вони не є обов'язковими

Теги

Мета-теги розміщують в блоці ... веб-сторінки. Вони не є

обов'язковими елементами, але можуть бути корисні.
Приклад опису метаданих:

— автор веб-документа
— дата останньої зміни веб-сторінки
— авторські права
— список ключових слів
— короткий опис (реферат)
— заборона на індексування
— тип і кодування
— управління кешуванням
— перенаправлення

Слайд 30

Теги - документ кешується браузером, але не кешується proxy-сервером. - повна

Теги

- документ кешується браузером, але не

кешується proxy-сервером.
- повна заборона на кеш (документ не кешується ні proxy-сервером, ні браузером).
- документ кешується, але не зберігається в архів.
- документ кешується, навіть якщо і не повинен, начебто, при звичайних обставинах.
- документ оновлюється браузером при параметрі max-age, в якому вказано, на скільки секунд кешується документ.
- то ж для проксі-сервера.
Слайд 31

Тегі: ... — контейнер гіпертексту ... — контейнер заголовка документа ...

Тегі:

... — контейнер гіпертексту
... — контейнер заголовка документа
... — назва документа

(те, що відображується в заголовку вікна браузеру)
... — контейнер тіла документа
...
— контейнер загального призначення (структурний блок)
... — заголовок N-ного рівня (N = 1...6)

...

— основний текст (абзац)
<а>... — гіперпосилання
— примусовий перехід рядка
Слайд 32

Тегі: ... — нумерований список ... — маркірований список ... —

Тегі:

    ...
— нумерований список
    ...
— маркірований список
  • ...
    • — елемент списку
    ...
    —

    контейнер таблиці
    ... — рядок таблиці
    ... — елемент таблиці
    ... — зображення
    ...
    — форма
    ... — відображення тексту курсивом
    ... — відображення тексту напівжирним шрифтом
    ... — виділення (курсивом)
    ... — посилення (напівжирним шрифтом)
    Слайд 33

    Параметри тегу BODY MARGINHEIGHT - визначає ширину (у пікселах) верхнього і

    Параметри тегу BODY

    MARGINHEIGHT - визначає ширину (у пікселах) верхнього і нижнього

    полів документу. Працює лише в браузерах Netscape.
    TOPMARGIN - визначає ширину (у пікселах) верхнього і нижнього полів документу. Працює лише в браузерах Internet Explorer.
    MARGINWIDTH - визначає ширину (у пікселах) лівого і правого полів документа. Працює лише в браузерах Netscape.
    LEFTMARGIN - визначає ширину (у пікселах) лівого і правого полів документа. Працює лише в браузерах Internet Explorer.
    BACKGROUND - визначає зображення для "заливки" фону. Значення задається у вигляді повного URL або імені файлу з картинкою у форматі gif або jpg.
    BGCOLOR - визначає колір фону документа.
    TEXT - визначає колір тексту в документі.
    LINK - визначає колір гіперпосилань в документі.
    ALINK - визначає колір підсвічування гіперпосилань у момент натиснення.
    VLINK - визначає колір гіперпосилань на документи, які ви вже проглянули.
    Слайд 34

    Тіло документу – блочний елемент – таблиця 191 Mountain Tire Tube

    Тіло документу

    – блочний елемент
    – таблиця
    cellspacing="0">




    191 Mountain Tire Tube

    Слайд 35

    Тіло документу ,…, – заголовки Посилання ( ) Головна

    Тіло документу

    ,…,

    – заголовки
    Посилання ()
    Головна


    Слайд 36

    Тіло документу – абзац Зображення ( ) Інші елементи: Сущності – &copy; (©)

    Тіло документу

    – абзац
    Зображення ()
    Картинка
    Інші елементи:


    Сущності

    – © (©)
    Слайд 37

    Параграфи Це відцентрований параграф. Текст розміщується в центрі вікна браузера А

    Параграфи

    Це відцентрований параграф.
    Текст розміщується в центрі вікна браузера


    А це

    параграф, що вирівняний з правого краю.


    Блок:
    ...Текст, таблиці, зображення. По центру.

    Слайд 38

    Шрифти ... Текст документу шрифтом 3 розміру ... Трохи збільшуємо шрифт

    Шрифти


    ...
    Текст документу шрифтом 3 розміру
    ...

    Трохи збільшуємо

    шрифт

    ...
    Продовжуємо шрифтом 3 розміру
    ...

    Вставка тексту збільшеним шрифтом Arial

    W Ω
    Слайд 39

    Теги

    Теги




    Слайд 40

    Кольори в HTML #CCFF80 rgb(204,255,128) darkolivegreen

    Кольори в HTML

    #CCFF80
    rgb(204,255,128)
    darkolivegreen

    Слайд 41

    Таблиця основних кольорів в HTML

    Таблиця основних кольорів в HTML

    Слайд 42

    Таблиця основних кольорів в HTML

    Таблиця основних кольорів в HTML

    Слайд 43

    Невпорядоковані списки Перший пункт списку Другий пункт списку Третій пункт списку Перший підпункт Другий підпункт

    Невпорядоковані списки

       
    • Перший пункт списку  
    • Другий пункт списку  

    Третій пункт списку

    • Перший підпункт
    • Другий підпункт



    Слайд 44

    Впорядковані списки Пункт два Пункт три Пункт чотири Пункт, відмічений буквою

    Впорядковані списки

       
    1. Пункт два  
    2. Пункт три  

    Пункт чотири

       
    1. Пункт, відмічений буквою B.  
    2. Пункт, відмічений буквою F.  
    3. Пункт, відмічений буквою G.

    Параметри:
    START - визначає перше число, з якого починається нумерація пунктів. (лише цілі числа)
    TYPE - визначає стиль нумерації пунктів. Може мати значення:
    "A" - заголовні букви A, B, C ... "a" - рядкові букви а, b, з ... "I" - великі римські числа I, II, III ... "i" - маленькі римські числа i, ii, iii ... "1" - арабські числа 1, 2, 3 ...
    За умовчанням використовується TYPE="1".
    Слайд 45

    Комментарі в HTML P { font-family: "Arial Cyr, Arial" } TD

    Комментарі в HTML


    Слайд 46

    XHTML XHTML (Extensible Hypertext Markup Language, розширена мова розмітки гіпертексту) –

    XHTML

    XHTML (Extensible Hypertext Markup Language, розширена мова розмітки гіпертексту) – мова

    розмітки веб-сторінок, за можливостями відповідає HTML, створена на базі XML
    XHTML 1.1 – 31 травня 2001 року
    Стандарт XHTML – перелік розходжень між HTML 4.01 и XHTML
    Слайд 47

    HTML 5 Підтримка геолокации — визначення місця розташування користувача на карті

    HTML 5

    Підтримка геолокации — визначення місця розташування користувача на карті і використання

    цієї інформації для обчислення маршруту його руху, виведення довколишніх магазинів, кінотеатрів, кафе і інших даних.
    Відтворення відеороликів.
    Відтворення аудіофайлів.
    Локальне сховище — дозволяє сайтам зберігати інформацію на локальному комп'ютері і звертатися до неї пізніше.
    Фонові обчислення — стандартний спосіб запуску JavaScript в браузері у фоновому режимі.
    Оффлайновиє застосування — сторінки, які можуть працювати при відключенні Інтернету.
    Малювання — усередині тега за допомогою JavaScript можна малювати фігури, лінії, створювати градієнти і трансформувати об'єкти на льоту.
    Нові елементи форм: для дати, часу, пошуку, чисел, вибору кольору і ін.
    - Предыдущая
    Маркетинг на базі стосунків Relationship marketing
    Следующая -
    Разработка сайтов

    Похожие презентации

    ЗРИТЕЛЬНЫЕ ДИКТАНТЫ Презентацию подготовила : Трубицина А.В. учитель начальных классов ГОУ СОШ №341 г.Москва
    Презентация Развитие управленческой мысли в России
    Механизм политической власти Подготовили Студенты ЮФ-3 Группы Ю-101 Шевцова Екатерина И Меженько Юлия
    Анализ результатов ОГЭ-2018 по обществознанию
    Commonwealth Games
    скфо банки
    Среда обитания и её факторы: абиотические, биотические и антропогенные. Аутэкология
    Не обманывайтесь, а пребывайте в стойкости
    ИТ_1_ИИ
    Национальный состав населения Томской области
    ОТЕЧЕСТВЕННАЯ ВОЙНА 1812 ГОДА.
    Презентация____
    Визуальная диагностика рахита Выполнила 307 ОМ Қойшыманова. А Проверила Қожахметова .Ж.Ж
    Презентация Историко-цивилизационная концепция культуры А. Тойнби
    演示文稿 新建
    Презентация ПОНЯТИЕ ЛИНЕЙНОЙ, НЕОТРИЦАТЕЛЬНОЙ И ВЫПУКЛОЙ КОМБИНАЦИИ ТОЧЕК ПЛОСКОСТИ N-МЕРНОГО ПРОСТРАНСТВА. ПОНЯТИЕ РАССТОЯНИЯ. Н
    Методы выделения сигнала из смеси с шумами
    Курсы по тестированию IT LABS. Баг. (Урок 3)
    Система классификации пород собак
    Нормативная база ценообразования в строительстве
    Христианство как фактор цивилизационного развития
    Шлюпочное устройство
    Классы. Базовый класс
    Слагаемые успеха в бизнесе. Автор: Шуман Т. А.
    Гиподинамия - снижение нагрузки на мышцы и ограничение общей двигательной активности организма
    Сөзжасам жөнінде жалпы түсінік. Морфемдік талдау және орфография
    Презентация по алгебре Алгебраические дроби
    ПОМЕХОУСТОЙЧИВЫЕ КОДЫ
    Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
    Обратная связь
    Для правообладателей
    Email: Нажмите что бы посмотреть