• Tutorial de: WordPress
• Dificultad: Fácil
• Tiempo: 15 Minutos

Los Widgets son pedazos de contenido administrables desde el backend (Apariencia > Widgets), estos se almacenan en espacios conocidos como ‘Sidebars Dinámicos’.

En este tutorial aprenderas como implementar Sidebars Dinámicos (Widgets) en tu theme de WordPress.

Registrando el Sidebar

El proceso es sencillo, lo unico que tenemos que hacer es colocar la función register_sidebar() en el fichero functions.php de nuestro theme.

Esta función acepta como parametro un Array en el cual se especifican los detalles del Sidebar:

• name: El nombre del Sidebar, por defecto es ‘Sidebar’.
• id: El id del sidebar (ej: sidebar-derecha), por defecto es el ID numerico auto-generado.
• description: Texto de descripcion del sidebar a registrar, se muestra en la pagina de Widgets, por defecto esta vacio
• class: Clase CSS a asignar a los widgets de este Sidebar.
• before_widget: Código HTML que ira antes de cada widget, por defecto es <li>
• after_widget: Código HTML que ira después de cada widget, por defecto es </li>
• before_title: Código HTML que ira antes del título del Widget, por defecto es <h2>
• after_title: Código HTML que ira después del título del Widget, por defecto es </h2>

Sabiendo esto, procedemos a crear un Sidebar de ejemplo:

<?php

register_sidebar( 
	array(
  		'name' => 'Zona de Anuncios',
  		'id' => 'ad-zone',
  		'description' => 'Aquí irán los anuncios del sitio',
  		'before_widget' => '<div class="widget ad">',
  		'after_widget'  => '</div>',
  		'before_title' => '<strong class="adtitle">',
  		'after_title' => '</strong>'
  	)
);

Con solo ese código, si vamos a Apariencia > Widgets deberíamos ver nuestro Sidebar, el cual podemos empezar a llenar con Widgets:

Mostrando el Sidebar

Para mostrar el Sidebar utilizamos la función dynamic_sidebar(), este lleva un solo parametro en donde debemos indicar que Sidebar mostrar, se pone el id (textual o numérico) del sidebar (en nuestro caso: ‘ad-zone’) si se deja vacío mostrará el primer sidebar registrado.

<?php dynamic_sidebar( 'ad-zone' ); ?>

Y esto lo podemos ubicar donde queramos, normalmente se acostumbra a crear un archivo sidebar.php, poner la función allí y luego incluirlo con get_sidebar().

Sin embargo los Sidebars en WordPress no siempre son usados como sidebars (literal), sino mas como un area dinámica multiproposito que se puede colocar en cualquier parte, por ejemplo en el Footer o en el Header.

Nota: El nombre del hosting es Dotgeek.org, pero la URL donde se hacen los registros es 1.ai, dotgeek.org es el foro del hosting.

Soporte

Los lenguajes/frameworks que soporta dotgeek son:

• PHP 5.3
• Ruby
• Perl
• Camping (Framework de Ruby)
• Sinatra (Framework de Ruby)

Hay que tener en cuenta que esta lista no va a ser siempre la misma, se esta trabajando para aumentar el soporte a otros lenguajes y frameworks como Python, Rails, etc.

Nombre de Dominio y Espacio

El nombre de dominio que nos brindan es tunombre.dotgeek.org o tunombre.1.ai, con lo que respecta al espacio dotgeek nos da 512 MB en un SSD + 512 MB para tu base de datos MySQL.

Conexión FTP

Para conectarte a dotgeek necesitas un cliente FTP que soporte conexiones seguras (SFTP):

Registro

Aqui viene la parte difícil, para tener una cuenta en dotgeek necesitas hacer una solicitud y ser aprobado, les tienes que contar en un texto de 140 caracteres (en inglés) un poco acerca de ti y porque quieres un espacio en dotgeek:

Esto puede parecer complicado, pero la realidad es que no lo es (mi solicitud me la aprobaron casi al instante), solo se sincero y describe para que vas a usar el hosting.

Recuerda que este hosting esta pensado para que sea usado unicamente de forma personal y no para usos comerciales, es por esa misma razón que no nos permite utilizar dominios propios.

• Tutorial de: CSS
• Dificultad: Fácil
• Tiempo: 20 Minutos

Seguro haz escuchado o ya estas usando los selectores de atributo de CSS, pero ¿conoces todas las variaciones y que usos prácticos se les puede dar?. En este tutorial veremos todos los tipos de selectores de atributo disponibles y ademas algunos ejemplos aplicables que tal vez te sirvan.

Nota: En este tutorial voy a utilizar CodePen para los ejemplos, para un mejor entendimiento recuerda mirar el codigo en el orden: HTML » CSS » Resultado.

¿Qué son los selectores de atributos CSS?

Son selectores que se basan en el atributo del elemento HTML para seleccionarlo, se usan corchetes [].

Por ejemplo si tenemos un:

<p align="right">

</p>

Podemos seleccionarlo en CSS con:

p[align="right"]{

}

Tambien se puede obviar la declaración del tipo de elemento y seleccionar unicamente con el atributo:

[align="right"]{

}

Existen una serie de variaciones en las cuales podemos refinar la selección siendo mas especificos, si tienes conocimiento de expresiones regulares, esto te sera facil ya que los términos son similares.

Ejemplos

1. [attr=valor]

El uso mas básico, donde se declara exactamente el atributo y el valor indicado que este debe llevar para que sea seleccionado.

Ejemplo:

Digamos que tenemos una serie de elementos input y como sabemos, estos tienen que llevar el atributo type en donde se declara que tipo de campo sera, mediante los selectores de atributo podemos estilizar cada uno de los tipos de input individualmente sin declararle clase alguna:

<input type="text"> <input type="password"> <input type="submit"> <input type="reset">Check out this Pen!

2. [attr^=valor]

Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado comience con lo que se indica.

Ejemplo:

Un uso práctico seria por ejemplo ponerles iconos a una serie de enlaces a redes sociales, donde detectamos a que red social esta enlazando (el enlace debe empezar con http://face…) y de acuerdo a ello ponemos el icono respectivo:

<a href="http://facebook.com/webtursos"></a> <a href="http://twitter.com/webtursos"></a> <a href="http://youtube.com/webtursos"></a>Check out this Pen!

3. [attr$=valor]

Este selector es lo invertido al anterior, seleccionará a los elementos que tengan ese atributo y cuyo valor declarado termine con lo que se indica.

Ejemplo:

El uso mas común que se le da a este tipo de selector es para estilizar enlaces de descarga de archivos, en el cual la ruta termina en el formato de archivo (http://…/documento.doc), el cual usamos para hacer una selección individual:

<a href="archivo.pdf">Descargar PDF</a> <a href="archivo.doc">Descargar DOC</a> <a href="archivo.xls">Descargar XLS</a>Check out this Pen!

4. [attr*=valor]

Este selector es el que tiene mas alcance, ya que como ven lleva el *, lo que indica que es global, va a seleccionar el elemento que tenga el valor indicado este donde este.

Ejemplo:

Un ejemplo práctico es cuando trabajamos con los menús de WordPress y queremos aplicar estilo al elemento activo o current, pero WordPress nos añade un montón de clases y al final no logramos lo cometido o terminamos con un CSS muy desordenado, para estos casos podemos usar el selector de atributo global *=:

<ul> <li><a href="">Item 1</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-category-ancestor current-menu-ancestor current-menu-parent current-category-parent"><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> </ul>Check out this Pen!

5. [attr~=valor]

Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado este entre espacios.

Ejemplo:

Esta tipo de selector se usa casi siempre para seleccionar elementos que tengan atributos con multiples valores, tales como el rel de un a, en este ejemplo tendremos un par de parrafos en los cuales irán varios enlaces a los que les pondremos multiples valores rel, pero colorearemos de verde todos los que sean external :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id <a href="#">pulvinar</a> odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam <a href="#" rel="external">consectetuer</a>. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim <a href="#" rel="nofollow external">nibh</a> eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla <a href="#" rel="external friend">consequat</a> libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros. Check out this Pen!

¿Porqué no usar el selector global (*) aqui? Si existe un selector especifico (~) para seleccionar valores de atributo entre espacios, es mejor usar ese.

6. [attr|=valor]

Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado este entre guiones.

Ejemplo:

Para este selector haremos un ejemplo un poco mas complicado: lo usaremos para hacer una pequeña grilla CSS, en la cual las propiedades se aplicaran a las columnas solo por el hecho de que la clase de estas contenga la palabra grid-, seguido ira el numero que indique el ancho de esa columna:

<div class="wrap"> <div class="grid-8"></div> <div class="grid-4"></div> </div>Check out this Pen!

Compatibilidad

Cada uno de estos selectores funciona perfectamente en todos los navegadores modernos. Incluso Internet Explorer lo viene soportando a partir de la version 7.

• Tutorial de: jQuery
• Dificultad: Intermedio
• Tiempo: 30 Minutos

En este tutorial haremos un acordeón vertical usando jQuery con un código bastante minimalista y facil de entender, usaremos CSS para darle decoración y mejorar la experiencia de usuario.

Resultado Final

Estructura HTML

Usaremos con una lista de definición o definition list (dl) para manejar la estructura de los contenidos, una vez comprendas el funcionamiento del código podrás adaptarlo a cualquier otra estructura:

  <dl>
    <dt>Titulo 1</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur maxime cupiditate nesciunt molestias itaque vel reiciendis officiis explicabo cum impedit dolorem quod minus beatae architecto necessitatibus sed exercitationem aliquam omnis!</dd>

    <dt>Titulo 2</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia quos! Dolor cum vitae aperiam deserunt hic quas quidem qui excepturi minima repudiandae pariatur id sit dignissimos laborum provident velit!</dd>

    <dt>Titulo 3</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio voluptatum expedita sunt voluptatibus ratione assumenda quo animi numquam blanditiis asperiores illo laudantium et quae itaque reiciendis nam ducimus officiis officia?</dd>

    <dt>Titulo 4</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto obcaecati numquam nemo quasi omnis accusamus illo distinctio doloribus architecto culpa maiores blanditiis laborum accusantium assumenda vero necessitatibus optio? Ipsa perferendis.</dd>

    <dt>Titulo 5</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto obcaecati numquam nemo quasi omnis accusamus illo distinctio doloribus architecto culpa maiores blanditiis laborum accusantium assumenda vero necessitatibus optio? Ipsa perferendis.</dd>
  </dl>

jQuery

Luego procedemos a incluir a jQuery y ademas creamos un script en el cual ira nuestro código, si deseas puedes manejarlo en un JS aparte, pero para el ejemplo lo haremos todo junto:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

</script>

Lo primero que haremos sera ocultar todos los ‘dd’, pero no los dd que esten posteriores a un dt con clase .activo, esto nos va a permitir dejar un item abierto por defecto, luego procedemos a detectar cuando ‘dt’ sea presionado:

$('dl dd').not('dt.activo + dd').hide(); 
$('dl dt').click(function(){

});

Dentro del evento de click le pondremos una condición:

$('dl dt').click(function(){
   if ($(this).hasClass('activo')) {
        $(this).removeClass('activo');
        $(this).next().slideUp();
   } else {
        $('dl dt').removeClass('activo');
        $(this).addClass('activo');
        $('dl dd').slideUp();
        $(this).next().slideDown();
   }
});

(Linea 23) Si es que este ‘dt’ que acabamos de cliquear tiene la clase .activo (osea si esta abierto) le quitamos la clase .activo (linea 24) y hacemos que el elemento que le sigue, que vendría a ser el ‘dd’ adyacente (que esta mostrandose), se oculte (linea 25).

En caso contrario (que muy probablemente vendría a ser el estado por defecto) al hacerle clic, lo primero que hará es quitarle .activo a todos los demás ‘dt’ (linea 27), pero le asignamos .activo al que acabamos de cliquear (linea 28), luego ocultamos todos los ‘dd’ (linea 29) y por ultimo mostramos solo el ‘dd’ que le sigue a este ‘dt’ (linea 30), de esta forma solo se muestra uno a la vez.

CSS

Hasta allí lo tendríamos completamente funcional, sin embargo la experiencia no es tan agradable, para mejorar esto usaremos algo de CSS:

*{ font-family: sans-serif; margin: 0;}
dl{ margin: 60px auto; width: 600px; }
dt, dd{ padding: 20px; }
dt{ background: #333333; color: white; border-bottom: 1px solid #141414; border-top: 1px solid #4E4E4E; cursor: pointer; }
dd{ background: #F5F5F5; line-height: 1.6em; }
dt.activo, dt:hover{ background: #424242; }

Va quedadon mejor, sin embargo podemos hacer mas aun, le vamos a añadir unas flechitas con la ayuda de la pseudo-clase :after.

dt:before{ content: "▸"; margin-right: 10px; }
dt.activo:before{ content: "▾"; }

Lo que estamos haciendo aqui es que por defecto antes de todo dt haya una ‘▸’, pero si este dt esta .activo que esta cambie a ‘▾’.

Dejar un item activado por defecto

Si queremos dejar un item abierto por defecto, simplemente le ponemos al dt la clase activo, ya que al cargar la pagina no va a ocultar los dd que esten posteriores a un dt con clase activo:

<dt class="activo">Titulo 3</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio voluptatum expedita sunt voluptatibus ratione assumenda quo animi numquam blanditiis asperiores illo laudantium et quae itaque reiciendis nam ducimus officiis officia?</dd>

Código Final

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		*{ font-family: sans-serif; margin: 0;}
		dl{ margin: 60px auto; width: 600px; }
		dt, dd{ padding: 20px; }
		dt{ background: #333333; color: white; border-bottom: 1px solid #141414; border-top: 1px solid #4E4E4E; cursor: pointer; }
		dd{ background: #F5F5F5; line-height: 1.6em; }
		dt.activo, dt:hover{ background: #424242; }

		dt:before{ content: "▸"; margin-right: 10px; }
		dt.activo:before{ content: "▾"; }
	</style>
</head>
<body>
	<dl>
		<dt>Titulo 1</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur maxime cupiditate nesciunt molestias itaque vel reiciendis officiis explicabo cum impedit dolorem quod minus beatae architecto necessitatibus sed exercitationem aliquam omnis!</dd>

		<dt>Titulo 2</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia quos! Dolor cum vitae aperiam deserunt hic quas quidem qui excepturi minima repudiandae pariatur id sit dignissimos laborum provident velit!</dd>

		<dt>Titulo 3</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio voluptatum expedita sunt voluptatibus ratione assumenda quo animi numquam blanditiis asperiores illo laudantium et quae itaque reiciendis nam ducimus officiis officia?</dd>

		<dt>Titulo 4</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto obcaecati numquam nemo quasi omnis accusamus illo distinctio doloribus architecto culpa maiores blanditiis laborum accusantium assumenda vero necessitatibus optio? Ipsa perferendis.</dd>

		<dt>Titulo 5</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto obcaecati numquam nemo quasi omnis accusamus illo distinctio doloribus architecto culpa maiores blanditiis laborum accusantium assumenda vero necessitatibus optio? Ipsa perferendis.</dd>
	</dl>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
	  $('dl dd').not('dt.activo + dd').hide();
       $('dl dt').click(function(){
          if ($(this).hasClass('activo')) {
               $(this).removeClass('activo');
               $(this).next().slideUp();
          } else {
               $('dl dt').removeClass('activo');
               $(this).addClass('activo');
               $('dl dd').slideUp();
               $(this).next().slideDown();
          }
       });
	</script>
</body>
</html>

Si tienes alguna duda ponla en los comentarios, puedes ver el resultado final en este enlace y/o descargar el código fuente desde aquí.

• Tutorial de: PHP y SQL
• Dificultad: Avanzado
• Tiempo: 1 Hora

En este tutorial aprenderas a hacer un sistema de encuestas funcional, práctico y expandible, usaremos PHP y MySQL con tablas relacionales.

Trabajaremos con 4 ficheros PHP y uno CSS, uno para la conexión a la base de datos (conexion.php), uno para listar las encuestas (index.php), otro para crear nuevas encuestas (agregar.php), el que mostrara los resultados de las encuestas (resultado.php) y por ultimo estilos.css que se encargara de darle algo de estetica pero tambien de una parte muy esencial es la de mostrar la barra de votaciones.

Si en ciertas partes el código les resulta muy complejo, leed los comentarios.

0. estilos.css

.barra{
	background: #ff3019;
	background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
	background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
	background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);
	clear: both;
	height: 15px;
	color: white;
	font-weight: bold;
	text-align: right;
	padding: 6px;
	border-radius: 4px;
	max-width: 356px;
	min-width: 20px;
}

/* A partir de aqui es solo cosmetico, lo puedes borrar */

*{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 14px;
}
body{
	background: #464646;
}
a{
	text-decoration: none;
	color: red;
}
.fr{
	float: right;
}
.fl, .votar{
	float: left;
}
.cf{
	clear: both;
}
.wrap{
	padding: 25px;
	margin: 0 auto;
	width: 385px;
	background: #F3F3F3;
	border-radius: 4px;
	margin-top: 70px;
	border: 1px solid #E0E0E0;
}
h1{
	margin-bottom: 20px;
	font-size: 21px;
	border-bottom: 1px solid #DDD;
	padding-bottom: 15px;
	text-align: center;
}
form > div{
	margin-bottom: 20px;
}
form .titulo{
	margin-right: 20px;
}
form label{
	display: block;
}
form input[type='text'], select{
	border: 1px solid #E0E0E0;
	padding: 6px;
	resize: none;
}
form input[type="submit"]{
	padding: 8px 16px;
	background: gray;
	border: 0;
	display: block;
	font-weight: bold;
	color: white;
	border-radius: 6px;
}
form input[type="submit"]:hover{
	background: #505050;
}
ul.votacion{
	margin-bottom: 25px;
	list-style: none;
}
.votacion li{
	padding: 8px;
	background: #FCFCFC;
	border-radius: 5px;
	margin-bottom: 5px;
}
.votacion li:hover{
	background: white;
}
.votacion li a{
	color: gray;
	font-weight: bold;
	font-size: 16px;
}
.votacion li a:hover{
	color: black;
}
.votacion li span{
	margin-left: 10px;
}
.votacion .fl{
	margin-bottom: 5px;
}
.volver{
	display: block;
	padding-top: 15px;
	clear: both;
}
.resultado{
	float: left;
	margin-left: 10px;
	margin-top: 7px;
	color: black;
}

1. SQL

Creamos una tala con el nombre encuestas con los siguientes campos: id, titulo y fecha. Aqui se almacenara los datos las encuestas como el titulo y la fecha que fue creada la encuestas, utilizaremos otra tabla para que almacene las opciones de las encuestas.

CREATE TABLE IF NOT EXISTS `encuestas` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`titulo` varchar(50) NOT NULL,
`fecha` date NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Ahora insertarmos unos datos de ejemplo en la tabla:

INSERT INTO `encuestas` (`id`, `titulo`, `fecha`)
VALUES (NULL ,  'Que os parecen los tutoriales de PHP?',
'2012-12-15');

Creamos otra tabla con el nombre opciones con los siguientes campos: id, id_encuesta, nombre y valor.
El campo de id_encuesta tendrá relación con el campo id de la tabla encuestas, en nombre ira el nombre y valor guardara el numero de votos que tendra la opcion respectiva.

CREATE TABLE IF NOT EXISTS `opciones` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `id_encuesta` int(11) NOT NULL,
  `nombre` varchar(50) NOT NULL,
  `valor` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Insertamos datos a la tabla opciones:

INSERT INTO  `opciones` (`id` ,`id_encuesta` ,`nombre` ,`valor`)
VALUES (NULL ,  '1',  'Muy Bueno',  '14')
, (NULL ,  '1',  'Bueno',  '6')
, (NULL ,  '1',  'Malo',  '2');

Fijaos que he definido id_encuesta con 1 y es porque quiero que estas opciones esten relacionadas con la encuestas que creamos anteriormente que llevaba el id de 1.

Si no entendisteis bien como vamos a trabajar las relaciones de las tablas, esta grafica te aclarará las dudas:

02. conexion.php

El tipico fichero PHP para guardar los datos de la conexión, nada del otro mundo:

<?php // datos para la conexion a mysql
	define('DB_SERVER','localhost');
	define('DB_NAME','TU BASE DE DATOS');
	define('DB_USER','TU USUARIO');
	define('DB_PASS','TU CLAVE');

	$conex = mysql_connect (DB_SERVER,DB_USER,DB_PASS);
	mysql_select_db(DB_NAME,$conex);

03. index.php

Lo primero sera incluir al fichero de conexión, luego haremos una consulta a la base datos para que nos muestren los títulos de la tabla ‘encuestas’ los mismos que mostraremos como enlaces hacia las encuestas, estos enlaces llevaran el id de la encuestas en cuestión mediante GET (encuestas.php?id=x).

<?php
	require('conexion.php');
	$sql = "SELECT * FROM encuestas ORDER BY id DESC";
	$req = mysql_query($sql);
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Sistema de encuestas</title>
	<link rel="stylesheet" href="estilos.css">
</head>
<body>
    <div class="wrap">
    	<h1>Encuestas</h1>
    	<ul class="votacion index">
		<?php
			while($result = mysql_fetch_object($req)){
				echo '<li><a href="encuesta.php?id='.$result->id.'">'.$result->titulo.'</a></li>';
			}
		?>
		</ul>
    	<a href="agregar.php">+ Agregar nueva encuesta</a>
	</div>
</body>
</html>

Nos debería ir quedando así:

04. encuesta.php

Linea 04: Si no existe la variable de URL se regresara a la pagina principal.
Linea 11: Si le dan a votar (el form de votacion ira abajo) y si han seleccionado una opcion se va a actualizar los datos del campo ‘valor’ de la tabla ‘opciones’:

<?php
require('conexion.php');
        $id = $_GET['id'];
	if(!isset($_GET['id'])){
		header('location: index.php');
	}

	if(isset($_POST['votar']))
	{

		if(isset($_POST['valor'])){
			$opciones = $_POST['valor'];
			$mod = mysql_query("SELECT * FROM opciones WHERE id = ".$opciones);
			while($result = mysql_fetch_object($mod)){
				$valor = $result->valor + 1; // obtenemos el valor de 'valor' y le añadimos 1 unidad
				mysql_query("UPDATE opciones SET valor =  '".$valor."' WHERE id = ".$opciones); // luego ejecutamos el query SQL
			}
			header('location: resultado.php?id='.$id); // Por ultimo lo redireccionamos a la encuestas mostrando los resultados.
		}
	}
?>

Ahora la parte HTML donde ira el form de votacion, aqui vamos a generar una consulta a la base datos para que se muestren los datos de la tabla ‘encuestas’ con relación a la tabla ‘opciones’ como radiobuttons, partes de un form:

Linea 36: En esta linea haremos un query con INNER JOIN en el cual trabajaremos con las tablas ‘encuestas’ y ‘opciones’ donde a sera encuestas y b es opciones, aqui buscaremos filas donde a.id sea igual a b.encuesta_id, el valor de a.id que se comparara sera definido por $id, este valor lo obtuvimos al principio en el primer pedazo de código mediante GET.

Linea 39 y 48: Con el resultado del query hacemos un while donde mostraremos el titulo de la encuesta y luego en la linea 48 se muestran cada una de las opciones como input[type='radio'], $aux es una variable auxiliar que nos ayuda a detener el bucle para que ciertos elementos se muestren solo una vez.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Sistema de encuestas</title>
	<link rel="stylesheet" href="estilos.css">
</head>
<body>

	<div class="wrap">

    <form action="" method="post">
<?php
	$aux = 0;
	$sql = "SELECT a.titulo as titulo, a.fecha as fecha, b.id as id, b.nombre as nombre, b.valor as valor FROM encuestas a INNER JOIN opciones b ON a.id = b.id_encuesta WHERE a.id = ".$id;
	$req = mysql_query($sql);

	while($result = mysql_fetch_object($req)){

		if($aux == 0){
			echo '<h1>'.$result->titulo.'</h1>';

			echo '<ul>';
			$aux = 1;
		}

		echo '<li><input name="valor" type="radio" value="'.$result->id.'"><span>'.$result->nombre.'</span></li>';

	}
		echo '</ul>';	

		if(!isset($_POST['valor'])){
			echo "<div class='error'>Selecciona una opcion.</div>";
		}

		echo '<input name="votar" type="submit" value="Votar">';
		echo '<a href="resultado.php?id='.$id.'" class="resultado">Ver Resultados</a>';
		echo '<a href="index.php" class="volver">&larr; Volver</a>';

?>

    </form>
    </div>

    </body>
    </html>

Si todo salió bien, encuesta.php deberia verse asi:

05. resultado.php

Esta archivo es mas simple, aqui mostraremos los resultados de las encuestas de acuerdo al id obtenido por GET (resultado.php?id=x):
Linea 11: Para obtener el valor usamos SUM() para que nos resulte la suma total del valor en un solo numero:

<?php

	require('conexion.php');

	if(!isset($_GET['id'])){
		header('location: index.php');
	}

	$suma = 0;
	$id = $_GET['id'];
	$mod = @mysql_query("SELECT SUM(valor) as valor FROM opciones WHERE id_encuesta = ".$id);
	while($result = @mysql_fetch_object($mod)){
		$suma = $result->valor;
	}

?>

Luego mostramos los resultados (linea 29) con el mismo query con INNER JOIN que ya hemos usado anteriormente, esto nos mostrara cada opción en forma de div (.barra) al que le definimos el ancho en porcentaje usando una operación matemática (linea 42),

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Sistema de Encuestas</title>
	<link rel="stylesheet" href="estilos.css">
</head>
<body>
	<div class="wrap">
    <form action="" method="post">
<?php
	$aux = 0;
	$sql = "SELECT a.titulo as titulo, a.fecha as fecha, b.id as id, b.nombre as nombre, b.valor as valor FROM encuestas a INNER JOIN opciones b ON a.id = b.id_encuesta WHERE a.id = ".$id;
	$req = @mysql_query($sql);

	while($result = @mysql_fetch_object($req)){
		if($aux == 0){
    			echo "<h1>".$result->titulo."</h1>";
    			echo "<ul class='votacion'>";
			$aux = 1;
		}
		echo '<li><div class="fl">'.$result->nombre.'</div><div class="fr">Votos: '.$result->valor.'</div>';
        if($suma == 0){
            echo '<div class="barra cero" style="width:0%;"></div></li>';
        }else{
            echo '<div class="barra" style="width:'.($result->valor*100/$suma).'%;">'.round($result->valor*100/$suma).'%</div></li>';
        }

	}
	echo '</ul>';	

	if(isset($aux)){
		echo '<span class="fr">Total: '.$suma.'</span>';
		echo '<a href="encuesta.php?id='.$id.'"" class="volver">← Volver</a>';
	}

?>
	</ul>
    </form>
    </div>
</body>
</html>

Si llegaste hasta aqui resultado.php debería lucir similar a esto:

06. agregar.php

En este fichero es probablemente el mas complejo de todos, manejaremos el proceso PHP arriba y el formulario abajo, por ello para entender esta parte es necesario ver el código completo (leer comentarios):

<?php require('conexion.php');
	$cont = 0;

    $titulo = ''; if(isset($_POST['titulo'])){ $titulo = trim($_POST['titulo']); } // definimos $titulo para evitar errores, y guardamos su valor por el ingresado.

	if(isset($_POST['enviar'])){
         if($titulo != ""){
		  	$num = $_POST['opciones']; // este valor lo vamos a obtener de lo que el usuario ingrese como numero de opciones al crear la encuesta
	  		$fecha = date('Y-m-d');

	  		$sql= "INSERT INTO `encuestas` (`id` ,`titulo` ,`fecha`) VALUES (NULL ,  '$titulo', '$fecha');"; // si han ingresado si quiera un titulo insertamos esta encuesta en la tabla
			mysql_query($sql);

			$sql = "SELECT MAX(id) as id FROM encuestas"; // ahora obtenemos el id de la ultima fila,
                                                          // la que acabamos de ingresar,
                                                          // esto lo hacemos para poder asociarle las opciones
			$req = 	mysql_query($sql);

			while($result = mysql_fetch_object($req)){
				$id_encuesta = $result->id;	// con el resultado obtenido hacemos un bucle y definimos los resultados como id_encuesta.
			}

			$sql = "INSERT INTO  `opciones` (`id` ,`id_encuesta` ,`nombre` ,`valor`) VALUES "; // En esta parte estamos armando un query SQL dinamico el cual sera modificado de acuerdo a lo que el usuario ingrese en el formulario.
			for($i=1;$i<=$num;$i++){
				$opcnativa = trim($_POST['opc'.$i]); // obtenemos el nombre de cada opcion indivudalmente.
				if($opcnativa != ""){
					$sql .= "(NULL ,  '$id_encuesta',  '$opcnativa',  '0')"; // el id de la opcion ira null para que se ponga automaticamente, en id_encuesta pues ira el id de la encuesta que acabamos de crear, en 'nombre' ira el nombre de la opcion y valor ira 0, puesto que es una nueva opcion sin votos, esto se repetira con todas las opciones que el usuario haya definido.
					$cont++;
				}
				if($i == $num){
					$sql .= ";"; // si es que se llega al final, termina la consulta
				}else{
					$sql .= ", "; // sino se pone una , y se continua.
				}
			}

			if($cont < 2){ // si el usuario no definio ninguna opcion, se elimina la encuesta recien creada, esto es poco probable que suceda ya que la definicion de opciones la haremos con un select, y aqui se seleccionara el valor de 2 por defecto.
				$sql = "DELETE FROM `encuestas` WHERE id = ".$id_encuesta;
				echo "<div class='error'>Tiene que llevar por lo menos 2 opciones.</div>";
			}else{
                header('location: index.php'); // por ultimo si todo salio bien, redireccionamos al index para que el usuario vea su encuesta recien creada.
            }
			mysql_query($sql); // y ejecutamos el query
        }
    }
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Sistema de Encuestas</title>
	<link rel="stylesheet" href="estilos.css">
</head>
<body>

<div class="wrap">
	<h1>Agregar Encuesta</h1>
	<form action="" method="post">

	<div class="fl titulo">
		<label>Titulo:</label>
		<input name="titulo" type="text" value="<?php echo $titulo; ?>" size="26">
	</div>
	<?php
        // esto es simplemente un formulario, pero aqui hacemos una condicion, identificamos si se ha definido un numero de opciones, si es si hacemos un bucle, si es no mostramos el select para definir un numero de opciones, como es obvio por defecto se mostrara el bucle:
	if(isset($_POST['opc'])){
		$num = $_POST['opciones']; // guardamos el valor del numero de opciones
		for($i=1;$i<=$num;$i++){ // hacemos el bucle mostrando los campos respectivos.
	?>
	<div class="cf">
		<label>Opcion <?php echo $i; ?>: </label>
		<input name="opc<?php echo $i; ?>" type="text" size="43">
	</div>
	<?php } // aqui termina el bucle ?>
	<div class="cf">
    	<input name="enviar" type="submit" value="Enviar">
        <input name="opciones" type="hidden" value="<?php echo $num; // le pasamos el valor de num al proceso del formulario mediante un campo oculto. ?>">
        <input name="cont" type="hidden" value="<?php echo cont; ?>">
    </div>
	<?php }else{ // sino se ha definido nro de opciones: ?>
	<div class="fl">
    	<label>Nº de opciones:</label>
    	<select name="opciones">
    		<?php for($i=2;$i<=20;$i++){ // esto es un loop simple, solo para ahorrarnos trabajo, este select tendra de 2 a 20 opciones, si deseas cambiarlo lo puedes hacer aqui. ?>
    		<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
    		<?php } ?>
		</select>
	</div>

    <div class="cf">
      	<input name="opc" type="submit" value="Continuar">
    </div>

      <?php } // Sino se han definido opciones, que en vez de salir el boton de Enviar, salga uno que sea Continuar. ?>
    <a href="index.php" class="volver">← Volver</a>
	</form>
	</div>
</body>
</html>

Por ultimo, agregar.php en sus dos fases:

Posibilidades de mejoramiento

Las posibles mejoras que se le puede hacer a este sistema, podrían ser las de poner la creacion de nuevas encuestas (agregar.php) detrás de un login, otra adición seria la de impedir votaciones consecutivas bloqueando la IP o por cookies, la posibilidades de aplicación y mejoramiento son muchas.

Si no entendiste alguna parte o te sale algún error, házmela saber en los comentarios y recuerda que puedes bajarte el código fuente desde este enlace o verlo en funcionamiento aqui.

• Tutorial de: PHP
• Dificultad: Facil
• Tiempo: 15 minutos

En este tutorial veremos como traducir y formatear de forma practica la fecha que nos proporciona la función date() de PHP.

La funcion date() de PHP nos sirve para mostrar la fecha actual (obtenida del ordenador del cliente), pero el problema es que esta solo se muestra en ingles, esto no es un problema si queremos que el formato de la fecha sea solo en numeros (10-11-2012), sin embargo en ocasiones queremos mostrarla de forma mas elaborada por ej: Sabado, 10 de Noviembre de 2012, es alli donde viene el problema.

Para solucionarlo vamos a usar un metodo que considero es el mas practico y seguro que funcione, lo que haremos sera guardar los valores en variables, pasarlos por una condición y por ultimo reemplazarlos por su valor traducido.

Dividimos cada elemento de la fecha y lo guardamos en variables:

	$dia=date("l"); // Saturday

	$mes=date("F"); // November

	$ano=date("Y"); // 2012

En los comentarios esta lo que resultaria en cada caso (si no entiendes esos parámetros te recomiendo leas la documentación), ahora lo que haremos sera de acuerdo al resultado que obtengamos mediante una condición reemplazar ese valor de la variable:

	$dia=date("l");

	if ($dia=="Monday") $dia="Lunes";
	if ($dia=="Tuesday") $dia="Martes";
	if ($dia=="Wednesday") $dia="Miércoles";
	if ($dia=="Thursday") $dia="Jueves";
	if ($dia=="Friday") $dia="Viernes";
	if ($dia=="Saturday") $dia="Sabado";
	if ($dia=="Sunday") $dia="Domingo";

	$mes=date("F");

	if ($mes=="January") $mes="Enero";
	if ($mes=="February") $mes="Febrero";
	if ($mes=="March") $mes="Marzo";
	if ($mes=="April") $mes="Abril";
	if ($mes=="May") $mes="Mayo";
	if ($mes=="June") $mes="Junio";
	if ($mes=="July") $mes="Julio";
	if ($mes=="August") $mes="Agosto";
	if ($mes=="September") $mes="Setiembre";
	if ($mes=="October") $mes="Octubre";
	if ($mes=="November") $mes="Noviembre";
	if ($mes=="December") $mes="Diciembre";

	$ano=date("Y");

Algo mas que añadir seria una variable mas a la cual llamaremos $dia2 esta almacenara el valor del dia pero en numeros y no sera traducida ya que no es necesario:

	$dia2=date("d");

Ya teniendo esto podemos armar nuestra fecha como nos plazca:

	echo "$dia, $dia2 de $mes de $ano";

Lo que resultaria en:

Sábado, 10 de Noviembre de 2012

El mayor inconveniente que le veo a esta solución es el tamaño del código, por eso te recomendaria cuando lo uses guardarlo en un archivo aparte y llamarlo mediante un include o un require.

Porque no usar setlocale + strftime

El problema de usar este metodo es que setlocale utiliza un recurso del sistema operativo, el cual puede variar de acuerdo al OS que este usando el cliente, por consiguiente la funcion podria no funcionar siempre.

Espero te haya servido este pequeño tutorial, puedes bajarte el código fuente desde este enlace y no olvides que si tienes alguna pregunta o duda hazmela saber en los comentarios que con gusto te asistiré en lo que pueda.

• Tutorial de: PHP
• Dificultad: Avanzado
• Tiempo: Indefinido

• Descargar

En esta parte veremos como almacenar los valores ingresados por el usuario en nuestro formulario y almacenarlos en una base de datos MySQL usando PHP para ello, vamos a utilizar el mismo codigo del tutorial anterior.

1. Antes de empezar

Ya que vamos a trabajar con PHP, es necesario que tengas instalado en tu sistema un servidor local que soporte PHP.

Lo primero que vamos a hacer es crear una tabla con los campos del formulario, si haz modificado el formulario añadiendole o quitandole campos, tendras que hacer lo mismo aqui, el siguiente codigo es un SQL que podemos ejecutar desde phpMyAdmin o ingresarlo manualmente si no disponimos de esa herramienta:

CREATE TABLE `cf` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `asunto` varchar(255) NOT NULL,
  `mensaje` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Le vamos a poner ‘cf’ (contact form) a la tabla y definimos los campos, primero id que va a ser la llave primaria y con auto_increment y luego los campos del formulaio.

Ahora vamos a crear un nuevo archivo donde se van almacenar los datos de conexión a la base de datos, a este le pondremos conexion.php:

El contenido de este archivo tiene que ser asi:

<?php

$host = 'localhost';
$usuario = 'root';
$pass = 'root';

$conn = mysql_connect($host, $usuario, $pass) or die ('Error conectando a la base de datos');

$bdnombre = 'cf';
mysql_select_db($bdnombre);

Allí definiremos las credenciales de conexión a MySQL, en caso de trabajar en un servidor local casi siempre son esos (localhost, root, root).

2. index.php

Abrimos este archivo y modificamos la parte de PHP, lo primero sera incluir a conexion.php, en esta ocasion vamos a usar require, ya que es necesario que ese archivo este presente:

<?php
        require("conexion.php");

        if(isset($_POST['boton'])){
            if($_POST['nombre'] == ''){
                $error1 = '<span class="error">Ingrese su nombre</span>';
            }else if($_POST['email'] == '' or !preg_match("/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/",$_POST['email'])){
                $error2 = '<span class="error">Ingrese un email correcto</span>';
            }else if($_POST['asunto'] == ''){
                $error3 = '<span class="error">Ingrese un asunto</span>';
            }else if($_POST['mensaje'] == ''){
                $error4 = '<span class="error">Ingrese un mensaje</span>';
            }else{
                $dest = "tu@email.com"; //Email de destino
                $nombre = $_POST['nombre'];
                $email = $_POST['email'];
                $asunto = $_POST['asunto']; //Asunto
                $cuerpo = $_POST['mensaje']; //Cuerpo del mensaje
                //Cabeceras del correo
                $headers = "From: $nombre <$email>\r\n"; //Quien envia?
                $headers .= "X-Mailer: PHP5\n";
                $headers .= 'MIME-Version: 1.0' . "\n";
                $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //

                if(mail($dest,$asunto,$cuerpo,$headers)){
                    $result = '<div class="result_ok">Email enviado correctamente <img src="http://web.tursos.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </div>';
                    // si el envio fue exitoso reseteamos lo que el usuario escribio:
                    $_POST['nombre'] = '';
                    $_POST['email'] = '';
                    $_POST['asunto'] = '';
                    $_POST['mensaje'] = '';

                }else{
                    $result = '<div class="result_fail">Hubo un error al enviar el mensaje <img src="http://web.tursos.com/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> </div>';

                }
            }
        }
    ?>

Ahora nos movemos hasta la linea 34 luego de la parte donde se hace la condicional si envio o no el correo, alli añadimos un salto de linea y ponemos dos lineas en una se va a guardar la consulta SQL que se va ejecutar y la otra va a ir la funcion que la ejecute:

                if(mail($dest,$asunto,$cuerpo,$headers)){

					$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}')"; 
					mysql_query($sql) or die(mysql_error()); 

					$result = '<div class="result_ok">Email enviado correctamente  </div>';	
					// si el envio fue exitoso reseteamos lo que el usuario escribio:
					$_POST['nombre'] = '';
					$_POST['email'] = '';
					$_POST['asunto'] = '';
					$_POST['mensaje'] = '';

				}else{
					$result = '<div class="result_fail">Hubo un error al enviar el mensaje  </div>';	
				}

Y con eso ya tendríamos nuestro formulario funcionando, recuerda que si modificaste los campos haz de hacerlo tambien en la consulta, por ejemplo:

$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`,`campo_z`,`campo_x`,`campo_y`) 
VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}','{$_POST['campo_z']}','{$_POST['campo_x']}','{$_POST['campo_y']}')";

O en caso tengas el los valores guardados/concatenados en variables:

$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) 
VALUES ('$nombre','$email','$asunto','$mensaje','$body')";

3. Mejoras de seguridad

Como vamos a trabajar con bases de datos es recomendable asegurarnos que no nos inyecten el formulario, para eso vamos a usar mysql_real_escape_string antes de la consulta mediante un foreach, de esta forma lo hara en todas las variables POST que se hayan ingresado:

                if(mail($dest,$asunto,$cuerpo,$headers)){

					foreach($_POST AS $key => $value) { 
						$_POST[$key] = mysql_real_escape_string($value); 
					} 

					$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}')"; 
					mysql_query($sql) or die(mysql_error()); 

					$result = '<div class="result_ok">Email enviado correctamente  </div>';	
					// si el envio fue exitoso reseteamos lo que el usuario escribio:
					$_POST['nombre'] = '';
					$_POST['email'] = '';
					$_POST['asunto'] = '';
					$_POST['mensaje'] = '';

				}else{
					$result = '<div class="result_fail">Hubo un error al enviar el mensaje  </div>';	
				}

4. Código Final

<?php
    require('conexion.php'); 

    if(isset($_POST['boton'])){
        if($_POST['nombre'] == ''){
            $error1 = '<span class="error">Ingrese su nombre</span>';
        }else if($_POST['email'] == '' or !preg_match("/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/",$_POST['email'])){
            $error2 = '<span class="error">Ingrese un email correcto</span>';
        }else if($_POST['asunto'] == ''){
            $error3 = '<span class="error">Ingrese un asunto</span>';
        }else if($_POST['mensaje'] == ''){
            $error4 = '<span class="error">Ingrese un mensaje</span>';
        }else{
            $dest = "tu@email.com"; //Email de destino
            $nombre = $_POST['nombre'];
            $email = $_POST['email'];
            $asunto = $_POST['asunto']; //Asunto
            $cuerpo = $_POST['mensaje']; //Cuerpo del mensaje
            //Cabeceras del correo
            $headers = "From: $nombre <$email>\r\n"; //Quien envia?
            $headers .= "X-Mailer: PHP5\n";
            $headers .= 'MIME-Version: 1.0' . "\n";
            $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //

            if(mail($dest,$asunto,$cuerpo,$headers)){

                foreach($_POST AS $key => $value) {
                    $_POST[$key] = mysql_real_escape_string($value);
                } 

                $sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}')";
                mysql_query($sql) or die(mysql_error()); 

                $result = '<div class="result_ok">Email enviado correctamente <img src="http://web.tursos.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </div>';
                // si el envio fue exitoso reseteamos lo que el usuario escribio:
                $_POST['nombre'] = '';
                $_POST['email'] = '';
                $_POST['asunto'] = '';
                $_POST['mensaje'] = '';

            }else{
                $result = '<div class="result_fail">Hubo un error al enviar el mensaje <img src="http://web.tursos.com/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> </div>';
            }
        }
    }
?>
<html>
    <head>
        <title>Contacto</title>
        <link rel='stylesheet' href='estilos.css'>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
        <script src='funciones.js'></script>
    </head>
    <body>
        <form class='contacto' method='POST' action=''>
            <div><label>Tu Nombre:</label><input type='text' class='nombre' name='nombre' value='<?php echo $_POST['nombre']; ?>'><?php echo $error1 ?></div>
            <div><label>Tu Email:</label><input type='text' class='email' name='email' value='<?php echo $_POST['email']; ?>'><?php echo $error2 ?></div>
            <div><label>Asunto:</label><input type='text' class='asunto' name='asunto' value='<?php echo $_POST['asunto']; ?>'><?php echo $error3 ?></div>
            <div><label>Mensaje:</label><textarea rows='6' class='mensaje' name='mensaje'><?php echo $_POST['mensaje']; ?></textarea><?php echo $error4 ?></div>
            <div><input type='submit' value='Envia Mensaje' class='boton' name='boton'></div>
            <?php echo $result; ?>
        </form>
    </body>
</html>

Con eso hemos terminado esta ultima parte del formulario (por ahora), recuerda que puedes descargarte el código fuente en este enlace.

Si no entendiste una parte o tienes alguna duda, házmela saber en los comentarios.

1 Animar la propiedad background-image con jQuery

Demo

2 Hacer un Slider con efecto parallax con jQuery y CSS3

Demo

3 Tabs organicos con jQuery

Demo

4 Hacer una slider 3D con jQuery

Demo

5 Como hacer un robot animado con jQuery

Demo

6 Galeria con Slide hecha con jQuery

Demo

7 Efecto Blur hecho con jQuery

Demo

8 Hacer un formulario de Login animado similar al de Apple

Demo

9 Efectos hover en elementos circulares

Demo

10 Slider con efecto de burbuja hecho con jQuery y CSS

Demo

• Tutorial de: PHP
• Dificultad: Intermedio
• Tiempo: 45 Minutos

En este tutorial desarrollaremos y explicaremos un sistema de registro de usuarios, este tutorial es una continuación de este otro donde vimos como crear un sistema de login de usuarios.

1. Crear la tabla en MySQL

Vamos a comenzar preparando una tabla en nuestra base de datos, la cual almacenara la información de los usuarios, para crear la tabla simplemente copia y ejecuta la siguiente consulta SQL:

CREATE TABLE `usuarios` (
  `idusuario` INT(11) NOT NULL AUTO_INCREMENT,
  `usuario` VARCHAR(20) NOT NULL,
  `password` VARCHAR(10) NOT NULL,
  PRIMARY KEY  (`idusuario`)
)

2. Conectando a MySQL en PHP

Ya una vez que tengamos la estructura de nuestra tabla, creamos un archivo llamado conexion.php.

<?php
// datos para la coneccion a mysql
define('DB_SERVER','localhost');
define('DB_NAME','TU_BASE_DE_DATOS');
define('DB_USER','TU_USUARIO');
define('DB_PASS','TU_CLAVE');

La funcion define como su nombre lo dice, se usa para definir una constante nominada, que nos permite almacenar valores escalares(string, integer, float, boolean y nulos).

$con = mysql_connect(DB_SERVER,DB_USER,DB_PASS);
mysql_select_db(DB_NAME,$con);
?>

La función de mysql_connect nos servira para abrir una conexión al servidor de MySQL usando los 3 parámetros que declaramos anteriormente. Luego mysql_select_db selecciona la base de datos usando 2 parámetros, el nombre de la base de datos y la conexión a usar.

Código completo

<?php
// datos para la conexion a mysql
define('DB_SERVER','localhost');
define('DB_NAME','TU_BASE_DE_DATOS');
define('DB_USER','TU_USUARIO');
define('DB_PASS','TU_CLAVE');
$con = mysql_connect(DB_SERVER,DB_USER,DB_PASS);
mysql_select_db(DB_NAME,$con);
?>

4. index.php

Ahora pasamos el archivo index.php, el cual contendrá el formulario de registro y al mismo tiempo el mensaje de “fue registrado correctamente” o “faltan llenar campos”.

<?php
session_start();
include_once "conexion.php";

session_start() crea una sesión para ser usada mediante una petición GET o POST, o pasado por una cookie y la sentencia include_once es la usaremos para incluir el archivo de conexión a la base de datos que creamos anteriormente.

Usuario: 
Clave: 
Repetir Clave: 

Creamos el formulario con el campo de Usuario que se llamara $_POST['usuario'] y 2 campos para la clave y uno mas para confirmar si escribió bien la clave, se llamaran $_POST['password'] y $_POST['repassword'] respectivamente, procedemos a escribir el codigo que procesara y validara lo que el usuario ingrese:

if(isset($_POST['enviar']))
{
	if($_POST['usuario'] == '' or $_POST['password'] == '' or $_POST['repassword'] == '')
	{
		echo 'Por favor llene todos los campos.';
	}
	else
	{	
		$sql = 'SELECT * FROM usuarios';
		$rec = mysql_query($sql);
		$verificar_usuario = 0;
			 
		while($result = mysql_fetch_object($rec))
		{
			if($result->usuario == $_POST['usuario'])
			{
				$verificar_usuario = 1;
			}
		}

		if($verificar_usuario == 0)
		{
			if($_POST['password'] == $_POST['repassword'])
			{
				$usuario = $_POST['usuario'];
				$password = $_POST['password'];
				$sql = "INSERT INTO usuarios (usuario,password) VALUES ('$usuario','$password')";
				mysql_query($sql);
						
				echo 'Usted se ha registrado correctamente.';	
			}
			else
			{
				echo 'Las claves no son iguales, intente nuevamente.';	
			}
		}
		else
		{
			echo 'Este usuario ya ha sido registrado anteriormente.';	
		}
	}
}

• Linea 1: La primera condición es para saber cuando el formulario haya sido enviado.
• Linea 3: Si los campos están vacíos muestra el siguiente mensaje, caso contrario sigue el siguiente bloque de código.
• Linea 11, 15 y 21: Creamos la variable $verificar_usuario que empieza con un valor de 0, pero si la condición de la linea 15 resulta verdadera, entonces la variable toma el valor de 1 que quiere decir que ese nombre de usuario ya existe por lo tanto no se puede registrar.
• Linea 23: Si los campos son iguales, continua el registro o caso contrario saldrá un mensaje de error.
• Linea 27: Se insertan los datos a la base de datos, el usuario es registrado con exito y sale el mensaje correspondiente.

Decoración opcional con CSS

Esta parte es algo de CSS opcional ya que no influye en nada en el funcionamiento del sistema, es unicamente decorativa:

		*{
			font-size: 14px;
			font-family: sans-serif;
		}
		form.registro{
		    background: none repeat scroll 0 0 #F1F1F1;
		    border: 1px solid #DDDDDD;
		    margin: 0 auto;
		    padding: 20px;
		    width: 278px;
		}
		form.registro div {
		    margin-bottom: 15px;
		    overflow: hidden;
		}
		form.registro div label {
		    display: block;
		    float: left;
		    line-height: 25px;
		}
		form.registro div input[type="text"], form.registro div input[type="password"] {
		    border: 1px solid #DCDCDC;
		    float: right;
		    padding: 4px;
		}
		form.registro div input[type="submit"] {
		    background: none repeat scroll 0 0 #DEDEDE;
		    border: 1px solid #C6C6C6;
		    float: right;
		    font-weight: bold;
		    padding: 4px 20px;
		}
		.error{
			color: red;
		    font-weight: bold;
		    margin: 10px;
		    text-align: center;
		}

Y con esto terminamos el nuestro sistema de registro en PHP, recuerda que puedes probar el resultado final en esta dirección o bajarte el código fuente desde aqui.

• Tutorial de: HTML & CSS
• Dificultad: Fácil
• Tiempo: 30 Minutos

Ya hemos visto como hacer un boton animado solo con CSS sin usar imagenes. En esta ocasión, haremos algo parecido, serán botones pero con diferente animación y utilizando las propiedades de CSS3 ademas de una imagen de fondo. Empecemos!

Primeramente crearemos la estructura en HTML

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Botones Animados con CSS3</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />

</head>
<body>
<div id="contenedor">

		<a href="#" class="button grande azul">Boton </a>
		<a href="#" class="button mediano rojo">con</a>
		<a href="#" class="button chico amarillo">CSS3</a>
		
		<a href="#" class="button grande amarillo clear">Boton Grande</a>
		<a href="#" class="button mediano azul">Boton Mediano</a>
		<a href="#" class="button chico rojo">Boton Chico</a>


		<a href="#" class="button grande rojo clear">Boton Grande</a>
		<a href="#" class="button mediano amarillo ">Boton Mediano</a>
		<a href="#" class="button chico azul">Boton Chico</a>

    
</div>    
</body>
</html>

Ahora crearemos la estructura en CSS3, lo primero que vamos a hacer será darle el diseño que necesitamos para los botones:

estilos.css

/*CODIGO PARA LOS BOTONES*/
.button{
	font:15px Calibri, Arial, sans-serif;
	
	/*Configuraciones de la posicion de los botones*/
	text-decoration:none !important;
	cursor:pointer;
	padding:10px 20px;
	white-space:nowrap;
	position: relative;
	
	/* Sombra en el texto */
	text-shadow:1px 1px 0 rgba(0,0,0,0.4);
	
	
	/* Para los navegadores que no soportan multiples fondos */
	background-position:bottom left;
	background-image:url('boton.png');
	
	
	/* Fondos multiples */
	background-position:bottom left, top right, 0 0, 0 0;
	background-clip:border-box;
	
	
	/* bordes redondeados*/
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	
	
	/* sombra en los div */
	-moz-box-shadow:0 0 1px #fff inset;
	-webkit-box-shadow:0 0 1px #fff inset;
	box-shadow:0 0 1px #fff inset;
	
	
	/* propiedad transition */
	-webkit-transition:background-position 1s;
	-moz-transition:background-position 1s;
	transition:background-position 1s;
}

.button:hover{
	
	/* Al pasar el ratón encima del boton, activara el efecto hover y hará que la posicion del fondo cambie*/	
	background-position:top left;
	background-position:top left, bottom right, 0 0, 0 0;
}

.button:active{
	/* Moverá el boton 1px al cliclearlo*/
	bottom:-2px;
}

Como se muestra en el código utilizamos las propiedades transition, border radius y demás propiedades del CSS3.

En el código CSS se utiliza una imagen de fondo para los botones, dicha imagen es esta:

Como vemos la imagen es un poco sencilla, son degradados de diamante de varios tamaños hecho en photoshop en un solo lienzo de 420px x 500px, esta imagen la colocamos como fondo para los botones (y con fondos multiples para los navegadores que soportan esa propiedad); con la propiedad de CSS3 transition, hacemos que el boton tenga ese maravilloso efecto de movimiento al pasar el mouse encima del mismo. La imagen en formato .png lo podrán descargar con el código completo mas arriba.

Bien, ya tenemos el código necesario para la animación del botón, ahora necesitamos crear el código para el tamaño y es el siguiente:

* Aqui se configura el tamaño de los botones, en realidad lo que se configura es el tamaño de la letra, pero al configurar el tamaño de la letra
el boton toma el nuevo tamaño como referencia, por eso el tamaño del boton es mayor o menor*/
.button.grande	{ font-size:30px;}
.button.mediano	{ font-size:18px;}
.button.chico	{ font-size:13px;}

Con el código hasta aquí ya logramos el efecto de transición para los botones, pero como utilizamos una imagen transparente no podemos ver el efecto en funcionamiento, por lo tanto la ultima parte del código será para definir los colores:

/* Color Azul */
.azul.button{
	color:#FFF !important;
	border:1px solid #84acc3 !important;
	background-color: #80B7FF;
	
	
	background-image:	url('boton.png'), url('boton.png'),
						-moz-radial-gradient(	center bottom, circle,rgba(5,5,54,1) 0,rgba(189,208,244,0) 100px),
						-moz-linear-gradient(#4fbbf7, #3faeeb);

	background-image:	url('boton.png'), url('boton.png'),
						-webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100, from(rgba(50,150,255,1)), to(rgba(50,110,255,0))),
						-webkit-gradient(linear, 0% 0%, 0% 100%, from(#0BA2F4), to(#0982C3));
}
.azul.button:hover{
	background-color:#99C5FF;
	
	background-image:	url('boton.png'), url('boton.png'),
						-moz-radial-gradient(	center bottom, circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
						-moz-linear-gradient(#63c7fe, #58bef7);
						
	background-image:	url('boton.png'), url('boton.png'),
						-webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
						-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

/* Color amarillo */
.amarillo.button{
	color:#FFF !important;
	border:1px solid #E07F00 !important;	
	background-color: #FF9933;
	
	background-image:url('boton.png'), url('boton.png'), 
	-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(240,220,120,1)), to(rgba(210,190,115,0))),
	-moz-linear-gradient(#FF9933, #F57A00);
	
	background-image:url('boton.png'), url('boton.png'), 
	-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(240,220,120,1)), to(rgba(210,190,115,0))),
	-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF9933), to(#FF9429));
}

.amarillo.button:hover{
	background-color:#FFB452;
	
	background-image:url('boton.png'), url('boton.png'), 
	-moz-radial-gradient(center bottom, circle, rgba(250,250,56,1) 0,rgba(250,250,70,0) 100px),
	-moz-linear-gradient(#FFB452, #FF9E1F);
	
	background-image:url('boton.png'), url('boton.png'), 
	-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(250,250,110,1)), to(rgba(250,250,120,0))),
	-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFB452), to(#FF9E1F));
}

/* Color rojo*/
.rojo.button{
	color:#FFF !important;
	border:1px solid #bea280 !important;	
	background-color: #EC3232;
	
	background-image:url('boton.png'), url('boton.png'), 
	-moz-radial-gradient(center bottom, circle, rgba(232,45,67,1) 0,rgba(232,45,45,0) 100px),
	-moz-linear-gradient(#F9464A, #E12B2F);
	
	background-image:url('boton.png'), url('boton.png'), 
	-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,45,67,1)), to(rgba(232,45,45,0))),
	-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9464A), to(#E12B2F));
}

.rojo.button:hover{
	background-color:#EC3232;
	
	background-image:url('boton.png'), url('boton.png'), 
	-moz-radial-gradient(center bottom, circle, rgba(241,45,67,1) 0,rgba(241,30,30,0) 100px),
	-moz-linear-gradient(#F8585B, #E5383C);
	background-image:url('boton.png'), url('boton.png'), 
	-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,45,67,1)), to(rgba(241,30,30,0))),
	-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8585B), to(#E5383C));
}

Combinamos todo este código CSS en uno solo y el resultado sería como se muestra en la siguiente imagen: