Análise de Sistemas
Banco de Dados
Computação Gráfica
Diversos
Internet
Lógica
Programação
Redes
Computação
Informática Básica
FrameWorks
Matemática
Cadastre-se
CRIANDO PAGINAS DE INTERNET RESPONSIVAS


CLUBE DE AUTORES


MAGAZINE LUIZA


CLUBE DE AUTORES


AMAZON


CLUBE DE AUTORES

PHP-GENERATOR

CRIANDO PAGINAS DE INTERNET RESPONSIVAS

A liberdade jamais e dada pelo opressor, ela tem que ser conquistada pelo oprimido. (Martin Luther King)

CRIANDO PÁGINAS DE INTERNET RESPONSIVAS


Segundo o dicionário online Priberam, responsivo é aquilo que envolve resposta. No desenvolvimento de web sites, responsividade é, portanto, a técnica pela qual uma página de Internet dá diferentes respostas de acordo com o dispositivo no qual ela está sendo visualizada, ou seja, a forma como a página é exibida muda para melhor se adaptar ao tamanho das telas dos dispositivos.


O primeiro passo para fazer uma página responsiva é utilizar a meta tag viewport que é responsável pela renderização da área onde a página será exibida, devendo ser inserida em seu head. Com viewport é possível criar áreas de renderização de diversos tamanhos e até mesmo impedir que o usuário de zoom na página. No entanto, o mais comum é utilizar 100% da tela do dispositivo para visualização da página, com possibilidade de zoom.


O exemplo abaixo mostra uma forma bem simples de utilização da viewport com aproveitamento de 100% da tela do dispositivo.


<head>

<meta name="viewport" content="width=device-width">

</head>


O segundo passo para criação de uma página responsiva é mudar o seu layout, ou seja, a sua forma de exibição, adaptando-a a resolução de tela do dispositivo que está sendo utilizado. Sendo assim, páginas que ocupam, por exemplo, 70% da largura da tela ao serem abertas em um computador desktop, podem utilizar 100% da largura da tela ao serem abertas por um smartphone ou tablet. Uma das formas de se fazer isso é utilizando JavaScript, fazendo-se uma verificação de tamanho no início do corpo (body) da página. Exemplo:


<body>

<script>
if(screen.width<1000) document.write('<table width=100% height=100%><tr><td valign=top>');
else document.write('<table width=70% height=100%><tr><td valign=top>');
</script>
</body>


No exemplo dado, uma tabela será criada para exibição do conteúdo da página, sendo-lhe atribuída 100% da largura da tela, no caso da resolução do dispositivo ser inferior a 1000 pixels, o que caracterizaria o uso de um tablet, smartphone, ou tela pequena, ou apenas 70% da largura da tela, o que caracterizaria o uso de um computador desktop com tela maior. O mesmo poderia ter sido feito com uma div ao invés de table.


Outras verificações com JavaScript podem ser feitas para mudar a disposição dos elementos da página, fazendo, por exemplo, com que uma página exibida em duas colunas em um computador desktop, passe a ser exibida em apenas uma coluna em um smartphone ou tablet, com uma instrução do tipo:



<script>
if(screen.width<1000) document.write('<tr>');
</script>


A mesma lógica pode ser adotada para acrescentar elementos na página, ao ser aberta por um computador desktop com tela maior, fazendo com que todo espaço disponível seja aproveitado por inteiro.


Neste pequeno artigo foram dadas apenas algumas sugestões de responsividade. Aconselha-se um estudo mais aprofundado sobre a meta tag viewport e suas propriedades, bem como outras formas de controle do layout por meio de JavaScript ou CSS.


ATIVIDADES


1) Para que serve a meta tag viewport?

2) O que são páginas de Internet responsivas?

3) De que forma JavaScript pode ser útil na criação de páginas responsivas?




WebMaster: PROFESSOR RONI MARCIO FAIS
Formação: Bacharel em Ciência da Computação e Especialista em Administração, Supervisão e Orientação Educacional
E-mail: rmfais@yahoo.com.br


Artigos



Criação de APP online