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
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
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
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