# Bem-vindo à Rybená (/docs) A Rybená é uma solução completa de acessibilidade e player de vídeo projetada para tornar o conteúdo digital acessível a todos. Nossa plataforma oferece recursos avançados de acessibilidade, integração fácil com diversas plataformas e suporte completo para desenvolvedores. ## Recursos Principais * **Acessibilidade Avançada**: Mais de 20 recursos de acessibilidade integrados, incluindo leitor de tela, contraste, zoom, e muito mais * **Fácil Integração**: Plugins disponíveis para WordPress, Joomla, Moodle, Wix e outras plataformas * **API Completa**: Controle total sobre o player através de nossa API TypeScript * **Internacionalização**: Suporte para múltiplos idiomas e personalização * **Privacidade**: Conformidade com LGPD e políticas de segurança de dados ## Começando ## Para Desenvolvedores ## Recursos de Acessibilidade Rybená oferece uma ampla gama de recursos de acessibilidade para garantir que seu conteúdo seja acessível a todos: * **Leitor de Tela**: Suporte completo para leitores de tela * **Controle de Contraste**: Contraste claro, escuro e invertido * **Zoom**: Ampliação e redução do conteúdo * **Navegação por Teclado**: Navegação completa sem mouse * **Modo de Leitura**: Foco no conteúdo principal * **Dicionário**: Definições de palavras complexas * **Máscara de Leitura**: Foco em linha específica * **Cursor Grande**: Cursor ampliado para melhor visibilidade * **Destaques**: Destaque de links e títulos * **Modo Dislexia**: Fonte otimizada para dislexia ## Integrações Disponíveis Rybená se integra facilmente com as principais plataformas: ## Suporte Precisa de ajuda? Consulte nossa seção de [suporte](/docs/getting-started/support) ou entre em contato com nossa equipe. ## Documentos Legais * [Termos de Uso](/docs/legal/termos-de-uso) * [Política de Privacidade LGPD](/docs/legal/politica-privacidade-lgpd) * [Política de Segurança da Informação](/docs/legal/politica-seguranca-informacao) # Recursos de Acessibilidade (/docs/api/accessibility-features) ## Ajustes Visuais ### Altura da Linha Controla a distância entre as linhas de texto para melhorar a legibilidade. ```javascript RybenaApi.getInstance().toggleLineHeight() ``` ```javascript RybenaApi.getInstance().nextLineHeight() ``` ```javascript RybenaApi.getInstance().previousLineHeight() ``` ```javascript RybenaApi.getInstance().startLineHeight() ``` ```javascript RybenaApi.getInstance().stopLineHeight() ``` ### Espaçamento de Letras Controla a distância entre as letras para melhorar a legibilidade. ```javascript RybenaApi.getInstance().toggleLetterSpacing() ``` ```javascript RybenaApi.getInstance().nextLetterSpacing() ``` ```javascript RybenaApi.getInstance().previousLetterSpacing() ``` ```javascript RybenaApi.getInstance().startLetterSpacing() ``` ```javascript RybenaApi.getInstance().stopLetterSpacing() ``` ### Zoom Permite aumentar ou diminuir o tamanho dos elementos exibidos na tela. ```javascript RybenaApi.getInstance().toggleZoom() ``` ```javascript RybenaApi.getInstance().nextZoom() ``` ```javascript RybenaApi.getInstance().previousZoom() ``` ```javascript RybenaApi.getInstance().startZoom() ``` ```javascript RybenaApi.getInstance().stopZoom() ``` ### Contraste Alterna entre diferentes modos de contraste para melhorar a visibilidade. ```javascript // Toggle RybenaApi.getInstance().toggleDarkContrast() // Ativar RybenaApi.getInstance().startDarkContrast() // Desativar RybenaApi.getInstance().stopDarkContrast() ``` ```javascript // Toggle RybenaApi.getInstance().toggleLightContrast() // Ativar RybenaApi.getInstance().startLightContrast() // Desativar RybenaApi.getInstance().stopLightContrast() ``` ```javascript // Toggle RybenaApi.getInstance().toggleInvertedContrast() // Ativar RybenaApi.getInstance().startInvertedContrast() // Desativar RybenaApi.getInstance().stopInvertedContrast() ``` ### Saturação Controla a intensidade das cores na página. ```javascript // Toggle RybenaApi.getInstance().toggleHighSaturation() // Ativar RybenaApi.getInstance().startHighSaturation() // Desativar RybenaApi.getInstance().stopHighSaturation() ``` ```javascript // Toggle RybenaApi.getInstance().toggleLowSaturation() // Ativar RybenaApi.getInstance().startLowSaturation() // Desativar RybenaApi.getInstance().stopLowSaturation() ``` ```javascript // Toggle RybenaApi.getInstance().toggleNoSaturation() // Ativar RybenaApi.getInstance().startNoSaturation() // Desativar RybenaApi.getInstance().stopNoSaturation() ``` ## Auxílios de Leitura ### Cursor Ajusta o tamanho e comportamento do cursor para facilitar a visualização. ```javascript // Toggle RybenaApi.getInstance().toggleCursorSize() // Ativar RybenaApi.getInstance().startCursorSize() // Desativar RybenaApi.getInstance().stopCursorSize() ``` ```javascript // Toggle RybenaApi.getInstance().toggleCursorGuide() // Ativar RybenaApi.getInstance().startCursorGuide() // Desativar RybenaApi.getInstance().stopCursorGuide() ``` ```javascript // Toggle RybenaApi.getInstance().toggleAmplifyCursor() // Ativar RybenaApi.getInstance().startAmplifyCursor() // Desativar RybenaApi.getInstance().stopAmplifyCursor() ``` ### Fonte de Dislexia Ativa uma fonte especializada para ajudar pessoas com dislexia a ler melhor. ```javascript RybenaApi.getInstance().toggleDislexiaFont() ``` ```javascript RybenaApi.getInstance().startDislexiaFont() ``` ```javascript RybenaApi.getInstance().stopDislexiaFont() ``` **Dica:** O modo de dislexia usa uma fonte mais legível com espaçamento maior entre as letras, facilitando a leitura para pessoas com dislexia. ### Destaques Destaca elementos específicos da página para facilitar a navegação. ```javascript // Toggle RybenaApi.getInstance().toggleLinkHighlight() // Ativar RybenaApi.getInstance().startLinkHighlight() // Desativar RybenaApi.getInstance().stopLinkHighlight() ``` ```javascript // Toggle RybenaApi.getInstance().toggleTitleHighlight() // Ativar RybenaApi.getInstance().startTitleHighlight() // Desativar RybenaApi.getInstance().stopTitleHighlight() ``` ### Ferramentas de Leitura Ferramentas para auxiliar na leitura de conteúdo. ```javascript // Toggle RybenaApi.getInstance().toggleReadingMask() // Ativar RybenaApi.getInstance().startReadingMask() // Desativar RybenaApi.getInstance().stopReadingMask() ``` ```javascript // Toggle RybenaApi.getInstance().toggleReadingMode() // Ativar RybenaApi.getInstance().startReadingMode() // Desativar RybenaApi.getInstance().stopReadingMode() ``` **Dica:** A máscara de leitura destaca uma linha de texto conforme o usuário lê, ajudando a manter o foco e evitar distrações. ## Navegação e Outros ### Dicionário Ativa um dicionário interativo para traduzir palavras na página. ```javascript RybenaApi.getInstance().toggleDictionary() ``` ```javascript RybenaApi.getInstance().startDictionary() ``` ```javascript RybenaApi.getInstance().stopDictionary() ``` ### Descrição de Imagem Adiciona legendas às imagens para melhorar a acessibilidade. ```javascript RybenaApi.getInstance().toggleImageDescription() ``` ```javascript RybenaApi.getInstance().startImageDescription() ``` ```javascript RybenaApi.getInstance().stopImageDescription() ``` **Dica:** A legenda de imagem é exibida em um balão de texto quando o usuário toca na imagem, fornecendo contexto adicional. ### Pausar Animações Permite pausar todas as animações da página para reduzir distrações. ```javascript RybenaApi.getInstance().togglePauseAnimations() ``` ```javascript RybenaApi.getInstance().startPauseAnimations() ``` ```javascript RybenaApi.getInstance().stopPauseAnimations() ``` ### Navegação por Teclado Ativa navegação aprimorada por teclado para usuários que não usam mouse. ```javascript RybenaApi.getInstance().toggleKeyboardNavigation() ``` ```javascript RybenaApi.getInstance().startKeyboardNavigation() ``` ```javascript RybenaApi.getInstance().stopKeyboardNavigation() ``` ## Exemplos Completos ### Exemplo 1: Painel de Acessibilidade Este exemplo cria um painel completo de acessibilidade com todos os recursos: ```html Rybená - Painel de Acessibilidade

Exemplo de Painel de Acessibilidade

Use o painel à direita para ativar os recursos de acessibilidade.

Acessibilidade

Texto

Zoom

Contraste

Saturação

Cursor

Destaques

Leitura

Outros

``` ### Exemplo 2: Ativação Automática Este exemplo mostra como ativar recursos de acessibilidade automaticamente baseado em preferências do usuário: ```javascript RybenaApi.getInstance().handleLoaded(() => { // Carrega preferências salvas const savedPreferences = JSON.parse( localStorage.getItem("rybenaPreferences") || "{}" ); // Ativa recursos baseados nas preferências if (savedPreferences.highContrast) { RybenaApi.getInstance().toggleDarkContrast(); } if (savedPreferences.largeText) { RybenaApi.getInstance().toggleLineHeight(); RybenaApi.getInstance().toggleLetterSpacing(); } if (savedPreferences.dislexiaFont) { RybenaApi.getInstance().toggleDislexiaFont(); } if (savedPreferences.largeCursor) { RybenaApi.getInstance().toggleCursorSize(); } if (savedPreferences.readingMask) { RybenaApi.getInstance().toggleReadingMask(); } }); // Salva preferências function savePreferences(preferences) { localStorage.setItem("rybenaPreferences", JSON.stringify(preferences)); } ``` ### Exemplo 3: Atalhos de Teclado Este exemplo mostra como criar atalhos de teclado para recursos de acessibilidade: ```javascript RybenaApi.getInstance().handleLoaded(() => { // Atalhos de teclado document.addEventListener("keydown", (e) => { // Alt + Z: Toggle Zoom if (e.altKey && e.key === "z") { e.preventDefault(); RybenaApi.getInstance().toggleZoom(); } // Alt + C: Toggle Contraste Escuro if (e.altKey && e.key === "c") { e.preventDefault(); RybenaApi.getInstance().toggleDarkContrast(); } // Alt + D: Toggle Fonte de Dislexia if (e.altKey && e.key === "d") { e.preventDefault(); RybenaApi.getInstance().toggleDislexiaFont(); } // Alt + M: Toggle Máscara de Leitura if (e.altKey && e.key === "m") { e.preventDefault(); RybenaApi.getInstance().toggleReadingMask(); } // Alt + L: Toggle Destaque de Links if (e.altKey && e.key === "l") { e.preventDefault(); RybenaApi.getInstance().toggleLinkHighlight(); } }); }); ``` ## Boas Práticas **Dica:** Salve as preferências de acessibilidade do usuário em localStorage para que elas persistam entre sessões. **Atenção:** Alguns recursos de acessibilidade podem afetar o desempenho da página. Use-os com moderação e teste em diferentes dispositivos. **Sugestão:** Forneça atalhos de teclado para os recursos de acessibilidade mais usados para melhorar a usabilidade. **Dica:** Considere criar um painel de acessibilidade que permita aos usuários ativar/desativar recursos facilmente. ## Resumo dos Métodos ### Ajustes Visuais | Categoria | Método | Descrição | | --------------- | -------------------------- | ----------------------------- | | Altura da Linha | `toggleLineHeight()` | Alterna altura da linha | | Altura da Linha | `nextLineHeight()` | Próximo nível de altura | | Altura da Linha | `previousLineHeight()` | Nível anterior de altura | | Espaçamento | `toggleLetterSpacing()` | Alterna espaçamento de letras | | Espaçamento | `nextLetterSpacing()` | Próximo nível de espaçamento | | Espaçamento | `previousLetterSpacing()` | Nível anterior de espaçamento | | Zoom | `toggleZoom()` | Alterna zoom | | Zoom | `nextZoom()` | Aumenta zoom | | Zoom | `previousZoom()` | Diminui zoom | | Contraste | `toggleDarkContrast()` | Alterna contraste escuro | | Contraste | `toggleLightContrast()` | Alterna contraste claro | | Contraste | `toggleInvertedContrast()` | Alterna contraste invertido | | Saturação | `toggleHighSaturation()` | Alterna saturação alta | | Saturação | `toggleLowSaturation()` | Alterna saturação baixa | | Saturação | `toggleNoSaturation()` | Alterna sem saturação | ### Auxílios de Leitura | Categoria | Método | Descrição | | --------- | ------------------------ | --------------------------- | | Cursor | `toggleCursorSize()` | Alterna tamanho do cursor | | Cursor | `toggleCursorGuide()` | Alterna guia do cursor | | Cursor | `toggleAmplifyCursor()` | Alterna ampliar cursor | | Fonte | `toggleDislexiaFont()` | Alterna fonte de dislexia | | Destaques | `toggleLinkHighlight()` | Alterna destaque de links | | Destaques | `toggleTitleHighlight()` | Alterna destaque de títulos | | Leitura | `toggleReadingMask()` | Alterna máscara de leitura | | Leitura | `toggleReadingMode()` | Alterna modo de leitura | ### Navegação e Outros | Categoria | Método | Descrição | | ---------- | ---------------------------- | ----------------------------- | | Dicionário | `toggleDictionary()` | Alterna dicionário | | Imagens | `toggleImageDescription()` | Alterna descrição de imagem | | Animações | `togglePauseAnimations()` | Alterna pausar animações | | Teclado | `toggleKeyboardNavigation()` | Alterna navegação por teclado | ## Conteúdo Relacionado Gerencie visibilidade, posição e tamanho Traduza textos e controle a reprodução Veja exemplos de integração completos # Event Handlers (/docs/api/event-handlers) ## handleLoaded() Configura uma função de callback que será executada quando a Rybená terminar de carregar. ```javascript RybenaApi.getInstance().handleLoaded(callback) ``` **Parâmetros:** * `callback` (function): Função a ser executada quando a Rybená estiver carregada **Retorno:** `void` **Exemplo:** ```javascript RybenaApi.getInstance().handleLoaded(() => { console.log("Rybená está pronta!"); RybenaApi.getInstance().openPlayer(); }); ``` **Dica:** Sempre use `handleLoaded()` antes de fazer qualquer chamada à API para garantir que o script foi completamente carregado. ## handleTranslate() Configura uma função de callback que será executada quando a Rybená terminar de traduzir um texto. ```javascript RybenaApi.getInstance().handleTranslate(callback) ``` **Parâmetros:** * `callback` (function): Função a ser executada quando a tradução for concluída **Retorno:** `void` **Exemplo:** ```javascript RybenaApi.getInstance().handleTranslate(() => { console.log("Tradução concluída!"); }); ``` **Sugestão:** Como parâmetro é necessário passar a função a ser executada. Para isso, basta passar a referência à função, não sua execução: passe `func`, e não `func()`. ## isTranslating() Verifica se a Rybená está atualmente traduzindo um texto. ```javascript RybenaApi.getInstance().isTranslating() ``` **Retorno:** `boolean` - `true` se estiver traduzindo, `false` caso contrário **Exemplo:** ```javascript const isTranslating = RybenaApi.getInstance().isTranslating(); console.log("Está traduzindo:", isTranslating); ``` ## Exemplos Completos ### Exemplo 1: Inicialização Básica Este exemplo mostra como usar `handleLoaded()` para garantir que a API está pronta: ```javascript RybenaApi.getInstance().handleLoaded(() => { console.log("Rybená API está pronta!"); // Mostra o player RybenaApi.getInstance().openPlayer(); // Traduz um texto RybenaApi.getInstance().translate("Olá, bem-vindo à Rybená!"); }); ``` ### Exemplo 2: Callback após Tradução Este exemplo mostra como executar código após a tradução ser concluída: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); // Configura callback para quando a tradução terminar RybenaApi.getInstance().handleTranslate(() => { console.log("Tradução concluída!"); alert("Tradução finalizada!"); }); // Traduz um texto RybenaApi.getInstance().translate("Este texto será traduzido"); }); ``` ### Exemplo 3: Verificação de Estado Este exemplo mostra como verificar se a Rybená está traduzindo: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); // Verifica se está traduzindo console.log("Está traduzindo:", RybenaApi.getInstance().isTranslating()); // Traduz um texto RybenaApi.getInstance().translate("Verificando estado..."); // Verifica novamente após 1 segundo setTimeout(() => { console.log("Está traduzindo:", RybenaApi.getInstance().isTranslating()); }, 1000); }); ``` ### Exemplo 4: Tradução em Sequência Este exemplo mostra como traduzir múltiplos textos em sequência usando `handleTranslate()`: ```javascript const texts = [ "Primeira frase", "Segunda frase", "Terceira frase" ]; let currentIndex = 0; function translateNext() { if (currentIndex < texts.length) { console.log("Traduzindo:", texts[currentIndex]); RybenaApi.getInstance().translate(texts[currentIndex]); currentIndex++; } else { console.log("Todas as traduções concluídas!"); } } RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); // Configura callback para traduzir o próximo texto RybenaApi.getInstance().handleTranslate(() => { translateNext(); }); // Começa a tradução translateNext(); }); ``` ### Exemplo 5: Interface de Progresso Este exemplo mostra como criar uma interface de progresso para traduções: ```html Rybená - Progresso

Progresso de Tradução

0%
``` ### Exemplo 6: Controle de Estado Este exemplo mostra como controlar o estado da aplicação baseado no estado da tradução: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); const translateBtn = document.getElementById('translateBtn'); const pauseBtn = document.getElementById('pauseBtn'); const playBtn = document.getElementById('playBtn'); const stopBtn = document.getElementById('stopBtn'); // Atualiza estado dos botões function updateButtonStates() { const isTranslating = RybenaApi.getInstance().isTranslating(); translateBtn.disabled = isTranslating; pauseBtn.disabled = !isTranslating; playBtn.disabled = isTranslating; stopBtn.disabled = !isTranslating; } // Configura callbacks RybenaApi.getInstance().handleTranslate(() => { console.log("Tradução concluída"); updateButtonStates(); }); // Configura botões translateBtn.addEventListener('click', () => { const text = document.getElementById('textInput').value; if (text) { RybenaApi.getInstance().translate(text); updateButtonStates(); } }); pauseBtn.addEventListener('click', () => { RybenaApi.getInstance().pause(); updateButtonStates(); }); playBtn.addEventListener('click', () => { RybenaApi.getInstance().play(); updateButtonStates(); }); stopBtn.addEventListener('click', () => { RybenaApi.getInstance().stop(); updateButtonStates(); }); // Inicializa estado updateButtonStates(); }); ``` ### Exemplo 7: Múltiplos Callbacks Este exemplo mostra como configurar múltiplos callbacks para diferentes eventos: ```javascript RybenaApi.getInstance().handleLoaded(() => { console.log("1. Rybená carregada"); RybenaApi.getInstance().openPlayer(); // Callback 1: Log de tradução RybenaApi.getInstance().handleTranslate(() => { console.log("2. Tradução concluída"); }); // Callback 2: Atualizar interface RybenaApi.getInstance().handleTranslate(() => { document.getElementById('status').textContent = "Pronto"; }); // Callback 3: Traduzir próximo texto RybenaApi.getInstance().handleTranslate(() => { if (hasMoreTexts()) { translateNext(); } }); // Traduz um texto RybenaApi.getInstance().translate("Texto de exemplo"); }); ``` ## Boas Práticas **Dica:** Use `handleLoaded()` para garantir que a API está pronta antes de fazer qualquer chamada. Isso evita erros de "API não disponível". **Atenção:** Lembre-se de passar a referência da função, não sua execução. Use `func`, não `func()`. **Sugestão:** Para traduções em sequência, use `handleTranslate()` para traduzir o próximo texto automaticamente após o anterior ser concluído. **Atenção:** Tenha cuidado ao configurar múltiplos callbacks para o mesmo evento. Todos serão executados na ordem em que foram configurados. ## Resumo dos Métodos | Método | Descrição | Parâmetros | Retorno | | --------------------------- | ------------------------------------------ | --------------------- | --------- | | `handleLoaded(callback)` | Executa callback quando a API carrega | `callback` (function) | `void` | | `handleTranslate(callback)` | Executa callback quando a tradução termina | `callback` (function) | `void` | | `isTranslating()` | Verifica se está traduzindo | Nenhum | `boolean` | ## Conteúdo Relacionado Traduza textos e controle a reprodução Configure o modo API e faça sua primeira chamada Veja exemplos de integração completos # Exemplos de API (/docs/api/examples) ## Integração por Framework ```tsx import { useEffect, useRef, useState } from 'react'; declare global { interface Window { RybenaApi?: { getInstance: () => { handleLoaded: (callback: () => void) => void; openPlayer: () => void; closePlayer: () => void; translate: (text: string) => void; switchToLibras: () => void; switchToVoz: () => void; pause: () => void; play: () => void; stop: () => void; setSpeed: (speed: number) => void; isTranslating: () => boolean; handleTranslate: (callback: () => void) => void; }; }; RybenaDOM?: { getInstance: () => { getRybenaScripts: (mode?: string) => void; }; }; } } export default function RybenaComponent() { const [isLoaded, setIsLoaded] = useState(false); const [isTranslating, setIsTranslating] = useState(false); const [text, setText] = useState(''); const [speed, setSpeed] = useState(1.0); const [mode, setMode] = useState<'libras' | 'voz'>('libras'); useEffect(() => { // Carrega o script Rybená const script = document.createElement('script'); script.src = 'https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api'; script.async = true; script.onload = () => { if (window.RybenaApi) { window.RybenaApi.getInstance().handleLoaded(() => { setIsLoaded(true); window.RybenaApi.getInstance().openPlayer(); window.RybenaApi.getInstance().switchToLibras(); }); } }; document.head.appendChild(script); return () => { document.head.removeChild(script); }; }, []); const handleTranslate = () => { if (text && window.RybenaApi) { setIsTranslating(true); window.RybenaApi.getInstance().translate(text); } }; const handlePause = () => { if (window.RybenaApi) { window.RybenaApi.getInstance().pause(); } }; const handlePlay = () => { if (window.RybenaApi) { window.RybenaApi.getInstance().play(); } }; const handleStop = () => { if (window.RybenaApi) { window.RybenaApi.getInstance().stop(); setIsTranslating(false); } }; const handleSpeedChange = (newSpeed: number) => { setSpeed(newSpeed); if (window.RybenaApi) { window.RybenaApi.getInstance().setSpeed(newSpeed); } }; const handleModeChange = (newMode: 'libras' | 'voz') => { setMode(newMode); if (window.RybenaApi) { if (newMode === 'libras') { window.RybenaApi.getInstance().switchToLibras(); } else { window.RybenaApi.getInstance().switchToVoz(); } } }; if (!isLoaded) { return
Carregando Rybená...
; } return (

Rybená - React Integration

Pronto para traduzir
``` ## Casos de Uso Comuns ### Caso de Uso 1: Tradução de Conteúdo Dinâmico Este exemplo mostra como traduzir conteúdo que é carregado dinamicamente: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); RybenaApi.getInstance().switchToLibras(); // Função para traduzir conteúdo dinâmico function translateDynamicContent() { const contentElement = document.getElementById('dynamic-content'); const text = contentElement.textContent; if (text) { RybenaApi.getInstance().translate(text); } } // Simula carregamento de conteúdo dinâmico setTimeout(() => { document.getElementById('dynamic-content').textContent = 'Este conteúdo foi carregado dinamicamente e será traduzido automaticamente.'; translateDynamicContent(); }, 2000); }); ``` ### Caso de Uso 2: Integração com Vídeo Este exemplo mostra como sincronizar a tradução com um vídeo: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); RybenaApi.getInstance().switchToLibras(); const video = document.getElementById('myVideo'); const subtitles = [ { start: 0, end: 5, text: 'Bem-vindo ao nosso vídeo' }, { start: 5, end: 10, text: 'Hoje vamos aprender sobre acessibilidade' }, { start: 10, end: 15, text: 'A Rybená ajuda a tornar o conteúdo acessível' } ]; let currentSubtitleIndex = 0; // Função para traduzir a legenda atual function translateCurrentSubtitle() { const currentTime = video.currentTime; const currentSubtitle = subtitles.find( sub => currentTime >= sub.start && currentTime < sub.end ); if (currentSubtitle) { RybenaApi.getInstance().translate(currentSubtitle.text); } } // Atualiza a tradução quando o tempo do vídeo muda video.addEventListener('timeupdate', () => { const currentTime = video.currentTime; const newIndex = subtitles.findIndex( sub => currentTime >= sub.start && currentTime < sub.end ); if (newIndex !== -1 && newIndex !== currentSubtitleIndex) { currentSubtitleIndex = newIndex; translateCurrentSubtitle(); } }); // Pausa a tradução quando o vídeo é pausado video.addEventListener('pause', () => { RybenaApi.getInstance().pause(); }); // Retoma a tradução quando o vídeo é reproduzido video.addEventListener('play', () => { RybenaApi.getInstance().play(); }); }); ``` ### Caso de Uso 3: Tradução de Formulários Este exemplo mostra como traduzir mensagens de erro e validação de formulários: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); RybenaApi.getInstance().switchToVoz(); const form = document.getElementById('myForm'); const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); // Função para traduzir mensagens de erro function translateErrorMessage(message) { RybenaApi.getInstance().translate(message); } // Validação do formulário form.addEventListener('submit', (e) => { e.preventDefault(); const name = nameInput.value.trim(); const email = emailInput.value.trim(); if (!name) { translateErrorMessage('Por favor, preencha o campo nome.'); return; } if (!email) { translateErrorMessage('Por favor, preencha o campo e-mail.'); return; } if (!email.includes('@')) { translateErrorMessage('Por favor, insira um e-mail válido.'); return; } translateErrorMessage('Formulário enviado com sucesso!'); }); // Traduz rótulos dos campos quando focados nameInput.addEventListener('focus', () => { RybenaApi.getInstance().translate('Campo nome: digite seu nome completo.'); }); emailInput.addEventListener('focus', () => { RybenaApi.getInstance().translate('Campo e-mail: digite seu endereço de e-mail.'); }); }); ``` ### Caso de Uso 4: Tradução de Notificações Este exemplo mostra como traduzir notificações do sistema: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); RybenaApi.getInstance().switchToVoz(); // Função para mostrar e traduzir notificações function showNotification(message, type = 'info') { // Cria elemento de notificação const notification = document.createElement('div'); notification.className = `notification ${type}`; notification.textContent = message; document.body.appendChild(notification); // Traduz a mensagem RybenaApi.getInstance().translate(message); // Remove a notificação após 5 segundos setTimeout(() => { document.body.removeChild(notification); }, 5000); } // Exemplos de uso document.getElementById('successBtn').addEventListener('click', () => { showNotification('Operação realizada com sucesso!', 'success'); }); document.getElementById('errorBtn').addEventListener('click', () => { showNotification('Ocorreu um erro. Tente novamente.', 'error'); }); document.getElementById('warningBtn').addEventListener('click', () => { showNotification('Atenção: verifique os dados informados.', 'warning'); }); }); ``` ### Caso de Uso 5: Tradução de Conteúdo de Acessibilidade Este exemplo mostra como traduzir descrições de elementos de acessibilidade: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); RybenaApi.getInstance().switchToVoz(); // Traduz descrições de imagens quando focadas const images = document.querySelectorAll('img[alt]'); images.forEach(img => { img.addEventListener('focus', () => { const altText = img.getAttribute('alt'); if (altText) { RybenaApi.getInstance().translate(`Imagem: ${altText}`); } }); }); // Traduz descrições de links quando focados const links = document.querySelectorAll('a[aria-label]'); links.forEach(link => { link.addEventListener('focus', () => { const ariaLabel = link.getAttribute('aria-label'); if (ariaLabel) { RybenaApi.getInstance().translate(`Link: ${ariaLabel}`); } }); }); // Traduz descrições de botões quando focados const buttons = document.querySelectorAll('button[aria-label]'); buttons.forEach(button => { button.addEventListener('focus', () => { const ariaLabel = button.getAttribute('aria-label'); if (ariaLabel) { RybenaApi.getInstance().translate(`Botão: ${ariaLabel}`); } }); }); }); ``` ## Boas Práticas **Dica:** Sempre use `handleLoaded()` antes de fazer qualquer chamada à API para garantir que o script foi completamente carregado. **Atenção:** Em frameworks como Next.js, certifique-se de carregar o script apenas no cliente usando `'use client'` ou verificações de `typeof window !== 'undefined'`. **Sugestão:** Salve as preferências do usuário (velocidade, modo de tradução, etc.) em localStorage para persistir entre sessões. **Dica:** Use `handleTranslate()` para executar ações após a tradução ser concluída, como atualizar a interface ou traduzir o próximo texto. ## Conteúdo Relacionado Configure o modo API e faça sua primeira chamada Traduza textos e controle a reprodução Configure callbacks para eventos Use definições de tipos para maior segurança # Começando com a API (/docs/api/getting-started) ## Pré-requisitos Antes de começar, certifique-se de que: * Você tem conhecimento básico de JavaScript * Você tem acesso ao código da sua aplicação web * Você tem uma licença válida da Rybená ## Passo 1: Inicializar o Script em Modo API Para usar a API, você precisa inicializar o script Rybená com o parâmetro `mode=api`: ```html ``` Adicione o script ao `` ou antes do fechamento do `` do seu HTML Certifique-se de incluir o parâmetro `mode=api` na URL do script O script será carregado em background, sem mostrar a interface inicial ## Passo 2: Aguarde o Carregamento A API só estará disponível após o script Rybená ser completamente carregado. Use o manipulador `handleLoaded` para garantir que a API está pronta: ```javascript RybenaApi.getInstance().handleLoaded(() => { console.log("Rybená API está pronta!"); // Sua código aqui }); ``` ## Passo 3: Faça Sua Primeira Chamada Agora você pode fazer sua primeira chamada à API. Vamos traduzir um texto simples: ```javascript RybenaApi.getInstance().handleLoaded(() => { // Mostra o player RybenaApi.getInstance().openPlayer(); // Traduz um texto RybenaApi.getInstance().translate("Olá, bem-vindo à Rybená!"); }); ``` ## Passo 4: Manipule Eventos Você pode configurar callbacks para responder a eventos específicos: ```javascript RybenaApi.getInstance().handleLoaded(() => { // Configura callback quando a tradução terminar RybenaApi.getInstance().handleTranslate(() => { console.log("Tradução concluída!"); }); // Traduz um texto RybenaApi.getInstance().translate("Este texto será traduzido"); }); ``` ## Exemplo Completo Aqui está um exemplo completo de uma página HTML usando a API Rybená: ```html Rybená API Exemplo

Exemplo de API Rybená

``` ## Inicialização em Background Para abrir a Rybená completamente em background (sem mostrar nada inicialmente), use: ```javascript RybenaDOM.getInstance().getRybenaScripts("hidden"); ``` Isso é útil quando você quer controlar completamente quando e como a Rybená será exibida. ## Verificar se Está Traduzindo Você pode verificar se a Rybená está atualmente traduzindo: ```javascript const isTranslating = RybenaApi.getInstance().isTranslating(); console.log("Está traduzindo:", isTranslating); ``` ## Boas Práticas **Dica**: Sempre use `handleLoaded` antes de fazer qualquer chamada à API para garantir que o script foi completamente carregado. **Atenção**: Não chame métodos da API antes que o script seja carregado. Isso pode causar erros. **Sugestão**: Use `handleTranslate` para executar ações após a tradução ser concluída, como mostrar uma notificação ou atualizar a interface. ## Próximos Passos Agora que você configurou a API básica, explore: * [Controle do Player](/docs/api/player-control) - Gerencie visibilidade, posição e tamanho * [Controle de Tradução](/docs/api/translation-control) - Traduza textos e controle a reprodução * [Event Handlers](/docs/api/event-handlers) - Configure callbacks para eventos * [Exemplos](/docs/api/examples) - Veja exemplos de integração completos ## Solução de Problemas

Se você receber um erro dizendo que `RybenaApi` não está definido:

  1. Verifique se o script foi carregado corretamente
  2. Certifique-se de que está usando `handleLoaded` antes de chamar métodos
  3. Verifique o console do navegador para erros de carregamento
{" "}

Se a tradução não estiver funcionando:

  1. Verifique se o player está visível usando `openPlayer()`
  2. Certifique-se de que o texto não está vazio
  3. Verifique se há erros no console do navegador

Se o player não aparecer:

  1. Chame `openPlayer()` explicitamente
  2. Verifique se há conflitos de CSS
  3. Certifique-se de que o script foi carregado em modo API
## Suporte Caso tenha alguma dúvida ou encontre problemas, entre em contato com [suporte@rybena.com.br](mailto:suporte@rybena.com.br) # Visão Geral da API (/docs/api) Esta seção é destinada a desenvolvedores que precisam de controle programático sobre a Rybená. Se você apenas quer instalar e usar a Rybená, consulte as seções de Instalação e Configuração. A API Rybená permite controlar programaticamente a solução Rybená, possibilitando integrações com diversos serviços como vídeos, cursos interativos e sistemas que funcionam sem interação direta do usuário. É necessário conhecimento técnico em programação para integração por API. Para utilizar essas funcionalidades, é necessário experiência com JavaScript, pois as funcionalidades da solução serão acessadas via código. ## Quando Usar o Modo API O modo API é ideal para: * **Integrações com vídeos**: Sincronizar tradução com vídeos educacionais * **Cursos interativos**: Controlar a tradução baseada em progresso do usuário * **Sistemas automatizados**: Traduzir conteúdo sem interação direta do usuário * **Aplicações customizadas**: Integrar Rybená em fluxos de trabalho específicos ## Padrão da API A API Rybená segue um padrão singleton simples: ```javascript RybenaApi.getInstance().methodName(); ``` Todos os métodos são acessados através da instância singleton da API. ## Modo API Para utilizar a Rybená de forma programática, recomendamos inicializar o script com o parâmetro `mode=api`. Essa opção automatiza várias funções: * Abertura da Rybená em background * Remoção dos textos de apresentação da Rybená ### Exemplo de Inicialização ```html ``` É possível automatizar a abertura da solução Rybená com a seguinte função: ```javascript RybenaDOM.getInstance().getRybenaScripts(); ``` Para abrir a Rybená em background, basta passar o parâmetro "hidden": ```javascript RybenaDOM.getInstance().getRybenaScripts("hidden"); ``` ## Funcionalidades da API A API Rybená oferece controle sobre: * **Player**: Visibilidade, posição, tamanho e modo de exibição * **Tradução**: Tradução de texto, controle de reprodução e velocidade * **Idiomas**: Alternância entre Português, Espanhol e Inglês * **Eventos**: Manipuladores para carregamento e tradução * **Acessibilidade**: Recursos visuais, de leitura e navegação ## Começando Rápido Aqui está um exemplo básico de como usar a API: ```javascript // Aguarda a Rybená carregar RybenaApi.getInstance().handleLoaded(() => { // Mostra o player RybenaApi.getInstance().openPlayer(); // Traduz um texto RybenaApi.getInstance().translate("Olá, bem-vindo à Rybená!"); }); ``` ## Suporte Caso tenha alguma dúvida ou sugestão de funcionalidade a ser inserida na API, entre em contato com [suporte@rybena.com.br](mailto:suporte@rybena.com.br) ## Navegação Explore a documentação da API através das seções abaixo: Configure o modo API e faça sua primeira chamada Gerencie visibilidade, posição e tamanho do player Traduza textos e controle a reprodução Alterne entre idiomas suportados Configure callbacks para eventos da API Ative recursos visuais e de leitura Veja exemplos de integração completos Use definições de tipos para maior segurança # Controle de Idioma (/docs/api/language-control) ## Idiomas Suportados A Rybená suporta os seguintes idiomas: | Código | Idioma | LIBRAS | Voz | | ------ | ----------------------- | ------ | --- | | `ptBR` | Português (Brasil) | ✅ | ✅ | | `esES` | Espanhol (Espanha) | ❌ | ✅ | | `enUS` | Inglês (Estados Unidos) | ❌ | ✅ | **Atenção:** Apenas o idioma Português contém a funcionalidade de tradução em LIBRAS. Para outros idiomas, use sempre o modo de voz. ## Inicialização com Idioma Específico Para inicializar a Rybená em um idioma específico, adicione o parâmetro `lang` à URL do script: ```html ``` ### Exemplos de Inicialização ```html ``` ```html ``` ```html ``` ## Valor Padrão O valor padrão para o idioma é `ptBR` (Português). Se você não especificar o parâmetro `lang`, a Rybená será inicializada em Português. ## Combinação com Modo API Você pode combinar o parâmetro de idioma com o modo API: ```html ``` ## Exemplos de Uso ### Exemplo 1: Inicialização em Português com LIBRAS Este exemplo mostra como inicializar a Rybená em Português e usar LIBRAS: ```html Rybená - Português

Exemplo em Português

``` ### Exemplo 2: Inicialização em Espanhol Este exemplo mostra como inicializar a Rybená em Espanhol: ```html Rybená - Español

Ejemplo en Español

``` ### Exemplo 3: Inicialização em Inglês Este exemplo mostra como inicializar a Rybená em Inglês: ```html Rybená - English

English Example

``` ### Exemplo 4: Seleção Dinâmica de Idioma Este exemplo mostra como permitir que o usuário selecione o idioma dinamicamente: ```html Rybená - Seleção de Idioma

Selecione o Idioma

``` ### Exemplo 5: Detecção de Idioma do Navegador Este exemplo mostra como detectar o idioma do navegador e carregar a Rybená automaticamente: ```html Rybená - Detecção Automática

Rybená - Detecção Automática de Idioma

Seu idioma: ...

``` ## Boas Práticas **Dica:** Sempre especifique o idioma explicitamente se você sabe qual idioma sua aplicação usará. Isso garante uma experiência consistente para todos os usuários. **Atenção:** Lembre-se de que LIBRAS está disponível apenas para Português. Se você tentar usar `switchToLibras()` em outros idiomas, a tradução não funcionará corretamente. **Sugestão:** Para aplicações multilíngues, considere salvar a preferência de idioma do usuário em localStorage e carregar a Rybená com esse idioma na próxima visita. ## Resumo dos Parâmetros | Parâmetro | Valores Aceitos | Padrão | Descrição | | --------- | ---------------------- | ------ | ----------------------- | | `lang` | `ptBR`, `esES`, `enUS` | `ptBR` | Idioma de inicialização | ## Conteúdo Relacionado Traduza textos e controle a reprodução Configure o modo API e faça sua primeira chamada Veja exemplos de integração completos # Controle do Player (/docs/api/player-control) ## Visibilidade do Player ### openPlayer() Mostra o player Rybená na tela. ```javascript RybenaApi.getInstance().openPlayer() ``` **Retorno:** `void` **Exemplo:** ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); }); ``` ### closePlayer() Esconde o player Rybená da tela. ```javascript RybenaApi.getInstance().closePlayer() ``` **Retorno:** `void` **Exemplo:** ```javascript // Esconde o player após 5 segundos setTimeout(() => { RybenaApi.getInstance().closePlayer(); }, 5000); ``` ## Modo de Exibição ### setToNormalMode() Define o player para o modo normal, com cabeçalho e botões de ação visíveis. ```javascript RybenaApi.getInstance().setToNormalMode() ``` **Retorno:** `void` **Exemplo:** ```javascript RybenaApi.getInstance().setToNormalMode(); ``` ### setToTransparentMode() Define o player para o modo transparente, sem cabeçalho e botões de ação. ```javascript RybenaApi.getInstance().setToTransparentMode() ``` **Retorno:** \`void\*\* **Atenção:** Neste modo, a Rybená não terá suas funções de controle de tradução, e não será possível interagir com a Rybená. **Exemplo:** ```javascript RybenaApi.getInstance().setToTransparentMode(); ``` ## Posicionamento ### setCoordinates(x, y) Posiciona o player Rybená nas coordenadas especificadas. ```javascript RybenaApi.getInstance().setCoordinates(x, y) ``` **Parâmetros:** * `x` (number): Coordenada horizontal em pixels * `y` (number): Coordenada vertical em pixels **Retorno:** `void` **Exemplo:** ```javascript // Posiciona o player no canto superior esquerdo RybenaApi.getInstance().setCoordinates(20, 20); // Posiciona o player no centro da tela const centerX = window.innerWidth / 2 - 200; const centerY = window.innerHeight / 2 - 150; RybenaApi.getInstance().setCoordinates(centerX, centerY); ``` **Dica:** Use `window.innerWidth` e `window.innerHeight` para calcular posições relativas ao tamanho da janela. ## Tamanho ### setSize(value) Modifica o tamanho do player de forma proporcional. ```javascript RybenaApi.getInstance().setSize(value) ``` **Parâmetros:** * `value` (number): Valor de escala (ex: 1.0 para tamanho normal, 1.5 para 50% maior) **Retorno:** \`void\*\* **Exemplo:** ```javascript // Tamanho normal RybenaApi.getInstance().setSize(1.0); // 50% maior RybenaApi.getInstance().setSize(1.5); // 25% menor RybenaApi.getInstance().setSize(0.75); ``` ## Exemplos Completos ### Exemplo 1: Player Flutuante Este exemplo cria um player que pode ser movido para diferentes posições: ```javascript RybenaApi.getInstance().handleLoaded(() => { // Mostra o player RybenaApi.getInstance().openPlayer(); // Posiciona no canto superior direito RybenaApi.getInstance().setCoordinates( window.innerWidth - 420, 20 ); // Define tamanho menor RybenaApi.getInstance().setSize(0.8); }); ``` ### Exemplo 2: Player em Modo Transparente Este exemplo mostra como usar o modo transparente para uma experiência mais imersiva: ```javascript RybenaApi.getInstance().handleLoaded(() => { // Mostra o player RybenaApi.getInstance().openPlayer(); // Define modo transparente RybenaApi.getInstance().setToTransparentMode(); // Posiciona no centro const centerX = window.innerWidth / 2 - 200; const centerY = window.innerHeight / 2 - 150; RybenaApi.getInstance().setCoordinates(centerX, centerY); // Traduz um texto RybenaApi.getInstance().translate("Bem-vindo!"); }); ``` ### Exemplo 3: Player Responsivo Este exemplo ajusta o tamanho e posição do player baseado no tamanho da tela: ```javascript function adjustPlayerForScreen() { const isMobile = window.innerWidth < 768; if (isMobile) { // Tamanho menor para mobile RybenaApi.getInstance().setSize(0.6); RybenaApi.getInstance().setCoordinates(10, 10); } else { // Tamanho normal para desktop RybenaApi.getInstance().setSize(1.0); RybenaApi.getInstance().setCoordinates(20, 20); } } RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); adjustPlayerForScreen(); // Ajusta quando a janela é redimensionada window.addEventListener('resize', adjustPlayerForScreen); }); ``` ### Exemplo 4: Toggle de Visibilidade Este exemplo cria um botão para alternar a visibilidade do player: ```javascript let isPlayerVisible = false; function togglePlayer() { if (isPlayerVisible) { RybenaApi.getInstance().closePlayer(); } else { RybenaApi.getInstance().openPlayer(); } isPlayerVisible = !isPlayerVisible; } RybenaApi.getInstance().handleLoaded(() => { // Configura botão document.getElementById('togglePlayerBtn').addEventListener('click', togglePlayer); }); ``` ## Boas Práticas **Dica:** Sempre chame `openPlayer()` antes de definir posição ou tamanho para garantir que o player esteja visível. **Atenção:** O modo transparente remove todos os controles do player. Use apenas quando você não precisa de interação direta com o player. **Sugestão:** Para uma melhor experiência do usuário, considere salvar as preferências de posição e tamanho do player em localStorage. ## Resumo dos Métodos | Método | Descrição | Parâmetros | | ------------------------ | ------------------------------- | -------------------------- | | `openPlayer()` | Mostra o player | Nenhum | | `closePlayer()` | Esconde o player | Nenhum | | `setToNormalMode()` | Modo normal com controles | Nenhum | | `setToTransparentMode()` | Modo transparente sem controles | Nenhum | | `setCoordinates(x, y)` | Define posição | `x` (number), `y` (number) | | `setSize(value)` | Define tamanho | `value` (number) | ## Conteúdo Relacionado Traduza textos e controle a reprodução Configure callbacks para eventos Veja exemplos de integração completos # Controle de Tradução (/docs/api/translation-control) ## Tradução de Texto ### translate(text) Traduz o texto especificado usando o modo de tradução atual (LIBRAS ou voz). ```javascript RybenaApi.getInstance().translate(text) ``` **Parâmetros:** * `text` (string): O texto a ser traduzido **Retorno:** `void` **Exemplo:** ```javascript RybenaApi.getInstance().translate("Olá, bem-vindo à Rybená!"); ``` ## Modos de Tradução ### switchToLibras() Alterna para o modo de tradução em LIBRAS (Língua Brasileira de Sinais). ```javascript RybenaApi.getInstance().switchToLibras() ``` **Retorno:** `void` **Atenção:** Apenas o idioma Português contém a funcionalidade de tradução em LIBRAS. **Exemplo:** ```javascript RybenaApi.getInstance().switchToLibras(); RybenaApi.getInstance().translate("Este texto será traduzido em LIBRAS"); ``` ### switchToVoz() Alterna para o modo de tradução por voz (síntese de voz). ```javascript RybenaApi.getInstance().switchToVoz() ``` **Retorno:** `void` **Exemplo:** ```javascript RybenaApi.getInstance().switchToVoz(); RybenaApi.getInstance().translate("Este texto será lido em voz alta"); ``` ## Controle de Reprodução ### pause() Pausa a tradução atual. A tradução pode ser retomada de onde parou usando `play()`. ```javascript RybenaApi.getInstance().pause() ``` **Retorno:** `void` **Exemplo:** ```javascript RybenaApi.getInstance().pause(); ``` ### play() Retoma a tradução pausada. Se não houver tradução pausada, não faz nada. ```javascript RybenaApi.getInstance().play() ``` **Retorno:** `void` **Exemplo:** ```javascript RybenaApi.getInstance().play(); ``` ### stop() Para a tradução atual e limpa o buffer de tradução. Diferente de `pause()`, `stop()` remove todo o conteúdo pendente de tradução. ```javascript RybenaApi.getInstance().stop() ``` **Retorno:** `void` **Atenção:** A diferença entre `pause()` e `stop()` é: * **pause()**: Apenas pausa a Rybená, e quando executar `play()` ela traduzirá de onde pausou * **stop()**: Limpa o buffer de tradução da Rybená, e quando executar `play()` ela não reproduzirá nada **Exemplo:** ```javascript RybenaApi.getInstance().stop(); ``` ## Velocidade de Tradução ### setSpeed(speed) Define a velocidade da tradução. ```javascript RybenaApi.getInstance().setSpeed(speed) ``` **Parâmetros:** * `speed` (number): Velocidade da tradução (0.5 a 1.5) **Valores Aceitos:** | Valor | Descrição | | ----- | --------------- | | 0.5 | Muito lento | | 0.75 | Lento | | 1.0 | Normal (padrão) | | 1.25 | Rápido | | 1.5 | Muito rápido | **Retorno:** `void` **Exemplo:** ```javascript // Velocidade normal RybenaApi.getInstance().setSpeed(1.0); // Velocidade rápida RybenaApi.getInstance().setSpeed(1.5); // Velocidade lenta RybenaApi.getInstance().setSpeed(0.75); ``` ## Exemplos Completos ### Exemplo 1: Tradução Básica Este exemplo mostra como traduzir um texto simples: ```javascript RybenaApi.getInstance().handleLoaded(() => { // Mostra o player RybenaApi.getInstance().openPlayer(); // Traduz um texto RybenaApi.getInstance().translate("Bem-vindo à Rybená!"); }); ``` ### Exemplo 2: Alternância entre Modos Este exemplo mostra como alternar entre LIBRAS e voz: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); // Traduz em LIBRAS RybenaApi.getInstance().switchToLibras(); RybenaApi.getInstance().translate("Este texto está em LIBRAS"); // Aguarda 3 segundos setTimeout(() => { // Traduz em voz RybenaApi.getInstance().switchToVoz(); RybenaApi.getInstance().translate("Este texto está em voz"); }, 3000); }); ``` ### Exemplo 3: Controle de Reprodução Este exemplo mostra como controlar a reprodução da tradução: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); // Traduz um texto longo RybenaApi.getInstance().translate("Este é um texto longo que pode ser pausado e retomado durante a tradução."); // Pausa após 2 segundos setTimeout(() => { RybenaApi.getInstance().pause(); console.log("Tradução pausada"); // Retoma após 2 segundos setTimeout(() => { RybenaApi.getInstance().play(); console.log("Tradução retomada"); }, 2000); }, 2000); }); ``` ### Exemplo 4: Ajuste de Velocidade Este exemplo mostra como ajustar a velocidade da tradução: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); // Traduz em velocidade lenta RybenaApi.getInstance().setSpeed(0.75); RybenaApi.getInstance().translate("Esta tradução está em velocidade lenta"); // Aguarda a tradução terminar RybenaApi.getInstance().handleTranslate(() => { // Traduz em velocidade rápida RybenaApi.getInstance().setSpeed(1.5); RybenaApi.getInstance().translate("Esta tradução está em velocidade rápida"); }); }); ``` ### Exemplo 5: Player de Tradução Este exemplo cria um player de tradução completo com controles: ```javascript RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); // Configura botões document.getElementById('translateBtn').addEventListener('click', () => { const text = document.getElementById('textInput').value; if (text) { RybenaApi.getInstance().translate(text); } }); document.getElementById('pauseBtn').addEventListener('click', () => { RybenaApi.getInstance().pause(); }); document.getElementById('playBtn').addEventListener('click', () => { RybenaApi.getInstance().play(); }); document.getElementById('stopBtn').addEventListener('click', () => { RybenaApi.getInstance().stop(); }); document.getElementById('librasBtn').addEventListener('click', () => { RybenaApi.getInstance().switchToLibras(); }); document.getElementById('vozBtn').addEventListener('click', () => { RybenaApi.getInstance().switchToVoz(); }); // Controle de velocidade document.getElementById('speedSlow').addEventListener('click', () => { RybenaApi.getInstance().setSpeed(0.75); }); document.getElementById('speedNormal').addEventListener('click', () => { RybenaApi.getInstance().setSpeed(1.0); }); document.getElementById('speedFast').addEventListener('click', () => { RybenaApi.getInstance().setSpeed(1.5); }); }); ``` ### Exemplo 6: Tradução em Sequência Este exemplo mostra como traduzir múltiplos textos em sequência: ```javascript const texts = [ "Primeira frase", "Segunda frase", "Terceira frase" ]; let currentIndex = 0; function translateNext() { if (currentIndex < texts.length) { RybenaApi.getInstance().translate(texts[currentIndex]); currentIndex++; } } RybenaApi.getInstance().handleLoaded(() => { RybenaApi.getInstance().openPlayer(); // Traduz o próximo texto quando o anterior terminar RybenaApi.getInstance().handleTranslate(() => { translateNext(); }); // Começa a tradução translateNext(); }); ``` ## Boas Práticas **Dica:** Use `handleTranslate()` para executar ações após a tradução ser concluída, como traduzir o próximo texto em uma sequência. **Atenção:** Lembre-se de que apenas o idioma Português suporta tradução em LIBRAS. Para outros idiomas, use sempre `switchToVoz()`. **Sugestão:** Para textos longos, considere dividi-los em partes menores e traduzir em sequência para melhor controle da experiência do usuário. ## Resumo dos Métodos | Método | Descrição | Parâmetros | | ------------------ | ------------------------ | ------------------------- | | `translate(text)` | Traduz um texto | `text` (string) | | `switchToLibras()` | Alterna para modo LIBRAS | Nenhum | | `switchToVoz()` | Alterna para modo voz | Nenhum | | `pause()` | Pausa a tradução | Nenhum | | `play()` | Retoma a tradução | Nenhum | | `stop()` | Para e limpa a tradução | Nenhum | | `setSpeed(speed)` | Define velocidade | `speed` (number: 0.5-1.5) | ## Conteúdo Relacionado Gerencie visibilidade, posição e tamanho Alterne entre idiomas suportados Configure callbacks para eventos Veja exemplos de integração completos # Suporte TypeScript (/docs/api/typescript-support) ## Definições de Tipos Para usar TypeScript com a API Rybená, você precisa declarar os tipos globais. Adicione o seguinte ao seu arquivo de declarações de tipos (ex: `src/types/rybena.d.ts`): ```typescript declare global { interface Window { RybenaApi?: { getInstance: () => RybenaApiInstance; }; RybenaDOM?: { getInstance: () => RybenaDOMInstance; }; } } interface RybenaApiInstance { // Player Control openPlayer: () => void; closePlayer: () => void; setToNormalMode: () => void; setToTransparentMode: () => void; setCoordinates: (x: number, y: number) => void; setSize: (value: number) => void; // Translation Control translate: (text: string) => void; switchToLibras: () => void; switchToVoz: () => void; pause: () => void; play: () => void; stop: () => void; setSpeed: (speed: number) => void; // Event Handlers handleLoaded: (callback: () => void) => void; handleTranslate: (callback: () => void) => void; isTranslating: () => boolean; // Accessibility Features // Visual Adjustments toggleLineHeight: () => void; nextLineHeight: () => void; previousLineHeight: () => void; startLineHeight: () => void; stopLineHeight: () => void; toggleLetterSpacing: () => void; nextLetterSpacing: () => void; previousLetterSpacing: () => void; startLetterSpacing: () => void; stopLetterSpacing: () => void; toggleZoom: () => void; nextZoom: () => void; previousZoom: () => void; startZoom: () => void; stopZoom: () => void; toggleDarkContrast: () => void; startDarkContrast: () => void; stopDarkContrast: () => void; toggleLightContrast: () => void; startLightContrast: () => void; stopLightContrast: () => void; toggleInvertedContrast: () => void; startInvertedContrast: () => void; stopInvertedContrast: () => void; toggleHighSaturation: () => void; startHighSaturation: () => void; stopHighSaturation: () => void; toggleLowSaturation: () => void; startLowSaturation: () => void; stopLowSaturation: () => void; toggleNoSaturation: () => void; startNoSaturation: () => void; stopNoSaturation: () => void; // Reading Aids toggleCursorSize: () => void; startCursorSize: () => void; stopCursorSize: () => void; toggleCursorGuide: () => void; startCursorGuide: () => void; stopCursorGuide: () => void; toggleAmplifyCursor: () => void; startAmplifyCursor: () => void; stopAmplifyCursor: () => void; toggleDislexiaFont: () => void; startDislexiaFont: () => void; stopDislexiaFont: () => void; toggleLinkHighlight: () => void; startLinkHighlight: () => void; stopLinkHighlight: () => void; toggleTitleHighlight: () => void; startTitleHighlight: () => void; stopTitleHighlight: () => void; toggleReadingMask: () => void; startReadingMask: () => void; stopReadingMask: () => void; toggleReadingMode: () => void; startReadingMode: () => void; stopReadingMode: () => void; // Navigation & Other toggleDictionary: () => void; startDictionary: () => void; stopDictionary: () => void; toggleImageDescription: () => void; startImageDescription: () => void; stopImageDescription: () => void; togglePauseAnimations: () => void; startPauseAnimations: () => void; stopPauseAnimations: () => void; toggleKeyboardNavigation: () => void; startKeyboardNavigation: () => void; stopKeyboardNavigation: () => void; } interface RybenaDOMInstance { getRybenaScripts: (mode?: string) => void; } export {}; ``` ## Tipos Auxiliares Você pode criar tipos auxiliares para melhorar a segurança do seu código: ```typescript // Tipos de velocidade de tradução type TranslationSpeed = 0.5 | 0.75 | 1.0 | 1.25 | 1.5; // Tipos de modo de tradução type TranslationMode = 'libras' | 'voz'; // Tipos de idioma type Language = 'ptBR' | 'esES' | 'enUS'; // Tipos de contraste type ContrastMode = 'dark' | 'light' | 'inverted'; // Tipos de saturação type SaturationMode = 'high' | 'low' | 'none'; // Interface para configurações da Rybená interface RybenaConfig { language?: Language; mode?: TranslationMode; speed?: TranslationSpeed; autoOpen?: boolean; } // Interface para preferências de acessibilidade interface AccessibilityPreferences { lineHeight?: boolean; letterSpacing?: boolean; zoom?: boolean; contrast?: ContrastMode; saturation?: SaturationMode; cursorSize?: boolean; cursorGuide?: boolean; dislexiaFont?: boolean; linkHighlight?: boolean; titleHighlight?: boolean; readingMask?: boolean; readingMode?: boolean; dictionary?: boolean; imageDescription?: boolean; pauseAnimations?: boolean; keyboardNavigation?: boolean; } ``` ## Exemplos com TypeScript ### Exemplo 1: Hook Customizado React Este exemplo mostra como criar um hook customizado React com TypeScript: ```typescript import { useEffect, useState, useCallback, useRef } from 'react'; type TranslationMode = 'libras' | 'voz'; type TranslationSpeed = 0.5 | 0.75 | 1.0 | 1.25 | 1.5; interface UseRybenaReturn { isLoaded: boolean; isTranslating: boolean; translate: (text: string) => void; pause: () => void; play: () => void; stop: () => void; setMode: (mode: TranslationMode) => void; setSpeed: (speed: TranslationSpeed) => void; openPlayer: () => void; closePlayer: () => void; } export function useRybena(): UseRybenaReturn { const [isLoaded, setIsLoaded] = useState(false); const [isTranslating, setIsTranslating] = useState(false); const apiRef = useRef(null); useEffect(() => { // Carrega o script Rybená const script = document.createElement('script'); script.src = 'https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api'; script.async = true; script.onload = () => { if (window.RybenaApi) { const api = window.RybenaApi.getInstance(); apiRef.current = api; api.handleLoaded(() => { setIsLoaded(true); api.openPlayer(); api.switchToLibras(); }); api.handleTranslate(() => { setIsTranslating(false); }); } }; document.head.appendChild(script); return () => { if (document.head.contains(script)) { document.head.removeChild(script); } }; }, []); const translate = useCallback((text: string) => { if (apiRef.current && text.trim()) { setIsTranslating(true); apiRef.current.translate(text); } }, []); const pause = useCallback(() => { if (apiRef.current) { apiRef.current.pause(); } }, []); const play = useCallback(() => { if (apiRef.current) { apiRef.current.play(); } }, []); const stop = useCallback(() => { if (apiRef.current) { apiRef.current.stop(); setIsTranslating(false); } }, []); const setMode = useCallback((mode: TranslationMode) => { if (apiRef.current) { if (mode === 'libras') { apiRef.current.switchToLibras(); } else { apiRef.current.switchToVoz(); } } }, []); const setSpeed = useCallback((speed: TranslationSpeed) => { if (apiRef.current) { apiRef.current.setSpeed(speed); } }, []); const openPlayer = useCallback(() => { if (apiRef.current) { apiRef.current.openPlayer(); } }, []); const closePlayer = useCallback(() => { if (apiRef.current) { apiRef.current.closePlayer(); } }, []); return { isLoaded, isTranslating, translate, pause, play, stop, setMode, setSpeed, openPlayer, closePlayer, }; } ``` ### Exemplo 2: Classe de Serviço Este exemplo mostra como criar uma classe de serviço com TypeScript: ```typescript type TranslationMode = 'libras' | 'voz'; type TranslationSpeed = 0.5 | 0.75 | 1.0 | 1.25 | 1.5; interface RybenaServiceConfig { language?: 'ptBR' | 'esES' | 'enUS'; mode?: TranslationMode; speed?: TranslationSpeed; autoOpen?: boolean; } class RybenaService { private api: RybenaApiInstance | null = null; private isLoaded: boolean = false; private config: RybenaServiceConfig; constructor(config: RybenaServiceConfig = {}) { this.config = { language: config.language || 'ptBR', mode: config.mode || 'libras', speed: config.speed || 1.0, autoOpen: config.autoOpen ?? true, }; } async initialize(): Promise { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = `https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api&lang=${this.config.language}`; script.async = true; script.onload = () => { if (window.RybenaApi) { this.api = window.RybenaApi.getInstance(); this.api.handleLoaded(() => { this.isLoaded = true; if (this.config.autoOpen) { this.api.openPlayer(); } if (this.config.mode === 'libras') { this.api.switchToLibras(); } else { this.api.switchToVoz(); } if (this.config.speed) { this.api.setSpeed(this.config.speed); } resolve(); }); } else { reject(new Error('Failed to load Rybena API')); } }; script.onerror = () => { reject(new Error('Failed to load Rybena script')); }; document.head.appendChild(script); }); } translate(text: string): void { if (!this.api || !this.isLoaded) { throw new Error('Rybena API not initialized'); } if (!text.trim()) { throw new Error('Text cannot be empty'); } this.api.translate(text); } pause(): void { if (!this.api || !this.isLoaded) { throw new Error('Rybena API not initialized'); } this.api.pause(); } play(): void { if (!this.api || !this.isLoaded) { throw new Error('Rybena API not initialized'); } this.api.play(); } stop(): void { if (!this.api || !this.isLoaded) { throw new Error('Rybena API not initialized'); } this.api.stop(); } setMode(mode: TranslationMode): void { if (!this.api || !this.isLoaded) { throw new Error('Rybena API not initialized'); } if (mode === 'libras') { this.api.switchToLibras(); } else { this.api.switchToVoz(); } } setSpeed(speed: TranslationSpeed): void { if (!this.api || !this.isLoaded) { throw new Error('Rybena API not initialized'); } this.api.setSpeed(speed); } isTranslating(): boolean { if (!this.api || !this.isLoaded) { return false; } return this.api.isTranslating(); } openPlayer(): void { if (!this.api || !this.isLoaded) { throw new Error('Rybena API not initialized'); } this.api.openPlayer(); } closePlayer(): void { if (!this.api || !this.isLoaded) { throw new Error('Rybena API not initialized'); } this.api.closePlayer(); } onTranslateComplete(callback: () => void): void { if (!this.api || !this.isLoaded) { throw new Error('Rybena API not initialized'); } this.api.handleTranslate(callback); } } // Uso const rybenaService = new RybenaService({ language: 'ptBR', mode: 'libras', speed: 1.0, autoOpen: true, }); await rybenaService.initialize(); rybenaService.translate('Olá, mundo!'); ``` ### Exemplo 3: Gerenciador de Acessibilidade Este exemplo mostra como criar um gerenciador de acessibilidade com TypeScript: ```typescript interface AccessibilityPreferences { lineHeight?: boolean; letterSpacing?: boolean; zoom?: boolean; contrast?: 'dark' | 'light' | 'inverted'; saturation?: 'high' | 'low' | 'none'; cursorSize?: boolean; cursorGuide?: boolean; dislexiaFont?: boolean; linkHighlight?: boolean; titleHighlight?: boolean; readingMask?: boolean; readingMode?: boolean; dictionary?: boolean; imageDescription?: boolean; pauseAnimations?: boolean; keyboardNavigation?: boolean; } class AccessibilityManager { private api: RybenaApiInstance | null = null; private preferences: AccessibilityPreferences = {}; constructor(api: RybenaApiInstance) { this.api = api; this.loadPreferences(); } private loadPreferences(): void { const saved = localStorage.getItem('rybenaAccessibility'); if (saved) { try { this.preferences = JSON.parse(saved); this.applyPreferences(); } catch (error) { console.error('Failed to load accessibility preferences:', error); } } } private savePreferences(): void { localStorage.setItem('rybenaAccessibility', JSON.stringify(this.preferences)); } private applyPreferences(): void { if (!this.api) return; // Visual Adjustments if (this.preferences.lineHeight) { this.api.toggleLineHeight(); } if (this.preferences.letterSpacing) { this.api.toggleLetterSpacing(); } if (this.preferences.zoom) { this.api.toggleZoom(); } if (this.preferences.contrast === 'dark') { this.api.toggleDarkContrast(); } else if (this.preferences.contrast === 'light') { this.api.toggleLightContrast(); } else if (this.preferences.contrast === 'inverted') { this.api.toggleInvertedContrast(); } if (this.preferences.saturation === 'high') { this.api.toggleHighSaturation(); } else if (this.preferences.saturation === 'low') { this.api.toggleLowSaturation(); } else if (this.preferences.saturation === 'none') { this.api.toggleNoSaturation(); } // Reading Aids if (this.preferences.cursorSize) { this.api.toggleCursorSize(); } if (this.preferences.cursorGuide) { this.api.toggleCursorGuide(); } if (this.preferences.dislexiaFont) { this.api.toggleDislexiaFont(); } if (this.preferences.linkHighlight) { this.api.toggleLinkHighlight(); } if (this.preferences.titleHighlight) { this.api.toggleTitleHighlight(); } if (this.preferences.readingMask) { this.api.toggleReadingMask(); } if (this.preferences.readingMode) { this.api.toggleReadingMode(); } // Navigation & Other if (this.preferences.dictionary) { this.api.toggleDictionary(); } if (this.preferences.imageDescription) { this.api.toggleImageDescription(); } if (this.preferences.pauseAnimations) { this.api.togglePauseAnimations(); } if (this.preferences.keyboardNavigation) { this.api.toggleKeyboardNavigation(); } } toggleLineHeight(): void { if (!this.api) return; this.api.toggleLineHeight(); this.preferences.lineHeight = !this.preferences.lineHeight; this.savePreferences(); } toggleLetterSpacing(): void { if (!this.api) return; this.api.toggleLetterSpacing(); this.preferences.letterSpacing = !this.preferences.letterSpacing; this.savePreferences(); } toggleZoom(): void { if (!this.api) return; this.api.toggleZoom(); this.preferences.zoom = !this.preferences.zoom; this.savePreferences(); } setContrast(mode: 'dark' | 'light' | 'inverted' | null): void { if (!this.api) return; // Remove contraste anterior se existir if (this.preferences.contrast) { if (this.preferences.contrast === 'dark') { this.api.toggleDarkContrast(); } else if (this.preferences.contrast === 'light') { this.api.toggleLightContrast(); } else if (this.preferences.contrast === 'inverted') { this.api.toggleInvertedContrast(); } } // Aplica novo contraste if (mode === 'dark') { this.api.toggleDarkContrast(); } else if (mode === 'light') { this.api.toggleLightContrast(); } else if (mode === 'inverted') { this.api.toggleInvertedContrast(); } this.preferences.contrast = mode || undefined; this.savePreferences(); } setSaturation(mode: 'high' | 'low' | 'none' | null): void { if (!this.api) return; // Remove saturação anterior se existir if (this.preferences.saturation) { if (this.preferences.saturation === 'high') { this.api.toggleHighSaturation(); } else if (this.preferences.saturation === 'low') { this.api.toggleLowSaturation(); } else if (this.preferences.saturation === 'none') { this.api.toggleNoSaturation(); } } // Aplica nova saturação if (mode === 'high') { this.api.toggleHighSaturation(); } else if (mode === 'low') { this.api.toggleLowSaturation(); } else if (mode === 'none') { this.api.toggleNoSaturation(); } this.preferences.saturation = mode || undefined; this.savePreferences(); } getPreferences(): AccessibilityPreferences { return { ...this.preferences }; } } // Uso RybenaApi.getInstance().handleLoaded(() => { const api = RybenaApi.getInstance(); const accessibilityManager = new AccessibilityManager(api); // Ativa altura da linha accessibilityManager.toggleLineHeight(); // Define contraste escuro accessibilityManager.setContrast('dark'); // Obtém preferências atuais const prefs = accessibilityManager.getPreferences(); console.log('Preferências:', prefs); }); ``` ## Benefícios do TypeScript **Autocompletar:** Com tipos definidos, seu IDE fornecerá autocompletar inteligente para todos os métodos da API Rybená. **Verificação de Erros:** TypeScript detectará erros em tempo de compilação, como passar parâmetros incorretos ou chamar métodos que não existem. **Refatoração Segura:** Com tipos, você pode refatorar seu código com confiança, sabendo que o TypeScript detectará qualquer quebra. **Documentação Viva:** Os tipos servem como documentação, mostrando claramente quais parâmetros cada método aceita e quais valores retorna. ## Boas Práticas **Sugestão:** Crie tipos auxiliares para valores que têm um conjunto limitado de opções, como `TranslationSpeed` e `TranslationMode`. **Atenção:** Sempre verifique se a API está carregada antes de chamar métodos. Use `isLoaded` ou verifique se `api` não é null. **Dica:** Use classes de serviço ou hooks customizados para encapsular a lógica da API Rybená e tornar seu código mais reutilizável. **Sugestão:** Salve as preferências do usuário em localStorage e use tipos para garantir que os dados sejam válidos. ## Conteúdo Relacionado # Configuração da Rybená (/docs/getting-started/configuration) ## Sintaxe Básica Para adicionar parâmetros, use o seguinte formato: ```html ``` Nota: Use `&` para separar múltiplos parâmetros. A ordem dos parâmetros não importa. ## Parâmetros de Posição ### Posição do Player (Desktop) Controla onde o player de tradução aparece na tela em dispositivos desktop. | Parâmetro | Valores | Padrão | Descrição | | ---------------- | --------------- | ------ | ---------------------------- | | `positionPlayer` | `left`, `right` | `left` | Posição horizontal do player | ```html ``` ### Posição do Player (Mobile) Controla onde o player aparece em dispositivos móveis. | Parâmetro | Valores | Padrão | Descrição | | ---------------------- | --------------- | ------ | -------------------------------------- | | `positionPlayerMobile` | `left`, `right` | `left` | Posição horizontal do player em mobile | ```html ``` ### Posição da Barra de Acessibilidade Controla onde a barra de acessibilidade aparece na tela. Atenção: Esta configuração só funciona quando não há uma{" "} Barra de acessibilidade customizada . | Parâmetro | Valores | Padrão | Descrição | | -------------- | ------------------------------- | ------ | --------------------------- | | `positionBar` | `left`, `right` | `left` | Posição horizontal da barra | | `offsetTopBar` | `40%`, `100px`, `12rem`, `30vh` | `40%` | Posição vertical da barra | ```html ``` ### Posição do Player (Eixos X e Y) Ajuste fino da posição do player na página. | Parâmetro | Valores | Padrão | Descrição | | --------- | --------------- | ------ | ---------------------------- | | `offsetX` | número (pixels) | `60` | Posição horizontal do player | | `offsetY` | número (pixels) | `60` | Posição vertical do player | ```html ``` ## Parâmetros de Aparência ### Tamanho do Player Controla o tamanho do player de tradução. | Parâmetro | Valores | Padrão | Descrição | | --------- | --------------- | ------ | ----------------- | | `size` | número (pixels) | `280` | Tamanho do player | ```html ``` ### Cor da Barra de Acessibilidade Personaliza a cor de fundo da barra de acessibilidade. Atenção: Esta configuração só funciona quando não há uma{" "} Barra de acessibilidade customizada | Parâmetro | Valores | Padrão | Descrição | | -------------------- | ------------------ | --------- | --------------------- | | `backgroundColorBar` | código hexadecimal | `#316181` | Cor de fundo da barra | ```html ``` ### Ordem da Pilha (Z-Index) Controla a ordem de sobreposição da barra de acessibilidade. | Parâmetro | Valores | Padrão | Descrição | | ----------- | ------- | ------ | ----------------------- | | `zIndexBar` | número | - | Ordem da pilha da barra | ```html ``` ## Parâmetros de Comportamento ### Tempo de Renderização Controla o tempo de espera antes de renderizar a barra de acessibilidade. | Parâmetro | Valores | Padrão | Recomendado | Descrição | | --------------- | ----------- | ------ | ----------- | ------------------------------ | | `renderTimeout` | número (ms) | `0` | `300` | Tempo de renderização da barra | ```html ``` Dica: Use `renderTimeout=300` para evitar problemas de renderização em sites com carregamento lento. ### Modo de Operação Controla o modo de funcionamento da Rybená. | Parâmetro | Valores | Padrão | Descrição | | --------- | ------------- | ------ | ---------------- | | `mode` | `full`, `api` | `full` | Modo de operação | ```html ``` Atenção: O modo `api` requer implementação adicional. Consulte a Documentação da API para mais detalhes. ## Parâmetros de Idioma ### Idioma Inicial Define o idioma em que a Rybená será inicializada. | Parâmetro | Valores | Padrão | Descrição | | --------- | ---------------------- | ------ | -------------- | | `lang` | `ptBR`, `esES`, `enUS` | `ptBR` | Idioma inicial | ```html ``` Importante: A funcionalidade de tradução em LIBRAS está disponível apenas quando a Rybená está configurada em Português (ptBR). Para outros idiomas, apenas as funcionalidades de voz e acessibilidade visual estão disponíveis. ## Parâmetros de Botões ### Desabilitar Botões Específicos Controla quais botões da Rybená serão exibidos. | Parâmetro | Valores | Padrão | Descrição | | ---------------------------- | --------------- | ------- | ---------------------------------- | | `disableLibrasButton` | `true`, `false` | `false` | Desabilita botão de LIBRAS | | `disableVoiceButton` | `true`, `false` | `false` | Desabilita botão de Voz | | `disableAccessibilityButton` | `true`, `false` | `false` | Desabilita botão de Acessibilidade | ```html ``` Nota: Quando um botão é desabilitado, ele não é inserido no DOM, economizando recursos. Os atalhos de teclado (ALT+SHIFT+1/2/3) também respeitam os botões desabilitados. ## Parâmetros de Privacidade ### Desabilitar Coleta de Dados Controla a coleta de dados de soletramento para melhoria da base de sinais. | Parâmetro | Valores | Padrão | Descrição | | ------------ | --------------- | ------- | -------------------------- | | `doNotTrack` | `true`, `false` | `false` | Desabilita coleta de dados | ```html ``` Dica: Saiba mais sobre privacidade e coleta de dados na seção{" "} Privacidade e Coleta de Dados. ## Exemplos de Configuração ### Configuração Minimalista Player pequeno, à direita, sem botão de LIBRAS: ```html ``` ### Configuração para Sites Corporativos Barra personalizada, player maior, em inglês: ```html ``` ### Configuração para Sites Brasileiros Configuração completa em português: ```html ``` ### Configuração para Integração API Modo API com desabilitação de coleta de dados: ```html ``` ## Próximos Passos Agora que você conhece os parâmetros de configuração, você pode: * Criar barras de acessibilidade customizadas * Desabilitar funcionalidades específicas * Configurar políticas de segurança (CSP) * Configurar múltiplos idiomas * Configurar privacidade e coleta de dados ## Para Desenvolvedores # Configuração CSP (/docs/getting-started/csp-configuration) ## Configuração Recomendada ```http Content-Security-Policy: default-src 'self'; script-src 'self' cdn.rybena.com.br libras.rybena.com.br; connect-src 'self' libras.rybena.com.br tts.rybena.com.br dicio.rybena.com.br repository.rybena.com.br; frame-src repository.rybena.com.br; style-src 'self' 'unsafe-inline'; img-src 'self' data: cdn.rybena.com.br libras.rybena.com.br repository.rybena.com.br; font-src 'self' cdn.rybena.com.br repository.rybena.com.br; media-src 'self' repository.rybena.com.br; object-src 'none'; ``` ## Explicação das Diretivas | Diretiva | Propósito | | ------------- | ------------------------------------------------------ | | `script-src` | Permite carregar scripts do CDN da Rybená | | `connect-src` | Permite conexões com os servidores de tradução e TTS | | `frame-src` | Permite iframes do repositório de recursos | | `style-src` | Permite estilos inline necessários para o player | | `img-src` | Permite carregar imagens dos servidores da Rybená | | `font-src` | Permite carregar fontes dos servidores da Rybená | | `media-src` | Permite carregar mídia (vídeos, áudios) do repositório | ## Exemplo em HTML ```html ``` ## Exemplo em Next.js ```javascript // next.config.js const cspHeader = ` default-src 'self'; script-src 'self' cdn.rybena.com.br libras.rybena.com.br; connect-src 'self' libras.rybena.com.br tts.rybena.com.br dicio.rybena.com.br repository.rybena.com.br; frame-src repository.rybena.com.br; style-src 'self' 'unsafe-inline'; img-src 'self' data: cdn.rybena.com.br libras.rybena.com.br repository.rybena.com.br; font-src 'self' cdn.rybena.com.br repository.rybena.com.br; media-src 'self' repository.rybena.com.br; object-src 'none'; `; module.exports = { async headers() { return [ { source: "/:path*", headers: [ { key: "Content-Security-Policy", value: cspHeader.replace(/\n/g, ""), }, ], }, ]; }, }; ``` ## Exemplo em Nginx ```nginx # nginx.conf add_header Content-Security-Policy "default-src 'self'; script-src 'self' cdn.rybena.com.br libras.rybena.com.br; connect-src 'self' libras.rybena.com.br tts.rybena.com.br dicio.rybena.com.br repository.rybena.com.br; frame-src repository.rybena.com.br; style-src 'self' 'unsafe-inline'; img-src 'self' data: cdn.rybena.com.br libras.rybena.com.br repository.rybena.com.br; font-src 'self' cdn.rybena.com.br repository.rybena.com.br; media-src 'self' repository.rybena.com.br; object-src 'none';" always; ``` ## Exemplo em Apache ```apache # .htaccess Header always set Content-Security-Policy "default-src 'self'; script-src 'self' cdn.rybena.com.br libras.rybena.com.br; connect-src 'self' libras.rybena.com.br tts.rybena.com.br dicio.rybena.com.br repository.rybena.com.br; frame-src repository.rybena.com.br; style-src 'self' 'unsafe-inline'; img-src 'self' data: cdn.rybena.com.br libras.rybena.com.br repository.rybena.com.br; font-src 'self' cdn.rybena.com.br repository.rybena.com.br; media-src 'self' repository.rybena.com.br; object-src 'none';" ``` Dica: Esta configuração permite que todos os recursos necessários para o funcionamento da Rybená sejam carregados corretamente, mantendo a segurança do seu site. ## Próximos Passos Agora que você configurou o CSP, você pode: * Criar uma barra de acessibilidade customizada * Desabilitar funcionalidades específicas * Configurar privacidade e coleta de dados # Barra de Acessibilidade Customizada (/docs/getting-started/customization) ## Classes Disponíveis Use estas classes nos elementos desejados (botões ou links): | Classe | Funcionalidade | | -------------------------- | --------------------------------------- | | `btn-rybena-sign-language` | Tradução em LIBRAS | | `btn-rybena-voice` | Texto para Voz | | `btn-rybena-vision` | Acessibilidade Visual (+Acessibilidade) | ## Estrutura Básica Todos os botões devem estar dentro de uma `div` com o ID `custom-rybena-div`: ```html
``` ## Exemplo com Imagens Você pode usar imagens personalizadas para os botões: ```html
Tradução em LIBRAS Texto para Voz Acessibilidade Visual
``` ## Exemplo com Links Você também pode usar links em vez de botões: ```html ``` ## Exemplo Completo com Estilização ```html
``` Atenção: Quando você usa uma barra customizada, os parâmetros de configuração da barra padrão (como `positionBar`, `backgroundColorBar`, `offsetTopBar`) não terão efeito. ## Exemplo Completo de Customização Aqui está um exemplo completo combinando barra customizada com outras configurações: ```html {/* Rybená Script */} {/* Custom Styles */} {/* Custom Accessibility Bar */}
{/* Your Content */}

Bem-vindo ao Meu Site

Este é um exemplo de site com Rybená customizada.

``` ## Próximos Passos Agora que você sabe como criar uma barra customizada, você pode: * Desabilitar funcionalidades específicas * Configurar políticas de segurança (CSP) * Configurar múltiplos idiomas ## Para Desenvolvedores # Privacidade e Coleta de Dados (/docs/getting-started/data-privacy) Documentos Relacionados: ## O que é Coletado? ### Dados de Soletramento Quando um usuário solicita a tradução de uma palavra que não possui um sinal correspondente em nossa base, o sistema realiza o soletramento dessa palavra. Esses dados de soletramento são coletados anonimamente para: * Identificar palavras que necessitam de sinais específicos * Analisar padrões de uso de vocabulário * Priorizar o desenvolvimento de novos sinais * Melhorar a qualidade e abrangência da tradução Proteção de Dados: Todos os dados coletados são{" "} completamente anônimos e não contêm informações que possam identificar o usuário, o site de origem ou qualquer dado pessoal. ### O que NÃO é Coletado A Rybená **NÃO** coleta: * ❌ Endereços IP * ❌ Informações do usuário * ❌ Identificação do site de origem * ❌ Dados pessoais identificáveis * ❌ Frases completas (apenas palavras individuais) * ❌ Números (são ignorados automaticamente) * ❌ Contexto das palavras * ❌ Histórico de navegação * ❌ Cookies de rastreamento ## Como Funciona a Coleta

1\. Usuário seleciona texto

O usuário seleciona um texto na página e solicita tradução em LIBRAS.

2\. Sistema verifica a base de sinais

O sistema verifica se existe um sinal correspondente para cada palavra.

3\. Soletramento quando necessário

Se não houver sinal, a palavra é soletrada pelo avatar 3D.

4\. Coleta anônima

A palavra soletrada é coletada de forma anônima para análise.

5\. Melhoria contínua

Os dados são usados para priorizar o desenvolvimento de novos sinais.

## Segurança dos Dados A Rybená implementa múltiplas camadas de segurança para proteger os dados coletados: ### Criptografia * 🔒 **Criptografia de 256 bits** (nível militar) para todos os dados transmitidos * 🔒 **Conexão segura** via SSL/TLS com certificados válidos * 🔒 **Criptografia em repouso** para dados armazenados ### Anonimato * 🔒 **Anonimato total** - não registramos IP, usuário ou site * 🔒 **Apenas palavras** - coletamos unicamente a palavra soletrada * 🔒 **Sem contexto** - não armazenamos frases completas * 🔒 **Números ignorados** - dados numéricos são descartados ### Conformidade * 🔒 **LGPD** - Lei Geral de Proteção de Dados (Brasil) * 🔒 **GDPR** - General Data Protection Regulation (Europa) * 🔒 **CCPA** - California Consumer Privacy Act (EUA) Respeito a Dados Sensíveis: Os únicos dados registrados pela ferramenta são os dados que ela necessita para se aprimorar, que no caso são as palavras que não existem uma tradução direta e por isso realizou o soletramento. Esse dado é apenas a palavra solicitada, sem nenhuma referência do site ou computador de origem (números são ignorados). ## Como Desativar a Coleta de Dados Caso não deseje participar do aprimoramento da nossa base de sinais, você pode desativar completamente a coleta de dados adicionando o parâmetro `doNotTrack` na implementação do script. ### Implementação do Parâmetro doNotTrack Para desativar a coleta de dados, adicione o seguinte parâmetro à sua implementação: ```html ``` Padrão de Nomenclatura: O parâmetro correto é `doNotTrack` (com "d" minúsculo e "T" maiúsculo), em conformidade com os padrões web e nossa documentação atualizada. Importante: Este parâmetro desativa completamente a coleta de dados de soletramento. Quando ativado, todos os dados são descartados imediatamente após a tradução, sem nenhum armazenamento ou análise posterior. ### Exemplos de Uso #### Instalação Básica com doNotTrack ```html ``` #### Instalação com Parâmetros e doNotTrack ```html ``` #### Instalação em Modo API com doNotTrack ```html ``` ## Benefícios da Coleta de Dados Ao permitir a coleta de dados de soletramento, você contribui para: * ✅ **Expansão do vocabulário** em LIBRAS * ✅ **Melhoria contínua** da qualidade de tradução * ✅ **Desenvolvimento de sinais** para termos técnicos e específicos * ✅ **Inclusão de novas palavras** e expressões do dia a dia * ✅ **Suporte à evolução** da língua e seus regionalismos * ✅ **Acessibilidade melhorada** para a comunidade surda ## Transparência e Controle A Rybená acredita na transparência total no tratamento de dados. Por isso: * 📋 **Controle total** sobre a coleta de dados através do parâmetro `doNotTrack` * 📋 **Sem perfilamento** - não realizamos qualquer tipo de perfilamento ou identificação de usuários * 📋 **Uso exclusivo** - utilizamos os dados exclusivamente para fins de melhoria da base de sinais * 📋 **Conformidade legal** - seguimos rigorosamente as diretrizes da LGPD, GDPR e CCPA Medidas de Segurança: Para informações detalhadas sobre as medidas técnicas de segurança que protegemos esses dados, consulte nossa{" "}Política de Segurança da Informação ## Perguntas Frequentes

Apenas a palavra que foi soletrada, sem qualquer contexto ou informação adicional. Números são ignorados automaticamente.

Sim. Não coletamos nenhum dado pessoal, identificável ou sensível. A coleta é completamente anônima.

Sim. Basta adicionar ou remover o parâmetro `doNotTrack` do script.

Se o parâmetro `doNotTrack` não estiver presente ou estiver definido como "false", a coleta está ativa.

O parâmetro `doNotTrack` é o padrão correto e atual. Documentos antigos podem referenciar `notTrack`, mas este foi descontinuado em favor do padrão web.

Não. Os dados coletados são usados exclusivamente para melhorar a base de sinais da Rybená e não são compartilhados com terceiros.

Os dados são armazenados pelo tempo necessário para análise e desenvolvimento de novos sinais, seguindo as diretrizes da LGPD.

Como os dados são coletados de forma anônima e agregada, não é possível identificar ou excluir dados específicos de um usuário ou site.

## Configuração de CSP Se você usa Content Security Policy (CSP), configure-o para permitir o funcionamento da Rybená mantendo a segurança. Veja o guia completo em Configuração CSP. ## Exemplo Completo com Privacidade Aqui está um exemplo completo de instalação com desabilitação de coleta de dados: ```html Meu Site com Rybená {/* CSP Configuration - Veja: ./csp-configuration */} {/* Rybená Script com doNotTrack */}

Bem-vindo ao Meu Site

Este site usa Rybená com coleta de dados desativada.

``` ## Para Mais Informações Para mais informações sobre privacidade e tratamento de dados, incluindo a política completa de retenção de dados, consulte: * Política de Privacidade e LGPD - Para aspectos legais e seus direitos * Política de Segurança da Informação - Para medidas técnicas de proteção * Termos de Uso - Para responsabilidades contratuais ## Próximos Passos Agora que você entende como a Rybená coleta dados, você pode: * Obter suporte caso tenha dúvidas * Personalizar a Rybená para suas necessidades ## Para Desenvolvedores # Desabilitando Funcionalidades (/docs/getting-started/disabling-features) ## Sintaxe Básica ```html ``` ## Funcionalidades de IA Desabilite funcionalidades baseadas em inteligência artificial: | Funcionalidade | Descrição | | ---------------------- | --------------------------- | | `RybenaImageTooltipAI` | Descrever Imagem (IA) | | `RybenaRewriteText` | Simplificar Texto (IA) | | `RybenaMeaningAI` | Significado da Palavra (IA) | Você também pode desabilitar todas as funcionalidades de IA de uma vez: ```html ``` ## Funcionalidades de Contraste e Saturação | Funcionalidade | Descrição | | ------------------------ | ----------------------- | | `RybenaHighSaturation` | Saturação Alta | | `RybenaLowSaturation` | Saturação Baixa | | `RybenaMonocromatic` | Saturação Monocromática | | `RybenaContrastDark` | Contraste Escuro | | `RybenaContrastLight` | Contraste Claro | | `RybenaContrastInverted` | Contraste Invertido | ## Funcionalidades de Cursor | Funcionalidade | Descrição | | ------------------- | -------------------- | | `RybenaReadingMask` | Máscara de Leitura | | `RybenaCursorGuide` | Guia de Leitura | | `RybenaCursorSize` | Cursor Grande | | `RybenaAmplify` | Ampliar com o Cursor | ## Funcionalidades de Fontes | Funcionalidade | Descrição | | --------------------- | -------------------- | | `RybenaLetterSpacing` | Espaçamento | | `RybenaLineHeight` | Altura de Linha | | `RybenaDislexicFont` | Dislexia | | `RybenaZoom` | Zoom | | `RybenaTextAlignment` | Alinhamento do Texto | ## Funcionalidades de Destaques | Funcionalidade | Descrição | | ---------------------- | ------------------ | | `RybenaLinkHighlight` | Links (Destaque) | | `RybenaTitleHighlight` | Títulos (Destaque) | ## Funcionalidades Gerais | Funcionalidade | Descrição | | --------------------- | --------------------- | | `RybenaImageTooltip` | Legenda para Imagens | | `RybenaStopAnimation` | Pausar Animações | | `RybenaReadingMode` | Modo de Leitura | | `RybenaDictionary` | Dicionário | | `RybenaButtonSize` | Tamanho dos Botões | | `RybenaPageStructure` | Estrutura da Página | | `RybenaKeyboardNav` | Navegação por Teclado | ## Exemplos de Desabilitação ### Desabilitar funcionalidades de IA ```html ``` ### Desabilitar todas as funcionalidades de IA ```html ``` ### Desabilitar funcionalidades de contraste ```html ``` ### Desabilitar múltiplas funcionalidades ```html ``` ## Próximos Passos Agora que você sabe como desabilitar funcionalidades, você pode: * Criar uma barra de acessibilidade customizada * Configurar políticas de segurança (CSP) * Configurar múltiplos idiomas # Introdução ao Rybená (/docs/getting-started) ## O que é a Rybená? A **Rybená** é uma solução brasileira de acessibilidade digital que torna seu site mais inclusivo através de tecnologias avançadas de tradução e acessibilidade visual. ### Funcionalidades Principais

Tradução em LIBRAS

Tradução automática de texto para LIBRAS (Língua Brasileira de Sinais) através de um avatar 3D interativo. Os usuários podem selecionar qualquer texto do site e obter a tradução em tempo real.

Texto para Voz (TTS)

Síntese de voz em três idiomas: Português, Espanhol e Inglês. Permite que usuários com dificuldades visuais ou de leitura ouçam o conteúdo do site.

Acessibilidade Visual

Conjunto completo de ferramentas de acessibilidade visual, incluindo contraste, zoom, espaçamento, modo de leitura, guia de cursor, e muito mais.

## Para quem é a Rybená? A Rybená é ideal para: * **Empresas** que desejam cumprir a legislação de acessibilidade digital * **Instituições governamentais** que precisam atender às normas de acessibilidade * **E-commerce** que querem expandir seu público e melhorar a experiência de compra * **Portais de educação** que buscam tornar o conteúdo acessível a todos * **Sites de notícias e mídia** que desejam alcançar um público mais amplo * **Qualquer site** que valorize a inclusão digital ## Como Funciona? A Rybená é integrada ao seu site através de um arquivo JavaScript (`rybena.js`) que você adiciona às suas páginas. O script: 1. **Renderiza botões de acessibilidade** na página conforme suas configurações 2. **Carrega recursos sob demanda** - apenas quando o usuário clica nos botões 3. **Traduz o conteúdo selecionado** para LIBRAS ou voz 4. **Aplica ajustes visuais** de acessibilidade conforme solicitado pelo usuário **Performance Otimizada:** O script Rybená é carregado de forma não intrusiva. Os recursos pesados (avatar 3D, síntese de voz) só são carregados quando o usuário realmente precisa deles, garantindo que seu site permaneça rápido para todos os visitantes. ## Compatibilidade A Rybená é compatível com: * ✅ Todos os navegadores modernos (Chrome, Firefox, Safari, Edge) * ✅ Navegadores móveis (iOS Safari, Chrome Mobile) * ✅ Sites estáticos (HTML/CSS/JS) * ✅ Frameworks modernos (React, Vue, Angular, Next.js) * ✅ CMS populares (WordPress, Joomla, Moodle) * ✅ Aplicações Single Page (SPA) **Compatibilidade com LIBRAS:** A funcionalidade de tradução em LIBRAS está disponível apenas quando a Rybená está configurada em Português (ptBR). Para outros idiomas, apenas as funcionalidades de voz e acessibilidade visual estão disponíveis. ## Segurança e Privacidade A Rybená leva a segurança e privacidade dos dados muito a sério: * 🔒 **Criptografia de 256 bits** para todos os dados transmitidos * 🔒 **Conexão segura** via SSL/TLS * 🔒 **Anonimato total** - não coletamos dados pessoais identificáveis * 🔒 **Controle total** - você pode desativar a coleta de dados com um parâmetro Saiba mais sobre nossa política de privacidade na seção [Privacidade e Coleta de Dados](./data-privacy). ## Próximos Passos ## Recursos Adicionais ## Para Desenvolvedores ## Exemplo Rápido Quer ver a Rybená em ação? Adicione este código ao `` do seu site: ```html ``` Isso é tudo que você precisa para começar! Para mais opções de personalização, consulte o guia de [Instalação](./installation). **Dica:** Se você usa WordPress, Moodle ou outras plataformas, confira nossa documentação específica para integrações com CMS. ## Recursos Adicionais * [Documentação da API](../api/introducao) - Para integrações avançadas via API * [Documentos Legais](../legal) - Termos de uso, política de privacidade e segurança * [Guia de Acessibilidade](../api/acessibilidade) - Detalhes sobre todas as funcionalidades de acessibilidade Pronto para começar? Vamos para o [Guia de Instalação](./installation)! # Instalação da Rybená (/docs/getting-started/installation) ## Métodos de Instalação Escolha o método de instalação que melhor se adapta ao seu projeto:

Instalação Básica

A forma mais simples de instalar a Rybená é adicionar o script diretamente no HTML do seu site.

1\. Adicione o script ao head

Copie e cole o seguinte código entre as tags `` em todas as páginas do seu site:

```html ```

2\. Teste a instalação

Após adicionar o script, recarregue a página. Você deverá ver os botões de acessibilidade da Rybená no canto da tela.

3\. Pronto!

A Rybená está instalada e funcionando. Os usuários podem agora selecionar texto para tradução em LIBRAS ou voz, e acessar as ferramentas de acessibilidade visual.

Nota: Este método é ideal para sites estáticos simples ou quando você quer começar rapidamente sem configurações adicionais.

Instalação com Parâmetros

Você pode personalizar a Rybená adicionando parâmetros à URL do script. Isso permite configurar posição, tamanho, cores e muito mais.

1\. Escolha os parâmetros desejados

Consulte a página de Configuração para ver todos os parâmetros disponíveis.

2\. Adicione os parâmetros ao script

Adicione um `?` após a URL do script e separe os parâmetros com `&` :

```html ```

3\. Exemplos comuns

Aqui estão algumas configurações populares:

Player à direita:
```html ```
Player maior:
```html ```
Iniciar em inglês:
```html ``` Dica: Você pode combinar múltiplos parâmetros. Por exemplo: `?positionPlayer=right&size=300&lang=enUS`

Instalação em Modo API

O modo API é ideal para integrações avançadas onde você quer controlar a Rybená programaticamente.

1\. Adicione o script com modo API

Use o parâmetro `mode=api` para ativar o modo API:

```html ```

2\. O que o modo API faz

O modo API automatiza várias funcionalidades:

  • Abre a Rybená em background
  • Remove textos de apresentação
  • Prepara o ambiente para controle via API

3\. Use a API

Após a instalação, você pode controlar a Rybená via JavaScript:

```javascript // Obter instância da API const rybena = RybenaApi.getInstance(); // Traduzir texto rybena.translate("Olá, mundo!"); // Alterar idioma rybena.setLanguage("enUS"); // Abrir player rybena.openPlayer(); ``` Atenção: O modo API requer implementação adicional. Consulte a Documentação da API para mais detalhes. ## Instalação em Iframes Se você usa iframes em seu site, é importante adicionar o script Rybená também dentro do iframe para que o conteúdo seja traduzido corretamente. Por que isso é necessário? Devido às políticas de segurança dos navegadores (Same-Origin Policy), scripts externos não podem acessar eventos de seleção dentro de iframes de origens diferentes. ```html ``` ## Conteúdo Não Selecionável Se você tem elementos que não podem ser selecionados (como imagens ou elementos com CSS específico), você pode usar o atributo `rybena-alt-text` para fornecer texto para tradução: ```html {/* Imagem com texto alternativo */} Logo da empresa {/* Div com conteúdo não selecionável */}
Conteúdo não selecionável
``` ## Verificação da Instalação Após instalar a Rybená, verifique se tudo está funcionando corretamente:

1\. Verifique os botões

Os botões de acessibilidade devem aparecer no canto da página (esquerda ou direita, dependendo da configuração).

2\. Teste a tradução

Selecione qualquer texto da página e clique no botão de LIBRAS ou Voz para testar a tradução.

3\. Verifique o console

Abra o console do navegador (F12) e verifique se não há erros relacionados ao Rybená.

4\. Teste em diferentes navegadores

Teste a instalação em Chrome, Firefox, Safari e Edge para garantir compatibilidade.

Encontrou problemas? Consulte nossa seção de{" "} Suporte e Solução de Problemas para encontrar soluções rápidas ou entre em contato com nossa equipe. ## Solução de Problemas Rápida

Verifique a conexão

Certifique-se de que seu site tem acesso à internet e que o CDN da Rybená está acessível.

Verifique o console

Abra o console do navegador e procure por erros de rede ou JavaScript.

Verifique o CSP

Se você usa Content Security Policy, certifique-se de que permite scripts de `cdn.rybena.com.br`. Veja mais na seção de{" "} Configuração CSP.

{" "}

Verifique o z-index

Outros elementos podem estar sobrepondo os botões. Ajuste o parâmetro{" "} `zIndexBar` se necessário.

Verifique o CSS

Certifique-se de que não há CSS escondendo os elementos da Rybená.

Verifique o idioma

O botão de LIBRAS só aparece quando a Rybená está configurada em Português (ptBR).

Verifique a seleção

Certifique-se de que o texto pode ser selecionado. Se não, use o atributo `rybena-alt-text`.

Verifique o console

Procure por erros de conexão com os servidores da Rybená.

Verifique o idioma

A tradução em LIBRAS só funciona em Português. Para outros idiomas, apenas a voz está disponível.

## Próximos Passos Agora que você instalou a Rybená, você pode: * Configurar parâmetros para personalizar a aparência e comportamento * Criar barras customizadas * Desabilitar funcionalidades específicas * Configurar políticas de segurança (CSP) * Encontrar soluções para problemas ## Para Desenvolvedores # Internacionalização (/docs/getting-started/internationalization) ## Idiomas Suportados A Rybená está disponível nos seguintes idiomas: | Idioma | Código | LIBRAS | Voz | Acessibilidade Visual | | --------- | ------ | ------ | --- | --------------------- | | Português | `ptBR` | ✅ | ✅ | ✅ | | Espanhol | `esES` | ❌ | ✅ | ✅ | | Inglês | `enUS` | ❌ | ✅ | ✅ | Importante: A funcionalidade de tradução em LIBRAS está disponível apenas quando a Rybená está configurada em Português (ptBR). Para outros idiomas, apenas as funcionalidades de voz e acessibilidade visual estão disponíveis. ## Métodos de Configuração Existem três formas de configurar o idioma da Rybená:

Configuração por Parâmetro

Use o parâmetro `lang` na URL do script para definir o idioma inicial da Rybená.

1\. Adicione o parâmetro lang

Adicione `lang=ptBR` , `lang=esES` ou `lang=enUS` à URL do script:

```html ```

2\. Teste a configuração

Recarregue a página e verifique se a Rybená está no idioma correto.

Nota: Este método é ideal quando você quer que a Rybená inicie sempre em um idioma específico.

Configuração por Classe CSS

Use classes CSS para integrar a troca de idioma da Rybená com o sistema de internacionalização do seu site.

1\. Adicione as classes aos elementos de troca de idioma

Adicione a classe apropriada ao elemento que realiza a troca de idioma no seu site:

```html ```

2\. Classes disponíveis

Use estas classes para cada idioma:

  • `ryb-language-ptBR` \- Português
  • `ryb-language-esES` \- Espanhol
  • `ryb-language-enUS` \- Inglês

3\. Exemplo completo

```html
``` Dica: Este método é ideal quando você já tem um sistema de internacionalização no seu site e quer que a Rybená siga automaticamente as mudanças de idioma.

Configuração por API

Use a API JavaScript para alterar o idioma programaticamente, sem interação do usuário.

1\. Obtenha a instância da API

```javascript const rybena = RybenaApi.getInstance(); ```

2\. Altere o idioma

Use o método `setLanguage()` para alterar o idioma:

```javascript // Alterar para Português rybena.setLanguage("ptBR"); // Alterar para Espanhol rybena.setLanguage("esES"); // Alterar para Inglês rybena.setLanguage("enUS"); ```

3\. Exemplo de uso

```javascript // Detectar idioma do navegador function detectBrowserLanguage() { const browserLang = navigator.language || navigator.userLanguage; if (browserLang.startsWith("pt")) { return "ptBR"; } else if (browserLang.startsWith("es")) { return "esES"; } else { return "enUS"; } } // Inicializar Rybená com idioma do navegador document.addEventListener("DOMContentLoaded", () => { const rybena = RybenaApi.getInstance(); const detectedLang = detectBrowserLanguage(); rybena.setLanguage(detectedLang); }); ``` Nota: Este método é ideal quando você precisa alterar o idioma dinamicamente baseado em lógica de negócio ou preferências do usuário. ## Integração com Sistemas de Internacionalização ### Integração com i18n (React) ```tsx import { useTranslation } from "react-i18n"; import { useEffect } from "react"; function LanguageSelector() { const { i18n } = useTranslation(); const changeLanguage = (lang: string) => { // Alterar idioma do i18n i18n.changeLanguage(lang); // Alterar idioma da Rybená const rybena = (window as any).RybenaApi?.getInstance(); if (rybena) { const rybenaLang = lang === "pt" ? "ptBR" : lang === "es" ? "esES" : "enUS"; rybena.setLanguage(rybenaLang); } }; return (
); } ``` ### Integração com Next.js i18n ```tsx "use client"; import { useRouter } from "next/navigation"; import { usePathname } from "next/navigation"; export default function LanguageSwitcher() { const router = useRouter(); const pathname = usePathname(); const changeLanguage = (newLocale: string) => { // Alterar idioma do Next.js router.push(pathname.replace(/^\/[^\/]+/, `/${newLocale}`)); // Alterar idioma da Rybená const rybena = (window as any).RybenaApi?.getInstance(); if (rybena) { const rybenaLang = newLocale === "pt" ? "ptBR" : newLocale === "es" ? "esES" : "enUS"; rybena.setLanguage(rybenaLang); } }; return (
); } ``` ### Integração com Vue I18n ```vue ``` ## Detecção Automática de Idioma Você pode detectar automaticamente o idioma do navegador e configurar a Rybená: ```javascript // Detectar idioma do navegador function detectBrowserLanguage() { const browserLang = navigator.language || navigator.userLanguage; if (browserLang.startsWith("pt")) { return "ptBR"; } else if (browserLang.startsWith("es")) { return "esES"; } else { return "enUS"; } } // Inicializar Rybená com idioma detectado document.addEventListener("DOMContentLoaded", () => { const detectedLang = detectBrowserLanguage(); // Atualizar o script com o idioma detectado const script = document.createElement("script"); script.type = "text/javascript"; script.src = `https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=${detectedLang}`; document.head.appendChild(script); }); ``` ## Persistência de Idioma Para manter a preferência de idioma do usuário entre sessões, você pode usar localStorage: ```javascript // Salvar preferência de idioma function saveLanguagePreference(lang: string) { localStorage.setItem('rybena-language', lang); } // Carregar preferência de idioma function loadLanguagePreference(): string { const saved = localStorage.getItem('rybena-language'); if (saved) { return saved; } // Se não houver preferência salva, detectar idioma do navegador return detectBrowserLanguage(); } // Inicializar Rybená com preferência salva document.addEventListener('DOMContentLoaded', () => { const preferredLang = loadLanguagePreference(); const rybena = (window as any).RybenaApi?.getInstance(); if (rybena) { rybena.setLanguage(preferredLang); } // Salvar preferência quando o idioma mudar const originalSetLanguage = rybena.setLanguage.bind(rybena); rybena.setLanguage = (lang: string) => { saveLanguagePreference(lang); originalSetLanguage(lang); }; }); ``` ## Exemplos Práticos ### Site Multilíngue com Seletor de Idioma ```html Meu Site Multilíngue

Bem-vindo ao Meu Site

Este é um exemplo de site multilíngue com Rybená.

``` ## Próximos Passos Agora que você sabe como configurar a internacionalização, você pode: * Integrar com PDFs * Configurar privacidade e coleta de dados ## Para Desenvolvedores # Integração com PDF (/docs/getting-started/pdf-integration) ## Por que é necessário um plugin? A Rybená enfrenta barreiras técnicas ao tentar traduzir conteúdo de PDFs devido às políticas de segurança dos navegadores modernos. ### Política de Same-Origin e Iframes Os navegadores implementam a **Política de Mesma Origem** (Same-Origin Policy), que impede que scripts de uma origem acessem conteúdo de outra origem. Isso afeta a tradução de PDFs porque: * **Leitores de PDF padrão** utilizam iframes para renderizar o conteúdo * **Scripts externos** (como o rybena.js) não podem acessar eventos de seleção dentro de iframes de origens diferentes * **Eventos de seleção de texto** são essenciais para identificar o conteúdo a ser traduzido Importante: Por motivos de segurança do navegador, não é possível detectar os eventos de seleção para realizar a tradução sem que o script rybena.js esteja incorporado diretamente no iframe que renderiza o PDF. ### A Solução Para superar essa barreira de segurança, é necessário incluir o `rybena.js` diretamente dentro do iframe que renderiza o PDF. O plugin customizado da Rybená: 1. **Incorpora o rybena.js** diretamente no ambiente do iframe 2. **Captura eventos de seleção** dentro do documento PDF 3. **Comunica-se com os servidores** da Rybená para tradução 4. **Exibe a tradução em LIBRAS** ou sintetização de voz ## Instalação do Plugin

1\. Baixe o Plugin

Baixe o plugin customizado da Rybená:

```bash https://drive.google.com/file/d/1qJZ8iIe0MBzSYnQz9VV38YRsrjAf8sPq/view?usp=sharing ```

2\. Descompacte o Arquivo

Descompacte o arquivo baixado em um diretório de sua escolha. Você deverá ver uma estrutura como esta:

`pdfjs-rybena / web/ index.html / viewer.js / build / pdf.js`

3\. Faça o Upload no Servidor

Faça o upload da pasta descompactada para seu servidor web HTTP.

4. Verifique o Acesso

Teste o acesso navegando para:

`https://seuservidor.com/pdfjs-rybena/web/index.html` Dica: Caso tenha dúvidas ou dificuldades, consulte a documentação oficial do PDF.js.\ Nosso plugin tem apenas uma simples modificação para inserção da Rybená. ## Métodos de Integração ### Método 1: Iframe (Recomendado) Use um iframe para incorporar o PDF com acessibilidade: ```html ``` ### Método 2: Link Direto Abra o PDF em uma nova aba: ```html Abrir PDF com Acessibilidade ``` ## Parâmetros do Visualizador O plugin PDF.js suporta vários parâmetros para controlar a visualização: | Parâmetro | Descrição | Exemplo | | ---------- | ------------------ | ------------------ | | `file` | URL do arquivo PDF | `?file=manual.pdf` | | `page` | Página inicial | `#page=2` | | `zoom` | Nível de zoom | `#zoom=150` | | `pagemode` | Modo de página | `#pagemode=thumbs` | | `search` | Termo de busca | `#search=termo` | ```html ``` ## Requisitos Técnicos Para que a integração funcione corretamente, certifique-se de: * ✅ **Mesmo domínio**: O PDF.js e o arquivo PDF devem estar no mesmo domínio * ✅ **Servidor HTTP**: O plugin precisa ser hospedado em um servidor web acessível * ✅ **HTTPS recomendado**: Para melhor segurança e compatibilidade com navegadores modernos * ✅ **Compatibilidade**: Baseado no PDF.js Stable (v3.10.111) Versão do PDF.js: Stable (v3.10.111) ## Configuração de CORS Se você tiver problemas com CORS (Cross-Origin Resource Sharing), configure os cabeçalhos no servidor: ```http # Apache (.htaccess) Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Methods "GET, OPTIONS" Header set Access-Control-Allow-Headers "Content-Type" ``` ```javascript // Node.js (Express) app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET, OPTIONS"); res.header("Access-Control-Allow-Headers", "Content-Type"); next(); }); ``` ```nginx # Nginx location /pdfjs-rybena/ { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, OPTIONS'; add_header Access-Control-Allow-Headers 'Content-Type'; } ``` ## Solução de Problemas

Verifique a URL do PDF

Certifique-se de que o URL do PDF está acessível diretamente no navegador.

Verifique o domínio

Confirme se o PDF está no mesmo domínio que o PDF.js.

Verifique o console

Abra o console do navegador e procure por erros de rede ou JavaScript.

{" "}

Verifique o console

Abra o console do navegador e verifique se há erros relacionados ao Rybená.

Verifique o script

Confirme se o script rybena.js está sendo carregado no iframe.

Verifique a seleção

Tente selecionar texto no PDF para ver se a Rybená responde.

Configure os cabeçalhos CORS

Configure os cabeçalhos CORS no servidor para permitir acesso ao PDF.

Verifique o domínio

Certifique-se de que o PDF e o PDF.js estão no mesmo domínio.

Use HTTPS

Se possível, use HTTPS para evitar problemas de segurança.

## Integrações com Plataformas Para plataformas específicas, existem plugins dedicados que facilitam a integração: ### WordPress Use o plugin oficial da Rybená para WordPress: Plugin WordPress: Consulte a documentação específica para{" "} Plugin para WordPress. ### Moodle Use o plugin oficial da Rybená para Moodle: Plugin Moodle: Consulte a documentação específica para{" "} Plugin para Moodle. ## Exemplo Completo Aqui está um exemplo completo de uma página com PDF acessível: ```html PDF com Acessibilidade Rybená

Manual do Usuário

Este documento está acessível com Rybená. Selecione qualquer texto para tradução em LIBRAS ou voz.

``` Atenção: Ao disponibilizar PDFs para os usuários, deve-se escolher o plugin instalado. Os PDFs inseridos de outras maneiras{" "} não terão a integração com a Rybená. ## Próximos Passos Agora que você sabe como integrar PDFs com a Rybená, você pode: * Configurar privacidade e coleta de dados * Obter suporte caso tenha problemas ## Para Desenvolvedores # Suporte e Solução de Problemas (/docs/getting-started/support) ## Como Abrir um Chamado de Suporte Para iniciar um processo de suporte, nossa comunicação é centralizada através do nosso canal oficial de e-mail: ### Canal Oficial 📧 **[suporte@rybena.com.br](mailto:suporte@rybena.com.br)** ### Informações Necessárias Ao enviar sua solicitação, recomendamos fornecer o máximo de informações relevantes para que possamos analisar e responder sua demanda de forma mais eficiente: * ✅ Descrição detalhada do problema ou dúvida * ✅ Passos para reprodução do erro (quando aplicável) * ✅ Mensagens de erro completas (se houver) * ✅ Print screens ou anexos que auxiliem no entendimento * ✅ URL do site onde o problema ocorre * ✅ Navegador e versão utilizados * ✅ Sistema operacional * ✅ Qual outra informação que julgue pertinente Dica: Quanto mais detalhes você fornecer, mais rápido poderemos resolver seu problema. Inclua sempre prints de tela e mensagens de erro quando possível. ## Níveis de Serviço (SLAs) Os Acordos de Nível de Serviço (SLAs) representam nosso compromisso com os prazos máximos de resposta para as solicitações de suporte, considerando diferentes níveis de criticidade. ### Críticos - 2 Horas Para casos de criticalidade elevada que impactam significativamente as operações essenciais do cliente ou geram indisponibilidade total da solução. **Exemplos:** * Falhas generalizadas no sistema * Problemas de segurança * Vulnerabilidades críticas que requerem atenção imediata * Indisponibilidade total da Rybená Atenção: Casos críticos devem ser reportados imediatamente para que possamos agir o mais rápido possível. ### Impacto ao Cliente - 8 Horas Para situações que afetam diretamente a utilização da plataforma, porém sem causar paralisação total das operações. Estas são ocorrências que limitam funcionalidades importantes, mas que permitem a continuidade operacional com restrições. **Exemplos:** * Funcionalidades específicas não funcionando * Problemas de performance significativos * Erros em partes específicas do sistema * Dificuldades de uso que afetam a experiência do usuário ### Demais Casos - 16 Horas Úteis Para solicitações de baixo impacto operacional, como dúvidas de uso, solicitações de melhorias, problemas específicos que não afetam a funcionalidade principal do sistema ou casos que requerem análise mais aprofundada. **Exemplos:** * Dúvidas sobre configuração * Solicitações de novas funcionalidades * Problemas menores que não afetam a usabilidade * Perguntas sobre documentação Nota: O prazo de 16 horas refere-se a horas úteis (dias úteis, em horário comercial). ## Metodologia de Atendimento Nosso processo de suporte segue uma metodologia estruturada para garantir a qualidade e eficiência no atendimento:

1\. Recebimento e Triagem

Após o envio do e-mail, sua solicitação é registrada em nosso sistema e triada conforme sua criticidade e natureza.

2\. Atribuição

A demanda é direcionada ao especialista mais adequado para resolver a questão.

3\. Análise e Resposta Inicial

Dentro do prazo estabelecido no SLA correspondente, você receberá uma resposta inicial com posicionamento sobre o caso.

4\. Resolução e Acompanhamento

Mantemos você informado sobre o progresso da resolução até a conclusão do caso.

5\. Verificação e Fechamento

Após a implementação da solução, verificamos se o problema foi efetivamente resolvido e solicitamos sua confirmação para formalizar o encerramento do chamado.

## Escalonamento Em casos onde haja necessidade de um tratamento mais especializado ou quando uma demanda requer envolvimento de outras áreas, estabelecemos um processo de escalonamento interno para agilizar a resolução. Se necessário, o contato será direcionado para: * 🔧 **Níveis superiores de suporte** - Para casos complexos * 💻 **Equipe de desenvolvimento** - Para bugs e problemas técnicos * 🏗️ **Equipe de infraestrutura** - Para problemas de servidor * 📦 **Equipe de produto** - Para solicitações de funcionalidades ## Problemas Comuns e Soluções

Verifique a conexão

Certifique-se de que seu site tem acesso à internet e que o CDN da Rybená está acessível.

Verifique o console

Abra o console do navegador (F12) e procure por erros de rede ou JavaScript.

Verifique o CSP

Se você usa Content Security Policy, certifique-se de que permite scripts de `cdn.rybena.com.br` . Veja mais em Configuração CSP .

Verifique a sintaxe

Certifique-se de que a tag ` ``` ### Parâmetros Disponíveis Alguns dos parâmetros mais comuns que você pode usar: * `positionPlayer`: Define a posição do Player (left/right) * `size`: Define o tamanho do Player (valor em pixels) * `positionBar`: Define a posição da barra de acessibilidade (left/right) * `lang`: Define o idioma inicial (ptBR, esES, enUS) Lembrando que é possível personalizar a Rybená adicionando atributos no script baixado. Para isso, utilize a [área de customizações da documentação Rybená](/docs/getting-started/customization). ## Configurações Avançadas ### Aplicação em Páginas Específicas Se você deseja aplicar a Rybená apenas em páginas específicas: 1. No JavaScript Management, crie uma nova entrada para o script 2. Configure o scope para "Apply to specific pages" 3. Defina as condições para as páginas onde deseja aplicar ### Múltiplos Scripts Se você precisa de múltiplas configurações da Rybená: 1. Crie entradas separadas para cada configuração 2. Use scopes diferentes para cada entrada 3. Certifique-se de que não há conflitos entre as configurações ### Ordem de Carregamento Para garantir que a Rybená carregue no momento correto: 1. Configure o script para carregar na seção `` 2. Use a prioridade mais alta possível 3. Evite scripts que dependam de outros eventos ## Solução de Problemas

Possíveis causas:

  1. Script não carregado : O script pode não ter sido carregado corretamente
  2. Scope incorreto : O scope pode não estar configurado para todas as páginas
  3. Cache do navegador : O cache pode estar mantendo a versão antiga
  4. Cache do Brightspace : O Brightspace pode estar cacheando a versão antiga

Solução:

  1. Verifique se o script está listado no JavaScript Management
  2. Verifique se o scope está configurado para "Apply to all pages"
  3. Limpe o cache do navegador
  4. Limpe o cache do Brightspace (se disponível)

Possíveis causas:

  1. Conflito de JavaScript : Outros scripts podem estar interferindo
  2. Ordem de carregamento : A Rybená pode estar carregando muito tarde
  3. Versão do navegador : Verifique se está usando um navegador compatível

Solução:

  1. Verifique o console do navegador para erros de JavaScript
  2. Ajuste a ordem de carregamento do script
  3. Tente usar um navegador diferente ou atualize o navegador atual

Possíveis causas:

  1. Formato incorreto : O arquivo pode não estar no formato correto
  2. Tamanho do arquivo : O arquivo pode exceder o limite de tamanho
  3. Permissões insuficientes : Você pode não ter permissão para fazer upload

Solução:

  1. Verifique se o arquivo está no formato correto (.js)
  2. Verifique o tamanho do arquivo e reduza se necessário
  3. Verifique suas permissões no Brightspace

Possíveis causas:

  1. URL incorreta : A URL do script pode estar incorreta
  2. Bloqueio de rede : A rede pode estar bloqueando o acesso ao CDN
  3. Problema no CDN : O CDN da Rybená pode estar temporariamente indisponível

Solução:

  1. Verifique se a URL do script está correta
  2. Tente acessar a URL do script diretamente no navegador
  3. Entre em contato com o suporte se o problema persistir

Possíveis causas:

  1. Conflito de CSS : O CSS da Rybená pode estar conflitando com o CSS do Brightspace
  2. Posição do Player : O Player pode estar sobrepondo elementos importantes
  3. Z-index : O z-index da Rybená pode estar muito alto

Solução:

  1. Ajuste a posição do Player através da customização
  2. Modifique o z-index através da customização
  3. Entre em contato com o suporte para ajuda avançada

Possíveis causas:

  1. Scope incorreto : O scope pode não estar configurado para essas páginas
  2. Conflito com scripts específicos : Scripts específicos podem estar interferindo
  3. Permissões de página : Algumas páginas podem ter restrições

Solução:

  1. Verifique se o scope está configurado corretamente
  2. Verifique se há scripts específicos nessas páginas
  3. Entre em contato com o suporte da D2L se necessário
## Melhores Práticas ### Testes * Teste a Rybená em diferentes tipos de páginas * Verifique o funcionamento em diferentes navegadores * Teste em dispositivos móveis e desktop ### Monitoramento * Monitore o desempenho da Rybená regularmente * Verifique se há erros no console do navegador * Colete feedback dos usuários ### Atualizações * Mantenha o script da Rybená atualizado * Verifique regularmente se há novas versões disponíveis * Teste as atualizações em ambiente de desenvolvimento antes de aplicar em produção ### Documentação * Documente todas as customizações feitas * Mantenha um registro das versões utilizadas * Documente problemas e soluções encontradas ## Suporte ### Suporte Rybená Se você tiver problemas com a Rybená: * Consulte a [documentação de suporte](/docs/getting-started/support) * Entre em contato com o suporte técnico da Rybená ### Suporte D2L Se você tiver problemas com o Brightspace: * Consulte a documentação oficial da D2L * Entre em contato com o suporte da D2L ## Recursos Adicionais * [Documentação de customização](/docs/getting-started/customization) * [Documentação de API](/docs/api/getting-started) * [Suporte técnico](/docs/getting-started/support) * [Documentação oficial da D2L](https://docs.brightspace.com/) ## Conteúdo Relacionado # Integração com Google Tag Manager (/docs/integrations/google-tag-manager) ## Visão Geral A integração com Google Tag Manager consiste em: 1. **Criação de Tag**: Adição de uma tag HTML personalizada com o script da Rybená 2. **Configuração de Acionamento**: Definição do gatilho para carregar a tag em todas as páginas 3. **Publicação**: Envio e publicação das alterações no GTM ## Pré-requisitos Antes de começar, certifique-se de que: * Você tem acesso ao painel do Google Tag Manager * O container do GTM já está instalado no seu site * Você tem permissões para criar e publicar tags ## Instalação **Acessar o painel do GTM** Vá para o painel do [Google Tag Manager](https://tagmanager.google.com) e faça login. **Selecionar o container** Selecione o container responsável pelo seu site na lista de contas e containers. **Criar uma nova tag** No painel principal, clique em **Adicionar uma nova tag** no card **Nova tag**. **Configurar a tag** Na página de configuração da tag: 1. Dê um nome para a tag (ex: "Rybená - Script Principal") 2. Clique no card **Configuração da tag** **Selecionar tipo de tag** Na lista de tipos de tag, selecione **HTML personalizado**. **Inserir o script da Rybená** Cole o seguinte trecho de código na caixa de texto: ```html ``` **Configurar o acionamento** Clique no card **Acionamento** e selecione o item **Initialization - All Pages**. Isso fará com que a tag seja carregada em todas as páginas do site. **Salvar a tag** Clique no botão **Salvar** para salvar a configuração da tag. **Enviar as alterações** Na página inicial do painel, clique no botão **Enviar** localizado no canto superior direito. **Publicar as alterações** Clique no botão **Publicar** e siga as orientações da plataforma para finalizar o processo. **Verificar a instalação** Acesse qualquer página do seu site para verificar se a Rybená está aparecendo corretamente. Pode ser necessário aguardar alguns minutos para que as alterações sejam aplicadas. ## Verificação do Protocolo Caso a página onde está sendo feita a instalação **não** utilize protocolo HTTPS, é necessário substituir no código acima o protocolo `https` por `http`. Exemplo para HTTP: ```html ``` ## Customização Você pode customizar o comportamento da Rybená adicionando parâmetros ao script. Para mais detalhes, consulte a [documentação de customização](/docs/getting-started/customization). Exemplo de customização: ```html ``` ## Configurações Avançadas ### Acionamento Condicional Se você deseja carregar a Rybená apenas em páginas específicas: 1. Crie um novo acionador (trigger) personalizado 2. Defina as condições para o acionamento (ex: URL contém "/blog") 3. Selecione esse acionamento na configuração da tag Exemplo de acionamento para páginas específicas: ```javascript // Acionador: Páginas do Blog // Tipo: Visualização de Página // Condição: Page Path contém "/blog" ``` ### Variáveis Dinâmicas Você pode usar variáveis do GTM para customizar a Rybená dinamicamente: ```html ``` ### Prioridade de Carregamento Para garantir que a Rybená carregue no momento correto: 1. Configure a prioridade da tag (se necessário) 2. Use o acionamento "Initialization - All Pages" para carregar o mais cedo possível 3. Evite acionamentos que dependam de outros eventos ### Múltiplas Tags Se você precisa de múltiplas configurações da Rybená: 1. Crie tags separadas para cada configuração 2. Use acionamentos diferentes para cada tag 3. Certifique-se de que não há conflitos entre as configurações ## Debugging ### Modo de Visualização Para testar a tag antes de publicar: 1. Clique no botão **Visualizar** no painel do GTM 2. Abra o site em uma nova aba 3. Verifique se a tag está sendo disparada corretamente ### Verificação no Console Para verificar se o script está carregando corretamente: 1. Abra o site em um navegador 2. Pressione `F12` para abrir as ferramentas de desenvolvedor 3. Vá para a aba **Console** 4. Procure por erros relacionados ao script da Rybená ### Tag Assistant Use o Google Tag Assistant para verificar: 1. Se a tag está sendo disparada 2. Se há erros na configuração 3. Se o script está carregando corretamente ## Solução de Problemas

Possíveis causas:

  1. Tag não publicada : As alterações podem não ter sido publicadas
  2. Acionamento incorreto : O acionamento pode não estar configurado corretamente
  3. Cache do navegador : O cache pode estar mantendo a versão antiga
  4. Container não instalado : O container do GTM pode não estar instalado no site

Solução:

  1. Verifique se a tag foi publicada no GTM
  2. Verifique se o acionamento está configurado para "All Pages"
  3. Limpe o cache do navegador
  4. Verifique se o código do container do GTM está presente no site

Possíveis causas:

  1. Conflito de JavaScript : Outros scripts podem estar interferindo
  2. Ordem de carregamento : A Rybená pode estar carregando muito tarde
  3. Protocolo incorreto : Verifique se está usando HTTP ou HTTPS corretamente

Solução:

  1. Verifique o console do navegador para erros de JavaScript
  2. Use o acionamento "Initialization - All Pages" para carregar mais cedo
  3. Verifique o protocolo do site e ajuste o script se necessário

Possíveis causas:

  1. Acionamento incorreto : O acionamento pode não estar configurado corretamente
  2. Condições não atendidas : As condições do acionamento podem não ser atendidas
  3. Tag desativada : A tag pode estar desativada

Solução:

  1. Verifique a configuração do acionamento
  2. Use o modo de visualização para verificar as condições
  3. Verifique se a tag está ativa

Possíveis causas:

  1. Conflito de versões : Pode haver conflitos com versões anteriores
  2. Permissões insuficientes : Você pode não ter permissão para publicar
  3. Erro de validação : Pode haver erros na configuração

Solução:

  1. Verifique se há conflitos com versões anteriores
  2. Verifique suas permissões no GTM
  3. Corrija os erros de validação antes de publicar

Possíveis causas:

  1. Conflito de JavaScript : Outras tags podem estar conflitando
  2. Ordem de carregamento : A ordem de carregamento pode estar incorreta
  3. Variáveis compartilhadas : Variáveis podem estar sendo sobrescritas

Solução:

  1. Use o modo de visualização para identificar conflitos
  2. Ajuste a prioridade das tags
  3. Use variáveis diferentes para cada tag

Possíveis causas:

  1. URL incorreta : A URL do script pode estar incorreta
  2. Bloqueio de rede : A rede pode estar bloqueando o acesso ao CDN
  3. Problema no CDN : O CDN da Rybená pode estar temporariamente indisponível

Solução:

  1. Verifique se a URL do script está correta
  2. Tente acessar a URL do script diretamente no navegador
  3. Entre em contato com o suporte se o problema persistir
## Melhores Práticas ### Organização de Tags * Use nomes descritivos para as tags (ex: "Rybená - Script Principal") * Agrupe tags relacionadas em pastas * Documente o propósito de cada tag ### Versionamento * Use descrições claras ao publicar alterações * Mantenha um histórico das alterações * Use o modo de visualização antes de publicar ### Monitoramento * Use o Google Analytics para monitorar o carregamento da Rybená * Configure alertas para erros * Revise regularmente o desempenho das tags ### Segurança * Limite o acesso ao GTM apenas a usuários autorizados * Use aprovações para alterações críticas * Revise regularmente as permissões dos usuários ## Recursos Adicionais * [Documentação de customização](/docs/getting-started/customization) * [Documentação de API](/docs/api/getting-started) * [Suporte técnico](/docs/getting-started/support) * [Documentação do Google Tag Manager](https://support.google.com/tagmanager/) ## Conteúdo Relacionado # Integrações (/docs/integrations) ## Plataformas Suportadas A Rybená oferece integrações nativas para as seguintes plataformas: ## Conceitos Gerais de Integração ### Método de Instalação Existem dois principais métodos de integração da Rybená: 1. **Via Script CDN**: A forma mais simples, adicionando uma linha de código JavaScript ao seu site 2. **Via Plugin/Extensão**: Para plataformas que possuem sistemas de plugins nativos ### Código Base A maioria das integrações utiliza o seguinte script base: ```html ``` Caso seu site não utilize protocolo HTTPS, substitua `https` por `http` no código acima. ### Customização A Rybená pode ser customizada através de parâmetros de URL adicionados ao script. Para mais detalhes, consulte a [documentação de customização](/docs/getting-started/customization). Exemplo: ```html ``` ### Suporte a PDF Para plataformas que utilizam visualizadores de PDF padrão, é necessário instalar plugins customizados da Rybená para garantir que os textos dos PDFs sejam traduzidos corretamente. Isso ocorre devido a políticas de segurança dos navegadores que não permitem acesso a eventos de seleção em páginas incorporadas. ## Escolhendo a Integração Certa Para sites estáticos ou desenvolvidos com frameworks modernos (React, Vue, Angular), utilize a [instalação padrão](/docs/getting-started/installation) adicionando o script diretamente ao HTML. Para sistemas de gerenciamento de conteúdo como WordPress e Joomla, utilize os plugins oficiais para uma integração mais simples e com recursos adicionais. Para ambientes de aprendizagem como Moodle e Brightspace, utilize os métodos específicos de cada plataforma, geralmente através de áreas de configuração avançada. Para aplicativos nativos, utilize a integração via WebView com controle programático através da API da Rybená. ## Próximos Passos Escolha a plataforma que você deseja integrar e siga o guia específico para obter instruções detalhadas de instalação e configuração. Precisa de ajuda? Confira nossa documentação de [Instalação](/docs/getting-started/installation) para mais detalhes. # Integração com Joomla (/docs/integrations/joomla) ## Visão Geral A integração com Joomla consiste em: 1. **Modificação do Template**: Adição do script da Rybená ao arquivo `index.php` 2. **Plugin de PDF**: Instalação de um visualizador de PDF customizado para habilitar tradução ## Instalação Principal **Acessar o painel administrativo** Faça login no painel administrativo do Joomla. Geralmente, o painel está acessível em `www.seusite.com.br/administrator` **Acessar a aba Sistema** No menu lateral, clique em **Sistema**. **Acessar Site Templates** Na seção **Templates**, clique em **Site Templates**. **Selecionar o tema ativo** Clique no tema que está atualmente em uso no seu site. **Editar o arquivo index.php** Clique no arquivo `index.php` para editá-lo. **Adicionar o script da Rybená** Cole o seguinte trecho de código entre as tags `` e ``: ```html ``` Certifique-se de adicionar o script dentro da seção `` do documento HTML. Exemplo de onde adicionar: ```html ``` **Salvar as alterações** Clique no botão **Salvar** para aplicar as mudanças. **Verificar a instalação** Acesse qualquer página do seu site para verificar se a Rybená está aparecendo corretamente. Agora a Rybená estará aparecendo em todas as páginas do site. Caso queira alterar algum comportamento, verifique a [página de customizações](/docs/getting-started/customization) e altere o trecho de código inserido no Passo 6. *** ## Plugin de PDF A Rybená não traduz PDFs do Joomla por padrão devido a políticas de segurança dos navegadores. Para habilitar a tradução de PDFs, é necessário instalar um plugin customizado. ### Por que é necessário? * Navegadores modernos bloqueiam scripts de acessarem eventos de seleção em iframes * Plugins de PDF padrão do Joomla utilizam iframes para renderizar PDFs * O plugin customizado da Rybená permite contornar essa limitação ### Sobre o Plugin Este é um plugin de conteúdo Joomla que torna possível mostrar arquivos PDF acessíveis em conteúdo baseado. Foi construído baseando-se no [Mozilla PDF.js](https://github.com/mozilla/pdf.js). No Joomla! 2.5, o recurso PDF não está mais incluído por padrão. Por isso, não é possível inserir PDFs nos artigos de forma muito intuitiva, como por exemplo com um botão no criador de artigos de "Criar PDF". ### Instalação do Plugin de PDF **Baixar o plugin** Baixar plugin PDF Viewer para Joomla {" "} **Fazer login no painel** Acesse o Painel Administrador do Joomla. {" "} **Acessar o Gerenciador de Extensões** Vá em **Extensões** → **Gerenciador de extensões** → **Instalar**. {" "} **Fazer upload do arquivo** Acesse a aba **Upload & Install Joomla Extension**. Selecione o arquivo ZIP baixado e faça o upload do mesmo. **Habilitar o plugin** Acesse o Gerenciador de extensões e habilite o plugin **Content - pdfviewer**. ### Utilização do Plugin de PDF Para exibir PDFs acessíveis com a Rybená: **Fazer upload do PDF** Primeiro, faça o upload dos seus PDFs para o Gerenciador de Mídias do Joomla. Vá em **Conteúdo** → **Mídias**. **Copiar o link do PDF** Clique no PDF que deseja disponibilizar e copie o link do mesmo. **Inserir no artigo** Navegue até o artigo onde deseja disponibilizar o PDF e cole o seguinte comando: ```html {pdfviewer file=COLE-AQUI-O-LINK-DO-PDF} ``` Exemplo: ```html {pdfviewer file=/images/documentos/manual.pdf} ``` **Salvar e verificar** Salve o artigo e verifique se o PDF está sendo exibido corretamente com a Rybená. Ao disponibilizar PDFs para os usuários, deve-se escolher o plugin instalado. PDFs inseridos de outras maneiras **não terão** a integração com a Rybená. *** ## Customização Você pode customizar o comportamento da Rybená adicionando parâmetros ao script. Para mais detalhes, consulte a [documentação de customização](/docs/getting-started/customization). Exemplo de customização: ```html ``` *** ## Solução de Problemas

Possíveis causas:

  1. Script não adicionado corretamente : Verifique se o script foi adicionado entre as tags ``
  2. Cache do navegador : Limpe o cache do navegador e recarregue a página
  3. Cache do Joomla : Limpe o cache do sistema

Solução:

```bash # Limpar cache do Joomla # Acesse: Sistema → Limpar Cache # Selecione todos os itens e clique em "Excluir" ```

Possíveis causas:

  1. Plugin de PDF não instalado : Verifique se o plugin Content - pdfviewer está instalado e ativo
  2. Sintaxe incorreta : Verifique se a sintaxe `{pdfviewer file=...}` está correta
  3. Caminho do PDF inválido : Certifique-se de que o caminho do PDF está correto

Solução:

  1. Verifique se o plugin está habilitado em Extensões → Gerenciador de extensões
  2. Verifique a sintaxe do comando `{pdfviewer}`
  3. Teste o caminho do PDF acessando-o diretamente no navegador

Possíveis causas:

  1. Permissões de arquivo : O arquivo pode não ter permissões de escrita
  2. Template bloqueado : Alguns templates podem ter proteção contra edição

Solução:

```bash # Verificar permissões do arquivo ls -la templates/seu-tema/index.php # Alterar permissões se necessário chmod 644 templates/seu-tema/index.php ```

Possíveis causas:

  1. Plugin não habilitado : Verifique se o plugin está ativo
  2. Conflito com outros plugins : Desative temporariamente outros plugins
  3. Versão do Joomla incompatível : Verifique a compatibilidade da versão

Solução:

  1. Acesse Extensões → Gerenciador de extensões → Gerenciar
  2. Filtre por "pdfviewer" e verifique o status
  3. Se necessário, reinstale o plugin

Possíveis causas:

  1. Conflito de JavaScript : Outros scripts podem estar interferindo
  2. Versão do PHP : Verifique se está usando uma versão compatível do PHP (7.4+)

Solução:

  1. Verifique o console do navegador para erros de JavaScript
  2. Atualize o PHP para uma versão mais recente
  3. Entre em contato com o suporte
## Recursos Adicionais * [Documentação de customização](/docs/getting-started/customization) * [Documentação de API](/docs/api/getting-started) * [Suporte técnico](/docs/getting-started/support) ## Conteúdo Relacionado # Integração com Aplicativos Móveis (/docs/integrations/mobile-apps) ## Visão Geral O fluxo de integração entre a Rybená e aplicativos é realizado através de incorporação de uma WebView com comandos facilitados para manipular a aplicação. Nas integrações com aplicativos, entendemos que a forma de interação entre o usuário e o sistema é bastante diversa e dinâmica, muito diferente do cenário web, em que o usuário controla suas ações por seleções e cliques. Por isso, entendemos que a melhor forma de entregar essa integração é através de maneira programática, para que cada aplicativo diga a Rybená quando traduzir e qual texto seja traduzido. Dessa forma, todas as funções de API estarão disponíveis na WebView da Rybená. ## Integração por Incorporação Na integração por incorporação, o aplicativo de origem incorpora o aplicativo Rybená dentro dele, ou seja, diferentemente da outra solução, não é necessário abrir outro aplicativo ou ter o aplicativo Rybená instalado. ### Conceitos Básicos 1. **WebView**: Componente que permite exibir conteúdo web dentro do aplicativo 2. **Token de Autenticação**: Chave única para identificar e autenticar sua aplicação 3. **API Programática**: Conjunto de funções para controlar a Rybená via código 4. **Comunicação Bidirecional**: O aplicativo pode enviar comandos e receber respostas da Rybená ### Passos Básicos 1. Criar um objeto WebView (grande disponibilidade desse tipo de componente em diversas linguagens mobile) 2. Carregar o conteúdo da Rybená na WebView 3. Manipular o tamanho da Rybená 4. Abrir o player da Rybená quando for conveniente 5. Manipular todas as funcionalidades disponíveis através das [Funções de API](/docs/api/getting-started) ## Integração por Framework ### React Native A integração com React Native é simples e direta, utilizando o componente `WebView`. #### Instalação Primeiro, instale o pacote `react-native-webview`: ```bash npm install react-native-webview # ou yarn add react-native-webview ``` #### Implementação Básica ```tsx import React, { useRef } from 'react'; import { View, StyleSheet, Button } from 'react-native'; import { WebView } from 'react-native-webview'; export default function RybenáIntegration() { const webViewRef = useRef(null); // URL da WebView da Rybená com seu token de autenticação const rybenaUrl = 'https://repository.rybena.com.br/webview/index.html?token=SEU-TOKEN-AQUI'; // Função para manipular o tamanho da Rybená const setSize = (size: number) => { webViewRef.current?.injectJavaScript(` RybenaApi.getInstance().setSize(${size}); true; `); }; // Função para abrir o player const openPlayer = () => { webViewRef.current?.injectJavaScript(` RybenaApi.getInstance().openPlayer(); true; `); }; // Função para fechar o player const closePlayer = () => { webViewRef.current?.injectJavaScript(` RybenaApi.getInstance().closePlayer(); true; `); }; return (