Usando el comando ng (este comando eta disponible cuando instalas Angular cli de manera global) puedes especificarle en que host y puerto quieres correr tu aplicación en vez del puerto por defecto 4200.

Lo único que tienes que hacer es lo siguiente:

var objects = [
    {
        name:"Web Scriptmatico",
        email: "admin@example.com",
        signupdate: "2016-01-25T12:12:00.000Z"
    },{
        name:"Sergio Mayer",
        email: "sergio@example.com",
        signupdate: "2016-02-25T12:13:00.000Z"
    },{
        name:"Administrador",
        email: "admin@administrador.com",
        signupdate: "2016-01-29T12:15:00.000Z"
    }
]

Bien, ordenarlo por un campo no es tarea difícil, solo tienes que usar la funcion sort del objeto array y usar una función que se encargue de hacer la comparación:

array.sort(function (v1, v2) { 
    new Date(v1['signupdate']) - new Date(v2['signupdate']);
});

Lo complicado viene cuando tienes que ordenar ese objeto por mas campos, entonces, ¿como realizamos un multi sort?. Para ello necesitamos el uso de algunas funciones adicionales, el siguiente código realiza la comparación de varios campos de forma descendente, es decir que dado un array de funciones usadas como comparadores empezara con el primero dado hasta el ultimo.

/**
* Pasa una función de comparación a otro comparador
* Y devuelve el resultado del primer comparador, a menos que
* El primer comparador devuelve 0, en cuyo caso se
* Se utiliza el resultado del segundo comparador.
 */
function makeChainedComparator(first, next) {
  return function(a, b) {
    var result = first(a, b);
    if (result !== 0) return result;
    return next(a, b);
  }
}

/**
 * Dada una matriz de comparadores, devuelve un nuevo comparador con
 * Prioridad descendente tal que
 * El próximo comparador sólo se utilizará si el comparador precedente ha regresado
 * 0 (es decir, encontró que los dos objetos eran iguales)
 *
 * Permite múltiples tipos de ser utilizado simplemente. Por ejemplo,
 * Ordenar por columna a, luego ordenar por columna b, luego ordenar por columna c
 */
function compositeComparator(comparators) {
  return comparators.reduceRight(function(memo, comparator) {
    return makeChainedComparator(comparator, memo);
  });
}

/**
 * Creamos un comparador basico
 */
function basicComparison(field) {
  return function(a, b) {
    var c1 = a[field];
    var c2 = b[field];
    if (c1 > c2) return 1;
    if (c1 < c2) return -1;
    return 0;
  }
}

function basicComparisonDate(field) {
  return function(a,b){
    new Date(a[field]) - new Date(b[field]);
  }            
}

Ya tenemos nuestras funciones, tomando el ejemplo de nuestro objeto array que puse más arriba entonces procedemos a ordenarlo:

var comparators = compositeComparator([
            basicComparison('name'), 
            basicComparison('email'), 
            basicComparisonDate('signupdate')
        ]);

objects.sort(comparators);

// hacemos un cosole.log para ver el resultado que seria el siguiente:
console.log(JSON.stringify(objects));



[
	{
	    "name":"Administrador",
	    "email":"admin@administrador.com",
	    "signupdate":"2016-01-29T12:15:00.000Z"
	},{
	    "name":"Sergio Mayer",
	    "email":"sergio@example.com",
	    "signupdate":"2016-02-25T12:13:00.000Z"
	},{
	    "name":"Web Scriptmatico",
	    "email":"admin@example.com",
	    "signupdate":"2016-01-25T12:12:00.000Z"
	}
]

Y LISTO!! Tenemos nuestro objeto ordenado!

Ahora solo quedaría hacer algunas pruebas en nuestro array y comenzar a jugar con nuestro código de ordenamiento.

Tiene las funciones mínimas de 9GAG, seguiré trabajando en el Tema para darle mas funcionalidad y mejoras.

Pueden descargar el tema desde : https://github.com/Scriptmatico/LikeGag

Para los que no conocen Bootstrap, es un Framework que nos permite desarrollar páginas web adaptables(Responsive Web), y que es Masonry?, Bueno es una librería que se basa en una cuadricula que nos permite acomodar elementos de la mejor manera posible y en el espacio disponible. La explicación del desarrollador nos dice que su librería se basa en como un albañil acomoda los ladrillos en una pared.

Bien!, después de tanto rollo ahora vamos a empezar con nuestra galería.

Lo primero que necesitamos es incluir las librerías que vamos a necesitar en el header.

Les explico el por que el uso de la librería imagesloaded, cuando nuestra pagina carga por primera vez las imágenes se van cargando conforme el explorador las va detectando, esto puede causar conflicto ya que Masonry toma el ancho y el alto del elemento contenedor y si en el momento en que el script toma dichas medidas la imagen no ha sido cargada puede causar que los elementos se sobre monten o queden mal alineados.

Siguiendo con el tema, ahora tenemos que agregar nuestro codigo para la galería, Bootstrap 3 ya nos trae un componente llamado thumbnail, con ese componente y un poco de CSS vamos a lograr hacer una simple pero bonita galería.

El código quedaría algo así:

Las clases container, col-sm-5 y col-md-3, thumbnail, btn, btn-primary y btn-default pertenecen a Bootstrap, la clase post pertenece a nuestra galería y el código se los pondré mas abajo. He modificado un poco las clases container, thumbnail, btn, btn-primary y btn-default.

Aqui el código CSS:

Y por ultimo el código jQuery:

Y con esto todo en conjunto hemos logrado esto:

Pueden ver el demo dando click aquí.

O descargar el código aquí.

Bueno como desarrollador para iPod Touch/iPhone, iPad y Mac me encontre con muchas dificultades para poder probar mis aplicaciones en un dispositivo con iOS.

Claro que eso lo solucionamos muy facil si nos enrolamos al programa para desarrolladores iOS que aqui en mexico nos cuesta alrededor de 1300MXN Anuales.

Pero bueno vasta de rodeos aqui les tengo una solución a este problema en unos cuantos pasos.

NOTA: Esto solo es para OSX Lion y xCode 4 pero no se pongan tristes mas abajo les dire como hacer que funcione para versiones posteriores a Lion

Lo primero que aremos es los siguiente:

Vamos a Aplicaciones->Utilidades-> Terminal.app y en la ventana de terminal escribiremos su y pulsamos enter nos preguntara el usuario de root, escribimos la contraseña y pulsamos enter. Para los que no tengan activado el usuario root sigan este tutorial.

Tendremos la siguiente ventana:

Ahora escribiremos el siguiente comando:

Y pulsamos enter, nos debe cargar algo parecido a la siguiente ventana:

Ahora pulsaremos CTRL + W(Shorcut para buscar) y buscaremos lo siguiente XCiPhoneOSCodeSignContext y lo reemplazaremos por XCCodeSignContext, reemplazaran ese texto aproximadamente 3 veces en el archivo, una vez que lo reemplacen pulsen CTRL + X .

El editor nano preguntara si desean guardar los cambios tal como la imagen que se muestra debajo, solo pulsen Y y con esto los cambios quedaran guardados.

Ahora escribiremos el siguiente comando:

Aparecera una ventana como la que muestro a continuación:

Ahora solo buscaremos las lineas donde dice CODE_SIGNING_REQUIRED y ENTITLEMENTS_REQUIRED y debajo de cada una de esas lineas veremos algo similar a esto:

<string>YES</string>

Solo cambiaremos ese YES a NO, y listo.

Ahora nos falta algo mas para poder probar nuestras aplicaciones en nuestros dispositivos.

Iremos a Aplicaciones->Utilidades->Acceso a Llaveros.app y una vez abierta la aplicación nos vamos al menu Acceso a Llaveros->Asistente de Certificados->Crear Certificado…

En a ventana que nos abrira pondremos lo siguiente:

Nombre: iPhone Developer

Tipo de identidad: Raíz autofirmada

Tipo de certificado: Firma en código

Y seleccionaremos Permitir ignorar los valores por omisión.

Debe de quedar una ventana como la que vemos a continuación:

Daremos click en Continuar y aparecera lo siguiente:

Daremos de nuevo click en continuar.

Y en la siguiente ventana debemos de dejar algo como lo que vemos a continuación:

Ahora daremos click en Continuar hasta llegar a una ventana como la que se muestra a continuación en la cual deberán tener seleccionado el llavero de inicio de sesión de lo contrario no servira de nada.

Ahora daremos click en Crear y listo.

Ahora una pequeña prueba, cree un proyecto con la plantilla default que nos da xCode

(Den click en Next hasta crear el proyecto)

Una vez cargada la aplicación podremos seleccionar el dispositivo que deseamos usar:

Mi dispositivo se llama Scriptmatico y mi proyecto Test, nos quedara algo así:

(Den click en la imagen para ampliar)

Ahora daremos click en el boton que dice Run muy parecido al boton de play de iTunes y una vez que termine de compilar nos preguntara lo siguiente:

Demos click en Permitir , aunque de preferencia pueden darle a Permitir siempre para que no les aparezca cada vez que compilen su proyecto.

Y listo nuestra app esta en nuestro dispositivo y podemos probarla

Esto es todo, ahora podremos probar nuestras aplicaciones en nuestros dispositivos y sin pagar!

NOTA: Esto es solo para probar tus aplicaciones ya que si deseas venderlas en la App Store tendras que enrolarte al programa de desarrollo para iOS

Si teníamos abierto xCode es necesario cerrarlo para que reconozca los cambios.

Como les mencione mas arriba este tutorial funciona con OSX Lion y xCode 4, para que funcione con versiones posteriores lo unico que tenemos que hacer es cambiar las instrucciones para modificar los plist de:

pico /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Info.plist

pico /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS5.1.sdk/SDKSettings.plist

A las siguientes:

pico /Developer/Platforms/iPhoneOS.platform/Info.plist

pico /Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS5.1.sdk/SDKSettings.plist

Si tienen problemas pueden contactarme en la sección de contacto de esta pagina.

Estuve ausente por varios meses de mi blog trabajando en otros proyectos.

En este post les voy a enseñar a como crear un Simple Instant Search similar a Google Instant Search.

Para mejor entendimiento de este tutorial les recomiendo que lean lo basico de jQuery, PHP y Mysql, El tiempo estimado para realizar este script es de 40 Minutos.

Espero les guste y disculpen el mal audio del video, mi computadora ha estado fallando mucho.

Prometo ir mejorando con su ayuda y comentarios.

Den click en el siguiente link para ver el Demo & Descargar

Video tutorial Parte 1:

Video tutorial Parte 2:

Video tutorial Parte 3:

El link al código fuente completo esta mas abajo, este video tutorial esta dividido en dos, ya que Youtube no deja subir vídeos de mas de 10Mins.

Bien aqui les dejo el Video tutorial, Agradeceria comentarios en youtube o en el blog. Gracias.

Descargar Código Fuente.

Parte 1:

Parte 2:

El código fuente completo lo tendrán en la segunda parte del curso, este video tutorial esta dividido en dos, ya que Youtube no deja subir vídeos de mas de 10Mins.

Bien aqui les dejo el Video tutorial, Agradeceria comentarios en youtube o en el blog. Gracias.

Parte 1:

Parte 2:

Con el aumento del uso de CSS3, estamos viendo más y más tutoriales en la web que nos ayudan a usarlo.

Pero igual existen herramientas que nos ayudan a generar código CSS3, y este es el caso de CSS3Generator, una web que nos ayuda a generar estilos en CSS3 y nos permite fácilmente implementarlo en nuestra web.

Alguno de sus características son las siguientes:

border radius
box shadow
text shadow
RGBA
@font-face
multiple columns
box resize
box sizing
outline

Puedes personalizarlo y ver una previsualizacion al instante.