y después guarden su obra de arte.
viernes, 28 de junio de 2013
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
- #FFF0F0
- #FFF3F3
- #FFAFAF
- #FFDEDE
- #FF4545
- #FFCDCD
- #F0FFF0
- #F3FFF3
- #AFFFAF
- #DEFFDE
- #45FF45
- #CDFFCD
- #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.
Tabla de colores HTML
Selector de colores HTML
Colores seguros para la Web (a prueba de exploradores y SO)
Selector de colores HTML
Colores seguros para la Web (a prueba de exploradores y SO)
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
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 M
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.
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 M
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:
Agregando el Elemento WebChart
En la Pagina Html ("Graficos.aspx") se va a agregar el siguiente código (Lo importante esta en CAFE):
Crear la Clase clWebChart para manipular los elementos del control:
Configurar el control desde el servidor ("Graficos.aspx.cs")
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>
<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;
}
}
}
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);
}
}
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">
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>
<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
Suscribirse a:
Entradas (Atom)