Para conseguir medir las: visitas, páginas vistas, promedio de tiempo en el site y porcentajes de visitas nuevas y rebote sólo necesitamos etiquetar las url de la campaña correctamente para poder visualizar sus estadísticas a través de la herramienta gratuita Google Analytics.

Los parámetros que debemos introducir en cada URL donde pongamos nuestras campañas son los siguientes:

• Utm_source: (obligatorio) Se utiliza para identificar la fuente donde se muestra la campaña (google, Yahoo, newsletter)
• Utm_medium: (obligatorio) Utilizado para identificar el método de marketing (banner, cpc, patrocinio, cpm)
• Utm_term: (opcional) con el se identifican las palabras clave de pago (recursos, webmasters, HTML)
• Utm_content: (opcional) Utilizado para realizar pruebas del contenido A/B en los anuncios (enlace_logo, enlace_texto, banner125x125)
• Utm_campaign: (obligatorio) Utilizado para el nombre de la campaña o promoción (rebaja_hosting, promocion_dominios, curso_seo)

Si prefieres hacerlo de forma aún más sencilla puedes construir la url con los parámetros desde la herramienta de Google que está disponible desde el siguiente enlace URL Builder.

Todo esto se ve mucho mejor con un ejemplo:

Imaginemos que deseamos realizar una campaña de promoción de unos cursos para webmasters por el método CPC (coste por clic) de este mismo blog zonaw.com dentro de la plataforma de publicidad de Google Adwords, en el que pagaremos por la palabra clave webmasters y contaremos con varios tipos de anuncios: ads1, ads2, ads3… que se diferenciarán solamente en pequeños matices del texto, para evaluar su eficacia.

http://www.zonaw.com/?utm_source=adwords&utm_medium=cpc&utm_term=webmasters&utm_content=ads2&utm_campaign=cursos_webmasters

Por si alguien aún no conoce, Alexa decir que es un servicio de Amazon que ofrece a sus usuarios gran cantidad de información a cerca de cualquier sitio web del que se realiza una consulta. Entre los datos que podemos sacar de Alexa está su indicador más importante, el llamado Alexa Traffic Rank, que nos representa la posición de nuestra web respecto a la totalidad de sitios web. Para entenderlo, es similar al devaluado PageRank de Google.

A pesar de que Alexa no nos ofrece ninguna API para extraer el ranking de una web, utilizando el siguiente método podremos obtener toda la información necesaria.

Todo lo que tenemos que hacer es extraer la información ejecutando la siguiente url:

http://data.alexa.com/data?cli=10&dat=s&url={url_del_sitio}

Ejemplo: http://data.alexa.com/data?cli=10&dat=s&url=www.zonaw.com

Al ejecutar esa url en el navegador, obtendremos un xml del que podremos sacar información como: nombre de la web, descripción, categoría, datos de contacto, número de enlaces, velocidad, calificación, palabras clave y lo que más nos interesa en este caso, el ranking de Alexa.

Si sólo queremos extraer el ranking, lo podemos hacer aún más sencillo, a partir del xml con la ayuda de PHP:

$url = “www.zonaw.com”;
$xml= “http://data.alexa.com/data?cli=10&dat=s&url=”.$url;
$datos = simplexml_load_file($xml) or die(“No se puede cargar”);
$ranking = $datos->SD[1]->POPULARITY['TEXT'];

if($ranking > 0){
echo “El ranking de Alexa para este sitio es <strong>”.$ranking.”</strong>”;
}else{
echo “No se puede obtener el ranking”;
}

Cambiar la URL del enlace en el logotipo

La pantalla de login por defecto de WordPress muestra su logotipo con un enlace a http://www.wordpress.org lo primero que haremos será cambiar dicho enlace por uno que apunte a la home (o cualquier otro lugar) de nuestro site.

Para ello localizamos el fichero functions.php y pegamos el siguiente código cambiando zonaw por nuestra URL.

function idibay_login_url() {

return site_url();

}

add_filter( 'login_headerurl', 'zonaw_login_url', 10, 4 );

Cambiar el logotipo y diseño

En el siguiente paso vamos a cambiar el logotipo para utilizar uno personalizado y también cambiaremos el diseño de la página de login mediante una nueva hoja de estilos CSS (este paso será opcional). Volvemos al fichero functions.php de nuestro tema y pegamos el siguiente código realizando los cambios necesarios:

function zonaw_login() {

echo '<link rel="stylesheet" type="text/css" href="' .

get_bloginfo('template_directory') . '/custom_login.css" />';

}

add_action('login_head', 'zonaw_login');

Para darle un diseño aún más personalizado, creamos un nuevo fichero de hoja de estilos CSS con el nombre custom_login.css en el mismo directorio del tema activo. Desde ahí realizaremos todos los cambios de diseño: logotipo, cambio de colores, posiciones de los elementos, fondo de la página…

Para cambiar el logotipo de WordPress por el nuestro, primero lo subimos a la carpeta images del tema y la llamamos por ejemplo login_logo.jpg en el fichero custom_login.css escribiremos:

h1 a {

background-image: url(images/login_logo.jpg) !important;

}

Para cambiar el color de fondo de la página añadimos las siguientes líneas al CSS modificando el color:

html{ background-color: #9B9B9B; height: 100% !important;}

body{ background-color: #9B9B9B; height: 100% !important;}

Estas son algunas de sus características:

• Software gratuito y Open Source
• Ligero. No utiliza imágenes
• Skins 100% personalizables mediante CSS (se incluyen los aspectos: vimeo, YouTube y Hulu)
• Independiente de frameworks
• Fácil de usar, de entender y extender
• Aspecto coherente entre los distintos navegadores
• Pantalla completa
• Control de volumen
• Fallback a Flash

Para utilizar VideoJS en nuestra página, lo primero será descargar la última versión de VideoJS, descomprimirla y subirla a nuestro servidor. El siguiente paso será incluir los archivos JavaScript y CSS.

<head>
  ...
    <script src="video.js" type="text/javascript" charset="utf-8">
    </script>
    <link rel="stylesheet" href="video-js.css" type="text/css"
    media="screen" title="Video JS" charset="utf-8">
  ...
  </head>

Para tener las funcionalidades de VideoJS añadimos una función JavaScript que se ejecutará cuando cargue la página:

<script type="text/javascript" charset="utf-8">
VideoJS.setupAllWhenReady();
</script>

Para finalizar, en el tag body construimos el player dentro de un div con clase “video-js-box” para reconocer la sección. Dentro del div creado añadimos <video> con sus respectivos atributos y opciones de formato de video.

  <!-- Begin VideoJS -->
  <div>
    <!-- Using the Video for Everybody Embed Code
http://camendesign.com/code/video_for_everybody -->
    <video width="640" height="264" controls preload
poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm"
type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv"
type='video/ogg; codecs="theora, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here.
Make sure to keep the vjs-flash-fallback class. -->
      <object id="flash_fallback_1"code-value">vjs-flash-fallback"
width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie"
value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars"
value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png",
{"url": "http://video-js.zencoder.com/oceans-clip.mp4",
"autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png"
width="640" height="264"
alt="Poster Image"
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play
video in the browser. -->
    <p><strong>Download Video:</strong>
      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->

Se puede ver una demo online de la funcionalidad del reproductor y sus Skins 100% CSS.

También dispone de varios plugins para hacerlo aún más compatible con: WordPress, jQuery, Drupal, Umbraco y Joomla.

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; ?>

Estos son los pasos para conseguir que el estilo de los campos de un formulario cambien al hacer click sobre ellos:

Primero creamos un simple formulario con dos campos: usuario y mensaje:

<form action=”#” method=”POST”>
<p>Usuario:</p>
<p><input type=”text” name=”usuario” maxlength=”30″ size=”30″></p>
<p>Mensaje:</p>
<p><input type=”mensaje” name=”mensaje” maxlength=”300″ size=”300″></p>
</form>

Mediante CSS ponemos el fondo de un color, para ello añadimos entre la etiqueta <head> o en la hoja de estilos el código:

<style type=”text/css”>
.input_sinfoco{
background: #EAF2FA;
border: 3px solid #464646;
}
</style>

Hacemos referencia añadiremos la llamada a dicha clase en los campos de texto con la etiqueta class:

<form action=”#” method=”POST”>
<p>Usuario:</p>
<p><input type=”text” name=”usuario” maxlength=”30″ size=”30″></p>
<p>Mensaje:</p>
<p><input type=”mensaje” name=”mensaje” maxlength=”300″ size=”300″></p>
</form>

Para tener en cuenta el comportamiento cuando el usuario hace click en el campo de texto, utilizaremos la función onFocus de Javascript, añadiendo en cada uno de los campos:

<form action=”#” method=”POST”>
<p>Usuario:</p>
<p><input type=”text” name=”usuario” maxlength=”30″ size=”30″ onFocus=”this.className=’input_foco’”></p>
<p>Mensaje:</p>
<p><input type=”mensaje” name=”mensaje” maxlength=”300″ size=”300″ onFocus=”this.className=’input_foco’”></p>
</form>

Añadimos también el estilo CSS para cuando nos posicionamos en el campo, en este caso llamado input_foco

<style type=”text/css”>
.input_sinfoco{
background: #B6B61C;
border: 3px solid #9B9B18;
}
.input_foco{
background: #E7AE10;
border: 3px solid #9B9B18;
}
</style>

Para finalizar.

Añadimos el estado on_blur utilizado cuando el campo pierde el foco.

Para ello utilizamos la función onBlur de Javascript:

<form action=”#” method=”POST”>
<p>Usuario:</p>
<p><input type=”text” name=”usuario” maxlength=”30″ size=”30″ onFocus=”this.className=’input_foco’” onblur=”this.className=’input_sinfoco’”></p>
<p>Mensaje:</p>
<p><input type=”mensaje” name=”mensaje” maxlength=”300″ size=”300″ onFocus=”this.className=’input_foco’” onblur=”this.className=’input_sinfoco’”></p>
</form>

Con esto ya tendremos listo nuestro formulario. Ahora sólo falta insertar el código en nuestra página y comprobar su correcto funcionamiento.

El código completo del ejemplo es el siguiete:

<html>
<head>
<title>Cambiar campos de formularios al hacer click</title>
<style type=”text/css”>
.form{
width: 300px;
margin: 100px;
padding: 25px;
font-family: Helvetica, Arial, ‘Lucida Sans Unicode’;
font-size: 16px;
color: #9B9B18;
border: 3px solid #9B9B18;
/*background: #FED52B;*/
}
.input_sinfoco{
background: #B6B61C;
border: 3px solid #9B9B18;
}
.input_foco{
background: #E7AE10;
border: 3px solid #9B9B18;
}
</style>
</head>
<body>
<div>
<h1><strong>Cambiar campos de formularios al hacer click</strong></h1>
<h2>Estilos en campos</h2>
<form action=”#” method=”POST”>
<p>Usuario:</p>
<p><input type=”text” name=”usuario” maxlength=”30″ size=”30″ onFocus=”this.className=’input_foco’” onblur=”this.className=’input_sinfoco’”></p>
<p>Mensaje:</p>
<p><input type=”mensaje” name=”mensaje” maxlength=”300″ size=”300″ onFocus=”this.className=’input_foco’” onblur=”this.className=’input_sinfoco’”></p>
</form>
</div>
</body>
</html>

Su configuración es bastante simple, y nos permite gestionar opciones básicos relacionados con la reproducción del video como por ejemplo: controles básicos, volumen, calidad, proporción, aspecto, bufferIMG, opacidad…

No tendrás que preocuparte por el tiempo de carga de tu site, ya que el propio plugin nos ofrece una serie de opciones para gestionar de forma eficiente los retrasos y tiempos de descarga del video inicial, para ello utiliza imágenes que son mostradas mientras el video inicia su reproducción.

Un ejemplo del simple funcionamiento de este plugin y de la utilización del mínimo cóodigo lo podemos encontrar implementando la siguiente configuración básica. De todas formas, si lo que queremos es modificar el aspecto visual del video podemos configurar las imágenes que queramos utilizar como los controles, simplemente pasando por parámetro la ruta a los archivos.

Llamada JS:

    $(function(){
      $(".movie").mb_YTPlayer();
    });

Constructor HTML

<a id="bgndVideo" href="http://www.youtube.com/watch?v=MR9av-I35ME">
Bill Viola</a>

Parámetros

$.YTPlayer.controls.play= “<img src='images/play.png'>”
$.YTPlayer.controls.pause= “<img src='images/pause.png'>”
$.YTPlayer.controls.mute= “<img src='images/mute.png'>”
$.YTPlayer.controls.unmute= “<img src='images/unmute.png'>”

En el siguiente enlace se puede ver una demostración de su funcionamiento.

Web: jQuery.mb.YTPlayer

Ya que el método anterior puede resultar bastante pesado, buscando alguna solución nos encontramos en techoctave.com con Entourage.js un simple y muy ligero script de tan solo 339 bytes comprimido, con el que podemos añadir automáticamente soporte para realizar un seguimiento de las descargas.

Entourage.js

Su instalación es muy simple. Primero descargamos el script desde Entourage.js, lo subimos a nuestro servidor y realizamos la llamada en nuestro documento entre las etiquetas <head></head>

Para comenzar necesitamos una clase llamada MS-Excel Stream Handler que es la que contiene las funciones necesarias para crear archivos Excel. En unijimpe.net basados en la documentación de la clase anterior, han creado el fichero excel-ext.php que contiene una función que facilitará el proceso.

Lo primero será utilizar la función createExcel la cual recibe dos parámetros, el primero el nombre del archivo que deseas crear y el segundo un array asociativo con los datos a mostrar en el archivo generado:

createExcel(“excelname.xls”, array);

El segundo paso es incluir el archivo excel.php y excel-ext.php en nuestro script php:

Para solucionar este problema existe una librería javascript llamada Modernizr que nos permite detectar el soporte a varias de las nuevas características que ofrecen HTML5 y CSS3.

Modo de utilizar Modernizr para detectar HTML5 y CSS3:

1. Descargar desde su web el fichero .js, también podemos posonalizarlo nosotros mismos desde el apartado download.
2. Después de subirlo a nuestro servidor añadir la librería en el head:

<script src=”modernizr.min.js”></script>

3. No requiere llamar a ninguna función para que Modernizr comience (se inicia automáticamente al crear el objeto Modernizr) en este, cada propiedad corresponde a funciones tipo boolean (verdadero o falso). Por ejemplo, para detectar si el navegador soporta el elemento video, debemos escribir el siguiente código javascript:

Para detectar si el navegador soporta el elemento audio: