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.


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.


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, smartphone.

Javascript,

Web,

dispositivos,

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 necessário castigar os homens." (PITÁGORAS, 500 a.C.)

será

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, imode, 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)

21

3 AS LINGUAGENS DA INTERNET No início a ARP NET, a rede que deu origem à Internet, era perfeita para o tráfego de documentos e mensagens de correio eletrônico e texto de formato simples. De acordo co a lista de aplicações de rede da AR ANET presente na Wikipédia (2013), não h via um indexador como as ferramenta de pesquisa atuais ou aplicação do conceito de livre navegação que só surgiria em 1996, como demonstra a Figura 1. Figura 1 - Mensagem de correio eletrônico transmitida pela ARPANET.

Fonte: Astrosurf (2013).

Na década de 1 90, com a explosão de uso da rede, foi necessário melhorar a localização de docu entos e possibilitar formatos avançad s de texto, pois os aplicativos atuais não f cilitavam a busca por informações e ar uivos na rede. (Id., 2013) Novas ferrame tas de uso da rede foram então d senvolvidas. Estas ferramentas se utilizavam de novas linguagens para se criar onteúdo navegável. Esse capítulo se dedica a descrever as linguagens utilizadas p los navegadores de Internet, que são os apli ativos utilizados para exibir e navegar 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:

•

25 de novembro de 1995, RFC 1867 (upload de arquivos em formulário);

o

•

•

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;

Frameset, onde somente elementos depreciados de frame eram permitidos.

o

•

•

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

29

deseja alterar um estilo de exibição em todos os arquivos HTM que vinculam este arquivo CSS, como mos ra a Figura 6. (DUCKETT, 2010) Figura 6 - Visualização de C S 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, vários temas de exibição para um mesmo arquivo HTML são simples de se criar, conforme ilustra a Figura 7.

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


3.3 A linguagem Ja ascript As linguagens HTML e CSS são conhecidas como lingu gens de marcação, pois apenas delimitam reas a serem formatadas em um text e como será esta formatação, permitindo livre montagem de informações em uma ágina HTML. Infelizmente, a linguagens de marcação diferem as linguagens de programação, pois não ermitem que a página HTML seja modificada, sendo assim criam páginas estáticas sem permitir sua mudança perante difer ntes circunstâncias ou modificações por interação do usuário que navega. (SHKLA; OSEN, 2003) A linguagem de programação Javascript, de acordo om Silva (2010), é orientada a objetos e geralmente está embutida nos navegadores de Internet, sendo capaz de receber açõ s do usuário em um documento HT L para permitir ao programador responder com ações de programação, modificand a apresentação da página. O que antes era apenas um documento estático, h je pode conter um aplicativo com uma calc ladora totalmente funcional, por exempl .

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-ecomprovadas, 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 , 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: . 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 . Acesso em: 27 nov. 2012. DREDGE, Stuart. Social. TV and second-screen viewing: the stats in 2012. Disponível em: . 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: . Acesso em: 12 out. 2013. FERREIRA Elcio; EIS Diego. HTML5: Curso W3C. Escritório Brasil. Disponível em: . 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: . 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: . Acesso em: 18 out. 2013. MOZILLA. Navegador Mozilla para Android. Disponível em: . Acesso em: 27 nov. 2012. NIELSEN. The Nielsen Company. The mobile consumer: A global snapshot. Publicação em: 2013. Disponível em: . Acesso em: 22 set. 2013. OCANVAS. Biblioteca Javascript oCanvas. Disponível em: . 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: . 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: . Acesso em: 14 nov. 2013. WIKIPEDIA1. The free encyclopedia. History of the Internet. Disponível em: . Acesso em: 27 nov. 2012.

TCC HTML E JAVASCRIPT PARA VÁRIOS DISPOSITIVOS

Recommend Documents