qren smartcp prototipagem e comparação de tecnologias ria vol1 1.1
DESCRIPTION
O presente documento “Prototipagem e comparação 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 comparação das principais tecnologias RIA actuais”.TRANSCRIPT
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
18/04/2013
Prototipagem e Comparao de Tecnologias RIA Vol 1
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
Upload de Ficheiros .............................................................................................................44
Interaco ............................................................................................................................45
HTML5 .........................................................................................................................................48
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
Ferramentas ............................................................................................................................50
Formatos .................................................................................................................................53
Prottipos ................................................................................................................................55
Video ...................................................................................................................................55
Objectos 3D .........................................................................................................................60
WebCam ..............................................................................................................................64
Upload de Ficheiros .............................................................................................................67
Interaco ............................................................................................................................70
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
Figura 2: Exemplo de utilizao do Microsoft Expression Blend
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio 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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
Figura 15: Exemplo de exploso com partculas do Alternativa 3D
Figura 16: Vila 3D inteiramente desenvolvida com o Alternativa 3D
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
Figura 19: Exemplo de objecto com superfcie reflectora do meio envolvente
Figura 20: Exemplo de personagem criado com o Away3D
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
Figura 21: Deteco vectorial da face
Figura 22: Deteco por pontos da face
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
Figura 24: Etiqueta de deteco
Figura 25: Aplicao do objecto 3D sobre a etiqueta
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
Figura 29: Deteco do movimento
Figura 30: Captura de movimento lado a lado com o imagem original capturada
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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.
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
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
-
SmartContentProvider | Entidade Promotora: Parceiros:
Projeto em curso com o apoio de:
de jQuery, uma das bibliotecas auxiliares mais utilizadas em JavaScript. Para terminar, tambm