Um pouco de Desenvolvimento Web (vFECOMPO)

Slides da palestra "Um pouco sobre desenvolvimento web", ministrada na vFecompo em 2013, na Escola ECOMPO.

Resumo: "Palestra com conteúdo introdutório e considerações sobre desenvolvimento web para alunos do curso técnico de informática".

Transcript

1. por  Fernando  A.  Damião  
2. ¡  Bolsista   no   Programa   de   Clima   Espacial   do   INPE   ¡  Cofundador  do  SJC  Hacker  Clube   ¡  Estuda  Web  a  um  tempo  
3. ¡  Começo   ¡  HTML5  +  CSS3  +  JavaScript   ¡  Desenvolvimento  focado  em  um  browser   ¡  Lista  de  browsers  e  suas  engines   ¡  Dicas   ¡  Coisas  para  estudar   ¡  Links  Legais  
4. ¡  Desenvolvimento  para  web  é  divido  em  duas   partes:  Servidor  e  Cliente   ¡  A   parte   servidor   é   feito   com   linguagens   como:  PHP,  Java,  Ruby  e  Python   ¡  A   parte   cliente   é   feita   com   HTML,   CSS   e   JavaScript  
5. ¡  HTML  NÃO  É  LINGUAGEM  DE  PROGRAMAÇÃO   ¡  Mas  nem  por  isso  é  menos  importante!  Ela  é   a  linguagem  que  a  web  usa  como  base  para  a   visualização  de  conteúdo.  
6. ¡  JavaScript   NÃO   É   Java,   por   isso   executa   no   browser  sem  instalar     §  E  por  isso  funciona  #joke  
7. ¡  Estamos  em  um  momento  de  mudança,  a   web  está  sendo  utilizada  como  plataforma   ¡  Um  sintoma  disso  são  aplicativos  feitos  com   as  tecnologias  utilizadas  na  web,  conhecidos   também  por  WebApps  
9. É  bom  ou  ruim?  
11. ¡  O   que   realmente   importa   é   o   motor   de   renderização,   ou   layout   engine,   não   o   browser   ¡  O  layout  engine  é  a  implementação  de  como   o  browser  interpretará  o  HTML  e  CSS  
12. ¡  No  “início”  um  motor  que  sempre  aterrorizou   os  desenvolvedores  foi  o  Trident  do  Internet   Explorer   ¡  Isso  porque  a  MS  não  se  preocupava    com  os   padrões,  coisa  que  vem  mudando  desde  o  IE9   ¡  Mas   algo   “maduro”   só   veio   mesmo   com   o             IE  10  
13. ¡  Só  vale  a  pena  focar  em  um  browser/engine   no  desenvolvimento  de  um  WebApp   §  Casos   como   iOS   (sim,   existe   essa   possibilidade),   Ubuntu/Ubuntu  Touch,  Firefox  OS   ¡  Um   WebApp   é   um   aplicativo   que   funciona   com   tecnologias   web   (cê   jura?),   muitas   das   interações  com  o  sistema  são  em  JavaScript  
14. Browser   Layout  Engine   JavaScript  Engine   IE   Trident   Chakra   Firefox   Gecko   Spider/Trace/Jäguer/Ion/   OdinMonkey   Opera   Presto  e  WebKit   Carakan/Futhark  e  V8   Safari   WebKit   Nitro   Chrome   WebKit   V8  
15. ¡  Sempre   idente   seu   código,   um   código   bem   escrito  e  que  é  entendível  é  identado   ¡  C o n v e r s e   c o m   s e u s   c o l e g a s   d e   desenvolvimento  e  defina  um  padrão   §  Se  são  tabs  ou  espaços  e  a  quantidade   ▪  Geralmente   para   desenvolvimento   Front-­‐End   são   2   espaços  
16. ¡  Códigos   CSS   inline   não   são   legais,   principalmente  para  manutenção   ¡  Prefira   colocar   todos   esses   códigos   em   um   arquivo  CSS  
17. ¡  Sempre  deixe  o  carregamento  de  JavaScript   no  final  da  página   ¡  Por  que  fazer  isso?   §  Porque   ao   deixar   no   final   da   página,   como   a   interpretação  do  HTML  é  seqüencial,  é  carregada   toda   a   DOM,   todos   os   estilos   e   imagens   e   após   isso   o   JavaScript,   isso   diminui   a   chance   de   inconsistências  
18. ¡  HTML5  +  CSS3  +  JavaScript   ¡  Responsive  Design  (RWD)  e  ou  Mobile  First   §  Da  trabalho  adaptar  para  diferentes  telas   ▪  Mas  é  recompensador   ¡  Alguma  biblioteca  de  JS  Server-­‐Side   §  Node.JS  é  uma  boa  
19. ¡  Maujor:  http://www.maujor.com/   ¡  Pinceladas  da  Web:   http://www.pinceladasdaweb.com.br/blog/   ¡  Zone  of  Front-­‐Enders:    http://zofe.com.br/   ¡  Smashing  Magazine:   http://smashingmagazine.com  
20. ¡  GitHub:  https://github.com/fadamiao   ¡  Twitter:  https://twitter.com/fadamiao