Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Modulo 1 e 2

    Enviado por

    Carla Ventura Caseiro
    6 visualizações36 páginas

    Título original

    Modulo1e2

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PPT, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPT, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    6 visualizações36 páginas

    Modulo 1 e 2

    Enviado por

    Carla Ventura Caseiro

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPT, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 36

    Voc pode:

    copiar, distribuir, exibir e executar a obra criar obras derivadas fazer uso comercial da obra Atribuio. Voc deve dar crdito ao autor original, da forma especificada pelo autor ou licenciante. Compartilhamento pela mesma Licena. Se voc alterar, transformar, ou criar outra obra com base nesta, voc somente poder distribuir a obra resultante sob uma licena idntica a esta. Para cada novo uso ou distribuio, voc deve deixar claro para outros os termos da licena desta obra. Qualquer uma destas condies podem ser renunciadas, desde que Voc obtenha permisso do autor.

    Sob as seguintes condies:


    Veja aqui a licena completa

    Objetivos do curso

    Arquitetura cliente-servidor
    Introduo a HTML Integrao de HTML com Java (JSP, SERVLET)

    Desenvolvimento web no padro MVC

    Quem somos ns?

    Rodrigo Cardoso 8 perodo Experincia em desenvolvimento Java WEB desde 2007 Ex-monitor de Gerenciamento de Dados e Informao Monitor de Introduo a Programao
    Maria Carolina 8 perodo Experincia em desenvolvimento Java WEB desde 2007 Ex-monitora de Algoritmos e Estrutura de Dados Monitora de Gerenciamento de Dados e Informao

    Pr-requisitos

    Conhecimento da linguagem Java


    Conhecimento geral de desenvolvimento de sistemas

    Por que Java Web?

    Integrao com a linguagem Java


    Grande comunidade desenvolvedora Vrias opes de desenvolvimento

    Programar no eclipse

    Diviso do curso
    1 Introduo a programao Web 2 - HTML 3 - Servlets

    4 - JSP

    5 - Framework

    Introduo a programao web com Java

    Arquitetura da web

    O modelo cliente-servidor usado: Servidor web: recebe requisies do cliente, processa e devolve ao cliente Cliente web: faz as requisies ao servidor e recebe os resultados

    HTTP Hypertext Transfer Protocol

    Principal protocolo da Web utilizado para a comunicao entre os browsers e os servidores


    Toda requisio e resposta HTTP montada sobre uma conexo cliente-servidor

    No mantm estado (Stateless)

    Interao browser e servidor


    1.
    2. 3.

    Usurio especifica URL


    Browser conecta com o servidor especificado na url Browser prepara a requisio HTTP e a envia

    4.
    5. 6. 7.

    Servidor busca o recurso identificado pela URL


    Servidor processa o pedido, prepara a resposta HTTP e a envia Browser verifica as tags do recurso solicitado e repete o processo Browser exibe os recursos

    Recursos web

    Podem ser: Pginas html figuras (JPG, GIF, BMP...) programas web (apsx, servlet, jsp...)

    Pginas HTML

    Podem conter tags que indicam a presena de outros recursos (links, imagens)
    Os formulrios HTML permitem enviar dados para serem processados no servidor

    So os recursos mais acessados

    Acesso a recursos web

    BROWSER HTTP BROWSER Servidor Web

    Servidor BD

    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

    Servlets e JavaServer Pages

    So programas Java
    Podem acessar outras classes de Java JSP traduzido para um servlet, so equivalentes

    Elementos de aplicaes web com Java

    Container (tomcat)
    Diretrio raiz ou contexto Deployment descriptor (web.xml)

    Servlets / JSP
    Classes Java Arquivos auxiliares (xml, properties, libs, html...)

    HTML

    http://www.w3schools.com/html/DEFAULT.asp

    Introduo a HTML (HYPER TEXT MARKUP LANGUAGE)

    Linguagem para descrever pginas web


    Consiste normalmente de um cabealho e um corpo definidos por tags Os browsers so encarregados de interpretar as tags e formatar o texto adequadamente No uma linguagem de programao Possui extenso htm ou html

    Tags em HTML

    So delimitados por < e >


    No so 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/default.asp

    Estrutura de um documento HTML


    <html> <head> <title>Ttulo</title> </head>
    <body> <p> Contedo </p> </body> </html>
    Corpo

    Cabealho

    Tag <img>
    Usada

    para inserir uma figura no documento


    da tag

    HTML
    Atributos

    Alt -> define uma descrio 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=citi.gif" alt=Citi" />

    Tag <a>
    Usada

    para criar um link para outro documento ou para apontar para um lugar especfico no documento atual
    principais

    Atributos

    Href -> define a localizao do documento de destino Name -> define rtulo para definir um lugar especfico da pgina

    <a <a <a

    href="http://www.citi.org.br">Site do Citi!</a> href=index.html#topo>Voltar ao topo</a> name=topo>Topo da pgina</a>

    Prtica 1

    Manda um scrap com imagem no orkut!


    Tentar reproduzir a seguinte pgina HTML:

    Tabelas <table>

    So definidas com a tag <table>


    So divididas em linhas (<tr>) e as linhas so divididas em colunas (<td>)

    <table > <tr> <td>linha 1, clula 1</td> <td>linha 1, clula 2</td> </tr> </table>

    Atributos de tabela

    Border -> define o tipo de borda da tabela


    Colspan -> define quantas colunas uma clula ocupar

    Rowspan -> define quantas linhas uma clula ocupar

    Formulrios <form>

    Formulrios permitem que o usurio informe dados para serem processados pela aplicao
    Normalmente os elementos de um form so: text fields, text area, checkboxes, radio button...

    A tag <form> no pode ser aninhada

    Passos na submisso de um formulrio

    O navegador envia os dados do formulrio para o servidor


    O servidor ativa a url especificada atravs do atributo action O tipo do mtodo definido no atributo method define como os dados enviados pelo formulrio sero acessados O mtodo padro, caso no haja especificao, o GET boa prtica usar o mtodo 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

    So usados quando necessrio que o usurio escolha uma opo dentre algumas oferecidas
    <input type="radio" name=sexo" value=masculino"> Masculino <input type="radio" name=sexo" value="feminino"> Feminino

    Checkboxes

    So usados quando o usurio pode escolher uma ou mais opes 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 usurio possa passar um texto com vrias linhas
    <textarea name="informacoes" rows="2" cols="30">A carga horaria do curso de java web do citi totaliza 30 horas divididas em duas semanas. </textarea>

    Button

    Define um boto com uma ao especfica


    Pode conter textos e imagens Atributos onMouseOver, onClick podem especificar a ao do boto

    O atributo type obrigatrio com o valor button


    <button type="button>Incluir</button>

    Drop-down list

    Cria uma lista com algumas opes que so exibidas quando o usurio clica

    <select> <option value=1>Sport</option> <option value=2>Sarna</option> <option value=3>Barbie</option> </select>

    Tag <div>

    Serve para dividir o documento em partes que apresentam caractersticas em comum


    til para adicionar CSS e alterar a visualizao na tela

    <div id="lista1 align="center"> <select> <option>Sport</option> <option>Sarna</option> <option>Barbie</option> </select> </div>

    Prtica 2

    Implementar uma busca do google com opes de italiano e portugus (padro)


    Deve usar: <div>, <img>, <form>, <table>, radio button

    Você também pode gostar