1
ApresentaçãoRafael Capuchorafael.capucho@gmail.com@rafaelcapuchoCiência da ComputaçãoUniversidade Federal de São PauloICT ...
Volta no tempoComecei a programar em meados de 2002~2003.Pude trabalhar até agora com:XHTML, CSS, Javascript, Python, PHP,...
Pacote mínimo para desenvolvimento webLinguagens de Marcação:HTML, xHTML, HTML 5Linguagens para folha de estilo:CSSLinguag...
Servidor Web               5
Cabeçalho HTTP de Requisição Simpleshttp://www.sjc.unifesp.br/portal/GET /portal/ HTTP/1.1Host: www.sjc.unifesp.brUser-Age...
Cabeçalho HTTP de Resposta SimplesHTTP/1.1 200 OKDate: Wed, 04 Apr 2012 20:46:07 GMTServer: ApacheX-Powered-By: PHP/5.2.14...
Servidor Web Simples em Pythonfrom os import curdir as pwd                                  if __name__ == __main__:from o...
Servidores Web (Ready for Action)             Strong focus on high concurrency, performance and low             memory usa...
Diagrama Caminho das Requisições                                   10
(Outros)   Servidores Web (Ready for Action)                         Maintainer: Facebook                         Além de ...
Servidores pela totalidade de sites ativos                                         12
Primeiros Passos com HTML 5<!DOCTYPE html><html>  <head>     <meta http-equiv="Content-Type" content="text/html; charset=U...
Primeiros Passos com HTML 5<!DOCTYPE html><html>  <head>     <meta http-equiv="Content-Type" content="text/html; charset=U...
Primeiros Passos com HTML 5<!DOCTYPE html><html>  <head>...</head> (igual anteriormente)  <body>     <!-- Comentário -->  ...
Primeiros Passos com HTML 5<!DOCTYPE html><html>  <head>...</head> (igual anteriormente)  <body>     <!-- Comentário -->  ...
Primeiros Passos com HTML 5<!DOCTYPE html><html>  <head>...</head> (igual anteriormente)  <body>     <img src=”luz.jpg” bo...
Primeiros Passos com HTML 5<!DOCTYPE html><html>  <head>...</head> (igual anteriormente)  <body>     <img src=”luz.jpg” bo...
Primeiros Passos com HTML 5<!DOCTYPE html><html>  <head>...</head> (igual anteriormente)  <body>     <select name="genero"...
Primeiros Passos com HTML 5<!DOCTYPE html><html>  <head>...</head> (igual anteriormente)  <body>     <select name="genero"...
Primeiros Passos com HTML 5<!DOCTYPE html><html>  <head>...</head> (igual anteriormente)  <body>     <form action="" metho...
Primeiros Passos com HTML 5<!DOCTYPE html><html>  <head>...</head> (igual anteriormente)  <body>     <form action="" metho...
Primeiros Passos com CSS<!DOCTYPE html><html>  <head>...(igual anteriormente)     <style type="text/css">          .nome {...
Primeiros Passos com CSS<!DOCTYPE html><html>  <head>...(igual anteriormente)     <style type="text/css">          .nome {...
Primeiros Passos com Javascript<!DOCTYPE html><html>  <head>...(igual anteriormente)     <script type="text/javascript">  ...
Primeiros Passos com Javascript<!DOCTYPE html><html>  <head>...(igual anteriormente)     <script type="text/javascript">  ...
Primeiros Passos com Javascript<!DOCTYPE html><html>  <head>...(igual anteriormente)     <script type="text/javascript">  ...
Primeiros Passos com Javascript<!DOCTYPE html><html>  <head>...(igual anteriormente)     <script type="text/javascript">  ...
Primeiros Passos com Javascript<!DOCTYPE html><html>  <head>...(igual anteriormente)     <script type="text/javascript">  ...
Primeiros Passos com Javascript<!DOCTYPE html><html>  <head>...(igual anteriormente)     <script type="text/javascript">  ...
Dúvidas?rafael.capucho@gmail.com@rafaelcapuchoObrigado                           31
Upcoming SlideShare
Loading in …5
×

Introdução a Desenvolvimento Web

816 views

Published on

Introdução a Desenvolvimento Web, passando por todas as etapas do desenvolvimento, como noções de Servidores Web, criando o seu próprio servidor web simples em Python e entendendo noções de HTML, CSS e Javascript.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
816
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introdução a Desenvolvimento Web

  1. 1. 1
  2. 2. ApresentaçãoRafael Capuchorafael.capucho@gmail.com@rafaelcapuchoCiência da ComputaçãoUniversidade Federal de São PauloICT – Instituto de Ciência e TecnologiaPESL – Programa de Educação em Software Livre 2
  3. 3. Volta no tempoComecei a programar em meados de 2002~2003.Pude trabalhar até agora com:XHTML, CSS, Javascript, Python, PHP, C/C++, Coldfusion, Java, Actionscript, Melscript, XML,Perl, Ruby, Prolog, Haskell, Bash. (17+) 3
  4. 4. Pacote mínimo para desenvolvimento webLinguagens de Marcação:HTML, xHTML, HTML 5Linguagens para folha de estilo:CSSLinguagens client-side:Javascript, Dart?Linguagens server-side:Python, PHP, Java, Perl, Ruby, Haskell, Lua. 4
  5. 5. Servidor Web 5
  6. 6. Cabeçalho HTTP de Requisição Simpleshttp://www.sjc.unifesp.br/portal/GET /portal/ HTTP/1.1Host: www.sjc.unifesp.brUser-Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:11.0) Gecko/20100101 Firefox/11.0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en,en-us;q=0.8,it-it;q=0.5,it;q=0.3Accept-Encoding: gzip, deflateConnection: keep-alive 6
  7. 7. Cabeçalho HTTP de Resposta SimplesHTTP/1.1 200 OKDate: Wed, 04 Apr 2012 20:46:07 GMTServer: ApacheX-Powered-By: PHP/5.2.14-pl0-gentooSet-Cookie: SESSc53d649b707f629d1e0698e4b02896f0=f70c13fd9f7e07da7e4fb7590f8cf130; expires=Sat, 28-Apr-2012 00:19:27 GMT; path=/; domain=.sjc.unifesp.brExpires: Sun, 19 Nov 1978 05:00:00 GMTLast-Modified: Wed, 04 Apr 2012 20:46:07 GMTCache-Control: store, no-cache, must-revalidate, post-check=0, pre-check=0Content-Length: 42711Keep-Alive: timeout=10, max=198Connection: Keep-AliveContent-Type: text/html; charset=utf-8 7
  8. 8. Servidor Web Simples em Pythonfrom os import curdir as pwd if __name__ == __main__:from os import sep as separador try:from BaseHTTPServer import BaseHTTPRequestHandler server = HTTPServer((, 7777), MeuHandler)from BaseHTTPServer import HTTPServer server.serve_forever() except KeyboardInterrupt:class MeuHandler(BaseHTTPRequestHandler): server.socket.close() def do_GET(self): try: if self.path.endswith(".html"): Executanto: f = open(pwd + separador + self.path) self.send_response(200) $ python servidor.py self.send_header(Content-type, text/html) self.end_headers() Visualizando: self.wfile.write(f.read()) f.close() Http://127.0.0.1:7777/arquivo.html except IOError: self.send_error(404,File Not Found: %s % self.path) def do_POST(self): self.wfile.write("<p>POST</p>"); 8 (continua na outra coluna)
  9. 9. Servidores Web (Ready for Action) Strong focus on high concurrency, performance and low memory usage. (sic) Rápido, Configurável, LoadBalancer, Estável Although the main design goal of Apache is not to be the "fastest" web server. (sic) Configurável, Padrão de Mercado 9
  10. 10. Diagrama Caminho das Requisições 10
  11. 11. (Outros) Servidores Web (Ready for Action) Maintainer: Facebook Além de ser um servidor de alta performance também é um Framework robusto. I/O Não Bloqueante gevent.org Baseado em corotinas (Trocas de Contexto) Fast Asynchronous Python Web Server - FAPWS Usado no eBay. 100 milhões (simples) requisições por dia em 2 servidores 4-core. 11
  12. 12. Servidores pela totalidade de sites ativos 12
  13. 13. Primeiros Passos com HTML 5<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Título do Site</title> </head> <body> <p>Conteúdo de um paragrafo.</p> </body></html> 13
  14. 14. Primeiros Passos com HTML 5<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Titulo do Site</title> </head> <body> <p>Conteúdo de um paragrafo.</p> </body></html> 14
  15. 15. Primeiros Passos com HTML 5<!DOCTYPE html><html> <head>...</head> (igual anteriormente) <body> <!-- Comentário --> <form action="arquivo.py" method="POST"> <label for="nome">Digite seu nome:</label> <input type="text" name="nome" id="nome" /> <input type="submit" value="Enviar" /> </form> </body></html> 15
  16. 16. Primeiros Passos com HTML 5<!DOCTYPE html><html> <head>...</head> (igual anteriormente) <body> <!-- Comentário --> <form action="arquivo.py" method="POST"> <label for="nome">Digite seu nome:</label> <input type="text" name="nome" id="nome" /> <input type="submit" value="Enviar" /> </form> </body></html> 16
  17. 17. Primeiros Passos com HTML 5<!DOCTYPE html><html> <head>...</head> (igual anteriormente) <body> <img src=”luz.jpg” border=”0” /> </body></html> 17
  18. 18. Primeiros Passos com HTML 5<!DOCTYPE html><html> <head>...</head> (igual anteriormente) <body> <img src=”luz.jpg” border=”0” /> </body></html> 18
  19. 19. Primeiros Passos com HTML 5<!DOCTYPE html><html> <head>...</head> (igual anteriormente) <body> <select name="genero"> <option value="masculino">Masculino</option> <option value="feminino">Feminino</option> </select> </body></html> 19
  20. 20. Primeiros Passos com HTML 5<!DOCTYPE html><html> <head>...</head> (igual anteriormente) <body> <select name="genero"> <option value="masculino">Masculino</option> <option value="feminino">Feminino</option> </select> </body></html> 20
  21. 21. Primeiros Passos com HTML 5<!DOCTYPE html><html> <head>...</head> (igual anteriormente) <body> <form action="" method="POST"> <label for="masc">Masculino</label> <input type="radio" name="genero" id="masc" value="masc" /> <label for="fem">Feminino</label> <input type="radio" name="genero" id="fem" value="fem" /> </form> </body></html> 21
  22. 22. Primeiros Passos com HTML 5<!DOCTYPE html><html> <head>...</head> (igual anteriormente) <body> <form action="" method="POST"> <label for="masc">Masculino</label> <input type="radio" name="genero" id="masc" value="masc" /> <label for="fem">Feminino</label> <input type="radio" name="genero" id="fem" value="fem" /> </form> </body></html> 22
  23. 23. Primeiros Passos com CSS<!DOCTYPE html><html> <head>...(igual anteriormente) <style type="text/css"> .nome { font: italic bold 20px Arial, sans-serif; color: red; text-decoration: underline; } </style> </head> <body> <p class="nome">Estilizado</p> <p>Não Estilizado</p> </body> 23</html>
  24. 24. Primeiros Passos com CSS<!DOCTYPE html><html> <head>...(igual anteriormente) <style type="text/css"> .nome { font: italic bold 20px Arial, sans-serif; color: red; text-decoration: underline; } </style> </head> <body> <p class="nome">Estilizado</p> <p>Não Estilizado</p> </body> 24</html>
  25. 25. Primeiros Passos com Javascript<!DOCTYPE html><html> <head>...(igual anteriormente) <script type="text/javascript"> function func(){ document.getElementById(campo).value = "texto"; } </script> </head> <body> <input type="text" id="campo" /> <input type="button" value="Escrever" onClick="javascript:func();" /> </body> 25</html>
  26. 26. Primeiros Passos com Javascript<!DOCTYPE html><html> <head>...(igual anteriormente) <script type="text/javascript"> function func(){ document.getElementById(campo).value = "texto"; } </script> </head> <body> <input type="text" id="campo" /> <input type="button" value="Escrever" onClick="javascript:func();" /> </body> 26</html>
  27. 27. Primeiros Passos com Javascript<!DOCTYPE html><html> <head>...(igual anteriormente) <script type="text/javascript"> window.onload = function (){ document.getElementById(campo).value = "texto"; } </script> </head> <body> <input type="text" id="campo" /> </body> 27</html>
  28. 28. Primeiros Passos com Javascript<!DOCTYPE html><html> <head>...(igual anteriormente) <script type="text/javascript"> window.onload = function (){ document.getElementById(campo).value = "texto"; } </script> </head> <body> <input type="text" id="campo" /> </body> 28</html>
  29. 29. Primeiros Passos com Javascript<!DOCTYPE html><html> <head>...(igual anteriormente) <script type="text/javascript"> window.onload = function (){ alert(Mensagem do Alerta!); } </script> </head> <body> </body></html> 29
  30. 30. Primeiros Passos com Javascript<!DOCTYPE html><html> <head>...(igual anteriormente) <script type="text/javascript"> window.onload = function (){ alert(Mensagem do Alerta!); } </script> </head> <body> </body></html> 30
  31. 31. Dúvidas?rafael.capucho@gmail.com@rafaelcapuchoObrigado 31

×