Como aprender web design com seus erros

A web não é feita de uma única estrutura monolítica. É muito mais difícil aprender todas as peças que compõem tudo o que vemos na internet por causa de sua modularidade.

Qualquer pessoa está fadada a cometer erros que retardam o tempo de desenvolvimento do seu programa ou introduzem bugs no seu programa. Não só isso, mas alguns tipos de erros o colocam em desvantagem quando você está procurando um emprego.

As práticas recomendadas existem para garantir que o menor número possível de problemas surja ao projetar seu site ou lançá-lo em produção. Aqui estão os cinco erros mais comuns que os desenvolvedores web juniores cometem e como evitá-los.

Confiando demais em jQuery

jQuery é de longe o framework JavaScript mais popular do mundo. Adotá-lo em seu projeto assim que você o criou pode parecer tentador, mas não tenha tanta pressa.

Embora o jQuery forneça muitos métodos convenientes para acelerar o desenvolvimento da Web, é importante não usá-lo muito. Novos desenvolvedores web quase sempre cometem o erro de entender os métodos de API do jQuery ao invés de como eles funcionam por baixo.

Muitos empregadores consideram o jQuery uma responsabilidade em vez de algo agradável de se ter, porque alguns desenvolvedores não conseguem entender como o JavaScript funciona completamente.

Não há nada de errado em usar jQuery. Se puder, acostume-se a usar métodos JavaScript por conta própria. Confie apenas no jQuery para métodos de conveniência que, de outra forma, levariam um tempo para serem implementados.

Confiar demais em frameworks CSS

Estruturas CSS como Semantic UI e Bootstrap podem economizar muito tempo. Eles eliminam a necessidade de estilo manual e incorporam design responsivo dentro do seu aplicativo.

Assim como o jQuery, no entanto, é fácil ser sugado para o ciclo de nunca escrever seu próprio código CSS. No final do dia, seu site parecerá genérico e semi-pronto. No extremo das coisas, pode até parecer uma dúzia de outros sites que tiveram a mesma ideia que você.

Se você não é um especialista em escrever um código CSS, você terá a capacidade de ler manuais, encontrar um mentor, que fornecerá as informações necessárias, como um guia de pesquisa escreverá um trabalho de pesquisa para mim e fornecerá você com uma ajuda boa e qualitativa. Existem diferentes frameworks que podem ser mais intuitivos para escrever código.

Frameworks como o Bootstrap existem para facilitar sua vida . Para evitar a dependência excessiva, aprenda o estilo CSS por si só, aprenda a usar pré-processadores para acelerar o desenvolvimento e estude a teoria das cores para saber quais cores combinam e quais não combinam. Depois de entender corretamente os conceitos, você pode perceber que nem precisa mais dos frameworks.

Não ter uma ferramenta de recuperação

Não ter uma ferramenta de recuperação quando você mais precisa pode resultar na falha do seu site e seu possível fim. Sempre que você faz uma alteração no seu site, corre o risco de não ser bom. Para garantir que você tenha uma rede de segurança na qual possa cair, pense em utilizar uma ferramenta de recuperação, como o WP Reset.

O WP Reset é sua melhor solução quando surgem problemas em seu site. Talvez o problema seja não conseguir acessar seu administrador do WP ou o encontro com a tela branca da morte. Seja o que for, o WP Reset está à sua disposição. Ele vem equipado com ferramentas de limpeza úteis que permitirão que você recupere seu site de maneira rápida e fácil.

Além disso, você pode usá-lo para instalar rapidamente quaisquer plugins e temas ou desativá-los se estiverem com defeito. Além disso, o recurso Snapshots do WP Reset tira automaticamente um instantâneo do seu site antes de fazer qualquer alteração nele, permitindo que você recupere esse instantâneo se as coisas não saírem conforme o planejado.

A opção mais poderosa que este plugin oferece é a opção Nuclear Reset, que permite que você limpe completamente sua instalação, remova todos os plugins, temas e entradas de banco de dados. No entanto, use-o apenas quando realmente precisar.

Esquecer de otimizar seu site para velocidade

Um efeito de confiar demais no jQuery é a tendência de cair no hábito de antipadrões. Quando o navegador é carregado pela primeira vez, o código JavaScript e CSS precisa ser executado antes que a página seja carregada, dependendo de onde você coloca seus scripts.

Como você pode imaginar, ter muitos scripts vai deixar seu site mais lento. Ter classes CSS não utilizadas aumentará o tamanho do pacote do seu site e, da mesma forma, diminuirá a velocidade.

Muito vai para a otimização de velocidade. Para citar alguns fatores: fontes, imagens, arquivos JavaScript e CSS adicionais e compactação de arquivos desempenham seu papel. Depois de dominá-los, procure pacotes de pacotes como Webpack e Rollup que podem remover classes CSS e métodos JavaScript não utilizados de seus arquivos.

Validação de entrada incompleta

Algumas das partes mais importantes de qualquer site que você já construiu são os formulários. Como é a única maneira de uma pessoa passar informações para o seu servidor, é sempre necessário fazer algumas verificações de sanidade neles.

Alguns dos vetores de ataque mais comuns na internet ainda são ataques XSS e injeção de SQL. O erro que os desenvolvedores juniores tendem a cometer é apenas ter validação de entrada no frontend.

Toda validação de entrada é feita via JavaScript, o que é trivial para desabilitar. Dito isso, Kenneth Sytian, do Sytian Web Developer Philippines, recomenda sempre realizar a validação de entrada tanto no back-end quanto no front-end. Além disso, todos os caracteres não alfanuméricos devem ser escapados para impossibilitar ataques de injeção.

Ignorando a importância do SEO

Não é suficiente que você construa sites bonitos e os envie. É igualmente importante que as pessoas vejam e apreciem o conteúdo que você oferece. A melhor maneira de fazer isso é melhorar seu conhecimento de SEO e sua implementação.

SEO é um processo longo e complicado que precisa de pesquisa constante para permanecer no circuito das regras do jogo em constante mudança. Com seu alcance arqueado, não deve ser dispensado de ser feito ao final do processo de desenvolvimento.

Algumas práticas, como sempre ter tags 'alt' descritivas em suas imagens, precisam ser processadas ativamente. Imagine escanear todos os seus arquivos para procurar por alt e meta tags quando você já tiver terminado o projeto.

Não ter um favicon

É fácil descartar o favicon como desnecessário por causa de quão trivial é configurá-lo, mas sua existência é muito importante. Na web moderna, é comum que os usuários tenham várias guias abertas para que possam visitá-las novamente mais tarde. Os favicons atuam como uma espécie de marcador para que seu site seja visível em um único olhar. A falta de um pode significar que os usuários perdem o interesse ao longo do caminho.

Em vez de gerar um você mesmo no Photoshop, a premiada designer de UX, Michelle Dipp, recomenda o uso de ferramentas gratuitas de design gráfico que você pode encontrar online. Você pode até encontrar um que ofereça modelos de favicon para que você possa criar o seu próprio sem problemas.

Ignorando o design responsivo

O design responsivo está entre uma das coisas mais importantes que um site deve ter. A maior parte do tráfego na internet é proveniente de dispositivos móveis. Não ter um site que exiba conteúdo diferente dependendo do tamanho da tela o coloca em uma desvantagem significativa. Isso é especialmente verdade se seus concorrentes oferecem o mesmo.

Uma maneira de melhorar a experiência do usuário é implementar elementos fixos em seu site. Elementos fixos são aqueles que permanecem fixos na página enquanto o usuário está navegando. Quando os elementos são fixos, é mais fácil acessá-los e você sabe que eles estão sempre em um só lugar, o que é essencial quando em um celular.

Dito isto, o WP Sticky é o plugin perfeito que você pode usar para criar seus elementos pegajosos. O WP Sticky permite que você faça quantos elementos você quiser, sem escrever uma única linha de código; você só precisa escolher seu elemento diretamente na tela.

Com o WP Sticky, você pode deixar seu menu, cabeçalho, rodapé e muito mais pegajoso. Além disso, você pode ajustar a posição, a opacidade do elemento e adicioná-lo ou removê-lo de uma postagem específica.

Além disso, é um dos fatores que o Google leva em consideração ao classificar as páginas. Se sua página não for responsiva em dispositivos móveis, você provavelmente receberá alguns e-mails do console do webmaster avisando para atualizar seu site.

Conclusão

Web design adequado leva tempo. Tempo para pesquisar, tempo para trabalhar e ainda mais tempo para se acostumar com as práticas recomendadas. Cometer um erro durante o tempo de desenvolvimento não é o fim do mundo. Em vez disso, considere quaisquer contratempos que encontrar como uma experiência de aprendizado. Melhore seu conhecimento e aplicação de web design adequado usando-os.

–

SOBRE O AUTOR

Becky Holton é jornalista e blogueira do Bestdissertation.com, o melhor serviço de redação de ensaios. Ela está interessada em tecnologias educacionais, escrita especializada e está sempre pronta para dar suporte a palestras informativas na AustralianWritings. Siga-a no Twitter.