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

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

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

Apresentações semelhantes


Apresentação em tema: "Interface Web - Programação Cliente. HTML HTML Applets Noções de DHTML Folhas de estilo - Cascading Style Sheets Javascript."— Transcrição da apresentação:

1 Interface Web - Programação Cliente

2 HTML 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 componente da página web

5 HTML Estrutura base de um ficheiro HTML

6 HTML Etiqueta Zona de definições acessórias da página Contem normalmente os comandos Exemplo: A primeira página Bloco de código numa linguagem de script. Definições de estilos que serão utilizados em toda a página Permite definir informações que serão colocadas no cabeçalho HTTP. Exemplo:

7 HTML Etiqueta 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 Um exemplo HTML 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;} function abrir() { x=window.open("http://www.ipp.pt","PagIPP","width=99,height=80"); } Página de Exemplo Esta é um exemplo de uma página em HTML, onde na zona do comando <HEAD> estão comandos auxiliares para a construção da página e na zona do comando <BODY> estão os objecto que compoêm a página.

9 HTML – Mudanças de linha e Exemplo:... Texto1 Texto2 Texto3 Texto4... Texto1 Texto2 Texto3 Texto4...

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

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

12 HTML – Exemplos de Tabelas A B C D E F G H I A B C D E F G H I

13 HTML – Exemplos de Tabelas A B C D E F A B C D E F

14 HTML - Hyperlinks 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: Sapo Capítulo 1 Novo Sapo Capítulo 1 Novo

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

16 HTML – e Exemplo ... O texto seguinte está dentro do comando DIV Isto está dentro de DIV O texto seguinte é conteúdo de SPAN dentro do SPAN. Fim de exemplo... ... O texto seguinte está dentro do comando DIV Isto está dentro de DIV O texto seguinte é conteúdo de SPAN dentro do SPAN. Fim de exemplo...

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

18 HTML - Frames Etiqueta 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 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%,* 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,*,* 3 divisões: 1ª de 100 pixeis fixos; 2ª e 3ª de dimensão igual ocupando em conjunto o restante. 2*,* 2 divisões: 1ª com o dobro da dimensão da 2ª.

21 HTML - Frames Etiqueta Define um conteúdo alternativo para que os browsers mais antigos possam exibir alguma informação. Exemplo:... O seu browser não suporta o uso de frames Faça o dowload da versão actual do Internet Explorer....

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

23 HTML – Exemplo Frames O seu browser não suposta a utilização de frames

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).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 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 Constrói uma caixa de texto Atributos: NAME= nome do objecto COLS= número de colunas ROWS= número de linhas Exemplo: texto por defeito texto por defeito

30 HTML – Forms Etiqueta 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 Define um item da lista Atributos: VALUE= valor identificativo da selecção SELECTED define o item como pré-seleccionado Em XHTML SELECTED=SELECTED Exemplo: Ambientes de Desenvolvimento Bases de Dados Programação de Aplicações Ling. Formais e Autómatos

32 HTML – Forms Etiqueta 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: password:

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: Masculino Feminino Hobbys: Ler Estudar Cinema Pescar

35 HTML – Forms TYPE=SUBMIT | TYPE=RESET | TYPE=BUTTON Atributos específicos: VALUE= Texto no botão; Exemplo:

36 HTML – Forms TYPE=FILE Atributos específicos: SIZE= tamanho em caracteres da caixa de texto; MAXLENGTH= tamanho máximo do nome do ficheiro; Exemplo: Upload do ficheiro:

37 HTML – Forms TYPE=IMAGE Atributos específicos: SRC= URL da imagem; TYPE=HIDDEN Atributos específicos: VALUE = Valor atribuído ao objecto; Exemplo:

38 HTML – Exemplo Forms Nome: Sexo: Feminino Masculino Ano de Nascimento: 1984 1985 1986 Cadeiras feitas: Algoritmia Inglês Tecnico Algebra Amb. Desenv. Observações:

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

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

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

44 Interface Web - Programação Cliente HTML Applets Noções de DHTML Noções de DHTML Folhas de estilo – Cascading Style Sheets Folhas de estilo – Cascading Style Sheets Javascript 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)http://www.w3.org/Style/CSS Especificações: CSS 1.0 - (1996 -1999) 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 SelectorDeclaraçã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 teste

50 Cascading Style Sheets Especificações externas Nas páginas Web O ficheiro externo ficheiro.css

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: O quer dizer ISEP? Instituto Superior de Engenharia do Porto user@net.com A faz-se utilizando o tipo de letra verdana Estas classes não redefinem o tipo de letra Logo estes fazem-se utilizando o tipo de letra verdana Define-se um estilo identificador único Logo neste o tipo de letra utilizado não é o 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 positionabsolute | relative leftValor numérico da abcissa topValor numérico da ordenada widthLargura de um objecto heightAltura de um objecto z-indexValor numérico da profundidade visibilityvisible | hidden

56 CSS – Exemplos 1/3 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; } ADES 2004/2005 Desenvolvimento de aplicações para a web. html asp.net xml

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

58 CSS – Exemplos 3/3 :link { color: #000035 } :visited { color: #990099 } :active { color: #FF0066 } :hover { color: red }.plain { text-decoration: none;font:16pt "Comic Sans Ms" bold} Link normal Link estilizado


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

Apresentações semelhantes


Anúncios Google