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

1.

Веб-технология
Определение понятия веб-технология
Интернет-технология
Технология создания интернет ресурсов
Технология поддержки интернет ресурсов
Логическая составляющая Интернеттехнологий

2.

Представление информации в Интернет
Веб-страница
Минимальная единица WWW
Документ в формате html
Имеет уникальный адрес
Формат - .html, .htm, .php, .asp

3.

История развития веб-страниц

4.

История развития веб-сайтов

5.

Веб-сайт
Веб-сайт
Совокупность веб-страниц
Веб-страницы имеют одинаковое доменное имя
Может быть из одной веб-страницы
Обычно веб-страницы сайта объединены под одним доменом

6.

Статическая веб-страница
Статическая веб-страница
Не используют базы данных
остаются неизменными до тех пор, пока их не изменят вручную
прост в дизайне
дешевле в разработке и технической поддержке

7.

Динамическая веб-страница
Динамическая веб-страница
используют базы данных
имеют изменяемые страницы
не размещены на сервере в готовом виде, а собираются заново по
каждому новому запросу
сложнее в разработке и технической поддержке
Для интерпретации страниц на серверной стороне используются языки
программирования Java, PHP, ASP и другие

8.

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

9.

Составляющие веб-приложения
Frontend
Backend
• HTML+CSS+Javascript
• PHP, Python, Ruby, C# и
другие
Single page application / SPA
• HTML5+CSS+фреймворки
JS+API+AJAX

10.

Progressive Web Apps
Технологии
Показатели
• Service Worker
• Web App Manifest
• HTTPS
• App shell
• Push Notifications
• надежность
• быстрота
• привлекательность
• размер

11.

Архитектура веб-приложения
Клиентская часть
Серверная часть
• для взаимодействия
приложения с пользователем
• реализуется в рамках веббраузера
• для хранения нужной для
работы приложения
информации
• для обработки запросов
пользователей

12.

HyperText Transfer Protocol
Протокол передачи гипертекста
HTTP
Протокол прикладного уровня
обмен данными между клиентом (веб-браузером) и веб-сервером
данные передаются в открытом виде и не защищены
HyperText Transfer Protocol Secure

13.

HTTP методы
GET - доступ к ресурсу от сервера по заданному URI
POST - создание нового ресурса
PUT - обновление текущего ресурса
DELETE - удаление существующего ресурса

14.

HTTP методы
OPTIONS - определение параметров текущего соединения
TRACE
- получение ответа на запрос на уровне
приложения
HEAD - передает только заголовки

15.

Технологии разработки веб-приложений
Веб-технологии, языки
программирования и
Content Management System
инструменты
• HTML, CSS, JavaScript, PHP,
• система управления, движок,
Python, ASP.Net, Ruby,
платформа или конструктор,
фреймворки, CSS-
который позволяет управлять
препроцессоры
содержимым сайта

16.

Инструменты разработки веб-приложений
Hyper Text Markup Language
Cascading Style Sheets
JavaScript
Hypertext Preprocessor Personal Home Page
ASP.NET
Java

17.

Основные этапы разработки веб-приложений
Бизнес-цели,
требования,
структура, ТЗ
Разработка макета,
прототипа
Компьютерная
вёрстка,
программирование

18.

Основные этапы разработки веб-приложений
Наполнение
контентом вебприложение
Запуск вебприложения в
интернете
Тестирование вебприложения

19.

Подготовительный этап - бизнес-цели проекта
Портрет
пользователя
приложения,
Customer
Journey Map
Проектирование
опыта
пользователей
Цель и задачи
приложения

20.

План проекта
бюджете проекта
календарный график работ с распределением ролей
техническая документация
раздел деталей и уточнений

21.

Разработка ТЗ проекта
Бриф
Техническое задание
• целевая аудитория;
•конкурентные преимущества;
•подробнее о вашей
деятельности;
•цель;
• документ, в котором
зафиксированы требования к
веб-приложению

22.

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

23.

Структура технического задания
Структура веб-приложения
пользователи, взаимодействующие с веб-приложением
Навигация по веб-приложению
Функционал веб-приложения
Наполнение веб-приложения

24.

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

25.

Логическая структура веб-приложения
обычно представлена в виде схемы
связи между веб-страницами – это переходы между ними
структура веб-приложения
пользователя
влияет
на
целевые
действия
определяет, в какой последовательности материалы веб-приложения
будут доступны пользователю

26.

Линейная логическая структура

27.

Линейная с ответвлениями логическая структура

28.

Линейная с альтернативами логическая структура

29.

Блочная логическая структура

30.

Древовидная логическая структура

31.

Физическая структура сайта
для удобства разработчикам веб-приложений при его редактировании
в виде дерева папок и файлов веб-страниц приложения
отдельная папка для каждого из разделов и подразделов
отдельные папки для вспомогательных изображений, отдельные
папки для мультимедиа-информации

32.

Рекомендации по разработке физической структуры
веб-страницу о компании принято именовать about.htm
веб-страницу
contacts.htm
с
контактной
информацией
лучше
именовать
группу файлов - article_1.htm, article_2.htm, article_3.htm
веб-страницу с описаниями услуг лучше, именовать uslugi.htm
веб-страницу с информацией
именовать istoriya.htm
об
истории
организации
лучше

33.

Рекомендации по разработке физической структуры
веб-страница article_1.htm, тогда контент данной страницы будет
именоваться – article_1_sobor. jpg, article_1_history.jpg
m_menu.gif / menu_over.gif
t_ - title
bg_ - background
icon_about.gif / button_about.gif

34.

Рекомендации по разработке физической структуры
основы слова имени файла – название страницы, к которой относится
данная графика
bg_about.gif
bg.gif
следует помнить об ограничениях, накладываемых со стороны
операционных систем
лучше не использовать русские буквы в именах файлов

35.

Общие рекомендации по разработке структуры
простой и логичной
не использовать вложенность страниц белее чем на 3-4 уровня
не использовать сложные URL
struktura-sayta
web-knigi/book/book/book/book

36.

Рекомендации к структуре
Требования поисковых систем к структуре вебприложения
Логическая иерархия
Текстовые ссылки
Страница навигации
Человекопонятные адреса страниц
Простая структура каталогов
Уникальные URL-адреса веб-страниц

37.

XMind - сервис для разработки структуры

38.

MindMeister - сервис для разработки структуры

39.

Draw.io - сервис для разработки структуры

40.

Сервисы для разработки структуры веб-приложения
Microsoft Visio
Octopus.do
Gloomaps
Flowmapp
Draftium

41.

Правильная структура веб-сайта
Простая и удобная навигация
Оптимизаторы придерживаются правила - самые важные вебстраницы не дальше 3-х кликов от главной
Ссылочный вес распределяется в соответствии с важностью
страниц
Создание дополнительных разделов под узкие группы запросов дает
возможность ранжироваться по большому количеству ключевых
слов

42.

Разработка прототипа веб-приложения
прототип
визуальные изображения веб-страниц приложения
позволяют сформировать представление о навигации
показывает расположение и взаимодействия иконок, кнопок, заголовков,
видеоблоков, текста, изображений
схематичное изображение веб-страниц

43.

Прототип веб-приложения
Обозначить расположение элементов на веб-странице
Увидеть слабые места пользовательского интерфейса
Может быть интерактивным
Помогает избежать ошибок, на последних этапах разработки

44.

Детализация прототипа
Lo-Fi
Hi-Fi
• low fidelity
• отсутствует дизайн
• показывает логику вебстраницы
• Wireframe
• high fidelity
• дизайн веб-страницы,
• показывает тактильность
интерфейса, валидацию
графических решений
• макет

45.

Wireframe
Что?
Основной контент
Где?
Структура информации
Как?
Базовая визуализацию
взаимодействия между
интерфейсом и пользователем

46.

Макет
mockup
Wireframe + дизайн
средне или высоко детализированный дизайн проекта
хорошо подходят для получения обратной связи

47.

Рекомендации по разработке прототипа
анализируют
требования к
веб-приложению
для каждой версии
приложения
создаются
прототипы
разработанный
прототип
утверждается
заказчиком

48.

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

49.

Основные правила работы над прототипом
проработать параметры элементов прототипа
определить порядок между слоями

50.

Основные правила работы над прототипом
интерфейс всех веб-страниц должен быть одинаковым
рекомендуется
изображения
использовать
короткие
тексты
и
небольшие
однотипные элементы лучше группировать по несколько штук
адаптивная верстка

51.

Преимущества прототипирования веб-страниц
Прототип
Рационально планировать работы по разработке вебприложения
Влияет на понимание перспектив использования и
развития сайта
Разработка сценария действий пользователя
Определить лишние элементы или блоки
Формирует представление верстальщику о структуре и
расположении элементов и блоков на странице

52.

Инструменты для разработки прототипа – Бумажный
прототип
преимущества
- можно быстро
реализовать
- не требует
специальных
знаний
- не требуется
специализированн
ых инструментов
недостатки
- примитивность
- отсутствие
интерактивности
- невозможность
вносить правки

53.

Инструменты для разработки прототипа –
специализированные программы
преимущества
- позволяет
визуализировать
элементы
интерфейса
- выглядит
эстетичнее
- можно добавить
кликабельные
функции
недостатки
- сложные
профессиональные
программы,
требующие
навыков работы с
ними
- не во всех есть
функции
совместной работы
над прототипом

54.

Инструменты для разработки прототипа – Онлайнинструменты
преимущества
- интуитивный
интерфейс
- время разработки
прототипа
- совместная
работа над
проектом
недостатки
- переход к
программированию
- умение работать с
данным сервисом

55.

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

56.

Макетная сетка
Макетная сетка
основа в разработке интерфейса вебприложения
помогает соблюдать правила внешнего и
внутреннего отступов
блочная, колоночная, модульная

57.

Виды макетных сеток
блочная
колоночная
модульная
• набор
горизонтальных
блоков
• горизонтальный
блок - это шаг в
ритме сетки
• набор
вертикальных
столбцов с
межколоночным
отступом
• система
вертикальных и
горизонтальных
блоков, которая
делит страницу на
модули

58.

Модульная сетка
минимальная
ширина
Мобильные устройства (портрет) — 320px
Мобильные устройства (альбом) — 480px
Планшеты (портрет) - 768px
Планшеты (альбом) - 1024px
Десктоп – 1200px

59.

Подходы к построению макетных сеток
Ширина экрана
1920px
• 16 колонок
Ширина экрана
1440px
• 12 колонок
Ширина экрана
1024px
• 8 колонок
Ширина экрана
768px
• 8 колонок
Ширина экрана
320px
• 4 колоноки

60.

Алгоритм построения модульной сетки
Выбрать шаг базовой сетки
Определить оптимальное
количество колонок
Определить количество точек
перехода
Создать колоночную сетку

61.

Преимущества использования модульной сетки
расположение и выравнивание элементов
при добавлении новых элементов в макет страницы соблюдается
единый стиль
ускоряет работу с макетом
ринципы пропорциональности и структурированности элементов
верстальщику быстрее считывать информацию с макета веб-страницы

62.

Инструменты для построения модульной сетки

63.

Фреймворки для построения модульной сетки

64.

Фреймворки для построения модульной сетки

65.

Фронтенд разработка веб-приложений
HTML
CSS
JavaScript
• структура
• разметка
• внешний вид
элементов, фона
• позиционирование
элементов, блоков
• функциональность
• логика работы
приложения

66.

HTML/XHTML
Расширение – htm, html, asp, php и т.д.
Любой браузер содержит интерпретатор языка HTML
XHTML - extensible hypertext markup language
XHTML — расширяемый язык гипертекстовой разметки
XHTML требует строгого соблюдения всех правил, предъявляемых
WWW

67.

HTML
tag
формат шрифта,
написание и размер символов
разделы в документе,
таблицы
ссылки на интернет-ресурсы

68.

Отличие HTML 5.0 от предыдущих версий
HTML 5
семантический код
поддержка геолокации
поддержку локального хранилища
управление процессами на странице своими
стандартными методами
поддержку векторной графики

69.

Стандарт HTML5
header - заголовка раздела
main - основное содержание веб-страницы
footer - нижний колонтитул (подвал)
article - независимый раздел контента веб-страницы
aside - неявный контент

70.

Стандарт HTML5
details - дополнительные сведения
figcaption - подпись или заголовок иллюстрации, рисунка и т.д.
figure
- автономное содержание (диаграммы, фотографии,
изображения)
mark - выделения фона фрагментов текста желтым цветом

71.

Стандарт HTML5
time – отображение даты и времени
summary - заголовок элемента details
section - логическое определение раздела веб-страницы
nav - навигационный раздел веб-страницы

72.

Cпецификации W3C и WHATWG
W3C / World Wide Web
Consortium
WHATWG / Web Hypertext
Application Technology Working
Group
• разработкой и внедрением
стандартов Всемирной
паутины
• только один элемент main
• независимая рабочая группа по
технологиям HTML
• элемент main в любом
структурном элементе

73.

Контентные модели HTML5
Meta Data
Flow
• элементы, которые
содержат
дополнительную
информацию об HTML
• элементы в теле
документа между тегами
body
Sectioning
• элементы, которые создают
отдельные секции в структуре
HTML

74.

Контентные модели HTML5
Heading
Phrasing
• элементы,
определяющие
заголовки разделов
• элементы,
определяющие текст и
его формат
Embedded
Interactive
• контент,
импортируемый в HTML
из других ресурсов
• элементы,
разработанные для
взаимодействия с
пользователем

75.

CSS
Cascading Style Sheets
упрощает оформление веб-страниц за счет отделения
содержимого элементов веб-страницы от их стилей представления
Правила CSS в самом документе HTML
Правила CSS во внешних файлах с расширением .css

76.

CSS
Селекторы позволят сделать разметку чище
Градиенты позволяют создавать гладкие переходы между цветами
Правило font-face
фоновые изображения, которые работают как слои
Правило column для многоколоночной разметки

77.

Document Object Model
Узел, расположенный
непосредственно над данным
узлом
• родительский
Узлы, расположенные на один • дочерние
уровень ниже другого узла
Узлы, находящиеся на том же • сестринские
уровне и имеющие того же
родителя
Узлы, расположенные на
любое число уровней ниже
другого узла
• потомки

78.

Document Object Model
<!doctype html>
<html >
<head>
<title>Тонких Артём Петрович</title>
</head>
<body>
<h1>Название статьи</h1>
<div>
<p style="display: none;">Статья</p>
</div>
</body>
</html>
html
head
title
Тонких Артём Петрович
body
h1
Название статьи
div
p
Статья

79.

CSSOM
объектная модель таблицы стилей
стили, связанные с DOM
Не имеет значения были ли стили объявлены явно или
наследуются
основа для построения дерева рендеринга
описывает все селекторы CSS на странице, их иерархию и их свойства

80.

Дерево рендера
<!doctype html>
<html >
<head>
</head>
<body>
<h1>Тонких Артём Петрович</h1>
<p style="display: none;">Статья</p>
</body>
</html>
html
body
h1
Тонких Артём Петрович

81.

Этапы рендеринга
построение DOM-дерева
построение CSSOM-дерева
запуск JavaScript
создание Render-дерева
генерация раскладки
отрисовка

82.

BOM
Browser
Object Model
Глобальный объект - window
основные объекты: navigator, history, location, screen,
document
window.screen
document – корень объектной модели
document поддерживается всеми браузерами

83.

Основные объекты BOM
window – вкладка браузера
history - история переходов пользователя по ссылкам в пределах
одного окна
location - адресная строка браузера
screen - информация об экране пользователя
document - HTML документ, загруженный в окно браузера

84.

Компьютерная вёрстка
формирование HTML-структуры веб-страницы
HTML, CSS, JavaScript
в соответствии с дизайн-макетом
кроссбраузерная совместимость
валидность кода

85.

Вёрстка веб-страницы
утверждённый
заказчиком макет
веб-страницы
анализ макета
разбивка макета на
этажи и колонки
создание
структуры
гипертекстового
документа

86.

Виды вёрсток
Табличная
<table>
Блочная
<div>
Семантическая
HTML5

87.

Табличная вёрстка
набор таблиц, внутри которых располагался контент
создаются дополнительные таблицы, которые возможно, останутся
пустыми
Веб-страница получается тяжелой
подходит для резиновой вёрстки
<table>, <tr>, <td>

88.

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

89.

Блочная вёрстка
структура веб-страницы более лёгкая
обеспечивает адаптивный дизайн
поисковые системы лучше распознают блочную вёрстку
быстрее читаются браузером
<div>

90.

Преимущества и недостатки блочной верстки
преимущества
недостатки
• удобные структурные
элементы
• меньший объём кода
• повышенная читабельность
кода
• возможность создать
адаптивный дизайн
• сложность освоения из-за
изменения дизайна путём
правки файла стилей
• решение проблемы
кроссбраузерности требует
больших усилий

91.

Семантическая вёрстка
использовании HTML-тегов в соответствии с их предназначением
семантические
теги
интерпретировать
позволяют
поисковой
машине
читабельный код
уменьшить количество тегов в задании структуры веб-страницы
веб-страница быстрее грузиться и ранжируется в поисковой системе
их

92.

Преимущества и недостатки семантической верстки
преимущества
недостатки
• сократить количество кода
• код страницы более понятный
• код удобочитаем
• быстрее загрузка страницы
• требует от разработчика
приложения определённых
знаний и навыков
• не поддерживается старыми
версиями браузеров

93.

Типы версток веб-страниц - фиксированная
Fixed Layout
веб-страница имеет заданную ширину
ширина элементов на странице не меняется
строгое задание ширины - width:1200px
проще реализовать
не самый лучший вариант

94.

Типы версток веб-страниц - резиновая
Elastic layout
ширина элементов подстраиваются под размеры
экрана браузера
относительные значения max-width и min-width
относительные значения max-height и min-height
width:90%
min-width:480px

95.

Типы версток веб-страниц - адаптивная
Adaptive
Layout
живые веб-страницы
способные перестраивать свои элементы и изменять
их размер в зависимости от устройства
изменении размера элементов веб-страницы в
зависимости от разрешения экрана устройства
меняется расположение элементов веб-страницы, их
размеры
медиа-запросы плюс пиксельное задание ширины
элементов

96.

Типы версток веб-страниц - отзывчивая
Responsive
Layout
основывается на резиновой верстке
реализуется с помощью медиа-запросов CSS @Media
медиа-запросы плюс процентное задание ширины
элементов
обладает всеми преимуществами адаптивной вёрстки
при изменении разрешения экрана, визуальные
объекты меняются более плавно

97.

Внешняя структура веб-страницы

98.

Главная страница сайта
Навигационные элементы
графический и текстовый контент
конверсионные кнопки
контактная информация
информация о компании

99.

Элементы веб-страницы
Заголовок страницы – тег H1
заголовки разделов – с использованием заголовков более низкого
уровня
Панель поиска
Элементы навигации
На каждой веб-странице должна быть ссылка на главную страницу

100.

Элементы веб-страницы
Социальные кнопки - переход на социальные сети
Элемент навигации - хлебные крошки
Ссылка на форму обратной связи
дополнительная информация – контакты, копирайт, ссылки на
другие веб-страницы – размещать в футере
Кнопка - Вверх страницы

101.

Блоки и элементы веб-страницы
информативные
функциональные
навигационные
• контент вебстраницы
• текстовая
информация
• графическая
информация
• аудио , видеоинформация
• выполнение задач
• поля ввода,
• кнопки
• ссылки
• списки
• управления
поведением
пользователя
• меню – ссылки,
логотип, хлебные
крошки, иконки

102.

Заголовок веб-страницы
Реализован в текстовом или графическом варианте
совмещают заголовок с меню выбора кодировки кириллицы
размещают кнопки для выбора языка текста версии сайта
размещают рекламные баннеры
Размещают элементы навигации

103.

Элементы навигации веб-сайта
текстовая
графическая
HTML
Java технологии
• ссылки,
оформляемые в
виде обычного
текста
• графические
элементы –
кнопки,
изображения
• списки,
открывающиес
я при
наведении
курсора на
корневой
раздел
• интерактивные
компоненты,
реагирующие
на наведение
курсора

104.

Нижний колонтитул веб-страницы
информацию о разработчиках сайта
Контактная информация
счетчик посещений
ссылки на социальные сети и
Ссылки на обратную связь

105.

Правила вёрстки
структура вебстраницы в виде
HTML кода
стили вынести в
отдельный файл
функциональный
код вынести в
отдельные файлы
чистота кода
соблюдайте
кроссбраузерность
используйте
заголовки H1, H2,
…,
заполняйте
атрибуты тега title
минимум
изображений

106.

Инструменты для компьютерной вёрстки
редактор кода
плагины для верстки веб-приложений
CSS препроцессоры
Grid
Bundler
системы управления версиями кода

107.

Frontend языки
HTML5
JavaScript
CSS3
AJAX

108.

JavaScript
Скрипты встраиваются в HTML
Скрипты выполняться автоматически при загрузке веб-страницы
LiveScript
ECMAScript

109.

JavaScript
Полная интеграция с HTML/CSS
Поддерживается всеми основными браузерами
технологии AJAX и COMET
изменение веб-страниц, взаимодействие с пользователем и вебсервером

110.

ECMAScript
Расширения языка: JavaScript, JScript и ActionScript
ECMAScript под управлением ECMA International
Встраиваемый, расширяемый и не имеющий средств вводавывода язык программирования
Используется в качестве основы для построения других скриптовых
языков

111.

Динамический HTML - DHTML
Dynamic
HTML
HTML, CSS, JavaScript и DOM
динамическая модификация представления страниц в
браузере
client-side scripting
запрограммированный элемент можно создавать,
удалять, передвигать, осуществлять свободное
обтекание графического элемента текстом
поддержка практически всеми известными браузерами

112.

Языки над JavaScript
CoffeeScript
более короткий синтаксис, который позволяет
писать чистый код
TypeScript
добавлении строгой типизации
Brython
транспилирует Python в JavaScript

113.

Редакторы кода
Редактор кода
IDE
Облачные IDE
• относительно просты
в применении
• многофункциональн
ые интегрированные
среды
• многофункциональн
ые интегрированные
среды в виде
интернет-сервиса

114.

Редакторы кода
Notepad++
Sublime Text
Brackets
Goto Anything
Atom

115.

IDE
Webstorm
Eclipse Orion
Netbeans
Visual Studio Code
Komodo IDE.

116.

Генераторы CSS кода

117.

Сборщик проектов

118.

Расширения для браузеров

119.

Frontend фреймворки и библиотеки
React
Vue.Js
Kube
Gatsby
Bootstrap

120.

Фреймворки JavaScript
это библиотеки программирования JavaScript
это предварительно написанный код для использования в
стандартных функциях
более адаптируемы для дизайна веб-сайтов
упрощают задачу создания веб-приложений для разработчиков

121.

Angular
достоинства
недостатки
• автоматически улавливает
изменения на уровне модели
• поддерживают интеграцию
модульных тестов
• простой перенос и взаимодействие
между всеми компонентами
сложной системы
• работает с внешними
библиотеками
• не самый простой фреймворк для
новичков
• все скрипты загружаются
одновременно
• для полной индексации
приложения надо использовать
внешние инструменты

122.

React.js
достоинства
недостатки
• работает быстрее других
фреймворков
• хорошая производительность
• возможность многократного
использования компонентов
• возможность создания
компонентов без написания
классов
• проблемы с актуализацией
документации из-за
многочисленных и постоянных
обновлений
• подходит только для клиентских
решений

123.

Vue.JS
достоинства
недостатки
• гибкость при разработке структуры
приложения
• легкая настройка
• простая интеграция с элементами
других языков программирования
• Небольшая поддержка
• выбор множества компонентов
может вызвать проблемы при
реализации масштабного проекта
• многие из новых механизмов и
плагинов написаны на китайском
языке

124.

jQuery
достоинства
недостатки
• поддерживается во всех основных
браузерах
• компактность кода
• простой и понятный синтаксис
• Кроссбраузерность
• открытый код
• немного снижает
производительность выполнения
кода
• устаревшие API объектной модели
документа

125.

Ember
достоинства
недостатки
• Использование
транспилятора Babel для
обеспечения поддержки ES2016
• Поддержка средств
тестирования Testem и Qtest
• Поддержка сборщика Broccoli.js
• рекомендуется продвинутым
пользователям
• не использует простые модели
JavaScript
• За Ember.js стоит относительно
небольшое сообщество

126.

Backbone
достоинства
недостатки
• Легок в освоении
• Backbone состоит из команд,
которые должны выполнять
приложения
• совместим с REST API
• быстрая и плавная работа
• необходимо загрузить
дополнительные плагины и
расширения перед использованием
• Небольшой размер
• перед его применением надо
добавить в свой проект
фреймворки Underscore.js и jQuery

127.

Фреймворки CSS
достоинства
• Кроссбраузерность
• Возможность создать корректный
HTML макет даже не очень
опытному специалисту
• Единообразие кода
• Увеличение скорости разработки
недостатки
• Привязанность к стилю CSS
библиотеки
• Избыточный код

128.

Bulma
достоинства
недостатки
• 100% отзывчивость
• Прост в освоении
• Простой синтаксис
• Настраиваемый
• Интегрируется с Angular, VueJS,
React и другими JS фреймворками
• мобильно оптимизированный
фреймворк
• новая структура, которая не так
велика для сообщества
• в нем меньше документации и
требуется небольшое улучшение
• находится в стадии разработки

129.

Bootstrap
достоинства
• высокая скорость создания
качественной адаптивной вёрстки
• Кроссбраузерность
• Кроссплатформеннось
• наличие большого количество
готовых компонентов
• возможность настройки под свой
проект
недостатки
• более большой размер конечных
css и js-файлов проекта
• сложность использования
Bootstrap для вёрстки сайтов с
уникальным дизайном

130.

Skeleton
Адаптивная сетка фреймворка основывается на 960-пиксельной сетке
Изолированность от дизайна
Легкость в работе
Для небольших проектов

131.

Semantic UI
Интеграция с React, Angular, Meteor, Ember и другими фронтендинструментами
упор на семантику веба
Красивые макеты из коробки
Широкий простор для настройек

132.

Foundation
Адаптивная система сеток
Sass основной препроцессор для Foundation
Фреймворк также построен по концепции mobile-first
обладает 12-колоночной сеткой и подстраивается под размер
экрана
поддерживает все нормы и стандарты семантической разметки
Особенность RTL (right-to-left)

133.

Валидность кода веб-страницы
определяет то, как будет выглядеть страница или веб-приложение
в разных браузерах
Валидный код загружается быстрее невалидного
влияет на восприятие страниц и сайтов поисковыми системами
соответствие исходного кода нормам и правилам W3C
единая, универсальная характеристика любого кода

134.

Проверка кода веб-страницы на валидность
Валидация
Проверка кода и приведения его в соответствие с
выбранным Document Type Definition
Проверка на наличие посторонних элементов
Проверка на наличие синтаксических ошибок
Проверка вложенности тегов

135.

Валидатор

136.

Тестирование

137.

Проверка веб-страницы на кроссбраузерную
совместимости

138.

Проверка веб-страницы на кроссбраузерную
совместимости

139.

Проверка веб-страницы на кроссбраузерную
совместимости

140.

Проверка адаптивности сайта
www.responsivedesign
test.net
mattkersley.com
equirktools.com
responsive.is
screenqueri.es

141.

Препроцессоры CSS
расширяют базовый функционал CSS
автоматизируют рутинные операции и, следовательно, ускоряют
разработку
Преобразуют исходный код в чистый, валидный CSS-код
Стандартизируют браузерные префиксы
Модернизируют логику стилизации

142.

AJAX
asynchronous javascript and XML
набор методов веб-разработки,
приложениям работать асинхронно
которые
позволяют
веб-
обрабатывать любые запросы к серверу в фоновом режиме
используется для динамической подгрузки содержимого странички
Взаимодействовать с AJAX намного быстрее, чем обновлять всю
страницу

143.

AJAX
Снижение безопасности, так как исходный код открыт в браузере
Отсутствие интеграции
AJAX серьезно мешает составлять достоверную статистику
посещений
Сложности с индексированием
Без включенного в браузере JavaScript технология просто не будет
работать

144.

Логика веб-сервера
Python
JavaScript/Node.js
PHP
Ruby
Java
.NET (C#, VB)

145.

Бэкенд веб-приложения
организация и работа с базами данных посредством СУБД
связка полей формы регистрации и корзины
обеспечение корректной работы всех функций сайта и его
вычислительной логики
разработка базовой логики и алгоритмов работы приложения
необходимые интеграции с внешними сервисами

146.

Компоненты серверной части веб-приложения
Уровень
представления
Прикладной уровень
Уровень данных
• относится к
пользовательскому
интерфейсу
приложения
• обрабатывает логику,
которая обеспечивает
функционирование
веб-приложения
• хранит, организует и
управляет доступом
к данным
приложения с
использованием базы
данных

147.

Инструменты бэкенда
Серверы
Языки
программирования
СУБД
• Apache
• Nginx
• IIS
• Rackspace
• Docker
• Ruby
• PHP
• Java
• ASP.NET
• Python
• MySQL
• PostgreSQL
• MongoDB
• Cassandra
• Redis

148.

Инструменты бэкенда
фреймворки
Среда разработки
Тестирование API
• Ruby on Rails
• Flask
• Laravel
• Django
• Meteor
• NetBeans
• PhpStorm
• Postman

149.

Backend языки
Java
PHP
.NET (C#, VB)
• Универсален
• JVM
• У Java большое
сообщество,
• программирование
сетевых задач
• отличный язык для
начинающих
разработчиков
• программы на PHP
сложные для
масштабирования и
иногда медленные
• MVC
• .NET может
интегрироваться с
iOS, Linux и Android
• очень стабилен и
надёжен

150.

Backend языки
Ruby
Python
• достаточно лаконичный
• язык с открытым исходным кодом
• его можно модифицировать и
дополнять
• поддерживает объектноориентированное, функциональное
и аспектно-ориентированное
программирование

151.

Backend языки
JavaScript
Go
• Node.js
• наличие огромного количества
готовых решений в пакетной
экосистеме npm
• остаточно лаконичный и простой
синтаксис, основанный на Си
• с большим количеством
синтаксического сахара

152.

Content Management System
Использование шаблонов отображения, автоматически применяемых к
новому или существующему контенту
организация совместной работы над содержимым
управление содержимым: хранение, контроль версий, соблюдение
режима доступа, управление потоком документов
Управление пользователями с различным уровнем доступа
представление информации в виде, удобном для навигации, поиска

153.

Content Management System
1С-Битрикс
WordPress
Joomla
CMSimple
Engine
uCoz