HTML5 - Introdução (eBook) by Grupo Lidel

HTML5 INTRODUÇÃO

Pedro Coelho

FCA – Editora de Informática, Lda. www.fca.pt

EDIÇÃO FCA – Editora de Informática, Lda. www.fca.pt Copyright © 2016, FCA – Editora de Informática, Lda. ISBN eBook: 978-972-722-825-6 1.ª edição eBook: abril 2016 Capa: José Manuel Ferrão – Look-Ahead Todos os nossos livros passam por um rigoroso controlo de qualidade, no entanto aconselhamos a consulta periódica do nosso site (www.fca.pt) para fazer o download de eventuais correções. Não nos responsabilizamos por desatualizações das hiperligações presentes nesta obra, que foram verificadas à data de publicação da mesma. Os nomes comerciais referenciados neste livro têm patente registada. Reservados todos os direitos. Esta publicação não pode ser reproduzida, nem transmitida, no todo ou em parte, por qualquer processo eletrónico, mecânico, fotocópia, digitalização, gravação, sistema de armazenamento e disponibilização de informação, sítio Web, blogue ou outros, sem prévia autorização escrita da Editora.

ÍNDICE GERAL 0. SOBRE O LIVRO 0.1. O que posso encontrar neste livro 0.2. Requisitos 0.3. A quem se dirige este livro 0.4. Código dos exemplos 0.5. Convenções 0.6. Sobre o Autor 0.7. Organização do livro 0.8. Suporte 1. INTRODUÇÃO AO HTML: UM POUCO DE HISTÓRIA 1.1. World Wide Web 1.2. Web móvel 1.3. Versões do HTML 1.4. XHTML 1.5. HTML5 Conclusão 2. HTML5: O QUE TRAZ DE NOVO? 2.1. Novas funcionalidades 2.2. Alterações à sintaxe 2.3. Novas tags 2.3.1. Layout 2.3.2. Novos elementos semânticos 2.3.3. Novas tags multimédia 2.3.4. Novas funcionalidades nas forms 2.3.5. Suporte internacional 2.3.6. Novos atributos

2.3.7. Alterações a tags e atributos HTML4 2.4. Suporte Mobile Conclusão 3. SINTAXE HTML5 PARA WEB E MOBILE 3.1. Sintaxe básica 3.2. As tags HTML tradicionais 3.2.1. Formatação de texto 3.2.2. Listas 3.2.3. Tabelas 3.2.4. Carateres internacionais 3.2.5. Gráficos 3.2.6. Links 3.3. Folhas de Estilo 3.4. Estruturação de páginas Web 3.5. Tags HTML - resumo Conclusão 4. ÁUDIO E VÍDEO 4.1. Vídeo 4.2. Áudio 4.3. Tags e atributos de controlo Conclusão 5. FORMS 5.1. Elementos constituintes dos formulários 5.1.1. Textarea 5.1.2. Select 5.1.3. Input 5.1.4. Placeholder text 5.1.5. Autofocus e autocomplete 5.1.6. Output

5.1.7. Menu 5.2. Scripts de interpretação Conclusão GLOSSÁRIO DE TERMOS - PORTUGUÊS EUROPEU/PORTUGUÊS DO BRASIL ÍNDICE REMISSIVO COMPLEMENTOS NA WEB

SOBRE O LIVRO

0.1 O QUE POSSO ENCONTRAR NESTE LIVRO Este livro foca-se no HTML5 e em como este pode ser utilizado para a criação de sites e aplicações Web e mobile. Para além de cobrir a totalidade da sintaxe HTML, são apresentadas as principais diferenças em relação às versões anteriores da tecnologia.

0.2 REQUISITOS O leitor tirará melhor partido deste livro se já tiver algumas noções de HTML, embora não seja essencial que o domine. Não são necessários conhecimentos prévios de programação, mas a instalação e configuração dos ambientes (por exemplo, para ver os exemplos) poderá suscitar algumas dúvidas em leitores menos experimentados, razão pela qual se recomenda que o leitor tenha algumas noções de Web e o conhecimento de como funcionam os ambientes de desenvolvimento. Segue-se, contudo, uma abordagem passo a passo para os vários temas. Para tirar o melhor partido possível dos exemplos, o leitor deverá instalar um editor (recomenda-se o Eclipse) e abrir uma conta num ambiente de desenvolvimento cloud (sugere-se o Heroku, gratuito para baixos volumes de utilização).

0.3 A QUEM SE DIRIGE ESTE LIVRO Este livro destina-se a quem pretenda iniciar-se no desenvolvimento de sites e aplicações móveis, com recurso a uma tecnologia simples e acessível, como é o HTML5. Destina-se, ainda, aos programadores e autores de sites Web que pretendam utilizar o HTML5 para tornar as suas páginas acessíveis por qualquer dispositivo.

0.4 CÓDIGO DOS EXEMPLOS O livro vem acompanhado do código dos exemplos que são apresentados ao longo dos vários capítulos, com uma nomenclatura que torna simples ao leitor localizar qualquer um deles. Caso o leitor use o Eclipse, pode importar os ficheiros diretamente para os seus projetos e testar as funcionalidades descritas (de notar, no entanto, que para publicar conteúdos na Web tem de dispor de uma conta para o efeito, podendo, conforme aconteceu nos exemplos do livro, utilizar os serviços online do Heroku (integrável diretamente com o seu Eclipse). Todos os exemplos apresentados foram testados com um dispositivo real, com emuladores e com browsers Web, conforme os exemplos.

0.5 CONVENÇÕES Nos exemplos listados optou-se por mostrar todo o código HTML tal como foi testado. Em situações específicas extraiu-se parte desse código para realçar algum detalhe, mas no geral a regra seguida foi a de mostrar todo o código, para possibilitar ao leitor um total enquadramento. Utilizou-se a expressão anglo-saxónica tag para designar os elementos HTML.

0.6 SOBRE O AUTOR Licenciado em Engenharia Eletrotécnica e de Computadores pelo Instituto Superior Técnico. Consultor e Gestor de Projetos de TI nas áreas da Web e da Internet. Com mais de 20 anos de experiência, já esteve envolvido em grandes projetos. Responsável pela implantação de Sistemas de TI (Billing, CRM, Provisioning, Plataformas de Serviços, etc.), redes de dados (TCP/IP), infraestruturas de serviço completo (ISP), serviços de Internet e aplicações complexas, e liderança dos departamentos de TI. Autor de vários livros sobre Sistemas de Informação, Internet, Web e Pro-gramação, todos editados pela FCA.

0.7 ORGANIZAÇÃO DO LIVRO O livro foi estruturado em 5 capítulos, seguindo uma lógica de aprendizagem sequencial das várias componentes da tecnologia: Capítulo 1: “Introdução ao HTML: Um Pouco de História” – capítulo introdutório no qual se descreve as evoluções do HTML e se enquadra o HTML5 no contexto das evoluções da Web e da tecnologia mobile; Capítulo 2: “HTML5: O Que Traz de Novo?” – descreve-se as funcionalidades que a versão 5 do HTML veio trazer, incluindo os temas móveis. Para os leitores que já saibam HTML, este enquadramento será especialmente útil; Capítulo 3: “Sintaxe HTML5 para Web e Mobile” – cobertura exaustiva da sintaxe HTML5 para Web e mobile; Capítulo 4: “Áudio e Vídeo” – versa a gestão dos elementos de áudio e de vídeo em HTML5, incluindo a forma como se pode interagir programaticamente com estes elementos; Capítulo 5: “Forms” – utilização de formulários.

0.8 SUPORTE Todos os exemplos foram testados com dispositivos móveis reais e emuladores, não sendo expectável que surjam problemas de compatibilidade de versões em terminais ou browsers recentes. Para qualquer questão, problema ou dúvida, o leitor poderá contactar o autor através do e-mail pac@pedrocoelho.com.

INTRODUÇÃO AO HTML: UM POUCO DE HISTÓRIA

A tecnologia HTML foi criada originalmente como suporte à codificação de páginas de Hipertexto, conceito sobre o qual foi construída a World Wide Web no início dos anos 90. Inicialmente muito simples e vocacionada para descrever conteúdos estáticos no âmbito de computadores fixos, o HTML standardizou-se e evoluiu bastante nas décadas seguintes, cada vez com funcionalidades mais avançadas. Mas a versão HTML5 veio trazer uma das maiores revoluções até à data na linguagem, ao potenciar a construção de conteúdos e aplicações que tanto funcionam na Web tradicional como no elevado número de dispositivos móveis (telefones, tablets e outros dispositivos) que hoje utilizamos.

1.1 WORLD WIDE WEB Quando em março de 1989 Tim Berners-Lee propôs a utilização de um conceito novo à época, o Hipertexto, para partilha de conteúdos em ambiente de rede, não imaginava a enorme revolução que estava a iniciar. O conceito era simples: os utilizadores acederiam a endereços, que apontariam para os conteúdos em si, e que só seriam carregados quando acedidos (os vulgares links). Esta filosofia tinha enormes vantagens numa altura em que as comunicações eram difíceis e caras, e em que era muito importante limitar o consumo de recursos na rede, garantindo no entanto a disponibilidade do acesso à informação para os utilizadores. Após alguma discussão interna na organização onde Lee trabalhava, o CERN, o conceito de Hipertexto materializou-se numa linguagem

simples chamada Hypertext Markup Language ou HTML. O sistema foi desenvolvido pelo próprio Lee em finais de 1990. Na verdade, a construção do HTML inicial foi muito baseada numa metalinguagem que existia na época, o SGML, que na altura já era utilizada na marcação de documentos. O HTML era considerado na verdade uma aplicação do SGML. O HTML é utilizado para codificar as páginas a disponibilizar no servidor WWW, sendo os mesmos transferidos através da Internet com recurso ao protocolo “http” (Hypertext Transfer Protocol) (Figura 1.1).

FIGURA 1.1 – Acesso HTTP

O HTML formata o texto segundo as chamadas marcas de formatação HTML. Algumas bases da linguagem mantêm-se desde a origem até aos dias de hoje. Como mero exemplo, a instrução A minha primeira linha provocaria que aparecesse no ecrã de qualquer computador (independentemente do sistema operativo e do browser) a frase respetiva sublinhada, algo do estilo:

A minha primeira linha Uma das grandes vantagens do HTML era o facto de o código das páginas poder ser escrito com qualquer editor de texto, uma vez que se trata de texto vulgar (ASCII). Para qualquer criador de páginas Web, perceber HTML significava, assim, dominar a fundo o conjunto de marcas de

formatação disponíveis, saber aplicá-las de uma forma sintaticamente correta e compreender o efeito que têm sobre a forma como a página aparece no ecrã, o que estava ao alcance de utilizadores que não fossem necessariamente programadores. Num documento HTML, as marcas de formatação são sempre delimitadas pelos carateres “<” e “>”. Uma marca de formatação inicia a aplicação de uma determinada característica a uma zona de texto e deve sempre corresponder a uma outra marca a terminar a aplicação dessa característica. De notar que as eventuais mudanças de linha, ou sinais de pontuação, não terminam por si a aplicação de uma formatação específica a uma zona de texto. Considere-se o seguinte exemplo: Isto e um teste! Destina-se a demonstrar que as marcas de formatacao definem a apresentacao para um documento. A zona compreendida entre as marcas e irá aparecer no ecrã do cliente como realçada (bold). Para terminar o efeito causado por uma determinada marca de formatação, deverá ser usado o caráter “/” a preceder o caráter correspondente à marca. O documento HTML era normalmente composto por três zonas principais, nomeadamente, cabeçalho, corpo e endereço (Figura 1.2):

FIGURA 1.2 – Composição de documento HTML

Para a construção de um documento, as zonas indicadas deverão ser demarcadas pelos carateres de formatação respetivos (Quadro 1.1): <!DOCTYPE …>

Indica ao browser qual a versão de HTML utilizada

<HTML>

</HTML>

Delimita o início/fim do documento

<HEAD>

</HEAD>

Delimita o cabeçalho (título incluído)

<TITLE>

</TITLE>

Delimita o título (aparece no topo da janela)

</BODY> </ADDRESS>

Marca os limites do corpo do documento Zona para colocação do endereço de correio eletrónico do autor

QUADRO 1.1 – Principais tags HTML de demarcação

As marcas <HTML> e </HTML> delimitam o documento HTML. A primeira versão do HTML era na verdade utilizada num sistema WWW baseado em texto. Não existiam os browsers que existem hoje, muitos utilizadores nem sequer utilizavam ambientes de janelas para aceder à Internet, que aliás só era conhecida de um número restrito de utilizadores, ligados a universidades ou à investigação. Na altura utilizava-se um browser de texto que tinha o aspeto que mostra a Figura 1.3, obtido a partir de um dos vários clientes Lynx que ainda hoje existem disponíveis para utilização na Internet.

FIGURA 1.3 – Browser Lynx

Nos grupos de discussão da Internet na altura debatia-se como a Web e o HTML deveriam evoluir. Até que em 1993 se deu uma das maiores evoluções da tecnologia, o aparecimento do primeiro browser, chamado Mosaic (Figura 1.4). Não tendo sido o primeiro browser a aparecer, foi sem dúvida o primeiro a ser usado de forma generalizada. Embora hoje pareça um software banal, que aliás não permitiria a visualização da maior parte dos sites existentes, na altura representou algo de absolutamente revolucionário.

FIGURA 1.4 – Browser Mosaic

A partir desta altura, em especial depois de 1994, a Web começou a chegar ao grande público. Em simultâneo criou-se no seio do Massachusetts Institute of Technology (MIT) nos Estados Unidos uma instituição chamada W3C, que ainda hoje gere as sucessivas versões do HTML, e em especial preocupa-se com a sua standardização. Seguiram-se nos anos seguintes sucessivas versões de HTML e browsers cada vez mais evoluídos. Em 1994, surgiu uma empresa que

criaria um browser histórico, o Netscape. O browser Netscape surgiu em 1994 e protagonizou uma das maiores lutas de mercado na Internet, ao disputar o mercado dos anos 90 com o Internet Explorer da Microsoft, que surgiu em 1995. Ambos existem ainda hoje: o Netscape é agora o Mozilla e o Internet Explorer tem tido novas versões com regularidade. Hoje em dia o conjunto de browsers dominantes é o que se encontra representado na Figura 1.5. Além do Internet Explorer e do Mozilla Firefox, existem o Opera e o Safari, e o largamente dominante Google Chrome, um browser lançado apenas em 2008 mas que tem tomado o mercado dos browsers “de assalto”, sobretudo devido à integração que potencia com uma série de produtos da Google e à boa qualidade do produto final. Contudo, encontram-se ainda em funcionamento muitos outros browsers de outros tipos. Um dos problemas que foi necessário vencer nas sucessivas lutas pelo domínio do mercado dos browsers WWW foi a falta de standardização que existia em versões anteriores do HTML. Em determinados momentos, alguns fabricantes chegaram mesmo a criar extensões proprietárias suas ao HTML, o que levava que alguns sites só funcionassem bem com determinados browsers. Com os esforços do W3C e com a pressão dos utilizadores, este problema está hoje bastante atenuado, pese embora continuar a haver diferenças de comportamento entre os vários browsers e problemas com a utilização de alguns deles com alguns sites.

Fonte: Wikipedia FIGURA 1.5 – Browsers não móveis

1.2 WEB MÓVEL Quando na década de 90 se deram as grandes evoluções da Web, apareceram também as primeiras iniciativas de acesso a informação a partir de dispositivos móveis. Entre 1994 e 1996, os telefones móveis não tinham ainda este tipo de funcionalidades, mas existiam os PDA, onde foram criados os primeiros browsers móveis. Dispositivos como o Newton da Apple ou o Palm corriam este tipo de browsers. Os primeiros telefones móveis a utilizar browsers para aceder à Web surgiram pouco depois. Antes de surgirem browsers com capacidade de visualização de páginas Web vulgares baseadas em HTML, existiram browsers que utilizavam versões mais limitadas de linguagem markup como o WML (Wireless Markup Language) ou o CHTML (Compact Hypertext Markup Language). Este tipo de tecnologias destinava-se a mitigar os problemas resultantes

das limitações de tamanho de ecrã, de interfaces de navegação, falta de janelas, entre outras limitações. As opções de navegação tinham de respeitar as ditas limitações, nomeadamente com recurso somente às teclas do telefone, ecrã monocromático com capacidades gráficas limitadas e ausência de janelas (Figura 1.6). Este tipo de limitações traduziu-se em algumas dificuldades de adoção da tecnologia, que de facto não apresentou durante muito tempo os ritmos de adoção que a Web tradicional apresentava. Acrescia que o tráfego de dados durante muito tempo apresentava preços pouco interessantes, pelo menos até aparecer a tecnologia 3G, em 2003.

FIGURA 1.6 – Acesso WAP/WML em telemóvel nos anos 90

No final dos anos 90 surgiram no entanto dispositivos designados smartphones, que incorporavam funções de telefone e computador. Em breve, estes dispositivos começaram a surgir com sistemas operativos autónomos e a poder executar aplicações e a incorporar browsers para acesso à Web (Figura 1.7)

FIGURA 1.7 – Palm Treo, smartphone de 2004

Alguns fabricantes de browsers construíram excelentes browsers mobile para acesso à Web, como o Opera (com a sua versão mobile) e mais recentemente o Google Chrome. A partir deste momento, o acesso à Web em dispositivos móveis passou a ser possível quer acedendo a sites Web normais, quer acedendo a versões otimizadas para dispositivos móveis. Algumas das tecnologias disponíveis na altura apontavam já para a utilização de sistemas que transformavam conteúdos conforme o dispositivo que acedia aos mesmos; era comum nomeadamente a existência de conteúdos

base em XML e de transformações XSLT que, conforme o dispositivo que acedia, disponibilizavam HTML ou WML. Tudo isto mudou quando o W3C decidiu que o HTML5 deveria ser em si uma linguagem que pudesse ser inerentemente multidispositivo. Em 2011, o HTML5 foi finalizado e começou a ser implementado a partir de 2012. A revolução dos tablets, conceito introduzido em 2010 pela Apple, bem como o aparecimento de smartphones cada vez mais sofisticados baseados em iOS e Android, ajudaram na adoção da tecnologia e na respetiva standardização (Figura 1.8).

FIGURA 1.8 – Android Nexus, smartphone de 2012

O conceito que hoje se segue no que diz respeito a sites móveis, seguindo a filosofia do HTML5, é que todos os conteúdos podem ser vistos independentemente do dispositivo que os consulta. Ou seja, um PC, com uma resolução mais generosa, verá o site com um determinado aspeto, um tablet com uma resolução ligeiramente inferior verá um agrupamento otimizado para as suas condições de visualização, e um telemóvel verá um agrupamento diferente de objetos, sendo que todos os dispositivos acedem às mesmas páginas HTML.

1.3 VERSÕES DO HTML Logo após a criação do HTML, foi criado um grupo no seio do Internet Engineering Task Force (IETF) para gerir a linguagem, até à criação da entidade W3C. Desde a sua criação, o W3C definiu diversas versões de HTML, traduzindo estratégias diferentes perante a Web. Os fabricantes de browsers não são naturalmente obrigados a incorporar nos seus produtos todas as funcionalidades previstas, e, em muitos casos, quer por motivos políticos quer por interesses próprios, não o fizeram. Veja-se, em seguida, as sucessivas versões de HTML que apareceram: HTML original – em 1994 foi criado o IETF HTML specification group, que começou a trabalhar numa versão 2 de imediato; HTML2.0 – publicada em 1995, com revisões até 1997. Introduziu-se o carregamento de ficheiros, tabelas, imagemaps e funcionalidades de integração; HTML3.2 – publicada em 1997 (já pelo W3C). Foi uma versão de compromisso que acabou com marcas proprietárias que vinham da Netscape e da Microsoft, e que traduziu pela primeira vez um objetivo de standardização da linguagem para todos os browsers; HTML4.0 – publicada em dezembro de 1997, e com alguns ajustes até 1999, esta versão incorporou um conjunto alargado de marcas específicas dos diversos browsers, mas descontinuou várias outras. Caracterizava-se por ter três variantes (estrita, transitória, frameset), uma das quais (a estrita) exigia uma correção sintática que não era prática na Web. Muitos viam nesta altura a evolução do HTML para uma linguagem XML com sintaxe muito rígida (XHTML), por oposição à forma como tradicionalmente se encarava o rigor sintático no HTML. A versão transitória, contudo, permitia tudo, mesmo os elementos que estavam desatualizados;

HTML4.01 – publicada em dezembro de 1999 e revista em 2001, incorporava ligeiros ajustes. Hoje em dia, a esmagadora maioria das páginas Web na Internet seguem as especificações 4 ou 4.01; XHTML1.0 – publicada em 2000 e revista em 2002, consistia numa versão estrita do HTML, com grande rigor sintático. Apesar de tudo, apresentava as mesmas três versões do HTML4.0 e 4.01, duas das quais não são estritas; XHTML1.1 – publicada em 2001, era uma versão estrita com ligeiras alterações; XHTML2.0 – versão trabalhada ao longo de vários anos, mas que nunca saiu de draft. Foi abandonada em 2009; HTML5 – draft publicado em 2008. Veio introduzir a mobilidade e o multidispositivo como conceitos base. Rompeu com a rigidez sintática do XHTML. Apesar disto, o W3C tem um XHTML5.1 definido no draft do HTML5; HTML5.1 – draft em curso em janeiro de 2014. Apesar da existência de todas estas versões, os fabricantes de browsers não se têm sentido tentados em implementar todas as funcionalidades previstas nas especificações. De facto, muitos dos problemas que sentimos ao longo dos últimos anos com a forma como os diferentes browsers visualizavam de forma diferente, ou com erros, páginas WWW derivavam destes problemas, e da necessidade de os implementadores de sites testarem os seus sites com múltiplos browsers, para identificarem problemas de interpretação do seu código HTML.