Internet Rica

PROGRAMAÇÃO PARA INTERNET RICA

autor

CLEBER COSTA DA FONSECA

1ª edição SESES rio de janeiro  2016

Conselho editorial  regiane burger, roberto paes e paola gil de almeida Autor do original  cleber costa da fonseca Projeto editorial  roberto paes Coordenação de produção  paola gil de almeida, paula r. de a. machado e aline karina rabello Projeto gráfico  paulo vitor bastos Diagramação  bfs media Revisão linguística  bfs media Revisão de conteúdo  antonio maria carneiro neto Imagem de capa  sergey nivens | shutterstock.com

Todos os direitos reservados. Nenhuma parte desta obra pode ser reproduzida ou transmitida por quaisquer meios (eletrônico ou mecânico, incluindo fotocópia e gravação) ou arquivada em qualquer sistema ou banco de dados sem permissão escrita da Editora. Copyright seses, 2016. Dados Internacionais de Catalogação na Publicação (cip) F676p Fonseca, Cleber Costa da

Programação para internet rica / Cleber Costa da Fonseca.



Rio de Janeiro: SESES, 2016.



104 p: il.



isbn: 978-85-5548-348-6



1. Internet. 2. Internet - programação. I. SESES. II. Estácio. cdd 005

Diretoria de Ensino — Fábrica de Conhecimento Rua do Bispo, 83, bloco F, Campus João Uchôa Rio Comprido — Rio de Janeiro — rj — cep 20261-063

Sumário Prefácio 5 1. Introdução Web 2.0 1.1  Web 2.0 1.1.1 Conceitos 1.1.2 Tecnologia 1.2  Redes sociais 1.2.1 Conceitos 1.2.2  Web 2.0 e as redes sociais 1.2.3 Tipos 1.3  Desenvolvimento de software 1.3.1 Client-side 1.3.2 Back-end 1.4 RIA

7 8 9 9 11 11 11 11 12 12 14 15

2. XHTML e CSS

21

2.1 XHTML

22

2.1.1 XML 2.1.2  XML Schema 2.1.3 HTML 2.1.4  Especificando e validando o XHTML 2.2 CSS 2.2.1 Sintaxe 2.2.2 Seletor 2.2.3  Integrando estilo com a pagina web

23 26 29 31 35 35 36 36

3. Javascript e DOM 3.1 Javascript 3.1.1  Adicionando código Javascript a uma página web 3.1.2  Interagindo com o HTML 3.1.3  Validando Dados 3.1.4 AJAX 3.2 DOM

4. Tecnologias clientes 4.1 jQuery 4.1.1  Adicionando o Jquery à Pagina Web 4.1.2  Sintaxe jQuery 4.1.3  Evento de carregamento do documento 4.1.4 Eventos 4.1.5  Manipulando conteúdo e atributos 4.1.6 AJAX 4.2  Adobe Flash CS3

5. Tecnologias cliente servidor 5.1  Servidores web 5.1.1 IIS 5.1.2 Apache 5.2  Tecnologia servidor/cliente – ASP.NET

41 42 43 45 48 51 55

59 61 61 63 63 64 67 69 71

75 77 80 87 90

Prefácio Prezados(as) alunos(as), Nesta disciplina, abordaremos os aspectos relativos ao desenvolvimento tecnológico da internet na última década, de como a usabilidade das aplicações web ficou defasada comparadas com as aplicações desktop. A cada interação do usuário em uma aplicação web resulta uma requisição ao servidor o que causa um período de espera por parte do usuário. Aplicações ricas de Internet (RIAs) e Web 2.0, são aplicações web que quebram a fronteira entre o navegador web e aplicações desktop padrão. Atualmente ao gerenciar os e-mails pela web, nota-se como as interfaces gráficas são simples e intuitivas como aplicações de e-mail para desktop. A atualização da caixa postal na web é executada de forma automática, um novo e-mail é disponibilizado na caixa de entrada sem qualquer intervenção do usuário. Um novo paradigma é apresentado onde aplicações web são desenvolvidas com o intuito de serem interativas, esta nova abordagem nos afasta do modelo tradicional da web, o modelo do conteúdo estático. Para prover tais funcionalidades padrões são utilizados no desenvolvimento das aplicações como Java Script e o Document Object Model (DOM), além da evolução de interoperabilidade e conformidade entre os fabricantes de navegadores. Esta disciplina capacita os alunos em conhecimento para criação de aplicações web mais interativas através de aulas práticas e teóricas, exercícios e exemplos formando uma base para futuros desenvolvedores de aplicações web interativas, agradável e de grande usabilidade. Bons estudos!

5

1 Introdução Web 2.0

1.  Introdução Web 2.0 No ano de 2004, a empresa americana O'Reilly Media, Inc. [2] apresentou um novo modelo de colaboração e interação entre o usuário e a Web, o Web 2.0. O conceito vem da necessidade dos sites permitirem que o usuário crie seu próprio conteúdo e possibilite a interação dos mesmos através de redes sociais e comunidades virtuais. Redes sociais é sem dúvidas um dos principais elementos motivadores para a criação do Web 2.0. São pelas redes sociais que os indivíduos com interesses comuns se conectam, compartilham conteúdo e trocam experiências de forma interativa. A peça fundamental na transformação da Web tradicional para a Web 2.0 foi o desenvolvimento de software, a utilização de técnicas existentes agregadas aos conteúdos estáticos transformaram a usabilidade do usuário com a Web, tornando-a mais interativa e colaborativa. O termo RIA (Rich Internet Application) ou Aplicações de Internet Rica foi introduzido em 2002 pela empresa Macromedia adquirida pela empresa Adobe Systems [18] no ano de 2005. O propósito era criar aplicações Web que pudessem quebrar a barreira entre as aplicações desktops e a Web. Neste capítulo introdutório, define os fundamentos básicos das tecnologias envolvidas na criação de experiências ricas em aplicações para internet.

OBJETIVOS •  Discutir os conceitos de Web 2.0 e as tecnologias que estão envolvidas; •  Identificar as características da arquitetura de aplicações na Web focado nas aplicações ricas para internet; •  Definir os fundamentos básicos das tecnologias envolvidas na criação de aplicações para internet interativas.

1.1  Web 2.0 Nesta seção é apresentada os conceitos referentes a Web 2.0 [1] e o entendimento das tecnologias aplicadas.

8•

capítulo 1

1.1.1  Conceitos O surgimento da Web foi baseado em conteúdos estáticos, as páginas eram dispostos em provedores de Internet e o conteúdo era mantido e atualizado por empresas e desenvolvedores de software. A interação e colaboração de conteúdo pelo usuário não existia. No ano de 2004, a empresa americana O'Reilly Media, Inc. [2] apresentou um novo modelo de colaboração e interação entre o usuário e a Web, o Web 2.0. O conceito vem da necessidade dos sites permitirem que o usuário crie seu próprio conteúdo e possibilite a interação dos mesmos através de redes sociais e comunidades virtuais. Assim, ocorreu uma grande revolução na forma como qual as páginas eram construídas, ao invés de conteúdo estático, surgiu a necessidade das páginas serem interativas e com a capacidade submeter conteúdo dos usuários. O termo Web 2.0 não significa que houve uma atualização das especificações técnicas da Web e sim como as páginas são desenvolvidas e utilizadas. O grande objetivo da Web 2.0 é permitir que a Web seja dinâmica e que os usuários colaborem para a organização do conteúdo. Exemplos de sites Web 2.0 incluem redes sociais, blogs, wikis e sites de compartilhamento de vídeos. 1.1.2  Tecnologia A Internet [3] é a rede mundial de computadores que interconecta os computadores. O principal objetivo da Internet é possibilitar a troca de dados e documentos entre computadores na rede. Para que a troca de informação ocorra de forma ordenada entre os computadores, definiu-se regras padronizadas para a comunicação entre os mesmos, tais regras são nomeadas protocolos de comunicação. A tabela 1.1 apresenta os principais protocolos empregados na Internet.

SIGLA

NOME

DESCRIÇÃO Responsável pelo endereçamento dos computadores na rede, todo computador

IP

Protocolo de Internet

possui um endereço na Internet. Segue um exemplo de endereço IP (versão 4) “192.168.0.100”

capítulo 1

•9

SIGLA TCP/IP

HTTP

FTP

NOME Protocolo de controle de Transmissão

DESCRIÇÃO Em conjunto com o protocolo IP, particiona os dados para a transmissão através da rede

Protocolo de transferên-

Utilizado para acessar www (World Wide

cia de hipertexto

Web) como protocolo de cliente/servidor.

Protocolo de transferência de arquivo

Aplicado na transferência de arquivos

Tabela 1.1  –  Alguns Protocolos de Internet.

O navegador de Internet utiliza o protocolo HTTP para requisitar o conteúdo de um site na Internet, tal protocolo utiliza a arquitetura cliente/servidor, onde o cliente é o navegador de Internet e o servidor é o provedor do conteúdo. Para um melhor entendimento, imagine uma requisição pelo navegador, a solicitação é feita para a Internet via HTTP e o servidor disponibiliza o conteúdo estático que é apresentado no navegador. Essa técnica HTTP já era aplicada na Web antes mesmo da Web 2.0. E o que mudou? Realmente a arquitetura cliente/servidor via HTTP não foi alterada para atender a Web 2.0, a grande diferença esta no desenvolvimentos das páginas. Para torná-las interativas foi adicionado código Java Script [4]. O funcionamento da requisição se dá mesma forma, porém o conteúdo gerado é incrementado com uma parcela de Java Script ou chamado código cliente. Esta parcela juntamente com o suporte do Java Script pelos navegadores habilitou a criação de páginas interativas, pois neste cenário permitiu-se que requisições HTTP fossem executadas pelo Java Script ao servidor sem a intervenção do usuário. Um exemplo bem típico é a cotação de uma moeda estrangeira. Uma página construída para Web 2.0 mostrará a cotação da moeda sem a necessidade de intervenção do usuário, a cada período predeterminado o valor da cotação atualizará automaticamente. Já na versão anterior a Web 2.0 o valor da cotação será estático até que o usuário faça uma nova requisição para verificar o novo valor da cotação. O Java Script é uma peça fundamental nesta transformação da Web, porém deve-se considerar que componentes de software dispostos no servidor devem ser projetados para dispor das informações a cada requisição Java Script ao servidor.

10 •

capítulo 1

1.2  Redes sociais Redes sociais é sem dúvidas um dos principais elementos motivadores para a criação do Web 2.0. São pelas redes sociais que os indivíduos com interesses comuns se conectam, compartilham conteúdo e trocam experiencias de forma interativa. 1.2.1  Conceitos As redes reúnem pessoas com interesses comuns nas mais diversas áreas, podendo variar em redes de colaboração de estudos químicos até redes que reúnem torcedores de um time de futebol. Cada rede tem seu objetivo, tamanho, dispersão geográfica e impacto social. A administração de tais redes é bem complicada, pois exige esforço coletivo e colaborativo dos seus membros, com a advento do Web 2.0 foi possível conectar as pessoas com interesses comuns por todo o mundo através da Web, administrar coletivamente a rede e principalmente compartilhar experiências e conhecimentos com todos através da rede mundial de computadores. 1.2.2  Web 2.0 e as redes sociais A Web 2.0 permitiu a interação entre as pessoas de forma on-line nas redes sociais, quase que instantaneamente um conteúdo publicado na rede social por um indivíduo é disponibilizado aos membros da mesma rede, alcançando o principal objetivo da Web 2.0 de construir páginas interativas no qual o usuário possa construir o seu próprio conteúdo. A colaboração entre usuários é também um importante componente para o sucesso das redes sociais. Como exemplo pode-se citar, a colaboração entre pesquisadores de vários partes do mundo com o objetivo de desenvolver uma vacina. 1.2.3  Tipos A lista abaixo apresenta os principais tipos de redes sociais para compartilhamento de conteúdo e interação entre as pessoas virtualmente. Redes sociais: São aplicativos que permitem a conexão virtual e on-line entre as pessoas com interesses em comum. capítulo 1

• 11

Redes como o Facebook objetivam a conexão de pessoas com interesse pessoal e familiar, já o grande proposito da rede Linkedin é estabelecer o contato profissional. O Web 2.0 proporcionou a conexão entre as pessoas virtualmente mesmo as mesmas estando distantes milhares de quilômetros. Wiki: É um software colaborativo que permite aos usuários compartilhar conteúdo com a possibilidade de edição do conteúdo por outro usuário. Além do compartilhamento de informações é utilizado para desenvolvimento de projetos colaborativos. Blogs: São aplicativos para gerenciamento de conteúdo permitindo que usuários comuns adicione conteúdo diariamente. Normalmente, o conteúdo é visualizado cronologicamente com links, fotos e comentários sobre um determinado assunto em específico.

1.3  Desenvolvimento de software A peça fundamental na transformação da Web tradicional para a Web 2.0 foi no desenvolvimento de software, a utilização de técnicas existentes agregadas aos conteúdos estáticos transformaram a usabilidade do usuário com a Web, tornando-a mais interativa e colaborativa. Um software para Web 2.0 normalmente é projetado em dois grandes blocos Client-Side e Back-End, a separação auxilia o desenvolvimento e posterior manutenção do software, normalmente os profissionais de desenvolvimento se especializam em umas das áreas. A seguir os dois blocos são detalhados. 1.3.1  Client-side Um profissional que atua com Client-Side ou Tecnologias clientes é responsável por criar as interfaces gráficas interativas e colaborativas utilizando recursos disponíveis nos navegadores de Internet. Toda a lógica de programação para prover a Interface gráfica é executada no navegador de Internet, ou seja, no lado do cliente e a principal linguagem de programação utilizada é o Java Script. Além do conhecimento de lógica de programação, o profissional deve possuir habilidades em usabilidade de software. O termo usabilidade define a melhor forma possível de organização de cores e layout para tornar a experiência do usuário confortável ao utilizar uma ferramenta.

12 •

capítulo 1

Para a formatação do site, o profissional deve possuir conhecimentos em HTML (HyperText Markup Language) [5] e CSS (Cascading Style Sheets) [6]. O HTML ou linguagem de marcação de hipertexto permite a construção dos layouts e componentes do site que é a base de construção dos Web sites. O CSS ou linguagem de folhas de estilos a define a formatação de todo um site como cores, tamanhos, fontes e etc. É um arquivo central com as definições de formatação de todo o site, o que facilita posteriores mudanças de formatação do site, uma vez alterado a formatação no arquivo a mudança é replicada para todo o site. Uma técnica que todo profissional desenvolvedor de Client-Side deve conhecer é o AJAX (Asynchronous Javascript and XML) [7]. O AJAX foi um agente transformador para o Web 2.0. O AJAX utiliza o próprio Javascript dos navegadores de Internet para executar chamadas assíncronas aos servidores da Internet e a resposta a requisição ao cliente é um XML (eXtensible Markup Language) [8]. O XML é um padrão de texto muito utilizado para troca de dados entre sistemas, normalmente aplicado para integrar sistemas. Para o desenvolvimento de aplicações Web é utilizado para troca de informações entre o cliente (navegador) e o servidor. Posteriormente, o AJAX evolui e as chamadas ao servidor também podem ser executadas sincronamente e outro padrão pra troca de dados foi adotada, o JSON (JavaScript Object Notation) [9]. O último passo para finalizar o desenvolvimento de uma página Web 2.0 é conhecer o DOM (Documente Object Model) [10]. O DOM ou modelo de objetos do documento é um modelo estrutural de objetos padronizado pela organização W3C [11], basicamente o DOM representa toda a página renderizada no navegador de Internet. Com o DOM e o Javascript é possível acessar, alterar e manipular qualquer componente disponível na interface gráfica. Retornando ao exemplo da cotação da moeda estrangeira, teremos um AJAX que fará requisições periódicas ao servidor para verificar alteração no valor da cotação, ao retornar um XML ou JSON do servidor com o novo valor, o Javascript irá manipular o documento HTML para aplicar o novo valor da cotação. O Javascript tornou-se uma poderosa ferramenta na construção de sites interativos e com eles surgiram bibliotecas que facilitam o desenvolvimento dos mesmos. O grande proposito na utilização destas bibliotecas é permitir que o desenvolvedor manipule o HTML e execute o AJAX através dos múltiplos navegadores disponíveis. capítulo 1

• 13

Um dos principais problemas na construção de sites é o suporte a variedade de navegadores, dependendo do navegador é necessário codificar de forma proprietária para o mesmo, com a adoção das bibliotecas Javascript este problema se minimizou. O jQuery [12] é um exemplo de uma biblioteca Javascript amplamente utilizada, permite manipular os objetos na interface e prove de forma fácil requisições AJAX, isso tudo de maneira simples com o compromisso de manter a interoperabilidade entre os navegadores de Internet. 1.3.2  Back-end No Back-End ou Tecnologias cliente servidor utiliza-se os recursos dispostos nos servidores para a execução de cálculos que requerem uma demanda maior de recursos de hardware, pois os servidores possuem uma capacidade computacional maiores que os clientes. A manipulação de dados é uma característica importante na construção de aplicações Back-End, os dados dos usuários são armazenados em banco de dados e os aplicativos servidores manipulam os dados através das operações adicionar, listar, atualizar e apagar valores dos banco de dados, comumente utiliza-se a sigla CRUD (Create, Retrieve, Update e Delete) para se referir as tais operações. Em resumo são as operações básicas de um cadastro de qualquer objeto em uma tabela no banco de dados. Para prover acesso aos dados e processar cálculos específicos, o servidor deve receber, executar o cálculo ou manipular o banco de dados e responder as requisições HTTP ao cliente, para prover tais funcionalidades é necessário a instalação de um software que gerencie as requisições HTTP. Os softwares comumente utilizados nos servidores HTTP são o IIS (Internet Information Services) [13] e o Apache [14]. O IIS é um produto Microsoft [15] e foi desenvolvido para os sistemas operacionais Windows e suporta basicamente os sites que são desenvolvidas pelas tecnologias da empresa. Pode-se citar o ASP (Active Server Page) [16] e o ASP. NET [17]. O software Apache permite a instalação em servidores Linux e Windows, o seu desenvolvimento é baseado no conceito de código fonte aberto, ou seja, o código é desenvolvido e mantido por uma comunidade ativa no qual o propósito

14 •

capítulo 1

é manter o software coeso com as especificações HTTP. Ruby, Python, PHP, Perl e Java são algumas tecnologias de Back-end suportadas pelo Apache.

1.4  RIA O termo RIA (Rich Internet Application) ou Aplicações de Internet Rica foi introduzido em 2002 pela empresa Macromedia adquirida pela empresa Adobe Systems [18] no ano de 2005. O propósito era criar aplicações Web que pudessem quebrar a barreira entre as aplicações desktops e a Web. A arquitetura cliente / servidor da Internet não possibilitava ao usuário a mesma experiência que das aplicações desktops. O cliente era denominado cliente magro, pois todo o processamento de uma aplicação era atribuição dos servidores, o navegador somente era responsável em apresentar o conteúdo estático resultado do processamento no servidor. Para solucionar tal problema criou-se o client engine ou plugin, que é uma extensão do navegador de Internet, assim ao carregar um site o client engine fazia o download do aplicativo no navegador, ao executar o aplicativo no cliente evita-se requisições recorrentes do cliente em direção aos servidores na Internet. O que foi denominado de cliente gordo, permitindo explorar a capacidade computacional do cliente e desonerando os servidores. O Flash Player [19] é um exemplo de client engine para prover aplicações. O grande problema na tecnologia da RIA é o licenciamento de software para desenvolvimento dos sites, pacotes de software devem ser adquiridos para a construção de aplicações do tipo cliente gordo, já em contra partida o HTML/ Java script/CSS são padrões mantidos por organização sem fins lucrativos, a W3C. Os padrões também foram adotados por grandes corporações da informática como a Microsoft e o Google, o que difundiu a aplicação destes padrões pelo mundo. Mas, dependendo do tipo de aplicação a ser construída deve-se levar em consideração qual técnica deve ser empregada.

ATIVIDADES 01. Selecione as opções que caracterizam a Web 2.0. a) ( ) Páginas interativas b) ( ) Nova especificação do protocolo HTTP c) ( ) AJAX d) ( ) Conteúdo totalmente estático

capítulo 1

• 15

02. Redes sociais poderiam existir sem o advento do Web 2.0? Justifique. 03. Faça uma pesquisa e identifique dentre as opções abaixo, quais são protocolos de Internet. a) ( ) SSL

c) ( ) CDMA

b) ( ) SMTP

d) ( ) MIME

04. É possível estabelecer uma relação de um protocolo de comunicação com um idioma? Explique. 05. Marque as alternativas que definem o Javascript: a) ( ) Linguagem de programação para servidores b) ( ) Linguagem de programação para navegadores de Internet c) ( ) Padrão W3C d) ( ) Linguagem proprietária utilizada especificamente em produtos Microsoft. 06. Na lista abaixo selecione os itens referentes ao desenvolvimento no lado cliente (Client-Side). a) ( ) IIS

c) ( ) DOM

b) ( ) AJAX

d) ( ) HTML

07. Qual é o objetivo do AJAX utilizar os padrões XML e JSON. Justifique. 08. Quais os benefícios de se adotar uma biblioteca Javascript no desenvolvimento de aplicações Web? 09. Selecione a(s) opção(ões) que define(m) um provedor HTTP. a) ( ) Componente de software W3C do servidor b) ( ) Software que reside no cliente responsável por enviar as requisições HTTP c) ( ) Apache cliente d) ( ) Apenas um componente de software disposto que gerencia as requisições HTTP no servidor 10. Defina um cliente magro.

16 •

capítulo 1

REFLEXÃO Neste capítulo introdutório, definimos os fundamentos básicos das tecnologias envolvidas na criação aplicações para internet interativas. A evolução da Web trouxe uma nova abordagem de como o usuário interage e contribui na Internet por meio das redes sociais. O funcionamento da Internet foi apresentado através do protocolo HTTP baseado no modelo arquitetural cliente / servidor. Entendemos como a evolução se deu pelo meio de como as páginas são construídas e utilizadas, sendo o agente transformador o AJAX que possibilitou requisições HTTP ao servidor sem a intervenção do usuário, e não menos importante o suporte dos navegadores ao Java Script. Ainda, exploramos a vertente das Aplicações de Internet Rica diferenciando entre o modelo aplicando Java Script e plug-ins.

LEITURA Título AJAX, RICH INTERNET APPLICATIONS E DESENVOLVIMENTO: Web PARA PROGRAMADORES Autores HARVEY M. DEITEL, PAUL J. DEITEL Editora Prentice Hall Brasil, 2009 ISBN 8576051613, 9788576051619 Sharp, John Microsoft Visual C# 2008: passo a passo / John Sharp : tradução Edson Furmankiewicz ? Porto Alegre: Bookman. 2008. ISBN: 978-85-7780-263-0 Aprenda a Criar Páginas Web com HTML e XHTML em 21 Dias Editora: Makron Books Autor: LAURA LEMAY ISBN: 8534614288 Título: AJAX com jQuery. Subtítulo: Requisições AJAX com a simplicidade de JQuery Autor: Maurício Samy Silva Editora Novatec ISBN: 978-85-7522-199-0

capítulo 1

• 17

CSS - Cascading Style Sheets - Guia de Consulta Rápida - 3ª Ed. Autor: Amaral, Luis Gustavo Editora: Novatec Use a Cabeça - Html com CSS e Xhtml Autor: Freeman, Elisabeth; Freeman, Eric Editora: Alta Books Título: Jquery em Ação Autor: Bibeault, Bear; Katz, Yehuda Editora: Alta Books Título: Use a Cabeça (Iniciação Rápida) Ajax Editora: Alta Books ISBN: 9788576081937

REFERÊNCIAS BIBLIOGRÁFICAS [1] O'Reilly Media Inc, "O'Reilly Media - Technology Books, Tech Conferences, IT Courses, News," O'Reilly Media Inc, 2016. [Online]. Disponível: . Acesso em: 06 mar. 2016. [2] Adobe Systems, “Adobe Brasil: soluções criativas, soluções de marketing e de documentos,” Adobe Systems, 2016. [Online]. Disponível: . Acesso em: 06 mar. 2016. [3] T. O'Reilly, "What Is Web 2.0 - O'Reilly Media," O’Reilly Media, Inc., 30 set. 2005. [Online]. Disponível: . Acesso em: 06 mar 2016. [4] V. Cerf, Y. Dalal and C. Sunshine, "SPECIFICATION OF INTERNET TRANSMISSION CONTROL PROGRAM," 1974. [Online]. Disponível: https://tools.ietf.org/html/rfc675. Acesso em: 06 mar. 2016. [5] International, ECMA, "ECMAScript® 2015 Language Specification," 2015. [Online]. Disponível: . Acesso em: 06 mar. 2016. [6] W3C, "HTML 4.01 Specification," W3C, 24 dez. 1999. [Online]. Disponível: . Acesso em: 06 mar. 2016. [7] W3C, "Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification," W3C, 07 jun. 2011. [Online]. Disponível: . Acesso em: 06 mar. 2016. [8] W3C, "The XMLHttpRequest Object," W3C, 05 abr. 2006. [Online]. Disponível: . Acesso em: 06 mar. 2016. [9] W3C, "Extensible Markup Language (XML) 1.0 (Fourth Edition)," W3C, 16 ago. 2006. [Online]. Disponível: . Acesso em: 06 mar. 2016.

18 •

capítulo 1

[10] D. Crockford, “RFC 4627 - The application/json Media Type for JavaScript Object Notation (JSON),” IETF, 07 2006. [Online]. Disponível: . Acesso em: 06 mar. 2016. [11] W3C, "Document Object Model (DOM) Level 1 Specification (Second Edition)," W3C, 29 09 2000. [Online]. Disponível: . Accessed: 06 mar. 2016. [12] W3C, "World Wide Web Consortium (W3C)," W3C, 2016. [Online]. Disponível: . Acesso em: 03 jun. 2016. [13] The jQuery Foundation, "jQuery," The jQuery Foundation, 2016. [Online]. Disponível: . Acesso em: 06 mar. 2016. [14] Microsoft, “Home : The Official Microsoft IIS Site,” Microsoft, 2016. [Online]. Disponível: . Acesso em: 06 mar. 2016. [15] The Apache Software Foundation., “Welcome! - The Apache HTTP Server Project,” The Apache Software Foundation., 2016. [Online]. Disponível: . Acesso em: 06 mar. 2016. [16] Microsoft, “Microsoft – Home Page oficial,” Microsoft, 2016. [Online]. Disponível: . Acesso em: 06 mar. 2016. [17] Microsoft, “Active Server Pages,” Microsoft, 2016. [Online]. Disponível: . Acesso em: 06 mar. 2016. [18] Microsoft, "[MS-ASP]: ASP.NET State Server Protocol," Microsoft, 2106. [Online]. Disponível: . Acesso em: 06 mar. 2016. [19] Adobe, “Flash Player | Adobe Flash Player | Overview,” Adobe Systems Software Ireland Ltd, 2016. [Online]. Disponível: . Acesso em: 06 mar. 2016.

capítulo 1

• 19

20 •

capítulo 1

2 XHTML e CSS

2.  XHTML e CSS Neste capítulo introduziremos o XHTML como padrão que possibilita a desenvolvedor de software construir páginas Web coesas com o auxílio do HTML e XML. No XHTML, as tags tradicionais do tipo HTML definem o layout das páginas e seu conteúdo, e as partes XML mapeiam as regras de validação do documento. Mas para desenvolver um documento XHTML é necessário ter os conceitos sobre XML e HTML que serão introduzidos neste capítulo. Uma vez construído o documento XHTML iremos submetê-lo a validação utilizando a página Web que a W3C mantém com tal finalidade. E por fim, utilizaremos o padrão CSS para formatar os elementos da página XHTML.

OBJETIVOS •  Analisar ferramentas, metodologias, e estratégias de desenvolvimento de websites objetivando trazer as técnicas empregadas no mercado de trabalho; •  Construir documentos XHTML coesos; •  Conceitos sobre XML, HTML e CSS.

2.1  XHTML O eXtensible HyperText Markup Language (XHTML) [1] é o padrão que possibilita ao desenvolvedor de software construir páginas Web coesas com o auxílio do HTML e XML. No XHTML, as tags tradicionais do tipo HTML definem o layout das páginas e seu conteúdo, e a parte XML mapeiam as regras de validação do documento. Após a criação de um documento XHTML é possível submetê-la a validação e como resultado é indicado se a página construída é válida ou não, baseada nas regras preestabelecidas. Mas qual é o benefício de se construir páginas de Internet coesas? Sem dúvidas, a principal delas é manter a usabilidade e a experiência do usuário, independentemente do navegador de Internet que o mesmo esteja utilizando. Os navegadores comumente suportam o padrão XHTML.

22 •

capítulo 2

O objetivo desta seção é criar um documento XHTML e submetê-lo para a validação, mas pra isso precisamos entender o que é um XML e conhecer as principais tags HTML. 2.1.1  XML O XML [2] é um documento do tipo texto que é estruturado em nós hierárquicos aninhados com o propósito de armazenar valores. Para um melhor entendido, vamos exemplificar. Imagine um proprietário de uma concessionária de veículos que deseja construir uma lista de carros disponíveis para venda e como objetivo deseja descrever tal lista no formato XML. Cada carro possui os seus atributos que deverão constar na lista como cor, modelo e etc. A figura abaixo ilustra a criação do arquivo XML que representa a coleção de veículos da concessionária, observe que a construção do arquivo é feita através de um editor de texto comum, assim é possível listar e descrever objetos do mundo real em formato legível ao ser humano.

Figura 2.1  –  XML Exemplo (Coleção de Carros).

No XML exemplo (Coleção de carros) define-se a lista de veículos (Gol e o Onix), sendo o nó “” que determina o início da coleção e o “” o fim. Cada carro é representando na coleção pelo nó inicial “” e final “”, observe que o nó que determina a lista de carros está no plural

capítulo 2

• 23

“... ”, pois contém vários veículos, já os nós aninhados ao mesmo é descrito no singular “...”, e determina apenas e somente um veículo. Esta abordagem é uma boa prática, pois facilita a leitura do XML. Um veículo possui as suas características, como cor, modelo e ano de fabricação, no XML é possível notar que os nós aninhados ao nó “” descreve tais valores. Assim, o nó “” mantém o valor do fabricante do veículo e os demais nós aninhados descrevem os outros atributos como modelo, identificador (codigo), ano, ano do modelo e cor. Quando o proprietário da concessionária desejar adicionar novos veículos a sua lista, basta replicar o nó do tipo carro aninhado ao nó carros. Exercício: Construa um arquivo XML baseando-se na figura 2.1, salve-o com o nome “carros.xml” e abra-o no navegador de Internet. O resultado deve ser algo similar ao que é mostrado na figura abaixo.

Figura 2.2  –  XML Coleção de Carros Apresentado pelo Navegador.

24 •

capítulo 2

Após o desenvolvimento da lista de veículos, o proprietário da concessionária ampliou o seu negócio aquisitando uma nova concessionária em outra cidade e deseja que o XML seja modificado para listar os veículos de ambas as concessionárias. Na nova versão do XML (figura 2.3), é legível que temos uma coleção de concessionárias, sendo o nó “” que representa a lista e o nó “” representa cada concessionária. Neste exemplo, temos duas concessionárias de nomes Loja 01 e Loja 02, localizadas em São Paulo e Recife respectivamente. Para definir os nomes e as localizações (cidades) de uma concessionária é utilizado o recurso de atributos. O nó concessionaria tem dois atributos nome e cidade, e para determinar o valor de um atributo basta adicioná-los entre aspas após o sinal de igual (=), no caso da primeira concessionária temos nome="Loja 01", onde o atributo é o nome e o valor é Loja 01.

Figura 2.3  –  XML Exemplo (Coleção de Concessionárias / Carros).

capítulo 2

• 25

Na primeira linha do novo XML também foi adicionado o XML prolog, onde se define os tipos de caracteres que podem ser utilizados na construção do XML, sendo o atributo encoding que estabelece a lista de caracteres válidos para o XML. Imagine que você esteja descrevendo um XML utilizando o idioma Grego, caracteres especiais serão usados e o enconding específico deverá ser aplicado, para este caso o ISO-8859-7. No exemplo foi atribuído o valor de enconding ISO8859-1 ou conhecido como Latin-1, suporte a caracteres ASCII e incrementa o suporte aos idiomas Portugueses e extensíveis a Francês, Italiano e etc. Quando não especificado o encoding padrão é o UTF-8, que suporta a cadeia de caracteres básico dos idiomas Chinês e Coreano. Nestes exemplos, nota-se que o XML mantém o conteúdo de forma simples e legível, permitindo a leitura por seres humano, além da possibilidade de criação sem limitação de tags aninhadas umas às outras de forma hierárquica. 2.1.2  XML Schema Uma outra característica importante do XML é capacidade da validação dos dados, um XML pode ser facilmente editado e após a conclusão do mesmo, é possível validar se o mesmo foi construído obedecendo regras pré estabelecidas como a hierarquia ou ainda se um determinado campo possui somente valores numéricos. O validador do XML é nomeado schema e também é um arquivo do tipo XML. A figura abaixo ilustra a estrutura básica de um XML schema, sendo “...” o local que as regras serão adicionadas. ... Figura 2.4  –  Estrututura básica de um XML Schema.

A hierarquia do XML a ser validado deve ser mapeada no arquivo schema, no XML exemplo de concessionárias, existe uma sequência bem definida que é concessionarias > concessionaria > carros > carro. No arquivo schema deve ser especificado tal sequência, a figura 2.5 mostra a regra para o primeiro nó do XML exemplo, o nó concessionaria.

26 •

capítulo 2

... Figura 2.5  –  Elemento básico para a regra de validaçâo da hierarquia.

Para criar a regra de validação hierárquica basta aninhar o elemento básico da hierarquia aos nós obedecendo a sequência estabelecida no nó XML exemplo. > regra1 regra2

capítulo 2

• 27

Figura 2.6  –  Regra de validação hierárquica para o xml exemplo de concessionarias.

A figura 2.6 especifica o XML schema para validação da hierarquia do XML exemplo de concessionárias, dois marcadores (regra1 e regra2) foram adicionados e serão substituídos posteriormente por regras adicionais durante o desenvolvimento do texto. Ainda, dois atributos maxOccurs e minOccurs foram adicionadas as regras dos nós concessionaria e carro, tais atributos especificam o limite máximo e mínimo de ocorrências dos nós dentro do XML a ser validado. Para definir que uma lista não possui um limite máximo de ocorrências basta utilizar o valor unbounded, se necessário um valor pode ser atribuído para especificar o número máximo de ocorrências e a mesma regra é válida para o limite mínimo de ocorrências. Uma vez definida as regras de validação da hierarquia são necessárias validar os elementos que mapeiam as características do carro. O XML exemplo de concessionárias define as características do carro com nós anexados ao nó pai carro (código, fabricante, modelo, ano, ano_modelo e cor). Adicionalmente, uma regra de tipificação deve ser criada, ou seja, no ano do carro não pode ser especificado um texto e sim um valor numérico. A figura 2.7 ilustra as regras para validação dos atributos do carro para o XML exemplo de concessionarias.
name="codigo" type="xs:short"/> name="fabricante" type="xs:string"/> name="modelo" type="xs:string"/> name="ano" type="xs:short"/> name="ano_modelo" type="xs:short"/> name="cor" type="xs:string"/>

Figura 2.7  –  Regras de validação dos atributos do nó carro para o xml exemplo de concessionarias.

28 •

capítulo 2

As regras estabelecidas na figura 2.7 compõe o marcador regra 1 da figura 2.6, assim estabelecendo que os atributos do carro devam estar anexados ao nó pai carro. A figura 2.7 estipula que os nós modelo e cor devem ser do tipo texto (todos com o type="xs:string") e os demais devem ser valores numéricos (type="xs:short"). A última regra a ser adicionada é a obrigatoriedade da utilização dos atributos nome e cidade no nó concessionaria. Figura 2.8  –  Regras de validação dos atributos do nó concessionária para o xml exemplo de concessionarias.

A figura 2.8 estabelece a regra2 da figura 2.6 e define que os nós nome e cidade são do tipo texto e são obrigatórios através do atributo use configurado com o valor required, para especificar atributos opcionais deve ser utilizado o valor optional. Sendo atributos requeridos, ao omiti-los no XML a ser validado, o schema irá indicar a falta do mesmo. Assim conclui-se o xml schema que valida o XML exemplo de concessionárias apresentado. 2.1.3  HTML O HTML é um padrão de descrição de documentos para a Web, comumente chamadas de páginas Web, um documento HTML é composto por tags HTMLs e cada tag descreve o conteúdo diferente dentro do documento. Figura 2.9  –  Exemplo código HTML.

capítulo 2

• 29

A tabela 2.6 ilustra a estrutura básica de uma página HTML. •  A declaração DOCTYPE define a declaração do documento sendo do tipo HTML5. •  Todo o conteúdo entre as tags e descreve o documento HTML •  O texto entre e disponibiliza as informações sobre o documento •  Os valores contidos entre configura o título do documento •  O conteúdo disposto entre as tags e descreve o conteúdo visível da página Web. •  A tag input define um controle de entrada de valores com o valor pre determinado “Texto editável”. Não é obrigatório no documento HTML, apenas adicionado pra ilustrar a adição de elementos na página Web.

Figura 2.10  –  Visualização da página html no navegador de internet.

O objetivo do navegador de Internet é ler arquivos HTMLs e mostrá-los, como ilustra a figura 2.10, o navegador interpreta as tags HTMLs contidas no documento para determinar como mostrar o conteúdo ao usuário. A tabela 2.1 mostra a evolução das versões do HTML ao longo dos anos, observe que durante muitos anos não houve evolução entre as versões XHTML e a versão 5 do HTML. Devido ao suporte da nova especificação (HTML5) por parte dos navegadores, os desenvolvedores começam a adotar o novo padrão.

30 •

capítulo 2

VERSÃO

ANO

HTML HTML 2.0 HTML 3.2 HTML 4.01 XHTML HTML5

1991 1995 1997 1999 2000 2014

Tabela 2.1  –  Evolução das especificações HTML

Para que o navegador identifique pra qual versão HTML o documento foi descrito é necessário especificar o DOCTYPE específico. A tabela 2.2 apresenta o DOCTYPE para cada especificação HTML. VERSÃO

DOCTYPE

HTML5 Tabela 2.2  –  Doctype especìfico por versão do HTML

2.1.4  Especificando e validando o XHTML Com as definições dos conceitos sobre XML e HTML, podemos evoluir na definição do XHTML que nada mais que a utilização das duas especificações para construção de páginas para Web coesas. 2.1.4.1  Especificando As principais diferenças entre um documento HTML e XHTML são: •  Estrutura do documento – XHTML DOCTYPE é obrigatória – O atributo xmlns no elemento é obrigatório – Os elementos , ,

•  Elementos XHTML – Devem ser coesos ao especificar o aninhamento entre os elementos Correto:

Texto em itálico

Incorreto:

Texto em itálico

–

Sempre devem ser fechados

Correto: Texto em itálico Incorreto: Texto em itálico

–

Elementos devem ser especificados em letras minúsculas

Correto: Texto em itálico Incorreto: Texto em itálico

•  XHTML Attributes – Os atributos devem ser especificados em letras minusculas Correto:

Texto qualquer

Incorreto:

Texto qualquer

–

Obrigatório o uso de aspas duplas para especificar o valor

Correto:

Texto qualquer

Incorreto:

Texto qualquer

32 •

capítulo 2

–

É necessário especificar sempre o valor

Correto: Incorreto:

2.1.4.2  Validando Como descrito nas seções anteriores o documento XHTML é um XML com regras mais restritas na utilização das tags HTMLs para compor uma página Web. O elemento DOCTYPE especifica as regras de validações, sendo o schema do documento XHTML. Existem algumas variações de schemas para validação de documentos XHTMLs, seguem as possibilidades: •  XHTML 1.0 Strict – Permite a utilização de todos elementos HTMLs e atributos, porém exclui a utilização dos elementos obsoletos da especificação HTML e dos seguintes elementos b (negrito), i (itálico), tt (elemento utilizado para aninhar textos), sub (subscrito), sup (sobrescrito), big (fonte grande), small (fonte pequena) e hr (linha horizontal). Segue o DOCTYPE a ser adicionado no documento XHTML.

•  XHTML 1.0 Transitional – Emprega todos elementos HTMLs e atributos, incluindo elementos obsoletos, b, i, tt, sub, sup, big, small e hr. Este DOCTYPE é mais flexível, pois possibilita mesmo um documento que utilize tags obsoletas ser validado.

capítulo 2

• 33

•  XHTML 1.0 Frameset – É equivalente ao validador XHTML 1.0 Transitional, mas permite a utilização de conteúdo com elementos frameset. O frameset é utilizado para definição de layouts.

•  XHTML 1.1 – É equivalente ao validador XHTML 1.0 Strict, mas permite a adição de módulos, como por exemplo, suporte a linguagem de programação ruby para idiomas do leste asiático.

O processo para validar um documento é executado no site da organização W3C, segue a sequencia para a validação de um documento XHML: •  Acesso o site https://validator.w3.org/#validate_by_input •  Digite um documento, onde esta indicado “Enter the Markup to validate”, segue a referencia para utilização: Negrito

34 •

capítulo 2

•  Selecione a opção “Check” para validar o documento. •  Neste caso, o site indicará que é um documento válido, com a seguinte mensagem: “This document was successfully checked as XHTML 1.0 Transitional!” •  Retorne a página anterior, modifique o exemplo substituindo o DOCTYPE do para o do XHTML 1.0 Strict.

•  O site indicará um documento inválido com a seguinte mensagem: “Error found while checking this document as XHTML 1.0 Strict!”. Vá até o fim da página que o site informará a falha. Neste exemplo, o elemento b esta sendo utilizado e o validador XHTML 1.0 Strict restringe a sua utilização. Assim concluímos o objetivo da seção, de criar um documento XHTML e submete-lo a validação.

2.2  CSS O HTML foi criado com o objetivo de especificar o conteúdo das páginas Webs e não a formatação como cores e fontes. Mas na versão HTML 3.2 tags de formatação foram adicionadas e isso se tornou uma grande confusão no desenvolvimento de sites, pois a formatação era configurada em cada página e caso deseja-se modificar a cor ou atributos referentes a formatação do site era necessário modificar todo os arquivos. Para resolver este problema a W3C criou o CSS e removeu a formatação das páginas HTMLs. Normalmente as formatações são salvas em um único arquivo com extensão .css, compartilhado para todo o site, facilitando a manutenção da mudança de estilo de forma centralizada. 2.2.1  Sintaxe O CSS tem o compromisso de definir as formações que são interpretados pelos navegadores. A sintaxe do CSS é dividida em três partes: •  Seletor: O seletor é usado para localizar no documento o(s) elemento(s) para qual ou quais a formatação será aplicada. Pode-se pesquisar por id, classe, atributo e etc do elemento. capítulo 2

• 35

•  Propriedade: É o estilo que será modificado, como cor, fonte e etc. •  Valor: É o valor que será aplicado a propriedade, no caso da fonte seria o tamanho da mesma. Um exemplo é apresentado: h1 { color: red; }, onde h1 é o seletor, color é a propriedade e red o valor. A cor vermelha será aplicada a todos elementos h1 da página Web. Adicionalmente, múltiplas propriedades podem ser configuradas, além da cor vermelha deseja-se que o alinhamento do texto seja centralizado, basta adicionar a nova propriedade / valor ao estilo separadas por “;”, conforme exemplo: h1 { color: red; text-align: center; }. 2.2.2  Seletor Um estilo pode ser aplicado para um único elemento no documento ou para múltiplos elementos, sendo o seletor quem determina para qual ou quais elementos a formatação deve ser aplicada. •  Para todos os elementos de um mesmo tipo. No exemplo abaixo todos os elementos do documento HTMLs do tipo p utilizarão o estilo abaixo. p { color: green; } •  Para um elemento em específico na tela, utilizando o id. O atributo id deve ser único entre todos os elementos da tela. Utiliza-se o símbolo # para especificar o critério de pesquisa por id, neste exemplo tem-se um elemento no documento com id = “seletorcomId” e a aplicação da formatação será específica ao mesmo. #seletorcomId { text-align: center; color: red; } •  Por classe. Um mesmo estilo pode ser utilizado por vários elementos no documento, para definir uma classe utilize o caracter ponto. Como exemplo abaixo: .tituloTabela { font-style: normal; } Assim, para aplicar a classe a tag HTML basta adicionar o atributo class especificando o valor da classe, como segue:

Titulo da tabela

2.2.3  Integrando estilo com a pagina web São três as formas que o CSS podem ser aplicados as páginas Web, sendo eles: •  CSS definido na própria página.

36 •

capítulo 2

No exemplo abaixo, a formatação é definida no elemento style, que deve ser adicionado ao elemento head. No exemplo abaixo, determina que todos os elementos do tipo p do documento são verdes.

Parágrafo 1

Parágrafo 2

•  No próprio elemento Utiliza-se o atributo style e especifica-se a formatação.

Parágrafo 1

Parágrafo 2

•  Arquivo externo Para referenciar um arquivo de estilo externo utiliza-se a tag HTML link com os atributos rel e href aninhado a tag head. O valor do atributo rel (stylesheet) determina que o link é um arquivo do tipo css e o valor href é a localização do arquivo. Neste caso, ambos arquivos o documento HTML e o arquivo estilos.css estão dispostos no mesmo diretório.

capítulo 2

• 37

Título

SubTítulo 1

SubTítulo 2

Arquivo estilos.css: O arquivo especifica dois estilos, o primeiro #titulo é aplicado pra apenas um elemento no documento, com id igual a titulo. O segundo estilo .subtitulo é do tipo classe e dois elementos utilizam tal formatação, observe que no documento HTML dois elementos do tipo p utilizam o atributo class com os valores subtitulo. #titulo { font-size: 160%;color:blue; } .subtitulo { font-size: 80%;color:black; }

A terceira técnica de formatação utilizando um arquivo externo é mais comumente utilizada, pois o arquivo estilos.css pode ser referenciado em mais de uma página Web, centralizando a formatação de várias páginas em um único local.

ATIVIDADES 01. É correto afirmar que o XHTML é apenas um HTML? Justifique. 02. Das opções abaixo, o que define um arquivo XML. a) ( ) Documento do tipo texto b) ( ) O encoding padrão quando não especificado é o Latin-1 c) ( ) Schema é o arquivo utilizado para formatar o XML d) ( ) Não legível ao ser humano

38 •

capítulo 2

03. É possível validar um XML com uma hierarquia com mais de um nível hierarquico? Explique. 04. Sobre o HTML, assinale a(s) alternativa(s) correta(s) a) ( ) quando usado define que o documento HTML utiliza a especificação 4.01 do HTML b) ( ) O título de um documento html de ser posicionado entre as tags c) ( ) As tags head e body podem se repetir d) ( ) A partir de 2014 somente a versão HTML5 deve ser utilizada 05. Para validar um documento XHTML é necessário criar um arquivo schema externo? Justifique. 06. Sobre o CSS, assinale a(s) alternativa(s) correta(s) a) ( ) Não é um padrão W3C b) ( ) Múltiplas propriedades podem ser configuradas na definição de um estilo c) ( ) Pode-se definir o estilo no próprio documento XHTML d) ( ) O seletor define qual página será formatada

REFLEXÃO Neste capítulo introduzimos quatro padrões XTHML, XML, HTML e CSS, utilizados amplamente no mercado de trabalho pra construção de páginas Web. A adoção de padrões no desenvolvimento de páginas estabelece regras para a criação dos documentos, elevando o nível de profissionalismo do produto final. Ao aplicar os conceitos aqui apresentados neste capítulo, é possível construir páginas Web coesas e organizadas, que obedecem tais padrões. Ainda, com a possibilidade de serem executadas e visualizadas de forma plena nos mais diversos navegadores de Internet disponíveis. Este capítulo tratou somente do conteúdo estático, mas é a base pra construção de páginas interativas, no próximo capítulo irá combinar os conceitos aqui apresentados juntamente com o Java Script e o DOM.

capítulo 2

• 39

LEITURA Aprenda a Criar Páginas Web com HTML e XHTML em 21 Dias Editora: Makron Books Autor: LAURA LEMAY ISBN: 8534614288 CSS - Cascading Style Sheets - Guia de Consulta Rápida - 3ª Ed. Autor: Amaral, Luis Gustavo Editora: Novatec Use a Cabeça - Html com CSS e Xhtml Autor: Freeman, Elisabeth; Freeman, Eric Editora: Alta Books

REFERÊNCIAS BIBLIOGRÁFICAS [1] W3C, “Tradução das normas XHTML 1.0 do W3C,” W3C, 26 jan. 2000. [Online]. Disponível: . Acesso em: 07 mar. 2016. [2] W3C, "Extensible Markup Language (XML)," W3C, 19 05 2015. [Online]. Disponível: . Acesso em: 12 mar 2016. [3] W3C, "World Wide Web Consortium (W3C)," W3C, 2016. [Online]. Disponível: . Acesso em: 12 mar 2016.

40 •

capítulo 2

3 Javascript e DOM

3.  Javascript e DOM Neste capítulo introduziremos a linguagem de programação JavaScript e o modelo de objetos de uma página Web, o DOM. O JavaScript é uma linguagem de programação cliente, executada no navegador de Internet e utilizada para construir páginas Web interativas. Através do DOM e JavaScript é possível manipular a formatação e o conteúdo dos elementos HTML e validar valores inseridos por usuários em formulários. Para construir páginas Web interativas é necessário utilizar o AJAX. O AJAX é um conjunto de técnicas XML/JSON e JavaScript, processadas nos navegadores de Internet para obter dados de forma assíncrona ou síncrona em servidores. Para um melhor entendimento, vamos construir um exemplo para obter a cotação do dólar e mostrar a taxa de conversão numa página Web de forma assíncrona. Assim, no final deste capítulo concluiremos como o JavaScript e o DOM são peças fundamentais na construção de páginas Web interativas.

OBJETIVOS •  Construir páginas HTML com códigos Javascripts; •  Utilizar o DOM, através do objeto document para manipular os elementos de uma página Web; •  Entender e implementar um exemplo que utiliza a técnica AJAX de requisições assíncronas a servidores HTTP.

3.1  Javascript JavaScript é a uma linguagem de programação cliente, é executada no navegador de Internet e utilizada para construir páginas Web interativas. Os princípios objetivos são manipular a formatação e o conteúdo dos elementos HTML, validar valores inseridos por usuários em formulários e requisitar dados em servidores remotos através do AJAX. Para alterar a formatação e o conteúdo dos elementos HTMLs é utilizado o mapa de objetos, o Document Object Model (DOM), que nada mais do que um modelo dos elementos dispostos na página HTML utilizado pelo JavaScript.

42 •

capítulo 3

Assim é possível navegar por todos os elementos de uma página com a possibilidade de modificar o conteúdo e a formatação. A validação de valores é feita através da programação JavaScript, onde as estruturas da linguagem são utilizadas, como fluxo condicional e loops, para averiguar se os valores inseridos num formulário por um usuário estão corretos antes de enviá-los ao servidor. O JavaScript juntamente com o AJAX permitiu que através dos navegadores de Internet fosse possível recuperar dados nos servidores, tornando as páginas mais interativas. A ideia é que os valores recuperados no servidor sejam utilizados para atualizar partes do conteúdo da página e não todo o conteúdo da página Web. Neste capítulo veremos como programar uma página Web interativa. 3.1.1  Adicionando código Javascript a uma página web Antes de iniciar a introdução da linguagem de programação JavaScript é necessário saber onde o código deve ser adicionado na página Web. O código JavaScript deve ser adicionado entre as tags ou de uma página HTML, todo a sequencia de programação é posicionada entre tags do tipo <script>. A figura 3.1 ilustra a inserção da tag <script> entre as tag . <script> function funcaoMensagem() { alert("Olá Mundo!"); } Figura 3.1  –  Tag <script> adicionada entre as tags .

capítulo 3

• 43

Faça você mesmo, digite o código HTML do exemplo anterior em um editor de texto, salve o arquivo com extensão .html e abra no seu navegador de Internet. O resultado deve ser uma página Web com um único botão, clique no botão e a mensagem “Olá Mundo!” será apresentada, o resultado da execução é apresentado na figura 3.2 A página Web da figura 3.1, tem um elemento HTML do tipo input com um atributo onclick que define o que será executado ao se clicar no elemento, no caso será invocada a função com nome funcaoMensagem que apresentará a mensagem ao usuário. O alert é uma função do próprio navegador de Internet que é utilizado para apresentar mensagens customizadas ao usuário.

Figura 3.2  –  Apresentação do resultado de uma mensagem utilizando o alert.

Modifique o exemplo da figura 3.1 e mova a tag <script> para dentro da tag e salve o arquivo, observe que o comportamento não deverá ser modificado, a mensagem “Olá Mundo!” deverá ser apresentada. Um recurso muito utilizado no desenvolvimento de páginas Web é criar um arquivo externo com todo o código JavaScript, assim é possível reutilizar o código em outras páginas Web e também possibilita a melhor organização separando o código HTML do JavaScript. A figura apresenta a implementação da separação do código HTML e JavaScript, observe que, a função de nome funcaoMensagem não esta disponível na página e sim no arquivo externo de nome meuArquivoJS.js disposto no mesmo diretório da página HTML. Para referenciar o arquivo externo basta adicionar o atributo src na tag <script>, sendo o valor, o nome do arquivo externo

44 •

capítulo 3

com o código JavaScript. Observe que ao retirar o código JavaScript separa-se a parte o conteúdo e a formatação da lógica de programação, tornando a visualização do código HTML mais limpo e organizado. <script src="meuArquivoJS.js"> Figura 3.3  –  Página HTML com Separação do HTML e Javascript.

Já na figura 3.4 apresenta o conteúdo do arquivo meuArquivoJS.js com a função de nome funcaoMensagem sendo implementada. Não existe um limite estipulado para a adição de funções ao arquivo .js. function funcaoMensagem() { alert("Olá Mundo! Versão 2!"); } Figura 3.4  –  Código Javascript Separado Da Página HTML.

3.1.2  Interagindo com o HTML O JavaScript possui alguns recursos que o permite acessar e alterar valores dos elementos HTMLs, atributos e o estilo. Na figura 3.5 é apresentada como o JavaScript interage com o código HTML. Ao abrir a página no navegador é mostrada o texto “Texto Original” juntamente com o botão Clique, ao selecionar o botão o texto é alterado para “Texto modificado!”.

capítulo 3

• 45

Texto original!

Clique Figura 3.5  –  Modificando o conteúdo HTML.

No atributo onclick do botão é embutido todo o código JavaScript, neste trecho de código é utilizado o objeto document, representante do documento HTML e do todos os seus elementos. Em seguida, utiliza-se o método getElementById, no qual executa uma procura pelo id do elemento no documento HTML. A procura retornará o elemento que possui o id “texto”, assim qualquer atributo do elemento poderá ser acessado ou modificado a partir do retorno da procura. Lembrando que o id deve ser único por página Web. O conteúdo do elemento é armazenado no atributo innerHTML, no qual é modificado para um novo valor “Texto modificado!”. O próximo passo é alterar um atributo de um elemento HTML, para exemplificar utilizaremos o atributo title que permite configurar um texto de ajuda quando o mouse é posicionado sobre o elemento na página Web. <script> function modificaTitle() { document.getElementById("botao").title="Seja bem vindo."; }

46 •

capítulo 3

Figura 3.6  –  Modificando um atributo HTML.

Neste exemplo o próprio botão modifica o seu texto de ajuda, ao abrir a página Web note que ao posicionar o mouse sobre o botão, o texto mostrado é “Capítulo 3”, após o clique, o texto é modificado para “Seja bem vindo.”. A alteração do estilo é muito comum em páginas Web, no próximo exemplo vamos desenvolver um controle de zoom simples, onde o usuário poderá aumentar ou diminuir o tamanho da fonte apenas alterando uma propriedade do estilo de um elemento HTML que é o font.size. Neste exemplo, um elemento do tipo p e dois botões são adicionados a página, o elemento p apresenta o texto e os outros dois botões controlarão o zoom do texto. A figura 3.7 apresenta o exemplo para controle de zoom. Para cada botão, uma função JavaScript é empregada (aumentaTamanhoFonte e diminuiTamanhoFonte), ambas modificam o tamanho da fonte do elemento p. <script> function aumentaTamanhoFonte() { document.getElementById("texto").style.fontSize = "x-large"; } function diminuiTamanhoFonte() { document.getElementById("texto").style.fontSize = "x-small"; }

capítulo 3

• 47

Capítulo 3

Figura 3.7  –  Modificando o estilo HTML.

O código JavaScript document.getElementById("texto") retorna o objeto que representa o elemento p. Para modificar o estilo, a propriedade style é utilizada, o que permite a alteração de qualquer estilo do elemento, no exemplo modificaremos o tamanho da fonte que é a propriedade fontSize. Através do style é possível acessar qualquer propriedade do estilo, como cor, cor de fundo, posição do elemento na tela e etc. A propriedade fontSize pode assumir os seguintes valores: xx-small, x-small, smallmedium, large, x-large e xx-large. Além dessas enumerações, pode ser configurado em pixels ou em percentagem. Observe no código HTML, que o estilo do tamanho da fonte é configurado medium para o elemento p, no caso style="font-size:medium”, este é o valor que será mostrado logo ao se abrir a página pelo navegador de Internet. Assim, concluímos que o estilo é configurado no próprio código HTML e pode ser modificado dinamicamente pelo JavaScript. 3.1.3  Validando Dados Nesta seção, o objetivo é apresentar como é executada a validação dos elementos HTML numa página HTML. Para um melhor entendimento, vamos configurar um exemplo de um simples somador de valores, onde o usuário insere valores e a soma é processada por uma função JavaScript.

48 •

capítulo 3

Somador

Soma <script> function soma() { var valorA = parseInt(document.getElementById("parcelaA").value); var valorB = parseInt(document.getElementById("parcelaB").value); document.getElementById("resultado").innerHTML = (valorA + valorB); } Figura 3.8  –  Somador de valores.

No exemplo da figura 3.8, a função de nome soma obtêm os valores dos elementos parcelaA e parcelaB, converte os valores numéricos aplicando a função parseInt e atribui o resultado da soma ao elemento p. As parcelas são armazenadas em variáveis, sendo as mesmas valorA e valorB. Para criar uma variável, basta adicionar a palavra reservada var, o nome da variável. Exemplo: var valorA; No exemplo, além da criação da variável, as mesmas são inicializadas com os seus respectivos valores. Para obter o valor numérico e executar a soma é necessário converter os valores digitados em valores numéricos inteiros, assim foi aplicada a função parseInt. Se a soma exigir números fracionários, pode-se utilizar a função parseFloat. Outra função, muito aplicada quando validamos valores numérico é a função isNaN. Dado um valor numérico ou texto retorna se o mesmo é um texto

capítulo 3

• 49

ou número, da seguinte forma: quando verdadeiro é um texto e quando falso é um valor numérico. Caso os valores não tenham sido convertidos para numéricos, qual seria o comportamento da função soma? Na verdade, os valores não seriam somados e sim concatenados, ou seja, caso o usuário digitasse os valores 12 e 5, não seria apresentado o valor 17 e sim 125. Remova a conversão e verifique. Ainda, execute a soma de valores numéricos fracionários e note que o resultado da soma é processada pela parcela inteira dos números. Execute outro teste, entre com valores não numéricos e o resultado deverá ser NaN (Not A Number), ou seja, o resultado da soma não é um número. Agora, vamos incrementar um pouco mais o nosso exemplo, para o suporte de números fracionários e a validação para entrada de valores não numéricos. function soma() { var valorA = parseFloat(document.getElementById("parcelaA").value); var valorB = parseFloat(document.getElementById("parcelaB").value); if (isNaN(valorA) || isNaN(valorB)) { document.getElementById("resultado").innerHTML = "Verifique a entrada dos valores."; } else { document.getElementById("resultado").innerHTML = (valorA + valorB); } } Figura 3.9  –  Função Exemplo de Soma.

A figura 3.9 apresenta a solução para a soma de números fracionários e validação de valores não numéricos. A função parseInt foi substituída pela função parseFloat, o que resolve a soma de valores fracionários. Para validar a entrada de valores não numéricos é empregada a função isNaN. Se uma das duas variáveis valorA ou valorB forem texto, a mensagem “Verifique a entrada de valores.” será apresentada, caso os valores forem numéricos a soma será executada.

50 •

capítulo 3

A linha “if (isNaN(valorA) || isNaN(valorB))”, verifica as parcelas inseridas são textos, se verdadeiro a mensagem de validação é mostrada, e se falso a soma é executada. Observe que o operador “||” é equivalente a uma operação ou, assim sendo uma das parcelas não numérica, a soma não será executada. Além da opção “||” (Ou), existem as seguintes opções de operadores lógicos: && (E) e ! (Negado). São muito utilizados para validação de valores e fluxo da programação JavaScript, os operadores de comparação. A tabela 3.1 apresenta os operadores combinacionais, considere o valor numérico 9 para os exemplos de comparação. OPERADOR == === != > < >= <=

DESCRIÇÃO Igual Além da verificação dos valores, averigua o tipo do dado (numérico, texto, data etc.) Não igual Maior que Menor que Maior ou igual que Menor ou igual que

COMPARAÇÃO

RESULTADO

x == 9

Verdadeiro

x === 9

Verdadeiro

x === “9” x != 7 x > 10 x < 10 x >= 9 x <= 9

Falso Verdadeiro Falso Verdadeiro Verdadeiro Verdadeiro

Tabela 3.1  –  Operadores de Comparação.

3.1.4  AJAX O AJAX é um conjunto de técnicas XML/JSON e JavaScript, processadas nos navegadores de Internet para obter dados de forma assíncrona ou síncrona em servidores, com o objetivo de construir páginas Web interativas. Para um melhor entendimento, vamos construir um exemplo para obter a cotação do dólar e mostrar a taxa de conversão numa página Web de forma assíncrona. Para obter o valor da cotação do dólar, utilizaremos o Yahoo Query Language (YQL) [1]. O objetivo do YQL é construir pesquisas nas mais diversas categorias, desde financeiras, como obter a cotação do dólar, até listar os restaurantes italianos disponíveis em uma determinada região da cidade. No site do YQL é possível selecionar a categoria da pesquisa, configurar qual é o formato da lista (XML ou JSON) e por fim uma url é disponibilizada para ser usada no desenvolvimento de aplicações.

capítulo 3

• 51

A figura 3.10 apresenta a url construída no YQL para o retorno em XML da cotação da moeda estrangeira frente ao Real. http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo. finance.xchange%20where%20pair%3D%22USDBRL%22&format=xml&diagnostics =false&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys Figura 3.10  –  Url para obter a cotação do dólar.

Ao executar a url indicada no navegador de Internet, indicada na figura 3.10, o resultado será um XML como apresenta a figura 3.11.

Figura 3.11  –  Cotação do Dólar em Formato XML.

Observe na figura 3.11, que o elemento rate possui o atributo id igual a USDBRL, ou seja, indica o retorno da pesquisa, sendo a taxa de equivalência entre a moeda americana (USD) e o Real (BRL). Os nós aninhados indicam o valor da cotação (Rate), data da cotação (Date) e horário da cotação (Time). Uma vez estipulado a fonte de dados, voltamos a nossa a atenção ao lado cliente, o código JavaScript responsável por obter os dados no servidor e apresentá-los ao usuário.

52 •

capítulo 3

O objeto responsável por fazer requisições em servidores remotos, a partir do navegadores de Internet é o XMLHttpRequest [2]. A tabela 3.12 apresenta como o objeto é criado. var xhttp = new XMLHttpRequest(); Figura 3.12  –  Criando o objeto AJAX.

Para enviar uma requisição remota pelo objeto XMLHttpRequest, dois métodos são utilizados, o open e o send. O método open possui três argumentos sendo eles: method, url e async. O argumento method pode ser configurado com as opções GET ou POST, já o argumento url configura o link remoto da requisição e o argumento asyn é configurado com os valores true ou false, para requisições do tipo assíncrona ou síncrona, respectivamente. O mais comum é utilizar requisições do tipo assíncrona. A figura 3.13 ilustra uma requisição assíncrona a uma url. var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20 from%20yahoo.finance.xchange%20where%20pair%3D%22USDBRL%22&format=xml&diagnostics=false&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys" xhttp.open("GET", url, true); xhttp.send(); Figura 3.13  –  Requisição Remota AJAX.

Ao executar a requisição, a resposta não é disponibilizada instantaneamente, existe a latência de redes e servidores até que a resposta esteja disponível ao cliente (navegador de Internet). xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById("resposta").innerHTML=xhttp.responseText; } }; Figura 3.14  –  Manipulando a Resposta AJAX Assíncronamente.

capítulo 3

• 53

A forma assíncrona utiliza o evento onreadystatechange, já a síncrona não requer a utilização do mesmo. A grande desvantagem de se utilizar a forma síncrona é o travamento do processamento da execução do programa até que a requisição esteja disponível, já na forma assíncrona a requisição é executada, e o processamento do programa é liberado, logo que o resultado estiver disponível, o mesmo é processado por evento. A figura 3.14 ilustra a implementação do evento onreadystatechange, note que uma função é aninhada ao evento, xhttp.onreadystatechange = function() { ... }, onde os três pontos indicam a manipulação da resposta. O objeto XMLHttpRequest dispõe de atributos que disponibilizam o resultado do processamento da resposta no servidor, sendo eles readyState e status. O valor de status igual a 200 indica que o servidor http executou com êxito a requisição. Para apresentar o valor da cotação do dólar ao usuário, é necessário ter a certeza que o dado requisitado no servidor foi processado com sucesso, neste caso, o status deverá ser igual a 200 e o readyState igual a 4 simultaneamente. Para obter a resposta no formato XML, basta utilizar o atributo responseXML. Os possíveis valores do atributo readyState são listados na tabela 3.2. VALOR 0 1 2 3 4

DESCRIÇÃO Requisição não iniciada Conexão do servidor estabelecida Requisição recebida pelo servidor Executando requisição Processamento finalizado e resposta disponível

Tabela 3.2  –  Enumeração readyState.

O atributo readyState indica passo a passo o processamento da requisição pelo servidor, e a cada mudança do mesmo,o navegador de Internet é notificado por evento. A figura 3.15 apresenta o exemplo para obter a cotação do dólar e mostrar a taxa de conversão numa página Web de forma assíncrona.

?

Obtem cotação <script>

54 •

capítulo 3

function obterCotacao() { var xhttp = new XMLHttpRequest(); var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%3D%22USDBRL%22&format=xml&diagnostics=false&env=store%3A%2F%2Fdatatables. org%2Falltableswithkeys"; xhttp.open("GET", url, true); xhttp.send(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById("resposta").innerHTML=xhttp.responseText; } }; } Figura 3.15  –  Página exemplo para obter a cotação do dólar.

3.2  DOM O DOM [3] é uma plataforma de interface gráfica padrão que permite aos programas e scripts acessar dinamicamente e atualizar o conteúdo, estrutura, e formatação de uma página de Internet. Em termos práticos, quando o navegador de Internet carrega uma página, automaticamente é criado o modelo de objetos. Através deste modelo é possível manipular todos os elementos HTMLs através dos objetos, propriedades, métodos e eventos do elementos HTMLs. Este modelo é acessível através do objeto pai, o document. Na linha document.getElementById("resposta").innerHTML=xhttp.responseText; da figura 3.15, observe que foi utilizado o objeto document e o método getElementById para localizar dentro da página HTML o elemento com id igual a resposta. A propriedade innerHTML foi alterada com a cotação do dólar. O objeto document é a raiz da página, a partir dele é possível pesquisar, modificar, alterar e remover elementos, além do conteúdo e formatação, isso através dos métodos. A tabela 3.3 mostra os principais métodos do DOM.

capítulo 3

• 55

MÉTODO

DESCRIÇÃO

document.getElementById(id) document.getElementsByTagName(name) document.getElementsByClassName(name) document.createElement(element) document.removeChild(element) document.appendChild(element) document.replaceChild(element) document.write(text) document.getElementById(id).onclick = function(){código}

Pesquisa um elemento pelo id Pesquisa elementos pelo name Pesquisa elementos pela classe (estilo) Cria um elemento HTML Remove um elemento HTML Adiciona um elemento HTML Substitui um elemento HTML Escreve na página HTML um texto Adiciona dinamicamente o evento de clique a um elemento

Tabela 3.3  –  Principais Métodos do Objeto Document.

Para modificar os elementos é necessário acessar os métodos dos mesmos, a tabela 3.4 ilustra os métodos que alteram a formatação e conteúdo dos elementos. MÉTODO

DESCRIÇÃO

elemento.innerHTML = novo conteúdo Modifica o HTML interno do elemento HTML elemento.attribute = novo valor Ou elemenModifica o valor de um atributo do elemento to.setAttribute(ATRIBUTO, VALOR) elemento.style.property = novo estilo Modifica o estilo (formatação) do elemento Tabela 3.4  –  Alterando conteúdo e formatação dos elementos HTML.

ATIVIDADES 01. Assinale as alternativas corretas: a) ( ) Javascript é uma linguagem de programação executada nos navegadores de Internet. b) ( ) O AJAX pode ser utilizado para validar dados no servidor. c) ( ) Para alterar a formatação e o conteúdo dos elementos HTMLs é utilizado o mapa de objetos, o AJAX. d) (

) O DOM é apenas um elemento pouco utilizado na construção de páginas

Web interativas. 02. Qual é o proposito de se utilizar o método getElementById no DOM? 03. É necessário utilizar o evento onreadystatechange para requisições AJAX síncronas, explique?

56 •

capítulo 3

04. Como é criado um objeto para requisições AJAX? 05. Qual é o valor da enumeração do readyStatus que representa “Executando requisição” no objeto AJAX?

REFLEXÃO A construção de páginas de Internet interativas é uma realidade, ao se iniciar um desenvolvimento é necessário ter em mente que a página será executada em dispositivos móveis, tablets e computadores comuns e deverá ser interativa com o usuário. O conhecimento da linguagem Javascript, DOM e formatação de páginas são de fundamental necessidade para atingir este objetivo. O Javascript é muito poderoso no desenvolvimento de páginas Web, como podemos ver neste capítulo, a partir do Javascript é possível manipular todo o documento HTML, através do DOM. No próximo capítulo iremos explorar o jQuery, um framework Javascript utilizado por grandes empresas. O jQuery facilita a manipulação do documento e permite a construção de páginas que mantém a conformidade entre os vários navegadores de Internet.

LEITURA Título AJAX, RICH INTERNET APPLICATIONS E DESENVOLVIMENTO: Web PARA PROGRAMADORES Autores HARVEY M. DEITEL, PAUL J. DEITEL Editora Prentice Hall Brasil, 2009 ISBN 8576051613, 9788576051619 Aprenda a Criar Páginas Web com HTML e XHTML em 21 Dias Editora: Makron Books Autor: LAURA LEMAY ISBN: 8534614288 Título: AJAX com jQuery Subtítulo: Requisições AJAX com a simplicidade de JQuery

capítulo 3

• 57

Autor: Maurício Samy Silva Editora Novatec ISBN: 978-85-7522-199-0 Use a Cabeça - Html com CSS e Xhtml Autor: Freeman, Elisabeth; Freeman, Eric Editora: Alta Books Título: Jquery em Ação Autor: Bibeault, Bear; Katz, Yehuda Editora: Alta Books Título: Use a Cabeça (Iniciação Rápida) Ajax Editora: Alta Books ISBN: 9788576081937

REFERÊNCIAS BIBLIOGRÁFICAS [1] Yahoo, “YQL - Yahoo Developer Network,” Yahoo, 2016. [Online]. Disponível: . Acesso em: 20 mar. 2016. [2] W3C, “XMLHttpRequest Level 1,” W3C, 30 jan. 2014. [Online]. Disponível: . Acesso em: 20 mar. 2016. [3] W3C, “Document Object Model (DOM),” W3C, 19 01 2005. [Online]. Disponível: . Acesso em: 02 abr. 2016.

58 •

capítulo 3

4 Tecnologias clientes

4.  Tecnologias clientes Toda interatividade ocorre no lado cliente, nos navegadores de Internet. A principal tecnologia adotada atualmente para construção de páginas Web interativas é o JavaScript. Os navegadores suportam na sua totalidade o JavaScript, muitas aplicações são construídas com base no DOM, mas um grande problema surgiu neste cenário. Alguns navegadores acabaram especializando o uso da linguagem JavaScript saindo do padrão estipulado pelo W3C, assim tornou-se custoso manter a compatibilidade e a interatividade de uma página Web entre os vários navegadores. A biblioteca surgiu desta necessidade de se permitir a construção de páginas Web interativas independentemente do navegador. Outra benefício foi a adoção de facilitadores, como por exemplo, fazer requisições AJAX de forma mais simples comparada ao DOM. O jQuery é uma biblioteca JavaScript cliente amplamente utilizada por várias corporações mundo a fora, tornando-se um padrão para construção de páginas Web Interativas. O jQuery ainda facilita o desenvolvimento de páginas Web interativas, enquanto que no DOM são necessárias muitas linhas de código para construir uma determinada funcionalidade, a biblioteca possui métodos facilitadores para cumprir o objetivo. Uma outra tecnologia cliente muito adotada na década passada foi o Adobe Flash que surgiu como alternativa para aplicações de Internet Rica, mas logo após o desenvolvimento do JavaScript por grandes corporações como o Google caiu em desuso.

OBJETIVOS •  Executar e adicionar a biblioteca jQuery a página Web; •  Entender a sintaxe utilizado pelo jQuery; •  Desenvolver e compreender os eventos aplicados pela biblioteca jQuery; •  Manipular conteúdo e executar requisições AJAX via jQuery.

60 •

capítulo 4

4.1  jQuery jQuery [1] é uma biblioteca JavaScript que facilita o desenvolvimento de páginas Web interativas. O propósito é manipular elementos HTML, eventos, animação e AJAX de forma mais simples através de métodos expostos em Application Programming Interface (API), com a grande vantagem de suporte a múltiplos navegadores de Internet. Grande corporações empregam o jQuery como Google, Microsoft, IBM e Netflix. O jQuery possui os seguintes recursos: •  AJAX; •  Manipulação do documento HTML; •  Formatação; •  Eventos; •  Efeitos e animações; •  Utilidades. O jQuery facilita o desenvolvimento de páginas Web interativas, enquanto que no DOM são necessárias muitas linhas para construir uma determinada funcionalidade, a biblioteca possui métodos facilitadores para cumprir o objetivo. 4.1.1  Adicionando o Jquery à Pagina Web Há duas possibilidades de adicionar a biblioteca à sua página Web, como mostradas a seguir: •  Fazer o download do arquivo com extensão js diretamente no site [1]: Basta fazer o download da biblioteca do site e referenciá-la na tag <script>. O site dispõe para cada versão, duas possibilidades de download a versão de produção e desenvolvimento. A versão de produção é a versão recomendada, pois ela é comprimida e validada. Já a versão de desenvolvimento não é comprimida e esta no processo de validação (correções e codificação). O objetivo de se comprimir arquivos js é diminuir seu tamanho para otimizar a transferência da biblioteca a partir do servidor para os clientes.

capítulo 4

• 61

A figura 4.1, mostra um exemplo de como referenciar a biblioteca na página Web. Neste exemplo o arquivo da biblioteca esta no mesmo diretório da página Web.

<script src="jquery-1.12.2.min.js">

Figura 4.1  –  Adicionando o jquery à pagina web (Download do Site).

•  Referenciar diretamente de sites que hospedam a biblioteca: Caso não deseje fazer o download da biblioteca, pode-se referenciar o arquivo da biblioteca de forma direta em sites que o disponibilizam como Google e Microsoft. Na figura 4.2 é ilustrado como referenciar a biblioteca jQuery diretamente do Google. Caso deseje utilizar a biblioteca a partir do site da Microsoft, basta utilizar o seguinte link: "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/ jquery.min.js"> Figura 4.2  –  Adicionando o Jquery à Pagina Web (Google).

62 •

capítulo 4

O termo CDN (Content Delivery Network) é utilizado para esta prática de prover conteúdo através da Internet. 4.1.2  Sintaxe jQuery O principal objetivo do jQuery é localizar e manipular elementos da página Web. A sintaxe para executar tal funcionalidade é mostrada a seguir. Sintaxe: $(pesquisa).acao() •  A utilização do $ define o jQuery. Toda sintaxe jQuery utilizará tal caracter. •  A pesquisa é o critério para localizar os elementos na página Web, no jQuery há várias possibilidades de pesquisas, pelo id, pela classe e etc. •  A ação determina o que será executado no elemento, como a mudança da sua formatação e etc. Para um melhor entendimento, lista-se alguns exemplos: •  $("button").hide() – Localiza todos os elementos button e os oculta. •  $("#texto").hide() – Localiza o elemento com id igual a texto (id="texto") e o oculta. No DOM, utiliza-se o método document.getElementById para se localizar um determinado elemento com seu respectivo Id. •  $(".tituloTabela").hide() – Localiza todos os elementos com classe igual a tituloTabela e os oculta (class="tituloTabela"). •  $(this).hide() - Oculta o elemento corrente. Dependendo do contexto é possível utilizar a palavra this para se referenciar ao elemento que esta se manipulando, veremos alguns exemplos com a aplicação do this. 4.1.3  Evento de carregamento do documento É uma boa prática executar apenas pesquisas e manipular elementos nas páginas Web somente quando todo o seu conteúdo estiver sido completamente descarregado no cliente, para isso a biblioteca jQuery disponibiliza um evento de carregamento do documento. Na figura 4.3 é apresentado o evento ready do documento $(document).ready(function(){ ... });, observe o símbolo $ que define o jQuery, sendo o critério de pesquisa o próprio document (documento) e a ação ready. Na ação é criada uma função aninhada no qual o código deve ser inserido. Normalmente, as páginas Web construídas utilizam este evento.

capítulo 4

• 63

Ainda neste exemplo, note que a implementação do evento oculta somente o botão com id igual a “2” ao se carregar a página. Para ocultar todos os botões, ao se carregar a página, deve-se utilizar a seguinte sintaxe $("button").hide();, execute a alteração e faça você mesmo o teste. <script src="jquery-1.12.2.min.js"> <script> $(document).ready(function(){ $("#2").hide(); }); Botão 1 Botão 2 Botão 3 Figura 4.3  –  Evento Ready do Documento.

4.1.4  Eventos A biblioteca jQuery permite definir eventos a qualquer elemento da página Web, como por exemplo, o evento de clique de um botão. Na forma tradicional, deve-se adicionar o atributo onclick no código HTML referenciando a função JavaScript que executa o evento. Já na biblioteca, não existe a necessidade de adicionar o atributo onclick e muito menos declarar a função JavaScript, o evento é definido no próprio JavaScript e a execução é aninhada a definição.

64 •

capítulo 4

A figura 4.4 apresenta um exemplo de como definir eventos de clique a todos botões da página Web. Note que na notação $("button").click(function(){ ... } o símbolo $ define o jQuery, sendo o critério de pesquisa button (todos os botões da página) e a ação click. A implementação do evento click é definida por $(this).hide();, neste contexto é possível utilizar a palavra this para se referenciar ao elemento que foi pressionado e ocultando-o. <script src="jquery-1.12.2.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); }); Botão 1 Botão 2 Botão 3 Figura 4.4  –  Evento Clique.

Caso deseje individualizar o evento para cada botão, basta modificar o critério de pesquisa e utilizar o id como pesquisa. Na figura 4.5 é demonstrado a individualização. Nos botões 2 e 3 foi utilizado a ação fadeOut que oculta o elemento vagarosamente, podendo-se definir um tempo para o efeito.

capítulo 4

• 65

<script src="jquery-1.12.2.min.js"> <script> $(document).ready(function(){ $("#1").click(function(){ $(this).hide(); }); $("#2").click(function(){ $(this).fadeOut(); }); $("#3").click(function(){ $(this).fadeOut(2000); }); }); Botão 1 Botão 2 Botão 3 Figura 4.5  –  Evento Clique Individualizado.

Comparando a forma tradicional de construção de páginas com o jQuery é notório que o código HTML fica mais legível e limpo, separando-se o código HTML (formatação) e JavaScript em duas seções bem distintas do documento HTML. Além do evento click, a biblioteca dispõe de uma infinidade de eventos, como dblclick, mouseenter, mouseleave, mousedown, mouseup, hover, focus, blur e etc.

66 •

capítulo 4

4.1.5  Manipulando conteúdo e atributos Para manipular o conteúdo, a biblioteca jQuery disponibiliza três metódos: •  text() – Configura ou retorna o texto dos elementos selecionados. •  html() – Configura ou retorna o conteúdo HTML dos elementos selecionados. •  val() – Configura ou retorna o valor dos elementos selecionados <script src="jquery-1.12.2.min.js"> <script> $(document).ready(function(){ $("#1").click(function(){ alert($("#titulo").text()); }); $("#2").click(function(){ alert($("#titulo").html()); }); $("#3").click(function(){ alert($("#texto").val()); }); });

Parte do título esta em itálico.

Nome

Mostra texto Mostra HTML Mostra valor Figura 4.6  –  Manipulando Conteúdo.

capítulo 4

• 67

Na figura 4.6 é demonstrado a aplicação dos três métodos. Os botões 1 e 2 obtêm o conteúdo do elemento h2 de formas distintas. O botão 1 mostra somente o texto, já o botão 2 obtêm o código HTML, observe na mensagem do botão 2 que os elementos HTML são mostrados. O botão 3 extrai o valor do campo de edição e o mostra na mensagem. Edite o valor, clique no botão e verifique o valor da mensagem. Neste exemplo é obtido o conteúdo, ainda é possível configurar os valores dos elementos HTML. Conforme exemplos: •  $("#titulo").text("Olá Mundo!"); •  $("#titulo").html("Olá Mundo!"); •  $("#texto").val("Meu nome configurado..."); Um elemento pode possuir alguns atributos, para obter o valor de qualquer atributo, a biblioteca disponibiliza o método attr. <script src="jquery-1.12.2.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#portal").attr("href")); }); }); Mostra o link Figura 4.7  –  Lendo Atributos.

Na figura 4.7 apresenta a leitura do atributo href do elemento HTML portal. Note que o atributo href é passado ao método e o retorno do valor é apresentado pela mensagem.

68 •

capítulo 4

Assim, é possível ler qualquer atributo dos elementos HTML através de um único método (attr) da biblioteca. Para configurar o valor de um atributo de um elemento HTM, basta aplicar o mesmo método, como segue o exemplo a seguir. •  $("#portal").attr("href", "http://portal.estacio.br/home/aluno.aspx"); 4.1.6  AJAX As duas formas básicas de implementar o AJAX na biblioteca jQuery é utilizando get ou post. A forma de requisição get é utilizada somente para obter dados no servidor HTTP remoto e pode retornar dados que estão armazenados em cache, implementando uma requisição get HTTP. Já a requisição post pode ser usado para obter dados no servidor, mas nunca o cache é utilizado. Normalmente, é utilizado para enviar dados ao servidor. Nesta requisição, é executada um post HTTP. Para implementar o GET HTTP, o jQuery disponibiliza o método get, que possui a seguinte sintaxe: •  $.get(link,funcaoRetorno); – link é o recurso remoto do servidor HTTP – funcaoRetorno é a função que será processada o retorno da requisição A figura 4.8 apresenta um exemplo da utilização do método get. Note que a funcaoRetorno é aninhada a chamada do método get, e possui dois argumento de retorno, dados e estado. Os dados representam a resposta do servidor e o estado indica o resultado do processamento, se foi com sucesso ou falha. <script src="jquery-1.12.2.min.js"> <script> $(document).ready(function(){ $("button").click(function(){

capítulo 4

• 69

var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%3D%22USDBRL%22&format=xml&diagnostics=false&env=store%3A%2F%2Fdatatables. org%2Falltableswithkeys" $.get(url, function(dados, estado){ alert("Dados: " + dados + "\nEstado: " + estado); }); }); }); Requisição Figura 4.8  –  Requisição AJAX (GET).

Para implementar o POST HTTP, o jQuery disponibiliza o método post, que possui a seguinte sintaxe: •  $.post(link,dados,funcaoRetorno); – link é o recurso remoto do servidor HTTP – dados são os valores que são enviados ao servidor – funcaoRetorno é a função que será processada o retorno da requisição

$("button").click(function(){ $.post("url_qualquer", { cidade: "São Paulo" }, function(dados, estado){

70 •

capítulo 4

alert("Dados: " + dados + "\nEstado: " + estado); }); }); Figura 4.9  –  Requisição AJAX (POST).

A tabela 4.9 apresenta um exemplo da utilização do método post. A requisição post é análoga a get, com a única diferença que dados podem ser enviados ao servidor, no caso do exemplo é enviado a cidade com valor igual a São Paulo. A biblioteca ainda dispõe de mais um método para implementar requisições a servidores HTTP remotos, o método ajax. A seguir é apresentado a sintaxe do comando: $.ajax({nome:valor, nome:valor, ... }) A requisição pode ser configurada com uma lista de pares (nome/valor), os possíveis pares podem ser consultados no site de referencia da API da biblioteca [2]. A tabela4.10 apresenta um exemplo de requisição. $("button").click(function(){ $.ajax({ url: "url_qualquer", success: function(result){ $("div").html(result); } }); }); Tabela 4.1  –  Requisição AJAX (Método ajax).

O método ajax é mais comumente empregado comparada as demais formas, pois permite configurar com uma variedade de nome/valor tornando flexível a utilização do mesmo.

4.2  Adobe Flash CS3 O Adobe Flash CS3 é um sotware utilizado para criar conteúdo interativo para páginas Web, além da possibilidade de construir jogos para Internet. O aplicativo possibilita a criação de projetos do tipo Flash, como animações, apresentações ou questionários. capítulo 4

• 71

Este software faz parte do pacote Adobe Creative Suite da empresa Adobe, ele é um software proprietário que requer a compra de licença, adicionalmente é possível baixar um versão de teste e utilizá-la por 30 dias. O Adobe Flash surgiu como alternativa para aplicações de Internet Rica, mas logo após o desenvolvimento do JavaScript por grandes corporações como o Google caiu em desuso. A empresa Apple, por exemplo, não suporta este padrão nos seus produto, pois caracteriza como o proprietário, limitando o acesso a Internet. Uma alternativa bem eficaz a utilização do Flash é o HTML 5.

ATIVIDADES 01. Compare a utilização do DOM com o jQuery? Explique. 02. Qual é a principal função da utilização do evento de carregamento do documento? 03. Compare a forma tradicional de construção de páginas com o jQuery, referente a manipulação de Eventos. 04. Cite e comente os métodos que manipula o conteúdo de uma página Web via jQuery. 05. Qual é o método que manipula os atributos dos elementos HTMLs? 06. Explique as diferenças entre os métodos get e post para requisições AJAX via jQuery. 07. O método ajax é mais comumente empregado comparada as demais formas AJAX via jQuery, explique. 08. Qual é a alternativa a utilização do Adobe Flash CS3 para construção de páginas Web Interativas?

REFLEXÃO O jQuery é a biblioteca mais utilizada para construção de páginas Web interativa, pois facilita o desenvolvimento e permite a execução de uma página independemente do navegador que esteja executando. O conhecimento desta biblioteca por profissionais de front-end é

72 •

capítulo 4

de fundamental importância, através da biblioteca é possível criar páginas Web interativas poderosas. Compreender a implementação dos eventos e manipulação do conteúdo da página Web é um ponto de fundamental importância no desenvolvimento Web, neste capítulo foi apresentado a base do jQuery e os principais métodos com exemplos, mas não se limite ao que foi introduzido, pesquise no material complementar e aprofunde cada vez mais o seu conhecimento. Outro recurso apresentado foi o AJAX, muito comum nas aplicações Web, o jQuery possibilita a implementação de forma simples as requisições a servidores HTTP. No próximo capítulo iremos explorar os servidores HTTP Apache e IIS, responsáveis por prover o conteúdo e as páginas Web interativas. Ainda será apresentado uma implementação de requisição AJAX utilizando a técnica da Microsoft, o Aspnet.ajax.

LEITURA Título AJAX, RICH INTERNET APLICATIONS E DESENVOLVIMENTO: Web PARA PROGRAMADORES Autores HARVEY M. DEITEL, PAUL J. DEITEL Editora Prentice Hall Brasil, 2009 ISBN 8576051613, 9788576051619 Aprenda a Criar Páginas Web com HTML e XHTML em 21 Dias Editora: Makron Books Autor: LAURA LEMAY ISBN: 8534614288 Título: AJAX com jQuery Subtítulo: Requisições AJAX com a simplicidade de JQuery Autor: Maurício Samy Silva Editora Novatec ISBN: 978-85-7522-199-0 Use a Cabeça - Html com Css e Xhtml Autor: Freeman, Elisabeth; Freeman, Eric Editora: Alta Books

capítulo 4

• 73

Título: Jquery em Ação Autor: Bibeault, Bear; Katz, Yehuda Editora: Alta Books Título: Use a Cabeça (Iniciação Rápida) Ajax Editora: Alta Books ISBN: 9788576081937

REFERÊNCIAS BIBLIOGRÁFICAS [1] The jQuery Foundation, “https://jquery.com/,” The jQuery Foundation, 2016. [Online]. Disponível: . Acesso em: 02 abr. 2016. [2] The jQuery Foundation, “Query.ajax() | jQuery API Documentation,” The jQuery Foundation, 2016. [Online]. Disponível: . Acesso em: 03 abr. 2016. [3] Yahoo, “YQL - Yahoo Developer Network,” Yahoo, 2016. [Online]. Disponível: . Acesso em: 20 mar. 2016. [4] W3C, “XMLHttpRequest Level 1,” W3C, 30 01 2014. [Online]. Disponível: . Acesso em: 20 mar. 2016. [5] W3C, “Document Object Model (DOM),” W3C, 19 01 2005. [Online]. Disponível: . Acesso em: 02 abr. 2016.

74 •

capítulo 4

5 Tecnologias cliente servidor

5.  Tecnologias cliente servidor É muito bem definido a divisão de processamento na Web, uma porção é executada no navegador de Internet e a outra no Servidor. Neste capítulo estudaremos, a porção do Servidor e como dispor conteúdo em Servidores Web, como o IIS e o Apache. Um Servidor Web pode ser definido como aquele que responde as requisições HTTP (Hypertext Transfer Protocol) feitas por clientes HTTP. Um exemplo típico de cliente HTTP é o navegador de Internet. Sendo o protocolo HTTP uma peça fundamental, pois o HTTP é um protocolo de comunicação baseado no TCP/IP, que é usado para entrega de dados como arquivos HTML, imagens, resultado de pesquisas e etc., na Internet. Este é a base para a troca de comunicação de dados da Internet desde 1990. Os dois Servidores Web mais utilizados serão apresentados, o IIS da Microsoft e o Apache de código livre, iremos instalar, configurar e prover conteúdo pelos mesmos. O IIS pode prover páginas do tipo ASP.NET que é a plataforma de desenvolvimento da Microsoft para prover conteúdo de páginas Web interativas para servidores. E por fim estudaremos o Aspnet.ajax, sendo um conjunto de controles disponíveis no Visual Studio chamados “AJAX Extensions”, que permite a implementação do AJAX para páginas do tipo ASP.NET, que aceleram o desenvolvimento de páginas Web.

OBJETIVOS •  Definir o que é um Servidor Web; •  Entender os fundamentos do protocolo HTTP; •  Instalar, configurar e prover conteúdo pelos Servidores Web IIS e Apache; •  Implementar um exemplo utilizando os controles AJAX do Aspnet.ajax.

76 •

capítulo 5

5.1  Servidores web Um servidor web pode ser definido como aquele que responde as requisições HTTP (Hypertext Transfer Protocol) feitas por clientes HTTP. Um exemplo típico de cliente HTTP é o navegador de Internet. O protocolo HTTP é um protocolo de nível de aplicação para distribuição, colaboração e sistemas multimídias. Este é a base para a troca de comunicação de dados da Internet desde 1990. HTTP é bem genérico e pode ser usado estendido para outras aplicações, pois é baseado em requisições, respostas, tratamento de erros e cabeçalhos. Em termos gerais, o HTTP é um protocolo de comunicação TCP/IP, que é usado para entrega de dados como arquivos HTML, imagens, resultado de pesquisas e etc., na Internet. A porta padrão de comunicação é a 80, mas outras podem ser utilizadas. Prove uma maneira padronizada de comunicação entre computadores, como o navegador de Internet e o servidor. A especificação determina como o cliente construí uma requisição e envia ao servidor, e como o servidor deve responder a estas requisições do cliente. Características HTTP: •  Sem conexão: O cliente HTTP (navegador de Internet), inicializa uma requisição e após a requisição feita, o cliente desconecta do servidor e aguarda pela resposta. O servidor processa a requisição e restabelece a conexão com o cliente e envia a resposta a requisição. •  Independe mente do conteúdo: Isso significa, qualquer tipo de dado pode ser enviado pelo HTTP, desde que tanto cliente e servidor saibam manipular o conteúdo. Neste caso, o cliente na requisição deve especificar ao servidor o tipo de dado que irá trafegar. A requisição HTTP é composta somente por um cabeçalho, já a resposta do servidor é composta pelo cabeçalho e o corpo. Ainda existe um cabeçalho compartilhado entre requisição do cliente e resposta do servidor, sendo o GeneralHeader (Cabeçalho Geral).

capítulo 5

• 77

Figura 5.1  –  Cabeçalho de Requisição HTTP Cliente.

A figura 5.1 ilustra uma requisição HTTP, ao site http://inscricoes.estacio. br/, a partir do navegador de Internet Google Chrome. Note que o atributo Accept define os tipos de conteúdo aceitos na requisição pelo cliente. Outra informação importante é o User-Agent que defina a versão do navegador (cliente) que solicita a página. Já figura 5.2, apresenta a resposta do servidor HTTP. Observe algumas informações: •  Content-Length: Informa o tamanho do corpo da resposta, em bytes. O corpo define o conteúdo, o código HTML que será mostrado ao usuário. •  Server: Informa qual é o servidor HTTP que processou a requisição, neste caso é indicado o servidor IIS da Microsoft, versão 7.5. Sem mesmo ter acesso ao servidor é possível saber qual o tipo de servidor que processa a requisição. •  Content-Type: Define o tipo de conteúdo que o servidor esta enviando ao cliente, assim o cliente saberá com manipular o conteúdo enviado pelo servidor.

Figura 5.2  –  Cabeçalho de Resposta HTTP - Servidor.

78 •

capítulo 5

Parte do corpo de resposta HTTP é mostrada na figura 5.3, a partir da resposta o navegador de Internet a utiliza para compor a página para o usuário.

Figura 5.3  –  Corpo de Resposta HTTP - Servidor.

E a última parte da requisição HTTP é mostrada na figura 5.4. Este cabeçalho resume todo o processo de requisição/resposta entre cliente e servidor. Os seguintes campos são configurados: •  Request URL: Endereço HTTP do servidor que foi solicitada a requisição. •  Request Method: Neste caso foi utilizado a forma GET. O mais comumente aplicados são o GET e o POST. Outros métodos: HEAD, PUT, DELETE, CONNECT, OPTIONS e TRACE. •  Status Code: Indica se a página foi processada com sucesso. Neste caso 200 indica que foi recebida pelo servidor, entendida e processada. De forma genérica podemos dividir o status code em 5 classes: – 1XX: Informativa – Isso significa que a requisição foi recebida e o processamento esta em andamento. – 2XX: Sucesso – Indica processamento completo com sucesso. – 3XX: Redirecionamento – O cliente deve tomar ações adicionais para completar a requisição. – 4XX: Erro no cliente – Erro na requisição do cliente, possui sintaxe incorreta ou pode ser processada pelo servidor. capítulo 5

• 79

– 5XX: Erro no servidor – Falha ao executar uma tarefa no servidor. •  Remote Address: É o endereço de rede TCP/IP do servidor HTTP, todo dispositivo na Internet possui o seu endereço.

Figura 5.4  –  Cabeçalho General.

Para verificar estes cabeçalhos e o corpo de resposta no Google Chrome, execute os seguintes passos: 1. Abra o navegador. 2. Clique em F12 e abrirá uma nova janela, selecione a tab Rede (Network). 3. Digite o endereço do site desejado e aguardo completar a requisição. 4. Observe que várias requisições serão executadas, inclusive arquivos de imagens, arquivos js e o próprio site requisitado. 5. Localize o site (o primeiro da lista) e selecione o mesmo, observe os cabeçalhos (Headers) e corpo (Response). Após entender o que é o protocolo HTTP e como o mesmo funciona, pode-se dizer que o Servidor Web é um aplicativo disposto num equipamento que aceita requisições HTTP e os devolve ao cliente seguindo os padrões HTTP. Nas próximas seções duas implementações de Servidores Web, que são o IIS (Internet Information Services) e o Apache. 5.1.1  IIS O IIS é o servidor Web desenvolvido pela empresa Microsoft para seus sistemas operacionais, sua primeira versão foi introduzida na versão do sistema operacional Windows NT 3.51, mas veio de forma nativa na versão do Windows NT 4. A versão mais atual do IIS é a 10, disponível no Windows Servidor 2016. A principal função do IIS é disponibilizar uma plataforma para prover conteúdos de sites, serviços e aplicativos. Além de prover conteúdo para Web, o IIS é um servidor de FTP (File Transfer Protocolo). A partir de 2002, o IIS iniciou o seu suporte à tecnologia ASP.NET, tecnologia de desenvolvimento de páginas Web interativas para Internet da própria Microsoft.

80 •

capítulo 5

5.1.1.1  Instalação Nesta seção apresentaremos a instalação passo a passo do IIS 7 no Windows 7. 1. Vá até o painel de controle do Windows 2. Selecione a opção programas

Figura 5.5  –  Painel de Controle do Windows.

3. Selecione a opção Ativar ou desativar recursos do Windows

Figura 5.6  –  Painel de Controle do Windows (Ativando Recursos).

capítulo 5

• 81

4. Localize os “Serviços de Informações da Internet”, o IIS.

Figura 5.7  –  Localizando O Recurso IIS.

5. Selecione todas as opções de “Ferramentas de Gerenciamento da Web” e “Serviços da World Wide Web”.

Figura 5.8  –  Selecionando os Recursos do IIS.

6. Aguarde até que o Windows execute a instalação do IIS. 7. Para validar se o processo foi executado com sucesso, abra o navegador de Internet e digite localhost na barra de endereços, se a mensagem IIS7 for apresentada, então o IIS foi instalado com sucesso. Assim, o seu computador pode prover o serviço de hospedagem de conteúdo localmente. Como mostra a figura 5.9.

82 •

capítulo 5

Figura 5.9  –  Página Web Padrão do IIS.

5.1.1.2  Configuração O IIS pode prover várias aplicações simultaneamente, imagine que uma empresa deseje operar os seus departamentos todos via páginas de Web de forma independente. Neste cenário é possível dispor de aplicações para cada departamento de forma individualizada. Para dispor as aplicações separadas, o IIS dispõe do recurso nomeado diretório virtual, assim cada departamento pode ter o seu próprio diretório virtual no Servidor Web, pois caso um diretório virtual apresente alguma falha, os outros departamentos da empresa não serão afetados. Os diretórios virtuais são agregado a um site, que site define a porta TCP/IP e o protocolo pelo qual os clientes enviam as requisições, sendo 80 a porta padrão. Na figura 5.10 é apresentada a configuração padrão do site no IIS.

Figura 5.10  –  Configurações de Porta e Protocolo (HTTP) do Site Padrão.

capítulo 5

• 83

Mais de um site pode ser adicionado ao IIS. Ao se instalar o IIS, o site padrão é definido como “Default Web Site”, e é neste site que iremos adicionar um diretório virtual para prover conteúdo. Para criar um diretório virtual, siga o processo abaixo: 1. Vá até o Painel de Controle do Windows e localize Ferramentas Administrativas, como apresenta a figura 5.11.

Figura 5.11  –  Ferramentas Administrativas.

2. Abra as Ferramentas Administrativas e localize “Gerenciador do Serviços de Informações da Internet (IIS)” e abra o gerenciador do IIS, como mostra a figura 5.12.

Figura 5.12  –  Gerenciador de Configurações do IIS.

84 •

capítulo 5

3. Na árvore localizada a direita, expanda o nó Sites e clique na opção “Adicionar Diretório Virtual...”, como ilustra a figura 5.13.

Figura 5.13  –  Adicionando o diretório Virtual.

4. Configure o diretório, como mostrado na figura 5.14. O caminho físico “C:\html” deve existir.

Figura 5.14  –  Configurando o Diretório Virtual.

5. O diretório virtual já esta configurado e pronto para ser utilizado, o próximo passo é adicionar o conteúdo ao diretório virtual. Adicione ao diretório “C:\html”, a página Web da figura 5.15 nomeando como index.html.

capítulo 5

• 85

?

Obtém cotação <script> function obterCotacao() { var xhttp = new XMLHttpRequest(); var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%3D%22USDBRL%22&format=xml&diagnostics=false&env=store%3A%2F%2Fdatatables. org%2Falltableswithkeys"; xhttp.open("GET", url, true); xhttp.send(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById("resposta").innerHTML=xhttp.responseText; } }; } Figura 5.15  –  Página Para Teste No Iis

6. Abra o navegador de Internet e digite localhost\dir_virtual na barra de endereços. A figura 5.16 apresenta o diretório virtual provendo conteúdo.

Figura 5.16  –  Provendo Conteúdo Pelo IIS.

86 •

capítulo 5

5.1.2  Apache O Servidor Web Apache diferentemente do IIS é livre e permite que qualquer usuário possa empregá-lo para prover conteúdo na Web gratuitamente. Uma outra característica que o diferencia, é a possibilidade de instalá-lo tanto para os Sistemas Operacionais da Microsoft como para o Linux, além de alguns outros Sistemas Operacionais. Ele executa páginas Web como PHP, Perl, Shell Script e páginas ASP da Microsoft. 5.1.2.1  Instalação / configuração Nesta seção apresentaremos a instalação passo a passo do Apache 2.4.20 no Windows 7. Escolha um site para obter um pacote de distribuição já compilado, no site da Apache: https://httpd.apache.org/docs/current/platform/windows.html#down 1. Descompacte o conteúdo no seguinte diretório “C:\Apache24”, como ilustra a figura 5.17.

Figura 5.17  –  Diretório do Apache.

capítulo 5

• 87

2. O próximo passo é alterar a porta do Apache para 81, por padrão a 80 já é configurada e conflitará com a mesma porta do IIS. Acesse o arquivo “C:\ Apache24\conf\httpd.conf “, com um editor de texto e altere a porta para 81, nos seguintes locais: •  Localize no arquivo, “Listen 80” e substitua por “Listen 81”. •  Ainda localize no arquivo e altere a configuração de “ServerName localhost:80” para “ServerName localhost:81” 3. Abra um console para instalar o Apache como um serviço do Windows. Vá até acessórios e localize “Prompt de Comando”. Execute a seguinte sequencia de comandos, seguido pelo Enter, conforme ilustra a figura 5.18: •  cd / •  cd Apache24/bin •  httpd.exe -k install -n "ServidorWebApache" •  httpd.exe -k start -n "ServidorWebApache"

Figura 5.18  –  Sequencia de Comandos para Iniciar o Servidor Apache.

4. Abra o navegador de Internet e digite localhost:81 na barra de endereços, a página do Apache deverá ser mostrada conforme apresenta a figura 5.19. Dependento da fonte do download do Apache, a página apresentada poderá ser diferente.

88 •

capítulo 5

Figura 5.19  –  Página Web Padrão do Apache.

5. Adicione ao diretório “C:\Apache24\htdocs”, a página Web da figura 5.15 nomeando como Apache.html. Abra o navegador de Internet e digite localhost:81/Apache.html na barra de endereços, a página Web deverá ser mostrada conforme apresenta a figura 5.20.

Figura 5.20  –  Provendo Conteúdo pelo Apache.

6. Caso deseje parar e remover o serviço do Apache, execute a seguinte sequencia de comandos, seguido pelo Enter, conforme apresenta a figura 5.21: •  httpd.exe -k stop -n "ServidorWebApache" •  sc delete "ServidorWebApache"

capítulo 5

• 89

Figura 5.21  –  Sequencia de Comandos para Iniciar o Servidor Apache.

5.2  Tecnologia servidor/cliente – ASP.NET O ASP.NET é a plataforma de desenvolvimento da Microsoft que mescla código executado no servidor e simultaneamente prove o conteúdo estático que é enviado ao navegador de Internet, sendo provido pelo servidor Web IIS. Pode-se afirmar que uma página do tipo ASP.NET é composta por duas partes, uma porção que é executada no servidor e outra que é executada no cliente. Quando o usuário invoca uma página do tipo ASP.NET, a porção HTML é enviada ao cliente, ao selecionar um botão disposto no HTML, uma requisição HTTP é enviada ao servidor e a porção do código servidor é executada e todo o conteúdo HTML é reenviado ao navegador. Para evitar que todo o conteúdo seja reenviado novamente ao cliente, o ASP. NET prove controles que são dispostos nas páginas que permite a atualização apenas de uma porção da página Web via AJAX. O ASPNET.AJAX é o conjunto de controles disponíveis no Visual Studio chamados “AJAX Extensions”, que permite a implementação do AJAX para páginas do tipo ASP.NET, já o Visual Studio é a ferramenta onde as páginas ASP.NET são construídas. Ao criar um projeto no Visual Studio, como por exemplo do tipo ”Web Forms”, é possível manipular tais controles na página ASP.NET para controlar a atualização parcial de uma página. A figura 5.22 ilustra como os controles são dispostos no Visual Studio.

90 •

capítulo 5

Figura 5.22  –  Controles AJAX Extensions.

O controle ScriptManager é o controle mais importante, pois os demais controles AJAX não funcionam se o mesmo não for adicionado a página. A sintaxe dele é apresentada na figura 5.23. Ele controla todo o código script cliente dos outros controles AJAX dispostos na página. Figura 5.23  –  Sintaxe do Scriptmanager.

Já o controle UpdatePanel é um container de controles e não tem a função de formatação gráfica para uma página Web. O objetivo dele é agregar controles e quando um dos controles dispara uma requisição ao servidor (post back), o controle UpdatePanel intervem e inicia uma requisição do tipo post assíncrona (AJAX) ao servidor e atualiza somente a porção de controles da página que o UpdatePanel contempla. Para um melhor entendimento, imagine um botão que esta inserido dentro do controle UpdatePanel é clicado, apenas os controles que estão inseridos no UpdatePanel serão afetados, já os controles dispostos em outras partes da página não serão.

capítulo 5

• 91

Para exemplificar, vamos adicionar um par de controles, um botão e um label, sendo um par dentro do UpdatePanel e outro fora, a figura 5.24 ilustra a disposição dos controles.



Figura 5.24  –  Exemplo Utilização do Controle Updatepanel.

Observe na figura 5.24 que ambos os botões executam o mesmo método no servidor OnClick="btn_Click". A implementação disposta no servidor é apresentada na figura 5.25. public partial class _Default : Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) Atualiza(); } protected void btn_Click(object sender, EventArgs e) { Atualiza(); }

92 •

capítulo 5

private void Atualiza() { string time = DateTime.Now.ToLongTimeString(); lblParcial.Text = "Horário dentro do UpadatePanel" + time; lblTotal.Text = "Horário fora do UpadatePanel" + time; } } Figura 5.25  –  Exemplo Utilização do Controle Updatepanel - Servidor.

Observe que o método Atualiza() é chamado pelos botões e no evento de carregamento da página Web. O proposito é preencher o horário corrente do servidor dos controles lblParcial e lblTotal. No evento Page_Load (carregamento da página), o horário será atribuído para ambos os controles, uma única vez. Considerando o clique do botão btnTotal, a requisição não é parcial e sim total, assim toda a página é carregada atualizando os horários de ambos os controles com os horários. Já no caso do clique do botão btnParcial, apenas os controles que estão inseridos no UpdatePanel serão afetados, assim somente o horário do lblParcial é atualizado. Esta técnica permite a atualização de porções das páginas sem a necessidade de se carregar o conteúdo completo de uma página Web.

Figura 5.26  –  Exemplo Utilização do Controle Updatepanel – Página Web.

capítulo 5

• 93

A figura 5.26 apresenta a página após o clique do botão “Atualização Parcial”, note que o horário do label contido no UpdatePanel possui um horário diferente e maior comparando-se ao horário preenchido pelo controle lblTotal. O controle UpdateProgress é utilizado para sinalizar operações custosas no servidor e indicar ao usuário que a operação esta sendo executada. A figura 5.27 apresenta a adição do controle a página Web.

Obtendo horário no servidor...
Figura 5.27  –  Exemplo Utilização do Controle Updateprogress.

Para simular um processamento com atraso de 5 segundos, a função Thread. Sleep(5000) é adicionada ao método Atualiza(), como mostra a figura 5.28. private void Atualiza() { Thread.Sleep(5000); string time = DateTime.Now.ToLongTimeString(); lblParcial.Text = "Horário dentro do UpadatePanel" + time; lblTotal.Text = "Horário fora do UpadatePanel" + time; } Figura 5.28  –  Exemplo Utilização do Controle Updateprogress - Servidor.

94 •

capítulo 5

Ao se executar novamente este exemplo, teremos o seguinte resultado, como ilustra a figura 5.29.

Figura 5.29  –  Exemplo Utilização do Controle Updateprogress – Página Web

Estes controles são facilitadores para criação de páginas Web interativas, apenas é necessário arrastar controles e toda infraestrutura AJAX é criada. Assim acelerando o desenvolvimento de páginas Web interativas.

ATIVIDADES 01. Pode-se afirmar que ao receber uma requisição HTTP, o Servidor Web consegue distinguir o navegador de Internet solicitante, se sim justifique. 02. Sem mesmo ter acesso ao servidor é possível saber qual o tipo de servidor que processou uma requisição HTTP cliente? Explique. 03. Qual é a função do cabeçalho HTTP General? 04. O que diferencia o Apache comparando-se ao IIS? 05. Nos Servidores Web IIS e Apache, liste onde é executada a configuração. 06. Qual é o controle Aspnet.Ajax que intervem e inicia uma requisição do tipo post assíncrona (AJAX) ao servidor e atualiza somente a porção de controles da página?

capítulo 5

• 95

07. Qual é a função do controle Aspnet.Ajax - UpdateProgress?

REFLEXÃO Estudamos neste capítulo da importância do protocolo HTTP para a Internet, que é sua base desde 1990. Entendemos como instalar, configurar e prover conteúdo nos principais Servidores Web do mercado, o IIS e o Apache. O IIS provendo conteúdo para toda plataforma da Microsoft, enquanto o Apache é um Servidor de código livre que pode ser instalado e configurado em múltiplos Sistemas Operacionais. Vimos como os controles Aspnet.Ajax são facilitadores para criação de páginas Web interativas, criando toda infraestrutura AJAX de forma simples e acelerando o desenvolvimento de páginas Web interativas. Assim, as tecnologias apresentadas neste capítulo são a base para iniciar o desenvolvimento de páginas Web interativas, claro que sempre procure ler o material complementar apresentado nesta apostila para aprimorar o seu conhecimento.

LEITURA Título AJAX, RICH INTERNET APLICATIONS E DESENVOLVIMENTO: Web PARA PROGRAMADORES Autores HARVEY M. DEITEL, PAUL J. DEITEL Editora Prentice Hall Brasil, 2009 ISBN 8576051613, 9788576051619 Aprenda a Criar Páginas Web com HTML e XHTML em 21 Dias Editora: Makron Books Autor: LAURA LEMAY ISBN: 8534614288 Título: AJAX com jQuery Subtítulo: Requisições AJAX com a simplicidade de JQuery Autor: Maurício Samy Silva Editora Novatec ISBN: 978-85-7522-199-0

96 •

capítulo 5

Use a Cabeça - Html com CSS e Xhtml Autor: Freeman, Elisabeth; Freeman, Eric Editora: Alta Books Título: Jquery em Ação Autor: Bibeault, Bear; Katz, Yehuda Editora: Alta Books Título: Use a Cabeça (Iniciação Rápida) Ajax Editora: Alta Books ISBN: 9788576081937

REFERÊNCIAS BIBLIOGRÁFICAS [1] Yahoo, “YQL - Yahoo Developer Network,” Yahoo, 2016. [Online]. Disponível: . Acesso em: 20 mar. 2016. [2] W3C, “XMLHttpRequest Level 1,” W3C, 30 jan. 2014. [Online]. Disponível: . Acesso em: 20 mar. 2016. [3] W3C, “Document Object Model (DOM),” W3C, 19 01 2005. [Online]. Disponível: . Acesso em: 02 abr. 2016]. [4] The jQuery Foundation, “https://jquery.com/,” The jQuery Foundation, 2016. [Online]. Disponível: . Acesso em: 02 abr. 2016. [5] The jQuery Foundation, “Query.ajax() | jQuery API Documentation,” The jQuery Foundation, 2016. [Online]. Disponível: . Acesso em: 03 abr. 2016.

GABARITO Capítulo 1 01. A / C 02. Não. A Web 2.0 permitiu a interação entre as pessoas de forma on-line nas redes sociais, quase que instantaneamente um conteúdo publicado na rede social por um indivíduo é disponibilizado aos membros da mesma rede, alcançando o principal objetivo da Web 2.0 de construir páginas interativas no qual o usuário possa construir o seu próprio conteúdo.

capítulo 5

• 97

03. A / B / D 04. Sim. Da mesma forma que o protocolo de comunicação estabelece regras para comunicação entre os computadores, o idioma possui o vocabulário e a gramática que são as regras utilizadas pelos indivíduos para estabelecerem a comunicação entre si. 05. B / C 06. B / C / D 07. Para simples troca de dados entre cliente (navegador) e servidor. Por se tratar de padrões conhecidos, facilita o desenvolvimento das aplicações. 08. Permite manipular os objetos na interface gráfica, prove de forma fácil requisições AJAX e o compromisso de manter a interoperabilidade entre os navegadores de Internet. 09. D 10. Cliente magro se refere a capacidade de execução de uma aplicação, o navegador somente era responsável em apresentar o conteúdo estático resultado do processamento no servidor

Capítulo 2 01. Não. No XHTML, é a composição das tags tradicionais do tipo HTML no qual definem o layout das páginas e seu conteúdo, já a parte XML mapeia as regras de validação do documento. 02. A 03. Sim. Para criar a regra de validação hierárquica basta aninhar o elemento básico da hierarquia recursivamente até compor o nível hierárquico do XML. 04. B 05. Não. Basta especificar o elemento DOCTYPE no documento XHTML. 06. B / C

Capítulo 3 01. A / B 02. Executar uma procura pelo id do elemento no documento HTML. 03. Não, Na requisição síncrona o processamento é executado até que a requisição esteja pronta e o evento onreadystatechange é executado sob demanda de acordo com a resposta do servidor. 04. var xhttp = new XMLHttpRequest(); 05. 3 - Executando requisição

98 •

capítulo 5

Capítulo 4 01. O jQuery facilita o desenvolvimento de páginas Web interativas, enquanto que no DOM são necessárias muitas linhas para construir uma determinada funcionalidade, a biblioteca possui métodos facilitadores para cumprir o objetivo. 02. É uma boa prática executar apenas pesquisas e manipular elementos nas páginas Web somente quando todo o seu conteúdo estiver sido completamente descarregado no cliente, para isso a biblioteca jQuery disponibiliza um evento de carregamento do documento. 03. Comparando a forma tradicional de construção de páginas com o jQuery é notório que o código HTML fica mais legível e limpo, separando-se o código HTML (formatação) e JavaScript em duas seções bem distintas do documento HTML. 04. •  text() – Configura ou retorna o texto dos elementos selecionados. •  html() – Configura ou retorna o conteúdo HTML dos elementos selecionados. •  val() – Configura ou retorna o valor dos elementos selecionados 05. O método que manipula os atributos dos elementos HTMLs é o attr 06. A forma de requisição get é utilizada somente para obter dados no servidor HTTP remoto e pode retornar dados que estão armazenados em cache, implementando uma requisição get HTTP. Já a requisição post pode ser usado para obter dados no servidor, mas nunca o cache é utilizado. Normalmente, é utilizado para enviar dados ao servidor. Nesta requisição, é executada um post HTTP. 07. O método Ajax é mais comumente empregado comparada as demais formas, pois permite configurar com uma variedade de nome/valor tornando flexível a utilização do mesmo. 08. HTML5

Capítulo 5 01. Sim, no cabeçalho de requisição HTTP cliente é disposto no atributo User-Agent a versão do navegador (cliente) que solicita a página. 02. Sim, no cabeçalho de resposta HTTP servidor, o atributo Server informa qual é o servidor HTTP que processou a requisição. 03. Este cabeçalho resume todo o processo de requisição/resposta entre cliente e servidor 04. O Servidor Web Apache diferentemente mente do IIS é livre e permite que qualquer usuário possa empregá-lo para prover conteúdo na Web gratuitamente. Uma outra característica que o diferencia, é a possibilidade de instalá-lo tanto para os Sistemas Operacionais da Microsoft como para o Linux, além de alguns outros Sistemas Operacionais.

capítulo 5

• 99

05. IIS: No IIS existe o “Gerenciador do Serviços de Informações da Internet (IIS)” disposto no painel de controle do Windows. Apache: Toda configuração é disposta no seguinte arquivo: executada no seguinte arquivo “\conf\httpd.conf” O controle UpdatePanel. 06. O controle UpdatePanel. 07. O controle UpdateProgress é utilizado para sinalizar operações custosas no servidor e indicar ao usuário que a operação está sendo executada.

100 •

capítulo 5

ANOTAÇÕES

capítulo 5

• 101

ANOTAÇÕES

102 •

capítulo 5

ANOTAÇÕES

capítulo 5

• 103

ANOTAÇÕES

104 •

capítulo 5