destacados

Gabriel Da Silva

Portafolio del ilustrador y director de arte brasileño, aunque afincado en Madrid, Gabriel Da Silva.

B&W Helmut Newton

Selección de fotografías en blanco y negro de uno de los fotógrafos más conocidos de las últimas décadas, Helmut Newton.

Judith Erwes

Fotógrafa afincada en Londres con un estilo que combina la moda, el humor y la estética retro.

Jody Rogac

Nacida en Inglaterra y criada en Canadá, Jody Rogac en la actualidad vive y trabaja en Brooklyn. Sus trabajo ha obtenido diversos galardones.

Publicaciones

jQuery: Mostrar el último Tweet con JSON

, , 05/02/2012 19:43:02

El siguiente snippet permite extraer el último tweet mediante jQuery y JSON.

$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
     $("#twitter").html(data[0].text);
});

Donde username es el nombre de usuario del que deseamos extraer el último tweet. Por ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tweet</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("http://twitter.com/statuses/user_timeline/webintenta.json?callback=?", function(data) {
     $("#twitter").html(data[0].text);
});
});	
</script>
<style type="text/css">
#twitter{
	padding:5px;
    font-family: Arial, Helvetica, Sans-serif;
	font-size:13px;
	color:#666;
	background:#E8E8E8;
	border:1px solid #CCC;
    width:300px;
    margin:0 auto;
}
</style>
</head>
<body>
<div id="twitter"></div>
</body>
</html>

Ver ejemplo en funcionamiento » »

Visto en CSS Tricks » »

Javascript: mostrar el contenido de un objeto

, , 03/02/2012 19:30:08

Para imprimir el contenido completo de un objeto, en Firefox, podemos utilizar la siguiente instrucción:

alert(object.toSource());

También se puede acceder a todos los elementos de un objeto mediante un bucle foreach. La siguiente función ImprimirObjeto monstrará un alert() que muestra todas las propiedades y los valores respectivos.

function ImprimirObjeto(o) {
  var salida = '';
  for (var p in o) {
    salida += p + ': ' + o[p] + '\n';
  }
  alert(salida);
}

Por ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>imprimir objeto</title>
<script type="text/javascript">
function ImprimirObjeto(o) {
  var salida = '';
  for (var p in o) {
    salida += p + ': ' + o[p] + '\n';
  }
  alert(salida);
}
var Objeto = {'algo1': 1, 'algo2': 2};
</script>
</head>
<body>
<a href="javascript:ImprimirObjeto(Objeto);">mostrar</a>
</body>
</html>

Ver ejemplo en funcionamiento » »

Obtener un color aleatorio con PHP

, 01/02/2012 19:26:03

La siguiente función permite obtener un color aleatorio en formato hexadecimal.

function randomColor() {
    $str = '#';
    for($i = 0 ; $i < 6 ; $i++) {
        $randNum = rand(0 , 15);
        switch ($randNum) {
            case 10: $randNum = 'A'; break;
            case 11: $randNum = 'B'; break;
            case 12: $randNum = 'C'; break;
            case 13: $randNum = 'D'; break;
            case 14: $randNum = 'E'; break;
            case 15: $randNum = 'F'; break;
        }
        $str .= $randNum;
    }
    return $str;
}

Ver ejemplo en funcionamiento » »
Visto en PHP Snippets » »

CraftySlide

, 30/01/2012 19:56:07

CraftySlide es un plugin para jquery que nos permite crear un slideshow de un modo muy sencillo. Basta con un HTML similar al siguiente:

<div id="slideshow">
         <ul>
            <li>
              <img src="images/image1.jpg" title="Lorem ipsum dolor sit amet" />
            </li>
            
            <li>
              <img src="images/image2.jpg" title="Lorem ipsum dolor sit amet" />
            </li>
            
            <li>           
              <img src="images/image3.jpg" title="Lorem ipsum dolor sit amet" />
            </li>	                         
          </ul>
</div>

Incluir los ficheros javascript y CSS incluidos en el paquete del plugin, junto con jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script src="js/craftyslide.js"></script>
<link rel="stylesheet" href="css/craftyslide.css" />

e inicializar el carrusel de imágenes:

$(document).ready(function() {
	$("#slideshow").craftyslide();
});

Ver ejemplo en funcionamiento » »
Craftyslide » »

Arctext.js: Plugin para curvar texto con CSS3 y jQuery

, , 30/01/2012 14:13:15

CSS3 nos permite rotar letras, pero es bastante complicado organizar cada letra a lo largo de un trazado curvo. Arctext.js es un plugin de jQuery que nos permite hacer exactamente eso de un modo sencillo. Basado en Lettering.js, calcula la rotación correcta de cada letra y distribuye los caracteresm de un modo equidistante en el arco.

Curvar Texto CSS3 JQuery

Arctext.js » »

Birthe Piontek

28/01/2012 15:32:33

Los trabajos de esta fotógrafa han aparecido en publicaciones como el Magazine del New York Times, Esquire o Wired, además de haber recibido varios galardones.

Birthe Piontek

Birthe Piontek

Birthe Piontek

Birthe Piontek

Birthe Piontek » »

Cita 29-01-2012

28/01/2012 09:34:02

La cuestión no es quién me va a dejar, es quién me va a parar.

Ayn Rand

Caman.js

, , 28/01/2012 08:59:22

Caman.js es una librería de javascript que nos permite la manipulación de imágenes usando el objeto canvas de HTML. Cabe destacar que es una librería independiente y que también puede ser usada junto a otras librerías como jQuery o Mootools sin problema.

Caman.js » »

CSSrefresh: actualizar automáticamente los archivos CSS

, 27/01/2012 19:12:34

CSSrefresh es un pequeño archivo de javascript que controla los archivos CSS incluidos en una página Web. En el momento en que se guarda un archivo CSS, es capaz de implementar los cambios sobre la web, sin tener que actualizar el navegador.

CSS Refresh

Su uso es muy sencillo, basta con incluir la librería después de los ficheros CSS que deseemos controlar. Por ejemplo:

<head>
    <link rel="stylesheet" type="text/css" href="css/estilos.css" />
    <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

CSSrefresh » »

Páginas: 1 2 3 4 Siguiente >