Nueva Guía SEO de Google

La nueva guía de SEO para Google esta mucho más ilustrada e intuitiva que la versión anterior, esta nueva versión cuenta con muchas imágenes de ejemplo y links de ayuda para algunas palabras técnicas que no todos conocen, al final del documento deja una lista de enlaces y descripciones de sus herramientas gratis online.
Una de las cosas que tiene de nuevo este manual es la sección de SEO para móviles
Recordando también que la primera guía de SEO se lanzo en noviembre de 2008 y tradujo a mas de 40 idiomas gracias al éxito que tubo, esperemos que esta actualización también cuente con la traducción al español, pero eso no sera motivo para no leerla.

Descargar Guía SEO de Google 2010
vía: Official Google Webmaster Central Blog

Player de Video HTML5: VideoJS

VideoJS es un Player para reproducir Videos en HTML5, esto permite compatibilidad con navegadores móviles y la ventaja de no requerir flash para ver los videos, otra de sus ventajas es que si el navegador no soporta HTML5 automáticamente nos muestra su reproductor en Flash alternativo.

 

 

Mejores características

  • De Licencia Open Source (libre)
  • Realmente ligero (no utiliza imágenes)
  • Skins 100% CSS
  • Modo Full Screen y Full Window
  • Control de volumen
  • Compatible en navegadores móviles
  • Incluye skins de Youtube, Vimeo y más.
  • Plugins para jQuery y WordPress

 

Como funciona?

Lo primero es descargar la ultima versión de VideoJS, luego descomprimirlo y colocarlo en una carpeta de nuestro servidor local.
Descargar VideoJS

 

Incluir Librerías Javascript y CSS

El siguiente paso para incluir VideoJS en nuestra pagina web sera el de 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>

Ahora debemos ingresar una función JavaScript que se ejecutara cuando toda la pagina cargue, esto para tener las funcionalidades de VideoJS.

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

 

Estructura del player

Finalmente dentro del body construimos el player dentro de un div con clase “video-js-box” para reconocer la sección.

<div class="video-js-box">
...
</div>

Dentro de este colocamos el tag <video> con sus respectivos atributos y opciones de formato de video.

<video id="example_video_1" class="video-js" width="640" height="264" preload poster="http://video-js.zencoder.com/oceans-clip.png" controls>
  <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"'>
  <!-- Utilizar flash cuando el navegador no soporte HTML5 -->
  <object class="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}]}' />
	<!-- Utilizar una imagen al no soportar Flash -->
	<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
	  title="No video playback capabilities." />
  </object>
</video>
<!-- Opción para descargar el video en caso no se soporte ninguna tecnología. -->
<p class="vjs-no-video"><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>

Con esto hemos obtenido un reproductor que soporta diferentes formatos de video, puede cambiar a Flash en caso el navegador no soporte HTML5 y la opción de descargar los videos en diferentes formatos si no se lograra reproducir de ninguna forma.
Pueden ver una demo online de la funcionalidad del reproductor y sus excelentes Skins 100% CSS.
Ver demos

Mostrar número suscriptores de Youtube con php

Mostrar el numero de suscriptores o seguidores de YouTube con PHP es una tarea sencilla, si tenemos una cuenta en esta Red Social, podemos mostrar la cantidad de suscriptores que tenemos en nuestra página web, esto con una función sencilla en PHP.

 

Función PHP

function get_yt_subs($username) {
$xmlData = file_get_contents('http://gdata.youtube.com/feeds/api/users/' . strtolower($username));
$xmlData = str_replace('yt:', 'yt', $xmlData);
$xml = new SimpleXMLElement($xmlData);
$subs = $xml->ytstatistics['subscriberCount'];
return($subs);
}

Luego llamamos a la función pasando como parámetro el username de Youtube.

echo get_yt_subs('rppvideos');

Mostrar número de seguidores de Twitter con PHP

Mostrar el número de seguidores de Twitter con PHP es una forma de personalizar la presentación de esta estadística, podemos crear una función y que nos devuelva el número de seguidores en texto, esta función que utiliza el API de Twitter nos ayudara mucho, solo debemos pasar como parámetro el username de Twitter.

function getTwFollowers($username){
	$xml=file_get_contents('http://twitter.com/users/show.xml?screen_name='.$username);
	if (preg_match('/followers_count>(.*)</',$xml,$match)!=0) {
		$count = $match[1];
	}
	return $count;
}

Ahora solo tenemos que llamar a la función y pasarle como parámetro el username de Twitter.

echo getTwFollowers('craftyman');

También podemos mostrar los seguidores de otras Redes Sociales:

Convertir PSD en HTML y CSS Online

Convertir archivos PSD (Photoshop) en plantillas HTML y CSS es una de las tareas más comunes para el diseñador, para los desarrolladores tal vez sea un poco complicado en caso lo necesitemos, para esto podemos recurrir a una herramienta online que hace el trabajo por nosotros.

PSD2CSS es una herramienta Online, solo tienes que subir tu archivo PSD y automáticamente generara código HTML y CSS para que lo puedas descargar gratis.

Paso 1: Diseñar la página web

Lo primero que tenemos que hacer es nuestro diseño de página web utilizando capas en Photoshop (también podemos utilizar Gimp).
Luego que terminemos nuestro diseño debemos guardarlo como .psd.
Este es un archivo .psd de ejemplo.
Descargar PSD

Paso 2: Subir y Descarga

Ahora solo debemos subir nuestro archivo para que nos genere un Zip con el código HTML y CSS.
Nota: recientemente se ha restringido la generación de código solo para usuarios registrados, pero el registro es gratuito, así que no habría ningún problema.
Luego de procesar el PSD nos mostrara 2 links, uno para ver el sitio web online y el otro para descargar el Zip.
Sin dudad una herramienta para sacar de apuros a cualquiera, tienen criticas sobre esta herramienta?, saben de alguna otra?, mejores características?, pueden comentarla y con todo gusto aportaremos más ideas!

Mostrar número de Fans de Facebook con PHP

Si tenemos una Fan Page de Facebook, y necesitamos mostrar el numero de fans que tenemos podemos utilizar los Plugins sociales de Facebook y elegir el Like Box, una de las desventajas de esto es que carece de personalización, otra manera de mostrar el numero de fans limpiamente es utilizando el API de Facebook.

Paso 1: Registrar una aplicación en Facebook

Para utilizar el API de Facebook primero tenemos que registrar una Aplicación Facebook y obtener el API Key y Application Secret que lo necesitaremos en el siguiente paso.

Paso 2: Utilizando el API de Facebook

Tenemos que bajarnos el Facebook API PHP SDK, esto lo encontramos en la misma página de desarrolladores para Facebook.
Luego tenemos que incluirlo en nuestro archivo demo y pegar el API Key y App Secret.

include('src/facebook.php');
$facebook = new Facebook(array(
	'app_id',
	'app_secret',
	'cookie' => true
));

Ahora debemos obtener el ID de nuestra Fan page, esto lo hacemos editando el Fan page en Facebook, luego la tendremos que pegar “page_id”

$result = $facebook->api(array(
	    'method' => 'fql.query',
	    'query' => 'select fan_count from page where page_id = page_id;'
	));
$fb_fans = $result[0]["fan_count"];

Listo, esto nos mostrara el numero de fans de la manera más limpia posible, ahora podemos darle estilos, incluirle alguna imagen, y alguna otra creatividad posible, si la tienen y quieren compartirla, bienvenida sea.

Crear PDF con PHP

l siguiente tutorial para crear archivos PDF con PHP con FPDF explica su implementación y también un archivo demo para descargar y revisar.

FPDF es una librería Open source para PHP y la creación de archivos PDF, es muy sencilla y flexible para utilizar.

Características.

  • Elección de formato de página y margen.
  • Colocar cabeceras y pies de página.
  • Saltos de página automáticos.
  • Soporte de imágenes.
  • Personalización de fuentes.

El siguiente ejemplo muestra como hacer una tabla utilizando FPDF.

Paso 1: descargar la librería FPDF

La podemos descargar del sitio oficial de FPDF.
Solamente necesitaremos el archivo fpdf.php.

Paso 2: Creando una clase reutilizable.

Esta clase la copie y modifique de la misma página de FPDF, el cambio esta en que no tenemos que modificar la clase para elegir el numero de columnas que deseamos mostrar.
Clase PdfTable (para generar tablas en los PDF)
[php]
require(&#039;fpdf.php&#039;);
class PdfTable extends FPDF
{
function FancyTable($header,$data,$w)
{
//Colores, ancho de línea y fuente en negrita
$this->SetFillColor(0, 126, 216);
$this->SetTextColor(255);
$this->SetDrawColor(0, 126, 216);
$this->SetLineWidth(.3);
$this->SetFont(&#039;&#039;,&#039;B&#039;);
//Cabecera
for($i=0;$i<count($header);$i++)
$this->Cell($w[$i],7,$header[$i],1,0,&#039;C&#039;,1);
$this->Ln();
//Restauración de colores y fuentes
$this->SetFillColor(224,235,255);
$this->SetTextColor(0);
$this->SetFont(&#039;&#039;);
//Datos
$fill=false;
foreach($data as $row)
{
foreach($w as $k=>$col){
$this->Cell($col,6,$row[$k],&#039;LR&#039;,0,&#039;L&#039;,$fill);
}
$this->Ln();
$fill=!$fill;
}
$this->Cell(array_sum($w),0,&#039;&#039;,&#039;T&#039;);
}
}
[/php]

Paso 3: Utilizando la Clase PdfTable a nuestra necesidad

Llamando a esta clase lo único que debemos hacer es definir que columnas queremos mostrar y darle al ancho necesario a cada una, luego almacenar en un array los datos de cada columna.
[php]
//instanciamos la clase
$pdf=new PdfTable();
//Títulos de las columnas
$header=array(&#039;Nombre&#039;,&#039;E-Mail&#039;,&#039;Twitter&#039;);
//anchos de cada columna
$widths=array(40,70,40);
//Carga de datos
$data=array(
array("Juan","jperez@hotmail.com","@jperez"),
array("Mario","mmoreno@hotmail.com","@mariom"),
array("Luis","lgomez@hotmail.com","@luisluis"),
array("Javier","jchavez@hotmail.com","@xavierx")
);
$pdf->SetFont(&#039;Arial&#039;,&#039;&#039;,14);
$pdf->AddPage();
$pdf->FancyTable($header,$data,$widths);
$pdf->Output();
[/php]
De esta manera nos libramos un poco del código para crear tablas en los PDF.
Para más documentación pueden entrar a la página oficial de FPDF.
Librerías para generar PDF con PHP.
Descargar Ejemplozp8497586rq

10 Themes WordPress para Empresas gratuitos

Si estas desarrollando un blog con WordPress para alguna empresa y buscas un Theme bien equipado y adecuado para el negocio, esta lista de 10 Themes para WordPress pueden ser la solucion, todos son gratuitos y los podemos testear y personalizar a nuestro antojo.

1. Notepad

ver demodescargar

2. Colourise

ver demodescargar

3. Makisig

ver demodescargar

4. The Unstandard

descargardescargar

5. LaunchPad

ver demodescargar

6. The Morning After

ver demodescargar

7. Charred

ver demodescargar

8. TheSevenFive

ver demodescargar

9. Snapshot

ver demodescargar

10. Bueno

ver demodescargar

vía: Mashable.com

zp8497586rq

5 Razones para mostrar posts completos en tus Feeds

Si tienes un blog y está configurado con la opción de solo mostrar un resumen, aquí te dejo una serie de razones para que dejes tus posts completos en los feeds, hasta hace poco yo tambien lo tenía, ahora estoy convencido que es mucho mejor utilizar feeds completos.

1. Comodidad para el usuario

Si un usuario de internet se suscribe a tu blog, es porque para el de seguro le será mas cómodo revisarlo desde su lector de feeds y no entrando directamente a tu blog.

2. Lectores offline

Al tener todo el contenido descargado en el lector de feeds del usuario, este podrá leerlo sin tener conexión a internet.

3. Dispositivos móviles

Los usuarios al entrar desde un Smartphone tienen un lector especialmente para mostrar los textos e imágenes de la mejor manera posible, y al tener un resumen obligaras al usuario a consumir el artículo desde tu blog, lo cual necesariamente estará preparado para móviles.

4. Publicidad para Feeds

Si tienes publicidad en tu website, y crees que es un motivo para obligar a los usuarios a consumir el artículo desde tu blog, pues tenemos la opción de ingresar Adsense dentro de los Feeds, y de esta manera seguimos monetizando nuestro blog.

5. Obtener más lectores

De alguna manera es cierto, ya que algunos usuarios procuran no suscribirse a blogs que muestren solo resumen y prefieran revisarlo directamente, y al no tenernos en su lector de feeds probablemente pase más tiempo en el lector y deje de revisarnos directamente.
Si tienes alguna razón más para mostrar artículos completos en nuestro feed o al contrario tienes una buena razón para utilizar resúmenes, pues bienvenido sea que lo podremos debatir y compartir.

zp8497586rq