Introdução ao HTML5
Postado por: Pedro Rogério em
Quando o W3C anunciou que estava deixando de trabalhar no XHTML2 em favor da nova versão do HTML, que então seria o HTML5, a notícia caiu como uma bomba na comunidade de desenvolvimento web. HTML5 então a partir de agora seria o futuro oficial do desenvolvimento web basedo em padrões abertos. O HTML5, com sua pletora de novas funcionalidades, chegou a ser certificado como o único desafiante legítimo para tecnologias proprietárias como o Flash da Adobe, o Silverlight da Microsoft, JavaFX e Sun. Utilizar HTML5 a partir de agora então seria excitante não?
É verdade, com os novos elementos, que valorizam a semântica, incluindo as tags nav, header, section, aside, e footer, o desenvolvimento para a web com HTML5 a partir de agora seria estar em um nível superior. As novidades não acabam por aí, dentre todas, podemos citar as seguintes:
- Utilização de um plugin gratuito de áudio e vídeo via tags.
- Elemento <canvas> para desenhos dinâmicos.
- Drag and Drop de elementos.
- Cross-document e cross-domain messages.
- Histórico de navegação em Ajax.
- Geolocation API.
- Network status (online/offline).
- Maior controle de dados sobre formulários.
- contentEditable – Editor rico de conteúdo.
- Armazenamento de dados no cliente.
- Web worker threads.
Como viram, o HTML5 causa uma mudança drástica no desenvolvimento, apoiando normas abertas que expõem tecnologias subjacentes permitindo a integração, inovação e desenvolvimento de aplicações e serviços complexos facilmente.
Por onde começar?
Se você se sentiu interessando em migrar para o HTML5, ficou entusiasmado com as novas APIs, não basta então agora simplesmente alterar o doctype de sua página HTML para <!DOCTYPE html> que seu site não vai estar em HTML5 (como ando vendo por aí). Existem várias outras tags que você pode e deve utilizar:
- <article>: Define um artigo.
- <aside>: Define algum conteúdo relacionado ao artigo.
- <audio>: Define um streaming de áudio em um documento HTML
- <canvas>: Define a criação de gráficos em uma página web
- <command>: Define um botão de comando, como um radiobutton, uma caixa de seleção ou um botão.
- <datagrid>: Define uma lista de dados selecionáveis. O datagrid é exibido como uma árvore.
- <datalist>: Define uma lista de dados selecionáveis. Utilize esse elemento juntamente com o elemento input, para fazer uma lista suspensa para um valor de entrada.
- <datatemplate>: Define um recipiente para o modelo de dados. Deve conter elementos filho que são <rule> para definir um modelo.
- <details>: define os detalhes de um elemento, no qual o usuário pode ver, e clicar para ocultar.
- <embed>: Utilizado para incorporar conteúdo no HTML, atuando como um plugin.
- <eventsource>: Define um destino para eventos enviados por um servidor.
- <figure>: Especifica ilustrações, imagens, fotos, associado juntamente com alguma legenda.
- <footer>: Define o rodapé de uma seção ou documento. Normalmente, contém o nome do autor, data em que o documento foi escrito e / ou informações de contato.
- <header>: Define o cabeçalho de uma seção ou documento.
- <mark>: Define texto marcado. Utilize a tag <mark> se você quiser destacar partes do seu texto
- <meter>: Define uma medição. Usado apenas para medições com conhecimento de um valor mínimo e um valor máximo.
- <nav>: Define uma seção de links de navegação.
- <nest>: Define o ponto de incício para criação de elementos em um <datatemplate>, utilizado em conjunto com o elemento <rule>.
- <output>: Define a saída de diferentes tipos de dados, por exemplo, o cálculo efetuado por algum script.
- <progress>: Define o progresso de uma tarefa de qualquer tipo.
- <rule>: Define as regras para atualização de um datatemplate. Usado em conjunto com os elementos <datatemplate> e <nest>.
- <section>: Define as seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.
- <source>: Define recursos para elementos de mídia, como <audio> e <video>.
- <time>: Define tempo ou data, ou ambos.
- <video>: Define vídeo, como um clipe de filme ou vídeo de outros fluxos.
Semântica
Essa é a parte que muda drasticamente com o HTML5 a forma que você vai estruturar seus documentos HTML. Incluídos no quadro acima, esses elementos são os seguintes:
- <nav>
- <section>
- <article>
- <header>
- <footer>
- <article>
Essas tags irão substituir a utilização de muitas divs em seu documento, por exemplo, ao invés de utilizar <div class=”header”> você pode utilizar simplesmente utilizar a tag <header>.
HTML5 – Yes, we can
Você deve estar se perguntando: “Todos os browsers já suportam a especificação?”. Não, todos os browsers exceto o Internet Explorer já suportam o HTML5. Como então eu posso fazer funcionar HTML5 no Internet Explorer?. Simples, existe um JavaScript que você simplesmente o insere no topo de sua página e ele começará a entender as novas tags HTML. Os céticos dizem que irão esperar o Internet Explorer um dia ter suporte para então começar a utilizar, mas sigam o meu raciocínio:
O Internet Explorer 6 existe desde 2001, lá se vão 8 anos de sua existência, supondo que a partir de hoje ele deixe de ser utilizado, temos aí o Internet Explorer 7, que também não possui suporte a HTML5. Vamos acrescentar então mais 8 anos de existência do mesmo a nossa linha do tempo, portanto, em 2017 o IE7 deixaria de existir, mas então teríamos ainda uma pedra no sapato, o IE8, que também não tem suporte a HTML5.
Mesmo que amanhã a MIcrosoft lance uma nova versão do Internet Explorer que tenha total suporte a HTML5, você deverá utilizar de outras alternativas para que seus documentos HTML funcionem em versões antigas do browser. Se você não começar a utilizar HTML5 hoje, não espere então que isso aconteça nos próximos 20 anos, pois a Microsoft não irá liberar updates para suporte a HTML5 em seus browsers antigos, basta ter um QI maior que 10 para saber disso.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Sem dúvida é um salto muito grande na forma de como desenvolve(re)mos websites. Mas a partir de qdo será seguro implementá-lo? Como podemos saber se o q estamos escrevendo (desenvolvendo) em HTML5 vai “rodar” no client-side? Receio q por um longo período, ainda, teremos q fazer uso de tags condicionais não só para diferentes browsers mas tb para versões de linguagem.
Poxa, to na angustia de usar HTML5.
Mas por enquanto ficarei só na vontade ainda, porque 35% dos usuários do site que do manutenção ainda estão no IEca6
+1.
Cara, estou nessa também… Estou finalizando um portal da cidade onde eu moro. Queria fazer com HTML5, mas quase TODAS as lan houses só tem ie6 instalado….
+1 de novo.
Não adianta, todo mundo que mexe com site, vai ver que 80% dos visitantes é IE, o que é uma tristeza.
A solução é aplicar links rápidos para download de navegadores atualizados(firefox, safari, opera, chrome… qualquer coisa). mas mesmo assim, tem que lembrar que dependendo do publico que tu trabalha, tem gente que só olha as imagens e nada de ler.
Então acaba não adiantando muito.
Depois dessa conta que o Pedro fez da linha do tempo para usar HTML 5, mas alguem discorda que já podemos utilizar? Vamos ficar na dependencia da Microsoft para poder evoluir?
Eu estou desenvolvendo com moderação, mas estou. :).
Grande texto Pedro, abraços.
Valeu Pedro por mais texto sobre HTML5, vamos começar a usar sim é claro!
Yes, we can.
Estou satisfeito com XHTML. Usar HTML5 comercialmente só daqui um tempo mesmo. Por enquanto só em projetos pessoais.
Mas com certeza é muito obter novas informações sobre HTML5. Mas eu estou muito mais ansioso com CSS3. Trocar por não é tão importante quanto trocar uma imagem por uma declaração CSS.
rsrsrs…
Trocar div class=”header” por header não é tão importante quanto trocar imagens por uma declaração CSS.
Pedro Rogério meu velho parceiro de blog.
Muito interessante o artigo contudo gostaria de acresentar alguns pensamentos para reflexão dos nossos leitores e por que não? botar mais lenha na fogueira.
Há um consenso geral de que a falta de suporte ao HTML5 pelo IE não é motivo para restringir seu uso. Eu também concordo com esta afirmativa.
Mas, tendo resolvido o problema do IE com JavaScript e considerando que é uma ótima solução eu gostaria de lembrar que há outra forte condicionante que inibe o uso da HTML5 já.
A euforia geral que tomou conta de nós, motivada pelas espetaculares funcionalidades e poder semântico da HTML5 nos faz, com muita razão, ansiar por usar HTML5 o quanto antes.
Contudo não deixemos a euforia nos cegar e deixar de ver que a Especificação da HTML5 é totalmente instável e nada pode ser tomado como definitivo.
O seu artigo fornece um belo exemplo do perigo de usar HTML5 já.
Você cita o elemento <datagrid>.Pois bem, este elemento foi criado na última semana de abril de 2009 e abandonado na última semana de agosto de 2009. Teve uma vida útil de 4 meses e você ainda cita ele como ativo.
Outro elemento que você cita e não mais existe é o elemento <nest>.
Não vai aqui nenhuma intenção de desmerecer seu artigo, que repito está ótimo ao apresentar uma visão do problema, mas a intenção é ressaltar o seguinte: se você que está antenado e ligado na HTML5 usou elmentos não mais existentes imagine desenvolver um site com elementos que podem desaparecer amanhã.
Quem me garante que <datagrid> e <nest> não mais voltarão ou que <header> e <nav> não sumirão?
Resumindo: O problema não é o IE e sim a instabilidade da Especificação.
Lembre-se que o W3C dizia que não mais haveria HTML e o futuro da Web era a XHTML.
Devemos esperar? ou vamos usar?
Pelo jeito a usabilidade foi pras cucuias! Sou Desginer e continuo sem o update. Ainda não é hora. Bom quando temos fundamentos. Lembrando que o trabalho de pesquisa é muito importante antes de dar o primeiro passo. Sem contar com a consulta plena ao W3C.
Abraços,
Tu é o que? Designer?
Vai estudar semiótica – gestalt , um pouco sobre a escola de bauhaus , escola de uml, antes de falar que é Designer..
Não envergonhe a nossa classe, que é tao desvalorizada.
O html5 chegou com uma proposta muito interessante, porém como disse o Maujor ainda é cedo para sair fazendo sites com essa nova especificação que ainda não 100% definida. O custo com re-trabalhos pode ser muito grande.
Acredito que o html5 deve ser usado de forma experimental por enquanto. No caso deste blog acredito que foi muito bem empregado e serve até para despertar a curiosidade dos desenvolvedores.
Se pararmos para analizar bem a proposta do html5 é melhorar a semântica certo? Isso vai facilitar em diversos aspectos de acessibilidade e organização da informação. Porém o que eu pressuponho é que os leitores de tela bem como os motores de busca só iram considerar tags do html5 como relevantes, para organizar a informação, quando houver uma especificação do W3c menos vulnerável a mudanças. O que pelo jeito ainda não é uma realidade.
O debate está ótimo e já dura dias \o/
mas eu só vou começar a usar comercialmente html5 quandoe stivear 100% estável e de uso mundial.
;>
Bom, somando a idéia do maujor. Não precisamos esperar os longo anos para desenvolver em HTML 5. Mas talvez esperar por pouco tempo o W3C definir.
Retrabalhar em sites entregues e aprovados de clientes para consertar tags que já não existem é um disperdicio de tempo e dinheiro.
Muito bom o artigo, gostei.
não sou tão antenado quanto o Pedro e o Maujor, as unicas informações que tenho são através dos próprios, mais minha opinião é uma só; assim como a do Ralf, só vou usar quando for uma recomendação do W3C, se isso chegar a acontecer.
queria saber onde foi parar o xhtml2 ?
Html 5? Not so fast…
Se é mto estranho cara…
Conhecer as ferramentas é uma coisa…
aplicalas em fase de teste é viagem.
Reestudar o lance quantas vezes?
Eu entendo muito bem a preocupação do Maujor, mas não acredito que algumas tags que são soluções muito bem vindas irão sumir como:
: Define um artigo.
: Define algum conteúdo relacionado ao artigo.
: Define o rodapé de uma seção ou documento. Normalmente, contém o nome do autor, data em que o documento foi escrito e / ou informações de contato.
: Define o cabeçalho de uma seção ou documento.
: Define uma seção de links de navegação.
: Define as seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.
Essas tags eu considero que sera o basico do html5 não irão sumir e isso aliado à solução de javascript colocado aqui da na minha opinião credenciais para o uso ja.
Agora as outras tags talvez vale a pena esperar.
É temerário fazer cosiderações sobre o futuro deste ou daquele elemento da HTML5 e baseado nisto sair usando o elemento.
Afirmar que <header>, <section> e outros não sumirão ou sumirão é puro palpite e *achismo*, sem qualquer fundamento convincente.
A própria semântica dos elementos vem mudando. Há menos de um mês alterou-se a definição de <nav> e mudou-se o seu enfoque de emprego com o elemento <footer>.
Continue estudando HTML5 e tire suas conclusões.
valeu
ops eu usei as tags referentes no comentário são
* nav
* section
* article
* header
* footer
* article
Por um lado o Majour tem razão. É cedo demais para acreditar nas novas tags, mas pensando muito em não utilizar, ninguém terá conhecimento, fontes para estudo e materiais para desenvolvimento. A tecnologia avança por segundo e temos que fazer a nossa parte. O importante é vermos que os navegadores ( tirando o IE ) estão atualizando seus produtos para ter compatibilidade com as novas tecnologias, a W3C definindo os padrões web e se não utilizarmos não terá os Produtos derivados dessas novas funcionalidades. Se não houver uso, onde poderemos tirar nossas dúvidas sobre HTML5? Não sou burro, mas adoro e acho muito necessário a visualização de um aplicativo, seja ele um site, um programa para eu poder usar. No meu caso e de muitas outras pessoas, os códigos prontos para estudo são extremamente necessários para tirarmos nossas dúvidas. Não é nada precipitado usar as novas tags, mas é necessário atualização da nossa parte no caso de um código não ser utilizado mais, alterar-mos o nosso código fonte, sempre estar atualizado com as modificações. Trabalho teremos e muito, mas é isso que um desenvolvedor deve cuidar, do código. Usar HTML5 é sempre estar acessando as modificações da linguagem, assim como você faz em qualquer site que presta serviços, estando atento as modificações. Meu conselho: Use HTML5, saiba XHTML mas não esqueca que toda linguagem passa por atualização e modificação. Esteja atualizado e use o que for melhor para o usuário do seu site.
Se falei besteria me desculpem mas tanto o Pedro como o Majour são referências de peso em minha profissão. Tudo que sei foi através de conteúdos disponibilizados por eles. Grato a todos! abraço xandyn
o Post foi bem colocadao, mas concordo plenamente com o comentário do Maujor, é a voz da experiencia! tbm vou esperar esta idéia amadurecer e ter mais deficições antes de sair usando.
http://twitter.com/jquerybrasil
Pedro excelente artigo! Anseio pelo HTML 5, porém meu pensamento é compatível com o do Maujor. Precisamos ter a concretização da especificação para trabalharmos com mais segurança, afinal não seria viável utilizar de algo não finalizado.
Abraço!
Bem sobre o ultimo ponto de atualizações do IE, acredito que não é bem assim. O problema não é só a falta de atualização e conhecimento dos usuarios e sim quase uma decada de windows xp pirata rodando na mão de todo mundo com IE6 embarcado. Conforme as pessoas forem migrando para versões mais novas do windows você vai passar a ter a versão correspondente do IE como dominante.
Mais cedo ou mais tarde o HTML5 irá se tornar o padrão dominante, pelo menos enquanto não surgir um melhor. E quem desde já estiver familiarizado com ele terá vantagens no futuro.
Muito bom seu artigo, e a do qi 10 foi a sua melhor de todas heheh