Tiago Barbosa

Meet the Geeks @ Covilhã

2010-03-09T21:16:00Z

Meet the Geeks hoje na Covilhã. Ás 22h no Soda.

Vão discutir-se todo o tipo de assuntos. Apareçam que vai valer a pena. ;)

Até já...

Tutorial 4: Capturar movimentos do rato em Silverlight

2010-03-07T01:14:00Z

Neste tutorial vou mostrar-vos como se podem capturar as acções e movimentos do rato para criar aplicações bastante interactivas. Como exemplo vamos criar uma aplicação que permite alterar o tamanho de uma imagem e movê-la pelo ecrã.

O esquema do projecto é o seguinte:

Ao pressionar e arrastar os cantos da imagem vamos proceder ao redimensionamento. Ao seleccionar e arrastar os lados movemos a imagem de sitio.

Antes demais existem algumas noções que têm que ser introduzidas de modo a conseguirmos actuar correctamente sobre os movimentos do rato. Para o movimento de "drag" não é necessário saber onde estamos a carregar mas para o movimento de "resize" temos que saber qual o canto que temos seleccionado para calcularmos as alterações de tamanho e posição da imagem.

Basicamente o que utilizamos para calcular a nova posição é a fórmula utilizada para calcular uma distância entre dois pontos.

Outra coisa que precisamos de saber é que existem pontos para os quais é mais fácil calcular o redimensionamento. O mais fácil de todos é o canto inferior direito e é bastante fácil perceber porquê. Para o ponto inferior direito basta-nos calcular o novo comprimento e altura. Não necessitamos de movimentar a imagem. Para os outros pontos já não é assim.

Agora que já temos todas as noções necessárias para a criação deste projecto vamos passar à acção.

Em primeiro lugar vamos criar um novo projecto Silverlight no Expression Blend. (O projecto também poderia ser criado no Visual Studio mas como nós pretendemos em primeiro lugar a componente visual da aplicação criamos a aplicação no Blend)

Ao meu novo projecto eu chamei DragImageTutorial. Agora que o nosso projecto Silverlight está criado a primeira coisa a fazer é alterar o tipo do nosso Layout Root de Grid para Canvas como é mostrado em baixo. Este passo é muito importante pois facilita bastante as acções sobre as imagens pois se quisermos alterar a posição destas só temos que dar novos valores a Canvas.Top e Canvas.Left que definem as distâncias do nosso objecto ao topo e à esquerda respectivamente.

Agora vamos criar o nosso objecto que irá conter a imagem. Este objecto vai ter o seguinte layout:

Grid:

Rectangle (Rectangulo que vai permitir mover a imagem pelo canvas)
4 Rectangles (Rectangulos que estão nos quatro cantos da imagem e que vão permitir fazer o redimensionamento da mesma)
Image (Imagem que vai ser redimensionada)

A estrutura é esta. O design agora fica ao cargo de cada um. ;)

O próximo passo é adicionar os seguintes eventos a todos os rectangulos de modo a conseguirmos tratar os movimentos e redimensionamento da imagem:

MouseLeftButtonDown ( Evento lançado quando o botão esquerdo do rato é pressionado sobre o objecto em questão)
MouseLeftButtonUp ( Evento lançado quando o botão esquerdo do rato é largado)
MouseMove ( Evento lançado quando o rato é movido)

Vamos começar por tratar apenas o deslocamento da imagem pois é a parte mais fácil e vai servir para perceber a nossa maneira de pensar. Antes de mais temos que criar uma variável global do tipo booleano que nos vai dizer se a imagem está a ser arrastada ou não.

Os eventos para o rectangulo que move a imagem funcionam da seguinte forma:

Quando o botão é pressionado, caso o objecto não esteja já a ser movido, iniciamos a captura do rato para este objecto. Em seguida guardamos a distancia do ponto (X,Y) que está a ser pressionado em relação ao ponto de origem deste rectangulo e depois dizemos que o objecto está a ser movido.
Quando o botão é largado o que fazemos é dizer que o objecto não está a ser movido e largamos a captura do rato para este objecto, caso este objecto esteja a ser movido, ou seja, isDragging = true.
No evento de MouseMove o que fazemos é calcular o novo ponto de origem do objecto que tal como podemos ver em baixo é apenas uma diferença entre o ponto actual, tendo como base a origem da nossa janela, e o ponto onde o captura do rato foi iniciada. Estes cálculos só serão realizados caso o nosso objecto esteja a ser deslocado.

Esta parte foi a mais simples mas serviu como exemplo para os outros objectos que faltam. A lógica é a mesma (Activar -> Mover -> Desactivar), os cálculos que fazemos é que são diferentes. Para explicar mais em detalhe cada um dos rectangulos que estão nos cantos da imagem e que vão servir para fazer o redimensionamento da mesma vamos separar a explicação em 4 partes diferentes. Uma para cada rectangulo.

Antes de mais precisamos de adicionar 4 variáveis booleanas para nos devolver o estado de cada um dos quatro objectos tal como fizemos para o rectangulo anterior.

Parte 1 (canto inferior direito)

Para este canto não necessitamos de alterar a localização do objecto basta-nos alterar a largura e altura do mesmo conforme a distancia percorrida pelo rato.

Parte 2 (canto superior direito)

Neste canto temos que alterar a largura, a altura mas também temos que alterar a posição em relação ao topo do ecrã pois podemos redimensionar para cima.

Parte 3 (canto superior esquerdo)

No canto superior esquerdo temos que alterar todas as propriedades do objecto (tamanho, largura, posicionamento em relação ao topo e posicionamento em relação à esquerda).

Parte 4 (canto inferior esquerdo)

Para o último canto temos que alterar a posição em relação à esquerda, a altura e a largura do objecto.

A partir deste momento temos um objecto que podemos movimentar no ecrã e redimensionar. Obviamente existem outras formas para fazer este tipo de interacção com os objectos mas acho que esta forma é muito boa para uma pessoa que está a dar os primeiros passos no Silverlight.

O próximo tutorial terá um toque das redes sociais. Facebook?? Twitter? Quem sabe...

Techdays 2010

2010-02-21T02:10:00Z

O maior evento de tecnologia da Microsoft já está em andamento. Este ano terá 3 dias!!! 20, 21 e 22 de Abril.

Mais de 40 oradores especialistas em todas as áreas de tecnologia. Aproveita e conhece as tecnologias do momento apresentadas pelos melhores.

Inscreve-te antes de 5 de Março e aproveita o desconto!

XNA Pizza Night

2010-02-03T14:45:00Z

Gostas de pizza , jogos e de paródia?? Então o XNA Pizza Night é o evento certo para ti!

O XNA Pizza Night é um evento aberto a todos os estudantes, game developers, game designers, entusiastas ou amantes de videojogos. Consiste em criar um pequeno jogo ou demo com a tecnologia XNA e virem ao auditório do edifício da Microsoft em Lisboa dia 5 de Março de 2010 para jogarmos o vosso jogo. Os jogos mais votados pelos participantes vão receber inúmeros prémios.

PS: As pizzas e as bebidas ficam à conta da Microsoft. ;)

Para mais informações vejam o site do evento: http://gozoomin.com/pizzanight/default.aspx

Participem...

Aceder ao conteúdo de uma div em Silverlight

2010-01-21T20:38:00Z

Num projecto recente tive a necessidade de criar um gadget em Silverlight que recebia informação textual de uma fonte externa ao Silverlight.

Aqui existiam algumas formas de o fazer:

Através de um ficheiro xml
Através de um webservice
Através de uma div no HTML
Entre outras...

Como nós queríamos manter o código simples escolhemos a terceira opção. Isto pode ser feito de uma maneira bastante simples.

O que eu fiz foi então o seguinte:

Criei uma div no HTML com o conteúdo que pretendia passar para o Silverlight e escondi esta div

<div id="a_minha_div" style="display=none"> conteúdo </div>

Na mainPage.xaml.cs acedi ao conteúdo da minha div

HtmlElement div = HtmlPage.Document.GetElementById("a_minha_div");

String conteudo = div.getProperty("innerHtml").toString();

Mais um pequeno tutorial com informação valiosa...pode dar muito jeito com coisas simples. Em casos mais complexos é aconselhável a utilização de javascript.

Mudanças

2010-01-21T20:26:00Z

Talvez os mais informados já saibam mas para os que ainda não sabem estou a estagiar na Microsoft desde o inicio da semana e está a ser uma experiência absolutamente fantástica. Toda a gente me recebeu bastante bem e o ambiente é fantástico. A parte ainda melhor é que as minhas funções são na área do Silverlight e tecnologias web por isso estou a adorar. Ainda mais porque estou rodeado de pessoas com um nível de conhecimento a nível de tecnologia que me deixa de boca aberta.

É engraçado como nos podemos sentir tão diferentes dependendo do contexto em que nos encontramos. Eu vinha de um sítio onde era bastante bom no que fazia e agora estou num sitio onde muitas vezes me perco ao tentar acompanhar o raciocínio de certas pessoas. Mas foi a minha constante vontade em adquirir conhecimento que me colocou onde estou agora e por isso não podia estar em melhor lugar.

Vou dando notícias...

Microsoft Webday 2010 no Porto

2010-01-08T13:29:00Z

>Participe no grande evento web da Microsoft no Porto a 2 de Fevereiro de 2010!

O WebDay traz-lhe as tendências e a inovação Web: o futuro das tecnologias como o Silverlight, o Internet Explorer, Expression, ASP.NET e Windows Azure. 1 dia completo, com três tracks, 16 sessões e os melhores oradores nacionais. Terá ainda a oportunidade de partilhar as melhores práticas com a Comunidade Web.

O Webday está desenhado para Web Developers, Criativos, Information Architects, Designers Gráficos, profissionais de User Experience, Digital Marketeers e. para todos os que partilham o interesse sobre o que o futuro da Web nos trará. Esta é a oportunidade de fazer parte do futuro da Web!

INSCREVA-SE JÁ! O NÚMERO DE LUGARES É LIMITADO.

Tutorial 3: O Básico do Multitouch em Silverlight 3

2010-01-04T14:46:00Z

Ultimamente tenho andado a explorar algumas capacidades do Silverlight 3 com as quais ainda não tinha tido qualquer tipo de contacto apesar de as achar bastante interessantes. Uma delas é o multitouch. Tenho que vos confessar que estou bastante impressionado! É uma feature muito interessante e com muito potencial em várias áreas de aplicação.

Para termos acesso a estas funcionalidades temos que ter o Windows 7 instalado no nosso PC e o PC tem que ter suporte para multitouch. A partir daí a nossa imaginação é o limite.

Neste post vou mostrar apenas um exemplo muito básico mas que mostra como podemos começar a desenvolver aplicações multitouch em Silverlight 3.

Para começar a utilizar as capacidades de multitouch temos que adicionar em qualquer parte da nossa aplicação o seguinte evento:

Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);

Atenção:

Ao contrário dos eventos do rato (MouseLeftButtonDown, MouseLeftButtonUp, ...), este evento é global. Ou seja, é ligado a toda a nossa aplicação e não pode ser aplicado apenas a um objecto.

A partir deste momento a nossa aplicação está pronta a receber mensagens de toque por parte do hardware. Este evento permite-nos ter acesso a vários métodos mas os principais e que aqueles que serão usados neste post são: GetPrimaryTouchPoint e GetTouchPoints.

O GetPrimaryTouchPoint devolve o primeiro ponto que foi tocado no ecrã numa possível sequência de toques. E o GetTouchPoints devolve uma colecção de todos os pontos que estão a ser pressionados.

Ambos os métodos devolvem objectos do tipo TouchPoint. Este obejecto permite-nos aceder a quatro valores.

Position - Posição do toque em relação a um determinado offset. Se passarmos null ao chamar a função o valor devolvido é absoluto.
Action - Existem três tipos de toque: Down, Move e Up. É bastante fácil perceber o que faz qualquer um destes eventos mas o evento Move não é tão trivial como parece. O evento Move está sempre a ser chamado mesmo que a posição do toque não seja alterada. Ou seja, existe um refresh constante deste evento.
TouchDevice - É o ID único que o sistema operativo atribui ao dispositivo que está a servir para o toque.
DirectlyOver - Devolve o objecto que está directamente no sítio pressionado.

Um pequeno exemplo de utilização é:

public MainPage()

      InitializeComponent();

      Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);

 void Touch_FrameReported(object sender, TouchFrameEventArgs e)

    TouchPointCollection points = e.GetTouchPoints(null);
    TouchPoint primaryPoint = e.GetPrimaryTouchPoint(null);

            if (null != primaryPoint)
            {
                if (primaryPoint.Action == TouchAction.Down)
                    e.SuspendMousePromotionUntilTouchUp();

                switch (primaryPoint.Action)
                {
                    case TouchAction.Down:
                        // fazer alguma coisa
                        break;

                   case TouchAction.Up:

                        // fazer alguma coisa
                        break;

               case TouchAction.Move:
                        // fazer alguma coisa
                        break;

                }
            }

Com este pequeno exemplo estamos a aceder a todos os pontos que são pressionados no ecrã. Agora, e tal como disse no ínicio do post, o limite é a imaginação.

Criem e depois divulguem pois o conhecimento só serve de alguma coisa se o conseguirmos passar para as outras pessoas... ;)

Microsoft Surface SDK agora disponível para todos

2009-12-04T23:24:00Z

Gostavas de desenvolver para a Microsoft Surface mas não tens uma? Agora já é possível!!

No passado mês de Novembro, no PDC 2009 foi lançado o Microsoft Surface Software Development Kit (SDK) Workstation Edition. Este SDK permite a qualquer pessoa desenvolver aplicações para a Surface sem que seja necessário ter uma. Para fazer o download basta seguir este link.

Experimentem, vale a pena...

Imagine Cup RoadShow @UBI

2009-11-07T19:08:00Z

No dia 13 de Outubro o roadshow do Imagine Cup passou na UBI (Universidade da Beira Interior, Covilhã). Como MSP (Microsoft Student Partner) da UBI coube-me a mim a tarefa de organizar tal evento. O programa deste evento foi o seguinte:

1º - O meu colega João Antão da Microsoft apresentou o Imagine Cup 2010 a todos os presentes no auditório. Houve muita gente interessada e nos dias seguintes tenho ouvido muita gente a dizer-me que vai participar este ano. ;)

2º - A equipa do Sharing Spot (Eu, André Barbosa e David Mota), 2ª classificada a nível nacional na competição do ano passado, falaram um pouco da sua experiência na competição, do pré e pós Imagine Cup.

3º - Sessão Técnica sobre Silverlight apresentada por mim.

Essencialmente é este 3º ponto que me "obrigou" a fazer este post. Nesta sessão criei uma loja de música virtual utilizando o SketchFlow. Uma aplicação Web bastante simples onde é possível comprar instrumentos músicais.

Para iniciar a elaboração deste projecto basta abrir o Expression Blend 3 e seleccionar um projecto Silverlight + SketchFlow. Agora pretendemos adicionar um fundo ao nosso website. Para isso basta arrastarmos uma imagem previamente adicionada ao projecto para o nosso "canvas". Como podem reparar a imagem não fica logo posicionada da forma que pretendemos, logo temos que pressionar com o botão direito do rato sobre a imagem e seleccionar "Auto-size -> Fill". Desta forma temos o nosso wallpaper bem posicionado como podemos ver na imagem em baixo.

De seguida pretendemos inserir um menu que nos vai permitir navegar no nosso site. Este menu vai ser bastante simples sendo que vai ser constituido apenas por um rectangulo que vai servir para limitar o menu e 6 botões. Nós não vamos trabalhar todas as páginas que vamos criar, apenas vamos trabalhar a parte da loja mas criamos de qualquer das formas os botões para navegar entre as páginas. Os botões que vamos criar são os seguintes:

- Home

- Store

- Clinic

- Blog

- Location

- Contacts

O aspecto da página que criámos será o exibido na imagem em baixo.

De reparar que o menu que acabámos de criar ainda não nos permite navegar no site por duas razões: primeiro porque ainda não criámos as páginas para as quais queremos navegar e em segundo porque ainda não dissemos aos botões para onde queremos que eles naveguem.

Por isso vamos agora criar as nossas páginas. Como podemos ver na imagem mostrada em baixo, ao passar com o rato sobre o nosso ecrã principal a primeiro opção que nos aparece é "Create a connected screen", seleccionamos essa opção e arrastamos para outra posição do SketchFlow Map. Assim criamos um novo ecrã. Agora vamos replicar esta acção para os restantes botões e ainda alterar o nome dos nossos ecrãs. O resultado final é o apresentado em baixo.

O passo seguinte é adicionar um wallpaper nos ecrãs que acabámos de criar. Para isso vamos introduzir a noção de component screen. Um component screen é um elemento que é comum a todos os ecrãs aos quais está ligado. Para isso vamos adicionar o novo wallpaper a um dos ecrãs criados recentemente da mesma forma que fizemos no ecrã principal. De seguida queremos criar então o nosso componente screen. Para isso carregamos com o botão direito do rato sobre a imagem e seleccionamos "Make Into ComponentScreen..." como podemos ver no ecrã em baixo. Depois de lhe termos dado um nome vemos um novo componente de cor verde no SketchFlow Map.

Agora para termos a imagem nos ecrãs todos temos que seleccionar o 3º ícone do component screen que criámos anteriormente e arrastar para cima do ecrã ao qual pretendemos ligar. Assim obtemos a imagem no ecrã. De reparar que a imagem não fica posicionada no mesmo sitio em todos os ecrãs. É necessário reposicioná-la da mesma forma que fizemos no primeiro ecrã. O resultado final é o apresentado em baixo.

De seguida vamos criar em todos os ecrãs um menu que nos vai permitir navegar entre os vários ecrãs da nossa Aplicação Web. Como criámos um menu logo no primeiro ecrã vamos então aproveitá-lo para criar um novo component screen de nome "NavigationMenu". O método de criação é o mesmo que foi utilizado anteriormente com o wallpaper e o resultado final é o apresentado de seguida.

A partir deste momento temos o menu de navegação em todas as janelas ao qual este está ligado. Tal como fizemos com o wallpaper temos que posicionar o menu onde pretendermos pois o Blend não posiciona o objecto no mesmo sitio onde ele foi criado. Agora, se executarmos reparamos que ao utilizarmos o menu ainda não conseguimos navegar para lado nenhum, isto porque ainda não atribuimos funções aos botões. Pois é isso mesmo que vamos fazer de seguida.

Para dizermos a um botão para que ecrã este deve navegar é bastante simples como podemos ver no ecrã em baixo. Basta irmos para o component screen criado anteriormente e sobre o botão pressionamos com o botão direito do rato e seleccionamos "Navigate To". Aqui é só escolher para que ecrã queremos navegar. De reparar que ao alterarmos as opções de navegação do menu estas são alteradas em todo o lado onde o menu esteja presente.

A partir deste momento já temos uma aplicação completamente navegável. Por isso passamos à parte seguinte que é criar a parte da loja online. Para isso temos que abrir o ficheiro "Store". Neste ecrã vamos querer inserir um TextBlock (com o nome da página), duas Listboxes (uma onde irão estar os todos os objectos da loja e outra onde estarão os objectos que queremos comprar) e um botão (que irá permitir fazer as compras). O aspecto final deverá ser o seguinte:

De modo a adicionarmos dados às nossas Listboxes vamos utilizar uma caracteristica do Expression Blend 3 que é o SampleData. O SampleData permite-nos simular uma base de dados. Basta-nos definir uma estrutura de dados e o Expression Blend gera os valores automaticamente por nós. Desta forma torna-se muito fácil utilizarmos dados na nossa aplicação.

Para criar este SampleData basta definir um novo sample data como está exibido na imagem em baixo. Depois de dar-mos um nome ao Sample Data Source este é criado automaticamente criando logo uma colecção com duas propriedades. Aqui vamos definir uma estrutura de dados de acordo com as nossas necessidades. Para o nosso caso vamos definir 4 campos: nome (String), descrição (String), preco (String -> Price) e imagem (Image). Para a o campo imagem podemos definir as nossas próprias imagens ou deixar que o Blend as gere automaticamente. Para isso basta definir-mos a pasta onde o Blend vai buscar as imagens. O resultado final para o SampleData deve ser o que está nas imagens em baixo.

Agora que temos a nossa "base de dados" criada temos que adicionar os dados à Listbox. Para isso basta seleccionar a colecção e arrastar para a Listbox como podemos ver na imagem em baixo.

A partir deste momento temos os nossos dados na ListBox mas o aspecto não é o pretendido. Por isso vamos editar o template dos items da ListBox. Isto é feito de uma forma muito simples tal como podemos ver na imagem exibida em baixo.

Aqui podemos editar o ItemTemplate da nossa Listbox de uma forma bastante fácil. Basta alterar as propriedades dos nossos elementos e temos automaticamente um novo aspecto para cada item da base de dados. Eu vou pretender fazer algo mais complexo para ficar com um aspecto mais "user-friendly". O resultado final deverá ser o apresentado em baixo.

Como podem reparar no template que eu criei apenas podem ver a imagem, o nome e o preço do objecto. E porquê?? Porque eu aqui decidi mostrar-vos mais umas novidades desta nova versão do Silverlight 3. Estas são os States e os Behaviors. Os States são os estados possíveis de um objecto e os Behaviors são os comportamentos que um objecto tem.

Para vos mostrar estas funcionalidades eu defini a altura ("Height") do TextBlock "descricao" a 0. Agora vou definir os estados possíveis deste objecto. Como podem ver na barra de ferramentas no canto superior esquerdo têm uma tab "States". É aqui que vamos adicionar os nossos estados. Mas antes disso vamos converter o 2º StackPanel que contém o "nome", "descricao" e "preco" para um UserControl para se tornar mais fácil tratar dos estados. Este passo é muito simples. Basta pressionar com o botão direito do rato sobre o StackPanel e escolher "Make Into UserControl". Aqui decidi atribuir-lhe o nome "SlidingStackPanel". Agora que já temos o nosso UserControl podemos então adicionar os estados ao mesmo.

Em primeiro lugar temos que adicionar um VisualStateGroup que vai servir para agrupar todos os nossos estados. Para isso basta pressionar o botão "Add state group" tal como mostra a imagem em baixo. De seguida temos que adicionar os nossos estados. Para isso basta pressionar o botão "Add State". No nosso caso vamos querer 2 estados: On (quando o TextBlock está visível) e Off (quando o Textblock está escondido). Depois de criarmos os 2 estados vamos então definir as propriedades dos mesmos. Com o estado "On" seleccionado vamos alterar a sua propriedade "Height" para 100. E com o estado "Off" seleccionado vamos alterar a propriedade "Height" para qualquer valor e depois voltamos a colocar este valor a 0. Este é um pequeno truque para que o Expression Blend grave uma keyframe na Timeline de modo a que o Silverlight reconheça que existe uma alteração de estado. Para a alteração de estado não ser feita tão bruscamente podemos ainda adicionar uma transição. Para isso em cada um dos estados podemos adicionar uma transição, definir o tempo da mesma e ainda definir o tipo de animação como podemos ver em baixo.

Neste momento temos os estados definidos. Agora vamos aproveitar um behavior que já vem como base no Expression Blend 3 que é o "GoToStateAction". Este Behavior permite alterar o estado de um objecto em runtime. Como podem ver em baixo eu atribui 2 Behaviors à imagem, um quando o rato é colocado sobre a imagem e outro quando o rato sai da imagem. Ao passar por cima da imagem é mostrada a descrição do objecto e ao sair a descrição é novamente escondida.

Bem, parece que chegámos ao fim. Espero que tenham gostado tanto como os meus colegas da UBI que estavam a assistir a esta sessão. Comentem e façam sugestões se tiverem alguma coisa que estejam interessados em ver neste blog. Pode ser que eu consiga ajudar.

No próximo post vamos falar de Silverlight Business Applications e de DataBinding. Estes temas foram abordados por mim num workshop no ISCTE.

Stay tuned...

Tutorial 2: SketchFlow Player

2009-10-05T10:15:00Z

Neste tutorial vou falar-vos das capacidades do SketchFlow Player. Tal como disse no último post o SketchFlow é uma ferramenta de prototipagem e o SketchFlow Player é o ambiente onde uma aplicação SketchFlow vai correr.

O SketchFlow Player corre sobre o browser e é multi-plataforma. Isto é extremamente útil pois podemos desenvolver um protótipo extremamente complexo e apenas passamos ao cliente uma página web. O SketchFlow Player tem também algumas ferramentas muito boas e simples para criar notas e feedback. Tal como podemos ver na figura em baixo temos canetas para assinalarmos no "canvas" os locais que têm que ser melhorados e depois podemos associar feedback a esses mesmos desenhos.

É possível ver também o mapa do nosso projecto tal como conseguimos no Blend. Isto facilita que o cliente consiga ver a estrutura e o "workflow" da aplicação.

Como podemos observar nas imagens em baixo inserimos 2 esquemas no nosso "canvas" e associados a estes 2 comentários. Assim o cliente diz o que pretende ver alterado na aplicação assinalando o local que está mal e criando comentários associados a explicar o que está mal.

Este comentários podem ser vistos ou não. Existe um ícone que mostra ou esconde os "desenhos" permitindo assim que a aplicação posso continuar a ser visionada sem o transtorno de ter esquemas extra no ecrã.

Agora uma das partes mais interessantes do SketchFlow Player é o facto de podermos exportar o Feedback. Para isso basta seleccionar o ícone visível na imagem em baixo. Preencher o nome do autor que inseriu o feedback e gravar o ficheiro no disco tal como é explicado nas seguintes imagens.

Agora que o cliente já gerou o ficheiro de feedback pode enviá-lo para quem criou a aplicação para que este possa carregá-lo para o projecto no Expression Blend e possa assim ver as alterações que o cliente pretende efectuar. Este processo de abrir os ficheiros de feedback dentro do Expression Blend é muito simples como é podemos ver em baixo. Primeiro temos que verificar que a janela de Feedback está visível no nosso projecto. Por defeito não está visível.

Depois de estarmos na janela temos que adicionar o ficheiro. Para isso seleccionados o ícone "+" no canto superior direito da janela de Feedback e vamos buscar o ficheiro que o cliente nos passou. A partir deste momento temos o feedback do nosso cliente no ecrã.

Tal como no SketchFlow Player podemos retirar a visibilidade aos "desenhos" para continuarmos a editar o nosso projecto normalmente e fazer as alterações que o cliente pretende. Uma coisa a reparar é o facto de no mapa aparecerem distinguidos os ecrãs que têm comentários com um ícone de uma lâmpada.

Outra funcionalidade bastante interessante é a possibilidade de podermos exportar o projecto para Word. Isto vai criar um relatório com todos os comentários e imagens do nosso projecto. Isto é muito bom pois um cliente pode querer analisar a aplicação no papel em vez de analisar no SketchFlow Player e ao ter acesso a este relatório pode fazê-lo.

E está assim explicado o funcionamento do SketchFlow Player...

Comentem ;)

Tutorial 1: Introdução ao SketchFlow

2009-10-03T21:36:00Z

Depois do REMIX'09, em Lisboa, onde assisti a algumas sessões muito interessantes sobre Expression Blend, Microsoft Surface e User Experience não resisti a fazer um post sobre o que mais me fascinou nestas sessões. E o que mais me fascinou como devem imaginar pelo titulo do post foi o SketchFlow. O orador desta sessão foi o Arturo Toledo que é Product Manager na Microsoft em Seattle para a equipa de UX Platform & Tools (Silverlight, WPF, Expression...).

O SketchFlow é uma ferramenta de prototipagem presente no Expression Blend. Esta ferramenta é muito boa para criar protótipos de aplicações para mostrar aos compradores da aplicação. Assim evita-se muito tempo perdido ao alterar constantemente uma aplicação pois podemos, a partir de um sketch book, incoporar acções e eventos. Ou seja, temos uma aplicação completamente funcional mas com o aspecto de um livro de rascunhos sendo que esta aplicação é facilmente modificável.

Neste primeiro tutorial não vamos avançar muito nas capacidades do SktechFlow. Vamos criar uma aplicação muito simples em que o utilizador vai ter uma página para fazer o login. Caso falhe será levado para um ecrã vermelho e no caso positivo será levado para um ecrã verde.

Para criar um projecto SketchFlow basta escolher criar um novo projecto e depois escolher Silverlight 3 SketchFlow Project ou WPF SketchFlow Project dependendo do tipo de projecto que pretenda. No nosso caso pretendemos criar um projecto de SketchFlow para Silverlight 3.

Após a criação do projecto aparece-nos o nosso workspace. Como podemos ver do lado esquerdo temos o nosso projecto, os "assets" e os estados. Na tab de projectos temos todos os ficheiros que constituem o nosso projecto recentemente criado. Na tab "assets" temos todos os elementos que podemos inserir no nosso projecto, entre os quais controlos, ecrãs, estilos, comportamentos, efeitos, etc. De todos estes só vamos abordar os controlos neste primeiro tutorial.

Um projecto de SketchFlow permite-nos inserir controlos normais mas uma das coisas que mais me chamou a atenção é o facto de termos controlos do tipo esboço. Ou seja, controlos em que o template faz com que estes pareçam desenhados com lápis. Para aceder a estes controlos basta aceder à categoria "SketchStyles" como está na imagem em baixo.

Outra coisa que este SketchFlow traz é o mapa de SketchFlow. Aqui podemos criar muito facilmente transições entre os vários ecrãs. Mas iremos abordar com mais profundidade este tema mais à frente neste mesmo tutorial.

Agora que já sabemos onde estão os nossos controlos vamos criar um simples formulário onde o utilizador irá preencher o seu nome de utilizador e password e depois carrega num botão para proceder à validação. De notar que neste tutorial não vamos tratar da parte de comportamentos. Será um tema para um tutorial mais avançado.

O resultado final do formulário é apresentado na imagem em baixo.

Agora que já temos o nosso formulário criado temos que criar os ecrãs seguintes e as respectivas transições. Para isso vamos utilizar o mapa.

Ao passar o cursor do rato por cima do "Screen 1" (o nosso ecrã principal) aparecem-nos várias opções: Criar um ecrã ligado, ligar a um ecrã existente, criar e inserir uma componente de ecrã e alterar a tag visual. Se decidirmos criar um ecrã ligado vai ser criado um novo ecrã ligado a este. Se decidirmos ligar a um ecrã existente, este irá ficar ligado ao outro ecrã que escolhermos. A terceira opção permite-nos ter elementos que são comuns a todos os ecrãs (ex: Logótipo da empresa). E a última opção permite-nos alterar a cor do objecto para ser assim mais fácil identificar que tipo de objecto é.

No nosso caso, como é possível ver na imagem em baixo, criámos 3 ecrãs. O "Screen 1" que é o nosso ecrã principal onde está o formulário, o "Sucesso" caso as credenciais estejam correctas e "Falha" caso a password ou nome de utilizador estejam errados. De reparar que alterámos as cores para melhor compreender o diagrama. Neste caso não era muito dificil de perceber mas em esquemas mais complexas torna-se mais complicado.

De reparar, na imagem acima, que do "Screen 1" para o ecrã "Falha" temos uma seta para a frente e outra para trás. Isto porque no caso de existir um erro na introdução das credenciais queremos dar a possibilidade ao utilizador de voltar a tentar como podemos ver no ecrã em baixo. Para o caso de sucesso temos um ecrã bastante semelhante ao apresentado em baixo mas sem nenhum botão e com a cor verde.

Agora já temos os ecrãs. Mas então e como navegamos entre eles. Muito facilmente!!!...como podemos ver em baixo. Basta pressionar sobre o objecto com o botão direito do rato e escolher o ecrã para o qual pretendemos ir.

Agora já temos o nosso projecto terminado. Vamos testá-lo. Para isso basta pressionar F5 para compilar e correr o mesmo utilizando o SketchFlow Player. Tal como podemos ver no ecrã apresentado em baixo temos assim acesso a todos os ecrãs que estão ligados ao ecrã principal. É portanto muito fácil navegar entre os ecrãs.

Por exemplo, ao navegar para o ecrã "Falha", tal como podemos ver em baixo, temos o ecrã vermelho com o botão que nos permite navegar outra vez para o inicio.

O objectivo deste post está concluido. De referir que o SketchFlow é uma ferramenta com muitas capacidades e não abordámos quase nenhuma neste post. Ficam para os próximos tutoriais. ;)

Stay tuned!!

Começar a trabalhar com Silverlight

2009-09-27T09:54:00Z

Este fim de semana estive presente no Team Building dos Microsoft Student Partners 2010. Antes de mais queria dizer que adorei conhecer todos os meus novos colegas e amigos. Foram 3 dias muito bons.

Mas uma coisa que eu notei é que grande parte da malta que lá estava não conhecia o Silverlight ou já tinha ouvido falar mas não nunca tinha "brincado" com ele. Ora bem, como uma pessoa que já trabalha com o Silverlight há algum tempo achei que era minha obrigação dar uma mãozinha a esta malta que bem merece.

Antes de mais uma pequena introdução ao conceito que está por trás da palavra Silverlight. O Silverlight é uma framework de desenvolvimento para a web que integra num simples plugin características multimedia, gráficos, animações e essencialmente interactividade. Eu podia falar-vos das versões anteriores do Silverlight e das suas características mas penso que sendo este um post para iniciantes no Silverlight não terá grande interesse. Por isso vou mostrar antes as características que distinguem a última versão desta mesma tecnologia...a versão 3!!

A versão 3 do Silverlight saiu à bem pouco tempo mas trouxe muitas novas funcionalidades em relação às versões anteriores, tais como:

- Smooth Streaming

O Smooth Streaming é uma funcionalidade que eu acho fantástica. Esta característica detecta dinamicamente e altera em tempo real a qualidade de video de um ficheiro multimédia basendo-se na largura de banda e nas condições do CPU. Isto faz com que seja possível ver um video do principio ao fim sem interrupções sendo que apenas é alterada a qualidade do video. Um ponto muito bom desta característica é que ela suporta HD.

- SketchFlow

O SketchFlow vem revolucionar a velocidade e eficácia da construção de uma aplicação Silverlight. O SketchFlow fornece-nos métodos informais para representar e prototipar "user interfaces" de forma bastante rápida e simples tornando mais fácil evoluir o conceito inicial da aplicação para uma aplicação final que os clientes adorem.

- Out of Browser

O Silverlight agora permite que uma aplicação Silverlight criada para correr no browser funcione fora do mesmo. Assim, qualquer aplicação Silverlight pode correr quase como uma aplicação WPF.

- Pixel Shader Effects

Este conceito é muito interessante principalmente para as pessoas que trabalhem com multimédia. Os Pixel Shader Effects permitem-nos de uma forma bastante básica alterar o conteúdo gráfico, aplicar efeitos, etc em tempo real de ficheiros multimédia, sejam estes imagens ou vídeos.

Agora que já sabem o que o Silverlight 3 tem para oferecer é importante saberem os passos para instalar todas as aplicações e ferramentas necessárias para iniciar o desenvolvimento em Silverlight. Ora bem, para isso são necessários 5 pequenos passos sendo que alguns são opcionais mas eu aconselho na mesma.

1 - Instalar as ferramentas de desenvolvimento

2 - Instalar o Microsoft Expression Blend 3 + SketchFlow

3 - Instalar o DeepZoom Composer

4 - Fazer download do Silverlight Toolkit

5 - Fazer download dos serviços .NET RIA

Para fazer o download e instalação de todas estas ferramentas só tem que seguir o link http://silverlight.net/getstarted/. A ordem dos passos deve ser respeitada de modo a que a instalação corra sem problemas.

Agora que já têm os conceitos básicos e já sabem o que é o Silverlight resta-me deixar-vos alguns alguns links para resources e tutoriais...

1 - http://silverlight.net/

Esta é a página oficial do Silverlight. Aqui podem encontrar tudo, desde tutoriais, vídeos, downloads aplicações criadas por outras pessoas e ainda a comunidade Silverlight. Caso decidam começar a "brincar" com o Silverlight aconselho vivamente a entrarem na comunidade. O forum é muito bom para quem está a começar e não só. É um óptimo sítio para verem as vossas questões respondidas num curto espaço de tempo.

2 - http://silversprite.codeplex.com/

Para os interessados em jogos como eu. :) Esta componente permite-nos correr jogos XNA em Silverlight de uma maneira ridiculamente fácil!!

3 - http://connect.microsoft.com/silverlightmapcontrolctp

Este link guia-vos ao portal connect onde a Microsoft tem várias ferramentas em desenvolvimento e onde é possível ter acesso às mesmas. Neste caso o link é para o componente do Virtual Earth para Silverlight. Sim, é verdade podemos utilizar o Virtual Earth na nossa aplicação Silverlight. Experimentem, é muito interessante.

4 - http://thelighteffect.wordpress.com/

O blog do nosso amigo Nuno Martins. Este blog começou à pouco tempo mas gostei muito da maneira como começou, com tutoriais de qualidade. Participem e comentem, conhecendo o Nuno como conheço ele se vocês comentarem e fizerem sugestões ele começa a meter mais tutoriais. E a vantagem disto é que ele trabalha na área.

Podia estar aqui a colocar uma lista interminável de recursos mas acho que para começar este chegam, especialmente o primeiro que tem tudo...

Primeiro Post

2009-09-27T09:27:00Z

Boas a todos!

Como em qualquer blog há sempre um primeiro post que é um género de introdução ao mesmo. Pois bem, este não é excepção...

Neste blog eu vou tentar abordar algumas tecnologias da Microsoft tais como Silverlight, WPF, XNA entre outras. Vou falar também de notícias sobre tecnologia, trabalhos realizados por mim, etc... Vou criar alguns tutoriais de tempos a tempos mas estes serão essencialmente para Silverlight pois é a minha tecnologia Microsoft de eleição. :)

Não será preciso dizer que estou aberto a sugestões para tutoriais e posts. Cometem o que eu colocar neste blog porque o vosso feedback é muito importante para saber se estou a ir no bom caminho!