1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Boas práticas de HTML

Discussão em 'Web Development' iniciada por eurobot, 15 de Abril de 2012. (Respostas: 44; Visualizações: 3147)

  1. eurobot

    eurobot Power Member

    Boas,
    À medida que vou aprendendo html vou encontrando ferramentas que acabam por se sobrepor em certas tarefas, o que me causa alguma indecisão na altura de escolher entre uma delas.
    P.e. eu consigo fazer um template em html tanto com div's como com tables e até com frames, a minha duvida é, qual destas opções é melhor em termos de SEO, usabilidade e performance?
    E qual deles é o mais prático de usar em grande escala?
     
  2. esaramago123

    esaramago123 Power Member

    DIV, sem qualquer dúvida. É melhor em todos os termos.

    Aliás, com o HTML5 nem deves usar só DIV. Tens, por exemplo, a tag <header> para o cabeçalho, a <footer> para o rodapé, etc. Assim.
    Estas tags não funcionam nas versões mais antigas do Internet Explorer, mas se usares o html5shiv passam a funcionar.
     
  3. eurobot

    eurobot Power Member

    Ok então vou ler um pouco mais sobre divs, visto que o w3schools não os cobre muito extensivamente.
    Btw, em relação a SEO no geral, existem alguns princípios base?
     
  4. Isildur

    Isildur Power Member

    A W3Schools é uma palhaçada por completo!

    Até já fizeram um site para demover as pessoas de consultarem esse "site" devido aos erros que lá existem!

    Um bom site de referência é este
     
  5. Isildur

    Isildur Power Member

    Não é verdade...

    Há que separar elementos de apresentação de dados (table) de elementos de estrutura de página!

    Se os dados a apresentar forem dados tabulares, então o elemento <table> é o indicado.
    Caso se queira estruturar a página, devem-se utilizar <div>'s
     
  6. kronozord

    kronozord Power Member

    Ou o modernizr que já tem o anteriror incluido + "emulação" de css3!
     
  7. esaramago123

    esaramago123 Power Member

    Sim, obviamente. Mas em termos de estrutura geral é div.
     
  8. eurobot

    eurobot Power Member

    Wow não fazia a mínima ideia, sempre vi o w3schools a ser recomendado, mesmo por aqui, obrigado, já fiz bookmark a algumas das sources apresentadas no w3fools.
    Em relação aos DIV's e tables, referia-me mesmo ao layout/estrutura da página.
    Outra coisa, uma vantagem que via nos frames é não ter que repetir o mesmo código várias vezes, p.e. se tivesse uma coluna com um Arquivo num blog, com os Frames só precisaria de criar um ficheiro com esse arquivo e inclui-lo nas diferentes pags. como funciona isto em div? Existe alguma espécie de modularidade nesse sentido?
     
  9. esaramago123

    esaramago123 Power Member

    Sim, isso é muito útil, mas não precisas de fazer com frames.
    Pesquisa sobre "include PHP". Mudas a extensão do ficheiro .html para .php e em vez de chamares o frame chamas <?php include("ficheiro_a_incluir"); ?>
    Se tiveres ajuda diz.
     
  10. ImAnAlcoholic

    ImAnAlcoholic Power Member

    aqui no forum, há tanta gente a recomendar o w3schools que se torna impossivel mostrar o w3fools....

    Sim existe modularidade no sentido de divs e nao repetir código, para isso usam-se templates.
    Templates não no sentido de sites pré-feitos, mas sim bocados de código html que podes implementar na página com javascript ou php.

    Tens aqui um slideshow sobre templates em Javascript http://www.slideshare.net/garann/using-templates-to-achieve-awesomer-architecture
    no entanto a maioria está mais a vontade com templates em PHP, a escolha de um ou de outro, depende um bocado do genero de site que queres fazer.

    Também existe um uso próprio nos frames, mas esse uso não é aquele que estás a usar de certeza.
    As frames devem ser usadas, quando estás a carregar conteudos de terceiros que não queres que esse conteudo interfira ou ponha em perigo os conteudos da tua página (sandbox)
     
  11. ImAnAlcoholic

    ImAnAlcoholic Power Member

    Sempre vi o include() como uma forma barata de fazer templates... existem ferramentas próprias para esse fim como o twig (http://twig.sensiolabs.org/) ou smarty (http://www.smarty.net/)
     
  12. Isildur

    Isildur Power Member

    Sim é verdade...
    Infelizmente, muita gente não sabe o quão errado e desactualizado está o W3Schools...

    Cabe-nos a nós que conhecemos espalhar a palavra :)
     
  13. eurobot

    eurobot Power Member

    Outra pergunta de boas práticas, qual é a forma mais aceite de cortar o texto em várias linhas? Não me parece que fazer um elemento <p> novo para cada linha seja boa prática, e também já li que os <br /> são vulgarmente over-used, qual o método correcto? E existe alguma forma de automatizar isto? Tipo especificar um numero máximo da caracteres por linha?
     
  14. rosepwr

    rosepwr Power Member

    Quando se fala de parágrafos, o indicado é mesmo o <p>.
     
  15. eurobot

    eurobot Power Member

    Não estou a falar em parágrafos mas só em linhas novas, um parágrafo pode ter mais que uma linha, como fazer essa divisão?
     
  16. anjo2

    anjo2 Power Member

    Como assim mais que uma linha? tu num div com max width, quando ele chega ao fim da div muda de linha.
     
  17. eurobot

    eurobot Power Member

    Solved :facepalm:
    Eu já tinha estudado os básicos de html algumas vezes acabando sempre por desistir, mas desta vez resolvi começar um projecto prático para me motivar e para poder fazer alguma experimentação mais concreta, portanto resolvi fazer um blog (sem usar CMS) nenhum, a ideia é primeiro fazer algo estático (construir um template vá) e depois de ter uma ideia de como o blog vai parecer e comportar, criar o respectivo backoffice, o que acontece é que escrevi dois posts de introdução para ir moldando o blog a volta de algo em concreto, e à medida que ia aprendendo/relembrando contextos ia inseri-los no blog, só que assim que comecei com isto, deparei-me com uma linha imparável de texto e pus-me a pôr <br /> às dezenas para obter alguma formatação, isto antes de estudar os div's (que já conhecia mas não sei usar, não sabia p.e. que tinha um atributo de max width, se bem que calculasse que fosse por aí),
    Muito obrigado
     
  18. ImAnAlcoholic

    ImAnAlcoholic Power Member

    Tal como o anjo2 respondeu =P

    Seja como for, so para acrescentar informação util... existe a tag de <wbr> que basicamente é algo tipo "Sr. browser, se achares por bem, podes colocar aqui um line-break para o texto ficar bonito, caso contrário deixa ficar o texto corrido"
    Mais informação http://www.quirksmode.org/oddsandends/wbr.html =)
     
  19. esaramago123

    esaramago123 Power Member

    Já que se fala aqui de boas práticas, diz-se que as tags big, small, u, b, i não devem ser usadas. Que devemos usar css na sua vez.

    Fontes:
    http://www.pitstopmedia.com/sem/big-small-tag-seo
    http://htmlhelp.com/reference/wilbur/font/big.html
    http://www.w3schools.com/tags/tag_font_style.asp (peço desculpa, mas acho que nesta página não há erro nenhum eheh)

    Em alguns casos uso partes dos <p> com a fonte mais pequena e a tag <small> parece-me ser excelente para isso.

    ex:
    Código:
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis fringilla erat at gravida. [COLOR=#ff0000]<small>[/COLOR]Proin  suscipit elit at elit tristique pharetra[COLOR=#ff0000]</small>[/COLOR].</p>
    Com CSS teria de criar uma class e provavelmente usar um <span>. Mas se a tag <small> já existe, para quê complicar?
    Embora no caso da tag <big> se possa confundir com o <h6>, o mesmo se passa com as outras tags.
     
  20. eurobot

    eurobot Power Member

    Eu acho que isso tem a ver com o facto de o html dever ser sobre content e não style, portanto no caso do b e do i devem ser usados antes o <em> e o <strong> que são renderizados pelos browsers como italico e bold, por definição, mas que falam sobre o conteúdo do elemento, e não sobre o seu estilo.
    Mas também não vejo alternativa viável a tag small p.e.
     

Partilhar esta Página