JOGOS HTML5 Módulo 1

Transcrição

1 JOGOS HTML5 Módulo 1

2 Seja bem vindo ao curso de HTML da AprendaMais. Neste curso você aprenderá como desenvolver para web com HTML, a linguagem mais básica do desenvolvimento de páginas / sites para a Internet. No entanto, antes de começarmos com o HTML, para que você possa se familiarizar com a linguagem, vamos falar um pouco sobre o desenvolvimento Web. Se você já é familiarizado com o desenvolvimento Web de uma forma geral, pode pular alguns dos tópicos a seguir. Desenvolvimento web O WWW ou World Wide Web, é uma ferramenta de comunicação, utilizada para publicação de informações na Internet. Se você ou sua empresa ainda não estão na Internet, certamente vão querer estar muito em breve, pois a Internet é a mais poderosa forma de comunicação existente no mundo. Uma página Web é um arquivo que é armazenado em um servidor de dados (computador) e é recebido peloweb Browser (software navegador, como Internet Explorer, Firefox, Chrome, Opera, Safari, etc). Se você chegou a este curso, certamente já viu várias páginas na web, inclusive está lendo este conteúdo dentro de uma página web, neste caso a AprendaMais, armazenada nos servidores da AprendaMais. No entanto, o que você pode não ter notado, é que a grande maioria destas páginas web utilizam-se dohtml ou sua evoluções / derivados para exibir estas informações. Por exemplo, você precisa criar uma apresentação para sua empresa. Da mesma forma que faria no Power Point, por exemplo, você agora vai criar uma apresentação, só que na web. Você quer exibir o perfil da empresa na primeira página e os recursos/serviços oferecidos na segunda e na terceira páginas. Para isto, você primeiro deve criar três páginas web. Em seguida, você interliga estas páginas. Juntas, as três páginas web formam uma apresentação para sua empresa, ou se preferir chamar assim, formam o website da sua empresa. Para criação deste website, além de imagens e informações da empresa, você precisa utilizar um linguagem que "traduza" ao web browser (navegador, como Firefox, Internet Explorer, etc) o conteúdo que você deseja exibir ao usuário, dando formas, cores, locais, etc a estes conteúdos.

3 Antes de projetar uma página web, você deve definir seu propósito. Você projeta a aparência e a funcionalidade da sua página, baseando-se neste propósito. Vamos supor que você quer projetar uma página que contenha receitas diversas. Para isto, inicialmente, você deve projetar páginas web que se pareçam com as páginas de um livro de receitas, para que a navegação fique mais agradável. Este projeto pode ser "rabiscado" à mão, pegue um lápis e um papel e desenhe/projete sua página web. As imagens abaixo mostram alguns exemplos destesprojetos / rascunhos de websites: Depois que você projetar a aparência das páginas, você precisa decidir o conteúdo delas. O conteúdo é baseado no público-alvo.

4 Por exemplo, você não precisa ensinar receitas fáceis para chefes de cozinha. Entretanto, se o seu público-alvo inclui pessoas iniciantes na cozinha, você precisa também ter o conteúdo básico. Navegando pela web, você já deve ter visto várias páginas, e deve ter notado que estas páginas são compostas de vários elementos: títulos, rótulos, links, textos, imagens, animações, etc.

5 Os títulos, rótulos, links e imagens são os elementos básicos de uma página web. O design da sua página web está diretamente ligado à forma como você vai utilizar estes elementos. A imagem abaixo mostra alguns exemplos: Títulos Você deve especificar títulos para todas as páginas web que criar. Os títulos ajudam os internautas a identificar uma página web, fazer procuras mais precisas em um banco de dados, e, também, a gerenciar as informações.

6 Rodapés Você pode também, adicionar rodapés às sua páginas web para fornecer informações adicionais para seus internautas. Usando rodapés você pode exibir informações sobre o autor da página, mensagens de copyright e links para outras páginas assim como a imagem abaixo: Tabelas As tabelas são utilizadas, principalmente, para organizar a apresentação das informações tabulares na página, o que torna a leitura muito mais fácil e agradável. Menus/Índices e links de navegação

7 Para que os internautas encontrem facilmente as páginas de seu site, você deve adicionar menus e/ou links para esta navegação. Existem vários tipos padrão de menus, apesar de não aconselhável, você não precisa seguir estes padrões. Vamos falar um pouco mais sobre este assunto em seguida, no tópico de organização de conteúdo. Outros elementos Além dos títulos, rótulos, rodapés, tabelas, menus, etc, você pode também adicionar imagens, áudio e vídeo à sua página web para deixá-la mais atraente, mas é claro, com moderação e sem se esquecer da usabilidade e acessibilidade. Também é possível adicionar formulários à sua página web para torná-la interativa. Assim, você pode receber comentários, cadastros, etc de outros internautas.

8 Organizando o conteúdo Como você observou, é possível adicionar imagens, links, tabelas, etc para organizar a informação em cada página web de maneira eficaz. Não importa qual a organização de sua página web e nem como os elementos estão disponíveis, você deve sempre adicionar um índice (ou se preferir, pode chamar de menu) para divulgar o propósito de seu web site, bem como ajudar os usuários e motores de busca a encontrarem suas páginas facilmente. Normalmente, você exibe este índice na página principal (também conhecida como home ou página inicial), que é a primeira página da seu web site, e muitas vezes exibe este mesmo índice nas páginas subsequentes, conforme imagem abaixo: Formas de navegação Existem algumas maneiras de criar um fluxo para visualização de um web site. Você deve sempre ter em mente, que a maioria dos visitantes de seu web site, nunca o viram anteriormente, e por isso, você deve facilitar ao máximo a forma como estes visitantes irão encontrar suas páginas web.

9 Para isso, você usa alguns tipos de conceitos de navegação. Um dos mais comuns, a navegação linear, é utilizada para apresentar informações que possuam uma sequência que deve ser obedecida. Por exemplo, uma apresentação web sobre a instalação de uma aplicação, contém uma série de passos sequenciais que o usuário deve seguir, de forma que ele pode se perder na instalação desta aplicação, caso não obedeça a sequência exata, o mesmo se aplica aos cursos Aprendamais, que devem ser visualizados na sequencia correta. Para que os internautas naveguem linearmente pelas páginas Web, você precisa fornecer alguns links básicos, os quais relacionamos na imagem abaixo: Vamos imaginar um exemplo básico de um site sobre a instalação de um software em um computador com sistema operacional Windows e o mesmo software em um computador com Linux. O procedimento para a instalação do software consiste em dez passos. Destes dez passos, oito são comuns tanto para o Windows quanto para o Linux. Por isso, os usuários precisam, obrigatoriamente, ver os oito passos sequencialmente (Utilizamos então a navegação linear). Em seguida, dependendo do tipo de sistema operacional (Windows ou Linux), eles irão para a página correspondente, pois os dois últimos passos são específicos.

10 Neste caso, ainda é utilizada a navegação linear porém com alternativas que contém tanto passos comuns quanto específicos. Ou seja, ao chegar no passo oito, você deve dar alternativas ao visitante: Outro tipo de navegação muito comum é a navegação hierárquica, utilizada para demonstrar informações estruturadas. Neste tipo de navegação, você específica as informações gerais no topo da hierarquia e as informações específicas por último. Por exemplo, vamos supor que você queira criar uma apresentação web sobre animais. Na sua apresentação, você deseja separar, por categorias, os animais carnívoros e os herbívoros. Para projetar uma apresentação web sobre animais, você precisa criar, em primeiro lugar, um índice. Em uma navegação hierárquica, você fornece os mesmos links que usa em uma navegação linear. Entretanto, na navegação hierárquica, um link para a próxima página está conectado ao próximo nível da hierarquia, da mesma forma como um link para a página anterior está conectado ao nível anterior da hierarquia. Vamos supor que os internautas estejam visualizando uma página que possui links para os tipos de animais carnívoros. Um destes links conecta a uma página de crocodilos. Neste exemplo, a página dos tipos de animais carnívoros está no segundo nível da

11 hierarquia e a página dos crocodilos corresponde ao terceiro nível da hierarquia. Se você usa vários níveis de hierarquia, os internautas podem se esquecer da página por onde começaram. Com isso, eles poderão ficar confusos durante a visualização do seu site. Na navegação hierárquica, você deve restringir seu site para três níveis de hierarquia. Com isso, o risco de gerar confusão, por parte dos internautas, é bem menor. Em uma navegação hierárquica, os internautas não podem navegar de uma página, que pertence a uma categoria, para uma outra página, de outra categoria. Por exemplo, um internauta não pode acessar uma página de animais herbívoros quando estão em uma página de carnívoros. Para acessar a página dos herbívoros, o internauta deve voltar para o índice e selecionar herbívoros. Pode ser que você queira deixar que os internautas naveguem por páginas pertencentes a outras categorias sem ter de voltar ao índice. Para isto, você precisa usar uma combinação de navegação hierárquica e linear. Navegando tanto sequencialmente quanto pela hierarquia Uma combinação de navegação linear e hierárquica permite aos internautas navegarem tanto sequencialmente quanto pela hierarquia. O índice da sua apresentação web está listado na página principal. Um internauta seleciona a categoria dos carnívoros e visualiza a página dos tigres. Em seguida, ele deseja ver a página dos herbívoros. Em uma combinação de navegação linear e hierárquica, os internautas podem navegar para a página dos herbívoros de duas maneiras: Voltar para a página principal e selecionar a categoria dos herbívoros (esta é a navegação hierárquica). Usar o link para a próxima tela (esta é a navegação linear).

12 Uma combinação de navegação linear e hierárquica permite ao internauta navegar tanto sequencialmente quando hierarquicamente pela sua apresentação web. Isto pode deixá-los perdidos, porque eles podem navegar para a mesma página de várias formas. Alias, se você também está um pouco perdido, não se preocupe pois em muito breve todos estes conceitos estarão bem claros para você. Enfim, vamos partir para o HTML. HTML As pessoas imaginam que é muito difícil construir um website. Mas isso não é verdade! Qualquer um pode aprender a construir umwebsite. É necessário apenas que você estude, pratique e consolide os ensinamentos aqui contidos. Com certeza, em breve, você estará criando seu própriowebsite! WWW Antes de iniciar o estudo do HTML, você deverá conhecer alguns conceitos sobre a Internet, fundamentais ao seu aprendizado. Você sabe o que significa WWW? World Wide Web (www) é, sem dúvida, um dos mais importantes sistemas de informação que operam atualmente na Internet. Ele reúne as seguintes propriedades: Recursos multimídia. Recursos HyperTexto. Interface Gráfica. Dentre as diversas aplicações possíveis de serem executadas, pelo WWW, pode-se destacar: Divulgação de produtos por parte das empresas. Vendas e compras de produtos por transações online. Revistas eletrônicas. Jornais Online. Informações Turísticas. Pesquisas etc.

13 Por trás da tela do seu computador existe uma complexa estrutura de clientes e servidores, trabalhando em conjunto (através de protocolos) para atingir os objetivos propostos e levar até você a informação desejada. Uma página da WEB é formada por um sistema HyperTexto - textos que possuem links (também chamados de vínculos) para outros documentos. Esses documentos, na WEB, são escritos em linguagem HTML. Para que o usuário tenha acesso a um documento HTMLé preciso utilizar um aplicativo que possa apresentá-lo. Esse programa é chamado de "Navegador" ou "WebBrowser". O usuário precisa informar ao navegador qual protocolo será usado, a localização do arquivo que deseja ver: em que servidor está, em qual diretório dentro desse servidor e, por último, o nome do arquivo desejado. Essa informação é chamada de URL (Uniform Resource Locator) e é única para cada arquivo em um Servidor. O cliente requisita a URL e o servidor fornece os documentos. Através da URL o servidor irá encontrar o arquivo registrado e enviá-lo para o cliente (Browser) que é encarregado de exibir o documento formatado ao usuário, ou seja: acabado visualmente, com figuras, cores etc.

14 HTTP (Hyper Text Transfer Protocol) é um protocolo de transferência de documentos da WEB e base de toda a funcionalidade. É um protocolo leve e veloz, construído sobre TCP/IP e orientado à conexão. Na verdade, o protocolo HTTP permite que os browsers(clientes) conversem com os servidores WEB, façam pedidos e recebem a resposta em forma de documento, através de uma conexão Internet feita por um provedor de acesso. O que é HTML? HTML - Linguagem da WEB HTML é a abreviatura de "HyperText Markup Language". Resumindo uma longa história, o HTML foi inventado em 1990, por um cientista chamado Tim Berners-Lee. A finalidade inicial era a de tornar possível o acesso e a troca de informações, de

15 documentação e pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. HTML é uma linguagem que possibilita apresentar informações (documentação de pesquisas científicas) nainternet. Aquilo que você vê quando abre uma página na Internet é a interpretação que seu navegador faz dohtml. Para visualizar o código HTML de uma página use o menu "Exibir" no topo do seu navegador e escolha a opção "Código Fonte" (Código fonte). Para quem não conhece, o código HTML pode parecer complicado, mas é bem simples. HTML Estruturado (XHTML) Você aprenderá um HTML estruturado, de acordo com algumas regras dos padrões WEB(W3C). Para começar, um esclarecimento: o XHTML (Extensible HyperText Markup Language) nada mais é do que uma maneira mais bem estruturada de escrever HTML. O conteúdo integral sobre XHTML não será apresentado aqui por ser inviável: é preciso, primeiramente, dominar os conteúdos básicos do HTML. Há um treinamento específico para XHTML e sugerimos que você, ao concluir este curso, faça um treinamento de XHTMLconosco, para se atualizar com os padrões WEB. Ambiente de trabalho É muito provável que você já tenha as ferramentas necessárias. Você tem um "navegador". Navegador é um programa que permite visualizar e navegar por páginas na Internet. Não importa qual navegador você utiliza (Mozilla Firefox, Google Chrome, Opera, Safari, Internet Explorer).

16 Você já deve ter ouvido falar, ou até mesmo ter usado, programas como Microsoft FrontPage e Dreamweaverque podem - pelo menos assim anunciam - criar websites para você. Esqueça-os, por enquanto! Eles não têm qualquer utilidade na tarefa de codificar o website. Você precisará de um editor simples de textos. Neste curso recomenda-se o NotePad++, pois ele colore as sintaxes dos códigos. Notepad++ Notepad++ é um editor de texto que suporta as mais diversas linguagens de programação: C, C++, Java, C#, XML, HTML, PHP, Javascript, ASCII art, doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, TeX, TCL, Assembler, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog, Haskell e InnoSetup. Site para download do NotePad++: Resumindo Um navegador e um "Editor de Textos": é tudo o que você precisa para acompanhar este treinamento e aprender a programar HTML. Tags são rótulos usados para informar ao navegador como o website deve ser apresentado. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">".

17 Genericamente falando, existem dois tipos de tags: tags de abertura e tags de fechamento. A diferença entre elas está na barra "/" existente na tag de fechamento. Tudo o que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando de cada uma. Mas como toda regra tem a sua exceção, a do HTML é que para algumas tags a abertura e o fechamento se dão na mesma tag. Elas contêm comandos que não precisam ter conteúdo para serem processados; isso é: são tags de comandos isolados como, por exemplo, um pulo de linha: Aprender HTML é aprender a usar as diferentes tags. Exemplo: A tag < b > informa ao navegador que o texto colocado entre < b > e < /b > deve ser mostrado em negrito (o comando "b" é uma abreviação para "bold" - negrito). Abra o editor Notepad++, clicando no botão Iniciar, Todos os Programas, selecione a pasta NotePad++, escolha NotePad++. Vamos configurar o NotePad para a linguagem HTML. Clique no menu Linguagens e escolha a opção HTML.

18 Vamos configurar agora UTF-8, é um tipo de codificação Unicode de comprimento variável criado por Ken Thompson e Rob Pike. Pode representar qualquer carácter universal no padrão do Unicode, sendo também compatível com o ASCII. Por esta razão, está sendo adotado como tipo de codificação padrão para , páginas web, e outros locais onde os caracteres são armazenados. Siga as instruções abaixo: exemplo1.htm Para ver como ficou o código na página HTML, clique no menu Executar do Notepad e escolha Launch in Chrome, ou qualquer outro navegador.

19 Será apresentado no navegador, desta forma: As tags < h1 >, < h2 >, < h3 >, < h4 >, < h5 > e < h6 > informam ao navegador que se trata de um cabeçalho (h vem de "heading" - cabeçalho): < h1 > é o cabeçalho de primeiro nível e apresentado com o maior tamanho de texto; < h2 > é o cabeçalho de segundo nível e apresentado com tamanho de texto um pouco menor; e assim sucessivamente até< h6 >, cabeçalho de sexto nível e apresentado com o menor tamanho de texto. Exemplo2.htm

20 As tags devem ser escritas com letras maiúsculas ou minúsculas? Para a maioria dos navegadores é indiferente se você usa letra maiúscula, minúscula ou mesmo uma mistura delas. Contudo, de acordo com as regras de padrões web, a maneira correta é usar minúsculas. Então, crie o hábito de escrever suas tags com letras minúsculas, SEMPRE! Criando sua primeira página Você viu inicialmente que é necessário ter, para construir um website: um navegador e um editor de textos. Então, abra o seu editor de textos. Você irá criar uma página simples, uma página que "diga": "Estou aprendendo HTML na AprendaMais!!!". HTML é simples e lógico. O navegador lê HTML da mesma forma que você lê um texto qualquer: de cima para baixo e da esquerda para a direita.

21 A primeira coisa a fazer é informar ao navegador que você vai "falar" com ele na linguagem HTML. Isso é feito com a tag < html >. Então, antes de qualquer coisa, digite "< html >" na primeira linha do documento, em seu editor de textos. Como você já sabe, < html > é uma tag de abertura e deve ser encerrada com a de fechamento ao acabar-se de digitar o documento. Para você ter certeza de que não irá esquecer-se de fechar a tag HTML, faça isso agora mesmo digitando "< /html >" algumas linhas para baixo, assim você irá escrever e preencher seu documento entre as tags digitadas < html > e < /html >. A próxima coisa que o documento precisa é um "head" (cabeça), que fornece informações sobre o documento, e um "body" (corpo), que abriga o conteúdo do documento. Como HTML nada seria se não fosse lógico, a "cabeça" (< head > e < /head >) fica em cima do "corpo" (< body > e < /body >). Seu documento deverá ter a seguinte estrutura:

22 Estrutura de um documento HTML Esta é a estrutura que todo documento HTML deve ter:

23 Veja como o código foi estruturado em linhas diferentes (usar a tecla Enter para pular para a próxima linha) e também com identação (recuos) do código (usar a tecla Tab para identar). A princípio, a maneira como você estrutura (linhas e recuos) seu documento HTML, não faz qualquer diferença. Mas um código bem estruturado é mais fácil de ler e entender. É altamente recomendado que você adote uma estrutura clara e nítida para seu HTML, usando linhas e identação (recuos), como o que foi mostrado no exemplo acima. Se o seu documento está como o exibido acima, você construiu sua primeira página web! Esse será o padrão para os futuros documentos HTML. Como colocar conteúdo em minha página? Como você já aprendeu, um documento HTML é composto de duas partes: um head e um body. Na seção head você escreverá as informações sobre a página; e na seção body colocará as informações que constituem a página. Por exemplo, para dar um título ao documento - título este que apareça no topo da barra de título do navegador - você deverá usar a seção "head". A tag para acrescentar um título é < title >: Deverá ser colocado na seção "Head":

24 O título não aparece na página, no documento ou no corpo da página, mas sim na barra de título do navegador. Ou seja: tudo o que você quiser que apareça na página, e for conteúdo, deverá ser colocado entre as tags "body". Então escreva um texto, como conteúdo da página, e que deverá ser colocado na seção body. Digite na seção body o seguinte:

25 A letra p na tag < p > é a abreviatura para "paragraph" (parágrafo)"; ou seja: o texto é um texto-parágrafo. Parabéns, você acabou de construir sua primeira página da WEB!!! Agora salve a página: Com o Notepad++ aberto, vá ao menu "Arquivo" e escolha a opção "Salvar como...". Em "salvar como" escolha HTML. Salve seu documento com o nome "pagina1.html" (a extensão ".html" indica que se trata de um documento HTML. A extensão ".htm" dá o mesmo resultado) Agora, dê dois clicks na página salva: ela abrirá com seu navegador padrão. Veja a página aberta no navegador:

26 Estrutura de uma página HTML Sempre que for criar uma página, faça primeiro a estrutura. É uma dica! Veja a estrutura: Siga sempre a estrutura acima: a partir de agora ela é o "padrão" para a criação das páginas. Na seção < body > escreva o conteúdo da página. Veja um exemplo:

27 Exemplo3.htm Lembre-se, o único caminho para aprender HTML é a prática. Outras TAGs Você já sabe que pode obter negrito com a tag < b >; para obter itálico - letras inclinadas - use a tag < i > ("i" vem de "italic"). Exemplo4.htm Em execução:

28 Retomando: existem tags que são abertas e fechadas em uma única tag. Elas são comandos isolados, ou seja: não precisam conter texto dentro delas para funcionar. Um exemplo é a tag < br / > que serve para criar uma quebra de linha (pular uma linha). Sem a tag < br / > o exemplo acima seria visualizado desta forma: Tag < small > Com esta TAG o texto fica com letras menores que o normal. Veja o exemplo:

29 Exemplo5.htm Em execução: Exemplo6.htm Em execução: Você pode usar várias tags simultaneamente, desde que as aninhe corretamente. Veja como fazer isto no exemplo abaixo:

30 E não assim: Observe que, no primeiro exemplo, a primeira tag de abertura <b> corresponde à última tag de fechamento< /b > e o aninhamento está certo. Isso evita confusão para quem escreve o código e para o navegador que lê o código (em XHTML isso é um ERRO). Você deve sempre ter boas práticas, ou seja: aninhe corretamente suas TAGS. Tag < hr / > Esta tag serve para definir uma linha horizontal no documento. Veja o exemplo: Exemplo7.htm Em execução: Itens de lista

31 Os itens de uma lista não ordenada são identificados pelos elementos: < ul > que serve para "abrir" uma lista; e < li >, que se trata dos itens dessa lista. Exemplo8.htm Em execução: Listas não ordenadas Exemplo9.htm Listas ordenadas

32 Em execução: Tag < blockquote > Utilizado para criar citações, que insere uma linha antes e depois do texto, assim como um nível de identação. Exemplo10.htm

33 Atributos Você pode adicionar atributos às tags. O que é atributo? Lembrando: uma tag é um comando para o navegador (por exemplo, < br / > é o comando para pular uma linha). Em algumas tags você pode ser mais específico, acrescentando informações extras de comando. Isso é feito através dos atributos. Atributos são escritos dentro da tag, seguidos pelo sinal de igual e, depois, entre aspas declaram-se as informações do atributo - neste exemplo, dentro do atributo Style. As informações, quando mais de uma, devem ser separadas por ponto e vírgula. Esse assunto será retomado adiante. Como? Existem vários atributos. O primeiro que você aprenderá é o atributo style. Com o atributo style você pode adicionar estilização e layout ao seu website. Por exemplo, uma cor de fundo: Exemplo11.htm O código acima renderiza uma página com cor

34 de fundo cinza. A seguir você aprenderá como funcionam as cores. Veja que algumas tags e atributos têm nomes no idioma inglês, dos E.U.A. É muito importante que você digite os nomes exatamente como o ensinado neste treinamento - se você mudar uma letra sequer, o navegador não entenderá o código. É importante também que você não se esqueça de fechar as aspas nas informações do atributo. Cores Como, no exemplo acima, a página ficou cinza? No exemplo acima foi usado o código "#E9E9E9" para fazer a página na cor cinza. Este é o código para a cor cinza no sistema chamado de números hexadecimal (HEX). Cada cor é representada por um número hexadecimal. Veja a seguir uma tabelinha com centenas de cores:

35 Um código hexadecimal para cores é formado por um sinal # seguido de seis dígitos e/ou letras. Existe mais de 1000 códigos HEX e não é fácil decorar o código para todas as cores. Veja como usar a tabela de cores acima: Imagine que você quer colorir o fundo de uma página com a cor verde; então, procure a cor na tabela de cores: O código hexadecimal para essa cor é: #66ff00. Para colorir o fundo da página com a cor verde, você deve fazer o seguinte:

36 Veja que o atributo style é empregado na tag body, pois você quer colorir o fundo do documento e, body, é o corpo do documento. Você também pode usar o nome das cores em inglês (white, black, red, blue, green e yellow). Exemplo: Quais tags podem usar atributos? Atributos podem ser aplicados à maioria das tags. Você usará atributos mais frequentemente em algumas tags, como a body; e raramente usará em outras, como a < br >, por exemplo, que é um comando para pular linha e não precisa de informação adicional. Assim como existem muitas tags, também existem muitos atributos. Alguns atributos são empregados em tags específicas, enquanto outros servem para várias. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vários tipos. Isso pode parecer um pouco confuso, mas à medida que você for praticando vai constatar que é fácil e lógico, assim como constatará as inúmeras possibilidades que os atributos oferecem. Exemplo12.htm Links Para construir um link você deverá usar o que tem usado até agora: uma tag. Uma simples e pequenina tag, com um elemento e um

37 atributo, é o suficiente para você construir os links dirigidos para onde quiser. A seguir um exemplo de link para o site do google: No navegador ficaria assim: O elemento a refere-se a "anchor" - âncora. O atributo href é abreviação para "hypertex No exemplo acima, o atributo href tem o valor " que é o endereço completo do site Google e é chamado de URL (Uniform Resource Locator). Atenção: " deve sempre ser incluído nas URLs. Lembrese de fechar a tag com um < /a >. Imagem como link Imagens também podem ser links, ou seja: ao clicar na imagem, acessa "X" endereço. Exemplo13.htm Ao invés de inserirmos um conteúdo textual dentro da tag de link, inserimos uma imagem no lugar.

38 Como são os links entre minhas próprias páginas? Se você quer construir links entre páginas de um mesmo website não precisa escrever o endereço completo de cada página (URL). Por exemplo: se você tem duas páginas (suponha pagina1.html epagina2.html) salvas em um mesmo diretório, basta construir um link de uma para a outra, usando somente o nome do arquivo no link. Ou seja: um link dapagina1.html para a pagina2.html, como o mostrado abaixo: Pagina1.htm Pagina2.htm

39 Execute em seu navegador o arquivopagina1.html, e clique no link para ir para página 2, e quando estivar na página2 clique para voltar a página1. Crie dentro de sua pasta uma subpasta com o nome de produtos e mova o arquivo pagina2.html para dentro desta pasta. Como o arquivo pagina2.html foi colocado dentro da subpasta produtos o link na pagina1.html precisa ser alterado para: "../" (dois pontos final) = aponta para o diretório um nível acima do arquivo onde foi feito o link. Seguindo o mesmo princípio, você pode apontar para dois (ou mais) níveis acima, escrevendo "../../". Como alternativa você pode usar o endereço completo do arquivo (URL), mas essa não é uma prática recomendada, pois, trocando o servidor, você terá um retrabalho na alteração dos links. Links internos

40 Você pode criar links internos, dentro da própria página. Por exemplo, uma tabela de conteúdos ou um índice com links para cada capítulo em uma página. Tudo o que você precisa é usar o atributo id e o símbolo "#". Use o atributo id para marcar o elemento: o atributo id é a identificação, o "nome" do elemento. No caso do exemplo acima ele é usado para marcar o elemento que é o destino do link. Veja: Você agora pode criar um link, que leve àquele elemento, usando o símbolo "#" no atributo do link. Ele ("#") informa ao navegador para ficar na mesma página em que está. O símbolo "#"deve ser seguido pelo valor atribuído a id para onde olink vai. Por exemplo: Exemplo14.htm Execute este arquivo no browser. Link para endereço de

41 Você pode criar link para um endereço de . Isso é feito de modo semelhante aos links para páginas da web. Exemplo15.htm A única diferença é que no lugar do endereço do documento, você escreve mailto: seguido pelo endereço de . Quando o link é clicado, o programa de padrão do usuário é aberto, com o endereço do link já digitado na linha do destinatário. Mas, atenção, isso só funcionará se o usuário tiver um programa de instalado na máquina. Faça uma experiência com este tipo de link em seu computador. Exemplos de Links Aqui você encontrará um exemplo completo de Links. Digite o código, analise e estude. Index.html Teste.html A página teste.html deve ficar dentro da pasta teste. Veja abaixo: Copie a figura w3c.jpg para junto do arquivoindex.html.

42 Atributo title O atributo title é usado para fornecer uma breve descrição do link. Basta colocar o cursor do mouse sobre o link e será exibido o texto entre aspas " ". Exemplo16.htm

43 Imagens Exemplo17.htm Para adicionar uma imagem em sua página utiliza-se a tag img. Veja como é fácil: O atributo alt empregado nesta imagem indica a descrição da imagem. Caso o navegador por algum motivo não consiga carregar a imagem, por exemplo, por algum problema no servidor onde ela está hospedada, o texto desse atributo alt aparece. É sempre uma boa prática descrever imagens importantes em significado para o site. O que você tem a fazer é dizer ao navegador que quer inserir uma imagem (img localizada (src, abreviatura para "source" - local de armazenagem). Veja que a tag imagem é do tipo comando isolado, isto é, uma

44 só tag de abertura e de fechamento. Ela é semelhante a tag < br / >, que não precisa ter um texto inserido. "w3c.jpg" é o nome do arquivo da imagem que você quer inserir na página. ".jpg" é a extensão do tipo de imagem. Tal como a extensão ".html" para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo é uma imagem. São três os tipos de imagens que você pode inserir em sua página: JPG / JPEG (Joint Photographic Experts Group). GIF (Graphics Interchange Format). PNG (Portable Network Graphics). Em geral, imagens GIF são ideais para gráficos e desenhos; e imagens JPEG, para fotografia. Existem duas razões para isso: primeiro porque imagens GIF são constituídas por 256 cores e imagens JPEG por milhões de cores; segundo porque imagens GIF são mais bem otimizadas para imagens simples, ao passo que imagens JPEG são mais bem otimizadas para imagens complexas. Quanto melhor a compressão, menor o arquivo e mais rápida a página é carregada no navegador. Como você deve saber, por experiência própria, páginas desnecessariamente "pesadas" para carregar são frustrantes para o usuário. Tradicionalmente, os formatos GIF e JPEG têm sido os mais empregados, mas ultimamente o formato PNG tem se tornado mais popular (notadamente, em detrimento do formato GIF). O formato PNG é melhor que JPEG e GIF devido aos milhões de cores e à efetiva compressão. Detalhes adicionais sobre imagens Você pode inserir imagens que estão localizadas em outros diretórios, ou até mesmo em outros websites. Veja: Localizada em um servidor:

45 Imagens podem ser links também: Você sempre terá que usar o atributo src, que diz ao navegador onde a imagem está localizada. Além dele, existem outros atributos que podem ser bastante úteis a você para inserir imagens em uma página. O atributo alt é usado para fornecer uma descrição textual alternativa da imagem, caso, por alguma razão, ela não seja renderizada para o usuário. Isso é particularmente importante para usuários com restrições visuais, ou quando a imagem é carregada muito lentamente. Por isso, sempre use este atributo: Alguns navegadores mostram uma caixa pop-up, com o conteúdo do atributo alt, quando o usuário passa o mouse sobre a imagem. Tenha em mente que a finalidade principal desse atributo é a de fornecer uma alternativa textual para a imagem. Ele não deve ser usado para criar mensagens pop-up, uma vez que os leitores de tela passarão uma mensagem que não descreve a imagem para os usuários com restrições visuais. O atributo title pode ser usado para fornecer uma curta descrição da imagem: Definindo largura e altura de uma imagem Exemplo18.htm A imagem original tem o tamanho em 320x252, foi alterada através do html para100x79.

46 Os atributos width e height podem ser usados para definir, respectivamente, a largura e a altura da imagem. O valor adotado para medidas é o pixel. Pixel é a unidade de medida usada para medir a resolução da tela (as resoluções de tela mais comuns são de 800x600 e 1024x768 pixels). Ao contrário de centímetros, pixel é uma unidade de medida relativa que depende da resolução da tela. Telas com grande resolução terão 25 pixels por 1 centímetro, enquanto que as de baixa resolução terão os mesmos25 pixels, mas por 1,5 cm de tela. Atenção: Se os valores para width e height não forem definidos, a imagem será inserida em tamanho real. Com width e height você pode alterar o tamanho da imagem. Contudo, o tempo de carregamento da imagem será sempre aquele requerido, como se ela tivesse suas dimensões reais, mesmo que você diminua o tamanho usando esses atributos. Assim, você não deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se você precisar diminuir a imagem, façaa em suas dimensões reais, em um editor de imagem, para tornar suas páginas mais leves e mais rápidas. Tag < div > A tag div é amplamente utilizada. Ao fazer o curso de CSS, você entenderá por que. Essa tag não causa nenhuma diferença visual no código. Ela é considerada um "container", ou seja: uma espécie

47 de "caixa" imaginária em que você pode, através de script, alterar o conteúdo, ou o estilo, através de CSS (folha de estilo). Exemplo de uso: Mais adiante você aprenderá a usar atributos de alinhamento para a tag DIV. Tabelas Tabelas são usadas para apresentar "dados tabulares"; isto é: informação que deva ser apresentada em linhas e colunas, de forma lógica. Criar tabelas em HTML pode parecer complicado, mas se você acompanhar a explicação, passo a passo, verá que é bem simples. Exemplo19.htm Qual a diferença entre < tr > e < td >? 3 tags básicas são usadas para inserir tabelas:

48 < table > começa e termina uma tabela. < tr > significa "table row" - linha de tabela - começa e termina em uma linha horizontal da tabela. < td > significa "table data" - dados da tabela - começa e termina em cada célula contida nas linhas da tabela. No exemplo acima, a tabela começa com< table > seguida por uma < tr >, que indica o início de uma nova linha. Três células são então inseridas na linha: < td > Célula 1 < /td >, < td >Célula 2< /td > e < td > Célula 3 < /td >. A linha termina com < /tr > e uma nova linha < tr >começa imediatamente a seguir. A nova linha também contém três células. A tabela termina com < /table >. Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células: Célula 1, Célula 2 e Célula 3 formam uma linha. Célula 1 e Célula 4 formam uma coluna. No exemplo acima a tabela tem duas linhas e três colunas. Uma tabela pode conter um número ilimitado de linhas e colunas. Atributos para tabelas Um atributo muito utilizado em tabelas é o atributo border, para definir a espessura da borda da tabela. Exemplo20.htm

49 A espessura da borda é especificada em pixels. Assim como as imagens, pode-se definir width - largura - em pixels para uma tabela - Exemplo: ou alternativamente em porcentagem da tela: Este exemplo renderiza no navegador uma tabela com largura igual a 25% da largura da tela. Faça o teste você mesmo. Existem outros atributos para tabelas, veja mais dois: align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula. Por exemplo: left, center ou right (à esquerda, no centro ou à direita). valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo: top, middle ou bottom (em cima, no meio ou em baixo). Colspan e Rowspan Colspan é a abreviação para "column span". Colspan é usada na tag < td > para indicar quantas colunas estarão contidas em uma célula. Colspan_rowspan.html

50 Definindo colspan em "3", a célula na primeira linha conterá três colunas. Assim será necessário inserir mais duas células para que se tenha, na primeira linha, as colunas em acordo com as da segunda linha. Como mostra o exemplo abaixo: Rowspan especifica quantas linhas estarão contidas em uma célula: Colspan_rowspan2.html

51 No exemplo acima, rowspan é definido em "4" na Célula 1. Isso especifica que uma célula deve conter 4 linhas. Célula 1 e Célula 2 estão na mesma linha, enquanto Célula 3, Célula 4 e Célula 5 formam três linhas independentes. Se você tem conhecimento de Excel, com certeza não foi doloroso aprender "Tabelas". Conclusão sobre tabelas Teoricamente você pode inserir qualquer coisa em uma tabela: texto, links e imagens. Mas tabelas destinam-se a apresentar dados tabulares (isto é, dados que por sua natureza devam ser apresentados em linhas e colunas). Até hoje, grande parte dos desenvolvedores ainda utiliza tabelas como ferramenta para construir layouts, o que não é "correto", além de ser totalmente fora dos "Padrões Web". Se você quer controlar a apresentação de textos e imagens, existe uma maneira bem mais racional: CSS/ Tableless. Recomendamos que você faça conosco os cursos de CSS e Tableless para aprender a controlar a apresentação visual do seu site, e sem usar tabelas. Tabelas foram feitas para exibir dados tabulares e não para a criação de Layouts. As mais comuns: Tags para estilos de texto

52 Tags.html Tag < font > Permite alterar o tipo de fonte, o tamanho e a cor. Se você aprender CSS, verá que o elemento font não tem utilidade. Uma dica: faça os cursos de CSS e XHTML conosco, aqui na AprendaMais, e enriqueça seu conhecimento! Sintaxe Onde n: varia de 1 a 7 e o valor 3 corresponde ao valor padrão;

53 nome: indica o nome da fonte a ser utilizada; cor: indica a cor da fonte, definida em hexadecimal, ou através de um nome predefinido de cores. Fontes.html Ps: Vale ressaltar que, assim como é ensinado no curso de XHTML, utilizar a tag FONT não é uma boa prática para criação de páginas. O recomendado é seguir os padrões XHTML e utilizar folhas de estilos CSS (recomendamos que, após o curso de HTML, você faça o de XHTML e também o de CSS.Consulte!). Alinhamento de elementos Div é uma tag de bloco muito utilizada por desenvolvedores WEB. Veja como utilizá-la para alinhar os textos ou elementos. Sintaxe Onde A posição pode ser: left: alinhamento à esquerda; center: centralizado; right: alinhamento à direita; justify: justificado. Somente para textos.

54 Alinhamento.html Para centralizar, você pode utilizar a tag center, desta forma: Veja outro exemplo. Neste, alinhamos elementos à esquerda e à direita: Alinhamento2.html

55 Formulários Através de um formulário o usuário poderá interagir com o servidor, enviando dados que serão processados e devolvidos. Por exemplo: o envio de dados como parâmetro para uma página PHP, que fica responsável em gravar os dados em um banco de dados. Enfim, formulários são de grande utilidade. Se você fizer um treinamento conosco de alguma das linguagens de programação para WEB, como PHP por exemplo, usará muito os formulários. Criando um formulário Cada elemento de um formulário é definido separadamente. Na definição, você informa o local do programa (CGI, ASP, PHP) que controlará o formulário e a forma, ou método, como os dados serão enviados para o servidor. Sintaxe

56 Method: define o método utilizado pelo servidor para receber os dados do formulário. O método pode ser: POST: método mais utilizado transmite a informação do formulário imediatamente após a URL; GET: anexa o conteúdo do formulário ao endereço da URL, por isso tem limitação de tamanho das informações; ACTION: especifica o programa ou página do servidor que processará os dados do formulário; NAME: define o nome do formulário. Elementos de formulário Input Define um campo de entrada de dados. Cada campo de um formulário atribui o seu conteúdo a uma variável que possui nome e tipo específico. Sintaxe Onde Formulario.html

57 Tag Select Define uma lista de itens que podem ser selecionados pelo usuário. Sintaxe Onde Pesquisa2.htm

58 Tag textarea Define uma caixa de texto onde o usuário pode digitar um texto com várias linhas. Sintaxe Onde

59 Frames Os frames são divisões da tela do browser em diversas telas (ou "quadros"). Com isso, torna-se possível apresentar mais de uma página por vez. O corpo de uma página Frame é diferente de uma página comum; esse arquivo só conterá as dimensões das divisões e as páginas que irão aparecer em cada divisão. A estrutura básica do corpo de uma página com frame:

60 Para utilizar o recurso de frames, é preciso um conjunto de tags. Cada uma com sua função: FRAMESET é utilizada para criar um conjunto de frameset seus elementos. É a tag principal da criação de frameset precisa ser encerrada assim: < /FRAMESET >;FRAME é utilizada para definir um frame (quadro) dentro de um conjunto de frames. Não necessita de tag de encerramento. Sintaxe Onde FRAMESET: tag de abertura de um conjunto de frames; COLS="colunas, largura": define o número de colunas; o valor pode ser em pixels ou percentagem. É utilizado para definir o número de quadros (frames) que terá o conjunto de frames;

61 ROWS="linhas, altura": define o número de linhas; o valor pode ser em pixels ou em percentagem. É utilizado para definir o número de quadros (frames) que terá o conjunto de frames; FRAMEBORDER="1/0": o valor 1 exibe uma borda3d no frame, o valor 0 não exibe a borda; BORDER="n": define o tamanho da borda; FRAMESPACING="n": define um espaço em pixelsentre os frames, mas nem todos os browsers reconhecem esse atributo; FRAME: define cada quadro (frame) separadamente; NAME="nome": define o nome do frame; SRC="URL": define a página que será exibida noframe; ALIGN="posição": define o alinhamento do conteúdo do frame. A posição pode ser: top: o conteúdo é alinhado no topo do frame; middle: o conteúdo é alinhado no meio do frame; bottom: o conteúdo é alinhado na base do frame; left: o conteúdo é alinhado à esquerda do frame; right: o conteúdo é alinhado à direita do frame; MARGINHEIGHT="altura": define a altura da margem em pixels; MARGINWIDTH="largura": define a largura da margem em pixels; SCROLLING="yes/no/Auto": define se o frame terá ou não barra de rolagem; NORESIZE: evita o redimensionamento do frame. Exemplo: Crie uma subpasta dentro de sua pasta com o nome de frames e salve este arquivo com o nome de index.html dentro desta pasta. Index.html Pagina1.html Pagina2.html

62 Texto rolante Com esta tag você pode colocar uma faixa decorativa com um texto animado em sua página. Para entendê-la melhor dê uma olhada no exemplo abaixo: Onde

63 Text_rolante.html

64 Ps: Não utilize esse elemento em demasia. Se você for investir na área e fazer mais cursos, verá que essa não é uma boa prática de usabilidade. Conclusão do Curso de HTML Você aprendeu a linguagem HTML e acompanhou, na prática, as TAGS mais comuns. Na próxima página você irá aprender sobre HTML5. Se você deseja se aprofundar para tornar sua página bonita, colorida, dinâmica e de acordo com as especificações W3C dos padrões WEB, recomendamos o curso de XHTML e depois o de CSS. Posteriormente, também invista em JavaScript e Tableless. Introdução HTML5 A história do HTML é comentada em profundidade nos cursos de HTML e XHTML. Neste curso é apresentado apenas um resumo: Nos anos 1990 as atividades na Internet giraram em torno do HTML. Sua primeira versão(projeto) foi concebida em 1993 e rapidamente chegou à versão4.01, em 1999 (antes disso passou pelas versões 2.0,3.2 e 4.0). Mas, tão rápido quanto o lançamento das quatro primeiras versões, o foco dos padrões web mudou radicalmente para o XML/ XHTML. Requisitos Saber (X)HTML. CSS javascript jquery (opcional, porém é fundamental a qualquer desenvolvedor Web; alguns exemplos do curso usam jquery). W3C Tim Berners-Lee criou/ propôs a Web (URI + HTTP + HTML) em 1989 (veja mais a respeito no site e o W3C em 1994, no MIT, Laboratório de Ciência da Computação.

65 Uma das principais funções desempenhadas pelo W3C é desenvolver padrões, denominados "Recomendações dow3c", que por sinal hoje estão sendo muito bem seguidos pelos navegadores, com uma ou outra diferença (principalmente em se tratando do Internet Explorer). Com a chegada do HTML 5, ninguém quer ficar para trás, então a esperança é a de que o Internet Explorer siga com mais afinco tais padrões. WHATWG - Web Hypertext Application Technology Working Group Grupo formado em 2004 e mantido até hoje por grandes empresas e desenvolvedores como, por exemplo, Mozilla Foundation, Opera Software e Apple Inc. WHATWG e W3C trabalhavam separadamente até que, por volta de 2006, o trabalho do WHATWG foi conhecido pela W3C. No mesmo ano, Tim Berners Lee(criador da Web e diretor do W3C) anunciou que trabalharia em conjunto com o WHATWG no desenvolvimento do HTML 5 e que o XHTML continuaria sendo mantido paralelamente, de acordo com as mudanças causadas no HTML. Porém, o grupo que estava cuidando do XHTML foi dissolvido em 2009, mostrando que o HTML 5 é realidade e veio para ficar. WHATWG, W3C e IETF O objetivo do grupo em conjunto com o W3C: Trabalhar na evolução do HTML. Evoluir e acelerar o avanço dos Padrões Web. Resultado: No mesmo ano (2004) tiveram início as especificações do HTML5. A Internet Engineering Task Force (IETF) é responsável por protocolos de Internet como, por exemplo, o HTTP. HTML5 define um novo WebSocketAPI que conta com um novo WebSocket protocolo, que está em desenvolvimento por um grupo de trabalho da IETF. O HTML5 está pronto?

66 Não por completo. Há controvérsias sobre quando será definitivamente finalizado. O fato é que está em pleno desenvolvimento e os atributos das APIs do HTML5, usados neste curso, podem sofrer alguma alteração com o tempo. Portanto, cabe ao desenvolvedor ficar atento às mudanças. O importante mesmo é saber que o HTML5 não é apenas tendência, é realidade! E quem souber HTML5, não tenha dúvidas, sairá na frente no mercado de trabalho, seja de Desenvolvimento Web ou Mobile(sim, também será abordado posteriormente sobrehtml5 e Dispositivos Móveis). Editores HTML5 Como você já deve saber, pode-se desenvolver em HTML até com o Notepad. Entretanto, recomendamos estes editores: - Notepad++ - Um dos melhores editores de textos simples, possui suporte para coloração de sintaxe do HTML ( - Aptana - Atualmente, uma das melhores IDEs para desenvolvimento web com HTML5. Tem suporte para "auto complete" e reconhece os novos elementos e atributos do HTML5, bem como as novas regras do CSS3 ( Exemplo de autocomplete no Aptana Studio:

67 reversed é um atributo novo introduzido no HTML5para o elemento e será ensinado posteriormente. Veja que o aptana o identificou e, em inglês, explicou sua utilidade. Uma nova visão de desenvolvimento O HTML5 é baseado em diferentes princípios de "Design", conforme descrito nas especificações do WHATWG. São eles: Compatibilidade Utilidade Interoperatividade Acesso Universal Saiba sobre cada um deles: Compatibilidade Pela análise de milhões de páginas foi descoberto um comportamento em comum: utilizar em cabeçalhos uma div com id igual a "header". Diante de tal situação, como o HTML5 veio para resolver problemas reais, foi criada a tag < header >. O HTML5 introduziu tags semânticas para dar significado aos sites. Veja a lista dos 20 ids mais populares entre as páginas Web:

68 Footer Content Header Logo Container table1 menu layer1 autonumber1 search nav wrapper top table2 layer2 sidebar image1 banner navigation Para visualizar a lista completa, acesse: Foi a partir de dados e problemas reais que algumas novas tags foram criadas para o HTML5, como se pode ver em: Essa página do google possui estatísticas de uso que foram filtradas a partir da análise de bilhões de páginas. Veja um exemplo em: A análise não é recente (é de 2005), mas ainda é válida porque o cenário não mudou tanto. O HTML5, apesar de possuir algumas características revolucionárias, não é uma completa e absoluta revolução (com mudança radical de conceitos e estrutura), mas sim uma evolução, ao mudar para melhor algumas das práticas existentes. HTML5 apropria-se do "conceito" de "não reinventar a roda", mas sim atualizá-la, melhorá-la.

69 Utilidade Garante que a marcação HTML possa ser usada para todos os fins a que se destina. OHTML5 possui uma prioridade que, quando em dúvida, aplica uma solução voltada para o "bem comum" do usuário. Por exemplo: Dados os seguintes ids: id="container" id=container ID="container" Conforme você sabe, apenas a primeira opção é um id válido em XHTML, pois o atributo está em minúsculo e entre aspas. Os outros dois são considerados inválidos. Xhtml.html Ao tentar validar esse XHTML, aparecerão os seguintes erros: Todos os dois ids são inválidos para o XHTML, pois sua marcação é rígida quanto à estrutura do documento. Html5.html Ao validar o documento HTML5 aparecerá este resultado:

70 É claro que você não pode criar seu documento todo mal formatado; na verdade, não deve! Siga a rigorosidade do XHTML. Esse exemplo serve apenas para mostrar que o HTML 5 é voltado para o usuário. Se algo falhar, o HTML5 conta com um "mecanismo" que tenta contornar a situação para oferecer o melhor possível ao usuário. O HTML5 sabe que esses ids estão colocados de forma errônea; ele consegue identificar isso e, internamente, via mecanismos de XML contorna tal situação para que, ainda assim, o documento seja exibido e formatado da melhor forma possível. Para um documento XHTML se beneficiar das funcionalidades e estar em conformidade com a linguagem de marcação XML (essa era a ideia central daw3c), deve ser servido usando o mime type application/xhtml+xml ou application/xml. No entanto, não é isso o que acontece em 95% dos casos. Os documentos XHTML são servidos usando o mime type para HTML text/html. A ideia da W3C era evoluir o HTML em conformidade com o XML (idéia muito boa e coerente, por sinal). No entanto, esbarraram no seguinte problema: Se o documento XHTML violasse alguma regra do XML, causaria um "erro fatal" no documento e todo o resto nem seria exibido. Essa situação pode ser simulada, servindo um documento XHTML Strict com o mime type xml. Se você não programa PHP, não se preocupe, os resultados serão postados aqui. Acompanhe: teste-xhtml-xml.php Ps: Foi usada a função header() do PHP para forçar o documento ser servido como XML.

71 Tudo ok, é um documento XML válido. Agora, se no h1 forem removidas as aspas duplas do atributo class: Teste-xhtml-xml.php

72 No Firefox: Se o documento fosse exibido usando o mime type text/html, esse erro seria ignorado e só seria identificado no validador da W3C. Mas, ao ser exibido como XML o erro foi fatal e o documento nem foi exibido pelo navegador. Por esse motivo os desenvolvedores não adotaram o XHTML como sendo XML, por receio de seus sites serem abruptamente interrompidos a qualquer falha mínima de marcação. Consideração: Existe uma maneira de usar o HTML5em conformidade com o XML; no entanto, não faz parte do escopo deste curso. O foco é HTML5. Segurança Segurança é grande preocupação do HTML5 para que suas funcionalidades não ofereçam brechas. Mas, convenhamos, as falhas sempre existirão. Inclusive, alguns cientistas da computação já encontraram possíveis falhas no "Draft" (rascunho) do HTML5 e relataram o fato (provavelmente já foram corrigidas). A questão de segurança será constantemente atualizada e a tendência é ter cada vez mais páginas seguras. Não se pode negar

73 que o HTML5, nesse sentido, é bem mais seguro que as outras versões do HTML. O HTML5 implementou a validação de dados de formulários, mas é sempre bom ressaltar: Não confie apenas na validação no lado do cliente, valide também os dados recebidos no servidor. Para se ter ideia, no lado do cliente (usuário/browser), uma pequena falha na expressão regular da validação de formulários pode gerar um "ataque ddos" e o Browser entrar em um Loop infinito e travar (apenas um exemplo). Alguns dos problemas que podem gerar violação de segurança e que foram / serão corrigidos no HTML5podem ser encontrados neste ótimo site: HTML5 Security Cheatsheet ( Simplificar e evitar complexibilidade No HTML5 tudo está relacionado com simplificar sempre que possível e evitar complexibilidade. Mais que isso, a interoperabilidade visa fazer com que uma implementação funcione em variados sistemas. OHTML5 foi projetado para lidar com erros, preferindo a "recuperação" do dado, mesmo exibindo-o um pouco "quebrado" (como mostrado no início do curso, no exemplo do uso incorreto do atributo ID), do que apresentar a mensagem de erro para o usuário. Ou seja, assim como citado anteriormente, o usuário final é o centro das "atenções". Acesso Universal O princípio de acesso universal pode ser dividido em três categorias: Acessibilidade: Melhor suporte aos usuários com deficiências (visuais, auditivas e etc.). O HTML5trabalha em conjunto com a Web Accessibility Initiative (WAI) fornecendo melhores alternativas de acesso como, por exemplo, provendo melhor suporte aos leitores de tela e etc. Um clássico exemplo é o elemento img: se o leitor de tela não carrega determinada imagem, não significa que ela deva ser desconsiderada. Ela deve continuar para que seu

74 atributo alt (que é a descrição textual da imagem) seja lido pelo leitor. O ponto principal da questão é: Fornecer meios alternativos de acesso para todos. E nisso, o HTML5 promete fazer o possível para que cada vez mais se tenha melhor acessibilidade. Independência de mídia: O HTML5 deve funcionar em diferentes plataformas e dispositivos, seja computador, notebook, smartphone, tablet e etc. Suporte para todas os idiomas: Com essa funcionalidade, a produção de documentos nos diferentes idiomas existentes é facilitada. Por exemplo, usar a tag para exibir textos do idioma leste asiático. APIs do HTML 5 O HTML5 fornece suporte nativo a muitos recursos que antes só eram possíveis instalando algum plugin no navegador ou usando complexos hacks (APIs, socket nativo e etc.). API significa "Application Programming Interface". Pense em uma API como sendo uma interface gráfica de usuário, exceto que em vez de ser uma interface para seres humanos, é uma interface para o código. Uma API fornece um conjunto de "botões" (métodos pré-definidos) para o código, que podem ser pressionados para se obter o comportamento desejado do sistema. API baseada em comandos é uma forma de abstrair as coisas mais complexas que são feitas em segundo plano (ou às vezes por um software de terceiro). Algumas das APIs atualmente em desenvolvimento/teste: The Contacts API - Selectors API Level Indexed Database API - Web Workers - Web Storage - The Web Sockets API - Selectors API Level Server-Sent Events - XMLHttpRequest - XMLHttpRequest Level 2 -

75 Geolocation API Specification - HTML Canvas 2D Context - File API - File API: Writer - File API: Directories and System - HTML Microdata - Media Capture API - HTML Media Capture - Messaging API - HTML5 Web Messaging - Web Notifications - Clipboard API and Events - Calendar API - Battery Status Event Specification - Touch Events Specification - Page Visibility - Timing Control for Script-Based Animations - Navigation Timing - Resource Timing - The Network Information API - DeviceOrientation Event Specification - User Timing - Performance Timeline - Web SQL Database - Programmable HTTP Caching and Serving - Web Audio API - Audio Processing API - Vibration API -

76 A maioria dessas APis ainda não são realidade. Estão em pleno desenvolvimento ou os Browsers atuais ainda não suportam tais funcionalidades. HTML 5 e a compatibilidade entre os navegadores Atualmente, o Browser de melhor suporte aohtml5 é o Google Chrome. Logo em seguida vem Firefox, Opera e Safari. Neste curso, serão usados os seguintes Browsers: Google Chrome Canary - Firefox versões Beta/Release - BR/firefox/all-beta.html. Opera Beta/Release - O Google Chrome Canary será o principal. Essa versão Canary é para desenvolvedores, sendo lançadas atualizações diariamente. Além disso, é o Browser com o melhor suporte ao HTML5, sendo possível testar a maioria das funcionalidades. O que o Google Chrome ainda não tiver implementado, será testado no Opera ou Firefox. Um bom site (atualizado periodicamente) para testar o que cada navegador suporta das principais funcionalidades do HTML5 é o Confira:

77 Faça também o teste nos navegadores Firefox e Opera. Outro grandioso e talvez o principal site é: Ele mostra um índice com links para verificar a compatibilidade de diversas funcionalidades junto aos navegadores. Verifica propriedades da CSS3, JavaScript, APIs (as APIs citadas anteriormente), SVG e etc. Para visualizar, basta clicar em um dos itens, por exemplo:

78 Abrirá uma tela com a análise atual de compatibilidade desta funcionalidade: Essa tela informa que a API está em desenvolvimento, sua descrição e o suporte que cada versão de navegador fornece. Veja que apenas o Google Chrome, a partir da versão 13, tem suporte para o que foi desenvolvido até o momento; o Firefox tem suporte parcial. No decorrer deste curso, algumas dessas APis serão exemplificadas. Caso à parte: ultimamente a Microsoft tem realizado um bom trabalho com o Internet Explorer que, ainda assim, fica atrás de todos os outros citados aqui, sendo que as versões 8 e 7 não têm quase nenhum suporte aohtml5. Com isso, os usuários têm necessidade em atualizar seus Browsers, algo que vem acontecendo com frequência ultimamente e, isso, para os desenvolvedores, é ótimo! Conheça outros sites que podem auxiliar sobre a compatibilidade atual dos navegadores junto aos recursos do HTML5:

79 O que é o DOM? DOM é uma interface de programação, baseada no modelo de objetos, que permite a manipulação e transformação de documentos em XML. A interface DOM manipula documentos XML na forma de estrutura em árvore. Quando um documento é carregado na memória do computador, suas estruturas podem ser lidas e manipuladas através do objeto DOM. A interface DOM faz a representação do documento através de uma árvore de nós (tree of node), em que cada objeto possui sua propriedade e método. No DOM existem objetos para representação de elementos, atributos, entidades e etc. O objeto básico do DOM é o nó (node), que é um objeto genérico na árvore e, portanto, a maioria dos objetos DOM herdam dele. O elemento mais alto de uma árvore DOM é representado pelo objeto Document, que também herda do objeto Node. Conceitualmente, esse elemento é a raiz da árvore e a partir dele é possível acessar a árvore completa do documento XML. Também se pode dizer que DOM é uma API que fornece acesso à estrutura do documento. Por exemplo, o objeto Window pertence ao DOM e nesse objeto há vários métodos de manipulação de uma janela do Browser. Um método bem conhecido é o Window.scrollX(), que retorna a posição horizontal do cursor do mouse na tela. Ou seja, o DOM é o "meio", a forma de se acessar e interagir com os objetos, seus métodos e propriedades.

80 Representação estrutural deste documento: Representação estrutural deste documento em forma de diagrama:

81 Ao exibir esse documento o navegador vai criar na memória uma estrutura hierárquica (em formato de árvore) com representações de cada objeto exibido. Essa estrutura se inicia com o objeto window, que representa a própria janela aberta do navegador. Cada navegador tem pequenas particularidades ao montar os detalhes da estrutura, mas de maneira geral é possível se ater ao que eles têm em comum. O exemplo acima, quando exibido pelo navegador, deve gerar a seguinte estrutura: window: a janela do navegador ou frame onde o documento é carregado. opener: se é uma janela popup, opener aponta para a janela que a abriu. parent: se é um frame, parent aponta para o frame ou janelapai, aquele que contém o frameset que carrega a página. frames: aponta para uma coleção, se houver em frames no documento (neste exemplo não há). location: objeto que gerencia a URL da janela atual. Possui, entre outros, os métodos reload e replace. history: objeto que gerencia o histórico da janela atual. Possui, entre outros, os métodos back e forward. document: representa o documento HTML aberto (aqui deve começar, de fato, o seu interesse). title: é o título do documento. body: representa a tag body, considerada a tag-base para o acesso ao conteúdo do documento. childnode 0: é o elemento h1 no documento acima, primeiro filho do body.

82 childnode 1: é o elemento p, segundo filho debody. Esse elemento também possui um filho: childnode 0: é o elemento b dentro do p. Essa estrutura está bastante simplificada, pois cada um dos elementos tem mais propriedades e métodos. O importante é saber que os elementos são representados em árvore (Hierarquia), como mostrado acima. É possível visualizar e navegar sobre toda a estrutura DOM de um documento usando a extensão Firebug para Firefox ou "ferramentas do desenvolvedor" do Google Chrome. A título de curiosidade, usando o Firebug para Firefox, veja a estrutura DOM completa do documento acima: Observe que o DOM em si, é algo complexo. Querer entendê-lo com excelência (bem como manipulá-lo) não é tarefa rápida e exige muito estudo, prática e curiosidade.

83 Detectando recursos HTML5 com o Modernizr Modernizr ( é uma biblioteca de detecção que possibilita verificar o suporte da maioria das características do HTML5 e CSS3. Além disso, ela permite que a versão 8 e anteriores do Internet Explorer reconheçam os novos elementos do HTML5. Isso não quer dizer que nelas serão aplicadas as funcionalidades do HTML5, mas apenas garantir que essas versões reconheçam os principais elementos. Por exemplo, elemento de seção que será demonstrado logo a seguir. Essa biblioteca roda automaticamente assim que for adicionada no head do documento. Com ela se pode verificar se o browser suporta as mais diversas APis dohtml5, propriedades do CSS3 e etc. A biblioteca cria um objeto JavaScript chamado "Modernizr" com propriedades e métodos com nomes idênticos aos das funcionalidades a detectar. Documentação completa: Exemplo de uso: Agora teste se o Browser suporta WebGL, que dispõe de uma API para renderização de gráficos 3D, acelerados por hardware, sem a necessidade de instalar plugins adicionais. Exemplo hg/aquarium/aquarium.html

84 Modernizr.htm Em execução no Google Chrome Canary:

85 No Firefox: No Internet Explorer: A postura da Microsoft é a de que o WebGL é inseguro e, portanto, não implementará no Internet Explorer. Pelo que parece, nem mesmo as novas versões do navegador suportarão. Aproveitando o momento, se você quiser, baixe o preview da próxima versão do IE neste link: Por fim, fica a dica: É sempre importante usar essa biblioteca em produção em sites e projetos, pois ela garante que as versões

86 anteriores do IE reconheçam os principais elementos dohtml5 como elementos HTML. Estrutura básica de um documento HTML 5 A estrutura básica é quase a mesma das versões anteriores, sendo a única diferença a declaração do Doctype. Doctype A HTML permite que desenvolvedores criem diversos tipos de documentos, cada um definido por regras diferentes. As regras de cada tipo são detalhadas dentro da especificação denominada "Definição do Tipo de Documento" (Document Type Definitions - DTD). A declaração Doctype informa, aos serviços de validação e aos navegadores modernos, a DTD que foi utilizada para elaborar a marcação do HTML. Essa informação instrui os serviços de validação e os navegadores sobre como tratar a página. Existem diferentes Doctypes para uso em HTML e XHTML. No HTML5, o Doctype foi simplificado, não havendo necessidade de referenciar o link do DTD (como é no XHTML). Desta forma, os navegadores já entendem que aquele documento é HTML5. Conheça as diferenças: Um documento XHTML seguindo o DTD Strict:

87 Agora, a estrutura básica de um documento HTML5: Essa é basicamente a estrutura usada para os sites/aplicações HTML5 neste curso. Ps: A sintaxe do Doctype não é sensível à letra, portanto, tanto faz escrever em maiúsculo ou minúsculo. Mas é bom seguir sempre uma regra e definir um padrão de escrita. É recomendável usar a sintaxe usada aqui no curso. Sintaxe do HTML5 Pode-se dizer que o HTML5 possui sintaxe mais "relaxada" pois: Os atributos podem ser escritos tanto em letra minúscula quanto em maiúscula. O uso de aspas nos atributos é opcional. O fechamento de tags vazias é opcional. Entretanto, para melhor compreensão do código - e até mesmo visando manter um padrão e uma boa prática - é recomendável que você sempre siga este modelo de sintaxe:

88 Conclusão Escreva os elementos e atributos sempre em letra minúscula. Sempre use aspas nos valores dos atributos. No HTML5 não é necessário fechar os elementos "vazios": ao invés de < img / > faça: < img > (se você está muito acostumado com o XHTML e não consegue deixar de fechar os elementos, sem problemas; é apenas uma sugestão de sintaxe que, inclusive, é usada pela W3C para o HTML5). Atributos booleanos não precisam de valor, nohtml5; veja o "required" do input. Portanto, ao invés de: required="required" defina apenas: required. Agora, se o tipo do documento for XHTML, por exemplo, os booleanos devem conter um valor, no caso: required="required". Charset Para que sejam interpretados corretamente por navegadores e aprovados nos testes de validação de marcação, todos os documentos devem declarar o tipo de codificação de caractere usado em sua criação (utf-8, ISO e etc). A meta tag "charset" define a codificação do documento. Em cada conjunto de caracteres (charsets) existe um número único, para cada caractere, designado para sua identificação. Essas unidades numéricas são chamadas de "code points". Por exemplo,

89 a letra "a" no encoding ISO está na posição de número 65, e assim por diante com cada caractere do conjunto. O computador pessoal foi desenvolvido pelos norte-americanos, que não utilizam acentos em suas escritas. A primeira tabela de caracteres adotada em larga escala, a ASCII (sigla para Código Padrão Americano para Intercâmbio de Informações), não continha acentos. Além disso, era um código de 7 bits, e não de 8. Ou seja, ao invés de 256 posições, a tabela ASCII tinha apenas 128. Como curiosidade, conheça a tabela ASCII original (não se preocupe, pois não é necessário decorá-la):

90 Com a popularização do computador ao redor do mundo, passou a ser necessário usar acentos e caracteres de outros idiomas. Isso

91 fez surgir uma infinidade de outras tabelas de caracteres. Felizmente, quase a totalidade delas segue a tabela ASCII nas primeiras 128 posições. Ou seja, um texto em ASCII, escrito em inglês - ou em "portugues sem acentuacao" - será lido em qualquer computador ao redor do mundo. Porém, ao usar acentos, é necessário que o texto seja salvo numa tabela específica para que seja lido usando aquela determinada tabela. Um exemplo em que acontece "erro" é de um site usando charset não configurado previamente para ser exibido no navegador, onde deveria ter "acentos" no texto, existem caracteres especiais. Por isso, é necessário indicar em qual página de código você salvou o texto. Importante Talvez você nem indique e abra a página e veja que está tudo normal. Mas, lembre-se, você está usando um computador em português - ou em outro idioma ocidental - em que a página de código-padrão provavelmente é a windows-1252, padrão em sistemas Windows em português, a iso , padrão em muitas distribuições Linux em português, ou a utf-8, e seu navegador está configurado para primeiro testar essas tabelas quando o documento não possuir indicação de charset. Mas nada garante que, sem indicar explicitamente o charset utilizado, o documento vá funcionar como, por exemplo, num Windows em japonês ou num Linux em hebraico. Utf-8 UTF-8 é o mais rico. Com ele é possível representar qualquer caractere Unicode e da tabela Ascii. O UTF-8 vem sendo adotado como um charset-padrão para páginas web, devido à boa "compatibilidade". Siga estes passos para configurar um documento parautf-8: 1 - Configurar o charset do documento. A maioria dos bons editores possui essa opção. É recomendável o Notepad++:

92 Agora, para que o arquivo seja definitivamente salvo em utf-8, crie uma div com um conteúdo qualquer e salve-a: Html5.htm 2 - O segundo passo é informar na meta charset a codificação usada (utf-8) para que os browsers usem a tabela correta. Neste exemplo, foi informada entre as tags head do documento (linha 4 do Notepad++). Validação de documentos HTML5 A validação é o mecanismo que indica os erros presentes na marcação HTML para que você possa corrigi-los. Durante o processo de desenvolvimento é importante sempre validar o projeto, na medida em que for avançando as etapas. Até porque a marcação HTML pode conter erros e funcionar normalmente em seu navegador desktop, mas não há como garantir que funcionará em um navegador de dispositivo mobile (que pode

93 conter menos recursos para evitar os erros). Por isso, validar é sempre uma boa prática. Existem duas ferramentas para validação: Validador oficial da W3C - HTML5 Validator - Abra o: Valide o seguinte documento: Validar.htm Basta selecionar o arquivo e clicar em "Check":

94 Observe que o documento passou no teste: Agora, altere o elemento < /h1 > para: A tag de fechamento foi trocada para a de abertura < h1 >. Salve o documento e valide novamente: Esse é o objetivo da validação: apontar os possíveis erros na marcação HTML5. Descendo a barra de rolagem, você verá o descritivo dos erros encontrados, assim você poderá localizar com mais rapidez. A semântica do HTML 5 A expressão "web semântica" equivale à "web com significado". O HTML5 implementa um conjunto de tags para construir layouts de forma mais intuitiva e semântica (com significado). Uma página semanticamente coerente é facilmente interpretada por humanos e máquinas. Por exemplo, o Google ao varrer um documento HTML5 identificará o que é cabeçalho, menu, rodapé e etc.

95 O HTML5 introduziu 28 novos elementos, cada um com sua semântica. Também introduziu controles para validação de formulários, não sendo mais necessário o uso excessivo de Javascript para tal. Saiba as diferenças do HTML5 em relação ao HTML4: A seguir, conheça as novas tags HTML5 para formação de layout que, para este fim, substituirão as tags divs. Header O elemento < header > foi criado para definir o cabeçalho do site. No HTML/XHTML, é muito comum os desenvolvedores criarem um elemento div de id igual a "header". Normalmente, o cabeçalho de um site não é duplicado nas páginas, sendo o mesmo cabeçalho usado em todo o site com algumas modificações internas de página para página. Footer A tag < footer > define o rodapé do site. Esse elemento não cria uma nova seção tal como criam os elementos article, aside, nav e section. Article O elemento < article > define um bloco de texto único. Por exemplo, uma mensagem, um artigo, uma notícia. Em um site de artigos, cada artigo deve ser colocado em um novo < article >. Nav O elemento < nav > destina-se a marcar uma seção da página que contenha links para outras páginas. Mas nem todos os links devem ser agrupados dentro de nav. Geralmente links de menu e links laterais como, por exemplo, categorias de um blog e etc. Aside O elemento < aside > agrupa informações separadas, mas relacionadas ao conteúdo principal. São informações como publicidade, textos com propaganda, barras laterais e outros

96 conteúdos que possam ser considerados separados do conteúdo principal. A navegação lateral de categorias do blog à seguir é um exemplo prático de onde seria válido o uso do aside juntamente com o elemento < nav > para os links: Uso_do_aside.html Section

97 A tag < section > define uma nova seção genérica no documento. Por exemplo, a página principal de um site pode ser dividida em diversas seções: introdução ou destaque, notícias, informação de contato e chamadas para outras páginas. Section é semanticamente diferente de div, que pode definir qualquer bloco de texto para formatação. Section deve ser usada para definir algum bloco com significado para o site, já citado anteriormente, como notícias, destaque e etc. Posteriormente você verá isso na prática. Entendendo as subdivisões de um documento HTML 5 Com o HTML4 é usada a tag div, que possui semântica "neutra" na subdivisão lógica do site. Para entender o que foi explicado sobre os elementos semânticos para a formação de layout, faça na prática estes dois exemplos um em HTML4 e outro em HTML5. Blog_html4.htm Diagrama da estrutura desse exemplo em HTML4:

98 Embora não haja nada errado nessa estrutura ela é desconhecida para um navegador - ou até mesmo para programas como, por exemplo, o Googlebot. Como saber o significado de cada parte? Ademais, todas elas usam div que apenas define uma parte genérica no site. HTML5 fornece elementos que denotam claramente o que cada parte significa. Reescreva a estrutura acima usando os novos elementos do HTML5 para a formação de layout: Blog_html5.htm Ps: Foi usada uma estrutura básica, que poderia ter sido enriquecida em se tratando de semântica. Ao final do curso esse mesmo exemplo será retomado e modificado, com novos elementos e nova estrutura. Até lá você aprenderá o que cada parte significa. No navegador, o resultado visual é o mesmo do exemplo anterior: Diagrama da estrutura desse exemplo em HTML5:

99 Observe que, a partir da versão 9, o InternetExplorer reconhece os elementos do HTML5: Mas isso não acontece com as versões inferiores. Veja o mesmo exemplo no IE8: Dica: Para testar o exemplo em diferentes versões do Internet Explorer, você pode usar o software IETester

100 Soluções A primeira e menos recomendada é usar Javascript para criar os elementos. Por exemplo, altere o cabeçalho do exemplo de HTML5 para:

101 A segunda e mais recomendada solução é usar a biblioteca Modernizr( por exemplo: Exemplo em execução no IE8:

102 A biblioteca Modernizr, como dito no início do curso, também cria referência aos novos elementos do HTML5 nos browsers mais antigos. Por isso, seu uso em um projeto HTML5 é altamente recomendado. Agrupando nav e outros elementos em um aside Blog_html5_2.htm

103 A especificação diz: "O elemento aside pode ser usado para barras laterais, publicidade, grupos de elementos de navegação e para outros conteúdos que são considerados separados do conteúdo principal da página". Usando a mesma lógica, coloca-se o "sobre o autor" e a navegação para suas redes sociais dentro do elemento aside. Para fins de layout, coloca-se dentro da div #artigos os "articles". Dessa forma flutua-se a div #artigos, usando CSS. De acordo com a especificação, o < article > define o conteúdo externo, que pode ser um artigo de notícias a partir de provedor externo, um texto de blog, um texto de fórum ou qualquer outro conteúdo independente. No projeto final do curso será desenvolvido um site completo em HTML5, usando os vários recursos que ainda serão mostrados. Portanto, não se assuste com esse pequeno exemplo sem estilos. Categorias dos elementos

104 Cada elemento no HTML pertence a um ou mais grupos de elementos com características similares. As categorias de conteúdo são: Metadados Fluxo Seção Cabeçalhos Frase Incorporado Interativo A especificação do HTML5 traz uma ilustração mostrando como as categorias de conteúdo se relacionam entre si: Veja a lista completa dos elementos e suas categorias: Metadados Os elementos que compõem a categoria Metadata são: Base Command link meta noscript script style

105 title Esse é o conteúdo que vem antes da apresentação, formando uma relação com o documento e seu conteúdo com outros documentos. Fluxo A maioria dos elementos utilizados no corpo do documento é categorizada como "Flow Content": a abbr address area article aside audio b bdo nav noscript object ol output p pre progress q ruby samp script section select blockquote br button canvas cite code command datalist

106 del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label link (Se o atributo itemprop for utilizado) map mark math menu meta (Se o atributo itemprop for utilizado) meter small span strong style (Se o atributo scoped for utilizado) sub sup svg table

107 textarea time ul var video wbr Text Ps: Foram mostradas aqui as Tags < b > e< i > que, de acordo com a especificação dohtml5, devem ser usadas só em última instância, pois podem muito bem ser substituídas pelas tags < strong > e < em > respectivamente. Seção Os elementos de seção definem o grupo de cabeçalhos e rodapés. São elementos que agrupam outros elementos no documento: article aside nav section Cabeçalhos Definem uma seção de cabeçalhos. São estes: h1 h2 h3 h4 h5 h6 hgroup

108 Frase Constitui-se de elementos que marcam o texto do documento, bem como os elementos que marcam este texto dentro do elemento de parágrafo: a abbr area (se for descendente de um elemento de mapa) audio b bdo br button canvas cite code command datalist del (se contiver um elemento da categoria de Frase) dfn em embed i iframe img input ins (se contiver um elemento da categoria de Frase) kbd keygen label link (se o atributo itemprop for utilizado) map (apenas se contiver um elemento da categoria de Frase) mark math meta (se o atributo itemprop for utilizado) meter noscript object output progress q

109 ruby samp script select small span strong sub sup svg textarea time var vídeo wbr Text Incorporado Elementos que importam outra fonte de informação para o documento: audio canvas embed iframe img math object svg vídeo Interativos São elementos que fazem parte da interação de usuário: a audio (se o atributo control for utilizado) button details embed iframe

110 img (se o atributo usemap for utilizado) input (se não for do tipo hidden) keygen label menu (se for do tipo toolbar) object (se o atributo usemap for utilizado) select textarea vídeo (se o atributo control for utilizado) Atributos e elementos descontinuados (obsoletos) no HTML5 Alguns atributos foram descontinuados porque modificam a formatação do elemento e suas funções podem ser substituídas com o uso das CSS. Evite usá-los nos sites HTML5. Os atributos que foram descontinuados são muitos e você não precisa - e nem deve - gravá-los. Deve ser aplicada apenas uma regra geral:? Não use atributos para prover formatação aos elementos. Ao invés disso, tente usar CSS. Atributos Conheça os atributos descontinuados (a lista é extensa): charset - No elemento: a charset - No elemento: link coords - No elemento: a shape - No elemento: a methods - No elemento: a methods - No elemento: link name - No elemento: a (except as noted in the previous section) name - No elemento: embed name - No elemento: img name - No elemento: option rev - No elemento: a rev - No elemento: ink urn - No elemento: a urn - No elemento: link nohref - No elemento: area profile - No elemento: head

111 version - No elemento: html usemap - No elemento: input longdesc - No elemento: iframe longdesc - No elemento: img lowsrc - No elemento: img target - No elemento: link scheme - No elemento: meta archive - No elemento: object classid - No elemento: object code - No elemento: object codebase - No elemento: object codetype - No elemento: object declare - No elemento: object steby - No elemento: object type - No elemento: param valuetype - No elemento: param language - No elemento: script event - No elemento: script for - No elemento: script datapagesize - No elemento: table summary - No elemento: table abbr - No elemento: td e th axis - No elemento: td e th datasrc - Nos elementos: a, applet, button, div, frame, iframe, img, input, label, legend, marquee, object, option, select, span, table, e textarea datafld - Nos elementos: a, applet, button, div, fieldset, frame, iframe, img, input, label, legend, marquee, object, param, select, span, e textarea dataformatas - Nos elementos: button, div, input, label, legend, marquee, object, option, select, span, e table alink - No elemento: body bgcolor - No elemento: body link - No elemento: body marginbottom - No elemento: body marginheight - No elemento: body marginleft - No elemento: body marginright - No elemento: body margintop - No elemento: body marginwidth - No elemento: body text - No elemento: body vlink - No elemento: body clear - No elemento: br

112 align - No elemento: caption align - No elemento: col char - No elemento: col charoff - No elemento: col valign - No elemento: col width - No elemento: col align - No elemento: div compact - No elemento: dl align - No elemento: embed hspace - No elemento: embed vspace - No elemento: embed align - No elemento: hr color - No elemento: hr noshade - No elemento: hr size - No elemento: hr width - No elemento: hr align - No elemento: h1 - h6 align - No elemento: iframe allowtransparency - No elemento: iframe frameborder - No elemento: iframe hspace - No elemento: iframe marginheight - No elemento: iframe marginwidth - No elemento: iframe scrolling - No elemento: iframe vspace - No elemento: iframe align - No elemento: input hspace - No elemento: input vspace - No elemento: input align - No elemento: img border - No elemento: img hspace - No elemento: img vspace - No elemento: img align - No elemento: legend type - No elemento: li compact - No elemento: menu align - No elemento: object border - No elemento: object hspace - No elemento: object vspace - No elemento: object compact - No elemento: ol align - No elemento: p width - No elemento: pre align - No elemento: table

113 bgcolor - No elemento: table cellpadding - No elemento: table cellspacing - No elemento: table frame - No elemento: table rules - No elemento: table width - No elemento: table align - Nos elementos: tbody, thead, e tfoot char - Nos elementos: tbody, thead, e tfoot charoff - Nos elementos: tbody, thead, e tfoot valign - Nos elementos: tbody, thead, e tfoot align - Nos elementos: td e th bgcolor - Nos elementos: td e th char - Nos elementos: td e th charoff - Nos elementos: td e th height - Nos elementos: td e th nowrap - Nos elementos: td e th valign - Nos elementos: td e th width - Nos elementos: td e th align - No elemento: tr bgcolor - No elemento: tr char - No elemento: tr charoff - No elemento: tr valign - No elemento: tr compact - No elemento: ul type - No elemento: ul background - Nos elementos: body, table, thead, tbody, tfoot, tr, td, e th Reiterando: Sempre que tiver que estilizar, use CSS e não atributos dos elementos. Essa é a recomendação da W3C para uma página cada vez mais semântica e limpa. Elementos descontinuados São estes os elementos que o HTML5 não mais provê suporte: < acronym > - Use o elemento < abb r>. < applet > - Use o elemento < object >. < basefont > - Use CSS para conseguir esse resultado. < bgsound > - Use o elemento < audio >.

114 < big > - Use CSS para conseguir esse resultado. < blink > - Não use. Isso é dos primórdios do HTML4. < center > - Use CSS para conseguir esse resultado. < dir > - Use o elemento < ul >. < font > - Use CSS para conseguir esse resultado. < frame > - Foi descontinuado por ferir os princípios de acessibilidade. Com CSS e uma div dá para "emular" em partes um frame. < frameset > - Idem < frame >. < isindex > - Não use, também é dos primórdios do HTML 4. < marquee > - Não use, também é dos primórdios do HTML 4. < multicol > - Não mais suportado pelos Browsers atuais. Não use. < nobr > - Use CSS para conseguir esse resultado. < noframe > - Como já dito acima, use frames só em último caso e, ao usar, não precisa dessa tag, pois os browsers ainda suportam frames. < noscript > - 100% dos Browsers atuais suportam JavaScript, portanto, seu uso pode ser descartado. < s > - Não use. < spacer > - Não use. < strike > - Use CSS para conseguir esse resultado. < tt > - Use CSS para conseguir esse resultado. < u > - Use CSS para conseguir esse resultado. < tt > - Use CSS para conseguir esse resultado ou uma tag equivalente. < xmp > - Use o elemento < code >. < rb > - Use o elemento < ruby >. Não é conteúdo deste curso explicar o que cada elemento acima faz. Caso você não conheça algum, é importante testá-lo e ver o resultado para entender por que pode ser trocado por uma tag que o HTML 5 provê suporte ou por CSS. A W3C possui a ferramenta - pouco conhecida, mas muito útil - "W3C Cheatsheet", referência completa de tags e atributos

115 dohtml5. Inclusive, ela marca os elementos e atributos descontinuados e também os novos e que ainda estão em "rascunho/construção". Para acessá-la: Veja: Definindo acrônimos e abreviações A tag < acronym >, que dava sentido às abreviações, foi cancelada no HTML5. Agora acrônimos e abreviações devem ser feitos usando a tag < abbr >. Confira: Abreviacoes.html Novos eventos do objeto Window Novos eventos para o Objeto Window foram implementados, mas a maioria deles ainda sem suporte nos navegadores. São estes:

116 onafterprint onbeforeprint onbeforeonload onerror onhaschange onmessage onoffline ononline onpagehide onpageshow onpopstate onredo onresize onstorage onundo onunload Elementos que tiveram sua semântica alterada No HTML existiam alguns elementos que traziam apenas características visuais e não semânticas. Alguns deles (já mostrados anteriormente) foram descontinuados, pois eram facilmente substituídos pelo uso das CSS. Entretanto, alguns velhos conhecidos que não foram descontinuados, tiveram seus significados semânticos alterados. Conheça agora as mais importantes alterações. Diferenças semânticas entre < b >, < strong >, < i > e < em > No HTML5, o elemento < b > passa a ter o mesmo nível semântico que um < span >, mas ainda mantém o estilo (apresentação visual) de negrito no texto. Entretanto, ele não dá nenhuma importância semântica (de "força") para o texto marcado com ele. O elemento que o substituiu nesse sentido foi o < strong >. O elemento < i > também passa a ter o mesmo nível semântico que um < span >. Como resultado visual, o texto continua itálico e para os usuários de leitores de tela, a voz utilizada é modificada para indicar ênfase. Ele é útil para marcar frases em outros idiomas, termos técnicos e para marcar visualmente um trecho em itálico sem dar ênfase ao seu conteúdo. Ao contrário dele, o elemento <

117 em >, além de aplicar o estilo visual itálico, dá ênfase (significado semântico) ao conteúdo marcado. Como diferenciá-los em um caso real? No HTML, < strong > representava em sua semântica "forte ênfase" (importância) e < em > representava "ênfase". No HTML5, essas características semânticas foram levemente alteradas (praticamente continuam a mesma coisa): < strong > significa "importância" e < em > "ênfase" com a mesma importância de < strong >. O < em > enfatiza "estresse" linguístico e altera a nuance linguística. Por exemplo, em uma oficina mecânica, o mecânico diz para seu assistente, que está debaixo do carro avaliando-o: - Consegui a chave! O assistente responde: Percebeu a diferença de "tom/nuance" usada? O < strong > permaneceu praticamente a mesma coisa. Se você tem algum conhecimento básico em SEO sabe que o significado é empregar importância a um trecho ou palavra. Por exemplo, na descrição do site do Aprenda: Comando_em.html Veja que foi destacado com < strong > o que se considera ser importante para a frase. Não existe uma "receita de bolo" ou regra a ser aplicada; existem diferentes formas de interpretar o que é ou não importante em um texto. O mais importante é saber que < strong > aplica um significado semântico de importância.

118 Para um destaque semântico de "importância" e ao mesmo tempo um destaque visual de itálico, sem alterar a semântica de "importância", pode-se usar o elemento < i >. Por exemplo: Veja Links em nível de bloco e o atributo href É aceitável ter um elemento de link < a > sem o atributo href. Desta forma ele se torna um placeholder para um link (um espaço para ser link no futuro). Por exemplo, antes e durante o desenvolvimento, quando algum link ainda não tinha uma página-destino definida, usava-se o atributo href assim: Link.html

119 Usar um link assim href="#" causa inconveniente ao usuário, que acha ser de fato um link mas é só uma "capa". Além disso, tecnicamente, é mais um link vazio para a página, sem nenhuma referência. Então, ao invés de usar links assim, faça isto: O link "produtos" não é "clicável" e é perfeitamente aceito pelo HTML5 (mesmo não tendo o atributo href). Mais do que isso, fica como um espaço de link reservado para, por exemplo, a página: "/produtos". Outra alteração importante foi a mudança de conceitos. Por exemplo, antes, um elemento inline não podia conter um elemento de bloco; agora isso é possível. Só não pode colocar dentro de um < a > outro < a >, por exemplo. Antes, no HTML5, quando era preciso ligar vários elementos no mesmo link, eram usados mais de um link para se chegar ao resultado desejado. Por exemplo: Link2.html

120 No HTML5, esse problema pode ser solucionado assim: Têm-se dois elementos e apenas uma ligação, sem duplicar o link na página. Atributos Globais Atributos globais são aqueles que podem ser usados em todos os elementos HTML5 (tanto os novos quanto os antigos). Accesskey Permite definir um atalho para que o usuário consiga focar algum elemento pelo teclado (shift + alt + key). O valor do atributo pode ser um caractere ou uma lista de caracteres separados por espaço. Atalho.html

121 Ao apertar shift + alt + c: class e id São os mesmos velhos conhecidos do HTML - e muito usados - principalmente por causa das CSS e do JavaScript. "class" serve para identificar um ou mais elementos (grupos de elementos). "id" serve para identificar um elemento em particular. Cada id deve ser único e não pode se repetir na página. Class-id.html

122 O intuito desse exemplo foi mostrar que um elemento pode ter mais de uma classe, separadas por um espaço. Contenteditable Permite a edição do conteúdo de um elemento. Esse atributo já existia em algumas versões do Internet Explorer e foi introduzido nas especificações do HTML5. Contenteditable.html Ao clicar no parágrafo de texto "Digite algo aqui..." é possível alterar o seu conteúdo. Contextmenu Cria um menu personalizado (menu de contexto) para o elemento. Ao clicar no elemento com o botão direito do mouse o menu é exibido.

123 O atributo deve receber o mesmo nome do id do container que contém o menu de contexto. Menus de contexto ainda estão sendo escritos pela W3C e os browsers não o suportam, com exceção do Firefox. De acordo com a documentação oficial da W3C, a sintaxe para menu de contexto é a seguinte: Contextmenu.html Veja que é necessário usar o novo elemento menu do HTML5 com o atributo type definido para "context". Como já explicado, atualmente esse exemplo não funciona em nenhum Browser. Como toda regra tem sua exceção, o Firefox decidiu implementar essa funcionalidade por "conta própria" e usando uma sintaxe um pouco diferente da publicada pela W3C. Veja: Apenas o Firefox, a partir da versão 8, suporta tal funcionalidade. Acompanhe este exemplo:

124 Essa é uma funcionalidade espetacular! Pena que ainda esteja em desenvolvimento e, por enquanto, só funcione no Firefox. Dir Altera a direção do texto. Os valores possíveis são: ltr (left to right) e rtl (right to left). Podem ser traduzidos, respectivamente, para: "da esquerda para a direita" e "da direita para a esquerda" (um exemplo de uso dessa direção é o idioma japonês). Dir.html

125 Observe que além do atributo dir, também é possível usar CSS para conseguir esse resultado. Draggable Esse novo atributo HTML5 torna o elemento arrastável. Ele aceita os valores: true e false. Na falta desses valores é definido o valor "auto", que faz com que o Browser use o arrastepadrão para a funcionalidade. O efeito de "arrastar e soltar" só é possível com a integração de JavaScritp, mas esse resultado não faz parte do conteúdo deste curso, assim como a explicação detalhada dos eventos que auxiliam nesse processo. No entanto, será demonstrado um exemplo de como funciona: Draggable.html Agora, acrescente o Script ao exemplo:

126 Hidden Novo atributo do HTML5, caracterizado como "atributo de relevância", booleano, não precisa receber nenhum valor. Quando declarado, visualmente faz com que o elemento em questão não seja exibido pelo navegador. Hidden.html

127 Observe que, internamente, o navegador define uma regra CSS para elementos marcados com esse atributo. Entretanto, ele não deve ser usado apenas para "ocultar" elementos, mas sim ser usado com a ideia semântica de tornar o conteúdo em questão irrelevante. Para exemplificar, veja este caso em que o atributo não deve ser utilizado: Em um sistema de abas, é preciso exibir uma aba e ocultar todas as outras. Para isso, você pode usar uma classe CSS para ocultá-las. Só use "hidden" se a ideia for ocultar e tornar aquele elemento e seu conteúdo irrelevantes. Ainda não é certo, mas pode ser que no futuro o motor de busca do Google entenda esse atributo de forma a "ignorar" (não indexar e tornar irrelevante) o conteúdo marcado com ele. Lang Define o idioma do conteúdo de um elemento. Quando não presente no elemento, o idioma é o mesmo do elemento-pai. Uma

128 prática comum é declarar esse atributo no elemento < html >. Dessa forma, todos os elementos-filhos que não declaram o atributo lang, usam o lang do elemento< html >. Lang.html Observe que o elemento < html > define o lang como "pt-br": Dentro do parágrafo, o span define o lang como "en-us" (inglês americano): Usar o atributo lang é importante principalmente para leitores de tela que, ao encontrarem um conteúdo em outro idioma, sintetizam a voz referente àquele idioma. O leitor de tela é um software usado para obter resposta do computador por meio sonoro, usado principalmente por pessoas com deficiência visual. Spellcheck Esse novo atributo do HTML5 destina-se a disponibilizar o recurso de correção ortográfica e gramatical para os conteúdos textuais. Ortografia.html

129 Resultado: Style

130 Atributo já velho conhecido, usado para definir regras CSS ao elemento. É o chamado "css inline", pois é aplicado diretamente ao elemento. Sempre que possível evite o uso de CSS através desse atributo, pois "suja" bastante as tags. Procure usar sempre classes e ids. Estilo.html Tabindex Define a ordem de navegação pelo teclado (tecla tab). Tecla_tab.html Ao apertar a tecla tab duas vezes:

131 Navegou para o elemento de tabindex igual a2: Title Define o título ao elemento em que é aplicado. Alguns exemplos de uso: Em um link, ele pode ser uma descrição da página de destino. Em uma imagem, ele pode conter os créditos da imagem ou uma descrição dela. Em um parágrafo, pode ser um comentário sobre o texto. Etc. Leitores de tela leem o texto do atributo title. Usar esse atributo também tem importância para SEO, pois o Google entende que o title é mais um complemento àquela informação. Title.html

132 Novos elementos HTML5 O HTML5 introduziu dezenas de novos elementos, que irão auxiliar os desenvolvedores na estruturação dos documentos. Conheça alguns dos novos elementos a seguir. command, menu e seus atributos O elemento command é um comando a ser evocado pelo usuário. Seu uso foi demonstrado na prática, no tópico sobre "contextmenu". Veja agora os atributos disponíveis para esse elemento. O elemento command sempre deve ser filho do elemento menu para que os browsers o renderize. Atributos possíveis (além dos globais já comentados anteriormente): type - Define o tipo do comando. Os valores possíveis são: command, que cria um comando normal associado a uma ação; checkbox que cria um comando do tipo "caixa de seleção" e o tipo radio, que cria um comando do tipo "seleção de item". label - Define o "label" do comando, o seu nome. Deve ser um texto.

133 Icon - Assim como mostrado no tópico "contextmenu", define um ícone para o comando. disable - Valor booleano (true ou false) para desabilitar um comando. checked - Valor booleano para selecionar uma opção do comando (apenas para comandos do tipo checkbox e radio). radiogroup - Agrupa comandos do tipo radio (só deve ser usado em comando do tipo radio). title - Ao passar o mouse sobre um comando, é exibido um "hint" com o conteúdo desse atributo. Menu O elemento de Menu ainda não é suportado por nenhum navegador e está sendo desenvolvido pela equipe responsável pelohtml5. Atributos possíveis (além dos globais, já comentados anteriormente): type - Define o tipo do menu. Valores possíveis: list, valorpadrão, cria uma lista de comandos sem qualquer ação; context cria um menu de contexto, conforme demonstrado no tópico "contextmenu"; por último, toolbar que cria um menu do tipo "barra de ferramentas". label - Define o "label" do menu. Menu.html Já que atualmente nenhum navegador suporta o elemento menu, veja esta simulação de como poderia ficar a sua disposição estrutural em execução: Datalist Elemento usado em conjunto com o elemento input. Sua função é fornecer uma lista de sugestão quando o usuário digitar no input.

134 Isso é possível através de uma ligação entre os elementos. Para isso foi criado, para o elemento input, o atributo "list" para definir um "datalist". Datalist.html Atualmente, apenas o Opera, Google Chrome e o Firefox suportam esse elemento. O "segredo" está na ligação envolvendo o atributo "list": details e sumary O elemento details é muito usado para fornecer informações textuais ou controles de formulários adicionais sobre determinado conteúdo. Com ele é possível criar pequenos "Widgets". O conteúdo desse elemento fica "invisível" por padrão e só aparece quando o usuário clica sobre ele. Além dos atributos globais, ele aceita o atributo open que define se os elementos devem, por padrão, vir ocultos ou visíveis. O elemento sumary foi criado para uso em conjunto com o elemento details. Ele é uma espécie de "rótulo" ou breve sumário das informações adicionais do details.

135 Atualmente, apenas o Google Chrome o suporta: summary_details.html Foi acrescentado o atributo "open". Resultado:

136 A página já abre com o details aberto. Também é possível usar um conjunto de "details" formatados. Por exemplo, chegando ao resultado parecido a esse mostrado na documentação da W3C:

137 Obs: Esse exemplo funciona corretamente apenas no Google Chrome.

138 A intenção com esse exemplo é mostrar, que muito em breve (uma vez que apenas o Google Chrome é o navegador mais adiantado em termos de HTML5 e CSS3), poderemos ter conteúdos bem interativos de forma bem simples. O que antes só era possível com o uso de CSS, imagens e jquery, tornou-se possível de forma bem mais intuitiva com HTML5. dl, dt e dd O elemento < dl > existe desde o HTML4, no entanto, o HTML5 o reaproveitou. Esses elementos fazem parte das chamadas "listas de definição", que são parecidas com as listas ordenadas < ol > e não ordenadas < ul >, mas com uma diferença: as listas de definição sempre trabalham com dois itens: o termo e a definição. A lista é formada pela tag < dl > (assim como a lista ordenada é formada pela tag < ol >), o termo é formado pela tag < dt > e a definição pela tag < dd >. Usar < dl > ou listas < ul > e < ol >? Simples! Sempre que você tiver que montar uma lista analise o seguinte:

139 Será uma lista de Termo - Definição? Então use < dl > pois, com certeza, você estará desenvolvendo um conteúdo bem mais semântico. Será uma lista normal ou uma enumeração de itens simples? Então use < ul > ou < ol >. Lista1.html Lista2.html

140 bdo Elemento para definição da direção de escrita. Bdo.html A especificação da W3C diz: figure e figcaption

141 "O elemento < figure > destina-se a marcar uma unidade de conteúdo e opcionalmente uma legenda para o conteúdo que se constitui em uma peça isolada do fluxo principal do documento e pode ser retirada daquele fluxo sem alterar o significado do documento." Esse elemento é usado para marcar imagens, diagramas, fotos e outros conteúdos independentes. Antes, para se fazer isso, era preciso usar CSS e posicionar a legenda sob a imagem. Agora ficou fácil e bem mais semântico, com o uso dos elementos figure efigcaption (que representa a legenda). Figure.html Apenas reiterando: todos os elementos HTML podem ter seu estilo modificado com o uso das CSS. Portanto, é possível alterar o estilo da legenda. Figure_css.html

142 Ok, visualmente falando não é nenhuma grande revolução. Mas em se tratando de semântica, é muito importante. Analise: Antes, era feito desta forma: No exemplo, o elemento < span > faz o papel da legenda. Mas qual ligação semântica ele tem com a imagem? Será que um Software (por exemplo, um robô de busca) ao ler, entenderá a ligação? Agora, com o uso dos elementos figure e figurecaption a relação semântica entre a imagem e a legenda existe:

143 Sua função é agrupar elementos h1-h6 quando existir mais de um título formando o cabeçalho. Podem ser usados quantos elementos < hgroup > forem necessários. Hgroup.html

144 Mark A função desse elemento é marcar uma palavra ou texto. Os navegadores o renderizam com o fundo na cor amarela. Mas vale uma ressalva: Esse elemento não aplica a semântica de ênfase do elemento < strong >, apenas o marca visualmente. Utilidades Em uma pesquisa: Marcar as palavras pesquisadas no resultado da pesquisa. Calendário: A data atual de um calendário pode ser marcada usando esse elemento. Etc. São muitos os usos possíveis. Como explicado acima, muitos cometem o erro de marcar o resultado de uma busca com < strong >, por exemplo. Mas o elemento < mark > foi criado exatamente para tal finalidade, pois ele não traz valor de ênfase.

145 Como você pode observar, o próprio navegador trata de definir um estilo primário para o elemento: Mas nada impede que essa cor seja trocada. Por exemplo, experimente acrescentar esse CSS no exemplo acima: Mark.html

146 Meter A função desse elemento é marcar uma medida escalar. Por exemplo: Marcar a porcentagem de uso da memória ou do HD. A relevância do resultado de uma consulta. O número de votos obtidos por um candidato, desde que o total de votantes seja conhecido. Esse elemento é adequado para marcar qualquer medida que tenha limites inferiores e superiores. Muitos o usam para marcar a porcentagem de download ou upload de um arquivo, o que não é apropriado. Para tal finalidade existe o elemento < progress > (a ser explicado em seguida). Ele admite os seguintes atributos: value - Define o valor da medida marcada. Seu uso é obrigatório. min - Define o valor mínimo da escala à qual a medida marcada pertence. Se nenhum valor for definido, internamente será atribuído 0. max - Define o valor máximo da escala à qual a medida marcada pertence. Se nenhum valor for definido, internamente será atribuído 1. low - Define um valor, dentro da faixa, considerado "baixo".

147 high - Define um valor, dentro da faixa, considerado "alto". optimum - Define um valor, dentro da faixa, considerado "ótimo". Meter.html Em execução no Opera:

148 Em execução no Google Chrome:

149 Progress Elemento usado para representar o progresso de uma tarefa. Existem duas formas de andamento do progresso:

150 Determinada: Usada quando a medição é feita com um valor "máximo" definido. Dessa forma é possível calcular a porcentagem do progresso atual. Indeterminada: Usada quando não é possível quantificar o término de uma ação. Esse elemento aceita os seguintes atributos (além dos globais): value: Define quanto da tarefa já foi realizado. max: Define o quanto é necessário para realizar a tarefa. form: Associa o elemento progress a um formulário. O valor desse atributo deve ser o id do formulário associado. Progress.html Observe que para ter um progress" indeterminado", basta deixar de definir o atributo "value". Os valores da progress bar, assim como os valores de qualquer elemento, podem ser manipulados viajavascript. Agora, acrescente esse JavaScript no documento:

151 ruby Especifica texto Ruby (tipografia utilizada no Sudeste Asiático). Esse elemento não será aprofundado, para maiores informações: time De modo geral pode-se dizer que a função desse elemento é designar tempo. O < time > assegura que datas e horários apareçam em formato padronizado e compreensível para máquinas (google e etc). Admite os seguintes atributos: datetime: Define o horário e/ou data que está sendo marcado. Caso ele não seja especificado, a data e/ou hora deverá ser marcada como conteúdo do elemento. pubdate: Informa que o horário marcado se refere ao instante em que o conteúdo foi publicado. Não é permitido conter mais que um elemento < time > com o atributo pubdate declarado. Entretanto, diferentes < article > podem conter o elemento < time > com datas distintas de publicação (usando o atributo

152 pubdate). O atributo é booleano (não aceita nenhum valor, apenas é booleano, opcional). Time.html Output Esse é o novo elemento para formulários e serve de "estrutura" para resultados de cálculos. Ele possui os seguintes atributos: for: Associa o output aos controles de formulário em que está referenciado. Usa-se o ID desses controles, pode ser mais de um, separados por vírgula. Exemplo: for="a b". form: Associa o elemento de forma única a um formulário. name: Define uma identificação "name" para o elemento. Output.html

153 No Opera: De início, a impressão que fica é que esse elemento é um tanto inútil e que o resultado poderia ser impresso num span, por exemplo. Mas, é que desta forma, economizam-se algumas linhas de código que seriam usadas com o JavaScript para exibir o resultado em um span. Cabe ao desenvolvedor decidir qual estratégia usar. Obs: O input de type igual a "range" será detalhado mais adiante. Novos atributos do HTML5 O HTML5 introduziu novos atributos em diferentes elementos. Veja, em detalhes e exemplos, cada um deles.

154 Async - Carregamento assíncrono de arquivos JavaScript. Esse atributo é usado no elemento < script >. Sim, aquele mesmo que se usa para definir scripts javascript. O atributo async faz com que o script seja executado de modo assíncrono, ou seja: a renderização da página não é "travada" durante os milessegundos em que o script é carregado. Os scripts que possuem esse atributo são colocados em fila (e são baixados paralelamente) e, assim que carregados, ficam disponíveis para o navegador. Por definição, no modelo síncrono as chamadas e respostas são sequenciais, ou seja: é necessário receber a resposta da requisição anterior antes de passar para a próxima requisição. Um processamento síncrono espera o término de uma tarefa para iniciar a próxima, enquanto o assíncrono permite que outras tarefas sejam executadas enquanto a primeira ainda está sendo processada. Compatibilidade atual: Sem o atributo async, primeiro o JS é carregado e o parser dom é "pausado": Async.html O JavaScript é carregado assincronamente sem que o DOM seja interrompido (algo como "multitarefa"):

155 Veja que o arquivo JS do jquery ainda está sendo carregado e o parser DOM já renderizou o conteúdo do documento. Isso é feito paralelamente ao carregamento do arquivo JavaScript. Nos browsers mais antigos que não o suportam, ele não causa nenhum problema e o script é carregado no modelo convencional. Vale ressaltar que o atributo type para o < script > é opcional. Alguns desenvolvedores nem o usam mais; já outros, por hábito, sempre o utilizam. Usá-lo não vai atrapalhar - e nem melhorar - o desempenho do site: a escolha é sua. Se você levar em conta o que prega ohtml5: "Simplificar e tornar minimalista o código", a melhor opção na teoria seria não usar o atributo type="text/javascript". reversed Define uma contagem descendente para o elemento de lista ordenada < ol >. É um atributo booleano. Reserved.html Esse exemplo deverá resultar em uma lista ordenada de forma crescente e outra decrescente (reversed).

156 Sandbox É um novo atributo introduzido no HTML5 para a segurança no uso de Frames. Frames são geralmente usados para colocar conteúdos de terceiros na página e podem, de alguma maneira, executar ações inesperadas. A ideia do sandbox é proteger a página onde um iframe for adicionado, limitando o que ele pode ou não fazer. Operações que podem ser evitadas com o uso do atributo: Acesso ao DOM da página-pai (tecnicamente falando porque o iframe é relegado a uma origem "diferente" da origem da página principal). Executar scripts. Inserir os próprios forms, ou manipular forms via script. Ler ou escrever cookies, dados locais ou base de dados SQL locais. Desabilitar Pop-ups e Plugins. Os valores possíveis desse atributo são: allow-same-origin - Permite tratar o conteúdo do iframe como sendo da mesma origem do documento que o contém. Em outras palavras, scripts do iframe podem acessar o DOM da "window"-pai.

157 allow-top-navigation - Permite "navegação superior". Por exemplo, o iframe ter privilégio para navegar no documentopai, o documento que o contém. allow-forms - Permite a submissão de formulários. allow-scripts - Permite a execução de scripts. "" - Quando declarado como booleano (sandbox) todas as restrições acima são aplicadas. Antes de testar o exemplo, uma observação: O Google Chrome implementa o bloqueio de algumas permissões ao executar arquivos localmente, por motivos de segurança. Por isso, por ser local, o exemplo que será criado em seguida não funcionará no Chrome. Entretanto, há como passar um parâmetro na execução para liberar tais permissões. Faça o seguinte: Procure o atalho do Chrome e acesse suas propriedades:

158 Ao abrir, acrescente a seguinte linha do lado do EXE de execução do Chrome: --allow-file-access-from-files

159 Clique em OK. Feche o Chrome e abra-o novamente. Sandbox.html

160 Observe que o atributo booleano "sandbox" foi definido no iframe. Isso faz com que todas as operações citadas anteriormente sejam bloqueadas pelo navegador. Acao.html Primeiro teste: Clique no link "navegar". Nada aconteceu, não é? Agora, clique no link "Clique aqui para alterar":

161 O título "AprendaMais - Frames" do documento-pai do frame deveria ter sido alterado, mas não foi. Essas ações não aconteceram devido às restrições aplicadas pelo sandbox. Agora, altere o sandbox para: allow-top-navigation allow-scripts: Atualize a página e clique novamente em navegar:

162 O site AprendaMais será carregado no documento, pois foram permitidas as seguintes ações:

163 Execução de Script. "top navigation". Entretanto, essas permissões não são suficientes para alterar o texto do título no documento-pai quando for clicado em "Clique aqui para alterar". Para que isso seja possível, é preciso acrescentar: allow-same-origin Atualize a página e teste. Clique no link para alterar: Ação executada, pois tais privilégios foram concedidos ao iframe. Seamless Atributo para uso com o elemento < iframe >. Ele faz com que o iframe seja inserido no mesmo contexto do documento que o contém. Em outras palavras, links do frame abrem no mesmo contexto dos links do documento que o contém. Regras de estilo CSS também são aplicadas para o iframe, bem como todos os comportamentos-padrão do documento. seamless.html acao2.html Nenhum navegador atual tem suporte a esse atributo. Então, emule como ficaria o exemplo:

164 Srcdoc Define uma marcação HTML para o elemento< iframe >. Nenhum navegador atual tem suporte a esse atributo. Scoped Atributo para usar junto com o elemento < style >. É um atributo booleano e, quando usado, o estilo é aplicado apenas dentro daquele escopo. Scoped.html Nenhum navegador atual tem suporte a esse atributo. Entretanto, é possível emular como ficaria o resultado do exemplo em execução:

165 Ou seja, apenas o elemento do meio teve um CSS diferente aplicado em seu escopo. Todos os outros usaram o CSS definido no < head >do documento. Vale ressaltar que no HTML5, o elemento < style >pode ser definido dentro do < body >. Sizes Atributo para usar junto com o elemento < link > - mais especificamente o < link > de rel igual a "icon", que define o ícone do site na barra de navegação do navegador: Definindo e manipulando formulários Um dos grandes problemas do HTML4 era os campos "pobres" de formulários, sem validação. Algo custoso, pois obrigava a fazer unicamente com JavaScript. O HTML5, levando em conta que praticamente todas as páginas WEB possuem algum tipo de formulário, introduziu regras de validação diretamente pelos navegadores com a criação de novos atributos. Principais novidades:

166 Antes, os elementos de formulário eram obrigados a estar inseridos no formulário. Agora, no HTML5, elementos tais como < button >, < fieldset >, < input >, < label >, < select >, < textarea >etc., podem estar fora do formulário, desde que conectados a ele através do atributo form(explicado adiante). Agora há novos tipos de campo, além dos comuns: text, hidden, checkbox, radio, upload, etc. E, principalmente, validação do formulário sem a necessidade de usar JavaScript. Novos atributos de formulário Vários novos atributos de formulários e seus elementos foram implementados. Veja-os na prática. Required Esse atributo booleano marca o campo como sendo de preenchimento obrigatório. Elementos que o admitem: Input Textarea Select Required.html

167 Se o Select não for preenchido: Observação: Cabe ao navegador definir o estilo da mensagem de alerta. Autofocos Esse atributo booleano define para qual elemento irá o foco quando a página for carregada. Elementos que admitem o uso do atributo:

168 button input keygen select textarea autofocus.html Autocomplete A maioria dos navegadores oferece a função de "sugerir" opções de preenchimento para campos do tipo text. Entretanto, é possível desabilitá-la ou habilitá-la com o uso do atributo. O autocomplete é do navegador que, se configurado, grava os valores digitados por você nos campos inputtext. Algo como: Elementos que admitem o atributo: input form

169 autocomplete.html Quando aplicado ao elemento < form >, todos os inputs text filhos desse form, que não tiverem o "autocomplete" definido, o herdam. dirname Esse atributo define o dado adicional a ser enviado junto com os outros campos do formulário, especificando a direção do texto (ltr ou rtl). Dirname.html A string de dados enviada para processamento no servidor será parecida com: Ao definir o atributo dirname, o valor atribuído a ele deve ser o nome do novo parâmetro a ser enviado com a direção do texto do elemento.

170 Por exemplo, acrescente o atributo desta forma: dirname="nome.dir" No elemento input "nome": Emulando novamente o envio do formulário, um novo parâmetro é adicionado à string de dados: nome.dir=ltr Ficando assim: nome=aprendamais&comentario=html5& enviar=enviar&nome.dir=ltr form É um atributo muito interessante. Ele associa o elemento em questão a um formulário, não importando se o elemento está fora dele. No modelo convencional do HTML4, um controle de formulário (input, textarea etc.) era associado apenas ao formulário em que estivesse inserido. Isso mudou nohtml5. O valor desse atributo deve ser o id do formulário em questão. Elementos que admitem o atributo: button fieldset input keygen label meter object output progress select textarea

171 Um exemplo prático: Obs.: Será usado um pouco de PHP para esclarecer melhor. Se você não conhece PHP, não se preocupe, tudo será ilustrado. Form.html Agora, a página PHP que receberá os dados submetidos pelo formulário: receber.php Ao executar o exemplo em um servidor web configurado para o PHP: O resultado será este:

172 Observe que foram recebidos apenas os dados do formulário "formaprenda". Os campos "comentario" e "curso" não foram enviados, pois não possuem relação com o formulário postado. Agora, faça a seguinte alteração, acrescentando o atributo,form="formaprenda", no campo comentário: Também acrescente no campo "curso": Agora eles possuem relação direta com o formulário "< em > formaprenda < /em >" mesmo não estando dentro dele.

173 Resultado Observe que agora os campos "curso" e "comentario" também foram postados. formaction e formenctype O atributo formaction tem o mesmo efeito do atributo "action" do formulário. Ou seja, sua função é definir em qual URL o formulário será postado. Elementos que admitem o atributo: button (type=submit)

174 input (type=submit) Volte ao exemplo anterior. É possível remover o atributo "action" do form e definir o atributo "formaction" no input submit: Formenctype Esse atributo tem a mesma função do atributo enctype do formulário. Sua função é definir o tipo de documento que está sendo enviado. Elementos que admitem o atributo: button (type=submit) input (type=submit) Por exemplo, um formulário de upload convencional: O atributo enctype do form pode ser substituído pelo formenctype nos input submit:

175 novalidate, formnovalidate O atributo novalidate garante que o formulário não seja validado no momento de sua submissão. Como a validação nativa de formulários com o HTML5 ainda não foi explicada, o exemplo prático desse atributo será demonstrado posteriormente. O formnovalidate possui a mesma função do novalidate, com a diferença de que é usado nos elementos input e button. Novalidate.html Ao clicar em "Enviar formulário" ele será submetido sem que o navegador valide as regras aplicadas nos campos, como no caso acima em que os campos possuem o atributo "required". formtarget e formmethod O atributo formtarget possui a mesma função do atributo target do formulário, que especifica se a submissão deve ser feita na janela atual ou em nova janela, por exemplo. Esse atributo pode ser usado nos elementos input e button. O atributo formmethod possui a mesma função do atributo method do formulário, que especifica o método de submissão HTTP usado no envio do formulário, que pode ser POST ou GET. Esse atributo pode ser usado nos elementos input e button. Placeholder Esse atributo define uma "dica" sobre o campo. Ao clicar e digitar, ela desaparece. No HTML4, isso era comumente feito com o uso de JavaScript. Placeholder.html

176 file multiple Novo atributo do HTML5 usado junto com o tipo de campo "file" para a seleção de múltiplos arquivos em sistema de upload, por exemplo. Faça o teste a seguir: Obs.: Esse exemplo será executado em um servidor PHP para que seja possível receber, de fato, os arquivos upados e suas informações. Se você não souber PHP, ainda assim poderá testar o exemplo em sua máquina. Apenas o Upload não funcionará. File_multiple.html Para estilizar melhor, acrescente o CSS:

177 Veja que foram selecionados 2 arquivos: Agora, para incrementar ainda mais o exemplo, use JavaScript para ler o nome, tipo e tamanho dos arquivos selecionados e para imprimi-los na tela, para que o upload fique mais intuitivo. Para isso, acrescente o seguinte JavaScript no documento: As informações dos arquivos foram lidas. Observe que no JavaScript há uma linha assim: Para abrir as "ferramentas do desenvolvedor" do Google Chrome:

178 Através dela se consegue depurar e imprimir o resultado da variável "arquivos" que é:

179 Pode removê-la, pois é apenas para teste junto às ferramentas de desenvolvedor do Google Chrome. Para tornar o exemplo ainda mais interessante, crie uma página PHP (se você conhece PHP reproduza o exemplo; caso contrário, apenas veja o resultado): upload.php Volte novamente ao exemplo para upar de fato os arquivos:

180 Arquivos recebidos com sucesso! O exemplo poderia ser mais incrementado ainda para mostrar o progresso do upload, usando a FileAPI dohtml5. Porém, não faz parte do conteúdo deste curso. Disabled Não é um atributo novo do HTML5, mas vale a pena relembrá-lo. Ele desativa um componente de formulário. Se usado em um fieldset, desativa todos os componentes-filhos desse fieldset.

181 Disabled.html Esse resultado pode ser incrementado com o uso das pseudoclasses CSS ": disabled" e ":enabled". Acrescente o seguinte CSS no exemplo acima:

182 Readonly Atributo parecido com o disabled, apenas bloqueia a ação de alterar o conteúdo do campo, sem alterar o estilo. Readonly.html

183 Novos tipos de campos O HTML5 introduziu vários novos tipos de campo para o elemento input, que enriquecem bastante o trabalho com formulários. No HTML4 estavam disponíveis apenas os tipos: button checkbox file hidden image password radio reset submit text O HTML5 implementou 13 novos tipos: search url tel datetime date month week time datetime-local number range color Esse tipo de campo informa ao navegador que o dado deve ser um . Caso contrário, o formulário não pode ser submetido e, para isso, também é necessário que o atributo required esteja presente. .html

184 Usando as pseudoclasses CSS3 :valid e:invalid é possível aplicar um estilo adicional ao elemento. Por exemplo, acrescente as seguintes CSS no exemplo acima: Se passou na validação: Observe que é uma validação superficial. Por isso é recomendável: Além da validação no lado do cliente (javascript) valide sempre os dados no lado do servidor (com a linguagem server-side).

185 Suporte (compatibilidade) atual junto aos navegadores: url Esse tipo de campo informa ao navegador que o dado deve ser uma url. Caso contrário, o formulário não pode ser submetido e, para isso, também é necessário que o atributo required esteja presente. url.html Suporte (compatibilidade) atual junto aos navegadores: search Define uma interface de campo para pesquisa. Alguns navegadores exibem um pequeno botão do lado direito para apagar a pesquisa, como é comum na maioria dos campos de pesquisa personalizados na Web.

186 É possível, via CSS3, selecionar o tipo de campo e aplicar um estilo particular a ele. Por exemplo: Suporte (compatibilidade) atual junto aos navegadores: tel e o atributo pattern É usado para números de telefone, mas não há regra particular que o valide. Isso porque não existe um padrão de números de telefone ao redor do mundo, o que torna impossível especificar um formato como padrão universal. Entretanto, existe um novo atributo no HTML bem interessante, chamado "pattern". Com ele é possível definir regras de validações usando expressões regulares. Regular expressions, ou REGEX, são expressões especificadas pelo programador que conterão os caracteres válidos ou não para determinado campo. Uma expressão regular é o método formal de especificar um padrão de texto. É uma composição de símbolos e caracteres com funções especiais que, agrupados entre si e com caracteres literais, formam uma sequência, uma expressão.

187 Essa expressão é interpretada como regra, e indicará sucesso se uma entrada de dados qualquer casar com essa regra, ou seja: se obedecer exatamente todas as suas condições. Expressões regulares são usadas em quase todas as linguagens de programação. Então, em um campo tel, pode ser feito, por exemplo: Tel_pattern.html Observe que foi definida uma expressão regular para validar o número de telefone: Formatos aceitos pela expressão regular de telefone: (99) (99) Suporte (compatibilidade) atual junto aos navegadores:

188 Expressões Regulares Expressões Regulares é um assunto extenso e que exige muito estudo. O conteúdo é suficiente para um curso completo, dada a quantidade e complexidade das informações. As Expressões Regulares não serão detalhadas neste curso. Entretanto, para que você possa ter noção sobre como as expressões regulares são formadas, serão apresentados os conceitos iniciais e alguns exemplos práticos. Formando expressões: Nota: O símbolo ^ só é tido como exceção de sequência se ele vier exatamente no início da sequência especificada. Se ele vier no início da expressão de regex (fora dos parênteses ou colchetes de expressões), será interpretado como "início de linha" e não como termo de negação. E se vier no meio da sequência será interpretado como parte dela. Data: expressoes.html

189 Hora: Cep (correios):

190 Por fim, e para aguçar sua vontade em aprender expressões regulares, a explicação de uma que valida o endereço de e- mail (não é preciso trabalhar com ela no HTML5, pois já existe o tipo de campo " "): Expressões_ .html Obs: Você pode usar o atributo placeholder para indicar o formato desejado do campo, para os usuários. Explicando o exemplo: ^([0-9,a-z,A-Z]+) - No início da linha, pelo menos uma ou mais ocorrências dos caracteres de0-9, ou a-z, ou A-Z ([.,_,-]([0-9,a-z,A-Z]+))* - Seguidos ou não (zero ou mais ocorrências) da expressão: ponto ou underline ou hífen seguidos de caracteres de 0-9,a-z ou A-Z que apareçam pelo menos uma vez ou mais. [@] - Seguido de arroba. ([0-9,a-z,A-Z]+) - Seguidos de pelo menos um ou mais caracteres de 0-9, ou a-z, ou A-Z. ([.,_,-]([0-9,a-z,A-Z]+))* - Seguidos ou não (zero ou mais ocorrências) da expressão: ponto ou underline ou hífen seguidos de caracteres de 0-9,a-z ou A-Z que apareçam pelo menos uma vez ou mais. [.] - Seguidos de ponto. ([0-9,a-z,A-Z]){2,3} - Seguidos de 2 a 3ocorrências de caracteres a-z ou A-Z.

191 ([a-z,a-z])?$ - Seguidos de uma ou nenhuma ocorrência de caracteres de a-z ou A-Z, no final da linha. number Esse atributo fornece uma interface no input para inserção de número. Ainda é possível usar os atributos max e min para definir um limite. Por exemplo: Number.html Também existe o atributo chamado step, que permite definir de quanto em quanto o número deve ser incrementado. Por exemplo:

192 Seu uso é apropriado em casos onde o dado retrata uma quantidade, pelas opções de incremento e decremento que o componente dispõe. Não é apropriado usá-lo (mas nada impede que você o faça), por exemplo, no campo "número da casa", pois o usuário não ficará alternando os valores - ele apenas digitará o número e pronto. Nesse caso, você pode usar o tipo "text" e definir um pattern para garantir que o usuário digite apenas números e não letras ou qualquer outro tipo de caractere especial. Suporte (compatibilidade) atual junto aos navegadores: range Esse tipo renderiza nos navegadores um "slider" e, tal como o tipo "number", aceita os atributos min, max e step. Range.html

193 Suporte (compatibilidade) atual junto aos navegadores: Color Esse tipo fornece uma interface para o usuário selecionar a cor. Color.html Em execução no Opera:

194 Suporte (compatibilidade) atual junto aos navegadores: Atributos de data e hora Obs: Para verificar a atual compatibilidade, basta acessar usando esses navegadores. Há novos atributos de data e hora. São eles: date,datetime, datetime-local, month, time, e week. Essas entradas de data e hora aceitam dados formatados, de acordo com o padrão ISO 8601 standard. O que cada um representa: date - Representa uma data no formato ano-mês-dia. Por exemplo: month - Representa o ano e mês. Por exemplo: week - Representa o ano e uma semana desse ano. Por exemplo, o ano possui 52 semanas, então 2011-W03

195 (representa a terceira s emana de 2011) e 2011-W47 (representa a quadragésima sétima semana do ano de 2011). time - Representa determinada hora do dia, usando o formato 24-horas. Por exemplo: 21:35. datetime - Representa o controle (date picker) para ajustar determinada data e hora no formato UTC (Tempo Universal Coordenado). Serão apresentados exemplos a seguir. datetime-local - Representa o controle (igual ao datetime) de determinada data e hora local. A representação da data e hora fica a cargo do navegador, em formato que considere o local e o usuário. Dentre todos eles, o mais usado é o "date", que implementa o controle de calendário. Por exemplo: Atributo_date.html Em execução no Opera:

196 Obs: Atualmente, apenas o Opera tem suporte aos controles de "date picker". Agora, um exemplo completo com todas as opções de data e hora: Execute o exemplo no navegador Opera: O atributo step é permitido em todos esses tipos de campos. Por exemplo: Com o step=4 só será possível selecionar um mês no intervalo de 4 em 4:

197 Para os tipos de campo "time" e "datetime" ou "datetimelocal" o atributo step pode ser representado em segundos. Por exemplo: Incrementa a hora num intervalo de 5 em 5minutos:

198 Suporte (compatibilidade) atual junto aos navegadores: Para os navegadores sem suporte, a alternativa para o "date" seria usar o jquery UI: Mas deve-se analisar: até que ponto é bom usar ojquery UI (que não é tão pequeno em tamanho) apenas para ter um calendário? Talvez não seja muito vantajoso, pois deixará o projeto pesado. Speech input

199 O Google Chrome implementa o tipo de campo de reconhecimento de fala. Basta definir o campo, ligar o microfone no computador e falar algo. Maiores detalhes: Speech_input.html Clique com o botão direito do mouse na área do navegador, escolha Inspecionar elemento e selecione a guia Console. Veja o "rascunho" da API: htmlspeech/2010/10/google-api-draft.html. Desenvolvendo formulários completos Agora que já conheceu todos os novos atributos e elementos de formulário, poderá começar a desenvolver os próprios formulários. Primeiro, um exemplo que incorpora vários tipos de formulários: Em execução no Opera: Formulario1.html

200

201 Formulario2.html Como você pode ver, as possibilidades com HTML5 e CSS3 são inúmeras. Personalizando as mensagens padrões de validação

202 É possível acrescentar mensagem adicional às mensagens de erro de validação. Para isso, basta definir o atributo title com a mensagem. Por exemplo: Perso_mensagem.html Observe o atributo title: Validando os dados em Browsers sem suporte ao HTML5 Uma alternativa para validar os dados dos formulários montados com HTML5, para os navegadores que não dispõem de suporte para tal validação, é usar a biblioteca Modernizr e o jquery. Essa é uma forma de garantir que o sistema de validação funcionará tanto nos novos Browsers quanto nos antigos. Mas isso tem um preço: Programar as validações em JavaScript e deixar o projeto um pouco maior, por causa dos Scripts a serem carregados. Validando_browser.html

203 O script está comentado passo a passo, de forma resumida: Ao submeter o formulário, foi usada a biblioteca Modernizr para verificar se o navegador tem suporte aos atributos "required" e "pattern". Se não possuem tal suporte, começam as validações que estão divididas em três etapas: Primeiro os campos com atributo "required", que estiverem em branco; depois, os campos do tipo " " que não tiverem e- mail válido; e, por fim, os campos que dispõem de expressão regular no atributo "pattern" são validados. Os navegadores atuais, que possuem o suporte nativo de validações HTML5, não entram nesse IF do Modernizr para as validações jquery. Execute o exemplo no Internet Explorer 8 (ou versão inferior):

204 No Google Chrome: No Google Chrome foi usado o "mecanismo"html5 de validação. Em suma, essa alternativa pode ser boa como medida paliativa para os usuários que usam Browsers antigos e até que troquem de navegador. O script de validação do exemplo foi colocado entre as tags < head > apenas para facilitar o entendimento das operações. Entretanto, em projeto real, recomenda-se que seja colocado em arquivo separado. Por exemplo,validacao.js, para separar e organizar melhor as camadas do site. Novos eventos para formulários Relação dos novos eventos de formulários implementados no HTML5 e quando são acionados: oncontextmenu - Quando o menu de contexto é acionado (clicar com o botão direito do mouse). onformchange - Quando há alguma alteração em um dos campos do formulário.

205 onforminput - Quando algum campo (qualquer um) do formulário recebe um valor. oninput- Quando o usuário entra com algum dado no campo. oninvalid - Quando o campo não passou pela validação. Onforminput.html Atualmente, apenas o Opera consegue esse tipo de implementação que, na verdade, é apenas forma de evitar o uso de JavaScript para uma tarefa simples. Oninvalid.html

206 Template HTML5 para maior compatibilidade HTML5 Boilerplate é um template HTML5para que você dê início aos seus projetos. Ele não possuiu não apenas o modelo de página HTML ideal, mas também uma série de arquivos essenciais para um projeto HTML5 mais compatível entre os Browsers. Alguns dos arquivos inclusos nesse template: CSS Reset - é um conjunto de declarações CSSque visam aplicar estilo aos elementos, padronizando-os em todos os navegadores. Os elementos HTML já vêm internamente com um CSS definido pelo navegador, e que difere de navegador para navegador. A função do CSS Reset é essa: padronizar ao máximo os pequenos detalhes. Arquivos JS importantes como: jquery, Modernizr e etc. Veja a explicação completa de todos os "fixes" que esse Template aplica para os Browsers mais antigos, ou com suporte parcial a alguma propriedade importante, no site oficial do Template: Basta baixar o template para implementar seu projeto a partir dele. Algumas questões importantes: Sou obrigado a usar esse template em meus projetos HTML5? Não. Mas se o projeto for grande e você tiver certeza que o público-alvo usará Browsers mais antigos, então usá-lo pode ser bem vantajoso. O que é importante usar em um projeto HTML5?CSS Reset e a biblioteca Modernizr. Use-os sempre! CSS Reset para padronizar melhor a forma com que os elementos são exibidos nos navegadores e a biblioteca Modernizr para fazer com que os novos elementos HTML5 sejam reconhecidos

207 por Browsers antigos e para verificar as funcionalidades HTML5/Apis. Exemplo de projeto minimalista, usando CSSReset e Modernizr: Projeto.html Copie a pasta html5-css-reset que se encontra em //arquivos-cursos/html5 para Sua Pasta. Em execução no Chrome: Em execução no Internet Explorer 6:

208 Se não fosse o CSS Reset, no Internet Explorer 6/7, ficaria assim:

209 E sem o Modernizr:

210 O Browser não consegue reconhecer os elementos para aplicar os estilos CSS. Conclusão: Nos projetos HTML5, dê sempre o pontapé inicial usando CSS Reset e a biblioteca Modernizr. Frameworks HTML5 Atualmente, os principais Frameworks HTML5 são: Bootstrap - Framework mantido pela equipe de desenvolvimento do Twitter. Foundation - Exemplo disponível no Bootstrap:

211 O objetivo desses Frameworks é prover um padrão de desenvolvimento, uma vez que já possuem diversos elementos estilizados e mais que isso, prover compatibilidade, pois trabalham bem as CSS reset. São bastante interessantes para se iniciar um novo projeto. Trabalhando com áudio no HTML5 O HTML5 dispõe de formas nativas de inserir conteúdos incorporados (aúdio e vídeo) sem usar deselegantes scripts, elementos < object > e < embed > ou plugins de terceiros (Flash, Media Player, QuickTime e etc.) para esse fim. Com os novos elementos de áudio e vídeo nativos, é possível não apenas fornecê-los aos usuários, mas manipulá-los com o uso de JavaScript e CSS. Codecs O codec é uma tecnologia usada para a compressão e descompressão de dados. Os alogorítimos dos Codecs de

212 aúdio de compressão visam codificar um aúdio digital para formato menor e sem perder a qualidade. Um aúdio codificado no Codec OGG precisa, para ser reproduzido, de um Player que tenha o algorítimo apropriado para descodificá-lo (OGG). Não há padrão sobre qual Codec de áudio usar nohtml5. Existem diferentes Codecs que podem ser usados e nem todos funcionam em todos os Browsers. Para ter um áudio realmente CrossBrowser funcionando em todos os navegadores, é preciso ter no mínimo 2 formatos de áudio em codecs distintos (será explicado a seguir). Conheça os Codecs usados no HTML5 e suas compatibilidades junto aos navegadores atuais: Sobre os formatos: aac - Codec de compressão que é considerado um "MP3" melhorado. mp3 - Formato patenteado de boa compressão, muito comum para músicas digitais. ogg - Formato de código aberto que usa praticamente o mesmo esquema de compressão domp3. wav - Formato proprietário para áudio que não utiliza compressão. Por isso o tamanho de seus arquivos é sempre grande. webm - Formato de código aberto do Google. É usado tanto para áudio quanto para vídeo.

213 Implementando áudio na página Áudio.html Copie os arquivos abaixo da pasta//arquivoscursos/html5/ para Sua Pasta. Em execução no Chrome: Em execução no Firefox:

214 Em execução no Opera: No Internet Explorer que não dispõe suporte para esse Codec: Cada navegador aplica uma "skin" diferente ao control de áudio. Você aprenderá a personalizá-la posteriormente. Implementando áudio de forma cross-browser Exatamente pelo fato de não haver consenso entre os navegadores, acerca de qual Codec usar, o elemento áudio aceita elementos < source > como filhos para que seja possível especificar mais de um formato de áudio, cobrindo assim todos os Browsers recentes. A forma de dispor um áudio cross-browser, que funcione em todos os navegadores atuais, é usando dois formatos: ogg mp3

215 Agora o Internet Explorer conseguiu reproduzir o áudio. Ele está usando o formatomp3, uma vez que não dispõe suporte ao formato OGG. Dentro do elemento áudio foi declarado um parágrafo assim: Esse parágrafo só é exibido em Browsers mais antigos, que não suportam o HTML4 e, respectivamente, o elemento < audio >. Por exemplo, ao visualizar esse exemplo no Internet Explorer 6: Explicando os atributos do elemento :

216 src - O caminho do arquivo de áudio. type - Informa ao navegador o tipo de mídia do arquivo (Mime Type), de tal forma que ele possa decidir qual arquivo de áudio usar antes de baixá-lo. media - Informa ao navegador o tipo de mídia CSS. Quando não definido, é usado o tipo "all" que quer dizer "para todos os tipos de dispositivos". Maiores informações em: mediaqueries/. Não é difícil definir qual tipo de mídia de arquivo usar. Veja algumas dicas em: wiki/video_type_parameters#browser_support Nesse Wiki da Whatwg encontra-se a relação dos mimes types e o suporte atual do Browsers para eles: Por exemplo, para o áudio OGG verifique na tabela omime type a ser usado: Por exemplo, ao usar o mime type "audio/ogg; codecs=bogus" no < source > o resultado será:

217 Esse não é o Mine Type correto, apesar de funcionar no Chrome. Portanto, volte para o "audio/ogg": É importante fazer sempre esse teste antes de definir um Mime Type, para evitar qualquer problema de reprodução posterior. Outra forma de obter informações sobre a mídia em questão é usar o "Media Player Classic", um clássico player de aúdio e vídeo para Windows. Por exemplo, ao acessar as propriedades do arquivo chrome_webm.webm: Se obterá como resultado importantes informações:

218 Para esse arquivo podem ser usados os seguintes mime types, listados naquele Wiki: audio/webm; codecs=vorbis audio/webm Atributos para manipulação de áudio Os atributos que o elemento admite são: src - Indica o caminho do arquivo de áudio. Formas de carregamento do áudio preload O atributo "preload" indica como deverá ocorrer o carregamento do áudio na página. Os valores possíveis são: none, metada, auto. none indica que o áudio e suas informações não devem ser baixadas enquanto o usuário não acessar os controles do elemento. metadata indica que apenas as informações como faixa, duração, controles e etc. devem ser baixadas, mas não o áudio. auto (que é o valor-padrão do atributo booleanopreload) define que o som será pré-carregado automaticamente assim que a página for acessada. Audio1.html Obs: Para testar e observar na prática esse exemplo, é necessário executá-lo a partir de um servidor web. Veja a demonstração. O áudio usado no exemplo é um WAV de tamanho igual a 8MB. Inicialmente, ao abrir o exemplo:

219 O áudio em si não foi baixado. Apenas suas informações foram requisitadas (cabeçalhos, formato e etc.). Agora, ao clicar em "Play" ele começa de fato a ser baixado para a máquina do usuário, progressivamente: Exemplo de preload none: Nenhuma requisição é feita ao áudio até que o usuário interaja com o controle (play). autoplay e loop Ativa a execução automática do áudio assim que a página é acessada. Em termos de usabilidade, executar um som

220 automaticamente não é boa prática, pois os usuários podem ficar irritados e nunca mais voltar ao site. Pense bem antes de usar esse atributo. O atributo loop faz com que o som entre num laço infinito de repetições. Muted Esse atributo booleano inicia o controle com o modo "mudo" ativado. Por exemplo: mediagroup e controls O atributo mediagroup aceita como valor qualquer string. É usado para unir vários arquivos de mídia para reprodução sincronizada (seja áudio, vídeo). Elementos de áudio e vídeo que possuem o mesmo valor de mediagroup ficam "interligados", podendo ser manipulados para reprodução através do uso de JavaScript, por exemplo. Já o atributo controls contém os controles do elemento de áudio. Sem ele a "skin" do player não seria renderizada. Faça o teste:

221 Observe que está sem nenhum controle, em branco. Na maioria das situações, o atributo controls é sempre utilizado. A grande utilidade em não usá-lo é para situações em que a intenção é recriar o player com HTML e CSS, sem usar o padrão dos Browsers, com novas imagens, botões de play, pause, controle de volume e etc. Index.html Player.css Player.js O exemplo é intuitivo e está bem comentado. Em execução:

222 Observações importantes: São métodos da API de áudio para carregar e reproduzir o áudio, respectivamente. Observe que também foi trabalhado com quatro importantes eventos da API de mídias: ended - Evento executado quando a reprodução do áudio acaba. play - Evento executado quando a reprodução do áudio se inicia. pause - Evento executado quando a reprodução do áudio é pausada. volumechange - Evento executado quando o volume do áudio é alterado.

223 bind - no exemplo está delegando ao elemento áudio o evento "onended". Plugins jquery para áudio e vídeo Existem alguns ótimos Plugins jquery que disponibilizam ótima interface para a geração de Modernos Players, usando a tecnologia do HTML5. São eles: Novos eventos para elementos de multimídia Além dos eventos mostrados acima, existem outros que podem ser usados tanto para áudio quanto para vídeo. Conheça os novos eventos para multimídia e quando são executados: onabort - É chamado quando o navegador está obtendo os dados do áudio/vídeo e a ação é abortada antes que sejam completamente baixados (carregados). oncanplay - Quando o elemento áudio/video já tem dados suficientes no buffer para começar a tocar. oncanplaythrough - Quando o elemento áudio/vídeo já tem dados suficientes no buffer para começar a tocar e, se a transferência de dados continuar no mesmo ritmo em que está ocorrendo, prevê-se que tocará até o final sem interrupções. ondurationchange - O elemento áudio/vídeo teve seu atributo duration modificado. Isso acontece, por exemplo, ao alterar a origem da mídia (src). onemptied - O elemento áudio/vídeo teve um erro de retorno vazio de dados da rede. O retorno vazio acontece

224 quando, por exemplo, tenta-se invocar o método play de um elemento que ainda não tem origem de mídia (src) definida. onended - Quando a reprodução do áudio/vídeo chegou ao fim. onerror - Quando ocorre um erro com o elemento que está sendo carregado. onloadeddata - Os dados começaram a ser carregados e a posição atual de playback já pode ser renderizada. onloadedmetadata - Os metadados foram carregados e já se sabe as dimensões, duração e formato do áudio/vídeo onloadstart - Os dados começaram a ser carregados. onpause - Quando a reprodução do áudio/vídeo foi pausada. onplay - Quando a reprodução do áudio/vídeo foi iniciada; ou seja, quando o usuário clicou em Play ou quando a reprodução começou por causa do atributo autoplay. onplaying - O áudio/vídeo está tocando. onprogress - O navegador está buscando os dados do áudio/vídeo. onratechange - Quando a taxa de reprodução muda. onreadystatechange - Quando os estados da mídia mudam (carregando, completo e etc.). onseeked - Quando a busca pelos dados do aúdio/vídeo termina. onseeking - Quando a busca pelos dados do áudio/vídeo está em execução. onstalled - Quando, por algum motivo, o script é finalizado porque o navegador não conseguiu buscar os dados do áudio/vídeo.

225 onsuspend - Quando a busca pelos dados do áudio/vídeo é interrompida antes de ser concluída. ontimeupdate - Quando a posição de reprodução do áudio/vídeo muda. Por exemplo, quando o usuário avança manualmente até o fim do áudio/vídeo. onvolumechange - Quando o usuário altera o volume ou o define como mudo. onwaiting - Quando o áudio/vídeo é pausado automaticamente para carregar o resto do conteúdo (buffer de dados). Acompanhe este exemplo, desta vez usando apenas JavaScript puro (sem jquery): Index1.html Agora, acrescente no exemplo o Script: No exemplo foi usado o método delegador de eventos do JavaScript addeventlistener( ), que não funciona crossbrowser em todos os Browsers - versões do Internet Explorer anteriores à 9não o suportam. Por isso, no exemplo

226 de "personalizando um player de áudio" foi usado jquery, pois seus métodos são cross-browsers e funcionam desde o Internet Explorer 6. Atributos dos elementos de multimídia Os principais atributos são: playbackrate - A taxa de reprodução é padrão 1.0(valor de ponto flutuante). Entretanto, ela pode ser alterada se a intenção for pelo "efeito" de "slow-motion" ou "slow-rewind". defaultplaybackrate - Retorna a taxa de reprodução padrão, que é igual a 1. src - Retorna a url que aponta para o áudio/vídeo. currentsrc - (apenas leitura) Retorna a url atual do vídeo, pois em tempo de execução ela pode ser alterada. readystate - (apenas leitura) Retorna um valor-número entre 0-4, que representa o estado de leitura. 0 representa que o navegador nada capturou sobre o áudio/vídeo. 1 indica que os metadados do áudio/vídeo já foram lidos. 2 indica que o navegador já possui em buffer dados parciais para a reprodução inicial da mídia. 3 indica que o navegador já possui dados suficientes para reproduzir boa parte da mídia, bem como voltar ou avançar sua posição. Por fim, 4 indica que o vídeo está totalmente pronto para ser reproduzido e que nada interferirá na reprodução, pois já está 100% carregado. duration - (apenas leitura) O tempo de duração do áudio/vídeo em segundos. buffered - (apenas leitura) Retorna os intervalos de tempo do vídeo que estão disponíveis em buffer para o navegador executar. videowidth e videoheight - (apenas leitura) São especificamente para vídeos. Eles retornam a altura e largura

227 dos vídeos, suas reais dimensões e não as dimensões CSS ou do player. paused - (apenas leitura) Atributo booleano que indica se o vídeo está pausado. ended - (apenas leitura) Atributo booleano, retorna TRUE se a reprodução foi finalizada. currenttime - Retorna a posição atual da reprodução em segundos. Também é possível definir um valor para pular no tempo de reprodução, por exemplo: "audio.currenttime = 15" ao clicar em Play o áudio iniciará a partir do segundo 15. autoplay - Retorna TRUE se o autoplay está ativo; ou FALSE se estiver desativado. Os atributos marcados como "apenas leitura" não podem ter seus valores alterados, são apenas para serem lidos. Exemplo com currenttime e playbackrate Playbackrate.html Agora, o JavaScript dele: Observações importantes: No elemento < audio >, o preload deve ser definido com o valor "metadata":

228 Se definir como "none", ao ser carregado, as informações de metadado do áudio não estarão disponíveis: E nem foi apontado para os 15 segundos inicias. Com relação ao "playbackrate", a taxa de reprodução foi alterada e o vídeo será reproduzido bem rápido. Ao pausar o vídeo, é informado em qual segundo foi parado: Ferramentas para codificação de áudios e vídeos Para conversão e edição de áudio, um dos melhores é o Audacity:

229 Conheça as opções de exportação (destaque para o formato OGG): Para usuários MAC: Também para usuários MAC ou Windows, um dos melhores Softwares para conversão de áudio/vídeo paraweb e dispositivos móveis, com opção para diversos formatos, é: E, por último, uma alternativa muito interessante é a instalação da extensão Firefogg para o Firefox, que converte vídeos/áudio para os formatos OGG e Webm, respectivamente: Baixe este vídeo do Youtube no formato MP4e configure para convertê-lo

230 para WebM: hquxxobjwsg Para usar a extensão, abra o Mozila Firefox, entre no site: e clique na opção Make web video. Depois em Select File.

231 Selecione o arquivo Signing in to Chrome - YouTube.flv, que se encontra na pasta \\arquivos-cursos\html5\ e clique em Abrir.

232 Clique em Encode e depois em Salvar. Resultado

233 Arquivo em FLV que foi baixado e o arquivo webm após a conversão. Outras ferramentas: Miro VideoConverter: WebM Tools: OggConvert: Trabalhando com vídeos no HTML5 A sintaxe para inserir vídeos é tão simples quanto a de áudio.

234 Conheça os Codecs suportados pelos navegadores: H.264, Apple, Microsoft e Google pagaram uma taxa de licenciamento para usar o Codec nativamente em seus navegadores, diferentemente da Mozilla (Firefox) e Opera que preferiram adotar apenas os Codecs gratuitos. Como resolver o problema de formatos? Se você deseja que seu vídeo rode em todos os navegadores, a recomendação é dispor dois formatos do mesmo vídeo: WEBM MP4 Por exemplo: Para o exemplo copie os arquivosgoogle_video.mp4 e google_video.webm da pasta \\arquivos-cursos\html5\ para Sua pasta. Vídeos.html

235 Atributos usados em < audio > que podem ser usados no elemento < video >: loop controls preload muted autoplay src < video > usa as mesmas propriedades e eventos detalhados no tópico "atributos dos elementos multimídia". Uma boa página para visualizar tais métodos e propriedades: /mediaevents.html Dimensões do vídeo Para definir a dimensão do vídeo, use os atributos width e height. Por exemplo: Vídeo.html

236 Definir a dimensão do vídeo não tem a ver com a resolução. Aumentar ou diminuir demasiadamente o vídeo compromete a qualidade quando estiver em execução. Definindo a imagem de fundo para o vídeo É definido no atributo poster a imagem que se deseja exibir como fundo do vídeo, antes de ser executado. Video2.html

237 Definindo legendas SRT para o vídeo O elemento < track > destina-se a definir trilhas externas para os elementos de vídeo e áudio. Seus atributos são: kind - Define o tipo da trilha. Valores possíveis: subtitles (subtítulos), captions (legendas), descriptions (descrições), chapters (capítulos) e metadata (metadados). src - Endereço do arquivo de texto. A especificação da W3C recomenda o formato websrt com a extensão.srt. charset Charset do arquivo de texto, por exemplo:utf-8. srclang - Língua usada no arquivo de texto, por exemplo: en-us, pt-br. label - A legenda da língua, por exemplo: Inglês / Português (Brasileiro). Legendas.html Atualmente nenhum navegador suporta esse recurso. Entretanto, é possível emulá-lo usando este script que lê a

238 legenda SRT e a exibe de acordo com o timing atual do vídeo: /jquery.videosub.js Agora, crie o arquivo de legenda: en-us.srt Execute o exemplo no Google Chrome Canary, pois a permissão de leitura de arquivos locais foi ativada: No Firefox ou em qualquer outro navegador, o exemplo não funcionará localmente pelo fato de a legenda.srt não ser lida por motivo de segurança. Só funcionará se estiver rodando em servidor localhost ou web.

239 Em execução no Google Chrome Canary: O Sofware usado para a criação da legenda foi o "Subtitle Workshop", que pode ser baixado neste link: /download.php?lang=&id=sw, ou utilizar uma cópia já baixada em \\arquivos-cursos\html5\.

240 E salvar no formato SubRip (.srt): HTML5 Selectors API Level 1 Com a selector API podem ser usados os seletores CSS para selecionar elementos DOM. Se você conhece jquery, não terá dificuldades para entendê-la. A Selector API Level 1 possui dois métodos:

241 queryselector( ) queryselectorall( ) As duas recebem como argumento a string de um seletor CSS. A queryselector retorna o primeiro elemento que satisfaz o seletor, ou null caso não haja nenhum. A queryselectorall retorna a lista de elementos que satisfazem o seletor. Informações sobre compatibilidade: /#search=queryselectorall Selector_API.html Primeiramente foi usado o queryselector para selecionar os elementos < li > de classe igual a "destaque". Logo abaixo, foi usado o "console.log()" para imprimir o resultado no console das "ferramentas do desenvolvedor" do Chrome ou Firebug do Firefox.

242 Apenas um elemento foi retornado, ou seja: o primeiro elemento < li > de classe igual a "destaque". Para maiores informações DOM sobre o elemento, basta apertar a tecla F5: Agora, usando o método queryselectorall( ), altere o script para:

243 Retornou todos os elementos < li > de classe igual a "destaque". Selector_API_exemplo2.html Ao clicar no botão "Selecionar Elementos":

244 Veja que as classes dos elementos foram alteradas:

245 Observação Sim, você também pode selecionar "ids", que são identificadas pelo caractere "#"(sustenido). Selector_API_exemplo3.html

246 Seletores CSS3 também podem ser utilizados, por exemplo: Seleciona todos os elementos que tenham o atributo "href" igual a "pagina.php". Outro exemplo Neste caso, seleciona o último elemento:

247 classlist API A classlist são métodos para trabalhar com CSS junto aos elementos. Ela dispõem dos seguintes métodos: add( ) - Adiciona uma classe CSS ao elemento. remove( ) - Remove uma classe CSS do elemento. toggle( ) - Alterna entre duas classes CSS. contains( ) - Retorna TRUE se a classe especificada está declarada no elemento. Atual compatibilidade: Essas funcionalidades são comuns em Frameworks como o jquery. É bom que você saiba que estão começando a implementá-las nativamente, a caminho de estabelecer um padrão. Classlist_API.html

248 Clique mais vezes no botão e verá a funcionalidade do toggle( ) alterando a classe do "aprenda 2". A implementação é bem simples. O segredo é acessar a classlist: A classlist deve ser escrita dessa forma. Caso contrário, o Browser não a reconhecerá. Microdata O HTML5 implementa o modelo chamado "microdata", que é extensão de microformats. Os microdados atribuem um significado adicional à marcação HTML. O que são os Microformats? Micro + Format = Pequenos Formatos de dados (informação).

249 Microformats nada mais são que conjuntos de padrões para formatar conteúdos comuns em páginas web e aplicações de diversos tipos. A função dessas especificações é enriquecer a informação inserida em páginas web com metainformação. A função das metatags é fornecer informações para "além" do que é visto em primeiro momento, ou seja: o próprio conteúdo. Microformats se refere a descrever trechos de conteúdos específicos de um site como datas de eventos, informações de contato, descrição de links etc., coisas que estão além do escopo das conhecidas metatags. Ou seja, tratando Microformats válidos no código dohtml é possível enriquecer a maneira com a qual se lida com a informação e a maneira pela qual as máquinas armazenam, indexam, organizam e relacionam a metainformação. A função dessas especificações é fornecer o máximo de metainformação sobre o conteúdo que você insere, ou seja: descrevem os próprios dados. Um exemplo prático: você provavelmente usa o celular para armazenar os telefones dos seus amigos, certo? Ou usa o catálogo de endereços do Outlook/ Thunderbird etc. Pronto, aí o microformat se encaixa perfeitamente. Se você imaginar que o programa desenvolvido para gerenciar os contatos do aparelho celular grava os dados de alguma forma estruturada, poderá visualizar um microformat. A forma que o contato é estruturado no celular é exatamente a mesma que o programa de contatos do computador usa, e também a do PDA. Pronto, você pode ter o mesmo contato lido por três aplicações diferentes, sem problema. Imagine que o site de sua empresa possui uma seção que lista toda a equipe, e que essa lista foi estruturada com o mesmo microformat demonstrado acima. Isso certamente

250 permitiria ao visitante pegar a lista e colocá-la facilmente no celular. Qual a utilidade dos Microformats? Imagine a quantidade de informação que existe hoje circulando na web. Pense nos e mails, nos comentários em blogs, nos artigos, nas fotos, vídeos, versões de arquivos, textos, documentos, arquivos de áudio, feeds etc. Para organizar com precisão esse volume de informação é preciso padrões. Os mecanismos de busca possuem um algorítmo cuja função principal é verificar o que é mais relevante, de forma a criar relações entre as informações obtidas em cada documento da web, que por sua vez geram ratings e rankings baseados nessas inter relações. Parte do critério de avaliação é relacionar a metainformação com a própria informação. Ao fazer uma pesquisa no Google, obtém-se uma lista com o que é mais relevante relacionado à palavra digitada. As tags HTML são relativamente muito limitadas para descrever todos os diferentes tipos de informação inseridos na web. Microformats tenta suprir tal lacuna, estendendo para outro nível as possibilidades de descrever a informação. Sintaxe dos Microdados Em microdados, um item se relaciona às propriedades com o uso dos atributos globais:

251 Itemscope - Atributo booleano, indica que o elemento é um microdado e que seus elementos-filhos fazem parte do formato microdado. Itemtype - Define o vocabulário a ser usado. Seu valor é um URL apontando para o arquivo que contém o vocabulário para a marcação dos Microformats. Itemprop - Define o item (propriedade) do vocabulário a ser usado. Itemref -Define um ID do elemento no qual se encontram informações adicionais sobre o item. Itemid - Define a identificação global para o item. O Google mantém o site "data vocabulary", que atualmente é uma das melhores referências de vocabulários que o próprio Google (robô de busca) consegue identificar. Link para o site: Também é possível criar o próprio vocabulário, mas é preciso ter um objetivo muito bem definido. A recomendação é sempre usar os vocabulários já definidos pelo Google/Schema.org. Por exemplo, o vocabulário de pessoas: name (fn) - Nome da pessoa. nickname - Apelido da pessoa. photo - Link para uma foto da pessoa. title - Título da pessoa, por exemplo: Gerente. role - Função da pessoa, por exemplo: Analista de Sistemas. url - Link para a página pessoal da pessoa. affiliation (org) - Dados da organização na qual a pessoa está afiliada: friend - Nome da pessoa de seu relacionamento social como amigo. contact - Nome da pessoa de seu relacionamento social como contato. acquaintance - Nome da pessoa de seu relacionamento social como conhecido.

252 address (adr) - Dados do endereço da pessoa: Outro importante site que descreve vocabulários é o "Schema.org", que contém o vocabulário Person, mais rico em propriedades que o "Data Vocabulary": Neste curso, como base para os exemplos serão usados os dados do "Data Vocabulary". Acompanhe as diferenças de significado entre a descrição normal de uma pessoa e a descrição da mesma pessoa usando as propriedades do vocabulário Person dos microdados. Marcação normal descrevendo a pessoa: Marcação_normal.html Essa marcação é completamente compreensível para nós, humanos, não é verdade? Mas para uma máquina (o Browser,

253 o robô de busca do Google) ela não é clara o suficiente. Como a máquina saberá que a imagem tem relação com o nome dentro do < h1 >? Como saberá que o < h1 > é um nome? Aí entram os microdados, para dar tal significado à informação. Agora, o mesmo exemplo acima, mas escrito com os vocabulários Person, Organization eaddress dos microdados: Explicação A propriedade "name" é filha do vocabulário "Organization". Uma boa forma de visualizar a máquina interpretando esses dados é instalar a extensão "Schema Explorer" para Google Chrome: /docnladpefffgdocnidfngejcagdkedb Porém, ela só consegue "parsear" tais dados de uma página que esteja em servidor local ou web. Por exemplo:

254 A extensão funciona apenas para páginas que estejam em algum servidor, seja local ou web. No exemplo acima, foi usado um servidor web. Portanto, se você não tiver um servidor web ou local configurado, teste usando esta url: /microdados.html Rich Snippets Testing Tool

255 É uma ferramenta do Google que mostra como ele interpreta os microdados e quais os tipos de dados que ele consegue interpretar. Exemplo /richsnippets?url= Essa página nos resultados de busca ficaria assim: A ferramenta também consegue avaliar os dados extraídos:

256 Agora, clique em Show: Com essa ferramenta também é possível visualizar alguns exemplos de marcações de microdados, como "página de um aplicativo": A foto do aplicativo, nome, os reviews (votos) e o seu valor. Outras ferramentas Existem outras ferramentas muito interessantes para se trabalhar com microdados. São estas: HTML5 Microdata Templates - Site para gerar microdados. Gera tanto no formato microformats quanto no formato microdata. Schema Creator - Totalmente voltado para microdados também é ótimo "gerador".

257 PHP Microdata Parser - Código-fonte de um parser PHP de microdados. Microdata DOM Api Essa API provê um método e nove propriedades para manipular microdados via JavaScript. Pena que nenhum navegador a tenha implentado ainda. Informações sobre o Status atual de implementação: /multipage/microdata.html#using-the-microdata-dom -api Outra forma de saber se o Browser suporta esta API é verificar se o método getitems( ) já foi implementado: Atributos de dados personalizados Às vezes é preciso acrescentar atributos com informações importantes nos elementos, para uma manipulação JavaScript mais dinâmica. Como fazer isso? Javascript_dinamico.html Ao validar o documento:

258 Veja que o atributo "tipo" não é válido para esse elemento e muito menos faz parte dos atributos globais. Ele foi inventado para o exemplo, por isso ocorreu o erro de validação. Solução Definir tal atributo usando o prefixo "data-". As regras de documento do Browser o entenderão como dado adicional e não o invalidará. Valide novamente o exemplo:

259 Veja que o documento foi validado corretamente. Você apenderá, no próximo tópico, a manipular esses dados. Dataset API Essa API auxilia a acessar os dados personalizados dos elementos. Seu suporte atual: dataset.html

260 O "segredo" é acessar o objeto "dataset": Também se imprime no console (como pode ser visto no exemplo em execução acima) o objeto dataset por completo:

261 Representando fórmulas matemáticas com MathML MathML é uma linguagem de marcação baseada em XML para a representação de fórmulas matemáticas. Trata-se de uma recomendação W3C para os navegadores e está em pleno desenvolvimento. Atualmente, são poucos os navegadores que a suportam: mathml.html O assunto sobre esse elemento não será aprofundado, até porque sua documentação ainda é vaga e descrever fórmulas matemáticas trabalhando com tags seria bem trabalhoso. Existem alguns Softwares para a geração visual das fórmulas e com opções de exportação para diversos formatos. Um deles é o "Formulator": com_content&task=view&id=11&itemid=12

262 Para baixá-lo: Exemplo de uso exportando para o formato SVG:

263 Em execução no Browser: Outra opção interessante é o MathlML Editorem que é possível desenhar as fórmulas e gerar a marcação MathlML delas:

264 Para baixá-lo, basta acessar: /downloads/list Feito o download e só abrir a página "simplepage.html" e desenhar a fórmula: Para a obter a marcação da fórmula:

265 Código gerado:

266

267 SVG para gráficos vetoriais Criado pela W3C, o SVG é a abreviatura de Scalable Vector Graphics que pode ser traduzido do inglês como "gráficos vetoriais escaláveis". Trata-se de linguagem XML para descrever de forma vetorial desenhos e gráficos bidimensionais, quer de forma estática, quer dinâmica ou animada. Umas das principais características dos gráficos vetoriais é que não perdem a qualidade ao serem ampliados. A grande diferença entre o SVG e os outros formatos vetoriais é o fato de ser um formato aberto, não sendo propriedade de nenhuma empresa.

268 SVG é suportado por todos os navegadores Web modernos de forma nativa ou através de bibliotecas JavaScript. O suporte nativo no Microsoft Internet Explorer só é possível a partir da versão 9. Não faz parte do escopo deste curso ensinar SVG. No entanto, veja este exemplo de sua marcação: Svg.html Editor SVG online: /2.5.1/editor/svg-editor.html Canvas API A Canvas API permite desenhar gráficos na tela do navegador, via Javascript. Para utilizá-la é preciso apenas do elemento < canvas > e dos respectivos métodos JavaScript da API. A Canvas API é muito extensa e daria um curso inteiro só sobre ela. Será explicado apenas o essencial de Canvas. Suporte atual: Coordenadas do contexto 2D de Canvas:

269 Para desenhar é preciso acessar o elemento Canvas, via DOM, e definir o contexto 2D de desenho (também é possível definir contexto 3D de desenho com WebGL, mas ainda é experimental). Canvas.html É necessário definir o contexto via getcontext( ) para que seja possível acessar os métodos e atributos da API. Os parâmetros passados para fillrect( ) são: coordenadas x e y, largura e altura: Outro exemplo:

270 Como já explicado no código, o método strokerect( ) cria um retângulo usando apenas a borda. Métodos da Canvas API Os mais comuns métodos de desenho: beginpath( ) - Reseta o Path atual. closepath( ) - Marca o atual Path como fechado. moveto(x,y) - Posiciona o ponto nas coordeandasx,y para a próxima operação de desenho. lineto(x,y) - Cria um "caminho" de linha a partir do ponto de registro atual até (x,y). rect(x,y, largura, altura) - Destina-se a desenhar um retângulo. arc(x, y, raio, anguloinicial, angulofinal, sentido)- Desenha um arco com centro nas coordenadas x,y com um raio definido e ângulo inicial e final definidos em radianos (negativos ou positivos) e o sentido que pode ser horário(false) ou anti-horário (true) beziercurveto( ) - Desenha uma curva cúbica. Será explicado em detalhes adiante. fill( ) - Preenche o caminho com uma cor sólida. stroke( ) - Aplica os estilos definidos pelos atributos de criação. Por exemplo, os definidos em moveto( ), lineto( ) e etc. filltext( ) - Define o preenchimento do texto. stroketext(texto,...) - Define o contorno do texto.

271 clearrect(x, y, largura, altura) - Limpa uma parte retangular da tela. Para melhor noção das coordenadas do desenho: É possível visualizar estas réguas através do Firebug:

272 canvas.height retorna a altura da área de desenho e canvas.width a largura. Desta forma, o desenho fica proporcional ao tamanho da área de desenho. Por exemplo: Acrescente a seguinte regracss:

273 Os estilos: Podem ser declarados antes ou depois do posicionamento e desenho da linha: Mas é importante ressaltar que o estilo deve ser aplicado logo após seu desenho: Desenhando arcos

274 Os ângulos do exemplo são medidos em radianos e, para isso, é usada a biblioteca de cálculos matemáticos Math do JavaScript. Math.PI = Um ângulo raso (180 graus):

275 Ou Consegue-se esse mesmo resultado definindo o sentido para TRUE (anti-horário): Desenhando curvas quadráticas

276 Curvas quadráticas é excelente ferramenta para criar formas personalizadas. Sintaxe Diagrama dos pontos: Se você já trabalhou com ferramenta de desenho vetorial, como o CorelDraw, terá mais facilidade para entender esses pontos.

277 Desenhando curvas de Bézier É das curvaturas mais avançadas disponíveis na Canvas API. Se uma curva quadrática não satisfizer a sua necessidade, provavelmente a curva de bézier (ou curva cúbica) conseguirá. Informações teóricas sobre esta curva: Sintaxe Diagrama

278 Por exemplo, um espiral: Canvas e JavaScript Altere o número de iterações do for para 60 e veja: O desenho começa no centro do canvas. Isso foi definido anteriormente, no moveto(). Trabalhando com textos em Canvas Usa-se especialmente a função filltext( ).

279 Sintaxe A propriedade textalign aceita os valores: left(esquerda), center (centro) e right (direita) e o alinhamento se dá na horizontal. Já a propriedade textbaseline alinha verticalmente e os valores possíveis são: top, hanging, middle, alphabetic, ideographic e bottom. beginpath e closepath beginpath( ) inicia um caminho e closepath( ) termina o caminho. Conectar dois pontos dentro de um caminho é referido como um subpath. Beginpath_closepath.html Como não foi iniciado um beginpath na reta, ela está sendo ligada no primeiro subpath(três curvas conectadas entre si). Veja:

280 A solução: Iniciar um novo subpath para a reta

281 Cores gradientes Canvas também trabalha com texturas e gradientes. Um exemplo de uso para a definição de uma gradiente linear: Core_gradiente.html addcolorstop( ) acrescenta cores ao gradiente, que se deslocam entre as extremidades do mesmo. 0 é extremidade inicial e 1.0 o fim da extremidade do gradiente. Agora, exemplo de um gradiente "radial":

282 Desenvolvendo a logomarca da AprendaMais em canvas Desenvolvemos a logomarca da AprendaMais em canvas. Foi um árduo trabalho, mas valeu a pena pelo resultado, que ficou bem próximo da logo em vetor criada no CorelDraw. Logomarca.html

283 Canvas editor O CanvasDraw é um interessante editor de Canvas. Ele permite desenhar visualmente e obter o resultado em JavaScript já com as coordenadas. O projeto ainda é básico, mas já dá para perceber o quão seria útil um Software para edição de Canvas, o que aparentemente ainda não existe. O site para o editor é:

284 Para exportar para HTML:

285 Controle de histórico com a History API O HTML5 traz diversas melhorias para o objeto window.history, que agora é chamado de History API. Aplicações complexas desenvolvidas inteiramente emajax às vezes têm necessidade de gerenciar melhor o histórico de navegação para que o usuário, ao voltar ou avançar no navegador, não saia da página. O Gmail é o principal exemplo de aplicação Ajax. Ao clicar em "Rascunhos" ele acrescenta na URL a referência "#drafts"; e ao clicar em voltar, sem recarregar a página, ele volta para o último recurso visitado. A history API possui dois métodos: pushstate(data,title[,url]) - Acrescenta uma entrada na lista de histórico. replacestate(data,title[,url]) - Modifica a entrada atual na lista de histórico.

286 A nova URL passada em pushstate ( ) ou replacestate ( ) deve ter a mesma origem (domínio) da página. Caso contrário, é gerado um erro de segurança. Compatibilidade atual: Faça o teste se o navegador suporta a History API melhorada: History_api.html Navegacao.js Navegue nas opções do menu, avance e volte e veja o controle que o JavaScript faz. O Script usado é bem intuitivo e está bem comentado, mas atenção a esta consideração: - A "chave" da lógica, no exemplo, está no métodonavegar( ) e no evento onpopstate. O métodonavegar( ) é quem pega o hash da URL atual, oculta os demais parágrafos e exibe apenas aquele referente ao hash. O evento popstate é executado sempre que o usuário volta ou avança no

287 navegador, executando o método navegar( ), pois uma vez que volte, o hash daurl muda. Navigation Timing API API que visa fornecer informações sobre o desempenho da página, do carregamento, o tempo de carregamento, memória consumida e etc. Ela ainda está em fase de desenvolvimento. Compatibilidade atual: Timing_api.html Timing_api.js

288 Web Storage API Se for preciso armazenar as preferências do usuário em sua máquina, de tal forma que as informações sejam recuperadas posteriormente, esta é a solução. Por muito tempo todos já foram reféns dos ultrapassados cookies. Conheça alguns dos problemas relacionados ao uso de Cookies:

289 Muito para pouca coisa: O código para armazenar Cookies envolve cálculos com datas e controle do nome de domínio e etc. Espaço limitado: Geralmente os browsers só permitem 4KB por cookie. Inseguros: Os Cookies são facilmente interceptados. Para resolver tais problemas, o HTML implementou duas novas interfaces de API: SessionStorage - Para armazenar dados enquanto a sessão do navegador estiver ativa. Ou seja, ao fechá-la os dados são apagados (parecido com o conceito de Session do PHP). LocalStorage - Para armazenar os dados localmente "para sempre", podendo ser capturados em futura navegação, pois ficam armazenados no cache, no navegador. É claro, os dados só serão deletados quando o usuário, ou o navegador, deletá-los. Ambas interfaces possuem a mesma API, com a única diferença do tempo de persistência dos dados (sessão ou local). Os mesmos casos de uso dos Cookies. Por exemplo, em um sistema que possui uma interface configurável como essa do sistema de ensino do AprendaMais, você poderá armazenar alguns detalhes do Layout, skin e etc. Isso serve para que o usuário, ao voltar a acessar o sistema, possa abri-lo do jeito que configurou. Compatibilidade Atualmente, a maioria dos navegadores novos possui suporte a estas APIs. Maiores informações: Armazenamento

290 Os dados armazenados devem ser strings. Se houver a necessidade de armazenar objetos de dados complexos, a melhor opção é para serializar o objeto em JSONJSON.stringify (será dado um exemplo sobre). Para testar se o Browser suporta estas APIS: Ou usar o Modernizr. Métodos de ambas interfaces: setitem("nome","valor") - Cria um par nome/valor para ser armazenado. getitem("nome") - Obtém o valor armazenado. removeitem("nome") - Remove um item armazenado. clear() - Apaga todo o conteúdo da área de armazenamento. key(n) - Obtém o dado armazenado na posição N especificada. length - Propriedade que retorna o número de itens armazenados. localstorage Como explicado anteriormente, armazena o dado "para sempre" até que o usuário limpe os Cookies/Cache do Browser. Local_storage.html Abra o documento no Google Chrome. Aproveite e abra também as "ferramentas do desenvolvedor" do Google Chrome:

291 Está aí o valor armazenado. Agora, faça um teste, e altere o script para: Feche o navegador e abra o exemplo novamente: O fato de fechar o navegador não excluiu o dado armazenado. Para o localstorage funcionar no Firefox, sem que o dado seja apagado ao fechar o navegador, é necessário que nas

292 configurações de privacidade não esteja marcado para remover "Cookies" ao fechar o navegador: Outra observação importante: Diferentemente das sessionstorage, um dado armazenado em localstorage pode ser acessado por qualquer instância (aba) do navegador e por qualquer página de mesmo domínio (obs: se o dado foi criado pelo domínio site.com.br ele não poderá ser acessado pelo domínio site2.com.br). Como exemplo, crie a página chamada pagina.htm com o seguinte script:

293 A outra página do domínio conseguiu acessar a informação. Isso não aconteceria se tivesse sido usada a sessionstorage, pois nela os dados só ficam disponíveis para a página que o criou. Ou seja, para cada página é criado um espaço diferente de armazenamento e várias páginas podem criar o mesmo nome de dado sem que haja conflito. sessionstorage Armazena o dado apenas para a página (instância atual) e até que o navegador seja fechado. Quando isso ocorrer, o dado será deletado. Session_storage.html

294 Agora, na pagina.htm altere o script para: Não foi possível acessar o dado, pois ele só ficou disponível para a páginasession_storage.html. Além disso, ao fechar o navegador, ele é removido.

295 Essas são as diferenças entre localstorage e sessionstorage. Dica: Em "ferramentas do desenvolvedor" do Google Chrome é possível visualizar os dados salvos em sessão ou localmente: Exemplo completo de Web Storage Primeiro, crie o HTML: web_storage.html Agora, crie o script webstorage.js:

296 Clique em "Tornar o parágrafo editável" e altere o conteúdo do parágrafo; em seguida clique em "Aplicar alterações": Feche o navegador e abra-o novamente:

297 As alterações forma mantidas graças ao conteúdo salvo no localstorage. Observações Os métodos removeattribute( ) e setattribute()são da DOM Level 1 e 2, recomendação da W3C aos navegadores, e totalmente suportados pelos navegadores atuais. Referências e informações sobre a compatibilidade dos métodos da DOM Level 1 e 2 da W3C acesse: Exemplo de Layout usando a semântica do HTML5 Assim como prometido no início do curso, refaça o "blog" usando alguns dos novos elementos semânticos do HTML5. Primeiramente o HTML: Blog_Aprenda.html Agora, a folha de estilos style_blog.css: Em execução:

298 Esclarecendo cada parte: Para entender cada parte é bom que você retorne ao início do curso e reveja o significado de cada um dos elementos. Em resumo: Dentro das seções foram definidos os artigos para reforçar que aqueles artigos pertenciam àquela seção. Os links para os arquivos do blog foram definidos dentro de um aside, reforçando que ele não faz parte do conteúdo principal do site.