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: Optical Character Recognition (OCR)


Siguiendo con el post anterior de los primeros pasos con la cámara se dejó preparado el terreno para este nuevo post.

Antes de comenzar es importante entender que es OCR y por supuesto, seguir el tutorial pasado.

En la última imagen del tutorial pasado en el método CreateBitmapFromCaptureElement se veía una otro método, ReadText.

Para comenzar a leer los caracteres contenidos en una imagen y en este caso obtenida de la cámara es obtener el empaquetado WindowsPreview.Media.Ocr, donde podremos instalarlo de la siguiente manera:

Instalar el NuGet

Abrir el Package Manager Console

Continue reading “Windows Phone 8.1: Optical Character Recognition (OCR)”

Windows Phone 8.1: Cómo usar la cámara, primeros pasos


Hace poco comencé con un proyecto bastante interesante el cual incluía un módulo de reconocer caracteres en una imagen, al lograr eso se podrían desplegar varios tipos de aplicaciones; sin embargo el primer obstaculo que encontré es que controlar la cámara del dispositivo no es como se hacía con sus antecesores (WP7 y WP8), es un poco más cercano a como se maneja en WindowsRT.

Por lo que primero que tenía que hacer era domar este dispositivo que accede a un nivel muy bajo en cuanto a Hardware (se me crasheó el móvil más de 30 veces!!!!), por lo cual decido compartirles esta serie de artículos hasta reconocer caracteres en Windows Phone 8.1, mecanismo que se denomina OCR (Optical Character Recognition).

Como estos artículos son nivel medio supondré que ya tienen creado el proyecto Windows Phone 8.1 XAML con C#.

Declarando los manifiestos

En el manifiesto de la App ir a la sección de Capabilities, seleccionar “Microphone” y “Webcam”

Continue reading “Windows Phone 8.1: Cómo usar la cámara, primeros pasos”

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”

Primeros pasos en Node.js


Casi siempre que tengo que escribir una nueva App con Node.js me toca buscar los pasos iniciales ya que mi frecuencia de desarrollo en esta tecnología no es alta, por lo que decidí re-copilar todos estos primeros pasos que desde mi perspectiva son los más generales.

¿Cómo instalar Node.js en Ubuntu 14.x?

Desde la consola ya sea directamente o un terminal PuTTY escribir los siguientes comandos:

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Cabe aclarar que la máquina virtual debe tener conexión a Internet.

¿Cómo instalar Express?

Continue reading “Primeros pasos en Node.js”

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 Demo 2 parte 2


En la primera parte con el demo que se iba a hacer para el evento FacultyCol se hizo un servidor que va a atender todas nuestras peticiones y en si opera como un servidor de chat, recibe y envia a todos sus clientes.

En esta sección será un poco más breve y me concentraré a hacer posible el control de Internet Explorer donde básicamente lo que se hará es un auto-tecleador o un simulador de eventos de teclado, como si fuera alguien quien estuviera físicamente manipulando el teclado.

Lo más básico y sencillo es hacer una aplicación de consola en Visual Studio, para este caso usaré Visual Studio 2013 y compilaré la aplicación con el .NET Framework 4.5.

Continue reading “Día del maestro – FacultyCol, WebGL Demo 2 parte 2”

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