Microsoft x Adobe . É possível mudar paradigmas?

Olá Pessoal,

Demorou muito tempo, mas a Microsoft começou a investir na área de Design Gráfico, muitos pode pensar que a qualidade de seus softwares ainda tem aquele velho preconceito do Windows 3.1 que dava aquela tela azul e não tinha cristo pra ajudar a voltar o sistema.

Pois bem, a MS não parou no tempo, e agora vem pra competir com seus produtos na linha do Expression Studio, aliás, utilizo o Expression Web todos os dias, desde seu lançamento em 2007, já são quase 3 anos, e as evoluções do produto mostram que eles vieram para ficar, acredito até que o produto seja bem melhor que o Dreamweaver. Além disso o custo para compra de licenças são insignificantes perto da Adobe, se quer ficar legalizado, vale apena conferir os produtos.

Expression Web

Web Design XHTML/CSS

Foi se o tempo que Microsoft tentava impor suas regras com a W3C, o programa é voltado para quem faz a interface do usuário em Web Standards, a ligação entre o código e as imagens é muito interessante o programa tem uma organização fantástica e não deixa nenhum de seus concorrentes para trás.

Expression Design
Design Gráfico

Sistema de Vetores + "Presets"
Com uma biblioteca mais extensa em design gráfico o Expression Design facilita o desenvolvimento das criações para designers.

Exportação para XAML. É possível exportar o design gráfico elaborado para XAML já vetorizado,
junto com as idéias visuais também é exportada todo o conjunto de
pastas do projeto.

Imagens
Imagens referenciadas no XAML.
Efeitos bitmap, fractal entreoutras técnicas, Qualidade de 96 dpi preservado.

O uso da ferramenta é simples, hoje já existem vários patterns, texturas e etc... que facilitam a vida do designer gráfico e do web designer.

Expression BlendFerramenta de desenvolvimento de novas interfaces da Microsoft

Sistema de Vetores
Usando os "planos cartezianos", Expression Blend administra gráficos nos eixos x, y e z.

Animação

Um sistema diferenciado de animação em relação ao Flash, baseado em story board, não existe move clips e nem Behaviors.

Programação
Interage com todos os objetos criados no XAML, aceita XML e hoje conta com Ria Services para comunicação com Banco de Dados. Integração total com designers, animadores e programadores.

Silverlight
Tecnologia da Microsoft para facilitar o desenvolviemnto entre Designers e Developers, com uma linguagem fácil e de marcação (XAML) a comunicação entre estas duas profissões melhorou e muito.

WPF
Seria um Silverlight para Desktop, perfeito para quem tem interesse no desenvolvimento de Clients, como o Sobees ou um TweetDeck. Concorrente do Adobe Air

XAML
Linguagem de marcação baseado em XML desenvolvido para facilitar a integração entre developers e designers.



Ahh o Photoshop, se me perguntarem se abandonaria o nosso amigo?? Não!! é minha resposta, mas quem sabe um dia teremos um "Pohtoshop" melhorado da Microsoft, e muito mais barato?


Para quem quizer saber mais sobre a linha Expression da Microsoft.
http://www.microsoft.com/expresion

Obrigado,

Daniel Skroski
http://www.duplod.com.br

2. Como desenhar vetores e trabalhar com composições no Expression Blend

O que é o Xaml?
Linguagem de marcação baseado em XML desenvolvido para facilitar a integração entre developers e designers.

É tarefa do Designer entender o XAML?

Esta é uma pergunta que eu não sei responder, depende de cada um, eu gosto muito do formato de escrita e não posso falar pelos outros, mas acredito que posso compreender uma parte do código fonte e ainda fazer um bom trabalho no FrontEnd.

Se você é um programador, não se assuste se o Designer não quizer nem olhar para o código fonte, ai entramos com o Blend, para dar suporte para nossos amigos Designers gráficos, sim! Eles agora vão ter que ser seus amigos!

Pois o Silverlight foi feito, na minha opinião, para os profissionais da área gráfica e o programador se vê com bilhões de oportunidades na sua frente, mas sem usabilidade e acessibilidade e outros conceitos, os projetos RIA podem ir por água abaixo.


O Expression Blend e o XAML pode ser feito com simples códigos milhares de possibilidades de desenho, pois na verdade é simples, design começa em sua essência, linha, circulo, triangulo, retângulo e assim por diante.

Eu prefiro no momento nem comentar os Shapes como; Elipse, Rectangle e outros... vamos unir estes no futuro e formar nossos layouts, é o suficiente!

Abaixo entenda como desenhar em Xaml, eu posso até chamar de meu design "open source", que não deixa de ter uma certa ironia.


Tipos de Desenho em Xaml
Hoje no Expression Blend 4 já encontramos uma biblioteca extensa de desenhos como estrelas, balões, e muitas outras formas úteis que podem ser misturada com outros objetos.

Mas entenda abaixo como funciona os Paths, e como são editados através do XAML.

Veja o que cada comando define um PATCH, que é o que precisamos para desenhar qualquer coisa em nosso XAML.

F n - Define FillRule, 0 = EvenOdd e 1 NonZero

M x,y - Inicia uma Nova PathFigure e define StarPoint como (x,y). Isto deve constar antes no código do que os outros comandos exceto F
O M significa mover.

Z - Encerra uma PathFigure e define IsClosed como true.
É possível começar qualquer PathFigure independente depois disso com um comando M ou usar um comando diferente para iniciar uma nova PathFigure a partir do ponto atual.

Caso não queira fechar a PathFigure, poderá omitir todo o comando Z.

PathSegments

L x,y Cria um LineSegment para(x,y)

A rx,ry d f1 f2 x,y - Cria um ArcSegment para (x,y) baseado em uma elipse com raios rx e ry, com rotação de d graus. Os flags f1 e f2 podem ser definido com 0 (false) ou como 1(true) para controlarem duas das propriedades ArcSegment: IsLargeArc e Clockwise, respectivamente.
C xy,y1 x2,y2 x,y - Cria um BezierSegment para (x,y) usando pontos de controle (x1,y1) e (x2,y2). O C significa curva de Bezier cúbica.

Q x1,y1 x,y- Cria um QuadraticBezierSegment para (x,y) usando ponto de controle (x1,y1)

Atalhos Adicionais

Hx - Cria um LineSegment para(x,y) onde o y é retirado do ponto atual. O H significa uma linha horizontal.


Vx - Cria um LineSegment para(x,y) onde o y é retirado do ponto atual. O H significa uma linha vertical.

S x2,y2 x,y - Cria um BezierSegment para(x,y) usando pontos de controle (x1,y1) e (x2,y2), onde x1 e y1 são automaticamente calculados para garantir suavidade (esse pode ser o segundo ponto de controle do segmento anterior ou o ponto atual, caso o segmento anterior não seja um BezierSegment). O S significa curvade Bézier cúbica suave.

Pode se utilizar letras maiúsculas ou minúsculas para estes comandos de seu PATCH.
Você também pode ignorar os espaços em brancos e as vírgulas, mas para os parâmetros é necessário as vírgulas para diferenciar, mas ficaria muito confuso talvez.

M 0,0 L 0,100 L100,100 Z


Os designers só podem estar pensando, "esse cara só pode estar maluco que eu vou ter que aprender para poder desenhar meu layout..." na realidade nem eu sou louco suficiênte para decorar tudo isto, mas pode ser muito útil este post quando estiver desenhando uma logomarca ou uma ilustração mais complexa.

E com certeza os programadores pensam, isto é tarefa de designer, e ponto final.

Pois bem, pensando pelo lado do programador, acredito que ele só pode ta certo, como ele vai fazer o design gráfico do sistema?

O fato é que o desenho é código e vice-versa, é muito novo para o designer copiar um código fonte e colar uma logomarca, mas é muito melhor desta forma do que nos outros programas, que você não tem a mínima noção do que ocorre por "baixo dos panos" do visual!

Veja abaixo um exemplo do que descrevi acima e repare o código e o desenho:



Combinando objetos

É muito simples combinar objetos no Blend, e também muito útil, a idéia é compor vetoriais e formar desenhos com maior facilidade veja abaixo as opções que temos para unir os nossos vetoriais do projeto.

Unite - Faz a união dos objetos selecionados, transformando em um path editável.

Divide- Faz a combinação dos objetos, porém separa em linhas as intersecções.

Intersect - Combina o objeto mantendo somente a sobreposição das vetores.

Subtract - Faz o oposto ao Intersect mantem a parte oposta da sobreposição dos vetores

Exclude Overlap - Exclui a sobreposição e mantém o restante do patch.

Para executar os comandos basta selecionar 2 ou mais objetos e clicar com o botão direito e procurar por Combine, conforme a imagem abaixo:



Confira o resultado do Unite, o restante das ações você pode experimentar no Expression Blend.



Convertendo em Path

Deu para perceber o quanto os paths são importantes dentro do XAML, por este motivo nós podemos criar os shapes nativos do Blend e converter em path, isto pode ser muito útil com elipses e com retângulos com bordas arredondas, para desenvolver outros desenhos não seria necessário fazer tudo do zero com a ferramenta Pen por exemplo.

Confira abaixo na figura como converter em path os seu vetor:



Veja o que pode ser feito com esta conversão no exemplo abaixo:



Vou ficando por aqui, somente lembrando que este post, assim como todos os outros não são definitivos, eu posso acrescentar algumas coisas importantes, principalmente depois dos milhões :) de comentários.

Na próxima pretendo falar de Brushes e Resources.

1. Conhecendo as Ferramentas de Trabalho

Conheça a Toolbox

É possível utilizar o Expression Blend para criar seus objetos na "Área do Projeto", para isto é importante conhecer nossas ferramentas, vamos discutir conforme o gráfico do próprio Help do Expression Blend.

As ferramentas discutidas são para trabalhar com o WPF, existe uma quantidade menor de opções para o Silverlight.

Acompanhe abaixo:



1. Ferramentas de Seleção

Ferramenta para Paths.

Atalho: (V) = Selection
Seleciona objetos e arrasta na Area de Trabalho.

Atalho: (A) = Direct Selection
Seleciona paths e edita posicionamento e curvatura.

2. Ferramentas de Visualização

Atalho: (H) = Pan
Movimenta a tela com seus objetos.

Atalho: (Z) = Zoom
Aumenta ou diminui o zoom da tela com seus objetos.

Atalho: (C) = Camera Orbital

3. Ferramentas de Preenchimento

Atalho: (I) = Eyedropper
Atalho: (F) = Paint Bucket

Atalho: (G) Gradient Tool (Ferramentas de Gradiente)
Atalho (B): Brush Transform

4. Ferramentas de Objetos

4.1 - Ferramentas para paths:

• Atalho: (P) Pen (Caneta)
• Atalho:(Y) Pencil (Pincel)
  

4.2 - Ferramentas de shape:

• Atalho: (M) Retangulo
• Atalho:(L) Elipse
• Atalho(\): Linha

4.3 - Painéis de Layout:

Utilize Control + G para agrupar seus elementos:

• Grid
• Canvas
• StackPanel
• WrapPanel
• DockPanel
• ScrollViewer
• Border
• UniformGrid
• Viewbox

Obs.: Nos projetos Silverlight são aceiotos somente o Grid, Canvas, StackPanel, ScrollViewer e Border.

4.4 - Ferramentas de Texto

Atalho:(T)

• TextBox
• RichTextBox
• TextBlock
• PasswordBox
• Label
• FlowDocumentScrollViewer
  

Obs.: Nos projetos Silverlight estão disponíveis somente o TextBox, TextBlock e PasswordBox.

4.5 - Atalho de Recursos:

• Button
• CheckBox
• ComboBox
• ListBox
• RadioButton
• ScrollBar
• Slider
• TabControl
• GridSplitter

5. - Assets

• Ferramentas Extras

Como aprender Silverlight e Expression Blend? Existe uma seqüencia lógica de aprendizado?

Hoje muitos que estão estudando Expression Blend estão se perguntando, como aprender de maneira correta e seqüencial?

Na realidade estamos falando de duas coisas diferentes. Uma seria a parte técnica "Silverlight" e outra a parte de interface de usuário (Expression Blend) , e em se tratando de design de interface, é necessário pessoas que tenham o mínimo de conhecimento para criar novas experiências na web e em aplicativos.

Sobre como inovar, criar e desenhar vou deixar por conta de cada um.

Porém podemos estudar nossa ferramenta, o Expression Blend, e isto podemos discutir abertamente e gostaria de auxiliar a todos a ter um novo entendimento, vou tentar resumir este e os próximos posts.

Veja abaixo meus próximos posts para estudos do Expression Blend.

Todos os "posts" ou "capítulos" vou fazer um exemplo com o XAML.

1. Entendendo a Barra de Ferramentas e Atalhos
   
   
   
   • Conheça a sua Toolbox
   • Atalhos e Dicas
   
   


2. Como desenhar vetores e trabalhar com composições no Expression Blend
   
   
   
   • O que é o Xaml?
     
   • Tipos de Desenho em Xaml
     
   • Combinando objetos
   • Convertendo em Path
     
   
   
   
   
3. Conhecendo Brushes, Resources, Styles e Templates
   
   
   • Reutilização com Resources
   • Crie estilos rápidos com Styles
   • Padronize todas as ações do seu controle, utilize Templates
     
   
   
4. Compondo layouts com Panels, conheça cada um deles.
   
   
   
   • Trabalhando com grids
   • Separando o layout de desenvolvimento, Design, Xaml ou Split
     
   • Grid
   • StackPanel
   • Canvas
   • ScrollViewer
   • Border
   • ViewBox
     
   
   
5. Como trabalhar com as layers e entender a guia Objects and Timeline
   
   
   
   • Separe seus objetos em layers
     
   • União de layers, organizando o projeto
   
   
   
6. Conhecendo melhor States e Behaviors
   
   
   
   • Conheça a sua Toolbox
   • Atalhos e Dicas
   
   
7. Trabalhando com StoryBoards e Animações
   
   
   
   • Cada objeto um layer e uma timeline
     
   • Suavizando a animação
   • Iniciando o projeto com uma animação
   • Auto Reverse
     
   
   
8. Reconhecendo Controles na guia Assets
   
   
   
   • Controles
   • Conheça melhor a Asset Library
     
   
   
   
9. Fabricando Controls (Controles) e UserControls (Controles de Usuário)
   
   
   
   • Transforme seus gráficos em controles
     
   • Seus layers visuais agrupados em um .xaml diferente
   
   
   
10. Desenvolvendo com dados Dinâmicos
    
    
    
    • Preencha seu controle com uma estrutura de dados pronta
    • Trabalhando com web services
    • Ria Services, conexão de dados de forma estruturada
    
    
11. Integrando C# com o Front-End
    
    
    
    • Interagindo com controles e gráficos
    • Alterando estados da interface
    • Trabalhando com animações
    
    

Conheçam mais sobre o .toolbox da Microsoft

Esta é a verdadeira universidade de Silverlight, e aqui o conteúdo é pesado e feito pelos melhores profissionais da Microsoft. Acredito ser interessante não somente para os designers e sim também para todos os profissionais que querem entender um pouco melhor sobre esta nova tecnologia da Microsoft.

O .toolbox é dividido em algumas etapas

1. Cadastre-se no site http://www.microsoft.com/design/toolbox/
2. Baixe os módulos para estudos com os arquivos para utilização no Blend e também os Vídeos
3. Serão mais ou menos 6 vídeos por módulos
4. Entre no site e vá até School e faça depois seus exames.
   
5. Ganhe pontos e seja um profissional Ria Microsoft

Guia de Desenvolvimento Silverlight x Blend

O Objetivo deste post é fazer um roteiro para o início do desenvolvimento com Silverlight e o Design de Interação no Blend.

Nos últimos dias estou estudando para fazer uma seqüencia lógica de estudos com a tecnologia:

1. Desenhado sua aplicação através do Sketch Flow

Parte 1

Parte 2

2. Projetando o desenvolvimento com Ria Services (por Tim Heuer)

3. Visualizando o Ria Services com mais detalhes (por Tim Heuer)

4. Conheça mais sobre o compnente DataForm do Silverlight (por Mike Taulty)

5.Veja o Entity Framework 4.0 com detalhes (Luciano Condé)

http://blogs.msdn.com/conde/archive/2010/02/05/publica-o-das-demostra-es-do-msdn-webcast-programa-o-em-camadas-com-o-entity-framework-4.aspx

Photosynth 100% . Show

Este produto promete revolucionar as mídias digitais, mostrar um ambiente ou um produto em 3 dimensões está mais simples... Hoje com o Photosync é possível brincar com galerias de fotos sincronizando em um ambiente comum em 3 dimensões.