INFORMÁTICA Y TECNOLOGÍA

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:

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.

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:

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:

Activar el entorno virtual: source appsEnv/bin/activate
Llamar a la shell de python: python3.4 manage.py shell
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:

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:

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:

Las columnas de la cuadricula de Bootstrap estan representadas por 12 barras verticales. Los cajones representan elementos HTML.
Las palabras "container", "jumbotron", "col-sm-6" and "col-sm-3" se refieren a las clases de Bootstrap.
Los elementos con clase "jumbotron" se extiende por todo el ancho de la página web, más allá de las fronteras del Grid.
Los elementos dentro del segundo "container", tales como "col-sm-6" and "col-sm-3" estan contenidos dentro de las columnas de la cuadricula.
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:

Codecademy

Páginas