|

Webéame: nuevo recurso para desarrollladores web

ByLuis

Imagen%202.pngAcaba de nacer Webéame, un clon de Digg en castellano dirigido a la comunidad de desarrolladores web. Va en la línea de Dzone aunque aún más especializado y dirigido al mundo web.
El diseño es agradable, aunque aún deben estar trabajando en el logotipo, y con interfaz habitual de este tipo de sitios. Creo que esta iniciativa es una gran noticia para la comunidad de desarrolladores hispanos. Enhorabuena a sus creadores.
Webéame
Vía / aNieto2K

Similar Posts

|

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

|

Mostrar iconos en los enlaces mediante Javascript

ByLuis

Hoy he visto en varios sitios cómo poner en los enlaces un icono del tipo de archivo al que se hace referencia. Algo parecido contamos hace ya tiempo, y al igual que en el ejemplo actual, no funciona para IE6, y aunque nos pese, aún hay muchas personas que siguen usando este navegador.

Una solución es realizarlo mediante Javascript, para lo cual tan solo deberemos incluir un pequeño script en nuestras páginas. El script tiene un array con expresiones regulares que detectan determinadas href y la url del icono para incluirlo en el estilo del enlace. Además existe una función que añade al evento onload del window una función que selecciona todos los enlaces, comprueba por cada enlace si cumple alguna de las expresiones regulares y si es así modifica el estilo con el icono correspondiente.

var listaiconos = new Array();
listaiconos[listaiconos.length] = new Array(/youtube\.com\/watch\?/, "icons/icon_film.gif");
listaiconos[listaiconos.length] = new Array(/sevenload\.com\/videos\//, "icons/icon_film.gif");
...
window.onload = function() {
var enlaces = document.getElementsByTagName("A");
for (var i=0; i<enlaces.length; i++) {
var ok = false;
for (var j=0; j<listaiconos.length && !ok; j++) {
if (enlaces[i].href.match(listaiconos[j][0])) {
enlaces[i].style.paddingRight = "20px";
enlaces[i].style.backgroundImage = "url("+listaiconos[j][1]+")";
enlaces[i].style.backgroundColor = "transparent";
enlaces[i].style.backgroundRepeat = "no-repeat";
enlaces[i].style.backgroundPosition = "right center";
ok = true;
}
}
}
}

Código

Vía / Intenta

Método para crear acortadores de URLs

ByLuis

Buen método para crear acortadores de URLs, el truco está en usar números en base36 (incluye todos los números y letras): http://dominio.com/258j

El número 248j se traducirá a base 10 y nos dará el id de la tabla que almancena las URLs (que tendrá una primary key numérica y preferiblemente autoincremental). Así, por ejemplo, 258j equivale a 100099, por lo que sólo habría que obtener la URL que tenga esa ID.

How URL shortening scripts work?

Vía / DZone

BackupMyBlog: copias de seguridad de nuestro blog

ByLuis

backupmyblog.pngPara aquellos que sean despistados y se les olvide hacer una copia de seguridad de su blog o que no sepan usar un cron para que se haga de forma automática, existe esta página web que nos realizará copias de seguridad de nuestra base de datos cada cierto intervalo (diario, semanal o mensual). Tan solo tendremos que introducir los datos de la cuenta FTP y detectará automáticamente el tipo de blog que usamos (como WordPress o MovableType) y realizará las copias de seguridad.
Servicio gratuito durante el periodo de test.
BackupMyBlog
Vía / Lifehacker