Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

A (r)evolução do front-end

13 122 vues

Publié le

Publié dans : Technologie
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Excelente apresentação, algumas das ferramentas citadas eu não conhecia e já estou pesquisando sobre.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Muito boa a apresentação!
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Parabéns pela apresentação. Muito legal
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

A (r)evolução do front-end

  1. 1. A(R)EVOLUÇÃODOFRONT-END
  2. 2. MARLOSCARMOGERENTEDEOPERAÇÕESDIGITAISNARCCOMUNICAÇÃO#SOUDEVHÁ15ANOS/#SOUCHEFEHÁ8ANOS
  3. 3. marlos@gmail.comtwitter.com/marloscarmofacebook.com/marloscarmogithub.com/marloscarmo
  4. 4. Há15anosatrásnão“existia”adisciplinadefront-end...
  5. 5. Ouvocêera:
  6. 6. Ouvocêera:webmaster
  7. 7. Ouvocêera:webmaster ou
  8. 8. Ouvocêera:webmaster webdesignerou
  9. 9. Nofinaldascontaseraquaseamesmacoisaeoqueosdiferenciavaera...
  10. 10. webmasterfaziasitescomfundopreto
  11. 11. webdesignerfaziasitescomfundobranco
  12. 12. Em1998ossiteserampraticamentetodosestáticoseoseditoresWYSIWYGreinavam.
  13. 13. FrontPage
  14. 14. Dreamweaver
  15. 15. Nãoexistianenhumapreocupaçãocomocódigoesuamanutenção.“Desenhou”ositenoFrontPageerodounoIE.#pronto
  16. 16. Oscódigosficavam“umabeleza”.ImaginemtodooHTML,oCSSeoJavaScriptnomesmoarquivo.
  17. 17. AartedoCTRL+C/Ctrl+Vprevalecia.Existiamdiretórioscomváriostiposdemenus,gifsanimados,DHTMLs,Appletsetudomais.Erasócopiarecolarnoseucódigo.
  18. 18. Comopassardotempoadivisãodoscargosfoiaumentandojuntocomapopularizaçãodastecnologias.webdesignerwebdeveloperwebwriterprogramadorASPprogramadorPHP
  19. 19. webdesignerwebdeveloperwebwriterprogramadorASPprogramadorPHPmeninodoHTMLComopassardotempoadivisãodoscargosfoiaumentandojuntocomapopularizaçãodastecnologias.
  20. 20. Osprogramadoresqueseespecializavamseguiamocaminhodoback-end,poisláestavatodaamagia.“Você,meninodoHTML,umdiaseráumprogramadorback-end”(masenquantoissorecorteestas42telasaquiparahoje)
  21. 21. IssosetornoumaisforteaindacomapopularizaçãodoFlash.Ossitesnãoprecisavamtermuitoconteúdo,desdequetivessemumaanimaçãodeabertura.
  22. 22. Enosdiasdehojeacoisamudoumuito.OmeninodoHTMLagoratematénome:FRONT-ENDENGINEER
  23. 23. EotrabalhoficacadavezmaisCOMPLEXO
  24. 24. Antes,oJavaScriptquenãoeralevadoasérioeeraconsideradoumaTOYLANGUAGE
  25. 25. Atualmenteestásetornandoumalinguagemcadavezmaisuniversal.
  26. 26. ETCBROWSER WEB APPSMOBILE APPS DESKTOP APPSSERVIDOR
  27. 27. Eumbomprofissionaldefront-endtemqueentenderbemdasseguintesdisciplinas...
  28. 28. SEGURANÇATESTESACESSIBILIDADESUPORTE MULTI-BROWSERSSUPORTE MULTI-DEVICESSUPORTE MULTI-TELASPERFORMANCECONHECIMENTOS DE SERVERSEO
  29. 29. ALGUNSPASSOSPARAUMBOMFRONT-END
  30. 30. NãouseIE
  31. 31. #prontoAjudaracomunidadetambémésuperimportante.
  32. 32. EscolhaumbomEDITOR
  33. 33. SublimeTexthttp://www.sublimetext.com/
  34. 34. VIMhttp://www.vim.org/
  35. 35. NÃOREIVENTEARODAUseasmelhorespráticas
  36. 36. HTML5Boilerplatehttp://html5boilerplate.com/
  37. 37. HTML5Boilerplate
  38. 38. HTMLEmailBoilerplatehttp://htmlemailboilerplate.com/
  39. 39. HTMLEmailBoilerplate
  40. 40. TwitterBootstraphttp://twitter.github.io/bootstrap/
  41. 41. TwitterBootstrap
  42. 42. USEFRAMEWORKS(commoderação)
  43. 43. AngularJShttp://angularjs.org
  44. 44. Backbone.JShttp://backbonejs.org/
  45. 45. Emberhttp://emberjs.com/
  46. 46. Meteorhttp://meteor.com/
  47. 47. 7PRINCÍPIOSdoMeteor
  48. 48. DataonthewireNuncatrafegueHTML.Envieainformaçãoedeixeoclientedecidircomoapresentá-la.1
  49. 49. OneLanguageEscrevaJavaScriptnofrontenoback-end.Reutilizeseuscódigos.2
  50. 50. DatabaseEverywhereUseamesmaAPIparaacessarseubancodedadosnoclientenoserver.3
  51. 51. LatencyCompensationSimulalatênciazerocomobancodedadosnoservidor.4
  52. 52. FullStackReactivityFaçarealtimeporpadrão.Todasascamadas,dobancoaotemplate,devemserorientadasaoseventosdeinterface.5
  53. 53. EmbracetheEcosystemMeteoréopensourceeintegra,aoinvésdesubstituir,ferramentaseframeworksexistentes.6
  54. 54. SimplicityEqualsProductivityAmelhormaneiradefazeralgoparecersimplesétorná-lorealmentesimples.BuscamosissoatravésdeumaAPIcleaneextremamentesfácil.7
  55. 55. AUTOMATIZEseusscripts
  56. 56. http://coffeescript.org/
  57. 57. http://sass-lang.com/
  58. 58. variáveishttp://sass-lang.com/
  59. 59. variáveisexpressõeshttp://sass-lang.com/
  60. 60. variáveisexpressõesherançahttp://sass-lang.com/
  61. 61. códigodinâmicohttp://lesscss.org/
  62. 62. EMMET.IOhttp://www.emmet.io/
  63. 63. http://jade-lang.com/
  64. 64. http://www.jshint.com/
  65. 65. ENXUGUEaomáximoseusite
  66. 66. http://yslow.org/
  67. 67. https://developers.google.com/speed/pagespeed/?hl=pt-BR
  68. 68. http://browserdiet.com/pt/Comoperderpesonobrowser?
  69. 69. PreparebemseuAMBIENTE
  70. 70. Yeomanconsisteemumconjuntodeferramentasvoltadasparacriarrapidamenteumnovoprojetowebegerenciá-loduranteoprocesso.http://yeoman.io/
  71. 71. Fazumscaffolddaestruturadoseuprojeto.$yo webapp
  72. 72. Fazumscaffolddaestruturadoseuprojeto.$yo webapp
  73. 73. ElevaipassarumJSHintnocódigo,compilararquivosCoffeeScripteSASS,utilizaror.jsparacompilareotimizarmódulosAMD,juntareminificararquivos.csse.js,comprimirasimagensutilizandooOptiPNGpara.pngeJPEGtran-turbopara.jpeg,vairodarostestesutilizandoPhantomJSeutilizaroConfess.jsparacriaroarquivodecachedaaplicação.
  74. 74. $grunt server // cria um servidor e altera em tempo real$grunt test // roda os testes da sua aplicação$grunt build // monta sua aplicação para produção
  75. 75. $grunt server // cria um servidor e altera em tempo real$grunt test // roda os testes da sua aplicação$grunt build // monta sua aplicação para produção
  76. 76. Gerenciadependênciasdoseuprojeto.Baixa,adicionaeatualizaocomponentedeformaautomatizada.$bower install jquery$bower update jquery
  77. 77. ExistealgumasoutrasopçõesaoYEOMANBrunch CodeKitLiveReload
  78. 78. OGOOGLEquerlereentenderseusite
  79. 79. http://www.woorank.com/Woorank
  80. 80. http://www.seomoz.org/toolsSEOMOZTools
  81. 81. www.slideshare.net/fabioricotta/seo-para-frontend-beagajsDicas-MestreSEO
  82. 82. TESTEsuaaplicação
  83. 83. http://www.youtube.com/watch?v=5z6eFve4TxIQUnit
  84. 84. DEPLOY!esqueçaoftp
  85. 85. CAPISTRANOhttp://capify.orgRSYNChttp://rsync.samba.org/FABRIChttp://docs.fabfile.org/en/1.6/
  86. 86. defineoambientededesenvolvimentocodeby@ruyadorno
  87. 87. defineoambientedeproduçãocodeby@ruyadorno
  88. 88. configuraoprojetonoambienteescolhidocodeby@ruyadorno
  89. 89. atualizaoprojetonoambienteescolhidocodeby@ruyadorno
  90. 90. $fab dev updateatualizaroprojetonoambientededesenvolvimento
  91. 91. $fab dev updateatualizaroprojetonoambientededesenvolvimento$fab prod updateatualizaroprojetonoambientedeprodução
  92. 92. ParticipeativamentedaCOMUNIDADE
  93. 93. http://braziljs.org/BrazilJS
  94. 94. http://www.facebook.com/groups/beagajs/BeagaJS
  95. 95. http://zofe.com.br/ZOFE
  96. 96. OBRIGADO@marloscarmo

×