Archivo de la categoría: Web
¿Qué necesitamos?
Unos conocimientos básicos en html (con unos conocimientos de andar por casa nos es más que suficiente).
Un servidor que soporte PHP
Una base de datos en MySql y un mínimo control de las mismas.
El código del formulario.
<!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>Formulario de prueba</title>
</head>
<body>
<div id="contenedor">
<form id="formulario" name="prueba" method="post" action="enviar.php" enctype="application_x-www-form-urlencoded">
<label>Nombre</label>
<input id="nombre" class="required" type="text" name="nombre" maxlength="60" />
<label>Apellidos</label>
<input id="apellidos" class="required" type="text" name="nombre" maxlength="60" />
<label>e-mail</label>
<input id="email" class="required email" type="text" name="nombre" maxlength="60" />
<input type="submit" name="enviar" id="enviar" value="Enviar Datos">
</form>
</div>
</body>
</html>
Este es un código para un formulario básico. Veamos el código con detenimiento. Primero declaramos el DOCTYPE y le damos un título al documento. Al “form” le damos el id=”formulario”. Puedes cambiar este id por el que estimes oportuno, pero ten en cuenta que este id va a ser necesario para la validación.
Este sencillo formulario tiene tres campos básicos: Nombre, apellidos y e-mail aunque se pueden utilizar tantos como necesitemos. A estos campos debemos darles un id y un name que les identifique en este caso: nombre, apellidos, email. Este id y el name también lo usaremos luego para hacer la conexión con la base de datos, tratadlos con cuidado. Además a cada campo que queramos que sea obligatorio le adjudicaremos la class=”required”, y si es un email class=”required email”. De esta forma comprobará que se han rellenado los campos antes de enviar el formulario y en el caso del e-mail verificará que es del tipo xxx@dominio.xx Esta validación nos da más posibilidades, pero antes vamos a ver como hacemos la validación
Validar el formulario:
<head>
<title>Formulario de Prueba</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$().ready(function() {
$("#formulario").validate();
});
// --></script>
</head>
Como la validación se hará por jquery lo primero que necesitamos serán los archivos js. Aquí os dejo el enlace para descargaros la última versión de jquery y la del plug-in de validación. Una vez que los hayamos descargados los guardamos en la carpeta js y los enlazamos a nuestro html como vemos en el código.
Ponemos en marcha la función a traves de la etiqueta “script” y definimos el id del formulario que vamos a validar. Como vemos en el ejemplo #formulario. Es importante que coincida con la que le dimos al form. Si queremos abrimos el archivo validate. js y buscamos las frases que aparecerán con la validación para traducirlas, ya que por defecto vienen en inglés. Es muy fácil. Además podremos ver todos los tipos de validaciones que nos permite este fantastico plug-in como por ejemplo por dígitos, url, etc.
Conexión a la base de datos MySql y envío de email.
Accede a la base de datos de MySql. Si no tienes muy claro como acceder, lo ideal es que lo hables con tu proveedor del alojamiento. Creas una nueva tabla llamada “prueba”, y en ella los campos que vamos a recojer, en nuestro caso nombre, apellidos, email. Yo además recomiendo crear un campo fecha, para saber con exactitud cuando se envió el formulario. Una vez que la base está hecha creamos nuestro archivo “enviar.php” para hacer la conexión. Veamos el código:
<?php
$fecha = date("d/m/Y H:i:s");
$nombre = $_REQUEST['nombre'] ;
$apellidos = $_REQUEST['apellidos'] ;
$email = $_REQUEST['email'] ;
$confirmacion = "Estos son los datos que has introducido. Muchas gracias por tu participación:<br /><br />Nombre: $nombre <br />Apellidos: $apellidos2";
mysql_connect ('servidor', 'usuario', 'contraseña') or die ('Error: ' . mysql_error());
mysql_select_db ('nombre_bd');
$query="INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES ('$fecha', '$nombre', '$apellidos', '$email')";
mysql_query($query) or die ('Error en la carga de datos');
mail($email, "Asunto del mensaje", $confirmacion, "From: correo@dominio.xx");
header("location:http://www.tudominio.es/respuesta.html")
?>
En primer lugar recojemos la información del formulario mediante la funcion REQUEST a las variables que deseemos. Lo más sencillo es llamar a la variable del mismo modo que hemos llamado a los id’s de cada campo. La variable “$nombre” recoje la información del campo con id “nombre”. Fácil, ¿verdad? Recogemos todos los datos y creamos una variable para el contenido del email de confirmacón: “$confirmacion”.
Ahora hacemos la conexión con la base de datos. Introducimos la dirección de nuestro servidor MySql, el usuario y la contraseña (estos datos os los dará vuestro proveedor de alojamiento), si falla nos aparecerá un error: mysql_connect (‘servidor’, ‘usuario’, ‘contraseña’) or die (‘Error: ‘ . mysql_error());
Seleccionamos la base de datos que queremos e introducirmos su nombre: mysql_select_db (‘nombre_bd’);
Luego hacemos el query para introducir los datos que hemos recogido en los campos que hemos creado en la base de datos. Para que entendais el código, le decimos que inserte en la tabla “prueba” en los campos que aparecen entre paréntesis los valores siguientes: $query="INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES (‘$fecha’, ‘$nombre’, ‘$apellidos’, ‘$email’)"; Cerramos la conexión con la base de datos.
Ahora enviamos un email de confirmación mediante la función mail. La función mail se construye en base a cuatro campos, que se ordenan de la siguiente manera: Dirección de destino, Asunto del mensaje, Contenido del mensaje y Dirección de envío. Así nuestra función quedaria de la siguiente manera: mail($email, “Asunto del mensaje”, $confirmacion, “From: correo@dominio.xx”); Como vemos en la dirección de destino tomamos la variable $mail, para que se envíe a la dirección que nos facilitaron. Para el contenido del mensaje utilizamos también la varibale $confirmación que habiamos declarado antes.
Para terminar yo utilizo la función “header” que me permite redirigir a una página de respuesta. Es una buena idea porque así informamos al cliente de que todo se ha procesado correctamente.
Y ya está. Fácil y muy útil.
Cualquier comentario o aportación será bienvenida.
Consideraciones básicas.
La pantalla del móvil es mucho más pequeña que la del ordenador. La mayor parte de los móviles son tactiles y necesitan unos botones relativamente grandes para que se puedan usar con facilidad. Por esto mismo un diseño que funcione bien en un monitor no tiene porque funcionar bien en el móvil.
La velocidad de conexión del móvil es siempre inferior a la del ordenador (por regla general). Optimizar las imágenes y los fondos es algo que nuestros usuarios nos agraderán enormemente. Que el sitio cargue con facilidad y rápidamente es siempre una buena señal.
Algunos recursos:
La mejor manera de comprobar como se nuestra web en un navegador móvil es con un teléfono móvil. Además lo ideal es probar con modelos distintos para ver las diferencias. Como eso a veces no es posible lo mejor es utilizar simuladores: ¿Cómo se ve mi web en un iPhone o un móvil con Android?
iPhone: http://iphonetester.com/
Multiplataform: http://protofluid.com/
Si lo que quieres es convertir tu sitio web para móviles y no te quieres complicar mucho tienes varias opciones.
Mippin: http://mippin.com/web/ Solo necesitas registrarte y podrás crear de manera gratuita una versión móvil de tu sitio web. Incluye algunas opciones de personalización que te pueden ser muy útiles
Plug-in para wordpress: Si utilizas wordpress como cms o plataforma de blog existe un pequeño plug-in que te puede ayudar muchisimo: WordPress Mobile Pack http://wordpress.org/extend/plugins/wordpress-mobile-pack/. Yo no soy excesivamente partidario de los plug-in pero no está nada mal este, fácil de usar y fácil de instalar.
Zinaddo: http://www.zinadoo.com/ Desde esta web también podrás crear una versión móvil de tu sitio.
Hoy os traigo un link a una web de Eventos Tecnicos Audiovisuales que acabo de terminar. Se aceptan opiniones y sugerencias.
Muchas gracias.
Por fin tenemos la actualización de mi Portfolio on-line. Ya estais tardando en visitarlo y en dejar vuestras opiniones por aquí. Estoy abierto a cualquier crítica que sirva para mejorar el sitio.
DisenioN : Diseño Gráfico y Diseño Web
¡Un saludo a todos!
