Imagine que estamos em 1995, a internet \u00e9 uma terra pouco explorada, cheia de sites com fundo de estrelas e imagens est\u00e1ticas no centro. Abaixo, h\u00e1 gifs em 16bits e textos colorid\u00edssimos sobre como foi o dia de algu\u00e9m. Sabemos que essa realidade parece um pouco assombrosa, mas, acredite, os sites eram assim no come\u00e7o. <\/p>\n
A boa not\u00edcia \u00e9 que o tempo passou, para sermos mais precisos, cerca de 20 anos, e chegamos ao momento em que os sites n\u00e3o s\u00e3o s\u00f3 melhores que o que foi descrito acima, mas, tamb\u00e9m, mais complexos e desenvolvidos. <\/p>\n
Agora, mais que saber sobre HTML \u00e9 preciso conhecer outros conceitos que v\u00e3o desde design responsivo a JavaScript para gerar uma p\u00e1gina. Toda essa complexidade fez com que essa compet\u00eancia de trazer um site \u00e0 vida<\/a> se tornasse uma profiss\u00e3o, o que chamamos de desenvolvedor web. <\/p>\n Neste texto, vamos n\u00e3o s\u00f3 explicar o que ele faz, mas apresentar o que \u00e9 preciso saber para se tornar um. Continue!<\/p>\n O desenvolvedor web \u00e9 o respons\u00e1vel por codificar, desenvolver e gerenciar sites. Para isso, ele usa blocos de constru\u00e7\u00e3o feitos de linguagens espec\u00edficas da web, como CSS e HTML. Podemos dizer que ele ser\u00e1 respons\u00e1vel por pegar uma ideia de um site, incluindo o conceito de design e transformar em realidade. <\/p>\n Na introdu\u00e7\u00e3o, trouxemos um exemplo de como eram os sites no come\u00e7o dos anos 1990, d\u00e1 para imaginar que sem o desenvolvedor web esse tipo de p\u00e1gina poderia ainda estar por a\u00ed? Por\u00e9m, mais que isso, mesmo que o site tivesse um bom design, sem um desenvolvedor, as chances de ser funcional e estar de acordo para rodar na web seria imposs\u00edvel. <\/p>\n Esse profissional \u00e9 o que est\u00e1 por tr\u00e1s do que vemos em todos os sites. Links<\/a>, imagens bem enquadradas, bot\u00f5es de intera\u00e7\u00e3o e efeitos visuais, como flash, n\u00e3o s\u00e3o nada sem o aux\u00edlio de um desenvolvedor. Logo, a sua import\u00e2ncia \u00e9 crucial para tornar a internet o que ela \u00e9 hoje em dia. <\/p>\n Se olharmos por um ponto de vista mais espec\u00edfico, muitas empresas nem teriam condi\u00e7\u00f5es de apresentar seus produtos e servi\u00e7os na web sem um site padronizado de acordo com a linguagem web. <\/p>\n Ent\u00e3o, chegamos a um ponto interessante deste texto. Voc\u00ea ver\u00e1 nos t\u00f3picos a seguir um compilado de conhecimentos necess\u00e1rios para exercer essa profiss\u00e3o. Procuramos escolher as principais, continue!<\/p>\n O HTML (HyperText Markup Language) e o CSS (Cascading Style Sheets) podem ser enxergados como c\u00f3digos respons\u00e1veis por tudo o que voc\u00ea v\u00ea na web. Para sermos mais espec\u00edficos, s\u00e3o linguagens, uma s\u00e9rie de caracteres que, ordenados de certa maneira, podem ser lidas pelo sistema do seu computador, smartphone e tablet para apresentar as p\u00e1ginas na web. <\/p>\n Antes de mais nada, \u00e9 preciso dizer que \u00e9 imposs\u00edvel, ao procurar sobre desenvolvimento de software, que voc\u00ea n\u00e3o encontre essas duas linguagens em algum ponto. Mas do que elas se tratam? Bem, o HTML \u00e9 um c\u00f3digo de marca\u00e7\u00e3o padr\u00e3o \u2014 um bloco de constru\u00e7\u00e3o modelo, por isso, bem mais b\u00e1sico. <\/p>\n Agora, o CSS \u00e9 um pouco mais complexo, digamos que ele \u00e9 um complemento. Enquanto o HTML cria a base da p\u00e1gina, o CSS age no desenvolvimento de cor, fontes, layout de p\u00e1ginas, ou seja, tudo o que \u00e9 direcionado ao estilo. Portanto, \u00e9 fundamental que o desenvolvedor de web aprenda a ler essas linguagens e a gerenci\u00e1-las.<\/p>\n Voc\u00ea ver\u00e1 que, ao longo deste texto, h\u00e1 algumas linguagens b\u00e1sicas para o desenvolvimento de uma p\u00e1gina, uma delas \u00e9 o JavaScript. Ele \u00e9 um mecanismo que permite que o programador crie e atualize o conte\u00fado de um site em tempo real. Um bom exemplo de JavaScript \u00e9 a intera\u00e7\u00e3o que o usu\u00e1rio faz com uma anima\u00e7\u00e3o. <\/p>\n Acontece que essa ferramenta<\/a> \u00e9 geralmente focada em um contexto espec\u00edfico, em um tipo de estrutura. Enquanto o CSS e o HTML s\u00e3o respons\u00e1veis pelo que vemos, o Java cuida de como isso funciona. <\/p>\n Um site pode ter um bom estilo, cores harmonizadas, fontes padronizadas e nenhum problema na codifica\u00e7\u00e3o HTML, mas, por outro lado, pode n\u00e3o apresentar nenhum tipo de efeito, v\u00eddeos, recursos de rolagem, v\u00eddeo, anima\u00e7\u00f5es<\/a> etc. O JavaScript ser\u00e1 a ferramenta para colocar esses elementos, ou seja, acrescentar vida \u00e0 sua p\u00e1gina na web.\u00a0<\/p>\n Tudo o que apresentamos aqui s\u00e3o etapas essenciais para o que vemos e tamb\u00e9m para a intera\u00e7\u00e3o com a p\u00e1gina. Entretanto, existe uma ferramenta que funciona nos bastidores para garantir que o JavaScript funcionar\u00e1: o SQL. Ele \u00e9 respons\u00e1vel por armazenar os dados de atualiza\u00e7\u00e3o do conte\u00fado do Java. <\/p>\n Por tr\u00e1s do SQL, existe toda uma arte de organizar dados de maneira eficiente \u2013 e confesso que pouca gente valoriza esse lado dos bancos de dados. Mas pense no desastre que seria um site de compras sem essa engrenagem invis\u00edvel. Uma busca por um pedido antigo viraria uma ca\u00e7a ao tesouro frustrante, n\u00e9? Gerenciar essas informa\u00e7\u00f5es pode at\u00e9 parecer algo trivial, mas quem j\u00e1 tentou restaurar dados perdidos depois de um bug sabe como faz diferen\u00e7a a estrutura por tr\u00e1s do SQL estar bem montada.<\/p>\n Desenvolver a confian\u00e7a para manipular bancos de dados, inclusive, \u00e9 um degrau importante na carreira de quem est\u00e1 come\u00e7ando em desenvolvimento web. Aquela sensa\u00e7\u00e3o inquieta de “e se eu apagar sem querer?” acompanha os primeiros projetos e, honestamente, nunca some 100%. Conhecer ferramentas de backup e estrat\u00e9gias para lidar com falhas faz parte do of\u00edcio, sen\u00e3o a ansiedade n\u00e3o deixa o c\u00f3digo sair do papel.<\/p>\n Quer um exemplo pr\u00e1tico? Quando voc\u00ea entra em um site de compras e v\u00ea uma p\u00e1gina com tudo o que voc\u00ea comprou, essa informa\u00e7\u00e3o precisa ficar armazenada em algum lugar, um banco de dados. Bem, isso \u00e9 o SQL. <\/p>\n Apesar de n\u00e3o ser uma exig\u00eancia obrigat\u00f3ria, \u00e9 bastante comum encontrar empresas que buscam por desenvolvedores que tamb\u00e9m entendam sobre NoSQL. Por\u00e9m, do que isso se trata? Essa \u00e9 uma ferramenta bem semelhante ao SQL, que tamb\u00e9m armazena dados, mas a sua principal diferen\u00e7a \u00e9 que, enquanto o primeiro tem uma estrutura j\u00e1 pr\u00e9 definida, o NoSQL, \u00e9 completamente indefinido.<\/p>\n Portanto, sua utilidade se difere um pouco do SQL, sendo usado principalmente quando a estrutura dos dados muda constantemente e \u00e9 necess\u00e1rio mais plasticidade. <\/p>\n Essa \u00e9 uma habilidade um pouco mais espec\u00edfica e que pode ser vista como um complemento do que falamos no in\u00edcio deste t\u00f3pico. A verdade \u00e9 que existem limita\u00e7\u00f5es no CSS, n\u00e3o \u00e9 algo que impedir\u00e1 suas cria\u00e7\u00f5es, mas pode atrapalhar e tornar o processo um pouco mais trabalhoso. Com ele, voc\u00ea n\u00e3o pode determinar vari\u00e1veis, fun\u00e7\u00f5es ou fazer c\u00e1lculos no CSS, por exemplo.<\/p>\n Agora, voc\u00ea deve estar se perguntando por que precisaria de matem\u00e1tica para um site? Lembre-se que estamos lidando com c\u00f3digos. Sendo assim, algumas opera\u00e7\u00f5es e sinais fazem parte dessa linguagem e podem ser bem \u00fateis. <\/p>\n Especificamente no CSS, o que pode atrapalhar \u00e9 que, sem conseguir coloc\u00e1-las em um projeto que cresce em escala, voc\u00ea ter\u00e1 que reescrever o c\u00f3digo toda a vez que precisar fazer uma altera\u00e7\u00e3o. Nem precisamos dizer que isso levar\u00e1 muito tempo, n\u00e3o \u00e9? Ent\u00e3o, qual \u00e9 a solu\u00e7\u00e3o?<\/p>\n Aprendendo a usar pr\u00e9-processamento, como LESS, Sass ou Stylus, voc\u00ea escreve o c\u00f3digo na linguagem da ferramenta e ele converte o c\u00f3digo para CSS. Dessa forma, se voc\u00ea precisa mudar a cor da fonte de todos os menus, n\u00e3o precisa fazer isso em todos os locais em que a linguagem est\u00e1, pode mudar na ferramenta e ela automaticamente altera as partes necess\u00e1rias de uma s\u00f3 vez. <\/p>\n O controle de vers\u00e3o pode ser chamado de bote de salva-vidas quando o assunto \u00e9 desenvolvimento de software, principalmente para a web. Isto porque, em muitos casos, depois de todo o trabalho de codifica\u00e7\u00e3o HTML, CSS e JavaScript, voc\u00ea ter\u00e1 que lidar com a possibilidade de que algumas coisas n\u00e3o saiam t\u00e3o bem assim \u2014 e o controle de vers\u00e3o \u00e9 uma das solu\u00e7\u00f5es. <\/p>\n Refazer o trabalho n\u00e3o \u00e9 uma das tarefas mais agrad\u00e1veis, ali\u00e1s, no caso de desenvolver um site<\/a>, pode ser bem cansativo e complicado. O controle de vers\u00e3o \u00e9 uma forma de tornar esse processo bem mais \u00e1gil. Ajudando o profissional a rastrear e controlar as altera\u00e7\u00f5es do c\u00f3digo-fonte. Dessa forma, ele pode retornar a vers\u00f5es anteriores sem estragar o que j\u00e1 foi feito. <\/p>\n Ali\u00e1s, por experi\u00eancia pr\u00f3pria \u2014 e de muita gente que conhe\u00e7o \u2014, uma boa ferramenta de controle de vers\u00e3o j\u00e1 salvou horas de trabalho. Pense naquela sensa\u00e7\u00e3o de apagar, sem querer, trechos inteiros de c\u00f3digo que j\u00e1 estavam perfeitos. O poder de voltar atr\u00e1s, como se nada tivesse acontecido, n\u00e3o \u00e9 s\u00f3 um adianto; \u00e9 o tipo de al\u00edvio que n\u00e3o tem pre\u00e7o. Hoje ningu\u00e9m em s\u00e3 consci\u00eancia come\u00e7a um projeto minimamente grande sem Git ou algo do tipo.<\/p>\n Outro detalhe: compartilhar c\u00f3digo em equipe sem um sistema desses \u00e9 experimentar o caos. Cada um faz uma altera\u00e7\u00e3o, outra pessoa sobrep\u00f5e, vira um samba do crioulo doido digital \u2014 e quem precisa conciliar tudo depois provavelmente pensa em mudar de \u00e1rea. Por isso, para al\u00e9m da organiza\u00e7\u00e3o, dominar controle de vers\u00e3o \u00e9 quase uma quest\u00e3o de sanidade.<\/p>\n Smartphones respondem por quase todos os acessos \u00e0 internet no Brasil, o que significa que mais que ter um site com um bom design e que funcione, \u00e9 preciso que ele esteja adequado para aparecer em telas menores. <\/p>\n Tablets e celulares s\u00e3o dispositivos facilitadores para as pessoas, sendo muito mais populares e acess\u00edveis que um computador tradicional ou notebooks. Portanto, a responsividade, que molda o layout de um site \u00e0 tela na qual ele est\u00e1 sendo exibido, \u00e9 fator fundamental para um maior alcance e uma melhor experi\u00eancia do usu\u00e1rio.<\/p>\n Conhecer as t\u00e9cnicas que tornam o design de uma p\u00e1gina<\/a> responsiva e saber implement\u00e1-las \u00e9 imprescind\u00edvel para ser um desenvolvedor web completo.<\/p>\n Testar faz parte das habilidades profissionais que n\u00e3o t\u00eam uma rela\u00e7\u00e3o direta com aprender c\u00f3digos exatamente. O grande ponto, aqui, \u00e9 ter a no\u00e7\u00e3o de bugs, ou melhor, de que erros s\u00e3o uma realidade quando se fala do ambiente digital.<\/p>\n \u00c9 muito importante que qualquer produto passe por testes exaustivos antes de ter qualquer vers\u00e3o exposta ao p\u00fablico. Afinal, testar o seu c\u00f3digo em busca de bugs \u00e9 uma maneira de sempre aperfei\u00e7oar as suas cria\u00e7\u00f5es. \u00c9 uma habilidade, mas tamb\u00e9m \u00e9 um h\u00e1bito que deve ser cultivado independentemente do seu n\u00edvel de conhecimento. <\/p>\n Sendo assim, \u00e9 preciso dizer que h\u00e1 algumas formas de testar os processos de desenvolvimento web. Por exemplo, existe o teste funcional, que analisa aplica\u00e7\u00f5es espec\u00edficas do site, assim como o teste de unidade, focado em uma parte do c\u00f3digo. Mesmo que pare\u00e7am medidas espec\u00edficas demais e que levam tempo para ser analisadas, \u00e9 importante aprender a como execut\u00e1-las corretamente. A boa not\u00edcia \u00e9 que existem programas feitos para simplificar esse processo. <\/p>\n At\u00e9 aqui, apresentamos habilidades que t\u00eam como caracter\u00edsticas serem mais t\u00e9cnicas, por isso, elas podem parecer mais f\u00e1ceis de serem aprendidas. No entanto, existem qualidades que v\u00e3o al\u00e9m da t\u00e9cnica, que t\u00eam uma rela\u00e7\u00e3o direta com o modo de ser, ou seja, com o comportamento.<\/p>\n Isso significa que elas n\u00e3o podem ser aprendidas? Na verdade, n\u00e3o, mas que tamb\u00e9m precisam ser consideradas. Quem quer trabalhar como desenvolvedor deve estar atento ao que apresentaremos abaixo. Confira.<\/p>\n Para sermos sinceros, a an\u00e1lise \u00e9 uma parte importante da vida de um desenvolvedor web. Ele est\u00e1 sempre avaliando o seu trabalho, seja ainda na fase de codifica\u00e7\u00e3o, seja quando ele o apresenta para o mundo. Afinal de contas, bugs e atualiza\u00e7\u00f5es s\u00e3o uma parte do processo de cria\u00e7\u00e3o de sites, de forma que se pode dizer que o trabalho nunca est\u00e1 terminado. <\/p>\n Portanto, \u00e9 preciso que ele seja capaz de analisar o que faz, mas que consiga checar outros trabalhos. Muitas vezes, esse profissional \u00e9 contratado para cuidar de um site que n\u00e3o foi desenvolvido por ele e precisa conseguir avaliar o que pode ser melhorado. Ter um olhar cr\u00edtico para isso \u00e9 uma habilidade essencial. <\/p>\n Mesmo que seja uma profiss\u00e3o em que, em um primeiro momento, boa parte da rotina seja trabalhar em frente a uma tela do computador, codificando p\u00e1ginas na web, ainda assim, a comunica\u00e7\u00e3o ser\u00e1 uma qualidade essencial. Afinal, ser\u00e1 preciso conversar com o cliente<\/a>, saber quais s\u00e3o suas necessidades e qual \u00e9 a ideia que ele tem para o projeto.<\/p>\n Al\u00e9m disso, o desenvolvedor web precisar\u00e1 entrar em contato com outras partes do desenvolvimento, como design, integra\u00e7\u00e3o com servidores, banco de dados, seguran\u00e7a e at\u00e9 eventuais plataformas de e-commerce. Sendo assim, ele deve saber como se portar socialmente e dialogar. Tamb\u00e9m \u00e9 importante que ele tenha a capacidade de escutar, principalmente para n\u00e3o ser arrogante quando seu trabalho desagradar o contratante. <\/p>\nO que \u00e9 um desenvolvedor web?<\/h2>\n
Qual \u00e9 a sua import\u00e2ncia?<\/h3>\n
Quais s\u00e3o as habilidades profissionais essenciais?<\/h2>\n
1. HTML\/CSS<\/h3>\n
2. JavaScript<\/h3>\n
3. SQL<\/h3>\n
4. NoSQL<\/h3>\n
5. Pr\u00e9-processamento CSS<\/h3>\n
6. Sistema de controle de vers\u00e3o<\/h3>\n
7. Design responsivo<\/h3>\n
8. Teste<\/h3>\n
Quais s\u00e3o as habilidades comportamentais? <\/h2>\n
1. Habilidades de anal\u00edticas<\/h3>\n
2. Boa escuta e comunica\u00e7\u00e3o<\/h3>\n
3. Estar atento \u00e0s tend\u00eancias<\/h3>\n