Tutoriais Microsoft Expression

Guerra dos Cem Anos - Parte 3 - Do ano XXI ao ano XXX: Gigante Adormecido

2008-09-10T12:32:00.000-07:00

A Microsoft ® por sua vez, diante da quantidade de produtos desenvolvidos e, que hoje fazem parte de mais de 90% de uso no mercado, não tinha ainda buscado meios mais práticos para entrar na Internet com a força que seus concorrentes da WWW tinham proposto. Isso era em 2000.

A Macromedia ®, buscando integrar cada vez mais seus produtos, adquiriu a Allaire ® , detentora dos softwares Allaire HomeSite®, que era um editor de páginas web e o Allaire ColdFusion® que era uma linguagem proprietária para desenvolvimento web para páginas dinâmicas. A Macromedia ® estava ganhando força no mercado de páginas dinâmicas, antes dominada pela Microsoft ® que, mesmo sem muito interesse direto às mudanças de tecnologia (pelo menos era o que achávamos) assistia tais companhias crescerem e revolucionarem o modo de fazer páginas web, que estavam cada vez mais dinâmicas e atraentes.

Nesse mesmo ano, a Microsoft ® lança uma nova plataforma de desenvolvimento, o tão conhecido Framework .NET®. A grande sacada técnica dessa ferramenta era que, várias linguagens de programação eram acopladas e poderiam ser trabalhadas num mesmo projeto, ou seja, se você programa em C# e seu colega de trabalho programa em Visual Basic.NET não afetaria o desenvolvimento de tais projetos, pois o Framework .NET® aceita mais de vinte linguagens (até o momento) e a compilação é perfeita.

O Framework .NET® controla grande parte da infra-estrutura base de um projeto, permitindo aos desenvolvedores construir facilmente aplicativos coorporativos e websites seguros e com um gerenciamento de memória protegida e totalmente integrada.

O Framework .NET® inclui os fundamentos de bibliotecas de classes comum da linguagem .NET em runtime, ASP.NET em runtime e ADO.NET para conectividade com banco de dados.

Guerra dos Cem Anos - parte 2 - Do ano XI ao ano XX: Arte Lado a Lado com o Desenvolvimento

2008-09-10T12:30:00.000-07:00

Do ano XI ao ano XX: Arte Lado a Lado com o Desenvolvimento
Psicólogos e estudiosos da mente humana no mundo inteiro sempre diziam e, já comprovaram isso a mais de 50 anos que, a arte anda lado a lado com a ciência. E por que no mundo de tecnologia poderia ser diferente?

Um exemplo claro da evolução dessas ferramentas ao longo dos anos foi literalmente que, todo designer poderia dominar a programação aplicada ao seu projeto e vice-versa. Isso não leva em consideração a qualidade artística que, nesses casos envolve muito mais uma opinião estética e não exata, como na matemática. Mas o que impediria um designer de Flash® dominar a linguagem actionscript ou um programador de web (asp, php, coldfusion) entender sobre animação interativa no Flash®?

Isso mesmo que você pensou.

Talento.

Mas a prática nos leva à perfeição sem ser criativo. Como disse antes, qualidade estética é um gosto subjetivo, porém a forma como você programa, ou o resultado que isso implica, é totalmente passível de fazer uma análise mais precisa sobre tal competência.

E, com a integração de ferramentas de construção de websites ficarem cada vez mais próximas, de 2001 até os dias de hoje, todo programador web tem pelo menos uma mínima noção de alguma ferramenta de design e, de uma inversão um pouco mais complexa, o designer tem idéia do que se passa dentro de seu projeto em termos de desenvolvimento de códigos de programação.

Guerra dos Cem Anos - Parte 1 - Do ano I ao ano X: O Princípio da Evolução de um Império

2008-04-08T11:41:00.000-07:00

Adobe Flash ® x Microsoft Silverlight ®

Fazendo uma pequena analogia sobre a Guerra dos Cem Anos, vamos dividir esse artigo em pedaços, demonstrando a evolução de tal guerra.

Finalmente a Microsoft ® abriu os olhos para um mercado antes navegado somente por um capitão, a Adobe® , que, em 2006 comprou a companhia Macromedia ®, detentora do produto considerado por muitos profissionais, o mais revolucionário criado até hoje para a internet, o atualmente chamado, Adobe Flash ® .

Antes de tudo, irei resumir e contar uma pequena história de como surgiu o Adobe Flash ®, para entendermos melhor as estratégias empresariais que resultaram nessa tão desejada concorrência.

Do ano I ao ano X: O Princípio da Evolução de um Império
Como qualquer ferramenta que envolve interatividade com o usuário veio de atribuições e/ou evoluções de softwares que trabalhavam de maneira estática para o desenvolvedor/ilustrador.
O mercado de ilustração digital, em meados de 1992 estava em ascensão, principalmente com a evolução de dois softwares que iriam disputar cada polegada no mercado, e eles eram, Adobe Illustrator ® e o Macromedia Freehand ® .

Nesse mesmo ínterim, a Internet, ainda engatinhando, mostrava ter um grande potencial para apresentações de conteúdos de uma maneira mais dinâmica e também agradável para modelos ainda acadêmicos.

Daí surgiu um pequeno software, sem causar grandes alardes e, nem mesmo ameaçar a concorrência, chamado de Smartsketch ® da Futureware ®, um software que, preocupou-se com a produtividade de trabalho e simplificou a maneira de desenhar pelo computador.

Diante do sucesso, ainda pequeno, de tal ferramenta a Futureware ® recebia muitas opiniões para que tornar tal ferramenta adequada para construção de animações - principalmente no mercado de desenho animado. Estima-se que tais softwares que ajudam na animação reduzem em pelo menos dez vezes o tempo de produção de um desenho animado, anteriormente feito manualmente na seqüência de 24 a 30 desenhos por segundo -, isso era 1995.

Então a Futureware ® criou, com a ajuda de plugins de internet em Java, que era a melhor referência de interatividade na época criou o Future Splash Animator ® (Carinhosamente e posteriormente conhecido como Flash 1.0).

Future Splash Animator ® 1

Com a novidade de tal software a Macromedia ® percebeu o potencial de tal ferramenta e, se juntou com a Futureware ® e criaram o Macromedia Flash 2.0 ® que, utilizava a ferramenta mais importante em uma animação, a interpolação de movimentos antes feita quadro-a-quadro, agora poderia ser feito em uma simples ligação do início da imagem até o seu final com um click.
Daí a Macromedia ® não parou mais de crescer e, em 2002, aproximadamente 92% de todos os computadores que possuíam internet ao redor do mundo tinham o plugin para execução de animações feitas pelo agora Macromedia Flash®.

O resto, todo mundo já sabe, a Adobe® comprou a Macromedia ® por 3,4 bilhões de dólares e agora todas a ferramentas da companhia se interagem transformando a construções de website muito mais práticas.

Com a parte de design já resolvida, vamos entender melhor como a programação influenciou no mundo da web. Mas isso nos próximos posts

No próximo post:
Do ano XI ao ano XX: Arte Lado a Lado com o Desenvolvimento

Montando um PodCast com Blend 2.5 e VS 2008

2008-03-13T12:33:00.000-07:00

Montei um modelo simples de podCast (utilizando o www.jovemnerd.com.br como referência de podCast)

Olha só o tamanico do XAML:

Dêem uma olhada no arquivo final:
www.marpaservicos.com.br/_filez/podCast.exe

p.s. não é vírus. o Tempo de carregamento do Podcast depende de sua conexão.

p.s.2. É necessário ter framework 3.5 instalado. Caso não tenham acesse esse link: http://www.microsoft.com/downloads/details.aspx?FamilyID=333325FD-AE52-4E35-B531-508D977D32A6&displaylang=en

Em breve colocarei o code behind dele explicando as funções do elemento MediaElement no Blend e no VS

Criando um Leitor de RSS utilizando o Blend 2 - Parte II [Final]

2008-02-14T17:45:00.000-08:00

Como vimos na parte anterior montamos uma imagem no blend que carrega a imagem de um RSS.

fig.1 - Imagem inserida no Canvas

Agora trabalharemos com um grid de informações que através de um link direto de uma amostra de títulos carregará a descrição de seu item em um TextBlock.
Primeiramente vamos incluir o grid no Canvas। Ele se encontra na parte de Tools do nosso blend como demonstra a figura abaixo:

fig.2 – Inserção do GRID no Canvas
1. Botão para inserção de grid no Canvas
Clique na opção GRID (se caso esta não estiver como padrão) e faça a área dentro no Canvas com um tamanho na qual vc preferir. A figura abaixo demonstra o tamanho que defini, notando-se que também alterei nas opções de tamanho da imagem do RSS.

fig.3 – Grid inserido na aplicação
Como todo e qualquer objeto inserido no Blend, o GRID também possui propriedades específicas para tal. E agora, vamos mexer nessas propriedades para manter o sistema coligado ao RSS que estamos aplicando. Vamos clicar no quadradinho pequeno que se encontra no canto direito na parte Common Properties > DataContext.

fig.4 – área de Propriedades comuns do grid
Uma vez clicado, teremos que criar um novo Data Bind, então aparecerá uma pequena janela aonde você escolherá “Data Binding...” e, dali você fara´o vinculo necessário para montagem completa do grid relacionado ao RSS.

fig.5 – Aplicação de Data Binding... no GRID
Quando clicado no “Data Binding...” Uma janela se abrirá para a criação do Bind. Como nesse tutorial queremos ver principalmente os itens de RSS vamos selecionar. No Box da direita chamada de fields , clique na abertura até encotrar o a tag Item(Array), selecione-o e depois clique no botão Finish.

fig. 6 – Selecionando o Item(Array) para criação do Bind no GRID
Bom, já estamos quase lá, uma vez formado o bind no grid agora vamos colocar um listBox e um TextBlock para mostrar o funcionamento do modelo.

Como demonstra a figura, selecionamos o listBox para colocarmos no Canvas (1) . Note que é extremamente importante que esse listBox fique dentro do grid (2). Se caso qdo criar o objeto ele não constar dentro do grid, você pode arrastá-lo através do layers demonstrados no Objects and Timeline ou, clicando duas vezes no grid para ele ficar selecionado e daí você inserir o objeto dentro (3).

fig. 7 – Criando um listBox
Uma vez criado o listBox devemos seguir quase que os mesmos procedimentos para montar o seu bind. Vamos na parte Common Properties > ItemsSource, Vamos criar um novo “Data Binding...”. Nessa nova janela que se abrirá escolheremos a aba “Explicit Data Content” , lá escolheremos a tag Item(Array) , e a partir dali clicamos no botão Define Data Template.

fig. 8 – Criando um Data Binding no listBox
Dali uma nova janela se abrirá, e você selecionará somente o Box title. Isso indicará que, no listBox aparecerão somente os títulos do RSS. Uma vez montado isso montaremos dentro do grid um TextBlock, vinculando-o ao click da lista diretamente no carregamento de seu conteúdo.

fig. 9 – Criando um Data Template no listBox
Quando clicado em ok, automaticamente os títulos do RSS já estarão carregados, como demonstra abaixo:

fig. 10 – Títulos carregados no listBox
Para concluir vamos criar o TextBlock para exibição do conteúdo. Ele se encontra no Tools do Blend 2. Depois coloque também dentro do grid, da mesma maneira que você fez com o listBox. Uma vez criado o TextBlock (fig. 11) devemos seguir quase que os mesmos procedimentos para montar o seu bind. Vamos na parte Common Properties > Text, Vamos criar um novo “Data Binding...”. Nessa nova janela que se abrirá escolheremos a aba “Explicit Data Content” , lá escolheremos a tag Description , e a partir dali clicamos no botão Define Data Template (fig. 12).

fig. 11 – Criação do TextBlock

E agora a melhor parte, dê F5, e veja o aplicativo que você acabou de criar rodando. Até mais e boa sorte a todos.
Obs.: Todas as imagens utilizadas, tb como a edição HTML desse post foi feito com Microsoft Expression Design e Microsoft Expression Web respectivamente.

2007-10-29T19:24:00.000-07:00

Criando um Leitor de RSS utilizando o Blend 2 - Parte I

Com uma ferramenta dessas, é muito prático e fácil montar essa estrutura de leitura. Utilizaremos agora a versão mais atualzada desde este post.

Trata -se do Expression Blend 2 September Preview Clique aqui para baixar.

É necessário tb possuir os seguintes requisitos:

Windows Vista

Microsoft Windows® XP c/ Service Pack 2 (SP2)

Requisitos Mínimos:

Processador Intel® Pentium® ou AMD processor, 1 GHz c/ MMX ou similar

512 MB deRAM

350 MB disponível em seu HD

DirectX® 9

1024 x 768 de resolução c/ 24 bit de cores

Recomendado:

Processador Intel® Pentium® ou AMD processor, 2 GHz c/ MMX ou similar

1 GB de RAM

Microsoft DirectX® 9.0 c/ 256 de MB de vídeo ou superior

fig.01 - Detalhes sobre o Blend 2
Bom, agora vamos nos centerertir um pouco. Vamos criar agora um novo projeto no Blend 2:

fig.02 - Imagem de criação de um novo projeto

fig.03 - Janela de criação de um novo projeto

fig.04 - Detalhes da janela de criação de um novo projeto

Selecionando WPF Application (.exe)

Nome do projeto: Defini o nome do projeto como CRM_Reader_MSDN. Esse título pode ser a sua escolha

Aonde vamos salvar o projeto. Você pode definir no local de sua preferência

Linguagem de programação principal. Eu particularmente defini como Visual Basic. Sendo este também a sua escolha.

Em seguida, abrirá a área de trabalho aonde iremos trabalhar.

fig.05 - Área de trabalho do Blend
Note que abaixo da aba Project, Existe uma opção chamada Data, que será o responsável para capturarmos o RSS definido como exemplo. Nós iremos utilizar a opção +XML para pegar a URL.

fig.06 - Detalhes da captura do XML

Indicação para captura do XML.

Quando essa parte é clicada, uma janela abre-se para colocarmos o endereço do RSS:

fig.07 - Janela de input da URL

fig.08 - Janela de input da URL já digitada
Note que ao lado da área de trabalho, aparece os detalhes do RSS capturado, mostrando, os detalhes da cada TAG XML do RSS escolhido. Expandindo cada ponto você verá toda a estrutura RSS mantendo, na maioria das vezes o padrão W3C.

fig.09 - Detalhes das TAGS XML do RSS
Vamos expandir a TAG image:

fig.10 - Expansão da TAG image
Agora vamos fazer o seguinte, Clique com o mouse na TAG url dentro da TAG image e arraste até sua área de desenho do Blend 2 (conhecido como Canvas):

fig.11 - Arrastando a TAG url dentro de image para o Canvas

Expansão da TAG Image

Nisso, abrirá uma nova janela para você colocar certas opções. Nessa primeira parte, vamos inserir uma imagem de RSS dentro de nosso Canvas para criarmos um cabeçalho para o programa

fig.12 - Aplicando a imagem dentro do Canvas
Agora vamos dar um Bind no Canvas. Ao abrir essa janela selecione a opção Image. Teoricamente estamos aplicando uma url de imagem do RSS para que ela fique em nosso Canvas. Mais uma janela se abrirá para você aplicar o que define na imagem. Na parte Select Field selecione a opção Source e clique em ok

fig.13 - Detalhes do Data Binding
Pronto! A imagem foi inserida no Canvas. Em muito breve (daqui dois dias no máximo) colocarei o resto desse tutorial para montarmos o software por completo.

Espero que tenham gostado

fig.14 - Imagem inserida no Canvas

Abaixo é código que foi feito em XAML até o momento:

<Window.Resources>

<XmlDataProvider x:Key="rssDS" d:IsDataSource="True" Source="http://rss.terra.com.br/0,,EI6501,00.xml"/>

</Window.Resources>

Obs.: Todas as imagens utilizadas, tb como a edição HTML desse post foi feito com Microsoft Expression Design e Microsoft Expression Web respectivamente.

Márcio Agnelo
marcioagnelo@gmail.com
Web Development Coordinator