Webuibasics - Lesson 2 - HTML5 Layouts (in russian)

548 views
446 views

Published on

HTML5 basic prototyping

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
548
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webuibasics - Lesson 2 - HTML5 Layouts (in russian)

  1. 1. WEB UI BasicsLesson 2 – HTML alex.pereztchernov@gmail.com
  2. 2. Прототипирование
  3. 3. Процесс• Анализ - юзабилити экспертиза конкурирующих продуктов (недостатки, эргономические решения и требования) - notepad, контекст рабочей среды - notepad, роли, цели и задачи по ролям, Use Case Map - umlet• Контентная, навигационная (концептуальная) модель - xmind• Прототип - evolus pencil• Проверка рабочих гипотез (+ protonotes)
  4. 4. Средства прототипирования http://www.orqwe.com/Programming/Prototyping
  5. 5. Замечания• Стиль клиента, предметной области• Минимализм или отсутствие цветов• Сетка• Максимизация детальности названий• Минималистичен (не дизайн)• Пометка интерактивных элементов, пометка, что нужно нажимать (Axure и др.)• Стандартные контроллы
  6. 6. Верстка - семантика
  7. 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. 8. Структура страницы HTML<!DOCTYPE html>
  9. 9. Структура страницы HTML
  10. 10. Структура страницы HTML
  11. 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. 12. Домашнее задание??! http://vkurse.ua/i/2007-10/domashnee-zadanie-v-internete.jpg
  13. 13. Домашнее задание!• Получить задание и просмотреть аналогичные решения на предмет анализа эргономических решений и свойств• Создать карту ролей и вариантов использования в Umlet• Создать концептуальную схему в xmind• Создать прототип в Pencil (1-2 стр).• Сверстать HTML в Sublime• Открыть в Chrome (Web Tools)

×