qren smartcp prototipagem e comparação de tecnologias ria vol1 1.1

SmartContentProvider | Entidade Promotora: Parceiros:

Projeto em curso com o apoio de:

18/04/2013

Prototipagem e Comparao de Tecnologias RIA Vol 1



ndice

ndice Figuras .................................................................................................................................3

ndice de Tabelas ...........................................................................................................................5

Introduo .....................................................................................................................................6

Introduo aos RIA ........................................................................................................................7

Tecnologias RIA em estudo ...........................................................................................................8

Silverlight .......................................................................................................................................9

Ferramentas ............................................................................................................................11

Formatos .................................................................................................................................14

Linguagens ...............................................................................................................................15

Prottipos ................................................................................................................................16

Vdeo ...................................................................................................................................16

Objectos 3D .........................................................................................................................17

WebCam ..............................................................................................................................19

Upload de Ficheiros .............................................................................................................20

Interaco ............................................................................................................................23

Flash .............................................................................................................................................26

Ferramentas ............................................................................................................................28

Formatos .................................................................................................................................30

Linguagens ...............................................................................................................................31

Prottipos ................................................................................................................................32

Objectos 3D .........................................................................................................................32

WebCam ..............................................................................................................................39


Interaco ............................................................................................................................45

HTML5 .........................................................................................................................................48



Ferramentas ............................................................................................................................50

Formatos .................................................................................................................................53

Prottipos ................................................................................................................................55

Video ...................................................................................................................................55

Objectos 3D .........................................................................................................................60

WebCam ..............................................................................................................................64


Interaco ............................................................................................................................70



ndice Figuras

Figura 1: Visual Studio 2012 ........................................................................................................11

Figura 2: Exemplo de utilizao do Microsoft Expression Blend ................................................13

Figura 3: Exemplo do Player Framework ....................................................................................17

Figura 4: Exemplos de objectos 3D importados de outros programas para Silverlight .............18

Figura 5: Exemplo de cubo 3D com efeito de perspectiva e de iluminao feito no Silverlight 3D

.....................................................................................................................................................19

Figura 6: Exemplo de captura e utilizao ..................................................................................20

Figura 7: Exemplo do file uploader ++ ........................................................................................21

Figura 8: Exemplo de upload de figuras com apresentao de miniatura para cada uma ........22

Figura 9: Exemplo de testes efectuado durante as pesquisas ....................................................23

Figura 10: Exemplo de galeria fotogrfica ..................................................................................24

Figura 11: Galeria grfica interactiva ..........................................................................................24

Figura 12: Exemplo de utilizao do Adobe Flash CS6 Professional ...........................................29

Figura 13: Exemplos de rendering com wireframes efectuados pelo Flash 3D Experiments .....33

Figura 14: Exemplo interactivo de simulao de fsica ...............................................................33

Figura 15: Exemplo de exploso com partculas do Alternativa 3D............................................35

Figura 16: Vila 3D inteiramente desenvolvida com o Alternativa 3D .........................................35

Figura 17: Templo romano com efeitos de luz, sobra e interactividade ....................................36

Figura 18: Exemplo simples de criao de esfera com polgonos ...............................................37

Figura 19: Exemplo de objecto com superfcie reflectora do meio envolvente .........................38

Figura 20: Exemplo de personagem criado com o Away3D........................................................38

Figura 21: Deteco vectorial da face .........................................................................................40

Figura 22: Deteco por pontos da face .....................................................................................40

Figura 23: Aplicaes com sobreposies ...................................................................................41

Figura 24: Etiqueta de deteco..................................................................................................42

Figura 25: Aplicao do objecto 3D sobre a etiqueta .................................................................42

Figura 26: Etiqueta identificativa ................................................................................................43

Figura 27: Aplicao do objecto 3D sobre a etiqueta .................................................................44

Figura 28: Adio de dois ficheiros por drag&drop ....................................................................45

Figura 29: Deteco do movimento ............................................................................................46

Figura 30: Captura de movimento lado a lado com o imagem original capturada ....................46

Figura 31: Exemplo de utilizao do IDE Aptana .........................................................................51

Figura 32: Diferentes alteraes visuais do player de video ......................................................56



Figura 33: Insero de funcionalidades extra .............................................................................56

Figura 34: Vrios exemplos de layout do MediaElements ..........................................................57

Figura 35: Exemplo do DejaVideo com controlos externos ........................................................58

Figura 36: Vdeo original em bruto .............................................................................................59

Figura 37: Vrios exemplos de aplicaes de fundos e efeitos especiais ...................................60

Figura 38: Exemplos de reflexos e texturas ................................................................................61

Figura 39: Exemplo de personagem animadas 3D e exemplo complexo ...................................62

Figura 40: Exemplos obtidos por via do Three.js ........................................................................63

Figura 41: Exemplos obtidos por via do jsc3d .............................................................................64

Figura 42: Exemplo de deteco de face por via de HTML5 .......................................................65

Figura 43: Exemplo de captura de webcam por via de jQuery webcam ....................................66

Figura 44: Exemplo de upload de mltiplos ficheiros por via do Multiple File Upload with

HTML5 ........................................................................................................................................68

Figura 45: Exemplo de uploader escrito em HTML .....................................................................69

Figura 46: Exemplo do Big Upload ..............................................................................................70

Figura 47: Exemplo de utilizao do Multitouch Toy ..................................................................71



ndice de Tabelas

Tabela 1: Novas Tags do HTML5 .................................................................................................48

Tabela 2: Novos formulrios no HTML5 ......................................................................................49

Tabela 3: Tags abandonadas no HTML 5 .....................................................................................49



Introduo O presente documento Prototipagem e comparao de Tecnologias RIA Volume 1, 2 e 3

constitui um dos resultados da fase de Estudos Preliminares do projecto SmartCP. Em

particular, sumariza o trabalho realizado no contexto da tarefa Prototipagem e comparao

das principais tecnologias RIA actuais.

Com este estudo, pretende-se numa primeira etapa, efectuar o levantamento das diversas

tecnologias RIA disponveis, tanto num contexto mais convencional de utilizao em

computador e browser web assim como no contexto de ambientes mveis. Numa segunda

etapa, pretende-se aprofundar as tecnologias previamente analisadas e efectuar a

experimentao prtica com diversos prottipos que sejam capazes de evidenciar as vantagens

e pontos fracos de cada tecnologia.

ainda importante frisar que a rea das tecnologias associadas aos RIA muito dinmica e est

em constante alterao e evoluo. Dai a necessidade de efectuar periodicamente este estudos

de anlise e de comparao para ser possvel, acompanhar esse ritmo elevado de evoluo e

de constante mudana.

O presente documento constitudo por diversas seces, sendo apresentadas

individualmente de seguida.

Introduo aos RIA, no primeiro volume, a seco onde se efectua uma apresentao e

esclarecimento dos conceitos basilares associados ao contexto dos RIA.

Na seco Tecnologias RIA em estudo, no primeiro volume, so apresentadas de uma forma

breve, as diversas tecnologias que sero analisadas em maior profundidade ao longo deste

mesmo documento.

De seguida surgem no documento as seguintes seces, cada uma referente a uma tecnologia

concreta, nomeadamente; Silverlight, Flash, HTML5 no primeiro volume, e Android, iOS,

Windows Phone, Windows 8, PhoneGap e Appcelerator Titanium no segundo volume. Todas

estas seces seguem um padro referente s subseces para cada uma delas. Essas

subseces so as Ferramentas, os Formatos, as Linguagens e os Prottipos. Por sua

vez a subseco dos prottipos ainda pode estar subdividida noutras seces mais pequenas,

como por exemplo Vdeo, Objectos 3D, WebCam, Upload de Ficheiros e interaco.

No fim do documento (terceiro volume) ainda apresentada outra seco sobre Prottipos

Nativos em tecnologias mobile, onde se analisa a aplicao VIATECLA Nicereader, que constitui

um exemplo de aplicao transversal de vrias destas tecnologias. Por fim, ainda se analisa em

maior detalhe e com os respectivos prottipos a utilizao de Acelermetros, Giroscpios,

Multi-Touch e Armazenamento e Persistncia de Dados.



Introduo aos RIA

O termo RIA tem origem no ingls Rich Internet Application que em Portugus significa

Aplicao de Internet Rica e a designao atribuda a aplicaes Web com capacidades e

funcionalidades avanadas, que permitem ao utilizador obter uma maior experincia de

utilizao.

Os RIA, so aplicaes Web que possuem capacidades e funcionalidades que anteriormente s

estavam disponveis em aplicaes desktop e que eram caracterizadas por serem apelativas

visualmente, interactivas e com recurso a vrios contedos multimdia. At pouco tempo as

aplicaes web eram simples do lado do utilizador, pois todo o trabalho de processamento e a

informao utilizada durante a experiencia do utilizador, estava do lado do servidor. Sendo a

aplicao do lado do utilizador uma simples tela de exibio com interaces muito limitadas.

Com os RIA, parte significativa do processamento pode ocorrer do lado do utilizador, sendo

assim possvel aplicaes muito mais complexas e envolventes, tanto a nvel de funcionalidades

como de aspecto grfico. Com os RIA, o processamento passa em parte significativa para o lado

do utilizador, mas os dados necessrios ao decorrer da aplicao por norma ficam em grande

parte do lado servidor.

Com o surgimento dos RIA, foi possvel facultar ao utilizador, mesmo com poucos

conhecimentos tcnicos de informtica, ferramentas eficazes de lazer ou de trabalho que

destacam-se por serem intuitivas e de fcil aprendizagem e manuseamento.

A usabilidade proveniente dos RIA, tambm geralmente entendida como garantia de

interactividade dos produtos e so agradveis do ponto de vista do utilizador. Para isso o

produto tem de ser eficiente, executar a funcionalidade para a qual foi desenvolvido com

rapidez e segurana, ter uma curva fcil de aprendizagem, assim como, tambm seja fcil o seu

reconhecimento quando usado novamente.



Tecnologias RIA em estudo

As tecnologias RIA sero estudadas em duas partes, sendo a primeira, o levantamento das

propriedades de cada uma e na segunda parte atravs da prototipagem de pequenas aplicaes

em cada uma das tecnologias. Elas so divididas em dois grupos diferentes, as de uso

convencional e as de utilizao em contexto mobile ou tablet.

Essas tecnologias RIA no contexto convencional de utilizao via browser Internet sero:

Silverlight;

Flash;

HTML5.

J no contexto mobile e tablet as tecnologias analisadas sero:

Desenvolvimento nativo em Android;

Desenvolvimento nativo em iOS;

Desenvolvimento nativo em WinPhone;

Desenvolvimento nativo em Windows 8;

Appcelerator Titanium.

PhoneGap

De seguida as tecnologias anteriormente referidas sero analisadas em profundidade.



Silverlight

A tecnologia Silverlight foi lanada em Abril de 2007 e era visto, na altura, como uma futura

alternativa ao dominante Flash. Foi tambm uma tomada de posio e um investimento da

Microsoft tendo em conta a crescente necessidade de aplicaes RIA. Actualmente o Silverlight

encontra-se na sua quinta verso que foi lanada a 8 de Maio de 2012. No entanto a Microsoft

anunciou que ir continuar a manter e a dar apoio, mas que no iria lanar novas verses de

Siverlight.

Para alm da aplicao do Silverlight em contextos de RIAs, esta tecnologia tambm tinha o

intuito de se apresentar como uma forma alternativa para a transmisso de vdeo e udio com

alta qualidade. Nessa rea tambm teve bastante sucesso devido utilizao do codec VC-2 nas

primeiras verses e actualmente tambm com o codecH.264 que possibilita uma transferncia

de dados com maior qualidade sendo possvel trabalhar com resolues Full HD, sem sacrificar

a taxa de transferncia de dados nem a utilizao do CPU.

A nvel tcnico, uma aplicao em Silverlight formada por 2 arquivos, um arquivo de XAML

(eXtensible Application Markup Language) que representa todas as estruturas visuais

apresentadas na interface grfica da aplicao e outro escrito numa linguagem de programao

.NET para efectuar a manipulao dos mesmos elementos presentes no XAML.

No entanto o Silverlight no se resume apenas a criar aplicaes RIA que sejam atrativas e

apelativas para o utilizador do ponto de vista grfico, mas tambm permite aceder a

dispositivos externos, como por exemplo webcams e microfones, efectuar impresses e utilizar

acelerao por hardware a nvel de GPU (placa grfica) e assim, adicionar fluidez e dinmica a

todos os contedos produzidos e exibidos.

Uma outra vantagem na utilizao da tecnologia Silverlight da Microsoft para o

desenvolvimento de aplicaes RIA o facto desta tecnologia ser optimizada para interagir e

ser pesquisvel por motores de busca. Desta forma, o Silverlight utiliza como container

(agrupamento de todos os elementos constituintes da aplicao Silverlight) um ficheiro com o

formato do tipo ZIP, designado por XAP e pode ser acedido por qualquer tipo de leitor de

ficheiros ZIP. O contedo da aplicao guardado num XAML que legvel e que pode ser lido

pelos mecanismos de pesquisa dos motores de busca ou por qualquer leitor de XML tornando

os contedos da aplicao pesquisveis e indexveis.

Para que o utilizador possa executar aplicaes RIA, ou outro tipo de aplicaes, desenvolvidas

em Silverlight, apenas necessrio instalar um plug-in SilverLight Runtime, com cerca de 6Mb.

Neste ponto reside uma das maiores limitaes desta tecnologia, a necessidade de instalar

plug-ins nos dispositivos onde se pretende visualizar os contedos.



Como requisitos mnimos, para se executar uma aplicao de Silverlight necessrio um

computador com processador X86 ou X64, com 1.6GHz e com 512mb de RAM. O Silverlight est

disponvel para os sistemas operativos Windows e Macintosh. Tambm est disponvel uma

implementao open source do Microsoft Silverlight para o Linux e outros sistemas operativos

baseados em Unix. Esta implementao est englobada no projecto Mono que patrocinada

pela Novell e conta com o apoio da prpria Microsoft.

A nvel mvel o Silverlight estava disponvel na plataforma Windows Mobile que entanto foi

descontinuada. O Windows Phone, o sucessor do Windows Mobile, embora no suporte

Silverlight, continua a usar grande parte da sua API, assim como os ficheiros XAML para a criao

e definio dos elementos grficos apresentados nas interfaces grficas.



Ferramentas

A nvel de ferramentas no contexto do Silverlight, a principal o Visual Studio. O Visual Studio

um pacote de programas da Microsoft para o desenvolvimento de aplicaes de software,

principalmente dedicado framework.NET e conta com ferramentas e mdulos especialmente

concebidos para o desenvolvimento de aplicaes Silverlight.

Uma das principais componentes do VisualStudio o editor de cdigo que funciona como IDE

que utiliza destaque da sintaxe no cdigo, para ser mais fcil a percepo e localizao de erros

ou de incompatibilidades. Utiliza tambm o IntelliSense que permite uma rpida navegao por

parte do programador dentro das bibliotecas das linguagens. Tambm suporta a criao de

marcaes nos cdigos, para serem localizadas mais facilmente no futuro.

Agregado a este editor de cdigo do VisualStudio, existe tambm a ferramenta de debugger

que pode ser utilizado em qualquer linguagem suportada pelo Visual Studio. Essencialmente

essa ferramenta oferece ao programador, a possibilidade de detectar, isolar, analisar e por fim,

resolver erros nos programas desenvolvidos. Essa deteco, anlise e deteco de erros pode

ser efectuada tanto em momento de compilao como em runtime. Permite ainda uma

monitorizao da aplicao que seja executada tanto em single thread como em multi thread.

A Figura 1 apresenta um exemplo de utilizao da ultima verso do Visual Studio.

Figura 1: Visual Studio 2012

As ferramentas anteriormente apresentadas do VisualStudio eram essencialmente destinadas

programao da parte lgica das aplicaes criadas, no entanto, tambm existe uma



ferramenta destinada exclusivamente concepo e desenvolvimento da parte grfica das

aplicaes. Essa ferramenta, permite criar e editar objectos visuais apenas por edio visual

sem ser necessrio recorrer a cdigo fonte. No caso do Silverlight, todos os elementos

desenhados visualmente so automaticamente traduzidos para a linguagem XAML, que onde

se regista toda a informao necessria para representar os elementos grficos concebidos em

Silverlight.

A ferramenta anteriormente descrita para a criao e edio visual dos elementos grficos do

Silverlight integrada no VisualStudio e especialmente concebida para programadores. No

entanto, a Microsoft tambm desenvolveu o Expression Blend que uma ferramenta que faz

parte do Microsoft Expression Suite. Essa ferramenta permite mesma a criao visual dos

elementos grficos do Silverlight, no entanto, uma ferramenta destinada a designers e no

tanto a programadores. J as suas capacidades de criar animaes e elementos grficos bem

mais sofisticada e eficiente do que na ferramenta embutida no VisualStudio.

Assim, as grandes vantagens do Expression Blend so a possibilidade de ser possvel a criao

de objectos grficos, animaes e de interactividade sem ser necessrio escrever cdigo fonte.

Desta forma, poupa-se tempo com erros de compilao ou incompatibilidades. Pois o cdigo

gerado ser automtico, minimizando o factor erro.

Tambm possvel importar elementos de programas externos, como o caso do Adobe

Photoshop e do Adobe Illustrator. Desta forma, possvel criar uma imagem no Photoshop com

vrios layers e com diferentes caractersticas e importar essa imagem para o Expression Blend

sem que exista perda dessas propriedades, possibilitando at a escolha dos layers que o

programador/designer pretende importar do Photoshop.

A Figura 2 apresenta um exemplo de utilizao do Blend.



Figura 2: Exemplo de utilizao do Microsoft Expression Blend



Formatos

O formato XAP gerado aps a compilao e o deploy da aplicao. Este ficheiro o pacote da

aplicao desenvolvida em Silverlight e encapsula os arquivos da aplicao. O XAP no passa de

um ficheiro .ZIP, semelhana do que acontece no Java com os ficheiros .JAR. utilizado para

minimizar o tamanho da aplicao, diminuindo o tempo de download.

O utilizador pode ter acesso ao contedo do arquivo .XAP bastando extrair os ficheiros como

um arquivo .ZIP normal, obtendo os diversos ficheiros. O ficheiro mais importante o

AppManifest que o responsvel pela organizao e ligao dos vrios elementos quando a

aplicao executado por parte do utilizador.

Quando o cliente inicia a aplicao desenvolvida em Silverlgiht, o Silverlight Runtime

responsvel por transferir o ficheiro .XAP para o computador do cliente e pela interpretao e

execuo da aplicao.

J o formato csproj um formato que agrega um conjunto de ficheiros que constituem o

projecto de desenvolvimento das aplicaes em Silverlight. Este formato, tambm tem a

vantagem de poder ser utlizado e compatvel nas vrias ferramentas, necessrias ao

desenvolvimento de aplicaes em Silverlight. Evita-se assim a converso de projectos. Esta

caracterstica, mais uma vez, facilita a vida na ligao entre o designer e o programador durante

o ciclo de desenvolvimento da aplicao.



Linguagens

Para desenvolver aplicaes em Silverlight pode ser utilizada qualquer linguagem .NET, mas o

C# sem dvida a linguagem mais utilizada e a que trs mais potencial s aplicaes

desenvolvidas. O C# uma linguagem orientada a objectos e fortemente tipada que foi

desenvolvida como parte da plataforma .NET, plataforma esta, que o C# utiliza para obter as

suas classes e funes, funcionando como uma biblioteca para a linguagem.

Como foi criada quase de raiz pela Microsoft para funcionar com a plataforma .NET,

considerada at a linguagem smbolo do .NET. O C# tem uma grande compatibilidade com as

restantes tecnologias da Microsoft e assim, a possibilidade de efectuar muitas interaces com

diferentes mdulos com o mnimo de falhas. Desta forma o programador pode integrar a sua

aplicao RIA com WinForms, SQL Server, WebService ou at mesmo o Azure com o mnimo de

incompatibilidades ou falhas.

O facto de possuir um esquema de garbage colector, processo executado para gesto de

memria, torna possvel a recuperao de zonas de memrias que a aplicao j no est a

utilizar, evita que a aplicao perca performance e seja interrompida indevidamente por falta

de memria. Isto tambm uma grande vantagem para aplicaes RIA que exijam muita

memria por parte do computador ou do dispositivo atravs do qual o utilizador acede. Outra

vantagem da utilizao do C# o facto do mesmo permitir um modelo de execuo multi-

thread.

O XAML (eXtensible Application Markup Language) uma linguagem da Microsoft desenvolvida

especialmente a pensar na criao de interfaces grficas. A titulo de exemplo ela utilizada na

criao de aplicaes em Silverlight, WPF e Windows Phone.

Ela uma linguagem declarativa atravs da qual o programador pode inicializar objectos e

definir as suas propriedades de forma simples e intuitiva. A linguagem XAML desempenha um

papel essencial nas aplicaes desenvolvidas em Silvelight, ficando a cargo da declarao de

estilos e modelos aplicados a uma base lgica nos controlos do Silverligth. O programador pode

utilizar o XAML para alterar controlos existentes ou pode criar um novo modelo de raiz.

tambm um formato comum s principais ferramentas de edio da Interface da aplicao,

sendo possvel trocar ficheiros entre o Expression Blend e o Visual Studio sem qualquer

problema de compatibilidade

Atravs da utilizao do XAML para realizar a gesto da Interface, foi criada uma diviso clara

de quais as responsabilidades entre designers e programadores, sendo o XAML a ponte de



comunicao entre ambos. Esta diviso, torna mais fcil a criao de um fluxo de trabalho para

o designer, responsvel pela forma como a interface apresentada e um outro fluxo para o

programador, responsvel pelo comportamento e das funcionalidades lgicas que devem ser

aplicadas a essa interface dentro da aplicao.

Alm das vantagens em termos de organizao de trabalho e de tempo, a separao da

interface das funcionalidades do programa, tambm podem ser muito teis quando

pretendida uma alterao no programa, ao contrrio do que acontece no Adobe Flash. Assim,

sempre que necessrio alterar um elemento da interface no existe a necessidade do

programador ter que voltar a redefinir as funes, sendo que a alterao de elementos na

interface do utilizador, no ir afectar as funes para as quais o programa foi desenvolvido.

Prottipos

No contexto do Silverlight foi realizado um conjunto de prottipos e experimentao

tecnolgica para analisar a riqueza e possibilidades desta tecnologia.

Vdeo

Na rea de vdeo o Silverlight dispe de um player nativo bastante completo e funcional que

utilizado na maioria das situaes em que necessrio inserir um player de vdeo em sites ou

aplicaes RIA que utilizem Silverlight. Dessa forma, a necessidade de ter um player enriquecido

com novas funcionalidades, muito mais reduzida do que acontecia por exemplo no HTML5.

No entanto ainda existem situaes (especificas do ponto de vista de design e de integrao de

funcionalidades) em que pode ser necessria a alterao do player nativo do Silverlight.

O prottipo apresentado designado por Player Framework e uma aplicao open source

fornecida pela prpria Microsoft e que se encontra sobre a alada da licena Ms-PL (Microsoft

Public License).

Este player tanto funciona em aplicaes web como em ambientes desktop, incluindo o

Windows 8 e o Windows Phone 8. O player suporta os mais variados formatos de vdeo assim



como os formatos de Smooth Streaming da Microsoft. Tambm suporta legendas em diversos

formatos assim como diversas formas e mecanismos de inserir contedos publicitrios

dinmicos no vdeo. Permite ainda alterar facilmente o layout e o visual grfico do prprio

player recorrendo apenas edio de ficheiros XAML (que controla a aparncia grfica da

interface do player).

Na Figura 3 possvel observar um exemplo de design minimalista aplicado a este player.

ainda de salientar que na barra de slider temporal aparece um circulo exageradamente grande.

Esse circulo destina-se aos dispositivos moveis e tcteis, de modo a facilitar a utilizao touch

com o dedo.

Figura 3: Exemplo do Player Framework

Objectos 3D

Na rea 3D, o Silverlight j tem muitas funcionalidades e ferramentas para criar estruturas 3D

complexas. O prottipo apresentado de seguida dedicado a permitir a importao para

Silverlight de modelos 3D construdos noutras aplicaes, nomeadamente formatos XNA.

Permite-se assima reutilizao dessas formas, de modo a evitar que tenham de ser criadas

novamente de raiz.



A Figura 4 apresenta dois exemplos de modelos 3D utilizados em aplicaes XNA e que foram

importados para Silverlight.

Figura 4: Exemplos de objectos 3D importados de outros programas para Silverlight

Ao contrrio do prottipo anterior, o Silverlight 3D no destinado a importar objectos 3D

criados por outras aplicaes, mas sim destinado a criar de raiz esses objectos num contexto

inteiramente Silverlight. Com esta biblioteca possvel criar inteiramente os objectos, adicionar

efeitos de perspectiva, aplicar transformaes vectoriais e efeitos de luz linear ou em gradiente,

assim como efeitos de reflexo. ainda possvel aplicar efeitos de translao, rotao e

alteraes de tamanho.

Na Figura 5 apresentado um exemplo criado pelo Silverlight 3D, onde so facilmente visveis

os efeitos de luz e de perspectiva.



Figura 5: Exemplo de cubo 3D com efeito de perspectiva e de iluminao feito no Silverlight 3D

WebCam

Na rea de Webcams o Silverlight j apresenta suporte nativo para a utilizao dessa tecnologia

em aplicaes RIA. Ainda assim, existem alguns prottipos desenvolvidos para utilizar as

capacidades de vdeo e de webcam do Silverlight em contextos especficos. o caso do

prottipo seguinte, que foi desenvolvido para ser uma verso moderna de retroprojector, ou

seja, apresentar documentos impressos em papel e/ou histricos que no estejam digitalizados

num anfiteatro equipado com projector digital.

O prottipo bastante simples, designado por SilverlightCamPresenter e dispe de diversas

ferramentas para ajustar a imagem capturada.

Na Figura 6 apresentado um exemplo da sua utilizao.



Figura 6: Exemplo de captura e utilizao

Upload de Ficheiros

O Silverlight na rea dos uploads tambm j tem as ferramentas bsicas para a sua

implementao e utilizao.

O prottipo seguinte foi desenvolvido com o objectivo de enriquecer ainda mais essas

funcionalidades base. Chama-se File Uploader++ e desenvolvido recorrendo a C#, Javascript

e Silverlight.

As grandes vantagens que ele fornece so a capacidade de ser possvel colocar o upload em

pausa e em resumo. Tambm permite continuar com uploads que tenham sido interrompidos

abruptamente, desta forma garante-se que no h grandes perdas e a necessidade de repetir

o upload desde o inicio. Por fim, o upload tambm efectuado com mais segurana que os

uploadres normais, pois, este encriptado durante a sua transmisso.



Na Figura 7 apresentado um exemplo de utilizao do File Uploader++, este exemplo est

completamente reduzido na sua interface grfica e apenas serviu para testar a logica e as suas

funcionalidades operacionais. Na imagem tambm apresentada uma mensagem de sucesso

pelo upload ter sido concludo.

Figura 7: Exemplo do file uploader ++

De seguida apresentado o prottipo Silverlight File Upload. Este prottipo ao contrrio do

anterior permite o upload mltiplo de ficheiros. Tambm permite estabelecer limitaes

quanto dimenso dos ficheiros a serem transmitidos. Para isso, basta editar os parmetros

maxRequestLength e minRequestLength presentes no web.config do projecto.

Este sistema, tambm permite colocar os ficheiros em pausa durante o upload e permite editar

a lista de ficheiros que vo ser efectuados os uploads.

Tambm detecta os ficheiros que j existam no destino, lanado assim, uma mensagem de

alerta a perguntar se se pretende reescrever o ficheiro ou cancelar o seu upload, visto esse

ficheiro j existir.

Este prottipo, no upload de imagens tambm apresenta novidades. Nomeadamente a

capacidade de fazer alteraes ao tamanho da imagem automaticamente e apresentar



miniaturas durante o upload. A questo de efectuar a alterao de tamanho muito importante

para limitar que os utilizadores enviem imagens de dimenses demasiado elevadas. Com esta

ferramenta ento possvel, normalizar automaticamente a coleco de imagens obtidas. A

Figura 8 apresenta, um exemplo de upload com miniaturas de figuras.

Figura 8: Exemplo de upload de figuras com apresentao de miniatura para cada uma

J a Figura 9, apresenta o prottipo simples resultante das nossas pesquisas, em que

efectuado o upload simultneo de vrios ficheiros.



Figura 9: Exemplo de testes efectuado durante as pesquisas

Interaco

Ao nvel da interaco o Silverlight desde o seu inicio, sempre foi orientado e optimizado de

modo a que a interaco com o utilizador fosse fluida e agradvel, de modo a providenciar uma

boa experincia de utilizao com as aplicaes RIA desenvolvidas em Silverlight.

No entanto surgiram diversas bibliotecas e ferramentas para melhorar ainda mais essa

interaco e/ou facilitar o trabalho de desenvolvimento dos programadores.

Uma dessas ferramentas de destaque o MIRIA SDK Multi device Input UI controls for

Silverlight and Moonlight. Essencialmente biblioteca open source sobre a licena GNU LGPL

para facilitar os eventos multitouch em dispositivos com aplicaes Silverlight. Adicionalmente,

tambm permite servir de interface utilizao de outros dispositivos de controlo gestual,

nomeadamente o Wii Remote e o Kinect Sensor. Pode ainda interagir com os sensores de

movimento dos dispositivos mobile e tablet.



Figura 10: Exemplo de galeria fotogrfica

Figura 11: Galeria grfica interactiva

Ao nvel das superfcies tcteis, ele permite detectar aces de hold, tap, translate, rotate, scale

e de slide. Garantido assim uma total cobertura das necessidades de aplicaes que pretendam

interagir com o utilizador por via tctil.



Na Figura 10 apresentado um exemplo de uma galeria fotogrfica, onde possvel observar

(no centro da figura) uma circunferncia amarela, que representa a simulao de onde foi

efectuado o ltimo toque. Na figura no possvel observar, mas o utilizador pode imprimir

acelerao galeria horizontalmente para aceder a outros contedos fotogrficos.

Na Figura 11, apresentado outro exemplo que consiste numa aplicao para explorar imagens

de outra forma. Aqui, e recorrendo novamente ao toque, o utilizador pode seleccionar figuras

da lista esquerda, e interagir com elas do lado direito como se se tratasse de folhas em cima

de uma mesa, onde possvel sobrepor as imagens, desloca-las para vrios stios e inclusive

amplia-las e reduzi-las.



Flash

O Flash foi uma das primeiras tecnologias e durante muito tempo, a tecnologia dominante e

por excelncia utilizada para a criao de aplicaes RIA na Web. No entanto, sempre foi

criticada devido a sua fraca performance, consumo excessivo de recursos e falhas criticas de

segurana.

Inicialmente o Flash chamava a ateno do utilizador comum com a criao de animaes

simples e imagens em movimentos que eram inseridos principalmente em baners e em reas

de publicidade. As primeiras verses de Flash exigiam grandes competncias por parte dos

programadores, principalmente para a programao do ActionScript, sendo a sua aplicao

maioritariamente simplista. Com o passar do tempo, a sua framework de desenvolvimento foi

evoluindo e tornou mais fcil o desenvolvimento de aplicaes completas com as

funcionalidades do Flash. J esse processo de desenvolvimento foi gradualmente sendo mais

grfico e apelativo tanto para os designers como para os programadores.

Estima-se que actualmente o Flash Player (plug-in necessrio execuo de contedos em

Flash) esta actualmente instalado em cerca de 85% dos computares pessoais e portteis que

acedem internet. Esta grande adeso por parte dos utilizadores tecnologia Flash em

grande parte devida utilizao desta plataforma multimdia para a reproduo de vdeos em

pgina web, nomeadamente casos como o Youtube e Vimeo. No entanto tal valor (85%) j foi

mais elevado no passado e prev-se que continue a decrescer medida que proliferam

dispositivos moveis que no suportam Flash e medida que os sites web vo sendo convertidos

para formatos de vdeo baseado em HTML5.

Quando adquirida pela Adobe Systems (anteriormente pertencia a Macromedia) a plataforma

Flash sofreu grandes evolues. Principalmente ao nvel de ferramentas de desenvolvimento,

com a criao do Adobe Flash CS3 Professional que tinha total suporte para a linguagem

ActionScript e que permitia uma melhor integrao com outros produtos da empresa como o

Photoshop. Possibilitava tambm, ao programador, uma melhor experiencia de criao e

manipulao de vectores, assemelhando-se ao Adobe Illustrator e ao Adobe Fireworks.

Com um grande nmero de actualizaes desde ento, actualmente o Adobe Flash suporta

streaming bidireccional de vdeo e udio, consegue receber do utilizador instrues a partir do

rato e do teclado, possibilita tambm recorrer ao microfone e a webcam como meio de

interaco com as aplicaes em Flash.



Tal como o Java, o Flash Player executa utilizando uma Mquina Virtual com SandBoxes onde

os ficheiros executveis SWF so colocados. Atravs desde mtodo de segurana os dados

podem ser guardados na mquina do utilizador para serem acedidos mais tarde, pois de outra

forma o acesso ao disco rgido do utilizador no ser permitido.

Actualmente o Adobe Flash Player encontra-se na verso 11.7, verso esta que sofreu algumas

alteraes em termos de segurana e de performance. Esta verso foi lanada a 9 de Abril de

2013.



Ferramentas

A principal ferramenta de desenvolvimento e criao de aplicaes em Flash o Adobe Flash

CS6 Professional. Esta verso mais recente da framework de Flash foi lanada em Maio de 2012

e o culminar de uma evoluo muito longa desta framework de desenvolvimento. A primeira

verso surgiu em 1996 com o nome de FutureSplash Animator e consistia num programa de

criao e manipulao de grficos vectoriais e de animaes totalmente baseadas em vectores.

Aps ser associado ao Flash pela empresa Macromedia, foi alterado e novas funcionalidades

foram implementadas e direccionadas cada vez mais para a criao de animaes e

movieclips. Sempre com o objectivo de facilitar ao programador, a criao de animaes,

possuindo desde cedo uma biblioteca de objectos, um grande nmero de efeitos e o streaming

de vdeo e de mp3.

O Flash recebeu suporte para o ActionScript 1.0 na verso 5, lanado no ano de 2000 e desde

ento essa linguagem tem sido a principal base na manipulao das animaes em Flash, verso

que recebeu tambm suporte para o XML e para a criao e formatao de textos dinmicos

atravs de HTML.

Na Figura 12 possvel observar um exemplo de utilizao do Adobe Flash CS6 Professional.



Figura 12: Exemplo de utilizao do Adobe Flash CS6 Professional

O Adobe Flash CS6 Professional no a nica de ferramenta de desenvolvimento em Flash.

Existem diversas outras ferramentas, algumas open source, outras proprietrias, desenvolvidas

por outras companhias. No entanto tambm se destaca o Flash Builder (tambm desenvolvido

pela Adobe), no sendo uma Framework ou um IDE dedicado, mas uma extenso para o IDE

Eclipse.

Foi desenvolvido a pensar na enorme comunidade de utilizadores do IDE Eclipse e tambm com

o principal objectivo da reduo no tempo de programao das aplicaes RIA. O Flash Builder

oferece ao programador uma experincia de programao em linguagens como ActionScript,

MXML e CSS mais acessvel e mais interactiva e visual.

Tambm oferece ao programador ferramentas de teste que possibilitam o teste da

performance das aplicaes e a utilizao de memria e de CPU, possui uma ferramenta de

monitorizao de transferncia de dados para testar a velocidade de carregamento das



aplicaes em vrias taxas de transferncia. Permite tambm a criao de templates e a

personalizao dos mesmos.

Formatos

O principal formato associado tecnologia Flash o formato SWF que originalmente era a

abreviatura de ShockWave Flash e posteriormente foi alterado para Small Web Format para

evitar a confuso com o Adobe Shockwave. Os ficheiros em SWF, so o resultado da compilao

de ficheiros no formato .FLA.

Os ficheiros com o formato .SWF so basicamente um conjunto de vectores, bitmaps e udio,

que atravs da linguagem ActionScript sofre alterao das suas propriedades para a criao das

animaes e os vrios componentes de uma aplicao RIA.

O formato .SWF um formato binrio que utiliza a compresso Zlib com o objectivo de

armazenar utilizando o menor nmero de bits possveis para possibilitar a criao de ficheiros

pequenos, o que torna a sua execuo mais rpida, principalmente em termos de transferncia

dos arquivos por parte dos browsers. Actualmente a maioria dos browsers compatvel com

este formato de ficheiros, no nativamente mas utilizado o plug-in Adobe Flash Player.

J o formato .FLA anteriormente referido , so os ficheiros com o cdigo fonte dos programas

Flash. So estes ficheiros que possibilitam a gravao do estado actual de um projecto para

futura edio. Para ser publicado ou executado pelo utilizador, o ficheiro em .FLA compilado

num ficheiro no formato .SWF, anteriormente referido.



Linguagens

O ActionScript a principal linguagem utilizada no desenvolvimento de aplicaes em Flash. Foi

desenvolvido inicialmente pela Macromedia em 1998 com o intuito de ser usado para controlar

objectos em filmes do Flash a fim de criar elementos para a navegao e interactividade, o

ActionScript uma linguagem de programao orientada a objectos que principalmente

utilizada no desenvolvimento de aplicaes RIA, sendo pouco utilizada noutros contextos fora

do Flash.

Uma linguagem de programao de scripting, baseada em ECMAScript, do tipo class-less, com

vrios paradigmas de programao sendo a mesma imperativa e funcional, o que trs para o

Flash uma forma de programar flexvel.

Actualmente encontra-se na verso 3.0 e sofreu uma grande evoluo em relao a primeira

verso. Algumas das diferenas mais significativas a introduo de tipos primitivos com maior

dimenso, utilizao de packages nos projectos, a disponibilizao de stack traces tanto nas

exepes em tempo de compilao como em tempo de execuo, suporte nativo e gil s

expresses regulares evitando o recurso a bibliotecas externas.

No mundo do Flash existe ainda outra linguagem muito importante, nomeadamente o MXML.

Ao contrrio do ActionScript que direccionado principalmente para a parte lgica das

aplicaes, o MXML orientado definio das propriedades grficas dos elementos

envolvidos numa aplicao. Como o nome indica, o MXML uma linguagem baseada em XML.

Esta linguagem foi introduzida pela Macromedia, dai a utilizao do sufixo MX, tambm

utilizada para designar os produtos da empresa.

uma linguagem fcil de entender e de programar principalmente para quem j tem alguns

conhecimentos de XML e de HTML. Utiliza tags para criar componentes tais com botes e

menus, e define qual a interaco entre estes e os restantes elementos da aplicao RIA e

elementos externos como bases de dados e webservices.

Como os documentos em MXML so escritos em texto simples, o programador pode utilizar

qualquer tipo de ferramenta de texto em vez dos complexos e pesados IDEs. Os documentos

em MXML tm a extenso .mxml e podem ser utilizados em conjunto com documentos em

CSS. Cada ficheiro em MXML cria uma nova classe que estende a classe assinalada pela tag de

raiz, adicionando a classe criada como uma classe filha da anterior ou como um membro dessa

classe.



Prottipos

Sendo o Flash uma tecnologia bastante madura e com uma existncia tecnolgica prolongadaa,

tambm existe um nmero elevado de prottipos que podem ser apresentados para

exemplificarem as diversas capacidades do Flash. De seguida, ser apresentado um conjunto

de exemplos que demonstra algumas das principais valncias da tecnologia.

Objectos 3D

Na rea 3D, o Flash sempre teve muitas funcionalidades e ferramentas para criar estruturas 3D

complexas.

O prottipo seguinte apresenta algumas pequenas experincias e demonstraes dessas

funcionalidades e designado simplesmente de Flash 3D Experiments e permite criar e

desenvolver objectos e animaes em 3D, assim como simular alguns comportamentos e leis

de fsica.

Na Figura 13 apresentado um exemplo onde so renderizados algumas simples estruturas em

3D com rotao e em wireframe.

J o segundo exemplo, apresentado na Figura 14, uma pequena experincia interactiva que

permite simular leis fsicas. Neste exemplo simplesmente esto a cair esferas sobre uma

superfcie e o utilizador pode controlar alguns parmetros fsicos, nomeadamente a

elasticidade das colises, a intensidade da gravidade e a fora de atrito entre as superfcies.

Permite ainda configurar a posio da camara/ponto de observao em relao aos objectos.



Figura 13: Exemplos de rendering com wireframes efectuados pelo Flash 3D Experiments

Figura 14: Exemplo interactivo de simulao de fsica

Toda a programao tanto do 3D como da lgica inerente aos aspectos de comportamento

fsico so desenvolvidos recorrendo a Actionscript.



O prottipo seguinte designado por Alternativa 3D e essencialmente um motor grfico 3D

muito avanado que corre sobre Flash.

Este prottipo para alm de permitir a interaco por via de teclado e rato, tambm permite

integrar efeitos grficos muito avanados quase ao nvel do OpenGL. Dessas funcionalidades

avanadas, destaca-se a capacidade de simular sistemas de partculas, suportar formatos 3DS e

ter uma elevada performance 3D devido a utilizar acelerao por hardware fornecida pela placa

grfica. A nvel de simulao de efeitos de luz, permite utilizar luz pontual, direccional e

ambiente, e todos os objectos podem ser iluminados at um mximo de seis fontes diferentes

de luz. Permite ainda, simular efeitos de superfcie, ou seja, as texturas dos objectos podem

simular superfcies de aspecto difuso, brilhante ou reflector. Os objectos tambm podem ter

diferentes graus e efeitos de transparncia que permitiro simular, por exemplo, gua ou

nevoeiro.

tambm possvel adicionar Sprites bidimensionais e Sprites 3D com diversos efeitos de

animao, rotao e translao. Suporta ainda o formato da Adobe ATF (Adobe Texture

Format), que um conjunto de algoritmos que permite efectuar a compresso sem perdas de

qualidade das texturas renderizadas, permitindo assim, manter a mesma qualidade grfica e

ainda assim, reduzir o consumo de memria das placas grficas.

Sendo este prottipo destinado a funcionar com o FLASH e maioritariamente em contextos

web, tambm dispe de um algoritmo de compresso binria na serializao dos objectos que

so enviados pela web para o browser do utilizador, de modo a reduzir os tempos de

carregamento e tambm de modo a reduzir as larguras de banda necessrias.

A Figura 15 apresenta um exemplo de exploso recorrendo a efeitos de luz e s capacidades de

sistemas de partculas, em que cada elemento mnimo da exploso tratado como se fosse

uma partcula individual, envolvendo assim uma grande complexidade de clculos para simular

a exploso de elevado realismo.

Na Figura 16 j apresentado um exemplo completamente diferente, em que construda uma

pequena aldeia recorrendo inteiramente s capacidades tcnicas do Alternativa 3D. A nvel

tcnico, destaca-se a existncia de sombras e a existncia de gua e o recurso a mipmaps nas

texturas.

Por fim na Figura 17 apresentado um exemplo interactivo que apresenta um templo romano

com efeitos de luz, sombra e bit mipmaps e brilho nas texturas. Este exemplo tambm

interactivo, por via do teclado e rato e permite ao utilizador navegar no ar livremente e alterar,

sem restries, o seu ponto de vista em relao ao monumento.



Figura 15: Exemplo de exploso com partculas do Alternativa 3D

Figura 16: Vila 3D inteiramente desenvolvida com o Alternativa 3D



Figura 17: Templo romano com efeitos de luz, sobra e interactividade

Outro prottipo semelhante ao anterior o Away3D, essencialmente um motor grfico 3D open

source para permitir criar animaes e experincias em 3D inteiramente sobre a plataforma de

Flash. Essencialmente uma API bastante completa para permitir criar todo o tipo de

animaes e objectos, desde que os programadores tenham conhecimentos mnimos sobre

essa mesma API que toda escrita na linguagem ActionScript.

Esta ferramenta tambm faz uso nativo dos GPUs das mais recentes placas grficas, garantindo

assim uma elevada fluidez de todas as aces e animaes grficas at 60 frames por segundo.

J a parte lgica dos clculos associados s matrizes, necessrias aos clculos dos objectos

grficos, tambm so processados na GPU da placa grfica, para assim poderem usufruir de

paralelizao e obter resultados mais rapidamente do que se esses clculos fossem executados

normalmente pelo CPU.

A nvel de efeitos avanados, tambm possvel simular efeitos de nevoeiro, reflexos, sobras

dinmicas e diversos tipos de iluminao.

Esta ferramenta tambm disponibiliza optimizaes avanadas que s costumam estar

disponveis em APIs grficas mais avanadas tais como o OpenGL e o Direct3D. Uma dessas

optimizaes a capacidade de renderizar apenas as faces visveis dos objectos 3D. No exemplo



de um cubo (6 faces) em rotao, s ser renderizado no mximo 3 fases, pois as restantes

encontrar-se-o na parte posterior do cubo, e no seriam visveis ao utilizador. Este tipo de

optimizao em renderizar os objectos parcialmente e de acordo com o ponto de vista do

utilizador, garante sempre uma poupana de recursos e de clculos.

Na Figura 18 apresentado um simples exemplo de uma esfera construda atravs de polgonos

triangulares. Neste caso tambm aplicada a optimizao de no processar nem gastar

recursos com os polgonos na parte posterior (no visvel) da esfera.

Figura 18: Exemplo simples de criao de esfera com polgonos



Figura 19: Exemplo de objecto com superfcie reflectora do meio envolvente

Figura 20: Exemplo de personagem criado com o Away3D



Na Figura 19 e na Figura 20 so apresentados exemplos concretos mais complexos recorrendo

s capacidades do Away3D. No primeiro caso da Figura 19 criado um meio ambiente

complexo, com montanhas, cu e luz ambiente. No centro, foi colocado um objecto com

superfcie espelhada, reflectindo assim todo o seu meio envolvente, incluindo o sol, ponto de

luz ambiental que ilumina toda a cena.

J na Figura 20 apresentado outro exemplo complexo em que criado um personagem 3D

completo e interactivo em que o utilizador pode controlar recorrendo ao teclado. Esta

personagem virtual pode ento caminhar ou correr em todas as direces, demonstrando assim

as capacidades de movimento e animao dos objectos 3D do Away3D.

WebCam

O projecto e o prottipo Beyond Reality Face destinado utilizar a webcam para detectar e

localizar a face do utilizador, e assim, servir de base para a criao das mais variadas aplicaes

desde simples animaes/sobreposies de elementos ou para deteco de sorrisos e para

onde o utilizador est a olhar, tambm pode ser facilmente aplicado para controlar uma

aplicao s com os movimentos da cara.

Este prottipo recorre a complexos algoritmos matemticos para conseguir calcular a posio

espacial da cara, assim como calcular diversos ngulos, como por exemplo se o utilizador est

a olhar para o lado, para cima ou para baixo, se tem a boca ou os olhos abertos ou fechados.

Consegue ainda obter o tamanho das pupilas dos olhos, e com isso estimar a distncia entre o

utilizador e a webcam. Este prottipo tanto pode funcionar em real time com o contedo

proveniente da webcam, como pode funcionar apenas com uma imagem esttica previamente

capturada.

Na Figura 21 e na Figura 22 so apresentados dois modos diferentes de captura e localizao

da face do utilizador. Na Figura 21 utilizada a deteco vectorial, em que para alm da posio

da face tambm possvel determinar a sua rotao, inclinao assim como a posio da boca

e dos olhos como j foi referido anteriormente.

Na Figura 22 a deteco feita recorrendo a pontos chave no rosto. Por esta via a inclinao e

rotao da face tambm detectvel.



Figura 21: Deteco vectorial da face

Figura 22: Deteco por pontos da face



J na Figura 23 so apresentados dois exemplos de sobreposio de objectos sobre a deteco

facial. O exemplo da direita apresenta uma mscara, e o exemplo da esquerda apresenta a

colocao de culos de sol.

Figura 23: Aplicaes com sobreposies

O prottipo seguinte designado por Stereoscopic 3D Flash Augmented Reality e uma

ferramenta que permite efectuar experincias de realidade aumentada atravs de uma

webcam. Para tal necessrio imprimir uma etiqueta pr-definida que servir para os

algoritmos matemticos a detectarem na imagem capturada pela webcam e ento, sobre essa

marca, adicionado um objecto 3D. Esse objecto 3D acompanhar ento a etiqueta de

marcao, permitindo assim, efectuar aproximaes, afastamentos, translaes e rotaes

sobre a etiqueta, movimentos esses que sero propagados ao objecto 3D. Com este prottipo,

a captura pode ser efectuada com apenas uma webcam ou duas, simulando assim uma viso

estereoscpica.

Na Figura 24 apresentado um exemplo dessa etiqueta de deteco, j na Figura 25

apresentado um exemplo prtico de utilizao deste prottipo.



Figura 24: Etiqueta de deteco

Figura 25: Aplicao do objecto 3D sobre a etiqueta



J o prottipo seguinte designado de Augmented reality using a webcam and Flash.

bastante semelhante ao anterior, no entanto usa maioritariamente funcionalidades nativas da

API do Flash.

Como factor diferenciador do prottipo anterior, aqui existe a possibilidade de apresentar

simultaneamente diversas etiquetas, cada uma associada a objectos diferentes. Este prottipo,

ao contrrio do anterior que estava fixo a uma nica etiqueta, aqui a etiqueta de deteco pode

ser configurada para ser qualquer padro ou imagem, desde que seja a preto e branco.

Na Figura 26 apresentada uma etiqueta personalizada, e na Figura 27 j ento apresentado

o objecto 3D associado a esta etiqueta.

Figura 26: Etiqueta identificativa



Figura 27: Aplicao do objecto 3D sobre a etiqueta

Upload de Ficheiros

Na rea de upload de ficheiros, o Flash tambm apresenta um nmero elevado de ferramentas

e aplicativos destinados a essa funo. A ttulo de exemplo, aqui apresenta-se o SWFupload,

que um uploader bastante completo que permite a seleco de vrios ficheiros em

simultneo, permite visualizar o estado e progresso do upload, permite definir os valores limite,

tanto para o nmero como para o tamanho de cada ficheiro. Permite ainda definir/filtrar o tipo

de ficheiros aceites para o upload, assim como capaz de efectuar ajustes de tamanhos em

ficheiros de imagem, de uma forma totalmente automtica e completamente transparente

para o utilizador.

Na Figura 28 apresentado um exemplo de utilizao deste uploader, em que est a ser

efectuado a adio de dois ficheiros em simultneo para o upload, por via de drag and drop.



Figura 28: Adio de dois ficheiros por drag&drop

Interaco

Na rea de interaco tambm existem diversos prottipos interessantes na rea do Flash. De

seguida apresentado o AS3 Webcam Motion Trackin. Como o nome sugere, o seu objectivo

conseguir detectar movimentos e servir de ferramenta base para outras aplicaes que

utilizem essa funcionalidade um pouco semelhana com o que acontece com o Kinetic da

Microsoft.

O funcionamento deste prottipo baseia-se em algoritmos matemticos que detectam o

movimento na matriz da imagem capturada a partir da webcam.

Na Figura 29 apresentada a imagem da webcam aps o processamento, onde apenas existe

contraste nas zonas que se encontram em movimento. Para facilitar a visualizao e a

compreenso do algoritmo, ainda adicionado um rectngulo em torno da zona de movimento

e uma circunferncia na intercepo de duas rectas. As coordenadas da interseco dessas duas

rectas pode ser posteriormente associadas s coordenas de um cursor de interaco.



Figura 29: Deteco do movimento

Figura 30: Captura de movimento lado a lado com o imagem original capturada



J na Figura 30 apresentado um exemplo concreto de utilizao em que apresentado lado a

lado a imagem original da webcam (esquerda) e a imagem j processada ( direita) em que s

visvel o movimento assim como o rectngulo de deteco de movimento e a circunferncia

de cursor.



HTML5

O HTML a principal e mais difundida linguagem para apresentao de contedos na internet.

atravs dela que os browsers constroem os elementos textuais e visuais para serem exibidos

no ecr do utilizador. O HTML5 a sua mais recente verso que traz um conjunto de vantagens

sobre as anteriores verses. Essas alteraes permitem dotar as pginas web com recursos

multimdia mais ricos e mais interactivos, resultando numa experincia mais enriquecedora

para o utilizador consumidor de contedos.

Outra grande vantagem do HTML5 a possibilidade de poder integrar nas pginas web

contedos multimdia, tais como, canvas, SVGs, udio e vdeo sem recorrer utilizao de

plugins proprietrios externos como era o caso do Silverlight e do Flash. Estas tecnologias eram

problemticas a nvel de portabilidade e compatibilidade entre plataformas e especialmente

problemticas em plataformas mveis, nomeadamente os tablets e os smartphones.

Desta forma com o HTML5 possvel desenvolver nativamente aplicaes RIA sem ter de

recorrer a esses plugins externos, apresentando-se assim como uma alternativa aos

convencionais Silverlight e Flash, com as vantagens de ser nativo (dependendo do browser

utilizado), de no necessrio efectuar qualquer instalao e de consumir menos recursos de

hardware.

Outra grande vantagem a sua transversalidade e funcionalidade multiplataforma, pois ao

contrrio do Flash e do Silverlight o HTML5 funciona em qualquer plataforma

independentemente do sistema operativo, ou at mesmo em dispositivos mobile e tablets.

Esta verso 5 do HTML em relao anterior tem um parsing do cdigo mais flexvel e rpido,

oferece a possibilidade de embutir SVGs e MathML directamente no cdigo HTML5,

acrescentando as seguintes novas tags:

Tabela 1: Novas Tags do HTML5

Article Mark

Aside Meter

Audio Nav

Bdi Output

canvas Progress

Command Rp



Data Rt

Datalist ruby

Details section

Embed source

Figcaption summary

Figure time

Footer track

Header video

Hgroup Wbr

Keygen

Foram ainda adicionados novos controlos nos tipos form (formulrios), nomeadamente:

Tabela 2: Novos formulrios no HTML5

date number

time range

email tel

url color

search

Foram ainda abandonadas de vez algumas Tags que anteriormente j eram consideradas

obsoletas, nomeadamente:

Tabela 3: Tags abandonadas no HTML 5

acronym frame

applet frameset

basefont isindex

big noframes

center strike

dir tt

font



Ferramentas

Ao contrrio das tecnologias anteriormente analisadas (Flash e Silverlight) o HTML5 no possui

nenhuma ferramenta ou IDE especifico ou incontornvel para serem criadas aplicaes em

HTML5. Como o HTML5 uma linguagem de marcas (i.e. markup), qualquer editor simples de

texto, pode ser utilizado para criar ou editar contedos em HTML5, como por exemplo o

notepad do Windows, o notpad++ ou o gedit, emacs ou vim em ambiente Linux ou at como o

TextEdit nos ambientes Aple. No entanto foram criadas diversas aplicaes especializadas para

facilitar a tarefa do programador. Apresentam-se, de seguida, alguns breves exemplos de

algumas dessas ferramentas que podem facilitar e agilizar a criao de aplicaes em HTML5.

O Aptana considerado um IDE open source para o desenvolvimento de sites e aplicaes Web.

A sua grande vantagem para o desenvolvimento de aplicaes web o facto de facilmente se

poder integrar diversas tecnologias web numa nica plataforma de desenvolvimento, pois

normalmente quando se desenvolve em HTML/HTML 5 utiliza-se sempre outras tecnologias.

Essas tecnologias suportadas pelo Aptana so o PHP, Ajax, o Ruby on Rails, Python, Adobe AIR,

JavaScript e CSS. Esta ferramenta pode ser instalada e utilizada em Windows, em Mac OS X e

em Linux.

Na Figura 31 possvel observar um exemplo de utilizao do IDE Aptana.



Figura 31: Exemplo de utilizao do IDE Aptana

Uma das grandes vantagens deste editor/IDE em ambiente web que avisa o programador

durante a programao sobre a compatibilidade dos blocos de cdigo fonte inserido. Tal

constitui uma grande mais valia devido heterogeneidade de suporte e implementao dos

diferentes browsers para as diferentes funcionalidades do HTML. Factor ainda mais importante

no caso do HTML5 devido a este apenas ser parcialmente suportado e de diferentes formas

pelos diferentes browsers.

Outra ferramenta adequada para o desenvolvimento web, nomeadamente em HTML5 o

Visual Studio da Microsoft, que j foi analisado nas ferramentas do Silverlight e que no ser

aqui aprofundado.



O Dreamweaver outra ferramenta muito utilizada no desenvolvimento de ambiente web.

Como uma ferramenta destinada ao desenvolvimento em ambientes web tambm lida com

diversas tecnologias para alm do HTML5, nomeadamente o XHTML, CSS, JavaScript, Ajax, PHP,

ASP, ASP .NET e JSP.

O Dreamweaver uma aplicao de desenvolvimento que desde as suas origens sempre muito

vocacionado para a edio visual baseada no paradigma WYSIWYG em que o utilizador constri

toda a aplicao web s em modo visual. Esta caracterstica o que tem tornado esta

ferramenta muito apelativa por utilizadores com poucos conhecimentos tcnicos a nvel de

programao web. No entanto, tal funcionalidade bem vista por uns e criticada por outros. As

criticas prendem-se com o facto de que o cdigo gerado automaticamente por via do modo de

edio visual pouco optimizado, demasiado extenso e pode levar a erros de visualizao da

pgina criada, assim como pode inserir fragilidades de segurana.

Para alm da edio visual o utilizador/programador pode sempre editar manualmente o

cdigo gerado ou criar o seu prprio cdigo de raiz.

Outra funcionalidade de destaque do Dreamweaver o facto dele permitir efectuar um preview

da aplicao criada, mas esse preview no genrico mas sim de acordo com o Browser que se

pretende testar ou at mesmo com a verso. Tal bastante positivo, visto que um dos

problemas do desenvolvimento web (com ou sem HTML5) testar e garantir a execuo nos

diferentes browsers, pois cada um implementa as funcionalidades standard de maneira

diferente. Desta forma o programador, pode ter integrado na plataforma de desenvolvimento

uma framework completa de testes.



Formatos

O HTML5 raramente utilizado per si. Na maior parte dos casos utilizado com uma ou vrias

tecnologias/formatos diferentes.

Um desses formatos mais utilizado o JavaScript que uma linguagem de programao muito

difundida e utilizada no contexto Web Client-side, ou seja, do lado do Browser web do

utilizador. uma linguagem imperativa, orientada a objectos e com tipagem fraca. Grande parte

dos seus comandos e instrues de cdigo tiveram origem no JAVA e no C++.

A grande utilidade do JavaScript a sua facilidade em tornar o DOM do HTML dinmico, reactivo

e interactivo por via de eventos. Funcionalidades tais como abrir uma nova janela, controlar o

seu tamanho e posio, validar campos de formulrios, alternar imagens no mesmo campo,

animar elementos da pagina web e alterar estilos sem necessitar de efectuar o reload da pgina.

J o CSS um outro formato complementar e quase inseparvel do HTML5. O CSS uma

linguagem que serve para definir estilos visuais de documentos escritos em HTML.

O CSS tem origem nos termos em ingls Cascading Style Sheets, e foi criado com o intuito de

separar os contedos das pginas Web da sua formatao visual. Desta forma, para uma

determinada pgina web, o cdigo HTML fica num ficheiro enquanto todas as formataes

visuais ficam separadas no respectivo ficheiro CSS. Para tal separao poder funcionar

devidamente, o HTML ou o JavaScript tem vrios selectores que so comuns no CSS, permitindo

desta forma estabelecer a ligao entre eles.

Os selectores tm diversos graus de abrangncia desde os mais globais e genricos aos mais

especficos sobre uma instncia concreta de um elemento HTML. Os selectores indo dos mais

gerais para os mais especficos so: Tipo, Classe, Grupo e Id.

Em muitos casos, estas tecnologias e formatos que circundam e complementam o HTML5 no

so dedicadas apenas a manipular e controlar o seu comportamento e aspecto visual. Tambm

so necessrias muitas vezes formatos para a transferncia de dados do servidor para o site ou

aplicao RIA desenvolvida em HTML5. Os formatos utilizados para esses fins so sobretudo o

XML e mais recentemente o JSON.

O nome JSON provm do acrnimo em ingls JavaScript Object Notation e um formato

reduzido para efectuar a troca de dados entre servios e aplicaes. Originalmente foi



desenvolvido para ser utilizado em ambientes de JavaScript, pois at a sua estrutura

equivalente s listas de JavaScript. No entanto, teve tanto sucesso que actualmente utilizado

nos mais diversos ambientes e linguagens de programao para alm de JavaScript.

O JSON considerado por muitos uma verso moderna, actualizada e mais leve do XML. No

entanto o seu suporte e disseminao ainda no to abrangente como o XML.

As principais linguagens que j suportam JSON nativamente ou atravs de APIs so: JavaScript,

ActionScript, C, C++, C#, Java, Perl, PHP, Python, Ruby e Lua.

J o XML uma norma reconhecida pela W3C e o seu nome provm do ingls, eXtensible

Markup Language e essencialmente uma linguagem de marcao com a caracterstica de ser

totalmente aberta. Isto , as etiquetas no esto pr-definidas nem fazem parte de um

conjunto finito e pr-estabelecido de etiquetas. Desta forma o XML pode ser utilizado em

qualquer contexto ou domnio, sendo da responsabilidade dos utilizadores estabelecerem a

sintaxe pretendida para um determinado contexto.

Foi inicialmente desenvolvida a partir de 1990 com o intuito de ser de fcil legibilidade tanto

por computadores como por humanos sem recurso a softwares especiais de leitura. Os

contedos encontram-se separados da formatao, permitindo a criao de tags e atributos

sem qualquer limitao. Os documentos podem estar organizados de forma hierrquica e ser

altamente portveis para qualquer arquitectura ou sistema operativo.

Actualmente reconhecido que o XML tem alguns pontos menos fortes, nomeadamente o

facto de ser pouco compacto e de se tornar lento, pesado e com grande redundncia em

grandes quantidades de informao. No entanto no pode deixar de ser considerado por ser

um padro de facto e ser universalmente aceite e que qualquer linguagem de programao

ou framework possua suporte nativo para o parsing e processamento dos ficheiros em XML.



Prottipos

Existe um nmero bastante elevado de prottipos que podem ser apresentados para

apresentarem e exemplificarem as diversas capacidades do HTML5. De seguida ser

apresentado um conjunto de exemplos que mostrem as principais valncias do HTML5.

Video

sabido que o HTML5 foi a primeira verso de HTML a suportar nativamente a insero de

vdeo nas pginas Web. Essas funcionalidades de vdeo, fornecidas pelo HTML5, constituiam as

bases para permitir a criao de novas ferramentas ainda mais elaboradas no que toca

utilizao do HTML 5.

Essas ferramentas de melhoramento das capacidade do player de vdeo de HTML5, muitas

vezes resumem-se a simples bibliotecas ou ficheiros nicos de JavaScript onde esto as funes

e mtodos auxiliares e enriquecedores do player nativo de HTLM5.

Uma dessas ferramentas mais utilizada o jPlayer que permite em poucas linhas de cdigo

alterar completamente o visual do player standard do HTML5, assim como adicionar botes e

funcionalidades. Todas essas alteraes so efectuadas recorrendo a HTML e CSS.

A titulo de exemplo na Figura 32 so apresentadas duas verses do player em que

simplesmente foram alterados os layouts do player, recorrendo a CSS.



Figura 32: Diferentes alteraes visuais do player de video

J na Figura 33 apresentado um player com funcionalidades extra em relao ao player default

do HTML5. Essas novas funcionalidades esto presentes atravs dos botes para saltar para o

vdeo seguinte e anterior, a possibilidade de tocar aleatoriamente os diversos vdeos e a adio

de uma playlist interactiva.

Figura 33: Insero de funcionalidades extra

Saindo do espectro visual do jPlayer e entrando em detalhes mais tcnicos, ele tambm permite

a existncia de vrias instncias de players de vdeo na mesma pgina e em reproduo

simultnea. Este player tambm permite ser integrado ou receber chamadas de eventos a partir



de jQuery, uma das bibliotecas auxiliares mais utilizadas em JavaScript. Para terminar, tambm

qren smartcp prototipagem e comparação de tecnologias ria vol1 1.1

Documents