O documento aborda fundamentos de programação front-end, incluindo ferramentas e tecnologias como Node.js, npm, e o uso de navegadores para desenvolvimento. Ele oferece links e referências para testes de funcionalidades HTML5 e práticas de compressão de arquivos. Além disso, menciona recursos como Progressive Web Apps e Content Delivery Networks.

1. Fundamentos de
Programação Front-End
Copyright © 2017
Fábio Nogueira de Lucena
Instituto de Informática (UFG)
Visão geral

2. Oquepreciso?

3. Contexto
Fora do escopo
No escopo...

4. Servidor
FORA DO ESCOPO

5. NodeJS
https://nodejs.org

6. npm
https://www.npmjs.com

7. gruntjs
https://gruntjs.com

8. Hardware (influência reduzida no curso)

9. Browser

10. Cliente (nosso usuário) fará uso, em geral, de ...

11. Para desenvolver, sugiro o Chrome
https://www.google.com/chrome/browser/desktop/

12. Por que?
chrome://net-internals
Control Shift I

13. Fluxo entre cliente e servidor

14. Enviar/receber mensagens HTTP
https://www.getpostman.com/

15. curl (imbatível via linha de comandos)
https://curl.haxx.se/

16. OWASP Zed Attack Proxy
https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project

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. Mais uma opção para investigar HTTP...
https://httpbin.org

19. Criando "as respostas"

20. Brackets (para criar código em HTML, JavaScript, …)
http://brackets.io/

21. Editor on-line
http://plnkr.co/

22. Ember Twiddle (é opção para quem usa Ember)
https://ember-twiddle.com

23. Exemplo de uso do Plunker (plnkr.co)

24. Ferramentas (seu browser satisfaz HTML5?)
http://html5test.com

25. Ferramentas (posso usar determinado recurso?)
http://caniuse.com

26. Ferramentas (preview em vários dispositivos)
http://quirktools.com/screenfly

27. Ferramentas (“embeleza” JSON no Chrome)
https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc

28. Com o plugin...
Sem o plugin...

29. Há outros plugins,
Ember Inspector,
por exemplo.
https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoco
nhi?hl=en

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. O que posso
fazer com HTML,
JavaScript
e CSS?

32. Exemplo de uso da tecnologia Electron!

33. CDN (Content Delivery Network)
Armazenar arquivos de imagens, áudio, JavaScript, ...

34. Onde depositar
dados?
Se for uma biblioteca de uso
amplo…?
https://cdnjs.com

35. Tipos de conteúdo (Media types, antigo MIME types)
https://www.iana.org/assignments/media-types/media-types.xhtml

36. Referência
https://www.w3.org/TR/html/index.html#contents

37. HEAD (parte de uma página)
http://gethead.info/

38. HTTP (Hypertext Transfer Protocol)
https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

39. Dicas para usar imagens...