Etiqueta: js

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

Publicado el

por Juan Diego Polo

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

Publicado el

por Juan Diego Polo

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

Publicado el

por Juan Diego Polo

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

Publicado el

por Juan Diego Polo

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

Publicado el

por Fabián Figueredo


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

Publicado el

por Juan Diego Polo

En el mundo de la tecnología y el desarrollo web, la velocidad de carga de las páginas es un factor crítico a considerar. Los profesionales que trabajamos en proyectos web sabemos que el tiempo que una página web tarda en abrirse en los navegadores puede tener un impacto significativo en la experiencia del usuario y, en última instancia, en el éxito del sitio.

Para abordar este desafío, existen diversas técnicas y herramientas disponibles, y una de las más utilizadas es la optimización del tamaño de los archivos CSS y JavaScript. Reducir la cantidad de datos que se deben transferir desde el servidor al cliente puede acelerar de manera significativa la carga de una página web. A continuación, vamos a explorar algunas de las herramientas más comunes que los desarrolladores web pueden emplear para llevar a cabo esta optimización.

JSMin – Esta herramienta es ampliamente conocida por su capacidad para reducir el tamaño de los archivos JavaScript. JSMin realiza dos tareas principales: elimina los comentarios y elimina los espacios en blanco innecesarios en los archivos JS. Al eliminar estos elementos, se reduce el tamaño del archivo, lo que a su vez agiliza la descarga y ejecución del código en el navegador del usuario.

JSO (JavaScript Optimizer) – JSO es otra herramienta esencial en el arsenal de un desarrollador web. Permite gestionar de manera eficiente los archivos JavaScript y CSS, permitiendo un mayor control sobre la cantidad de datos que se transmiten entre el servidor y el cliente. Esto es crucial para minimizar los tiempos de carga de una página web.

JSCompress.com – Esta plataforma en línea ofrece una solución rápida y conveniente para reducir el tamaño de los archivos JavaScript. Utiliza técnicas como JSMin o Packer para comprimir los archivos y disminuir su huella, lo que mejora la velocidad de carga de la página.

CSS Compressor – La optimización de archivos CSS es igualmente importante. CSS Compressor se dedica a comprimir archivos CSS, eliminando redundancias y espacios en blanco. De esta manera, se asegura que los estilos se apliquen de manera eficiente, lo que contribuye a una experiencia de usuario más fluida.

YUI Compressor – Desarrollada por Yahoo, YUI Compressor es ampliamente considerada como una de las herramientas más seguras y eficientes para la optimización de archivos CSS y JavaScript. Ofrece una amplia gama de opciones de configuración y garantiza una reducción significativa en el tamaño de los archivos sin comprometer la funcionalidad.

Para los profesionales del desarrollo web, la optimización de los archivos CSS y JavaScript es una práctica esencial. Las herramientas mencionadas anteriormente, como JSMin, JSO, JSCompress.com, CSS Compressor y YUI Compressor, son recursos valiosos para garantizar que las páginas web se carguen de manera rápida y eficiente, brindando a los usuarios una experiencia óptima. La elección de la herramienta adecuada dependerá de las necesidades específicas del proyecto, pero todas ellas desempeñan un papel fundamental en la búsqueda de un rendimiento web óptimo.