Рассмотрим на предыдущем примере точек, как можно придать объекту некоторую объемность и искривление в пространстве.
1. Создание волнообразного эффекта.
Выделим объект с точками.
После этого в меню Object –> Envelope Distort выберем теперь доступный пункт Make Warp Group. На основе нашего объекта и сетки создается группа деформации.
Теперь с помощью инструмента Direct Selection
можно потянуть за опорные точки сетки, создав искривление объекта в пространстве.
Например, одну точку по вертикали можно потянуть вверх, а следующую, ниже нее, можно потянуть вниз (точки обведены синим).
Аналогично, соседние точки, через одну вертикаль, можно растянуть в обратную сторону.
Таким образом, перетаскивая точки на сетке, можно создать сжатие или расширение объекта в некоторых местах, в результате получив волнообразный объемный эффект.
2. Редактирование объекта трансформации.
Следует заметить, что объект, лежащий в основе группы деформации, можно вполне редактировать (после группировки может появить впечатление – что это путь трансформации в одну сторону). На самом деле, объект вполне можно редактировать и после деформации, выбрав в меню Object – > Envelope Distort –> Edit Warp Group.
При этом, объект для редактирования откроется в новом окне. Его можно изменить, повернуть, перекрасить. После закрытия окна, изменения перенесутся на основной документ, а сетка останется прежней.
3. Фиксация трансформации.
Окончательно зафиксировать изменения, сделанные с помощью сетки деформации, можно применив разгрупировку объекта и сетки (Arrange – > Ungroup).
Рожица кривая конечно может выйти, но в текущем случае – поговорим об абстрактных фоновых изображениях, вернее как их можно намутить из одной точки и нехитрой операции в Expression Design.
И так, нам нужно поле для деятальности – или прямоугольник 800х600 (к примеру), залитый сверху вниз градиентом от насыщенного темного цвета - к чуть более светлому и яркому.
Например вот так.
В качестве цветов градиента я выбрала #65FEF6 и #008A7C. После прорисовки фона- заблокируем слой – чтоб случайно еще не сместить. (Сделать это можно на панели Layers, кликнув на замочке напротив нужного слоя)

Точка. Точка – это маленький круг, а круг это эллипс, а эллипс это... В общем выбираем в качестве инструмента для рисования – Ellipse. И делаем небольшую такую точку- размером 10х10 пикселей белого цвета (на картинке просьба не пугаться размеров – она действительно маленькая, масштаб только большой).
Еще одна точка. Сделать еще одну точку? Нет проблем. Просто сделаем copy-paste этого объекта. И заодно увеличим размеры в два раза – эта точка будет 20х20.
Расставим точки. Не по углам, но на достаточном расстоянии друг от друга по вертикали. Так чтобы маленькая была вверху, а большая внизу.

Выравниваем горизонтальные центры. Выделяем с помощью инструмента Selection обе точки либо нажав Ctrl + A (в нашем случае выделятся только две точки- так как фон заблокирован). И на панели Action Bar в выпадающем списке Align выбираем пункт Horizontal Centers. Теперь наши точки находятся по вертикали на одной линии.
Blend Paths. Не снимая выделения с точек – выбираем через меню Object знакомую нам операцию Blend Paths. В открывшемся окне задаем кол-во шагов 22 (от 20 до 30 -зависит от расстояния между вашими точками). Подбор необходимо делать из того рассчета, что после применения операции Blend Paths, нижние точки должны немного находить друг на друга, а верхние должны быть на большем расстоянии, как на след. изображении:
После предыдущем операции в панели Layers кроме двух точек и фона должна появится группа объектов.
Выделяем снова через Ctrl + A все объекты (две точки и группу) и на панели Action Bar применяем действие Path –> Unite.
Теперь вся эта котовасия из кучи точек представляет собой один контур-объект (это сделано для дальнейшего облегчения работы).
Повтор. Теперь делаем похожую операцию как было сделано выше – только по горизонтали. Объект оттаскиваем влево к самому краю фона, копируем его, оттаскиваем второй объект по горизонтали к самому краю вправо, выделяем, выравниваем центры этих двух объектов по вертикали (Панель Action Bar – > Align –> Vertical Centers).
И снова выделив два эти объекта делаем операцию Blend Paths. Кол-во шагов – 45 (выбираем по тому же принципу что и выше).
Получаем такую картинку:
После этого снова выделяем через Ctrl + A все объекты (два объекта – левый и правый и группу) и на панели Action Bar применяем действие Path –> Unite.
Заливка. Теперь к нашему объекту можно применить заливку градиентом. Можно выбрать такие же цвета как у фона и поэкспериментировать с направлением градиента
А можно выбрать градацию белого от полного прозрачного до полностью непрозрачного.
Затем направление градиента
сверху вниз и получим вот такой симпатичный переход из точек. А в начале была всего лишь одна.:)

Прилагаю итоговый файл.
В следующем году (очевидно в первом полугодии) намечается выход Silverlight 3. Пару слов о том, что там будет:
- Расширение работы с мультимедиа данными - включая поддержку HD-видео, закодированного с использованием кодека H.264 (позволяющего достигать высокой степени сжатия видеопотока при сохранении высокого качества);
- значительные улучшения по работе с графикой - сюда также входит поддержка 3D и поддержка GPU-ускорения;
- улучшения по разработке приложений - дополнительные элементы управления и расширение возможностей привязки данных;
- В Visual Studio и Visual Web Developer Express планируется внедрение дизайн-редактора (а не только просмотрщика) XAML, наподобии того что есть в Expression Blend.
- Ну а также много всего другого, о чем пока не говорится в статье Скота Гутри.
P.S. За Оперу чур не спрашивать – пока ничего не известно:)
В ноябрьском журнале MSDN Magazine опубликована статья о том, как можно вместе использовать SharePoint и Silverlight за счет интеграции Silverlight приложения (на примере Silverlight медиа-проигрывателя) внутри SharePoint Web Part.
Необходимый инструментарий (на текущий момент) для создания Silverlight приложения для SharePoint:
- Windows Server 2003 или Windows Server 2008
- Windows SharePoint Services 3.0 и SP1
- Microsoft Office SharePoint Server 2007 и SP1
- Visual Studio 2008 Professional Edition
- Silverlight Tools для Visual Studio 2008
- Silverlight 2 RTW
- Windows SharePoint Services 3.0 Tools: Visual Studio Extensions, Version 1.2
Читайте оригинал статьи - Light Up SharePoint With Silverlight 2 Web Parts и дополнительно информацию о Silverlight + SharePoint смотрите в пункте Silverlight раздела Learn How to Develop on SharePoint
Кто интересовался структурой и оптимизацией .XAP-файла Silverlight-приложения, в курсе, что это сжатый с помощью .zip-архивации файл, содержащий DLL-ки, используемые в вашем Silverlight-приложении, а также вcтроенные при необходимости Вами внешние ресурсы (типа картинок, видео и т.д.).
При желании, можно попытаться уменьшить размер .XAP-файла, используя различные утилиты типа WINRar или 7-ZIP.
Можно еще воспользовать маленькой программкой ReXapper которую выложил недавно на своем сайте Rob Houweling.
Для достижения цели необходимо:
1. Скопировать исполняемый файл в удобную папку,
2. В свойствах проекта в VS в закладке “Build Events” в поле "Post-build event command line" вставить такую строку, заменив предварительно путь к ReXapper-у на свой:
С:\install\ReXapper\ReXapper.exe -xap "$(TargetDir)$(TargetName).xap"
3. Пересобрать проект.
В результате можно добиться уменьшения размера .XAP-файла на 18-33% для различных проектов. Достаточно хороший результат.
P.S. Также смотрите по теме
Несколько экспериментов с DrawingBrush для создания текстурированого фона в WPF приложениях. Цель – разнообразить фон только с помощью простых форм, их поворотов на определенный угол, совместной комбинации нескольких созданных текстур без использования определенных навыков рисования в графических редакторах.
Цвета. Текстура фона не должна сильно отвлекать от основной цели приложения, поэтому используемые цвета будут бледных оттенков плюс прозрачный цвет.
Добавим 4 цвета в ресурсы приложения, ключевые названия которых будут нам понятны.
<SolidColorBrush x:Key="Transparent" Color="Transparent"/>
<SolidColorBrush x:Key="White" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="Gray" Color="#FFE5E5E5"/>
<SolidColorBrush x:Key="GrayLight" Color="#66E5E5E5"/>
Зададим некоторые параметры приложения и сделаем приготовления, а именно:
- установим поддержку прозрачности окна
- уберем стиля окна
- разместим кнопку закрытия окна, на которую повесим соответствующее событие
- создадим парочку прямоугольников со скругленными углами, на которых будем тестировать текстуры.
<Window …… Height="300" Width="300" Background="Transparent" WindowStyle="None" AllowsTransparency="True">
<Canvas>
<Rectangle Fill="White" RadiusX="10" RadiusY="10" Width="290" Height="290" Margin="0,10,0,0" />
<Rectangle Stroke="{StaticResource Gray}" RadiusX="10" RadiusY="10" Width="290" Height="290" Margin="0,10,0,0" />
<Button Canvas.Left="270" Height="25" x:Name="closed" Width="30" Foreground="#FFFFFFFF" Content="X" Click="Closeit"/>
</Canvas>
</Window>
Теперь можно издеваться над фоном двух прямоугольников. У первого пока оставим текущий белый фон для заполнения, а второму пропишем заливку в качестве используемого ресурса Fill="{StaticResource qwadra}".
После этого в ресурсах создаем кисть для рисования с соответствующим именем. Режим замощения TileMode – мозаика (Tile). Позиция и размеры контрольного окна Viewport (Фактически точка отсчета и размеры минимальной единицы мозаики) – можно в последствии изменять, подбирая нужный масштаб.
1. Текстура клетки. Для рисования выбираем две геометрических фигуры. Это будут два маленьких квадратика стоящих по диагонали. Цвет – берем из наших готовых цветов.
<DrawingBrush x:Key="qwadra" Viewport="0,0,0.025,0.025" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L1,0 L1,1 L0,1 z" Brush="{StaticResource Gray}" />
<GeometryDrawing Geometry="M1,1 L2,1 L2,2 L1,2 z" Brush="{StaticResource Gray}" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
Получаем в итоге для фона рисунок “клетка”.

размер единицы мозаики можно редактировать в Viewport="0,0,0.025,0.025", изменяя последние два значения – высоту и ширину.
2. Текстура горизонтальных линий.
Используем два небольших прямоугольника серого и прозрачного цветов.
<DrawingBrush x:Key="horizont" Viewport="0,0,0.015,0.015" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L1,0 L1,1 L0,1 z" Brush="{StaticResource Gray}" />
<GeometryDrawing Geometry="M0,1 L1,1 L1,2 L0,2 z" Brush="{StaticResource Transparent}" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
Получаем серый полосатик.

Изменяя цвет в первом прямоугольнике <Rectangle Fill="White" …. на любой другой (например GhostWhite), можем получить цветную полоску.
3. Текстура вертикальных линий.
Особо не заморачиваемся с созданием вертикальной текстуры – а просто поворачиваем пред. на 90 градусов.
<DrawingBrush x:Key="vertical" Viewport="0,0,0.015,0.015" TileMode="Tile">
<DrawingBrush.RelativeTransform>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="90" />
</DrawingBrush.RelativeTransform>
<DrawingBrush.Drawing>
…
</DrawingBrush.Drawing>
</DrawingBrush>
4. Текстура линий под 45 градусов.
Аналогично пред. варианту поворачиваем на 45 градусов и на минус 45.
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
либо
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="-45" />
5. Диагональная объемная текстура.
Для этого используется три маленьких прямоугольника серого, светло-серого и прозрачного цвета. Ну и поворот на 45 градусов.
<DrawingBrush x:Key="d45dia" Viewport="0,0,0.015,0.015" TileMode="Tile">
<DrawingBrush.RelativeTransform>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
</DrawingBrush.RelativeTransform>
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L1,0 L1,1 L0,1 z" Brush="{StaticResource Gray}" />
<GeometryDrawing Geometry="M0,1 L1,1 L1,2 L0,2 z" Brush="{StaticResource Transparent}" />
<GeometryDrawing Geometry="M0,2 L1,2 L1,3 L0,3 z" Brush="{StaticResource GrayLight}" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
Также при желании снова меняя цвет фона в прямоугольнике – получаем разноцветные текстуры.
6. Наклонная перекрестная клетка.
Немного изменяем размеры и координаты точек прямоугольников. А также ставим поворот на 45 градусов.
<DrawingBrush x:Key="cross" Viewport="0,0,0.015,0.015" TileMode="Tile">
<DrawingBrush.RelativeTransform>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
</DrawingBrush.RelativeTransform>
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L2,0 L2,0.5 L0,0.5 z" Brush="{StaticResource Gray}" />
<GeometryDrawing Geometry="M0,0 L0.5,0 L0.5,2 L0,2 z" Brush="{StaticResource Gray}" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
Очень милая сеточка получилась:)
7. Кольца-кружки.
Текстура в кольца. Маленький и большой кружки, очерчивание и поворот на 45 градусов.
<DrawingBrush x:Key="circles" Viewport="0,0,0.05,0.05" TileMode="Tile">
<DrawingBrush.RelativeTransform>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
</DrawingBrush.RelativeTransform>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="{StaticResource Gray}">
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry RadiusX="0.5" RadiusY="0.5" Center="0.5,0.5" />
<EllipseGeometry RadiusX="0.25" RadiusY="0.25" Center="0.5,0.5" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Thickness="0.1" Brush="{StaticResource Transparent}" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
А если еще сместить центр у одного или у другого круга, то тоже забавные текстуры выходят.
Если добавить новую кисточку в ресурсы
<LinearGradientBrush x:Key="LightBack" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFCCCCCC" Offset="1"/>
</LinearGradientBrush>
и в последней текстуре ее использовать
<GeometryDrawing Brush="{StaticResource LightBack}">
то получим объемные пупырышки с небольшим металлическим эффектом.
P.S. Главное, что не полиэтилен с пупырышками, а то забавная игрушка может в конце получится :)
Silverlight Streaming обновлен для работы с Silverlight 2 RTW. Уже можно загружать обновленные приложения, а также просто видео-файлы. Как и раньше – ограничения на размер одного видео - 105 MB.
Небольшое замечание по работе SLS:
- сервис не работает больше с приложениями на Silverlight 2 Beta 2,
- изменений относительно приложений на Silverlight 1 нет.
Blend 2 SP1, WPF Toolkit и “маленький финт ушами” – и Visual State Manager для WPF работает. В блоге команды разработчиков продуктов Expression Blend and Design описан путь как это сделать.
- Необходимо скачать и установить WPF Toolkit.
- добавить в реестр значение EnableVSM типа DWORD (не равное 0).
- 32 bit OS : HKLM/Software/Microsoft/Expression/Blend/EnableVSM
- 64 bit OS : HKLM/Software/Wow6432Node/Microsoft/Expression/Blend/EnableVSM
- Перезапустить Blend, открыть готовый проект или создать новый, добавить в Reference - WPFToolkit.dll
- Переоткрыть Window1.xaml.
После этого в Blend появится панелька Visual State Manager.
Вышел сервис-пак к Expression Encoder 2, который включает в себя следующее:
- 6 Новых шаблонов для видео Silverlight 2 (DVD-стиль с навигацией по главам, субтитры, метаданные),
- поддержка IIS Smooth Streaming,
- кодирование видео в H.264/AAC,
- etc.

Также появилась версия Expression Encoder Express. Если использовалась триал-версия Expression Encoder и Вы решили его не покупать по истечении времени, то теперь есть возможность продолжить пользоваться программой, но с ограничениями. Вот такая обрезанная версия и называется Expression Encoder Express.
Список функций, отключенных в обрезанной версии, а также детальное описание смотрите на сайте Expression.
Хотелось бы немного детальнее остановиться на Silverlight Toolkit, а именно на “Темах” и ImplicitStyleManager.
Ранее стандартная техника в применении стилей в Silverlight заключалась в добавлении к каждому контролу атрибута Style=”{StaticResource MyButtonStyle}”.
В WPF же было все прекрасно – можно указать, например, что все кнопки или списки имеют такой стиль и больше об этом не заботиться. По аналогии, такой же подобный эффект можно наблюдать и в css+html: указать стили для абзацев, текстовых полей, сделать правила для вложенных тегов и т.д.
И как говорится – дождались :) С помощью ImplicitStyleManager стили определенные для конкретных контролов, применяются автоматом, без указания атрибута Style. А также работает механизм вложенности: если есть элемент который содержит другие элементы, то стили применяются автоматом для всех дочерных элементов. Главное – эти стили отдельно определить:)
Теперь немного примеров, как что куда и с чем.
Вариант первый. Применение стилей из набора Silverlight ToolKit.
Для того чтобы все это работало – необходимо сделать следующие вещи. Рассмотрим на примере работы с проектом в Expression Blend.
- Распаковать куда-то Silverlight Toolkit. Можно положить в папку с Вашим проектом, можно, например, создать папочку ToolKit в Program Files / Microsoft SDKs / Silverlight / v2.0 / и туда все положить для удобства.
- После создания проекта в Blend добавить в Reference dll-ку Microsoft.Windows.Controls.Theming.
- Если хотим использовать готовые темы из набора, то необходимо еще подключить также одну из самих тем:
- Microsoft.Windows.Controls.Theming.ShinyRed.dll
- Microsoft.Windows.Controls.Theming.ShinyBlue.dll
- Microsoft.Windows.Controls.Theming.RainierPurple.dll
- Microsoft.Windows.Controls.Theming.RainierOrange.dll
- Microsoft.Windows.Controls.Theming.ExpressionLight.dll
- Microsoft.Windows.Controls.Theming.ExpressionDark.dll
- После сих действий в Asset Library в закладке Custom Controls появится несколько новых элементов (в зависимости от того сколько вы добавили в пред пункте) - темы:
- Теперь тащим любую тему на нашу рабочую область, таким образом создав контейнер. Внутрь поместим Canvas, Grid, StackPanel или Border. Все новые стандартные и нестандартные контролы будем размещать внутри.
Код будет выглядеть следующим образом.
<Grid x:Name="LayoutRoot" Background="White">
<expressionDark:ExpressionDarkTheme HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" >
<Canvas Height="200" Width="300">
<RadioButton Height="30" Width="55" Content="Да" Canvas.Top="35" Canvas.Left="60" Foreground="#FF000000"/>
<RadioButton Height="30" Width="55" Content="Нет" Canvas.Top="35" Canvas.Left="130" Foreground="#FF000000"/>
<Button Content="Нажми меня" Height="35" Width="125" Canvas.Top="100" Canvas.Left="60"/>
</Canvas>
</expressionDark:ExpressionDarkTheme>
</Grid>
- При тестировании проекта убеждаемся что все стили для наших контролов из темы ExpressionDark работают.
- Аналогично работают две темы паралельно.
Кусочек желтой темы:
<rainerOrange:RainierOrangeTheme HorizontalAlignment="Left" VerticalAlignment="Top" Margin="200,0,0,0">
<Canvas Height="100" Width="100">
<RadioButton Height="30" Width="55" Content="Да" Canvas.Top="35" Canvas.Left="60" Foreground="#FF000000"/>
<RadioButton Height="30" Width="55" Content="Нет" Canvas.Top="35" Canvas.Left="130" Foreground="#FF000000"/>
<Button Content="Нажми меня" Height="35" Width="125" Canvas.Top="100" Canvas.Left="60"/>
</Canvas>
</rainerOrange:RainierOrangeTheme>
Вариант второй. Делаем свою тему и используем ImplicitStyleManager.
- Добавляем в проект новый xaml-файл и помечаем его в свойствах как Content.
- Делаем в файле ResourceDictionary и размещаем там стили уже без x:Key.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Style TargetType="Button">
…..
</Style>
</ResourceDictionary>
- Стили к контролам теперь можно применять благодаря ImplicitStyleManager следующим образом:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="DiscoverThemes.Page"
xmlns:pale="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
<Canvas pale:ImplicitStyleManager.ResourceDictionaryUri="Pale.xaml" pale:ImplicitStyleManager.ApplyMode="Auto" Margin="30">
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Content="Новая кнопка"/>
</Canvas>
</UserControl>
Заметим что у кнопки не прописан явно стиль. При тестировании мы видим что тема сработала.
- Блок с использованием своей темы можно разместить внутри блока, где используется базовая с Silverlight Toolkit.
<expressionDark:ExpressionDarkTheme HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" >
<Canvas Height="200" Width="300">
<RadioButton Height="30" Width="55" Content="Да" Canvas.Top="35" Canvas.Left="60" Foreground="#FF000000"/>
<RadioButton Height="30" Width="55" Content="Нет" Canvas.Top="35" Canvas.Left="130" Foreground="#FF000000"/>
<Canvas pale:ImplicitStyleManager.ResourceDictionaryUri="Pale.xaml" pale:ImplicitStyleManager.ApplyMode="Auto" Height="Auto" HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" Margin="0,0,0,0" Canvas.Top="0" Canvas.Left="0">
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Content="Нажми меня" Margin="70,100,70,70"/>
</Canvas>
</Canvas>
</expressionDark:ExpressionDarkTheme>
В общем хочется сказать, что Themes и ImplicitStyleManager в наборе Silverlight Toolkit заслуживают отдельного внимания и дальнейшего развития.
Недавно столкнулась с проблемой на сервисе Silverlight Streaming. Видео никак не хотело загружаться на сайт, а кнопка “Browse” была заблокирована. Выяснилось, что сервис Silverlight Streaming еще не обновлен для работы с Silverlight 2 RTW. Обновление планируется провести в ближайшее время.
А пока что симптомы такие:
- Silverlight Streaming пока что работает только с Silverlight 1 и Silverlight 2 Beta 2
- Если у Вас на машине уже установлен Silverlight 2 RTW, то кнопка “Browse” будет деактивирована.
- Вышенаписанное действует и для загрузки приложений, и для загрузки видео.

Живую трансляцию можно будет посмотреть на сайте PDС2008, и там же ознакомиться с общим расписанием. Ожидаемое начало старта трансляции - 8.30 AM (PST).
Сегодня сайт MIX предстал перед посетителями в новом виде. Темно-серый фон, светлый текст и яркие акценты.
Кроме внешнего изменения цветового оформления, изменилась структура сайта, а также Mix Lab представил три интересных проекта:
- Oomph: A Microformats Toolkit. Этот проект представлен также на Codeplex (Там же можно скачать небольшую документацию).
Фактически это некий набор, который включает в себя add-in к Internet Explorer-у, плугин к Windows Live Writer а также набор 14 CSS-стилей для более красивого и быстрого оформления небольших микро-блоков hCard и hCalendar (включен даже стиль Гранж).
- Забавный сайт Desire, на котором представлено изображение о том, “чего стоит запуск веб-сайта”. С помощью зума Вы можете детально рассмотреть процесс :)
- А также третий проект Descry о визуализации данных, пока только с пометкой “Coming soon”
Также на сайте появилась информация о MIX 2009 и о предстоящих там сессиях.
Вот короткий список того что будет на Миксе:
- C# for Designers
- Escaping Flatland in Application Design: Visualizing Data
- From Concept to Production: Design Workflow with Microsoft Expression Studio
- The Future of Microsoft Expression Blend
- Go Beyond Best Practices: Evolving Next Practices to Prosper in the 21st Century
- Improving UX through Application Lifecycle Management (ALM)
- Interaction Techniques Using the Wii Remote (and Other HCI Projects)
- Making Wireframes Work
- Microsoft Expression Web: No Platform Left Behind
- Microsoft Surface: Designing for a New Interactive Era
- Optimizing Your Applications with Touch
- The Way of the Whiteboard: Persuading with Pictures
- Web Form Design
- Wireframes That Work: Designing Rich Internet Applications
В общем “coming soon” :)
Мда, ажиотаж 13-го числа, вызванный новостью о том, что завтра, 14-го, выйдет финальная версия версия Silverlight 2, был немаленький. Ощущение ожидаемости выхода, подогретое небольшими новостями и пресс-конференцией, наверное заведомо интереснее чем выход. Такое чувство было, что вот оно, чуть ли не в ночь с 13 на 14 рано утром выйдет финал. А между RC0 и RTW было чуть больше 2 недель. Как-то даже не сразу все вняли сообщениям, что надо срочно переводить приложения с beta 2. Думаешь, ну, до финала еще куча времени, успеем. А тут, 13-го - и такие новости. Ну и как всегда – все в последний момент, знакомое ощущение?
За день до, по конференции выяснилось несколько интересных вопросов (хотя часть из них была известна уже заранее). В общем хотелось бы подвести некоторые итоги, сделать заметки.
Уже - на http://www.codeplex.com доступно 11 контролов, и планируется довести кол-во до 50. Preview release этого “Control Pack” планируется выпустить в конце месяца (скорее всего на PDC). И так, каков будет список: - DockPanel
- WrapPanel
- ViewBox
- Label
- HeaderedContentControl
- Expander
- TreeView
- NumericUpDown
- AutoComplete
- Accordion
Silverlight XAML Vocabulary Specification 2008 уже опубликовано на http://www.microsoft.com/downloads/details.aspx?FamilyID=52A193D1-D14F-4335-AA86-C53193E1885D&displaylang=en;
Шрифты, шрифты, шрифты!!!
Blend2 + SP1. Теперь можно использовать любые установленые шрифты.
Внешне, уже знакомые нам ранее шрифты отмечены символом Silverlight, остальные без оного.
Если после выбора декоративного шрифта, например того же Segoe, Вы попробуете протестировать проект с новыми шрифтами, появится предупреждение о том, что вам нужно встроить шрифт в приложение.
Для этого на панельки есть чекбокс – в котором необходимо поставить отметку.
А также еще ниже есть кнопка Font Manager, нажав на которую можно отметить все требуемые шрифты, а также отдельные подмножества символов.
Контролы. Наверное все уже с RC0 пощупали три новых – ProgressBar, ComboBox, PasswordBox. ComboBox, правда, реально какой-то странный. Или, как говорится, доктор, что я не так делаю? Да, изменился конечно и стиль контролов, стали более приятными на вид и на ощупь:)
Ну конечно, под выход финальной версии, надо ж было стили обновить для контролов и добавить новые. Теперь 4 стиля Caramel, Lime, Pale, Cherry - c новыми элементами. Проведена оптимизация - теперь каждый стиль, даже с учетом добавления 3-х новых, занимает отдельно горазно меньше строчек кода.
Посмотреть, подергать можно тут. Скачать проект с 4-мя стилями можно тут
Планирую сделать еще подобные стили для календарика и выбора даты – для полного набора.
Кстати, при желании – на основе этих 4-ех стилей каждый может создать себе новую цветовую гамму с тем же эффектом. Все цвета и используемые градиенты теперь полностью вынесены в ресурсы. Так что по подобию можно сделать новые, а внешний эффект будет сохранен.
В общем, The day after tomorrow? Живем с текущей версией, и ждем-с следующую.
Недавно меня спросили, какую литературу Вы читаете о дизайне? Почему-то меня такие вопросы вводят в ступор и вспомнить наобум хоть одну книжку о дизайне интерфейсов, которая была бы мне хоть на 50% действительно полезна – весьма тяжело. Да, наверное как большинство дизайнеров, я читала книги Якоба Нильсена о юзабилити, Стива Круга и Дмитрия Кирсанова о дизайне, даже книгу о веб-дизайне, которую выпустила компания Cisco (и такое бывает, хотя на первый взгляд верится с трудом). Но скажу честно - большее влияние и толчок к развитию в этом направлении дают наверное совсем не книги.
Что же тогда? Наблюдательность. Чем больше Вы смотрите на красивые вещи и ищете их, тем больше со временем понимаете как они сделаны и как сделать что-то подобное. Отсюда возникает вопрос – а где же искать эти красивые вещи, тем более интерфейсы? Просто оглянитесь вокруг.
Посмотрите на ОС, которую вы используете. Windows Vista, Apple Mac OS, разные дистрибутивы Linux (тут тоже есть куча прикольных тем с красивым дизайном).
Посмотрите последнее ПО. Тот же Office 2007. Да, пользователи иногда говорят, что он неудобен, надо его выкинуть и вернуть 2003. Но между прочим многие заказчики скажут "just give me a UI that looks like Office."
Даже на КПК или мобильном телефоне производители стараются сделать хоть и минимальный, но красивый и приятный для глаз интерфейс. Простые линии, минимум градиентов.
И сразу рекомендации – не смотрите интерфейсы старых программ – тут такое чувство, что работает обратный эффект. Чем больше их смотришь – тем хуже потом делаешь. Лучше все-таки смотреть КАК нужно делать, чем как НЕ нужно.
В курсе событий. Следите за конкурсами и ежегодными конференциями. Даже в небольших отчетах уже можно понять какие тенденции сегодня актуальны и куда мы вообще движемся.
Какие конкурсы? Например Year's 10 Best Apps UI. Конференции? MIX. Сессии можно смотреть хоть через интернет – не обязательно присутствовать лично.
Цвета. Да, тяжко иногда бывает подобрать цвета. Но главное – не бояться. Для упрощения жизни - если сразу тяжело придумать самому – используйте Color GuideLines. Есть готовые книги не только по тому как подобрать цвет стен или какого цвета сделать визитку. Существуют книги и по подбору цветов для веб. Например, Color Index: Over 1100 Color Combinations, CMYK and RGB Formulas, for Print and Web Media (Jim Krause). Хотя иногда можно взять даже интерьерную книгу по цветам – отсканить цвет и использовать. И совет – забудьте о том, что красный с зеленым не сочетаются. Вспомните цитату о клубнике :) Но главное – все в меру.
Шрифты. Для интерфейса в основном используются стандартные шрифты. Но бывают и интересные новинки, такие как шрифт Segoe. Но даже им – можно написать заголовок – но весь текст в интерфейсе – это на любителя.
Изображения. Возможно иметь дома коллекцию сотен дисков с клипартами – хорошо. Вопрос -когда их смотреть. Искать картинки через поисковики – не всегда они бывают хорошего качества, размера да и с авторскими правами никому не хочется иметь проблем. Поэтому я вижу выход такой - фотостоки. Дорого? Сейчас уже нет. Фото среднего размера можно приобрести иногда за 1 $. А через поиски фотостоков – можно быстро подобрать по ключевым словам то что нужно. Можно даже фон для изображения выбрать в поиске. А в процессе разработки использовать draft-изображение, которое фотостоки тоже предоставляют.
Список фотостоков?
И все-таки литература. В оригинале и с переводом.
- User Interface Design for Programmers (Joel Spolsky)
- Веб-дизайн: книга Стива Круга, или “не заставляйте меня думать!”
или в оригинале Don't Make Me Think: A Common Sense Appr to Web Usability (Steve Krug)
- The Principles of Beautiful Web Design (Jason Beaird) – с иллюстрациями
- Designing Web Usability (Jakob Nielsen) – наверное уже классика, которую стоит прочесть всем , но как говорится не обязательно всему следовать на 100%.
- Статьи Якоба Нильсена на его сайте http://www.useit.com/ (на дизайн лучше не обращать внимание – просто читайте)
- Designing Interfaces: Patterns for Effective Interaction Design (Jenifer Tidwell) или русский перевод “Разработка пользовательских интерфейсов (Тидвелл Дж.) - книга с иллюстрациями.
- The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques (Wilbert O. Galitz)
- Designing the Moment: Web Interface Design Concepts in Action (Robert Hoekman Jr.)
- Color Index: Over 1100 Color Combinations, CMYK and RGB Formulas, for Print and Web Media (Jim Krause)
- Основы Web-дизайна: руководство Cisco (Ксения Гизе, Александра Холмс) или в оригинале “Cisco Networking Academy Program: Fundamentals of Web Design Companion Guide” (Xenia Giese, Alexandra Holmes) – вообще как общеобразовательная книга для разложения знаний по полочкам и для ориентации в веб.
Это то, что у меня было в избранном. Конечно, в любом случае, лучше в начале полистать книгу (у большинства книг есть превью отдельных глав) и посмотреть насколько она вам подходит и интересна.
А вот блохи… Напоследок, маленькая история из жизни, которая на слух правда звучит веселее.
[А] - Привет, я слышала ты себе тоже блох завел?
[С] - Да, вот решил попробовать. Посмотрим, как оно будет.
[А] – Клево, теперь у тебя тоже есть.
[Р] – Вы что, обалдели? Какие блохи? Мало того что один решил попробовать, так у первого они оказывается есть уже!
[А] – да нет, мы же про блоГи, а не про блоХи..
:) А теперь про блох… вернее про блог. Читайте блоги. И собирайте их в свою подписку. Иногда можно найти очень полезные вещи. С чего начать? Можно с блога Тима - http://timheuer.com/blog/. А дальше коллекция наберется.
Если у кого-то есть свои избранные книги и рекомендации – пишите, будем собирать вместе :)