­

Correr Angular 2 en un puerto y host especificos

Hay casos en especifico donde necesitar correr tu aplicación Angular 2 en un puerto o Host específicos.

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:

< View plain text >
code

  1. ng serve --host x.x.x.x --port 8888
  2. // x.x.x.x puede ser reemplazado por la ip o por el nombre del host y 8888 por el puerto que desees.

 

By |junio 6th, 2017|Categories: Angular|0 Comments
Read More

Multi Order en Node.js Multiple Sorting Order

Hace unos días me encontraba desarrollando una aplicacíon que necesitaba ser ordenada por 4 campos. Si ya eres un desarrollador Javascript o Node.js y haz trabajado con un array de objetos (pongo un ejemplo debajo de este párrafo) en algún momento haz necesitado de ordenarlo.


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.

By |mayo 14th, 2017|Categories: Node.js|0 Comments
Read More

LikeGag tema para WordPress similar a 9GAG

Después de otro largo periodo desparecido de la web les traigo este pequeño tema, el tema ha sido desarrollado usando Bootstrap, jQuery y PHP.

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

By |julio 3rd, 2014|Categories: Temas para WordPress|Tags: , , , |0 Comments
Read More

Simple Galería usando Bootstrap 3 + Masonry + Imageloaded de la manera fácil

Hacer una simple galería nunca fue tan fácil con estas dos grandiosas herramientas.

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.

< View plain text >
HTML

  1. <!-- Incluimos jQuery -->
  2. <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  3. <!-- Incluimos Bootstrap -->
  4. <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script><!-- Incluimos Masonry --><script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.0.0/masonry.pkgd.js"></script>
  5. <!-- Esta librería nos ayudara a crear imágenes placeholder para nuestro demo -->
  6. <script type="text/javascript" src="holder.js"></script><!-- Esta última librería es un complemento no requerido pero a veces indispensable para Masonry --><script type="text/javascript" src="imagesloaded.pkgd.min.js"></script>

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í:

< View plain text >
HTML

  1. <div id="posts" class="container">
  2.     <div class="col-sm-5 col-md-3 post">
  3.       <div class="thumbnail"> <img alt="..." width="300" height="200" data-src="holder.js/300x200" />
  4.         <div class="caption">
  5.           <h3>Thumbnail label</h3>
  6.           Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. <a class="btn btn-primary" href="#">Button</a> <a class="btn btn-default" href="#">Button</a> </div>
  7.       </div>
  8.     </div>
  9.     ...
  10.  
  11. </div>

 

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:

< View plain text >
css

  1. .container {
  2.   padding-left:0; padding-right:0
  3. }
  4.  
  5. .btn {
  6.     display: inline-block;
  7.     margin-bottom: 0;
  8.     font-weight: 400;
  9.     text-align: center;
  10.     vertical-align: middle;
  11.     cursor: pointer;
  12.     background-image: none;
  13.     border: 1px solid transparent;
  14.     white-space: nowrap;
  15.     padding: 6px 12px;
  16.     font-size: 14px;
  17.     line-height: 1.42857143;
  18.     border-radius: 4px;
  19.     -webkit-user-select: none;
  20.     -moz-user-select: none;
  21.     -ms-user-select: none;
  22.     user-select: none;
  23. }
  24. .btn-default {
  25.     color: #333;
  26.     background-color: #fff;
  27.     border-color: #ccc;
  28. }
  29.  
  30. .btn-primary {
  31.     color: #fff;
  32.     background-color: #428bca;
  33.     border-color: #357ebd;
  34. }
  35.  
  36.  
  37. .thumbnail {
  38.     display: block;
  39.     padding: 4px;
  40.     line-height: 1.42857143;
  41.     background-color: #fff;
  42.     border: 1px solid #ddd;
  43.     border-radius: 4px;
  44.     -webkit-transition: all .2s ease-in-out;
  45.     transition: all .2s ease-in-out;
  46. }

Y por ultimo el código jQuery:

< View plain text >
javascript

  1. <script language="javascript">
  2.  
  3.     jQuery(document).ready(function(){
  4.     var gutter = parseInt( jQuery( '.post' ).css( 'marginBottom' ) );
  5.     var container = jQuery( '#posts' );
  6.     // Creates an instance of Masonry on #posts
  7.     container.imagesLoaded( function() {
  8.         container.masonry({
  9.             itemSelector: '.post',
  10.             columnWidth: '.post'
  11.         });
  12.     });
  13.        
  14.            
  15.     });
  16.  
  17. </script>

Y con esto todo en conjunto hemos logrado esto:

Pueden ver el demo dando click aquí.

O descargar el código aquí.

By |febrero 26th, 2014|Categories: Bootstrap, CSS, General, Javascript, jQuery|0 Comments
Read More

Probar aplicación iOS en el dispositivo, sin programa de desarrolladores de Apple o JailBreak

Hola a todos se que he ausentado por un largo rato de mi blog y es que he estado ocupado en otros proyectos, pero el dia de hoy les traigo un post muy interesante y que estoy seguro que a muchos les va a agradar.

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:

< View plain text >
php

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

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:

< View plain text >
php

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

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.

 

By |abril 8th, 2012|Categories: iOS, iPod Touch / iPhone / iPad, Tutoriales|0 Comments
Read More