Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (19)
Similar to Webuibasics - Lesson 2 - HTML5 Layouts (in russian)
Similar to Webuibasics - Lesson 2 - HTML5 Layouts (in russian) (20)
Webuibasics - Lesson 2 - HTML5 Layouts (in russian)
- 1. WEB UI Basics Lesson 2 – HTML alex.pereztchernov@gmail.com
- 3. Процесс • Анализ - юзабилити экспертиза конкурирующих продуктов (недостатки, эргономические решения и требования) - notepad, контекст рабочей среды - notepad, роли, цели и задачи по ролям, Use Case Map - umlet • Контентная, навигационная (концептуальная) модель - xmind • Прототип - evolus pencil • Проверка рабочих гипотез (+ protonotes)
- 4. Средства прототипирования http://www.orqwe.com/Programming/Prototyping
- 5. Замечания • Стиль клиента, предметной области • Минимализм или отсутствие цветов • Сетка • Максимизация детальности названий • Минималистичен (не дизайн) • Пометка интерактивных элементов, пометка, что нужно нажимать (Axure и др.) • Стандартные контроллы
- 7. Структура страницы HTML • <!DOCTYPE html> <html><head></head><body></body></html> • <head> <meta charset="utf-8"/><script></script><style></styl e></head> МИНИМАЛЬНО <!--[if IE]> <script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); </script> <![endif]--> ИЛИ (ЛУЧШЕ) <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lte IE 7]> <script src="js/IE8.js" type="text/javascript"></script><![endif]--> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
- 8. Структура страницы HTML <!DOCTYPE html>
- 11. Нюансы, примеры • Типичные ошибки (нюансы) http://html5doctor.com/avoiding-common-html5-mistakes (http://habrahabr.ru/post/124993) • Примеры использования http://www.w3schools.com/html5/ • Справка - HTML Visual Cheet Sheet • Примеры по формам (домашнее задание) http://24ways.org/2009/have-a-field-day-with-html5-forms
- 12. Домашнее задание??! http://vkurse.ua/i/2007-10/domashnee-zadanie-v-internete.jpg
- 13. Домашнее задание! • Получить задание и просмотреть аналогичные решения на предмет анализа эргономических решений и свойств • Создать карту ролей и вариантов использования в Umlet • Создать концептуальную схему в xmind • Создать прототип в Pencil (1-2 стр). • Сверстать HTML в Sublime • Открыть в Chrome (Web Tools)