Diseño

Compilado de enlaces

¡Hola gente!

Otra vez por acá, con enlaces para guardar para la posteridad:

¡Espero que les sea de utilidad!

Un abrazo grande,
Pedro

Espiar el historial de usuarios con Javascript

¡Hola Amigos!

Este código sirve para hacer eso que dice el título. No se olviden de incluir dojo en su script para que esto funcione.

Edición: Para aquellos usuarios que solo estén interesados en lograr la funcionalidad, y no les importe estar familiarizados con el funcionamiento interno de este asunto, dejo a continuación un enlace a una librería que lo hace todo por nosotros: Social History Javascript

<style>
a.checkme            { color:#00ff00; }
a.checkme:visited    { color:#ff0000; }
.highlight            { background:#fffea1; }
</style>

<script type="text/javascript">
(function(d,$,$$) {
    d.ready(function() {
        d.connect($('tell-me'),'onclick',function() {
            var sitesFound = 0;
            $$('a.checkme').forEach(function(node) {
                var color = d.style(node,'color');
                if(color == '#ff0000' || color == 'rgb(255, 0, 0)') {
                    d.addClass(node,'highlight');
                    sitesFound++;
                }
            });
            //output stuff
            if(sitesFound) {
                alert('Te encontre en  ' + sitesFound + ' ajaja que bueno');
            }
            else {
                alert('Nada que ver');
            }
        });
    });           
})(dojo,dojo.byId,dojo.query);
</script>


<ul>
<li><a href="http://css-tricks.com" class="checkme">CSS Tricks</a></li>
<li><a href="http://snook.ca" class="checkme">Snook</a></li>
<li><a href="http://cnn.com" class="checkme">CNN</a></li>
<li><a href="http://digg.com" class="checkme">Digg</a></li>
<li><a href="http://flickr.com" class="checkme">Flickr</a></li>
<li><a href="http://php.net" class="checkme">PHP.Net</a></li>
<li><a href="http://reddit.com" class="checkme">Reddit</a></li>
<li><a href="http://yahoo.com" class="checkme">Yahoo!</a></li>
<li><a href="http://google.com" class="checkme">Google!</a></li>
<li><a href="http://msn.com" class="checkme">MSN</a></li>
<li><a href="http://gmail.com" class="checkme">Gmail</a></li>
<li><a href="http://imdb.com" class="checkme">IMDB</a></li>
<li><a href="http://mootools.net" class="checkme">MooTools</a></li>
<li><a href="http://jquery.com" class="checkme">jQuery</a></li>
<li><a href="http://wordpress.org" class="checkme">Wordpress</a></li>
<li><a href="https://droope.wordpress.com" class="checkme">El blog de drope</a></li>
<li><a href="http://dlisted.com" class="checkme">DListed</a></li>
<li><a href="http://foxnews.com" class="checkme">Fox News</a></li>
<li><a href="http://dzone.com" class="checkme">DZone</a></li>
<li><a href="http://nettuts.com" class="checkme">NetTuts</a></li>
<li><a href="http://youtube.com" class="checkme">YouTube</a></li>
<li><a href="http://diggnation.com" class="checkme">Diggnation</a></li>
<li><a href="http://collegehumor.com" class="checkme">College Humor</a></li>
<li><a href="http://facebook.com" class="checkme">Facebook</a></li>
<li><a href="http://myspace.com" class="checkme">MySpace</a></li>   
</ul>

Es algo tan sencillo como inteligente: Mira de que color colorearía un browser un enlace, y a raiz de eso determina si existe en el historial o no.

¡Tiene muchos usos potenciales!

Espero que (no) les sea de utilidad.

Un saludo,
Pedro

Los principios perdidos de el diseño

Estimados lectores:

Escribo para ofrecer un link a un sitio web que nos explica los principios que hemos de seguir para lograr que nuestro diseño web sea agradable a los ojos de nuestros visitantes.

Se listan y ofrecen ejemplos visuales de los siguientes fundamentos básicos:

  • Balance (simetrico, asimetrico, radial)
  • Contraste (grande y pequeño, suave y áspero, grueso y fino, claro y oscuro, orgánico y geométrico)
  • Énfasis y subordinación
  • Fuerzas direccionales
  • Proporción
  • Escala
  • Repetición y ritmo
  • Unidad en la variedad

¡Espero que sea de utilidad! aquí está el enlace.

Saludos,
Droope

Calcular colores complementarios

Hola gente,

Muchas veces, cuando estamos intentando terminar con los detalles finales de un sitio web, nos damos cuenta que necesitamos un color rojo para resaltar un error del usuario, o un color azul para clarificar algún asunto pendiente, y no solo eso, nos damos cuenta de que no hay esperanza de que nosotros mismos encontremos un color que no se vea espantoso.

Eso sucede, mis queridos amigos, porque apestamos buscando colores complementarios. La buena noticia, sin embargo, es que lo que muchos artistas y grandes pintores de otros tiempos lograban con tiempo y con talento, hoy lo podemos automatizar con software: software tan inteligente que es capaz de encontrar colores complementarios, inversos, reflexivos, rojos, amarillos y azules y todo eso.

Encontré en mi camino, la herramienta ideal para calcular colores complementarios. Estos colores son calculados a través de alguna oscura operación matemática, y por alguna razón, sin posibilidad de fallo, son agradables para nuestros ojos.

¿Útil, verdad?

Mis dos preferidos son estos:

Un abrazo grande,
Pedro