Desarrollo con la plataforma de desarrollo Firebase

¿Qué es Plataforma de desarrollo Firebase?

Firebase es un conjunto de herramientas que permiten desarrollos más ágiles quitando al dearrollador la preocupación de diseñar e implementar un base de datos, diseñar e implementar consultas a esa base de datos, implementar autenticación y autorización, implementar el código de manejo de errores, el trabajo offline, desempeño, esacalabilidad, entre muchas otras cosas.

También tiene el servicio Firebase cloud Messaging (FCM) que permite el envío de notificaciones para aplicaciones Android, iOS y web.

Tradicional App Development - Desarrollo Tradicoinal de Apps Plataforma de desarrollo Firebase

Tradicional App Development – Desarrollo Tradicoinal de Apps Plataforma de desarrollo Firebase

El modelo de desarrollo tradicional de Apps es así:

Pero utilizando el servicio de Firebase, el esquema cambia a:

Firebase app development - Desarrollo de apps con Plataforma de desarrollo Firebase

Firebase app development – Desarrollo de apps con Plataforma de desarrollo Firebase

Este servicio provee el manejo de Autenticación y Autorización, Base de datos, Almacenamiento además de proveer manejo de Notificaciones.

Dentro del evento Google I/O 2016 se presentó un ejercicio en vivo, dónde se desarrollo una aplicación de chat en tres tecnologias diferentes: Android, iOS, Web utilizando el servicio Firebase.

Si quieres saber más acerca del conjunto de servicios de Firebase, ingresa al sitio oficial: https://firebase.google.com/

Saludos!

Menú HTML & CSS responsivo con transiciones

Hola a todos!!. En una publicación anterior vimos como crear un menú con animación JQuery, el día de hoy vamos a crear un menú con movimiento a través de transiciones CSS, es decir, podemos omitir el código Javascript para animar el menú, esto lo hacemos gracias a un truco de CSS ligado a un control checkbox.

1. El primer paso es crear la estructura HTML:

Aqui es dónde viene el truco, como puedes ver utilizamos un checkbox para mostrar el icono de menú, te preguntarás ¿Por qué utilizar un checkbox si lo puedo hacer con una etiqueta img?, bueno, pues este control nos ayudará a detectar cuando se hizo clic sobre él, utilizando CSS detectamos el cambio de estado checked para desplegar u ocultar el menú. ¿podría utilizarse una etiqueta button, link u alguna otra?, la respuesta es, seguramente sí, siempre y cuando podamos detectar sus estados dentro de CSS

<!-- Agregamos el control Checkbox y su label asociado -->
<input type="checkbox" id="menuCheck">
<label class="iconoMenu" for="menuCheck"></label>

<<!-- Este es el titulo de la página -->
<h1>Título de mi página</h1>

<!-- Estructura del menú y su contenedor -->
<div class="contenedorMenu">
<ul>
<li><a href="#">Opción uno</a></li>
<li><a href="#">Opción dos</a></li>
<li><a href="#">Opción tres</a></li>
<li><a href="#">Opción cuatro</a></li>
</ul>
</div>

Seguramente notarás que la estructura realmente no es tan compleja, así que no ahondaré en ella.

2. Pasemos a los estilos

Dentro de los estilos, solo rescataré la forma de mostrar/ocultar el menú.

#menuCheck:checked ~ .contenedorMenu{transform: translateX(0%)}

La explicación de esta línea debe comenzar con saber qué es el simbolo ~ y para que se utiliza, este simbolo llamado selector obtiene todos los elementos de la parte izquierda que preceden a la parte derecha de la regla, ejemplo: element1 ~ element2 (seleccionar todos lo elementos element2 que sean hermanos/estén al mismo nivel jerárquico que element1), para mayor información consultar el enlace https://www.w3schools.com/cssref/css_selectors.asp.

Para nuestro caso, estamos seleccionado al div contenedor del menú cuando el checkbox este en estado checked. Cuando el checkbox deja de estar en este estado los estilos vuelven a su “normalidad”, es decir a los estilos establecidos de inicio.

Para “animar” el menú utilizamos transiciones CSS que propiamente son algo diferente a las animaciones CSS, la principal diferencia es que las transiciones solo se inician en un cambio de estado como vimos ahora, mientras que las animaciones no dependen de estados de las etiquetas y se puede configurar mas a detalle como se comportará el CSS.

Finalmente te dejo el demo del funcionamiento de este código.

Saludos!

See the Pen Menú HTML & CSS responsivo con transiciones by Jesús Rodríguez (@chuyrdz) on CodePen.

Creación de menú (UL) desde cero – 5 Animación JQuery

En los post anteriores hemos creado un menú básico horizontal utilizando listas no ordenadas, luego le agregamos submenús y también lo hicimos pegajoso al scrollear sobre la página. El día de hoy modificaremos el menú básico para hacerlo vertical y vamos a utilizar JQuery para animar (mostrar / ocultar ) el menú y mejorar la navegabilidad del sitio.

1.- Estructura básica del menú. Utilizaremos la misma estructura que hemos utilizado desde el inicio.  

 <div class="contenedorMenu">        
           <ul class="menu">
                 <li><a href="#inicio">Inicio</a></li>            
                 <li><a href="#seccion1">Sección 1</a></li>
                 <li><a href="#seccion2">Sección 2</a></li>
                 <li><a href="#seccion3">Sección 3</a></li>
        </ul>                        
 </div>

 

2.- Estilos para el menú. Utilizaremos las mismas reglas, solamente cambiaremos algunos estilos para hacerlo vertical.   Hasta este punto el menú se ve así: Menu JQuery

3.- Agregar elementos adicionales a la página. Vamos a incorporar un encabezado para el menú, este contendrá un botón en donde al hacer clic se mostrara u ocultara el menú. Antes del div class=”contenedorMenu” agregamos:

<div class=”encabezadoMenu”></div>
<div class=”botonMenu”></div>

y su correspondiente css

/*Estilos para el encabezado del menu*/            
.encabezadoMenu{ width:250px; height:70px; background-color:#2C2C30;}            
.botonMenu{width:37px; height:31px; background-image:url(‘Menu.png’); position:relative; top:20px; left:25px;}            
.botonMenu:hover{ cursor:pointer} ahora el menú se ve asi: Menu5_1 4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la versión mas reciente para trabajar nuestros proyectos. 5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente: -Inicialmente el menú debe estar oculto. -Al hacer clic sobre el botón, el menú deberá desplegarse y mostrarse completamente. -Al hacer clic nuevamente, el menú deberá contraerse y ocultarse completamente. Esto se implementará así: // <![CDATA[

    $(document).ready(function(){    
          $(“.contenedorMenu”).slideToggle(); /*Ocultar de inicio el menu*/
          /*Efecto del menu principal*/
          $(“.botonMenu”).click(function(event){ 
               event.stopPropagation(); 
              $(“.contenedorMenu”).slideToggle();  /*SlideUp o SlideDown dependiendo de su estado*/
        });            
  });    

// ]]>
menuAnimado El funcionamiento de SlideToggle, SlideUp y SlideDown puede estudiarse en la documentación oficial de JQuery. En el siguiente post, incluiremos el uso del scroll para ocultar el menú. Gracias

Creación de menú (UL) desde cero – 4 Sticky Menu.

En el post anterior hicimos un menú horizontal, con posibilidad de agregar submenus verticales para cada opción del menú.

Ahora, agregaremos un poco de funcionalidad al menú, haremos que este menú este siempre visible sin importar que tan larga este la pagina y cuanto se scrollee, a este efecto se le conoce como StickyMenu (Menú pegajoso).

Comencemos……

1.- Estructura básica del menú. Para este ejemplo, utilizaremos la estructura generada en el primer ejercicio.

<div class=”contenedorMenu”>        
                <ul class=”menu”>
                    <li><a href=”#inicio”>Inicio</a></li>            
                    <li><a href=”#seccion1″>Sección 1</a></li>
                    <li><a href=”#seccion2″>Sección 2</a></li>
                    <li><a href=”#seccion3″>Sección 3</a></li>
                </ul>                        
            </div>

2.- Estilos para el menú. Utilizaremos los estilos generados en el primer ejercicio.

<style type=”text/css”>
            body{ margin:0px;}                       
            /*Estilos para el contendor del menu*/            
            .contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 100%; /*ancho del menu */
            }
            /*Estilos para el elemnto ul*/
            .menu
            {
                list-style: none;  /*Quitar viñetas de la lista*/
                padding: 0px;    /*Quitar sangría de la lista */
                height: 30px;    /*Establecer el ancho del menu*/
                line-height: 30px; /*Centrar el contenido al medio*/
                margin: 0px;/*Quitar espacios arriba y abajo*/
            }
            /*Estilos para los items de menu*/
            .menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }
            /*Estilos para el enlace dentro de los Items de menu*/
            .menu li a
            {
                text-decoration: none;    /*Quitar el subrayado*/
                color: white;    /*Color de fuente*/
                display: inline-block;    /*Expandir el enlace a lo alto del LI*/
                width: 100%;    /*Expandir el enlace a lo largo del LI*/
            }
            /*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
            .menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
            }
            /*Estilos sticky*/
            .sticky{position: fixed; top: 0px; width: 1000px;}
        </style>

3.- Agregar elementos adicionales a la pagina. Para mostrar como funciona este ejercicio, incorporaremos un encabezado y saltos de linea a la pagina. Como encabezado agregaremos un div, y los saltos de linea se incorporaran al final de la página.

<div class=”pagina”>
            <div class=”encabezado”></div>
            <div class=”contenedorMenu”>        
                <ul class=”menu”>
                    <li><a href=”#inicio”>Inicio</a></li>            
                    <li><a href=”#seccion1″>Sección 1</a></li>
                    <li><a href=”#seccion2″>Sección 2</a></li>
                    <li><a href=”#seccion3″>Sección 3</a></li>
                </ul>                        
            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>

Y sus correspondientes estilos:

            /*Estilos generales para la pagina*/
            .pagina{ width: 1000px; margin: 0 auto;}
            .encabezado{ width:100%; background-color: #456789; height: 200px;}

4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la version mas reciente para trabajar nuestros proyectos.

             <script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>

5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente:

-Inicialmente el menú debe verse debajo del encabezado y, mientras se scrollea hacia abajo recorrerse en la ventana, como normalmente ocurriría.
-Cuando el scroll rebase el ancho del encabezado, el menú cambiará de estilo para permitir que siempre este visible al tope de la página.

Esto se implementa así:

<script type=”text/javascript” >
            $(document).ready(function () {
                    /*Vincular el evento scroll a la ventana*/
                    $(window).scroll(function () {
                            //Obtener el alto del encabezado
                            var distancia = $(“.encabezado”).height();
                            //Verificar si se ha scrolleado lo sifuciente para que menú se vea en el tope del sitio                            
                            if( $(this).scrollTop() > distancia )
                            {
                                /*Si el scroll llego a la posicion del menu, dejar el menu al tope con posicion fija*/
                                $(“.contenedorMenu”).addClass(“sticky”);
                            }
                            else
                            {
                                /*Si el scroll esta por encima del menu, quitar la posicion fija en el tope*/
                                $(“.contenedorMenu”).removeClass(“sticky”);
                            }
                    });
            });
        </script>

Donde la clase sticky, se define:

/*Estilos sticky*/
.sticky{position: fixed; top: 0px; width: 1000px;}

Esto permite que el menú, siempre este visible sin importar que tan larga sea la página.

Menu4aMenu4b

Gracias

Creación de menú (UL) desde cero – 3 Submenus.

En el post inicial vimos como crear un menú utilizando listas no ordenadas, luego vimos como añadir un estilo de tabs a las opciones del menú. Ahora veremos como agregar submenus a las opciones del menú principal, claro, utilizando listas no ordenadas.

Comencemos….

1.- Estructura principal. Para este ejemplo utilizaremos la estructura creada en el menú básico y la modificaremos para agregar submenus utilizando otra lista no ordenada. La lista que representara el submenu se agregará dentro de la opcion de menu que la contenga, con esto se facilita el posicionamiento del submenu.

<div class=”contenedorMenu”>        
            <ul class=”menu”>
                <li><a href=”#inicio”>Inicio</a></li>            
                <li><a href=”#seccion1″>Sección 1</a></li>
                <li><a href=”#seccion2″>Sección 2</a>
                    <!– este es el submenu –>                    
                    <ul class=”submenu”>
                        <li><a href=”#Subseccion1″>SubSeccion1</a></li>                    
                        <li><a href=”#Subseccion2″>SubSeccion2</a></li>
                        <li><a href=”#Subseccion3″>SubSeccion3</a></li>
                    </ul>
                    <!– Termina el submenu –>                
                </li>
                <li><a href=”#seccion3″>Sección 3</a></li>
            </ul>                        
        </div>

2.- Estilos para el submenu. El submenu debería estar oculto hasta que la opción que lo contiene este seleccionada. Además, agregamos estilos para los submenu items.

/*Estilos para submenu UL*/
            .submenu
            {
                display:none; /*No mostrar*/
            }

/*Estilos para los SubmenuItems    */
            .submenu li
            {
                background: #a921A6;   /*Color de fondo para el menu*/                
                width:140px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }

3.- Desplegar el submenu. Una vez el cursor este sobre la opción del menú principal, se cambiará el estilo del submenu para mostrarlo.

/*Cuando se pase el cursor sobre el Item de Menu, mostrar el submenu*/
            .menu li:hover > .submenu
            {
                display: inline-block;            /*Mostrar submenu*/
            }        

 

Ahora, tenemos un menú parecido a este:

Menu Ul

En el siguiente post veremos como hacer un sticky menú

Gracias

Creación de menú (UL) desde cero – 2 Diseño Tab.

En el post anterior creamos la estructura básica del menú utilizando un contenedor y una lista no ordenada como las opciones que el menú va mostrar. Construimos un menú bastante básico pero funcional.

En este post, daremos al menú un aspecto diferente, vamos a simular TABs.

Comencemos…

1.- Estructura Intacta. Para este ejemplo, la estructura que creamos anteriormente no se modificara, seguimos utilizando:

<div class=”contenedorMenu”>        
            <ul class=”menu”>
                <li><a href=”#inicio”>Inicio</a></li>            
                <li><a href=”#seccion1″>Sección 1</a></li>
                <li><a href=”#seccion2″>Sección 2</a></li>
                <li><a href=”#seccion3″>Sección 3</a></li>
            </ul>                        
        </div>

2.- Agregar estilos. Para darle el efecto de tab, tendremos que agregar nuevos estilos y cambiar de lugar algunos otros.

El primer cambio que realizaremos sucede en la regla del contenedor, en el menú original teníamos esta regla:

.contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 400px; /*ancho del menu */
            }

Como primer cambio moveremos el estilo que establece color de fondo de la regla del contenedor y lo colocaremos en la regla que establece estilos a los ListsItems.

Como segundo cambio, en esta misma regla, agregaremos los estilos para redondear los bordes superiores de los item de la lista, para esto utilizaremos los estilos border-top-left y border-top-right.

La regla queda así:

.menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
                

               /*Para menú en forma de tabs*/
                background: #E321A6;   /*Color de fondo para el menu 1er cambio*/
                border-top-left-radius: 15px;   /*Bordes redondeados 2ndo cambio*/
                border-top-right-radius: 15px;                
            }

Para mayor información acerca del estilo border-radius, ir aquí

Como tercera modificación, agregamos un borde redondeado al evento hover de los ListItems, esto con la finalidad de ver un borde redondeado al colocar el cursor sobre el Item.

.menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
                 /*Para menú en forma de tabs*/

                 border-top:1px #E321A6 solid;
                 border-top-left-radius: 15px;
                 border-top-right-radius: 15px;    
            }       

El menú queda así:

Menu tab

En el siguiente post veremos como agregar submenús al menú principal

Saludos

Creación de menú (UL) desde cero – 1 Estructura y diseño.

Los menús siempre han sido un elemento infaltable en la visualización de información, por qué, es a partir de él que los usuarios pueden acceder de manera fácil y rápida a toda la información que se desea mostrar.

En los sitio web, los menús han pasado de ser una simple lista enlaces a una serie de elementos HTML que combinado con CSS y JavaScript, nos muestran funcionalidades mas ricas y vistas mas atractivas para usarse.

En esta serie de posts, crearemos un menú desde cero utilizando una lista no ordenada (UL), modificando su vista con CSS y dando funcionalidad con JQuery.

Comencemos…….

1.-Estructurar el menu. Utilizo un div “contenedor ” que me permitira mover el menu o cambiar su posicionamiento, dentro de él creo un elemento Lista No Ordenada y creo sus ListItems, uno por cada opción que contendrá el menú.

<div class=”contenedorMenu”>        
          <ul class=”menu”>
                <li><a href=”#inicio”>Inicio</a></li>            
                <li><a href=”#seccion1″>Sección 1</a></li>
                <li><a href=”#seccion2″>Sección 2</a></li>
                <li><a href=”#seccion3″>Sección 3</a></li>
       </ul>                        
 </div>

2.- Diseñar los estilos. Una vez creada la estructura HTML que formará mi menú, aplico los estilos necesarios para darle una vista diferente a como se vería normalmente una lista no ordenada. A continuación se muestran los estilos aplicados a cada uno de los elementos así como la función que tiene cada uno de ellos:

 <style type=”text/css”>
body{ margin:0px;}
/*Estilos para el contendor del menu*/
.contenedorMenu
{
background: #E321A6;   /*Color de fondo para el menu*/
width: 400px; /*ancho del menu considerando que cada una de las opciones del menu tiene como ancho 100px;*/
}
/*Estilos para el elemnto ul*/
.menu
{
list-style: none;  /*Quitar viñetas de la lista*/
padding: 0px;    /*Quitar sangría de la lista */
margin:0px; /*Quitar espacios que genera la lista ul*/
height: 30px;    /*Establecer el ancho del menu*/
line-height: 30px; /*Centrar el contenido al medio*/
}
/*Estilos para los items de menu*/
.menu li
{
float:left;    /*alinear los elemntos a la izquierda*/
width:100px;    /*Establecer el ancho de cada item*/
text-align:center;    /*centrar contenido en texto*/
}
/*Estilos para el enlace dentro de los Items de menu*/
.menu li a
{
text-decoration: none;    /*Quitar el subrayado*/
color: white;    /*Color de fuente*/
display: inline-block;    /*Expandir el enlace a lo alto del LI*/
width: 100%;    /*Expandir el enlace a lo largo del LI*/
}
/*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
.menu li a:hover
{
background-color:navy;    /*Color de Fondo*/
color:#fff;    /*Color de fuente*/
}

</style>

Hasta ahora, tenemos un menú bastante básico pero funcional. Algo asi:

Menu básico

En próximos post, agregaremos algunas funcionalidades y características a este menú.

2.-Menu en forma de TAB

Gracias.

Almacenar Arrays en Cookies con Javascript

Cuando un servidor web responde a una solicitud de un cliente el servidor termina la conexión que se establece entre ellos y se “olvida” de lo que esta pasando con el cliente, es por ello que se ideó la idea de almacenar en el cliente información que puede ser necesaria en caso de reestablecer la conexión con el servidor para realizar mas peticiones. Tomemos como ejemplo el inicio de sesión de un usuario en sitio web, el usuario iniciará su sesión al ingresar al sitio por primera vez, esta página pedirá recordar estas credenciales para evitar que el usuario tenga que iniciar sesión cada que se reestablece la comunicación con el servidor.

Esto es posible gracias a que el lenguaje JavaScript es capaz de escribir esta información directamente en el cliente a través de archivos de texto. Las cookies se administran de forma diferente para cada navegador, en algunos casos se crea un archivo de cookies por dominio y en algunos otros por cada usuario del equipo cliente. Esto no nos afecta en nada ya que en el lenguaje JavaScript las cookies se manejan de la misma forma, independientemente del navegador que el cliente utilice.

Desde el JavaScript las cookies se guardan la propiedad cookie del objeto document y de igual manera es desde ahí donde se recuperan las cookies almacenadas.

Cabe recordar que los datos que se almacenan dentro de las cookies se almacenan como cadena de caracteres, entonces les presento aquí una forma de almacenar datos de un arreglo dentro de una cookie:

//Teniendo un array con datos:
var ganadores = [“Luis”,120,”Ernesto”,87,”Vane”,145];
//creamos una variable que almacenara las cadenas que contienen el arreglo
var strGanadores=””;
//mediante un ciclo concatenamos los valores del arreglo a la cadena.
for(var i=0;i<ganadores.length;i++)
{
strGanadores+=ganadores[i]+”,”;  //agregamos un carácter ‘,’ (coma) como separador de los elementos en la cadena
}
//Quitamos el ultimo carácter, que es una coma.
strGanadores = strGanadores.substr(0, strGanadores.length-1);
//Generamos el tiempo de duración que tendrá la cookie
var hoy = new Date();    //Fri May 09 2014 10:43:00 GMT-0500 (Hora de verano central (México))
var unAnio  = 365*24*60*60*1000; // establecer la duración que tendra la cookie 365 dias * 24 horas *60 minutos * 60 segundos * 1000 milisegundos (1 año en milisegundos)
var duracion = hoy.getTime() + unAnio; //la suma de la fecha de hoy en ms ´un año en ms, como resultado = Fri May 09 2024 10:43:00 GMT -0500 en ms
hoy.setTime(duracion);
var expira = hoy.toUTCString();
//guardamos la cookie con los datos del arreglo y que expirara dentro de un año
document.cookie = strGanadores+”;expires=”+expira;

//Para recuperar la informacion
ganadores = document.cookie.split(“,”);  //obtenemos los elementos que se separaron por coma, retorna un arreglo
for(var i=0;i<ganadores.length; i++)
{
document.getElementById(i+1).innerHTML=ganadores[i];
}

Gracias

[IIS] Subir archivos de mas de 4MB

En algunas ocasiones es necesario adjuntar archivos desde el cliente, ya sea para enviar mi CV (Hoja de Vida) en algún registro a un Diplomado o simplemente para asociar una imagen a mi cuenta (Avatar), anteriormente ya vimos Cómo cargar archivos en SQL Server con ASP.NET usando C#  Pero IIS tiene definido por default permitir solo el cargado de archivos menores a 4Mb, es decir archivos relativamente pequeños.

En caso de necesitar archivos de mas de 4MB, se deberá hacer lo siguiente:

En el archivo de configuración Web.config:

Agregar la etiqueta <httpRuntime>, como propiedad agregar maxRequestLength y como valor de esta propiedad, establecer como entero (Int32) el tamaño en KB del limite del búfer, es decir del tamaño máximo del archivo que se puede seleccionar.

<httpRuntime maxRequestLength="10240"/> //10 MB

Saludos

¡¡Bienvenidos colaboradores!!

Le damos la más cordial bienvenida a nuestros colegas del Grupo Desarrollador SLP

Que de ahora en adelante se unen como colaboradores de este blog con aportaciones sobre nuevos temas y enriquecimiento de los actuales, sin duda cada una de las entradas generadas por estos nuevos colaboradores enriquecerán el contenido de sitio y apoyará a todos aquellos que buscan tips, trucos, códigos y experiencias!.

Bienvenidos y a compartir!

@chuy_rodriguez & @igarperez