• slide2 escola
  • bg escola

Últimos Artigos

Recursividade: Que Geringonça é essa?

Matheus Rocha

  Se você trabalha com Desenvolvimento de Softwares ou até mesmo Websites, provavelment...

VER ARTIGO

Você sabe o que são Funções?

Matheus Rocha

Funções são rotinas especializadas em uma ou várias tarefas, e retornam uma saída, de acordo ...

VER ARTIGO

Fundamentos para Design de E-mail Marketing

Leonardo Volpiano

Existem alguns conceitos que são importante seguirmos para preservar a qualidade de quem está...

VER ARTIGO

Position relative, absolute ou fixed?

Matheus Rocha

  Olá, pessoal! Esse é o começo de uma série de artigos onde abordaremos de forma simpl...

VER ARTIGO

Começando com PHP - Formulário sem Refresh

Matheus Rocha

No mundo do Desenvolvimento Web, podemos notar uma divisão clara entre as a finalidade das li...

VER ARTIGO

O que é Flat Design?

Leonardo Volpiano

Flat Design é uma tendência recente, que defende interfaces simples e claros, entre outras ca...

VER ARTIGO

Web Série - Como construir um bom Layout [1]

Matheus Rocha

  Nesta série de artigos, abordaremos conceitos de design voltados para a web e ao fim...

VER ARTIGO

Você sabe o que é área-útil em um site?

Matheus Rocha

De maneira genérica, a área-útil de um site é a área apta à receber interação do usuário. Todo...

VER ARTIGO

Começando com UX - O que é UX?

Matheus Rocha

O que é UX? O termo User Experience foi criado por Donald Norman no início de 1990, quando e...

VER ARTIGO

Primeiros passos com HTML + CSS

Matheus Rocha

  Aqui, trataremos partindo do princípio de que você já conhece as noções básicas de ht...

VER ARTIGO

Html para iniciantes + Workflow - Configurand…

Matheus Rocha

Durante minha jornada como Desenvolvedor Web, tive oportunidade de experimentar, testar, gost...

VER ARTIGO

Você sabe o que é área-útil em um site?

Escrito por Matheus Rocha.

De maneira genérica, a área-útil de um site é a área apta à receber interação do usuário.

Todo o conteúdo que possa ser "clicado", deve integrar a área-útil:

 

area util websites

 

Como criar uma estrutura HTML simples, que aplique os conceitos de área-útil?

Trabalharemos com dois arquivos, home.html e custom.css

 

Neste exemplo trabalharemos com 990px de área útil. Este dado varia de acordo com a dimensão e complexidade do projeto, fatores como resolução mínima e máxima suportada são decisivos na escolha.

 

Começaremos com a estrutura HTML e ficará assim:

 

  1. <!DOCTYPE html>
  2. ...
  3. <body>
  4. <section>
  5. <div class="container">
  6. <h1>Meu Título de teste</h1>
  7. </div>
  8. </section>
  9. </body>
  10. ...
  11. </html>

 

 

Repare que existe uma div inserida em uma tag section. Todo conteúdo presente dentro da div classe container será "limitado" pela área útil. Importante lembrar de adicionar esta linha:

 

  1. <meta name="viewport" content="width=device-width, initial-scale=1">

 

Dentro da tag head do nosso HTML para dizer aos navegador dos usuários que o site é preparado para Viewport, ou seja, pronto para o uso de recursos responsivos (Não é o foco do artigo) 

 

O nosso arquivo CSS fica assim:

  1. .container{
  2. margin: 0 auto;
  3. max-width: 990px;
  4. }

 

A propriedade margin: 0 auto centraliza nosso "segurador" enquanto a propriedade max-width: 990px define a largura máxima em px para a área receptiva à ações do usuário (área útil).

 

Websites com Full área útil

Estes tipos de site, utilizam de toda a área do monitor para exibir o conteúdo. A engenharia dos componentes é um pouco mais complexa, visto que existirá uma área útil de largura DIFERENTE para cada um dos dispositivos onde o site será exibido. Não é uma má-prática, só não é o foco do presente artigo.

 

 

 

Espero ter ajudado você a entender melhor como funciona a área útil presente nos Websites. 

 

Obrigado!