Lighter.js resaltado de sintaxis con Mootools

Lighter.js es una clase echa con MooTools 1.2.1 para el remarcado de código js, html, php, entre otros.

Su uso es muy sencillo en seguidamente explicaremos como utilizarlo.

Primero descargamos la librería Mootools 1.2.1 y la clase Lighter.js con sus componentes aquí.

Despues de descomprimirlo pasaremos a crear una pagina html donde incluiremos la librería Mootools y la clase Lighter.

<head>
	<script src="js/mootools-1.2.1-core.js"></script>
	<script src="js/Lighter.js"></script>
</head>

Ahora incluiremos este script antes de cerrar el “head” que se encargara de recorrer los tag “pre” y darle el estilo correspondiente.

window.addEvent('domready', function() {
	$$('pre').light({
		altLines: 'hover',
		indent: 2,
		editable: true,
		mode: 'ol',
		path: 'compressed/'
	});
});

donde las opciones significan:

altLines: Le dara un estilo diferente a la fila, en este caso es cuando el mouse esta sobre la fila.
indent: El numero de espacios a remplazar por un tab.
editable: Permite comportarse como un editor de texto remarcando el formato.
mode: es el modo en que se mostraran las filas.
path: es la ruta donde se encuentran los componentes (js, php, html, sql, etc).

Como un ejemplo pondremos un html dentro del body.

<pre class="html">
<head>
	<script src="js/moo-1.2.1-core.js"></script>
	<script src="js/Lighter.js"></script>
</head>
</pre>

Recursos

Generar Captura de pantalla con Ajax

PageGlimpse es un servicio que proporciona la captura de pantalla de una web.
Funciona consultando una pagina mandando como parametro la url y el tamaño.

Ejemplo

http://images.pageglimpse.com/v1/thumbnails?url=http://google.com&size=large&devkey=*****¬humb=http://web.com/noimage.gif

Parametros:

url es la web que se desea capturar.
size es el tamaño estandar del thumbnail (small, medium, large).
devkey es el código que te darán al momento de registrarte en PageGlimpse.
nothumb es un parametro opcional para mostrar una imagen en caso todavía no se halla generado la captura de pantalla de la web.

Utilizandola con Javascript

Thumbnails.js es una librería Javascript que utiliza la API de PageGlimpse para traer la captura de pantalla con una funcion en Javascript el cual utiliza los mismos parametros que la url.

Para utilizar esta librería primero incluiremos el Javascript Thumbnails.js dentro del "head".
Luego crearemos la siguiente funcion

var getScreenShot= function(caja,size){
	var container = document.getElementById('container'),
		thumbs = Thumbnails({
			devkey:'bf3ec081beb6d6af0ff9e43e6f77771e',
			size:size,
			nothumb:'noimage.gif'
		});
	thumbs.get(caja, function(url, img) {
		var link = document.createElement('a');
		img.style.border = 'none';
		link.href = url;
		link.appendChild(img);
		container.innerHTML = '';
		container.appendChild(link);
	});
}

Insertamos un div con id “container” dentro del "body":

<div id="container"></div>

Y despues llamaremos a la pagina de esta manera:

<script type="text/javascript">
getScreenShot('http://google.com','small');
</script>

Recursos

Top 10 librerías para gráficos en php

Desarrollando aplicaciones Web con PHP siempre es necesario y de mucha ayuda una lista de componentes para realizar graficos, reportes mediante PHP.
Ya sea en flash 3D o con una imagen 2D es muy importante y de alto rendimiento tener estadisticas en nuestras aplicaciones, aqui les doy una lista con 10 librerias echas en PHP, unas con flash y otras mediante una imagen.

FusionCharts

Puede integrarse con una multitud de tecnologías web como ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby, Python, o incluso simples páginas HTML. Funciona con todas las bases de datos incluyendo MS SQL, Oracle, MySQL, PostgreSQL, también con archivos CSV
Formato de Gráfico: Flash
Licencia: Libre y Comercial
Descargar: http://www.fusioncharts.com/Download.asp

PHP/SWF Charts

Es una herramienta para generar atractivos gráficos a partir de datos dinámicos. Genera un Flash con los cuadros y gráficos, también puede usar un XML para la generación de gráficos
Formato de Gráfico: Flash
Licencia: Libre y Comercial
Descargar: http://www.maani.us/charts4/index.php?menu=Download

Open Flash Chart

Esta clase genera gráficos en formato Flash y existen clases para PHP, Perl, .NET, Java, Ruby, Python.
Formato de Gráfico: Flash
Licencia: LGPL
Descargar: http://teethgrinder.co.uk/open-flash-chart-2/downloads.php

amCharts

Es una caja de herramientas de gráficos de Flash para sus sitios web.
Puede extraer automáticamente los datos desde el simple archivo CSV o XML, o pueden leer datos generados dinámica con PHP,. NET, Java, Ruby, Perl, y otros.
Formato de Gráfico: Flash e Imagen
Licencia: Libre y Comercial
Descargar: http://www.amcharts.com/download

AnyChart

Es una solución flexible basada en Flash que te permite crear interactivos y gráficos de gran apariencia de flash. Es una cruz-navegador y multi-plataforma de gráficos destinados a la solución de todos los que se refiere a la creación del tablero de instrumentos, informes, análisis, estadística, financiera o de cualquier otra visualización de datos de soluciones.
Formato de Gráfico: Flash
Licencia: BSD license
Descargar: http://www.anychart.com/download/

pChart

Es una clase escrita en PHP para generar imagenes cartográficas desde una consulta SQL, un archivo CSV, o manualmente.
Formato de Gráfico: Imagen
Licencia: GNU General Pulic License
Descargar: http://pchart.sourceforge.net/download.php

JpGraph

Es una clase que esta echa orientada a objetos, su requerimiento es PHP >= 4.3.1

Formato de Gráfico: Imagen
Licencia: QPL 1.0 (Qt Free License)
Descargar: http://www.aditus.nu/jpgraph/jpdownload.php

GraPHPico

Web & Utilería para generar gráficos de tipo estadístico en línea. Componente escrito en PHP + GD, genera gráficos en formato .PNG, actualmente existen los estilos Porcentaje, Barras y Pastel.

Formato de Gráfico: Imagen
Licencia: GNU General Public License (GPL), PHP License
Descargar: http://graphpico.sourceforge.net/graphpico0.0.3.zip

WideImage

WideImage es una librería escrita en PHP5 orientada a objetos para la manipulación de la imagen, solo requiere la extensión GD2. La mayor parte del código esta probada con Simpletest.
Formato de Gráfico: Imagen
Licencia: GNU General Public License (GPL), PHP License
Descargar: http://wideimage.sourceforge.net/wiki/AllReleases

eZ components

Es un conjunto de módulos independientes para el desarrollo de aplicaciones PHP. El componente gráfico le permite crear línea, gráficos de barras y pastel.
Formato de Gráfico: SVG e Imagen
Licencia: BSD license
Descargar: http://ezcomponents.org/download

Limitar caracteres en textarea con javascript

Esta función limitara y bloqueara automáticamente la escritura dentro de un textarea.
Primero pondremos dentro del body el textarea mas un etiqueta span con un id.

<textarea
	id="texto"
    name="texto"
    onkeypress=" return limita(this, event,100)"
    onkeyup="cuenta(this, event,100,'contador')" >
</textarea>
<span id="contador"></span>

Ahora estas funciones se encargaran de limitar la escritura y actualizar el span con el numero de caracteres faltantes para bloquearse.

function limita(obj,elEvento, maxi)
{
  var elem = obj;
  var evento = elEvento || window.event;
  var cod = evento.charCode || evento.keyCode;
    // 37 izquierda
	// 38 arriba
	// 39 derecha
	// 40 abajo
	// 8  backspace
	// 46 suprimir
  if(cod == 37 || cod == 38 || cod == 39
  || cod == 40 || cod == 8 || cod == 46)
  {
	return true;
  }
  if(elem.value.length < maxi )
  {
    return true;
  }
  return false;
}
function cuenta(obj,evento,maxi,div)
{
	var elem = obj.value;
	var info = document.getElementById(div);
	info.innerHTML = maxi-elem.length;
}

Recursos

PollDaddy: crea encuestas para tu web

PoolDaddy es un servicio web que te permite crear encuestas y ponerlas en tus blogs con solo pegar un código javascript.

Entre sus mejores características tenemos:

  • Varios diseños buenos para la encuesta.
  • Crear tu propio diseño para la encuesta.
  • Puedes crear muchas encuestas.
  • Permite fecha de cierre de la encuesta.
  • Comentarios para la encuesta.

El proceso es sencillo

  1. Entras a la web.
  2. Te registras e ingresas.
  3. Seleccionas la pestanaa Polls y click en create Poll.
  4. Elijes las opciones y click en continuar.
  5. Saldrá una ventana donde tendrá el código listo para ponerlo en tu web.

Aquí un ejemplo de como se ve el poll y también es la primera encuesta para el blog.
Escojan su mejor opción para así poder poner nuevos temas interesantes.