HTML5

HTML5 vs HTML4 – Parte 2

Atenção: Este artigo/tutorial foi escrito por Ruan Nunes, que é um colaborador desse blog. Seu conteúdo é de responsabilidade do autor.

Vejamos, esta na hora da segunda parte deste tutorial!

Para encurtar os posts, irei colocar apenas os trechos do código necessários, vocês devem acompanhar com uma copia dos arquivos no seu PC, de preferência. No futuro, vou manter os códigos com suas ultimas atualizações em um repositório no GitHub.

Na primeira parte, construímos o arquivo HTML, vazio, hoje começaremos a mexer no body do documento, e colocar tudo que aparecera no site.

Como sou muito fã das novidades do HTML5, vou continuar postando códigos comparativos, ainda mais na parte de formulários, onde vejo as mais belas inovações, apesar de pouco compatíveis por enquanto.

Vamos ao nosso formulário, primeiro, claro, em HTML4:

Validando Formularios com JS

Se prestarem atenção, tem coisas faltando nesse formulário, como o action na tag form. Outro defeito deste formulário é: a pessoa pode enviar o que quiser, nada, letras, qualquer coisa, mas para o funcionamento da nossa aplicação, devemos aceitar somente números, sendo que o coeficiente A necessariamente deve ser diferente de 0.

Mas não se preocupem, um “pequeno” script em JavaScript colocado no head do nosso documento pode resolver nossos problemas, e evitar muita dor de cabeça!!! É o seguinte:

Lembrando que, para inserir scripts diretamente dentro do HTML (sem fazer referência à um arquivo), você precisa usar a tag script, dessa forma:

Alem disso, faremos uma pequena mudança no form, alterando o botão de envio:

Isso nada mais faz do que um botão, que quando clicado, chame a função validar() do JavaScript. Em outros artigos postarei outros tipos de validação, não digo melhores, por que cada tipo pode ser melhor em determinada situação.

Viu? eu disse que era simples, por enquanto nosso formulário não faz nada, alem de verificar se o que inserimos nele é valido.

Atenção: não é recomendado definir eventos DOM (onclick, onsubmit e etc.) diretamente no HTML, o ideal seria fazer esse vínculo através do Javascript também, vide:

Novidades no HTML5

Agora, vamos ao nosso mesmo formulário, só que em HTML5:

Simples não? O atributo type [dos inputs] do HTML5, ganha novos valores, como o number, que obriga o usuário a digitar números, e o atributo required, faz o campo ser obrigatório.

Para nossa infelicidade, por enquanto o tipo number ainda não é compatível com com todos os navegadores (leia-se, Internet Explorer), mas isso vem mudando. Existem muitos outros tipos de campo, como por exemplo:

  • Range: cria uma barra de rolagem para números, geralmente se usa junto com os atributos min e max que definem limites de valores;
  • Color: cria uma paleta de cores para o usuário escolher alguma;
  • Date: cria um calendário onde o usuário seleciona uma data especifica, muito útil;

Entre muitos outros… Recomendo a leitura dos artigos sobre HTML5 na W3Schools, mas atenção: use o W3Schools com muito cuidado! Vide: http://w3fools.com/

Sobre a questão de compatibilidade dos recursos do HTML5, procure sobre Modernizr, HTML5Shiv e Polyfills.

Mas nem tudo são flores, por enquanto ainda será necessário verificar se o valor do coefA é igual a zero, ou seja, usaremos o mesmo script anterior, porem só o que necessitamos agora:

Se estivermos procurando apenas valores maiores que zero, poderíamos ter feito essa “regra” diretamente no campo, sem a necessidade de JavaScript:

Conclusão

Bom pessoal, no próximo post estou em duvida se ensinarei a fazer o calculo das equações, ou dar uma pequena introdução sobre o CSS, o que é mais importante? O  aplicativo ser bonito, ou funcionar? Lógico que funcionar, mas ninguém gosta de apps feios!

Até a próxima, abraços! :)

13 thoughts on “HTML5 vs HTML4 – Parte 2

  1. Mauro Joel Schütz

    As tags estão no padrão do XHTML no caso não deveria ser considerado um HTML4, já que ele da suporte a leitores de XML, algumas regras do HTML4 são muito parecidas com a HTML5, já que não existe a necessidade de usar / no final de tags únicas e os atributos não precisam ter valores (coisa que é obrigatória no XHTML, menos no de transição).

  2. Lukas bady

    Sou um programador infeliz, porque meu país conseguiu fazer um sistema melhor que o meu! Sim, é sério!

    Imagine você, um sistema que, selecione quem vai morar nas ruas, passar fome, ser excluído da sociedade, utilizar o SUS, trabalhar metade do ano para pagar impostos, define que as pessoas do nordeste vão passar sede, alguns vivendo com apenas R$30,00 por mês.
    – Espere um pouco, já não consigo pensar. É muito revolucionário. Conseguir dar um futuro assim pra alguém?
    Nossa como um sistema consegue isso!
    Será que existe engenharia reversa para isso?

  3. Enistay

    “use o W3Schools com muito cuidado” Qual o problema com a W3Schools? A possibilidade de copiar e colar os exemplos.

    Quero ver a parte 3! Valeu

  4. Renato Corrêa

    Grande mestre Thiago Belem. Se tu soubesse o quanto os teus conhecimento me ajudaram tu te surpreenderia. Obrigado por dividi-los conosco.

  5. Bruno Agne

    eu tenho uma dúvida, o Que LIMITA a microsoft de criar uma atualização para o IE 8, que faça com que ele funcione como o IE 10? ou uma versão do IE 10 para Win XP? (digo limitação tecnológica, não financeira ^^)

    1. Walter Déda

      Porque a Microsoft é uma empresa comercial,com fins lucrativos, e, além disso, desenvolver uma atualização para dar suporte a um sistema operacional que deverá ser “aposentado” no próximo ano, é um verdadeiro contra contrassenso do ponto de vista comerical, seja lá qual for o ramo e tamanho da empresa. Se você ainda utiliza o XP por ser uma empresa, acredito que possa haver uma justificativa no que se refere aos custos, mas, mesmo assim, há riscos reais de que o uso de tecnologia ultrapassada reflita-se na empresa. Se é para uso individual, provavelmente é uma questão de gosto… que não se discute.

  6. Josué

    Ainda não acho uma boa idéia a utilização do HTML5. Ele muito bom para navegadores que o suportam como Chrome, Opera, Safari, Firefox e IE10, mas muita gente ainda utiliza o IE8 e o IE9 (tanto que o IE e mais utilizado que o Firefox) e ambos IEs são muito fracos para o HTML5.

    Se você criar um projeto intero com HTML5, todos os usuários do IE seram afetos pela falta de suporte e para resolver o problema você precisar de scripts externos (que cá entre nós vai dar na mesma se você estivesse utilizando o HTML4).

    Sendo assim, em quanto a maioria dos usuários não tem acesso ao IE10, prefiro utilizar o HTML4, e criar meus scripts normalmente.

    1. Verzola

      Amigo, mas pense da seguinte forma: se continuarmos desenvolvendo para tecnologias atrasadas e browsers ultrapassados, não estararíamos deixando de olhar para frente e nos atrasando também?
      Para mim, a ovelha negra desta história é o IE, visto que SEMPRE há problemas relacionados a ele. Acho errado ficar olhando para trás com tantos recursos modernos e que pretendem revolucionar a web.
      A Microsoft não fez mais do que a obrigação lançando uma versão razoavelmente decente do Internet Explorer.
      Agora pobre é de quem ainda utiliza versões anteriores á esta. Não sabem o que estão perdendo.

  7. Mcr Conrado

    posso falar uma coisa? vcs ferraram minha vida… minha vida inteira foi uma mentira? rsrs que negocio é esse de w3fools??? nunca mais entro no w3schools …como posso confiar?

Comments are closed.