ВойтиПопробовать бесплатно

Презентация к уроку на тему:

Веб-технологии и разработка сайтов

Презентация о веб-технологиях: HTML, CSS, JavaScript, клиент-серверном взаимодействии, динамических страницах, базах данных, API, безопасности и облачном хранении. Подходит для 9–11 классов на урок информатики; включает схемы архитектуры, этапы HTTP-запроса, сравнение типов хранения и этапов разработки сайтов.

Информатика11 класс18 слайдов
Работа браузера и веб-сервера

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Роль веб-браузера
Браузер — это сложное программное обеспечение, которое интерпретирует код , и в визуальный интерфейс. Его основные задачи: рендеринг (отрисовка) страницы, выполнение скриптов, кэширование данных для ускорения загрузки и обеспечение безопасности пользователя через политику одинакового источника (Same-Origin Policy).

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Статические vs Динамические страницы
Статические страницы
Содержимое страницы хранится в готовом виде в -файлах. Все пользователи видят одно и то же. Быстрая загрузка, но сложность в обновлении больших объемов данных.
Динамические страницы
Содержимое формируется в момент запроса. Используются шаблоны и данные из баз. Позволяют создавать личные кабинеты, ленты новостей и поисковую выдачу.

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Генерация динамического контента
  • Процесс создания страницы «на лету»:
  • — Запрос поступает на серверный скрипт.
  • — Скрипт обращается к базе данных ().
  • — Данные вставляются в -шаблон.
  • — Готовый код отправляется пользователю.

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Стек разработки интернет-приложений
Frontend
Технологии, работающие в браузере: React, Vue, Angular, стандартные HTML/CSS.
Backend
Серверные языки: Python (Django), JavaScript (Node.js), PHP, Java, Go.
Database
Хранение информации: MySQL, PostgreSQL, MongoDB, Redis.
DevOps
Развертывание и поддержка: Docker, Nginx, облачные провайдеры.

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Этапы разработки веб-сайта
Этап 1
Проектирование: создание ТЗ, прототипирование интерфейса (UX).
Этап 2
Дизайн и верстка: создание макетов и перевод их в HTML/CSS.
Этап 3
Программирование: разработка серверной части и интеграция с БД.
Этап 4
Тестирование и деплой: проверка ошибок и запуск на хостинге.

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Frontend-разработка сегодня
  • Адаптивность (Flexbox, Grid) для корректного отображения на мобильных.
  • Использование препроцессоров () для упрощения написания стилей.
  • Сборка проекта через Webpack или Vite.
  • Применение компонентов для повторного использования кода.

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Backend-разработка и API
Бэкенд отвечает за бизнес-логику приложения.

Важнейшим элементом является (Application Programming Interface) — интерфейс, позволяющий фронтенду и бэкенду обмениваться данными, обычно в формате . Это позволяет разделять интерфейс и данные.
Слайд 13 «Backend-разработка и API» — иллюстрация к презентации «Веб-технологии и разработка сайтов» по информатике для 11 класса

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Сравнение типов хранения данных
ХарактеристикаЛокальное хранениеСетевое (Облачное)
ДоступностьТолько с одного устройстваС любого устройства через интернет
НадежностьРиск поломки носителяРезервное копирование провайдером
МасштабируемостьОграничена объемом дискаПрактически не ограничена
БезопасностьФизический контрольЗависит от шифрования и провайдера

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Сетевое хранение данных
Сетевое хранение (Cloud Storage) позволяет сайтам обрабатывать огромные массивы информации без привязки к конкретному серверу. Технологии объектного хранения (например, Amazon S3) используются для медиафайлов, а распределенные базы данных обеспечивают мгновенный доступ к информации пользователям по всему миру.

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Безопасность веб-приложений
  • Использование протокола для шифрования трафика.
  • Защита от -инъекций через фильтрацию входных данных.
  • Предотвращение -атак (межсайтовый скриптинг).
  • Регулярное обновление серверного ПО и библиотек.

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Итоги занятия
  • Веб-сайт — это сложная система из HTML, CSS и программной логики.
  • Взаимодействие браузера и сервера строится на HTTP-запросах.
  • Динамические страницы формируются на сервере с использованием баз данных.
  • Современная разработка разделена на Frontend и Backend.
  • Сетевое хранение данных обеспечивает доступность и масштабируемость ресурсов.

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

Спасибо за внимание! Вопросы?

Посмотрите презентацию целиком

Открыто 5 из 18 слайдов — зарегистрируйтесь и скачайте в PDF или PPTX

1 / 18
Текст презентации

  1. Слайд 1. Веб-технологии и разработка сайтов

    От основ HTML до динамических систем и сетевого хранения данных

  2. Слайд 2. Что такое веб-сайт?

    Веб-сайт — это совокупность логически связанных между собой веб-страниц, размещённых в компьютерной сети под общим адресом (доменным именем).

    Основные компоненты:

    — Контент (текст, медиа)

    — Дизайн (визуальное оформление)

    — Функционал (интерактивность)

  3. Слайд 3. Три кита веб-страницы

    (HyperText Markup Language) — разметка элементов: заголовков, абзацев, списков и ссылок.

    (Cascading Style Sheets) — описание внешнего вида: цвета, шрифты, отступы и адаптивность.

    — программирование логики на стороне клиента: анимации, валидация форм, запросы.

  4. Слайд 4. Клиент-серверная архитектура

    Взаимодействие в вебе строится на обмене данными между двумя узлами:

    — Клиент (Браузер): запрашивает ресурс.

    — Сервер: обрабатывает запрос и возвращает данные.

    — Протокол : правила, по которым происходит этот обмен.

  5. Слайд 5. Жизненный цикл HTTP-запроса

    1. Установление соединения через (поиск IP-адреса сервера).

    2. Отправка GET или POST запроса с заголовками.

    3. Обработка на сервере (поиск файла или генерация кода).

    4. Получение статуса ответа (например, 200 OK или 404 Not Found).

  6. Слайд 6. Работа браузера и веб-сервера

  7. Слайд 7. Роль веб-браузера

    Браузер — это сложное программное обеспечение, которое интерпретирует код , и в визуальный интерфейс. Его основные задачи: рендеринг (отрисовка) страницы, выполнение скриптов, кэширование данных для ускорения загрузки и обеспечение безопасности пользователя через политику одинакового источника (Same-Origin Policy).

  8. Слайд 8. Статические vs Динамические страницы

    Содержимое страницы хранится в готовом виде в -файлах. Все пользователи видят одно и то же. Быстрая загрузка, но сложность в обновлении больших объемов данных.

    Содержимое формируется в момент запроса. Используются шаблоны и данные из баз. Позволяют создавать личные кабинеты, ленты новостей и поисковую выдачу.

  9. Слайд 9. Генерация динамического контента

    Процесс создания страницы «на лету»:

    — Запрос поступает на серверный скрипт.

    — Скрипт обращается к базе данных ().

    — Данные вставляются в -шаблон.

    — Готовый код отправляется пользователю.

  10. Слайд 10. Стек разработки интернет-приложений

    Технологии, работающие в браузере: React, Vue, Angular, стандартные HTML/CSS.

    Серверные языки: Python (Django), JavaScript (Node.js), PHP, Java, Go.

    Хранение информации: MySQL, PostgreSQL, MongoDB, Redis.

    Развертывание и поддержка: Docker, Nginx, облачные провайдеры.

  11. Слайд 11. Этапы разработки веб-сайта

    Этап 1

    Этап 2

    Этап 3

    Этап 4

    Проектирование: создание ТЗ, прототипирование интерфейса (UX).

    Дизайн и верстка: создание макетов и перевод их в HTML/CSS.

    Программирование: разработка серверной части и интеграция с БД.

    Тестирование и деплой: проверка ошибок и запуск на хостинге.

  12. Слайд 12. Frontend-разработка сегодня

    Адаптивность (Flexbox, Grid) для корректного отображения на мобильных.

    Использование препроцессоров () для упрощения написания стилей.

    Сборка проекта через Webpack или Vite.

    Применение компонентов для повторного использования кода.

  13. Слайд 13. Backend-разработка и API

    Бэкенд отвечает за бизнес-логику приложения.

    Важнейшим элементом является (Application Programming Interface) — интерфейс, позволяющий фронтенду и бэкенду обмениваться данными, обычно в формате . Это позволяет разделять интерфейс и данные.

  14. Слайд 14. Сравнение типов хранения данных

  15. Слайд 15. Сетевое хранение данных

    Сетевое хранение (Cloud Storage) позволяет сайтам обрабатывать огромные массивы информации без привязки к конкретному серверу. Технологии объектного хранения (например, Amazon S3) используются для медиафайлов, а распределенные базы данных обеспечивают мгновенный доступ к информации пользователям по всему миру.

  16. Слайд 16. Безопасность веб-приложений

    Использование протокола для шифрования трафика.

    Защита от -инъекций через фильтрацию входных данных.

    Предотвращение -атак (межсайтовый скриптинг).

    Регулярное обновление серверного ПО и библиотек.

  17. Слайд 17. Итоги занятия

    Веб-сайт — это сложная система из HTML, CSS и программной логики.

    Взаимодействие браузера и сервера строится на HTTP-запросах.

    Динамические страницы формируются на сервере с использованием баз данных.

    Современная разработка разделена на Frontend и Backend.

    Сетевое хранение данных обеспечивает доступность и масштабируемость ресурсов.

  18. Слайд 18. Спасибо за внимание! Вопросы?

Создайте уникальную презентацию по своей теме

  • Любая тема, любой класс
  • Иллюстрации к каждому слайду
  • 18 стилей оформления
  • Таблицы, схемы и диаграммы
  • Экспорт в PDF и PPTX
  • Готово за 1 минуту

Создайте дополнительно

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

Другие темы по информатике для 11 класса

Рабочий стол Компас-3DКак устроен ИнтернетИнформация и мы: от теории к практикеАлгоритмы сжатия данныхАлгоритмы: от входа к выходуЦифровизация и цифровая экономикаВеб-сайт и сетевые технологииКомпьютерная графикаРазвитие языков программированияОбновление информационных системРазработка сценария внедрения программного продуктаОперационная система: Сердце компьютера

Чем удобны презентации Нейрум

  • Слайды с иллюстрациямиК каждому слайду — картинка, таблица или схема по теме. Открыли на доске и повели урок, без поиска картинок.
  • PDF или PPTXСкачайте презентацию как есть или откройте в PowerPoint и доработайте под свой класс.
  • Своя презентация за минутуНе нашли нужную? ИИ-конструктор соберёт презентацию по вашей теме, классу и количеству слайдов.

Вопросы и ответы

Как скачать презентацию «Веб-технологии и разработка сайтов»?

Зарегистрируйтесь бесплатно — презентация «Веб-технологии и разработка сайтов» сохранится в личном кабинете, откуда её можно скачать в PDF или PPTX и показать классу.

Сколько слайдов в презентации «Веб-технологии и разработка сайтов»?

В презентации 18 слайдов по теме «Веб-технологии и разработка сайтов» для урока по информатике в 11 классе: заголовки, текст, иллюстрации, таблицы и схемы. Здесь открыты первые пять — остальные после регистрации.

Соответствует ли презентация «Веб-технологии и разработка сайтов» ФГОС?

Да, слайды по теме «Веб-технологии и разработка сайтов» построены по школьной программе по информатике для 11 класса по ФГОС.

Можно ли сделать похожую презентацию по теме «Веб-технологии и разработка сайтов»?

Да. ИИ-конструктор Нейрума соберёт свою презентацию по теме «Веб-технологии и разработка сайтов» под ваш класс и нужное число слайдов — за минуту.

Как получить рабочий лист и план урока к теме «Веб-технологии и разработка сайтов»?

В Нейруме к теме «Веб-технологии и разработка сайтов» можно собрать рабочий лист с заданиями и ответами и план урока по ФГОС для 11 класса — в конструкторе после бесплатной регистрации.

Можно ли изменить слайды под свой класс?

Да. После регистрации презентация «Веб-технологии и разработка сайтов» открывается в редакторе: текст, картинки и порядок слайдов можно поменять или перегенерировать.