Últimas noticias
Loading...

Últimos artículos

martes, 27 de marzo de 2007
no image

Eligiendo un cliente de publicación

Casi me vuelvo loco para encontrar un programa que me permita publicar artículos de una manera sencilla. Parece ser que los más utlizados son:
  • Qumana
  • w.bloggar

Los he descargado, pero por lo que he podido observar w.bloggar funciona muy bien con Wordpress y Qumana me falla al arrancar (excepción de Java) y no hay forma de probarlo. Así que buscando por del.icio.us he encontrado Bleezer. No puedo comparar con los otros, pero aparentemente es muy fácil de utilizar, que a fin de cuentas, es lo que interesa.

He estado tentado de pasar el blog a Wordpress, pero no he podido porque no permite código javascript, lo que es necesario para los ejemplos que he realizado con Google Maps. Así que, de momento, a continuar con Blogger...
en No hay comentarios: Read More
miércoles, 7 de marzo de 2007
Gráficos ABC

Gráficos ABC

Los gráficos ABC se pueden utilizar para obtener una información clara de aquellos elementos a los que necesitamos prestar una mayor atención dentro de un conjunto de datos. Para aclarar un poco este tema, pongamos un ejemplo. Supongamos que tenemos una lista de fallos que se producen en la cadena de producción:
  • Fallo de color
  • Fallo de dibujo
  • Fallo de tela
  • Fallo de presentación
Estos fallos queremos clasificarlos dentro de tres grupos:
  • Grupo A: los que más nos interesa controlar. Son aquellos que representarán el 75% de los fallos que tiene nuestra empresa y que debemos solucionar urgentemente.
  • Grupo B: aquellos defectos que tienen una importancia secundaria.
  • Grupo C: son defectos que podemos despreciar, ya que ocurren ocasionalmente.
Pongamos que tenemos la siguiente clasificación:

Defecto
 Cantidad
Color
 4
Dibujo
 3
Presentación
 1
Color
 1
Tela
 8
Presentación
 1

Para obtener el gráfico necesitamos dos columnas más, una que representará el tanto por cien del número de fallos sobre el total y otra que contendrá el tanto por cien acumulado:

Defecto
 Cantidad
 Porcentaje
 Acumulado
Tela
 8
 44.4
 44.4
Color
 5
 27.7
 72.1
Dibujo
 3
 16.6
 88.7
Presentación
 2
 11.1
 100

18
 100

Como se puede observar, hemos ordenado la tabla con la cantidad Porcentaje en orden descendente.

Los dos primeros defectos (tela y color) serían los que entrarían en el grupo A, ya que se encuentran por debajo del 75% de la columna acumulado.

El segundo grupo (grupo B), lo formarían aquellos defecto del 75% al 90% (dibujo) y el grupo C aquellos que estén por encima del 90%.

Por lo tanto controlando los defectos de tela y color, estamos controlando el 75% de los defectos de nuestra empresa.

Si aplicamos este concepto con más datos, los resultados son más claros. En el siguiente gráfico se han introducido 20 defectos. Como se puede ver en la gráfica, controlando 4 de los 20 defectos (linea azul), podemos solucionar el 75% de los defectos de nuestra empresa.


En conclusión, podemos utilizar los gráficos ABC en multitud de escenarios, dedicando el esfuerzo de control a un grupo reducido de elementos.

El autor de esta teoría es Vilfredo Pareto (http://es.wikipedia.org/wiki/Pareto), por lo que, en ocasiones, se puede referir a este gráfico como Pareto de Defectos, etc.

Por último, agradecer a mi amigo José Martín Ferre que fue quien me introdujo este concepto que en su día aplicamos en tantas y tantas empresas.
en No hay comentarios: Read More
miércoles, 28 de febrero de 2007
no image

Google Maps (III)

Crear imágenes para las flechas de dirección

Las flechas de dirección que hemos puesto sobre el mapa, son un conjunto de imágenes cuya rotación varia en 3º a la derecha. La creación de estas imágenes nos llevaría mucho tiempo, pero, por suerte, existen programas como el Photoshop que permiten automatizar tareas con programación en Visual Basic.

Para este caso, he utilizado las librerías que ofrece Photoshop CS2, pero supongo que la sintaxis es muy parecida en versiones anteriores. La especificación de los objetos la podéis encontrar en la web de Adobe. También se podría haber hecho algo parecido con CorelDraw o AutoCad.

Se podría utilizar cualquier programa que admita la programación VBA, en mi caso utilicé Microsoft Excel porque era lo que tenía más a mano. Simplemente creo un botón y le asigno el siguiente código:


Public Sub generaImagen()
Dim appRef, doc, opciones

Set appRef = CreateObject("Photoshop.Application")


Set opciones = CreateObject("Photoshop.ExportOptionsSaveForWeb")
opciones.PNG8 = False
opciones.Format = psPNGSave

For i = 1 To 119
doc = "C:\dir\dir_0.psd"
appRef.Open doc
appRef.ActiveDocument.ActiveLayer.Rotate (i * 3), psMiddleCenter ' Rotar 3º con bloqueo en el centro
appRef.ActiveDocument.Export "C:\dir\dir_" & (i * 3) & ".png", psSaveForWeb, opciones
appRef.ActiveDocument.Close psDoNotSaveChanges
Next

Set opciones = Nothing
Set appRef = Nothing
End Sub

Además es muy importante añadir las referencias a las bibliotecas de Photoshop. Para ello accedo al menú Herramientas, Referencias desde el editor de código y selecciono:
  • Adobe Photoshop 9.0 Object Library.
En este caso se crearán imagenes png de 24 bits a partir de una imagen en formato Photoshop (PSD) dir_0.psd. Las imágenes se irán nombrando como dir_XX.png, siendo XX el grado de rotación hasta llegar a 357.
en 6 comentarios: Read More
no image

Google Maps (II)

Crear ruta


Para crear la ruta codificada utilizaremos una herramienta de Google llamada "Interactive Polyline Encoder Utility" en la que podemos dibujar la ruta directamente sobre el mapa.

Esta utilidad nos proporciona dos cadenas de texto que deberemos incluir en nuestro código. En el mapa que tenemos debajo, se ha creado la siguiente ruta (ver points y levels):


function barranc(){
limpiaMapa();

var infoInicio = [ new GInfoWindowTab("Tab #1", "Inicio del recorrido") ];
var infoFin = [ new GInfoWindowTab("Tab #1", "Fin del recorrido") ];

var ePoly = new GPolyline.fromEncoded({
color: "#FF0000",
weight: 10,
points: "ggekFnm{AIbAmDfDuMjM|CjDcKpPyPaTwH~@g@bU~@~IrBjFJpAy@hGwApAyCE?xB",
levels: "BBBBBBBBBBBBBBBB",
zoomFactor: 32,
numLevels: 4

});

map.addOverlay(ePoly);

// Inicio
var inicio = new GMarker(new GLatLng(38.69828857, -0.4733562469));

GEvent.addListener(inicio, "click", function()
{ inicio.openInfoWindowTabsHtml(infoInicio); });
map.addOverlay(inicio);

// Fin

var fin= new GMarker(new GLatLng(38.707850253909, -0.4866600036621094));

GEvent.addListener(fin, "click", function()
{ fin.openInfoWindowTabsHtml(infoFin); });
map.addOverlay(fin);
}

También hemos marcado en la ruta el punto de partida y el punto de llegada. Para ello, hemos utilizado el objeto GMarker, al que le pasaremos las coordenadas del punto. Posteriormente, añadimos un listener, para que al pinchar sobre el marcador, nos muestre un diálogo con la información del punto. Este diálogo lo hemos creado con GInfoWindowTab.

Marcar la dirección de la ruta



Por desgracia, la API de Google no permite crear las flechas de dirección para que quede más clara la ruta. Buscando por internet, encontré algunas funciones que me han ayudado para esta tarea.
Para marcar la ruta vamos a necesitar un conjunto de imágenes que marquen cierto grado respecto al norte, una función que nos calcule el grado adecuado entre dos puntos y otra que ponga la imagen sobre el mapa.

Empecemos con la función que nos calcula el grado de rotación que debemos aplicar entre dos puntos del mapa:



// === Returns the bearing in degrees between two points. ===
// North = 0, East = 90, South = 180, West = 270.
var degreesPerRadian = 180.0 / Math.PI;

function bearing( from, to ) {
// See T. Vincenty, Survey Review, 23, No 176, p 88-93,1975.
// Convert to radians.
var lat1 = from.latRadians();

var lon1 = from.lngRadians();
var lat2 = to.latRadians();

var lon2 = to.lngRadians();

// Compute the angle.
var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );

if ( angle < 0.0 )
angle += Math.PI * 2.0;

// And convert result to degrees.
angle = angle * degreesPerRadian;
angle = angle.toFixed(1);

return angle;
}

Encontré esta función en un foro, por lo que no puedo poner ninguna referencia a su autor. Se puede observar la siguiente referencia en los comentarios: See T. Vincenty, Survey Review, 23, No 176, p 88-93,1975.

También necesitamos una función que seleccione la imagen a utilizar dependiendo del grado que nos devuelva la función anterior:

var arrowIcon = new GIcon();

arrowIcon.iconSize = new GSize(21,21);
arrowIcon.shadowSize = new GSize(1,1);

arrowIcon.iconAnchor = new GPoint(12,12);
arrowIcon.infoWindowAnchor = new GPoint(0,0);

function direccion(points) {
var p1=points[0];

var p2=points[1];

// Obtiene la direccion de la flecha (bearing) entre los dos puntos
var dir = bearing(p1,p2);

// lo redondea para que sea multiplo de 3 ya que las imagenes se han creado en diferenciales de 3 grados
var dir = Math.round(dir/3) * 3;

if (dir==360) { dir = 0; }

// Busca el punto medio entre los dos puntos
var p1x, p1y, p2x, p2y, pmidxy, pmid;
p1x=map.fromLatLngToDivPixel(p1).x;
p1y=map.fromLatLngToDivPixel(p1).y;

p2x=map.fromLatLngToDivPixel(p2).x;
p2y=map.fromLatLngToDivPixel(p2).y;
// busca el punto medio
pmidxy=new GPoint((p1x+p2x)/2,(p1y+p2y)/2);
// convierte la posición en pixel a geo-coordenadas

pmid=map.fromDivPixelToLatLng(pmidxy);

// selecciona la imagen correspondiente
arrowIcon.image = "img/gmaps/dir_"+dir+".png";

map.addOverlay(new GMarker(pmid, arrowIcon));
}

Para ello se busca el punto medio de los puntos pasados como parámetros y obtiene el grado de rotación de la flecha a mostrar en el mapa. Por último crea un GMarker (un marcador) con la imagen y el punto medio obtenidos.

En el ejemplo, se puede observar que las imágenes se encuentran en /img/gmaps/ y se han nombrado siguiendo el patrón dir_XXX.png, dónde XXX es el grado de rotación. Para crear estas imágenes, podéis consultar el siguiente artículo del blog 'Google Maps(III)'.
en 1 comentario: Read More
martes, 27 de febrero de 2007
no image

Google Maps (I)

Ya se que está muy visto el incluir mapas en las web, y que hay mucha documentación al respecto, pero me costó bastante encontrar ciertas funcionalidades en lo que se refiere a marcar rutas sobre el mapa. Así que aquí tenéis un pequeño resumen en varias entregas.

Crear mapa


Lo primero que necesitamos, es un mapa, para ello necesitamos registrarnos en la API de Google en http://www.google.com/apis/maps/signup.html

Incluiremos el enlace a la API en la cabecera (head) con la clave que nos han proporcionado:

<script src="http://maps.google.com/maps?file=api&v=2&key=PONER_AQUI_LA_CLAVE" type="text/javascript"></script>

Después añadiremos el código
javascript para mostar el mapa:

<script type="text/javascript">

//<![CDATA[
var map;

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

basico();
}
}javascript:void(0)
Publicar

function basico() {
map.setCenter(new GLatLng(38.697789, -0.473302), 15);
}
//]]>

Sólo nos falta crear un div en nuestra página para que pueda contener el mapa y llamar a los métodos de inicialización de la API de Google Maps:

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 27em; height: 27em"></div>
</body>


Aquí tendríamos el resultado, un mapa centrado en Alcoi a una altura definida (15):
en No hay comentarios: Read More
Suscribirse a: Entradas (Atom)
Quick Message
Press Esc to close

Send Quick Massage

Nombre

Correo electrónico *

Mensaje *

Copyright © 2013 Apaga y vámonos All Right Reserved
Back To Top