Que son las librerias?

31 05 2008

“JQuery es una libreria esctita en Javascript PARA Javascript…” que nos dice esto? bien… en los tiempos que corren ( y como corren)… los tiempos de desarrollo son cada vez menores y la calidad final de un trabajo debe ser inversamente proporcional… (menos tiempo == mejor trabajo)… volvemos a preguntarnos… y que nos dice esto? que cada vez tenemos que trabajar mas rapido y mostrar un trabajo mucho mejor? la respuesta es un rotundo SI…. Ahora… y como hago para trabajar menos y presentar un exelete trabajo?… la respuesta es … ( y esto me duele en lo mas profundo de mi ser….) UTILIZAMOS CODIGO YA ESCRITO POR OTRA PERSONA QUE AL IGUAL QUE NOSOTROS SE ROMPIO LA CABEZA PENSANDO EN COMO HACER UN MEJOR TRABAJO EN MENOS TIEMPO… en definitiva… eso es una libreria… son archivos escritos en diferentes lenguajes para facilitarnos el trabajo de escribir programas…

No es lo mismo escribir:

Detecta_escalon( ); function Detecta_escalon(){ variables;condiciones;cerebro;}
Crea_escalera();function Crea_escalera(){ variables;condiciones;cerebro;}
prioriza_pie_ini();// function prioriza_pie_ini(){ variables;condiciones;cerebro;}
cant_peldaneos();//function cant_peldaneos(){variables;condiciones;cerebro;}
calcula_pendiente();// function calcula_pendiente(){ variables;condiciones;cerebro;}
Velocidad_permitida();// function Velocidad_permitida(){ variables;condiciones;cerebro;}
detecta_fin_escalera();// function detecta_fin_escalera(){ variables;condiciones;cerebro;}

Que esto:
sube_escalera();

Se entiende?… todo el codigo que nos ahorramos en escribir es brutal! y no solo eso.. las librerias mas creadas casi nunca tienen problemas al interpretarse!… si tarde 4 hs en crear la posibilidad de que un objeto suba las escaleras creando mi propio codigo, y tarde 7 segundos en utilizar una libreria… cual piensan ustedes que voy a utilizar en el futuro?…





Como generar graficos con Amchats Parte I

19 01 2008

Este será mi primer tutorial sobre este fantástico programa…
Basta de chacharas y vamos a la accción:

Lo primero que haremos es dirigirnos a la pagina oficial de Amcharts y elegir uno de los tantos graficos a generar… yo voy a utilizar los graficos de barras porque ya los utilize anteriormente.
Una vez aquí… buscaremos en la barra lateral la opcion de descargar (download) los ultimos ficheros para empezar a trabajar…

Una vez descargado el .zip lo descomprimimos y encontraremos 2 carpetas, un archivo de texto con la licencia y un archivo .html, el mismo contiene un ejemplo del archivo bajado.

carpetas

Dentro de “examples” encontraremos muchisimos ejemplos de graficos ya creados… los cuales nos serviran luego para ir probando los resultados….

Hasta ahora todo normal… nada que todos ya hayamos hecho… bien… ahora vamos al corazón del asunto.

COMO FUNCIONA AMCHARTS ???

A lo mejor debería aver empezado por aqui… disculpen es por mi falta de practica jejeje… Amchats esta constituido por 4 pilares fundamentales …. HTML, XML, JAVSCRIPT y ACTIONSCRIPT… como ven es un programa multi-lenguaje (lenguajes de programacion)…un hibrido… esto trae ventajas y desventajas pero es asunto de otro post… pero para lo que lo necesitamos no hace falta saber muuuucho… con un poco de paciencia y curiocidad es mas que suficiente….

Vamos al codigo…

Como veremos a continuacion, todo lo que se necesita es este codigo javascript insertado entre las etiquetas <body></body> en principio esto es todo… (para que funcione en nuestra web…)

sin-titulo-20.jpg

Figura1


Nota importante:
Estoy tomando por centado que la estructura de carpetas es correcta, es decir… si yo quiero colocar mi grafico en el index.html este debe estar al mismo nivel que el archivo amcolumn.html para que todos los links no se rompan… de todas formas es muy simple modificar esto ultimo.

Bueno como veran en la Figura1 muestro el codigo javascript insertado en el html… bien en la primer linea grisada empesando de arriba hacia abajo podemos leer el siguiente codigo:

<script type="text/javascript" src="amcolumn/swfobject.js"></script>

Esto nos indica de donde tomar el archivo Javascript principal, sin esto no funciona nada…

Luego encontramos:

<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
</div>

Este es el DIV donde se cargará el grafico. No se puede reemplazar por otra cosa…OJO.
Fijemonos que esta etiqueta tambien tiene un ID con un nombre… ese nombre es responsable de indicarle a javascript donde colocar el grafico… dicho de otro modo… javascript dice “debo colocar este grafico en la etiqueta DIV con el ID igual a flashcontent”… puede cambiarse el nobre con total confianza siempre y cuando luego al final del codigo en
so.write("flashcontent");

le coloquemos el nuevo nombre que hemos elejido…

La siguiente linea identifica cual es el .SWF que cargaremos y donde se encuentra… ademas tenemos 4 paremetros ajustables… 520 es el ancho, 400 el alto, 8 la version del flash player, #FFFFFF el color de fondo.
var so = new SWFObject("amcolumn/amcolumn.swf", "amcolumn", "520", "400", "8","#FFFFFF");

Aqui donde esta alojado el .SWF:

so.addVariable("path", "amcolumn/");

desde aqui se toma el xml con las configuraciones:

so.addVariable("settings_file", escape("amcolumn/amcolumn_settings.xml"));

la linea siguiente toma los datos a ser mostrados en el grafico:

so.addVariable("data_file", escape("amcolumn/amcolumn_data.xml"));

Se pueden pasar los datos de gráficos como una cadena directamente de este archivo
so.addVariable("chart_data", "");

Se pueden pasar configuraciones del grafico como una cadena directamente de este archivo.
o.addVariable("chart_settings", "");

Le añade algunos ajustes a la tabla de los gráficos cargados
so.addVariable("additional_chart_settings", "");

Es el texto que aparecera cuando empieza a cargar las configuraciones… esto solo si esta habilitado. Recuerden que una linea con una doble barra inclinada ” // ” en javascript, como en varios lenguajes, significa que esta comentado… es decir… el interpete se lo saltea, basta con borrar esas barritas y ya tenes habilitada la opcion.
so.addVariable("loading_settings", "LOADING SETTINGS");

Lo mismo que antes… texto que aparece cuando se empieza a cargar los datos.
so.addVariable("loading_data", "LOADING DATA");

El color del precargador…
so.addVariable("preloader_color", "#999999");

esta ultima linea indica donde debe “escribir” o insertar el resultado. Como ya dije antes debe tener el mismo nobre que el DIV antes mencionado.
so.write("flashcontent");

y por fin el final…

</script>

Con este primer e informe podemos empezar a entender el funcionamiento de este fantastico programa… ahora en la parte II voy a explicar el archivo data.xml que es el que almacena todos los datos a ser configurados….

Como este es mi primer Tutorial me encantaria que me dejen un FeedBack… un comentario sobre si les gusto… si fui lo suficientemente claro al momento de explicar… que se puede mejorar y demas…. muchas gracias!!!