Os 5 erros mais comuns que os desenvolvedores de HTML5 cometem: um guia para iniciantes

Já se passaram mais de 20 anos desde que Tim Berners-Lee e Robert Cailliau especificaram o HTML, que se tornou a linguagem de marcação padrão usada para construir a Internet. Desde então, a comunidade de desenvolvimento de HTML tem implorado por melhorias nessa linguagem, mas esse clamor foi ouvido principalmente por desenvolvedores de navegadores da Web que tentaram aliviar os problemas de HTML de seus colegas. Infelizmente, isso levou a ainda mais problemas, causando muitos problemas de compatibilidade entre navegadores e duplicação do trabalho de desenvolvimento. Ao longo desses 20 anos, o HTML foi atualizado 4 vezes, enquanto a maioria dos navegadores recebeu números de dois dígitos de grandes atualizações, além de vários pequenos patches.

O HTML5 deveria finalmente resolver nossos problemas e se tornar um padrão para governar todos eles (navegadores) . Esta foi provavelmente uma das tecnologias mais esperadas desde a criação da World Wide Web. Aconteceu? Finalmente conseguimos uma linguagem de marcação que será totalmente compatível com vários navegadores e funcionará em todas as plataformas de desktop e móveis, oferecendo todos os recursos que estávamos pedindo? Não sei! Apenas alguns dias atrás (16 de setembro de 2014), recebemos mais uma chamada para revisão do W3C, então a especificação HTML5 ainda está incompleta.

Esperançosamente, quando a especificação for finalizada um dia, os navegadores ainda não terão código obsoleto significativo e implementarão de maneira fácil e adequada ótimos recursos como Web Workers , vários elementos de áudio e vídeo sincronizados e outros componentes HTML5 que precisamos para um muito tempo.

No entanto, temos milhares de empresas que basearam seus negócios em HTML5 e estão indo muito bem. Há também muitos ótimos aplicativos e jogos baseados em HTML5 usados ​​por milhões de pessoas, então o sucesso é obviamente possível e HTML5 é, e continuará sendo, usado independentemente do status de sua especificação.

No entanto, a receita que mencionei pode facilmente explodir na nossa cara e, portanto, enfatizei alguns dos erros mais básicos do HTML5 que podem ser evitados. A maioria dos erros listados abaixo são consequência da implementação incompleta ou ausente de certos elementos HTML5 em diferentes navegadores, e esperamos que em um futuro próximo eles se tornem obsoletos. Até que isso aconteça, sugiro ler a lista e tê-la em mente ao construir seu próximo aplicativo HTML5, seja você um iniciante em HTML5 ou um veterinário experiente.

Erro comum nº 1: confiar no armazenamento local

Deixe-os comer bolo! Essa abordagem tem sido um fardo para os desenvolvedores há muito tempo. Devido ao medo razoavelmente sensato de violações de segurança e proteção de computadores, na “idade das trevas”, quando a Internet era temida por muitos, os aplicativos da Web podiam deixar quantidades excessivamente pequenas de dados nos computadores. É verdade que havia coisas como dados do usuário que “grandes mestres de navegadores da Microsoft(r)” nos deram, ou coisas como Objetos Compartilhados Locais em Flash, mas isso estava longe de ser perfeito.

Portanto, é razoável que um dos primeiros recursos básicos do HTML5 adotados pelos desenvolvedores tenha sido o Web Storage. No entanto, esteja alerta que o Web Storage não é seguro. É melhor do que usar cookies porque não será transmitido por fio, mas não será criptografado. Você definitivamente nunca deve armazenar tokens de segurança lá. Sua política de segurança nunca deve depender de dados armazenados no Web Storage, pois um usuário mal-intencionado pode modificar facilmente seus valores localStorage e sessionStorage a qualquer momento.

Para obter mais informações sobre o armazenamento na Web e como usá-lo, sugiro a leitura deste post.

Erro comum nº 2: esperar compatibilidade entre navegadores

HTML5 é muito mais do que uma simples linguagem de marcação. Ele amadureceu o suficiente para combinar o comportamento com o layout, e você deve considerar o HTML5 como HTML estendido com JavaScript avançado no topo. Se você olhar para todos os problemas que tivemos antes apenas para fazer uma combinação estática de HTML + CSS parecer idêntica em todos os navegadores, é justo supor que mais complexidade significará apenas mais esforço para garantir a compatibilidade entre navegadores.

A interpretação do HTML5 em diferentes navegadores está longe de ser idêntica, assim como aconteceu com o JavaScript. Todos os principais participantes da guerra de navegadores ajudaram na especificação HTML5, então é justo supor que os desvios entre navegadores devem diminuir com o tempo. Mas mesmo agora alguns navegadores decidiram ignorar completamente certos elementos HTML5, tornando muito difícil seguir uma linha de base e um conjunto comum de recursos. Se adicionarmos mais dispositivos e plataformas conectados à internet à equação, a situação fica ainda mais complicada, causando problemas com o HTML5.

Por exemplo, as Animações da Web são um ótimo recurso que é suportado apenas pelo Chrome e Opera, enquanto o recurso de Notificação da Web que permite alertar o usuário fora do contexto de uma página da Web sobre uma ocorrência, como a entrega de e-mail, é totalmente ignorado pelo Internet Explorer.

Para saber mais sobre os recursos do HTML5 e o suporte de diferentes navegadores, consulte o guia HTML5 em www.caniuse.com.

Portanto, o fato é que, embora o HTML5 seja novo e bem especificado, devemos esperar muitos problemas de compatibilidade entre navegadores e planejá-los com antecedência. Existem muitas lacunas que os navegadores precisam preencher, e é justo esperar que eles não consigam superar bem todas as diferenças entre as plataformas.

Erro comum nº 3: presumir alto desempenho

Independentemente do fato de o HTML5 ainda estar evoluindo, é uma tecnologia muito poderosa que tem muitas vantagens sobre as plataformas alternativas usadas antes de sua existência. Mas, com grande poder vem grande responsabilidade , especialmente para iniciantes em HTML5. O HTML5 foi adotado por todos os principais navegadores em plataformas de desktop e móveis. Tendo isso em mente, muitas equipes de desenvolvimento escolhem o HTML5 como sua plataforma preferida, esperando que seus aplicativos sejam executados igualmente em todos os navegadores. No entanto, assumir um desempenho sensato em plataformas de desktop e móveis apenas porque a especificação HTML5 diz isso, não é sensato. Muitas empresas (khm! Facebook khm!) colocaram suas apostas no HTML5 para sua plataforma móvel e sofreram com o HTML5 não funcionar como planejado.

Novamente, no entanto, existem algumas grandes empresas que dependem muito do HTML5. Basta olhar para os vários estúdios de desenvolvimento de jogos online que estão fazendo coisas incríveis enquanto levam o HTML5 e os navegadores ao seu limite. Obviamente, contanto que você esteja ciente dos problemas de desempenho e esteja trabalhando em torno deles, você pode estar em um ótimo lugar para criar aplicativos incríveis.

Erro comum nº 4: acessibilidade limitada

Web tornou-se uma parte muito importante de nossas vidas. Tornar os aplicativos acessíveis a pessoas que dependem de tecnologia assistiva é um tópico importante que muitas vezes é deixado de lado no desenvolvimento de software. O HTML5 tenta superar isso implementando alguns dos recursos avançados de acessibilidade. Mais do que alguns desenvolvedores aceitaram isso como suficiente e não gastaram muito tempo implementando opções adicionais de acessibilidade em seus aplicativos. Infelizmente, neste estágio, o HTML5 tem problemas que o impedem de disponibilizar seus aplicativos para todos e você deve investir mais tempo se quiser incluir uma gama maior de usuários.

Você pode verificar este local para obter mais informações sobre acessibilidade em HTML5 e o estado atual dos recursos de acessibilidade mais comuns.

Erro comum nº 5: não usar aprimoramentos do HTML5

O HTML5 ampliou significativamente o conjunto padrão de tags HTML/XHTML. Além de novas tags, temos algumas novas regras e comportamentos. Muitos desenvolvedores pegaram apenas alguns aprimoramentos e ignoraram alguns dos novos recursos muito interessantes do HTML5.

Uma das coisas mais legais do HTML5 é a validação do lado do cliente. Esse recurso foi provavelmente um dos primeiros elementos do HTML5 que os navegadores da web pegaram. Mas, infelizmente, você pode encontrar mais do que alguns desenvolvedores que adicionam o atributo novalidate aos seus formulários por padrão. As razões para fazer isso são razoáveis, e tenho certeza de que teremos um debate sobre isso. Devido à compatibilidade com versões anteriores, muitos aplicativos implementaram validadores JavaScript personalizados e ter validação pronta para uso pelos navegadores em cima disso é inconveniente. No entanto, não é muito difícil garantir que dois métodos de validação não colidirão, e padronizar a validação do usuário garantirá uma experiência comum enquanto ajuda a resolver os problemas de acessibilidade que mencionei anteriormente.

Outro ótimo recurso está relacionado à forma como a entrada do usuário é tratada no HTML5. Antes da chegada do HTML5, precisávamos manter todos os nossos campos de formulário contidos na tag <form></form> . Novos atributos de formulário tornam perfeitamente válido fazer algo assim:

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

Mesmo que lname não esteja dentro do formulário, ele será postado junto com fname .

Para obter mais informações sobre novos atributos e aprimoramentos de formulário, você pode verificar o Mozilla Developer Network.

Embrulhar

Eu entendo que os desenvolvedores da web são danos colaterais nas guerras de navegadores, pois muitos dos erros acima são uma consequência direta da implementação problemática do HTML5 em diferentes navegadores. No entanto, ainda é crucial que evitemos problemas comuns de HTML5 e gastemos algum tempo entendendo os novos recursos do HTML5. Assim que tivermos tudo sob controle, nossos aplicativos utilizarão grandes novos aprimoramentos e levarão a web para o próximo nível.