Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fundamentos de Programação Front-End

216 views

Published on

Apresentação do curso de fundamentos de programação front-end. Curso inicial, será complementado por outros.

Published in: Software
  • Be the first to comment

Fundamentos de Programação Front-End

  1. 1. Fundamentos de Programação Front-End Copyright © 2017 Fábio Nogueira de Lucena Instituto de Informática (UFG) Visão geral
  2. 2. Oquepreciso?
  3. 3. Contexto Fora do escopo No escopo...
  4. 4. Servidor FORA DO ESCOPO
  5. 5. NodeJS https://nodejs.org
  6. 6. npm https://www.npmjs.com
  7. 7. gruntjs https://gruntjs.com
  8. 8. Hardware (influência reduzida no curso)
  9. 9. Browser
  10. 10. Cliente (nosso usuário) fará uso, em geral, de ...
  11. 11. Para desenvolver, sugiro o Chrome https://www.google.com/chrome/browser/desktop/
  12. 12. Por que? chrome://net-internals Control Shift I
  13. 13. Fluxo entre cliente e servidor
  14. 14. Enviar/receber mensagens HTTP https://www.getpostman.com/
  15. 15. curl (imbatível via linha de comandos) https://curl.haxx.se/
  16. 16. OWASP Zed Attack Proxy https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project
  17. 17. OWASP ZAP $ export http_proxy=http://localhost:8080 $ curl http://cnn.com $ unset http_proxy Usando apenas curl curl http://cnn.com -x http://localhost:8080
  18. 18. Mais uma opção para investigar HTTP... https://httpbin.org
  19. 19. Criando "as respostas"
  20. 20. Brackets (para criar código em HTML, JavaScript, …) http://brackets.io/
  21. 21. Editor on-line http://plnkr.co/
  22. 22. Ember Twiddle (é opção para quem usa Ember) https://ember-twiddle.com
  23. 23. Exemplo de uso do Plunker (plnkr.co)
  24. 24. Ferramentas (seu browser satisfaz HTML5?) http://html5test.com
  25. 25. Ferramentas (posso usar determinado recurso?) http://caniuse.com
  26. 26. Ferramentas (preview em vários dispositivos) http://quirktools.com/screenfly
  27. 27. Ferramentas (“embeleza” JSON no Chrome) https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc
  28. 28. Com o plugin... Sem o plugin...
  29. 29. Há outros plugins, Ember Inspector, por exemplo. https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoco nhi?hl=en
  30. 30. Referências, ferramentas, links, … ● Comprimir JS e CSS (http://davidb.github.io/yuicompressor-maven-plugin/) ● Instant Apps ● Progressive Web Apps (PWA) ● https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfill s ● Pollyfill https://remysharp.com/2010/10/08/what-is-a-polyfill ● Web server for chrome ● Ionicframework ● Surge.sh
  31. 31. O que posso fazer com HTML, JavaScript e CSS?
  32. 32. Exemplo de uso da tecnologia Electron!
  33. 33. CDN (Content Delivery Network) Armazenar arquivos de imagens, áudio, JavaScript, ...
  34. 34. Onde depositar dados? Se for uma biblioteca de uso amplo…? https://cdnjs.com
  35. 35. Tipos de conteúdo (Media types, antigo MIME types) https://www.iana.org/assignments/media-types/media-types.xhtml
  36. 36. Referência https://www.w3.org/TR/html/index.html#contents
  37. 37. HEAD (parte de uma página) http://gethead.info/
  38. 38. HTTP (Hypertext Transfer Protocol) https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
  39. 39. Dicas para usar imagens...

×