lunes, 22 de febrero de 2016

Utilizando el comando netstat en Linux

netstat muestra el status y la información de las conexiones de red de varios tipos y ver que puertos TCP y UDP esta escuchando la computadora, utilizar el comando netstat con las opciones -lut.

      $netstat -lut
    
Fig 1 netstat con la opción -lut.


Ahora si se quiere ver rápidamente el status de las interfaces:

      $netstat -i 
    
Fig 2 netstat con la opción -i.


Aquí pongo la tabla que describe el significado de cada columna:

Columna Significado
Iface Nombre de la interface
MTU Maximum Transfer Unit – El máximo número de bytes que un paquete puede contener
RX-OK, TX-OK Número de paquetes libres de errores: recibidos (RX) o transmitidos (TX).
RX-ERR, TX-ERR Número de paquetes del errores
RX-DRP, TX-DRP Número de paquetes descartados
RX-OVR,TX-OVR Número de paquetes perdidos debidos a un overflow.
FLG A = multicast recibido, B = broadcast permitido, D= depuración encendida, L = loopback interface (notice the flag en lo), M = todos los paquetes recibidos, N= tramas evitadas, 0 = no ARP en esta interface, P = punto a punto interface, R = interfaz esta corriendo, U = interfaz está arriba.

Otra forma muy útil para revisar que de donde vienen las conexiones es:

      $ netstat -tupn
    
Fig 3 La salida de netstat con la opción -tupn.


Aquí una lista de cada uno de los párametros más comunes en el uso de netstat
-t --tcp Muestra las conexiones socket TCP
-u --udp Muestra las conexiones socket UDP
-p --program Muestra el PID y el nombre de los programas al que los sockets pertenecen
-n --numeric Muestra la dirección IP numérica en vez de determinar el host y el puerto.

jueves, 4 de febrero de 2016

Entiendo Angular: Un primer acercamiento

AngularJS es un framework open source escrito en JavaScript que sirve para implantar el patrón MVC del lado del cliente, lo que permite que puedan contruirse aplicaciones Web del tipo AJAX, por su poder expresivo se utiliza en la mayoría de proyectos SPA (Single Page Application).

Qué es SPA?

SPA (Single page Application) es una aplicación en la cual se tiene una página principal como contenedor y varias vistas contenidas dentro este contenedor que pueden refrescarse independientemente de la página principal evitando así hacer una petición de toda la página completa, lo que ayuda a hacer eficiente el ancho de banda sobretodo en aplicaciones móviles.

Las ventajas de Angular son:

  • Proporciona la capacidad de crear SPA de una manera clara y mantenible
  • Le proporciona una capacidad de data binding al HTML, lo que proporciona una experiencia responsiva al usuario.
  • El código hecho con Angular se puede probar mediante pruebas unitarias (Unit Testing)
  • Utiliza la inyección de dependencias para la separación de responsabilidades.
  • Proporciona componentes reutilizables ya que las vistas son páginas HTML y la lógica de procesamiento se lleva a cabo por los controllers (controladores) escritos en JavaScript.
  • Angular es compatible entre la mayoría de las plataformas (Android, IOS) y navegadores.
  • Puede combinarse con otras bibliotecas para JavaScript por ejemplo: Kendo UI y Jquery.

Hay dos conceptos básicos para empezar con Angular, uno es el $scope y el otro es la utilización de directives (directivas), para ejemplificar su uso, mostraré una página que despliega un lista de filósofos de cada país la cual es posible filtrar al escribir el nombre en un control INPUT.

¿Qué es el scope?

Una buena separación de aspectos no permite que la lógica de negocio se mezcle con la vista, así que todo el procesamiento se realiza mediante el controlador el cuál es el que enlaza los datos hacia la vista. Una parte integral para trabajar con angular es el llamado scope que en realidad es un alias para el ViewModel es decir el componente que permite que se comuniquen la vista y el controlador.

Aquí el código fuente del archivo MenuAngular.js el cuál contiene el JSON y la declaración del controller.


Aquí el código fuente de la página HTML:

¿Qué son las directives?

Son atributos HTML que llaman funciones pertenecientes al framework para extender de manera dinámica la funcionalidad del elemento HTML al cual pertenecen, esta es la manera básica de crear elementos HTML específicos para la aplicación, encapsular estructuras DOM complejas o manipular las hojas de estilo.

A continuación una breve descripción de las directivas que se utilizaron en el ejemplo:

  • ng-app: Esta directiva sirve para incluir e iniciar AngularJS y que se pueda utilizar en un página HTML. Generalmente esta directiva va en la etiqueta BODY o en HTML.
              <!doctype html>
    <html ng-app="App">
            
  • ng-controller: Esta directiva indica que controlador se va a utilizar en esa página o vista. Angular nos permite tener múltiples instancias de el mismo controlador en la aplicación, permitiéndonos reutilizar un montón de código.
        <body ng-controller="SimpleCtrl">      
            
  • ng-repeat: Con esta directiva se puede enumerar o iterar en una lista de objetos similar a recorrer un de un arreglo con la instrucción foreach de algunos lenguajes de programación. Adicionalmente a esta directiva le agrego la directiva filter:Name la cuál establece el filtro de búsqueda dentro del arreglo, en este caso el filtro es el valor de la variable enlazada con ng-model.
              <ul>
                        <li ng-repeat="menu in menus">{{menu.Name}}
                        <ul ng-repeat="submenu in menu.Children | filter:Name">
                            <li>{{ submenu.Name }}</li>
                        </ul>
                        </li>
                    </ul>
            
  • ng-model: Esta directiva sirva para enlazar el valor de una variable a un control HTML, generalmente se utiliza con los controles INPUT.
              <td><label for="inputSearch" class="control-label">Search:</label></td>
                    <td><input type="text" id="inputSearch" class="field-value" ng-model="Name"/></td>
            

Las siguientes imágenes muestran la página en su ejecución.
Fig 1 La página HTML en ejecución.


Fig 2 Ejemplo de una búsqueda con una coincidencia.


Fig 3 Una búsqueda con dos coincidencias.


Descargar el código fuente del ejemplo (Download the source code)