O CSS que
falaCSS AURAL
 Folhas de estilo aural utilizam uma combinação de síntese
de fala e efeitos sonoros para que o usuário possa ouvir a
inf...
 Ajudar os usuários a aprenderem a ler
 Ajudar os usuários que têm problemas de leitura
 Ajudar pessoas cegas
 E até m...
h1,h2,h3,h4 {
voice-family:male;
richness:80;
cue-before:url("beep.au")
}
 Fará com que o sintetizador de voz reproduza o...
 As propriedades neste slide se aplicam ao tipo de mídia
aural, que foi introduzido no CSS2
 Porém, o tipo aural está ob...
 ...Usuários com restrições visuais
 ...Usuários com navegadores de voz
 ...Usuários sem restrições
FORNECE INFORMAÇÕES...
As
propriedades
a seguir
pertencem às
folhas de
estilo para a
mídia de
áudio da CSS
(aural /
speech)
PROPRIEDADES
CSS AURA...
A propriedade
volume controla o
nível de volume,
podendo ter um valor
entre zero e 100
Os valores x-soft,
soft, medium, ...
A propriedade
speak indica a
forma de execução
da fala
O valor spell-out
soletra o texto
Valores:
normal
none
spell-...
 É possível utilizar a
propriedade pause em
sua forma genérica, mas
neste caso é necessário
especificar com um
número – 1...
 A propriedade cue indica no
HTML em qual parte deve ser
disparado determinado
conteúdo sonoro. Por isso, é
preciso indic...
 Com a propriedade
play-during é possível
indicar disparos
sonoros, como na
clue, com a diferença
do som ser de fundo
(ba...
 Com as propriedades de som
espacial é possível escutar mais
naturalmente, como geralmente se
escuta no dia-a-dia, pois n...
Valores (A=Azimuth e
E=Elevation):
 angle (A, E)
 left-side (A)
 far-left (A)
 left (A)
 center-left (A)
 center (A)...
 As propriedades que controlam as características das vozes
são:
 speech-rate – que determina a quantidade de palavras p...
Valores:
 Speech-rate
 Number
 x-slow
 Slow
 Medium
 Fast
 x-fast
 Faster
 slower
 Voice-family
 specific-voic...
As propriedades que
trabalham a
pronúncia são:
 speak-puntuation –
que indica como a
pontuação será falada
 speak-numer...
18CSS AURAL - O CSS que fala
CONCLUINDO
 CSS Aural deixa seu site mais acessível
 Aprimora a experiência de deficientes visuais
 Não requer conhecimento de uma...
Wérmeson da S. Lopes
 Estudante de Sistemas de
Informação na instituição
Faculdade Paraíso do Ceará, e
atuante na área de...
Próximos SlideShares
Carregando em…5
×

CSS Aural

874 visualizações

Publicada em

Uma forma de deixar seu site mais visível é ampliando a experiência de uso do usuário-final. O CSS Aural ajuda você a chegar nesse foco deixando seu site mais acessível, principalmente para pessoas com algum tipo de deficiência visual.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
874
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

CSS Aural

  1. 1. O CSS que falaCSS AURAL
  2. 2.  Folhas de estilo aural utilizam uma combinação de síntese de fala e efeitos sonoros para que o usuário possa ouvir a informação, em vez de lê-la  São propriedades aplicadas no código CSS  Recurso indicado para tornar o seu site mais acessível O QUE É? CSS AURAL - O CSS que fala 2
  3. 3.  Ajudar os usuários a aprenderem a ler  Ajudar os usuários que têm problemas de leitura  Ajudar pessoas cegas  E até mesmo ouvir enquanto dirige PARA QUE SERVE? CSS AURAL - O CSS que fala 3
  4. 4. h1,h2,h3,h4 { voice-family:male; richness:80; cue-before:url("beep.au") }  Fará com que o sintetizador de voz reproduza os cabeçalhos em uma voz grave masculina EXEMPLO CSS AURAL - O CSS que fala 4
  5. 5.  As propriedades neste slide se aplicam ao tipo de mídia aural, que foi introduzido no CSS2  Porém, o tipo aural está obsoleto, sendo substituído pelo tipo de mídia speech, mas mantendo as mesmas propriedades  Atualmente, o melhor navegador com suporte a estas propriedades é o Opera ANTES DE MAIS NADA CSS AURAL - O CSS que fala 5
  6. 6.  ...Usuários com restrições visuais  ...Usuários com navegadores de voz  ...Usuários sem restrições FORNECE INFORMAÇÕES PARA... CSS AURAL - O CSS que fala 6
  7. 7. As propriedades a seguir pertencem às folhas de estilo para a mídia de áudio da CSS (aural / speech) PROPRIEDADES CSS AURAL - O CSS que fala 7
  8. 8. A propriedade volume controla o nível de volume, podendo ter um valor entre zero e 100 Os valores x-soft, soft, medium, loud e x-loud significam os números zero, 25, 50, 75 e 100, respectivamente Valores:  [Número]  %  Silent  x-soft  soft  medium  loud  x-loud VOLUME CSS AURAL - O CSS que fala 8
  9. 9. A propriedade speak indica a forma de execução da fala O valor spell-out soletra o texto Valores: normal none spell-out SPEAK CSS AURAL - O CSS que fala 9
  10. 10.  É possível utilizar a propriedade pause em sua forma genérica, mas neste caso é necessário especificar com um número – 1 ou 2 – se a pausa será dada antes ou depois de determinado elemento no HTML e por quanto tempo  É possível ser mais específico utilizando uma das propriedades pause-before ou pause- after  Valores:  Pause  pause-before  pause-after  Pause-before  time  %  Pause-after  time  % PAUSE, PAUSE-BEFORE E PAUSE- AFTER CSS AURAL - O CSS que fala 10
  11. 11.  A propriedade cue indica no HTML em qual parte deve ser disparado determinado conteúdo sonoro. Por isso, é preciso indicar a localização do arquivo sonoro no valor [uri]  De modo específico, pode-se utilizar a propriedade como cue-before ou cue-after  Se caso for utilizado sua versão geral, somente clue, da mesma forma deve-se indicar se o disparo do som será antes (before) ou depois (after)  Valores:  Cue-before  cue-before  cue-after  Cue-before  none  url  Cue-after  none  url CUE, CUE-BEFORE E CUE-AFTER CSS AURAL - O CSS que fala 11
  12. 12.  Com a propriedade play-during é possível indicar disparos sonoros, como na clue, com a diferença do som ser de fundo (background)  E ainda poderá ter dois ou mais sons sobrepostos, basta indicar o valor mix após a localização do arquivo sonoro [uri]  Valores:  auto  none  url  mix  repeat PLAY-DURING CSS AURAL - O CSS que fala 12
  13. 13.  Com as propriedades de som espacial é possível escutar mais naturalmente, como geralmente se escuta no dia-a-dia, pois na vida real o áudio pode vir de qualquer lado e de acordo com a mudança de posição da pessoa, muda-se o lado de escuta do referencial sonoro  Esse controle é possível utilizando-se as propriedades azimuth, que descreve o posicionamento da fonte sonora na horizontal e em profundidade, e elevation, que tem a mesma função, porém controla a origem da fonte sonora na vertical  Para explicar melhor a função dessas duas propriedades, segue imagem ao lado AZIMUTH E ELEVATION CSS AURAL - O CSS que fala 13
  14. 14. Valores (A=Azimuth e E=Elevation):  angle (A, E)  left-side (A)  far-left (A)  left (A)  center-left (A)  center (A)  center-right (A)  right (A)  far-right (A)  right-side (A)  behind (A)  leftwards (A)  rightwards (A)  below (E)  level (E)  above (E)  higher (E)  lower (E) AZIMUTH E ELEVATION CSS AURAL - O CSS que fala 14
  15. 15.  As propriedades que controlam as características das vozes são:  speech-rate – que determina a quantidade de palavras por minuto;  voice-family – especifica o tipo de voz, se é feminina, masculina ou de criança  pitch – permite alterar o volume e timbre da voz  pitch-range – altera o volume e o timbre da voz por meio da determinação de um valor específico de frequência  stress – especifica o tipo de entonação  richness – trabalha o “brilho” da voz e está relacionado também com a ambiência SPEECH-RATE, VOICE-FAMILY, PITCH, PITCH-RANGE, STRESS E RICHNESS CSS AURAL - O CSS que fala 15
  16. 16. Valores:  Speech-rate  Number  x-slow  Slow  Medium  Fast  x-fast  Faster  slower  Voice-family  specific-voice  generic-voice Valores:  Pitch  Frequency  x-low  Low  Medium  High  x-high  Pitch-range, Stress E Richness  Number SPEECH-RATE, VOICE- FAMILY, PITCH, PITCH-RANGE, STRESS E RICHNESS CSS AURAL - O CSS que fala 16
  17. 17. As propriedades que trabalham a pronúncia são:  speak-puntuation – que indica como a pontuação será falada  speak-numeral – como os números serão falados  speak-header – como o texto será falado quando estiver dentro de uma tabela Valores:  Speak-punctuation  None  code  Speak-numeral  Digits  continuous  Speak-header  Always  once SPEAK-PUNCTUATION, SPEAK-NUMERAL E SPEAK-HEADER CSS AURAL - O CSS que fala 17
  18. 18. 18CSS AURAL - O CSS que fala CONCLUINDO
  19. 19.  CSS Aural deixa seu site mais acessível  Aprimora a experiência de deficientes visuais  Não requer conhecimento de uma nova linguagem ou técnica, pois é só seguir o padrão da linguagem CSS  Site mais acessível = site com maior probabilidade de ser visto CSS AURAL - O CSS que fala 19 CONCLUINDO
  20. 20. Wérmeson da S. Lopes  Estudante de Sistemas de Informação na instituição Faculdade Paraíso do Ceará, e atuante na área de Desenvolvimento Web no NexTI (Núcleo de Informação em Tecnologia da Informação) que se localiza dentro da mesma instituição.  http://www.slideshare.net/Wermeson SL  http://twitter.com/wermezoom  http://www.facebook.com/Wermeson SL  http://br.linkedin.com/in/wermeson  Acompanhe dicas e artigos sobre desenvolvimento web em : http://www.webnossa.blogspot.com/ Referências  FERREIRA, Daniela Carvalho Monteiro. Website Aural: aplicações sonoras com CSS 2. Disponível em <http://www.sonora.iar.unicamp.br/ index.php/sonora1/article/viewFile /28/26>. Acesso em 21 de setembro de 2013.  W3C. Aura Style Sheets. Disponível em <http://www.w3.org/TR/CSS2/aural .html>. Acesso em 21 de setembro de 2013.  W3SCHOOLS. CSS Aural Reference. Disponível em <http://www.w3schools.com/cssref /css_ref_aural.asp>. Acesso em 21 de setembro de 2013. ESPERO QUE TENHAM GOSTADO  CSS AURAL - O CSS que fala 20

×