Сучасні веб-технологі - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Сучасні веб-технологі. Доклад-сообщение содержит 48 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Сучасні веб-технології Лекція №1

Слайд 2

Описание слайда:

Термін «Інтернет» Інтернет (Internet, сокр. від Interconnected Networks – об'єднані мережі) – глобальна телекомунікаційна мережа інформаційних і обчислювальних ресурсів

Слайд 3

Описание слайда:

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

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

URL URL (Uniform Resource Locator, RFC 1738) - уніфікований локатор (покажчик) ресурсів, стандартизований спосіб запису адреси ресурсу в WWW і мережах Інтернет. Адреса URL має гнучку структуру для максимально точної вказівки на місцезнаходження ресурсів в мережі. Для представлення адреси використовується обмежений набір символів ASCII|.

Слайд 8

Описание слайда:

Стандарт URL

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

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

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

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

Слайд 14

Описание слайда:

Apache - вільний web-сервер з відкритим вихідним кодом, поширюється під сумісною з GPL ліцензією. Apache вже багато років є лідером по поширеності в Усесвітній павутині через свою надійність, гнучкість, масштабованість і безпеку. 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

Описание слайда:

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

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

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

Слайд 19

Описание слайда:

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

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

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

Слайд 22

Описание слайда:

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

Слайд 23

Описание слайда:

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

Слайд 24

Описание слайда:

Поняття «HTML» HTML (HyperText Markup Language, Мова розмітки гіпертексту) – стандартна мова розмітки документів у всесвітній павутині Розроблена Тімом Бернерсом-Лі в 1991 року в CERN Є розвитком мови SGML (стандартної узагальненої мови розмітки)

Слайд 25

Описание слайда:

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

Слайд 26

Описание слайда:

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

Слайд 27

Описание слайда:

Структура HTML-документу HTML – це тегова мова розмітки документів Тег – це конструкція вигляду: “” Весь HTML-документ є вкладеним набором елементів розмітки. Сінтаксіс тегу: ...

Слайд 28

Описание слайда:

Заголовок документу Метатеги () – зберігання інформації, призначеної для браузеров і пошукових систем Заголовок сторінки () – назва сайту Тестова сторінка Посилання () – зв'язок із зовнішнім документом, або програмним додатком Скрипти () – опис скриптів

Слайд 29

Описание слайда:

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

Слайд 30

Описание слайда:

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

Слайд 31

Описание слайда:

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

Слайд 32

Описание слайда:

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

Слайд 33

Описание слайда:

Параметри тегу 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

Слайд 35

Описание слайда:

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

Слайд 36

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

Описание слайда:

Слайд 37

Описание слайда:

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

Слайд 38

Описание слайда:

Шрифти ... Текст документу шрифтом 3 розміру ... Трохи збільшуємо шрифт ... Продовжуємо шрифтом 3 розміру ... Вставка тексту збільшеним шрифтом Arial W 

Слайд 39

Описание слайда:

Теги

Слайд 40

Описание слайда:

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

Слайд 41

Описание слайда:

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

Слайд 42

Описание слайда:

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

Слайд 43

Описание слайда:

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

Слайд 44

Описание слайда:

Впорядковані списки Пункт два Пункт три Пункт чотири Пункт, відмічений буквою B. Пункт, відмічений буквою F. Пункт, відмічений буквою 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

Слайд 46

Описание слайда:

XHTML XHTML (Extensible Hypertext Markup Language, розширена мова розмітки гіпертексту) – мова розмітки веб-сторінок, за можливостями відповідає HTML, створена на базі XML XHTML 1.1 – 31 травня 2001 року Стандарт XHTML – перелік розходжень між HTML 4.01 и XHTML

Слайд 47

Описание слайда:

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