Sérgio Luiz Tonsig
APLICAÇÕES NA NUVEM COMO CONSTRUIR COM
HTML5, JAVASCRIPT, CSS, PHP
E MYSQL
Aplicações na Nuvem - como construir com HTML5, Javascript, CSS, PHP e
MySQL
Copyright¤ Editora Ciência Moderna Ltda., 2012
Todos os direitos para a língua portuguesa reservados pela EDITORA CIÊNCIA
MODERNA LTDA.
De acordo com a Lei 9.610, de 19/2/1998, nenhuma parte deste livro poderá ser
reproduzida, transmitida e gravada, por qualquer meio eletrônico, mecânico, por
fotocópia e outros, sem a prévia autorização, por escrito, da Editora.
Editor: Paulo André P. Marques
Produção Editorial: Aline Vieira Marques
Assistente Editorial: Lorena Fernandes
Capa: Rodrigo Martins
Diagramação: Lúcia Quaresma
Copidesque: Lorena Fernandes
Várias Marcas Registradas aparecem no decorrer deste livro. Mais do que
simplesmente listar esses nomes e informar quem possui seus direitos de
exploração, ou ainda imprimir os logotipos das mesmas, o editor declara estar
utilizando tais nomes apenas para fins editoriais, em benefício exclusivo do dono da
Marca Registrada, sem intenção de infringir as regras de sua utilização. Qualquer
semelhança em nomes próprios e acontecimentos será mera coincidência.
FICHA CATALOGRÁFICA
TONSIG, Sérgio Luiz.
Aplicações na Nuvem - como construir com HTML5, Javascript, CSS, PHP
e MySQL
Rio de Janeiro: Editora Ciência Moderna Ltda., 2012.
1. Programação de Computador – Programas e Dados 2. Ciência da
Computação
I — Título
ISBN: 978-85-399-0335-1
Editora Ciência Moderna Ltda.
R. Alice Figueiredo, 46 – Riachuelo
Rio de Janeiro, RJ – Brasil CEP: 20.950-150
Tel: (21) 2201-6662/ Fax: (21) 2201-6896
E-MAIL: [email protected]
WWW.LCM.COM.BR
CDD 005
004
10/12
Garantias
O autor acredita que todas as informações aqui apresentadas estão corretas e podem ser utilizadas para qualquer fim legal. Entretanto,
não existe qualquer garantia explícita ou implícita de que o uso de tais
informações conduzirá sempre ao resultado desejado. Os nomes e endereços de sites, produtos e empresas, porventura mencionados, foram
utilizados apenas para ilustrar os exemplos, não tendo vínculo algum
com este material. O autor não se responsabiliza pela existência futura
dos endereços de sites web mencionados. Todos os nomes registrados,
marcas registradas ou direitos de uso citados neste material, pertencem
aos respectivos proprietários.
“Que os nossos esforços desafiem as
impossibilidades. Lembrai-vos que as
grandes proezas da história foram conquistas
daquilo que parecia impossível.”
Sir Charles Spencer Chaplin - mais conhecido
como Charlie Chaplin - Londres, 16 de abril de
1889 / Corsier-sur-Vevey, 25 de dezembro de 1977.
Sumário
Prefácio
Capítulo 1: HTML 5 Uma Introdução
xv
1
1.1.
As Principais Novidades
4
1.2.
O Tipo de Documento no HTML 5
7
1.3.
Definição do Conjunto de Caracteres no Documento
11
1.4.
Estrutura Básica Geral com HTML 5
12
Capítulo 2: Modelo de Objetos do
Documento e o HTML5
2.1.
2.2.
17
DOM e HTML 5
18
2.1.1.
JavaScript e o DOM com HTML 5
20
Novos Recursos Estruturais no HTML 5
22
2.2.1
A Tag SECTION
27
2.2.2
A Tag ARTICLE
29
2.2.3
As Tags HEADER e FOOTER
30
2.2.4
A Tag NAV
30
2.2.5
A Tag ASIDE
30
2.2.6
A Tag TIME
30
2.2.7
A Tag DETAILS / SUMMARY
32
viii | Aplicações na Nuvem
Capítulo 3: Canvas, Imagens, Animações,
Áudio e Vídeo
3.1.
Canvas
35
35
3.1.1
Gradiente
38
3.1.2
Paths
41
3.1.3
Formas geométricas
45
3.1.4
Usando Imagens com Canvas
3.1.4.1 Escrevendo Sobre uma Imagem
3.1.4.2 Alterando pixels em Imagens
3.1.4.3 Animando Imagens
3.1.4.4 Aninando Figuras Geométricas
48
51
53
55
60
3.1.5.
Áudio
3.1.5.1
3.1.5.2
Buffer de Áudio
Controlando o Áudio com JavaScript
66
68
69
Vídeo
3.1.6.1
3.1.5.2
Buffer de Vídeo
Controlando o Vídeo com JavaScript
70
73
74
3.1.6.
Capítulo 4: Formulários
79
4.1.
Novos Tipos e Novos Atributos na Tag <Input>
80
4.2.
Exemplo de um Formulário
85
4.3.
Validações Personalizadas
88
4.4.
Outras Validações e Formatações
92
Capítulo 5: Geolocalização
95
5.1.
Introdução
95
5.1.
Geolocalização – Primeiros Passos
96
5.2.
Buscando a Localização
98
5.3.
Mobilidade e Localização
103
Sumário | ix
Capítulo 6: API Storage
111
6.1.
Visão Geral
111
6.2.
Armazenamento e Recuperação
113
6.3.
Sincronismo de Dados
116
6.4.
Segurança
121
Capítulo 7: Miscelânea HTML5
7.1.
123
Drag and Drop
123
7.1.1
Detectando o Recurso
124
7.1.2
Definindo Objetos que podem ser Arrastados
124
7.1.3
Eventos de Mouse para Arrastar e Soltar
126
7.1.4
Exemplo com Arrastar e Soltar
126
7.2.
Messaging
132
7.3.
Web Workers
132
7.4.
WebSocket
140
Capítulo 8: Principais Recursos da Linguagem PHP 145
8.1.
Instalação e Configuração do PHP
146
8.1.1
147
MySQL e Biblioteca Gráfica no PHP
8.2.
Scripts em PHP
150
8.3.
PHP – Comentários no Código
151
8.4.
Tipos de Dados
152
8.5.
Operadores Lógicos, de Atribuição e Aritméticos
155
8.6.
Inspeção do Tipo de Dados
157
8.7.
Comando If
158
8.8.
Comando Switch
159
x | Aplicações na Nuvem
8.9.
Comando foreach
160
8.10.
Loops Condicionais
161
8.10.1
Comando while
161
8.10.2
Comando do - while
162
8.10.3
Comando for
163
8.11.
Inclusão de Fragmentos de Código
165
8.12.
Funções
167
8.13.
Modelo Baseado em Objetos
169
8.14.
8.13.1
Classes
170
8.13.2
Subclasses
173
Acesso a Banco de Dados
176
8.14.1
Acesso ao Banco de Dados MySQL
177
8.14.2
Introdução ao PHP Data Objects (PDO)
180
8.14.3
Conexão PDO com MySQL
181
8.14.4
Métodos existentes no PDO
183
Capítulo 9: Estudo de Caso
9.1.
9.2.
185
Instalação Inicial
185
9.1.1
Biblioteca Gráfica
186
9.1.2
Outros Recursos Gráficos Utilizados
187
O Sistema Exemplo
188
9.2.1
Acesso ao Sistema
188
9.2.2
Montagem do Menu do Sistema
195
9.2.3
Estratégias de Implementação
199
9.2.4
Acesso dos gráficos via Dispositivo Móvel
204
Sumário | xi
Anexo I:
Sistema de Coordenadas no
Plano Cartesiano
211
A-I.1.
Introdução
211
A-I.2
O Plano Cartesiano
212
A-I.3
Trigonometria, Seno e Cosseno
214
A-I.4
Coordenadas Polares
217
A-1.5
Relação com as Coordenadas Cartesianas
217
Anexo II:
A importância das Interfaces Gráficas
para Sistemas de Informação
219
A-2.1
Interface – Uma Definição
220
A-2.2
Por que as Interfaces são Importantes ?
221
A-2.3
Atividade Multidisciplinar
222
A-2.3.1
Ciência da Computação
223
A-2.3.2
Psicologia
223
A-2.3.3
Ergonomia
223
A-2.3.4
Linguística
223
A-2.3.5
Sociologia
224
A-2.3.6
Tipografia ou Desenho Gráfico
224
A-2.4
O Desenvolvimento de Interfaces
224
A-2.5 Atividades de Produção da Interface
225
A-2.5.1
Levantamento de Requisitos
225
A-2.5.2
Aspectos Psicológicos, Motores e
Ergonômicos
226
Etapa de Projeto
Comunicação Clara
Minimizar a possibilidade de erros
Minimizar a necessidade de memorização
226
227
227
227
A-2.5.3
xii | Aplicações na Nuvem
Escolha de elementos de entrada e saída
Cuidados com requisitos não funcionais
227
228
A-2.5.4
Implementação
228
A-2.5.5
Protótipo
229
A-2.5.6
Implantação
229
Anexo III: JavaScript
231
A-3.1.
Introdução
231
A-3.2.
Maneira de Inserir JavaScript no Documento HTML
231
A-3.3.
Elementos da Linguagem
232
A-3.3.1
Operadores Aritméticos e Lógicos
232
A-3.3.2
Caracteres Especiais de Controle
233
A-3.3.3
Escopo de Variáveis
234
A-3.3.4
Avisos e Mensagens
234
A-3.3.5
Criando Funções
235
A-3.3.6
Comandos Condicionais
235
A-3.3.7
Criando Instâncias de Objetos
236
A-3.3.8
Array
237
A-3.3.9
Funções que tratam String
237
A-3.3.10 Funções que tratam Datas
238
A-3.3.11 Funções Pré-Definidas
238
A-3.3.12 Como Acionar Funções a Partir do
Documento HTML
239
Referências Bibliográficas
241
Agradecimentos
Este trabalho é fruto de uma intensa atividade de pesquisa
e testes, que me mantiveram algemado junto ao computador
por vários finais de semana (agradeço por ter um computador
e poder usar os finais de semana).
Este trabalho também é resultado da interveniência de
muitas pessoas ao longo da minha vida profissional (agradeço
a todas elas). A miscigenação das coisas favoráveis e também
daquelas indesejadas certamente são o “tempero” necessário
ao amadurecimento e à busca de uma melhoria contínua (agradeço pelas coisas boas que aconteceram e também pelas indesejadas).
Um agradecimento especial para minha família: Marina,
Gabriela e Giovana. Falaram para eu ficar lá mesmo, sentado
na frente do computador trabalhando, ao invés de fazer aquele churrasco deixando aquele monte de coisas para limpar...
Quando finalmente me livrei das algemas, minhas filhas perguntaram: “Quando é mesmo que vai sair seu primeiro livro de
romance?” (agradeço pela amizade, inspiração, imaginação e
desafios).
Por fim, uma dessas pequenas coincidências da vida: é o
meu quinto livro na área de tecnologia da informação, no primeiro cinquentenário de minha experiência terrena (em 1212-12) - agradeço a Deus pela vida.
Prefácio
A computação em nuvem (cloud computing) é um conceito simbólico, que se refere à utilização de recursos (programas
e dados) na Web através da Internet. Utilizando a Internet um
usuário pode ter acesso a diversos sistemas em qualquer lugar
do planeta (“na nuvem”). Fazendo uma analogia à construção
civil, construir na nuvem é criar um sistema de informação e
disponibilizar a alguém que, na grande maioria dos casos terá
como interface, a linguagem HTML.
O assunto principal deste livro é o HTML5, que permite a
criação de páginas na Web.
Atualmente, em um cenário de proliferação de diversos
dispositivos que podem acessar a Web, com acesso a inúmeros
aplicativos na “nuvem”, é importantwe ao desenvolvedor
de software ou ao estudante de Tecnologia da Informação o
conhecimento dos mecanismos de criação de uma página,
empregando os vários recursos disponibilizados a partir da
versão 5 da linguagem HTML.
Porém, o livro não se limita apenas a apresentar as
informações sobre os recursos HTML5. Ele acrescenta
detalhes da integração com folhas de estilo (CSS), JavaScript,
linguagem PHP e banco de dados MySQL. A ideia é permitir
que o leitor tenha um entendimento global sobre a participação
da linguagem HTML5 no desenvolvimento de um sistema de
informação.
Cada recurso existente na linguagem HTML5 é explorado
em detalhes, com explicações ricamente ilustradas. À medida
xvi | Aplicações na Nuvem
que houver a leitura dos capítulos, é interessante que o leitor
crie páginas semelhantes àquelas vistas no capítulo lido, para
que possa apreender o conteúdo e não simplesmente aprender.
As páginas que são apresentadas nos capítulos, as folhas
de estilo, bem como o código fonte das linguagens JavaScript e
PHP podem ser obtidos via download junto ao site da Editora.
Boa Leitura, bom estudo e boa prática!
HTML 5
UMA INTRODUÇÃO
1
“Raros são aqueles que decidem após
madura reflexão; os outros andam ao
sabor das ondas e longe de se conduzirem
deixam-se levar pelos primeiros.”
(Lucius Annaeus Sêneca, Escritor e
Intelectual do Império Romano –
4 a.C. / 65 d.C.).
No ano de 2004 teve início o trabalho para o
desenvolvimento de uma nova versão da linguagem HTML1,
através de um grupo denominado Web Hypertext Application
Technology Working Group (WHATWG), que era integrado
por representantes de empresas como a Mozilla Fundation,
Opera Software ASA, Apple Inc, entre outras. Nesse mesmo
ano a W3C - World Wide Web Consortium (consórcio de
empresas de tecnologia que coordena os padrões da Internet)
estava focada no trabalho do futuro desenvolvimento da versão
1
Acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de
Marcação de Hipertexto, utilizada para criação de páginas na Web. Tim Berners-Lee criou o
HTML original no início da década de 90 e, de lá para cá, vem passando por sucessivas
melhorias, através das novas versões que são liberadas.
2 | Aplicações na Nuvem
2.0 da linguagem XHTML2, considerando que a HTML 4.01
não tinha sido atualizado desde 2001. Havia a expectativa que
a linguagem XHTML viesse substituir a HTML.
Por vários anos o W3C e o WHATWG trabalharam de forma dissociada, um ignorando a atividade do outro. Enquanto o
grupo WHATWG estava focado em formulários da Web e novos
recursos para o HTML, o W3C estava ocupado com a versão
2.0 do XHTML. Mas em outubro de 2006, ficou claro que o
WHATWG estava desenvolvendo um trabalho mais adequado
para impulsionar a HTML, enquanto a versão 2.0 do XHTML
estava definhando com alguns rascunhos e não implementada
em nenhum grande navegador (Pilgrim, 2010).
Ao final de 2006, Tim Berners-Lee, criador do HTML
e fundador da W3C, descontinuou o desenvolvimento do
XHTML 2.0 e anunciou que iria passar a trabalhar junto com
o grupo WHATWG3, prometendo a liberação final da versão
HTML 5 para 2012; de cuja primeira especificação foi anunciada ao mercado no início de 2008.
O HTML5 é a quinta versão da linguagem HTML. Esta
nova versão incorpora várias mudanças importantes com
relação às fuwncionalidades do HTML, como a semântica4 e
2
EXtensible HyperText Markup Language
3
Você também pode colaborar com o grupo se inscrevendo na lista de e-mail através da
página http://www.whatwg.org/mailing-list#specs para enviar suas sugestões sobre o HTML 5.
4
A Web semântica pressupõe mecanismos para dar significado às palavras publicadas e,
neste contexto, tem como finalidade conseguir atribuir um sentido aos conteúdos das
páginas de modo que seja perceptível tanto pelo ser humano como pelo computador. Não
se trata de treinar as máquinas para que se comportem como pessoas, mas sim desenvolver
recursos que tornem a informação legível para as máquinas.
- Linguagem Extensível para Marcação de
Hipertexto, uma aplicação XML, escrita para tentar substituir o HTML. Com XML você
cria seus próprios elementos de marcação e atributos para escrever seu documento web.
Isto significa que é você quem cria sua linguagem de marcação. Na HTML o conjunto de
elementos (tags) são fixas, pré-determinadas.
Capítulo 1: HTML 5 – Uma Introdução | 3
a acessibilidade5. As versões HTML que antecedem a versão 5
constituem um padrão sintático, com regras e formalidades
que facilitam o uso por parte das pessoas, mas é carente
com relação ao entendimento do conteúdo por parte de um
processo automatizado.
A evolução do HTML busca também eliminar a necessidade do uso de plug-ins6 para as aplicações multimídia nos navegadores. Essa característica deve ser um forte concorrente ao
Flash da Adobe, ao Silverlight da Microsoftware e, ao recente
JavaFX da Sun (Oracle).
Em torno de uma década sem atualizações, a forma de se
escrever páginas na Web passa por uma boa transformação. O
HTML5 incrementa uma série de recursos que o tornam diferenciado de tudo que já foi utilizado antes em termos de linguagem de marcação; mas, com um longo caminho para ser
finalizado, já que muitos navegadores utilizados, como o Internet Explorer, Opera, Safari, Firefox e Chrome ainda devem implementar partes dos recursos disponibilizados pela versão 5.
A tabela 01 apresenta uma síntese histórica referente a
evolução do HTML.
ANO
FATO HISTÓRICO
1989
HTML – Tim Berners Lee
1994
HTML2 e surgimento da World Wide Web Consortium
1997
HTML3.2
1999
HTML4.01
5
Muitos recursos do HTML5 têm sido construídos com a consideração de serem capazes de
executar em dispositivos móveis, como, por exemplo, os smartphones e tablets.
6
Um plug-in é um programa ou complemento instalado no navegador que permite a utilização de recursos não presentes na linguagem HTML.
4 | Aplicações na Nuvem
2000
XHTML 1.0
2001
XHTML 1.1 - CSS
2002
Ian Hickson (Opera) propõe estender HTML: Web Forms 2.0,
Web Apps 1.0
2004
Apple, Mozilla e Opera criam WHAT WG (Web Hypertext
Application Technology Working Group)
2006
W3C e WHATWG trabalham juntos no HTML5
2010-2012 Apple, Google, Microsoft, Mozilla e Opera implementam
HTML5
Tabela 1.1 - Síntese Histórica de Fatos Relacionados ao HTML
Na Web existem vários endereços em que se pode checar a compatibilidade dos navegadores com a versão cinco do
HTML, apresento três deles: http://html5rocks.com, http://caniuse.com e http://html5test.com.
1.1. As Principais Novidades
7
A linguagem de marcação da World Wide Web sempre foi
HTML. Originariamente, a HTML foi criada, essencialmente,
como uma linguagem para descrever documentos científicos
(W3C, 2011), embora a sua concepção geral e suas adaptações
ao longo dos anos permitiu-lhe ser usada para descrever uma
série de outros tipos de documentos.
A Web tem se mostrado um caminho bastante adequado
para continuar a ser uma plataforma de aplicativos, visto que
uma das metas da W3C é que a Web seja um espaço disponível
7
Principais fontes de informação na Web:
http://www.w3schools.com/html5
http://dev.w3.org/html5/spec/Overview.html
Capítulo 1: HTML 5 – Uma Introdução | 5
para todos, permitindo a comunicação humana, o comércio, o
compartilhamento de conhecimento, independentemente de
hardware, software, idioma, cultura, localização geográfica, de
habilidades físicas ou mentais.
Uma das áreas que ainda não tinham recebido a devida
atenção e, portanto, sem componentes específicos em HTML é
conhecida como Web Applications (David, 2010). Hoje, independentemente da finalidade do aplicativo, e, ainda que construído
para ambiente Desktop8, normalmente este aplicativo apresenta
alguma funcionalidade disponível na Web, buscando neste ambiente um mecanismo global mais apropriado para comunicação e acessibilidade. Nesse sentido é que se busca a evolução da
já clássica e conhecida “Web de documentos”, via agregação de
novos recursos para dar suporte à “Web dos dados”, tentando
viabilizar pesquisas como se fossem realizadas em um banco de
tradicional (relacional, hierárquico, etc.) (W3C, 2011).
As novidades não se restringem aos elementos da Web
Applications. Existem inúmeros outros recursos, que serão
explorados ao longo deste livro:
; Acesso nativo para áudio e vídeo, sem necessidade
de plug-ins.
; Elemento <canvas> para desenhos dinâmicos.
; Drag and Drop de elementos.
; Cross-document e cross-domain messages.
; Histórico de navegação em Ajax.
; Localização Geográfica.
; Network status (online/offline).
; Formulários – novos campos e validações.
8
Sistema construído para ser executado em uma única máquina ou em um ambiente de
rede local. Pode ou não ter uma interface gráfica.
6 | Aplicações na Nuvem
; Novos eventos para mouse.
; Editor de conteúdos em tempo real.
; Armazenamento de dados no lado cliente –
DataBase client-side.
; Web worker threads.
Em janeiro de 2011 a HTML 5 ganhou um logotipo, junto
com símbolos gráficos que mostram quais recursos estão sendo
utilizados em determinado site, para que uma pessoa, ao visitá-lo possa identificar, como por exemplo: CSS3 e multimídia.
Segundo o site oficial da W3C, o logotipo é “forte e confiável, universal como a linguagem de marcação que você escreve” (W3C, 2011).
Figura 1.1 – Logotipo HTML5
Na página http://www.w3.org/html/logo/ é possível fazer o
download das imagens do logotipo e dos recursos utilizados
com HTML 5. Também, é possível gerar a imagem mostrada na
figura 1.2 configurando os recursos que devem aparecer nela.
Capítulo 1: HTML 5 – Uma Introdução | 7
Figura 1.2 – Recursos com HTML5
Um site que venha a utilizar o HTML na versão 5 poderá
apresentar uma imagem, conforme ilustra a figura 1.2 mostrando os ícones que identificam os recursos empregados pelo site
junto com o HTML.
1.2. O Tipo de Documento no HTML 5
O Doctype deve ser a primeira linha de código do documento antes da tag HTML. A identificação do documento
HTML através da tag <doctype> ficou bastante simplificada, se
comparada com as versões anteriores. Agora basta informar
que o documento é do tipo HTML, conforme exemplo que
segue:
<!DOCTYPE html>
8 | Aplicações na Nuvem
Nas versões anteriores, o número de identificação da versão deveria estar declarada, como nos exemplos que seguem:
; html – versão 4.01
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
; html – versão 2.0
<!DOCTYPE html PUBLIC “-//IETF//DTD HTML 2.0//EN”>
; html – versão 1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//
EN”>
Nos exemplos apresentados a tag <doctype> informa:
“este documento é escrito em HTML 4.01” ou “Este documento está escrito em XHTML 1.0”. Para HTML 5 a tag <doctype>
não informa a versão em lugar algum, só informa que o documento é do tipo HTML.
A especificação completa nos exemplos mostrados devem
obedecer três parâmetros, conforme segue:
; Identificação Inicial <!DOCTYPE HTML
; A identificação pública
PUBLIC “-//W3C//DTD HTML 4.01//EN”
Capítulo 1: HTML 5 – Uma Introdução | 9
; Identificador do sistema
“http://www.w3.org/TR/html4/strict.dtd”>
Por dar suporte ao conteúdo escrito em versões anteriores, o novo <doctype> pode ser aplicado a qualquer tipo de documento HTML. Da mesma forma, qualquer versão futura do
HTML deverá suportar o conteúdo existente na versão 5.
Se um documento HTML5 incluir um elemento de versões anteriores o navegador tentará renderizar o elemento. Os
navegadores suportam recursos e não ligam para tipos de documentos, exceto em situações de doctype switching9.
Os navegadores atuais estão aptos a apresentar um arquivo HTML tanto no modo standards como no modo quirks. Isto
significa que diferentes regras são aplicadas para apresentar
um mesmo documento, umas para comportamento segundo
as recomendações do W3C e outras para comportamentos não
standards para versões antigas de navegadores.
Nas versões mais recentes da maioria dos navegadores,
o modo standards é acionado pela presença da declaração do
doctype. A ausência de um doctype pode resultar em diferentes
renderizações de um navegador para outro.
9
Nos navegadores, há duas opções para a renderização: modo standards ou quirks. No modo
standards, o navegador irá renderizar de acordo com as recomendações W3C. No modo
quirks, fará a tentativa de interpretação e renderização de acordo com as especificações
dos navegadores do final dos anos 90. O navegador decidirá qual modo de renderização
empregar através da tag doctype. Sua ausência implica, automaticamente, no modo quirks.
10 | Aplicações na Nuvem
Figura 1.3 – Modos de Renderização10
A figura 1.3 mostra a renderização de duas páginas com
marcação HTML e estilização CSS exatamente iguais. A única
diferença entre elas é que a página mostrada à esquerda tem
no início da sua especificação uma declaração doctype e a da
direita não tem a declaração.
Um arquivo marcado com uma declaração de doctype
apropriada normalmente é renderizado em modo standards
pela maioria dos navegadores mais recentes. A falta de um
doctype na marcação causa renderização em modo quirks.
10
Adaptado de: http://www.w3.org/International/articles/serving-xhtml/
Capítulo 1: HTML 5 – Uma Introdução | 11
1.3. Definição do Conjunto de Caracteres no
Documento
Para os padrões da Web, um conjunto de caracteres define uma variedade de letras e símbolos usados em um sistema
de escrita. Por exemplo, o conjunto de caracteres ISO-8859-6
abrange letras e símbolos necessários para muitas línguas com
base na caligrafia árabe, o conjunto de caracteres ISO-8859-1
utilizável pela maioria das Línguas Ocidentais Europeias.
O conteúdo da página deve mencionar qual o conjunto
de caracteres que foi utilizado no documento. Esta especificação também ficou bastante simplificada na versão 5, como
pode ser visto a seguir:
<meta charset=utf-8>
Nas versões anteriores, a especificação do conjunto de caracteres deve ser escrita conforme o exemplo:
<meta http-equiv=”Content-Type” content=”text/
html;charset=utf-8”>
Em função da internacionalização da Web, do direito
de acesso a todos, sem distinção da cultura, etc, sempre que
possível utilize o conjunto de caracteres utf-8. Uma codificação
Unicode,11 tal como utf-8 provê suporte para muitos idiomas,
inclusive para qualquer mistura de idiomas em uma página ou
formulários. O uso de UTF-8 elimina a necessidade de lógica
11 Conjunto de caracteres com mais de 107 mil caracteres que busca transcender as diferenças, barreiras e limite de grafias tornando-se um padrão na Web. O Unicode possui subconjuntos, como o utf-8.
12 | Aplicações na Nuvem
no lado do servidor para determinar a codificação de caracteres
individualizada para as diferentes páginas servidas ou dados
recebidos de formulários. Assim, fica bastante reduzida a
complexidade de criação de sites ou aplicações multi-língua.
Na versão 5, qualquer um dos formatos apresentados a
seguir é considerado válido para a especificação do conjunto
de caracteres.
<META CHARSET=UTF-8>
<META CHARSET=UTF-8 />
<META CHARSET=”UTF-8”>
<META CHARSET=”UTF-8” />
<meta charset=utf-8>
<meta charset=utf-8 />
<meta charset=”utf-8”>
<meta charset=”utf-8” />
<MeTa CHARset=utF-8>
1.4. Estrutura Básica Geral com HTML 5
A tag <html> deve ser empregada para marcar o início
do documento HTML, pois é a raiz na qual todos os demais
componentes da página estão agregados. A tag <html> possui o
atributo lang, que deve ser definida conforme segue:
<html lang=”pt-br”>
Capítulo 1: HTML 5 – Uma Introdução | 13
O atributo lang define em qual linguagem a página foi escrita. É importante para a interoperabilidade sistêmica, como,
por exemplo, sistemas de tradução.
A seguir, é apresentado um exemplo com o código básico
de uma página, utilizando a sintaxe html na versão 5.
O código básico apresentado irá produzir uma saída simples, conforme mostra a figura 1.4.
Figura 1.4 – Exemplo de uma página simples, com HTML 5.
14 | Aplicações na Nuvem
A nova versão HTML mantém a mesma interoperabilidade que já existia nas versões anteriores com relação às folhas
de estilos e Java Script. O exemplo apresentado a seguir mostra
como fica a construção de uma página utilizando folhas de estilo (que será abordada com maior detalhe nos próximos capítulos).
O conteúdo do arquivo estilo01.css utilizado no exemplo
pode ser visto a seguir.
Capítulo 1: HTML 5 – Uma Introdução | 15
Figura 1.5 – Exemplo mais elaborado com uso de folhas de estilo.