Fundamentos de Programação Front-End

Copyright © 2017Fábio Nogueira de LucenaInstituto de Informática (UFG)

Visão geral

O q

ue p

reci

so?

ContextoFora do escopo

No escopo...

Servidor FORA DO ESCOPO

NodeJS

https://nodejs.org

npm

https://www.npmjs.com

gruntjs

https://gruntjs.com

Hardware (influência reduzida no curso)

Browser

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

Para desenvolver, sugiro o Chrome

https://www.google.com/chrome/browser/desktop/

Por que?

chrome://net-internals

Control Shift I

Fluxo entre cliente e servidor

Enviar/receber mensagens HTTP

https://www.getpostman.com/

curl (imbatível via linha de comandos)

https://curl.haxx.se/

OWASP Zed Attack Proxy

https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project

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

Mais uma opção para investigar HTTP...

https://httpbin.org

Criando "as respostas"

Brackets (para criar código em HTML, JavaScript, …)

http://brackets.io/

Editor on-line

http://plnkr.co/

Ember Twiddle (é opção para quem usa Ember)

https://ember-twiddle.com

Exemplo de uso do Plunker (plnkr.co)

Ferramentas (seu browser satisfaz HTML5?)

http://html5test.com

Ferramentas (posso usar determinado recurso?)

http://caniuse.com

Ferramentas (preview em vários dispositivos)

http://quirktools.com/screenfly

Ferramentas (“embeleza” JSON no Chrome)

https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc

Com o plugin...

Sem o plugin...

Há outros plugins,Ember Inspector,por exemplo.

https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en

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

O que posso fazer com HTML,JavaScripte CSS?

Exemplo de uso da tecnologia Electron!

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

Onde depositardados?

Se for uma biblioteca de usoamplo…?

https://cdnjs.com

Tipos de conteúdo (Media types, antigo MIME types)

https://www.iana.org/assignments/media-types/media-types.xhtml

Referência

https://www.w3.org/TR/html/index.html#contents

HEAD (parte de uma página)

http://gethead.info/

HTTP (Hypertext Transfer Protocol)

https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

Dicas para usar imagens...