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– www.lvendrame.com– @lvendrame_br
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)
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)
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
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)
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...
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
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
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
HTTP
• POST– Utilizado para enviar informações no servidor.– As informações são colocadas no corpo.– Exemplo:
POST /index.html HTTP/1.0Accept: text/htmlIf-modified-since: Sat, 29 Oct 1999 19:43:31 GMTContent-Type: application/x-www-form-urlencodedContent-Length: 41
Nome=NomePessoa&Idade=99&Curso=Computacao
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
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
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
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
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
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
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
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
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.
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
Adicionais
• REST• Canvas e WebGL• BootStrap, Fundation• Bibliotecas maneiras– JQuery– AngularJS– Backbone– Underscore– Moments
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
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.
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
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 ficará rico com desenvolvedores motivados, mas quem liga, desde que eles nos deixem fazer coisas legais e ainda nos pagarem pra isto
Obrigado
• Clap, clap, clap (espero)• Mais clap, clap, clap
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=en-US&redirectslug=Jav
aScript• 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
Top Related