Unconfigured Ad Widget

Collapse

Anúncio

Collapse
No announcement yet.

[Tutorial] Migrando do HTML para o XHTML

Collapse
X
 
  • Filter
  • Tempo
  • Show
Clear All
new posts

  • Font Size
    #1

    Tutorial [Tutorial] Migrando do HTML para o XHTML

    Migrando do HTML para o XHTML

    Primeiramente, o XHTML (eXtensible Hypertext Markup Language) foi desenvolvido como um HTML voltado ao desenvolvimento XML. O XML precisa de uma linguagem de formatação mais rígida: quando os navegadores encontram um erro no HTML comum, como uma tag

    sem o
    , o erro é "consertado" automaticamente e ainda sim o usuário consegue visualizar a página; já com o XML, um erro desses faz a aplicação parar.

    Além disso, cada navegador conserta o erro à sua maneira, o que significa que o que você vê funcionando num dispositivo pode virar uma bagunça em outro. Ou seja, o XHTML é a garantia de que seu site será exibido exatamente como você o desenvolveu, independente do dispositivo de saída - ou de se você trabalha com XML ou não. Isso evita o uso de hacks para corrigir bugs de navegadores (deixando a navegação mais rápida, já que o navegador não tem que processar essas correções) e ainda deixa seu código organizado para atualizações futuras.


    As diferenças na prática
    A primeira diferença é que todas as tags devem ser fechadas. No HTML, para separar um parágrafo do outro, você simplesmente colocava um

    entre eles, e funcionava. Como isso estava errado, isso não será validado no XHTML: um parágrafo deve vir entre um

    e um
    , como manda a boa e velha organização.


    Certo:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nunc at diam euismod rhoncus.

    Aliquam auctor laoreet dui. Nulla arcu arcu, placerat ut, consectetuer et, tempus eu, urna.


    Errado:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nunc at diam euismod rhoncus.

    Aliquam auctor laoreet dui. Nulla arcu arcu, placerat ut, consectetuer et, tempus eu, urna

    Alguns elementos já têm uma tag de fechamento, como

    e
    , e , etc. Em elementos sem tag de fechamento, usa-se uma barra no final, como
    , e

    Uma coisa que ainda me dá trabalho é que todas as tags e atributos devem estar em letras minúsculas. Eu, que tinha o vício de escrever tudo em maiúsculas porque achava visualmente organizado, ainda esbarro nos meus próprios erros. Mas no final o código realmente fica mais "leve" de se ler.

    Isso também vale para códigos de javascript: OnMouseOver deve ser substituído por onmouseover, por exemplo.

    Certo:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


    Errado:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


    Valores de atributos devem estar entre aspas, e a tag img deve, obrigatoriamente, ter o atributo alt. Assim, se o dispositivo de saída não exibir imagens, um texto alternativo com certeza irá substituí-la.

    Se o texto alternativo não se aplica a alguma imagem no seu site, você pode utilizar um espaço (alt=" ").

    Certo:

    foto

    Errado:



    Os elementos devem estar corretamente aninhados. Então se você abre um negrito dentro de um link, deve primeiro fechar o negrito e depois o link, fechando-os na ordem reversa, assim:

    Certo:

    Lorem ipsum dolor sit amet ...


    Errado:

    Lorem ipsum dolor sit amet ...


    Não esqueça da acentuação! Os caracteres acentuados devem ser substituídos pelos seus códigos, especialmente o caracter & (e comercial), que é substituído pelo & mesmo em links.

    Certo:

    Meu parágrafo tem acentuação e umlink


    Errado:

    Meu parágrafo tem acentuação e um link


    Mais uma regra é que o documento deve estar bem estruturado, com as tags principais (, e ) corretamente aninhadas e devidamente fechadas. A declaração DOCTYPE também é obrigatória e, por não ser uma tag propriamente dita, não precisa ser fechada nem estar em letras minúsculas.





    ...

    ...



    Nos elementos a, applet, form, frame, iframe, img e map o atributo name foi substituído pelo id.

    Certo:

    ancora

    Errado:

    ancora

    E, finalmente, não faça linhas de separação nos comentários com o caracter "-". Prefira *, = ou #, assim:

    Certo:


    Errado:



    Mas e as desvantagens?
    Bom, o XHTML não é suportado em navegadores antigos, como versões anteriores à 6 do IE. Mas, na prática, quando você migra do HTML para o XHTML num site comum só garante a organização do seu documento. Tags que agora são fechadas (como
    ) são interpretadas normalmente. Aqui vale o bom senso: consulte suas estatísticas de acesso, e se seus usuários ainda estiverem com os navegadores desatualizados aposte num HTML organizado.

    O importante é sempre manter seu código limpo, tomando cuidado com a semântica (ou seja, utilizando uma tag para o que ela foi feita, e não para "quebrar galhos"). Tendo essa preocupação, não importa se você resolver migrar para o XHTML ou preferir continuar no HTML, seus sites sempre serão acessíveis, independente do dispositivo.
    Créditos: Erika Sarti.


    []'4
    Last edited by Alison_PC; 16-02-2010, 21:03.
    Mesmo longe, eu estou perto. Guia do Hacker 4ever.

  • Font Size
    #2
    Pelo post #Expl0it, Parabéns.
    "Se não puder se destacar pelo talento, vença pelo esforço."

    Comment


    • Font Size
      #3
      Agradecimento!

      Mandou bem #Expl0it valeu pelas dicas ajudou a galera continui assim!

      Comment

      X
      Working...
      X