Crear un backend rápido y poderoso con Socket.io en Azure


Siguiendo con el demo del 11 de diciembre el siguiente paso es crear un backend donde todo orquestará y hará armonía; pero para ello decidí usar Socket.io, ya que es una tecnología muy flexible y desde mi punto de vista, muy sencilla de implementar.

Básicamente en Socket.io se generan eventos y listener de estos eventos donde se necesite, si necesito ejecutar un evento en el backend, simplemente defino el emisor y el receptor, con sus lógicas de negocio dependiendo de como sea el callback.

Para comenzar es vital generar una máquina virtual en el ambiente que nosotros deseemos, sin embargo, con fines de esta práctica todo se hizo en Microsoft Azure y su implementación de Virtual Machines.

Crear Website básico en Microsoft Azure


El pasado jueves 11 de Diciembre en Microsoft Branch Colombia se estaba llevando a cabo unas sesiones técnicas para emprendedores del país, en esta sesión accedí a dictar la charla donde se tomarán los siguientes temas:

  • Websites Azure
  • Virtual Machines Azure
  • Windows Phone
  • Xamarin

Por lo cual decidí compartir este código usado durante la sesión en varias secciones, la primera es acerca de la creación básica de Websites en Azure.

Creando el Front End

En esta ocasión se decidió hacer un sitio muy básico y estático que a la final solo se conectará con un Backend publicado en otro lado.

En este caso se simulará un negocio de una disquera musical, sin embargo aclaro que todos los logos y nombres de marca son propiedad registrada.

  • Seleccionar una plantilla adecuada, en este caso ir a http://startbootstrap.com/template-overviews/freelancer/
  • Descomprimir el contenido y renombrar la carpeta a algún nombre fácil de recordar.
  • Modificar las imágenes primarias, donde aparece el muñeco por una foto de algún Dj y agregarle un background a esa sección, esto se hace en el archivo freelancer.css
header {
    text-align: center;
    color: #fff;
    background: #18bc9c;

    background-image: url(../img/DJ-Background.jpg);
  
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
  
    /* Background image doesn't tile */
    background-repeat: no-repeat;
  
    /* Background image is fixed in the viewport so that it doesn't move when 
       the content's height is greater than the image's height */
    background-attachment: fixed;
  
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
}

Continue reading “Crear Website básico en Microsoft Azure”

Windows Phone 8.1: WebView


El control WebView hospeda contenido Web en la aplicación el cual está en el ensamblado Windows.UI.Xaml.Controls.WebView definido en las librerías compartidas entre Windows y Windows Phone; mediante este control es posible renderizar código HTML y poderlo visualizar, por lo tanto podemos embeber una página Web en nuestra aplicación la cual nos puede traer grandes beneficios a la hora de desarrollar aplicaciones multiplataforma, sin embargo si se usa sin control o de manera desmedida puede convertirse en un dolor de cabeza ya que se puede volver un vector de ataque a nuestra aplicación.

He ahí el motivo de dedicarle una serie de artículos a este aparente sencillo control del cual podremos aprovechar para sacarle su máximo potencial.

Comenzando, dedicaré este artículo a explicar los ámbitos sencillos.

Primeros pasos

Para implementar un control tipo WebView nuestro proyecto de Windows Phone 8.1 debe tener referenciado el ensamblado Windows.UI.Xaml.Controls.WebView el cual si lo construimos con la ayuda de Visual Studio 2015 o 2013 ya lo tendremos referenciado por defecto.

Es decisión nuestra declararlo en la interfaz gráfica o en el code behind, sin embargo la documentación de las API de Microsoft oficial (MSDN) nos recomienda declarar todos los controles a través de XAML porque ya este fue optimizado para administrar la memoria y demás, sin embargo en casos particulares se puede declarar que en este caso será C#.

Code behind:
Windows.UI.Xaml.Controls.WebView webView = new Windows.UI.Xaml.Controls.WebView();
webView.Name = "myWebView";
XAML:
<WebView x:Name="myWebView" />

Continue reading “Windows Phone 8.1: WebView”

WinAPI en aplicaciones de escritorio


Cuando estamos desarrollando aplicaciones de escritorio con tecnologías Microsoft lo hacemos con WPF o WinForms, pero muchas veces necesitamos acceder a funcionalidades extra que nos proporciona Windows ya que este cuenta con un gran volumen de funciones para los desarrolladores el cual podemos tener acceso desde las entrañas de Windows hasta los más altos niveles como es la interfaz gráfica, ya sea modificandola a nuestro acomodo o simplemente porque el desarrollo lo necesita.

En el desarrollo de Malware es muy común hacer uso de WinAPI porque como ya les comentaba se puede tener acceso a un nivel muy cercano de Kernel de Windows, hacer estos movimientos en aplicaciones con C++ y C es muy sencillo ya que Windows proporciona los headers para usarlos de manera muy cómoda; el problema viene cuando queremos acceder a estas funcionalidades desde C# o Visual Basic ya que por su propia arquitectura no acceder de manera convencional estas API.

Para entrar un poco en detalle, las API de Windows están contenidas en unas DLL ya compiladas ya que casi todas las aplicaciones que ves en la pantalla (si estás en Windows) acceden a estas y para hacer llamados a código nativo desde aplicaciones administradas como es el caso de las aplicaciones de .Net, me explico, acceder a funciones de DLL’s construidas en lenguajes como C++ (No Visual C++)  o C para ser usadas en aplicaciones que funcionan bajo el CLR

Sin ir más allá en teoría ya que si estás en este post es porque algo debes saber de WinAPI, les presento un portal Web donde recopilan todas las funcionalidades y ponen el código en C# y VB de como debe ser usado, en las más comunes ponen ejemplos de uso.

http://www.pinvoke.net/

How To: Escalar imágen manteniendo proporciones – JQuery


La mayoría de veces tenemos que poner un listado imágenes de manera estándar pero la peor práctica es volver todas estas imágenes al mismo tamaño una a una en un editor de imágenes, ya que por lo general estas vendrán de algún servicio web o directamente desde los clientes.

Teniendo esta necesidad me puse a la tarea de buscar en Internet y mejoré un código muy bueno que encontré en la siguiente Web: http://ericjuden.com/2009/07/jquery-image-resize/ Continue reading “How To: Escalar imágen manteniendo proporciones – JQuery”

Snippet: storageHelper.js


El día de hoy he creado una pequeña librería que encapsula las funcionalidades para LocalStorage de HTML5, esto se puede usar en cualquier Web App o Mobile App.

Sin más o menos que decir les dejo la librería: Continue reading “Snippet: storageHelper.js”

Día del maestro – FacultyCol, WebGL Demo1


WebGL logo

Lo prometido es deuda y comenzaré a publicar los 4 demo que se tenían preparados para el día del maestro.

La primera demostración es un escenario en 3D donde se controla la posición mediante las teclas de teclado a la cámara y con el mouse se controla la dirección de la misma.

La carpeta contiene un index, la librería de Three.js y PointerLockControls.js:

http://1drv.ms/1n2cBkz

Auto KeyDown y KeyUp en C#


En alguna ocasiones necesitamos desarrollar un programa o aplicación donde simule un evento del teclado para hacer diversas cosas, como por ejemplo controlar un videojuego de manera remota, haciendo spam, usando Kinect para leer los movimientos y controlar el flujo de un programa externo, en fin… para mi caso lo necesito para automatizar el tecleado de la flecha hacia arriba y hacia abajo, en los próximos post explicaré el motivo.

Inicialmente lo iba a hacer en Javascript nativo pero dadas las políticas de seguridad de Internet Explorer 11 me vi obligado a hacer otra solución, lo único que se me ocurrió fue hacerle una trampilla a IE y hacerle creer que el usuario era quien enviaba el comando del teclado, desgraciadamente no soy el único que se le ha ocurrido y no solo con buenas intenciones, averiguando a puro ensayo y error me di cuenta que para llevar a cabo esta acción la aplicación debe estar con permisos administrativos, de lo contrario IE 11 cierra la aplicación al detectar que está siendo aplicada esta técnica que comunmente se usa para generar spam.

Ok, luego entendiendo esos puntos claros no queda más que comenzar con un proyecto nuevo en Visual Studio, para este caso estoy usando el Framework 4.5 pero según la documentación la función que se usará es soportada desde el Framework 2.0.

En esta solución nueva seleccionar un proyecto para consola.

Se y entiendo muy bien que la función keybd_event fue sustituida por SendInput, pero nuevamente entra a jugar la seguridad de IE y es como si no le hiciera nada.

Entonces declararemos el siguiente método:

 

        private static void SendInput(byte key, int time)
        {
            keybd_event(key, 0, KEYEVENTF_EXTENDEDKEY | 0, 0);

            Thread.Sleep(time);

            keybd_event(key, 0, KEYEVENTF_EXTENDEDKEY | KEYEVENTF_KEYUP, 0);
        }

Continue reading “Auto KeyDown y KeyUp en C#”

Creando y entendiendo nuestro primer Web API


Cover Entry

Continuando con esta serie de tutoriales para aprender a usar Web API, comenzaremos con lo más básico e ir gradualmente aumentando la complejidad hasta llevar al objetivo inicial.

En este tutorial crearemos nuestro primer proyecto de ASP .NET Web API y ASP .NET MVC, donde consumiremos el API desde JQuery que ya viene por defecto en la plantilla de Bootstrap, recordemos que se está usando Visual Studio 2013 en su último update. Continue reading “Creando y entendiendo nuestro primer Web API”

Como hacer un botón para tu Website del Windows Store


En este post mostraré como hacer un botón muy parecido al que tiene el Windows Store en Internet… al menos en funcionalidad; este botón lo que hace es ejecutar la aplicación “Tienda” o “Store” (dependiendo del lenguaje de Windows 8 instalado) y buscar directamente la aplicación que se desea.

Aquí un ejemplo del botón original:

Ejemplo real

Y aquí se muestra como quedaría (Website todavía en contrucción):

Resultado

Continue reading “Como hacer un botón para tu Website del Windows Store”