Download - Desenvolvemos para web?
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