Ocultar o Mostrar un panel lateral con JQuery

Una de las funcionalidades que más se implementa hoy en día en los sitios, son los menus laterales, y estos se muestran generalmente en la parte izquierda de la pagina, ejemplos actuales de estos menus se pueden ver en páginas como:

NYTIMES

nytimes lateral menu

YOUTUBE

youtube lateral menu

Ahora lo importante, es como replicar esto. Comence creando un div de ancho fijo que ocupa todo el alto de la pantalla, desde la esquina superior izquierda.

HTML

CSS

.panel-izq
{
position:absolute;
width:250px;
height:100%;
top:0px;
background-color:#a1a1ff;
}

Teniendo el div en la posición apropiada, necesitaba agregar el botón con el cual ejecutar la acción, de mostrar el div.

HTML

=

CSS

#btnMostrarPanel
{
position:absolute;
left:300px;
top:0px;
}

Entonces era solo necesario añadir la opción de ocultarlo. Para ello utilize el método de jQuery que permite animar elementos del HTML.


$(document).ready(function(){
$("#btnMostrarPanel").click(function(){
$(".panel-izq").animate({left:"-250px"},500);
})
});

Excelente, se oculta! y este es el código completo:

.panel-izq
{
position:absolute;
width:250px;
height:100%;
top:0px;
background-color:#a1a1ff;
}

#btnMostrarPanel
{
position:absolute;
left:300px;
top:0px;
}

JS Bin

=

$(document).ready(function(){
$("#btnMostrarPanel").click(function(){
$(".panel-izq").animate({left:"-250px"},500);
})
});

Pero si revisamos, esta no es la funcionalidad que tienen los sitios de ejemplo, pues el panel inicia oculto, y se puede mostrar u ocultar con cada acción del botón, así que hagamos algunos cambios en el código para poder cumplir con estas condiciones.

Es necesario iniciar con el panel oculto, para ello lo vamos a mover hacia la izquierda con un valor igual al ancho del div(Lo mismo que hacemos con la acción del animate del jQuery), cambiando la propiedad del CSS.


.panel-izq
{
position:absolute;
width:250px;
height:100%;
top:0px;
left:-250px;
background-color:#a1a1ff;
}

Y entonces, analicemos como debe actuar el boton, en un principio el panel esta oculto, por tanto debemos mostrarlo, y en el caso de que se encuentre visible toca ocultarlo. Es una funcionalidad binaria (Si voy a usar un boolean), así que con una variable global podemos controlar la acción a realizar.


var mostrar = true;

$(document).ready(function(){
$("#btnMostrarPanel").click(function(){
if(mostrar)
{
$(".panel-izq").animate({left:"0px"},500);
}else
{
$(".panel-izq").animate({left:"-250px"},500);
}
mostrar = !mostrar;
});
});

Revisemos el código, se esta creando una variable global que se llama mostrar y con ella se esta controlando la animación que se realiza con el jQuery, que básicamente, en el caso de que mostrar sea true(verdadero) se moverá a la derecha desde la posición -250 hasta la 0; y despues se niega el valor actual de la variable, esto es crucial para realizar la acción de ocultar que es la que se hace cuando la variable mostrar es false(falsa).

El código completo sería:

.panel-izq
{
position:absolute;
width:250px;
height:100%;
top:0px;
left:-250px;
background-color:#a1a1ff;
}

#btnMostrarPanel
{
position:absolute;
left:300px;
top:0px;
}

JS Bin

=

var mostrar = true;

$(document).ready(function(){
$("#btnMostrarPanel").click(function(){
if(mostrar)
{
$(".panel-izq").animate({left:"0px"},500);
}else
{
$(".panel-izq").animate({left:"-250px"},500);
}

mostrar = !mostrar;

});
});

Hay que tener en cuenta que dentro de la animación se está definiendo la propiedad left con el mismo ancho del panel, entonces si se define un ancho diferente del panel, o un valor distinto de left se pueden obtener resultados intersantes, como pestañas, o paneles moviles.

Cualquier duda, preguntala en los comentarios.

Publicar llaves SSH (SSH Keys) en GitHub

Hoy como de tantos días me vi envuelto en un problema recurrente, y es el hecho de que donde es que se encuentran por defecto las llaves “Keys” en mi sistema remoto para agregarlas al repositorio de github, de modo que publicará el código sin problema, y despues de muchas busquedas (Con los terminos y recursos incorrectos, todo hay que decirlo) la gente de GitHub tiene un muy buen tutorial para hacerlo, en la siguiente página:

https://help.github.com/articles/generating-ssh-keys

Básicamente lo primero es encontrar nuestra llave pública


cd ~/.ssh
ls
# Lists the files in your .ssh directory

por defecto las llaves se guardan en la carpeta ./ssh en la carpeta del usuario, la que te interesa es la que tiene la extensión .pub que es la llave pública que puedes distribuir.

En caso de que tengas que generar una llave desde cero puedes seguir el proceso a continuación, tienes que seguir el proceso de “ssh-keygen” donde despues de -t se coloca el typo de llave a generar, que el caso de github (y en la mayoria de casos) es “rsa”, y despues de “-C” el email con el que se va a asociar, en el ejemplo “your_email@example.com”


ssh-keygen -t rsa -C "your_email@example.com"
# Creates a new ssh key, using the provided email as a label
# Generating public/private rsa key pair.
# Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]
ssh-add id_rsa

Dentro del proceso se pregunta por el nombre del archivo en el que se guardará la llave.
Este mismo es el que se coloca como parametro, despues de “ssh-add” para agregar la llave generada al conjunto de llaves del sistema.

Ahora solo tienes que agregar la llave publica (de nuevo es la que tiene la extension .pub) a tu cuenta de github, dentro del tutorial utilizan la aplicación “clip” que lo que hace es guardar en el portapapeles el contenido del archivo, pero yo recomiendo abrir el archivo “.pub” con tu editor de texto preferido, copiar todo el contenido del archivo (todo el contenido incluyendo saltos de linea, usuarios texto, TODO).

Y lo pegas en el campo de texto Key, de las sección SSH Keys de la configuración (settings) de la cuenta, el título puede ser cualquier cosa, pero recomiendo algo que te indique el origen de la llave.

Y listo!

Arreglar problemas con innerHTML en IE

Algunas veces IE nos hace preguntarnos los motivos por los cuales hacemos frontend, en especial, cuando validando una aplicación nos dice unknown error, en mi caso particular estaba intentando modificar el texto de un div que se encontraba dentro de una tabla (era sharepoint 2007), y por motivos de la organización no se podia usar jQuery y su increíble metodo .html(), así que tocaba hacerlo en puro javascript, despues de mucho indagar, y multiples intentos de solución, encontré esta respuesta en stackoverflow http://stackoverflow.com/questions/8999998/javascript-innerhtml-is-not-working-for-ie en donde por medio de una solución muy elegante se arregla el error.

Es como sigue:


var newdiv = document.createElement("div");
newdiv.innerHTML = text;
var container = document.getElementById(id);
container.appendChild(newdiv);

Básicamente lo que se hace es que se crear un div al que se le asigna el texto que se desea incluir.


var newdiv = document.createElement("div");
newdiv.innerHTML = text;

Y luego se agrega el div creado al elemento al que se desea asignar el html.

Introducción a Node.js

Como parte de muy reciente fanatismo por Node.js (ya he pasado por esta etapa varias veces con la misma tecnología), esta vez traigo un video en el que Ryan Dahl (Creador de node.js) muestra algunas de las funcionalidades de esta (fabulosa) tecnología.

[pytemplate] Nuevo proyecto en Github

Acabo de publicar un pequeño proyecto en el que venía trabajando.

Un intérprete de plantillas para la generación de carpetas y archivos, de modo que solo sea necesario definir las jerarquias y nombre necesarios que estructuran el proyecto, y luego con la ejecución del script todo se crea.

http://github.com/ismaproco/pytemplate

Este es el readme de github en Español

Sencillo generador de plantillas de archivos y carpetas in Python 2.7

Solo tienes que llamar el script junto con el nombre de la plantilla como parámetro o solo guarda la plantilla como template.tf y ejecuta el script.

pytemplate.py mytemplate.tf

o

pytemplate.py mytemplate.tf

La plantilla

Solo debes crear la plantilla de la siguiente manera:

  • Corchetes {} defines una lista de Archivos.
  • Corchetes cuadrados [] defines una lista de Carpetas.

Por ejemplo si el archivo tiene una gramática como la siguiente.

{index.html,contact.html, aboutus.html }

Creará únicamente esos archivos.

Pero si en cambio la que sigue:

[main, imgs, libs, data]

Creará únicamente las carpetas

Pero puedes combinar ambos tipos de listas para crear plantilla mas complejas.

[imgs]
[libs[jquery{jquery.min.js,jquery.min.ui.js},mootols{mootols.js},data]]
[docs]
[views]

Puedes verificar el archivo template.tf incluido en el repositorio para ver una plantilla usada en proyectos de backbone.js.

Entendiendo Node.js

Node.js es una tecnologia que a venido aumentando en protagonismo, tal vez sea que usa javascript como lenguaje madre, o que usa el motor de interpretado de google, o como yo creo por el simple hecho de que se atrevio a innovar en algo que no muchos lo estaban haciendo, y es en la creacion de un backend con funcionamiento especifico.

Ahora más allá de la retórica, coloco este video que se detallan muchas de las funcionalidades y ambientes en lo que se recomienda el uso de node.js aparte de que se relata el funcionamiento del mismo.

Genera y controla sonidos en HTML5 con Web Audio API

https://developer.mozilla.org/en-US/docs/Web_Audio_API

La librería de Web Audio API es un experimento creado por un equipo de desarrollo en Mozilla (Si los mismos creadores de firefox) y es increíble lo que hace , lo que más resalta de este proyecto es las amplias posibilidades que brinda una capa de audio en el explorador, y poder controlarla desde usando javascript, cosas como la creación de loops musicales que es como un sonido se repite indefinidamente, generalmente este de poco tamaño, aumentar o disminuir el volumen de una pista en reproducción, o alterar el sonido.

y aunque suenan como irrelevantes las posibilidades, es mejor si se mira esta demostración del API creada por Daniel Gagan donde combina las principales funcionalidades en una impresionante aplicación.

http://forestmist.org/share/web-audio-api-demo/

Tal como él dice en la entrada, en términos de video juegos y sintetizadores hay muchas posibilidades usando esta librería. Pero otro aspecto que me llama mucho la atención es el uso que se le puede dar a nivel de visualizaciones dinámicas creadas por los usuarios o inclusive mezcladores en tiempo real desde el explorador.