viernes, 28 de junio de 2013

Dibujando con canvas

Esta vez les dejo un lienzo para que dibujen libremente
y después guarden su obra de arte.

martes, 15 de enero de 2013

Juego de Colores HTML


Los códigos que se emplean para la gama de colores html se forma por un grupo de 6 dígitos desde 0 a 9 y de A a F, Donde 0 es el más "claro" y F el más "Intenso"

los 6 dígitos son en realidad tres pares de ellos donde:
El primer par representa la intensidad del Rojo
el segundo par la intensidad del Verde
y el tercer par la intensidad del Azul

y de la combinación de estos resulta toda la gama de colores posibles con estos códigos.

si los tres grupos se ponen el mismo valor entre 0 y F obtenemos una tonalidad de Gris en su respectiva intensidad.
  • #F0F0F0
  • #F3F3F3
  • #AFAFAF
  • #DEDEDE
  • #454545
  • #CDCDCD
si dejamos el primer par en FF y cambiamos los otros dos pares obtenemos las diversas tonalidades de Rojo puro.
  • #FFF0F0
  • #FFF3F3
  • #FFAFAF
  • #FFDEDE
  • #FF4545
  • #FFCDCD
si dejamos el segundo par en FF y cambiamos los otros dos pares obtenemos las diversas variedades de Verde claro.
  • #F0FFF0
  • #F3FFF3
  • #AFFFAF
  • #DEFFDE
  • #45FF45
  • #CDFFCD
pasa lo mismo con dejar el tercer par en FF pero este aplicado al Tono Azul
  • #F0F0FF
  • #F3F3FF
  • #AFAFFF
  • #DEDEFF
  • #4545FF
  • #CDCDFF
Visita ésta pagina con herramientas para hacer combinaciones y buscar códigos a tu gusto, para facilitarte la tarea a la hora de requerirlo.


miércoles, 21 de noviembre de 2012

SELECT maximos y minimos en un mismo registro

En mi caso tengo una tabla con 9 registros con un campo id unico e incremental
y requiero obtener la clasificación inferior y superior en un mismo registro, que se ingresaron de manera incrementalmente.

tablaOriginal

id     clasificación
1 12
2 16
3 20
4 25
5 30
6 35
7 40
8 45
9 100


tabla necesaria

1 0.00 12.00
2 12.00 16.00
3 16.00 20.00
4 20.00 25.00
5 25.00 30.00
6 30.00 35.00
7 35.00 40.00
8 40.00 45.00
9 45.00 100.00



SELECT 
TS.id,
TI  = ISNULL(TI.Clasificacion,0)
,TS = TS.Clasificacion

FROM tblTabla TS 
LEFT JOIN  tblTabla TI 
ON TI.id= TS.id-1

Se hace un SELECT de la tabla en el FROM con el alias TS (Superior)
y se hace un LEFT JOIN con la misma tabla pero con el alias TI (Inferior)
se utiliza un LEFT para que aunque no se encuentre coincidencia como seria en el caso del primer registro  regrese NULL entonces asumimos que no hay menor que ese registro y por tanto le ponemos el cero como valor mínimo con la instrucción ISNULL(TI.Clasificacion,0) esto debido a que en el ON de TI se busca el id de la tabla superior menos 1

Saludos


SELECT los último registros por grupo

SQL Server,
Suponiendo que tenemos varios movimientos registrados por folio, en el entendido que un folio puede tener varios movimientos, por ejemplo en una biblioteca Un Libro se presta muchas veces en el dia.

El requerimiento es obtener el último movimiento registrado por cada Libro, bueno de eso trata este tema.

SELECT 
FROM tblMovimientos 
INNER JOIN 
      (
            SELECT 
            id = MAX(idMov)
            FROM tblMovimientos IDS
            GROUP BY idLibro
      ) IDS 
ON IDS.id = tblMovimientos .idMov 
ORDER BY idLibro

Primeramente hacemos un SELECT anidado con el alias IDS donde en efecto traeremos id Mas actual agrupado por libro con la función MAX porque el id de los movimientos es único e incremental
Después en el SELECT principal hacemos un cruce con todos los ids encontrados con el INNER JOIN para que traiga únicamente los datos que coincidan con dicho cruce y los demás los descarte y como un plus  se ordenan por id de libro.

En este ejemplo utilicé SELECT * FROM (*Asterisco) solo con fines didácticos porque en la practica recomiendo encarecidamente que NO lo utilicen, mejor especifiquen los campos que desean mostrar en el SELECT, salvo por ejemplo en un SELECT COUNT(*) FROM si es que lo requieren.


Saludos.

UPDATE SELECT Un registro en la misma tabla

SQL Server:

En algunas ocasiones necesitamos actualizar un registro con los datos de otro registro de la misma tabla, ya sea para duplicar resultados, pruebas o cualquier otro asunto y posiblemente necesites la misma información con id diferentes.

Bueno aquí vamos:


-- En el siguiente ejercicio se actualiza el id 1405 con los datos del registro numero 99

UPDATE tblMovimientos
SET 
Fecha=M.Fecha
,Diametro=M.Diametro
,Altura=M.Altura
,CalidadA=M.CalidadA
,CalidadB=M.CalidadB
,CalidadC=M.CalidadC
FROM tblMovimientos 
JOIN tblMovimientos
ON tblMovimientos.idMov = 1405
WHERE M.idMov = 99


En el Query se especifica el Update a la tabla real y se hace referencia a la misma con un alias (M) en el FROM y en el JOIN se hace un cruce de datos especificando en el ON el id que se va a Modificar
y por último en el WHERE se indica el id de donde se obtienen los datos que se identificarán con el alias M.

Saludos.

jueves, 3 de mayo de 2012

Gráfica de pastel con webchart

Ahora veamos como introducir un gráfico de pastel a nuestra pagina y para eso empezaremos por saber que es WEBCHART.
en términos generales es una DLL  libre para crear gráficas de diferentes tipos.  hecho por:
Carlos Aguilar Mares © 2011 .http://www.carlosag.net/tools/webchart/

El ejemplo que se muestra a continuación es muy básico, pues tiene múltiples funcionalidades y varios tipos de gráficos (barra, lineas, Área, etc.) mismas que se pueden analizar por cuenta propia.

Manos a la obra!!!!

Para empezar
Utilizaremos Visual estudio con C #.
tenemos que ir a la pagina y descargar la DLL y guardarla en la carpeta: Bin
y agregar la referencia de dicho elemento.

Nuestro resultado final será algo parecido a esto:
Imagen PNG generada por webchart


Agregando el Elemento WebChart
En la Pagina Html ("Graficos.aspx") se va a agregar el siguiente código (Lo importante esta en CAFE):
<%@ register tagprefix="Web" namespace="WebChart" assembly="WebChart"%>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Página sin título</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
<web:chartcontrol runat="server" id="chcPastel" BorderStyle="Outset" Padding="20" >
</web:chartcontrol> 
        </div>
    </form>
</body>
</html>

Crear la Clase clWebChart para manipular los elementos del control:

using System;
using System.Data;
using System.Web;
using System.Collections.Generic;
using System.Drawing;
using WebChart;
using System.IO;
/// <summary>
/// Descripción breve de clWebChart
/// </summary>
public class clWebChart
{
    private ChartControl _cControl = new ChartControl();
    private List<oBasico> _coleccionBasica = new List<oBasico>();
    private ChartPointCollection _coleccionPuntos = new ChartPointCollection();
    protected Color[] CargaColores
    {
        get
        {
            List<oBasico> Listaitems = new List<oBasico>();
            Listaitems = _coleccionBasica;
            Color[] colors = new Color[Listaitems.Count];
            int i = 0;
            foreach (oBasico ObjActual in Listaitems)
            {
                colors[i] = ObjActual.Color;
                i += 1;
            }
            return colors;
        }
    }
    protected void ConfigurarControl(ChartControl cControl, Chart cChart)
    {
        _cControl = cControl;
        _cControl.Width = 600;
        _cControl.Height = 500;
        _cControl.Font.Name = "Tahoma";
        _cControl.Font.Size = 8;
        _cControl.Border.Color = Color.DarkOrange;
        _cControl.GridLines = WebChart.GridLines.Both;
        _cControl.ForeColor = Color.Black;
        _cControl.Legend.Position = LegendPosition.Left;
        _cControl.ChartTitle.Font = new Font("Tahoma", 9, FontStyle.Bold);
        _cControl.ChartTitle.ForeColor = Color.Black;
        _cControl.ChartTitle.Text = "Titulo Principal";
        Font fuente = new Font("Tahoma", 8);
        _cControl.XTitle = new ChartText();

        StringFormat formato = new StringFormat();
        formato.LineAlignment = StringAlignment.Far;
        _cControl.XTitle.StringFormat = formato;
        _cControl.XTitle.Font = fuente;
        _cControl.XTitle.Text = "Descripción de la grafica";
        _cControl.Charts.Add(cChart);
        _cControl.RedrawChart();
    }
public clWebChart(){
// Esto va porque WebChart crear una carpeta donde almacena las imágenes que va generando
// pero no las elimina, así que nosotros la eliminamos por cuenta propia de esta forma.
        DirectoryInfo dir = new DirectoryInfo(HttpContext.Current.Server.MapPath("~//") + "Webcharts");
        if (dir.Exists && dir.GetFiles().Length > 0)
        {
            dir.Delete(true);
        }
}
}
    /// <summary>
    /// Agregar nuevos items a la grafica de pastel.
    /// </summary>
    /// <param name="Descripcion">Descripción [string]</param>
    /// <param name="color">Color [Color]</param>
    /// <param name="Valor">el valor del item [int]</param>
    public void AddItems(string Descripcion,Color color, int Valor)
    {
        List<oBasico> Listaitems = new List<oBasico>();
        ChartPointCollection cPCol = new ChartPointCollection();
        cPCol = _coleccionPuntos;
        Listaitems = _coleccionBasica;
        Listaitems.Add(new oBasico(Descripcion,color,Valor));
        cPCol.Add(new ChartPoint(Valor.ToString(), Valor));
        _coleccionPuntos = cPCol;
        _coleccionBasica = Listaitems;
    }
    public void LlenaPastel(ChartControl cControl)
    {
        PieChart cChart = new PieChart(_coleccionPuntos);
        // Configuracion General
        cChart.DataLabels.Visible = true;
        cChart.DataLabels.ForeColor = Color.Blue;
        cChart.Shadow.Color = Color.LightGray;
        cChart.Shadow.Visible = true;
        cChart.Legend = "Leyenda";
        cChart.LineMarker.Color = Color.Aquamarine;

        // Colores personalizados
        cChart.Colors = CargaColores;
        // Agregar datos
        cChart.DataSource = _coleccionBasica;
        cChart.DataXValueField = "Legend";
        cChart.DataYValueField = "Valor";
        cChart.DataBind();
        cChart.Explosion = 5;
        // Siempre debe ir al Final para procesar el control
        ConfigurarControl(cControl, cChart);
    }

private class oBasico
    {
        private Color _color;
        private string _legend;
        private int _valor;
        public oBasico(string desc,Color color, int valor)
        {
            _color = color;
            _legend = desc;
            _valor = valor;
        }
        public int Valor
        {
            get
            {
                return _valor;
            }
            set
            {
                _valor = value;
            }
        }
        public Color Color
        {
            get
            {
                return _color;
            }
            set
            {
                _color = value;
            }
        }
        public string Legend
        {
            get
            {
                return _legend;
            }
            set
            {
                _legend = value;
            }
        }
    }



Configurar el control desde el servidor ("Graficos.aspx.cs")

using System;
using System.Drawing;

public partial class Graficos : System.Web.UI.Page{
    clWebChart cwGraf = new clWebChart();
            if (!Page.IsPostBack){
                int count=20;
                Random rnd = new Random();
                for (int i=10; i<count; i++){
                    cwGraf.AddItems("Item:" + i.ToString(),
                                    Color.FromArgb(rnd.Next(255), rnd.Next(255), rnd.Next(255)),
                                    rnd.Next(50));
                }
                // Llena grafica Pastel con datos
                cwGraf.LlenaPastel(chcPastel);
            }
}

miércoles, 25 de abril de 2012

Divs Flotantes

Hola.
En esta primera entrada voy a poner un ejemplo muy sencillo de como poner un Div al lado de otro y como agregar uno más en la siguiente linea.
#div123 es la forma de crear un estilo destinado para el control que tenga ese nombre especifico y es muy útil para cuando se quiere hacer una configuración personalizada y por ejemplo en varias paginas puede poner un div que se llame #Divestilo y todos los divs que se llamen así adoptarán dicha configuración.

background: es solo para ponerle color al fondo de cada Div.
foat:left : indica que hará "flotar" el div hacia la izquierda.
clear:both : indica que debe mover el div hacia abajo de los otros elementos flotantes.

<style type="text/css">
         #div1{
         float:left;
         background:#EEDD60;
         }
         #div2{
         float:left;
         background:#05FF80;
         }
         #div3{
         clear:both;
         background:#FF0000;
         }
</style>
<div id=”div1″>Ejemplo del div1</div>
<div id=”div2″>Ejemplo del div2</div>
<div id=”div2″>Ejemplo del div2</div>


Ejemplo del div1
Ejemplo del div2
Ejemplo del div3