24Ago 2009 3 Comments */?>

Como añadir Google custom search a WordPress y modificar el template page

Categorías: Tips de wordpress, Tutoriales, Wordpress - Tags: ,

En este tutorial les voy a explicar una de las formas para agregar google custom search a wordpress. Como saben los que me siguen hace tiempo, no siempre me gusta usar plugins ya que el template de mi wordpress esta modificado y no siempre funcionan a la perfección.

Lo primero que necesitamos es ir a la página de Adsense y crear un motor de búsqueda personalizado.

Ingresas los datos que pide el formulario:

  1. En “¿Qué quiere buscar? seleccionamos Sólo los sitios que seleccione.
  2. En “Seleccione algunos sitios debemos ingresar la URL del blog donde se va a realizar la búsqueda.
  3. En “Seleccione una edición seleccionamos Edición estándar.
  4. En “Palabras clave” podes poner algunos keywords que describar tu blog.
  5. Despues elegimos el lenguaje de tu blog.
  6. El formato o estilo de  la caja de texto. ( Más adelante voy a explicar como cambiar el estilo)
  7. Y donde abrir los resultados. En este caso elegimos nuestro propio sitio y ponemos una dirección del estilo “http://masquewordpress.com/buscar“.
  8. Elegimos solo mostrar anuncios en la parte derecha(esto a gusto de cada uno).
  9. Cambiamos el estilo con la paleta de colores.
  10. Aceptamos las Condiciones de servicio.
  11. Elegimos un nombre para el buscador y le damos a obtener el código.

Seguir leyendo

22Ago 2009 0 Comments */?>

Listado de las mejores fuentes echas a mano para diseños.Parte II

Categorías: Recursos - Tags:

Siguiendo el hilo del post anterior aca les dejo el resto del listado de fuentes tipográficas echas a mano.

MrHodgey

19
Seguir leyendo

20Ago 2009 1 Comment */?>

Listado de las mejores fuentes echas a mano para diseños.Parte I

Categorías: Recursos - Tags:

De la mano de Smashing magazine llega este listado impresionante de fuentes tipográficas de estilo “echas a mano”. Algunas de ellas echas a mano realmente y escaneadas luego a la computadora. Son ideales para inspirarse o para el diseño creativo usando un estilo diferente al que estamos acostumbrados.

Fiodor Sumkin

1

Maxwell Lord

2
Seguir leyendo

18Ago 2009 0 Comments */?>

Como mostrar posts de forma aleatoria en el sidebar de wordpress

Categorías: Wordpress - Tags:

Hoy estuve mirando como hacer para mostrar algunos posts de forma aleatoria en el sidebar derecho de mi blog. Esto además de servir para que mis lectores vean una selección de posts al azar ,y así descubrir alguno que les sea de interes, es de utilidad para que los buscadores indexen más cantidad de páginas y así aumentar la posibilidad de que indexen todo el sitio.
Aunque existen infinidad de Plugins que crean widgets para realizar esta función, yo buscaba algo más simple y que pudiera agregar yo a mi template. Si algo he descubierto últimamente es que los widgets no se llevan bien con los templates modificados.
Despues de navegar por unos minutos di con un template tag (Se utilizan para mostrar información dinámica y así poder crear o modificar templates de una forma facil).

La template tag es cuestión es :

1
 <?php get_posts('arguments'); ?>

Donde la función get_posts se encarga de devolver cierta cantidad de posts dependiendo de los argumentos que le pasemos. Veamos algunos ejemplos:

1.Últimos Posts ordenados alfabeticamente por título.

El siguiente código muestra los últimos 10 posts ordenados alfabeticamente de forma ascendente. De ellos mostrará la fecha, el título y el extracto del artículo.

1
2
3
4
5
6
7
8
9
10
11
12
<?php
 $postslist = get_posts('numberposts=10&order=ASC&orderby=title');
 foreach ($postslist as $post) : 
    setup_postdata($post);
 ?> 
 <div>
 <?php the_date(); ?>
 <br />
 <?php the_title(); ?>   
 <?php the_excerpt(); ?>
 </div>
 <?php endforeach; ?>

1.Mostrar Posts de forma aleatoria.

El siguiente código mostrará 5 posts elegidos al azar por la función MySQL RAND() en el atributo orderby. Esta es la función que utilizo yo en mi barra lateral derecha para mostrar últimos artículos.

1
2
3
4
5
6
7
8
9
<h2>Últimos artículos</h2>
    <ul>
 <?php
 $rand_posts = get_posts('numberposts=6&orderby=rand');
 foreach( $rand_posts as $post ) :
 ?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
 <?php endforeach; ?>
    </ul>

Como pueden ver es muy fácil obtener los posts con diferentes opciones. Para ver un listado completo de opciones consulten la página de codex wordpress. Un saludo y hasta otra.

16Ago 2009 2 Comments */?>

Como proteger a tus usuarios cuando te hackean la base de datos

Categorías: Seguridad, Tutoriales - Tags:

Como proteger a tus usuarios cuando te hackean la base de datos? o en otras palabras ¿Como mejorar un HASH MD5 para que no sea tan facil de descifrar?

Para empezar, vamos a explicar que es un HASH MD5 . MD5 es un algoritmo de reducción criptográficos diseñados por el profesor Ronald Rivest del MIT. Hoy en dia es el sistema más utilizado en internet para almacenar las contraseñas . Por lo general cada vez que nos registramos en una web , foro, blog, etc , nuestra contraseña pasa a formar parte de una base de datos que se va a usar cada ves que queremos logear en dicha web para comprobar nuestra identidad.

El algoritmo MD5 es usado para no almacenar las contraseñas como simple cadenas de texto y así proteger la privacidad de cada uno. Imaginense lo que un administrador malicioso o descontento podría hacer con un listado de emails y sus respectivas contraseñas…

Todo programa web , foro , blog ,etc suele traer algun BUG o fallo de software que un usuario mal intensionado puede aprovechar para acceder de forma ilícita y substraer datos importantes (Por eso siempre hay que mantener las actualizaciones al día). El botín más preciado suelen ser las base de datos que cuentan con miles y miles de usuarios. Haganse una idea que cada página que nos registramos nos pide un email y por lo general la gente (me incluyo) suele usar la misma contraseña una y otra ves ( email, foros, paypal, banco, etc).

La función md5 de PHP tiene un solo sentido —>  por lo que si la contraseña es “pepe” su HASH (o cadena) en md5 es 926e27eecdbc7a18858b3798ba99bddd .

1
2
$pass=md5('pepe');
//$pass= '926e27eecdbc7a18858b3798ba99bddd'

Cuando el usuario se conecta e ingresa su clave simplemente se comprueba si el hash md5 de la contraseña ingresada concuerda con el hash md5 almacenado en la base de datos. No existe una función que devuelva de un hash md5 su valor en texto plano.
Pero lo que si existe hoy en día ,son grandes base de datos con millones de hash md5 y sus respectivos valores en texto plano. Por lo que si usamos una contraseña facil o comun es 100% seguro que aparecerá en dicha base de datos.

También existen webs con cientos de ordenadores interconectados que se dedican a crackear los hash md5 y si la contraseña no es compleja (numeros + letras + mayusculas) suelen dar con ella en cuestión de horas o minutos.

Volviendo al principio, y suponiendo que un usuario mal intencionado consiguió acceso a nuestra base de datos , aun tenemos una forma de protegernos. Es mediante la combinación de un hash md5 y una cadena de texto aleatoria, más conocida como SALT.

Para agregar salt a un hash md5 debemo seguir este simple paso:

1
2
3
$contraseña =$_POST['pass'];
$salt= 'Soy un pedazo de texto aleatorio lalalala';
$pass=md5($contraseña . $salt);

Con esa pequeña modificación ya seria imposible crackear el hash md5 siempre y cuando no dispongan del salt. Por lo que si solo tuvieron acceso a la base de datos, lo máximo que nos podrian sacar es un listado de emails, pero no sus respectivos passwords.

Espero que haya servido de ayuda, cualquier duda dejen un comentario.

15Ago 2009 4 Comments */?>

Como crear una página de lanzamiento con PHP, AJAX y JQuery – II Parte

Categorías: JQuery, MySQL, PHP, Tutoriales - Tags: ,

Hoy les voy a explicar como crear un formulario AJAX para nuestra página de lanzamiento y así poder crear una base de datos con los emails de nuestros visitantes que quieren manternerse actualizados con novedades, etc.

cuenta-atras

Siguiendo la estructura básica de una web vamos a necesitar varios archivos para lo que queremos hacer:

Como ya tenemos definido el archivo db.php tal y como se explico en su día , pasamos al archivo ajax_usuarios.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// compruena la variable $_POST 
if(isset($_POST['email']) && $_POST['email']!= ''){
     /* Conectamos a la base de datos */
     include('config/db.php');
     $conn=get_db_conn();
     /* Protejo SQL injection */
     $email = cleanQuery($_POST['email']);
     /* Realizo consulta SQL */
     $query = "INSERT INTO listado_emails (email) VALUES ('$email')";
     mysql_query($query,$conn);
    // Mensaje de respuesta
     echo $email .' fue ingresado a la base de datos correctamente!!!!!!';
} else { 
     // En caso de q la variable no este iniciado o no tenga caracteres el mensaje de respuesta es el siguiente
 echo 'Hubo un error, intenta otra ves.'; 
}
?>

El código de index.php también va a cambiar ya que agregamos nuevos plugins de JQuery y el formulario para ingresar emails

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
60
61
62
63
64
65
<!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=ISO-8859-1" />
<title>Timersys</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<link href="css/jqtransform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="js/jquery.epiclock.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
	// Cuenta atras					   
	   jQuery('#text').epiclock({mode: EC_COUNTDOWN, format: 'V{<sup>dias</sup>} x{<sup>horas</sup>} i{<sup>minutos</sup>} s{<sup>segundos</sup>}', target: 'January 1, 2012 00:00:00'}).clocks(EC_RUN);  
 
	   //Esquinas redondeadas
	   $('.rounded').corners('transparent');
 
	   //Transformar el formulario
	   $("form.jqtransform").jqTransform();
 
 
	   // definimos las opciones del plugin AJAX FORM
            var opciones= {
 
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario email_list y le pasamos las opciones
            $('#email_list').ajaxForm(opciones) ;
 
             //lugar donde defino las funciones que utilizo dentro de "opciones"
 
             function mostrarRespuesta (responseText){
                          $("#update").fadeOut("slow"); // Hago desaparecer el formulario
                          $("#succes").fadeIn("slow").html(responseText); //muestro mensaje 
             };
 
 
		});
</script> 
 
</head>
<body>
 
<div id="header">
  <h3>Como crear una P&aacute;gina de lanzamiento. M&aacute;s tutoriales en: <a href="http://masquewordpress.com">http://masquewordpress.com</a> </h3>
</div>
<div id="wrapper">
	<div id="cuadro2" class="rounded">
	<div id="text" class="count_down"></div>
	</div>
    <div id="update">
 
    <form id="email_list" class="jqtransform" action="ajax_usuarios.php" method="post">
    <input type="text" class="input_text" name="email" value="Ingresa tu email para recibir actualizaciones" onclick="this.select();" />
    <input type="submit" value="ENVIAR"  class="input_button" />
     </form>
	</div>
    <div id="succes"></div>
</div>
</body>
</html>

Con esto y un poco de código CSS ya tendriamos nuestra página de lanzamiento lista , y ademas podriamos juntar una base de datos con emails de los usuarios para poder enviarles actualizaciones.

Como siempre pueden ver el EJEMPLO TERMINADO

Y descargar el código fuente .( Recuerden de editar el archivo db.php con los datos de su propia base de datos y crear las tablas necesarias)

15Ago 2009 2 Comments */?>

jqTransform : Aplica estilo a tus formularios de una forma sencilla

Categorías: JQuery, Recursos - Tags:

Con jqTransform nunca fue tan facil modificar el aspecto de un formulario dandole un aire elegante en cualquier navegador.

jqtransform

La forma de implementarlos es como siempre super sencilla:

1- Añadir el plugin a la cabezera de tu web

1
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.jqtransform.min.js" type="text/javascript"></script>

2- Escribir un formulario y añadirle la clase correspondiente

1
2
3
4
5
<form class="jqtransform">
 <label for="name">Name: </label>
<input name="name" type="text" />
<input type="submit" value="send" />
</form>

3- Activar el plugin

1
2
3
4
5
6
7
8
<script type="text/javascript">
$(function() {
    //Todos los formularios con clase jqtransform
 
    $("form.jqtransform").jqTransform();
 
});
</script>

Como ven , super sencillo de usar. Para descargarlo visiten la página del autor.

Para ver un ejemplo online pueden ver el usado en este tutorial