Aplicações Web Acessíveis. Carlos Rafael Gimenes das Neves

Tamanho: px
Começar a partir da página:

Download "Aplicações Web Acessíveis. Carlos Rafael Gimenes das Neves"

Transcrição

1 Aplicações Web Acessíveis Carlos Rafael Gimenes das Neves

2 Por onde vamos... Preocupe-se com o visual Lembra do teclado? Um mundo de faz de conta Juntando tudo: um controle acessível Bons links e referências 2 / 112

3 Preocupe-se com o visual Bons motivos para se preocupar com cores, tipos e sons, mesmo não sendo um designer! 3 / 112

4 Preocupe-se com o visual Antes de tudo... Todos já ouviram falar da W3C?!?!?! 4 / 112

5 Preocupe-se com o visual A W3C, World Wide Web Consortium, é a principal organização internacional responsável por padronizar quesitos relacionados à Web * Assunto paralelo: antes de reclamar ou elogiar um ou outro browser, sempre confira a especificação oficial ; ) 5 / 112

6 Preocupe-se com o visual Preocupada em levar o conteúdo da Web ao maior número de pessoas possível, a W3C criou o Web Content Accessibility Guidelines, ou WCAG, disponível em: O foco principal do WCAG são pessoas com diversos tipos de necessidades especiais, como problemas de visão, surdez, dislexia... 6 / 112

7 Preocupe-se com o visual O WCAG é um conjunto de diretrizes que se atentam a diversas características relacionadas com a experiência do usuário com conteúdo Web, como por exemplo: Sons Cores Animação Texto (tipos / fontes) 7 / 112

8 Preocupe-se com o visual O WCAG está atualmente na versão 2.0, e suas diretrizes são dividida em quatro grandes grupos: 1. Perceptibilidade 2. Usabilidade 3. Compreensibilidade 4. Robustez 8 / 112

9 Preocupe-se com o visual 1. Perceptibilidade 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. 1.2 Provide alternatives for time-based media. 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure. 1.4 Make it easier for users to see and hear content including separating foreground from background. * Conteúdo extraído do WCAG 2.0 na íntegra 9 / 112

10 Preocupe-se com o visual 2. Usabilidade 2.1 Make all functionality available from a keyboard. 2.2 Provide users enough time to read and use content. 2.3 Do not design content in a way that is known to cause seizures. 2.4 Provide ways to help users navigate, find content, and determine where they are. 10 / 112

11 Preocupe-se com o visual 3. Compreensibilidade 3.1 Make text content readable and understandable. 3.2 Make Web pages appear and operate in predictable ways. 3.3 Help users avoid and correct mistakes. 11 / 112

12 Preocupe-se com o visual 4. Robustez 4.1 Maximize compatibility with current and future user agents, including assistive technologies. 12 / 112

13 Preocupe-se com o visual No tempo que temos, não é possível discutir TODAS as diretrizes, então vamos a alguns exemplos práticos! :D 13 / 112

14 Preocupe-se com o visual Gosta de cores?! Que tal essas combinações... Texto Texto Texto Texto Texto Texto Texto Texto Texto 14 / 112

15 Preocupe-se com o visual Como saber se uma combinação de cores é legível?!?!?! 15 / 112

16 Preocupe-se com o visual Bom senso Matemática * A segunda tende a falhar menos!!! :) 16 / 112

17 Preocupe-se com o visual Junto com a WCAG, a W3C criou um conjunto de técnicas para auxiliar os desenvolvedores a atingirem o que é proposto pelas diretrizes Esse conjunto de técnicas está disponível em: 17 / 112

18 Preocupe-se com o visual Cálculo do contraste baseado na luminosidade relativa das cores: L = * CR * CG * CB CX é definido da seguinte forma (X varia de 0 a 1): se (X ) então CX = X / senão CX = ((X ) / 1.055) 2.4 * Extraído das técnicas G17 e G18 18 / 112

19 Preocupe-se com o visual Uma vez calculada a luminosidade relativa do texto e do fundo, obtém-se o contraste através da fórmula: Contraste = (L ) / (L ) Onde L1 é a maior luminosidade (dentre texto e fundo), e L2 é a menor 19 / 112

20 Preocupe-se com o visual Perfeito! Fiz todas as contas, mas... Ainda não sei se minha combinação de cores está boa... :( 20 / 112

21 Preocupe-se com o visual O documento que explica como trabalhar com esse valor de contraste está disponível em: 21 / 112

22 Preocupe-se com o visual Existem dois tipos de aprovação: Nível AA: contempla pessoas normais, ou com pouca perda de visão Nível AAA: comtempla pessoas com maior perda de visão, ou mais idosas 22 / 112

23 Preocupe-se com o visual Contraste mínimo para aprovação: Tamanho da fonte Nível AA Nível AAA < 18pt normal ou < 14pt negrito > 18pt normal ou > 14pt negrito 4.5 : 1 7 : 1 3 : : 1 23 / 112

24 Preocupe-se com o visual Experimentando na prática... carlosrafaelgn.com.br/aula/cores.html * Existem muitos outros sites onde isso também pode ser experimentado / 112

25 Preocupe-se com o visual Fica uma pergunta... Será que todos enxergam as mesmas cores?!?! 25 / 112

26 Preocupe-se com o visual Um causo real / 112

27 Preocupe-se com o visual Existem diversos tipos de daltonismo... Há pessoas que só enxergam preto, branco e tons de cinza Há outras cuja visão não capta corretamente o vermelho, ou o verde, ou o azul / 112

28 Preocupe-se com o visual Exemplos reais de quem se preocupa com isso / 112

29 Preocupe-se com o visual 29 / 112

30 Preocupe-se com o visual 30 / 112

31 Preocupe-se com o visual 31 / 112

32 Preocupe-se com o visual 32 / 112

33 Preocupe-se com o visual Vamos a alguns exemplos práticos... carlosrafaelgn.com.br/aula/cores.html 33 / 112

34 Preocupe-se com o visual Outros fatos e técnicas interessantes... Pessoas com alguns tipos de dislexia não conseguem compreender corretamente textos que utilizam fontes com serifa (dessa forma, por exemplo) Aqui existe bastante informação sobre isso: 34 / 112

35 Preocupe-se com o visual Técnica G19: Nenhum componente deveria piscar mais de três vezes por segundo Técnica G11: Elementos que piscam devem piscar por no máximo cinco segundos, para não distrair Técnica G56: Quando existir um áudio contendo voz, o volume a voz deve ser pelo menos 20dB maior que o volume do som de fundo 35 / 112

36 Resumindo... Branco e preto sempre funciona ;) Verifique a legibilidade dos textos nos elementos Teste as cores antes de liberar o documento ao usuário Se depender de cores, procure utilizar formas ou ícones com desenhos diferenciados 36 / 112

37 Lembra do teclado? Utilizando esse velho amigo na época do swipe, touch e slide 37 / 112

38 Lembra do teclado? Qual a diferença básica entre esses dois documentos... (além do título)?!?! Teclado01A.html Teclado01B.html 38 / 112

39 Lembra do teclado? A diferença é que o da direita (B) confunde o usuário!!!... Quer ver?! 39 / 112

40 Lembra do teclado? Vamos ao código simplificado de ambos: <div> <div>item 1:... </div> <div>item 2:... </div> <div>item 3:... </div> <div>item 4:... </div> </div> Teclado01A.html <div> <div>item 1:... </div> <div style="...">item 4:... </div> <div>item 3:... </div> <div style="...">item 2:... </div> </div> Teclado01B.html 40 / 112

41 Lembra do teclado? O que ocorre... No documento A, a exibição da tela coincide com a ordem dos elementos no código HTML Já no documento B, a exibição da tela foi simulada através de estilos CSS, e a ordem da tela NÃO coincide com a ordem do código HTML 41 / 112

42 Lembra do teclado? Por padrão, o cursor se move de acordo com a ordem dos elementos no código HTML! Mas / 112

43 Lembra do teclado? Novamente, qual a diferença básica entre esses dois documentos... (além do título)?!?! Teclado02A.html Teclado02B.html 43 / 112

44 Lembra do teclado? E, de novo... A diferença é que o da direita (B) confunde o usuário!!!... Quer ver?! 44 / 112

45 Lembra do teclado? Vamos ao código simplificado de ambos: <div> <div>item 1: <input type="text" /></div> <div>item 2: <input type="text" /></div> <div>item 3: <input type="text" /></div> <div>item 4: <input type="text" /></div> </div> Teclado02A.html <div> Teclado02B.html <div>item 1: <input type="text" tabindex="0" /></div> <div>item 2: <input type="text" tabindex="3" /></div> <div>item 3: <input type="text" tabindex="1" /></div> <div>item 4: <input type="text" tabindex="2" /></div> </div> 45 / 112

46 Lembra do teclado? O comportamento padrão do cursor é seguir a ordem dos elementos no código HTML, de cima para baixo......mas o atributo tabindex altera a ordem padrão dos elementos * Elementos com tabindex iguais são percorridos na ordem dos elementos no código HTML 46 / 112

47 Lembra do teclado? Antes que alguém conclua que o atributo tabindex é malvado (ou qualquer outro adjetivo), um exemplo prático para comparar dois cenários, onde os botões na verdade são controles personalizados (mais sobre isso depois...) Teclado03A.html Teclado03B.html 47 / 112

48 Lembra do teclado? No documento A foi possível navegar pelos botões através do teclado, diferente do documento B Quem foi o responsável por isso?... tabindex 48 / 112

49 Lembra do teclado? O atributo tabindex é responsável por permitir que um elemento como div, receba o foco do teclado No caso, todos os botões do documento A possuem tabindex igual à 0, para que a navegação do cursor siga a ordem do código HTML 49 / 112

50 Lembra do teclado? * Fato interessante: Vamos dar uma olhada no atributo outline nos estilos CSS do documento A / 112

51 Lembra do teclado? Como o estilo dos nossos botões foi bem bolado, modéstia à parte :), os botões já possuem uma indicação visual bem marcante quando o botão possui o foco do teclado Assim, pode-se remover o outline utilizando a combinação destruidora do CSS: 0 none transparent 51 / 112

52 Lembra do teclado? Afinal, por que o teclado é tão importante? 52 / 112

53 Lembra do teclado? Pessoas com deficiência visual geralmente navegam pelos documentos sem o auxílio de mouse ou toque, apenas com o auxílio do teclado, leitores de tela, ou outros dispositivos táteis, como telas em braile 53 / 112

54 Lembra do teclado? Além de utilizar o teclado para navegar linearmente pelos documentos, as pessoas fazem uso de atalhos para acelerar a navegação e poder ir mais rapidamente para locais específicos do documento Os atalhos mais comuns são: títulos e links 54 / 112

55 Lembra do teclado? Ia mostrar duas imagens iguais, de novo, mas ficaria muito repetitivo... Vamos logo para o exemplo! :) * Para constar: Teclado03A.html e Teclado03B.html 55 / 112

56 Lembra do teclado? O que é possível tirar disso? Não basta falsificar, ou simular (para usar uma palavra mais branda) a aparência do documento Visualmente, as pessoas até podem entender que determinada área do documento está destacada, mas quando não se pode enxergar / 112

57 Lembra do teclado? Opa! Já ia me esquecendo! Não tem muita relação com o teclado, mas... Alguém reparou no alerta verde que apareceu nos exemplos? Voice switch from en to pt-br Isso é porque os documentos foram devidamente formatados com o atributo lang="pt-br", que indica o idioma do conteúdo 57 / 112

58 Lembra do teclado? O atributo lang é utilizado pelo leitor de telas para ajustar sua voz para o idioma apropriado, ou ao menos emitir um alerta, caso não possua uma voz compatível Ele também é utilizado para auxiliar alguns serviços de tradução automática / 112

59 Resumindo... Mesmo nos tempos de touch é importante fornecer meios para navegar pelo documento através do teclado O teclado beneficia não só as pessoas com necessidades especiais, mas também pessoas que utilizam um sistema todo dia (pense em um sistema com listas, formulários e cadastros sem teclado...) 59 / 112

60 Um mundo de faz de conta Nem tudo é o que parece, pelo menos de acordo com o WAI-ARIA 60 / 112

61 Um mundo de faz de conta Em um passado não tão distante, os únicos controles encontrados em documentos HTML eram os controles disponibilizados pelo padrão HTML 61 / 112

62 Um mundo de faz de conta Graças a uma série de fatores, como: Maior adoção dos padrões Web Maior compatibilidade entre browsers JavaScript com mais funcionalidades e mais robusto Novas funcionalidades disponibilizadas pelos padrões HTML e CSS Cada vez mais, controles personalizados têm tomado conta da Web 62 / 112

63 Um mundo de faz de conta Os controles personalizados fornecem mais controle (desculpe o trocadilho...) sobre sua aparência, além de comportamentos mais complexos Exemplo: carlosrafaelgn.com.br/aula/spriteanim.html 63 / 112

64 Um mundo de faz de conta A criação de controles personalizados consiste basicamente em alterar elementos comuns como div, span, ul, li, dando-lhes aparência e comportamento bem diferentes! 64 / 112

65 Um mundo de faz de conta Contudo... O que é o controle ao lado? 65 / 112

66 Um mundo de faz de conta Pode até parecer uma árvore... Mas na verdade / 112

67 Um mundo de faz de conta É um conjunto de vários elementos div!!! Mas poderiam ser diversos elementos li, ou qualquer outro / 112

68 Um mundo de faz de conta Quem consegue enxergar visualmente o controle, entenderá e deduzirá sobre o que se trata aquele monte de div Agora, para o browser, sempre será um conjunto de elementos div! 68 / 112

69 Um mundo de faz de conta Como diferenciar um div que é um elemento de uma árvore, de um div que é simplesmente um div?!?!?! 69 / 112

70 Um mundo de faz de conta Para solucionar esse dilema, a W3C criou o Web Accessibility Initiative - Accessible Rich Internet Applications, WAI-ARIA O WAI-ARIA é um conjunto de diretrizes para aumentar a acessibilidade de conteúdo Web dinâmico, como por exemplo, controles personalizados via JavaScript 70 / 112

71 Um mundo de faz de conta A documentação completa do WAI-ARIA é bem extensa, e não poderia ser coberta com nosso tempo ;) Por isso, vamos à parte prática: Roles e States/Properties 71 / 112

72 Um mundo de faz de conta Um role, indica o papel que o elemento tem na página, como um ator em uma peça de teatro Os roles servem para guiar as ferramentas assistentes, para que elas possam proporcionar a melhor interação possível para cada situação Vamos ver o exemplo da árvore / 112

73 Um mundo de faz de conta button treeitem tree 73 / 112

74 Um mundo de faz de conta Outros roles comuns: combobox grid listbox menu menuitem tablist checkbox dialog spinbutton progressbar 74 / 112

75 Um mundo de faz de conta Os states e as properties servem, como o nome sugere, para indicar o estado dos controles, e algumas propriedades estendidas 75 / 112

76 Um mundo de faz de conta Algumas properties comuns: aria-describedby: indica o id do elemento que possui a descrição do controle aria-haspopup: indica se o controle possui um popup aria-labelledby: indica o id do elemento que serve de label (descrição breve) para o controle aria-owns: indica o(s) id(s) do(s) elemento(s) que pertencem ao controle 76 / 112

77 Um mundo de faz de conta Algumas properties comuns: aria-readonly: indica se o conteúdo do controle é somente para leitura aria-valuemin: indica o valor mínimo do controle aria-valuemax: indica o valor máximo do controle aria-valuenow: indica o valor atual do controle 77 / 112

78 Um mundo de faz de conta Algumas properties comuns: aria-valuetext: fornece uma representação textual do valor do controle aria-activedescendant: indica o id do elemento atualmente ativo dentro do controle (como o item selecionado em uma lista) 78 / 112

79 Um mundo de faz de conta Alguns states comuns: aria-hidden: indica se o controle está visível ou não aria-disabled: indica se o controle está habilitado ou não aria-checked: indica se o controle está marcado ou não aria-selected: indica se o controle está atualmente selecionado ou não (como o item selecionado em uma lista) 79 / 112

80 Um mundo de faz de conta Alguns states comuns: aria-expanded: indica se o controle está expandido ou não (como um item dentro de uma árvore) aria-pressed: indica se o controle está pressionado ou não 80 / 112

81 Um mundo de faz de conta Ufa!!! :D 81 / 112

82 Um mundo de faz de conta Vamos ver mais exemplos práticos / 112

83 Juntando tudo: um controle acessível Mãos à obra! 83 / 112

84 Juntando tudo: um controle acessível Vamos juntos criar um controle lista acessível, similar ao que tenho em meu site, utilizando alguns dos conceitos demonstrados, como navegação por teclado e os atributos WAI-ARIA :D 84 / 112

85 Juntando tudo: um controle acessível * Todos os atributos aria-xxx e role serão definidos através do método setattribute() dos elementos HTML, conforme mostrado na documentação: 85 / 112

86 Juntando tudo: um controle acessível ** Todo o código será criado utilizando apenas métodos e atributos padronizados pela W3C, e funcionará independentemente do browser, desde que o browser siga corretamente o padrão 86 / 112

87 Juntando tudo: um controle acessível *** Pelo tempo e pela intuito, não utilizaremos uma separação em camadas, como MVC 87 / 112

88 Juntando tudo: um controle acessível **** Chega de * s!!! 88 / 112

89 Juntando tudo: um controle acessível Começando pela parte fácil... function btnadicionar_click() { lista.adicionaitem(document.getelementbyid("txtnome").value); return true; } document.getelementbyid("btnadicionar").addeventlistener("click", btnadicionar_click); function btnremover_click() { lista.removeselecionado(); return true; } document.getelementbyid("btnremover").addeventlistener("click", btnremover_click); 89 / 112

90 Juntando tudo: um controle acessível Agora o começo da classe Lista... function Lista(idElemento, largura, altura) { var itemselecionado = null, temfoco = false, elemento = document.getelementbyid(idelemento); elemento.classname = "lista"; elemento.style.width = largura; elemento.style.height = altura; elemento.setattribute("role", "listbox"); elemento.setattribute("tabindex", "0"); } 90 / 112

91 Juntando tudo: um controle acessível Instanciando a lista... lista = new Lista("divLista", "200px", "200px"); Já podemos testar o comecinho! 91 / 112

92 Juntando tudo: um controle acessível Tratando os eventos da lista... elemento.addeventlistener("focus", function () { temfoco = true; if (itemselecionado) itemselecionado.classname = "item itemfoco"; return true; }); elemento.addeventlistener("blur", function () { temfoco = false; if (itemselecionado) itemselecionado.classname = "item itemsel"; return true; }); 92 / 112

93 Juntando tudo: um controle acessível elemento.addeventlistener("mousedown", function (e) { elemento.focus(); if (e.button === 0) { if (e.target!== elemento && e.target.parentnode === elemento) selecionaitem(e.target); return false; } return true; }); 93 / 112

94 Juntando tudo: um controle acessível elemento.addeventlistener("keydown", function (e) { switch (e.keycode) { case 38: //cima if (itemselecionado) { if (itemselecionado.previoussibling) selecionaitem(itemselecionado.previoussibling); } else { if (elemento.firstchild) selecionaitem(elemento.firstchild); } break; case 40: //baixo if (itemselecionado) { if (itemselecionado.nextsibling) selecionaitem(itemselecionado.nextsibling); } else { if (elemento.firstchild) selecionaitem(elemento.firstchild); } break; default: return true; } if (e.preventdefault) e.preventdefault(); return false; }); 94 / 112

95 Juntando tudo: um controle acessível Dando vida (colocar abaixo das variáveis em Lista)... function selecionaitem(item) { if (itemselecionado) itemselecionado.classname = "item"; itemselecionado = item; if (item) { item.classname = (temfoco? "item itemfoco" : "item itemsel"); elemento.setattribute("aria-activedescendant", item.id); } else { elemento.setattribute("aria-activedescendant", ""); } return true; } 95 / 112

96 Juntando tudo: um controle acessível this.adicionaitem = function (texto) { var item = document.createelement("div"); item.appendchild(document.createtextnode(texto)); item.classname = "item"; item.id = "item" + iditens.tostring(); item.setattribute("role", "option"); item.setattribute("aria-selected", "false"); elemento.appendchild(item); iditens = iditens + 1; return true; }; 96 / 112

97 Juntando tudo: um controle acessível this.removeselecionado = function () { if (itemselecionado) { var anterior = itemselecionado.previoussibling, proximo = itemselecionado.nextsibling, pos = itemselecionado.posicao; elemento.removechild(itemselecionado); itemselecionado = null; if (proximo) selecionaitem(proximo); else if (anterior) selecionaitem(anterior); } return true; }; 97 / 112

98 Juntando tudo: um controle acessível Agora é só testar! :D 98 / 112

99 Juntando tudo: um controle acessível Bem... Esse comportamento não é legal! Eu quero que o item selecionado apareça conforme eu pressiono as teclas do teclado... Então... Vamos às mudanças! 99 / 112

100 Juntando tudo: um controle acessível Dentro de adicionaitem item.setattribute("aria-selected", "false"); item.posicao = elemento.childnodes.length; elemento.appendchild(item); / 112

101 Juntando tudo: um controle acessível Dentro de removeselecionado itemselecionado = null; while (pos < elemento.childnodes.length) { } elemento.childnodes[pos].posicao = pos; pos = pos + 1; if (proximo) / 112

102 Juntando tudo: um controle acessível Por fim, dentro de selecionaitem elemento.setattribute("aria-activedescendant", item.id); var itemtopo = item.posicao * 28, itemtoporelativo = itemtopo - elemento.scrolltop; if (itemtoporelativo < 0) elemento.scrolltop = itemtopo; else if (itemtoporelativo + 28 >= elemento.clientheight) elemento.scrolltop = itemtopo - elemento.clientheight + 28; } else { / 112

103 Juntando tudo: um controle acessível Pronto!! 103 / 112

104 Juntando tudo: um controle acessível Bem, na verdade... Ainda tem duas coisinhas faltando... Se for para funcionar no IE, temos um probleminha / 112

105 Juntando tudo: um controle acessível Criando uma nova variável no começo do código IE = (navigator.useragent.indexof("msie") >= 0); Modificando o tratamento de mousedown... selecionaitem(e.target); if (IE) e.preventdefault(); return false; 105 / 112

106 Bons links e referências Resumo de todos os links mostrados anteriormente, e onde ir depois daqui / 112

107 Bons links e referências W3C Web Content Accessibility Guidelines 2.0 Techniques for WCAG / 112

108 Bons links e referências Understanding WCAG 2.0 Contrast (Minimum) WCAG /visual-audio-contrast-contrast.html Contrast (Enhanced) 108 / 112

109 Bons links e referências Web Accessibility Tools Consortium Minha página de aula sobre cores carlosrafaelgn.com.br/aula/cores.html Typefaces for Dyslexia 109 / 112

110 Bons links e referências Accessible Rich Internet Applications (WAI-ARIA) 1.0 WAI-ARIA - The Roles Model WAI-ARIA - Supported States and Properties 110 / 112

111 Bons links e referências ARIA Techniques for WCAG 2.0 WARAU - Websites Atendendo a Requisitos de Acessibilidade e Usabilidade (UNICAMP) warau.nied.unicamp.br Mozilla Developer Network developer.mozilla.org/en-us/docs 111 / 112

112 Ficamos por aqui! 112 / 112

Accessibility in Public Services. Good practices in the construction of websites

Accessibility in Public Services. Good practices in the construction of websites CEGER Centro de Gestão da Rede Informática do Governo Accessibility in Public Services Good practices in the construction of websites Coruña Seminar Accessibility Accessibility is a general term used to

Leia mais

O NOVO ORKUT E AS NORMAS WCAG THE NEW ORKUT ACCORDING WEB CONTENT ACESSIBILITY GUIDELINE (WCAG 2.0) Resumo

O NOVO ORKUT E AS NORMAS WCAG THE NEW ORKUT ACCORDING WEB CONTENT ACESSIBILITY GUIDELINE (WCAG 2.0) Resumo O NOVO ORKUT E AS NORMAS WCAG THE NEW ORKUT ACCORDING WEB CONTENT ACESSIBILITY GUIDELINE (WCAG 2.0) Diogo Moreira Bispo Marcos Augusto Francisco Borges Resumo Tendo o Orkut grande uso no Brasil, torna-se

Leia mais

Fazendo a Web falar: HTML5, WAI-ARIA e NVDA. Reinaldo Ferraz W3C Brasil

Fazendo a Web falar: HTML5, WAI-ARIA e NVDA. Reinaldo Ferraz W3C Brasil Fazendo a Web falar: HTML5, WAI-ARIA e NVDA Reinaldo Ferraz W3C Brasil Em breve Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão Deficiência auditiva Deficiência motora Estatísticas

Leia mais

Mitos da Acessibilidade Web

Mitos da Acessibilidade Web SAPO Codebits 2008 Magda Joana Silva magdajoanasilva@gmail.com Acessibilidade Web igualdade de acesso a Web sites a pessoas com limitações Acessibilidade Web igualdade de acesso a Web sites a pessoas com

Leia mais

ENGENHARIA DE USABILIDADE Unidade V Acessibilidade à Web. Luiz Leão luizleao@gmail.com http://www.luizleao.com

ENGENHARIA DE USABILIDADE Unidade V Acessibilidade à Web. Luiz Leão luizleao@gmail.com http://www.luizleao.com Luiz Leão luizleao@gmail.com http://www.luizleao.com Conteúdo Programático Conceitos e Importância Projeto e desenvolvimento de Web acessível Acessibilidade É o processo e as técnicas usadas para criar

Leia mais

Monday, January 23, 12. Introdução sobre Acessibilidade na web

Monday, January 23, 12. Introdução sobre Acessibilidade na web Introdução sobre Acessibilidade na web Acessibilidade na web é o consumo da informação por qualquer pessoa por qualquer tipo de meio de acesso. Para que serve a web? A web serve para compartilhar informação.

Leia mais

Deficiências. Deficiência Física Deficiência Auditiva Deficiência Visual Deficiência Mental Deficiência Múltipla. Tem dificuldade para:

Deficiências. Deficiência Física Deficiência Auditiva Deficiência Visual Deficiência Mental Deficiência Múltipla. Tem dificuldade para: Deficiências Deficiência Física Deficiência Auditiva Deficiência Visual Deficiência Mental Deficiência Múltipla Tem dificuldade para: ver a tela usar o mouse usar o teclado ler um texto ouvir um som navegar

Leia mais

TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar os principais problemas de acessibilidade na Internet. Apresentar as principais deficiências e as tecnologias de apoio.

Leia mais

Acessibilidade no SIEP (Sistema de Informações da Educação Profissional e Tecnológica) Módulo de Acessibilidade Virtual CEFET Bento Gonçalves RS Maio 2008 ACESSIBILIDADE À WEB De acordo com Cifuentes (2000),

Leia mais

WAI-ARIA, UMA APROXIMAÇÃO

WAI-ARIA, UMA APROXIMAÇÃO WAI-ARIA, UMA APROXIMAÇÃO Fernández Rivera, Javier Tradução: Leondeniz Candido de Freitas Versão em espanhol disponível em http://www.nosolousabilidad.com/articulos/wai_aria.htm Resumo: introdução ao ARIA

Leia mais

FORMULÁRIOS ACESSÍVEIS

FORMULÁRIOS ACESSÍVEIS Ministério da Educação Secretaria de Educação Profissional e Tecnológica IFRS Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul NAV Núcleo de Acessibilidade Virtual FORMULÁRIOS ACESSÍVEIS

Leia mais

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente

Leia mais

Voice Guidance. Guia do administrador

Voice Guidance. Guia do administrador Voice Guidance Guia do administrador Junho de 2015 www.lexmark.com Conteúdo 2 Conteúdo Visão geral... 3 Modelos de impressoras, funções e aplicativos suportados...3 Configuração do Voice Guidance... 4

Leia mais

Acessibilidade na Web

Acessibilidade na Web Acessibilidade na Web Departamento de Computação - UFS Tópicos Especiais em Sistemas de Informação Lucas Augusto Carvalho lucasamcc@dcomp.ufs.br Prof. Rogério Vídeo Custo ou Benefício? http://acessodigital.net/video.html

Leia mais

Acessibilidade na web O caminho das pedras para construir sítios acessíveis. SECOP 2011 2 de setembro de 2011 Reinaldo Ferraz W3C.

Acessibilidade na web O caminho das pedras para construir sítios acessíveis. SECOP 2011 2 de setembro de 2011 Reinaldo Ferraz W3C. Acessibilidade na web O caminho das pedras para construir sítios acessíveis SECOP 2011 2 de setembro de 2011 Reinaldo Ferraz W3C.br Um pouco do W3C É um consórcio internacional, criado em 1994 por Tim

Leia mais

Acessibilidade Introdução. M. Cecília C. Baranauskas Instituto de Computação

Acessibilidade Introdução. M. Cecília C. Baranauskas Instituto de Computação Acessibilidade Introdução M. Cecília C. Baranauskas Instituto de Computação Acessibilidade - Demo Esta parte é baseada no video em http://www.doit.wisc.edu/accessibility/video Liste os principais problemas

Leia mais

Acessibilidade na web

Acessibilidade na web Acessibilidade na web Front In Porto Alegre 18 de Agosto de 2012 Reinaldo Ferraz W3C.br @reinaldoferraz @w3cbrasil Um pouco do W3C Um pouco do W3C O W3C no Brasil conferenciaweb.w3c.br http://premio.w3c.br/

Leia mais

Configurações do Windows para Leitores de Tela

Configurações do Windows para Leitores de Tela MÓDULO DE ACESSIBILIDADE VIRTUAL - CEFET BG SIEP (SISTEMA DE INFORMAÇÃO DA EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA) Configurações do Windows para Leitores de Tela Desenvolvido por Celio Marcos Dal Pizzol e

Leia mais

Copyright 2013 by Desire2Learn Incorporated. Desire2Learn e seus logotipos relacionados são marcas registradas da Desire2Learn Incorporated.

Copyright 2013 by Desire2Learn Incorporated. Desire2Learn e seus logotipos relacionados são marcas registradas da Desire2Learn Incorporated. Lista de Verificação WCAG 2.0 (Web Content Accessibility Guidelines, Diretrizes de Acessibilidade do Conteúdo da Web) do eportfolio da Desire2Learn 13 de março de 2013 Conteúdo Introdução Recursos de acessibilidade

Leia mais

DICAS PARA DESENVOLVER SITE ACESSÍVEL

DICAS PARA DESENVOLVER SITE ACESSÍVEL DICAS PARA DESENVOLVER SITE ACESSÍVEL Este arquivo contém dicas para o desenvolvimento de uma página acessível e de acordo com as normas W3C (World Wide Web). Para uma boa compreensão destas dicas é necessário

Leia mais

Departamento de Governo Eletrônico Secretaria de Logística e Tecnologia da Informação Ministério do Planejamento, Orçamento e Gestão.

Departamento de Governo Eletrônico Secretaria de Logística e Tecnologia da Informação Ministério do Planejamento, Orçamento e Gestão. 215 Departamento de Governo Eletrônico Secretaria de Logística e Tecnologia da Informação Ministério do Planejamento, Orçamento e Gestão. www.governoeletronico.gov.br Recomendações de Acessibilidade para

Leia mais

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Avaliação Passos para Site Acessível -Seguir padrões Web; -Seguir as diretrizes e recomendações de acessibilidade; -Realizar avaliação de acessibilidade.

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

Introdução à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

Leia mais

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

GUIA PARA PRODUÇÃO DE CONTEÚDOS DIGITAIS ACESSÍVEIS

GUIA PARA PRODUÇÃO DE CONTEÚDOS DIGITAIS ACESSÍVEIS GUIA PARA PRODUÇÃO DE CONTEÚDOS DIGITAIS ACESSÍVEIS Serviços de Biblioteca, Informação Documental e Museologia da Universidade de Aveiro Breve tutorial com um conjunto de orientações técnicas para a produção

Leia mais

Iniciando no Visual Basic.NET

Iniciando no Visual Basic.NET Iniciando no Visual Basic.NET A Microsoft disponibiliza duas versões das suas ferramentas de desenvolvimento, a versão profissional, que integra, em um único ambiente, todas as ferramentas de desenvolvimento

Leia mais

Afinal o que é HTML?

Afinal o que é HTML? Aluno : Jakson Nunes Tavares Gestão e tecnologia da informacão Afinal o que é HTML? HTML é a sigla de HyperText Markup Language, expressão inglesa que significa "Linguagem de Marcação de Hipertexto". Consiste

Leia mais

Humano-Computador (IHC)

Humano-Computador (IHC) 1 INF1403 Introdução a Interação Humano-Computador (IHC) Turma 3WA Professora: Clarisse Sieckenius de Souza Acessibilidade: Uma questão de lei e direitos humanos 15/Mar/2010 Stephen Hawking um dos maiores

Leia mais

HATEMILE: A biblioteca para gerar páginas web mais acessíveis

HATEMILE: A biblioteca para gerar páginas web mais acessíveis HATEMILE: A biblioteca para gerar páginas web mais acessíveis Carlson Santana Cruz, Carlos A. Estombelo-Montesco Departamento de Computação (DCOMP) Universidade Federal de Sergipe (UFS) São Cristóvão,

Leia mais

TAW Tópicos de Ambiente Web

TAW Tópicos de Ambiente Web TAW Tópicos de Ambiente Web Teste rveras@unip.br Aula 11 Agenda Usabilidade Compatibilidade Validação Resolução de tela Velocidade de carregação Acessibilidade Testes Nesta etapa do projeto do web site

Leia mais

Accessibility. Versão: 10.3.0. Guia do usuário

Accessibility. Versão: 10.3.0. Guia do usuário Accessibility Versão: 10.3.0 Guia do usuário Publicado: 16/12/2014 SWD-20141216151714850 Conteúdo... 4 Novidades na acessibilidade... 4 BlackBerry Screen Reader... 5 Personalizar as configurações de acessibilidade...15

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Customização Acionar modo debug 3 Propriedades Básicas 10 Arquivos de Customização 15 2 Customização Intermediário Com a definição do posicionamento

Leia mais

Design para internet. Resolução. - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim.

Design para internet. Resolução. - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim. Resolução - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim. Resolução Exemplo de imagem com diferentes resoluções de Pontos/Pixels por polegada". Em uma imagem digital quanto mais

Leia mais

O que torna a Web interessante?? Web Design: Visão Geral e Diretrizes. O que torna a Web interessante?? Qual o desafio?? Usuários detestam...

O que torna a Web interessante?? Web Design: Visão Geral e Diretrizes. O que torna a Web interessante?? Qual o desafio?? Usuários detestam... O que torna a Web interessante?? Web Design: Visão Geral e Diretrizes??? Interação Usuário-Computador (SCE-224) Prof. Rudinei Goularte O que torna a Web interessante?? Informação não-linear Textos + Gráficos

Leia mais

Adaptação de materiais digitais. Manuela Francisco manuela.amado@gmail.com

Adaptação de materiais digitais. Manuela Francisco manuela.amado@gmail.com Adaptação de materiais digitais Manuela Francisco manuela.amado@gmail.com Plano da sessão Tópicos Duração Documentos acessíveis: porquê e para quem. Diretrizes de acessibilidade Navegabilidade, legibilidade

Leia mais

CSS. Oficina de CSS Aula 10. Cascading Style Sheets. Cascading Style Sheets Roteiro. Cascading Style Sheets. Cascading Style Sheets W3C

CSS. Oficina de CSS Aula 10. Cascading Style Sheets. Cascading Style Sheets Roteiro. Cascading Style Sheets. Cascading Style Sheets W3C Roteiro Oficina de Aula 10 s Selos de conformidade Prof. Vinícius Costa de Souza www.inf inf.unisinos..unisinos.br/~vinicius outubro de 2006 W3C São um conjunto de normas, diretrizes, recomendações, notas

Leia mais

Acessibilidade, HTML5, WAI/ARIA. FrontIn Curitiba Curitiba PR 23 de junho de 2012 Reinaldo Ferraz W3C.br @reinaldoferraz

Acessibilidade, HTML5, WAI/ARIA. FrontIn Curitiba Curitiba PR 23 de junho de 2012 Reinaldo Ferraz W3C.br @reinaldoferraz Acessibilidade, HTML5, WAI/ARIA FrontIn Curitiba Curitiba PR 23 de junho de 2012 Reinaldo Ferraz W3C.br @reinaldoferraz Um pouco do W3C É um consórcio internacional, criado em 1994 por Tim Berners- Lee

Leia mais

Projeto Inclusivo de Sítios: Por quê? Para quem?

Projeto Inclusivo de Sítios: Por quê? Para quem? 1 Projeto Inclusivo de Sítios: Por quê? Para quem? 05/2008 Ana Isabel Bruzzi Bezerra Paraguay Faculdade de Saúde Pública / USP anaparaguay@gmail.com Miriam Hitomi Simofusa SERPRO - miriamhs@gmail.com Augusto

Leia mais

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

Acessibilidade Web. Ivo Gomes

Acessibilidade Web. Ivo Gomes Acessibilidade Web Ivo Gomes 1 O que é a Acessibilidade Web? Permi'r que todos os u'lizadores tenham acesso ao site. Independentemente de terem alguma necessidade especial. Independentemente de terem algum

Leia mais

1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO

Leia mais

Dando um passeio no ASP.NET

Dando um passeio no ASP.NET Dando um passeio no ASP.NET Por Mauro Sant Anna (mas_mauro@hotmail.com). Mauro é um MSDN Regional Director, consultor e instrutor. O principal objetivo da arquitetura.net é permitir ao usuário o fácil

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

Siep / Renapi Campus Bento Gonçalves / RS Jucélia Almeida DESENVOLVENDO UM SITE ACESSÍVEL

Siep / Renapi Campus Bento Gonçalves / RS Jucélia Almeida DESENVOLVENDO UM SITE ACESSÍVEL Siep / Renapi Campus Bento Gonçalves / RS Jucélia Almeida DESENVOLVENDO UM SITE ACESSÍVEL Web para todos De acordo com Cifuentes(2000), Caplan(2002) e Dias (2003), entende-se por acessibilidade à rede

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft OneNote 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Alterne entre a entrada por toque

Leia mais

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral Apostila retirada de http://www.ibestmasters.com.br DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral A tecnologia DHTML (Dynamic HTML) foi apresentada inicialmente como um conjunto

Leia mais

Universidade Estadual de Maringá Centro de Tecnologia Departamento de Informática Especialização em Desenvolvimento de Sistemas para Web

Universidade Estadual de Maringá Centro de Tecnologia Departamento de Informática Especialização em Desenvolvimento de Sistemas para Web Universidade Estadual de Maringá Centro de Tecnologia Departamento de Informática Especialização em Desenvolvimento de Sistemas para Web Acessibilidade em sites de bibliotecas universitárias públicas do

Leia mais

Buscando Acessibilidade em Ambientes de EAD. Andréa Poletto Sonza e Daniela Menegotto CEFET Bento Gonçalves RS Junho 2008

Buscando Acessibilidade em Ambientes de EAD. Andréa Poletto Sonza e Daniela Menegotto CEFET Bento Gonçalves RS Junho 2008 Buscando Acessibilidade em Ambientes de EAD Andréa Poletto Sonza e Daniela Menegotto CEFET Bento Gonçalves RS Junho 2008 Tecnologia Assistiva CONCEITO: conjunto de artefatos disponibilizados às PNEs, que

Leia mais

MANUAL DO NVDA Novembro de 2013

MANUAL DO NVDA Novembro de 2013 MANUAL DO NVDA Novembro de 2013 PROJETO DE ACESSIBILIDADE VIRTUAL Núcleo IFRS Manual do NVDA Sumário O que são leitores de Tela?... 3 O NVDA - Non Visual Desktop Access... 3 Procedimentos para Download

Leia mais

PROCEDIMENTO Cadastro de Produtos. Café com Arte Móveis

PROCEDIMENTO Cadastro de Produtos. Café com Arte Móveis Cadastro de Produtos Café com Arte Móveis Valinhos, 22 de Abril de 2015 Versão: 1.0 Página 1 de 28 Alliati Soluções em TI. Controle de Alteração do Procedimento Versão Observações Responsável Data 1.0

Leia mais

@media screen and (grande-variedade-dispositivos){ usuários{ sites { ; } Google {

@media screen and (grande-variedade-dispositivos){ usuários{ sites { ; } Google { .pauta{ Introdução; Web Design Responsivo; Princípios do Design Responsivo; Trabalhos Correlatos; HTML5, CSS3, JavaScript; Media Queries; Mobile First; Imagens e Mídias Flexíveis; Mídias Flexíveis; Acessibilidade

Leia mais

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE. Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução Principais características Página dentro de página Transições

Leia mais

HTML5 E SUAS NOVIDADES

HTML5 E SUAS NOVIDADES HTML5 E SUAS NOVIDADES Gabrie Dalla Porta 1, Julio César Pereira 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil gabrieldallap@gmail.com, juliocesarp@gmail.com Resumo: Este artigo apresenta uma

Leia mais

Estrutura e estética: Organização, layout, cores e tipos

Estrutura e estética: Organização, layout, cores e tipos Design Web Estrutura e estética: Organiação, layout, cores e tipos Apresentação: Estrutura e Estética Organiação Navegação Layout Cores e Tipografia! " Representação e Apresentação Representação Utiliar

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

Análise Comparativa dos Recursos e Diferenças das Tecnologias de Programação HTML5 e HTML4

Análise Comparativa dos Recursos e Diferenças das Tecnologias de Programação HTML5 e HTML4 Análise Comparativa dos Recursos e Diferenças das Tecnologias de Programação HTML5 e HTML4 Guilherme Miranda Martins 1, Késsia Rita da Costa Marchi 1 1 Universidade paranaense (Unipar) Paranavaí PR Brasil

Leia mais

IRISPen Air 7. Guia Rápido. (Windows & Mac OS X)

IRISPen Air 7. Guia Rápido. (Windows & Mac OS X) IRISPen Air 7 Guia Rápido (Windows & Mac OS X) Este Guia Rápido do Usuário ajuda você a começar a usar o IRISPen Air TM 7. Leia este guia antes de utilizar o scanner e o respectivo software.todas as informações

Leia mais

DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza

DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO Profº Ritielle Souza Web design responsivo Mas, o que é Web Design Responsivo? O Wiki diz o seguinte (tradução livre): Web Design Responsivo (RWD), essencialmente

Leia mais

PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA. Sumário

PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA. Sumário PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA Sumário O que são leitores de Tela?... 1 O NVDA - Non Visual Desktop Access... 1 Procedimentos para Download e Instalação do NVDA... 2 Iniciando

Leia mais

DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5 E CSS3

DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5 E CSS3 DESENVOLVIMENTO WEB DENTRO DOS PARADIGMAS DO HTML5 E CSS3 Eduardo Laguna Rubai, Tiago Piperno Bonetti Universidade Paranaense (Unipar) Paranavaí PR- Brasil eduardorubay@gmail.com, bonetti@unipar.br Resumo.

Leia mais

Tutorial - Programando com o MIOLO

Tutorial - Programando com o MIOLO Tutorial - Programando com o MIOLO Conceitos Básicos Antes de iniciar a programação com o Miolo é fundamental compreender alguns conceitos básicos: - Uma aplicação no Miolo é constituída de um ou mais

Leia mais

MANUAL TECLADO ADAPTADO IntelliKeys USB

MANUAL TECLADO ADAPTADO IntelliKeys USB NAPNE Núcleo de Atendimento às Pessoas com Necessidades Especiais SIEP Sistema de Informações da Educação Profissional e Tecnológica MANUAL TECLADO ADAPTADO IntelliKeys USB Fonte: User s Guide (Guia do

Leia mais

CAPÍTULO IV Sistema Operacional Microsoft Windows XP

CAPÍTULO IV Sistema Operacional Microsoft Windows XP CAPÍTULO IV Sistema Operacional Microsoft Windows XP Sistemas Operacionais Sistemas Operacionais são programas que como o próprio nome diz tem a função de colocar o computador em operação. O sistema Operacional

Leia mais

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.). HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a

Leia mais

MÓDULO MULTIMÉDIA PROFESSOR: RICARDO RODRIGUES. MAIL: rprodrigues@escs.ipl.pt esganarel@gmail.com. URL: http://esganarel.home.sapo.

MÓDULO MULTIMÉDIA PROFESSOR: RICARDO RODRIGUES. MAIL: rprodrigues@escs.ipl.pt esganarel@gmail.com. URL: http://esganarel.home.sapo. MÓDULO MULTIMÉDIA PROFESSOR: RICARDO RODRIGUES MAIL: rprodrigues@escs.ipl.pt esganarel@gmail.com URL: http://esganarel.home.sapo.pt GABINETE: 1G1 - A HORA DE ATENDIMENTO: SEG. E QUA. DAS 11H / 12H30 (MARCAÇÃO

Leia mais

Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript

Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação Universidade Federal do Espírito Santo CCA UFES JavaScript Desenvolvimento de Sistemas para WEB Site:

Leia mais

Comece aqui. Interação com o BrightLink

Comece aqui. Interação com o BrightLink Interação com o BrightLink As canetas interativas BrightLink transformam qualquer parede ou mesa em uma área interativa, com ou sem um Com um computador, você pode usar o Easy Interactive Tools (duas canetas).

Leia mais

MICROSOFT EXCEL - AULA NÚMERO 05

MICROSOFT EXCEL - AULA NÚMERO 05 Modificando seus Gráficos MICROSOFT EXCEL - AULA NÚMERO 05 Quando você coloca seus dados num gráfico, nem sempre ele fica como você imaginou. Você pode mudar o estilo de seu gráfico a qualquer momento.

Leia mais

PADRÕES PARA O DESENVOLVIMENTO NA WEB

PADRÕES PARA O DESENVOLVIMENTO NA WEB PADRÕES PARA O DESENVOLVIMENTO NA WEB Ederson dos Santos Cordeiro de Oliveira 1,Tiago Bonetti Piperno 1, Ricardo Germano 1 1 Universidade Paranaense (UNIPAR) Paranavaí PR- Brasil edersonlikers@gmail.com,

Leia mais

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Programação para Internet Rica 1 Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Objetivo: Capacitar o aluno para o trabalho com o framework JQuery. INTRODUÇÃO JQuery é uma biblioteca

Leia mais

QUEM SOU? ( IFPB ) Formado em Sistemas para Internet. Analista de Sistemas, Dynavideo. Pesquisador, NAV - IFPB

QUEM SOU? ( IFPB ) Formado em Sistemas para Internet. Analista de Sistemas, Dynavideo. Pesquisador, NAV - IFPB QUEM SOU? ( IFPB ) Formado em Sistemas para Internet Analista de Sistemas, Dynavideo Projeto Intercâmbio para Conteúdo de TV Pública Pesquisador, NAV - IFPB Produção e acessibilização de aplicações educacionais.

Leia mais

- Esse ícone indica que o USB Phone GiConnect está conectado e funcionando corretamente, pronto para o uso.

- Esse ícone indica que o USB Phone GiConnect está conectado e funcionando corretamente, pronto para o uso. Internet http://www.qiconn.com/showlistitem.asp?dynamiccontentid=848 Guia do Usuário Quando o aplicativo Gateway GiConnect estiver rodando, um dos ícones abaixo irão aparecer na bandeja do sistema, normalmente

Leia mais

Microsoft Visual Studio Express 2012 for Windows Desktop

Microsoft Visual Studio Express 2012 for Windows Desktop Microsoft Visual Studio Express 2012 for Windows Desktop Apresentação da ferramenta Professor: Danilo Giacobo Página pessoal: www.danilogiacobo.eti.br E-mail: danilogiacobo@gmail.com 1 Introdução Visual

Leia mais

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique. Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft OneNote 2013 apresenta uma aparência diferente das versões anteriores; desse modo, criamos este guia para ajudá-lo a minimizar a curva de aprendizado. Alternar entre o

Leia mais

Centro Federal de Educação Tecnológica da Bahia Curso Excel Avançado Índice

Centro Federal de Educação Tecnológica da Bahia Curso Excel Avançado Índice Índice Apresentação...2 Barra de Título...2 Barra de Menus...2 Barra de Ferramentas Padrão...2 Barra de Ferramentas de Formatação...3 Barra de Fórmulas e Caixa de Nomes...3 Criando um atalho de teclado

Leia mais

Centro Universitário do Triângulo Introdução ao Ambiente Delphi

Centro Universitário do Triângulo Introdução ao Ambiente Delphi Centro Universitário do Triângulo Introdução ao Ambiente Delphi A figura abaixo mostra a tela inicial do Delphi 7 e nos dá uma visão geral de seu ambiente de desenvolvimento, composto de múltiplas janelas

Leia mais

Interface BVS-Site. Arquiteturta e Personalização da Interface

Interface BVS-Site. Arquiteturta e Personalização da Interface Interface BVS-Site Arquiteturta e Personalização da Interface Julio Takayama takayama@bireme.ops-oms.org Desenho Gráfico e Interfaces DGI-GA BIREME/PAHO/WHO Tópicos Arquitetura da BVS Modelo de Interfaces

Leia mais

Sumário. Capítulo 2 Iniciando o TR4... 8 2.1 Como efetuar o login... 8

Sumário. Capítulo 2 Iniciando o TR4... 8 2.1 Como efetuar o login... 8 1 Sumário Capítulo 1 Introdução ao TR4... 4 1.1 Requisitos Mínimos... 4 1.2 Layout do Sistema... 5 1.3 Legenda... 5 1.4 Visão geral das funcionalidades... 6 1.4.1 O Menu Administração... 6 1.4.2 O Menu

Leia mais

Acessibilidade na web e HTML5 Desenvolvendo uma web para todos. Frontin BH 13 de agosto de 2011 Reinaldo Ferraz W3C.br

Acessibilidade na web e HTML5 Desenvolvendo uma web para todos. Frontin BH 13 de agosto de 2011 Reinaldo Ferraz W3C.br e HTML5 Desenvolvendo uma web para todos Frontin BH 13 de agosto de 2011 Reinaldo Ferraz W3C.br Um pouco do W3C É um consórcio internacional, criado em 1994 por Tim Berners- Lee com organizações filiadas,

Leia mais

Acessibilidade. Profa. Renata Pontin de Mattos Fortes

Acessibilidade. Profa. Renata Pontin de Mattos Fortes Acessibilidade Profa. Renata Pontin de Mattos Fortes 1 Acessibilidade 2 Roteiro Acessibilidade Acessibilidade na Informática Inclusão Digital Design da Interação e Acessibilidade 3 Acessibilidade Definição

Leia mais

Acessibilidade na web O caminho das pedras para construir sítios acessíveis. Belo Horizonte MG 10 de abril de 2012 Reinaldo Ferraz W3C.

Acessibilidade na web O caminho das pedras para construir sítios acessíveis. Belo Horizonte MG 10 de abril de 2012 Reinaldo Ferraz W3C. Acessibilidade na web O caminho das pedras para construir sítios acessíveis Belo Horizonte MG 10 de abril de 2012 Reinaldo Ferraz W3C.br Um pouco do W3C É um consórcio internacional, criado em 1994 por

Leia mais

Tornando sites mais fáceis para visualização 16

Tornando sites mais fáceis para visualização 16 Primeiros passos com o essential Accessibility 3 O que é essential Accessibility? essential Accessibility : uma visão geral Sobre este manual Como instalar o essential Accessibility Requisitos do sistema

Leia mais

ESTUDO DA ADERÊNCIA AOS PADRÕES WEB DOS 26 SÍTIOS DOS MINISTÉRIOS PÚBLICOS ESTADUAIS

ESTUDO DA ADERÊNCIA AOS PADRÕES WEB DOS 26 SÍTIOS DOS MINISTÉRIOS PÚBLICOS ESTADUAIS ESTUDO DA ADERÊNCIA AOS PADRÕES WEB DOS 26 SÍTIOS DOS MINISTÉRIOS PÚBLICOS ESTADUAIS STUDY OF ADHERENCE TO STANDARDS OF WEB SITES OF 26 STATE GOVERNMENT MINISTRIES Alexandre Galvão Leite 1 (1) Pós-Graduando,

Leia mais

Acessibilidade no Projeto de Aplicações Web

Acessibilidade no Projeto de Aplicações Web Capítulo 7 Acessibilidade no Projeto de Aplicações Web Renata Pontin de Mattos Fortes, Silvana Maria Affonso de Lara e André Pimenta Freire, ICMC-USP Luciano Tadeu Esteves Pansanato, CEFET-PR Abstract

Leia mais

A PÁGINA DISCIPLINAR DE MATEMÁTICA DO PORTAL DIA A DIA EDUCAÇÃO

A PÁGINA DISCIPLINAR DE MATEMÁTICA DO PORTAL DIA A DIA EDUCAÇÃO A PÁGINA DISCIPLINAR DE MATEMÁTICA DO PORTAL DIA A DIA EDUCAÇÃO Resumo: Dolores Follador Secretaria de Estado da Educação do Paraná e Faculdades Integradas do Brasil - Unibrasil doloresfollador@gmail.com

Leia mais

Criação de Web Sites I

Criação de Web Sites I WebDesigner / IBPINET Criação de Web Sites I Anexos Avaliação e Projetos Publicação do site Anexos página 1 1. Avaliação e Projetos 1.1. Questões As questões tratam de assuntos discutidos em sala de aula

Leia mais

Este tutorial está publicado originalmente em http://www.baboo.com.br/absolutenm/anmviewer.asp?a=31555&z=300

Este tutorial está publicado originalmente em http://www.baboo.com.br/absolutenm/anmviewer.asp?a=31555&z=300 FeedDemon: Todas as vantagens do RSS a seu alcance! A tecnologia RSS, usada por vários serviços da Internet como uma forma de enviar conteúdos para os usuários facilmente, é suportada e implementada por

Leia mais

GASweb - Usabilidade Parte 1-3

GASweb - Usabilidade Parte 1-3 GASweb - Usabilidade Parte 1-3 Nível Básico Por: Lucas Bruno O GASweb - Application Generator é um produto que oferece aos seus usuários o grande aumento de produtividade. Entretanto, assim como as demais

Leia mais

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda PROGRAMAÇÃO PARA INTERNET Introdução à AJAX Fonte: Raul Paradeda INTRODUÇÃO Para entender o que é o AJAX é necessário ter o prévio conhecimento de: HTML / XHTML; Javascript; CSS; XML. INTRODUÇÃO Ao pesquisar

Leia mais

Explorando a Interface Flash

Explorando a Interface Flash CAPÍTULO UM Explorando a Interface Flash Se essa é sua primeira vez utilizando o Flash, pode levar algum tempo até que você se acostume com a abordagem idiossincrática do programa em relação aos desenhos

Leia mais

Acessibilidade em Sites e Sistemas Web: estudo das tecnologias acessivas e diretrizes de acessibilidade web

Acessibilidade em Sites e Sistemas Web: estudo das tecnologias acessivas e diretrizes de acessibilidade web Acessibilidade em Sites e Sistemas Web: estudo das tecnologias acessivas e diretrizes de acessibilidade web Victor Adriel de Jesus Oliveira, Vânia Cordeiro da Silva Ciência da Computação Universidade Estadual

Leia mais

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about.

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about. PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução Compatibilidade Principais características

Leia mais

Teste de acessibilidade em um editor de texto web

Teste de acessibilidade em um editor de texto web Teste de acessibilidade em um editor de texto web Thiago Eduardo Viganico 1, Daniela Bagatini 1 1 Departamento de Informática Universidade de Santa Cruz do Sul (UNISC) Av. Independência, 2293 96815-900

Leia mais

Sistema operacional Windows 7, Windows Live Mail e Adobe Reader. Sistemas operacionais em concursos públicos

Sistema operacional Windows 7, Windows Live Mail e Adobe Reader. Sistemas operacionais em concursos públicos Sistema operacional Windows 7, Windows Live Mail e Adobe Reader Sistemas operacionais em concursos públicos Antes de tudo é importante relembrarmos que o sistema operacional é um tipo de software com a

Leia mais