Curso Web DesignerUTD

Aula 03

3

HTML5 e suas APIs

Objetivos da Aula

Aula 04

➢ Criando Tabelas;

➢ Criando Formulários;

➢ Novos elementos de um Formulário HTML5;

➢ Conhecendo as APIs de Áudio e Vídeo;

➢ As novidades no HTML5.

5

Trabalhando com Tabelas

Trabalhando com Tabelas

Tabelas são usadas para apresentar "dados tabulares", ou seja,

informação que deva ser apresentada em

lógica.

linhas e colunas, de maneira

<table></table>: Tag que delimita a área de uma tabela.

Algumas propriedades:

border=[pixel]: Tamanho da borda da tabela;width=[pixel ou %]*: Largura da tabela;

cellspacing=[pixel]*: Espaço entre as celulas;

cellpadding=[pixel]*: Espaço entre a borda da celula e seu conteudo.

Trabalhando com Tabelas

<tr></tr>: Tag que determina uma linha da tabela;

<th></th>: Tag que determina uma coluna de “cabeçalho” da tabela;

<td></td>: Tag que determina uma coluna de conteudo da tabela.

Algumas propriedades:

rowspan=[numero]: Quantidade de linhas que serão mescladas;

colspan=[numero]: Quantidade de colunas

align=[value]*: Alinhamento horizontal;

valign=[value]*: Alinhamento vertical.

que serão mescladas;

Trabalhando com Tabelas

<caption></caption>: Determina o titulo de uma tabela;

<thead></thead>: Agrupa o conteudo do cabeçalho de uma tabela;

<tbody></tbody>: Agrupa o conteudo do corpo de uma tabela;<tfoot></tfoot>: Agrupa o conteudo do rodape de uma tabela.

* Elementos e/ou propriedades obsoletas na versão 5.

9

Trabalhando com Formulários

Trabalhando com Formulários

Formulários

Formulários

usuários.

são usados para receber informaçoes fornecidas pelos

<form></form>: Tag que delimita a área do formulário.

Propriedades:

method=[get/post]: Define a forma de envio dos dados;

action=[URL]: Define quem irá receber os dados do formulário.

Trabalhando com Formulários

Dentro do nosso formulário, precisamos de campos que definam os

tipos de entradas de dados. Esse procedimento e definido pela tag

<input />.

Propriedades:

name=[value]: Especifica o nome do campo. Será utilizado para

recuperar o valor inserido pelo usuário;

type=[value]: Especifica o tipo de entrada.

Trabalhando com Formulários

Na propriedade type definimos o tipo de entrada que sera exibida na tela,

e cada entrada pode receber um tipo de dado diferente como abaixo:

text: Define um campo para digitação de texto;

Password: Define um campo de senha, assim os caracteres

aparecem mascarados;

checkbox: Define um grupo de multipla escolha;radio: Define um campo de escolha unica; file: Define um campo para realizar upload; hidden:

Define que o campo será oculto.

Trabalhando com Formulários

Alguns botoes específicos:

button: Define um botão na página;

Define um botão para limpar o conteudo digitado no

formulário;

submit: Define um botão para postar as informaçoes do formulário;

imagem: Define uma imagem como botão de submit.

Trabalhando com Formulários

<textarea></textarea>: Campo de multiplas linhas para entrada de dados.

cols=[numero]: Especifica o numero de colunas;

rows=[numero]: Especifica o numero de linhas;name=[value]: Especifica o nome do campo e será utilizado para

recuperar o valor inserido pelo usuário;

<select></select>:

seleção);

Determina uma lista de escolhas (caixa de

name=[value]: Especifica o nome do campo, e será utilizado para

recuperar o valor inserido pelo usuário.

Trabalhando com Formulários

<option></option>: Define os itens da caixa de seleção.

value=[texto]: Especifica o valor do item;

Define que o item será pre-selecionado no

carregamento da página;

<optgroup></optgroup>: Tag que define um grupo

de seleção.

de itens da caixa

label=[texto]: Especifica um texto para o grupo.➢

Trabalhando com Formulários

<label></label>: Define uma etiqueta

formulário.

para um controle de um campo do

for=[texto]: Especifica para quem

do campo;

e a etiqueta atraves do atributo ID➢

<fieldset></fieldset>: Define um ou mais conjuntos de campos;

<legend></legend>: Define a legenda do conjunto de campos.

Trabalhando com Formulários

As tags de formulário possuem outros atributos importantes:

value=[texto]: Especifica um valor para um campo;➢➢maxlength=[numero]:

permitida no campo;

Especifica a quantidade de caracteres

size=[numero]: Especifica o tamanho do campo;➢➢ checked=“checked”:

selecionado;

readonly=“readonly”:

Especifica um item de checkbox pre-

Define que o campo seja somente de leitura.➢

18

Os novos elementos do Formulário

Os novos elementos do Formulário

Quando o grupo WHATWG resolveu reescrever o HTML, eles decidiram

começar pelos formulários. E se voce notar, estamos escrevendo

formulários da mesma maneira desde o início de tudo.

WHATWG Nunca houve uma atualização sensata e

interessante, que modificasse a forma

com que usávamos e submetiamosHTML FORMULÁRIOS informaçoes via formulários.

Os novos elementos do Formulário

Foi aí que o grupo decidiu criar novos tipos de formulários, facilitando a

usabilidade do usuário e a do desenvolvedor, que precisa produzir

campos de formulários.

O elemento input aceita os seguintes novos valores para o atributo type:

color: Cria um campo com escolha para cor retornando o valor de

hexadecimal;

date: Cria um campo com escolha por calendário já com validação e

formato de data;

datetime-local: Cria um campo com escolha por calendário já com

validação e formato de data e horário;

email: Define o campo com validação para e-mail;

➢

➢

➢

➢

Os novos elementos do Formulário

month: Cria um campo com validação e formato para seleção de

mes e ano;

number: Valida um campo numerico, podendo colocar um numero

mínimo e máximo para digitação;

➢

➢

range: Cria uma barra podendo navegar entre numeros com um

entre os➢ valor mínimo, máximo e tambem o intervalo de navegação

valores;

time: Cria um campo com validação e formato de horário;

week: Cria um campo com formato para seleção da semana➢➢ do ano.

Os novos elementos do Formulário

Tambem, na versão 5, surgiram novos atributos que deixou ainda melhor

os novos formulários:placeholder: Especifica uma pequena dica que descreve o valor

➢ esperado de um elemento;required: Especifica que um campo de entrada deve ser preenchido antes

de enviar o formulário (Funciona como uma validação);➢

pattern: Especifica uma expressão regular que o valor de um➢ elemento e verificada em relação;

formnovalidate: Define que os elementos

validado quando submetidos;

novalidate: Define que todo os elementos

validados quando submetidos.

de formulário não deve ser➢

de formulário não deve ser➢

23

HTML5 e Multimídia

HTML5 e Multimídia

Áudio e vídeo

O áudio e o vídeo tornaram-se objetos de

primeira classe na web com HTML5,como aconteceu com outros tipos de as

imagens, no passado.

exatamente

mídia, como

Atraves de suas novas APIs, voce pode acessar, controlar e manipular:

Os dados de linha do tempo. Os estados de rede dos arquivos.

HTML5 e Multimídia

Para quem não sabe, as tag's <audio> e <vídeo> são tag's de mídia.

Foram criadas para acabar com a dependencia de plugin's na

reprodução de áudio e vídeo das páginas. Exemplo:

Já não será necessário instalar os sites do

Flash e do Youtube. Basta que essas novastag's sejam implementadas, e que o

navegador esteja compatível com o HTML5.

25

HTML5

e Multimídia

Importante

Vale ressaltar que os navegadores mais

recentes ainda não são compatíveis. O IE8 e

um deles, apenas o IE9 suporta o HTML5.

HTML5 e Multimídia

Sabendo disso, vejamos as demonstraçoes e as características de

ambas, de maneira a abordar o básico, porem funcional.

<audio></audio>:

fontes de áudio;

Define o som como uma musica, ou outras➢

<video></video>: Define o vídeo como um clipe, filme ou outros➢ tipos de vídeo.

27

HTML5

e Multimídia

HTML5

Áudio Codecs

HTML5

e Multimídia

HTML5

Vídeo Codecs

HTML5

e Multimídia

Atributos

autoplay=”autoplay”: Define

estiver pronto;

que o áudio será tocado, assim que ele➢

controls=”controls”: Os controles serão mostrados;

loop=”loop”: Define que o áudio será tocado novamente, assim que

terminá-lo;

preload=”preload”: Define que o áudio será carregado enquanto a

➢➢

➢ página e lida. Esse atributo e ignorado, caso o atributo autoplay

estiver definido;

src=”URL”: URL do arquivo a ser tocado.➢

39

As novidades no HTML5

As novidades do HTML5

Graphics & 3D

Offline

Applications

Audio &

Video

Seletores e

Validadores

Media

Capture

Web sockets e

Web storage

As novidades do HTML5

Graphics e 3D

SVG - sigla em ingles para "Scalable Vector Graphics", que em

tradução livre significa Gráfico Vetorial Escalável. Trata-se de uma

linguagem de marcação que adota a sintaxe XML, e se destina a criar

imagens gráficas vetoriais.

SVG e uma aplicação XML destinada a criação de gráficos, valendo-se

do armazenamento das informaçoes sobre o gráfico de uma forma

vetorial, compacta e portável.

<svg>: Declara um objeto do tipo SVG no HTML.➢

As novidades do HTML5

Graphics e 3D

Existem seis formas básicas:

➢ <rect /> Elemento destinado à criação de retângulos;<circle /> Elemento destinado à criação de círculos e

➢ circunferencias;

<ellipse /> Elemento destinado à criação

<line /> Elemento destinado à criação de

de elipses;

linhas retas;➢➢

➢

➢

<polyline /> Elemento destinado à criação de polilinhas;

<polygon /> Elemento destinado à criação de polígonos.

As novidades do HTML5

Graphics e 3D

Os➢

atributos destinados à criação de um retângulo são:

x - Define a coordenada horizontal do canto superior esquerdo do

retângulo;

y - Define a coordenada vertical do canto superior

width - Define a largura do retângulo;

height - Define a altura do retângulo;

direito do retângulo;➢➢

➢

➢ rx -

dosry -

dos

Define o raio de curvatura,

cantos do retângulo;

Define o raio de curvatura,

cantos do retângulo.

segundo o eixo do x para arredondamento

segundo o eixo do y para arredondamento➢

As novidades do HTML5

Graphics e 3D

Ex: Retângulo com SVG

As novidades do HTML5

Graphics e 3D

Os atributos destinados à criação de um círculo são:

cx - Define a coordenada horizontal do centro do círculo;➢➢

➢

cy - Define a coordenada vertical do centro do círculo;

r - Define o raio do círculo.

As novidades do HTML5

Graphics e 3D

Ex: Círculo com SVG

As novidades do HTML5

Graphics e 3D

Os atributos destinados à criação de uma elipse são:

cx - Define a coordenada horizontal do centro da elipse;➢➢

➢

➢

cy - Define a coordenada vertical do centro da elipse;

rx

ry

-

-

Define

Define

o

o

raio

raio

horizontal da elipse;

vertical da elipse.

As novidades do HTML5

Graphics e 3D

Ex: Elipse com SVG

As novidades do HTML5

Graphics e 3D

Os atributos destinados à criação de uma linha são:

x1, y1 - Definem a coordenada do ponto inicial da linha reta;➢➢

➢

➢

x2, y2 - Definem a coordenada do ponto final da linha reta;

stroke-width - Define a espessura da linha reta;

stroke - Define a cor da linha reta.

As novidades do HTML5

Graphics e 3D

Ex: Linha com SVG

As novidades do HTML5

Graphics e 3D

O atributo destinado à criação de polilinhas e o points. O valor deste

atributo e uma lista de coordenadas separadas por espaço em branco.

A polilinha e uma sequencia de

segmentos de reta unindo os

definidos pelas coordenadas.

pontos

As novidades do HTML5

Graphics e 3D

Ex: Polilinha com SVG

As novidades do HTML5

Graphics e 3D

Os atributos destinados à criação de polígonos e o atributo points. O

valor deste atributo e uma lista de coordenadas separadas por espaço

em branco.

O polígono e uma sequencia de

segmentos de reta unindo os pontos

definidos pelas coordenadas,

formando uma superfície fechada.

As novidades do HTML5

Graphics e 3D

Ex: Poligono com SVG

As novidades do HTML5

Graphics e 3D

E um elemento do HTML5, Todo o trabalho de criaçãoe animação e realizado

atraves da linguagem de

programação JavaScript.

destinado a delimitar umarenderização

gráficos.

área para

dinâmica de

O unico elemento HTML existente

feito via Javascript.

para isso e o <canvas>, o restante e

JavaScriptCanvas

As novidades do HTML5

Graphics e 3D

Veja como inserir o elemento canvas numa página:

<canvas id="x" width="300" height="300"></canvas>

Isso vai exibir um retângulo vazio. Para desenhar nele, primeiro

contexto de desenho com o Javascript:

obtemos o

context=document.getElementById(‘x’).getContext(‘2d’)

As novidades do HTML5

Graphics e 3D

Agora que temos um contexto, e

com um simples retângulo:

podemos desenhar nele. Vamos começar

context.fillRect(10,10,50,150);

Simples, não?

As novidades do HTML5

Isso e apenas um pouco do que pode ser feito com HTML5. Temos

outras coisas como:

Web Storage Web Sockets

Geolocation Application Offline

Mas, isso não e o mais importante agora. Para saber mais acesse:

www.html5rocks.com/pt/

Próximos Passos

Para que voce tenha um melhor aproveitamento do curso, participe das

seguintes atividades disponíveis no Step 3:

Aula 5: Boas práticas com HTML

Fazer a leitura dos Slides;

Assistir a aula Síncrona.Realizar o Laboratório e Teste de Conhecimento. Faça

os exercícios propostos do Projeto Dexter.

➢➢

➢

➢

Mãos à obra!

FIM