Fadomatic: añade transparecias a tus scripts

ByLuis

Fadomatic es un script que funciona los navegadores más importantes (IE, Gecko, Safari), que permite realizar transparecias disminuyendo el canal alpha progresivamente. Para mí, lo importante de este script es poder estudiar su funcionamiento, como para IE se usa el filtro alpha:

elemento.style.filter = "alpha(opacity="+opacidad+")";

Y como para los navegadores que sigue los estándares, usan el estilo opacity:

elemento.style.opacity = opacidad;

fadomatic.png

Fadomatic

Vía / Intenta

Similar Posts

| |

Prism: aplicaciones web en tu escritorio

ByLuis

prism.pngPrism es una nueva forma de entender las aplicaciones web, se trata de un punto intermedio entre una aplicación web y una aplicación de escritorio.
Mediante Webrunner podemos ejecutar aplicaciones web en nuestro escritorio. No se trata como en el caso de Adobe AIR y Microsoft Silverlight que pretender crear una alternativa de la web. Se trata de extraer del navegador aplicaciones web y ejecutarlas (mediante XUL) en nuestro escritorio, por lo que estas aplicaciones web podrán hacer uso de HTML, JavaScript, CSS, y <canvas>.
Una buena alternativa para las aplicaciones web que se hacen para empresas.
Prism
Gracias Dani por el aviso

OpenWFE: workflow engine para tus aplicaciones web

ByLuis

openwfe.pngOpenWFE es un motor de workflow (flujo de trabajo) open-source para ser usadas en las aplicaciones que realicemos.

Quizás, para aquellos que no sepan que es un motor de workflow, debamos antes empezar por explicar un poco de qué se trata un workflow. El workflow nos indica cómo estructurar las tareas que se deben realizar en nuestra aplicación. Nos muestra cómo se ejecutan las acciones, en que orden, que relación hay entre ellas, el control de qué usuarios ejecutan ciertas tareas, el flujo de información entre ellas y un seguimiento de estas.

openwfe2.png

Esta herramienta nos es muy útil cuando una aplicación tiene etapas o pasos a seguir, acciones concretas para cada paso y diferentes acciones para distintos perfiles de usuario. Por ejemplo, supongamos que tenemos una aplicación editorial, para controlar el proceso de la publicación de un libro habrá una serie de acciones a seguir: el autor entrega un primer capítulo, el editor lo recibe y lo admite como publicable o no, si se pretende publicar, avisará al escritor de que siga escribiendo el libro. En ese caso, el autor irá enviando versiones sucesivas, que irá recibiendo el editor, correctores y personas que aporten ideas. Cuando el libro esté finalizado, lo recibirá el corrector y luego se mandará a plublicar. Bueno, yo no tengo ni idea del proceso de publicación de un libro, pero el ejemplo creo que sirve para identificar las acciones que se ejecutan, el orden , los usuarios que intervienen y el intercambio de información (en este caso el libro).

Aunque, yo personalmente nunca he trabajado con OpenWFE, ya que me ha tocado usar Oracle Workflow, veo esta engine muy buena, entre otras cosas porque aunque está escrita en Java, tiene librerías para Python, Perl, Ruby, C# (.NET), PHP y pnuts, a parte de ser tambien una BPM.

OpenWFE

Más información

|

Clipping de vídeo usando HTML5 y SVG en Firefox4

ByLuis

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer

|

‘Bocadillos’ en tu web

ByLuis

Albert Lanchas nos ofrece un script que me ha gustado bastante en el que se muestran ‘bocadillos’ con imágenes dentro. El bocadillo se adapta al tamaño de la imagen y su aspecto se puede cambiar mediante CSS.
bubble.png

Es necesario tener instalado prototype para su funcionamiento, y su uso es bastante sencillo, incluir el script, la librería prototype, la css e incluir la siguiente línea para que funcione:

<a href="imagen.jpg" rel="bubble"><img src="images/bubble.png"/></a>

Yo como unica pega, intentaría hacer la sombra con una imagen png, para poder usar la transparencia que nos ofrece, aunque en IE6 no funcione.

Bubble

Vía / Fresqui

CodeCodex: reutilizar código

ByLuis

codecodex.pngCodeCodex es una wiki que guarda distintos trozos de código en varios lenguajes de programación para que podamos acceder a ellos y reutilizarlos.

La filosofía es no reinventar la rueda y reutilizar código ya creado. Con CodeCodex podremos buscar y usar código ya creado, aprender nuevos algoritmos y ayudar a la comunidad de desarrolladores con tu propio código.

Es curioso ver el Hola Mundo en los diferentes tipos de programación, por ejemplo ensamblador.

    .model tiny
.data
message    db    'Hello, World!'
.code
org 100h
start:
mov ah,9
mov dx,offset message
int 21h
ret
end start

CodeCodex

Vía / Dzone