Dicas para garantir o sucesso de seu projeto como desenvolvedor front-end

Há alguns dias vi uma matéria que me chamou muito a atenção e me fez voltar um pouquinho no tempo, láááá no comecinho da minha carreira, me trazendo a lembrança dos meus primeiros dias como Desenvolvedor Front-End!

É uma comparação engraçada, mas quem aí se lembra do Agente J (Will Smith) entrando pela primeira vez na agência dos Homens de Preto e olhando para tudo aquilo com um olhar de surpresa e espanto?

Pois é! Eu me senti assim na primeira empresa em que trabalhei! Um mundo novo. E, para minha surpresa, muito diferente do que eu imaginava!

Durante toda a minha jornada aprendi metodologias, ferramentas e absorvi diferentes visões e perspectivas de trabalho.

Por isso, se o Silvão de hoje pudesse ensinar alguma coisa para o Silvio lá no começo da carreira seria tudo o que vou falar nesse post!

Não. Minha missão hoje não é eliminar John Connor e impedir que a resistência acabe com a Skynet.

Estou aqui pra dar algumas dicas muito importantes, não só pro Silvio lá do início, mas que também podem te ajudar nessa jornada.

Fique por aqui. I will be back (com um conteúdo massa!)

Hoje vou falar um pouco sobre o método de trabalho que utilizo e como é a rotina de um projeto do início ao fim.

Essas informações podem ajudar muito no seu dia a dia como Front-End. Veja só o que vem por aí:

1. MOCKUP
2. Montagem de esqueleto
3. Visual&Design
4. Ação e reação

Mockup

Mockup ou layout é o nome que se dá ao protótipo de alta fidelidade do projeto final, representado através de uma imagem estática.

Geralmente, os mockups devem ser entregues em um formato que permita ao desenvolvedor se basear e recortar as imagens para iniciar a construção do site propriamente dito.

Dica: Eu uso o Adobe Photoshop! E recomendo! Super intuitivo, possibilita que você trabalhe por entre as camadas e faça esse processo de forma simples e rápida!

Ainda sobre o Photoshop, dê uma pesquisada, busque tutoriais…

A web está cheia de artigos e dicas de como usá-lo e, com certeza, o conhecimento em um programa de edição de imagens nessa etapa facilitará e muito seu trabalho!

Montando o esqueleto

Bora botar a mão na massa?

Com base no layout você deve ser capaz de começar a imaginar o site, saber como se dividirá, onde estará o menu, o conteúdo principal, as barras laterais, prever situações e comportamentos.

Dessa forma, já dá pra começar a montar a estrutura. A famosa marcação HTML!

A linguagem HTML é a responsável pela estruturação dos elementos na página: vai determinar a organização do esqueleto da página, a importância e hierarquia dos elementos.

Essa parte deve ser bem feita. Atenção às boas práticas de desenvolvimento para garantir o sucesso de seu projeto.

Essa é uma escada longa, mas de degrau em degrau você chega lá!

Pesquise muito. Se você quer saber um pouco mais sobre HTML5, uma brevíssima introdução, indico essa fonte riquíssima do tabless.

Visual & Design

Feita a marcação dos elementos componentes da página, é hora de focar no visual!

É aqui que entra a linguagem que trabalha em conjunto com o HTML: CSS.

O CSS é responsável pela customização da estrutura HTML e apresentação visual do site na tela de sua máquina.

Cores, formatos, tamanhos, efeitos, movimentos, o CSS tem muito a oferecer e é importante muito estudo e foco para aproveitar essa linguagem da melhor forma!

Ação e reação

Vou falar um pouquinho de interatividade e nossa parceira nessa etapa é a linguagem JavaScript.

A implementação de JavaScript é a etapa responsável pela interatividade entre o usuário e o site.

Quando você clica em um botão e ele muda de cor ao mesmo tempo que lhe traz uma resposta, essa interação é JavaScript!

Quando você preenche um formulário e tem um feedback de validação, isso é JavaScript!

Dito isso, o JavaScript nada mas é do que aquele que traz uma resposta à ação do usuário e promover interatividade em um website.

Tanto para HTML ou CSS quanto para JavaScript, temos muito editores. Cabe a cada um escolher com o qual melhor se adaptará!

Tente encontrar um editor que ajude e agilize seu trabalho. O Sublime Text é um excelente parceiro na edição dessas linguagens!

Houston! We have a problem!

Beleza! Você terminou seu desenvolvimento e seu site tá lindão, só que não (pelo menos não em todos os navegadores)!

Lembre-se que o usuário final nem sempre utilizará o navegador mais popular e nem o mais moderno para acessar seu site.

Nessa etapa é que separa os bons dos excelentes! rs

Nesse caso, a palavra de ordem é CROSSBROWSER!

Teste seu site nos navegadores e versões mais usadas, pois sempre existe uma diferençazinha aqui ou uma quebra ali!

Ok, uma vez que eu aprendo a lidar com todos esses aplicativos e tecnologias eu estou pronto para o mercado? NÃÃÃO!

UX, wireframe, mobile, responsividade, template, framework…

A lista é grande e posso te dizer que aumenta a cada dia!

Muita informação? Calma… Eu tô aqui pra te dizer que só vai piorar (ou melhorar!).

Foco, curiosidade, determinação e disciplina… O mercado procura por você!