PplWare Mobile

Como criar um Website responsivo #1


O gosto pela tecnologia despertou sentimentos únicos que levaram a escrever umas palavras e a premir o obturador.
Artigo escrito por Diogo Calçada para o Pplware

Destaques PPLWARE

  1. Diogo Esteves says:

    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 😀

  2. Domingo says:

    Estes tutoriais ajudam muito! Principalmente porque há poucos escritos em PT! 😀

    Parabéns.

    • Cláudio Oliveira says:

      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.

    • Glink says:

      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 😉

      • knom says:

        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!!

  3. Rúben Sousa says:

    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 😉

  4. Miguel says:

    Ou então usam bootstrap que ajuda imenso para criar páginas
    http://getbootstrap.com/

    • Diogo Calçada says:

      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.

      • Diogo Esteves says:

        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.

        • Diogo Calçada says:

          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.

          • Diogo Esteves says:

            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.

      • Mariana Lucena says:

        Parabéns 🙂
        Ótimo artigo!!

    • Bruno says:

      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!

    • Bruno Jesus says:

      Eu já usei bootstrap para algumas coisas, o problema é que também é preciso saber o que está por trás.

  5. Realista says:

    ” é 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, “

    • Hugo Cura says:

      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?

    • Mota says:

      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

  6. Gilito says:

    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.

    • Diogo Calçada says:

      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.

  7. jedi says:

    seria melhor já utilizar tags html5. as tais web semantics.

  8. José Coelho says:

    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

  9. Redin says:

    Para seguir…

  10. JJ says:

    Será uma boa rubrica para acompanhar, visto que tenho estudado pouco sobre o tema…

  11. Dinus says:

    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/

    • Diogo Calçada says:

      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.

  12. Bruno says:

    Na folha HTML não deveria haver a tag ? acho que isto força o site a redimensionar-se consoante o dispositivo…

    Bom artigo!

  13. Joao Ferreira says:

    Boa iniciativa.. irei acompanhar.

    De momento uso bootstrap para websites mais simples e com prazos reduzidos.

  14. Melo says:

    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

    • Rui Costa says:

      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

  15. Bruno says:

    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 😉

  16. João says:

    Há páginas que são só aparencia. Há muito bom conteudo em paginas estilo web v2.
    O Sapo continua a desenvolve o INK?

  17. Luis Lopes says:

    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/

  18. Alonso says:

    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”

  19. Jose Neves says:

    Mto fixe
    Continuacao desta bela iniciativa
    Vou acompanhar

  20. Marcelo Barros says:

    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.

Deixe uma resposta

O seu endereço de email não será publicado.

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Aviso: Todo e qualquer texto publicado na internet através deste sistema não reflete, necessariamente, a opinião deste site ou do(s) seu(s) autor(es). Os comentários publicados através deste sistema são de exclusiva e integral responsabilidade e autoria dos leitores que dele fizerem uso. A administração deste site reserva-se, desde já, no direito de excluir comentários e textos que julgar ofensivos, difamatórios, caluniosos, preconceituosos ou de alguma forma prejudiciais a terceiros. Textos de caráter promocional ou inseridos no sistema sem a devida identificação do seu autor (nome completo e endereço válido de email) também poderão ser excluídos.