terça-feira, 6 de outubro de 2015

Enroscos do RWD

Nem tudo em Responsive Web Design é um oceano de rosas, imagine ter que criar interface sem informar em momento algum a dimensão das coisas, no minimo vai ser difícil representar certo design que foi previamente determinado com larguras e alturas que harmonizam com os espaços negativos, hehehe... digamos que estou gastando um pouco do que não tenho, de fato até tento, mas design não é meu forte.

Então para os pobres mortais que precisam criar coisas bonitas em RWD, e claro, após ter tido uma excelente aula com a Sabrina Juarez, vamos ao que interessa: Enroscos no RWD. Ou se quiser traduzir: onde você vai sofrer para criar interfaces responsivas.

Para complementar o assunto recomendo a leitra dos artigos anteriores sobre este tema:

Conceito Um

Sua interface para ser responsiva tem que ficar boa em um iPhone mas também em um iMac de 29 polegadas, e só neste exemplo estamos falando em uma dimensão 10 vezes maior (ou menor). O desafio aqui é grande, e ao que me parece até agora, muitas colunas em um Grid preenchem um iMac mas entopem um iPhone , portanto, o primeiro conceito é que nem tudo que enche uma tela de fato é importante, pois quando temos que resumir um conteúdo em 10 vezes, quase tudo vai desaparecer.

Esse conceito deixaria o Steve Jobs feliz, pois ao falar de RWD estamos lidando principalmente com a simplificação da interface, digamos sua obsessão na vida.  E aproveitando a citação, expresso aqui minhas condolências ao grande gênio.

Portanto, a primeira coisa que deve ter em mente é que não deverá nunca fixar dimensões em colunas de Grid, por exemplo, pois esta simplesmente poderá prejudicar totalmente a visualização em outros dispositivos. A menos que tenha nervos de aço e sangue frio.

Dimensões Horizontais

Ao que me parece a questão do dimensionamento horizontal é bem resolvida em RWD, mesmo porque, como vimos em artigos anteriores, temos o Grid System que segue uma lógica linear com dimensões múltiplas de 8%. De forma bem resumida temos 100 / 8  = 12 colunas. Portanto, se pensar que tem 12 colunas e que vai preenche-las com informações, por exemplo, colocando uma imagem em uma unica coluna, um nome em três colunas, vai chegar a um resultado satisfatório.

O que você não deve fazer é fixar uma coluna em pixel, pois ao fazer isso, automaticamente estará afetando a apresentação em dispositivos pequenos. Portanto, sempre pense em dimensões percentuais.

O problema ocorre quando as colunas ficam meio desajeitadas, digo com dimensões inexplicavelmente estranhas, como o exemplo a seguir, onde temos uma imagem com uma largura gigantesca enquanto que as outras colunas ficam meio espremidas.


Para corrigir isso, crie uma classe Section com uma dimensão percentual de Width, e aplique sobre a imagem e as colunas que deseja reduzir. Criando uma classe, por exemplo, Section 1 e definindo Width=5%, aplicando sobre a Foto e Id, teríamos um rearranjo nas dimensões do Grid, conforme pode ser visto a seguir.


Dimensões Verticais

Então, aqui é que a coisa fica mais esquisita, isto no sentido brasileiro, não espanhol.  Falando o português mais claro possível, digamos que o resultado apresentado é feio pra caramba,e pior que tem uma lógica para isso funcionar desta maneira, pois as informações verticalmente devem parecer mais espaçadas para poderem ser pressionadas em dispositivos menores.

Portanto programando um grid FreeStyle como o apresentado a seguir temos um resultado estranho. sendo apresentado.

Estranho no minimo, porque a apresentação fica com espaçamentos verticais muito grandes.

Para corrigir isso soa mais estranho ainda, pois, é necessário criar uma classe vinculada a uma Rule, E é preciso um pouco se sangue frio para fazer isso, pois não esta muito claro no Genexus como conduzir esta operação.

Primeiro deve-se criar uma Rule (Add Rule) nova no tema Flat. Em seguida renomear esta Rule para Small, Medium ou Large, e então criar uma nova classe em Section, com o nome que desejar, criei como EspremeVertical.  Posicionar na intersecção da coluna Large com a nova classe, EspremeVertical, pressionando em seguida  F4 para programar a propriedade desta classe no tamanho Large.


Como queremos reduzir a margem, criar EspremeVertical como Section, e defina a propriedade margim-bottom com uma dimensão negativa, usei -30px.

Definir em Cell Class a classe EspremeVertical para os itens no grid.

O resultado será a apresentação mais próxima dos conteúdos quando estiver com uma dimensão Large na interface, pois a Rule será aplicada e a classe aplicada aos controles.



Diante disso tudo, espero que esta operação fique mais simples de ser feita no Genexus, pois está meio confusa.  Acho que o meu guru Steve Jobs deve ter se incomodado um pouco com esse formato.

Mostrar-ou-Não-Mostrar-Eis-A-Opção

Design responsivo em Genexus é simples com a aplicação do Pattern Work With, se for definir manualmente a coisa complica um pouco, pois não pense que apenas aplicar o tema Flat e usar o editor abstrato que já resolve a coisa.

Por exemplo, se criar um Grid e incluir colunas no mesmo, ao reduzir a dimensão do navegador não vai sumir nenhuma coluna por mágica.

Um certo jogo de classes CSS é que fazem a coisa ficar recursiva, ou seja, para dizer que certa coluna não precisa ser apresentada precisa colocar nesta coluna a classe WWOptionalColumn ou OptionalColumn (ambas produzem o mesmo efeito de esconder a coluna). Para as demais colunas, que seriam consideradas essenciais, uma classe WWColumn ou GridColumn.

Todas essas propriedades devem ser sempre colocadas em ColumnClass.

Aplicamos a classe OptionalColumn na coluna Id do nosso gridezinho exemplo e o resultado é esse abaixo quando reduzimos a largura do browser.

Conclusão

Bom, tem mais algumas coisas para explorar mas vamos com calma, melhor não assustar ninguém pois este tema é muito relevante para nossas aplicações no futuro. Pois me parece que haverá punição no search do Google para aplicações não responsivas, ou como dizem por ai, Mobile Friendly.

Para finalizar, um especial agradecimento a doutora Sabrina Juarez, pela sua imensa paciência nesta sexta-feira cansativa e pós evento.