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

PerguntaSimNão1: 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?
PerguntaSimNão1: Irrita-se com facilidade?2: Nota-se quando está irritado?3: Guarda rancor?4: Perdoa com facilidade?5: É intolerante quando contr…

Tabela Periodica - Atalhos do Excel

Preciso ter um site?

Más é óbvio que a resposta é SIM, até porque como vou ganhar dinheiro fazendo site se as pessoas e empresas não fazem site.
Bem é isso que a maioria das pessoas pensam, que fazer um site é desnecessário e só server pra gastar dinheiro, ou então a pessoa faz um site porque sempre perguntam para ela "Você tem Site?".
Os motivos e necessidades para se ter um site são muitos, varia de negócio para negócio. Listei abaixo alguns itens, caso esteja lendo até aqui, não pare, leia o restante, acredito que vai mudar a seus conceitos sobre ter um site.
Aberto 24h. Suas informações, produtos, serviços estarão disponíveis aos clientes 24 horas por dia.
Credibilidade. É muito difícil para uma pequena empresa concorrer com empresas de grande porte. Na internet é possível que uma pequena empresa, com um site bem projetado, com um bom design gráfico, navegação simples e informações bem redigidas seja bem avaliada pelos seus clientes - mesmo quando comparada com concorrentes de maior porte. Um bom…