Para Produção

De MAGTAB Wiki
Ir para: navegação, pesquisa

O HTML é uma linguagem de marcação que possibilita a criação de sites e aplicativos web. Nesse sentido, a frequente utilização destes recursos pela comunidade mundial e o surgimento de novas tecnologias passou ser vista pelo profissional da área de T.I como um problema. Isto é, o desenvolvimento muitas vezes propiciava a não padronização do código, dificultando e deixando lenta a interpretação pelos navegadores. Além disto, cada um destes utilizam uma implementação diferenciada para uma determinada tarefa, forçando o profissional a adaptar ou adicionar redundâncias ao código.

O surgimento do HTML5 tem como propósito padronizar o desenvolvimento web e as técnicas implementados pelos navegadores, além de trazer consigo grandes novidades que revolucionam a interação usuário-internet com animações, jogos, campo gravitacional, entre outros.

O HTML5 e suas propriedades em conjunto com a linguagem de programação Javascript e o CSS (estilo em cascata) torna possível a criação de interações sofisticadas e atrativas. Desta maneira, as possibilidades são imensuráveis, contudo, exigindo do profissional um conhecimento especifico para uma determinada tarefa.


Para o Setor de Produção as Especificações

Nossas especificações obrigatórias para a criação e produção da interatividade em HTML5 são simples. As seguintes seções abordam temas que, vai desde a configuração da dimensão da interatividade até o ajuste do mesmo a diferentes dispositivos.

Arquivo

A pasta raiz deve conter todos os arquivos, tais como, html, imagens, css, scripts, vídeos, entre outros, proporcionando ao usuário a visualização da interatividade sem estar conectado a internet. Além disto, deve ser compactada com formato ZIP padrão do windows, mac ou linux, e o arquivo gerado após este processo deve ser enviado para nós.

Lembrando que o primeiro arquivo a ser chamado quando a interatividade é visualizada no aplicativo da revista é o index.html, como ilustra a estrutura de arquivos a seguir:

Producao17.jpg

Para gerar o arquivo .zip utilizando o windows, basta clicar sobre a pasta raiz com o botão direito do mouse e navegar até a opção enviar para -> pasta compactada. Agora, para o Mac, basta clicar com botão direito do mouse sobre a pasta raiz e selecionar a opção Comprimir 'Nome da Pasta'.

O Problema do Ajuste da Tela

Como há vários dispositivos suportados pela plataforma, o ajuste da tela é fundamental para que o usuário não deixe de ver as informações, efeitos, vídeos, entre outros. Além disto, deve estar muito bem definido para que não fique travado na interatividade – não permite passar para a próxima página. Este problema é comum e ocorre porque o conjunto de informações extrapolou o tamanho máximo em largura definido pelo desenvolvedor, criando uma barra de rolagem – o bloqueio para a próxima página ocorre por causa da barra de rolagem. Sendo assim, a maneira de prevenir este problema é produzir uma interatividade que se ajusta a qualquer resolução - desde que o navegador esteja em conformidade com as especificações da W3C o auto-ajuste vai funcionar -, um layout responsivo.

Layout Responsivo - Trabalhando com Porcentagem

A melhor maneira até o momento para produzir um layout que se ajuste a qualquer resolução é aplicando porcentagem ao tamanho e posição das imagens que compõem o layout da interatividade. A seguinte sequência de exemplos demonstram a maneira para codificar com resolução 768pxX1024px responsivo.


Estrutura base do projeto:

Producao20.jpg


index.html: (será o primeiro arquivo a ser chamado)

Producao16.jpg


style.css: (aqui esta o segredo)

Producao18.jpg

Producao15.jpg

Producao08.jpg

O principal detalhe durante a codificação do css é transformar a dimensão das imagens que compõem um layout com, por exemplo, 768x1024px para porcentagem. Uma maneira de fazer é converter o tamanho em pixel para porcentagem através das seguintes formulas: para a largura da imagem (width) use (L x 100 / TL), e para converter a altura (height) da imagem use (A x 100 / TA), onde L ou A é a Largura e Altura da imagem em questão e TL ou TA é o tamanho total do layout em largura ou altura. O exemplo do calculo a seguir demonstra como funciona:

      1 - Layout de 768 de largura por 1024 de altura. (768x1024)
      2 - Uma imagem do layout com 400 de largura por 200 de altura. (400x200)

Convertemos a altura e largura em porcentagem da seguinte maneira:

      PL = (400 * 100) / 768 = 40000 / 768 = 52.08% de largura.
      PA = (200 * 100) / 1024 = 20000 / 1024 = 19.53% de altura.

Desta maneira, aplicamos este calculo para cada estilo criado dentro do arquivo .css de cada imagem e o resultado disto é um layout responsivo.


script.js: (função responsável por ajustar o layout proporcionalmente ao tamanho de tela do dispositivo)

Producao10.jpg

Os cálculos de aplicado no arquivo .css foram com base na dimensão de, por exemplo, 768x1024px, contudo ainda temos que ajustar o mesmo proporcionalmente ao tamanho da tela. Para isto, chamamos a função denominada "ajustaContainer" ao qual passamos por parâmetro a div principal - que contém todas as outras - o seu tamanho que é 768x1024 e uma outra função que será chamada após o redimensionamento responsável por dar inicio a interatividade.


ajustaTamanhoTela.js:

Producao02.jpg


Para a função "ajustaContainer" os passos executados são:

1: define para corpo da interatividade a resolução da tela. Isto ajuda a enfatizar que se alguma informação extrapolar a dimensão do layout, ela vai esconder a informação, logo não vai travar a interatividade.

2: a variável result contém a largura e altura da dimensão proporcional a tela.

3: adiciona a div principal esta nova dimensão.

4: e centraliza a div principal na tela da interatividade.

5: mostra a div principal após um tempo de 33 milisegundos. Este pequeno tempo é utilizado porque pode ocorrer o efeito das imagens se auto-ajustando.

6: por fim chama a função que dará inicio a interatividade.


Para a função "calculoAjustaContainer" os passos executados são:

1: calcula o menor ratio a partir da largura e altura do layout e da interatividade.

2: retorna a largura e altura multiplicado pelo ratio.

O resultado da interatividade aplicando este tipo de técnica consiste no layout auto-redimensionavel para qualquer navegador - desde que este esteja padronizado.


Vantagens:

1: Se ajusta a qualquer resolução de dispositivo.

2: A dimensão do layout será mantida sempre.

3: Não haverá perda de informação pela barra de rolagem vertical.

4: O Usuário não ficará travado na tela com a barra de rolagem horizontal.

5: O processamento do aplicativo será reduzido.


Desvantagens:

Layout Responsivo - Trabalhando com css scale(value, value)

O estilo em cascata 3 (CSS3) trouxe consigo uma propriedade conhecida como scale. Esta proporciona a possibilidade de aumentar ou diminuir o(s) objeto(s). Neste sentido, facilitando a adaptação de um layout criado a partir de uma dimensão estática (ex: 768x1024px) para qualquer dimensão de dispositivo. Segue o link para os navegadores que tem suporte [1].

As sequências de exemplos a seguir demonstram a produção de um layout com dimensão estática 768x1024px, a adaptação para outras resoluções utilizando a propriedade scale e o resultado final.


index.html:

ScaleIndex.png


style.css

ScaleCSS.png


script.js:

ScaleScript.png

Neste arquivo fizemos a chamada de uma função "ajustaContainer(...)" que passa por parâmetro a div principal e seus dados (largura e altura) além de uma função denominada "inicia" que dará inicio a interatividade em HTML5. Neste sentido, para que seja possível dimensionar o layout é necessário obter um valor que, aplicado a propriedade scale irá dimensionar a div principal proporcionalmente ao tamanho da tela.


ajustaTamanhoTela.js:

ScaleAjusta.png

Para a função "ajustaContainer" os passos executados são:

1: define para corpo da interatividade a resolução da tela. Isto ajuda a enfatizar que se alguma informação extrapolar a dimensão do layout, ela vai esconder a informação, logo não vai travar a interatividade.

2: a variável result contém um único fazer que foi escalonado do tamanho do layout da interatividade para o tamanho da tela.

3: aplicamos a div principal a propriedade scale com o valor escalonado.

4: e centraliza a div principal na tela da interatividade.

5: mostra a div principal após um tempo de 33 milisegundos. Este pequeno tempo é utilizado porque pode ocorrer o efeito das imagens se auto-ajustando.

6: por fim chama a função que dará inicio a interatividade.


Para a função "calculoAjustaContainer" os passos executados são:

1: calcula o valor escalonado do tamanho da dimensão da interatividade com o tamanho da tela.

2: retorna o valor escalonado.


O resultado de todos os processos já executados pode ser verificado na imagem seguinte:

ScaleResult.png

Vantagens:

1: Se ajusta a qualquer resolução de dispositivo.

2: A dimensão do layout será mantida sempre.

3: Não haverá perda de informação pela barra de rolagem vertical.

4: O Usuário não ficará travado na tela com a barra de rolagem horizontal.

Desvantagens:

1: A propriedade scale utiliza a GPU do dispositivo. Neste sentido, se a funcionalidade da interatividade estiver muito complexa, o ajuste da dimensão da interatividade e as animações executadas demandaram muito processamento deixando o aplicativo lento ou fechar.