Proponha uma correção, faça uma sugestão
Como criar um Website responsivo #1
No passado dia 21 de Abril a Google começou a penalizar os Websites que não estão optimizados a dispositivos móveis, fazendo com que eles possivelmente cedam o primeiro lugar, no resultado das pesquisas, a um Website que esteja adaptado a estes dispositivos. Com a introdução do CSS3, é possível criar com bastante facilidade e sem nenhum conhecimento específico de programação um Website que esteja optimizado para uma vasta gama de dispositivos, desde os ecrãs de computadores até aos smartphones.
É isso que iremos demonstrar nesta nova rubrica semanal. Começaremos hoje numa página HTML em branco e acabaremos num site completo responsivo, cumprindo todos os padrões impostos pela Google.
Para melhor compreensão desta rubrica, é recomendável que tenha conhecimentos básicos de como funcionam páginas Web, uma vez que eu não irei abordar muito esse assunto.
Começaremos então por este simples ficheiro HTML:
<!DOCTYPE html> <html> <head> <title>Exemplo nº1</title> <link rel="stylesheet" type="text/css" href="_css/styles.css"> </head> <body> <div class="wrapper"> <p>Hello world!</p> </div> </body> </html> |
Para além do trivial, foi incluída uma div do tipo “wrapper”. Este elemento é utilizado para limitar a largura do conteúdo a 1200 píxeis, centrando-o na página.
Esta funcionalidade é implementada usando o seguinte ficheiro CSS:
body,html{ margin:0px; padding:0px; } body{ background-color:#CCC; } .wrapper{ max-width:1200px; width:100%; background-color:white; margin:auto; box-sizing: border-box; margin-top:20px; padding:15px; } |
Poderá visualizar o código acima em acção clicando aqui ou descarregá-lo aqui.
Para quem já teve alguma experiência com CSS, nada disto é novo, pois nenhuma parte do código acima necessita de CSS3 para funcionar.
Este será o projeto base desta rúbrica, onde todas as semanas iremos juntar mais código e conteúdo, até que fique um Website completo, dentro das normas impostas pelo Google.
Depois desta introdução, na próxima semana começará a inclusão dos comportamentos únicos de CSS3 que estão presentes em todos os sites responsivos que visita (o nosso inclusive).
Sinta-se à vontade para colocar questões e apresentar sugestões do que gostaria que fosse debatido nesta rubrica. Até à próxima semana.
Este artigo tem mais de um ano
Loading ...
Media Queries 😛
Eu sei mais a frente, mas fiquei contente por ver este post aqui, trabalho já vai fazer quase 10 anos na área (certamente haverá pessoal que mais por aqui) mas com a nossa implementação da Google, acho que é um post importante.
Obrigado PPL 😀
Estes tutoriais ajudam muito! Principalmente porque há poucos escritos em PT! 😀
Parabéns.
Se não dominas minimamente o inglês, vais ter muitas dificuldades nesta área. Reforça os teus conhecimentos de inglês, para vingar em TI.
Eu estou a criar tutorials em PT, mas ainda tenho pouco conteúdo… neste momento so mesmo Python, a ideia é ir evoluindo e ir colocando mais linguagens, sendo que os próximos passos serão Bases de dados e php(que vai obrigar a ter html, css..), mas ainda tenho muito a cobrir em python e não tenho muito tempo 😡
nos meus tutorials quero ter uma linguagem simples, orientado a iniciantes, são introduçoes que depois deverão ser aprofundadas individualmente…
blog: livrecriador nos blogs do sapo 😉
podes meter o link sem medos 😀
e acho uma boa iniciativa!! e digo-te python é uma boa linguagem!! aposta nela
cria um ficheiro txt no smartphone onde vais escrevendo para o tutorial quando podes 😀
ou tirar ideias
FORÇA NISSO
+1 pela iniciativa!!
thx o link não foi por medo, não me apeteceu mesmo lol
Muitos parabéns pela iniciativa. Algo muito útil, que entrou na moda e que em Português de Portugal, ainda há poucos. Vai dar jeito a muitos 😉
Responsividade na web não é uma moda, mas sim uma necessidade há muito!
Ou então usam bootstrap que ajuda imenso para criar páginas
http://getbootstrap.com/
Támbem já usei o Bootstrap e apesar de achar que é bastante útil, penso que não é de forma alguma necessário para se fazer um Website responsivo facilmente e de certa forma esconde como tudo é feito e porque é assim feito.
Ainda assim, provavelmente numa rubrica futura cobriremos isso, ou então na conclusão desta mesma.
Obrigado pelo teu feedback, Miguel.
Não posso concordar contigo nesse ponto… sim é bom saber a raiz das coisas, e como elas começam. Se queres criar tu o teu proprio sistema em responsive, sim é porreiro usar isso e fazeres tu desde o principio.
Quando falamos de projectos maiores, em que os prazos são extremamente apertados, penso que não irias perder muito tempo nesta fase, e usarias algo já trabalhado para esse objectivo, até porque o projecto em si que me refiro, certamente não terá o seu real foco nas capacidades de responsive, mas sim sendo elas um acrescimo ao mesmo.
Esta é a minha visão, pois certamente cada um terá a sua. Na vida real, infelizmente, temos de usar o que é mais rápido, para conseguir executar as coisas nos seus prazos.
Aí sem dúvida que concordo contigo. Mas este artigo é para fins didáticos de como se desenvolver websites responsivos.
O Bootstrap é uma ferramenta de desenvolvimento que não é de forma alguma necessária necessária, muito menos para alguém sem grandes conhecimentos em desenvolvimento web.
Mas como já referi no comentário anterior, certamente irei mencionar o Bootstrap nesta rubrica, ou então, criar uma nova utilizando o Bootstrap.
Novamente, concordo contigo que é uma ferramenta bastante útil, só não para alguém a dar os primeiros passos, porque abstrai um pouco do que se passa por trás.
Pronto pronto 😛 não me batas!
Estou a brincar.
Entendo prefeitamente então o teu ponto de vista, sim, basicamente vais dar noções do “core” do Bootstrap 😀
Continua então o bom trabalho.
Parabéns 🙂
Ótimo artigo!!
Só deve utilizar essas frameworks quando se souber fazer um site de raiz sem as mesmas. Se não acho que se está a por a carroça à frente dos bois.
Eu uso frameworks quando não me quero focar no design mas sim no back-end da aplicação.
Outro problema do usar frameworks é que de caminho os sites são todos iguais. Mesmo usando estas ferramentas é preciso customizar o site e para isso já é preciso saber HTML/CSS/JAVASCRIPT básico.
Happy Coding!
Eu já usei bootstrap para algumas coisas, o problema é que também é preciso saber o que está por trás.
” é possível criar com bastante facilidade e sem nenhum conhecimento específico de programação um Website” (…) “Para melhor compreensão desta rubrica, é recomendável que tenha conhecimentos básicos de como funcionam páginas Web, “
Além de que conhecer o funcionamento de uma página Web não implica ter conhecimentos específicos de programação, logo de seguida está um exemplo bastante simples.
Dúvidas?
Oh realista… eu entendi isso. “nenhum conhecimento específico de programação” e “recomendável que tenha conhecimentos básicos ”
questão de interpretação
Antes de mais, parabéns pela iniciativa…
Só algumas considerações… faltou o link para fazer o download do código em “aqui”.
Para além disso, é sempre boa ideia colocar o DOCType no topo do ficheiro HTML:
Haveira mais algumas considerações a fazer, mas como se trata de um exemplo introdutório, não valerá a pena… 🙂
Abraço e bom trabalho.
Tens toda a razão, o artigo foi agora editado pela equipa do Pplware para incluir o doctype no HTML.
Foi falha minha não o ter incluído.
seria melhor já utilizar tags html5. as tais web semantics.
Iremos utilizar as tags , e nas próximas edições.
De qualquer forma, obrigado pela sugestão jedi!
Iremos utilizar as tags header, footer e nav nas próximas edições.
De qualquer forma, obrigado pela tua sugestão jedi!
Muito bom
Já perdi muitas horas de sono com este tema.
Podem ver aqui um exemplo muito completo. (http://www.carloshps.com.br/blog/criar-site-responsivo-com-html5-e-css3-parte-1-de-3/)
Parabéns pela iniciativa
Bom trabalho
Para seguir…
Será uma boa rubrica para acompanhar, visto que tenho estudado pouco sobre o tema…
Diogo os padding, margins e borders aumenta as dimensões do elemento, de modo que 100% + 15px > 100%, o que acontece no caso do elemento div.wrapper
A resolução é:
1. Apagas a propriedade width = 100% , pois não precisa dela, porque o elemento div por defeito assuma a largura total do elemento pai que no teu caso é elemento body.
2. Existe um truque: para não aumentar as dimensões do elemento usando padding, margins eborders deves incluir a propriedade box-sizing: border-box;(CSS3) – https://css-tricks.com/box-sizing/
Esqueci-me disso, tens toda a razão, foi esquecimento meu. Era minha intenção seguir pela 2ª opção que apresentaste.
As minhas desculpas e um obrigado pela crítica construtiva.
Na folha HTML não deveria haver a tag ? acho que isto força o site a redimensionar-se consoante o dispositivo…
Bom artigo!
* meta name=”viewport”, content=”width=device-width, initial-scale=1″ *
Também falta o doc type
Mas vá, vamos lá deixar o rapaz lançar o resto das tuts, esses toques vêm por acrescimo 🙂
O artigo já foi editado pela equipa do Pplware (um pouco depois de teres publicado esse comentário) para incluir o doctype no HTML.
Foi falha minha não o ter incluído.
Tem toda a razão, realmente falta essa tag no HTML. Ela será incluída na próxima edição, quando a largura da página realmente já puder ser igual à do dispositivo, que nesta fase ainda não pode.
Muito obrigado pelo feedback.
Nice! 🙂
Boa iniciativa.. irei acompanhar.
De momento uso bootstrap para websites mais simples e com prazos reduzidos.
Parabéns por esta iniciativa!
Por favor, náo se esqueçam das questóes de Acessibilidade.
Um dos principais fatores de exclusão digital das pessoa portadoras de deficiência visual é a Inacessibilidade dos sites através de Leitores de Ecrã.
Se ao longo deste tutorial forem reforçando esta necessidade e sensibilizando os desenvolvedores para as questões da acessibilidade e inclusão estarão, decididamente, a contribuir para um melhor acesso à informação de muitos cidadãos.
Alguns aspetos a ter em conta:
Botões etiquetados;
Imagens com descrição
Abraço,
Melo
Vou acrescentar apenas que esta questão do “site responsivo” faz parte do leque de “regras” para tornar o site mais acessível. Logo, ter um site responsivo não significa que tenhamos um site acessível, mas ter um site 100% acessível obriga a ter um site responsivo.
Para quem se interessa por este assunto, fica o site obrigatório para leitura: http://www.w3.org/standards/webdesign/accessibility
Para o ppl que quer uma somente uma grid responsiva e mais nada aconselho o Skeleton.
Ainda ninguém falou no projecto nacional Ink? Já usei uma vez e não fica atrás do Bootstrap e Foundation… Aliás se não me engano o este site foi criado com esta ferramenta 😉
Há páginas que são só aparencia. Há muito bom conteudo em paginas estilo web v2.
O Sapo continua a desenvolve o INK?
Parabéns pela iniciativa é sempre importante este tipo de questões e abordagens. Logicamente fica sempre muita coisa por se dizer.
Contudo uma forma fácil também de implementar sem necessitar de fazê-lo tudo à unha e que nos dias de hoje está muito na moda é o Bootstrap, que implementa o Responsive automaticamente.
http://getbootstrap.com/
O mais engraçado é o site do pplware dizer isto no teste de compatibilidade com dispositivos móveis da Google:
“Não compatível com dispositivos móveis”
De que ficção fala? O site Pplware é compatível com todos os dispositivos moveis. Eu tenho aqui um dispositivo móvel da Google, pelo qual lhe estou a responder, e é perfeitamente compatível.
https://www.google.com/webmasters/tools/mobile-friendly/?hl=pt&url=www.pplware.pt
Mto fixe
Continuacao desta bela iniciativa
Vou acompanhar
Vamos la pplware aprendeu, e façam o vosso website responsivo.
Brincadeira
Imagino que já tenham pensado nisso, mas claro que da trabalho e tudo leva o seu tempo.
Desafio-te a dizer onde o nosso site não é responsivo 😉 brincadeira, não consegues porque ele é totalmente responsivo.
Parabéns pelo artigo.