some image

Web

Sublime Text Packages utiles para Front End

Etiquetas: Web No comments

Sublime Text es uno de los mejores editores que he conocido hasta el momento, no sólo por su velocidad y su capacidad de abrir ficheros muy grandes, sino por lo minimalista y la cantidad de paquetes o packages que se le pueden instalar para hacer más divertido el trabajo.

El objetivo de este articulo es principalmente listar los packages más útiles, que desde mi punto de vista podría usar un desarrollador Front-End.

package_sublime

Si no sabes como ingresar al package manager de Sublime Text, simplemente sigue estos sencillos pasos :

  • Pulsa la combinación de teclas Ctrl+Shift+PCmd+Shift+H en Linux/Windows/OS X.
  • Escribe install y selecciona Control: Install Package
  • Escribe el package que necesites.

 

1. ColorHighlighter

¿Cuando estás aplicando colores te ha sucedido que no puedes identificar rápidamente aquellos valores hexadecimales o te sucede que no tienes ni idea del color?, pues bien este plugin te permite visualizar el color de la propiedad CSS que estás revisando simplemente con colocar el cursor encima.

Colorhighlighter

 

2. HTML-CSS-JS Prettify Plugin

¿Te ha sucedido que a veces es un poco molesto lidiar con la identación de tus archivos CSS, HTML o JS?. Pues bien, este plugin Sublime-HTMLPrettify te facilitará la vida ya que te permite configurar la cantidad de espacios para identar y todos usando el mismo shortcut ya se en Linux, Windows o en OS X. Bastante recomendado si quieres ahorrar tiempo con la identación de tus archivos HTML, CSS o JS.

  • Ctrl+Shift+H or Cmd+Shift+H in Linux/Windows/OS X

pettify

 

¿Conoces otros packages que te han sido super útiles y te gustaría compartirlos con otros que puedan llegar a ver este articulo?. Colócame un comentario y lo agregaré y estaré totalmente agradecido. :)

Validar formulario en angularJS

Etiquetas: , Blog, Web No comments
AngularJS Logo

AngularJS Validando Formularios

Esta es una validación de un formulario en angularJS, basicamente consiste en verificar la property $valid del formulario que estamos utilizando y aplicar algunos estilos para algunas directivas de angular. Pero bueno, empezaré por el principio.

1. Creando el formulario

  • Al momento de realizar nuestras validaciones con angular es necesario quitar la validación que hace el navegador utilizando el atributo novalidate sobre el elemento form de html.
  • Utilizar la directiva de angular ng-submit, para decirle a angular cuál será la validación que queremos realizar y qué sucederá al momento de enviar nuestro formulario.
  • Si queremos mostrar mensajes especificos de validación, podemos utilizar también el atributo $error, del campo que estamos llenando o validando, teniendo en cuenta que es necesario previamente haber utilizado la directiva ng-model.

A continuación colocaré el código HTML de mi formulario.

Thank you for send us your information!

 

2. Creando la lógica en JavaScript

En este ejemplo, he creado un metodo llamado addUser(), el cuál una vez todos los datos del formulario se encuentran validados correctamente, en este método puedo hacer lo que considere necesario, como por ejemplo guardar mi usuario, agregar a un array de objetos, etc…

(function(){
    var app = angular.module('signUpExample',[]);

    app.controller('signUpController', function(){
        this.user = {};
        this.submitted = false;
        this.addUser = function(){
            users.push(this.user);
            this.user = {};
            this.submitted = true;
        };
    });
})();

3. Agregando estilos.

Para que los campos tengan el efecto de que son validados en tiempo real, angularJS a medida que valida cada campo adiciona y cambia classes de estilos css, así que para resaltar cuando un campo se encuentra correctamente, es necesario sobreescribir los estilos a continuación.

.ng-invalid.ng-dirty{
    border-color:red;
}

.ng-valid.ng-dirty{
    border-color:green;
}

4. Resultado

Aquí puedes ver el demo funcionando.

angularValidacionForm1 angularValidacionForm2 angularValidacionForm3 angularValidacionForm4

5. Código Fuente

 

Git Logo

Código en GitHub

Ocultar header de la pagina con scroll down

Etiquetas: Blog, Web No comments

Durante mucho tiempo siempre me llamo la atención esas páginas en las qué uno hacía Scroll Down al contenido y mágicamente desaparecía el Header o el Menú en la página… Así que este fin de semana me puse en la tarea en descubrir la forma de hacerlo y voila!.. acá describo mi experiencia.

1. Revisando el código.

La forma más sencilla, es utilizando algo de jQuery y haciendo una validación de la posición del Scroll, la cuál nos permitirá hacer aparecer o desparecer el Header. (Lo interesante de esto es que podemos sacar nuestra creatividad a flote para hacer muchas más cosas :) ).

Acá presentó el código de JavaScript y el ejemplo en vivo de como ocultar header de la pagina con scroll down.

 

var lastPositionScrollTop = 0;

/***
 * Appear and disappear the header depends the
 * position of the Scroll
 */
$(window).scroll(function () {
    var position = $(this).scrollTop();
    if (position < lastPositionScrollTop){
        $('.navbar ').fadeIn("slow");
    } else {
        $('.navbar ').fadeOut("slow");
    }
    lastPositionScrollTop = position;
});

 

2. Demo

Acá podrás visualizar el DEMO para ocultar header de la pagina con scroll down.

3. Código Fuente

 

Git Logo

Código en GitHub

Tic-Tac-Toe usando AngularJS

Etiquetas: , Blog, Web No comments

Estoy seguro que todos alguna vez en la vida llegamos a jugar este famoso Tic-Tac-Toe o Triqui, sobre un pedazo de papel mientras estábamos en el colegio o aburridos. Bien, aprovechando mi self-study que estoy haciendo con Angular decidí aprender jugando 😛 , así que acá traigo el juego de Tic-Tac-Toe usando AngularJS.

1. Introducción

Según la definición de Wikipedia este juego se define como :

Es unjuego de lápiz y papel entre dos jugadores: O y X, que marcan los espacios de un tablero de 3×3 alternadamente. Un jugador gana si consigue tener una línea de tres de sus símbolos: la línea puede ser horizontal, vertical o diagonal.

2. Estructura de archivos

La estructura de archivos de elaboró de la siguiente manera :

Estructura de archivos

Estructura de archivos

 

  • index.html => Archivo principal
  • css => Estilos y Bootstrap
  • js => Lógica del juego en JavaScript y angular, librerias de angularJS, jQuery y bootstrap.
  • fonts => Fuentes para manejar estilos más interesantes.
  • img => Para almacenar imagenes en caso de que se quiera tener una interfaz más agradable.

 

3. Creando el tablero

Para crear el tablero, decidí utilizar la directiva de angularJS ng-repeat la cuál nos permite iterar los elementos de una lista o arreglo de datos. Adicionalmente sobre los botones, es necesario utilizar la directiva ng-click y ng-disabled, para generar el evento cuando se pulsa click y bloquear el botón cuando ya ha hecho un movimiento.

 

4. Creando el Objeto de juego

Para manejar la lógica en el juego, decidí utilizar un objeto en JavaScript con expresiones anonimas (Funciones) que me permitieran conocer estados y validaciones del objeto en cuestión. El objeto TicTacToe, es la representación de una clase en JavaScript con sus atributos y métodos. 😀

 

var TicTacToe = function(){
        this.title = "Tic Tac Toe";
        this.activePlayer = null;
        this.winner = null;
        this.draw = true;
        this.movements = null;
        this.players=[
            {name: "Player 1", symbol:"X", movements : []},
            {name: "Player 2", symbol:"O", movements : []}
        ];
        this.solutions = [
            [1,2,3],   [4,5,6],   [7,8,9], // Horizontals
            [1,4,7],   [2,5,8],   [3,6,9], // Verticals
            [1,5,9],   [7,5,3]    // Diagonals
        ];
        this.board ={
            rows:[
                [
                    {id: 1, value: "", isChecked:false},
                    {id: 2, value: "", isChecked:false},
                    {id: 3, value: "", isChecked:false}
                ],
                [
                    {id: 4, value: "", isChecked:false},
                    {id: 5, value: "", isChecked:false},
                    {id: 6, value: "", isChecked:false}
                ],
                [
                    {id: 7, value: "", isChecked:false },
                    {id: 8, value: "", isChecked:false},
                    {id: 9, value: "", isChecked:false}
                ]
            ]
        };
        this.fillBox = function(id){
            for(var i = 0; i < this.board.rows.length; i++){
                for(var k = 0; k < this.board.rows[i].length; k++){
                    if(this.board.rows[i][k].id == id){
                        if(this.activePlayer == null){
                            this.activePlayer = this.players[0];
                        }else{
                            if(this.activePlayer.name == this.players[0].name){
                                this.players[0].movements.push(id);
                                this.verifyGame(this.players[0]);
                                this.activePlayer = this.players[1];
                            }else{
                                this.players[1].movements.push(id);
                                this.verifyGame(this.players[1]);
                                this.activePlayer = this.players[0];
                            }
                        }
                        this.board.rows[i][k].value = this.activePlayer.symbol;
                        this.board.rows[i][k].isChecked = true;
                    }
                }
            }
        };
        this.verifyGame =function(player){
            var totalMovements = (this.players[0].movements.length + this.players[1].movements.length);
            if(totalMovements == this.board.rows.length * this.board.rows[0].length){
                this.draw = false;
            }else{
                for(var i = 0; i < this.solutions.length; i++){
                    var isSolution = true;
                    for(var k = 0; k < this.solutions[i].length; k++){
                        isSolution &= (player.movements.indexOf(this.solutions[i][k]) != -1);
                    }
                    if(isSolution){
                        this.winner = player.name;
                        this.movements = player.movements.length;
                        this.highLightSolution(this.solutions[i]);
                    }
                }
            }
        };
        this.highLightSolution = function(solution){
            for(var i = 0; i < solution.length; i++){
                var button = $("button")[solution[i] - 1];
                $(button).addClass("solution-check");
            }
        }
    };

 

De esta manera, cada vez que se necesario iniciar un nuevo juego o crear una instancia desde nuestro código en angularJS, simplemente nos limitamos a escribir algo como esto.

 

var app = angular.module('ticTacToe', []);
    app.controller('GameController', function(){
        this.game = new TicTacToe();
        this.game.activePlayer = this.game.players[0];
        this.newGame = function(){
            this.game = new TicTacToe();
            this.game.activePlayer = this.game.players[0];
        }
    });

5. Verificando cuando un jugador gana o empata el juego

Para determinar cuando un jugador gana o empata el juego, se hace a partir de la cantidad de movimientos jugados y las posibles soluciones para el juego. Es por eso que he creado un arreglo de soluciones y he contado la cantidad de movimientos para verificar dichas situaciones.

this.solutions = [
            [1,2,3],   [4,5,6],   [7,8,9], // Horizontals
            [1,4,7],   [2,5,8],   [3,6,9], // Verticals
            [1,5,9],   [7,5,3]    // Diagonals
        ];

this.verifyGame =function(player){
            var totalMovements = (this.players[0].movements.length + this.players[1].movements.length);
            if(totalMovements == this.board.rows.length * this.board.rows[0].length){
                this.draw = false;
            }else{
                for(var i = 0; i < this.solutions.length; i++){
                    var isSolution = true;
                    for(var k = 0; k < this.solutions[i].length; k++){
                        isSolution &= (player.movements.indexOf(this.solutions[i][k]) != -1);
                    }
                    if(isSolution){
                        this.winner = player.name;
                        this.movements = player.movements.length;
                        this.highLightSolution(this.solutions[i]);
                    }
                }
            }
        };

 

6. Resaltando la solución

Para resaltar la solución, simplemente utilicé una clase en css y una busqueda de los botones con jQuery, identificando que posiciones pertenecian a la posición correspondiente del tablero inicial.

.solution-check{
    background-color: #c1e2b3;
}

 

this.highLightSolution = function(solution){
            for(var i = 0; i < solution.length; i++){
                var button = $("button")[solution[i] - 1];
                $(button).addClass("solution-check");
            }
        }

7. Resultado

Acá se muestran algunas  imágenes del resultado final 😀 .

Winner Tic Tac Toe Game

Winner Tic Tac Toe Game

Draw Tic Tac Toe Game

Draw Tic Tac Toe Game

Tic Tac Toe Game

Tic Tac Toe Game

 

Jugar Tic Tac Toe (Demo)

8. Código fuente

Git Logo

Git Logo

EaselJS Framework para juegos en HTML5 – Hola Mundo

Etiquetas: Blog, Web No comments

Segun las estadisticas una de las mejores formas de aprender “es jugando”, y que mejor que poder hacer tus propios juegos a tu imagen y semejanza :). Bien, en esta ocasión decidi conocer un poco sobre este mundo de los juegos creados en HTML + JavaScript y CSS. De acuerdo a las lecturas realizada en foros, búsquedas en Google y recomendaciones en algunos blog, opte por utilizar el FrameWork Easel JS.

 Una libreria en Javascript para trabajar facilmente con el canvas de HTML5, manejo de graficos, creacion de juegos y otras hierbas….

Características de Easel JS

  • Contenido rico en HTML5
  •  Manejo de objectos canvas
  •  Anidación de objetos
  •  Modelo de interacción con el mouse
  •  Enfoque / Sintaxis familiar para los desarrolladores

En la página principal de Easel JS existen algunos demos de las grandes cosas que puede hacer esta libreria =).

Documentación de Easel JS
Descarga de Easel JS

Hola mundo con Easel

Bien, he aquí el ejemplo más sencillo con el cual comienzo el manejo de Easel JS. El ejemplo muestra cosas como :

  • Instancia a las librerias de Easel
  • Creación del tablero del juego
  • Utilización del objeto Text
  • Adición de objetos al canvas
  • Actualización del tablero

Ver Hola Mundo con EaselJS
Ver Código Fuente HTML