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

На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Лекция 2. Основы разработки Web-приложений абсолютно бесплатно. Урок-презентация на эту тему содержит всего 85 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.

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

Просмотр ВСЕЙ презентации! ЖМИТЕ

Оцените презентацию от 1 до 5 баллов!

Смотреть онлайн
Скачать

Тип файла:

ppt / pptx (powerpoint)
Всего слайдов:

85 слайдов
Для класса:

1,2,3,4,5,6,7,8,9,10,11
Размер файла:

4.49 MB
Просмотров:

60
Скачиваний:

0
Автор:

неизвестен

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

№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 слайд

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

№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 слайд

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

№50 слайд