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
Responsividade e Design Responsivo
Produtos
Produtos

Pesquisar
PHP-GENERATOR

Responsividade e Design Responsivo

"A arma mais poderosa do opressor é a mente do oprimido” (Steve Biko)

RMFAIS

RESPONSIVIDADE E DESIGN RESPONSIVO


No desenvolvimento para Web, responsividade refere-se a criação de páginas de Internet que se ajustam, automaticamente, a diferentes tipos de dispositivos, proporcionando ao internauta uma melhor visualização dos conteúdos. O design responsivo é, portanto, um conjunto de recursos que possibilitam implementar a responsividade.


Dentre tais recursos, o principal deles é <meta name=viewport content=width=device-width>, uma informação de cabeçalho que faz o navegador(Browse) redimensionar os conteúdos na tela de acordo com a resolução do dispositivo que está sendo utilizado pelo internauta.


Um outro recurso importante, é a utilização da linguagem JavaScript, para reajustar os tamanhos dos componentes da página, por meio de verificações lógicas, conforme exemplo que segue:


<script>

if(screen.width<1000) document.write("<DIV style='background-color:gold; width:100%; height:600px;'>");

else document.write("<DIV style='background-color:gold; width:70%; height:600px;'>");


</script>


O código seguinte, é um exemplo de página responsiva que se ajusta a diferentes tipos de dispositivos:


Para executar o código abaixo você terá que autorizar popup


Este pequeno artigo não têm por objetivo fazer um aprofundamento sobre design responsivo, ele é apenas uma sugestão básica de como criar uma página responsiva. Para criação de páginas manualmente(bloco de notas), aconselha-se fazer uma estudo mais aprofundado sobre a meta tag viewport, pois ela possui diversas sintaxes. Vale lembrar que, a maioria dos frameWorks e templates destinados a criação de sites estão preparados para gerar códigos responsivos.


ATIVIDADES


1) O que vem a ser uma página web responsiva?

2) Que tipos de recursos podem ser utilizados para implementar responsividade?

3) Qual a importância da responsividade na criação de páginas web?


Publicado em 13 de Maio de 2018 – Prof. Roni Márcio Fais



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


MIT APP INVENTOR 2 - PARTE02 - CRIAÇÃO DE APP NATIVO

Neste tutorial será utilizado a versão em inglês do MIT APP INVENTOR2.

Converter página HTML para APK

Transforme sua página HTML em APP sem complicação.

MIT APP INVENTOR 2 - PARTE03 - CRIAÇÃO DE APP HÍBRIDO

Neste tutorial será utilizado a versão em português do MIT APP INVENTOR2.

MIT APP INVENTOR 2 - PARTE01 - APRESENTAÇÃO

Uma excelente ferramenta para programadores e não programadores.

TIPOS DE ERROS DE PROGRAMAÇÃO

Sonha e serás livre de espírito... luta e serás livre na vida. ( Che Guevara)