Curso Web Designer UTD Aula 03

(1)

Curso Web Designer

UTD

(2)

3

(3)

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;

➢

(4)

5

(5)

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 células;

(6)

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 conteúdo 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.

(7)

Trabalhando com Tabelas

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

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

<tbody></tbody>: Agrupa o conteúdo do corpo de uma tabela;

<tfoot></tfoot>: Agrupa o conteúdo do rodapé de uma tabela.

(8)

9

(9)

Trabalhando com

Formulários

Formulários usuários.

são usados para receber informações fornecidas pelos

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

Propriedades:

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

(10)

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;

(11)

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 múltipla escolha;

radio: Define um campo de escolha única; file:

Define um campo para realizar upload; hidden:

(12)

Trabalhando com

Formulários

Alguns botões específicos:

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

Define um botão para limpar o conteúdo digitado no formulário;

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

(13)

Trabalhando com Formulários

<textarea></textarea>: Campo de múltiplas 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.

(14)

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.

(15)

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 através do atributo ID

➢

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

(16)

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.

(17)

18

(18)

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 submetiamos

(19)

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;

➢

(20)

Os novos elementos do Formulário

month: Cria um campo com validação e formato para seleção de mês e ano;

number: Valida um campo numérico, podendo colocar um número mínimo e máximo para digitação;

➢

range: Cria uma barra podendo navegar entre números com um entre os

➢

valor mínimo, máximo e também 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

➢

(21)

Os novos elementos do Formulário

Também, 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

(22)

23

(23)

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

Através de suas novas APIs, você pode acessar, controlar e manipular:

(24)

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 dependência 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 novas

tag's sejam implementadas, e que o navegador esteja compatível com o HTML5.

(25)

HTML

5 e Multimídia

Importante

Vale ressaltar que

os

navegadores

mais

recentes ainda não

são compatíveis. O

IE8 é

(26)

HTML5 e Multimídia

Sabendo disso, vejamos as demonstrações e as características de ambas, de maneira a abordar o básico, porém funcional.

<audio></audio>:

fontes de áudio;

Define o som como uma música, ou outras

➢

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

➢

tipos de vídeo.

(27)

HTML

5 e Multimídia

HTML

5 Áudio Codecs

(28)

HTML

5 e Multimídia

HTML

5 Vídeo Codecs

(29)

HTML

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

(30)

39

(31)

As novidades do

HTML

5

Graphics & 3D Offline Applications Audio & Video Seletores e Validadores Media Capture Web sockets e Web storage

(32)

As novidades do

HTML

5 Graphics e 3D

SVG - sigla em inglês 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ções sobre o gráfico de uma forma vetorial, compacta e portável.

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

(33)

As novidades

do HTML

5 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

➢

circunferências;

<ellipse /> Elemento destinado à criação

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

de elipses; linhas retas; ➢ ➢ ➢ ➢

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

(34)

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 -dos ry - 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

(35)

As novidades

do HTML

5 Graphics e 3D

(36)

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;

(37)

As novidades

do HTML

5 Graphics e 3D

(38)

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.

(39)

As novidades

do HTML

5 Graphics e 3D

(40)

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;

(41)

As novidades

do HTML

5 Graphics e 3D

(42)

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 sequência de segmentos de reta unindo os

definidos pelas coordenadas.

(43)

As novidades

do HTML

5 Graphics e 3D

(44)

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 sequência de segmentos de reta unindo os pontos

definidos pelas coordenadas, formando uma superfície fechada.

(45)

As novidades

do HTML

5 Graphics e 3D

(46)

As novidades

do HTML

5 Graphics e 3D

É um elemento do HTML5, Todo o trabalho de criação e animação é realizado através da linguagem de programação JavaScript.

destinado a delimitar uma renderização

gráficos. área para

dinâmica de

O único elemento HTML existente feito via Javascript.

para isso é o <canvas>, o restante é JavaScript

(47)

As novidades do

HTML

5 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

(48)

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);

(49)

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:

(50)

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.

➢ ➢ ➢ ➢

(51)