Paisajes 3D, dinámicos, con webgl en el navegador web

Si accedéis a esta página veréis un ejemplo de lo que puede hacerse con three.js, una librerí­a de JS que permite hacer maravillas en tres dimensiones, usando en este caso funciones especialmente diseñadas para la construcción de terreno de forma dinámica, con el código disponible en github.

Three.js es una librerí­a muy conocida entre los que programan en 3D en la web, usando HTML5 para generar contenido multimedia. No se limita a WebGL, también trabaja con Canvas (2D) y SVG, con una gran cantidad de ejemplos en threejs.org.

Dicha librerí­a tiene varios tutoriales en Internet para realizar animaciones, incluir iluminación, construir formas… hay uno bastante completo en code.tutsplus.com para ir comenzando, pero si lo que os interesa es ver ejemplos de lo que puede hacerse y disfrutarse con los navegadores modernos, empezad por el paisaje que enlazamos anteriormente.

Una vez abierto, veréis varios pájaros sobrevolando unas colinas. Si pulsáis «n» veréis como pasamos del dí­a a la noche, y si pulsáis «m» veréis como el terreno se mueve a medida que pasa el tiempo.

Con música de fondo y texturas espectaculares, no hay mejor forma de inspirarse antes de comenzar a programar.

Tomodo, una aplicación que nos permite cambiar el css y javascript de cualquier sitio web

Si queréis consultar una página web con una hoja de estilos o un comportamiento especí­fico, tomodo.com os puede ayudar. Se trata de una aplicación que permite hacer una versión personalizada de cualquier página, indicando la url de la misma para que podamos sobreescribir el css y el javascript. En algunos casos (no es compatible con todos los sitios web) podemos retirar e incluir contenido, llevando la personalización al máximo.

El resultado puede guardarse en un subdominio de tomodo, permitiendo ser consultado por cualquier persona. Ellos no guardan nada en sus servidores (no se clona el contenido), solo se hace de puente entre el servidor original y el cliente alterando los componentes especificados por el usuario.

El funcionamiento es semejante a lo que podemos hacer con Greasemonkey, aunque en este caso no es necesario tener una extensión, generando resultados que pueden consultarse desde cualquier dispositivo.

Desde tomodo comentan que se retirarán los sobdominios que reciban denuncias, y en su FAQ incluyen un código que los webmasters podrí­an incluir en su robots.txt para que su web no pueda ser alterada por la plataforma.

Personalmente lo encuentro una muy buena idea que puede usarse en cursos de programación y diseño. Un ejercicio del tipo «cambia el aspecto de reddit completamente usando tomodo» puede ser muy productivo.

CanvasJS – Crea gráficos interactivos en HTML5 y JS para tu aplicación web

canvas

Muchas de las aplicaciones que cuentan con una sección de informes usan Flash para mostrar gráficos interactivos. El problema es que flash no es compatible con muchos dispositivos móviles, por lo que siempre acabamos dependiendo de un PC para poder ver este tipo de contenido.

Ahora, desde fenopix (creadores del plugin Hashplug – contenido de twitter en los resultados de Google – que ya os comentamos hace algunos meses), nos presentan una solución para crear gráficos en HTML5, compatibles con casi todos los dispositivos modernos.

CanvasJS es una librerí­a HTML5 & JavaScript con un gran rendimiento, permitiendo representar cientos de miles de puntos de datos en poco más de 100 milésimas de segundo (10 veces mejor que con las soluciones basadas en Flash convencionales).

Podemos representar diagramas de casi cualquier tipo, existiendo una demostración y una galerí­a de ejemplos en su sitio web, donde cargan datos reales para que podamos comprobar la velocidad con la que se realiza la acción de lectura y representación gráfica de la información.

La librerí­a es gratuita para uso no comercial y se paga una licencia para fines comerciales

Links: librerí­a | Demo | Galerí­a | Tutorial

Live CSS Mod – Extensión de Chrome para ver el resultado de nuestra alteración de código en tiempo real

Si estamos alterando el código html, css o js de una página web seguramente tendremos que ir pulsando f5 para ir cargando los cambios realizados. Con la extensión que nos presentan ahora no es necesario, ya que monitoriza constantemente las alteraciones en los archivos para mostrar el resultado en tiempo rea.

De esta forma podemos ir programando con nuestro editor de textos favorito y tener abierta la página web que, como si fuera una animación, irá cambiando respondiendo a los cambios que realicemos en los archivos.

En la página de la extensión comentan algunos puntos débiles, más relacionados con los lí­mites impuestos por Google a la hora de acceder a directorios de archivos, aunque seguramente funcionará bien en la mayorí­a de los casos en los que uséis un servidor web para pruebas.

Link: Live Css mod

Introducción a JQuery Mobile


JQuery es un Framework Javascript, ampliamente usado por muchos desarrolladores de sitios webs. Este Framework sirve para incrementar la velocidad de desarrollo con Javascript, encapsulando muchas tareas comunes que se realizan cuando usamos el lenguaje JavaScript.
Por otro lado JQuery Mobile consiste en un framework javascript para creación de sitios webs optimizados para los dispositivos móviles más populares. Agrega una capa más al JQuery tradicional y busca suplir algunas necesidades que los programadores de dispositivos móviles padecen.
Antes de que aparecieran estas herramientas, los desarrolladores tení­an casi que programar para cada dispositivo en concreto. Esto provocaba muchas horas de trabajo para la creación y mantenimiento de estos sitios.
Con la aparición de JQuery Mobile, nos abstraernos de la lógica especí­fica de cada dispositivo y de este modo los programadores podemos dedicarnos a lo que realmente importa.
JQuery Mobile funciona bien. Si bien se trata de un proyecto muy nuevo, con pocos meses de vida, ya está dando mucho que hablar, afianzándose cada dí­a más como el framework estrella para la creación de sitios webs para teléfonos y tablets.

Caracterí­sticas de JQuery Mobile

Continúa leyendo «Introducción a JQuery Mobile»

Herramientas para comprimir CSS y Javascript

Los que trabajamos con proyectos web tenemos que estar atentos al tiempo que tardan nuestras páginas en ser abiertas por los navegadores.

Una de las técnicas más usadas para reducir este tiempo es el reducir el tamaño de los archivos css y Javascript, existiendo varias herramientas que podemos utilizar (aunque también hay como hacerlo desde el htaccess). Aquí­ os dejo con una lista publicada hace unos meses en devcurry.com

JSMin – borra comentarios y espacios en blanco en los archivos JS.

JSO (JavaScript Optimizer) – Permite gestionar los archivos JS y CSS controlando la cantidad de datos transmitidos entre servidor y cliente.

Packer ”“ Comprime JS desde la web.

JSCompress.com ”“ Usa JSMin o Packer para reducir el tamaño de los ficheros

CSS Compressor ”“ Comprime archivos CSS.

YUI Compressor ”“ Herramienta de Yahoo que promete ser la más segura y eficiente de todas.