PIR - CONTEÚDO ONLINE - Aula 1 a 10

Prévia do material em texto

1 
 
AULA 01: A EVOLUÇÃO DA WEB 
INTRODUÇÃO 
A Web passou por várias transformações desde sua criação, o objetivo inicial era para podermos 
interligar documentos, permitindo que as pessoas pudessem acessar as fontes usadas em pesquisas, 
continuações de trabalhos. Os navegadores evoluíram e passaram a ter mais recursos, a reconhecer uma 
gama maior de marcações ( tags ), forçando ao Consócio gestor da Web a incorporam algumas no padrão do 
HTML. O uso da Web cresceu em uma velocidade e uma dimensão nunca esperada. Começou-se a usar a Web 
para vários fins diferentes, criou-se o comércio eletrônico, as animações em Gif animado foram substituídas 
por filmes em Flash, a Web realmente mudou. 
 
Alguns fatos: 
1990 – TIM Berners-Lee publica uma proposta para a World Wide Web junto com Robert Cailliau 
1991 – Lançamento do NCSA Mosaic (NCSA - Centro Nacional de Supercomputação Aplicada) 
1994 – Jim Clark e Marc Andreessen se juntam e fundam a Mosaic Communications, que posteriormente foi 
rebatizada para Netscape Communications. 
1995 – Microsoft lança o Internet Explorer. 
1999 – É lançada a versão 5 do Internet Explorer. O navegador já possuía a API XMLHttpRequest. 
2000 – A Microrft disponibiliza o Outlook Web Access, cliente de email que usava o navegador como frontend 
e utilizava a técnica Ajax de contrução de aplicação Web. 
2002 – O projeto Mozilla inclui uma versão completamente funcional nsIXMLHttpRequest, permitndo que crie 
aplicações Ajax no navegador. 
2004 – Safari lança uma versão com a API. 
2005 – Konqueror e Opera lança a sua versão com a API 
 
O desenvolvimento de sítios poderia ter mudado desde 2000 com a possibilidade incluída pela Microsoft, mas 
os programadores ainda estavam se acostumando com as possibilidades criadas pelas linguagens Web e os 
outros navegadores ainda não ofereciam suporte a API, limitando o uso desses tipos de página apenas em 
Intranets. 
 
HTML e XHTML 
 
Tim Berners-Lee propôs a especificação do HTML 1.0 contendo 
20 tags, que junto com o programa Mosaic, tornando possível a 
confecção de páginas e a navegação sobre o protocolo HTTP. A 
linguagem já possuía suporte à link, listas e cabeçalhos, algumas foram 
descontinuadas. 
 
 
 
 
2 
 
 
Em 1993, inicia o uso do CGI (Common Gateway Interface), permitindo que as páginas web não 
possuam apenas links, mas enviem informações para o servidor Web, que deixam de ter a tarefa de apenas 
encaminhar arquivos e passam a realizar processamento no servidor. A primeira linguagem difundida para 
aumentar as funcionalidades das páginas foi o PERL. Muitas outras linguagens foram e são usadas para que 
possamos ter páginas com conteúdo dinâmico. 
 
Participaram da especificação do CGI: 
 Rob McCool (autor do servidor Web da NCSA). 
 John Franks (autor do GN web server). 
 Ari Luotonen (Desenvolvedor do servidor Web do CERN). 
 Tony Sanders (autor do servidor Web Plexus). 
 George Phillips (suporte do servidor Web da University of British Columbia). 
 
Tim e Daniel Connolly fazem a proposição da HTML 2.0 junto ao W3C em 1993, tendo sido oficializada 
pelo W3C em 1995 com tags adicionais. A linguagem passa a permitir algumas característica a mais como 
imagem, título da página e formulários. Aumenta a interatividade das páginas, permitindo que o usuário 
envie informações para o servidores Web, sendo as informações processadas por scripts e programas CGI. 
 
 
 
A versão 3 do HTML é proposta em 1995 com uma gama de novas funcionalidades, ela já incluía Style 
Sheet, o documento possuía 150 páginas. As empresa que criavam os navegadores implementaram 
parcialmente as especificações, fazendo que o HTML 3 não fosse um padrão de fato no início. 
 O Consócio W3 formaliza o padrão HTML 3.2, os grande produtores de browsers participaram das 
revisões da especificação, assim como todas as organizações membros do consórcio. O padrão trazia algumas 
evoluções como tabelas, applets Java, texto na mesma linha que imagens, subscrito e sobrescrito. A 
linguagem passa a possuir uma definição de tipo de documento. 
 
 
 
Estrutura padrão HTML 3.2 
Dave Raggett, junto com Arnaud Le Hors e Ian Jacobs fazem a proposição do HTML 4. A nova especificação 
continha aprimoramentos, podemos citar a programação para DOM (Document Object Model) e a inclusão da 
possibilidade se usar o estilo em cascata (CSS – Cascate Style Sheet). 
3 
 
A última versão do HTML foi revisada para 4.0.1, se mantendo como última até que a versão 5.0 
esteja homologada e funcionando nos navegadores. 
O W3C recomenda que se usa XTHML desde 2000, quando reformularam o HTML 4, usando como base 
o XML 1.0. Os documentos em HTML passaram a seguir as regras do XML, podendo ser validados e verificados 
com uma DTD (Document Type Definition). 
Benefífios obtidos com a confecção de páginas em XHTML 1.0 em relação ao uso de HTML: 
O XML permite a sua extensão com mais facilidade, fazendo com que desenvolvedores e navegadores 
possam implementar nova funcionalidades sem muita complicação. O XHTML possui uma especificação para a 
inclusão de novos módulos. 
Estão surgindos novas formas de acesso à Internet, a visualização dos documentos podem ser 
direcionados para os equipamentos ou navegadores usados de uma forma mais fácil com a adoção do XHTML. 
 
Web 2.0 
 
"Web 2.0 é a mudança para uma internet como plataforma, e um entendimento 
das regras para obter sucesso nesta nova plataforma. Entre outras, a regra mais 
importante é desenvolver aplicativos que aproveitem os efeitos de rede para se 
tornarem melhores quanto mais são usados pelas pessoas, aproveitando a 
inteligência coletiva" 
Tim O'Reilly 
 
O termo Web 2.0 foi criado pela O'Reilly Media para dar nome para um conjunto de conferências em 
2004. O termo foi associado a um conjunto de tecnologias, técnicas de criação de páginas e objetivo dos 
sítios que estavam sendo criados. O nome não foi bem recebido por todas as pessoas, Tim Berners-Lee 
contestou ouso do nome, pois muitos conceitos considerados como Web 2.0 já existiam há bastante tempo. O 
que não podemos negar é que mesmo que o pai da Internet não goste do termo, ele passou a ser considerado 
por todos. 
A quebra do poder das grandes empresas em relação ao controle da informação é uma das maiores 
marcas da Web 2.0. Temos a inteligência coletiva como um dos maiores marcos, a criação dos Wikis 
revolucionaram a forma de divulgação da informação, as pessoas pararam de consultar as grandes 
enciclopédias e passaram a freqüentar assiduamente o Wikipedia e afins. 
 Os serviços online gratuitos também vieram a substituir o uso de alguns programas pagos, a Web 
estava repleta de mudanças em relação a sua proposta inicial, não só quanto ao seu início, mas também em 
contraste aos primeiros sites de serviço. A interação, as funcionalidades, os frameworks Javascript que 
estavam surgindo, o crescimento do acesso a grande rede, o surgimento de conexões mais rápidas, eram 
mudanças em cima de mudanças. O cenário não era mais o mesmo, o nome pode não estar adequado para 
alguns, mas a sua criação ajudou a produzir um marco para a Web, aumentou-se a discussão sobre um mundo 
que estava a parte dos fóruns sobre metodologias, o desenvolvimento Web precisava amadurecer. 
 
Assista ao vídeo “Web 2.0 - A máquina somos nós“. 
https://www.youtube.com/watch?v=NJsacDCsiPg 
 
Nas conferencias WEB 2.0, os seguintes princípios foram destacados como características fundamentais: 
 Web 2.0 usa a rede como uma plataforma. 
 Usuário recebe, manipula e controlados os dados no site. 
 Arquitetura participativa na qual o usuário pode adicionar ou editar total ou parcialmente uma 
aplicação de acordo com suas necessidadese experiência. 
 Uma interface rica, interativa e amigável, baseado em Ajax ou estruturas similares. 
 Modelos de negócios enxutos facilitados pelo gerenciamento de conteúdos e serviços. 
 Fim do Ciclo de software ( versão beta ) 
 Alguns aspectos de rede social. 
 Algumas interfaces gráficas, como gradientes e cantos arredondados 
 (ausente na chamada era Web 1.0). 
 Conteúdo gerado pelo usuário 
4 
 
 
 
 
 
Inteligência coletiva 
 
 
5 
 
 
 
 
Redes sociais 
As rede sociais começaram a ser usadas muito antes da Web 2.0, as possibilidades nessa nova era da 
Internet foi ampliado pelas tecnologias existentes. O primeiro sítio considerado como Rede Social que temos 
conhecimento é o SixDegrees.com, ele foi lançado 1997. 
 Uma rede social tem a finalidade de conectar pessoas, permitindo que elas sejam localizadas e se 
agrupem. Ela deve possibilitar que exista privacidade junto com a visibilidade, parece que sejam 
antagônicos, mas a visibilidade permite que as pessoas sejam encontradas, enquanto que a privacidade 
permite que se controle que conteúdo pode estar disponível ou não. 
 Existem várias classificações que podem ser feitas nas redes sociais, tais como: site de 
relacionamento, redes de profissionais, jogos online, etc. 
 O Brasil atingiu a marca de maior número de usuários no Orkut. 
 
 
Mídia Social 
"Um grupo de aplicações para Internet construídas com base nos fundamentos ideológicos e 
tecnológicos da Web 2.0, e que permitem a criação e troca de Conteúdo Gerado pelo Utilizador (UCG)" - 
Andreas Kaplan e Michael Haenlein 
A diminuição do preço das câmeras web, câmeras digitais e das filmadoras digitais possibilitou que 
um grande número de pessoas gerasse muita informação, criando a necessidade de que essa mídia fosse 
disponibilizada para as pessoas conhecidas. Surgiram sites que permitiam que colocássemos esse novo tipo de 
material na Internet e que outros acessassem o conteúdo. A mudança que ocorreu com a Web 2.0 é que a 
informação era compartilhada, podia-se buscar as informações e fazer registros, não estava mais pessoal e 
sim global, fazia paste de uma galeria dos navegantes da Web. 
O YouTube passou a ser o maior símbolo desse movimento, onde as pessoas colocam os seus vídeos e os 
espectares podiam avaliar, guardar em favoritos, compartilhar e receber os vídeos afins. 
 
BLOGGING 
Os blogs datam da década de 90, criado por Jorn Barger com o nome de Weblog. O primeiro site foi o 
http://robotwisdom.com, que obteve um grande número de acesso apesar de não ter nenhum requiste 
6 
 
visual. O nome passou a ser chamado de Blog quando Peter Merholz dividiu a palavra em duas, ficando We-
Blog, no final dos anos 90. 
 Eles possuíam vários usos, desde diários online até a uma visão jornalística, o que foi mais 
perceptível na época em que estavam começando a se discutir sobre a Web 2.0, pois os usuários estavam 
construindo a informação. 
 Um blog é composto de textos que são colocados, acompanhados ou não de fotos, podendo possuir 
links para outras páginas ou blogs. Os visitantes podem fazer comentários sobre as postagens realizadas. 
Existiram blogs para tudo o que se possa imaginar. O número de blogs passa da casa dos 100 milhões em toda 
a Internet. 
 http://estacio.webaula.com.br/Cursos/gon284/docs/16PIR_aula01_doc01.pdf 
http://estacio.webaula.com.br/Cursos/gon284/docs/16PIR_aula01_doc02.pdf 
 
SAIBA MAIS 
 http://www.adobe.com/resources/business/rich_internet_apps/#open 
 http://nikeid.nike.com/ 
 http://h30393.www3.hp.com/printing/app/us/en/launch.aspx 
 http://msnbcmedia.msn.com/i//msnbc/Components/spectra/spectra.html 
 http://moodstream.gettyimages.com/ 
 http://uvlayer.com/ 
 http://windowshop.com/ 
 http://www.scrapblog.com/ 
 https://buzzword.acrobat.com/#o 
 http://aviary.com/home 
 http://www.picnik.com/ 
 http://www.maximumpc.com/article/features/web_browsers?page=0,2 
 http://lista2.0br.com.br/ 
 http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html 
Aula 2: RIA (Rich Internet Application) 
 
INTRODUÇÃO 
O crescente uso da Web trouxe 
necessidades, aplicações e usuários. O tipo de 
funcionamento incomodava os navegantes da 
grande teia, pois era necessário esperar um 
longo tempo para que cada página fosse 
carregada, além disso, cada sítio processava 
uma solicitação após a outra, diferentemente 
dos programas usados, que permitiam 
executar tarefas enquanto uma anterior ainda 
não tivesse terminado. 
A inclusão da API XMLHttpRequest 
pela Microsoft permitiu que a construção de páginas evoluísse. Não era mais necessário esperar o término de 
uma ação para que pudéssemos clicar em outro botão. A evolução do DHTML (Dynamic HTML – Javascript + 
CSS + HTML) permitia que as telas tivessem mais possibilidades na interação, aumento a atratividade e 
mantendo o usuário mais tempo acessando a mesma página. Os desenvolvedores começaram a mudar a forma 
de construir suas páginas, trocando as tabelas por camadas como ferramenta de estruturar os leiautes, essa 
modo de se criar páginas é conhecido como tableless. 
O cenário estava propício para que os programadores e designers Web adotassem uma nova técnica, o 
Ajax passa a ser o grande artifício para que as páginas funcionem de forma semelhante aos programas que 
eram executados nos computadores. 
 
7 
 
FUNCIONALIDADES POSSÍVEIS EM INTERFACES RICAS 
Exemplos de funcionalidades possíveis em interfaces ricas: 
 Preenchimento automático a partir de seleções. 
 Drag and drop (arrastar e soltar). 
 Atualizações parciais das páginas. 
 Menus dinâmicos. 
 Animações dinâmicas. 
 
O termo RIA foi usado pela primeira vez em março de 2003 em um white paper (documento oficial 
publicado) pela Macromedia. Outros termos foram usados para definir o mesmo tipo de construção de 
páginas, como Remote Scripting pela Microsoft em 1999. 
Os navegadores passam a controlar as respostas às ações do usuário, as atualizações das partes da 
tela e o funcionamento da interface na máquina do usuário. A atualização das informações e os 
processamentos continuam ocorrendo no servidor Web. 
 
DIFERENCIANDO O FUNCIONAMENTO 
As páginas Web possuíam o seu funcionamento ditado pelos links do HTML, onde uma página chamava 
outra, ocorrendo sempre o carregamento inteiro de uma página. Uma forma utilizada para se diminuir o 
carregamento foi a utilização de páginas com frames, usando-se as tags frameset e frames para se definir as 
divisões. A página era chamada para um quadro específico, enquanto os outros mantinham as suas 
informações, não sendo necessário transferir novamente os arquivos para os outros quadros. Os designers 
contestavam muita a utilização de frames. 
Observe a comparação entre o funcionamento tradicional e com o uso de Ajax na figura ao lado. 
A construção de páginas com a técnica Ajax muda a forma de estruturar os sítios. A primeira página 
possuirá o tratamento das funcionalidades que irão controlar a navegação, esse tratamento é realizado por 
funções Javascript. As ações do usuário irão chamar arquivos que devolverão informações ou partes das 
páginas, diminuindo significativamente a quantidade de informação a ser transferida para o usuário a partir 
do servidor Web. A criação de frameworks facilitou a criação de interfaces ricas, pois eles oferecem as 
funcionalidades necessárias e realizam os tratamentos necessários para que as páginas funcionem em vários 
navegadores. 
 
 
 
8 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
TECNOLOGIAS UTILIZADAS 
A construção de interfaces ricas pode ser feita com uma grande variedade de tecnologias, técnicase 
linguagens. Podemos usar o XHTML como base ou produtos desenvolvidos por empresas. 
 
XHTML 
Quando usamos o XHTML para construir a interface, necessitamos do Javascript para tratar as ações 
do usuário, alterar as informações da tela. O CSS é usado para que possamos configurar a aparência dos 
objetos. A API XMLHttpRequest irá fazer a requisição dos arquivos no servidor Web, a maioria das vezes esses 
arquivos serão formados por linguagens que são executas no servidor, sendo essas responsáveis por acessar 
informações em bases de dados ou atualizá-las, enviar emails, atualizar arquivos, entre tantas 
funcionalidades possíveis. 
 
FLASH 
Software desenvolvido pela FutureWave Software para o sistema operacional PenPoint OS. O 
aplicativo foi portado para funcionar na Internet. A Macromedia adquiriu o aplicativo renomeando-o para 
Flash. Permite a construção de interfaces bem elaboradas, possibilitando a inclusão de som e vídeo. Ele é 
muito poderoso, permitindo a criação de jogos. A linguagem embutida, ActionScript, fornece ao 
desenvolvedor o controle sobre todos os objetos utilizados na tela. 
O arquivo gerado pelo aplicativo é chamado de filme Flash. O navegador necessita que seja instalado 
plug-in para que ele possa executar o filme. A versão de plug-in pode ser estipulada ao se confeccionar o 
filme. 
As atualizações das informações são realizadas através de chamadas a linguagens executadas no 
servidor. A Adobe possui o Flex, ele possui a função de facilitar a integração entre o filme e as chamadas aos 
códigos que são executados no servidor Web, integrasse de uma forma mais simples com a linha de tempo 
dos filmes Flash. 
 
SILVERLIGHT 
A Microsoft criou um concorrente para o Flash, o framework Silverlight. Permite criar interfaces do 
usuário usando o bloco de notas, o Visual Studio ou qualquer outro editor, porém o trabalho fica muito 
facilitado com o Microsoft Expression Blend, que é uma ferramenta WYSIWYG. Utiliza o XAML (Extensible 
Application Markup Language) para descrever os objetos da tela. O Silverlight utiliza uma parte do framework 
dot Net, que é utilizado para chamadas aos códigos do servidor também. 
 
XUL 
Linguagem para criação de interfaces a partir de tags XML. Foi criada especificamente para o 
desenvolvimento de interfaces de usuário portáveis. XUL é uma parte integrante do browser Mozilla. Podendo 
9 
 
ser executada em browsers baseados em Gecko, existe um plug-in para o Internet Explorer. Permite a criação 
de páginas com a aparência de programas desktop, usando os objetos no mesmo formato usado por Delphi e 
Visual Basic. Utiliza Javascript em conjunto com a API XMLHttpRequest para chamar os códigos executados no 
servidor Web. 
Gecko - engine para layout desenvolvida pela Mozilla Foundation. Originalmente chamada de 
NGLayout. 
 
LINGUAGENS WEB 
Existem várias linguagens e tecnologias que respondem a chamadas sobre o protocolo HTTP. As 
tecnologias são confundidas com linguagens, mas elas permitem o uso de algumas linguagens para que crie a 
codificação. 
Linguagens: • PHP • Java – J2EE • Ruby • Python • Cold Fusion • Perl 
Tecnolgias: • Asp dot Net • Asp Puro 
Podemos criar executáveis com qualquer linguagem de programação que possua tratamento para CGI, 
os arquivos devem ser colocados na pasta cgi-bin do site e deve estar habilitada a execução dos mesmos. 
Delphi e Visual Basic possibilitam a criação de DLLs com a mesma função, a biblioteca dinâmica deve ser 
registrada no servidor Web. 
 
http://estacio.webaula.com.br/Cursos/gon284/docs/16PIR_aula02_doc01.pdf 
 
BENEFÍCIOS 
As aplicações ricas vieram auxiliar aos usuários que não possuem muita habilidade no uso do 
computador. Elas permitem a construção de facilidades no uso, textos de ajuda, informações de retorno e 
interfaces mais intuitivas. Os frameworks ajudaram bastante a padronizar o funcionamento dos objetos de 
tela, o que deixa o usuário mais seguro ao interagir com as páginas. 
Muitas ferramentas estão sendo migradas para a plataforma Web, muitas delas necessitam de 
funcionalidades que o HTML não consegue suprir. Os recursos que podem ser desenvolvidos com o uso de 
Javascript e CSS aliados ao DOM do XHTML, transformaram os aplicativos Web muito poderosos. 
O tempo de resposta para o usuário em RIA é menor, o que melhora a satisfação. Elas permitem que 
se executem outras tarefas sem exigir que se espere o término de um anterior, aumentando a funcionalidade 
da interface. A aproximação do formato das telas de programas que são executados localmente no 
computador, auxilia o aprendizado dos novos usuários nesse novo ambiente. 
 
http://estacio.webaula.com.br/Cursos/gon284/docs/16PIR_aula02_doc02.pdf 
 
Sites sugeridos: 
http://www.adobe.com/br/resources/business/rich_internet_apps/getting_started 
http://www.ashleyit.com/rs/news.htm 
http://uxmag.com/articles/rich-internet-application-screen-design 
http://www.adobe.com/macromedia/proom/pr/2002/flash_mx_apps.html 
http://www.adobe.com/devnet/flash.html 
http://msdn.microsoft.com/pt-br/silverlight/bb187401.aspx 
https://developer.mozilla.org/En/XUL 
http://chronosbox.org/blog/tags/rich-internet-application 
http://www.w3schools.com/Ajax/default.asp 
http://uxmag.com/articles/rich-internet-application-screen-design 
http://delicious.com/stacks/view/IqJHr2 
http://www.worldofmerix.com/ 
 
 
10 
 
Aula 03: Fundamentos de XHTML 
Introdução à XHTML 
A criação de páginas Web vem evoluindo desde o seu início. Os navegadores ganharam versões mais 
atualizadas, contendo mais recursos e reconhecendo uma gama maior de marcações. A linguagem 
recomendada pelo W3C é o XHTML 1.1. A versão 5.0 da HTML ainda está em fase de desenvolvimento, mas 
algumas novidades já são reconhecidas pelos navegadores. 
 Iremos ver a XHTML e nos ater aos recursos mais utilizados para a construção de interfaces ricas. 
Outras disciplinas possibilitaram que vocês criassem interfaces e que se apropriassem da construção de 
páginas com XHTML, faremos algumas recordações necessárias. 
O XHTML possui a estrutura de um arquivo XML e as marcações do HTML, como já vimos nas aulas anteriores. 
A mudança veio trazer algumas facilidades para validação do documento e criação de navegadores para 
outros equipamentos. O HTML é uma aplicação da SGML. 
 
 
Estrutura 
A estrutura das páginas XHTML continua seguindo o que já era imposto pelo HTML 4, porém passamos 
a ter a rigidez do XML, aliado a isso, podemos validar o nosso documento, pois a determinação de uma DTD 
(Document Type Definition) permite que programas verifiquem se o documento segue a definição. Ela 
especifica qual a estrutura do documento, quais marcações podem ser colocadas internas às outras e os 
atributos aceitos por uma específica, informando a sua obrigatoriedade ou não. 
 
Estrutura básica de uma página XHTML 1.0 
 
 
 
 
 
 
 
 
 
 
 
11 
 
Estrutura da página mostrando elementos e atributos 
 
DOCTYPE 
Define o tipo do documento. Informando qual a DTD (Document Type Definition) será utilizada para 
validar o documento. 
 
Parte da DTD que define a tag "html" (informa que ela só pode possuir head e body) 
 
DTDS STRICT 
Não permite o uso de tags/atributos descontinuados. É indicada para uso em conjunto com CSS. O 
documento deve ser bem formado. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
DTD TRANSATIONAL 
Permite o uso de tags/atributos descontinuados. O documento deve ser bem formado. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
DTD FRAMESET 
Possui asmesmas características da DTD Transational, inclui a possibilidade do documento possuir 
frameset, criação de estrutura de quadros. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
 
MUDANÇAS GERADAS PELA ADOÇÃO DO XHTML 
A adoção do XML como forma de estruturar o documento trouxe algumas mudanças na confecção de 
páginas Web. 
Características: 
 As marcações sempre ser propriamente aninhados. 
 Não podem existir tags intercaladas, uma marcação não pode possuir uma terminação antes que 
todas as internas a ela estejam fechadas. 
Ex: correto - <tr> <td>texto </td> </tr> 
Ex: errado - <tr> <td>texto </tr> </td> (o fechamento do tr deveria vir após o fechamento do td) 
 Todas as marcações devem possuir a terminação. 
12 
 
 Tags que não possuam uma terminação devem informar na abertura que não existe um par para ela. 
Ex: em par - <p> texto do parágrafo </p> 
Ex: marcação única - <input type="text" name="endereco" /> (a barra deve fica colada ao sinal de 
maior) 
 Não é permitido o uso de marcação sem fechamento. A quebra de linha é um outro exemplo dessa 
necessidade, passou a ser escrita com a barra: <br /> 
 Os nomes das marcações devem sempre estar em letra minúscula. 
 Atributos devem estar sempre entre aspas. A HTML permitia que o valor de um atributo ficasse 
colado ao sinal de igual sem estar entre aspas, isso não é permitido em XHTML. 
 O documento deve possuir somente um elemento raiz. 
 
Veja a comparação entre as versões no link : http://www.w3schools.com/tags/ref_html_dtd.asp 
 
VALIDAÇÃO DE DOCUMENTO XHTML 
A criação de documentos usando uma DTD permite que seja verificado o código, podemos verificar a 
estrutura e validar as marcações utilizadas, tanto na sua posição dentro do documento quanto a utilização 
dos atributos. O W3C fornece um link para fazermos a avaliação, porém a informação retornada é se o 
arquivo está com erros ou não. Algumas IDEs fornecem feedbacks na posição do erro, o Dreamweaver 
apresenta mensagens para tags sem fechamento ou sem abertura, o NetBeans fornece avisos para erros em 
atributos também, além de possuir auxílio para elementos e atributos possíveis, mostrando listagem de 
valores possíveis para os atributos. 
 
Endereço para validação: 
http://validator.w3.org/ 
 
Vantagens 
Os documentos XHTML estão em conformidade com a estruturação estabelecida na XML, permitindo 
que eles sejam validados através da DTD selecionada. Podem ser usadas ferramentas para editar arquivos 
XML para manipular o documento. 
A criação de novos navegadores é mais fácil, pois as regras da XML são mais concisas, facilitando a 
interpretação dos códigos e sua posterior renderização. 
 
O documento HTML permite o uso de marcações que o navegador só terá certeza que não tinha um 
par de término ao chegar ao seu fim, fazendo que todas as informações permaneçam empilhadas na memória 
do computador e gerando a necessidade de um número maior de avaliações, o documento XHTML diminui o 
trabalho do navegador, acelerando a interpretação e apresentação da página. 
13 
 
 Os documentos podem incluir MathML, SMIL, or SVG, aumentando as possibilidades com a 
apresentação de outros recursos como o desenho vetorial criado com SVG. 
Página com o desenho gerado 
 
 
Formulários 
Os formulários permitem que os usuários entrem com informações em uma página Web. O uso do 
formulário permitiu que os sítios construídos passassem a oferecer muitas possibilidades, os desenvolvedores 
puderam construir sistemas Web com as mesmas finalidades dos sistemas que eram executados nos 
computadores dos clientes. 
 
A marcação "form" possui atributos para 
configurar o seu funcionamento, entre elas podemos 
citar o atributo "method", ele informa como serão 
enviados os dados para o arquivo especificado no 
atributo "action". As interfaces ricas utilizam o Ajax para 
enviar os dados, podendo enviá-los através do método 
POST ou GET, da mesma forma que seria enviada 
diretamente pelo método "submit" formulário. 
O atributo "id" é usado pela linguagem Javascript para 
fazer referência a uma tag no documento, sendo 
obrigatório o seu uso nas partes da página que serão 
acessadas pelas funções da linguagem. 
 Sabemos que o formulário fornece uma porta de 
entrada para as informações do usuário, mas vamos 
tentar abordar algumas utilizações possíveis, iremos 
abordar também as diferenças geradas pelo uso de Ajax 
e interfaces ricas. Esse par fez com que algumas 
interações que eram feitas por links ou por formulários pudessem ser feitas com outros objetos sendo 
selecionados ou arrastados pela tela. 
 O uso do botão limpar (<input type="reset" />) sempre foi questionado por mim, pois poderia causar 
uma situação desagradável se não tivesse nenhum tratamento. Qualquer usuário ficaria muito irritado ao 
clicar erradamente no botão limpar de um formulário após completar quarenta campos de informações, esse 
botão poderia ter tratamento com Javascript, quase nunca se encontra o tratamento. 
 Formulários que possuem campos interdependentes exigiam que os dados digitados pelo usuário 
fossem preenchidos novamente quando a página fosse recarregada, as seleções em alguns campos fossem 
ativadas novamente e o campo que possui dados de acordo com a informação de outro viesse com as suas 
informações disponíveis. O Ajax permite que o preenchimento ou a filtragem de campos interdependentes 
seja feita sem a necessidade que esses campos recebam o tratamento listado, pois os campos vão sendo 
preenchidos com o usuário informando os dados pedidos, sem que a página seja recarregada. 
 
http://estacio.webaula.com.br/Cursos/gon284/docs/PPIR_aula03_doc01.pdf 
 
 
 
14 
 
Exercícios 
 
1. Crie o formulário ao lado usando 
as restrições informadas: 
Hotel: largura de 45 caracteres, 
permitindo a entrada de 60. 
Cidade: Coritiba, Florianópolis, 
Manaus, Recife, Rio de Janeiro, Saquarema 
e Ubatuba 
Descrição: Largura de 60 
 
2. Crie um formulário para o 
cadastro de um ônibus de turismo, use 
todos os tipos de campos pelo menos uma 
vez. 
 
 
 
 
Camadas 
O desenvolvimento de páginas Web passou por várias fases. O uso de apelos visuais sempre esteve 
presente, desde que se usavam pequenos GIFs animados até as animações interativas feitas em Flash. A 
entrada dos “designs de papel” para a área de criação de leiaute de páginas mudou muito a forma de se 
pensar interfaces, passamos a ter telas mais elaboradas. O uso de imagens pesadas foi marcante nesse início, 
houve um tempo de adaptação, o que podia se constatar é que tudo estava mais bonito. 
 A criação da estrutura do leiaute com tabelas era comum, porém trabalhosa e dificultava o uso de 
pessoas acostumadas com as ferramentas gráficas. Um termo se popularizou nessa época, o “tableless”, a 
proposta era de que se construísse o formato da tela sem o uso de tabelas e sim com camadas posicionadas 
em posições específicas. Isso foi possível com a utilização de CSS. 
Algumas marcações foram usadas para se criar camadas são “span” e “div”. A Netscape havia lançado a 
proposta de se usar uma marcação chamada “layer”, porém ela não foi aceita pelo W3C. Essas marcações 
podem ser usadas para definir formatações em uma determinada região, mas o crescimento do uso de “div” 
acontece com o uso leiautes “tableless”, tendo a funcionalidade de uma camada como as usadas em 
programas gráficos. 
 As áreas delimitadas possuem uma funcionalidade própria podendo ser colocadas em áreas da página, 
ocultadas, arrastadas, ter o seu conteúdo alterado. Algumas páginas utilizavam desse funcionamento para 
que fosse possível melhoraras informações para o usuário e a facilidade de interação com os objetos de tela. 
Exemplo: 
 
<h1>Começando com camadas</h1> 
<div title="exemplo">Primeira camada</div> 
<div title="Experimentando">Segunda camada 
</div> 
 
http://estacio.webaula.com.br/Cursos/gon284/docs/
PPIR_aula03_doc02.pdf 
 
 
 
 
Outras Tags 
Uma página XHTML é feita de muito mais marcações do que apenas formulário e camadas, não vamos entrar 
em detalhes nas outras pois já foram examinadas em outras disciplinas, mas estamos lembrando que você 
precisará de todo o arsenal de tags para poder construir interfaces ricas. Precisaremos das tabelas para 
dispormos informações, precisaremos dos links, mesmo que sejam usados para que o carregamento das 
15 
 
páginas seja feito com funções Javascript e chamadas Ajax, precisaremos da imagem para que o usuário 
queira interagir com as página e conhecer a aparência de produtos. Podemos construir interfaces ricas com 
Flash, mas o XHTML também permite. Os frameworks Javascript poupam muito trabalho, mas não fazem a 
interface toda, apenas interagem com o que você construir. 
 
EXERCÍCIOS 
Crie uma página com quatro áreas distintas, cada uma com uma camada. Preencha três áreas com 
formulários e uma com um menu montado em uma tabela de uma coluna e dez linhas. O tema da página 
deve ser Árvore. 
 
SAIBA MAIS 
Acesse também: 
 http://www.w3schools.com/html/html_xhtml.asp 
 http://validator.w3.org 
 http://www.w3c.br/cursos/html5/conteudo/ 
 http://www.w3schools.com/xml/default.asp 
 http://ihmbr.blogspot.com/2008/03/xml.html 
 http://office.microsoft.com/pt-pt/excel-help/xml-para-principiantes-HA010034022.aspx 
 http://under-linux.org/blogs/mlrodrig/afinal-o-que-e-xml-1206/ 
 http://www.w3.org/MarkUp/SGML/sgml-lex/sgml-lex 
 
Aula 04: Fundamentos de CSS 
Introdução 
O CSS aumentou muito a possibilidade de se formatar páginas HTML, não incluindo apenas padrões, 
mas adicionando possibilidades na criação de configurações e adornos que o HTML não possuía. Inicialmente 
existia apenas a folha de estilos, posteriormente foi adicionada a possibilidade de se aplicar o estilo 
gradualmente em cascata. 
 Foram criadas ferramentas que facilitavam a criação de folhas de estilo externas, posteriormente os 
construtores de páginas passaram a possuir essa facilidade. As IDEs WYSIWYG auxiliam na utilização de folhas 
de estilos, pois podemos verificar enquanto vamos construindo a página. 
 O CSS permite que a mesma página possua aparências diferentes, sendo cada uma destinada para ela 
sejam exibida em um meio diferente, podemos construir uma formatação para ela ser apresentada no 
navegador e outra para a impressora, isso é útil em comprovantes impressos pelo sítio. 
 A criação de páginas ganhou com o uso de estilos, podemos ter mais controle do que desejamos que o 
navegador exiba, As formas e as cores bem usadas melhoram a aparência, deixando a interface mais 
agradável para o usuário. 
 
Histórico 
Folha de estilo existe desde a década de 80, porém temos a sua inclusão no HTML 3.0 em 1995. 
Foram feitas nove proposições para aumentar as possibilidades de se formatar a aparência das páginas Web, 
duas formaram a base do que se transformou no CSS que temos hoje. 
Håkon Wium Lie propôs em outubro de 1994 a CHSS 
(Cascading HTML Style Sheets). Bert Bos apresenta em abril 
de 1995 o navegador Argo ao W3C, ele utilizava uma 
linguagem própria de estilos o SSP (Stream-based Style Sheet 
Proposal). A convite de Lie eles se juntaram para desenvolver 
o padrão CSS baseados na CHSS, como a folha de estilo 
poderia ser usada em outras linguagens de marcação 
removeram o H. Lie e Yves Lafon se juntaram com Dave 
Raggett (trabalho na prposição do HTML 4) para fazer com que o navegador Arena suportasse CSS, esse foi 
apresentado também em abril de 1995. 
 
 
16 
 
Começando com CSS 
Para podermos entender o funcionamento de estilos, precisamos primeiramente saber como criamos e o que 
é um estilo. Um estilo possui um conjunto de regras de formatação que podem ser aplicados a uma marcação 
ou a um conjunto de marcações. Podemos definir que sempre que uma marcação esteja sempre com uma 
marcação, além disso, é possível se definir uma classe para posterior uso. 
 
Onde, 
Seletor – nome de uma tag. 
Classe – nome um estilo que pode ser usado em uma tag. 
[ ] – opcional, podemos definir classes associadas a uma marcação 
específica ou solta, podendo ser usada em qualquer marcação nesse 
caso. 
 
Foram formatadas as marcações “p” e “body”. A última 
formatação do estilo não necessita que se informe o 
símbolo de fim de instrução “;”. 
 
 
 
 
 
 
 
Agrupando 
 
 
 
Usando Classes 
 
 
Prioridade dos estilos 
A prioridade para o efeito cascata em ordem crescente: 
 Folha de estilo padrão do navegador do usuário; 
 Folha de estilo do usuário; 
 Folha de estilo do desenvolvedor; 
 Estilo externo; 
 Estilo incorporado; 
 Estilo inline ; 
 Declarações do desenvolvedor com !Important; 
 Declarações do usuário com !Important; 
 
Para validar arquivos Javascript podemos usar um programa ou acessar o endereço 
http://jigsaw.w3.org/css-validator. 
 Iremos falar e mostrar algumas formatações existente no CSS, mas o ideal é ter contato com todas e 
saber como podemos consultar para conhecer todo o seu poder. 
 
 
17 
 
Configurando fontes e textos 
O CSS permite que se configure o texto nas páginas, oferecendo uma quantidade enorme de 
formatações. Iremos olhar algumas e pedir que faça alguns exercícios para que consiga compreender o 
funcionamento. 
Color 
Define a cor da fonte. O valor atribuído pode ser um nome de cor conhecido ou uma combinação de 
cores no padrão rgb, a combinação pode ser feita com um valor hexadecimal ou com o uso da função rgb e os 
valores em decimal separados por cor. 
 
Nome no CSS Cor Nome no CSS Cor 
 
aqua 
black 
blue 
fuchsia 
gray 
green 
lime 
maroon 
 
Azul claro 
Preto 
Azul 
Rosa 
Cinza 
Verde 
Verde-limão 
Marrom 
 
navy 
olive 
purple 
red 
silver 
teal 
white 
yellow 
 
Azul escuro 
Marrom claro 
Roxo 
Vermelho 
Prata 
Verde-água 
Branco 
Amarelo 
 
Existem várias configurações que podemos usar para que 
nossas interfaces fiquem mais atraentes. As caixa permitem que 
coloquemos linhas em volta do texto ou em uma tag específica, as 
larguras e alturas podem ser especificadas. As formatações de fundo 
possuem vários recursos, existe forma de se fixar imagens no fundo, 
fazer com que ela expanda, atribuir cor de fundo para uma 
marcação apenas. 
 Iremos apresentar algumas formatações para que se possa 
ter contato com a formatação de caixas. 
 
 
 
 
 
 
18 
 
 
 
Exercícios 
1) Crie uma página que chame um arquivo de CSS externo. A página deve ser a capa de um jornal com seis 
matérias (copie os textos e as fotos de um jornal). Usar as formatações de texto apresentadas até o 
momento e o posicionamento de camadas visto na última aula. 
 
2) Continuando o exercício anterior. Inclua no estilo: tabulação na primeira linha, espaçamento entrelinhas, 
coloque o alinhamento vertical como topo. 
 
3) Continuando o exercício anterior. Coloque imagem de fundo em metade das matérias e cor de fundo em 
outras. Faça com que cada camada possua linhas de contorno diferentes em cada lado. 
 
Usando pseudo elementos e pseudo classes 
O CSS possui algumas formatações que estão relacionadas com situações específicas. Os hiperlinks fornecem 
a possibilidade de se configurar três estados, normal (o link), visitadoe ativo (com o foco do cursor). O 
parágrafo permite que existam configurações específicas para a primeira letra, a primeira linha, antes e 
depois do parágrafo. A página permite se configure as margens direita e esquerda. As marcações percebem 
se o mouse está sobre ela ou não, apesar de ser mais usado com a tag "a", a pseudo classe pode ser usada 
com as outras marcações. 
 
 
Exemplos de utilização de CSS 
O CSS possui algumas formatações que estão relacionadas com situações específicas. Os hiperlinks fornecem 
a possibilidade de se configurar três estados, normal (o link), visitado e ativo (com o foco do cursor). O 
parágrafo permite que existam configurações específicas para a primeira letra, a primeira linha, antes e 
depois do parágrafo. A página permite se configure as margens direita e esquerda. As marcações percebem 
se o mouse está sobre ela ou não, apesar de ser mais usado com a tag "a", a pseudo classe pode ser usada 
com as outras marcações. 
 
 
19 
 
Assista alguns vídeos para maior conhecimento.Um exemplo: 
http://www.youtube.com/watch?v=4Pf1Qq0n1m0 
 
Barra horizontal de menu com CSS 
http://www.youtube.com/watch?v=zovF1n1furk&feature=fvst 
http://www.youtube.com/watch?v=oyZoCwzXyP4&feature=fvst 
 
Media Query 
http://www.youtube.com/watch?v=UUCZnRcur2g 
 
Saiba Mais 
http://www.w3.org/TR/#tr_CSS 
http://www.w3schools.com/css/ 
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets 
http://www.criarweb.com/css/ 
http://pt-br.html.net/tutorials/css/ 
http://www.cssmania.com/ 
http://www.maujor.com/index.php 
http://www.w3.org/Style/History/ 
http://www.cssmania.com/galleries/ 
http://www.criarweb.com/css/ 
http://www.alistapart.com/articles/alternate/ 
 
Aula 05: Fundamentos de CSS II 
Histórico do Javascript 
O Javascript foi desenvolvido pela Netscape por Brendan Eich. A linguagem foi inicialmente chamada 
de Mocha. Quando a versão 2.0 do Netscape é lançada em setembro de 1995, o navegador já interpretava a 
linguagem, porém, ela havia sido rebatizada para Livescript. A linguagem já se chamava Javascript na 
atualização da versão do navegador 2.0B3 em dezembro do mesmo ano. A utilização do nome surge de uma 
associação entre a Netscape e a Sun, quando o navegador passou a possuir suporte a tecnologia Java, 
permitindo o uso de Applets. A Netscape apresentou a especificação da linguagem para a Ecma International, 
exsitia a intenção de que ela fosse considerada como um padrão da indústria. A entidade ciniiou grupos de 
trabalho para gerar um padrão, foi criado ECMAScript. 
 A Microsft lançou a sua linguagem script com sintaxe oriunda de "C++" para não ter problema com 
patentes, o Jscript. O navegador Internet Explorer também possuia um interpretador para Vbscript, porém 
ela não funcionava no Netscape. O Jscript foi incluido na versão 3.0 do navegador. Ela seguia inicialmente o 
que existia no Javascript, tendo algumas funcionalidades distintas, posteriormente passou a seguir o padrão, 
ECMAScript. A diferença entre o funcionamento das linguagens script no Netscape e no Internet Explorer 
sempre foi um problema para os desenvolvedores. 
 O Javascript transformou o mundo Web, permitiu que os navegadores deixassem de ser meros 
espectadores, passando a ter a missão de entender e executar códigos de uma linguagem de programação. A 
criação de scripts Javascript trouxe animações nas páginas, validações de formulários, entre tantas outras 
possibilidades. A criação de interfaces ricas aumenta a necessidade do uso de Javascript e o Ajax também 
amplia essa necessidade, os dados deixaram de ser enviados quando o navegador requisita uma página, mas 
quando um objeto dele faz isso, necessitando da linguagem para realizar esse trabalho. 
 
http://estacio.webaula.com.br/Cursos/gon284/docs/16PPIR_aula05_doc01.pdf 
 
Sintaxe da linguagem 
O Javascript segue a sintaxe básica do Java para as suas estruturas. Não é fortemente tipada, 
permitindo que suas variáveis funcionem de acordo com o conteúdo que estão armazenando. A linguagem 
20 
 
não exige que suas variáveis sejam declaradas, bastando atribuir u+.9+.m valor para que elas possam ser 
usadas a partir de um determinado ponto. 
 Estrutura básica de inclusão de scripts nas páginas HTML. 
 
<script> 
Set de instruções 
</script> 
 
A marcação script delimita uma área para que coloquemos códigos. 
 
 
 
Podemos inserir comentários em nossos códigos, é usado o // (barra barra) para comentários de uma 
linha e /* texto */ (barra asterístico e asterístico barra) para comentários de várias linhas. 
 
Onde podemos colocar os códigos Javascript 
A marcação "script" pode ser colocada dentro de "head" ou "body", iremos usar o "head" para 
colocarmos nossas funções e o "body" quando necessitarmos que o Javascript apresente alguma caixa de 
diálogo ou gere objetos da tela e textos na tela quando a página for carregada. Existe também a 
possibilidade de que sejam colocados códigos diretamente nos eventos, iremos ver isso no assunto eventos. 
Você deve executar todos os exemplos para tentar aprender o funcionamento. 
 
 
Operadores 
Dividimos os operadores inicialmente em operadores aritméticos, relacionais e lógicos, existem 
também operadores de bit, operador de seleção (ternário). Os operadores aritméticos permitem que façamos 
expressões e obtenhamos um resultado que irá depender dos tipos de dados e dos próprios operadores. Os 
operadores relacionais obtêm um valor lógico como resultado de sua avaliação. Operadores lógicos comparam 
valores lógicos, gerando um novo valor lógico. 
 Usaremos o método "write" do objeto "document", o método adiciona informações na página, fazendo 
com que o navegador exiba os dados recebidos. 
 
http://estacio.webaula.com.br/Cursos/gon284/docs/16PPIR_aula05_doc02.pdf 
http://estacio.webaula.com.br/Cursos/gon284/docs/16PPIR_aula05_doc03.pdf 
 
21 
 
Delimitadores de bloco 
O Javascript utiliza as chaves como delimitador de bloco. Eles permitem que várias instruções 
recebam o mesmo funcionamento que a instrução após a estrutura da linguagem, algumas interferem na 
instrução imediatamente após a ela. A estrutura "if" realiza um teste condicional que executa ou não a 
próxima instrução, para que esse tratamento seja aplicado a varias instrução devemos circundá-la com 
delimitadores de bloco. 
 
<script type="text/Javascript" > 
//******* 
// sem bloco 
//******* 
if (10 < 6) 
 alert("Primeiro texto."); 
 alert("Segundo texto."); 
 alert("Terceiro texto."); 
//******* 
// com bloco 
//******* 
if (10 < 6) { 
 alert("Primeiro texto."); 
 alert("Segundo texto."); 
 alert("Terceiro texto."); 
} 
</script> 
 
Caixas de diálogo 
As caixas de diálogo são janelas que permitem que o nosso sistema interrompa seu funcionamento, 
aguardando que o usuário interaja com elas antes de prosseguir, esse tipo de funcionamento é chamado de 
janela modal, impede que o usuário acione qualquer outra parte do sistema antes de fechar a janela atual. 
 Mostramos duas caixas de diálogo em nossos exemplos, ficando apenas uma de fora. Existe uma para 
podermos enviar um aviso ao usuário, uma segunda para pedirmos que o usuário entre com alguma 
informação e uma terceira que pede ao usuário para escolher entre opções com dois botões (OK e Cancelar), 
como os navegadores é que interpretam o HTML e o Javascript esses valores podem ser diferentes. 
 
 
 
Direito Ambiental 
Podemos passar informações para a função, essas informações têm o nome de parâmetro. Uma 
variável comum é passada por valor, a função recebe uma cópia de seu valor e esse é armazenado na variável 
que é criada quando a função inicia, a variáveloriginal possui seu valor inalterado. Quando passamos objetos 
22 
 
ou vetores nos parâmetros o Javascript não cria uma cópia dele, é criada uma referência para o próprio 
objeto, todas as alterações realizadas nos valores são feitas diretamente no objeto ou vetor passado, não 
havendo preservação do valor original. 
 A função pode ser definida com nenhum parâmetro ou vários, podemos também criar funções que 
possuam um número de parâmetros variável, recuperando-os através do vetor "arguments". 
 
http://estacio.webaula.com.br/Cursos/gon284/docs/funcao2.html 
 
Eventos 
Os objetos de uma página XHTML percebem algumas ações sobre eles, chamamos de eventos essas 
ações reconhecidas. A programação motivada por eventos começou nos sistemas operacionais com janelas, o 
programador insere código para tratar ações que o usuário deveria realizar com a tela. 
 Em seguida apresentamos a lista de alguns eventos possíveis, indicando os momentos em que os 
mesmos podem ocorrer, bem como, os objetos passíveis de sua ocorrência. 
 
 
 
A marcação "body" pode chamar algum tratamento antes de o usuário sair da página. 
 Ocorre quando o objeto perde o foco e houve mudança de conteúdo, válido para os objetos text, 
select e textarea. Veja o exemplo. http://estacio.webaula.com.br/Cursos/gon284/docs/eventos1.html 
 Quando o cursor sai do objeto, ele perde o foco. Esse evento é usado quando se deseja tratar mesmo 
que não tenha havido mudança, válido para os objetos text, select e textarea. 
 Funciona de forma inversa do anterior, ele é chamado sempre que o objeto receber o foco, válido 
para os objetos text, select e textarea. 
 Ocorre quando o objeto recebe um click do mouse, válido para todos objetos de tela, usamos mais 
para o objeto <input type="button" />. 
 
Ocorre quando o ponteiro do mouse passa por sobre o objeto. Podemos usar esse evento no objetos 
da tela. Possui muitas possibilidades na criação de interfaces ricas, permite que seja percebido se um 
produto foi arrastado para uma imagem do carrinho por exemplo. 
 Ocorre quando o texto dentro do objeto é selecionado, válido para os objetos "inpt text" e textarea. 
 Ocorre quando um formulário está sendo enviado. Utilizamos esse evento para podermos validar 
formulários, podendo cancelar o seu envio. Para cancelar um envio, basta que ele retorne "false". 
 
<form action="avalia.aspx" onsubmit="return validaCampo();" > 
Nome <input type="text" name=nome" id="nome" /> <br /> 
 
<input type="submit" value="Incluir" /> 
</form > 
 
http://estacio.webaula.com.br/Cursos/gon284/docs/eventos2.hml 
 
Exemplos de uso 
http://estacio.webaula.com.br/Cursos/gon284/docs/exercicio.html 
 
1. Calendário. 
2. Troca de Image. 
3. Validação de Formulário. 
4. Validação de formulário 
5. Uso de camadas. 
6. Menu em árvore. 
7. Botões Radio. 
8. Exercício. 
23 
 
9. What is JavaScript? 
10. Google I/O 2011: Learning to Love JavaScript. 
 
http://www.scriptbrasil.com.br/apostilas/internet/javascript/ 
http://www.w3schools.com/js/ 
http://en.wikipedia.org/wiki/JavaScript 
http://pt.wikipedia.org/wiki/JavaScript 
http://www.criarweb.com/javascript/ 
http://codigofonte.uol.com.br/artigos/javascript-dhtml 
http://www.webdeveloper.com/forum/forumdisplay.php?forumid=3 
http://www.sobresites.com/desenvolvimentoweb/javascript.htm 
http://www.techtudo.com.br/dicas-e-tutoriais/noticia/2012/01/como-habilitar-javascript.html 
http://msdn.microsoft.com/pt-br/library/72bd815a.aspx 
http://imasters.com.br/artigo/20472/javascript/guia-de-escopo-em-javascript 
http://braziljs.com.br/#!/home 
 
 
24 
 
Aula 06: DHTML 
Conhecendo o DHTML 
 
O DHTML utiliza outras tecnologias para criar interatividade nas interfaces Web. A união do HTML que define 
os elementos de nossa página, o Javascript com a programação script, o CSS com as suas possibilidades de 
formatação e posicionamentos, unidos a definição de estrutura hierárquica de objetos oferecida pelo DOM 
permitem que construamos telas com animações, que são alteradas de acordo com as ações do usuário, com 
avisos visuais sobre os elementos da interface, as possibilidades passam a ser limitadas por nossa 
criatividade. 
 
A guerra dos navegadores existe desde que o Internet Explorer 3.0 foi 
lançado, apesar de ainda ser inferior do que o Netscape nessa época. 
O Internet Explorer começa a fazer frente ao Netscape quando lança a 
sua versão 4.0 e a Microsoft o incluiu como parte do sistema 
operacional, fazendo com que todos usassem o Windows já tivessem o 
navegador, pois vinha junto e não poderia ser retirado. 
 
O Nescape 4.0 é lançado em junho de 1997 e o Internet Explorer logo 
após, em outubro do mesmo ano. Eles possuem recursos que 
possibilitam a criação de DHTML de forma básica. 
 
A versão 4.0 do HTML já possuía o DOM 1.0, permitindo com que o DHTML possa ser desenvolvido de uma 
forma mais natural, pois o que os navegadores interpretavam antes ainda estava em desenvolvimento e não 
estava completamente padronizado, era chamado de versão 0 do DOM. 
 
A versão 4.0 do HTML também trouxe uma alteração nos estilos, inseriu a possibilidade de se aplicar os 
estilos em cascata, mudando o seu nome para CSS. Houve um aumento nas formatações possíveis e uma 
tentativa na padronização dos estilos nos navegadores. O Javascript e o Jscript nos dois navegadores possuem 
uma estrutura bem próxima, ficando as diferenças por conta de detalhes no CSS e na estrutura do DOM que 
cada um implementava. 
 
DOM 
 
O W3C define DOM como: 
 
" The Document Object Model is a 
platform- and language-neutral 
interface that will allow programs and 
scripts to dynamically access and 
update the content, structure and style 
of documents.“ 
 
O DOM possibilita que as linguagens 
naveguem pela estrutura do 
documento, insira um elemento, altere 
os valores dos atributos, construa-o 
dinamicamente. Ele é uma API de 
programação para documentos, contem 
os métodos que permitam interagir com 
os elementos, assim como os eventos 
percebidos por eles e suas 
propriedades. 
 
Arquitetura do DOM 
 
As especificações do DOM 
definem módulos para tratar 
um uso específico. Os 
módulos dependem de 
outros, todos dependem do 
núcleo principal. 
 
 
 
 
 
 
 
 
 
 
Estrutura no HTML 
O Dom determina a estrutura básica do documento HTML, o primeiro elemento do documento é o document, 
porém ele é interpretado 
dentro de uma janela de 
um navegador, tornando o 
window como o primeiro 
elemento. Cada marcação 
é uma representação do 
objeto element, o element 
possui atributos (attribute) 
que ficam postados dentro 
da marcação, entre a 
abertura e fechamento da 
marcação podemos colocar 
textos (text). Um 
elemento pode possuir 
elementos filhos, gerando 
a hierarq. do documento. 
 
Os elementos podem ser 
recuperados de algumas 
formas, podemos acessar 
um elemento através de seu id, podemos andar pela estrutura até chegar ao no desejado e podemos 
recuperar todas as marcações do mesmo tipo, até chegar ao elemento procurado. Existe a possibilidade de se 
andar pelos names das marcações, porém não é a recomendação w3c.
 
DOM e Javascript 
O DOM define métodos que os objetos devem possuir para que possamos gerenciar a estrutura do documento. 
O Javascript interage com os objetos, criando
estrutura da página, mesmo depois de sua exibição. A linguagem permite que manipulemos os elementos.
 
Recuperando um elemento 
O primeiro passo é a identificação do elemento que será a abse da ação, para tanto usaremos o 
getElementById. 
 
O Dom determina a estruturabásica do documento HTML, o primeiro elemento do documento é o document, 
um elemento através de seu id, podemos andar pela estrutura até chegar ao no desejado e podemos 
recuperar todas as marcações do mesmo tipo, até chegar ao elemento procurado. Existe a possibilidade de se 
pelos names das marcações, porém não é a recomendação w3c. 
O DOM define métodos que os objetos devem possuir para que possamos gerenciar a estrutura do documento. 
O Javascript interage com os objetos, criando-os e chamando seus métodos, tornando possível a alteração da 
estrutura da página, mesmo depois de sua exibição. A linguagem permite que manipulemos os elementos.
O primeiro passo é a identificação do elemento que será a abse da ação, para tanto usaremos o 
25 
O Dom determina a estrutura básica do documento HTML, o primeiro elemento do documento é o document, 
um elemento através de seu id, podemos andar pela estrutura até chegar ao no desejado e podemos 
recuperar todas as marcações do mesmo tipo, até chegar ao elemento procurado. Existe a possibilidade de se 
O DOM define métodos que os objetos devem possuir para que possamos gerenciar a estrutura do documento. 
tornando possível a alteração da 
estrutura da página, mesmo depois de sua exibição. A linguagem permite que manipulemos os elementos. 
O primeiro passo é a identificação do elemento que será a abse da ação, para tanto usaremos o método 
26 
 
<script type="text/javascript"> 
minhaBorboleta = document.getElementById("borboleta"); 
alert( minhaJanela ); 
</script> 
 
O objeto document possui o método 
getElementById que retorna o elemento 
que possui o id informado. A caixa de 
diálogo irá exibir que minhaBorboleta 
possui um elemento do HTML. Podemos 
usar document.odemos usar document. 
getElementsByTagName("marcação") 
para retornar todos os elementos do 
com o mesmo nome de marcação, pode 
ser retornado todos os elementos do 
tipo "tr". 
 
 
 
 
 
 
 
 
Métodos dos objetos DOM 
Vamos ver os métodos para podermos entender o uso deles. 
 
hasAttribute("atributo") - Verfica se o elemento possui o atributo. 
setAttribute("atributo","valor") - Atribui um valor ao atributo. Caso o elemento não o possua, então o 
atributo será criado. 
getAttribute("atributo") - Obtém o valor do atributo. 
removeAttribute("atributo") - Remove o atributo. 
appendChild(objeto) - Adiciona um elemento como filho do elemento atual. O navegador irá exibir o 
elemento se for uma marcação XHTML conhecido por ele. 
createElement("elemento") - Cria um elemento para que seja possível adicioná-lo à estrutura da página. 
createTextNode("conteúdo") - Insere um texto entre o par da marcação 
parentNode - Retorna o elemento pai do nó (elemento) atual. 
childNodes - Retorna a coleção de filhos do elemento. 
firstChild - Retorna o primeiro nó interno ao elemento. 
lastChild - Retorna o último nó interno ao elemento. 
nextSibling - Retorna o próximo nó filho do mesmo pai que o nó atual. 
 
Aula6_doc1.pdf e exemplo2.html nesse ponto. 
 
Trabalhando com o cursor 
O mouse pode ser usado para o usuário interagir com a interface além do clique simples, podemos arrastar 
objetos, verificar se ele está sobre uma determinada posição, sobre um objeto, se movendo, entre outras 
possibilidades. Vamos ver como podemos verificar esses eventos. 
 
As marcações XHTML possuem alguns eventos que já falamos na aula sobre Javascript. Os eventos são 
percepções que os objetos possuem, eles conseguem detectar que alguma ação ocorreu. Os desenvolvedores 
escrevem códigos para os eventos, por isso que esse tipo de programação chama-se motivado por eventos. 
 
27 
 
As marcações percebem alguns eventos, mas foi criado um objeto chamado de "event" para permitir que se 
obtenha algumas informações em relação ao tipo de ação que o usuário fez. O botão do mouse que o usuário 
está segurando, a tecla pressionada, o shift está pressionado são informações que podemos recuperar com o 
objeto "event". 
 
Aula6_doc2.pdf e exemplo3.html nesse ponto. 
 
Camadas 
As camadas permitem que sejam introduzidos conteúdos no seu interior, podemos adicionar textos sem 
formatações ou partes de XHTML completamente formatadas. Quando se começou a criar leiautes sem 
tabelas, usando o posicionamento de camadas, usando "div" ou "span", o uso de CSS passou a crescer, pois os 
estilos permitiam o posicionamento e a alternância entre visível e oculto o estado da camada. 
 
Para alterarmos o conteúdo de uma "div" usamos a sua propriedade "innerHTML". 
 
Dica: O posicionamento de camadas pode ser feito dinamicamente, veremos ainda nessa aula. 
 
function altera(){ 
//Recuperando a div 
var camada = document.getElementById("minhaCamada"); 
//Recuperando o campo de texto 
var texto = document.getElementById("texto"); 
//Recuperando a caixa de seleção 
var negrito = document.getElementById("negrito"); 
 
info = texto.value; 
// verificando se está selecionado 
if (negrito.checked) { 
// colocando negrito para a caixa selecionada 
info = "<span style='font-weight: bold'>" + info + "</span>"; 
} 
//colocando o texto na "div" 
camada.innerHTML = info ; 
} 
 
Exemplo de menu 
A construção de menus DHTML é muito usada no desenvolvimento de interfaces Web. A construção se baseia 
no conceito de exibir e ocultar camadas e o posicionamento das camadas. O exemplo abaixo visa ilustrar a 
configuração visibility do CSS, existem algumas formas de fazer que o funcionamento seja mais perfeito. Uma 
das formas de resolver o problema é de se colocar uma camada inferior que englobe todo o meu, fazendo 
com que ela oculte todos os submenus. 
 
<script type="text/javascript"> 
function exibe(sub){ 
// Recuperando o menu 
var camadaSub = document.getElementById(sub); 
//Exibindo o menu 
camadaSub.style.visibility = "visible"; 
} 
 
function oculta(camadaSub){ 
// Não necessita recuperar o elemento, 
// pois é que foi passado. 
// Ocultando o menu 
28 
 
camadaSub.style.visibility = "hidden"; 
} 
</script> 
 
 
Aula6_doc3.pdf e Exemplo4b.html nesse ponto. 
 
Ativando as funções com o tempo 
O Javascript possui dois funções que permitem que se chame uma "function" após um determinado tempo, 
setTimeout e setInterval. A função setTimeout permite que se escolha uma função após decorrem um tempo 
determinado, enquanto a setInterval chamará a função a cada intervalo de tempo determinado. 
Exemplo5.html nesse ponto. 
 
Javascript e CSS 
O Javascript permite que se altere estilos de campos da página, que se altere valor para um estilo. O estilo 
pode ser informado de três formas conforme foi visto na aula de CSS. Podemos determinar para um elemento 
qual formatação que será aplicada nele, alterar a classe que está sendo aplicada ou alterar a folha de estilos 
para a página. 
 
Podemos fazer que o link não leva para nenhuma página e não mova o documento atual. Colocando-se 
"return false;" no final do evento "onclick" o navegador cancela o que seria feito com o click. 
 
<a href="folha 2" onclick=" folha(2); return false;" >folha 2</a> 
 
Aula6_doc4.pdf e exemplo6.html nesse ponto. 
 
Alterando Imagens 
Podemos alterar as imagens através de objetos imagens ou através da propriedade "src", fazendo a alteração 
através de código Javascript. Existem algumas aplicações que se utilizam desses recursos para mostrar várias 
visões de produto. A união da alterações de imagens com a possibilidade de se ocultar e exibir camadas 
permite que lojas online apresentem zoom de seus produtos com algumas imagens. 
<script type="text/javascript" > 
var qual = 1; 
function trocar(){ 
if (qual == 1){ 
qual = 2; 
}else { 
qual = 1; 
} 
var ref = document.getElementById("ref"); 
 
// A propriedade src está sendo usada para 
// informar o enderço da nova imagem 
ref.src = "img/refri" + qual +".jpg" 
} 
</script> 
 
Javascript e o HTML5 
O HTML 5 está perto de ser uma recomendação, os navegadores correm em passar a compreendê-lo para que 
possam aumentar a sua lista de usuários. Ele ganha marcações para tratar objetos multimídia. A intenção da 
nova versão é de que se controle vídeo pela página com códigos Javascript. As páginas com interações e 
conteúdo ricos possuirão mais possibilidades. O Javascript terá que interagir com os objetos, ganhando mais 
funcionalidades 
29 
 
Um aliado a nova versão é o CSS3, que irá auxiliar na tarefa de aumentar as possibilidades da interface. O 
modelo DOM se adequa às alterações feitas, permitindo que voltemos com mais força para a construção de 
interfaces dinâmicas. A criação dos códigos sempre foi trabalhosa, a verificação para que as páginas tivessem 
o mesmo tipo de comportamento nos navegadores mais usados. 
 
Os frameworks começaram a fazer as atualizações para poderem contemplar os novos recursos, não 
permitindo que os espaços ganhos com os usuários fossem perdidos. 
 
 
Para saber mais sobre os tópicos estudados nesta aula, pesquise na internet sites, vídeos e artigos 
relacionados ao conteúdo visto. Se ainda tiver alguma dúvida, fale com seu professor online utilizando os 
recursos disponíveis no ambiente de aprendizagem. 
http://msdn.microsoft.com/en-us/library/ms533050.aspx 
http://www.w3schools.com/dhtml/default.asp 
http://www.w3schools.com/htmldom/default.asp 
http://www.w3.org/DOM/ 
http://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos 
https://developer.mozilla.org/pt/Sobre_o_Document_Object_Model 
http://www.yourhtmlsource.com/javascript/dhtmlexplained.html 
http://www.scriptbrasil.com.br/codigos/dhtml/ 
http://tableless.com.br/carrinho-de-compras-com-drag-and-drop/ 
http://www.academictutorials.com/Pt/dhtml/dhtml-dom.asp 
http://radar.oreilly.com/2011/07/what-is-html5.html 
 
Aula 7: JQUERY 
Histórico do jQuery 
Alguns frameworks começaram a surgir, o Prototype é um bom exemplo que tem a sua primeira versão em 
fevereiro de 2005, ele é base para muitos outros frameworks tais como Ruby on Rails, script.aculo.us e Rico. 
O desenvolvimento do jQuery é inicado em agosto de 2005. 
 
John Resig questionava o quanto era escrito para que se incluísse um Javascript, começou a desenvolver um 
modelo de como ele achava que o tratamento dos comportamentos deveria ser implementado. Esse estudo se 
transformou em um framework cuja primeira versão data de janeiro de 2006, a primeira versão estável (1.0) 
é de agosto do mesmo ano. A intenção é que o framework se chamasse JSelect, mas o domínio já estava 
registrado na Web, forçando-o a escolher um outro nome, o nome leva a crer que seria para consultas a 
banco de dados. jQuery é uma biblioteca de código aberto e possui licença dual, fazendo uso da Licença MIT 
ou da GNU General Public License versão 2. 
 
O jQuery permite a acréscimo de suas funcionalidades com a utilização de plugins. Podemos utilizar um 
existente ou criar o nosso próprio. Uma das vantagens de se estender o jQuery é que as páginas estarão 
usando um único tipo de sintaxe, facilitando o aprendizado de novos desenvolvedores e a manutenção das 
páginas existentes. Um plugin contém uma coleção de objetos que possuem comportamentos próprios. 
 
Assista o vídeo: http://www.youtube.com/watch?v=tpNBI4k1ad0&list=PLIZ0d6lKIbVpF5DffKAX5e9L119PleIqg 
 
Começando a trabalhar com o Framework 
O uso de um framework sempre começará pela obtenção do mesmo, deve ser baixada última versão estável. 
As versões de teste devem ser usadas quando já dominamos a tecnologia e desejamos nos preparar para as 
novidades que virão na próxima versão, podemos também participar do projeto, nesse caso testamos as 
funcionalidades e relatamos os erros apresentados para que possam ser retirados. 
 
Baixando direto do site oficial: 
http://docs.jquery.com/Downloading_jQuery#Download_jQuery 
 
30 
 
Primeiro contato 
Para usarmos o framework, devemos fazer a referência do arquivo Javascript na nossa página XHTML. O 
arquivo baixado do site do jQuery foi colocado na pasta "js" dentro do sítio. Devemos incluir a marcação 
script com o atributo "src" contendo o caminho e o nome do arquivo. 
 
 
 
A biblioteca possui todo arcabouço, porém precisamos chamar as funções e para isso temos que ter o nosso 
código Javascript, usaremos um arquivo externo para esses códigos. 
 
 
 
Seletores 
 
CSS trouxe a separação entre conteúdo e layout, permitindo que as páginas pudessem ser formatadas através 
de arquivos externos. Os estilos eram aplicados aos elementos, foram criados seletores para que fosse 
possível se determinar qual receberia a configuração. 
 
tag{ estilo: configuração; } 
tag.classe{ estilo: configuração; } 
#id{ estilo: configuração; } 
 
O jQuery usa a mesma forma de acesso, ele utiliza o símbolo "$" ou a palavra jQuery. 
 
$(seletor) 
ou 
jQuery(seletor) 
 
Podemos recuperar objetos do XHTML com os seletores como fizemos nas outras aulas para elementos do 
DOM com getElementById. Algumas diferenças existem, elas serão vistas na aula de hoje. O jQuery aplica o 
método a um elemento ou vários de acordo com a quantidade de elementos que se enquadrem ao padrão 
informado. Ao procurarmos usando um seletor para uma marcação XHTML, serão retornados todos os 
elementos que sejam da marcação. 
 
Corpo = $("body"); 
alert(corpo); 
 
Podemos selecionar vários elementos, bastando separá-los por vírgulas. 
 
 
Seletores compostos 
Quando existe a necessidade de se recuperar um elemento que está interno a outro, podemos usar no 
a seqüência até a marcação desejada. Pode ser recuperado um conjunto de elementos que se enquadrem na 
busca. 
 
Seletores para formulários 
São seletores criados especialmente para uso em formulários.
$(':input') – para todas as marcações "input"
$(':text') – os campos de formulário do tipo "text"
$(':password') – os campos de formulário do tipo "password"
$(':checkbox') - os campos de formulário do tipo " checkbox'"
 
o mesmo serve para inputs do tipo radio, button, submit, reset, image e file.
$(':enabled') - todos os elementos do formulário que estejam abilitados
$(':disabled') - todos os elementos do formulário que estejam desabilitados
$(':checked') – todos os elementos selecionados em campos do tipo radio e checkbox
$(':selected') – todos os elementos selecionados nos selects do formulário
 
Para mais informações, leia o texto “Inserindo as funcionalidades, tratando os eventos”.
 
Só é válido se for criado código para andar pelos campos, é mais indicado o uso do "id" para recuperar
campo específico. 
 
Configurando a aparência com o CSS 
Existem muitas possibilidades criadas com o CSS, podemos acessá
recuperados pelo jQuery. 
Os nomes usados para as propriedades configuradas são os mesmo 
 
Lista que relaciona nomes de propriedades em CSS com nomes equivalentes em Javascript:
http://www.progamacaoweb.com.br/tutoriais/javascript/css.php
 
 
 
Interagindo com os elementos
A página XHTML possui uma estrutura hierárquica de 
andarmos pelo documento DOM. Vimos como podemos acessar os elementos com um seletor, vamos explorar 
um pouco mais as possibilidades de se recuperar e manusear os elementos.
 
Quando existe a necessidade de se recuperar um elemento que está interno a outro, podemos usar no 
a seqüência até a marcação desejada. Pode ser recuperado um conjunto de elementos que se enquadrem na 
 
São seletores criados especialmente para uso em formulários. 
para todas as marcações "input" 
os campos de formulário do tipo "text" 
os campos de formuláriodo tipo "password" 
os campos de formulário do tipo " checkbox'" 
o mesmo serve para inputs do tipo radio, button, submit, reset, image e file. 
todos os elementos do formulário que estejam abilitados 
todos os elementos do formulário que estejam desabilitados 
todos os elementos selecionados em campos do tipo radio e checkbox 
ementos selecionados nos selects do formulário 
Para mais informações, leia o texto “Inserindo as funcionalidades, tratando os eventos”.
Só é válido se for criado código para andar pelos campos, é mais indicado o uso do "id" para recuperar
 
Existem muitas possibilidades criadas com o CSS, podemos acessá-las usando o método "css" do objetos 
Os nomes usados para as propriedades configuradas são os mesmo utilizados em DHTML.
Lista que relaciona nomes de propriedades em CSS com nomes equivalentes em Javascript:
http://www.progamacaoweb.com.br/tutoriais/javascript/css.php 
 
Interagindo com os elementos 
A página XHTML possui uma estrutura hierárquica de elementos, o framework oferece algumas formas de 
andarmos pelo documento DOM. Vimos como podemos acessar os elementos com um seletor, vamos explorar 
um pouco mais as possibilidades de se recuperar e manusear os elementos. 
31 
Quando existe a necessidade de se recuperar um elemento que está interno a outro, podemos usar no seletor 
a seqüência até a marcação desejada. Pode ser recuperado um conjunto de elementos que se enquadrem na 
Para mais informações, leia o texto “Inserindo as funcionalidades, tratando os eventos”. Aula7 doc 1 e 2 
Só é válido se for criado código para andar pelos campos, é mais indicado o uso do "id" para recuperar um 
las usando o método "css" do objetos 
utilizados em DHTML. 
Lista que relaciona nomes de propriedades em CSS com nomes equivalentes em Javascript: 
elementos, o framework oferece algumas formas de 
andarmos pelo documento DOM. Vimos como podemos acessar os elementos com um seletor, vamos explorar 
32 
 
A interação do usuário pode gerar a necessidade de incluirmos um elemento (marcação), alterarmos o valor 
de um atributo, o jQuery oferece métodos simples para esses tipos de manipulação. A administração de 
dados através de AJAX passa para o navegador a responsabilidade de atualizar a interface, enviar dados para 
as páginas que irão registrar as novas informações, entre processamentos possíveis. 
Devemos ter cuidado com as alterações de valores de atributos, pois serão afetados todos os elementos 
recuperados pela seleção. Ao se alterar um valor para uma seleção que recuperou a marcação "a", todos os 
links da página serão atualizados. O uso do atributo "id" através do uso da tralha diminui esse risco quando se 
pretende trocar o valor para apenas uma das marcações da página. 
 
Métodos: 
text - Obtém ou atribui conteúdos de texto, caso o elemento possua HTML, ele será removido. 
 
attr - Obtém ou atribui o valor do atributo fornecido. 
width - Obtém ou atribui a largura em pixels, apenas o primeiro elemento na seleção será afetado caso a 
seleção retorne vários. 
 
height - Obtém ou atribui a altura em pixels o elemento ou o primeiro da seleção. 
 
position - Obtém um objeto de posição que possui o topo e a esquerda do elemento, ou do primeiro da 
seleção. A posição é relativa ao elemento que o contém, ao seu elemento pai. 
 
Val - Obtém ou atribui o valor de elementos que são campos de formulário de formulários. 
 
Exemplo de obtenção e alteração de informações dos elementos: 
 
 
 
O botão "Verifica" está atualizando todos os elementos "td" com o texto colocado no campo de texto para o 
Gabinete: 
 
 
 
O botão "Passa o Preço" está atualizando a célula da segunda linha e terceira coluna com o texto colocado no 
campo de texto para o Preço: 
 
O botão "Passando a Marca" está atualizando todos os elementos que estejam 
"resultado", atribuindo o valor para a opção escolhida no campo "select/option":
 
 
 Funções atribuídas aos eventos dos botões:
 
Foi usado o método "val" que retorna os valores dos campos de formulário para obter as 
 
Crie um formulário com todos os tipos de campos de formulário e apresente todas as informações digitadas 
dentro de um "textarea". Concatene todos os dados antes de colocar dentro do textarea.
 
 
 
 
 
 
O botão "Passando a Marca" está atualizando todos os elementos que estejam formatados com a classe do CSS 
valor para a opção escolhida no campo "select/option": 
 
Funções atribuídas aos eventos dos botões: 
Foi usado o método "val" que retorna os valores dos campos de formulário para obter as 
Crie um formulário com todos os tipos de campos de formulário e apresente todas as informações digitadas 
dentro de um "textarea". Concatene todos os dados antes de colocar dentro do textarea.
 
33 
formatados com a classe do CSS 
Foi usado o método "val" que retorna os valores dos campos de formulário para obter as informações 
Crie um formulário com todos os tipos de campos de formulário e apresente todas as informações digitadas 
dentro de um "textarea". Concatene todos os dados antes de colocar dentro do textarea. 
34 
 
Capturando a interação com o usuário 
 
Os eventos que os objeto percebem e podem ser tratados por Javascript também são reconhecidos pelo 
jQuery. Usamos o "click" em nossos exemplos, mas existem mais eventos. 
 
 
A construção pode ser feita com o acesso direto ao evento do elemento, como fizemos, outra forma é o uso 
do método "bind", ele associa uma função ao evento para o elemento, e a terceira forma é feita com o uso de 
"addEventListener". 
 
 
 
Caixas de diálogo 
O plugin jQuery User Interface fornece um conjunto de objetos de tela, temos muito ganho de aparência e 
nossas aplicações com a utilização deles. Iremos falar um pouco sobre o "Dialog". Ele permite que seja criada 
uma caixa de diálogo com mais possibilidades do que as oferecidas pelo Javascript, é criada uma camada 
contendo uma interface XHTML, podendo ser modal ou não. 
 
 
 
Animações 
Podemos criar muitos efeitos com os objetos da tela, efeitos de transição, na imagem, alterar tamanho, 
mover objetos, além dos efeitos existentes ainda temos a possibilidade de incluir plugins que resolvam 
alguma necessidade. 
 O plugin jQuery UI possui o tratamento de drag and drop, permitindo que arrastemos objetos da tela com o 
mouse. Os arquivos Javascript ui.mouse.js e ui.draggable.js devem ser incluídos na página para que se possa 
utilizar a funcionalidade. 
35 
 
 
 
Começando a usar a técnica Ajax 
A Internet Rica só tem razão de ser ao ser utilizada junto com o AJAX, que faz com que os processamentos de 
servidor ocorram sem que a interface saia da frente do usuário. O objeto XMLHttpRequest criado pela 
Microsoft permitiu que construíssemos telas mais interativas. 
 
O jQuery possui a função $.ajax(options) que incializa uma chamada AJAX, onde as opções configuram a 
forma de envio e o que será enviado. Podemos enviar os dados por post ou get. O objeto que controla o envio 
possui métodos que são disparados conforme o envio passa por etapas. 
 
 
 
Saiba mais: 
 
http://jquery.com/ 
http://pedromenezes.com/os-40-melhores-plugins-da-jquery-para-facilitar-a-vida-do-desenvolvedor-web 
http://pt.wikipedia.org/wiki/JQuery 
http://jqueryui.com/ 
http://www.w3schools.com/jquery/default.asp 
http://www.macoratti.net/11/06/aspn_jq1.htm 
http://www.slideshare.net/felipenmoura/como-fazer-em-aplicaes-ria-escrevendo 
http://ejohn.org/blog/selectors-in-javascript/ 
http://www.livrojquery.com.br/jq2/download.php 
 
36 
 
Aula 08: FLASH 
Não incluirei. 
Imagens Gratuitas 
http://www.stockvault.net 
http://www.freephotosbank.com 
http://www.freedigitalphotos.net 
http://www.public-domain-photos.com/ 
http://www.morguefile.com/archive/ 
http://www.totalgifs.com/ 
 
Aula 09: Ajax 
Introdução ao Ajax 
O