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
Top Related