Olá,

Nesse Post vou mostrar um pouco de desenvolvimento PHP usando BDD (Behaviour-Driven Development).
O BDD é uma prática ágil que tem como objetivo facilitar o desenvolvimento orientado a testes,
onde o software é direcionados por comportamentos, trazendo para o contexto de destes os casos de uso ou historias da aplicação.

Enquanto em TDD (Test Driven Development) testamos a aplicação de forma granular em um ambiente micro
no BDD os testes são globais voltados para a Funcionalidade, Casos de uso, Comportamentos, etc..

Como se em TDD testamos a aplicação de dentro para fora e já em BDD a aplicação é testada de fora para dentro.
Existe muito material sobre esse assunto p\ ai e muita gente mais preparada que eu para abordar esse assunto de forma teorica,
Então nesse Post vou mostrar na pratica um pouco de desenvolvimento PHP usando o Behat

Behat é um framework BDD em PHP 5.3 construindo sobre de componentes do Symfony2.
Behat foi inspirado no Cucumber do Rails e especialmente a parte da sintaxe das features.

A instalação do Behat pode ser feita baixando diretalente pelo git diretamente pelo do git: http://github.com/Behat/Behat
Ou instalando através do pear :

 
$ pear channel-discover pear.behat.org
$ pear install behat/behat

Se tudo der certo o Behat esta instalado
A versão atualmente disponível no pear é a 1.1.9
Para verificar se esta correto e ver a versão instalada execute :

$ behat -V
Behat version 1.1.9

Depois de concluir a instalação o Behat esta pronto para ser usado.
para isso vamos inicializar o projeto de testes com o Behat

$ cd path-to-my-app
$ behat --init

O comando behat –init vai criara a estruturar de diretórios usada p\ organizar os teste do Behat

|-- features
   |-- steps            ##Diretório dos arquivos que contem os cenários de testes
       |-- steps.php
   |-- support          ##Configurações, requires e configs de ambiente
       |-- bootstrap.php  
       |-- env.php

A definição de um historias e cenários de teste é bem simples.
Utilizando algumas palavras chaves : Feature, Scenario, Given, When, Then, But or And
Os cenários são escritos em arquivos .feature que serão interpretados pelo Behat

features/contacts.feature

Feature: Contacts Registration
    In order to demonstrate the framework
    As a SouDev using BDD
    I want to register contacts

  Scenario: Add new contact
    Given a contact named "Fabio B. Silva" using the email "fabio.bat.silva@gmail.com"
      And the phone "xx xxxx-xxxx"
     When press save
     Then everything will be saved

Com a historia escrita podemos executar o Behat dentro da aplicação
O Behat vai interpretar os arquivos .feature
e mostrar quais funções vc tem que implementar para poder rodas o teste

 
$ cd path-to-my-app
$ behat
1 scenario (1 undefined)
4 steps (4 undefined)
0m0.03s
 
You can implement step definitions for undefined steps with these snippets:
 
$steps->Given('/^a contact named "([^"]*)" using the email "([^"]*)"$/', function($world, $arg1, $arg2) {
    throw new \Behat\Behat\Exception\Pending();
});
$steps->And('/^the phone "([^"]*)"$/', function($world, $arg1) {
    throw new \Behat\Behat\Exception\Pending();
});
$steps->When('/^press save$/', function($world) {
    throw new \Behat\Behat\Exception\Pending();
});
$steps->Then('/^everything will be saved$/', function($world) {
    throw new \Behat\Behat\Exception\Pending();
});

Essa definição dos steps que o Behat lançou pode ser copiada para um arquivo de steps.php o que facilita bastante a implementação dos teste..
Porem escrever historias em inglês pode ser meio confuso, mais o tem suporte a i18n oq nos permite escrever as historias em português.
para isso basta adicionar # language: pt_BR no inicio do arquivo .feature
com isso ganhamos as palavras chaves em português : Funcionalidade,Cenario, Scenario, Quando, Então, Entao, Dado, Mas, E

features/contacts.feature

# language: pt_BR
Funcionalidade: Cadastro de contatos
    Para demostrar o funcionamento do framework
    Como SouDev que usa BDD
    Desejo cadastrar contatos

  Cenario: Adicionar um novo contato
    Dado um usuário chamado "Fabio B. Silva" usando o email "fabio.bat.silva@gmail.com"
      E com o telefone "xx xxxx-xxxx"
     Quando pressionar salvar
     Entao os dados serão salvos

E ao executar novamente o Behat a implementação dos teste agora também vem em português :

 
$ cd path-to-my-app
$ behat
1 scenario (1 undefined)
4 steps (4 undefined)
0m0.03s
 
You can implement step definitions for undefined steps with these snippets:
 
$steps->Dado('/^um usuário chamado "([^"]*)" usando o email "([^"]*)"$/', function($world, $arg1, $arg2) {
    throw new \Behat\Behat\Exception\Pending();
});
$steps->E('/^com o telefone "([^"]*)"$/', function($world, $arg1) {
    throw new \Behat\Behat\Exception\Pending();
});
$steps->Quando('/^pressionar salvar$/', function($world) {
    throw new \Behat\Behat\Exception\Pending();
});
$steps->Entao('/^todos os dados serão salvos$/', function($world) {
    throw new \Behat\Behat\Exception\Pending();
});

Com essa definição a implementação dos testes para essa feature pode ser feita
features/contacts_steps.php

use App\Entities\Contact, App\Entities\Phone, App\Services\ContactService;
 
$steps->Dado('/^um usuário chamado "([^"]*)" usando o email "([^"]*)"$/', function($world, $arg1, $arg2) {
    $contact = new Contact();
    $contact->setName($arg1);
    $contact->setEmail($arg2);
 
    $world->contact = $contact;
});
 
$steps->E('/^com o telefone "([^"]*)"$/', function($world, $arg1) {
    $world->contact->addPhone(new Phone($arg1));
});
 
$steps->Quando('/^pressionar salvar$/', function($world) {
    $world->saveReturn = ContactService::getInstance()->save($world->contact);
});
 
$steps->Entao('/^todos os dados serão salvos$/', function($world) {
     assertTrue($world->saveReturn);
});

O BDD e TDD são ferramentas essenciais para um software bem feito,
Infeliz mente muitos “desenvolvedores” ainda tem resistência a aderir ao teste e por achar perda de tempo, tedioso, etc..
O fato é que uma suite de testes bem feita vai tornar sua aplicação muito mais estável e vai lhe economizar tempo e cabelos ao longo do projeto. rsrs

Gostei bastante do Behat é um projeto muito bem estruturado e em constante evolução a versão 2.0 esta prestes a sair
Vale apena dar uma conferida na Documentação do Behat

E Para quem tiver o interesse deixei a app no git
https://github.com/FabioBatSilva/bdd-php-behat

Abraço e até a próxima….

Click aqui para ver o post Original

Fabio B. Silva
http://www.flexria.com.br

Olá.

Escrevendo o post Java + MongoDB + Spring Data descobri o Spring Data JPA
e fiquei surpreso em descobrir algumas features como a criação de repositórios e consultas dinâmicas.
Neste Post vou falar um pouco sobre o Spring Data JPA e como ele pode lhe proporcionar uma maneira rápida e elegante de implementar seus repositórios.

O Spring Data JPA tem como principal objetivo facilitar a implementação das camadas de acesso a dados.
O Spring fica responsável pela implementação dos repositórios e oferece algumas funcionalidades sofisticadas e comuns na maioria dos CRUDs baseado na entidade que esta sendo gerenciada.

Nessa aplicação vou usar as entidades Contact, Phone, e o repositório ContactRepository.

As entidades são bem simples, é anotadas com o mapeamento de seus atributos e relacionamentos.
Contact.java

 
@Entity
@Table(name="phones")
public class Phone {
  @Id
  @GeneratedValue(strategy = GenerationType.AUTO)
  private Long id;
 
  @ManyToOne
  @JoinColumn(name="id_contact")
  private Contact contact;
  //getter and setter methods 
  ...
}

Phone.java

@Entity
@Table(name="contacts")
public class Contact {
 
   @Id
   @Column(name="id_contact")
   @GeneratedValue(strategy = GenerationType.AUTO)
   private Long id;
 
   @Column(name="name")
   private String name;
 
   @Column(name="email",unique=true)
   private String email;
 
   @OneToMany(mappedBy="contact",cascade=CascadeType.ALL, fetch=FetchType.LAZY)
   @Fetch(FetchMode.JOIN)
   @private Set phones = new HashSet();
 
  //getter and setter methods 
  ...
}

ContactRepository.java

public interface ContactRepository extends JpaRepository {
 
    public Contact findByEmail(String email);
}

Até aqui nada de novo, porem agora como a “mágica” do Spring JPA ..rsrs

A interface do repositório estende JpaRepository, essa interface tem alguns métodos comuns como findAll, findOne, save, delete, etc…
Normalmente teríamos que implementar essa interface criando uma classe ContactRepositoryImpl e registra-la como um bean do spring
para que então possamos utilizar o repositório.

Com o Spring JPA não é necessário escrever essa implementação ..
Não é magia meus amigos, é tecnologia !!!…rsrs

O Spring JPA vai procurar por interfaces de repositórios que estendam a interface JpaRepository,
e então criar uma implementação para a interface e registra-la como um bean.

Para isso so é necessário apenas adicionar a tag jpa:repositories no contexto do spring,
com isso o Spring sabe onde procurar os repositórios que ele teve implementar.

applicationContext.xml

 
// Declaração dos Beans, TransactionManager, DataSource, etc...
 
<jpa:repositories base-package="br.com.flexria.springjpa.repository" />

Com isso a implementação do repositório já esta pronta para ser injetada é utilizada na aplicação.

 
@Autowired
ContactRepository repository;
 
repository.save(contact);
 
repository.delete(contact);
 
List list = contactRepository.findAll();

Isso por si so ja é algo incrível so que o Spring Data JPA vai alem.

Algo que ja é comum no Rails, são os Dynamic attribute-based finders que é a possibilidade de realizar buscas dinâmica baseadas nos atributos do objeto
Em rails temos :

//"SQL : SELECT * FROM contacts WHERE email = 'fabio.bat.silva@gmail.com'"
 
Contact.where(:email =>"fabio.bat.silva@gmail.com")
 
//Usando Dynamic attribute-based finders
Contact.find_by_email "fabio.bat.silva@gmail.com"

É exatamente isso que o Spring Data JPA faz,
além de implementar do repositório com ele é possível utilizar buscas dinâmica baseadas nos atributos do objeto.

   // HQL : select c from Contact c where c.email = ?1
    public Contact findByEmail(String email);
 
   // HQL : select c from Contact c where c.name like ?1
    public List findBynameLike(String email);

Com base em algumas palavras chaves varias consultas podem ser feitas :

Repositórios dinâmicos, consultas dinâmicas, Buscas baseadas em NamedQuery ou anotações, etc..
com certeza tem muita coisa a ser explorada no Spring Data JPA, me surpreendi com a facilidade e agilidade.

Vale apena dar uma conferida na documentação do Spring Data JPA

E Para quem tiver o interesse deixei a app no git
https://github.com/FabioBatSilva/spring-data-jpa

Abraço e até a próxima….

Click aqui para ver o post Original

Fabio B. Silva
http://www.flexria.com.br

Olá.

A alguns dias escrevi um post sobre PHP + MongoDB e recebi um feedback muito positivo
então resolvi repetir a dose e mostrar um pouco da integração entre Java e MongoDB.

Na minha opinião essa é uma das principais vantagens do MongoDB em relação a outros bancos de dados NoSQL,
O MongoDB e extremamente fácil de se integrar com a maioria das linguagens.

Neste Post vou falar um pouco sobre o MongoDB e a integração com o java utilizando o Spring Data.
O MongoDB fornece o mongo-java-driver que atualmente esta na versão 2.6.X é uma API completa para acessar o MongoDB.
O Spring Data é um projeto recente, lançado em 2010, ele oferecer suporte a novas tecnologias não relacionais, suporte a extensões específicas a bancos de dados relacionais. Spring Data trabalha como uma camada intermediária entre seus POJOs e o MongoDB.

Nesse exemplo estou usando o maven para gerencias as dependências do projeto
Então alem das dependências habituais do projeto: Spring, JUnit e etc.. vamos precisar adiciona ao pow.xml as dependências do MongoDB e Spring Data

pow.xml

Feito isso as dependências do projeto estão configuradas e podemos partir para a configuração do spring.
A configuração é bem simples, nesse exemplo existem apenas 2 beans que configuram o MongoDB e Spring Data mongoTemplate e mongo

applicationContext.xml

O Spring Data oferece uma serie de anotações que permitem mapear o POJO de forma bem similar ao Hibernate/JPA
Contact.java

 
@Document(collection="contacts")
public class Contact {
    @Id
    private ObjectId id;
    private String name;
    private String email;
 
  //getter and setter methods 
  ...
}

E é através do mongoTemplate que vamos interagir com o MongoDB por exemplo :

 
@Autowired
MongoTemplate template;
 
// insere um novo registro		
template.insert("contacts", contact);
 
// insere/altera um registro
template.save("contacts", contact);
 
// remove um registro
template.remove(contact);
 
// lista todos os registros
List list = template.getCollection(collectionName, Contact.class);

Apesar do Spring Data suportar o JPA repository fiz uma implementação genérica para um repositório usando o Spring Data.

GenericRepositoryWithMongo.java – Repositório genérico

public abstract class GenericRepositoryWithMongo {
 
  @Autowired
  protected MongoTemplate template;
  protected Class targetClass;
  protected String collectionName;
 
  @SuppressWarnings("unchecked")
  public GenericRepositoryWithMongo() {
     this.targetClass = (Class) ((ParameterizedType) getClass().getGenericSuperclass()).getActualTypeArguments()[0];
  }
 
  @PostConstruct
  public void initCollection() {
    if(this.targetClass.isAnnotationPresent(Document.class)){
      Document document   = this.targetClass.getAnnotation(Document.class);
      this.collectionName = document.collection();
    }
    else{
      this.collectionName = this.targetClass.getSimpleName().toLowerCase();
    }
  }
 
  public List getCollection() {
    return template.getCollection(collectionName, targetClass);
  }
 
  public void persist(T entity) {
    template.insert(collectionName, entity);
  }
 
  public void merge(T entity) {
    template.save(collectionName, entity);
  }
 
  public void remove(T entity) {
    template.remove(entity);
  }
 
  public List findAll() {
    return getCollection();
  }
 
  public long count() {
    return getCollection().size();
  }
}

E então a interface do repositório e sua implementação

ContactRepository.java – Repositório de contatos

public interface ContactRepository {
 
    public Contact findByEmail(String email);
 
    public void persist(Contact entity);
 
    public void merge(Contact entity);
 
    public void remove(Contact entity);
 
    public List findAll();
}

ContactRepositoryImpl.java – Implementação do repositório de contatos

@Service("contactRepository")
@Repository
public class ContactRepositoryImpl extends GenericRepositoryWithMongo implements ContactRepository{
 
	public Contact findByEmail(String email) {
	   Criteria criteria	 = Criteria.where("email").is(email);
	   Query query 	         = new Query(criteria);
	   return template.findOne(query, targetClass);
	}	
}

Realmente me surpreendi com a facilidade da integração usando o Spring Data
é um exemplo bem simples da integração porem mais da o caminho das pedras para quem esta se aventurando no mundo NoSQL.
Espero que seja util..

Para quem tiver o interesse deixei app no git
https://github.com/FabioBatSilva/spring-mongodb

Abraço e até a próxima….

Click aqui para ver o post Original

Fabio B. Silva
http://www.flexria.com.br

Mock-up é uma maquete ou um modelo em tamanho real de um projeto. Utilizado para o ensino, demonstração, avaliação de concepção e outras finalidades. Um Mock-up é um protótipo e mostra pelo menos alguma funcionalidade que o projeto real visa ter.

O SketchFlow é um recurso da família Microsot Expression Studio Ultimate, que lhe da a capacidade, rapidez e eficácia de mapear o fluxo de uma aplicação de interface com o usuário através de layout de telas permitindo a transição de um estado para outro. Esta habilidade permite explorar e testar várias idéias sem investir grandes quantidades de tempo, mostrando ao seus clientes que você é capaz de encontrar a solução certa para eles.

Com o SketchFlow os clientes podem testar diversos cenários e fornecer um feedback para a equipe de desenvolvimento, através de comentários, anotando a sua experiência enquanto navegam pelo protótipo.

Então vamos começar!!!

Um cliente te ligou solicitando a criação de uma tela para a consulta de pedidos de compra feitos no dia que deve mostrar o número de vendas/hora por vendedor. Você logo imaginou o que o cliente queria e iniciou o desenvolvimento do protótipo de tela.

Para isso inicie o Microsoft Expression Blend 4 + Skecth Flow e na guia Projects escolha New Project, e então na tela New Project escolha Silverlight SketchFlow Application e nomeie o protótipo com o  seguinte nome PurchaseRequestSample então click em OK, conforme a figura 1 logo abaixo.

Figura 1 – Criando o projeto para o protótipo da tela.

Na barra de ferramentas do blend clique em Assets (recursos) e então na árvore selecione SketchFlow –> Styles –> SketchStyles clique no controle TitleLeft-Sketch e então desenhe no topo da página. Com um duplo clique no controle você poderá editar o texto ou então utlizar a barra de propriedades no grupo Common Properties propriedade Text.

Figura 2 – Selecionando o controle.

Figura 3 – Controle desenhado no topo da página.

Figura 4 – Barra de propriedades.

Existem algumas coisas importantes que você precisa saber ao utilizar o Expression Blend.

Utilize essa seta, quando você quiser redimensionar os controles. Quando o controle estiver selecionado ele ficará de forma parecida como o da imagem abaixo, mostrando as áreas em que você pode manipular o mouse para redimensionar o controle. Podemos também manipular as âncoras do controle. Quando a âncora está habilitada ela fica dessa forma  e quando desabilitada dessa . Quando habilitada; a medida em que a página for redimensionada o controle também será. Isso depende das configurações de âncora que você definiu, nesse caso o controle é redimensionado quando todas as âncoras estão habilitadas. Para habilitar ou desabilitar as âncoras basta dar um clique em cima dela. Utilize essa seta, quando você quiser mover os controles. Utilize a “Mãozinha” para mover a página dentro do Expression Blend sem desorganizar os controles. Utilize a Lupa para aumentar o zoom da página. Mantenha a tecla ALT pressionada enquanto clica para reduzir o zoom. Utilize para inserir textos na página. BasicTextBlock-Sketch para Labels e BasicTextBox-Sketch para caixas de texto. Utilize para inserir controles de usuário como botões, caixas de seleção, etc…

Agora, vamos criar um subtítulo para a tela, para isso em Assets –> Sketch Styles selecione SubtitleLeft-Sketch e adicione o controle logo abaixo do título,  então altere o texto para “Vendas hora por vendedor”. Você pode encontrar os controles facilmente fazendo buscas conforme a figura 5.

Figura 5 – Localizando os controles mais facilmente.

Mude o tamanho da fonte do controle para 14, através da barra de propriedades conforme a figura  6.

Figura 6 – Mudando o tamanho da fonte

Agora vamos inserir um retangulo abaixo do subtítulo para simular uma caixa de listagem, para isso pesquise em Assets por rect para localizar o controle Rectangle-Sketch.

A sua página deverá ficar como a figura 7 ao executar o protótipo. Para executar o protótipo pressione a tecla F5 ou vá para o menu Project e clique na opção Run Project .

Figura 7 – Página esperada até o momento.

Em algum momento teremos de redimensionar a página que está sendo criada. Uma coisa que você precisa saber é que toda a página ou UserControl criado pelo Expression Blend por padrão tem um controle Grid nomeado de LayoutRoot é nele que adicionamos os nossos controles. Através da barra de ferramentas Objects and Timeline podemos observar como os nosso controles estão organizados. Veja a figura 8.

Figura 8 – Objects and Timeline

Todos os controles que estão no UserControl podem ser observados através dessa barra de ferramenta. Cada controle possui um símbolo de um olho , clique nele para ocultar ou mostrar os controles que estão na página. Você também pode travar os controles evitando que eles se movam acidentalmente, para isso clique ao lado do símbolo do olho para habilitar o cadeado.

Figura 9 – TextBlock Travado.

O controle Grid “LayoutRoot” é redimensionado junto com a página, pois todas as suas âncoras estão habilitadas por padrão. Como queremos aumentar a página devemos clicar em UserControl na barra Objects and Timeline e então clicar na seta de redimensionamento e redimensionar a página conforme o desejado.

Quando estamos redimensionando a página podemos notar que os controles acompanham o redimensionamento do controle pai. Caso você não queira que eles acompanhem desabilite as âncoras.

Agora vamos inserir alguns retângulos dentro do rentâgulo criado anteriormente e dentro de cada retângulo adicione um controle BasicTextBlock-Sketch com o nome do vendedor.

Figura 10 – Selecionando o controle BasicTextBlock-Sketch

Deixe o nome dos vendedores em negrito selecionando B “Bold” através da barra de propriedades no grupo Text.

Figura 11

A página deverá ficar conforme a figura 12.

Figura 12

Vamos redimensionar a página e adicionar mais controles até que ela fique da seguinte forma.

Figura 13

As setas do lado direito foram desenhas através dos controles Block Arrow Down Sketch e Block Arrow Up Sketch, elas foram redimensionadas até que ficassem dessa forma.

As cores dos retângulos foram aplicadas através do grupo Brushes da barra de propriedades, selecionando Background e aplicando a cor desejada.

Figura 14

Nesse post conhecemos o SketchFlow e aprendemos diversos detalhes do Expression Blend. Aprendemos como adicionar controles a página, redimensioná-los e alterar suas propriedades.

No próximo post adicionaremos fluxos de navegação a esse protótipo, e será demonstrado como o cliente pode fornecer um feedback para a equipe de desenvolvimento.

Veja o protótipo desse post clicando aqui ou um mais completo aqui.

Continue acompanhando novidades através do blog da FlexDev e do meu blog no wordpress, até o próximo artigo.

Olá meu nome é Katriny e hoje iremos aprender como se fazer uma esfera 3D no Photoshop CS5

Para começarmos, abra seu photoshop e pressiona as teclas: Ctrl + N para criarmos uma novo documento

Mude as propriedades conforme a imagem mostrada e clique em “Ok”.

1º Passo: Pressione as teclas: Ctrl+Shift+Alt+N e escolha a opção cor, conforme a imagem indica:

Clique sobre a opção: Set the text color e mude a cor para #000cff, dessa forma:

2º Passo: Pressione a tecla G de seu teclado e clique na opção: Gradiente Tool e selecione Paint Bucket Tool, depois clique sobre o documento, assim preenchemos com a cor que selecionamos.

3º Passo: Pressionamos novamente as teclas: Ctrl+Shift+Alt+N para criamos uma nova Layer.

4º Passo: Pressione a tecla M do seu teclado e escolhendo a opção: Rectangular Marquee Tool

5º Passo: Na barra de ferramentas clique no icone: Add to Selection

6º Passo: Crie três seleções

7º Passo: Na barra de ferramentas, clique na opção: Edit –> Fill, e mude para as propriedades conforme a imagem e clique em “Ok”

8º Passo: Pressione a tecla Shift e clique sobre o segundo Layer

9º Passo: Na barra de ferramentas clique na opção: 3D – New Shape From Layer – Sphere

No final você terá em sua tela do photoshop essa imagem:

Olá, meu nome é André Almeida e hoje vou mostrar como colocar um efeito bem bacana em um texto, pra você que queira, por exemplo, dar um novo “ar” no logo da empresa, ou em um topo de um site. Trata-se de inserir um reflexo na imagem, dando a impressão de algo como se fosse vidro ou algo parecido.

Com o Adobe Fireworks aberto, vamos criar um New Document, com as dimensões de 500×500 pixels e um fundo transparente:

Agora, insira um texto que você queira aplicar o efeito, no exemplo, coloquei “FlexDev”.

Selecione a camada do texto, copie e cole (Ctrl+C / Ctrl+V, ou segure Alt e arraste a imagem) para termos 2 palavras para trabalhar:

Atenção que agora só iremos trabalhar com a ‘cópia’. Selecione o texto e vá no menu Text –> Convert to Paths, ou Ctrl+Shift+P. Em seguida, vá na opção Modify –> Ungroup (ou Ctrl+Shift+G), para desagrupar o texto:

Vamos aplicar o efeito, para isso, com as letras selecionadas, mudaremos o fill para Gradient –> Linear:

Clicamos na caixa de cores ao lado do baldinho, e alteramos as cores do branco para o branco:

No mesmo lugar, mudaremos a opacidade do branco da direita para 0:

Com a Pen Tool (tecla de atalho: ‘P’), vamos criar uma forma parecida como da imagem abaixo:

Com o texto e o objeto que acabamos de criar selecionados, vamos em Modify –> Combine Paths –> Punch:

E finalmente, arrastamos o nosso efeito e colocamos sobre o texto original, ficando assim:

Até a próxima!

Esses dias lendo o livro do Fowler (PoEAA), ele comenta um pouco sobre desempenho e como muitos dos termos de desempenho são usados de forma inconsistente. Para melhorar a comunicação de equipes de desenvolvimento de software resolvi publicar alguns termos e seus respectivos significados.

1. Tempo de Resposta
   

   É a quantidade de tempo que o sistema leva para processar uma solicitação externa. Pode ser uma ação na interface com o usuário, como o pressionamento de um botão, ou uma chamada de API do servidor.

2. Agilidade de Resposta
   

   A agilidade de resposta diz respeito ao quão rapidamente o sistema reconhece uma solicitação (em oposição ao tempo que leva para processá-la). Isso é importante em muitos sistemas porque os usuários podem ficar frustrados se um sistema demorar para responder a uma solicitação, ainda que seu tempo de resposta seja bom. Se o seu sistema esperar durante toda uma solicitação, então sua agilidade de resposta e o seu tempo de resposta são os mesmos. Entretanto se você indicar que recebeu a solicitação antes de completá-la, então sua agilidade de resposta é melhor.

3. Latência
   

   É o tempo mínimo requerido para obter qualquer forma de resposta, mesmo se não houver nenhum trabalho a fazer. Se eu pedir a um programa para não fazer nada, então devo receber uma resposta quase instantânea se o programa rodar na minha máquina local. Entretanto, se o programa rodar em um computador remoto, pode demorar alguns segundos devido ao tempo gasto para que a solicitação e a resposta cheguem a seu destino através da conexão. Como desenvolvedor de aplicações, geralmente, nada posso fazer para melhorar a latência. A latência é o motivo pelo qual devemos minimizar chamadas remotas.

4. Throughput
   

   É a quantidade de coisas que você pode fazer em uma dada quantidade de tempo. Se você estiver contabilizando o tempo gasto na cópia de um arquivo, o throughput poderia ser medido em bytes por segundo. Para aplicações corporativas, ume medida típica é o número de transações por segundo (tps), mas o problema é que isso depende da complexidade da sua transação.

   Nesta terminologia, desempenho pode significar tanto throughput quanto tempo de resposta – o que for mais importante para você. Às vezes, pode ser difícil falar sobre desempenho quando uma técnica melhora o throughput, mas piora o tempo de resposta. Assim é melhor usar o termo mais preciso. Da perspectiva de um usuário a agilidade de resposta em detrimento do tempo de resposta ou do throughput aumentará o desempenho.

5. Carga
   

   A carga é uma medida da pressão a que o sistema está submetido, que poderia ser medida pelo número de usuários a ele conectados em um determinado instante de tempo. A carga é geralmente um contexto para alguma outra medida, como um tempo de resposta. Assim, você pode dizer que o tempo de resposta para alguma solicitação é de 0,5 segundo com 10 usuários e de 2 segundos com 20 usuários.

6. Sensibilidade de carga
   

   É uma medida de como o tempo de resposta varia com a carga. Digamos que o sistema A tenha um tempo de resposta de 0,5 segundo para um número de usuários entre 10 e 20, e o sistema B tenha um tempo de resposta de 0,2 segundo para 10 usuários que aumenta para 2 segundos com 20 usuários. Neste caso o sistema A tem uma sensibilidade de carga menor do que o sistema B.

7. Eficiência
   

   A eficiência é o desempenho dividido pelos recursos. Um sistema que obtenha 30 tps com duas CPUs é mais eficiente que uma que obtenha 40 tps com quatro CPUs idênticas.

8. Capacidade
   

   A capacidade de um sistema é uma indicação do máximo throughput efetivo ou máxima carga efetiva. Este poderia ser um máximo absoluto ou um ponto a partir do qual o desempenho caia abaixo de um limite aceitável.

9. Escalabilidade

A escalabilidade é ume medida de como o acréscimo de recursos (normalmente hardware) afeta o desempenho. Um sistema escalável é aquele que lhe permite adicionar hardware e obter uma melhora de desempenho proporcional, como dobrar o número de servidores disponíveis para dobrar o throughput. A escalabilidade vertical, ou escalar para cima, significa adicionar mais poder a um único servidor (por exemplo, acrescentar memória). A escalabilidade horizontal, ou escalar para fora, significa adicionar mais servidores.

O problema aqui é que as decisões de projeto não afetam todos esses fatores de desempenho de forma igual. Digamos que temos dois sistemas de software rodando em um servidor: a capacidade do Peixe-Espada é de 20 tps, enquanto a do Camelo é de 40 tps. Qual dos dois tem melhor desempenho? Qual é mais escalável? Não podemos responder a questão de escalabilidade com estes dados, e a única coisa que podemos dizer é que o Camelo é mais eficiente em um único servidor. Se adicionarmos outro servidor, percebemos que o Peixe-Espada agora trata 35 tps, e o camelo 50 tps. A capacidade do Camelo ainda é melhor, mas parece que o Peixe-Espada pode ter melhor escalabilidade. Se continuarmos adicionando servidores, descobriremos que o Peixe-Espada obtém 15 tps por servidor adicional e que o Camelo obtém 10. Com esses dados, podemos dizer que o Peixe-Espada tem uma melhor escalabilidade horizontal, ainda que o Camelo seja mais eficiente com menos de cinco servidores.

Os projetistas muitas vezes fazem coisas complicadas que aumentam a capacidade de uma plataforma específica de hardware quando, em verdade, poderia ser mais barato comprar mais hardwares. Se o Camelo tem um custo maior do que o Peixe-Espada, e esse custo maior é equivalente a um par de servidores, então o Peixe-Espada acaba sendo mais barato, mesmo se você precisar de apenas 40 tps. Está na moda reclamar por ter que depender de hardware melhor para fazer o nosso software rodar apropriadamente. No entanto, adquirir hardware mais novo é com freqüência mais barato do que fazer o software rodar em sistemas menos poderosos. De forma semelhante, adicionar mais servidores é freqüentemente mais barato do que adicionar mais programadores – desde que o sistema seja escalável.

Silverlight é um plugin multibrowser e multiplataforma para o desenvolvimento de aplicações RIA e para facilitar a integração com media. Ele reuniu as capacidades de aplicações desktop, aplicações web, funcionalidades do servidor e do cliente, desenvolvimento com linguagens scripts ou orientada a objetos.

O que devemos ter em mente é que o Silverlight é mais do que simplesmente um container para executar aplicações ricas e interativas na web. O silverlight é uma plataforma para desenvolvimento de aplicações, cross-plataforma e cross-browser.

No silverlight o conteúdo é declarado utilizando o XAML. O XAML é um arquivo XML onde é possível declarar elementos visuais da interface, incluindo animações.

O Silverlight contém um subset do .Net Framework que inclui bibliotecas e componentes para integração de dados, networking, controles WPF e CLR (Common Language Runtime). Isso permite que desenvolvamos as nossas aplicações utilizando as linguagens mais comuns em .Net, VB.Net e C#, compiladas.

Não é necessário ter o .Net Framework instalado no cliente ou no servidor. Apenas o plug-in do silverlight é necessário.

Para mais informações sobre Rich Internet Application, veja: http://en.wikipedia.org/wiki/Rich_Internet_application

Exemplos de aplicações em silverlight:

HARD ROCK – MEMORABILIA

 Calculadora interessante…

 Microsoft Health

Experience IIS Smooth Streaming

 Out of Browser

Mais exemplos em http://www.silverlight.net/community/samples/silverlight-samples/.

Olá, pessoal esse é uns dos primeiros POST’s que estarei fazendo aqui na FlexDev sobre Silverlight e tecnologias .NET, meu nome é Rodrigo da Silva Brito e trabalho na flexdev desde abril de 2009, comecei a trabalhar com desenvolvimento de sistemas em 2004 na TreinaSoftware, trabalhava com Visual Basic 6, MySQL e o grande e famoso Microsoft Access. Em 2006 comecei a estudar .NET e C#, me apaixonei por C# e estou até hoje nessa caminhada de estudos. No momento estou terminando o bacharelado em ASTI (Análise de Sistemas e Tecnologias da Informação) pelo Centro Paula Souza – FATEC Ourinhos, e escrevendo a minha monografria sobre frameworks de persistência. Possuo um blog do qual estou ressuscitando, você pode acessá-lo através do seguinte endereço http://rodrigobrito.wordpress.com. Agora vamos ao que interessa!

Para começarmos você vai precisar ter instalado em sua máquina o Microsoft Visual Studio 2010. Neste artigo estarei utilizando a versão Premium, precisaremos também do Microsoft Silverlight 4 Tools for Visual Studio 2010 que é um pré requisito para desenvolver aplicações em Silverlight 4 e aplicações Ria Services através do Visual Studio 2010. Precisaremos também do Microsoft Expression Blend® 4 Release Candidate (RC).

1. Inicie o Microsoft Visual Studio 2010

2. No menu File passe o mouse sobre New, e então selecione New Project

3. A caixa de diálogo New Project será exibida

4. Em Installed Templates no lado esquerdo da janela selecione Visual C# e então selecione Silverlight. Selecione Silverlight Application e verifique se na caixa de seleção superior está selecionado o .NET Framework 4. Em Name colocaremos o nome de nossa aplicação no caso FirstSilverlightApplication e então click em OK.

5. Na caixa de diálogo New Silverlight Application desselecione Host the Silverlight application in a new Web site e em Silverlight Version verifique se Silverlight 4 está selecionado e então click em OK.

6. Após clicado em OK você terá uma tela como esta.

Criando Controles

Os controles podem ser adicionados a aplicação usando o ToolBox do Visual Studio ou editando o texto XAML diretamente no editor XAML.

1. Selecione o controle TextBlock e o arraste a MainPage.xaml.

A. Altere a propriedade Text do controle para Contatos.

B. Altere o tamanho da fonte do controle para 14, através da propriedade FontSize.

C. Deixe a fonte em negrito através da propriedade FontWeight selecionando Bold.

2. Selecione o controle Border e o arraste a MainPage.xaml, altere a propriedade CornerRadius para 5.

3. Arraste o controle Grid para dentro do controle Border, então resete as propriedades Height e Width do Grid.

4. Arraste controles TextBlock e TextBox para dentro do controle Grid de forma que a página fique conforme a figura abaixo.

Como você já deve ter percebido, todas as mudanças feitas através da ToolBox Properties são refletidas instantaneamente no código XAML. Veja abaixo o código XAML referente ao controles TextBlock e TextBox que adicionamos dentro do grid.

 <Grid>
         <TextBlock Height="20" HorizontalAlignment="Left" Margin="6,9,0,0" VerticalAlignment="Top" Width="74" Text="Nome:" TextAlignment="Right" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,6,0,0" Name="txtNome" VerticalAlignment="Top" Width="282" />
         <TextBlock Text="Empresa:" Height="20" HorizontalAlignment="Left" Margin="6,37,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
         <TextBlock Text="Cargo:" Height="20" HorizontalAlignment="Left" Margin="6,66,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
         <TextBlock Text="E-mail:" Height="20" HorizontalAlignment="Left" Margin="6,94,0,0" VerticalAlignment="Top" Width="74" TextAlignment="Right" />
         <TextBlock Text="Telefone:" HorizontalAlignment="Left" Margin="6,123,0,107" Width="74" TextAlignment="Right" />
         <TextBlock Text="Observações:" Height="20" HorizontalAlignment="Left" Margin="0,149,0,0" VerticalAlignment="Top" Width="80" TextAlignment="Right" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,35,0,0" Name="txtEmpresa" VerticalAlignment="Top" Width="282" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,64,0,0" Name="txtCargo" VerticalAlignment="Top" Width="282" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,92,0,0" Name="txtEmail" VerticalAlignment="Top" Width="282" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="86,121,0,0" Name="txtDDI" VerticalAlignment="Top" Width="41" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="133,121,0,0" Name="txtDDD" VerticalAlignment="Top" Width="41" />
         <TextBox Height="23" HorizontalAlignment="Left" Margin="180,121,0,0" Name="txtTelefone" VerticalAlignment="Top" Width="188" />
         <TextBox Height="95" HorizontalAlignment="Left" Margin="86,149,0,0" Name="txtObservacoes" VerticalAlignment="Top" Width="282" />
 </Grid>

5. Aumente o tamanho da página “Height” e arraste dois controles Button, botões Salvar e Cancelar. Altere as suas propriedades Content e Name respectivamente.

Imagem da página criada:

Código XAML completo da página:

Nos próximos artigos de Silverlight estaremos complementando essa pequena aplicação, iremos criar o Grid para a listagem de contatos, botões de inclusão, edição e deleção. Utilizaremos WCF para acesso aos dados.

O WCF para quem não conhece é um poderoso framework para a criação de aplicações orientadas a serviço.

Até o próximo artigo!

Este post é para te convidar a participar do curso que será realizado pela RiaCycle, do nosso amigo Igor Costa, tenho certeza que o curso será da mais alta qualidade e estaremos participando também. E para você que ainda não fez sua inscrição corra, porque faltam poucos dias.
Também vamos sortear uma bolsa integral para participar deste curso. Para concorrer é simples, basta dar um Retweet na seguinte mensagem:

Eu quero ganhar uma bolsa para o Curso Flex 4 Essencial #miniflex4 http://bit.ly/9lBWaT http://bit.ly/brBSOG #FlexDev

Se quiser pode usar o link abaixo:

O ganhador será divulgado na sexta-feira (11/06/2010).

Grande abraço a todos.