🗊Презентация Лекция 2. Основы разработки Web-приложений

Категория: Образование
Нажмите для полного просмотра!
Лекция 2. Основы разработки Web-приложений, слайд №1Лекция 2. Основы разработки Web-приложений, слайд №2Лекция 2. Основы разработки Web-приложений, слайд №3Лекция 2. Основы разработки Web-приложений, слайд №4Лекция 2. Основы разработки Web-приложений, слайд №5Лекция 2. Основы разработки Web-приложений, слайд №6Лекция 2. Основы разработки Web-приложений, слайд №7Лекция 2. Основы разработки Web-приложений, слайд №8Лекция 2. Основы разработки Web-приложений, слайд №9Лекция 2. Основы разработки Web-приложений, слайд №10Лекция 2. Основы разработки Web-приложений, слайд №11Лекция 2. Основы разработки Web-приложений, слайд №12Лекция 2. Основы разработки Web-приложений, слайд №13Лекция 2. Основы разработки Web-приложений, слайд №14Лекция 2. Основы разработки Web-приложений, слайд №15Лекция 2. Основы разработки Web-приложений, слайд №16Лекция 2. Основы разработки Web-приложений, слайд №17Лекция 2. Основы разработки Web-приложений, слайд №18Лекция 2. Основы разработки Web-приложений, слайд №19Лекция 2. Основы разработки Web-приложений, слайд №20Лекция 2. Основы разработки Web-приложений, слайд №21Лекция 2. Основы разработки Web-приложений, слайд №22Лекция 2. Основы разработки Web-приложений, слайд №23Лекция 2. Основы разработки Web-приложений, слайд №24Лекция 2. Основы разработки Web-приложений, слайд №25Лекция 2. Основы разработки Web-приложений, слайд №26Лекция 2. Основы разработки Web-приложений, слайд №27Лекция 2. Основы разработки Web-приложений, слайд №28Лекция 2. Основы разработки Web-приложений, слайд №29Лекция 2. Основы разработки Web-приложений, слайд №30Лекция 2. Основы разработки Web-приложений, слайд №31Лекция 2. Основы разработки Web-приложений, слайд №32Лекция 2. Основы разработки Web-приложений, слайд №33Лекция 2. Основы разработки Web-приложений, слайд №34Лекция 2. Основы разработки Web-приложений, слайд №35Лекция 2. Основы разработки Web-приложений, слайд №36Лекция 2. Основы разработки Web-приложений, слайд №37Лекция 2. Основы разработки Web-приложений, слайд №38Лекция 2. Основы разработки Web-приложений, слайд №39Лекция 2. Основы разработки Web-приложений, слайд №40Лекция 2. Основы разработки Web-приложений, слайд №41Лекция 2. Основы разработки Web-приложений, слайд №42Лекция 2. Основы разработки Web-приложений, слайд №43Лекция 2. Основы разработки Web-приложений, слайд №44Лекция 2. Основы разработки Web-приложений, слайд №45Лекция 2. Основы разработки Web-приложений, слайд №46Лекция 2. Основы разработки Web-приложений, слайд №47Лекция 2. Основы разработки Web-приложений, слайд №48Лекция 2. Основы разработки Web-приложений, слайд №49Лекция 2. Основы разработки Web-приложений, слайд №50Лекция 2. Основы разработки Web-приложений, слайд №51Лекция 2. Основы разработки Web-приложений, слайд №52Лекция 2. Основы разработки Web-приложений, слайд №53Лекция 2. Основы разработки Web-приложений, слайд №54Лекция 2. Основы разработки Web-приложений, слайд №55Лекция 2. Основы разработки Web-приложений, слайд №56Лекция 2. Основы разработки Web-приложений, слайд №57Лекция 2. Основы разработки Web-приложений, слайд №58Лекция 2. Основы разработки Web-приложений, слайд №59Лекция 2. Основы разработки Web-приложений, слайд №60Лекция 2. Основы разработки Web-приложений, слайд №61Лекция 2. Основы разработки Web-приложений, слайд №62Лекция 2. Основы разработки Web-приложений, слайд №63Лекция 2. Основы разработки Web-приложений, слайд №64Лекция 2. Основы разработки Web-приложений, слайд №65Лекция 2. Основы разработки Web-приложений, слайд №66Лекция 2. Основы разработки Web-приложений, слайд №67Лекция 2. Основы разработки Web-приложений, слайд №68Лекция 2. Основы разработки Web-приложений, слайд №69Лекция 2. Основы разработки Web-приложений, слайд №70Лекция 2. Основы разработки Web-приложений, слайд №71Лекция 2. Основы разработки Web-приложений, слайд №72Лекция 2. Основы разработки Web-приложений, слайд №73Лекция 2. Основы разработки Web-приложений, слайд №74Лекция 2. Основы разработки Web-приложений, слайд №75Лекция 2. Основы разработки Web-приложений, слайд №76Лекция 2. Основы разработки Web-приложений, слайд №77Лекция 2. Основы разработки Web-приложений, слайд №78Лекция 2. Основы разработки Web-приложений, слайд №79Лекция 2. Основы разработки Web-приложений, слайд №80Лекция 2. Основы разработки Web-приложений, слайд №81Лекция 2. Основы разработки Web-приложений, слайд №82Лекция 2. Основы разработки Web-приложений, слайд №83Лекция 2. Основы разработки Web-приложений, слайд №84Лекция 2. Основы разработки Web-приложений, слайд №85
Скачать

Содержание ▲

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

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

Слайд 1


Основы разработки Web-приложений
Описание слайда:
Основы разработки Web-приложений

Слайд 2


Web-приложение – это приложение разработанное по архитектуре «клиент-сервер», использующее в качестве клиента Веб-браузер и работающее с использованием протокола HTTP на стороне Веб-сервера.
Описание слайда:
Web-приложение – это приложение разработанное по архитектуре «клиент-сервер», использующее в качестве клиента Веб-браузер и работающее с использованием протокола HTTP на стороне Веб-сервера.

Слайд 3


Примеры web-приложений Поисковые системы (google.ru), Видео-коллекции (youtube.com), Новостные системы (lenta.ru), Бизнес-магазины (ozon.ru); Социальные сети (facebook.com) и другие.
Описание слайда:
Примеры web-приложений Поисковые системы (google.ru), Видео-коллекции (youtube.com), Новостные системы (lenta.ru), Бизнес-магазины (ozon.ru); Социальные сети (facebook.com) и другие.

Слайд 4


Обзор инструментальных средств разработки Web-приложения визуальные; не визуальные.
Описание слайда:
Обзор инструментальных средств разработки Web-приложения визуальные; не визуальные.

Слайд 5


Текстовые редакторы. Предполагают прямую работу с кодом, требуют знание языков. Notepad++; SublimeText; WebStorm; Brackets и другие.
Описание слайда:
Текстовые редакторы. Предполагают прямую работу с кодом, требуют знание языков. Notepad++; SublimeText; WebStorm; Brackets и другие.

Слайд 6


Специальные программы-конструкторы Автоматизируют процесс разработки, позволяют визуально реализовать качественный проект без знания HTML и других языков. Mobirise; WebSite X5 Professional; MS Front Page; DreamWeaver; Macromedia HomeSite.
Описание слайда:
Специальные программы-конструкторы Автоматизируют процесс разработки, позволяют визуально реализовать качественный проект без знания HTML и других языков. Mobirise; WebSite X5 Professional; MS Front Page; DreamWeaver; Macromedia HomeSite.

Слайд 7


Недостаток: неэффективный код, включающий множество лишних тегов. Существуют off-line редакторы и on-line (конструкторы сайтов).
Описание слайда:
Недостаток: неэффективный код, включающий множество лишних тегов. Существуют off-line редакторы и on-line (конструкторы сайтов).

Слайд 8


Конструктор сайтов – это система из набора инструментов, которая позволяет создавать сайты онлайн и администрировать их без каких-либо специализированных знаний. Wix; A5; uKit.
Описание слайда:
Конструктор сайтов – это система из набора инструментов, которая позволяет создавать сайты онлайн и администрировать их без каких-либо специализированных знаний. Wix; A5; uKit.

Слайд 9


Этапы разработки Web-сайта 1. Определение целей сайта и требований к нему. 2. Разработка дизайн-макета. 3. Верстка дизайн-макета. 4. Программирование, установка и настройка CMS. 5. Наполнение контентом и тестирование. 6. Публикация сайта в интернете. 7. Продвижение и оптимизация сайта. 8. Администрирование (поддержка) сайта.
Описание слайда:
Этапы разработки Web-сайта 1. Определение целей сайта и требований к нему. 2. Разработка дизайн-макета. 3. Верстка дизайн-макета. 4. Программирование, установка и настройка CMS. 5. Наполнение контентом и тестирование. 6. Публикация сайта в интернете. 7. Продвижение и оптимизация сайта. 8. Администрирование (поддержка) сайта.

Слайд 10


1. Определение целей сайта и требований к нему определение цели сайта; определение целевой аудитории; выяснение ожидаемой для посетителя информации; определение типа сайта и его функционала; определение технического и программного обеспечения; юзабилили-анализ; разработка и утверждение ТЗ.
Описание слайда:
1. Определение целей сайта и требований к нему определение цели сайта; определение целевой аудитории; выяснение ожидаемой для посетителя информации; определение типа сайта и его функционала; определение технического и программного обеспечения; юзабилили-анализ; разработка и утверждение ТЗ.

Слайд 11


Юзабилити сайта – это удобство пользователя при работе с сайтом. Критерии юзабилити: 1. Дизайн сайта. 2. Качество контента на сайте. 3. Скорость загрузки сайта. 4. Интерфейс и навигация. 5. Кроссбраузерность сайта. 6. Реклама и всплывающие окна.
Описание слайда:
Юзабилити сайта – это удобство пользователя при работе с сайтом. Критерии юзабилити: 1. Дизайн сайта. 2. Качество контента на сайте. 3. Скорость загрузки сайта. 4. Интерфейс и навигация. 5. Кроссбраузерность сайта. 6. Реклама и всплывающие окна.

Слайд 12


Техническое задание на разработку сайта Техническое задание (ТЗ) – это документ, в котором детально описываются основные составляющие и требования к будущему сайту.
Описание слайда:
Техническое задание на разработку сайта Техническое задание (ТЗ) – это документ, в котором детально описываются основные составляющие и требования к будущему сайту.

Слайд 13


Содержание ТЗ: описание предполагаемой аудитории; тип сайта; описание дизайна; структура сайта (карта сайта) с описанием переходов в виде схемы, состоящей из основных разделов, подразделов и количества страниц;
Описание слайда:
Содержание ТЗ: описание предполагаемой аудитории; тип сайта; описание дизайна; структура сайта (карта сайта) с описанием переходов в виде схемы, состоящей из основных разделов, подразделов и количества страниц;

Слайд 14


Содержание ТЗ: описание предполагаемой аудитории; тип сайта; описание дизайна; структура сайта (карта сайта) с описанием переходов в виде схемы, состоящей из основных разделов, подразделов и количества страниц; структура страниц – какие блоки (модули) должны быть на страницах, в каком виде, где располагаются, включая контент страниц;
Описание слайда:
Содержание ТЗ: описание предполагаемой аудитории; тип сайта; описание дизайна; структура сайта (карта сайта) с описанием переходов в виде схемы, состоящей из основных разделов, подразделов и количества страниц; структура страниц – какие блоки (модули) должны быть на страницах, в каком виде, где располагаются, включая контент страниц;

Слайд 15


Содержание ТЗ: функционал каждой страницы (поиск, сортировка, фильтр и т.д.); порядок предоставления, обработки или создания графической и текстовой информации; технические требования к сайту; используемые технологии (вид CMS, библиотеки скриптов, мобильная версия и т.п.) и другие.
Описание слайда:
Содержание ТЗ: функционал каждой страницы (поиск, сортировка, фильтр и т.д.); порядок предоставления, обработки или создания графической и текстовой информации; технические требования к сайту; используемые технологии (вид CMS, библиотеки скриптов, мобильная версия и т.п.) и другие.

Слайд 16


2. Разработка дизайн-макета сайта Дизайн-макет сайта – графическое представление дизайна сайта. Готовый макет предоставляется в формате .psd или .tiff. Веб-дизайн – отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений.
Описание слайда:
2. Разработка дизайн-макета сайта Дизайн-макет сайта – графическое представление дизайна сайта. Готовый макет предоставляется в формате .psd или .tiff. Веб-дизайн – отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений.

Слайд 17


Цветовые схемы 1. Монохроматическая цветовая схема. Соответствует одному базовому цвету и всем его оттенкам, тональностям и теням.
Описание слайда:
Цветовые схемы 1. Монохроматическая цветовая схема. Соответствует одному базовому цвету и всем его оттенкам, тональностям и теням.

Слайд 18


Использование монохроматической цветовой схемы
Описание слайда:
Использование монохроматической цветовой схемы

Слайд 19


Цветовые схемы 2. Дополнительная цветовая схема. Образуется сочетаниями противоположных в цветовом круге цветов
Описание слайда:
Цветовые схемы 2. Дополнительная цветовая схема. Образуется сочетаниями противоположных в цветовом круге цветов

Слайд 20


Цветовые схемы 3. Триадические цветовые схемы. Создается при выборе одного цвета и добавлении к нему двух других цветов, расположенных на одинаковых расстояниях друг от друга на цветовом круге.
Описание слайда:
Цветовые схемы 3. Триадические цветовые схемы. Создается при выборе одного цвета и добавлении к нему двух других цветов, расположенных на одинаковых расстояниях друг от друга на цветовом круге.

Слайд 21


Цветовые схемы 4. Тетраэдрические цветовые схемы. Использует сочетание четырех цветов.
Описание слайда:
Цветовые схемы 4. Тетраэдрические цветовые схемы. Использует сочетание четырех цветов.

Слайд 22


Сайты для поиска цветовых схем http://paletton.com https://color.adobe.com http://colorscheme.ru
Описание слайда:
Сайты для поиска цветовых схем http://paletton.com https://color.adobe.com http://colorscheme.ru

Слайд 23


Использование преобладающего цвета на сайте логотип; вкладки меню; важная информация; заголовки и названия; кнопки.
Описание слайда:
Использование преобладающего цвета на сайте логотип; вкладки меню; важная информация; заголовки и названия; кнопки.

Слайд 24


Лекция 2. Основы разработки Web-приложений, слайд №24
Описание слайда:

Слайд 25


Лекция 2. Основы разработки Web-приложений, слайд №25
Описание слайда:

Слайд 26


Лекция 2. Основы разработки Web-приложений, слайд №26
Описание слайда:

Слайд 27


Лекция 2. Основы разработки Web-приложений, слайд №27
Описание слайда:

Слайд 28


Лекция 2. Основы разработки Web-приложений, слайд №28
Описание слайда:

Слайд 29


Лекция 2. Основы разработки Web-приложений, слайд №29
Описание слайда:

Слайд 30


Лекция 2. Основы разработки Web-приложений, слайд №30
Описание слайда:

Слайд 31


Лекция 2. Основы разработки Web-приложений, слайд №31
Описание слайда:

Слайд 32


Лекция 2. Основы разработки Web-приложений, слайд №32
Описание слайда:

Слайд 33


Лекция 2. Основы разработки Web-приложений, слайд №33
Описание слайда:

Слайд 34


Лекция 2. Основы разработки Web-приложений, слайд №34
Описание слайда:

Слайд 35


Лекция 2. Основы разработки Web-приложений, слайд №35
Описание слайда:

Слайд 36


Лекция 2. Основы разработки Web-приложений, слайд №36
Описание слайда:

Слайд 37


Лекция 2. Основы разработки Web-приложений, слайд №37
Описание слайда:

Слайд 38


Лекция 2. Основы разработки Web-приложений, слайд №38
Описание слайда:

Слайд 39


Лекция 2. Основы разработки Web-приложений, слайд №39
Описание слайда:

Слайд 40


Лекция 2. Основы разработки Web-приложений, слайд №40
Описание слайда:

Слайд 41


Лекция 2. Основы разработки Web-приложений, слайд №41
Описание слайда:

Слайд 42


Лекция 2. Основы разработки Web-приложений, слайд №42
Описание слайда:

Слайд 43


Лекция 2. Основы разработки Web-приложений, слайд №43
Описание слайда:

Слайд 44


3. Верстка Вёрстка – процесс формирования страниц (макета) путём компоновки текстовых, графических и прочих элементов. Вёрстка – создание кода страницы с использованием языка HTML и их оформление с помощью каскадных таблиц стилей – CSS.
Описание слайда:
3. Верстка Вёрстка – процесс формирования страниц (макета) путём компоновки текстовых, графических и прочих элементов. Вёрстка – создание кода страницы с использованием языка HTML и их оформление с помощью каскадных таблиц стилей – CSS.

Слайд 45


Требования к верстке: Кроссбраузерность – одинаковое отображение в разных браузерах Гибкость вёрстки – возможность легко добавлять/удалять информацию на страницы. Быстрота обработки кода браузером Валидность – соответствие стандартам Семантическая корректность – логичное и правильное использование элементов HTML
Описание слайда:
Требования к верстке: Кроссбраузерность – одинаковое отображение в разных браузерах Гибкость вёрстки – возможность легко добавлять/удалять информацию на страницы. Быстрота обработки кода браузером Валидность – соответствие стандартам Семантическая корректность – логичное и правильное использование элементов HTML

Слайд 46


Виды верстки Табличная. Используется обычная таблица с невидимой границей. Блочная. Используются слои (блоки) для создания базового шаблона страницы, добавляется нужное количество блоков.
Описание слайда:
Виды верстки Табличная. Используется обычная таблица с невидимой границей. Блочная. Используются слои (блоки) для создания базового шаблона страницы, добавляется нужное количество блоков.

Слайд 47


Виды верстки III. Семантическая верстка Семантической называют верстку, использующую для структурирования html-документов теги, которые разделяют код на логические блоки, определяющие их роль и содержание в структуре web-страницы.
Описание слайда:
Виды верстки III. Семантическая верстка Семантической называют верстку, использующую для структурирования html-документов теги, которые разделяют код на логические блоки, определяющие их роль и содержание в структуре web-страницы.

Слайд 48


Достоинства табличной верстки: 1. Простота и быстрота верстки. 2. Корректное отображение в различных браузерах, одинаковый вид во всех браузерах. Недостатки табличной верстки: Долгая загрузка. Громоздкий код. Плохая индексация поисковыми системами. Нет разделения содержимого и оформления. Несоответствие стандартам.
Описание слайда:
Достоинства табличной верстки: 1. Простота и быстрота верстки. 2. Корректное отображение в различных браузерах, одинаковый вид во всех браузерах. Недостатки табличной верстки: Долгая загрузка. Громоздкий код. Плохая индексация поисковыми системами. Нет разделения содержимого и оформления. Несоответствие стандартам.

Слайд 49


Преимущества блочной верстки: компактный код, небольшой вес страниц; отличная индексация поисковыми системами; слои можно накладывать друг на друга; быстрая загрузка страниц. Недостатки блочной верстки: верстка сложная; трудно обеспечить одинаковый вид во всех браузерах; при уменьшении разрешения экрана/браузера блоки съезжают друг на друга
Описание слайда:
Преимущества блочной верстки: компактный код, небольшой вес страниц; отличная индексация поисковыми системами; слои можно накладывать друг на друга; быстрая загрузка страниц. Недостатки блочной верстки: верстка сложная; трудно обеспечить одинаковый вид во всех браузерах; при уменьшении разрешения экрана/браузера блоки съезжают друг на друга

Слайд 50


Виды html-верстки: 1. фиксированная, 2. резиновая, 3. гибридная.
Описание слайда:
Виды html-верстки: 1. фиксированная, 2. резиновая, 3. гибридная.

Слайд 51


Лекция 2. Основы разработки Web-приложений, слайд №51
Описание слайда:

Слайд 52


Лекция 2. Основы разработки Web-приложений, слайд №52
Описание слайда:

Слайд 53


Лекция 2. Основы разработки Web-приложений, слайд №53
Описание слайда:

Слайд 54


Лекция 2. Основы разработки Web-приложений, слайд №54
Описание слайда:

Слайд 55


Лекция 2. Основы разработки Web-приложений, слайд №55
Описание слайда:

Слайд 56


Лекция 2. Основы разработки Web-приложений, слайд №56
Описание слайда:

Слайд 57


Лекция 2. Основы разработки Web-приложений, слайд №57
Описание слайда:

Слайд 58


Лекция 2. Основы разработки Web-приложений, слайд №58
Описание слайда:

Слайд 59


Лекция 2. Основы разработки Web-приложений, слайд №59
Описание слайда:

Слайд 60


Лекция 2. Основы разработки Web-приложений, слайд №60
Описание слайда:

Слайд 61


Лекция 2. Основы разработки Web-приложений, слайд №61
Описание слайда:

Слайд 62


Лекция 2. Основы разработки Web-приложений, слайд №62
Описание слайда:

Слайд 63


Лекция 2. Основы разработки Web-приложений, слайд №63
Описание слайда:

Слайд 64


Лекция 2. Основы разработки Web-приложений, слайд №64
Описание слайда:

Слайд 65


Лекция 2. Основы разработки Web-приложений, слайд №65
Описание слайда:

Слайд 66


Лекция 2. Основы разработки Web-приложений, слайд №66
Описание слайда:

Слайд 67


Лекция 2. Основы разработки Web-приложений, слайд №67
Описание слайда:

Слайд 68


Лекция 2. Основы разработки Web-приложений, слайд №68
Описание слайда:

Слайд 69


Лекция 2. Основы разработки Web-приложений, слайд №69
Описание слайда:

Слайд 70


Лекция 2. Основы разработки Web-приложений, слайд №70
Описание слайда:

Слайд 71


Лекция 2. Основы разработки Web-приложений, слайд №71
Описание слайда:

Слайд 72


Лекция 2. Основы разработки Web-приложений, слайд №72
Описание слайда:

Слайд 73


Лекция 2. Основы разработки Web-приложений, слайд №73
Описание слайда:

Слайд 74


Лекция 2. Основы разработки Web-приложений, слайд №74
Описание слайда:

Слайд 75


Лекция 2. Основы разработки Web-приложений, слайд №75
Описание слайда:

Слайд 76


Лекция 2. Основы разработки Web-приложений, слайд №76
Описание слайда:

Слайд 77


Лекция 2. Основы разработки Web-приложений, слайд №77
Описание слайда:

Слайд 78


Лекция 2. Основы разработки Web-приложений, слайд №78
Описание слайда:

Слайд 79


Лекция 2. Основы разработки Web-приложений, слайд №79
Описание слайда:

Слайд 80


Лекция 2. Основы разработки Web-приложений, слайд №80
Описание слайда:

Слайд 81


Лекция 2. Основы разработки Web-приложений, слайд №81
Описание слайда:

Слайд 82


Лекция 2. Основы разработки Web-приложений, слайд №82
Описание слайда:

Слайд 83


Лекция 2. Основы разработки Web-приложений, слайд №83
Описание слайда:

Слайд 84


Лекция 2. Основы разработки Web-приложений, слайд №84
Описание слайда:

Слайд 85


Лекция 2. Основы разработки Web-приложений, слайд №85
Описание слайда:

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию