Por exemplo, quando um usuário digita CMD+F / CTRL + F, ele quer buscar na página ou no documento que está navegando naquele momento, não buscar na biblioteca de documentos. E se você insistir em sequestrar, por favor: i) avise de forma bem explícita que fez isto ii) ofereça uma opção para desligar o sequestro de função.
acessibilidade
ComicA11y: Um experimento de quadrinhos web acessível e inclusivo
Isso é tão legal. Um experimento de biblioteca de quadrinhos acessível usando tecnologia básica da web.
Criado por Paul Spencer, além do formato de roteiro de quadrinhos mais “padrão”, permite navegar por meio da tecla TAB, ler por meio de leitores de tela, modo de alto contraste, mudar a tira para orientação vertical, traduções, seleção de texto e legenda (closed caption).
Adding a noscript element to WordPress scripts using the script_loader_tag filter
A good practice for developing websites and webapps is to give alternatives for features that depend on Javascript. Something known as progressive enhancement.
[Versão em Português? Clique aqui.]
Ideally, you start from the basic experience without Javascript and progressivelly enhances the experience with new Javascript features. At least, you should give some kind of warning or alternative content to the user (or search engines) if you can’t provide the same experience.
One way of doing that is by using noscript
elements with the description, the warning or an alternative feature. Say, for example, an static image instead of some kind of interactive graphic.
Unfortunately, so far, WordPress doesn’t have a native specific way to add noscript elements to any Javascript enqueued with the native wp_register_script/wp_enqueue_script functionsw
The good news is that you can solve that by using a WordPress filter. Specifically, by using the script_loader_tag
, as you can see below.
/** * @summary filters an enqueued script tag and adds a noscript element after it * * @description filters an enqueued script tag (identified by the $handle variable) and * adds a noscript element after it. If there is also an inline script enqueued * after $handled, adds the noscript element after it. * * @access public * @param string $tag The tag string sent by `script_loader_tag` filter on WP_Scripts::do_item * @param string $handle The script handle as sent by `script_loader_tag` filter on WP_Scripts::do_item * @param string $src The script src as sent by `script_loader_tag` filter on WP_Scripts::do_item * @return string $tag The filter $tag variable with the noscript element */ function add_noscript_filter($tag, $handle, $src){ // as this filter will run for every enqueued script // we need to check if the handle is equals the script // we want to filter. If yes, than adds the noscript element if ( 'script-handle' === $handle ){ $noscript = '<noscript>'; // you could get the inner content from other function $noscript .= ' this site demands javascript '; $noscript .= '</noscript>'; $tag = $tag . $noscript; } return $tag; } // adds the add_noscript_filter function to the script_loader_tag filters // it must use 3 as the last parameter to make $tag, $handle, $src available // to the filter function add_filter('script_loader_tag', 'add_noscript_filter', 10, 3); |
Enjoy! This function is also available on Github.
Adicionando elementos noscript a scripts do WordPress usando o filtro script_loader_tag
Uma boa prática em desenvolvimento de sites e webapps é oferecer alternativas para funcionalidades que dependam de Javascript. Conhecido como progressive enhancement ou aperfeiçoamento progressivo.
[for english version, check this link]
Idealmente, você começa da experiência mais básica, sem Javascript, e progressivamente aperfeiçoa a experiência com nova funcionalidades. Ou ao menos, adicionar avisos e conteúdos que possam ser visto por usuários e robôs de busca sem Javascript.
Uma das formas é colocar elementos noscript
com descrição ou alternativa da funcionalidade, ou o aviso para o usuário. Infelizmente, o WordPress — o sistema de gerenciamento de conteúdo que usamos em clientes e projetos de clientes 2Aces — não oferece uma função específica para adicionar este elementos noscript.
A boa notícia é que é possível resolver isto usando o ótimo sistema de filtros do WordPress. Neste caso usando o filtro script_loader_tag
, como você pode ver abaixo.
/** * @summary filtra uma tag de script na fila e adiciona um elemento noscript após ela * * @description filtra uma tag de script na fila (identificada pela variável $handle) e adiciona * um elemento noscript após ela. Se também houver um script inline após o script * identificado por $handle, adiciona o elemento noscript após ele. * * @access público * @param string $tag A string da tag enviada pelo filtro `script_loader_tag` em WP_Scripts::do_item * @param string $handle O nome (handle) do como enviado pelo filtro `script_loader_tag` em WP_Scripts::do_item * @param string $src A origem (src) do script como enviado pelo filtro `script_loader_tag` em WP_Scripts::do_item * @return string $tag A variável $tag filtrada e com o elemento `noscript` */ function add_noscript_filter($tag, $handle, $src){ // como este filtro roda para cada script na fila // precisamos verificar se o $handle é igual o script // que queremos filtrar e adicionar o noscript a ele if ( 'script-handle' === $handle ){ $noscript = '<noscript>'; // você poderia pegar o conteúdo interno de outra função $noscript .= ' Este site demanda JavaScript '; $noscript .= '</noscript>'; $tag = $tag . $noscript; } return $tag; } // adiciona a função add_noscript_filter aos filtros em script_loader_tag // deve ysar 3 no último parmetro para garantirque $tag, $handle, $src // estejam disponíveis à funço add_noscript_filter add_filter('script_loader_tag', 'add_noscript_filter', 10, 3); |
Aproveite! A função acima também está disponível no Github.
Vídeos da Conferência Web.br 2015: Re-descentralização da Web
Acabou de chegar no email: já estão disponíveis vários vídeos da Conferência Web.br 2015 de Setembro, que teve o tema Re-descentralização da Web, organizada pelo W3C Brasil e CEWEB.br. Não são todas as que estão no canal ainda, mas recomendo que assistam, seja você um profissional técnico da web ou um cidadão preocupado com o futuro da web e o impacto na sociedade (em especial privacidade e liberdade) no presente e no futuro próximo.
Foram dois dias de palestras e debates ligados o tema central (dados abertos, transparência, acessibilidade, padrões e práticas de tecnologia, etc). E muitas delas lidam mais com política, economia e as relações sociais do que com tecnologia.
Aliás, das palestras que mais gostei de assistir durante o evento, 3 delas tocavam esta faceta sociopolítica. Afinal, a tecnologia é apenas uma ferramenta e são os usos e propósito no uso da ferramenta que importam.
“Tecnologia à parte, também precisamos nos preocupar com regulações e regras. O problema aqui é que são grupos poderosos que vão decidir quem tem acesso à privacidade e segurança e quem não. E o próximo bilhão de usuários da web não terão uma carta de direitos, uma magna carta, eles não vão ter as leis e regulamentos para protegê-los. Então como podemos ajudá-los, como podemos garantir que a web continue aberta e amigável à privacidade para todos”.
(Andrei Sambra)
Recomendo em especial a conversa de abertura sobre descentralização e as relações de poder com Andrei Sambra (primeira abaixo) e a Dados na Web com Phil Archer (um excelente debatedor) e Deirdre Lee (a segunda abaixo e número 13 da lista no YouTube) que, apesar de abordar mais assuntos técnicos, analisam alguns bons usos sociais e comerciais de dados abertos na web que podem inspirar novas ferramentas e serviços, aumentar a transparência governamental e dificultar corrupção.
PS: As fotos que fiz do evento são disponíveis em Creative Commons, mas para usá-las, é preciso autorização de uso de imagem das pessoas nas imagens
Doando máquinas de escrever para ajudar quem sofreu AVC. Bora?
Gente, alguém tem uma máquina de escrever como a do link e fotos abaixo (uma Olivetti Lettera 35) para doação por um bom motivo? Vem comigo:
Uma senhora ligou para mim interessada na máquina de escrever igual da foto e link abaixo para dar para seu irmão, que sofreu um AVC há alguns anos, escrever com a mão esquerda.
O link é de uma lojinha que fiz anos atrás para vender uns cacarecos da minha mãe, mas ela já vendeu todas as máquinas de escrever. Fiquei muito comovido com a história, especialmente por quê o meu avô — pai de minha mãe — sofreu um AVC nos anos 1980 e foi algo muito triste.
E aí que resolvi ver se descolo esta máquina para dar para esta senhora. Se você tiver e puder doar, ou souber de alguém que tenha, ou onde encontro baratinho (a coisa tá preta aqui) dá uma forcinha e me avise por email: celso@celsobessa.com.br
Algumas observações:
- não precisa ser exatamente este modelo, mas tem que ser portátil e de tecla leve para ele poder escrever.
- cheguei a pensar em algo mais tecnológico, mas a máquina pode ser uma solução viável pois: 1) é barata (um tablet com eye-tracking e software especiais é muito caro, cerca de R$ 75.000) 2) não podemos depender de energia 3) não pode ser algo de manutenção cara (o que me leva a pensar que talvez precisemos de 2 máquinas)
- claro, outras soluções para o problema são mais que bem-vindas
Não é por 20 centavos, é por menos sites ruins em flash, comic sans e memes auto-irônicos
Aproveitando para transformar uma piada que fiz no Facebook em imagem:
O original dizia:
“Não é sobre os 20 centavos. É sobre este monte de site feito em flash com pouca preocupação com usabilidade ou trilha sonora em autoplay.”