CodePress es una de los mas sorprendentes editores de código online. La implementación es parte del proyecto ECCO, un IDE web en estado alfa, y su creador consideró separar una parte de este IDE y convertirlo en CodePress.

Caracteristicas

• Resaltado de sintáxis en tiempo real.
• Soporta lenguajes ASP, CSharp, CSS, HTML, Java, JavaScript, Perl, PHP, Ruby, SQL y VBScript.
• Snippets (pequeños fragmentos de códigos útiles).
• Autocompletado de código.
• Shortcuts.
• Multiples instancias de CodePress en la misma página.

Enlaces | CodePress

A esto es lo que llamo el uso adecuado de la tecnología. Nuestro amigo Erik Blanco nos informa de una aplicación web desarrollada por su persona usando Ajax, PHP (orientado a objetos), MySQL, CSS y Javascript. Se trata de un mantenimiento de datos de una tabla MySQL: inserción, actualización, eliminación y consulta (paginada). Lo interesante es que no usa ningún librería Javascript para ello. Un buen ejemplo de como quedaría una aplicación si armamos nuestro propio objeto XMLHttpRequest para usar Ajax.  

Enlace | Catalogo Empleados 

Esto no es nuevo: tienes un formulario de contacto, por ejemplo, con el objetivo de que tus visitantes pueden comunicarse contigo para un asunto en especial, pero lamentablemente este formulario pierde su proposito debido al spam que llega y llena nuestro buzón de entrada con tontería y media. Existen muchos métodos para evitar el spam basado en Captcha, pero en modernblue encontramos un método con CSS.

¿Cómo trabaja? 

Pues es fácil, se basa en el hecho de que los spambots llenan "todos" los campos de un formulario. Así que teniendo eso en mente, mediante CSS ocultamos un campo.

.special {
  width:5px;
  visibility:hidden;
}

 <input name="info" class="special" type="text" />

Ya mediante el lenguaje servidor (PHP, ASP, etc) evaluarás si tal campo esta lleno entonces es un spambot. Sencillo.

Enlace | Fighting Span With CSS 

Un pequeño ejemplo que nos muestra como desarrollar un interesante menú con CSS y prototype.js (1.5.1).

index.html

 <div id="menu">
	<div id="m-top">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">F.A.Q.</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div id="m-slider">
		<div id="slider"></div>
	</div>
</div>

helper.js

window.onload=function(){

	var offsetLeft=$('menu').offsetLeft;

	Event.observe('menu', 'mousemove', function(event){

		coordinateX=Event.pointerX(event)-offsetLeft;
		$('slider').style.marginLeft=coordinateX-20+'px';

	});

}

La hoja de estilos puedes descargarla desde aquí. El ejemplo quedaría así: 

Finalmente puedes descargas los archivos necesarios para este ejemplo desde Dragan's Blog.

IIPImage es una aplicación cliente-servidor de código abierto que nos permite visualizar imágenes de alta resolución. Esta diseñado para el uso adecuado: de la velocidad de conexión a internet (incluso conexion lentas) y gestión de memoria. ¿Cómo funciona? Este visualizador trabaja rápido, por que fragmenta la imagen en muchas pequeñas partes y solo descarga las porciones que son visibles dentro del marco del visualizador. Mientras te desplazas por la imágen (de gran tamaño) se van descargando las porciones necesarias, similar a lo que hace Google Maps.

Para hacerlo funcionar tendrás que configurarlo en tu servidor web, (trabaja sobre Apache, Lighttpd, MyServer) y luego configurar tus páginas web para que se muestre el visualizador (puedes usar applets de Java ó JavaScript-Ajax). La web de IIPImage muestra como realizar todos estos pasos. Así que si queremos tener nuestro propio Google Maps en nuestro servidor web para colocar imágenes de alta resolución, esta es una interesante opción.

Este ejemplo muestra una fotografía de 18000x18000 píxeles de la Nebulosa de Orión.

E Logo Design, muestra una relación de 50 tutoriales que te explican cómo diseñar tu propio logo, paso a paso, con Photoshop. Un recurso como para tenerlo a mano para todos aquellos que manejan a la perfección el Photoshop, y los que no también. 

Por ejemplo este tema: Colorful Logo, explica cómo, paso a paso con una serie de screenshot y breves explicaciones, llegar a obtener el primer Logo de 4 hojitas de colores que se muestra arriba en la imagen.

Desde que instale Ubuntu 7.04 y me entere de Beryl no he parado de recomendarlo a mis conocidos y amigos, y ahora me sumo a los distintos bloggers que lo recomiendan como una excelente alternativa al Aero de Vista (corríganme si me equivoco, pero el Aero esta disponible en las ediciones mas caras del Vista). Si nos podemos a 'googlear' sobre esta aplicación encontraremos mucha información, así que para usarlo, explicaré como instalarlo e iniciarlo automaticamente en nuestro Ubuntu.

Primero vamos al menú Aplicaciones -> Añadir y Quitar, buscamos en la sección Mostrar: 'Todas las aplicaciones disponibles'. Y en los resultados seleccionamos Beryl Manager y Beryl Settings Manager, y ... a esperar.

Al finalizar la descarga e instalación, vamos a Aplicaciones -> Herramientas del sistema -> Beryl Manager para iniciar los efectos en nuestro escritorio ó Beryl Settings Manager para configurar los distintos efectos que puede realizar nuestro escritorio. Si deseamos cambiar la apariencia de las ventanas vamos a Sistema -> Preferencias -> Emerald Theme Manager. Si deseas mas temas para la apariencia de tus ventanas, puedes visitar Beryl-Themes.org ó Beryl Project y descargar una infinidad de temas, incluso algunos similar a Windows Vista si es que extrañas tanto Windows.

Si nos gusta Beryl y queremos que se ejecute automáticamente al iniciar Ubuntu, simplemente vamos a Sistema -> Preferencias -> Sesiones. En la ventana de Sesiones vamos al botón Nuevo, aparecerá una ventana de diálogo donde en Nombre escribimos Beryl (o como quieras llamarlo) y en Comando escribes beryl-manager. Para probar cierra tu sesión y vuelve a iniciarla.

El último paso, es presumir de los efectos ante usuarios de Windows Vista, pero presumir de que a ti no te costo mucho dinero. Así que disfrutar de los efectos! 

¿Como no se me pasó por la mente implementar un tutorial sobre "Cómo armar tu propio calendario con PHP y AJAX"? Pero bueno, aqui una relación de algunos calendarios elaborados con CSS, Javascript y PHP listos para integrarlos a tu web o blogs.

1. Monket Calendar
2. Calendario usando AJAX y PHP
   
3. Integrando Google Calendar a tu web
4. Calendario con JavaScript
5. Calendario con DHTML y JavaScript
6. Calendario con CSS y listas (<ul> y <li>)
7. Calendario con CSS
   
8. Calendario con CSS (valida correctamente CSS)
   
9. Calendario con PHP y Scriptaculous
10. Calendario AJAX - Javascript, XML y PHP
11. MySQL Calendar por Jamie McConnell
12. acc_calendar: calendario accesible en javascript
13. Swazz Javascript Calendar
14. Scal - Javascript Calendar Control based on Prototype and Scriptaculous

¿Sabes de alguno más?...

Actualizado: 23/10/07 

Google Code prettify es un módulo que hace uso de Javascript y CSS para resaltar la sintáxis de código fuente en una página HTML. Si tu tiene un blog donde escribes códigos de diversos lenguajes (C, Basic, Javascript, Ruby, etc) puedes hacer uso de esta pequeña utilidad.

Configuración 

1. Descarga el Code prettify.
2. Agrega la referencia al archivo Javascript y CSS en tu página web de esta manera:

   <link href="prettify.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" src="prettify.js"></script>

3. Agrega onload="prettyPrint()" a la etiqueta body del código HTML.
4. Puedes modificar la hoja de estilos para darle los colores que tu prefieras.

Uso

Coloca en el atributo class de las etiquetas pre y code "prettyprint": <pre class="prettyprint">...</pre> ó <code class="prettyprint">...</code>, así de manera automática se resaltara (ó coloreará) la sintáxis de nuestros códigos en nuestras páginas web.

Enlace | Documentación

Google ha empezado a integrar un visor de los archivos .ppt dentro de Gmail, una interesante herramienta. Todo esto indica que Google (según TechCrunch) está desarrollando un aplicación online para creación de presentaciones para competir directamente con Microsoft (lo cual no es novedad).