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