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