Testando a sua aplicação em diferentes dispositivos e browsers

Durante o desenvolvimento de aplicações, é fundamental visualizarmos em diferentes dispositivos e variáveis de browsers, o resultado obtido.

Hoje em dia, ao escolhermos um browser favorito temos diversas opções disponíveis para download. Antigamente éramos "obrigados" a trabalhar com o Internet Explorer, não havia outras possibilidades, porém esta pouca opção dava uma grande segurança aos web designers. 

Ao criar um design para um software, tínhamos a certeza que este design iria se comportar adequadamente em qualquer ambiente. Hoje, porém, um usuário pode além de escolher o browser a ser trabalhado, determinar a resolução de tela mais adequada para o dispositivo de acesso.

Além de computadores, nossos usuários podem querer acessar as aplicações através de smartphones, tablets, netbooks, notebook, desktops e Smart TV. Cada dispositivo possui uma configuração e uma linguagem, e é ai que nosso design vai pro saco.

Foi em virtude destes problemas que surgiu um novo conceito de design, o Design Responsivo. A principal característica do design responsivo é se adaptar adequadamente ao dispositivo de acesso. 

Hoje não irei entrar em mais detalhes a respeito deste conceito, porém irei dar duas dicas de como podemos testar nossas aplicações em diferentes dispositivos e browsers, sem precisar instalar e realizar isto na mão..

A primeira dica é o site ScreenFly, este site permite testarmos a aplicação gratuitamente em diferentes resoluções de tela (1024x600; 1024x768;etc), modelos de smartphones (RAZR, Galaxy, Iphone), tablets (Google; Kindle; Apple), Televisões e é claro notebooks, netbooks e desktops.

A segunda dica é sobre o BrowserShots, neste site é necessário realizar uma conta informando nome, email e senha. Através do BrowserShots podemos escolher uma URL, e definir as opções de browser e sistema operacional a ser testada esta URL. São mais de 130 opções de browsers, desde o Internet Explorer 5.0 à última versão do Google Chrome, e 4 opções de sistemas operacionais, desde o clássico Windows ao próprio MAC. O resultado pode demorar até 2 minutos, mas isto dependerá as opções definidas.

Genexus - Gerando Botões em CSS

Neste tópico irei fugir um pouco sobre exemplos, lógicas e funções do Genexus. Irei falar de algo simples, mas que insere um "plus" a mais em nossas aplicações.  Querendo ou não, quando focamos no layout das aplicações geradas, passamos por muitos sufocos. Isso, porque geralmente trabalhamos com tabelas e mais tabelas, criando e recriando classes no nosso tema e aplicando às células, linhas, text blocks, enfim a tudo que aparece em uma web panel...

Vou compartilhar algo que testei a pouco, a geração de estilos em css para aplicar a todos os botões que desejarmos. Estes códigos permitem diferenciar a "cara" dos botões em 3 diferentes momentos, default, mouse over e em cliques, e isso tudo sem utilizar imagem alguma!

Gerando o estilo css

O gerador de css que iremos utilizar é o site www.cssbuttongenerator.com. Neste, podemos configurar as cores, nome da classe, fonte, tamanho desta, sombras, bordas, praticamente cada detalhe do botão.

Bom, não irei dar um passo a passo sobre cada elemento das propriedades, mas é muito simples. Ao irem alterando-as já há como detectar cada uma aplicada ao botão.

Após definirmos o nosso estilo, é só clicarmos sobre o botão gerado que o código css irá aparecer logo abaixo.

Como exemplo irei criar três tipos diferentes de botões, um Azul (classAzul), Vermelho (classVermelho) e por último um Amarelo (classAmarelo).

Cada uma destas classes eu irei salvar em um arquivo chamado "botoesCss.css", e este arquivo estará presente dentro da pasta web da aplicação.

Porém, ao copiar cada uma destas classes para o arquivo, não serão necessárias a primeira e a última tag.

1ª Tag (eliminar): <style type="text/css">

Última Tag (eliminar): </style>

Aplicando ao Genexus

Agora, já com os nossos estilos copiados para o arquivo, iremos aplicar a uma web panel qualquer.

Primeiro, precisamos adicionar ao <header> da página o link do nosso arquivo css, para isso dentro do evento start digitaremos:

Event Start
Form.HeaderRawHTML = '<link href="botaoCss.css" rel="stylesheet" type="text/css" />'
EndEvent

Agora irei incluir três botões na web panel, e na propriedade "class" de cada um destes, irei informar (digitar, não há como selecionar) o nome das classes criadas. Veja um exemplo para a classe do botão Azul (classAzul):

Por fim o resultado será igual ao abaixo: