Animation effects в HTMLayout - Пользовательский интерфейс: проектирование, usability

Сначала картинка:

Скриншот получен во время проноса мыши над <img>ами

Вот HTML который вы видите:

<style type="text/css"> 
  img 
  { 
    width:16px; 
    height:16px; 
    foreground-image:url(led-green.png);
  }

  img:hover
  { 
     foreground-image:url(led-red.png);
     transition: blend;  
  }

  body { background-color:#c7c5c6; }
  
</style>
...

<body>
  <div>
  <img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><br>
  <img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><br>
  ....
  </div>
</body>

Идея следующая: я добавил в CSS атрибут transition который принимает два значения пока
— blend — это то что вы видите и
— slide — это поведение панелей на left side bar в Windows Explorer (XP)

Концепт сдедующий:

img:hover
{
transition: blend;
}

означает что переход в hover state или уход с него делается плавно путем последовательного
микса (blend) начального и конечного состояний.

Тоже самое и про transition: slide; — если при смене состояния изменились размеры элемента
он плавно "съезжает".

Вопрос имеет ли смысл делать что-то еще?

Сама идея blend эффект позаимствована из Opera, там кнопки все так себя ведут.

Теперь то же самое но с popup

Кстати popups описываются в HTMLayout так:

  #test 
  { 
    behavior:dropdown; 
  }
  #test popup
  { 
    padding:4px;
    background-color:white #c7c5c6 #c7c5c6 #c7c5c6; /* это градиентная заливка */
  }
 
... html ...

  <div id="test">Click here to see popup
     <popup>
        <img><img><img><img><img><img><img><img><img><img><br>
    <img><img><img><img><img><img><img><img><img><img><br>
              ... 
    <img><img><img><img><img><img><img><img><img><img>
     </popup>
  </div>

behavior dropdown живет в SDK в файле htmlayoutsdk/include/behaviors/behavior_popup.cpp
Он просто по mouse click показывает popup

Есть еще второй тип popup окон — tooltips. Они задаются как

<div title="простой тултип">...

или так 

<div titleid="tooltip1">...
....
....
<popup id="tooltip1">
  <p>html <b>formatted</b> tooltip...</p>
</popup>

CS>Вопрос имеет ли смысл делать что-то еще?

*drools* (ну, для меня это обычное состояние при виде HTMLLayout

)

Вопрос в общем — переходы состояний возможны только для изображений или и для произвольных объектов вообще. И только для background/foreground-image или принимается во внимание весь стиль?

Здравствуйте, Mamut, Вы писали:

M>Вопрос в общем — переходы состояний возможны только для изображений или и для произвольных объектов вообще. И только для background/foreground-image или принимается во внимание весь стиль?

Все скопом — и вместе с ambient background если элемент полупрозрачный.

Технически я делаю два битмапа (скриншота) "до" и "после" и в цикле (8 шагов) их замешиваю.
По умолчанию все дейсвто у одного элемента длится 200 ms.

Здравствуйте, c-smile, Вы писали:

Несколько оффтопично, но всё-таки...

C-smile, вы приводили уже несколько подобных примеров. Реализация, насколько я видел — это behaviours, исполняющиеся с помощью отдельной dll.

Вопрос: а какой собственно в этом смысл? понятно что интересно изучить и всё такое. А практический смысл?
Насколько я понимаю, для веб-приложений это не покатит, так? или я не прав?
Остаются настольные GUI-приложения с веб-интерфейсом. Ну а там, как я понимаю — те же проблемы что и у HTA — например, с настройкой безопасности для веб-страниц. Пример — MBSA, которая под Windows XP SP2 ограничивается в действиях самой системой.
Т.е. вообще говоря, не могли бы вы развернуто рассказать о преимуществах демонстрируемых технологий?..

Здравствуйте, nzeemin, Вы писали:

N>Здравствуйте, c-smile, Вы писали:

N>Несколько оффтопично, но всё-таки...

N>C-smile, вы приводили уже несколько подобных примеров. Реализация, насколько я видел — это behaviours, исполняющиеся с помощью отдельной dll.

N>Вопрос: а какой собственно в этом смысл? понятно что интересно изучить и всё такое. А практический смысл?
N>Насколько я понимаю, для веб-приложений это не покатит, так? или я не прав?
N>Остаются настольные GUI-приложения с веб-интерфейсом. Ну а там, как я понимаю — те же проблемы что и у HTA — например, с настройкой безопасности для веб-страниц. Пример — MBSA, которая под Windows XP SP2 ограничивается в действиях самой системой.
N>Т.е. вообще говоря, не могли бы вы развернуто рассказать о преимуществах демонстрируемых технологий?..

"это behaviours, исполняющиеся с помощью отдельной dll."

HTMLayout это единственный в своем роде встраиваемый (sic!) HTML/CSS engine.
Т.е. HTMLayout не есть application.

"behaviours" это некие behaviors (классы) имплементированные в коде host apllication на языке
именно host application. behaviors описывают поведенческие свойства классов HTML элементов с
учетом специфики и потребностей host application.

К слову сказать:
Я готовлю к выпуску именно application построенный на базе htmlayout —
эдакий smart client — там custom behaviors описываются только скриптами.

Этот самый smart client app (проект "Пандора" (с иронией)) внешне "голое" окно с одной темой меню — load.
Для того чтобы сделать из него например броузер нужно в него загрузить файл browser.ha — html/css/script = hypertext application. Для того чтобы получить себе e-mail — cоответсвенно — email.ha. Для того чтобы иметь и browser и email вместе —
пользователю предлогается нарисовать <frameset> и положить его в файл my_personal_infospace.ha.

Типа того.

От:	c-smile	http://terrainformatica.com
Дата:	03.11.05 04:57
Оценка:	98 (5)

От:	c-smile	http://terrainformatica.com
Дата:	03.11.05 06:00
Оценка:

От:	Mamut	http://dmitriid.com
Дата:	03.11.05 11:53
Оценка:

От:	c-smile	http://terrainformatica.com
Дата:	03.11.05 17:10
Оценка:	1 (1)

От:	nzeemin	http://nzeemin.livejournal.com/
Дата:	04.11.05 08:48
Оценка: