PDF - Daniel Araújo de Lucena

1
UNIVERSIDADE ESTADUAL DA PARABA

CAMPUS VII GOVERNADOR ANTNIO MARIZ
CENTRO DE CINCIAS EXTAS E SOCIAIS APLICADAS
LICENCIATURA EM COMPUTAO
DANIEL ARAJO DE LUCENA
HTML5: NOVIDADES E CONTRIBUIES
PATOS PB
2011
2
DANIEL ARAJO DE LUCENA
HTML5: NOVIDADES E CONTRIBUIES
Monografia apresentada ao Curso de

Licenciatura Plena em Computao da
Universidade Estadual da Paraba, em
cumprimento exigncia para obteno do
ttulo de Licenciado em Computao.
Orientadora: Prof Msc. Ana Carolina Costa de Oliveira

Co-orientador: Prof. Diego Fernandes de Arajo
PATOS PB
2011
3
L935h LUCENA, Daniel Arajo de
HTML5: novidades e contribuies, Patos - PB: UEPB, 2011.

85 f.
Monografia (TRABALHO de Concluso de Curso -

- (TCC) - Universidade Estadual da Paraba.
Orientador: Prof. Msc. Ana Carolina Costa de Oliveira
1. Programao 2. Programao Web I.

Titulo II. Oliveira, Ana Carolina Costa de
CDD 5.75
4
5
A Deus, pela fiel e amorosa intercesso de Nossa

Senhora de Ftima, por ter me concedido o dom da vida e
o discernimento, mesmo que limitado, para tomar
decises pautadas nas Suas palavras de vida, DEDICO.
6
AGRADECIMENTOS
Na tentativa de reconhecer minhas incontveis fragilidades e minha busca,

por vezes imatura, pela plenitude que o mundo no reconhece, agradeo ao amor e
infinita misericrdia da Trindade indivisvel que em mim, deixou uma marca
indelvel.
A minha famlia, que mesmo em meio a tantos percalos, souberam mostrar-

me o caminho que edifica e dignifica o ser humano. Ao meu pai Joo Fernandes de
Lucena (Joo Simo) agradeo pela fidelidade ao compromisso de testemunhar as
riquezas do homem simples e trabalhador. A minha me Janaci Arajo de Lucena
louvo a Jesus Cristo por tantos ensinamentos encarnados que expressam o amor e
a pacincia que se transformam em sabedoria do Alto.
Aos meus irmos Janicleide Arajo de Lucena, Isaac Arajo de Lucena e

Joo Fernandes de Lucena Filho agradeo a presena em todos os momentos da
minha vida, pautados na dor ou alegria. Amo vocs.
Aos meus colegas de turma, que me acolheram ao voltar universidade

depois de um ano. Companheirismo, risadas e muitos stand-ups, marcaram-nos.
Agradeo tambm s empresas Magic Web, na pessoa de Antnio Borba;

10envolve, no nome de Marcos Jnior; Easy Web, na pessoa de Leonardo da Costa;
9Ideia, no nome de Freed Muniz e empresa OdonNeto, na pessoa de Odon Neto.
A cada presidente e suas respectivas agncias de desenvolvimento: sucesso e
felicidade plena.
Por fim, agradeo de forma sincera e enraizada no respeito e admirao,

minha competente, atenta e perseverante orientadora Prof Msc. Ana Carolina Costa
de Oliveira por tantos ensinamentos, pelo comprometimento e inmeros puxes de
orelha. Diego Fernandes, mais do que meu co-orientador, meu amigo, obrigado
por todo o esforo empreendido para o bom xito deste trabalho acadmico.
Obrigado tambm pelas mas.
No posso esquecer-me do amigo que Jesus me concedeu: Saulo Jnior

(Ciso). Tantas conversas, sentimentos e histrias correram dentro ns.
Geovani Garcia, que me ajuda a trilhar o caminho estreito da vida.
7
A sabedoria sem a graa inativa.

Mas na hora que a sabedoria recebe a
graa, a obra dela se torna perfeita.
(Santo Ambrsio)
8
RESUMO
A nova verso da linguagem de Tim Berners-Lee, mesmo ainda em

desenvolvimento, vem trazendo possibilidades e contribuies, no apenas aos
programadores, mas a Web como um todo. A partir de novas tags, o HTML5 facilita
a insero de elementos miditicos, contribuindo para tornar os sites mais
interativos, possibilitando uma navegao mais estimulante por parte dos usurios.
No apenas a facilidade na insero de vdeos e udios o motivo que faz do
HTML5 um padro que vm ganhando respeito entre os programadores. A
possibilidade de inserir animaes apenas com linhas de cdigo e a melhor
estruturao e identificao da informao numa pgina eletrnica favorecendo s
ambies da Web semntica, contribuem para que mais profissionais utilizem este
novo padro. Estas afirmaes so resultados de uma pesquisa do tipo quanti-
qualitativa, com base na anlise das respostas assinaladas por programadores de
cinco empresas de desenvolvimento de sites. Satisfazendo os objetivos especficos,
atingimos o objetivo geral do presente trabalho mostrando algumas das novas
contribuies do HTML5 no desenvolvimento de sites e sua aceitao entre os
programadores de pginas Web.
Palavras-chave: HTML5; Web semntica; animaes.

9
ABSTRACT
The new version of the language by Tim Berners-Lee even still in development has
been bringing opportunities and contributions, not just to programmers, but the Web
as a whole. Through new tags, the HTML5 facilitates the insertion of media elements,
helping to make the sites more interactive, providing a more stimulating browsing for
users. Not only the facility of insertion of video and audio is the reason why HTML5 is
a standard that have been gaining "respect" between the programmers. The
possibility of inserting animations only with lines of code and the better structuring
and identification of information on a web page favoring to the ambitions of the
Semantic Web, contribute so that more professional use this new standard. These
affirmations are the result of a quantitative and qualitative type research, based on
analysis of the responses indicated by programmers of five companies developing
sites. Satisfying the specific objectives we achieve the general objective of this paper
showing some of the new HTML5 contributions in the development of sites and its
acceptance among developers of web pages.
Keywords: HTML5, Semantic Web; animations.

10
LISTA DE FIGURAS
Figura 1 Dois computadores interconectados por um hub....................................17

Figura 2 Evoluo do nmero de computadores conectados Internet............... 21
Figura 3 Cdigo HTML 4.01 com ttulo entre as tags <h1> </h1>........................ 26
Figura 4 Execuo do cdigo da Figura 3 no navegador Mozilla Firefox............. 27
Figura 5 Cdigo XML para venda de produto....................................................... 28
Figura 6 Cdigo HTML 5 para inserir udio.......................................................... 31
Figura 7 Cdigo executado no browser Google Chrome...................................... 31
Figura 8 Cdigo HTML5 para visualizar vdeo nos navegadores Safari e Mozilla
Firefox........................................................................................................................ 32
Figura 9 Vdeo executado no browser Mozilla Firefox.......................................... 32
Figura 10 Motores de renderizao........................................................................ 34
Figura 11 Criando o elemento canvas.................................................................... 36
Figura 12 Obtendo o contexto................................................................................ 36
Figura 13 Cdigo JavaScript inserido em cdigo HTML5 para criar animao..... 36
Figura 14 Inicia-se com a bola em queda livre........................................................39
Figura 15 A bola continua pulando.......................................................................... 39
Figura 16 A bola bate na "parede" e volta............................................................... 40
Figura 17 A bola faz a trajetria no sentido contrrio "batendo na parede"............ 40
Figura 18 A bola continua pulando, porm a altura diminui.................................... 41
Figura 19 A bola numa altura menor e pulando no sentido contrrio..................... 41
Figura 20 A bola j no pula e comea a desaparecer........................................... 42
Figura 21 A bola desaparece parcialmente.............................................................42
Figura 22 A bola desaparece totalmente................................................................ 43
Figura 23 Tags HTML mais utilizadas 47
Figura 24 20 classes mais utilizadas.......................................................................47
Figura 25 20 ids mais utilizadas............................................................................. 48
Figura 26 Estrutura bsica de uma pgina Web em HTML 4.1.............................. 49
Figura 27 Estrutura bsica de uma pgina HTML5.................................................50
Figura 28 Tags HTML5 e suas funcionalidades...................................................... 51
Figura 29 Roteiro da pesquisa................................................................................ 54
Figura 30 Tabela com as variveis que geram o questionrio................................55
Figura 31 Faixa etria............................................................................................. 62
Figura 32 Sexo dos programadores entrevistados................................................. 62
Figura 33 Quantidade de funes........................................................................... 63
Figura 34 Tempo de trabalho exercido................................................................... 64
Figura 35 Nvel de formao................................................................................... 64
Figura 36 Seguimento s recomendaes da W3C................................................65
Figura 37 Importncia em seguir as recomendaes da W3C............................... 65
Figura 38 Nvel de conhecimento sobre a linguagem HTML.................................. 66
Figura 39 Utilizao do HTML 4.1 para desenvolver sites...................................... 67
Figura 40 Utilizao do HTML5 para desenvolver sites.......................................... 67
Figura 41 Dificuldades em seguir as recomendaes da W3C.............................. 68
Figura 42 Quantidade de linhas de cdigo com HTML5......................................... 68
Figura 43 HTML5 na identificao da informao pelos motores de busca........... 69
Figura 44 Insero de elementos miditicos utilizando o HTML5........................... 70
Figura 45 Contribuies do HTML5 para a Web Semntica................................... 70
Figura 46 HTML5 como nova possibilidade no desenvolvimento de animaes....71
Figura 47 Execuo de animaes desenvolvidas em HTML5 e Flash..................72
11
Figura 48 Contribuio do HTML5 em tornar os sites mais interativos...................72

Figura 49 Ausncia de plugins utilizando o HTML5................................................ 73
12
LISTA DE SIGLAS
AJAX Asynchronous Javascript and XML

API Application Programming Interface
ARPA Defense Advanced Research Projects Agency
BOL Brasil Online
CEO Chief Executive Officer
CERN Conseil Europen pour la Recherche Nuclaire
CSS Cascading Style Sheets
DOM Document Object Model
DVD Digital Versatile Disc
EMBRATEL Empresa Brasileira de Telecomunicaes S.A.
HTML HyperText Markup Language
IG Internet Group
ISC Internet Systems Consortium
MEMEX Memory Extension
MILNET Military Network
NCP Network Control Protocol
NWG Network Working Group
SGML Standard Generalized Markup Language
TCP/IP Transmission Control Protocol/Internet Protocol
UOL Universo Online
W3C World Wide Web Consortium
WHATWG Web Hypertext Application Technology Working Group
WWW World Wide Web
XHTML Extensible Hypertext Markup Language
XML Extensible Markup Language
13
SUMRIO
INTRODUO .......................................................................................................... 14
1.1 OBJETIVOS ........................................................................................................ 14
1.1.1 Objetivo Geral ............................................................................................................ 16
1.1.2 Objetivos Especficos .............................................................................................. 16
1.2 ESTRUTURA DO TRABALHO..................................................................................... 16
CAPTULO II FUNDAMENTAO TERICA ....................................................... 18

2.1 O ADVENTO DA INTERNET .............................................................................. 18
2.1.1 A Internet e a WWW (World Wide Web) ........................................................ 20
2.2 A ESTRUTURA DA WEB ............................................................................................. 24
2.3 HTML E SUAS VERSES ........................................................................................... 25
2.4 PRIMEIRAS ESPECIFICAES ................................................................................ 26
2.5 WORLD WIDE WEB CONSORTIUM ......................................................................... 27
2.6 EXTENDED MARKUP LANGUAGE ........................................................................... 29
2.7 WEB HIPERTEXT APPLICATION TECHNOLOGY WORKING GROUP ............. 31
2.8 A LTIMA VERSO: O HTML5 .......................................................................... 30
2.8.1 Compatibilidade com o HTML5 ............................................................................. 36
2.9 ANIMAO A PARTIR DA TAG CANVAS ................................................................ 38
2.10 WEB SEMNTICA ............................................................................................ 46
2.10.1 O HTML5 e suas contribuies para a Web Semntica ............................... 48
CAPTULO III PROCEDIMENTOS METODOLGICOS ....................................... 55

3.1 QUANTO AO TIPO DE PESQUISA .................................................................... 55
3.2 ROTEIRO DA PESQUISA ................................................................................... 56
3.3 SELEO DA AMOSTRA OU CASO ................................................................. 58
3.4 QUANTO NATUREZA DAS VARIVEIS ......................................................... 58
3.5 INSTRUMENTOS DE PESQUISA PARA COLETA DE DADOS ......................... 59
3.5.1 Questionrio estruturado ....................................................................................... 60
3.6 COLETA DOS DADOS ................................................................................................. 61
3.7. ANLISE E INTERPRETAO DOS RESULTADOS ....................................... 61
CAPTULO IV ANLISE DOS DADOS ................................................................. 61

4.1 HTML5: MECANISMO DE DESENVOLVIMENTO DE ANIMAES ................. 61
4.2 HTML5 E A SEMNTICA DAS PGINAS .................................................................. 61
4.3 CONTRIBUIES DO HTML5 NA MOTIVAO DOS PROGRAMADORES .... 61
CAPTULO V - CONSIDERAES FINAIS ............................................................. 74

5.1 RECOMENDAES .......................................................................................... 76
5.2 LIMITAES ...................................................................................................... 76
REFERNCIA BIBLIOGRFICA ............................................................................. 78
APNDICE A - QUESTIONRIO ............................................................................ 81
14
INTRODUO
O HTML5 (HyperText Markup Language - Linguagem de Marcao de

Hipertexto) tem apenas quatro anos de idade e traz consigo vrias discusses no
mundo da programao Web (sinnimo de WWW, que significa World Wide Web -
Rede de Alcance Mundial). A prpria forma como essa verso foi concebida j um
fato inusitado, pois o seu prprio pai Tim Berners-Lee, no acreditou no seu
potencial.
Em outras palavras, a W3C (World Wide Web Consortium - Consrcio da

Rede de Alcance Mundial, presidida por Lee) achava que o HTML 4.01 (verso
anterior ao HTML5) deveria ser vinculado ao XML (Extensible Markup Language -
Linguagem de Marcao Extensvel) para poder estruturar melhor as informaes,
construir arquivos vlidos, etc. Porm, um grupo de programadores, WHATWG
(Web Hypertext Application Technology Working Group - Grupo de Trabalho para
Aplicao Tecnolgica de Hipertexto na Web), no aceitou essa idia e iniciaram um
trabalho em paralelo desenvolvendo uma especificao que seria conhecida como
HTML5.
Em 2006, a W3C reconheceu ter sido otimista de mais na adoo do XML.

Depois desse conflito de egos, o grupo oficial de desenvolvimento do HTML (W3C)
resolveu adotar a verso da WHATWG como base para a nova verso da linguagem
HTML, iniciando um perodo curioso, j que a mesma especificao passou a ser
desenvolvida pelas duas entidades.
Dessa forma, em 2008, o HTML5 foi lanado oficialmente. Vale lembrar que
essa especificao no est concluda, tendo algumas pendncias que precisam ser
resolvidas, como por exemplo, algumas melhorias no que diz respeito execuo de
udios e vdeos. O trmino do HTML5 est previsto para 2014.
Mesmo no concluda, esta especificao j traz consigo pilares que a tornam

bastante diferente das verses anteriores. A possibilidade de tornar o
comportamento dos diversos navegadores (programas que possibilitam o usurio
acessar as pginas eletrnicas) interoperveis (funcionar da mesma forma,
independente do navegador) um desses fatores.
15
Em tempos passados, uma tecnologia era suportada num determinado

navegador, mas no em outro. Por exemplo, o suporte ao AJAX (Asynchronous
Javascript and XML) foi oferecido primeiramente pelo Internet Explore, s depois foi
adicionado em outros browsers (navegadores).
Outro pilar que merece destaque est voltado semntica das pginas Web,
ou seja, o uso do HTML5 contribui para um melhor entendimento sobre o significado
dos documentos eletrnicos, pois foram includas nessa especificao novas tags
que facilitam a identificao de cada parte do site e o sentido da informao
registrada. Ou seja, no HTML5 foram inclusas um conjunto de novas marcaes as
quais permitem aos programadores evidenciarem as informaes em um site.
Dessa forma, estando a informao melhor estruturada e descrita segundo o

seu real sentido, o HTML5 contribui para o que est sendo chamado de Web 3.0,
tambm conhecida como Web Semntica, cuja uma das metas a serem cumpridas
o resultado mais eficiente de um busca realizada pelo usurio.
Mais um aspecto tambm importante do HTML5 se relaciona com o fato de

tornar possvel a insero de vdeos e udios sem a utilizao de plugins (programa
utilizado para adicionar funes a outros programas ou sites), tornando os sites mais
interativos o que pode contribuir para uma navegao mais estimulante. Nesse
sentido a quinta verso da linguagem HTML permite que os desenvolvedores criem
animaes sem depender, por exemplo, do Flash (programa utilizado basicamente
para criar animaes que funcionam embutidas em um navegador).
Estes aspectos motivaram vrias empresas a desenvolverem verses de seus

sites em HTML5. O ex-CEO da Apple, Steve Jobs, contribui para que essa verso
ganhasse ainda mais popularidade quando afirmou que os gadgets (dispositivos) da
ma (Apple) no seriam compatveis com o Flash, sendo a execuo das mdias
responsveis pelo HTML5.
Conhecido mundialmente como modelo de site para compartilhamento de

apresentaes sobre temas das diversas reas do conhecimento, o SlideShare
substituiu o container de compartilhamento dos slides de Flash para o HTML5. A
utilizao do aplicativo da empresa Adobe era algo que impedia maiores
possibilidades de acessos.
16
Segundo o diretor de tecnologia Jon Boutelle, essa substituio causou uma

maior independncia tecnolgica, uma vez que qualquer tipo de dispositivo pode
reconhecer um contedo HTML sem a necessidade de instalao de plugins
adicionais.
Outra empresa que est utilizando o HTML5 a Google. A empresa de Larry

Page e Sergey Brin passou a utilizar a verso cinco do HTML com o intuito de
proporcionar maior velocidade no carregamento do Gmail. Ainda outras empresas
poderiam entrar na lista das que esto utilizando o HTML5, dentre elas esto a You
Tube e a Vmeo, ambas para compartilhamento de vdeos.
Ao passo que o HTML5 comea a ser difundido e utilizado no

desenvolvimento ou reformulao de sites j existentes, so poucos os livros ou
documentos que norteiam de forma eficaz os programadores.
1.1 OBJETIVO
1.1.1 Objetivo Geral
Mostrar algumas das novas contribuies do HTML5 no desenvolvimento de

sites e sua aceitao entre os programadores de pginas Web.
1.1.2 Objetivos Especficos
Demonstrar como o HTML5 contribui para uma Web mais semntica;
Evidenciar o HTML5 como nova possibilidade no desenvolvimento de

animaes
Analisar se as contribuies citadas motivam os programadores a utilizarem o

HTML5 no desenvolvimento de sites
1.2 ESTRUTURA DO TRABALHO
Esta monografia est estruturada da seguinte forma:
No Captulo 1 foram apresentados os aspectos introdutrios juntamente com

o objetivo geral e os especficos, sendo assim concludo este captulo.
17
O Captulo 2 contm uma reviso bibliogrfica sobre a origem da Internet,

marcada pelo militarismo estadunidense no perodo da Guerra Fria; o surgimento da
linguagem HTML com Tim Berners-Lee, perpassando pelas suas verses at chegar
ao HTML5 e suas contribuies.
O Captulo 3 apresenta os procedimentos metodolgicos para realizao da

pesquisa, sua classificao quanto ao tipo de pesquisa, roteiro da pesquisa, o
modelo geral, o universo e amostra, seleo dos casos, as variveis de
investigao, coleta e tratamento de dados e limitaes do mtodo.
A anlise dos dados coletados dos desenvolvedores de sites das empresas

escolhidas ser apresentada no Captulo 4.
O Captulo 5 apresenta as consideraes finais do trabalho
A bibliografia apresenta a relao de todas as obras referenciadas nesta

monografia, seguidas pelo Apndice.
18
CAPTULO II FUNDAMENTAO TERICA
Neste captulo apresenta-se a fundamentao terica que norteou a

construo desta monografia. Para isto, discutem-se os seguintes temas: HTML5,
desenvolvimento de animaes e Web semntica.
2.1 O ADVENTO DA INTERNET
Aps a Segunda Guerra Mundial (1939-1945) os Estados Unidos e a Unio

Sovitica eram os pases mais ricos do mundo. Tanto os EUA (Estados Unidos da
Amrica) quanto a URSS (Unio das Repblicas Socialistas Soviticas), tinham
ideias contrrias para a reconstruo do equilbrio mundial, iniciando assim uma
grande rivalidade entre as duas naes (SARAIVA, 2001).
Esse perodo ficou conhecido como Guerra Fria e foi marcada por conflitos de
ordem ideolgica, poltica, militar e tambm tecnolgica, tanto que a URSS
(comunista) mandou Yuri Gagrin ao espao, enquanto os EUA (capitalista)
enviaram Neil Armstrong Lua (JUNIOR, 2005).
Vale salientar que no existe um consenso sobre a data exata do incio da

Guerra Fria. Alguns estudiosos afirmam que o marco simblico foi a exploso
nuclear das cidades japonesas de Hiroshima e Nagasaki, em agosto de 1945.
Outros acreditam que seu incio foi em fevereiro de 1947 quando o ento presidente
dos EUA, Harry Truman, lanou a Doutrina Truman, que previa uma luta sem
trguas contra a expanso comunista no mundo (BARROS, 1985).
Tambm no existe consenso sobre quando terminou esse conflito. Parte dos
historiadores afirma que foi em novembro de 1989, com a queda do Muro de Berlim,
um dos grandes smbolos do perodo. J outros analistas dizem que o fim da Guerra
Fria foi em fevereiro de 1991, quando os EUA saram da Guerra do Golfo como a
maior superpotncia de uma nova Ordem Mundial (SANTOS, 2007).
Mesmo havendo controvrsias sobre o incio e o trmino da Guerra Fria, os

historiadores e analistas concordam que, diante de dois blocos ideolgicos e
politicamente antagnicos que exerciam enorme controle e influncia no mundo,
19
qualquer ferramenta nova, qualquer mecanismo ou inovao poderia contribuir

nessa disputa (SARAIVA, 2001).
Nessa perspectiva, o governo estadunidense temia um ataque da URSS sob

suas bases militares. Uma investida rival poderia trazer ao conhecimento pblico
informaes sigilosas, tornando os EUA vulnerveis. Assim, em 1960, perodo ureo
da Guerra Fria, foi idealizado um modelo de troca e compartilhamento de
informaes que permitia a descentralizao (ALVES, 2008).
Ou seja, com essa ideia os EUA conseguiriam manter a comunicao entre

suas bases militares, fazendo de cada base tambm um repositrio de informaes.
Assim o governo norte-americano teria vrias cpias dos seus dados espalhados
pelas bases militares por todo o pas caso o Pentgono, sede do Departamento de
Defesa e principal base de informaes do governo, fosse riscado do mapa por um
ataque do bloco comunista (CASTELLS, 2003).
Para que essa ideia de troca e compartilhamento de informaes pudesse ser

concretizada se fazia necessria a construo de toda uma estrutura. Dessa forma
havia a necessidade de criar uma rede - conjunto de computadores autnomos
interconectados por uma nica tecnologia. Dois computadores esto interconectados
quando podem trocar informaes, como pode ser observado na Figura 1
(TANENBAUM, 2003).
Figura 1: Dois computadores interconectados por um hub

Fonte: Ed Tittel (2002).
20
Assim a ARPA (Advanced Research Projects Agency Agncia de Projetos

de Pesquisa Avanada), pertencente ao departamento de defesa dos Estados
Unidos, criou, em 1969, uma rede chamada de ARPANet, possibilitando a
interligao entre as bases militares e os departamentos de pesquisa do governo
norte-americano. No incio eram apenas quatro computadores (LALLI, 2008).
A ARPANet tinha como protocolo regras que possibilitam uma conexo,

comunicao ou transferncia de dados entre computadores o NCP (Network
Control Protocol Protocolo de Controle de Rede), desenvolvido em dezembro de
1970 pela NWG (Network Working Group Grupo de Trabalho da Rede)
(CASTELLS, 2003).
A partir da dcada de 1970, a tenso entre os dois blocos econmicos passou

a se enfraquecer com a assinatura de acordos que estabeleciam a distenso da
corrida armamentista. Logo em seguida, o colapso da economia sovitica
determinou a realizao de mudanas na grande nao comunista. Ao fim da
dcada de 1980, a crise do comunismo sovitico e a queda do Muro de Berlim
demarcaram, para muitos, o fim da Guerra Fria (JUNIOR, 2005).
No havendo a iminncia de um ataque inimigo, o governo dos EUA permitiu

que pesquisadores da rea de defesa pudessem acessar a ARPANet de suas
respectivas universidades, contribuindo para o surgimento de diversos estudos
(ZACHARIAS, 2008).
A partir da a rede militar comeou a ganhar um grande e crescente nmero

de localidades universitrias o que contribuiu para a sua diviso em dois grupos: a
MILNET, para assuntos militares; e a nova ARPANet, para as localidades no
militares. O desenvolvimento da rede nesse ambiente mais livre pde ento
acontecer (ALVES, 2008).
Com essa abertura dada pelo governo norte-americano, as universidades,

junto com seus pesquisadores, tiveram acesso aos estudos j empreendidos sobre a
ARPANet e somaram esforos para aperfeio-la (MONTEIRO, 2001).
Vale ressaltar que por ter sido desenvolvida para ser usada apenas no orbe
militar, a ARPANet foi desenhada para ser a nica rede existente.
Consequentemente o seu protocolo, o NCP, no tinha a capacidade de comunicar
21
computadores da ARPANet com computadores de outras redes que surgiam no

meio acadmico em todo o pas (CASTELLS, 2003).
Dessa forma, uma nova verso do protocolo precisava ser desenvolvida para
interligar as novas redes. Foi nessa conjuntura de acontecimentos que, na dcada
de 1980, foi desenvolvido o conjunto de protocolos TCP/IP (Transmission Control
Protocol/Internet Protocol Protocolo de Controle de Transmisso/Protocolo de
Rede) (ALVES, 2008).
Tornando-se o protocolo padro de troca de informaes da ARPANet, o

TCP/IP possibilitou a conexo entre redes diferentes, aumentando bastante a
abrangncia da rede. A partir de 1990, a ARPANet comeou a se ligar com redes
fora dos EUA, passando a interconectar centros de pesquisa e universidades em
todo o mundo. Estava formada a Internet (conjunto de computadores interligados em
grande escala) propriamente dita, utilizada principalmente como ferramenta de troca
de informaes entre o meio acadmico (MONTEIRO, 2001).
Ainda com a labuta das universidades e diversos pesquisadores de torn-la

mais amigvel, a Internet constitua um ambiente difcil de ser utilizado por usurios
comuns, j que a sua interface somente-texto dificultava o entendimento (LALLI,
2008).
Por esse motivo, o cientista ingls Tim Berners-Lee, na dcada de 1990, criou
o HTML (HyperText Markup Language Linguagem de Marcao de Hipertexto),
nos laboratrios do CERN (European Organization for Nuclear Research - Conselho
Europeu para Pesquisa Nuclear), com o intuito de facilitar o compartilhamento de
informaes entre ele e outros membros dos diversos projetos de pesquisa em
andamento no CERN (ALMEIDA, 2002).
Inspirado no SGML (Standard Generalized Markup Language), padro de

formatao de textos; o HTML permitiu que os usurios atravs de um mouse e
um browser (navegador) desenvolvido para essa finalidade acessassem diversas
informaes de modo no-linear (atravs de mltiplos caminhos e destinos), indo de
um documento (foto, imagem ou som) a outro atravs de ligaes entre eles, mesmo
que estivessem em computadores remotos (ALVES, 2008).
22
O surgimento dos browsers serviu para facilitar o acesso dos usurios s

informaes, mas tambm para distinguir o que Internet de Web, como discutido
na subseo 2.1.1.
2.1.1 A Internet e a WWW (World Wide Web)
O primeiro navegador desenvolvido chamava-se World Wide Web (Rede de

Alcance Mundial) que se tornara sinnimo de Web. Unido com o servidor sistema
que fornece servios a uma rede - NeXTcube (empresa criada por Steve Jobs
quando ele foi demitido da Apple), Lee programou algumas pginas que descreviam
o prprio projeto de desenvolvimento e, em 6 de agosto de 1991, as publicou na
WWW marcando a estria da Web como um servio publicado na Internet
(CASTELLS, 2003).
importante que se faa a distino entre Internet e WWW (ou Web): esta
uma ferramenta mais amigvel para disseminar e acessar informaes baseada na
linguagem HTML, j aquela se refere ao conglomerado de redes em escala mundial
de milhes de computadores interligados por um conjunto de protocolos (BAX,
2000).
Isto , a WWW, ou apenas Web, o espao desenvolvido que permite a troca

de informaes multimdia sejam textuais, grficas, de udio ou de vdeo, criado por
Tim Berners-Lee, em 1991, atravs da estrutura montada que a Internet
(MONTEIRO, 2001).
At ento, a Web estava apenas disponvel nos computadores do CERN.

Observando que sua inveno, uma forma simples e eficiente de compartilhar
informaes e acessar diferentes tipos de dados entre computadores e redes
diversas, beneficiaria a muitos, Lee optou em deixar a WWW disponvel para as
universidades e demais pesquisadores (ALVES, 2008).
Isso desencadeou o surgimento de outros navegadores ao passar dos anos,

como por exemplo, o Viola (1992) e o Mosaic (1993), o qual causou um aumento
significativo da popularidade da Web entre os novos usurios. Assim a WWW se
tornava a plataforma multimdia e interativa que levou a Internet para fora dos meios
23
acadmicos e de pesquisa ganhando milhes de usurios espalhados por todo o

mundo (BUENO, 2008).
Empresas como Windows e Apple imediatamente adotaram a Web

desenvolvida por Lee em seus sistemas operacionais contribuindo ainda mais para o
grande crescimento da Internet que, na dcada de 1990, contabilizou um aumento
de 50% a cada ano em mdia (DIZARD, 2000).
De acordo com o instituto ISC (Internet Systems Consortium), em Janeiro de

1993 havia cerca de 1,3 milhes de dispositivos conectados na rede e este nmero
cresceu de ano em ano: 2,2 em 1994; 4,9 em 1995; 9,5 em 1996; 16,1 em 1997 e
assim por diante at chegar nos 542 milhes de hosts (dispositivo eletrnico) em
Janeiro de 2008, conforme demonstrado pela Figura 2.
Figura 2: Evoluo do nmero de computadores conectados INTERNET

Fonte: Bueno (2008).
No Brasil, apenas no final de 1994, a EMBRATEL (Empresa Brasileira de

Telecomunicaes), deu incio a um servio experimental a fim de conhecer e
melhorar a Internet. Em 1995, pela iniciativa do Ministrio das Telecomunicaes e
Ministrio da Cincia e Tecnologia, liberado ao setor privado o uso da Internet
para explorao comercial da populao brasileira (MARCONDES, 2005).
Mesmo com a intensa difuso da linguagem de Tim Berners-Lee pelo mundo,

o HTML sofreu e sofre mudanas em sua estrutura que a tornam cada vez mais
passveis de corresponder s necessidades dos programadores e usurios, como
verificados na seo 2.2.
24
2.2 A ESTRUTURA DA WEB
Na inveno de Tim Berners-Lee, a forma de organizar e acessar as

informaes so feita atravs do hipertexto, operacionalizado atravs da linguagem
de programao HTML. Na Web, cada documento (texto, imagem ou som) pode
conter vnculos (links) que levem a outros documentos, que por sua vez conduzam a
outros, e assim por diante (ALVES, 2008).
Sendo a Web uma estrutura hipertextual, o usurio fica livre para traar o seu
caminho de acordo com seus interesses, navegando atravs dos documentos
interligados sem ter o compromisso de seguir uma ordem comeo, meio e fim
preestabelecida, facilitando e motivando a navegao (MONTEIRO, 2001).
A primeira referncia estrutura hipertextual foi feita pelo matemtico e fsico

americano Vannevar Bush, em 1945, atravs de um artigo intitulado As we may
think. Ele questionava a artificialidade dos mtodos de organizao da informao
utilizados na comunidade cientfica, baseados em uma ordem puramente hierrquica
(BARANAUSKAS, 2003).
Segundo Bush (1945), deveria ser buscado um mtodo inspirado na maneira

como a mente humana funciona, ou seja, atravs de associaes, pulando de uma
informao a outra atravs de referncias no-lineares.
Assim, Bush, em 1945, idealizou um aparelho chamado Memex (Memory

Extension Extenso da Memria), que continha uma enorme quantidade de
documentos multimdia (texto, imagens e sons) que permitia ao usurio fazer
conexes entre eles, medida que os utilizasse. Assim, cada vez que um
documento fosse acessado, estariam tambm disponveis todos os outros que
tivessem sido ligados a ele (BARANAUSKAS, 2003).
O artigo de Bush foi uma revelao no mundo cientfico da poca, evocando

uma aplicao da eletrnica nunca antes imaginada e inspirando os cientistas que,
dcadas depois, desenvolveriam os computadores pessoais e a Web (ROCHA,
2003).
Embora tenha sido antevisto por Vannevar Bush em 1945, o termo hipertexto
s foi cunhado em 1963, pelo americano Ted Nelson, para se referir consulta de
documentos de forma no-linear em um sistema informatizado (MONTEIRO, 2001).
25
Nelson, em 1963, imaginou um grande sistema de informao que pudesse

armazenar todos os documentos disponveis, servindo tambm para produo de
novos documentos e comentrios sobre os j existentes. No haveria redundncias
e nada seria apagado. Os dados poderiam ser acessados de forma no-linear
atravs de links duplos (ida e volta), sempre atualizados (MONTEIRO, 2001).
Cada usurio faria sua prpria rota de navegao, dependendo da escolha

dos links a serem consultados. Tambm no haveria problemas de direitos autorais,
j que todas as citaes seriam feitas remetendo-se diretamente ao original,
envolvendo, caso necessrio, o pagamento de royalties estipndio feito ao
detentor ou proprietrio de um produto, marca etc. aos autores (ROCHA, 2003).
A forma como o usurio trafega na Web sofreu e ainda sofre mudanas

devido as mudanas que a linguagem HTML sofre atravs de suas verses, como
discutido na seo 2.3.
2.3 HTML E SUAS VERSES
O HTML uma linguagem de marcao (utilizada para codificar elementos)

inicialmente concebida como uma soluo para a publicao de documentos
cientficos, que ganhou popularidade e se tornou padro para a Internet (BAX,
2000).
Na poca a linguagem era apenas uma coleo de instrues para resolver

dois problemas de Tim Berners-Lee: a comunicao e a disseminao de pesquisas
entre ele e seus colegas. Sua soluo, combinada com a ento emergente Internet
ganhou ateno mundial (CASTELLS, 2003).
Com o passar dos anos, recursos foram adicionados permitindo um cdigo

mais preciso, fazendo do HTML uma linguagem para publicao de contedo (texto,
imagem, vdeo, udio etc.) na Web que se prope a ser entendida universalmente
por diversos meios de acesso, distribuindo a informao de uma maneira global
(ALMEIDA, 2002).
Essa ideia perdura desde a criao do HTML, quando Lee a props para ser
uma linguagem independente de plataformas, browsers e outros meios de acesso.
26
Com a implantao deste conceito de universalidade, evitou-se que a Web fosse

desenvolvida em uma base proprietria, com formatos incompatveis e limitada
(SMITH, 2011).
Por tais motivos o HTML tornou-se um padro para o desenvolvimento de

ambientes a serem utilizados na WWW, dando a possibilidade para a reutilizao da
informao de acordo com as limitaes de cada meio de acesso (MONTEIRO,
2001).
Na tentativa de torn-la mais acessvel e de fcil compreenso para os

programadores, o HTML vem ganhando novas tags capazes de incluir elementos
que possibilitam o desenvolvimento de sites mais interativos, como observado na
seo 2.4.
2.4 PRIMEIRAS ESPECIFICAES
Abordar as verses da linguagem HTML se faz necessrio basicamente para

fins de registro cronolgico, j que algumas das verses so praticamente
transcries de verses anteriores. Desta forma ser dada, neste trabalho, nfase
s datas de publicao de cada verso da linguagem.
A primeira verso do HTML tornou-se pblica em 1991 e chamava-se

originalmente de HTML Tags (rtulos usados para informar ao navegador como
deve ser apresentado o contedo). Foi utilizada por Lee para resolver seus
problemas dentro do CERN (European Organization for Nuclear Research
Organizao Europia para a Pesquisa Nuclear) (LALLI, 2008).
Essa primeira verso foi baseada na linguagem SGML, a qual era utilizada
para a estruturao de documentos e foi dela que o HTML herdou diversas tags
como: ttulo <h1> ao <h6>, cabealho <head> e pargrafo <p>. A principal diferena
entre essas duas linguagens de marcao que o HTML implementava a tag <a>
com o atributo href, permitindo assim a ligao (links) de uma pgina a outra. Esse
conceito de interligao entre documentos, como j discutido, a base do
funcionamento da Web (BAX, 2000).
27
Aps o trmino dos rascunhos do HTML Tags em 1994, o seu sucessor, o

HTML 2, foi apresentado na primeira conferncia mundial sobre Web, a World Wide
Web Conference, em 1995. O HTML 2.0 pode ser visto apenas como uma correo
da primeira verso, ou seja, apenas formalizava as caractersticas da linguagem que
j estava em uso. Vale destacar que o HTML 1.0 nunca existiu, a especificao 2.0
foi destinada a distinguir a nova edio de projetos anteriores (LALLI, 2008).
Em 1993 foi lanado o HTML+ e em 1995, o HTML 3.0. Essas duas verses
foram tentativas frustradas de melhorar a linguagem. A verso seguinte do HTML a
ser lanada foi a 3.2, em 1997, a qual adicionou caractersticas linguagem como a
utilizao de Applets (software aplicativo que executado dentro de outro programa)
e o uso de tabelas (ROGRIO, 2011).
Daqui por diante, um novo rgo foi criado para acompanhar a ajudar no
desenvolvimento da linguagem de Lee e lev-la ao seu potencial mximo, como
discutido na seo 2.5.
2.5 WORLD WIDE WEB CONSORTIUM
O HTML 3.2 foi desenvolvido pela W3C (World Wide Web Consortium
Consrcio da Rede de Alcance Mundial), a qual foi criada por Tim Berners-Lee em
agosto de 1994, com o intuito de levar a Web ao seu potencial mximo, por meio do
desenvolvimento de protocolos e fruns de discusso que promovam a sua evoluo
e assegurem a sua interoperabilidade, ou seja, a capacidade de funcionar
corretamente em qualquer sistema ou plataforma (FERREIRA, 2010).
Com mais de 300 membros que agregam empresas, rgos governamentais

e organizaes independentes, a W3C visa desenvolver padres para a criao e a
interpretao de contedos para a WWW atravs de comits que estudam as
tecnologias existentes para a apresentao de contedos na Internet e criam
padres de recomendao para utilizar essas tecnologias (EIS, 2010).
Ainda em 1997, ano do desenvolvimento da verso 3.2, no ms de dezembro,

a W3C publica o HTML 4.0, contudo essa nova verso no trazia diferencial real
para a semntica do cdigo, mas foi uma tentativa de eliminar tags em desuso. Dois
28
anos depois, em 1999, foi lanado o HTML 4.1, o qual era basicamente uma
correo da verso anterior (ROGRIO, 2011).
Para exemplificar a utilizao da linguagem HTML, pode-se observar o cdigo

da Figura 3 que demonstra uma frase no navegador (browser):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title> Universidade Estadual da Paraba </title>
</head>
<body>
<h1> Trabalho de Concluso de Curso </h1>
</body>
</html>
Figura 3: Cdigo HTML 4.01 com ttulo entre as tags <h1> </h1>
Fonte: Pesquisador do estudo (2011)
O cdigo da Figura 3 constitudo por tags (em azul), cada qual possui uma
funo especfica: a tag <html> serve para delimitar todo o cdigo HTML, <head>
delimita o cabealho onde est o ttulo <title> da pgina eletrnica (site), <body> define
onde ser feito todo o desenvolvimento do site e <h1> rotula o ttulo.
Existem softwares para desenvolver sites em HTML, como o Dreamweaver e

o Notepad++, proprietrio e livre respectivamente. Porm, esse cdigo foi
desenvolvido no Bloco de Notas do Sistema Operacional Windows e salvo como
nome_qualquer.html.
Ao clicar no arquivo gerado com a extenso (nome precedido de ponto) citada

anteriormente, o navegador ser aberto com as seguintes caractersticas:
29
Figura 4: Execuo do cdigo da Figura 3 no navegador Mozilla Firefox

Fonte: Pesquisador do estudo (2011).
Faz-se necessrio enfatizar que o desenvolvimento realizado at agora

localhost, ou seja, sem pretenses de public-lo na Internet. Caso o objetivo seja
criar uma pgina eletrnica (site) deve ser percorrido todo um processo: desde a
aquisio de um domnio (nome do site) at a contratao de uma empresa de
hospedagem, que guardar os arquivos do site desenvolvido.
Com o passar dos anos recursos tm sido adicionados ao HTML para que ele
possa atender s expectativas de usurios e sistemas computacionais, aumentando
a sua complexidade. Estima-se, por exemplo, que essa ltima verso da linguagem,
a 4.1, possua aproximadamente cem diferentes tags. Por isso muitas pginas
contm mais tags do que contedo (FERREIRA, 2010).
Na tentativa de simplificar o cdigo, imaginou-se que a adoo do XML

poderia ser uma boa sada, como pode ser observado na seo 2.6.
2.6 EXTENDED MARKUP LANGUAGE
As marcaes (tags) fixas e pr-projetadas do HTML comearam, ainda na

dcada de 1990, a incomodar muitas organizaes e empresas. Elas perceberam
que a linguagem era limitada pela falta de flexibilidade no tocante s suas
possibilidades em promover a troca mais efetiva de informaes pela Web
(ALMEIDA, 2002).
30
Assim a W3C procurou uma alternativa que possibilitasse um melhor

aproveitamento da massa de informaes disponvel na Internet, transformando-a
em algo mais gerencivel e til (ALVES, 2008).
Algumas das propostas estudadas para resolver essa necessidade

contemplaram a utilizao da linguagem XML (Extended Markup Language
Linguagem de Marcao Extensvel), que, como o HTML, tambm surge a partir do
SGML. Porm, um fator o divisor de guas entre as duas linguagens: o XML no
prope um nmero fixo de tags (BAX, 2000).
Um elemento XML pode ser marcado da forma que o autor (desenvolvedor)

ache conveniente, ou seja, com um termo que melhor descreva a informao de
acordo com a sua vontade. Por exemplo, um preo poderia ser representado pela
tag <preco>, um nmero de telefone por <numtelefone> e assim por diante, ficando
a cargo do autor do documento determinar que tipo de dado usar e quais marcas os
representam melhor (ALMEIDA 2002).
Segundo Monteiro (2001) essa caracterstica confere linguagem XML

habilidades semnticas, que possibilitam melhorias significativas em processos de
recuperao e disseminao da informao. As possibilidades e os benefcios reais
em processos de recuperao da informao no so tratados neste trabalho.
Assim, em janeiro de 2000 foi publicada, pela W3C, o XHTML 1.0, o qual era
uma reformulao do HTML 4.1 em XML. Combina as tags HTML com as regras
XML, contribuindo para a visualizao de pginas Web em dispositivos como
palmtop (computador em dimenses reduzidas) e celulares (BAX, 2000).
Na Figura 5 apresentado um trecho de cdigo XML como forma de

exemplific-lo para um melhor entendimento. O exemplo corresponde a uma venda
de um DVD numa loja de artigos miditicos:
<ordem>
<vendidopara>
<pessoa>
<nome> Daniel </nome>
</pessoa>
</vendidopara>
<item>
<preco> 45,30 </preco>
<dvd>
31
<titulo> Flamengo Hexa </titulo>

<autor> Zico </autor>
</dvd>
</item>
</ordem>
Figura 5: Cdigo XML para venda de produto
Como pode ser observado no cdigo da Figura 5, ele formado por tags com
nomes que facilitam o entendimento do desenvolvedor e tambm do usurio final.
Essa flexibilidade em termos de representao da informao estimulou alguns
pesquisadores da W3C a afirmarem que o XML substituiria o HTML (ALMEIDA,
2002).
Como pode ser observado na seo 2.7, um grupo de pesquisadores mantm

fidelidade linguagem HTML e contribuem para o desenvolvimento de uma nova
verso da linguagem de Tim Berners-Lee.
2.7 WEB HIPERTEXT APPLICATION TECHNOLOGY WORKING GROUP
medida que os programadores da W3C empenhavam-se no

desenvolvimento de outras verses do XHTML, membros das empresas Apple,
Mozilla e Opera, fundaram, em 2004, o WHATWG (WebHipertext Application
Technology Working Group Grupo de Trabalho para Aplicao Tecnolgica de
Hipertexto na Web) (CARDOSO, 2010).
Este grupo estava interessado no desenvolvimento da linguagem HTML e as

tecnologias ligadas a ela. O seu objetivo era acelerar o lento avano dos padres
Web. Os membros da empresas participantes do WHATWG no estavam satisfeitos
com o rumo dado ao HTML atravs da linguagem XML (MARCHI, 2009).
Ento eles comearam a escrever o que seria a mais nova verso, e ainda
em fase de desenvolvimento, da linguagem criada por Tim Berners-Lee: o HTML5.
Por volta de 2006, o trabalho do WHATWG passou a ser conhecido pelo mundo e
principalmente pela W3C que at ento trabalhava separadamente a qual
reconheceu todo o trabalho do grupo (SOUZA, 2010).
32
Em outubro de 2006, Lee anunciou que trabalharia juntamente com o

WHATWG na produo do HTML5. Contudo o XHTML continuaria sendo mantido
paralelamente de acordo com as mudanas causadas no HTML (CARDOSO, 2010).
Marcado por novidades e contribuies, a nova verso da linguagem HTML

chega com recursos capazes de tornar os sites mais interativos e com uma melhor
identificao da informao, como observado na seo 2.8.
2.8 A LTIMA VERSO: O HTML5
At ento, as verses do HTML praticamente no davam suporte para a

exibio de recursos grficos e miditicos. Considerando a realidade em que as
especificaes foram publicadas, basicamente na dcada de 1990, as preocupaes
com este tipo de contedo eram mnimas, at porque a infra-estrutura da Web e a
capacidade dos meios de acesso na poca no contribuam para o desenvolvimento
de aplicaes que utilizassem esses recursos (ANDRADE, 2009).
Mas ao longo da ltima dcada essas limitaes foram superadas,

possibilitando que estes elementos fossem utilizados com mais freqncia,
viabilizando o desenvolvimento de aplicaes que melhorassem a experincia e
interatividade do usurio com a WWW. Como no havia uma especificao sobre
sua utilizao, os elementos grficos e multimdias foram implementados atravs de
ferramentas adicionais como os plugins e extenses (MARCHI, 2009).
Tais ferramentas funcionam paralelamente a execuo do navegador, e no

h nenhuma recomendao ou especificao sobre o seu uso. Consequentemente,
um documento HTML contendo estes recursos acabam poludos por instrues que
no seguem um padro determinado ou que no contribuem semanticamente para
sua estrutura (SOUZA, 2010).
O HTML5, lanado em 2008, est propondo novos elementos que possibilitem

a incluso destes contedos atravs de tags especficas para cada espcie de
contedo. Dentre esses elementos existem a tag <video>, que vem propondo a
incluso, em larga escala, de streaming (forma de distribuir informao multimdia)
33
de vdeos nos sites. A partir deste elemento possvel exibir um vdeo em um

documento HTML (FERREIRA, 2010).
Outro elemento proposto refere-se execuo de udios. Com

funcionamento semelhante tag <video>, a tag <audio> torna possvel a insero
de udios atravs de uma sintaxe acessvel (EIS, 2010).
Sero expostos nas Figuras 6 e 8 os cdigos HTML5 que possibilitam os sites

a utilizarem udios e vdeos, respectivamente, sem a necessidade de plugins:
<!DOCTYPE HTML>
<html lang = pt-br >
<head>
<meta charset = "UTF-8">
</head>
<body>
<audio src = "audio.mp3" autoplay controls > </audio>
</body>
</html>
Figura 6: Cdigo HTML5 para inserir udio
Quando executado pelo navegador, o cdigo acima gera o seguinte player

que executar o udio:
Figura 7: Cdigo executado no browser Google Chrome

O cdigo da Figura 8 permite a insero de vdeos em pginas HTML5:

34
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset = utf-8" />
</head>
<body>
<video controls>
<source src = "video.m4v" type = "video/mp4" /> 
<source src ="video.ogg" type = "video/ogg" /> 
</video>
</body>
</html>
Figura 8: Cdigo HTML5 para visualizar vdeo nos navegadores Safari e Firefox
O cdigo da Figura 8 resulta no vdeo representado pela Figura 9:
Figura 9: Vdeo executado no browser Mozilla Firefox

O desenvolvimento desses elementos miditicos no HTML5 motivaram, em

abril de 2010, um fervoroso debate no s em volta do HTML5, mas tambm do
Flash (software desenvolvido pela empresa norte-americana Adobe Systems, que
permite desenvolver animaes e executar vdeo e udio). Isso porque o ex-CEO da
Apple, Steve Jobs, emitiu uma carta intitulada Reflexes sobre o Adobe Flash,
concluindo que o desenvolvimento do HTML5 tornaria o Flash no mais necessrio,
tanto para assistir vdeos ou mesmo exibir qualquer contedo Web (CAMPI, 2011).
Falhas de segurana, travamento de algumas mquinas Mac, baixo

desempenho em dispositivos mveis, alto consumo de bateria so outros problemas
35
apontados pelo CEO que desestimularam a Apple a utilizar o dispositivo da Adobe

(BRAGA, 2011).
Vale ressaltar que no est no permetro deste trabalho realizar comparaes

entre contedos multimdia desenvolvidos pelo HTML5 e oferecidos pelo Flash: h
pesquisadores e desenvolvedores que defendem os dois lados.
Pelas novidades, facilidades e tambm a necessidade de conquistar ou no

perder os usurios e proprietrios de equipamentos Apple, vrios sites
disponibilizaram verses sob esse novo padro. Por exemplo, a You Tube lanou
uma verso experimental do seu site no incio de 2010, intitulado TestTube, para
reproduzir vdeos sem a utilizao do Flash (ANDRADE, 2009).
No passado, para que uma nova verso do HTML fosse lanada, todas as
ideias listadas na especificao deveriam ser testadas e desenvolvidas para ento
serem publicadas. S depois de todo esse processo que o novo padro poderia
ser utilizado pelos browsers e programadores. Tal mtodo chegou ao fim com o
lanamento do HTML5 (EIS, 2010).
Esse novo padro marcado pelo desenvolvimento modular, ou seja, a

linguagem foi fragmentada e grupos foram criados para se responsabilizarem por
uma propriedade especfica. Cada grupo independente e pode lanar suas
novidades a qualquer momento. Isso quer dizer que a comunidade de
desenvolvedores e os fabricantes de browsers no precisam esperar que todo o
padro seja escrito e publicado para utilizarem as novidades da linguagem
(FERREIRA, 2010).
O ponto negativo desse formato de desenvolvimento que os problemas de

compatibilidade podem ocorrer com mais freqncia. Por exemplo, um browser pode
escolher suportar uma API (Application Programming Interface - Interface de
Programao de Aplicativos) conjunto de regras para d suporte a uma aplicao
diferente da API que o concorrente implementou. Contudo os browsers tm
mostrado grande interesse em se manterem atualizados em relao aos seus
concorrentes (MARCHI, 2009).
Mesmo com a tentativa dos navegadores manterem-se atualizados sobre os

concorrentes, existem formas para lidar com a possvel falta de compatibilidade,
como observado na subseo 2.8.1.
36
2.8.1 Compatibilidade com o HTML5
Atualmente h inmeros tipos de dispositivos que acessam a Internet. So

tablets, smartphones, pc's etc. Cada um utilizando um determinado browser para
navegar na Web. Dessa forma, quase impossvel que os desenvolvedores
consigam manter um bom nvel de compatibilidade com todos estes browsers
levando em considerao a particularidade de cada um (ANDRADE, 2009).
Uma maneira mais segura de manter o cdigo compatvel nivelar o

desenvolvimento pelos motores de renderizao (software que transforma contedo
HTML e de formatao CSS em contedo formatado para ser exibido em uma
tela). Cada browser utiliza um motor de renderizao que responsvel pelo
processamento do cdigo da pgina (SOUZA, 2010).
Na Figura 10, segue uma lista dos principais browsers e seus motores:
Motor Browser
Webkit Safari, Google Chrome
Gecko Firefox, Mozilla, Camino
Trident Internet Explorer 4 ao 9
Presto Opera 7 ao 10
Figura 10: Motores de renderizao
Fonte: FERREIRA, 2010.
Focando a compatibilidade nos motores de renderizao o desenvolvedor

atingir uma amplitude maior de browsers. Por exemplo, se o cdigo desenvolvido
funcionar no Webkit, ser alcanado o Safari e o Chrome, dois dos principais
browsers do mercado para desktops. Alm disso, o desenvolvedor tambm alcana
aparelhos como Blackberry, iPhone, iPod Touch, iPad e dispositivos que rodam
Android (sistema operacional mvel desenvolvido pela Google) (CARDOSO, 2010).
Atualmente o Webkit o motor mais compatvel com os padres do HTML5.

Como a Apple tem interesse que seus dispositivos sejam ultracompatveis com os
padres, ela tem feito um grande trabalho de atualizao e avano da
compatibilidade deste motor. Contudo o Firefox e o Opera j esto compatveis com
grande parte da especificao do HTML5 e a cada verso eles trazem mais
novidades e atualizaes dos padres (FERREIRA, 2010).
37
Pode ser que o usurio no utilize um browser que suporta HTML5. Neste
caso, o desenvolvedor pode redirecion-lo para uma verso do site mais simples, ou
talvez apenas mostrar uma mensagem alertando o usurio sobre a importncia da
atualizao do browser. Para isso existem algumas tcnicas de deteco para
conferir se o browser suporta ou no HTML5 (EIS, 2010).
Quando o browser visita um site, ele constri uma coleo de objetos que
representam elementos HTML na pgina. Cada elemento no cdigo representado
no DOM (Document Object Model - Modelo de Objetos de Documentos) so
especificaes que permitem que qualquer elemento HTML possa ser criado,
acessado, modificado, substitudo ou apagado como um objeto diferente
(FERREIRA, 2010).
Todo objeto DOM tem propriedades em comum, mas alguns objetos tm
caractersticas especficas. Sero utilizados estes objetos para que possa ser feita a
deteco. Na seqncia so apresentados quatro meios que podem ser utilizados
para detectar o suporte do browser (SOUZA, 2010):
1. Verificar se uma determinada propriedade existe em objetos globais como

WINDOW ou NAVIGATOR. Nesse caso, verifica-se o suporte a
geolocalizao;
2. Criar um elemento e verificar se uma determinada propriedade existe neste
elemento;
3. Criar um elemento e verificar se um determinado mtodo existe neste
elemento, ento chama-se o mtodo e se verifica se o valor retornado. Por
exemplo, pode-se testar quais formatos de vdeo so suportados;
4. Criar um elemento e definir um atributo com um determinado valor, ento se
verifica se o atributo suporta este valor. Por exemplo, criar um input e verificar
quais types sero suportados.
At agora apenas foram demonstradas duas novas funcionalidades

disponveis na nova verso da linguagem de Lee, porm o foco do nosso trabalho
consiste em demonstrar que o HTML5 torna-se uma nova possibilidade para o
desenvolvimento de animaes e contribui para uma Web mais semntica, como
pode ser observado na seo 2.9.
38
2.9 ANIMAO A PARTIR DA TAG CANVAS
Novo e poderoso elemento entre as inmeras novas funcionalidades do

HTML 5, o canvas permite criar grficos, composies de fotos e animaes usando
JavaScript - linguagem que permite a insero de efeitos , ou seja, permitido que
se possa desenhar na tela do navegador (EIS, 2010).
O nico elemento HTML existente para isso o <canvas>, o resto todo feito
via JavaScript. De acordo com a Figura 11, pode-se observar como inserir esse
elemento numa pgina eletrnica.
<canvas id = "meudesenho" width = "300" height = "500"> </canvas>

Figura 11: Criando o elemento canvas
O cdigo da Figura 11 gera um retngulo com dimenses de 300px de largura

por 500px de altura, vazio. nesse retngulo que ser criada a animao. Porm,
para iniciar o desenvolvimento necessrio, primeiramente, obter o seu contexto a
partir da funo getcontext como na Figura 12:
context = document.getElementById('areaDesenho').getcontext('2d')
Figura 12: Obtendo o contexto
Vale ressaltar que no existe um contexto 3D padronizado pela W3C. As

implementaes em trs dimenses existentes so criadas e mantidas pelas
empresas de desenvolvimento dos navegadores (ANDRADE, 2009).
Depois de criar o contexto, pode-se ento iniciar a implementao da

animao ou imagem. Ser exposto um cdigo atravs da Figura 13 que
possibilitar a uma bola entrar em movimento na forma de saltos. A explicao do
cdigo no ser levado em considerao.
<!DOCTYPE html>
<html>
<head>
<title> Universidade Estadual da Paraba - Animao em HTML5 com JavaScript </title>
<style>
body, canvas {
39
margin: 0;
display: block;
}
</style>
</head>
<body background = "gol.jpg">

<canvas />
<script>
var x = 150, y = 150;
var context = document
.querySelector('canvas')
.getcontext("2d");
var ballCanvasContext;
var WIDTH, HEIGHT;

var ballImg;
var halfBallSize = 90;

var running;
function drawBall(x, y) {
rotateDirection = (dx > 0 ? 1 : -1)
ballCanvasContext.rotate(Math.PI / 180 * 3 * rotateDirection);
ballCanvasContext.drawImage(
ballImg, 0, 0,
ballImg.width,
ballImg.height,
-halfBallSize, -halfBallSize,
halfBallSize * 2, halfBallSize * 2
);
context.fillStyle = 'rgb(255,255,255)';
/*context.fillRect(0, 0,
context.canvas.width,
context.canvas.height
);*/
context.drawImage(ballCanvasContext.canvas, x,
);
}
function init() {
ballImg = document.createElement('img');
ballImg.src = 'bola.png';
ballImg.onload = function () {
var ballCanvas = document.createElement('canvas');
ballCanvas.style.display = 'none';
document.body.appendChild(ballCanvas);
ballCanvas.height = halfBallSize * 2;
ballCanvas.width = halfBallSize * 2;
ballCanvasContext = ballCanvas.getcontext('2d');
ballCanvasContext.translate(halfBallSize, halfBallSize);
WIDTH = context.canvas.width = window.innerWidth;
HEIGHT = context.canvas.height = window.innerHeight;
40
clearInterval(running);
running = setInterval(draw, 13);
}
}
var dx = 2;
var dy = 4;
function draw() {
drawBall(x, y);
if (x + dx > (WIDTH - (halfBallSize * 2)) || x + dx < 0)

dx = -dx;
if (y + dy > (HEIGHT - (halfBallSize * 2)) || y + dy < 0)
dy = -dy;
dy += 0.3;
x += dx;
y += dy;
}
init();
</script>
</body>
</html>
Figura 13: Cdigo JavaScript inserido em cdigo HTML5 para criar animao
A seguir esto em destaque as Figuras 14 a 22 que representam a

movimentao da bola durante a execuo do cdigo. A bola jogada de uma
determinada altura e vai saltando de um lado a outro do navegador. A altura do salto
vai diminuindo com o passar do tempo at a bola ser totalmente oculta como
demonstra a Figura 22.
41
Figura 14: Inicia-se com a bola em queda livre

Figura 15: A bola continua pulando

42
Figura 16: A bola bate na "parede" e volta

Figura 17: A bola faz a trajetria no sentido contrrio "batendo na parede"

43
Figura 18: A bola continua pulando, porm a altura diminui

Figura 19: A bola numa altura menor e pulando no sentido contrrio

44
Figura 20: A bola j no pula e comea a desaparecer

Figura 21: A bola desaparece parcialmente

45
Figura 22: A bola desaparece totalmente

Como pde ser observado nas Figuras 14 a 22, a animao foi executada
sem a necessidade de plugins adicionais, apenas utilizando cdigos JavaScript e
tags HTML5.
Na seo 2.10, discute-se uma contribuio do HTML5 bastante relevante no

mundo da programao Web: a melhor estruturao e identificao da informao
para ajudar no funcionamento da Web 3.0.
46
2.10 WEB SEMNTICA
At meados de 2003 a WWW se caracterizava por disponibilizar informaes

em formato textual (apostilas eletrnicas), onde os usurios eram apenas
consumidores destas informaes. Foi a poca dos grandes portais como o Terra,
UOL, IG, BOL etc. Era a poca da publicao de alguns para todos, cujo perodo
ficou conhecido como Web 1.0 (TREIN, 2009).
Em 2004, Tim OReilly, durante uma conferncia da OReilly Media

(companhia que publica livros e sites e organiza conferncias sobre temas de
informtica), utilizou o termo Web 2.0 pela primeira vez para falar sobre a exploso
da Web, que se caracterizaria pelo conceito de troca de informaes e colaborao
dos internautas com sites e servios virtuais (SCHLEMMER, 2009).
A Web 2.0, marcada pela construo coletiva do conhecimento, possibilita

que os usurios gerem contedos, criem comunidades, compartilhem experincias
etc. Essa a verso atual da Web, exemplificada nas redes sociais como Facebook,
Twitter, Orkut e canais de compartilhamento como Youtube e Fotolog (BLETTMANN,
2007).
Tambm conhecida como Web Sinttica por Breitman (2005), a Web atual
(Web 2.0) concentra uma enorme quantidade de informaes tornando necessrio o
desenvolvimento de ferramentas que retornem resultados precisos em meio a
milhes de informaes irrelevantes (PICKLER, 2007).
Motores de busca como o Google, Yahoo, Alta Vista, dentre outros, foram
desenvolvidos, porm apresentam limitaes quanto eficincia e eficcia da
recuperao da informao, pois a busca baseada em palavras-chave contidas
nos textos, o que muito pouco eficaz (ALVARENGA, 2004).
Outro aspecto no menos importante o fato de que as tecnologias e

linguagens utilizadas para desenvolver os sites priorizam os aspectos de exibio e
formatao do contedo, ao passo que o mesmo contedo seja pobremente descrito
impossibilitando que as mquinas conheam o contexto e o sentido em que a
informao foi descrita (SOUZA, 2004).
47
Dessa forma, ao se realizar uma busca na atual Web (Web Sinttica),

inmeros sites sero indexados, porm caber ao ser humano a rdua tarefa de
avaliar, classificar e selecionar as informaes que realmente so de interesse
(BREITMAN, 2005).
Assim, apesar da grande quantidade de informaes na Web e dos

mecanismos disponveis para busc-las, o usurio muitas vezes fica frustrado com
os resultados insatisfatrios que lhe so retornados (PICKLER, 2007).
Contrapondo as ideias frustrantes da Web Sinttica, Tim Berners-Lee props

em 2001 a chamada Web Semntica, tambm chamada de Web 3.0, que visa
melhorar a satisfao do usurio no momento da busca, retornando-lhe as
informaes adequadas s suas necessidades (BERNERS-LEE, 2001).
Para fazer com que os motores de busca retornem resultados relevantes para
o usurio, necessrio representar formalmente as informaes armazenadas na
Internet. Nesse contexto, Hendler (2001) afirma que a Web ser capaz de
representar as relaes semnticas das informaes de maneira que haja
compreenso por pessoas e mquinas (agentes computacionais).
Dessa forma, o papel das mquinas na Web Semntica, vai alm da funo
de retornar um resultado relevante numa busca, mas tambm deve dar apoio s
tarefas do usurio integrando informaes de fontes diferentes. Para que isso se
torne possvel, necessrio embutir semntica na estrutura dos documentos
disponveis na Web (BREITMAN, 2005).
Um exemplo das possibilidades desta abordagem seria o agendamento de

uma consulta mdica. O usurio (paciente) configuraria seu agente computacional
(software que coleta informao na Web, processa a informao e compartilha o
resultado com outros programas) definindo a especialidade do mdico, horrios
disponveis para ir consulta e as localidades preferidas. Ento o agente
computacional do paciente entraria em acordo com os agentes dos mdicos,
agendando a consulta de acordo com os critrios preestabelecidos (NETO, 2009).
Vale salientar que a Web Semntica no uma nova Web ou uma Web
separada. Segundo Berners-Lee (2001), a Web Semntica uma extenso da atual
Web, em que a informao dada com um significado bem definido, permitindo
melhor interao entre os computadores e as pessoas.
48
Sendo assim, percebe-se que, se a inteno inicial da Web Semntica

justamente acrescentar semntica ao contedo Web, essa semntica servir para
determinar o sentido de um termo no contexto de determinado documento
(LASSILA, 2001).
Enquanto a Web Sinttica foi desenvolvida para ser entendida apenas pelos
usurios humanos, a Web Semntica est sendo projetada para ser compreendida
tambm pelas mquinas, na forma de agentes computacionais que sero capazes
de operar eficientemente sobre a informao, auxiliando os usurios em suas
diversas atividades na Web (ROBERTO, 2006).
Nesse contexto, pode-se perceber que a Web Semntica visa facilitar e

melhorar a recuperao de informao relevante, j que a prpria mquina, dotada
de ferramentas inteligentes, funcionaria por associao e deduo automtica para
identificar o contedo de um site antes de traz-lo ao usurio como resultado de
uma pesquisa (BERNERS-LEE, 2001).
Souza e Alvarenga (2004) observam que, para atingir os propsitos da Web

Semntica, necessria uma padronizao de tecnologias e linguagens descritivas,
de forma que todos os usurios da Web obedeam a regras comuns e
compartilhadas sobre como armazenar dados e descrever a informao
armazenada, para essa informao possa ser consumida por outros usurios
(humanos ou no), de uma maneira automtica e no ambgua.
Para atingir os propsitos da Web Semntica, necessria a existncia de

uma infra-estrutura tecnolgica comum da Internet, no qual o primeiro passo a
criao de padres para a descrio de dados e de uma linguagem que permita a
construo e codificao de significados compartilhados (NETO, 2009).
2.10.1 O HTML5 e suas contribuies para a Web Semntica
Percebendo a necessidade de se criar um padro que atenda essas

exigncias, em 2004 foi feita uma pesquisa que vasculhou mais de um bilho de
pginas usando o motor de busca Google, com o objetivo de verificar como a Web
estava estruturada. Como resultados desse estudo foram coletados as vinte classes
do HTML mais utilizadas, as quais esto listadas na Figura 23 (SOUZA, 2010).
49
Figura 23: Tags HTML mais utilizadas

Fonte: Souza (2010).
A partir desse estudo a empresa norueguesa Opera Software

(desenvolvedora do navegador Opera) realizou uma nova pesquisa em 2009, dessa
vez vasculhando cerca de dois bilhes de pginas e no analisando somente as
classes utilizadas, mas tambm os ids mais usados. Os resultados dessa pesquisa
so apresentados nas Figuras 24 e 25.
Popularidade Valor Freqncia

1 Footer 179,528
2 Menu 146,673
3 style1 138,308
4 Msonormal 123,374
5 Text 122,911
6 Content 113,951
7 Title 91,957
8 style2 89,851
9 Header 89,274
10 Copyright 86,979
11 Button 81,503
12 Main 69,620
50
13 style3 69,349
14 Small 68,995
15 Nav 68,634
16 Clear 68,571
17 Search 59,802
18 style4 56,032
19 Logo 48,831
20 Body 48,052
Figura 24: 20 classes mais utilizadas
Fonte: Cardoso (2010).
Popularidade Valor Freqncia

1 Footer 288,061
2 Content 228,661
3 Header 223,726
4 Logo 121,352
5 Container 119,877
6 Main 106,327
7 table1 101,677
8 Menu 96,161
9 layer1 93,920
10 autonumber1 77,350
11 Search 74,887
12 Nav 72,057
13 Wrapper 66,730
14 Top 66,615
15 table2 57,934
16 layer2 56,823
17 Slideber 52,416
18 image1 48,922
19 Banner 44,592
20 Navigation 43,664
Figura 25: 20 ids mais utilizadas
Fonte: Souza (2010).
Um fato relevante que os sites at ento eram desenvolvidos na verso 4.1

da linguagem de Berners-Lee, ou seja, a estrutura padro das pginas Web era
basicamente como demonstrada na Figura 26.
51
Figura 26: Estrutura bsica de uma pgina Web em HTML 4.1

Fonte: Andrade (2009).
Pode-se observar que no HTML 4.1, o elemento div bastante utilizado. A

desvantagem que sua funo consiste apenas em estruturar o contedo. O
elemento div vazio em si mesmo, ou seja, no apresenta significado algum. Assim
no h como determinar os tipos de informaes que so colocadas nos sites,
impossibilitando que os navegadores e motores de busca consigam distinguir se
determinada rea da pgina Web um cabealho, menu, artigo, rodap etc.
Tentando superar essa dificuldade, o HTML 5 prope novos elementos

baseados nas pesquisas desenvolvidas pela Google e Apple (Figuras 23,24 e 25),
para estruturar as informaes com foco na semntica. A incluso desses elementos
contribui para a otimizao dos resultados dos motores de busca, os quais
vasculharo o cdigo de maneira mais eficaz.
Dessa forma, est sendo proposto um novo conjunto de tags que oferece uma
definio mais relevante informao, tornando vivel sua publicao devidamente
segmentada. A partir desses elementos ser possvel o desenvolvimento de
aplicaes capazes de manipular a informao com mais eficincia. Os
desenvolvedores no iro precisar estruturar as pginas atravs de classes e ids
subjetivas (ANDRADE, 2009).
52
Na Figura 27 pode-se visualizar como os elementos passam a ser

estruturados no HTML5, em que h uma maior preocupao com seu significado:
Figura 27: Estrutura bsica de uma pgina HTML5.

Como pode ser observada na Figura 27, a tag section (rea preta) define uma
nova seo genrica do site. O elemento header (rea laranja) representa o grupo
de introduo ou elementos de navegao. Pode ser utilizado para agrupar ndices
de contedo, campos de busca ou logomarcas.
A tag nav (rea rosa) representa uma seo da pgina que contm links mais
importantes para outras partes da pgina Web. Article (rea azul claro) que contm
hgroup, p e aside, uma parte da pgina que pode ser distribuda e reutilizada,
como um post, artigo ou bloco de comentrios.
O elemento aside (rea marrom) representa um bloco de contedo que

referencia o contedo em volta desse elemento. Hgroup (rea azul escuro) consiste
em um grupo de ttulos. Footer (rea cinza) representa o rodap da pgina. A
descrio de outros elementos est presente na Figura 28.
Padronizao, codificao e compartilhamento foram algumas das sentenas

que norteiam o desenvolvimento do HTML 5, o qual vem assumindo a proposta de
53
adequar as diretrizes da linguagem com esse contexto atual e oferecer alicerces

para a estruturao semntica da Web (FERREIRA, 2010).
Incorporando esses avanos, o HTML 5 contribui para tornar a Web

Semntica uma realidade cada vez mais presente no mundo computacional,
contribuindo para a tomada de deciso por parte do usurio e tornando o processo
de recuperao da informao menos insatisfatrio (MARCHI, 2009).
Isso ser possvel porque os motores de busca, conhecendo cada parte

integrante do site, podero fazer inferncias sob as informaes de acordo com o
sentido e o contexto, retornando assim, resultados mais relevantes ao usurio.
Baseado no resultado apontado por estes dois estudos desenvolvidos pela

Google e pela empresa Opera sobre as classes e ids mais utilizados, foram
propostas novas tags para o HTML 5, as quais esto descritas na Figura 28.
<article> Define um artigo. Um artigo deve ser algo independente, por exemplo, um
post de um blog, de um frum, comentrios.
<aside> Define um contedo secundrio de uma pgina, por exemplo, um menu
secundrio ou um banner de anunciantes.
<audio> Define um contedo de udio. Usando src = nome do arquivo pode ser
definido a fonte do udio.
<canvas> Define grficos. A tag canvas apenas define um container para grficos.
Para poder desenhar necessrio usar JavaScript.
Define um boto de comando, utilizado em inputs tipo button, como radio,
<command> checkbox, etc. A tag <command> deve ser usada dentro da tag <menu>.
Se ela no estiver dentro s poder definir um atalho de teclado.
<datalist> Define uma lista dropdown com opes especificas. Quando usado com um
input, possvel definir os possveis valores para o input.
Define detalhes de um elemento. Esses detalhes podem ser apresentados
<details> ou suprimidos dependendo se o atributo
open estiver especificado.
<embed> Define um contedo externo que ir interagir com um plugin.
<footer> Define um rodap de uma pgina.
<header> Define um cabealho de uma pgina.
<Mark> Define uma marca ou um destaque no texto. Tag usada para destacar um
texto com um background diferente.
<meter> Define algo mensurvel. Essa tag usada quando se tem predeterminado
um valor mnino e mximo.
<nav> Define links de navegao, por exemplo, um menu.
<output> Define um resultado de um clculo.
<progress> Define um progresso de um tipo de tarefa. Pode ser usado em um

progresso de download.
<section> Define uma seo do contedo. Pode ser usado para organizar captulos,
cabealhos, rodap, etc.
<source> Define a fonte de um elemento como udio ou vdeo.
54
<time> Define uma data ou um tempo.

<vdeo> Define um vdeo.
Figura 28: tags HTML5 e suas funcionalidades
Fonte: Cardoso (2010).
Vale ressaltar que o HTML5 ainda no est concludo. Faltam alguns detalhes
que precisam ser resolvidos, como por exemplo, a possvel incluso de multicanais
em vdeos e udios, o que permitiria que um vdeo ficasse dentro de outro e que
salas de bate papo oferecessem conversas simultneas, por voz, entre os usurios.
Esse refinamento da capacidade multimdia do HTML 5 uma das principais

questes a serem resolvidas antes que a linguagem caminhe para o ltimo estgio,
que durar trs anos de testes e promovendo a interoperabilidade entre os
navegadores, diz Ian Jacobs, responsvel pelas especificaes da linguagem.
Dessa forma o HTML5 est previsto para ficar pronto apenas no segundo trimestre
de 2014.
Mesmo ainda no concluda, pode-se atestar que o HTML5 chega como um

fundamento para as novas ambies de desenvolvimento da WWW e se torna uma
nova possibilidade no desenvolvimento de animaes, permitindo que as pginas
Web se tornem mais interativas.
O entusiasmo com essa quinta verso da linguagem HTML deve ser

acompanhado com a evoluo de outras tecnologias que conjuntamente podero
edificar um novo conceito de Web para a todos os usurios, pois sozinha, a
linguagem de Tim Berners-Lee inerte.
55
CAPTULO III PROCEDIMENTOS METODOLGICOS
Este captulo descreve os procedimentos metodolgicos a fim de alcanar os

objetivos propostos estabelecido no primeiro captulo deste trabalho. Para Lakatos e
Marconi (2007) os procedimentos metodolgicos esto associados aos caminhos,
formas, maneiras, mtodos para atingir determinado fim.
3.1 QUANTO AO TIPO DE PESQUISA
Existem diferentes critrios para se classificar uma pesquisa. Partindo-se da

classificao quanto natureza da pesquisa pode-se dizer que a pesquisa
aplicada, pois se pretendem evidenciar algumas das contribuies do HTML5 para
tonar os sites mais interativos atravs de recursos miditicos e suporte a animaes
e tambm a anuncia desse novo padro entre os programadores de pginas Web.
Para Marconi e Lakatos (2007) a pesquisa aplicada caracterizada por seu
interesse prtico, ou seja, uma aplicao ou a utilizao imediata dos resultados, na
soluo de problemas que ocorrem na realidade.
Ainda segundo os autores, dependendo do tipo de estudo que se deseja

realizar e pela natureza e nvel de detalhamento do problema, faz-se necessrio
escolher um procedimento sistemtico que permita descrever e interpretar
adequadamente a realidade do estudo. Sendo assim, pode-se classificar a pesquisa
como bibliogrfica, exploratria e quantitativo-descritiva.
Pesquisa bibliogrfica, porque utilizam livros nacionais, artigos nacionais

e internacionais, monografia, dissertao, tese, sites especializados, no
que diz respeito a: programao, desenvolvimento Web e a padronizao
de linguagens.
Pesquisa exploratria, porque um estudo exploratrio que tem por
objetivo descrever determinado fenmeno. A partir de uma pesquisa de
campo cujo foco analisar a aceitao do HTML5, entre os
programadores, na construo e atualizao das pginas Web.
Pesquisa quantitativo-descritiva, porque consiste em investigaes de
pesquisa emprica cuja principal finalidade o delineamento ou anlise das
56
caractersticas de fatos ou fenmenos, a avaliao de programas, ou o

isolamento de variveis principais ou chave.
3.2 ROTEIRO DA PESQUISA
A partir do objetivo geral desta pesquisa foram definidas as seguintes etapas,

tendo como intuito contemplar os objetivos especficos e responder a pergunta
problema.
Figura 29: Roteiro da pesquisa

Seguindo o roteiro da pesquisa como ilustrado na Figura 29 e tendo como

finalidade atender ao objetivo geral proposto, foi iniciada a Etapa 1 atravs de uma
pesquisa bibliogrfica que remetesse s verses da linguagem HTML at chegar a
sua ltima: o HTML5.
Dessa quinta verso, foram exploradas algumas caractersticas a fim de

justific-la como sendo uma nova possibilidade no desenvolvimento de animaes e
caracterizada tambm, pela capacidade de inserir recursos miditicos.
Fundamentada como meio de desenvolver animaes, chega-se a Etapa 2,

alimentada por referncias bibliogrficas nacionais e internacionais, e que
caracteriza o HTML5 como uma das formas de tornar possvel as ambies da Web
57
Semntica, j que um conjunto de novas tags a ele foram adicionadas, possibilitando

uma melhor estruturao e identificao do contedo em um site.
Concludas as etapas 1 e 2, e considerando as caractersticas presentes na

reviso bibliogrfica, foram criadas variveis que contemplam o objetivo geral da
pesquisa, resultando na elaborao de um questionrio. E o seu preenchimento, por
parte dos programadores, essencial para o cumprimento da Etapa 3.
A Figura 30 traz consigo as variveis resultantes da reviso bibliogrfica, as

quais tornaram possvel a elaborao de questes relevantes que formaram o
questionrio.
CARACTERISTICAS VARIVEL DEFINIO DA VARIVEL ESCALA
Mult.
Idade Define o sexo do entrevistado
Escolha
Mult.
Sexo Define a idade do entrevistado
Escolha
Mult.
PERFIL Define a funo que o entrevistado
Funo Escolha e
desempenha
aberta
Tempo de Mult.
Define o tempo de trabalho do entrevistado
servio Escolha
Mult.
Define o nvel de escolaridade ou formao
Formao Escolha e
acadmica
aberta
Define o nvel de conhecimento sobre os
Padronizao Linkert
padres HTML
CONHECIMENTO
Aplicao Define o nvel de aplicao do conhecimento Linkert
Identifica o(s) motivo(s) pelo(s) qual(is) o Mult.
Dificuldade programador no segue as orientaes da Escolha e
W3C aberta
Define o nvel de concordncia sobre a
Cdigo enxuto Linkert
diminuio da quantidade de linhas de cdigo
Define o nvel de concordncia sobre os
Estrutura Linkert
benefcios da informao bem identificada
Define o nvel de concordncia sobre o
MOTIVAO quanto ficou fcil a insero de elementos Linkert
Facilidade
multimdia com o HTML5
Define o nvel de concordncia sobre a
Web Linkert
contribuio do HTML 5 em tornar a Web
semntica
mais semntica
Define o nvel de concordncia sobre o
quanto uma animao em HTML 5 pode ser
Leveza Linkert
ANIMAO carregada num tempo menor em relao a
mesma animao em Flash
58
Nvel de concordncia sobre o quanto o

Interatividade HTML5 contribui para tornar os sites mais Linkert
interativos
Nvel de concordncia sobre se o HTML5
Possibilidade poder ser considerado uma nova forma de Linkert
desenvolver animaes
Define o nvel de relevncia do uso de
Portabilidade Linkert
animaes com a ausncia de plugins
Figura 30: Tabela com as variveis que geram o questionrio
O nvel de concordncia sobre aspectos da linguagem HTML e suas verses,

o conhecimento prtico sobre as recomendaes da W3C e as dificuldades
encontradas pelos programadores foram algumas das questes que nortearam o
questionrio.
3.3 SELEO DA AMOSTRA OU CASO
As variveis revelam as caractersticas dos programadores de sites que

compem o universo desta pesquisa, os quais compreendem um nmero de oito
desenvolvedores que atuam em empresas nas cidades de Patos PB, Uirana PB
e So Paulo SP.
3.4 QUANTO NATUREZA DAS VARIVEIS
Quanto natureza das variveis, a pesquisa pode ser classificada em

quantitativa, qualitativa ou quanli-quantitativa. Lakatos e Marconi (2007) descrevem
a pesquisa quantitativa como caracterizada pela quantificao, tanto na coleta como
no tratamento dos dados; utiliza-se de tcnicas estatsticas, com o objetivo de
encontrar respostas que determinam as relaes de causa e efeito entre variveis.
J os estudos qualitativos podem descrever a complexidade de determinado

problema e a interao de certas variveis, compreender e classificar os processos
dinmicos vividos por grupos sociais, contribuir no processo de mudana do grupo e
possibilitar, em maior nvel de profundidade, o entendimento das particularidades do
comportamento dos indivduos.
59
Segundo o autor, observam-se as caractersticas do estudo qualitativo

quando se constata que:
Os dados so coletados preferencialmente nos contextos em que os

fenmenos so formados;
Os estudos apresentam-se em forma descritiva;
A interao entre pesquisador e o pesquisado fundamental;
A teoria construda por meio de anlise dos dados que se baseiam na
experincia;
E a anlise dos dados desenvolvida, de preferncia, no decorrer do
processo de levantamento deles.
Considera-se que a presente pesquisa caracterizada como sendo quali-

quantitativa, pois tende a descrever, analisar e quantificar os resultados obtidos
durante a pesquisa. Deste modo foram determinadas as variveis quantitativas
tendo como objetivo a anlise da aceitao entre os programadores de pginas Web
a nova verso da linguagem HTML. J as variveis qualitativas foram determinadas
para caracterizar os programadores entrevistados. A continuao ser apresentada
no instrumento de pesquisa desenvolvido para coleta dos dados.
3.5 INSTRUMENTOS DE PESQUISA PARA COLETA DE DADOS
Para Yin (2005) a coleta de dados pode ser uma atividade complexa e difcil,
e se no for realizada corretamente, todo trabalho pode ser posto em risco.
Segundo Marconi e Lakatos (2007), h diversos instrumentos de coleta de

dados que podem ser empregados a fim de se obter informaes. As informaes
obtidas por meio de pessoas so consideradas, tambm, como fontes primrias; e
por meio de pesquisas bibliogrficas, so atendidas como fontes secundrias.
Nesta pesquisa, as coletas de dados foram realizadas de duas formas: a

pesquisa teve incio com a busca de dados secundrios, por meio da pesquisa
bibliogrfica, seguida pela fonte primria, obtida mediante a utilizao dos
instrumentos de pesquisa.
60
Os materiais utilizados decorrem de fontes secundrias, tais como

bibliogrfica especializada apoiada em autores nacionais e internacionais, a partir da
rede mundial de computadores1, considerando-se que o uso da tecnologia possibilita
obteno de informaes de todos os lugares do mundo, alm do acesso
bibliografia mundial.
A fonte de dados primria decorre da aplicao de um instrumento de

pesquisa, composto por um questionrio estruturado, apresentado no Apndice I.
3.5.1 Questionrio estruturado
De acordo com Marconi e Lakatos (2007), questionrio um instrumento de

coleta de dados constitudo por uma srie ordenada de perguntas, classificadas em
perguntas fechadas, abertas, mltiplas escolhas, escala de Lickert, entre outras.
Nesta pesquisa optou-se pela escala de Lickert pelo fato de ser necessrio
especificar o nvel de concordncia sobre algumas variveis de notria relevncia no
estudo bibliogrfico, listadas na Figura 30.
Essa escala permite elaborar um conjunto de proposies que tenham

relao direta com o objetivo do trabalho. Essas proposies foram apresentadas a
oito programadores de sites que puderam indicar suas reaes, ou seja, o seu nvel
de concordncia sobre as questes.
O questionrio foi elaborado a partir da necessidade de observar fatores

como o nvel de conhecimento sobre as recomendaes da W3C, as dificuldades
enfrentadas para desenvolver seguindo as novas verses da linguagem HTML e
principalmente a adaptao e utilizao do HTML5 no desenvolvimento das pginas
Web.
1
A rede mundial de computadores, Internet, tambm denominada web, ou WWW (World Wide Web) est, neste trabalho,
denominada simplesmente de rede mundial (apesar destes termos j aparecerem nos dicionrios atuais, como o Novo Aurlio
- FERREIRA, 1986).
61
3.6 COLETA DOS DADOS
A coleta de dados foi realizada junto aos desenvolvedores de trs empresas

da cidade de Patos PB: a Easy Web Solues Internet, Odon Neto Seu site seu
estilo e a 10envolve Design e Comunicao. Tambm contribuiu para a nossa
pesquisa a empresa Magic Web com sede em So Paulo SP e filial em Curitiba
PR, e a 9Ideia Solues Web de Uirana PB. Os sujeitos da pesquisa foram oito
desenvolvedores, sendo quatro da cidade de Patos, dois de Uirana e outros dois
programadores de So Paulo.
A tcnica de pesquisa foi documentao direta atravs da pesquisa de

campo exploratria de acordo com Marconi e Lakatos (2007). A coleta de dados teve
durao no perodo de dois meses e envolveu a tcnica de aplicao do
questionrio. Nas empresas residentes na cidade de Patos PB, houve o
acompanhamento do pesquisador durante o preenchimento do formulrio, porm na
instituio paulista, o acompanhamento foi feito atravs da troca de emails.
3.7. ANLISE E INTERPRETAO DOS RESULTADOS
Levando-se em considerao as questes que foram respondidas, deu-se

inicio ao processo de quantificao e tabulao dos dados obtidos, sendo
transcritos, analisados e comparados com a fundamentao dos autores
mencionados no quadro de referencia terico.
E de acordo com Marconi e Lakatos (2007), antes da anlise e interpretao

dos dados, preciso organiz-los de forma a fazer a seleo (exame minucioso dos
dados); codificao (tcnica operacional utilizada para categorizar os dados) e a
tabulao (disposio dos dados em tabelas e grficos).
Tudo isso para garantir uma forma mais organizada de utilizar essas
informaes. Para o autor a anlise dos dados considerada a etapa na qual
possvel evidenciar as relaes existentes entre o fenmeno do sistema, enquanto a
interpretao procura dar um significado mais amplo s respostas, vinculando-as a
outros conhecimentos.
62
A anlise e interpretao dos dados foram realizadas, atravs do Microsoft

Excel na verso 2007, sendo posteriormente elaborados grficos. Ressalta-se ainda
que os dados empricos passassem por anlise crtica para que atendessem aos
objetivos da pesquisa.
63
CAPTULO IV ANLISE DOS DADOS
O objetivo deste captulo consiste em apresentar a anlise dos dados obtidos

durante a pesquisa realizada com alguns programadores de sites. Inicialmente so
mostrados os dados referentes ao perfil dos profissionais. Posteriormente, so
apresentados os resultados da pesquisa feita com os oito programadores de cinco
empresas de desenvolvimento Web que opinaram sobre as possveis contribuies
do HTML5 na criao de animaes e na concretizao da Web Semntica.
4.1 HTML5: MECANISMO DE DESENVOLVIMENTO DE ANIMAES
Fazendo referncia reviso bibliogrfica, verifica-se que uma das vantagens

em desenvolver animaes a partir do HTML5, via JavaScript, tornar possvel o
carregamento da pgina eletrnica em um menor tempo, j que os navegadores
(browsers) no tero a necessidade de executar plugins adicionais, como demonstra
a Figura 13.
4.2 HTML5 E A SEMNTICA DAS PGINAS
Revisitando as pesquisas na reviso bibliogrfica, observado que as

contribuies do HTML5 vo alm de tornar os sites mais interativos e dinmicos.
Essa verso da linguagem HTML permite estruturar os sites de tal forma que os
motores de busca consigam identificar a informao de acordo com o seu real
sentido.
4.3 CONTRIBUIES DO HTML5 NA MOTIVAO DOS PROGRAMADORES
A anlise das informaes resultantes do preenchimento dos questionrios se

iniciar pelo perfil dos programadores entrevistados, como seguem.
64
De acordo com os resultados obtidos, pode-se averiguar que sete dos oito
programadores participantes da pesquisa, tm idade mxima de 25 anos e apenas
um est na faixa etria dos 26 aos 40 anos como observado no grfico da Figura 31.
Figura 31: Faixa etria

Os questionrios tambm relevam mais um detalhe curioso acerca do perfil

dos oito programadores: apenas uma mulher, ou seja, a tendncia da rea ter
homens ocupando o lugar de programador de pginas eletrnicas, como observa a
Figura 32.
Figura 32: Sexo dos programadores entrevistados

65
Uma questo foi proposta no questionrio para identificar a real funo do

programador, ou seja, verificar se esse profissional realmente exerce sua funo ou
se ele responsvel por outras dimenses durante o desenvolvimento de um site.
A pesquisa mostra que trs dos oito programadores entrevistados, exercem

outras atividades como, por exemplo, a funo de design, engenheiro de software e
gerente de projetos, como demonstra a Figura 33.
Figura 33: Quantidade de funes

Em relao ao tempo em que cada programador exerce sua funo, sete

assinalaram que esto no mximo h trs anos, e apenas um programador afirma
estar exercendo sua funo num perodo entre quatro e sete anos, como pode ser
visualizado na Figura 34.
66
Figura 34: Tempo de trabalho exercido

Em relao ao nvel de formao dos programadores participantes da

pesquisa, apenas um ps-graduado, seis tm curso superior (trs em sistemas da
informao, um em licenciatura em computao, outro em cincias da computao e
outro em marketing) e o outro tem o segundo grau completo, como ilustrado na
Figura 35.
Figura 35: Nvel de formao

Outro dado relevante gerado pela pesquisa o fato de os programadores

recorrerem s recomendaes da W3C no desenvolvimento dos sites, pois dois
afirmaram programar as pginas eletrnicas de acordo com todas as
recomendaes estabelecidas pela entidade, outros trs seguem quase todas as
67
recomendaes, e os outros trs programadores dizem que seguem ou no as

recomendaes da W3C, de acordo com o site a ser criado. Essas afirmaes so
evidenciadas na Figura 36.
Figura 36: Seguimento s recomendaes da W3C

Mesmo havendo alguns que no seguem risca as orientaes dadas pela

W3C, trs programadores acham extremamente importante desenvolver os sites de
acordo com as recomendaes do Consrcio. Outros quatro acham importante
seguir tais recomendaes, e apenas um programador v esse seguimento como
ligeiramente importante. A Figura 37 demonstra a opinio dos programadores.
Figura 37: Importncia em seguir as recomendaes da W3C

68
Quanto ao conhecimento do HTML, cinco programadores afirmaram que

conhecem quase tudo sobre essa linguagem, dois conhecem ligeiramente e apenas
um programador diz que o seu conhecimento pouco. Essas afirmaes so
exemplificadas na Figura 38.
Figura 38: Nvel de conhecimento sobre a linguagem HTML

Fonte: Pesquisa do estudo (2011).
Uma pergunta foi esboada para saber o quanto os programadores utilizam

do seu conhecimento para desenvolver sites na verso HTML 4.1. Quatro afirmaram
que utilizam todos os seus conhecimentos, dois programadores dizem que utilizam
quase todo o conhecimento adquirido. Um afirma que utiliza pouco do seu
conhecimento e outro diz que utiliza ligeiramente o seu conhecimento, como pode
ser visualizado na Figura 39.
69
Figura 39: Utilizao do HTML 4.1 para desenvolver sites

J para o desenvolvimento de sites no novo padro, o HTML5, trs

programadores utilizam quase todos os seus conhecimentos sobre essa verso,
enquanto dois utilizam apenas ligeiramente os conhecimentos adquiridos. J um
programador afirma utilizar pouco do seu conhecimento, e outros dois dizem que
utilizam todos os seus conhecimentos, como demonstra a Figura 40.
Figura 40: Utilizao do HTML5 para desenvolver sites

Como forma de justificar a infidelidade s recomendaes da W3C, os

programadores destacaram algumas dificuldades como: escassez de documentos
70
oficiais, assinalados por quatro programadores; a utilizao do ingls em

documentos e grupos de pesquisa, marcados por outros dois; a resistncia dos
usurios em no manterem os navegadores atualizados, marcado por um
programador e falta de tempo em manter-se atualizado sobre tais recomendaes
assinalado por outro programador, como ilustrada na Figura 41.
Figura 41: Dificuldades em seguir as recomendaes da W3C

Sete programadores afirmaram que haver uma moderada diminuio na

quantidade de linhas de cdigo devido ao surgimento de novas tags no HTML5 que
permitem criar, por exemplo, sees, artigos, datas, e outras funes. Um
programador afirmou que, pelo contrrio, haver um moderado acrscimo na
quantidade de linhas de cdigo, como pode ser observado na Figura 42.
71
Figura 42: Quantidade de linhas de cdigo com HTML5

Outra pergunta que merece ateno faz referncia ao nvel de concordncia

sobre o quanto um site em HTML5 ajuda os motores de busca na identificao da
informao. Trs programadores responderam que concordam muito que o HTML5
ajuda os motores a identificarem a informao com uma maior relevncia numa
pgina eletrnica. Trs concordam ligeiramente sobre essa questo e dois
programadores nem concordam e nem discordam, como exemplificado na Figura 43.
Figura 43: HTML5 na identificao da informao pelos motores de busca

72
Cinco programadores acham que ficou muito mais fcil inserir elementos
miditicos como udios e vdeos utilizando a nova verso da linguagem HTML. Dois
acham que ficou ligeiramente mais fcil e outro programador afirma que nem
dificultou nem facilitou a insero de elementos miditicos, como pode ser
observado na Figura 44.
Figura 44: Insero de elementos miditicos utilizando o HTML5

Para tornar as ambies da Web Semntica possveis, sete programadores

vem que as contribuies do HTML5 so muito relevantes. Apenas um afirma que
as contribuies da nova verso da linguagem de Lee so moderadamente
relevantes para a Web 3.0, como demonstra a Figura 45.
73
Figura 45: Contribuies do HTML5 para a Web Semntica

As respostas dos programadores foram bem divididas quando a pergunta faz

referncia ao HTML5 no que diz respeito a essa verso se tornar uma nova
possibilidade no desenvolvimento de animaes. Trs programadores afirmaram
que o HTML5 poder ser uma nova possibilidade; outros trs defendem a idia de
que essa verso provavelmente ser uma nova possibilidade. J para outros dois
programadores, o HTML5 com certeza ser uma nova possibilidade de desenvolver
animaes. Essas afirmaes esto simbolizadas graficamente na Figura 46.
Figura 46: HTML5 como nova possibilidade no desenvolvimento de animaes

74
O tempo de execuo de qualquer ferramenta na Web pode ser o diferencial

para tornar uma navegao frustrante ou no. Diante disso, seis programadores
afirmaram que uma animao desenvolvida em HTML5, via JavaScript, tende a ser
executada num tempo muito menor do que a mesma animao desenvolvida em
Flash. J os outros dois programadores acham que o tempo de execuo
ligeiramente menor, como demonstra a Figura 47.
Figura 47: Execuo de animaes desenvolvidas em HTML5 e Flash

Devido s facilidades em inserir elementos miditicos e a possibilidade de

criar animaes, cinco programadores afirmaram que o HTML5 contribui muito para
tornar as pginas eletrnicas mais interativas. Um programador acha que a nova
verso da linguagem HTML contribui ligeiramente para tornar os sites mais
interativos e outros dois afirmam que o HTML5 contribui consideravelmente, como
pode ser observado na Figura 48.
75
Figura 48: Contribuio do HTML5 em tornar os sites mais interativos

A proposta do HTML5 em inserir animaes, via JavaScript, muito relevante

para seis programadores, pois no h necessidade de inserir plugins. J para dois
programadores, essa proposta moderadamente relevante, como mostra o grfico
da Figura 49.
Figura 49: Ausncia de plugins utilizando o HTML5

76
CAPTULO V - CONSIDERAES FINAIS
Diante do estudo bibliogrfico realizado atravs de pesquisas em livros,

revistas, peridicos, dissertaes e pginas Web, verificou-se que, mesmo ainda em
fase de desenvolvimento, a nova verso da linguagem HTML contribui para tornar
possveis os ideais da Web 3.0, atravs da melhor identificao da informao num
site devido ao acrscimo de novas tags.
Este fato se torna notrio quando 87,5% dos programadores entrevistados

consideram que as contribuies do HTML5, atravs de suas novas tags, so muito
relevantes para fazer da Web Semntica uma realidade cada vez mais presente no
mundo das relaes virtuais.
Assim, a forma do usurio se relacionar com a informao disponvel na rede

mundial de computadores ganha um novo e importante membro: o computador (ou
outros dispositivos). Ou seja, as mquinas conseguiro eliminar da responsabilidade
dos usurios a rdua tarefa de filtrar os resultados de uma pesquisa, j que os
motores de busca varrero os sites, porm compreendendo cada parte do mesmo,
e assim, tendo a possibilidade de retornar informaes mais relevantes aos
usurios.
Dessa forma os programadores entrevistados concordam que a

automatizao da capacidade de interpretar os dados espalhados pela Internet est
sendo acelerada com o desenvolvimento do HTML5. Ou seja, o valor semntico da
Web ainda depende da leitura humana. A partir disso, marcaes com modelagens
mais adequadas de identificadores permitiro que computadores faam isso.
A mudana da Web sinttica baseada em documentos repositrio de dados

relacionados por hyperlinks para exibio e reuso para a Web semntica que
alm de apresentar dados agrega capacidade ampliada de interpret-los e relacion-
los vai marcar a rede do futuro, com considerveis contribuies do HTML5 e
outras tecnologias.
Outra novidade que tambm pde ser verificada durante a reviso

bibliogrfica a possibilidade do HTML5, por meio do JavaScript, desenvolver
animaes utilizando apenas cdigos, sem a necessidade de utilizar plugins. Estes
tornam os sites ainda mais pesados, o que resulta num maior tempo de execuo.
77
Esta ausncia de plugins considerada por 75% dos programadores

entrevistados como algo muito relevante no desenvolvimento de sites. Por essa
razo, 62,5% dos programadores entrevistados afirmam que essa nova verso da
linguagem HTML com certeza ser ou provavelmente ser uma nova possibilidade
no desenvolvimento de animaes.
No apenas os programadores entrevistados, mas a prpria empresa Adobe

parece no ter resistido s tentaes da nova verso da linguagem HTML, no que
diz respeito ao desenvolvimento de animaes.
No dia primeiro de agosto desse ano, a Adobe lanou a ferramenta Edge, a

qual permite criar animaes a partir do HTML5, CSS3 e JavaScript, mostrando mais
uma vez que o Flash j no mais necessrio para criar esse tipo de contedo.
O software contm efeitos que podem ser aplicados durante o

desenvolvimento da animao. Por fim, ao concluir a animao, o usurio tem a
possibilidade de salv-la num formato HTML, a qual gerar os arquivos em
JavaScript, CSS3 e HTML5, e assim, poderem ser utilizados nos sites, sem a
necessidade de plugins.
Logicamente que a empresa norte-americana discursa com palavras que no

comprometem a confiabilidade de seus produtos. Segundo a Adobe, o Edge no
um software para substituir o Flash, mas sim para complement-lo. Se a companhia
vai ou no parar o desenvolvimento do Flash, apenas o tempo e as contnuas
implementaes do HTML5 podero responder. Mas, ao menos, a Adobe quer
facilitar a vida dos programadores, j que uma verso do Edge pode ser encontrada
na Web para download.
Outro tiro no p que a Adobe conseguiu realizar foi o desenvolvimento do

aplicativo Wallaby, no ms de maro ainda desse ano. O aplicativo transforma
animaes desenvolvidas em Flash para HTML5. Vale ressaltar que esse aplicativo
encontrado gratuitamente para ser baixado.
Sendo assim, unindo os resultados das pesquisas realizadas com os oito

programadores reviso da literatura j mencionada, observa-se que os objetivos
especficos foram alcanados, pois demonstrar as contribuies do HTML5 para as
pretenses da Web semntica, evidenciar a nova verso da linguagem HTML como
78
novo meio de desenvolver animaes e as motivaes que fazem do HTML5 uma

linguagem em uso crescente pelos programadores foram discutidas e relatadas no
presente trabalho.
Dessa forma, atingido os objetivos especficos, contempla-se tambm o

objetivo geral do trabalho que mostrar algumas das novas contribuies do HTML5
no desenvolvimento de sites e sua aceitao entre os programadores de pginas
Web.
5.1 RECOMENDAES
O presente trabalho pode ser mensurado por estudantes ou profissionais que

pretendam demonstrar a real diferena (se existir) no tempo de execuo de
animaes desenvolvidas em HTML5 e Flash, contribuindo para a tomada de
decises de implementaes futuras.
Assim, como opo de estudo de caso, pode-se desenvolver uma pgina

eletrnica para o Campus VII da Universidade Estadual da Paraba com recursos em
Flash e outra pgina Web com recursos semelhantes, porm desenvolvidos em
HTML5, tornando possvel verificar o tempo de execuo de ambas as pginas de
acordo com a conexo de Internet estabelecida.
5.2 LIMITAES
No presente trabalho, alguns dados (ou a ausncia deles) evidenciam

determinadas dificuldades encontradas para desenvolv-lo. Alguns problemas como
a falta de documentos especializados e dificuldades na pesquisa de contedos a
partir de informaes acadmicas ganham notoriedade pelo fato do HTML5 ainda
estar em desenvolvimento.
Outro problema a ser mencionado, foi a dificuldade em obter amostras com

tamanho significativo. Isto ocorreu por vrios motivos: indisponibilidade dos
programadores para o preenchimento do questionrio, a maioria das empresas
consultadas no se sentiram motivadas a colaborar com a pesquisa disponibilizando
79
seus profissionais, tempo limitado para a execuo da pesquisa, entre outros.

Assim, os resultados obtidos com nossa amostra no podem ser generalizados.
Embora os resultados sejam limitados, acredita-se que o plano e execuo da

pesquisa seja uma considervel contribuio que poder ajudar na repetio do
estudo, consolidando, no futuro, resultados mais gerais.
No apenas no que diz respeito ao HTML5 em si que dificuldades surgiram.

Outros problemas foram aparecendo ao desenrolar do trabalho, como por exemplo,
informaes precisas sobre a prpria cronologia do advento da INTERNET, quais
eram as novidades de cada verso da linguagem HTML que surgiam, etc. A
ausncia de documentos oficiais dificultava um maior respaldo na documentao do
presente trabalho.
O enfoque dado sentena de que as animaes desenvolvidas em HTML5

provavelmente so mais rapidamente executadas do que as mesmas animaes
desenvolvimento Flash, extrada da pesquisa realizada com os programadores,
precisariam, necessariamente, de testes para comprov-la, tornando-se tambm,
outra limitao do presente trabalho.
80
REFERNCIA BIBLIOGRFICA
ALMEIDA, Maurcio Barcellos. Uma introduo ao XML, sua utilizao na Internet e

alguns conceitos complementares. Cincia da Informao, Braslia, p.5-13, 07 ago.
2002.
ALVES, Paulo Jorge de Almeida Falco. World Wide Web: uma nova realidade
social. 2008. 90 f. Dissertao (Mestrado) - Universidade Fernando Pessoa, Porto,
2008.
ANDRADE, Diogo Arajo de; MARCHI, Kssia Rita da Costa. HTML5 - Novos
padres para a Web Semntica. Paranava: Universidade Paranaense, 2009.
JNIOR, Jos Arbex. Guerra Fria: Terror de Estado, Poltica e Cultura. So Paulo:
Moderna, 2005.
BARROS, Edgard Luiz de. A guerra fria: a aliana entre russos e americanos, as
origens da guerra fria, a destruio atmica irreversvel? So Paulo: Unicamp,
1985.
BAX, Marcello Peixoto. Introduo s linguagens de marcas. Cincia da

Informao, Braslia, p.32-38, 14 abr. 2000.
BERNERS-LEE, Tim; HENDLER, James; LASSILA, Ora. The Semantic Web: A new
form of Web content that is meaningful to computers will unleash a revolution of new
possibilities. Scientific American, New York, p.1-12, 19 maio 2001.
BLATTMANN, Ursula; SILVA, Fabiano Couto Corra da. Colaborao e interao na

Web 2.0 e biblioteca 2.0. Revista Acb: Biblioteconomia em Santa Catarina,
Florianpolis, p.191-215, 12 jul. 2007.
BRAGA, Rodrigo. Steve Jobs explica por que no permite Flash no

iPhone. Disponvel em: <http://edcm.com.br/blog/?p=75>. Acesso em: 20 jul. 2011.
BREITMAN, Karin. Web Semntica: a Internet do futuro. Rio de Janeiro: LTC, 2005
BUENO, Felipe Franco. Evoluo da programao Web. 2008. 65 f. Monogradia

(Graduado) - Faculdade Comunitria de Campinas Unidade Iii, Campinas, 2008.
81
CAMPI, Monica. Apple no ir mais incluir Flash em Macs. Disponvel em:

<http://info.abril.com.br/noticias/tecnologia-pessoal/Apple-nao-ira-mais-incluir-Flash-
em-macs-25102010-19.shl>. Acesso em: 27 ago. 2011.
CASTELLS, Manuel. A Galxia da Internet: Reflexes sobre a Internet, os negcios

e a sociedade. Rio de Janeiro: Jorge Zahar, 2003.
DIZARD, Wilson P.. A nova mdia: a comunicao de massa na era da informao.

Rio de Janeiro: Jorge Zahar, 2000.
FERREIRA, Elcio; EIS, Diego. Curso W3C Escritrio Brasil. So Paulo. 2010. 106
p.
LALLI, Felipe Micaroni. Evoluo da programao Web. 2008. 65 f. Monogradia

(Graduado) - Faculdade Comunitria de Campinas Unidade Iii, Campinas, 2008.
MARCONDES, Christian Alfim. HTML 4.0 Fundamental: a Base da Programao

para WEB. So Paulo: rica, 2005.
MARCONI, Marina de Andrade; LAKATOS, Eva Maria. Tcnicas de Pesquisa. 6.

ed. So Paulo: Atlas, 2007. 279 p.
MONTEIRO, Lus. A Internet como meio de comunicao: possibilidades e

limitaes. In: CONGRESSO BRASILEIRO DA COMUNICAO, 24., 2001, Campo
Grande. A Internet como meio de comunicao: possibilidades e limitaes. Rio
de Janeiro: Intercom, 2001. p. 27 - 37.
PICKLER, Maria Elisa Valentim. Web Semntica: ontologias como ferramentas de

representao do conhecimento. Perspectivas em Cincia da Informao,
Londrina, p.65-83, 20 jan. 2007.
ROBERTO, Rafael Liberato. Uma abordagem para identificao de interesses

dos usurios durante a navegao em Websites semnticos. 2006. 113 f.
Dissertao (Mestrado) - Universidade Estadual de Maring, Maring, 2006.
ROCHA, Helosa Vieira da; BARANAUSKAS, Maria Ceclia Calani. Design e

avaliao de interfaces humano-computador. Campinas: Unicamp, 2003. 244 p.
ROGRIO, Pedro. A histria do HTML. Disponvel em:

<http://www.cssnolanche.com.br/a-historia-do-html/>. Acesso em: 15 ago. 2011.
82
SANTOS NETO, Gilberto Martins dos. Anotao semntica de recursos Web

baseada em ontologias. 2009. 83 f. Dissertao (Mestrado) - Universidade Federal
do Amazonas, Manaus, 2009.
SANTOS, Marcelo. O poder norte-americano e a Amrica Latina no ps-guerra

fria. So Paulo: Annablume, 2007. 254 p.
SARAIVA, Jos Flvio Sombra. Relaes internacionais: Entre a ordem bipolar e o

policentrismo (de 1947 a nossos dias).
Internacionais, 2001. Volume III.
SMITH, Michael. HTML: The Markup Language. W3C Escritrio Brasil. Disponvel
em: <http://www.w3c.br/Cursos/CursoHTML5>. Acesso em: 05 set. 2011.
SOUZA, David William Rosa de; CARDOSO, Rafael Cunha. O HTML5 e suas
novas API. Pelotas: Tecnologias de Sistemas para a Internet Instituto Federal de
Educao, Cincia e Tecnologia Sul-Rio-Grandense. 2010.
SOUZA, Renato Rocha; ALVARENGA, Ldia. A Web Semntica e suas contribuies

para a cincia da informao. Cincia da Informao, Braslia, p.132-141, 03 jan.
2004.
TANENBAUM, Andrew S.. Computer Networks. Amsterdam: Campus, 2003.
TITTEL, Ed.. Redes de Computadores. Porto Alegre: Artmed, 2002.
TREIN, Daiana; SCHLEMMER, Eliane D. R.. Projetos de aprendizagem baseados

em problema no contexto da Web 2.0: possibilidades para a prtica pedaggica.
Revista E-curriculum, So Paulo, 02 jun. 2009.
YIN, Robert K.. Estudo de caso: Planejamento e Mtodos. So Paulo: Bookman,

2005.
ZACHARIAS, Guilherme Keese. Evoluo da programao Web. 2008. 65 f.

Monogradia (Graduado) - Faculdade Comunitria de Campinas Unidade Iii,
Campinas, 2008.
BUSH, Vannevar. As We May Think. Atlantic Monthly, Boston, n. , p.37-47, 03 jul.

1945.
83
APNDICE A QUESTIONRIO
UNIVERSIDADE ESTADUAL DA PARABA
CENTRO DE CINCIAS EXATAS

E SOCIAIS APLICADAS
CAMPUS VII, GOVERNADOR ANTNIO MARIZ
Os dados sero utilizados para pesquisa e elaborao da Monografia de Graduao em Licenciatura Plena em
Computao da UEPB. No necessria a sua identificao.
Daniel Arajo de Lucena graduando em Licenciatura Plena em Computao pela Universidade Estadual da Paraba e
orientando da professora Msc. Ana Carolina Costa de Oliveira
QUESTIONRIO DE PESQUISA DE CAMPO
Data do preenchimento do questionrio:_____/ _____/_____
Instituio pesquisada: _________________________________________________

Idade: ( ) 18 25 anos ( ) 26 40 anos ( ) 41 60 anos ( ) Mais de 60 anos
Sexo: ( ) Masculino ( ) Feminino
Funo: ( ) Design ( ) Programador ( ) Gerente de projetos
( ) Engenheiro de software ( ) Outro: __________________
Explicao da questo
O programador pode exercer ou no a real funo de programar e desenvolver
pginas Web.
Tempo de servio: ( ) Menos de 1 ano ( ) 1 3 anos

( ) 4 7 anos ( ) 8 anos ou mais
Formao: ( ) 1 grau incompleto ( ) 1 grau completo ( ) 2 grau incompleto

( ) 2 grau completo ( ) Curso superior. rea: __________________
( ) Ps-graduado(a)
Explicao da questo
O programador pode ter cursado reas que no envolvem tecnologia,
desenvolvimento de softwares, engenharia etc. Como tambm pode ter aprendido a
programar por conta prpria, com auxlio de materiais disponveis na Web, por
exemplo.
84
1. Quanto voc programa as pginas Web seguindo as orientaes de

padronizao da W3C?
a. Programo seguindo todas as recomendaes da W3C
b. Programo seguindo quase todas as recomendaes da W3C
c. Programo seguindo apenas algumas recomendaes da W3C
d. De acordo com o site a ser criado, sigo ou no as recomendaes
e. Programo sem seguir as recomendaes da W3C
Explicao da questo
A W3C (World Wide Web Consortium) um consrcio com inmeras empresas, que
visa desenvolver padres para a Web e presidido por Tim Berners-Lee, o criador
da linguagem HTML.
2. Voc considera importante programar os sites de acordo com as

recomendaes da W3C?
a. extremamente importante programar os sites seguindo as orientaes da
W3C
b. importante programar os sites seguindo as orientaes da W3C
c. ligeiramente importante programar os sites seguindo as orientaes da
W3C
d. No importante nem desprezvel programar seguindo as orientaes da
W3C
e. No importante seguir as orientaes da W3C
3. Quanto voc conhece da linguagem HTML?

a. Conheo tudo sobre a linguagem HTML
b. Conheo quase tudo sobre a linguagem HTML
c. Conheo ligeiramente a linguagem HTML
d. Conheo pouco sobre a linguagem HTML
e. Conheo muito pouco sobre a linguagem HTML
4. Quanto voc utiliza do seu conhecimento para desenvolver os sites de seus

clientes em HTML 4.1?
a. Utilizo todo o meu conhecimento
85
b. Utilizo quase todo o meu conhecimento

c. Utilizo ligeiramente o meu conhecimento
d. Utilizo pouco do meu conhecimento
e. Utilizo muito pouco do meu conhecimento
5. Quanto voc utiliza do seu conhecimento para desenvolver os sites de seus
clientes em HTML 5?
a. Utilizo todo o meu conhecimento
b. Utilizo quase todo o meu conhecimento
c. Utilizo ligeiramente o meu conhecimento
d. Utilizo pouco do meu conhecimento
e. Utilizo muito pouco do meu conhecimento
6. Qual(is) a(s) dificuldade(s) para seguir as recomendaes e o avano das

questes da linguagem HTML?
a. Escassez de documentos oficiais
b. A ausncia (ou quase) de meios de tirar dvidas
c. A maioria das documentaes ou grupos de pesquisa em ingls
d. Outro(s) motivo(s): _____________________________________
7. Quanto voc acha que haver de diminuio na quantidade de linhas de

cdigo devido a criao de novas tags no HTML5?
a. Haver uma grande diminuio na quantidade de linhas de cdigo
b. Haver uma moderada diminuio na quantidade de linhas de cdigo
c. Nem haver uma diminuio nem aumentar a quantidade de linhas de
cdigo
d. Haver um moderado acrscimo de linhas de cdigo
e. Haver um aumento significativo no nmero de linhas de cdigo
8. Quanto voc concorda que um site em HTLM 5 ajuda na identificao da

informao?
a. Concordo muito d. Discordo moderadamente
b. Concordo ligeiramente e. Discordo muito
c. Nem concordo / nem discordo
86
9. Quanto voc acha que ficou mais fcil inserir elementos miditicos como
vdeos e udios?
a. Muito fcil d. Difcil
b. Ligeiramente fcil e. Muito difcil
c. Nem fcil / nem difcil
10. Quanto voc acha que relevante a contribuio do HTML 5 para tornar a
Web mais semntica?
a. Muito relevante d. Pouco relevante
b. Moderamente relevante e. No h relevncia
c. Ligeiramente relevante
Explicao da questo
Web semntica tem como foco fazer com que as buscas na Web tenham um retorno
de informaes mais relevantes, ou seja, os sites estaro estruturados de tal forma
que os motores de busca consigam identificar o valor de uma palavra de acordo com
o sentido que foi escrito.
11. Quanto voc acha que o HTML5 poder ser uma nova possibilidade no
desenvolvimento de animaes?
a. Com certeza ser uma nova possibilidade
b. Provavelmente ser uma nova possibilidade
c. Poder ser uma nova possibilidade
d. Poder ou no ser uma nova possibilidade
e. Nunca ser uma possibilidade
12. Quanto voc acha que uma animao em HTML5 pode ser executada num
menor tempo em relao a uma mesma animao em Flash?
a. O tempo de carregamento muito menor
b. O tempo de carregamento ligeiramente menor
c. O tempo de carregamento igual
d. O tempo de carregamento moderamente maior
e. O tempo de carregamento muito maior
13. Quanto voc acha que o HTML5 contribui para tornar os sites mais
interativos?
87
a. Contribui muito d. Nem contribui / nem dificulta

b. Contribui consideravelmente e. No contribui
c. Contribui ligeiramente
14. A proposta do HTML 5 em inserir animaes nos sites, via JavaScript, com
ausncia de plugins, um fator relevante?
a. Muito relevante d. Pouco relevante
b. Moderadamente relevante e. Irrelevante
c. Nem relevante / nem desprezvel
Opcional
Caso queira fazer alguma observao ou dar sugestes:
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

PDF - Daniel Araújo de Lucena

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

PDF - Daniel Araújo de Lucena

Hochgeladen von

Copyright:

Verfügbare Formate

1

UNIVERSIDADE ESTADUAL DA PARABA

DANIEL ARAJO DE LUCENA

HTML5: NOVIDADES E CONTRIBUIES

DANIEL ARAJO DE LUCENA

HTML5: NOVIDADES E CONTRIBUIES

Monografia apresentada ao Curso de

Orientadora: Prof Msc. Ana Carolina Costa de Oliveira

L935h LUCENA, Daniel Arajo de

HTML5: novidades e contribuies, Patos - PB: UEPB, 2011.

Monografia (TRABALHO de Concluso de Curso -

1. Programao 2. Programao Web I.

A Deus, pela fiel e amorosa intercesso de Nossa

Na tentativa de reconhecer minhas incontveis fragilidades e minha busca,

A minha famlia, que mesmo em meio a tantos percalos, souberam mostrar-

Aos meus irmos Janicleide Arajo de Lucena, Isaac Arajo de Lucena e

Aos meus colegas de turma, que me acolheram ao voltar universidade

Agradeo tambm s empresas Magic Web, na pessoa de Antnio Borba;

Por fim, agradeo de forma sincera e enraizada no respeito e admirao,

No posso esquecer-me do amigo que Jesus me concedeu: Saulo Jnior

A sabedoria sem a graa inativa.

A nova verso da linguagem de Tim Berners-Lee, mesmo ainda em

Palavras-chave: HTML5; Web semntica; animaes.

Keywords: HTML5, Semantic Web; animations.

Figura 1 Dois computadores interconectados por um hub....................................17

Figura 48 Contribuio do HTML5 em tornar os sites mais interativos...................72

AJAX Asynchronous Javascript and XML

CAPTULO II FUNDAMENTAO TERICA ....................................................... 18

CAPTULO III PROCEDIMENTOS METODOLGICOS ....................................... 55

CAPTULO IV ANLISE DOS DADOS ................................................................. 61

CAPTULO V - CONSIDERAES FINAIS ............................................................. 74

O HTML5 (HyperText Markup Language - Linguagem de Marcao de

Em outras palavras, a W3C (World Wide Web Consortium - Consrcio da

Em 2006, a W3C reconheceu ter sido otimista de mais na adoo do XML.

Mesmo no concluda, esta especificao j traz consigo pilares que a tornam

Em tempos passados, uma tecnologia era suportada num determinado

Dessa forma, estando a informao melhor estruturada e descrita segundo o

Mais um aspecto tambm importante do HTML5 se relaciona com o fato de

Estes aspectos motivaram vrias empresas a desenvolverem verses de seus

Conhecido mundialmente como modelo de site para compartilhamento de

Segundo o diretor de tecnologia Jon Boutelle, essa substituio causou uma

Outra empresa que est utilizando o HTML5 a Google. A empresa de Larry

Ao passo que o HTML5 comea a ser difundido e utilizado no

1.1.1 Objetivo Geral

Mostrar algumas das novas contribuies do HTML5 no desenvolvimento de

1.1.2 Objetivos Especficos

Demonstrar como o HTML5 contribui para uma Web mais semntica;

Evidenciar o HTML5 como nova possibilidade no desenvolvimento de

Analisar se as contribuies citadas motivam os programadores a utilizarem o

1.2 ESTRUTURA DO TRABALHO

Esta monografia est estruturada da seguinte forma:

No Captulo 1 foram apresentados os aspectos introdutrios juntamente com

O Captulo 2 contm uma reviso bibliogrfica sobre a origem da Internet,

O Captulo 3 apresenta os procedimentos metodolgicos para realizao da

A anlise dos dados coletados dos desenvolvedores de sites das empresas

O Captulo 5 apresenta as consideraes finais do trabalho

A bibliografia apresenta a relao de todas as obras referenciadas nesta

CAPTULO II FUNDAMENTAO TERICA

Neste captulo apresenta-se a fundamentao terica que norteou a

2.1 O ADVENTO DA INTERNET

Aps a Segunda Guerra Mundial (1939-1945) os Estados Unidos e a Unio

Vale salientar que no existe um consenso sobre a data exata do incio da

Mesmo havendo controvrsias sobre o incio e o trmino da Guerra Fria, os

qualquer ferramenta nova, qualquer mecanismo ou inovao poderia contribuir