Archive for the Tutoriales Category
Posted on August 24, 2009 by Damian
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:
- En “¿Qué quiere buscar?“ seleccionamos Sólo los sitios que seleccione.
- En “Seleccione algunos sitios“ debemos ingresar la URL del blog donde se va a realizar la búsqueda.
- En “Seleccione una edición“ seleccionamos Edición estándar.
- En “Palabras clave” podes poner algunos keywords que describar tu blog.
- Despues elegimos el lenguaje de tu blog.
- El formato o estilo de la caja de texto. ( Más adelante voy a explicar como cambiar el estilo)
- Y donde abrir los resultados. En este caso elegimos nuestro propio sitio y ponemos una dirección del estilo “http://blog.timersys.com/buscar“.
- Elegimos solo mostrar anuncios en la parte derecha(esto a gusto de cada uno).
- Cambiamos el estilo con la paleta de colores.
- Aceptamos las Condiciones de servicio.
- Elegimos un nombre para el buscador y le damos a obtener el código.
Posted on August 16, 2009 by Damian
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 .
$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:
$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.
Posted on August 15, 2009 by Damian
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.
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
<?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
<!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ágina de lanzamiento. Más tutoriales en: <a href="http://blog.timersys.com">http://blog.timersys.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)
Posted on July 25, 2009 by Damian
En este tutorial les voy a enseñar como hacer una página de lanzamiento como la que en ocasiones nos encontramos cuando visitamos una web sin estrenar con su cuenta atras correspondiente. Además de la cuenta atras más adelante vamos a añadir un pequeño formulario de contácto con AJAX para añadir emails a una base de datos y asi poder mantener a los visitantes actualizados.
Para empezar vamos a necesitar un plugin de JQuery muy completo llamado epiClock que va a ser el encargado de realizar la cuenta atras. La verdad que vale la pena echar una ojeada a la página de epiClock , ya que además de cuentas atras podemos crear todo tipo de relojes, cronometros , etc.
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.epiclock.min.js"></script>
Si queremos por ejemplo hacer una cuenta atras hasta el 2012 es tan facil como poner:
$(document).ready(function(){
//espero que cargue el DOM y llamo al plugin
j jQuery('#reloj').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);
});
Como pueden ver le paso tres parametros a .epiclock :
- mode: El modo de cuenta atras (countdown).
- format: El formato que quiero que en este caso es ‘<sup>dias</sup>’ para los dias y así susecivamente.
- target: El tiempo final del contador pasado en modo de fecha.
Y por último inicio el contador con .clocks(EC_RUN)
Una ves que tengo el reloj definido voy a crear el código HTML necesario para que funcione:
<div id="header">
<h3>Como crear una Página de lanzamiento. Más tutoriales en: <a href="http://blog.timersys.com">http://blog.timersys.com</a> </h3>
</div>
<div id="wrapper">
<div id="cuadro2" class="rounded">
<div id="reloj" class="count_down"></div>
</div>
</div>
Y le aplico el siguiente estilo:
body {
color:#666666;
font-family:'Trebuchet MS',sans-serif;
font-size:14px;
line-height:1.5em;
text-align:justify;
}
#header{
width:800px;
height:80px;
text-align:center;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#cuadro2{
padding:15px;
background-color:#EEEEEE;
border:1px solid #CCCCCC;
}
#wrapper{
width:440px;
margin:0 auto;
}
.count_down{
padding: 3px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:38px;
font-weight:bold;
color:#222;
}
.count_down sup{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#555;
padding:0px 10px 0 0;
font-weight:normal;
}
Como toque final voy a redondear las esquinas del DIV contenedor del reloj con jquery.corners como vimos anteriormente en el blog.
$('.rounded').corners('transparent');
Y con eso tendriamos nuestra cuentra atras particular. En el próximo tutorial les explico como crear un formulario con AJAX para guardar todos los emails en una base de datos de forma que podamos mantener actualizados con noticias a nuestros seguidores.
Ver Ejemplo Online
Descargar código
Posted on July 18, 2009 by Damian
Hoy les traigo otro plugin de JQuery que hace la nevagación un poco más facil . Con JQuery.ScrollTo podemos darle movimiento a una ventana o a un anchor por ejemplo. Como el nombre indica básicamente lo que hace es un scroll ( como cuando usamos la ruedita del mouse) tanto en sentido horizontal como vertical o ambos a la vez.
Esto es útil cuando tenemos una página bastante larga y no queremos que los clientes se cansen de ir un lado para otro. Hace unos meses un cliente me pidio una web para mostrar sus productos y queria algo muy sencillo donde todos los productos aparecieran en la página principal. Cuando empeze con la web me di cuenta que tardaba mucho en ir de un lado a otro así que fui poniendo scrolls en diferentes partes de la web para subir al top y despues cree un menu para que haga scroll a los diferentes tipos de productos. Si quieren ver de lo que hablo pueden visitar la web de Photo Momentos.
Para usar este plugin como siempre debemos usar la última versión de JQuery y el plugin JQuery.Scroll
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
Para realizar un scroll tan solo debemos crear un link o anchor apuntando al id del elemento destino:
<a href="javascript:$.scrollTo('#destino',800);">Destino</a>
Digamos que el destino seria algo así:
<div id="destino">..... Final de la web.....</div>
Más simple imposible…
JQuery.ScrollTo tiene un montón más de opciones como duración, funciones callback , etc… pero lo básico ya esta explicado.
Un saludo a todos y dejen comentarios
Ver Ejemplo
Descargar Ejemplo
Posted on July 18, 2009 by Damian
Les voy a enseñar como crear un boton para seleccionar o deseleccionar todos los checkbox de un formulario al mismo tiempo con una sola linea de JQuery. En el último programa que realize necesite crear diferentes menus desplegables con diferentes opciones para así poder realizar búsquedas más detalladas . Pueden echar un vistazo a la demo si quieren ver como funciona (user: demo pass:demo).
En esta ocasión disponía de diferentes DIVS con sus respectivas opciones por lo que cada botón debe responder a los checkboxs de cada DIV. Partiendo del ejemplo de la foto, si tenemos el siguiente código:
<div id="tipos_trabajo" style="display: block;">
<form id="search_form" action="busquedas.php" accept-charset="utf-8" method="post">
//Boton que se encarga de seleccionar/ deseleccionar los checkbox
<input id="checkAll" onclick="checkTodos(this.id,'tipos_trabajo');" name="checkAll" type="checkbox" />
<ul>
<li name="tipotrabajo">
<input class="check" type="checkbox" value="1" name="tipotrabajo[]"/>
Caldereria
</li>
<li name="tipotrabajo">
<input class="check" type="checkbox" value="2" name="tipotrabajo[]"/>
Electricidad
</li>
<li name="tipotrabajo">
<input class="check" type="checkbox" value="3" name="tipotrabajo[]"/>
Redes
</li>
<li name="tipotrabajo">
<input class="check" type="checkbox" value="10" name="tipotrabajo[]"/>
Carpinteria
</li>
<li name="tipotrabajo">
<input class="check" type="checkbox" value="15" name="tipotrabajo[]"/>
Mecánica
</li>
</ul>
</form>
</div>
Como pueden ver se trata de un simple DIV con id=”tipos_trabajo” el cual contiene un formulario con una serie de checkboxs ordenados dentro de una lista .
El primer checkbox va a ser el encargado de marcar o desmarcar el resto y para ello llama en el evento onClick a la función “checkTodos” pasandole dos atributos. Primero le pasa su propio id que en este caso es “checkAll” y el id de el DIV contenedor que es “tipos_trabajos” . Si en ves de un DIV tenemos todos los checkbox dentro de una tabla este último dato seria el id de la tabla.
Una ves que tenemos el código HTML pasemos a ver el codigo javascript.
busquedas.js
function checkTodos (id,pID) {
$( "#" + pID + " :checkbox").attr('checked', $('#' + id).is(':checked'));
}
Como pueden ver la función checkTodos tan solo necesita una linea de JQuery que paso a explicar a continuación:
$( “#” + pID + ” :checkbox”) Selecciona todos los elementos checkbox dentro del DIV con id= “tipos_trabajo”.
.attr(‘checked’, $(‘#’ + id).is(‘:checked’)); Primero comprueba si el checkbox con id “checkAll” esta checked y devuelve true o false segun el estado. Por lo que si devuelve true asigna el atributo checked, y si devuelve false no lo asigna.
$( “#” + pID + ” :checkbox”).attr(‘checked’, $(‘#’ + id).is(‘:checked’)); Por lo que resumiendo según el estado del checkbox con id=”checkAll” al hacer click , se le asigna el atributo checked o no a todos los checkbox dentro del DIV con id= “tipos_trabajos”.
Como pueden ver es muy simple de hacer y se usa muy poco código.
Ver ejemplo online
Descargar Ejemplo
« Older Entries
Newer Entries »
Con tu lector preferido.
Via Email.
Por Twitter.