Esta API consta de 2 interfaces:

• SpeechReco(), permite grabar la voz del usuario directamente desde el navegador.
• TTS(), permite convertir texto en voz directamente.

La siguiente es una muestra de cómo se podrian adaptar nuestro site a estas tecnologías:

SpeechReco

<script type="text/javascript">
	var sr = new SpeechReco(); // Nuevo interface
	sr.onresult = function(event) {
	  var q = document.getElementById("q");
	  q.value = event.result[0].transcript;
// Devolvemos la transcripción del mensaje
	  q.form.submit();
	}
  </script>
  <form action="http://www.example.com/search">
  <input type="search" id="q" name="q"/>
  <input type="button" value="Speak" onclick="sr.start()"/>
// Iniciamos la grabación
  </form>

 TTS

<script type="text/javascript">
	 var tts = new TTS(); //Nuevo interface
	 function speak(text, lang) {
		tts.text = text; // Indicamos el texto
		tts.lang = lang; // Indicamos el idioma
		tts.play(); // Hacemos hablar a nuestro navegador
	 }
	 speak("Hello world.", "en-US"); // Hola mundo
  </script>

Podemos consultar los datos que obtendremos introduciendo la siguiente URL directamente en el navegador “http://api.wipmania.com/jsonp?callback=?” Entre otros parámetros obtendremos: latitud, longitud, zoom, dirección, ciudad, país, códido del país y región.

Por último, utilizando JSON los recuperamos con jQuery

<script src=”http://code.jquery.com/jquery-latest.js”></script>
<script>
$.getJSON(‘http://api.wipmania.com/jsonp?callback=?’, function (data) {
alert(‘País: ‘ + data.address.country);
});
</script>

Al ser una petición SQL bastante grande, debemos utilizar la API Transients, de forma similar a como la utilizamos en la función wp_list_sites().

Estos son los pasos para obtener los artículos recientes de nuestra red de blogs:

Añadir la función wp_recent_across_network() al archivo functions.php de nuestro theme.

/**
 * Lista de entradas recientes en toda la red Multisitio
 *
 * @uses get_blog_list(), get_blog_permalink()
 *
 * @param int $size El número de resultados a obtener
 * @param int $expires Segundos hasta que expire la cache transient
 * @return object Contiene el blog_id, post_id, post_date y post_title
 */
function wp_recent_across_network( $size = 10, $expires = 7200 ) {
   if( !is_multisite() ) return false;

   // Se cachean los resultados con la API Transients de WordPress
   // Obtenemos una copia existente de nuestros datos transient
   if ( ( $recent_across_network = get_site_transient
( 'recent_across_network' ) ) === false ) {

      // Si no hay transient regeneramos los datos y
guardamos una nueva transient
      // Preparamos la query SQL con $wpdb
      global $wpdb;

      $base_prefix = $wpdb->get_blog_prefix(0);
      $base_prefix = str_replace( '1_', '' , $base_prefix );

      // A causa de que la función get_blog_list()
está actualmente abandonada
      // debido al alto consumo de recursos usaremos
      // $wpdb para ejecutar nuestra query SQL. Como la query puede
      // consumir mucha memoria almacenaremos los resultados
usando la API Transients
      if ( false === ( $site_list =
get_site_transient( 'multisite_site_list' ) ) ) {
         global $wpdb;
         $site_list = $wpdb->get_results
( $wpdb->prepare('SELECT * FROM wp_blogs ORDER BY blog_id') );
         set_site_transient( 'multisite_site_list', $site_list, $expires );
      }
      $limit = absint($size);
      // Unificamos los resultados de wp_posts
en todos los sitios del Multisitio en un solo resultado con MySQL "UNION"
      foreach ( $site_list as $site ) {
         if( $site == $site_list[0] ) {
            $posts_table = $base_prefix . "posts";
         } else {
            $posts_table = $base_prefix . $site->blog_id . "_posts";
         }

         $posts_table = esc_sql( $posts_table );
         $blogs_table = esc_sql( $base_prefix .
'<a target="_blank" title="blogs"
href="%20http://semanticae.es">blogs</a>' );

         $query .= "(SELECT $posts_table.ID,
$posts_table.post_title, $posts_table.post_date, $blogs_table.blog_id FROM
$posts_table, $blogs_tablen";
         $query .= "tWHERE $posts_table.post_type = 'post'n";
         $query .= "tAND $posts_table.post_status = 'publish'n";
         $query .= "tAND $blogs_table.blog_id = {$site->blog_id})n";

         if( $site !== end($site_list) )
            $query .= "UNIONn";
         else
            $query .= "ORDER BY post_date DESC LIMIT 0, $limit";
      }

      // Un poco de limpieza y ejecutamos la query
      $query = $wpdb->prepare($query);
      $recent_across_network = $wpdb->get_results( $query );

      // Ajustamos la cache Transients para que espire cada dos horas
      set_site_transient( 'recent_across_network',
$recent_across_network, 60*60*2 );
   }
   // Damos formato a la salida HTML
   $html = '
    '; foreach ( $recent_across_network as $post ) { $html .= '
    ' . $post->post_title . '
    '; } $html .= '
';
   return $html;
}

Nos aseguramos de comprobar el valor return en la salida HTML para evitar conflictos con instalaciones que no sean multisitio.

Por último, añadimos el siguiente código con el que recuperar los datos de la función en nuestro site:

<?php
// Mostramos las entradas recientes de toda la red
$recent_network_posts = wp_recent_across_network();
if( $recent_network_posts ):
?>
<?php echo $recent_network_posts; ?>
<?php endif; ?>

Este es el aspecto de la ficha que conseguiremos mostrar con la siguiente API (ver demostración de la ficha)

Por suerte es muy sencilla de utilizar: enviamos el gamertag ID de usuario en Xbox Live) y el tipo de respuesta que deseas:

// Configuración (aquí debes reemplazar “gamer” por el gamertag que desees)
$gamertag = ‘gamer’;
$profileUrl = ‘http://api.xboxleaders.com/v2/?format=json&gamertag=’.$gamertag;
// Información sobre gamertag
$info = file_get_contents($profileUrl);
// Para JSON
$json = json_decode($info);
$user = $json->user;

La respuesta se mostrará de la siguiente forma:

{
“user”:{
“gamertag”:”gamer”,
“is_valid”:1,
“profile_link”:”http:\/\/live.xbox.com\/member\/gamer”,
“launch_team”:{
“xbl”:0,
“nxe”:0,
“kinect”:0
},
“account_status”:”Gold”,
“gender”:”Male”,
“is_cheater”:0,
“online”:0,
“online_status”:”Last seen 2 minutes ago playing Xbox.com”,
“avatars”:{
“gamer_tile”:”http:\/\/image.xboxlive.com\/global\/t.fffe07d1\/tile\/0\/2000b”,
“small_gamerpic”:”http:\/\/avatar.xboxlive.com\/avatar\/gamer\/avatarpic-s.png”,
“large_gamerpic”:”http:\/\/avatar.xboxlive.com\/avatar\/gamer\/avatarpic-l.png”,
“body_gamerpic”:”http:\/\/avatar.xboxlive.com\/avatar\/gamer\/avatar-body.png”
},
“reputation”:100,
“gamerscore”:300,
“location”:”Madison, WI, US”,
“motto”:”Watch your head.”,
“name”:”David Walsh”,
“bio”:”There is, and only can be, Call of Duty.”,
“recent_games”:{
“1″:{
“title”:”Modern Warfare® 3″,
“tid”:1096157387,
“marketplace_url”:”http:\/\/marketplace.xbox.com\/Title\/1096157387″,
“compare_url”:”http:\/\/live.xbox.com\/en-US\/GameCenter\/Achievements?title=1096157387&compareTo=gamer”,
“image”:”http:\/\/tiles.xbox.com\/tiles\/63\/-y\/0mdsb2JhbA9ECgQJGgYfViwhL2ljb24vMC84MDAwIAAAAAAAAP3df-Q=.jpg”,
“large_boxart”:”http:\/\/tiles.xbox.com\/consoleAssets\/415608cb\/en-US\/largeboxart.jpg”,
“small_boxart”:”http:\/\/tiles.xbox.com\/consoleAssets\/415608cb\/en-US\/smallboxart.jpg”,
“last_played”:”1321660800″,
“earned_gamerscore”:0,
“available_gamerscore”:1000,
“earned_achievements”:0,
“available_achievements”:50,
“percentage_complete”:0
},
“2″:{
“title”:”Call of Duty ELITE”,
“tid”:1096157336,
“marketplace_url”:”http:\/\/marketplace.xbox.com\/Title\/1096157336″,
“compare_url”:”http:\/\/live.xbox.com\/en-US\/GameCenter\/Achievements?title=1096157336&compareTo=gamer”,
“image”:”http:\/\/tiles.xbox.com\/tiles\/S9\/J4\/0mdsb2JhbA9ECgQJGgYfVlZbL2ljb24vMC84MDAwIAAAAAAAAP1X0lQ=.jpg”,
“large_boxart”:”http:\/\/tiles.xbox.com\/consoleAssets\/41560898\/en-US\/largeboxart.jpg”,
“small_boxart”:”http:\/\/tiles.xbox.com\/consoleAssets\/41560898\/en-US\/smallboxart.jpg”,
“last_played”:”1321488000″,
“earned_gamerscore”:0,
“available_gamerscore”:0,
“earned_achievements”:0,
“available_achievements”:0,
“percentage_complete”:0
},
“3″:{
“title”:”Call of Duty Black Ops”,
“tid”:1096157269,
“marketplace_url”:”http:\/\/marketplace.xbox.com\/Title\/1096157269″,
“compare_url”:”http:\/\/live.xbox.com\/en-US\/GameCenter\/Achievements?title=1096157269&compareTo=gamer”,
“image”:”http:\/\/tiles.xbox.com\/tiles\/RX\/0w\/1Wdsb2JhbA9ECgQJGgYfVlpWL2ljb24vMC84MDAwIAAAAAAAAPoffVo=.jpg”,
“large_boxart”:”http:\/\/tiles.xbox.com\/consoleAssets\/41560855\/en-US\/largeboxart.jpg”,
“small_boxart”:”http:\/\/tiles.xbox.com\/consoleAssets\/41560855\/en-US\/smallboxart.jpg”,
“last_played”:”1320710400″,
“earned_gamerscore”:0,
“available_gamerscore”:1700,
“earned_achievements”:0,
“available_achievements”:71,
“percentage_complete”:0
},
“4″:{
“title”:”FIFA 10″,
“tid”:1161889980,
“marketplace_url”:”http:\/\/marketplace.xbox.com\/Title\/1161889980″,
“compare_url”:”http:\/\/live.xbox.com\/en-US\/GameCenter\/Achievements?title=1161889980&compareTo=gamer”,
“image”:”http:\/\/tiles.xbox.com\/tiles\/ak\/w3\/1Wdsb2JhbA9ECgQNGwEfVi0gL2ljb24vMC84MDAwIAAAAAAAAPoYTHU=.jpg”,
“large_boxart”:”http:\/\/tiles.xbox.com\/consoleAssets\/454108bc\/en-US\/largeboxart.jpg”,
“small_boxart”:”http:\/\/tiles.xbox.com\/consoleAssets\/454108bc\/en-US\/smallboxart.jpg”,
“last_played”:”1289088000″,
“earned_gamerscore”:15,
“available_gamerscore”:1250,
“earned_achievements”:1,
“available_achievements”:54,
“percentage_complete”:1
},
“5″:{
“title”:”Rock Band”,
“tid”:1161889833,
“marketplace_url”:”http:\/\/marketplace.xbox.com\/Title\/1161889833″,
“compare_url”:”http:\/\/live.xbox.com\/en-US\/GameCenter\/Achievements?title=1161889833&compareTo=gamer”,
“image”:”http:\/\/tiles.xbox.com\/tiles\/IE\/Td\/0Gdsb2JhbA9ECgQNGwEfVl1aL2ljb24vMC84MDAwIAAAAAAAAP-yRD8=.jpg”,
“large_boxart”:”http:\/\/tiles.xbox.com\/consoleAssets\/45410829\/en-US\/largeboxart.jpg”,
“small_boxart”:”http:\/\/tiles.xbox.com\/consoleAssets\/45410829\/en-US\/smallboxart.jpg”,
“last_played”:”1302912000″,
“earned_gamerscore”:10,
“available_gamerscore”:1000,
“earned_achievements”:1,
“available_achievements”:50,
“percentage_complete”:2
}
}
}
}

Como podemos ver, podemos obtener la información básica de la cuenta (nombre de usuario, bio, avatar, etc) pero también existe otra mucha información acerca de los juegos que el usuario ha estado jugando recientemente. También puede obtener enlaces a imágenes tanto del usuario como de estos juegos.

Este es un ejemplo de cómo crear una gamecard con la ficha del perfil Xbox Live de un usuario:

<style>
.gamercard {
border: 1px solid #bdbec1;
padding: 10px;
width: 600px;
font-family: arial, sans-serif;
font-size: 12px;
color: #bdbec1;
background-image: -webkit-linear-gradient(#ddd, #fff, #e9fdce);
background-image: -moz-linear-gradient(top, #ddd, #fff, #e9fdce);
background-image: -ms-linear-gradient(#ddd, #fff, #e9fdce);
background-image: -o-linear-gradient(#ddd, #fff, #e9fdce);
background-image: linear-gradient(#ddd, #fff, #e9fdce);
}
.gamercard img {
display: block;
}
.gamercard .avatar {
float: right;
width: 150px;
height: 300px;
margin: -60px 0 0 50px;
}
.gamercard h1 {
font-weight: normal;
}
.gamercard h1 img {
display: inline-block;
padding-right: 10px;
width: 24px;
height: 24px;
}
.gamercard h1 a {
text-decoration: none;
}
.gamercard h1 a:hover {
background: #bbe6a6;
color: #333;
}
.gamercard h2 {
color: #111;
font-size: 16px;
font-weight: normal;
margin-top: 15px;
}
.gamercard ul {
list-style-type: none;
}
.gamercard ul li {
padding-top: 8px;
}
.gamercard ul li strong {
color: #666;
}
.gamercard ul.games li {
display: inline-block;
margin-right: 20px;
text-align: center;
font-weight: bold;
width: 85px;
vertical-align: top;
}
.gamercard ul.games li img {
margin: 0 auto;
width: 85px;
}
.gamercard a {
color: #78bb58;
}
.gamercard .clear {
clear: both;
}
</style>
<!– gamercard –>
<div>
<!– profile image –>
<img src=”<?php echo $user->avatars->body_gamerpic; ?>” alt=”<?php echo $user->gamertag; ?>” />
<!– gamer name –>
<h1><img src=”<?php echo $user->avatars->gamer_tile; ?>” alt=”<?php echo $user->gamertag; ?>” /><a href=”<?php echo $user->profile_link; ?>”><?php echo $user->gamertag; ?></a></h1>
<!– personal info –>
<h2>The Legend</h2>
<ul>
<li><strong>Name:</strong> <?php echo $user->name; ?></li>
<li><strong>Bio:</strong> <?php echo $user->bio; ?></li>
<li><strong>Location:</strong> <?php echo $user->location; ?></li>
<li><strong>Gender:</strong> <?php echo $user->gender; ?></li>
<li><strong>Motto:</strong> <?php echo $user->motto; ?></li>
<li><strong>Online:</strong> <?php echo $user->online ? “Online” : “Offline”; ?></li>
<li><strong>Status:</strong> <?php echo $user->online ? $user->online_status : “(none)”; ?></li>
</ul>
<!– recent games –>
<h2>Recent Games</h2>
<ul>
<?php foreach($user->recent_games as $game): ?>
<li><a href=”<?php echo $game->marketplace_url; ?>”><img src=”<?php echo $game->small_boxart; ?>” alt=”<?php echo $game->title; ?>” /></a><br /><?php echo $game->title; ?></li>
<?php endforeach; ?>
</ul>
<div></div>
</div>

También podemos utilizarlo desde su web, donde se nos ofrece un cargador de imagenes o ruta para imagenes ya alojadas en internet, obtenemos de una pestaña los resultados del porcentaje comprimido y espacio que nos ahorramos.

Otra forma de utilizarlo es con la API modificada smushit.net que lo que hace es simplificar la API existente eliminando los datos poco útiles.

Forma de utilizar la API simplificada de smushit:

Después de pasarle la siguiente URL con nuestra imagen.

http://smushit.net/?img=http://www.zonaw.com/wp-content/themes/

Zengi/images/logo_negro_ZonaW.png

Obtendremos un código con la imagen ya optimizada (recordar descargar la imagen y alojarla en un servidor propio).

http://ysmushit.zenfs.com/results/11a6f06f/smush/wp-content/themes/
Zengi/images/logo_negro_ZonaW.png

Una buena idea para muchos blogs o páginas web es recoger todos los tweets de una categoría determinada y mostrarlos directamente en su site. En el lateral del blog yopaso.com hay una demostración de lo que podemos hacer con un hashtag similar al de la temática de nuestro site.

Pasos para mostrar los tweets de un determinado hashtag en tu blog

Copiar el siguiente código en la página sidebar.php o en la sección donde quieras que aparezcan los hashtag recogidos de Twitter:

showTwetts (“<h3>#hashtag en Twitter</h3>”, “#hashtag“, 5);

En el fichero functions.php pegar el siguiente código

function showTwetts($title, $hashtag, $max_items)

{

$results = searchTwitter (urldecode($hashtag), $max_items);

$items = array();

if (count($results) > 0)

{

echo $title;

echo “<ul class=’twitter_li’>\n”;

foreach ($results as $item)

{

echo “<li>\n”;

echo “<p><a href=’http://twitter.com/”.$item->from_user.”‘>@”.$item->from_user.”</a> “.date(“d/m/Y H:i”, strtotime($item->created_at)).”</p>\n”;

echo “<p>”.$item->text.”</p>\n”;

echo “</li>\n”;

}

echo “</ul>\n”;

}

} # function showTwetts

function searchTwitter ($keyword, $max_items = 5)

{

$url = “http://search.twitter.com/search.json?q=”.urlencode($keyword).”&lang=all”;

if ($max_items > 0) $url .= “&rpp=”.$max_items;

$list = array();

$json = file_get_contents($url);

$array = json_decode($json);

return $array->results;

}#function searchTwitter

Sólo es necesario cambiar #hashtag por el hashtag elegido y elegir el número de tweets a mostrar.

Ahora existen muchas forma de introducir un código QR en tu blog o sitio web, como por ejemplo QRumpy, que destaca del resto de generadores de código QR ya que con el puedes generar el código sobre cualquier texto, no es necesarío que sea un URL.

Los códigos son generados en 4 tamaños:

• Pequeño – 150×150 px
• Mediano – 200×200 px
• Grande – 250×250 px
• Extra grande – 300×300 px

Ejemplo de código QR de 300×300 px

La generación del código está basado en la API de Google Charts

Incluir reCAPTCHA a un Formulario

Para utilizar la protección mediante captcha, necesitamos añadir reCAPTCHA a nuestro formulario, por lo tanto incluimos el archivo recaptchalib.php y agregamos variables con los valores de nuestros key recién obtenidos.

require_once(‘recaptchalib.php’);

$publickey = “2LdB4goAArAOFRtfrtRlvfyrE-_zv6RETDfgdgdkj”;

$privatekey = “2LdB4goAgdgdfAAAF1GFHFghfhftrtrydgfdUfghkj”;

$error = null;

Ahora utilizamos la función recaptcha_get_html para mostrar el captcha.

<form method=”post”>

<label for=”username”>Usuario</label><br />

<input name=”username” type=”text” class=”casilla” id=”username” /><br />

<label for=”usermail”>Email</label><br />

<input name=”usermail” type=”text” class=”casilla” id=”usermail” /><br />

<label for=”usercheck”>Verificaci&oacute;n</label><br />

<?php echo recaptcha_get_html($publickey, $error); ?>

<input type=”hidden” name=”action” value=”register” />

<input type=”submit” name=”btsend” value=”Enviar” />

</form>

Validar Captcha

Cuando el formulario haya sido enviado verificamos que el texto de captcha se ha ingresado correctamente en cuyo caso procesamos los datos del formulario de lo contrario mostramos un mensaje de error.

if ($_POST['action'] == “register”) {

$re_ip = $_SERVER["REMOTE_ADDR"];

$re_challenge = $_POST["recaptcha_challenge_field"];

$re_response = $_POST["recaptcha_response_field"];

$re_valid = recaptcha_check_answer($privatekey, $re_ip, $re_challenge, $re_response);

if ($re_valid->is_valid) {

// procesar registro

} else {

$error = $resp->error;

}

}

Uniendo estos pasos en un archivo, se obtiene una buena protección anti-spam.

Una idea para mostrar la ubicación de un punto en un mapa, por ejemplo: una tienda, una oficina, la ubicación de varias franquicias… es utilizar un mapa de Google Maps a tamaño completo como fondo de la página web. Además en la misma página podrás añadir: textos, imagenes y hasta botones de compartir en redes sociales.

A continuación tienes los pasos para poner un mapa de Google Maps como fondo de una web utilizando las propiedades de CSS como z-index y position: absolute:

• El primer paso será obtener una una clave API para utilizar Google Maps, la clave se generará al momento y sólo es válida una por dominio.

• Lo siguiente será descargar y configurar los archivos: CSS, HTML y JavaScript, los códigos los puedes encontrar en: documento HTML, hoja de estilos CSS, fichero map en JavaScript.

Para poder mostrar el mapa como fondo de nuestra web utilizaremos las propiedades absolute y z-index. Para obtener dicho efecto, le daremos al id map_ canvas (que será el que generará el mapa) algunos parámetros de estilo en forma inline, de la siguiente manera:

<div id=”map_canvas” style=”position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;”></div>

Nos fijaremos en que todas las propiedades queden configuradas en ’0′ e indispensable que este sea el último elemento que añadamos antes de cerrar el tag body.

Para los demás elementos div que contenga la página, como pueden ser: textos, imagenes, cuenta regresiva, etc ha sido creado un div contenedor (llamado #countdown_dashboard) al que se le ha dado position : absolute y su z-index colocado en 100 o más alto en caso de ser necesario pero lo importante es que no sea cero.

• Por último, recordar que la API de Google Maps nos permite personalizar el mapa de fondo añadiendo marcadores en diversos puntos para señalizar el mapa, etc.

Puedes ver un ejemplo del resultado final con un mapa como fondo en una web en wadehammes.com

Recuerda que para poder hacer +1 en el botón necesitas un perfil público de Google, además los contactos que conozcan tu dirección de email podrán ver tus recomendaciones desde una nueva pestaña en tu perfil público de Google (también existe la posibilidad de configurarlo como privado).

Cómo añadir el botón +1 de Google

Si estás buscando algo rápido para integrar el botón de google en tu site puedes ayudarte de la genial herramienta de configuración que google pone a nuestra disposición. También si tienes alguno de los CMS más utilizados, comienzan a ser publicados plugins que te permitirán implementar el botón simplemente subiendo al FTP y activándolo desde tu panel.

• Google +1 Button para WordPress
• Google +1 Button para Joomla
• +1 Button para Blogger

Para webmasters más avanzados, Google ha publicado una guía de conceptos básicos para la configuración del botón así como información sobre la API de JavaScript y ejemplos.

Código de implementación en página básica:

<html>
  <head>
    <title>Demostración de +1: página básica</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    </script>
  </head>
  <body>
    <g:plusone></g:plusone>
  </body>
</html>

Nota: el botón +1 está sujeto a las políticas para editores sobre el botón +1 de Google entre las cuales se encuentra la prohibición de promocionar premios, dinero o equivalentes monetarios a cambio de hacer clic en el Botón +1.