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

1. Desenvolvemos para WEB?
Guia simples de desenvolvimento
para WEB (bem simples)

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Adicionais
•
•
•
•
REST
Canvas e WebGL
BootStrap, Fundation
Bibliotecas maneiras
–
–
–
–
–
JQuery
AngularJS
Backbone
Underscore
Moments

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. 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. 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. NodeJS
•É muito legal
•Mas legal mesmo

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. Obrigado
• Clap, clap, clap (espero)
• Mais clap, clap, clap

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