A navegação espacial é a capacidade de navegar para elementos focalizáveis com base em sua posição em um determinado espaço. A navegação espacial é imprescindível quando o seu site ou aplicativo precisa responder às teclas de seta, um exemplo perfeito é uma televisão com controle remoto direcional. Os aplicativos de TV do Firefox OS são simplesmente HTML5 embrulhados em um shell de navegador sem croma (Gecko), portanto, a maioria dos aplicativos exige navegação espacial para garantir que o controle remoto físico da televisão seja útil. Luke Chang, da Mozilla, criou SpatialNavigation para tornar a implementação da navegação JavaScript fácil e flexível!
O SpatialNavigation apresenta recursos como:
- Elementos de foco totalmente estilizáveis
- Regiões definíveis
- Integração com jQuery
- Desempenho incrível
Um exemplo simples de uso do SpatialNavigation:
// Initialize
SpatialNavigation.init();
// Define navigable elements (anchors and elements with "focusable" class).
SpatialNavigation.add({
selector: 'a, .focusable'
});
// Make the *currently existing* navigable elements focusable.
SpatialNavigation.makeFocusable();
// Focus the first navigable element.
SpatialNavigation.focus();
<body> <a href="#">Link 1</a> <a href="#">Link 2</a> <div class="focusable">Div 1</div> <div class="focusable">Div 2</div> </body>
/* Add style to the focused elements */
a:focus, .focusable {
outline: 2px solid red;
}
Embora a demonstração acima seja bastante simples, sabemos que os aplicativos dinâmicos não são simples. O repositório SpatialNavigation apresenta mais de uma dúzia de exemplos exclusivos de uso do utilitário, desde os mais básicos até os mais complexos. Recomendo que o senhor explore essas demonstrações para ver tudo o que o SpatialNavigation tem a oferecer.
A navegação espacial também pode desempenhar um papel em sites para desktop; muitos sites atualmente usam um layout de grade flexbox que poderia fazer um ótimo uso de setas direcionais. O senhor precisa ter cuidado com CMD+up e CMD+down para rolagem de página inteira, é claro, mas a navegação espacial nesse espaço seria útil.
6 coisas que o senhor não sabia sobre o Firefox OS
Firefox OS está em todas as notícias de tecnologia e por um bom motivo: A Mozilla finalmente deu aos desenvolvedores da Web a plataforma de que precisam para criar aplicativos da maneira como os criam há anos: com CSS, HTML e JavaScript. O Firefox OS tem se aprimorado rapidamente…
Animações CSS entre consultas de mídia
As animações CSS estão no mesmo patamar do pão fatiado. As animações CSS são eficientes porque podem ser aceleradas por hardware, não exigem sobrecarga de JavaScript e são compostas por pouquíssimo código CSS. Muitas vezes, adicionamos transformações de CSS a elementos por meio de CSS durante…
-
Animações CSS com múltiplos planos de fundo
Animação de fundo CSS tem sido um assunto muito discutido há muito tempo, principalmente porque elas têm um visual muito bonito e não exigem elementos adicionais. Recentemente, perguntaram-me se era possível ter várias animações de fundo em um determinado elemento e a resposta é sim… com…
