0

CENTRO ESTADUAL DE EDUCAO TECNOLGICA PAULA SOUZA

FACULDADE DE TECNOLOGIA DE MAU

RODRIGO ILTON CARUSO STELLZER

HTML E JAVASCRIPT PARA VRIOS DISPOSITIVOS

MAU/SO PAULO
2014

RODRIGO ILTON CARUSO STELLZER

HTML E JAVASCRIPT PARA VRIOS DISPOSITIVOS

Monografia apresentada FATEC Mau

como parte dos requisitos para obteno de
Ttulo de Tecnlogo em Informtica para
Gesto de Negcios.
Orientador: Prof. M. Sc. Osmil Aparecido
Morselli.

MAU/SO PAULO
2014

Stellzer, Rodrigo Ilton Caruso.

HTML e Javascript para vrios dispositivos. Rodrigo Ilton Caruso
Stellzer,
57 p.; 30 cm.
TCC (Trabalho de Concluso de Curso).
CEETPS/FATEC Mau/SP, 1 Sem. 2014.
Orientador: Prof. M.Sc. Osmil Aparecido Morselli.
Referncias: p. 53.
Palavras-chave:
HTML,
smartphone.

Javascript,

Web,

dispositivos,

RODRIGO ILTON CARUSO STELLZER

HTML E JAVASCRIPT PARA VRIOS DISPOSITIVOS

Monografia apresentada FATEC Mau,

como parte dos requisitos para obteno do
Ttulo de Tecnlogo em Informtica para
Gesto de Negcios.

Aprovao em: 21 maio 2014.

____________________________________
Prof. M. Sc. Osmil Aparecido Morselli
FATEC Mau
Orientador
____________________________________
Prof. M. Sc. Nizi Voltarelli Morselli
FATEC Mau
Avaliadora
____________________________________
Prof. M. Sc. Ivan Carlos Pavo
FATEC Mau
Avaliador

Dedico este trabalho ao meu pai que

nunca desistiu de mim, apesar de repetidos
retrocessos.

Dedico,

tambm,

minha

esposa, que esteve firme ao meu lado em

toda a luta do entre meu dficit de ateno
contra o ensino universitrio e ao Instituto de
psiquiatria da Universidade de so Paulo,
que me mostrou que no sou obrigado a ser
algum que nunca realiza, apesar de saber
fazer.

AGRADECIMENTO
Aos meus colegas que me lembraram dos prazos de minhas atividades
quando me faltava a memria (comorbidade) e aos que colaboraram nos trabalhos
em grupo.
Em especial ao meu orientador, Prof. M. Sc. Osmil Aparecido Morselli,
sempre atencioso com minha falta de organizao e me livrando de armadilhas.
Aos outros professores os quais foram para a sala de aula pensando em
meu futuro e de meus colegas, tanto quanto com suas prprias carreiras e ganhos
pessoais.

"Eduquem

as

crianas

necessrio castigar os homens."

(PITGORAS, 500 a.C.)

no

ser

RESUMO
Este trabalho trata sobre os diversos tipos de dispositivos utilizados para acesso
Internet nos dias atuais. Em seguida, encarrega-se de definir as linguagens de
programao usadas e interpretadas por navegadores de Internet do lado cliente,
como HTML, Javascript e o Javascript AJAX. Apresenta-se de forma esclarecedora
sobre um projeto que transforma HTML em aplicativos para dispositivos mveis
chamado Apache Cordova. So apresentados estudos de dois casos envolvendo
HTML e Javascript como soluo para problemas de desenvolvimento diferentes da
utilizao dos mesmos no cotidiano para stios de Internet, e como foram de uso
essencial para atender as necessidades apresentadas.

Palavras-chave: HTML, Javascript, Web, dispositivos, smartphone.

LISTA DE ILUSTRAES
Figura 1 - Mensagem de correio eletrnico transmitida pela ARPANET. .................. 21
Figura 2 - Exemplo de documentos ligados por Hipertexto. ..................................... 23
Figura 3 - Exemplo de cdigo em linguagem HTML. ................................................ 24
Figura 4 - Tags, atributos e valores........................................................................... 24
Figura 5 - Jogo em HTML5 - Front Invaders............................................................. 28
Figura 6 - Visualizao de CSS em vrios arquivos HTML. ..................................... 29
Figura 7 - Trocando vnculo com arquivo CSS de um arquivo HTML. ...................... 30
Figura 8 - Calculadora funcional em HTML e Javascript. ......................................... 31
Figura 11 - Exemplo de botes de ao em Javascript. ........................................... 36
Figura 12 - Comportamento de requisies em AJAX .............................................. 38
Figura 14 - Sistema de chamadas inicial. ................................................................. 43
Figura 15 - Sistema Web de chamados.................................................................... 47
Figura 16 - Jogo de robs em navegador de Internet. .............................................. 48
Figura 17 - Comandos de programao dos robs. ................................................. 50
Figura 18 - Exemplo de programao de rob. ........................................................ 51

LISTA DE ABREVIATURAS E SIGLAS

Lista de Abreviaturas
Esp. - Especialista.
M.Sc. - Mestre.
Prof. - Professor.

Lista de Siglas
ECMA - European Computer Manufacturers Association.
HTML - Hypertext Markup Language.
ISO - International Organization for Standardization.

10

SUMRIO
1 INTRODUO ....................................................................................................... 12
1.1 Desenvolvendo para vrios dispositivos.............................................................. 12
1.2 Justificativa .......................................................................................................... 14
1.3 Objetivo ............................................................................................................... 14
1.4 Metodologia ......................................................................................................... 15
1.5 Estrutura da monografia ...................................................................................... 15
2 DISPOSITIVOS QUE ACESSAM A INTERNET ..................................................... 17
2.1 Computador de mesa e notebook/laptop............................................................. 17
2.2 Dispositivos mveis ............................................................................................. 18
2.3 Tablet ................................................................................................................... 19
2.4 Televisores .......................................................................................................... 20
2.5 Consoles de videojogo ........................................................................................ 20
3 AS LINGUAGENS DA INTERNET .......................................................................... 21
3.1 A linguagem HTML .............................................................................................. 22
3.1.1 As verses da HTML ........................................................................................ 25
3.1.2 A HTML5........................................................................................................... 26
3.1.3 Mudanas presentes na HTML5 ...................................................................... 27
3.2 A Linguagem CSS ............................................................................................... 28
3.3 A linguagem Javascript ........................................................................................ 30
3.3.1 Criao da linguagem Javascript ..................................................................... 32
3.3.2 Normas que padronizam Javascript ................................................................. 32
3.3.3 Caractersticas da linguagem ........................................................................... 34
3.3.4 AJAX................................................................................................................. 37
3.3.4.1 A pgina HTML como aplicao cliente ......................................................... 37
4 CONHECENDO O APACHE CORDOVA ................................................................ 40
5 ESTUDOS DE CASO ............................................................................................. 42
5.1 Painel de chamadas de hospital.......................................................................... 42
5.1.1 Problemas do projeto de software .................................................................... 43
5.1.2 Problemas na instalao de nova tela .............................................................. 44
5.1.3 O desafio de programao ............................................................................... 45
5.1.4 A soluo e funcionamento do painel ............................................................... 45

11

5.2 Jogo criado com Apache Cordova ....................................................................... 47

5.2.1 O Tema do jogo ................................................................................................ 48
5.2.2 Animao em HTML5 ....................................................................................... 50
5.2.3 Biblioteca oCanvas ........................................................................................... 51
5.2.4 Resultados ....................................................................................................... 52

12

1 INTRODUO
Esse captulo contm as seguintes subsees: Desenvolvendo para vrios
dispositivos, onde ser apresentado o campo de explorao deste

trabalho,

Justificativa que motivou a tomada de deciso pelo assunto abordado, Objetivos

deste trabalho, Metodologia que explicar como ser feita a pesquisa e a subseo
de Estrutura que explicar como foi dividida e construda esta monografia.

1.1 Desenvolvendo para vrios dispositivos

O conceito de dispositivo envolve diferentes categorias de aparelhos que
acessam Internet, como computadores pessoais, laptops, tablets, telefones mveis
e inteligentes, aparelhos de GPS (Global Positioning System), computadores de
bordo, televisores inteligentes e at relgios inteligentes.
Infelizmente, as plataformas tecnolgicas de dispositivos atuais so muito
heterogneas, possuindo hardware com diferenas colossais. Mtodos de entrada
de dados e manipulao podem ser extremamente variados desde um teclado
completo s telas sensveis ao toque ou apenas uma dezena de botes. Resolues
de telas distintas, propores de tela variantes e mtodos de armazenamento de
dados totalmente diferentes tornam quase impossvel a criao de uma ferramenta
unificada de desenvolvimento.
O desenvolvimento de software se encontra altamente segregado. De
acordo com McCracken(2008), houve uma empresa que excluiu intencionalmente a
compatibilidade de seus produtos para se tornarem o nico canal de criao ou
distribuio e controlar o desenvolvimento para sua plataforma. Desenvolver uma
vez, para usar em diversos dispositivos e sistemas operacionais traz inmeras
vantagens, mas cada soluo para vrios dispositivos pode ter suas vantagens e
desvantagens.
Um forte candidato para desenvolvimento para vrios dispositivos so as
aplicaes Web que, independentemente da linguagem ou ferramenta de
programao, permitem que a simples existncia de um navegador de Internet
permita a compatibilidade.

13

Uma aplicao Web uma aplicao cliente-servidor que (geralmente)

utiliza o navegador Web como cliente. Navegadores enviam solicitaes
para os servidores, e os servidores geram respostas e as retornam para os
navegadores. Elas diferem de aplicaes cliente-servidor mais antigas
porque elas fazem uso de um programa cliente comum, chamado o
navegador Web. (SHKLAR; ROSEN, 2003, p. 202)

O primeiro telefone mvel com conectividade com a Internet foi o Nokia 9000
Communicator lanado na Finlndia, em 1996. A viabilidade dos servios de acesso
Internet era limitada at que os preos caram neste modelo e provedores de rede
comearam a desenvolver sistemas e servios convenientemente acessveis em
telefones. NTT DoCoMo, no Japo, lanou o primeiro servio de Internet mvel, imode, em 1999, e este considerado o nascimento de servios de Internet para
telefones mveis. (HJELMEROOS HELI et al., 1999)
As restries computacionais iniciais nos dispositivos e redes mveis foram
o que criaram as tentativas de adaptar a Internet aos dispositivos. Apesar de
revolucionrio o modelo no vingou, por no ser exatamente a experincia desejada
pelos usurios finais, mas marcou a unio de telefones mveis e acesso Internet
de forma definitiva.
Um fenmeno que se constata atualmente que a Internet uma tecnologia
que no necessita mais avanar para alcanar os dispositivos, na verdade os
dispositivos que buscam alcanar o nvel de experincia j existente nos
computadores pessoais, como dito no anncio do navegador Firefox para Android
na loja de aplicativos da Google, apresentado a seguir.
"[O] Navegador Web da Mozilla, Firefox, traz o melhor da navegao do seu
computador ao seu telemvel. rpido, fcil de usar e personalizvel, com as
ltimas funcionalidades de segurana e privacidade para o manter seguro."
Entre alguns navegadores de Internet ainda existentes problemas de
compatibilidade, que o organizaes que padronizam a Internet tm como objetivo
eliminar, h uma compatibilidade crescente entre estes aplicativos para tornar a
experincia de navegao homognea. Este fato tem como conseqncia o
aumento da compatibilidade de aplicaes Web.
Onde era necessrio um computador pessoal caro e acesso Internet
oneroso, hoje possvel acessar com dispositivos de baixo custo com opes de
acesso cada vez mais abrangentes, rpidas e diferenciadas. Estes novos clientes de

14

acesso a sistemas Web ampliam o campo de possibilidades e posicionam

desenvolvedores em reas inexploradas.
Dessa maneira, cada vez mais vivel conceber sistemas, que antes eram
de predomnio de software local, utilizando as tecnologias da Internet, mesmo que
no se opere, necessariamente, de maneira permanentemente conectada, como
ser estudado neste documento.

1.2 Justificativa
Na rea acadmica de desenvolvimento de software h muita divulgao da
gerao de software nativo mquina, talvez porque seja a metodologia mais antiga
e divulgada para o ensino de programao de computadores.
Como o autor, outros alunos podem vir a descobrir no decorrer de suas vidas
profissionais que a Internet oferece possibilidades muito mais amplas do qu lhes foi
ensinado nas instituies que tm foco pesado em aplicaes nativas ao sistema
operacional ou plataforma.
Trazer resultados de pesquisas sobre a HTML (HyperText Markup
Language) voltados a vrios dispositivos poder ser til para os alunos terem
contato com a idia de utilizar a Web de forma alternativa simples portadora de
contedos como taxada.
Este trabalho pode servir de base soluo e tomada de deciso em futuras
estratgias de software.

1.3 Objetivo
Analisar e levantar dados sobre a popularizao dos navegadores de
Internet nas mais diversas plataformas, e como pode ser til aos desenvolvedores,
abrindo-lhes portas para o desenvolvimento em novos dispositivos com o total
reaproveitamento de tecnologias as quais j poderiam dominar e que so comuns a
todos estes dispositivos.

15

1.4 Metodologia
Ser analisada a proposta de aplicativos Web, independente da linguagem
de programao no servidor. Foge do escopo deste trabalho discutir estas
tecnologias, pois em sua grande maioria elas apenas servem para gerar contedo
HTML e Javascript de maneira automtica.
O foco estudar o navegador e seu rico mundo de aplicabilidade. Tais
propostas sero dispostas de forma a expor casos em que foi preferida a tecnologia
HTML (junto com sua parceira Javascript) a aplicativos nativos, interpretados ou
compilados que exeram a mesma funo para obteno, justificando-se tal escolha.
Atravs da reviso dos diferentes dispositivos disponveis para uso nas
aplicaes. Da anlise de viabilidade de acesso a recursos de software e hardware
comumente acessados por aplicativos e cenrios de solues reais e outros
perfeitamente possveis, ser possvel trazer tona novas vises e respostas sobre
a viabilidade da Web como ferramenta para desenvolvimento em vrios dispositivos.
Casos de uso e experincia no desenvolvimento de sistemas a clientes reais
sero apresentados, mostrando como solues Web se destacaram em cenrios
atuais e como atenderam a necessidade destes clientes.

1.5 Estrutura da monografia

Esta monografia contm 5 captulos, a saber:

Captulo 1 Introduo;

Captulo 2 Dispositivos que acessam a Internet;

Captulo 3 As linguagens da Internet;

Captulo 4 Conhecendo o Apache Cordova;

Captulo 5 Estudos de caso.

O primeiro captulo ser responsvel por ambientar o leitor na realidade que

levou produo desta monografia, bem como delimitar o campo de atuao da
mesma. O segundo captulo ir explicar quais dispositivos eletrnicos so usados
para acessar Internet, e como se categorizam. No terceiro captulo, so

16

apresentadas as linguagens de cdigos que so usadas para construir os contedos

da Internet. Um projeto inovador chamado Apache Cordova ser explicado no quarto
captulo. Ao final, no quinto captulo, sero apresentados estudos de caso
vivenciados pelo autor da monografia que exploram o uso das tecnologias
pesquisadas neste trabalho com a finalidade de trabalhar com o tema do mesmo.

17

2 DISPOSITIVOS QUE ACESSAM A INTERNET

No ano de 2008, o nmero de dispositivos conectados Internet excedeu o
nmero de pessoas que os utiliza, de acordo com Gasston (2013), e estes
dispositivos no mais so limitados aos computadores pessoais como computadores
de mesa e notebooks.
No mais estamos limitados a navegar na Web com computadores de mesa
ou laptop. Tantas categorias de dispositivos existem agora - incluindo
telefones inteligentes, tablets, e consoles de videojogo - que estou ficando
sem dedos para cont-los. (GASSTON, 2013)

Este cenrio apelidado de Internet das coisas, o qu traz novos desafios

aos desenvolvedores de contedo para Internet que devem adequar seus produtos
aos navegadores presentes nestas tais coisas para que tudo seja experimentado da
forma esperada. (Id., 2013)
Nem tudo so problemas, pois o aumento do alcance de dispositivos
Internet tambm abre novas possibilidades para os desenvolvedores em campos
que so abertos para novos nichos de mercado. (DAWSON, 2012).
Gasston (2013) e Dawson (2012) fornecem uma inestimvel lista e timas
definies dos dispositivos mais comuns que acessam a Internet, atualmente.

2.1 Computador de mesa e notebook/laptop

O computador de mesa e o notebook/laptop so conhecidos por disporem
de telas de tamanho razovel, terem tima capacidade de processamento para
navegao na Internet, e estarem, normalmente, conectados s redes de banda
larga cabeadas ou sem-fio fornecendo, assim, conexes confiveis e de melhor
velocidade.
Possuem ampla gama de programas computacionais para acessar dados na
Internet, superando outros dispositivos neste quesito, at porque a Internet foi
inicialmente idealizada para atend-los.
Apesar de serem conhecidos como os dispositivos com melhores
capacidades para acesso aos stios da Internet, no se pode deixar de considerar

18

que uma parcela deles pode estar totalmente desatualizados no conceito de

programas computacionais, ou recursos como tamanho de tela ou velocidade de
conexo com Internet. Assim, deve-se ter em mente que estes tipos de
dispositivos variam muito em limitaes, alm de se conhecer o pblico-alvo dos
stios desenvolvidos.

2.2 Dispositivos mveis

Esta categoria foi definida por Gasston (2013) especialmente para telefones,
desde os mais simples telefones que podem acessar a Internet, passando pelos
telefones medianos que no so inteligentes, ou smartphones, que possuem
navegadores aprimorados, mas ainda limitados, at os smartphones de preo
elevado que podem inclusive disputar capacidades com computadores de mesa em
inmeras situaes.
Vinte e sete por cento do mercado global de vendas de telefones
corresponde a vendas de smartphones, e se estima que h, no mundo, um bilho de
smartphones em uso no final do ano de 2012. Em 2015, so esperados dois bilhes
destes smartphones sendo usados pela populao mundial.
Diversos sistemas operacionais mveis so utilizados para manter estes
dispositivos inteligentes, desde aqueles que no vo alm de funes bsicas de
telefone celular e no possuem um sistema operacional padro ou capacidades
plenas de navegao, conhecidos como feature phones, at aparelhos com
sistemas operacionais completos que suportam instalao de programas e a prpria
atualizao de verses do sistema operacional pelo prprio usurio. (GASSTON,
2013)
Dentre os sistemas operacionais mveis h alguns concorrentes que se
destacam, como o Sistema Android da Google, o iOs do iPhone da Apple e o
Windows Phone da Microsoft.
Muitos dos sistemas operacionais mveis possuem um navegador baseado
no motor de navegao chamado Webkit, que abastece verses ligeiramente
diferenciadas, mas de forma geral com boa interoperabilidade. (GASSTON, 2013)

19

Com telas menores do que os computadores pessoais e, apesar de haverem

excees esta regra, de maneira generalista os dispositivos mveis possuem
capacidade de memria e processamento inferior aos computadores pessoais, pois
ambos esto em avano constante.
Em alta tendncia no mercado, os comandos baseados em toques com os
dedos na tela so uma linha de dispositivos diferenciados que deve ser lembrada ao
desenvolver pginas interativas, j que podem haver problemas em botes de
tamanho diminuto ou funes acessveis somente ao sobrepor o cursor de um
mouse, o qual no est presente nos sistemas operacionais mveis mais
conhecidos citados acima.
Tambm,

exigem

constante

busca

por

novidades

no

setor

pelos

desenvolvedores, uma vez que centenas de novos dispositivos surgem anualmente

apenas pelos maiores fabricantes.
De acordo com Stark (2012), a principal caracterstica que diferencia um
dispositivo mvel a capacidade de permitir a mobilidade do usurio. Isto pode, nas
determinadas situaes, ser tratado como superioridade aos computadores
pessoais. Sua substituio tambm entre 12 a 18 meses, segundo o mesmo.
Smartphones so na verdade mais poderosos do qu computadores
pessoais em diversas maneiras. Eles so altamente pessoais, esto sempre
ligados, sempre conosco, geralmente conectados e diretamente
endereveis. Mais ainda, eles esto por a com poderosos sensores que
podem detectar a (sua prpria) localizao, movimentos, acelerao,
orientao, proximidade, condies ambientais e mais. STARK (2012).

2.3 Tablet
Computadores em formato de tablete, ou simplesmente tablets, tiveram sua
exploso com o lanamento do iPad da Apple, em 2010. Existem tablets com
sistema Android com telas mais comuns de 7 polegadas e se estima que, em 2015,
haver 390 milhes de tablets em uso no mundo, cifra que dificilmente pode ser
ignorada.
Possuem tamanhos de tela maiores que os telefones e, em grande parte,
so utilizados conjuntamente banda-larga sem-fio interna disputam funes e
utilizaes com os notebooks e laptops, se encaixando em lacunas entre a

20

portabilidade de um smartphone e as capacidades com falta de mobilidade de um

computador pessoal ou notebook.
Os navegadores disponveis seguem muito de perto as caractersticas dos
citados para smartphones.

2.4 Televisores
Estas telas geralmente passivas ganham novas utilidades com o lanamento
de televisores inteligentes que se conectam grande rede. Apesar de contarem com
aplicaes dedicadas, a funcionalidades para assistir contedo, como aplicativos
para assistir vdeos gratuitos e por assinatura, tambm acompanham navegadores
de Internet e formas do usurio digitar os dados de navegao diretamente do sof
da sala. (GASSTON, 2013)
Apesar de toda inteligncia agregada ao dispositivo, uma pesquisa recente
(Nielsen Company) revelou que 77 por cento dos espectadores de televisores j
esto simultaneamente em outro dispositivo enquanto assistem, ou tentam assistir,
ao televisor. (Id., 2013) Caractersticas relevantes so que no acompanham um
sistema muito eficiente de entrada de dados pelo usurio, com controles remotos
pouco prticos para navegao equivalente a um computador pessoal. Outro ponto
negativo que o televisor potencialmente de uso comum de vrias pessoas,
perdendo a questo de ser pessoal e nem sempre possvel realizar tarefas de
interesse exclusivo j que outros podem desejar utiliz-lo simultaneamente, forando
um uso impessoal que agrade a maioria no momento. (Id., 2013)

2.5 Consoles de videojogo

Existem menes aos consoles conhecidos como Xbox 360 da empresa
Microsoft e ao Playstation 3 da Sony alm do Wii U que possuem navegadores que
so especificaes variantes do j citado Webkit. Apesar disso so citados pelo
autor como de menor freqncia de uso e menos relevantes nas decises dos
desenvolvedores atualmente. (DAWSON, 2012)

21

3 AS LINGUAGENS DA INTERNET
No incio a ARPANET, a rede que deu origem Internet, era perfeita para o
trfego de documentos e mensagens de correio eletrnico em texto de formato
simples. De acordo com a lista de aplicaes de rede da ARPANET presente na
Wikipdia (2013), no
o havia um indexador como as ferramentas de pesquisa atuais
ou aplicao do
o conceito de livre navegao que s surgiria em 1996, como
demonstra a Figura 1.
Figura 1 - Mensagem de correio eletrnico transmitida pela ARPANET.

Fonte: Astrosurf (2013).

Na dcada de 1990, com a exploso de uso da rede,, foi necessrio melhorar

a localizao de documentos e possibilitar formatos avanados de texto, pois os
aplicativos atuais no facilitavam a busca por informaes e arquivos na rede.
rede (Id.,
2013)
Novas ferramentas de uso da rede foram ento desenvolvidas. Estas
ferramentas se utilizavam de novas linguagens para se criar contedo navegvel.
Esse
e captulo se dedica a descrever as linguagens utilizadas pelos navegadores de
Internet,
nternet, que so os aplicativos utilizados para exibir e navegar em suas pginas.
pginas

22

3.1 A linguagem HTML

HTML uma sigla que na lngua inglesa significa Hypertext Markup
Language, ou em portugus: Linguagem de Marcao de Hipertexto. (FERREIRA;
EIS, 2010)
uma linguagem para publicar contedo digital, ou seja, mais do qu
apenas textos simples sem formatao. possvel utilizar HTML para publicar textos
com alto nvel de formatao, como cores, tamanhos e posicionamentos diversos.
Tambm permitido publicar imagens, vdeo, udio e outros formatos multimdia na
Internet. (Id., 2010)
O Hipertexto o conceito de onde tudo surgiu. utilizado para definir
diferentes documentos presentes na Internet, como imagens e textos, possam ser
organizados e encontrados. Eles no esto conectados de maneira linear como os
contedos de um livro, com os assuntos em um volume, que so dispostos em certa
ordem. (Id., 2010)
Trafegar por entre os contedos de hipertexto pode ser feito seguindo
ilimitados trajetos dentro os caminhos oferecidos. possvel dispor contedos para
se trafegar linearmente como em um livro, mas tambm possvel permitir que a
pessoa navegando pelo contedo escolha o caminho como bem desejar. Isso
possvel, pois um documento possui atalhos para deixar o documento que se l e
trafegar para outro, continuando assim o percurso. (Id., 2010)
A Figura 2 busca apresentar o conceito bsico de hipertexto.

23

Figura 2 - Exemplo de documentos ligados por Hipertexto.

Fonte: Autor do trabalho (2013).

Segundo Shklar; Rosen (2003) e tambm informado por Ferreira; Eis (2010),
o autor original da HTML Tim Berners-Lee, que tinha o intuito de criar uma
linguagem universal para disposio de contedo em documentos de hipertexto.
Foi popularizado na dcada de 1990, junto com o navegador (programa de
computador utilizado para acessar documentos de hipertexto) chamado Mosaic,
quando ganhou fora. Este sucesso levou outros desenvolvedores adotarem a
linguagem HTML em seus programas, iniciando um processo de adoo do padro.
(Id., 2010)
uma linguagem que parte do formato inicial de um texto em fluxo normal
como dos editores de texto sem formatao convencionais, mas que utiliza de
cdigos especiais para torn-los ricos em formatos e interao. Este cdigos que
no pertencem ao significado texto, mas esto presentes para modificarem o
comportamento da exibio do texto inicial e criarem possibilidades de navegao
para outros documentos. (Id., 2010)

24

Os textos adicionais na HTML so mostrados na Figura 3.

Figura 3 - Exemplo de cdigo em linguagem HTML.

Fonte: Autor do trabalho (2013).

Todos os cdigos que esto cercados pelos caracteres menor < e maior >
so considerados tags (tag um tipo de marcao, ou etiqueta identificadora) como
informado por Duckett (2010).
Algumas dessas tags possuem um incio e um fim, dessa forma cercam uma
quantidade de textos ou cdigos, significando que afetam tudo que est contido
entre as tags de abertura e de fechamento, delimitando assim sua regio de efeito,
como ilustra a Figura 4. (Id., 2010)
Figura 4 - Tags, atributos e valores.

Fonte: Autor do trabalho (2013).

25

3.1.1 As verses da HTML

Silva (2010) afirma que o sucesso da HTML foi tamanho que se desejou
enriquecer a linguagem, aumentando seus usos e possibilidades. Somente entre os
anos de 1993 e 1995 surgiram trs novas verses: HTML+, HTML 2.0 e HTML 3.0.
Apesar da alta adoo e popularidade, a HTML no era tratada como um
padro at 1997, sendo apenas uma sugesto de especificao que no era
totalmente respeitada por todos os implementadores de navegadores de Internet.
(Id., 2010)
Linha do tempo de verses da linguagem HTML:
HTML 2.0 - Em 24 de novembro de 1995, foi publicada como IETF
(Internet Engineering Task Force) RFC (Request for Comments) 1866 .
Posteriores publicaes adicionaram:
o 25 de novembro de 1995, RFC 1867 (upload de arquivos em
formulrio);
o Maio de 1996, RFC 1942 (tabelas);
o Agosto de 1996. RFC 1980 (mapas de imagem do lado cliente);
o Janeiro de 1997, RFC 2070(internacionalizao).
HTML 3.2 - em janeiro de 1997, publicada como recomendao;
HTML 4.0 - em dezembro de 1997, publicada como recomendao e
oferecia trs variaes:
o Estrita, na qual elementos depreciados no eram permitidos;
o Transicional, na qual elementos depreciados eram permitidos;
o Frameset, onde somente elementos depreciados de frame eram
permitidos.
HTML 4.0 - em abril de 1998, foi resubmetida com menores edies sem
incrementar seu nmero de verso;
HTML 4.01- em dezembro de 1999, foi publicada como recomendao
oferecendo as trs verses que a HTML4.0 do ano de 1997;

26

ISO HTML - em maio de 2000, foi publicada como um padro

internacional totalmente baseado na HTML 4.01 estrita;
HTML5 - em janeiro de 2008, foi publicada como rascunho para ser
aprimorado.
A HTML foi conceituada para ser independente de plataformas, navegadores
e plataformas. Seu objetivo era que o criador de contedo escrevesse um cdigo
que seria acessvel por diversos meios sem qualquer necessidade de adaptao.
Isto permitiu que a Internet crescesse livre de padres proprietrios, ou encontrasse
limitaes e problemas de incompatibilidade. A publicao sem barreiras foi o foco
de seus criadores. (FERREIRA; EIS, 2010)

3.1.2 A HTML5
Em 2004, desenvolvedores de empresas como Mozilla, Apple e Opera no
estavam satisfeitos com os rumos das verses da HTML e a verso chamada
XHTML (Extended HTML) que o Grupo W3C (World Wide Web Consortium), que a
principal organizao de padronizao da WWW (World Wide Web), estava
desenvolvendo. (FERREIA; EIS, 2010)
Diferente da ideia original, estas verses da HTML estavam altamente
segmentadas

vrias

verses

disputavam

popularidade

sem

qualquer

homogeneidade. Tais empresas se juntaram e resolveram fundar o Web Hypertext

Application Technology Working Group (WHATWG), responsvel por realizar o que
se conhece, hoje, por HTML5. (Id., 2010)
A iniciativa do WHATWG foi divulgada mundialmente, chegando a chamar a
ateno do Grupo W3C, de forma que o W3C reconheceu a iniciativa e o trabalho
desempenhado at ento. Em 2006, Tim Berners-Lee anunciou que trabalharia
juntamente com o WHATWG na criao do HTML5, ao invs de investir no XHTML.
Assim, a XHTML2 foi descontinuada, em 2009, devido ao sucesso da HTML5. (Id.,
2010)

27

3.1.3 Mudanas presentes na HTML5

Em 2010, Ferreira; Elcio informaram que a HTML5 teve como objetivo
padronizar e facilitar a escrita de cdigo HTML, diminuir o volume de cdigo,
padronizar necessidades que antes eram feitas de maneiras diversas, mas geravam
o mesmo resultado.
Prope cdigo interopervel, preparado para possveis dispositivos que
acessaro o cdigo no futuro. Contedos que necessitavam de plugins (executveis
suportados por alguns navegadores que estendem sua capacidade com novas
funcionalidades) para certos contedos, mas tais plugins no estavam disponveis
para todas plataformas de maneira homognea e acabavam por limitar o qu certas
plataformas eram capazes de acessar. (Id., 2010)
Uma facilidade intencional na HTML5 melhorar a forma de acesso aos
elementos por desenvolvedores que queiram acessar seus objetos ou estrutura,
definindo um padro para classificar sees do documento, como cabealho,
contedo, menus e rodap. Sendo mais fcil de interpretar e estender os cdigos
das pginas da Internet usando linguagens de programao.
A Figura 5 demonstra a melhora de acesso aos elementos pelos
desenvolvedores.

28

Figura 5 - Jogo em HTML5 - Front Invaders.

Fonte: End3r (2013).

3.2 A Linguagem CSS

Cascating Style Sheets (livremente traduzido como Folhas de Estilo em
Cascata) uma linguagem de formatao de contedo que define uma srie de
regras para definir como ser a exibio de elementos da HTML. (DUCKETT, 2010)
Possuem configuraes para cores, tamanhos de textos, fontes de texto,
posicionamento de elementos, tamanho de elementos visuais entre muitos outras.
O propsito de sua existncia separar as configuraes de exibio das
marcaes presentes na HTML, facilitando entendimento e reuso de cdigos. Dessa
maneira, foi criada permitindo o mais alto nvel de separao dos cdigos CSS em
um arquivo separado do arquivo HTML em si. (Id., 2010)
Dentro de um arquivo HTML permitido vincular um ou mais arquivos CSS e
dessa forma vincular todas as configuraes presentes nos mesmo sem criar um
volume desnecessrio dentro do arquivo HTML. possvel inclusive reutilizar o
mesmo arquivo CSS para vrias pginas HTML, o qu facilita muito quando se

29

deseja alterar um estilo de exibio em todos os arquivos HTML que vinculam este
arquivo CSS,, como mostra a Figura 6.
6 (DUCKETT, 2010)
Figura 6 - Visualizao de CSS em vrios arquivos HTML.

Fonte: Autor do trabalho (2013)

O uso inverso tambm utilizado, que seria possuir diversos arquivos CSS
que mudam totalmente a aparncia do mesmo arquivo HTML, assim sendo, vrios
temas de exibio para um mesmo arquivo HTML so simples de se criar,
criar conforme
ilustra a Figura 7.

30

Figura 7 - Trocando vnculo com arquivo CSS de um arquivo HTML.

Fonte: Autor do trabalho (2013).

(2013)

3.3 A linguagem Javascript

As linguagens HTML e CSS so conhecidas como linguagens de marcao,
pois apenas delimitam reas a serem formatadas em um texto e como ser esta
formatao, permitindo livre montagem de informaes em uma pgina HTML.
Infelizmente, as linguagens
linguagens de marcao diferem das linguagens de
programao, pois no permitem que a pgina HTML seja modificada, sendo assim
criam pginas estticas sem permitir sua mudana perante diferentes circunstncias
ou modificaes por interao do usurio que navega.
navega (SHKLA; ROSEN, 2003)
A linguagem de programao Javascript,
Javascript, de acordo com Silva
S
(2010),
orientada a objetos e geralmente est embutida nos navegadores de Internet, sendo
capaz de receber aes do usurio em um documento HTML para permitir ao
programador responder
sponder com aes de programao, modificando a apresentao da
pgina. O que antes era apenas um documento esttico,
esttico, hoje pode conter um
aplicativo com uma calculadora totalmente funcional,, por exemplo.

31

possvel modificar todo tipo de tag do documento como, por exemplo,

modificar o arquivo CSS do documento dependendo do horrio do computador que
est visualizando para exibir um tema de cores e imagens de fundo de dia e um
outro ao anoitecer.
Apenas com uma linguagem de marcao, como a HTML, seria possvel
desenhar uma calculadora completa, mas impossvel faz-la efetuar os clculos pois
os elementos visuais no se modificariam ao se apertar os botes e no haveria
inteligncia dos clculos programada no documento, como se mostra na Figura 8.
Outra funcionalidade praticada a de verificar os formulrios que so
preenchidos por quem navega nas pginas, assim se alerta a pessoa que digita que
digitou em um campo de texto, que deveria conter uma data, dados invlidos, ou que
se esqueceu de preencher um campo essencial para a funo especfica do
formulrio.
Figura 8 - Calculadora funcional em HTML e Javascript.

Fonte: Uize (2013).

Javascript no recomendada para lgicas muito sofisticadas, pois sofre

uma dependncia muito forte de compatibilidade com o navegador que apresenta a
pgina. Para minimizar estes problemas, algumas vezes, desenvolvedores recorrem
a cdigos adicionais que funcionam de maneira diferenciada dependendo do
navegador, aumentando a complexidade dos cdigos de maneira a obter maior
compatibilidade. Embora, tenha suas limitaes esta linguagem conhecida por ser
tambm responsvel por timos resultados de interao, como foi citado por Shklar;

32

e Rosen (2003):
"JavaScript um pouco como um veneno orgnicoele lhe matar em
grandes doses mas pode ser um cura inestimvel se voc us-lo da forma certa"

3.3.1 Criao da linguagem Javascript

A linguagem JavaScript foi inventada por Brendan Eich, da Netscape, e a
primeira verso da linguagem denominada JavaScript 1.0 foi introduzida no
navegador Netscape 2.0 em 1996. Nesse mesmo ano, a Microsoft lanou
sua verso com o nome JScript 1.0 e introduziu-a no ento Internet Explorer
3.0. quela poca, em plena guerra dos navegadores, as diferentes
implementaes das funcionalidades da linguagem nos dois navegadores
no seguiam um padro unificado, causando um verdadeiro martrio para o
desenvolvedor implantar scripts para servir ambos os navegadores. SILVA
(2010)

Criada com a inteno de tornar os contedos mais dinmicos, sofreu muitas

mudanas em seu ciclo de vida, pois comeou a ser segregada por empresas
desenvolvedoras de navegadores de Internet para atender necessidades prprias.
Mais adiante, ver-se- que sua ltima verso sendo adotada se prope a resolver
este conflito.

3.3.2 Normas que padronizam Javascript

A associao ECMA (European Computer Manufacturers Association),
fundada em 1961, uma associao que se dedica padronizar sistemas de
informao. (SILVA, 2010)
Tornada internacional em 1994, j padronizou a linguagem Javascript desde
o ano de sua concepo em 1996, chamando-a de ECMA-262, lanando em 1997 a
primeira edio da norma. A ISO (International Organization for Standardization)
reconheceu este trabalho oficialmente j em 1998. (Id., 2010)
A Figura 9 apresenta a evoluo da linguagen Javascript.

33

Figura 9 - As verses do Javascript.

Fonte: Silva (2010).

Foi denominada linguagem de script, pois esse o termo que se usa para
definir uma linguagem para estender um ambiente j construdo, permitindo acesso
s funcionalidade j existentes. (SILVA, 2010)
No significa que a linguagem seja inferior ou superior s outras linguagens,
apenas significa que ela depende deste sistema a qual foi projetada para estender.
O ambiente onde a linguagem Javascript, ou ECMAScript executado comumente

34

o navegador de Internet, oferecendo acesso todas funcionalidades dos objetos do

documento HTML. (SILVA, 2010)
A Figura 10 ilustra como a linguagem Javascript utilizada.
Figura 10 - Arquitetura de execuo do Javascript.

Fonte: Silva (2010).

3.3.3 Caractersticas da linguagem

capaz de trabalhar orientada objetos, pois oferece suporte criao de
objetos com propriedades e mtodos, apesar de no estar totalmente de acordo com
o conceito computacional de OOP (Object-Oriented Programming), segundo Silva
(2010).
Suporta caixas de dilogo padro para comunicao e alertas para o usurio
que navega na pgina. Permite manipular todas as tags do documento, modificando
seus atributos, enquanto o navegador de Internet se encarrega de redesenhar tudo

35

para o usurio que navega ver as modificaes que o Javascript realiza na pgina.
(SILVA, 2010)
Pode-se modificar as propriedades dos elementos para reposicion-los,
ocult-los, modificar seus tamanhos e quaisquer propriedades dos textos como
cores e tamanhos. Como pode fazer uso das CSS, a linguagem Javascript modifica
tudo que o CSS capaz de desenhar. (Id., 2010)
Existem comandos na linguagem que conseguem inserir mais cdigo HTML
dentro do documento, permitindo que se escreva mais no documento mesmo aps
completamente carregado, e este novo contedo gera novos objetos para serem
manipulados ou exibidos. (Id., 2010)
Javascript suporta diversos eventos, que so situaes especiais que
disparam a execuo de cdigos de programao. O clicar do mouse em um boto
na pgina poderia disparar um bloco de cdigo que exibe uma mensagem, ou
realiza uma operao de soma em uma calculadora feita em HTML com Javascript.
(Id., 2010)
H eventos como o passar do cursor sobre um elemento, que poderia ser
usado para exibir uma verso maior de uma foto de um determinado produto em
uma loja virtual, facilitando assim ao cliente visualizar o produto sem ocupar espao
permanentemente na pgina. (Id., 2010)
H tambm temporizadores que podem disparar cdigos em intervalos de
milissegundos determinados, podendo atualizar a hora a cada segundo para manter
uma miniatura de relgio em um certo canto da pgina. (Id., 2010)
A linguagem sensvel a digitao de palavras-chave (comandos exclusivos
da linguagem que definem o qu deve ser executado) em maisculas ou
minsculas, de maneira que um comando deve ser digitado exatamente da maneira
que a documentao define ou ocorrer erro ao executar o cdigo. (Id., 2010)
Como outras linguagens a Javascript no faz distino em excesso de
espaos entre os cdigos, ter mais de um comando por linha, ou at mesmo um
comando estar distribudo em vrias linhas de cdigo, contanto que no se
interrompa ao meio suas palavras-chave. Todos os comandos em Javascript so
finalizados pelo caractere ponto-e-vrgula (;) e isso o qu permite mais de um

36

comando por linha, desde qu sejam separados por este caractere. (SILVA, 2010)
A Figura 11 ilustra como os botes de interao so construdos no
Javascript.
Figura 9 Exemplo de botes de ao em Javascript.

Fonte: Autor do trabalho (2013).

uma linguagem com suporte arranjos lgicos de dados, ou arrays, que

so grupos de variveis e que podem conter todo tipo de contedo, inclusive outros
arranjos. (Id., 2010)
Textos que devem ser tratados como literais, ou seja, no so comandos,
devem estar sempre entre aspas simples (') ou duplas ("). Esta a forma de definir
contedo constante em variveis e propriedades que contm textos, conhecidos
como string. Nmeros so digitados sem aspas diretamente entre os cdigos, e para
nmeros decimais se usa a vrgula para separar as casas decimais. (Id., 2010)

37

3.3.4 AJAX
O AJAX combina tecnologias existentes para auxiliar desenvolvedores a dar
a usurios da web uma mais avanada experincia de navegao.
Utilizando XHTML, CSS, JavaScript, e XML, todas tecnologias testadas-ecomprovadas, ao curso com o objeto XMLHttpRequest, voc pode
transformar navegadores em plataformas de aplicaes que bem de perto
espelham aplicaes de computadores de mesa. Esta capacidade est
permitindo stios web converter para stios Web 2.0, enquanto incrementa o
nmero de novas aplicaes web que podem ser encontradas na Internet
hoje. (HOLDENER, 2008)

O Javascript perdia terreno at meados de 2005, quando o AJAX

(Asynchronous Javascript and XML, que significa Javascript e XML assncronos) foi
cunhado, segundo Holdener (2008).
Outras tecnologias e plugins estavam sobrepondo as funcionalidades do
Javascript, quando as requisies assncronas do AJAX surgiram trazendo inovao
ao campo da Web. (Id., 2008)
Sua principal tarefa obter informaes de servidores Web sem a
necessidade de recarregar a pgina para isso. como se o Javascript tivesse seu
prprio navegador interno, que capaz de obter novas informaes para o
programador trabalhar e exibir no documento HTML sem ter que obter e redesenhar
todo o documento em uma requisio do navegador. (Id., 2008)

3.3.4.1 A pgina HTML como aplicao cliente

A capacidade de se transmitir e obter dados sem se descartar a pgina atual
tendo que recarreg-la trabalha um conceito de tornar a pgina HTML como uma
aplicao cliente separada. Uma vez carregada a estrutura da pgina, carrega-se
apenas os dados necessrios para atualiz-la. (HOLDENER, 2008)
De maneira simples, o primeiro acesso pgina seria o ato de se receber a
aplicao-cliente em HTML com Javascript. Esta aplicao em HTML com Javascript
se encarrega de: (Id., 2008)
Obter dos dados atualizados que a aplicao necessita;
Desenhar na pgina os novos dados nos locais adequados;
Enviar dados que devem ser transmitidos ao servidor.

38

A Figura 12 mostra como operam as requisies em AJAX.

Figura 10 - Comportamento de requisies em AJAX

Fonte: Autor do trabalho (2013).

Um exemplo seria um usurio de e-mails que carrega sua estrutura uma vez
que o usurio se autentica, ento efetua uma requisio AJAX para trazer uma lista
das mensagens da primeira pgina da caixa de entrada. (HOLDENER, 2008)
Quando o usurio clica em uma mensagem, o Javascript obtm o seu
contedo e o exibe em uma caixa visual por sobre a lista de mensagens. Ao fechar
esta mensagem exibida, o Javascript apenas descarta esta caixa visual, deixando
novamente vista a lista de mensagens. (Id., 2008)
De tempos em tempos, o Javascript verifica se h novas mensagens no
servidor e, se necessrio, remonta a lista de mensagens com a(s) nova(s)
mensagem(ns). Quando o usurio decide escrever uma nova mensagem e clica no
boto correspondente, o Javascript ento exibe caixas para digitao dos dados.
(Id., 2008)
Ao concluir e clicar no boto especfico para enviar a mensagem, o
Javascript faz uma requisio enviando assim esses dados para o servidor, que

39

enviar a mensagem segundo os protocolos de envio de e-mails e retornar um

aviso se foi possvel enviar ou no. Este aviso ento recebido pelo Javascript e
exibido ao usurio. (Id., 2008)
Comprovadamente, possvel afirmar que h uma diminuio no volume de
trfego de dados, pois onde cada atualizao exigia a transmisso de uma pgina
HTML completa, com AJAX somente as informaes relevantes so solicitadas e
transmitidas, pois se considera que a estrutura bsica j est presente e funcional
no navegador do usurio e retransmiti-la causa um efeito visual indesejado de
redesenho em que a pgina apagada e rapidamente redesenhada. (Id., 2008)

40

4 CONHECENDO O APACHE CORDOVA

Apache Cordova uma plataforma para construo de aplicaes usando
HTML, CSS e JavaScript. um projeto muito curioso que visa transformar o cdigo
em HTML com Javascript em aplicativo nativo de vrias plataformas, sendo bem
abrangente atualmente, segundo o prprio stio do projeto, j cria aplicativos para:
Android;
Blackberry;
iOS (Sistema Operacional do iPhone e iPad);
Windows Phone;
Windows 8 (para computadores);
Tizen (utilizado em televisores inteligentes).
Tal abrangncia muito relevante na hora de escolher uma plataforma de
desenvolvimento, pois quem desenvolve quer atingir o maior pblico possvel. Alm
de fornecer tudo o que est disponvel em um navegador corrente para o
desenvolvedor criar suas interfaces, possui acesso novas bibliotecas de cdigos
que permitem ao desenvolvedor trabalhar com caractersticas dos dispositivos como
acessar arquivos da memria do dispositivo, informaes sobre os contatos de um
telefone inteligente, sensores, GPS, cmeras e tudo mais que o dispositivo permitir.
De acordo com a documentao do projeto, o segredo est em combinar no
aplicativo final um pequeno executvel nativo que abre os cdigos desenvolvidos em
HTML e Javascript com uma WebView, que uma caracterstica dos sistemas
operacionais de exibir contedo de Web nos dispositivos. (WARGO, 2013)
Dessa maneira, o contedo aberto em tela cheia no dispositivo e o usurio
final nem toma conhecimento de que est utilizando algo feito com tecnologia Web
ao invs de tecnologia nativa. Para ele apenas mais um aplicativo instalado em
seu dispositivo. (Id.,2013)
possvel criar um aplicativo partir de uma pasta contendo um arquivo que
ser a tela inicial do aplicativo, em formato HTML, que se deve chamar index.html.
A partir da, pode-se incluir na pasta tudo que for necessrio, como outras telas
feitas em HTML, imagens, arquivos CSS e de Javascript adicionais, subpastas e

41

tudo mais que o HTML suporta. Muitas aplicaes em Javascript puras nem mesmo
necessitam

de

converso

ou

adaptao,

podendo

simplesmente

serem

empacotadas usando o software disponvel no endereo virtual do projeto para a

plataforma desejada. claro, que fica a cargo do desenvolvedor adaptar os
tamanhos de tela e de entrada de dados do usurio de acordo com a necessidade,
mas algo que cada vez mais os desenvolvedores se acostumam devido ao imenso
nmero de dispositivos acessando os contedos que produzem. (Id., 2013)

42

5 ESTUDOS DE CASO
Nesse captulo apresentado dois casos: o painel de chamadas de hospital
e o jogo criado com Apache Cordova.

5.1 Painel de chamadas de hospital

Um conceituado hospital particular localizado na cidade de Mau, Estado de
So Paulo, adquiriu de uma empresa terceirizada um software de painel de
chamadas para pacientes no incio do ano de 2012, que se propunha a integrar-se
com o sistema de controle do hospital existente.
Dessa maneira os mdicos chamariam os pacientes ao clicar em um boto.
J existia a lista de pacientes em espera para serem atendidos no sistema de
controle padro do hospital. O boto de chamada ento chamaria uma rotina de
programao que insere o nome do paciente em um cadastro do sistema da tela de
chamada, como demonstra a Figura 13.
Figura 13: Tela de chamadas em painel do hospital.

Fonte: Autor do trabalho (2013).

Dois computadores foram instalados, cada um com diversos televisores de

43

quarenta e duas polegadas utilizados como monitor de imagem nas suas sadas de
vdeo, como um computador com vrias telas espelhadas. Os sons provenientes
destes computadores tambm eram direcionados com cabos at os televisores. Um
executvel, rodando nestes computadores, se encarregava de ler o cadastro de
pessoas a serem chamadas e exibir em todas suas telas, soando um alerta de
chamada semelhante a uma campainha, conforme a Figura 14.
Figura 11 Sistema de chamadas inicial.

Fonte: Autor do trabalho (2013)

5.1.1 Problemas do projeto de software

O projeto foi idealizado e implantado. A tela do sistema padro do hospital j
dispunha do boto de chamadas de pacientes e os computadores de chamadas
estavam instalados corretamente.
Infelizmente, comearam a surgir diversos problemas com o software
adquirido da empresa terceirizada. Os problemas no ocorriam devido a escolha da

44

tecnologia Delphi, pois a mesma capaz de atender os requisitos, mas no foi

desenvolvido de forma correta, e todas correes solicitadas demoravam a serem
entregues pela prestadora de servios.
Meses depois da implantao, j no ano de 2013, ainda havia problemas
recorrentes e a equipe de suporte tcnico constantemente era demandada para
sanar situaes com correes como reiniciar o computador de exibio, o que
acarretava mais problemas, pois a lista de pacientes chamados desaparecia e os
mdicos continuavam chamando sem saber que o sistema estava inoperante.
Algumas correes novas trouxeram problemas antigos e o problema se
estendia por mais de um ano. Nessa altura, os mdicos do hospital j estavam
totalmente habituados a utilizar os painis e no aceitavam mais voltar a chamar
com a voz os pacientes. A insatisfao do gestor era clara, ele havia adquirido algo
que se tornou necessidade, mas no podia confiar no produto.

5.1.2 Problemas na instalao de nova tela

No incio de 2013, foi solicitada uma nova tela para a especialidade de
pediatria, que se esperava ser apenas levar cabos e instalar um novo televisor.
Infelizmente, mais de uma semana depois no havia sido possvel concluir a
instalao. Aparentemente, interferncias eletromagnticas impediam a imagem de
chegar ao televisor, mesmo adquirido um novo cabo no foi possvel levar a imagem
at o televisor localizado na pediatria.
Muito tempo e dinheiro foram gastos com as solues lgicas, testando
combinaes de cabos e sadas de vdeo diferentes que funcionavam para outros
televisores. Inclusive o televisor foi substitudo sem sucesso. Assim, no foi possvel
concluir a razo do sinal, pois todas as substituies possveis de equipamentos
foram realizadas pela equipe de informtica do hospital.

45

5.1.3 O desafio de programao

Visto o cenrio, o autor deste trabalho, que trabalhava como desenvolvedor
de sistemas neste hospital, props ao seu superior imediato o desafio de criar,
rapidamente, um substituto para o sistema de chamadas usando HTML.
Em questo de horas, foi possvel ter uma verso funcional de uma tela de
chamadas que se integrava completamente ao sistema existente, apenas com a
substituio da aplicao nos computadores que exibiam as telas de chamadas sem
modificar nada mais.
Foi desenvolvido em ASP.Net com linguagem C# que fabricava HTML e
Javascript como resultado.
Quando da compra dos ltimos televisores para serem usados como painis
de chamadas, o autor deste trabalho que trabalhava como desenvolvedor de
sistemas neste hospital poca, solicitou que fosse feita a compra de televisores
inteligentes, caso no afetasse o valor da compra de forma relevante.
A opo pelos televisores inteligentes foi feita pois pouco acarretavam no
cenrio de custos de um novo painel, sendo os cabos e ligaes mais caros do que
esta diferena.
Ao chegarem os televisores inteligentes adquiridos, foi necessria uma
pequena adaptao, que demorou menos um dia para ser descoberta, no trecho de
cdigo que tocava o som, pois o televisor somente suportava no formato chamado
MP3 (MPEG Audio Layer 3) ao invs do padro do HTML5 que WAV (Wave) ou
OGG.

5.1.4 A soluo e funcionamento do painel

Foi ento colocado na pediatria um televisor inteligente rodando o sistema,
ligado apenas por um cabo de rede, o qual havia abundncia e facilidade de
instalao no local. O televisor acessava o stio de Web interno do hospital e obtinha
a tela com a lista dos pacientes, alm de tocar os sons usando HTML5 e Javascript
e dar alertas visuais no paciente chamado.

46

Limitaes do televisor inteligente levaram a uma reviso dos cdigos, e ao

invs do ASP.Net AJAX da Microsoft foi remodelado para utilizar AJAX puro (de
codificao mais manual), ficando mais leve e confivel.
Nesta altura o cdigo Javascript que era executado no televisor j era
avanado para detectar problemas na rede, e quando a rede falhasse, mostrava um
aviso at que o problema fosse solucionado, quando ento o Javascript retomava a
chamada dos pacientes normalmente sem interveno humana, uma vantagem que
o painel terceirizado estava longe de ter.
At o momento somente um televisor inteligente se utilizava do painel Web.
Em meados de maio, um novo gerente de informtica ordenou o teste do painel de
chamadas Web nos dois computadores que j existiam, e estavam ligados a todos
os outros televisores que funcionavam como painel chamadas.
O autor no mais trabalha neste local, mas foi informado por ex-colegas que
desde a implantao no houve qualquer tipo de problema, e apesar de verificar o
painel fazer parte da antiga lista de verificao de tarefas do setor, j se tornou
item obsoleto devido a completa falta de ocorrncias e confiabilidade.
A Figura 15 esclarece a forma de operao do painel de chamadas Web.

47

Figura 12 - Sistema Web de chamados.

Fonte: Autor do trabalho (2013).

No televisor inteligente, que funciona sem computador, foi posteriormente

adicionado um equipamento de baterias chamando no-break que se encarrega de
alimentar o televisor em caso de quedas de energia de at cerca de vinte minutos.
Dessa maneira as telas de chamada tem funcionado em esquema de 24/7 por
meses sem necessitar qualquer manuteno humana.

5.2 Jogo criado com Apache Cordova

Como experimento prtico, o autor decidiu desenvolver um jogo utilizando
Javascript para estudar como o cenrio de desenvolvimento em HTML5 seu novo
objeto Canvas (do ingls tela, que permite uma forma de pintura em um quadro de
imagem na pgina).
Os objetivos so desenvolver um jogo funcional em computadores e ter o
mesmo jogo sem alterao executando em dispositivos com Sistema Android que

48

so muito comuns e presentes na atualidade. Desejado tambm estabelecer uma

base dos desafios encontrados para passar adiante.

5.2.1 O Tema do jogo

Selecionado o tema de jogo de controle de um rob atravs de cartas de
programao, baseado em um jogo de tabuleiro chamado Robo Rally, conforme a
Figura 16.
Este jogo foi criado por Richard Channing Garfield, que Ph.D.
(Philosophiae Doctor) em matemtica combinatria e muito conhecido por seu
principal jogo de cartas colecionveis, Magic: The Gathering. (WIKIPDIA, 2013)
Decidido por uma verso simplificada, pois no haveria disponibilidade de
tempo para desenvolver um jogo online para vrios jogadores em conjunto com
atividades acadmicas, apesar de ser simples de realizar isto toma muito tempo
para testar, sincronizar e homologar.
Figura 13 - Jogo de robs em navegador de Internet.

Fonte: Autor do trabalho (2013)

49

Uma verso de quebra-cabeas ou desafios foi a opo, permitindo o

exerccio da programao de robs com cartas. Funciona da seguinte maneira: h
um tabuleiro com casas quadriculares com vrios obstculos e um quadrado de
chegada, e o jogador deve programar seu rob para se mover da casa inicial at o
ponto de chegada.
O rob programado escolhendo cinco cartas de programao dentro oito
disponveis. Cada carta executada sequencialmente na ordem de sua escolha.
Dessa forma, quando concluda a programao, o rob executar as cartas de
comando uma aps a outra. Este processo se repete at que o rob chegue casa
de final e, a, se contabiliza o desempenho com quantas rodadas de
cartas/programao o jogador necessitou para chegar.
O rob sempre est com a frente apontada para uma das arestas de seu
quadrado, como se fosse a direo que o mesmo olha e considera sua frente. As
cartas possuem comandos que podem ser:
Andar uma casa frente;
Andar duas casas frente;
Andar trs casa frente;
Girar 90 graus na mesma casa (olha nova aresta) para direita;
Girar 90 graus na mesma casa (olha nova aresta) para esquerda;
Girar 180 graus na mesma casa (olha onde estava de costas);
Andar uma casa para trs (sem mudar a direo que aponta).
A Figura 17 apresenta os comandos do rob.

50

Figura 14 - Comandos de programao dos robs.

Fonte: Autor do trabalho (2013)

No tabuleiro h perigos que podem destruir o rob, como buracos e lasers,

forando o jogador a iniciar todo o processo desde o incio em um jogo totalmente
novo. H tambm esteiras rolantes que no danificam, mas modificam a posio do
rob caso ele termine uma ao de movimento em cima das mesmas. Aps ser
movido por uma esteira, se o rob for colocado em uma segunda esteira, no ser
afetado por esta segunda esteira nesta rodada.

5.2.2 Animao em HTML5

Estudados livros de animao em HTML5, foram efetuados testes com
animao e redesenho diretamente com o objeto Canvas do HTML5. Aps um par
de experimentos usando a tecnologia a sensao resultante foi que a tecnologia
funciona perfeitamente, mas como fornece objetos muito simples o experimento j
caminhava no sentido de construir um motor de animao.

51

Seria como construir uma biblioteca com as funcionalidades necessrias

para depois fazer uso da mesma. Como j existem diversos motores e bibliotecas
com esta funo j prontas e gratuitas, no fazia sentido "reinventar a roda". O foco
voltou-se em escolher uma biblioteca agradvel.

5.2.3 Biblioteca oCanvas

Em ferramentas de buscas foi possvel localizar diversas bibliotecas e
motores de animao. Dentre todas, foi escolhida a oCanvas, disponvel
gratuitamente em <http://ocanvas.org/>, por possuir o que seria necessrio sem
exageros.
A documentao disponvel no stio do projeto bem abrangente, e os
exemplos podem ser testados no prprio navegador. Inclusive h um teste de curvas
de acelerao de movimento, que tornam movimentos mais naturais, como mostra a
Figura 18.
Figura 15 - Exemplo de programao de rob.

Fonte: Autor do trabalho (2013)

Movimento de animao sem acelerao resulta em animao pobre, como

por exemplo uma carta de baralho se movendo ao seu destino com velocidade
constante bem montona. Um carro parado em um semforo se acelera ao sair,
chega na velocidade desejada e desacelera antes de parar novamente. Uma pessoa
que se move segue o mesmo princpio em menor escala.
O ideal efetuar alguma acelerao, como por exemplo que ela saia

52

rapidamente do topo do baralho e desacelere pouco antes do destino. Isso transmite

a sensao de uma carta real que desliza um pouco antes de parar ao ser jogada na
mesa. A biblioteca j suporta isto nativamente.

5.2.4 Resultados
O uso da biblioteca oCanvas foi quase perfeito, com pequenas
necessidades de redesenho da tela no atendidas pela tecnologia. Infelizmente o
desenvolvimento da mesma muito lento frente concorrentes como o EASELJS,
uma biblioteca em Javascript queinclui mais funcionalidades para animao em
HTML5, e provavelmente no recomendado investir desenvolvendo na oCanvas
com risco de depreciao.
O desenvolvimento para navegadores em computadores pessoais ocorreu
sem qualquer problema, de forma agradvel foi possvel utilizar sem preocupaes
as complexidades de animao. Os resultados so precisos e os navegadores
compatveis com HTML5 apresentam sem problemas o mesmo resultado nos testes.
J o desenvolvimento para dispositivos Android, apesar de funcionar
corretamente em sua mecnica bsica, dificulta muito a exibio em diferentes
tamanho de telas limitadas. Pelo menos o uso do arquivo HTML direto no Apache
Cordova foi perfeito, funcionou como o esperado, colocando o HTML para executar
no dispositivo sem qualquer tipo de surpresas.
Tudo que funcionou no navegador do computador pessoal apresentou o
mesmo resultado em Android com o Cordova. Apenas configuraes para no
permitir que a tela mude sozinha de horizontal para a vertical ao mover o dispositivo
j deixaram o resultado como esperado.
Embora, a dificuldade quanto a tamanhos de telas seja esperada em
dispositivos mveis, o autor sentiu falta nas bibliotecas de animao em Canvas de
uma funcionalidade para auto-dimensionar contedos 2D (2nd Dimension) com base
na escala do tamanho da de forma descomplicada. Isto poderia solucionar diversos
problemas e acelerar o desenvolvimento. Como o HTML5 ainda relativamente
novo, bem possvel que isto seja alcanado por bibliotecas que se tornaro padro
no futuro.

53

6 CONCLUSO
De acordo com os casos de uso experimentados, a tecnologia HTML de
alta compatibilidade, com suas propriedades aumentando sem ser necessria
interveno dos responsveis pelo HTML, uma vez que os produtores de
dispositivos e navegadores quem almejam compatibilizar com o padro.
Desenvolver neste padro ir facilitar muito o aprendizado, pois ser uma linguagem
nica para diversas tarefas, sem esquecer da mais comum que desenvolver
portais de contedo e stios Web.
A

linguagem

HTML5

certamente

promissora

no

demonstra

possibilidade de substituio a curto prazo, mesmo respeitada a caracterstica

instvel dos padres da informtica em um mundo de atualizao constante. Atingiu
um nvel de adequao impecvel e imensa abrangncia ao fornecer as
capacidades que antes somente se encontrava em discutveis ferramentas auxiliares
ao HTML, de forma a tornar obsoletos todos os complementos de programao
necessrios que a tornavam segmentada e criavam incompatibilidade com certas
plataformas-alvo.
Nem tudo perfeito, pois a especificao atual apenas uma forma bruta
para os programadores, sendo necessrio criar camadas adicionais de cdigo para
utilizao de forma eficiente. Isso abre campo para criao de bibliotecas
interoperveis que facilitam as tarefas sem criar antigo problema, uma vez que as
funcionalidades bsicas fazem parte do ncleo da linguagem e no se necessita dos
duvidosos plugins.

54

REFERNCIAS
CORDOVA. Projeto Apache Cordova. Disponvel em: <http://cordova.apache.org>.
Acesso em: 15 nov. 2013.
COULOURIS, G. Sistemas distribudos: conceitos e projeto. Porto Alegre, Brasil:
ARTMED, 2005.
DAWSON, A. Future-proof web design. USA: John Wiley & Sons Inc, 2012.
DOMINIQUE Hazael-Massieux. Combining the power of the Web with the
strengths of mobiles devices. Publicao em: 2012. Disponvel em
<http://www.w3.org/Mobile/>. Acesso em: 27 nov. 2012.
DREDGE, Stuart. Social. TV and second-screen viewing: the stats in 2012.
Disponvel em:
<http://www.theguardian.com/technology/appsblog/2012/oct/29/social-tv-secondscreen-research>. Acesso em: 22 set. 2012.
DUCKETT, J. Beginning HTML, XHTML, CSS, and JavaScript. USA: Wiley
Publishing, Inc., 2010.
EASELJS. Biblioteca Javascript EASELJS. Disponvel em:
<http://www.createjs.com>. Acesso em: 12 out. 2013.
FERREIRA Elcio; EIS Diego. HTML5: Curso W3C. Escritrio Brasil. Disponvel em:
<http://www.w3.org/Mobile/>. Acesso em: 22 set. 2013.
GASSTON, Peter. The Modern Web: Multi-device Web development with hTML5,
CSS3 and JavaScript. So Francisco: No Starch Press, 2013.
HJELMEROOS, Heli et al. Coping with Consistency under Multiple Design
Constraints: The Case of the Nokia 9000 WWW Browser. Disponvel em:
<http://www.dcs.glasgow.ac.uk/~stephen/workshops/mobile99/papers/hjelmeroos.pdf
>. Acesso em 25 out. 2013.

55

HOLDENER, A. Ajax: The Definitive Guide. USA: OReilly Media Inc, 2008.
MCCRACKEN, Harry. Apple Monopolistic? Maybe. Control Freaks? Definitely!
Disponvel em: <http://technologizer.com/2008/09/07/apple-monopolistic-maybecontrol-freaks-definitely/>. Acesso em: 18 out. 2013.
MOZILLA. Navegador Mozilla para Android. Disponvel em:
<https://play.google.com/store/apps/details?id=org.mozilla.firefox&hl=pt_PT>. Acesso
em: 27 nov. 2012.
NIELSEN. The Nielsen Company. The mobile consumer: A global snapshot.
Publicao em: 2013. Disponvel em: <http://www.nielseninsights.it/wpcontent/uploads/2013/03/03.-global_mobile_report_02_25.pdf>. Acesso em: 22 set.
2013.
OCANVAS. Biblioteca Javascript oCanvas. Disponvel em:
<http://www.ocanvas.org>. Acesso em: 07 jul. 2013.
SHKLAR, L. Web Application Architecture: Principles, protocols and practices.
USA: John Wiley & Sons Inc., 2003.
SILVA, M. JavaScript: Guia do Programador. So Paulo: Novatec, 2010.
TARTARUS. Tabuleiros alternativos de Robo Rally Disponvel em:
<http://tartarus.org/gareth/roborally/boards/all>. Acesso em: 18 out. 2013.
WARGO, Johm M. Apache Cordova 3 Programming. USA: Pearson Education,
2013.
WHATWG. Web Hypertext Application Technology Working Group. Disponvel
em: <http://www.whatwg.org/>. Acesso em: 14 nov. 2013.
WIKIPEDIA1. The free encyclopedia. History of the Internet. Disponvel em:
<http://en.wikipedia.org/wiki/History_of_the_Internet>. Acesso em: 27 nov. 2012.

56

WIKIPEDIA1. The free encyclopedia. Wireless Application Protocol. Disponvel

em: <http://en.wikipedia.org/wiki/Wireless_Application_Protocol>. Acesso em: 28 set.
2013.
WIZARDS. Robo Rally - Site oficial. Disponvel em:
<http://www.wizards.com/default.asp?x=ah/prod/roborally>. Acesso em: 18 out.
2013.