Download - 01. web design
![Page 1: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/1.jpg)
Веб Дизайн
Лекция 1, Введение
Vladimir Tomberg, PhD
Эстонский Университет Прикладных Наук
по Предпринимательству Майнор
Ноябрь 2014
Pic
ture
sourc
e:
htt
p:/
/userc
ente
redconte
nt.
com
![Page 2: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/2.jpg)
Терминология
• Что такое Веб-дизайн?
• Что такое дизайн интерфейсов?
2
![Page 3: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/3.jpg)
World Wide Web (= W3, w3, WWW) "Всемирная паутина", Сеть
• Глобальная гипертекстовая система, использующая Интернет в качестве транспортного средства. Сеть серверов, по определению её основателя Тима Бернес-Ли (Tim Bernes-Lee) , — распределённая гетерогенная информационная мультимедиа-система коллективного пользования;
3
![Page 4: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/4.jpg)
4
Tim Bernes-Lee
![Page 5: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/5.jpg)
World Wide Web (= W3, w3, WWW) "Всемирная паутина", Сеть
5
• С серверов поставляются HTML документы, связанные между собой гипертекстовыми ссылками. Просмотр документов осуществляется с помощью специальных программ (browser), переход на другой документ выполняется щелчком на ссылке.
![Page 6: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/6.jpg)
World Wide Web
6
![Page 7: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/7.jpg)
Дизайн
1. Схема, проект, машинный архив проекта например, ИС при автоматизированном проектировании;
2. Разработка, проектирование, конструирование;
3. Фаза в разработке ПО, на которой функциональные спецификации транслируются в текст программы;
4. Разрабатывать, проектировать, конструировать.
7
Дизайн сущ м Конструирование вещей,
машин, интерьеров, основанное на
принципах сочетания удобства,
экономичности и красоты.
Словарь ОРФО
![Page 8: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/8.jpg)
Веб-дизайн (web-design)
• Частный случай промышленного дизайна. Вид художественно-проектной деятельности, направленный на создание и обеспечение удобства использования Веб ресурсов;
• Хороший дизайн — это гораздо больше, чем декорация. Только хорошо спланированная архитектура поможет избежать конфуза при получении необходимых крупиц информации из многослойных иерархий данных и руководств.
8
![Page 9: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/9.jpg)
Интерфейс
• Интерфейс (от англ. interface — поверхность раздела, перегородка) — совокупность средств и методов взаимодействия между элементами системы.
9
![Page 10: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/10.jpg)
Пользовательский интерфейс
• Интерфейс пользователя, он же пользовательский интерфейс (UI — англ. user interface) — разновидность интерфейсов, в котором одна сторона представлена человеком (пользователем), другая — машиной/устройством;
• Взаимодействием человека с компьютером занимается наука Human ComputerInteraction (HCI).
10
![Page 11: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/11.jpg)
История гипертекста
11
![Page 12: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/12.jpg)
1945. MEMEX
• В 1945 году ВэнниверБуш, руководитель бюро научных исследований и разработок правительства США,опубликовал статью “Пока мы мыслим”, в которой впервые была сформулирована идея гипертекста.
12
![Page 13: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/13.jpg)
1945. MEMEX• “Обсудим устройство
персонального назначения. Пусть оно называется Меmex и представляет собой что-то вроде автоматизированного архива или библиотеки.
• Меmex хранит для своего хозяина все нужные книги, записи, корреспонденцию. Прибор автоматизирован до такой степени, что дает ответы на вопросы, заданные в простой форме, - то есть очень гибок в общении. Скорость ответов высока и не заставляет ждать. Таким образом, Меmex становится расширением и усилением памяти пользователя...”
13Источник: http://friends.pomorsu.ru
![Page 14: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/14.jpg)
1962. NLS (oN Line System)
• В 1962 году Дуглас Энгельбарт в лаборатории Стэнфордского института разработал NLS.
• Файлы в NLS содержались как иерархии “утверждений”.
• Можно было установить любое число ссылочных связей - “утверждений” друг с другом, как внутрифайловых, так и межфайловых.
• Все это управлялось с помощью консоли, с графическим оконным интерфейсом, навигация по которому осуществлялась с помощью первого в истории манипулятора мышь.
14
![Page 15: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/15.jpg)
1962. NLS (oN Line System)
15
http://www.youtube.com/watch?v=a11JDLBXtPQ&feature=relmfu
![Page 16: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/16.jpg)
1965. Xanadu
• Тэд Нельсон разрабатывает гипертекстовую систему Xanadu® — универсальный архив для хранения информации любого типа: текста, графики и т.п.;
• Именно здесь впервые прозвучали слова гипертекст и гипермедиа;
• Система никогда не была реализована в том виде, в котором была задумана;
• Тем не менее, проект Xanadu и в настоящее время развивает свои идеи (http://xanadu.com).
16
![Page 17: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/17.jpg)
Xanadoc
17
![Page 18: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/18.jpg)
1978. Aspen Movie Map
• Группа ученых Массачусетского технологического института во главе с Андреем Липпманомвоплотила идею взаимосвязанной сети спрайтовых картинок и даже создания фильмов с меняющимся по требованию пользователя сюжетом;
• Система предлагала виртуальное путешествие по Аспену (шт. Колорадо);
• Пользователям было доступно не только множество навигационных средств, но и глобальная карта для быстрого переключения к нужной точке города.
18
![Page 19: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/19.jpg)
1978. Aspen Movie Map
19
http://www.youtube.com/watch?v=Hf6LkqgXPMU
![Page 20: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/20.jpg)
1987. Hypercard
• Билл Аткинсон, сотрудник Apple Computers создает для собственных нужд HyperCard, чтобы отслеживать появление своих статей в прессе;
• Его заинтересовали алгоритмы эффективного поиска и упаковки данных, и он решил реализовать новые замыслы в общедоступном пакете;
• Он смог перенести каталог из ста тысяч книжных карт библиотеки Лос-Гейтос в формат HyperCard, в результате чего поиск в HyperCard по запросу к 15-мегабайтной БД сократился с 10 мин до 2 с.
20
![Page 21: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/21.jpg)
1987. Hypercard
21
![Page 22: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/22.jpg)
World Wide Web
• Осенью 1990 года сотрудники CERN получили в пользование первый "веб сервер" и "веб браузер", написанные Тимом Бернерсом-Ли в среде NeXTStep;
• Летом 91-го года проект "WWW" пересёк океан и влился в американский проект "Internet". Возникает параллельный мир новорожденных аббревиатур: URL, HTTP, HTML.
22
![Page 23: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/23.jpg)
Information Management: A ProposalTim Berners-Lee, CERN March 1989, May 1990
23
![Page 24: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/24.jpg)
Концептуальная модель веб дизайна
• Перед тем, как мы решим, что
мы делаем, мы должны
решить, почему мы это делаем.
• Jeffrey Veen
• The Art & Science of Web Design
24
![Page 25: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/25.jpg)
Издания на бумаге и в сети
• Стандартное печатное издание базируется на тексте и изображениях;
• При публикации в веб добавляется третья составляющая — интеракция, обеспечиваемая кодом. Пользователь работает с вебом интерактивно: Покупка билетов;
Общение в форуме;
Онлайновое обучение;
Поиск информации.
25
![Page 26: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/26.jpg)
Основа концептуальной модели Веб:Текст – Изображение - Код
26
![Page 27: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/27.jpg)
Расширение модели
• Мир публикаций Веб расширяет модель “Текст – Изображение - Код” к модели “Презентация – Структура - Поведение”.
27
![Page 28: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/28.jpg)
Презентация – Структура - Поведение
• Презентация — как эта организация представлена пользователю визуально;
• Структура — как нечто организовано и оптимизировано для легкого понимания и использования;
• Поведение — каким образом пользователи могут взаимодействовать с продуктом и каково будет поведение продукта в результате этого взаимодействия.
28
![Page 29: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/29.jpg)
Команда разработчиков• При дальнейшем изучении внутреннего
взаимодействия между отдельными частями такой модели, становится ясно, что эта модель подходит не только для общей концепции веба, но и для реальных групп разработчиковработающих над созданием современных сайтов.
• Построение команды для разработки веб проекта очень похоже на построение самого веб проекта.
• Точное соответствие дисциплинам содержания оформления и программирования, а также управление балансом между ними, может быть таким же трудным, как построение самого проекта.
29
![Page 30: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/30.jpg)
Структура команды разработчиков
30
![Page 31: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/31.jpg)
Упрощенный подход к Веб-дизайну
• Есть программисты и графические дизайнеры, (есть код и визуальный шаблон), нет информационной архитектуры.
31
![Page 32: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/32.jpg)
Введение в информационную архитектуру
• IA отличается от визуального дизайна или программирования тем, что фокусируется на структуре веб сайта, а не на его внешнем виде или функциональности;
• Целью IA является построение веб сайта, простого в использовании, отвечающего целям как клиента (заказчика), так и пользователя.
32
![Page 33: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/33.jpg)
Пример: сайт заказа завтракаYourbreakfast.comМы предлагаем
интегрированное
решение для легкого
решения утренних
потребностей.
Заполните форму для
выяснения ваших
предпочтений к завтраку
Ваш персональный
конфигуратор завтрака
готов. Пожалуйста
залогиньтесь.
ЛогинНаша история Пресс релизы
Горячие напиткиСоки Что намазываем Хлеб
Чай Джем Арахисовое маслоКаша
Кофе Сыр 33
![Page 34: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/34.jpg)
Пример 1: сайт заказа завтракаYourbreakfast.comМы предлагаем
интегрированное
решение для легкого
решения утренних
потребностей.
Заполните форму для
выяснения ваших
предпочтений к завтраку
Ваш персональный
конфигуратор завтрака
готов. Пожалуйста
залогиньтесь.
ЛогинНаша история Пресс релизы
Горячие напиткиСоки Что намазываем Хлеб
Чай Джем Арахисовое маслоКаша
Кофе Сыр 34
Не сфокусирован на пользовательских нуждах
Извилистая функциональность
Противоречивая организация
![Page 35: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/35.jpg)
Плохая Информационная Архитектура
• Плохая Информационная Архитектура извилиста, противоречива и сложна, без всякой на то необходимости. Она затрудняет использование веб сайтов.
35
![Page 36: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/36.jpg)
Пример 2: другой сайт заказа завтрака
Breakfasttable.comСсылка: Такой же
завтрак, как вчера
Соки Арахисовое масло
Чай Сыр
ДжемКофе
БутербродыНапитки Каша
36
• Хорошая Информационная Архитектура проста, ясна и
элегантна. Делает использование веб сайта максимально
простым.
![Page 37: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/37.jpg)
Что делает информационная архитектура?
• Корневая задача IA — организация информации на веб сайте таким образом, чтобы пользователи могли находить то, что им нужно и достигать своих целей (пример –покупка продуктов в большом магазине);
• Чем счастливее будет пользователь, тем больше он купит продуктов или услуг, проведет на сайте больше времени, что сделает бизнес более прибыльным;
• Информационная Архитектура — это не наука о диаграммах, это наука о коммуникации.
37
![Page 38: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/38.jpg)
Задачи Информационной Архитектуры
1. Изучение пользователя: что делают люди, чтобы достичь своих целей, посещая веб сайт?
2. Определение содержания и функциональности: как это должно помочь пользователю достичь своих бизнес целей?
3. Разработка организационных схем: как веб сайт должен быть организован?
4. Разработка интерфейса совместно с графическим дизайнером.
5. Отслеживание этих задач в процессе построения сайта.
38
![Page 39: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/39.jpg)
IA в реальной жизни и в Веб
39
![Page 40: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/40.jpg)
Цели и способы организации содержания
• Имеется бесконечное количество путей для того, чтобы организовать одну и ту же информацию.
• Бизнес цели и цели пользователей управляют тем, какая организационная схема используется.
40
![Page 41: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/41.jpg)
Разные возможности организации:Вариант 1.
Добро пожаловать
к столу для
завтрака
БутербродыНапитки Каша
41
![Page 42: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/42.jpg)
Разные возможности организации:Вариант 2.
Добро пожаловать
к столу для
завтрака
Завтраки для занятых
женщин
Завтраки для школьников Завтраки для всех
42
![Page 43: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/43.jpg)
Разные возможности организации:Вариант 3.
Добро пожаловать
к столу для
завтрака
Поделитесь своей
историей о завтраке
Посмотрите, что едят
знаменитые люди
Зарегистрируйтесь для
международного
виртуального стола для
завтрака
43
![Page 44: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/44.jpg)
Разные возможности организации:Вариант 4.
Добро пожаловать
к столу для
завтрака
ХлебВыберите продукт Каша
44
![Page 45: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/45.jpg)
Что является результатом IA?(Чему мы научимся?)
• В Информационной архитектуре используется множество методологий, среди которых самыми популярными являются две:
1. Описание сайта с точки зрения содержания и организации — чаще всего в виде карты сайта;
2. Функциональное описание, объясняющее как, предположительно, будет работать Веб сайт.
• Уровень детализации в этих описаниях может широко варьироваться.
45
![Page 46: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/46.jpg)
Список содержания и организация
Yourbreakfast.comМы предлагаем
интегрированное
решение для легкого
решения утренних
потребностей.
Заполните форму для
выяснения ваших
предпочтений к завтраку
Ваш персональный
конфигуратор завтрака
готов. Пожалуйста
залогиньтесь.
ЛогинНаша история Пресс релизы
Горячие напиткиСоки Что намазываем Хлеб
Чай Джем Арахисовое маслоКаша
Кофе Сыр
• IA отвечает за список всего содержания и структуры веб сайта. Чаще всего они представлены в виде карты сайта, таблицы содержания, функциональных диаграмм.
46
![Page 47: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/47.jpg)
Список содержания
47
![Page 48: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/48.jpg)
Описание функциональности
• Описание функциональности и потока задач описывает, как работает веб сайт, как совместно работают отдельные страницы и какие задачи могут выполнить люди.
• Представление также может выражаться в разных формах, например, сценариями и блок-схемами.
48
![Page 49: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/49.jpg)
Пример:Сценарий 1.
• Персонаж: Игорь
• Функция: Предложение запомнить завтрак
• Сценарий: Игорю нравится каждый день завтракать одинаково.
Поэтому каждый день он заходит на сайт и делает один и тот же
выбор. По прошествии времени веб сайт замечает это и предлагает
запомнить содержание любимого завтрака. Игорь обращает
внимание на иконку, предлагающую эту услугу и подтверждает свой
выбор. Отныне ему надо только щелкнуть по специальной ссылке,
чтобы получить свой любимый завтрак.
49
![Page 50: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/50.jpg)
Пример:Блок-схема 1.
Пользователь
начинает выбор
завтрака
Больше, чем
пять раз?
Акцептирован
?
В следующий раз
показать ссылку
Да
Да
Нет
Нет
Нет
Страница завтрака Предложить
запомнить завтрак
Такой же, как
и в прошлый
раз?
Увеличиваем
счетчик (+1)
50
![Page 51: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/51.jpg)
Модульная сетка (каркас)
• Подобно наброскам пользовательского интерфейса, модульные сетки (каркасы) отражают дизайн интерфейса, не показывая дизайн визуальный. Они отражают кнопки, ссылки, содержание и другие элементы страницы, а также взаимосвязь между ними.
• Модульные сетки разрабатываются информационным архитектором совместно с визуальным дизайнером.
• Они полезны, поскольку позволяют сфокусироваться на структуре пользовательского интерфейса, без затрат на дорогое обновление визуального дизайна.
51
![Page 52: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/52.jpg)
Пример:Модульная сетка 1.
Breacfast.com
Моя учетная запись
Главная Напитки Хлеб Каша
Добро пожаловать на , здесь Вы можете заказать завтрак с доставкой на место.
Breakfast.com
Заказать такой же завтрак, как и вчера
Реклама. Фото: Яйцо, бутерброд и кофе всего за за 60 крон
Реклама.Фото: Яйцо, тост, круасан и кофе всего за за 55 крон
Реклама.Фото: Яйцо, тост, круасан и сок всего за за 58 крон
Как мы работаем?На Вы можете заказать любой завтрак на свой вкус и он будет бесплатно доставлен Вам на дом в удобное для Вас время.
breakfast.com
Узнать больше...
ПОДПИШИТЕСЬ И ПОЛУЧИТЕ БЕСПЛАТНУЮ ДОСТАВКУ!
О нас Политика приватности Вакансии Пресса / / /
52
![Page 53: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/53.jpg)
Парная работа: поиск необходимостей
1. Интервьюируйте партнера: задача кратко описать утро студента:
– Какие активности студент делает каждое утро?
– Что ему мешает? Чего не хватает?
– Какая информация ему нужна?
Интервью 10 минут, затем смена ролей.
2. Описать проблемы
3. Как можно помочь студенту решить часть утренних проблем? Описать возможные варианты
4. Выступить с 2-х минутной презентацией результатов
53Проектирование Пользовательских Интерфейсов
![Page 54: 01. web design](https://reader033.vdocuments.pub/reader033/viewer/2022042716/55a2d7a61a28ab887d8b4588/html5/thumbnails/54.jpg)
Задание на дом №1:
• Создать краткое описание вашего будущего проекта: Имя сайта;
Краткая характеристика бизнеса заказчика (размер учреждения, оборот, персонал, производство, склады);
Описание продукции и услуг;
Целевая аудитория;
Бизнес задачи данного сайта (Увеличение продаж, реклама компании, поиск партнеров и т.п.).
• Результат до следующего занятия опубликовать в LePress
54