APLICAÇÕES NA NUVEM - COMO CONSTRUIR COM HTML5, JAVASCRIPT...

APLICAÇÕES NA NUVEM - COMO CONSTRUIR COM

HTML5, JAVASCRIPT, CSS, PHP E MYSQL

Sérgio Luiz Tonsig

Aplicações na Nuvem - como construir com HTML5, Javascript, CSS, PHP e MySQLCopyright� 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. MarquesProdução Editorial: Aline Vieira MarquesAssistente Editorial: Lorena FernandesCapa: Rodrigo MartinsDiagramação: Lúcia QuaresmaCopidesque: 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çãoI — Título

ISBN: 978-85-399-0335-1 CDD 005 004

Editora Ciência Moderna Ltda.R. Alice Figueiredo, 46 – Riachuelo Rio de Janeiro, RJ – Brasil CEP: 20.950-150Tel: (21) 2201-6662/ Fax: (21) 2201-6896E-MAIL: [email protected] 10/12

Garantias

O autor acredita que todas as informações aqui apresentadas es-tã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 en-dereç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 xv

Capítulo 1: HTML 5 Uma Introdução 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 17

2.1. DOM e HTML 5 18

2.1.1. JavaScript e o DOM com HTML 5 20

2.2. 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 35

3.1. Canvas 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 483.1.4.1 Escrevendo Sobre uma Imagem 513.1.4.2 Alterando pixels em Imagens 533.1.4.3 Animando Imagens 553.1.4.4 Aninando Figuras Geométricas 60

3.1.5. Áudio 663.1.5.1 Buffer de Áudio 683.1.5.2 Controlando o Áudio com JavaScript 69

3.1.6. Vídeo 703.1.6.1 Buffer de Vídeo 733.1.5.2 Controlando o Vídeo com JavaScript 74

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 123

7.1. 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 MySQL e Biblioteca Gráfica no PHP 147

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.13.1 Classes 170

8.13.2 Subclasses 173

8.14. 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 185

9.1. Instalação Inicial 185

9.1.1 Biblioteca Gráfica 186

9.1.2 Outros Recursos Gráficos Utilizados 187

9.2. 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

A-2.5.3 Etapa de Projeto 226Comunicação Clara 227Minimizar a possibilidade de erros 227Minimizar a necessidade de memorização 227

xii | Aplicações na Nuvem

Escolha de elementos de entrada e saída 227Cuidados com requisitos não funcionais 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 (agra-deço pelas coisas boas que aconteceram e também pelas inde-sejadas).

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 aque-le churrasco deixando aquele monte de coisas para limpar... Quando finalmente me livrei das algemas, minhas filhas per-guntaram: “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 pri-meiro cinquentenário de minha experiência terrena (em 12-12-12) - agradeço a Deus pela vida.

Prefácio

A computação em nuvem (cloud computing) é um concei-to 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!

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.

HTML 5 UMA INTRODUÇÃO

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 for-ma 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 anuncia-da 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 - 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.

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.

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 necessida-de do uso de plug-ins6 para as aplicações multimídia nos nave-gadores. 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 dife-renciado de tudo que já foi utilizado antes em termos de lin-guagem de marcação; mas, com um longo caminho para ser finalizado, já que muitos navegadores utilizados, como o Inter-net Explorer, Opera, Safari, Firefox e Chrome ainda devem im-plementar 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 utili-zação de recursos não presentes na linguagem HTML.


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 che-car a compatibilidade dos navegadores com a versão cinco do HTML, apresento três deles: http://html5rocks.com, http://caniu-se.com e http://html5test.com.

1.1. As Principais Novidades7

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/html5http://dev.w3.org/html5/spec/Overview.html


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, indepen-dentemente da finalidade do aplicativo, e, ainda que construído para ambiente Desktop8, normalmente este aplicativo apresenta alguma funcionalidade disponível na Web, buscando neste am-biente 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.


� 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, uni-versal 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.


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 mostran-do 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 do-cumento 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>


Nas versões anteriores, o número de identificação da ver-são deveria estar declarada, como nos exemplos que seguem:

� html – versão 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>


<!DOCTYPE html PUBLIC “-//IETF//DTD HTML 2.0//EN”>


<!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 documen-to 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 docu-mento é 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”


� Identificador do sistema “http://www.w3.org/TR/html4/strict.dtd”>

Por dar suporte ao conteúdo escrito em versões anterio-res, o novo <doctype> pode ser aplicado a qualquer tipo de do-cumento 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 ver-sões anteriores o navegador tentará renderizar o elemento. Os navegadores suportam recursos e não ligam para tipos de docu-mentos, exceto em situações de doctype switching9.

Os navegadores atuais estão aptos a apresentar um arqui-vo 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.


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/


1.3. Definição do Conjunto de Caracteres no Documento

Para os padrões da Web, um conjunto de caracteres defi-ne 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 especifi-caçã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 ca-racteres 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 subcon-juntos, como o utf-8.


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”>


O atributo lang define em qual linguagem a página foi es-crita. É 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 sim-ples, conforme mostra a figura 1.4.

Figura 1.4 – Exemplo de uma página simples, com HTML 5.


A nova versão HTML mantém a mesma interoperabilida-de 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 es-tilo (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.


Figura 1.5 – Exemplo mais elaborado com uso de folhas de estilo.

APLICAÇÕES NA NUVEM - COMO CONSTRUIR COM HTML5, JAVASCRIPT...

Documents

Transcript of APLICAÇÕES NA NUVEM - COMO CONSTRUIR COM HTML5, JAVASCRIPT...