Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más » tutorial jquery http://www.masquewordpress.com Tutoriales y recursos web sobre JQuery , PHP, Wordpress , twitter. Aprende diseño web y programación Mon, 06 Feb 2012 15:02:11 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Enviar formularios con AJAX y jQuery parte II http://www.masquewordpress.com/enviar-formularios-con-ajax-y-jquery/ http://www.masquewordpress.com/enviar-formularios-con-ajax-y-jquery/#comments Fri, 27 Jan 2012 20:33:17 +0000 Damian http://www.masquewordpress.com/?p=1169 Hace mucho tiempo escribí en el blog como enviar un formulario con AJAX y jQuery mediante el plugin jquery.form.js. A día de hoy y con mucha más experiencia en jQuery prefiero escribir mis propios códigos en lugar de utilizar tantos plugins.
Por lo que hoy les voy a explicar como enviar un formulario con AJAX gracias a jQuery y sin usar ningún plugin.

Para seguir el mismo ejemplo que en el otro post vamos a utilizar el mismo formulario:

<form id="myForm" action="contacto.php" method="post" style="height:200px;"> 
    <label>Nombre:</label> <input type="text" name="name" /> 
    <label>Mensaje:</label> <textarea name="mensaje"></textarea> 
    <input type="submit" value="Enviar" /> <div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/></div>
</form>

Pero ahora para enviar el formulario tan solo haremos uso de algunas funciones de jQuery como son :

  • .serialize() : encargada de codificar todos los valores del formulario en una cadena para ser pasada.
  • .submit(): encargada de añadir al evento submit del formulario la función que usaremos para enviar el mismo.
  • jQuery.ajax(): encargada de realizar AJAX request.

Nuestro nuevo script quedaría de la siguiente manera:

        $(document).ready(function() { 
 
          $('#myForm').submit(function(){ //en el evento submit del fomulario
	          event.preventDefault();  //detenemos el comportamiento por default
 
			  var url = $(this).attr('action');  //la url del action del formulario
			  var datos = $(this).serialize(); // los datos del formulario
			  $.ajax({
				  type: 'POST',
				  url: url,
				  data: datos,
				  beforeSend: mostrarLoader, //funciones que definimos más abajo
				  success: mostrarRespuesta  //funciones que definimos más abajo
			   });
 
          });	
 
 
 
 
        });
 
 
        function mostrarLoader(){
              $('#loader_gif').fadeIn("slow"); //muestro el loader de ajax
        };
        function mostrarRespuesta (responseText){
	          alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text
	          $("#loader_gif").fadeOut("slow"); // Hago desaparecer el loader de ajax
	          $("#ajax_loader").append("<br>Mensaje: "+responseText); // Aca utilizo la función append de JQuery para añadir el responseText  dentro del div "ajax_loader"
        };

Pueden ver un ejemplo online en “Como enviar un formulario AJAX con jQuery”

Pueden descargar el código antiguo en este post

]]> http://www.masquewordpress.com/enviar-formularios-con-ajax-y-jquery/feed/ 0 Scroll con Jquery sin plugins http://www.masquewordpress.com/scroll-con-jquery-sin-plugins/ http://www.masquewordpress.com/scroll-con-jquery-sin-plugins/#comments Tue, 27 Dec 2011 14:06:42 +0000 Damian http://www.masquewordpress.com/?p=1103 Uno de los post más consultados en mi blog es el de jQuery.ScrollTo , que no es ni más ni menos que un plugin para animar la pantalla en lugar de usar los aburridos y anticuados anchors de HTML. Como en dicho en montón de oportunidades no siempre me gusta usar plugin para realizar tareas sencillas.

En el caso de un scroll , si lo que quieren es animar la pantalla para volver a la parte superior de sus sitios webs no hay nada más sencillo para hacer que lo siguiente:

Por ejemplo si en el header a nuestro logo le agregamos la clase .top-page

En el footer podemos colocar un link, una imagen o lo que ustedes quieran como por ejemplo:

1

<a class="top" href="top-page">Click para subir </a>

Por último agregamos el código jQuery encargado de animar nuestro anchor.

1
2
3
4
5
6
7
8

$('document').ready(function(){
$('.top').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $("."+elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
   return false;
});
});
Ver Ejemplo Online ]]> http://www.masquewordpress.com/scroll-con-jquery-sin-plugins/feed/ 0 Validar email con Javascript sin un plugin http://www.masquewordpress.com/validar-email-con-jquery-sin-un-plugin/ http://www.masquewordpress.com/validar-email-con-jquery-sin-un-plugin/#comments Mon, 07 Nov 2011 14:23:28 +0000 Damian http://www.masquewordpress.com/?p=960 Todos saben que no me gusta instalar plugins de jQuery cuando tan solo requiero pequeñas funciones. Por ejemplo para validar un email no creo necesario instalar un plugin que realize validación de formularios sino más bien crear una pequeña función que valide dicho email y listo.

Con esta pequeña función pueden validad direcciones de email con jQuery Javascript.

1
2
3
4
5
6
7
8

function validateEmail($email) {
	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	if( !emailReg.test( $email ) ) {
		return false;
	} else {
		return true;
	}
}

Saludos!!

Update:Como bien comenta Franz en los comentarios no hay jQuery en este artículo. Eso me pasa por escribir apurado sobre un borrador que tenía preparado que en un principio iba a usar jQuery y luego no fue así. Gracias lectores por estar atentos!

]]> http://www.masquewordpress.com/validar-email-con-jquery-sin-un-plugin/feed/ 2 Diferencia entre $(document).ready y $(window).load en jQuery http://www.masquewordpress.com/diferencia-entre-document-ready-y-window-load-en-jquery/ http://www.masquewordpress.com/diferencia-entre-document-ready-y-window-load-en-jquery/#comments Thu, 03 Nov 2011 19:07:27 +0000 Damian http://www.masquewordpress.com/?p=957 Hoy les voy a explicar la principal diferencia entre $(document).ready y $(window).load , funciones esenciales a la hora de usar jQuery en tus programas.

1
2
3

$(document).ready(function(){
//todo el código
});

El código que ven más arriba se suele usar la mayoría del tiempo y en casi todos lados lo mencionan como la mejor manera de ejecutar nuestro código después del que el DOM esta listo.

Entonces para que se necesita $(window).load() ?

Yo hasta ahora lo he utilizado para trabajar con imágenes. Cuando se necesita manipular imágenes para por ejemplo alinearlas o se necesita obtener el width y height de las mismas necesitaremos sí o sí utilizar $(window).load().
Con $(document).ready() no podrás hacer eso si el usuario no tiene cargadas las imágenes en la cache o en otras palabras tu código siempre fallaría con nuevos usuarios.

A diferencia de este último $(window).load() ejecutará el código una vez hayan cargado todas las imágenes. A simple vista no se observa diferencia ninguna en cuanto a tiempo, pero si alguna vez tuvieron que manipular imágenes cuando carga una página sabrán a que me refiero.

1
2
3

$(window).load(function(){
// Código ejecutado después de que se carguen la imágenes.
});

Saludos!!!

]]> http://www.masquewordpress.com/diferencia-entre-document-ready-y-window-load-en-jquery/feed/ 0 Convertir cadenas de texto en números en Javascript http://www.masquewordpress.com/convertir-cadenas-de-texto-en-numeros-en-javascript/ http://www.masquewordpress.com/convertir-cadenas-de-texto-en-numeros-en-javascript/#comments Thu, 20 Oct 2011 13:24:12 +0000 Damian http://www.masquewordpress.com/?p=910 Sencillas funciones que no por ello son menos importantes para poder convertir strings en int o floats. Aunque estas funciones son de Javascript las pueden emplear con jQuery o cualquier otro framework para convertir sus cadenas de texto en números y así poder restar, sumar o realizar cualquier otra operación que necesiten.

Convertir string a entero

1
2
3
4
5
6
7
8

var texto = '1234';
 
// text + 10 = 123410
 
var numero;
numero = parseInt(texto) +10;
 
//numero= 1244

String a decimal:

1
2
3
4
5
6

var texto = '1234.0987';
//texto + 10 = 1234.098710
 
var entero = parseInt(text); // entero = 1234
var decimal = parseFloat(text); // decimal = 1234.0987
//decimal + 10 = 1244.098710

Reducir el número de decimales:

1
2
3

var numero = 1234.0987;
 
numero = numero.toFixed(2); // numero = 1234.09
]]> http://www.masquewordpress.com/convertir-cadenas-de-texto-en-numeros-en-javascript/feed/ 0 Contar o Limitar la cantidad de palabras con jQuery http://www.masquewordpress.com/contar-limitar-la-cantidad-de-palabras-con-jquery/ http://www.masquewordpress.com/contar-limitar-la-cantidad-de-palabras-con-jquery/#comments Thu, 13 Oct 2011 14:02:47 +0000 Damian http://masquewordpress.com/?p=846 Se acuerdan que el otro día creamos un plugin para limitar las letras de un textarea? Y que pasa si lo que necesitamos en limitar la cantidad de palabras? Aunque en principio no parezca de utilidad hay ocasiones donde necesitaremos hacerlo o simplemente necesitaremos contar la cantidad de palabras de un textarea para mostrarlo en un mensaje.

Contar la cantidad de palabras de un textarea

1
2
3
4

$('#textarea_id').keyup(function(){
     var palabras = $(this).val().split(/\b[\s,\.\-:;]*/).lenght;
     $('#contador').text('Has escrito en total '+ palabras +' palabras');
});

Lo que hacemos en cada vez que se levanta una tecla(keyup) comprobamos el valor del textarea y lo dividimos(split) en palabras mediante la regla de regex que prácticamente se encarga de separar las palabras por espacios, guiones ,etc. Una vez que tenemos todas las palabras con lenght obtenemos la cantidad.
Por último modificamos el campo contador con la cantidad de palabras de nuestro textarea.

Limitar la cantidad de palabras de un textarea

Para esto vamos a crear una nueva función

1
2
3
4
5

function limitar_palabras(texto, limite){
var palabras = texto.split(/\b[\s,\.\-:;]*/,limite);
texto=palabras.join(" ");
return texto;
}

En esta función añadimos la variable limite al .split y luego unimos el resultado con espacios usando .join.

Por lo que el código todo junto quedaría de la siguiente forma:

1
2
3
4
5
6
7
8
9
10

$(document).ready(function(){
    $('#textarea_id').keyup(function(){
        $(this).val(limitar_palabras($(this).val(),3));
    });
});
function limitar_palabras(texto, limite){
    var palabras = texto.split(/\b[\s,\.\-:;]*/,limite);
    texto=palabras.join(" ");
    return texto;
}

Facil y sencillo verdad? Porque no prueban a crear su propio plugin de jQuery con estos sencillos pasos? Saludos!!

 

Actualizado

Actualización

He cambiado el regex para que también detecte números como palabras . Ahora “-” esta “\-”.

]]> http://www.masquewordpress.com/contar-limitar-la-cantidad-de-palabras-con-jquery/feed/ 1 Plugin jQuery para limitar caracteres en un campo de texto http://www.masquewordpress.com/plugin-jquery-para-limitar-caracteres-en-un-campo-de-texto/ http://www.masquewordpress.com/plugin-jquery-para-limitar-caracteres-en-un-campo-de-texto/#comments Thu, 06 Oct 2011 15:36:02 +0000 Damian http://masquewordpress.com/?p=811

[offtopic] Antes de empezar este artículo quiero dar mis condolencias a la Familia Jobs. Para mi Steve Jobs siempre fue un grande , incluso antes de enamorarme de sus productos y SO. Siempre recomiendo ver un discurso dado por el para los alumnos de Standford Bridge. Lo pueden encontrar en http://www.youtube.com/watch?feature=player_embedded&v=14v3kV47oZU [/offtopic]

Hoy les voy a enseñar 2 cosas. Como limitar los caracteres de un campo de texto ya sea un textarea o un input y como crear un plugin de Jquery.

Lo primero que necesitamos en un nuevo formulario dentro de una página HTML y le vamos a agregar un etiqueta span que será donde mostremos los caracteres que nos quedan con id=”counter”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script  type="text/javascript">
        $(document).ready(function() {
        //Nuestras funciones jQuery
        });
    </script>
</head>
<body>
    <form  id="formulario"  method="POST" action="?">
    <textarea  id="text"></textarea>
    <span  id="counter"></span>
    <input type="submit"  value="submit">
</form>
</body>
</html>

Ahora escribamos nuestra función para mostrar cuantos caracteres nos quedan.

1
2

var caracteres= 100;
$("#counter").html("Te quedan <strong>"+ caracteres+"</strong> caracteres");

Creamos una función que en el evento keyup que compruebe que la cantidad de caracteres escritos no es mayor que el limite que establecimos anteriormente. En caso contrario borra el valor de campo que excede dicho limite:

1
2
3
4

$("#text").keyup(function(){
    if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
}

Explicando un poco esta función vemos que cada vez que se levanta el dedo de un tecla obtenemos el length(cantidad) de caracteres del valor(val) de nuestro campo de texto y lo comparamos con la cantidad estipulada anteriormente.
Si es mayor el valor del campo es sustituido por el valor actual menos el limite estipulado. Es decir, con la función substr recortamos la cadena de texto desde el caracter 0 hasta 100 y el resultado sustituye el valor del campo de texto.

Ahora cambiemos la frase de nuestro counter.

1
2

var  quedan = caracteres - $(this).val().length;
$("#counter").html("Te quedan <strong>"+ quedan+"</strong> caracteres.");

Aquí solamente restamos el limite establecido menos la cantidad de caracteres de nuestro campo.

Y si queremos agregarle un toque de color podemos hacer lo siguiente:

1
2
3
4
5
6
7
8

if(quedan <= 10)
{
    $("#counter").css("color","red");
}
else
{
    $("#counter").css("color","black");
}

Si nos quedan menos de diez caracteres , nuestro mensaje se volvera rojo!

El script entero entonces queda de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(document).ready(function()  {
    var caracteres = 220;
    $("#counter").html("Te quedan <strong>"+  caracteres+"</strong> caracteres.");
    $("#text").keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
    var quedan = caracteres -  $(this).val().length;
    $("#counter").html("Te quedan <strong>"+  quedan+"</strong> caracteres.");
    if(quedan <= 10)
    {
        $("#counter").css("color","red");
    }
    else
    {
        $("#counter").css("color","black");
    }
    });
});

Pueden ver el ejemplo funcionando en http://jsfiddle.net/sa4HH/

Crear un Plugin jQuery para delimitar los campos de texto

Por lo general vamos a necesitar este código en más de una ocasión y para varios campos de texto, por lo que repetir todo una y otra vez no es aceptable. En este caso nos conviene crear un simple plugin de jQuery que será facil de aplicar.
Para ello siguiendo la lógica de jQuery vamos a crear la base de nuestro plugin que lo vamos a llamar “limitar”:
¡

1
2
3
4
5
6
7
8

(function($){
    $.fn.limitar = function(options) {
      defaults = {
        limite: 200,
        id_counter: false,
        clase_alert: false
     }
   var options = $.extend(defaults,  options);

Al declarar nuestro plugin limitar hemos creado unos valores por defecto que paso a explicar.

  • limite: Es el límite por defecto. En este caso 200 caracteres.
  • id_counter: Es el id del campo donde mostraremos el mensaje de caracteres faltantes. Por defecto es false, por lo que no mostraríamos ningún mensaje.
  • clase_alert: En lugar de cambiar el color si los caracteres son menos que diez vamos a asignarle un clase para así dar más libertad a la hora de aplicar estilo a este mensaje de alerta. Por defecto no se asigna ninguna clase ya que es false.

Ahora debemos terminar la función de nuestro plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

return this.each(function() {
    var caracteres = options.limite;
    if(options.id_counter != false)
    {
        $("#"+options.id_counter).html("Te quedan <strong>"+ caracteres +"</strong> caracteres.");
    }
    $(this).keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
        if(options.id_counter != false)
        {
            var quedan =  caracteres - $(this).val().length;
            $("#"+options.id_counter).html("Te quedan <strong>"+ quedan +"</strong> caracteres");
            if(quedan <= 10)
            {
                $("#"+options.id_counter).addClass(options.clase_alert);
            }
            else
            {
                $("#"+options.id_counter).removeClass(options.clase_alert);
            }
        }
    });
});

Estamos replicando nuestra función del principio con la única diferencia que usamos los valores dentro del array options para dar más flexibilidad al código y miren que sin por ejemplo options.id_counter es false nunca mostraremos el mensaje.

El plugin entero que debemos guardar como jquery.limitar.js quedaría de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

(function($){
    $.fn.limitar = function(options) {
      defaults = {
        limite: 200,
        id_counter: false,
        clase_alert: false
     }
   var options = $.extend(defaults,  options);
   return this.each(function() {
    var caracteres = options.limite;
    if(options.id_counter != false)
    {
        $("#"+options.id_counter).html("Te quedan <strong>"+ caracteres +"</strong> caracteres.");
    }
    $(this).keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
        if(options.id_counter != false)
        {
            var quedan =  caracteres - $(this).val().length;
            $("#"+options.id_counter).html("Te quedan <strong>"+ quedan +"</strong> caracteres");
            if(quedan <= 10)
            {
                $("#"+options.id_counter).addClass(options.clase_alert);
            }
            else
            {
                $("#"+options.id_counter).removeClass(options.clase_alert);
            }
        }
    });
});
};
})(jQuery);

Para usarlo tan solo debemos llamarlo de la siguiente manera (no se olviden de crear la clase para dar estilo al mensaje de alerta):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script  type="text/javascript" src="jquery.limit.js"></script>
<style>
.alert{
    color: red;
    font-weight:bold;
}
</style>
<script  type="text/javascript">
    $(document).ready(function() {
        $("#testo").limitar({
            limite: 100,
            id_counter: "counter",
            clase_alert: "alert"
            });
         });
</script>

Pueden ver el ejemplo funcionando en http://jsfiddle.net/V7Gs6/1/

Saludos!!!!!

]]> http://www.masquewordpress.com/plugin-jquery-para-limitar-caracteres-en-un-campo-de-texto/feed/ 4 Como crear una aplicación de Twitter con PHP http://www.masquewordpress.com/como-crear-una-aplicacion-de-twitter-con-php/ http://www.masquewordpress.com/como-crear-una-aplicacion-de-twitter-con-php/#comments Fri, 12 Nov 2010 02:28:35 +0000 Damian http://masquewordpress.com/?p=694 Hace unos días les hable de como integrar Twitter anywhere en 5 minutos y luego les mostré un poco acerca de la nueva api javascript de @anywhere, incluso hace tiempo les explique como actualizar twitter a través de PHP + Oauth.

En este último articulo utilizaba una librería de PHP llamada twitteroauth.php que hoy voy a explicar un poco más , y les va a permitir junto con un poquito de JQuery crear una aplicación completa de twitter en PHP siempre que lo requieran.

1. Estructura HTML de la aplicación

Nuestra aplicación consta de un boton para hacer login a Twitter que solo aparece la primera vez que ingresamos.
Una vez echo login nos mostrará un formulario de texto donde escribiremos los tweets junto a un boton para enviar, tres pestañas en JQuery para cambiar del Timeline a los @Mentions y a los Mensajes directos.
Y por último el timeline.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<div id="twitter-feed">
                 <span id="letras"></span>
                <form name="tweet_post" method="post" style="width: 400px; margin: 0pt auto;clear:right;">
                	<textarea rows="4" cols="49" name="tweet_txt" id="tweet_txt" onKeyUp="contar(this);"></textarea>
						<input type="hidden" name="reply_id" id="t_reply"/>
                	<button id="tweet_submit" class="tweet_button">Submit</button>
                </form>
 
               <ul class="t_tab">
			<li class="t_selected" id="#t_timeline">Timeline</li>
			<li id="#t_mentions">@Mentions</li>
			<li id="#t_messages">Messages</li>
		</ul>
 
               <div id="t_timeline" class="tab_content">
               <ul>
                   <li>
			<div class="foto">
				<img src="" alt="" width="" /> 
			</div>
			<a href="" title="">Nombre de usuario Twitter</a>
			<br/>Texto del tweet<br/>
                        <div style="text-align:right">
				 <a href="#" onClick="javascript:">Reply</a>
			</div>
		 </li>
           </ul>
          </div>
 
<div style="clear: both;"></div>
</div>

Una vez realizada la estructura de nuestra aplicación vamos a llenarla con PHP y todos los valores necesarios

2. Estructura de archivos – Como funciona la aplicación

La aplicación funciona de la siguiente manera :
El usuario ingresa a index.php y hace click en conectar que lo lleva a redirect.php (aunque no se percata de ello) que es donde se obtiene las credenciales temporales, de aquí va a la página de Twitter donde se loguea con sus datos.
Una vez logueado es redirigido a callback.php( no se percata de ello) donde se verifica que las credenciales sean correctas y se envia de vuelta a la página principal.
En caso de que algo falle tanto en redirect.php o callback.php el usuario es enviado a clearsessions.php( no se percata de ello) que es donde se borran todas las sesiones y se envia el usuario a la página principal para que empieze el proceso nuevamente.
Como pueden ver para ojos del usuario será tan simple como boton de loguin , ingresar datos de su cuenta en twitter.com y vuelta a la aplicación ya funcionando.

Veamos todos los archivos involucrados

  • index.php: Será la página principal donde enlazaremos nuestra hoja de estilos css, Jquery y donde se verá la estructura principal.
  • twitter_init.php : Aca vamos a inicializar la librería de twitter y almacenar todo en la variable $twitter_content.
  • callback.php: Archivo que recibe al usuario desde twitter
  • redirect.php: Archivo que enviar al usuario a twitter
  • clearsessions.php: Archivo que borra las sesiones en caso de error
  • twitteroauth/config.php: Archivo de configuración con los datos de nuestro programa
  • twitteroauth/twitteroauth.php: Librería twitteroauth
  • twitteroauth/OAuth.php: Librería OAuth

3. La aplicación y los tres archivos importantes

Para nosotros los únicos archivos importante seran index.php , twitter_init.php y config.php. Los demás voy a obviarlos para no complicarlos, simplemente porque son archivos que no van a cambiar nunca, igualmente esta comentados paso por paso en el código.

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<? session_start();?>
<!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>Como Crear una aplicación de  Twitter con PHP + OAuth</title>
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen"/> 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
 
	    $("ul.t_tab li").click(function()     //cada vez que se hace click en un li
       {
		$("ul.t_tab li").removeClass("t_selected"); //removemos clase active de todos
		$(this).addClass("t_selected"); //añadimos a la actual la clase active
		$(".tab_content").hide(); //escondemos todo el contenido
 
		var content = $(this).attr("id"); //obtenemos el atributo id
		$(content).fadeIn(); // mostramos el contenido
		return false; //devolvemos false para el evento click
	});
 
});
 
function replyTo(id,name){
			$('#t_reply').val(id);
			$('#tweet_txt').val("@"+name+" ").focus();
 
			return false;
}
function contar(input) {
//Comprobamos que no pase de 140 caracteres y si pasa, que borre los sobrantes
if (input.value.length >= 140) {
input.value = input.value.substring(0,140);
}
//alamacenamos el resto
var resto = 140 - input.value.length;
 
//imprimimos los caracteres restantes en el span
$('#letras').html(resto);
 
}
</script> 
<?
include_once('twitter_init.php');
?>
</head>
  <body>
  <div id="header">
  <h3>Como crear una aplicaci&oacute;n de Twitter con PHP. M&aacute;s tutoriales en <a href="http://masquewordpress.com">http://masquewordpress.com</a> </h3>
</div>
	<div id="twitter-feed">
<? echo $twitter_content;?>
 
		<div style="clear: both;"></div>
	</div>
 
</body>
</html>

Como pueden ver es muy sencillo, igualmente vamos a explicar un poco que es lo que vemos:

  • Primero iniciamos con session_start() , esto lo usaremos para almacenar los tokens de Twitter en vez de usar los mismos siempre como hacíamos en mi tutorial de Actualizar twitter con PHP + Oauth, ya que ahora no serán nuestros tokens, sino que serán los de los diferentes usuarios que quieran usar nuestro programa
  • Enlazamos nuestra hoja de estilo CSS
  • Enlazamos a la última versión de JQuery
  • Creamos la función JQuery para las pestañas
  • Función que se encarga de escoger el atributo id en caso de que respondamos algún tweet y añade su @nombre al formulario
  • Función que cuenta los caracteres restantes de nuestro tweet
  • Incluimos twitter_init.php
  • Y por último imprimos el resultado con


twitter_init.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

<?
require_once('twitteroauth/twitteroauth.php');
require_once('twitteroauth/config.php');
 
 
if (empty($_SESSION['access_token']) || empty($_SESSION['access_token']['oauth_token']) || empty($_SESSION['access_token']['oauth_token_secret'])) {
 
   $twitter_content='<div class="tweet_login"><a href="redirect.php"><img src="twitteroauth/images/lighter.png" alt="Sign in with Twitter"/></a></div>';
				}else{
				/* Recuperar los datos de la session. */
				$access_token = $_SESSION['access_token'];
 
				/* Creamos el objeto twitterOauth. */
				$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token['oauth_token'], $access_token['oauth_token_secret']);
 
				/* Verificamos credenciales. */
				$content = $connection->get('account/verify_credentials');
 
 
				/* Formulario */
				$twitter_content='<span id="letras"></span>
                <form name="tweet_post" method="post" style="width: 400px; margin: 0pt auto;clear:right;">
                	<textarea rows="4" cols="49" name="tweet_txt" id="tweet_txt" onKeyUp="contar(this);"></textarea>
						<input type="hidden" name="reply_id" id="t_reply"/>
                	<button id="tweet_submit" class="tweet_button">Submit</button>
                </form>
				';
				/* Si hay un mensaje nuevo lo publicamos */
				if($_POST['tweet_txt']){
						/* En caso de ser respuesta, publicarlo como tal */
						if($_POST['reply_id']!=''){
							$connection->post('statuses/update', array('status' => $_POST['tweet_txt'],'in_reply_to_status_id' => $_POST['reply_id'] ));
						}else{
							$connection->post('statuses/update', array('status' => $_POST['tweet_txt']));
						}
 
				}
				/*Función que añade los links */
				function twitify($string){
					$t= preg_replace('/(http|https)(:\/\/)([^ ]+)/i', '<a href="$1$2$3">$1$2$3</a>', $string);
 
					$t=  preg_replace('/@([^ :]+)/i', '<a href="http://twitter.com/$1">@$1</a>', $t);
					$t=  preg_replace('/#([^ :]+)/i', '<a href="http://search.twitter.com/search?q=%23$1">#$1</a>', $t);
					return $t;
				}
 
				 /* Pestañas */
				 $twitter_content.='<ul class="t_tab">
				 						<li class="t_selected" id="#t_timeline">Timeline</li>
										<li id="#t_mentions">@Mentions</li>
										<li id="#t_messages">Messages</li>
									</ul>';
 
 
				/* Obtenemos el timeline */
				$t = $connection->get('statuses/home_timeline', array('count' => 40));					
				$twitter_content.='<div id="t_timeline" class="tab_content"><ul>';
				foreach($t as $k=>$val){
 
					$twitter_content.='<li>
						<div class="foto">
							<img src="'.$val->user->profile_image_url.'" alt="'.$val->user->name.'" width="48px" /> 
						</div>
						<a href="http://twitter.com/'.$val->user->screen_name.'" title="'.$val->user->name.'">'.$val->user->name.'</a>
						<br/>'.twitify($val->text).'<br/>
						<div style="text-align:right">
							<a href="#" onClick="javascript: replyTo(\''.$val->id.'\',\''.$val->user->screen_name.'\');">Reply</a>
						</div>
 
						</li>';
 
				}
				$twitter_content.='</ul></div>';
 
				/* Obtenemos las menciones */
				$t = $connection->get('statuses/mentions', array('count' => 20));  
				$twitter_content.='<div id="t_mentions" class="tab_content" style="display:none;"><ul>';
				foreach($t as $k=>$val){
 
					$twitter_content.='<li>
					<div class="foto">
						<img src="'.$val->user->profile_image_url.'" alt="'.$val->user->name.'" width="48px" />
					</div> 
					<a href="http://twitter.com/'.$val->user->screen_name.'" title="'.$val->user->name.'">'.$val->user->name.'</a>
					<br/>'.twitify($val->text).'<br/>
					<div style="text-align:right">
						<a href="#" onClick="javascript: replyTo(\''.$val->id.'\',\''.$val->user->screen_name.'\');">Reply</a>
					</div>
					</li>';
 
				}
				$twitter_content.='</ul></div>';	
 
				/* Mensajes directos */	
				$t = $connection->get('direct_messages', array('count' => 20));  
				$twitter_content.='<div id="t_messages" class="tab_content" style="display:none;"><ul>';
				foreach($t as $k=>$val){
 
					$twitter_content.='<li>
					<div class="foto">
						<img src="'.$val->sender->profile_image_url.'" alt="'.$val->sender->name.'" width="48px" />
					</div> 
					<a href="http://twitter.com/'.$val->sender->screen_name.'" title="'.$val->sender->name.'">'.$val->sender->name.'</a>
					<br/>'.twitify($val->text).'<br/>
					<div style="text-align:right">
						<a href="#" onClick="javascript: replyTo(\''.$val->id.'\',\''.$val->sender->screen_name.'\');">Reply</a>
					</div>
					</li>';
 
				}
				$twitter_content.='</ul></div>';	
 
 
				}
				?>

Expliquemos un poco que es lo que vemos:

  • Incluyo las dos librerías necesarias para que todo funcione
  • Compruebo si esta el usuario loguedo y muestro boton en caso negativo ( siempre almaceno todo en $twitter_content)
  • En caso de estar logueado recupero los datos de la sesion.
  • Creo el objeto twitterOauth
  • Verifico las credenciales
  • Creo el formulario
  • Compruebo si se ha enviado un mensaje y si es en respuesta de algún otro. En caso afirmativo lo posteo en twitter
  • La siguiente función es muy interesante ya que se encarga de añadir los links a los @usuarios ,#tags y url ya que cuando recuperamos un timeline de twitter este lo envía en texto plano ( sin código HTML como <a href>)
  • Añado las pestañas para moverme por los diferentes timelines
  • Y por último obtengo los tres timeline ( Timeline, menciones y mensajes directos)


config.php

1
2
3

define('CONSUMER_KEY', 'Tu consumer key');
define('CONSUMER_SECRET', ' Tu consumer secret');
define('OAUTH_CALLBACK', 'Tu dirección donde tienes el archivo callback.php');

Como ven este archivo no tiene complicación alguna y se trata simplemente de configurar unos valores predeterminados. Para obtener el CONSUMER_KEY pueden leer mi tutorial de Twitter + PHP + OAuth

Y con todo lo visto anteriormente más un poco de CSS podemos crear una aplicación para Twitter echa en PHP

Les recomiendo ampliamente echar un vistazo a todos los archivos para entender mejor su funcionamiento. Un saludo y espero que les haya gustado.

]]> http://www.masquewordpress.com/como-crear-una-aplicacion-de-twitter-con-php/feed/ 20 Como redondear las esquinas de un DIV con jquery.corners http://www.masquewordpress.com/como-redondear-las-esquinas-de-un-div-con-jquery-corners/ http://www.masquewordpress.com/como-redondear-las-esquinas-de-un-div-con-jquery-corners/#comments Thu, 09 Jul 2009 21:40:12 +0000 Damian http://masquewordpress.com/?p=177 Si hay algo que me gusta usar en mis proyectos son cuadros con esquinas redondeadas. Siempre queda bien y le da un aire moderno a la web. Es muy facil de hacer y tiene un monton de utilidades como por ejemplo para marcos de fotos, redondear tablas, botones o simplemente divs redondos.

rounded

Hay infinidad de plugins que cumplen esta función pero a mi el que más me gusta es JQuery Corners.

Para utilizarlo como siempre debemos utilizar la ultima version de JQuery y del plugin.

1
2

<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>

Con esto tendriamos el plugin cargado. En este ejemplo voy a hacer que tanto el div como la foto tengan tengan la clase “rounded” por lo que para aplicar el plugin hago lo siguiente:

1
2
3
4
5
6
7

<script type="text/javascript">
 
$(document).ready(function(){
//espero que cargue el DOM y aplico el plugin a todos los elemento con clase rounded
	$('.rounded').corners();
		});
</script>

Tan solo nos quedaria añadir el código HTML :

1
2
3
4
5

<div id="wrapper">
<div id="cuadro1" class="rounded"> Div con gif degradado de fondo </div>
 
<img id="cuadro2" class="rounded" src="images/gatito.jpg"/>  Marco para foto redondo 
</div>

Y aplicarle un estilo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<style>
body {
color:#666666;
font-family:'Trebuchet MS',sans-serif;
font-size:14px;
line-height:1.5em;
text-align:justify;
}
#cuadro1{
	background:#D7E9F3 url(images/intro2.gif) repeat-x scroll left top;
	margin-bottom:50px;
	padding:30px 80px;
}
#cuadro2{
	padding:10px;
	background-color:#EEEEEE;
    border:1px solid #CCCCCC;
	margin-right:50px;
}
#wrapper{
	width:370px;
	margin:0 auto;
}
</style>

Otra cosa a tener en cuenta es que podemos pasarle opciones como por ejemplo un radio de 8px y que sea transparente (en caso de tener imagenes o hover states):

1

$('.rounded').corners("8px transparent");

Pueden ver el ejemplo terminado en esta página.

Descargar Ejemplo

ACTUALIZACIÓN
Como menciona Jereny en IE no redondea las imágenes. Si quieren hacer un marco para la imagen redondeado lo pueden hacer de la siguiente forma:

1

<div id="cuadro2" class="rounded"><img  src="images/gatito.jpg"/></div>  Marco para foto redondo

El código CSS varia en cuanto a IE como Firefox

1
2
3
4
5

#cuadro2{
	padding:10px;
	background-color:#EEEEEE;
        border:1px solid #CCCCCC;  <------ ESTA LINEA NO FUNCIONA EN IE, ya que no redondea el borde
	}
]]> http://www.masquewordpress.com/como-redondear-las-esquinas-de-un-div-con-jquery-corners/feed/ 15