2.20M

Категории:

Интернет

Информатика

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

Уязвимости веб-приложений. Лекция 6. Программно-аппаратные средства защиты информации

Современные веб-приложения. Лекция 4. Программно-аппаратные средства защиты информации

Технологии разработки интернет-систем

Основы web-технологий. Технологии создания web-сайтов

Современные веб-технологии

Основы web - технологий. Технологии создания web - сайтов

Веб - технология. Технология создания интернет ресурсов

Методы и средства создания и сопровождения сайта

Технологии разработки статических веб-страниц. Язык гипертекстовой разметки HTML

Интернет-технологии. HTML5, CSS, JavaScript

Технологии веба. Лекция 5. Программно-аппаратные средства защиты информации

1. Технологии веба

Лекция 5.
Программно-аппаратные средства защиты информации

2. 2//Подпишите блоки URL

3. 3//Подпишите блоки URL

4. 4//Методы запросов

• Перечислите методы HTTP-запросов

5. 5//Методы запросов

• Перечислите методы HTTP-запросов

6. 6// Перечислите отличия веб-приложения

• Что такое веб-приложение, чем отличается от веб-сервера?

7. 7// Перечислите отличия веб-приложения

• Что такое веб-приложение, чем отличается от веб-сервера?
WEB Application Server:
- Реализует доступ к СУБД
- Реализует возможность исполнять код на ЯП (бизнес-логика)
- Работает с динамическим контентом

8. 8// Cookie

• Что такое Cookie в контексте веб-приложения? Для чего могут
быть использованы (3 варианта)?

9. 9//Cookie

• Cookie — небольшой фрагмент данных, отправленный вебсервером и хранимый на компьютере пользователя.
Аутентификация
пользователей
Хранение
предпочтений и
настроек
пользователя
Отслеживания
состояния сеанса
доступа
пользователя

10. 10//HTML

• HTML - стандартизированный язык разметки документов для
просмотра веб-страниц в браузере.

11. 11//Разметка текста

12. 12//Разметка текста

13. 13//Разметка текста

14. 14//CSS (Каскадная таблица стилей)

• CSS – язык для оформления HTMLдокументов,
помогает
улучшить
внешний вид страницы, написанной с
использованием
языка
разметки
(например, HTML, XHTML)
• Также может применяться к любым XMLдокументам, например к SVG или XUL.
• Структура CSS называется набором
правил и состоит из четырёх частей.

15. 15//Структура CSS

• Селектор (Selector).
• Имя HTML-элемента в начале набора
правил. Он выбирает элемент(ы) для
применения стиля (в данном случае,
элементы p ). Для стилизации другого
элемента, просто измените селектор.
• Объявление (Declaration).
• Единственное правило (например, color:
red;) указывает, какие из свойств элемента
вы хотите стилизовать.

16. 16//Структура CSS

• Свойства (Properties).
• Способы, которыми вы можете стилизовать
определённый
HTML-элемент
(у
нас color является свойством для
элементов <p>).
• Значение свойства (Property value).
• Справа от свойства, после двоеточия, у нас
есть
значение
свойства,
которое выбирает одно из множества
возможных признаков для данного
свойства (есть множество значений color,
помимо red).

17. 17//Структура CSS

• Стили CSS могут быть подключены или <!DOCTYPE html>
внедрены в описываемый ими веб- <html>
документ несколькими способами:
<head>
<meta charset="utf-8" />
• когда описание стилей находится в
<title>HTML Document</title>
отдельном файле, оно может быть
<link rel="stylesheet" type= " text/css“
подключено к документу посредством
элемента
<link>,
включённого
в
href="style.css">
элемент <head>
</head>
• когда стили описаны внутри документа,
<body>
они
могут
быть
включены
в
<p>
элемент <style>, который включается в
элемент <head>
<b> Этот текст будет полужирным,
<i>а этот — ещё и курсивным</i>. </b>
• когда стили описаны в теле документа,
они могут располагаться в атрибутах
</p>
отдельного элемента
</body>
</html>

18. 18//Структура CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Document</title>
<style>
body {
color: red;
}
</style>
</head>
<body>
<p>
<b> Этот текст будет полужирным,
<i>а этот — ещё и курсивным</i>. </b>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Document</title>
</head>
<body>
<p style="font-size: 20px; color: green; font-family:
arial, helvetice, sans-serif" >
<b> Этот текст будет полужирным,
<i>а этот — ещё и курсивным</i>. </b>
</p>
</body>
</html>

19. 19//CSS-фреймворки

• CSS-фреймворк - это набор предварительно написанного CSSкода, который предоставляет различные стили, компоненты и
шаблоны для создания веб-страниц и веб-приложений.
Из преимуществ:
Экономия времени
Согласованный дизайн
Адаптивность
Кроссбраузерность

20. 20//Bootstrap

• Сетки
• Шаблоны
• Типографика
• Медиа
• Таблицы
• Формы
• Навигация
• Алерты

21. 21//XML

• XML (eXtensible Markup Language) —
расширяемый язык разметки.
• XML разрабатывался как язык с
простым формальным синтаксисом,
удобный для создания и обработки
документов как программами, так и
человеком, с акцентом на
использование в Интернете.
• Язык называется расширяемым,
поскольку он не фиксирует разметку,
используемую в документах:
разработчик ограничен лишь
синтаксическими правилами языка.

22. 22//AJAX

• Логичное продолжение и основа
современных веб-приложений
• AJAX Asynchronous JavaScript &
XML – специальная технология
взаимодействия с сервером,
которая не требует выполнения
перезагрузки.

23. 23//JSON

• Обозначение объектов JavaScript
(JSON - JavaScript Object
Notation) - стандартный
текстовый формат для
представления
структурированных данных на
основе синтаксиса объекта
JavaScript.

24. 24//JS (JavaScript)

• JS - язык, придуманный специально
для
создания
интерактивных
слайдов.
• Код на языке JS называют скриптом.
Его сохраняют в отдельный файл
с расширением js (например,
myScript.js), а чтобы запустить,
подключают этот файл на страницу.
• В HTML для добавления JavaScript
есть специальный тег:
<script src="адрес_файла"></script>

25. 25//JS (JavaScript)

Скрипт обычно подключают в самом
конце страницы, перед закрывающим
тегом </body>. Например:
<body>

<script src="app.js"></script>
</body>
Var -переменные обладают свойством
хойстинга (поднятия)
let и const имеют блочную видимость и
не поднимаются
var name = 'Bob’;
name = 'Steve';

26. 26//Условия, события и функции

27. 27//Один из популярных языков веба PHP

• Скрипт PHP содержит HTML с встроенным кодом, сам код PHP
определяется начальным тегом <?php и конечным тегом ?>
• PHP — это один из самых популярных языков программирования для
веб-разработки. Его история начинается в середине 90-х годов, и с тех
пор он прошел долгий путь эволюции и развития.
• Многие популярные системы управления контентом (CMS), такие как
WordPress, Joomla и Drupal, построены на PHP. Эти системы позволяют
разработчикам быстро и легко создавать и управлять веб-сайтами

28. 28//Возможности PHP

• Создание скриптов для
выполнения на стороне сервера.
• Создание скриптов для
выполнения в командной строке.
• Создание оконных приложений,
выполняющихся на стороне
клиента.

29. 29//Синтаксис PHP

• Упрощай и ускоряй – девиз PHP
• Обе строки выполнятся
одинаково
• PHP выполняет код вне
зависимости от наличия ошибок
в нем

30. 30//Синтаксис PHP

Определение (тело)
пользовательской
функции задаёт
локальную область
видимости данной
функции. Любая
используемая внутри
функции переменная по
умолчанию ограничена
локальной областью
видимости функции.

31. 31//LAMP

Базовый набор
технологий для вебсервера:
• Linux - ОС
• Apache – веб-сервер
• MySQL – база данных
• PHP – язык разработки
веб-сайта

32. 32//Работа LAMP

33. 33//Работа LAMP

34. 34//Базы данных

• Реляционные базы данных (MSSQL, Oracle DB, MySQL, SQLite, YDB,
Postgres Pro)
• Объектно-ориентированные базы данных (InterSystems Caché,
DB4o)
• Документо-ориентированные базы данных (MongoDB, CouchDB,
Енисей, YDB)
• Хранилища данных (Cassandra, Hbase)
• Базы данных NoSQL (Splunk, Elasticsearch)
• Графовые базы данных (Neo4j, GraphDB)

35. 35//Преимущества NoSQL

36. 36//Тип баз NoSQL

NoSQL
Хранилища
«Ключзначение»
Хранилища
документов
Графовые
базы
данных
Колоночные
БД

37. 37//Преимущества NoSQL

• Гибкость
• Масштабируемость
• Функционал
• Высокая производительность
Из недостатков:
• Неэффективность при сложных запросах
• Высокая привязка к СУБД
• Сложность в поддержке

38. 38//СУБД

39. 39//Назначение SQL

• Создание баз данных и таблиц
• Вставка, модификация, удаление данных из таблиц
• Выполнение простых и сложных запросов
DDL (Data Definition Language)
DML (Data Manipulation Language
DCL (Data Control Language)
CREATE
ALTER
DROP
SELECT
INSERT
UPDATE
DELETE
GRANT
REVOKE
DENY
Пример запроса:
SELECT Name, Surname FROM MyClass

40. 40//Кэширование

• Кэширование – важная технология для работы веб-сайта и всего
веба в целом, направленная на сокращение объема веб-трафика
• Cache - это высокоскоростной уровень хранения, на котором
требуемый набор данных, как правило, временного характера.
• Служба кэширования предоставляет простое хранилище данных
в формате ключ-значение
• Приложение может кэшировать результаты запроса в базы
данных, результаты обращения к внешним службам, HTML для
заданного URL-адреса и многое другое.

41. 41//Кэширование

42. 42//Robots.txt

• Adygnet.ru/robots.txt

43. 43//.htaccess

1. Настройка работы интерпретатора PHP
2. Ограничение доступа
3. Выбор кодировки символов
4. Сложные URL -> простые
5. Сложный редирект

44. 44//sitemap

• Sitemap называют картой сайта – она помогает ориентироваться
поисковым роботам.

45. 45//Контрольные вопросы

• Из чего может состоять современный веб-сайт?
• Что такое СУБД?
• Как расшифровывается аббревиатура LAMP?
• Для чего нужно кэширование?

46. 46//Полезные ссылки

Обучающие порталы веб-разработке
• HTMLacademy
• https://htmlacademy.ru/
• W3schools
• https://www.w3schools.com/html/
Типы СУБД
• https://habr.com/ru/companies/amvera/articles/754702/

English Русский Правила