Лекция 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-приложений

Слайд 2

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

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

Слайд 3

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

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

Слайд 4

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

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

Слайд 5

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

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

Слайд 6

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

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

Слайд 7

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

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

Слайд 8

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

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

Слайд 9

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

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

Слайд 10

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

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

Слайд 11

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

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

Слайд 12

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

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

Слайд 13

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

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

Слайд 14

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

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

Слайд 15

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

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

Слайд 16

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

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

Слайд 17

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

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

Слайд 18

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

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

Слайд 19

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

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

Слайд 20

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

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

Слайд 21

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

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

Слайд 22

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

Сайты для поиска цветовых схем

Слайд 23

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

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

Слайд 24

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

Слайд 25

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

Слайд 26

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

Слайд 27

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

Слайд 28

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

Слайд 29

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

Слайд 30

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

Слайд 31

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

Слайд 32

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

Слайд 33

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

Слайд 34

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

Слайд 35

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

Слайд 36

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

Слайд 37

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

Слайд 38

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

Слайд 39

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

Слайд 40

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

Слайд 41

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

Слайд 42

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

Слайд 43

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

Слайд 44

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

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

Слайд 45

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

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

Слайд 46

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

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

Слайд 47

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

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

Слайд 48

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

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

Слайд 49

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

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