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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Programando em PHP. Conceitos Básicos

Programando em PHP. Conceitos Básicos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web

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

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

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

VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo

VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo Introdução Recursos de acessibilidade principais Navegação usando

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

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 24/08/2011 No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

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

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

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

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

Introdução... 1. Instalação... 2

Introdução... 1. Instalação... 2 ONTE DO Introdução... 1 O que é IPP?... 1 Qual é a função de um software Samsung IPP?... 1 Instalação... 2 Requisitos do sistema... 2 Instalar o software Samsung IPP... 2 Desinstalar o software Samsung

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

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

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

HELP Fornecedores ATENÇÃO!!! IMPORTANTE: o acesso ao SIGA só poderá ser feito através do navegador Internet Explorer, versões 6 a 9.

HELP Fornecedores ATENÇÃO!!! IMPORTANTE: o acesso ao SIGA só poderá ser feito através do navegador Internet Explorer, versões 6 a 9. HELP Fornecedores IMPORTANTE: o acesso ao SIGA só poderá ser feito através do navegador Internet Explorer, versões 6 a 9. ATENÇÃO!!! Se a versão do seu navegador Internet Explorer for superior a 9, siga

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

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

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

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

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

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

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

Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO

Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO Arte X Engenharia Desenvolver Sistema Web é arte? A Web oferece espaço para arte...... mas os usuários também desejam

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

AULA APLICAÇÕES PARA WEB SESSÕES E LOGIN E SENHA

AULA APLICAÇÕES PARA WEB SESSÕES E LOGIN E SENHA Sumário Construção de sistema Administrativo... 1 Sistema de Login... 2 SQL INJECTION... 2 Técnicas para Evitar Ataques... 2 Formulário de Login e Senha fará parte do DEFAULT... 5 LOGAR... 5 boas... 6

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

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

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

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

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

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

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

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

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

iconnect 3.3 Atualizações Pesquisa Dinâmica

iconnect 3.3 Atualizações Pesquisa Dinâmica iconnect 3.3 Atualizações Pesquisa Dinâmica Conteúdo iconnect 3.3 Atualizações Pesquisa Dinâmica... 3 1. Feedback do Cliente...3 1.1 Feedback do Cliente no Email da Pesquisa Dinâmica... 3 1.2 Página de

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

Desenvolvimento de um CMS 1 para a criação e publicação de web sites acessíveis por deficientes visuais.

Desenvolvimento de um CMS 1 para a criação e publicação de web sites acessíveis por deficientes visuais. Desenvolvimento de um CMS 1 para a criação e publicação de web sites acessíveis por deficientes visuais. Tales Henrique José MOREIRA 1 ; Gabriel da SILVA 2 ; 1 Estudante de Tecnologia em Sistemas para

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

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress 5 Introdução ao uso do BrOffice Impress O pacote BrOffice é um pacote de escritório muito similar ao já conhecido Microsoft Office e ao longo do tempo vem evoluindo e cada vez mais ampliando as possibilidades

Leia mais

JavaScript (Funções, Eventos e Manipulação de Formulários)

JavaScript (Funções, Eventos e Manipulação de Formulários) Linguagem de Programação para Web JavaScript (Funções, Eventos e Manipulação de Formulários) Prof. Mauro Lopes 1-31 23 Objetivos Iremos avançar um pouco mais em nosso estudo sobre o JavaScript. Iremos

Leia mais

Unidade 1: O Painel de Controle do Excel *

Unidade 1: O Painel de Controle do Excel * Unidade 1: O Painel de Controle do Excel * material do 2010* 1.0 Introdução O Excel nos ajuda a compreender melhor os dados graças à sua organização em células (organizadas em linhas e colunas) e ao uso

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

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

400W. Guia de instalação. Por favor, leia esta guia antes de utilizar o produto. 1 Desembale o projetor. Controle remoto e pilhas Cabo de computador

400W. Guia de instalação. Por favor, leia esta guia antes de utilizar o produto. 1 Desembale o projetor. Controle remoto e pilhas Cabo de computador PowerLite 400W Guia de instalação Por favor, leia esta guia antes de utilizar o produto. 1 Desembale o projetor O seu projetor vem acompanhado destes itens: Projetor e tampa da lente Cabo de eletricidade

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

Manual de Integração Via Gadget. Passo a passo para realizar a integração entre websites e a plataforma Virtual Target.

Manual de Integração Via Gadget. Passo a passo para realizar a integração entre websites e a plataforma Virtual Target. Manual de Integração Via Gadget Passo a passo para realizar a integração entre websites e a plataforma Virtual Target. Manual de Integração Via Gadget 1. Introdução 1.1. O que é? Virtual Target Gadgets

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

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

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

Controle de acesso. http://www.larback.com.br. .com.br

Controle de acesso. http://www.larback.com.br. .com.br http://www.larback Controle de acesso Construiremos um sistema simples para cadastro de links. O sistema terá uma página pública (onde serão exibidos os links) e uma área administrativa, onde os usuários

Leia mais

FAQ Perguntas Frequentes

FAQ Perguntas Frequentes FAQ Perguntas Frequentes 1. COMO ACESSO A PLATAFORMA DE ENSINO?... 2 2. NÃO CONSIGO REALIZAR O MEU CADASTRO NO AMBIENTE VIRTUAL DO MMA.... 4 3. FIZ MEU CADASTRO NO SITE E NÃO RECEBI O E-MAIL DE CONFIRMAÇÃO

Leia mais

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva Conceitos Fundamentais de Microsoft Word Professor Rafael www.facebook.com/rafampsilva Introdução É um editor de texto ou processador de texto? editores de texto: editam texto (assim como uma máquina de

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

SSE 3.0. Guia Rápido. Módulo Secretaria. Nesta Edição

SSE 3.0. Guia Rápido. Módulo Secretaria. Nesta Edição SSE 3.0 Guia Rápido Módulo Secretaria Nesta Edição 1 Acessando o Módulo Secretaria 2 Cadastros Auxiliares 3 Criação de Modelos Definindo o Layout do Modelo Alterando o Layout do Cabeçalho 4 Parametrização

Leia mais

Criando um formulário no VBA

Criando um formulário no VBA Criando um formulário no VBA No dia-a-dia, não queremos nem ouvir falar em formulários: imediatamente nos vem à mente qualquer idéia relacionada com burocracia... Mas, na hora de criar interfaces de macros,

Leia mais

Tablet Widescreen Slimline

Tablet Widescreen Slimline Tablet Widescreen Slimline Manual do Usuário Avançado Instalação Desenho Escrita Navegação Configuração Manutenção www.trust.com/69/faq Instalando e conhecendo seu tablet Trust 6 7 8 9 0 Cabo USB 6 Pontas

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

Sumário. Este Guia Rápido do Usuário ajuda você a começar a usar o IRISPen TM Executive 7.

Sumário. Este Guia Rápido do Usuário ajuda você a começar a usar o IRISPen TM Executive 7. Este Guia Rápido do Usuário ajuda você a começar a usar o IRISPen TM Executive 7. As descrições fornecidas neste guia são baseadas no sistema operacional Windows 7. Leia este guia antes de operar este

Leia mais

Banco de Dados Microsoft Access: Criar tabelas. Vitor Valerio de Souza Campos

Banco de Dados Microsoft Access: Criar tabelas. Vitor Valerio de Souza Campos Banco de Dados Microsoft Access: Criar tabelas Vitor Valerio de Souza Campos Objetivos do curso 1. Criar uma tabela no modo de exibição Folha de Dados. 2. Definir tipos de dados para os campos na tabela.

Leia mais

DIGPROP - PREGÃO. Digitação de dados para entrega de propostas por meio magnético

DIGPROP - PREGÃO. Digitação de dados para entrega de propostas por meio magnético DIGPROP - PREGÃO Digitação de dados para entrega de propostas por meio magnético Marcio Tomazelli Programador Sênior Versão 1.0 Índice Índice...2 Índice de Figuras...2 Introdução...3 Fluxograma do processo

Leia mais

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 13/AGO/2012 Sistema Gerenciador de Conteúdo Dinâmico No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

Leia mais

Manual do Aplicativo - Rastreamento Veicular

Manual do Aplicativo - Rastreamento Veicular Manual do Aplicativo - Rastreamento Veicular Sumário Apresentação... 2 Instalação do Aplicativo... 2 Localizando o aplicativo no smartphone... 5 Inserindo o link da aplicação... 6 Acessando o sistema...

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

Especificações Técnicas

Especificações Técnicas 1. INTRODUÇÃO 1.1. Este documento tem por objetivo orientar a utilização dos recursos tecnológicos para o desenvolvimento dos cursos que serão disponibilizados via intranet ou internet no portal da Universidade

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

- 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

Delphi 7 Aula 01 Área do Triângulo

Delphi 7 Aula 01 Área do Triângulo Delphi 7 Aula 01 Área do Triângulo Prof. Gilbert Azevedo da Silva I. Objetivos Conhecer o Ambiente Integrado de Desenvolvimento (IDE) do Delphi 7, Desenvolver a primeira aplicação no Delphi 7, Aprender

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

Manual do Usuário Android Neocontrol

Manual do Usuário Android Neocontrol Manual do Usuário Android Neocontrol Sumário 1.Licença e Direitos Autorais...3 2.Sobre o produto...4 3. Instalando, Atualizando e executando o Android Neocontrol em seu aparelho...5 3.1. Instalando o aplicativo...5

Leia mais

Presskit Guia Rápido. Release 2.0. Presskit

Presskit Guia Rápido. Release 2.0. Presskit Presskit Guia Rápido Release 2.0 Presskit 06/07/2009 Sumário 1 Login 2 Login e Senha...................................... 2 Esqueci minha senha.................................. 2 Fale Com o Suporte...................................

Leia mais