My Web UI Basics course. A very basic overview of technologies and processes to be used on Web / Front End Level.

1. WEB UI Basics
Lesson 1 - Overview
Alex Perez Tchernov

2. Общая структура

3. Общая структура
• Пользователь
• Браузер как контейнер (HTML, JS, CSS,
внутренние возможности, File System,
расширения, сетевой стек, потоки)
• Среда доставки (прокси, DNS,
Промежуточный кеш, другое..)
• Фронтенд
• Бэкенды, Среды коммуникации...

4. Пользовательское
восприятие

5. Пользовательское восприятие
1. Для какой целевой аудитории и контекста
создан заданный сайт.
А именно, попробуйте для представленного
ресурса определить, для какого пользователя
представленный стиль, тематика, наполнения
ресурса окажутся идеальными. Сколько
пользователю лет, где он живет, чем
увлекается. Какие цели он преследует,
посещая этот сайт. В каком контексте он это
делает.

6. Пользовательское восприятие
2. Назовите несколько «главных»
сообщений, передаваемых сайтом. А имено,
на что вы обратили внимание при
первоначальном посещении. Чем вы
«увеклись», что захотели посмотреть. Какие
ощущения остались после посещения сайта,
что «запомнилось».

7. Пользовательское восприятие
3. Насколько «цельным» и «ценным»
оказался сайт. А именно, навигация,
функциональность, оформление,
представленные материалы, тексты – были
ли выполненные в согласованной манере.
Заметили ли вы что- то «мешающее»
согласованному восприятию сайта. Получили
ли вы какую-то информационную или
эмоциональную ценность от сайта.

8. Пользовательское
восприятие
Этапы

9. Профессии в области UI / UX
Information Architect / Usability Architect / WebSite
Information Architect / User Experience Architect
Senior User Research Specialist / User Experience
Researcher / Usability Analyst
Usability Engineer / Principal Product Definition Engineer
User Experience Designer / User Interface Designer /
Product Designer / Interaction Designer / User Interface
Software Engineer / Web Designer (Web Design
Developer)

10. Ключевые обязанности
• Роль «адвоката человеческого фактора». Понимание
одновременно требований бизнеса и требований к
разработке продукта, в т.ч. с точки зрения HCI; Хорошие
коммуникативные и презентационные навыки.
• Анализ пользовательских характеристик интерфейсов
(тестирование, оценка и пр.) Планирование и проведение
исследований, умение собирать данные и обрабатывать
их с помощью опросов, экспериментов. Владение
методами: task analysis, contextual inquire, heuristic
evaluations, user interface design, user research, concept
testing, usability testing, benchmark studies, competitive
evaluations, participatory design sessions, ethnographic field
studies, user surveys, heuristic evaluation;
• Прототипирование / дизайн / верстка / кодирование
sigchi.ru/Seminars/03/S03_Kryuchkov.ppt

11. Этапы
From Usability.gov

12. Браузер как
контейнер

13. Возможности браузера
• Отображение HTML
• Выполнение JS
• Использование CSS
• Использование сетевого стека
• AppCache, WebStorage (local / session), WebSQL
/ IndexedDB, File APIs, Geolocation API, WebRTC
+ Audio, Canvas (GPU), WebWorkers,
WebSockets
• NAPI

14. Пример «расширения» (WebRTC)

15. Возможности браузера
• HTML + CSS
• HTML + CSS –> JS
• HTML + CSS –> JS -> AJAX -> HTML (DOM)
• HTML -> JS …
• Semantic Markup + (extensions)
• XSLT

16. Под нагрузкой
• Worst / Average / Almost Always
• Загрузка по требованию (js / data) или
prefetching (опережающая)
• Паковка в нужные блоки (js), компиляция
(LESS, Closure Stylesheet, Closure, GWT),
сжатие
• Асинхронные вычисления (подготовка
данных) - webworkers, templates, json
• Хранение данных на клиенте
• Форматы данных (protobuf, json, binary)

17. Среда доставки

18. Между браузером и сервером
• Прокси с кешем (etag, expiration, URLs)
• CDN
• WebRTC (Peering) + STUN
• DNS, BIG IP

19. Фронтенд

20. Фронтенд
• Отдача статики (js, css, части html)
• Проксирование на бэкенды
• Выполнение SSI вставок
• Выполнение шаблонизации
• Работа с кешем (иерархия, переполнение,
обновление, заполнение, политика
устаревания)
• Кластеризация (+ часто до фронтенда)

21. Бэкенды

22. Бэкенды и процесс сборки для
занятий
• Передаю тривиальный REST Interface (GET,
POST, PUT, DELETE) + URL +
Автосгенерированная документация.
• Инструменты сборки JS
• Инструменты тестирования
• Инструменты дебага
• Инструменты размещения
• Инструменты * версионирования