MKT-MDL-02 Versão 00 Introdução ao Desenvolvimento Web Aula 1
O que vamos ver nesta aula? Introdução ao Desenvolvimento Web Arquitetura Cliente-Servidor HTML CSS Servlets
Por que Java Web? Integração com a linguagem Java Grande comunidade desenvolvedora Várias opções de desenvolvimento Programar no eclipse
A Web O modelo cliente-servidor é usado: Cliente: faz as requisições ao servidor e recebe os resultados Servidor: recebe requisições do cliente, processa e devolve ao cliente Requisição Resposta Cliente Servidor
HTTP (Hyper Text Transfer Protocol) Principal protocolo da Web utilizado para a comunicação entre os clientes e os servidores Toda requisição e resposta HTTP é montada sobre uma conexão cliente-servidor Não mantém estado (Stateless)
Protocolo HTTP: Request Método HTTP GET (digitar URL do Recurso) GET Método HTTP POST (enviar dados de Formulário) POST
Diferenças entre GET e POST A quantidade de dados que se pode passar no GET é limitada pelo servidor (no geral, 256 bytes) Os dados enviados via GET são exibidos na barra de endereços do browser (exposição de dados secretos) Não é possível marcar (favoritos) o resultado de um request que usa o POST. Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com CEFET-PB
Detalhes de um GET Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com CEFET-PB
Detalhes de um POST Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com CEFET-PB
Protocolo HTTP: Response Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com CEFET-PB
Anatomia de uma URL Típica O path é contado a partir de um diretório base que é específico de cada servidor web (o do apache é htdocs. Se o recurso não estiver no path indicado ou o nome dele estiver errado, o servidor devolve uma resposta de erro. Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com CEFET-PB
Acesso a recursos web HTTP
Recursos web Podem ser: Estáticos: Páginas HTML Imagens (JPG, GIF, BMP...) Dinâmicos: Programas web (php, cgi, apsx, servlet, jsp...)
HTML (http://www.w3schools.com/html) Aula 1
Páginas HTML Podem conter tags que indicam a presença de outros recursos (links, imagens) Os formulários HTML permitem enviar dados para serem processados no servidor São os recursos mais acessados
HTML (Hyper Text Markup Language) Linguagem para descrever páginas web Consiste normalmente de um cabeçalho e um corpo definidos por tags Os browsers são encarregados de interpretar as tags e formatar o texto adequadamente Não é uma linguagem de programação Possui extensão htm ou html
Tags em HTML São delimitados por < e > Não são case-sensitive Forma geral: <tag> texto </tag> Outras formas: <tag atributo= valor > texto </tag> <tag /> <br> <hr>
Exemplo de tags <b>texto em negrito</b> <h1><b>tags aninhadas</b></h1> <img src="constr4.gif" width="144" height="50" /> http://www.w3schools.com/tags/defaul
Estrutura de um documento HTML <html> <head> <title>título</title> </head> <body> <p> Conteúdo </p> </body> </html> Cabeçalho Corpo
Tag <img> Usada para inserir uma figura no documento HTML Atributos da tag Alt -> define uma descrição da imagem Src -> define a url da imagem Height -> define a altura da imagem em pixels Width -> define a largura da imagem em pixels <img src= nassau.gif" alt= Nassau" />
Tag <a> Usada para criar um link para outro documento ou para apontar para um lugar específico no documento atual Atributos principais Href -> define a localização do documento de destino Name -> define rótulo para definir um lugar específico da página <a href="http://www.nassau.edu">site da Nassau!</a> <a href= index.html#topo >Voltar ao topo</a> <a name= topo >Topo da página</a>
Prática 1 (30 minutos) Tentar reproduzir a seguinte página HTML:
Tag <table> São definidas com a tag <table> São divididas em linhas (<tr>) e as linhas são divididas em colunas (<td>) <table > <tr> <td>linha 1, célula 1</td> <td>linha 1, célula 2</td> </tr> </table>
Atributos de tabela Border: define o tipo de borda da tabela Colspan: define quantas colunas uma célula ocupará Rowspan -> define quantas linhas uma célula ocupará
Formulários <form> Formulários permitem que o usuário informe dados para serem processados pela aplicação Normalmente os elementos de um form são: Text field Text area Checkbox Radio button...
Formulários HTML A tag <form> não pode ser aninhada
Passos na submissão de um formulário O navegador envia os dados do formulário para o servidor O servidor ativa a url especificada através do atributo action O tipo do método definido no atributo method define como os dados enviados pelo formulário serão acessados O método padrão, caso não seja especificado, é o GET É boa prática usar o método POST
Elementos de um <form> Campos de texto, senha e hidden Campo de texto: Name: <input type="text" name= login"> Campo de senha Senha: <input type= password" name= senha"> Campo hidden: <input type= hidden" name= methodtocall value= 1 >
Radio buttons São usados quando é necessário que o usuário escolha uma opção dentre algumas oferecidas <input type="radio" name= sexo" value= masculino"> Masculino <input type="radio" name= sexo" value="feminino"> Feminino
Checkboxes São usados quando o usuário pode escolher uma ou mais opções dentre algumas oferecidas <input type="checkbox" name="curso" value="basico"> Java basico <input type="checkbox" name="curso" value="web"> Java Web <input type="checkbox" name="curso" value="avancado"> Java avancado
Text area É usado para que o usuário possa passar um texto com várias linhas <textarea name="informacoes" rows="2" cols="30">a carga horária do curso de Java Web do Citi totaliza 40 horas divididas em duas semanas. </textarea> A carga horária do curso de Java Web da Nassau totaliza 80 horas divididas em 40 aulas
Button Define um botão com uma ação específica Pode conter textos e imagens Atributos onmouseover, onclick podem especificar a ação do botão O atributo type é obrigatório com o valor button <button type="button >Incluir</button>
Drop-down list Cria uma lista com algumas opções que são exibidas quando o usuário clica <select> <option value= 1 >Java Web</option> <option value= 2 >C/C++</option> <option value= 3 >C#</option> </select>
Tag <div> Serve para dividir o documento em partes que apresentam características em comum Útil para adicionar CSS e alterar a visualização na tela <div id="lista1 align="center"> <select> <option>java Web</option> <option>c/c++</option> <option>c#</option> </select> </div>
Prática 2 (30 minutos) Implementar uma busca do google com opções de italiano e português (padrão) Deve-se usar: <div>, <img>, <form>, <table>, radio button
CSS (http://www.w3schools.com/css/) Aula 1
CSS (Cascate Style Sheet) Linguagem de propósito geral para formatação de código HTML Separa o conteúdo do layout da página HTML Facilita a manutenção e diminui o tamanho dos arquivos escritos em HTML (Legibilidade) Não é um PADRÃO, é uma ESPECIFICAÇÃO Forma Básica: Selecionador{propriedade:valor}
Maneiras de Definir CSS (1) Externo com Link: <HEAD> <LINK REL=STYLESHEET TYPE="text/css" HREF="estilo.css" > </HEAD>
Maneiras de Definir CSS (2) Externo com Import: <HEAD> <STYLE TYPE="text/css"> @import url(c:\estilo.css); </STYLE> </HEAD>
Maneiras de Definir CSS (3) Interno: <HEAD> <STYLE TYPE= text/css > body{background-color:red} h1{color:green; font-size:36pt} </STYLE> </HEAD>
Maneiras de Definir CSS (4) Inline: <BODY style="background-color: red"> <h1 style="font-size:36pt; color=green"> Este cabeçalho tem 36 pt e agora é verde </h1> </BODY>
Herança Capacidade de repassar as características de estilo nos elementos HTML É possível graças à estrutura em árvore do documento HTML Possibilidade de redefinição de propriedades herdadas
Classes Servem para adicionar granularidade sobre os selecionadores. Classes: <HTML><HEAD><STYLE TYPE="text/css"> p.right {text-align: right} p.center {text-align: center} </STYLE></HEAD><BODY> <p class="right"> Parágrafo a direita </p> <p class="center"> Parágrafo centralizado</p> </BODY></HTML>
Pseudo-classes Adicionam diferentes efeitos em alguns selecionadores: A:link { color: red } /* link não visitado */ A:external:visited { color: blue } /* link visitado */ A:active { color: lime } /* links ativos */ A:hover {color: #FF00FF} /* mouse sobre link */
Identificadores <html><head> <style type="text/css"> #xyz34 { text-decoration: underline } </style> </head><body> <H1 ID="XYZ34">A HEADLINE</H1> <P ID="XYZ34">UNDERLINED TEXT</P> </body></html>
Free CSS Templates: http://www.free-css-templates.com/ Prática 3 (30 minutos) Tentar implementar o Design em CSS apresentado abaixo utilizando o maior número de elementos no site da w3cschools (livre).
Recursos Web Dinâmicos Material por: Carlos Diego (diegoquirino@gmail.com) Fonte: Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com CEFET-PB
Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com CEFET-PB
Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com CEFET-PB
Programas Web Localizados no servidor Recebem dados do cliente Processam os dados recebidos Fornecem resposta baseada nos dados enviados pelos clientes Tem que ser escritos em linguagens suportadas pelo servidor Exemplos: Servlets, JavaServer Pages, PHP, ASP, CGI
Exemplo Geral de Aplicações Externas no Servidor Web (1) O Servidor web recebe um pedido de execução de uma aplicação (via GET ou POST) Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com IFPB
Exemplo Geral de Aplicações Externas no Servidor Web (2) O Servidor web cria um processo para a aplicação e passa alguns parâmetros e variáveis especiais Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com IFPB
Exemplo Geral de Aplicações Externas no Servidor Web (3) A aplicação executa e devolve o resultado (código HTML) para o servidor web pela saída padrão Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com IFPB
Exemplo Geral de Aplicações Externas no Servidor Web (4) O Servidor web monta um frame de resposta HTTP, põe o HTML dentro dele e devolve para o cliente Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com IFPB
Introdução a Servlets Material por: Carlos Diego (diegoquirino@gmail.com) Fonte: Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com CEFET-PB
Servlets São classes especiais em Java Executam sob um container Podem acessar outras classes de Java Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com CEFET-PB
Elementos de aplicações web com Java Container (tomcat) Diretório raiz ou contexto Deployment descriptor (web.xml) Servlets/JSP Classes Java Arquivos auxiliares (XML, properties, libs, html...)
Prática 4: Codificando e Implantando um Servlet Conhecendo o ambiente de Desenvolvimento (Eclipse) Criando um projeto Web Dinâmico
Prática 4: Codificando e Implantando um Servlet Escreva uma classe Java que herde HttpServlet: Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com IFPB
Prática 4: Codificando e Implantando um Servlet Escreva o descritor da aplicação web (web.xml): Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com IFPB
Prática 4: Codificando e Implantando um Servlet Compile o servlet e crie a seguinte estrutura de diretórios: Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com IFPB
Prática 4: Codificando e Implantando um Servlet Implante a estrutura no container: Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com IFPB
Prática 4: Codificando e Implantando um Servlet Ponha o servidor no ar, abra o browser e aponte uma URL para o servlet. O resultado é a exibição do HTML formatado na tela. Slides de Aula / Frederico Costa Guedes Pereira 2006 fredguedespereira@gmail.com IFPB
No próximo encontro... Arquitetura da Aplicação Web Minitutorial MVC Sendo um Servlet: Ciclo de Vida
Dúvidas? Contato: diegoquirino@gmail.com