generar tinyURL con PHP

TinyURL es un servicio web que nos brinda la posibilidad de acortar nuestras direcciones URL como por ejemplo “http://tednologia.com/generar-tinyurl-con-php” y convertirla en “http://tinyurl.com/cy2g2t” utilizando el API que nos da este servicio podemos realizar una función para acortar nuestras URL con PHP y CURL.

Función PHP

function getTinyURL($url)
{
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_URL,'http://tinyurl.com/api-create.php?url='.$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,5);
	$data = curl_exec($ch);
	curl_close($ch);
	return $data;
}
$url = getTinyURL('http://tednologia.com/generar-tinyurl-con-php');
//->http://tinyurl.com/cy2g2t
echo $url;

Así de simple. Usted pone su URL y devolverá la URL acortada.
Twitter también dispone de esta funcionalidad al poner URL en tus estados.

TwitterGitter: lista tus tweets con ajax

TwitterGitter es un plugin creado por DavidWalsh y sirve para recuperar tus últimos estados e información de tu Twitter.

Utiliza la librería Mootools 1.2 y la extensión JSONP para Mootools.

Que es JSONP ?

Es un nuevo medio por el cual podemos obtener datos en formato JSON desde otro dominio.
Actualmente si usa Ajax para realizar este proceso obtendrá un error de seguridad.
JSONP incluye una etiqueta script en el documento, esta etiqueta apunta a un javascript externo
el cual se envuelve por un parentesis y nombre aparentando ser una función “__json([contenido])” y ejecuta al momento de cargarlo, de esta manera podremos obtener una respuesta desde otro dominio.

Para comenzar descargaremos los siguientes archivos

Luego debemos incluir las librerías en nuestra web




Ahora pondremos el script que se ejecutara al hacer click en un boton

window.addEvent('domready',function() {
	$('git').addEvent('click',function(e) {
		e.stop();
		$('tweets-here').set('html','');
		var myTwitterGitter = new TwitterGitter($('username').value,{
			count: 5,
			onComplete: function(tweets,user) {
				tweets.each(function(tweet,i) {
					new Element('div',{
						html: '<img src="'
								+ user.profile_image_url.replace("\",'')
								+ '" align="left" alt="'
								+ user.name + '" /> <strong>'
								+ user.name + '</strong><br />'
								+ tweet.text + '<br /><span>'
								+ tweet.created_at + ' via '
								+ tweet.source.replace("\",'') + '</span>',
						'class': 'tweet clear'
					}).inject('tweets-here');
				});
			}
		}).retrieve();
	});
});

Nada mas nos queda incluir dentro del body nuestro input, button y la seccion donde se llenaran los tweets



Recursos

Convertir texto url a enlace

p>Al poner una direccion url en un comentario o cualquier texto, no vemos en la necesidad de copiarlo y pegarlo en la barra de direccion del navegador para poder abrirlo, al convertir la direccion url en un enlace estamos facilitando a los usuarios la entrada a ese sitio web.
Esta función la pongo en PHP y otra en Javascript según los gustos.

Función en PHP

[php]
public static function url2link($text)
{
$in = array(‘`((?:https?|ftp)://S+[[:alnum:]]/?)`si’, ‘`((?< !//)(www.S+[[:alnum:]]/?))`si’);
$out = array(‘<a href="$1">$1’, ‘<a href="http://$1">$1</a>’);
return preg_replace($in,$out,$url);
}
$text = url2link(‘Craftyman blog – http://tednologia.com’);
echo $text;
[/php]

Función en Javascript

[javascript]
url2link = function(text)
{
var expr = /(https?://S+)/gi;
var anchr= ‘<a href="$1" >$1</a>’;
return text.replace(expr,anchr);
}
var text = url2link(‘Craftyman blog – http://tednologia.com’);
alert(text);
[/javascript]

FeedBurner API: obten tus estadisticas con PHP

p>FeedBurner Awareness API (AwAPI) permite a los editores de FeedBurner ver las estadísticas de tráfico de cualquier feed.
El primer paso para poder utilizar el API es activarlo desde el panel de control de FeedBurner. Aqui una imagen como muestra.

Seguidamente podran ver sus estadisticas por medio de esta url, los datos seran vistos en formato XML.

https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=CraftymanBlog

<?xml version="1.0" encoding="UTF-8"?>
<rsp stat="ok">
  <feed id="7il3mttbn29milftc5vds5e7po" uri="CraftymanBlog">
    <entry date="2009-03-22" circulation="47" hits="97" reach="2" />
  </feed>
</rsp>

Donde “circulation” son tus lectores diarios.

La siguiente función limpiara el XML devolviendonos solo el valor “circulation”.

function getFeedBurnerReaders($uri)
{
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=$uri");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
    $content = curl_exec($ch);
    preg_match('/circulation="(.*)"/isU',$content,$matches);
    $readers = $matches[1];
    curl_close($ch);
    return $readers;
}
$readers = getFeedBurnerReaders('CraftymanBlog');
echo $readers.' Lectores';

Recursos

Actualizar Twitter remotamente con PHP

p>Twitter es un servicio gratuito de mensajería de utilidad social para mantenerse conectado en tiempo real.

Craftyman Blog también se unió a Twitter y pueden seguirlo aquí.

Aquí pongo un script de cómo usted puede actualizar su Twitter remotamente utilizando PHP.

public function updateTwitter($user,$pwd,$type,$msg)
{
    $ruta     = 'curl http://twitter.com/statuses/update.';
    $msg      = str_replace('"','"',$msg);
    $result   = shell_exec($ruta.$type.' -u '.$user.':'.$pwd.' -d status="'.$msg.'"');
    return $result;
}
$user     = 'craftyman';
$pwd      = '*********';
$type     = 'xml'; //o 'json'
$msg      = 'Actualizacion Twitter con PHP';
echo updateTwitter($user, $pwd, $type, $msg);

Retorno en Formato JSON

{
    "user": {
        "description": "PHP, MySQL, Javascript, CSS, Mootools, jQuery, Prototype",
        "url": "http://tednologia.com",
        "name": "Craftyman Blog",
        "protected": false,
        "followers_count": 3,
        "profile_image_url":
        "http://s3.amazonaws.com/twitter_production/profile_images/98739091/facivon_normal.jpg",
        "location": "",
        "id": 24746352,
        "screen_name": "craftyman"
    },
    "text": "Actualizar Twitter con PHP",
    "favorited": false,
    "created_at": "Thu Mar 19 17:04:56 +0000 2009",
    "in_reply_to_status_id": null,
    "truncated": false,
    "in_reply_to_user_id": null,
    "id": 1355417660,
    "in_reply_to_screen_name": null,
    "source": "web"
}

Retorno en Formato XML

<?xml version="1.0" encoding="UTF-8"?>
<status>
  <created_at>Thu Mar 19 17:06:31 +0000 2009</created_at>
  <id>1355426342</id>
  <text>Actualizar Twitter con PHP y XML</text>
  <source>web</source>
  <truncated>false</truncated>
  <in_reply_to_status_id></in_reply_to_status_id>
  <in_reply_to_user_id></in_reply_to_user_id>
  <favorited>false</favorited>
  <in_reply_to_screen_name></in_reply_to_screen_name>
  <user>
    <id>24746352</id>
    <name>Craftyman Blog</name>
    <screen_name>craftyman</screen_name>
    <location></location>
    <description>PHP, MySQL, Javascript, CSS, Mootools, jQuery, Prototype</description>
    <profile_image_url>http://s3.amazonaws.com/twitter_production/profile_images/98739091/facivon_normal.jpg</profile_image_url>
    <url>http://tednologia.com</url>
    <protected>false</protected>
    <followers_count>3</followers_count>
  </user>
</status>

CSS DropDown: Framework para menus desplegables

Free CSS Drop-Down Menu Framework

Free CSS Drop-Down Menú Framework es un Framework CSS para crear menús desplegables fácilmente con listas.
Su flexibilidad da la posibilidad de crear menús horizontales y verticales con submenus de diferentes combinaciones, aquí explicare como crear un menú horizontal con submenus verticales.

Características

  • Es Modular y totalmente configurable
  • Tiene Themes en CSS
  • Es de fácil de usar
  • Fácilmente de transformar a otro menú

Compatibilidad

  • Internet Explorer 5+
  • Mozilla Firefox 1.5+
  • Opera 7+
  • Safari 2+

Nota: Para IE usa la librería jQuery para su correcta funcionalidad

Primer paso

Nos descargaremos Free CSS Drop-Down Menú Framework y sera descomprimido en una carpeta local, podemos crear un archivo .html e incluir las librerías o abrir uno y copiarlo.

<link href="css/dropdown/dropdown.css" media="all"  />
<link href="css/dropdown/themes/default/default.ultimate.css"  />
<!--[if lt IE 7]>
<script src="js/jquery/jquery.js"></script>
<script src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

Aquí incluimos el dropdown.css que es el estilo para formar el menú y el default.ultimate.css es el theme para el menú

Segundo paso

Pondremos dentro de body una lista con class=”dropdown dropdown-horizontal”, dentro de ela podemos crear submenus y formar mas niveles de esta forma:

<ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="#">Home</a></li>
	<li><span class="dir">About Us</span>
        <!-- submenu-->
		<ul>
			<li><a href="#">History</a></li>
			<li><a href="#">Our Visión</a></li>
			<li><span class="dir">The Team</span>
            	<!-- submenu de submenu-->
				<ul>
					<li><a href="#">Brigita</a></li>
					<li><a href="#">John</a></li>
					<li><a href="#">Michael</a></li>
					<li><a href="#">Peter</a></li>
					<li><a href="#">Sarah</a></li>
				</ul>
			</li>
			<li><a href="#">Clients</a></li>
			<li><a href="#">Testimonials</a></li>
			<li><a href="#">Press</a></li>
			<li><a href="#">FAQs</a></li>
		</ul>
	</li>
</ul>

Listo ahora tienes un menú desplegable fantástico.

Recursos

Uploadify: upload multiple con jQuery

Uploadify es un plugin para jQuery el cual utiliza flash para realizar la selección multiple de archivos.

Su implementación es muy sencilla y aquí. explico como se realiza:

Primero descargamos el plugin aquí.

Despues de haberlo descomprimido en una carpeta del servidor local pasaremos a crear un archivo upload.html en el cual agregaremos las librerías javascript y css necesarias dentro del head.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify.js"></script>
<link type="text/css" rel="stylesheet" href="uploadify.css"  />

Este script nos sirve para establecer las características del boton “Upload”, si es automatico, si puede subir varios archivos, etc. Lo colocaremos dentro del head y despues de haber agreado las librerías

$(document).ready(function() {
	$("#fileUpload").fileUpload({
			'uploader': 'uploader.swf',
			'cancelImg': 'cancel.png',
			'folder': 'uploads/',
			'buttonText': 'Seleccionar',
			'checkScript': 'check.php',
			'script': 'upload.php',
			'multi': true,
			'simUploadLimit': 2
		});
});

Dentro del body pondremos un input tipo “file” y un link a funciones javascript para comenzar y limpiar la descarga

<input name="fileUpload" id="fileUpload" type="file" />
<a href="javascript:$('#fileUpload').fileUploadStart()">Subir</a> | <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Limpiar</a>

El ultimo paso seria verificar si la carpeta donde subirán los archivos tiene permisos de escritura y listo, pueden ver el ejemplo aquí.

Recursos

topLink con jQuery

topLink es un plugin creado por David Walsh utilizando jQuery.

Cuando tenemos una pagina muy extensa nos vemos en la necesidad de bajar con el scroll, este plugin nos facilita un link cuando lo necesitemos, aparecera y desaparecera segun la posicion en que nos encontremos.

Para tener esta opcion en nuestra web solo tenemos que realizar estos simples pasos:

Crear el CSS para el boton

Esto lo pondremos dentro del head de nuestra pagina.

#top-link
{
	display:none;
	position:fixed;
	right:5px;
	bottom:5px;
	color:green;
	font-weight:bold;
	text-decoration:none;
	border:1px solid green;
	background:Lightgreen;
	padding:10px;
}

Ahora debemos incluir la libreria jQuery 1.2.6 y el plugin ScrollTo dentro del head

<script type="text/javascript" src="jquery-1.2.6.js" ></script>
<script type="text/javascript" src="jquery.scrollTo.js" ></script>

Seguido colocaremos el plugin topLink dentro del head y despues de haber incluido las dos librerias

//plugin
jQuery.fn.topLink = function(settings)
{
	settings = jQuery.extend({
		min: 1,
		fadeSpeed: 200,
		ieOffset: 50
	}, settings);
	return this.each(function() {
		var el = $(this);
		el.css('display','none');
		$(window).scroll(function() {
			//IE hack
			if(!jQuery.support.hrefNormalized) {
				el.css({
					'position': 'absolute',
					'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
				});
			}
			if($(window).scrollTop() >= settings.min)
			{
				el.fadeIn(settings.fadeSpeed);
			}
			else
			{
				el.fadeOut(settings.fadeSpeed);
			}
		});
	});
};

Justo despues de abrir la etiqueta body colocaremos el enlace aparecera y desaparecera en nuestra web.
El href debe hacer referencia al id del primer elemento que tengas en tu web, en este caso es #top.

<a href="#top" id="top-link">Subir</a>

El ultimo paso sera incluir el script que llamara al plugin topLink

//usage w/ smoothscroll
$(document).ready(function() {
	$('#top-link').topLink({
		min: 400,
		fadeSpeed: 500
	});
	$('#top-link').click(function(e) {
		e.preventDefault();
		$.scrollTo(0,300);
	});
});

Esto es todo, como buen ejemplo desplaza hasta el final esta pagina y fijate en la parte inferior derecha.