Desenvolvendo para Web, hora de testar meu HTML (utilizando Firefox)

Hora de testar meu HTML

Quando estamos desenvolvendo um código HTML testar é algo fundamental para sabermos se as coisas realmente estão ficando do modo em que planejamos. Acontece que não basta testar em apenas um navegador, e não adianta testar em uma só resolução estamos hoje vivendo uma época de grande diversidade de modos de acessar a internet e temos obrigação de atender bem o nosso usuário, esteja ele em um Notebook, Tablet ou Smartfone. 

A dica de hoje é TESTE MUITO o seu código e eu resolvi facilitar um pouco seus testes com uma ferramenta que simula em seu navegador as resoluções mais utilizadas pelas usuários e lhe permite ver como seu projeto vai se sair em cada um desses tamanhos de vídeos. Vamos lá ver como isso funciona então.

No navegador Firefox Complemento WEB DEVELOPER, uma ferramente bacana que lhe permite entre outras coisas visualizar seu projeto em tamanhos de vídeo diferentes, simulando um Smartfone ou Tablet por exemplo. Além dessa maravilhosa função ele ainda faz uma varredura em seu código CSS, HTML e Javascript e lhe indica se os mesmos possuem erros de sintaxe e se estão de acordo com a W3C (O World Wide Web Consortium é a principal organização de padronização da World Wide Web).

Como utilizar esse recurso:

• Instale o Componente em seu Firefox através do Menu ► Complementos, como na imagem a seguir:

• Digite o nome do complemento WEB DEVELOPER e digite Enter.

• Na imagem vimos que o componente que iremos utilizar é o primeiro da lista de complementos, clique em INSTALAR para instalar o componente e aguarde o processo.
• Após instalar o componente reinicie o navegador clicando em Reiniciar agora.

• Agora já estamos prontos para desfrutar dos recursos do componente a barra de ferramentas do componente aparece na imagem a seguir circulada em preto, se não aparecer clique com botão direito do mouse na barra de ferramentas do navegador e habilite a barra de ferramentas do WEB DEVELOPER.

• Do lado direito da barra de ferramentas do WEB DEVELOPER você terá acesso ao resultado da analise dos códigos HTML, CSS e Javascript que é analisado e se tiver erros teremos o x no lugar da marca v. Como na imagem abaixo:

• Em RESIZE podemos escolher outras resoluções para ver nosso projeto.

• Escolha a opção VIEW RESPONSIVE LAYOUTS para ver seu projeto em tamanhos de vídeos diferentes.

Firefox Componente Web Developer