http://canaltech.com.

br/materia/programacao/Os-conhecimentos-fundamentais-para-ser-um-bom-
desenvolvedor/
Os conhecimentos fundamentais para ser um
bom desenvolvedor
Matria completa: http://canaltech.com.br/materia/programacao/Os-conhecimentos-fundamentais-
para-ser-um-bom-desenvolvedor/#ixzz3b!"#M33
O conte$do do #analtech protegido sob a licen%a #reative #ommons &## '!-(#-()*. +oc,
pode reproduzi-lo- desde .ue insira crditos #OM O /0(1 para o conte$do original e n2o fa%a uso
comercial de nossa produ%2o.
)esenvolver algo .ue muitos amantes da tecnologia .uerem aprender. #asos de sucesso recentes
como 0nstagram e 3hats4pp .ue come%aram do nada &vulgo de uma e.uipe bem pe.uena e .uase
sem recursos financeiros* e foram vendidos por bilh5es ao 6aceboo7 &outra empresa bilion8ria .ue
come%ou do zero alguns anos atr8s* inspiram as pessoas a apostar as fichas em obter conhecimentos
na 8rea. Mesmo .ue esses n2o .ueiram se aventurar na 8rea do empreendedorismo de 90- ou nem
.ueiram entrar no grande mercado de trabalho .ue est8 sempre crescendo tanto l8 fora .uanto a.ui
no 'rasil e .ue est8 sempre precisando de mais profissionais- programar essencial para entender
como as coisas funcionam &assim como :teve ;obs <8 dizia em sua poca*.
=orm- muitas vezes esse processo de aprendizado se torna bastante dif>cil e acaba sendo atrasado
&ou no pior dos casos interrompido* por conta de muitos termos tcnicos e palavras .ue entram
nesse processo sem nem serem explicadas.
=ensando nisso- este artigo ir8 auxiliar todos a conhecer v8rias &n2o todas* filosofias e
funcionalidades de algumas ferramentas e termos bastante usados por programadores. "rande parte
deles s2o pr-re.uisitos para muitas das vagas de desenvolvedores encontradas por a>.
Padres Web e W3C
4 3orld 3ide 3eb #onsortium &33#*- liderada pelo inventor da 3eb 9im 'erners-/ee e o #?O
;effre@ ;affe- uma comunidade internacional onde os membros organizacionais- uma e.uipe em
tempo integral e o p$blico &desenvolvedores- por exemplo* trabalham <untos para desenvolver os
padr5es para a cria%2o e a interpreta%2o dos conte$dos para a 3eb e para .ue estes conte$dos se<am
acess>veis e visualizados por .ual.uer pessoa ou tecnologia- independente do hardAare ou softAare
utilizado.
B4 miss2o do 33# levar a 3orld 3ide 3eb ao seu potencial m8ximo- desenvolvendo
protocolos e diretrizes .ue garantam seu crescimento em longo prazo na AebB C 33#.
Os =adr5es 3eb &tambm conhecidos como 3eb :tandards* s2o recomenda%5es do 33#- os .uais
s2o destinados a orientar os desenvolvedores para o uso de boas pr8ticas .ue tornam a Aeb acess>vel
para todos. =or meio desses padr5es- o 33# tem como ob<etivo criar uma plataforma aberta da
3eb- para o desenvolvimento de aplica%5es .ue possuam um potencial sem precedentes- permitindo
assim .ue os desenvolvedores criem experi,ncias ricas- alimentadas por um vasto armazenamento
de dados- os .uais est2o dispon>veis para .ual.uer dispositivo.
#aso voc, .ueira se aprofundar mais nos =adr5es 3eb dispon>veis- poss>vel encontrar todo esse
conte$do no proprio site da 33#. O conte$do est8 organizado em 8reas- ve<a:
Web Design e Aplicaes: padr5es para o desenvolvimento de p8ginas 3eb- incluindo
D9M/ E #::- :cript e 4<ax- "r8ficos- Fudio e +>deo- 4cessibilidade- 0nternacionaliza%2o-
Mobile 3eb- =rivacidade e Matem8tica na 3eb.
Arquitetura Web: foco nos princ>pios da 4r.uitetura 3eb- 0dentificadores &GH/- GH0 e
0H0*- =rotocolos &D99=- IM/- etc.*- Meta 6ormatos e 0nternacionaliza%2o.
Web Semntica: conhe%a as tecnologias e ferramentas para dar suporte J B3eb dos dadosB-
viabilizando pes.uisas como num banco de dados. 4.ui voc, ir8 aprender sobre )ados
/in7ados- +ocabul8rios e Ontologias- #onsultas- 0nfer,ncia e 4plica%5es verticais.
!ecnologia "#$: tecnologias IM/- incluindo IM/- IM/ (amespaces- IM/ :chema-
?fficient IM/ 0nterchange &?I0* e outros padr5es relacionados.
Web Services: refere-se Js tecnologias como D99=- IM/- :O4=- 3:)/- :=4HK/- entre
outras- .ue possibilitam a integra%2o e comunica%2o entre diferentes aplica%5es.
Web de Dispositivos: tecnologias .ue permitem o acesso J 3eb por todos- de .ual.uer
lugar- a .ual.uer hora e utilizando .ual.uer dispositivo.
%avegadores e &erramentas de Autoria: nLs devemos ser capazes de publicar e acessar
conte$dos independemente do softAare .ue utilizamos- do computador .ue temos- idioma
.ue falamos- se estamos conectados sem fio ou n2o- se a tela grande ou pe.uena- etc. ?stas
normas t,m o ob<etivo de aprimorar constantemente a Aeb .ue aberta para todos nLs.
Design Patterns
)iferente dos 6rameAor7s e 'ibliotecas- o )esign =atterns n2o se relaciona com o cLdigo
propriamente dito- mas evita poss>veis problemas .ue podem vir no desenvolvimento de um
pro<eto. 4ssim como os 6rameAor7s reutilizam cLdigos- o design pattern tem o intuito de reutilizar
solu%5es. 0sto - caso n2o ha<a um frameAor7 para resolver um problema- usa-se o )esign =atterns
para estruturar o trabalho por inteiro.
O ar.uiteto #hristopher 4lexander introduziu a ideia de patterns em MNO para construir um
vocabul8rio comum para discuss5es sobre design. ?le escreveu:
B#ada pattern descreve um problema .ue ocorre v8rias vezes ao nosso redor e- com
isso- descreve a solu%2o para o problema de uma maneira .ue voc, pode usar diversas
vezes sem ter .ue fazer a mesma coisa duas ou mais vezesB.
?nt2o pense em )esign =atterns como se fosse uma padr2o para resolver solu%5es- mesmo .ue nem
todos os problemas n2o se<am iguais- caso se<a poss>vel P.uebrarQ o problema e achar
similiaridades com problemas .ue <8 foram resolvidos antes- poss>vel aplicar essas solu%5es.
!ableless
(os primLrdios da internet- .uando os principais navegadores eram /@nx- Mosaic e o conhecido
(etscape (avigator- da (etscape #ommunications- ent2o liderada por ;ames #lar7- n2o havia um
padr2o de desenvolvimento. #ada navegador estabelecia seu prLprio padr2o- o .ue dificultava .ue
um site fosse visto por mais de uma plataforma- por mais de um navegador. ? pra atrapalhar mais
ainda a vida dos desenvolvedores- a Microsoft lan%a mais um concorrente no mercado- o 0nternet
?xplorer- mais um padr2o distinto dos outros. 4pLs o lan%amento do 0?- a (etscape declara guerra
ao fim de buscar adeptos. "uerra essa .ue ficou conhecida como Pguerra dos broAsersQ.
Os broAsers tinham seus prLprios padr5esR ;8 os desenvolvedores n2o conseguiam criar um $nico
cLdigo .ue funcionasse em dois navegadores. =or este motivo- eles eram obrigados a desenvolver-
na maioria das vezes- para apenas um broAser.
0sso trouxe mais um problema- agora para os usu8rios. Kuem usava (etscape n2o conseguia acessar
sites .ue eram feitos para 0nternet ?xplorer- e vice-versa.
? como a Aeb n2o tinha sido pro<etada para ter elementos visuais e uma interface gr8fica como
temos atualmente- os gurus da computa%2o da poca precisavam se esfor%ar muito para conseguir
fazer algo fora do comum.
?ntre as muitas ideias .ue surgiram para ultrapassar o ambiente de Papenas textoQ da internet-
estava a.uela de utilizar tabelas de D9M/ para posicionar os elementos no la@out- utilizando slices
de imagem- gifs transparentes e tcnica de alinhamento de tabelas para contornar os problemas .ue
os padr5es propriet8rios traziam. ?sse tipo de tcnica- .ue foi usada pela maior parte dos Aebsites-
chamado de la@out com tabelas.
Os sites .ue seguem os =adr5es 3eb utilizam uma metodologia de desenvolvimento baseado em 3
camadas- s2o elas:
M. 0nforma%2o S a informa%2o do site exibida utilizando cLdigo ID9M/ ou D9M/.
T. 6ormata%2o S o ID9M/ .ue exibe a informa%2o formatado com #:: &6olhas de ?stilo*. U
com #:: .ue comandamos todo o visual do site. 9udo .ue visual e decorativo deve ser
feito por #::.
3. #omportamento S definido por ;avascript e 4;4I. U a camada .ue define como os
elementos ir2o se comportar de acordo com as a%5es do usu8rio.
?m poucas palavras: um site tableless um site .ue n2o utiliza tabelas para a estrutura%2o do
/a@out. U um site .ue segue os =adr5es 3eb.
D8 uma coisa .ue muita gente .ue est8 come%ando se pergunta: o .ue e para .ue serve o
ID9M/V U muito mais simples do .ue parece. Gm ar.uivo ID9M/ um ar.uivo D9M/- .ue
pode ser lido por .ual.uer broAser- semWntico. (2o estamos falando de um novo D9M/- com
novas tags ou coisa assim. =elo contr8rio- o ID9M/ foi feito para funcionar mesmo em
navegadores antigos. Mas- ao mesmo tempo- Gm ar.uivo ID9M/ tambm um ar.uivo IM/
v8lido- .ue pode ser lido por .ual.uer interpretador de IM/.
O mais importante .ue- se voc, ainda n2o trabalha com IM/- preocupe-se em aprimorar seus
conhecimentos em como fazer um bom D9M/ &ID9M/ em seus padr5es* para depois dominar
bem o cLdigo semWntico e o la@out tableless. (2o por.ue se<a complicado- pelo contr8rio:
transformar D9M/ em ID9M/ bem simples- mas voc, pode obter benef>cios muito
significativos- e muito mais rapidamente- aprendendo #:: em seguida.
#:: a segunda grande <ogada e a cada dia se aprende algo novo sobre isso. )epois de dominar
bem la@outs #::- mergulhe no IM/. 4 maioria dos bancos de dados ho<e permite extrair dados
diretamente em IM/ e todas as plataformas de aplica%5es Aeb trabalham bem com IM/. ? com a
poderosa linguagem I:/9 voc, pode muito facilmente oferecer seus os dados em ID9M/ para o
navegador.
#'C (#odel) 'ie*) Controller+
4ntes de se aventurar no mundo dos 6rameAor7s &proximo tLpico deste artigo*- necess8rio
entender como funciona o M+# &Model- +ieA #ontroller*- pois muitos frameAor7s de aplica%2o
comercial e n2o comercial foram criados tendo como base esse modelo.
#om o aumento da complexidade dos sistemas/sites desenvolvidos ho<e- essa ar.uitetura tem como
foco dividir um grande problema em v8rios problemas menores e de menor complexidade. )essa
forma- .ual.uer tipo de altera%2o em uma das camadas n2o interfere nas demais- facilitando a
atualiza%2o de la@outs- altera%2o nas regras de negLcio e adi%2o de novos recursos. ?m caso de
grandes pro<etos- o M+# facilita muito a divis2o de tarefas entre a e.uipe.
)ividido em trXs camadas .ue se convergem- o M+# torna tudo muito mais f8cil para o
desenvolvedor.
'ie*: o +ieA respons8vel por tudo .ue o usu8rio final visualiza- toda a interface- informa%2o- n2o
importando sua fonte de origem- sendo exibido gra%as J camada de vis2o. Kuando um usu8rio
acessa uma aplica%2o- ele est8 em busca de uma solu%2o para um problema. =ara resolv,-lo- clica
em bot5es- digita informa%5es em campos de texto- seleciona dados de um combobox e marca
informa%5es opcionais em campos chec7box. )e fato- o usu8rio utiliza uma interface para conseguir
resolver esse problema. ?nt2o- na pr8tica- essa interface de usu8rio o grande foco do M+#.
U na +ieA .ue o usu8rio clica em bot5es- op%5es de menu- digita textos e passa informa%5es. U na
+ieA tambm onde todas as respostas para as a%5es do usu8rio s2o exibidas.
Controller: sempre .ue um usu8rio faz alguma a%2o- como clicar em um bot2o ou escolher uma
op%2o no menu- um #ontroller precisa traduzir essas a%5es em comandos a serem executados. O
controlador respons8vel pela interpreta%2o dessas e por fornecer o feedbac7 para elas. =ara
oferecer esse feedbac7- o controlador comunica-se com a Model da aplica%2o e com a +ieA para
.ue essas mudem conforme solicitado pelo usu8rio.
=or exemplo- se um usu8rio clica em um item do menu- significa .ue ele .uer ver a +ieA associada
com a.uela op%2o. :e o usu8rio preencher um formul8rio de cadastro de alguma coisa- ele .uer .ue
alguma coisa se<a gravada em algum lugar. )a mesma forma- se um usu8rio seleciona uma string
em um editor de texto e clica no bot2o negrito ou bold- ele .uer .ue a string selecionada fi.ue em
negrito. U responsabilidade do #ontroller interpretar a sele%2o da string e o cli.ue no bot2o bold
para .ue ela possa ficar em negrito.
=orm- ao entender a a%2o negritar- o #ontroller envia a mensagem para a +ieA: B4 string
selecionada precisa ficar em negritoB. O #ontroller n2o vai explicitamente deix8-la negritada- ele
apenas notifica a +ieA .ue o usu8rio .uer tal rea%2o para a a%2o dele.
=ara cada +ieA existe um #ontroller espec>fico- ou se<a- se tivermos uma +ieA de listagem de
produtos- cadastro- visualiza%2o de carrinho de compras- editor de texto ou .uantas outras +ieAs a
aplica%2o necessitar- existir8 sempre um #ontroller espec>fico para cada uma delas.
#odel: :e uma a%2o do usu8rio envolver alguma regra de negLcio- por exemplo- cadastrar um
produto- adicionar ao carrinho ou .ual.uer coisa .ue envolva alguma lLgica espec>fica do dom>nio-
o #ontroller precisar8 verificar essa regra com o Model.
O Model a representa%2o do mundo real- no model .ue o estado da aplica%2o gerenciado- onde
os dados s2o manipulados. ? o Model .ue responde por solicita%5es de informa%5es. 9odas as
regras de negLcio s2o geridas a.ui. U no Model .ue dados transientes ou persistentes s2o
manipulados- alm de .ue- o Model o respons8vel por permitir .ue uma informa%2o se<a vis>vel
para um usu8rio ou n2o.
Gma aplica%2o pode ter v8rios Models e- ao contr8rio da +ieA e do #ontroller &em .ue um est8
diretamente relacionado com o outro*- uma $nica a%2o do usu8rio pode estar relacionada com v8rios
Models. #ontudo- n2o podemos confundir Model com banco de dados. Gm Model n2o uma
representa%2o de um banco de dados- ele apenas utiliza informa%5es .ue podem estar gravadas em
algum lugar. 0ndependentemente de utilizar dados gravados em algum lugar- o Model representa um
problema do mundo real. Kuando temos um sistema de pedidos- um carrinho- um editor de texto-
envio de emails... tudo est8 relacionado com o Model.
O Model pode at utilizar outros padr5es como 4ctive Hecord- )ata 4ccess Ob<ects- +alue Ob<ects-
9able )ata "ateAa@- HoA )ata "ateAa@ e tantos outros para manipular os dados de uma fonte de
dados- mas isso n2o significa .ue o Model a representa%2o de um.
O M+# tem sido bastante adotado por facilitar o reaproveitamento de cLdigo- facilitar na
manuten%2o e adi%2o de recursos- possibilitar maior integra%2o da e.uipe e/ou divis2o de tarefas e
facilitar em manter o seu cLdigo sempre limpo.
Preprocessadores
6acilitando o desenvolvimento 8gil de muitos pro<etos- o preprocessador uma Ltima maneira pra
.uem .uer trabalhar com D9M/ e #:: de formas diferentes e com novas fun%5es. #om os
=reprocessadores poss>vel declarar vari8veis- implementar fun%5es e mixins em folhas de estilo de
maneira simples e f8cil.
Os =reprocessadores s2o ferramentas em .ue poss>vel escrever marca%5es &D9M/* ou definir
estilos &#::* de um modo r8pido e com mtodos diferentes da linguagem puramente dita.
O pro<eto e/ou ar.uivo escrito de forma diferente em sua sintaxe &na maioria das vezes- o
=reprocessador mais simples de ser escrito- alm de trazer as novas fun%5es*. O ar.uivo enviado
ao servidor e preprocessado e traduzido na linguagem pura antes de ir para o cliente e ser
interpretado no navegador. 4final- os navegadores sL compreendem D9M/- #:: e ;ava:cript puro-
e estes s2o processados pelo client-side- e n2o pelo server-side.
Os =reprocessadores mais usados no momento s2o o /?::- :4:: &estes dois s2o baseados #::* e
D4M/ &baseado em D9M/*.
O con<unto de recursos adicionais ao #:: .ue /?:: e :4:: oferecem semelhante- consulte a
documenta%2o do /?:: ou a documenta%2o do :4:: para mais detalhes. :egue abaixo um resumo
de algumas funcionalidades:
'ari,veis: as vari8veis servem para definir valores padr5es para seus pro<etos e facilitar a
manuten%2o e altera%2o deles. ?m /?:: a vari8vel se escreve como @exemplo e- no :4::-
como $exemplo. U poss>vel atribuir valores a elas e utiliz8-los ao longo do ar.uivo. 0sso
evita .ue voc, tenha .ue ficar copiando e colando a.uele monte de classes identadas com
mais de vinte linhas repetidamente.
Aninhamento: traz outro recurso dese<ado para #::: aninhamento de seletores um dentro
do outro- em vez de ter de estender o alinhamento em v8rias defini%5es de n>vel superior. Os
tradutores do /?:: e o :4:: expandem esta nota%2o concisa em #::.
#i-ins: Mixin um conceito de programa%2o orientada a ob<etos e basicamente representa a
utiliza%2o de classes dentro de classes. ?le permite extrair grupos de propriedades comuns-
dar nome a eles e- em seguida- inclu>-los no seletores. )esenvolvedores .ue conhecem os
benef>cios da Mixins em Hub@ v2o reconhecer a utilidade de Mixins em #::. :4:: tambm
permite passar parWmetros aos Mixins- dando ainda mais flexibilidade.
Operaes: tanto o /?:: .uanto o :4:: permitem opera%5es aritmticas simples como a
soma- dando ainda mais flexibilidade Js vari8veis. 4s linguagens certificam-se de .ue
unidades s2o conservadas corretamente em opera%5es &tamanhos de fonte- etc.*.
?xemplificando- um ar.uivo /?:: enviado ao servidor- e .uando este vai ser acessado para um
usu8rio- o servidor preprocessa o ar.uivo e o traduz para #::- .ue enviado ao navegador- .ue
processa e imprime na tela o resultado final.
&rame*or.s
=or .ue reiventar a rodaV =or .ue fazer algo do zero se voc, tem a op%2o de continuar a fazer algo
.ue est8 .uase por completoV 'om- exatamente isso .ue um 6rameAor7 lhe permite. O
6rameAor7 uma abstra%2o &em programa%2o- abstra%2o a habilidade de concentrar nos aspectos
essenciais de um contexto .ual.uer- ignorando caracter>sticas menos importantes ou acidentais* .ue
une cLdigos comuns entre v8rios pro<etos de softAare provendo uma funcionalidade genrica. Gm
6rameAor7 pode atingir uma funcionalidade espec>fica- por configura%2o- durante a programa%2o
de uma aplica%2o.
O 6rameAor7 usado para desenvolver aplica%5es bastante desenvolvidas por a>- algo comum de se
ver em sites. =orm isso n2o significa .ue n2o se possa achar um 6rameAor7 .ue pode gerar
aplica%5es '- # e ) baseadas no 6rameAor7 do pro<eto 4- .ue pode n2o ser muito popular.
/nt0o) se frame*or. 1 o con2unto de c3digos e arquivos que determinam a base de um
pro2eto) eu mesmo posso criar frame*or.s4
:imY 0sso agiliza todo o processo inicial de um novo pro<eto- possibilitando a reutiliza%2o de
cLdigos. 9er uma base genrica e facilmente modific8vel uma m2o na roda principalmente para
.uem desenvolve muitos pro<etos .ue tenham algumas fun%5es semelhantes umas Js outras
&freelancers sabem exatamente do .ue isso se trata- principalmente a.ueles .ue desenvolvem M+=s
e precisam desenvolver v8rias fun%5es em pouco tempo*.
=ara voc, .ue ainda n2o teve a oportunidade de conhecer uma linguagem de programa%2o em s> e
est8 focando no D9M/ e #::- uma boa ideia se aventurar no 'ootstrap- .ue disponibiliza v8rias
fun%5es Bsemi-prontasB para serem implementadas em v8rios pro<etos. :e voc, <8 .uebrou a cabe%a
na formata%2o do #:: do seu Aebsite- principalmente na escolha da tipografia correta para os
par8grafos- cabe%alhos- lin7s e tantos outros componentes- o 'ootstrap poder8 lhe ser muito $til.
'asicamente- trata-se de um emaranhado de lin7s de #:: com algumas fun%5es de ;ava:cript
embarcadas .ue te permitem fazer um Aebsite completo e bastante atual.
5ibliotecas
)iferenciar 'ibliotecas de 6rameAor7s uma tarefa um tanto .uanto dif>cil para os iniciantes por
terem .uase a mesma usabilidade para se atingir um ob<etivo. ?n.uanto o frameAor7 modifica as
caracter>sticas visuais- a biblioteca se restringe manipulando a diagrama%2o ou a posi%2o dos
elementos.
'ibliotecas geralmente n2o modificam o visual como os 6rameAor7s fazem- mas disponibilizam
uma cole%2o de classes reutiliz8veis- e o melhor- combinatLrias- para .ue se ade.ue a diversos
cen8rios do seu pro<eto. #omo essas classes n2o est2o ligadas a nenhuma formata%2o visual- voc,
consegue combinar sem grandes problemas com suas classes e 0)s- modificando a hora .ue .uiser a
formata%2o visual dos elementos.
"eralmente as bibliotecas s2o restritas para manipular a posi%2o e as dimens5es dos elementos-
facilitando a diagrama%2o de la@outs- sem modificar as caracter>sticas visuais- <8 .ue os la@outs de
cada site t,m o design diferente.
$embre6se
)esenvolver algo est8 mais para uma a%2o de resolver problemas do .ue simplesmente
Bdesenvolver algoB. )esenvolver algo simplesmente suprir necessidades- resolver problemas. Mas
o .ue logo percebemos .ue existem v8rias maneiras de se resolver um problema. ?m termo bem
simples- podemos somar .uatro vezes o n$mero um para obter o resultado .uatro- como podemos
m$ltiplicar uma vez o n$mero .uatro ou m$ltiplicar duas vezes o n$mero dois- por exemplo. ?
todos esses problema s2o bastante semelhantes desde o caso do D9M/ e #:: at uma linguagem de
programa%2o em n>vel #ZZ ou ;ava.
Matria completa: http://canaltech.com.br/materia/programacao/Os-conhecimentos-fundamentais-
para-ser-um-bom-desenvolvedor/#ixzz3b![(hr@
O conte$do do #analtech protegido sob a licen%a #reative #ommons &## '!-(#-()*. +oc,
pode reproduzi-lo- desde .ue insira crditos #OM O /0(1 para o conte$do original e n2o fa%a uso
comercial de nossa produ%2o.