heySilver is a modular navigation system for web applications that gives extra functionality to all of them.
For a long time, OSX has enjoyed an utility called QuickSilver, which allows the user to interact with the operating system applications by pressing determinated keys in a directed interface.
heySilver will allow you to the exact same thing in your web application, so the user can navigate through it by means of a completely directed interface, through the keys the user presses.
Thanks to a key combination we’ll be able to launch heySilver from wherever we want to.
SHIFT + SPACE
heySilver is composed by a plug-in system which adds extra functionality through JSON object loaded files. Thus we acquire limited flexibility through the webmaster’s imagination.
Stay updated on the heySilver's Blog.
heySilver is compatible with Firefox (for Mac and Win), Safari (Mac), and Internet Explorer 6 & 7 (Win).
There are some difficulties on Opera and some Mac browsers with the BackSpace key
To enjoy heySilver, we will only have to add the necessary files in our <head></head>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="heysilver.js"></script>
<link href="heysilver.css" rel="stylesheet" type="text/css" />
We can adjust heySilver editing conf object into heysilver.js file.
var conf = {
/*
* Plugin sfile
*/
file: 'plugins.js',
plugin_dir: 'plugins/',
/*
* Elements ID
*/
top_div:'heyTop',
frase_div:'frase',
info_div:'info',
content_div:'content',
/*
* Items classes
*/
selectItem:'selected',
classItem:'plugin',
closeItem: 'plugin',
/*
* Effects
*/
initEffect: function() {
new Fx.Styles(conf.float, {duration: 500,
transition: Fx.Transitions.linear}).start({
'height': [0, 500],
'width': [0, 500],
'opacity': [0, 0.8]});
},
endEffect: function() {
new Fx.Styles(conf.float, {duration: 500,
transition: Fx.Transitions.linear}).start({
'height': [500, 0],
'width': [500, 0],
'opacity': [0.8, 0]});
},
/*
* Initial function
*/
initMe: null,
/*
* Lang
*/
key01: 'Teclea la opción',
key02: 'Pulsa ENTER para activar',
key03: 'Cerrar',
key04: 'Salir de heyPress',
key05: 'Volver',
key06: 'Volver al menú anterior'
}
Menu options are defined right after the previous options.
items: [
{
'name':'Hola Mundo',
'desc':'Ejemplos basicos',
'klass':'basicos',
'file':'alert.js'
},
{
'name':'Ajax',
'desc':'Ejemplo de ejecución de peticiones ajax',
'klass':'Ajax',
'file':'ajax.js'
},
{
'name': 'formulario',
'desc': 'Creación de un formulario',
'klass':'Formulario',
'file': 'formulario.js'
},
{
'name': 'Lector de RSS',
'desc': 'Ejemplo de un lector de RSS',
'klass':'rss',
'file': 'rssReader.js'
},
{
'name': 'Utiles',
'desc': 'Utilidad WEB',
'klass':'utiles',
'file': 'usable.js'
}
]
You can watch some working examples here.
heySilver is a Beta version, so it might show some errors which will be solved in further versions.
Version 0.1
Inquisitor
Version 0.1
Matrix
Both versions require MooTools 1.0 in order to work.
I want to thank:
Are you planning to make a plug-in? Do you want to share one you’ve made?
Let me know and we’ll have them all together.
If you spotted an error, have a suggestion or want to tell me anything.