O Centro Educacional de Pedreira é uma instituição educacional conveniada com o Senai Ary Torres onde eu tive o privilégio de estudar há mais de 10 anos atrás e onde hoje sou professor.

Professores e funcionários na inauguração do mini auditório multimídia

Beneficiado pela flexibilidade da instituição, este semestre as aulas de lógica de programação terão um formato diferente: boa parte do conteúdo será baseada em screencasts – onde os alunos poderão assistir as aulas em casa e aproveitar o tempo na escola para interagir mais com os colegas e o professor.

Essa série de screencasts será publicada no YouTube, e cada novo vídeo será publicado também aqui no meu blog, para que mais pessoas (alunos e/ou professores) possam se beneficiar do material.

A primeira parte do curso será baseada no Scratch, que é uma linguagem de programação aberta e focada no aprendizado de lógica de programação. O Scratch usa e abusa de elementos visuais e para aprender programação utlizando blocos de comando, assim o aluno não se “assusta” ao ter de lidar com numerosas linhas de código para criar um programa. Dessa forma, com pouco tempo e muita criatividade o aluno pode criar desde animações simples até jogos de uma maneira lúdica, enquanto vai absorvendo – mesmo que sem querer – os principais conceitos da lógica de programação.

Veja todos os vídeos da série na categoria Ensino, que estarão disponíveis tão logo estejam prontos.

Bons estudos e boa diversão!

Posts relacionados

• Precedência dos operadores em Ruby“>Precedência dos operadores em Ruby (0)
• Livro: Google Android“>Livro: Google Android (0)
• FlexReport com o Flex4!FlexReport with Flex4“>FlexReport com o Flex4!FlexReport with Flex4 (8)
• CRUD com o RestfulX – aplicação funcionandoCRUD with RestfulX – live application“>CRUD com o RestfulX – aplicação funcionandoCRUD with RestfulX – live application (2)
• CRUD com o RestfulX: Parte 1/2 – RetrieveCRUD with RestfulX: Part 1/2 – Retrieve“>CRUD com o RestfulX: Parte 1/2 – RetrieveCRUD with RestfulX: Part 1/2 – Retrieve (7)
• Screencast: desenvolvendo uma aplicação com RestfulX em menos de 5 minutos“>Screencast: desenvolvendo uma aplicação com RestfulX em menos de 5 minutos (8)
• GIT Cheat Sheet“>GIT Cheat Sheet (0)
• Erro “bad line length character” no Git“>Erro “bad line length character” no Git (1)
• Gerando relatórios com o FlexReport – Parte 3 (Screencast)“>Gerando relatórios com o FlexReport – Parte 3 (Screencast) (56)

© Elvis for Elvis Fernandes, 2012. |
Permalink |
Nenhum comentário |
Adicione ao
del.icio.us


Tags: educação, lógica, programação, scratch, screencast

A renderização da interface gráfica do Windows Phone 7 foi projetada para buscar o máximo de performance que o smartphone pode proporcionar, a UI Thread é responsável pelo desenho da interface principal do aplicativo, quando criamos um software para o WP7, devemos evitar bloquear a UI Thread, pois ela está diretamente relacionada a performance do software e também com a experiência do usuário com o aplicativo.

Os smartphones com Windows Phone 7, tem disponível um recurso que utiliza a aceleração da GPU, aumentando consideravelmente o desempenho gráfico para algumas tarefas relacionadas a manipulação de imagens e animações, principalmente as que usam a rotação de eixos, escalas e alguns tipos de? animações que usam de Storyboard. Não é necessário acionar nada para que alguns tipos de Storyboards utilizem esse recurso, eles automaticamente usam o Composition Thread ou também chamado de Render Thread.

O Render Thread pode ser usado para animações simples utilizando DoubleAnimation ou Easing Functions, ou em propriedades? como Opacity, Render Transforms e Rectangular Clip. Habilitando o EnableRedrawRegions podemos ver quais regiões na aplicação estão sendo desenhadas no momento, visualizando? quadro a quadro:

Application.Current.Host.Settings.EnableRedrawRegions = true;

Composition Frame Rate Thread? e UI Frame Rate Thread

Quando executamos um aplicativo através do Visual Studio 2010 com o smartphone plugado no computador,? podemos visualizar alguns números no lado superior direito da tela, esses números servem para você ter como parâmetro alguns pontos sobre a renderização gráfica, memória, etc, os dois primeiros números de 3 dígitos são referente a Render Thread e a UI Thread.

O Composition Frame Rate Thread está associado a velocidade com que a tela é atualizada em uma thread separada da UI Thread, como referência, o Windows Phone 7 utiliza o valor 30 como ponto de equilíbrio, ou seja, quando for abaixo de 30, os números estarão na cor vermelha, acima de 30 ele ficará com a cor default, o valor mais próximo de uma boa performance é 60, sua aplicação deve buscar sempre se aproximar desse número.

O UI Frame Rate Thread mostra a taxa de atualização da Thread principal, enquanto a interface do usuário estiver ativa, o valor de 30 também foi definido como ponto de equilíbrio, ficando vermelho se a aplicação estiver abaixo deste valor, porém este valor deve ser acima de 20 para ter um tempo de resposta aceitável e quanto maior o valor , o tempo de resposta será mais rápido.

Exemplo prático de UI Thread VS Render Thread

Vou criar um aplicativo simples com dois elementos Ellipse na tela, um com o nome BolaVermelha e outro com BolaAzul, as duas Ellipses serão animadas na tela, a BolaAzul vai utilizar o Render Thread, pois vamos utilizar uma Storyboard com a propriedade RenderTransform, já a BolaVermelha vamos anima-lá atualizando a mesma propriedade, mas utilizando um timer DispatcherTimer para atualizar a propriedade, ou seja, não utilizaremos uma Storyboard para realizar a animação e ela estará utilizando a UI Thread.

   1:    public partial class MainPage : PhoneApplicationPage

   2:      

   3:  

   4:          DispatcherTimer timer;

   5:          RotateTransform rotateVermelho;

   6:          bool bateVolta;

   7:          int contador = 0;

   8:  ? 

   9:          public MainPage()

  10:          

  11:              InitializeComponent();

  12:              Loaded += new RoutedEventHandler(MainPage_Loaded);

  13:  ? 

  14:              Application.Current.Host.Settings.EnableRedrawRegions = true;

  15:  

  16:              this.BolaVermelha.RenderTransform =

  17:                  new RotateTransform();

  18:              this.BolaAzul.RenderTransform =

  19:               new RotateTransform();

  20:  

  21:              rotateVermelho =

  22:              BolaVermelha.RenderTransform as RotateTransform;

  23:              rotateVermelho.Angle = -50;

  24:  ? 

  25:              timer = new DispatcherTimer();

  26:              timer.Tick += new EventHandler(timer_Tick);

  27:              timer.Interval = new TimeSpan(0, 0, 0, 0, 33);

  28:              timer.Start();

  29:  ? 

  30:              bateVolta = false;

  31:  

  32:          

  33:  ? 

  34:          void MainPage_Loaded(object sender, RoutedEventArgs e)

  35:          

  36:  ? 

  37:              Storyboard storyboard = new Storyboard();

  38:              DoubleAnimation animation = new DoubleAnimation();

  39:              animation.From = 0;

  40:              animation.To = 180;

  41:              animation.Duration = new Duration(new TimeSpan(0, 0, 1));

  42:              animation.AutoReverse = true;

  43:              Storyboard.SetTarget(animation, this.BolaAzul.RenderTransform);

  44:              Storyboard.SetTargetProperty(animation, new PropertyPath("Angle"));

  45:              storyboard.Children.Add(animation);

  46:              storyboard.RepeatBehavior = RepeatBehavior.Forever;

  47:              storyboard.Begin();

  48:  

  49:          

  50:  ? 

  51:          void timer_Tick(object sender, EventArgs e)

  52:          

  53:              if (rotateVermelho .Angle == 120)

  54:              

  55:                  bateVolta = true;

  56:              

  57:              if (rotateVermelho.Angle == -50)

  58:              

  59:                  bateVolta = false;

  60:              

  61:  ? 

  62:              if (bateVolta == true)

  63:              

  64:                  rotateVermelho.Angle -= 1;

  65:              

  66:              else

  67:              

  68:                  rotateVermelho.Angle += 1;

  69:              

  70:  ? 

  71:              contador++;

  72:  ? 

  73:              if (contador == 600)

  74:              

  75:                  MessageBox.Show("Parando a UI Thread");

  76:                  Thread.Sleep(1000);

  77:              

  78:  ? 

  79:              if (contador == 1000)

  80:              

  81:                  MessageBox.Show("Inserindo BitmapCache");

  82:                  BitmapCache cache = new BitmapCache();

  83:                  BolaVermelha.CacheMode = cache;

  84:  ? 

  85:              

  86:  ? 

  87:          }

  88:  ? 

  89:      }

?

Na linha 71 criei um contador, quando chegar a 600, ele vai bloquear a UI Thread, na linha 76, a UI Thread é bloqueada propositalmente utilizando Thread.Sleep, neste momento você irá notar que a animação da? BolaVermelha irá parar com base no tempo definido em Sleep, pois a sua Thread está bloqueada, mas a BolaAzul continuará a se movimentar.

Quando o contador chegar a 1000,? vou adicionar um BitmapCache na propriedade CacheMode da BolaVermelha, em alguns casos onde não estamos utilizando a Render Thread, podemos criar um cache, ou seja, colocar os bitmaps na memória, e com isso aproveitar da aceleração da GPU, com performance semelhante a Composition Thread, porém a BolaVermelha continuará na UI Thread,? uma simples mensagem na tela utilizando um MessageBox irá bloquear a UI Thread enquanto a BolaAzul continuará em movimento.

Conclusão

UI Thread e Composition Thread são recursos fundamentais que o Windows Phone 7 utiliza para apresentar a interface gráfica, conhecendo essas Threads você poderá melhorar a perfomance da sua aplicação, os smartphones são equipamentos limitados se comparado a um PC, conhecer quando utilizar determinado recurso pode fazer muita diferença, existem diversos outros pontos a serem considerados quanto ao monitoramento da aplicação com objetivo de melhorar a perfomance, neste artigo somente apresentei uma introdução sobre o assunto.

Alguns recursos podem não funcionar como esperado no emulador, pois depende de diversos fatores como o suporte a DirectX pela placa de video, neste link você encontra mais informações:

WP7/Silverlight Graphics Performance

Mais informações sobre Bitmap Cache : Bitmap Cache

Mais informações sobre performance: Performance Considerations in Applications for Windows Phone

Twitter!

Fala galera, sábado agora dia 02 às 16 horas estarei ministrando uma palestra online sobre Adobe Flash Catalyst, vou abranger o básico da ferramenta (uma apresentação para quem nunca viu), indo as comparativas entre o CS5 e Panini, passando a criação de algumas animações para entendimento e fechando com explicações sobre algumas limitações da ferramenta, etc. O espaço será aberto a dúvidas, lembrando que sou Designer e não programador e e estarei explicando dentro dessa visão.

O link para a mesma é: http://eventos.flexduck.org/flashcatalyst/

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

Neste tutorial vou criar uma pequena aplicação utilizando o Expression Blend 4,  será implementado o básico para quem está começando com o desenvolvimento de projetos para o Windows Phone 7 utilizando o Expression Blend 4.

No artigo anterior, vimos como preparar o ambiente gratuito de desenvolvimento para criar aplicações mobile utilizando o Windows Phone 7, o Expression Blend é instalado junto com o Windows Phone Developer Tools, saiba mais em Introdução ao Windows Phone 7.

Se você ainda não conhece o Expression Blend 4, talvez tenha uma dúvida, quando utilizar o Visual Studio 2010 e quando utilizar o Expression Blend ?

Tudo que é produzido em XAML pelo Expression Blend também pode ser reproduzido no Visual Studio 2010, porém, a criação de aplicativos visualmente ricos com as novas tecnologias trouxe novas possibilidades ao programador, como o suporte a elementos multimídias e animações, a possibilidade de modificar como as informações são apresentadas nos elementos visuais e outros diversos recursos, com isso houve a necessidade de ter uma ferramenta voltada ao designer da aplicação, onde o foco seria a camada visual.

O Expression Blend chegou para suprir essa necessidade, dessa forma o designer da aplicação tem uma ferramenta com recursos mais sofisticados e visuais, com o Blend a maioria das tarefas são executadas de forma visual, sem que seja necessário digitar dezenas de códigos, por exemplo, o Expression Blend tem total suporte a criação de animações, possuindo uma timeline, onde o designer poderá acionar a animação e gravar todos os movimentos que fizer com o mouse na aplicação, quando finalizar, todo o código XAML é gerado automaticamente pelo Blend, esse é somente um exemplo do qual a ferramenta gera produtividade quanto à criação visual da interface.

O Expression Blend é totalmente integrado ao Visual Studio 2010, é possível trabalhar com as duas ferramentas abertas com o mesmo projeto, que as modificações são atualizadas em cada ferramenta.

Criando uma aplicação no Expression Blend

A aplicação do tutorial vai listar algumas urls em um ListBox, quando o usuário clicar em um item, a aplicação será redirecionada para outra página em XAML, essa página vai  conter um browser e receberá o link a ser carregado.

Inicie o Expression Blend e crie uma aplicação do tipo Windows Phone Application, Figura 1, na aba Projects, temos os arquivos iniciais da aplicação gerados pelo Expression Blend, a aplicação tem três arquivos de imagens, e dois arquivos do tipo XAML, o XAML (eXtensible Application Markup Language), é uma marcação similar a marcação XML, é utilizada no Silverlight tanto para aplicações WEB como para o WP7, e também é utilizada para criar aplicações desktop com o WPF para o ambiente Windows.

Com a marcação XAML podemos criar layouts de telas separadas do código da linguagem de programação C#, possibilitando assim, um menor acoplamento entre o design e a programação, dessa forma um designer poderia trabalhar no design das telas utilizando somente o XAML, enquanto o programador faz o modelo da aplicação.

Resumidamente o arquivo App.xaml é usado pela aplicação silverlight para declarar recursos compartilhados no projeto, já o arquivo MainPage.xaml é o arquivo principal da aplicação, sua representação visual é a que aparece no centro da tela, mostrando uma interface com um layout inicial de um aplicativo WP7.

Figura 1 – Windows Phone Application

Layout Control

Na aba Objects and Timeline, temos a hierarquia dos elementos visuais da aplicação, em nosso projeto, inicialmente vemos 3 itens, o PhoneApplicationiPage, que é a pagina principal do layout, onde todos os elementos serão inseridos, o ApplicationBar, é uma área reservada para um barra onde podemos personalizar botões e menus para serem usados na aplicação, em seguida temos o LayoutRoot, este é o nome dado ao Layout Control Grid da aplicação default.

Um Layout Control serve para auxiliar no posicionamento de elementos na tela, existem vários controles de layout disponíveis em Silverlight, cada layout control tem sua utilidade dependendo do objetivo, o layout control Grid é um dos mais flexíveis, semelhante a uma tabela HTML, esse controle permite que seja criado linhas e colunas,  além de definir o tamanhos e a altura de cada linha e coluna.

Abaixo segue os tipos de Layouts disponíveis para serem utilizados no Windows Phone 7:

• Grid – Layout mais flexível , é possível inserir os elementos dentro de linhas e colunas.
• Canvas – permite posicionar os elementos em posições fixas dentro do Layout Control, ou seja, você pode definir uma posição exata que o elemento deve ficar no Canvas, fornecendo suporte ao posicionamento absoluto dos elementos filhos.
• StackPanel – Adiciona os elementos em uma pilha, com orientação vertical ou horizontal.
• ScrollViewer – Habilita barras de rolagens vertical e horizontal
•  Border – Insere uma borda em um único elemento interno.

 Veja neste link os Layout Controls na prática, para facilitar o entendimento eu digitei o código XAML abaixo da tela principal, refletindo as modificações, conforme digitadas. (video wmv ).

Conhecendo o MainPage.xaml

A tela inicial da aplicação contém um layout Grid principal, chamado de LayoutRoot , com um fundo transparente. Em seguida temos a definição de duas linhas dentro do layout. Dentro do layout control Grid chamado LayoutRoot temos outro layout control do tipo StackPanel, note que o StackPanel está definido na linha zero do Layout Control Grid acima, utilizando a propriedade Grid.Row = ”0”. Dentro do Stackpanel temos três elementos, um TextBlock chamado ApplicationTitle, onde na propriedade Text você poderá modificar o nome da aplicação para qualquer nome que desejar , em seguida temos outro TextBlock com nome de PageTitle, onde podemos também na propriedade Text  modificar o título da página. O Terceiro elemento é outro Layout Control do tipo Grid com o nome de ContentPanel, é nele que o conteúdo da sua aplicação será criado no projeto.

Listagem 1. XAML do código default

Mas tudo isso não é uma regra, em nossa aplicação de exemplo queremos aproveitar o máximo da tela do Windows Phone 7, vamos remover todo o conteúdo do primeiro layout Grid, o LayoutRoot, em seguida troque o tipo de layout, para isso, selecione com o botão direito do mouse no layout control e em Objects and Timeline, clique em Change Layout Type, Figura 3, e altere para um StackPanel. Adicione um ListBox no StackPanel,  o código completo está na Listagem 2.

Vamos também remover a barra do system tray do WP7, onde aparece o nível da bateria, sinal e hora, para isso, selecione o item PhoneApplicationPage na aba Objects and Timeline e nas propriedades, remova o checkbox Show SystenTray, Figura 2, com isso temos todo o espaço disponível da tela para utilizar em uma aplicação.

Figura 2 – Removendo o SystemTray

Figura 3 – Alterando o Layout Control

Listagem 2. XAML da aplicação

Inserindo dados de exemplo

Para criar o nosso exemplo seria necessário carregar informações de algum provedor de dados, o designer da aplicação não precisa conhecer como esses dados serão implementados, pois o ideal é que eles sejam ligados de forma menos acopladas possível, ou seja, que cada camada tenha suas responsabilidades bem definidas, para facilitar essa tarefa ao designer, e para auxiliar nos testes de dados em interfaces XAML, o Expression Blend disponibiliza uma forma de criar dados de exemplo,  deixando ainda os elementos visuais corretamente ligados as objetos que contém os dados.

Para criar uma coleção de dados de exemplo e ligar ao ListBox , clique na aba Data e no ícone Create Sample Data, digite o nome do DataSource, clique nas propriedades e modifique conforme desejar, depois arraste e solte a coleção para dentro do ListBox e você terá uma ListBox ligada a uma coleção de dados. Como esse passo é 100% visual no Expression Blend, veja neste vídeo rápido o processo passo a passo.

 ( video wmv) – Create Sample Data

Figura 4 – ListBox com dados de exemplo

Navegação de Páginas

Para finalizar o exemplo, vamos inserir um evento SelectionChanged no ListBox, assim quando o usuário selecionar um item no Listbox vai abrir outra página com o link selecionado carregado no browser, para inserir o evento, selecione o ListBox, na aba properties, clique  no ícone Events e dê um duplo click no evento SelectionChanged, Figura 5.

Figura 5 – ListBox – Criando um evento SelectionChanged

Dentro do evento SelectionChanged do ListBox,  primeiro vamos obter o item selecionado no ListBox através da propriedade SelectedItem, depois através do recurso NavigationService.Navigate, vamos navegar até a outra página, passando como parâmetro a url que será carregado no Browser, Listagem 3. Adicione uma página em seu projeto com o nome de PhonePageBrowser, adicione um elemento WebBrowser e o método onNavigatedTo, esse método será responsável por obter a url e carregar o browser com o link passado, Listagem 4.

Listagem 3. XAML da aplicação

Listagem 4. XAML da aplicação

Conclusão

O Expression Blend é um poderoso aliado para a criação de aplicativos para o Windows Phone 7 com Silverlight,  vimos de forma superficial como criar uma aplicação na ferramenta, além de conhecer um pouco sobre os layout controls, sample data e navegação de páginas.

Neste artigo será apresentada uma pequena introdução ao desenvolvimento de projetos mobile com o Windows Phone 7, o Windows Phone 7 ou WP7, é o mais recente sistema operacional da Microsoft para a plataforma mobile, foi projetado para proporcionar ao desenvolvedor a criação de aplicativos com recursos interativos e ricos, seu visual é simples, agradável e moderno. Para o desenvolvimento de aplicativos para essa plataforma a Microsoft investiu praticamente no Microsoft Silverlight e no Framework XNA.

O Silverlight pode ser utilizado para diversas finalidades, mas sua força está na criação de aplicativos de negócios em geral, utilizando a plataforma .net. Além do WP7 é possível utilizar o Silverlight para criar projetos web , rodando no browser ou até mesmo criar projetos Silverlight que rodam instalados fora do browser.

O XNA é um framework completo para o desenvolvimento de games, tanto para PCs com o Windows, como para o XBOX 360 e o Windows Phone 7, é possível criar jogos com o Silverlight , mas como o XNA foi concebido com esse propósito ele tem um suporte melhor para a criação de games mais complexos.

Se você já programa em C# .net ou até em Silverlight, você poderá aproveitar e aplicar seus conhecimentos para criar aplicativos para o WP7, neste artigo será apresentado como preparar o ambiente de desenvolvimento para você iniciar a criação de aplicativos para o Windows Phone 7 com Silverlight utilizando o Visual Studio 2010 ou com o Expression Blend.

O Ambiente de desenvolvimento para o WP7 é totalmente gratuito, você poderá utilizar o Visual Studio 2010 Express, o Visual Studio é a principal IDE da Microsoft para o desenvolvimento de aplicativos para a plataforma .net, neste artigo vou usar a versão Premium do Visual Studio 2010 , mas você poderá utilizar os mesmos conceito na versão Express (gratuita).

Uma ferramenta muito interessante e com total suporte ao Windows Phone 7 é o Expression Blend 4, o Blend é uma ferramenta completa para a criação de layouts aprimorados, com suporte ao Windows Phone, nela diversas tarefas são realizadas com a ajuda do mouse, os códigos XAML são gerados automaticamente conforme você manipula visualmente o layout das telas, além de praticidade e produtividade ele também possui um emulador do Windows Phone e diversos recursos para o designer da aplicação. 

Ambiente de desenvolvimento – Windows Phone 7 Developer Tools

Para iniciar o desenvolvimento com o WP7 você vai precisar instalar o Windows Phone Developer Tools  RTW , ele está disponível para o Windows Vista e Windows 7, o programa inclui os seguintes aplicativos:

Para outras informações sobre o ambiente gratuito de desenvolvimento para o WP7 clique aqui.

Inicie a instalação do Windows Phone Developer Tools RTW, se você tiver alguma versão incompatível instalada,  o software vai alertá-lo, a primeira etapa é aceitar a licença do programa, em seguida aparecerá uma tela com o botão “Install Now”, clique  para iniciar a instalação, você poderá neste momento alterar o diretório de instalação, Figura 1, se clicar no botão Customize.

O Windows Phone Developer Tools iniciará a instalação dos programas e você verá a tela da Figura 2 assim que a instalação de todos os programas for completada.

Figura 1. Customizando a Instalação do Windows Phone Developer Tools

Figura 2. Instalação concluída do Windows Phone Developers Tools

Os programadores Visual Basic tem um Windows Phone Developers Tools específico neste link Visual Basic for Windows Phone Developer Tools – RTW.

Criando uma aplicação no Visual Studio 2010

Abra o Microsoft Visual Studio 2010 e clique em File->New->Project, cinco opções são apresentadas como modelos de projetos para o Windows Phone, o primeiro é o Windows Phone Application, nele temos um projeto básico com o mínimo necessário para criar uma aplicação WP7, a segunda opção é a Windows Phone Databound, que permite criar uma aplicação baseada em um modelo capaz de trabalhar com uma lista de dados e com controle de navegação,  a terceira opção é a Windows Phone Class Library, onde é possível criar uma biblioteca para o Windows Phone, em seguida temos o Windows Phone Panorama Application, que cria um projeto com um modelo de navegação muito comum no Windows Phone, onde é possível através do toque na tela andar pela aplicação e navegar em suas listas de dados e por ultimo temos o Windows Phone Pivot Application, onde está disponível um controle Pivot para ser usado na aplicação.

Figura 3. Tipo de projetos para Windows Phone no Visual Studio 2010

Como o foco do artigo não é a criação de uma aplicação para o Windows Phone 7 e sim somente dar uma introdução ao desenvolvimento para a plataforma, vamos criar um projeto do tipo Windows Phone Panorama Application e modificar somente em dois pontos e em seguida visualizar as alterações.

No código fonte da aplicação (XAML), vamos modificar o título da aplicação e o cabeçalho do primeiro item do controle panorâmico, localize o controle  Panorama e modifique o parâmetro Title para um nome qualquer, em seguida faça o mesmo com a propriedade Header do controle PanoramaItem, veja a Figura 4.

Figura 4. Modificando o fonte do projeto Windows Phone Panorama Application

Agora clique no play do Visual Studio 2010 para executar a aplicação e visualizar o emulador do Windows Phone 7, Figura 5 e 6.

Figura 5. Executando a aplicação no emulador do Windows Phone 7

Figura 6. Emulador do Windows Phone 7 no Visual Studio 2010

Abrindo a aplicação no Expression Blend 4

O Expression Blend é um aplicativo que auxiliar na parte gráfica da aplicação, com ele temos uma ferramenta gráfica e com recursos específicos para essa finalidade, um bom exemplo e a criação de animações em sua aplicação, vamos supor que você queira animar um determinado elemento, seja uma imagem ou um botão, por exemplo,a vantagem de utilizar o Blend nesta tarefa é a possibilidade de gravar toda a animação na tela e ele automaticamente gera todo o código XAML, poupando dezenas de linhas de códigos que seriam digitadas no Visual Studio 2010.

O Microsoft Expression Blend for Windows Phone é um dos aplicativos instalados pelo Windows Phone Developers Tools, existe também uma versão para uso do Silverlight  que é a que estou usando neste artigo, chamada de Expression Blend 4, que faz parte do pacote do Expression Studio 4, integrado com o Visual Studio 2010 e que também funciona para programar para o Windows Phone 7.

Saiba mais sobre o Expression Studio 4 neste artigo da .net Magazine.

O Expression Blend é integrado ao Visual Studio 2010, basta clicar no seu projeto com o botão direito do mouse e clicar em Open in Expression Blend, Figura 7, qualquer modificação feita nas ferramentas já é atualizado na outra assim que uma é acionada.

Figura 7. Emulador do Windows Phone 7 no Visual Studio 2010.

Figura 8. Expression Blend 4.

App Hub

Os aparelhos com o Windows Phone 7 ainda não chegaram ao Brasil, o jeito é aguardar ou adquirir um aparelho importado, depois que você já preparou o ambiente de desenvolvimento e já está desenvolvendo aplicativos com a tecnologia Silverlight ou XNA, você vai querer testar o aplicativo no próprio aparelho e ainda começar a ganhar dinheiro enviando sua aplicação para o Windows Phone Marketplace, o Windows Phone Marketplace é onde você pode testar e comprar aplicativos, jogos, músicas para o seu Windows Phone 7.

O Windows Phone Marketplace já está aberto para que os desenvolvedores possam enviar seus aplicativos, para que você possa criar aplicações e vender no Marketplace você vai precisar desbloquear o equipamento e criar uma conta no site App Hub, vamos ver agora passo a passo como realizar esse procedimento.

1. Acesse o site http://create.msdn.com/en-US .
2. Clique em Sig-in .
3. Entre com o seu Window Live ID .
4. Selecione o tipo de conta: Company (Empresas), Individual (desenvolvedor individual) ou Student (estudante que participa do projeto DreamSpark) .

As contas do tipo Company e Individual tem um custo anual de $99, se você é estudante, participe do projeto DreamSpark, atualmente o Dreamspark é a única forma de participar do App Hub sem custos, no meu caso eu selecionei um conta de desenvolvedor individual.

Figura 8. Tipo de conta no App Hub

5. O próximo passo é digitar algumas informações pessoais como nome, endereços e email, no campo Publisher Name, você informará o nome que aparecerá no Windows Phone Marketplace.
6. Selecione a imagem que será apresentada quando você participar de fóruns do App Hub.

Figura 9. Imagem que será apresentada nos fóruns.

7. Se você não selecionou o tipo Student (Dreamspark), será necessário pagar uma taxa anual para enviar aplicativos para o Windows Phone Marketplace, está disponível atualmente o pagamento via cartão de crédito VISA e MASTERCARD.

8. A última etapa e a confirmação do email e de sua identidade, no caso da conta individual, ambos são feitos por e-mail. Você receberá uma e-mail alguns dias após o cadastro para validar a sua identidade, no caso de desenvolvedor individual é necessário enviar uma cópia da sua carteira de motorista ou passaporte.

Figura 10. Conclusão do cadastro no App Hub.

Na página do App Hub, no link Devices, aparecerão os aparelhos que você vai desbloquear e poderá realizar o deploy no Visual Studio 2010 antes de publicar no Windows Marketplace. 

Zune

O Zune é o software que irá fazer a sincronização da sua aplicação no Visual Studio 2010 e o equipamento, para mais informações sobre o Zune veja no blog do MSDN.

Faça o Download da última versão do Zune no site oficial.

Desconecte o seu aparelho do computador, caso esteja conectado, feche todos os aplicativos abertos e inicie a instalação, a primeira etapa é aceitar a licença do ZUNE, em seguida o software é instalado. Quando você receber a mensagem de “INSTALAÇÃO DO SOFTWARE DO ZUNE CONCLUÍDA”, clique em fechar, uma tela será apresentada com as etapas de configurações do ZUNE, a primeira configuração e a tela abaixo onde você vai inserir o nome que o equipamento vai ter no software do ZUNE, no equipamento e no site.

Figura 11. Nome do telefone no ZUNE

Conecte o seu celular via USB e deixe o windows realizar a instalação dos drivers, agora você já tem o seu aparelho sincronizado com o ZUNE.

Figura 12. Dados do aparelho sincronizado

Registrando o aparelho no Windows Phone Developer

Este é o último passo antes de você iniciar o deploy com o Visual Studio 2010 e enviar sua aplicação ao Marketplace, vamos agora registrar a conta como desenvolvedor, no menu iniciar do Windows, localize o menu Windows Phone Developer Tools e clique em Windows Phone Developer Registration.

Figura 13. Registro de desenvolvedor

Deploy no Visual Studio 2010

No menu do Visual Studio 2010, localize o combo onde está escrito Windows Phone 7 Emulator e altere para Windows Phone 7 Device, selecione o projeto no Solution Explorer do Visual Studio com o botão  direito do mouse e clique em deploy. O Zune deverá sempre estar ativo para realizar a sincronização com o equipamento.

Figura 14. Deploy no Visual Studio 2010

Conclusão

Com a evolução dos aparelhos de celulares e smartphones, o mercado mobile está crescendo assustadoramente a cada ano, os novos equipamentos estão recheados de novos recursos e com isso a necessidade de que tenha um sistema operacional capaz de aproveitar ao máximo tudo que as novas tecnologias estão oferecendo, é neste cenário que a Microsoft apresenta o seu Windows Phone 7.

O Windows Phone Marketplace está recheado de aplicativos e games, o potencial do sistema operacional da Microsoft é muito positivo, particularmente eu acho o sistema operacional fantástico e de incrível liberdade de desenvolvimento para os desenvolvedores .net, principalmente pela produtividade e pelo fato de aproveitar os conhecimentos já adquiridos em C#, Visual Basic, XNA e Silverlight, enquanto o Windows Phone ainda não está disponível aqui no Brasil , podemos criar aplicações com as ferramentas gratuitas da Microsoft.

Links Interessantes:

http://winphoneblog.com.br/ 

http://channel9.msdn.com/Series/Windows-Phone-7-Development-for-Absolute-Beginners

http://www.devmedia.com.br/post-17986-Windows-Phone-7-e-Silverlight-4.html

http://www.charlespetzold.com/phone/

http://www.devmedia.com.br/post-18740-Animacoes-no-Windows-Phone-7.html

http://blogs.msdn.com/b/jpclementi/archive/2011/02/02/links-mais-importantes-para-o-windows-phone-7.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clementi+%28Falando+de+novidades+e+tecnologias+Microsoft%29

http://www.microsoft.com/showcase/en/us/related?video=bda22419-a49e-4ef6-973d-f9c6d59aa525

FAQ

Olá!!

Bom, vamos começar do começo!!! Aqui vou explicar um pouco sobre o Adobe Flex e suas maravilhas.
Començando…

• O que é o Adobe FLEX??

• O que o Flex tem de bom?

O Flex é famoso pela sua rica interface gráfica, pela sua facilidade de aprendizado, também pela facilidade de comunicação com outras linguagens (JAVA, PHP, etc) seja por Xml, WebService, RemoteObject, etc. Ele tem efeitos e transições que deixam o usuário final maravilhado com a interface das aplicações desenvolvidas com essa ferramenta.

• Como começo??

É muito fácil de aprender a desenvolver em Flex, para começar você deve fazer o download do Flash Builder (versão teste por 60 dias) aqui (você também pode solicitar uma licença estudante para não comerciais aqui).
É só instalar e começar a se divertir.
*Para rodar as aplicações desenvolvidas em Flex, precisa de um navegador (firefox, chrome, ie, opera, etc) e o plugin do FlashPlayer instalado.
A própria Adobe disponibiliza um treinamento grátis (em inglês) das funções básicas do Flex, esses vídeos podem ser visto aqui.

• Exemplos de aplicações

A muitos exemplos espalhados pela internet, mas existe o Tour de Flex que pode ser instalado logo abaixo (versão em AIR) ou então clicar aqui e ver a versão online.

<p>&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Con&amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;</p>

• Conclusão

A principio é isso pessoal, em breve novos posts com dicas e tutoriais.
Qualquer dúvida é só entrar em contato.

Abraço, Obrigado.

É com grande prazer que recebo a notícia que o meu primeiro artigo?para a?revista Web Mobile Magazine saiu na edição 33, o assunto é a criação de aplicativos móveis para o Windows Phone 7. O Silverlight junto com o Windows Phone 7 possibilita a criação de aplicativos com um visual rico, mais atraente e interativo. É possível criar animações para os elementos visuais, seja uma animação simples, com por exemplo, a troca suave da cor de fundo de um botão ao ser clicado, ou até mesmo uma animação visual complexa, como um desenho animado, neste artigo será explorado a classe Storyboard do Silverlight, que é um dos meios de desenvolvimento para o Windows Phone 7.

Saiba mais sobre está edição.

Twitter: @atsh2

Está disponível a nova edição da easy .net Magazine, a edição 6 contém cinco artigos:
• AJAX, CSS e JavaScript
• Silverlight
• Introdução ao GridView – Parte 1
• Delegates
• Introdução ao desenvolvimento em .NET

Nesta edição colaborei com o artigo sobre silverlight, será apresentado um poderoso recurso do silverlight que é chamado de Storyboard, que possibilita criar animações em Silverlight. Durante o artigo vamos conhecer os tipos de animações disponíveis. O artigo irá também fazer uma breve introdução a ferramenta Expression Blend 4.

link: http://www.devmedia.com.br/post-18470-Silverlight.html

Twitter: @atsh2

Enquanto alguns se questionam, se a plataforma Flash irá sobreviver frente ao HTML5 e ao mimimi do Steve Jobs (Apple) que é totalmente anti-Flash, o pessoal da Adobe mostra que não está para brincadeira…

 

Temos ai mais um excelente exemplo, no qual podemos ver o poderio avassalador da plataforma Flash.

Aonde trabalho essa semana passada (18~22/10/2010), surgiram questionamento sobre a possibilidade de criar aplicações onde o usuário possa ter mais liberdades de fazer basicamente o que quiser na interface. Bom esta aplicação que veremos neste post, responde com um belo SIM! Porém é importante lembrar que aplicações desse gênero custam $$$ e levam um tempo considerável para ser implementadas.

 

Mas chega de enrolação, vamos falar do que interessa aqui.

Apresentando um preview público do projeto ROME, o qual é uma ferramenta de criação e publicação de conteúdo para virtualmente qualquer um.

 

É muito mais do que você sonharia de poder de mídia digital para expressar suas ideias. Caso você queira criar e interagir com um relatório, onde neste tenha vídeo, música, dividir suas apresentações com animações e interatividade, elaborar um ofício visual com gráficos feitos por você mesmo para enviar por e-mail, ou quem sabe projetar e publicar seu primeiro website para todo mundo ver. Mas não sabe por onde começar.

Hoje, a Adobe lhe apresenta uma prévia sobre o projeto ROME, o qual é uma ferramenta tudo em uma só, para criar e publicar conteúdo, utilizando-a de casa, trabalho ou na escola. Esta ferramenta é direcionada a qualquer um que queira adicionar o poder do vídeo, áudio, fotos, gráficos texto ou animações em qualquer tipo de projeto que tenha que criar em seu dia a dia – para materiais que serão impressos e apresentações para arquivos e websites. Você pode começar e finalizar tudo em um ambiente simples e criativo e você também poderá trabalhar com seus arquivos de basicamente qualquer lugar, pois o projeto ROME, possui tanto versão web, quanto uma versão instalável desktop.

O objetivo da Adobe em construir o projeto ROME, tão intuitivo e interativo, na qual a tecnologia não será um impe cílio e dor de cabeça para que você possa expressar suas ideias, com vídeo, áudio, fotos, gráficos, texto, ou animações. A interface é bem limpa e simples, ainda sim ela é bem poderosa. Por trás desse projeto está a tecnologia padrão da Adobe (plataforma Flash), a qual foi projetada e planejada para que você possa rapidamente e facilmente começar a utilizá-la. O projeto ROME é destinado para aqueles que diferente de nós, não são profissionais da área (ex.: designers), porém desejam e querem expressar suas ideias através de um meio mais poderoso, utilizando conteúdo digital.

Para uso no trabalho, tente criar um relatório multimídia, ou então uma apresentação para expor sua ideia causando impacto. Ou então, que tal criar seu primeiro website familiar, usando gráficos, fotos, som, vídeo e animação? Ou então, colaborar e compartilhar seus projetos com seus colegas, clientes, amigos e familiares, através do Adobe Acrobat.com, ou Google Apps, ou através das redes sociais como por exemplo, Twitter ou Facebook.

A Adobe está oferecendo um beta público do projeto ROME e está nos convidando para testar e saber o que achamos desse projeto. [http://rome.adobe.com]

 

Além dessa versão poderosa descrita acima, a Adobe também pensou e disponibilizou uma versão especial focada para educação: Projeto ROME Education.

 

Para professores, o pessoal da Adobe criou uma versão especial. No intuito de auxiliar e melhorara a experiência de aprendizado, criando um novo meio de ensino, para melhorar a comunicação, expressão das ideias e informações, através de meios mais engajados.

Você e seus estudantes pode utilizar o projeto ROME Education individualmente ou em um ambiente colaborativo, compartilhando arquivos entre os serviços integrados, como Google Apps ou Moodle, um sistema de gerenciamento de aprendizado, dentro ou fora de sala de aula.

 

Obs.:

- um último lembrete, o projeto ROME não foi criado em apenas 1 dia. O pessoal da Adobe pede a sua ajuda para melhorar ainda mais a ferramenta.

- Realizei um teste na ferramenta, ela solicita login e senha da Adobe, o qual é o mesmo que você usa quando precisa acessar algum serviço no site da Adobe.

 

A seguir um vídeo sobre a ferramenta:

Via: @leofranca5 – blogs.adobe.com

Veja também:

• #soudev agora social
• [ Java desktop ] Calculadora Léxica
• [ Adobe AIR ] Local File Explorer
• [Adobe AIR 2 : NativeProcess + Java] SimpleAirJava
• [Adobe AIR 2 : NativeProcess] projeto de exemplo : Windows Console