Archivo por meses: Agosto 2010

Ventiladores Sin aspas

Este curioso invento de Sir James Dyson (el mismo que inventó la aspiradora sin bolsa), se llama Dyson Air Multiplier y es un ventilador con la curiosa característica de que no posee aspas, sino que usa un pequeño motor que aspira aire desde la base y lo transporta hasta el círculo de donde emerge una corriente constante de aire, más suave que la de un ventilador común y corriente pero del mismo volumen.

Se trata de una nueva manera muy innovadora de proveer aire, ahora les explico, un ventilador común (del que todos conocemos) lanza corrientes de agua discontinuas, mientras que el ventilador de Dyson genera una fuente constante de aire, sin interrupciones, con menos ruido y lo mejor esque no hay riesgos de que nos vayamos a hagarrar un dedo x’D

Sin embargo, poseer esta maravilla de ventilador puede ser un lujo que no se justifique, pues el precio es de 199 libras (330 dólares). Algo caro.

A continuacion encontre un par de videos muy interesantes:

Como funciona 🙂

salu2

Proyecto con Wiimote en la Universidad

Bueno hace ya varios dias, probablemente una semana o mas que no he escrito nada en el blog por cuestiones de tiempo, y es que cuando uno entra a clases prácticamente vive en el campus hehe, bueno tengo 1 materia que probablemente es la mas interesante, es sobre desarrollo web y cualquier, donde se planea enseñar a los alumnos sobre las tecnologías webs como ajax, javascript, php, mysql, asp, y gestores de contenido, etc, etc nada que no sepa alguien que se considere un aficionado a la red jeje, se que me servira para reforzar mucho mas mis conocimientos sobre programación web 🙂

Aproposito y regresando a la temática de este post, el profesor de esa clase nos ha propuesto desarrollar un proyecto como trabajo final, algo utilizando el control (Wiimote) del Nintendo Wii, pues me he puesto a investigar y se que el lenguaje a utilizar ser C++ por las librerías que ya existen para el control.

Bueno encontre un post muy bueno sobre dicho tema y lo quiero compartir, dejando claro esta la fuente al final.

Lo interesante de la Wiimotelib es que permite que cada uno desarrolle la aplicación que desee, con los mandos de la Wii.

Por ejemplo, los fabricantes de juegos podrían incluir soporte para Wii en sus juegos de PC. Aunque esto es improbable mientras no acuerden algo con Nintendo.
No tengo una idea clara sobre cómo le cae a Nintendo toda esta movida, ya que por un lado es publicidad gratis, y podría generar un nuevo negocio para la compañía ya que la patente del Wiimote es propiedad de estos nipones. Además también se podría avanzar bastante en el uso de su sistema, y ¡gratis!
Porque Nintendo no paga a estos investigadores.

Por otro lado sabemos que a los fabricantes de consolas les gusta que se vendan juegos de consolas, y con estos proyectos pareciera que el rumbo es diferente. Sin embargo sabemos que Nintendo gana dinero con cada consola que vende, algo muy diferente a lo que pasa en Sony o Microsoft.

Volviendo a la Wiimotelib, la librería es bastante fácil de usar para alguien que tiene conocimientos en C#. Si no los tienes empieza a aprender ahora, no seas vago. Programar no es tan difícil como muchos dicen, y produce una gran satisfacción ver tus programas funcionando.

Yo una vez hice un programa en QuickBasic, y una placa que se conectaba al puerto LPT1 (el de la impresora ¡no! Ese es el USB digo el de las impresoras de antes)

Al presionar una tecla se encendía una lámpara, al presionar otra se apagaba. ¡Magia!

Luego le puse un Timer que la encendía y apagaba cada cierto tiempo. En definitiva, flipe como 4 años con eso.

Así que recomiendo empezar a programar, para el que no lo hace ya, y sobre todo recomiendo estas librerías, ya que se pueden hacer muchas cosas muy divertidas. Programar es mucho más que trabajar con bases de datos.

Con Wiimotelib se pueden hacer cosas como esta

Wii Drum High es un simulador de Bateria que deja boquiabierto a cualquier usuario de Guitar Hero ¡Incluso utiliza la Wii Balance Board!

El programa es gratuito, Su código fuente es abierto.

Para utilizarlo hace falta

  • Los mandos de la Wii, claro
  • Que tu ordenador tenga receptor Bluetooth
  • Windows Vista, o XP con Framework 3.5 instalado

Para conectar los mandos al ordenador utilizamos BlueSoleil, que detecta los mandos como “Human Interface Device

Si tienes los mandos y una portátil medianamente nueva probablemente tengas todo lo necesario.  Ya que las portátiles suelen traer Bluetooth.

¡Cuéntanos tu experiencia si lo pruebas!

Freaklances una serie muy Geek

Photobucket
La imagene es una caricatura muy bien hecha y profesinal de los creadores de la serie :O, Julio Garma & Alex Otero

Freaklances es una serie online que recientemente descubrí y tengo que decir que es de las mejores que he visto, nos cuenta la historia de Faustino aka Fausto, es un joven que tiene un trabajo freelance, por internet, como diseñador, me sentí identificado con el jaja, y que el a su vez tiene otros amigos que también tienen trabajos freelance, en cada episodio se revela un nuevo personaje de la serie, la primera temporada nada mas tiene 8 capítulos pero según los creadores pronto saldrá la segunda temporada, ha esta en español gallego, pero vale la pena verla, reirán por horas se los aseguro 🙂

No quiero hacer mas spoilers así que vean 100% recomendada.

Capítulo 01: El Renacer

Capítulo 02: ROI

Capítulo 03: La función debe continuar

Capítulo 04: El premio

Capítulo 05: El proceso inverso

Capítulo 06: Encuadre, objetivo y disparo

Capítulo 07: Punto y Croma

Capítulo 08: El nacer

WebSite Freaklances

Formularios bonitos con JQUERY

Photobucket

Bueno desde hace ya unas semanas quería darme un tiempo para hacer un post donde hablara de la creación de formularios web 2.0 usando la librería JAVASCRIPT de JQUERY, si han visto por ejemplo los formulario de registro de facebook, twitter, algunos blogs de wordpress o portales en joomla en los que cuando hacen clic en el input como que este sobresale y algunos otros que ya traen un texto con una leyenda de la información que tiene que ser incluida en el, veran como se ven de bonitos estéticamente ;).

Al terminar obtendremos un formulario como el que muestro a continuación:

Entonces en este post planeo mostrar el código explicado de un formulario básico con efecto de focus y blur (si ese que les comenten de que el input como que se enciende) y el efecto del texto por defecto … iniciamos.

Paso 1

Lo primero es crear la estructura y el HTML donde incluiremos los formularios, como este sera una pagina de registro muy sencilla nada mas incluiremos nombre, domicilio, mail y pagina web, el código nadamas es XHTML básico.

  Campos de entrada bonitos con JQUERY

<div id="container">

<h1>Complete el siguiente formulario para la Suscripción</h1>

<div class="seccion">

<h2>Nombre:</h2>

<input id="dato1" class="text" type="text" value="Escribe tu nombre ..." /></div>

<div class="seccion">

<h2>Domicilio:</h2>

<input id="dato2" class="text" type="text" value="Escribe tu domicilio..." /></div>

<div class="seccion">

<h2>Mail:</h2>

<input id="dato3" class="text" type="text" value="Escribe tu correo electronico..." /></div>

<div class="seccion">

<h2>Pagina web:</h2>

<input id="dato4" class="text" type="text" value="Escribe la url de tu web si tienes..." /></div>

<div class="button_centrar">
<input type="submit" value="Let's Go ..." /></div>
</div>

  <script src="jquery.js" type="text/javascript"><!--mce:0--></script>
  <script src="main.js" type="text/javascript"><!--mce:1--></script>

Paso 2

El 50% de la estética de nuestros formularios sera el código CSS, el que usamos en nuestras hojas de estilos, puedes escribir código y combinar colores y crear bordes hasta que quedes satisfecho el que he utilizado yo es el siguiente:

@CHARSET "UTF-8";

/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
  line-height: 1em;
  font-size: 12px;
  background: #262626 url(img/bg.png) repeat scroll 0 0;
  font-family: Myriad Pro, Arial, Helvetica, sans-serif;
  margin: 0pt;
  cursor: default;
}
table{
  border-collapse: separate;
  border-spacing: 0pt;
}
strong{
  font-weight: 700;
}
caption, th, td{
  font-weight:normal;
  text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after{
  content:"";
}
blockquote, q{
  quotes:"" "";
}
pre{
  font-family: Arial, Helvetica, sans-serif;
}
input{
  border: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
textarea{
  font-family: Arial, Helvetica, sans-serif;
  color: #888888;
  padding: 7px 3px 0 4px;
  font-size: 11px;
}
select{
  font-size: 11px;
  color: #888888;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #CAD2CE;
}
ul{
  list-style: none;
  list-style-type: none;
  list-style-position: outside;
}
a{
  cursor: pointer;
  color: #296ba5;
  text-decoration: none;
  outline: none !Important;
}
html,body{
  height:100%;
}
.clear{
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
  line-height: 0;
}
.clearfix{
  overflow: hidden;
}
.fleft{
  float: left;
}
.fright{
  float: right;
}
.italic{
  font-style: italic;
}
/******* FIN GENERAL RESET *******/

body{
  line-height: 1em;
  font-size: 12px;
  background: #262626 url(img/bg.png) repeat scroll 0 0;
  font-family: Myriad Pro, Arial, Helvetica, sans-serif;
  margin: 0pt;
  cursor: default;
}
/* Estilo del contenedor principal, lo centramos y le damos un espacio arriba */
div#container
{
  width: 700px;
  margin: 0pt auto;
  padding-top: 50px;
}
/* Clase de las secciones */
.seccion
{
  margin-bottom:20px;
}
/* Titulo principal */
h1
{
  color: #fff;
  font-size: 30px;
  line-height: 3em;
}
/* Decidi que los labels de los inputs fueran

<h2> para mayor comodidad */
/* Pero podria ser una clase o un identificador si quieren*/
h2
{
  color: #fff;
  font-size: 18px;
  display:block;
  float:left;
  text-align:right;
  padding-right:15px;
  width:100px;
  //width:150px;
  line-height: 3em;
}
input.text{
  width: 500px;
  background: #171717 url(img/search.png) no-repeat scroll right 2px;
  padding: 13px;
  color: #8c8c8c;
  border: 1px solid #393939;
  margin-bottom: 30px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  font-size: 16px;
}
input.text.active{
  background: #343434 url(img/search.png) no-repeat scroll right -43px;
  border-color: #000;
  color: #fff;
}
.button_centrar
{
  width:300px;
  margin:0 auto;
}
input[type="submit"] {
background:#343434;
border:1px solid #000;
color:#FFFFFF;
cursor:pointer;
font-size:11px;
font-weight:700;
height:40px;
line-height:28px;
outline-style:none;
padding:0 20px;
text-transform:uppercase;
width:200px;
}</h2>

Como ven al inicio puse un comentario que dice /******* GENERAL RESET *******/ el General Reset no es mas que un código css que nos permite reiniciar la mayoría de las propiedades de los elementos, la ventaja es que así tenemos un mayor control de como se ve el sitio en los navegadores webs (firefox, IE, Opera …), es una buena costumbre usarlo siempre :).

Paso 3

Ahora viene lo mas interesante y lo que hace la “magia”, en el código html vieron que agregue 2 lineas donde se mandan llamar codigos en javascript, las lineas son estas:

<script src="jquery.js" type="text/javascript"><!--mce:2--></script>
<script src="main.js" type="text/javascript"><!--mce:3--></script>

En la primera mandamos llamar el archivo jquery.js que es la libreria JQUERY de Javascript y en el segundo es donde se encuentra el codigo que hemos programado nosotros, para mayor comodidad he escrito el codigo en un archivo aparte.

Codigo Javascript

//Seccion de variables
var cajaBoxes = $(".text");
var cajaBox1 = $("#dato1");
var cajaBox2 = $("#dato2");
var cajaBox3 = $("#dato3");
var cajaBox4 = $("#dato4");
var defaultText1 = "Escribe tu nombre ...";
var defaultText2 = "Escribe tu domicilio...";
var defaultText3 = "Escribe tu correo electronico...";
var defaultText4 = "Escribe la url de tu web si tienes...";

//Seccion del evento de focus y blur
cajaBoxes.focus(function(){
  $(this).addClass("active");
});
cajaBoxes.blur(function(){
  $(this).removeClass("active");
});

//Seccion donde mostramos y ocultamos el texto correspondiente
//de cada input
//cajabox2
cajaBox1.focus(function(){
  if($(this).attr("value") == defaultText1) $(this).attr("value", "");
});
cajaBox1.blur(function(){
  if($(this).attr("value") == "") $(this).attr("value", defaultText1);
});

//cajabox2
cajaBox2.focus(function(){
  if($(this).attr("value") == defaultText2) $(this).attr("value", "");
});
cajaBox2.blur(function(){
  if($(this).attr("value") == "") $(this).attr("value", defaultText2);
});

//cajabox3
cajaBox3.focus(function(){
  if($(this).attr("value") == defaultText3) $(this).attr("value", "");
});
cajaBox3.blur(function(){
  if($(this).attr("value") == "") $(this).attr("value", defaultText3);
});

//cajabox4
cajaBox4.focus(function(){
  if($(this).attr("value") == defaultText4) $(this).attr("value", "");
});
cajaBox4.blur(function(){
  if($(this).attr("value") == "") $(this).attr("value", defaultText4);
});

Como ven el código no es nada del otro mundo, vamos a desglosar y analizar para que es cada cosa.

En la primera parte declaro variables globales, es de costumbre jeje y además ayuda en el tema de la optimización

//Seccion de variables
var cajaBoxes = $(".text");
var cajaBox1 = $("#dato1");
var cajaBox2 = $("#dato2");
var cajaBox3 = $("#dato3");
var cajaBox4 = $("#dato4");
var defaultText1 = "Escribe tu nombre ...";
var defaultText2 = "Escribe tu domicilio...";
var defaultText3 = "Escribe tu correo electronico...";
var defaultText4 = "Escribe la url de tu web si tienes...";

En la siguiente parte es donde manejamos el evento de Focus y el evento Blur, aquí añadimos la clase “active” cuando el usuario entra a un input y lo remueve cuando sale
//Seccion del evento de focus y blur
cajaBoxes.focus(function(){
  $(this).addClass("active");
});
cajaBoxes.blur(function(){
  $(this).removeClass("active");
});

Y por ultimo nos queda la parte del texto por defecto en los inputs, aqui nadamas compara si el input tiene el foco y el value del input es el valor del texto por defecto defaultText entonces le da un valor the null y eso hace que el texto desaparezca y podamos escribir 🙂 y para que se el texto aparezca al salir del foco del input compara si el value es nulo y entonces le asigna el texto por defecto .. sencillo 🙂
//Seccion donde mostramos y ocultamos el texto correspondiente
//de cada input
//cajabox2
cajaBox1.focus(function(){
  if($(this).attr("value") == defaultText1) $(this).attr("value", "");
});
cajaBox1.blur(function(){
  if($(this).attr("value") == "") $(this).attr("value", defaultText1);
});

//cajabox2
cajaBox2.focus(function(){
  if($(this).attr("value") == defaultText2) $(this).attr("value", "");
});
cajaBox2.blur(function(){
  if($(this).attr("value") == "") $(this).attr("value", defaultText2);
});

//cajabox3
cajaBox3.focus(function(){
  if($(this).attr("value") == defaultText3) $(this).attr("value", "");
});
cajaBox3.blur(function(){
  if($(this).attr("value") == "") $(this).attr("value", defaultText3);
});

//cajabox4
cajaBox4.focus(function(){
  if($(this).attr("value") == defaultText4) $(this).attr("value", "");
});
cajaBox4.blur(function(){
  if($(this).attr("value") == "") $(this).attr("value", defaultText4);
});

Bueno eso es todo, espero les haya gustado, si tiene alguna duda ponerla en los comentarios y con gusto les ayudare 😀

En mi próximo post planeo continuar con este formulario y comenzar a agregar validación de entrada de datos, veran que tambien es realmente sencillo :).

salu2

Ubuntu 10.10 Maverick Meerkat Alpha 3 listo para descargar

Photobucket

Como lo habían prometido los desarrolladores de Canonical el día de hoy ya esta disponible para descargar la versión 10.10 alpha numero 3 de Ubuntu que se llama Maverick Meerkat, tengan en cuenta que es una versión que esta todavia en desarrollo y no es recomendable usar el sistema operativo como sistema base, únicamente para hacer pruebas y reportar bugs 🙂

Pueden googlear para descargar el sistema operativo o para mayor comodidad en la web de Geekologia.net han publicado unos links de descarga de distintos servidores

http://cdimage.ubuntu.com/releases/maverick/alpha-3/ (Ubuntu)
http://cdimage.ubuntu.com/kubuntu/releases/maverick/alpha-3/ (Kubuntu)
http://cdimage.ubuntu.com/xubuntu/releases/maverick/alpha-3/ (Xubuntu)
http://cdimage.ubuntu.com/ubuntustudio/releases/maverick/alpha-3/ (Ubuntu Studio)

Lo hay con el entorno de escritorio que mas lo prefieran