Hacer un botón de ‘Ver código fuente’
Ejemplo bastante completo que nos explica cómo hacer un botón que nos permite mostrar el código fuente mediante javascript y CSS.
Ejemplo bastante completo que nos explica cómo hacer un botón que nos permite mostrar el código fuente mediante javascript y CSS.
A simple jQuery plugin to get albums and images from Picasa without the need for PHP, Ruby, or any other server side language. Makes it easy to create a simple, dynamic, free, client-side-only image gallery. …
Interesante script que usa canvas para detectar rostros en las fotografías. Se basa en openCV y en el post de John Resig para evitar un captcha.
Permite la opción de reconocer una cara o varias caras, este último lo he probado con una foto y no me ha funcionado, pero como bien dice el autor, aún tiene que mejorar más el script.
Interesante opción para servicios como Facebook o Flickr para sus opciones de asociar elementos (usuarios, comentarios, …) a las fotografías. También es útil para avisar de que no se ha subido una cara cuando alguien cambia de avatar.
Face detection in javascript + canvas
Vía / @rafabayona
Vamos a explicar un pequeño script para mostrar en una capa el mapa del sitio web usando Ajax (en este caso la librerÃa jQuery).
Un efecto parecido lo podemos encontrar en periódicos online para mostrar las diferentes secciones que se pueden visitar. Por ejemplo lo podemos ver en elmundo.es (en la cabecera) y en elpais.com (en el pie de página).
Se trata de que cuando se pasa el ratón sobre el link, se muestra un menú con las secciones del periódico (mapa del sitio en nuestro caso).
Como hemos explicado en otras ocasiones de cómo usar Ajax, esta vez vamos a utilizar la librerÃa jQuery para facilitar la labor. El que sea un mapa del sitio es debido a que de cara a SEO los buscadores indexan más facilmente nuestro sitio.
También hemos pensado en la accesibilidad, para ello el enlace nos lleva a una página que muestra el mapa del sitio. Esta página que deberá ser dinámica, lo que hace es incluir en la parte del HTML donde se muestra la información principal (suponiendo que hay navegación y paneles laterales) el contenido de otro archivo, que es el que tiene el mapa del sitio. Este último archivo es el mismo que mediante Ajax se carga en la capa que se muestra en el mouseover del enlace.
Supongamos que tenemos dentro de nuestra página, el enlace en cuestión y una capa que estará oculta inicialmente mediante CSS:
<p><a href="paginasecciones.php" id="secciones">Secciones</a></p>
<div id="marco"></div>
También disponemos de dos páginas, una que muestra el mapa del sitio (secciones.html) y otra que incluye a la primera dentro de su contenido (paginasecciones.php), en cuyo código deberÃa haber la siguiente función:
<?php require('secciones.html'); ?>
Ahora tan solo nos falta en el onload del window añadir la funcionalidad necesaria para ocultar la capa, y añadir al enlace el evento onmouseover para cargar el contenido de la capa y mostrarla cuando se pose el ratón en el enlace, y el evento onmouseout para ocultar la capa cuando salgamos del enlace.
window.onload = function() {
var obj = $("div#marco");
obj.hide();
$("a#secciones").mouseover(
function() {
var capa = $("div#marco");
// Para evitar recargar la pagica cada vez que se muestra
if (!capa.attr("cargado")) {
capa.load("secciones.html");
capa.attr({cargado: true});
}
capa.show().slideDown("slow");
} );
$("a#secciones").mouseout(
function() {
var capa = $("div#marco");
capa.slideUp("slow");
} );
}
El código es muy sencillo, lo único necesario de explicar para entenderlo es lo siguiente: