fundamentos de programação front-end
TRANSCRIPT
![Page 1: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/1.jpg)
Fundamentos de Programação Front-End
Copyright © 2017Fábio Nogueira de LucenaInstituto de Informática (UFG)
Visão geral
![Page 2: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/2.jpg)
O q
ue p
reci
so?
![Page 3: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/3.jpg)
ContextoFora do escopo
No escopo...
![Page 4: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/4.jpg)
Servidor FORA DO ESCOPO
![Page 8: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/8.jpg)
Hardware (influência reduzida no curso)
![Page 9: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/9.jpg)
Browser
![Page 10: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/10.jpg)
Cliente (nosso usuário) fará uso, em geral, de ...
![Page 11: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/11.jpg)
Para desenvolver, sugiro o Chrome
https://www.google.com/chrome/browser/desktop/
![Page 12: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/12.jpg)
Por que?
chrome://net-internals
Control Shift I
![Page 13: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/13.jpg)
Fluxo entre cliente e servidor
![Page 14: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/14.jpg)
Enviar/receber mensagens HTTP
https://www.getpostman.com/
![Page 16: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/16.jpg)
OWASP Zed Attack Proxy
https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project
![Page 17: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/17.jpg)
OWASP ZAP
$ export http_proxy=http://localhost:8080$ curl http://cnn.com$ unset http_proxy
Usando apenas curlcurl http://cnn.com -x http://localhost:8080
![Page 19: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/19.jpg)
Criando "as respostas"
![Page 22: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/22.jpg)
Ember Twiddle (é opção para quem usa Ember)
https://ember-twiddle.com
![Page 23: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/23.jpg)
Exemplo de uso do Plunker (plnkr.co)
![Page 26: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/26.jpg)
Ferramentas (preview em vários dispositivos)
http://quirktools.com/screenfly
![Page 27: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/27.jpg)
Ferramentas (“embeleza” JSON no Chrome)
https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc
![Page 28: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/28.jpg)
Com o plugin...
Sem o plugin...
![Page 29: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/29.jpg)
Há outros plugins,Ember Inspector,por exemplo.
https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en
![Page 30: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/30.jpg)
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
![Page 32: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/32.jpg)
Exemplo de uso da tecnologia Electron!
![Page 33: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/33.jpg)
CDN (Content Delivery Network)Armazenar arquivos de imagens, áudio, JavaScript, ...
![Page 34: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/34.jpg)
Onde depositardados?
Se for uma biblioteca de usoamplo…?
https://cdnjs.com
![Page 35: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/35.jpg)
Tipos de conteúdo (Media types, antigo MIME types)
https://www.iana.org/assignments/media-types/media-types.xhtml
![Page 36: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/36.jpg)
Referência
https://www.w3.org/TR/html/index.html#contents
![Page 38: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/38.jpg)
HTTP (Hypertext Transfer Protocol)
https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
![Page 39: Fundamentos de Programação Front-End](https://reader034.vdocuments.site/reader034/viewer/2022051521/5a650ecc7f8b9af5298b491d/html5/thumbnails/39.jpg)
Dicas para usar imagens...