Slides

CSS Aural

Description
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.
Categories
Published
of 20
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Related Documents
Share
Transcript
  • 1. O CSS que falaCSS AURAL
  • 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.  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. 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.  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.  ...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. 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. 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. 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.  É 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.  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.  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.  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. 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.  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. 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. 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. 18CSS AURAL - O CSS que fala CONCLUINDO
  • 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. 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
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks