<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>DisenioN &#187; Web</title>
	<atom:link href="http://www.disenion.com/blog/category/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.disenion.com</link>
	<description>Dando forma a las ideas</description>
	<lastBuildDate>Mon, 01 Aug 2011 07:06:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
		<item>
		<title>Formularios: Validación y envío a Bases de Datos</title>
		<link>http://www.disenion.com/blog/formularios-validacion-y-envio-a-bases-de-datos/</link>
		<comments>http://www.disenion.com/blog/formularios-validacion-y-envio-a-bases-de-datos/#comments</comments>
		<pubDate>Mon, 07 Feb 2011 06:14:35 +0000</pubDate>
		<dc:creator>Diego González Villarejo</dc:creator>
				<category><![CDATA[Recursos]]></category>
		<category><![CDATA[Tutoriales Web]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.disenion.com/?p=1206</guid>
		<description><![CDATA[<div class="col-izq">
El formulario se valida antes de ser enviado mediante jquery. Con PHP se envía la información recogida a una base de datos y además enviamos un e-mail de confirmación.
</div>
<div class="col-der">
Un buen formulario puede ser una gran herramienta para la recogida de información. Pero para poder aprovecharlo al máximo debemos potenciarlo. Hoy vamos a explicar de una manera sencilla <strong>como validar un formulario con jquery, como enviar la información recogida por PHP a tu dirección de correo y una base de datos en MySql.</strong>

<h4>¿Qué necesitamos?</h4>
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.

<h4>El código del formulario.</h4>

<code>&#60;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&#62;
&#60;html xmlns="http://www.w3.org/1999/xhtml"&#62;
&#60;head&#62;
&#60;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&#62;
&#60;title&#62;Formulario de prueba&#60;/title&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;div id="contenedor"&#62;
&#60;form id="formulario" name="prueba" method="post" action="enviar.php" enctype="application_x-www-form-urlencoded"&#62;
&#60;label&#62;Nombre&#60;/label&#62;
&#60;input id="nombre" class="required" type="text" name="nombre" maxlength="60" /&#62;
&#60;label&#62;Apellidos&#60;/label&#62;
&#60;input id="apellidos" class="required" type="text" name="nombre" maxlength="60" /&#62;
&#60;label&#62;e-mail&#60;/label&#62;
&#60;input id="email" class="required email" type="text" name="nombre" maxlength="60" /&#62;
&#60;input type="submit" name="enviar" id="enviar" value="Enviar Datos"&#62;
&#60;/form&#62;
&#60;/div&#62;
&#60;/body&#62;
&#60;/html&#62;
</code>

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

<h4>Validar el formulario:</h4>
<code>&#60;head&#62;
&#60;title&#62;Formulario de Prueba&#60;/title&#62; 
&#60;meta http-equiv=&#34;content-type&#34; content=&#34;text/html; charset=ISO-8859-1&#34;&#62;
&#60;meta http-equiv=&#34;Content-Style-Type&#34; content=&#34;text/css&#34;&#62;
&#60;meta http-equiv=&#34;Content-Script-Type&#34; content=&#34;text/javascript&#34;&#62;
&#60;script src=&#34;js/jquery-1.4.4.min.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;
&#60;script src=&#34;js/jquery.validate.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;
&#60;script type=&#34;text/javascript&#34;&#62;&#60;!--
  $().ready(function() {
  $(&#34;#formulario&#34;).validate();
  });
  // --&#62;&#60;/script&#62;
&#60;/head&#62;
</code>

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 <a href="http://jquery.com/">jquery</a> y la del <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">plug-in de validación</a>. 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.

<h4>Conexión a la base de datos MySql y envío de email.</h4>

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:

<code>&#60;?php 
  $fecha = date(&#34;d/m/Y H:i:s&#34;);
  $nombre = $_REQUEST['nombre'] ;
  $apellidos = $_REQUEST['apellidos'] ;
  $email = $_REQUEST['email'] ;
  $confirmacion = &#34;Estos son los datos que has introducido. Muchas gracias por tu participación:&#60;br /&#62;&#60;br /&#62;Nombre: $nombre &#60;br /&#62;Apellidos: $apellidos2&#34;;  
  mysql_connect ('servidor', 'usuario', 'contraseña') or die ('Error: ' . mysql_error());
  mysql_select_db ('nombre_bd');
 $query=&#34;INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES ('$fecha', '$nombre', '$apellidos', '$email')&#34;;
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")
?></code>

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: <strong>mysql_connect ('servidor', 'usuario', 'contraseña') or die ('Error: ' . mysql_error());</strong> 

Seleccionamos la base de datos que queremos e introducirmos su nombre: <strong>mysql_select_db ('nombre_bd');</strong> 

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: <strong>$query=&#34;INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES ('$fecha', '$nombre', '$apellidos', '$email')&#34;;</strong> 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: <strong>mail($email, "Asunto del mensaje", $confirmacion, "From: correo@dominio.xx");</strong> 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.

<a href="http://www.disenion.com/formulario/formulario.html"><img src="http://www.disenion.com/blog/wp-content/uploads/2011/02/ver_demo_formulario.jpg" alt="Ver demo formulario" title="Ver demo formulario" width="223" height="55" class="alignnone size-full wp-image-1236" /></a> <a href="http://www.disenion.com/archivos/formulario_prueba.zip"><img src="http://www.disenion.com/blog/wp-content/uploads/2011/02/descargar_formulario.jpg" alt="Descargar archivos formulario" title="Descargar archivos formulario" width="223" height="55" class="alignnone size-full wp-image-1237" /></a>

Cualquier comentario o aportación será bienvenida.
</div>   ]]></description>
			<content:encoded><![CDATA[<div class="col-izq">
El formulario se valida antes de ser enviado mediante jquery. Con PHP se envía la información recogida a una base de datos y además enviamos un e-mail de confirmación.
</div>
<div class="col-der">
Un buen formulario puede ser una gran herramienta para la recogida de información. Pero para poder aprovecharlo al máximo debemos potenciarlo. Hoy vamos a explicar de una manera sencilla <strong>como validar un formulario con jquery, como enviar la información recogida por PHP a tu dirección de correo y una base de datos en MySql.</strong></p>
<h4>¿Qué necesitamos?</h4>
<p>Unos conocimientos básicos en html (con unos conocimientos de andar por casa nos es más que suficiente).<br />
Un servidor que soporte PHP<br />
Una base de datos en MySql y un mínimo control de las mismas.</p>
<h4>El código del formulario.</h4>
<p><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br />
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br />
&lt;head&gt;<br />
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;<br />
&lt;title&gt;Formulario de prueba&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;div id="contenedor"&gt;<br />
&lt;form id="formulario" name="prueba" method="post" action="enviar.php" enctype="application_x-www-form-urlencoded"&gt;<br />
&lt;label&gt;Nombre&lt;/label&gt;<br />
&lt;input id="nombre" class="required" type="text" name="nombre" maxlength="60" /&gt;<br />
&lt;label&gt;Apellidos&lt;/label&gt;<br />
&lt;input id="apellidos" class="required" type="text" name="nombre" maxlength="60" /&gt;<br />
&lt;label&gt;e-mail&lt;/label&gt;<br />
&lt;input id="email" class="required email" type="text" name="nombre" maxlength="60" /&gt;<br />
&lt;input type="submit" name="enviar" id="enviar" value="Enviar Datos"&gt;<br />
&lt;/form&gt;<br />
&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />
</code></p>
<p>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 &#8220;form&#8221; le damos el id=&#8221;formulario&#8221;. Puedes cambiar este id por el que estimes oportuno, pero ten en cuenta que este id va a ser necesario para la validación.</p>
<p>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=&#8221;required&#8221;, y si es un email class=&#8221;required email&#8221;. 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</p>
<h4>Validar el formulario:</h4>
<p><code>&lt;head&gt;<br />
&lt;title&gt;Formulario de Prueba&lt;/title&gt;<br />
&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-1&quot;&gt;<br />
&lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot;&gt;<br />
&lt;meta http-equiv=&quot;Content-Script-Type&quot; content=&quot;text/javascript&quot;&gt;<br />
&lt;script src=&quot;js/jquery-1.4.4.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
&lt;script src=&quot;js/jquery.validate.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--<br />
  $().ready(function() {<br />
  $(&quot;#formulario&quot;).validate();<br />
  });<br />
  // --&gt;&lt;/script&gt;<br />
&lt;/head&gt;<br />
</code></p>
<p>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 <a href="http://jquery.com/">jquery</a> y la del <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">plug-in de validación</a>. Una vez que los hayamos descargados los guardamos en la carpeta js y los enlazamos a nuestro html como vemos en el código.</p>
<p>Ponemos en marcha la función a traves de la etiqueta &#8220;script&#8221; 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.</p>
<h4>Conexión a la base de datos MySql y envío de email.</h4>
<p>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 &#8220;prueba&#8221;, 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 &#8220;enviar.php&#8221; para hacer la conexión. Veamos el código:</p>
<p><code>&lt;?php<br />
  $fecha = date(&quot;d/m/Y H:i:s&quot;);<br />
  $nombre = $_REQUEST['nombre'] ;<br />
  $apellidos = $_REQUEST['apellidos'] ;<br />
  $email = $_REQUEST['email'] ;<br />
  $confirmacion = &quot;Estos son los datos que has introducido. Muchas gracias por tu participación:&lt;br /&gt;&lt;br /&gt;Nombre: $nombre &lt;br /&gt;Apellidos: $apellidos2&quot;;<br />
  mysql_connect ('servidor', 'usuario', 'contraseña') or die ('Error: ' . mysql_error());<br />
  mysql_select_db ('nombre_bd');<br />
 $query=&quot;INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES ('$fecha', '$nombre', '$apellidos', '$email')&quot;;<br />
mysql_query($query) or die ('Error en la carga de datos');<br />
mail($email, "Asunto del mensaje", $confirmacion, "From: correo@dominio.xx");<br />
header("location:http://www.tudominio.es/respuesta.html")<br />
?></code></p>
<p>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&#8217;s de cada campo. La variable &#8220;$nombre&#8221; recoje la información del campo con id &#8220;nombre&#8221;. Fácil, ¿verdad? Recogemos todos los datos y creamos una variable para el contenido del email de confirmacón: &#8220;$confirmacion&#8221;. </p>
<p>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: <strong>mysql_connect (&#8216;servidor&#8217;, &#8216;usuario&#8217;, &#8216;contraseña&#8217;) or die (&#8216;Error: &#8216; . mysql_error());</strong> </p>
<p>Seleccionamos la base de datos que queremos e introducirmos su nombre: <strong>mysql_select_db (&#8216;nombre_bd&#8217;);</strong> </p>
<p>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 &#8220;prueba&#8221; en los campos que aparecen entre paréntesis los valores siguientes: <strong>$query=&quot;INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES (&#8216;$fecha&#8217;, &#8216;$nombre&#8217;, &#8216;$apellidos&#8217;, &#8216;$email&#8217;)&quot;;</strong> Cerramos la conexión con la base de datos.</p>
<p>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: <strong>mail($email, &#8220;Asunto del mensaje&#8221;, $confirmacion, &#8220;From: correo@dominio.xx&#8221;);</strong> 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.</p>
<p>Para terminar yo utilizo la función &#8220;header&#8221; 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.</p>
<p>Y ya está. Fácil y muy útil.</p>
<p><a href="http://www.disenion.com/formulario/formulario.html"><img src="http://www.disenion.com/blog/wp-content/uploads/2011/02/ver_demo_formulario.jpg" alt="Ver demo formulario" title="Ver demo formulario" width="223" height="55" class="alignnone size-full wp-image-1236" /></a> <a href="http://www.disenion.com/archivos/formulario_prueba.zip"><img src="http://www.disenion.com/blog/wp-content/uploads/2011/02/descargar_formulario.jpg" alt="Descargar archivos formulario" title="Descargar archivos formulario" width="223" height="55" class="alignnone size-full wp-image-1237" /></a></p>
<p>Cualquier comentario o aportación será bienvenida.
</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.disenion.com/blog/formularios-validacion-y-envio-a-bases-de-datos/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>Sitios Web para el móvil</title>
		<link>http://www.disenion.com/blog/sitios-web-para-el-movil/</link>
		<comments>http://www.disenion.com/blog/sitios-web-para-el-movil/#comments</comments>
		<pubDate>Wed, 15 Sep 2010 06:27:22 +0000</pubDate>
		<dc:creator>Diego González Villarejo</dc:creator>
				<category><![CDATA[Artículos]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.disenion.com/?p=1069</guid>
		<description><![CDATA[<div class="resaltado">La era de los dispositivos móviles</div>
<img src="http://www.disenion.com/blog/wp-content/uploads/2010/09/iphone.png" alt="" title="iphone" width="503" height="258" class="aligncenter size-full wp-image-1076" />
<div class="resaltado">En breve la mayoría de las conexiones serán por móvil</div>

<div class="col-izq">
Como diseñadores web debemos cambiar el chip. En un futuro muy cercano muchos de los usuarios que acceden a nuestros sitios lo harán a través del teléfono móvil, así que hay que estar preparados. Si te ves capacitado para crear una aplicación para el iPhone o para Android, ¡adelante! es la mejor solución. Y si no lo haces o aunque lo hagas es bueno tener bien optimizada la web para los móviles.

<h5>Consideraciones básicas.</h5>

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.
<img src="http://www.disenion.com/blog/wp-content/uploads/2010/09/iconos_movil.jpg" alt="" title="iconos_movil" width="460" height="84" class="alignleft size-full wp-image-1077" />
</div>

<div class="col-der">
<h5>Algunos recursos:</h5>

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: <a href="http://iphonetester.com/">http://iphonetester.com/</a>

Multiplataform: <a href="http://protofluid.com/">http://protofluid.com/</a>

Si lo que quieres es convertir tu sitio web para móviles y no te quieres complicar mucho tienes varias opciones.

Mippin: <a href="http://mippin.com/web/">http://mippin.com/web/</a> 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 <a href="http://wordpress.org/extend/plugins/wordpress-mobile-pack/">http://wordpress.org/extend/plugins/wordpress-mobile-pack/</a>. 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: <a href="http://www.zinadoo.com/">http://www.zinadoo.com/</a> Desde esta web también podrás crear una versión móvil de tu sitio.
</div>]]></description>
			<content:encoded><![CDATA[<div class="resaltado">La era de los dispositivos móviles</div>
<p><img src="http://www.disenion.com/blog/wp-content/uploads/2010/09/iphone.png" alt="" title="iphone" width="503" height="258" class="aligncenter size-full wp-image-1076" /></p>
<div class="resaltado">En breve la mayoría de las conexiones serán por móvil</div>
<div class="col-izq">
Como diseñadores web debemos cambiar el chip. En un futuro muy cercano muchos de los usuarios que acceden a nuestros sitios lo harán a través del teléfono móvil, así que hay que estar preparados. Si te ves capacitado para crear una aplicación para el iPhone o para Android, ¡adelante! es la mejor solución. Y si no lo haces o aunque lo hagas es bueno tener bien optimizada la web para los móviles.</p>
<h5>Consideraciones básicas.</h5>
<p>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.</p>
<p>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.<br />
<img src="http://www.disenion.com/blog/wp-content/uploads/2010/09/iconos_movil.jpg" alt="" title="iconos_movil" width="460" height="84" class="alignleft size-full wp-image-1077" />
</div>
<div class="col-der">
<h5>Algunos recursos:</h5>
<p>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?</p>
<p>iPhone: <a href="http://iphonetester.com/">http://iphonetester.com/</a></p>
<p>Multiplataform: <a href="http://protofluid.com/">http://protofluid.com/</a></p>
<p>Si lo que quieres es convertir tu sitio web para móviles y no te quieres complicar mucho tienes varias opciones.</p>
<p>Mippin: <a href="http://mippin.com/web/">http://mippin.com/web/</a> 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</p>
<p>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 <a href="http://wordpress.org/extend/plugins/wordpress-mobile-pack/">http://wordpress.org/extend/plugins/wordpress-mobile-pack/</a>. Yo no soy excesivamente partidario de los plug-in pero no está nada mal este, fácil de usar y fácil de instalar.</p>
<p>Zinaddo: <a href="http://www.zinadoo.com/">http://www.zinadoo.com/</a> Desde esta web también podrás crear una versión móvil de tu sitio.
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.disenion.com/blog/sitios-web-para-el-movil/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Propuesta para la Web de un músico</title>
		<link>http://www.disenion.com/blog/propuesta-para-la-web-de-un-musico/</link>
		<comments>http://www.disenion.com/blog/propuesta-para-la-web-de-un-musico/#comments</comments>
		<pubDate>Tue, 20 Jan 2009 08:38:55 +0000</pubDate>
		<dc:creator>Diego González Villarejo</dc:creator>
				<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.disenion.com/blog/?p=114</guid>
		<description><![CDATA[<div class="col-der">
Que pena me dió que finalmente este proyecto no saliese adelante. El cliente me dijo que estaba encantado con el diseño, pero hubo algunos problemillas con el presupuesto y se echó atras:

<a href="http://www.disenion.com/blog/propuesta-para-la-web-de-un-musico/"><img class="aligncenter size-full wp-image-133" title="musica1" src="http://www.disenion.com/blog/wp-content/uploads/2009/01/musica1.jpg" alt="musica1" width="520" height="150" /></a>

<span id="more-114"></span>

La web estaba pensada para utilizarse como un blog, pero como nunca se llegó a utilizar no pasó del archivo de photoshop. Tengo en mente empezar a trabajar a pasar este diseño a un tema de Wordpress, pero ahora mismo no tengo demasido tiempo. De todos modos si alguien quiere el psd para trabajar sobre esa base puede descargarselo desde aquí: <a href="http://www.disenion.com/archivos/propuesta_web.zip">psd de web para músico.</a>

<img class="aligncenter size-full wp-image-134" title="musica2" src="http://www.disenion.com/blog/wp-content/uploads/2009/01/musica2.jpg" alt="musica2" width="520" height="519" />
</div>]]></description>
			<content:encoded><![CDATA[<div class="col-der">
Que pena me dió que finalmente este proyecto no saliese adelante. El cliente me dijo que estaba encantado con el diseño, pero hubo algunos problemillas con el presupuesto y se echó atras:</p>
<p><a href="http://www.disenion.com/blog/propuesta-para-la-web-de-un-musico/"><img class="aligncenter size-full wp-image-133" title="musica1" src="http://www.disenion.com/blog/wp-content/uploads/2009/01/musica1.jpg" alt="musica1" width="520" height="150" /></a></p>
<p><span id="more-114"></span></p>
<p>La web estaba pensada para utilizarse como un blog, pero como nunca se llegó a utilizar no pasó del archivo de photoshop. Tengo en mente empezar a trabajar a pasar este diseño a un tema de WordPress, pero ahora mismo no tengo demasido tiempo. De todos modos si alguien quiere el psd para trabajar sobre esa base puede descargarselo desde aquí: <a href="http://www.disenion.com/archivos/propuesta_web.zip">psd de web para músico.</a></p>
<p><img class="aligncenter size-full wp-image-134" title="musica2" src="http://www.disenion.com/blog/wp-content/uploads/2009/01/musica2.jpg" alt="musica2" width="520" height="519" />
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.disenion.com/blog/propuesta-para-la-web-de-un-musico/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Comprar Fíncas Rústicas</title>
		<link>http://www.disenion.com/blog/comprar-fincas-rusticas/</link>
		<comments>http://www.disenion.com/blog/comprar-fincas-rusticas/#comments</comments>
		<pubDate>Mon, 21 Apr 2008 07:46:00 +0000</pubDate>
		<dc:creator>Diego González Villarejo</dc:creator>
				<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://diegogv81.wordpress.com/2008/04/21/comprar-fincas-rusticas/</guid>
		<description><![CDATA[<div class="col-der">
<span style="font-family:arial;">Recien salida del horno. Una web </span><a href="http://www.fincasvillalon.com/"><span style="font-family:arial;">para comprar fincas rústicas</span></a><span style="font-family:arial;">. Espero que os guste.</span><br /><br /><br /><a href="http://www.fincasvillalon.com/"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" alt="" src="http://bp3.blogger.com/_GxKYZ1izwlg/SAxUypRzVPI/AAAAAAAAAA0/F9EIgXe2IzM/s400/fincas_peq.jpg" border="0" /></a>
</div>]]></description>
			<content:encoded><![CDATA[<div class="col-der">
<span style="font-family:arial;">Recien salida del horno. Una web </span><a href="http://www.fincasvillalon.com/"><span style="font-family:arial;">para comprar fincas rústicas</span></a><span style="font-family:arial;">. Espero que os guste.</span></p>
<p><a href="http://www.fincasvillalon.com/"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" alt="" src="http://bp3.blogger.com/_GxKYZ1izwlg/SAxUypRzVPI/AAAAAAAAAA0/F9EIgXe2IzM/s400/fincas_peq.jpg" border="0" /></a>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.disenion.com/blog/comprar-fincas-rusticas/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>animaticaudiovisual</title>
		<link>http://www.disenion.com/blog/animaticaudiovisual/</link>
		<comments>http://www.disenion.com/blog/animaticaudiovisual/#comments</comments>
		<pubDate>Tue, 24 Jul 2007 20:18:00 +0000</pubDate>
		<dc:creator>Diego González Villarejo</dc:creator>
				<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://diegogv81.wordpress.com/2007/07/24/animaticaudiovisual/</guid>
		<description><![CDATA[<div class="col-der">
<a href="http://www.animaticaudiovisual.com"><img style="display:block;text-align:center;cursor:pointer;margin:0 auto 10px;" src="http://bp0.blogger.com/_GxKYZ1izwlg/RqZszxn9f3I/AAAAAAAAAAk/R6KEZi6xIRo/s400/animaticpeq.jpg" alt="" border="0" /></a><span style="font-size:100%;"><span style="font-family:arial;">Hoy os traigo un link a una web de </span><a href="http://www.animaticaudiovisual.com/">Eventos Tecnicos Audiovisuales</a><span style="font-family:arial;"> que acabo de terminar. Se aceptan opiniones y sugerencias.</span><br /><br /><span style="font-family:arial;">Muchas gracias.</span></span>
</div>]]></description>
			<content:encoded><![CDATA[<div class="col-der">
<a href="http://www.animaticaudiovisual.com"><img style="display:block;text-align:center;cursor:pointer;margin:0 auto 10px;" src="http://bp0.blogger.com/_GxKYZ1izwlg/RqZszxn9f3I/AAAAAAAAAAk/R6KEZi6xIRo/s400/animaticpeq.jpg" alt="" border="0" /></a><span style="font-size:100%;"><span style="font-family:arial;">Hoy os traigo un link a una web de </span><a href="http://www.animaticaudiovisual.com/">Eventos Tecnicos Audiovisuales</a><span style="font-family:arial;"> que acabo de terminar. Se aceptan opiniones y sugerencias.</span></p>
<p><span style="font-family:arial;">Muchas gracias.</span></span>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.disenion.com/blog/animaticaudiovisual/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fotogaleria</title>
		<link>http://www.disenion.com/blog/fotogaleria/</link>
		<comments>http://www.disenion.com/blog/fotogaleria/#comments</comments>
		<pubDate>Sat, 20 Jan 2007 14:46:00 +0000</pubDate>
		<dc:creator>Diego González Villarejo</dc:creator>
				<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://diegogv81.wordpress.com/2007/01/20/fotogaleria/</guid>
		<description><![CDATA[<div class="col-der">
<span style="font-family:arial;">He colgado de mi web, 19 fotillos que me gustaban. No son muchas, pero tampoco es que sea un buen fotógrafo. Espero opiniones aquí mismo. Muchas gracias</span>

<a href="http://www.disenion.com/foto/galeria.htm" target="_blank"><img style="display:block;text-align:center;cursor:pointer;margin:0 auto 10px;" src="http://bp0.blogger.com/_GxKYZ1izwlg/RbIrxCrMvHI/AAAAAAAAAAM/mnsdH9jOJYY/s400/foto_galeria.gif" border="0" alt="Ir a la Fotogaleria" /></a>
</div>]]></description>
			<content:encoded><![CDATA[<div class="col-der">
<span style="font-family:arial;">He colgado de mi web, 19 fotillos que me gustaban. No son muchas, pero tampoco es que sea un buen fotógrafo. Espero opiniones aquí mismo. Muchas gracias</span></p>
<p><a href="http://www.disenion.com/foto/galeria.htm" target="_blank"><img style="display:block;text-align:center;cursor:pointer;margin:0 auto 10px;" src="http://bp0.blogger.com/_GxKYZ1izwlg/RbIrxCrMvHI/AAAAAAAAAAM/mnsdH9jOJYY/s400/foto_galeria.gif" border="0" alt="Ir a la Fotogaleria" /></a>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.disenion.com/blog/fotogaleria/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>DisenioN.com Por fin actualizada!!!</title>
		<link>http://www.disenion.com/blog/disenioncom-por-fin-actualizada/</link>
		<comments>http://www.disenion.com/blog/disenioncom-por-fin-actualizada/#comments</comments>
		<pubDate>Mon, 06 Nov 2006 08:55:00 +0000</pubDate>
		<dc:creator>Diego González Villarejo</dc:creator>
				<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://diegogv81.wordpress.com/2006/11/06/disenioncom-por-fin-actualizada/</guid>
		<description><![CDATA[<div class="col-der">
<a href="http://www.disenion.com"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" src="http://photos1.blogger.com/blogger2/6944/559097266956211/400/disenion_blog.jpg" border="0" alt="" /></a>
<span style="font-family:arial;">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.</span>

<a href="http://www.disenion.com"><span style="font-family:arial;">DisenioN : Diseño Gráfico y Diseño Web</span></a>

<span style="font-family:arial;">¡Un saludo a todos!</span>
</div>]]></description>
			<content:encoded><![CDATA[<div class="col-der">
<a href="http://www.disenion.com"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" src="http://photos1.blogger.com/blogger2/6944/559097266956211/400/disenion_blog.jpg" border="0" alt="" /></a><br />
<span style="font-family:arial;">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.</span></p>
<p><a href="http://www.disenion.com"><span style="font-family:arial;">DisenioN : Diseño Gráfico y Diseño Web</span></a></p>
<p><span style="font-family:arial;">¡Un saludo a todos!</span>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.disenion.com/blog/disenioncom-por-fin-actualizada/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Line Rider &#8211; ¡Cuidado que es adictivo!</title>
		<link>http://www.disenion.com/blog/line-rider-%c2%a1cuidado-que-es-adictivo/</link>
		<comments>http://www.disenion.com/blog/line-rider-%c2%a1cuidado-que-es-adictivo/#comments</comments>
		<pubDate>Mon, 16 Oct 2006 13:51:00 +0000</pubDate>
		<dc:creator>Diego González Villarejo</dc:creator>
				<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://diegogv81.wordpress.com/2006/10/16/line-rider-%c2%a1cuidado-que-es-adictivo/</guid>
		<description><![CDATA[<div class="col-der">
<a href="http://www.deviantart.com/deviation/40255643/"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" alt="" src="http://photos1.blogger.com/blogger2/6944/559097266956211/320/Line-Rider.0.jpg" border="0" /></a><br /><br /><div><div><span style="font-family:arial;">Line Rider. Más un entretenimiento que un juego, no hay ganadores no hay puntuaciones, solo diversión. Dibuja lineas en caida para mantener a nuestro chico del trineo. Podeis probarlo aquí, pero ya aviso es altamente adictivo:</span></div><br /><div><a href="http://www.deviantart.com/deviation/40255643/"><span style="font-family:arial;">Line Rider</span></a></div><div><span style="font-family:arial;"></span></div><br /><div><span style="font-family:arial;">Y a continuación os muestro algunos videos de gente que es muy buena en esto. Primero probadlo un par de veces y luego echadle un ojillo a los videos, disfrutad:</span></div><br /><div><a href="http://www.youtube.com/watch?v=LeBO8y5nRYU"><span style="font-family:arial;">http://www.youtube.com/watch?v=LeBO8y5nRYU</span></a></div><br /><div><a href="http://www.youtube.com/watch?v=oH7EwbGDmp0&#38;mode=related&#38;search"><span style="font-family:arial;">http://www.youtube.com/watch?v=oH7EwbGDmp0&#38;mode=related&#38;search</span></a><span style="font-family:arial;">=</span></div><br /><div><a href="http://www.youtube.com/watch?v=pkUTlMcrGQE&#38;mode=related&#38;search"><span style="font-family:arial;">http://www.youtube.com/watch?v=pkUTlMcrGQE&#38;mode=related&#38;search</span></a><span style="font-family:arial;">=</span></div><br /><div><a href="http://www.youtube.com/watch?v=kL8o0vD0rwI&#38;mode=related&#38;search"><span style="font-family:arial;">http://www.youtube.com/watch?v=kL8o0vD0rwI&#38;mode=related&#38;search</span></a><span style="font-family:arial;">=</span></div><br /><div><span style="font-family:arial;">Y muchos más!! Solo poned Line Rider en YouTube y disfrutad.</span></div></div>
</div>]]></description>
			<content:encoded><![CDATA[<div class="col-der">
<a href="http://www.deviantart.com/deviation/40255643/"><img style="display:block;cursor:hand;text-align:center;margin:0 auto 10px;" alt="" src="http://photos1.blogger.com/blogger2/6944/559097266956211/320/Line-Rider.0.jpg" border="0" /></a></p>
<div>
<div><span style="font-family:arial;">Line Rider. Más un entretenimiento que un juego, no hay ganadores no hay puntuaciones, solo diversión. Dibuja lineas en caida para mantener a nuestro chico del trineo. Podeis probarlo aquí, pero ya aviso es altamente adictivo:</span></div>
<p>
<div><a href="http://www.deviantart.com/deviation/40255643/"><span style="font-family:arial;">Line Rider</span></a></div>
<div><span style="font-family:arial;"></span></div>
<p>
<div><span style="font-family:arial;">Y a continuación os muestro algunos videos de gente que es muy buena en esto. Primero probadlo un par de veces y luego echadle un ojillo a los videos, disfrutad:</span></div>
<p>
<div><a href="http://www.youtube.com/watch?v=LeBO8y5nRYU"><span style="font-family:arial;">http://www.youtube.com/watch?v=LeBO8y5nRYU</span></a></div>
<p>
<div><a href="http://www.youtube.com/watch?v=oH7EwbGDmp0&amp;mode=related&amp;search"><span style="font-family:arial;">http://www.youtube.com/watch?v=oH7EwbGDmp0&amp;mode=related&amp;search</span></a><span style="font-family:arial;">=</span></div>
<p>
<div><a href="http://www.youtube.com/watch?v=pkUTlMcrGQE&amp;mode=related&amp;search"><span style="font-family:arial;">http://www.youtube.com/watch?v=pkUTlMcrGQE&amp;mode=related&amp;search</span></a><span style="font-family:arial;">=</span></div>
<p>
<div><a href="http://www.youtube.com/watch?v=kL8o0vD0rwI&amp;mode=related&amp;search"><span style="font-family:arial;">http://www.youtube.com/watch?v=kL8o0vD0rwI&amp;mode=related&amp;search</span></a><span style="font-family:arial;">=</span></div>
<p>
<div><span style="font-family:arial;">Y muchos más!! Solo poned Line Rider en YouTube y disfrutad.</span></div>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.disenion.com/blog/line-rider-%c2%a1cuidado-que-es-adictivo/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

