sábado, 12 de noviembre de 2016

Definiciones de Terminos Tecnológicos

En esta entrada vamos a dar una guia o definición de algunos términos tecnológicos que nos encontramos por ahí y que a veces no nos es claro de que se trata.
  • GIT
Git es un sistema de control de versiones que registra los cambios realizados sobre un archivo o conjunto de archivos a lo largo del tiempo, de modo que puedas recuperar versiones específicas más adelante. A pesar de que los ejemplos de este libro muestran código fuente como archivos bajo control de versiones, en realidad cualquier tipo de archivo que encuentres en un ordenador puede ponerse bajo control de versiones. Si eres diseñador gráfico o web, y quieres mantener cada versión de una imagen o diseño (algo que sin duda quieres), un sistema de control de versiones (Version Control System o VCS en inglés) es una elección muy sabia. Te permite revertir archivos a un estado anterior, revertir el proyecto entero a un estado anterior, comparar cambios a lo largo del tiempo, ver quién modificó por última vez algo que puede estar causando un problema, quién introdujo un error y cuándo, y mucho más. Usar un VCS también significa generalmente que si fastidias o pierdes archivos, puedes recuperarlos fácilmente. Además, obtienes todos estos beneficios a un coste muy bajo.   Tutorial
  • MONGODB
"MongoDB es un sistema de base de datos multiplataforma orientado a documentos, de esquema libre. Como ya os expliqué, esto significa que cada entrada o registro puede tener un esquema de datos diferente, con atributos o “columnas” que no tienen por qué repetirse de un registro a otro. Está escrito en C++, lo que le confiere cierta cercanía al bare metal, o recursos de hardware de la máquina, de modo que es bastante rápido a la hora de ejecutar sus tareas. Además, está licenciado como GNU AGPL 3.0, de modo que se trata de un software de licencia libre. Funciona en sistemas operativos Windows, Linux, OS X y Solaris.

Las características que más destacaría de MongoDB son su velocidad y su rico pero sencillo sistema de consulta de los contenidos de la base de datos. Se podría decir que alcanza un balance perfecto entre rendimiento y funcionalidad, incorporando muchos de los tipos de consulta que utilizaríamos en nuestro sistema relacional preferido, pero sin sacrificar en rendimiento.

Si queremos usar nuestro lenguaje de programación favorito, existen drivers para un gran número de ellos. Hay drivers oficiales para C#, Java, Node.js, PHP, Python, Ruby, C, C++, Perl o Scala. Aunque estos drivers están soportados por MongoDB, no todos están en el mismo estado de madurez. Por ejemplo el de C es una versión alpha. Si queremos utilizar un lenguaje concreto, es mejor revisar los drivers disponibles para comprobar si son adecuados para un entorno de producción."     fuente

Instalación y configuracion de MongoDB
  
  • SISTEMAS CRUD
"En computación CRUD es el acrónimo de Crear, Leer, Actualizar y Borrar (del original en inglés: Create, Read, Update and Delete). Se usa para referirse a las funciones básicas en bases de datos o la capa de persistencia en un software."       fuente

"CRUD se usa como un Backend o panel de administración que te permite realizar las operaciones básicas. No se si alguna vez has usado phpmyadmin, pues algo parecido.

El tema ORM, para que lo entiendas, es una manera de trabajar con tu base de datos pero usando código orientado a objetos. Es decir, imagínate que quieres obtener de una tabla usuarios, aquel cuyo id es el 78. En sql tradicional, tendrías que hacer en tu código:

$sql = 'SELECT name FROM users WHERE id = 78';
mysql_query ... etc

en cambio, con un ORM, simplemente podrías hacer:

$user = new User(78);
echo $user->getName();

Es un ejemplo para que te hagas una idea, como ves, el ORM te ha creado a través de tu base de datos, unos objetos que representan tus tablas, para poder trabajar con ellos de manera cómoda y a otro nivel."    fuente

miércoles, 6 de julio de 2016

Controlar Evento Cambio de Focus en Fechas

Para controlar el cambio de foco en fechas se hace lo siguiente:
Creamos una bandera para saber si se presiono la tecla tabuladora o la tecla shift, tambien nos servira para cuando el control de la fecha pierda el foco.
bool banderaFrom = false;

Activamos el evento KeyDown del control.
void dateFrom_KeyDown(object sender, ystem.Windows.Forms.KeyEventArgs e) {
  if (e.KeyCode != Keys.Tab && e.KeyCode != Keys.ShiftKey) {
        banderaFrom = true;
        dateFrom.EditValueChanged -= dateFrom_EditValueChanged;
  }
  else if (banderaFrom) {
        banderaFrom = false;
        dateFrom_EditValueChanged(sender, new EventArgs());
        dateFrom.EditValueChanged += dateFrom_EditValueChanged;
  }
 }
Creamos el metodo LostFocus ya que este no se encuentra en el control:
void dateFrom_LostFocus(object sender, System.EventArgs e) {
   BaseRuntime.Trace("hcecli", "histórico", "dateFrom_LostFocus");

  if (banderaFrom) {
       banderaFrom = false;
       dateFrom_EditValueChanged(sender, new EventArgs());
       dateFrom.EditValueChanged += dateFrom_EditValueChanged;
  }
}
Pegamos al control en la parte del Designer el evento de la siguiente forma:
this.dateFrom.LostFocus += new System.EventHandler(this.dateFrom_LostFocus);

Errores en HCECLI

Estos son los errores presentados en HCECLI:


1.


Solución: Estos son errores relacionados con el WorkFlow (en nuestro caso el de NOTASI). Lo mas ideal es dirigirse al Trace y observar en que parte del flujo de trabajo revento.

2.



Solución: Lo mas seguro es que la consulta a la base de datos se esta realizando en un hilo diferente al principal del programa. Se debe buscar el hilo o método donde se esta realizando la consulta, y llamar al método CultureConfig.SetRegionalConfiguration(). Esto asegura que al traer los datos de la tabla, tengan el formato correcto y no provoque un crashOverrider del programa.

3.



Solución: El datareader se utiliza dentro de un using(), asi como en la imagen siguiente:

4.



Solución: Cuando son errores de asignación de tipos de datos en los queries de informix, debemos setear la configuración regional en el hilo donde se esta realizando la lógica, pues lo más seguro es que se perdió la configuración regional por alguna razón.

Creación ToolTip

private void authorizedtoolTipController_GetActiveObjectInfo(object sender, ToolTipControllerGetActiveObjectInfoEventArgs e) 
{
GridHitInfo hi =      normalView.CalcHitInfo(normalView.GridControl.PointToClient(Control.MousePosition));
 ToolTipControlInfo info = null;

 if (hi != null && hi.RowHandle >= 0) 
 {
   string str = e.SelectedControl.ToString();
   object o = hi.HitTest.ToString() + hi.RowHandle.ToString();
   if (hi.InRowCell) 
   {
     string text = String.Empty;
     if (hi.Column == colAuthorizedState) 
     {
       var colValue = normalView.GetRowCellValue(hi.RowHandle, colAuthorizedState);
       switch (colValue.ToStringValue()) 
       {
         case "AP":
           if (dtimage != null) {
           text = (from item in dtimage.AsEnumerable()
           where item.Field("indimaind") == "ACAU"
           select item.Field("ctedetdes")).SingleOrDefault();
           }
           break;
         case "PE":
           if (dtimage != null) 
           {
             text = (from item in dtimage.AsEnumerable()
             where item.Field("indimaind") == "PEAU"
             select item.Field("ctedetdes")).SingleOrDefault();
           }
           break;
         case "NO":
           if (dtimage != null) 
           {
            text = (from item in dtimage.AsEnumerable()
            where item.Field("indimaind") == "NOAU"
            select item.Field("ctedetdes")).SingleOrDefault();
           }
           break;
         default:
           break;
       }
    }
    if (hi.Column == colObservation) 
    {
    text = normalView.GetRowCellValue(hi.RowHandle, colObservation).ToStringValue();
    }
    info = new ToolTipControlInfo(o, text);
   }
 }
   if (info != null)
      e.Info = info;
}

jueves, 9 de junio de 2016

QuerySets con Python3

Los pasos para llegar a la consola donde vamos a ejecutar los querysets son los siguientes:
  1. Activar el entorno virtual: source appsEnv/bin/activate
  2. Llamar a la shell de python: python3.4 manage.py shell
  3. importar los modelos que queremos trabajar: from appejemplo.models import *
Ya con esto estaremos listos a ejecutar las sentencias que nos traeran la información solicitada.

  • Para consultar todos los registros de un modelo: >>> Post.objects.all()
  • Consultar un registro filtrandolo por una propiedad: me = User.objects.get(username='pepito')
  •  Consultar todos los registros que concuerden con una condición, la cual puede devolver uno o muchos registros: Post.objects.filter(author='pepito')
  •  Filtrar todos los registros que contengan una palabra: >>>Post.objects.filter(title__contains='Millonario')

 FECHAS

Ahora vamos a realizar operaciones con fechas.
  • Consultar todos los registros que tienen un campo tipo fecha en el pasado:
    • >>> from django.utils import timezone
    • >>> Post.objects.filter(published_date__lte=timezone.now())
la parte de lte= significa <= y la parte de gte= significa >=
  • Pare realizar varios filtros al mismo tiempo:
    • >>> list_movements = MovMotionAccount.objects.filter(motionAccountDate__lte='2016-04-30 23:59:59').filter(motionAccountDate__gte='2016-04-01 00:00:00')
  •  
 ORDENACIÓN
Ahora vamos a realizar consultas ordenando la información. 
  • Consultamos la información y ordenamos por un campo tipo fecha:
    • >>> Post.objects.order_by('created_date')
  • Invirtiendo el ordenamiento:
    • >>> Post.objects.order_by('-created_date')

domingo, 10 de abril de 2016

HTML5, CSS3 y JavaScript

HTML5
Estos son algunos apuntes sobre HTML5:
Los elementos  estructurales de HTML5 son los siguientes:
<header></header> : Encabezado de la pagina
<nav></nav>: Menu de navegación
<aside></aside>: Contenido que esta sutilmente relacionado con el contenido alrededor
<section>: Agrupar diferentes articulos por tema.
    <article></article> : Noticias individuales
</section>
<footer></footer>: Contiene el pie de página


<br/> : Da un espacio.
<em>: La letra se ve en cursiva.
<strong>: Letra en negrilla.
<p>: Es un elemento de bloque, osea varios <p> van uno debajo del otro.

ENLACES <a>
  • Para generar un enlace a la misma página:
le ponemos id al elemento al cual queremos enlazar, por ejemplo:
<p id="link_prueba">esto es una prueba</p>
y al enlace lo marcamos de la siguiente forma:
<a href="#link_prueba">Ir al parrafo marcado</a>

  • Para generar un enlace tipo correo:
<a href="mailto:micorreo@servidor.com">micorreo@servidor.com</a>

  • Para generar un enlace tipo descarga:
 <a href="http://bit.ly/1U0eYn0" download>Descargar Imagen</a>

FORMULARIOS
Permite capturar datos de nuestros usuarios para interactuar en nuestro sitio.
  • Formulario normal:
<form action="login.php" method="post">
<fieldset>
   <legend>Información</legend>
  <p>
     <label>
     Descripcion:
     <input type="text" />
  </label>
  </p>
  <p>
    <label>
       <input type="text" />
    </label>
  </p>
</fieldset>
</form>

  • Formulario login:
<form action="login.php" method="post">
<fieldset>
   <legend>Ingreso</legend>
     <label>
     Correo:
     <input type="email" name="email" placeholder="ejemplo@servidor.com" autofocus maxlength="100" required />
  </label>
    <label>
       Clave:
       <input type="password" name="pass" placeholder="password" />
    </label>
    <input type="submit" value="Enviar" />
</fieldset>
</form>

  •  Formulario de busqueda
 Un formulario de busqueda tiene la siguiente estructura:
 
<form action="search.php" method="get">
<fieldset>
    <input type="search" name="search"
    <input type="image" src="https://devcode.la/static/imagen.png">  </fieldset>
</form>

  •  Formulario Slambook
 Un formulario slambook es un fomulario de preguntas, ejemplo Aquí

CSS3

Estos son algunos apuntes sobre CSS3:

SELECTORES
Para aplicarle un estilo a algun elmento de nuestro documento html, utilizamos en css las diferentes formas:
  • Selector universal (*): Esto aplica el estilo a todos los elementos del documento, por ejemplo : * { margin: 0px; }
  • Selector elemento: Se aplica el estilo al elemento que estamos referenciando, por ejemplo: p { color: blue; }
  • Selector Id: Aplica el estilo al elemento que este identificado con el id, por ejemplo:  <article id="mensaje"></article>, el archivo css tendremos lo siguiente: #mensaje { color: grey; }
  • Selector de clase: Aplica el estilo al elmento con el nombre de clase, por ejemplo: <h3 class="miclase"></h3>, y en el archivo css tendremos lo siguiente: .miclase { color: blue; }
PSEUDO CLASES
Las tres propiedades de las pseudo clases son: :hover, :active, :focus, first-child, last-child
Por ejemplo:
input:hover { color: yellow; }
input:active { color: blue; }
input:focus { color: violet; }
li:first-child { background: yellow; }
li:last-child { background: violet; }
li:nth-child(2n) { background: blue; }
li:nth-child(3n) { background: green; }

COLORES
Los colores se definen por la regla sRGB y se pueden definir de diferentes maneras:
  • Keywords: Son las que se definen mediante palabras, tales como blue, white, black, etc. por ejemplo: p { color: blue; }
  • Notación hexadecimal: Es una anotación en valor hexadecimal iniciando con la #. por ejemplo: p { color: #fe1; }
  • RGB y RGBA: Utilizamos el formato de tres números para seleccionar el color. Por ejemplo: 
    • formato RGB -> p { color: rgb(255,155,200); }
    • Con la clase rgba son de cuatro números, el último indica la opacidad del color. Por ejemplo: p { color: rgba(255,230,90,.5); }
  • HSL y HSLa: 
    • HSL -> Hue(matiz), Saturation(saturación) y Lightness(brillo). Por ejemplo: p { color: hsl(0,100%,50%); }
    • HSLa -> Por ejemplo: p { color: hsla(240,100%,50%,.4); }

UNIDADES DE LONGITUD
Entre las unidades de  longitud absolutas estan:
  • centrimetro (cm)
  • milimetro (mm)
  • pulgada(in)
  • pixel(px)
  • punto(pt)
  • pica(pc)
Las unidades de longitud relativas estan relacionados con el tamaño de la fuente:
  • em
  • rem
  • ex
  • ch
DISPLAY


Esta es una propiedad de como se van a mostrar los elementos en la página, entre los cuales estan:
  • Inline: Los elementos se ubican al lado del otro, pero no tienen en cuenta ancho ni alto de los elementos. Por ejemplo: div { width: 200px; height: 100px; display: inline; }
  • Inline-block: Los elementos se muestran uno seguido del otro, tomando en cuenta las características de los elementos, por ejemplo: div { width: 200px; height: 100px; display: inline-block; }
  • None: No muestra los elementos en el navegados. div { width: 200px; height: 100px; display: none; }
  •  Flex: Organiza los elementos hijos horizontalmente, y para que no se salgan del recuadro podemos utilizar la propiedad flex-wrap: wrap. Finalmente para centrarlos utilizamos la propiedad justify-content: center. .parent {  display: flex; flex-wrap: wrap; justify-content: center; }
POSICIONAMIENTO

La propiedad position puede aceptar algunos valores en CSS y cada uno tiene su propia aplicación.
  • Static: Se ubica en la posición por defecto y las demas propiedades como top, right, botton, left no tiene efecto sobre el posicionamiento. Por ejemplo: div { position: static; }
  • Relative: Las propiedades anteriores si son tomadas en cuenta (top,right,left,botton). Por ejemplo: .miposicion { position: relative; top: 40px; left: 30px; top: 20px; bottom: 10px; }
  • Absolute: Pone el elemento en la posición absoluta que le asignemos con las propiedades. Por ejemplo: .miparrafo { position: absolute; top: 10px; left: 10px; }
  • Fixed: El valor “fixed” el cual posee un comportamiento similar al valor “absolute”, solo que acomoda el elemento con respecto a la ventana y no con respecto a su contenedor. Por ejemplo: .miposicion { position: fixed; bottom: 0px;  right: 0px; }. Esto hace que el elemento se posicione en la parte inferior derecha de la ventana y no del elemento contenedor.
  • Float: Hace que los elementos se remuevan del flujo normal de la pagina y se posiciones al lado derecho o izquierdo de los elementos que queramos. Por ejemplo: aside { float: right; width: 40%; background: blue; }. Cuando un elemento no quiere ser ubicado a ningún lado le asignamos la propiedad  clear: both;

LISTAS
Las listas tienen varios tipos:
  • Listas descriptivas: Palabra con su respectiva descripción, por ejemplo:
    • <ld><dt>Python</dt><dd>Descripción del lenguaje python</dd></dl>

MULTIMEDIA
Tenemos varios elementos de multimedia que nos permite agregar a nuestro sitio:
  • Imagen (img): Muestra imagenes. Por ejemplo: <img src="rutaimagen" alt="descripcion de la imagen"/>
  • Audio (audio): Reproduce audio. Por ejemplo: <audio src="rutaaudio/audio.mp3" controls preload="metadata"/>
  • Video (video): Reproduce video. Por ejemplo: <video width="100%" height="auto" controls autoplay><source src="rutavideo" type="video/mp4"></source></video>
  • Figure: Podemos agregar cualquier tipo de elemento como parte independiente pero en el mismo flujo del documento. Por ejemplo:
    • <figure><figcaption>Descripción de la imagen</figcaption><img src="fuenteimagen" alt="Descripción de la imagen" /></figure>
    • en el css: figure { border: 2px solid #bbb; padding: 5px; } img { width: 100%; }

PROPIEDADES GENERALES
  • border-radius: 20px 15px 30px 20px;  -> Esquinas redondeadas
  • box-shadow: rgb(150,150,150) 5px 5px 10px; -> Da un efecto de sombreado a una caja de texto.
  • text-shadow: rgb(0,0,150) 3px 3px 5px; -> Lo mismo que la anterior pero para texto. 
  • linear-gradient(posicion inicio, color inicial, color final) -> para darle el efecto de degradado al elemento.
  • radial-gradient(center,circle,#ffff 15%, #006699 200%) -> lo mismo que el anterior
  • rgba() -> aplica opacidad a un elemento, por ejemplo:
    • text-shadow: rgba(150,150,150,0.5) 3px 3px 5px;
  • hsla() -> lo mismo que la anterior, hsla(tono,saturación,luminosidad,opacidad), por ejemplo: 
    • color: hsla(220,40%,60%, 0.5);
  • Outline: Agregamos a un elemento una segunda caja con el borde que deseamos y con características propias. Por ejemplo:
    • outline: 2px dashed #000099;
    • outline-offset: 15px; 
  • border-image: Permite implementar un borde con imagen. Por ejemplo:
    • border: 29px;
    • -moz-border-image: url("image.png") 20 stretch;
    • -webkit-border-image: url("image.png") 20 stretch;
    • border-image: url("image.png") 29 stretch;




BOOTSTRAP


En el diagrama, observa lo siguiente:
  1. Las columnas de la cuadricula de Bootstrap estan representadas por 12 barras verticales. Los cajones representan elementos HTML.

  2. Las palabras "container", "jumbotron", "col-sm-6" and "col-sm-3" se refieren a las clases de Bootstrap.

  3. Los elementos con clase "jumbotron" se extiende por todo el ancho de la página web, más allá de las fronteras del Grid.

  4. Los elementos dentro del segundo "container", tales como "col-sm-6" and "col-sm-3" estan contenidos dentro de las columnas de la cuadricula.

  5. Los elementos con la etiqueta "col-sm-3" toman tres columnas del grid; Los elementos con las etiquetas "col-sm-6" toman 6 columnas del grid.

JAVASCRIPT

Estos son algunos apuntes sobre JavaScript:




Fuentes:




domingo, 3 de abril de 2016

Comandos de ayudas en GNU/Linux

Estos pueden ser unos comandos de ayuda, para cuando utilizamos GNU/Linux:
  • Para copiar un archivo o directorio de nuestro equipo local a un servidor remoto por medio de scp:
    • scp -r /home/usuario/carpeta usuario@dominio.com:/home/usuario
  •  

Instalar Django 1.9 con Debian, Ngnix, Postgresql y Gunicorn

Vamos a instalar Django en Debian, para esto seguiremos los siguientes pasos:

  •  Ejecutamos la siguiente sentencia:
    • apt-get install python3-pip python3-dev virtualenv nginx postgresql postgresql-contrib-9.4 libpq-dev sudo gcc
  • La base de datos postgresql la configuramos como normalmente lo hacemos.
  • Creamos el directorio para los archivos estaticos:
    • mkdir -p /opt/project/static
  • Ejecutamos el comando que migrara los archivos estaticos a la carpeta:
    • python3.4 manage.py collectstatic
  • Configuramos Gunicorn
  • Configuramos Nginx
  • Creamos el archivo myapp.service con la siguiente información:
    • server {
              listen 80 default_server;
              listen [::]:80 default_server;
              server_name host_name;
              access_log off;
              root /opt/project/myapp;

              location /static {
                      root /opt/project/myapp;
                      access_log      off;
                      expires         30d;
              }

              location / {
                      proxy_pass http://127.0.0.1:8000;
                      proxy_set_header Host $host;
                      proxy_set_header X-Real-IP $remote_addr;
                      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              }
              access_log      /opt/project/logs/myapp_gunicorn.log combined;
              error_log       /opt/project/logs/myapp.error.log      warn;
      }

Fuentes:
vultr
digitalocean

sábado, 2 de abril de 2016

Saber si un paquete esta instalador en GNU/Linux

Para saber si un paquete se encuentra disponible en los repositorios, abrí un terminal y escribí:
  • Arch Linux: pacman -Ss paquete
  • Fedora: yum search paquete
  • Debian/Ubuntu: apt-cache search paquete
  • OpenSUSE: zypper se paquete
  • Gentoo: emerge -S paquete
Para saber si un paquete se encuentra instalado en nuestra máquina:
  • Arch Linux: pacman -Qs paquete
  • Fedora: rpm -qa | grep paquete
  • Debian/Ubuntu: dpkg -l | grep paquete
  • OpenSUSE: zypper se -i paquete
  • Gentoo: emerge -pv paquete

Fuente: DesdeLinux