Pular para o conteúdo principal

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

Temperamento - Decubra seu Perfil Profissional

Pergunta Sim Não 1: Gosta de conversar? 2: Gosta de atividade, ação? 3: Emociona-se com facilidade? 4: “Explode” facilmente? 5: Está sempre atualizado nos mais diversos assuntos(cultura geral)? 6: É imaginativo? 7: Tem inclinação para a crítica e para ironia? 8: Tem tendência a mudar de opinião se apresentarem argumentos válidos? 9: Quando lhe pedem desculpas,reconcilia-se com facilidade? 10: Tem dificuldade em perdoar/esquecer? 11: Gosta de fazer o bem sempre que pode? 12: Aflige-se facilmente com os males do próximo? 13: É mais optimista do que pessimista? 14: Ri com facilidade quando há motivo? 15: É uma pessoa inconstante,pouco perseverante? 16: Prefere que sejam outros a resolver os problemas? 17: Aceita facilmente novas ordens que lhe são dadas? 18: Gosta de novidades? 19: Gosta de andar elegante, bem vestido? 20: Gosta de ser admirado/elogiado pelos outros? Pergunta Sim Não

Tabela Periodica - Atalhos do Excel

PDF Converter Precisa converter algum arquivo em PDF, mas não tem algum programa que faça isso? O site PDF Converter faz o serviço em poucos cliques. Vá ao botão Browse, escolha o documento que quer converter, digite o e-mail de destino e clique em Convert Your File Google Tradutor Se você tem dificuldades em ler textos em outras línguas, o Google Tradutor é uma boa opção. Para utilizá-lo, escolha o idioma, digite o texto e, depois, selecione para qual idioma quer traduzir. Colar um endereço de página (URL) na caixa de texto e clicar em Traduzir também funciona HearNames O HearNames mostra como se pronuncia corretamente um nome. Para usar o serviço, digite o nome na caixa de texto e clique em Search. Após isso, clique no ícone de alto-falante que aparecerá para ouvir como se fala SuperLame Útil para quem não sabe mexer em programas de edição, o SuperLame executa uma função simples: inserir balões de diálogo em imagens. O procedimento é simples: faça o upload de uma imagem