tcc html e javascript para vÁrios dispositivos

0

CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA

FACULDADE DE TECNOLOGIA DE MAUÁ

RODRIGO ILTON CARUSO STELLZER

HTML E JAVASCRIPT PARA VÁRIOS DISPOSITIVOS

MAUÁ/SÃO PAULO

2014

1



Monografia apresentada à FATEC Mauá como parte dos requisitos para obtenção de Título de Tecnólogo em Informática para Gestão de Negócios.

Orientador: Prof. M. Sc. Osmil Aparecido Morselli.

MAUÁ/SÃO PAULO

2014

2

Stellzer, Rodrigo Ilton Caruso.

HTML e Javascript para vários dispositivos. Rodrigo Ilton Caruso Stellzer, 57 p.; 30 cm. TCC (Trabalho de Conclusão de Curso). CEETPS/FATEC Mauá/SP, 1º Sem. 2014. Orientador: Prof. M.Sc. Osmil Aparecido Morselli. Referências: p. 53. Palavras-chave: HTML, Javascript, Web, dispositivos, smartphone.

3



Monografia apresentada à FATEC Mauá, como parte dos requisitos para obtenção do Título de Tecnólogo em Informática para Gestão de Negócios.

Aprovação 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 Pavão

FATEC Mauá

Avaliador

4

Dedico este trabalho ao meu pai que

nunca desistiu de mim, apesar de repetidos

retrocessos. Dedico, também, à minha

esposa, que esteve firme ao meu lado em

toda a luta do entre meu déficit de atenção

contra o ensino universitário e ao Instituto de

psiquiatria da Universidade de são Paulo,

que me mostrou que não sou obrigado a ser

alguém que nunca realiza, apesar de saber

fazer.

5

AGRADECIMENTO

Aos meus colegas que me lembraram dos prazos de minhas atividades

quando me faltava a memória (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 organização 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 próprias carreiras e ganhos

pessoais.

6

"Eduquem as crianças e não será

necessário castigar os homens."

(PITÁGORAS, 500 a.C.)

7

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

programação 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 móveis

chamado Apache Cordova. São apresentados estudos de dois casos envolvendo

HTML e Javascript como solução para problemas de desenvolvimento diferentes da

utilização dos mesmos no cotidiano para sítios de Internet, e como foram de uso

essencial para atender as necessidades apresentadas.

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

8

LISTA DE ILUSTRAÇÕES

Figura 1 - Mensagem de correio eletrônico transmitida pela ARPANET. .................. 21

Figura 2 - Exemplo de documentos ligados por Hipertexto. ..................................... 23

Figura 3 - Exemplo de código em linguagem HTML. ................................................ 24

Figura 4 - Tags, atributos e valores........................................................................... 24

Figura 5 - Jogo em HTML5 - Front Invaders. ............................................................ 28

Figura 6 - Visualização de CSS em vários arquivos HTML. ..................................... 29

Figura 7 - Trocando vínculo com arquivo CSS de um arquivo HTML. ...................... 30

Figura 8 - Calculadora funcional em HTML e Javascript. ......................................... 31

Figura 11 - Exemplo de botões de ação em Javascript. ........................................... 36

Figura 12 - Comportamento de requisições em AJAX .............................................. 38

Figura 14 - Sistema de chamadas inicial. ................................................................. 43

Figura 15 - Sistema Web de chamados. ................................................................... 47

Figura 16 - Jogo de robôs em navegador de Internet. .............................................. 48

Figura 17 - Comandos de programação dos robôs. ................................................. 50

Figura 18 - Exemplo de programação de robô. ........................................................ 51

9

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

SUMÁRIO

1 INTRODUÇÃO ....................................................................................................... 12

1.1 Desenvolvendo para vários 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 móveis ............................................................................................. 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 versões da HTML ........................................................................................ 25

3.1.2 A HTML5 ........................................................................................................... 26

3.1.3 Mudanças presentes na HTML5 ...................................................................... 27

3.2 A Linguagem CSS ............................................................................................... 28

3.3 A linguagem Javascript ........................................................................................ 30

3.3.1 Criação da linguagem Javascript ..................................................................... 32

3.3.2 Normas que padronizam Javascript ................................................................. 32

3.3.3 Características da linguagem ........................................................................... 34

3.3.4 AJAX ................................................................................................................. 37

3.3.4.1 A página HTML como aplicação 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 instalação de nova tela .............................................................. 44

5.1.3 O desafio de programação ............................................................................... 45

5.1.4 A solução 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 Animação em HTML5 ....................................................................................... 50

5.2.3 Biblioteca oCanvas ........................................................................................... 51

5.2.4 Resultados ....................................................................................................... 52

12

1 INTRODUÇÃO

Esse capítulo contém as seguintes subseções: Desenvolvendo para vários

dispositivos, onde será apresentado o campo de exploração deste trabalho,

Justificativa que motivou a tomada de decisão pelo assunto abordado, Objetivos

deste trabalho, Metodologia que explicará como será feita a pesquisa e a subseção

de Estrutura que explicará como foi dividida e construída esta monografia.

1.1 Desenvolvendo para vários dispositivos

O conceito de dispositivo envolve diferentes categorias de aparelhos que

acessam à Internet, como computadores pessoais, laptops, tablets, telefones móveis

e inteligentes, aparelhos de GPS (Global Positioning System), computadores de

bordo, televisores inteligentes e até relógios inteligentes.

Infelizmente, as plataformas tecnológicas de dispositivos atuais são muito

heterogêneas, possuindo hardware com diferenças colossais. Métodos de entrada

de dados e manipulação podem ser extremamente variados desde um teclado

completo às telas sensíveis ao toque ou apenas uma dezena de botões. Resoluções

de telas distintas, proporções de tela variantes e métodos de armazenamento de

dados totalmente diferentes tornam quase impossível a criação 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 criação ou

distribuição e controlar o desenvolvimento para sua plataforma. Desenvolver uma

vez, para usar em diversos dispositivos e sistemas operacionais traz inúmeras

vantagens, mas cada solução para vários dispositivos pode ter suas vantagens e

desvantagens.

Um forte candidato para desenvolvimento para vários dispositivos são as

aplicações Web que, independentemente da linguagem ou ferramenta de

programação, permitem que a simples existência de um navegador de Internet

permita a compatibilidade.

13

Uma aplicação Web é uma aplicação cliente-servidor que (geralmente) utiliza o navegador Web como cliente. Navegadores enviam solicitações para os servidores, e os servidores geram respostas e as retornam para os navegadores. Elas diferem de aplicações 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 móvel com conectividade com a Internet foi o Nokia 9000

Communicator lançado na Finlândia, em 1996. A viabilidade dos serviços de acesso

à Internet era limitada até que os preços caíram neste modelo e provedores de rede

começaram a desenvolver sistemas e serviços convenientemente acessíveis em

telefones. NTT DoCoMo, no Japão, lançou o primeiro serviço de Internet móvel, i-

mode, em 1999, e este é considerado o nascimento de serviços de Internet para

telefones móveis. (HJELMEROOS HELI et al., 1999)

As restrições computacionais iniciais nos dispositivos e redes móveis foram

o que criaram as tentativas de adaptar a Internet aos dispositivos. Apesar de

revolucionário o modelo não vingou, por não ser exatamente a experiência desejada

pelos usuários finais, mas marcou a união de telefones móveis e acesso à Internet

de forma definitiva.

Um fenômeno que se constata atualmente é que a Internet é uma tecnologia

que não necessita mais avançar para alcançar os dispositivos, na verdade os

dispositivos é que buscam alcançar o nível de experiência já existente nos

computadores pessoais, como é dito no anúncio do navegador Firefox para Android

na loja de aplicativos da Google, apresentado a seguir.

"[O] Navegador Web da Mozilla, Firefox, traz o melhor da navegação do seu

computador ao seu telemóvel. É rápido, fácil de usar e personalizável, com as

últimas funcionalidades de segurança e privacidade para o manter seguro."

Entre alguns navegadores de Internet ainda existentes problemas de

compatibilidade, que o organizações que padronizam a Internet têm como objetivo

eliminar, há uma compatibilidade crescente entre estes aplicativos para tornar a

experiência de navegação homogênea. Este fato tem como conseqüência o

aumento da compatibilidade de aplicações Web.

Onde era necessário um computador pessoal caro e acesso à Internet

oneroso, hoje é possível acessar com dispositivos de baixo custo com opções de

acesso cada vez mais abrangentes, rápidas 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 viável conceber sistemas, que antes eram

de predomínio de software local, utilizando as tecnologias da Internet, mesmo que

não se opere, necessariamente, de maneira permanentemente conectada, como

será estudado neste documento.

1.2 Justificativa

Na área acadêmica de desenvolvimento de software há muita divulgação da

geração de software nativo à máquina, talvez porque seja a metodologia mais antiga

e divulgada para o ensino de programação 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 instituições que têm foco pesado em aplicações nativas ao sistema

operacional ou plataforma.

Trazer resultados de pesquisas sobre a HTML (HyperText Markup

Language) voltados a vários dispositivos poderá ser útil para os alunos terem

contato com a idéia de utilizar a Web de forma alternativa à simples portadora de

conteúdos como é taxada.

Este trabalho pode servir de base à solução e tomada de decisão em futuras

estratégias de software.

1.3 Objetivo

Analisar e levantar dados sobre a popularização 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 são comuns a

todos estes dispositivos.

15

1.4 Metodologia

Será analisada a proposta de aplicativos Web, independente da linguagem

de programação no servidor. Foge do escopo deste trabalho discutir estas

tecnologias, pois em sua grande maioria elas apenas servem para gerar conteúdo

HTML e Javascript de maneira automática.

O foco é estudar o navegador e seu rico mundo de aplicabilidade. Tais

propostas serão 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 exerçam a mesma função para obtenção, justificando-se tal escolha.

Através da revisão dos diferentes dispositivos disponíveis para uso nas

aplicações. Da análise de viabilidade de acesso a recursos de software e hardware

comumente acessados por aplicativos e cenários de soluções reais e outros

perfeitamente possíveis, será possível trazer à tona novas visões e respostas sobre

a viabilidade da Web como ferramenta para desenvolvimento em vários dispositivos.

Casos de uso e experiência no desenvolvimento de sistemas a clientes reais

serão apresentados, mostrando como soluções Web se destacaram em cenários

atuais e como atenderam a necessidade destes clientes.

1.5 Estrutura da monografia

Esta monografia contém 5 capítulos, a saber:

• Capítulo 1 Introdução;

• Capítulo 2 Dispositivos que acessam a Internet;

• Capítulo 3 As linguagens da Internet;

• Capítulo 4 Conhecendo o Apache Cordova;

• Capítulo 5 Estudos de caso.

O primeiro capítulo será responsável por ambientar o leitor na realidade que

levou à produção desta monografia, bem como delimitar o campo de atuação da

mesma. O segundo capítulo irá explicar quais dispositivos eletrônicos são usados

para acessar à Internet, e como se categorizam. No terceiro capítulo, são

16

apresentadas as linguagens de códigos que são usadas para construir os conteúdos

da Internet. Um projeto inovador chamado Apache Cordova será explicado no quarto

capítulo. Ao final, no quinto capítulo, serão 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 número de dispositivos conectados à Internet excedeu o

número de pessoas que os utiliza, de acordo com Gasston (2013), e estes

dispositivos não mais são limitados aos computadores pessoais como computadores

de mesa e notebooks.

Não 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 cenário é apelidado de Internet das coisas, o quê traz novos desafios

aos desenvolvedores de conteúdo 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 são problemas, pois o aumento do alcance de dispositivos à

Internet também abre novas possibilidades para os desenvolvedores em campos

que são abertos para novos nichos de mercado. (DAWSON, 2012).

Gasston (2013) e Dawson (2012) fornecem uma inestimável lista e ótimas

definições 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 são conhecidos por disporem

de telas de tamanho razoável, terem ótima capacidade de processamento para

navegação na Internet, e estarem, normalmente, conectados às redes de banda

larga cabeadas ou sem-fio fornecendo, assim, conexões confiáveis 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 sítios da Internet, não 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

conexão com à Internet. Assim, deve-se ter em mente que estes tipos de

dispositivos variam muito em limitações, além de se conhecer o público-alvo dos

sítios desenvolvidos.

2.2 Dispositivos móveis

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 não são inteligentes, ou smartphones, que possuem

navegadores aprimorados, mas ainda limitados, até os smartphones de preço

elevado que podem inclusive disputar capacidades com computadores de mesa em

inúmeras situações.

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 bilhão de

smartphones em uso no final do ano de 2012. Em 2015, são esperados dois bilhões

destes smartphones sendo usados pela população mundial.

Diversos sistemas operacionais móveis são utilizados para manter estes

dispositivos inteligentes, desde aqueles que não vão além de funções básicas de

telefone celular e não possuem um sistema operacional padrão ou capacidades

plenas de navegação, conhecidos como feature phones, até aparelhos com

sistemas operacionais completos que suportam instalação de programas e a própria

atualização de versões do sistema operacional pelo próprio usuário. (GASSTON,

2013)

Dentre os sistemas operacionais móveis 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 móveis possuem um navegador baseado

no motor de navegação chamado Webkit, que abastece versões ligeiramente

diferenciadas, mas de forma geral com boa interoperabilidade. (GASSTON, 2013)

19

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

exceções à esta regra, de maneira generalista os dispositivos móveis possuem

capacidade de memória e processamento inferior aos computadores pessoais, pois

ambos estão em avanço constante.

Em alta tendência no mercado, os comandos baseados em toques com os

dedos na tela são uma linha de dispositivos diferenciados que deve ser lembrada ao

desenvolver páginas interativas, já que podem haver problemas em botões de

tamanho diminuto ou funções acessíveis somente ao sobrepor o cursor de um

mouse, o qual não está presente nos sistemas operacionais móveis mais

conhecidos citados acima.

Também, 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 característica que diferencia um

dispositivo móvel é a capacidade de permitir a mobilidade do usuário. Isto pode, nas

determinadas situações, ser tratado como superioridade aos computadores

pessoais. Sua substituição é também entre 12 a 18 meses, segundo o mesmo.

Smartphones são na verdade mais poderosos do quê computadores pessoais em diversas maneiras. Eles são altamente pessoais, estão sempre ligados, sempre conosco, geralmente conectados e diretamente endereçáveis. Mais ainda, eles estão por aí com poderosos sensores que podem detectar a (sua própria) localização, movimentos, aceleração, orientação, proximidade, condições ambientais e mais. STARK (2012).

2.3 Tablet

Computadores em formato de tablete, ou simplesmente tablets, tiveram sua

explosão com o lançamento 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 milhões de tablets em uso no mundo, cifra que dificilmente pode ser

ignorada.

Possuem tamanhos de tela maiores que os telefones e, em grande parte,

são utilizados conjuntamente à banda-larga sem-fio interna disputam funções e

utilizações 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 disponíveis seguem muito de perto as características dos

citados para smartphones.

2.4 Televisores

Estas telas geralmente passivas ganham novas utilidades com o lançamento

de televisores inteligentes que se conectam à grande rede. Apesar de contarem com

aplicações dedicadas, a funcionalidades para assistir conteúdo, como aplicativos

para assistir vídeos gratuitos e por assinatura, também acompanham navegadores

de Internet e formas do usuário digitar os dados de navegação diretamente do sofá

da sala. (GASSTON, 2013)

Apesar de toda inteligência agregada ao dispositivo, uma pesquisa recente

(Nielsen Company) revelou que 77 por cento dos espectadores de televisores já

estão simultaneamente em outro dispositivo enquanto assistem, ou tentam assistir,

ao televisor. (Id., 2013) Características relevantes são que não acompanham um

sistema muito eficiente de entrada de dados pelo usuário, com controles remotos

pouco práticos para navegação equivalente a um computador pessoal. Outro ponto

negativo é que o televisor é potencialmente de uso comum de várias pessoas,

perdendo a questão de ser pessoal e nem sempre é possível realizar tarefas de

interesse exclusivo já que outros podem desejar utilizá-lo simultaneamente, forçando

um uso impessoal que agrade a maioria no momento. (Id., 2013)

2.5 Consoles de videojogo

Existem menções aos consoles conhecidos como Xbox 360 da empresa

Microsoft e ao Playstation 3 da Sony além do Wii U que possuem navegadores que

são especificações variantes do já citado Webkit. Apesar disso são citados pelo

autor como de menor freqüência de uso e menos relevantes nas decisões dos

desenvolvedores atualmente. (DAWSON, 2012)

3 AS LINGUAGENS DA INTERNET

No início a ARPANET, a rede que deu origem à Internet,

tráfego de documentos

simples. De acordo com

Wikipédia (2013), não havia um indexador como as ferramentas de pesquisa atuais

ou aplicação do conceito de livre navegação

demonstra a Figura 1.

Figura 1 - Mensagem de correio eletrônico transmitida pela ARPANET.

Fonte: Astrosurf (2013).

Na década de 1990,

a localização de documentos e possibilitar formatos avançados de texto, pois os

aplicativos atuais não facilitavam a busca por informações e arquivos na rede

2013)

Novas ferramentas de uso da rede foram então desenvolvidas.

ferramentas se utilizavam de novas linguagens para

Esse capítulo se dedica a descrever as linguagens utilizadas pelos navegadores de

Internet, que são os aplicativos utilizados para exibir e navegar

AS LINGUAGENS DA INTERNET

ARPANET, a rede que deu origem à Internet,

tráfego de documentos e mensagens de correio eletrônico em texto de formato

De acordo com a lista de aplicações de rede da ARPANET presente na

ão havia um indexador como as ferramentas de pesquisa atuais

o conceito de livre navegação que só surgiria em 1996, como

Mensagem de correio eletrônico transmitida pela ARPANET.

Na década de 1990, com a explosão de uso da rede, foi necessário melhorar


aplicativos atuais não facilitavam a busca por informações e arquivos na rede

Novas ferramentas de uso da rede foram então desenvolvidas.

ferramentas se utilizavam de novas linguagens para se criar conteúdo navegável.

e capítulo se dedica a descrever as linguagens utilizadas pelos navegadores de

nternet, que são os aplicativos utilizados para exibir e navegar em suas páginas

21

ARPANET, a rede que deu origem à Internet, era perfeita para o

em texto de formato

a lista de aplicações de rede da ARPANET presente na

ão havia um indexador como as ferramentas de pesquisa atuais

que só surgiria em 1996, como

, foi necessário melhorar


aplicativos atuais não facilitavam a busca por informações e arquivos na rede. (Id.,

Novas ferramentas de uso da rede foram então desenvolvidas. Estas

se criar conteúdo navegável.

e capítulo se dedica a descrever as linguagens utilizadas pelos navegadores de

em suas páginas.

22

3.1 A linguagem HTML

HTML é uma sigla que na língua inglesa significa Hypertext Markup

Language, ou em português: Linguagem de Marcação de Hipertexto. (FERREIRA;

EIS, 2010)

É uma linguagem para publicar conteúdo digital, ou seja, mais do quê

apenas textos simples sem formatação. É possível utilizar HTML para publicar textos

com alto nível de formatação, como cores, tamanhos e posicionamentos diversos.

Também é permitido publicar imagens, vídeo, áudio e outros formatos multimídia 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 não estão conectados de maneira linear como os

conteúdos de um livro, com os assuntos em um volume, que são dispostos em certa

ordem. (Id., 2010)

Trafegar por entre os conteúdos de hipertexto pode ser feito seguindo

ilimitados trajetos dentro os caminhos oferecidos. É possível dispor conteúdos para

se trafegar linearmente como em um livro, mas também é possível permitir que a

pessoa navegando pelo conteúdo escolha o caminho como bem desejar. Isso é

possível, 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 básico de hipertexto.

23

Figura 2 - Exemplo de documentos ligados por Hipertexto.

Fonte: Autor do trabalho (2013).

Segundo Shklar; Rosen (2003) e também informado por Ferreira; Eis (2010),

o autor original da HTML é Tim Berners-Lee, que tinha o intuito de criar uma

linguagem universal para disposição de conteúdo em documentos de hipertexto.

Foi popularizado na década de 1990, junto com o navegador (programa de

computador utilizado para acessar documentos de hipertexto) chamado Mosaic,

quando ganhou força. Este sucesso levou outros desenvolvedores adotarem a

linguagem HTML em seus programas, iniciando um processo de adoção do padrão.

(Id., 2010)

É uma linguagem que parte do formato inicial de um texto em fluxo normal

como dos editores de texto sem formatação convencionais, mas que utiliza de

códigos especiais para torná-los ricos em formatos e interação. Este códigos que

não pertencem ao significado texto, mas estão presentes para modificarem o

comportamento da exibição do texto inicial e criarem possibilidades de navegação

para outros documentos. (Id., 2010)

24

Os textos adicionais na HTML são mostrados na Figura 3.

Figura 3 - Exemplo de código em linguagem HTML.


Todos os códigos que estão cercados pelos caracteres menor < e maior >

são considerados tags (tag é um tipo de marcação, ou etiqueta identificadora) como

informado por Duckett (2010).

Algumas dessas tags possuem um início e um fim, dessa forma cercam uma

quantidade de textos ou códigos, significando que afetam tudo que está contido

entre as tags de abertura e de fechamento, delimitando assim sua região de efeito,

como ilustra a Figura 4. (Id., 2010)

Figura 4 - Tags, atributos e valores.


25

3.1.1 As versões 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 três novas versões: HTML+, HTML 2.0 e HTML 3.0.

Apesar da alta adoção e popularidade, a HTML não era tratada como um

padrão até 1997, sendo apenas uma sugestão de especificação que não era

totalmente respeitada por todos os implementadores de navegadores de Internet.

(Id., 2010)

Linha do tempo de versões 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 publicações adicionaram:

o 25 de novembro de 1995, RFC 1867 (upload de arquivos em

formulário);

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(internacionalização).

• HTML 3.2 - em janeiro de 1997, publicada como recomendação;

• HTML 4.0 - em dezembro de 1997, publicada como recomendação e

oferecia três variações:

o Estrita, na qual elementos depreciados não 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 edições sem

incrementar seu número de versão;

• HTML 4.01- em dezembro de 1999, foi publicada como recomendação

oferecendo as três versões que a HTML4.0 do ano de 1997;

26

• ISO HTML - em maio de 2000, foi publicada como um padrão

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 conteúdo escrevesse um código

que seria acessível por diversos meios sem qualquer necessidade de adaptação.

Isto permitiu que a Internet crescesse livre de padrões proprietários, ou encontrasse

limitações e problemas de incompatibilidade. A publicação 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 não

estavam satisfeitos com os rumos das versões da HTML e a versão chamada

XHTML (Extended HTML) que o Grupo W3C (World Wide Web Consortium), que a

principal organização de padronização da WWW (World Wide Web), estava

desenvolvendo. (FERREIA; EIS, 2010)

Diferente da ideia original, estas versões da HTML estavam altamente

segmentadas e várias versões disputavam popularidade sem qualquer

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

Application Technology Working Group (WHATWG), responsável por realizar o que

se conhece, hoje, por HTML5. (Id., 2010)

A iniciativa do WHATWG foi divulgada mundialmente, chegando a chamar a

atenção do Grupo W3C, de forma que o W3C reconheceu a iniciativa e o trabalho

desempenhado até então. Em 2006, Tim Berners-Lee anunciou que trabalharia

juntamente com o WHATWG na criação do HTML5, ao invés de investir no XHTML.

Assim, a XHTML2 foi descontinuada, em 2009, devido ao sucesso da HTML5. (Id.,

2010)

27

3.1.3 Mudanças presentes na HTML5

Em 2010, Ferreira; Elcio informaram que a HTML5 teve como objetivo

padronizar e facilitar a escrita de código HTML, diminuir o volume de código,

padronizar necessidades que antes eram feitas de maneiras diversas, mas geravam

o mesmo resultado.

Propõe código interoperável, preparado para possíveis dispositivos que

acessarão o código no futuro. Conteúdos que necessitavam de plugins (executáveis

suportados por alguns navegadores que estendem sua capacidade com novas

funcionalidades) para certos conteúdos, mas tais plugins não estavam disponíveis

para todas plataformas de maneira homogênea 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 padrão para classificar seções do documento, como cabeçalho,

conteúdo, menus e rodapé. Sendo mais fácil de interpretar e estender os códigos

das páginas da Internet usando linguagens de programação.

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 formatação de conteúdo que define uma série de

regras para definir como será a exibição de elementos da HTML. (DUCKETT, 2010)

Possuem configurações para cores, tamanhos de textos, fontes de texto,

posicionamento de elementos, tamanho de elementos visuais entre muitos outras.

O propósito de sua existência é separar as configurações de exibição das

marcações presentes na HTML, facilitando entendimento e reuso de códigos. Dessa

maneira, foi criada permitindo o mais alto nível de separação dos códigos 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 configurações presentes nos mesmo sem criar um

volume desnecessário dentro do arquivo HTML. É possível inclusive reutilizar o

mesmo arquivo CSS para várias páginas HTML, o quê facilita muito quando se

deseja alterar um estilo de exibição em todos os arquivos HTML que vinculam este

arquivo CSS, como mostra a Figura 6

Figura 6 - Visualização de CSS em vários arquivos HTML.

Fonte: Autor do trabalho (2013)

O uso inverso é também utilizado, que seria possuir diversos arquivos CSS

que mudam totalmente a aparência do mesmo arquivo HTML, assim sendo,

temas de exibição para um mesmo arquivo HTML são simples de se criar

ilustra a Figura 7.

alterar um estilo de exibição em todos os arquivos HTML que vinculam este

, como mostra a Figura 6. (DUCKETT, 2010)

Visualização de CSS em vários arquivos HTML.

do trabalho (2013)


que mudam totalmente a aparência do mesmo arquivo HTML, assim sendo,

temas de exibição para um mesmo arquivo HTML são simples de se criar

29

alterar um estilo de exibição em todos os arquivos HTML que vinculam este


que mudam totalmente a aparência do mesmo arquivo HTML, assim sendo, vários

temas de exibição para um mesmo arquivo HTML são simples de se criar, conforme

Figura 7 - Trocando vínculo com


3.3 A linguagem Javascript

As linguagens HTML e CSS são conhecidas como linguagens de marcação,

pois apenas delimitam áreas a serem formatadas em um texto e como será esta

formatação, permitindo livre montagem de informações em uma página HTML.

Infelizmente, as linguagen

programação, pois não permitem que a página HTML seja modificada, sendo assim

criam páginas estáticas sem permitir sua mudança perante diferentes circunstâncias

ou modificações por interação do usuário que navega

A linguagem de programação Javascript

orientada a objetos e geralmente

capaz de receber ações do usuário em um documento HTML para permitir ao

programador responder com ações de programação, modificando a apresentação da

página. O que antes era apenas um documento estático

aplicativo com uma calculadora

com arquivo CSS de um arquivo HTML.

do trabalho (2013).

Javascript




Infelizmente, as linguagens de marcação diferem das linguagens de

pois não permitem que a página HTML seja modificada, sendo assim


ou modificações por interação do usuário que navega. (SHKLA; ROSEN, 2003)

A linguagem de programação Javascript, de acordo com S

objetos e geralmente está embutida nos navegadores de


sponder com ações de programação, modificando a apresentação da

antes era apenas um documento estático, hoje pode conter um

aplicativo com uma calculadora totalmente funcional, por exemplo.

30




s de marcação diferem das linguagens de

pois não permitem que a página HTML seja modificada, sendo assim


ROSEN, 2003)

, de acordo com Silva (2010), é

embutida nos navegadores de Internet, sendo


sponder com ações de programação, modificando a apresentação da

, hoje pode conter um

, por exemplo.

31

É possível modificar todo tipo de tag do documento como, por exemplo,

modificar o arquivo CSS do documento dependendo do horário 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 marcação, como a HTML, seria possível

desenhar uma calculadora completa, mas impossível fazê-la efetuar os cálculos pois

os elementos visuais não se modificariam ao se apertar os botões e não haveria

inteligência dos cálculos programada no documento, como se mostra na Figura 8.

Outra funcionalidade praticada é a de verificar os formulários que são

preenchidos por quem navega nas páginas, assim se alerta a pessoa que digita que

digitou em um campo de texto, que deveria conter uma data, dados inválidos, ou que

se esqueceu de preencher um campo essencial para a função específica do

formulário.

Figura 8 - Calculadora funcional em HTML e Javascript.

Fonte: Uize (2013).

Javascript não é recomendada para lógicas muito sofisticadas, pois sofre

uma dependência muito forte de compatibilidade com o navegador que apresenta a

página. Para minimizar estes problemas, algumas vezes, desenvolvedores recorrem

a códigos adicionais que funcionam de maneira diferenciada dependendo do

navegador, aumentando a complexidade dos códigos de maneira a obter maior

compatibilidade. Embora, tenha suas limitações esta linguagem é conhecida por ser

também responsável por ótimos resultados de interação, como foi citado por Shklar;

32

e Rosen (2003):

"JavaScript é um pouco como um veneno orgânico—ele lhe matará em

grandes doses mas pode ser um cura inestimável se você usá-lo da forma certa"

3.3.1 Criação da linguagem Javascript

A linguagem JavaScript foi inventada por Brendan Eich, da Netscape, e a primeira versão da linguagem denominada JavaScript 1.0 foi introduzida no navegador Netscape 2.0 em 1996. Nesse mesmo ano, a Microsoft lançou sua versão com o nome JScript 1.0 e introduziu-a no então Internet Explorer 3.0. Àquela época, em plena guerra dos navegadores, as diferentes implementações das funcionalidades da linguagem nos dois navegadores não seguiam um padrão unificado, causando um verdadeiro martírio para o desenvolvedor implantar scripts para servir ambos os navegadores. SILVA (2010)

Criada com a intenção de tornar os conteúdos mais dinâmicos, sofreu muitas

mudanças em seu ciclo de vida, pois começou a ser segregada por empresas

desenvolvedoras de navegadores de Internet para atender necessidades próprias.

Mais adiante, ver-se-á que sua última versão sendo adotada se propõe a resolver

este conflito.

3.3.2 Normas que padronizam Javascript

A associação ECMA (European Computer Manufacturers Association),

fundada em 1961, é uma associação que se dedica à padronizar sistemas de

informação. (SILVA, 2010)

Tornada internacional em 1994, já padronizou a linguagem Javascript desde

o ano de sua concepção em 1996, chamando-a de ECMA-262, lançando em 1997 a

primeira edição da norma. A ISO (International Organization for Standardization)

reconheceu este trabalho oficialmente já em 1998. (Id., 2010)

A Figura 9 apresenta a evolução da linguagen Javascript.

33

Figura 9 - As versões 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á construído, permitindo acesso

às funcionalidade já existentes. (SILVA, 2010)

Não 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 execução do Javascript.

Fonte: Silva (2010).

3.3.3 Características da linguagem

É capaz de trabalhar orientada à objetos, pois oferece suporte à criação de

objetos com propriedades e métodos, apesar de não estar totalmente de acordo com

o conceito computacional de OOP (Object-Oriented Programming), segundo Silva

(2010).

Suporta caixas de diálogo padrão para comunicação e alertas para o usuário

que navega na página. Permite manipular todas as tags do documento, modificando

seus atributos, enquanto o navegador de Internet se encarrega de redesenhar tudo

35

para o usuário que navega ver as modificações que o Javascript realiza na página.

(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 código HTML

dentro do documento, permitindo que se escreva mais no documento mesmo após

completamente carregado, e este novo conteúdo gera novos objetos para serem

manipulados ou exibidos. (Id., 2010)

Javascript suporta diversos eventos, que são situações especiais que

disparam a execução de códigos de programação. O clicar do mouse em um botão

na página poderia disparar um bloco de código que exibe uma mensagem, ou

realiza uma operação 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 versão maior de uma foto de um determinado produto em

uma loja virtual, facilitando assim ao cliente visualizar o produto sem ocupar espaço

permanentemente na página. (Id., 2010)

Há também temporizadores que podem disparar códigos em intervalos de

milissegundos determinados, podendo atualizar a hora a cada segundo para manter

uma miniatura de relógio em um certo canto da página. (Id., 2010)

A linguagem é sensível a digitação de palavras-chave (comandos exclusivos

da linguagem que definem o quê deve ser executado) em maiúsculas ou

minúsculas, de maneira que um comando deve ser digitado exatamente da maneira

que a documentação define ou ocorrerá erro ao executar o código. (Id., 2010)

Como outras linguagens a Javascript não faz distinção em excesso de

espaços entre os códigos, ter mais de um comando por linha, ou até mesmo um

comando estar distribuído em várias linhas de código, contanto que não se

interrompa ao meio suas palavras-chave. Todos os comandos em Javascript são

finalizados pelo caractere ponto-e-vírgula (;) 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 botões de interação são construídos no

Javascript.

Figura 9 Exemplo de botões de ação em Javascript.


É uma linguagem com suporte à arranjos lógicos de dados, ou arrays, que

são grupos de variáveis e que podem conter todo tipo de conteúdo, inclusive outros

arranjos. (Id., 2010)

Textos que devem ser tratados como literais, ou seja, não são comandos,

devem estar sempre entre aspas simples (') ou duplas ("). Esta é a forma de definir

conteúdo constante em variáveis e propriedades que contém textos, conhecidos

como string. Números são digitados sem aspas diretamente entre os códigos, e para

números decimais se usa a vírgula para separar as casas decimais. (Id., 2010)

37

3.3.4 AJAX

O AJAX combina tecnologias existentes para auxiliar desenvolvedores a dar a usuários da web uma mais avançada experiência de navegação. Utilizando XHTML, CSS, JavaScript, e XML, todas tecnologias testadas-e-comprovadas, ao curso com o objeto XMLHttpRequest, você pode transformar navegadores em plataformas de aplicações que bem de perto espelham aplicações de computadores de mesa. Esta capacidade está permitindo sítios web converter para sítios Web 2.0, enquanto incrementa o número de novas aplicações 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 assíncronos) foi

cunhado, segundo Holdener (2008).

Outras tecnologias e plugins estavam sobrepondo as funcionalidades do

Javascript, quando as requisições assíncronas do AJAX surgiram trazendo inovação

ao campo da Web. (Id., 2008)

Sua principal tarefa é obter informações de servidores Web sem a

necessidade de recarregar a página para isso. É como se o Javascript tivesse seu

próprio navegador interno, que é capaz de obter novas informações para o

programador trabalhar e exibir no documento HTML sem ter que obter e redesenhar

todo o documento em uma requisição do navegador. (Id., 2008)

3.3.4.1 A página HTML como aplicação cliente

A capacidade de se transmitir e obter dados sem se descartar a página atual

tendo que recarregá-la trabalha um conceito de tornar a página HTML como uma

aplicação cliente separada. Uma vez carregada a estrutura da página, carrega-se

apenas os dados necessários para atualizá-la. (HOLDENER, 2008)

De maneira simples, o primeiro acesso à página seria o ato de se receber a

aplicação-cliente em HTML com Javascript. Esta aplicação em HTML com Javascript

se encarrega de: (Id., 2008)

• Obter dos dados atualizados que a aplicação necessita;

• Desenhar na página os novos dados nos locais adequados;

• Enviar dados que devem ser transmitidos ao servidor.

38

A Figura 12 mostra como operam as requisições em AJAX.

Figura 10 - Comportamento de requisições em AJAX


Um exemplo seria um usuário de e-mails que carrega sua estrutura uma vez

que o usuário se autentica, então efetua uma requisição AJAX para trazer uma lista

das mensagens da primeira página da caixa de entrada. (HOLDENER, 2008)

Quando o usuário clica em uma mensagem, o Javascript obtém o seu

conteúdo 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 necessário, remonta a lista de mensagens com a(s) nova(s)

mensagem(ns). Quando o usuário decide escrever uma nova mensagem e clica no

botão correspondente, o Javascript então exibe caixas para digitação dos dados.

(Id., 2008)

Ao concluir e clicar no botão específico para enviar a mensagem, o

Javascript faz uma requisição 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 possível enviar ou não. Este aviso então é recebido pelo Javascript e

exibido ao usuário. (Id., 2008)

Comprovadamente, é possível afirmar que há uma diminuição no volume de

tráfego de dados, pois onde cada atualização exigia a transmissão de uma página

HTML completa, com AJAX somente as informações relevantes são solicitadas e

transmitidas, pois se considera que a estrutura básica já está presente e funcional

no navegador do usuário e retransmiti-la causa um efeito visual indesejado de

redesenho em que a página é apagada e rapidamente redesenhada. (Id., 2008)

40

4 CONHECENDO O APACHE CORDOVA

Apache Cordova é uma plataforma para construção de aplicações usando

HTML, CSS e JavaScript. É um projeto muito curioso que visa transformar o código

em HTML com Javascript em aplicativo nativo de várias plataformas, sendo bem

abrangente atualmente, segundo o próprio sítio 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 abrangência é muito relevante na hora de escolher uma plataforma de

desenvolvimento, pois quem desenvolve quer atingir o maior público possível. Além

de fornecer tudo o que está disponível em um navegador corrente para o

desenvolvedor criar suas interfaces, possui acesso à novas bibliotecas de códigos

que permitem ao desenvolvedor trabalhar com características dos dispositivos como

acessar arquivos da memória do dispositivo, informações sobre os contatos de um

telefone inteligente, sensores, GPS, câmeras e tudo mais que o dispositivo permitir.

De acordo com a documentação do projeto, o segredo está em combinar no

aplicativo final um pequeno executável nativo que abre os códigos desenvolvidos em

HTML e Javascript com uma WebView, que é uma característica dos sistemas

operacionais de exibir conteúdo de Web nos dispositivos. (WARGO, 2013)

Dessa maneira, o conteúdo é aberto em tela cheia no dispositivo e o usuário

final nem toma conhecimento de que está utilizando algo feito com tecnologia Web

ao invés de tecnologia nativa. Para ele é apenas mais um aplicativo instalado em

seu dispositivo. (Id.,2013)

É possível 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 necessário, como outras telas

feitas em HTML, imagens, arquivos CSS e de Javascript adicionais, subpastas e

41

tudo mais que o HTML suporta. Muitas aplicações em Javascript puras nem mesmo

necessitam de conversão ou adaptação, podendo simplesmente serem

empacotadas usando o software disponível no endereço 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 usuário de acordo com a necessidade,

mas é algo que cada vez mais os desenvolvedores se acostumam devido ao imenso

número de dispositivos acessando os conteúdos que produzem. (Id., 2013)

42

5 ESTUDOS DE CASO

Nesse capítulo é 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

São Paulo, adquiriu de uma empresa terceirizada um software de painel de

chamadas para pacientes no início do ano de 2012, que se propunha a integrar-se

com o sistema de controle do hospital existente.

Dessa maneira os médicos chamariam os pacientes ao clicar em um botão.

Já existia a lista de pacientes em espera para serem atendidos no sistema de

controle padrão do hospital. O botão de chamada então chamaria uma rotina de

programação 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.


Dois computadores foram instalados, cada um com diversos televisores de

43

quarenta e duas polegadas utilizados como monitor de imagem nas suas saídas de

vídeo, como um computador com várias telas espelhadas. Os sons provenientes

destes computadores também eram direcionados com cabos até os televisores. Um

executável, 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.


5.1.1 Problemas do projeto de software

O projeto foi idealizado e implantado. A tela do sistema padrão do hospital já

dispunha do botão de chamadas de pacientes e os computadores de chamadas

estavam instalados corretamente.

Infelizmente, começaram a surgir diversos problemas com o software

adquirido da empresa terceirizada. Os problemas não ocorriam devido a escolha da

44

tecnologia Delphi, pois a mesma é capaz de atender os requisitos, mas não foi

desenvolvido de forma correta, e todas correções solicitadas demoravam a serem

entregues pela prestadora de serviços.

Meses depois da implantação, já no ano de 2013, ainda havia problemas

recorrentes e a equipe de suporte técnico constantemente era demandada para

sanar situações com correções como reiniciar o computador de exibição, o que

acarretava mais problemas, pois a lista de pacientes chamados desaparecia e os

médicos continuavam chamando sem saber que o sistema estava inoperante.

Algumas correções novas trouxeram problemas antigos e o problema se

estendia por mais de um ano. Nessa altura, os médicos do hospital já estavam

totalmente habituados a utilizar os painéis e não aceitavam mais voltar a chamar

com a voz os pacientes. A insatisfação do gestor era clara, ele havia adquirido algo

que se tornou necessidade, mas não podia confiar no produto.

5.1.2 Problemas na instalação de nova tela

No início 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 não havia sido possível concluir a

instalação. Aparentemente, interferências eletromagnéticas impediam a imagem de

chegar ao televisor, mesmo adquirido um novo cabo não foi possível levar a imagem

até o televisor localizado na pediatria.

Muito tempo e dinheiro foram gastos com as soluções lógicas, testando

combinações de cabos e saídas de vídeo diferentes que funcionavam para outros

televisores. Inclusive o televisor foi substituído sem sucesso. Assim, não foi possível

concluir a razão do sinal, pois todas as substituições possíveis de equipamentos

foram realizadas pela equipe de informática do hospital.

45

5.1.3 O desafio de programação

Visto o cenário, o autor deste trabalho, que trabalhava como desenvolvedor

de sistemas neste hospital, propôs ao seu superior imediato o desafio de criar,

rapidamente, um substituto para o sistema de chamadas usando HTML.

Em questão de horas, foi possível ter uma versão funcional de uma tela de

chamadas que se integrava completamente ao sistema existente, apenas com a

substituição da aplicação 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 painéis

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 não afetasse o valor da compra de forma relevante.

A opção pelos televisores inteligentes foi feita pois pouco acarretavam no

cenário de custos de um novo painel, sendo os cabos e ligações mais caros do que

esta diferença.

Ao chegarem os televisores inteligentes adquiridos, foi necessária uma

pequena adaptação, que demorou menos um dia para ser descoberta, no trecho de

código que tocava o som, pois o televisor somente suportava no formato chamado

MP3 (MPEG Audio Layer 3) ao invés do padrão do HTML5 que é WAV (Wave) ou

OGG.

5.1.4 A solução e funcionamento do painel

Foi então colocado na pediatria um televisor inteligente rodando o sistema,

ligado apenas por um cabo de rede, o qual havia abundância e facilidade de

instalação no local. O televisor acessava o sítio de Web interno do hospital e obtinha

a tela com a lista dos pacientes, além de tocar os sons usando HTML5 e Javascript

e dar alertas visuais no paciente chamado.

46

Limitações do televisor inteligente levaram a uma revisão dos códigos, e ao

invés do ASP.Net AJAX da Microsoft foi remodelado para utilizar AJAX puro (de

codificação mais manual), ficando mais leve e confiável.

Nesta altura o código Javascript que era executado no televisor já era

avançado para detectar problemas na rede, e quando a rede falhasse, mostrava um

aviso até que o problema fosse solucionado, quando então o Javascript retomava a

chamada dos pacientes normalmente sem intervenção 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 informática 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 não mais trabalha neste local, mas foi informado por ex-colegas que

desde a implantação não houve qualquer tipo de problema, e apesar de verificar o

painel fazer parte da antiga lista de verificação de tarefas do setor, já se tornou

item obsoleto devido a completa falta de ocorrências e confiabilidade.

A Figura 15 esclarece a forma de operação do painel de chamadas Web.

47

Figura 12 - Sistema Web de chamados.


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 manutenção humana.

5.2 Jogo criado com Apache Cordova

Como experimento prático, o autor decidiu desenvolver um jogo utilizando

Javascript para estudar como é o cenário de desenvolvimento em HTML5 seu novo

objeto Canvas (do inglês tela, que permite uma forma de pintura em um quadro de

imagem na página).

Os objetivos são desenvolver um jogo funcional em computadores e ter o

mesmo jogo sem alteração executando em dispositivos com Sistema Android que

48

são muito comuns e presentes na atualidade. Desejado também é 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ô através de cartas de

programação, 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 matemática combinatória e muito conhecido por seu

principal jogo de cartas colecionáveis, Magic: The Gathering. (WIKIPÉDIA, 2013)

Decidido por uma versão simplificada, pois não haveria disponibilidade de

tempo para desenvolver um jogo online para vários jogadores em conjunto com

atividades acadêmicas, apesar de ser simples de realizar isto toma muito tempo

para testar, sincronizar e homologar.

Figura 13 - Jogo de robôs em navegador de Internet.


49

Uma versão de quebra-cabeças ou desafios foi a opção, permitindo o

exercício da programação de robôs com cartas. Funciona da seguinte maneira: há

um tabuleiro com casas quadriculares com vários obstáculos 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 programação dentro oito

disponíveis. Cada carta é executada sequencialmente na ordem de sua escolha.

Dessa forma, quando concluída a programação, o robô executará as cartas de

comando uma após 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/programação o jogador necessitou para chegar.

O robô sempre está com a frente apontada para uma das arestas de seu

quadrado, como se fosse a direção que o mesmo olha e considera sua frente. As

cartas possuem comandos que podem ser:

• Andar uma casa à frente;

• Andar duas casas à frente;

• Andar três 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 trás (sem mudar a direção que aponta).

A Figura 17 apresenta os comandos do robô.

50

Figura 14 - Comandos de programação dos robôs.


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

forçando o jogador a iniciar todo o processo desde o início em um jogo totalmente

novo. Há também esteiras rolantes que não danificam, mas modificam a posição do

robô caso ele termine uma ação de movimento em cima das mesmas. Após ser

movido por uma esteira, se o robô for colocado em uma segunda esteira, não será

afetado por esta segunda esteira nesta rodada.

5.2.2 Animação em HTML5

Estudados livros de animação em HTML5, foram efetuados testes com

animação e redesenho diretamente com o objeto Canvas do HTML5. Após um par

de experimentos usando a tecnologia a sensação resultante foi que a tecnologia

funciona perfeitamente, mas como fornece objetos muito simples o experimento já

caminhava no sentido de construir um motor de animação.

51

Seria como construir uma biblioteca com as funcionalidades necessárias

para depois fazer uso da mesma. Como já existem diversos motores e bibliotecas

com esta função já prontas e gratuitas, não fazia sentido "reinventar a roda". O foco

voltou-se em escolher uma biblioteca agradável.

5.2.3 Biblioteca oCanvas

Em ferramentas de buscas foi possível localizar diversas bibliotecas e

motores de animação. Dentre todas, foi escolhida a oCanvas, disponível

gratuitamente em <http://ocanvas.org/>, por possuir o que seria necessário sem

exageros.

A documentação disponível no sítio do projeto é bem abrangente, e os

exemplos podem ser testados no próprio navegador. Inclusive há um teste de curvas

de aceleração de movimento, que tornam movimentos mais naturais, como mostra a

Figura 18.

Figura 15 - Exemplo de programação de robô.


Movimento de animação sem aceleração resulta em animação pobre, como

por exemplo uma carta de baralho se movendo ao seu destino com velocidade

constante é bem monótona. Um carro parado em um semáforo se acelera ao sair,

chega na velocidade desejada e desacelera antes de parar novamente. Uma pessoa

que se move segue o mesmo princípio em menor escala.

O ideal é efetuar alguma aceleração, como por exemplo que ela saia

52

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

a sensação 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 não atendidas pela tecnologia. Infelizmente o

desenvolvimento da mesma é muito lento frente à concorrentes como o EASELJS,

uma biblioteca em Javascript queinclui mais funcionalidades para animação em

HTML5, e provavelmente não é recomendado investir desenvolvendo na oCanvas

com risco de depreciação.

O desenvolvimento para navegadores em computadores pessoais ocorreu

sem qualquer problema, de forma agradável foi possível utilizar sem preocupações

as complexidades de animação. Os resultados são precisos e os navegadores

compatíveis com HTML5 apresentam sem problemas o mesmo resultado nos testes.

Já o desenvolvimento para dispositivos Android, apesar de funcionar

corretamente em sua mecânica básica, dificulta muito a exibição 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 configurações para não

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 móveis, o autor sentiu falta nas bibliotecas de animação em Canvas de

uma funcionalidade para auto-dimensionar conteúdos 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 possível que isto seja alcançado por bibliotecas que se tornarão padrão

no futuro.

53

6 CONCLUSÃO

De acordo com os casos de uso experimentados, a tecnologia HTML é de

alta compatibilidade, com suas propriedades aumentando sem ser necessária

intervenção dos responsáveis pelo HTML, uma vez que os produtores de

dispositivos e navegadores é quem almejam compatibilizar com o padrão.

Desenvolver neste padrão irá facilitar muito o aprendizado, pois será uma linguagem

única para diversas tarefas, sem esquecer da mais comum que é desenvolver

portais de conteúdo e sítios Web.

A linguagem HTML5 certamente é promissora e não demonstra

possibilidade de substituição a curto prazo, mesmo respeitada a característica

instável dos padrões da informática em um mundo de atualização constante. Atingiu

um nível de adequação impecável e imensa abrangência ao fornecer as

capacidades que antes somente se encontrava em discutíveis ferramentas auxiliares

ao HTML, de forma a tornar obsoletos todos os complementos de programação

necessários que a tornavam segmentada e criavam incompatibilidade com certas

plataformas-alvo.

Nem tudo é perfeito, pois a especificação atual é apenas uma forma bruta

para os programadores, sendo necessário criar camadas adicionais de código para

utilização de forma eficiente. Isso abre campo para criação de bibliotecas

interoperáveis que facilitam as tarefas sem criar antigo problema, uma vez que as

funcionalidades básicas fazem parte do núcleo da linguagem e não se necessita dos

duvidosos plugins.

54

REFERÊNCIAS

CORDOVA. Projeto Apache Cordova. Disponível em: <http://cordova.apache.org>.

Acesso em: 15 nov. 2013.

COULOURIS, G. Sistemas distribuídos: 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. Publicação em: 2012. Disponível em

<http://www.w3.org/Mobile/>. Acesso em: 27 nov. 2012.

DREDGE, Stuart. Social. TV and second-screen viewing: the stats in 2012.

Disponível em:

<http://www.theguardian.com/technology/appsblog/2012/oct/29/social-tv-second-

screen-research>. Acesso em: 22 set. 2012.

DUCKETT, J. Beginning HTML, XHTML, CSS, and JavaScript. USA: Wiley

Publishing, Inc., 2010.

EASELJS. Biblioteca Javascript EASELJS. Disponível em:

<http://www.createjs.com>. Acesso em: 12 out. 2013.

FERREIRA Elcio; EIS Diego. HTML5: Curso W3C. Escritório Brasil. Disponível 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. São Francisco: No Starch Press, 2013.

HJELMEROOS, Heli et al. Coping with Consistency under Multiple Design

Constraints: The Case of the Nokia 9000 WWW Browser. Disponível 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: O’Reilly Media Inc, 2008.

MCCRACKEN, Harry. Apple Monopolistic? Maybe. Control Freaks? Definitely!

Disponível em: <http://technologizer.com/2008/09/07/apple-monopolistic-maybe-

control-freaks-definitely/>. Acesso em: 18 out. 2013.

MOZILLA. Navegador Mozilla para Android. Disponível 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.

Publicação em: 2013. Disponível em: <http://www.nielseninsights.it/wp-

content/uploads/2013/03/03.-global_mobile_report_02_25.pdf>. Acesso em: 22 set.

2013.

OCANVAS. Biblioteca Javascript oCanvas. Disponível 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. São Paulo: Novatec, 2010.

TARTARUS. Tabuleiros alternativos de Robo Rally Disponível 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. Disponível

em: <http://www.whatwg.org/>. Acesso em: 14 nov. 2013.

WIKIPEDIA1. The free encyclopedia. History of the Internet. Disponível em:

<http://en.wikipedia.org/wiki/History_of_the_Internet>. Acesso em: 27 nov. 2012.

56

WIKIPEDIA1. The free encyclopedia. Wireless Application Protocol. Disponível

em: <http://en.wikipedia.org/wiki/Wireless_Application_Protocol>. Acesso em: 28 set.

2013.

WIZARDS. Robo Rally - Site oficial. Disponível em:

<http://www.wizards.com/default.asp?x=ah/prod/roborally>. Acesso em: 18 out.

2013.

tcc html e javascript para vÁrios dispositivos

Documents