• Save
HTML 5 - TCC MARLLON BIANCHINI
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML 5 - TCC MARLLON BIANCHINI

  • 821 views
Uploaded on

Trabalho de Conclusão de curso, sistemas de informação 2012 - Uniguaçu. ...

Trabalho de Conclusão de curso, sistemas de informação 2012 - Uniguaçu.
Tema : HTML 5
Contato: bianchini.marllon@gmail.com

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
821
On Slideshare
821
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. UNIDADE DE ENSINO SUPERIOR VALE DO IGUAÇUFACULDADES INTEGRADAS DO VALE DO IGUAÇUCURSO DE SISTEMAS DE INFORMAÇÃOMARLLON GIOVANI BIANCHINIANÁLISE SOBRE A TECNOLOGIA HTML5, MOSTRANDO OSPRINCIPAIS PONTOS POSITIVOS E NEGATIVOS DA EVOLUÇÃO,BEM COMO MOSTRAR AS PRINCIPAIS NOVIDADESUNIÃO DA VITÓRIA2012
  • 2. 2MARLLON GIOVANI BIANCHINIANÁLISE SOBRE A TECNOLOGIA HTML 5, MOSTRANDO OSPRINCIPAIS PONTOS POSITIVOS E NEGATIVOS DA EVOLUÇÃO,BEM COMO MOSTRAR AS PRINCIPAIS NOVIDADESTrabalho de Conclusão de Curso apresentadoao curso de Sistemas de Informação dasFaculdades Integradas Vale do Iguaçu -UNIGUAÇU de União da Vitória - PR, paraobtenção do grau de Bacharel em Sistemas deInformação.Orientação: Prof. Rodolfo KuskoskiUNIÃO DA VITÓRIA2012
  • 3. 3ANÁLISE SOBRE A TECNOLOGIA HTML5, MOSTRANDO OSPRINCIPAIS PONTOS POSITIVOS E NEGATIVOS DA EVOLUÇÃO,BEM COMO MOSTRAR AS PRINCIPAIS NOVIDADESporMARLLON GIOVANI BIANCHINITrabalho de Conclusão de Curso aprovado com nota 10, para obtenção do grau deBacharel em Sistemas de Informação, pela Banca examinadora formada por:Prof. Rodolfo KuskoskiOrientadorProf. Andréa TomkoMembroProf. André WeizmannMembroRESULTADO : APROVADOUNIGUAÇU: 09/11/2012
  • 4. 0AGRADECIMENTOSAgradeço a Deus pela vida que tenho. Agradeço também, a minha família e aosamigos por compreenderem minhas ausências durante o período de trabalho de conclusão decurso e o apoio ofertado, me convidando para churrascos e confraternizações em que eu nãopude comparecer devido ao tempo dedicado a esse trabalho.Agradeço ao meu pai e mãe, pela comida, além da ajuda financeira fornecida durantea faculdade.Um agradecimento especial a minha namorada vulgo momozão, digo May, por meajudar nas dificuldades e entender a ausência nos momentos de estudo, muito companheira equerida, um amorzinho.A minha chefe por permitir que eu fica-se durante o horário de almoço estudando edesenvolvendo este trabalho.Aos professores que durante esses quatro anos contribuíram no meu crescimentoprofissional e acadêmico. Um agradecimento ao meu orientador pela liberdade na elaboraçãodesse trabalho.
  • 5. 1“Confie na sua intuição e busque respostas para as suas próprias perguntas.”Flávio Fachel, 2011
  • 6. 2LISTA DE FIGURASFigura 1 – Declaração cabeçalho. ......................................................................................................... 16Figura 2 – Exemplo de código para uma pagina em html..................................................................... 18Figura 3 –Execução pagina html........................................................................................................... 19Figure 4 – Doctype em html 4.01.......................................................................................................... 26Figura 5 – Doctype em HTML5............................................................................................................ 26Figure 6 – Charset em HTML 4.01....................................................................................................... 26Figura 7 – Declaração Charset em HTML5.......................................................................................... 27Figura 8 – Esquema lógico de uma pagina ........................................................................................... 28Figura 9 – Código Header..................................................................................................................... 29Figura 10 – Execução Header ............................................................................................................... 29Figura 11 – Código section com header................................................................................................ 30Figura 12 – Execução section e header ................................................................................................. 30Figura 13 – Código nav com lista ordenada.......................................................................................... 31Figura 14 – Execução nav..................................................................................................................... 31Figura 15 – Código Article.................................................................................................................... 32Figura 16 – Execução Article................................................................................................................ 33Figura 17 – Código Aside ..................................................................................................................... 34Figura 18 – Execução Aside.................................................................................................................. 34Figura 19 – Código Footer. ................................................................................................................... 35Figura 20 – Execução Footer. ............................................................................................................... 36Figura 21 – Código Hgroup .................................................................................................................. 37Figura 22 – Execução Hgroup............................................................................................................... 37Figura 23 – Código Áudio..................................................................................................................... 39Figura 24 – Execução áudio.................................................................................................................. 39Figura 25 – Exemplo código Video formato MP4................................................................................ 41Figura 26 – Execução MP4................................................................................................................... 41Figura 27 – Código Figure e FigCaption .............................................................................................. 42Figura 28 – Execução Figure e Figcaption............................................................................................ 43Figura 29 – Codigo Marcação Bloco Figure e FigCaption ................................................................... 43Figura 30 – Execução Bloco Figure e Figcaption................................................................................. 44Figura 31 – Codigo Search.................................................................................................................... 45Figura 32 – Execução Search................................................................................................................ 46Figura 33 – Exemplo search em execução............................................................................................ 46Figura 34 – Código para Tel com Placeholder e Pattern....................................................................... 47Figura 35 – Execução Tel...................................................................................................................... 48Figura 36- Execução Tel mostrando erros ............................................................................................ 49Figura 37 – Código URL....................................................................................................................... 50Figura 38 – Execução simples URL...................................................................................................... 50Figura 39 – Execução URL com formato invalido ............................................................................... 51Figura 40 – Código Range .................................................................................................................... 52Figura 41- Execução Range .................................................................................................................. 53
  • 7. 3Figura 42 – Código email...................................................................................................................... 54Figura 43 – Execução Email simples .................................................................................................... 54Figura 44 – Execução Email com erro.................................................................................................. 55Figura 45- Código Number ................................................................................................................... 56Figura 46 – Execução Number.............................................................................................................. 57Figura 47 – Codigo Date Time.............................................................................................................. 58Figura 48 – Execução Date Time.......................................................................................................... 58Figura 49 – Código Date....................................................................................................................... 59Figura 50 – Execução Date ................................................................................................................... 60Figura 51 – Código Month.................................................................................................................... 61Figura 52 – Execução Month ................................................................................................................ 61Figura 53 – Codigo Week ..................................................................................................................... 62Figura 54 – Execução Week.................................................................................................................. 63Figura 55 – Código Time ...................................................................................................................... 64Figura 56 – Execução Time .................................................................................................................. 64Figura 57 – Código Datetime Local...................................................................................................... 65Figura 58 – Execução DateTimeLocal.................................................................................................. 65Figura 59- Código Color ....................................................................................................................... 66Figura 60- Execução Color Chrome e Opera........................................................................................ 67Figura 61 – Execução Color Ie, safari e Firefox ................................................................................... 67Figura 62 – Pagina do Google............................................................................................................... 69Figura 63- Código Autofocus................................................................................................................ 69Figura 64- Exemplo de execução autofocus.......................................................................................... 70Figura 65 – Código exemplo min e max............................................................................................... 71Figura 66- Execução Min e Max........................................................................................................... 71Figura 67- Código Multiple................................................................................................................... 72Figura 68 – Execução simples doMultiple............................................................................................ 72Figura 69 Execução Detalhada multiple ............................................................................................... 73Figura 70 – Código Required com Pattern............................................................................................ 74Figura 71 – Execução Pattern com Placeholder.................................................................................... 74Figura 72 – Código Step........................................................................................................................ 75Figura 73 – Execução Step.................................................................................................................... 76Figura 74 – Código Placeholder............................................................................................................ 77Figura 75 – Execução Placeholder........................................................................................................ 77Figura 76- Código Required.................................................................................................................. 78Figura 77- Execução Required.............................................................................................................. 79Figura 78 – Código Datalist .................................................................................................................. 80Figura 79- Execução Datalist................................................................................................................ 80Figura 80 – Código Details e Summary................................................................................................ 81Figura 81 – Execução Details e Sumarry no Chrome ........................................................................... 82Figura 82- 2ª Execução Details e SummaryChrome............................................................................. 82Figura 83 – Execução Details e Summary dando erro. ......................................................................... 83Figura 84- Código Textarea com Spellcheck........................................................................................ 84Figura 85- Execução Spellcheck........................................................................................................... 85Figura 86- Código Meter....................................................................................................................... 86
  • 8. 4Figura 87 – Execução Meter com Sucesso............................................................................................ 86Figura 88- Execução com problemas.................................................................................................... 87Figura 89 – Código Progress................................................................................................................. 87Figura 90 – Execução Progress............................................................................................................. 88
  • 9. 5LISTA DE TABELASTabela 1 – Comparativo Motores de renderização e navegadores............................................24Tabela 2 – Atributo Áudio........................................................................................................38Tabela 3 – Atributo Vídeo........................................................................................................40
  • 10. 6LISTA DE SIGLASAPI - Application Programming InterfaceARPA - Agencia de Projetos de Pesquisas AvançadasARPANET – Advanced Research Projects Agency NetworkCERN - Center for Nuclear PhysicsCSS - Cascatyng Style SheeDOM – Document Object ModelHTML - Hyper Text Markup LenguageHTTP - Hipertext Transfer ProtocolIETF - Internet Engineering Task ForceITCP - Internet Transmition Control ProgramNGLayout - Next Generation LayoutOMG - Object Management GroupRIA – Rich Internet ApplicationSGML - Standard Generalized Markup LanguageTCP/IP - Transmission Control Protocol/Internet ProtocolURI - Universal Resource IndentifierURL - Universal Resource LocatorW3C - World Wide Web ConsortiumXHTML - EXtensibleHyperText Markup LanguageXML – Extensible Markup Language
  • 11. 7RESUMOBIANCHINI. Marllon. Giovani. Análise sobre a tecnologia HTML5, mostrando osprincipais pontos positivos e negativos da evolução, bem como mostrar as principaisnovidades. Trabalho de Conclusão de Curso. Sistemas de Informação, Faculdade Integradasdo Vale do Iguaçu – União da Vitória – Paraná - 2012O HTML (Hyper Text Markup Lenguage) é uma linguagem de marcação de texto,criada no inicio da década de 1990 por TIM BERNERS LEE e que agora esta chegando a suaquinta versão, devido a necessidade de que uma linguagem acompanhe os novos padrões emque a internet encontra-se atualmente.Dois grupos são responsáveis por essa nova especificação o W3C - (W3C - WorldWide Web Consortium) e WHATWG (Web Hypertext Application Technoly Working Group)que buscam alcançar uma padronização na forma como a linguagem é escrita sem deixar deoferecer suporte as versões anteriores. De modo com que os desenvolvedores fazem com queo usuário consiga acesso as informações, independente de dispositivo de acesso, dependendoapenas de um navegador atualizado.Os desenvolvedores buscam promover uma maior integração entre o código fonte e onavegador, dispensando a necessidade da instalação de plug-ins. Onde com a chegada dosnovos elementos de marcação é possível que os mecanismos de busca possam identificar commaior facilidade as seções de uma página.Aplicações como validações de formulários, execução de áudio e vídeo, tem execuçãonativa, dependendo apenas do navegador estar atualizado e oferecer suporte a esses recursos.Palavras Chaves: APLICAÇÕES, CÓDIGO, HTML5, NAVEGADOR,DESENVOLVIMENTO;
  • 12. 8ABSTRACTBIANCHINI. Marllon. Giovani. Analysis of the technology HTML5, showing the mainstrengths and weaknesses of evolution as well as the main news show. Work completionof course. Information Systems, Faculty of Integrated Vale do Iguaçu - Union City -Paraná - 2012HTML (Hyper Text Markup Lenguage) is a markup language text, created at thebeginning of the 1990s by Tim Berners Lee and now is coming to its fifth version, becausethe need for a language that accompanies the new standards that internet is today.Two groups are responsible for this new specification, the W3C (W3C - World WideWeb Consortium) and WHATWG (Web Hypertext Application Working Group Technoly)seeking to achieve a standardization in the way the language is written while supportingprevious versions. So that developers make the user able to access information regardless ofaccess device, depending only a web browser.Developers seek to promote greater integration between the source code and thebrowser, eliminating the need to install plug-ins. Where the arrival of the new markupelements is possible that search engines can more easily identify the sections of a page.Applications and validations forms, running audio and video, has native execution,depending only on the browser being updated and support these resources.Keyword: APLICATION, BROWSER, CODE, HTML5, DEVELOPERS
  • 13. 9SUMÁRIO1. INTRODUÇÃO...............................................................................................................111.2 Objetivos....................................................................................................................121.2.1 Objetivo geral.........................................................................................................121.2.1 Objetivos específicos..............................................................................................122. REFERENCIAL TEÓRICO..........................................................................................142.1 A Evolução da Internet ..............................................................................................142.1.1 TCP/IP......................................................................................................................152.1.2 O Protocolo HTTP ...................................................................................................152.1.3 URL..........................................................................................................................162.1.4 Word Wibe Web.......................................................................................................162.2 O surgimento do Html e a interação com outras linguagens ..........................................172.2.1 HTML.......................................................................................................................172.2.2 XML – eXtensible Markup Language .....................................................................192.2.3 XHTML....................................................................................................................192.2.4 CSS – Cascatyng Style Sheet..................................................................................202.2.5 RIA – Rich Internet Application..............................................................................202.2.6 Javascript..................................................................................................................202.3 O Grupo de pesquisas W3C............................................................................................212.3.1 Web Semântica.........................................................................................................212.3.2 DOM –Document Object Model..............................................................................222.4 Whatwg...........................................................................................................................232.5 Motores de Renderização................................................................................................233 HTML5................................................................................................................................253.1 Declaração Doctype........................................................................................................253.2 MetaCharset....................................................................................................................263.2.1 ISO 8859-1 ..............................................................................................................273.3 Elementos de marcação...................................................................................................273.3.1 Header ......................................................................................................................283.3.2 Section......................................................................................................................303.3.3 Nav ...........................................................................................................................313.3.4 Article.................................................................................................................323.3.5 - Aside ......................................................................................................................333.3.6 - Footer.....................................................................................................................353.3.7-Hgroup .....................................................................................................................363.4 Multimídia ......................................................................................................................373.4.1 Áudio........................................................................................................................38
  • 14. 103.4.2 Vídeo........................................................................................................................403.4.3 Figure e Figure Caption ...........................................................................................423.5 Novos campos para formulários .....................................................................................443.5.1 Search.......................................................................................................................453.5.2 Tel.............................................................................................................................473.5.3 URL..........................................................................................................................493.5.4 Range........................................................................................................................523.5.5 Email ........................................................................................................................533.5.6 Number.....................................................................................................................563.5.7 Date Time.................................................................................................................573.5.8 Date .........................................................................................................................593.5.9 Month .......................................................................................................................603.5.10 Week.......................................................................................................................623.5.11 Time ......................................................................................................................633.5.12 Date Time-Local ....................................................................................................653.5.13 Color.......................................................................................................................663.6- Validação dos formulários.............................................................................................683.6.1 AutoFocus ................................................................................................................683.6.2 Mínimo e Máximo....................................................................................................703.6.3 Multiple....................................................................................................................713.6.4 Pattern.......................................................................................................................733.6.5 STEP.........................................................................................................................753.6.6 Maxlenght.................................................................................................................763.6.7 Placeholder...............................................................................................................763.6. 8 - Required................................................................................................................783.7 - Atributo Data list ..........................................................................................................793.8 Sumary e Details.............................................................................................................813.9 - Conteúdo editável.........................................................................................................843.10 Spellcheck.....................................................................................................................843.11 Meter.............................................................................................................................863.12 Progress........................................................................................................................873.13 Elemento Canvas ..........................................................................................................883.13.1. BIBLIOTECA MODERNIZR ..............................................................................893.14 GEOLOCALIZAÇÃO..................................................................................................894. CONCLUSÃO.....................................................................................................................905. REFERÊNCIAS .................................................................................................................926.GLOSÁRIO..........................................................................................................................96
  • 15. 111. INTRODUÇÃOO avanço da internet nos últimos anos fez com que novas tecnologias aparecessem.Surgem, então, ferramentas com a função de suprir as necessidades e acompanhar essesavanços tecnológicos.Surge então o HTML5, visando facilitar e reduzir os custos de desenvolvimento desites e aplicações web, além de estabelecer novos padrões de trabalho. Incentivados pela W3C– World Wide Web Consortium, grupo de pesquisas formado por grandes empresas comoApple, Google, Mozilla Foundation, Microsoft e outras empresas, além de uma junção com oWHATWG (Web Hypertext Application Technoly Working Group) um grupo de trabalho paratecnologias de hipertexto em aplicações para WEB. Onde ambos os grupos tem como objetivopromover uma mudança e padronização na linguagem HTML(Hyper Text Markup Lenguage).Buscando no processo de criação do documento fazer com que haja uma estruturação maissimples, de forma padrão nas paginas de internet.Com a criação de tags especificas para cada sessão da página, como cabeçalho,conteúdo, propaganda e rodapé. Promovendo uma melhor organização, visando facilitarprincipalmente o trabalho do desenvolvedor, além de facilitar a vida dos mecanismos debuscas, promovendo assim uma melhor semântica a página.Uma das grandes novidades no HTML5 é a possibilidade do usuário utilizar osrecursos mais recentes de áudio e vídeo de forma mais simples. Tanto na parte do usuário queira usufruir dessas tecnologias, dispensando a instalação de plug-ins e ferramentas paravisualização do arquivo, quanto na parte do desenvolvedor que não precisara ficar buscandopossíveis alternativas para o desenvolvimento, apenas focando no formato do conteúdo.O HTML5 é a versão mais recente do HTML, e entre suas principais vantagens está háinteração com as mais diversas plataformas de acesso, sendo elascomputadores, tablets, smartphones entre outros dispositivos com acesso a internet. Fazendocom que haja um acesso quase universal as vantagens oferecidas pela linguagem, dependendoapenas do usuário ter um navegador atualizado e que venha a oferecer suporte a linguagem.Outra mudança do HTML5 é na forma de armazenamento e execução de programasque venham a exigir a transferência, inserção e validação de dados. Tornando muito maissimples a criação de elementos para a validação de campos para os formulários. Onde onavegador fica responsável pela validação dos dados, dependendo apenas do tipo de validação
  • 16. 12programada, em alguns casos dispensando até a necessidade de criação de um tipo devalidação através de javascript. Tudo isso através da API(Application ProgrammingInterface) responsável pelo controle e inserção dos dados, que varia de navegador paranavegador, boa parte dos navegadores já vem oferecendo recurso a esses tipos de aplicações.A inclusão do elemento canvas junto ao HTML5 é outra importante mudança, fazendocom que seja possível realizar a criação e manipulação de imagens através de Pixels,controlados a partir de API javascript, inseridos no documento da página. Além dapossibilidade de criação de conteúdos mais interativos ao usuário, como a criação deaplicações editáveis, correção ortográfica, geolocalização e menus interativos.1.1 JustificativaPor se tratar de uma linguagem em desenvolvimento, ainda sem uma versão final,proporciona muitos pontos a serem explorados, como por exemplo, as principaiscaracterísticas da nova tecnologia, bem como as principais melhorias e novidades.1.2 Objetivos1.2.1 Objetivo geralRealizar uma análise sobre a linguagem HTML5, mostrando as principais novidades,assim como as melhorias decorrentes da evolução.1.2.1 Objetivos específicos-Coletar e apresentar dados sobre compatibilidade da nova linguagem junto aos navegadores.-Analisar os benefícios em relação a integração com outras tecnologias.-Apresentar as melhorias da tecnologia se comparado a versões anteriores.
  • 17. 131.3 Metodologia da PesquisaEstudo cuja pesquisa se enquadra como bibliográfica, pois busca dados e conseqüentesinformações sobre o objetivo geral proposto, em dados secundários, ou seja, já publicados emlivros, revistas, artigos científicos, entre outros, impressos ou digitais. Esta pesquisa tambémse enquadra como qualitativa e exploratória, pois busca, através de exemplos práticas, afirmaros conceitos vistos no referencial teórico.
  • 18. 142. REFERENCIAL TEÓRICO2.1 A Evolução da InternetTeve início com a criação da ARPA (Agencia de Projetos de Pesquisas Avançadas) dodepartamento de defesa dos Estados Unidos no ano de 1957, com a finalidade de desenvolverpesquisas e gerar ideias para a criação de novas tecnologias. No inicio do ano de 1960, JosephLiklider fez uma publicação, onde ele argumentava a ideia de que computadores em poderiampromover consulta a informações e fornecer armazenamento de dados. Mais tarde no ano de1962, foi criado o grupo de pesquisas (ARPANET –Advanced Research Projects AgencyNetwork) que tinha como finalidade de realizar pesquisas em computadores, no ano de 1967começaram a aparecer alguns resultados das pesquisas, e então no ano de 1969 uma redeformada por quatro computadores estava formada, pronta e funcionando.“A ARPANET era uma rede de pesquisa que foi criada pelo Departamento de defesados Estados Unidos. Pouco a pouco, centenas de universidades e repartições públicas foramsendo conectadas a ela através de linhas telefônicas privadas.”(TANENBAUM, pg.39)Porem haveria um problema, conectar redes físicas de maior distancia, e então foidesenvolvida uma solução que era a de que deveriam ser enviadas em pequenas parteschamadas de pacotes. Entretanto devido ao avanço de tal tecnologia, começaram a apareceroutros problemas, como fazer com que redes separadas se comunicassem.Foi então que no ano de 1974, Robert Kahum, pesquisador da ARPA em parceira comVinton Cerf, desenvolveram um rascunho de um protocolo que com recebia o nome de ITCP-“Internet TransmitionControlProgram”-“Programa de controle de transmissão entre redes”que tinha como principal função mascarar a diferença entre os protocolos de rede, fazendocom que se comunicassem assim através de um novo padrão, reduzindo assim o papel da redee movendo uma maior responsabilidade ao servidor na transferência de pacotes.Então após uma série de pesquisas, no ano de 1982, surgia o protocolo “TCP/IP”,sendo reconhecido internacionalmente e tornando-se protocolo padrão da ARPA paratransferência de dados, possibilitando a conexão entre as maquinas. Esse protocolo é utilizadoaté os dias atuais.Mais tarde no final da década de 80, incentivada pelo crescente numero decomputadores pessoais, a internet já começava a se consolidar, então foi ai que Tim Berners-
  • 19. 15Lee veio a propor um projeto onde de hypertext para transmissão de conteúdo entrepesquisadores espalhados por diferentes locais.“A Web nasceu da necessidade de se fazer com que grupos de cientistas de diferentesnacionalidades pudessem colaborar uns com os outros através da troca de relatórios, plantas,desenhos, fotos e outros documentos.” (TANENBAUM, pg.778).Esse projeto ficou conhecido como Word Wide Web, onde inicialmente é a estruturaque permite o acesso a documentos vinculados a internet. Porem só veio a entrar emfuncionamento em meados dos anos 1990 à 1991, com o surgimento do Hypertext que era ainterface para navegação e publicação destas informações .2.1.1 TCP/IPÉ dividido em camadas, cada uma com tarefas específicas, sendo divido em TCP e IP.IP é o responsável pelo endereçamento dos pacotes de dados para os demais protocolos. Já oTCP é quem garante a continuidade do fluxo de informação, cuidando para que o processovenha a ocorrer sem maiores problemas.Os elementos que formam a base da internet são o modelo de referênciaTCP/IP epilha de protocolos TCP/IP possibilitando a criação de um serviçouniversal[..]uma maquina pertence á internet quando ela executa a pilha deprotocolos TCP/IP, tendo um endereço IP e podendo enviar pacotes IP atodas as outras maquinas da Internet. (TANENBAUM, pg.60)2.1.2 O Protocolo HTTPÉ um protocolo de comunicação que trabalha na camada de aplicação, o seufuncionamento é definido através de dois tipos de mensagens:- Request (Pedido): é responsável por realizar a chamada através de uma urlexemplo:http://www.uniguacu.edu.br.- Response (Resposta) é a mensagem que é enviada pelo servidor em resposta a solicitaçãogerada pelo cliente.
  • 20. 16De acordo com Albuquerque a comunicação entre servidores e navegadoresocorre através de regras definidas no HTTP, onde o mesmo vem a utilizar oprotocolo TCP para realizar o transporte e estabelecer a conexão. Asconexões são iniciadas pelos navegadores que enviam o pedidoe encerradaspelo servidor após o envio da resposta.(TCP /IP – Internet: Procolos&Tecnologias, pg 268)2.1.3 URLTrabalhando em cima do protocolo HTTP, a URL tem a função de realizar asolicitação de uma página web. Segundo (FORMAGGIO pg.45) uma URL é composta porum protocolo, o domínio e a URI. Onde o protocolo será o “HTTP”, o domínio será aqueleconhecido como endereço do site e a URI será a estrutura ou nome dos documentos quecompõem a URL.Figura 1 – Declaração cabeçalho.Fonte :Formaggio Pg. 45Um Browser envia uma requisição HTTP para uma URL especifica, e oservidor, hospedando aquela URL, envia de volta uma resposta HTTP.[...] oprotocolo usa um formato simples em texto puro. Os tipos de requisição sãoGET(obter), POST (enviar), HEAD (cabeçalho), PUT(colocar),DELETE(apagar), OPTIONS(opções) e TRACE (depurar). (SOUDERS,CapituloB- Visão Geral do HTTP)2.1.4 Word Wibe Web
  • 21. 17As Pesquisas tiveram inicio a partir no ano de 1990 por pesquisadores do CERN(Center for Nuclear Physics), onde Tim-Berners-Lee era o responsável por conduzir aspesquisas, que tinham por finalidade realizar uma troca de documentação entre pesquisadoresespalhados por diferentes locais.“A Word Wide Web é composta por servidores que armazenam documentos escritosem uma linguagem de formatação e por programas, chamados de navegadores, que sabeminterpretar esses documentos.”(ALBUQUERQUE, pg 267)2.2 O surgimento do Html e a interação com outras linguagensO HTML(HyperTextMarkupLenguage) pode ser caracterizado como uma linguagempara marcação de texto. Surgiu no ano de 1990, criado por Tim Berners-Lee que tinha comofoco a ideia de promover a troca de conteúdo eletrônico entre pesquisadores espalhados pordiferentes locais.2.2.1 HTMLFoi criado um protótipo de navegador que inicialmente veio a receber o nome de WordWide Wibe, com a ideia de promover a troca de conteúdo através de Links Globais,trabalhando em cima de um protocolo HTTP (Hyper Text Transfer Protocol). Utilizava ospadrões da SGML (Standard Generalized Markup Language) e então no ano de 1990 nasestações de trabalho da antiga CEO da Apple, foi realizada uma troca de arquivos eletrônicosatravés de hyper-marcação de texto, dando inicio assim a era WEB.O HTML veio a passar por uma série de revisões e alterações, durante o seu processode evolução, inicialmente no ano de 1995 foi criado o HTML workgroup, que tinha comoparticipantes a NCSA, Mosaic e IETF, foram eles os responsáveis pela conclusão do HTML2.0 e inicio da utilização do Javascript nas paginas. Mais tarde no ano de 1996 surge o grupode pesquisas da W3C e com ele vem a evolução, surgindo assim o HTML 3.2, que tinha comoprincipal novidade a introdução de recursos gráficos.
  • 22. 18Uma linguagem de marcação é usada para definir como o conteúdo de umdeterminado documento deve ser exibido, ou seja, ás paginas apresentamuma série de formações definida pelo autor e o browser se encarrega detransformar esta formatação, até então contida apenas em código, em algomais adequado para leitura e visualização. (SILVA pg. 22)No ano de 1999 surge o HTML 4.01 e com ele veio a introdução do CSS(CascatyngStyleShee) com a finalidade de prover uma melhor aparência e visualização daspáginas. No ano de 2000 o grupo de pesquisas W3C começa um trabalho de pesquisas e lançao XHTML que é a combinação da linguagem de marcação HTML com o XML.Posteriormente no ano de 2002 devido ao sucesso, o grupo continuou suas pesquisas oXHTML recebe uma atualização, que entre suas principais vantagens trás a independência dedispositivo, utilizando as sintaxes do XML aplicadas com as funcionalidades do HTML.O WHATWG surgiu em 2004, por um grupo de empresas descontentes com os rumosque a web vinha tomando . Em meados de 2006 e 2007 o grupo foi oficialmente reconhecidopela W3C e mais tarde Tim Berners Lee anunciou que trabalharia junto com o WHATWG nacriação do HTML5.O HTML é uma linguagem de marcação, que tem como função descrever a estrutura eo conteúdo, sendo representado através de TAGS, as quais são responsáveis pela formataçãodos documentos. Através dessas representações é possível a exibição de diversos recursoscomo áudio, texto, foto, vídeo, gráficos entre outros. O HTML é representado através de tag ecada tag pode conter um comando, atributo ou valor.Pode-se observar abaixo na figura02, um exemplo de código fonte de uma pagina.Figura 2 – Exemplo de código para uma pagina em htmlFonte : O AutorEm seguida na figura 03, pode-se observar um simples exemplo de uma pagina deinternet sem nenhum tipo de conteúdo agregado a ela.
  • 23. 19Figura 3 –Execução pagina htmlFonte: O Autor2.2.2 XML – eXtensible Markup LanguageDesenvolvida com a finalidade de solucionar as limitações do HTML, sendo umameta-linguagem orientada para a descrição de conteúdos. Sua forma de utilização é voltadapara a introdução de informações especificas se relacionadas com o contexto em que sãoutilizadas.A XML é um método para estruturar dados. São exemplos de dadosestruturados os elementos de uma planilha, cadernetas de endereços,parâmetros de configuração, transações financeiras, desenhos técnicos, entreoutros[...], ela torna simples para o computador gerar e ler dados, e garantirque sua estrutura não seja ambígua. (MACEDO, pg.04)2.2.3 XHTMLSurgiu com o conceito de reformulação da linguagem HTML. Sua ação melhora apadronização da exibição das páginas WEB.“O XHTML é o html em formato XML(Extensible Markup Language).”(SILVA, pg.23)Consequentemente promove uma melhoria na acessibilidade, melhorando a velocidade nasrespostas e no desenvolvimento de aplicativos.
  • 24. 202.2.4 CSS – Cascatyng Style SheetTrata- se de uma linguagem que é responsável por escrever e descrever a apresentaçãode páginas web, como se fosse uma folha de estilos. Definindo de forma personalizada ainclusão dos mais diversos tipos de formatação de uma página como a definição de cores,fontes e o layout.“Com a utilização do CSS, passamos a ter a HTML/XHTML preocupando-se somente emestruturar o documento em blocos de informação (Títulos, Cabeçalhos, parágrafos, etc)enquanto o CSS controla o design (posicionamento, cores, fontes, etc).”(MACEDO, Pg07).Trabalha como um complemento ao HTML, de forma independente, sendo utilizadacomo linguagem de marcação. É ela a responsável por promover a separação de um conteúdoe o formato de um documento.2.2.5 RIA – Rich Internet ApplicationBusca combinar a interatividade e funcionalidade dos sistemas que rodam em desktopcom a abrangência e flexibilidade dos sistemas web, promovendo a união das duasplataformas em um único meio. Dessa Maneira o usuário não ficará refém de um sistemaoperacional especifico a ser instalado, fazendo com que o sistema venha a trabalhar em cimade plataforma HTML. Promovendo uma maior portabilidade ao usuário. Deslocando parte doprocessamento para a máquina do usuário, de modo com que o servidor não se sobrecarregue,tornando assim a Web igual ao desktop.2.2.6 JavascriptÉ uma linguagem de programação de código aberto e trabalha em conjunto com oHTML, sendo utilizada como complemento, é utilizada na criação de páginas web.A sua arquitetura baseada em objetos permite realizar uma ampla variedadede funções, como validar dados de entradas de usuários, acrescentarelementos interativos [..] a vantagem da utilização do javascript é de ele ser
  • 25. 21executado no lado do cliente, ou seja, pelo navegador do usuário.(MACEDO, pg.203)A presença dos scripts é identificada em um código através de tags, onde para iniciar éutilizado a tag <SCRIPT> e para fechar a tag </SCRIPT>. Dentro de um mesmo documentoHTML podem existir múltiplos scripts.2.3 O Grupo de pesquisas W3CW3C (World Wide Consortium) teve o inicio de suas atividades no ano de 1994, e éresponsável por estabelecer os padrões na interpretação e desenvolvimento de conteúdos web,ela estipula que sejam seguidos alguns padrões pré-estabelecidos de maneira universalfazendo com que qualquer individuo ou tecnologia independente de hardware/softwareconsiga visualizar o conteúdo, e ainda sugere que novas tecnologias venham a seguir essesnovos padrões, defende que a tecnologia tenha um padrão universal assim facilitando amaneira como seus códigos sejam entendidos, dentre os principais utilizadores desse padrãopode-se citar o HTML5, XHTML e CSS. Sugere-se que sejam respeitados alguns pré-requisitos: Compatibilidade, utilidade, interoperabilidade e acesso universal.“A Sigla W3C significa Word Wide Web Consourtiom e é usada para definir o ConsórcioInternacional responsável pelo desenvolvimento, implantação e regulamentação daslinguagens pertinentes a internet.” (Silva, Pg.24).O termo compatibilidade, segundo a W3C, vem a defender que as paginas venhamoferecer suporte a conteúdos já existentes, ou seja aqueles conteúdos desenvolvidos emversões anteriores, devem ser lidos em versões mais recentes, de maneira com que venha arodar em todas as plataformas.“Visa garantir que a marcação HTML possa ser usada de modo efetivo para todos osfins que ela se destina”.(Silva, Pg.32). Visando promover o acesso universal ao usuárioindependente de tecnologia utilizada para acessar o conteúdo publicado.2.3.1 Web Semântica
  • 26. 22A Web Semântica foi desenvolvida com a finalidade de estruturar o conteúdosignificativo das páginas web. Tem como principal objetivo permitir o compartilhamento dedados e utilizá-los nas mais diversas aplicações, apresentando- as para usuários, auxiliando osagentes de software na busca de informações varrendo os conteúdos das paginas WEB,usando mecanismos semânticos, promovendo a automatização das pesquisas.Segundo o Site da W3C.BR(2012) “Foi criada com o objetivo de interconectarperfeitamente a administração de informações pessoais, integrar aplicações em empresas ecompartilhar dados comerciais, científicos e culturais em escala global”.O responsável por grande parte da pesquisa é o W3C. Inicialmente a ideia da WebSemântica surgiu no ano de 2001, em um artigo publicado na revista Scientific American, eque recebia o seguinte titulo “Web Semântica: um novo formato de conteúdo para a Web quetem significado para computadores vai iniciar uma revolução de novas possibilidades.” escritopor Tim Berners-Lee, James Hendler e Ora Lassila publicaram um artigo na revista. Oconceito surge com a ideia de comportar a web como um todo e não mais um monte deinformação espalhada e sem finalidade, apresentando assim um novo passo nodesenvolvimento da internet, incentivado principalmente pela organização do conteúdo etambém pela interação inteligente dos usuários com o material disponível na web. Ela utilizade dois mecanismos para promover a buscas;Um Exemplo de utilização da Web Semântica:Espera-se que, um exemplo de uma busca, no Google por “Pastelaria em União daVitória” também apresente resultados relacionados a táxi, telefones para delivery, receitas,preços dos pasteis, cardápios, sites para compra on-line e etc. Ou seja, informaçõescomplementares e relevantes para o internauta também serão oferecidas automaticamentepelos sites de busca.2.3.2 DOM –Document Object ModelPode-se caracterizar o DOM como uma interface de programação de aplicativos paradocumentos HTML, XHTML e XML.DOM é uma especificação do W3C que cria uma maneira, independente daplataforma e da linguagem, de acessar e alterar o conteúdo e a estrutura do
  • 27. 23documento[...]foi baseado nas especificações do Object Management Group,o que lhe permite ser usado com qualquer linguagem deprogramação.(ASLESSON&SCHUTTA, Pg.37)Segundo o site da W3C/DOM:(2012)“O DocumentObjectModel é uma interface de plataforma e linguagem neutra, quepermite que a programas e scripts dinamicamente acessarem e atualizarem o conteúdo,estrutura e estilo de documentos”.2.4 WhatwgWHATWG significa Web Hypertext Application Technoly Working Group (Grupo detrabalho para Tecnologias de hipertexto em aplicações para WEB). Foi criado no ano de 2004por um grupo de desenvolvedores da Apple, Mozilla Foundation e por programadores doOpera. Inicialmente esse grupo tinha como principais objetivos o desenvolvimento doHTML5, Web Forms 2.0 e Web Controls 1.0. Sendo que o HTML 5 é o único ainda emandamento, devido ao fato do Web Forms 2.0 ter sido agregado ao w3c e o Web Controlsdescontinuado.“O WHATWG desenvolve a HTML5 em conjunto com o W3C[..]a versãodo WHATWG é menos restrita do que a versão do w3c.Por exemplo: emvários itens da especificação, apresenta exemplos ilustrativos e informaçõessobre suporte da funcionalidade descrita[..]Essas informações adicionadasnão constam da versão do W3C.”(Silva.M.S, pg.26).2.5 Motores de RenderizaçãoDesde o início da criação da internet o principal objetivo é a publicação de arquivos ea troca de informações, em ambiente de rede virtual. Porém devido a grandes avançostecnológicos e surgimento de tecnologias voltadas para a web, as páginas passaram a ter cadavez mais importância no cotidiano das pessoas.Inicialmente os navegadores ofereciam apenas informações no formato do texto demaneira pouco interativa e de fácil compreensão aos usuários. Porem com o aprimoramentodas linguagens de programação web e surgimento de novos aplicativos, estimulada pelo
  • 28. 24crescente aumento de pessoas com acesso a internet e maior quantidade de dispositivos paraacesso a rede, surge então a necessidade de que os browsers viessem a disponibilizar maisrecursos e melhores condições para tornar o acesso mais simples, interativo e queconseguissem acompanhar o desenvolvimento dessas novas tecnologias.Com o aumento da compatibilidade dos navegadores, estimulada por parceiros como aW3C e WHATWG, o HTML5 vem ganhando maior padronização na codificação e evoluçãodos browser. “Cada navegador tem um motor de renderização [..], então cada um vai tratarseus códigos a sua maneira. Até mesmo os clientes de email possuem seus motorespróprios.”( w3tricks, 2012)Basicamente pode-se dizer que os motores web tem a função de interpretar linhas decódigos, marcações, funções, cookies, links, scripts e ainda são responsáveis pelocarregamento dos plug-ins para as paginas web.“Há uma grande diversidade de dispositivos que acessam a internet. Entreeles, há uma série de tablets, smartphones, pcs e etc. Cada um destes meiosde acesso utilizam um determinado browser para navegar na web. Não hácomo os desenvolvedores manterem um bom nível de compatibilidade comtodos estes browsers levando em consideração a particularidade de cada um.Uma maneira mais segura de manter o código compatível, é nivelar odesenvolvimento pelos motores de renderização. Cada browser utiliza ummotor de renderização que é responsável pelo processamento do código dapágina.” (W3C, 2011)Atualmente os principais motores são o Gecko, Presto,Webkit e o trident, todos elesem atividade.A seguir na tabela 04, pode-se observar quais motores cada navegador utiliza.Motor NavegadorWebkit Safari, Google ChromeGecko Mozila FirefoxTrident Internet ExplorerPresto OperaTabela 3, - Comparativo motores de renderização e navegadoresFonte: O Autor
  • 29. 253 HTML5O HTML5 surge como uma alternativa para promover uma maior navegabilidade aosusuários proporcionando mais segurança na navegação, através de páginas mais leves edinâmicas.Segundo o site da MSDN, o HTML5 é um termo síntese que descreve um conjunto deespecificações do HTML, de CSS e de JavaScript, projetado para capacitar desenvolvedores acriar sites e aplicativos da próxima geração.(MSDN, 2012).O HTML5 traz um novo padrão para a criação de seções especificas do documento,onde cabeçalho, menu de navegação, aside, conteúdo e rodapé agora são identificados atravésde tags especificas. Facilitando a forma como o desenvolvedor vem a organizar seu códigodentro da página.“ O html 5 nos dá novos elementos que denotam sem ambiguidades pontos de referência napágina” (LAWSON B. & SHARP R.,8)O HTML5 traz novos elementos para o input type, com isso tornando muito maissimples a validação dos campos. Onde cada novo input type recebe validação nativa atravésdo navegador, que fica responsável por realizar a validação e aplicar o tratamento ao campo,de forma transparente ao usuário final.Outra novidade é a chegada das tags específicas para áudio e vídeo, onde agora sefazem presente na especificação do HTML5. Onde esses recursos são executados de formanativa junto ao navegador, dependendo apenas do navegador oferecer suporte ao formato a serexecutado."Áudio e Vídeo tornaram-se objetos de primeira classe na web com HTML5, exatamentecomo aconteceu com outros tipos de mídia, como imagens, no passado."(HTML5 ROCKS,2012)A Geolocalizão e o canvas são duas API que fazem parte da especificação oficial doHTML5 e dependem de bibliotecas para que possam funcionar perfeitamente, .3.1 Declaração DoctypeA primeira grande mudança é especificada já na primeira linha de código, nadeclaração para a sintaxe DOCTYPE, onde surge de forma case insensitive (não distingue
  • 30. 26minúsculas de maiúsculas). Tornando o cabeçalho muito mais simples se comparado aversões anteriores.Pode-SE observar na figura 4, a declaração na versão do HTML 4.01:Figure 4 – Doctype em html 4.01Fonte: O autorSurge então uma nova maneira de realizar a declaração do DOCTYPE, pode-seobservar a seguir na figura 5, a maneira de como se deve declarar em HTML 5.Figura 5 – Doctype em HTML5.Fonte: O autor3.2 MetaCharsetEsse atributo tem a função de definir quais caracteres abstratos podem vir a fazer partede um documento com formato HTML, ou seja, tem a função de acrescentar aquela palavraacentuada no site e fazer com que elas apareçam de forma legível no mesmo.Exemplo conforme figura 6 abaixo, mostrando código de declaração em versõesanteriores.Figure 6 – Charset em HTML 4.01Fonte:O autor
  • 31. 27A seguir pode-se observar a figura 7, onde é apresentado um exemplo de declaraçãode um elemento charset.Figura 7 – Declaração Charset em HTML5Fonte : O AutorOnde com a chegada da nova versão do html5 ficou muito mais simples efetuar adeclaração do charset.3.2.1 ISO 8859-1O ISO 8859-1 é um conjunto de caracteres padrão, sendo especificado no documentopara oferecer suporte a caracteres especiais. “Os primeiros 128 caracteres do ISO-8859-1 é ooriginal ASCII conjunto de caracteres (os números 0-9, o alfabeto letras maiúsculas eminúsculas Inglês, e alguns caracteres especiais).”(W3Schools, 2012)3.3 Elementos de marcaçãoCom o HTML5 surge um novo conceito para distinção de tags, fazendo com que asmaquinas sejam capazes de interpretar a estrutura das páginas. Uma das grandes novidades é aestruturação e distribuição das tags na página, com o surgimento da tag section,possibilitando a criação de uma nova seção de códigos. Com a ajuda destes novos elementos,pode-se por exemplo diferenciar através do código HTML5, as principais áreas do site comocabeçalho, menu, rodapé e o conteúdo.
  • 32. 28A ideia é de substituir uma grande quantidade de divs, e sem seu lugar implantar osnovos elementos que venham se encarregar dessas funções, onde os mesmo tem a função dese comunicar com o navegador explicando que aquela tag é especifica, surgindo assim oselementos de marcação. Onde o responsável por realizar a divisão e alinhamento dos novoselementos é css.A figura 8, conforme segue mostra um esboço de organização dos novos elementos.Figura 8 – Esquema lógico de uma paginaFonte: HTML5 e Seo : Quais as novidades ?3.3.1 HeaderA W3C comenta que esse elemento é responsável por definir o cabeçalho de umapágina ou de uma seção, podendo apresentar outros conteúdos sendo eles o logo de umaempresa(layout), campo de pesquisa ou sumário da página. (W3C, 2012). É possível á
  • 33. 29utilização de mais de um elemento dentro deste cabeçalho, como em caso de utilização doselementos <h1> até o <h6> ou de uma section, além de utilizarmos em outros elementos.Pode-se observar a seguir na Figura 09 exemplo de utilização do elemento Header.Figura 9 – Código HeaderFonte:O autorEm seguida pode-se observar na figura 10, o resultado do código da Figura 09, sendoexecutado nos principais navegadores de internet.Figura 10 – Execução HeaderFonte: O AutorAntes do surgimento do HTML5 era utilizado uma div= “header”, para realizar essetipo de ação.
  • 34. 303.3.2 SectionA W3C comenta que esse elemento tem a função de representar uma seção deaplicação ou um documento de forma genérica. (W3C, 2012). Como exemplo pode-se citar ahome-page de um site, a qual pode ser dividida em diversas seções.Pode-se observar a seguir na Figura 11, um exemplo de utilização do elemento Sectionsendo utilizado em conjunto com uma section com o header.Figura 11 – Código section com headerFonte : O AutorPode-se observar na figura 12, conforme segue abaixo exemplo de execução da tagsection nos principais navegadores de internet.Figura 12 – Execução section e headerFonte: O Autor
  • 35. 31Antes do surgimento do HTML5 era utilizado uma div como elemento de uma seção.3.3.3 NavA W3C comenta que é responsável por uma sessão de navegação.(W3C, 2012).Normalmente utiliza-se em conjunto com uma lista ordenada, contendo links para acessointerno e externo, como por exemplo um menu de navegação.Pode-se observar na figura 13, conforme segue abaixo exemplo de utilização da tagNAV, sendo utilizada em conjunto com uma lista ordenada.Figura 13 – Código nav com lista ordenadaFonte : O AutorPode-se observar a seguir na figura 14, execução da tag NAV nos principaisnavegadores de internet.Figura 14 – Execução navFonte:O autor
  • 36. 32Antes do HTML5 era utilizado uma div= “nav” para criar este tipo de função, e a listaordenada era utilizada da mesma forma, não sofrendo nenhuma atualização.3.3.4 ArticleA W3C comenta que é um elemento que tem um significado semântico, sendo umaseção independente do conteúdo (W3C, 2012). Sendo o elemento Article uma forma maisespecificada do elemento section, se relacionado a um tema especifico, devera ser utilizadodentro de uma section. Podendo conter outros elementos dentro de um article como porexemplo a tag time para realizar uma marcação a respeito de um evento ou um conteúdo comfins jornalísticos.Pode-se observar na figura 15 na sequencia, um exemplo de código para a tag articlesendo utilizado em conjunto com o elemento section, header e tag time, para demonstrar umamarcação no tempo, através de uma página de internet.Figura 15 – Código ArticleFonte : O Autor
  • 37. 33A seguir na figura 16, pode-se observar a execução do article nos principaisnavegadores de internet.Figura 16 – Execução ArticleFonte : O AutorEm versões anteriores ao HTML5 era utilizado uma DIV= “Conteudo”, para criar umasessão responsável por realizar a função do article.3.3.5 - AsideA W3C comenta que consiste no conteúdo à parte daquele onde está inserido (W3C,2012). Por exemplo o conteúdo da barra lateral, que pode ser considerado separado doconteúdo original da página, como uma propaganda ou um link externo ao site, podendo serutilizada em conjunto com outros elementos.
  • 38. 34A seguir na figura 17, pode-se observar um exemplo com o código para a tag aside,sendo utilizada em conjunto com uma lista ordenada para apresentar possíveis links externos.Figura 17 – Código AsideFonte : O AutorA seguir na figura 18, exemplo do elemento aside em conjunto com uma listaordenada sendo executado nos principais navegadores.Figura 18 – Execução AsideFonte : O AutorEm versões anteriores ao HTML5 era criado uma div= “propagandas” para representaro aside, e a lista ordenada não sofreu nenhuma atualização decorrente da evolução doHTML5.
  • 39. 353.3.6 FooterA W3C comenta que é o rodapé de um documento ou sessão (W3C, 2012). Comoexemplo pode-se incluir o nome do autor da página, uma data de publicação da página,informações para contato ou informações de direitos de autorais além de links externos,podendo conter uma lista ordenada informando os links diversos.Em seguida pode-se observar na próximo página à figura 17, apresentando uma formade utilização da tag footer, sendo divida em duas seções, uma sobre, contendo informaçõessimples como quem escreveu a página e alguns link externo. E a outra sessão chamada deacesse também que pode conter uma lista ordenada, contendo links internos e externos.Figura 19 – Código Footer.Fonte : O AutorEm seguida pode-se observar na figura 20, o resultado da figura 19, sendo apresentadanos principais navegadores.
  • 40. 36Figura 20 – Execução Footer.Fonte:O autorEm versões anteriores ao HTML5 era utilizado uma div= “rodapé” para criar a funçãode um rodapé da página.3.3.7 HgroupA W3C comenta que é responsável por agrupar os elementos de <h1> à <h6> dentrode uma seção, onde a seção pode ter diversos níveis, sendo classificado em ordem crescente,sendo o nível <h1> o mais alto.(W3C, 2012). Podendo ser utilizada em conjunto com outroselementos como a sectior, header, group, article e aside. Pode-se observar a aplicação docódigo na Figura 21, conforme segue na próxima página.
  • 41. 37Figura 21 – Código HgroupFonte : O AutorA seguir pode-se observar na figura 22, o exemplo de execução do hgroup nosprincipais navegadores .Figura 22 – Execução HgroupFonte: O Autor3.4 MultimídiaO HTML5 traz uma grande inovação, baseando-se em novos padrões que vemsurgindo junto com o avanço da internet, além de novos costumes por parte dos usuários.
  • 42. 38Estimulado por um crescente numero de dispositivos conectados a rede, onde boa parte vemutilizando smartphones, tablets ou computador para acessar algum tipo de mídia, seja ela redesocial para compartilhamento de vídeos e fotos ou simples execução de vídeos e musicasatravés da internet.A partir dessa nova versão, que traz como uma de suas principais novidades o suportenativo as tags de Áudio e Vídeo. Fazendo com que não seja mais necessário à instalação deCodecs e plug-ins para a execução dos elementos, trazendo maior comodidade ao usuário,além de promover uma maior segurança devido ao fato de tudo estar sendo rodado de formanativa junto ao navegador.3.4.1 ÁudioÉ uma novidade a implantação da tag<audio>. Definindo um novo elementoespecífico responsável por incorporar um arquivo de áudio em uma página da web. Segundo osite da W3CSchools, com essa nova tag é possível inserir um conteúdo especifico,dispensando a instalação de plug-ins para a execução de um arquivo.(W3CSchols,2012).Onde o navegador é responsável por executar o formato do arquivo.O elemento áudio é responsável pela execução de 03(Três) tipos de formatos, sendoeles o “mp3”, “wav” ou “OGG”. O elemento áudio em HTML5, possui como principaisatributos o Autoplay, controls, loop, preload e src, conforme segue abaixo a tabela dedescrição de características de cada atributo.Atributo Valor DescriçãoAutoplay Autoplay Define que a execução iniciara assim que o áudio estiver carregadoControls Controls Os controles do áudio iram ser mostrados no playerLoop Loop O áudio começara a tocar novamente quando chegar ao seu final.Preload Preload O áudio começara a carregar enquanto a pagina é lida(este atributo éignorado, quando o atributo "autoplay" esta definido).Src Src É a fonte do áudio, definida através de uma URL(caminho) quedevera ser especificada.Tabela 2- Atributos de Audio;Fonte : O Autor
  • 43. 39Pode-se observar na figura 23, conforme segue na próxima página, exemplo de códigodo elemento áudio para a execução dos formatos mp3,wav e ogg.Figura 23 – Código ÁudioFonte:O autorA Seguir na figura 24, pode-se observar o exemplo de execução do elemento áudiocom o formato mp3.Figura 24 – Execução áudioFonte: O autor
  • 44. 40Conforme exemplo de execução da figura 24, foi possível notar que todos osnavegadores executaram com sucesso o elemento áudio com exceção do safari, representadopela letra “E” que não conseguiu executar nenhum formato. O navegador Internet Explorer 9representado pela letra “C” chegou até a solicitar permissão para executar o arquivo. Antes dachegada do HTML5 era necessário a instalação de plug-ins para a execução do elementoáudio.3.4.2 VídeoA introdução da tag video é outra novidade no HTML5. O elemento vídeo tem afunção de apresentar um vídeo de forma nativa, se o navegador apresentar compatibilidadejunto ao formato do vídeo além da opção de estilização do player junto com o CSS.Segundo o site da W3C o elemento vídeo possui os seguintes atributos autoplay,preload, controls, loop, pôster, height, width, muted e src.(W3C, 2012).Segue abaixo tabela representando as especificações.Atributo DescriçãoAutoplay Define que o atributo começara a assim que a pagina for aberta, toca o quanto estiverarmazenado.Preload Carrega o video juntamente com o armazenamento da pagina e só funciona com oautoplay desabilitado.Controls Define os "controles" que var ser exibidos no videoex : "play" "pause"Loop Tem a função de executar novamente o arquivo quando o mesmo tiver chego ao final.Poster É a representação do vídeo através de uma imagem.Height Define a altura do vídeoWidht Define a largura do vídeoMuted Habilita a opção de deixar o vídeo Mudo(Sem som).Src É a fonte do vídeo, definida através de uma URL(caminho) que devera serespecificado.Tabela 3 – Atributos Vídeo.Fonte : O Autor
  • 45. 41Pode-se observar na figura 25, abaixo, exemplo de código para o elemento vídeo.Figura 25 – Exemplo código Video formato MP4Fonte:O autorEm seguida na figura 26, pode-se observar o comparativo de execução entre osprincipais navegadores para a execução do formato MP4 e como cada um de formaindependente cria o seu player de execução.Figura 26 – Execução MP4Fonte:O autor
  • 46. 42Observa-se conforme a figura 26, que os navegadores Firefox representado pela letra“A”, opera representado pela letra “D” e safari representado pela letra “E” não oferecemsuporte a esse formato de vídeo. O navegador Internet explorer 9 representado pela letra “C”,solicita permissão para a execução e o Google Chrome representado pela letra “A” executacom sucesso.3.4.3 Figure e Figure CaptionO elemento figure tem a função de realizar a marcação em um bloco de conteúdoindependente, que normalmente vem a contém imagens, gráficos, diagramas ou ilustraçõesque fazem referência ao conteúdo principal de uma pagina. O elemento Figcaption tem afunção de inserir uma “legenda” para a imagem.Pode-se observar na figura 27, um exemplo de código do elemento figure e figcaption.Figura 27 – Código Figure e FigCaptionFonte:O autorPode-se observar na figura 28 presente na próxima página, o resultado do código dafigura 27, sendo executado nos principais navegadores de internet.
  • 47. 43Figura 28 – Execução Figure e FigcaptionFonte: O autorPode-se observar no exemplo da figura 28, que em todos os navegadores, o elementoFigure e Figcaption é executado com sucesso.Em seguida na figura 29, conforme segue, um exemplo de marcação de um bloco deimagens sendo utilizado em conjunto com o Figcaption.Figura 29 – Codigo Marcação Bloco Figure e FigCaptionFonte: O AutorPode-se observar no exemplo da figura 30, conforme segue na próxima página, amaneira como os navegadores executam a marcação de um bloco.
  • 48. 44Figura 30 – Execução Bloco Figure e FigcaptionFonte : O AutorAntes do HTML5 para marcar um bloco, era necessário realizar a marcação de cadaimagem uma por uma e adicionando uma legenda para cada, agora pode se marcar um blocotodo de imagens.3.5 Novos campos para formuláriosOs formulários em HTML5, tiveram inicio com o Web Forms 2.0, uma especificaçãoanterior à atual especificação do HTML5, onde foi criada por um grupo conhecido como WebHypertext Applications Technology WorkingGroup, ou apenas WHATWG. Grande parte dotrabalho inicial do WHATWG tornou-se o ponto de partida do que chamamos hoje deHTML5, e o esforço do Web Forms 2.0, foi integrado a especificação oficial do HTML5.Devido a grande utilização de muitos campos de verificação de dados, e também por haveruma integração com outras linguagens como o Javascript.“Os novos campos de formulários foram a gênese da especificaçãoque se tornou o HTML5, e é onde vemos o princípio da extensão
  • 49. 45retrocompatível em ação. As extensões são, em maior parte, novosvalores do atributo type do elemento de entrada.”(LAWSON B. &SHARP R.,68)Surgem então 13 novos tipos de entrada para uso em formulários sendo eles search,tel, url, email,datetime, date, month, week, time, datetime-local, number, range e color.“O HTML5 define novos tipos de campo, e por razões que se tornaram claras em algummomento não há motivo para não começar a utilizá-los.” (Pilgrim M., Pg.150)3.5.1 SearchSegundo o site do WHATWG é preciso definir o atributo type do elemento input como valor definido para search.(WHATWG, 2012). Tem muita semelhança com o atributo“text”, com a única diferença é que voltado e interpretado pelos navegadores como um campode busca. Cada navegador interpreta o search de uma maneira diferente e os navegadores quenão oferecem suporte a esse elemento o tratam como um elemento text.“Esse tipo de entrada espera um termo de busca[..]a diferença entre os tipos search e text éapenas estilística.”(LAWSON B. & SHARP R.,73)A figura 31, apresenta um exemplo de código para o search sendo utilizado emconjunto com o placeholder para indicar que aquele campo é um campo de busca.Figura 31 – Codigo SearchFonte: O AutorPode-se observar na figura 32 presente na próxima página, o código da figura 31,sendo executada junto aos principais navegadores de internet.
  • 50. 46Figura 32 – Execução SearchFonte: O AutorObserva-se no exemplo da figura 32, que todos os navegadores interpretaminicialmente o campo sendo tipo texto, onde o Internet Explorer 9, representado pela letra“C”, apresenta o campo, mas não o atributo placeholder que esta definido para apresentar queaquele é um campo de busca. A seguir figura 33 na próxima página, pode-se observar amaneira como cada navegador haje quando algo é inserido no campo definido como type=“search”.Figura 33 – Exemplo search em execuçãoFonte: O Autor
  • 51. 47Pode-se observar no exemplo da figura 33, que somente os navegadores GoogleChrome representado pela letra “A” e o Safari representado pela letra “E” ofereceram suportea esse recurso. Os outros navegadores apenas interpretaram o campo search como sendo dotipo texto. Anteriormente era utilizado o input= “text” para realizar esse tipo de função.3.5.2 TelElemento que representa um controle para inserção de um campo especifíco paracolocar um numero de telefone. Segundo o site da W3C é preciso que seja definido oatributo type do elemento input como tel.(W3C,2012).Devido ao fato dos telefones possuíremvários formatos, o mesmo não possui um formato especifico, então em caso de obtenção deum formato especifico e padronização para realizar a validação e verificação desses formatosé necessário que seja utilizado o atributo Pattern, além da utilização do Placeholder paramostrar o formato a ser preenchido no campo.“O tipo de entrada tel espera um número de telefone. Não hávalidação especial, ele sequer força uma entrada apenas numérica,visto que muitos números telefônicos são comumente escritos comcaracteres adicionais, por exemplo +44 (0) 208 123 1234.”(LAWSONB. & SHARP R.,73)Em seguida na figura 34 um exemplo de código do type = “tel” sendo executado emconjunto com atributo pattern para realizar a validação do formato e o placeholder parademonstrar o exemplo de formato correto a ser inserido.Figura 34 – Código para Tel com Placeholder e PatternFonte : O Autor
  • 52. 48A seguir é possível observar o código da figura 34 sendo executado e apresentadoatravés da figura 35, nos principais navegadores, onde é possível observar a maneira comocada navegador apresenta o tel sendo executado em conjunto com os outros atributos.Figura 35 – Execução TelFonte:O autorPode-se observar que na figura 35, onde todos os navegadores exceto o InternetExplorer 9 representado pela letra “B”, executaram com sucesso o atributo Type=Tel. Aseguir na Figura 36 presente na próxima pagina, é possível observar a maneira como osnavegadores interpretam o atributo type=tel quando ele é executado e preenchido de formaincorreta.
  • 53. 49Figura 36- Execução Tel mostrando errosFonte : O autorNa figura 36, observa-se que o navegadores Internet explorer 9 representado pela letra“B” tratou o atributo type= “tel”sendo como type= “text”, não realizando assim nenhum tipode validação, nem sequer apresentando o placeholder. Já o navedor Safari representado pelaletra “C”, apresentou o atributo placeholder, porem não fez a validação do pattern. Osnavegadores Firefox representado pela letra “A”, Opera representado pela letra “D” e Chromerepresentado pela letra “E” executaram com sucesso o atributo e ainda mostraram umamensagem avisando que o formato digitado estava incorreto. A validação desse tipo de campoantes da chegada do HTML5 era anteriormente realizada através de funções definidas atravésde javascript.3.5.3 URLEsse elemento é utilizado para a inserção de uma url através de um campo especifico,onde o navegador fica responsável por verificar se é um formato valido, e não por verificar aprocedência do endereço nem sua existência. Segundo o site da WHATWG é necessário queseja definido o atributo type do elemento input como url.( WHATWG, 2012).
  • 54. 50Pode-se observar na figura37, conforme segue abaixo exemplo .Figura 37 – Código URLFonte: O autorPode-se observar o código da figura 37 sendo executada nos principais navegadores,conforme figura 38 abaixo, onde junto com o type=url foi definido o atributo placeholderpara demonstrar o formato de url para ser preenchido.Figura 38 – Execução simples URLFonte: O autor
  • 55. 51No exemplo da figura 38, nota-se que todos os navegadores exceto o InternetExplorer 9 representado pela letra “B”, executaram com sucesso as especificações. A seguirpode-se observar na figura 39 na próxima página, a maneira como cada navegador trata devalidar o formato type=url e o tipo de mensagem de aviso que ele informa em caso de formatoinvalido.Figura 39 – Execução URL com formato invalidoFonte: O autorNos navegadores Chrome representado pela letra “A”, Firefox representado pela letra“B” e opera representado pela letra “C”, executaram com sucesso e validaram nativamente otype= “url” e apresentam uma mensagem de erro em caso de preenchimento errado.Entretanto nos navegadores Internet Explorer 9 representado pela letra “D” e Safarirepresentado pela letra “E”, trataram o type = “url” sendo como um type= “text” não fazendonenhum tipo de validação.Antes do HTML5 a validação desse tipo de campo era realizado através de mascarasno javascript.
  • 56. 523.5.4 RangeSegundo o site da W3C o elemento Range é definido através do atributo type doelemento input como range.(W3C, 2012). Esse elemento utiliza cinco elementos parapromover o controle dos intervalos, sendo min para o valor mínimo, max para o valormáximo, step para definir o intervalo e value para definir o valor, além de any para nenhumvalor. Tendo como função criar uma barra de rolagem com algum tipo de intervalo.A seguir pode-se observar na figura 40 um exemplo de código para o input type= “range”.Figura 40 – Código RangeFonte: O autorA seguir na figura 41 presente na próxima página, pode-se observar a execução dorange nos principais navegadores e a maneira como cada um trata esse atributo.
  • 57. 53Figura 41- Execução RangeFonte : O autorPode-se observar que os navegadores Chrome representado pela letra “A”, Operarepresentado pela letra “B” e Safari representado pela letra “C” executaram o range. Osnavegadores Internet Explorer e Firefox trataram orange como tipo texto.3.5.5 EmailSegundo o site do WHATWG esse é o atributo "type" de um "input" quando a opçãofor igual a "email" significa que deve ser definido o campo para que se possa vir a receberum endereço de email válido (WHATWG, 2012). Essa forma de validação não tem a funçãode verifica se o e-mail digitado é existente, mas sim a função de verificar se o formatodigitado está correto. Pode ser utilizado o atributo multiple em conjunto com o email, parainserção de mais de um email no mesmo campo.A seguir na figura 42, pode-se observar uma declaração de código para o type=“email” sendo utilizada em conjunto com o placeholder para demonstrar o formato quedevera ser preenchido no campo.
  • 58. 54Figura 42 – Código emailFonte: O autorA figura 43, conforme segue, onde apresenta-se um exemplo de execução da figura42, onde mostra a execução do elemento nos principais navegadores, apresentando a formacomo cada um trata esse novo elemento.Figura 43 – Execução Email simplesFonte: O autor
  • 59. 55Pode-se notar na figura 43 da página anterior, que de alguma forma todos osnavegadores executaram com sucesso o elemento email, porém o Internet Explorer9representado pela letra “C” não exibiu o placeholder, porem tratou o type=“email” sendo dotype=“text”.A seguir na figura 44, de pode-se observar como que cada navegador interpreta osdados preenchidos errados no campo.Figura 44 – Execução Email com erroFonte: O autorConforme exemplo da figura 44, pode-se observar que os navegadores Chromerepresentado pela letra “A”, Firefox representado pela letra “B” e Opera representado pelaletra “C”, executaram com sucesso a validação do formato de email, de forma nativa.Já os navegadores Safari representado pela letra “D” e Internet explorer representado pelaletra “E”, apenas trataram o type email sendo como do tipo texto. Antes do HTML5 esse tipode validação apresentado pelos navegadores “A”, “B” e “C” era realizado através de funçõesdefinidas pelo javascript.
  • 60. 563.5.6 NumberO Number tem a função de definir que o campo é especifico para entrada de números,ficando o navegador responsável pela validação do mesmo. Segundo o site da W3C o camponumber é utilizado quando é definido pelo o atributo type do elemento input comoNumber(W3C 2012).Para a validação e verificação pode-se utilizar o atributo min para definiro valor mínimo para um campo e max para definir o valor máximo, além do atributo step paradefinir os intervalos entres esses números.Pode-se observar a seguir no exemplo da figura 45, conforme segue na próximapagina, exemplo de declaração do type= “number” através de código.Figura 45- Código NumberFonte: O autorPode-se observar a execução do código da figura 45, através da figura 46 conformesegue na próxima página.
  • 61. 57Figura 46 – Execução NumberFonte : O AutorConforme exemplo da figura 46, é possível notar que os navegadores de internetChrome devidamente representado pela letra “A”, Opera representado pela letra “B” e Safariletra “C” executaram com sucesso o atributo number e criaram até uma caixa de opção para aescolha. Já os navegadores Firefox representado pela letra “D” e Internet Explorerrepresentado pela letra “E” não fizeram a mesma coisa que os navegadores “A”, “B” e “C”,apenas apresentaram o type= “number” como type=”text”. Em versões anteriores ao HTML5,poderia fazer esse tipo de validação através de alguma função declarada através de javascript.3.5.7 Date TimePermite a entrada de um formato de data e hora com a utilização de um fuso horário,onde o navegador tem a função de realizar a validação do campo de forma nativa. “Date etime validam uma data e horário precisos” (LAWSON B. & SHARP R.,71)
  • 62. 58A seguir na figura 47, pode-se observar um exemplo de declaração para o elementodate time.Figura 47 – Codigo Date TimeFonte: O autorA seguir na figura 48, presente na próxima página, pode-se observar o comparativo deexecução entre os navegadores através do input type = “datetime”.Figura 48 – Execução Date TimeFonte: O autor
  • 63. 59Pode-se observar no exemplo de execução apresentado na figura 46 no qual osnavegadores de internet Safari representado pela letra “A”, Opera representado pela “B”apresentaram com sucesso esse input type= “date time”. Já os outros navegadores apenasapresentaram esse atributo como input type= “text”.3.5.8 DateDeve ser utilizado para inserir um tipo de data, fazendo com que seja criado umcalendário para seleção de uma data.A seguir na figura 49 é possível observarmos um exemplo de declaração do códigopara o input type= “date”.Figura 49 – Código DateFonte: O Autor
  • 64. 60Em seguida na figura 50 pode-se observar o resultado da execução do type= “date”nos principais navegadores de internet.Figura 50 – Execução DateFonte : o AutorÉ possível observar-se que os navegadores Google Chrome representado pela letra“A”, opera representado pela letra “B” e safari representado pela letra “C” executaram comsucesso esse atributo criando um calendário ou menu interativo para escolha de data. Osnavegadores Internet Explorer representado pela letra “D” e Mozilla Firefox representado pelaletra “E” apenas trataram o input type= “date” como type= “text”3.5.9 MonthO Month é um novo atributo do input, sendo representado através de um mês.“<inputtype=“month” permite a entrada e validação de um mês”. (LAWSON B. & SHARP R.,71)A seguir na figura 51, pode-se observar um exemplo de especificação do código para otype= “month”.
  • 65. 61Figura 51 – Código MonthFonte: O AutorEm seguida na figura 52, pode-se observar um exemplo de execução do elementoMonth sendo executado nos principais navegadores.Figura 52 – Execução MonthFonte: O autorConforme execução da figura 52 é possível se observar que os navegadores Operarepresentado pela letra “A” e Safari representado pela letra “B” executaram com sucesso ecriaram uma forma de calendário para a escolha do mês. Os navegadores Chromerepresentado pela letra “C”, Mozilla Firefox representado pela letra “D” e Internet Explorerrepresentado pela letra “e” trataram o atributo type= “month” como sendo do type= “text” nãorealizando nenhum tipo de ação.
  • 66. 623.5.10 WeekDeve ser utilizado para inserir uma data formada por uma data e um numero desemana, de forma nativa junto ao navegador, sem a necessidade da especificação de um fuso-horário.“<input type= “week”> permite a entrada e validação do número de uma semana.”(LAWSON B. & SHARP R.,72)A Seguir na figura 53 pode-se observar um exemplo de especificação de código para otype= “week”.Figura 53 – Codigo WeekFonte: O AutorPode-se observar na próxima página a figura 54 , que apresenta um exemplo deexucução do código da figura 53, sendo apresentada nos principais navegadores de internetpara apresentação do type= “month”.
  • 67. 63Figura 54 – Execução WeekFonte: O AutorConforme exemplo de execução da figura é possível observar que os navegadoresOpera representado pela letra “A” e Safari representado pela letra “B” executaram comsucesso o atributo week apresentando a seleção para uma semana. Os navegadores InternetExplorer representado pela letra “c”Chrome representado pela letra “D” e Firefoxrepresentado pela letra “E” trataram o type= “week” sendo como do type= “text”, não criandonenhum tipo de calendário ou de validação.3.5.11 TimeÉ utilizado para inserir um valor de horário com hora, minuto segundos e fração desegundos, mas sem fuso horário.“O<input type= “TIME” > permite entrada de um horário emformato 24 horas e o valida” (LAWSON B. & SHARP R., Pg. 71)A seguir na figura 55, presente na próxima página, é possivel observarmos um exemplo decódigo para esse novo elemento.
  • 68. 64Figura 55 – Código TimeFonte: O autorA seguir na figura 56 pode-se observar o resultado do código da figura 55 sendoexecutado nos principais navegadores.Figura 56 – Execução TimeFonte: O AutorPode-se observar que no exemplo da figura 56, os navegadores opera representadopela letra “A” e Safari letra “b” executaram com sucesso o time criando uma caixa paraseleção de um horário.Os navegadores Firefox representado pela letra “B”, Internet Explorerletra “D” e Chrome letra “E” apenas trataram esse type sendo como texto.
  • 69. 653.5.12 Date Time-LocalÉ utilizado para inserir data e hora com ou sem um fuso horário definido. Onde onavegador fica responsável pela definição do fuso horário.A seguir na figura 57 é possível observarmos um exemplo de código para o type=“datetime-local”.Figura 57 – Código Datetime LocalFonte: O autorA seguir na figura 58 pode-se observar o exemplo de execução do datetime- local nosprincipais navegadores e a maneira como cada um trata essa especificação.Figura 58 – Execução DateTimeLocalFonte : O Autor
  • 70. 66Conforme execução da figura 58, presente na página anterior é possível notar-se queos navegadores que oferecem suporte a esse tipo de recurso criam um calendário para aescolha de uma data e hora, sendo eles o navegador Opera representado pela letra “A” e Safariletra “b”. Os navegadores que não oferecem suporte a esse recurso tratam o type= “datetime-local” sendo como do type= “text”, são eles Chrome letra “C”, Internet Explorer letra “D” eFirefox letra “E”.3.5.13 ColorTem a função de apresentar uma paleta para a escolha de uma cor.A seguir na figura 59 pode-se observar um exemplo de especificação do código para o inputtype= “color”.Figura 59- Código ColorFonte : O AutorPode-se observar na figura 60, conforme segue na próxima página, execução nosúnicos navegadores que oferecem suporte a esse recurso, sendo eles os navegadores deinternet Google Chrome e Opera.
  • 71. 67Figura 60- Execução Color Chrome e OperaFonte:O AutorA seguir na figura 61, pode-se observar a execução do código 59 da pagina anterior,sendo executado o elemento color nos navegadores de internet Internet Explorer, Firefox esafari.Figura 61 – Execução Color Ie, safari e FirefoxFonte: O AutorPode-se notar que nenhum dos navegadores ofereceu suporte ao elemento color etodos trataram o type=colorcomo elemento type=text.
  • 72. 683.6 Validação dos formuláriosHTML5 surge com a proposta de facilitar a vida do programador, tornando boa partedas validações de forma nativa junto ao navegador, fazendo com que o programador nãotenha que escrever várias linhas de códigos em javascript para realizar as validações noscampos. “O elemento input tem diversos novos atributos para especificar o comportamento elimitações: Autocomplete, min, max, multiple, pattern e step”. (LAWSON B. & SHARPR.,74). Surge também o novalidade para situações em que um formulário não seja validado eo Formnovalidate para que o formulário seja validado dependendo apenas da ação do submit.3.6.1 AutoFocusAutofocus é um atributo utilizado em formulários ou páginas de internet e tem afunção de determinar que um elemento venha a receber o foco assim que carregado. “Tãologo a página carregue, ele move o foco da inserção para um campo de inserção emparticular”.(LAWSON B. & SHARP R.,74).Esse atributo devera ser utilizado apenas uma vez por página.“Muitos Websites utilizam [..]para focar (selecionar) no primeirocampo de inserção de um formulário web automaticamente. PorExemplo, a homepage do Google com focalizará automaticamente acaixa de inserção, de modo que você possa digitar as palavras-chavede sua busca sem ter de posicionar o cursos na caixa debusca.”(Pilgrim M., Pg.148).Em seguida pode-se observar um exemplo prático de execução de uma página queutiliza esses recursos, presente na figura 62 da próxima pagina.
  • 73. 69Figura 62 – Pagina do GoogleFonte: GoogleDisponivelem : www.google.com.brPode-se observar na figura 63, um exemplo pratico de uma figura contendo um códigopara uma pagina que utilize o autofocos.Figura 63- Código AutofocusFonte: O autorOs navegadores que não suportam o autofocos simplesmente o ignoram. Em HTML5os atributos que podem receber esse elemento são o "button", "input", "keygen", "select" e"textarea".Observa-se a seguir a figura 64 presente na próxima página, onde mostra a execuçãoda figura 63 nos principais navegadores.
  • 74. 70Figura 64- Exemplo de execução autofocusFonte: O AutorConforme execução do código da figura 63, podem-se observar que todos osnavegadores de internet exceto o Internet Explorer 9 oferecem suporte a esse tipo de atributo,onde o mesmo apenas ignora a sua execução.3.6.2 Mínimo e MáximoTem a função de declarar o valor mínimo e máximo de um campo, sendo min paramínimo e max para máximo. “Esses atributos restringem a gama de valores que pode serinserida em um campo; você não pode enviar o formulário com um número menor que min oumaior que max.” (LAWSON B. & SHARP R.,78)Pode-se observar na figura 65, presente na próxima página, um exemplo de códigoutilizando o valor mínimo e máximo.
  • 75. 71Figura 65 – Código exemplo min e maxFonte: O autorA seguir na figura 66, pode-se observar um exemplo de execução nos principaisnavegadores de internet.Figura 66- Execução Min e MaxFonte: O Autor3.6.3 Multiple
  • 76. 72Tem a função de permitir a entrada de múltiplos valores em um mesmo campo. Oatributo multiple deve trabalhar com os type= file por exemplo para carregar varias imagensou outros tipos de arquivo e type=email com multiple definido para inserir mais de umendereço de email.A seguir pode-se observar na figura xx, exemplo de declaração para o type= “file”com o atributo multiple definido.Figura 67- Código MultipleFonte: O autorPode-se observar na figura 68, exemplo de execução de execução do type= “files” como multiple definido.Figura 68 – Execução simples doMultipleFonte: O autor
  • 77. 73A seguir pode-se observar na figura 69, uma forma de execução mais detalhada doatributo multiple nos principais navegadores de internet.Figura 69 Execução Detalhada multipleFonte: O AutorConforme execução da figura 69, pode-se observar que todos os navegadoresexecutaram com sucesso a especificação do type= “file”, porem o Internet Explorerrepresentado pela letra “A’ não fez com que fosse possível selecionar mais de um arquivo.Diferente dos outros navegadores que executaram com sucesso essa especificação. Osnavegadores Chrome representado pela letra “A” e Safari representado pela letra “B”,apresentaram a quantidade de arquivos selecionados.3.6.4 PatternO atributo pattern tem a função de validar expressões regulares, sem a utilização deJavascript. É utilizado por exemplo para realizar a validação de um campo como telefone ouCep de uma cidade.
  • 78. 74Pode-se observar na figura 70, exemplo de utilização do atributo pattern paravalidação de um formato de CEP de uma cidade sendo utilizado em conjunto com oplaceholder para mostrar o formato a ser digitado.Figura 70 – Código Required com PatternFonte : O AutorPode-se observar a seguir na figura 71, exemplo de execução nos principaisnavegadores de internet.Figura 71 – Execução Pattern com PlaceholderFonte: O autor
  • 79. 75Nota-se que no exemplo da figura 71, presente na página anterior, os navegadoresInternet Explorer e Safari, trataram o pattern como sendo um atributo do tipo text e nãorealizaram a validação do campo. Diferente disso os navegadores de internet Google Chrome,Opera e Mozilla Firefox realizaram validação além de emitir mensagem de que o formatodigitado não era valido.3.6.5 STEPEsse atributo tem a função de definir o intervalo entre os valores de entrada em umcampo.“O step controla o nível de granularidade de entrada.” (LAWSON B. & SHARP R.,78)A seguir na figura 72, exemplo de especificação para o código.Figura 72 – Código StepFonte: O AutorA seguir pode-se observar na figura 73 presente na próxima página, execução doatributo step sendo utilizado em conjunto com os atributos mim e max.
  • 80. 76Figura 73 – Execução StepFonte: O AutorConforme execução da figura 73, é possível notar-se que somente os navegadoresGoogle Chrome representado pela letra “A”, safari letra “B’ e Opera letra “C” executaramcom sucesso esse atributo os navegadores que não ofereceram suporte apenas trataram omesmo sendo do type= “text”.3.6.6 MaxlenghtTem a função de limitar o numero máximo de caracteres em um campo.3.6.7 PlaceholderTem a função de definir textos pré-definidos em um campo de inserção de dados,onde o mesmo irá desaparecer após ser digitado algo no campo.Na figura 74, exemplo presente na próxima, observa-se um exemplo de código para adeclaração do mesmo.
  • 81. 77Figura 74 – Código PlaceholderFonte: O AutorA seguir na figura 75 pode-se observar o código da figura 74, sendo executada nosprincipais navegadores de internet.Figura 75 – Execução PlaceholderFonte: O Autor
  • 82. 78Nota-se que na figura 75, todos os navegadores exceto o Internet Explorer executaramcom sucesso o atributo placeholder. Antes da chegada do HTML5 para realizar esse tipo defunção era necessário a aplicação de mascaras javascript ou bibliotecas especificas para esserecurso.3.6. 8 RequiredEste tipo de atributo é definido para o navegador, fazendo com que o preenchimentode um campo seja obrigatório no formulário, ou seja, o usuário não conseguira enviar oformulário se não preencher o campo.Pode-se observar na figura 76, conforme segue abaixo, exemplo de um código paraum formulário utilizando o required.Figura 76- Código RequiredFonte: O AutorNa figura 77 o atributo required tem a função de verificar se o campo foi preenchido enão o seu formato. Pode-se observar na figura 77, exemplo de execução da figura 76 nosprincipais navegadores de internet.
  • 83. 79Figura 77- Execução RequiredFonte: O autorPode-se observar, que os navegadores Internet Explorer representado pela letra “C” eSafari representado pela “E” não executaram a validação de campo obrigatório. Os demaisnavegadores executaram com sucesso o atributo required e enviaram uma mensagem de que ocampo deveria ser preenchido.3.7 Atributo Data listEsse elemento tem a criar uma lista pré-definida dentro de um input. Pode-se observarna figura 78, conforme segue na próxima página, o exemplo do datalist funcionando.
  • 84. 80Figura 78 – Código DatalistFonte: O AutorPode-se observar a seguir na figura 79, o resultado da figura 78, sendo executado nosnavegadoresFigura 79- Execução DatalistFonte: O AutorPode-se observar na figura 79, o exemplo de comparativo entre os navegadores, ondeos navegadores Internet Explorer representado pela letra “D” e safari representado pela letra“E” não executaram o atributo datalist apenas o trataram como sendo um type= “text”. Já osoutros navegadores executaram com sucesso essa função.
  • 85. 813.8 Sumary e DetailsTem a função de criar um elemento interativo de mostrar e esconder, onde segundo osite da Mozilla o elemento details é utilização para criar uma caixa de detalhes e o summaryapresentar esse sumário, ou até mesmo a legenda para o conteúdo do elemento details.(Mozilla, 2012). Podendo ser criado de forma nativa, sem a necessidade da implantação dejavascript para criação do mostrar esconder, dependendo apenas do navegador oferecersuporte ao usuário.A seguir na figura 80, pode-se observar um exemplo de código para o datails e summary.Figura 80 – Código Details e SummaryFonte : O AutorPode-se observar a figura 81, resultado da figura 80, sendo apresentado um exemplode execução do details e summary no navegador de internet Google Chrome, único a oferecersuporte a esse tipo de recurso.
  • 86. 82Figura 81 – Execução Details e Sumarry no ChromeFonte: O autorA seguir na figura 82, execução do código da figura 80, onde é apresentado oresultado ao clicar no saiba quem sou eu e contatos.Figura 82- 2ª Execução Details e SummaryChromeFonte: O Autor
  • 87. 83Em seguida pode-se observar na figura 83, resultado da figura 81 presente nas paginasanteriores, onde a figura apresenta a execução nos navegadores que não oferecem suporte aesse recurso.Figura 83 – Execução Details e Summary dando erro.Fonte: O Autor
  • 88. 84Pode-se observar na figura 83 presente na página anterior que os navegadores que nãooferecem suporte ao Details e summary, apenas apresentam o conteúdo presente naespecificação do código, porem não criam a caixa de opção “saiba quem sou eu” e a caixa deopção “Contatos” de forma interativa. No caso dos navegadores representados na figura 83,para criar o elemento interativo como no exemplo da figura 82, deve ser criada a funçãoatravés do javascript ou alguma outra biblioteca que permita fazer esse tipo de menuinterativo como jquery.3.9 - Conteúdo editávelTem a função de tornar um conteúdo editável ou não, segundo o site da w3schools épossível tornar o campo editável com a definição de que o contenteditable= “true”.(w3schools,2012). Sendo uma das novidades do HTML5.3.10 SpellcheckTem a função de realizar a correção ortográfica. Segundo o site da Microsoft éhabilitada por padrões em campos dos elementos textarea. (msdn, 2012). Possuindo os valores“TRUE” E “FALSE”.A seguir na figura 84, exemplo com o spellcheck sendo utilizada dentro de um textarea.Figura 84- Código Textarea com SpellcheckFonte: O Autor
  • 89. 85A seguir na figura 85, pode-se observar o spellcheck sendo utilizado em umformulário simples de comentários, normalmente presente em blogs ou outros meios decomunicação na internet. Pode-se observar dentro do textarea o spellcheck sendo apresentadoe a maneira como cada navegador o apresenta.Figura 85- Execução SpellcheckFonte: O AutorConforme execução da figura 85, pode-se observar que todos os navegadores exceto oInternet Explorer representado pela letra “E”, executaram com sucesso o Spellcheck,
  • 90. 86mostrando embaixo da palavra dentro do campo textarea que aquela palavra estava com agrafia errada.3.11 MeterTem como finalidade apresentar uma escala ou algum valor especifico de umaescala.“O elemento HTML meter (<meter>) pode representar um valor escalar dentro deu umintervalo conhecido ou um valor fracionário”(Mozilla, 2012).A figura 86, conforme segue abaixo apresenta os atributos do elemento meter.Figura 86- Código MeterFonte : O AutorPode-se observar a seguir na figura 87, exemplo de execução deste elemento sendoexecutada nos navegadores de internet Google Chrome representado pela letra “A” e Operaletra “B”.Figura 87 – Execução Meter com SucessoFonte : O Autor
  • 91. 87Pode-se observar na figura 88 a execução nos navegadores Internet Explorerrepresentado pela letra “A”, Mozilla Firefox letra “B” e Safari “C”.Figura 88- Execução com problemasFonte: O autorOs navegadores da figura 88, não executam esse arquivo e apenas o ignoram.3.12 ProgressTem a função de representar o processo de uma tarefa. Segundo o site da W3CSchoolsa tag progress devera ser executada em conjunto com o javascript.(2012, W3CSchools).Possui os atributos min e max para indicar o progresso.A seguir na figura 89 pode-se observar um exemplo de código para o progress.Figura 89 – Código ProgressFonte: O autor
  • 92. 88A seguir na figura 90, pode-se observar o exemplo do progress nos principais navegadores.Figura 90 – Execução ProgressFonte: O AutorPode-se observar na figura 90, que os navegadores Safari representado pela letra “D” eInternet Explorer representado pela letra “E” não executaram o elemento progress, diferentedos outros navegadores que executaram e criaram o elemento.3.13 Elemento CanvasCanvas é uma das novidades que agora faz parte do HTML5, essa nova tag écontrolada via Javascript, a partir dela é possível realizar a manipulação de elementosgráficos, como por exemplo desenhar linhas, elementos, efetuar a manipulação de imagensexternas, além de editar uma imagem pixel a pixel.Segundo o site da w3c o elemento canvas é todo manipulado através de javascript,onde através da manipulação via código o desenvolvedor tem acesso a vários métodos pararealizar o desenho em tela no plano gráfico2d (2 Dimensões) onde mesmo vem utilizar de um
  • 93. 89plano cartesiano para traças linhas e curvas, traçar formas e definir cores e tamanhos.(W3C,2012)3.13.1. BIBLIOTECA MODERNIZRTrata-se de uma biblioteca de detecção de recursos HTML5, que possui seu códigofonte aberto, onde oferece suporte a detecção de recursos junto ao CSS3 e ao HTML5."O Modernizr roda automaticamente.[.]Quando ele roda, cria um objeto global chamadoMODERNIZR que cotem um conjunto de propriedades booleanas para cara característica quepossa detectar".(Pilgrim, pg 16).3.14 GEOLOCALIZAÇÃOO principal objetivo da geolocalização, é a fazer com que a partir de uma API verificara localização em tempo real através do browser.Segundo o site do html5rocks, funciona a partir de três formatos para obter umaposição de localização de um objeto. Sendo eles a Triangulação GPRS, Geolocalizaçãoatravés de um IP e o GPS.(Html5Rocks, 2012).A geolocalização é realizada através de uma conexão com a internet, por meio deaplicativos e serviços online, através da identificação do IP a localização pode ser transmitidacom certa exatidão. Os mecanismos de geolocalização podem ser identificados através deRDFID (Radio Frequência), conexão WiFi, MAC´S e também através das coordenadasobtidas por um dispositivo GPS.O uso é cada vez mais comum, muitos sites já vem utilizando da geotagging(Marcaçãogeográfica), redes sociais como por exemplo o facebook vem utilizando desse aplicativoatravés das marcações de lugares, o twitter através do TwitterNearby que permite localizarpessoas próximos a ele que também estejam twittando em lugar próximo, Foursquare permitefazer um “check-in” dos lugares onde a pessoa esteve.
  • 94. 904. CONCLUSÃOApós a apresentação da tecnologia HTML5, chega-se ao fim deste Trabalho deConclusão de Curso, com as seguintes conclusões:Em relação ao primeiro objetivo específico, tem-se:-Coletar e apresentar dados sobre compatibilidade da nova linguagem junto aosNavegadores: Para atingir, e por consequência, concluir este objetivo foi realizada análise decomparação, execução e compatibilidade das novas especificações presentes no HTML5.Analisou-se o suporte entre os navegadores Google Chrome 22.0.1229.92m, Mozilla Firefox,Internet Explorer 9, Safári 5.1.7(7534.57.21) e Opera 12.02. Esta análise pode ser observadanos exemplos e comparações de funcionalidades do HTML5, espalhados pelo referencialdeste trabalho. Como ponto importante, notou-se que o navegador que ofereceu maiorcompatibilidade a linguagem foi o Google Chrome 22.0.1229.92m e o que menos oferecesuporte a linguagem é o Internet Explorer 9.Falando no segundo objetivo específico:-Analisar os benefícios em relação a integração com outras tecnologias: Com achegada dos novos elementos junto ao HTML5 é possível realizar uma melhor organização docódigo fonte, definindo através de marcações específicas as áreas do site como conteúdo,cabeçalho, menu e rodapé. Os formulários receberam 13 novos elementos, além de novosmétodos para validação dos campos de forma nativa. A chegada do required, pattern,autofocus e placeholder dispensando a necessidade da utilização javascript para a criação demascaras, a chegada de elementos como o details, summary, contenteditable, spellcheck vempara tornar ainda mais transparente os recursos nativos. Navegadores agora conseguemexecutar elementos de áudio e vídeo sem que haja a necessidade da instalação de plug-inscomo o flash player, Microsoft Silverlight e Java, dependendo do navegador oferecer suporteao formato a ser executado. Assim, pode-se afirmar que o HTML5, favoreceu a integraçãocom outras tecnologias, pois criou instrumentos facilitadores em relação a uso de linguagensdistintas. Alguns desses facilitadores, são afirmados quando fala-se dos 13 novos elementospresentes no formulário, logicamente, que além desses, existem outros, porém esses sãoconsiderados aqui, os mais relevantes para concluir este objetivo.E por fim, terceiro e último objetivo específico:-Apresentar as melhorias da tecnologia se comparado a versões anteriores: Nota-se eafirma-se que a evolução do HTML fez com que o entendimento sobre a linguagem se
  • 95. 91tornasse cada vez mais simplificado, mesmo que boa parte do material disponível paraestudos estar sendo especificado em inglês. A linguagem depende muito do usuário ter umnavegador atualizado para que possa usufruir de todos os recursos presentes nessa novaespecificação. O HTML5 tem sua previsão de lançamento oficial para o final de 2012, poréma W3C comenta que só deverá ser utilizado como linguagem padrão de desenvolvimento nospróximos anos. Essa evolução foi exposta, durante o referencial teórico, ao abordar diversosconceitos e ferramenta que surgiram e melhoram com a mudança evolutiva do HTML.É importante ressaltar que existem algumas APIs como webstorage, localstorage, off-line, drapanddropsvg, math, que fazem parte da especificação do HTML5, porém não foramapresentadas nesse trabalho, pois julgam-se desnecessários para cumprir o objetivo geral domesmo.E por fim, conclui-se este trabalho, após atingir os objetivos específicos, realizandouma análise sobre a linguagem HTML5, mostrando as principais novidades, assim como asmelhorias decorrentes da evolução, como afirmava o objetivo geral deste TCC.
  • 96. 925. REFERÊNCIASFORMAGGIO, E. B. SEO: Otimização de Sites.Rio de Janeiro:Brasport, 2010.ASLESSON . R& SCHUTTA N.T.Fundamentos do Ajax. Rio de Janeiro:Alta Books , 2006.TOLEDO S. A. Estudo Dirigido web, html 4.0, Rio de Janeiro , editora , 2001.MACEDO M. S. Construindo sites adotando padrões Web. Rio de Janeiro, CiênciaModerna, 2004.SILVA. O. J. HTML 4.0 e XHTML: Domínio e Transição, São Paulo, Érica, 2001.SILVA. M. S. HTML 5 : A Linguagem de marcação que revolucionou a Web, SãoPaulo:,Novatec, 2011.TANENBAUM. A. S.REDES DE COMPUTADORES,Rio de Janeiro, Editora Campus:1996.LAWSON B. & SHARP R. INTRODUÇÃO AO HTML5. – Rio de Janeiro, Alta Books,2011.PILGRIM. M.- HTML5 – Entendendo e Executando – Rio de Janeiro, Alta Books, 2011.ALBUQUERQUE. F. TCP /IP – Internet: Procolos& Tecnologias – 3ª Edição, Rio deJaneiro, Axcel Books do Brasil Editora: 2001.SOUDERS. E. Alta Performance em Sites Web, Rio de Janeiro, Alta Books : 2007.DocumentObjectModel (DOM) – Disponível emhttp://www.w3.org/DOM/ Acessado em21/03/2012.HTML/New HTML5 Elements – Disponível emhttp://www.w3.org/community/webed/wiki/HTML/New_HTML5_Elements acessado em12/04/2012.HTML 5 Reference - A Web Developer’sGuideto HTML 5 - Disponível emhttp://dev.w3.org/html5/html-author/ acessado em 15/04/2012.
  • 97. 93HTML5 - A vocabular and associated APIs for HTML and XHTML - disponível emhttp://dev.w3.org/html5/spec/sections.html acessado em 17/04/2012.HTML5 New Elements- DisponívelemHttp://www.w3schools.com/html5/html5_new_elements.asp acessado em 28/03/2012.HTML - Living Standard - Disponível em http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html acessado em 18/04/2012.Html 5 e SEO : Quais são as novidades ? - Disponível emhttp://www.mestreseo.com.br/seo/html-5-seo . Acessado em 16/04/2012.Criando aplicativos com o HTML5: O que você precisa saber – Disponívelemhttp://msdn.microsoft.com/pt-br/magazine/hh335062.aspx acessado em 23/04/2012.Type = search – Disponível em http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-(type=text)-state-and-search-state-(type=search) acessado em 30/04/2012.NumberState – Disponível em http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#number-state acessado em 02/05/2012.HTML 5 – Audio – Disponível em http://www.w3schools.com/html5/html5_audio.aspacessado em 08/05/2012.Type = Email – Disponível em http://www.whatwg.org/specs/web-apps/current-work/#e-mail-state-(type=email) Acessado em 15/05/2012.Figure Element– Disponível em http://dev.w3.org/html5/spec/single-page.html#the-figure-element acessado em 16/05/2012.Url - state - (type=url) – Disponível em http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#url-state-(type=url) – Acessado em16/05/2012.The video element – Disponível em http://dev.w3.org/html5/spec/single-page.html#videoacessado em 20/05/2012.
  • 98. 94ColocarThe canvaselement – Disponível em http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element acessado em 25/05/2012.Canvas in HTML 5 -Disponível em http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element acessado em 27/05/2012.Range state (type=range) – Disponivel em http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#range-state-(type=range) acessado em01/06/2012.Web Forms melhores com formulários em HTML5- Disponível emhttp://msdn.microsoft.com/pt-br/magazine/hh547102.aspx acessado em 13/06/2012.Telephone state (type=tel) -Disponível em http://www.w3.org/TR/html5/states-of-the-type-attribute.html#telephone-state-type-tel acessado em 19/06/2012.A SIMPLE TRIP METER USING THE GEOLOCATION API - Disponível emhttp://www.html5rocks.com/en/tutorials/geolocation/trip_meter/?redirect_from_locale=ptacessado em 22/06/2012.Email – Disponível em http://www.w3.org/TR/html5/states-of-the-type-attribute.html#e-mail-state-type-email acessado em 26/06/2012.Verificação Ortográfica – Disponível em- http://msdn.microsoft.com/pt-br/library/ie/hh920763(v=vs.85).aspx – acessado em 27/09/2012Datails – Disponível em https://developer.mozilla.org/pt-BR/docs/HTML/Element/detailsacessado em 04/10/2012.Summary – disponível em https://developer.mozilla.org/pt-BR/docs/HTML/Element/summary acessado em 04/10/2012.Elementos details e summary – Disponível emhttp://www.maujor.com/blog/2011/08/10/elementos-details-e-summary-da-html5/ - acessadoem 05/10/2012.Motores de renderização – Disponível em http://www.w3tricks.net/motores-de-renderizacao/ - Acessado em 04/10/2012.
  • 99. 95HTML5 Input Types– Disponível emhttp://www.w3schools.com/html/html5_form_input_types.asp - acessado em 04/10/2012.Meter – Disponível em https://developer.mozilla.org/pt-BR/docs/HTML/Element/meter -Acessado em 06/10/2012.HTML5 contenteditable Attribute – Disponível emhttp://www.w3schools.com/html5/att_global_contenteditable.asp - Acessado em 06/10/2012.HTML ISO-8859-1 Reference – Disponível emhttp://www.w3schools.com/tags/ref_entities.asp - Acessado em 10/10/2012.
  • 100. 966.GLOSSÁRIOApple – Empresa multinacional norte-americana que atua no ramo de aparelhos eletrônicos einformática. Adobe-Flash ;Blog - Um blog é um site que tem como função a publicação de textos, foto ou video, emcima de plataforma HTML, de forma cronlogica, essas publicações são chamadas depostagens;Browser / Navegador - É um software que faz com que seus usuários possam acessar osdocumentos e aplicativos da Internet;Cache – Memoria acessível do computador;Coodecs –É um codificador, normalmente um formato de alguma coisa;Desktop- Computador pessoal ;Firefox – Navegador de internetcom código livre e multi-plataforma desenvolvido pelaMozilla Foundation;Google – Empresa de pesquisa e desenvolvimento, que tem o site mais acessado no mundo;Hardware – Parte física do computador ;Home-Page –É a minha pagina pessoal, exemplo a página de uma empresa ;Insensitive – Recurso que não distingue caracteres minúsculos de maiúsculos ;Java – Linguagem de programação e desenvolvimento;Layout - Forma como se dá a estruturação e disposição de elementos em uma página web;Links – Endereço para acesso interno para dentro do site, externo de algum lugar externo;Lista Ordenada – Uma lista organizada por itens em sequencia;Meta-linguagem- Linguagem utilizada para a descrição de outras linguagens ;Microsoft: Empresa responsável pelo desenvolvimento de sistemas operacionais, edesenvolvimento de aplicativos;
  • 101. 97Microsoft Silvelight –Plataforma de desenvolvimento de aplicativos da empresa Microsoft;Mp3 – Formato de arquivo de áudio;Mp4 – Formato de arquivo de vídeo;Ogg- Formato de áudio e vídeo;Plug-ins – Software que pode trabalhar em conjunto com outro. São desenvolvidos paracontrolar dispositivos ou implementar novas funções especificas;Semântica– Refere-se ao estudo de um significado;Safari – Navegador de internet da empresa apple;Scripts - Consiste em um conjunto de instruções para um programa ou aplicativo;software –É o conjunto ou tipo de programas, dados, rotinas e ferramentas desenvolvidos paracomputadores;off-line – Significa não conectado a rede;Opera – Navegador de internet;Rede Social – Meio de comunicação entre as pessoas através de internet, possibilitandocompartilhamento de fotos e vídeos ex: Facebook e Orkut.Smartphone – Celular mais avançado com acesso a internet e a recursos como áudio e vídeo;Tablets- Computador portátil, com tamanho reduzido;URI - é uma cadeia de caracteres compacta usada para identificar ou denominar um recursona Internet;