Webuibasics - Lesson 1 - Overview (in russian)
- 1. WEB UI Basics Lesson 1 - Overview Alex Perez Tchernov
- 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
- 13. Возможности браузера • Отображение HTML • Выполнение JS • Использование CSS • Использование сетевого стека • AppCache, WebStorage (local / session), WebSQL / IndexedDB, File APIs, Geolocation API, WebRTC + Audio, Canvas (GPU), WebWorkers, WebSockets • NAPI
- 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 • Инструменты тестирования • Инструменты дебага • Инструменты размещения • Инструменты * версионирования