Tecnologias de Programação de Jogos by Grupo Lidel

ÍNDICE GERAL

SOBRE O LIVRO

1 INTRODUÇÃO

1.1 GERAÇÃO DIGITAL NATIVE

1.2 ALGORITMIA E PROGRAMAÇÃO DE COMPUTADORES

1.3 COMPUTAÇÃO EM NUVEM

1.4 PROGRAMAÇÃO DE DISPOSITIVOS MÓVEIS

1.5 PROGRAMAÇÃO DE JOGOS EM AMBIENTE DE REALIDADE AUMENTADA

INDÚSTRIA DE JOGOS DE COMPUTADOR

2.1 DESENVOLVIMENTO DE JOGOS DE COMPUTADOR

2.2 HISTÓRIA RECENTE DA PROGRAMAÇÃO DE JOGOS

2.3 TECNOLOGIA DE JOGOS DIGITAIS E TENDÊNCIAS

2.4 AMBIENTES INTEGRADOS DE DESENVOLVIMENTO DE JOGOS

2.4.1 3D GAME STUDIO 19 2.4.2 UNITY 3D

2.4.3 MICROSOFT XNA 22 2.4.4 PANDA 3D 23 2.4.5 MIT SCRATCH PROJECT 24 2.4.6 GAME MAKER 26

2.5 MERCADOS WEB DE JOGOS

2.5.1 APPLE STORE 27 2.5.2 ANDROID MARKET 29 2.5.3 WINDOWS PHONE MARKETPLACE 30

3 CRIAÇÃO E DESIGN DO JOGO

3.1 A IDEIA DO JOGO

3.2 JOGO COMO SIMULAÇÃO INTERATIVA

3.3 COMPONENTES E ÁREAS DE DESENVOLVIMENTO DE UM JOGO

3.3.1 ÁREAS DE CIÊNCIAS DA COMPUTAÇÃO

3.3.2 COMPONENTES E ENGENHARIA DE SOFTWARE 37

TECNOLOGIAS DE PROGRAMAÇÃO DE JOGOS

3.4 CONCEÇÃO E DESENVOLVIMENTO DO JOGO

3.4.1 NARRATIVA

3.4.2 TEMAS DE UM JOGO

3.4.3 O CENÁRIO E O MUNDO DO JOGO

3.4.4 GAMEPLAY 43 3.4.5 DEFINIÇÃO DAS REGRAS DE UM JOGO

3.5 DOCUMENTAÇÃO DO PROJETO DO JOGO

3.5.1 DOCUMENTO DE DESIGN DE UM JOGO

3.5.2 EXEMPLO DE ESTRUTURA DE UM GDD

4 ALGORITMIA E PROGRAMAÇÃO DE JOGOS

4.1 MODELAÇÃO E RESOLUÇÃO DE PROBLEMAS

4.2 ENGENHARIA DE SOFTWARE

4.3 ALGORITMOS E ESTRUTURAS DE DADOS

4.3.1 TIPOS E ESTRUTURAS DE DADOS

4.3.2 ESTRUTURAS DE DADOS INDEXADAS

4.3.3 ESPECIFICAÇÃO DE UM ALGORITMO

4.4 ENGENHARIA DE SOFTWARE PARA O DESENVOLVIMENTO DE JOGOS

4.5 ARQUITETURA DE SOFTWARE PARA UM JOGO

4.5.1 MOTOR DE UM JOGO

4.5.2 ENTIDADES E COMPONENTES DE SOFTWARE DE UM JOGO

4.6 ALGORITMOS E ESTRUTURAS DE DADOS PARA O DESENVOLVIMENTO DE JOGOS

4.6.1 ABSTRAÇÃO DOS DADOS E ORIENTAÇÃO AOS OBJETOS

4.6.2 CLASSES E ESTRUTURAS DE DADOS FUNDAMENTAIS

4.6.3 MODO DE FUNCIONAMENTO DE UM JOGO EM TEMPO REAL

4.6.4 MODELAÇÃO ORIENTADA AOS OBJETOS E AOS EVENTOS

4.6.5 ALGORITMOS DE INTELIGÊNCIA ARTIFICIAL

4.7 PROGRAMAÇÃO ORIENTADA A OBJETOS PARA O DESENVOLVIMENTO DE JOGOS 5 PROGRAMAÇÃO DE JOGOS COM PYTHON E PYGAME

75 77

5.1 INSTALAÇÃO DO AMBIENTE DE PROGRAMAÇÃO PYTHON

5.2 UTILIZAÇÃO DE UM EDITOR PYTHON

5.3 VARIÁVEIS, VALORES E TIPOS DE DADOS

5.4 INSTRUÇÕES DE LEITURA E ESCRITA

5.5 EXPRESSÕES MATEMÁTICAS SIMPLES

ÍNDICE GERAL 5.6 CICLOS E ESTRUTURAS CONDICIONAIS

5.6.1 ESTRUTURA IF 87 5.6.2 CICLO FOR 87

5.7 MÓDULOS E FUNÇÕES

5.8 ESPECIFICAÇÕES DE JOGOS EM PYTHON

5.8.1 ADIVINHA O NÚMERO

5.8.2 ADIVINHA A PALAVRA

5.9 BIBLIOTECA PYGAME

5.9.1 INSTALAÇÃO DO PYGAME 95 5.9.2 MÓDULOS, FUNÇÕES E MÉTODOS PYGAME 97 5.9.3 IDENTIFICAÇÃO E MANIPULAÇÃO DE EVENTOS

5.9.4 PRIMEIRA APLICAÇÃO EM AMBIENTE GRÁFICO

101

5.9.5 DESENHO DE INTERFACES GRÁFICAS

104

5.9.6 CICLO DO JOGO

106

5.9.7 EXEMPLOS DE JOGOS E ANIMAÇÕES GRÁFICAS

109

6 PROGRAMAÇÃO DE JOGOS PARA A WEB EM HTML5

119

6.1 LINGUAGENS PARA A PROGRAMAÇÃO DE JOGOS WEB

119

6.1.1 HTML5

121

6.1.2 CSS3

123

6.1.3 JAVASCRIPT E DOM

126

6.1.4 AJAX 130

6.2 FUNCIONALIDADES HTML5 E CSS3 PARA JOGOS INTERATIVOS

132

6.2.1 RENDERING GRÁFICO E BITMAPS COM O ELEMENTO CANVAS 133 6.2.2 API DE DESENHO SVG E WEBGL 134 6.2.3 ELEMENTOS MULTIMÉDIA PARA ÁUDIO E VÍDEO

135

6.2.4 GEOLOCALIZAÇÃO

137

6.2.5 ARMAZENAMENTO LOCAL PERSISTENTE COM WEBSTORAGE OUWEBSQL 138 6.2.6 COMUNICAÇÕES E WEBSOCKETS 140 6.2.7 JOGOS OFFLINE COM APPLICATION CACHE 141 6.2.8 JOGOS MULTITHREAD COM WEB WORKERS 142 6.2.9 INFORMAÇÃO PERSONALIZADA COM MICRODATA 143 6.2.10 CSS3 PARA JOGOS BASEADOS NO DOM

144

6.2.11 EXEMPLOS DE JOGOS DESENVOLVIDOS EM HTML5

146

VII

TECNOLOGIAS DE PROGRAMAÇÃO DE JOGOS

6.3 AMBIENTE E FERRAMENTAS DE DESENVOLVIMENTO 6.3.1 NAVEGADORES COM SUPORTE HTML5

148 148

6.3.2 FERRAMENTAS DE DESENVOLVIMENTO PARA OS BROWSERS 149 6.3.3 BIBLIOTECAS JAVASCRIPT PARA PROGRAMAÇÃO DE JOGOS

6.4 PROGRAMAÇÃO DE UM JOGO HTML5 BASEADO NO DOM

150 151

6.4.1 PREPARAÇÃO DE UM JOGO BASEADO NO DOM

152

6.4.2 INSERÇÃO DOS ELEMENTOS DE JOGO BASEADO NO DOM

154

6.4.3 MANIPULAÇÃO DOS ELEMENTOS DO JOGO BASEADO NO DOM

156

6.4.4 MOVIMENTAÇÃO DE OBJETOS DO DOM DE ACORDO COM INPUT DO TECLADO

159

6.4.5 SUPORTE PARA MÚLTIPLAS TECLAS SIMULTÂNEAS

161

6.4.6 MOVIMENTAÇÃO DE OBJETOS DO DOM EM JAVASCRIPT 165 6.4.7 DETEÇÃO DE COLISÕES ENTRE OBJETOS DO DOM

168

6.4.8 APRESENTAÇÃO DAS PONTUAÇÕES DOS JOGADORES COM TEXTO DINÂMICO EM HTML 173

6.5 PROGRAMAÇÃO DE UM JOGO HTML5 BASEADO NO ELEMENTO CANVAS

179

6.5.1 PREPARAÇÃO DE UM JOGO BASEADO NO CANVAS 180 6.5.2 DESENHO 2D NO CANVAS: CÍRCULOS E FORMAS GEOMÉTRICAS

183

6.5.3 DESENHO DE PATHS NO CANVAS 185 6.5.4 GERAÇÃO DE NÚMEROS ALEATÓRIOS EM JAVASCRIPT 187 6.5.5 SALVAGUARDA DA POSIÇÃO DE OBJETOS GEOMÉTRICOS

187

6.5.6 DESENHO DE LINHAS NO CANVAS 189 6.5.7 INTERAÇÃO COM OBJETOS DESENHADOS ATRAVÉS DE EVENTOS DO RATO

191

6.5.8 CICLO DE UM JOGO BASEADO NO CANVAS 195 6.5.9 DETEÇÃO DE INTERSEÇÕES NO CANVAS 196 6.5.10 CRIAÇÃO DO JOGO DESENREDAR BASEADO NO CANVAS 201

PLATAFORMAS DE DESENVOLVIMENTO DE JOGOS

213

7.1 PROTOTIPAGEM E PRODUÇÃO DE JOGOS

213

7.2 PANDA 3D E O PROJETO ALICE

214

7.2.1 INSTALAÇÃO DO PANDA 3D E DAS BIBLIOTECAS

215

7.2.2 JOGOS E ANIMAÇÕES DE DEMONSTRAÇÃO

217

7.2.3 DESENVOLVIMENTO DE UM JOGO EM PANDA 3D 220

7.3 MICROSOFT XNA 7.3.1 INSTALAÇÃO DO VISUAL STUDIO E DO XNA

VIII

224 225

ÍNDICE GERAL 7.3.2 CRIAR UM PROJETO XNA DE UM JOGO

226

7.3.3 CLASSES E MÉTODOS XNA

229

7.3.4 MECANISMOS XNA E OBJETOS GRÁFICOS DE UM JOGO

231

7.4 MIT SCRATCH PROJECT

236

7.5 GAME MAKER STUDIO

242

7.5.1 INSTALAÇÃO DO AMBIENTE GAME MAKER 244 7.5.2 DESIGN DE UM JOGO COM O GAME MAKER STUDIO 245 7.5.2.1 RESUMO DO JOGO

245

7.5.2.2 DOCUMENTO DE DESIGN DO JOGO

245

7.5.2.3 GAME OBJECTS 245 7.5.2.4 SOUNDS 246 7.5.2.5 CONTROLS 246 7.5.2.6 GAMEPLAY 246 7.5.2.7 ROOMS AND LEVELS 246 7.5.3 CRIAÇÃO DE UM PROJETO (JOGO)

246

7.5.4 MANIPULAÇÃO DE IMAGENS

248

7.5.5 MANIPULAÇÃO DE FICHEIROS DE ÁUDIO

250

7.5.6 REPRESENTAÇÃO DE OBJETOS, EVENTOS E AÇÕES

251

7.5.7 IMPLEMENTAÇÃO DE EVENTOS DO JOGO

254

7.5.8 INTEGRAÇÃO DO ESPAÇO DO JOGO

260

7.6 DESENVOLVIMENTO DE JOGOS PARA O WINDOWS 8

262

7.6.1 EXTENSIBLE APPLICATION MARKUP LANGUAGE (XAML)

265

7.6.2 DESENVOLVIMENTO DE APLICAÇÕES XAML COM O VISUAL STUDIO 266 7.6.3 DIRECT2D E DIRECT3D

268

7.6.4 BIBLIOTECA DE SOFTWARE MONOGAME

271

7.6.5 ATRIBUTOS E MÉTODOS DA CLASSE GAME 272 7.6.6 SHOOTER GAME 275 7.6.7 MINI SPACE INVADERS 284

LISTA DE SIGLAS

291

GLOSSÁRIO DE TERMOS PORTUGUÊS EUROPEU / PORTUGUÊS DO BRASIL

293

BIBLIOGRAFIA

295

ÍNDICE REMISSIVO 299

SOBRE O LIVRO As tecnologias de desenvolvimento de jogos digitais têm por base as tecnologias de pro‑ gramação de computadores. O processo de construção de jogos digitais é uma área es‑ sencial do desenvolvimento de software. Neste contexto, este livro apresenta as bases da algoritmia e da programação, assim como as tendências de aplicações integradas de software para o design e a construção de jogos. As tecnologias de informação e a pro‑ gramação de computadores são apresentadas como base para a transição para os jogos digitais e outras simulações interativas. A área da programação de jogos tem sido aplicada na formação de profissionais de tecno‑ logias de informação e engenharia de software. Contudo, este livro pretende demonstrar que o desenvolvimento deste tipo de aplicações pode ser realizado por diferentes públicos com diferentes interesses e competências. Independentemente da área profissional do leitor, assim como do seu conhecimento na área da computação, este livro pretende adi‑ cionar competências na criação e desenvolvimento de jogos com aplicação de tecnologias de informação e algumas linguagens de programação (Python, C#, HMTL5 e JavaScript) focadas no design e desenvolvimento de jogos. O livro apresenta as bases para a criação e programação de jogos, incluindo a aplicação de ambientes integrados de software vocacionados para a construção de jogos, como é o caso do Game Maker Studio.

ORGANIZAÇÃO DO LIVRO Este livro foi desenvolvido para auxiliar profissionais e estudantes do Ensino Superior na arte do desenvolvimento de jogos. Para concretizar este objetivo e alcançar todas as fai‑ xas etárias que englobam estes dois tipos de público tão distintos, os autores tiveram a preocupação de usar uma linguagem clara, concisa e didática e de selecionar as matérias de forma criteriosa. Foi, também, feita uma uniformização rigorosa da terminologia usada a fim de facilitar a aprendizagem das matérias abordadas. A presente obra encontra‑se dividida em 7 capítulos e começa por nos introduzir a indústria e as tecnologias para o desenvolvimento de jogos passando a apresentar‑nos exemplos práticos de aplicações e jogos em várias linguagens de programação, incluindo a progra‑ mação de jogos para a web com a linguagem HTML5. No primeiro capítulo temos como Introdução a apresentação dos fundamentos da progra‑ mação de computadores, assim como a demonstração e sua aplicação em diferentes áreas do conhecimento. É descrita a importância dos jogos de computador para o desenvolvimen‑ to de ambientes e plataformas de programação. Este capítulo mostra‑nos, ainda, a ciência ‑base para o desenvolvimento de programas de computador: a algoritmia e a programação. A indústria dos jogos tem vindo a crescer em várias áreas, nomeadamente na dos dis‑ positivos móveis, incluindo os smartphones e os tablets. Esta tendência deu origem ao © FCA – EDITORA DE INFORMÁTICA

TECNOLOGIAS DE PROGRAMAÇÃO DE JOGOS aparecimento e desenvolvimento de vários mercados web para a comercialização de jogos e outras aplicações e é essa Industria de Jogos de Computador que surge no capítulo 2 do livro. No final do capítulo são mostrados os principais marketplaces. Os fundamentos e princípios essenciais da Criação e Design do Jogo são abordados no capítulo 3, onde a descrição dos principais componentes associados ao processo de cria‑ ção (ideia do jogo) e design de um jogo são o principal objetivo. De seguida, no capítulo 4, surge a Algoritmia e a Programação de Jogos como instrumento de raciocínio para o desenvolvimento de aplicações de software e de jogos de computador. No capítulo 5 – Programação de Jogos com Python e Pygame – temos como objetivo aprender a linguagem Python para a criação, desenvolvimento e implementação de jogos e aplicações interativas. No final deste capítulo o leitor deverá estar apto a desenvolver algoritmos e implementar programas simples nesta linguagem de programação. Os jogos baseados na web têm vindo a conquistar um enorme espaço e popularidade nos últimos tempos, pelo que a Programação de Jogos para a web em HTML5 faz parte deste livro, no capítulo 6. Este capítulo começa com uma breve revisão das tecnologias de programação de jogos para a web, incluindo HTML, CSS3, JavaScript e AJAX e, posterior‑ mente concentra‑se na análise das novas funcionalidades da norma HTML5. Segue‑se a definição de um conjunto de ferramentas para o desenvolvimento de jogos web e efetua ‑se, passo a passo, o desenvolvimento de dois jogos em HTML5: um baseado no DOM e outro no Canvas. Por fim, no capítulo 7, são apresentadas outras Plataformas de Desenvolvimento de Jogos, incluindo o motor de jogos e respetivas bibliotecas do Panda 3D, a plataforma Mi‑ crosoft XNA, o ambiente Game Maker, a ferramenta web de desenvolvimento de jogos Scratch desenvolvida pelo MIT e determinados exemplos recentes de ambientes de de‑ senvolvimento para o sistema operativo Windows 8. No final de cada capítulo podemos encontrar um breve resumo sobre a matéria abordada e os autores recomendam algumas leituras na rubrica “Leitura Recomendada”. Este livro é ainda composto por uma lista de Siglas, a qual tem como objetivo tornar a leitura mais fluida.

A QUEM SE DESTINA O LIVRO Foram definidas linhas muito precisas de orientação no sentido de se conceber uma obra de referência em língua portuguesa para os profissionais e todos os interessados que pre‑ tendam desenvolver projetos de software através da fascinante área dos jogos digitais e também aos estudantes das áreas dos Sistemas e Tecnologias de Informação, Engenharia Informática, Design e Programação de Jogos, entre outros. Foi nossa preocupação tornar esta obra numa referência para toda a comunidade de língua portuguesa, útil não só para os utilizadores portugueses, PALOP e de Timor, mas que fosse igualmente um livro de apoio ao público brasileiro. Nesse sentido, no fim do livro é disponibilizado um Glossário dos principais termos técnicos para o português do Brasil. XII

SOBRE O LIVRO COMPLEMENTOS NO SITE DA EDITORA A fim de facilitar a aprendizagem através da prática, os autores decidiram disponibilizar parte do código‑fonte usado ao longo do livro no site da editora, em www.fca.pt.

CONTACTE‑NOS O Grupo Lidel, com a sua experiência de 50 anos ao serviço da Ciência e a FCA, com mais de 20 anos de experiência na edição de livros técnicos de informática, empenharam‑se, tal como em todos os livros que lançam no mercado, para que os objetivos do livro fossem cumpridos. Mas porque há sempre melhoramentos a fazer, agradecemos que todos os leitores que pretendam contribuir com sugestões o façam através do seguinte email: fca@fca.pt.

XIII

6 PROGRAMAÇÃO DE JOGOS PARA A WEB EM HTML5 Os jogos baseados na web têm vindo a conquistar uma enorme popularidade nos últimos anos. Por outro lado, a linguagem HTML5 proporciona potencialidades que permitem encará ‑la como uma nova plataforma para os jogos online. Os jogos desenvolvidos em HTML5 po dem ser jogados em computadores desktop, telemóveis, smartphones e tablets, tais como o iPhone e o iPad. Neste capítulo explica‑se como tirar partido das normas mais recentes de desenvolvimento para a web, incluindo as normas HTML5, CSS3 e JavaScript, para desenvolver jogos intera tivos, 2D e 3D, para a web. Explora‑se em concreto a utilização dos novos elementos (tags) da linguagem HTML5, as propriedades CSS e o desenvolvimento de scripts em JavaScript de forma a desenvolver jogos que são executados diretamente num browser web. De uma forma geral, podemos definir dois tipos distintos de jogos para a web: jogos desenvolvidos com base no Modelo de Objetos do Documento (DOM - Document Object Model), CSS e jQuery; e jogos desenvolvidos com base no novo elemento Canvas da linguagem HTML5 e respetiva Application Programming Interface (API) de desenho. O capítulo principia com uma breve revisão das tecnologias de programação de jogos para a web, incluindo a linguagem HTML, CSS3, JavaScript e a tecnologia AJAX. A seguir, o capítulo concentra‑se na análise das novas funcionalidades da norma HTML5 que são úteis para o desenvolvimento de jogos interativos. Em seguida, define‑se com clareza um conjunto de ferramentas que podem ser utilizadas para criar um ambiente de desenvolvimento de jogos web, identificando‑se a seguir as formas existentes para o desenvolvimento de jogos 2D e 3D. Seguem‑se as duas partes principais deste capítulo em que se efetua o desenvolvimen to, passo a passo, de dois jogos em HTML5, um jogo baseado no DOM e outro jogo baseado no elemento Canvas. O capítulo conclui com um breve resumo do processo de desenvolvi mento de jogos para a web.

6.1 LINGUAGENS PARA A PROGRAMAÇÃO DE JOGOS WEB O prefixo “hiper-” é utilizado na matemática para designar uma entidade multidimensional. Por exemplo, um hiperespaço designa um espaço com muitas dimensões. O conceito “hi pertexto” foi criado de forma a sugerir texto que se pode movimentar em muitas direções © FCA – EDITORA DE INFORMÁTICA

119

TECNOLOGIAS DE PROGRAMAÇÃO DE JOGOS independentes, isto é, texto liberto da sequência unidimensional de palavras alinhadas em parágrafos contidos, por sua vez, em páginas. O mecanismo que permite implementar este espaço multidimensional na web é a hiperligação. Em termos concretos, uma hiper ligação pode ser implementada sob a forma de uma palavra, uma sequência de palavras ou de uma imagem que, quando é selecionada pelo utilizador numa página web, o conduz a outra página contendo informação relacionada. O poder desta ligação é, pois, o poder da associação. Por exemplo, é possível ligar uma nota de rodapé ao corpo do texto, estabele cer uma ligação entre o local onde existe a menção a um produto e um ecrã de encomenda do produto ou ligar um conceito à respetiva definição. Do ponto de vista da visualização, isto significa que é possível movimentarmo‑nos de página para página, através de vários servidores, de acordo com o nosso interesse pessoal, sabendo que existem, em cada instante, várias direções disponíveis. É, portanto, possível navegar através de um espaço multidimensional de páginas web. As páginas web constituem o recurso mais comum que é pedido aos servidores HTTP e são desenvolvidas através da linguagem HTML. Uma página HTML consiste num fi cheiro de texto escrito na linguagem HTML, um formato de descrição da estrutura para documentos de texto que utiliza elementos, também designados por marcas ou tags, para especificar o aspeto (formatação) e a estrutura do texto. As funcionalidades mais básicas da linguagem HTML permitem a criação da estrutura e da formatação de páginas web estáticas com uma interatividade limitada, isto é, páginas HTML cujo conteúdo é integralmente definido quando a página é criada, em que a interatividade se resume à interação com as hiperligações associadas ao texto ou às imagens. Contudo, a maioria das aplicações multimédia na web, incluindo os jogos interativos, necessita de funcio nalidades mais complexas que permitam, por um lado, ampliar o leque de elementos interativos nas páginas web e, por outro, gerar uma página HTML dinamicamente, in cluindo conteúdos adaptados às necessidades do utilizador, que podem ser obtidos, por exemplo, a partir de uma base de dados. A ampliação dos elementos interativos pode realizar‑se recorrendo ao desenvolvimento de scripts ou objetos que são inseridos nas páginas HTML e executados no lado do cliente, isto é, pelo browser, através da lingua gem JavaScript. Por outro lado, a geração dinâmica de páginas HTML consegue‑se por intermédio de scripts desenvolvidos em outras linguagens que são executados no lado do servidor web. Neste contexto, revemos a seguir as características principais da linguagem HTML5 para a estruturação de conteúdos e criação de hiperligações em páginas web; as propriedades da linguagem CSS3 que permitem definir a forma como as páginas web são apresenta das visualmente no ecrã do dispositivo através da atribuição de estilos de apresentação aos elementos da linguagem HTML e aos respetivos estados; e ainda a linguagem Java Script que proporciona a lógica de controlo da interação do utilizador com a página web, tornando‑a dinâmica ao aceder aos elementos HTML através do Modelo de Objetos do Documento (DOM).

120

PROGRAMAÇÃO DE JOGOS PARA A WEB EM HTML5

6.1.1 HTML5 Sendo uma linguagem de marcas, a HTML baseia‑se na inserção de identificadores es peciais no texto de um documento, de modo a delimitar porções de texto para as quais se pretende especificar um conjunto de propriedades, tais como a fonte do texto, a sua dimensão, o seu estilo e a sua cor. A utilização de marcas permite, assim, separar o pro cesso de criação do conteúdo do processo utilizado para apresentar esse conteúdo. Por exemplo, no caso da linguagem HTML, a apresentação do conteúdo do documento é rea lizada por um programa, o browser, que interpreta e processa as marcas e as transforma em texto formatado. A criação do conteúdo HTML é um processo distinto, que consiste na criação do texto e na inserção das marcas, um conjunto de tarefas que pode ser realizado mediante a utilização de um simples editor de texto ou, alternativamente, recorrendo a ferramen tas de autoria web mais sofisticadas, tais como o Adobe Dreamweaver ou o Microsoft Expression Web. O leitor interessado em aprofundar a criação de aplicações web com base nestas ferramentas pode consultar outras obras inteiramente dedicadas às funcio nalidades fornecidas pelo Dreamweaver (Oliveira, 2004) e pelo Expression Web (Marques & Mendes, 2002). Do ponto de vista sintático, as marcas HTML são identificadores especiais definidos pela linguagem e que são delimitados por parêntesis angulares, tais como <BODY>. Normal mente, as marcas surgem em pares e delimitam a quantidade de texto que se pretende formatar ou estruturar. Por exemplo, a marca <BODY> identifica o início do corpo do documento e a marca </BODY>, que contém a barra “/”, identifica o final do corpo do documento. Do mesmo modo, a marca <B> identifica que o texto que se segue surge em negrito e a marca </B> identifica o final da porção de texto formatada com o estilo negrito. As marcas HTML são, pois, utilizadas para definir a estrutura do documento e a formata ção do texto. Ao nível da estrutura, o documento é integralmente delimitado pelas marcas <HTML> e </HTML>. Os documentos HTML contêm duas secções principais: a secção do cabeçalho, delimitada pelas marcas <HEAD> e </HEAD>, e a secção do corpo do do cumento, delimitada pelas marcas <BODY> e </BODY>, como foi visto anteriormente. A secção do cabeçalho inclui informação sobre o documento HTML como, por exemplo, o título que é apresentado pelo browser, delimitado pelas marcas <TITLE> e </TITLE>, e um conjunto de palavras‑chave identificadas pela marca <META>, que são utilizadas pelos motores de pesquisa para indexar a página web, tal como se observa no exemplo da Fi gura 6.1. A secção do corpo destina‑se a incluir o conteúdo da página HTML. No exemplo da Figura 6.1, o corpo do documento contém um parágrafo inicial centrado para o texto “Exemplo de uma página HTML”.

121

TECNOLOGIAS DE PROGRAMAÇÃO DE JOGOS

<!DOCTYPE html> <HTML> <HEAD> <META http ‑equiv=”Content ‑Type” content=”text/html; charset=iso 8859‑1”> <META name=”keywords” content=”nuno ribeiro UFP professor engenharia informática multimédia”> <TITLE>Página web de Nuno Ribeiro</TITLE> <LINK rel=”StyleSheet” type=”text/CSS” href=”MyStyles.css”> </HEAD> <BODY bgcolor=”#FFFFFF”> <P align=”CENTER”><FONT size=”2” FACE=”Arial” color=”#808080”>Exemplo de uma <B> página HTML </B></FONT></P> <P align=”LEFT”><FONT size=”2” FACE=”Arial”> Página do curso de <A HREF=”http://www2.ufp.pt/informatica/index.html”> Engenharia Informática </A> da UFP </B></FONT></P> <P align=”LEFT”><FONT size=”2” FACE=”Arial”>Membro do Centro de Estudos e Recursos Multimediáticos <A href=”http://www.cerem.ufp.pt”><IMG src=”img/pag‑cerem16072.jpg” alt=”CEREM”</A></FONT></P> <P align=” CENTER “><FONT size=”1” face=”Arial”>Página criada e mantida por </FONT><A href=”mailto:nribeiro@ufp.pt”>Nuno Ribeiro</A></FONT></P> </BODY> </HTML> FIGURA 6.1 – EXEMPLO DE UMA PÁGINA HTML

Antes da versão HTML4, as propriedades de formatação do texto eram igualmente deter minadas exclusivamente através da inserção de marcas HTML. Por exemplo, na Figura 6.1 pode‑se observar a utilização do par de marcas <B> e </B> para apresentar o texto “página HTML” com o estilo negrito. As marcas HTML permitem igualmente que se es pecifiquem valores para as propriedades do texto. Estas propriedades exprimem‑se sob a forma de pares atributo‑valor. Por exemplo, a marca <FONT> possui vários atributos que permitem especificar propriedades, tais como a dimensão (size) e a designação da fonte (face). Como se pode observar no primeiro parágrafo do corpo da página HTML da Figura 6.1, a fonte utilizada para o texto é a fonte Arial, com uma dimensão dada pelo valor nu mérico 2. Neste caso, o atributo size tem o valor 2 e o atributo face possui o valor Arial. As marcas HTML básicas que permitem implementar o conceito de hipermédia incluem a marca <A> e a marca <IMG>. A marca <A> implementa a noção de âncora do hipertexto. O browser interpreta a marca da âncora como um identificador do ponto de partida para uma 122

PROGRAMAÇÃO DE JOGOS PARA A WEB EM HTML5

hiperligação que se estabelece com outra página HTML ou com outra secção da mesma página. Para assinalar esse facto, o browser apresenta o texto ao qual a âncora está asso ciada com um formato diferente do formato do texto normal, por exemplo, sublinhando‑o ou alterando a sua cor. Sempre que o utilizador posiciona o apontador sobre a âncora, o browser pode ainda modificar o aspeto do texto, por exemplo alterando a sua cor, de modo a identificar uma zona sensível. E sempre que o utilizador seleciona o texto associado à ân cora, o browser emite um pedido HTTP correspondente ao recurso identificado pela hiperli gação. O URL deste recurso, que pode ser uma página HTML ou um ficheiro, especifica‑se por meio do atributo href, tal como se ilustra no segundo parágrafo do corpo da Figura 6.1. Para além da implementação de uma hiperligação, a marca <A> também pode ser utilizada para abrir as aplicações definidas por omissão para lidar com outros serviços Internet, tais como o correio eletrónico (email) ou a transferência de ficheiros (FTP). Por exemplo, no último parágrafo do corpo da página HTML da Figura 6.1, mostra‑se a utilização da âncora para abrir automaticamente a aplicação de correio eletrónico de modo a enviar uma men sagem ao autor, bastando substituir o URL por um endereço de correio eletrónico. Por outro lado, a marca <IMG> permite adicionar uma imagem ao conteúdo da página HTML. Esta marca insere uma imagem no local da página HTML em que surge, cujo URL é especificado através do atributo src, tal como se ilustra no terceiro parágrafo do corpo da página HTML da Figura 6.1. Sempre que o browser encontra a marca <IMG>, envia um novo pedido HTTP ao servidor web, que consiste no pedido do ficheiro correspondente à imagem mencionada no atributo src, sendo a imagem apresentada na página HTML logo que seja enviada pelo servidor web e recebida pelo browser. O exemplo apresentado no terceiro parágrafo do corpo da página HTML da Figura 6.1 permite verificar o modo como se pode associar a marca <IMG> à marca <A>, de modo a produzir uma imagem que pode ser selecionada pelo utilizador para ativar uma hiperligação.

6.1.2 CSS3 As limitações gráficas da linguagem HTML original e o número reduzido de marcas que esta incluía, deram origem a novas versões da linguagem, a partir da versão HTML4 que foi emitida pelo World Wide Web Consortium (W3C) em 1997. Esta versão da linguagem con tinha um conjunto de melhorias face à linguagem HTML original incluindo, entre outras, uma separação mais vincada entre as marcas que se destinam a especificar a estrutura da página web e as marcas que se destinam à formatação do aspeto visual dos conteúdos, bem como uma definição mais correta de elementos complexos, tais como as tabelas e as frames. No entanto, a funcionalidade verdadeiramente inovadora que foi introduzida jun tamente com a linguagem HTML4 consistiu nas folhas de estilos Cascading Style Sheets (CSS). As folhas de estilos permitem definir o aspeto das páginas HTML de um modo totalmente independente das marcas tradicionais e do conteúdo. De uma forma geral, uma folha de estilos contém um conjunto de regras de estilo que indicam ao browser o modo como os elementos de uma página HTML devem ser apre sentados no ecrã. Uma regra é constituída por duas partes: um selector que determina a marca HTML à qual se aplica a regra de estilo; e a declaração do estilo que especifica as © FCA – EDITORA DE INFORMÁTICA

123

TECNOLOGIAS DE PROGRAMAÇÃO DE JOGOS propriedades de formatação que devem ser aplicadas à marca determinada pelo selector. Por exemplo, a Figura 6.2 mostra o modo como se pode definir as propriedades de forma tação das marcas <H1> e <H2>, utilizando as regras das folhas de estilos. <HTML> <HEAD> <TITLE> Exemplo de aplicação de folhas de estilos em HTML5 </TITLE> <STYLE type=”text/CSS”> H1 {font ‑size: 16pt; color: blue} H2 {font ‑size: 14pt; color: green} </STYLE> </HEAD> FIGURA 6.2 – EXEMPLO DE APLICAÇÃO DE FOLHAS DE ESTILOS EM HTML5

Como se pode observar na Figura 6.2, as regras de estilo podem ser embebidas na página HTML a que se aplicam por intermédio da marca <STYLE>. Contudo, é possível obter exatamente o mesmo efeito se as regras forem armazenadas num ficheiro separado, com a extensão “.css”, desde que se estabeleça uma ligação entre o ficheiro das regras e a página HTML a que se aplicam, colocando a marca <LINK> no cabeçalho do documento HTML. Por exemplo, na Figura 6.1 é possível observar, na parte do cabeçalho do documento HTML, que a página se encontra ligada a uma folha de estilos designada por “MyStyles.css”. O atributo rel da marca <LINK> permite especificar o significado da ligação que se estabeleceu entre a página HTML e o recurso especificado por intermédio do atributo href (o ficheiro “MyStyles.css” contendo as regras de estilos). Como se pode observar, o valor do atributo rel foi definido como StyleSheet, permitindo declarar que o ficheiro “MyStyles.css” deve ser utilizado como uma folha de estilos para a página web atual. A Figura 6.3 mostra o conteúdo do ficheiro “MyStyles.css” que, neste caso, altera o aspe to convencional das hiperligações de sublinhado para cores distintas. Como se pode veri ficar no ecrã do computador, o browser passa a identificar as hiperligações não visitadas pela cor azul sem sublinhado e as hiperligações já visitadas mantêm a cor azul. Por outro lado, sempre que o utilizador coloca o apontador sobre uma hiperligação, esta muda para a cor vermelha. A separação entre as regras de apresentação e o conteúdo da página HTML tem a virtude de possibilitar a aplicação das mesmas regras a um grande conjunto de páginas HTML relacionadas, por exemplo, a todas as páginas que fazem parte do mesmo sítio web. Na realidade, quando se colocam as regras de estilo num ficheiro separado, é possível fazer uma ligação a este ficheiro a partir de todas as páginas do sítio, o que permite aumentar a eficiência do processo de atualização desse sítio web. De facto, para atualizar o aspeto de todo o sítio web basta aplicar a alteração a um único ficheiro, em lugar de ser necessário efetuar a edição de todos os ficheiros HTML que o constituem.

124

PROGRAMAÇÃO DE JOGOS PARA A WEB EM HTML5

A:link { Color : Blue ; Cursor : Default ; Letter ‑Spacing : normal; Text ‑Align : justify ; Text ‑Decoration : none; Word ‑Spacing : normal; } A:Visited{ Color : Blue ; Text ‑Decoration : none; } A:hover { color: red; Text ‑Decoration : none; } A:active{ color: red; Text ‑Decoration : none; } FIGURA 6.3 – EXEMPLO DE UMA FOLHA DE ESTILOS ARMAZENADA NO FICHEIRO SEPARADO “MYSTYLES.CSS”

Apesar de a linguagem HTML4 proporcionar um conjunto melhorado de características quando comparada com as versões anteriores, já que permitia que o conteúdo da página web fosse especificado de uma forma independente da sua apresentação por intermédio das folhas de estilo, a segunda limitação que foi vista anteriormente continua a verificar‑se. De facto, mesmo na linguagem HTML4 continuava a existir um conjunto fixo de marcas. Esta limitação foi ultrapassada com o surgimento da linguagem eXtensible Markup Lan guage (XML) em 1998, que, para além de reforçar a independência total entre o conteúdo e a apresentação de um documento, proporcionava ainda uma sintaxe normalizada para criar conjuntos de marcas personalizadas. No entanto, ao contrário da linguagem HTML, a linguagem XML é, na realidade, uma metalinguagem, isto é, uma linguagem para definir outras linguagens. De facto, a linguagem XML determina um conjunto de regras pelas quais o utilizador pode definir os seus próprios conjuntos de marcas, mais adaptados às necessidades do seu domínio de aplicação específico. Posteriormente, a linguagem HTML4 foi reformulada como uma aplicação da linguagem XML, dando origem à linguagem eXtensible HyperText Markup Language (XHTML), que combinava o potencial expressivo da linguagem XML com o potencial de apresentação da linguagem HTML. Esta combinação resultou numa linguagem que permitia visualizar as páginas web em navegadores destinados a uma grande variedade de plataformas e dispo sitivos, incluindo por exemplo os dispositivos de computação móvel, tais como os tablets e os smartphones.

125

TECNOLOGIAS DE PROGRAMAÇÃO DE JOGOS Na sua versão mais recente, a linguagem HTML5 veio simplificar grandemente o proces so de desenvolvimento de formulários web e aplicações web, flexibilizando várias regras introduzidas pela linguagem XHTML, simplificando a sintaxe e acrescentando um conjunto substancial de novidades que são exploradas com mais pormenor na secção 6.2 deste livro. Para além disso, a linguagem HTML5 reforçou a separação entre o conteúdo e a apresentação, permitindo que o programador utilize elementos HTML para especificar os conteúdos da página web e defina todo o aspeto gráfico e visual de cada um desses ele mentos através da utilização da linguagem CSS3.

6.1.3 JAVASCRIPT E DOM Como se observou anteriormente, a linguagem HTML possui algumas limitações ao ní vel da interatividade, pois foi criada originalmente apenas com o objetivo de implementar hipertextos. No entanto, o desenvolvimento de aplicações web mais interativas, que su portem, por exemplo, o preenchimento de formulários por parte do utilizador, necessita de funcionalidades de interação complementares que não são fornecidas pela linguagem HTML. Mais concretamente, tornou‑se necessário permitir a definição dos eventos que podem ocorrer como resultado da interação do utilizador com a página web, bem como as funções que devem ser executadas como reação a esses eventos. A interatividade das páginas HTML pode ser aumentada através da utilização de scripts que são executados pelo navegador. Trata‑se de pequenos programas que se inserem no código HTML e que são executados pelo browser numa de duas situações: quando a pági na é recebida pelo browser ou quando ocorre algum evento em resultado de uma ação do utilizador. As linguagens de scripting mais utilizadas para criar tais programas incluem as linguagens JavaScript, JScript e VBScript, posteriormente normalizadas de acordo com a linguagem ECMAScript. A primeira linguagem de scripting para a web surgiu no contexto do Netscape Navigator e designava‑se por LiveScript. Posteriormente, esta designação foi modificada para JavaScript, numa tentativa de tirar partido do interesse que nessa altura existia em torno da linguagem Java. No contexto do Internet Explorer, surgiu igualmente a linguagem JScript, lançada pela Microsoft. A linguagem ECMAScript foi definida pela Associação de Fabricantes de Computadores da Europa (European Computer Manufactu rers Association - ECMA) numa tentativa de normalizar as características das linguagens JavaScript e JScript. O resultado deste esforço constituiu uma linguagem de scripting que pode ser adaptada a uma grande variedade de ambientes, incluindo os browsers web. Sempre que o browser pede uma página HTML que contém scripts, o servidor envia o conteúdo total da página web, incluindo o código HTML e as instruções, por exemplo, es critas em JavaScript, através da rede para o cliente. Por sua vez, ao receber o documento, o browser apresenta o conteúdo HTML e executa as instruções JavaScript, produzindo os resultados que são visualizados pelo utilizador. As instruções JavaScript embebidas numa página HTML dotam o browser com a capacidade de responder a eventos gerados pelo utilizador, tais como cliques do rato, introdução de valores em formulários e navegação entre páginas. Por exemplo, uma utilização bastante comum do JavaScript consiste na criação de funções que verificam se os utilizadores introduzem os valores corretos nos 126

PROGRAMAÇÃO DE JOGOS PARA A WEB EM HTML5

formulários, tais como os valores numéricos em campos destinados a números de telefo ne ou ao código postal. Neste caso, não há necessidade de se estabelecer uma ligação à rede e de existir transmissão de informação, já que a página HTML contendo instruções JavaScript é capaz de verificar localmente os dados introduzidos e alertar o utilizador com uma caixa de diálogo caso a informação introduzida seja inválida. Existem quatro modos distintos para inserir instruções JavaScript em páginas HTML: ■■

Sob a forma de instruções e funções contidas numa marca <SCRIPT>;

■■

Através da especificação de um ficheiro contendo o código JavaScript (em lugar de se inserir o código JavaScript diretamente no documento HTML);

■■

Através da especificação de uma expressão JavaScript como um valor de um atribu to HTML;

■■

Sob a forma de Event Handlers contidos em marcas HTML, geralmente surgindo em formulários, para lidar com eventos que resultam de ações do utilizador.

A marca <SCRIPT> resultou de uma extensão à linguagem HTML original que permite englobar qualquer número de instruções JavaScript, tal como se ilustra na Figura 6.4. Um documento HTML pode conter várias marcas <SCRIPT>. <HTML> <HEAD> </HEAD> <BODY> <P> O texto que se segue foi gerado por um script </P> <SCRIPT type=”text/JavaScript”> var data = new Date() document.write(“Olá mundo! Este é o meu primeiro script!”) document.write(“Este script foi executado no dia”) document.write(data.getDate()) document.write(“ do mês ”) document.write(data.getMonth()) document.write(“ do ano de ”) document.write(data.getFullYear()) </SCRIPT> <P> Fim do meu primeiro script </P> </BODY> </HTML> FIGURA 6.4 – EXEMPLO DE UM SCRIPT JAVASCRIPT

Os scripts podem ser colocados no corpo da página HTML ou no cabeçalho do documen to. Os scripts localizados no corpo da página HTML são executados imediatamente, mal a página é recebida pelo browser. Por exemplo, os scripts da Figura 6.4 são executados imediatamente quando a página é recebida pelo browser, e utilizam a instrução docu‑ ment.write para apresentar o texto e os componentes da data do sistema no local da página HTML onde o script foi inserido. Por outro lado, quando são colocados no cabeça © FCA – EDITORA DE INFORMÁTICA

127

TECNOLOGIAS DE PROGRAMAÇÃO DE JOGOS lho, os scripts apenas são executados quando são invocados explicitamente ou quando ocorre o evento a que estão associados. Neste caso, o evento que despoleta a execução do script deve ser declarado como um atributo de um elemento ou marca HTML como, por exemplo, o evento onClick que foi declarado tal como se ilustra na Figura 6.5, onde se constrói um formulário com dois campos de texto. O primeiro campo de texto permite a introdução de uma expressão como, por exemplo, 2+2. Em seguida, quando o utilizador faz um clique no botão “Calcular”, o segundo campo de texto apresenta o valor numéri co que resulta da avaliação da expressão introduzida no primeiro campo. Como se pode observar, o cabeçalho deste documento define uma única função (calculo) que aceita como argumento um formulário (formulario), que é um objeto do tipo form. A função utiliza o método confirm da linguagem JavaScript para apresentar na página web uma caixa de diálogo de confirmação incluindo os botões “OK” e “Cancel”. <HTML> <HEAD> <SCRIPT> // Função para calcular o resultado de uma expressão inserida num campo // de um formulário com a designação “formulario” passado como parâmetro function calculo(formulario) { if (confirm(“Tem a certeza?”)) // O resultado é apresentado no campo result do formulário com // base na avaliação da expressão no campo expr do formulário formulario.result.value = eval(formulario.expr.value) else alert(“Tenha um bom dia… e volte sempre!”) } </SCRIPT> </HEAD> <BODY> <FORM> Introduza uma expressão: <INPUT TYPE=”text” NAME=”expr” SIZE=15> <INPUT TYPE=”button” VALUE=”Calcular” onClick=”calculo(this.form)”> <BR> Resultado: <INPUT TYPE=”text” NAME=”result” SIZE=15> </FORM> </BODY> </HTML> FIGURA 6.5 – EXEMPLO DE UM SCRIPT COLOCADO NO CABEÇALHO DA PÁGINA HTML

Se o utilizador efetuar um clique no botão “OK”, então o método confirm retorna o valor TRUE e o valor do campo de texto result é atualizado conforme o resultado da avaliação da expressão contida no campo expr. A função eval da linguagem JavaScript permite 128

PROGRAMAÇÃO DE JOGOS PARA A WEB EM HTML5

avaliar o seu argumento, que pode ser constituído por uma cadeia de carateres represen tando qualquer expressão JavaScript ou mesmo uma instrução da linguagem. Se, por ou tro lado, o utilizador efetuar um clique no botão “Cancel”, então o método confirm retorna o valor lógico FALSE e o método alert apresenta uma mensagem de despedida. Como se observou acima, o formulário contém um botão que possui um evento onClick que chama a função definida pelo utilizador (calculo). Sempre que o utilizador efetua um clique no botão “Calcular”, o JavaScript chama a função calculo com o argumento this.form que indica o objeto corrente (do tipo formulário). Deve‑se notar que na função calculo este formulário é referenciado pelo argumento formulario. Este exemplo permite igualmente observar que os scripts executados no lado do cliente assumem uma utilidade particular quando são utilizados em conjunto com formulários, isto é, com a marca <FORM>. Como se verificou, nestes casos os eventos surgem associados a campos dos formulários e despoletam a execução de funções que permitem avaliar (como no exemplo acima) ou, alternativamente, validar os dados introduzidos pelo utilizador. A combinação da filosofia da linguagem JavaScript com a linguagem HTML resultou no de senvolvimento da linguagem Dynamic HTML (DHTML), que permite alterar a página HTML enquanto está ser apresentada no browser, proporcionando conteúdos mais interativos ao utilizador através da manipulação, no lado do cliente, dos elementos que constituem a pá gina HTML. A utilização da linguagem DHTML permite, pois, modificar qualquer elemento de uma página web, incluindo o texto, os estilos, as imagens, os formulários e as tabelas, sem ser necessário enviar um pedido ao servidor HTTP e aguardar pela resposta. No entanto, para além das linguagens de scripting, é ainda possível recorrer à inserção de componentes no lado do cliente (client side components) para aumentar o leque de ele mentos interativos que são apresentados por uma página web ao utilizador. Os componen tes deste género são objetos executáveis que podem ser inseridos nas páginas HTML por intermédio da marca <OBJECT>. Estes componentes podem consistir em applets Java, controlos ActiveX, movies do Adobe Flash ou aplicações Microsoft Silverlight. Os componentes são tratados pelo browser do mesmo modo que os scripts, isto é, são executados tal como os scripts. Contudo, ao contrário destes, os componentes são ob jetos autónomos executáveis. Estes objetos residem no servidor e são transferidos para o lado do cliente como parte da resposta a um pedido HTTP emitido pelo browser. Por exemplo, um movie do Adobe Flash é, na realidade, uma aplicação multimédia autónoma que pode ser executada como parte de uma página web. O mesmo princípio é válido para aplicações Microsoft Silverlight que são executadas no âmbito de um browser. Do mesmo modo, é possível escrever um componente na linguagem Java (normalmente designado applet), que pode ser enviado pelo servidor e executado pelo browser, por exemplo para realizar cálculos complexos, tais como os que são efetuados nas declarações eletrónicas do imposto. No entanto, por motivos de segurança, estes componentes ficam geralmente impedidos de realizar certas ações que são potencialmente perigosas para o utilizador, tais como efetuar a leitura e a escrita de ficheiros no sistema de ficheiros do computador que desempenha o papel de cliente ou comunicar através da rede com outros servidores diferentes daquele de onde foram enviados.

129

TECNOLOGIAS DE PROGRAMAÇÃO DE JOGOS Por outro lado, a execução destes componentes necessita da instalação de programas adequados que ampliam as funcionalidades do browser (normalmente designados por plugins), de modo a permitir a execução dos componentes como parte das páginas HTML. Por exemplo, a execução de applets Java necessita da instalação de uma máquina virtual de Java, ao passo que a execução de um movie do Adobe Flash necessita da instalação do respetivo leitor. Do mesmo modo, as aplicações Microsoft Silverlight requerem a utilização do respetivo plugin.

6.1.4 AJAX De acordo com Garrett (2005), que introduziu o conceito de AJAX, o desafio mais interes sante para o design de conteúdos multimédia interativos consiste na criação de páginas web. O autor afirmava então que, a probabilidade de se ouvir alguém a comentar sobre o design interativo de alguma aplicação que não se encontrasse na web seria muito redu zida, já que a maioria dos novos projetos e inovações se encontravam online. Apesar de tudo, os novos projetos de aplicações multimédia online continuavam, naquela altura, a não rivalizar com as aplicações multimédia desktop, pois estas aplicações possuíam uma riqueza e capacidade de resposta que parecia fora do alcance de aplicações desenvolvidas para a web. De facto, a mesma simplicidade que permitiu a rápida proliferação das aplica ções web também criou uma lacuna entre as experiências que permitia proporcionar e as experiências interativas possibilitadas a partir de uma aplicação desktop. Contudo, essa lacuna foi parcialmente reduzida com a introdução do AJAX. Por exemplo, quando se utiliza o Google Suggest nota‑se imediatamente como os termos sugeridos se atualizam instan taneamente à medida que se introduzem os termos de uma pesquisa. Este é um exemplo de uma nova abordagem para aplicações web que Garrett (2005) designou por AJAX. Esta designação resulta da abreviação de Asynchronous JavaScript and XML, e introduziu uma mudança fundamental nas possibilidades de desenvolvimento de aplicações multimédia interativas para a web. Garrett (2005) afirmou que o AJAX não consiste numa única tecnologia. Trata‑se, na rea lidade, de um conjunto de várias tecnologias, cada uma proporcionando funcionalidades autónomas, que veio alargar o leque de possibilidades disponíveis para o desenvolvimento de aplicações web. De uma forma sintética, podemos afirmar que o AJAX possui as se guintes características: ■■

Criação de páginas web baseada em normas internacionais, mediante a utilização de XHTML e CSS;

■■

Apresentação dinâmica e interação com o DOM;

■■

Transferência e manipulação de dados baseados em XML e XSLT;

■■

Transferências assíncronas baseados no comando XMLHttpRequest;

■■

Utilização da linguagem JavaScript para interligar todos estes componentes.

Conforme se descreveu anteriormente, de acordo com o modelo clássico das aplicações web, a maioria das mensagens trocadas entre os clientes (browsers) e os servidores é 130