Aula - Tecnologia Web

Prévia do material em texto

Tecnologias 
Web
João Paulo 
Brognoni Casati
Aula 8
Conteúdo da Aula
• Controles de Formulário
–Checkbox
–Radio
–Select
–Hidden
• Acessibilidade na Web
2
Controles de Formulário
• O controle Checkbox
–Seleção de itens
• Nenhum, Um ou Vários
–Deve manter o mesmo nome
• name=“nomeigual”
3
Controles de Formulário
• O controle Checkbox
4
<form>
<input type="checkbox" name="chkFrutas" value="Abacaxi"/> Abacaxi
<br/>
<input type="checkbox" name="chkFrutas" value="Uva"/> Uva
<br/>
<input type="checkbox" name="chkFrutas" value="Laranja"/> Laranja
<br/>
<input type="checkbox" name="chkFrutas" value="Caju"/> Caju
<br/>
<input type="checkbox" name="chkFrutas" value="Banana"/> Banana
<br/>
<input type="checkbox" name="chkFrutas" value="Goiaba"/> Goiaba
</form>
Controles de Formulário
• O controle Checkbox
5
Controles de Formulário
• O controle Radio
–Seleção de itens
• Apenas um por grupo
–Deve manter o mesmo nome
• name=“nomeigual”
6
Controles de Formulário
• O controle Radio
7
<form>
<input type="radio" name="rdoFrutas" value="Abacaxi"/> Abacaxi
<br/>
<input type="radio" name="rdoFrutas" value="Uva"/> Uva
<br/>
<input type="radio" name="rdoFrutas" value="Laranja"/> Laranja
<br/>
<input type="radio" name="rdoFrutas" value="Caju"/> Caju
<br/>
<input type="radio" name="rdoFrutas" value="Banana"/> Banana
<br/>
<input type="radio" name="rdoFrutas" value="Goiaba"/> Goiaba
</form>
Controles de Formulário
• O controle Radio
8
Controles de Formulário
• O controle Select
–TAG <select>
• Cria um menu de seleção
• Contém a propriedade name
–TAG <option>
• Cria cada opção do menu
• Contém a propriedade value
–Configurável para várias seleções
• Multiple
9
Controles de Formulário
• O controle Select
10
<form>
<select name="nomes">
<option value="joao">
João
</option>
<option value="maria">
Maria
</option>
<option value="carlos">
Carlos
</option>
</select>
</form>
Controles de Formulário
• O controle Select
11
Controles de Formulário
• O controle Select Multiple
12
<form>
<select name="nomes" multiple>
<option value="joao">
João
</option>
<option value="maria">
Maria
</option>
<option value="carlos">
Carlos
</option>
</select>
</form>
Controles de Formulário
• O controle Select Multiple
13
Controles de Formulário
• O controle Hidden
–Elemento invisível na página
• Utilizado para passagem de parâmetros que 
não precisam ser exibidos
• Pode ser visualizado no código HTML
14
<input type=“hidden” name=“codigo” value=“145”/>
Acessibilidade na Web
• Projeto da W3C
–WAI (Web Acessibility Initiative)
• Desde 1997
• Publica diretrizes de acessibilidade
• Visa tornar a web acessível a uma gama 
maior de pessoas
• Linguagem HTML
–Possui elementos de acessibilidade
15
Acessibilidade na Web
• Dificuldade em visualizar imagem
–Propriedade alt da TAG <img>
• Descrição textual da imagem
• Exemplo:
16
<img src=“imagem.jpg” alt=“descrição”/>
Acessibilidade na Web
• Exemplo de uso: alt
17
<
w
w
w
.g
o
o
g
le
.c
o
m
.b
r>
Acessibilidade na Web
• Resumo de informações de Tabela
–Propriedade summary da TAG <table>
• São lidas por navegadores com este recurso
• Exemplo:
18
<table summary=“Percentual de vendas do mês 
de maio de 2014”/>
Acessibilidade na Web
• Atalhos de teclado
–Propriedade accesskey
• Aplicação em diferentes elementos
• Normalmente utilizado em links
• Exemplo:
19
<a href=“clientes.html” accesskey=“c”> Clientes </a>
Acessibilidade na Web
• Exemplo de uso: accesskey
20
Tecnologias 
Web
João Paulo 
Brognoni Casati
Atividade 8
22
Atividades
• 1 – Qual a diferença quanto ao uso do 
controle Radio para o controle Checkbox?
• Resposta:
–Radio: utilizado para 
seleção de apenas um 
elemento
–Checkbox: utilizado para 
seleção de um, nenhum 
ou vários elementos
23
Atividades
• 2 – O controle select também é conhecido 
como?
• Resposta:
–Combo Box.
24
Atividades
• 3 – Dê dois exemplos de uso do controle 
hidden.
• Resposta:
–Passagem de códigos 
indiferentes para o usuário.
–Passagem de parâmetros 
advindos de outras páginas.
25
Atividades
• 4 – Cite duas vantagens de se utilizar 
elementos de acessibilidade em uma página 
web.
• Resposta:
–Torná-la acessível a uma 
gama maior de usuários.
–Facilitar a navegação dos 
usuários.
26
Atividades
• 5 – Desde quando existe a WAI? Quem a 
mantém?
• Resposta:
–Desde 1997 e é mantida 
pela W3C.