0
Desenvolvemos para WEB?
Guia simples de desenvolvimento
para WEB (bem simples)
Quem sou
Luís Fernando Vendrame
– Desenvolvedor na Digisystem
– Gosta das coisas das internets
– Gosta de velocidade nela
...
O que é necessário
• Um navegador (de preferência vários)
• Um Servidor WEB(se for pra desenvolver,
necessitaremos de um s...
O que faz um Servidor WEB
• Faz escuta em alguma porta do computador
(geralmente a 80 e a 8080)
• Intercepta os dados que ...
Conhecimento Necessários
• HTTP (se quiser ser considerado um
desenvolvedor WEB, conheça o caminhão que
transporta toda a ...
HTTP
• URL
– Se a informação chegou no servidor, ela veio por meio
de uma URL
– Formato: protocolo://host/caminho/recurso
...
HTTP
• Cabeçalho
– Indica o tipo de chamada
– É lá também que moram informações adicionais
• Content-Type
• Cookies
• Se a...
HTTP
• Corpo
– Opcional
– Conteúdo da chamada
• Informações do Post
• Informações do Response

– Deve respeitar o Content-...
HTTP
• GET
– Usado para a requisição de algum recurso
– Por padrão carrega as informações necessárias
direto na URL
– Exem...
HTTP
• HEAD
– Variação do GET, porém o servidor não retornará
nenhum conteúdo, apenas o cabeçalho.
– Usado geralmente para...
HTTP
• POST
– Utilizado para enviar informações no servidor.
– As informações são colocadas no corpo.
– Exemplo:
POST /ind...
HTTP
• PUT
– Utilizado para enviar recurso para o servidor.
– O recurso é colocado no corpo.

• DELETE
– Utilizado para in...
HTTP
• TRACE
– Ecoa o pedido, de maneira que o cliente possa saber o
que os servidores intermediários estão mudando em
seu...
HTTP
• Códigos de Estado
– São muito utilizados pelos interpretadores em Servidores
WEB para informarem o status da requis...
HTTP
• Códigos de Estado
– São pouco utilizados pelos programadores, muito
por falta de conhecimento
– Simplifica a comuni...
Interpretador
• Recebe do servidor WEB o contexto da requisição
(request) e esperam a resposta (response) do
interpretador...
HTML
• Linguagem de marcação de hypertexto, que,
geralmente em conjunto com CSS e JavaScript, os
navegadores processam par...
CSS
• Folha de estilo em cascata
• Em cascata, ou seja, o que vier depois substituirá o que
veio antes nos casos em que es...
JavaScript
• Linguagem de script que segue as
especificações do ECMAScript
• Flexível e poderosa, permite fazer diversas
m...
JavaScript
• É importante ler documentações e aprender a
utilizar a linguagem
• Ela é legal pra quem sabe, um misto entre
...
Estratégias
• Reduzir a quantidade de requests
• Reduzir o tamanho dos requests e responses
• CSS no começo, mas JavaScrip...
Adicionais
•
•
•
•

REST
Canvas e WebGL
BootStrap, Fundation
Bibliotecas maneiras
–
–
–
–
–

JQuery
AngularJS
Backbone
Und...
Adicionais
• ADOBE agora faz mais ferramentas para
HTML5 do que para Flash, só não sei se eles
contaram
– CREATEJS (EASELJ...
NodeJS
• JavaScript ficou tão legal que foi parar no server
• Engine de interpretação é a V8, a mesma do Chrome que foi
de...
NodeJS
• Muitas empresas estão migrando seus sites
(PayPal, Twitter, LinkedIn, Walmart {que não
morreu na Black Friday}, e...
NodeJS

•É muito legal
•Mas legal mesmo
Conclusão
Da pra fazer uma Web rápida e legal
Desenvolvedores que fazem coisas legais
tendem a ficar mais motivados
Alguém...
Obrigado
• Clap, clap, clap (espero)
• Mais clap, clap, clap
Referências
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

http://www.webdevelopersnotes.com/basics/what_is_web_server.php
http://pt.w...
Upcoming SlideShare
Loading in...5
×

Desenvolvemos para web?

714

Published on

Dicas para desenvolvedores que querem fazer uma Web rápida e divertida.
Explicações sobre HTTP, HTML, CSS, JavaScripts, ferramentas e bibliotecas que fazem nossa vida mais fácil

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
714
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Desenvolvemos para web?"

  1. 1. Desenvolvemos para WEB? Guia simples de desenvolvimento para WEB (bem simples)
  2. 2. Quem sou Luís Fernando Vendrame – Desenvolvedor na Digisystem – Gosta das coisas das internets – Gosta de velocidade nela – www.lvendrame.com – @lvendrame_br
  3. 3. O que é necessário • Um navegador (de preferência vários) • Um Servidor WEB(se for pra desenvolver, necessitaremos de um servidor WEB, se for pra fazer um sitezinho, não) • Uma linguagem que seja interpretada e processada pelo seu servidor • Um banco de dados (a maioria das aplicações utilizaram um banco de dados)
  4. 4. O que faz um Servidor WEB • Faz escuta em alguma porta do computador (geralmente a 80 e a 8080) • Intercepta os dados que chegam na porta – Transforma os dados em uma chamada HTTP. – Passa a informação para o interpretador necessário. • Interpretador processa a chamada e verifica o que deve servir. – Arquivos estáticos – Arquivos dinâmicos (é aqui que mora o desenvolvimento)
  5. 5. Conhecimento Necessários • HTTP (se quiser ser considerado um desenvolvedor WEB, conheça o caminhão que transporta toda a comunicação) • ASP.Net, JSP, PHP, Node.JS? Talvez???? • HTML, CSS • JavaScript
  6. 6. HTTP • URL – Se a informação chegou no servidor, ela veio por meio de uma URL – Formato: protocolo://host/caminho/recurso – A URL por si só carrega muitas informações • • • • O protocolo, no caso, HTTP ou HTTPS Host (endereço do servidor e porta de entrada) Caminho: caminho do recurso no servidor WEB Recurso (o conteúdo que necessitamos, pode ser estático ou dinâmico) • Query String (?chave=valor)
  7. 7. HTTP • Cabeçalho – Indica o tipo de chamada – É lá também que moram informações adicionais • Content-Type • Cookies • Se aceita compactação do conteúdo e o tipo de compactação • Qual o navegador • Qual o SO • Versão, tamanho, data, etc do recurso que está no cache do navegador • Etc...
  8. 8. HTTP • Corpo – Opcional – Conteúdo da chamada • Informações do Post • Informações do Response – Deve respeitar o Content-Type • Tipos de chamadas – GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS e CONNECT
  9. 9. HTTP • GET – Usado para a requisição de algum recurso – Por padrão carrega as informações necessárias direto na URL – Exemplo: GET /index.html HTTP/1.1 Host: www.exemplo.com
  10. 10. HTTP • HEAD – Variação do GET, porém o servidor não retornará nenhum conteúdo, apenas o cabeçalho. – Usado geralmente para obter metadados. – Nunca usei diretamente, se o navegador utilizou por mim, obrigado
  11. 11. HTTP • POST – Utilizado para enviar informações no servidor. – As informações são colocadas no corpo. – Exemplo: POST /index.html HTTP/1.0 Accept: text/html If-modified-since: Sat, 29 Oct 1999 19:43:31 GMT Content-Type: application/x-www-form-urlencoded Content-Length: 41 Nome=NomePessoa&Idade=99&Curso=Computacao
  12. 12. HTTP • PUT – Utilizado para enviar recurso para o servidor. – O recurso é colocado no corpo. • DELETE – Utilizado para indicar ao servidor que determinado recurso deve ser excluído – O recurso é indicado diretamente na URL
  13. 13. HTTP • TRACE – Ecoa o pedido, de maneira que o cliente possa saber o que os servidores intermediários estão mudando em seu pedido • OPTIONS – Recupera os métodos HTTP que o servidor aceita • CONNECT – Serve para uso com um proxy que possa se tornar um túnel SSL
  14. 14. HTTP • Códigos de Estado – São muito utilizados pelos interpretadores em Servidores WEB para informarem o status da requisição – Existem 5 faixas de uso: • 1xx: Informational - utilizada para enviar informações para o cliente de que sua requisição foi recebida e está sendo processada • 2xx: Success: indica que a requisição do cliente foi bem sucedida • 3xx: Redirection: informa a ação adicional que deve ser tomada para completar a requisição • 4xx: Client Error - avisa que o cliente fez uma requisição que não pode ser atendida • 5xx: Server Error - ocorreu um erro no servidor ao cumprir uma requisição válida
  15. 15. HTTP • Códigos de Estado – São pouco utilizados pelos programadores, muito por falta de conhecimento – Simplifica a comunicação de problemas e reduz o consumo de banda – Vários códigos de estado já possuem funções prédefinidas que atendem praticamente todas as necessidades, se não existe um para a sua necessidade, crie o seu utilizando os códigos sem predefinição
  16. 16. Interpretador • Recebe do servidor WEB o contexto da requisição (request) e esperam a resposta (response) do interpretador • Desenvolvedores trabalham em cima deste contexto, manipulando a resposta • Geralmente o corpo da resposta é uma string contendo o HTML manipulado • Atualmente XML e JSON também são bastante utilizados • Arquivos estáticos geralmente são localizados e enviados sem a interferência do desenvolvedor
  17. 17. HTML • Linguagem de marcação de hypertexto, que, geralmente em conjunto com CSS e JavaScript, os navegadores processam para exibir conteúdo • Deve conter apenas as informações a serem mostradas • Se for todo semântico a população agradece • HTML5 tem vários novos elementos legais de serem utilizados e que deixam o documento cada vez mais semântico
  18. 18. CSS • Folha de estilo em cascata • Em cascata, ou seja, o que vier depois substituirá o que veio antes nos casos em que estilos conflitarem • Em cascata, pare de usar “!important” por favor • Serve para definir o estilo de nossa aplicação, página, site ou como você quiser chamar • Media queries nos possibilitam o encaixe do HTML em diversos dispositivos. • CSS3 tem vários novos atributos legais de serem utilizados que deixaram os designers mais a vontade e felizes para criação
  19. 19. JavaScript • Linguagem de script que segue as especificações do ECMAScript • Flexível e poderosa, permite fazer diversas manipulações no HTML e interagir com o navegador • As engines de processamento de JavaScript dos navegadores estão cada vez mais otimizadas para a execução dos mesmos
  20. 20. JavaScript • É importante ler documentações e aprender a utilizar a linguagem • Ela é legal pra quem sabe, um misto entre orientada a objetos e funcional que no final não é nada disso. • A especificação ECMAScript 5 possui muitas APIs novas para serem utilizadas que ajudam bastante os desenvolvedores.
  21. 21. Estratégias • Reduzir a quantidade de requests • Reduzir o tamanho dos requests e responses • CSS no começo, mas JavaScript no final (ou no mínimo async) • Utilizar CDNs sempre que possível • Minificação da galera • Tome cuidado com a barreira que existe entre o DOM e o JavaScript, ela tem um pedágio, e o custo é alto
  22. 22. Adicionais • • • • REST Canvas e WebGL BootStrap, Fundation Bibliotecas maneiras – – – – – JQuery AngularJS Backbone Underscore Moments
  23. 23. Adicionais • ADOBE agora faz mais ferramentas para HTML5 do que para Flash, só não sei se eles contaram – CREATEJS (EASELJS, TWEENJS, SOUNDJS, PRELOADSJS), BRACKETS e vai saber mais o que • Emmet -> html>head>title{oi}^body>h1{eita}+div.content • SPDY
  24. 24. NodeJS • JavaScript ficou tão legal que foi parar no server • Engine de interpretação é a V8, a mesma do Chrome que foi desenvolvida pelo Google • Processamento não bloqueante • Ta dando pau em outros interpretadores, e sem compilar • Permite utilizar códigos compilados em C++ para processamentos pesados • Não precisa de nenhum zereguede para transformar JSON, e o navegador gosta de enviar JSON, e o NodeJS tem ele em sua alma, afinal... • Bibliotecas e APIs em um só lugar, com uma facilidade de instalação que eu até choro • A comunidade ta louca e ativa. • É muito legal, mas legal mesmo.
  25. 25. NodeJS • Muitas empresas estão migrando seus sites (PayPal, Twitter, LinkedIn, Walmart {que não morreu na Black Friday}, entre outros {http://nodejs.org/industry/}) • Joyent agora da suporte, uau!!! • É muito legal • Mas legal mesmo
  26. 26. NodeJS •É muito legal •Mas legal mesmo
  27. 27. Conclusão Da pra fazer uma Web rápida e legal Desenvolvedores que fazem coisas legais tendem a ficar mais motivados Alguém ficará rico com desenvolvedores motivados, mas quem liga, desde que eles nos deixem fazer coisas legais e ainda nos pagarem pra isto
  28. 28. Obrigado • Clap, clap, clap (espero) • Mais clap, clap, clap
  29. 29. Referências • • • • • • • • • • • • • • • • • http://www.webdevelopersnotes.com/basics/what_is_web_server.php http://pt.wikipedia.org/wiki/Hypertext_Transfer_Protocol http://pt.wikipedia.org/wiki/Anexo:Lista_de_c%C3%B3digos_de_status_HTTP http://www.w3.org/Protocols/ http://dev.chromium.org/spdy https://developer.mozilla.org/en-US/docs/Web/JavaScript?redirectlocale=enUS&redirectslug=JavaScript http://www.ecma-international.org/publications/standards/Ecma-262.htm http://brackets.io/ http://emmet.io/ http://bonsaiden.github.io/JavaScript-Garden/ http://www.createjs.com/#!/CreateJS http://getbootstrap.com/ http://foundation.zurb.com/ http://nodejs.org/ http://browserdiet.com/pt/ Zakas, Nicholas C. – JavaScript de Alto Desempenho – Novatec – 2010 Souders, Steve – Alta Performance em Sites Web – Alta Books - 2007
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×