Design Responsivo - Estrutura Base

Vamos entender na prática como tudo funciona

Como vimos no post anterior estamos trabalhando com WOT, como vamos desenvolver para diversos dispositivos então temos que ter um ponto de partida.

Em 03 de Novembro de 2009, Luke Wroblewski publicou uma matéria com o titulo "Mobile First", nesta publicação ele defende a ideia de se iniciar o projeto e seu código pelo menor dispositivo até o maior, exe.: iniciamos pelo celular, depois tablet e finalizamos com o desktop.

Em minhas postagens vamos desenvolver tudo seguindo o padrão "Mobile First".

HTML5 e CSS3

Tenho como base neste tema, Design Responsivo, que estou publicando para pessoas que já tem um conhecimento no assunto, por menor que seja e querem se atualizar. Sendo assim pode ser que eu vá direto ao ponto em alguns momentos e para quem não sabe nada de HTML5 e CSS3 vai ficar faltando conteúdo, Se isso acontecer, comenta na postagem, estou aqui para te auxiliar.

Estrutura base:
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Titulo</title>
  5. <meta name="description" content=" ">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. </head>
  8. <body>
  9. Conteudo...
  10. </body>
  11. </html>
Esta é a nossa base, quero detalhar melhor a linha 6 onde temos nossa meta VIEW PORT.

A W3C propôs em Setembro de 2011 a utilização da @viewport para definir os valores das propriedades: zoom, width e orientation que mais adiante foi substituído pela metatag viewport.

Aqui temos alguns ajustes a fazer no código acima antes de continuar, estes ajustes não são obrigatórios são sugestões de diversos autores, programadores e minha também.

As versões do Internet Explorer anteriores a 9 não dão suporte as tags do HTML5 que vamos ver, sendo assim temos um pequenos ajuste a fazer, segue o código a baixo onde adicionei as linhas 7, 8 e 9.
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Titulo</title>
  5. <meta name="description" content=" ">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <[!--if lt IE 9]>
  8. <script src="js/html5shiv.js"></script>
  9. <[endif]-->
  10. </head>
  11. <body>
  12. Conteudo...
  13. </body>
  14. </html>
Segue a link do arquivo HTML5Shiv para você baixar e colocar em seus estudos e projetos. Este arquivo faz com que o IE reconheça as tags do HTML5.

Continuando, temos mais uma boa pratica a ser feita, como falei anteriormente, não é obrigatória, é apenas uma sugestão.

Quando o HTML foi criado as tags foram criadas com padrões de: tamanho de fonte, quebra de linha, margem espaçamentos, e foi criado um CSS para normalizar tudo isso ou resetar tudo isso, esse conceito foi criado por Eric Meyer em 18 de Abril de 2007, é uma folha de estilo que redefine os padrões das tags,  posteriormente Nicolas Gallagher e Jonathan Neal criaram uma versão desta folha de estilo e deram o nome de normalize, segue abaixo o código atualizado mais uma vez com o arquivo RESET.CSS, este feito por mim, linha 10 foi adicionada.
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Titulo</title>
  5. <meta name="description" content=" ">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <[!--if lt IE 9]>
  8. <script src="js/html5shiv.js"></script>
  9. <[endif]-->
  10. <link rel="stylesheet" href="css/reset.css">
  11. </head>
  12. <body>
  13. Conteudo...
  14. </body>
  15. </html>
Agora nosso código base esta pronto, segue link para o código.

Em nosso próximo post vamos falar sobre as tags do HTML5

Até a próxima!

Comentários

Postagens mais visitadas deste blog

ANDROID - Criando e Publicando APP com HTML, CSS, JavaScript e Java

Diferenças entre design responsivo, adaptativo e fluído

Despedida SENAC