Processamento no Cliente - Prof. Antonio Geraldo Vidal

Processamento no Cliente - Prof. Antonio Geraldo Vidal
FEA/USP EAD-5881 – Tecnologia de Informática Tecnologia Internet Processamento no Cliente HTML, DHTML e Linguagens Script Prof.Dr. Antonio Geraldo da Rocha Vidal FEA/USP - EAD Tecnologia de Informática

Tecnologias Internet A World Wide Web
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet A World Wide Web Um caminho para acessar e compartilhar informações: Documentos técnicos, materiais de marketing, receitas, ... Uma rede enorme de computadores: a Internet Gráfica, não só textual As informações são ligadas a outras informações Plataforma para desenvolvimento de aplicativos: Faça compras a partir da sua casa Forneça aplicativos a clientes e parceiros de negócio ... The Web can be viewed from many different perspectives. FEA/USP - EAD Tecnologia de Informática

Qual a diferença entre Internet e Web?
Todos os computadores conectados em rede TCP/IP Todos os serviços disponíveis: FTP Newsgroups Páginas Web Etc. Web Páginas de hipertexto conectadas: Hyperlinks Textos Imagens Animações Aplicações Sistemas de informação

Como funciona a Web É um grande exemplo de um sistema Cliente/Servidor. Tudo o que está na Web pode ser dividido em cliente e servidor. Um servidor Web responde às solicitações de um cliente por páginas Web nele contidas. Os servidores são localizados na rede por meio de uma URL – Uniform Resource Locator, ou endereço Web. Uma URL aponta para um servidor e para uma página Web que está sendo solicitada.

Tecnologias Internet Arquitetura WWW
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet Arquitetura WWW Cliente PC/Mac/Unix + Browser Request: TCP/IP Rede This is the basic architecture of the web. A browser running on a client machine makes a request to a server using the HTTP protocol over TCP/IP. The server responds with an HTML page, which is rendered in the browser. Response: <html>…</html> Web Server Servidor FEA/USP - EAD Tecnologia de Informática

Como Funciona a Web Todos os servidores da Web possuem um endereço IP (Internet Protocol) exclusivo, por meio do qual são identificados. Um endereço IP é formado por uma seqüência de 4 números de 0 a 255: Porém, servidores especiais de DNS (Domain Name Service) fazem automaticamente a tradução entre a URL e o endereço IP.

Como Funciona a Web No servidor funciona um software aplicativo (web server) que responde às solicitações de páginas Web. No cliente funciona um software aplicativo (browser) que solicita páginas Web e as apresenta ao usuário. O HTTP (HyperText Transfer Protocol) é o protocolo que permite que os servidores e clientes web se comuniquem e passem dados uns para os outros. Tipos básicos de mensagens HTTP: HTTP GET: solicita dados do servidor HTTP RESPONSE: envia dados para o cliente HTTP POST: envia dados para o servidor

Tecnologias Internet Arquitetura WWW
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet Arquitetura WWW Arquitetutra Cliente/Servidor e de Requisição/Resposta Você requisita uma página Web e.g. HTTP request O servidor Web responde com dados na forma de uma página Web HTTP response A página web é expressa em HTML As páginas são identificadas com o Uniform Resource Locator (URL) Protocolo: http Servidor Web: Página Web: default.htm Pode fornecer também parâmetros: ? nome=MBA FEA/USP - EAD Tecnologia de Informática

Tecnologias Internet Padrões Web
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet Padrões Web Internet Engineering Task Force (IETF) Fundado em 1986 Request For Comments (RFC) em World Wide Web Consortium (W3C) Fundado em 1994 por Tim Berners-Lee Publica relatórios e recomendações técnicas The Internet Engineering Task Force (IETF) is a large open international community of network designers, operators, vendors, and researchers concerned with the evolution of the Internet architecture and the smooth operation of the Internet. It is open to any interested individual. It has overseen the development of many Internet standards (e.g. TCP/IP, DNS). The World Wide Web Consortium (W3) develops common protocols (e.g. HTML, XML) to promote the evolution and interoperability of the Web. FEA/USP - EAD Tecnologia de Informática

Tecnologias Internet Web Design
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet Web Design Interoperabilidade: linguagens Web e os protocolos devem ser compatíveis entre si e independentes de hardware e software. Evolução: a Web deve ser capaz de incorporar tecnologias futuras. Direciona para a simplicidade, modularidade e extensibilidade. Descentralização: facilita a escalabilidade e a robustez. FEA/USP - EAD Tecnologia de Informática

Linguagem HTML Hypertext Markup Language (HTML) é a linguagem usada para criar e exibir páginas de hipertexto na Web. Utiliza um conjunto de marcadores (tags) para identificar as partes do documento ou página e definir como o conteúdo (texto ou imagem) aparecerá quando visto em um navegador (browser) Web.

Exemplo de Página HTML <HTML> <HEAD>
<TITLE>Exemplo de página HTML</TITLE> </HEAD> <BODY> <H1>Comércio Eletrônico na Internet!</H1> <P>Este é um documento HTML simples.</P> </BODY> </HTML>

Páginas HTML As páginas Web podem ser ou estáticas ou dinâmicas (ativas). Páginas estáticas podem ter hyperlinks para outras páginas e arquivos, mas não atualizam dados no servidor e não são atualizadas pelas ações ou informações do usuário sobre o servidor. A maioria das páginas Web são estáticas.

Páginas HTML Uma página dinâmica ou ativa fornece meios para o usuário interagir com o servidor Web, atualizando ou alterando dados no servidor. Uma página ativa pode conter também controles ativos (componentes) ou programas em linguagem de scripting, o que fornece à página capacidades de processamento de informações.

Tecnologias Internet Hypertext Transport Protocol (HTTP)
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet Hypertext Transport Protocol (HTTP) O protocolo de alto nível usado para requisitar e retornar dados (páginas Web, imagens, documentos etc.) Protocolo de Requisição/Resposta (Request/Response) Métodos: GET, POST, HEAD HTTP 1.0: simples HTTP 1.1: mais complexo FEA/USP - EAD Tecnologia de Informática

Tecnologias Internet HTTP Request
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet HTTP Request Método Arquivo HTTP versão Cabeçalhos GET /default.asp HTTP/1.0 Accept: image/gif, image/x-bitmap, image/jpeg, */* Accept-Language: en User-Agent: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) Connection: Keep-Alive If-Modified-Since: Sunday, 17-Apr-96 04:32:58 GMT Linha em branco Dados – nenhum para GET FEA/USP - EAD Tecnologia de Informática

Tecnologias Internet HTTP Response
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet HTTP Response HTTP versão Status Frase de razão Cabeçalhos HTTP/ OK Date: Sun, 21 Apr :20:42 GMT Server: Microsoft-Internet-Information-Server/5.0 Connection: keep-alive Content-Type: text/html Last-Modified: Thu, 18 Apr :39:05 GMT Content-Length: 2543 <HTML> Alguma informação... blá, blá, blá </HTML> Dados FEA/USP - EAD Tecnologia de Informática

Tecnologias Internet HTTP
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet HTTP HTTP é um protocolo sem dono. Cada requisição HTTP é independente de requisições prévias e subseqüentes. HTTP 1.1 introduziu keep-alive para aumentar eficiência em aplicações. FEA/USP - EAD Tecnologia de Informática

Tecnologias Internet Pilha de Protocolos de Rede
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet Pilha de Protocolos de Rede HTTP HTTP TCP TCP Physically, a request goes down the protocol stack on the client, across the network to the server, then up the server’s protocol stack (solid arrows). Logically, however, the corresponding layers on each machine “talk” to each other (dashed arrows). IP IP Ethernet Ethernet FEA/USP - EAD Tecnologia de Informática

Tecnologias Internet Cookies
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet Cookies Um mecanismo para armazenar uma quantidade pequena de informações (até 4KB) no cliente Um cookie é associado a um web site específico O cookie é enviado no cabeçalho do HTTP O cookie é enviado com cada requisição do HTTP Pode durar uma só sessão (até que o browser seja fechado) ou pode persistir através de sessões Pode expirar em algum tempo no futuro FEA/USP - EAD Tecnologia de Informática

Tecnologias Internet Redes - Domain Name System (DNS)
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet Redes - Domain Name System (DNS) Fornece nomes de domínio amigáveis e fáceis de memorizar, p.ex. Estrutura hierárquica de nomes com um limitado conjunto de extensões: Servidores DNS mapeiam automaticamente nomes de domínios para endereços IP. .com .net .gov .edu .org .mil .jp .de FEA/USP - EAD Tecnologia de Informática

Tecnologias Internet HTTPS
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet HTTPS Uma versão segura do HTTP Permite o cliente e o servidor troquem dados com a certeza de que os dados não possam ser modificados ou interceptados Usa Secure Sockets Layer (SSL)/ Transport Layer Security (TLS) FEA/USP - EAD Tecnologia de Informática

Ferramentas para Desenvolvimento de páginas Web
Editores para criação de conteúdo HTML Editores gráficos Geradores de animação Ambientes/Linguagens de programação Gerenciadores de banco de dados Administradores de Web Sites Servidores Web Navegadores (browser)

Tecnologias Internet Browsers
Processamento no Cliente - Prof. Antonio Geraldo Vidal Tecnologias Internet Browsers Aplicativo Cliente Requisita páginas HTML do servidor Web e a processa para apresentação ao usuário Navegadores mais populares: Netscape Internet Explorer Opera Eudora Também conhecido como um Agente do Usuário FEA/USP - EAD Tecnologia de Informática

O Código das Páginas Web
HTML: textos, gráficos estáticos e hyperlinks. DHTML: textos, gráficos e hyperlinks dinâmicos e interativos. Automação através de linguagens script: Java Script (JavaScript) ou JScript (variação da Microsoft) Visual Basic Script (VBScript) Automação através de componentes: ActiveX Java Applets

Tags Básicas <HTML> <HEAD> <TITLE> <BODY>
<HEAD><meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <TITLE>ABC Company Home Page</TITLE> </HEAD> <BODY>  Hello, World! </BODY> </HTML>

Tags Básicas Característica TAG Exemplo Cabeçalho
<H1>...</H1> Quebra de linha <BR> Artigo de lista <LI>...</LI> Texto enfatizado <EM>...</EM> Imagem <IMG> Texto de Pré-formatado <PRE>...</PRE> Texto em Negrito <B>...</B> Parágrafo <P>

Atributos das Tags Os atributos personalizam uma tag mudando o modo como cada elemento aparece. <FONT FACE="Arial" SIZE="2">text in 10pt Arial font.</FONT>

Hyperlinks Para criar um hyperlink é utilizada a tag <A>, que funciona como uma âncora. <A HREF="Endereço_Destino">texto ou gráfico do hyperlink</A> Endereço_Destino é um URL para o hyperlink Texto ou Gráfico do hyperlink é o que o usuário clica para ir para o destino apontado. <A HREF="fia.htm">FIA</A>

Tipos Básicos de Hyperlinks
URL Documento não HTML Marcador de páginas (bookmark)

Link Relativo vs. Link Absoluto
Links relativos descrevem o destino relativamente à localização do documento a partir do qual o usuário está. <A HREF="../minha_pasta/Meu_Arquivo.htm"> Texto do Link</A> Links absolutos fornecem um endereço completo para o hyperlink. <A HREF=" Texto do Link</A>

Imagens Podem ser simplesmente inseridas e apresentadas em páginas Web. <IMG SRC="file:///C|/figuras/Amostra.jpg" width="283" height="212" border="0"> Podem ser também ser utilizadas como ferramentas de navegação. Hotspots Mapas de imagem No servidor No cliente <A HREF="/diretorio1/diretorio1/nome.map"> <IMG SRC="/diretorio1/diretorio2/nome.gif" ISMAP> </A>

Tabelas Tabelas servem para muitos propósitos nas páginas HTML.
Não só são usadas da maneira convencional para exibir informações em um formato tabular. Mas principalmente são usadas para fazer com que imagens, texto e controles apareçam exatamente na localização desejada na página.

Tabelas Uma tabela é criada com a tag <TABLE> e </TABLE>.
Quaisquer atributos que se aplicam para a tabela como um todo são definidos na tag <TABLE>: <TABLE ALIGN=LEFT BORDER=1 WIDTH=20%> </TABLE>

Tabelas Cada linha na tabela é criada usando a tag <TR> e </TR>. Cada coluna é criada com a tag <TD> e </TD>. Qualquer elemento de HTML pode ser colocado dentro das tags <TD> e </TD>.

Tabelas Tabela de três linhas x três colunas
<TABLE ALIGN=LEFT BORDER=1 LARGURA=20%> <TR><TD>R1 C1</TD><TD>R1 C2</TD><TD>R1 C3</TD></TR> <TR><TD>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR> <TR><TD>R3 C1</TD><TD>R3 C2</TD><TD>R3 C3</TD></TR> </TABLE>

Atributos de Tabelas Largura e Altura Colunas e Linhas Cabeçalhos
Bordas Título Agrupamento de colunas Aninhamento de Tabelas (tabelas intercaladas)

Frames Uma página com frames divide janela de um navegador em seções ou quadros conhecidos como frames. Cada frame exibe uma página Web separada. O uso de frames permite criar efeitos visuais interessantes em uma página Web. As páginas web que usam frames possuem dois elementos principais: O arquivo HTML que define o conjunto de frames Os arquivos de HTML com o conteúdo de cada frame

Sugestões para o Uso de Frames
Utilize frames para exibir informações que devam permanecer estáticas em uma área da página enquanto nas outras áreas as informações mudam. Utilize frames sem bordas sempre que possível. Forneça bastante espaço em branco nas páginas que exibem as frames.

Tags para Frames O par <FRAMESET> e </FRAMESET> define várias frames. Atributo ROWS (linhas - horizontal) Atributo COLS (colunas - vertical) O par <FRAME> e </FRAME> define uma única frame.

Formulários Fornecem um mecanismo através do qual usuários do seu Web Site podem se comunicar com o servidor Web. Um formulário contém tipicamente: Vários campos de formulário. Botões Submeter (Submit) e Limpar (Reset).

Formulários Exemplo <FORM ACTION="/scripts/meuexemplo.asp" METHOD=POST> Nome de <INPUT TYPE=TEXT NAME="txt" VALUE="Meu Nome"><P> Confira tudo que se aplica: <INPUT TYPE=CHECKBOX NAME="chkUsoProfissional">Uso Profissional <INPUT TYPE=CHECKBOX NAME="chkUsoDomestico">Uso Doméstico<P> <INPUT TYPE=SUBMIT VALUE="Submeter"> <INPUT TYPE=RESET VALUE="Limpar"> </FORM>

Atributos da Tag <FORM>
ACTION Define a rotina para manipulação do formulário. METHOD GET: formulário para ler dados. POST: formulário para gravar dados. TARGET: Define o frame no qual a resposta do formulário será apresentada.

Controles de Formulários
<INPUT TYPE=tipo_controle NAME=nome_controle VALOR=valor_controle> Caixas de Texto Áreas de Texto Botões Menu em Cascata Botão de Rádio Caixa de Verificação (Check Box) Controle Escondido (armazenador de dados temporário)

Caixas de Texto Existem dois tipos de caixas de texto que podem ser criadas com tags HTML diferentes. <INPUT TYPE=TEXT NAME=txtUserName <TEXTAREA ROWS="2" NAME="txtComments"> Algum texto na caixa </TEXTAREA>

Botões Existem três tipos de botões: Normais, Limpar e Submeter. Para inserir estes controles, você usa a tag <INPUT> e configura o atributo TYPE. O atributo VALUE é o texto exibido na face do botão. <INPUT TYPE=BUTTON NAME=btnClickMe VALUE="Me clique"> <INPUT TYPE=RESET VALUE="Limpar">

Menu Para adicionar um menu em cascata em um formulário, use as tags <SELECT> e </SELECT>. Para adicionar itens para as opções do menu, use a tag <OPTION>. Para fazer um dos itens aparecer quando um usuário acessar o menu na página Web, adicione o atributo SELECTED para a tag <OPTION> da opção padrão. <SELECT NAME=lstPreferencia> <OPTION SELECTED VALUE="1">Correio <OPTION VALUE="2">Fax <OPTION VALUE="3">On-line </SELECT>

Botão de Rádio Para adicionar um botão de rádio em um formulário, utilize a tag <INPUT> e configure o atributo TYPE para RADIO. Use uma tag <INPUT> separada para cada botão de rádio a ser inserido no formulário. Para criar um grupo de botões de rádio, designe o mesmo atributo NAME para todos os botões de rádio. <INPUT TYPE=RADIO CHECKED NAME=optQuestao VALUE="Sim">Sim <INPUT TYPE=RADIO NAME=optQuestao VALUE="Não">Não <INPUT TYPE=RADIO NAME=optQuestao VALUE="Talvez">Talvez

Caixa de Verificação Para adicionar uma caixa de verificação em um formulário, use a tag <INPUT> e configure o atributo de TYPE para CHECKBOX. Para fazer a caixa de verificação aparecer selecionada, adicione o atributo CHEKED para a tag <INPUT>. Para adicionar um texto descritivo, inclua o texto depois da tag <INPUT>. <INPUT TYPE=CHECKBOX NAME=chkUsoProfissional VALUE="Profissional" CHEKED>Uso Profissional <INPUT TYPE=CHECKBOX NAME=chkUsoPessoal VALUE="Pessoal">Uso Pessoal

Controle Escondido Para adicionar um controle escondido em um formulário, use a tag <INPUT> e configure o atributo de TYPE para HIDDEN. Configure o atributo VALUE para o texto que você deseja que seja enviado com o controle escondido. <INPUT TYPE=HIDDEN NAME=hdnName VALUE="Informações você não quer que o usuário veja">

Ordem de Tabulação Para definir a ordem de tabulação dos controles do formulário, configure o atributo TABINDEX de cada controle. Designe "1" para o controle que estará selecionado o usuário abrir a página; designe "2" para o próximo controle que receberá o foco quando o usuário apertar a tecla de tabulação, e assim por diante. <INPUT TYPE=TEXT NAME=txtName TABINDEX=2>

Páginas Ativas no Cliente Programação com Linguagens Script
Tecnologia Internet Páginas Ativas no Cliente Programação com Linguagens Script JavaScript, VBScript e DHTML

Programação com Linguagens Script
O desenvolvimento de scripts é baseado no modelo de programação orientada para objetos (que veremos mais adiante). A programação orientada para objetos permite escrever códigos associados a objetos específicos em de um aplicativo. Um objeto é uma combinação de operações e dados que podem ser tratados como uma unidade. Um objeto pode ser um pedaço de uma página de aplicativo Web ou uma página inteira.

Programação para a Web Baseada em Objetos do DHTML
Processamento no Cliente - Prof. Antonio Geraldo Vidal Programação para a Web Baseada em Objetos do DHTML O DHTML Document Object Model (DOM) window event navigator history document location screen frames all location children forms selection body links text radio button textarea select password checkbox submit option file reset FEA/USP - EAD Tecnologia de Informática

Programação com Linguagens Script
A programação no cliente através de linguagens script desempenha um papel importante na criação de páginas Web com conteúdo ativo. Usando uma linguagem script, pode-se criar páginas Web ativas e dinâmicas que fornecem respostas para perguntas e questões do usuário: Validam dados do usuário. Calculam expressões. Forneçam Links para outros aplicativos. Manipulem controles embutidos: ActiveX e Java Applets. Acessam bancos de dados.

Programação para a Web Código no Cliente
Processamento no Cliente - Prof. Antonio Geraldo Vidal Programação para a Web Código no Cliente O que é código no cliente (client-side code)? O software que é descarregado do servidor Web para o browser e então executado no cliente. Por que código no cliente? Melhor escalabilidade: menos trabalho feito no servidor Melhor desempenho/atendimento ao usuário Criar elementos de interface em HTML Menus drop-down e pull-out Diálogos paginados Efeitos especiais, p.ex. animação Validação de dados FEA/USP - EAD Tecnologia de Informática

Cliente x Servidor Pode-se escrever scripts que são executados no cliente (navegador) ou no servidor Web. Dependendo das necessidades do Web Site, pode-se usar scripts no cliente, no servidor ou em ambos. Existem atualmente duas linguagens de scripts suportadas pelos principais navegadores: JavaScript ou JScript (versão Microsoft). VBScript (Visual Basic Scripting Edition)

Scripts no Servidor Quando há scripts no servidor, suas instruções (código-fonte) são executados pelo próprio servidor Web antes da página ser retornada ao usuário. Um script no servidor cria uma página HTML normal de retorno, portanto, o usuário nunca vê o código-fonte do script executado no servidor. Para usar scripts no servidor, seu servidor Web precisa suportar páginas de servidor ativas (Active Server Pages ou ASP, JSP, PHP ou Perl), conforme veremos mais adiante.

VBScript O Visual Basic Scripting Edition é um subconjunto da linguagem Microsoft Visual Basic para Aplicativos. O VBScript é suportado apenas pelo navegador Microsoft Internet Explorer versão 3.0 ou posteriores.

JavaScript O JavaScript é um a linguagem C-like, baseada em Java.
Desenvolvida pela Sun Microsystems Inc. e pela NetScape Communication Corporation. JavaScript é suportada pelo NetScape Navigator versão 2.0 ou posterior e pelo Microsoft Internet Explorer versão 3.0 ou posterior.

JScript É uma variação de JavaScript desenvolvida pela Microsoft.
É suportada pelo navegador Microsoft Internet Explorer versão 4.0 ou superior. Possui mais recursos e um modelo de objetos um pouco diferente de JavaScript padronizada pela Sun e NetScape.

A Tag <SCRIPT> Qualquer código de script sempre deve estar contido dentro das tags <SCRIPT> e </SCRIPT>. O atributo LANGUAGE diz ao navegador que interpretador de scripts deve ser utilizado quando o código for executado: JavaScript, JScript ou VBScript.

Usando VBScript <SCRIPT LANGUAGE="VBScript">  </SCRIPT> <INPUT TYPE=BUTTOM NAME=btnHello VALUE=“Clique Me">

Usando JavaScript <SCRIPT LANGUAGE=JavaScript> var iD
function getid () { id = prompt ("Enter seu número de identificação"); } </SCRIPT> <INPUT TYPE=buttom NAME=cmdTest OnClick="getid();">

Executando Scripts A localização de um script dentro da seção <SCRIPT> de uma página Web determina quando o script deve ser executado. Em geral, você pode adicionar scripts nas seguintes áreas: Nas linhas de código Procedimentos ou funções Procedimento ou funções associados a eventos

Componentes Ativos Java Applets – tag <APPLET>
São programas pequenos, reutilizáveis que expõem uma interface padrão e são executados em um recipiente como um navegador Web. Controles ActiveX – tag <OBJECT> São objetos ou componentes (.dll ou .ocx) que você pode inserir em uma página Web ou outras aplicações que podem se tornar recipientes ActiveX.

Controles ActiveX

Java Applets Quando arquivos-fonte em Java (.java) são compilados, o compilador Java cria arquivos Java bytecode (.class). Quando estes arquivos de classe são carregados para o computador de um usuário, eles são localmente interpretados pela Máquina Virtual de Java Virtual (JVM - Java Virtual Machine). Você pode instalar o JVM como parte de um navegador Web, ou carrega-lo da Internet.

Java Applets

Controles ActiveX vs. Java Applets
Ao usar controles ActiveX, você deve considerar os seguintes aspectos: Maior desempenho Familiaridade para o desenvolvedor Disponibilidade Suporte do navegador Plataforma específica Menor segurança

Controles ActiveX vs. Java Applets
Ao utilizar Java Applets, você deve considerar os seguintes aspectos: Desempenho Tamanho reduzido Independência de navegador Independência de plataforma Maior segurança

HTML Dinâmico - DHTML É um novo conjunto de recursos, baseados em um modelo de objetos, suportado pelos modernos navegadores (a partir do Internet Explorer 4.0 e NetScape 4.7), que permite a criação de páginas Web altamente interativas e intuitivas, incluindo: Gráficos e textos animados. Tratar conjuntos de elementos da página como um grupo. Fazer aparecer ou substituir textos a partir de ações do usuário. Chamar métodos em controles ActiveX e Java Applets. Adicionar transições entre as páginas e obter diversos efeitos visuais.

HTML Dinâmico O HTML Dinâmico alcança seus efeitos modificando o conteúdo do documento original, re-formatando automaticamente e reapresentando o documento para mostrar estas mudanças. Não é necessário recarregar o documento, carregar um novo documento, ou depender do servidor Web para gerar um novo conteúdo. O HTML Dinâmico calcula e executa as mudanças no computador do usuário utilizando os recursos disponíveis nas novas versões dos navegadores modernos.

Programação para a Web DHTML
Processamento no Cliente - Prof. Antonio Geraldo Vidal Programação para a Web DHTML O DHTML Document Object Model (DOM) window event navigator history document location screen frames all location children forms selection body links text radio button textarea select password checkbox submit option file reset FEA/USP - EAD Tecnologia de Informática

Modelo de Objetos do HTML Dinâmico
Os elementos dinâmicos são tags HTML que o modelo de objetos do HTML Dinâmico define e utiliza. Usando essas tags, você pode acessar e manipular todos elementos HTML em um documento. Os elementos estão disponíveis como objetos individuais, portanto é possível examinar e modificar um elemento e seus atributos, lendo e modificando suas propriedades, além de chamar seus métodos. Você pode manipular ou até mudar o texto dentro de um elemento através das propriedades e métodos que podem ser configuradas para os elementos.

DHTML O exemplo a seguir, em VBScript, torna uma porção definida de texto verde, quando o evento que invoca o procedimento changeMe for disparado: <script language="VBScript"> Sub ChangeMe() window.document.body.style.color = "green" End Sub </script> <body onclick="ChangeMe">

Identificando Objetos
Existem muitos meios para acessar elementos em um documento. Você pode selecionar cabeçalhos, parágrafos, divisões e outros elementos de um documento para controlar efeitos dinâmicos. O caminho mais fácil para controlar elementos em um documento é designar um identificador (ID) para cada elemento. <H3 ID="MyHeading">HTML Dinâmico!</H3>

Manipulando Objetos Você pode se referir a um objeto usando o seu identificador ou ID que você previamente designou. Você pode acessar todos os elementos em um documento através de uma coleção de objetos. O código exemplificado a seguir muda a cor do elemento para verde: window.document.all.MyHeading.style.color = "green"

Principais Objetos DHTML
Tag Objeto Descrição <A> A Designa o começo ou destino de um hyperlink. O elemento de âncora exige que você especifique o HREF. <IMG> IMG Embute uma imagem ou um clipe de vídeo no documento. <BODY> BODY Especifica o início e fim do corpo de um documento. <P> P Denota um parágrafo. <H1>, <H2>, etc. H1, H2, etc. Formata texto como um estilo de cabeçalho.

Principais Eventos do DHTML
Ação onclick Pressionar e largar o botão do mouse, ou pressionar teclas ENTER e ESC, em um formulário. ondblclick Clicar duas vezes um objeto. ondragstart Começar a arrastar uma seleção ou selecionar um elemento. onmousedown Pressionar um botão em um dispositivo de apontamento, como o mouse. onmousemove Mover o mouse. onmouseout Mover o mouse para fora de um elemento. onmouseover Mover o apontador do mouse para um elemento. onmouseup Soltar o botão de mouse.

Processamento no Cliente - Prof. Antonio Geraldo Vidal

Apresentações semelhantes

Apresentação em tema: "Processamento no Cliente - Prof. Antonio Geraldo Vidal"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Processamento no Cliente - Prof. Antonio Geraldo Vidal

Apresentações semelhantes

Apresentação em tema: "Processamento no Cliente - Prof. Antonio Geraldo Vidal"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback