PplWare Mobile

Como criar um Website responsivo #3


Autor: Hugo Cura


  1. Sara says:

    Se no Artigo 1, colocar mais texto, por exemplo “Pequeno excerto…Pequeno excerto…Pequeno excerto…Pequeno excerto…Pequeno excerto…Pequeno excerto…” As janelas ficam desalinhadas. Terá que se colocar mais um vertical-align, para alinhar ao topo:
    home_box{
    ..
    vertical-align:top;
    }

  2. Serpa says:

    Não é por nada, mas se vão fazer um artigo sobre como fazer um site “responsive” , porque não usar demonstrar com o que há de moderno? Como as tags de html5, ex: header, nav, section, article e footer, (todas elas aplicariam-se bem aqui), e já agora porque não evitar o uso da tabela? A própria CSS faz com que o div(p ex) possa ser disposto como tabela(display:table-[row]-[cell].

    Depois insistir em fazer CSS inline, quando é uma prática não recomendada.

    Outra coisa, e agora em relação ao breakspoints, aqui é um ponto subjectivo, mas já que se está a fazer um tutorial, porque não os breakpoints standard ? Que são 1200/768/480/320px.

    Agora só em jeito de informação, o site passa no teste do Google, única e exclusivamente por ter meta tag do viewport.

  3. JJesus says:

    As tabelas é que eram desnecessárias

    • Diogo Calçada says:

      As minhas desculpas se não está de acordo, mas foi apenas no sentido de demonstrar como se faria utilizando tabelas. Uma vez que já tinha feito o mesmo acima, sem utilizar tabelas.

  4. Redin says:

    Para acompanhar…

  5. Fabio says:

    Isto em vídeo, feito por alguém do pplware semanalmente era brutal, isso e um canal de gameplays e reviews de componentes 😉

  6. João Dias says:

    Não querendo estar a complicar, permitam-me discordar, mas não existem breakpoints standard. Isso é uma falácia.

    Diogo, deves definir os teus breakpoints em função do teu conteúdo, não em função do bootstrap.

    Isso não é uma prática recomendável, porque defines em função de pré-definições de dispositivos e o problema é que depois os dispositivos que não se encaixam nesses breakpoints (ex: qualquer Android com densidade XXHDPI ou até o iPhone 6) ficam com um layout que não é o ideal.

    Portanto a minha sugestão é: comecem do mais pequeno e vão redimensionando o vosso browser até o conteúdo ficar uma treta. E a regra é: se fica uma treta, há um breakpoint a criar. Para além de criares um layout muito bem adaptado a dispositivos com ecrã mais pequeno, começas a tomar decisões relativamente ao teu conteúdo que depois te vão ser úteis em termos de performance, complexidade, etc.

    • João Dias says:

      Esquece, burrice minha, que não li aquela parte em falas disso. Apaga o comentário então.

    • Diogo Calçada says:

      Não tem problema nenhum, João.
      Eu apenas referi isso porque existe quem seja a favor dessa metodologia e por isso, eu decidi referir.
      O teu comentário só veio completar o artigo, não vejo sequer necessidade de ser removido o artigo! 🙂
      Obrigado pela tua participação.

  7. Cláudio Esperança says:

    Desculpa insistir na questão das tabelas, mas estas não devem mesmo ser utilizadas para dispor elementos num layout. Estas têm valor semântico e devem apenas ser utilizadas para apresentar informação num formato de tabular, tais como informações com relações entre si. Estas são lidas por tecnologias assistivas (tais como leitores de ecrã) de uma forma própria.

    A recomendação de utilizar tags da especifição HTML 5 é muito válida e penso qur deve ser tida em consideração em artigos futuros. Eu ainda iria mais longe e diria que se deveria utilizar os landmarks roles para as ARIA para marcar secções lógicas do site.

    Deixo ainda uma chamada de atenção: o projecto está a falhar mas validações automáticas na questão da acessibilidade (http://www.acessibilidade.gov.pt/accessmonitor/?cD04MDM4OTE,&wcag20), algo que torna o projeto não conforme com a lei vigente.

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.