Contenido

TimePlot, lo nuevo de SIMILE, está vez mejora las estadísticas

31 jul

+ 6

Hace unos meses conocí SIMILE Timeline, un sistema que despues fue usado para crear BlogoEdad, en el que me aproveché de la funcionalidad de Timeline nos ofrece para mostrar la edad de los 1.715 bloggers registrados.

blogoedad.jpg

Ahora la gente de SIMILE, nos deleita con TimePlot, un sistema de gráficas para estadísticas muy elegante y vistosa que nos permite una gran personalización, una personalización tan interesante que nos permite además de los datos que conformarán la gráfica, insertar hitos que indicarán eventos concretos en una linea temporal formada por la gráfica. Osea que podremos tener una gráfica basada en tiempo a la que se le añadirán eventos que nos servirán de referencia para los datos obtenidos.

simile_timeplot_example.jpg

Todo ello, está desarrollado mediante una API en Javascript, realmente extensa que podemos usar de forma completamente gratis ya que se trata de un software open source.

Ejemplo

<html>
  <head>
    <script src="http://static.simile.mit.edu/timeplot/api/1.0/timeplot-api.js" type="text/javascript"></script>
	<script type="text/javascript">
	var timeplot;
	
	function loadNow() {
	  var eventSource = new Timeplot.DefaultEventSource();
	  var eventSource2 = new Timeplot.DefaultEventSource();

	  var timeGeometry2 = new Timeplot.DefaultTimeGeometry({
	        gridColor: new Timeplot.Color("#000000"),
	        axisLabelsPlacement: "top"
	  });
	
	  var valueGeometry = new Timeplot.DefaultValueGeometry({
	        gridColor: "#000000",
	        min: 0,
	        max: 100
	  });

	  var plotInfo = [
	       Timeplot.createPlotInfo({
	          id: "plot1",
	          dataSource: new Timeplot.ColumnSource(eventSource,1),
	          timeGeometry: timeGeometry2,
	          valueGeometry: valueGeometry,
	          lineColor: "#ff0000",
	          fillColor: "#cc8080",
	          showValues: true
	        }),
	        Timeplot.createPlotInfo({
	          id: "plot2",
	          dataSource: new Timeplot.ColumnSource(eventSource,3),
	          timeGeometry: timeGeometry2,
	          valueGeometry: valueGeometry,
	          lineColor: "#D0A825",
	          showValues: true
	        }),
	        Timeplot.createPlotInfo({
	          id: "plot3",
	          timeGeometry: timeGeometry2,
	          eventSource: eventSource2,
	          lineColor: "#03212E"
	        })
	  ];

	  timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);
	  timeplot.loadText("data.txt", ",", eventSource);
	  timeplot.loadXML("events.xml", eventSource2);
	}

	var resizeTimerID = null;
	function onResize() {
	    if (resizeTimerID == null) {
	        resizeTimerID = window.setTimeout(function() {
	            resizeTimerID = null;
	            timeplot.repaint();
	        }, 100);
	    }
	}
	</script>
  </head>
  <body>
  <body onload="loadNow();" onresize="onResize();">
   <div id="my-timeplot"></div>
  </body>
</html>

El cerebro de los desarrolladores web

31 jul

+ 11

webdev_mind1.jpg
Via

El foro, por fin, funcionando

31 jul

+ 3

Tras casi un mes de ausensia, he podido meterle mano al foro y echandolé un vistazo a logs he visto por que fallaba y en 5 min estaba corregido. Así que sin más dilación….

El Foro de aNieto2k

Ajax Progress Bar, barras de progreso para tu web

31 jul

+ 5

Si estás buscando una barra de progreso para tus aplicaciones web, deberías tener en cuenta Ajax Progress Bar, fácilmente personalizable y de usar.[Descargar][Demo]. Progress Bar versión MooTools de TechNiq, gracias Daniel.

12 formas para migrar de la web 1.0 a la 2.0

31 jul

+ 16

La web 2.0 está marcando un punto de inflexión en cuanto al concepto de las aplicaciones web, pero (y en todo jocoso) ¿estás preparado para la web 2.0?

Para empezar, y a modo de ampliar los 8 trucos para hacerte con la web 2.0,  deberías tener en cuenta estas 12 formas de migrar de la web 1.0 a la 2.0.

  1. Reemplaza e-loquesea.com por my-loquesea.com
  2. Incrementa el tamaño de la fuente a 12-16px (1em).
  3. Cambia las categorías por tags
  4. Cambia la sección de noticias por un blog
  5. Cambia el “Enviar a un amigo” por una suscripción RSS.
  6. Cambia el “Guardar en Marcadores” por enlaces a redes sociales.
  7. Cambia la “Cuenta de usuario” por “Perfil de usuario”
  8. Cambia tu cutre código HTML por un semántico xHTML con CSS
  9. Son visitantes, no peticiones.
  10. Añade comentarios
  11. Cambia e-site.com?id=1234&sort=desc&parametros=inventados por my-site.com/a-que-molo-mazo
  12. Cambia tu sitio personalizado por un CMS Open Source.

¿Es que alguien creía que Internet se libraría de las modas? :D

8 versiones javascript del menú OSX

30 jul

+ 14

Si te gusta el dock OSX de MacOS y te gustaría integrarlo en tu página web, tienes unos cuantos de donde elegir.

mootools_fisheye.jpg

  1. CSS Dock Menu [Demo] Navegadores: IE 6, IE 7, Opera 9, Firefox 2 y Safari.
  2. MacStyleDock [Demo] Navegadores: Firefox, IE6, IE7, Konqueror, Opera9,
  3. iconDock [Demo] Navegadores: Firefox, IE6, IE7, Safari.
  4. Dojo FishEye Widget [Demo] Navegadores: ??
  5. MooTools FishEye [Demo] Navegadores: ??
  6. iFishEye [Demo] Navegadores: IE, Firefox, Opera, Safari
  7. euroDock [Demo] Navegadores: ??
  8. Corner Dock [Demo] Navegadores: IE7, Firefox, Opera9, Safari.

Dust-Me Selector, ¿que clases me sobran en mis CSS?

30 jul

+ 4

Hace unos días media internet se hacia eco de CSS-Redundancy checker, una herramienta para optimizar tus CSS, informandote de las clases e id’s no usados en el código. Incluso se montó una versión online para realizar dicha función.

Pero hay una forma mucho más cómoda y sin necesidad de depender de una herramienta externa para comprobar la utilización de nuestros elementos CSS y depurar nuestro código CSS mejorando el rendimiento y dandolé un toque más profesional….Lo sé, tendría que mirarmelo, pero no tengo tiempo ahora mismo :D

dust_me_selectors.gif

Dust-Me Selectors es una extensión para Firefox que te permite conocer que selectores están declarados en el CSS y no se usan en el código HTML de nuestras páginas.

La mejor página de error 404 No encontrado

30 jul

+ 4

Si aún no tienes claro como hacer páginas de “404 No encontrado” y esta colección no te ayudó mucho. Quizas la mejor página de 404 Not Found de Internet te servirá de inspiración. Galería con cientos de páginas 404.

unavailable_after, elige cuando han de eliminarte de Google

30 jul

+ 2

El tag unavailable_after, que permite especificar el momento en el que la página debería ser retirada de la lista de resultados de busqueda. De tal forma que podemos hacer que nuestras entradas antiguas desaparezcan dejando las más modernas por delante en la lista de resultados.

<META NAME="GOOGLEBOT" CONTENT="unavailable_after: 11-Sep-2007 11:00:00 EST">

Este tag puede ser usado para varias tareas, la más obvia es para limitar el tiempo de exposición de material en la lista de resultados. Aunque el tag permite a los webmasters un control extra sobre el contenido de sus páginas.

La idea es que los webmasters usemos el tag para conseguir que el contenido de nuestras páginas sea lo más actualizado posible y evitemos encontrar artículos muy antiguos y completamente desactualizados.

Via nenglog leo que por fin el blog de Google ha anunciado que este tag será tratado por parte de Google de forma oficial.

Mingle2, ¿cuantos tags HTML te sabes?

30 jul

+ 4

Mingle2, es un curioso entretenimiento de 5 minutos en los que has de enumerar el máximo de elementos HTML que recuerdes. Al puro estilo Brain Training para WebDevelopers, me ha tenido 5 min recordando códigos enteros.

mingle2_html_tags.JPG

¿Cuantas recuerdas tu?