A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Interface Web - Programação Cliente

Apresentações semelhantes


Apresentação em tema: "Interface Web - Programação Cliente"— Transcrição da apresentação:

1 Interface Web - Programação Cliente

2 Interface Web - Programação Cliente
HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

3 HTML HTML – Hypertext Markup Language Especificação W3C
Linguagem de formatação orientada para a Internet Ficheiros de Texto com extensão html ou htm

4 HTML Linguagem baseada em etiquetas (tags)
As etiquetas interagem sobre os componentes da página web Sintaxe genérica <etiqueta parametro=“valor” > componente da página web </etiqueta>

5 HTML Estrutura base de um ficheiro HTML <HTML> <HEAD>
<BODY> </BODY>

6 HTML <TITLE> <SCRIPT> <STYLE> <META>
Etiqueta <HEAD> Zona de definições acessórias da página Contem normalmente os comandos <TITLE> Exemplo: <TITLE>A primeira página</TITLE> <SCRIPT> Bloco de código numa linguagem de script. <STYLE> Definições de estilos que serão utilizados em toda a página <META> Permite definir informações que serão colocadas no cabeçalho HTTP. Exemplo: <META http-equiv="Refresh" content=“5">

7 HTML Etiqueta <BODY>
Engloba os elementos constituintes da página Possui diversos parâmetros que definem formatos gerais para toda a página. Destacam-se: background=“URL da imagem de fundo” bgcolor=“formato ou nome da cor”

8 Exemplo <html> <head>
<title>Um exemplo HTML</title> <style type="text/css"> body{background-color:navy;font-size:14pt;font-family:arial;color:lightBlue} h1{color:white;font 18pt verdana bold;text-align:center} .botao{width:140px;height:50px;font-family:comic sans MS;} </style> <script language="javascript"> function abrir() { x=window.open("http://www.ipp.pt","PagIPP","width=99,height=80"); } </script> </head> <body> <h1>Página de Exemplo</h1> <p><hr> Esta é um exemplo de uma página em HTML, onde na zona do comando <b><HEAD></b> estão comandos auxiliares para a construção da página e na zona do comando <b><BODY></b> estão os objecto que compoêm a página.<p> <hr><center> <input type=button CLASS="botao" value="Página do IPP" onClick="abrir()"> </center> </body> </html>

Página de Exemplo


Esta é um exemplo de uma página em HTML, onde na zona do comando estão comandos auxiliares para a construção da página e na zona do comando estão os objecto que compoêm a página.


", "width": "800" }

9 HTML – Mudanças de linha
<P> e <BR> Exemplo: ... Texto1<br>Texto2<P>Texto3 Texto4

10 HTML – Imagens <IMG> Exemplo: SRC = URL da imagem (jpeg | gif);
ALT = Texto descritivo; NAME = nome do objecto para efeitos de scripting. Exemplo: <IMG SRC=“x.gif” ALT=“Exemplo” NAME=“foto”>

11 HTML – Tabelas <TABLE>
<TR> - engloba o conteúdo de uma linha <TH> - define uma célula de cabeçalho <TD> - define uma célula de informação COLSPAN = número de colunas ocupadas; ROWSPAN = número de linhas ocupadas;

12 HTML – Exemplos de Tabelas
<table border=“1”> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>D</td><td>E</td><td>F</td></tr> <tr><td>G</td><td>H</td><td>I</td></tr> </table>

13 HTML – Exemplos de Tabelas
<table border=”1”> <tr> <td colspan=”2” rowspan=”2”>A</td> <td>B</td> </tr> <tr><td >C</td></tr> <tr><td>D</td><td>E</td><td>F</td></tr> </table>

14 HTML - Hyperlinks <A> Exemplos: NAME = nome do objecto;
HREF = URL do objecto destino; TARGET = nome da janela/frame onde o link será executado ou os nomes reservados “_self”, “_parent”, “_top” ou “_blank”. Exemplos: <a href=”http://www.sapo.pt”>Sapo</a> <a name=”cap1”></a> <a href=”#cap1”>Capítulo 1</a> <a href=”amd.htm#cap1”>Capítulo 1</a> <a href=”http://www.ipp.pt” target=”_blank”>Novo</a>

15 HTML – <DIV> e <SPAN>
Utilização quase exclusiva como contentores para definição de estilos (CSS) <DIV> define um bloco de texto e comandos HTML e separando-o do restante por quebras de linha. <SPAN> é um comando inline que define também um bloco de hipertexto mas que fica na sequência dos restantes conteúdos.

16 HTML – <DIV> e <SPAN> Exemplo
<STYLE> <!- DIV{background-color:gray;color:red;font-weight:bold;} SPAN{background-color:navy;color:white;} --> </STYLE> ... <P>O texto seguinte está dentro do comando DIV <DIV>Isto está dentro de DIV</DIV> O texto seguinte é conteúdo de SPAN <SPAN>dentro do SPAN</SPAN>. Fim de exemplo

17 HTML - Frames Apresentação simultânea de várias páginas na janela do browser.

18 HTML - Frames Etiqueta <FRAMESET>
Este etiqueta especifica o layout da página em termos de divisões do écran. O ficheiro HTML que contem esta etiqueta não possui a etiqueta <body> Atributos: COLS = Lista divisão em colunas; ROWS = Lista divisão em linhas;

19 HTML - Frames A lista de divisão fornecida aos atributos pode ser composta por: Valores absolutos – representado uma dimensão em número de pixeis; Valores percentuais – relativos à dimensão da janela “pai”; * - simbolizando o restante. Os elementos da lista separam-se por “,”

20 HTML - Frames Exemplos de listas de divisão 100,50%,* 70%,30% 100,*,*
3 divisões: 1ª de 100 pixeis fixos; 2ª com 50% da dimensão da janela do browser; 3ª ocupando o restante. 70%,30% 2 divisões: 1ª com 70% da dimensão da janela do browser; 2ª com 30% da dimensão da janela do browser. 100,*,* 2ª e 3ª de dimensão igual ocupando em conjunto o restante. 2*,* 1ª com o dobro da dimensão da 2ª.

21 HTML - Frames Etiqueta <NOFRAME>
Define um conteúdo alternativo para que os browsers mais antigos possam exibir alguma informação. Exemplo: ... <noframe> O seu browser não suporta o uso de frames <p> Faça o <a href=”http://www.microsoft.com/ie”>dowload</a> da versão actual do Internet Explorer. </noframe>

22 HTML - Frames Etiqueta <FRAME>
Afecta uma página web a uma zona do écran Atributos: SRC = URL da página web; SCROLLING = “yes”|”no”|”auto”; NORESIZE não permite redimensionamento; Em XHTML NORESIZE=“NORESIZE” NAME = Nome da frame;

23 HTML – Exemplo Frames <html> <head></head>
<frameset rows=40%,*> <frame src=http://www.dei.isep.ipp.pt/ades> <frameset cols=*,*> <frame src=http://www.dei.isep.ipp.pt/~ncastro> <frame src=http://www.dei.isep.ipp.pt/projbach> </frameset> <noframe> O seu browser não suposta a utilização de frames </noframe> </html>

24 HTML - Forms Permite ao utilizador fornecer informação à aplicação web. Baseado em componentes HTML de interface gráfico. Transfere informação para o servidor recorrendo aos métodos HTTP: Método GET Método POST

25 HTML – Forms Método GET Anexa a informação na URL após o símbolo “?”
Limite da informação imposto pelo tamanho máximo da URL (2083 caracteres no IE) . Idempotente Rápido Inseguro

26 HTML – Forms Método POST
A informação é transferida no cabeçalho do protocolo HTTP Não existe um limite máximo para o tamanho da informação Todos os pedidos são obrigatoriamente tratados pelo servidor Lento Seguro

27 HTML – Forms Etiqueta <FORM>
Define o conjunto de informação que será enviado para um processo a executar no servidor Web. Atributos: ACTION = URL do processo que irá processar a informação transmitida; METHOD = “GET” | “POST” NAME = nome do objecto

28 HTML – FORMS

29 HTML – Forms Etiqueta <TEXTAREA> Constrói uma caixa de texto
Atributos: NAME = nome do objecto COLS = número de colunas ROWS = número de linhas Exemplo: <textarea cols=”30” rows=”4” name=”xpto”> texto por defeito </textarea>

30 HTML – Forms Etiqueta <SELECT>
Constrói uma Combo Box ou uma List Box Atributos: NAME = nome do objecto SIZE = número itens visíveis MULTIPLIPLE permite selecção múltipla Em XHTML MULTIPLIPLE=“MULTIPLIPLE ”

31 HTML – Forms Etiqueta <OPTION> Define um item da lista
Atributos: VALUE = valor identificativo da selecção SELECTED define o item como pré-seleccionado Em XHTML SELECTED=“SELECTED ” Exemplo: <select name=”cad”> <option value=”AD” selected>Ambientes de Desenvolvimento <option value=”BD”>Bases de Dados <option value=”PA”>Programação de Aplicações <option value=”LFA”>Ling. Formais e Autómatos </select>

32 HTML – Forms Etiqueta <INPUT>
Constrói diversos tipos de interface consoante o valor do atributo TYPE. Atributos généricos: NAME = nome do objecto TYPE = “text” | “password” | “radio” | “checkbox” | “image” | “file” | “submit” | “reset” | “button” | “hidden”;

33 HTML – Forms TYPE=“text” | TYPE=“password” Atributos específicos:
SIZE = largura da caixa em número de caracteres; MAXLENGTH = número máximo de caracteres permitido; VALUE = conteúdo por defeito Exemplo: login:<input type=”text” name=”texto” size=”10”><br> password:<input type=”password” name=”pw” size=”15”>

34 HTML – Forms TYPE=“radio” | TYPE=“checkbox” Atributos específicos:
VALUE = valor atribuído à escolha; CHECKED elemento pré-seleccionado; Em XHTML CHECKED=“CHECKED ” Exemplo: Sexo:<input type=”radio” name=”sex” value=”H” checked> Masculino <input type=”radio” name=”sex” value=”M”> Feminino <p> Hobbys:<input type=”checkbox” name=”hob” value=”ler” > Ler <input type=”checkbox” name=”hob” value=”estud”> Estudar <input type=”checkbox” name=”hob” value=”cine” checked> Cinema <input type=”checkbox” name=”hob” value=”pesca”> Pescar

35 HTML – Forms TYPE=“SUBMIT” | TYPE=“RESET” | TYPE=“BUTTON”
Atributos específicos: VALUE = Texto no botão; Exemplo: <input type=”submit” value=”Carregue para ENVIAR”> <input type=”reset” value=”Carregue para LIMPAR”> <input type=”button” value=”Carregue para ...”>

36 HTML – Forms TYPE=“FILE” Atributos específicos: Exemplo:
SIZE = tamanho em caracteres da caixa de texto; MAXLENGTH = tamanho máximo do nome do ficheiro; Exemplo: Upload do ficheiro: <input type=”file” name=”fx” size=”30”>

37 HTML – Forms TYPE=“IMAGE” TYPE=“HIDDEN” Exemplo:
Atributos específicos: SRC = URL da imagem; TYPE=“HIDDEN” VALUE = Valor atribuído ao objecto; Exemplo: <input type=“hidden” name=“xpto” value=“xyz”> <input type=”image” src=”abc.gif” name=”cores”>

38 HTML – Exemplo Forms <body>
<form method=”post” action=”quest.cgi”> Nome:<input type=”text” name=”nome” size=”40”><p> Sexo: <input type=”radio” name=”sexo” value=”fem”> Feminino <input type=”radio” name=”sexo” value=”masc”> Masculino <p> Ano de Nascimento: <select name=”nascim”> <option value=”1984” selected>1984 <option value=”1985”>1985 <option value=”1986”>1986 </select><p> Cadeiras feitas:<br> <input type=”checkbox” name=”cad” value=”ap”>Algoritmia<br> <input type=”checkbox” name=”cad” value=”it”>Inglês Tecnico<br> <input type=”checkbox” name=”cad” value=”alga”>Algebra <br> <input type=”checkbox” name=”cad” value=”ad”> Amb. Desenv. <p> Observações:<textarea name=”obs” cols=”60” rows=”5”></textarea> <p><center><input type=”submit” value=”Enviar”></center> </form> </body>

39 HTTP- Transferência de informação
Nome: Célia Olivença Sexo: Feminino Masculino Ano de Nascimento: 1984 1985 1984 1985 1986 Cadeiras feitas: Algoritmia 1985 nome=C%E9lia+Oliven%E7a&sexo=fem&nascim=1985&cad=it&cad=ad&obs=R+P%EAro+%0D%0A234 Inglês Tecnico Algebra Amb. Desenv Observações: R Pêro 234 ENVIAR

40 Interface Web - Programação Cliente
HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript

41 Applets Programa Java que é executado no contexto do browser cliente.
Etiqueta <APPLET> Especifica para a inserção de applets numa página Web Descontinuada a partir do HTML 4.0 Etiqueta <OBJECT> Permite inserir objectos multimédia numa página Web (sons, videos, applets ...) Etiqueta <PARAM> Utilizada em conjunto com <OBJECT> Parametriza um objecto

42 Applet – Exemplo 1/2 A applet import java.applet.Applet;
import java.awt.Graphics; public class testeADES extends Applet { public void paint (Graphics g) { g.drawString(getParameter("texto"), 50, 20); }

43 Applet – Exemplo 2/2 A página web
<object classid="clsid:8AD9C E-11D1-B3E F499D93" width="440" height="40" > <param name="code" value=" testeADES" /> <param name= "texto" value= "ADES 2004/2005"> </object>

44 Interface Web - Programação Cliente
HTML Applets Noções de DHTML Folhas de estilo – Cascading Style Sheets Javascript

45 DHTML DHTML – Dynamic HTML Não é uma norma do W3C
Utilização conjunta de tecnologias para a criação de sites dinâmicos HTML 4.0 Cascading Style Sheets (CSS) Document Object Model (DOM) Scripting (Javascript, VBScript, ...)

46 Cascading Style Sheets
CSS – Cascading Style Sheets Permite adicionar estilos (p.e. cores, tipos de letra, espaçamentos) a páginas web Norma W3C (http://www.w3.org/Style/CSS) Especificações: CSS ( ) especificação base (propriedades relativas a cores, espaçamento, e tipos de letra) CSS 2.1 – entre outras, acrescenta ao CSS 1.0 propriedades de posicionamento absoluto, paginação e escrita de texto da direita para a esquerda CSS 3.0 – (em desenvolvimento) irá suportar, entre outras coisas, interacção com o utilizador humano (discurso) e novos selectores

47 Cascading Style Sheets
Consiste na definição de regras que descrevem o modo como os comandos HTML deverão ser apresentados pelo browser. Estas regras são compostas por duas partes: selector e declaração. H1 { : } color lightgreen Selector Declaração Propriedade Valor

48 Cascading Style Sheets
Níveis de utilização: Local – relativo a um comando especifico na página Global – especificações para toda uma página Web Externo – especificações para diversas paginas Web (site)

49 Cascading Style Sheets
Especificações locais Especificações globais <h2 style=”font-size:35pt;color:red;line-height:30px;”>teste</h2> <head> <style type=”text/css”> <!-- h4 {font:17pt “arial”;font-weight:bold;color:blue;} h2 {font:15pt “courier”;font-weight:bold;color:yellow;} p {line-height:30pt; } --> </style> </head>

50 Cascading Style Sheets
Especificações externas Nas páginas Web O ficheiro externo “ficheiro.css” <head> <link type=”text/css”rel=”stylesheet” href=”ficheiro.css”> </head> <head> <style type=”text/css”> <!-- --> </style> </head>

51 Cascading Style Sheets
Precedências Declarações Locais Declarações Globais Declarações Externas

52 Cascading Style Sheets
Atributo CLASS Permite definir vários estilos para uma mesma etiqueta. O estilo definido na classe é utilizado em conjunção com o estilo base definido para a etiqueta. A sua declaração é feita de forma global precedendo o nome do estilo por um “.” Atributo ID Permite atribuir um identificador único a um elemento específico do documento HTML O estilo declarado sobrepõe-se integralmente ao estilo definido para a etiqueta A sua declaração é feita de forma global precedendo o nome da estilo por um “#”

53 Cascading Style Sheets
Exemplo: Estas classes não redefinem o tipo de letra A <p> faz-se utilizando o tipo de letra verdana <style> <!-- p{font-family:verdana;} .pergunta {color:green; font-style: italic;} .resposta {color:red;} # {font-size: 8pt;} --> </style> <p CLASS=”pergunta”>O quer dizer ISEP? <p CLASS=”resposta”>Instituto Superior de Engenharia do Porto <p Define-se um estilo identificador único Logo neste <p ID=“...”> o tipo de letra utilizado não é o verdana Logo estes <p CLASS=“...”> fazem-se utilizando o tipo de letra verdana

54 Algumas propriedades de formatação CSS
color Cor do texto background-color Cor de fundo de um objecto background-image URL de uma imagem que será espalhada pelo fundo do objecto font-family Tipo de letra font-size Tamanho da letra font-weight normal | bold | bolder | lighter font-style normal | italic | oblique text-align left | right | center | justify text-variant normal | small-caps width Largura de um objecto height Altura de um objecto line-height Valor para a altura de linha margin-top Valor para a margem superior margin-left Valor para a margem esquerda margin-right Valor para a margem direita margin-bottom Valor para a margem inferior

55 Propriedades de posicionamento CSS
position absolute | relative left Valor numérico da abcissa top Valor numérico da ordenada width Largura de um objecto height Altura de um objecto z-index Valor numérico da profundidade visibility visible | hidden

56 CSS – Exemplos 1/3 <style type="text/css">
body { color: lightyellow; background:navy; margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;font-size:400%} h2,h3,h4,h5,h6 { margin-left: -4%; } strong { text-transform: uppercase; font-weight: bold; } </style> <body> <h1>ADES 2004/2005</h1> Desenvolvimento de aplicações para a web. <h3><strong>html</strong></h3> <h3><strong>asp .net</strong></h3> <h3><strong>xml</strong></h3> </body>

57 CSS – Exemplos 2/3 <style type="text/css">
#xpto{position:absolute;top:50px;left:100px; width:40%;height:150px} #abcd{position:relative;top:250px;left:100px; .cor { background:#45DF3A;color:red; border:none; padding: 0.5em; } .box { border: solid; border-width: thin; } </style> <body> <div ID ="xpto" class="box"> O conteúdo desta DIV está emoldurado </div> <div ID ="abcd" class="cor"> Esta DIV tem uma cor de fundo </body>

58 CSS – Exemplos 3/3 <style type="text/css">
:link { color: # } :visited { color: # } :active { color: #FF0066 } :hover { color: red } .plain { text-decoration: none;font:16pt "Comic Sans Ms" bold} </style> <body> <a href="http://www.dei.isep.ipp.pt/ades"> Link normal </a> <p> <a class ="plain" href="http://www.ipp.pt/"> Link estilizado </a> </body>


Carregar ppt "Interface Web - Programação Cliente"

Apresentações semelhantes


Anúncios Google