blog.coconnut.com » PureMVC

JavaScript. PaintDrops Canvas HTML5.

Luis Estevez — Mon, 02 Jan 2012 17:58:12 +0000

Para cambiar el color del pincel tenemos que manipular los datos de la imagen que utilizamos como SpriteSheet. Esto provoca un error de seguridad en Firefox y Chrome si la aplicación se ejecuta en local. Por esto, si vas a utilizar alguno de estos navegadores para revisar este ejemplo sería conveniente que lo hicieras en un servidor local.

El selector de color lo hemos tomado ‘prestado’ de Mrdoob Mr.doob HitHub.

Por otro lado, para cambiar el valor de la densidad del pincel y la escala hemos recurrido al nuevo tipo ‘number’ que actualmente sólo soporta WebKit(Chrome, Safari) y Opera, por lo que si ves la aplicación desde otro navegador, estos campos aparecerán como inputs normales.

JavaScript. Galería de imágenes rotatoria.

Luis Estevez — Mon, 02 Jan 2012 17:53:42 +0000

Ver ejemplo >>

Descargar Proyecto JavaScript versión Mootools&PureMVC >>

Descargar Proyecto JavaScript versión jQuery >>

Para ver este ejemplo es altamente recomendable utilizar Chrome. Por otro lado, como recurro a CSS3 para aplicar los degradados y el efecto de reflejo de las imágenes, debe verse con un navegador que soporte degradados y transformaciones CSS3 (Internet Explorer 9, Opera 11, Firefox 3.5+ y Chrome). En el caso de IE9 hemos recurrido a dibujar los degradados a partir de archivos svg.

JavaScript. Visor Cubo 3D con Three.

Luis Estevez — Tue, 20 Dec 2011 13:13:57 +0000

Cuando empezamos con esto del 3D, una de las cosas que más cuesta es “ver” cómo se mueven los objetos el espacio. Para ayudar a aquellos que se inicien en esto de la web 3D, aquí va un ejemplo bastante simple. Se trata de un visor 3D en el que podemos mover un cubo en el espacio.

Hemos utilizado Three, desarrollado por MrDoob.

Es muy recomendable ver el ejemplo con el navegador Chrome.

Ver ejemplo >>

Descargar Código Fuente >>

Puedes mover/rotar 3 objetos enlazados jerárquicamente:

Principal (Representado por unos ejes)

–Secundario (Representado por unos ejes)

—-Cubo

El botón Reset coloca resetea las transformaciones de los tres objetos.

JavaScript. PureMVC Framework & Mootools

Luis Estevez — Mon, 12 Dec 2011 13:42:22 +0000

Un ejemplo de galería de imágenes utilizando PureMVC (JavaScript) y Mootools. Es una adaptación a JavaScript/PureMVC del ejemplo para ActionScript 3 que ya posteamos hace algún tiempo:

FrameWork Mate y Galería de Imágenes

Ver ejemplo JavaScript >>

Descargar Proyecto JavaScript >>

Mientras vemos si la plataforma Flash sobrevive a tanto ataque, aquí tenéis una posibilidad de reconversión a JavaScript. He utilizado PureMVC por ser un framework muy habitual en proyectos ActionScript y Mootools por permitirme trabajar con algo parecido a clases.

En la carpeta js he alojado los dos frameworks y en fw puedes encontrar las ¿clases? que he utilizado, clasificadas de forma similar a como estarían en un proyecto Modelo-Vista-Controlador ActionScript. Las he dividido en archivos .js independientes para que quede un poco más clara la estructura, pero no habría mayor problema en incorporar todo el código en un único archivo .js.

Un saludo, y espero que no me maten por ‘colar’ un post sobre JavaScript en Coconnut