Buscar

Programacao Internet Rica

Prévia do material em texto

Teste 1 
 
1.Marque a afirmativa que corresponde as assertivas abaixo: 
a. Um sitio da Web 2.0 tem o seu conteudo com informacoes geradas por empresas. 
b. Os anuncios sao contratados por exibicao na Web 2.0. 
c. Os buscadores usam categorias na Web 2.0. 
 
1) Todas estao corretas. 
2) A primeira e a ultima estao corretas. 
3) Somente a ultima esta correta. 
Resposta: Somente a primeira esta errada. 
5) Somente a segunda esta errada. 
 
2.Marque a resposta que so possui caracteristicas Web 2.0: 
 
1) Google Adsense, Wikipedia, Britania Online. 
 2) Website pessoal, Bit Torrent, Page Views. 
 Resposta: Inteligencia Coletiva, Folksonomy, Blogging. 
 4) Taxonomy, Napster, Akamai. 
 5) Ofoto, Web Services, Flickr. 
 
3.A tecnica que permite um clique que, em um link ou em um botao de formulario, atualiza as informacoes da pagina atual sem que seja 
necessario carregar uma pagina inteira chama-se: 
 
 1) Dot.Net. 
 Resposta: Ajax. 
 3) PHP. 
 4) Scrum. 
 5) ASP. 
 
4.Quando foi definido o termo Web 2.0: 
 
1) o W3C determinou que a Web havia passado por muitas transformacoes e deveria ser encarada de outra forma. 
 2) TIM Berners-Lee apresentou um novo conceito sobre uso da Internet. 
 3) a construcao de paginas passou a usar recursos que eram muito modernos e que os Webdesigners chamaram de Web 2.0. 
 4) a Microsoft passou a publicar o termo em seu site e os profissionais de informatica passaram a usa-lo. 
Resposta: nome usado em uma serie de conferencias da O’Reilley. 
 
Teste 2 
 
1.Marque a afirmativa que corresponde as assertivas abaixo: 
a. Um interface rica somente pode ser feita usando o Flash. 
b. O Javascript pode ser usado sem estar associado ao Ajax. 
c. Pode ser feito o drag and drop (arrastar e soltar) nas interfaces ricas. 
 
 1) Todas estao corretas 
 2) A primeira e a ultima estao corretas 
 3) Somente a ultima esta correta 
 4) Somente a primeira esta correta 
Resposta: Somente a segunda e a terceira estao corretas 
 
2.Marque a tecnologia que nao possui relacao ao desenvolvimento de RIA. 
 
 1) Ajax 
 2) XHTML 
Resposta: MPEG 
 4) Flash 
 5) DOM 
 
3.A acao de um botao de um formulario em uma interface rica deve ser desenvolvida de que forma? 
 
 1) Usando um botao do tipo SUBMIT para chamar outra pagina. 
Resposta: Usar o evento onClick para chamar a funcao que ira fazer a chamada ao objeto XMLHttpRequest. 
 3) Usando um botao do tipo RESET para chamar outra pagina. 
 4) Usar o evento onClick para chamar a funcao que ira fazer a chamada ao metodo submit() do formulario. 
 5) Usando um botao do tipo BUTTON para chamar outra pagina/arquivo que esta configurada no atributo action da tag form. 
 
4.Marque um uso que nao pode ser feito com a tag “DIV” em uma pagina XHTML. 
 
Resposta: Ser a raiz a pagina XHTML. 
 2) Apresentar texto. 
 3) Verificar se o mouse esta sobre ele. 
 4) Ocultar uma parte da pagina. 
 5) Carregar um formulario. 
 
Teste 3 
 
1.O que e SGML? 
 
 1) Tecnologia para criar paginas Web 
 2) Implementacao que contem todas as tags do HTML 
 3) A sigla significa System Global Markup Language 
Resposta: Metalinguagem que define as linguagens de marcacao 
 5) Surgiu a partir do HTML para que fosse criado o XHTML 
 
 
2.Como sao enviados os dados de um formulario quando ele utiliza o metodo “GET”? 
 
 Resposta: Atraves da URI. A parte que contem os campos e os dados e chamada de querystring. 
 2) Sao enviados junto com a requisicao da pagina. 
 3) Sao enviados da mesma forma que o metodo “POST”. 
 4) Sao enviados obrigatoriamente por AJAX. 
 5) O metodo “GET” nao envia dados apenas solicita um recurso do servidor. 
 
3.A tag “DIV” possui varias utilizacoes marque a opcao que descreve uma funcionalidade que nao pode ser realizada pela tag. 
 
 1) É utilizada para a construcao de menus suspensos (menus drop down). 
 2) Permite a montagem do leiaute (layout) de uma pagina, conhecido como tableless. 
Resposta: Envio de formulario preenchido pelo usuario. 
 4) Apresentacao de mensagens para o usuario. 
 5) Exibir e ocultar areas da pagina. 
 
Teste 4 
 
1.Marque a afirmativa errada: 
 
Resposta: O arquivo externo segue as regras do XML 
 2) Todas as configuracoes (formatacoes) devem ser terminadas com um ponto e virgula, sendo opcional na ultima do estilo 
 3) Podemos listar varias tags antes das chaves, todas elas terao o estilo aplicado nelas 
 4) Podemos configurar as linhas em volta do texto, sendo cada uma com uma cor diferente 
 5) Um dos pseudo elementos funciona da mesma forma que eventos, sendo acionado por acoes do usuario enquanto usa a interface 
 
2.Podemos colocar os estilos em tres locais diferentes, assinale a afirmativa correta: 
 
 1) A criacao de estilo inline permite que se altere todo estilo de um sitio de uma forma facil 
 2) Os estilos incorporados nunca devem ser usados, pois precisam ser reescritos varias vezes na mesma pagina 
Resposta: Um estilo inline pode alterar a configuracao especificada em um arquivo externo para a sua tag 
 4) Uma pagina so pode possuir um unico estilo externo 
 5) Um formatacao usada em um estilo incorporado altera a formatacao de um estilo inline para a sua tag 
 
Teste 5 
 
1.O padrao atual usado para linguagens scripts clientes interpretada pelos navegadores e o ECMAScript-262Marque a afirmacao correta sobre 
Javascript: 
 
 Resposta: O padrao atual usado para linguagens scripts clientes interpretada pelos navegadores e o ECMAScript-262 
 2) Javascript e Jscript foram criadas pela Netscape, a segunda foi uma alteracao da primeira para funcionar no Internet Explorer 
 3) Um script feito em Javascript funciona da mesma forma em todos os navegadores 
 4) O Javascript tem esse nome por ter sido criada a partir do Java 
 5) A Microsoft lancou o Javascript primeiramente e a Netscape copiou a linguagem, colocando-a em seu navegador 
 
 
2.Marque a opcao que informa um local invalido para ser colocado um codigo Javascript em um documento XHTML valido: 
 
 1) Dentro da macacao "script", no interior da marcacao "head". 
 2) Dentro da macacao "script", no interior da marcacao "body". 
 3) Diretamente no evento de um objeto. 
Resposta: Dentro da macacao "script", apos a marcacao "html". 
 5) Em um arquivo externo, sem a marcacao script. 
 
3.As estruturas da linguagem permitem que repitamos o nosso codigo ou que facamos que apenas parte do codigo seja executada. Marque a 
estrutura a opcao que possui a explicacao correta para a sua estrutura. 
 
 1) for – principal estrutura de repeticao, utiliza uma unica instrucao entre os parenteses 
Resposta: if – estrutura de selecao que possui um complemento ("else") para que seja executado apenas um dos dois conjuntos de 
instrucoes. 
 3) while – estrutura de selecao que permite que um conjunto de instrucoes seja executado ou nao 
 4) do – possui um par que informa se o conjunto de instrucoes continuara sendo executado, isso ocorre caso o valor testado seja falso. 
 5) switch – estrutura de selecao que utiliza os operadores relacionais para determinar qual opcao sera executada. 
 
 
4.O evento e a porta do funcionamento das interfaces para os sistemas operacionais de janela. Criamos codigos para tratar as operacoes que o 
usuario ira realizar com a tela. A interface de um sistema que precise que o cliente arraste uma imagem do produto para a imagem do produto 
precisara acompanhar varios eventos, marque a opcao que lista eventos que podem ser usados nesse cenario. 
 
 1) onload – onmouseover 
 2) onselect – onload 
 3) onmouseover - onsubmit 
 Resposta: onclick - onmouseover5) onsubmit - onfocus 
 
Teste 6 
 
1.O DHTML teve seu inicio em que epoca: 
 
 1) Foi introduzido no navegador Netscape 2.0 junto com todas as novidades que ele trouxe. 
 2) O Internet Explorer revolucionou a Web ao apresentar a versao 3.0 do seu navegador, ele contemplava a criacao de estilos com CSS, 
permitindo a tecnica DHTML. 
Resposta: As versoes 4.0 dos navegadores Netscape e Internet Explorer permitiram o desenvolvimento com DHTML, apesar da 
grande dificuldade existente na verificacao de erro. 
 4) O DOM e o CSS foram introduzidos no HTML 4.0, so sendo possivel construir DHTML para as versoes 5.0 dos navegadores IE e NS. 
 5) O DOM, o CSS e o Javascript ja eram totalmente contemplados na versao 3.2 do HTML, tornando possivel o seu uso completo nas versoes 
dos navegadores compativeis com essa versao do HTML. 
 
 
2.A recomendacao w3C para se recuperar um campo de formulario na estrutura da pagina e: 
 
 1) Usar o nome do formulario e o nome do campo diretamente apos o objeto "document". 
 2) Usar o id do formulario e o id do campo diretamente apos o objeto "document". 
 3) Usar o metodo getElementByName do objeto "document". 
 Resposta: Usar o metodo getElementById do objeto "document". 
 5) Usar o nome do formulario e o id do campo apos o objeto "document". 
 
3.Devemos usar par recuperar o botao teclado do mouse: 
 
 1) onmouseover do "body" 
 2) onmouseclick dos elementos do DOM 
 3) onmousedown do "div“ 
 4) evento do objeto mouse 
Resposta: atraves da propriedade button do objeto event. 
 
 
4.A verificacao do navegador e sua versao pode ser feita atraves de: 
 
Resposta: Atraves das propriedades appName e appVersion do objeto "navigator". 
 2) Atraves das propriedades appName e appVersion do objeto "browser". 
 3) Usando document.appName e document.appVersion. 
 4) Atraves das propriedades appName e appVersion do objeto "window". 
 5) Usando window.parentNode que ira retornar o navegador que esta sendo usado, podendo ser recuperados os valores das propriedades 
appName e appVersion. 
 
Teste 7 
 
1.Marque a unica afirmativa correta sobre jQuery: 
 
 1) É um famework para acesso a bancos de dados atraves de consultas (queries) 
 2) É baseado no famework prototype, assim como Ruby on Rails 
Resposta: É um famework javascript que visa diminuir a quantidade de codigo escrito 
 4) A criacao dos seletores dificultaram a criacao com o framework 
 5) Os plugins sao desenvolvidos pela equipe do jQuery para que seja mantida a comaptibilidade 
 
2.jQuery possui um metodo “css”para os objetos recuperados com seletores. Marque a questao que informa tipos de seletores validos. 
 
Resposta: a marcacao, atributo id e nome da classe. 
 2) atributos id e name de uma marcacao. 
 3) o id seguido da classe para recuperar uma marcacao especifica. 
 4) o nome da marcacao seguido do valor do atributo name dos elementos filhos. 
 5) usamos os seletores com o metodo getElementById. 
 
3.Foi introduzido no navegador Netscape 2.0 junto com todas as novidades que ele trouxe. 
 
 1) O Internet Explorer revolucionou a Web ao apresentar a versao 3.0 do seu navegador, ele contemplava a criacao de estilos com CSS, 
permitindo a tecnica DHTML. 
Resposta: As versoes 4.0 dos navegadores Netscape e Internet Explorer permitiram o desenvolvimento com DHTML, apesar da 
grande dificuldade existente na verificacao de erro. 
 3) O DOM e o CSS foram introduzidos no HTML 4.0, so sendo possivel construir DHTML para as versoes 5.0 dos navegadores IE e NS. 
 4) O DOM, o CSS e o Javascript ja eram totalmente contemplados na versao 3.2 do HTML, tornando possivel o seu uso completo nas versoes 
dos navegadores compativeis com essa versao do HTML. 
 
Teste 8 
 
1.Marque a unica afirmativa errada sobre Flash: 
 
 1) Permite que construamos formularios de cadastro 
Resposta: Possui uma linguagem propria chamada Flashscript 
 3) A linha do tempo controla determina o que esta sendo apresentado no momento 
 4) Existem tres tipos de simbolos 
 5) O palco e o local onde sao colocados os elementos que poderemos interagir 
 
2.A IDE do Flash e uma ferramenta com muitos recursos, ela permite que facamos desenhos, controlemos nossos simbolos e programemos. 
Qual o elemento que tem o funcionamento igual a de um filme Flash? 
 
 1) Grafico 
 2) Botao 
 3) Retangulo 
 4) Componente 
Resposta: Clipe de Filme 
 
3.Escolha a opcao correta para uso de recursos do Flash: 
 
 Resposta: As cenas permitem que tenhamos telas diferentes, facilitando a criacao de fases em jogos, a criacao de "paginas" diferentes 
em um site. 
 2) Os simbolos servem para a organizacao das informacoes na tela. 
 3) Usamos as camadas para organizar os desenhos, sendo obrigatorio a colocacao de desenhos ou simbolos em todas as camadas. 
 4) A janela propriedades permite que alteremos as configuracao de um elemento da tela, inclusive a conversao para simbolo. 
 5) Todos os icones da "Barra de Ferramentas" possuem um sub-menu para selecionar a ferramenta especifica. 
 
 
4.A programacao em Flash permite que os filmes sejam mais do que simples sequencia de quadros, passando a ser uma interface interativo 
com varios recursos. Marque a opcao errada em relacao a codificacao: 
 
 1) A declaracao de variaveis com classes que nao estejam no mesmo pacote exige que seja feita a importacao da classe ou que se informe o 
caminho completo. 
 2) Podem ser usadas classes existentes no ambiente e classes definidas pelo desenvolvedor na definicao de variaveis. 
 3) O elemento pode perceber uma acao sobre ele, essa acao dispara um evento. Devemos adicionar um escutador ao objeto para perceber que 
o evento ocorreu, associando a funcao que sera executada. 
 Resposta: O Flash controla a posicao dos elementos atraves do uso das propriedades "top" e "left" do objeto, possibilitando que se 
crie botoes para altera-las. 
 5) Pode ser controlada a execucao do filme, um exemplo e a possibilidade de se desviar a execucao para um quadro especifico, mesmo que ele 
pertenca a uma outra cena. 
 
 
Teste 9 
 
1.Um arquivo XML permite que troquemos dados entre sistemas de plataformas diferentes. O uso da metalinguagem para a criacao de 
documentos forneceu avancos para a criacao de padroes mais facilmente entendidos por programas. Marque a afirmacao errada em relacao ao 
manuseio de dados XML em paginas AJAX. 
 
 1) Podemos criar um elemento atraves do metodo createElement do objeto document. 
 Resposta: Usamos elemento.getElementsByTagName("nome_de_elemento_filho")[0].nodeValue para recuperar o texto que fica entre 
o par de abertura e fechamento do elemento. 
 3) Podemos andar pelos filhos na hierarquia usando a propriedade childNodes ou com o metodo getElementsByTagName. 
 4) O metodo createTextNode do objeto document permite que coloquemos texto entre o par de abertura e fechamento do elemento. 
 5) O metodo appendChild pode ser usado em qualquer elemento para adicionarmos um filho ao elemento. 
 
2.O objeto XMLHttpRequest muda de estado (readyState) durante o processamento da requisicao. A avaliacao do estado permite que tomemos 
providencias, o processo termina quando chega ao valor quatro. Podemos criar uma funcao para tratar o retorno recebido pelo objeto. Marque a 
questao errada sobre o processamento do objeto. 
 
Resposta: O metodo de envio so pode ser feito por "GET", pois e enviada uma url e nao temos campos de formularios dentro da 
funcao. 
 2) Usamos o estado 200 que informa que a requisicao foi completa com exito para tratarmos o retorno dos dados. 
 3) O objeto pode recuperar a informacao recebida como texto (reponseText) ou como XML (responseXML),para trabalharmos com JSON e 
usado o retorno de texto. 
 4) O metodo open do objeto permite que se informe o endereco da pagina que sera requisitada. 
 5) O metodo send envia a requisicao para o servidor Web enquanto o open apenas configura. 
 
 
Teste 10 
 
1. Marque a caracteristica que nao tem relacao com o desenvolvimento dot Net: 
 
 1) Implantacao simplificada 
Resposta: Compilacao unica 
 3) Interoperabilidade 
 4) Seguranca 
 5) Independencia de linguagem 
 
2.Simbolo usado para se representar heranca na declaracao de uma classe: 
 
 1) -> 
 2) . 
 3) & 
 Resposta: : 
 5) $ 
 
3. Marque a opcao que possui a definicao correta para o modificador de acesso: 
 
 1) protected - Permite acesso pela classe e por classes filhas 
 2) private - Permite acesso no mesmo programa e por classes filhas 
Resposta: protected - Permite acesso no mesmo programa 
 4) public - Permite acesso apenas pela propria classe 
 5) private – Nao possui restricoes, qualquer classe pode acessa-la diretamente 
 
4. O framework dot Net possui objetos para tratamento de acesso ao banco de dados. Marque o espaco de nomes (namespace) que nao cuja 
finalidade nao e possuir classes para manuseios de dados persistidos. 
 
 1) System.Data.OleDB 
 2) System.Data.SqlTypes 
 Resposta: System.Data.SqlTDS 
 4) System.Data.SqlClient 
 5) System.Data. Common 
 
5. Marque a caracteristica que nao tem relacao com o ambiente de desenvolvimento Visual Web Developer: 
 
 1) Permite o uso da linguagem VB.NET 
 2) Podemos criar uma conexao com auxilio de caixas de dialogos 
 3) É possivel acessar gerenciadores de banco de dados de outras empresas, desde que exista um driver dot.net para ele 
 4) É possivel exibir dados de uma tabela do banco em uma pagina Web sem se escrever uma linha de codigo 
Resposta: linguagem de acesso ao banco de dados MySQL usada nele e o PHP. 
 
Aula 1 
 
A EVOLUCAO DA WEB 
 
A Web passou por varias transformacoes desde sua criacao, o objetivo inicial era para podermos interligar documentos, permitindo que as 
pessoas pudessem acessar as fontes usadas em pesquisas, continuacoes de trabalhos. Os navegadores evoluiram e passaram a ter mais recursos, 
a reconhecer uma gama maior de marcacoes ( tags ), forcando ao Consocio gestor da Web a incorporam algumas no padrao do HTML. O uso 
da Web cresceu em uma velocidade e uma dimensao nunca esperada. Comecou-se a usar a Web para varios fins diferentes, criou-se o 
comercio eletronico, as animacoes em Gif animado foram substituidas 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 – Lancamento do NCSA Mosaic (NCSA - Centro Nacional de Supercomputacao Aplicada) 
 
1994 – Jim Clark e Marc Andreessen se juntam e fundam a Mosaic Communications, que posteriormente foi rebatizada para Netscape 
Communications. 
 
1995 – Microsoft lanca o Internet Explorer. 
 
1999 – É lancada a versao 5 do Internet Explorer. O navegador ja possuia a API XMLHttpRequest. 
 
2000 – A Microrft disponibiliza o Outlook Web Access, cliente de email que usava o navegador como frontend e utilizava a tecnica Ajax de 
contrucao de aplicacao Web. 
 
2002 – O projeto Mozilla inclui uma versao completamente funcional nsIXMLHttpRequest, permitndo que crie aplicacoes Ajax no navegador. 
 
2004 – Safari lanca uma versao com a API. 
 
2005 – Konqueror e Opera lanca a sua versao com a API 
 
O desenvolvimento de sitios poderia ter mudado desde 2000 com a possibilidade incluida pela Microsoft, mas os programadores ainda estavam 
se acostumando com as possibilidades criadas pelas linguagens Web e os outros navegadores ainda nao ofereciam suporte a API, limitando o 
uso desses tipos de pagina apenas em Intranets. 
 
HTML e XHTML 
 
Tim Berners-Lee propos a especificacao do HTML 1.0 contendo 20 tags, que junto com o programa Mosaic, tornando possivel a confeccao de 
paginas e a navegacao sobre o protocolo HTTP. A linguagem ja possuia suporte a link, listas e cabecalhos, algumas foram descontinuadas. 
 
Os navegadores solicitam as paginas Web. 
Os Servidores procuram os arquivos e devolvem 
as paginas com os outros aquivos que a compoe. 
 
Em 1993, inicia o uso do CGI (Common Gateway Interface), permitindo que as paginas web nao possuam apenas links, mas enviem 
informacoes 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 paginas foi o PERL. Muitas outras linguagens foram e sao usadas para que 
possamos ter paginas com conteudo dinamico. 
 
Participaram da especificacao 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 proposicao 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 caracteristica a mais como imagem, titulo da pagina e formularios. Aumenta a interatividade 
das paginas, permitindo que o usuario envie informacoes para o servidores Web, sendo as informacoes processadas por scripts e programas 
CGI. 
 
A versao 3 do HTML e proposta em 1995 com uma gama de novas funcionalidades, ela ja incluia Style Sheet, o documento possuia 150 
paginas. As empresa que criavam os navegadores implementaram parcialmente as especificacoes, fazendo que o HTML 3 nao fosse um padrao 
de fato no inicio. 
 
O Consocio W3 formaliza o padrao HTML 3.2, os grande produtores de browsers participaram das revisoes da especificacao, assim como 
todas as organizacoes membros do consorcio. O padrao trazia algumas evolucoes como tabelas, applets Java, texto na mesma linha que 
imagens, subscrito e sobrescrito. A linguagem passa a possuir uma definicao de tipo de documento. 
 
Estrutura padrao HTML 3.2 
 
Dave Raggett, junto com Arnaud Le Hors e Ian Jacobs fazem a proposicao do HTML 4. A nova especificacao continha aprimoramentos, 
podemos citar a programacao para DOM (Document Object Model) e a inclusao da possibilidade se usar o estilo em cascata (CSS – Cascate 
Style Sheet). 
 
A ultima versao do HTML foi revisada para 4.0.1, se mantendo como ultima ate que a versao 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). 
 
Benefifios obtidos com a confeccao de paginas em XHTML 1.0 em relacao ao uso de HTML: 
 
O XML permite a sua extensao com mais facilidade, fazendo com que desenvolvedores e navegadores possam implementar nova 
funcionalidades sem muita complicacao. O XHTML possui uma especificacao para a inclusao de novos modulos. 
 
Estao surgindos novas formas de acesso a Internet, a visualizacao dos documentos podem ser direcionados para os equipamentos ou 
navegadores usados de uma forma mais facil com a adocao do XHTML. 
 
Web 2.0 
 
"Web 2.0 e a mudanca para uma internet como plataforma, e um entendimento das regras para obter sucesso nesta nova plataforma. Entre 
outras, a regra mais importante e desenvolver aplicativos que aproveitem os efeitos de rede para se tornarem melhores quanto mais sao usados 
pelas pessoas, aproveitando a inteligencia coletiva" 
 
Tim O'ReillyO termo Web 2.0 foi criado pela O'Reilly Media para dar nome para um conjunto de conferencias em 2004. O termo foi associado a um 
conjunto de tecnologias, tecnicas de criacao de paginas e objetivo dos sitios que estavam sendo criados. O nome nao foi bem recebido por 
todas as pessoas, Tim Berners-Lee contestou ouso do nome, pois muitos conceitos considerados como Web 2.0 ja existiam ha bastante tempo. 
O que nao podemos negar e que mesmo que o pai da Internet nao goste do termo, ele passou a ser considerado por todos. 
 
Os servicos online gratuitos tambem vieram a substituir o uso de alguns programas pagos, a Web estava repleta de mudancas em relacao a sua 
proposta inicial, nao so quanto ao seu inicio, mas tambem em contraste aos primeiros sites de servico. A interacao, as funcionalidades, os 
frameworks Javascript que estavam surgindo, o crescimento do acesso a grande rede, o surgimento de conexoes mais rapidas, eram mudancas 
em cima de mudancas. O cenario nao era mais o mesmo, o nome pode nao estar adequado para alguns, mas a sua criacao ajudou a produzir um 
marco para a Web, aumentou-se a discussao sobre um mundo que estava a parte dos foruns sobre metodologias, o desenvolvimento Web 
precisava amadurecer. 
 
Nas conferencias WEB 2.0, os seguintes principios foram destacados como caracteristicas fundamentais: 
 
Web 2.0 usa a rede como uma plataforma. 
Usuario recebe, manipula e controlados os dados no site. 
Arquitetura participativa na qual o usuario pode adicionar ou editar total ou parcialmente uma aplicacao de acordo com suas necessidades e 
experiencia. 
Uma interface rica, interativa e amigavel, baseado em Ajax ou estruturas similares. 
Modelos de negocios enxutos facilitados pelo gerenciamento de conteudos e servicos. 
Fim do Ciclo de software ( versao beta ) 
Alguns aspectos de rede social. 
Algumas interfaces graficas, como gradientes e cantos arredondados 
(ausente na chamada era Web 1.0). 
 
Conteudo gerado pelo usuario 
 
O CONTEUDO GERADO PELO USUARIO TEM SIDO A CHAVE PARA MUITAS DAS EMPRESAS LIDERES DE WEB 2.0. A 
EMPRESA DISPONIBILIZA UMA FERRAMENTA QUE AUXILIA O USUARIO UTILIZANDO AS INFORMACÕES INSERIDAS POR 
ELE. ESSE MODELO PODE SER ENCONTRADO EM SITES COMO AMAZON, EBAY, MERCADO LIVRE, MONSTER, LINKEDIN 
OU YOU TUBE. A COMUNIDADE AGREGA VALOR A ESSES SITES, QUE, EM MUITOS CASOS, SAO QUASE INTEIRAMENTE 
CRIADOS SOBRE O CONTEUDO DO USUARIO. 
 
A AMAZON UTILIZA AS INFORMACÕES DOS CLIENTES PARA AUXILIAR UM USUARIO, MOSTRANDO PRODUTOS QUE 
FORAM ADQUIRIDOS, JUNTO COM O PRODUTO QUE ESTA OBSERVANDO, ESSE TIPO DE AUXILIO PASSOU A SER USADO 
POR OUTRAS LOJAS PONTO COM. 
 
O EBAY E O CLONE NACIONAL, MERCADO LIVRE, FORNECEM PARA O VENDEDOR UM AMBIENTE PARA DIVULGAR OS 
SEUS PRODUTOS E AUXILIA A VENDA COM FERRAMENTAS PARA PAGAMENTO. ESSE MODELO IMPULSIONOU O 
MODELO DE VENDA ENTRE PESSOAS FISICAS, POREM CRIOU UM AMBIENTE DE SONEGACAO FISCAL. 
 
Inteligencia coletiva 
 
É O CONCEITO DE QUE A COLABORACAO PODE RESULTAR EM IDEIAS INTELIGENTES. TRABALHANDO JUNTOS OS 
USUARIOS COMBINAM SEU CONHECIMENTO PARA O BENEFICIO DE TODOS. O MAIOR SIMBOLO DESSE TIPO DE USO SAO 
OS WIKIS. 
OS WIKIS SAO SITES WEB QUE PERMITEM AOS USUARIOS EDITAR O CONTEUDO EXISTENTE E ACRESCENTAR NOVAS 
INFORMACÕES, SAO EXCELENTES EXEMPLOS DE CONTEUDO GERADO PELO USUARIO E INTELIGENCIA COLETIVA. O 
WIKI MAIS POPULAR É O WIKIPEDIA, UMA ENCICLOPEDIA GERADA PELA COMUNIDADE COM ARTIGOS DISPONIVEIS EM 
MAIS DE 200 IDIOMAS. A WIKIPEDIA CONFIA QUE SEUS USUARIOS SEGUIRAM DETERMINADAS REGRAS COMO NAO 
EXCLUIR INFORMACÕES CORRETAS NEM ACRESCENTAR INFORMACÕES TENDENDIOSAS E PERMITE QUE MEMBROS DA 
COMUNIDADE IMPONHAM AS REGRAS. 
 
PERMITE QUE CLASSIFIQUEMOS CONTEUDOS COLOCANDO MARCACÕES, AS PAGINAS ANTIGAS POSSUIAM AS 
MARCACÕES FEITAS APENAS PELA PESSOA QUE A CONSTRUIA, POIS ERA USADA A TAG META. OS USUARIOS 
PASSARAM A INFORMAR O RELACIONAMENTO QUEO CONTEUDO TINHA PARA O MEIO DELA, APLIANDO O CONCEITO 
DE BUSCA DE INFORMACÕES. 
 
OS VIDEOS DO YOU TUBE PUDERAM SER CLASSIFICADOS ASSIM COMO O CONTEUDO DE UM BLOG, AS MARCACÕES 
PASSARAM A SER TAO DINAMICAS QUANTO O CONTEUDO QUE ESTAVA SENDO CONSTRUIDO NA WEB. O DEL.ICIO.US E 
O FLICKR GANHAM EM NAVEGACAO COM USO DAS TAGS, POIS OS FATOS RELACIONADOS SAO MARCADOS CONFORME 
VAO SURGINDO, AMPLIANDO A EXPERIENCIA DO USUARIO. OUTROS SITES SE UTILIZAM DESSE RECURSO PARA FAZER 
COM QUE ASSUNTOS GANHEM MAIS IMPORTANCIA COMO O DIGG. 
 
As rede sociais comecaram a ser usadas muito antes da Web 2.0, as possibilidades nessa nova era da Internet foi ampliado pelas tecnologias 
existentes. O primeiro sitio considerado como Rede Social que temos conhecimento e o SixDegrees.com, ele foi lancado 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 antagonicos, mas a visibilidade permite que as pessoas sejam encontradas, enquanto 
que a privacidade permite que se controle que conteudo pode estar disponivel ou nao. 
 
Existem varias classificacoes 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 numero de usuarios no Orkut. 
 
Midia Social 
 
"Um grupo de aplicacoes para Internet construidas com base nos fundamentos ideologicos e tecnologicos da Web 2.0, e que permitem a 
criacao e troca de Conteudo Gerado pelo Utilizador (UCG)" - Andreas Kaplan e Michael Haenlein 
 
A diminuicao do preco das cameras web, cameras digitais e das filmadoras digitais possibilitou que um grande numero de pessoas gerasse 
muita informacao, criando a necessidade de que essa midia fosse disponibilizada para as pessoas conhecidas. Surgiram sites que permitiam que 
colocassemos esse novo tipo de material na Internet e que outros acessassem o conteudo. A mudanca que ocorreu com a Web 2.0 e que a 
informacao era compartilhada, podia-se buscar as informacoes e fazer registros, nao estava mais pessoal e sim global, fazia paste de uma 
galeria dos navegantes da Web. 
O YouTube passou a ser o maior simbolo desse movimento, onde as pessoas colocam os seus videos e os espectares podiam avaliar, guardar 
em favoritos, compartilhar e receber os videos afins. 
 
Os blogs datam da decada de 90, criado por Jorn Barger com o nome de Weblog. O primeiro site foi o http://robotwisdom.com, que obteve um 
grande numero de acesso apesar de nao ter nenhum requiste 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 possuiam varios usos, desde diarios online ate a uma visao jornalistica, o que foi mais perceptivel na epoca em que estavam comecando a 
se discutir sobre a Web 2.0, pois os usuarios estavam construindo a informacao. 
 
Um blog e composto de textos que sao colocados, acompanhados ou nao de fotos, podendo possuir links para outras paginas ou blogs. Os 
visitantes podem fazer comentarios sobre as postagens realizadas. Existiram blogs para tudo o que se possa imaginar. O numero de blogs passa 
da casa dos 100 milhoes em toda a Internet. 
 
 
Aula 1 
 
 
Introducao 
 
O crescente uso da Web trouxe necessidades, aplicacoes e usuarios. O tipo de funcionamento incomodava os navegantes da grande teia, pois 
era necessario esperar um longo tempo para que cada pagina fosse carregada, alem disso, cada sitio processava uma solicitacao apos a outra, 
diferentemente dos programas usados, que permitiam executar tarefas enquanto uma anterior ainda nao tivesse terminado. 
 
A inclusao da API XMLHttpRequest pela Microsoft permitiu que a construcao de paginas evoluisse. Naoera mais necessario esperar o 
termino de uma acao para que pudessemos clicar em outro botao. A evolucao do DHTML (Dynamic HTML – Javascript + CSS + HTML) 
permitia que as telas tivessem mais possibilidades na interacao, aumento a atratividade e mantendo o usuario mais tempo acessando a mesma 
pagina. Os desenvolvedores comecaram a mudar a forma de construir suas paginas, trocando as tabelas por camadas como ferramenta de 
estruturar os leiautes, essa modo de se criar paginas e conhecido como tableless. 
 
O cenario estava propicio para que os programadores e designers Web adotassem uma nova tecnica, o Ajax passa a ser o grande artificio para 
que as paginas funcionem de forma semelhante aos programas que eram executados nos computadores. 
 
Funcionalidades possiveis em interfaces ricas 
 
- Preenchimento automatico a partir de selecoes. 
- Drag and drop (arrastar e soltar). 
- Atualizacoes parciais das paginas. 
- Menus dinamicos. 
- Animacoes dinamicas. 
 
O termo RIA foi usado pela primeira vez em marco de 2003 em um white paper (documento oficial publicado) pela Macromedia. Outros 
termos foram usados para definir o mesmo tipo de construcao de paginas, como Remote Scripting pela Microsoft em 1999. 
 
Os navegadores passam a controlar as respostas as acoes do usuario, as atualizacoes das partes da tela e o funcionamento da interface na 
maquina do usuario. A atualizacao das informacoes e os processamentos continuam ocorrendo no servidor Web. 
 
Diferenciando o funcionamento 
 
As paginas Web possuiam o seu funcionamento ditado pelos links do HTML, onde uma pagina chamava outra, ocorrendo sempre o 
carregamento inteiro de uma pagina. Uma forma utilizada para se diminuir o carregamento foi a utilizacao de paginas com frames, usando-se 
as tags frameset e frames para se definir as divisoes. A pagina era chamada para um quadro especifico, enquanto os outros mantinham as suas 
informacoes, nao sendo necessario transferir novamente os arquivos para os outros quadros. Os designers contestavam muita a utilizacao de 
frames. 
 
A construcao de paginas com a tecnica Ajax muda a forma de estruturar os sitios. A primeira pagina possuira o tratamento das funcionalidades 
que irao controlar a navegacao, esse tratamento e realizado por funcoes Javascript. As acoes do usuario irao chamar arquivos que devolverao 
informacoes ou partes das paginas, diminuindo significativamente a quantidade de informacao a ser transferida para o usuario a partir do 
servidor Web. A criacao de frameworks facilitou a criacao de interfaces ricas, pois eles oferecem as funcionalidades necessarias e realizam os 
tratamentos necessarios para que as paginas funcionem em varios navegadores. 
 
Tecnologias utilizadas 
 
A construcao de interfaces ricas pode ser feita com uma grande variedade de tecnologias, tecnicas e 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 acoes do usuario, alterar as informacoes da tela. 
O CSS e usado para que possamos configurar a aparencia dos objetos. A API XMLHttpRequest ira fazer a requisicao dos arquivos no servidor 
Web, a maioria das vezes esses arquivos serao formados por linguagens que sao executas no servidor, sendo essas responsaveis por acessar 
informacoes em bases de dados ou atualiza-las, enviar emails, atualizar arquivos, entre tantas funcionalidades possiveis. 
 
- 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 construcao de interfaces bem elaboradas, possibilitando a inclusao de 
som e video. Ele e muito poderoso, permitindo a criacao de jogos. A linguagem embutida, ActionScript, fornece ao desenvolvedor o controle 
sobre todos os objetos utilizados na tela. 
O arquivo gerado pelo aplicativo e chamado de filme Flash. O navegador necessita que seja instalado plug-in para que ele possa executar o 
filme. A versao de plug-in pode ser estipulada ao se confeccionar o filme. 
 
As atualizacoes das informacoes sao realizadas atraves de chamadas a linguagens executadas no servidor. A Adobe possui o Flex, ele possui a 
funcao de facilitar a integracao entre o filme e as chamadas aos codigos que sao executados no servidor Web, integrasse de uma forma mais 
simples com a linha de tempo dos filmes Flash. 
 
- MS SILVERLIGHT 
A Microsoft criou um concorrente para o Flash, o framework Silverlight. Permite criar interfaces do usuario usando o bloco de notas, o Visual 
Studio ou qualquer outro editor, porem o trabalho fica muito facilitado com o Microsoft Expression Blend, que e 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 e utilizado para chamadas aos codigos do servidor tambem. 
 
Beneficios 
 
As aplicacoes ricas vieram auxiliar aos usuarios que nao possuem muita habilidade no uso do computador. Elas permitem a construcao de 
facilidades no uso, textos de ajuda, informacoes de retorno e interfaces mais intuitivas. Os frameworks ajudaram bastante a padronizar o 
funcionamento dos objetos de tela, o que deixa o usuario mais seguro ao interagir com as paginas. 
 
Muitas ferramentas estao sendo migradas para a plataforma Web, muitas delas necessitam de funcionalidades que o HTML nao 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 usuario em RIA e menor, o que melhora a satisfacao. Elas permitem que se executem outras tarefas sem exigir que 
se espere o termino de um anterior, aumentando a funcionalidade da interface. A aproximacao do formato das telas de programas que sao 
executados localmente no computador, auxilia o aprendizado dos novos usuarios nesse novo ambiente. 
 
 
Aula 3 
 
 
Introducao a XHTML 
 
 
SGML STANDARD GENERALIZED MARKUP LANGUAGE 
UMA METALINGUAGEM ATRAVES DA QUAL PODEMOS DEFINIR 
LINGUAGENS DE MARCACAO PARA DOCUMENTOS. 
 
XML EXTENSIBLE HYPER TEXT MARKUP LANGUAGE 
TAMBEM É UMA METALINGUAGEM, É DERIVADA DA SGML. TEM COMO OBJETIVO A ESTRUTURACAO DE DADOS. 
 
XHTML EXTENSIBLE HYPER TEXT MARKUP LANGUAGE 
1.0 É A PRIMEIRA ESPECIFICACAO PARA FAMILIA XHTML, CONTINUA COM A MESMA VERSAO, SENDO RECOMENDADA 
EM JANEIRO DE 2000, RECEBENDO UMA REVISAO EM 2002, A VERSAO 1.1 POSSUI A SUA RECOMENDACAO DATADA DE 
NOVEMBRO DE 2010. ELA REALIZA UMA REFORMULACAO DOS DOCUMENTOS HTML 4, TORNANDO SE COMO 
APLICACÕES DE XML. ELA POSSUI TANTO A SINTAXE E REGRAS XML 1 PARA IMPLEMENTAR AS FUNCIONALIDADES DO 
HTML 4. 
 
A criacao de paginas Web vem evoluindo desde o seu inicio. Os navegadores ganharam versoes mais atualizadas, contendo mais recursos e 
reconhecendo uma gama maior de marcacoes. A linguagem recomendada pelo W3C e o XHTML 1.1. A versao 5.0 da HTML ainda esta em 
fase de desenvolvimento, mas algumas novidades ja sao reconhecidas pelos navegadores. 
 
Iremos ver a XHTML e nos ater aos recursos mais utilizados para a construcao de interfaces ricas. Outras disciplinas possibilitaram que voces 
criassem interfaces e que se apropriassem da construcao de paginas com XHTML, faremos algumas recordacoes necessarias. 
O XHTML possui a estrutura de um arquivo XML e as marcacoes do HTML, como ja vimos nas aulas anteriores. A mudanca veio trazer 
algumas facilidades para validacao do documento e criacao de navegadores para outros equipamentos. O HTML e uma aplicacao da SGML. 
 
Estrutura 
 
A estruturadas paginas XHTML continua seguindo o que ja era imposto pelo HTML 4, porem passamos a ter a rigidez do XML, aliado a isso, 
podemos validar o nosso documento, pois a determinacao de uma DTD (Document Type Definition) permite que programas verifiquem se o 
documento segue a definicao. Ela especifica qual a estrutura do documento, quais marcacoes podem ser colocadas internas as outras e os 
atributos aceitos por uma especifica, informando a sua obrigatoriedade ou nao. 
 
Estrutura basica de uma pagina XHTML 1.0 
 
 
Estrutura da pagina mostrando elementos e atributos 
 
 
DOCTYPE 
Define o tipo do documento. Informando qual a DTD (Document Type Definition) sera utilizada para validar o documento. 
 
Parte da DTD que define a tag "html" (informa que ela so pode possuir head e body) 
 
DTD STRICIT 
Nao 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 as mesmas caracteristicas da DTD Transational, inclui a possibilidade do documento possuir frameset, criacao de estrutura de quadros. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
 
MUDANCAS GERADAS PELA ADOCAO DE XHTML 
A adocao do XML como forma de estruturar o documento trouxe algumas mudancas na confeccao de paginas Web. 
Caracteristicas: 
As marcacoes sempre ser propriamente aninhados. 
Nao podem existir tags intercaladas, uma marcacao nao pode possuir uma terminacao 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 apos o fechamento do td) 
Todas as marcacoes devem possuir a terminacao. 
Tags que nao possuam uma terminacao devem informar na abertura que nao existe um par para ela. 
Ex: em par - <p> texto do paragrafo </p> 
Ex: marcacao unica - <input type="text" name="endereco" /> (a barra deve fica colada ao sinal de maior) 
Nao e permitido o uso de marcacao sem fechamento. A quebra de linha e um outro exemplo dessa necessidade, passou a ser escrita com a 
barra: <br /> 
Os nomes das marcacoes devem sempre estar em letra minuscula. 
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 nao e permitido em XHTML. 
O documento deve possuir somente um elemento raiz. 
 
VALIDACAO DE DOCUMENTOS XHTML 
A criacao de documentos usando uma DTD permite que seja verificado o codigo, podemos verificar a estrutura e validar as marcacoes 
utilizadas, tanto na sua posicao dentro do documento quanto a utilizacao dos atributos. O W3C fornece um link para fazermos a avaliacao, 
porem a informacao retornada e se o arquivo esta com erros ou nao. Algumas IDEs fornecem feedbacks na posicao do erro, o Dreamweaver 
apresenta mensagens para tags sem fechamento ou sem abertura, o NetBeans fornece avisos para erros em atributos tambem, alem de possuir 
auxilio para elementos e atributos possiveis, mostrando listagem de valores possiveis para os atributos. 
 
Vantagens 
 
Os documentos XHTML estao em conformidade com a estruturacao estabelecida na XML, permitindo que eles sejam validados atraves da 
DTD selecionada. Podem ser usadas ferramentas para editar arquivos XML para manipular o documento. 
 
A criacao de novos navegadores e mais facil, pois as regras da XML sao mais concisas, facilitando a interpretacao dos codigos e sua posterior 
renderizacao. 
 
O documento HTML permite o uso de marcacoes que o navegador so tera certeza que nao tinha um par de termino ao chegar ao seu fim, 
fazendo que todas as informacoes permanecam empilhadas na memoria do computador e gerando a necessidade de um numero maior de 
avaliacoes, o documento XHTML diminui o trabalho do navegador, acelerando a interpretacao e apresentacao da pagina. 
 
Os documentos podem incluir MathML, SMIL, or SVG, aumentando as possibilidades com a apresentacao de outros recursos como o desenho 
vetorial criado com SVG. 
 
 
 
 
 
Formularios 
 
Os formularios permitem que os usuarios entrem com informacoes em uma pagina Web. O uso do formulario permitiu que os sitios 
construidos 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 marcacao "form" possui atributos para configurar o seu funcionamento, entre elas podemos citar o atributo "method", ele informa como 
serao enviados os dados para o arquivo especificado no atributo "action". As interfaces ricas utilizam o Ajax para enviar os dados, podendo 
envia-los atraves do metodo POST ou GET, da mesma forma que seria enviada diretamente pelo metodo "submit" formulario. 
 
O atributo "id" e usado pela linguagem Javascript para fazer referencia a uma tag no documento, sendo obrigatorio o seu uso nas partes da 
pagina que serao acessadas pelas funcoes da linguagem. 
 
Sabemos que o formulario fornece uma porta de entrada para as informacoes do usuario, mas vamos tentar abordar algumas utilizacoes 
possiveis, iremos abordar tambem as diferencas geradas pelo uso de Ajax e interfaces ricas. Esse par fez com que algumas interacoes que eram 
feitas por links ou por formularios pudessem ser feitas com outros objetos sendo selecionados ou arrastados pela tela. 
 
O uso do botao limpar (<input type="reset" />) sempre foi questionado por mim, pois poderia causar uma situacao desagradavel se nao tivesse 
nenhum tratamento. Qualquer usuario ficaria muito irritado ao clicar erradamente no botao limpar de um formulario apos completar quarenta 
campos de informacoes, esse botao poderia ter tratamento com Javascript, quase nunca se encontra o tratamento. 
 
Formularios que possuem campos interdependentes exigiam que os dados digitados pelo usuario fossem preenchidos novamente quando a 
pagina fosse recarregada, as selecoes em alguns campos fossem ativadas novamente e o campo que possui dados de acordo com a informacao 
de outro viesse com as suas informacoes disponiveis. 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 vao sendo preenchidos com o usuario informando os 
dados pedidos, sem que a pagina seja recarregada. 
 
Camadas 
 
O desenvolvimento de paginas Web passou por varias fases. O uso de apelos visuais sempre esteve presente, desde que se usavam pequenos 
GIFs animados ate as animacoes interativas feitas em Flash. A entrada dos “designs de papel” para a area de criacao de leiaute de paginas 
mudou muito a forma de se pensar interfaces, passamos a ter telas mais elaboradas. O uso de imagens pesadas foi marcante nesse inicio, houve 
um tempo de adaptacao, o que podia se constatar e que tudo estava mais bonito. 
 
A criacao da estrutura do leiaute com tabelas era comum, porem trabalhosa e dificultava o uso de pessoas acostumadas com as ferramentas 
graficas. Um termo se popularizou nessa epoca, o “tableless”, a proposta era de que se construisse o formato da tela sem o uso de tabelas e sim 
com camadas posicionadas em posicoes especificas. Isso foi possivel com a utilizacao de CSS. 
 
Algumas marcacoes foram usadas para se criar camadas sao “span” e “div”. A Netscape havia lancadoa proposta de se usar uma marcacao 
chamada “layer”, porem ela nao foi aceita pelo W3C. Essas marcacoes podem ser usadas para definir formatacoes em uma determinada regiao, 
mas o crescimento do uso de “div” acontece com o uso leiautes “tableless”, tendo a funcionalidade de uma camada como as usadas em 
programas graficos. 
 
As areas delimitadas possuem uma funcionalidade propria podendo ser colocadas em areas da pagina, ocultadas, arrastadas, ter o seu conteudo 
alterado. Algumas paginas utilizavam desse funcionamento para que fosse possivel melhorar as informacoes para o usuario e a facilidade de 
interacao com os objetos de tela. 
 
Exemplo: 
 
 <h1>Comecando com camadas</h1> 
 
 <div title="exemplo" > 
 Primeira camada 
 </div> 
 <div title="Experimentando" > 
 Segunda camada 
 </div> 
 
 
 
Outras Tags 
 
Uma pagina XHTML e feita de muito mais marcacoes do que apenas formulario e camadas, nao vamos entrar em detalhes nas outras pois ja 
foram examinadas em outras disciplinas, mas estamos lembrando que voce precisara de todo o arsenal de tags para poder construir interfaces 
ricas. Precisaremos das tabelas para dispormos informacoes, precisaremos dos links, mesmo que sejam usados para que o carregamento das 
paginas seja feito com funcoes Javascript e chamadas Ajax, precisaremos da imagem para que o usuario queira interagir com as pagina e 
conhecer a aparencia de produtos. Podemos construir interfaces ricas com Flash, mas o XHTML tambem permite. Os frameworks Javascript 
poupam muito trabalho, mas nao fazem a interface toda, apenas interagem com o que voce construir. 
 
Aula 4 
 
Introducao 
 
O CSS aumentou muito a possibilidade de se formatar paginas HTML, nao incluindo apenas padroes, mas adicionando possibilidades na 
criacao de configuracoes e adornos que o HTML nao possuia. 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 criacao de folhas de estilo externas, posteriormente os construtores de paginas passaram a possuir 
essa facilidade. As IDEs WYSIWYG auxiliam na utilizacao de folhas de estilos, pois podemos verificar enquanto vamos construindo a pagina. 
 
O CSS permite que a mesma pagina possua aparencias diferentes, sendo cada uma destinada para ela sejam exibida em um meio diferente, 
podemos construir uma formatacao para ela ser apresentada no navegador e outra para a impressora, isso e util em comprovantes impressos 
pelo sitio. 
 
A criacao de paginas 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 aparencia, deixando a interface mais agradavel para o usuario. 
 
Historico 
 
Folha de estilo existe desde a decada de 80, porem temos a sua inclusao no HTML 3.0 em 1995. Foram feitas nove proposicoes para aumentar 
as possibilidades de se formatar a aparencia das paginas Web, duas formaram a base do que se transformou no CSS que temos hoje. 
 
Håkon Wium Lie propos 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 propria de estilos o SSP (Stream-based Style Sheet Proposal). A convite de Lie eles se juntaram 
para desenvolver o padrao CSS baseados na CHSS, como a folha de estilo poderia ser usada em outras linguagens de marcacao removeram o 
H. Lie e Yves Lafon se juntaram com Dave Raggett (trabalho na prposicao do HTML 4) para fazer com que o navegador Arena suportasse 
CSS, esse foi apresentado tambem em abril de 1995. 
 
 
Comecando com CSS 
 
Para podermos entender o funcionamento de estilos, precisamos primeiramente saber como criamos e o que e um estilo. Um estilo possui um 
conjunto de regras de formatacao que podem ser aplicados a uma marcacao ou a um conjunto de marcacoes. Podemos definir que sempre que 
uma marcacao esteja sempre com uma marcacao, alem disso, e possivel 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 marcacao especifica ou solta, podendo ser usada em qualquer marcacao nesse caso. 
 
 
Foram formatadas as marcacoes “p” e “body”. A ultima formatacao do estilo nao necessita que se informe o simbolo de fim de instrucao “;”. 
 
AGRUPANDO 
Podemos informar mais de uma tag na mesma formatacao. 
 
 
USANDO CLASSES 
As classes criadas nas definicoes dos estilos podem ser usadas em qualquer tag, se nao estiver associada a uma marcacao especifica, ou nas 
marcacoes definidas para diferenciar formatacoes. 
 
 
Prioridade dos estilos 
 
A prioridade para o efeito cascata em ordem crescente: 
 
- Folha de estilo padrao do navegador do usuario; 
- Folha de estilo do usuario; 
- Folha de estilo do desenvolvedor; 
- Estilo externo; 
- Estilo incorporado; 
- Estilo inline ; 
- Declaracoes do desenvolvedor com !Important; 
- Declaracoes do usuario com !Important; 
 
Iremos falar e mostrar algumas formatacoes existente no CSS, mas o ideal e ter contato com todas e saber como podemos consultar para 
conhecer todo o seu poder. 
 
Configurando fontes e textos 
 
O CSS permite que se configure o texto nas paginas, oferecendo uma quantidade enorme de formatacoes. Iremos olhar algumas e pedir que 
faca alguns exercicios para que consiga compreender o funcionamento. 
 
Color 
 
Define a cor da fonte. O valor atribuido pode ser um nome de cor conhecido ou uma combinacao de cores no padrao rgb, a combinacao pode 
ser feita com um valor hexadecimal ou com o uso da funcao rgb e os valores em decimal separados por cor. 
 
Nome no CSS 
 
aqua 
black 
blue 
fuchsia 
gray 
green 
lime 
maroon 
navy 
olive 
purple 
red 
silver 
teal 
white 
yellow 
Cor 
 
Azul claro 
Preto 
Azul 
Rosa 
Cinza 
Verde 
Verde-limao 
Marrom 
Azul escuro 
Marrom claro 
Roxo 
Vermelho 
Prata 
Verde-agua 
Branco 
Amarelo 
 
 
Configurando Caixas 
 
Existem varias configuracoes que podemos usar para que nossas interfaces fiquem mais atraentes. As caixa permitem que coloquemos linhas 
em volta do texto ou em uma tag especifica, as larguras e alturas podem ser especificadas. As formatacoes de fundo possuem varios recursos, 
existe forma de se fixar imagens no fundo, fazer com que ela expanda, atribuir cor de fundo para uma marcacao apenas. 
 
Iremos apresentar algumas formatacoes para que se possa ter contato com a formatacao de caixas. 
 
 
Usando pseudo elementos e pseudo classes 
 
O CSS possui algumas formatacoes que estao relacionadas com situacoes especificas. Os hiperlinks fornecem a possibilidade de se configurar 
tres estados, normal (o link), visitado e ativo (com o foco do cursor). O paragrafo permite que existam configuracoes especificas para a 
primeira letra, a primeira linha, antes e depois do paragrafo. A pagina permite se configure as margens direita e esquerda. As marcacoes 
percebem se o mouse esta sobre ela ou nao, apesar de ser mais usado com a tag "a", a pseudo classe pode ser usada com as outras marcacoes. 
 
 
 
Exemplos de utilizacao de CSS 
 
O CSS possui algumas formatacoes que estao relacionadas com situacoes especificas. Os hiperlinks fornecem a possibilidade de se configurar 
tres estados, normal (o link), visitado e ativo (com o foco do cursor). O paragrafo permite que existam configuracoes especificas para a 
primeira letra, a primeiralinha, antes e depois do paragrafo. A pagina permite se configure as margens direita e esquerda. As marcacoes 
percebem se o mouse esta sobre ela ou nao, apesar de ser mais usado com a tag "a", a pseudo classe pode ser usada com as outras marcacoes. 
 
Assista alguns videos para maior conhecimento. 
 
 
Aula 5 
 
Historico do Javascript 
 
O Javascript foi desenvolvido pela Netscape por Brendan Eich. A linguagem foi inicialmente chamada de Mocha. Quando a versao 2.0 do 
Netscape e lancada em setembro de 1995, o navegador ja interpretava a linguagem, porem, ela havia sido rebatizada para Livescript. A 
linguagem ja se chamava Javascript na atualizacao da versao do navegador 2.0B3 em dezembro do mesmo ano. A utilizacao do nome surge de 
uma associacao 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 especificacao da linguagem para a Ecma International, exsitia a intencao de que ela fosse considerada como um padrao 
da industria. A entidade ciniiou grupos de trabalho para gerar um padrao, foi criado ECMAScript. 
 
A Microsft lancou a sua linguagem script com sintaxe oriunda de "C++" para nao ter problema com patentes, o Jscript. O navegador Internet 
Explorer tambem possuia um interpretador para Vbscript, porem ela nao funcionava no Netscape. O Jscript foi incluido na versao 3.0 do 
navegador. Ela seguia inicialmente o que existia no Javascript, tendo algumas funcionalidades distintas, posteriormente passou a seguir o 
padrao, ECMAScript. A diferenca 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 missao de 
entender e executar codigos de uma linguagem de programacao. A criacao de scripts Javascript trouxe animacoes nas paginas, validacoes de 
formularios, entre tantas outras possibilidades. A criacao de interfaces ricas aumenta a necessidade do uso de Javascript e o Ajax tambem 
amplia essa necessidade, os dados deixaram de ser enviados quando o navegador requisita uma pagina, mas quando um objeto dele faz isso, 
necessitando da linguagem para realizar esse trabalho. 
 
Sintaxe da linguagem 
 
O Javascript segue a sintaxe basica do Java para as suas estruturas. Nao e fortemente tipada, permitindo que suas variaveis funcionem de 
acordo com o conteudo que estao armazenando. A linguagem nao exige que suas variaveis sejam declaradas, bastando atribuir u+.9+.m valor 
para que elas possam ser usadas a partir de um determinado ponto. 
 
Estrutura basica de inclusao de scripts nas paginas HTML. 
 
<script> 
Set de instrucoes 
</script> 
 
A marcacao script delimita uma area para que coloquemos codigos. 
 
TYPE 
MIME-type - especifica o tipo de arquivo. 
 
• text/javascript (usaremos este) 
• text/ecmascript 
• application/ecmascript 
• application/javascript 
• text/vbscript 
 
CHARSET 
Especifica a codificacao usada para os caracteres 
 
• "ISO-8859-1" – padrao para as linguas Latinas, contem os acentos e o cedilha 
 
• "UTF-8" – codificacao que contempla todos os alfabetos, existe a proposta em transforma-lo em padrao. 
 
Existem varias codificacoes, atendendo as linguagens 
 
TYPE 
Informa o arquivo com o seu caminho, veremos o uso de arquivo externo. 
 
Podemos inserir comentarios em nossos codigos, e usado o // (barra barra) para comentarios de uma linha e /* texto */ (barra asteristico e 
asteristico barra) para comentarios de varias linhas. 
 
 
Onde podemos colocar os codigos Javascript 
 
A marcacao "script" pode ser colocada dentro de "head" ou "body", iremos usar o "head" para colocarmos nossas funcoes e o "body" quando 
necessitarmos que o Javascript apresente alguma caixa de dialogo ou gere objetos da tela e textos na tela quando a pagina for 
carregada. Existe tambem a possibilidade de que sejam colocados codigos diretamente nos eventos, iremos ver isso no assunto eventos. 
 
Exemplo de selecao simples: 
 
<html> 
 <head> 
 <tilte>Titulo da Pagina</title> 
 <script type="text/Javascript" > 
 //codigo 
 </script> 
 </head> 
 
 <body> 
 
 </body> 
</html> 
 
Operadores 
 
Dividimos os operadores inicialmente em operadores aritmeticos, relacionais e logicos, existem tambem operadores de bit, operador de selecao 
(ternario). Os operadores aritmeticos permitem que facamos expressoes e obtenhamos um resultado que ira depender dos tipos de dados e dos 
proprios operadores. Os operadores relacionais obtem um valor logico como resultado de sua avaliacao. Operadores logicos comparam valores 
logicos, gerando um novo valor logico. 
 
Usaremos o metodo "write" do objeto "document", o metodo adiciona informacoes na pagina, fazendo com que o navegador exiba os dados 
recebidos. 
 
Delimitadores de bloco 
 
O Javascript utiliza as chaves como delimitador de bloco. Eles permitem que varias instrucoes recebam o mesmo funcionamento que a 
instrucao apos a estrutura da linguagem, algumas interferem na instrucao imediatamente apos a ela. A estrutura "if" realiza um teste 
condicional que executa ou nao a proxima instrucao, para que esse tratamento seja aplicado a varias instrucao devemos circunda-la com 
delimitadores de bloco. 
 
Exemplo 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 dialogo 
 
As caixas de dialogo sao janelas que permitem que o nosso sistema interrompa seu funcionamento, aguardando que o usuario interaja com elas 
antes de prosseguir, esse tipo de funcionamento e chamado de janela modal, impede que o usuario acione qualquer outra parte do sistema antes 
de fechar a janela atual. 
 
Mostramos duas caixas de dialogo em nossos exemplos, ficando apenas uma de fora. Existe uma para podermos enviar um aviso ao usuario, 
uma segunda para pedirmos que o usuario entre com alguma informacao e uma terceira que pede ao usuario para escolher entre opcoes com 
dois botoes (OK e Cancelar), como os navegadores e que interpretam o HTML e o Javascript esses valores podem ser diferentes. 
 
Exemplos com as caixas de dialogo: 
 
 
 
Funcoes 
 
A funcao possui varios aspectos dentro de linguagens de programacao, iremos comecar olhando pela otica de diminuirmos o esforco de 
digitacao e manutencao, uma funcionalidade do programa pode possuir a necessidade de ser utilizada em varios locais pode ser colocada em 
uma funcao. Essa estrategia permite que a manutencao seja realizada em um unico local, diminuindo esforco futuro e risco de inconsistencia. 
Outro aspecto a se considerar e a divisao de trabalho, uma equipe de desenvolvimento pode receber tarefas individualizadas, a modularizacao 
permite que cada pessoa crie parte do programa. O tratamento de evento e normalmente associado a uma funcao. 
Algoritmo diferencia procedimento de funcao, o Javascript ira criar sempre como funcao, atraves do retorno ou nao de um valor pela funcao e 
que iremos diferenciar se esta no papel de funcao ou de procedimento. A criacao de funcoes e feita dentro da marcacao "script", podemos cria-
las em arquivos externos. Algumas avaliacoes de performance indicam que podemos melhorar o carregamento das paginas colocando-as no 
final do documento, colocando amarcacao "script" dentro de "body", perto de seu fechamento. 
 
 
Criando uma funcao 
 
function nomeDaFuncao (Parametros) { 
 instrucoes da funcao ... 
} 
 
Podemos criar funcoes com varios objetivos, vamos exemplificar com uma funcao que tenha como objetivo informar se uma pessoa e maior ou 
menor de idade, recebendo como parametro a sua idade. 
 
Exemplo 
 
<script type="text/Javascript" > 
function diMaior(anos){ 
 if (Anos > 17) { 
 alert ("Maior de Idade"); 
 } else { 
 alert ("Menor de Idade") ; 
 } 
} 
</script> 
 
Essa funcao estara tendo o seu processamento como um procedimento. 
 
Uma funcao nao e iniciada sozinha, ela precisa ser chamada por outro processamento. 
 
 
Direito Ambiental 
 
Podemos passar informacoes para a funcao, essas informacoes tem o nome de parametro. Uma variavel comum e passada por valor, a funcao 
recebe uma copia de seu valor e esse e armazenado na variavel que e criada quando a funcao inicia, a variavel original possui seu valor 
inalterado. Quando passamos objetos ou vetores nos parametros o Javascript nao cria uma copia dele, e criada uma referencia para o proprio 
objeto, todas as alteracoes realizadas nos valores sao feitas diretamente no objeto ou vetor passado, nao havendo preservacao do valor original. 
 
A funcao pode ser definida com nenhum parametro ou varios, podemos tambem criar funcoes que possuam um numero de parametros 
variavel, recuperando-os atraves do vetor "arguments". 
 
Eventos 
 
Os objetos de uma pagina XHTML percebem algumas acoes sobre eles, chamamos de eventos essas acoes reconhecidas. A programacao 
motivada por eventos comecou nos sistemas operacionais com janelas, o programador insere codigo para tratar acoes que o usuario deveria 
realizar com a tela. 
 
Em seguida apresentamos a lista de alguns eventos possiveis, indicando os momentos em que os mesmos podem ocorrer, bem como, os 
objetos passiveis de sua ocorrencia. 
 
onunload 
A marcacao "body" pode chamar algum tratamento antes de o usuario sair da pagina. 
 
onchange 
Ocorre quando o objeto perde o foco e houve mudanca de conteudo, valido para os objetos text, select e textarea. 
 
onblur 
Quando o cursor sai do objeto, ele perde o foco. Esse evento e usado quando se deseja tratar mesmo que nao tenha havido mudanca, valido 
para os objetos text, select e textarea. 
 
onfocus 
Funciona de forma inversa do anterior, ele e chamado sempre que o objeto receber o foco, valido para os objetos text, select e textarea. 
 
onclick 
Ocorre quando o objeto recebe um click do mouse, valido para todos objetos de tela, usamos mais para o objeto <input type="button" />. 
 
onmouseover 
Ocorre quando o ponteiro do mouse passa por sobre o objeto. Podemos usar esse evento no objetos da tela. Possui muitas possibilidades na 
criacao de interfaces ricas, permite que seja percebido se um produto foi arrastado para uma imagem do carrinho por exemplo. 
 
onselect 
Ocorre quando o texto dentro do objeto e selecionado, valido para os objetos "inpt text" e textarea. 
 
onsubmit 
Ocorre quando um formulario esta sendo enviado. Utilizamos esse evento para podermos validar formularios, 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 > 
 
 
Aula 6 
 
Conhecendo o DHTML 
 
O DHTML utiliza outras tecnologias para criar interatividade nas interfaces Web. A uniao do HTML que define os elementos de nossa pagina, 
o Javascript com a programacao script, o CSS com as suas possibilidades de formatacao e posicionamentos, unidos a definicao de estrutura 
hierarquica de objetos oferecida pelo DOM permitem que construamos telas com animacoes, que sao alteradas de acordo com as acoes do 
usuario, 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 lancado, apesar de ainda ser inferior do que o Netscape nessa epoca. O 
Internet Explorer comeca a fazer frente ao Netscape quando lanca a sua versao 4.0 e a Microsoft o incluiu como parte do sistema operacional, 
fazendo com que todos usassem o Windows ja tivessem o navegador, pois vinha junto e nao poderia ser retirado. 
 
O Nescape 4.0 e lancado em junho de 1997 e o Internet Explorer logo apos, em outubro do mesmo ano. Eles possuem recursos que 
possibilitam a criacao de DHTML de forma basica. 
 
A versao 4.0 do HTML ja possuia 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 nao estava completamente padronizado, era chamado de versao 0 do 
DOM. 
 
A versao 4.0 do HTML tambem trouxe uma alteracao nos estilos, inseriu a possibilidade de se aplicar os estilos em cascata, mudando o seu 
nome para CSS. Houve um aumento nas formatacoes possiveis e uma tentativa na padronizacao dos estilos nos navegadores. O Javascript e o 
Jscript nos dois navegadores possuem uma estrutura bem proxima, ficando as diferencas 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 e uma API de programacao para documentos, contem os metodos que permitam interagir com os elementos, assim como 
os eventos percebidos por eles e suas propriedades. 
 
 
Arquitetura do DOM 
 
As especificacoes do DOM definem modulos para tratar um uso especifico. Os modulos dependem de outros, todos dependem do nucleo 
principal. 
 
 
 
Estrutura no HTML 
 
O Dom determina a estrutura basica do documento HTML, o primeiro elemento do documento e o document, porem ele e interpretado dentro 
de uma janela de um navegador, tornando o window como o primeiro elemento. Cada marcacao e uma representacao do objeto element, o 
element possui atributos (attribute) que ficam postados dentro da marcacao, entre a abertura e fechamento da marcacao podemos colocar textos 
(text). Um elemento pode possuir elementos filhos, gerando a hierarquia do documento. 
 
 
 
Os elementos podem ser recuperados de algumas formas, podemos acessar um elemento atraves de seu id, podemos andar pela estrutura ate 
chegar ao no desejado e podemos recuperar todas as marcacoes do mesmo tipo, ate chegar ao elemento procurado. Existe a possibilidade de se 
andar pelos names das marcacoes, porem nao e a recomendacao w3c. 
 
DOM e Javascript 
 
O DOM define metodos que os objetos devem possuir para que possamos gerenciar a estrutura do documento. O Javascript interage com os 
objetos, criando-os e chamando seus metodos, tornando possivel a alteracao da estrutura da pagina, mesmo depois de sua exibicao. A 
linguagem permite que manipulemos os elementos. 
 
Recuperando um elemento 
 
O primeiro passo e a identificacao do elemento que sera a abse da acao, para tanto usaremos o metodo getElementById. 
 
<script type="text/javascript"> 
minhaBorboleta = document.getElementById("borboleta"); 
alert( minhaJanela ); 
</script> 
 
O objeto document possui o metodo getElementById que retorna o elemento que possui o id informado. Acaixa de dialogo ira exibir que 
minhaBorboleta possui um elemento do HTML. Podemos usar document.odemos usar document. getElementsByTagName("marcacao") para 
retornar todos os elementos do com o mesmo nome de marcacao, pode ser retornado todos os elementos do tipo "tr". 
 
Metodos dos objetos DOM 
 
Vamos ver os metodos 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 nao o possua, entao o atributo sera criado. 
 
getAttribute("atributo") - Obtem o valor do atributo. 
 
removeAttribute("atributo") - Remove o atributo. 
 
appendChild(objeto) - Adiciona um elemento como filho do elemento atual. O navegador ira exibir o elemento se for uma marcacao XHTML 
conhecido por ele. 
 
createElement("elemento") - Cria um elemento para que seja possivel adiciona-lo a estrutura da pagina. 
 
createTextNode("conteudo") - Insere um texto entre o par da marcacao 
 
 
parentNode - Retorna o elemento pai do no (elemento) atual. 
childNodes - Retorna a colecao de filhos do elemento. 
firstChild - Retorna o primeiro no interno ao elemento. 
lastChild - Retorna o ultimo no interno ao elemento. 
nextSibling - Retorna o proximo no filho do mesmo pai que o no atual. 
 
Trabalhando com o cursor 
 
O mouse pode ser usado para o usuario interagir com a interface alem do clique simples, podemos arrastar objetos, verificar se ele esta sobre 
uma determinada posicao, sobre um objeto, se movendo, entre outras possibilidades. Vamos ver como podemos verificar esses eventos. 
 
As marcacoes XHTML possuem alguns eventos que ja falamos na aula sobre Javascript. Os eventos sao percepcoes que os objetos possuem, 
eles conseguem detectar que alguma acao ocorreu. Os desenvolvedores escrevem codigos para os eventos, por isso que esse tipo de 
programacao chama-se motivado por eventos. 
 
As marcacoes percebem alguns eventos, mas foi criado um objeto chamado de "event" para permitir que se obtenha algumas informacoes em 
relacao ao tipo de acao que o usuario fez. O botao do mouse que o usuario esta segurando, a tecla pressionada, o shift esta pressionado sao 
informacoes que podemos recuperar com o objeto "event". 
 
Camadas 
 
As camadas permitem que sejam introduzidos conteudos no seu interior, podemos adicionar textos sem formatacoes ou partes de XHTML 
completamente formatadas. Quando se comecou 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 alternancia entre visivel e oculto o estado da camada. 
 
Para alterarmos o conteudo de uma "div" usamos a sua propriedade "innerHTML". 
 
function altera(){ 
//Recuperando a div 
var camada = document.getElementById("minhaCamada"); 
//Recuperando o campo de texto 
var texto = document.getElementById("texto"); 
//Recuperando a caixa de selecao 
var negrito = document.getElementById("negrito"); 
 
info = texto.value; 
// verificando se esta 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 ; 
} 
 
O posicionamento de camadas pode ser feito dinamicamente, veremos ainda nessa aula. 
 
Exemplo de menu 
 
A construcao de menus DHTML e muito usada no desenvolvimento de interfaces Web. A construcao se baseia no conceito de exibir e ocultar 
camadas e o posicionamento das camadas. O exemplo abaixo visa ilustrar a configuracao visibility do CSS, existem algumas formas de fazer 
que o funcionamento seja mais perfeito. Uma das formas de resolver o problema e 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){ 
// Nao necessita recuperar o elemento, 
// pois e que foi passado. 
// Ocultando o menu 
camadaSub.style.visibility = "hidden"; 
} 
</script> 
 
Ativando as funcoes com o tempo 
 
O Javascript possui dois funcoes que permitem que se chame uma "function" apos um determinado tempo, setTimeout e setInterval. A funcao 
setTimeout permite que se escolha uma funcao apos decorrem um tempo determinado, enquanto a setInterval chamara a funcao a cada 
intervalo de tempo determinado. 
 
 
Javascript e CSS 
 
O Javascript permite que se altere estilos de campos da pagina, que se altere valor para um estilo. O estilo pode ser informado de tres formas 
conforme foi visto na aula de CSS. Podemos determinar para um elemento qual formatacao que sera aplicada nele, alterar a classe que esta 
sendo aplicada ou alterar a folha de estilos para a pagina. 
 
 
Podemos fazer que o link nao leva para nenhuma pagina e nao 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> 
 
 
Alterando Imagens 
 
Podemos alterar as imagens atraves de objetos imagens ou atraves da propriedade "src", fazendo a alteracao atraves de codigo Javascript. 
Existem algumas aplicacoes que se utilizam desses recursos para mostrar varias visoes de produto. A uniao da alteracoes 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 esta sendo usada para 
// informar o enderco da nova imagem 
ref.src = "img/refri" + qual +".jpg" 
} 
</script> 
 
Javascript e o HTML5 
 
O HTML 5 esta perto de ser uma recomendacao, os navegadores correm em passar a compreende-lo para que possam aumentar a sua lista de 
usuarios. Ele ganha marcacoes para tratar objetos multimidia. A intencao da nova versao e de que se controle video pela pagina com codigos 
Javascript. As paginas com interacoes e conteudo ricos possuirao mais possibilidades. O Javascript tera que interagir com os objetos, ganhando 
mais funcionalidades 
 
Um aliado a nova versao e o CSS3, que ira auxiliar na tarefa de aumentar as possibilidades da interface. O modelo DOM se adequa as 
alteracoes feitas, permitindo que voltemos com mais forca para a construcao de interfaces dinamicas. A criacao dos codigos sempre foi 
trabalhosa, a verificacao para que as paginas tivessem o mesmo tipo de comportamento nos navegadores mais usados. 
 
Os frameworks comecaram a fazer as atualizacoes para poderem contemplar os novos recursos, nao permitindo que os espacos ganhos com os 
usuarios fossem perdidos. 
 
 
Aula 7 
 
Historico do jQuery 
 
Alguns frameworks comecaram a surgir, o Prototype e um bom exemplo que tem a sua primeira versao em fevereiro de 2005, ele e base para 
muitos outros frameworks tais como Ruby on Rails, script.aculo.us e Rico. O desenvolvimento do jQuery e inicado em agosto de 2005. 
 
John Resig questionava o quanto era escrito para que se incluisse um Javascript, comecou 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 versao data de janeiro 
de 2006, a primeira versao estavel (1.0) e de agosto do mesmo

Outros materiais