O Windows Phone é o sistema operacional mobile mais recente da Microsoft e um dos que mais vem se destacando neste mercado. Por isso é natural que os profissionais da área sintam a necessidade de conhecer melhor esse sistema operacional e de começar a desenvolver aplicações o mais rápido possível.

Pensando em facilitar a vida e o aprendizado de quem tem interesse nessa tecnologia, aqui serão apresentadas 10 sugestões de artigos que você não pode deixar de ler, com dicas bastante úteis no dia a dia de quem desenvolve aplicações para Windows Phone.

Capturando fotos

Figura 1: Capturando fotos em aplicações Windows Phone

Uma das funcionalidades mais interessantes de serem implementadas em aplicações para dispositivos móveis é a possibilidade de capturar fotos sem precisar sair da aplicação para acessar a câmera. Neste artigo você aprenderá a utilizar a classe CameraCaptureTask para capturar e exibir fotos em sua aplicação.

Acesse: Capturando fotos em aplicações Windows Phone.

Utilizando gestos

Figura 2: Utilizando gestos no Windows Phone

Quando se trata de dispositivos móveis com tecnologia touch screen, é fundamental que a aplicação esteja preparada para suportar e aproveitar os vários gestos possíveis de interação do usuário com a tela. Gestos como tocar na tela ou tocar e segura por alguns instantes podem ser facilmente tratados no Windows Phone, saiba como no artigo Utilizando gestos no Windows Phone.

Modo trial de aplicações

Ao concluir uma aplicação (ou a primeira versão dela), precisamos publica-la na Windows Phone App Store (ou Marketplace). Mas para conquistar o cliente, no caso de aplicações pagas, é preciso antes permitir que ele teste a aplicação. Isso é feito geralmente liberando uma versão trial, que pode seguir várias regras de funcionamento, como: permitir utilizar apenas algumas funcionalidades da aplicação enquanto estiver no modo trial, permitir utilizar a aplicação um determinado número de vezes ou por um certo tempo, etc.

Figura 3: Utilizando o modo trial de aplicações no Windows Phone

No artigo Utilizando o modo trial de aplicações no Windows Phone você pode ver como realizar esse tratamento de tipo de “licença” de uso da sua aplicação quando ela for publicada.

Consumindo dados da web

Consumir serviços da web tem se tornado uma prática cada vez mais comum nos vários tipos de aplicação, sejam desktop, web ou mobile. Essa é uma das formas mais comuns de realizar a comunicação entre aplicações.

Figura 4: Consumindo dados da web no Wi

Boa parte dos desenvolvedores de software um dia já precisou desenvolver um cadastro de clientes, com nome, telefone, endereço, etc. Ou quem sabe um cadastro de fornecedores, de empresas, enfim, na maioria destes cadastros é preciso armazenar o endereço da pessoa, firma, ou qualquer outra entidade.

E quando se desenvolve um cadastro de endereço, uma das necessidades mais comuns é a de poder informar apenas o CEP (Código de Endereçamento Postal) e o próprio sistema apresentar as demais informações (logradouro, bairro, cidade e estado).

Para suprir essa necessidade, geralmente se recorre a um dos seguintes métodos:

• Manter um banco de dados local com as informações de “todos” os CEPs do país e usar esse banco para consulta (geralmente é uma tabela no próprio banco da aplicação).
• Realizar a consulta através da web, consumindo um web service que ofereça esse serviço.

As duas formas, como em tudo na vida, tem seus “prós e contras”, por exemplo:

• Em um banco de dados local, dependendo da configuração das máquinas, rede, etc, a consulta pode ser mais rápida, uma vez que não depende de internet. Porém, esse banco de dados com todos os CEPs do Brasil não é distribuído gratuitamente por um órgão de confiança. Além disso, pode surgir novos CEPs e essas informações teriam de ser atualizadas na base de dados com frequência.
• Acessar um web service nos poupa de manter um banco de dados local e da responsabilidade de ter de atualizá-lo sempre que surgir um novo CEP. Mas para consumir um web service, obrigatoriamente é necessária uma conexão com a internet. E além disso é preciso ter um web service seguro, estável e, dependendo do projeto, gratuito.

Neste artigo, veremos uma solução bastante próxima da segunda forma citada, mas estaremos consumindo um web service da forma tradicional. Na prática, estaremos utilizando a página de consulta de CEP do site dos correios. Enviaremos os dados da consulta através de uma requisição POST (passando parâmetro na URL) e obteremos como resultado o código da página de resultados. A partir dela, buscaremos apenas os elementos na estrutura HTML que apresentam o resultado em si.

Figura 1: Página dos Correios com resultado de pesquisa por CEP

Como vemos na Figura 1 o resultado da consulta por CEP é apresentado em uma tabela HTML com cinco colunas. Ao receber a resposta da requisição, localizaremos essa tabela na estrutura da página e extrairemos apenas os valores das colunas.

Neste artigo será utilizado um projeto do tipo ASP.NET Web Forms, mas o mesmo código poderia ser usado para Windows Forms, por exemplo, bastando adaptar a interface.

Então comecemos criando um web site ASP.NET a partir do menu

A versão 3 das CSS (Cascade Style Sheets ou Folhas de Estilo em Cascata) já estão “no ar” há algum tempo, mas por muitos ainda é tratada como novidade. Isso, em parte, se deve à heterogeneidade da adição de suporte pelos browsers a esta versão.

Infelizmente os profissionais do desenvolvimento web, sejam designers ou programadores bak-end ainda esbarram nessa questão histórica de não poder utilizar o mesmo código HTML/CSS para obter o mesmo resultado em todos os browsers.

E por não poder usar sempre, muita gente acaba esquecendo algumas propriedades das CSS3, os valores possíveis, como usar, etc. É muito comum a necessidade de recorrer à ferramentas de pesquisa para “refrescar a memória” sobre como utilizar o @font-face, border-radius e outros tantos recursos novos dessa versão.

Sendo assim, às vezes alguns preferem procurar ferramentas que já auxiliem de forma mais direta, gerando um código completo para um determinado objetivo, como criar um elemento com bordas arredondadas ou definir um plano de fundo dégradé.

Existem várias ferramentas desse tipo hoje disponíveis na web de forma inteiramente gratuita. Neste artigo serão apresentadas cinco delas, mas que resolvem a maioria das situações do nosso dia-a-dia.

CSS3 Generator

Figura 1: Interface principal do CSS3 Generator

A ferramenta CSS3 Generator pode ser considerada uma das mais completas disponíveis na web. Com uma interface extremamente amigável e intuitiva, permite selecionar um dos recursos das CSS3, configurar de acordo com a necessidade e gerar o código CSS.

Quando todos os campos necessários são preenchidos, o resultado é automaticamente apresentado em uma área reservada do lado direito. Logo abaixo dos campos para preencher, pode-se conferir quais browsers suportam o código gerado e a partir de quais versões.

Ao clicar em um dos campos para preencher, é exibido um pequeno hint (mensagem flutuante) indicando que tipos e faixas de valores devem ser inseridos alí.

Essa poderosa ferramenta pode ser encontrada no endereço http://www.css3generator.com, que provavelmente vai fazer parte da sua barra de favoritos a partir de agora.

CSS3 Please

Figura 2: Ferramenta CSS3 Please

A CSS3 Please é uma página contendo códigos CSS cujos valores podem ser alterados e o resultado visto automaticamente em um elemento flutuante no lado direito, como se vê na figura acima.

Esta ferramenta já contempla os prefixos utilizados por alguns navegadores, como o webkit e atribui valores para várias propriedades CSS3. Também é possível desativar um conjunto de propriedades para ver como o elemento fica sem ter algumas propriedades definidas, basta clicar na opção “toogle rule off/on” sobre cada bloco de

No cenário atual, onde se observa uma tendência cada vez maior de desenvolvimento de aplicações web, é fundamental que o profissional de desenvolvimento se mantenha sempre atualizado, buscando conhecer as tecnologias mais utilizadas, as mais atuais, suas variações, etc.

No lado do servidor (back-end ou server-side), essa atualização refere-se ao uso de padrões de projeto, metodologias de desenvolvimento, computação na nuvem, gerenciamento de grandes volumes de dados (Big Data, noSQL, Data Warehouse, etc), otimização de desempenho e segurança, entre outros fatores que se mostram a cada dia mais importantes, não somente no desenvolvimento web.

Já no lado cliente (front-end ou cliente-side), é importante que o desenvolvedor esteja a par das mais recentes técnicas de design, organização de layout, desenvolvimento cross-browser, acessibilidade, etc. E se tratando desses fatores, algo que tem se mostrado bastante útil e já importante, é o conhecimento de frameworks HTML/CSS/JavaScript.

Atualmente são vários os frameworks disponíveis gratuitamente na web e largamente utilizados, tanto por profissionais autônomos, quanto por grandes empresas. Alguns desses frameworks/bibliotecas funcionam no auxílio à manipulação do DOM, chamadas Ajax, validações, enfim, a parte lógica. Outros se destinam a oferecer layouts mais elegantes de forma mais simples, sem que o desenvolvedor precise escrever muito código CSS para formatar sua página, inclusive implementando layout responsivo e cross-browser. Há, ainda, aqueles frameworks que unem os dois lados, o lógico e o visual, oferecendo diversas funcionalidades que poupam bastante tempo e ajudam a garantir um resultado final mais seguro e visualmente mais agradável.

Neste artigo, teremos um overview do framework YUI, um dos mais completos da atualidade, desenvolvido pela Yahoo!.

Apresentando o YUI

O YUI é um framework CSS/JavaScript desenvolvidos pelos desenvolvedores front-end da Yahoo!, uma das grandes empresas da web. De distribuição gratuita e código aberto, o projeto está disponível no GitHub (plataforma de compartilhamento de código e controle de versões) para obtenção e contribuição.

Como todo bom framework front-end, o YUI é bastante leve e desenvolvido para ser compatível com os diversos dispositivos nos quais se pode acessar páginas web, sejam desktop ou mobile.

O YUI oferece funcionalidades para diversas situações, desde a manipulação do DOM, com associação de event handlers, até a construção de poderosos layouts com sistema de grid, animações, widgets, skins, entre outros diversos recursos.

Suporte pelos browsers

No site oficial do projeto, está disponível uma tabela onde se pode ver quais browsers oferecem suporte ao YUI. Essa tabela é sempre atualizada, apresentando sempre a realidade atual.

Figura 1: Tabela de suporte dos browsers ao YUI

Vale destacar que, na última linha dessa tabela, vemos que o YUI é adequado para uso nas aplicações para Windows 8, as chamadas Windows Store Apps, desenvolvidas com HTML, CSS e JavaScript, o que indica que o projeto é atualizado frequentemente, se adaptando sempre às novidades.

Contribuindo com o projeto

Como já foi dito, o YUI é free e de código aberto, então qualquer um pode contribuir para o avanço do projeto, com a correção de bugs e adição de funcionalidades. Na página oficial existe um tutorial com as orientações necessárias para colaboração, que é feita através do GitHub.

Figura 2: Tutorial sobre como colaborar com o projeto

Comunidade e documentação

Uma das partes mais importantes de qualquer ferramenta é, sem dúvida, sua docu

Introdução

Uma das tarefas mais realizadas a partir de smartphones é o envio de mensagens de texto (SMS). Muitos preferem enviar um SMS a ligar diretamente para o destinatário, pois com o texto consegue passar toda informação de uma única vez, dispensando cumprimentos e despedidas desnecessários.

Atualmente, muitas empresas também aderiram a este método para passar informações para seus clientes de forma mais prática. Um exemplo disso é observado em algumas operadoras de cartão de crédito, que notificam o usuário quando uma compra é efetuada com seu cartão.Então, sabendo dessa realidade e da importância que possuem as mensagens de texto, nada melhor que integrá-las às nossas aplicações, permitindo ao usuário enviar SMS para um determinado número sem precisar sair da aplicação (ou “minimizá-la”) e acessar o aplicativo de mensagens.

No Windows Phone, essa é uma tarefa consideravelmente simples e pode ser realizada com o auxílio da classe SmsComposeTask, contida no namespace Microsoft.Phone.Tasks.

Essa classe possui basicamente duas propriedades e um método que são relevantes para nós neste momento:

• Body (string): como o nome sugere, esta propriedade representa o corpo da mensagem. Podemos, por exemplo, solicitar que o usuário digite ou definir um texto fixo via código.
• To (string): esta propriedade representa o número ou nome para o qual o SMS será enviado. É importante que aqui seja informado um número válido ou o nome de um contato, exatamente como ele aparece na agenda. Podem ser informados vários destinatários, separados por ponto e vírgula, assim como ocorre no aplicativo de mensagens (que será aberto, no fim das contas).
• Show(): o único método que nos interessa aqui, responsável por abrir o aplicativo de mensagens com os destinatários e o corpo da mensagem já definidos. O usuário precisa somente tocar no botão Enviar.

Mãos à obra

Já conhecemos a classe que iremos utilizar, então já podemos criar uma nova aplicação para Windows Phone no Visual Studio, utilizando o template Windows Phone App.

Na página principal (MainPage.xaml), vamos inserir um botão no grid principal, para enviar o SMS. O conteúdo dessa página deve ficar como mostrado na Listagem 1.

Listagem 1: Conteúdo da página MainPage.xaml

<phone:PhoneApplicationPage 
    x:Class="PhoneApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Igno

Introdução

A linguagem JavaScript é uma das bases do desenvolvimento web e, juntamente com a HTML e as CSS, dão vida a boa parte dos sites da internet. Apenas essas linguagens juntas já nos permitem desenvolver páginas completas, com layouts elegantes e conteúdo dinâmico. Portanto, pode-se dizer que conhecê-las é obrigação de todo profissional que pretende trabalhar com desenvolvimento web.

Enquanto HTML é responsável pelo conteúdo e as CSS pela formatação visual, podemos dizer que JavaScript é a responsável por tornar esse conteúdo formatado mais dinâmico, aprimorando a interação com o usuário, criando animações mais complexas (das quais apenas as CSS não dão conta), validando formulários, entre outras várias funções que essa linguagem pode desempenhar.

Assim como outras linguagens, ao longo dos anos a JavaScript foi sendo aperfeiçoada e ganhando cada vez mais importância no meio web. Atualmente, é uma linguagem que tem ganhado mais adeptos, uma vez que observamos uma tendência das aplicações de serem transferidas para a web. Então, como era de se esperar, foram sendo criados vários plug-ins/frameworks/bibliotecas para se trabalhar com JavaScript, visando facilitar o uso dessa linguagem em tarefas comuns do dia a dia do desenvolvedor web.

A maior parte desses frameworks são compartilhados de forma gratuita na web, inclusive como open source. Alguns deles, devido ao poder que possuem, se destacaram e se tornaram parte fundamental de vários projetos, sendo integrados a grandes ferramentas. Já é comum também entre as empresas tratarem o conhecimento de certos frameworks como requisito para o preenchimento de vagas no quadro de funcionários. Assim, é fácil perceber o quão importante é conhecer essas bibliotecas, tanto para a adequação ao mercado, quanto para garantir ganho de produtividade em projetos próprios.

Neste artigo, serão apresentados alguns dos mais relevantes frameworks/bibliotecas JavaScript atualmente utilizados, citando suas principais características e indicando onde o leitor pode encontrar maiores informações sobre cada um.

1 – jQuery

Figura 1: jQuery – Write less, do more

Página oficial: http://jquery.com/.

A jQuery está entre as mais utilizadas (se não a mais utilizada) bibliotecas JavaScript. Atualmente, quando se requisita que um profissional conheça/domine JavaScript, geralmente a jQuery está incluída.

Sob o lema “escreva menos, faça mais” (write less, do more), o forte dessa biblioteca está na simplificação de códigos nativos da linguagem que geralmente são mais extensos. Na Listagem 1 temos um exemplo bastante básico de uso da jQuery, onde comparamos duas expressões equivalentes, uma em código nativo JavaScript e outra utilizando jQuery.

Listagem 1: Exemplo de uso da jQuery

//Sem jQuery
var campo = document.getElementById(“meuCampo”);
//Com jQuery
var campo = $(“meuCampo”);

Esse é apenas um exemplo, dos mais simples possíveis, a jQuery vai muito além, permitindo criar animações, adicionar event handlers e efetuar chamadas Ajax com facilidade.

A jQuery é a biblioteca sobre a qual foi desenvolvida a maior quantidade de plug-ins e outras biblioteca, incluindo a jQuery Mobile e a jQueru UI, da mesma empresa responsável pela

Introdução

Uma das estruturas de dados mais comumente utilizadas no desenvolvimento de software é o vetor, ou array. Essa estrutura consiste em uma coleção de elementos de um determinado tipo, definido no momento da sua declaração.

Uma vez instanciado e preenchido, os elementos do vetor podem ser acessados a partir de um índice, que indica sua posição na lista, geralmente começando a contar a partir do zero (zero-based).

Para acessar esses elementos, não só em C# como em outras linguagens, utiliza-se o nome do vetor, seguido de colchetes ([ e ]), dentro dos quais se insere o índice desejado, como no exemplo abaixo.

Listagem 1: Exemplo de acesso aos elementos de um vetor em C#

string[] nomes = new string[3];
            
nomes[0] = "João";
nomes[1] = "Maria";
nomes[2] = "José";

string nomeSelecionado = nomes[2];

Como vemos, tanto para definir quanto para obter um elemento, utilizamos a mesma sintaxe: nomes[índice]. É dessa forma que funcionam os indexadores, facilitando o acesso aos elementos da lista através do uso desse formato (colchetes com o índice).

Comportamento semelhante é observado em classes de coleção como List e Hashtable. Esta última, por exemplo, representa uma lista de objetos, onde cada elemento possui uma chave que o identifica e um valor.

Para acessar os elementos da coleção, também se utiliza um indexador. Porém, nesse caso, o indexador não recebe exatamente o índice (posição) do elemento que se deseja acessar, mas recebe a chave deste. A compreensão fica mais fácil com um exemplo, apresentado na listagem 2.

Listagem 2: Indexador na classe Hashtable

Hashtable clientes = new Hashtable();

clientes.Add("001", "João");
clientes.Add("002", "Maria");
clientes.Add("003", "José");

var clienteSelecionado = clientes["001"];

Novamente aparecem os colchetes, dentro dos quais informamos a chave do elemento que queremos acessar. Com isso percebemos que os indexadores nos permitem acessar elementos membros de uma coleção a partir de uma determinada característica única, como um índice ou uma chave.

Diante dessa facilidade, nos perguntamos: é possível criar indexadores nas minhas próprias classes? Conhecendo o poder do .NET Framework e da linguagem C#, a resposta não poderia ser outra: SIM. Podemos criar indexadores e essa é uma tarefa consideravelmente simples, como veremos a seguir.

A sintaxe para definição de um indexador é a seguinte:

Listagem 3: Sintaxe de criação de indexadores

Tipo_Retorno this[Tipo_Indice índice]
{
get{};
set{};
}

Tipo_Retorno é o tipo do objeto que será acessado pelo indexador, geralmente o mesmo tipo de elemento contido em uma lista.

Tipo_Indice é o tipo de dado do índice a ser utilizado. No caso da Hashtable, por exemplo, esse tipo é object, pois é o tipo das chaves dos elementos da lista.

Vejamos um exemplo prático de uso de indexadores para ajudar a fixar essa sintaxe.

Criando indexadores em classes próprias

Tomemos então, como situação problema para exemplificar o uso de indexadores, uma aplicação de vendas onde temos uma classe Pedido na qual inserimos itens, podendo acessá-los posteriormente.

Um dos requisitos para a construção dessa classe é que ela deve conter uma lista interna de itens, mas essa lista não deve poder ser acessada diretamente por classes externas. Deve-se poder inserir e acessar os valores, mas não alterar a lista diretamente. Para atender a essa regra, vamos criar um método para adicionar itens e um indexador para acessá-los a partir do índice na lista.

Então,

Introdução

Hoje já é de conhecimento de boa parte dos programadores, web designers e profissionais da web em geral, que a HTML5 trouxe vários novos recursos que facilitam (e muito) a implementação de certas funcionalidades que antes requisitavam muito trabalho.

Dentre os vários novos elementos que foram inseridos nessa versão da linguagem base dos web sites, um que rapidamente ganhou grande importância e destaque foi o canvas. Essa tag cria um “quadro” no qual se pode desenhar várias formas geométricas, linhas, figuras, etc.

Tomando como base essa nova tag, já existem várias engines para jogos e jogos prontos completamente desenvolvidos em HTML5 e JavaScript, entre outras implementações que foram desenvolvidas e vem sendo aperfeiçoadas a cada dia.

Buscando explorar um pouco as capacidades desse novo elemento, este artigo apresentará uma forma simples de se implementar, com JavaScript, a funcionalidade de desenhar com o mouse sobre esse quadro (canvas). O código desenvolvido será bastante simples, buscando facilitar a compreensão, e permitirá apenas “riscar” com o cursor do mouse.

Ao fim deste artigo e com algum conhecimento das linguagens utilizadas, o leitor poderá aperfeiçoar o exemplo e adicionar novas funcionalidades.

O código HTML

Criaremos uma página HTML com estrutura bastante simples, que contará apenas com uma tag <canvas> dentro do body. O código da listagem 1 pode ser copiado e salvo como um arquivo de extensão .html.

Listagem 1: Código HTML da página

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Desenhando na canvas</title>
</head>
<body>
    <canvas id="quadro" style="background:beige"></canvas>
</body>
</html>

Definimos o nome do elemento canvas como quadro e definimos uma cor para o plano de fundo, apenas para diferenciar do plano de fundo da página.

O código JavaScript

Quem de fato dará vida ao nosso quadro de desenhos será a linguagem JavaScript (como era de se esperar).

Como inserir esse código na página, ficará a critério do leitor, mas nesse exemplo manteremos todo JavaScript interno ao HTML. Sendo assim, a listagem 2 apresenta a estrutura básica desse código. Dentro das tags script trataremos o evento onload do objeto window. Isso é necessário para que tenhamos certeza que todo conteúdo já terá sido renderizado quando tentarmos acessar o elemento canvas.

Listagem 2: Estrutura geral do código JavaScript

<script>
    window.onload = function () {
        //todo conteúdo ficará aqui
    }
</script>

Como vemos na indicação da linha 3, todo código que será apresentado a seguir deverá ser inserido dentro da função que trata o e

Introdução

Um dos principais fatores a serem observados e considerados, no desenvolvimento de aplicações para dispositivos móveis, é a facilidade de acesso aos menus e elementos da tela. Como o usuário geralmente utiliza o(s) dedo(s) (ou canetas, em alguns casos) para manipular a interface, é fundamental que ele possa realizar certas ações com facilidade, com o menor número de toques possível.

Porém, é importante lembrar que as dimensões da tela são geralmente bem resumidas, quando comparadas a monitores desktop. Então, deve-se projetar a interface para oferecer uma experiência agradável ao usuário, de forma que utilizar sua aplicação seja algo simples e prático, características das aplicações mobile.

Se observarmos um dos gerenciadores de e-mail do Windows Phone, veremos que quando marcamos uma mensagem, tocando no canto esquerdo da tela, algumas opções são oferecidas abaixo, tais como excluir, mover, marcar como lida, etc. Nesse caso, são várias opções disponíveis para aquele item selecionado, por isso é interessante utilizar a barra de botões e menus na parte inferior da tela.

Por outro lado, se acessarmos a aplicação de chamadas telefônicas, veremos todas as chamadas recentes listadas e, ao lado de cada uma delas, um pequeno botão com o símbolo de um telefone. Ao tocar nesse botão, é iniciada uma chamada para o número, sem que fosse preciso selecionar o item e depois utilizar uma barra te ícones ou menu suspenso, por exemplo. Nesse caso, temos apenas uma opção para cada item, que é efetuar uma ligação. Esse modelo é utilizado para agilizar uma ação muito comum, que é a de ligar para números recentes. Sem esse botão, seria necessário selecionar o item e acessar a opção “ligar para” em outra tela ou em outro menu, o que faria com que o usuário precisasse tocar mais vezes na tela para executar uma ação simples e corriqueira.

Então, com base no que foi dito e buscando seguir o mesmo raciocínio em nossas aplicações, veremos neste artigo como inserir um botão de ação nos itens de uma ListBox.

Tomaremos como situação problema uma aplicação de vendas, da qual trataremos a tela de itens do pedido. Nessa tela, os itens serão listados e em uma ListBox e nosso objetivo é inserir um botão em cada item para removê-lo da lista.

Mãos à obra! Chega de teoria, vamos à parte prática.

Criando o projeto

No Visual Studio (2012, neste caso), crie um novo projeto a partir do menu FILE > New > Project... e na categoria Windows Phone, selecione o template Windows Phone App. Dê um nome à aplicação, que neste exemplo foi denominada BotoesAcaoListBox. Em seguida, na caixa de diálogo que é apresentada, selecione a plataforma Windows Phone OS 7.1, dessa forma a aplicação poderá ser executada tanto na versão 7.x do Windows Phone, quanto na versão 8.

Na página principal, dentro do grid ContentPanel, vamos inserir a ListBox com a formatação dos itens já definida, de forma a exibir a descrição, a quantidade e o subtotal, tudo isso após um botão que será usado para excluir o item.

O código XAML da MainPage deve ficar semelhante ao código apresentado na listagem 1.

Listagem 1: Código XAML da MainPage

<phone:PhoneApplicationPage 
    x:Class="BotoesAcaoListBox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded_1">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.Row

Introdução

Quando desenvolvermos aplicações para dispositivos móveis, sejam para Android, iOS, Windows Phone, BlackBerry ou qualquer outra plataforma, é comum (e natural) querer (e precisar) utilizar os recursos do aparelho, tais como câmera, acelerômetro, entre outros.

Por mais que não se implemente tais funcionalidades inicialmente, não demora muito até o cliente solicitar alguma alteração nesse sentido. E por se tratar de um smartphone (no fundo, um celular), não é de se estranhar se nos for solicitado que o usuário possa efetuar ligações a partir da aplicação, sem precisar minimiza-la e acessar a lista de contatos ou a menu de chamadas telefônicas.

Com base nisso, este artigo explicará como realizar ligações a partir de aplicações próprias para Windows Phone. Aqui será utilizada a linguagem C# e a versão escolhida será a 7.x, de forma que o a aplicação aqui desenvolvida possa ser executada tanto no Windows Phone 7, quanto no 8.

Leia também: Rumo ao Desenvolvimento Mobile - Iniciação com Windows Phone

Iniciando a aplicação

Inicialmente devemos acessar o menu FILE > New > Project... no Visual Studio (nesse caso, o 2012 com o SDK para Windows Phone devidamente instalado). Na categoria Windows Phone, selecionamos o template Windows Phone App e na caixa de diálogo que será exibida, devemos selecionar a opção Windows Phone OS 7.1, conforme explicado anteriormente.

Na página inicial, MainPage.xaml, vamos inserir alguns controles que darão forma à nossa aplicação. O Grid de nome ContentPanel deve ficar como o código constante na listagem 1, que insere um ListBox e um Button que serão utilizados posteriormente.

Listagem 1: Código XAML inserido na página principal

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel>
        <ListBox x:Name="lbxClientes">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Path=Nome}" FontSize="30"/>
                        <TextBlock Text="{Binding Path=Telefone}" FontSize="20"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button x:Name="btnLigar" Content="Ligar"/>
    </StackPanel>
</Grid>

Essa ListBox será utilizada para listar alguns objetos que criaremos a seguir, simulando uma lista de clientes de uma aplicação comercial qualquer. Clicando no botão Ligar, o usuário poderá efetuar uma chamada para o telefone do cliente selecionado na lista.

Criemos então uma nova classe chamada Cliente, clicando com a direita no projeto, no Solution Explorer, e em Add > C

Introdução

Durante o desenvolvimento de sistemas, sejam eles desktop, web ou mobile, independente de plataforma ou linguagem, é comum surgir a necessidade de utilizar bibliotecas de terceiros para executar certas funções.

Uma das formas mais utilizadas para realizar a distribuição de tais bibliotecas é através de DLLs (Dynamic Link Libraries, ou Bibliotecas de Vínculo Dinâmico), que dependendo da forma como sejam desenvolvidas, podem também funcionar em várias plataformas, podendo serem importadas por várias linguagens e ferramentas de programação.

Porém, pode haver situações em que se torna necessário compartilhar funções, classes e outros elementos, desenvolvidos por nós, entre nossas próprias aplicações. Nesse caso, o que fazer?

Uma alternativa, que talvez seja a primeira que nos vem à mente é óbvia: copiar o código fonte e colar nos vários projetos onde precisemos de tais funcionalidades. Porém, dependendo da quantidade de código que desejemos compartilhar e da quantidade de locais onde desejamos fazê-lo, fica claro que esta se torna uma tarefa repetitiva e nem um pouco prática.

Para suprir essas necessidades, é possível desenvolver nossas próprias bibliotecas e compartilhá-las posteriormente entre várias aplicações. Essas bibliotecas são chamadas de Class Libraries (Bibliotecas de Classes) e quando compiladas, geram uma DLL que pode ser facilmente importada por diversos tipos de aplicação.

Neste artigo, veremos como criar tais bibliotecas no Visual Studio e como importa-las em diferentes tipos de aplicação. Como exemplo, tomaremos uma situação hipotética onde se tem algumas classes que precisam ser compartilhadas por aplicações web, desktop e mobile, todas na plataforma .NET.

Criando a biblioteca de classes

No Visual Studio, devemos proceder da mesma forma como é feito para se criar outros tipos de projeto, acessando o menu FILE > New > Project.... Em seguida, selecionamos a linguagem (C#, neste caso) e o template Class Library, conforme ilustra a figura 1.

Figura 1: Criação do projeto da biblioteca

Quando criado, o projeto contém apenas uma classe inicial vazia, chamada Class1. Podemos excluir essa classe do nosso projeto e criar as nossas próprias. Para isso, após remover a Class1, cliquemos com a direita sobre o projeto (nesse caso foi nomeado como ClassesAplicacao) e em Add > Class.

Na janela que se abre, vemos que é possível inserir outros tipos de itens, porém, dependendo da forma como desejemos compartilhar essa biblioteca entre as aplicações, esses itens devem ser escolhidos com cautela. Por exemplo, não faz muito sentido inserir um Windows Form em uma biblioteca que será utilizada em uma aplicação Asp.net Web Forms. Neste artigo utilizaremos apenas classes, que são elementos comuns à maioria dos tipos de projeto disponíveis.

Então devemos dar um nome à classe que estamos inserindo, que neste artigo foi chamada de Cliente. Em seguida, basta pressionar o botão Add, como de costume.

Ao abrir o editor, vamos alterar o código da classe Cliente, deixando-o de acordo com a listagem 1.

Listagem 1: Código da classe cliente

Introdução

Como já deve ser de conhecimento do leitor, é possível desenvolver aplicações para Windows 8 utilizando HTML, CSS e JavaScript, da mesma forma como também se pode fazer com C# e XAML. Caso o leitor ainda não soubesse disso, esteja ciente que esta é uma das maiores novidades apresentadas juntas com o mais recente sistema operacional da Microsoft e seu IDE de desenvolvimento, o Visual Studio 2012.

Assim como em uma aplicação web, pode-se utilizar HTML e CSS para montar o layout da aplicação, que é baseada em páginas, e usar JavaScript para acrescentar funcionalidades. Nessa caso, a JavaScript assume o papel que até então era das linguagens C#, Visual Basic e C++.

A possibilidade de desenvolver WinRT Apps, como são chamadas as aplicações para Windows 8 (diferentes das aplicações desktop convencionais), atraiu profissionais do desenvolvimento web, que já estavam acostumados com essa essas linguagens.

De fato as WinRT apps funcionam como aplicações web sendo executadas em um browser, que nesse caso é App Container. Esse App Container pode ser considerado, a grosso modo como um Internet Explorer sem bordas, barras de ferramentas ou menus e que serve unicamente para executar as WinRT apps.

Assim, como é de se esperar, é possível utilizar bibliotecas como jQuery e Modernizr nas aplicações, bem como importar folhas de estilos e plugins de terceiros.

As funcionalidades nativas, porém, encontram-se em uma biblioteca JavaScript chamada WinJS, apoiadas por algumas formatações visuais fornecidas pela Microsoft para estruturação do layout, segundo padrões que visam otimizar a interface para dispositivos sensíveis ao toque (caso do Surface, por exemplo, tablet oficial da Microsoft com Windows 8).

Neste artigo será demonstrado o processo de desenvolvimento de uma aplicação básica utilizando HTML, CSS e JavaScript, buscando explorar um pouco de cada uma dessas tecnologias, aplicadas em um projeto WinRT.

Criando a aplicação

O processo de criação da aplicação não difere dos demais tipos de projetos já existentes no Visual Studio. Basta acessar o menu FILE > New > Project... e selecionar a categoria JavaScript > Windows Store. Existem, por padrão, 5 templates para criar a aplicação, que diferem entre si basicamente pelo layout que é criado automaticamente, facilitando parte do trabalho de desenvolvimento:

• Blank App;
• Grid App;
• Split app;
• Fixed Layout App;
• Navigation App;

Para este artigo, utilizaremos o template Blank App, para que possamos inserir alguns controles visuais livremente na página principal, sem que nenhum elemento seja adicionado por padrão.

Figura 1: Criando a aplicação

Estrutura do projeto

Ao criar o projeto, assim como na maioria dos templates, são criadas algumas pastas e arquivos iniciais, como se pode ver na Solution Explorer, exibida na figura 2.

Figura 2: Estrutura do projeto

As pastas e arquivos são os seguintes:

• References: referências do projeto à bibliotecas externas, contidas em arquivos de extensão winmd. Por p ...

Figura 1: Windows Store Apps - Aplicações metro para Windows 8

Introdução

Uma das grandes novidades que o Windows 8 trouxe com seu lançamento foi a possibilidade de se desenvolver aplicações utilizando HTML, CSS e JavaScript. Acompanhando a tendência de evolução das tecnologias web e desenvolvimento de aplicações multi device (que possam ser executadas em vários dispositivos), as chamadas Windows Store Apps (devido a serem publicadas na Windows Store) ou Metro Style Apps (metro é o nome do novo estilo de interface utilizado pela Microsoft em seus aplicativos), permitem que desenvolvedores web se adaptem facilmente ao desenvolvimento de aplicações para Windows.

Essa foi, sem dúvida, uma das maiores “jogadas” dessa gigante dos softwares para atrair profissionais do desenvolvimento para sua plataforma (vale lembrar que o Windows é o sistema operacional mais utilizado no mundo). E isso de fato deu certo, pois nas palestras de lançamento das novas tecnologias de 2012 (Windows 8, Windows Phone 8, Visual Studio 2012, .NET 4.5, etc.), eram vários os profissionais que testemunhavam a favor dessa novidade.

Até então, quem desejava desenvolver aplicações sobre o .NET Framework precisava aprender uma das linguagens utilizadas (C#, VB.NET, C++, etc.) e para o design, quando as aplicações Windows Forms tradicionais não atendiam adequadamente às necessidades, era preciso se adaptar à XAML, linguagem de marcação utilizada para estruturar o layout em aplicações WPF (Windows Presentation Foundation) e Windows Phone (Silverlight). Com a possibilidade de utilizar HTML, CSS e JavaScript, muitos programadores que já estavam acostumados a desenvolver aplicações web, sentiram-se à vontade para “se arriscar” nas apps para Windows 8.

Porém, aqueles que já estavam acostumados com XAML e C# não precisaram, obviamente, aprender HTML, CSS e JavaScript. As Windows Store Apps podem ser desenvolvidas também utilizando XAML (para o layout) e C# (para a parte da programação em si). Ou seja, XAML faz o papel da HTML e das CSS na estruturação do design, enquanto C# funciona como a JavaScript, dando “vida” à aplicação.

Certificações para desenvolvedores de Windows Store Apps

Como era de se esperar, juntamente com esse novo tipo de aplicação (Window Store Apps) foram criadas as novas certificações profissionais MCSD (Microsoft Certified Solutions Developer). São duas novas certificações equivalentes entre si, diferindo apenas nas tecnologias utilizadas. Cada certificação requer a aprovação em três exames, listados abaixo.

MCSD Windows Store Apps using HTML5

• 70-480: Programing in HTML5 with JavaScript a ...

Introdução

Antes mesmo de ser lançada a versão final da mais recente versão do Windows, a Microsoft já havia disponibilizado uma versão do Visual Studio 2012 com a versão Developer Preview do seu novo sistema operacional.

Com o lançamento do Windows 8, a Microsoft está assumindo uma postura bem mais “agressiva” no que diz respeito a convidar os profissionais para desenvolverem aplicações para a Windows Store. São novas ferramentas, cursos gratuitos, descontos para certificações, vídeos de divulgação frequentemente lançados, palestras ao redor do mundo, entre outras estratégias que visam facilitar o desenvolvimento e atrair os programadores.

O desenvolvimento para Windows 8 trouxe muitas novidades, dentre elas a possibilidade de executar a aplicação, a partir do Visual Studio, em uma máquina remota ou no emulador do tablete, além da máquina local.

Como o Windows 8 também pode ser executado em tablets, sendo o Surface o principal produto da Microsoft nesse eixo, e como nesse tipo de ambiente as configurações são um pouco diferentes de um PC, junto com o Visual Studio 2012 vem o emulador de tablete com Windows 8. A possibilidade de testar as apps em um emulador de tablete é fundamental para os desenvolvedores, que podem projetar sua interface para os diversos tipos de configuração de tela que podem ocorrer quando a aplicação é executada em um dispositivo touch screen.

No tradicional botão Run/Start do Visual Studio, agora é possível selecionar o ambiente no qual a app será executada (para aplicações sob o template Windows Store), conforme se vê na figura 1.

Figura 1: Seleção do ambiente de execução da app

O emulador

Quando o emulador é executado, ele cria uma cópia do ambiente principal da máquina, ou seja, copia a área de trabalho do Windows, de forma que o usuário possa acessar seus dados como se estivesse trabalhando na máquina local.

O emulador em funcionamento pode ser visto na figura 2.

Figura 2: Emulador em funcionamento

No lado direito existe uma barra com algumas opções para manipular o emulador. Seguindo a ordem de cima para baixo, essas opções são:

• Minimize: minimiza a janela do emulador, mantendo-a na barra de tarefas do Windows, a partir de onde pode ser novamente aberta com apenas um clique.
• Always on top: faz com que a janela do emulador permaneça fixa na tela, sobrepondo-se às demais aplicações. Quando essa opção é selecionada, sempre que outra aplicação for acessada, esta permanecerá por trás do emulador.
• Mouse mode ...

Introdução

O desenvolvimento de jogos é uma área que vem crescendo a cada ano e ganhando cada vez mais destaque. A cada dia surgem novas engines, novos métodos, gráficos e recursos que possibilitam a criação de games que rapidamente ganham o mundo.

Com o avanço da web também veio a tendência do surgimento de jogos de browser, cada vez mais leves e dinâmicos. A chegada da HTML5 e do elemento canvas permitiu ainda o surgimento de jogos feitos inteiramente em JavaScript, o que os torna leves e independentes de plataforma, fator que tem ganhado cada dia mais importância.

O desenvolvimento de um jogo completo requer bastante análise, escrita do roteiro, criação dos gráficos, entre outros procedimentos fundamentais e relativamente complexos. Porém, para demonstrar um pouco do que pode ser feito com JavaScript, manipulando o elemento canvas, este artigo apresentará o código necessário para criar um menu simples, desenhando-o dinamicamente na tela do browser, sem usar divs, listas, ou qualquer outro elemento HTML.

Como este artigo está organizado

O código será apresentado em partes, para facilitar o entendimento de cada funcionalidade utilizada e procedimento realizado. Inicialmente será apresentada a estrutura básica do arquivo HTML. Em seguida, os códigos das listagens subsequentes podem ser copiados, na ordem em que aparecem, para o local indicado na listagem 1. Assim teremos um desenvolvimento incremental, entendendo cada parte individualmente e analisando sua participação no resultado final.

O código HTML

O seguinte código pode ser salvo como um arquivo de extensão HTML, mas inicialmente não será possível observar nenhum resultado gráfico, pois isso será feito posteriormente usando JavaScript.

Listagem 1: Código HTML da página

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Menu com canvas e JS</title>

    <style>
        body
        {
            margin:0;
            overflow:hidden;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(function () {
		//o restante do código ficará aqui
        });
    </script>
</head>
<body>
    <canvas id="canvasMenu"></canvas>
</body>
</html>

A estrutura é bastante simples, composta basicamente pelo elemento canvas no corpo do documento. Inicialmente aplicamos algumas configurações via CSS para remover as margens e as barras de rolagem da página, pois assim poderemos aproveitar uma maior área para desenhar o menu.

Em seguida foi feita referência à biblioteca jQuery, pois ela será usada para controlar o evento ready do documento, dentro do qual escreveremos todo o código para montagem do menu, conforme a indicação da linha 18.

O código JavaScript

Agora começaremos a inserir o código JavaScript. Vale ressaltar que serão apresentadas várias listagens, cujo conteúdo deve ser adicionado ao local indicado na linha 18 da listagem 1, na ordem em que aparecem.

Listagem 2: Definições iniciais

var largura;
var altura;
var larguraMenu = 400;
var alturaMenu = 300;

var canvas = document.getElementById("canvasMenu");
var ctx = canvas.getContext("2d");

Na listagem 2 declaramos algumas variáveis que serão utilizadas em todo o código e em seguida obtemos uma referência ao elemento canvas, usando o método getElementById(). Esse método poderia ser substituído pelo seletor $ da jQuery, mas aqui buscaremos trabalhar ao máximo com JavaScript “pura”. O objeto ctx armazena a referência ao contexto 2d da canvas, área onde serão feitos os desenhos, mais adiante.

Listagem 3: Função atualizarPlanoDeFundo

function atualizarPlanoDeFundo() {
    largura = window.innerWidth;
    altura = window.innerHeight;
    canvas.setAttribute("wid

Introdução

Apresentar dados de forma clara e objetiva é um requisito importante para a maior parte das aplicações, que recorrem a vários recursos para oferecer ao usuário as informações de maneira que possam ser facilmente compreendidas e aproveitadas.

E algumas situações é possível recorrer a relatórios para apresentar os dados em forma de tabela, por exemplo, com somatórios e agrupamentos. Em outros momentos, porém, é mais interessante exibir tais informações em forma de gráfico, facilitando a leitura e avaliação dos dados.

Os gráficos sem configuram como uma das melhores opções para exibição de dados para o usuário, ilustrando graficamente dados geralmente numéricos. São diversos os tipos de dados utilizados, como barra, linha, pizza, setor, etc. Cada um mais adequado a uma determinada situação. Porém, todos esses modelos servem geralmente para apresentar dados “instantâneos”, ou seja, representam um conjunto de informações obtidas de uma fonte em um determinado momento. Por exemplo, um gráfico de vendas apresentará os dados de um período, como um mês ou um dia, sendo necessário solicitar ao sistema um novo gráfico sempre que se deseja obter informações mais atualizadas.

Porém, existem situações em que é necessário haver um gráfico dinâmico, cujas informações s ao atualizadas constantemente, de forma que se possa acompanhar a evolução dos valores avaliados. Um exemplo disso é encontrado no Gerenciador de Tarefas do Windows, onde informações sobre consumo de CPU e memória são exibidos dinamicamente na aba Desempenho, em um gráfico de linhas, como visto na figura 1.

Figura 1: Dados dinâmicos no Gerenciador de Tarefas do Windows

Nesse tipo de gráfico as informações são atualizadas constantemente, em intervalos de tempo definidos, como 1 segundo, por exemplo.

Seguindo essa lógica, este artigo apresenta uma forma simples de implementar um gráfico desse tipo em JavaScript, utilizando o objeto canvas da HTML5. Aqui os dados serão gerados aleatoriamente, mas o leitor pode tomar o código que aqui será apresentado como base para implementação de um gráfico que receba valores de alguma fonte específica.

O código HTML

A estrutura HTML que será utilizada aqui é bastante simples, pois a parte mais complexa e responsável por dar “vida” ao gráfico, será feita posteriormente com JavaScript.

Listagem 1: Código HTML do gráfico

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8" />
	<title>Gráfico JS</title>
</head>
<body>
	<canvas id="canvasGrafico"></canvas>     
</body>
</html>

Tem-se basicamente o elemento canvas da HTML5 onde será desenhado o gráfico. Inicialmente não há nenhuma configuração visual para esse elemento, pois tudo será feito via JavaScript.

Então o código acima pode ser copiado e salvo como um arquivo de extensão .html.

Dando vida ao gráfico com JavaScript

Com o arquivo HTML já salvo, pode-se inserir o código JavaScript, adicionando um par d

Introdução

A estética (layout, design) da interface com o usuário vem se tornando, cada vez mais, um elemento de fundamental importância no desenvolvimento de software. Atualmente, um sistema com interface mais agradável pode facilmente ganhar a preferência do usuário, mesmo quando comparado com um que possua mais funcionalidades, por exemplo, mas apresente um design mais simples.

É função do designer definir o melhor visual para a aplicação, oferecendo recursos visuais que se mostrem como um diferencial da aplicação em relação às demais. Às vezes pode-se apenas mudar a cor do plano de fundo, a fonte, bordas, etc, de um elemento, e obter um resultado satisfatório. Porém, existem situações em que os requisitos são mais complexos e podem necessitar, por exemplo, do desenvolvimento de controles customizados.

Com base nisso, este artigo apresenta uma solução de fácil compreensão e implementação, para o desenvolvimento de um menu popup customizado para páginas web, utilizando HTML, CSS e JavaScript.

O código HTML

O código HTML utilizado neste exemplo será bastante simples, composto apenas por um elemento qualquer (que nesse caso, será um título h1) e uma lista não ordenada (ul), que representará o menu de contexto/popup. O código constante na listagem 1 pode ser salvo como um arquivo de extensão .html, utilizando qualquer editor de texto simples.

Listagem 1: Código HTML da página

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Menu popup customizado</title>
</head>
<body>
    <div>
        <h1 id="hh1"  oncontextmenu="mostrarMenu(); return false;">H1</h1>
        <h2 id="hh2">H2</h2>
        <h3 id="hh3">H3</h3>
    </div>

    <div id="divMenu">
        <ul>
            <li>COPIAR</li>
            <li>RECORTAR</li>
            <li>COLAR</li>
        </ul>
    </div>
</body>
</html>

Se procedermos conforme a orientação e salvarmos o código acima como um arquivo .html, teremos como resultado, após abri-lo no browser, a configuração ilustrada na figura 1.

Figura 1: Estrutura básica da página

Observação: os títulos h2 e h3 foram adicionados apenas para que se possa comparar o menu padrão com o menu customizado, mais adiante.

O próximo passo é aplicarmos uma formatação à lista para que tenhamos o visual desejado.

Formatação visual com CSS

O código CSS apresentado aqui pode ser alterado conforme a situação e contexto, de forma que se obtenha o resultado mais adequado ao layout do sistema onde o menu será utilizado.

Então, podemos adicionar um par de tags style no cabeçalho (head) da página e inserir o seguinte código, visto na listagem 2. Também é possível manter essa formatação em um arquivo externo e referenciá-lo utilizando a tag link, mas para manter o exemplo o mais simples possível, aqui deixaremos o código CSS dentro da própria página.

Listagem 2: Código CSS para formatar o menu

<style>
    #divMenu {
        font:normal 20pt Calibri;
        border:1px dotted blue;
        width:200px;
        padding:0;
        position:absolute;
        background:rgba(133, 192, 242, 0.54) url('background.jpg');
        background-position:-1100px -200px;
  

ATENÇÃO: Foi verificado que o número de descontos disponíveis para essa certificação já esgotou.

Introdução

A maioria, senão todos, os profissionais e estudantes que utilizam tecnologias Microsoft em seu dia-a-dia, principalmente de forma profissional, sabem que essa empresa oferece um amplo programa de certificação em boa parte de seus produtos. Com essas certificações, a Microsoft (assim como outras empresas fornecedoras de soluções de TI) busca avaliar e reconhecer o conhecimento teórico e prático de um candidato sobre alguma (ou várias) de suas tecnologias.

Um profissional certificado é visto de forma diferenciada pelas empresas em momento de seleção. Geralmente, em um processo de admissão, um profissional que apresenta certificações em tecnologias de interesse da empresa na qual busca ingressar, já é tido como estando “um passo à frente” dos demais não certificados.

Figura 1: Um profissional certificado está à frente dos concorrentes

Para ser reconhecido como MCP – Microsoft Certified Professional (Profissional Certificado pela Microsoft), é preciso realizar uma prova e obter uma pontuação mínima (geralmente de 700 pontos, de um total de 1000). O resultado geralmente é apresentado imediatamente o término do exame e, após a realização da prova, caso tenha sido aprovado, o candidato receberá um e-mail da Microsoft com uma sequência de passos a ser seguida dali por diante.

Em um certo período (sete dias úteis, por exemplo), o então certificado terá acesso à página dos MCP’s onde terá um espaço seu (como um perfil em uma rede social) e poderá fazer download de seu certificado e logomarcas (cada certificação possui uma logomarca que o profissional poderá usar como parte de sua assinatura, anexando a e-mails ou utilizando em seu cartão de visitas, por exemplo).

Figura 2: Logomarca mais “geral” (MCP)

Existem ainda as certificações que são compostas por mais de uma prova, como é o caso das certificações mais recentes voltadas para o .NET Framework 4.5 e desenvolvimento para Windows 8. Na imagem a seguir temos um resumo das certificações MCSD (Microsoft Certified Solutions Developer) voltadas para as Windows Store Apps, as aplicações para Windows 8 publicadas nas Windows Store.

Figura 3: Resumo das mais novas certificações MCSD

No caso, existem duas formas de obter a certificação MCSD “Windows Store Apps”: usando HTML5 e JavaScript ou usando C#. Para obtê-la, é preciso ser aprovado nos três exames (480+481+482 ou 483+484+485).

Porém, a aprovação nos exames 481 ou 483 já garante ao candidato a certificação de Microsoft Specialist – Programing in HTML5 with JavaScript and CSS3 ou Microsoft Specislist – Programing in C#. É aqui que entra o voucher (desconto) disponibilizado pela Microsoft para o exame 70-480 (apenas para esse), como veremos a seguir.

100% de desconto para o exame 70-480

Com a intenção de incentivar o desenvolvimento de aplicações para seu novo sistema operacional, a Microsoft liberou um vale que garante 100% de desconto na realização do exame 70-480, “Programing in HTML5 with JavaScript and CSS3”. Esse vale está disponível para uso inicialmente até 31/03/2013 ou enquanto durar o estoque, ou seja, quem pretende aproveitar, é melhor correr.

Observação: Na data de publicação desse artigo , a realização do exame 70-480 custava (sem o voucher, obviamente) US$ 100 (cem dólares).

O procedimento para marcar o exame utilizando o voucher é bastante simples, basta seguir os segui

Introdução

Durante o desenvolvimento de aplicações, principalmente web, um dos fatores de maior relevância e que merece atenção é a segurança. Na maior parte dos sistemas em que o usuário mantém informações pessoais, sejam fotos, músicas, informações de compra e venda, etc, é necessário que esse se autentique para poder ter acesso a esses dados.

Porém, obviamente, para poder se autenticar (fazer login) no sistema, é preciso que esse usuário efetue um cadastro, no qual informa login, senha e outros dados que sejam relevantes para aplicação. No momento desse cadastro, é fundamental que o sistema auxilie o usuário e realize uma verificação da “força” da sua senha, evitando assim que ele utilize uma sequência de caracteres fácil de descobrir e, consequentemente, tenha prejuízos devido à violação de seus dados por alguém ter descoberto sua senha e acessado o sistema em seu lugar.

Essa verificação pode variar entre as aplicações, mas em geral se utiliza um algoritmo de validação da complexidade da senha informada. Como o desenvolvimento de um algoritmo desse tipo pode ser bastante complexo, uma opção prática e bastante adequada é a utilização de soluções já desenvolvidas e distribuídas para uso geral (geralmente gratuitas).

Nesse artigo será apresentado o plugin jQuery.Complexify, que realiza essa validação de forma rápida, além de poder ser facilmente integrado a páginas web. Esse plugin foi desenvolvido por Dan Palmer e é de distribuição gratuita, podendo ser obtido na página oficial que pode ser acessada no seguinte endereço: http://danpalmer.me/jquery-complexify/.

Nesse artigo veremos como integrar esse plugin a uma página HTML, através de exemplos práticos onde será mostrada o grau de complexidade da senha digitada no momento da inserção desse dado, sem que seja necessário clicar em nenhum botão ou “sair” do campo de senha, por exemplo.

Como utilizar

Como esse plugin foi desenvolvido com base na biblioteca jQuery, antes de tudo é necessário referenciá-la para poder fazer uso de sua sintaxe. A jQuery pode ser obtida no site oficial (http://jquery.com/download/), onde pode-se efetuar o download e usar o arquivo local, ou pode-se referenciar o arquivo JS direto no servidor (http://code.jquery.com/jquery-1.9.0.min.js), conforme veremos na Listagem 1.

O mesmo pode ser feito com o plugin em si, que pode ser obtido no link https://raw.github.com/danpalmer/jquery.complexify.js/master/jquery.complexify.js para se salvar e usar o arquivo local, ou utilizar diretamente esse endereço no momento da referência. Nesse artigo será utilizada a segunda forma.

Listagem 1: Referenciando os arquivos necessários

<script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script>
<script 
src="https://raw.github.com/danpalmer/jquery.complexify.js/master/jquery.complexify.js"></script>

Em seguida é necessário inserir mais uma tag na qual será invocada a função complexify para os campos que precis

Introdução

A exibição de dados em tabela é uma das formas mais comuns de ser encontrada em sistemas comerciais, independente do segmento de mercado ao qual atendem. As tabelas ou grids, desempenham um papel fundamental nas aplicações que precisam listar dados de forma organizada (linhas e colunas).

Na maioria das telas de consulta utiliza-se uma (ou várias) tabela(s) para apresentar o resultado da busca para o usuário, onde muitas vezes este pode selecionar as linhas registros e efetuar operações como edição e exclusão de registros.

Em muitos casos, principalmente em sistemas web, quando o usuário deseja editar uma linha da tabela, os dados são enviados para um formulário onde são apresentados em campos de texto, datepickers, etc.

Porém, existem situações onde pode ser interessante permitir ao usuário editar os dados direto na tabela, alterando o valor de cada célula sem necessitar utilizar outra página ou um formulário separado. Visando atender a situações desse tipo, este artigo apresenta uma solução simples e de fácil implementação da funcionalidade de edição de tabelas HTML utilizando a biblioteca jQuery.

O código HTML

A estrutura da página HTML utilizada será bastante simples, consistindo apenas de uma tabela com três linhas (além do cabeçalho). O código da listagem abaixo pode ser copiado e salvo com extensão HTML.

Listagem 1: Código HTML utilizado para exemplo

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Navegador em tabela HTML</title>
    <link rel="stylesheet" type="text/css" "estilo.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <table class="tabelaEditavel">
        <thead>
            <tr>
                <th>Código</th>
                <th>Nome</th>
                <th>E-mail</th>
                <th>Telefone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>João Carlos</td>
                <td>joca@email.com</td>
                <td>(21) 9999-8888</td>
            </tr>
            <tr>
                <td>002</td>
                <td>Maria Silva</td>
                <td>mariasilva@mail.com</td>
                <td>(81) 8787-8686</td>
            </tr>
            <tr>
                <td>003</td>
                <td>José Pedro</td>
                <td>zepedro@meuemail.com</td>
                <td>(84) 3232-3232</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

No cabeçalho da página (tag head) foram feitas referências ao seguintes arquivos:

• estilo.css: arquivo CSS contendo algumas formatações básicas para melhorar a aparência da página e facilitar a visualização do exemplo em funcionamento. O conteúdo desse arquivo será apresentado a seguir.
• http://code.jquery.com/jquery-1.8.3.min.js: biblioteca jQuery necessária para implementar a funcionalidade em questão. Sem ela, o código Javascript utilizado seria muito mais extenso e complexo. Nesse exemplo foi usado o arquivo hospedado no site oficial, poderia ser usado um arquivo local (fazendo download nesse link, por exemplo), bastando alterar o caminho da referência.
• script.js: nesse arquivo Javascript estará contido o código que d ...